/* ============================================================================
   EASTON — WOOCOMMERCE STORE (Execution Brief 2026-07-15 · ADR-070)
   Native /shop/ archive + product PDP, rendered in the Claude Design system inside
   the native chrome. Plus the Woo-surface-only header cart affordance (.e-cart).
   Consumes the canonical design tokens (tokens.css) — never hardcodes raw hex.
   Design system: cream / ink / red · Anton (display) / Oswald (labels) /
   Manrope (body, matches the location money pages). Desktop-first (1440 artboard);
   mobile refinements at the bottom. Kit 6 (Chakra Petch) is defeated per-scope
   near the bottom of this file. Every value comes from WooCommerce at render time.
   Every value comes from WooCommerce at render time; this file only styles it.
============================================================================ */

/* --- Full-bleed scaffold (belt-and-suspenders over .easton-full-bleed) ------ */
.esh-area { width: 100%; max-width: 100%; padding: 0; float: none; }
.esh {
  width: 100%;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
}
.esh * { box-sizing: border-box; }
.esh img { max-width: 100%; height: auto; display: block; }

.esh-wrap {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 8.3vw, 120px);
}

/* --- Marks + labels -------------------------------------------------------- */
.esh-sq { width: 8px; height: 8px; background: var(--red); display: inline-block; flex: 0 0 auto; }
.esh-kicker {
  display: inline-block; font-family: var(--font-label); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--red);
}
.esh-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-label); font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--red);
}

/* --- Shop hero (PageHero) -------------------------------------------------- */
.esh-hero {
  background: var(--canvas);
  padding-block: clamp(32px, 5vw, 64px) clamp(24px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.esh .esh-hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px); line-height: 1.02;
  letter-spacing: 0.004em; text-transform: uppercase;
  margin: 14px 0 0; color: var(--ink); max-width: 16ch;
}
.esh-hero__intro {
  font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55; color: var(--text-muted);
  margin: 18px 0 0; max-width: 600px; text-wrap: pretty;
}

/* --- Toolbar: filter pills + real Woo sort --------------------------------- */
.esh-toolbar { padding-block: clamp(20px, 2.6vw, 28px) 4px; }
.esh-toolbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.esh-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.esh-pill {
  display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line);
  font-family: var(--font-label); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.esh-pill:hover { border-color: var(--line-strong); }
.esh-pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Woo's real catalog-ordering <select>, restyled to the design. */
.esh-sort { display: inline-flex; align-items: center; }
.esh-sort .woocommerce-ordering { margin: 0; }
.esh-sort select,
.esh-sort .orderby {
  font-family: var(--font-label); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  background: transparent; border: 1.5px solid var(--line);
  border-radius: var(--radius-control); padding: 9px 34px 9px 14px; cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.esh-sort select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* --- Product grid + card --------------------------------------------------- */
.esh-grid-wrap { padding-block: clamp(24px, 3vw, 34px) clamp(48px, 6vw, 72px); }
.esh-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px;
}
.esh-card { display: flex; flex-direction: column; text-decoration: none; }
.esh-card__media {
  position: relative; aspect-ratio: 1 / 1; background: var(--paper);
  border-radius: 4px; overflow: hidden;
}
.esh-card__media .esh-card__img,
.esh-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform var(--dur-fade) var(--ease-standard);
}
.esh-card:hover .esh-card__media img { transform: scale(1.04); }
.esh-card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--red); color: #fff; padding: 4px 9px; border-radius: var(--radius-chip);
  font-family: var(--font-label); font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.esh-card__body { padding: 16px 2px; }
