/* ============================================================
   CUVÉE DESIGN TOKENS — mirror of theme.json settings.custom
   ============================================================ */
:root{
  --bg:#F7F0E6;          /* page linen */
  --panel:#FBF9F2;       /* interactive panel */
  --card:#FFFDF8;        /* card face */
  --ink:#3B322C;         /* espresso headline */
  --ink-2:#57504A;       /* body */
  --muted:#807A72;       /* captions */
  --wine:#7A2333;        /* primary — buttons, emphasis */
  --wine-2:#8A3B49;--deal:#276749;      /* prices, links */
  --wine-3:#9A5E66;      /* tag text */
  --blush:#F7EAE9;       /* tag pill bg */
  --blush-2:#E5C9CB;     /* tag pill border */
  --gold:#9D8663;        /* kicker */
  --sand:#E9DECF;        /* borders */
  --sand-2:#F0E7D8;      /* rules */
  --radius:14px; --radius-s:9px;
  --shadow:0 1px 2px rgba(59,50,44,.05),0 10px 28px -18px rgba(59,50,44,.25);
  --font:'EB Garamond',Georgia,'Times New Roman',serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink-2);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);line-height:1.55;
  font-optical-sizing:auto;}
img{max-width:100%;height:auto;display:block}
a{color:var(--wine-2)}
h1,h2,h3{font-weight:500;color:var(--ink);margin:0;line-height:1.12;letter-spacing:.005em}
em{color:var(--wine-2)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.section{padding-block:clamp(26px,5vw,54px)}
/* jump links must clear the sticky header */
[id]{scroll-margin-top:calc(var(--wp-admin--admin-bar--height,0px) + 96px)}
html{scroll-behavior:smooth}
/* ---------- expand-to-fullscreen ---------- */
.adv-card{position:relative;font-family:var(--font);cursor:pointer;width:100%}
.expand-hint{display:block;margin-top:8px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .25s}
.adv-card:hover .expand-hint,.adv-card:focus-visible .expand-hint{opacity:1}
@media(hover:none){.expand-hint{opacity:.85}}
.panel{position:relative}
.expand-btn{position:absolute;top:0;right:0;z-index:3;background:var(--card);border:1px solid var(--sand);
  border-radius:999px;padding:7px 15px;font-family:var(--font);font-size:.86rem;color:var(--ink-2);
  cursor:pointer;transition:background .2s,color .2s,transform .2s}
.expand-btn:hover{background:var(--wine);border-color:var(--wine);color:#FBF7EF;transform:translateY(-1px)}
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:0}
.lb-backdrop{position:absolute;inset:0;background:rgba(45,36,32,.72);backdrop-filter:blur(3px);animation:lbFade .25s ease}
.lb-shell{position:relative;background:var(--bg);width:100%;height:100%;max-width:1180px;max-height:100%;
  display:flex;flex-direction:column;animation:lbRise .3s cubic-bezier(.4,0,.2,1)}
@media(min-width:900px){.lb{padding:24px}.lb-shell{height:auto;max-height:92vh;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(45,36,32,.6)}}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px clamp(16px,3vw,28px);border-bottom:1px solid var(--sand);background:var(--card);flex-shrink:0}
.lb-title{font-size:clamp(1.05rem,2.4vw,1.4rem);margin:0;font-weight:500}
.lb-x{width:46px;height:46px;border-radius:50%;border:1px solid var(--sand);background:var(--bg);
  color:var(--ink);font-size:1.7rem;line-height:1;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.lb-x:hover{background:var(--wine);border-color:var(--wine);color:#FBF7EF}
.lb-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(16px,3vw,32px);flex:1}
.lb-body .panel{padding:0}
.lb-body .expand-btn{display:none}
.lb-body .band{background:none;border:0}
.lb-body .snap-row{grid-auto-columns:min(52vw,190px)}
@media(min-width:900px){.lb-body .snap-row{grid-auto-flow:row;grid-auto-columns:unset}}
.lb-country{display:grid;gap:clamp(16px,3vw,28px);align-items:center}
@media(min-width:820px){.lb-country{grid-template-columns:1.4fr 1fr}}
.lb-country img{width:100%;height:auto;border:1px solid var(--sand-2);border-radius:10px;display:block}
.lb-country .c-name{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--ink);margin:0 0 6px;line-height:1.1}
.lb-country .c-count{display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--wine-3);background:var(--blush);border:1px solid var(--blush-2);border-radius:999px;padding:5px 14px;margin-bottom:14px}
.lb-country p{font-size:1.05rem;color:var(--ink-2);margin:0 0 18px}
body.lb-open{overflow:hidden}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- header ---------- */
/* WP wraps template parts; the sticky must live on the WRAPPER or it is
   bounded by the part's own box and scrolls away. Admin bar offset included. */
header.wp-block-template-part{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:40}
.site-head{background:var(--card);border-bottom:1px solid var(--sand);position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:40}
.site-head .wrap{display:flex;align-items:center;gap:14px;min-height:56px;padding-block:8px}
.brand{display:block;flex-shrink:0}
.brand img{width:82px;transition:width .3s cubic-bezier(.4,0,.2,1)}
.site-head.is-scrolled .brand img{width:68px}
.site-head{transition:box-shadow .28s ease}
.site-head.is-scrolled{box-shadow:0 6px 20px -16px rgba(59,50,44,.5)}
@media(max-width:760px){.brand img{width:64px}.site-head.is-scrolled .brand img{width:56px}}
.nav{display:flex;gap:clamp(14px,2.6vw,30px);align-items:center;overflow-x:auto;scrollbar-width:none;white-space:nowrap;flex:1;padding-block:6px;justify-content:flex-end;margin-right:clamp(10px,2vw,22px)}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink);text-decoration:none;font-size:1.02rem;padding:8px 2px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--wine);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a.journey{color:var(--wine-2);font-style:italic}
.cart{border:1px solid var(--ink);border-radius:999px;padding:8px 18px;color:var(--ink);text-decoration:none;font-size:.95rem;background:var(--card);flex-shrink:0}

/* ---------- hero ---------- */
.hero{position:relative;text-align:center;overflow:hidden;padding-block:clamp(20px,4vw,44px) clamp(34px,6vw,60px)}
.hero::before{content:"";position:absolute;inset:0;background:url(../img/hero-wash.jpg) center/cover;opacity:.5;pointer-events:none}
.hero>.wrap{position:relative}
.hero-logo{width:clamp(190px,32vw,340px);margin:0 auto clamp(16px,2.6vw,26px);transform-origin:center top;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s}
body.is-scrolled .hero-logo{transform:scale(.62);opacity:.9}
.hero h1{font-size:clamp(1.45rem,3.45vw,2.35rem)}
.hero h1 em{font-style:italic}
.hero h1 em.brushed{position:relative;display:inline-block;color:var(--wine-2)}
.hero h1 em.brushed::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.16em;height:.3em;
  color:var(--ink);
  -webkit-mask:url(../img/brush-underline.svg) center/100% 100% no-repeat;
          mask:url(../img/brush-underline.svg) center/100% 100% no-repeat;
  background:currentColor;
  transform:scaleX(0);transform-origin:left;animation:brushIn .75s .35s cubic-bezier(.65,0,.35,1) forwards}
@keyframes brushIn{to{transform:scaleX(1)}}
.hero .sub{font-style:italic;color:var(--muted);margin:.6em 0 0}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,28px);margin-top:clamp(24px,4vw,44px);max-width:820px;margin-inline:auto;align-items:start}
.path-card{background:none;border:0;padding:clamp(10px,2vw,20px);text-decoration:none;color:var(--ink-2);
  display:grid;grid-template-rows:auto auto auto;justify-items:center;align-content:start;gap:10px;
  transition:transform .25s}
.path-card:hover{transform:translateY(-6px)}
.path-card img{transition:transform .45s cubic-bezier(.34,1.4,.64,1),filter .35s}
.path-card:hover img{transform:scale(1.07) rotate(-1.5deg);filter:drop-shadow(0 16px 22px rgba(59,50,44,.26))}
.path-card .t{position:relative;display:inline-block;padding-bottom:5px}
.path-card .t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--wine);
  transform:scaleX(0);transform-origin:center;transition:transform .35s cubic-bezier(.65,0,.35,1)}
.path-card:hover .t::after{transform:scaleX(1)}
.path-card:hover p{color:var(--ink-2)}
.path-card img{width:auto;max-width:100%;height:clamp(130px,17vw,190px);
  object-fit:contain;object-position:center bottom;align-self:end}
.path-card .t{font-size:1.35rem;color:var(--ink)}
.path-card p{margin:0;font-size:.95rem;text-align:center;color:var(--muted)}
@media(max-width:560px){.paths{grid-template-columns:1fr}}

/* ---------- section headers ---------- */
.kicker{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);text-align:center;margin:0 0 10px}
.sec-head{margin-bottom:clamp(16px,3vw,26px)}
.sec-head.center{text-align:center}
.sec-head h2,.sec-head h1{font-size:clamp(1.55rem,3.4vw,2.15rem)}
.sec-head .sub{font-style:italic;color:var(--muted);margin:.45em 0 0;font-size:1.06rem}
.sec-head.ruled{border-bottom:1px solid var(--ink);padding-bottom:14px}

/* ---------- snap rows (mobile carousel → desktop grid) ---------- */
.snap-row{display:grid;grid-auto-flow:column;grid-auto-columns:var(--colw,min(44vw,185px));gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 16px;scrollbar-width:thin}
.snap-row>*{scroll-snap-align:start}
@media(min-width:768px){
  .snap-row{grid-auto-flow:row;grid-auto-columns:unset;grid-template-columns:repeat(var(--cols,5),1fr);overflow:visible;padding-bottom:4px}
}

/* ---------- generic tap-card ---------- */
.tap-card{background:var(--card);border:1px solid var(--sand);border-radius:var(--radius-s);padding:12px 10px 12px;text-align:center;cursor:pointer;font-family:var(--font);color:var(--ink-2);transition:transform .22s,box-shadow .22s,border-color .22s;min-height:44px}
.tap-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tap-card:focus-visible,.pin:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
.tap-card img{margin:0 auto 8px;width:100%;max-width:128px;border-radius:6px}
.tap-card .t{display:block;font-weight:600;color:var(--ink);font-size:1.06rem}
.tap-card .s{display:block;font-style:italic;color:var(--muted);font-size:.95rem;margin-top:3px}
.tap-card[aria-pressed="true"]{border-color:var(--wine);box-shadow:0 0 0 1px var(--wine) inset,var(--shadow)}

/* ---------- adventure cards ---------- */
.adv-card{background:var(--card);border:1px solid var(--sand);border-radius:var(--radius-s);padding:14px 12px 16px;text-align:center;text-decoration:none;display:block;transition:transform .25s,box-shadow .25s}
.adv-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.adv-card img{margin:0 auto 12px;border:1px solid var(--sand-2);border-radius:6px;transition:transform .35s}
.adv-card:hover img{transform:scale(1.045) rotate(-.5deg)}
.adv-card .t{display:block;font-weight:600;color:var(--ink);font-size:1.1rem;margin-bottom:8px}
.count{display:inline-block;font-size:.66rem;letter-spacing:.22em;color:var(--wine-3);background:var(--blush);border:1px solid var(--blush-2);border-radius:999px;padding:4px 12px;text-transform:uppercase}

/* ---------- interactive panel shell ---------- */
.panel{padding:0}
/* full-bleed education band — the page alternates SHELF (linen) / LEARN (panel) */
.band{background:var(--panel);border-block:1px solid var(--sand);position:relative}
.band::before,.band::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:46px;height:1px;background:var(--gold);opacity:.5}
.band::before{top:0}.band::after{bottom:0}
/* explore quick-nav */
.explore-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-block:clamp(14px,2.5vw,22px)}
.explore-nav .lead{width:100%;text-align:center;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 4px}
.explore-nav a{display:inline-block;border:1px solid var(--blush-2);background:var(--blush);color:var(--wine);border-radius:999px;padding:8px 18px;text-decoration:none;font-size:.95rem;transition:background .2s,transform .2s}
.explore-nav a:hover{background:#F2DCDB;transform:translateY(-2px)}

/* ---------- reveal detail (pairing & colour) ---------- */
.reveal{max-width:640px;margin:18px auto 0;border-left:3px solid var(--wine);padding:14px 18px;text-align:left;display:none}
.reveal.is-open{display:block;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.reveal .r-style{font-size:1.32rem;color:var(--ink);font-weight:600}
.reveal .r-style em{font-style:italic;font-weight:400;color:var(--wine-2)}
.reveal p{margin:.4em 0 .6em}
.reveal a{font-style:italic}

/* ---------- colour story glass ---------- */
.colour-stage{display:grid;grid-template-columns:150px 1fr;gap:clamp(14px,3vw,30px);align-items:center;max-width:640px;margin:20px auto 0;padding:16px 18px}
#colour-glass{width:100%;max-width:130px;height:auto;margin-inline:auto;display:block;transition:opacity .3s}
.colour-note .r-style{font-size:1.3rem;color:var(--ink);font-weight:600}
.colour-note p{margin:.4em 0 0;font-size:1.06rem;line-height:1.55}
@media(max-width:560px){.colour-stage{grid-template-columns:110px 1fr}}

/* ---------- anatomy hotspots ---------- */
.anatomy-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,26px);margin-top:8px}
@media(max-width:760px){.anatomy-grid{grid-template-columns:1fr}}
.fig-card{padding:clamp(10px,2vw,18px)}
.fig-card h3{font-size:1.3rem;margin-bottom:4px}
.fig-card .fig-sub{font-style:italic;color:var(--muted);font-size:1rem;margin:0 0 14px}
.fig-flex{display:flex;gap:14px;align-items:flex-start}
.fig{position:relative;flex:1 1 58%}
.fig svg,.fig>img{width:100%;height:auto;display:block}
.pin{position:absolute;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;
  background:var(--wine);border:9px solid transparent;background-clip:padding-box;cursor:pointer;padding:0;
  box-sizing:content-box;transition:transform .2s,background .2s,box-shadow .2s;
  box-shadow:0 0 0 3px rgba(251,249,242,.9),0 1px 5px rgba(59,50,44,.35)}
