/* ═══════════════════════════════════════════════════════════════════════════
   THE FLORIST JA
   Ink + bone + one rose red sampled from the roses in her own photographs.
   The interface stays monochrome so the flowers are the only colour on screen.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ground: blush page, white cards, warm plum ink */
  --blush:    #FCF1F3;
  --blush-2:  #F7E3E8;
  --blush-3:  #F2D5DC;
  --white:    #FFFFFF;
  --ink:      #3B2A31;
  --ink-2:    #2C1E24;
  --paper:    #FCF1F3;
  --bone:     #FFFFFF;
  --mute:     #8B737B;
  --mute-2:   #A9919A;

  /* the accent: sampled at #C80320 from her red roses */
  --rose:     #C8102E;
  --rose-soft:#EFC3CE;

  --hair:      rgba(59,42,49,.13);
  --hair-soft: rgba(59,42,49,.07);
  --hair-b:    rgba(59,42,49,.13);
  --hair-b2:   rgba(59,42,49,.07);

  --r:      16px;
  --r-sm:   10px;
  --shadow: 0 14px 34px -20px rgba(90,50,64,.34);

  --disp: "EB Garamond", "Garamond", "Times New Roman", serif;
  --ui:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1440px;
  --pad:  clamp(18px, 4.2vw, 72px);
  --sec:  clamp(76px, 9vw, 150px);

  --e:  cubic-bezier(.22,.68,.36,1);
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* The browser's own [hidden] rule is display:none at specificity (0,1,0), which
   is exactly what a class like .card or .btn scores. Equal specificity, so the
   later rule wins, and any element given a display by a class simply ignores
   its hidden attribute. That silently broke the collection filter: the eight
   non-matching cards were correctly marked hidden and stayed on screen anyway.
   One !important here rather than remembering a .x[hidden] rule for every new
   component. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--blush); color:var(--ink);
  font-family:var(--ui); font-weight:400; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; font-synthesis-weight:none;
}
body.lock{ overflow:hidden; }
img{ display:block; max-width:100%; }
svg{ display:block; }
button,input,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ list-style:none; padding:0; margin:0; }
::selection{ background:var(--rose); color:#fff; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{
  position:fixed; top:-80px; left:14px; z-index:999; background:var(--rose); color:#fff;
  padding:12px 18px; font-size:13px; transition:top .2s;
}
.skip:focus{ top:14px; }
:focus-visible{ outline:2px solid var(--rose); outline-offset:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.ic{ width:1em; height:1em; flex:none; }

/* ── type system ───────────────────────────────────────────────────────── */
.h2{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2.55rem, 5.8vw, 5.1rem); line-height:1.06; letter-spacing:.002em;
  text-wrap:balance; margin:0;
}
.kick{
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose); margin:0 0 1.5em;
}
.say{
  font-size:clamp(.98rem,1.2vw,1.12rem); line-height:1.64; color:var(--mute);
  max-width:52ch; margin-top:1.4em; font-weight:300; text-wrap:pretty;
}
/* px, not ch. `ch` measures the body font and would strangle the display face */
.head{
  margin-bottom:clamp(38px,4.8vw,66px); max-width:min(860px,100%);
  margin-inline:auto; text-align:center;
}
.head .say{ max-width:48ch; margin-inline:auto; }
/* in a centred header the eyebrow is flanked by two short rules */
.head .kick{ display:inline-flex; align-items:center; gap:14px; }
.head .kick::before,.head .kick::after{ content:""; width:26px; height:1px; background:var(--rose); opacity:.55; }
.head--wide{ max-width:none; }

/* ── buttons ───────────────────────────────────────────────────────────── */
/* small caps, wide tracking, an arrow on the right: one button shape for the
   whole site. No icons but the arrow, so nothing implies a channel. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.9em;
  padding:1.15em 1.9em; font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  border-radius:100px; border:1px solid transparent; white-space:nowrap;
  transition:background .3s var(--e), color .3s var(--e), border-color .3s var(--e);
}
.btn .ic{ font-size:1.4em; transition:transform .35s var(--e); }
.btn:hover .ic{ transform:translateX(3px); }
.btn--rose{ background:var(--rose); color:#fff; }
.btn--rose:hover{ background:var(--ink); }
.btn--ink{ background:var(--ink); color:var(--white); }
.btn--ink:hover{ background:var(--rose); color:#fff; }
.btn--bone{ background:var(--white); color:var(--ink); }
.btn--bone:hover{ background:var(--rose); color:#fff; }
.btn--hair{ border-color:var(--hair); color:var(--ink); }
.btn--hair{ background:var(--white); }
.btn--hair:hover{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.btn--wide{ width:100%; }
/* .btn sets display, which beats the browser's own [hidden] rule at equal
   specificity, so a hidden button stays on screen without this */
.btn[hidden]{ display:none; }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; inset:0 0 auto; z-index:600;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  padding:clamp(14px,1.7vw,22px) var(--pad);
  transition:background .4s var(--e), transform .45s var(--e), box-shadow .4s var(--e);
}
/* over the tinted hero the bar runs light-on-dark; the moment it lifts off the
   top (`.stuck`, 40px) it flips back to the blush glass bar and dark ink logo */
.nav::before{
  content:""; position:absolute; inset:0 0 auto; height:190%; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(20,9,13,.34) 0%,rgba(20,9,13,.13) 52%,rgba(20,9,13,0) 100%);
  transition:opacity .4s var(--e);
}
.nav.stuck::before{ opacity:0; }
.nav__mark{ position:relative; grid-column:2; grid-row:1; justify-self:center; line-height:0; }
.nav__logo{
  /* Sized to the lettering, not the file. The new mark carries its lily
     above the wordmark, so the same box height leaves FLORIST noticeably
     smaller than the old logo set it. */
  height:clamp(38px,4vw,52px); width:auto;
  filter:brightness(0) invert(1); opacity:.94;      /* bone over the dark hero */
  transition:filter .35s var(--e), opacity .35s var(--e);
}
.nav.stuck .nav__logo{ filter:none; opacity:1; }
/* the outer columns are 1fr each, so justify-self decides whether a group sits
   against the page edge or against the logo. Both sit against the logo. */
.nav__links{ display:flex; align-items:center; gap:clamp(14px,1.6vw,26px); }
.nav__links--l{
  grid-column:1; grid-row:1; justify-self:end;
  padding-right:clamp(22px,3.2vw,52px);
}
.nav__links--r{ padding-left:clamp(22px,3.2vw,52px); }
.nav__links a{
  font-size:13px; color:rgba(255,255,255,.82); position:relative; padding-block:4px;
  transition:color .3s var(--e);
}
.nav.stuck .nav__links a{ color:var(--mute); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:2px; width:100%; height:1px;
  background:var(--rose); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--e);
}
.nav__links a:hover{ color:#fff; }
.nav.stuck .nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* the Shop mega-menu. `.shop` is deliberately NOT positioned, so the panel
   resolves against the fixed .nav and can span the whole bar. */
.shop{ position:static; }
.shop__t{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; padding-block:4px;
  color:rgba(255,255,255,.82); transition:color .3s var(--e);
}
.nav.stuck .shop__t{ color:var(--mute); }
.shop__t .ic{ width:.85em; height:.85em; transition:transform .35s var(--e); }
.shop.is-open .shop__t .ic{ transform:rotate(180deg); }
.shop__t:hover, .shop.is-open .shop__t{ color:#fff; }
.nav.stuck .shop__t:hover, .nav.stuck .shop.is-open .shop__t{ color:var(--ink); }

.shop__p{
  position:absolute; top:calc(100% + 6px); left:var(--pad); right:var(--pad); z-index:10;
  border-radius:24px; background:var(--white); border:1px solid var(--hair-soft);
  box-shadow:0 34px 70px -30px rgba(90,50,64,.55);
  padding:clamp(22px,2.4vw,32px);
  animation:shopIn .32s var(--e);
}
.shop__p[hidden]{ display:none; }
@keyframes shopIn{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
.shop__in{ display:grid; grid-template-columns:1fr 210px; gap:clamp(24px,3vw,48px); align-items:start; }
.shop__hd{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.shop__p h3{
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--rose);
  font-weight:500;
}
.shop__hd p{ font-size:12.5px; color:var(--mute); font-weight:300; }

/* the flower tiles, moved here from the old Quick Shopping section */
.shop__tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:clamp(10px,1.2vw,16px); }
.stile{
  display:flex; flex-direction:column; text-align:left; cursor:pointer;
  border-radius:16px; overflow:clip; background:var(--blush);
  transition:transform .4s var(--e), box-shadow .4s var(--e);
}
.stile:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(90,50,64,.45); }
/* the img is absolutely placed: with height:100% against an auto-height parent
   the image's own ratio wins and aspect-ratio is quietly ignored */
.stile__art{ position:relative; display:block; aspect-ratio:4/5; overflow:clip; background:var(--blush-3); }
.stile__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--e); }
.stile:hover .stile__art img{ transform:scale(1.07); }
.stile__in{ display:flex; flex-direction:column; flex:1; padding:11px 12px 13px; }
.stile__in b{
  font-family:var(--disp); font-weight:400; font-size:1rem; line-height:1.2; color:var(--ink);
}
.stile__in span{ font-size:11.5px; line-height:1.45; color:var(--mute); margin-top:4px; font-weight:300; }

/* the occasion column */
.shop__side{ border-left:1px solid var(--hair-soft); padding-left:clamp(20px,2.4vw,36px); }
.shop__occ{ display:flex; flex-direction:column; margin-top:14px; }
.shop__occ button{
  display:block; width:100%; text-align:left; font-size:14px; color:var(--mute);
  padding:7px 0; transition:color .22s var(--e), transform .22s var(--e);
}
.shop__occ button:hover{ color:var(--rose); transform:translateX(3px); }
.shop__all{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:.7em 1.1em;
  border-radius:100px; background:var(--ink); color:var(--white);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  transition:background .28s var(--e);
}
.shop__all:hover{ background:var(--rose); }
.shop__all .ic{ transition:transform .3s var(--e); }
.shop__all:hover .ic{ transform:translateX(3px); }

/* stretched, so the links start beside the logo and the Order button is the
   only thing that stays out on the edge */
.nav__end{ display:flex; align-items:center; gap:12px; grid-column:3; grid-row:1; justify-self:stretch; }
.nav__order{ margin-left:auto; }
.nav__order{ padding:.72em 1.1em; }

.nav.stuck{ background:rgba(252,241,243,.985); backdrop-filter:blur(18px) saturate(1.35); box-shadow:0 1px 0 var(--hair-soft); }


.nav.hide{ transform:translateY(-105%); }

.burger{ display:none; width:30px; height:22px; position:relative; }
.burger span{
  position:absolute; left:0; right:0; height:1.5px; background:#fff;
  transition:transform .4s var(--e), background .35s;
}
.nav.stuck .burger span{ background:var(--ink); }
.burger span:nth-child(1){ top:7px; }
.burger span:nth-child(2){ top:14px; }

/* the burger menu is a light panel, so the bar has to drop its over-the-hero
   white treatment while it is open or the logo vanishes into the blush */
