/* ================================================================
   SeeThru — Product Summary (right-hand buy panel)
   Scoped under .stx-pdp--buy. Ported from the design's product.css and
   extended to skin WooCommerce's native add-to-cart / variation form.
   ================================================================ */

.stx-pdp--buy { display: block; }

.stx-buy {
  display: flex;
  flex-direction: column;
  text-align: left; /* the Elementor column may inherit center — force left */
}
.stx-buy.is-sticky { position: sticky; top: 96px; }

/* ---------- Eyebrow ---------- */
.stx-buy__eyebrow {
  font-family: var(--stx-font-mono);
  font-size: 11px;
  letter-spacing: var(--stx-ls-eyebrow);
  text-transform: uppercase;
  color: var(--stx-ink-300);
  margin-bottom: var(--stx-s-4);
}

/* ---------- Rating ---------- */
.stx-buy__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--stx-s-4);
  font-size: 13px;
  color: var(--stx-ink-300);
}
.stx-buy__stars { display: inline-flex; gap: 2px; color: var(--stx-star); }
.stx-buy__stars svg { width: 14px; height: 14px; display: block; }
.stx-buy__rating b { color: var(--stx-ink-50); font-weight: var(--stx-fw-medium); }
.stx-buy__rating a { color: var(--stx-ink-400); border-bottom: 1px solid var(--stx-ink-700); padding-bottom: 1px; transition: color var(--stx-dur-fast); }
.stx-buy__rating a:hover { color: var(--stx-ink-200); }

/* ---------- Title ---------- */
.stx-buy__title {
  font-family: var(--stx-font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: var(--stx-fw-light);
  color: var(--stx-ink-50);
  margin: 0 0 var(--stx-s-3);
}

/* ---------- Subtitle ---------- */
.stx-buy__sub {
  font-size: 14px;
  color: var(--stx-ink-300);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: var(--stx-s-5);
}
.stx-buy__sub span { position: relative; }
.stx-buy__sub span:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -11px;
  color: var(--stx-ink-600);
}

/* ---------- Feature badges ---------- */
.stx-buy__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stx-s-2);
  margin-bottom: var(--stx-s-6);
}
.stx-buy__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--stx-ink-200);
  border: 1px solid var(--stx-ink-700);
  border-radius: var(--stx-r-pill);
  padding: 7px 13px 7px 11px;
  background: var(--stx-ink-900);
}
.stx-buy__badge svg,
.stx-buy__badge i { font-size: 13px; width: 13px; height: 13px; color: var(--stx-ink-50) !important; fill: currentColor; flex: none; }
.stx-buy__badge svg { display: block; }

/* ---------- Price ---------- */
.stx-buy__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: var(--stx-s-5);
  border-top: 1px solid var(--stx-ink-700);
}
.stx-buy__price-now {
  font-family: var(--stx-font-display);
  font-weight: var(--stx-fw-light);
  font-size: clamp(32px, 3.4vw, 44px);
  letter-spacing: -0.03em;
  color: var(--stx-ink-50);
  line-height: 1;
}
.stx-buy__from {
  font-family: var(--stx-font-body);
  font-size: 14px;
  font-weight: var(--stx-fw-regular);
  letter-spacing: 0;
  color: var(--stx-ink-400);
  margin-right: 4px;
  vertical-align: middle;
}
.stx-buy__price-now del { color: var(--stx-ink-500); font-size: 0.5em; text-decoration: line-through; margin-right: 8px; }
.stx-buy__price-now ins { text-decoration: none; }
.stx-buy__price-now .woocommerce-Price-amount { font-family: inherit; }
.stx-buy__price-was { font-size: 18px; color: var(--stx-ink-400); text-decoration: line-through; }
.stx-buy__save {
  font-family: var(--stx-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--stx-fw-semi);
  color: var(--stx-ink-950);          /* dark text */
  background: var(--stx-ink-50);       /* white pill (not the accent) */
  padding: 5px 10px;
  border-radius: var(--stx-r-pill);
  white-space: nowrap;
}
.stx-buy__finance {
  font-size: 13px;
  color: var(--stx-ink-300);
  margin: 10px 0 var(--stx-s-6);
}
.stx-buy__finance b { color: var(--stx-ink-200); font-weight: var(--stx-fw-medium); }

/* ================================================================
   WooCommerce add-to-cart form — skinned to the design
   ================================================================ */
.stx-buy__form { margin: 0; }
.stx-buy__form .stock,
.stx-buy__form .woocommerce-variation-price,
.stx-buy__form .price { /* Woo's own price echoes — we render our own block */ }

