/* CINQ TERRES — commerce surfaces.
   ==========================================================================
   Deliberately NOT an import of the film's styles.css. That file carries the
   scrub, parallax, overscan, grain and atmosphere system, none of which has
   any business on a checkout form.

   What IS shared is the brand: the same two typefaces and the same palette,
   so the shop reads as the same house rather than a bolted-on store. The
   @font-face rules are restated here rather than imported, because the woff2
   files are already downloaded and immutably cached from the film — a second
   declaration costs zero requests and zero bytes.

   DESIGN RULES CARRIED OVER FROM THE FILM
   - the world is desaturated; the fragrance is the only saturated thing
   - edges come from light and surface, never from a 1px grey box
   - one accent per world, used semantically (it IS that fragrance), never
     decoratively
   - Cormorant for anything that speaks, Inter for anything that instructs   */

/* ── faces (same files the film already cached) ────────────────────────── */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/cormorantgaramond-300-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;
  src:url(/fonts/cormorantgaramond-300-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:200;font-display:swap;
  src:url(/fonts/inter-200-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/inter-300-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/inter-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0d0f11;
  --ink-2:#12161a;
  --mist:#c9cfd4;
  --mist-dim:#8b959d;
  --line:rgba(201,207,212,.14);
  --accent:#7fb2c7;
  --bad:#c98d7a;

  --ease:cubic-bezier(.16,1,.3,1);
  --slow:.6s;
  --quick:.28s;

  --gutter:clamp(1.25rem,4vw,4rem);
  --measure:68rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--mist);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:300;
  font-size:clamp(.95rem,.9rem+.2vw,1.02rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* A single fixed wash, so the page has depth without shipping an image. */
  background-image:radial-gradient(120% 80% at 50% -10%,#1a2026 0%,var(--ink) 62%);
  background-attachment:fixed;
  min-height:100vh;
}
h1,h2,h3,legend{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;letter-spacing:.01em;line-height:1.14;margin:0}
h1{font-size:clamp(2.1rem,1.4rem+3.2vw,3.6rem)}
h2{font-size:clamp(1.35rem,1.1rem+1vw,1.8rem)}
p{margin:0}
ul{list-style:none;margin:0;padding:0}
button,input,select{font:inherit;color:inherit}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink-2);padding:.75rem 1.25rem;z-index:100}
.skip:focus{left:0}

/* ── masthead ──────────────────────────────────────────────────────────── */
.masthead{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--gutter);
  background:rgba(13,15,17,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-family:'Cormorant Garamond',serif;font-size:1.05rem;
  letter-spacing:.34em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.masthead-nav{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.75rem)}
.masthead-nav a{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--mist-dim);transition:color var(--quick) var(--ease)}
.masthead-nav a:hover,.masthead-nav a:focus-visible{color:var(--mist)}

/* ── THE MASTHEAD OVERFLOWED A SMALL PHONE, AND THE WHOLE PAGE SCROLLED
   SIDEWAYS WITH IT.
   Measured at a 320px viewport: content 374px against 305px available. The
   header is flex with nowrap, and its two children simply do not fit — the
   wordmark is 168px of that, almost all of it the .34em letter-spacing that
   gives the brand its look, and the nav is another 170px.

   320px is not a hypothetical. It is the iPhone SE and a large share of the
   Android handsets in this shop's home market, and horizontal scroll on a
   sticky header is the first thing a customer notices and the last thing they
   forgive.

   The spacing is TIGHTENED rather than the wordmark truncated or the nav
   hidden behind a hamburger: at this size the letters still read as deliberate,
   and a shop with two navigation items has no business growing a menu button.
   Everything above this width is untouched. */
@media (max-width:26rem){
  .masthead{gap:.6rem;padding:.9rem .75rem}
  .wordmark{font-size:.92rem;letter-spacing:.16em}
  .masthead-nav{gap:.7rem}
  .masthead-nav a{font-size:.62rem;letter-spacing:.12em}
}

.basket-btn{
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:.55rem 1.1rem;cursor:pointer;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.55rem;
  transition:border-color var(--quick) var(--ease),color var(--quick) var(--ease);
}
.basket-btn:hover,.basket-btn:focus-visible{border-color:rgba(127,178,199,.5)}
.count{
  min-width:1.35rem;height:1.35rem;border-radius:999px;
  display:inline-grid;place-items:center;font-size:.62rem;letter-spacing:0;
  background:var(--accent);color:var(--ink);font-weight:400;
}
.count[data-empty="true"]{background:rgba(201,207,212,.16);color:var(--mist-dim)}