body.open .burger span{ background:var(--ink)!important; }
body.open .nav__logo{ filter:none; opacity:1; }
body.open .burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
body.open .burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ═══════════ MOBILE MENU ═══════════ */
.menu{
  position:fixed; inset:0; z-index:590; background:var(--blush);
  display:flex; flex-direction:column; justify-content:center; gap:26px;
  padding:96px var(--pad) 40px; overflow-y:auto;
}
.menu[hidden]{ display:none; }
.menu__links{ display:flex; flex-direction:column; }
.menu__links a{
  font-family:var(--disp); font-weight:400; letter-spacing:.006em;
  font-size:clamp(1.5rem,6.2vw,2.2rem); line-height:1.3; color:var(--ink);
  border-top:1px solid var(--hair-soft); padding:.26em 0;
  opacity:0; transform:translateY(16px);
}
.menu__links a:last-child{ border-bottom:1px solid var(--hair-soft); }
body.open .menu__links a{ animation:mIn .55s var(--e) forwards; }
.menu__links a:nth-child(1){ animation-delay:.04s } .menu__links a:nth-child(2){ animation-delay:.09s }
.menu__links a:nth-child(3){ animation-delay:.14s } .menu__links a:nth-child(4){ animation-delay:.19s }
.menu__links a:nth-child(5){ animation-delay:.24s } .menu__links a:nth-child(6){ animation-delay:.29s }
@keyframes mIn{ to{ opacity:1; transform:none } }
.menu__shop{ display:flex; flex-direction:column; gap:8px; }
.menu__l{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--rose); font-weight:500; }
.menu__chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
.menu__chips button{
  padding:.55em 1em; border-radius:100px; background:var(--white);
  font-size:12.5px; color:var(--ink); box-shadow:var(--shadow);
}
.menu__chips button:hover{ background:var(--rose); color:#fff; }
.menu__end{ display:flex; flex-direction:column; gap:14px; }
.menu__end p{ font-size:12px; color:var(--mute); }

/* ═══════════ HERO: her artwork full bleed, only the type sits in front ═══════ */
.hero{
  position:relative; background:var(--blush);
  /* 3:2 artwork: tie the height to the width so the whole arrangement stays in
     frame, but never let it run past the screen on a short laptop */
  min-height:max(min(58vw, 86svh), 540px);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  overflow:hidden; isolation:isolate;
}
.hero__art{ position:absolute; inset:-3%; z-index:0; will-change:transform; }
.hero__art img{
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  animation:breathe 26s ease-in-out infinite alternate;
}
@keyframes breathe{ from{ transform:scale(1) } to{ transform:scale(1.045) } }
/* the dark tint over her artwork. A soft pool of light stays on the bouquet in
   the middle and the wash deepens towards the edges, so it reads as a graded
   tint rather than a flat panel. Same ink as the newsletter band. */
.hero__vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 44%, rgba(26,12,17,.30) 0%,
      rgba(26,12,17,.42) 56%, rgba(26,12,17,.56) 100%),
    linear-gradient(180deg, rgba(26,12,17,.1) 0%, rgba(26,12,17,0) 26%,
      rgba(26,12,17,0) 62%, rgba(26,12,17,.26) 100%);
}
/* film grain over the two dark moments. Barely there, but the flat pink
   washes stop reading as a vector fill */
.grain::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px; mix-blend-mode:overlay;
}

.hero__stage{
  position:relative; z-index:2; width:100%; will-change:transform;
  padding:clamp(78px,9vh,104px) var(--pad) 0;
  display:flex; flex-direction:column; align-items:center;
}
.hero__pre{
  display:inline-flex; align-items:center; align-self:center;
  padding:.42em 1.15em; border-radius:100px;
  background:rgba(255,255,255,.62); backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(255,255,255,.85); box-shadow:0 10px 28px -16px rgba(90,50,64,.45);
  font-family:var(--disp); font-size:clamp(.92rem,1.5vw,1.28rem); color:var(--rose);
  letter-spacing:.14em; margin-bottom:clamp(8px,1.6vh,20px);
  opacity:0; animation:fadeUp .9s var(--e) .15s forwards;
}
/* one span per letter, justified, so the word reaches both edges at any width */
.hero__word{
  display:flex; justify-content:space-between; width:100%;
  font-family:var(--disp); font-weight:400; color:#F9F0F1;   /* warm bone, not pure white */
  font-size:clamp(3.7rem,16.8vw,16.4rem); line-height:.92; margin:0;
}
/* no halo, no shadow, so the letterforms sit clean on the artwork */
.hero__word span{
  display:block; opacity:0; transform:translateY(.2em);
  animation:fadeUp .85s var(--e) forwards;
}
.hero__word span:nth-child(1){ animation-delay:.20s } .hero__word span:nth-child(2){ animation-delay:.26s }
.hero__word span:nth-child(3){ animation-delay:.32s } .hero__word span:nth-child(4){ animation-delay:.38s }
.hero__word span:nth-child(5){ animation-delay:.44s } .hero__word span:nth-child(6){ animation-delay:.50s }
.hero__word span:nth-child(7){ animation-delay:.56s }
@keyframes fadeUp{ to{ opacity:1; transform:none } }

.hero__in{
  position:relative; z-index:2; display:flex; gap:10px;
  margin-top:auto; padding-bottom:clamp(44px,6vh,68px);
}
/* ── the live chip: pulsing dot + a real countdown to the 1 PM cut-off ── */
.live{
  position:absolute; right:var(--pad); bottom:clamp(22px,4vh,40px); z-index:3;
  display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 16px 0 14px;
  border-radius:100px; background:rgba(255,255,255,.7); backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.9); box-shadow:0 12px 34px -16px rgba(90,50,64,.5);
  font-size:12px; font-weight:500; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums;
  opacity:0; animation:fadeUp .8s var(--e) 1.1s forwards;
  transition:transform .3s var(--e), box-shadow .3s var(--e);
}
.live:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -16px rgba(90,50,64,.6); }
.live:active{ transform:translateY(0); }
.live__dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--rose); flex:none; }
.live__dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--rose);
  animation:ping 2.2s var(--e) infinite;
}

/* ── the proof card: score, five stars, and reviews cycling underneath ── */
.proof{
  position:absolute; left:var(--pad); bottom:clamp(22px,4vh,40px); z-index:3;
  width:min(310px, calc(100vw - 2 * var(--pad))); padding:14px 16px 15px;
  border-radius:20px; background:rgba(255,255,255,.72); backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.92); box-shadow:0 18px 44px -20px rgba(90,50,64,.55);
  color:var(--ink); text-align:left;
  opacity:0; animation:fadeUp .8s var(--e) 1s forwards;
  transition:transform .35s var(--e), box-shadow .35s var(--e);
}
.proof:hover{ transform:translateY(-3px); box-shadow:0 22px 46px -22px rgba(90,50,64,.55); }
.proof__top{ display:flex; align-items:center; gap:10px; }
.proof__score{ font-family:var(--disp); font-weight:500; font-size:22px; line-height:1; letter-spacing:.01em; }
.proof__n{ font-size:11px; letter-spacing:.06em; color:var(--mute); white-space:nowrap; }
.stars{ display:inline-flex; gap:3px; }
.stars i{
  width:13px; height:13px; background:var(--rose); display:block;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transform:scale(0); animation:starIn .5s var(--e) forwards, starGlow 3.2s ease-in-out 2s infinite;
}
.stars i:nth-child(1){ animation-delay:1.15s, 2s }   .stars i:nth-child(2){ animation-delay:1.23s, 2.25s }
.stars i:nth-child(3){ animation-delay:1.31s, 2.5s } .stars i:nth-child(4){ animation-delay:1.39s, 2.75s }
.stars i:nth-child(5){ animation-delay:1.47s, 3s }
@keyframes starIn{ from{ transform:scale(0) rotate(-25deg) } to{ transform:none } }
@keyframes starGlow{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.4) } }
.proof__q{
  font-family:var(--disp); font-size:14.5px; line-height:1.4; margin-top:10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:opacity .45s var(--e), transform .45s var(--e);
}
.proof__who{ font-size:11px; color:var(--mute); margin-top:6px; transition:opacity .45s var(--e); }
.proof.is-swapping .proof__q{ opacity:0; transform:translateY(6px); }
.proof.is-swapping .proof__who{ opacity:0; }

/* ═══════════ TICKER ═══════════ */
.tick{
  background:var(--blush-2); color:var(--ink); overflow:hidden;
  border-block:1px solid var(--hair-soft); padding:15px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tick__track{ display:flex; width:max-content; animation:mq 48s linear infinite; }
.tick__set{ display:flex; align-items:center; gap:38px; padding-right:38px; }
.tick__set span{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); opacity:.7; white-space:nowrap;
}
/* the same drawn diamond as the newsletter perks */
.tick__set i{ width:5px; height:5px; background:var(--rose); opacity:.6; transform:rotate(45deg); flex:none; }
@keyframes mq{ to{ transform:translateX(-50%) } }

/* ═══════════ COLLECTION ═══════════ */
.coll{ background:var(--blush); padding-block:var(--sec); }

/* -- filters: one centred capsule. The flower switch carries a single dark
   pill that slides between choices, and the refinements below are set as type
   rather than boxes, so the bar reads as composition instead of chrome. -- */
.filt{
  position:sticky; top:0; z-index:400; background:rgba(252,241,243,.985);
  backdrop-filter:blur(20px) saturate(1.3);
  padding-block:10px; margin-bottom:clamp(26px,3vw,42px);
}
.filt__panel{
  width:fit-content; max-width:100%; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:var(--white); border-radius:22px; box-shadow:var(--shadow);
  padding:9px 12px 11px;
}

/* the flower switch: the pill is one element that slides, not a background
   that switches. moveSeg() in main.js measures the active choice. */
.seg{
  position:relative; display:flex; padding:3px; max-width:100%;
  background:var(--blush); border-radius:100px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.seg::-webkit-scrollbar{ display:none; }
.seg__ind{
  position:absolute; left:0; top:3px; bottom:3px; z-index:0; width:0;
  border-radius:100px; background:var(--ink);
  box-shadow:0 6px 16px -9px rgba(59,42,49,.7);
  transition:transform .5s var(--e), width .5s var(--e);
}
.pill{
  position:relative; z-index:1; flex:none;
  display:inline-flex; align-items:baseline; gap:.45em;
  padding:.52em 1.15em; border:0; border-radius:100px; background:transparent;
  font-size:12.5px; color:var(--ink); white-space:nowrap;
  transition:color .3s var(--e);
}
.pill b{
  font-weight:400; font-size:10px; color:var(--mute-2);
  font-variant-numeric:tabular-nums; transition:color .3s var(--e);
}
.pill:not(.on):hover{ color:var(--rose); }
.pill.on{ color:var(--white); }
.pill.on b{ color:var(--rose-soft); }

/* the refinements: a tiny label, the value, and a hairline between each. They
   take a soft blush pill only on hover, or once they are actually set. */
.filt__ctl{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.filt__ctl > *{ position:relative; }
.filt__ctl > * + *::after{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:15px; background:var(--hair);
}
.dd,.bud{
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px;
  border:0; border-radius:100px; background:transparent;
  transition:background .28s var(--e);
}
.dd:hover,.bud:hover,.dd:focus-within,.bud:focus-within,
.dd.is-set,.bud.is-set{ background:var(--blush); }
.dd__l{
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mute-2); white-space:nowrap; transition:color .28s var(--e);
}
.is-set .dd__l{ color:var(--rose); }
.dd select{
  appearance:none; border:0; background:none; padding:0 15px 0 0; font-size:13px;
  color:var(--ink); cursor:pointer; max-width:136px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 6px) 55%, calc(100% - 2px) 55%;
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat;
}
.dd select:focus{ outline:none; }

/* fixed width: the row is centred, so a value that grows while you drag would
   shift every other control sideways */
.bud{ width:228px; gap:9px; }
.bud b{
  flex:none; min-width:62px; font-weight:500; font-size:12px; color:var(--rose);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.bud input[type=range]{
  --p:100%;
  -webkit-appearance:none; appearance:none; flex:1; min-width:0; height:3px; margin:0;
  border-radius:2px; cursor:pointer;
  background:linear-gradient(90deg,var(--rose) var(--p),var(--blush-3) var(--p));
}
.bud input[type=range]::-webkit-slider-runnable-track{ height:3px; background:transparent; }
.bud input[type=range]::-moz-range-track{ height:3px; background:transparent; }
.bud input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-5.5px; border-radius:50%;
  background:var(--white); border:2px solid var(--rose); box-shadow:0 2px 8px rgba(59,42,49,.25);
  transition:transform .2s var(--e);
}
.bud input[type=range]::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; background:var(--white); border:2px solid var(--rose);
  box-shadow:0 2px 8px rgba(59,42,49,.25);
}
.bud input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.18); }

/* fixed width: the Clear chip appears and disappears, and without a reserved
   slot the whole centred row reflows and the bar changes height */
.filt__end{ display:flex; align-items:center; justify-content:center; gap:10px;
  width:148px; height:34px; padding:0 12px; }
