/* ===========================================================================
   Cerulean Scents

   Warm ivory ground, near-black ink, cerulean for action, brass for the
   second currency. The colour on the page is not painted in — it is borrowed
   from whichever bottle is open, through --tint.
   =========================================================================== */

:root {
  --paper:   #f6f2ea;
  --card:    #fffdf9;
  --sunk:    #ebe5da;
  --line:    #e0d9cc;
  --line-2:  #cbc2b1;

  --ink:     #0f1216;
  --ink-2:   #3f4750;
  --ink-3:   #525a65;

  --blue:    #1b5885;
  --blue-2:  #123f61;
  --brass:   #6f5316;

  /* The live colour, in two forms. --tint is the bottle exactly as it is and
     is only ever used as an accent. --wash is the same hue held at one fixed
     lightness, and it is the only one the background may use — see washFrom()
     in app.js. Both are replaced from JS when a perfume is opened. */
  --tint:    #c9a86e;   /* warm at rest; a perfume replaces it */
  --wash:    #f7d8a8;
  --aura:    .62;
  /* The whole page takes the colour, not just the blobs. Because the wash is
     lightness-pinned, no amount of it can darken the ground past a known
     floor, so the text contrast holds for every bottle in the catalogue. */
  --ground: color-mix(in srgb, var(--wash) 52%, var(--paper));

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px; --s7:56px; --s8:88px;
  --r1:10px; --r2:16px; --r3:22px; --r4:30px;

  /* Layered rather than single: a real shadow is a tight contact edge plus a
     wide soft body. One large blur at one opacity is what makes a card look
     stuck on rather than resting on the page. */
  --sh1: 0 1px 1px rgba(15,18,22,.04),
         0 2px 6px rgba(15,18,22,.05);
  --sh2: 0 1px 1px rgba(15,18,22,.04),
         0 6px 14px rgba(15,18,22,.07),
         0 18px 44px rgba(15,18,22,.10);
  --sh3: 0 -1px 0 rgba(15,18,22,.05),
         0 -20px 64px rgba(15,18,22,.18);
  --lift: 0 2px 3px rgba(15,18,22,.05),
          0 12px 26px rgba(15,18,22,.10),
          0 28px 64px rgba(15,18,22,.12);

  --ease-out: cubic-bezier(.16,1,.3,1);   /* settles, no overshoot */
  --ease-in:  cubic-bezier(.4,0,1,1);

  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Manrope",ui-sans-serif,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 220ms;
  --shell: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #0d1014;
    --card:   #161b21;
    --sunk:   #0a0d11;
    --line:   #242c35;
    --line-2: #3a4552;

    --ink:    #f2eee7;
    --ink-2:  #c5ccd4;
    --ink-3:  #8f99a5;

    --blue:   #66aede;
    --blue-2: #97cbee;
    --brass:  #dcbc7c;

    --wash: #4a3a1c;
    --aura: .70;
    /* mirrored: the wash is pinned dark here, so a pale bottle can't wash the
       page out any more than a dark one can bury it */
    --ground: color-mix(in srgb, var(--wash) 46%, var(--paper));

    --sh1: 0 1px 1px rgba(0,0,0,.34),
           0 2px 6px rgba(0,0,0,.40);
    --sh2: 0 1px 1px rgba(0,0,0,.34),
           0 6px 14px rgba(0,0,0,.44),
           0 18px 44px rgba(0,0,0,.50);
    --sh3: 0 -1px 0 rgba(0,0,0,.40),
           0 -20px 64px rgba(0,0,0,.62);
    --lift: 0 2px 3px rgba(0,0,0,.40),
            0 12px 26px rgba(0,0,0,.48),
            0 28px 64px rgba(0,0,0,.55);
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background-color:var(--ground);
  transition:background-color 900ms var(--ease);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(92px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; }
h1,h2,h3,p,dl,dd,figure { margin:0; }
figure { padding:0; }
ul { margin:0; padding:0; list-style:none; }
[hidden] { display:none !important; }

:where(a,button,input,select,[tabindex]):focus-visible {
  outline:2px solid var(--blue); outline-offset:2px; border-radius:var(--r1);
}

.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip {
  position:absolute; left:var(--s3); top:-60px; z-index:100;
  background:var(--ink); color:var(--paper);
  padding:var(--s2) var(--s4); border-radius:var(--r1);
  text-decoration:none; font-weight:600;
  transition:top var(--dur) var(--ease);
}
.skip:focus { top:var(--s3); }

.shell { width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--s3); }
@media (min-width:720px){ .shell { padding-inline:var(--s5); } }

