/* PDP — Friendly clay style matching the checkout flow.
   Big bubbly panels, bold Poppins display, soft pillow shadows,
   rounded buttons. Inherits tokens from clay.css. */

.pdp { padding: 32px 0 60px; }

/* Two-column hero */
.pdp-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 36px;
  align-items: stretch;
}

/* LEFT: media — soft clay panel */
.pdp-media-card {
  background: var(--surface);
  border-radius: 32px;
  padding: 22px;
  box-shadow: var(--clay-w);
  display: flex; flex-direction: column; gap: 16px;
}
.pdp-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  transition: opacity .25s ease, transform .25s ease;
}
.pdp-img.img-swap {
  opacity: 0;
  transform: scale(.97);

  background:
    radial-gradient(120% 80% at 50% 0%, rgba(157,39,169,.12), transparent 60%),
    linear-gradient(165deg, var(--pp-tint-2) 0%, var(--surface) 100%);
}
.pdp-img image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pdp-thumbs .thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--pp-tint-2) 0%, var(--surface) 100%);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .18s, transform .15s;
}
.pdp-thumbs .thumb image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdp-thumbs .thumb.active { border-color: var(--pp); }
.pdp-thumbs .thumb:hover { transform: translateY(-2px); }

/* RIGHT: info column with rounded panels */
.pdp-info { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.pdp-crumb {
  font-family: "Montserrat"; font-size: 13px; font-weight: 500;
  color: var(--ink-3); padding: 0 8px 4px;
}
.pdp-crumb a { color: var(--ink-3); }
.pdp-crumb a:hover { color: var(--pp); }
.pdp-crumb strong { color: var(--ink); font-weight: 700; }
.pdp-crumb span { margin: 0 8px; opacity: .4; }

/* Header panel */
.pdp-header-card {
  background: var(--surface);
  border-radius: 28px;
  padding: 32px;
  box-shadow: var(--clay-w);
  display: flex; flex-direction: column; gap: 16px;
  flex: 1;
}
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Poppins"; font-size: 12px; font-weight: 700;
  padding: 7px 14px; border-radius: 999px;
}
.pill-badge.pp { background: var(--pp-tint); color: var(--pp); }
.pill-badge.gold { background: #FBF1D9; color: #7C5A12; }
.pill-badge.line { background: transparent; color: var(--ink-2); border: 1.5px solid var(--line); }

.pdp-title {
  font-family: "Poppins"; font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(48px, 6vw, 72px); line-height: 0.98;
  color: var(--ink);
}
.pdp-title em { font-style: normal; color: var(--pp); }
.pdp-sub {
  font-family: "Poppins"; font-weight: 600; font-size: 18px;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.pdp-blurb {
  font-size: 15.5px; line-height: 1.65; color: var(--ink-2);
  font-weight: 400;
  max-width: 56ch;
}
.pdp-disclaimer {
  font-family: "Montserrat"; font-size: 12px; line-height: 1.55;
  font-weight: 500; color: var(--ink-3);
  background: var(--bg);
  border-left: 3px solid var(--pp);
  border-radius: 8px;
  padding: 12px 14px;
  letter-spacing: 0.005em;
}
.pdp-disclaimer strong {
  font-family: "Poppins"; font-weight: 700; color: var(--pp);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px;
  margin-right: 4px;
}

/* Quick spec mini-tiles */
.pdp-quickspec {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.qs-tile {
  background: var(--bg);
  border-radius: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
}
.qs-tile .qs-k {
  font-family: "Montserrat"; font-size: 11px; font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.qs-tile .qs-v {
  font-family: "Poppins"; font-weight: 700; font-size: 18px;
  color: var(--ink); letter-spacing: -0.01em;
}

/* Purchase bar — centered below the two-column grid */
.pdp-purchase-bar {
  max-width: 780px;
  margin: 20px auto 0;
}

/* Single variant display */
.single-variant-info {
  display: flex; align-items: center; gap: 16px;
  padding: 4px 0;
}
.single-dose {
  font-family: "Poppins"; font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; color: var(--ink);
}
.single-price {
  font-family: "Poppins"; font-weight: 700; font-size: 22px;
  color: var(--pp);
}

/* Buy bar layout — COA and buy side by side */
.pdp-buy-bar {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
}

/* Dosage selector — chunky bubbly cards */
.pdp-block {
  background: var(--surface);
  border-radius: 28px;
  padding: 20px 24px;
  box-shadow: var(--clay-w);
  display: flex; flex-direction: column; gap: 12px;
}
.pdp-block-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pdp-block-h h3 {
  font-family: "Poppins"; font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em;
}
.popular-pill {
  font-family: "Poppins"; font-size: 11px; font-weight: 700;
  background: var(--pp-tint); color: var(--pp);
  padding: 5px 11px; border-radius: 999px;
}

.dose-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dose-opt {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--line);
  color: var(--ink);
  border-radius: 18px;
  padding: 14px 14px;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  cursor: pointer;
  transition: border-color .18s, transform .15s, box-shadow .18s, background .18s;
}
.dose-opt:hover { transform: translateY(-2px); border-color: var(--pp); }
.dose-opt.active {
  border-color: var(--pp);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--pp-tint), var(--clay-w);
}
.dose-d {
  font-family: "Poppins"; font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em;
}
.dose-p {
  font-family: "Poppins"; font-weight: 600; font-size: 14px;
  color: var(--ink-2);
}
.dose-tick {
  position: absolute; top: 10px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pp); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}

/* COA link card */
.coa-link {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg);
  border: 1.5px dashed var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .15s;
}
.coa-link:hover {
  border-color: var(--pp); background: var(--pp-tint);
  transform: translateY(-2px);
}
.coa-link:hover .coa-icon { background: var(--pp); color: #fff; }
.coa-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  font-family: "Poppins"; font-weight: 800; font-size: 11px; letter-spacing: 0.04em;
  transition: background .18s, color .18s;
}
.coa-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.coa-l { font-family: "Poppins"; font-weight: 700; font-size: 14px; color: var(--ink); }
.coa-s { font-family: "Montserrat"; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.coa-arrow { color: var(--pp); }

/* Buy row — round pill button + qty */
.pdp-buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: stretch; }
.qty {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 4px;
}
.qty button {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--surface); color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer; transition: background .15s, color .15s;
  font-family: "Poppins"; font-weight: 700; font-size: 18px;
}
.qty button:hover { background: var(--pp); color: #fff; }
.qty span {
  min-width: 30px; text-align: center;
  font-family: "Poppins"; font-weight: 700; font-size: 16px;
}
.btn-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--ink); color: #fff;
  border-radius: 999px;
  padding: 16px 28px;
  font-family: "Poppins"; font-weight: 700; font-size: 15px;
  cursor: pointer;
  box-shadow: var(--clay-ink);
  transition: transform .15s, background .18s, box-shadow .18s;
}
.btn-add:hover { background: var(--pp); transform: translateY(-1px); box-shadow: var(--clay-purple); }
.btn-add:disabled,
.btn-add[disabled] {
  background: #b8b8b8; color: #fff;
  cursor: not-allowed;
  opacity: .75;
  box-shadow: none;
  transform: none;
}
.btn-add:disabled:hover,
.btn-add[disabled]:hover {
  background: #b8b8b8; transform: none; box-shadow: none;
}
.btn-add .price-inline {
  font-family: "Poppins"; font-weight: 800;
  padding-left: 14px; margin-left: 2px;
  border-left: 1px solid rgba(255,255,255,.25);
}