.filt__count{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute-2); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.clr{
  height:26px; padding:0 11px; border-radius:100px; font-size:10.5px; font-weight:500;
  letter-spacing:.08em; color:var(--rose); background:var(--blush); border:0;
  transition:background .25s var(--e), color .25s var(--e);
}
.clr:hover{ background:var(--rose); color:#fff; }
.filt:not(.is-active) .clr{ display:none; }

/* ── shop-by-moment circular tiles ── */
.cats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(14px,3vw,44px);
  margin-bottom:clamp(30px,4vw,54px);
}
.cat{ display:flex; flex-direction:column; align-items:center; gap:13px; cursor:pointer; }
/* a hairline ring floats 6px off the photo and turns rose on hover */
.cat__ring{
  display:block; width:clamp(92px,11vw,148px); aspect-ratio:1; border-radius:50%;
  overflow:hidden; background:var(--blush-2); box-shadow:var(--shadow);
  outline:1px solid var(--hair); outline-offset:6px;
  transition:transform .4s var(--e), box-shadow .4s var(--e), outline-color .4s var(--e);
}
.cat__ring img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--e); }
.cat:hover .cat__ring, .cat:focus-visible .cat__ring{
  transform:translateY(-5px); box-shadow:0 22px 44px -20px rgba(90,50,64,.5); outline-color:var(--rose);
}
.cat:hover .cat__ring img{ transform:scale(1.08); }
.cat__l{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); font-weight:500; transition:color .3s var(--e); }
.cat:hover .cat__l{ color:var(--rose); }

/* ── grid: the photograph is the card. No white box, just imagery, then a name and
   a price. Every piece is the same size; the range reads as a set. ── */
/* minmax(0,1fr), not 1fr. A bare 1fr has an `auto` minimum, and a long name
   beside a price would push a phone column wider than the screen */
.grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(30px,3vw,48px) clamp(14px,1.6vw,24px);
}
.card{ display:flex; flex-direction:column; cursor:pointer; }
/* `clip`, not `hidden`. Hidden would make this the scroll container the
   scroll-driven drift below measures against */
.card__art{
  position:relative; overflow:clip; aspect-ratio:4/5; border-radius:22px; background:var(--blush-2);
  box-shadow:var(--shadow); transition:transform .45s var(--e), box-shadow .45s var(--e);
}
.card:hover .card__art{ transform:translateY(-4px); box-shadow:0 26px 48px -24px rgba(90,50,64,.45); }
.card__pic{ position:absolute; inset:0; display:block; overflow:clip; transition:transform 1.1s var(--e); }
.card:hover .card__pic{ transform:scale(1.05); }
/* the photo is taller and wider than its frame so it can drift as you scroll */
.card__pic img{
  width:106%; height:112%; margin:-6% 0 0 -3%; object-fit:cover;
  transition:filter .6s var(--e);
}
.card__pic img.blur{ filter:blur(14px); }
/* scroll-driven parallax. Every photo slides a few percent as it crosses the
   viewport. Pure CSS, no scroll listener; browsers without it get a still image */
@supports (animation-timeline: view()){
  .card__pic img{ animation:drift linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  @keyframes drift{ from{ transform:translateY(-3.5%) } to{ transform:translateY(3.5%) } }
}
.card__tag{
  position:absolute; top:14px; left:14px; z-index:2; border-radius:100px;
  background:rgba(255,255,255,.84); backdrop-filter:blur(10px); color:var(--rose);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; padding:.6em 1em;
}
/* quick view: a glass pill that rises into the photo on hover */
.card__view{
  position:absolute; left:50%; bottom:16px; z-index:2; transform:translate(-50%,10px);
  font-family:inherit;
  padding:.8em 1.3em; border-radius:100px; background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
  color:var(--ink); font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(59,42,49,.4);
  opacity:0; transition:opacity .35s var(--e), transform .35s var(--e);
}
.card:hover .card__view, .card:focus-within .card__view{ opacity:1; transform:translate(-50%,0); }
.card__meta{ display:flex; flex-direction:column; flex:1; padding:14px 4px 0; }
/* No wrapping. It used to wrap, which meant a long name pushed the price onto
   a line of its own, where space-between then put it on the left: the price sat
   in a different place depending on how long the name happened to be. The name
   now wraps inside its own column and the price holds the top right on every
   card, which lines them all up across a row. */
.card__row{
  display:flex; flex-wrap:nowrap; align-items:baseline;
  justify-content:space-between; gap:2px 12px;
}
.card__name{
  font-family:var(--disp); font-weight:400; letter-spacing:.004em;
  font-size:clamp(1.08rem,1.3vw,1.3rem); line-height:1.2;
  min-width:0;                      /* so a long name wraps instead of shoving */
}
.card__price{
  flex:none;                        /* never squeezed, never dropped */
  font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink);
  font-weight:500; white-space:nowrap;
}
/* spec on the left, Order on the right, so the button costs almost no height */
/* margin-top:auto drops this to the foot of the card, and grid rows stretch
   every card to the tallest, so the buttons line up across the row */
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:9px; }
.card__spec{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); min-width:0; }
.card__order{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:.72em 1.1em; border-radius:100px;
  background:var(--white); border:1px solid var(--rose-soft); color:var(--rose);
  font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 6px 14px -10px rgba(90,50,64,.5);
  transition:background .25s var(--e), color .25s var(--e),
             border-color .25s var(--e), transform .25s var(--e), box-shadow .25s var(--e);
}
.card__order .ic{ font-size:1.3em; transition:transform .3s var(--e); }
.card__order:hover{
  background:var(--rose); border-color:var(--rose); color:#fff;
  transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(200,16,46,.6);
}
.card__order:hover .ic{ transform:translateX(3px); }

.none{ text-align:center; padding:clamp(48px,7vw,88px) 16px; }
.none h3{
  font-family:var(--disp); font-weight:400; letter-spacing:.006em;
  font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:.35em;
}
.none p{ color:var(--mute); margin-bottom:1.7em; }

/* ═══════════ REVIEWS ═══════════ */
/* one review set large before the rails, an editorial pull quote */
.rev__lead{ position:relative; z-index:1; max-width:720px; margin:0 auto clamp(40px,4.8vw,68px); text-align:center; }
.rev__q{
  font-family:var(--disp); font-weight:400; font-size:clamp(1.28rem,2.35vw,2.05rem);
  line-height:1.34; letter-spacing:.002em; text-wrap:balance; color:var(--ink);
}
.rev__by{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px;
  font-size:12px; letter-spacing:.08em; color:var(--mute);
}
.rev__by cite{ font-style:normal; }
.rev__by .stars i{ width:11px; height:11px; transform:none; animation:none; }

.rev__rail{ position:relative; z-index:1; display:flex; gap:14px; width:max-content; animation:mq 68s linear infinite; }
.rev__rail--b{ animation-duration:82s; animation-direction:reverse; margin-top:14px; }
/* pause the rail you are actually over. This was scoped to the whole section,
   which after the merge meant hovering anywhere in a 2100px block stopped them. */
.rev__rail:hover{ animation-play-state:paused; }
/* a phone has no hover, so tapping a quote holds both rails until you tap again */
.prom.is-held .rev__rail{ animation-play-state:paused; }
.quote{ cursor:pointer; }
.quote.is-read{ box-shadow:0 0 0 1px var(--rose-soft), 0 20px 40px -20px rgba(90,50,64,.5); }
.quote{
  flex:0 0 clamp(258px,25vw,352px); border-radius:20px; padding:clamp(20px,2.2vw,28px);
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow);
  background:rgba(255,255,255,.76); backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.85);
}
.quote__st{ display:flex; gap:3px; }
.quote__st i{
  width:9px; height:9px; background:var(--rose);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.quote p{ font-family:var(--disp); font-weight:400; font-size:clamp(1.16rem,1.6vw,1.38rem); line-height:1.48; margin:0; }
.quote footer{ margin-top:auto; padding-top:8px; border-top:1px solid var(--hair-soft); font-size:12px; color:var(--mute); }
.quote footer b{ color:var(--ink); font-weight:500; }

/* ═══════════ NEWSLETTER: the one dark band on a light site ═══════════ */
.news{
  position:relative; background:#1A0C11; color:#F7EFF1;
  padding-block:clamp(54px,6.6vw,92px); overflow:hidden; text-align:center;
}
.news__art{ position:absolute; inset:0; margin:0; }
/* a light grade so the reds stay deep once the scrim goes over them */
.news__art img{
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  filter:saturate(1.12) contrast(1.05);
}
/* deepest through the middle so the centred copy holds, easing off at the
   edges so the roses keep their colour */
.news__art::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 58% 62% at 50% 46%,
      rgba(20,9,13,.62) 0%, rgba(20,9,13,.44) 58%, rgba(20,9,13,.22) 100%),
    linear-gradient(180deg, rgba(20,9,13,.22) 0%, rgba(20,9,13,0) 28%,
      rgba(20,9,13,0) 72%, rgba(20,9,13,.22) 100%);
}
.news__in{ position:relative; z-index:2; max-width:660px; margin-inline:auto; }

.news__kick{
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-size:10.5px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rose-soft); margin:0 0 1.15em; text-shadow:0 1px 10px rgba(16,6,10,.7);
}
.news__kick::before,.news__kick::after{
  content:""; width:clamp(26px,5vw,52px); height:1px; background:var(--rose-soft); opacity:.5;
}
.news .h2{
  font-size:clamp(1.85rem,3.5vw,3.1rem); color:#FFFBFC;
  text-shadow:0 2px 22px rgba(16,6,10,.72), 0 1px 4px rgba(16,6,10,.5);
}
.news .say{ margin-inline:auto; color:rgba(255,251,252,.9); text-shadow:0 1px 12px rgba(16,6,10,.7); }

/* input and button share one capsule */
.news__form{
  display:flex; align-items:center; gap:8px; margin:clamp(22px,2.6vw,30px) auto 0;
  max-width:520px; background:rgba(20,9,13,.3); backdrop-filter:blur(10px);
  border:1px solid rgba(255,251,252,.4); border-radius:100px;
  padding:7px 7px 7px clamp(18px,2.4vw,26px);
  transition:border-color .3s var(--e), background .3s var(--e);
}
.news__form:focus-within{ border-color:var(--rose-soft); background:rgba(255,255,255,.12); }
.news__form input{
  flex:1; min-width:0; background:none; border:0; padding:.82em 0;
  color:#FBF5F6; font-size:14.5px;
}
.news__form input::placeholder{ color:rgba(251,245,246,.5); }
.news__form input:focus{ outline:none; }
.news__form input.err::placeholder{ color:var(--rose-soft); }
.news__go{
  flex:none; border-radius:100px; background:#FBF5F6; color:#1A0C11;
  padding:.92em clamp(1.3em,2.4vw,1.9em); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background .3s var(--e), color .3s var(--e);
}
.news__go:hover{ background:var(--rose); color:#fff; }
.news__msg{ font-size:12.5px; color:var(--rose-soft); margin-top:14px; min-height:1.3em; }

.news__perks{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:10px clamp(18px,3vw,40px); margin-top:clamp(18px,2.2vw,26px);
}
.news__perks li{
  display:flex; align-items:center; gap:9px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,251,252,.82); text-shadow:0 1px 10px rgba(16,6,10,.7);
}
/* drawn, not a glyph: no font dependency, nothing to mis-encode */
.news__perks li::before{
  content:""; width:5px; height:5px; flex:none;
  background:var(--rose-soft); transform:rotate(45deg);
}

/* ═══════════ FAQ: cards, not a bare list ═══════════ */
.faq{ background:var(--blush); padding-block:var(--sec); }
.faq__ask{ margin-top:26px; }
.faq__list{ display:flex; flex-direction:column; gap:12px; max-width:820px; margin-inline:auto; }
.qa{
  background:var(--white); border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
  transition:transform .3s var(--e), box-shadow .3s var(--e);
}
.qa:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -24px rgba(90,50,64,.42); }
.qa.open{ box-shadow:inset 3px 0 0 var(--rose), 0 20px 44px -24px rgba(90,50,64,.42); }
.qa__q{
  width:100%; display:flex; align-items:center; gap:18px; justify-content:space-between;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,26px); text-align:left;
  font-family:var(--disp); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(1.02rem,1.5vw,1.28rem); line-height:1.3; color:var(--ink);
  transition:color .25s var(--e);
}
.qa__q:hover{ color:var(--rose); }
.qa.open .qa__q{ color:var(--rose); }
.qa__q > span:not(.qa__i){ flex:1; }