/* Variation field heading injected by summary.js */
.stx-buy__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--stx-s-3);
}
.stx-buy__field-label {
  font-family: var(--stx-font-mono);
  font-size: 11px;
  letter-spacing: var(--stx-ls-eyebrow);
  text-transform: uppercase;
  color: var(--stx-ink-200);
}
.stx-buy__field-hint { font-size: 12px; color: var(--stx-ink-400); }

/* The native variations table → block field groups */
.stx-buy__form table.variations {
  width: 100%;
  border: 0;
  margin: 0 0 var(--stx-s-4);
  border-collapse: collapse;
}
.stx-buy__form table.variations tbody,
.stx-buy__form table.variations tr,
.stx-buy__form table.variations th,
.stx-buy__form table.variations td {
  display: block;
  width: auto;
  border: 0;
  padding: 0;
  background: none;
}
.stx-buy__form table.variations tr + tr { margin-top: var(--stx-s-5); }
.stx-buy__form table.variations th.label {
  margin-bottom: var(--stx-s-3);
}
.stx-buy__form table.variations th.label label {
  font-family: var(--stx-font-mono);
  font-size: 11px;
  letter-spacing: var(--stx-ls-eyebrow);
  text-transform: uppercase;
  color: var(--stx-ink-300);
  font-weight: var(--stx-fw-medium);
  margin: 0;
}

/* Native <select> — kept usable as a fallback (JS upgrades to pills) */
.stx-buy__form .variations select {
  width: 100%;
  height: 50px;
  padding: 0 40px 0 16px;
  color: var(--stx-ink-50);
  background-color: var(--stx-ink-900);
  border: 1px solid var(--stx-ink-600);
  border-radius: var(--stx-r-3);
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23B5B5BA' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
/* "Clear" reset → subtle ghost chip with an × glyph (was a bare underlined link) */
.stx-buy__form .reset_variations {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--stx-s-3);
  padding: 6px 13px 6px 10px;
  font-size: 12px;
  font-weight: var(--stx-fw-medium);
  line-height: 1;
  color: var(--stx-ink-300);
  background: var(--stx-ink-900);
  border: 1px solid var(--stx-ink-700);
  border-radius: var(--stx-r-pill);
  transition: color var(--stx-dur-fast), border-color var(--stx-dur-fast), background var(--stx-dur-fast);
}
.stx-buy__form .reset_variations::before {
  content: "";
  width: 11px; height: 11px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.stx-buy__form .reset_variations:hover { color: var(--stx-ink-50); border-color: var(--stx-ink-500); background: var(--stx-ink-800); }

/* ── Universal variation swatch ──────────────────────────────────────────
   One card, used by BOTH the priced add-to-cart pills (built by summary.js)
   and the quote-only picker (server-rendered). Image optional (.has-img).
   Matches the canonical "Product Detail" design's .pitch__opt: badge pill
   straddling the top edge, value, tag descriptor. The design's titanium
   accent maps to --stx-blue here (no beige). Selected = blue border + gray
   fill, no checkmark (per spec). Every selector is root-scoped under .stx-pdp
   so it out-specifies Rey's global <button> rules (0,1,1) WITHOUT !important —
   see the "Making design / CSS changes" SOP in CLAUDE.md. */
.stx-pdp .stx-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: var(--stx-s-3);
  margin-top: 15px; /* headroom for the badge that straddles the top edge */
}
.stx-pdp .stx-pill {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 14px 13px;
  border: 1px solid var(--stx-ink-700);
  border-radius: var(--stx-r-3);
  background: var(--stx-ink-850);
  text-align: left; color: var(--stx-ink-200);
  cursor: pointer; box-shadow: none;
  transition: border-color var(--stx-dur-fast) var(--stx-ease-out),
              background var(--stx-dur-fast) var(--stx-ease-out);
}
.stx-pdp .stx-pill:hover { border-color: var(--stx-ink-500); }
.stx-pdp .stx-pill.is-active { border-color: var(--stx-blue); background: var(--stx-ink-700); }
.stx-pdp .stx-pill.is-disabled { opacity: 0.4; cursor: not-allowed; }

.stx-pill__check { display: none; } /* selection shown by the blue border — no checkmark */

/* Badge ("Most Popular" / "Recommended") — a pill straddling the top border,
   its opaque fill cropping the card border behind it. Editable per variation. */
.stx-pdp .stx-pill__badge {
  position: absolute; top: 0; right: 14px;
  transform: translateY(-50%);
  z-index: 2; white-space: nowrap; pointer-events: none;
  font-family: var(--stx-font-mono); font-size: 9px; font-weight: var(--stx-fw-medium);
  letter-spacing: 0.08em; line-height: 1;
  color: var(--stx-ink-0);          /* white text */
  background: var(--stx-ink-700);    /* gray fill (opaque — crops the card border) */
  border: 1px solid var(--stx-ink-950); /* black outline */
  border-radius: var(--stx-r-pill);
  padding: 4px 9px 3px;
}