.pin:hover{transform:translate(-50%,-50%) scale(1.25)}
.pin[aria-pressed="true"]{background:var(--ink);transform:translate(-50%,-50%) scale(1.35)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#fig-glass .fig>img,#fig-glass img{max-width:52%;margin-inline:auto}
.pin:hover{transform:translate(-50%,-50%) scale(1.12)}
.pin[aria-pressed="true"]{background:var(--ink)}
.legend{list-style:none;margin:0;padding:0;flex:1 1 42%;min-width:118px}
.legend li{margin-bottom:2px}
.legend button{display:flex;gap:9px;align-items:baseline;background:none;border:0;font-family:var(--font);font-size:1.06rem;color:var(--ink-2);cursor:pointer;padding:8px 9px;border-radius:6px;text-align:left;width:100%}
.legend .n{flex-shrink:0;width:23px;height:23px;border-radius:50%;border:1px solid var(--wine);color:var(--wine);font-size:.72rem;display:inline-flex;align-items:center;justify-content:center;transform:translateY(3px)}
.legend button[aria-pressed="true"]{background:var(--blush)}
.legend button[aria-pressed="true"] .n{background:var(--wine);color:#fff}
.fig-note{margin:12px 0 0;font-size:1.04rem;line-height:1.5;font-style:italic;color:var(--ink-2);min-height:2.6em}
.fig-note strong{color:var(--ink);font-style:normal}
@media(max-width:440px){.fig-flex{flex-direction:column}.legend{display:flex;flex-wrap:wrap;gap:2px}.legend li{margin:0}}

/* ---------- product rail ---------- */
.p-card{background:var(--card);border:1px solid var(--sand);border-radius:var(--radius-s);padding:12px;position:relative;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.p-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tag{position:absolute;top:12px;left:12px;font-size:.62rem;letter-spacing:.2em;color:var(--wine-3);background:var(--blush);border:1px solid var(--blush-2);border-radius:999px;padding:3px 10px;text-transform:uppercase;z-index:2}
.p-card .ph{margin:26px auto 12px;border-radius:8px;overflow:hidden;width:100%;max-width:190px}
.p-card .n{color:var(--ink);font-size:.97rem;line-height:1.35;text-decoration:none}
.p-card .pr{color:var(--wine-2);font-weight:600;margin-top:auto;padding-top:10px}
.rail-more{text-align:right;margin-top:6px}
.rail-more a{font-style:italic}

/* ---------- CTA band + footer ---------- */
.cta-band{text-align:center;padding-block:clamp(40px,7vw,80px)}
.cta-band h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:22px}
.btn{display:inline-block;border-radius:999px;padding:12px 26px;text-decoration:none;font-size:1rem;margin:5px 6px}
.btn.solid{background:var(--wine);color:#FBF7EF;border:1px solid var(--wine)}
.btn.solid:hover{background:#641C2A}
.btn.ghost{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn.ghost:hover{background:var(--card)}
.site-foot{border-top:1px solid var(--ink);background:#FBF7EC}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;padding-block:22px;font-size:.9rem;color:var(--ink-2)}
@media(max-width:700px){.site-foot .wrap{flex-direction:column;text-align:center}}

/* ---------- expand-to-fullscreen ---------- */
.adv-card{position:relative;font-family:var(--font);cursor:pointer;width:100%}
.expand-hint{display:block;margin-top:8px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .25s}
.adv-card:hover .expand-hint,.adv-card:focus-visible .expand-hint{opacity:1}
@media(hover:none){.expand-hint{opacity:.85}}
.panel{position:relative}
.expand-btn{position:absolute;top:0;right:0;z-index:3;background:var(--card);border:1px solid var(--sand);
  border-radius:999px;padding:7px 15px;font-family:var(--font);font-size:.86rem;color:var(--ink-2);
  cursor:pointer;transition:background .2s,color .2s,transform .2s}
.expand-btn:hover{background:var(--wine);border-color:var(--wine);color:#FBF7EF;transform:translateY(-1px)}
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:0}
.lb-backdrop{position:absolute;inset:0;background:rgba(45,36,32,.72);backdrop-filter:blur(3px);animation:lbFade .25s ease}
.lb-shell{position:relative;background:var(--bg);width:100%;height:100%;max-width:1180px;max-height:100%;
  display:flex;flex-direction:column;animation:lbRise .3s cubic-bezier(.4,0,.2,1)}
@media(min-width:900px){.lb{padding:24px}.lb-shell{height:auto;max-height:92vh;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(45,36,32,.6)}}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px clamp(16px,3vw,28px);border-bottom:1px solid var(--sand);background:var(--card);flex-shrink:0}
.lb-title{font-size:clamp(1.05rem,2.4vw,1.4rem);margin:0;font-weight:500}
.lb-x{width:46px;height:46px;border-radius:50%;border:1px solid var(--sand);background:var(--bg);
  color:var(--ink);font-size:1.7rem;line-height:1;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.lb-x:hover{background:var(--wine);border-color:var(--wine);color:#FBF7EF}
.lb-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(16px,3vw,32px);flex:1}
.lb-body .panel{padding:0}
.lb-body .expand-btn{display:none}
.lb-body .band{background:none;border:0}
.lb-body .snap-row{grid-auto-columns:min(52vw,190px)}
@media(min-width:900px){.lb-body .snap-row{grid-auto-flow:row;grid-auto-columns:unset}}
.lb-country{display:grid;gap:clamp(16px,3vw,28px);align-items:center}
@media(min-width:820px){.lb-country{grid-template-columns:1.4fr 1fr}}
.lb-country img{width:100%;height:auto;border:1px solid var(--sand-2);border-radius:10px;display:block}
.lb-country .c-name{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--ink);margin:0 0 6px;line-height:1.1}
.lb-country .c-count{display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--wine-3);background:var(--blush);border:1px solid var(--blush-2);border-radius:999px;padding:5px 14px;margin-bottom:14px}
.lb-country p{font-size:1.05rem;color:var(--ink-2);margin:0 0 18px}
body.lb-open{overflow:hidden}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ============================================================
   WOOCOMMERCE PRODUCT SHELVES — Woo's loop wearing Cuvée's card
   ============================================================ */
.cuvee-shelf{padding-block:clamp(26px,5vw,54px)}
.cuvee-shelf .wrap .sec-head{margin-bottom:clamp(14px,2.5vw,22px)}
.cuvee-shelf .woocommerce,
.cuvee-shelf .woocommerce-page{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.cuvee-shelf ul.products{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-auto-flow:column;grid-auto-columns:min(64vw,250px);overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:14px}
.cuvee-shelf ul.products>li.product{scroll-snap-align:start}
@media(min-width:768px){
  .cuvee-shelf ul.products{grid-auto-flow:row;grid-auto-columns:unset;
    grid-template-columns:repeat(4,1fr);overflow:visible;padding-bottom:0}
}
ul.products li.product{background:var(--card);border:1px solid var(--sand);
  border-radius:var(--radius-s);padding:12px;position:relative;display:flex;flex-direction:column;
  text-align:left;transition:transform .22s,box-shadow .22s;margin:0;width:auto;float:none}
ul.products li.product:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
ul.products li.product a img{width:100%;max-width:190px;margin:8px auto 12px;
  height:auto;border-radius:8px;display:block;mix-blend-mode:multiply}
ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font);font-size:.97rem;line-height:1.35;font-weight:400;
  color:var(--ink);padding:0;margin:0 0 6px}
ul.products li.product .price{font-family:var(--font);color:var(--wine-2);
  font-weight:600;font-size:1rem;margin-top:auto}
ul.products li.product .price del{opacity:.55;font-weight:400;margin-right:6px}
ul.products li.product .price ins{text-decoration:none}
/* The sale badge. It used to be wine on cream at .62rem, which is the same
   colour as every button, price and link on the site — so the one thing that
   should shout was camouflaged. Deep green instead: nothing else in the
   palette is green, so it reads instantly as "this one is marked down", and
   green carries the meaning without a second word. 6.3:1 against its own
   label and 6.6:1 against the card, so it is legible, not just loud. */
ul.products li.product .onsale,.woocommerce span.onsale{position:absolute;top:12px;right:12px;z-index:2;
  background:var(--deal,#276749);color:#FBF7EF;border-radius:999px;padding:6px 15px;
  font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;
  min-height:0;margin:0;box-shadow:0 2px 8px rgba(39,103,73,.28)}
ul.products li.product .button,
ul.products li.product .added_to_cart{display:inline-block;margin-top:10px;
  background:transparent;border:1px solid var(--ink);color:var(--ink);border-radius:999px;
  padding:7px 16px;font-family:var(--font);font-size:.88rem;text-decoration:none;transition:background .2s}
ul.products li.product .button:hover{background:var(--wine);border-color:var(--wine);color:#FBF7EF}
.woocommerce-loop-product__link{display:flex;flex-direction:column;flex:1;text-decoration:none}
ul.products li.product .out-of-stock-badge,
ul.products li.product .stock.out-of-stock{color:var(--muted);font-style:italic;font-size:.86rem}
/* Woo's legacy clearfix pseudo-elements become phantom grid cells — kill them */
ul.products::before,
ul.products::after{display:none!important;content:none!important}
.woocommerce::before,
.woocommerce::after{display:none!important;content:none!important}
ul.products li.product::before,
ul.products li.product::after{display:none!important;content:none!important}

/* price + add-to-cart share one line at the foot of the card */
ul.products li.product .cuvee-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:12px}
ul.products li.product .cuvee-card-foot .price{margin:0;flex:0 0 auto}
ul.products li.product .cuvee-card-foot .button,
ul.products li.product .cuvee-card-foot .added_to_cart{
  margin:0;flex:0 0 auto;padding:6px 16px;font-size:.86rem;white-space:nowrap}
ul.products li.product .cuvee-card-foot .added_to_cart{display:none}

/* ============================================================
   VISIT PAGE
   ============================================================ */
.visit-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(18px,3vw,34px);
  align-items:start;margin-top:clamp(18px,3vw,28px)}
@media(max-width:820px){.visit-grid{grid-template-columns:1fr}}
.visit-map{position:relative;border:1px solid var(--sand);border-radius:var(--radius);
  overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.visit-map iframe{display:block;width:100%;height:clamp(280px,42vw,430px);border:0;filter:saturate(.86) contrast(.96)}
.map-setup{margin:0;padding:10px 14px;background:var(--blush);border-top:1px solid var(--blush-2);
  color:var(--wine);font-size:.85rem;font-style:italic}
.map-setup code{font-style:normal;background:var(--card);padding:1px 5px;border-radius:4px;font-size:.92em}
.visit-facts h3{font-size:1.15rem;margin:0 0 6px}
.visit-facts h3+*{margin-top:0}
.visit-facts address{font-style:normal;color:var(--ink-2);line-height:1.6;margin-bottom:14px}
.visit-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.visit-actions .btn{margin:0}
.hours{width:100%;border-collapse:collapse;font-size:.97rem}
.hours th{text-align:left;font-weight:400;color:var(--ink);padding:7px 0;border-bottom:1px solid var(--sand-2)}
.hours td{text-align:right;color:var(--ink-2);padding:7px 0;border-bottom:1px solid var(--sand-2)}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.visit-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(24px,4vw,40px)}
@media(max-width:760px){.visit-ways{grid-template-columns:1fr}}
.visit-ways .way{background:var(--card);border:1px solid var(--sand);border-radius:var(--radius-s);padding:16px 18px}
.visit-ways .way .t{display:block;font-weight:600;color:var(--ink);font-size:1.05rem;margin-bottom:5px}
.visit-ways .way p{margin:0;font-size:.94rem;color:var(--ink-2)}
.explore-hero{padding-block:clamp(30px,5vw,58px) clamp(6px,1vw,10px)}

/* ============================================================
   BLOG
   ============================================================ */
.blog-hero{padding-block:clamp(30px,5vw,58px) clamp(6px,1vw,10px)}
.blog-list{padding-block:clamp(10px,2vw,20px) clamp(30px,5vw,60px)}
.blog-list .wp-block-post-template{gap:clamp(16px,2.4vw,26px)!important}
.blog-list .wp-block-post{background:var(--card);border:1px solid var(--sand);
  border-radius:var(--radius-s);padding:14px;display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s}
.blog-list .wp-block-post:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.blog-list .wp-block-post-featured-image{margin-bottom:12px;border-radius:8px;overflow:hidden}
.blog-list .wp-block-post-featured-image img{width:100%;height:auto;display:block}
.blog-list .wp-block-post-title{font-size:1.15rem;line-height:1.28;margin:0 0 6px}
.blog-list .wp-block-post-title a{color:var(--ink);text-decoration:none}
.blog-list .wp-block-post-title a:hover{color:var(--wine-2)}
.blog-list .wp-block-post-date{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:0 0 8px}
.blog-list .wp-block-post-excerpt{font-size:.95rem;color:var(--ink-2);margin:0}
.blog-list .wp-block-query-pagination{margin-top:clamp(20px,3vw,32px);gap:12px}
.blog-list .wp-block-query-pagination a{color:var(--wine-2)}
/* embedded video keeps its aspect on every screen */
.wp-block-embed__wrapper{position:relative}
.wp-block-embed.is-type-video .wp-block-embed__wrapper{padding-top:56.25%}
.wp-block-embed.is-type-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--radius-s)}
@media(max-width:860px){.blog-list .wp-block-post-template{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.blog-list .wp-block-post-template{grid-template-columns:1fr!important}}

/* Woo's legacy float grid (li.product{width:22.05%;float:left}) loads after our
   stylesheet and wins on equal specificity, collapsing cards inside their grid
   tracks. Force the item to fill its track. */
.cuvee-shelf .woocommerce ul.products li.product,
ul.products li.product{
  width:100%!important;float:none!important;clear:none!important;margin:0!important}
/* even card heights: cap the title, keep the foot pinned */
ul.products li.product .woocommerce-loop-product__title{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(1.35em * 2)}

/* ============================================================
   PRODUCT CARD — rebalanced.
   Bottle gets real presence, title is a fixed 2 lines, and the
   price + Add row is the loudest thing on the card.
   ============================================================ */
ul.products li.product{padding:10px 12px 12px;gap:0}

/* image: fills the card width in a consistent tall box, no letterboxing */
ul.products li.product a img,
ul.products li.product img{
  width:100%!important;max-width:none!important;
  aspect-ratio:3/4;object-fit:contain;
  margin:0 0 10px!important;border-radius:8px;display:block;
  mix-blend-mode:multiply}

/* title: exactly two lines, always — that's what keeps the row even */
ul.products li.product .woocommerce-loop-product__title{
  font-size:.95rem;line-height:1.32;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.64em}

/* the money row */
ul.products li.product .cuvee-card-foot{
  margin-top:0;padding-top:0;display:flex;align-items:center;
  justify-content:space-between;gap:10px}
ul.products li.product .cuvee-card-foot .price{
  font-size:1.18rem;font-weight:600;color:var(--wine-2);line-height:1}
ul.products li.product .cuvee-card-foot .button{
  background:var(--wine);border:1px solid var(--wine);color:#FBF7EF;
  padding:9px 20px;font-size:.92rem;border-radius:999px;
  box-shadow:0 1px 3px rgba(122,35,51,.28)}
ul.products li.product .cuvee-card-foot .button:hover{
  background:#641C2A;border-color:#641C2A}


/* ---- card proportions: squarer, names centred ---- */
ul.products li.product a img,
ul.products li.product img{aspect-ratio:1/1!important;margin:0 0 8px!important}
ul.products li.product .woocommerce-loop-product__title{
  text-align:center;font-size:.97rem;min-height:2.7em;margin:0 0 10px}
ul.products li.product{padding:10px 12px 12px}

/* ============================================================
   REGION PAGE  (/country/france/ etc.)
   ============================================================ */
.region-hero{padding-block:clamp(24px,4vw,48px) clamp(10px,2vw,18px)}
.region-grid{display:grid;gap:clamp(18px,3.4vw,40px);align-items:center;margin-top:clamp(10px,2vw,18px)}
@media(min-width:860px){.region-grid{grid-template-columns:1.05fr 1fr}}
.region-map img{width:100%;height:auto;display:block;border:1px solid var(--sand-2);border-radius:12px}
.region-copy h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.05;margin:0 0 8px}
.region-lede{font-style:italic;color:var(--wine-2);font-size:clamp(1.05rem,2.2vw,1.28rem);margin:0 0 12px}
.region-copy .count{display:inline-block;margin-bottom:16px}
.region-body{font-size:1.06rem;line-height:1.62;color:var(--ink-2);margin:0 0 14px}
.region-look{font-size:1.02rem;color:var(--ink-2);background:var(--panel);border-left:3px solid var(--wine);
  padding:12px 16px;border-radius:0 8px 8px 0;margin:0}
.region-look strong{color:var(--ink)}
.region-shelf-head{margin-top:clamp(26px,4vw,46px)}
.region-shelf .wp-block-query{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.region-shelf .wp-block-post-template{display:grid!important;gap:14px!important;
  grid-template-columns:repeat(2,1fr)!important;list-style:none;margin:0;padding:0}
@media(min-width:768px){.region-shelf .wp-block-post-template{grid-template-columns:repeat(4,1fr)!important}}
.region-shelf .wp-block-post{background:var(--card);border:1px solid var(--sand);border-radius:var(--radius-s);
  padding:10px 12px 12px;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.region-shelf .wp-block-post:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.region-shelf .wc-block-components-product-image img{width:100%;aspect-ratio:1/1;object-fit:contain;
  mix-blend-mode:multiply;border-radius:8px;margin-bottom:8px}
.region-shelf .wp-block-post-title{text-align:center;font-size:.95rem;line-height:1.32;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.64em}
.region-shelf .wp-block-post-title a{color:var(--ink);text-decoration:none}
.region-shelf .wc-block-components-product-price{font-size:1.16rem;font-weight:600;color:var(--wine-2);
  margin-top:auto;text-align:center;display:block}
.region-shelf .wp-block-button__link,
.region-shelf .wc-block-components-product-button a{background:var(--wine);border:1px solid var(--wine);
  color:#FBF7EF;border-radius:999px;padding:8px 18px;font-family:var(--font);font-size:.9rem;
  display:block;text-align:center;margin-top:10px;text-decoration:none}
/* region hero injected above Woo's own archive loop */
.region-injected .region-hero{padding-top:0}
.region-injected + .woocommerce-notices-wrapper{margin-top:0}
.woocommerce-products-header,
.tax-pa_country .woocommerce-products-header{display:none}
.tax-pa_country .woocommerce-breadcrumb{max-width:var(--wrap);margin:14px auto 0;
  padding-inline:clamp(16px,4vw,32px);font-size:.9rem;color:var(--muted)}
.tax-pa_country .woocommerce-result-count,
.tax-pa_country .woocommerce-ordering{display:none}

/* ============================================================
   PRODUCT GRID — every Woo loop (shop, category, region), one card.
   The homepage rails keep their snap-scroll; other archives are a grid.
   ============================================================ */
.woocommerce ul.products,
ul.products{list-style:none;margin:0 auto;padding:0;max-width:var(--wrap);
  display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.woocommerce ul.products,ul.products{grid-template-columns:repeat(4,1fr)}}
/* homepage rails override back to a horizontal rail on small screens */
.cuvee-shelf ul.products{grid-auto-flow:column;grid-auto-columns:min(64vw,250px);
  grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}
@media(min-width:768px){.cuvee-shelf ul.products{grid-auto-flow:row;grid-auto-columns:unset;
  grid-template-columns:repeat(4,1fr);overflow:visible;padding-bottom:0}}

/* the whole bottle, never cropped */
ul.products li.product a img,
ul.products li.product img{aspect-ratio:1/1;object-fit:contain!important;
  width:100%!important;max-width:none!important;background:transparent}

/* archive chrome that clashes with the design */
.woocommerce-products-header{display:none}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{display:none}
.woocommerce-breadcrumb{max-width:var(--wrap);margin:16px auto 6px;
  padding-inline:clamp(16px,4vw,32px);font-size:.9rem;color:var(--muted)}
.woocommerce-breadcrumb a{color:var(--wine-2)}
.woocommerce nav.woocommerce-pagination{max-width:var(--wrap);margin:26px auto 0;text-align:center}
.woocommerce nav.woocommerce-pagination ul{border:0;display:inline-flex;gap:6px}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--sand);border-radius:999px;
  padding:8px 14px;color:var(--ink-2);background:var(--card);font-family:var(--font)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--wine);border-color:var(--wine);color:#FBF7EF}
main .woocommerce{padding-inline:clamp(16px,4vw,32px);padding-bottom:clamp(30px,5vw,60px)}

/* ============================================================
   WOO 11 BLOCK PRODUCT CARD  (li.wc-block-product)
   The archive/taxonomy pages render the Product Collection block,
   not the classic ul.products loop. Same card, built with grid so
   the price and Add button share the bottom row — the block engine
   emits them as siblings, so grid areas are the only way to pair them.
   ============================================================ */

/* the grid that holds the cards */
ul.wc-block-product-template,
.wc-block-product-template{
  list-style:none!important;margin:0!important;padding:0!important;
  display:grid!important;gap:clamp(12px,2vw,20px);
  grid-template-columns:repeat(2,1fr)!important}
@media(min-width:768px){
  ul.wc-block-product-template,
  .wc-block-product-template{grid-template-columns:repeat(4,1fr)!important}}

/* the card */
li.wc-block-product{
  background:var(--card);border:1px solid var(--sand);border-radius:var(--radius-s);
  padding:10px 12px 12px;margin:0!important;width:auto!important;max-width:none!important;
  transition:transform .22s,box-shadow .22s;
  display:grid!important;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "img   img"
    "title title"
    "money btn";
  align-content:start;column-gap:10px;row-gap:0}
li.wc-block-product:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
li.wc-block-product::before,
li.wc-block-product::after{display:none!important;content:none!important}

/* row 1 — the bottle, whole, never cropped */
li.wc-block-product > .wc-block-components-product-image,
li.wc-block-product > .wc-block-grid__product-image{grid-area:img;margin:0}
li.wc-block-product .wc-block-components-product-image img,
li.wc-block-product .wc-block-grid__product-image img{
  aspect-ratio:1/1;object-fit:contain!important;
  width:100%!important;max-width:none!important;height:auto;
  mix-blend-mode:multiply;border-radius:8px;margin:0 0 8px;display:block}
li.wc-block-product .wc-block-components-product-image a{display:block}

/* row 2 — the name, centred, exactly two lines so rows stay even */
li.wc-block-product > .wp-block-post-title{
  grid-area:title;text-align:center!important;font-size:.97rem;line-height:1.32;
  margin:0 0 10px!important;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em}
li.wc-block-product > .wp-block-post-title a{color:var(--ink);text-decoration:none}

/* row 3 left — the price */
li.wc-block-product > .wp-block-woocommerce-product-price{
  grid-area:money;display:flex!important;align-items:center;justify-content:flex-start;
  margin:0!important;text-align:left!important;min-width:0}
li.wc-block-product .wc-block-components-product-price{
  font-family:var(--font);font-size:1.18rem;font-weight:600;
  color:var(--wine-2)!important;line-height:1;margin:0}
li.wc-block-product .wc-block-components-product-price del{opacity:.55;font-weight:400;margin-right:6px}
li.wc-block-product .wc-block-components-product-price ins{text-decoration:none}

/* row 3 right — Add. Sits on the same line as the price. */
li.wc-block-product > .wc-block-components-product-button,
li.wc-block-product > .wp-block-woocommerce-product-button{
  grid-area:btn;margin:0!important;display:flex!important;
  align-items:center;justify-content:flex-end;width:auto}
li.wc-block-product .wc-block-components-product-button .wp-block-button__link,
li.wc-block-product .wc-block-components-product-button a.button,
li.wc-block-product .wc-block-components-product-button button{
  background:var(--wine)!important;border:1px solid var(--wine)!important;color:#FBF7EF!important;
  padding:9px 20px!important;font-size:.92rem!important;font-family:var(--font);
  border-radius:999px!important;line-height:1;white-space:nowrap;
  box-shadow:0 1px 3px rgba(122,35,51,.28)}
li.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover,
li.wc-block-product .wc-block-components-product-button a.button:hover,
li.wc-block-product .wc-block-components-product-button button:hover{
  background:#641C2A!important;border-color:#641C2A!important}

/* the classic-loop footer never renders on a block card — suppress it so it
   can't leave an empty row or a duplicate price */
li.wc-block-product > .cuvee-card-foot{display:none!important}

/* anything the block engine adds that we haven't named (rating, sale flash,
   stock line) drops to its own full-width row rather than breaking the areas */
li.wc-block-product > .wc-block-components-product-rating,
li.wc-block-product > .wp-block-woocommerce-product-rating,
li.wc-block-product > .wc-block-components-product-sale-badge,
li.wc-block-product > .wp-block-woocommerce-product-stock-indicator{
  grid-column:1 / -1;text-align:center;margin:0 0 6px}

/* ============================================================
   BRUSHED ACCENT outside the hero (section headings)
   ============================================================ */
h2 em.brushed,
h1:not(.hero h1) em.brushed{
  position:relative;display:inline-block;color:var(--wine-2);font-style:normal}
h2 em.brushed::after,
h1:not(.hero h1) em.brushed::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.14em;height:.26em;
  background:var(--wine-2);
  -webkit-mask:url(../img/brush-underline.svg) center/100% 100% no-repeat;
          mask:url(../img/brush-underline.svg) center/100% 100% no-repeat}

/* ============================================================
   EXPANDABLE REGION MAP  (button wrapper on the region page)
   ============================================================ */
button.region-map{
  display:block;width:100%;padding:0;border:1px solid var(--sand-2);border-radius:12px;
  background:var(--card);cursor:zoom-in;position:relative;overflow:hidden;
  transition:transform .22s,box-shadow .22s}
button.region-map:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
button.region-map img{width:100%;height:auto;display:block;border:0;border-radius:12px}
button.region-map .expand-hint{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  background:rgba(255,253,248,.92);border:1px solid var(--sand);border-radius:999px;
  padding:5px 14px;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wine-2);font-family:var(--font);pointer-events:none}

/* lightbox: a plain image blown up full screen */
.lb-img img{width:100%;height:auto;display:block;border-radius:10px}

/* ============================================================
   PRODUCT ARCHIVE CHROME — kill the duplicate term title and
   the empty band it leaves above our region hero.
   ============================================================ */
body.tax-pa_country .wp-block-query-title,
body.tax-pa_style .wp-block-query-title,
body.tax-product_cat .wp-block-query-title,
body.post-type-archive-product .wp-block-query-title,
body.tax-pa_country .woocommerce-products-header,
body.tax-pa_style .woocommerce-products-header{display:none!important}
body.tax-pa_country .term-description,
body.tax-pa_style .term-description{display:none}
.region-injected{margin:0}
.region-injected + *{margin-top:0}

/* ---- archive chrome, Woo 11 block versions (the classic selectors above
        don't match these) ---- */
.wc-block-product-results-count,
.wp-block-woocommerce-product-results-count,
.wc-block-catalog-sorting,
.wp-block-woocommerce-catalog-sorting{display:none!important}
/* the toolbar row that held them collapses with them */
.wp-block-group:has(> .wc-block-product-results-count):has(> .wc-block-catalog-sorting){display:none!important}
/* the store-notice slot reserves 60px even with nothing to say */
.wc-block-store-notices:not(:has(.woocommerce-message)):not(:has(.woocommerce-error)):not(:has(.woocommerce-info)):not(:has(.wc-block-components-notice-banner)){
  display:none!important}

/* make sure the map's tap hint is actually visible */
button.region-map .expand-hint{opacity:1!important;visibility:visible!important}

/* ============================================================
   CARD BREATHING ROOM — one place, both render paths.
   Bottle, name and money row all sit inside a real margin
   instead of running to the card edge.
   ============================================================ */
ul.products li.product,
li.wc-block-product{
  padding:16px 16px 18px!important}
@media(min-width:768px){
  ul.products li.product,
  li.wc-block-product{padding:20px 20px 22px!important}}

/* the bottle keeps a little air of its own above the name */
ul.products li.product a img,
ul.products li.product img,
li.wc-block-product .wc-block-components-product-image img,
li.wc-block-product .wc-block-grid__product-image img{
  margin:0 0 14px!important}

/* name sits clear of both the bottle and the money row */
ul.products li.product .woocommerce-loop-product__title,
li.wc-block-product > .wp-block-post-title{
  margin:0 0 14px!important}

/* a touch more room between cards too, so the buffer reads */
ul.wc-block-product-template,
.wc-block-product-template{gap:clamp(14px,2.2vw,24px)!important}

/* ============================================================
   EXPLORE — THE ATLAS, THE GRAPE LIFE, THE PAIRING FIELD
   Ported from the tested "Walk Through the Vine" prototype and
   re-tokenised onto the Cuvée palette. Everything opens the one
   shared pop-up (.modal-scrim) printed in the footer.
   ============================================================ */

/* --- a plate: the big, generous panel these modules live on --- */
.plate{padding:clamp(22px,3.4vw,44px) clamp(16px,3vw,40px)}
.plate .sec-head{margin-bottom:clamp(14px,2.4vw,26px)}
.plate-tall{padding-bottom:clamp(28px,4vw,56px)}

/* --- country tabs --- */
.atlastabs{display:flex;justify-content:center;gap:6px;margin:6px 0 18px;flex-wrap:wrap}
.atab{background:none;border:1px solid transparent;cursor:pointer;padding:7px 18px;border-radius:999px;
  font-family:var(--font);font-weight:500;font-size:clamp(1rem,.95rem + .3vw,1.22rem);
  color:var(--muted);transition:color .2s,background .2s,border-color .2s;line-height:1}
.atab:hover{color:var(--ink);border-color:var(--sand)}
.atab.on{color:#FBF7EF;background:var(--wine);border-color:var(--wine)}

/* --- the map stage --- */
.atlasstage{position:relative;height:min(66vh,620px)}
.amap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .45s}
.amap.on{opacity:1;pointer-events:auto}
.mapwrap{position:relative;height:100%;display:block}
.mapwrap img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block;border-radius:10px}