.esh-card__cat {
  font-family: var(--font-label); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px;
}
.esh-card__name {
  font-family: var(--font-display); font-size: 18px; text-transform: uppercase;
  letter-spacing: 0.006em; color: var(--ink); margin-bottom: 8px; line-height: 1.15;
}
.esh-card__price { font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.esh-card__price .woocommerce-Price-amount { font-family: var(--font-display); font-weight: 400; }
.esh-card__price del { color: var(--text-faint); font-size: 0.7em; margin-right: 6px; }
.esh-card__price ins { text-decoration: none; }

/* --- Pagination (real WP page links, styled as the design's pills) --------- */
.esh-pagination {
  display: flex; justify-content: center; gap: 10px; margin-top: 48px; flex-wrap: wrap;
}
.esh-pagination .page-numbers {
  min-width: 34px; height: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: 1.5px solid var(--line);
  font-family: var(--font-label); font-weight: 600; font-size: 13px; color: var(--ink);
  text-decoration: none;
}
.esh-pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.esh-pagination a.page-numbers:hover { border-color: var(--line-strong); }
.esh-empty { font-family: var(--font-body); font-size: 17px; color: var(--text-muted); padding-block: 40px; }

/* ==========================================================================
   PDP
   ========================================================================== */
.esh-crumbs { padding-block: clamp(20px, 2.6vw, 32px) 0; }
.esh-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esh-breadcrumb a, .esh-breadcrumb__here {
  font-family: var(--font-label); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.esh-breadcrumb a { color: var(--text-muted); }
.esh-breadcrumb a:hover { color: var(--ink); }
.esh-breadcrumb__here { color: var(--ink); }
.esh-breadcrumb__sep { color: var(--text-faint); font-size: 12px; }

.esh-pdp__main {
  display: grid;
  /* minmax(0,…) lets both tracks shrink below their content's min-width — without
     it the gallery column grows to the main image's intrinsic width (~1220px) and
     crushes the info column to a sliver (grid blowout). */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(28px, 3.4vw, 32px) clamp(56px, 7vw, 96px);
  align-items: start;
}

/* --- Gallery ---------------------------------------------------------------
   Main image on top, a horizontally SCROLLABLE thumbnail strip underneath
   (locked delta from product-page.jsx's fixed left rail — brief §1.4: the BJJ
   hoodie ships 17 colourway images and a vertical rail ran 1,248px past the
   info column). Works for 1 image (strip is hidden by the PHP >1 guard) and for
   30 (the strip scrolls; last thumb never clipped). Thumbs are real <button>s,
   so they are keyboard-reachable and scroll into view on focus. */
/* min-width:0 lets this grid cell shrink to its 1.1fr share — without it the
   thumb strip's min-content (17 thumbs ≈ 1400px) would force the track wide and
   crush the info column to zero. The strip scrolls inside the shrunk cell. */
.esh-gallery { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.esh-gallery__main {
  order: 1; border-radius: 5px; overflow: hidden; background: var(--paper); aspect-ratio: 1 / 1;
}
.esh-gallery__img { width: 100%; height: 100%; object-fit: cover; }
.esh-gallery__thumbs {
  order: 2; display: flex; flex-direction: row; gap: 10px; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px; scroll-padding-inline: 4px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.esh-gallery__thumbs::-webkit-scrollbar { height: 6px; }
.esh-gallery__thumbs::-webkit-scrollbar-track { background: transparent; }
.esh-gallery__thumbs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.esh-gallery__thumb {
  flex: 0 0 auto; width: 72px; height: 72px; scroll-snap-align: start;
  border-radius: 4px; overflow: hidden; padding: 0;
  border: 1.5px solid var(--line); background: var(--paper); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.esh-gallery__thumb:hover { border-color: var(--line-strong); }
.esh-gallery__thumb.is-active { border-color: var(--ink); }
.esh-gallery__thumb:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.esh-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Product info ---------------------------------------------------------- */
.esh-info { display: flex; flex-direction: column; gap: 18px; }
.esh-info__cat {
  font-family: var(--font-label); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint);
}
.esh .esh-info__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 36px); line-height: 1.06; letter-spacing: 0.004em;
  text-transform: uppercase; margin: 0; color: var(--ink);
}
.esh-info__rating { display: inline-flex; align-items: center; gap: 8px; }
.esh-info__rating .star-rating { color: var(--review-gold); }
.esh-info__ratingcount { font-family: var(--font-body); font-size: 13.5px; color: var(--text-muted); }
.esh-info__price { font-family: var(--font-display); font-size: 30px; color: var(--ink); }
.esh-info__price .woocommerce-Price-amount { font-family: var(--font-display); font-weight: 400; }
.esh-info__price del { color: var(--text-faint); font-size: 0.6em; margin-right: 10px; }
.esh-info__price ins { text-decoration: none; }
.esh-info__short { font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: var(--text-muted); max-width: 480px; }
.esh-info__short p { margin: 0 0 10px; }

/* --- Add to cart: skin WooCommerce's own form ------------------------------ */
.esh-atc { margin-top: 2px; }
.esh-atc .stock { font-family: var(--font-body); font-size: 13.5px; color: var(--text-muted); margin: 0 0 12px; }
.esh-atc .out-of-stock { color: var(--red); font-weight: 600; }
.esh-atc form.cart { margin: 0; }
.esh-atc table.variations { border: none; margin: 0 0 18px; width: 100%; border-collapse: collapse; }
.esh-atc table.variations th,
.esh-atc table.variations td { border: none; padding: 0 0 12px; vertical-align: middle; text-align: left; }
.esh-atc table.variations th.label label {
  font-family: var(--font-label); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 0;
}
.esh-atc table.variations td.value { position: relative; }
.esh-atc select {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-control); padding: 12px 40px 12px 14px; width: 100%;
  max-width: 320px; cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.esh-atc select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-color: var(--ink); }
.esh-atc .reset_variations {
  display: inline-block; margin-top: 8px; font-family: var(--font-label); font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.esh-atc .woocommerce-variation-price { margin: 0 0 14px; }
.esh-atc .woocommerce-variation-price .price { font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.esh-atc .woocommerce-variation-availability .stock { margin: 8px 0 0; }
.esh-atc .woocommerce-variation-description p { font-family: var(--font-body); font-size: 14px; color: var(--text-muted); margin: 0 0 12px; }

.esh-atc .woocommerce-variation-add-to-cart,
.esh-atc form.cart:not(.variations_form) { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.esh-atc .quantity { display: inline-flex; align-items: center; }
.esh-atc .quantity .qty {
  width: 68px; height: 48px; text-align: center; font-family: var(--font-label); font-weight: 600;
  font-size: 15px; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-control);
}
.esh-atc .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--red); color: var(--text-on-red);
  border: none; border-radius: var(--radius-control);
  padding: 15px 30px; min-height: 48px; cursor: pointer;
  box-shadow: var(--shadow-cta-red);
  transition: background var(--dur-fast) var(--ease-standard);
}
.esh-atc .single_add_to_cart_button:hover,
.esh-atc .single_add_to_cart_button:focus-visible { background: var(--red-shadow); color: var(--text-on-red); }
.esh-atc .single_add_to_cart_button.disabled,
.esh-atc .single_add_to_cart_button[disabled] { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.esh-atc .woocommerce-variation.single_variation { margin-bottom: 12px; }

/* --- Description ----------------------------------------------------------- */
.esh-desc { padding-block: 0 clamp(48px, 6vw, 88px); max-width: 820px; }
.esh .esh-desc__head {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.08; letter-spacing: 0.006em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 18px; padding-top: 24px; border-top: 1px solid var(--line);
}
.esh-desc__body { font-family: var(--font-body); font-size: 16px; line-height: 1.62; color: rgba(13,13,12,0.78); }
.esh-desc__body p { margin: 0 0 16px; }
.esh-desc__body ul { margin: 0 0 16px; padding-left: 20px; }
.esh-desc__body li { margin-bottom: 6px; }

/* --- Related --------------------------------------------------------------- */
.esh-related { background: var(--paper); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 80px) clamp(56px, 7vw, 104px); }
.esh-related__head { margin-bottom: 32px; }
.esh .esh-related__title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05; letter-spacing: 0.004em; text-transform: uppercase; color: var(--ink); margin: 14px 0 0;
}
.esh-grid--related .esh-card__media { background: var(--canvas); }

