/* ==========================================================================
   Cart + Checkout — only enqueued on those two templates (see
   inc/enqueue.php). Checkout runs on WooCommerce's Checkout BLOCK (Gutenberg),
   not the classic shortcode template, so this targets wc-block-components-*
   classes rather than the older woocommerce-checkout ones.
   ========================================================================== */

/* ---------- layout ---------- */
/* Deliberately NOT touching .wc-block-checkout's own gap/grid — WC Blocks
   uses that same container's measured width via JS to decide when to
   switch between its "is-large" (2-column) and mobile (stacked) layouts.
   Widening the gap here once pushed the usable column width below its own
   breakpoint and silently forced the stacked layout even at 1400px. */
.wc-block-components-checkout-step__title{
  font-family: var(--font-display); font-weight:400; letter-spacing:0.03em; text-transform:uppercase;
}
/* Each step as its own card (bg + radius + shadow), not just a plain
   heading sitting in the flow — the fields all blended into one continuous
   list before, with nothing marking where "contato" ended and "endereço"
   began. */
.wc-block-components-checkout-step{
  border: none !important; background: var(--surface); border-radius:16px;
  padding: 1.6rem 1.7rem !important; margin-bottom: 1.2rem;
  box-shadow: 0 8px 24px -18px rgba(23,20,15,0.35);
}
.wc-block-components-checkout-step__heading{ margin-bottom: 0.3rem !important; }
.wc-block-components-checkout-step__description{ color: var(--ink-mute) !important; }
/* Numbered badge in front of each step title — reads as a guided sequence
   ("1. contato → 2. endereço → 3. pagamento") instead of a wall of fields,
   closer to how the higher-trust checkouts we're matching present it. */
.wc-block-components-checkout-step__title{ display:flex; align-items:center; gap:0.7rem; }
.wc-block-components-checkout-step{ counter-increment: gyo-checkout-step; position:relative; }
.wc-block-checkout__form{ counter-reset: gyo-checkout-step; }
.wc-block-components-checkout-step__title::before{
  content: counter(gyo-checkout-step);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:1.7rem; height:1.7rem; border-radius:50%; background:var(--ink); color:#F3EBDF;
  font-family: var(--font-sans); font-size:0.78rem; font-weight:600; text-transform:none; letter-spacing:0;
}

/* ---------- inputs ---------- */
.wc-block-components-text-input input,
.wc-block-components-text-input select,
.wc-block-components-address-form select{
  border-color: var(--line-strong) !important; border-radius:8px !important; background: var(--surface) !important;
}
.wc-block-components-text-input label{ color: var(--ink-mute) !important; }
.wc-block-components-text-input.is-active input, .wc-block-components-text-input input:focus{
  border-color: var(--ink) !important; box-shadow: none !important;
}
.wc-block-components-checkbox svg{ color: var(--ink) !important; }
.wc-block-components-radio-control__option-checked .wc-block-components-radio-control__label,
.wc-block-components-radio-control input:checked + label{ color: var(--ink); }

/* ---------- order summary sidebar (card, not a bare column of text) ---------- */
.wc-block-checkout__sidebar{
  background: var(--surface); border-radius:16px; padding: 1.6rem 1.7rem;
}
.wc-block-components-order-summary__button-text,
.wc-block-components-totals-item{ font-size:0.86rem; }
.wc-block-components-totals-item__label{ color: var(--ink-soft); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family: var(--font-display); font-size:1.2rem; font-weight:400; letter-spacing:0.02em; text-transform:none;
}
.wc-block-components-order-summary-item__individual-prices{ color: var(--ink-mute); }
.wc-block-components-panel{ border-color: var(--line) !important; }
.wc-block-components-panel__button{ color: var(--ink) !important; font-size:0.84rem; }

/* Frete-grátis progress bar (woo-better-shipping-calculator-for-brazil) —
   hardcodes a bright green (#4caf50) with inline styles, no PHP-side color
   option to configure like its CEP-widget sibling does; !important is the
   only way to reskin it to the brand's ink/cream tones instead of a random
   supermarket-green bar sitting in an otherwise monochrome checkout. */
/* :not(.wc-better-shipping-progress-text) matters — this plugin renders
   TWO direct-child divs here (the actual progress track, and a plain text
   caption below it with no class of its own on the track div to key off
   instead). The un-excluded `> div` selector was catching the caption too:
   border-radius:999px + overflow:hidden on a plain text box makes it a
   pill shape, whose rounded left/right ends clip into the first and last
   characters — "Falta(m)..." was rendering as "alta(m)...". */
.wc-better-shipping-progress-bar > div:not(.wc-better-shipping-progress-text){ background: var(--line) !important; border-radius:999px !important; overflow:hidden; }
.wc-better-shipping-progress{ background: var(--ink) !important; border-radius:999px !important; }
.wc-better-shipping-progress-bar{ margin: 0 0 1.2rem !important; padding: 0 !important; }