/* ── views ─────────────────────────────────────────────────────────────── */
.view{max-width:var(--measure);margin:0 auto;padding:clamp(2.5rem,6vw,5rem) var(--gutter) 6rem}
.view[hidden]{display:none}

.eyebrow{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mist-dim);margin-bottom:1rem}
.intro{max-width:34rem;margin-bottom:2.5rem}
.lede{color:var(--mist-dim);margin-top:1rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem}

.currency-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-bottom:2.5rem}
.currency-switch button{
  background:none;border:0;padding:.5rem 1.1rem;cursor:pointer;
  font-size:.66rem;letter-spacing:.2em;color:var(--mist-dim);
  transition:background var(--quick) var(--ease),color var(--quick) var(--ease);
}
.currency-switch button.is-on{background:rgba(201,207,212,.1);color:var(--mist)}

/* ── catalogue ─────────────────────────────────────────────────────────── */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:46rem){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:72rem){.grid{grid-template-columns:repeat(3,1fr)}}
.loading{padding:3rem;text-align:center;color:var(--mist-dim);background:var(--ink)}

.card{
  background:var(--ink);padding:clamp(1.5rem,3vw,2.25rem);
  display:flex;flex-direction:column;gap:1rem;position:relative;
  transition:background var(--slow) var(--ease);
}
.card:hover{background:var(--ink-2)}
/* The accent is the fragrance, not decoration: a single hairline that only
   appears on approach, in that world's own colour. */
.card::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--c,var(--accent));opacity:0;transition:opacity var(--slow) var(--ease);
}
.card:hover::after,.card:focus-within::after{opacity:.7}

.card .numeral{font-family:'Cormorant Garamond',serif;font-size:.85rem;letter-spacing:.3em;color:var(--mist-dim)}
.card .name{font-family:'Cormorant Garamond',serif;font-size:1.65rem;line-height:1.1}
.card .line{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--mist-dim);font-size:1.02rem}
.card .notes{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.25rem}
.card .notes li{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-dim);border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem}

.sizes{display:flex;flex-direction:column;gap:.5rem;margin-top:auto;padding-top:1rem}
.size-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.size-row .ml{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim)}
.size-row .price{font-family:'Cormorant Garamond',serif;font-size:1.2rem}
.add{
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1.15rem;cursor:pointer;white-space:nowrap;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  transition:border-color var(--quick) var(--ease),color var(--quick) var(--ease),letter-spacing var(--quick) var(--ease);
}
.add:hover:not(:disabled),.add:focus-visible:not(:disabled){border-color:var(--c,var(--accent));letter-spacing:.24em}
.add:disabled{opacity:.35;cursor:not-allowed}
.sold{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim)}

/* ── basket drawer ─────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(6,8,10,.6);backdrop-filter:blur(3px);z-index:50;animation:fade var(--quick) var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.basket{
  position:fixed;top:0;right:0;bottom:0;width:min(26rem,100vw);z-index:60;
  background:var(--ink-2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  animation:slide var(--slow) var(--ease);
}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
.basket[hidden]{display:none}
.basket-head{display:flex;align-items:center;justify-content:space-between;padding:1.5rem var(--gutter);border-bottom:1px solid var(--line)}
#basket-close{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--mist-dim);padding:.25rem .5rem}
#basket-close:hover{color:var(--mist)}
#basket-items{flex:1;overflow-y:auto;padding:.5rem var(--gutter)}
.b-item{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.b-item .b-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem}
.b-item .b-meta{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim)}
.b-item .b-total{font-family:'Cormorant Garamond',serif;font-size:1.05rem;text-align:right}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{background:none;border:0;width:2rem;height:1.9rem;cursor:pointer;color:var(--mist-dim);font-size:1rem;line-height:1}
.qty button:hover:not(:disabled){color:var(--mist)}
.qty button:disabled{opacity:.3;cursor:not-allowed}
.qty span{min-width:1.6rem;text-align:center;font-size:.82rem}
/* MEASURED AT 320px: this was 50x16 and the back link 203x18. WCAG 2.2 AA
   (2.5.8 Target Size Minimum) wants 24x24 CSS px for a standalone control, and
   a 16px-tall target on a phone is genuinely awkward to hit beside a quantity
   stepper. The padding grows the HIT AREA without changing the type size, so
   the visual weight of the basket is untouched.
   The payment radios stay 13px on purpose - WCAG lets the wrapping <label> be
   the target, and .choice is a full-width block. */