/* Trust strip — friendly bubble row */
.pdp-trust {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 8px;
}
.trust-tile {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: var(--clay-w-sm);
}
.trust-tile .ti {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--pp-tint); color: var(--pp);
  display: grid; place-items: center; flex-shrink: 0;
}
.trust-tile strong {
  display: block; font-family: "Poppins"; font-weight: 700;
  font-size: 13px; color: var(--ink); margin-bottom: 3px;
  letter-spacing: -0.005em;
}
.trust-tile small {
  display: block; font-family: "Montserrat"; font-size: 11.5px;
  color: var(--ink-3); font-weight: 500; line-height: 1.45;
}

/* ─── Specs section ─── */
.pdp-specs { padding: 80px 0 24px; }
.specs-card {
  background: var(--surface);
  border-radius: 32px;
  padding: 48px;
  box-shadow: var(--clay-w);
  max-width: 980px; margin: 0 auto;
}
.specs-h {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 32px;
}
.specs-h .specs-eye {
  font-family: "Poppins"; font-weight: 700; font-size: 12px;
  color: var(--pp); text-transform: uppercase; letter-spacing: 0.12em;
}
.specs-h h2 {
  font-family: "Poppins"; font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(36px, 4vw, 56px); line-height: 1;
}
.specs-h h2 em { font-style: normal; color: var(--pp); }