/* the toggle is a real chip that fills rose when the answer is open */
.qa__i{
  position:relative; width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--blush); transition:background .3s var(--e), transform .4s var(--e);
}
.qa__i::before,.qa__i::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px; border-radius:2px;
  background:var(--rose); transform:translate(-50%,-50%); transition:transform .4s var(--e), background .3s var(--e);
}
.qa__i::after{ transform:translate(-50%,-50%) rotate(90deg); }
.qa.open .qa__i{ background:var(--rose); transform:rotate(180deg); }
.qa.open .qa__i::before,.qa.open .qa__i::after{ background:#fff; }
.qa.open .qa__i::after{ transform:translate(-50%,-50%) rotate(0); }

.qa__a{ overflow:hidden; height:0; transition:height .45s var(--e); }
.qa__p{
  padding:0 clamp(18px,2.2vw,26px) clamp(18px,2vw,24px);
  max-width:62ch; color:var(--mute); line-height:1.68; font-weight:300;
}
.qa__p em{ font-style:normal; color:var(--ink); font-weight:500; }
.qa__p ul{ margin:.7em 0 0; display:flex; flex-direction:column; gap:6px; }
.qa__p li{ position:relative; padding-left:18px; }
.qa__p li::before{
  content:""; position:absolute; left:2px; top:.62em; width:5px; height:5px;
  background:var(--rose); transform:rotate(45deg);
}



/* ═══════════ WHY THE FLORIST ═══════════ */
/* ═══════════ THE PROMISE ═══════════
   Why The Florist and the reviews were two stacked pink bands saying related
   things. They are one section now, over a real bouquet washed almost to the
   page colour, so the whole stretch reads as one moment. */
.prom{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--blush-2); padding-block:var(--sec);
}
/* overflow:hidden is load bearing. The image inside is scaled past the edges
   on purpose, and the wash that hides it is inset:0 on this figure, so without
   clipping the picture paints 8% beyond the wash on every side. That exposed a
   band of raw blurred photograph below the reviews on a phone. */
.prom__art{ position:absolute; inset:0; z-index:0; margin:0; overflow:hidden; }
/* blurred hard and scaled past the edges, so no detail survives and the blur
   never pulls transparency in from the sides */
.prom__art img{
  width:100%; height:100%; object-fit:cover;
  filter:blur(26px) saturate(.8); transform:scale(1.16);
}
/* washed right back: the photograph is texture, not a picture to look at */
.prom__art::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 28%, rgba(252,241,243,.9) 0%, rgba(247,227,232,.95) 58%, rgba(247,227,232,.985) 100%);
}
.prom__in{ position:relative; z-index:1; }

/* the hand-off between the promise and the proof */
.prom__div{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,26px);
  max-width:520px; margin:clamp(56px,7vw,104px) auto clamp(48px,6vw,84px);
  color:var(--rose);
}
.prom__div span{ flex:1; height:1px; background:var(--hair); }
.prom__div .ic{ width:26px; height:26px; flex:none; opacity:.75; }

.why{ background:var(--blush); padding-block:var(--sec); }
.why__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.whyc{
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.85);
  border-radius:20px; padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--shadow); transition:transform .4s var(--e), box-shadow .4s var(--e);
}
.whyc:hover{ transform:translateY(-4px); box-shadow:0 24px 46px -24px rgba(90,50,64,.44); }
.whyc__n{
  display:block; font-family:var(--disp); font-size:26px; line-height:1; color:var(--rose-soft);
  margin-bottom:16px;
}
.whyc h3{
  font-family:var(--disp); font-weight:400; letter-spacing:.004em;
  font-size:clamp(1.1rem,1.45vw,1.42rem); line-height:1.2; margin-bottom:.5em;
}
.whyc p{ font-size:13.5px; line-height:1.62; color:var(--mute); font-weight:300; }
.why__end{
  text-align:center; max-width:640px; margin:clamp(46px,5.4vw,78px) auto 0;
}
.why__end h3{
  font-family:var(--disp); font-weight:400; letter-spacing:.004em;
  font-size:clamp(1.6rem,2.8vw,2.35rem); line-height:1.14; margin-bottom:.5em;
}
.why__end p{ color:var(--mute); line-height:1.66; font-weight:300; }
.why__how{ color:var(--ink)!important; margin-top:1em; font-weight:400!important; }
.why__end .btn{ margin-top:26px; }

/* ═══════════ ABOUT ═══════════ */

/* the things a bouquet says. They were a bullet list, which buried the best
   copy on the page; as cards they read like the notes the shop writes out. */
.says{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(9px,1.1vw,14px);
  /* narrow enough that the five break 3 and 2 rather than leaving an orphan */
  max-width:790px; margin:0 auto clamp(46px,5.6vw,84px);
}
.says__c{
  padding:.8em 1.55em; border-radius:16px; background:var(--blush);
  border:1px solid transparent;
  font-family:var(--disp); font-weight:400; letter-spacing:.004em;
  font-size:clamp(1rem,1.35vw,1.24rem); line-height:1.3; color:var(--ink);
  transition:transform .35s var(--e), border-color .35s var(--e), box-shadow .35s var(--e);
}
.says__c:hover{
  transform:translateY(-3px); border-color:var(--rose-soft);
  box-shadow:0 14px 30px -18px rgba(90,50,64,.5);
}
/* the punchline takes a line of its own and the ink card */
.says__c--love{
  flex:1 0 100%; display:flex; flex-direction:column; align-items:center; gap:7px;
  margin-top:clamp(6px,.9vw,12px); padding:1.2em 1.5em;
  background:var(--ink); border-color:var(--ink);
}
.says__c--love:hover{ border-color:var(--ink); }
.says__c--love span{
  font-family:var(--ui); font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rose-soft);
}
.says__c--love b{
  font-weight:400; font-size:clamp(1.4rem,2.5vw,2.1rem); line-height:1.2; color:#F9F0F1;
}

.about__in{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,4.4vw,68px);
  align-items:center; max-width:1120px; margin-inline:auto;
}
.about__art{ position:relative; margin:0; }
.about__art img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:24px;
  box-shadow:0 30px 62px -30px rgba(90,50,64,.55);
}
/* a small card lapped over the corner, the way the shop tags a delivery */
.about__art figcaption{
  position:absolute; left:-14px; bottom:26px;
  padding:.72em 1.2em; border-radius:100px; background:var(--white);
  box-shadow:0 16px 34px -16px rgba(90,50,64,.5);
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose); white-space:nowrap;
}
.about__txt p{ color:var(--mute); line-height:1.78; font-weight:300; margin-bottom:1.2em; }
.about__txt p:last-child{ margin-bottom:0; }
.about__txt b{ color:var(--ink); font-weight:500; }

.about__end{
  max-width:600px; margin:clamp(46px,5.6vw,80px) auto 0;
  padding-top:clamp(26px,3vw,38px); border-top:1px solid var(--hair-soft);
  text-align:center; font-family:var(--disp); font-weight:400; letter-spacing:.004em;
  font-size:clamp(1.4rem,2.4vw,2.05rem); line-height:1.25; color:var(--ink);
}

/* ═══════════ REFUND POLICY ═══════════ */
.pol__list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px); max-width:1080px; margin-inline:auto;
}
.polc{ background:var(--white); border-radius:20px; padding:clamp(22px,2.4vw,32px); box-shadow:var(--shadow); }
.polc h3{
  font-family:var(--disp); font-weight:400; letter-spacing:.004em;
  font-size:clamp(1.12rem,1.5vw,1.45rem); line-height:1.2; margin-bottom:.7em; color:var(--rose);
}
.polc p{ font-size:13.6px; line-height:1.7; color:var(--mute); font-weight:300; margin-bottom:.9em; }
.polc p:last-child{ margin-bottom:0; }
.polc em{ font-style:normal; color:var(--ink); font-weight:500; }
.polc ul{ margin:0 0 .9em; display:flex; flex-direction:column; gap:7px; }
.polc li{
  position:relative; padding-left:19px; font-size:13.6px; line-height:1.62;
  color:var(--mute); font-weight:300;
}
.polc li::before{
  content:""; position:absolute; left:2px; top:.62em; width:5px; height:5px;
  background:var(--rose); transform:rotate(45deg);
}

/* ═══════════ CONTACT ═══════════ */
.con{ background:var(--blush); padding-block:var(--sec); }
.con__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); }
.con__card{
  display:block; background:var(--white); border-radius:20px; padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--shadow); transition:transform .4s var(--e), box-shadow .4s var(--e);
}
.con__card:not(.con__card--flat):hover{ transform:translateY(-4px); box-shadow:0 24px 46px -24px rgba(90,50,64,.44); }
.con__i{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--blush-2); color:var(--rose); font-size:19px; margin-bottom:18px;
  transition:background .3s var(--e), color .3s var(--e);
}
.con__card:not(.con__card--flat):hover .con__i{ background:var(--rose); color:#fff; }
.con__card h3{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2);
  font-weight:500; margin-bottom:9px;
}
.con__card p{
  font-family:var(--disp); font-size:clamp(1.02rem,1.3vw,1.24rem); line-height:1.3;
  color:var(--ink); word-break:break-word;
}
.con__go{
  display:inline-block; margin-top:14px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rose);
}
.con__go--flat{ color:var(--mute-2); }

/* the bank accounts */
.pay{
  margin-top:clamp(30px,3.6vw,52px); background:var(--white); border-radius:24px;
  padding:clamp(26px,3.2vw,44px); box-shadow:var(--shadow);
}
.pay__head{ text-align:center; max-width:640px; margin:0 auto clamp(24px,2.8vw,36px); }
.pay__head h3{
  font-family:var(--disp); font-weight:400; letter-spacing:.004em;
  font-size:clamp(1.35rem,2.2vw,1.9rem); margin-bottom:.5em;
}
.pay__head p{ font-size:13.5px; line-height:1.68; color:var(--mute); font-weight:300; }
/* a row of names rather than a grid of account cards */
.pay__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.payc{
  background:var(--blush); border:1px solid var(--hair-soft); border-radius:100px;
  padding:14px 28px; font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
.payc__b{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--rose); font-weight:500; }
.payc h4{
  font-family:var(--disp); font-weight:400; font-size:1.06rem; line-height:1.25;
  margin:8px 0 14px; color:var(--ink);
}
.payc dl{ display:flex; flex-direction:column; gap:9px; margin:0; }
.payc dt{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2); }
.payc dd{ margin:2px 0 0; font-size:13px; color:var(--ink); line-height:1.4; }
.payc__n{ font-variant-numeric:tabular-nums; font-weight:500; letter-spacing:.02em; }

/* ═══════════ FOOTER ═══════════ */
.foot{ background:var(--white); color:var(--ink); padding-block:clamp(52px,6vw,88px) 0; border-top:1px solid var(--hair-soft); overflow:clip; }
/* the name, edge to edge, the bottom of the letters running off the page */
.foot__word{
  display:flex; justify-content:space-between; align-items:flex-end;
  max-width:var(--wrap); margin:clamp(22px,3.4vw,48px) auto -.13em; padding-inline:var(--pad);
  font-family:var(--disp); font-weight:400; font-size:clamp(3.6rem,14.6vw,14rem); line-height:.92;
  color:var(--blush-3); user-select:none;
}
.foot__word span{ display:block; }
.foot__gap{ width:.3em; }
.foot__top{ display:grid; grid-template-columns:1.9fr 1fr 1fr 1fr; gap:clamp(26px,3.4vw,52px); }
.foot__logo{ width:min(248px,66vw); margin-bottom:18px; }
.foot__brand p{ font-size:13px; color:var(--mute); max-width:32ch; line-height:1.66; font-weight:300; }
.foot__soc{ display:flex; gap:8px; margin-top:20px; }
.foot__soc a{
  width:40px; height:40px; border-radius:50%; background:var(--blush-2); display:grid; place-items:center;
  font-size:16px; color:var(--ink);
  transition:background .28s var(--e), border-color .28s var(--e), color .28s var(--e);
}
.foot__soc a:hover{ background:var(--rose); border-color:var(--rose); color:#fff; }
.foot__col h3{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--rose); font-weight:500; margin-bottom:14px; }
.foot__col a{ display:block; font-size:13.5px; color:var(--mute); padding:4px 0; font-weight:300; transition:color .25s; }
.foot__col a:hover{ color:var(--rose); }
.foot__hrs{ display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--mute); padding:4px 0; font-weight:300; }
.foot__tel{ margin-top:12px; color:var(--ink); font-size:15px; font-variant-numeric:tabular-nums; }
.foot__base{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:clamp(40px,5vw,66px); padding-top:20px; border-top:1px solid var(--hair-soft);
  font-size:11.5px; color:var(--mute);
}