/* ---------- place order button + trust line ---------- */
.wc-block-components-checkout-place-order-button{
  background: var(--ink) !important; color:#F3EBDF !important; border:none !important; border-radius:999px !important;
  font-size: var(--fs-label) !important; font-weight:600 !important; letter-spacing:0.1em !important; text-transform:uppercase !important;
  padding: 1rem 1.9rem !important; height:auto !important;
}
.wc-block-components-checkout-place-order-button:hover{ background:#2A241B !important; }
.wc-block-components-checkout-place-order-button:disabled{ background: var(--ink-mute) !important; color:#F3EBDF !important; }

.gyo-checkout-trust{
  display:flex; align-items:center; justify-content:center; gap:1.4rem; flex-wrap:wrap;
  margin-top:1.1rem; font-size:0.72rem; color:var(--ink-mute);
}
.gyo-checkout-trust span{ display:flex; align-items:center; gap:0.4rem; }
.gyo-checkout-trust svg{ flex-shrink:0; }

@media (max-width: 780px){ .wc-block-checkout__sidebar{ padding: 1.3rem 1.4rem; } }

/* ==========================================================================
   Cart page — never had its own styling before (only shared component
   classes above, which also apply to Checkout), so it was rendering as
   WooCommerce Blocks' plain default table: no card, no brand type, thin
   default quantity stepper, generic gray remove icon.
   ========================================================================== */
.wc-block-cart-items{
  background: var(--surface); border-radius:16px; padding: 0.4rem 1.7rem;
  border-collapse:collapse; width:100%;
}
.wc-block-cart-items__header{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); }
.wc-block-cart-items__header th{ border-bottom:1px solid var(--line); padding-bottom:0.9rem; font-weight:600; }
.wc-block-cart-items__row td{ border-bottom:1px solid var(--line); padding:1.4rem 0; vertical-align:top; }
.wc-block-cart-items__row:last-child td{ border-bottom:none; }
.wc-block-cart-item__image img{ border-radius:10px; width:5rem !important; height:5rem !important; object-fit:cover; }
.wc-block-components-product-name{
  font-family: var(--font-display); text-transform:uppercase; font-size:0.92rem; font-weight:400; letter-spacing:0.02em;
  color:var(--ink) !important; text-decoration:none !important;
}
.wc-block-cart-item__prices{ display:none; } /* redundant with the row's own .wc-block-cart-item__total column */
.wc-block-components-product-metadata{ margin-top:0.3rem; }
.wc-block-components-product-details{ color:var(--ink-mute) !important; font-size:0.8rem; }
.wc-block-cart-item__total .price{ font-weight:600; font-variant-numeric: tabular-nums; }

/* Quantity stepper — same pill shape as the PDP's, not WC's thin default
   number input with plain +/- buttons floating loose beside it. */
.wc-block-components-quantity-selector{
  display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; margin-top:0.9rem;
}
.wc-block-components-quantity-selector__button{
  background:none; border:none; width:2rem; height:2rem; cursor:pointer; color:var(--ink); font-size:1rem;
}
.wc-block-components-quantity-selector__button:hover{ background:var(--bg); }
.wc-block-components-quantity-selector__input{
  border:none !important; background:none !important; width:2.4rem !important; text-align:center; font-size:0.86rem; font-variant-numeric: tabular-nums;
}
.wc-block-cart-item__remove-link{
  display:inline-flex; align-items:center; justify-content:center; margin-left:0.7rem; margin-top:0.9rem;
  width:2rem; height:2rem; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink-mute); cursor:pointer;
  vertical-align:top; transition: color .15s ease, border-color .15s ease;
}
.wc-block-cart-item__remove-link svg{ width:1rem; height:1rem; }
.wc-block-cart-item__remove-link:hover{ color:#B3261E; border-color:#B3261E; }

/* Sidebar totals — same card language as Checkout's own sidebar. */
.wc-block-cart__sidebar{ background: var(--surface); border-radius:16px; padding: 1.6rem 1.7rem; }
.wc-block-cart__totals-title{ font-size:1.05rem; font-weight:400; letter-spacing:0.02em; margin-bottom:0.4rem; }
.wc-block-cart__submit-button{
  background: var(--ink) !important; color:#F3EBDF !important; border:none !important; border-radius:999px !important;
  font-size: var(--fs-label) !important; font-weight:600 !important; letter-spacing:0.1em !important; text-transform:uppercase !important;
  padding: 1rem 1.9rem !important; height:auto !important; width:100%;
}
.wc-block-cart__submit-button:hover{ background:#2A241B !important; }

.wc-block-cart__main{ min-width:0; }
@media (max-width: 780px){ .wc-block-cart-items{ padding: 0.4rem 1.1rem; } }