/* ==========================================================================
   GENESIS cart + checkout
   Design source: "Nuova proposta grafica.dc.html" -> Funnel 2 (Checkout)
   Numbered steps, a sticky order summary, and a full-width gradient pay button.

   ⚠️ SHARED PARTS ONLY, now. This file dresses what the cart and the
   checkout have in common - fields, floating labels, checkboxes, select2, the
   notices, the payment methods, the buttons. The COMPOSITION of each page
   lives in cart.css and checkout.css, which pair with the templates this
   theme ships under woocommerce/cart and woocommerce/checkout (five of the
   parent's 23 overrides are shadowed there; the rest - Stripe, woo-wallet,
   coupons, the email-verification step - are still the parent's and only
   restyled).

   ⚠️ NOT implemented: the design's premise that "the Genesys account is created
   from the order email - no extra forms". Accounts come from the external auth
   server here, and that needs a backend contract that does not exist yet
   (docs/14). This styles the checkout that actually runs.
   ========================================================================== */

body.woocommerce-cart,
body.woocommerce-checkout {
  background-color: var(--gns-bg);
  color: var(--gns-text);
}
body.woocommerce-cart .site,
body.woocommerce-checkout .site,
body.woocommerce-cart #page,
body.woocommerce-checkout #page {
  background-color: var(--gns-bg);
}

/* --------------------------------------------------------- typography ---- */
/*
 * Scoped to .site-main, NOT to the body.
 *
 * The header lives inside #page.site and the footer is a sibling of it, so a
 * bare `body.woocommerce-cart a` reached both: on the cart and checkout the
 * footer links turned cyan and its body text grey, while every other page kept
 * the parent's white footer. .site-main is the page's own content region and
 * excludes both pieces of chrome.
 */

body.woocommerce-cart .site-main h1,
body.woocommerce-cart .site-main h2,
body.woocommerce-cart .site-main h3,
body.woocommerce-checkout .site-main h1,
body.woocommerce-checkout .site-main h2,
body.woocommerce-checkout .site-main h3 {
  font-family: var(--gns-font);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--gns-text);
  text-transform: none;
  /* The parent paints some headings as gradient text with a transparent fill;
     with no gradient behind them they render invisible (same bug as the product
     title). Force a solid fill. */
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  -webkit-text-fill-color: var(--gns-text) !important;
}

body.woocommerce-cart .site-main p,
body.woocommerce-cart .site-main label,
body.woocommerce-cart .site-main td,
body.woocommerce-checkout .site-main p,
body.woocommerce-checkout .site-main label,
body.woocommerce-checkout .site-main td {
  color: var(--gns-body);
}

body.woocommerce-cart .site-main a,
body.woocommerce-checkout .site-main a { color: var(--gns-cyan-ink); }

/* -------------------------------------------------------------- tables --- */

body.woocommerce-cart .shop_table,
body.woocommerce-checkout .shop_table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  background: var(--gns-card);
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-panel);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}

body.woocommerce-cart .shop_table th,
body.woocommerce-checkout .shop_table th {
  background: var(--gns-elevated);
  color: var(--gns-muted);
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
  border: 0;
}

body.woocommerce-cart .shop_table td,
body.woocommerce-checkout .shop_table td {
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--gns-border-faint);
  vertical-align: middle;
  background: transparent;
}

body.woocommerce-cart .shop_table .product-name a,
body.woocommerce-checkout .shop_table .product-name {
  color: var(--gns-text);
  font-weight: 500;
  text-decoration: none;
}
body.woocommerce-cart .product-price,
body.woocommerce-cart .product-subtotal,
body.woocommerce-checkout .product-total { color: var(--gns-text); font-weight: 700; }

body.woocommerce-cart .product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--gns-r-card);
  border: 1px solid var(--gns-border);
  background: var(--gns-elevated);
}

/* Remove ("×") button */
body.woocommerce-cart a.remove {
  width: 24px;
  height: 24px;
  line-height: 22px;
  border-radius: 50%;
  background: var(--gns-elevated) !important;
  border: 1px solid var(--gns-border-strong);
  color: var(--gns-secondary-2) !important;
  text-align: center;
  font-size: 14px;
}
body.woocommerce-cart a.remove:hover {
  background: var(--gns-magenta-tint) !important;
  border-color: var(--gns-border-magenta);
  color: var(--gns-magenta-ink) !important;
}