.stx-pill__label {
  font-family: var(--stx-font-display); font-size: 22px; font-weight: var(--stx-fw-light);
  letter-spacing: -0.02em; color: var(--stx-ink-50);
}
.stx-pill__desc {
  font-family: var(--stx-font-mono); font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--stx-ink-400); margin-top: 2px;
}

/* Optional image (when a variation has its own image) */
.stx-pdp .stx-pill.has-img { padding: 12px 12px 14px; }
.stx-pill__img {
  display: block; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 8px;
  border-radius: var(--stx-r-2); overflow: hidden;
  background: radial-gradient(120% 100% at 50% 25%, #fff, #ECECEE);
}
.stx-pill__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* Native single-variation block (price hidden — we render our own) */
.stx-buy__form .single_variation_wrap { margin-top: var(--stx-s-4); }
.stx-buy__form .single_variation .price { display: none; }
.stx-buy__form .single_variation { margin-bottom: var(--stx-s-4); }
/* Selected variation's description → titanium detail note */
.stx-buy__form .woocommerce-variation-description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--stx-ink-300);
  padding-left: 14px;
  border-left: 2px solid var(--stx-titanium);
}
.stx-buy__form .woocommerce-variation-description p { margin: 0; }
.stx-buy__form .woocommerce-variation-description b,
.stx-buy__form .woocommerce-variation-description strong { color: var(--stx-ink-50); }
.stx-buy__form .woocommerce-variation-availability { font-size: 13px; color: var(--stx-ink-400); margin-bottom: var(--stx-s-3); }
.stx-buy__form .wc-no-matching-variations { font-size: 13px; color: var(--stx-signal-warn); }

/* The qty + add-to-cart + heart row — a single line: −[qty]+ · [Add to cart] · [♥].
   Styled on BOTH the native WooCommerce container (what paints first) AND the
   .stx-cart-row wrapper that summary.js moves the controls into, so the layout
   is identical before and after enhancement — no flash, no jump. The button
   (flex:1) sits between the fixed-width qty and heart and absorbs all shrinking,
   so the heart never gets pushed off a narrow buy column. */
.stx-buy__form .woocommerce-variation-add-to-cart,
.stx-buy__form form.cart:not(.variations_form),
.stx-cart-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: var(--stx-s-3);
}
/* Top spacer on the native container only (it stays as the wrapper after JS
   moves the controls into .stx-cart-row) so the gap above isn't doubled. */
.stx-buy__form .woocommerce-variation-add-to-cart,
.stx-buy__form form.cart:not(.variations_form) {
  margin-top: var(--stx-s-6);
}

/* First-paint guard: keep the raw Woo <select> and number input offscreen from
   the very first paint (not just once JS adds .stx-qty/.stx-select-hidden), so
   the unstyled dropdown + qty input never flash before the pills/stepper build.
   They stay in the DOM — Woo still reads them; no-JS users get them back via the
   <noscript> block in the widget. */
.stx-buy__form .variations select,
.stx-buy__form .quantity input.qty,
.stx-qty__input {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0;
}

/* Quantity box — the −  value  +  stepper is rendered server-side inside this
   bordered pill, so it shows instantly (no JS-built pop-in / load delay). */