/* --- the map pins ---
   NOTE: scoped to .mapwrap. The anatomy module uses a bare .pin for its
   barrel/glass hotspots — an unscoped rule here silently resizes those. */
.mapwrap .pin{position:absolute;width:26px;height:auto;border-radius:0;background:none;border:0;padding:0;
  transform:translate(-50%,-50%);cursor:pointer;transition:transform .18s;
  filter:drop-shadow(0 2px 4px rgba(59,50,44,.35));
  animation:pinPulse 2.6s ease-in-out infinite}
.mapwrap .pin svg{width:100%;height:auto;display:block}
.mapwrap .pin:hover,.mapwrap .pin:focus-visible{
  transform:translate(-50%,-50%) scale(1.25);outline:none;animation:none}
.mapwrap .pin:hover svg circle,.mapwrap .pin:focus-visible svg circle{fill:var(--wine)}
.mapwrap .pin:hover svg path,.mapwrap .pin:focus-visible svg path{stroke:#FBF7EF}
/* a slow pulse so it reads as tappable without needing a caption */
@keyframes pinPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.mapwrap .pin{animation:none}}

.atlas-foot{text-align:center;margin:16px 0 0;font-size:.95rem}

/* --- the grape life --- */
.seasonrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,22px);align-items:end}
.season{margin:0;cursor:pointer;text-align:center;background:none;border:0;padding:0}
.season .ph{display:flex;align-items:flex-end;justify-content:center;height:clamp(110px,15vw,180px)}
.season .ph img{height:100%;width:auto;max-width:100%;object-fit:contain;
  transition:transform .22s;mix-blend-mode:multiply}
.season:hover .ph img{transform:translateY(-4px) scale(1.03)}
.season figcaption{margin-top:10px;line-height:1.3}
.season b{display:block;font-family:var(--font);font-weight:500;font-size:clamp(1.05rem,1vw + .8rem,1.4rem);color:var(--wine-2)}
.season i{display:block;font-size:.9rem;color:var(--ink-2);margin-top:2px}
@media(max-width:640px){.seasonrow{grid-template-columns:1fr 1fr;gap:18px}.season i{font-size:.82rem}}

/* --- the pairing field: scattered, not a grid --- */
.pairfield{position:relative;height:720px;margin-top:10px}
.pairing{position:absolute;left:var(--px);top:var(--py);width:29%;margin:0;cursor:pointer;
  transform:rotate(var(--pr)) scale(var(--ps));transform-origin:50% 50%;
  transition:transform .24s}
.pairing:hover{transform:rotate(0deg) scale(calc(var(--ps) * 1.04))}
.pairart{position:relative;display:block}
.pairing img{width:100%;height:auto;mix-blend-mode:multiply}
.pairing .pairdish{width:82%;margin-left:18%}
.pairing .pairglass{position:absolute;left:0;bottom:14%;width:30%;z-index:2}
.pairing figcaption{margin-top:6px;line-height:1.3;text-align:left}
.pairing b{display:block;font-family:var(--font);font-weight:500;
  font-size:clamp(1.05rem,.9vw + .85rem,1.45rem);color:var(--wine-2)}