/* --- Aura: the drifting colour field ------------------------------------- */
.aura { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.aura.is-bloom { --bloom:1.85; }
/* A soft field of colour, drawn rather than blurred.
   These were circles under filter:blur(78px). That looks right and costs
   everything: a 62vmax blurred surface is re-rendered on every frame it
   moves, which measured at 50ms per frame while scrolling -- 20fps -- and
   dropped to 16.7ms the moment the aura was hidden. A radial gradient has
   the same falloff, needs no filter, and leaves the drift on the compositor
   where it belongs. */
.aura__b {
  position:absolute; display:block;
  background:radial-gradient(closest-side,
    var(--wash) 0%,
    color-mix(in srgb, var(--wash) 62%, transparent) 42%,
    color-mix(in srgb, var(--wash) 22%, transparent) 68%,
    transparent 100%);
  opacity:calc(var(--aura) * var(--bloom, 1));
  will-change:transform;
  transition:background 900ms var(--ease), opacity 900ms var(--ease);
}
.aura__b--1 { width:62vmax; height:62vmax; top:-24vmax; left:-18vmax; animation:drift1 34s ease-in-out infinite; }
.aura__b--2 { width:52vmax; height:52vmax; top:24vh;   right:-20vmax; animation:drift2 44s ease-in-out infinite; opacity:calc(var(--aura)*.78*var(--bloom,1)); }
.aura__b--3 { width:46vmax; height:46vmax; bottom:-18vmax; left:22vw; animation:drift3 52s ease-in-out infinite; opacity:calc(var(--aura)*.62*var(--bloom,1)); }
/* a little tooth so the gradient never bands */
.aura__grain {
  position:absolute; inset:-40%;
  opacity:.018;
  background-image:radial-gradient(currentColor .5px, transparent .6px);
  background-size:3px 3px;
  color:var(--ink);
}
@keyframes drift1 {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  50%     { transform:translate3d(9vw,7vh,0) scale(1.14); }
}
@keyframes drift2 {
  0%,100% { transform:translate3d(0,0,0) scale(1.06); }
  50%     { transform:translate3d(-11vw,-8vh,0) scale(.92); }
}
@keyframes drift3 {
  0%,100% { transform:translate3d(0,0,0) scale(.95); }
  50%     { transform:translate3d(7vw,-10vh,0) scale(1.18); }
}

/* --- Masthead ------------------------------------------------------------- */
.mast { padding-block:var(--s7) var(--s5); text-align:center; }
@media (min-width:720px){ .mast { padding-block:var(--s8) var(--s6); } }

.mast__eyebrow {
  font-size:.64rem; letter-spacing:.36em; text-transform:uppercase;
  font-weight:700; color:var(--blue); margin-bottom:var(--s3);
  animation:fadeUp 700ms var(--ease) both;
}
.mast__mark {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,10vw,4.6rem);
  line-height:.98; letter-spacing:-.022em;
  font-variation-settings:"opsz" 144;
  animation:fadeUp 900ms var(--ease) 80ms both;
}
.mast__line {
  margin-top:var(--s4);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(.98rem,3.2vw,1.15rem);
  color:var(--ink-2); letter-spacing:.005em;
  animation:fadeUp 900ms var(--ease) 140ms both;
}
.mast__sub {
  margin-top:var(--s2); font-size:.8rem; color:var(--ink-3);
  letter-spacing:.02em;
  animation:fadeUp 900ms var(--ease) 220ms both;
}