.stx-buy__form .quantity {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--stx-ink-600);
  border-radius: var(--stx-r-pill);
  height: 56px;
  padding: 0 4px;
  background: var(--stx-ink-900);
  flex: 0 0 auto;
}
.stx-qty__btn {
  width: 42px; height: 100%;
  background: none; border: 0; color: var(--stx-ink-200);
  font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  transition: color var(--stx-dur-fast);
}
.stx-qty__btn:hover { color: var(--stx-ink-0); }
.stx-qty__val {
  min-width: 28px;
  text-align: center;
  color: var(--stx-ink-50);
  font-family: var(--stx-font-display);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
/* Compact qty dropdown — hidden on desktop (the −/+ stepper is used there),
   revealed on mobile by the responsive block below. Selector is deliberately
   specific (3 classes) to beat Woo's `div.product form.cart select` rule. */
.stx-buy__form .quantity .stx-qty__select { display: none; }
/* The add-to-cart button → blue pill (matches cart/checkout). Sits BETWEEN the
   qty box and the heart and stretches to fill the gap; min-width:0 lets it shrink
   on a narrow column so the heart stays put instead of being pushed off. */
.stx-pdp--buy .stx-buy__form .single_add_to_cart_button,
.stx-pdp--buy .stx-buy__form button.single_add_to_cart_button {
  position: relative;   /* anchor Rey's injected loader (pinned below) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 56px;
  width: auto;
  flex: 1 1 auto;        /* fill the space between qty and heart */
  min-width: 0;
  background: var(--stx-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--stx-r-pill) !important;
  font-size: 14px;
  font-weight: var(--stx-fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;       /* no shift/lift on press — stays put */
  transition: background var(--stx-dur-base) var(--stx-ease-out), opacity var(--stx-dur-base);
}
.stx-pdp--buy .stx-buy__form .single_add_to_cart_button:hover { background: var(--stx-blue-hover) !important; }
.stx-pdp--buy .stx-buy__form .single_add_to_cart_button:active { transform: none !important; }
.stx-pdp--buy .stx-buy__form .single_add_to_cart_button.disabled,
.stx-pdp--buy .stx-buy__form .single_add_to_cart_button[disabled] { opacity: 0.5; transform: none; cursor: not-allowed; }
.stx-buy__form .single_add_to_cart_button .stx-bag-price { font-weight: var(--stx-fw-medium); letter-spacing: 0.02em; opacity: 0.7; }
.stx-buy__form .single_add_to_cart_button .stx-bag-price:not(:empty)::before { content: "·"; margin: 0 8px 0 6px; }

/* ---------- Neutralise Rey's add-to-cart button modules ----------
   On every add (and on variation/qty change) Rey mutates the native
   `single_add_to_cart_button`: its "price in add-to-cart" module re-adds a
   `data-price-atc-val` attribute and paints the price as an ::after pseudo
   (summary.js strips the attribute once at load, but Rey re-adds it on
   `found_variation`/qty change — a race), and its loader injects a 60px
   `.rey-lineLoader`. Inside our buy panel we render our own label + price
   (`.stx-bag-price`), so Rey's injected content is a duplicate that pops in
   and reflows the button content on add — the "button shifts on add to cart".
   Suppress Rey's pseudo + neutralise the loader's footprint here (scoped to
   the panel, so the shop-loop / other buttons keep Rey's behaviour). */
.stx-pdp--buy .stx-buy__form .single_add_to_cart_button::after,
.stx-pdp--buy .stx-buy__form .single_add_to_cart_button::before {
  content: none !important; /* kills Rey price-in-atc's attr-driven price pseudo */
}
/* The loader element, if Rey appends it, must not take row space — pin it to
   the button centre instead of flowing inline (the button is position:relative
   already, from Rey's pdp.css). */
.stx-pdp--buy .stx-buy__form .single_add_to_cart_button .rey-lineLoader {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Wishlist heart — square button at the end of the row. Styled on the native
   .rey-wishlistBtn-wrapper too (not just the JS-added .stx-wish) so it's already
   the right shape at first paint. */
.stx-buy__form .rey-wishlistBtn-wrapper,
.stx-buy__form .yith-wcwl-add-to-wishlist,
.stx-cart-row .stx-wish { flex: 0 0 auto; margin: 0; }
.stx-buy__form .rey-wishlistBtn-wrapper .rey-wishlistBtn,
.stx-buy__form .rey-wishlistBtn-wrapper button,
.stx-cart-row .stx-wish .rey-wishlistBtn,
.stx-cart-row .stx-wish button {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--stx-ink-600) !important;
  border-radius: var(--stx-r-pill) !important;
  background: var(--stx-ink-900) !important;
  color: var(--stx-ink-200) !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: border-color var(--stx-dur-fast), color var(--stx-dur-fast);
}
.stx-buy__form .rey-wishlistBtn-wrapper .rey-wishlistBtn:hover,
.stx-cart-row .stx-wish .rey-wishlistBtn:hover,
.stx-cart-row .stx-wish button:hover { border-color: var(--stx-ink-400) !important; color: var(--stx-titanium-soft) !important; }
.stx-buy__form .rey-wishlistBtn-wrapper svg,
.stx-cart-row .stx-wish svg { width: 18px; height: 18px; }

/* Advanced Product Fields / other add-on fields injected into the form */
.stx-buy__form .wapf-wrapper { margin: var(--stx-s-4) 0; }

/* ---------- Secondary ---------- */
.stx-buy__secondary {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  margin-top: var(--stx-s-4);
  font-size: 13px;
  color: var(--stx-ink-300);
}
.stx-buy__secondary a { color: var(--stx-ink-200); border-bottom: 1px solid var(--stx-ink-600); padding-bottom: 1px; transition: color var(--stx-dur-fast); }
.stx-buy__secondary a:hover { color: var(--stx-ink-50); }

/* ---------- Stock strip ---------- */
.stx-buy__stock {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--stx-s-5);
  font-size: 13px;
  color: var(--stx-ink-300);
}
.stx-buy__stock .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--stx-signal-on);
  box-shadow: 0 0 0 4px rgba(74,222,128,0.14);
  flex: none;
}
.stx-buy__stock.is-out .dot { background: var(--stx-signal-err); box-shadow: 0 0 0 4px rgba(239,68,68,0.14); }
.stx-buy__stock.is-made .dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.14); }
.stx-buy__stock b { color: var(--stx-ink-50); font-weight: var(--stx-fw-medium); }
.stx-buy__stock .ship { color: var(--stx-ink-400); }
.stx-buy__stock .ship::before { content: "·"; margin: 0 9px; color: var(--stx-ink-700); }