/* -------------------------------------------------------------- fields --- */

/* The quantity stepper is a shared component - see quantity.css. */

body.woocommerce-cart input.input-text,
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout textarea,
body.woocommerce-checkout select,
body.woocommerce-checkout .select2-selection {
  background-color: var(--gns-elevated) !important;
  color: var(--gns-text) !important;
  border: 1px solid var(--gns-border-strong) !important;
  border-radius: var(--gns-r-input);
  height: 46px;
  padding: 0 14px;
  font-family: var(--gns-font);
  font-size: 14px;
}
body.woocommerce-checkout textarea { height: auto; padding: 12px 14px; line-height: 1.55; }

/*
 * The parent theme carries `#order_comments { background: #fff !important }`.
 * That is an ID selector, so the grouped rule above - class-level - loses the
 * cascade even though both are !important. Matching the ID takes it back.
 */
body.woocommerce-checkout textarea#order_comments {
  background-color: var(--gns-elevated) !important;
  color: var(--gns-text) !important;
  border: 1px solid var(--gns-border-strong) !important;
}
body.woocommerce-cart ::placeholder,
body.woocommerce-checkout ::placeholder { color: var(--gns-muted); opacity: 1; }

body.woocommerce-cart input:focus,
body.woocommerce-checkout input:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout select:focus {
  outline: none;
  border-color: var(--gns-focus) !important;
  box-shadow: 0 0 0 3px var(--gns-cyan-tint);
}

/* select2 (WooCommerce country/state pickers) */
body.woocommerce-checkout .select2-container--default .select2-selection--single,
body.woocommerce-checkout .select2-dropdown {
  background: var(--gns-elevated);
  border-color: var(--gns-border-strong);
  color: var(--gns-text);
}
body.woocommerce-checkout .select2-container--default .select2-selection--single
  .select2-selection__rendered { color: var(--gns-text); line-height: 44px; }
/*
 * ⚠️ …and again with !important, because the value itself was never repainted.
 * `.select2-selection__rendered { color: #333 !important }`
 * (genesys/style.css:7601) outranks the rule above, so the chosen country and
 * province - "Italy", "Milano" - sat at 1.45:1 inside the dark field. Nothing
 * in the pre-open audit could see it: they are the only text in the control.
 */
body.woocommerce-checkout .select2-selection__rendered { color: var(--gns-text) !important; }
body.woocommerce-checkout .select2-selection__placeholder { color: var(--gns-muted) !important; }

body.woocommerce-checkout .select2-results__option { background: var(--gns-surface); color: var(--gns-body); }
body.woocommerce-checkout .select2-results__option--highlighted {
  background: var(--gns-cyan-tint-2) !important;
  color: var(--gns-text) !important;
}
/*
 * The dropdown's own search box, which only exists once the list is open -
 * Select2's stock white field with black text and a #F3F3F3 rule, dropped on
 * top of the dark page.
 */
body.woocommerce-checkout .select2-search--dropdown { background: transparent; }
/*
 * ⚠️ The two !importants answer genesys/style.css:4934, which is a bare
 * element selector - `input { background-color: …darkwhite !important;
 * color: …black !important }`. It is the same rule the field styling at the
 * top of this file already has to fight; it reaches this input too, and it is
 * why the dropdown's search box stayed a white slab with black text while its
 * border and radius from this very block applied normally.
 */
body.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--gns-elevated) !important;
  color: var(--gns-text) !important;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  font-family: var(--gns-font);
}
body.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--gns-focus);
}
body.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
  color: var(--gns-muted);
}
/* "No results found" and the loading row. */
body.woocommerce-checkout .select2-results__message,
body.woocommerce-checkout .select2-results__option[role="alert"] { color: var(--gns-muted); }

/*
 * The country list is 200-odd rows, so it always scrolls - and the browser's
 * default scrollbar drew a light strip down the side of the dark panel. Same
 * treatment the reserved-area rail uses.
 */