/* ═══════════ QUICK VIEW ═══════════ */
.qv{ position:fixed; inset:0; z-index:900; display:grid; place-items:center; padding:clamp(12px,3vw,40px); }
.qv[hidden]{ display:none; }
.qv__scrim{ position:absolute; inset:0; background:rgba(59,42,49,.55); backdrop-filter:blur(5px); opacity:0; transition:opacity .35s var(--e); }
.qv.on .qv__scrim{ opacity:1; }
.qv__box{
  position:relative; z-index:2; width:min(980px,100%); max-height:88svh; overflow:hidden;
  background:var(--white); border-radius:var(--r); display:grid;
  /* a touch more room for the photograph than the .85fr it had, which helps
     the crop as much as capping the height does */
  grid-template-columns:.95fr 1.05fr;
  opacity:0; transform:translateY(14px); transition:opacity .4s var(--e), transform .4s var(--e);
}
.qv.on .qv__box{ opacity:1; transform:none; }
.qv__x{
  position:absolute; top:12px; right:12px; z-index:3; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--white); color:var(--ink); font-size:17px; box-shadow:var(--shadow); transition:background .25s, color .25s;
}
.qv__x:hover{ background:var(--rose); color:#fff; }
.qv__art{ background:var(--blush-2); }
.qv__art img{ width:100%; height:100%; object-fit:cover; min-height:300px; }
.qv__body{
  padding:clamp(22px,3vw,42px); display:flex; flex-direction:column;
  /* The text scrolls, not the panel. This is what keeps the row from growing
     past the panel and stretching the photograph next to it. */
  max-height:88svh; overflow-y:auto;
}
.qv__name{
  font-family:var(--disp); font-weight:400; letter-spacing:.006em;
  font-size:clamp(1.55rem,2.6vw,2.1rem); line-height:1.14; margin-bottom:.22em;
}
.qv__price{ font-size:1.05rem; font-variant-numeric:tabular-nums; color:var(--rose); font-weight:500; margin-bottom:1.2em; }
.qv__desc{ color:var(--mute); line-height:1.66; margin-bottom:1.5em; font-weight:300; }
.qv__care{
  font-size:12.5px; line-height:1.6; color:var(--mute); font-weight:300;
  background:var(--blush); border-radius:12px; padding:12px 14px; margin-bottom:1.5em;
}
.qv__care b{ color:var(--ink); font-weight:500; }
.qv__care[hidden]{ display:none; }
/* rose colour + wrap pickers, shown only for rose bouquets */
.qv__opts{ display:flex; flex-direction:column; gap:16px; margin-bottom:1.6em; }
.qv__opts[hidden]{ display:none; }
.qvOpt__l{
  display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); margin-bottom:9px;
}
.qvOpt__set{ display:flex; flex-wrap:wrap; gap:7px; }

/* The colour choices are a dropdown rather than a row of swatches. Thirteen of
   them twice over was most of the balloon's panel. A native select was chosen
   over a custom popup deliberately: on a phone it opens the system picker,
   which beats scrolling a list inside a panel that is already scrolling. */
.qvSel{ position:relative; display:flex; align-items:center; gap:10px; }
.qvSel__dot{
  position:absolute; left:13px; width:15px; height:15px; border-radius:50%;
  flex:none; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(59,42,49,.22);
}
.qvSel select{
  width:100%; background:var(--blush); border:1px solid transparent; border-radius:12px;
  padding:.72em .95em .72em 38px; font-size:13.5px; color:var(--ink);
  font-family:inherit; appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),
                   linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  transition:border-color .25s var(--e), background-color .25s var(--e);
}
/* the paper is named, not shown, so its box starts where the text does */
.qvSel--plain select{ padding-left:.95em; }
.qvSel select:focus{ outline:none; border-color:var(--rose); background-color:var(--white); }
.sw{
  display:inline-flex; align-items:center; gap:7px;
  padding:.42em .8em .42em .5em; border:1px solid var(--hair); border-radius:100px;
  background:var(--white); font-size:12px; color:var(--ink);
  transition:border-color .25s var(--e), background .25s var(--e), color .25s var(--e);
}
.sw i{
  width:15px; height:15px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px rgba(59,42,49,.22);
}
.sw:hover{ border-color:var(--mute-2); }
.sw.on{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.sw.on i{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }

.qv__spec{ border-top:1px solid var(--hair); margin-bottom:1.8em; }
.qv__spec li{ padding:9px 0; border-bottom:1px solid var(--hair-soft); font-size:13px; color:var(--mute); display:flex; gap:10px; align-items:center; }
.qv__spec li::before{ content:""; width:3px; height:3px; background:var(--rose); flex:none; }
.qv__act{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.qv__fine{ font-size:11px; color:var(--mute); margin-top:14px; }



/* ═══════════ CONTENT PANELS (About us, Refund policy) ═══════════
   Both open from the nav rather than sitting in the scroll. Same shell as the
   order form, so the site has one overlay language rather than three. */
.pnl{ position:fixed; inset:0; z-index:940; display:grid; place-items:start center; padding:clamp(10px,3vw,38px) clamp(10px,3vw,38px) 0; overflow:auto; }
.pnl[hidden]{ display:none; }
.pnl__scrim{ position:fixed; inset:0; background:rgba(28,14,19,.6); backdrop-filter:blur(6px); opacity:0; transition:opacity .35s var(--e); }
.pnl.on .pnl__scrim{ opacity:1; }
.pnl__box{
  position:relative; z-index:2; width:min(1080px,100%); margin-bottom:clamp(10px,3vw,38px);
  background:var(--white); border-radius:26px;
  opacity:0; transform:translateY(16px); transition:opacity .4s var(--e), transform .4s var(--e);
}
.pnl.on .pnl__box{ opacity:1; transform:none; }
.pnl__x{
  position:absolute; top:14px; right:14px; z-index:3; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; background:var(--blush); color:var(--ink); font-size:17px;
  transition:background .25s, color .25s;
}
.pnl__x:hover{ background:var(--rose); color:#fff; }
.pnl__in{ padding:clamp(34px,4.4vw,64px) clamp(20px,3.4vw,56px) clamp(30px,4vw,56px); }
/* the policy panel keeps its two columns, the cards just sit on white now */
.pnl .polc{ background:var(--blush); }

/* ═══════════ ORDER FORM ═══════════ */
.ord{ position:fixed; inset:0; z-index:950; display:grid; place-items:start center; padding:clamp(10px,3vw,38px) clamp(10px,3vw,38px) 0; overflow:auto; }
.ord[hidden]{ display:none; }
.ord__scrim{ position:fixed; inset:0; background:rgba(28,14,19,.6); backdrop-filter:blur(6px); opacity:0; transition:opacity .35s var(--e); }
.ord.on .ord__scrim{ opacity:1; }
.ord__box{
  position:relative; z-index:2; width:min(760px,100%); margin-bottom:clamp(10px,3vw,38px);
  background:var(--white); border-radius:26px; overflow:hidden;
  opacity:0; transform:translateY(16px); transition:opacity .4s var(--e), transform .4s var(--e);
}
.ord.on .ord__box{ opacity:1; transform:none; }
.ord__x{
  position:absolute; top:14px; right:14px; z-index:3; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; background:var(--blush); color:var(--ink); font-size:17px;
  transition:background .25s, color .25s;
}
.ord__x:hover{ background:var(--rose); color:#fff; }

.ord__head{ text-align:center; padding:clamp(30px,4vw,44px) clamp(22px,3.4vw,44px) 0; }
.ord__t{
  font-family:var(--disp); font-weight:400; letter-spacing:.004em;
  font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.1; margin-bottom:.42em;
}
.ord__sub{ font-size:13.5px; line-height:1.6; color:var(--mute); font-weight:300; max-width:44ch; margin-inline:auto; }
.ord__form{ padding:clamp(22px,3vw,34px) clamp(18px,3.4vw,44px) clamp(26px,3.4vw,40px); }

/* the piece being ordered, carried in from Quick View */
.ord__item{
  display:flex; gap:16px; align-items:center; background:var(--blush); border-radius:18px;
  padding:14px; margin-bottom:clamp(20px,2.4vw,28px);
}
.ord__item[hidden]{ display:none; }
.ord__item img{ width:76px; height:92px; object-fit:cover; border-radius:12px; flex:none; }
.ord__itemK{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); font-weight:500; }
.ord__item h3{ font-family:var(--disp); font-weight:400; font-size:1.24rem; line-height:1.2; margin:5px 0 4px; }
.ord__itemP{ font-size:13px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.ord__picks{ font-size:11.5px; color:var(--mute); margin-top:5px; }
.ord__any h3{ margin-top:4px; }
.ord__any p{ font-size:12.5px; color:var(--mute); font-weight:300; line-height:1.55; }

/* min-width:0 matters: a fieldset defaults to min-width:min-content, so the
   21 day chips would stretch it past the modal and clip everything right */
/* one step at a time */
.ordf[hidden]{ display:none; }
.wiz{ margin:0 0 clamp(22px,2.6vw,30px); }
.wiz__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; margin-bottom:10px;
}
.wiz__n{
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute-2); font-weight:500;
}
.wiz__t{ font-family:var(--disp); font-size:15px; color:var(--ink); }
.wiz__rail{ height:2px; border-radius:2px; background:var(--blush-3); overflow:hidden; }
.wiz__rail i{
  display:block; height:100%; width:20%; border-radius:2px;
  background:var(--rose); transition:width .45s var(--e);
}
.ord__nav{ display:flex; align-items:center; gap:10px; }
.btn--back{ flex:none; }
/* the same arrow, pointing the other way */
.btn--back .ic{ transform:scaleX(-1); }
.btn--back:hover .ic{ transform:scaleX(-1) translateX(3px); }

.ordf{ border:0; margin:0 0 clamp(22px,2.6vw,32px); padding:0; min-width:0; }
.ordf legend{
  display:flex; align-items:center; gap:11px; padding:0; margin-bottom:14px;
  font-family:var(--disp); font-weight:400; font-size:clamp(1.15rem,1.7vw,1.4rem); color:var(--ink);
}
.ordf__n{
  display:grid; place-items:center; width:25px; height:25px; border-radius:50%; flex:none;
  background:var(--rose); color:#fff; font-family:var(--ui); font-size:11px; font-weight:500;
}
.ordf__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.ordf__grid--top{ margin-top:14px; }
.ordf__l{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2); font-weight:500; margin:18px 0 9px; }
.ordf__hint{ font-size:13px; line-height:1.6; color:var(--mute); font-weight:300; margin-bottom:12px; }

.fld{ display:block; }
.fld--wide{ grid-column:1 / -1; }
.fld > span{
  display:block; font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mute-2); margin-bottom:6px;
}
/* Everything on a step is required unless it says otherwise here. Marking the
   two that are optional is shorter than marking the nine that are not, and it
   is the question people actually have looking at a form. */
.fld__opt{
  font-style:normal; color:var(--rose-soft); letter-spacing:.1em; margin-left:5px;
}
.fld input, .fld textarea{
  width:100%; background:var(--blush); border:1px solid transparent; border-radius:12px;
  padding:.82em .95em; font-size:14px; color:var(--ink); resize:vertical;
  transition:border-color .25s var(--e), background .25s var(--e);
}
.fld input::placeholder, .fld textarea::placeholder{ color:var(--mute-2); }
.fld input:focus, .fld textarea:focus{ outline:none; border-color:var(--rose); background:var(--white); }