.b-remove{
  background:none;border:0;cursor:pointer;color:var(--mist-dim);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:3px;
  min-height:24px;padding:.4rem 0;margin:-.4rem 0;
  display:inline-flex;align-items:center;
}
.b-remove:hover{color:var(--bad)}
.b-issue{grid-column:1/-1;font-size:.7rem;color:var(--bad);font-style:italic}
.empty{padding:3rem var(--gutter);text-align:center;color:var(--mist-dim);font-style:italic;font-family:'Cormorant Garamond',serif}
.basket-foot{padding:1.5rem var(--gutter);border-top:1px solid var(--line)}
.basket-foot .line{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35rem}
.basket-foot .line strong{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:300}

/* ── checkout ──────────────────────────────────────────────────────────── */
/* Same 24px floor as .b-remove — measured at 203x18 on a 320px viewport.
   Negative margin keeps the layout position identical while the target grows. */
.back{
  background:none;border:0;margin:0 0 1.5rem -.6rem;cursor:pointer;color:var(--mist-dim);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  min-height:24px;padding:.35rem .6rem;
  display:inline-flex;align-items:center;
}
.back:hover{color:var(--mist)}
.cols{display:grid;gap:clamp(2rem,4vw,3.5rem);margin-top:2.5rem}
@media(min-width:56rem){.cols{grid-template-columns:1.35fr 1fr;align-items:start}}
fieldset{border:0;border-top:1px solid var(--line);padding:1.75rem 0 0;margin:0 0 2.25rem}
legend{padding-right:1rem;font-size:1.3rem}
label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist-dim);margin:1.15rem 0 .45rem}
.opt{text-transform:none;letter-spacing:0;font-style:italic;opacity:.7}
input[type=text],input[type=email],input[type=tel],select{
  width:100%;background:rgba(201,207,212,.04);border:1px solid var(--line);border-radius:2px;
  padding:.8rem .9rem;transition:border-color var(--quick) var(--ease),background var(--quick) var(--ease);
}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
input:focus{border-color:rgba(127,178,199,.5);background:rgba(201,207,212,.07)}
input[aria-invalid="true"]{border-color:var(--bad)}
.row{display:grid;gap:1rem}
@media(min-width:30rem){.row{grid-template-columns:1fr 1fr}}
.hint{font-size:.74rem;color:var(--mist-dim);margin-top:.45rem;font-style:italic}
.hint.small{font-size:.68rem;margin-top:.75rem;line-height:1.5}

.rates{display:flex;flex-direction:column;gap:.6rem}
.choice{
  display:flex;gap:.85rem;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);border-radius:2px;padding:.95rem 1.1rem;margin:0;
  text-transform:none;letter-spacing:0;font-size:inherit;color:inherit;
  transition:border-color var(--quick) var(--ease),background var(--quick) var(--ease);
}
.choice:hover{border-color:rgba(127,178,199,.35)}
.choice:has(input:checked){border-color:rgba(127,178,199,.6);background:rgba(127,178,199,.06)}
.choice input{margin-top:.28rem;accent-color:var(--accent)}
.choice strong{display:block;font-weight:400}
.choice em{display:block;font-size:.76rem;color:var(--mist-dim);font-style:italic;margin-top:.15rem}
.choice .amt{margin-left:auto;font-family:'Cormorant Garamond',serif;font-size:1.1rem;white-space:nowrap}