body.woocommerce-checkout .select2-results__options {
  scrollbar-width: thin;
  scrollbar-color: var(--gns-border-heavy) transparent;
}
body.woocommerce-checkout .select2-results__options::-webkit-scrollbar { width: 6px; }
body.woocommerce-checkout .select2-results__options::-webkit-scrollbar-track { background: transparent; }
body.woocommerce-checkout .select2-results__options::-webkit-scrollbar-thumb {
  background: var(--gns-border-heavy);
  border-radius: var(--gns-r-pill);
}
body.woocommerce-checkout .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: var(--gns-secondary);
}

/* ------------------------------------------------- billing form layout --- */
/*
 * The parent uses a floating-label pattern: the label is absolutely
 * positioned inside the field (`.woocommerce form .col-1 .form-row label`
 * -> position:absolute; top:10px) and the input carries
 * `padding: 25px 15px 5px 15px` to leave room for it.
 *
 * That padding is (0,3,2) and beat the height/padding set further up, which
 * are (0,2,2). With the browser default content-box the two combined into
 * fields roughly 78px tall - 25 + 46 + 5 + borders - which is what made the
 * form so long. border-box reconciles them: one declared height, padding
 * inside it, label still clear of the value.
 */
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row .select2-selection--single {
  box-sizing: border-box;
  height: 56px;
  padding: 24px 15px 6px !important;
}
body.woocommerce-checkout .woocommerce form .form-row textarea {
  height: auto;
  min-height: 88px;
}

/*
 * Pair the fields. WooCommerce marks nearly every billing row `form-row-wide`,
 * so the form ran as one tall single column. Grid items ignore float, which
 * is how WooCommerce lays out first/last, so only the percentage widths need
 * clearing. Spans are assigned per field rather than per position, so the
 * locale-driven reordering (and the fields a country hides entirely) still
 * flows correctly.
 */
@media (min-width: 720px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
    align-items: start;
  }
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
    width: auto;
    margin: 0;
    padding: 0;
  }
  /* Rows that read better across the full width. */
  body.woocommerce-checkout #billing_company_field,
  body.woocommerce-checkout #billing_country_field,
  body.woocommerce-checkout #billing_address_1_field,
  body.woocommerce-checkout #billing_address_2_field,
  body.woocommerce-checkout #billing_email_field,
  body.woocommerce-checkout #shipping_company_field,
  body.woocommerce-checkout #shipping_country_field,
  body.woocommerce-checkout #shipping_address_1_field,
  body.woocommerce-checkout #shipping_address_2_field {
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------------------- labels --- */

body.woocommerce-checkout .form-row label,
body.woocommerce-checkout .woocommerce-billing-fields label {
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gns-muted);
  margin-bottom: 6px;
  display: block;
}
/*
 * ⚠️ The ink above never landed on the billing labels. `.woocommerce form
 * .col-1 .form-row label` (genesys/style.css:3520) is (0,3,2) and the rule
 * above is (0,2,2), so every label kept the parent's #7D7D7D - 4.40:1 against
 * the field it floats inside, under AA, and visibly greyer than the design's
 * label ink. Matched at the parent's own specificity.
 */
body.woocommerce-checkout .woocommerce form .col-1 .form-row label,
body.woocommerce-checkout .woocommerce form .col-2 .form-row label,
body.woocommerce-checkout .woocommerce form .form-row label {
  color: var(--gns-muted);
}
/*
 * Order notes is the one label the parent moves out of the field and repaints:
 * `#order_comments_field label { color: #333 !important }`
 * (genesys/style.css:7621). An ID and an !important, so both are answered -
 * #333 on the page ground is 1.55:1, i.e. the label was invisible.
 */
body.woocommerce-checkout #order_comments_field label {
  color: var(--gns-muted) !important;
  font-size: 10px !important;
}
/*
 * WooCommerce core paints the required marker #a00 through
 * `.woocommerce form .form-row .required` (0,3,1) - a dark red that lands at
 * roughly 1.8:1 on this ground. Out-specify it rather than reach for
 * !important.
 */
