/* components.css: shared UI for every page. Class names are an API: never rename, log additions in FOUNDATION_CHANGES.md.
   UI micro-motion only (class A): transform/opacity/colour, <300ms, ease-out, never from scale(0), never `transition: all`. */

/* ---------- eyebrow + section head ---------- */
.eyebrow{display:block;font:600 var(--fs-eyebrow)/1 var(--font-body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--accent);margin:0 0 22px}
.sec-head{max-width:60ch;margin-bottom:var(--gap-m)}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2+.lede,.sec-head h2+p{margin-top:20px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 26px;border-radius:var(--r-s);border:1px solid transparent;
  font:500 14.5px/1 var(--font-body);letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out)}
.btn--primary,.btn--solid{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover,.btn--solid:hover{background:var(--accent-hover)}
.btn--secondary,.btn--ghost{border-color:var(--hairline-strong);color:var(--ink);background:rgba(243,236,224,.04)}
.btn--secondary:hover,.btn--ghost:hover{border-color:var(--ink-muted);background:rgba(243,236,224,.08)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn.is-loading{pointer-events:none;opacity:.7}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.link{color:var(--accent);text-decoration:none;font-weight:600;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;min-height:44px;
  transition:color var(--t-ui) var(--ease-out)}
.link::after{content:"";width:22px;height:1px;background:currentColor;transition:transform var(--t-ui) var(--ease-out);transform-origin:left}
.link:hover{color:var(--accent-hover)}
.link:hover::after{transform:scaleX(1.4)}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;min-height:36px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--hairline-strong);background:transparent;color:var(--ink-muted);
  font:600 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out)}
.pill:hover{color:var(--ink);border-color:var(--ink-muted)}
.pill[aria-pressed="true"],.pill.is-active{background:var(--surface-2);color:var(--ink);border-color:var(--accent)}
.pill--sale{border:0;background:var(--surface);color:var(--sale);font-variant:small-caps;letter-spacing:.1em}

/* ---------- cards ---------- */
.card{position:relative;background:var(--surface);border-radius:var(--r-m);border:1px solid var(--hairline);overflow:hidden;transition:background-color var(--t-tile) var(--ease-out)}
.card:hover{background:var(--surface-2)}
.card__media{overflow:hidden;border-radius:var(--r-m) var(--r-m) 0 0}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-tile) var(--ease-out)}
.card:hover .card__media img{transform:scale(1.03)}
.card__body{padding:clamp(22px,2.4vw,36px)}
.card__body h3+p{margin-top:12px;color:var(--ink-muted)}

/* stacking cards (class B, scroll-position bound by CSS sticky; reduced motion lays them flat) */
.stack{display:grid;gap:clamp(20px,3vh,32px)}
.stack__item{position:sticky;top:calc(var(--header-h) + 24px + var(--i,0) * 18px)}
@media (max-height:520px) and (orientation:landscape){.stack__item{position:relative;top:auto}}
@media (prefers-reduced-motion:reduce){.stack__item{position:relative;top:auto}}

/* ---------- forms ---------- */
.field{display:grid;gap:8px}
.field+.field{margin-top:18px}
.field label{font:600 12px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.input,.field input,.field textarea,.field select{width:100%;min-height:48px;padding:13px 16px;border-radius:var(--r-s);border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink);
  font-size:16px;line-height:1.4;transition:border-color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.field textarea{min-height:160px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(243,236,224,.62)}
.field input:hover,.field textarea:hover{border-color:var(--ink-faint)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--ink-muted)}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--error)}
.field__error{min-height:0;font-size:13.5px;line-height:1.4;color:var(--error)}
.field__error:empty{display:none}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-muted)}
.check input{width:20px;height:20px;min-height:0;margin:2px 0 0;accent-color:var(--accent)}

/* ---------- toast ---------- */
.toast-host{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:var(--z-toast);display:grid;gap:10px;justify-items:center;transform:translateX(-50%);pointer-events:none;width:min(92vw,440px)}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:var(--r-s);background:var(--surface-2);border:1px solid var(--hairline-strong);color:var(--ink);
  font-size:14.5px;box-shadow:0 14px 40px rgba(0,0,0,.45);opacity:0;transform:translateY(12px);
  transition:opacity var(--t-toast-in) var(--ease-out),transform var(--t-toast-in) var(--ease-out)}
.toast.is-in{opacity:1;transform:none}
.toast.is-out{opacity:0;transform:translateY(8px);transition-duration:var(--t-toast-out)}
/* C-20260925-75: on touch screens the toast drops in over the header bar (a notification over chrome), so it never covers the button
   the thumb just pressed nor the page text under the header */
