/* The product template (SRS v3 chapter 02 FR-DES-2, chapter 06 FR-PROD-9): the product view of mockup/src.html:1291-1357.
   Linked after site.css and reading.css by the product pages only. The card (.bcard), the tiles (.related__grid), the
   buttons and the text under the buy box (.doc, .band) are those sheets'. */
.pdp { padding-block: 28px 56px; }
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1000px) { .pdp__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; } }
.pdp__media { display: grid; gap: 18px; min-width: 0; }
.pdp__stage { padding: clamp(20px, 5vw, 56px); background: var(--ground-2); border-radius: 10px; display: grid; place-items: center; min-width: 0; }
.pdp__stage .bcard { width: min(100%, 580px); }
/* SRS v3 V3-D41: the owner's photos of the card (tools/product_gallery.py), a strip under the stage that scrolls by itself
   and snaps; no script. Absent when the folder is empty. */
.pdp__gallery { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 320px); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.pdp__gallery img { scroll-snap-align: start; width: 100%; height: auto; align-self: start; border-radius: 10px; background: var(--ground-2); }
.pdp__info { display: grid; gap: 16px; min-width: 0; align-content: start; overflow-wrap: break-word; }
@media (min-width: 1000px) { .pdp__info { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 24px); } }
.pdp__deity { color: var(--gold-ink); font-weight: 600; }
.pdp__title { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1.08; }
.pdp__tags { color: var(--ink-2); font-size: var(--step-small); }
.pdp__price { font: 600 2rem/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.pdp__info .fine { margin-top: 8px; }
.buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; color: var(--ink-2); }
.ticks svg { width: 20px; height: 20px; color: var(--gold-ink); margin-top: 3px; }
.tile__line { color: var(--ink-2); font-size: var(--step-small); }
.doc.wrap { padding-block: 0 88px; }