.specs-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
  border-top: 1.5px solid var(--line);
}
.spec-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px;
  padding: 16px 4px;
  border-bottom: 1.5px solid var(--line);
  align-items: baseline;
}
.spec-k {
  font-family: "Montserrat"; font-size: 12px; font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em;
}
.spec-v {
  font-family: "Poppins"; font-weight: 700; font-size: 15px;
  color: var(--ink); letter-spacing: -0.01em;
}

.dl-coa {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 32px;
  background: var(--ink); color: #fff;
  font-family: "Poppins"; font-size: 14px; font-weight: 700;
  padding: 14px 22px; border-radius: 999px;
  cursor: pointer; box-shadow: var(--clay-ink);
  transition: transform .15s, background .18s, box-shadow .18s;
}
.dl-coa:hover { background: var(--pp); transform: translateY(-1px); box-shadow: var(--clay-purple); }

/* ─── Related ─── */
.related { padding: 100px 0 60px; }
.rel-h {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 40px;
}
.rel-h h2 {
  font-family: "Poppins"; font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(48px, 6vw, 80px); line-height: 0.96;
}
.rel-h h2 em { font-style: normal; color: var(--pp); }
.rel-h .all-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Poppins"; font-size: 13px; font-weight: 700;
  color: var(--pp);
}
.rel-h .all-link:hover { color: var(--ink); }

.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rel-card {
  background: var(--surface); border-radius: 24px;
  padding: 12px 12px 18px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--clay-w);
  transition: transform .25s, box-shadow .25s;
  cursor: pointer;
}
.rel-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -22px rgba(157,39,169,.28), var(--clay-w); }
.rel-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--pp-tint-2) 0%, var(--surface) 100%);
}
.rel-img image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.rel-meta { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }
.rel-name {
  font-family: "Poppins"; font-weight: 700; font-size: 18px;
  letter-spacing: -0.015em;
}
.rel-dose {
  font-family: "Montserrat"; font-size: 12px; font-weight: 500;
  color: var(--ink-3);
}
.rel-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.rel-price { font-family: "Poppins"; font-weight: 800; font-size: 18px; }
.rel-view {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--line);
  font-family: "Poppins"; font-weight: 700; font-size: 12px;
  padding: 8px 14px; border-radius: 999px;
  cursor: pointer; transition: all .15s;
}
.rel-view:hover { background: var(--pp); color: #fff; border-color: var(--pp); }

/* ─── Responsive ─── */
@media (max-width: 980px) {
  .pdp-grid { grid-template-columns: 1fr; gap: 24px; }
  .pdp-media-card { position: static; }
  .pdp-purchase-bar { max-width: 100%; }
  .pdp-buy-bar { grid-template-columns: 1fr; }
  .specs-grid { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 140px 1fr; }
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pdp-trust { grid-template-columns: 1fr; }
  .specs-card { padding: 28px; }
  .pdp-quickspec { grid-template-columns: 1fr; }
  .dose-row { grid-template-columns: 1fr 1fr; }
  .qty button, .qty .qty-btn { width: 44px; height: 44px; min-width: 44px; }
}

@media (max-width: 480px) {
  .rel-grid { grid-template-columns: 1fr; }
}

/* === Mobile UI hardening pass — 2026-05-16 ===
   Targeted additions only. Does not redesign existing rules.
   Addresses audit issues #2, #3, #4, #6, #8, #9, #10, #11, #13. */

/* Mobile sticky buy bar — hidden by default; only visible at <=760px.
   Markup rendered as sibling of <section.pdp> by Detail() in product.js. */
.pdp-mobile-buybar { display: none; }

@media (max-width: 760px) {
  .pdp-mobile-buybar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--surface);
    border-top: 1.5px solid var(--line);
    box-shadow: 0 -8px 24px -12px rgba(0,0,0,.12);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
  }
  .pdp-mobile-buybar .mbb-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: stretch;
    max-width: 720px;
    margin: 0 auto;
  }
  .pdp-mobile-buybar .mbb-add {
    width: 100%;
    padding: 14px 18px;
    font-size: 14px;
  }
  /* Reserve room under content so fixed bar never covers footer/CTAs. */
  .pdp { padding-bottom: 120px; }
  .related { padding-bottom: 140px; }
}

