/* ============================================================
   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; }
}

/* Commerce has no overlapping hero. The header is in document flow, so
   its height is already accounted for before the product grid begins. */
body.dm-commerce-single.dm-gb-pdp.dm-header-hero-overlap-enabled div.product {
  margin-top: 0;
}
/* ---------- 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; }
/* Row geometry only. Ground, hairline, label colour, tracking, the
   gold sweep and the arrow all come from the GREENBADGER FRONTEND
   ACTION AUTHORITY in app-shell.css — this file used to restate them
   with !important, which is how the PDP ended up with a permanently
   gold CTA while the same button elsewhere had already moved to
   outline-until-touched. What stays here is what is genuinely about
   THIS layout: the CTA shares a flex row with the quantity box, so it
   needs to grow into the space the quantity box does not use. */
body.dm-commerce-single.dm-gb-pdp .single_add_to_cart_button {
  flex:1 1 auto;
  cursor:pointer;
}
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] { cursor:not-allowed; }
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); }
  /* Ground and label come from the action authority (app-shell.css),
     which also draws the sweep behind this button. The gold slab and
     its !important pair used to live here, and they are the reason the
     sticky bar was the last permanently-gold control on the site. */
  .gb-pdp-mobile-buybar button {
    border-radius:0; min-height:48px;
    padding:0 18px; font-weight:700; 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));
}

/* ============================================================
   MOBILE PDP LAYOUT REPAIR + CTA REFINEMENT
   Appended last on purpose: the "Keep the two verified Composer
   seams authoritative at every breakpoint" block above re-pins
   BOTH .gb-pdp-media and .summary.entry-summary to grid-row 3
   with no media query. That is correct for the two-column desktop
   grid (row 3 / col 1 and row 3 / col 2) but on the single-column
   mobile grid it drops both into the SAME cell, so the summary
   (title, price, form) rendered on top of the gallery and the
   gallery's own box height collapsed underneath it.
   ============================================================ */

/* ---- gallery: contain the flexslider filmstrip (all breakpoints) ----
   .woocommerce-product-gallery__wrapper carries an inline width:400%
   from flexslider and its slides are floats, so the wrapper had been
   given aspect-ratio:1/1 further up to stop it collapsing to zero.
   At 400% width that computes to a 4x-viewport-wide SQUARE — 1164px
   tall on a 390px phone, 2295px on desktop — a phantom band that
   pushed everything below it and let slide 2 spill sideways over the
   summary. The wrapper already has overflow:hidden, which makes it a
   block formatting context, so it contains its own floats and sizes
   to the real slide height once the aspect-ratio is released. */
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .woocommerce-product-gallery__wrapper {
  aspect-ratio: auto;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .woocommerce-product-gallery {
  overflow: hidden;
}

@media (max-width: 900px) {
  /* ---- 1. header offset is a DESKTOP-only compensation ----
     The 106px above cancels duck-mark-header-control.css's hero-overlap
     pull-up. On mobile the app-bar is 56px and no pull-up is applied, so
     that 106px stayed as a raw margin — and because every ancestor
     between div.product and .ast-container has zero padding/border it
     margin-collapsed upward and rendered as an empty band directly under
     the header. Measured live: header bottom 102px, .ast-container 208px. */
  body.dm-commerce-single.dm-gb-pdp.dm-header-hero-overlap-enabled div.product {
    margin-top: 0;
  }

  /* ---- 2. one row per part, document order, single column ---- */
  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 { 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; }

  /* Sticky is a two-column desktop affordance; in one column it has no
     sibling to track and only fights the scroll. Already reset above at
     :900px, restated here so the media block stays in normal flow. */
  body.dm-commerce-single.dm-gb-pdp .gb-pdp-media__sticky { position: static; top: auto; }
}

/* ---- 3. zoom trigger sits inside the image, never outside it ---- */
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  left: auto;
  bottom: auto;
  z-index: 9;
  margin: 0;
}