.summary{border:1px solid var(--line);padding:clamp(1.5rem,3vw,2rem);position:sticky;top:5.5rem}
.summary h2{margin-bottom:1.25rem}
#summary-items li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.86rem}
#summary-items .s-name{color:var(--mist-dim)}
.totals{margin:1.25rem 0 0}
.totals div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0}
.totals dt{color:var(--mist-dim);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.totals dd{margin:0;font-family:'Cormorant Garamond',serif;font-size:1.05rem}
.totals .grand{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.85rem}
.totals .grand dd{font-size:1.55rem}

.pay{
  width:100%;margin-top:1.5rem;cursor:pointer;
  background:var(--mist);color:var(--ink);border:1px solid var(--mist);border-radius:999px;
  padding:1rem 1.5rem;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  transition:background var(--quick) var(--ease),letter-spacing var(--quick) var(--ease),opacity var(--quick) var(--ease);
}
.pay:hover:not(:disabled){background:#fff;letter-spacing:.3em}
.pay:disabled{opacity:.35;cursor:not-allowed}
.pay[aria-busy="true"]{opacity:.6;cursor:progress}
.error{color:var(--bad);font-size:.8rem;margin-top:1rem;font-style:italic}

/* ── confirmation ──────────────────────────────────────────────────────── */
.done{max-width:34rem;margin:clamp(2rem,8vh,6rem) auto;text-align:center}
.order-number{font-family:'Cormorant Garamond',serif;font-size:1.6rem;letter-spacing:.14em;margin:1.5rem 0 .5rem}
.done .totals{max-width:22rem;margin:2rem auto 0;text-align:left}
.back-link{display:inline-block;margin-top:2.5rem;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.9rem 2rem;transition:border-color var(--quick) var(--ease)}
.back-link:hover{border-color:rgba(127,178,199,.5)}

/* Screen-reader announcements. Off-screen, never display:none - a hidden
   element is not announced at all. */
.live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── THE HIGH-VOLUME ENQUIRY CARD ────────────────────────────────────────────
   Every other message in the basket drawer (.b-issue) is a refusal, styled in
   --bad because something went wrong. This one is not a refusal in any sense
   the customer should feel: they are trying to buy twenty bottles, and the
   automated checkout simply is not the right instrument for that.

   So it is deliberately styled as an OFFER, in the house accent rather than the
   error colour. A red box here would read as "you did something wrong" and lose
   the largest order the shop was ever asked for. */
.b-highvolume{
  border:1px solid rgba(127,178,199,.35);
  border-left-width:2px;
  background:rgba(127,178,199,.05);
  padding:1.1rem 1.2rem;
  margin:0 0 1.25rem;
  list-style:none;
}
.b-highvolume .b-hv-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;color:var(--mist);margin:0;
}
.b-highvolume .b-hv-body{
  font-size:.78rem;line-height:1.6;color:var(--mist-dim);margin:.4rem 0 0;
}
.b-highvolume .b-hv-cta{
  display:inline-block;margin-top:.9rem;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.6rem 1.1rem;
  border:1px solid var(--accent);color:var(--accent);
  text-decoration:none;
  transition:background var(--fast,180ms) ease,color var(--fast,180ms) ease;
}
.b-highvolume .b-hv-cta:hover,
.b-highvolume .b-hv-cta:focus-visible{background:var(--accent);color:var(--ink)}

/* ── THE DOCKED BASKET ───────────────────────────────────────────────────────
   The basket used to be a drawer that existed only once you clicked a button
   for it. On a shop with five products and no visible cart, a first-time
   visitor has no reason to believe a basket is there at all — they add a
   bottle, the page appears to do nothing, and they leave.

   On a screen with room for it the basket is now PERMANENT: docked to the
   right, always visible, showing "Nothing here yet." when empty. An empty
   basket that is visible is doing useful work — it tells you where your
   bottles will go before you have any.

   BELOW 64rem IT STAYS A DRAWER, deliberately. A permanent panel on a phone
   would eat the products it exists to sell.

   --masthead-h is measured in shop.js rather than guessed: the header is
   sticky with fluid padding, so its height changes with the viewport and a
   hardcoded offset would either overlap it or leave a gap. The fallback below
   only has to be close enough for the first paint. */
:root{ --masthead-h:4.4rem; --dock-w:23rem; }

@media (min-width:64rem){
  /* Beats `.basket[hidden]{display:none}` on specificity (0,3,0 vs 0,2,0)
     rather than on source order, so this cannot break if the file is
     reordered or concatenated differently. */
  .shop-page .basket,
  .shop-page .basket[hidden]{
    display:flex;
    position:fixed;
    top:var(--masthead-h);right:0;bottom:0;
    width:var(--dock-w);
    animation:none;                 /* it never slides in — it was always there */
    z-index:30;                     /* under the masthead (40), not over it */
  }

  /* Nothing to close, and nothing to dim behind. */
  .shop-page #basket-close,
  .shop-page .scrim,
  .shop-page .scrim[hidden]{display:none}

  /* Make room. .view centres itself inside whatever width it is given, so
     padding here keeps the catalogue optically centred in the space that is
     actually left rather than sliding under the panel. */
  .shop-page #main{padding-right:var(--dock-w)}

  /* The header count stays — it is the thing that draws the eye when a bottle
     is added and the panel is below the fold on a short window. */
  .shop-page .basket-btn{cursor:default}
}

/* A wide desktop can afford a roomier panel without crowding the products. */
@media (min-width:100rem){ :root{ --dock-w:26rem } }