/* ============================================================
   DICE PEPTIDES — SINGLE PRODUCT (loaded only on is_product()).
   Design System v1.0. Arrangement-only: every value is a
   v1.0 token. Shared primitives (buttons, badges, fields, tabs,
   product-card, coa-card, trust-strip, section-header, breadcrumb)
   come from base.css and are NOT redefined here.
   ============================================================ */

/* Jump-nav offset so in-page anchors clear the sticky navbar + product-nav */
[id] { scroll-margin-top: calc(var(--nav-h) + 60px); }

/* Hero: gallery 51% / buy box 49% */
.product-hero { display: grid; grid-template-columns: 51fr 49fr; gap: var(--sp-12); align-items: start; padding-top: var(--sp-6); padding-bottom: var(--sp-16); }

/* Gallery — vertical thumbs + large render with premium lighting & glass sheen */
.gallery { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-4); position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
.gallery__thumbs { display: flex; flex-direction: column; gap: var(--sp-3); }
.gallery__thumb { width: 76px; height: 76px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--stage); overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast); }
.gallery__thumb img { width: 90%; height: 90%; object-fit: contain; -webkit-mask-image: radial-gradient(78% 82% at 50% 48%, #000 68%, transparent 100%); mask-image: radial-gradient(78% 82% at 50% 48%, #000 68%, transparent 100%); }
.gallery__thumb.is-active,
.gallery__thumb:hover { border-color: var(--accent); }
.gallery__main { position: relative; aspect-ratio: 1; border-radius: var(--radius-xl); overflow: hidden; background: var(--stage); box-shadow: var(--shadow-card); }
.gallery__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.gallery__hero { width: 100%; height: 100%; object-fit: cover; }
.gallery__main::before { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255,255,255,0.5), transparent 40%); pointer-events: none; z-index: 1; }
.gallery__badge { position: absolute; top: 16px; left: 16px; }

/* Buy box — the conversion core; sticky on desktop */
.buy-box { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
.buy-box__eyebrow { display: block; margin-bottom: var(--sp-3); }
.buy-box__title { color: var(--text-primary); font-size: clamp(30px,3.4vw,42px); letter-spacing: -0.03em; line-height: 1.08; }
.buy-box__rating { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: 13px; color: var(--text-secondary); }
.buy-box__rating .stars { color: var(--warning); font-size: 14px; letter-spacing: 1px; }
.buy-box__rating a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.buy-box__rating a:hover { color: var(--accent); }
/* Rating shown directly under the price (links to the reviews section). */
.buy-box__rating--price { width: fit-content; margin-top: var(--sp-2); text-decoration: none; }
.buy-box__rating--price .buy-box__rating-count { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.buy-box__rating--price:hover .buy-box__rating-count { color: var(--accent); }
.buy-box__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: 13px; color: var(--text-secondary); }
.buy-box__price { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: var(--sp-5); }
.buy-box__price .amount { font-size: 34px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.buy-box__price .amount del { margin-right: var(--sp-2); }
/* wc_price() nests its own <span class="amount"> inside the <del>, which would otherwise
   re-match the 34px accent rule above and render the struck price full-size and blue —
   indistinguishable from the sale price. The second selector (0,3,1) outranks it. Covers
   both markup shapes: the server render (nested span) and dice.js's re-render (bare text). */
.buy-box__price .amount del,
.buy-box__price .amount del .amount { color: var(--text-muted); font-weight: 600; font-size: 22px; }
.buy-box__price .amount ins { text-decoration: none; background: transparent; }  /* sale price = accent blue, same size/weight, no underline (matches .product-card__price) */
.buy-box__price .unit { font-size: 13px; color: var(--text-muted); }
.buy-box__rule { border: none; border-top: 1px solid var(--border-subtle); margin: var(--sp-6) 0; }
.buy-box__label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-3); }