/* ---- 4. ADD TO CART — editorial, not decorated ----
   Astra's customizer inline sheet sets its own button font-size,
   weight, letter-spacing and padding on every `button`, which is why
   the CTA drifted off the pack's typography. Restated here with the
   same !important convention the rest of this file uses for Astra
   leaks. No gradient, no glow, no shadow, no radius. */
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 button.single_add_to_cart_button.disabled {
  /* Only the Astra leaks. Astra's customizer inline sheet writes
     font-family, weight, line-height, text-transform and a text-shadow
     onto every `button`, and an inline sheet outranks a file, so these
     five keep their !important. Size, tracking, ground, hairline and
     label colour were here too and are gone: they are the authority's
     job, and holding a second copy of them is what let the PDP drift
     into being the one page with a permanently gold CTA. */
  background-image: none !important;
  font-family: var(--gb-pdp-sans) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}
/* A single hairline arrow is the only ornament. */
/* Arrow lives in the button authority (app-shell.css) so the PDP,
   the cart bar and the checkout all move the same glyph. */
/* Hover is the wipe now (app-shell.css, button authority): a black
   panel slides across from the left under the label. Clearing the
   background to transparent here would have shown the page through
   the wipe instead of the gold beneath it, so only the label colour
   changes and the gold stays put. */
/* Hover, focus and active states, and the gold sweep behind them, are
   the authority's. Nothing is restated here — a second copy would have
   to be kept in step with it, and it never was. */

@media (max-width: 900px) {
  /* The phone sizes for both the in-page CTA and the fixed buybar now
     come from --gb-btn-h / --gb-btn-h-sm in the authority's own
     max-width:600px block. Only the Astra leaks stay. */
  .gb-pdp-mobile-buybar button {
    font-family: var(--gb-pdp-sans);
    font-weight: 600;
    box-shadow: none !important;
  }
}

/* ============================================================
   MOBILE: the [data-gb-product-system-part] token block above
   carries no media query, and its attribute selectors outrank the
   @media(max-width:900px) rules that come BEFORE it. So on a phone
   the two-column desktop values were still in force:

     .gb-pdp-media    padding-top 52px   (mobile rule asked for 24)
     .summary         padding-top 82px   (mobile rule asked for 24)
     .product_title   clamp floor 48px   (mobile rule asked for 48)

   Those paddings exist to align the two desktop columns against
   each other. Stacked in one column they are only dead space —
   measured 111px of it between the thumbnail strip and the eyebrow
   (thumbs end 598, eyebrow starts 709). Restated here as mobile
   tokens rather than patched with negative margins, so the Studio
   can still tune them and the desktop values are untouched.
   ============================================================ */

@media (max-width: 900px) {
  body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="media"] {
    padding-top: var(--gb-pdp-media-padding-top-mobile, 20px);
  }

  body.dm-commerce-single.dm-gb-pdp .summary.entry-summary[data-gb-product-system-part="purchase"] {
    padding-top: var(--gb-pdp-purchase-padding-top-mobile, 22px);
  }

  /* WooCommerce's own grid sheet puts 2em under the gallery; in one
     column that lands on top of the padding above. */
  body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .woocommerce-product-gallery {
    margin-bottom: 18px;
  }

  /* ---- product name ----
     48px was the desktop floor. In a 291px column a name as short as
     【THE RED BOAR】 broke across two lines mid-phrase. The floor now
     tracks the viewport: 7.2vw puts a 15-character name on one line
     from 320px up, while a long name still wraps — on spaces, at the
     word, because break-all shatters English and nowrap just
     overflows. Both are explicitly refused here, including against
     the ≤340px word-breaking guard in app-shell.css that exists for
     Safari's AA page zoom. */
  body.dm-commerce-single.dm-gb-pdp .summary.entry-summary[data-gb-product-system-part="purchase"] .product_title,
  body.dm-commerce-single.dm-gb-pdp .summary.entry-summary .product_title {
    font-size: var(--gb-pdp-purchase-title-size-mobile, clamp(26px, 7.2vw, 38px));
    line-height: 1.14;
    letter-spacing: .005em;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }

  /* The second line stays a step under the name at every width. */
  body.dm-commerce-single.dm-gb-pdp .dm-product-display-subtitle {
    margin: 4px 0 22px;
    font-size: clamp(11px, 3.2vw, 13.5px);
    letter-spacing: .07em;
  }
}

/* Purchase controls share the Home action rhythm. Keep spacing on the row,
 * rather than adding it again to every child inside that row. */
