/* ============================================================
   R-eCycle "Grit" Child Theme — style.css
   ------------------------------------------------------------
   Drop-in CSS that enforces the Grit design system on top of
   GeneratePress + WooCommerce. No PHP required for Phase 1.

   INSTALL:
   1. Create folder: /wp-content/themes/generatepress_child/
   2. Add style.css (this file)
   3. Add functions.php (see /functions.php in handoff folder)
   4. WP Admin → Appearance → Themes → Activate "GP Child — Grit"
   5. LiteSpeed Cache → Purge All
   ============================================================ */

/*
Theme Name:   GP Child — Grit
Theme URI:    https://r-ecycle.com
Description:  R-eCycle child theme implementing the Grit design system.
Author:       R-eCycle
Template:     generatepress
Version:      1.1.12
*/

/* ===== 1. DESIGN TOKENS ===== */
:root {
  /* Backgrounds */
  --bg-charcoal: #1E1D1B;
  --bg-surface:  #2A2825;
  --bg-elevated: #3D3A35;
  --bg-darker:   #151412;
  --bg-scrim:    rgba(20,19,18,0.85);

  /* Text */
  --text-bone:       #E8E4DC;
  --text-light-bone: #F5F2EC;
  --text-muted:      #A09A90;
  --text-dim:        #8A857C;
  --text-ghost:      #5A5650;

  /* Signal */
  --signal-red:        #CC4422;
  --signal-red-hover:  #E05533;
  --signal-red-active: #AA3618;

  /* Stock states */
  --good-bg: #1A3324; --good-fg: #A8D4B0;
  --warn-bg: #3D2E10; --warn-fg: #FFEFC4;
  --info-bg: #0E3A5C; --info-fg: #D0E8FF;
  --neutral-bg: #2A2825; --neutral-fg: #B0AA9E;

  /* Borders */
  --border-subtle:  #2A2825;
  --border-visible: #3D3A35;

  /* Type stacks */
  --display: 'Oswald', 'Helvetica Neue', sans-serif;
  --body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ===== 2. GLOBAL ===== */
body, body.wp-singular {
  background: var(--bg-charcoal) !important;
  color: var(--text-bone) !important;
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body a { color: var(--text-bone); }
body a:hover { color: var(--signal-red); }

/* ===== 3. TYPE SCALE — utility classes ===== */
/* Apply via Gutenberg "Additional CSS class" field on any block */

.t-display-xl,
.wp-block-cover h1,
.wp-block-cover h2 {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 6vw, 64px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
}

.t-display-l {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.t-display-m {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.t-heading {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.t-subhead {
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.t-body-l { font-family: var(--body); font-weight: 400; font-size: 16px; line-height: 1.6; }
.t-body   { font-family: var(--body); font-weight: 400; font-size: 14px; line-height: 1.5; }
.t-caption{ font-family: var(--body); font-weight: 400; font-size: 12px; line-height: 1.4; }
.t-mono   { font-family: var(--mono); font-size: 14px; }
.t-label  { font-family: var(--body); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

.t-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Force GP defaults where it matters */
.entry-content h1 { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5vw, 56px); text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; }
.entry-content h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.05; }
.entry-content h3 { font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; }
.entry-content h4 { font-family: var(--display); font-weight: 500; font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; }
.entry-content p  { color: var(--text-muted); font-size: 16px; line-height: 1.6; }

/* ===== 4. UTILITY ===== */
.bg-charcoal { background: var(--bg-charcoal); color: var(--text-bone); }
.bg-surface  { background: var(--bg-surface); color: var(--text-bone); }
.bg-darker   { background: var(--bg-darker); color: var(--text-bone); }
.text-bone   { color: var(--text-bone); }
.text-muted  { color: var(--text-muted); }
.text-dim    { color: var(--text-dim); }
.text-red    { color: var(--signal-red); }
.signal-rule { display: block; height: 3px; width: 100%; background: var(--signal-red); }

/* ===== 5. BUTTONS ===== */
.button,
.wp-block-button__link,
.wc-block-components-button,
button[type=submit],
input[type=submit],
.btn-grit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px !important;
  font-family: var(--body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  background: var(--signal-red) !important;
  color: var(--text-light-bone) !important;
  border: none !important;
  transition: background 120ms ease, transform 80ms ease;
  cursor: pointer;
}
.button:hover,
.wp-block-button__link:hover,
.wc-block-components-button:hover,
button[type=submit]:hover,
.btn-grit:hover { background: var(--signal-red-hover) !important; }
.button:active,
.btn-grit:active { transform: scale(0.98); }

.btn-ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--text-bone) !important;
  border: 1px solid var(--text-ghost) !important;
}
.btn-ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--text-bone) !important;
  background: transparent !important;
}

.btn-arrow::after { content: "→"; font-family: var(--mono); margin-left: 4px; }

/* ===== 6. STOCK BADGES (the only rounded element) ===== */
.badge-grit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-grit.is-instock     { background: var(--good-bg);    color: var(--good-fg); }
.badge-grit.is-preorder    { background: var(--warn-bg);    color: var(--warn-fg); }
.badge-grit.is-outofstock  { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge-grit.is-special     { background: var(--info-bg);    color: var(--info-fg); }
.badge-grit.is-discontinued { background: var(--neutral-bg); color: var(--text-ghost); border: 1px dashed var(--border-strong); }
.badge-grit .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* WooCommerce native stock label override */
.woocommerce ul.products li.product .stock,
.woocommerce-Price-amount,
.stock {
  font-family: var(--mono) !important;
}
.woocommerce ul.products li.product .out-of-stock,
.woocommerce span.onbackorder {
  background: var(--warn-bg) !important;
  color: var(--warn-fg) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* ===== 7. WOOCOMMERCE PRODUCT CARDS ===== */
.woocommerce ul.products,
.wc-block-grid__products {
  background: var(--bg-charcoal);
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1px !important;
  background: var(--border-visible);
  border: 1px solid var(--border-visible);
  list-style: none;
  padding: 0 !important;
}

.woocommerce ul.products li.product,
.wc-block-grid__product {
  background: var(--bg-surface) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 180ms ease, background 180ms ease;
  width: 100% !important;
  float: none !important;
}
.woocommerce ul.products li.product:hover { transform: translateY(-2px); background: var(--bg-elevated) !important; }

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
  border-radius: 0 !important;
  margin: 0 !important;
  aspect-ratio: 16/10;
  object-fit: cover;
  width: 100% !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  text-transform: uppercase !important;
  color: var(--text-bone) !important;
  padding: 16px 16px 4px !important;
  line-height: 1.3 !important;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
  font-family: var(--mono) !important;
  font-size: 14px !important;
  color: var(--text-bone) !important;
  padding: 0 16px 12px !important;
  display: block;
}
.woocommerce ul.products li.product .price del { color: var(--text-ghost) !important; }
.woocommerce ul.products li.product .price ins { background: transparent !important; color: var(--signal-red) !important; }

.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  margin: 0 16px 16px !important;
  width: calc(100% - 32px);
  justify-content: center;
}

/* Onsale → relabel as our own */
.woocommerce span.onsale {
  background: var(--signal-red) !important;
  color: var(--text-light-bone) !important;
  border-radius: 4px !important;
  font-family: var(--body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
  text-transform: uppercase !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1 !important;
  top: 12px !important;
  left: 12px !important;
  margin: 0 !important;
}

/* ===== 8. SINGLE PRODUCT PAGE ===== */
.woocommerce div.product .product_title {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--mono) !important;
  font-size: 22px !important;
  color: var(--text-bone) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--border-visible);
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  margin: 0 24px 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-dim) !important;
  padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--signal-red) !important; }

/* ===== 9. NAV (GeneratePress menu) ===== */
.main-navigation,
.site-header { background: var(--bg-charcoal) !important; border-bottom: 1px solid var(--border-visible); }
.main-navigation .main-nav ul li a {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim) !important;
  transition: color 120ms ease;
}
.main-navigation .main-nav ul li a:hover { color: var(--text-bone) !important; }
/* "Book" link — add CSS class `book` to that menu item in WP */
.main-navigation .main-nav ul li.book a { color: var(--signal-red) !important; }

/* ===== 10. FOOTER ===== */
.site-footer,
.site-footer .footer-widgets,
.site-footer .site-info {
  background: var(--bg-darker) !important;
  border-top: 1px solid var(--border-visible);
}
.site-footer .footer-widgets-container { padding: 64px 32px 32px; }
.site-footer h3, .site-footer h4 {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  border-bottom: 1px solid var(--border-visible);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--text-bone); }
.site-info { color: var(--text-ghost); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }

/* ===== 11. FORMS / WPFORMS ===== */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container select,
.wpforms-container textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  color: var(--text-bone) !important;
  font-family: var(--body) !important;
  padding: 12px 14px !important;
}
.wpforms-container input::placeholder,
.woocommerce form .form-row input::placeholder { color: var(--text-ghost) !important; }
.wpforms-container label,
.woocommerce form .form-row label {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
}

/* ===== 12. CHAT BUBBLE (the one round element) ===== */
/* If your chat plugin uses a known wrapper, e.g. #chat-widget */
.chat-bubble-grit {
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--signal-red); color: var(--text-light-bone);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.chat-bubble-grit:hover { background: var(--signal-red-hover); transform: translateY(-2px); }

/* ===== 13. RESPONSIVE ===== */
@media (max-width: 768px) {
  .t-display-xl { font-size: 36px !important; }
  .t-display-l  { font-size: 26px; }
  .entry-content h1 { font-size: 32px; }
  .entry-content h2 { font-size: 22px; }
  .woocommerce ul.products,
  .wc-block-grid__products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
}

/* ============================================================
   14. HOMEPAGE GUTENBERG PATCHES
   ============================================================ */