/* Bundle selector (DS v1.0 component, verbatim) */
.bundle { display: flex; flex-direction: column; gap: var(--sp-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.bundle-opt { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.bundle-opt:hover { border-color: var(--accent); }
.bundle-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.bundle-opt:focus-within { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.bundle-opt__left { display: flex; align-items: center; gap: 10px; }
.bundle-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-default); display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast); flex-shrink: 0; }
.bundle-opt:has(input:checked) .bundle-radio { border-color: var(--accent); }
.bundle-opt:has(input:checked) .bundle-radio::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: block; }
.bundle-opt__left > span:not(.bundle-radio) { display: inline-flex; align-items: center; gap: var(--sp-3); }
.bundle-label { font-size: 14px; font-weight: 500; color: var(--text-primary); display: inline-flex; align-items: center; gap: var(--sp-3); }
.bundle-sub { font-size: 11px; color: var(--text-muted); }
.bundle-save { font-size: 11px; font-weight: 600; color: var(--success); }
.bundle-price { font-size: 15px; font-weight: 700; color: var(--text-primary); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.bundle-price del { font-size: 12px; font-weight: 500; color: var(--text-muted); }  /* original bundle total, struck above the pack price */
.bundle-price ins { text-decoration: none; background: transparent; }
.bundle-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; background: var(--accent-dim); color: var(--accent); border-radius: var(--radius-full); }

/* Optional "Recommended / Most Popular / Best Value" pill on ONE strength or
   quantity option (per-product config; see dice_variant_recommendation()).
   Reuses the .bundle-badge pill above verbatim — it only needs to break onto
   its own line under the option label so it never squeezes the price. */
.bundle-opt__left > span:not(.bundle-radio) { flex-wrap: wrap; }
/* .bundle-flag is the line: flex-basis:100% always exceeds the space left on the
   label row, so the badge drops beneath the option name. The pill inside hugs
   its own text (clamping the flag itself would cancel the line break). */
.bundle-flag { flex-basis: 100%; display: flex; margin-top: 2px; }
.bundle-flag .bundle-badge { letter-spacing: 0.04em; text-transform: uppercase; }

/* Strength selector — the SAME .bundle component, laid out as a compact row of
   equal cards (2-up on phones, more per row when there's width). Inherits every
   token from the rules above: typography, radius, radio, hover and selected
   state, so it reads as one continuous purchasing interface. */
.bundle--strength { flex-direction: row; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.bundle--strength .bundle-opt { flex: 1 1 calc(50% - var(--sp-2) / 2); min-width: 116px; justify-content: flex-start; }
/* .bundle-opt is display:flex, which would beat the hidden attribute — quantity
   cards belonging to an unselected strength must stay out of the flow. */
.bundle-opt[hidden] { display: none; }

/* Quantity + Add to cart */
.buy-box__buy { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-elevated); overflow: hidden; flex-shrink: 0; }
.qty button { width: 44px; height: 48px; background: none; border: none; color: var(--text-primary); font-size: 18px; line-height: 1; transition: color var(--dur-fast); }
.qty button:hover { color: var(--accent); }
.qty input { width: 46px; height: 48px; text-align: center; background: none; border: none; border-inline: 1px solid var(--border-default); color: var(--text-primary); font-size: 15px; font-weight: 600; }
.buy-box__buy .btn { flex: 1; }
.buy-box__buy .btn.loading { opacity: 0.7; pointer-events: none; }
.buy-box__total { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--bg-elevated); border-radius: var(--radius-md); }
.buy-box__total .label { font-size: 14px; color: var(--text-secondary); }
.buy-box__total .amount { font-size: 22px; font-weight: 700; color: var(--accent); }

/* Trust ticks + assurances */
.buy-box__ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); font-size: 13px; color: var(--text-secondary); }
.buy-box__ticks li { display: inline-flex; align-items: center; gap: 6px; }
.buy-box__ticks svg { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }
.buy-box__coa { margin-top: var(--sp-5); }
.assurances { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border-subtle); }
.assurance { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: 13px; color: var(--text-secondary); }
.assurance svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.buy-box__legal { margin-top: var(--sp-6); font-size: 12px; color: var(--text-muted); }

/* Laboratory Research Material card — replaces the plain research-use disclaimer
   in the buy box. Neutral/premium (COA-card quality); no warning colors. */