@media (pointer:coarse){.toast-host{top:calc(8px + env(safe-area-inset-top,0px));bottom:auto}.toast{transform:translateY(-12px)}.toast.is-out{transform:translateY(-8px)}}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

/* ---------- drawer (cart, filters) ---------- */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;pointer-events:none}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__veil{position:absolute;inset:0;background:rgba(8,6,5,.6);opacity:0;transition:opacity var(--t-out) var(--ease-out)}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--ground-deep);border-left:1px solid var(--hairline);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--t-out) var(--ease-out);padding:calc(20px + env(safe-area-inset-top,0px)) 24px calc(20px + env(safe-area-inset-bottom,0px));overflow-y:auto}
.drawer--left .drawer__panel{right:auto;left:0;border-left:0;border-right:1px solid var(--hairline);transform:translateX(-100%)}
.drawer.is-open .drawer__veil{opacity:1;transition-duration:var(--t-in)}
.drawer.is-open .drawer__panel{transform:none;transition-duration:var(--t-in)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--hairline);margin-bottom:20px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-s);border:1px solid transparent;background:transparent;color:var(--ink);
  transition:background-color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out)}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:20px;height:20px}

/* ---------- header (fixed; transparent over a hero, solid after it) ---------- */
.site-hdr{position:fixed;inset:0 0 auto 0;z-index:var(--z-header);height:var(--header-h);padding-top:env(safe-area-inset-top,0px);
  transition:background-color var(--t-in) var(--ease-out),border-color var(--t-in) var(--ease-out),transform var(--t-in) var(--ease-out);border-bottom:1px solid transparent}
.site-hdr::before{content:"";position:absolute;inset:0 0 -40px 0;background:linear-gradient(to bottom,rgba(var(--scrim-rgb),.5),rgba(var(--scrim-rgb),0));pointer-events:none;transition:opacity var(--t-in) var(--ease-out)}
.site-hdr[data-state="solid"]{background:rgba(14,11,9,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--hairline)}
.site-hdr[data-state="solid"]::before{opacity:0}
.site-hdr__in{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none}
.site-hdr__logo{display:flex;align-items:center;flex:none;min-height:44px}
.site-hdr__logo img{height:44px;width:auto}
.site-nav ul{display:flex;align-items:center;gap:clamp(16px,1.6vw,26px);list-style:none;margin:0;padding:0}
.site-nav a{position:relative;display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;opacity:.86;
  font:600 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:opacity var(--t-ui) var(--ease-out)}
.site-nav a:hover,.site-nav a[aria-current="page"]{opacity:1}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t-ui) var(--ease-out)}
.site-nav a:hover::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-hdr__tools{display:flex;align-items:center;gap:6px;flex:none}
.cart-link{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding:0 10px;border-radius:var(--r-s);color:var(--ink);text-decoration:none;
  font:600 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;transition:background-color var(--t-ui) var(--ease-out)}
.cart-link:hover{background:rgba(243,236,224,.08)}
.cart-link svg{width:20px;height:20px}
.cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font:600 11px/1 var(--font-body);letter-spacing:0}
.cart-count[hidden]{display:none}
.menu-btn{display:none}
@media (max-width:1320px){
  .site-nav{display:none}
  .menu-btn{display:inline-grid}
  .cart-link__label{display:none}
}
@media (max-width:700px){.site-hdr__logo img{height:36px}}
@media (max-height:520px) and (orientation:landscape){.site-hdr__logo img{height:30px}}

/* mobile / tablet menu: full-height panel from the right */
.menu .drawer__panel{width:min(520px,100vw)}
.menu__list{list-style:none;margin:8px 0 0;padding:0;display:grid}
.menu__list a{display:flex;align-items:center;min-height:56px;padding:6px 0;border-bottom:1px solid var(--hairline);color:var(--ink);text-decoration:none;
  font:400 clamp(22px,5.4vw,30px)/1.15 var(--font-display);letter-spacing:.02em;transition:color var(--t-ui) var(--ease-out)}
.menu__list a[aria-current="page"]{color:var(--accent)}
.menu__list a:hover{color:var(--accent-hover)}
@media (max-height:520px) and (orientation:landscape){.menu__list{grid-template-columns:1fr 1fr;column-gap:24px}.menu__list a{min-height:44px;font-size:20px}}
.menu__meta{margin-top:auto;padding-top:28px;display:grid;gap:6px;color:var(--ink-muted);font-size:14.5px}
.menu__meta a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}