/* ----- Site-wide content rail — header, sections, all line up ----- */
.site-content,
.entry-content,
.inside-header,
.main-navigation .inside-navigation {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

/* Full-width sections — break out of the rail and re-pad to align text inside */
.entry-content > .alignfull,
.entry-content .wp-block-group.alignfull,
.entry-content .wp-block-cover.alignfull {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* WooCommerce Shop page override — the .woocommerce wrapper applies its own
   container styles that overflow alignfull blocks to the left instead of
   centering them. Higher-specificity rule restores the bleed. */
.woocommerce .entry-content > .alignfull {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
  width: 100vw;
}

/* Cover overlays: full-bleed image, text padded to match site rail */
.wp-block-cover.alignfull > .wp-block-cover__inner-container,
.grit-hero > .wp-block-cover__inner-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}
.wp-block-cover.alignfull > .wp-block-cover__inner-container > * {
  align-self: stretch !important;
  text-align: left !important;
  max-width: none !important;
}

/* Plain group sections — content padded to match site rail */
.entry-content > .wp-block-group.alignfull > * {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Cover backgrounds: stay full-bleed regardless of inner-container constraint */
.wp-block-cover.alignfull,
.wp-block-cover.alignfull.grit-hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}
.wp-block-cover.alignfull .wp-block-cover__image-background,
.wp-block-cover.alignfull img.wp-block-cover__image-background {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  z-index: 0 !important;
}
.wp-block-cover.alignfull .wp-block-cover__background,
.wp-block-cover.alignfull span.wp-block-cover__background {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* Lighter dim across all ratio classes */
.wp-block-cover.alignfull.grit-hero .has-background-dim,
.wp-block-cover.alignfull.grit-hero .wp-block-cover__background {
  background-color: rgba(21,20,18,0.45) !important;
  opacity: 1 !important;
}
.wp-block-cover.alignfull:not(.grit-hero) .has-background-dim,
.wp-block-cover.alignfull:not(.grit-hero) .wp-block-cover__background {
  background-color: rgba(21,20,18,0.35) !important;
  opacity: 1 !important;
}
.wp-block-cover.alignfull:not(.grit-hero)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(21,20,18,0.55) 0%, rgba(21,20,18,0.25) 55%, rgba(21,20,18,0.05) 100%);
  pointer-events: none;
  z-index: 1;
}

/* CTA bar — keep its background full-bleed but text on the rail */
.grit-cta-bar { padding-left: 0 !important; padding-right: 0 !important; }
.grit-cta-bar > * {
  max-width: none !important;
}

/* ----- Force Oswald on display headings inside Cover overlays ----- */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover .t-display-xl,
.wp-block-cover .t-display-l,
.wp-block-cover .t-display-m {
  font-family: 'Oswald', 'Bebas Neue', Impact, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  color: var(--text-bone) !important;
}
.wp-block-cover .t-display-xl { font-size: clamp(48px, 7vw, 96px) !important; line-height: 0.95 !important; font-weight: 600 !important; }
.wp-block-cover .t-display-l  { font-size: clamp(32px, 4vw, 56px) !important; line-height: 1.0 !important;  font-weight: 600 !important; }
.wp-block-cover .t-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
}

/* ----- Hero specs strip — force 4-up grid, Oswald numbers ----- */
.grit-specs-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 32px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 48px 0 0 !important;
  padding-top: 24px !important;
  border-top: 1px solid #3D3A35 !important;
  background: transparent !important;
}
.grit-specs-strip > .wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.grit-specs-strip .t-display-m {
  font-family: 'Oswald', sans-serif !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--signal-red) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}
.wp-block-cover .wp-block-columns .t-display-m {
  color: var(--signal-red) !important;
}
.grit-specs-strip .t-kicker {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  color: #A09A90 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

/* ----- Why Convert callouts — 4-up grid with proper type ----- */
.wp-block-cover .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 32px !important;
  margin-top: 56px !important;
  padding-top: 24px !important;
  border-top: 1px solid #3D3A35 !important;
}
.wp-block-cover .wp-block-columns .wp-block-column {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.wp-block-cover .wp-block-columns .t-display-m {
  font-family: 'Oswald', sans-serif !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  margin: 4px 0 4px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
.wp-block-cover .wp-block-columns p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #A09A90 !important;
  margin: 0 !important;
}

/* ----- Section padding — tighter ----- */
.wp-block-group.alignfull,
.entry-content > .wp-block-group.alignfull {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.wp-block-group.alignfull.grit-cta-bar {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.wp-block-cover.alignfull { min-height: 480px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.wp-block-cover.alignfull.grit-hero { min-height: 78vh !important; margin-top: 0 !important; margin-bottom: 0 !important; }

/* Restore full-bleed override for cover sections after the margin reset */
.entry-content > .wp-block-cover.alignfull,
.entry-content > .wp-block-group.alignfull {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Kill GP's default vertical rhythm between top-level blocks */
.entry-content > * + * { margin-top: 0 !important; }
.entry-content .alignfull + .alignfull { margin-top: 0 !important; }

/* Body copy size floors */
.entry-content p,
.wp-block-cover p,
.has-text-color {
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.t-kicker {
  font-size: 11px !important;
}

/* Three Paths card body */
.wp-block-columns:not(.wp-block-cover *) .wp-block-column p {
  font-size: 14px !important;
}

/* Why Convert — lighter dim so photo reads through */
.wp-block-cover.alignfull:not(.grit-hero) > .wp-block-cover__inner-container {
  position: relative !important;
  z-index: 2 !important;
}

/* CTA bar — full-bleed red background, headline + button on the 1200px rail */
.grit-cta-bar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Inner row: same 1200px rail as every other section, flex layout */
.grit-cta-bar > * {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
/* Use a wrapper rule that flexes the heading + buttons inside the rail */
.grit-cta-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.grit-cta-bar > h2.wp-block-heading {
  padding-left: 32px !important;
  padding-right: 32px !important;
  margin: 0 !important;
}
.grit-cta-bar > .wp-block-buttons {
  padding-left: 32px !important;
  padding-right: 32px !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
}
/* Desktop — pull heading and buttons onto one row, justified ends, on the rail */
@media (min-width: 768px) {
  .grit-cta-bar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .grit-cta-bar > h2.wp-block-heading {
    flex: 1 1 auto !important;
    padding-right: 16px !important;
    padding-left: 32px !important;
  }
  .grit-cta-bar > .wp-block-buttons {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding-right: 32px !important;
    padding-left: 16px !important;
    justify-content: flex-end !important;
  }
  /* Together they share the 1200px rail */
  .grit-cta-bar > h2.wp-block-heading,
  .grit-cta-bar > .wp-block-buttons {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .grit-cta-bar::before {
    content: '' !important;
    flex: 1 0 auto !important;
    max-width: calc((100% - 1200px) / 2) !important;
  }
  .grit-cta-bar::after {
    content: '' !important;
    flex: 1 0 auto !important;
    max-width: calc((100% - 1200px) / 2) !important;
  }
}
.grit-cta-bar h2 {
  flex: 1 1 auto !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: clamp(24px, 3vw, 40px) !important;
  color: #F5F2EC !important;
}
.grit-cta-bar .wp-block-buttons,
.grit-cta-bar .wp-block-buttons.is-layout-flex {
  flex: 0 0 auto !important;
  margin: 0 !important;
  display: flex !important;
  width: auto !important;
  justify-content: flex-end !important;
}
.grit-cta-bar .wp-block-button { margin: 0 !important; width: auto !important; }
/* Solid light-grey button on red background */
.grit-cta-bar .wp-block-button__link {
  background: #F5F2EC !important;
  border: 1px solid #F5F2EC !important;
  color: #1E1D1B !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
}
.grit-cta-bar .wp-block-button__link:hover {
  background: #E8E4DB !important;
  border-color: #E8E4DB !important;
  color: #1E1D1B !important;
}
@media (max-width: 600px) {
  .grit-cta-bar { flex-direction: column !important; align-items: flex-start !important; }
}

/* Three Paths — column gutter, equal-height cards, vertically aligned text */
.wp-block-columns.is-layout-flex { gap: 1px !important; align-items: stretch !important; }
.wp-block-columns:not(.wp-block-cover *) > .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}
.wp-block-columns:not(.wp-block-cover *) > .wp-block-column > figure.wp-block-image {
  flex: 0 0 auto;
  margin: 0 !important;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.wp-block-columns:not(.wp-block-cover *) > .wp-block-column > figure.wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.wp-block-columns:not(.wp-block-cover *) > .wp-block-column > .wp-block-group {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.wp-block-columns:not(.wp-block-cover *) > .wp-block-column .t-label {
  margin-top: auto !important;
}

/* Section 1 cards — wrap in <a> for clickability, keep visual unchanged */
.grit-path-card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  background: #2A2825;
  height: 100%;
  transition: background 180ms ease;
}
.grit-path-card:hover { background: #322F2A; }

/* ============================================================
   15. BUILDS GRID — [recycle_builds_grid] shortcode output
   ============================================================ */
/* Products carousel — mirrors .grit-builds-grid pattern,
   targets the WooCommerce ul.products inside. */
.grit-products-carousel {
  position: relative;
  margin: 32px 0 8px;
}
.grit-products-carousel .woocommerce {
  margin: 0;
}
.grit-products-carousel ul.products {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2px) / 3);
  gap: 1px;
  background: var(--border-visible);
  border: 1px solid var(--border-visible);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.grit-products-carousel ul.products::-webkit-scrollbar { display: none; }
.grit-products-carousel ul.products > li.product {
  scroll-snap-align: start;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: var(--bg-surface);
}

@media (max-width: 900px) {
  .grit-products-carousel ul.products { grid-auto-columns: calc((100% - 1px) / 2); }
}
@media (max-width: 600px) {
  .grit-products-carousel ul.products { grid-auto-columns: 100%; }
}

/* Carousel wrapper — horizontal scroll with snap, 3-up visible on desktop */
.grit-builds-carousel {
  position: relative;
  margin: 32px 0 8px;
}
.grit-builds-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2px) / 3);
  gap: 1px;
  background: var(--border-visible);
  border: 1px solid var(--border-visible);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.grit-builds-grid::-webkit-scrollbar { display: none; }
.grit-builds-grid > .grit-build-card { scroll-snap-align: start; }

@media (max-width: 900px) {
  .grit-builds-grid { grid-auto-columns: calc((100% - 1px) / 2); }
}
@media (max-width: 600px) {
  .grit-builds-grid { grid-auto-columns: 100%; }
}

/* Static grid variant — used by /garage/ via [recycle_builds_grid layout="grid"].
   Overrides the carousel's column-flow / scroll-snap so the same .grit-build-card
   markup renders as a 3-up responsive grid with no horizontal scroll. */
.grit-builds-grid--static {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 24px;
  overflow: visible;
  scroll-snap-type: none;
  margin: 32px 0 8px;
  border: 0;
  background: transparent;
}
.grit-builds-grid--static > .grit-build-card { scroll-snap-align: none; }

@media (max-width: 900px) {
  .grit-builds-grid--static { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grit-builds-grid--static { grid-template-columns: 1fr; }
}

/* Pan buttons — refined */
.grit-pan {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  background: rgba(21, 20, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-bone);
  border: 1px solid rgba(245, 242, 236, 0.18);
  border-radius: 50%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.grit-pan::before {
  content: '';
  width: 12px; height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  display: block;
}
.grit-pan-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.grit-pan-next::before { transform: rotate(45deg); margin-right: 4px; }
.grit-pan:hover {
  background: var(--signal-red);
  border-color: var(--signal-red);
  transform: translateY(-50%) scale(1.06);
}
.grit-pan-prev { left: -26px; }
.grit-pan-next { right: -26px; }
@media (max-width: 700px) {
  .grit-pan-prev { left: 8px; }
  .grit-pan-next { right: 8px; }
  .grit-pan { width: 44px; height: 44px; }
}

.grit-build-card {
  background: var(--bg-surface);
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  flex-direction: column;
  transition: background 180ms ease;
}
.grit-build-card:hover { background: var(--bg-elevated); }
.grit-build-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-darker);
}
.grit-build-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.grit-build-img-empty {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, #2A2620 0 18px, #1F1C18 18px 36px);
}
.grit-build-img .badge-grit {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
}
.grit-build-meta { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.grit-build-meta .t-kicker { margin: 0; font-size: 10px !important; }
.grit-build-meta .t-display-m { margin: 0; color: var(--text-bone); font-size: 18px !important; }
.grit-build-platform { font-family: var(--mono); font-size: 12px; color: var(--text-muted); margin: 0; letter-spacing: 0.02em; }
.grit-build-cta { font-family: var(--mono); font-size: 11px; color: var(--signal-red); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 8px; }


/* ============================================================
   17. PRODUCT GALLERY OVERRIDES
   ============================================================ */
.woocommerce-product-gallery {
  border-radius: 0;
}
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img {
  border-radius: 0 !important;
}
.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 8px;
  list-style: none;
  padding: 0;
}
.flex-control-thumbs li img {
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, filter 0.15s ease;
}
.flex-control-thumbs li img:hover {
  filter: brightness(1.1);
}
.flex-control-thumbs li img.flex-active {
  border: 2px solid var(--signal-red);
}
@media (max-width: 768px) {
  .flex-control-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ============================================================
   18. BUILD SINGLE PAGE
   ============================================================ */

/* --- Hero --- */
.build-hero {
  position: relative;
  min-height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.build-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.build-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,19,18,0.9) 0%, transparent 60%);
}
.build-hero-text {
  position: relative;
  z-index: 2;
  padding: 48px 32px;
  max-width: 720px;
}
.build-hero-text .t-kicker { margin: 0 0 8px; }
.build-hero-text h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-light-bone);
  margin: 0 0 8px;
  line-height: 1.1;
}
.build-hero-text .build-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
}

/* --- Specs strip --- */
.build-specs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--border-visible);
  border-bottom: 1px solid var(--border-visible);
  background: var(--bg-surface);
}
.build-spec-cell {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 16px 20px;
  border-right: 1px solid var(--border-visible);
  text-align: center;
}
.build-spec-cell:last-child { border-right: none; }
.build-spec-value {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bone);
  letter-spacing: 0.02em;
}
.build-spec-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  margin-top: 4px;
}
@media (max-width: 600px) {
  .build-specs-strip { flex-wrap: wrap; }
  .build-spec-cell {
    flex: 1 1 33%;
    border-bottom: 1px solid var(--border-visible);
  }
}