body.dm-commerce-single.dm-gb-pdp form.cart .woocommerce-variation-add-to-cart {
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
body.dm-commerce-single.dm-gb-pdp form.cart .woocommerce-variation-add-to-cart > .quantity,
body.dm-commerce-single.dm-gb-pdp form.cart .woocommerce-variation-add-to-cart > .single_add_to_cart_button {
  margin-top: 0;
}
body.dm-commerce-single.dm-gb-pdp form.cart .single_add_to_cart_button {
  align-items: center;
  min-width: 0;
  line-height: 1.4 !important;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-select__trigger,
body.dm-commerce-single.dm-gb-pdp .gb-pdp-select__menu button {
  font-family: var(--gb-pdp-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  text-shadow: none !important;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-select__trigger:focus-visible,
body.dm-commerce-single.dm-gb-pdp .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--gb-pdp-gold) !important;
  outline-offset: 3px;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media .woocommerce-product-gallery__trigger {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #0f100d;
  border: 1px solid var(--gb-pdp-gold);
}
body.dm-commerce-single.dm-gb-pdp .woocommerce-product-gallery__trigger img.emoji {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .9;
}
body.dm-commerce-single.dm-gb-pdp .woocommerce-product-gallery__trigger:focus-visible {
  outline: 2px solid var(--gb-pdp-gold);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  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-mobile, clamp(32px, 7.2vw, 40px));
  }
  body.dm-commerce-single.dm-gb-pdp .summary.entry-summary > .price {
    font-size: 26px;
  }
}
/* App navigation is visible by viewport, including a narrow desktop browser.
 * Reserve its actual lane for the purchase bar independently of pointer type. */
@media (max-width: 782px) {
  body.dm-commerce-single.dm-gb-pdp.dm-site-shell-enabled .gb-pdp-mobile-buybar {
    bottom: calc(var(--dm-appnav-h, 56px) + var(--dm-safe-bottom, 0px));
    z-index: 901;
  }
}

/* Woo/theme flex gaps otherwise stack with the purchase row's own inset,
 * including the zero-height variation-message block. Keep that block in flow
 * so real availability/error copy can still expand naturally. */
body.dm-commerce-single.dm-gb-pdp div.product .summary.entry-summary form.cart,
body.dm-commerce-single.dm-gb-pdp div.product .summary.entry-summary .single_variation_wrap {
  display: block;
}
body.dm-commerce-single.dm-gb-pdp div.product .summary.entry-summary .single_variation {
  margin: 0;
}
body.dm-commerce-single.dm-gb-pdp div.product form.cart .single_add_to_cart_button {
  margin-bottom: 0;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-select__value {
  font-size: inherit;
  font-weight: 400;
}
@media (max-width: 900px) {
  body.dm-commerce-single.dm-gb-pdp div.product .summary.entry-summary > p.price {
    font-size: 26px !important;
  }
}

/* Keep the complete product name on one line; JS fits the saved type size to its column. */
body.dm-commerce-single.dm-gb-pdp .summary.entry-summary .product_title {
  white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important;
}
/* One magnifier: Woo's emoji must not inherit the full product-image geometry. */
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media a.woocommerce-product-gallery__trigger > span,
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media a.woocommerce-product-gallery__trigger img { display: none !important; }
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media a.woocommerce-product-gallery__trigger::before {
  content: ''; position: absolute; top: 12px; left: 12px; width: 12px; height: 12px;
  border: 1.5px solid currentColor; border-radius: 50%; background: transparent; box-sizing: border-box;
}
body.dm-commerce-single.dm-gb-pdp .gb-pdp-media a.woocommerce-product-gallery__trigger::after {
  content: ''; position: absolute; top: 25px; left: 24px; width: 8px; height: 1.5px;
  background: currentColor; border: 0; border-radius: 0; transform: rotate(45deg); transform-origin: left center;
}

body.dm-commerce-single.dm-gb-pdp [data-gb-product-system-part="media"] .gb-pdp-sale-badge[data-gb-pdp-visible] {
 width:max-content;max-width:calc(100% - 32px);padding:8px 14px;background:#c9b47e;color:#141510;
 border:0;border-radius:0;font-size:12px;font-weight:700;transform:rotate(-3deg);z-index:3;
}