/* ---------- footer ---------- */
/* C-20260925-80: every footer link is a 44px target (was 32-40px tall; social icons shrank to 41px wide in narrow columns) */
.site-ftr{background:var(--ground-deep);border-top:1px solid var(--hairline);color:var(--ink-muted);padding:clamp(64px,10vh,112px) 0 calc(28px + env(safe-area-inset-bottom,0px));position:relative}
.site-ftr__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.site-ftr__brand img{height:52px;width:auto;margin-bottom:24px}
.site-ftr__brand p{max-width:46ch;font-size:15px;line-height:1.65}
.site-ftr h2{font:600 12px/1 var(--font-body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.site-ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.site-ftr a{color:var(--ink-muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:14.5px;transition:color var(--t-ui) var(--ease-out)}
.site-ftr a:hover{color:var(--ink)}
.site-ftr address{font-style:normal;display:grid;gap:8px;font-size:14.5px}
.site-ftr address span{display:block;font:600 11.5px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px}
.site-ftr address a{min-height:44px}
.site-ftr__social{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.site-ftr__social a{flex:none;width:44px;height:44px;justify-content:center;border:1px solid var(--hairline);border-radius:var(--r-pill)}
.site-ftr__social a:hover{border-color:var(--ink-faint)}
.site-ftr__social svg{width:18px;height:18px}
.site-ftr__base{margin-top:clamp(48px,8vh,88px);padding-top:24px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.site-ftr__legal{display:flex;flex-wrap:wrap;gap:0 22px}
.site-ftr__legal a{font-size:13.5px}
.site-ftr__badges{display:flex;flex-wrap:wrap;gap:12px}
.site-ftr__badges a{min-height:44px;border-radius:8px;overflow:hidden;opacity:.86}
.site-ftr__badges a:hover{opacity:1}
.site-ftr__badges img{height:40px;width:auto}
.site-ftr__copy{font-size:13px;color:var(--ink-faint);width:100%}
@media (max-width:1000px){.site-ftr__grid{grid-template-columns:1fr 1fr}.site-ftr__brand{grid-column:1/-1}}
@media (max-width:560px){.site-ftr__grid{grid-template-columns:1fr}}

/* ---------- cookie notice ---------- */
.cookie{position:fixed;left:var(--gutter);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:var(--z-cookie);width:min(420px,calc(100vw - 2 * var(--gutter)));
  padding:20px 22px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--hairline-strong);box-shadow:0 18px 48px rgba(0,0,0,.5);
  font-size:13.5px;line-height:1.55;color:var(--ink-muted);opacity:0;transform:translateY(12px);transition:opacity var(--t-in) var(--ease-out),transform var(--t-in) var(--ease-out)}
.cookie.is-in{opacity:1;transform:none}
.cookie[hidden]{display:none}
.cookie__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:14px}
.cookie .btn{min-height:44px;padding:12px 20px}
.cookie a:not(.btn){color:var(--ink);font-size:13.5px;min-height:44px;display:inline-flex;align-items:center}
@media (max-height:520px) and (orientation:landscape){.cookie{width:min(560px,calc(100vw - 2 * var(--gutter)));padding:14px 18px}.cookie__row{margin-top:8px}}

/* =====================================================================================================
   DESIGN.md 11 (VineWinner language, everything under the heroes). Added 2026-09-25, logged in FOUNDATION_CHANGES.md.
   ===================================================================================================== */

/* outlined button: the one button of a chapter (11.7); on cream it takes the cream ink */
.btn--outline{min-height:44px;padding:12px 22px;font-weight:400;border-color:var(--hairline-strong);color:var(--ink);background:transparent}
.btn--outline:hover{border-color:var(--ink);background:rgba(243,236,224,.06)}
.panel--cream .btn--outline{border-color:var(--cream-hairline);color:var(--cream-ink)}
.panel--cream .btn--outline:hover{border-color:var(--cream-ink);background:rgba(20,16,14,.05)}

/* ghost word (11.9): one per chapter, a real word from the page, Cinzel, 6-10% cream, clipped to its section, aria-hidden */
.has-ghost{position:relative;overflow:clip}
.ghost{position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;white-space:nowrap;
  font:400 clamp(120px,22vw,340px)/.8 var(--font-display);letter-spacing:.02em;color:var(--ghost)}
.ghost--top{top:0;transform:translate(-50%,-20%)}
.ghost--left{left:0;transform:translate(-4%,-50%)}
.has-ghost>*:not(.ghost){position:relative;z-index:1}

/* cream inset panel (11.2): never full width, sits on ground or over a photo frame */
.panel--cream{background:var(--cream);color:var(--cream-ink);border-radius:var(--r-card);padding:clamp(28px,5vw,80px)}
.panel--cream .eyebrow{color:#8a4a00}              /* 5.3:1 on cream */
.panel--cream .muted,.panel--cream p{color:var(--cream-muted)}
.panel--cream h2,.panel--cream h3{color:var(--cream-ink)}
.panel--cream :focus-visible{outline-color:var(--cream-ink)}
/* photo frame behind an inset panel (ref-3): rounded photo, dark veil, the panel floats inside it */
.frame{position:relative;border-radius:var(--r-card);overflow:hidden;padding:clamp(20px,6vw,96px) clamp(16px,6vw,96px)}
.frame__bg{position:absolute;inset:0;z-index:0}
.frame__bg img{width:100%;height:100%;object-fit:cover;filter:blur(3px) saturate(.9);transform:scale(1.04)}
.frame__bg::after{content:"";position:absolute;inset:0;background:rgba(14,11,9,.35)}
.frame>.panel--cream{position:relative;z-index:1}
/* long-text inset panel (C-20260925-101, DESIGN.md 11.2): a dark surface in the bottle-backdrop family, never cream for long text.
   surface + radial light centre, 16px radius, hairline, faint grain; ink body text 16-17px/1.6 on a 58ch measure; one ornament
   (.panel__rule copper rule or p.dropcap Cinzel initial); images inside are sharp and rounded, never a blurred backdrop. */
.panel--dark{position:relative;overflow:clip;isolation:isolate;border-radius:var(--r-card);border:1px solid var(--hairline);color:var(--ink);
  background:radial-gradient(64% 58% at 50% 38%,rgba(243,236,224,.06) 0%,rgba(243,236,224,.025) 45%,rgba(243,236,224,0) 74%),var(--surface);
  padding:clamp(20px,4.4vw,72px)}
.panel--dark::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;mix-blend-mode:soft-light;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
.panel--dark>*:not(.ghost){position:relative;z-index:1}
.panel--dark>.ghost{top:auto;bottom:0;transform:translate(-50%,30%);font-size:clamp(96px,16vw,240px)} /* ghost sits on the panel foot, never behind the body text */
.panel--dark h2,.panel--dark h3{color:var(--ink)}
.panel--dark .prose{max-width:58ch}
.panel--dark .prose p{color:var(--ink);font-size:16px;line-height:1.6;font-weight:400}
.panel--dark .prose p+p{margin-top:1em}
@media (min-width:1000px){.panel--dark .prose p{font-size:17px}}
.panel--dark figure{margin:0;border-radius:var(--r-card);overflow:hidden}
.panel--dark figure img{display:block;width:100%;height:100%;object-fit:cover}
.panel__rule{display:block;width:56px;height:1px;background:var(--accent);margin-top:clamp(20px,3vh,28px)}
.dropcap::first-letter{float:left;font-family:var(--font-display);font-weight:400;font-size:4.05em;line-height:.78;color:var(--accent);padding:.1em .12em 0 0}

/* chapter (11.7): two-line display headline, short paragraph, one outlined button, one rounded photo */
.chapter{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,112px);align-items:center}
.chapter--flip>.chapter__media{order:-1}
.chapter__title{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.chapter__title span{display:block}
.chapter__body{margin-top:clamp(20px,3vh,32px);max-width:50ch;color:var(--ink-muted)}
.chapter__body p+p{margin-top:1em}
.chapter__cta{margin-top:clamp(24px,4vh,40px)}
.chapter__media{border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.chapter__media img{width:100%;height:100%;object-fit:cover}
.quote-mark{font:400 13px/1.6 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);text-align:right}
@media (max-width:860px) and (orientation:portrait),(max-width:600px){.chapter{grid-template-columns:1fr}.chapter--flip>.chapter__media{order:0}}
/* short landscape keeps chapters in two columns and caps photos to the screen height */
@media (max-height:520px) and (orientation:landscape){.chapter__media{max-height:78svh}}

/* place / package card (11.8): photo top, title, one-line caption, location line with a pin */
.place{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;color:inherit;text-decoration:none;
  transition:background-color var(--t-tile) var(--ease-out)}
.place:hover{background:var(--surface-2)}
.place__media{aspect-ratio:4/3;overflow:hidden}
.place__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-tile) var(--ease-out)}
.place:hover .place__media img{transform:scale(1.03)}
.place__body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.place__title{font:400 clamp(24px,2vw,30px)/1.1 var(--font-display);letter-spacing:.01em}
.place__caption{color:var(--ink-muted);font-size:15px;line-height:1.55}
.place__loc{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:8px;color:var(--ink-faint);font-size:13.5px}
.place__loc svg{width:16px;height:16px;flex:none}
.place--cream{background:var(--cream);color:var(--cream-ink);border-color:transparent}
.place--cream:hover{background:#ebe7dc}
.place--cream .place__caption{color:var(--cream-muted)}
.place--cream .place__loc{color:rgba(20,16,14,.62)}

/* segmented control (11.8): pills for package / tasting choices */
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--hairline);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg a,.seg button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:var(--r-pill);border:0;background:transparent;color:var(--ink-muted);
  font:600 12.5px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out)}