/* ==========================================================================
   Header cart affordance (.e-cart) — Woo surface only.
   Scoped under .e-header (0,2,0) so it survives Elementor Kit 6's `button`/`a`
   collisions on the (currently Elementor) store pages, matching the header's own
   scoped nav rules.
   ========================================================================== */
.e-header .e-cart,
.e-mobile .e-cart {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; /* group cart + CTA + burger to the right of logo/nav. */
  width: 44px; height: 44px; position: relative; flex: 0 0 auto;
  color: var(--ink); text-decoration: none; background: transparent; border: none;
  border-radius: var(--radius-control);
}
.e-header .e-cart:hover { color: var(--red); }
.e-cart__wrap { position: relative; display: inline-flex; }
.e-cart__ico { display: block; }
.e-cart__count {
  position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; border-radius: var(--radius-pill);
  font-family: var(--font-label); font-weight: 700; font-size: 10px; line-height: 1;
}
.e-cart__count:empty { display: none; }
.e-header .e-cart:focus-visible,
.e-mobile .e-cart:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* When the cart sits in the desktop bar, the CTA follows it with a small gap. */
.e-header .e-cart + .e-header__cta { margin-left: 12px; }

/* ==========================================================================
   KIT 6 DEFEAT — brand type across the WHOLE Woo surface (shop/PDP + cart/
   checkout/account), scoped under the `esh-woo` body class (added on the whole
   Woo surface by inc/shop.php). Elementor's Kit 6 (post-6.css) forces Chakra
   Petch headings via `.elementor-kit-6 h1` (0,1,1) + the `--e-global-typography-*`
   vars, and Chakra/Roboto body via `.elementor-kit-6 {font-family:"Chakra Petch"}`
   (0,1,0). Two complementary levers beat it WITHOUT !important:
     1) REPOINT Elementor's own global typography vars → our brand faces. Every
        Kit/widget rule that resolves them (the 33/30 Chakra headings on the
        Elementor-built cart/checkout, Elementor button text) then renders Anton/
        Manrope with ZERO specificity fight — the var is redefined on the body.
     2) DIRECT font-family on body + h1–h6 as belt-and-braces for anything that
        sets a literal family. `body.esh-woo h1` = (0,1,2) > `.elementor-kit-6 h1`
        (0,1,1); `body.esh-woo` = (0,1,1) > `.elementor-kit-6` (0,1,0).
   Body copy = Manrope (brand body, matches the location money pages — Barlow is
   remapped in-scope so every existing var(--font-body) in this file follows);
   headings = Anton; labels stay Oswald. Verified with Kit 6 PRESENT on /cart/.
   ========================================================================== */