/* --- Body content --- */
.build-body {
  max-width: 720px;
  margin: 48px auto;
  padding: 0 24px;
  color: var(--text-bone);
  font-size: 16px;
  line-height: 1.7;
}

/* --- Video embed --- */
.build-video {
  max-width: 960px;
  margin: 48px auto;
  padding: 0 24px;
}
.build-video .wp-block-embed__wrapper,
.build-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* --- Build gallery --- */
.build-gallery {
  max-width: 1200px;
  margin: 64px auto;
  padding: 0 24px;
}
.build-section-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-bone);
  margin: 0 0 16px;
}
.build-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.build-gallery-item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-elevated);
}
.build-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.build-gallery-item:hover img {
  transform: scale(1.03);
}
@media (max-width: 1024px) {
  .build-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .build-gallery-grid { grid-template-columns: 1fr; }
}

/* --- Photo break --- */
.build-photo-break {
  position: relative;
  width: 100%;
  min-height: 40vh;
  overflow: hidden;
  margin: 64px 0;
}
.build-photo-break img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.build-photo-break-caption {
  position: absolute;
  bottom: 24px; left: 32px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-light-bone);
  background: rgba(20,19,18,0.7);
  padding: 8px 14px;
}

/* --- Parts used --- */
.build-parts {
  max-width: 1200px;
  margin: 64px auto;
  padding: 0 24px;
}
.build-parts-scroll {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.build-parts-scroll::-webkit-scrollbar { display: none; }
.build-part-card {
  flex: 0 0 180px;
  background: var(--bg-surface);
  text-decoration: none;
  color: var(--text-bone);
  display: flex;
  flex-direction: column;
}
.build-part-card img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-darker);
}
.build-part-card-meta {
  padding: 12px;
  font-size: 12px;
}
.build-part-card-name {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.build-part-card-price {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}

/* --- Related builds --- */
.build-related {
  max-width: 1200px;
  margin: 64px auto;
  padding: 0 24px;
}


/* ============================================================
   19. VARIABLE PRODUCT DROPDOWN STYLING
   ============================================================ */
.variations select,
.variations .single-variation-wrap select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-visible);
  border-radius: 0;
  color: var(--text-bone);
  font-family: inherit;
  font-size: 14px;
  padding: 12px 16px;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A09A90' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.variations select:focus {
  outline: 2px solid var(--signal-red);
  outline-offset: -2px;
}
.variations label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: block;
}
.single_variation_wrap .price {
  font-family: var(--mono);
  color: var(--text-bone);
}

/* ── Composite product quantity selectors ──────────────── */
.composite_component .quantity,
.component_option_content .quantity {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0;
  width: auto;
}
.composite_component .quantity input[type="number"],
.component_option_content .quantity input[type="number"] {
  width: 50px;
  text-align: center;
  -moz-appearance: textfield;
}
.composite_component .quantity button,
.component_option_content .quantity button,
.composite_component .quantity .minus,
.composite_component .quantity .plus,
.component_option_content .quantity .minus,
.component_option_content .quantity .plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}


/* ============================================================
   3-ZONE LAYOUT — Scoped under .layout-3zone
   Feature flag: RECYCLE_3ZONE_LAYOUT in wp-config.php
   Remove .layout-3zone prefix after 14 days stable (Session 8)
   ============================================================ */

/* ── Sticky offset variable ─────────────────────────────── */
body.layout-3zone { --sticky-offset: 80px; }
body.layout-3zone.admin-bar { --sticky-offset: 112px; }

/* ── Container width (shop pages only) ──────────────────── */
body.woocommerce.layout-3zone .grid-container {
  max-width: 1280px;
}

/* ── 3-zone product page (CSS grid) ─────────────────────── */
/* Grid (not flex-wrap) so .woocommerce-tabs sits directly under the gallery
   while .summary spans BOTH rows. Flex-wrap could not do this: row 2 always
   cleared the 1,300–2,400px summary, dropping the description below the fold
   (debug 2026-06-09, symptom 1). Areas place each zone explicitly. */
.layout-3zone.single-product div.product {
  display: grid !important;
  grid-template-columns: 55% 45%;
  grid-template-areas:
    "gallery summary"
    "tabs    summary";
  align-items: start;
}

/* Gallery: left column, row 1 */
.layout-3zone.woocommerce div.product div.images,
.layout-3zone.single-product div.product div.images {
  grid-area: gallery;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 32px;
  box-sizing: border-box !important;
}