/* --- Best sellers reel ---------------------------------------------------- */
.reel { padding-block:var(--s4) var(--s6); }
.reel__head { display:flex; align-items:baseline; justify-content:center; gap:var(--s3); margin-bottom:var(--s3); }
.reel__title {
  font-size:.66rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-3);
}
.reel__win {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.reel__sp { flex:0 0 auto; width:var(--s3); }
@media (min-width:720px){ .reel__sp { width:var(--s5); } }
.reel__track {
  display:flex; gap:var(--s3); width:max-content;
  animation:slide 68s linear infinite;
  will-change:transform;
}
.reel__win:hover .reel__track,
.reel__track:focus-within,
.reel.is-held .reel__track { animation-play-state:paused; }
@keyframes slide { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }

.chip {
  flex:0 0 auto; width:132px;
  display:flex; flex-direction:column;
  background:none; border:0; padding:0; text-align:left;
  color:inherit;
}
.chip__shot {
  display:block; width:132px; height:132px;
  border-radius:var(--r2); overflow:hidden;
  background:var(--sunk); box-shadow:var(--sh1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chip__shot img { width:100%; height:100%; object-fit:cover; }
.chip:hover .chip__shot { transform:translateY(-4px) scale(1.02); box-shadow:var(--sh2); }
.chip__nm {
  display:block; font-size:.76rem; font-weight:600; margin-top:var(--s2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chip__pr { display:block; font-size:.74rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* --- Shared-link note ----------------------------------------------------- */
/* --- Order summary (arriving from a shared link) -------------------------- */
.order {
  margin-bottom:var(--s5);
  padding:var(--s5) var(--s4) var(--s4);
  background:color-mix(in srgb,var(--wash) 20%,var(--card));
  border:1px solid var(--line);
  border-radius:var(--r3);
  box-shadow:var(--sh2);
  animation:fadeUp 620ms var(--ease-out) both;
}
@media (min-width:720px){ .order { padding:var(--s6) var(--s5) var(--s5); } }

.order__top { display:flex; align-items:flex-start; gap:var(--s3); }
.order__top > div { flex:1 1 auto; min-width:0; }
.order__eyebrow {
  font-size:.6rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue);
}
.order__title {
  font-family:var(--serif); font-weight:400; font-size:1.5rem;
  line-height:1.15; margin-top:5px; letter-spacing:-.01em;
}
.order__sub { font-size:.84rem; color:var(--ink-3); margin-top:4px; }
.order__x { flex:0 0 auto; margin:-6px -6px 0 0; }

.order__lines { display:grid; gap:var(--s3); margin-top:var(--s5); }
.oline { display:grid; grid-template-columns:56px 1fr auto; gap:var(--s3); align-items:center; }
.oline__pic {
  width:56px; aspect-ratio:1/1; border-radius:var(--r1);
  background:var(--sunk); overflow:hidden; display:grid; place-items:center;
  position:relative; box-shadow:var(--sh1);
}
.oline__pic img { width:100%; height:100%; object-fit:cover; }
.oline__pic .tile svg { width:52%; }
.oline__mid { min-width:0; }
.oline__nm { font-weight:600; font-size:.94rem; line-height:1.25; }
.oline__sp { font-size:.76rem; color:var(--ink-3); margin-top:2px; }
.oline__mo {
  font-size:.7rem; font-weight:600; letter-spacing:.05em;
  color:var(--ink-3); font-variant-numeric:tabular-nums; margin-top:3px;
}
.oline__right { text-align:right; line-height:1.3; }
.oline__q { display:block; font-size:.78rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.oline__amt { display:block; font-weight:700; font-variant-numeric:tabular-nums; }

.order__sum {
  margin-top:var(--s5); padding-top:var(--s4);
  border-top:1px solid var(--line); display:grid; gap:var(--s2);
}
.order__r { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); font-size:.92rem; }
.order__r dt { color:var(--ink-2); }
.order__r dd { font-variant-numeric:tabular-nums; }
.order__hint { color:var(--ink-3); font-size:.76rem; }
.order__r--tot {
  margin-top:var(--s2); padding-top:var(--s3);
  border-top:1px solid var(--line); align-items:center;
}
.order__r--tot dt { font-family:var(--serif); font-size:1.15rem; color:var(--ink); }
.order__r--tot dd { text-align:right; line-height:1.25; }
.order__usd { display:block; font-size:1.34rem; font-weight:700; letter-spacing:-.018em; }
.order__cad { display:block; font-size:.8rem; color:var(--brass); font-weight:700; margin-top:2px; }

.order__act { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5); }
.order__act .btn { flex:1 1 160px; }

/* --- Toolbar -------------------------------------------------------------- */
.bar {
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--ground) 72%,transparent);
  backdrop-filter:saturate(1.8) blur(20px);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid transparent;
  /* the rule and the shadow only appear once the page is under the bar, so
     it reads as part of the page until it has something to sit above */
  transition:border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.bar.is-stuck {
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 color-mix(in srgb,var(--line) 60%,transparent),
             0 10px 24px -18px rgba(15,18,22,.5);
}
/* On a phone: search on its own line, the two menus side by side beneath it.
   On a wide screen: brand, search, sort — the search in the middle, where the
   hand and the eye both go first. Source order keeps search first so it is
   also the first thing a keyboard reaches. */
.bar__inner {
  padding-block:var(--s3);
  display:grid; gap:var(--s2);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "find find"
    "brand sort";
}
.find  { grid-area:find; }
.pick--brand { grid-area:brand; }
.pick--sort  { grid-area:sort; }

@media (min-width:720px){
  .bar__inner {
    grid-template-columns:230px minmax(0,1fr) 190px;
    grid-template-areas:"brand find sort";
    align-items:center; gap:var(--s3);
  }
}
.find { position:relative; display:flex; align-items:center; }
.find__icon {
  position:absolute; left:14px; width:17px; height:17px; color:var(--ink-3);
  pointer-events:none;
  transition:color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.find__input {
  width:100%; min-height:46px; padding:0 42px 0 40px;
  background:var(--card); border:1px solid var(--line);
  border-radius:999px; font-size:16px;
  box-shadow:var(--sh1);
  transition:border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.find__input::placeholder { color:var(--ink-3); }
.find__input:focus {
  outline:none; border-color:color-mix(in srgb,var(--blue) 55%,var(--line));
  /* a ring that grows outward rather than a hard 3px band appearing at once */
  box-shadow:var(--sh1), 0 0 0 4px color-mix(in srgb,var(--blue) 13%,transparent);
}
.find:focus-within .find__icon { color:var(--blue); transform:scale(1.06); }
.find__input::-webkit-search-cancel-button { display:none; }
.find__x {
  position:absolute; right:7px; width:32px; height:32px;
  display:grid; place-items:center;
  background:none; border:0; border-radius:50%; color:var(--ink-3);
  transition:background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.find__x svg { width:15px; height:15px; }
.find__x:hover { background:var(--sunk); color:var(--ink); }

/* The result count is the only feedback that an instant search happened, so
   it gets a nudge of its own each time it changes. */
.count { transition:opacity 180ms var(--ease-out); }
.count.is-fresh { animation:countIn 320ms var(--ease-out); }
@keyframes countIn {
  from { opacity:0; transform:translateY(-3px); }
  to   { opacity:1; transform:none; }
}


/* The two filters used to be transparent pills carrying grey text, which on a
   wide screen read as placeholders rather than controls. They now sit on the
   same card surface as the search field and carry their own standing label, so
   the value beside it is a value and not a guess at one. */
.pick { position:relative; min-width:0; }
.pick__cap {
  display:none;
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); pointer-events:none;
}
.pick__sel {
  appearance:none; -webkit-appearance:none;
  width:100%; min-height:44px; padding:0 34px 0 var(--s3);
  background:var(--card); border:1px solid var(--line);
  border-radius:999px; font-size:.88rem; font-weight:600;
  color:var(--ink); text-overflow:ellipsis;
  /* the native dropdown is painted by the browser, not by us; without this it
     renders in the OS scheme and can come out light-on-light */
  color-scheme:light dark;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pick__sel option { background:var(--card); color:var(--ink); }
.pick__sel:hover { border-color:var(--line-2); }
.pick__sel:focus-visible {
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent);
}
.pick__caret {
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--ink-2); pointer-events:none;
}
@media (min-width:720px){
  .pick__cap { display:block; }
  /* one indent for both, so the two values line up as a pair */
  .pick__sel { padding-left:64px; }
}

.count {
  padding-block:var(--s5) var(--s3);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}

/* --- Grid ----------------------------------------------------------------- */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:var(--s5) 10px;
}
@media (min-width:560px){ .grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--s6) var(--s4); } }
@media (min-width:1000px){ .grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--s7) var(--s5); } }