body.esh-woo {
  /* Store-scoped body face: Barlow -> Manrope (matches the location pages). */
  --font-body: 'Manrope', 'Barlow', system-ui, sans-serif;
  /* Repoint Kit 6's Chakra-Petch display slots -> Anton. */
  --e-global-typography-primary-font-family: 'Anton';
  --e-global-typography-b4318ff-font-family: 'Anton';
  --e-global-typography-806a646-font-family: 'Anton';
  --e-global-typography-eb0c221-font-family: 'Anton';
  --e-global-typography-secondary-font-family: 'Anton';
  /* Repoint Kit 6's Roboto text slots -> Manrope. */
  --e-global-typography-text-font-family: 'Manrope';
  --e-global-typography-accent-font-family: 'Manrope';
  --e-global-typography-87c4dd8-font-family: 'Manrope';
  --e-global-typography-9ac25b6-font-family: 'Manrope';
  /* Beat `.elementor-kit-6 {font-family:"Chakra Petch"}` (0,1,0) on the body. */
  font-family: var(--font-body);
}
/* font-family !important here is the documented exception (brief §2/§9): the
   Elementor-built cart/checkout carry PER-PAGE CSS (post-<id>.css) that sets a
   LITERAL "Chakra Petch" on these elements at (0,4,1)–(2,4,0), using selectors
   keyed on the environment-specific post ID (19619/19620) and a global widget ID
   (#place_order) — which differ on prod, so they CANNOT be beaten portably by
   specificity. !important on font-family alone is the only environment-portable
   win. The native header/footer carry ZERO h1–h6, so this never touches them. */
body.esh-woo h1, body.esh-woo h2, body.esh-woo h3,
body.esh-woo h4, body.esh-woo h5, body.esh-woo h6 {
  font-family: var(--font-display) !important;
}
/* Woo cart/checkout table headers (PRODUCT / PRICE / QUANTITY …) are labels. */
body.esh-woo table th { font-family: var(--font-label) !important; }
/* Woo/Elementor form text -> Manrope. Never Roboto/Chakra body copy. */
body.esh-woo input.input-text,
body.esh-woo textarea.input-text,
body.esh-woo .quantity input.qty,
body.esh-woo select { font-family: var(--font-body) !important; }

/* ==========================================================================
   WOO CONTROL SKINNING — Woo/Elementor render these controls themselves and ship
   their colours at high specificity: woocommerce.css `button.button.alt.disabled`
   = (0,4,1) (the factory-purple #7f54b3 add-to-cart in the screenshot) and
   `#place_order` is an ID. Our own .esh-* components beat Kit with plain scoping,
   but beating these Woo-owned selectors across default/hover/focus/DISABLED
   without brittle version-specific chains needs `!important` on the COLOUR
   properties only (documented exception, brief §2/§9). Scope = the whole Woo
   surface so the same red rides shop -> product -> cart -> checkout.
   ========================================================================== */