/* Issue #3 — .pdp-buy stacks on phones; Add button goes full-width. */
@media (max-width: 600px) {
  .pdp-buy { grid-template-columns: 1fr; gap: 12px; }
  .pdp-buy .btn-add { width: 100%; padding: 16px 18px; font-size: 14px; }
  .pdp-buy .qty { justify-self: start; }
}

/* Issue #6 — header card padding too heavy / title too large at 375px. */
@media (max-width: 600px) {
  .pdp-header-card { padding: 20px; border-radius: 22px; }
  .pdp-title { font-size: clamp(32px, 8.5vw, 44px); }
  .pdp-sub { font-size: 16px; }
}

/* Issue #4 — dose chips: at 3 variants 2-col orphans one tile.
   Force 3-col since chips are small (~110px content), or stack on tiny widths. */
@media (max-width: 600px) {
  .dose-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 400px) {
  .dose-row { grid-template-columns: 1fr; }
}

/* Issue #8 — related products heading + right link overflow. */
@media (max-width: 600px) {
  .rel-h {
    flex-wrap: wrap;
    row-gap: 8px;
    align-items: flex-end;
  }
  .rel-h h2 { font-size: clamp(32px, 8vw, 44px); }
  .rel-h .all-link { font-size: 12px; }
}

/* Issue #9 — spec rows: stack key over value on phones. */
@media (max-width: 600px) {
  .spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 4px;
  }
  .spec-k { font-size: 11px; }
}

/* Issue #11 — specs card padding too heavy at 375px. */
@media (max-width: 600px) {
  .specs-card { padding: 18px; border-radius: 24px; }
}
@media (max-width: 480px) {
  .specs-card { padding: 16px; border-radius: 22px; }
}

/* Issue #10 — trim excessive vertical padding between sections on mobile. */
@media (max-width: 600px) {
  .pdp-specs { padding: 44px 0 16px; }
  .related   { padding: 48px 0 32px; }
}

/* Issue #13 — gate hover-translate rules behind (hover: hover) so they
   don't "stick" on touch devices after tap. */
@media (hover: none) {
  .pdp-thumbs .thumb:hover { transform: none; }
  .dose-opt:hover { transform: none; border-color: var(--line); }
  .coa-link:hover {
    border-color: var(--line);
    background: var(--bg);
    transform: none;
  }
  .coa-link:hover .coa-icon { background: var(--ink); color: #fff; }
  .rel-card:hover {
    transform: none;
    box-shadow: var(--clay-w);
  }
  .trust-tile:hover { transform: none; }
}

/* Supplies category overrides — hide peptide-only UI on supply product pages.
   Body class added by body_class filter in functions.php.
   NOTE: .pdp-block is the OUTER container that wraps the buy bar + add-to-cart,
   so we target the dosage heading (.pdp-block-h) and variant picker (.dose-row)
   instead of the whole block, to keep the purchase controls visible. */
body.pdp-supplies .pdp-block-h,
body.pdp-supplies .dose-row,
body.pdp-supplies .coa-link,
body.pdp-supplies .pdp-quickspec,
body.pdp-supplies .pdp-trust .trust-tile:nth-child(1),
body.pdp-supplies .pdp-trust .trust-tile:nth-child(3) {
  display: none;
}