/* ---------- Fulfilment card ---------- */
.stx-fulfil {
  margin-top: var(--stx-s-5);
  border: 1px solid var(--stx-ink-700);
  border-radius: var(--stx-r-3);
  background: var(--stx-ink-900);
  padding: var(--stx-s-4) var(--stx-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--stx-s-3);
}
.stx-fulfil__row { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.stx-fulfil__row svg,
.stx-fulfil__row i { width: 16px; height: 16px; font-size: 16px; color: var(--stx-ink-50) !important; fill: currentColor; flex: none; margin-top: 2px; }
.stx-fulfil__row .t { color: var(--stx-ink-200); }
.stx-fulfil__row .t b { color: var(--stx-ink-50); font-weight: var(--stx-fw-medium); }
.stx-fulfil__row .s { color: var(--stx-ink-400); }
.stx-fulfil hr { border: 0; border-top: 1px solid var(--stx-ink-800); margin: 0; }

/* ---------- Add-on cross-sell ---------- */
.stx-addon {
  margin-top: var(--stx-s-5);
  border: 1px solid var(--stx-ink-700);
  border-radius: var(--stx-r-3);
  background: linear-gradient(180deg, var(--stx-ink-900), var(--stx-ink-950));
  padding: var(--stx-s-4);
  display: flex;
  align-items: center;
  gap: var(--stx-s-4);
}
.stx-addon__media {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--stx-r-2);
  background: radial-gradient(120% 100% at 50% 20%, #fff, #ECECEE);
  display: grid; place-items: center; overflow: hidden;
}
.stx-addon__media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.stx-addon__body { flex: 1; min-width: 0; }
.stx-addon__kicker {
  font-family: var(--stx-font-mono); font-size: 10px;
  letter-spacing: var(--stx-ls-wide); text-transform: uppercase;
  color: var(--stx-ink-300); margin-bottom: 3px;
}
.stx-addon__name { display: block; font-size: 14px; color: var(--stx-ink-50); font-weight: var(--stx-fw-medium); transition: color var(--stx-dur-fast); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stx-addon__name:hover { color: var(--stx-titanium-soft); }
.stx-addon__price { font-size: 12px; color: var(--stx-ink-300); margin-top: 2px; }
.stx-addon__price del { color: var(--stx-ink-600); margin-right: 5px; }
.stx-addon__price ins { text-decoration: none; color: var(--stx-ink-300); }
.stx-addon__toggle { min-width: 116px; justify-content: center; } /* stable width so the label swap doesn't resize it */
.stx-addon__toggle.is-loading { opacity: 0.6; pointer-events: none; }
.stx-addon__toggle .stx-addon__check { width: 13px; height: 13px; display: none; }
/* "In bag" state — persistent, reflects the real cart */
.stx-addon__toggle.is-in-bag {
  background: rgba(37, 99, 235, 0.12) !important;
  border-color: var(--stx-blue) !important;
  color: var(--stx-blue-soft, #9DBBF6) !important;
}
.stx-addon__toggle.is-in-bag .plus { display: none; }
.stx-addon__toggle.is-in-bag .stx-addon__check { display: inline-block; }
.stx-addon + .stx-addon { margin-top: var(--stx-s-3); }
/* Woo injects an "enormous" View-cart link after an AJAX add — suppress it. */
.stx-pdp--buy .added_to_cart,
.stx-pdp--buy a.added_to_cart.wc-forward { display: none !important; }

/* Hide native variation selects from first paint (pills replace them) — kills
   the flash of raw dropdowns before JS runs. Revealed via <noscript>. */
.stx-buy__form .variations select {
  position: absolute !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; padding: 0;
}
.stx-addon__toggle {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border: 1px solid var(--stx-ink-600); border-radius: var(--stx-r-pill);
  background: transparent; color: var(--stx-ink-50);
  font-size: 13px; font-weight: var(--stx-fw-medium);
  transition: all var(--stx-dur-fast) var(--stx-ease-out);
}
.stx-addon__toggle:hover { border-color: var(--stx-ink-400); }

/* ---------- Trust row ---------- */
.stx-trustrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--stx-s-6);
  border-top: 1px solid var(--stx-ink-700);
}
/* Symmetric vertical padding so the icons sit evenly between the line above
   and the accordion line below. */
.stx-trustrow__cell {
  padding: var(--stx-s-5) var(--stx-s-3);
  display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
}
.stx-trustrow__cell svg,
.stx-trustrow__cell i { width: 19px; height: 19px; font-size: 19px; color: var(--stx-ink-50) !important; fill: currentColor; }
/* Dynamic line icons are stroke-based — keep them unfilled. */
.stx-trustrow__cell svg.stx-trustrow__svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }
.stx-trustrow__cell span { font-size: 11px; line-height: 1.35; color: var(--stx-ink-300); }