/* Primary actions: PDP Add to Cart, cart -> Checkout, checkout Place order. */
body.esh-woo .single_add_to_cart_button,
body.esh-woo a.checkout-button,
body.esh-woo .wc-proceed-to-checkout .checkout-button,
body.esh-woo #place_order {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red) !important;
  color: var(--text-on-red) !important;
  border: none !important;
  border-radius: var(--radius-control);
  font-family: var(--font-label) !important; font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding: 15px 30px; min-height: 48px; cursor: pointer;
  box-shadow: var(--shadow-cta-red);
  transition: background var(--dur-fast) var(--ease-standard);
}
body.esh-woo .single_add_to_cart_button:hover,
body.esh-woo .single_add_to_cart_button:focus-visible,
body.esh-woo a.checkout-button:hover,
body.esh-woo a.checkout-button:focus-visible,
body.esh-woo #place_order:hover,
body.esh-woo #place_order:focus-visible {
  background: var(--red-shadow) !important; color: var(--text-on-red) !important;
}
/* DISABLED add-to-cart (variable product before a variation is chosen): stays
   Easton red, just dimmed — never Woo's factory purple (brief §1.3 / §6.5). */
body.esh-woo .single_add_to_cart_button.disabled,
body.esh-woo .single_add_to_cart_button:disabled,
body.esh-woo .single_add_to_cart_button.wc-variation-selection-needed {
  background: var(--red) !important; color: var(--text-on-red) !important;
  opacity: 0.45; cursor: not-allowed; box-shadow: none;
}

/* Secondary / ghost controls: Apply coupon, Update cart, Continue/Back to shop. */
body.esh-woo button[name="apply_coupon"],
body.esh-woo .e-apply-coupon,
body.esh-woo .woocommerce-cart-form .button,
body.esh-woo .button.wc-backward {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--line-strong) !important;
  border-radius: var(--radius-control);
  font-family: var(--font-label) !important; font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.08em; text-transform: uppercase; box-shadow: none;
  padding: 13px 22px; min-height: 46px; cursor: pointer; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
body.esh-woo button[name="apply_coupon"]:hover,
body.esh-woo .e-apply-coupon:hover,
body.esh-woo .woocommerce-cart-form .button:hover,
body.esh-woo .button.wc-backward:hover { border-color: var(--ink) !important; color: var(--ink) !important; }

/* Coupon + text inputs: brand type, our control chrome, red focus ring. */
body.esh-woo input[name="coupon_code"],
body.esh-woo input.input-text {
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-control);
}
body.esh-woo input[name="coupon_code"] { padding: 12px 14px; min-height: 46px; }
body.esh-woo input.input-text:focus,
body.esh-woo input[name="coupon_code"]:focus,
body.esh-woo select:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--ink); }

/* Cart/checkout selects (variation, state, country) — match the PDP variation
   select styling so the whole surface reads as one system. */
body.esh-woo select {
  color: var(--ink); background-color: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-control);
}

/* Printful "Size Guide" link — injected into the ATC area as a bare
   <a href="javascript:"> with NO class (default browser blue). Re-cast as the
   site's small red label-link so it stops reading as a stray hyperlink. */
body.esh-woo .esh-info a[href^="javascript"],
body.esh-woo .esh-atc a[href^="javascript"] {
  color: var(--red); text-decoration: none;
  font-family: var(--font-label); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
body.esh-woo .esh-info a[href^="javascript"]:hover,
body.esh-woo .esh-atc a[href^="javascript"]:hover { color: var(--red-shadow); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .esh-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .esh-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .esh-pdp__main { grid-template-columns: 1fr; gap: 28px; }
  /* Gallery is already main-on-top + horizontal thumb strip at every width. */
  .esh-atc select { max-width: 100%; }
}
@media (max-width: 560px) {
  .esh-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .esh-toolbar__inner { gap: 12px; }
  .esh-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .esh-filters::-webkit-scrollbar { display: none; }
  .esh-info__title { font-size: 26px; }
}