/* Minimal styling for WooCommerce output the theme has not replaced yet. */

.st-woo {
  padding-block: var(--st-section-y);
}

/*
 * The notice rules that used to live here have moved to
 * components/notice.css. They covered `.woocommerce-notices-wrapper`'s
 * descendants only — which the checkout's AJAX error group is not — and
 * painted errors, successes and info identically. Both are fixed there;
 * this note is here so the next person looking for notice styling in the
 * WooCommerce shim finds it rather than concluding there is none.
 */

.widget_shopping_cart_content .woocommerce-mini-cart {
  padding: 0;
  margin: 0;
  list-style: none;
}

/*
 * The empty panel.
 *
 * Every other part of the mini-cart had its 16px inline padding (the item row,
 * the total, the buttons); the empty message never did. `.st-drawer__body` has
 * no padding of its own by design — it is the scroll container, and the parts
 * inside it own their own gutters — so WooCommerce's bare `<p>` landed flush
 * against the panel's edge with nothing but base.css's paragraph margin under
 * it, hard against the 2px rule.
 *
 * The generous block padding is the second half of the fix and the reason this
 * is not just `padding: 16px`. An empty drawer is a full-height panel with one
 * sentence in it; pinned to the top it reads as a rendering failure. Centred
 * in the first screenful, it reads as a state — which is what the handoff asks
 * for when it groups "Carrinho vazio, busca sem resultado" as a composition
 * rather than a stray line of text.
 */
.widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
  padding: 48px 16px 0;
  margin: 0;
  color: var(--st-muted);
  font-size: var(--st-size-body-sm);
  line-height: var(--st-lh-body);
  text-align: center;
}

/* MiniCart::render_empty_cta()'s way back to the shop, in the same 16px
   gutter as the message above it and the buttons a filled cart shows. */
.widget_shopping_cart_content .woocommerce-mini-cart__empty-cta {
  padding: 20px 16px;
  margin: 0;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-bottom: var(--st-rule-thin);
  font-size: var(--st-size-body-sm);
}

.widget_shopping_cart_content .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-top: var(--st-rule);
  font-weight: var(--st-weight-extrabold);
}

.widget_shopping_cart_content .woocommerce-mini-cart__buttons {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

.widget_shopping_cart_content .woocommerce-mini-cart__buttons a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--st-h-touch);
  padding: 0 14px;
  background: var(--st-ink);
  color: var(--st-surface);
  font-size: var(--st-size-label);
  font-weight: var(--st-weight-extrabold);
  text-decoration: none;
  text-transform: uppercase;
}

/*
 * Defect fix: WooCommerce's real proceed-to-checkout markup carries class
 * "checkout" (wc-template-functions.php's woocommerce_widget_shopping_cart_
 * proceed_to_checkout()) — a bare class stylelint's selector-class-pattern
 * (.stylelintrc.json, frozen) does not allow. woocommerce_widget_shopping_
 * cart_buttons hooks "view cart" at priority 10 and "checkout" at priority
 * 20, so the checkout link is always the second/last of the two buttons —
 * :last-child targets the same real element without a disallowed class.
 */
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a:last-child {
  background: var(--st-accent);
}

/*
 * The remove-coupon link, on every screen that can show one.
 *
 * `wc_cart_totals_coupon_html()` prints it (woocommerce/cart/cart-totals.php
 * on the cart, woocommerce/checkout/review-order.php on the checkout), and
 * WooCommerce's own frontend/cart.js and frontend/checkout.js bind a real AJAX
 * remove handler to exactly this class — which is why it keeps core's name
 * rather than an `st-` one, the same precedent `[class~="product-remove"]`
 * already set.
 *
 * It lives in a COMPONENT sheet rather than in a screen sheet on purpose.
 * `Setup\Assets::screen()` loads exactly one `screens/*.css` per request, so
 * the copy that used to sit in screens/cart.css never reached
 * /finalizar-compra/: once Task 7's summary started rendering this control,
 * the checkout shipped a real, AJAX-wired link with no colour, no `:active`
 * and no touch target, and only while a coupon was applied — which is why no
 * test caught it (task-7-report.md, fix round 1). One rule, both screens, no
 * way for them to drift.
 *
 * Unstyled it inherits the discount row's red and the browser's default
 * underlined-link look; this gives it its own, more secondary colour so the
 * discount AMOUNT beside it stays the visually primary red.
 */
.woocommerce-remove-coupon {
  margin-inline-start: 6px;
  color: var(--st-muted);
  font-size: var(--st-size-caption);
}

.woocommerce-remove-coupon:hover,
.woocommerce-remove-coupon:active {
  color: var(--st-accent-deep);
}

/*
 * Touch target: this link sits inline beside a price inside a compact summary
 * row — growing it to a real 44px box unconditionally would inflate that one
 * row far past every other row's height on both screens. Same hit-area-overlay
 * technique `.st-cart__remove` / `.st-stepper` already use for the identical
 * tension (a visual size the design constrains, still needing 44px on a real
 * touch device): the link stays inline-sized visually and only gets the
 * enlarged hit box on a coarse pointer.
 */
@media (pointer: coarse) {
  .woocommerce-remove-coupon {
    position: relative;
    display: inline-block;
  }

  .woocommerce-remove-coupon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: var(--st-h-touch);
    height: var(--st-h-touch);
    transform: translate(-50%, -50%);
  }
}