/* Single label / product */

/* ---------- Pinned hero ---------- */
.lhero { position: relative; height: 260vh; }
.lhero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.lhero__stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 0; pointer-events: none; opacity: var(--glow, 1);
	background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--rp-brand) 18%, transparent) 70%, color-mix(in srgb, var(--rp-brand) 10%, transparent) 100%); }

.lhero__copy { position: absolute; inset: calc(var(--header-h) + 6vh) var(--gutter) auto; z-index: 3; text-align: center; }
.lhero__title { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.lhero__kind { margin-top: var(--space-2); color: var(--rp-muted); font-size: var(--fs-lead); }

.lhero__mark { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); font-size: clamp(5rem, 20vw, 19rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--rp-ink); opacity: 0; white-space: nowrap; pointer-events: none; user-select: none; }

/* Sized by height so every render (slim or wide) fits between header and dots; width follows the image.
 * --body-h/--body-top/--focus (set per label by rp_bottle_box) describe where the bottle is inside its
 * file, so the *bottle* is 80svh tall and the label lands on the same point whatever the margins. */
.lhero__bottle-wrap { position: absolute; left: 50%; top: 100%; z-index: 2; height: calc(min(80svh, 900px) / var(--body-h, 1)); width: auto; transform: translate(-50%, -48%); }
/* Entrance: opacity here, the rise is a GSAP `y` tween (label-page.js) — never a CSS `translate`
 * on this element, GSAP would fold its in-flight value into its own transform and offset the hero. */
html.js .lhero__bottle-wrap { opacity: 0; }
html.js .lhero__bottle-wrap.is-in { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out); }
/* Arriving through a view transition: the browser morphs the bottle in, so no entrance. */
html.js.vt .lhero__bottle-wrap { opacity: 1; transition: none; }
.lhero__slide--bottle.is-active img { view-transition-name: bottle; }
.lhero__bottle { position: relative; display: grid; height: 100%; transform-origin: 50% calc(var(--focus, .58) * 100%); will-change: transform; }
.lhero__slide { grid-area: 1 / 1; height: 100%; opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.lhero__slide.is-active { opacity: 1; }
.lhero__slide img { height: 100%; width: auto; max-width: none; display: block; margin-inline: auto; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .28)); }
/* 360° turntable: canvas over the still, shown once enough frames are in */
.lhero__slide--bottle { position: relative; touch-action: pan-y; }
.lhero__turntable { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--dur) var(--ease-out); pointer-events: none; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .28)); }
.lhero__turntable.is-ready { opacity: 1; }
.lhero__slide--bottle.has-turntable { cursor: grab; }
.lhero__slide--bottle.has-turntable.is-dragging { cursor: grabbing; }
.lhero__slide--bottle.has-turntable.is-ready img { opacity: 0; }
.lhero__drag { position: absolute; left: 50%; bottom: calc(4% + 1.6rem); transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); opacity: 0; transition: opacity var(--dur); }
.lhero__drag svg { width: 14px; height: 14px; }
.lhero__drag svg:first-child { transform: rotate(180deg); }
.lhero.is-turntable-ready .lhero__drag { opacity: var(--drag-hint, 0); }

.lhero__slide--label img, .lhero__slide--photo img { border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4); filter: none; object-fit: cover; aspect-ratio: 3 / 4; width: auto; }

.lhero__dots { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: .6rem; opacity: 0; }
.lhero__dots::before, .lhero__dots::after { content: ""; width: clamp(60px, 12vw, 160px); height: 1px; background: var(--rp-line); }
.lhero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rp-line); transition: transform var(--dur-fast), background var(--dur-fast); }
.lhero__dot.is-active { background: var(--rp-ink); transform: scale(1.35); }
.lhero__dot:hover { background: var(--rp-muted); }

.lhero__hint { position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); z-index: 4; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--rp-muted); animation: hint 2.2s ease-in-out infinite; }
@keyframes hint { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- Content ---------- */
.lintro { text-align: center; padding-block: var(--space-6) var(--space-4); }
.lintro h2 { margin-bottom: var(--space-2); }
.lintro .entry-content { color: var(--rp-muted); max-width: 560px; margin-inline: auto; }
.lspecs { padding-bottom: var(--space-5); }
.ldetails { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); padding-bottom: var(--space-6); }
.ldetails figure { margin: 0; overflow: hidden; border-radius: 4px; aspect-ratio: 7 / 5; background: var(--rp-bg-2); }
.ldetails img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ldetails figure:hover img { transform: scale(1.08); }

/* Other labels — horizontal snap row, draggable */
.lother { padding-block: var(--space-5) var(--space-6); overflow: hidden; }
.lother .cards { grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); padding-bottom: var(--space-2); scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); cursor: grab; }
.lother .cards::-webkit-scrollbar { display: none; }
.lother .cards.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.lother .cards.is-dragging .card { pointer-events: none; }
.lother .card { scroll-snap-align: center; }

@media (max-width: 768px) {
	.lhero { height: 200vh; }
	.lhero__bottle-wrap { height: calc(min(72svh, 700px) / var(--body-h, 1)); }
	.lhero__copy { inset-block-start: calc(var(--header-h) + 3vh); }
}
@media (prefers-reduced-motion: reduce) {
	.lhero { height: auto; }
	.lhero__stage { position: relative; }
	html.js .lhero__bottle-wrap { opacity: 1; }
	.lhero__dots { opacity: 1; }
	.lhero__hint { display: none; }
}

/* ---------- "Zoom label" (shown at max scroll) + lightbox magnifier ---------- */
.lhero__zoom { position: absolute; left: 50%; bottom: calc(4% + 1.6rem); transform: translate(-50%, 10px); z-index: 5; display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.15rem .75rem .95rem; border-radius: 999px; background: var(--rp-ink); color: var(--rp-bg); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background var(--dur-fast), color var(--dur-fast); }
.lhero__zoom svg { width: 16px; height: 16px; }
.lhero__zoom:hover, .lhero__zoom:focus-visible { background: var(--rp-brand); color: var(--rp-on-brand, #fff); }
.lhero.is-end .lhero__zoom { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.lhero.is-end .lhero__drag { opacity: 0; }

.lzoom { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: color-mix(in srgb, var(--rp-bg) 90%, var(--rp-brand)); opacity: 0; transition: opacity .35s var(--ease-out); }
.lzoom[hidden] { display: none; }
.lzoom.is-open { opacity: 1; }
.lzoom__stage { width: min(92vw, 1100px); height: min(84svh, 1000px); overflow: hidden; display: grid; place-items: center; cursor: zoom-in; touch-action: none; }
.lzoom.is-zoomed .lzoom__stage { cursor: zoom-out; }
.lzoom__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; transition: transform .45s var(--ease-out); will-change: transform; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .25)); }
.lzoom__close { position: absolute; top: var(--space-3); right: var(--gutter); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--rp-ink); color: var(--rp-bg); z-index: 2; transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.lzoom__close:hover { background: var(--rp-brand); color: var(--rp-on-brand, #fff); transform: scale(1.06); }
.lzoom__close svg { width: 16px; height: 16px; }
.lzoom__hint { position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); white-space: nowrap; }
body.lzoom-open { overflow: hidden; }
@media (max-width: 768px) {
	.lzoom__hint { white-space: normal; text-align: center; width: 80%; }
}
@media (prefers-reduced-motion: reduce) {
	.lhero__zoom { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
	.lzoom__stage img { transition: none; }
}