/* delivery or pickup */
.pick{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pick__b{
  text-align:left; padding:15px 16px; border-radius:16px; background:var(--blush);
  border:1px solid transparent; transition:background .28s var(--e), border-color .28s var(--e);
}
.pick__b b{ display:block; font-size:14px; font-weight:500; color:var(--ink); }
.pick__b span{ display:block; font-size:11.5px; color:var(--mute); margin-top:3px; font-weight:300; }
.pick__b:hover{ border-color:var(--rose-soft); }
.pick__b.is-on{ background:var(--ink); border-color:var(--ink); }
.pick__b.is-on b{ color:var(--white); }
.pick__b.is-on span{ color:var(--rose-soft); }

.ord__note{
  display:flex; gap:11px; align-items:flex-start; background:var(--blush); border-radius:14px;
  padding:14px 15px; font-size:12.5px; line-height:1.6; color:var(--mute); font-weight:300;
}
.ord__note .ic{ color:var(--rose); font-size:17px; margin-top:1px; }
.ord__note b{ color:var(--ink); font-weight:500; }

/* the booking calendar */
.days{
  display:flex; gap:8px; max-width:100%; overflow-x:auto; scrollbar-width:none;
  padding-bottom:4px; scroll-snap-type:x proximity;
}
.days::-webkit-scrollbar{ display:none; }
.day{
  flex:none; width:64px; padding:10px 0 11px; border-radius:14px; background:var(--blush);
  border:1px solid transparent; text-align:center; scroll-snap-align:center;
  transition:background .25s var(--e), border-color .25s var(--e), transform .25s var(--e);
}
.day:hover:not(.is-off){ border-color:var(--rose-soft); transform:translateY(-2px); }
.day__d{ display:block; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--mute-2); }
.day__n{ display:block; font-family:var(--disp); font-size:20px; line-height:1.2; color:var(--ink); }
.day__m{ display:block; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--mute-2); }
.day.is-on{ background:var(--ink); border-color:var(--ink); }
.day.is-on .day__d,.day.is-on .day__m{ color:var(--rose-soft); }
.day.is-on .day__n{ color:var(--white); }
.day.is-off{ opacity:.34; cursor:not-allowed; }

.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:8px; }
.slot{
  padding:11px 10px; border-radius:14px; background:var(--blush); border:1px solid transparent;
  text-align:center; transition:background .25s var(--e), border-color .25s var(--e), transform .25s var(--e);
}
.slot:hover:not(.is-off){ border-color:var(--rose-soft); transform:translateY(-2px); }
.slot b{ display:block; font-size:13.5px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.slot span{ display:block; font-size:10px; color:var(--mute-2); margin-top:2px; font-variant-numeric:tabular-nums; }
.slot.is-on{ background:var(--rose); border-color:var(--rose); }
.slot.is-on b{ color:#fff; }
.slot.is-on span{ color:rgba(255,255,255,.78); }
.slot.is-off{ opacity:.3; cursor:not-allowed; }

.ord__count{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-2); margin-top:9px; }
.ord__count.is-over{ color:var(--rose); }

.ord__foot{ border-top:1px solid var(--hair-soft); padding-top:clamp(20px,2.4vw,28px); text-align:center; }
.ord__err{ font-size:13px; color:var(--rose); margin-bottom:12px; min-height:0; }
.ord__err:empty{ display:none; }
.ord__fine{ font-size:11.5px; line-height:1.55; color:var(--mute-2); margin-top:14px; }


/* the account the customer chooses to pay into */
.banks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.bank{
  text-align:left; padding:14px 15px; border-radius:16px; background:var(--blush);
  border:1px solid transparent; transition:background .28s var(--e), border-color .28s var(--e);
}
.bank:hover{ border-color:var(--rose-soft); }
.bank b{
  display:block; font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--rose);
}
.bank span{ display:block; font-size:13.5px; color:var(--ink); margin-top:5px; line-height:1.3; }
.bank__t{ font-size:11.5px!important; color:var(--mute)!important; margin-top:3px!important; }
.bank.is-on{ background:var(--ink); border-color:var(--ink); }
.bank.is-on b{ color:var(--rose-soft); }
.bank.is-on span{ color:var(--white); }
.bank.is-on .bank__t{ color:rgba(255,255,255,.66)!important; }

/* the receipt, shown in place of the form once the order is away */
.done{ padding:clamp(34px,4.4vw,56px) clamp(20px,3.4vw,44px) clamp(30px,4vw,48px); text-align:center; }
.done[hidden]{ display:none; }
.done__i{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  margin:0 auto 22px; background:var(--rose); color:#fff; font-size:24px;
}
.done__t{
  font-family:var(--disp); font-weight:400; letter-spacing:.004em;
  font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.12; margin-bottom:.4em;
}
.done__ref{ font-size:13px; color:var(--mute); margin-bottom:1.4em; }
.done__ref b{
  display:inline-block; margin-left:6px; padding:.4em .8em; border-radius:8px;
  background:var(--blush); color:var(--ink); font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:.08em;
}
.done__say{
  font-size:14px; line-height:1.66; color:var(--mute); font-weight:300;
  max-width:46ch; margin:0 auto clamp(24px,3vw,34px);
}
.done__say b{ color:var(--ink); font-weight:500; }
.done__bank{
  max-width:420px; margin:0 auto; padding:22px 20px; border-radius:18px;
  background:var(--blush); text-align:left;
}
.done__bk{ font-size:9.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--rose); }
.done__bank h4{
  font-family:var(--disp); font-weight:400; font-size:1.15rem; line-height:1.25;
  margin:7px 0 14px; color:var(--ink);
}
.done__bank dl{ display:flex; flex-direction:column; gap:10px; margin:0; }
.done__bank dt{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2); }
.done__bank dd{ margin:3px 0 0; font-size:13.5px; color:var(--ink); line-height:1.4; }
.done__fine{
  font-size:11.5px; line-height:1.6; color:var(--mute-2);
  max-width:42ch; margin:clamp(20px,2.4vw,28px) auto clamp(18px,2.2vw,24px);
}

/* ═══════════ REVEAL ═══════════ */
.js .reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .6s var(--e), transform .6s var(--e); }
.reveal[data-d="1"].in{ transition-delay:.06s } .reveal[data-d="2"].in{ transition-delay:.12s }
.reveal[data-d="3"].in{ transition-delay:.18s } .reveal[data-d="4"].in{ transition-delay:.24s }

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width:1220px){
  .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .why__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .con__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pay__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot__top{ grid-template-columns:1.6fr 1fr 1fr; }
  .foot__col:last-child{ grid-column:2 / -1; }
}

@media (max-width:1150px){
  .shop__in{ grid-template-columns:1fr; gap:22px; }
  .shop__side{ border-left:0; border-top:1px solid var(--hair-soft); padding:20px 0 0; }
  .shop__occ{ flex-direction:row; flex-wrap:wrap; gap:6px 18px; }
  .shop__occ button{ width:auto; }
}

@media (max-width:1000px){
  .nav__links{ display:none; }
  .burger{ display:block; }

  /* The Order pill goes on a phone. It only scrolls to the collection, which
     the wordmark, the hero chip and the menu's own Start an order all do too,
     and a fourth control on a 375px bar left no room for the wordmark to sit
     where it belongs. */
  .nav__order{ display:none; }

  /* minmax(0,1fr), not 1fr: a bare fr refuses to shrink below its own content,
     so the basket and the menu on the right were widening that column and
     pushing the wordmark off centre. With both outer columns forced equal the
     wordmark sits in the true middle of the bar. */
  .nav{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; }
  .nav__end{ justify-content:flex-end; }
  /* her mobile artwork sits the bouquet low, so the wordmark rides above it */
  /* the phone artwork is a purpose-made 0.563 portrait, so give it a taller
     frame and only a few percent gets cropped */
  .hero{ justify-content:flex-start; min-height:max(76svh,600px); }
  .hero__stage{ padding-top:clamp(96px,12vh,124px); }
  .hero__art{ animation:none; }
  .live{ position:static; margin:16px auto 0; }
  .hero__in{ margin-top:auto; padding-bottom:12px; }
  .proof{ position:static; width:auto; margin:0 var(--pad) clamp(22px,4vh,34px); padding:10px 14px; }
  .proof__top{ justify-content:center; }
  .proof__q,.proof__who{ display:none; }
  /* stacked: the picture is above the text rather than beside it, so nothing
     stretches anything and the panel scrolls as one piece again */
  .qv__box{ grid-template-columns:1fr; max-height:90svh; overflow:auto; }
  .qv__body{ max-height:none; overflow-y:visible; }
  .qv__art img{ min-height:0; aspect-ratio:4/3; }
}

@media (max-width:1000px){
  .filt__panel{ width:100%; }
  .about__in{ grid-template-columns:1fr; gap:28px; }
  .about__art{ max-width:520px; margin-inline:auto; }
  .pol__list{ grid-template-columns:1fr; }
  .filt__ctl{ row-gap:2px; }
}

@media (max-width:760px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }
  /* two across rather than a four card column: the copy is short enough to
     take the narrower measure and it halves the scroll */
  .why__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .whyc{ padding:16px 15px 18px; }
  .whyc__n{ font-size:21px; margin-bottom:11px; }
  .whyc h3{ font-size:1.02rem; line-height:1.22; margin-bottom:.45em; }
  .whyc p{ font-size:12.5px; line-height:1.55; }
  /* two across rather than a four card column, same as the Why cards */
  .con__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .con__card{ padding:16px 15px 18px; }
  .con__i{ width:36px; height:36px; font-size:16px; margin-bottom:13px; }
  .con__card h3{ font-size:9px; margin-bottom:7px; }
  .con__card p{ font-size:.95rem; line-height:1.35; }
  .con__go{ margin-top:11px; font-size:9px; letter-spacing:.12em; }
  /* the account cards sit right under the contact cards and had the same
     four-deep column problem */
  .pay__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .pay{ padding:20px 14px; }
  .payc{ padding:15px 13px; }
  .payc h4{ font-size:.98rem; margin:6px 0 11px; }
  .payc dl{ gap:7px; }
  .payc dd{ font-size:12px; }
  .ordf__grid{ grid-template-columns:1fr; }
  .pick{ grid-template-columns:1fr; }
  .banks{ grid-template-columns:1fr; }
  .slots{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }
  .ord__box{ border-radius:20px; }
  .ord__item img{ width:64px; height:78px; }
  .shop__p{ display:none!important; }
  .card__art{ border-radius:18px; }
  .card__meta{ padding-top:11px; }
  /* half-width cards cannot hold the spec and the button on one line, so
     the button drops under it and gets a proper tap target */
  /* keep margin-top:auto from the base rule or the buttons stop levelling */
  .card__foot{ flex-direction:column; align-items:stretch; gap:9px; padding-top:10px; }
  .card__order{ justify-content:center; padding:.72em; min-height:42px; }
  .rev__by{ flex-direction:column; gap:10px; }
  .cats{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:8px; scrollbar-width:none; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); }
  .cats::-webkit-scrollbar{ display:none; }
  .cat{ flex:none; }
  .filt__panel{ width:100%; border-radius:18px; padding:8px 8px 10px; gap:7px; }
  .seg{ width:100%; }
  /* a wrapped row would put a hairline at the start of a line */
  .filt__ctl{ gap:5px; }
  .filt__ctl > * + *::after{ display:none; }
  /* DOM order is Form, Occasion, Budget, Sort, so `order` pulls the three
     dropdowns onto one line and drops Budget and the count beneath them */
  .dd{
    order:1; flex:1 1 calc(33.333% - 4px); min-width:0;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1px; height:46px; padding:0 9px; background:var(--blush);
  }
  .dd select{ max-width:100%; width:100%; text-overflow:ellipsis; overflow:hidden; }
  .bud{ order:2; flex:1 1 100%; width:auto; height:38px; padding:0 12px; background:var(--blush); }
  .filt__end{ order:3; flex:1 1 100%; width:auto; justify-content:space-between; height:auto; padding:5px 6px 0; }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
  .foot__col:last-child{ grid-column:1 / -1; }
  .card__name{ font-size:1rem; }
  .news__form{ max-width:none; }
  .news__go{ padding-inline:1.2em; }
  /* on a phone the copy fills the width, so the dark holds wider */
  .news__art img{ object-position:50% 56%; }
  .news__art::after{
    background:radial-gradient(ellipse 128% 74% at 50% 48%,
      rgba(20,9,13,.6) 0%, rgba(20,9,13,.52) 48%,
      rgba(20,9,13,.4) 78%, rgba(20,9,13,.3) 100%);
  }

}

