/* ==================================================================
   SeeThru — Commerce skin (Cart + Checkout)
   Dark, premium reskin layered on Rey's WooCommerce widgets
   (.rey-cartPage / .rey-checkoutPage). Markup + Rey step JS untouched.

   SCOPING RULE (important): every *content* rule is gated under
   `.stx-commerce :is(.rey-cartPage,.rey-checkoutPage)` so nothing ever
   leaks into the site header/footer (which previously recoloured the
   cart count, bag icon, and Request-a-quote button). Only the page
   background, the wrapper-transparency, Rey token re-pointing, and the
   body-appended Select2 dropdown live at the page level.
   ================================================================== */

body.stx-commerce {
  /* Ink foundation */
  --ink-950:#0A0A0B; --ink-900:#101012; --ink-850:#161618; --ink-800:#1C1C1F;
  --ink-700:#26262A; --ink-600:#3A3A40; --ink-500:#5C5C63; --ink-400:#86868B;
  --ink-300:#B5B5BA; --ink-200:#D6D6D9; --ink-100:#ECECEE; --ink-50:#F5F5F7; --ink-0:#FFFFFF;

  /* Brand CTA = blue (site primary). Titanium kept only as a faint hairline. */
  --cta:#2563EB; --cta-h:#1D4ED8; --cta-on:#FFFFFF;
  --acc:#F5F5F7;

  /* Signal */
  --ok:#4ADE80; --warn:#F5A524; --err:#EF4444;

  /* Semantic surfaces */
  --c-text:#F5F5F7; --c-text-2:#C2C2C8; --c-text-3:#8C8C93;
  --c-surface:#17171C; --c-surface-2:#1E1E24; --c-field:#101015; --c-field-2:#16161B;
  --c-line:rgba(255,255,255,.12); --c-line-2:rgba(255,255,255,.2);

  --ff-disp:'Geist','Inter Tight',system-ui,sans-serif;
  --ff-body:'Geist','Inter',system-ui,sans-serif;
  --ls-eyebrow:.16em; --ls-wide:.05em; --ls-tight:-.02em;

  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r2:6px; --r3:10px; --r4:14px; --r5:18px; --pill:999px;
  --ease:cubic-bezier(.16,1,.3,1); --fast:160ms; --base:300ms;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 50px -24px rgba(0,0,0,.85);
  --shadow-lg:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 90px -40px rgba(0,0,0,.9);
  --focus:0 0 0 4px rgba(37,99,235,.30);

  background:
    radial-gradient(1200px 700px at 50% -8%, #141318 0%, transparent 60%),
    linear-gradient(180deg,#0A0A0B 0%,#08080A 100%) !important;
}

/* ------------------------------------------------------------------
   Header anti-jump. Rey's fixed-header reserves page space with a helper
   spacer sized from --header-default--height (a 150px leftover from Rey's
   DEFAULT header — the real custom mega-header is 78px) and loads the header
   "relative-first" then switches to position:fixed via JS. That mismatch +
   swap drops content ~80px a second after load. We pin it from first paint;
   desktop reserves the full header, mobile uses a compact overlay-style spacer.
   ------------------------------------------------------------------ */
body.stx-commerce { --header-default--height:52px; }
@media (max-width:1024px){
  body.stx-commerce { --header-default--height:7px; }
}
body.stx-commerce .rey-siteHeader.header-pos--fixed { position:fixed !important; }
body.stx-commerce #rey-siteHeader-helper {
  display:block !important;
  height:var(--header-default--height) !important;
  min-height:var(--header-default--height) !important;
}

/* Wrapper chain → transparent so the dark canvas shows. Scoped to #main so
   the header and footer keep their own backgrounds. */
body.stx-commerce #page,
body.stx-commerce .rey-siteWrapper,
body.stx-commerce #content,
body.stx-commerce .rey-siteContent,
body.stx-commerce .rey-siteContainer,
body.stx-commerce .rey-siteRow,
body.stx-commerce #main,
body.stx-commerce .rey-siteMain,
body.stx-commerce #main .elementor,
body.stx-commerce #main [class*="e-con"],
body.stx-commerce #main .elementor-widget-container { background:transparent !important; }

/* ------------------------------------------------------------------
   Rey token re-pointing — Rey's cart/checkout read these custom props
   (panels, fields, borders). The site body token is light, which is why
   the default pages look unfinished. Re-point to our dark palette so the
   whole Rey system flips natively (no per-element !important needed).
   ------------------------------------------------------------------ */
body.stx-commerce .rey-cartPage,
body.stx-commerce .rey-checkoutPage,
body.stx-commerce .rey-checkoutPage.--layout-custom,
body.stx-commerce .rey-cartPage.--layout-custom {
  --body-bg-color:#0E0E10;
  --body-color:var(--c-text);
  --link-color:var(--c-text);
  --link-color-hover:#7AA2F2;

  --checkout-bg-colors:var(--c-surface);
  --checkout-bg-colors-secondary:var(--c-surface-2);
  --checkout-text-colors:var(--c-text);
  --checkout-border-color:var(--c-line);
  --checkout-border-size:1px;
  --checkout-border-radius:14px;

  --checkout-fields-bg:var(--c-field);
  --checkout-fields-text:var(--c-text);
  --checkout-fields-border-color:var(--c-line-2);
  --checkout-fields-border-size:1px;
  --checkout-fields-focus-bg:var(--c-field-2);
  --checkout-fields-focus-text:var(--c-text);
  --checkout-fields-focus-border-color:var(--cta);
  --checkout-fields-focus-border-size:1px;

  --checkout-review-border-color:var(--c-line);
}

/* Container base */
body.stx-commerce .rey-cartPage,
body.stx-commerce .rey-checkoutPage {
  color:var(--c-text); font-family:var(--ff-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.stx-commerce .rey-cartPage *,
body.stx-commerce .rey-checkoutPage *,
body.stx-commerce .rey-cartPage *::before,
body.stx-commerce .rey-checkoutPage *::before { box-sizing:border-box; }
body.stx-commerce .rey-cartPage-inner,
body.stx-commerce .rey-checkoutPage-inner { padding-block:4px 0; }

/* Pull the Cart/Checkout page title + content higher: trim Rey's main padding,
   the Elementor container gap, and the heading's own spacing. (The ~78px above
   the title is the fixed-header clearance and can't be removed.) */
body.stx-commerce .rey-siteMain { padding-top:0 !important; padding-bottom:24px !important; }
body.stx-commerce #main .e-con-top { padding-top:0 !important; padding-bottom:2px !important; }
body.stx-commerce #main .e-con-inner { gap:6px !important; }
body.stx-commerce .elementor-widget-heading { margin-block:0 !important; }
body.stx-commerce .elementor-widget-heading .elementor-heading-title { margin:0 !important; line-height:1.08; }

/* Content links (scoped — never touches header/footer) */
body.stx-commerce .rey-cartPage a,
body.stx-commerce .rey-checkoutPage a { transition:color var(--fast) var(--ease); }
body.stx-commerce .rey-cartPage a:hover,
body.stx-commerce .rey-checkoutPage a:hover { color:#7AA2F2; }

/* ---------- Headings / titles ---------- */
body.stx-commerce .rey-cartPage .rey-checkoutPage-title,
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-title,
body.stx-commerce .rey-cartPage .cart_totals h2,
body.stx-commerce .rey-checkoutPage #order_review_heading,
body.stx-commerce .rey-checkoutPage .rey-accountPanel-title,
body.stx-commerce .rey-checkoutPage.--layout-custom .rey-checkoutPage-title {
  font-family:var(--ff-disp); color:var(--c-text) !important;
  font-weight:600 !important; letter-spacing:var(--ls-tight); line-height:1.2;
}
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-title {
  font-size:clamp(1.05rem,1.6vw,1.25rem); margin-bottom:var(--s4);
}
/* The billing heading text is now set in PHP (commerce.php renames it to
   "Address" on checkout). Here we NEUTRALISE the page's fragile Elementor
   custom-CSS hack (font-size:0 on the title + ::after content:"Address") so the
   real text renders and nothing double-prints. */
body.stx-commerce .rey-checkoutPage .rey-checkoutDetails-billing .rey-checkoutPage-title { font-size:clamp(1.05rem,1.6vw,1.25rem) !important; }
body.stx-commerce .rey-checkoutPage .rey-checkoutDetails-billing .rey-checkoutPage-title::after { display:none !important; content:none !important; }

/* =================================================================
   1 · Checkout — progress steps (Claude Design "Checkout.html" .co__steps)
   ================================================================= */
/* Rey markup: alternating <li> — a step <li> holds <a data-step data-number>Label</a>,
   a separator <li> holds a chevron svg. Rey flags only the current step
   (li.--active); the rest derive in CSS:
     done = li:has(a):has(~ li.--active) · current = li.--active · upcoming = li.--active ~ li
   The site runs Rey's `--crumbs-extended` mode, whose a[data-number]:before is a
   4em circle with the label beneath (high specificity), so the compact-stepper
   geometry is forced with !important to win. */
body.stx-commerce .rey-checkoutPage-crumbs { margin:0 0 var(--s6) !important; }
body.stx-commerce .rey-checkoutPage-crumbs ul {
  display:flex !important; align-items:center !important; flex-wrap:wrap;
  justify-content:flex-start !important; gap:10px !important; margin:0; padding:0; list-style:none;
  text-transform:none !important;
}
/* separators → a thin chevron (Rey's svg hidden) */
body.stx-commerce .rey-checkoutPage-crumbs li:has(.rey-icon-arrow) { font-size:0; line-height:0; margin:0 !important; padding:0 !important; opacity:1 !important; }
body.stx-commerce .rey-checkoutPage-crumbs li:has(.rey-icon-arrow) svg { display:none !important; }
body.stx-commerce .rey-checkoutPage-crumbs li:has(.rey-icon-arrow)::after {
  content:"\203A"; font-size:15px; line-height:1; color:var(--ink-600);
}
/* a step: node + label inline */
body.stx-commerce .rey-checkoutPage-crumbs li:has(a) { margin:0 !important; padding:0 !important; }
body.stx-commerce .rey-checkoutPage-crumbs li a,
body.stx-commerce .rey-checkoutPage-crumbs a {
  display:inline-flex !important; align-items:center; gap:7px; text-decoration:none !important;
  font-family:var(--ff-disp); font-size:.82rem; font-weight:500; letter-spacing:0;
  text-transform:none !important; color:var(--ink-500) !important; transition:color var(--fast) var(--ease);
}
body.stx-commerce .rey-checkoutPage-crumbs a:hover { text-decoration:none !important; }
/* the node circle (default = upcoming: small, hollow, muted) — beats --crumbs-extended */
body.stx-commerce .rey-checkoutPage-crumbs a[data-number]::before {
  content:attr(data-number) !important;
  width:19px !important; height:19px !important; min-width:19px !important; max-width:19px !important;
  margin:0 !important; border-radius:50% !important; box-sizing:border-box !important;
  display:grid !important; place-items:center !important;
  font-family:var(--ff-mono,var(--ff-disp)) !important; font-size:.62rem !important; font-weight:600 !important; line-height:1 !important;
  border:1px solid var(--ink-600) !important; color:var(--ink-400) !important; background:transparent !important;
  opacity:1 !important; text-decoration:none !important;
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
/* DONE — solid blue node + check glyph */
body.stx-commerce .rey-checkoutPage-crumbs li:has(a):has(~ li.--active) a { color:var(--ink-300) !important; }
body.stx-commerce .rey-checkoutPage-crumbs li:has(a):has(~ li.--active) a[data-number]::before {
  content:"\2713" !important; background:var(--cta) !important; border-color:var(--cta) !important; color:#fff !important; font-size:.66rem !important;
}
/* CURRENT — solid light node, bright label */
body.stx-commerce .rey-checkoutPage-crumbs li.--active a { color:var(--ink-50) !important; }
body.stx-commerce .rey-checkoutPage-crumbs li.--active a[data-number]::before {
  content:attr(data-number) !important; background:var(--ink-50) !important; border-color:var(--ink-50) !important; color:#0A0A0B !important;
}
/* UPCOMING — muted node + label (override Rey's li.--active~li opacity:.4) */
body.stx-commerce .rey-checkoutPage-crumbs li.--active ~ li { opacity:1 !important; }
body.stx-commerce .rey-checkoutPage-crumbs li.--active ~ li a { color:var(--ink-500) !important; }
body.stx-commerce .rey-checkoutPage-crumbs li.--active ~ li a[data-number]::before { opacity:.6 !important; }
/* DEPOSIT: Shipping is dropped, so Rey's payment crumb keeps data-number="4"
   though it's visually the 3rd step. Show "3" to match the design's
   Cart → Information → Confirmation numbering. (Payment is always last, never
   "done", so one override covers its active + upcoming states.) */
body.stx-deposit-mode .rey-checkoutPage-crumbs li a[data-step="payment"][data-number]::before { content:"3" !important; }
/* hover on reachable steps (done + current) */
body.stx-commerce .rey-checkoutPage-crumbs li:has(a):has(~ li.--active) a:hover,
body.stx-commerce .rey-checkoutPage-crumbs li.--active a:hover { color:var(--ink-100) !important; }
@media (max-width:560px){
  body.stx-commerce .rey-checkoutPage-crumbs ul { gap:8px !important; }
  body.stx-commerce .rey-checkoutPage-crumbs a { font-size:.74rem; gap:6px; }
}

/* =================================================================
   2 · Panels — steps, review, recap, login, totals
   ================================================================= */
body.stx-commerce .rey-checkoutPage .__step,
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-couponMobile,
body.stx-commerce .rey-checkoutPage .rey-accountPanel-form,
body.stx-commerce .rey-cartPage .cart_totals {
  background:var(--c-surface) !important;
  border:1px solid var(--c-line); border-radius:var(--r5); box-shadow:var(--shadow);
}
body.stx-commerce .rey-checkoutPage .__step { padding:clamp(24px,2.6vw,40px) !important; }
body.stx-commerce .rey-checkoutPage .__step + .__step { margin-top:var(--s5); }
/* extra inner breathing room for the form body */
body.stx-commerce .rey-checkoutPage .__step-main { padding-top:var(--s2); }
body.stx-commerce .rey-checkoutPage .rey-customerDetails-payment.__step { padding:clamp(24px,2.6vw,40px) !important; }

/* Order-summary card — dark fill, blue gradient BORDER only (padding-box fill +
   border-box gradient = a gradient border that respects border-radius). */
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review-inner {
  background:
    linear-gradient(180deg,#1A1A1F 0%,#16161C 100%) padding-box,
    linear-gradient(150deg, rgba(96,142,246,.95) 0%, rgba(37,99,235,.35) 45%, rgba(96,142,246,.7) 100%) border-box !important;
  border:1px solid transparent !important; border-radius:var(--r5);
  box-shadow:var(--shadow-lg); position:relative;
  padding:clamp(20px,2vw,26px);
}
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review { align-self:start; }
/* Desktop: push the sticky summary down so it clears the fixed header (+offset) */
@media (min-width:1025px){
  body.stx-commerce .rey-checkoutPage.--layout-custom { --sticky-offset:124px; }
  body.stx-commerce .rey-checkoutPage.--layout-custom.--sticky-review .rey-checkoutPage-review { top:124px !important; }
}

/* =================================================================
   3 · Forms — labels, inputs, selects, textareas
   ================================================================= */
body.stx-commerce .rey-cartPage .form-row,
body.stx-commerce .rey-checkoutPage .form-row,
body.stx-commerce .rey-checkoutPage .rey-form-row { margin-bottom:var(--s4); }

body.stx-commerce .rey-checkoutPage .form-row label,
body.stx-commerce .rey-checkoutPage .rey-form-row label,
body.stx-commerce .rey-checkoutPage .woocommerce-billing-fields label,
body.stx-commerce .rey-checkoutPage .woocommerce-shipping-fields label,
body.stx-commerce .rey-checkoutPage .woocommerce-additional-fields label,
body.stx-commerce .rey-checkoutPage.--layout-custom .rey-checkoutPage-form .form-row label {
  display:block; font-family:var(--ff-disp);
  font-size:.82rem; font-weight:500; letter-spacing:.01em; text-transform:none !important;
  color:#C9C9CE !important; opacity:1 !important; margin-bottom:8px;
}
body.stx-commerce .rey-checkoutPage .required,
body.stx-commerce .rey-checkoutPage abbr.required { color:var(--cta); border:0; text-decoration:none; }

body.stx-commerce .rey-cartPage input[type=text],
body.stx-commerce .rey-cartPage input[type=number],
body.stx-commerce .rey-checkoutPage input[type=text],
body.stx-commerce .rey-checkoutPage input[type=email],
body.stx-commerce .rey-checkoutPage input[type=tel],
body.stx-commerce .rey-checkoutPage input[type=password],
body.stx-commerce .rey-checkoutPage input[type=number],
body.stx-commerce .rey-checkoutPage input[type=search],
body.stx-commerce .rey-checkoutPage textarea,
body.stx-commerce .rey-checkoutPage select,
body.stx-commerce .rey-checkoutPage .select2-container--default .select2-selection--single {
  width:100%;
  background:var(--c-field) !important;
  color:var(--c-text) !important;
  border:1px solid var(--c-line-2) !important;
  border-radius:var(--r3) !important;
  padding:14px 16px !important; min-height:52px;
  font-family:var(--ff-body); font-size:16px; line-height:1.35;
  box-shadow:none !important; -webkit-appearance:none; appearance:none;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
body.stx-commerce .rey-checkoutPage textarea { min-height:104px; resize:vertical; }
body.stx-commerce .rey-cartPage ::placeholder,
body.stx-commerce .rey-checkoutPage ::placeholder { color:var(--ink-500); opacity:1; }

body.stx-commerce .rey-checkoutPage input:focus,
body.stx-commerce .rey-checkoutPage textarea:focus,
body.stx-commerce .rey-checkoutPage select:focus,
body.stx-commerce .rey-checkoutPage .select2-container--default.select2-container--focus .select2-selection--single,
body.stx-commerce .rey-checkoutPage .select2-container--open .select2-selection--single {
  outline:none; border-color:var(--cta) !important;
  background:var(--c-field-2) !important; box-shadow:var(--focus) !important;
}

body.stx-commerce .rey-checkoutPage select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B5B5BA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 16px center !important; padding-right:42px !important;
}

/* Select2 single + dropdown (dropdown is appended to <body>, so page-scoped) */
body.stx-commerce .rey-checkoutPage .select2-container--default .select2-selection--single { display:flex; align-items:center; }
body.stx-commerce .rey-checkoutPage .select2-container--default .select2-selection--single .select2-selection__rendered { color:var(--c-text) !important; line-height:1.35; padding:0; }
body.stx-commerce .rey-checkoutPage .select2-container--default .select2-selection--single .select2-selection__arrow { top:50%; transform:translateY(-50%); right:12px; }
body.stx-commerce .rey-checkoutPage .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color:var(--c-text-3) transparent transparent; }
body.stx-commerce .select2-dropdown { background:var(--c-surface-2); border:1px solid var(--c-line-2); border-radius:var(--r3); box-shadow:var(--shadow-lg); overflow:hidden; }
body.stx-commerce .select2-search--dropdown .select2-search__field { background:var(--c-field); color:var(--c-text); border:1px solid var(--c-line-2); border-radius:var(--r2); }
body.stx-commerce .select2-results__option { color:var(--c-text-2); }
body.stx-commerce .select2-container--default .select2-results__option--highlighted[aria-selected],
body.stx-commerce .select2-container--default .select2-results__option--selected { background:var(--cta) !important; color:#fff !important; }

/* validation */
body.stx-commerce .rey-checkoutPage .woocommerce-invalid input.input-text,
body.stx-commerce .rey-checkoutPage .woocommerce-invalid select,
body.stx-commerce .rey-checkoutPage .woocommerce-invalid .select2-selection { border-color:var(--err) !important; }
body.stx-commerce .rey-checkoutPage .woocommerce-validated input.input-text { border-color:rgba(74,222,128,.5) !important; }

/* checkboxes / radios */
body.stx-commerce .rey-cartPage input[type=checkbox],
body.stx-commerce .rey-checkoutPage input[type=checkbox],
body.stx-commerce .rey-checkoutPage input[type=radio] { accent-color:var(--cta); width:18px; height:18px; }
body.stx-commerce .rey-checkoutPage #ship-to-different-address label,
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-shpAsBilling label { color:var(--c-text); font-weight:500; cursor:pointer; }

/* keep step/form wrappers transparent — only fields + .__step cards are surfaces */
body.stx-commerce .rey-checkoutPage form.checkout,
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-form,
body.stx-commerce .rey-checkoutPage .__step-main,
body.stx-commerce .rey-checkoutPage .rey-checkoutDetails-billing,
body.stx-commerce .rey-checkoutPage .woocommerce-billing-fields,
body.stx-commerce .rey-checkoutPage .woocommerce-shipping-fields,
body.stx-commerce .rey-checkoutPage .woocommerce-additional-fields,
body.stx-commerce .rey-checkoutPage #contact_details { background:transparent !important; }

/* =================================================================
   4 · Buttons — primary = brand blue, secondary = ghost
   ================================================================= */
body.stx-commerce .rey-cartPage .btn.btn-primary,
body.stx-commerce .rey-checkoutPage .btn.btn-primary,
body.stx-commerce .rey-checkoutPage .__step-fwd,
body.stx-commerce .rey-checkoutPage #place_order,
body.stx-commerce .rey-checkoutPage #payment #place_order,
body.stx-commerce .rey-cartPage .checkout-button {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-disp); font-weight:600; letter-spacing:.01em;
  background:var(--cta) !important; color:var(--cta-on) !important; border:0 !important;
  border-radius:var(--pill) !important; cursor:pointer; padding:16px 30px !important; font-size:.98rem !important;
  box-shadow:0 10px 28px -10px rgba(37,99,235,.55), 0 1px 0 rgba(255,255,255,.18) inset !important;
  transition:transform var(--fast) var(--ease), box-shadow var(--base) var(--ease), background var(--base) var(--ease);
}
body.stx-commerce .rey-checkoutPage #place_order,
body.stx-commerce .rey-checkoutPage #payment #place_order,
body.stx-commerce .rey-cartPage .checkout-button { width:100%; }
body.stx-commerce .rey-cartPage .btn.btn-primary:hover,
body.stx-commerce .rey-checkoutPage .btn.btn-primary:hover,
body.stx-commerce .rey-checkoutPage .__step-fwd:hover,
body.stx-commerce .rey-checkoutPage #place_order:hover,
body.stx-commerce .rey-checkoutPage #payment #place_order:hover,
body.stx-commerce .rey-cartPage .checkout-button:hover {
  background:var(--cta-h) !important;
  box-shadow:0 16px 38px -12px rgba(37,99,235,.7), 0 1px 0 rgba(255,255,255,.22) inset !important;
  transform:translateY(-1px);
}
body.stx-commerce .rey-checkoutPage #place_order:active,
body.stx-commerce .rey-cartPage .checkout-button:active { transform:translateY(0); }

/* secondary / ghost */
body.stx-commerce .rey-checkoutPage .btn.btn-line,
body.stx-commerce .rey-checkoutPage .__step-back,
body.stx-commerce .rey-cartPage .woocommerce-cart-form__actions .button[name=update_cart],
body.stx-commerce .rey-checkoutPage .checkout_coupon .button,
body.stx-commerce .rey-checkoutPage .coupon .button,
body.stx-commerce .rey-cartPage .coupon .button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:transparent !important; color:var(--c-text) !important;
  border:1px solid var(--c-line-2) !important; border-radius:var(--pill) !important;
  padding:13px 24px !important; font-family:var(--ff-disp); font-weight:500; font-size:.9rem; cursor:pointer;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
body.stx-commerce .rey-checkoutPage .btn.btn-line:hover,
body.stx-commerce .rey-checkoutPage .__step-back:hover,
body.stx-commerce .rey-cartPage .woocommerce-cart-form__actions .button[name=update_cart]:hover,
body.stx-commerce .rey-checkoutPage .checkout_coupon .button:hover,
body.stx-commerce .rey-checkoutPage .coupon .button:hover,
body.stx-commerce .rey-cartPage .coupon .button:hover {
  border-color:var(--cta) !important; color:#9DBBF6 !important; background:rgba(37,99,235,.08) !important;
}

body.stx-commerce .rey-checkoutPage .__step-footer {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--c-line);
}
body.stx-commerce .rey-checkoutPage .__step-footer .__step-fwd { margin-left:auto; }

body.stx-commerce .rey-checkoutPage .processing #place_order,
body.stx-commerce .rey-checkoutPage button.loading { opacity:.7; pointer-events:none; }
body.stx-commerce .rey-cartPage .blockUI.blockOverlay,
body.stx-commerce .rey-checkoutPage .blockUI.blockOverlay { background:#0A0A0B !important; opacity:.55 !important; }

/* =================================================================
   5 · Order review (sidebar) + totals
   ================================================================= */
body.stx-commerce .rey-checkoutPage #order_review_heading { font-size:1.05rem; margin:0 0 var(--s4); }
/* Mobile-only "Show order summary" toggle: hidden on desktop (full summary shows
   in the sidebar). On mobile, ensure its icon + label are light (were black-on-black). */
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review-toggle {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border:1px solid var(--c-line-2); border-radius:var(--r4);
  background:var(--c-surface-2); color:var(--c-text) !important; font-family:var(--ff-disp); cursor:pointer;
}
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review-toggle .__title,
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review-toggle .__title-text { display:inline-flex; align-items:center; gap:10px; color:var(--c-text) !important; }
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review-toggle svg { width:18px !important; height:18px !important; color:var(--c-text) !important; flex:none; }
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review-toggle .__total,
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review-toggle .__total strong,
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review-toggle .woocommerce-Price-amount { color:#fff !important; }
@media (min-width:1025px){
  body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review-toggle { display:none !important; }
}

body.stx-commerce .rey-checkoutPage .woocommerce-checkout-review-order-table,
body.stx-commerce .rey-cartPage .cart_totals .shop_table { width:100%; border-collapse:collapse; }
body.stx-commerce .rey-checkoutPage .woocommerce-checkout-review-order-table th,
body.stx-commerce .rey-checkoutPage .woocommerce-checkout-review-order-table td,
body.stx-commerce .rey-cartPage .cart_totals th,
body.stx-commerce .rey-cartPage .cart_totals td { border:0; padding:12px 0; vertical-align:top; font-size:.92rem; color:var(--c-text-2); }
body.stx-commerce .rey-checkoutPage .woocommerce-checkout-review-order-table tbody tr,
body.stx-commerce .rey-cartPage .cart_totals tr { border-bottom:1px solid var(--c-line); }
body.stx-commerce .rey-checkoutPage .woocommerce-checkout-review-order-table .cart_item td.product-name { color:var(--c-text); font-weight:500; }
body.stx-commerce .rey-checkoutPage .woocommerce-checkout-review-order-table td.product-total { text-align:right; white-space:nowrap; color:var(--c-text); }

/* Breathing room around the checkout Subtotal row so the value isn't crammed
   against the divider that follows it (the next totals row sat flush at the
   bottom of Subtotal with no gap). */
body.stx-commerce .rey-checkoutPage .woocommerce-checkout-review-order-table .cart-subtotal th,
body.stx-commerce .rey-checkoutPage .woocommerce-checkout-review-order-table .cart-subtotal td {
  padding-top:14px;
  padding-bottom:16px;
}

/* "You save" reassurance row — green to read as savings (cart + checkout) */
body.stx-commerce .stx-savings th,
body.stx-commerce .stx-savings td { color:var(--ok) !important; font-weight:600; }
body.stx-commerce .stx-savings td { text-align:right; white-space:nowrap; }
body.stx-commerce .stx-savings .woocommerce-Price-amount,
body.stx-commerce .stx-savings .amount { color:var(--ok) !important; }

/* ================= Deposit checkout ================= */
/* Clean rundown: drop the per-row hairlines and keep just two rules — one under
   the Subtotal, one above the Total. Everything between (savings, tax, delivery)
   reads as one grouped block. */
body.stx-deposit-mode .cart_totals .shop_table tr,
body.stx-deposit-mode .woocommerce-checkout-review-order-table tbody tr { border-bottom:0 !important; }
body.stx-deposit-mode .cart_totals .cart-subtotal,
body.stx-deposit-mode .woocommerce-checkout-review-order-table .cart-subtotal { border-bottom:1px solid var(--c-line-2) !important; }
/* Spacing above the total on both pages… */
body.stx-deposit-mode .cart_totals .order-total th,
body.stx-deposit-mode .cart_totals .order-total td,
body.stx-deposit-mode .woocommerce-checkout-review-order-table .order-total th,
body.stx-deposit-mode .woocommerce-checkout-review-order-table .order-total td {
  padding-top:15px !important;
}
/* …but the divider line above Total only on the cart. On checkout the items
   sit in the same table, so the separator above Subtotal already does the job —
   a second line right above the total is redundant. */
body.stx-deposit-mode .cart_totals .order-total th,
body.stx-deposit-mode .cart_totals .order-total td {
  border-top:1px solid var(--c-line-2) !important;
}

/* One tax line only: hide Rey's redundant "Taxes & shipping calculated at
   checkout" note — we now show an actual Estimated tax figure. */
body.stx-deposit-mode .__no-shipping-text { display:none !important; }
/* Deposit carts are tax-exempt (tax is billed on the balance invoice), so the
   native "Tax $0.00" row is noise — hide it on the checkout review too, exactly
   as we already do on the cart. The deposit panel note covers tax & shipping. */
body.stx-deposit-mode .rey-checkoutPage .woocommerce-checkout-review-order-table .tax-total { display:none !important; }

body.stx-commerce .stx-dep-fulltotal { font-family:var(--ff-disp); font-size:1.55rem; font-weight:700; color:#fff; letter-spacing:var(--ls-tight); }
body.stx-commerce .stx-dep-tax td { color:var(--c-text-2) !important; text-align:right; white-space:nowrap; }

/* Deposit panel cell: full-width wrapping block (the two-step .stx-plan inside
   renders the same on cart + checkout). */
body.stx-commerce .stx-dep-panel > td { display:block !important; width:100%; padding:0 !important; border:0 !important; white-space:normal !important; }
/* (The old flat .stx-dep-card was retired — both pages now render the shared
   two-step .stx-plan, styled in §16. Its CSS lived here and has been removed.) */

/* Widen the right-hand order summary by 60px, taking it from the items column,
   so the overall row width + gutter stay the same. Desktop two-column layout
   only (Rey stacks these single-column on smaller screens). */
@media (min-width:1025px){
  body.stx-commerce .rey-cartPage.--layout-custom .cart_totals {
    width:calc(100% - var(--cart-table-size) + 60px);
  }
  body.stx-commerce .rey-cartPage.--layout-custom .woocommerce-cart-formWrapper {
    width:calc(var(--cart-table-size) - var(--cart-table-distance) - 60px);
  }
}

/* thank-you page summary block (emails carry their own inline styles) */
body.stx-commerce .stx-deposit-summary { max-width:680px; }
body.stx-commerce .stx-deposit-summary table { margin-top:4px; }

body.stx-commerce .rey-checkoutPage .order-total,
body.stx-commerce .rey-cartPage .order-total { border-bottom:0 !important; }
body.stx-commerce .rey-checkoutPage .order-total th,
body.stx-commerce .rey-cartPage .order-total th {
  font-family:var(--ff-disp); font-size:1.05rem; font-weight:600; color:var(--c-text); padding-top:18px;
}
body.stx-commerce .rey-checkoutPage .order-total td,
body.stx-commerce .rey-cartPage .order-total td { text-align:right; padding-top:18px; }
body.stx-commerce .rey-checkoutPage .order-total .woocommerce-Price-amount,
body.stx-commerce .rey-checkoutPage .order-total .amount,
body.stx-commerce .rey-cartPage .order-total .woocommerce-Price-amount,
body.stx-commerce .rey-cartPage .order-total .amount {
  font-family:var(--ff-disp); font-size:1.5rem; font-weight:700; color:#fff !important; letter-spacing:var(--ls-tight);
}
body.stx-commerce .rey-cartPage .woocommerce-Price-amount,
body.stx-commerce .rey-checkoutPage .woocommerce-Price-amount { font-variant-numeric:tabular-nums; }
body.stx-commerce .rey-cartPage .includes_tax,
body.stx-commerce .rey-checkoutPage .tax_label,
body.stx-commerce .rey-cartPage small,
body.stx-commerce .rey-checkoutPage small { color:var(--c-text-3); }

/* shipping method rows in review */
body.stx-commerce .rey-checkoutPage #shipping_method li,
body.stx-commerce .rey-checkoutPage .rey-checkout-shippingMethods td { color:var(--c-text-2); }
body.stx-commerce .rey-checkoutPage .rey-checkout-shippingMethods { width:100%; }
body.stx-commerce .rey-checkoutPage .rey-checkout-shippingMethods tr { border-bottom:1px solid var(--c-line); }
body.stx-commerce .rey-checkoutPage .rey-checkout-shippingMethods th,
body.stx-commerce .rey-checkoutPage .rey-checkout-shippingMethods td { padding:12px 0; }

/* =================================================================
   6 · Recap blocks (rey-formReview)
   ================================================================= */
body.stx-commerce .rey-checkoutPage .rey-formReview { display:grid; gap:10px; margin-bottom:var(--s5); background:transparent !important; }
body.stx-commerce .rey-checkoutPage .rey-formReview-block,
body.stx-commerce .rey-checkoutPage .rey-formReview .rey-formReview-block:first-child {
  display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;
  padding:14px 16px !important; margin-top:0 !important;
  border:1px solid var(--c-line) !important; border-radius:var(--r3);
  background:var(--c-surface-2) !important; color:var(--c-text) !important;
}
body.stx-commerce .rey-checkoutPage .rey-formReview-title {
  font-family:var(--ff-disp); font-size:.7rem; text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow); color:var(--c-text-3); min-width:90px;
}
body.stx-commerce .rey-checkoutPage .rey-formReview-content,
body.stx-commerce .rey-checkoutPage .rey-formReview-content * { color:var(--c-text) !important; font-size:.9rem; }
body.stx-commerce .rey-checkoutPage .rey-formReview-action a { font-size:.82rem; color:#9DBBF6 !important; }

/* =================================================================
   7 · Payment + Stripe
   ================================================================= */
body.stx-commerce .rey-checkoutPage #payment { background:transparent; margin-top:var(--s4); }
body.stx-commerce .rey-checkoutPage ul.payment_methods {
  list-style:none; margin:0 0 var(--s4); padding:0; border:1px solid var(--c-line); border-radius:var(--r4); overflow:hidden;
}
body.stx-commerce .rey-checkoutPage ul.payment_methods li { padding:16px 18px; border-bottom:1px solid var(--c-line); background:var(--c-surface); }
body.stx-commerce .rey-checkoutPage ul.payment_methods li:last-child { border-bottom:0; }
body.stx-commerce .rey-checkoutPage ul.payment_methods li label,
body.stx-commerce .rey-checkoutPage label[for="payment_method_stripe"] { display:inline-flex; align-items:center; gap:10px; margin:0; color:#fff !important; font-family:var(--ff-disp); font-weight:500; cursor:pointer; }
body.stx-commerce .rey-checkoutPage ul.payment_methods li img { max-height:24px; width:auto; margin-left:6px; }
/* Payment box + its inner fieldset were rendering light (Rey's
   var(--checkout-bg-colors-secondary) falling back to neutral-4, and Woo's
   fieldset #f6f6f6). Out-specify Rey's (1,5,3) selector with literal colors. */
body.stx-commerce .rey-checkoutPage .payment_box,
body.stx-commerce .rey-checkoutPage.--layout-custom #payment ul.wc_payment_methods li.wc_payment_method div.payment_box,
body.stx-commerce .rey-checkoutPage.--layout-custom #payment ul.wc_payment_methods li.wc_payment_method div.payment_box.payment_method_stripe {
  background:#17171C !important; background-color:#17171C !important;
  color:var(--c-text-2) !important; border:1px solid var(--c-line) !important; border-radius:var(--r3); margin-top:14px; padding:16px !important;
}
body.stx-commerce .rey-checkoutPage .payment_box fieldset,
body.stx-commerce .rey-checkoutPage #wc-stripe-upe-form,
body.stx-commerce .rey-checkoutPage .wc-upe-form,
body.stx-commerce .rey-checkoutPage .woocommerce-SavedPaymentMethods { background:transparent !important; border:0 !important; padding:0 !important; }
body.stx-commerce .rey-checkoutPage .payment_box::before { display:none !important; }
body.stx-commerce .rey-checkoutPage .payment_box p,
body.stx-commerce .rey-checkoutPage .payment_box * { color:var(--c-text-2); }
/* Stripe Payment/Express Element: let Stripe render its own dark ("night")
   appearance — keep our wrappers transparent/borderless. (A white container
   here also made the plugin auto-detect a LIGHT theme and put white borders on
   the Google Pay / Link buttons.) */
body.stx-commerce .rey-checkoutPage .wc-stripe-elements-field,
body.stx-commerce .rey-checkoutPage .wc-stripe-iban-element-field,
body.stx-commerce .rey-checkoutPage #wc-stripe-card-element,
body.stx-commerce .rey-checkoutPage .wc-stripe-upe-element,
body.stx-commerce .rey-checkoutPage #wc-stripe-upe-element,
body.stx-commerce .rey-checkoutPage .wc-stripe-payment-request-wrapper,
body.stx-commerce .rey-checkoutPage .StripeElement {
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
body.stx-commerce .rey-checkoutPage #wc-stripe-upe-form,
body.stx-commerce .rey-checkoutPage .wc-stripe-upe-element,
body.stx-commerce .rey-checkoutPage #wc-stripe-upe-element,
body.stx-commerce .rey-checkoutPage .StripeElement,
body.stx-commerce .rey-checkoutPage .wc-stripe-upe-element iframe,
body.stx-commerce .rey-checkoutPage #wc-stripe-upe-element iframe,
body.stx-commerce .rey-checkoutPage .StripeElement iframe {
  position:relative !important;
  z-index:2 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}
body.stx-commerce .rey-checkoutPage .wc-stripe-upe-element iframe,
body.stx-commerce .rey-checkoutPage #wc-stripe-upe-element iframe,
body.stx-commerce .rey-checkoutPage .StripeElement iframe {
  display:block !important;
  max-width:none !important;
}
@media (max-width:782px){
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"],
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-checkoutPage-form,
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-customerDetails-payment,
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] #payment,
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .payment_box,
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] #wc-stripe-upe-form {
    transform:none !important;
    filter:none !important;
    contain:none !important;
    overflow:visible !important;
    -webkit-overflow-scrolling:auto;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .wc-stripe-upe-element,
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] #wc-stripe-upe-element,
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .StripeElement {
    min-height:48px;
    isolation:isolate;
  }
}

/* Privacy / terms disclaimer above Place Order — was black-on-black. Gray:
   present and legible (compliance) but visually quiet. */
body.stx-commerce .rey-checkoutPage .woocommerce-privacy-policy-text,
body.stx-commerce .rey-checkoutPage .woocommerce-privacy-policy-text p,
body.stx-commerce .rey-checkoutPage .woocommerce-terms-and-conditions-wrapper,
body.stx-commerce .rey-checkoutPage .woocommerce-terms-and-conditions-wrapper p,
body.stx-commerce .rey-checkoutPage .woocommerce-terms-and-conditions-checkbox-text {
  color:var(--c-text-3) !important; font-size:.8rem !important; line-height:1.55 !important;
}
body.stx-commerce .rey-checkoutPage .woocommerce-privacy-policy-text a,
body.stx-commerce .rey-checkoutPage .woocommerce-terms-and-conditions-wrapper a { color:var(--c-text-2) !important; text-decoration:underline; }

/* =================================================================
   8 · Coupon
   ================================================================= */
body.stx-commerce .rey-cartPage .coupon,
body.stx-commerce .rey-checkoutPage .coupon,
body.stx-commerce .rey-checkoutPage .checkout_coupon { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
body.stx-commerce .rey-cartPage .coupon .input-text,
body.stx-commerce .rey-checkoutPage .checkout_coupon .input-text { flex:1 1 180px; min-height:48px; }
body.stx-commerce .rey-checkoutPage .checkout_coupon { background:var(--c-surface-2); border:1px solid var(--c-line); border-radius:var(--r3); padding:16px; margin:0; }
body.stx-commerce .rey-checkoutPage .rey-checkoutPage-couponMobile { padding:18px; margin-top:var(--s4); }

/* =================================================================
   9 · Cart page
   ================================================================= */
body.stx-commerce .rey-cartPage .woocommerce-cart-formWrapper { gap:clamp(20px,3vw,40px); }
body.stx-commerce .rey-cartPage .woocommerce-cart-formWrapper,
body.stx-commerce .rey-cartPage .woocommerce-cart-form { background:transparent !important; }

body.stx-commerce .rey-cartPage .woocommerce-cart-form__contents,
body.stx-commerce .rey-cartPage table.cart,
body.stx-commerce .rey-cartPage .shop_table.cart {
  width:100%; border-collapse:collapse;
  background:var(--c-surface) !important; border:1px solid var(--c-line) !important; border-radius:var(--r5); overflow:hidden;
}
body.stx-commerce .rey-cartPage .woocommerce-cart-form__contents thead,
body.stx-commerce .rey-cartPage .woocommerce-cart-form__contents tbody,
body.stx-commerce .rey-cartPage .woocommerce-cart-form__contents tr { background:transparent !important; }
body.stx-commerce .rey-cartPage .woocommerce-cart-form__contents thead th {
  font-family:var(--ff-disp); font-size:.7rem; text-transform:uppercase; letter-spacing:var(--ls-eyebrow);
  color:var(--c-text-3) !important; font-weight:600; padding:18px 20px; text-align:left; border-bottom:1px solid var(--c-line) !important; background:transparent !important;
}
body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td {
  padding:20px; border-bottom:1px solid var(--c-line) !important; vertical-align:middle; color:var(--c-text-2) !important; background:transparent !important;
}
body.stx-commerce .rey-cartPage td.product-thumbnail img {
  width:84px; height:84px; object-fit:cover; border-radius:var(--r3); border:1px solid var(--c-line-2); background:var(--c-surface-2);
}
body.stx-commerce .rey-cartPage td.product-name,
body.stx-commerce .rey-cartPage td.product-name a { color:var(--c-text) !important; font-family:var(--ff-disp); font-weight:500; }
body.stx-commerce .rey-cartPage td.product-name a:hover { color:#9DBBF6 !important; }
body.stx-commerce .rey-cartPage td.product-name .variation,
body.stx-commerce .rey-cartPage td.product-name dl,
body.stx-commerce .rey-cartPage td.product-name .sku { color:var(--c-text-3) !important; }
body.stx-commerce .rey-cartPage td.product-price,
body.stx-commerce .rey-cartPage td.product-subtotal { color:var(--c-text) !important; white-space:nowrap; }
body.stx-commerce .rey-cartPage td.product-subtotal { font-weight:600; }

body.stx-commerce .rey-cartPage td.product-remove a.remove,
body.stx-commerce .rey-cartPage a.remove {
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:var(--pill);
  border:1px solid var(--c-line-2); color:var(--c-text-3) !important; font-size:18px; line-height:1; text-decoration:none;
  background:transparent !important; transition:all var(--fast) var(--ease);
}
body.stx-commerce .rey-cartPage a.remove:hover { color:var(--err) !important; border-color:var(--err); background:rgba(239,68,68,.1) !important; }

body.stx-commerce .rey-cartPage .quantity { display:inline-flex; align-items:center; }
body.stx-commerce .rey-cartPage .quantity input.qty { width:40px; min-height:40px; text-align:center; padding:0 !important; -moz-appearance:textfield; }
body.stx-commerce .rey-cartPage .quantity input.qty::-webkit-outer-spin-button,
body.stx-commerce .rey-cartPage .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
body.stx-commerce .rey-cartPage .quantity .plus,
body.stx-commerce .rey-cartPage .quantity .minus {
  width:36px; min-height:40px; background:var(--c-field) !important; color:var(--c-text) !important; border:1px solid var(--c-line-2) !important; cursor:pointer;
}
body.stx-commerce .rey-cartPage .quantity .minus { border-radius:var(--r2) 0 0 var(--r2) !important; }
body.stx-commerce .rey-cartPage .quantity .plus { border-radius:0 var(--r2) var(--r2) 0 !important; }
body.stx-commerce .rey-cartPage .quantity .plus:hover,
body.stx-commerce .rey-cartPage .quantity .minus:hover { border-color:var(--cta) !important; color:#9DBBF6 !important; }

body.stx-commerce .rey-cartPage td.product-quantity .rey-qtyField,
body.stx-commerce .rey-cartPage td.product-quantity .cartBtnQty-controls {
  display:inline-flex !important; flex-wrap:nowrap !important; align-items:center; justify-content:flex-start;
  position:relative !important; flex:0 0 auto; width:auto !important; min-width:0 !important; padding:0 !important;
  background:var(--ink-800) !important; border:1px solid var(--ink-700); border-radius:12px; overflow:hidden; color:var(--ink-50) !important;
}
body.stx-commerce .rey-cartPage td.product-quantity .cartBtnQty-control {
  position:static !important; transform:none !important; inset:auto !important; top:auto !important; left:auto !important; right:auto !important;
  flex:0 0 auto; width:36px !important; height:40px !important; min-height:40px; margin:0 !important;
  display:grid !important; place-items:center; background:transparent !important; border:0 !important; color:var(--ink-300) !important; cursor:pointer;
}
body.stx-commerce .rey-cartPage td.product-quantity .cartBtnQty-control.--minus { order:1; }
body.stx-commerce .rey-cartPage td.product-quantity .cartBtnQty-control.--plus { order:3; }
body.stx-commerce .rey-cartPage td.product-quantity .cartBtnQty-control:hover { color:var(--ink-50) !important; background:rgba(255,255,255,.04) !important; }
body.stx-commerce .rey-cartPage td.product-quantity .cartBtnQty-control svg,
body.stx-commerce .rey-cartPage td.product-quantity .cartBtnQty-control .rey-icon { width:14px; height:14px; }
body.stx-commerce .rey-cartPage td.product-quantity input.qty,
body.stx-commerce .rey-cartPage td.product-quantity .rey-qtyField input,
body.stx-commerce .rey-cartPage td.product-quantity .quantity input {
  order:2; display:block !important; position:static !important; flex:0 0 auto;
  width:40px !important; min-width:40px !important; height:40px !important; min-height:40px; margin:0 !important; padding:0 !important;
  opacity:1 !important; visibility:visible !important; clip:auto !important; overflow:visible !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  color:var(--ink-50) !important; -webkit-text-fill-color:var(--ink-50) !important;
  text-align:center; font-size:15px !important; line-height:40px !important; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield; appearance:textfield;
}

body.stx-commerce .rey-cartPage .woocommerce-cart-form__actions {
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; padding:20px; border-top:1px solid var(--c-line);
}

body.stx-commerce .rey-cartPage .cart_totals { padding:clamp(20px,2vw,28px); }
body.stx-commerce .rey-cartPage .cart_totals h2 { font-size:1.1rem; margin:0 0 var(--s4); }
/* extra breathing room above Proceed to checkout (user request) */
body.stx-commerce .rey-cartPage .cart_totals .wc-proceed-to-checkout {
  margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--c-line);
}
body.stx-commerce .rey-cartPage .cart_totals .checkout-button { margin:0; }
body.stx-commerce .rey-cartPage .cross-sells h2 { font-family:var(--ff-disp); color:var(--c-text); }
body.stx-commerce .rey-cartPage .cross-sells .product .price { color:#9DBBF6; }

/* =================================================================
   10 · Trust signals (PHP-injected)
   ================================================================= */
body.stx-commerce .rey-cartPage .stx-trust,
body.stx-commerce .rey-checkoutPage .stx-trust { margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--c-line); }
body.stx-commerce .stx-trust__secure { display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ff-disp); font-size:.82rem; font-weight:500; color:var(--c-text-2); }
body.stx-commerce .stx-trust__secure svg { color:var(--ok); flex:none; }
body.stx-commerce .stx-trust__points { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
body.stx-commerce .stx-trust__points li { display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--c-text-2); line-height:1.35; }
body.stx-commerce .stx-trust__points svg { color:#9DBBF6; flex:none; }
body.stx-commerce .stx-trust__cards { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; margin-top:14px; }
body.stx-commerce .stx-cards { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:7px; }
body.stx-commerce .stx-card { width:42px; height:26px; display:block; border-radius:5px; box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 4px 12px -6px rgba(0,0,0,.8); }

/* =================================================================
   11 · Notices  (fix: cart "updated" checkmark stuck in the middle)
   ================================================================= */
body.stx-commerce .rey-cartPage .woocommerce-message,
body.stx-commerce .rey-checkoutPage .woocommerce-message,
body.stx-commerce .rey-cartPage .woocommerce-info,
body.stx-commerce .rey-checkoutPage .woocommerce-info,
body.stx-commerce .rey-cartPage .woocommerce-error,
body.stx-commerce .rey-checkoutPage .woocommerce-error {
  display:flex !important; align-items:center; gap:12px; justify-content:flex-start; text-align:left;
  background:var(--c-surface-2) !important; color:var(--c-text) !important;
  border:1px solid var(--c-line-2); border-left:3px solid var(--cta); border-radius:var(--r3); padding:14px 18px;
}
body.stx-commerce .rey-cartPage .woocommerce-message { border-left-color:var(--ok); }
body.stx-commerce .rey-cartPage .woocommerce-error,
body.stx-commerce .rey-checkoutPage .woocommerce-error { border-left-color:var(--err); }
/* kill Rey/Woo's pseudo checkmark that floats centred; keep text left, button right */
body.stx-commerce .rey-cartPage .woocommerce-message::before,
body.stx-commerce .rey-checkoutPage .woocommerce-message::before,
body.stx-commerce .rey-cartPage .woocommerce-info::before,
body.stx-commerce .rey-checkoutPage .woocommerce-info::before { display:none !important; content:none !important; }
body.stx-commerce .rey-cartPage .woocommerce-message .button,
body.stx-commerce .rey-cartPage .woocommerce-info .button { margin-left:auto; background:transparent !important; color:#9DBBF6 !important; border:1px solid var(--c-line-2) !important; }

/* =================================================================
   12 · Empty cart + login panels
   ================================================================= */
body.stx-commerce .rey-cartPage .rey-emptyCart {
  text-align:center; max-width:520px; margin:clamp(40px,8vw,90px) auto; padding:clamp(32px,4vw,52px);
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r5); box-shadow:var(--shadow);
}
body.stx-commerce .rey-cartPage .rey-emptyCart-icon svg,
body.stx-commerce .rey-cartPage .rey-emptyCart-icon i { color:#9DBBF6 !important; opacity:.85; }
body.stx-commerce .rey-cartPage .rey-emptyCart-title { font-family:var(--ff-disp); color:var(--c-text); font-weight:600; }
body.stx-commerce .rey-cartPage .rey-emptyCart-content { color:var(--c-text-2); }
body.stx-commerce .rey-checkoutPage .rey-accountPanel-form { padding:clamp(20px,2vw,28px); }
body.stx-commerce .rey-checkoutPage .rey-accountForms-notice { color:var(--c-text-2); }
body.stx-commerce .rey-checkoutPage .rey-accountPanel-links a { color:#9DBBF6; }

/* =================================================================
   13 · Rey hard-overrides (elements that ship !important rules)
   ================================================================= */
body.stx-commerce .rey-checkoutPage .rey-checkout-shippingMethods ul#shipping_method,
body.stx-commerce .rey-checkoutPage ul#shipping_method {
  background:var(--c-surface) !important; border:1px solid var(--c-line) !important; border-radius:var(--r4) !important;
}
body.stx-commerce .rey-checkoutPage ul#shipping_method li { background:transparent !important; color:var(--c-text) !important; padding:14px 16px !important; }
body.stx-commerce .rey-checkoutPage ul#shipping_method li + li { border-top:1px solid var(--c-line) !important; }
body.stx-commerce .rey-checkoutPage ul#shipping_method label,
body.stx-commerce .rey-checkoutPage ul#shipping_method .amount,
body.stx-commerce .rey-checkoutPage ul#shipping_method li * { color:var(--c-text) !important; }

/* Kill Rey's link/btn-line underline on all cart/checkout buttons (back btn etc.) */
body.stx-commerce .rey-cartPage .btn,
body.stx-commerce .rey-checkoutPage .btn,
body.stx-commerce .rey-checkoutPage .__step-back,
body.stx-commerce .rey-checkoutPage .__step-fwd,
body.stx-commerce .rey-cartPage a.button,
body.stx-commerce .rey-checkoutPage a.button,
body.stx-commerce .rey-cartPage .checkout-button,
body.stx-commerce .rey-checkoutPage #place_order { text-decoration:none !important; box-shadow:none; }
body.stx-commerce .rey-cartPage .btn::after,
body.stx-commerce .rey-checkoutPage .btn::after,
body.stx-commerce .rey-checkoutPage .__step-back::after,
body.stx-commerce .rey-checkoutPage .btn-line::after { display:none !important; background:none !important; }

/* Country / State are Select2 dropdowns — make the closed box match the other
   fields and the open list clearly readable (was dark/unreadable). */
body.stx-commerce .rey-checkoutPage .select2-container .select2-selection--single {
  background:var(--c-field) !important; color:var(--c-text) !important;
  border:1px solid var(--c-line-2) !important; border-radius:var(--r3) !important;
  min-height:52px !important; height:52px !important; display:flex !important; align-items:center !important; padding:0 16px !important;
}
body.stx-commerce .rey-checkoutPage .select2-container .select2-selection__rendered { color:var(--c-text) !important; line-height:1.35 !important; padding:0 !important; }
body.stx-commerce .rey-checkoutPage .select2-container .select2-selection__placeholder { color:var(--ink-500) !important; }
/* Open dropdown panel (appended to <body>, so page-scoped not container-scoped) */
body.stx-commerce .select2-container--open .select2-dropdown,
body.stx-commerce .select2-dropdown {
  background:#16161C !important; border:1px solid var(--c-line-2) !important; border-radius:var(--r3) !important;
  box-shadow:var(--shadow-lg) !important; overflow:hidden; z-index:99999;
}
body.stx-commerce .select2-results__options { background:#16161C !important; }
body.stx-commerce .select2-results__option { background:transparent !important; color:var(--c-text) !important; padding:10px 14px !important; }
body.stx-commerce .select2-container--default .select2-results__option--highlighted[aria-selected],
body.stx-commerce .select2-container--default .select2-results__option--selected { background:var(--cta) !important; color:#fff !important; }
body.stx-commerce .select2-search--dropdown .select2-search__field { background:var(--c-field) !important; color:var(--c-text) !important; border:1px solid var(--c-line-2) !important; }
/* native <select> fallback options, in case select2 fails to init */
body.stx-commerce .rey-checkoutPage select option { background:#16161C; color:var(--c-text); }

/* =================================================================
   14 · Responsive
   Rey's custom checkout only drops to font-size:16px on mobile — it never
   unfloats its form columns (first/last 50%, city/state/zip 33%) and keeps the
   cart as a wide table. These layers do the real phone work: stacked columns,
   a stacked cart-card, full-width thumb-friendly buttons, a compact stepper.
   ================================================================= */
@media (max-width:1024px){
  /* Rey stacks the form above the summary here; give the summary breathing room. */
  body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review { margin-top:var(--s5); }

  /* CART page order (mobile): heading → Order summary → product list →
     cross-sells. Rey lays the products wrapper + totals as flex columns; when
     they stack we flip the order so the summary leads. We target the element
     that directly contains .cart_totals, make it a flex column, and float the
     summary to the top; cross-sells (a later sibling, or nested in the form)
     stays after the products. Desktop (≥1025px) is unaffected. */
  body.stx-commerce .rey-cartPage *:has(> .cart_totals) {
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
  }
  body.stx-commerce .rey-cartPage .cart_totals { order:-1 !important; width:auto !important; margin:0 0 24px !important; }
  body.stx-commerce .rey-cartPage .cross-sells { order:10 !important; margin-top:24px; }
}

/* PHP-injected mobile cart extras are hidden by default; the ≤782px block
   below reveals + positions them, so the desktop table never shows them. */
body.stx-commerce .stx-cart-spec,
body.stx-commerce .stx-cart-savepill { display:none; }

/* ---- Tablet & below: tighten the outer rhythm; rebuild the cart as cards ---- */
@media (max-width:782px){
  /* more breathing room between the sticky site header and the page heading */
  body.stx-commerce.woocommerce-cart .rey-siteMain { padding-top:36px !important; }

  body.stx-commerce .rey-checkoutPage .__step,
  body.stx-commerce .rey-checkoutPage .rey-customerDetails-payment.__step { padding:18px !important; border-radius:var(--r4); }
  body.stx-commerce .rey-checkoutPage .order-total .woocommerce-Price-amount,
  body.stx-commerce .rey-cartPage .order-total .woocommerce-Price-amount { font-size:1.3rem; }

  /* ===== Cart line item → "Editorial" hero card  (Claude Design
     "Cart Line Mobile v2.html", option B — the large-image layout). MOBILE
     ONLY; the desktop table is untouched.

     Rey's real markup: the row has 4 cells, and td.product-name itself nests
     .woocommerce-cart-form__cart-thumbnail (image) + .__cart-nameContent
     (title + a.remove). So we stack THAT into the hero + copy block, then lay
     the row out as a grid: name(hero+title+remove), price, then qty + subtotal.
     Price sits directly under the Remove link. ===== */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__contents,
  body.stx-commerce .rey-cartPage table.shop_table_responsive.cart,
  body.stx-commerce .rey-cartPage table.cart,
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__contents tbody {
    display:block !important; width:100% !important;
    background:transparent !important; border:0 !important; border-radius:0 !important; overflow:visible !important;
  }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__contents thead { display:none !important; }

  /* the card */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item {
    display:grid !important;
    grid-template-columns:auto 1fr;
    grid-template-areas:"name name" "price price" "qty subtotal";
    align-items:start; position:relative;
    margin:0 0 16px !important; padding:0 !important;
    background:var(--ink-900) !important;
    border:1px solid var(--ink-700) !important; border-radius:16px; overflow:hidden;
  }
  /* spec chip over the hero (PHP-injected into the name area; floated up by CSS) */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item .stx-cart-spec {
    display:inline-block; position:absolute; top:12px; left:12px; z-index:2;
    padding:5px 10px; border-radius:var(--pill);
    background:rgba(10,10,11,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-200);
  }
  /* save pill on the right of the price row (PHP-injected into the price cell) */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-price .stx-cart-savepill {
    order:3; margin-left:auto; align-self:center;
    display:inline-flex; align-items:center; padding:4px 9px; border-radius:var(--pill);
    background:rgba(74,222,128,.10); border:1px solid rgba(74,222,128,.22); color:var(--ok);
    font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px; letter-spacing:.04em; white-space:nowrap;
  }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item:last-child { margin-bottom:0 !important; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td {
    display:block !important; border:0 !important; width:auto !important; max-width:100% !important;
    padding:0 !important; text-align:left; background:transparent !important;
  }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td::before { content:none !important; display:none !important; }

  /* product-name holds hero image + title + remove → stack them */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-name { grid-area:name; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-name { display:block !important; }
  /* hero image — full-bleed, 4:3, poster cropped to fill */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-thumbnail {
    display:block !important; width:100% !important; max-width:none !important; margin:0 0 18px !important;
    aspect-ratio:4/3; background:#fff !important; overflow:hidden;
  }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item-thumb { display:block !important; width:100% !important; height:100% !important; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-thumbnail img {
    display:block !important; width:100% !important; height:100% !important;
    max-width:none !important; max-height:none !important; object-fit:contain !important; border:0 !important; border-radius:0 !important;
  }
  /* title + remove block */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-nameContent { display:block !important; padding:0 18px !important; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-nameContent .woocommerce-mini-cart-item-title,
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-nameContent .woocommerce-mini-cart-item-title a {
    font-family:var(--ff-disp) !important; font-weight:300 !important; font-size:1.4rem !important;
    line-height:1.12 !important; letter-spacing:var(--ls-tight); color:var(--ink-50) !important; overflow-wrap:anywhere;
  }
  /* remove → single small uppercase text under the title. Rey already renders
     "Remove" as the link text, so we style it directly (no ::after — that was
     doubling it) and undo the desktop circular-× button styling. */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-nameContent a.remove {
    display:inline-flex !important; align-items:center; width:auto !important; height:auto !important; margin-top:12px;
    padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important;
    font-family:ui-monospace,'SF Mono',Menlo,monospace !important; font-size:10.5px !important; line-height:1 !important;
    letter-spacing:.12em !important; text-transform:uppercase; color:var(--ink-500) !important;
  }
  /* Rey's remove link is "{× icon} <span>Remove</span>" — drop the icon, keep the word */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-nameContent a.remove svg,
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-nameContent a.remove .rey-icon { display:none !important; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-nameContent a.remove span { color:inherit !important; font:inherit !important; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-nameContent a.remove:hover { color:var(--ink-200) !important; background:none !important; border:0 !important; }

  /* price — now (bright) then was (red strike), one line, directly under Remove */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-price {
    grid-area:price; padding:14px 18px 0 !important; display:flex !important; flex-wrap:wrap; align-items:baseline; gap:4px 9px;
  }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-price .screen-reader-text { display:none !important; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-price ins,
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-price del { display:inline !important; background:none; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-price ins { order:1 !important; text-decoration:none; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-price del { order:2 !important; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-price ins .amount,
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-price > .woocommerce-Price-amount {
    color:var(--ink-50) !important; font-size:1.35rem; letter-spacing:var(--ls-tight); font-variant-numeric:tabular-nums;
  }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-price del .amount {
    color:var(--err) !important; text-decoration:line-through; font-size:.85rem;
  }

  /* foot: qty stepper (left) + subtotal (right) — no "Subtotal" label */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-quantity {
    grid-area:qty; padding:18px 0 18px 18px !important; align-self:center;
  }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-subtotal {
    grid-area:subtotal; padding:18px 18px 18px 0 !important; align-self:center; text-align:right;
  }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-subtotal::before { content:none !important; display:none !important; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-subtotal .amount,
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-subtotal .woocommerce-Price-amount {
    font-family:var(--ff-disp); font-size:1.25rem; font-weight:500; color:var(--ink-50) !important; letter-spacing:var(--ls-tight); font-variant-numeric:tabular-nums;
  }

  /* quantity stepper — Rey markup: .quantity > .rey-qtyField.cartBtnQty-controls
     > .cartBtnQty-control.--minus | input | .cartBtnQty-control.--plus.
     Rey positions the +/− buttons ABSOLUTELY over the input (hence the
     overlap), so we force everything static and lay it out as a flex row. */
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-quantity .quantity { display:inline-flex !important; width:auto !important; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-quantity .cartBtnQty-control.--minus { order:1; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__cart-item td.product-quantity .cartBtnQty-control.--plus { order:3; }

  body.stx-commerce .rey-cartPage .woocommerce-cart-form__actions { padding:16px; gap:10px; }
  body.stx-commerce .rey-cartPage .woocommerce-cart-form__actions .button { flex:1 1 auto; text-align:center; }

  /* Step footer: stack Continue above Back, both full-width thumb targets */
  body.stx-commerce .rey-checkoutPage .__step-footer { flex-direction:column-reverse; align-items:stretch; }
  body.stx-commerce .rey-checkoutPage .__step-footer .btn,
  body.stx-commerce .rey-checkoutPage .__step-footer .__step-back,
  body.stx-commerce .rey-checkoutPage .__step-footer .__step-fwd { width:100%; margin:0; }
}

/* ---- Phones: stack Rey's floated form columns (its mobile CSS leaves first/
   last at 50% and city/state/zip at 33%, which crush below ~600px). ---- */
@media (max-width:600px){
  body.stx-commerce .rey-checkoutPage.--layout-custom .form-row-first,
  body.stx-commerce .rey-checkoutPage.--layout-custom .form-row-last,
  body.stx-commerce .rey-checkoutPage.--layout-custom #billing_city_field,
  body.stx-commerce .rey-checkoutPage.--layout-custom #billing_state_field,
  body.stx-commerce .rey-checkoutPage.--layout-custom #billing_postcode_field,
  body.stx-commerce .rey-checkoutPage.--layout-custom #shipping_city_field,
  body.stx-commerce .rey-checkoutPage.--layout-custom #shipping_state_field,
  body.stx-commerce .rey-checkoutPage.--layout-custom #shipping_postcode_field {
    width:100% !important; float:none !important; clear:both !important;
    margin-right:0 !important; margin-left:0 !important;
  }
  /* a little more usable card area back on small phones */
  body.stx-commerce .rey-checkoutPage .__step,
  body.stx-commerce .rey-checkoutPage .rey-customerDetails-payment.__step { padding:16px !important; }
  body.stx-commerce .rey-checkoutPage .rey-checkoutPage-review-inner { padding:18px; }
  body.stx-commerce .rey-cartPage .cart_totals { --P:18px; }
  /* keep the deposit/plan 3-col step from overflowing a narrow phone */
  body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__step { column-gap:10px; }
  /* recap chips wrap cleanly instead of stretching the row */
  body.stx-commerce .rey-checkoutPage .rey-formReview-block { gap:8px; }
}

/* ---- Small phones: compact numbered stepper — hide crumb labels, keep the
   node circles (their ::before sizing is rem-based, so font-size:0 on the
   anchor hides only the label text). ---- */
@media (max-width:430px){
  body.stx-commerce .rey-checkoutPage-crumbs ul { gap:6px !important; }
  body.stx-commerce .rey-checkoutPage-crumbs a { font-size:0 !important; gap:0 !important; }
  body.stx-commerce .rey-cartPage .cart_totals .order-total .amount,
  body.stx-commerce .rey-cartPage .cart_totals .order-total .stx-dep-fulltotal .amount { font-size:2rem !important; }
}

/* =================================================================
   15 · Reduced motion
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  body.stx-commerce .rey-cartPage *,
  body.stx-commerce .rey-checkoutPage * { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* =================================================================
   16 · Cart order-summary redesign  (CART page only)
   Implements Claude Design "Cart.html" (deposit) + "Cart (Full Payment).html"
   (standard) for the right-hand summary. Restyles existing Woo/Rey markup +
   the injected rows (commerce.php / deposit.php) into a single clarity-first
   summary card. Left line-items column + checkout page are untouched.
   ================================================================= */
body.stx-commerce .rey-cartPage .cart_totals {
  --P:clamp(20px,2vw,26px);
  --blue:#2F6BFF; --blue-h:#4F84FF; --blue-text:#8FB0FF;
  --blue-soft:rgba(47,107,255,.12); --blue-line:rgba(47,107,255,.34);
  padding:0 !important;
  background:#101012 !important;
  border:1px solid var(--ink-700) !important; border-radius:var(--r4) !important;
  overflow:hidden; box-shadow:var(--shadow);
}
/* hide Woo's "Cart totals" heading — replaced by the eyebrow */
body.stx-commerce .rey-cartPage .cart_totals > h2 { display:none !important; }

/* ---- summary header: eyebrow + coupon ---- */
body.stx-commerce .rey-cartPage .cart_totals .stx-sum-top {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:22px var(--P) 0;
}
body.stx-commerce .rey-cartPage .stx-sum-eyebrow {
  font-family:var(--ff-disp); font-size:.7rem; white-space:nowrap;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-400);
}
body.stx-commerce .rey-cartPage .stx-sum-couponToggle {
  cursor:pointer; background:none; border:0; padding:0; display:inline-flex; align-items:center; gap:5px;
  font-size:.78rem; color:var(--ink-500); transition:color var(--fast) var(--ease); white-space:nowrap;
}
body.stx-commerce .rey-cartPage .stx-sum-couponToggle:hover { color:var(--ink-200); }
body.stx-commerce .rey-cartPage .stx-sum-couponToggle svg { width:13px; height:13px; transition:transform var(--base) var(--ease); }
body.stx-commerce .rey-cartPage .stx-sum-couponToggle[aria-expanded="true"] svg { transform:rotate(45deg); }
body.stx-commerce .rey-cartPage .stx-sum-couponToggle__close { display:none; }
body.stx-commerce .rey-cartPage .stx-sum-couponToggle[aria-expanded="true"] .stx-sum-couponToggle__add { display:none; }
body.stx-commerce .rey-cartPage .stx-sum-couponToggle[aria-expanded="true"] .stx-sum-couponToggle__close { display:inline; }
/* inline collapsible field below the header (design "coupon-field") */
body.stx-commerce .rey-cartPage .cart_totals .stx-sum-couponForm {
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  margin:0 var(--P); max-height:0; overflow:hidden; opacity:0;
  transition:max-height var(--base) var(--ease), opacity var(--base) var(--ease), margin var(--base) var(--ease);
}
body.stx-commerce .rey-cartPage .cart_totals .stx-sum-couponForm.is-open { max-height:60px; opacity:1; margin-top:14px; }
body.stx-commerce .rey-cartPage .stx-sum-couponInput {
  height:42px; padding:0 14px; background:var(--ink-950);
  border:1px solid var(--ink-600); border-radius:var(--pill); color:var(--ink-50); font-size:.82rem;
}
body.stx-commerce .rey-cartPage .stx-sum-couponInput::placeholder { color:var(--ink-500); letter-spacing:.02em; }
body.stx-commerce .rey-cartPage .stx-sum-couponForm button {
  height:42px; padding:0 18px; border-radius:var(--pill); border:0; cursor:pointer;
  background:var(--ink-700); color:var(--ink-100); font-size:.82rem; font-weight:600;
  transition:background var(--fast) var(--ease);
}
body.stx-commerce .rey-cartPage .stx-sum-couponForm button:hover { background:var(--ink-600); }

/* remove Rey's own "Have a Coupon?" cart toggle — superseded by the summary one */
body.stx-commerce .rey-cartPage .rey-toggleCoupon,
body.stx-commerce .rey-cartPage .cart-collaterals .coupon { display:none !important; }

/* ---- ledger: table → flex rows, ordered to the design ---- */
body.stx-commerce .rey-cartPage .cart_totals .shop_table { display:block; width:100%; margin:0; border:0; background:transparent !important; }
body.stx-commerce .rey-cartPage .cart_totals .shop_table tbody { display:flex; flex-direction:column; gap:13px; padding:28px 0 0; }
/* each row is padded individually so full-bleed rows (deposit plan, banner) can
   opt out cleanly — no negative-margin bleed. The full-bleed rows are excluded
   from this flex rule so they stay block-level and wrap to the card width
   (otherwise a single-cell flex row sizes to its longest unbreakable line and
   overflows the card). */
body.stx-commerce .rey-cartPage .cart_totals .shop_table tr:not(.stx-dep-panel):not(.stx-savebanner-row):not(.woocommerce-shipping-totals) {
  display:flex; align-items:baseline; justify-content:space-between;
  border:0 !important; padding:0 var(--P) !important; margin:0 !important; background:transparent !important;
}
body.stx-commerce .rey-cartPage .cart_totals .shop_table tr.stx-dep-panel,
body.stx-commerce .rey-cartPage .cart_totals .shop_table tr.stx-savebanner-row { border:0 !important; margin:0 !important; background:transparent !important; }
body.stx-commerce .rey-cartPage .cart_totals .shop_table th,
body.stx-commerce .rey-cartPage .cart_totals .shop_table td {
  border:0 !important; padding:0 !important; font-size:.9rem; vertical-align:baseline; background:transparent !important;
}
body.stx-commerce .rey-cartPage .cart_totals .shop_table th { font-weight:400; color:var(--ink-300); text-align:left; flex:0 1 auto; white-space:nowrap; }
body.stx-commerce .rey-cartPage .cart_totals .shop_table td {
  color:var(--ink-200); text-align:right; white-space:nowrap; padding-left:var(--s4) !important;
  font-variant-numeric:tabular-nums;
}
body.stx-commerce .rey-cartPage .cart_totals .shop_table td::before { content:none !important; }

/* row order (design sequence) */
body.stx-commerce .rey-cartPage .cart_totals .cart-subtotal     { order:1; }
body.stx-commerce .rey-cartPage .cart_totals .cart-discount      { order:2; }
body.stx-commerce .rey-cartPage .cart_totals .stx-dep-tax        { order:3; }
body.stx-commerce .rey-cartPage .cart_totals .stx-savings        { order:4; }
body.stx-commerce .rey-cartPage .cart_totals .estimated-delivery { order:5; }
body.stx-commerce .rey-cartPage .cart_totals .stx-eta-note       { order:6; }
body.stx-commerce .rey-cartPage .cart_totals .__no-shipping-text { order:7; }
body.stx-commerce .rey-cartPage .cart_totals .woocommerce-shipping-totals { order:3; }
body.stx-commerce .rey-cartPage .cart_totals .order-total        { order:8; }
body.stx-commerce .rey-cartPage .cart_totals .stx-savebanner-row { order:9; }
body.stx-commerce .rey-cartPage .cart_totals .stx-dep-panel      { order:10; }

/* shipping methods row (standard carts that need shipping): a readable,
   full-width block — never the single-line flex treatment (which clips the
   radio labels). Rey hides its <th> and prints a "Shipment" caption via td:before. */
body.stx-commerce .rey-cartPage .cart_totals .shop_table tr.woocommerce-shipping-totals {
  display:block !important; width:100%; padding:0 var(--P) !important;
  margin:0 !important; border:0 !important; background:transparent !important;
}
body.stx-commerce .rey-cartPage .cart_totals .woocommerce-shipping-totals th { display:none !important; }
body.stx-commerce .rey-cartPage .cart_totals .woocommerce-shipping-totals td {
  display:block !important; width:100%; text-align:left !important; white-space:normal !important;
  padding:0 !important; color:var(--ink-300);
}
body.stx-commerce .rey-cartPage .cart_totals .woocommerce-shipping-totals td::before {
  content:"Shipping" !important; display:block; margin-bottom:9px;
  font-family:var(--ff-disp); font-size:.78rem; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--ink-400);
}
body.stx-commerce .rey-cartPage .cart_totals #shipping_method { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
body.stx-commerce .rey-cartPage .cart_totals #shipping_method li { display:flex; align-items:center; }
body.stx-commerce .rey-cartPage .cart_totals #shipping_method label { font-size:.86rem; color:var(--ink-200); line-height:1.4; }
body.stx-commerce .rey-cartPage .cart_totals #shipping_method .amount { color:var(--ink-100); }

/* tax: the cart never shows a tax row at all — tax is resolved at checkout
   (standard) or billed on the balance invoice (deposit). */
body.stx-commerce .rey-cartPage .cart_totals .tax-total { display:none !important; }

/* coupon (applied) row */
body.stx-commerce .rey-cartPage .cart_totals .cart-discount th { color:var(--ink-200); }
body.stx-commerce .rey-cartPage .cart_totals .cart-discount td,
body.stx-commerce .rey-cartPage .cart_totals .cart-discount .amount { color:var(--ok) !important; }
body.stx-commerce .rey-cartPage .cart_totals .cart-discount .woocommerce-remove-coupon {
  display:inline-block; margin-left:8px; font-size:.7rem; color:var(--ink-500); text-decoration:underline;
}

/* you save row */
body.stx-commerce .rey-cartPage .cart_totals .stx-savings th { color:var(--ink-300) !important; font-weight:400 !important; }
body.stx-commerce .rey-cartPage .cart_totals .stx-savings td,
body.stx-commerce .rey-cartPage .cart_totals .stx-savings .amount { color:var(--ok) !important; font-weight:500 !important; }

/* estimated delivery (info) */
body.stx-commerce .rey-cartPage .cart_totals .estimated-delivery th { color:var(--ink-400); }
body.stx-commerce .rey-cartPage .cart_totals .estimated-delivery td {
  color:var(--ink-200); font-family:var(--ff-disp); font-size:.9rem; letter-spacing:.02em;
}
/* made-to-order caption under the estimated-delivery row — quiet, full-width,
   matches the "__no-shipping-text" caption treatment. Cart + checkout. */
body.stx-commerce .rey-cartPage .cart_totals .stx-eta-note,
body.stx-commerce .rey-checkoutPage .stx-eta-note {
  border:0 !important; background:transparent !important;
}
body.stx-commerce .rey-cartPage .cart_totals .stx-eta-note td,
body.stx-commerce .rey-checkoutPage .stx-eta-note td {
  padding:0 0 2px !important; text-align:left !important; white-space:normal;
  font-size:.74rem; line-height:1.45; color:var(--ink-500);
}

/* "taxes & shipping at checkout" caption — quiet, full-width (standard only;
   deposit mode hides it — the deposit "How you pay" panel explains tax/freight) */
body.stx-commerce:not(.stx-deposit-mode) .rey-cartPage .cart_totals .__no-shipping-text { display:flex !important; }
body.stx-commerce.stx-deposit-mode .rey-cartPage .cart_totals .__no-shipping-text { display:none !important; }
body.stx-commerce .rey-cartPage .cart_totals .__no-shipping-text,
body.stx-commerce .rey-cartPage .cart_totals .__no-shipping-text td {
  text-align:left !important; padding-left:0 !important; white-space:normal;
  font-size:.74rem; color:var(--ink-500); line-height:1.4;
}

/* ---- the total ---- */
/* needs .shop_table tr to out-specify the generic `tr { border:0 !important }`
   reset above — otherwise the divider line above the total is stripped */
body.stx-commerce .rey-cartPage .cart_totals .shop_table tr.order-total {
  align-items:flex-end !important; margin-top:8px !important;
  padding-top:20px !important; border-top:1px solid var(--ink-600) !important;
}
body.stx-commerce .rey-cartPage .cart_totals .order-total th {
  font-family:var(--ff-mono,var(--ff-disp)); font-size:.78rem; text-transform:uppercase;
  letter-spacing:var(--ls-wide); color:var(--ink-300); padding-bottom:6px; font-weight:400;
}
body.stx-commerce .rey-cartPage .cart_totals .order-total td { padding-left:var(--s4) !important; }
body.stx-commerce .rey-cartPage .cart_totals .order-total .amount,
body.stx-commerce .rey-cartPage .cart_totals .order-total .stx-dep-fulltotal,
body.stx-commerce .rey-cartPage .cart_totals .order-total .stx-dep-fulltotal .amount {
  font-family:var(--ff-disp) !important; font-weight:300 !important; font-size:2.5rem !important;
  letter-spacing:-.03em !important; color:var(--ink-50) !important; line-height:1 !important;
}

/* ---- green savings banner (full width) ---- */
body.stx-commerce .rey-cartPage .cart_totals .stx-savebanner-row { display:block !important; width:100%; padding:0 var(--P) !important; }
body.stx-commerce .rey-cartPage .cart_totals .stx-savebanner-row td { display:block !important; width:100%; padding:0 !important; white-space:normal !important; }
body.stx-commerce .rey-cartPage .stx-savebanner {
  display:flex; align-items:flex-start; gap:9px; margin-top:4px; white-space:normal;
  background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.20);
  border-radius:var(--r3); padding:11px 13px; font-size:.82rem; line-height:1.4; color:var(--ok);
}
body.stx-commerce .rey-cartPage .stx-savebanner svg { width:15px; height:15px; flex:none; }
body.stx-commerce .rey-cartPage .stx-savebanner b { font-weight:600; }

/* ---- deposit "How you pay" plan (full-bleed to card edges) ---- */
body.stx-commerce .rey-cartPage .cart_totals .stx-dep-panel,
body.stx-commerce .rey-cartPage .cart_totals .stx-dep-panel > td { display:block !important; width:100%; padding:0 !important; border:0 !important; }
/* shared two-step "How you pay" plan — same component on cart + checkout
   (Claude Design "Cart.html" / "Checkout.html"). Self-contained blue tokens so
   it renders identically regardless of which container it's dropped into. */
body.stx-commerce .stx-plan {
  --blue:#2F6BFF; --blue-text:#8FB0FF; --blue-soft:rgba(47,107,255,.12); --blue-line:rgba(47,107,255,.34);
  background:linear-gradient(180deg,var(--ink-850),#101012);
  /* the broad .shop_table td rule sets white-space:nowrap; reset it here so the
     plan's title/sub/note wrap (the amount + tag re-assert nowrap themselves) */
  white-space:normal;
}
/* CART: full-bleed strip to the order-card edges */
body.stx-commerce .rey-cartPage .stx-plan { margin:16px 0 0; padding:var(--P); border-top:1px solid var(--ink-700); }
/* CHECKOUT: a contained, bordered card inside the review panel */
body.stx-commerce .rey-checkoutPage .stx-plan { margin-top:var(--s5); padding:var(--s5); border:1px solid var(--ink-800); border-radius:var(--r4); }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s5); }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__eyebrow {
  font-family:var(--ff-disp); font-size:.7rem; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-300);
}
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__tag {
  font-size:.62rem; font-family:var(--ff-disp); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:var(--blue-text); background:var(--blue-soft); border:1px solid var(--blue-line);
  padding:4px 9px; border-radius:var(--pill);
}
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__step {
  display:grid; grid-template-columns:24px minmax(0,1fr) auto; column-gap:14px; row-gap:0; align-items:start; padding:14px 0;
}
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__txt { min-width:0; }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__sub { overflow-wrap:anywhere; }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__amt { padding-left:10px; }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__step:first-of-type { padding-top:0; }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__step + .stx-plan__step { border-top:1px solid var(--ink-800); }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__num {
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:1px;
  font-family:var(--ff-disp); font-size:.7rem; font-weight:500; border:1px solid var(--ink-600); color:var(--ink-300);
}
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__step--now .stx-plan__num { background:var(--blue); color:#fff; border-color:var(--blue); }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__title { font-size:.9rem; color:var(--ink-50); font-weight:500; }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__sub { font-size:.78rem; line-height:1.5; color:var(--ink-400); margin-top:3px; }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__amt {
  text-align:right; white-space:nowrap; font-family:var(--ff-disp); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__step--now .stx-plan__amt,
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__step--now .stx-plan__amt .amount { font-size:1.3rem; font-weight:600; color:var(--blue-text); }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__step--later .stx-plan__amt,
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__step--later .stx-plan__amt .amount { font-size:1.05rem; font-weight:400; color:var(--ink-100); }
body.stx-commerce :is(.rey-cartPage,.rey-checkoutPage) .stx-plan__due {
  display:block; font-family:var(--ff-disp); font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-500); margin-top:4px; font-weight:400;
}
/* belt-and-braces: the plan row must stay block-level (never a flex item that
   sizes to its longest line) so all its content wraps to the card width */
body.stx-commerce .rey-cartPage .cart_totals tr.stx-dep-panel,
body.stx-commerce .rey-cartPage .cart_totals tr.stx-dep-panel > td { display:block !important; width:100% !important; max-width:100% !important; }

/* ---- CTA: proceed button + reassurance ---- */
body.stx-commerce .rey-cartPage .cart_totals .wc-proceed-to-checkout {
  display:block; margin:0 !important; padding:18px var(--P) 22px !important; border:0 !important;
}
body.stx-commerce .rey-cartPage .cart_totals .checkout-button {
  display:flex !important; align-items:center; justify-content:center; gap:10px;
  width:100% !important; height:58px !important; margin:0 !important;
  background:var(--blue) !important; color:#fff !important; border:0 !important; border-radius:var(--pill) !important;
  font-family:var(--ff-disp); font-size:.95rem !important; font-weight:600 !important; letter-spacing:.01em;
  box-shadow:0 10px 30px -10px rgba(47,107,255,.55) !important;
  transition:transform var(--base) var(--ease), background var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
body.stx-commerce .rey-cartPage .cart_totals .checkout-button:hover {
  background:var(--blue-h) !important; transform:translateY(-1px);
  box-shadow:0 16px 40px -10px rgba(47,107,255,.6) !important;
}
body.stx-commerce .rey-cartPage .cart_totals .checkout-button::after { display:none !important; content:none !important; }
/* design lock glyph before the label */
body.stx-commerce .rey-cartPage .cart_totals .checkout-button::before {
  content:"" !important; display:inline-block !important; width:16px; height:16px; flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Crect%20x='3'%20y='7'%20width='10'%20height='6.5'%20rx='1.2'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3Cpath%20d='M5.2%207V5.2a2.8%202.8%200%200%201%205.6%200V7'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Crect%20x='3'%20y='7'%20width='10'%20height='6.5'%20rx='1.2'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3Cpath%20d='M5.2%207V5.2a2.8%202.8%200%200%201%205.6%200V7'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.stx-commerce .rey-cartPage .stx-cart-reassure {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:12px 0 0; font-size:.76rem; color:var(--ink-400); text-align:center;
}
body.stx-commerce .rey-cartPage .stx-cart-reassure svg { width:14px; height:14px; color:var(--ink-400); flex:none; }

/* ---- trust footer (sits inside the card) ---- */
/* Rey's .cart_totals is a flex column and gives .wc-proceed-to-checkout order:10,
   so without an explicit order this block (source order 0) floats ABOVE the
   button. order:11 drops it to the very bottom, under the reassurance line. */
body.stx-commerce .rey-cartPage .cart_totals .stx-trust {
  order:11;
  margin:0 !important; padding:20px var(--P) !important;
  border-top:1px solid var(--ink-800) !important;
  display:flex; flex-direction:column; gap:12px;
}
body.stx-commerce .rey-cartPage .cart_totals .stx-trust__secure { justify-content:flex-start; font-size:.8rem; color:var(--ink-300); margin:0; }
body.stx-commerce .rey-cartPage .cart_totals .stx-trust__points { gap:11px; margin:0; }
body.stx-commerce .rey-cartPage .cart_totals .stx-trust__points li { align-items:flex-start; font-size:.78rem; color:var(--ink-400); line-height:1.45; }
body.stx-commerce .rey-cartPage .cart_totals .stx-trust__points svg { color:var(--ink-500); margin-top:1px; }
body.stx-commerce .rey-cartPage .cart_totals .stx-trust__cards { margin-top:6px; }

/* widen the order-summary column (Rey defaults the totals to ~32% via
   --cart-table-size:68%). The left line-items column stays comfortably wide. */
@media (min-width:1025px){
  body.stx-commerce .rey-cartPage.--layout-custom { --cart-table-size:62%; }
}
/* keep the card aligned to the top of the sticky column */
@media (min-width:1001px){
  body.stx-commerce .rey-cartPage .cart_totals { position:sticky; top:96px; }
}
@media (max-width:540px){
  body.stx-commerce .rey-cartPage .cart_totals .order-total .amount,
  body.stx-commerce .rey-cartPage .cart_totals .order-total .stx-dep-fulltotal .amount { font-size:2.1rem !important; }
}

/* =================================================================
   17 · Checkout payment-step refinements  (user requests)
   ================================================================= */

/* --- 17a · Remove the "Have a Coupon?" bar Rey prints under the mobile
   order-summary on the PAYMENT step. The info-step coupon trigger is untouched
   (Rey only shows .couponMobile when [data-active-step="payment"]). --------- */
body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-checkoutPage-couponMobile {
  display:none !important;
}

/* Mobile payment: reduce the card-inside-card stack. Keep Stripe's own secure
   element framed, but flatten Rey/Woo's wrapper cards around it. */
@media (max-width:782px){
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-customerDetails-payment.__step {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-formReview {
    display:grid;
    gap:10px;
    margin:0 0 18px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    overflow:visible;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-formReview-block,
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-formReview .rey-formReview-block:first-child {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 12px;
    align-items:start;
    border:1px solid var(--c-line) !important;
    border-radius:var(--r3) !important;
    background:var(--c-surface-2) !important;
    box-shadow:none !important;
    padding:14px 16px !important;
    margin:0 !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-formReview-block + .rey-formReview-block {
    border-top:1px solid var(--c-line) !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-formReview-title {
    min-width:0;
    grid-column:1;
    grid-row:1;
    font-size:.68rem;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-formReview-content {
    grid-column:1 / -1;
    grid-row:2;
    min-width:0;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .rey-formReview-action {
    grid-column:2;
    grid-row:1;
    margin-left:0;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] #payment {
    margin-top:0;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] ul.payment_methods {
    margin:0 !important;
    border:1px solid var(--c-line) !important;
    border-radius:var(--r4) !important;
    overflow:hidden !important;
    background:var(--c-surface) !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] ul.payment_methods li {
    padding:16px !important;
    border-bottom:1px solid var(--c-line) !important;
    background:transparent !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] ul.payment_methods li:last-child {
    border-bottom:0 !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] label[for="payment_method_stripe"] {
    margin:0 0 14px !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .payment_box,
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] #payment ul.wc_payment_methods li.wc_payment_method div.payment_box,
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] #payment ul.wc_payment_methods li.wc_payment_method div.payment_box.payment_method_stripe {
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] #wc-stripe-upe-form {
    padding:0 !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .woocommerce-terms-and-conditions-wrapper {
    margin-top:18px !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom[data-active-step="payment"] .woocommerce-privacy-policy-text {
    margin-top:18px !important;
  }
}

/* --- 17b · Widen the Stripe card field on the payment step. The field is
   nested step → payment-method row → payment box, each stacking horizontal
   padding (~74px/side). Trim the step's side padding, strip the row's side
   padding, and break the Stripe box out to the row edges with only a slim
   inner pad — so the card input gets the full width. ----------------------- */
body.stx-commerce .rey-checkoutPage .rey-customerDetails-payment.__step {
  padding-left:clamp(14px,1.6vw,20px) !important;
  padding-right:clamp(14px,1.6vw,20px) !important;
}
/* keep a small indent on the method row so the radio + label aren't flush */
body.stx-commerce .rey-checkoutPage .rey-customerDetails-payment ul.payment_methods li {
  padding:16px 12px 14px !important;
}
/* Flatten the Stripe payment box: it was a second bordered/filled card nested
   inside the method row, leaving dead space on its right and bottom. Drop its
   border, fill and side/bottom padding so the Stripe fields (which carry their
   own borders) fill the row width directly. */
body.stx-commerce .rey-checkoutPage .rey-customerDetails-payment .payment_box,
body.stx-commerce .rey-checkoutPage.--layout-custom #payment ul.wc_payment_methods li.wc_payment_method div.payment_box,
body.stx-commerce .rey-checkoutPage.--layout-custom #payment ul.wc_payment_methods li.wc_payment_method div.payment_box.payment_method_stripe {
  margin:6px 0 0 !important;
  padding:4px 0 0 !important;
  background:transparent !important;
  border:0 !important;
}

/* --- 17c · Apple Pay contrast: handled via the Stripe gateway's Express
   Checkout button-theme setting (Light / Outline), NOT CSS — the button is
   inside a sandboxed Stripe iframe and a CSS frame around it interfered with
   the Link "fast checkout" dismiss control. No wrapper styling here. -------- */

/* --- 17d · Mobile checkout order.
   Rey renders the progress crumbs inside the form, while the order summary is a
   sibling of that form. Moving the whole form above the summary puts every step
   above the summary. Instead, flatten only the mobile form box so its children
   can be ordered as: progress → order summary → active step. Desktop is
   untouched. -------------------------------------------------------------- */
@media (max-width:1024px){
  body.stx-commerce .rey-checkoutPage.--layout-custom .rey-checkoutPage-form {
    display:contents !important;
    order:0 !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom .rey-checkoutPage-crumbs {
    order:0 !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom .rey-checkoutPage-review {
    order:1 !important;
    margin:0 0 var(--s5) !important;
  }
  body.stx-commerce .rey-checkoutPage.--layout-custom .__step {
    order:2 !important;
  }
}