.pairing span{display:block;font-size:.95rem;color:var(--ink-2)}
.pairing i{display:block;font-size:.82rem;color:var(--gold);letter-spacing:.04em;margin-top:2px}
.pairing:hover i{color:var(--wine)}
@media(max-width:820px){
  .pairfield{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .pairing{position:static;width:100%;transform:none}
  .pairing:hover{transform:none}
  .pairing i{display:none}
}

/* --- the shared pop-up --- */
.modal-scrim{position:fixed;inset:0;z-index:9999;background:rgba(59,50,44,.5);
  display:none;place-items:center;padding:24px;backdrop-filter:blur(2px)}
.modal-scrim.open{display:grid}
.modal{position:relative;width:min(580px,94vw);max-height:86vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--sand);border-radius:var(--radius);
  padding:clamp(24px,3vw,38px);text-align:left;box-shadow:var(--shadow)}
.modal .x{position:absolute;top:10px;right:12px;width:38px;height:38px;border:1px solid var(--sand);
  background:var(--panel);border-radius:999px;cursor:pointer;font-size:16px;line-height:1;
  color:var(--ink);font-family:var(--font)}
.modal .x:hover{color:#FBF7EF;background:var(--wine);border-color:var(--wine)}
.modal .mk{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.modal h4{margin:6px 0 0;font-family:var(--font);font-weight:500;
  font-size:clamp(1.7rem,1.2vw + 1.4rem,2.4rem);line-height:1.08;color:var(--ink)}
.modal p{margin:14px 0 0;font-size:1.02rem;line-height:1.62;color:var(--ink-2)}
.modal .mshop{margin-top:22px}
.modal .btn.solid{display:inline-block;background:var(--wine);border:1px solid var(--wine);
  color:#FBF7EF;padding:11px 22px;border-radius:999px;text-decoration:none;font-size:.95rem}
.modal .btn.solid:hover{background:#641C2A;border-color:#641C2A}
body.lb-open{overflow:hidden}

/* ============================================================
   ANATOMY PINS — numbered chips, not blank dots.
   The illustrations carry no printed numbers of their own, so the
   pin has to say which part it is. Scoped to .fig so the map pins
   (.mapwrap .pin) are untouched.
   ============================================================ */
.fig .pin{
  width:28px;height:28px;border:0;border-radius:50%;padding:0;
  background:var(--wine);color:#FBF7EF;
  font-family:var(--font);font-size:.92rem;font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  box-shadow:0 0 0 3px rgba(251,249,242,.95),0 2px 6px rgba(59,50,44,.4)}
.fig .pin .sr{
  position:static;width:auto;height:auto;overflow:visible;clip:auto;
  clip-path:none;white-space:nowrap}
.fig .pin:hover{transform:translate(-50%,-50%) scale(1.18);background:#641C2A}
.fig .pin[aria-pressed="true"]{
  background:var(--ink);transform:translate(-50%,-50%) scale(1.24);
  box-shadow:0 0 0 3px rgba(251,249,242,.95),0 3px 10px rgba(59,50,44,.5)}
@media(max-width:560px){.fig .pin{width:24px;height:24px;font-size:.82rem}}

/* ============================================================
   MOBILE FIXES
   1. No sideways scrolling anywhere — the page moves in one
      direction only, and every rail fits the screen it is on.
   2. Map pins are positioned as a percentage of their wrapper, so
      the wrapper must be exactly the size of the map image.
   3. The colour glasses are one canvas now, and the stage reserves
      that box, so swapping a glass can't shift the layout.
   ============================================================ */

/* ---- 1. product rails: a grid that fits, not a scroller ---- */
.cuvee-shelf ul.products,
.woocommerce .cuvee-shelf ul.products{
  grid-auto-flow:row!important;grid-auto-columns:unset!important;
  grid-template-columns:repeat(2,1fr)!important;
  overflow-x:visible!important;overflow:visible!important;
  scroll-snap-type:none!important;padding-bottom:0!important}
@media(min-width:768px){
  .cuvee-shelf ul.products,
  .woocommerce .cuvee-shelf ul.products{grid-template-columns:repeat(4,1fr)!important}}

/* ---- the interactive pickers wrap too, instead of scrolling sideways ---- */
.snap-row{grid-auto-flow:row!important;grid-auto-columns:unset!important;
  grid-template-columns:repeat(2,1fr);overflow:visible!important;
  scroll-snap-type:none!important;padding:4px 0 6px}
@media(min-width:560px){.snap-row{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.snap-row{grid-template-columns:repeat(var(--cols,5),1fr)}}

/* Nothing may push the viewport sideways. NOTE: deliberately not
   html/body{overflow-x:hidden} — that creates a scroll container and
   breaks the sticky header. Fix the overflow at source instead. */
.wp-site-blocks,.cuvee-shelf,.section,.wrap{max-width:100%}
img,svg,video{max-width:100%}

/* ---- 2. the map wrapper hugs the map, so the pins land where they should ---- */
.amap .mapwrap{display:inline-block!important;line-height:0;
  height:auto!important;width:auto!important;max-width:100%;max-height:100%}
.amap .mapwrap img{display:block;width:auto!important;height:auto!important;
  max-width:100%;max-height:100%;object-fit:contain}
.atlasstage{display:flex;align-items:center;justify-content:center}
@media(max-width:768px){
  /* the maps are 2000x1088 — give the stage that shape so the map fills it
     and the pins have the whole width to sit on */
  .atlasstage{height:min(66vh,620px)}
  .mapwrap .pin{width:32px}   /* a finger, not a mouse pointer */
}

/* ---- 3. the colour stage never jumps ---- */
.colour-stage{align-items:end}
#colour-glass{aspect-ratio:470/940;width:100%;height:auto;
  object-fit:contain;object-position:bottom center}

/* ============================================================
   THE SHOP / EXPLORE PATH CARDS — let the illustrations lead.
   These two drawings are the best thing on the homepage, so they
   get real size: roughly half the screen width on a phone and up
   to 340px on a wide desktop.
   ============================================================ */
.paths{max-width:940px;gap:clamp(16px,3vw,36px)}
.path-card img{
  height:clamp(210px,24vw,340px)!important;
  width:auto;max-width:100%;object-fit:contain;object-position:center bottom}
.path-card .t{font-size:clamp(1.35rem,.9vw + 1.2rem,1.7rem)}
.path-card p{font-size:clamp(.95rem,.2vw + .9rem,1.05rem);max-width:34ch}

/* stacked on a phone: the card has the full width, so the drawing can be
   properly large without crowding the copy */
@media(max-width:560px){
  .paths{grid-template-columns:1fr;gap:clamp(18px,5vw,30px)}
  .path-card{padding:6px 10px 14px}
  .path-card img{height:clamp(220px,52vw,300px)!important}
}
/* two-up on a small tablet still reads well at this size */
@media(min-width:561px) and (max-width:900px){
  .path-card img{height:clamp(200px,26vw,280px)!important}
}

/* ============================================================
   HEADER ON A PHONE
   The nav was a nowrap horizontal scroller, so on a narrow screen
   it slid straight over the logo. Below 640px it drops to its own
   full-width row instead.
   ============================================================ */
/* superseded by the .nav-toggle rules at the end of this file */

/* ============================================================
   MAP PINS — GLOBAL
   These rules used to live in the Explore stylesheet, which only
   loads on /explore/. The homepage atlas therefore kept the
   anatomy module's 3px halo, which renders as a white TILE behind
   every pin, and a fixed 32px width that swamps a phone-sized map.
   ============================================================ */
.mapwrap .pin{
  box-shadow:none!important;background:none!important;border:0!important;
  border-radius:0!important;padding:0;
  width:clamp(16px,3.4%,26px)!important;height:auto!important}
.mapwrap .pin svg{filter:drop-shadow(0 1px 3px rgba(59,50,44,.55))}
.mapwrap .pin:hover,.mapwrap .pin:focus-visible{
  transform:translate(-50%,-50%) scale(1.22);box-shadow:none!important}

/* ============================================================
   CARD TITLES — CLAMP THAT ACTUALLY CLAMPS
   -webkit-line-clamp only works on display:-webkit-box, and
   something downstream was resetting the title to flow-root. The
   clamp silently did nothing, so a long name overflowed and got
   sliced mid-letter by the min-height. Fixed height, two lines.
   ============================================================ */
ul.products li.product .woocommerce-loop-product__title,
li.wc-block-product > .wp-block-post-title,
li.wc-block-product > .wp-block-post-title a{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;line-clamp:2!important;
  overflow:hidden!important}
/* A phone card is ~170px wide, so a name that fits two lines on a desktop
   needs three here. Fixed height either way, so rows still line up. */
ul.products li.product .woocommerce-loop-product__title,
li.wc-block-product > .wp-block-post-title{
  height:4.06em!important;min-height:0!important;line-height:1.32;
  display:block!important}
@media(min-width:768px){
  ul.products li.product .woocommerce-loop-product__title,
  li.wc-block-product > .wp-block-post-title{height:2.72em!important}}

/* ============================================================
   THE SHOP / EXPLORE ILLUSTRATIONS
   These two carry the whole hero — give them room. Bigger on a
   phone than they were on a desktop before.
   ============================================================ */
.path-card img{
  height:clamp(190px,30vw,300px)!important;
  max-width:100%;width:auto;object-fit:contain;
  mix-blend-mode:multiply}
.path-card{padding:clamp(8px,1.6vw,16px)}
.path-card .t{font-size:clamp(1.3rem,1vw + 1.1rem,1.7rem)}
@media(max-width:560px){
  .paths{gap:clamp(10px,3vw,24px)}
  .path-card p{font-size:.92rem;line-height:1.45}
}

/* ============================================================
   THE WINGED BOTTLE + THE SHOP TABLE
   Two pieces of the client's own artwork doing structural work:
   one marks the fast-moving shelf, one closes the page.
   ============================================================ */
.sec-head.has-mark{position:relative}
.sec-mark{display:block;margin:0 auto clamp(2px,1vw,10px);
  width:clamp(190px,26vw,340px);height:auto;mix-blend-mode:multiply;
  filter:drop-shadow(0 10px 16px rgba(59,50,44,.12))}

.cta-band{position:relative;overflow:hidden;padding-bottom:0!important}
.cta-band .wrap{position:relative;z-index:2}
.cta-sub{margin:10px 0 0;color:var(--ink-2);font-size:1.05rem}
.cta-actions{margin:22px 0 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-table{position:relative;z-index:1;margin-top:clamp(18px,3vw,34px);
  /* only the tabletop and the bottles standing on it — the legs are cropped
     out of the artwork itself, this just bleeds it to the page edges */
  width:100%;overflow:hidden;line-height:0}
.cta-table img{width:100%;min-width:760px;height:auto;display:block;
  margin-inline:auto;mix-blend-mode:multiply}
@media(max-width:760px){
  .cta-table{overflow-x:auto;scrollbar-width:none}
  .cta-table::-webkit-scrollbar{display:none}
  .cta-table img{min-width:900px}
}

/* ============================================================
   THE PHONE MENU
   Five links + logo + cart do not fit across a phone. Above 720px
   nothing changes; below it the links live behind a three-line
   button and open as a sheet under the header.
   ============================================================ */
.nav-toggle{display:none;width:44px;height:44px;padding:11px 10px;margin-left:auto;
  background:none;border:0;cursor:pointer;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
  transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s}

@media(max-width:720px){
  .site-head .wrap{gap:8px;min-height:52px}
  .nav-toggle{display:flex;order:3}
  .cart{order:4;padding:6px 14px;font-size:.86rem}
  .nav{
    order:5;position:absolute;left:0;right:0;top:100%;
    flex:1 0 100%;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;margin:0;padding:6px 0 10px;
    background:var(--card);border-bottom:1px solid var(--sand);
    box-shadow:0 14px 26px -18px rgba(59,50,44,.55);
    overflow:hidden;white-space:normal;
    max-height:0;opacity:0;visibility:hidden;
    transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .22s,visibility .22s}
  .site-head.nav-open .nav{max-height:60vh;opacity:1;visibility:visible}
  .nav a{font-size:1.02rem;padding:12px clamp(16px,4vw,32px);border-bottom:1px solid var(--sand-2)}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  .site-head{position:sticky}
  .site-head .wrap{position:relative}
  /* the three lines become an x */
  .site-head.nav-open .nav-toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .site-head.nav-open .nav-toggle span:nth-child(2){opacity:0}
  .site-head.nav-open .nav-toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
}

/* ============================================================
   BARREL & GLASS — the same reveal the dinner cards use
   ============================================================ */
/* The panel is there from the start — only what is inside it changes. Styling
   the resting state differently made the first tap look like a page shift. */
.fig-note{margin:14px 0 0;font-size:1.02rem;line-height:1.55;color:var(--ink-2);
  background:var(--panel);border-left:3px solid var(--sand);
  border-radius:0 10px 10px 0;padding:14px 18px;min-height:5.4em;
  transition:border-color .25s,background .25s}
.fig-note.is-open{border-left-color:var(--wine)}
.fig-prompt{display:block;font-style:italic;color:var(--muted);font-size:.98rem}
.fig-note.is-open .r-style{display:block;font-size:1.16rem;font-weight:600;color:var(--wine-2);
  line-height:1.2;margin-bottom:6px}
.fig-note.is-open p{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink-2)}

/* ============================================================
   "FLYING OFF THE SHELVES" — the lead shelf gets a real lede
   Artwork on the left, the words on the right, both bigger than
   a normal section head. This is the shelf we want people to hit
   first, so it should not look like the four below it.
   ============================================================ */
.rail-lede{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  align-items:center;gap:clamp(16px,3.4vw,48px);text-align:left;
  padding-bottom:clamp(14px,2vw,24px)}
.rail-lede-art img{width:100%;height:auto;display:block;mix-blend-mode:multiply;
  filter:drop-shadow(0 14px 24px rgba(59,50,44,.16))}
.rail-lede-copy .kicker{margin:0 0 6px;text-align:left}
.rail-lede-copy h2{font-size:clamp(2rem,1.6vw + 1.7rem,3.1rem);line-height:1.06;margin:0}
.rail-lede-copy .sub{margin:10px 0 0;font-size:clamp(1rem,.4vw + .95rem,1.16rem);
  line-height:1.55;max-width:46ch}
/* the ruled underline belongs under the pair, not under the text alone */
.rail-lede.ruled::after{grid-column:1 / -1}

@media(max-width:720px){
  .rail-lede{grid-template-columns:1fr;gap:6px;text-align:center}
  .rail-lede-art{max-width:78%;margin-inline:auto}
  .rail-lede-copy .kicker,
  .rail-lede-copy .sub{text-align:center}
  .rail-lede-copy .sub{margin-inline:auto}
}

/* ============================================================
   REGION PAGES — built out
   The country map now carries the same pins as the atlas, the
   sub-regions are listed under the story, and the other countries
   sit at the bottom so a visitor can keep travelling.
   ============================================================ */
.region-map-wrap{display:block}
.region-mapwrap{display:inline-block;position:relative;line-height:0;max-width:100%}
.region-mapwrap img{width:100%;height:auto;display:block;border:0;border-radius:12px;
  mix-blend-mode:multiply;filter:drop-shadow(0 12px 24px rgba(59,50,44,.14))}
.region-pin-hint{margin:10px 0 0;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);text-align:center}

.region-sub-head{margin-top:clamp(26px,4vw,48px)}
.region-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:clamp(12px,2vw,20px) 0 0;padding:0}
.region-chip{background:var(--card);border:1px solid var(--sand);border-radius:999px;
  padding:10px 20px;font-family:var(--font);font-size:1rem;color:var(--ink);
  cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
.region-chip:hover{background:var(--wine);border-color:var(--wine);color:#FBF7EF;
  transform:translateY(-2px)}

.region-elsewhere{margin-top:clamp(30px,5vw,60px);padding-top:clamp(20px,3vw,32px);
  border-top:1px solid var(--sand-2)}
.region-elsewhere-lede{margin:0 0 14px;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.region-elsewhere ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,2vw,20px);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.region-elsewhere ul{grid-template-columns:repeat(4,1fr)}}
.region-elsewhere a{display:block;text-decoration:none;color:var(--ink);
  transition:transform .22s}
.region-elsewhere a:hover{transform:translateY(-3px)}
.region-elsewhere img{width:100%;height:auto;display:block;border-radius:10px;
  mix-blend-mode:multiply;margin-bottom:8px}
.region-elsewhere .n{display:block;font-size:1.06rem;color:var(--wine-2)}
.region-elsewhere .c{display:block;font-size:.86rem;color:var(--muted)}

/* ============================================================
   PAIRING REVEAL — pointed at the card that opened it
   ============================================================ */
.reveal.is-open{position:relative}
.reveal.is-open::before{
  content:"";position:absolute;top:-9px;left:var(--caret-x,50%);
  width:18px;height:18px;margin-left:-9px;transform:rotate(45deg);
  background:var(--panel);border-left:1px solid var(--sand);border-top:1px solid var(--sand)}
/* a soft highlight the width of the chosen card, so the eye connects the two */
.reveal.is-open::after{
  content:"";position:absolute;top:-4px;left:var(--caret-x,50%);
  width:var(--caret-w,120px);margin-left:calc(var(--caret-w,120px) / -2);
  height:3px;background:var(--wine);border-radius:2px;opacity:.9}
@media(max-width:820px){
  .reveal.is-open::after{display:none}
}

/* ============================================================
   CART — a real link, with a count when there is something in it
   ============================================================ */
.cart{display:inline-flex;align-items:center;gap:8px}
.cart-count{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--wine);color:#FBF7EF;font-size:.72rem;font-weight:600;line-height:1}
.cart-count[hidden]{display:none}

/* ============================================================
   CARD TITLES — three lines everywhere
   Two lines was never enough for a producer + appellation + vintage
   at card width, so the third line was being sliced in half.
   ============================================================ */
ul.products li.product .woocommerce-loop-product__title,
li.wc-block-product > .wp-block-post-title{height:4.06em!important}
@media(min-width:768px){
  ul.products li.product .woocommerce-loop-product__title,
  li.wc-block-product > .wp-block-post-title{height:4.06em!important}}

/* ============================================================
   THE TWO SMALL ILLUSTRATIONS
   ill-crate and ill-backpack exist only at ~200px in the entire
   asset library. Displayed much beyond that they go soft, so the
   cap here is deliberate until a larger export arrives.
   ============================================================ */
.path-card img{height:clamp(150px,20vw,220px)!important}


/* ============================================================
   SINGLE PRODUCT
   WooCommerce renders this page with BLOCKS on this theme, not the classic
   template: wp-block-columns > wp-block-column > wp-block-post-title. The
   outer `div.product` is only a wrapper around <main>, so laying a grid on it
   squashes the entire page into one column — that mistake cost a deploy.
   Layout is therefore left entirely to WooCommerce's own block template; this
   block only dresses what is inside it.
   ============================================================ */
.single-product .woocommerce-notices-wrapper{max-width:var(--wrap);margin-inline:auto}

.single-product .wp-block-post-title,
.single-product .product_title{font-size:clamp(1.6rem,1.2rem + 1.9vw,2.6rem);line-height:1.08;margin:0 0 6px}

.single-product .woocommerce-product-gallery,
.single-product .wp-block-woocommerce-product-image-gallery{
  background:var(--card);border:1px solid var(--sand);border-radius:var(--radius);
  padding:clamp(12px,2vw,24px);box-shadow:var(--shadow);
}
.single-product .woocommerce-product-gallery img,
.single-product .wp-block-woocommerce-product-image-gallery img{mix-blend-mode:multiply}

.cuvee-shelf-line{margin:0 0 14px;font-size:.95rem;color:var(--muted)}
.cuvee-shelf-line a{color:var(--wine-2);text-decoration:none;border-bottom:1px solid var(--blush-2)}
.cuvee-shelf-line a:hover{border-color:var(--wine-2)}
.cuvee-shelf-line span{color:var(--muted)}

.single-product .woocommerce-Price-amount{color:var(--wine-2)}
.single-product .stock{font-size:.92rem;color:var(--muted)}
.single-product .stock.in-stock::before{content:"● ";color:#5C8A63;font-size:.8em}
.single-product .stock.out-of-stock::before{content:"● ";color:var(--wine);font-size:.8em}

.single-product form.cart{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--sand);border-radius:999px;
  padding:10px 12px;margin:0 0 14px;max-width:34rem;
}
.single-product form.cart .quantity input{
  width:66px;font-family:var(--font);font-size:1rem;text-align:center;
  padding:9px 6px;border:1px solid var(--sand);border-radius:999px;background:var(--card);color:var(--ink);
}
.single-product form.cart button.button{
  font-family:var(--font);font-size:1rem;cursor:pointer;
  background:var(--wine);color:#FFFDF8;border:0;border-radius:999px;padding:11px 26px;
  transition:background .2s ease;
}
.single-product form.cart button.button:hover{background:var(--wine-2)}

.cuvee-fulfil{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:5px;font-size:.93rem;color:var(--ink-2);max-width:34rem}
.cuvee-fulfil li{padding-left:18px;position:relative}
.cuvee-fulfil li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.cuvee-fulfil b{color:var(--ink);font-weight:500}

.single-product .product_meta{font-size:.86rem;color:var(--muted);border-top:1px solid var(--sand-2);padding-top:12px;margin-top:4px}
.single-product .product_meta a{color:var(--wine-2)}

.single-product .woocommerce-tabs ul.tabs{
  list-style:none;margin:0 0 14px;padding:0;display:flex;gap:22px;flex-wrap:wrap;
  border-bottom:1px solid var(--sand);
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after{display:none}
.single-product .woocommerce-tabs ul.tabs li{margin:0;padding:0;background:none;border:0;border-radius:0}
.single-product .woocommerce-tabs ul.tabs li a{
  display:block;padding:9px 0;color:var(--muted);text-decoration:none;font-size:1rem;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.single-product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--wine)}
.single-product .woocommerce-tabs .panel h2{font-size:1.15rem;margin:0 0 10px}
.single-product table.shop_attributes{width:100%;border-collapse:collapse;font-size:.95rem}
.single-product table.shop_attributes th,
.single-product table.shop_attributes td{
  text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--sand-2);vertical-align:top;
}
.single-product table.shop_attributes th{color:var(--muted);font-weight:400;width:38%}
.single-product table.shop_attributes td p{margin:0}

.single-product .related > h2,
.single-product .up-sells > h2{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);margin:clamp(24px,4vw,44px) 0 14px}

@media (max-width:820px){
  .single-product form.cart{border-radius:var(--radius);padding:10px}
  .single-product form.cart button.button{flex:1}
}

/* The block gallery wraps the classic gallery, so both matched the frame rule
   above and the bottle ended up inside two nested cards. Only the outer one
   keeps the frame. */
.single-product .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery{
  background:none;border:0;box-shadow:none;padding:0;border-radius:0;
}
@media (max-width:820px){
  .single-product .woocommerce-product-gallery,
  .single-product .wp-block-woocommerce-product-image-gallery{padding:10px}
}


/* ============================================================
   ATLAS — breathing room
   The five country maps are all one shape now (1.489:1), so the stage is
   sized from that rather than from the old 1.84 artwork. The gap below the
   plate used to be 24px, which at some widths read as the next shelf
   touching the map. Give it real air.
   ============================================================ */
#atlas{padding-bottom:clamp(30px,5vw,64px)}
#atlas .plate{margin-bottom:clamp(8px,1.6vw,20px)}
.atlasstage{overflow:visible}

/* ============================================================
   PAIRING — the answer sits under the plate you tapped
   A centred panel under a six-across row reads as "something appeared",
   not "this dish wants this wine". The panel is now nudged to the clicked
   card's centre and clamped inside the row, with the caret exactly on the
   card. JS writes --pair-x (panel offset) and --caret-x (caret offset).
   ============================================================ */
.reveal.is-open{
  width:min(34rem,100%);
  margin-left:0;
  transform:translateX(var(--pair-x,0px));
  transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .25s ease;
}
.reveal.is-open::before{
  left:var(--caret-x,50%);
}
@media(max-width:820px){
  .reveal.is-open{width:100%;transform:none}
}

/* ============================================================
   ANATOMY — the resting state is the same panel, just quieter
   Before any tap the note used to be one italic grey line; after a tap it
   became a titled panel. Same box, same rhythm, both ways round now.
   ============================================================ */
.fig-note{font-style:normal}
.fig-note .r-style{display:block;font-size:1.16rem;line-height:1.2;margin-bottom:6px;
  font-weight:600;color:var(--gold)}
.fig-note p{margin:0;font-size:1.02rem;line-height:1.6;color:var(--muted)}
.fig-note.is-open .r-style{color:var(--wine-2)}
.fig-note.is-open p{color:var(--ink-2)}
.fig-prompt{display:none}

/* `rise` animates transform, which stomps the panel's horizontal offset for the
   length of the animation and then snaps it. The reveal fades instead; the
   sideways move is the transition above. */
@keyframes cuveeFade{from{opacity:0}to{opacity:1}}
.reveal.is-open{animation:cuveeFade .3s ease}


/* ---------- atlas sizing, settled ----------
   All five maps are now exactly 1500x1008. Giving the WRAP that aspect ratio
   is what makes this reliable: the box sizes itself to the stage, the image
   just fills the box, and the pins — which are percentages of the wrap —
   land in the right place at every screen size.

   The two ways this went wrong before, both fixed here:
   · aspect-ratio on the STAGE plus a max-height letterboxed the map, so it
     floated small inside a wider frame;
   · height:100% on the wrap with max-width on the image made the wrap taller
     than the picture on a phone, and every pin drifted. */
.atlasstage{display:flex;align-items:center;justify-content:center}
.amap{display:flex;align-items:center;justify-content:center}
.amap .mapwrap{
  position:relative;
  aspect-ratio:1500 / 1008;
  height:100%!important;
  width:auto!important;
  max-width:100%;
  max-height:100%;
  margin:0 auto;
  line-height:0;
}
.amap .mapwrap img{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none;
  max-height:none;
  object-fit:contain;
  border-radius:10px;
}
/* On a phone the width is the binding constraint, not the height, so the
   stage takes the artwork's ratio and the wrap is driven by width. Using
   height:100% here squashed the map to the stage box. */
@media(max-width:820px){
  .atlasstage{height:auto;aspect-ratio:1500 / 1008;max-height:none}
  .amap .mapwrap{width:100%!important;height:auto!important}
  .amap .mapwrap img{height:auto!important}
}

/* ============================================================
   INTERACTIVE PICKERS ON A PHONE
   Six dinner plates in two columns made the panel 920px tall inside an
   844px screen, so the top row was always cut off and the answer sat
   below the fold. Three columns turns three rows into two and takes
   ~330px out of the block, which is what lets the picker and the answer
   share one screen. The colour picker gets the same treatment.
   ============================================================ */
@media (max-width:820px){
  .snap-row:has(.tap-card){
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px;
    padding:2px 0 4px;
  }
  .tap-card{padding:9px 6px 10px;border-radius:10px}
  .tap-card img{max-width:100%;margin:0 auto 6px;border-radius:5px}
  .tap-card .t{font-size:.84rem;line-height:1.18;font-weight:600}
  .tap-card .s{font-size:.74rem;line-height:1.2;margin-top:2px}

  /* the heading above a picker earns less room on a phone */
  .panel .sec-head{margin-bottom:12px}
  .panel .sec-head h2,.panel .sec-head h1{font-size:clamp(1.3rem,5.2vw,1.7rem)}
  .panel .sec-head .sub{font-size:.92rem;line-height:1.38;margin-top:.35em}
  .panel .kicker{margin-bottom:2px}

  /* and the answer is tighter, without losing the reading size */
  .reveal{padding:11px 14px;margin-top:12px}
  .reveal .r-style{font-size:1.1rem;line-height:1.25}
  .reveal p{margin:.35em 0 .5em;font-size:.95rem;line-height:1.45}
}

/* Older engines without :has() keep two columns — readable, just taller. */
@supports not (selector(:has(*))){
  @media (max-width:820px){ .snap-row{grid-template-columns:repeat(2,1fr)} }
}

/* On a phone the "Expand" pill sat on top of the panel heading. It becomes a
   corner glyph and the heading is inset so centred text can never run under
   it. (font-size:0 hides the word without needing a wrapper element.) */
@media (max-width:820px){
  .expand-btn{
    width:34px;height:34px;padding:0;border-radius:50%;
    display:grid;place-items:center;font-size:0;line-height:1;
  }
  .expand-btn span[aria-hidden]{font-size:15px}
  .panel .sec-head,
  .panel .kicker{padding-inline:42px}
}

/* The colour stage had a wide gap above the glass on a phone, which pushed the
   whole panel to the edge of the screen. Tighten it and cap the glass. */
@media (max-width:820px){
  .colour-stage{margin-top:10px;gap:12px}
  .colour-stage #colour-glass{max-height:190px;width:auto}
  .colour-note .r-style{font-size:1.06rem;line-height:1.25}
  .colour-note p{font-size:.94rem;line-height:1.45}
}

/* ============================================================
   PAIRING REVEAL — matched to the card it belongs to
   · the panel is exactly as wide as the plate that opened it, sitting
     directly under it, so the pairing reads as one object;
   · the caret between the card and the panel is gone — the alignment
     and the matching widths already say "this belongs to that";
   · the wine rule on the left is three-quarter height and centred, so it
     stops competing with the top edge of the card above it;
   · a selected card gets a 3px ring, the same weight as that rule.
   JS writes --pair-x (offset) and --pair-w (the card's width).
   ============================================================ */
.reveal{border-left:0!important;position:relative}
.reveal.is-open::before{
  content:"";position:absolute;left:0;top:12.5%;
  width:3px;height:75%;
  background:var(--wine);border-radius:2px;
  transform:none;margin:0;border:0;
}
.reveal.is-open::after{display:none}
.reveal.is-open{
  width:var(--pair-w,min(34rem,100%));
  transform:translateX(var(--pair-x,0px));
}
.tap-card[aria-pressed="true"]{
  border-color:var(--wine);
  box-shadow:0 0 0 2px var(--wine);     /* +1px border = a 3px ring */
}
@media(max-width:820px){
  .reveal.is-open{width:100%;transform:none}
}

/* ============================================================
   COLOUR STAGE — centred on the glass, parked under the grape
   `align-items:end` earlier in this file bottom-aligned the note against
   the glass, which read as the text falling off the bottom of the picture.
   It is centred now, and the stage slides under whichever grape was tapped.
   ============================================================ */
.colour-stage{
  align-items:center!important;
  margin-left:0;margin-right:auto;
  transform:translateX(var(--colour-x,0px));
  transition:transform .32s cubic-bezier(.2,.8,.3,1);
}
#colour-glass{object-position:center!important}
@media(max-width:820px){
  .colour-stage{transform:none;margin-inline:auto;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .colour-stage{transition:none}
}

/* ============================================================
   COLOUR STAGE — centred, larger, and dead still between glasses
   Every glass image is now the same 480x960 canvas with the drawing
   registered to one axis, one height and one baseline, so swapping one
   for the next cannot move anything. The box is reserved by aspect-ratio
   as well, so even a slow-loading image causes no reflow.
   The stage stays centred — parking it under the tapped grape was tried
   and reverted; with a picture this size, centre is where it belongs.
   ============================================================ */
.colour-stage{
  transform:none!important;
  margin-inline:auto!important;
  grid-template-columns:minmax(180px,230px) 1fr!important;
  max-width:760px!important;
  gap:clamp(18px,3vw,38px)!important;
  align-items:center!important;
}
#colour-glass{
  width:100%!important;
  max-width:230px!important;
  max-height:none!important;
  height:auto!important;
  aspect-ratio:480 / 960;
  object-fit:contain!important;
  object-position:center!important;
  margin-inline:auto;
}
.colour-note .r-style{font-size:clamp(1.15rem,1rem + .7vw,1.42rem)}
.colour-note p{font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.55}

@media (max-width:820px){
  .colour-stage{
    grid-template-columns:minmax(120px,150px) 1fr!important;
    max-width:none!important;gap:14px!important;
  }
  #colour-glass{max-width:150px!important}
  .colour-note .r-style{font-size:1.06rem;line-height:1.25}
  .colour-note p{font-size:.95rem;line-height:1.45}
}

/* ============================================================
   COLOUR STAGE — phones: pin the glass, never let the note move it
   Centring the row meant a long note (the amber one) made the row taller
   and nudged the glass down 10px on toggle. Aligning to the top of the row
   fixes the glass in place whatever the note runs to, and a slimmer glass
   buys the text a readable column without making the panel taller.
   ============================================================ */
@media (max-width:820px){
  .colour-stage{align-items:start!important;padding-top:4px}
  .colour-note{padding-top:2px}
}
@media (max-width:560px){
  .colour-stage{grid-template-columns:minmax(104px,124px) 1fr!important;gap:12px!important}
  #colour-glass{max-width:124px!important}
  .colour-note p{font-size:.92rem;line-height:1.42}
}

/* ============================================================
   COLOUR SECTION — the colour word wears its own colour
   Naming the colour in the heading ("Why is the wine amber?") was built and
   reverted: the question reads better fixed. The reference that does change
   is the one beside the glass, and it is printed in a darkened version of
   that wine's colour — set inline from the JS so each pour brings its own.
   ============================================================ */
.colour-note .r-style em{font-style:italic;transition:color .18s linear}
@media (prefers-reduced-motion:reduce){
  .colour-note .r-style em{transition:none}
}

/* ============================================================
   PRODUCT GRID — two on a phone, four to eight on a screen
   The grid used to run edge-to-edge on a phone and stop dead at four
   columns inside a 1240px container, so a wide monitor showed four small
   cards marooned in white space.

   · under 768px  — exactly two cards a row
   · 768–1023px   — exactly four
   · 1024px up    — auto-fill from a 190px card, so the column count grows
                    with the window: 4 at 1024, 5 at 1280, 6 at 1440,
                    7 at 1680, 8 at 1920 and above

   The container is capped at 1758px, which is exactly eight 190px cards
   plus their gaps and the side padding — so the count stops at eight and
   the grid centres itself on anything wider. Side padding never drops
   below 16px, so cards never touch the edge of the screen.

   Scoped to archives and search. The related-products row on a single
   product page is a short list, so it keeps the old narrower container —
   five cards stretched over 1646px would read as a different component.
   ============================================================ */
body.archive .wp-block-woocommerce-product-collection,
body.search  .wp-block-woocommerce-product-collection,
body.archive .wc-block-product-template__responsive,
body.search  .wc-block-product-template__responsive{
  max-width:1758px!important;
  margin-inline:auto!important;
  padding-inline:clamp(16px,4vw,56px);
  box-sizing:border-box;
}

ul.wc-block-product-template,
.wc-block-product-template{
  grid-template-columns:repeat(2,1fr)!important;
  gap:clamp(12px,2vw,18px)!important;
}
@media (min-width:768px){
  ul.wc-block-product-template,
  .wc-block-product-template{grid-template-columns:repeat(4,1fr)!important}
}
/* the related-products row keeps its narrower container but still gets the
   side padding, so a card never touches the edge of a phone screen */
body.single-product .wp-block-woocommerce-product-collection,
body.single-product .wc-block-product-template__responsive{
  padding-inline:clamp(16px,4vw,32px);
  box-sizing:border-box;
}

@media (min-width:1024px){
  body.archive ul.wc-block-product-template,
  body.archive .wc-block-product-template,
  body.search  ul.wc-block-product-template,
  body.search  .wc-block-product-template{
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important;
  }
}

/* ============================================================
   THE SHOP / EXPLORE ILLUSTRATIONS — bigger, now that they can be
   An earlier rule capped these at 220px with the note that the only
   available exports were ~200px wide and would go soft beyond that.
   That is no longer true: ill-crate is 1152x1294 and ill-backpack is
   1009x1045, so even at 420px tall on a 2x screen there is headroom.
   The cap is lifted and the pair is given the room the hero deserves.
   ============================================================ */
.paths{max-width:1040px!important}
.path-card img{
  height:clamp(240px,30vw,420px)!important;
  width:auto;max-width:100%;
  object-fit:contain;object-position:center bottom;
}
/* stacked on a phone — the card has the full width, so the drawing
   can be properly large without crowding the copy */
@media (max-width:560px){
  .path-card img{height:clamp(250px,64vw,360px)!important}
}
/* two-up on a small tablet: the column, not the clamp, is the limit */
@media (min-width:561px) and (max-width:900px){
  .path-card img{height:clamp(210px,30vw,320px)!important}
}

/* ============================================================
   BACK TO TOP — for the one-long-scroll shop
   ============================================================ */
.cuvee-top{
  position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);
  z-index:60;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--card);color:var(--wine-2);
  border:1px solid var(--sand);
  box-shadow:0 6px 18px rgba(59,50,44,.16);
  font-size:1.15rem;line-height:1;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.cuvee-top:hover{background:var(--wine);color:#FBF7EF;border-color:var(--wine);transform:translateY(-2px)}
.cuvee-top:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.cuvee-top[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.cuvee-top{transition:none}}

/* ============================================================
   SHOP — bigger cards, at most six across
   auto-fill was packing eight small cards onto a wide screen. Explicit
   column counts keep the cards large (220–285px) and cap the row at six,
   while `1fr` columns still shrink fluidly between the breakpoints.
   ============================================================ */
body.archive .wp-block-woocommerce-product-collection,
body.search  .wp-block-woocommerce-product-collection,
body.archive .wc-block-product-template__responsive,
body.search  .wc-block-product-template__responsive{
  max-width:1800px!important;
}
body.archive ul.wc-block-product-template,
body.archive .wc-block-product-template,
body.search  ul.wc-block-product-template,
body.search  .wc-block-product-template{
  grid-template-columns:repeat(2,1fr)!important;
  gap:clamp(14px,2vw,22px)!important;
}
@media (min-width:600px){
  body.archive ul.wc-block-product-template,body.archive .wc-block-product-template,
  body.search  ul.wc-block-product-template,body.search  .wc-block-product-template{
    grid-template-columns:repeat(3,1fr)!important}
}
@media (min-width:900px){
  body.archive ul.wc-block-product-template,body.archive .wc-block-product-template,
  body.search  ul.wc-block-product-template,body.search  .wc-block-product-template{
    grid-template-columns:repeat(4,1fr)!important}
}
@media (min-width:1280px){
  body.archive ul.wc-block-product-template,body.archive .wc-block-product-template,
  body.search  ul.wc-block-product-template,body.search  .wc-block-product-template{
    grid-template-columns:repeat(5,1fr)!important}
}
@media (min-width:1600px){
  body.archive ul.wc-block-product-template,body.archive .wc-block-product-template,
  body.search  ul.wc-block-product-template,body.search  .wc-block-product-template{
    grid-template-columns:repeat(6,1fr)!important}
}

/* the drawing gets the extra room, not the padding */
body.archive li.wc-block-product .wc-block-components-product-image img,
body.search  li.wc-block-product .wc-block-components-product-image img{
  max-height:none!important;
}

/* ============================================================
   SHOP FILTER BAR
   Ships hidden and is revealed by JS — with no JavaScript a visitor sees
   the plain catalogue rather than a row of buttons that do nothing.
   ============================================================ */
.shopf{
  max-width:1800px;margin:0 auto clamp(18px,3vw,30px);
  padding-inline:clamp(16px,4vw,56px);box-sizing:border-box;
}
.shopf[hidden]{display:none}
.shopf-inner{
  display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,20px) clamp(14px,2.4vw,30px);
  align-items:flex-start;
  padding:clamp(14px,2vw,20px) clamp(14px,2vw,22px);
  background:var(--card);border:1px solid var(--sand);border-radius:14px;
}
.shopf-group{display:flex;flex-direction:column;gap:7px;min-width:0}
.shopf-label{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.shopf-chips{display:flex;flex-wrap:wrap;gap:6px}
.shopf-chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font:inherit;font-size:.92rem;line-height:1;
  padding:8px 13px;border-radius:999px;
  background:transparent;color:var(--ink-2);
  border:1px solid var(--sand);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.shopf-chip i{font-style:normal;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.shopf-chip:hover:not(:disabled){border-color:var(--wine-2);color:var(--wine-2)}
.shopf-chip[aria-pressed="true"]{
  background:var(--wine);border-color:var(--wine);color:#FBF7EF;
}
.shopf-chip[aria-pressed="true"] i{color:rgba(251,247,239,.72)}
.shopf-chip:disabled{opacity:.34;cursor:default}
.shopf-chip:focus-visible{outline:2px solid var(--wine-2);outline-offset:2px}
.shopf-sort{margin-left:auto}
.shopf-select{
  font:inherit;font-size:.92rem;padding:8px 12px;border-radius:999px;
  background:transparent;color:var(--ink-2);border:1px solid var(--sand);cursor:pointer;
}
.shopf-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:10px;padding-inline:4px;
}
.shopf-count{margin:0;font-size:.9rem;color:var(--muted);font-style:italic}
.shopf-clear{
  font:inherit;font-size:.86rem;cursor:pointer;background:none;border:0;
  color:var(--wine-2);text-decoration:underline;text-underline-offset:3px;padding:2px 0;
}
.shopf-clear[hidden]{display:none}

@media (max-width:700px){
  .shopf-inner{gap:12px 16px;padding:12px 12px}
  .shopf-sort{margin-left:0;width:100%}
  .shopf-select{width:100%}
  .shopf-chip{font-size:.86rem;padding:7px 11px}
}

/* ============================================================
   SHOP SECTIONS — the wall, broken into a wine list
   Headings and "show all" controls are grid children spanning every
   column. Cards are placed with CSS `order`, so the grid reads as
   sections without a single product node being moved in the DOM.
   ============================================================ */
.wc-block-product-template li.shop-sec,
.wc-block-product-template li.shop-sec[hidden]{display:none}
li.shop-sec{
  display:flex;align-items:baseline;gap:14px;
  margin:clamp(16px,2.6vw,30px) 0 2px;
}
li.shop-sec:first-child{margin-top:0}
.shop-sec-t{
  font-family:var(--font);font-size:clamp(1.3rem,.7vw + 1.15rem,1.7rem);
  color:var(--ink);white-space:nowrap;
}
.shop-sec-n{font-size:.82rem;color:var(--muted);font-style:italic;white-space:nowrap}
.shop-sec::after{
  content:"";flex:1 1 auto;height:1px;background:var(--sand);
  transform:translateY(-.28em);
}

/* filtered out — never `visibility`, the card must leave the grid flow */
.wc-block-product-template li.wc-block-product.is-out{display:none!important}

/* ---- filter bar: folded away on a phone ---- */
.shopf-toggle{display:none}
@media (max-width:700px){
  .shopf-toggle{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    font:inherit;font-size:.95rem;cursor:pointer;
    padding:11px 16px;border-radius:999px;
    background:var(--card);border:1px solid var(--sand);color:var(--ink-2);
  }
  .shopf-toggle .shopf-badge{
    font-style:normal;font-size:.72rem;line-height:1;
    background:var(--wine);color:#FBF7EF;border-radius:999px;padding:3px 7px;
  }
  .shopf-toggle .shopf-badge[hidden]{display:none}
  .shopf-toggle:focus-visible{outline:2px solid var(--wine-2);outline-offset:2px}
  .shopf-inner{display:none}
  .shopf.is-open .shopf-inner{display:flex;margin-top:10px}
  .shopf-foot{margin-top:8px}
}

/* ============================================================
   SHOP / EXPLORE CARDS — the words scaled up with the drawings
   The illustrations doubled; the label and the line underneath stayed at
   the size they were set to when the art was 220px tall, which left them
   looking like captions rather than the two front doors of the site.
   ============================================================ */
.path-card .t{
  font-size:clamp(1.62rem,1.1vw + 1.32rem,2.3rem)!important;
  letter-spacing:.005em;
}
.path-card .t::after{height:2px}
.path-card p{
  font-size:clamp(1.02rem,.34vw + .95rem,1.24rem)!important;
  line-height:1.5!important;
  max-width:36ch;
  margin-inline:auto;
}
@media (max-width:560px){
  .path-card .t{font-size:clamp(1.5rem,6.2vw,1.95rem)!important}
  .path-card p{font-size:1.04rem!important;line-height:1.48!important;max-width:32ch}
}

/* the two front doors carry the house colour, not body ink */
.path-card .t{color:var(--wine-2)!important}
.path-card .t::after{background:var(--wine-2)}
.path-card:hover .t{color:var(--wine)!important}

/* ============================================================
   SEARCH — one bar, every page, always in reach
   The header is sticky, so the magnifying glass next to the cart is
   reachable from any scroll position. It opens a centred white panel
   directly under the bar with a live preview of matching bottles.
   ============================================================ */
.nav-search{
  display:grid;place-items:center;
  width:40px;height:40px;padding:0;margin-right:2px;
  background:transparent;border:1px solid transparent;border-radius:50%;
  color:var(--ink-2);cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.nav-search svg{width:19px;height:19px;display:block}
.nav-search:hover{color:var(--wine-2);border-color:var(--sand)}
.nav-search[aria-expanded="true"]{background:var(--wine);border-color:var(--wine);color:#FBF7EF}
.nav-search:focus-visible{outline:2px solid var(--wine-2);outline-offset:2px}

.site-search{
  border-top:1px solid var(--sand);
  background:var(--card);
  box-shadow:0 14px 30px rgba(59,50,44,.13);
}
.site-search[hidden]{display:none}
.ss-inner{
  max-width:760px;margin-inline:auto;
  padding:clamp(12px,2vw,18px) clamp(14px,4vw,24px) clamp(10px,2vw,16px);
}
.ss-form{
  display:flex;align-items:center;gap:8px;
  background:#FFFDF8;border:1px solid var(--sand);border-radius:999px;
  padding:5px 6px 5px 14px;
}
.ss-form:focus-within{border-color:var(--wine-2);box-shadow:0 0 0 3px rgba(122,35,51,.10)}
.ss-icon{display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.ss-icon svg{width:17px;height:17px;display:block}
#ssInput{
  flex:1 1 auto;min-width:0;
  font:inherit;font-size:1rem;color:var(--ink);
  background:transparent;border:0;padding:10px 2px;
}
#ssInput::placeholder{color:var(--muted);font-style:italic}
#ssInput:focus{outline:none}
#ssInput::-webkit-search-cancel-button{display:none}
.ss-go{
  flex:0 0 auto;font:inherit;font-size:.9rem;cursor:pointer;
  padding:9px 18px;border-radius:999px;
  background:var(--wine);border:1px solid var(--wine);color:#FBF7EF;
}
.ss-go:hover{background:var(--wine-2);border-color:var(--wine-2)}
.ss-close{
  flex:0 0 auto;font:inherit;font-size:1.35rem;line-height:1;cursor:pointer;
  width:34px;height:34px;border-radius:50%;
  background:transparent;border:0;color:var(--muted);
}
.ss-close:hover{color:var(--wine-2);background:var(--sand)}
.ss-go:focus-visible,.ss-close:focus-visible{outline:2px solid var(--wine-2);outline-offset:2px}

.ss-results{margin-top:8px;max-height:min(58vh,440px);overflow-y:auto}
.ss-results.is-busy{opacity:.5}
.ss-row{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;
  padding:8px 10px;border-radius:10px;
  text-decoration:none;color:var(--ink);
}
.ss-row:hover,.ss-row:focus-visible{background:var(--sand);outline:none}
.ss-thumb{
  width:44px;height:44px;border-radius:7px;overflow:hidden;
  background:#FFFDF8;border:1px solid var(--sand);display:grid;place-items:center;
}
.ss-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.ss-name{
  font-family:var(--font);font-size:1rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ss-price{font-family:var(--font);color:var(--wine-2);font-size:.98rem;white-space:nowrap}
.ss-all{
  display:block;margin-top:6px;padding:11px 10px;
  text-align:center;font-size:.92rem;
  color:var(--wine-2);text-decoration:none;
  border-top:1px solid var(--sand);
}
.ss-all:hover,.ss-all:focus-visible{background:var(--sand);outline:none}
.ss-empty{margin:10px 4px;font-size:.94rem;color:var(--muted);font-style:italic}

@media (max-width:640px){
  .ss-inner{padding:10px 12px 12px}
  .ss-go{display:none}          /* the keyboard's own Go key does this */
  .ss-name{white-space:normal;font-size:.95rem}
  .ss-results{max-height:62vh}
}

/* ==========================================================
   M2a · RELATED RAIL — the shelf beside the bottle
   Client: the related row sat last, after the Additional-info
   tabs. Too many scrolls. Desktop puts it in a narrow sticky
   rail beside the product; phones move it above the tabs.
   Card is: big bottle left, name across the top right,
   price and Add side by side underneath.
   NOTE: nothing is re-parented. Product cards stay exactly
   where WooCommerce rendered them (the Interactivity API only
   hydrates the node it printed) — this is placement only.
   ========================================================== */
@media (min-width:1100px){
  body.single-product main.wp-block-group{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(206px,14.5vw,238px);
    column-gap:clamp(20px,2vw,30px);
    align-items:start;
    max-width:min(1240px, calc(100% - 64px));
    margin-inline:auto;
  }
  body.single-product main.wp-block-group > *{max-width:none !important;margin-inline:0 !important;min-width:0}
  body.single-product main > .wc-block-breadcrumbs{grid-column:1/-1;grid-row:1}
  body.single-product main > .wc-block-store-notices{grid-column:1/-1;grid-row:2}
  body.single-product main > .wp-block-columns{grid-column:1;grid-row:3}
  body.single-product main > .wp-block-woocommerce-product-details{grid-column:1;grid-row:4}
  body.single-product main > .wp-block-woocommerce-product-collection{
    grid-column:2;grid-row:3/5;position:sticky;top:84px;padding-inline:0;
  }
  body.single-product main > .wp-block-woocommerce-product-collection ul.wc-block-product-template{
    display:grid !important;grid-template-columns:1fr !important;gap:10px;
  }
  body.single-product main > .wp-block-woocommerce-product-collection li.wc-block-product{
    grid-template-columns:82px minmax(0,1fr) auto !important;
    grid-template-areas:"img title title" "img money btn" !important;
    column-gap:10px;row-gap:6px;padding:10px !important;
  }
  body.single-product main > .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-image{margin:0 !important;align-self:center}
  body.single-product main > .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-image img{width:100% !important;max-width:100% !important}
  body.single-product main > .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-post-title{
    text-align:left !important;font-size:.8rem !important;line-height:1.25;margin:0;align-self:end;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  body.single-product main > .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-woocommerce-product-price{
    text-align:left !important;font-size:.82rem !important;margin:0;white-space:nowrap;align-self:center;
  }
  body.single-product main > .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-button{margin:0 !important;align-self:center}
  body.single-product main > .wp-block-woocommerce-product-collection li.wc-block-product .wc-block-components-product-button__button{
    font-size:.74rem !important;padding:4px 12px !important;white-space:nowrap;
  }
}
@media (max-width:1099px){
  /* no room for a rail on a phone — bring it above the tabs instead */
  body.single-product main.wp-block-group{display:flex;flex-direction:column}
  body.single-product main > .wc-block-breadcrumbs{order:1}
  body.single-product main > .wc-block-store-notices{order:2}
  body.single-product main > .wp-block-columns{order:3}
  body.single-product main > .wp-block-woocommerce-product-collection{order:4}
  body.single-product main > .wp-block-woocommerce-product-details{order:5}
}

/* =============================================================
   M3 · SIX PLATES — nothing overlaps          (theme 3.11.13)

   The pairing collage positions each tile absolutely (--px/--py
   on .pairing) and lets the dish image decide the tile height.
   The wine glass is sized from the TILE width, not the dish, so
   on a short dish — the cured-meat board, the cheese board — the
   glass was taller than its own tile and overflowed upward onto
   the caption of the tile above it. It also sat on the dish,
   because the glass spans 0-30% and the dish started at 18%.

   Fix: every tile reserves the glass's full height and both
   images bottom-align, so tiles are uniform and nothing spills
   out; the dish is pulled right so the glass stands beside it
   rather than on it. Below 820px the collage is already a plain
   two-column grid, so none of this applies there.
   ============================================================= */
@media(min-width:821px){
  .pairfield{height:648px}   /* the bottom row needs the extra room */
  .pairfield .pairing{width:31%}
  .pairfield .pairart{display:flex;align-items:flex-end;justify-content:flex-end;min-height:190px}
  .pairfield .pairglass{width:26%;bottom:0}
  .pairfield .pairdish{width:67%;margin-left:0}
  /* the lower row of tiles, cleared of the row above it */
  .pairfield .pairing:nth-child(n+4){margin-top:26px}
}

/* =============================================================
   M4 · DEAL RIBBON                            (theme 3.11.21)

   One line under the header carrying the day's markdown. It is printed
   at wp_body_open, which lands it immediately after the sticky header in
   the source, so it reads as part of the masthead without being inside it
   — nothing here has to fight the header's scroll-shrink.

   It only exists on the page when a product carries a sale price, so
   there is no empty state to style.
   ============================================================= */
.deal-ribbon{display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;padding:9px 20px;background:var(--wine,#7A2333);color:#FBF7EF;
  text-decoration:none;font-size:.86rem;line-height:1.3;text-align:center}
.deal-ribbon:hover{background:var(--wine-2,#8A3B49)}
.deal-ribbon .dr-tag{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:.82;white-space:nowrap}
.deal-ribbon .dr-name{font-weight:600}
.deal-ribbon .dr-price{opacity:.95}
/* WooCommerce prints the old price as <del> inside get_price_html(). */
.deal-ribbon .dr-price del{opacity:.6;margin-right:6px}
.deal-ribbon .dr-price ins{text-decoration:none}
.deal-ribbon .dr-off{border:1px solid rgba(251,247,239,.5);border-radius:999px;
  padding:2px 10px;font-size:.7rem;letter-spacing:.08em;white-space:nowrap}
@media(max-width:600px){
  .deal-ribbon{gap:8px;padding:8px 14px;font-size:.8rem}
  .deal-ribbon .dr-tag{width:100%}
}

/* The Deals tab is injected into the nav only when something is on sale. */
.nav a.nav-deals{color:var(--wine-2,#8A3B49)}

/* The shelf behind the tab, on the /deals/ page. */
.cuvee-deals-empty{font-style:italic;color:var(--muted,#807A72)}

/* =============================================================
   M5 · KEEP THE THREAD RAIL                   (theme 3.11.22)

   Appended to <main> by module 7 of cuvee-interactive.js when the
   visitor has opened a bottle earlier in the same tab. It reuses the
   .cuvee-pick card, so it inherits the vertical layout and the working
   Add button without a second set of styles.
   ============================================================= */
.cuvee-rail{max-width:1080px;margin:clamp(28px,5vw,56px) auto 0;
  padding:clamp(20px,3vw,32px) clamp(16px,3vw,28px) clamp(24px,3.4vw,36px);
  border-top:1px solid var(--sand,#E9DECF)}
.cuvee-rail .cr-head{margin:0;font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--ink,#3B322C)}
.cuvee-rail .cr-sub{margin:.25em 0 0;font-style:italic;color:var(--muted,#807A72);font-size:.9rem}
.cuvee-rail .cr-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
/* the card already carries its own top margin for the panels it normally
   sits in; inside the rail the grid gap does that job instead */
.cuvee-rail .cr-row .cuvee-pick{margin-top:0}
@media(max-width:900px){.cuvee-rail .cr-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cuvee-rail .cr-row{grid-template-columns:1fr 1fr;gap:10px}}

/* =============================================================
   M6 · SANDBOX                                (theme 3.11.26)
   Styles the /sandbox/ decision page only. Delete with the module
   and the shortcode once the new-tab question is settled.
   ============================================================= */
.cuvee-sandbox{max-width:1080px;margin-inline:auto}
.cuvee-sandbox .sb-switch{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  padding:14px 16px;background:var(--card,#FFFDF8);border:1px solid var(--sand,#E9DECF);
  border-radius:9px;margin-bottom:22px}
.cuvee-sandbox .sb-lab{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#9D8663)}
.cuvee-sandbox .sb-chip{font:inherit;font-size:.86rem;padding:8px 18px;border-radius:999px;
  cursor:pointer;background:transparent;color:var(--ink-2,#57504A);
  border:1px solid var(--sand,#E9DECF);transition:background .18s ease,color .18s ease,border-color .18s ease}
.cuvee-sandbox .sb-chip:hover{border-color:var(--wine-2,#8A3B49);color:var(--wine-2,#8A3B49)}
.cuvee-sandbox .sb-chip[aria-pressed="true"]{background:var(--wine,#7A2333);
  border-color:var(--wine,#7A2333);color:#FBF7EF}
.cuvee-sandbox .sb-hint{flex-basis:100%;font-size:.76rem;font-style:italic;color:var(--muted,#807A72)}
.cuvee-sandbox .sb-switch label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:.95rem}

.cuvee-sandbox .sb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cuvee-sandbox .sb-card{margin:0;padding:14px;background:var(--card,#FFFDF8);
  border:1px solid var(--sand,#E9DECF);border-radius:9px;text-align:center}
.cuvee-sandbox .sb-card img{width:100%;max-width:110px;height:130px;object-fit:contain;
  mix-blend-mode:multiply;margin-inline:auto;display:block}
.cuvee-sandbox figcaption{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:10px}
.cuvee-sandbox .sb-name{font-size:.9rem;line-height:1.3;color:var(--ink,#3B322C);text-decoration:none;overflow-wrap:anywhere}
.cuvee-sandbox .sb-meta{font-size:.76rem;color:var(--muted,#807A72);font-style:italic}
.cuvee-sandbox .sb-price{font-size:.9rem;font-weight:600;color:var(--wine-2,#8A3B49)}
.cuvee-sandbox .sb-pick{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;
  color:var(--ink-2,#57504A);cursor:pointer;margin-top:2px}

.cuvee-sandbox .sb-tray{margin-top:26px;padding:18px;background:var(--card,#FFFDF8);
  border:1px solid var(--sand,#E9DECF);border-radius:9px;overflow-x:auto}
.cuvee-sandbox .sb-tray-head{margin:0 0 12px;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold,#9D8663)}
.cuvee-sandbox .sb-table{width:100%;border-collapse:collapse;min-width:420px}
.cuvee-sandbox .sb-table th{width:9.5em;text-align:left;font-weight:400;vertical-align:middle;
  font-size:.78rem;letter-spacing:.04em;color:var(--muted,#807A72);padding:9px 10px 9px 0}
.cuvee-sandbox .sb-table td{padding:9px 10px;vertical-align:middle;border-top:1px solid var(--sand,#E9DECF);
  font-size:.9rem;color:var(--ink,#3B322C)}
.cuvee-sandbox .sb-table tr:first-child td{border-top:0}
.cuvee-sandbox .sb-table img{width:64px;height:78px;object-fit:contain;mix-blend-mode:multiply}
.cuvee-sandbox .sb-table a{color:var(--ink,#3B322C)}

@media(max-width:900px){.cuvee-sandbox .sb-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cuvee-sandbox .sb-grid{gap:10px}
  .cuvee-sandbox .sb-card{padding:10px}
  .cuvee-sandbox .sb-table th{width:7em;font-size:.72rem}}

/* =============================================================
   M7 · THE WINE FINDER                        (theme 3.11.27)

   Ramp: the house wine hue in five ordinal steps. Validated against
   the cream surface for monotone lightness, adjacent step gaps, a
   single hue (8 degrees of spread) and a light end that still clears
   2:1 on #FFFDF8. Darker means dearer — one measure, one hue, no
   categorical colours pretending to be data.

   No dark-mode block on purpose: the whole site is committed to the
   cream palette, and a chart that flipped dark on its own would be the
   only dark thing on the page.
   ============================================================= */
.cuvee-compare{--cw-1:#D9A0AB;--cw-2:#C07B8B;--cw-3:#A65468;--cw-4:#8B3549;--cw-5:#6E1C2E;
  max-width:1080px;margin-inline:auto}

.cuvee-compare .cc-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.cuvee-compare .cc-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.cuvee-compare .cc-lab{flex:0 0 3.6em;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold,#9D8663)}
.cuvee-compare .cc-chip{font:inherit;font-size:.82rem;padding:6px 14px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--ink-2,#57504A);border:1px solid var(--sand,#E9DECF);
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.cuvee-compare .cc-chip:hover:not([disabled]){border-color:var(--wine-2,#8A3B49);color:var(--wine-2,#8A3B49)}
.cuvee-compare .cc-chip[aria-pressed="true"]{background:var(--wine,#7A2333);border-color:var(--wine,#7A2333);color:#FBF7EF}
.cuvee-compare .cc-chip[disabled]{opacity:.4;cursor:not-allowed}
.cuvee-compare .cc-table-toggle{margin-left:auto}

.cuvee-compare .cc-count{margin:0 0 12px;font-size:.82rem;font-style:italic;color:var(--muted,#807A72)}
.cuvee-compare .cc-key{display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  margin:0 0 14px;font-size:.74rem;color:var(--muted,#807A72)}
.cuvee-compare .cc-key i{display:inline-block;width:20px;height:9px;border-radius:2px}
.cuvee-compare .cc-key .cw-1{background:var(--cw-1)}
.cuvee-compare .cc-key .cw-2{background:var(--cw-2)}
.cuvee-compare .cc-key .cw-3{background:var(--cw-3)}
.cuvee-compare .cc-key .cw-4{background:var(--cw-4)}
.cuvee-compare .cc-key .cw-5{background:var(--cw-5)}
.cuvee-compare .cc-none{font-style:italic;color:var(--muted,#807A72)}
.cuvee-compare .cc-note{margin-top:14px;font-size:.78rem;font-style:italic;color:var(--muted,#807A72)}

/* --- the bars --- */
.cuvee-compare .cc-bars{display:flex;flex-direction:column;gap:8px}
.cuvee-compare .cc-bar{display:grid;grid-template-columns:auto minmax(0,13em) 1fr auto auto;
  grid-template-areas:"shot name track val pick" "shot meta track val pick";
  align-items:center;gap:2px 14px;padding:8px 12px;border-radius:7px;text-decoration:none;
  background:var(--card,#FFFDF8);border:1px solid var(--sand,#E9DECF);
  animation:ccIn .34s cubic-bezier(.22,.75,.3,1) both;animation-delay:var(--d,0ms);
  transition:border-color .18s ease,transform .18s ease}
.cuvee-compare .cc-bar:hover{border-color:var(--wine-2,#8A3B49);transform:translateX(3px)}
.cuvee-compare .cc-shot{grid-area:shot;width:30px;height:42px;object-fit:contain;
  mix-blend-mode:multiply;align-self:center}

/* The pick button lives inside the bar link; its own click is swallowed in JS. */
.cuvee-compare .cc-pick{grid-area:pick;align-self:center;font:inherit;font-size:.7rem;
  padding:5px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;
  background:transparent;color:var(--muted,#807A72);border:1px solid var(--sand,#E9DECF);
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.cuvee-compare .cc-pick:hover{border-color:var(--wine-2,#8A3B49);color:var(--wine-2,#8A3B49)}
.cuvee-compare .cc-pick[aria-pressed="true"]{background:var(--gold,#9D8663);
  border-color:var(--gold,#9D8663);color:#FBF7EF}

/* --- two bottles, side by side --- */
.cuvee-compare .cc-vs{margin-top:22px;padding:18px;border-radius:9px;
  background:var(--card,#FFFDF8);border:1px solid var(--sand,#E9DECF);
  animation:ccIn .3s cubic-bezier(.22,.75,.3,1) both}
.cuvee-compare .cc-vs-head{margin:0 0 12px;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold,#9D8663)}
.cuvee-compare .cc-vs-table{width:100%;border-collapse:collapse}
.cuvee-compare .cc-vs-table th{width:7em;text-align:left;font-weight:400;font-size:.74rem;
  color:var(--muted,#807A72);padding:8px 10px 8px 0;vertical-align:middle}
.cuvee-compare .cc-vs-table td{padding:8px 10px;border-top:1px solid var(--sand,#E9DECF);
  vertical-align:middle;font-size:.9rem;color:var(--ink,#3B322C)}
.cuvee-compare .cc-vs-table tr:first-child td{border-top:0}
.cuvee-compare .cc-vs-table img{width:54px;height:70px;object-fit:contain;mix-blend-mode:multiply}
.cuvee-compare .cc-vs-table a{color:var(--ink,#3B322C)}
.cuvee-compare .cc-vs-table .is-better{color:var(--wine-2,#8A3B49);font-weight:600}

.cuvee-compare .cc-name{grid-area:name;font-size:.88rem;line-height:1.25;color:var(--ink,#3B322C);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cuvee-compare .cc-meta{grid-area:meta;font-size:.72rem;font-style:italic;color:var(--muted,#807A72)}
.cuvee-compare .cc-val{grid-area:val;font-size:.9rem;font-weight:600;color:var(--ink,#3B322C);
  font-variant-numeric:tabular-nums}

/* the track is the axis; the fill is the mark. 4px rounded data-end, flat at the baseline. */
.cuvee-compare .cc-track{grid-area:track;position:relative;height:12px;border-radius:2px;
  background:var(--bg,#F7F0E6)}
.cuvee-compare .cc-fill{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:2px 4px 4px 2px;
  animation:ccGrow .5s cubic-bezier(.22,.75,.3,1) both;animation-delay:var(--d,0ms)}
.cuvee-compare .cw-1 .cc-fill{background:var(--cw-1)}
.cuvee-compare .cw-2 .cc-fill{background:var(--cw-2)}
.cuvee-compare .cw-3 .cc-fill{background:var(--cw-3)}
.cuvee-compare .cw-4 .cc-fill{background:var(--cw-4)}
.cuvee-compare .cw-5 .cc-fill{background:var(--cw-5)}

@keyframes ccIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes ccGrow{from{width:0}to{width:var(--w,0%)}}

/* --- table view --- */
.cuvee-compare .cc-table{width:100%;border-collapse:collapse;font-size:.88rem}
.cuvee-compare .cc-table th{text-align:left;font-weight:400;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted,#807A72);padding:8px 10px;border-bottom:1px solid var(--sand,#E9DECF)}
.cuvee-compare .cc-table td{padding:9px 10px;border-bottom:1px solid var(--sand,#E9DECF);color:var(--ink,#3B322C)}
.cuvee-compare .cc-table a{color:var(--ink,#3B322C)}

.cuvee-compare .cc-more{display:block;margin:16px auto 0;font:inherit;font-size:.82rem;padding:8px 22px;
  border-radius:999px;cursor:pointer;background:transparent;color:var(--wine-2,#8A3B49);
  border:1px solid var(--sand,#E9DECF);transition:border-color .18s ease}
.cuvee-compare .cc-more:hover{border-color:var(--wine-2,#8A3B49)}

@media(max-width:640px){
  .cuvee-compare .cc-bar{grid-template-columns:auto 1fr auto;
    grid-template-areas:"shot name val" "shot meta val" "track track track" "pick pick pick";gap:3px 10px}
  .cuvee-compare .cc-pick{justify-self:start;margin-top:4px}
  .cuvee-compare .cc-name{white-space:normal}
  .cuvee-compare .cc-track{margin-top:5px}
  .cuvee-compare .cc-lab{flex-basis:100%}
}

@media(prefers-reduced-motion:reduce){
  .cuvee-compare .cc-bar,.cuvee-compare .cc-fill{animation:none}
  .cuvee-compare .cc-bar:hover{transform:none}
}

/* ==========================================================
   M8 · SALE BADGE ON THE BLOCK GRID
   /deals/ prints products with the classic [products] shortcode, whose
   badge is span.onsale — styled further up this file. /shop/ renders the
   same products through the WooCommerce product-collection block, whose
   badge is a different element entirely:
     div.wc-block-components-product-sale-badge > span.__text
   Style only one and the badge is green on one page and default grey on
   the other. Both selectors below are the same pill.
   ========================================================== */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge{
  top:12px;right:12px;left:auto;z-index:9;
  background:var(--deal,#276749);color:#FBF7EF;border:0;border-radius:999px;
  padding:6px 15px;font-size:.76rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.3;min-height:0;margin:0;
  box-shadow:0 2px 8px rgba(39,103,73,.28)}
.wc-block-components-product-sale-badge__text{color:inherit;font:inherit;
  letter-spacing:inherit;text-transform:inherit}

/* ==========================================================
   M9 · SIDE-BY-SIDE, PROMOTED
   The comparison panel used to be built at the foot of the finder, below
   twelve bars and the "show more" button — roughly 1400px down the page.
   Ticking two bottles built it where nobody could see it. It now renders
   directly under the control row, so these override the earlier block.
   ========================================================== */
.cuvee-compare .cc-vs{margin:16px 0 4px}
.cuvee-compare .cc-vs-table img{width:88px;height:112px}
.cuvee-compare .cc-hint{margin:12px 0 0;font-size:.8rem;font-style:italic;
  color:var(--muted,#807A72)}

.cuvee-compare .cc-add{display:inline-block;padding:8px 16px;border:0;border-radius:999px;
  background:var(--wine,#7A2333);color:#FBF7EF;font-size:.74rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:background .16s ease}
.cuvee-compare .cc-add:hover{background:var(--wine-2,#8A3B49)}
.cuvee-compare .cc-add[disabled]{opacity:.55;cursor:default}

@media(max-width:640px){
  .cuvee-compare .cc-vs-table img{width:64px;height:82px}
  .cuvee-compare .cc-vs-table th{width:5.4em;font-size:.7rem}
  .cuvee-compare .cc-vs-table td{font-size:.84rem;padding:8px 6px}
}


/* ==========================================================
   M10 · MONEY WELL POURED — the budget builder

   Four sets, four columns, cards on their side.

   The first build reused the tall vertical card from the
   recommendation rail and the section ran past two screens — "it's
   too big, I don't want to scroll so much." Laid on its side the card
   is about 80px instead of about 250px, the Add-all moves up into the
   row header, and all four sets fit one screen.

   The card is a fixed shape, not a stack that grows with its
   contents: the name always occupies two lines whether it needs one
   or two, so the price and the Add button land on the same line
   across every card in the row. A button that moves with the length
   of a wine name is the thing this fixes.
   ========================================================== */
.cuvee-budget{max-width:1080px;margin-inline:auto;text-align:left}

/* Every other home-page plate is a full-height set piece and wears 54px of
   section padding. This one is a working tool - it has to fit a laptop
   screen with the sticky header above it, so its chrome is trimmed here
   rather than in the shared .section rule. */
#budget{padding-top:34px;padding-bottom:34px}
#budget .kicker{margin-bottom:6px}
#budget .sec-head{margin-bottom:16px}

.cuvee-budget .bb-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 10px}
.cuvee-budget .bb-lab{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold,#9D8663);margin-right:4px}
.cuvee-budget .bb-chip{padding:6px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--sand,#E9DECF);background:transparent;
  font-family:inherit;font-size:.84rem;color:var(--ink,#3B322C);
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.cuvee-budget .bb-chip:hover{border-color:var(--wine-2,#8A3B49);color:var(--wine-2,#8A3B49)}
.cuvee-budget .bb-chip[aria-pressed="true"]{background:var(--wine,#7A2333);
  border-color:var(--wine,#7A2333);color:#FBF7EF}
.cuvee-budget .bb-again{margin-left:auto;padding:6px 15px;border-radius:999px;cursor:pointer;
  border:1px dashed var(--sand,#E9DECF);background:transparent;font-family:inherit;
  font-size:.78rem;font-style:italic;color:var(--muted,#807A72)}
.cuvee-budget .bb-again:hover{border-color:var(--wine-2,#8A3B49);color:var(--wine-2,#8A3B49)}

/* --- one set ------------------------------------------------------- */
/* Two columns: the row on the left, a rail on the right that holds nothing
   but the Add-all. The button used to live in the header, which meant on the
   four-bottle row the fourth card sat directly beneath it while the other
   three had clear air - crooked. Given its own column it is never above a
   card, and all four buttons sit in one straight line down the section. */
.cuvee-budget .bb-set{padding:8px 0;border-top:1px solid var(--sand,#E9DECF);
  display:grid;grid-template-columns:minmax(0,1fr) 160px;column-gap:18px;
  align-items:center}
.cuvee-budget .bb-set > .bb-head{grid-column:1;grid-row:1}
.cuvee-budget .bb-set > .bb-cards,
.cuvee-budget .bb-set > .bb-none{grid-column:1;grid-row:2}
.cuvee-budget .bb-set > .bb-all{grid-column:2;grid-row:1 / span 2;justify-self:end}
.cuvee-budget .bb-set:first-child{border-top:0;padding-top:2px}

/* label · total · Add-all, all on one line */
.cuvee-budget .bb-head{display:flex;align-items:center;flex-wrap:nowrap;gap:6px 12px;
  margin:0 0 6px}
.cuvee-budget .bb-n{margin:0;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold,#9D8663);white-space:nowrap;flex:0 0 auto}
/* the auto margin is what pins the Add-all to the right edge of the row */
.cuvee-budget .bb-sum{margin:0;font-size:.86rem;font-weight:600;
  color:var(--ink,#3B322C);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cuvee-budget .bb-none{margin:0;font-size:.84rem;font-style:italic;color:var(--muted,#807A72)}
/* every Add-all is the same width and centred, so the four of them line up
   down the right edge instead of stepping in and out with their labels */
.cuvee-budget .bb-all{margin:0;width:100%;text-align:center;
  padding:6px 15px;border:0;border-radius:999px;
  background:var(--wine,#7A2333);color:#FBF7EF;font-family:inherit;font-size:.66rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  white-space:nowrap;transition:background .16s ease}
.cuvee-budget .bb-all:hover{background:var(--wine-2,#8A3B49)}
.cuvee-budget .bb-all[disabled]{opacity:.55;cursor:default}

/* --- the cards ----------------------------------------------------- */
/* Four columns on every row, so the sets step out to the right and the
   bases line up straight down the section. */
.cuvee-budget .bb-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;align-items:stretch}

.cuvee-budget .bb-cards .cuvee-pick{flex-direction:row;align-items:center;gap:10px;
  margin:0;padding:6px 10px;text-align:left;
  animation:bbIn .3s cubic-bezier(.22,.75,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes bbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cuvee-budget .bb-cards .cuvee-pick img{width:36px;max-width:36px;height:48px;
  flex:0 0 36px}
.cuvee-budget .bb-cards .cp-m{align-items:stretch;gap:4px;flex:1 1 auto;width:auto;
  min-width:0}

/* always two lines tall — this is what levels the buttons */
.cuvee-budget .bb-cards .cp-n{font-size:.76rem;line-height:1.25;min-height:2.5em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere}
.cuvee-budget .bb-cards .cp-f{display:flex;align-items:center;justify-content:space-between;
  gap:8px}
.cuvee-budget .bb-cards .cp-p{font-size:.8rem}
.cuvee-budget .bb-cards .cp-b{width:auto;max-width:none;padding:4px 12px;font-size:.68rem;
  line-height:1.25}

.cuvee-budget .bb-note{margin:10px 0 0;font-size:.72rem;font-style:italic;
  color:var(--muted,#807A72)}

/* A short viewport is a laptop, and on a laptop this section has to be one
   screen with the sticky header above it. Rather than squeeze a large monitor
   to suit a MacBook, the compact variant is keyed to the height of the window:
   about 715px becomes about 650px, which clears a 768px viewport. Nothing
   moves on a tall screen. */
@media(min-width:901px) and (max-height:820px){
  #budget{padding-top:26px;padding-bottom:26px}
  #budget .sec-head{margin-bottom:12px}
  .cuvee-budget .bb-controls{margin:0 0 8px}
  .cuvee-budget .bb-set{padding:6px 0}
  .cuvee-budget .bb-head{margin:0 0 5px}
  .cuvee-budget .bb-cards .cuvee-pick{padding:5px 9px}
  .cuvee-budget .bb-cards .cuvee-pick img{height:44px}
  .cuvee-budget .bb-note{display:none}
}

/* No room for a 210px rail beside the cards down here, so the set stacks and
   the button takes its own line, still pinned to the right. */
@media(max-width:760px){
  .cuvee-budget .bb-set{grid-template-columns:minmax(0,1fr)}
  .cuvee-budget .bb-set > .bb-all{grid-column:1;grid-row:3;width:160px;margin-top:10px}
}

@media(max-width:900px){
  .cuvee-budget .bb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cuvee-budget .bb-again{margin-left:0}
}
@media(max-width:480px){
  .cuvee-budget .bb-head{flex-wrap:wrap}
  /* it wraps to its own line down here, but keeps the same width as the
     other three and stays pinned right */
  .cuvee-budget .bb-all{margin-left:auto}
  .cuvee-budget .bb-cards{gap:8px}
  .cuvee-budget .bb-cards .cuvee-pick{padding:8px 9px;gap:8px}
  .cuvee-budget .bb-cards .cuvee-pick img{width:32px;max-width:32px;height:46px;flex:0 0 32px}
  .cuvee-budget .bb-cards .cp-n{font-size:.72rem}
  .cuvee-budget .bb-cards .cp-b{padding:5px 10px;font-size:.64rem}
}
@media(prefers-reduced-motion:reduce){
  .cuvee-budget .bb-cards .cuvee-pick{animation:none}
}

/* ── The page that isn't there ───────────────────────────────────────
   A 404 is a dead end unless it hands the visitor a way on. The search
   row and the two buttons are that way on. Nothing here is used
   anywhere else on the site. */

.cuvee-404 { padding-block: clamp(56px, 9vw, 104px); }
.cuvee-404 .sec-head { margin-bottom: 26px; }
.cuvee-404 .sub { max-width: 34em; margin-inline: auto; }

.cuvee-404-search {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto 26px;
}
.cuvee-404-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	/* 16px, not 15: an input under 16px makes iOS Safari zoom the whole
	   page the moment it is tapped. It also lands the box at exactly the
	   button's height, so the row reads as one control. */
	/* No vertical padding: a text input centres its own text, so the
	   height is set once, below, and both controls are pinned to it. */
	padding: 0 16px;
	font: inherit;
	font-size: 16px;
	/* The field inherits the serif body font, the button next to it is set
	   in the UI sans. Their natural line boxes differ by ten pixels, so the
	   two are pinned to one height rather than left to their own metrics. */
	line-height: normal;
	min-height: 48px;
	color: inherit;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 4px;
}
.cuvee-404-search input[type="search"]:focus-visible {
	outline: 2px solid var(--wine, #7A2333);
	outline-offset: 1px;
}
.cuvee-404-search .btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	/* .btn carries a 5px vertical margin for use in a paragraph of text.
	   Inside this row that margin was setting the row's height and the
	   field was stretching to meet it, ten pixels taller than the button. */
	margin: 0;
}

.cuvee-404 .cta-actions.center {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

@media (max-width: 560px) {
	.cuvee-404-search { flex-direction: column; }
	.cuvee-404-search .btn { width: 100%; }
}