/* =========================================================================
   F3 · Evaluate — product page styles, ported from the design handoff
   (design_handoff_liquid_landing/Product.html inline <style>). The prototype's
   <image-slot> placeholder is a real <img>; the rules that sized it now size
   the image.
   ========================================================================= */
.pdp { padding-block: clamp(24px, 3vw, 40px) 0; }
.pdp-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(26px, 3vw, 44px); }
.pdp-media { position: relative; background: var(--sand-2); border: 1px solid var(--line); border-radius: var(--r); aspect-ratio: 3 / 4; overflow: hidden; }
.pdp-media img { width: 100%; height: 100%; object-fit: contain; }
.pdp-info { position: sticky; top: 132px; }
.pdp-brand { font-size: .79rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.pdp-info h1 { font-size: var(--h1); margin: 7px 0 0; }
.pdp-cat { font-size: .73rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--clay); margin-top: 15px; }
.pdp-price { font-family: var(--serif); font-size: 2.25rem; margin-top: 22px; }
.pdp-desc { color: var(--ink-2); margin-top: 20px; max-width: 48ch; }
.buy-row { display: flex; gap: 14px; margin-top: 32px; }
.buy-row .btn { flex: 1; }
.specs { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--r); background: var(--sand-2); margin-top: 34px; overflow: hidden; }
.spec { padding: 17px 18px; }
.spec + .spec { border-left: 1px solid var(--line); }
.spec .sl { font-size: .58rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.spec .sv { font-family: var(--serif); font-size: 1.16rem; margin-top: 5px; }
.pdp-share { display: flex; gap: 24px; margin-top: 26px; font-size: .73rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pdp-share button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.pdp-share button:hover, .pdp-share a:hover { color: var(--clay); }
.pdp-share button.on { color: var(--clay); }
.related { padding-block: var(--section); }
.faq-band { border-top: 1px solid var(--line); margin-top: clamp(56px, 7vw, 96px); padding-block: clamp(48px, 6vw, 84px) 0; }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq-lede h2 { font-size: var(--h2); margin: 13px 0 0; }
.faq-lede p { color: var(--ink-2); margin: 16px 0 0; max-width: 32ch; }
.faq-foot { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 24px; font-size: .93rem; color: var(--ink-3); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
.related .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(26px, 3vw, 44px); }
.related .eyebrow { display: block; margin-bottom: 13px; }
.related h2 { font-size: var(--h2); }
@media (max-width: 980px) {
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-info { position: static; }
}
@media (max-width: 680px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .spec { border-top: 1px solid var(--line); }
  .spec + .spec { border-left: 1px solid var(--line); }
  .spec:nth-child(odd) { border-left: 0; }
  .spec:nth-child(-n+2) { border-top: 0; }
}