.research-material-card { margin-top: var(--sp-6); display: flex; gap: 14px; align-items: flex-start; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px; padding: 22px; box-shadow: 0 1px 2px rgba(15,26,51,0.05), 0 6px 20px rgba(15,26,51,0.06); }
.research-material-card__icon { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(30,72,196,0.08); color: #1E48C4; }
.research-material-card__icon svg { width: 22px; height: 22px; }
.research-material-card__body { min-width: 0; }
.research-material-card__title { font-size: 17px; line-height: 1.35; font-weight: 600; color: #0F1A33; letter-spacing: -0.01em; margin: 0 0 6px; }
.research-material-card__text { font-size: 14.5px; line-height: 1.55; color: #6B7280; margin: 0; }
.research-material-card__note { color: #374151; font-weight: 600; }
@media (max-width: 520px) { .research-material-card { padding: 20px; } }

/* Sticky in-page jump nav */
.product-nav { position: sticky; top: var(--nav-h); z-index: 30; background: rgba(245,247,251,0.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); }
.product-nav__list { display: flex; gap: 4px; padding-block: var(--sp-3); overflow-x: auto; scrollbar-width: none; }
.product-nav__list::-webkit-scrollbar { display: none; }
.product-nav__list .tab { white-space: nowrap; }
.product-nav__list .tab[aria-current="page"] { background: var(--bg-overlay); color: var(--text-primary); }

/* Info sections */
.prose { max-width: 720px; }
.prose p { color: var(--text-secondary); margin-bottom: var(--sp-4); line-height: 1.75; }
.prose p:last-child { margin-bottom: 0; }

/* COA feature — the strongest trust element on the page */
.coa-feature { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-10); align-items: center; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--sp-10); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.coa-feature::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, var(--accent-dim), transparent 60%); pointer-events: none; }
.coa-feature__doc { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-default); background: var(--bg-elevated); aspect-ratio: 3/4; }
.coa-feature__doc img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.coa-feature__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.coa-feature__purity { font-size: 60px; font-weight: 800; color: var(--success); letter-spacing: -0.03em; line-height: 0.9; }
.coa-feature__purity small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--sp-2); }
.coa-bar { height: 4px; background: var(--border-default); border-radius: var(--radius-full); overflow: hidden; margin: var(--sp-5) 0 var(--sp-6); }
.coa-bar__fill { height: 100%; background: var(--success); border-radius: var(--radius-full); }
.coa-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.coa-stat dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-1); }
.coa-stat dd { font-size: 15px; color: var(--text-primary); font-weight: 600; }
.coa-feature__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.coa-feature__actions .btn { flex: 1 1 0; min-width: 160px; }

/* Specifications — Apple tech-spec layout */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-16); }
.spec-group { display: contents; }
.spec-group__title { grid-column: 1/-1; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); padding: var(--sp-6) 0 var(--sp-2); border-bottom: 1px solid var(--border-default); }
.spec-row { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-subtle); margin: 0; }
.spec-row dt { font-size: 14px; color: var(--text-muted); }
.spec-row dd { font-size: 15px; color: var(--text-primary); }

/* Reviews */
.reviews__summary { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-12); align-items: center; padding-bottom: var(--sp-8); margin-bottom: var(--sp-8); border-bottom: 1px solid var(--border-subtle); }
.reviews__avg { text-align: center; min-width: 160px; }
.reviews__score { font-size: 64px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); }
.reviews__stars { color: var(--warning); font-size: 18px; letter-spacing: 2px; margin-top: var(--sp-2); }
.reviews__count { margin-top: var(--sp-2); font-size: 13px; color: var(--text-muted); }
.reviews__bars { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 440px; }
.rbar { display: flex; align-items: center; gap: var(--sp-3); font-size: 12px; color: var(--text-muted); }
.rbar__num { width: 28px; text-align: right; }
.rbar__track { flex: 1; height: 6px; background: var(--bg-elevated); border-radius: var(--radius-full); overflow: hidden; }
.rbar__fill { height: 100%; background: var(--warning); border-radius: var(--radius-full); }
.review-list { display: grid; gap: var(--sp-4); }
.review { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); }
.review__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.review__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--accent); flex-shrink: 0; }
.review__name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.review__verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--success); margin-top: 2px; }
.review__verified svg { width: 12px; height: 12px; }
.review__meta { margin-left: auto; text-align: right; }
.review__stars { color: var(--warning); font-size: 13px; letter-spacing: 1px; }
.review__date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.review__title { font-weight: 600; font-size: 14px; color: var(--text-primary); margin-bottom: var(--sp-1); }
.review p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.reviews__cta { margin-top: var(--sp-8); text-align: center; }
.review-form { max-width: 720px; margin-top: var(--sp-8); }
.review-form .field { margin-bottom: var(--sp-3); }