/* ---------- Accordion ---------- */
.stx-acc { margin-top: 0; border-top: 1px solid var(--stx-ink-700); }
.stx-acc__item { border-bottom: 1px solid var(--stx-ink-800); }
.stx-pdp--buy .stx-acc__head {
  width: 100%; background: none; border: 0;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: var(--stx-s-4) 0; text-align: left;
  font-size: 14px; color: var(--stx-ink-100); font-weight: var(--stx-fw-medium);
}
.stx-acc__head .ic {
  position: relative; width: 16px; height: 16px; flex: none;
  transition: transform var(--stx-dur-base) var(--stx-ease-out);
}
.stx-acc__head .ic::before,
.stx-acc__head .ic::after {
  content: ""; position: absolute; background: var(--stx-ink-500);
  border-radius: 2px;
}
.stx-acc__head .ic::before,
.stx-acc__head .ic::after { background: var(--stx-ink-300); }
.stx-acc__head .ic::before { left: 0; top: 7px; width: 16px; height: 1.6px; }
.stx-acc__head .ic::after  { left: 7px; top: 0; width: 1.6px; height: 16px; transition: opacity var(--stx-dur-base); }
.stx-acc__item.is-open .stx-acc__head .ic { transform: rotate(45deg); }
.stx-acc__item.is-open .stx-acc__head .ic::before,
.stx-acc__item.is-open .stx-acc__head .ic::after { background: var(--stx-ink-200); }

