/* ============================================================
   REIGNING CHOMP - product page styles
   ============================================================ */
.pdp { padding: clamp(28px,4vw,44px) 0 0; }
.pdp > .wrap:first-of-type { padding-bottom: clamp(48px,7vw,88px); }
.crumb { font-size:14px; color:var(--ink-soft); margin-bottom: 22px; }
.crumb a { color: var(--gold); font-weight:600; }
.crumb a:hover { color: var(--gold-bright); }
.crumb .sep { margin:0 9px; opacity:0.5; }

.pdp-top { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,60px); align-items:start; }
.pdp-gallery { position:sticky; top: 92px; }
.pdp-gallery .main {
  aspect-ratio: 4/5; border-radius: var(--radius); overflow:hidden;
  background: var(--cream-deep); position:relative; box-shadow: var(--shadow-card); container-type:inline-size;
}
.pdp-gallery .main .ph { position:absolute; inset:0; }
.pdp-gallery .main .product-photo { position:absolute; inset:0; }
.pdp-gallery .main .tag {
  position:absolute; top:16px; left:16px; z-index:2;
  background: var(--gold); color: #16120a;
  font-family: var(--font-display); font-weight:600; font-size:13px;
  padding:6px 13px; border-radius:999px;
}
@container (max-width: 400px) {
  .pdp-gallery .main .tag { top:8px; left:8px; padding:3px 11px; line-height:1.2; }
}
.pdp-thumbs { display:flex; gap:12px; margin-top:12px; }
.pdp-thumbs .th { flex:1; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--cream-deep); position:relative; cursor:pointer; border:2px solid transparent; }
.pdp-thumbs .th.active { border-color: var(--accent); }
.pdp-thumbs .th .product-photo { position:absolute; inset:0; }
.pdp-thumbs .th .ph::after { inset:6px; border-width:1px; }
.pdp-thumbs .th .ph .ph-label { font-size:9px; padding:3px 6px; }
.pdp-thumbs .th .ph .ph-label b { display:none; }

.pdp-info .eyebrow { color: var(--accent); }
.pdp-info h1 { font-size: clamp(30px,4.4vw,48px); line-height:1.02; }
.pdp-info .tagline { font-size:19px; color:var(--ink-soft); margin-top:14px; font-weight:500; }
.pdp-info .blurb { margin-top:18px; font-size:17px; line-height:1.6; color:var(--ink); max-width:48ch; }

.pdp-price { display:flex; align-items:baseline; gap:12px; margin: 26px 0 6px; }
.pdp-price .amt { font-family:var(--font-display); font-weight:700; font-size:38px; color:var(--gold); }
.pdp-price .per { color:var(--ink-soft); font-size:15px; }
.pdp-ship { font-size:16px; line-height:1.5; color:var(--ink-soft); margin-bottom:22px; display:flex; align-items:flex-start; gap:8px; }
.pdp-ship .dot { width:7px; height:7px; flex-shrink:0; margin-top:8px; border-radius:50%; background:var(--gold); }
.pdp-ship strong { color:var(--ink); }
.pdp-order { border:1px solid var(--card-line); border-radius:var(--radius-sm); padding:12px 16px 14px; margin:0 0 20px; min-width:0; }
.pdp-order legend { font-family:var(--font-display); font-weight:700; color:var(--bone); padding:0 5px; }
.pdp-order-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--card-line); }
.pdp-order-row label { display:flex; flex-wrap:wrap; gap:4px 10px; font-weight:600; }
.pdp-order-row label span { color:var(--ink-soft); font-size:14px; font-weight:400; }
.pdp-order-row input { width:66px; flex:none; padding:8px 4px 8px 8px; background:var(--card-2); border:1px solid var(--card-line); border-radius:4px; color:var(--bone); font:inherit; }
.pdp-order-row input:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.pdp-order-summary { min-height:24px; margin:12px 0 0; font-size:14px; color:var(--ink-soft); }
.pdp-delivery { margin:0 0 24px; font-size:16px; line-height:1.5; color:var(--ink-soft); }
.pdp-delivery summary { cursor:pointer; color:var(--ink); width:fit-content; padding:8px 0; }
.pdp-delivery summary:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.pdp-delivery p { margin:8px 0; }
.pdp-policy-links { display:flex; flex-wrap:wrap; gap:8px 20px; margin:-12px 0 24px; }
.pdp-policy-links a { color:var(--gold); font-size:14px; text-decoration:underline; text-underline-offset:3px; }

.pdp-buy { display:flex; gap:12px; flex-wrap:wrap; }
.pdp-buy .btn { flex:1 1 auto; justify-content:center; }
.btn--checkout { background: var(--gold); color:#14110a; box-shadow:0 8px 20px rgba(201,162,74,0.28); }
.btn--checkout:hover { background:var(--gold-bright); transform:translateY(-2px); }
.btn--checkout[aria-disabled="true"] { pointer-events:none; opacity:0.6; box-shadow:none; }
.pdp-buy-note { font-size:13px; color:var(--ink-soft); margin-top:12px; font-family:ui-monospace,monospace; }

.pdp-benefits { list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:12px; }
.pdp-benefits li { display:flex; gap:12px; align-items:flex-start; font-size:16px; }
.pdp-benefits .ck { flex:none; width:24px; height:24px; border-radius:50%; background:rgba(201,162,74,0.14); display:grid; place-items:center; }
.pdp-benefits .ck svg { width:14px; height:14px; stroke:var(--gold); fill:none; stroke-width:2.6; }

/* sections */
.pdp-section { padding: clamp(48px,7vw,88px) 0; }
.ing-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top:34px; }
.ing-card { background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius-sm); padding:22px 24px; box-shadow:var(--shadow-card); }
.ing-card h4 { font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--gold); }
.ing-card p { margin-top:8px; color:var(--ink-soft); font-size:15px; line-height:1.55; }

/* dosage */
.dose { background: var(--char); color:var(--bone); border-top:1px solid rgba(201,162,74,0.18); border-bottom:1px solid rgba(201,162,74,0.18); }
.dose h2 { color:var(--bone); }
.dose .dose-wrap { display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px,4vw,56px); align-items:center; }
.dose-sub { color:rgba(242,236,221,0.72); margin-top:14px; font-size:17px; line-height:1.6; max-width:38ch; }
.dose-table { width:100%; border-collapse:collapse; background:var(--card-2); border-radius:var(--radius); overflow:hidden; }
.dose-table th, .dose-table td { text-align:left; padding:16px 22px; font-size:16px; }
.dose-table th { font-family:var(--font-display); font-weight:600; color:var(--gold); background:rgba(0,0,0,0.3); font-size:14px; letter-spacing:0.02em; }
.dose-table td { border-top:1px solid rgba(201,162,74,0.12); }
.dose-table td:last-child { font-family:var(--font-display); font-weight:600; color:var(--bone); }

/* cross-sell */
.xsell { text-align:center; }
.xsell-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:34px; text-align:left; }

@media (max-width: 860px) {
  .pdp-top { grid-template-columns: 1fr; gap:28px; }
  .pdp-gallery { position:static; }
  .ing-grid { grid-template-columns:1fr; }
  .dose .dose-wrap { grid-template-columns:1fr; }
  .xsell-grid { grid-template-columns:1fr; }
}