.card { display:flex; flex-direction:column; animation:rise 460ms var(--ease) both; }

.card__shot {
  position:relative; aspect-ratio:1/1;
  border-radius:var(--r2); overflow:hidden;
  background:var(--sunk); box-shadow:var(--sh1);
  border:0; padding:0; width:100%;
  cursor:pointer;
  transition:box-shadow 320ms var(--ease), transform 320ms var(--ease);
}
/* A photo arrives by fading up out of its own placeholder rather than
   snapping in, which is the difference between a page that loads and a page
   that assembles itself. */
.card__img {
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:transform 700ms var(--ease), opacity 420ms var(--ease-out);
}
.card__img.is-in { opacity:1; }

/* The placeholder underneath: a still tone, with a slow sheen crossing it so
   a slow connection reads as loading rather than as broken. */
.card__shot::after {
  content:""; position:absolute; top:0; bottom:0; left:-55%; width:55%;
  background:linear-gradient(100deg,
    transparent,
    color-mix(in srgb, var(--card) 55%, transparent) 50%,
    transparent);
  /* translate, not background-position: one repaints the tile on every frame
     of every unloaded card, the other is handed to the compositor */
  animation:sheen 1.6s linear infinite;
  opacity:1; transition:opacity 320ms var(--ease-out);
  pointer-events:none;
}
.card__shot.is-ready::after { opacity:0; animation:none; }
@keyframes sheen {
  from { transform:translateX(0); }
  to   { transform:translateX(300%); }
}