body.woocommerce-checkout .required,
body.woocommerce-checkout .woocommerce form .form-row .required,
body.woocommerce-checkout abbr.required {
  color: var(--gns-magenta-ink);
  border: 0;
  text-decoration: none;
}

/*
 * Native checkboxes (terms, ship-to-different-address, "create an account")
 * render as a white box on the dark ground. accent-color only recolours the
 * checked fill, so the control is drawn from scratch instead.
 */
body.woocommerce-cart input[type="checkbox"],
body.woocommerce-checkout input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0 8px 0 0;
  padding: 0;
  vertical-align: -3px;
  /* The parent theme carries a blanket `input { background: ... !important }`,
     so every background here has to answer it in kind. */
  border: 1px solid var(--gns-border-strong) !important;
  border-radius: 4px;
  background: var(--gns-elevated) !important;
  cursor: pointer;
}
body.woocommerce-cart input[type="checkbox"]:checked,
body.woocommerce-checkout input[type="checkbox"]:checked {
  background: var(--gns-cyan) !important;
  border-color: var(--gns-cyan) !important;
}
body.woocommerce-cart input[type="checkbox"]:checked::after,
body.woocommerce-checkout input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--gns-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body.woocommerce-cart input[type="checkbox"]:focus-visible,
body.woocommerce-checkout input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gns-focus);
  outline-offset: 2px;
}

/*
 * WooCommerce core: `.woocommerce form .form-row .input-checkbox { display: inline }`
 * at (0,3,2), which outranks the rule above. width/height do not apply to a
 * non-replaced inline box, and `appearance: none` makes the control exactly
 * that - so on checkout the terms box collapsed to a sliver and the ::after
 * tick, which needs a positioned box, had nothing to sit in. Same hooks, one
 * step more specific.
 */
body.woocommerce-cart .woocommerce form .form-row input.input-checkbox,
body.woocommerce-checkout .woocommerce form .form-row input.input-checkbox {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 10px 0 0;
  vertical-align: -3px;
}

/* ------------------------------------------------------------ buttons ---- */

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #place_order,
body.woocommerce-cart .button[name="apply_coupon"],
body.woocommerce-cart .button[name="update_cart"] {
  font-family: var(--gns-font);
  font-weight: 700;
  border-radius: var(--gns-r-pill);
  border: 0;
  transition: filter .15s ease, transform .15s ease;
}

/* Primary: proceed to checkout / place order */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  background: var(--gns-gradient) !important;
  color: var(--gns-on-accent) !important;
  font-size: 15px;
  box-shadow: var(--gns-glow-cta);
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover { filter: brightness(1.06); }
body.woocommerce-checkout #place_order:active { transform: translateY(1px); }

/* Secondary: coupon / update cart */
body.woocommerce-cart .button[name="apply_coupon"],
body.woocommerce-cart .button[name="update_cart"] {
  height: 46px;
  padding: 0 20px;
  background: transparent !important;
  border: 1px solid var(--gns-border-heavy) !important;
  color: var(--gns-body) !important;
  font-weight: 500;
}
body.woocommerce-cart .button[name="apply_coupon"]:hover,
body.woocommerce-cart .button[name="update_cart"]:hover {
  border-color: var(--gns-cyan) !important;
  color: var(--gns-text) !important;
}
body.woocommerce-cart .button:disabled,
body.woocommerce-cart .button.disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------- totals ---- */

/*
 * The card belongs on .cart_totals, not on .cart-collaterals. WooCommerce
 * floats .cart_totals right at 48%, so painting the wrapper produced a
 * full-width panel with the totals huddled in its right half and dead space
 * on the left. Lay the wrapper out as a flex row instead and let the totals
 * be the card; .cross-sells (absent on this install, present on others) takes
 * the remaining track and both stack once there is no room.
 */
body.woocommerce-cart .cart-collaterals {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 24px;
}
body.woocommerce-cart .cross-sells {
  float: none;
  width: auto;
  flex: 1 1 320px;
}
body.woocommerce-cart .cart_totals {
  float: none;
  width: 100%;
  flex: 0 1 420px;
}

body.woocommerce-cart .cart_totals,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--gns-surface);
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-panel);
  padding: 20px;
}