.stx-acc__panel { overflow: hidden; max-height: 0; transition: max-height var(--stx-dur-base) var(--stx-ease-out); }
.stx-acc__panel-inner { padding: 0 0 var(--stx-s-5); font-size: 13px; line-height: 1.6; color: var(--stx-ink-300); }
.stx-acc__panel-inner b { color: var(--stx-ink-200); font-weight: var(--stx-fw-medium); }
.stx-acc__panel-inner a { color: var(--stx-ink-200); border-bottom: 1px solid var(--stx-ink-600); }
.stx-acc__panel-inner p { margin: 0 0 10px; }
.stx-acc__panel-inner p:last-child { margin-bottom: 0; }
.stx-acc__specs { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0; }
.stx-acc__specs dt { color: var(--stx-ink-400); font-family: var(--stx-font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; }
.stx-acc__specs dd { color: var(--stx-ink-200); margin: 0; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1080px) {
  .stx-buy.is-sticky { position: static; }
}
@media (max-width: 600px) {
  .stx-pills { grid-template-columns: 1fr 1fr; }
  .stx-trustrow { grid-template-columns: repeat(2, 1fr); row-gap: var(--stx-s-4); }
  .stx-buy__title { font-size: clamp(28px, 8vw, 38px); }

  /* "Clear" reset → keep it an inline chip (not full-width) but restore the
     horizontal padding that gets stripped at this breakpoint. */
  .stx-buy__form .reset_variations {
    width: auto !important;
    min-width: 76px;
    min-height: 36px;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 18px !important;
    border-radius: var(--stx-r-pill) !important;
    white-space: nowrap;
  }

  /* Mobile qty → compact dropdown instead of the wider −/+ stepper, so the
     add-to-cart button gets the freed width. The stepper controls are hidden;
     the native <select> sits inside the same bordered pill. Keyed off .quantity
     (always present server-side), not the JS-added .stx-qty, so there's no
     stepper→dropdown switch while the page loads. */
  .stx-buy__form .quantity .stx-qty__btn,
  .stx-buy__form .quantity .stx-qty__val { display: none; }
  .stx-buy__form .quantity {
    padding: 0;
    justify-content: stretch;
  }
  .stx-buy__form .quantity .stx-qty__select {
    display: block;
    height: 54px;
    width: auto;
    min-width: 62px;
    padding: 0 30px 0 14px;
    color: var(--stx-ink-50);
    background-color: transparent;
    border: 0;
    border-radius: var(--stx-r-pill);
    font-family: var(--stx-font-display);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23B5B5BA' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }
  .stx-qty__select option { color: #111; }
}
@media (max-width: 380px) {
  .stx-trustrow { grid-template-columns: 1fr 1fr; }
  .stx-addon { flex-wrap: wrap; }
  .stx-addon__toggle { width: 100%; justify-content: center; }
}

/* ================================================================
   Sticky Add-to-Cart bar (Rey .rey-stickyAtc) — frosted glass to
   match the site header: dark translucent + backdrop blur, light
   text, blue CTA. Compact + safe-area aware on mobile.
   (Loads with the product section; scoped by enqueue to this template.)
   ================================================================ */
.rey-stickyAtc {
  background: rgba(10, 10, 11, 0.62) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.8);
  color: #F5F5F7;
}
.rey-stickyAtc-title {
  color: #F5F5F7 !important;
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rey-stickyAtc-price,
.rey-stickyAtc-price .woocommerce-Price-amount { color: #F5F5F7 !important; font-family: 'Geist', system-ui, sans-serif; }
/* original price → muted strikethrough (handles both <del> and the 2nd amount) */
.rey-stickyAtc-price del,
.rey-stickyAtc-price .woocommerce-Price-amount + .woocommerce-Price-amount {
  color: rgba(245, 245, 247, 0.45) !important;
  text-decoration: line-through;
  font-size: 0.82em;
}
.rey-stickyAtc-price ins { text-decoration: none; }

/* CTA → blue pill (matches cart/checkout + the buy panel) */
.rey-stickyAtc .rey-satc-openBtn,
.rey-stickyAtc .single_add_to_cart_button,
.rey-stickyAtc button.btn-primary,
.rey-stickyAtc button[type="submit"] {
  background: #2563EB !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  min-height: 48px !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.rey-stickyAtc .rey-satc-openBtn:hover,
.rey-stickyAtc .single_add_to_cart_button:hover,
.rey-stickyAtc button.btn-primary:hover { background: #1D4FD8 !important; }
.rey-stickyAtc .rey-satc-openBtn .satc-price,
.rey-stickyAtc .rey-satc-openBtn .satc-price * { color: rgba(255, 255, 255, 0.72) !important; }

/* selects / inputs inside the sticky cart → dark glass */
.rey-stickyAtc select,
.rey-stickyAtc input.qty,
.rey-stickyAtc .quantity input {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #F5F5F7 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
}

/* ---- Responsive / mobile ---- */
@media (max-width: 768px) {
  .rey-stickyAtc { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  /* compact: drop the long title, keep price + button; avoid duplicate price */
  .rey-stickyAtc-title { display: none !important; }
  .rey-stickyAtc .rey-satc-openBtn .satc-price { display: none !important; }
  .rey-stickyAtc .rey-satc-openBtn,
  .rey-stickyAtc .single_add_to_cart_button { width: 100%; }
}

/* ---------- Uploaded icon images (ACF image field) ----------
   Sized to match each context's glyph so an uploaded SVG/PNG drops in cleanly.
   brightness(0) invert(1) forces any source colour to white — an <img> SVG
   can't be recoloured with `fill`/`color`, so this keeps black icons legible
   on the dark buy panel. */
.stx-buy__icon-img { object-fit: contain; flex: none; display: block; filter: brightness(0) invert(1); }
.stx-buy__badge   .stx-buy__icon-img { width: 13px; height: 13px; }
.stx-fulfil__row  .stx-buy__icon-img { width: 16px; height: 16px; margin-top: 2px; }
.stx-trustrow__cell .stx-buy__icon-img { width: 19px; height: 19px; }

/* ---------------------------------------------------------------------------
   "Talk to an expert" lead form — inline dropdown (no modal).
   Open by default for price-on-request; collapsed for priced products where the
   "Talk to an expert" link toggles it. Compact / premium, no blue.
   --------------------------------------------------------------------------- */
.stx-expert { color: var(--stx-ink-50, #f5f5f7); }

.stx-expert--inline {
  border: 1px solid var(--stx-ink-800, #2a2a30);
  background: var(--stx-ink-950, #121214);
  border-radius: var(--stx-r-3, 14px);
  padding: 18px;
  margin: 6px 0;
}
/* Collapsed by default; the trigger adds .is-open. */
.stx-expert--inline:not(.is-open) { display: none; }
.stx-expert--inline.is-open { animation: stx-expert-in .2s var(--stx-ease-out, ease) both; }
@keyframes stx-expert-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stx-expert--inline.is-open { animation: none; } }

/* The trigger link reads as an interactive control. */
.stx-expert-open { cursor: pointer; }

/* Small eyebrow heading — secondary to the product title. No dot, no blue. */
.stx-expert__eyebrow {
  display: block;
  font-size: 13px; font-weight: var(--stx-fw-semi, 600);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--stx-ink-300, #b6b6bd);
}
.stx-expert__intro { margin: 8px 0 14px; font-size: 13px; line-height: 1.45; color: var(--stx-ink-300, #b6b6bd); }

/* Two-column row (name + phone) collapses on narrow widths. */
.stx-expert__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .stx-expert__row { grid-template-columns: 1fr; } }

.stx-expert__field { display: block; margin-bottom: 10px; }
.stx-expert__row .stx-expert__field { margin-bottom: 10px; }
.stx-expert__field > span {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: var(--stx-fw-medium, 500);
  letter-spacing: .02em; color: var(--stx-ink-400, #9a9aa2);
}
.stx-expert__field > span em { font-style: normal; opacity: .7; text-transform: none; font-weight: 400; }
.stx-expert__field input,
.stx-expert__field textarea {
  width: 100%; height: 42px; padding: 0 12px;
  font: inherit; font-size: 14.5px; color: #fff;
  background: var(--stx-ink-900, #161618);
  border: 1px solid var(--stx-ink-700, #3a3a40);
  border-radius: var(--stx-r-2, 10px);
  outline: none; box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.stx-expert__field textarea { height: auto; min-height: 58px; padding: 9px 12px; resize: vertical; }
.stx-expert__field input::placeholder,
.stx-expert__field textarea::placeholder { color: var(--stx-ink-600, #5a5a62); }
.stx-expert__field input:focus,
.stx-expert__field textarea:focus {
  border-color: var(--stx-ink-400, #9a9aa2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .10);
}

/* Same pill as the cart/checkout/buy button — but white. !important to beat
   Rey's aggressive default button styling (same approach as the add-to-cart). */
.stx-expert .stx-expert__submit,
.stx-pdp .stx-expert__submit,
.stx-expert__submit {
  position: relative;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px;
  width: 100% !important; height: 56px !important; margin-top: 6px;
  font-family: inherit !important; font-size: 14px !important; font-weight: var(--stx-fw-semi, 600) !important;
  line-height: 1 !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--stx-ink-1000, #0a0a0b) !important;
  background: #fff !important;
  border: 0 !important; border-radius: var(--stx-r-pill, 999px) !important;
  box-shadow: none !important; text-shadow: none !important;
  cursor: pointer !important;
  transition: background var(--stx-dur-base, .2s) var(--stx-ease-out, ease), opacity var(--stx-dur-base, .2s);
}
.stx-expert .stx-expert__submit:hover,
.stx-expert__submit:hover { background: var(--stx-ink-100, #e7e7ea) !important; color: var(--stx-ink-1000, #0a0a0b) !important; }
.stx-expert__submit.is-loading { pointer-events: none; }
.stx-expert__submit.is-loading .stx-expert__submit-label { opacity: .5; }
.stx-expert__submit:disabled { opacity: .6; cursor: default; }
.stx-expert__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(10,10,11,.25); border-top-color: var(--stx-ink-1000, #0a0a0b); animation: stx-spin .7s linear infinite; }
.stx-expert__submit.is-loading .stx-expert__spinner { display: inline-block; }
@keyframes stx-spin { to { transform: rotate(360deg); } }

.stx-expert__error   { margin: 10px 0 0; font-size: 13px; color: #fca5a5; }
.stx-expert__success { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: #86efac; }
.stx-expert__form.is-done .stx-expert__row,
.stx-expert__form.is-done .stx-expert__field,
.stx-expert__form.is-done .stx-expert__submit { display: none; }

@media (max-width: 480px) {
  .stx-expert--modal { padding: 20px 16px 16px; border-radius: 16px; }
}

/* ---------------------------------------------------------------------------
 * Quote-only variant picker (no-price variable products). Buy button hidden,
 * model pills kept. Card-style swatches modelled on the "Product Detail" design
 * (value + tag + check, dynamic note), but on the SeeThru BLUE accent — no beige.
 * ------------------------------------------------------------------------- */
.stx-qvar { margin: 0 0 var(--stx-s-6); }
.stx-qvar__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--stx-s-3);
  margin-bottom: var(--stx-s-3);
}
.stx-qvar__label {
  font-family: var(--stx-font-mono);
  font-size: 11px;
  letter-spacing: var(--stx-ls-eyebrow);
  text-transform: uppercase;
  color: var(--stx-ink-300);
}
.stx-qvar__hint { font-size: 12px; color: var(--stx-ink-500); }
/* pills use the universal .stx-pill swatch above */

.stx-qvar__note {
  display: flex; gap: 10px; align-items: flex-start;
  margin: var(--stx-s-4) 0 0;
  font-size: 13px; line-height: 1.5; color: var(--stx-ink-300);
}
.stx-qvar__note[hidden] { display: none; } /* beat the flex display so the (i) hides until a model is picked */
.stx-qvar__note .ico { color: var(--stx-ink-0); flex: none; margin-top: 1px; }
.stx-qvar__note-text p { margin: 0; }
.stx-qvar__note-text strong { color: var(--stx-ink-50); font-weight: var(--stx-fw-medium); }