@media (max-width:420px){
  .foot__base{ flex-direction:column; gap:6px; }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .hero__word span{ transform:none; opacity:1; }
  .js .reveal{ opacity:1; transform:none; }
  .tick__track,.rev__rail{ animation:none; }
  .ring{ animation:none; }
  .hero__art img{ animation:none; }
  .card__pic img{ animation:none; transform:none; }
  .live__dot::after{ animation:none; }
  .stars i{ transform:none; animation:none; }
  .live,.proof{ opacity:1; animation:none; }
  .rev__rail{ width:auto; overflow-x:auto; }
}

@media print{ .nav,.menu,.qv,.tick,.filt{ display:none!important } body{ background:#fff } }


/* ═══════════════════════════════════════════════════════════════════════════
   STANDALONE DOCUMENT PAGES  (refunds, and anything like it later)

   A policy is a document, not a dialog. It gets a real URL so it can be linked
   and indexed, one reading column rather than a grid of equal cards, and an
   index down the side that tracks where you are. The old two-column panel made
   the reading order ambiguous: you could not tell whether to read down or
   across, and every section shouted equally loudly.
   ═══════════════════════════════════════════════════════════════════════════ */

.doc{ background:var(--blush); color:var(--ink); }

/* ── the slim header ──────────────────────────────────────────────────── */
.dnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px clamp(18px,4vw,44px);
  background:rgba(252,241,243,.985); backdrop-filter:blur(16px) saturate(1.35);
  border-bottom:1px solid var(--hair-soft);
}
.dnav__back{
  display:inline-flex; align-items:center; gap:10px;
  /* the vertical padding is here for thumbs, not for looks: the text alone is
     24px tall, well under a comfortable touch target */
  padding:10px 4px; margin-left:-4px;
  font-family:var(--disp); font-size:16px; color:var(--ink); text-decoration:none;
}
.dnav__back .ic{ font-size:15px; transform:scaleX(-1); transition:transform .3s var(--e); }
.dnav__back:hover .ic{ transform:scaleX(-1) translateX(3px); }
.dnav__cta{ padding:.85em 1.5em; font-size:10px; }

/* ── the page ─────────────────────────────────────────────────────────── */
.doc__wrap{ max-width:1120px; margin:0 auto; padding:clamp(44px,7vw,92px) clamp(18px,4vw,44px) 0; }

.doc__head{
  max-width:660px; margin:0 auto clamp(46px,6vw,76px); text-align:center;
}
.doc__t{
  font-family:var(--disp); font-weight:400; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(2.9rem,7vw,4.6rem); margin:.12em 0 .34em;
}
.doc__say{
  max-width:54ch; margin-inline:auto;
  font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.7; color:var(--mute); font-weight:300;
}
/* a short rule under the date rather than a full-width one, which would cut
   the centred header in half */
.doc__meta{
  display:inline-block; margin-top:26px; padding-top:18px;
  border-top:1px solid var(--hair);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2);
}

.doc__grid{ display:grid; grid-template-columns:212px minmax(0,1fr); gap:clamp(34px,6vw,86px); align-items:start; }

/* ── the index ────────────────────────────────────────────────────────── */
.doc__toc{ position:sticky; top:96px; }
.doc__tocT{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute-2); font-weight:500; margin-bottom:16px;
}
.doc__toc ol{ counter-reset:toc; display:flex; flex-direction:column; gap:2px; }
.doc__toc a{
  display:block; padding:7px 12px 7px 0; border-left:2px solid transparent;
  padding-left:14px; font-size:13px; line-height:1.4; color:var(--mute);
  text-decoration:none; transition:.2s var(--e);
}
.doc__toc a:hover{ color:var(--ink); border-left-color:var(--rose-soft); }
.doc__toc a.on{ color:var(--ink); border-left-color:var(--rose); font-weight:500; }

/* ── the sections ─────────────────────────────────────────────────────── */
.doc__body{ max-width:68ch; }

.pol{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2.6vw,32px);
  padding-bottom:clamp(38px,4.6vw,58px); margin-bottom:clamp(38px,4.6vw,58px);
  border-bottom:1px solid var(--hair-soft);
  scroll-margin-top:110px;
}
.pol:last-child{ border-bottom:0; margin-bottom:0; }
.pol__n{
  font-family:var(--disp); font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1;
  color:var(--rose-soft); font-variant-numeric:tabular-nums;
}
.pol__t{
  font-family:var(--disp); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(1.4rem,2.6vw,1.95rem); line-height:1.18; margin:0 0 .6em; color:var(--ink);
}
.pol__c p{ font-size:16.5px; line-height:1.78; color:var(--mute); font-weight:300; margin:0 0 1em; }
.pol__c p:last-child{ margin-bottom:0; }

/* the source marks its key terms with <em>. Bold rose everywhere made the
   whole page shout; a quiet wash behind the words carries better. */
.pol__c em, .pol__l em{
  font-style:normal; font-weight:500; color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--rose-soft);
  text-decoration-thickness:.16em;
  text-underline-offset:.18em;
}

.pol__l{ display:flex; flex-direction:column; gap:12px; margin:0 0 1em; }
.pol__l li{
  position:relative; padding-left:22px;
  font-size:16.5px; line-height:1.7; color:var(--mute); font-weight:300;
}
.pol__l li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--rose-soft);
}

/* ── the way out ──────────────────────────────────────────────────────── */
.doc__help{
  text-align:center;
  margin:clamp(56px,8vw,110px) 0 clamp(44px,6vw,80px);
  background:var(--white); border-radius:24px; box-shadow:var(--shadow);
  padding:clamp(30px,4.6vw,56px);
}
.doc__helpT{
  font-family:var(--disp); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.14; margin:.1em 0 .4em;
}
.doc__helpSay{
  font-size:15.5px; line-height:1.7; color:var(--mute); font-weight:300;
  max-width:46ch; margin-inline:auto;
}
.doc__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; justify-content:center; }
.doc__act{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 20px; border-radius:100px;
  background:var(--blush); color:var(--ink); text-decoration:none;
  font-size:13.5px; transition:.24s var(--e);
}
.doc__act .ic{ font-size:16px; color:var(--rose); }
.doc__act:hover{ background:var(--ink); color:var(--white); }
.doc__act:hover .ic{ color:var(--white); }

.doc__foot{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  max-width:1120px; margin:0 auto; padding:26px clamp(18px,4vw,44px) 40px;
  border-top:1px solid var(--hair-soft);
  font-size:12px; color:var(--mute-2);
}
.doc__foot nav{ display:flex; gap:8px; }
.doc__foot a{
  padding:11px 12px; color:var(--mute-2); text-decoration:none;
  transition:color .2s var(--e);
}
.doc__foot a:hover{ color:var(--rose); }

@media (max-width:900px){
  /* six short sections do not need an index as well as a scroll bar */
  .doc__toc{ display:none; }
  .doc__grid{ grid-template-columns:minmax(0,1fr); }
  .pol{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .pol__n{ font-size:11px; letter-spacing:.2em; color:var(--rose); font-family:var(--ui); font-weight:500; }
  .dnav__back span{ font-size:15px; }
  /* the footer stacks rather than squeezing two rows of text together */
  .doc__foot{ flex-direction:column; align-items:flex-start; gap:6px; padding-bottom:34px; }
  .doc__foot nav{ margin-left:-12px; }
  /* the only control still under a comfortable thumb size */
  .dnav__cta{ padding:1.15em 1.5em; }
}


/* ═══════════ PAY AND CONFIRM: step five of the order form ═══════════════
   The account details are rendered into every card but only revealed on the
   chosen one, so the picker reads as four names until somebody commits. */
/* These all carry the parent class on purpose. `.bank span` above is
   specificity (0,1,1) and would otherwise beat a bare `.bank__d` at (0,1,0),
   which quietly showed every account number instead of only the chosen one.
   The `.bank__t` rule escapes the same trap with !important; this is the
   tidier way out of it. */
.bank .bank__d{
  display:none; margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.28);
}
.bank.is-on .bank__d{ display:block; }
.bank .bank__r{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  opacity:.62; margin-top:0;
}
.bank .bank__r + .bank__r{ margin-top:7px; }
.bank .bank__r b{
  font-size:14px; letter-spacing:.02em; text-transform:none;
  opacity:1; font-weight:500; margin:0;
}
.bank .bank__n{ font-variant-numeric:tabular-nums; }

.pay2{ margin-top:clamp(18px,2.2vw,26px); }
.btn--copy{ width:100%; margin-bottom:clamp(18px,2.2vw,26px); }

/* the upload target. A label wrapping the input means the whole panel is the
   hit area, and the input stays focusable for a keyboard rather than being
   display:none, which would take it out of the tab order entirely. */
.rcpt{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:5px; padding:clamp(22px,3vw,30px) 20px; text-align:center; cursor:pointer;
  border:1.5px dashed var(--hair); border-radius:var(--r);
  background:var(--blush); transition:.24s var(--e);
}
.rcpt:hover{ border-color:var(--rose-soft); background:var(--white); }
.rcpt input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.rcpt input:focus-visible ~ .rcpt__t{ text-decoration:underline; }
.rcpt__i{
  display:grid; place-items:center; width:34px; height:34px; margin-bottom:4px;
  border-radius:50%; background:var(--white); color:var(--rose);
  border:1px solid var(--hair-soft);
}
.rcpt__i .ic{ font-size:16px; }
.rcpt:hover .rcpt__i{ background:var(--blush-2); }
.rcpt__t{ font-size:14px; font-weight:500; color:var(--ink); }
.rcpt__s{ font-size:12px; color:var(--mute-2); }

.rcpt__state{ margin-top:10px; font-size:12.5px; color:var(--mute); min-height:18px; }
.rcpt__state:empty{ display:none; }
.rcpt__state.is-good{ color:#4C7A4A; font-weight:500; }
.rcpt__state.is-bad{ color:var(--rose); }


/* ═══════════════════════════════════════════════════════════════════════════
   SUB PAGES: reviews, questions, contact

   The home page was one long scroll. These sections are pages now, sharing a
   nav and a footer drawn by page.js. The nav is a plain bar rather than the
   home page's centred logo with links either side: on a page whose job is one
   thing, a nav that draws attention to itself is in the way.
   ═══════════════════════════════════════════════════════════════════════════ */

.page{ background:var(--paper); }

.snav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:clamp(14px,3vw,34px);
  padding:12px clamp(16px,4vw,44px);
  background:rgba(252,241,243,.985); backdrop-filter:blur(18px) saturate(1.35);
  border-bottom:1px solid var(--hair-soft);
}
.snav__logo{ flex:none; display:block; }
.snav__logo img{ height:32px; width:auto; }

.snav__links{
  display:flex; align-items:center; gap:clamp(12px,2vw,26px);
  flex:1; min-width:0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.snav__links::-webkit-scrollbar{ display:none; }
.snav__links a{
  position:relative; white-space:nowrap; padding:6px 0;
  font-size:13px; color:var(--mute); text-decoration:none;
  transition:color .2s var(--e);
}
.snav__links a:hover{ color:var(--ink); }
.snav__links a.is-on{ color:var(--ink); font-weight:500; }
/* the current page is underlined rather than filled: a pill here would compete
   with the Order button, which is the only thing on the bar that should shout */
.snav__links a.is-on::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--rose); border-radius:2px;
}
.snav__cta{ flex:none; padding:.85em 1.5em; font-size:10px; }

.page__main{ min-height:52vh; }

/* these sections carried their own top padding when they sat mid scroll, and
   at the top of a page that reads as too much air above the heading */
.page__main > .faq,
.page__main > .con{ padding-top:clamp(40px,5vw,72px); }

.sfoot{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  max-width:var(--wrap); margin:0 auto;
  padding:26px clamp(18px,4vw,44px) 40px;
  border-top:1px solid var(--hair-soft);
  font-size:12px; color:var(--mute-2);
}
.sfoot nav{ display:flex; gap:8px; flex-wrap:wrap; }
.sfoot a{
  padding:10px 12px; color:var(--mute-2); text-decoration:none;
  transition:color .2s var(--e);
}
.sfoot a:hover{ color:var(--rose); }

