/* ============================================================
   GREEN BADGER — PRODUCT DETAIL PAGE
   Port of the approved gb-pdp-proto-v2 prototype (2026-08-22). Restyles
   WooCommerce's own single-product DOM (content-single-product.php,
   add-to-cart/variable.php) with CSS Grid — no markup is duplicated, the
   variation form / add-to-cart / stock state stay WooCommerce's own.
   Consumes HOME's ratified tokens (--dm-text, --dm-primary, --gb-font-en,
   --gb-font-ja) the same way SHOP/VOICE do. Green Badger scope only.
   ============================================================ */

body.dm-commerce-single.dm-gb-pdp {
  --gb-pdp-bg:#0b0b0a;
  --gb-pdp-cream:var(--dm-text, #f4f1e8);
  --gb-pdp-muted:#8f9189;
  --gb-pdp-gold:var(--dm-primary, #b89a5b);
  --gb-pdp-line:rgba(244,241,232,.14);
  --gb-pdp-serif:var(--gb-font-en, "Cormorant Garamond", Georgia, serif);
  --gb-pdp-sans:var(--gb-font-ja, "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif);
  --gb-pdp-ease:cubic-bezier(.37,0,.63,1);
  background:var(--gb-pdp-bg);
  color:var(--gb-pdp-cream);
}

body.dm-commerce-single.dm-gb-pdp .site-content,
body.dm-commerce-single.dm-gb-pdp #content,
body.dm-commerce-single.dm-gb-pdp .content-area,
body.dm-commerce-single.dm-gb-pdp main.site-main {
  background:var(--gb-pdp-bg);
}
body.dm-commerce-single.dm-gb-pdp .site-content > .ast-container {
  width:100%; max-width:none; padding-left:0; padding-right:0;
}
body.dm-commerce-single.dm-gb-pdp #primary { width:100%; margin:0; padding:0; border:0; }
body.dm-commerce-single.dm-gb-pdp #secondary { display:none; }
body.dm-commerce-single.dm-gb-pdp .page-title,
body.dm-commerce-single.dm-gb-pdp nav.woocommerce-breadcrumb { display:none; }

body.dm-commerce-single.dm-gb-pdp div.product {
  max-width:1540px;
  margin:0 auto;
  padding:36px 54px 120px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
  column-gap:clamp(54px,6vw,108px);
  row-gap:0;
  font-family:var(--gb-pdp-sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

/* PDP Composer seams. The Woo/Green Badger product remains one untouched
   SYSTEM region; shared Sections may sit only before its breadcrumb or after
   its dossier/related output. Explicit grid rows keep the native two-column
   product hero and variation form intact. */
body.dm-commerce-single.dm-gb-pdp div.product > [data-dm-product-anchor] {
  grid-column:1 / -1;
  min-width:0;
}
body.dm-commerce-single.dm-gb-pdp div.product > [data-dm-product-anchor="before_product"] { grid-row:1; }
body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-crumb { grid-row:2; }
body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-media,
body.dm-commerce-single.dm-gb-pdp div.product > .summary.entry-summary { grid-row:3; }
body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-dossier { grid-row:4; }
body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-related { grid-row:5; }
body.dm-commerce-single.dm-gb-pdp div.product > [data-dm-product-anchor="after_product"] { grid-row:6; }
@media (max-width:900px) {
  body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-media { grid-row:3; }
  body.dm-commerce-single.dm-gb-pdp div.product > .summary.entry-summary { grid-row:4; }
  body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-dossier { grid-row:5; }
  body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-related { grid-row:6; }
  body.dm-commerce-single.dm-gb-pdp div.product > [data-dm-product-anchor="after_product"] { grid-row:7; }
}

/* The site-wide hero-overlap mechanic (duck-mark-header-control.css:344)
   pulls the page's first content block up under the header with a
   negative margin-top, meant for pages with a hero background behind a
   transparent header. PDP has no hero — its own product grid starts
   right under the header instead, so that pull-up puts row 1 (the SHOP
   crumb + category label) inside the header's own footprint, bleeding
   text into the nav bar. Undone here, scoped to this template only, by
   restoring the same 106px the header actually renders at (matched
   live; sections.css documents the same 96px-token/106px-real gap). */
body.dm-commerce-single.dm-gb-pdp.dm-header-hero-overlap-enabled div.product {
  margin-top: 106px;
}

/* ---------- crumb (row 1) ---------- */
.gb-pdp-crumb {
  grid-column:1 / -1; grid-row:1;
  display:flex; justify-content:space-between;
  padding-bottom:22px; margin-bottom:0;
  border-bottom:1px solid var(--gb-pdp-line);
  color:var(--gb-pdp-muted); font-size:10px; letter-spacing:.18em;
}
.gb-pdp-crumb a,
.gb-pdp-crumb a:hover,
.gb-pdp-crumb a:focus,
.gb-pdp-crumb a:active,
.gb-pdp-crumb a:visited { color:inherit !important; text-decoration:none; transition:color 450ms var(--gb-pdp-ease); }
.gb-pdp-crumb a:hover,
.gb-pdp-crumb a:focus-visible { color:var(--gb-pdp-gold) !important; outline:none; }

/* ---------- media column (row 2, col 1) ---------- */
/* Outer grid item stretches (default align-self) to the row-2 track height,
   which is set by the taller summary column; sticky lives on the inner
   __sticky wrapper so it releases at the outer box's own bottom edge instead
   of running the full page (a bare sticky grid item with align-self:start
   collapses to its own short content height, so it never finds that
   boundary). */
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media {
  grid-column:1; grid-row:2;
  padding-top:52px;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media__sticky {
  position:sticky; top:28px;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .woocommerce-product-gallery {
  opacity:1 !important;
  /* Astra compiles this into woocommerce-layout-grid.min.css with an
     `#content` prefix (`.woocommerce #content div.product div.images{float:
     left;width:48%}`), and it carries the `images` class WooCommerce always
     adds — the ID beats any class-only override, hence !important here,
     same as every other Astra-leak fix in this file. */
  float:none !important; width:100% !important; max-width:none !important;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .woocommerce-product-gallery__wrapper,
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .woocommerce-product-gallery__image,
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media img {
  margin:0; aspect-ratio:1/1; background:#080807; overflow:hidden;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.86) brightness(.92);
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .flex-control-thumbs {
  display:flex; gap:18px; margin-top:18px; padding:0; list-style:none;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .flex-control-thumbs li { width:auto; }
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .flex-control-thumbs img {
  aspect-ratio:auto; width:56px; height:56px; opacity:.55; cursor:pointer;
  transition:opacity 450ms var(--gb-pdp-ease);
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .flex-control-thumbs img:hover,
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .flex-control-thumbs img.flex-active { opacity:1; }

.gb-pdp-sale-badge {
  position:absolute; top:70px; left:0; z-index:2;
  color:var(--gb-pdp-gold); font-size:10px; letter-spacing:.15em;
  opacity:0; transform:translateY(-4px);
  transition:opacity 700ms var(--gb-pdp-ease), transform 700ms var(--gb-pdp-ease);
}
.gb-pdp-sale-badge[data-gb-pdp-visible] { opacity:1; transform:none; }
.gb-pdp-sale-badge span { margin-left:8px; }

/* ---------- buy column (row 2, col 2) ---------- */
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary {
  grid-column:2; grid-row:2; padding-top:82px;
  display:block; gap:0; min-width:0;
  /* Same underfill as the gallery: Astra's compiled `.woocommerce #content
     div.product div.summary{float:right;width:48%}` carries an `#content`
     ID, which beats a class-only override — !important, same technique. */
  float:none !important; width:100% !important; max-width:none !important;
}
.gb-pdp-eyebrow { color:var(--gb-pdp-gold); font-size:10px; letter-spacing:.24em; margin:0; }
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary .product_title {
  font-family:var(--gb-pdp-serif); font-weight:400;
  font-size:clamp(48px,4.6vw,76px); line-height:.92; letter-spacing:-.04em;
  margin:18px 0 28px; color:var(--gb-pdp-cream);
}
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary .woocommerce-product-rating,
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary .product_meta,
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary .social-share {
  /* Astra consolidates the five core summary hooks into one wrapper
     (single_product_content_structure), so remove_action() on the native
     hook/priority pairs can't reach this markup — hidden here instead. */
  display:none;
}

body.dm-commerce-single.dm-gb-pdp .summary.entry-summary > p.price {
  display:flex; gap:14px; align-items:baseline; margin:0 0 28px;
  font-family:var(--gb-pdp-serif); font-size:30px; font-weight:400; color:var(--gb-pdp-cream);
  transition:opacity 500ms var(--gb-pdp-ease), transform 500ms var(--gb-pdp-ease);
}
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary > p.price.gb-pdp-price--updating { opacity:.4; transform:translateY(4px); }
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary > p.price del { color:var(--gb-pdp-muted); font-size:.44em; opacity:1; }
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary > p.price ins { text-decoration:none; }
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary > p.price .gb-pdp-price__pct {
  color:var(--gb-pdp-gold); font-size:10px; letter-spacing:.14em; font-family:var(--gb-pdp-sans);
}
body.dm-commerce-single.dm-gb-pdp .single_variation_wrap .woocommerce-variation-price,
body.dm-commerce-single.dm-gb-pdp .single_variation_wrap .woocommerce-variation-availability { display:none; }

body.dm-commerce-single.dm-gb-pdp .woocommerce-product-details__short-description {
  color:var(--gb-pdp-muted); font-size:12px; line-height:1.8; letter-spacing:.03em; margin-bottom:38px;
}
body.dm-commerce-single.dm-gb-pdp .woocommerce-product-details__short-description p { margin:0; }

/* ---------- purchase config (custom selects driving the real form) ---------- */
body.dm-commerce-single.dm-gb-pdp table.variations,
body.dm-commerce-single.dm-gb-pdp .reset_variations_alert,
body.dm-commerce-single.dm-gb-pdp a.reset_variations { display:none !important; }

.gb-pdp-purchase-config { border-top:1px solid var(--gb-pdp-line); padding-top:8px; }
.gb-pdp-select-field { padding:20px 0; border-bottom:1px solid var(--gb-pdp-line); }
.gb-pdp-select-field > label {
  display:block; font-family:var(--gb-pdp-sans); font-size:12px; font-weight:500;
  color:var(--gb-pdp-muted); letter-spacing:.04em; margin-bottom:12px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.gb-pdp-select { position:relative; }
/* Astra's customizer dynamic CSS puts a global accent-blue background on
   focused/hovered <button> elements (--ast-global-color-1, measured
   #045cb4) — the same class of leak already defeated on MEMBER/DASHBOARD/
   VOICE with a scoped !important; reused here rather than re-diagnosed. */
.gb-pdp-select__trigger,
.gb-pdp-select__trigger:hover,
.gb-pdp-select__trigger:focus,
.gb-pdp-select__trigger:active {
  width:100%; min-height:56px; border:0; border-bottom:1px solid rgba(244,241,232,.28) !important; border-radius:0;
  background:transparent !important; color:var(--gb-pdp-cream) !important; display:flex; align-items:center; justify-content:space-between;
  padding:0 2px; text-align:left; cursor:pointer; transition:border-color 450ms var(--gb-pdp-ease); box-shadow:none !important;
}
.gb-pdp-select__trigger:disabled { opacity:.35; cursor:not-allowed; }
.gb-pdp-select__trigger:hover:not(:disabled),
.gb-pdp-select.is-open .gb-pdp-select__trigger { border-bottom-color:var(--gb-pdp-gold) !important; }
.gb-pdp-select__trigger:focus-visible {
  outline:1px solid var(--gb-pdp-gold) !important; outline-offset:2px;
}
.gb-pdp-select__value {
  font-family:var(--gb-pdp-sans); font-size:16px; font-weight:600; line-height:1.4; letter-spacing:0;
  color:var(--gb-pdp-cream); font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.gb-pdp-select .chev { color:var(--gb-pdp-gold); font-size:18px; transition:transform 450ms var(--gb-pdp-ease); }
.gb-pdp-select.is-open .chev { transform:rotate(180deg); }
.gb-pdp-select__menu {
  position:absolute; left:0; right:0; top:calc(100% + 1px); z-index:20; background:#0d0d0c;
  border:1px solid rgba(184,154,91,.35); opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity 280ms var(--gb-pdp-ease), transform 420ms var(--gb-pdp-ease), visibility 0s linear 420ms;
  list-style:none; margin:0; padding:0;
}
.gb-pdp-select.is-open .gb-pdp-select__menu { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.gb-pdp-select__menu button,
.gb-pdp-select__menu button:focus,
.gb-pdp-select__menu button:active {
  width:100%; min-height:54px; border:0; background:transparent !important; color:var(--gb-pdp-cream) !important; padding:15px 18px; text-align:left; cursor:pointer;
  display:flex; align-items:center;
  font-family:var(--gb-pdp-sans); font-size:16px; font-weight:500; line-height:1.45; letter-spacing:0; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background 300ms var(--gb-pdp-ease), color 300ms var(--gb-pdp-ease); box-shadow:none !important;
}
.gb-pdp-select__menu li + li button { border-top:1px solid var(--gb-pdp-line); }
.gb-pdp-select__menu button:disabled { color:var(--gb-pdp-muted) !important; cursor:not-allowed; opacity:.4; }
.gb-pdp-select__menu button:hover:not(:disabled),
.gb-pdp-select__menu button:focus-visible:not(:disabled) { background:rgba(184,154,91,.09) !important; color:var(--gb-pdp-gold) !important; outline:none; }
.gb-pdp-select__menu button[aria-selected="true"] { color:var(--gb-pdp-gold) !important; }
.gb-pdp-select__menu small { color:var(--gb-pdp-muted); font:10px var(--gb-pdp-sans); margin-left:8px; letter-spacing:.08em; font-variant-numeric:tabular-nums; }

body.dm-commerce-single.dm-gb-pdp .single_variation_wrap { border-top:0; }
body.dm-commerce-single.dm-gb-pdp .woocommerce-variation-add-to-cart,
body.dm-commerce-single.dm-gb-pdp form.cart .quantity,
body.dm-commerce-single.dm-gb-pdp form.cart .single_add_to_cart_button {
  display:flex; align-items:stretch; gap:12px; margin-top:28px;
}
body.dm-commerce-single.dm-gb-pdp form.cart { display:block; }
body.dm-commerce-single.dm-gb-pdp form.cart .woocommerce-variation-add-to-cart { flex-wrap:wrap; }
body.dm-commerce-single.dm-gb-pdp .quantity { display:inline-flex; }
/* Quantity picker is LIQUID-only (§ hide-qty-non-liquid) — every other
   category shows just the volume/weight variation dropdown. The underlying
   `input.qty` stays in the DOM (value stays the Woo default of 1) so
   add-to-cart keeps submitting a real quantity without this rule touching
   cart logic. !important because wc-add-to-cart-variation.js's own
   found_variation handler sets an inline `display:block` on this wrapper,
   which otherwise beats any plain CSS rule regardless of specificity. */
body.dm-commerce-single.dm-gb-pdp:not(.gb-pdp-cat-liquid) form.cart .quantity { display:none !important; }
body.dm-commerce-single.dm-gb-pdp .quantity .qty {
  width:64px; min-height:64px; border:1px solid var(--gb-pdp-line); background:transparent; color:var(--gb-pdp-cream);
  font-family:var(--gb-pdp-serif); font-size:16px; text-align:center; border-radius:0;
  appearance:none; -webkit-appearance:none; -moz-appearance:textfield;
}
body.dm-commerce-single.dm-gb-pdp .quantity .qty:focus,
body.dm-commerce-single.dm-gb-pdp .quantity .qty:focus-visible { outline:1px solid var(--gb-pdp-gold) !important; outline-offset:-1px; border-color:var(--gb-pdp-line) !important; }
body.dm-commerce-single.dm-gb-pdp .single_add_to_cart_button,
body.dm-commerce-single.dm-gb-pdp .single_add_to_cart_button:focus,
body.dm-commerce-single.dm-gb-pdp .single_add_to_cart_button:active,
body.dm-commerce-single.dm-gb-pdp button.single_add_to_cart_button.disabled {
  flex:1 1 auto; min-height:64px; border:1px solid var(--gb-pdp-gold) !important; border-radius:0;
  background:var(--gb-pdp-gold) !important; color:var(--gb-pdp-bg) !important; display:flex; justify-content:center; align-items:center;
  gap:10px; padding:0 22px; font-weight:700; letter-spacing:.15em; cursor:pointer; box-shadow:none !important;
  transition:background 500ms var(--gb-pdp-ease), color 500ms var(--gb-pdp-ease), opacity 500ms var(--gb-pdp-ease);
}
body.dm-commerce-single.dm-gb-pdp .single_add_to_cart_button:hover:not(:disabled),
body.dm-commerce-single.dm-gb-pdp .single_add_to_cart_button:focus-visible {
  background:transparent !important; color:var(--gb-pdp-cream) !important; outline:none;
}
body.dm-commerce-single.dm-gb-pdp .single_add_to_cart_button.disabled,
body.dm-commerce-single.dm-gb-pdp .single_add_to_cart_button[disabled] { opacity:.4; cursor:not-allowed; }
body.dm-commerce-single.dm-gb-pdp .single_add_to_cart_button::after { content:"→"; }
body.dm-commerce-single.dm-gb-pdp p.stock.out-of-stock {
  margin-top:16px; color:var(--gb-pdp-muted); font-size:12px; letter-spacing:.06em; background:none; padding:0; border:0;
}

.gb-pdp-notes {
  display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px 0; margin-top:24px;
  border-top:1px solid var(--gb-pdp-line); border-bottom:1px solid var(--gb-pdp-line);
}
.gb-pdp-notes div { display:flex; flex-direction:column; gap:6px; }
.gb-pdp-notes span { color:var(--gb-pdp-muted); font-size:8px; letter-spacing:.16em; }
.gb-pdp-notes strong {
  font:400 12px var(--gb-pdp-serif); transition:opacity 450ms var(--gb-pdp-ease);
}

/* ---------- dossier (row 3, spans both columns) ---------- */
.gb-pdp-dossier { grid-column:1 / -1; grid-row:3; min-width:0; border-top:1px solid var(--gb-pdp-gold); margin-top:60px; }
.gb-pdp-dossier article {
  display:grid; grid-template-columns:180px minmax(0,1fr); gap:54px; padding:66px 0; border-bottom:1px solid var(--gb-pdp-line);
}
.gb-pdp-dossier article > div { min-width:0; }
.gb-pdp-dossier article > span { color:var(--gb-pdp-gold); font-size:10px; letter-spacing:.2em; }
/* Bare <h2> falls through to Astra's unscoped global heading rule
   (--ast-global-color-2 navy, applied via `body, h1, h2, ... {}`) — same
   leak already defeated on MEMBER/DASHBOARD/VOICE by giving the element a
   class and an explicit color. */
.gb-pdp-dossier-title { margin:0 0 24px; font:400 40px var(--gb-pdp-serif); color:var(--gb-pdp-cream); }
.gb-pdp-dossier p { color:var(--gb-pdp-muted); line-height:1.9; max-width:720px; margin:0 0 1em; }
.gb-pdp-dossier dl { margin:0; max-width:800px; }
.gb-pdp-dossier dl div { display:grid; grid-template-columns:1fr auto; padding:16px 0; border-top:1px solid var(--gb-pdp-line); gap:24px; }
.gb-pdp-dossier dt { color:var(--gb-pdp-muted); font-size:10px; letter-spacing:.14em; }
.gb-pdp-dossier dd { margin:0; font-family:var(--gb-pdp-serif); text-align:right; }
.gb-pdp-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:2px; }
.gb-pdp-gallery-grid img { width:100%; aspect-ratio:1/1; object-fit:cover; filter:saturate(.86) brightness(.92); }
.gb-pdp-voice-head { display:flex; align-items:end; justify-content:space-between; }
.gb-pdp-voice-score { margin:0; font:400 40px var(--gb-pdp-serif); color:var(--gb-pdp-cream); }
.gb-pdp-voice-head a,
.gb-pdp-voice-head a:focus,
.gb-pdp-voice-head a:active,
.gb-pdp-voice-head a:visited { color:var(--gb-pdp-cream) !important; font-size:10px; text-decoration:none; border-bottom:1px solid var(--gb-pdp-gold); padding-bottom:4px; transition:color 450ms var(--gb-pdp-ease); }
.gb-pdp-voice-head a:hover, .gb-pdp-voice-head a:focus-visible { color:var(--gb-pdp-gold) !important; outline:none; }
.gb-pdp-dossier blockquote { margin:34px 0 12px; font:400 32px/1.3 var(--gb-pdp-serif); color:var(--gb-pdp-cream); overflow-wrap:break-word; }
.gb-pdp-voice-stars { margin:0; color:var(--gb-pdp-gold) !important; letter-spacing:.1em; }

/* ---------- related (row 4) ---------- */
.gb-pdp-related { grid-column:1 / -1; grid-row:4; min-width:0; padding:64px 0 0; }
.gb-pdp-related__kicker { color:var(--gb-pdp-gold); font-size:10px; letter-spacing:.2em; margin:0 0 28px; }
/* auto-fit + minmax collapses any track with no card to 0 width, so 1-2 real
   related products (a genuinely small wc_get_related_products() result, not
   a display bug) sit at natural card width instead of stretching across a
   4-column void meant for a full row. */
.gb-pdp-related__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,299px)); gap:32px; width:fit-content; max-width:100%; margin-inline:auto; }
.gb-pdp-related__card,
.gb-pdp-related__card:focus,
.gb-pdp-related__card:active,
.gb-pdp-related__card:visited { display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--gb-pdp-cream) !important; }
.gb-pdp-related__art { position:relative; display:block; aspect-ratio:1/1; background:#080807; overflow:hidden; }
.gb-pdp-related__art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.86) brightness(.92); transition:opacity 700ms var(--gb-pdp-ease); }
.gb-pdp-related__secondary { opacity:0; }
.gb-pdp-related__card:hover .gb-pdp-related__secondary,
.gb-pdp-related__card:focus-visible .gb-pdp-related__secondary { opacity:1; }
.gb-pdp-related__name { font-family:var(--gb-pdp-serif); font-size:16px; transition:color 450ms var(--gb-pdp-ease); }
.gb-pdp-related__card:hover .gb-pdp-related__name,
.gb-pdp-related__card:focus-visible .gb-pdp-related__name { color:var(--gb-pdp-gold) !important; outline:none; }
.gb-pdp-related__price { color:var(--gb-pdp-muted); font-size:12px; }
.gb-pdp-related__price ins { text-decoration:none; color:var(--gb-pdp-cream); }
.gb-pdp-related__card:focus-visible { outline:1px solid var(--gb-pdp-gold); outline-offset:4px; }

/* ---------- mobile ---------- */
.gb-pdp-mobile-buybar { display:none; }
@media(max-width:900px){
  body.dm-commerce-single.dm-gb-pdp div.product {
    padding:24px 20px 130px; grid-template-columns:1fr; row-gap:0;
  }
  body.dm-commerce-single.dm-gb-pdp .gb-pdp-crumb { grid-row:1; }
  body.dm-commerce-single.dm-gb-pdp .gb-pdp-media { grid-column:1; grid-row:2; position:static; padding-top:24px; }
  body.dm-commerce-single.dm-gb-pdp .summary.entry-summary { grid-column:1; grid-row:3; position:static; padding-top:24px; }
  body.dm-commerce-single.dm-gb-pdp .summary.entry-summary .product_title { font-size:48px; }
  .gb-pdp-dossier { grid-row:4; }
  .gb-pdp-dossier article { grid-template-columns:1fr; gap:22px; padding:48px 0; }
  .gb-pdp-dossier-title,
  .gb-pdp-voice-score { font-size:30px; }
  .gb-pdp-dossier blockquote { font-size:28px; }
  .gb-pdp-related { grid-row:5; }
  .gb-pdp-related__grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px; }
  .gb-pdp-mobile-buybar {
    position:fixed; display:flex; z-index:60; left:0; right:0; bottom:0; min-height:72px;
    background:rgba(11,11,10,.97); border-top:1px solid rgba(184,154,91,.55); padding:10px 16px;
    align-items:center; justify-content:space-between; gap:12px;
  }
  .gb-pdp-mobile-buybar strong { font:400 18px var(--gb-pdp-serif); }
  .gb-pdp-mobile-buybar button,
  .gb-pdp-mobile-buybar button:focus,
  .gb-pdp-mobile-buybar button:active {
    border:0; border-radius:0; background:var(--gb-pdp-gold) !important; color:var(--gb-pdp-bg) !important; min-height:48px;
    padding:0 18px; font-weight:700; letter-spacing:.1em; cursor:pointer; box-shadow:none !important;
  }
  .gb-pdp-mobile-buybar button:focus-visible { outline:1px solid var(--gb-pdp-cream); outline-offset:2px; }
}
/* On a coarse-pointer phone the Green Badger app shell's bottom nav (app-shell.css,
   .dm-app-nav) is ALSO position:fixed;bottom:0 — this buybar's own bottom:0 above
   sat directly underneath it (same z-index-losing fight app-shell.js's Order Flow
   cart bar already solved with this exact calc()). Scoped to pointer:coarse so a
   merely-narrow desktop window — no app shell, no nav to clear — is unaffected. */
@media (pointer: coarse) and (max-width: 900px) {
  .gb-pdp-mobile-buybar {
    bottom: calc(var(--dm-appnav-h, 56px) + var(--dm-safe-bottom, 0px));
  }
}
@media(prefers-reduced-motion:reduce){ body.dm-commerce-single.dm-gb-pdp *,
  body.dm-commerce-single.dm-gb-pdp *::before,
  body.dm-commerce-single.dm-gb-pdp *::after { transition:none !important; } }

/* Keep the two verified Composer seams authoritative at every breakpoint. */
body.dm-commerce-single.dm-gb-pdp div.product > [data-dm-product-anchor="before_product"] { grid-row:1; }
body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-crumb { grid-row:2; }
body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-media,
body.dm-commerce-single.dm-gb-pdp div.product > .summary.entry-summary { grid-row:3; }
body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-dossier { grid-row:4; }
body.dm-commerce-single.dm-gb-pdp div.product > .gb-pdp-related { grid-row:5; }
body.dm-commerce-single.dm-gb-pdp div.product > [data-dm-product-anchor="after_product"] { grid-row:6; }

/* === Duck Mark Studio: real PDP SYSTEM section controls (V7) === */
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="crumb"]{
  background:var(--gb-pdp-crumb-background,transparent);
  color:var(--gb-pdp-crumb-text-color,var(--gb-pdp-muted));
  border-color:var(--gb-pdp-crumb-border-color,var(--gb-pdp-line));
  border-width:var(--gb-pdp-crumb-border-width,1px);
  border-radius:var(--gb-pdp-crumb-radius,0);
  padding-top:var(--gb-pdp-crumb-padding-top,0);
  padding-bottom:var(--gb-pdp-crumb-padding-bottom,22px);
  gap:var(--gb-pdp-crumb-gap,24px);
  font-size:var(--gb-pdp-crumb-title-size,10px);
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-crumb--left{justify-content:flex-start;}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="crumb"] a:hover{color:var(--gb-pdp-crumb-accent-color,var(--gb-pdp-gold))!important;}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="media"]{
  background:var(--gb-pdp-media-background,transparent);
  color:var(--gb-pdp-media-text-color,var(--gb-pdp-cream));
  border:var(--gb-pdp-media-border-width,0) solid var(--gb-pdp-media-border-color,transparent);
  border-radius:var(--gb-pdp-media-radius,0);
  padding-top:var(--gb-pdp-media-padding-top,52px);
  padding-bottom:var(--gb-pdp-media-padding-bottom,0);
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media--contain img{object-fit:contain!important;}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="media"] .gb-pdp-sale-badge{color:var(--gb-pdp-media-accent-color,var(--gb-pdp-gold));}
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary[data-gb-product-system-part="purchase"]{
  background:var(--gb-pdp-purchase-background,transparent);
  color:var(--gb-pdp-purchase-text-color,var(--gb-pdp-cream));
  border:var(--gb-pdp-purchase-border-width,0) solid var(--gb-pdp-purchase-border-color,transparent);
  border-radius:var(--gb-pdp-purchase-radius,0);
  padding-top:var(--gb-pdp-purchase-padding-top,82px);
  padding-bottom:var(--gb-pdp-purchase-padding-bottom,0);
}
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary[data-gb-product-system-part="purchase"] .product_title{font-size:var(--gb-pdp-purchase-title-size,clamp(48px,4.6vw,76px));}
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary[data-gb-product-system-part="purchase"] .gb-pdp-eyebrow,
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary[data-gb-product-system-part="purchase"] .gb-pdp-price__pct{color:var(--gb-pdp-purchase-accent-color,var(--gb-pdp-gold));}
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary[data-gb-product-system-part="purchase"] .woocommerce-product-details__short-description{color:var(--gb-pdp-purchase-muted-color,var(--gb-pdp-muted));}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-purchase-part--compact .woocommerce-product-details__short-description{margin-bottom:20px;}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="dossier"]{
  background:var(--gb-pdp-dossier-background,transparent);
  color:var(--gb-pdp-dossier-text-color,var(--gb-pdp-cream));
  border:var(--gb-pdp-dossier-border-width,0) solid var(--gb-pdp-dossier-border-color,transparent);
  border-radius:var(--gb-pdp-dossier-radius,0);
  padding-top:var(--gb-pdp-dossier-padding-top,0);
  padding-bottom:var(--gb-pdp-dossier-padding-bottom,0);
  gap:var(--gb-pdp-dossier-gap,0);
}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="dossier"] .gb-pdp-dossier-title{font-size:var(--gb-pdp-dossier-title-size,inherit);color:var(--gb-pdp-dossier-accent-color,var(--gb-pdp-cream));}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-dossier--stacked article{grid-template-columns:1fr!important;}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="related"]{
  background:var(--gb-pdp-related-background,transparent);
  color:var(--gb-pdp-related-text-color,var(--gb-pdp-cream));
  border:var(--gb-pdp-related-border-width,0) solid var(--gb-pdp-related-border-color,transparent);
  border-radius:var(--gb-pdp-related-radius,0);
  padding-top:var(--gb-pdp-related-padding-top,0);
  padding-bottom:var(--gb-pdp-related-padding-bottom,0);
}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="related"] .gb-pdp-related__kicker{color:var(--gb-pdp-related-accent-color,var(--gb-pdp-gold));font-size:var(--gb-pdp-related-title-size,inherit);}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-related--cols-2 .gb-pdp-related__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-related--cols-3 .gb-pdp-related__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-related--cols-4 .gb-pdp-related__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:760px){body.dm-commerce-single.dm-gb-pdp [class*="gb-pdp-related--cols-"] .gb-pdp-related__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* V7 real-section variable completion: every Inspector control has a live target. */
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="crumb"] > span{
  color:var(--gb-pdp-crumb-muted-color,var(--gb-pdp-muted));
}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="media"] .gb-pdp-media__sticky{
  gap:var(--gb-pdp-media-gap,0);
}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="media"] .gb-pdp-sale-badge{
  font-size:var(--gb-pdp-media-title-size,10px);
}
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary[data-gb-product-system-part="purchase"]{
  row-gap:var(--gb-pdp-purchase-gap,28px);
}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="dossier"] :is(p,dd,blockquote){
  color:var(--gb-pdp-dossier-muted-color,var(--gb-pdp-muted));
}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="related"] .gb-pdp-related__grid{
  gap:var(--gb-pdp-related-gap,32px);
}
body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="related"] .gb-pdp-related__price{
  color:var(--gb-pdp-related-muted-color,var(--gb-pdp-muted));
}