/* Sticky mobile Add-to-Cart bar */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--border-subtle); box-shadow: 0 -4px 20px rgba(15,26,51,0.08); }
.buybar__name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.buybar__price { font-size: 15px; font-weight: 700; color: var(--accent); }
.buybar .btn { margin-left: auto; }

/* Responsive */
/* Phone-only (max 600px): show the full certificate - no crop. Desktop & tablet unchanged. */
@media (max-width:600px) {
  .coa-feature__doc { aspect-ratio: auto; }
  .coa-feature__doc img { height: auto; object-fit: contain; }
}

@media (max-width:960px) {
  .product-hero { grid-template-columns: 1fr; gap: var(--sp-8); }
  .gallery { position: static; grid-template-columns: 1fr; gap: var(--sp-3); }
  .gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; padding-bottom: var(--sp-1); }
  .buy-box { position: static; }
  .coa-feature { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6); }
  .coa-feature__doc { max-width: 320px; margin-inline: auto; }
  .specs { grid-template-columns: 1fr; gap: 0; }
  .reviews__summary { grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; }
  .reviews__bars { margin-inline: auto; }
  body { padding-bottom: 78px; }
  .buybar { display: flex; }
}
@media (max-width:600px) {
  .coa-stats { grid-template-columns: 1fr; }
  .assurances { grid-template-columns: 1fr; }
  .buy-box__buy { flex-wrap: wrap; }

  /* ---- One trust section between the subtotal and Research Overview ------
     The buy box carried FOUR trust blocks in a row (ticks, COA button,
     assurances, research-material card) plus the shared trust strip below the
     hero — five in total, largely repeating each other, all of it stacked ahead
     of the product copy on a phone. Everything except `.assurances` is hidden
     here, leaving: subtotal → 4-item assurance list → Research Overview.

     Why CSS and not a `wp_is_mobile()` template branch: this site sits behind an
     edge cache that keys on path only, so ONE cached HTML response is served to
     phones and desktops alike — a server-side viewport branch would leak
     whichever variant was cached first to the wrong devices. A media query is
     the only cache-safe way to make this mobile-only.

     Nothing is left behind: `.buy-box` is a plain block (no flex `gap`), so each
     of these carries its OWN margin-top and `display:none` removes the box and
     its spacing together. The kept `.assurances` still owns its divider and
     spacing, unchanged. Desktop cannot be affected — product.css is enqueued
     only on is_product() and this is inside a phone media query. */
  .buy-box__ticks,                 /* "HPLC-verified · 99.9%" + "COA included" */
  .buy-box__coa,                   /* "View Certificate of Analysis →" button  */
  .research-material-card,         /* "Laboratory Research Material" card      */
  .trust-strip {                   /* HPLC Tested / Batch COAs / U.S. Stocked  */
    display: none;
  }
  /* .trust-strip is a SHARED partial (homepage, shop archive, landing). Hiding
     it here is safe only because product.css never loads on those pages — do not
     move this rule into base.css. The COA content itself is untouched: the Lab
     Testing section and its "View COA" link still render, and the jump nav still
     links to them. */

  /* ---- Breadcrumb: hidden on phones -------------------------------------
     "Home / GLP / GLP-3 RT" cost ~43px (19px of text over the shared
     component's 24px padding-top) directly above the gallery, pushing the buy
     box further from the fold. The whole box goes, padding included, so no
     empty gap is left behind; .product-hero keeps its own padding-top, so the
     gallery does not jam against the notice above it.
     `display: none` rather than deleting the markup: the trail stays in the
     DOM for crawlers, and desktop is provably untouched because product.css is
     enqueued only on is_product() and this rule is inside a phone media query.
     The .breadcrumb component in base.css is shared with pages and the shop
     archive and is deliberately NOT modified. */
  .breadcrumb { display: none; }
}