@media (max-width:720px){
  .snav{ gap:12px; padding:10px 14px; }
  .snav__logo img{ height:22px; }
  .snav__links{ gap:14px; }
  .snav__links a{ font-size:12.5px; }
  .snav__cta{ padding:1em 1.2em; }
  .sfoot{ flex-direction:column; align-items:flex-start; gap:4px; padding-bottom:34px; }
  .sfoot nav{ margin-left:-12px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE BASKET

   A drawer rather than a page: adding a second piece should never cost you your
   place in the collection. The nav carries a count so it is obvious something
   is waiting, which is the only reason the button exists when it is empty.
   ═══════════════════════════════════════════════════════════════════════════ */

.cartbtn{
  position:relative; display:grid; place-items:center; flex:none;
  width:40px; height:40px; border-radius:50%;
  color:var(--ink); transition:background .24s var(--e);
}
.cartbtn:hover{ background:rgba(255,255,255,.5); }
.cartbtn .ic{ font-size:19px; }
.cartbtn__n{
  position:absolute; top:1px; right:0;
  min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--rose); color:#fff;
  font-size:10px; font-weight:600; line-height:17px; text-align:center;
  font-variant-numeric:tabular-nums;
}
/* the nav goes dark over the hero and light once stuck, and the basket has to
   follow it or it disappears against one of them */
.nav:not(.stuck) .cartbtn{ color:#fff; }
.nav:not(.stuck) .cartbtn:hover{ background:rgba(255,255,255,.16); }

.cart[hidden]{ display:none; }
.cart{ position:fixed; inset:0; z-index:900; }
.cart__scrim{
  position:absolute; inset:0; background:rgba(44,30,36,.44);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .34s var(--e);
}
.cart.on .cart__scrim{ opacity:1; }

.cart__box{
  position:absolute; top:0; right:0; bottom:0; width:min(430px,100%);
  display:flex; flex-direction:column;
  background:var(--white); box-shadow:-30px 0 70px -30px rgba(90,50,64,.5);
  transform:translateX(100%); transition:transform .38s var(--e);
}
.cart.on .cart__box{ transform:none; }

.cart__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 22px 16px; border-bottom:1px solid var(--hair-soft);
}
.cart__t{ font-family:var(--disp); font-weight:400; font-size:1.5rem; margin:0; }
.cart__x{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:var(--mute); transition:.2s var(--e);
}
.cart__x:hover{ background:var(--blush); color:var(--ink); }

.cart__list{ flex:1; overflow-y:auto; padding:6px 22px; }

.cline{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px;
  padding:18px 0; border-bottom:1px solid var(--hair-soft);
}
.cline:last-child{ border-bottom:0; }
.cline__img{
  width:64px; height:64px; object-fit:cover; border-radius:12px;
  background:var(--blush-2);
}
.cline__b h3{ font-family:var(--disp); font-weight:400; font-size:1.05rem; margin:0 0 2px; }
.cline__o{ font-size:12px; color:var(--mute-2); margin:0 0 4px; }
.cline__p{ font-size:13.5px; color:var(--ink); margin:0; }

.cline__q{
  grid-column:2; display:flex; align-items:center; gap:8px; margin-top:10px;
}
.cline__s{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--blush); color:var(--ink); font-size:15px; line-height:1;
  transition:.18s var(--e);
}
.cline__s:hover{ background:var(--blush-3); }
.cline__q b{
  min-width:22px; text-align:center; font-weight:500; font-size:14px;
  font-variant-numeric:tabular-nums;
}
.cline__x{
  margin-left:auto; font-size:11.5px; color:var(--mute-2);
  letter-spacing:.04em; transition:color .18s var(--e);
}
.cline__x:hover{ color:var(--rose); }

.cart__empty{ padding:48px 22px; text-align:center; }
.cart__empty p{
  font-family:var(--disp); font-style:italic; font-size:1.05rem;
  color:var(--mute-2); margin:0 0 20px;
}

.cart__foot{ padding:18px 22px 24px; border-top:1px solid var(--hair-soft); }
.cart__sum{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:4px;
}
.cart__sum span{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
/* Three rows now, not one. Only the figure being transferred is set in the
   display face; the two that add up to it stay quiet underneath. */
.cart__sum b{ font-family:var(--ui); font-weight:500; font-size:13.5px; color:var(--ink); }
.cart__sum--tot b{ font-family:var(--disp); font-weight:400; font-size:1.55rem; }
.cart__more{
  display:block; width:100%; margin-top:12px; padding:8px;
  font-size:12.5px; color:var(--mute); transition:color .2s var(--e);
}
.cart__more:hover{ color:var(--ink); }

/* ── the basket as it appears at the top of checkout ─────────────────── */
.ord__sum ul{ margin:10px 0 0; }
.ord__sum li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:7px 0; font-size:14px;
}
.ord__sum li + li{ border-top:1px solid var(--hair-soft); }
/* the options sit under the name rather than trailing it: on a narrow screen a
   trailing colour list wraps and leaves one word stranded beside the price */
.ord__sum li i{
  display:block; font-style:normal; color:var(--mute-2); font-size:12.5px;
  margin-top:2px;
}
.ord__sum li b{ font-weight:500; white-space:nowrap; }
.ord__tot{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:12px 0 0; padding-top:12px; border-top:1px solid var(--hair);
}
.ord__tot span{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
.ord__tot b{ font-family:var(--disp); font-weight:400; font-size:1.35rem; }

@media (max-width:520px){
  .cart__box{ width:100%; }
  .cart__list{ padding:6px 16px; }
  .cart__head, .cart__foot{ padding-inline:16px; }
}

/* ── the handwritten note, written per bouquet ─────────────────────────────
   It lives beside the colours rather than at the end of checkout, because a
   basket holding two bouquets for two people needs two cards, and one box at
   the end cannot say which message belongs to which. */
.qvNote{ margin-bottom:1.6em; }
.qvNote__l{
  display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); margin-bottom:7px;
}
.qvNote__h{ font-size:12px; line-height:1.5; color:var(--mute-2); margin:0 0 9px; }
.qvNote textarea{
  width:100%; background:var(--blush); border:1px solid transparent; border-radius:12px;
  padding:.82em .95em; font-size:14px; color:var(--ink); resize:vertical;
  font-family:inherit;
  transition:border-color .25s var(--e), background .25s var(--e);
}
.qvNote textarea::placeholder{ color:var(--mute-2); }
.qvNote textarea:focus{ outline:none; border-color:var(--rose); background:var(--white); }
.qvNote .ord__count{ margin-top:7px; }

/* the card as it reads back on a basket line */
.cline__n{
  margin:6px 0 0; font-family:var(--disp); font-style:italic; font-size:13px;
  line-height:1.45; color:var(--mute-2);
}

/* ── choosing an area ──────────────────────────────────────────────────────
   The basket used to say only what the flowers came to, and the customer pays
   by transfer before the shop confirms, so the figure they were looking at was
   never the figure they owed. Now the area is chosen here and the total is the
   real one. */
.cart__zone{ display:block; margin:14px 0 2px; }
.cart__zone > span{
  display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); margin-bottom:7px;
}
/* asked for and not yet answered */
.cart__zone.is-bad select{ border-color:var(--rose); background:var(--white); }
.cart__need{
  margin:8px 0 0; font-size:12px; color:var(--rose);
}
.cart__zone select, .ordZone select{
  width:100%; background:var(--blush); border:1px solid transparent; border-radius:12px;
  padding:.7em .95em; font-size:13.5px; color:var(--ink); font-family:inherit;
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),
                   linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  transition:border-color .25s var(--e), background-color .25s var(--e);
}
.cart__zone select:focus, .ordZone select:focus{
  outline:none; border-color:var(--rose); background-color:var(--white);
}
.ordZone[hidden]{ display:none; }

/* three lines where there was one: flowers, delivery, and what that comes to */
.cart__sum--ship{ margin-top:10px; }
.cart__sum--ship b{ color:var(--mute); }
.cart__sum--tot{
  margin-top:10px; padding-top:12px; border-top:1px solid var(--hair);
}

/* the same three lines in the checkout summary */
.ord__ship{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin:8px 0 0; font-size:13px; color:var(--mute);
}
.ord__ship b{ font-weight:500; color:var(--ink); white-space:nowrap; }
.ord__ship--ask b{ color:var(--rose); font-weight:500; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE SHOP, AS ITS OWN PAGE

   The collection used to sit in the middle of the home page with a hero above
   it. On its own it has to open the page itself, so the heading is set at
   something near hero scale and given room to breathe under the fixed bar.
   ═══════════════════════════════════════════════════════════════════════════ */
.coll--page{
  /* clears the fixed bar, then a generous opening rather than a section gap */
  padding-top:clamp(112px,13vh,164px);
  background:
    linear-gradient(180deg, var(--white) 0%, var(--blush) clamp(300px,38vh,460px)),
    var(--blush);
}

.shop__head{
  max-width:min(940px,100%); margin:0 auto clamp(40px,5vw,72px);
  text-align:center;
}
.shop__head .kick{
  display:inline-flex; align-items:center; gap:14px; margin-bottom:1.25em;
}
.shop__head .kick::before, .shop__head .kick::after{
  content:""; width:26px; height:1px; background:var(--rose); opacity:.55;
}
.shop__h1{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2.9rem,7.4vw,6.2rem); line-height:1.02; letter-spacing:-.004em;
  margin:0; text-wrap:balance; color:var(--ink);
}
.shop__head .say{ max-width:52ch; margin-inline:auto; }

/* the filter bar sticks under the nav so the controls stay reachable however
   far down the grid the customer has gone */
.coll--page .filt{
  position:sticky; top:var(--navh,68px); z-index:40;
  margin-block:clamp(20px,2.6vw,34px) clamp(28px,3.4vw,44px);
}
.coll--page .filt__panel{
  box-shadow:0 18px 44px -28px rgba(90,50,64,.42);
}

/* the newsletter closes the page rather than interrupting a scroll, so it
   loses the hard edge it had between two sections */
.coll--page + .news{ margin-top:clamp(20px,3vw,44px); }

@media (max-width:1000px){
  .coll--page{ padding-top:clamp(94px,12vh,124px); }
  /* sticky filters eat too much of a phone screen to be worth it */
  .coll--page .filt{ position:static; }
}

/* ── add-ons ───────────────────────────────────────────────────────────────
   Checkboxes rather than swatches, because several can be on at once and a row
   of swatches reads as pick one. Each carries its price, so the figure at the
   top of the panel is never a surprise. */
.qvAdd{ margin-bottom:1.6em; }
.qvAdd[hidden]{ display:none; }
.qvAdd__set{ display:flex; flex-direction:column; gap:7px; }

.addon{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:10px 13px; border-radius:12px;
  background:var(--blush); border:1px solid transparent;
  transition:background .2s var(--e), border-color .2s var(--e);
}
.addon:hover{ background:var(--blush-2); }
.addon.is-on{ border-color:var(--rose-soft); background:var(--white); }

/* the native box, sized up and tinted, rather than a div pretending to be one:
   it stays keyboard reachable and announces itself to a screen reader */
.addon input{
  width:17px; height:17px; flex:none; accent-color:var(--rose); cursor:pointer;
  margin:0;
}
.addon__t{ flex:1; min-width:0; font-size:13.5px; color:var(--ink); }
.addon__p{
  flex:none; font-size:12.5px; font-weight:500; color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.addon.is-on .addon__p{ color:var(--rose); }

/* a piece that is printed to order, and what it says */
.qvField{ margin-bottom:1.6em; }
.qvField[hidden]{ display:none; }
.qvField input{
  width:100%; background:var(--blush); border:1px solid transparent; border-radius:12px;
  padding:.82em .95em; font-size:14px; color:var(--ink); font-family:inherit;
  transition:border-color .25s var(--e), background .25s var(--e);
}
.qvField input::placeholder{ color:var(--mute-2); }
.qvField input:focus{ outline:none; border-color:var(--rose); background:var(--white); }
.qvField .ord__count{ margin-top:7px; }

/* What it will say, read back on the basket line. Named __msg and not __s:
   the quantity steppers already own that, and a paragraph inherited their
   30 pixel circle. */
.cline__msg{ margin:5px 0 0; font-size:12px; color:var(--ink); }
.cline__msg span{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
  margin-right:5px;
}

/* what was added, listed back on the basket line */
.cline__x{ margin:5px 0 0; display:flex; flex-direction:column; gap:2px; }
.cline__x li{
  display:flex; justify-content:space-between; gap:10px;
  font-size:11.5px; color:var(--mute-2);
}
.cline__x b{ font-weight:500; font-variant-numeric:tabular-nums; }