@media (hover:hover){
  .card__shot:hover { box-shadow:var(--lift); transform:translateY(-5px); }
  .card__shot:hover .card__img { transform:scale(1.055); }
}
.card--out .card__shot { opacity:.5; }
.card--on .card__shot { box-shadow:0 0 0 2px var(--tint), var(--sh2); }

.tile {
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(168deg,color-mix(in srgb,var(--tile-bg) 88%,var(--card)) 0%,var(--tile-bg) 100%);
  color:var(--tile-ink);
}
.tile svg { width:46%; }
.tile__mono { fill:currentColor; font-family:var(--serif); font-weight:600; font-size:15px; letter-spacing:.5px; }
.tile--0{--tile-bg:#dbe6f0;--tile-ink:#3f647f} .tile--1{--tile-bg:#dde6dd;--tile-ink:#47664f}
.tile--2{--tile-bg:#efe6d5;--tile-ink:#776338} .tile--3{--tile-bg:#f0dfd8;--tile-ink:#8a5744}
.tile--4{--tile-bg:#e6dbe8;--tile-ink:#64476d} .tile--5{--tile-bg:#dfe3e8;--tile-ink:#4d5763}
.tile--6{--tile-bg:#e3e7d4;--tile-ink:#5a6539} .tile--7{--tile-bg:#f0dde3;--tile-ink:#7f4d5d}
@media (prefers-color-scheme:dark){
  .tile--0{--tile-bg:#17232f;--tile-ink:#8fb4d6} .tile--1{--tile-bg:#182519;--tile-ink:#98bfa1}
  .tile--2{--tile-bg:#251f14;--tile-ink:#c9b07a} .tile--3{--tile-bg:#261a16;--tile-ink:#d09b8a}
  .tile--4{--tile-bg:#1f1823;--tile-ink:#bb9cc4} .tile--5{--tile-bg:#1a1f25;--tile-ink:#a1adba}
  .tile--6{--tile-bg:#1d2116;--tile-ink:#adb984} .tile--7{--tile-bg:#241820;--tile-ink:#cf9dab}
}

.card__flag {
  position:absolute; top:var(--s2); left:var(--s2);
  padding:4px var(--s2);
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(6px); color:var(--ink);
  border-radius:999px;
  font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

.card__txt { padding:var(--s3) 2px 0; }
.card__brand {
  font-size:.62rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card__name {
  font-family:var(--serif); font-weight:400; font-size:1.02rem;
  line-height:1.2; letter-spacing:-.006em; margin-top:5px; text-wrap:balance;
}
.card__spec { font-size:.73rem; color:var(--ink-3); margin-top:4px; }
/* The reference the order is actually placed against. Set as a code, not as
   prose, so it reads as something to quote rather than something to skim. */
.card__model {
  font-size:.68rem; font-weight:600; letter-spacing:.06em; color:var(--ink-3);
  font-variant-numeric:tabular-nums; margin-top:5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.card__pay { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s2); margin-top:var(--s3); padding:0 2px; }
.card__cost { display:flex; flex-direction:column; line-height:1.1; }
.card__usd { font-weight:700; font-size:1.02rem; font-variant-numeric:tabular-nums; letter-spacing:-.012em; }
.card__cad { font-size:.7rem; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-top:3px; }

.slot { flex:0 0 auto; min-width:38px; min-height:38px; display:grid; }
.plus {
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  border:0; border-radius:50%;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.plus svg { width:17px; height:17px; }
.plus:hover { background:var(--blue-2); }
.plus:active { transform:scale(.86); }
.plus[disabled] { background:var(--sunk); color:var(--ink-3); cursor:not-allowed; }

.step {
  display:flex; align-items:center;
  background:var(--card); border:1px solid var(--line-2);
  border-radius:999px; height:38px;
}
.step__b { width:34px; height:36px; display:grid; place-items:center; background:none; border:0; border-radius:999px; color:var(--ink); }
.step__b svg { width:13px; height:13px; }
.step__b:hover { color:var(--blue); }
.step__b:active { transform:scale(.9); }
.step__n { min-width:16px; text-align:center; font-weight:700; font-size:.88rem; font-variant-numeric:tabular-nums; }

.more { padding-block:var(--s5) var(--s7); text-align:center; font-size:.78rem; color:var(--ink-3); }
.blank { display:grid; justify-items:center; gap:var(--s2); text-align:center; padding:var(--s8) var(--s4); color:var(--ink-3); }
.blank--in { padding:var(--s7) var(--s4); }
.blank__title { font-family:var(--serif); font-size:1.3rem; font-weight:400; color:var(--ink); }
.blank__sub { font-size:.86rem; max-width:32ch; }
.blank .btn { margin-top:var(--s3); }

.foot {
  margin-top:var(--s7); border-top:1px solid var(--line);
  padding-block:var(--s5); font-size:.78rem; color:var(--ink-3); text-align:center;
}

/* --- Dock ----------------------------------------------------------------- */
.dock {
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:var(--s3); padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--ground) 62%,transparent);
  pointer-events:none;
  animation:dockUp 420ms var(--ease) both;
}
.dock__btn {
  pointer-events:auto;
  width:100%; max-width:520px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  min-height:54px; padding:0 var(--s4);
  background:var(--ink); color:var(--paper);
  border:0; border-radius:var(--r4);
  box-shadow:var(--sh2);
  transition:transform var(--dur) var(--ease);
}
.dock__btn:active { transform:scale(.985); }
.dock__l { display:flex; align-items:center; gap:var(--s2); font-size:.9rem; font-weight:500; }
.dock__n {
  display:grid; place-items:center; min-width:25px; height:25px; padding:0 6px;
  background:var(--paper); color:var(--ink); border-radius:999px;
  font-weight:800; font-size:.8rem; font-variant-numeric:tabular-nums;
}
.dock__r { text-align:right; line-height:1.15; }
.dock__usd { display:block; font-weight:700; font-variant-numeric:tabular-nums; }
.dock__cad { display:block; font-size:.68rem; color:color-mix(in srgb,var(--paper) 62%,transparent); font-variant-numeric:tabular-nums; }

/* --- Sheets --------------------------------------------------------------- */
.sheet, .look {
  padding:0; border:0;
  background:var(--card); color:var(--ink);
  width:100%; max-width:100%;
  max-height:92dvh; margin:auto auto 0;
  border-radius:var(--r4) var(--r4) 0 0;
  box-shadow:var(--sh3);
  overflow:hidden; flex-direction:column;
}
.sheet[open], .look[open] { display:flex; animation:sheetUp 340ms var(--ease); }
.sheet::backdrop, .look::backdrop { background:rgba(8,10,13,.52); backdrop-filter:blur(4px); }

@media (min-width:760px){
  .sheet { max-width:440px; max-height:100dvh; height:100dvh; margin:0 0 0 auto; border-radius:var(--r4) 0 0 var(--r4); }
  .sheet[open] { animation:sheetIn 340ms var(--ease); }
  .sheet__grip { display:none; }
}

.sheet__grip { width:34px; height:4px; border-radius:999px; background:var(--line-2); margin:var(--s2) auto 0; flex:0 0 auto; }
.sheet__top { display:flex; align-items:center; justify-content:space-between; padding:var(--s3) var(--s4); flex:0 0 auto; }
.sheet__h { font-family:var(--serif); font-size:1.28rem; font-weight:400; }
.ico { width:38px; height:38px; display:grid; place-items:center; background:none; border:0; border-radius:50%; color:var(--ink-3); }
.ico svg { width:19px; height:19px; }
.ico:hover { background:var(--sunk); color:var(--ink); }

.sheet__body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 var(--s4) var(--s4); }

.lines { display:grid; gap:var(--s3); }
.line { display:grid; grid-template-columns:52px 1fr auto; gap:var(--s3); align-items:center; }
.line__pic { width:52px; aspect-ratio:1/1; border-radius:var(--r1); background:var(--sunk); overflow:hidden; display:grid; place-items:center; position:relative; }
.line__pic img { width:100%; height:100%; object-fit:cover; }
.line__pic .tile svg { width:52%; }
.line__mid { min-width:0; }
.line__nm { font-weight:600; font-size:.9rem; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.line__sp { font-size:.74rem; color:var(--ink-3); }
.line__mo { font-size:.8rem; color:var(--ink-2); font-variant-numeric:tabular-nums; margin-top:2px; }
.line__ctl { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.line__ctl .step { height:34px; background:transparent; }
.line__ctl .step__b { width:30px; height:32px; }
.line__x { background:none; border:0; padding:0; font-size:.72rem; color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; }
.line__x:hover { color:var(--ink); }

.who { margin-top:var(--s5); }
.who__l { display:block; font-size:.78rem; font-weight:600; margin-bottom:var(--s2); }
.who__i { width:100%; min-height:44px; padding:0 var(--s3); background:var(--paper); border:1px solid var(--line); border-radius:var(--r1); font-size:16px; }
.who__i:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent); }

.sum { margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line); display:grid; gap:var(--s2); }
.sum__r { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); font-size:.9rem; }
.sum__r dt { color:var(--ink-2); }
.sum__r dd { font-variant-numeric:tabular-nums; }
.sum__hint { color:var(--ink-3); font-size:.76rem; }
.sum__r--tot { margin-top:var(--s2); padding-top:var(--s3); border-top:1px solid var(--line); align-items:center; }
.sum__r--tot dt { font-family:var(--serif); font-size:1.12rem; color:var(--ink); }
.sum__r--tot dd { text-align:right; line-height:1.2; }
.sum__usd { display:block; font-size:1.3rem; font-weight:700; letter-spacing:-.018em; }
.sum__cad { display:block; font-size:.8rem; color:var(--brass); font-weight:700; margin-top:2px; }
.rate { margin-top:var(--s3); font-size:.72rem; color:var(--ink-3); }

.sheet__foot {
  flex:0 0 auto;
  padding:var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--card);
}
.sheet__minor { display:flex; align-items:center; justify-content:space-between; margin-top:var(--s3); }

/* --- Look (single perfume) ------------------------------------------------ */
/* The photo used to be a hard 1:1 crop capped at 44dvh, so a tall bottle lost
   its cap and its base and the panel sat wherever the crop left it. The frame
   is now a flexible area the picture is fitted inside -- contain, not cover --
   so nothing is ever cut, and the panel is centred by the dialog itself. */
/* No position:relative here. A modal <dialog> is positioned by the browser --
   fixed, inset 0, centred by its own auto margins. Setting position:relative
   overrode that and dropped the panel into normal document flow, which is why
   it sat high on the page with the picture running off the top. It is already
   a containing block for the close button and the arrows without it. */
.look { overflow:hidden; }
.look__x {
  position:absolute; z-index:3; top:var(--s3); right:var(--s3);
  background:color-mix(in srgb,var(--card) 82%,transparent); backdrop-filter:blur(8px);
}
.look__in {
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
}
.look__shot {
  flex:0 0 auto; display:grid; place-items:center;
  background:var(--sunk); padding:var(--s4) var(--s4) 0;
  min-height:0;
}
.look__shot img {
  display:block; width:auto; height:auto;
  max-width:100%; max-height:38dvh;
  object-fit:contain;
  border-radius:var(--r2);
}
.look__txt {
  flex:1 1 auto;
  display:flex; flex-direction:column;
  padding:var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
}
/* Centred when there is room, and pinned to the top when there is not.
   justify-content:center would have centred it either way, and a panel taller
   than its frame then loses its first line off the top with no way to scroll
   back to it. Auto margins simply collapse instead. */
.look__txt > :first-child { margin-top:auto; }
.look__txt > :last-child { margin-bottom:auto; }
.look__brand { font-size:.64rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.look__name { font-family:var(--serif); font-weight:400; font-size:1.6rem; line-height:1.15; margin-top:6px; letter-spacing:-.01em; text-wrap:balance; }
.look__spec { font-size:.82rem; color:var(--ink-3); margin-top:6px; }

.look__model {
  align-self:flex-start; display:inline-flex; align-items:center; gap:var(--s2);
  margin-top:var(--s3); padding:7px var(--s3);
  background:var(--sunk); border:1px solid var(--line); border-radius:999px;
  transition:border-color var(--dur) var(--ease);
}
.look__model:hover { border-color:var(--line-2); }
.look__model-k { font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.look__model-v { font-size:.94rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.02em; color:var(--ink); }
.look__model-c { font-size:.68rem; font-weight:700; color:var(--blue); }

.look__scent { margin-top:var(--s4); }
.look__scent-k { font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.look__notes { font-size:.9rem; line-height:1.6; color:var(--ink-2); margin-top:5px; max-width:46ch; }

.look__price { display:flex; align-items:baseline; gap:var(--s3); margin-top:var(--s4); }
.look__price #lookUsd { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.look__cad { font-size:.85rem; color:var(--brass); font-weight:700; font-variant-numeric:tabular-nums; }
.look__act { margin-top:var(--s4); }
.look__act .step { height:52px; width:100%; justify-content:space-between; padding:0 var(--s3); border-radius:999px; }
.look__act .step__b { width:44px; height:48px; }
.look__act .step__n { font-size:1.05rem; }

/* walk the visible list without going back to the grid */
.look__step {
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  width:42px; height:42px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--card) 86%,transparent); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:50%; color:var(--ink);
  transition:opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.look__step svg { width:20px; height:20px; }
.look__step:hover { border-color:var(--line-2); }
.look__step:disabled { opacity:.3; }
.look__step--prev { left:var(--s2); }
.look__step--next { right:var(--s2); }
@media (max-width:759px){ .look__step { display:none; } }

/* Desktop layout for the panel. This block has to come after the rules above,
   not up with the other breakpoints: the selectors carry the same weight, so
   whichever is written last is the one that lands. */
@media (min-width:760px){
  .look {
    max-width:900px; margin:auto;
    border-radius:var(--r4); max-height:86dvh;
  }
  .look[open] { animation:pop 300ms var(--ease); }
  /* picture beside the detail, not above it, so both are fully in view */
  .look__in { flex-direction:row; align-items:stretch; overflow:hidden; }
  .look__shot {
    flex:0 0 46%; min-width:0; align-self:stretch;
    padding:var(--s5); border-right:1px solid var(--line);
  }
  .look__shot img { max-height:66dvh; }
  .look__txt {
    flex:1 1 auto; min-width:0;
    overflow-y:auto; overscroll-behavior:contain;
    padding:var(--s6) var(--s5) var(--s5);
  }
  .look__x { background:color-mix(in srgb,var(--card) 92%,transparent); }
  .look__step--prev { left:calc(-1 * var(--s6)); }
  .look__step--next { right:calc(-1 * var(--s6)); }
  .look { overflow:visible; }
  .look__in { border-radius:var(--r4); overflow:hidden; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:42px; padding:0 var(--s4);
  border:1px solid transparent; border-radius:999px;
  font-weight:700; font-size:.9rem;
  text-decoration:none;   /* .btn is used on an <a> as well as a <button> */
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform:scale(.985); }
.btn--wide { width:100%; min-height:52px; font-size:.98rem; }
.btn__i { width:18px; height:18px; flex:0 0 auto; }
.btn--fill { background:var(--ink); color:var(--paper); }
.btn--fill:hover { background:var(--blue-2); }
.btn--fill.is-ok { background:var(--blue); }
.btn--line { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--line:hover { border-color:var(--blue); color:var(--blue); }
.btn--sm { min-height:36px; padding:0 var(--s3); font-size:.83rem; }

.link { background:none; border:0; padding:var(--s1) 0; font-size:.82rem; font-weight:700; color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.link:hover { color:var(--blue-2); }
.link--mute { color:var(--ink-3); font-weight:500; }
.link--mute:hover { color:var(--ink); }

/* --- Toast ---------------------------------------------------------------- */
.toast {
  position:fixed; z-index:60; left:50%; bottom:calc(100px + env(safe-area-inset-bottom));
  transform:translate(-50%,10px);
  max-width:min(90vw,400px); padding:var(--s3) var(--s4);
  background:var(--ink); color:var(--paper);
  border-radius:999px; box-shadow:var(--sh2);
  font-size:.85rem; font-weight:600; text-align:center;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.toast.is-up { opacity:1; visibility:visible; transform:translate(-50%,0); }

/* --- Motion --------------------------------------------------------------- */
@keyframes rise   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes dockUp { from { opacity:0; transform:translateY(60px); } to { opacity:1; transform:none; } }
@keyframes sheetUp{ from { transform:translateY(100%); } to { transform:none; } }
@keyframes sheetIn{ from { transform:translateX(100%); } to { transform:none; } }
@keyframes pop    { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .aura__b { animation:none !important; }
  .reel__track { animation:none !important; }
  .reel__win { overflow-x:auto; }
  /* the sheen would otherwise pulse forever behind a photo that never arrives */
  .card__shot::after { animation:none !important; opacity:0 !important; }
  /* cards are held invisible until they animate in; with motion off they must
     not be held at all */
  .card { opacity:1 !important; }
  .card__img { opacity:1 !important; }
}