/* Entry summary (buy bar + components): right column, spans both rows */
.layout-3zone.single-product div.product .summary {
  grid-area: summary;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Tabs/description: left column, row 2 — directly under the gallery */
.layout-3zone.single-product .woocommerce-tabs {
  grid-area: tabs;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: none !important;
  margin-top: 48px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 32px;
  box-sizing: border-box !important;
}

/* Related products: full width below all columns */
.layout-3zone.single-product .related.products,
.layout-3zone.single-product .up-sells.products {
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: 100% !important;
}

/* Any unknown/injected direct child (WC notices, GP wrappers, sale flash if
   not absolutely positioned): force full width so it never lands in a stray
   grid cell and shift the layout. */
.layout-3zone.single-product div.product > :not(div.images):not(.summary):not(.woocommerce-tabs):not(.related):not(.up-sells) {
  grid-column: 1 / -1;
}

/* ── Type scale reductions (right column) ───────────────── */

/* Product H1: 40px → 28px max */
.layout-3zone.single-product .product_title {
  font-size: clamp(22px, 2.4vw, 28px) !important;
}

/* Header price: 22px → 16px */
.layout-3zone.single-product .entry-summary > .price,
.layout-3zone.single-product .entry-summary > .price .amount {
  font-size: 16px !important;
}

/* Component headings: ~22px Oswald → 12px system label */
.layout-3zone.single-product .composite_component .component_title {
  font-size: 12px !important;
  font-family: var(--body) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* Selected option title: 18-20px → 14px */
.layout-3zone.single-product .composite_component .composited_product_title,
.layout-3zone.single-product .composite_component .product_title,
.layout-3zone.single-product .component_option_title {
  font-size: 14px !important;
  font-family: var(--body) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* Selected option price: 16-18px → 12px */
.layout-3zone.single-product .composited_product_price,
.layout-3zone.single-product .component_option_price {
  font-size: 12px !important;
  font-family: var(--mono) !important;
}

/* Composited product images — constrain within component panels */
.layout-3zone.single-product .composited_product_images,
.layout-3zone.single-product .composited_product_image {
  max-width: 120px !important;
  float: left;
  margin: 0 16px 8px 0;
}
.layout-3zone.single-product .composited_product_images img {
  width: 100%;
  height: auto;
}
.layout-3zone.single-product .composited_product_details_wrapper {
  overflow: hidden; /* contain the float */
}

/* Running total — the only large price on the page */
.layout-3zone.single-product .composite_data .composite_price,
.layout-3zone.single-product .composite_data .composite_price .amount {
  font-size: 26px !important;
  font-family: var(--mono) !important;
  font-weight: 500 !important;
}

/* Optional component tag */
.layout-3zone.single-product .composite_component.is-optional .component_title::after {
  content: "OPTIONAL";
  margin-left: 8px;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--border-visible, #3D3A35);
  color: var(--text-dim, #8A857C);
  font-family: var(--mono);
  letter-spacing: 0.06em;
  vertical-align: middle;
}

/* Kit status strip */
.kit-status-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border-visible, #3D3A35);
  border-bottom: 1px solid var(--border-visible, #3D3A35);
  margin-bottom: 16px;
}
.kit-status-strip .kit-lead-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim, #8A857C);
  letter-spacing: 0.04em;
}

/* Description body: tighten slightly */
.layout-3zone.single-product .woocommerce-Tabs-panel p {
  font-size: 14px;
  line-height: 1.65;
}

/* ── Desktop: sticky right column ──────────────────────── */
/* The entry-summary sticks to the top of the viewport as the user
   scrolls through the description on the left. When the right column
   is taller than the viewport, sticky naturally unsticks and the
   column scrolls with the page. No DOM changes — pure CSS. */
@media (min-width: 768px) {
  .layout-3zone.single-product .entry-summary {
    position: sticky;
    top: var(--sticky-offset, 80px);
    align-self: start; /* grid: align to top of its (2-row) area, don't stretch */
  }
}

/* ── Mobile: fixed bottom buy bar ─────────────────────── */
/* Shows running total + Add to Cart pinned to the bottom of the
   screen on product pages. The composite_data div contains both
   .composite_price and .composite_button — we reposition it fixed.
   The original DOM position is unchanged so AJAX price updates work. */
@media (max-width: 767px) {
  .layout-3zone.single-product .composite_data {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--bg-charcoal, #1E1D1B);
    border-top: 1px solid var(--border-visible, #3D3A35);
    padding: 10px 20px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    min-height: 64px;
    box-sizing: border-box;
  }

  /* Running total: compact inline */
  .layout-3zone.single-product .composite_data .composite_price {
    font-size: 20px !important;
    font-family: var(--mono) !important;
    font-weight: 500 !important;
    flex-shrink: 0;
  }

  /* ATC button: fill remaining space */
  .layout-3zone.single-product .composite_data .composite_button {
    flex: 1;
  }
  .layout-3zone.single-product .composite_data .composite_button .quantity {
    display: none; /* hide qty stepper on mobile bar — kits are qty=1 */
  }
  .layout-3zone.single-product .composite_data .single_add_to_cart_button {
    width: 100%;
  }

  /* Hide messages in the fixed bar */
  .layout-3zone.single-product .composite_data .composite_message {
    display: none !important;
  }

  /* Pad content so it doesn't hide behind the fixed bar */
  .layout-3zone.single-product div.product {
    padding-bottom: max(80px, calc(64px + env(safe-area-inset-bottom)));
  }

  /* Disabled state: darker background + helper text */
  .layout-3zone.single-product .composite_data .composite_button .button[disabled],
  .layout-3zone.single-product .composite_data .composite_button .button.disabled {
    opacity: 0.5;
  }
}

/* ── Responsive: tablet (768–1023px) ────────────────────── */
/* Grid: even 50/50 split is set on the container's columns, not per item
   (an item width inside a grid cell would shrink it within the cell). */
@media (min-width: 768px) and (max-width: 1023px) {
  .layout-3zone.single-product div.product {
    grid-template-columns: 50% 50%;
  }
}

/* ── Responsive: mobile (<768px) ────────────────────────── */
/* Grid collapses to a single column, stacked gallery → summary → tabs.
   The summary no longer spans rows here, so the buy bar/configurator sits
   directly under the gallery and the description follows. */
@media (max-width: 767px) {
  .layout-3zone.single-product div.product {
    grid-template-columns: 1fr;
    grid-template-areas:
      "gallery"
      "summary"
      "tabs";
  }
  .layout-3zone.woocommerce div.product div.images,
  .layout-3zone.single-product div.product div.images {
    padding-right: 0;
  }
  .layout-3zone.single-product .woocommerce-tabs {
    padding-right: 0;
    margin-top: 24px;
  }
}

/* ============================================================
   ARCHIVE GRID — Shop / Category pages
   3-up desktop, 2-up mobile, Grit card styling
   ============================================================ */

/* ── Archive container ──────────────────────────────────── */
.layout-3zone.woocommerce-shop .grid-container,
.layout-3zone.tax-product_cat .grid-container,
.layout-3zone.tax-product_brand .grid-container {
  max-width: 1280px;
}

/* ── 3-up product grid ──────────────────────────────────── */
.layout-3zone .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  padding: 0;
  list-style: none;
}

/* ── Product card styling ───────────────────────────────── */
.layout-3zone .woocommerce ul.products li.product {
  background: var(--bg-surface, #2A2825);
  border: 1px solid var(--border-subtle, #2A2825);
  border-radius: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
  transition: border-color 0.15s ease;
}
.layout-3zone .woocommerce ul.products li.product:hover {
  border-color: var(--border-visible, #3D3A35);
}

/* Card image */
.layout-3zone .woocommerce ul.products li.product .wc-product-image {
  background: var(--bg-elevated, #3D3A35);
}
.layout-3zone .woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  display: block;
}

/* Card title */
.layout-3zone .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  text-transform: uppercase !important;
  color: var(--text-bone, #E8E4DC) !important;
  padding: 14px 16px 4px !important;
  line-height: 1.3 !important;
}

/* Card price */
.layout-3zone .woocommerce ul.products li.product .price {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  color: var(--text-bone, #E8E4DC) !important;
  padding: 0 16px 8px !important;
  display: block;
}

/* Card stock badge */
.layout-3zone .woocommerce ul.products li.product .grit-card-meta {
  padding: 0 16px 14px;
}

/* Card add-to-cart link */
.layout-3zone .woocommerce ul.products li.product .button {
  display: block;
  margin: 0 16px 14px;
  text-align: center;
  font-size: 11px !important;
  padding: 10px 16px !important;
}

/* ── Mobile archive: 2-up ───────────────────────────────── */
@media (max-width: 767px) {
  .layout-3zone .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .layout-3zone .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px !important;
    padding: 10px 10px 2px !important;
  }
  .layout-3zone .woocommerce ul.products li.product .price {
    font-size: 12px !important;
    padding: 0 10px 6px !important;
  }
  .layout-3zone .woocommerce ul.products li.product .button {
    margin: 0 10px 10px;
    font-size: 10px !important;
  }
}

/* ── Tablet archive: 3-up (same as desktop) ─────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .layout-3zone .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

/* ============================================================
   VARIATION CARDS — single-attribute variable products
   ============================================================ */
.variation-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.variation-card {
  display: block;
  cursor: pointer;
  border: 1px solid var(--border-visible, #3D3A35);
  background: var(--bg-surface, #2A2825);
  padding: 12px 16px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.variation-card:hover {
  border-color: var(--text-dim, #8A857C);
}
.variation-card.is-selected,
.variation-card:has(input:checked) {
  border-color: var(--signal-red, #CC4422);
  background: var(--bg-elevated, #3D3A35);
}
.variation-card-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.variation-card:has(:focus-visible) {
  outline: 2px solid var(--signal-red, #CC4422);
  outline-offset: 0;
}
.variation-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.variation-card-title {
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-bone, #E8E4DC);
  flex: 1;
  min-width: 80px;
}
.variation-card-price {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted, #A09A90);
}
.variation-card .badge-grit {
  font-size: 10px;
}
/* Out of stock card */
.variation-card[data-stock="outofstock"] {
  opacity: 0.4;
  pointer-events: none;
}
.variation-cards-label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim, #8A857C);
}

/* ============================================================
   RELATED PRODUCTS ROWS — single-product page
   PAIRS WITH (cross-sells) + MORE FROM {BRAND}
   Reuses archive card styling; mobile = horizontal scroll-snap.
   ============================================================ */

/* ── Row wrapper ────────────────────────────────────────── */
.grit-related-row {
  max-width: 1280px;
  margin: 48px auto 0;
  padding: 0 32px;
}
.grit-related-row + .grit-related-row {
  margin-top: 32px;
}

/* ── Header ─────────────────────────────────────────────── */
.grit-related-row__header {
  margin: 0 0 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Desktop card grid inherits .layout-3zone .woocommerce ul.products
   (repeat(3, 1fr), Grit card styling). No new rules needed. */

/* ── Mobile: horizontal scroll-snap (overrides 2-up archive grid) ── */
@media (max-width: 767px) {
  .grit-related-row {
    padding: 0;
  }
  .grit-related-row__header {
    margin-left: 16px;
    margin-right: 16px;
  }
  .layout-3zone .grit-related-row .woocommerce ul.products {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 75% !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    padding: 0 16px !important;
    scrollbar-width: none;
  }
  .layout-3zone .grit-related-row .woocommerce ul.products::-webkit-scrollbar {
    display: none;
  }
  .layout-3zone .grit-related-row .woocommerce ul.products > li.product {
    scroll-snap-align: start;
  }
}


/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .layout-3zone * {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }
}


/* ============================================================
   REFUND-POLICY NOTICE — pre-order / special-order items
   PDP buy box (.grit-refund-notice span) + cart/checkout line
   items reuse the warn palette already used by the Pre-order
   badge. Tokens only — no new colors/spacing system.
   ============================================================ */
.grit-refund-notice {
  display: block;
  margin-top: 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--warn-fg);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}


/* ============================================================
   PRODUCT FILTERS BLOCK — Grit skin (Left Sidebar)
   New unified WooCommerce "Product Filters" block (WC 9.9+),
   `.wc-block-product-filters`. SELECTORS VERIFIED AGAINST THE
   LIVE DOM (2026-06-07): the real leaf namespace is
   `.wc-block-product-filter-*` (NOT `wp-block-woocommerce-*`),
   and frontend markup differs from the editor preview.
   Live outputs: removable active-filter chips, a price slider
   (rendered as DIVs, not inputs), and stock + attribute checkbox
   lists. The rating and attribute groups self-hide via
   `.wc-block-product-filter--hidden` until they have data
   (no reviews / no attribute terms) — that hiding is left alone.
   - Scoped under `.wc-block-product-filters`; tokens only;
     signal-red reserved for actionable state.
   - Legacy layered-nav widgets (.wc-block-active-filters /
     .wc-block-price-filter / .wc-block-attribute-filter /
     .wc-block-rating-filter) are intentionally NOT styled.
   ============================================================ */

.wc-block-product-filters {
  color: var(--text-bone);
  font-family: var(--body);
  font-size: 14px;
}
/* Space between each inner filter group */
.wc-block-product-filters > * + * { margin-top: 24px; }

/* ── Group headings → mono kicker ───────────────────────── */
/* Live DOM walk shows the PRICE / RATING / CAPACITY labels render as plain
   heading elements / core heading blocks with no distinct filter class, and
   the exact level varies. Match every heading level + the core heading block
   + a fieldset legend + any "__title" element so the rule is level-agnostic
   and doesn't depend on one tag. (Browser-side querySelector can't be run
   from CC; this covers the cases the walk surfaced.) */
.wc-block-product-filters h1,
.wc-block-product-filters h2,
.wc-block-product-filters h3,
.wc-block-product-filters h4,
.wc-block-product-filters h5,
.wc-block-product-filters h6,
.wc-block-product-filters legend,
.wc-block-product-filters .wp-block-heading,
.wc-block-product-filters [class*="__title"] {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  border-bottom: 1px solid var(--border-visible);
  padding-bottom: 8px;
  margin: 0 0 12px;
}

/* ── Checkbox lists (stock + attributes) ────────────────── */
/* Real markup: .__checkbox-list__item > __input (native checkbox) + __label + __text */
.wc-block-product-filter-checkbox-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.wc-block-product-filter-checkbox-list__input,
.wc-block-product-filters input[type="checkbox"] {
  accent-color: var(--signal-red);
  width: 16px;
  height: 16px;
  border-radius: 0 !important;
  flex: 0 0 auto;
}
.wc-block-product-filter-checkbox-list__label { color: var(--text-bone); cursor: pointer; }
.wc-block-product-filter-checkbox-list__text  { color: var(--text-bone); font-size: 14px; }
/* Result counts e.g. "(3)" */
.wc-block-product-filter-checkbox-list__count,
.wc-block-product-filters [class*="count"] {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
}

/* ── Price slider (frontend = DIVs, not inputs) ─────────── */
/* Active track/fill */
.wc-block-product-filter-price-slider__range {
  background: var(--signal-red);
}
.wc-block-product-filters input[type="range"] { accent-color: var(--signal-red); }
/* Min / max read-outs are .__left.text / .__right.text DIVs */
.wc-block-product-filter-price-slider__left,
.wc-block-product-filter-price-slider__right {
  font-family: var(--mono) !important;
  color: var(--text-bone) !important;
  font-size: 13px;
}

/* ── Removable active-filter chips ──────────────────────── */
/* Real markup: __items (ul) > __item (li) > __label + __remove (button) */
.wc-block-product-filter-removable-chips__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wc-block-product-filter-removable-chips__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  color: var(--text-bone);
  border: 1px solid var(--border-visible);
  border-radius: 0;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 120ms ease, color 120ms ease;
}
.wc-block-product-filter-removable-chips__item:hover { border-color: var(--signal-red); }
.wc-block-product-filter-removable-chips__label { color: inherit; }
.wc-block-product-filter-removable-chips__remove {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.wc-block-product-filter-removable-chips__remove:hover { color: var(--signal-red); }

/* ── Controls: square corners + signal-red focus ────────── */
.wc-block-product-filters input,
.wc-block-product-filters select,
.wc-block-product-filters button,
.wc-block-product-filters .wc-block-components-button { border-radius: 0 !important; }
.wc-block-product-filters input:focus,
.wc-block-product-filters select:focus {
  outline: 2px solid var(--signal-red);
  outline-offset: -2px;
}

/* ── Rating stars → muted (red reserved for action) ─────── */
.wc-block-product-filters .wc-block-components-product-rating,
.wc-block-product-filters [class*="rating"] [class*="stars"] {
  color: var(--text-muted);
}

/* ── Clear button ───────────────────────────────────────── */
/* It's a `.wp-block-button.is-style-outline`, so §5's outline-button
   rule styles its inner __link. Override with a scoped, higher-
   specificity quiet-mono-link treatment (5 classes + !important > §5). */
.wc-block-product-filters .wc-block-product-filter-clear-button.wp-block-button.is-style-outline .wp-block-button__link,
.wc-block-product-filters .wc-block-product-filter-clear-button .wp-block-button__link,
.wc-block-product-filters .wc-block-product-filter-clear-button {
  background: transparent !important;
  border: none !important;
  color: var(--text-dim) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
}
.wc-block-product-filters .wc-block-product-filter-clear-button.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wc-block-product-filters .wc-block-product-filter-clear-button .wp-block-button__link:hover {
  background: transparent !important;
  border: none !important;
  color: var(--signal-red) !important;
}


/* ============================================================
   R-eCycle "Grit" — CRITICAL-PATH CSS ADDITIONS
   Card refinement · Cart · Checkout · Order Confirmation
   ------------------------------------------------------------
   Prepared 2026-06-06 by Claude Design.
   APPEND to child-theme/style.css (do not replace existing rules).
   Source of truth = the tokens defined in style.css §1.
   All colors/fonts reference live var(--token)s — no new tokens.

   STATUS: review draft — Claude Chat reviews before CC merges.

   Section map (see the matching .md for rationale):
     §A  Shared product card (16/10 locked)        → 01-product-card.md
     §B  Shop home (optional polish only)          → 02-shop-home.md
     §C  Cart                                      → 03-cart.md
     §D  Checkout                                  → 04-checkout.md
     §E  Order confirmation                        → 05-order-confirmation.md

   Cart/Checkout are written for the WooCommerce BLOCK markup
   (primary) with classic [woocommerce_*] shortcode selectors as
   fallback, so they're correct either way. Confirm which the live
   pages use (see 00-README.md "Cart / Checkout markup target").
   ============================================================ */


/* ============================================================
   §A — SHARED PRODUCT CARD  (aspect ratio 16/10 — locked 2026-06-06)
   ============================================================ */

/* §A.1 — Archive-grid card image gets the locked 16/10 well
   (live L1665 sets height:auto with no ratio → cards jitter by image size) */
.layout-3zone .woocommerce ul.products li.product img,
.layout-3zone .woocommerce ul.products li.product .wc-product-image img {
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto;
  display: block;
}

/* §A.2 — Garage build card: migrate 4/3 → 16/10 (overrides live L994) */
.grit-build-img { aspect-ratio: 16 / 10; }

/* §A.3 — Homepage Three-Paths figure: migrate 4/3 → 16/10 (overrides live L815) */
.wp-block-columns:not(.wp-block-cover *) > .wp-block-column > figure.wp-block-image {
  aspect-ratio: 16 / 10;
}

/* §A.4 — Out-of-stock action → ghost "NOTIFY ME" treatment (copy set in markup) */
.woocommerce ul.products li.product.outofstock .button,
.layout-3zone .woocommerce ul.products li.product.outofstock .button {
  background: transparent !important;
  color: var(--text-bone) !important;
  border: 1px solid var(--text-ghost) !important;
}
.woocommerce ul.products li.product.outofstock .button:hover {
  border-color: var(--text-bone) !important;
}


/* ============================================================
   §B — SHOP HOME  (optional — include only if tiles feel short on tablet)
   Replace PAGEID with the real /shop Page ID once created.
   ============================================================ */
/*
@media (min-width: 768px) {
  .page-id-PAGEID .wp-block-columns .wp-block-column.has-background { min-height: 160px; }
}
*/


/* ============================================================
   §C — CART  (Cart block primary; classic fallback)
   ============================================================ */

.woocommerce-cart h1.entry-title,
.wc-block-cart .wc-block-components-title {
  font-family: var(--display) !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.wc-block-cart { color: var(--text-bone); }
.wc-block-cart__main,
.wc-block-cart__sidebar { background: transparent; }

.wc-block-cart__sidebar > .wc-block-components-sidebar,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.cart_totals {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}

.wc-block-cart-items,
.woocommerce-cart-form table.cart {
  background: transparent !important;
  border: none !important;
}
.wc-block-cart-items__row,
.woocommerce-cart-form table.cart tr.cart_item {
  border-bottom: 1px solid var(--border-subtle) !important;
  background: transparent !important;
}
.wc-block-cart-item__image img,
.woocommerce-cart-form .product-thumbnail img {
  border-radius: 0 !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg-elevated);
}

.wc-block-cart-item__product .wc-block-components-product-name,
.woocommerce-cart-form .product-name a {
  font-family: var(--body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  text-transform: uppercase !important;
  color: var(--text-bone) !important;
}
.wc-block-cart-item__product .wc-block-components-product-details,
.wc-block-cart-item__product .wc-block-components-product-metadata,
.woocommerce-cart-form .product-name .variation {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--text-dim) !important;
}

.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-cart-item__prices .wc-block-components-product-price,
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
  font-family: var(--mono) !important;
  color: var(--text-bone) !important;
}

/* quantity stepper */
.wc-block-components-quantity-selector {
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  background: var(--bg-elevated) !important;
}
.wc-block-components-quantity-selector__input {
  background: transparent !important;
  color: var(--text-bone) !important;
  font-family: var(--mono) !important;
}
.wc-block-components-quantity-selector__button { color: var(--text-muted) !important; background: transparent !important; }
.wc-block-components-quantity-selector__button:hover { color: var(--text-bone) !important; }
.woocommerce-cart-form .quantity input.qty {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  color: var(--text-bone) !important;
  font-family: var(--mono) !important;
}

/* totals */
.wc-block-components-totals-item,
.cart_totals tr { color: var(--text-muted) !important; font-family: var(--mono) !important; }
.wc-block-components-totals-item__value,
.cart_totals .amount { color: var(--text-bone) !important; }
.wc-block-components-totals-footer-item,
.cart_totals tr.order-total { border-top: 1px solid var(--border-visible) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.cart_totals tr.order-total .amount { font-size: 20px !important; color: var(--text-bone) !important; }

/* proceed = the one red action (red comes from §5 L153) */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-proceed-to-checkout a.checkout-button {
  width: 100% !important;
  justify-content: center !important;
  border-radius: 0 !important;
}

/* coupon */
.wc-block-components-totals-coupon__form .wc-block-components-text-input input,
.woocommerce-cart-form .coupon input.input-text {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  color: var(--text-bone) !important;
  font-family: var(--mono) !important;
}
.wc-block-components-totals-coupon__button,
.woocommerce-cart-form .coupon button[name="apply_coupon"] {
  background: transparent !important;
  border: 1px solid var(--text-ghost) !important;
  color: var(--text-bone) !important;
}

/* remove link */
.wc-block-cart-item__remove-link,
.woocommerce-cart-form .product-remove a {
  color: var(--text-dim) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wc-block-cart-item__remove-link:hover,
.woocommerce-cart-form .product-remove a:hover { color: var(--signal-red) !important; }

/* empty state */
.wc-block-cart__empty-cart__title,
.cart-empty {
  font-family: var(--display) !important;
  text-transform: uppercase;
  color: var(--text-bone) !important;
}

@media (max-width: 767px) {
  .wc-block-cart { display: block !important; }
  .wc-block-cart__sidebar { margin-top: 24px; position: static !important; }
}


/* ============================================================
   §D — CHECKOUT  (Checkout block primary; classic fallback)
   Locked: single-page · guest · address required for tax.
   ============================================================ */

.wc-block-checkout { color: var(--text-bone); }
.woocommerce-checkout h1.entry-title,
.wc-block-checkout .wc-block-components-title {
  font-family: var(--display) !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* step headings → // kicker */
.wc-block-components-checkout-step__title {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-bone) !important;
}
.wc-block-components-checkout-step__title-content { color: var(--text-dim) !important; font-family: var(--mono) !important; }
.wc-block-components-checkout-step { border-bottom: 1px solid var(--border-subtle) !important; padding-bottom: 24px; }

/* floating-label block inputs (NOT covered by live §11 L391) */
.wc-block-components-text-input input,
.wc-block-components-text-input.is-active input,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-textarea {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  color: var(--text-bone) !important;
  font-family: var(--body) !important;
}
.wc-block-components-text-input label,
.wc-block-components-select label { color: var(--text-dim) !important; font-family: var(--mono) !important; font-size: 12px !important; }
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus { outline: 2px solid var(--signal-red) !important; outline-offset: -2px; }
.wc-block-components-text-input.has-error input,
.woocommerce-invalid input.input-text { border-color: var(--signal-red) !important; }
.wc-block-components-validation-error { color: var(--signal-red-hover) !important; font-family: var(--mono) !important; font-size: 11px !important; }

/* express payment row — DO NOT recolor Apple/Google buttons (brand rule) */
.wc-block-components-express-payment { border-bottom: 1px solid var(--border-subtle) !important; padding-bottom: 24px; margin-bottom: 8px; }
.wc-block-components-express-payment__title-container { color: var(--text-dim) !important; font-family: var(--mono) !important; }
.wc-block-components-express-payment-continue-rule { color: var(--text-dim) !important; font-family: var(--mono) !important; text-transform: uppercase; letter-spacing: 0.1em; }

/* payment method radios */
.wc-block-components-radio-control__option,
.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  color: var(--text-bone) !important;
}
.wc-block-components-radio-control__option--checked { border-color: var(--signal-red) !important; background: var(--bg-elevated) !important; }
.wc-block-components-radio-control__input:checked { accent-color: var(--signal-red); }
.woocommerce-checkout #payment { background: transparent !important; }
.woocommerce-checkout #payment div.payment_box { background: var(--bg-elevated) !important; border-radius: 0 !important; }

/* order summary (sticky right) */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary,
.woocommerce-checkout-review-order {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}
.wc-block-components-order-summary-item__image img {
  border-radius: 0 !important; aspect-ratio: 1/1; object-fit: cover; background: var(--bg-elevated);
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name,
.woocommerce-checkout-review-order td.product-name {
  font-family: var(--body) !important; font-weight: 600 !important; font-size: 13px !important;
  text-transform: uppercase !important; color: var(--text-bone) !important;
}
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price,
.woocommerce-checkout-review-order .amount { font-family: var(--mono) !important; color: var(--text-bone) !important; }
.woocommerce-checkout-review-order tr { font-family: var(--mono) !important; color: var(--text-muted) !important; }
.wc-block-components-totals-footer-item,
.woocommerce-checkout-review-order tr.order-total { border-top: 1px solid var(--border-visible) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce-checkout-review-order tr.order-total .amount { font-size: 22px !important; color: var(--text-bone) !important; }

@media (min-width: 768px) {
  .wc-block-checkout__sidebar { position: sticky; top: var(--sticky-offset, 80px); align-self: flex-start; }
}

/* place order = the one red action (red from §5) */
.wc-block-components-checkout-place-order-button,
.woocommerce-checkout #place_order {
  width: 100% !important; justify-content: center !important; border-radius: 0 !important; font-size: 14px !important;
}
.wc-block-components-checkout-place-order-button[disabled],
.woocommerce-checkout #place_order:disabled { opacity: 0.5; }

.wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button,
.woocommerce-checkout .place-order .woocommerce-terms-and-conditions-wrapper {
  font-family: var(--mono) !important; font-size: 11px !important; color: var(--text-dim) !important;
}

@media (max-width: 767px) {
  .wc-block-checkout { display: block !important; }
  .wc-block-checkout__sidebar { position: static !important; margin-bottom: 24px; }
}


/* ============================================================
   §E — ORDER CONFIRMATION  (block + classic thankyou.php)
   ============================================================ */

.woocommerce-order,
.wc-block-order-confirmation { color: var(--text-bone); }

.woocommerce-thankyou-order-received,
.wc-block-order-confirmation-status,
.woocommerce-order > p:first-of-type {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  color: var(--text-light-bone) !important;
}

.woocommerce-order-overview,
.wc-block-order-confirmation-summary {
  list-style: none !important;
  margin: 24px 0 !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--border-visible) !important;
  border-bottom: 1px solid var(--border-visible) !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 32px;
  background: transparent !important;
}
.woocommerce-order-overview li,
.wc-block-order-confirmation-summary li {
  border: none !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--text-dim) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.woocommerce-order-overview li strong,
.wc-block-order-confirmation-summary li strong {
  display: block; font-size: 15px; color: var(--text-bone) !important; margin-top: 4px; letter-spacing: 0;
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.wc-block-order-confirmation-totals h2,
.wc-block-order-confirmation-address h2 {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  margin: 32px 0 12px !important;
}

.woocommerce-order-details table.order_details,
.woocommerce-table--order-details,
.wc-block-order-confirmation-totals table {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  width: 100%;
}
.woocommerce-table--order-details th,
.wc-block-order-confirmation-totals th {
  font-family: var(--mono) !important; font-size: 11px !important; text-transform: uppercase !important;
  letter-spacing: 0.06em; color: var(--text-dim) !important; border-bottom: 1px solid var(--border-subtle) !important;
}
.woocommerce-table--order-details td,
.wc-block-order-confirmation-totals td { border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-bone) !important; }
.woocommerce-table--order-details .product-name,
.wc-block-order-confirmation-totals .product-name { font-family: var(--body) !important; font-weight: 600 !important; text-transform: uppercase !important; }
.woocommerce-table--order-details .amount,
.wc-block-order-confirmation-totals .amount,
.woocommerce-table--order-details .woocommerce-Price-amount { font-family: var(--mono) !important; color: var(--text-bone) !important; }
.woocommerce-table--order-details .wc-item-meta,
.wc-block-order-confirmation-totals .wc-item-meta {
  font-family: var(--mono) !important; font-size: 12px !important; color: var(--text-dim) !important; list-style: none; padding: 0;
}

.woocommerce-customer-details address,
.wc-block-order-confirmation-shipping-address address,
.wc-block-order-confirmation-billing-address address {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  padding: 16px !important;
  font-style: normal;
  font-family: var(--body) !important;
  color: var(--text-bone) !important;
  line-height: 1.6;
}

/* "what happens next" static panel appended after the order block */
.grit-order-next {
  background: var(--bg-darker);
  border-top: 3px solid var(--signal-red);
  padding: 32px;
  margin-top: 48px;
}
.grit-order-next .t-kicker { color: var(--text-dim); }
.grit-order-next ol { font-family: var(--body); color: var(--text-muted); line-height: 1.7; }
.grit-order-next .kit-lead-time { font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }

@media (max-width: 767px) {
  .woocommerce-order-overview,
  .wc-block-order-confirmation-summary { flex-direction: column; gap: 12px; }
  .woocommerce-customer-details .woocommerce-columns--addresses { display: block; }
}

/* ===== end critical-path additions ===== */


/* === ARCHIVE GRID + CARDS (cc-category-listing 2026-06-11) — mirror to WPCode snippet 752 ===
   Overrides + additions on top of the earlier "ARCHIVE GRID" block (~L1632).
   Card/grid overrides keep the existing .layout-3zone scope (that class is on
   EVERY page via the plugin body_class, and the live archive rules use it; the
   3-zone flag-removal session strips the prefix uniformly). New page-level
   elements (header strip, result count, ordering, pagination, brand kicker) use
   generic selectors — nothing else styles them. Appended last → wins the cascade. */

/* ── 1px gutters (C1 spec): cards on a darker bg, no card border ──────── */
.layout-3zone .woocommerce ul.products {
  gap: 1px !important;
  background: var(--border-visible) !important;   /* gutter colour shows between cards */
  border: 1px solid var(--border-visible) !important;
}
.layout-3zone .woocommerce ul.products li.product { border: none !important; }
.layout-3zone .woocommerce ul.products li.product:hover {
  transform: translateY(-2px);
  outline: 1px solid var(--border-visible);       /* outline ⇒ no 1px layout jitter */
  outline-offset: -1px;
}

/* ── Columns: 3-up ≥1024 · 2-up 768–1023 · 2-up <768 (≤767 already 2-up) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .layout-3zone .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 1px !important; }
}

/* ── Card title: Oswald, 14px, 2-line clamp ──────────────────────────── */
.layout-3zone .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--display) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Brand kicker (PHP grit_loop_brand_kicker) ───────────────────────── */
.woocommerce ul.products li.product .grit-card-brand {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
  padding: 14px 16px 0;
}

/* ── Out of stock: greyed image (badge already rendered by the loop hook) ── */
.woocommerce ul.products li.product.outofstock a img {
  filter: grayscale(1);
  opacity: 0.55;
}

/* ── Archive header strip: title (Grit display + // kicker) · description · count ── */
.woocommerce-products-header__title,
.woocommerce-products-header h1,
body.tax-product_cat .page-header .page-title,
body.tax-product_brand .page-header .page-title,
body.tax-product_tag .page-header .page-title {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  color: var(--text-bone) !important;
}
.woocommerce-products-header__title::before,
.woocommerce-products-header h1::before {
  content: "// ";
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.45em;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  vertical-align: middle;
}
.term-description,
.woocommerce-products-header .term-description,
.tax-product_cat .term-description {
  color: var(--text-muted);
  max-width: 70ch;
  margin: 8px 0 0;
  line-height: 1.6;
}
.woocommerce-result-count {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim) !important;
}

/* ── Sort dropdown (WC native orderby) ───────────────────────────────── */
.woocommerce-ordering select,
.woocommerce-ordering .orderby {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-bone) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-visible) !important;
  border-radius: 0 !important;
  padding: 8px 28px 8px 12px !important;
}

/* ── Pagination: sharp, mono, bone current (red stays for CTAs only) ──── */
.woocommerce-pagination ul,
.woocommerce-pagination ul li { border: none !important; }
.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: 1px; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  font-family: var(--mono) !important;
  border-radius: 0 !important;
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-visible) !important;
  min-width: 40px;
  padding: 8px 12px !important;
  line-height: 1;
}
.woocommerce-pagination ul li span.current {
  background: var(--bg-elevated) !important;
  color: var(--text-bone) !important;
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li a:focus {
  background: var(--bg-elevated) !important;
  color: var(--text-bone) !important;
}
/* === end ARCHIVE GRID + CARDS (cc-category-listing 2026-06-11) === */


/* ============================================================================
   DESIGN QA FIXES — live-site pass 2026-06-13 (Claude Design, "Design QA Review")
   Source patch: Claude Design/13Jun26/handoff/grit-design-qa-fixes.css
   ACTIVE here: F-01, F-02, F-05, F-08, F-10, F-11 (selectors verified against
   this stylesheet + approved shop-home markup). GATED/DEFERRED (F-06 type-scale
   sign-off; F-03 needs .grit-cat-card markup; F-04 = configurator island) are
   held in the patch file, not appended — see its header.
   ============================================================================ */

/* F-01 · Masthead dead space — tame vertical rhythm (overrides :447 horiz-only) */
.inside-header {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-description { font-size: 13px; color: var(--text-muted); margin: 0; }
@media (max-width: 1024px) { .site-description { display: none; } }

/* F-02 · Hero over-dominant — cap interior/Shop heroes (overrides :666-667) */
.home .wp-block-cover.alignfull.grit-hero { min-height: 64vh !important; }
body:not(.home) .wp-block-cover.alignfull.grit-hero {
  min-height: clamp(300px, 42vh, 440px) !important;
}
.wp-block-cover.alignfull { min-height: 360px !important; }

/* F-05 · Contrast lift — new --text-body token (9.6:1, AA) + demote dim/ghost */
:root { --text-body: #C9C3B8; }
.entry-content p,
.wp-block-cover .wp-block-columns p,
.woocommerce-product-details__short-description {
  color: var(--text-body) !important;
}
.t-kicker,
.grit-specs-strip .t-kicker { color: var(--text-muted) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-breadcrumb { color: var(--text-muted) !important; }

/* F-08 · Normalise empty placeholder wells to --bg-elevated at 16/10 */
.woocommerce ul.products li.product img[src*="placeholder"],
.grit-card-img--empty {
  background: var(--bg-elevated) !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: contain !important;
}

/* F-10 · Site-wide keyboard focus ring */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--signal-red);
  outline-offset: 2px;
}

/* F-11 · Active PDP tab emphasis */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--signal-red) !important;
  font-weight: 700 !important;
}

/* F-06 · Operating controls = 16-17px (apple.com benchmark). Documented
   exception to the 14px Grit body cap, approved by Randy 2026-06-13 (see
   grit-design-system.md). Governs OPERATING controls, not reading text. */
.search-field,
.woocommerce input.input-text,
select {
  font-size: 17px !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
}
.button,
.wp-block-button__link,
.single_add_to_cart_button {
  font-size: 16px !important;
  padding: 16px 30px !important;
  min-height: 52px;
}

/* F-03 · Category cells = full-cell doorways. Activated 2026-06-13 with the
   shop-home markup change (each category column now carries .grit-cat-card —
   shop-home-blocks-APPROVED.html). Hot spot = the existing "Browse →" link
   stretched over the whole cell; no per-anchor class needed. */
.grit-cat-card {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  transition: transform .18s ease, border-color .18s ease;
}
.grit-cat-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
/* image well → locked 16/10, scales on hover */
.grit-cat-card figure.wp-block-image { overflow: hidden; aspect-ratio: 16 / 10; margin: 0 0 16px; }
.grit-cat-card figure.wp-block-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .18s ease;
}
.grit-cat-card:hover figure.wp-block-image img { transform: scale(1.03); }
/* "Browse →" promoted to a ≥15px link in a 44px row, stretched over the cell */
.grit-cat-card .t-label a {
  display: inline-flex; align-items: center;
  min-height: 44px; font-size: 15px; letter-spacing: .04em;
}
.grit-cat-card .t-label a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* heading link stays independently clickable/focusable above the overlay */
.grit-cat-card h3 a { position: relative; z-index: 2; }

/* F-04 thumbnail option-card re-skin REMOVED 2026-06-13 (PM review DR-1):
   the configurator is switched back to DROPDOWN mode (functions.php), so the
   thumbnail-card DOM no longer renders. Dropdown styling lives in the
   "DESIGN REVIEW FIXES (PM pass)" block appended below. */
/* === end DESIGN QA FIXES (Design QA Review 2026-06-13) === */


/* ============================================================
   R-eCycle "Grit" — DESIGN REVIEW FIXES (PM pass, 2026-06-13)
   ------------------------------------------------------------
   Prepared by Claude Design. APPEND to child-theme/style.css.
   Companion: docs/tasks/cc-design-review-2026-06-13.md
   Visual target: configurator/PDP-Redesign.html

   SUPERSEDES the F-04 block in handoff/grit-design-qa-fixes.css.
   REMOVE the F-04 `.wc-pao-*` / thumbnail-grid rules before adding this.

   Composite Products 11.0.5 DOM — VERIFY selectors against the live
   rendered markup before merge (CP class names drift across builds).
   Likely roots: .composite_form, .component, .component_options,
   .wc-composite-component, .component_option_thumbnail.
   ============================================================ */

:root{
  --text-body:#C9C3B8;            /* 9.6:1 on charcoal (DR-7) */
  --grit-scrim:linear-gradient(180deg,transparent 0%,rgba(20,19,18,.88) 100%);
}

/* ============================================================
   DR-4 — HEADER DEAD SPACE (above hero / above PDP image)
   ============================================================ */
.inside-header{ padding:12px 0 !important; }
.site-logo img,.header-image{ max-height:46px !important; width:auto !important; }
.home .site-content > *:first-child,
.entry-content > .wp-block-group:first-child{ margin-top:0 !important; padding-top:0 !important; }
.wp-block-cover.alignfull.grit-hero{ margin-top:0 !important; }
/* PDP: kill the band above the product image/summary */
.single-product div.product{ margin-top:0 !important; }
.single-product .woocommerce-product-gallery,
.single-product div.product .summary{ margin-top:0 !important; }

/* ============================================================
   DR-5 — HERO OVER-DOMINANT (interior + Shop become banners)
   ============================================================ */
.home   .wp-block-cover.alignfull.grit-hero{ min-height:62vh !important; }
body:not(.home) .wp-block-cover.alignfull.grit-hero{
  min-height:clamp(260px,38vh,400px) !important;          /* tighter than AM 42vh */
}
.wp-block-cover.alignfull{ min-height:320px !important; }

/* ============================================================
   DR-6 — INTERACTIVE TYPE SIZE (apple.com benchmark)
   menus + dropdowns + primary fields + step labels
   ============================================================ */
.main-navigation a,
.main-navigation .menu-item a{
  font-size:16px !important; letter-spacing:.04em;
  padding-top:10px !important; padding-bottom:10px !important;   /* ~44px row */
}
.search-field,.wp-block-search__input,
.woocommerce input.input-text,
select,.wc-composite-component select,.qty{
  font-size:17px !important; min-height:52px !important; padding:14px 16px !important;
}
.button,.wp-block-button__link,.woocommerce a.button,
.single_add_to_cart_button,.composite_add_to_cart_button,
.wp-block-search__button{
  font-size:18px !important; padding:17px 32px !important; min-height:56px !important;
}
/* composite step / component headings ("01 Bottom Bracket") */
.wc-composite-component > h3,
.composite_component .component_title,
.component_title_count, .component_title{
  font-size:17px !important; font-weight:600 !important;
  letter-spacing:.04em; color:var(--text-bone) !important;
}
/* "From / Your build" price */
.single-product p.price,.single-product .price .amount,
.composite_price .price{
  font-size:33px !important; font-family:var(--mono,'JetBrains Mono',monospace) !important;
}

/* ============================================================
   DR-7 — TEXT CONTRAST (token sweep + overlay scrim)
   --text-ghost / --text-dim = decoration ONLY, never body text.
   ============================================================ */
.entry-content p,
.woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs .panel p,
.component_description,.composite_summary, .wc-composite-component p,
.product_meta, .bnpl, .grit-spec-line{
  color:var(--text-body) !important;
}
.woocommerce-breadcrumb,.woocommerce-breadcrumb a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.t-kicker{ color:var(--text-muted) !important; }
/* any text sitting over a photo gets a scrim + light bone */
.wp-block-cover__inner-container,
.grit-cat-card .grit-cat-cap,
.grit-overlay-scrim{ position:relative; }
.wp-block-cover .wp-block-cover__inner-container,
.grit-overlay-scrim{ color:var(--text-light-bone,#F5F2EC) !important; }
.wp-block-cover::after{
  content:'';position:absolute;inset:0;background:var(--grit-scrim);pointer-events:none;z-index:0;
}
.wp-block-cover__inner-container{ position:relative; z-index:1; }

/* ============================================================
   DR-1 / DR-2 — COMPOSITE CONFIGURATOR (DROPDOWN MODE)
   Pairs with the functions.php options-style filter (=> 'dropdowns')
   and the price.php override (suppress $0.00). VERIFY selectors.
   ============================================================ */
/* one full-width dropdown per component; remove card-grid + pagination */
.component_options.dropdowns .component_option,
.component_options .component_options_pagination,   /* "PAGE 1 OF 2" */
.composite_component .pagination{ }                  /* (pagination gone in dropdown mode) */
.component_options_pagination{ display:none !important; }

.wc-composite-component,.composite_component{
  padding:16px 0 !important; border-bottom:1px solid var(--border-subtle,#2A2825);
}
.wc-composite-component select,.component_options select{
  width:100% !important; background:var(--bg-surface,#2A2825) !important;
  color:var(--text-light-bone,#F5F2EC) !important;
  border:1px solid var(--border-strong,#4A4640) !important; border-radius:0 !important;
}

/* DR-2: single CURRENT-selection preview, image 56px BESIDE the text.
   Style CP's selected-option thumbnail; HIDE the per-option image column
   and CP's separate "Your selection" summary block. */
.component_summary, .composited_product_details_wrapper .summary_image,
.component_option_thumbnail.is-list,               /* per-option image lists */
.composite_summary .composite_summary_items img{ }
/* per-selection thumb (when present) */
.component .selected_option_thumbnail img,
.component_summary img{
  width:56px !important; height:56px !important; object-fit:cover !important;
  float:none !important; margin:0 12px 0 0 !important;     /* kills text offset */
  background:var(--bg-elevated,#3D3A35);
}
/* layout the selected row: thumb left, label+spec right */
.component_summary{
  display:flex !important; align-items:flex-start !important; gap:12px !important;
  padding:8px 0 0 !important; background:none !important; border:none !important;
}
/* meta line under the dropdown: spec left, delta/stock right */
.component_description{
  font-size:13px !important; color:var(--text-body) !important; margin-top:8px !important;
}
/* DR-1: included option reads "included", never +$0.00 (belt + PHP suspenders) */
.component_option_price .amount:empty,
.component_total_price .amount:empty{ display:none !important; }

/* ============================================================
   DR-3 — PRIMARY GALLERY (multi-image, visible thumb rail)
   ============================================================ */
.woocommerce-product-gallery__wrapper{ background:var(--bg-elevated,#3D3A35); }
.flex-control-thumbs,
.woocommerce-product-gallery .flex-control-nav{
  display:flex !important; gap:10px !important; margin-top:10px !important;
  list-style:none !important; padding:0 !important;
}
.flex-control-thumbs li{ flex:1 1 0 !important; margin:0 !important; }
.flex-control-thumbs li img{
  width:100% !important; aspect-ratio:1/1 !important; object-fit:cover !important;
  border:2px solid var(--border-subtle,#2A2825); opacity:.7; transition:.15s ease;
}
.flex-control-thumbs li img:hover{ opacity:1; border-color:var(--border-strong,#4A4640); transform:translateY(-2px); }
.flex-control-thumbs li img.flex-active{ opacity:1; border-color:var(--signal-red,#CC4422) !important; }
/* graceful single-image: hide the empty rail rather than show one stray tile */
.woocommerce-product-gallery--columns-1 .flex-control-thumbs{ display:none !important; }

/* ============================================================
   DR-8 — SHOP CARD HOT SPOTS (carry-over from AM F-03)
   CSS ships here; markup paste into Page 810 still required.
   ============================================================ */
.grit-cat-card,.grit-featured-card{
  position:relative; cursor:pointer; border:1px solid var(--border-subtle,#2A2825);
  transition:transform .18s ease,border-color .18s ease;
}
.grit-cat-card:hover,.grit-featured-card:hover{ transform:translateY(-2px); border-color:var(--border-strong,#4A4640); }
.grit-cat-card .stretched-link::after{ content:''; position:absolute; inset:0; z-index:2; }  /* whole cell clickable */
.grit-cat-img,.grit-featured-img{ overflow:hidden; }
.grit-cat-card:hover .grit-cat-img img{ transform:scale(1.04); transition:transform .3s ease; }
.grit-cat-card a.browse,.grit-featured-card a.configure{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:15px !important; letter-spacing:.04em;
}

/* ============================================================
   DR-6 a11y — keep focus-visible from AM pass (F-10)
   ============================================================ */
a:focus-visible,button:focus-visible,.button:focus-visible,
input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--signal-red,#CC4422) !important; outline-offset:2px !important;
}

/* ------------------------------------------------------------
   DR-6 FIX (2026-06-14) — keep the 33px mono "build total" size OFF a
   component's own SELECTED-VARIATION price. A variable option (e.g. the 52V
   Shark Battery, $428.00) renders its WC variation price INSIDE the narrow
   configurator column; at 33px it overflowed and wrapped mid-number
   ("$428.0" / "0"). Reset component/variation prices to a compact, no-wrap
   size. The composite build-total (.composite_price) stays large.
   ------------------------------------------------------------ */
.single-product .wc-composite-component .price,
.single-product .wc-composite-component .price .amount,
.single-product .composite_component .price,
.single-product .composite_component .price .amount,
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price .price .amount,
.single-product .single_variation .price,
.single-product .single_variation .price .amount{
  font-size:18px !important;
  line-height:1.3 !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* ===================== end design-review fixes ===================== */