/* =================================================================
 * routes/pdp.css — PDP "object theater" (Grand Design §4.4)
 *
 * Sticky packshot (left 5) + scrolling panels (right 7) via .vv-otheater.
 * Ink page. Reuses .vv-fact-slab, .vv-serve-card, .vv-eyebrow, .vv-btn, and
 * the .vv-st-reveal hook. The buy module below is untouched.
 * ================================================================= */

.vv-pdp6 { position: relative; z-index: var(--vv-z-raised); }
.vv-pdp6-theater { padding-top: clamp(6rem, 11vh, 9rem); }

/* Sticky bottle — hold the whole scroll on desktop; a single hero on mobile */
.vv-pdp6-ot__media { align-self: start; }
.vv-pdp6-bottle { margin: 0; }
.vv-pdp6-bottle__img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.vv-pdp6-bottle .vv-imgslot--empty { aspect-ratio: 4 / 5; }

/* Panels — content-sized with generous rhythm (override the component's 70vh) */
.vv-pdp6-panel { min-height: auto; padding-block: clamp(28px, 6vh, 56px); justify-content: flex-start; }
.vv-pdp6-panel:first-child { padding-top: 0; }
.vv-pdp6-ot__panels > .vv-pdp6-panel + .vv-pdp6-panel { border-top: 1px solid var(--vv-border-gold); }

/* ① Intro */
.vv-pdp6-back { font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vv-brass); text-decoration: none; display: inline-block; margin-bottom: clamp(16px, 2.4vw, 26px); }
.vv-pdp6-back:hover, .vv-pdp6-back:focus-visible { color: var(--vv-brass-bright); }
.vv-pdp6-eyebrow { color: var(--vv-bone-70); }
.vv-pdp6-title { font-family: var(--vv-font-display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.03; color: var(--vv-bone); margin: 6px 0 clamp(16px, 2vw, 24px); }
.vv-pdp6-lede { font-family: var(--vv-font-body); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.55; color: var(--vv-bone); margin: 0 0 0.7em; }
.vv-pdp6-body { font-family: var(--vv-font-body); font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.7; color: var(--vv-bone-70); margin: 0 0 clamp(22px, 3vw, 30px); max-width: 46ch; }
.vv-pdp6-cta { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 20px); align-items: center; }

/* Shared panel headings */
.vv-pdp6-h2 { font-family: var(--vv-font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; color: var(--vv-bone); margin: 6px 0 clamp(18px, 2.4vw, 28px); }

/* ② Fact Slab */
.vv-pdp6-facts__list { margin: 0; }
.vv-pdp6-facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(21,16,14,0.12); }
.vv-pdp6-facts__row:last-child { border-bottom: 0; }
.vv-pdp6-facts__row dt { font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vv-ink); opacity: 0.7; flex: 0 0 auto; }
.vv-pdp6-facts__row dd { margin: 0; font-family: var(--vv-font-body); font-size: clamp(0.98rem, 1.5vw, 1.12rem); color: var(--vv-ink); text-align: right; }

/* ③ Tasting notes */
.vv-pdp6-notes { margin: 0; display: grid; gap: clamp(18px, 2.4vw, 26px); }
.vv-pdp6-note dt { font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vv-brass); margin-bottom: 8px; }
.vv-pdp6-note dd { margin: 0; font-family: var(--vv-font-body); font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.65; color: var(--vv-bone-70); }

/* ④ THE OBJECT */
.vv-pdp6-object__macros { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 20px); margin-bottom: clamp(20px, 3vw, 28px); }
.vv-pdp6-object__macro { margin: 0; overflow: hidden; }
.vv-pdp6-object__macro img, .vv-pdp6-object__macro .vv-imgslot--empty { aspect-ratio: 4 / 5; width: 100%; height: 100%; object-fit: cover; }
.vv-pdp6-object__lead { font-family: var(--vv-font-body); font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.7; color: var(--vv-bone-70); margin: 0 0 clamp(18px, 2.4vw, 26px); }

/* ⑤ Serves */
.vv-pdp6-serves { display: grid; gap: 12px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.vv-pdp6-serve { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px; border: 1px solid var(--vv-border-gold); text-decoration: none; transition: border-color 200ms var(--vv-ease-out-expo), transform 200ms var(--vv-ease-out-expo); }
.vv-pdp6-serve:hover, .vv-pdp6-serve:focus-visible { border-color: var(--vv-brass); transform: translateX(3px); }
.vv-pdp6-serve__name { font-family: var(--vv-font-display); font-size: 1.15rem; color: var(--vv-bone); }
.vv-pdp6-serve__classic { font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vv-bone-70); }
.vv-pdp6-serve__arrow { margin-left: auto; color: var(--vv-brass); }

@media (max-width: 899px) {
	.vv-pdp6-body { max-width: none; }
	.vv-pdp6-panel { padding-block: clamp(24px, 5vh, 40px); }
}