.seg a:hover,.seg button:hover{color:var(--ink)}
.seg [aria-current="true"],.seg [aria-pressed="true"]{background:var(--surface-2);color:var(--ink)}

/* THE product backdrop (11.3), absorbed from the shop agent's shop.css so shop tiles, product pages and the home share one class:
   .stage > .stage__light + .stage__floor + img.stage__bottle (+ .stage__tags). --foot / --floor-blur / --stage-light tune it. */
.stage{--stage-light:rgba(243,236,224,.075);position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--surface);aspect-ratio:4/5}
.stage__light{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 38%,var(--stage-light) 0%,rgba(243,236,224,.03) 45%,rgba(243,236,224,0) 72%)}
.stage__floor{position:absolute;z-index:1;left:50%;bottom:calc(var(--foot,12%) - 2.2%);width:40%;height:4.4%;border-radius:50%;background:#000;opacity:.45;
  filter:blur(var(--floor-blur,12px));transform:translateX(-50%);pointer-events:none}
.stage__bottle{position:absolute;z-index:2;left:50%;bottom:calc(var(--foot,12%) - 1.9%);height:75.8%;width:auto;max-width:none;
  transform:translateX(-50%);transform-origin:50% 100%;transition:transform var(--t-tile) var(--ease-out);pointer-events:none}