/* The design keeps the summary in view while the form scrolls. */
@media (min-width: 1024px) {
  body.woocommerce-checkout .woocommerce-checkout-review-order {
    position: sticky;
    top: calc(var(--top-margin, 113px) + 16px);
  }
}

body.woocommerce-cart .cart_totals h2,
body.woocommerce-checkout #order_review_heading {
  font: 500 10px var(--gns-font-mono) !important;
  letter-spacing: .12em;
  text-transform: uppercase !important;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
  margin: 0 0 14px;
}

body.woocommerce-cart .cart_totals .shop_table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  background: transparent;
  border: 0;
}
body.woocommerce-cart .cart_totals th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th {
  background: transparent;
  padding: 10px 0;
}
body.woocommerce-cart .cart_totals td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: 10px 0;
  text-align: right;
}
body.woocommerce-cart .order-total th,
body.woocommerce-cart .order-total td,
body.woocommerce-checkout .order-total th,
body.woocommerce-checkout .order-total td {
  border-top: 1px solid var(--gns-border);
  color: var(--gns-text);
  font-size: 16px;
  font-weight: 700;
  padding-top: 14px;
}
body.woocommerce-cart .order-total .amount,
body.woocommerce-checkout .order-total .amount { color: var(--gns-text); }

/* ------------------------------------------------------------ payment ---- */

body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
  background: transparent !important;
  border-radius: var(--gns-r-panel);
}
body.woocommerce-checkout #payment ul.payment_methods {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
}
body.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--gns-card);
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-input);
  padding: 14px 16px;
  margin: 0 0 10px;
  color: var(--gns-body);
}
body.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--gns-border-cyan);
  background: var(--gns-cyan-tint);
}
body.woocommerce-checkout #payment div.payment_box {
  background: var(--gns-elevated) !important;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-input);
  color: var(--gns-body);
  margin-top: 12px;
}
/* WooCommerce draws a light triangle pointing at the selected method. */
body.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--gns-elevated) !important;
}

/* Stripe card field sits on its own iframe background. */
body.woocommerce-checkout .wc-stripe-elements-field,
body.woocommerce-checkout .StripeElement {
  background: var(--gns-elevated) !important;
  border: 1px solid var(--gns-border-strong) !important;
  border-radius: var(--gns-r-input);
  padding: 14px;
}

/* ------------------------------------------------------------ notices ---- */

body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
  background: var(--gns-card) !important;
  border: 1px solid var(--gns-border) !important;
  border-radius: var(--gns-r-input);
  color: var(--gns-body) !important;
  padding: 14px 16px;
}
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message {
  border-left: 3px solid var(--gns-cyan) !important;
}
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
  border-left: 3px solid var(--gns-magenta) !important;
}
/*
 * WooCommerce hangs an icon-font glyph off ::before on every notice. The
 * WooCommerce face registers but has no glyph at those codepoints here, so it
 * renders as a tofu box in WooCommerce blue. The coloured left border already
 * carries the notice's status, so drop the glyph and reclaim its indent.
 */
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-error::before {
  content: none !important;
}
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
  padding-left: 16px !important;
}

/* -------------------------------------------------------- empty cart ----- */

body.woocommerce-cart .cart-empty,
body.woocommerce-cart .wc-empty-cart-message {
  color: var(--gns-secondary);
  font-size: 16px;
  text-align: center;
}
body.woocommerce-cart .return-to-shop { text-align: center; margin-top: 18px; }
body.woocommerce-cart .return-to-shop .button {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 26px;
  border-radius: var(--gns-r-pill);
  background: var(--gns-gradient) !important;
  color: var(--gns-on-accent) !important;
  font-weight: 700;
  box-shadow: var(--gns-glow-cta);
}

/* ---------------------------------------------------------- coupon row --- */

body.woocommerce-cart .coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body.woocommerce-cart .coupon #coupon_code { max-width: 220px; }

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 780px) {
  body.woocommerce-cart .shop_table th { display: none; }
  body.woocommerce-cart .shop_table td { display: block; text-align: right; }
  body.woocommerce-cart .shop_table td::before { color: var(--gns-muted); float: left; }
}