.stage__tags{position:absolute;z-index:4;top:14px;left:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
/* .bottle-stage: deprecated alias kept so nothing breaks; use .stage */
.bottle-stage{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--surface);aspect-ratio:4/5}

/* bottle carousel (11.6): scroll-snap track, drag + arrows + keyboard; the centre bottle is large (site.js [data-carousel]) */
.carousel{position:relative}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,24vw,340px);gap:clamp(8px,2vw,32px);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc(50% - clamp(200px,24vw,340px) / 2);cursor:grab;-webkit-overflow-scrolling:touch}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.carousel__item{scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;text-align:center;color:inherit;text-decoration:none}
.carousel__item .stage{width:100%;transform:scale(.78);opacity:.8;transition:transform var(--t-tile) var(--ease-out),opacity var(--t-tile) var(--ease-out)}
.carousel__item.is-active .stage{transform:none;opacity:1}
.carousel__meta{margin-top:18px;display:grid;gap:6px;justify-items:center;opacity:0;transform:translateY(6px);transition:opacity var(--t-tile) var(--ease-out),transform var(--t-tile) var(--ease-out)}
.carousel__item.is-active .carousel__meta{opacity:1;transform:none}
.carousel__meta h3{font-size:var(--fs-h3)}
.carousel__meta p{color:var(--ink-muted);font-size:14.5px;max-width:30ch}
.carousel__price{color:var(--accent);font-weight:600;letter-spacing:.04em}
.carousel__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(20px,4vh,40px)}
.carousel__count{font:400 14px/1 var(--font-display);letter-spacing:.14em;color:var(--ink-muted);display:flex;align-items:center;gap:14px}
.carousel__count i{display:block;width:clamp(60px,10vw,140px);height:1px;background:var(--hairline-strong);position:relative;overflow:hidden}
.carousel__count i b{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0));transition:transform var(--t-tile) var(--ease-out)}
.carousel__hint{font:600 11.5px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.carousel__arrows{display:flex;gap:8px}
.carousel__arrows .icon-btn{border-color:var(--hairline-strong);border-radius:var(--r-pill)}
@media (prefers-reduced-motion:reduce){.carousel__item .stage,.carousel__meta{transition:none}}