/* ==========================================================
   LITTLE SURPRISES — design system
   Palette and mark taken from the client's own logo. Layout keeps the
   structure the client approved; only the skin changed.
   ========================================================== */

:root{
  /* palette — sampled from the client's OWN logo (assests/logo.pdf), not from
     the reference site. The logo is gold line art on a blush field with a cream
     gift box; those three colours drive everything below. */
  --paper:      #FDF8F3;   /* warm page cream */
  --peach:      #F7E3DA;   /* section bands */
  --peach-soft: #FDF1EA;   /* panels */
  --blush:      #EEC4B5;   /* the logo's field colour */
  --cream:      #F9EACB;   /* the logo's gift-box fill */

  --teal:       #3E2E1C;   /* primary text + dark bands (espresso, 13:1 on white) */
  --teal-75:    rgba(62,46,28,.75);
  --teal-55:    rgba(62,46,28,.55);
  --teal-12:    rgba(62,46,28,.14);
  --teal-06:    rgba(62,46,28,.07);
  --deep:       #33261A;   /* footer */

  --rose:       #A55A44;   /* accent — clay, a deeper cut of the blush */
  --rose-soft:  #EED7CE;
  --gold:       #846121;   /* the logo's ink — accent text, passes AA on cream */
  --gold-lt:    #A8823A;   /* hairlines and ornaments ONLY, never text */
  --gold-dk:    #D9B87C;   /* the same gold for use ON the dark bands (6.88:1) */
  --white:      #FFFFFF;

  /* Theme tokens (Admin → Website → Theme). Each starts at the value the
     design used before it became a setting, so an untouched theme looks
     exactly as it always has; the admin prints only what was changed. */
  --band:       #3E2E1C;   /* dark bands: story, feature, dark sections, tags */
  --bar-bg:     #3E2E1C;   /* announcement strip */
  --bar-ink:    #EEC4B5;
  --bar-em:     #FFFFFF;
  --foot-bg:    #33261A;
  --foot-ink:   #FFFFFF;   /* used at 72% — see .site-foot */
  --foot-head:  #EEC4B5;
  --btn-bg:     #3E2E1C;   /* the main (solid) button */
  --btn-ink:    #FFFFFF;
  --on-accent:  #FFFFFF;   /* text on the accent: badges, sale tags */
  --accent-deep:#8E4632;   /* the accent where it must pass AA on the peach band */
  --sale:       #A55A44;
  --wa:         #1F8F55;
  --wa-dk:      #187446;
  --fs-body:    15px;
  --fw-head:    400;
  --btn-radius: 0;

  --ff-head: 'Fraunces', Georgia, serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --wrap: 1280px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:var(--ff-body);
  background:var(--paper);
  color:var(--teal);
  font-size:15px; font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }
ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--rose); outline-offset:2px; }

h1,h2,h3,h4{
  font-family:var(--ff-head); font-weight:400; font-weight:var(--fw-head); letter-spacing:.01em; line-height:1.28;
  font-optical-sizing:auto;
  /* SOFT rounds the terminals, WONK lets the italic-ish forms lean —
     this is what echoes the wobble of the hand-lettered wordmark. */
  font-variation-settings:'SOFT' 60,'WONK' 1;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- announcement ---------- */
.topbar{
  background:var(--bar-bg); color:var(--bar-ink);
  font-size:11.5px; letter-spacing:.06em;
  text-align:center; padding:9px 16px;
}
.topbar b, .topbar em{ font-weight:600; font-style:normal; color:var(--bar-em); }

/* ---------- header ---------- */
.site-head{
  background:var(--paper);
  border-bottom:1px solid var(--teal-12);
  position:sticky; top:0; z-index:400;
}
.head-top{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:16px;
  max-width:var(--wrap); margin:0 auto; padding:14px 24px;
}
.head-icons{ display:flex; align-items:center; gap:4px; }
.head-icons.right{ justify-content:flex-end; }
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--teal); position:relative;
  transition:background .2s;
}
.icon-btn:hover{ background:var(--teal-06); }
.badge{
  position:absolute; top:4px; right:3px;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--rose); color:var(--on-accent); border-radius:9px;
  font-size:9px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.brand-lockup{ text-align:center; }
.brand-lockup .mark{ width:38px; height:auto; margin:0 auto 2px; }
/* the real mark is the client's own line drawing, so it is a bitmap with
   alpha rather than an icon font — keep it crisp when it scales down */
.brand-lockup .mark{ image-rendering:auto; }
.brand-lockup .name{
  font-family:var(--ff-head); font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; margin-top:4px;
}
.brand-lockup .sub{
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal-55); margin-top:2px;
}

/* ---------- nav + mega menu ---------- */
.mainnav{ border-top:1px solid var(--teal-12); position:relative; }
.mainnav > ul{
  max-width:var(--wrap); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:center;
  gap:30px; flex-wrap:wrap;
}
.mainnav > ul > li{ position:static; }
.mainnav a.top{
  display:flex; align-items:center; gap:6px;
  padding:15px 0; font-size:12.5px; letter-spacing:.07em;
  color:var(--teal); position:relative;
  transition:color .22s var(--ease);
}
.mainnav a.top .chev{ transition:transform .28s var(--ease); }
.mainnav a.top::after{
  content:''; position:absolute; left:0; right:0; bottom:9px; height:1px;
  background:var(--rose); transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease);
}
.mainnav li:hover > a.top{ color:var(--rose); }
.mainnav li:hover > a.top::after{ transform:scaleX(1); }
.mainnav li:hover > a.top .chev{ transform:rotate(180deg); }
.mainnav a.top.sale{ color:var(--rose); font-weight:600; }

/* dim the page behind an open menu */
.mega-scrim{
  position:fixed; inset:0; z-index:380;
  background:rgba(62,46,28,.26);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
body.mega-open .mega-scrim{ opacity:1; }

/* full-bleed panel anchored to the nav bar */
.mega{
  position:absolute; top:100%; left:0; right:0;
  background:var(--white);
  border-top:1px solid var(--teal-12);
  box-shadow:0 26px 54px -12px rgba(62,46,28,.18);
  opacity:0; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .24s var(--ease), transform .34s var(--ease);
  z-index:400;
}
.mainnav li:hover > .mega{ opacity:1; pointer-events:auto; transform:translateY(0); }

.mega-inner{
  max-width:var(--wrap); margin:0 auto; padding:34px 24px 30px;
  display:grid; grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)) 1.9fr; gap:42px;
}
.mega-inner.no-feat{ grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)); }
@media (min-width:1025px){ .mega-inner[style*="--cols:4"]{ gap:30px; grid-template-columns:repeat(4, minmax(0, 1fr)) 1.6fr; } }
.mega-col h5{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal-55); font-weight:500;
  padding-bottom:10px; margin-bottom:12px;
  border-bottom:1px solid var(--teal-12);
}
/* :not(.mega-card) — the featured cards are also <a> inside this column
   and must stay block-level, not become flex rows. */
.mega-col a:not(.mega-card){
  display:flex; align-items:center; justify-content:space-between;
  font-size:13.5px; color:var(--teal-75);
  padding:7px 0; transition:color .2s var(--ease), transform .25s var(--ease);
}
.mega-col a .arw{ opacity:0; transform:translateX(-6px); transition:opacity .2s, transform .25s var(--ease); color:var(--rose); }
.mega-col a:not(.mega-card):hover{ color:var(--teal); transform:translateX(5px); }
.mega-col a:not(.mega-card):hover .arw{ opacity:1; transform:translateX(0); }

/* featured product cards inside the menu */
.mega-feat{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.mega-card{ display:block; }
.mega-card figure{
  overflow:hidden; background:var(--peach-soft); margin-bottom:10px;
}
.mega-card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .6s var(--ease);
}
.mega-card:hover img{ transform:scale(1.06); }
.mega-card .lbl{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rose);
}
.mega-card h6{
  font-family:var(--ff-head); font-weight:400; font-size:14px;
  color:var(--teal); margin:3px 0 3px;
}
.mega-card .pr{ font-size:12.5px; color:var(--teal-55); }

/* promise strip along the bottom of the panel */
.mega-foot{
  border-top:1px solid var(--teal-12); background:var(--peach-soft);
}
.mega-foot .in{
  max-width:var(--wrap); margin:0 auto; padding:13px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size:12.5px; color:var(--teal-75); flex-wrap:wrap;
}
.mega-foot .promise{ display:flex; align-items:center; gap:9px; }
.mega-foot .promise svg{ color:var(--gold); flex:0 0 auto; }
.mega-foot .go{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--rose); font-weight:500; letter-spacing:.04em;
}
.mega-foot .go:hover{ text-decoration:underline; text-underline-offset:3px; }

/* burger (mobile) */
.burger{ display:none; width:38px; height:38px; flex-direction:column;
  align-items:center; justify-content:center; gap:4.5px; }
.burger span{ width:19px; height:1.5px; background:var(--teal); transition:transform .3s var(--ease), opacity .2s; }
body.nav-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 30px; font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; font-weight:500;
  transition:background .25s, color .25s, border-color .25s;
  border-radius:var(--btn-radius);
}
.btn-solid{ background:var(--btn-bg); color:var(--btn-ink); }
.btn-solid:hover{ background:var(--rose); color:var(--on-accent); }
.btn-line{ border:1px solid var(--teal); color:var(--teal); }
.btn-line:hover{ background:var(--teal); color:#fff; }
.btn-rose{ background:var(--rose); color:var(--on-accent); }
.btn-rose:hover{ background:var(--btn-bg); color:var(--btn-ink); }

/* ---------- section heads ---------- */
.sec{ padding:64px 0; }
.sec-head{ text-align:center; margin-bottom:36px; }
.sec-head h2{ font-size:26px; }
.sec-head p{ color:var(--teal-75); font-size:14px; margin-top:9px; }
.sec-head .orn{
  width:72px; height:12px; margin:0 auto 14px;
  color:var(--rose);
}
.sec-head.left{ text-align:left; }
.sec-head.left .orn{ margin-left:0; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    linear-gradient(180deg, var(--peach) 0%, var(--peach-soft) 62%, var(--paper) 100%);
  overflow:hidden;
}
/* soft botanical wash behind the hero */
.hero::before{
  content:''; position:absolute; top:-18%; right:-8%;
  width:52vw; height:52vw; max-width:660px; max-height:660px;
  background:radial-gradient(circle, rgba(196,80,96,.10) 0%, rgba(196,80,96,0) 66%);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.06fr; align-items:center;
  gap:56px; padding:76px 24px 84px;
}
/* stacked / overlapping hero imagery */
.hero-stack{ position:relative; }
.hero-stack .main{
  width:88%; aspect-ratio:4/5; object-fit:cover;
  /* keep the hero inside a normal viewport so the copy never falls below the fold */
  max-height:min(560px, 62vh);
  box-shadow:0 26px 60px rgba(62,46,28,.16);
}
.hero-stack .inset{
  position:absolute; right:0; bottom:-30px;
  width:46%; aspect-ratio:1; object-fit:cover;
  border:7px solid var(--paper);
  box-shadow:0 18px 40px rgba(62,46,28,.16);
}
.hero-rating{
  display:flex; align-items:center; gap:10px;
  margin-top:26px; font-size:12.5px; color:var(--teal-75);
}
.hero-rating .stars{ color:var(--rose); letter-spacing:2px; font-size:13px; }
.hero-copy .kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rose); margin-bottom:16px;
}
.hero-copy h1{ font-size:clamp(28px,3.6vw,44px); line-height:1.22; }
.hero-copy h1 em{ font-style:italic; color:var(--rose); }
.hero-copy p{ color:var(--teal-75); font-size:15px; margin:18px 0 28px; max-width:44ch; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-figure{ position:relative; }
.hero-figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:2px;
}
.hero-chip{
  position:absolute; left:-18px; bottom:26px;
  background:var(--white); border:1px solid var(--teal-12);
  padding:13px 18px; box-shadow:0 10px 30px rgba(62,46,28,.1);
}
.hero-chip .n{ font-family:var(--ff-head); font-size:22px; color:var(--rose); line-height:1; }
.hero-chip .l{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-55); margin-top:3px; }

/* ---------- editorial band: image left, quiet copy right ---------- */
.edito{ background:var(--paper); }
.edito-inner{
  max-width:var(--wrap); margin:0 auto; padding:70px 24px;
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;
}
.edito-inner.flip > :first-child{ order:2; }
.edito-figure{ position:relative; }
.edito-figure img{ width:100%; aspect-ratio:1; object-fit:cover; }
.edito-figure .cap{
  position:absolute; left:16px; bottom:16px;
  background:rgba(253,248,243,.94); background:color-mix(in srgb, var(--paper) 94%, transparent); padding:8px 14px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-75);
}
.edito h2{ font-size:27px; margin-bottom:14px; }
.edito p{ color:var(--teal-75); margin-bottom:16px; max-width:46ch; }

/* ---------- ornament rule ---------- */
.rule-orn{
  display:flex; align-items:center; gap:14px;
  color:var(--teal-12); margin:0 0 30px;
}
.rule-orn::before,.rule-orn::after{ content:''; height:1px; background:currentColor; flex:1; }
.rule-orn svg{ color:var(--rose); flex:0 0 auto; }

/* ---------- category tiles ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cat{ text-align:center; }
.cat figure{ overflow:hidden; margin-bottom:12px; background:var(--peach-soft); }
.cat img{ width:100%; aspect-ratio:1; object-fit:cover; transition:transform .6s var(--ease); }
.cat:hover img{ transform:scale(1.05); }
.cat h3{ font-size:15px; }
.cat span{ font-size:11.5px; color:var(--teal-55); }

/* ---------- product cards ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.prod{ position:relative; }
.prod figure{ position:relative; overflow:hidden; margin-bottom:12px; background:var(--peach-soft); }
.prod img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .6s var(--ease); }
.prod:hover img{ transform:scale(1.04); }
.prod .tag{
  position:absolute; top:10px; left:10px;
  background:var(--band); color:#fff;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px;
}
.prod .tag.sale{ background:var(--sale); color:var(--on-accent); }
.prod .tags{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; z-index:1; }
.prod .tags .tag{ position:static; }
.pdp-labels{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; }
.pdp-label{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; }
.prod .quick{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(252,252,252,.96); background:color-mix(in srgb, var(--white) 96%, transparent); padding:10px;
  display:flex; gap:8px;
  transform:translateY(101%); transition:transform .32s var(--ease);
}
.prod:hover .quick{ transform:translateY(0); }
.prod .quick .btn{ flex:1; padding:10px 6px; font-size:10.5px; letter-spacing:.08em; }
.prod .wish{
  width:38px; flex:0 0 38px; border:1px solid var(--teal-12);
  display:flex; align-items:center; justify-content:center; color:var(--teal-55);
  transition:color .2s, border-color .2s;
}
.prod .wish:hover{ color:var(--rose); border-color:var(--rose); }
.prod .cat-line{ font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--rose); }
.prod h3{ font-size:15px; margin:4px 0 5px; }
.prod .price{ font-size:13.5px; color:var(--teal-75); display:flex; gap:8px; align-items:baseline; }
.prod .price .was{ text-decoration:line-through; color:var(--teal-55); font-size:12px; }
.prod .price .now{ color:var(--sale); font-weight:600; }

/* ---------- boy / girl chooser ---------- */
.chooser{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.choose{
  position:relative; overflow:hidden; min-height:300px;
  display:flex; align-items:flex-end; padding:30px;
}
.choose img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.choose:hover img{ transform:scale(1.05); }
.choose::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(62,46,28,.64), rgba(62,46,28,.06) 62%);
}
.choose .inner{ position:relative; z-index:2; color:#fff; }
.choose h3{ font-size:24px; color:#fff; }
.choose span{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.9; }

/* ═══════════ 1. TABBED CATEGORY SHOWCASE ═══════════ */
.tabs-sec{ padding:70px 0 74px; background:var(--paper); }
.tabbar{
  display:flex; align-items:center; justify-content:center;
  gap:6px; flex-wrap:wrap; margin:26px 0 38px;
  border-bottom:1px solid var(--teal-12); padding-bottom:0;
}
.tabbar button{
  position:relative; padding:12px 20px 15px;
  font-size:13px; letter-spacing:.04em; color:var(--teal-55);
  transition:color .22s var(--ease);
}
.tabbar button::after{
  content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:2px;
  background:var(--rose); transform:scaleX(0); transform-origin:center;
  transition:transform .3s var(--ease);
}
.tabbar button:hover{ color:var(--teal); }
.tabbar button[aria-selected="true"]{ color:var(--teal); font-weight:500; }
.tabbar button[aria-selected="true"]::after{ transform:scaleX(1); }

.tabpanel{ display:none; }
.tabpanel.on{ display:block; animation:tabIn .45s var(--ease) both; }
@keyframes tabIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.tabpanel .prod-grid{ grid-template-columns:repeat(4,1fr); }
.tabs-foot{ text-align:center; margin-top:34px; }

/* ═══════════ 2. SWEET BOXES RAIL ═══════════ */
.rail-sec{ background:var(--peach-soft); padding:66px 0 70px; overflow:hidden; }
.rail-head{
  max-width:var(--wrap); margin:0 auto 28px; padding:0 24px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.rail-head h2{ font-size:26px; }
.rail-head p{ color:var(--teal-75); font-size:14px; margin-top:7px; max-width:46ch; }
.rail{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 24px 14px; scrollbar-width:none; cursor:grab;
}
.rail::-webkit-scrollbar{ display:none; }
.rail:active{ cursor:grabbing; }
.rail-card{ flex:0 0 268px; scroll-snap-align:start; }
.rail-card figure{ overflow:hidden; background:var(--white); margin-bottom:12px; }
.rail-card img{
  width:100%; aspect-ratio:1; object-fit:cover;
  transition:transform .55s var(--ease);
}
.rail-card:hover img{ transform:scale(1.05); }
.rail-card .nm{ font-family:var(--ff-head); font-size:15px; color:var(--teal); }
.rail-card .mt{ font-size:12.5px; color:var(--teal-55); margin-top:3px; }
.rail-card .pr{ font-size:13px; color:var(--sale); margin-top:5px; font-weight:500; }

/* ═══════════ 3. BENTO MOSAIC ═══════════ */
.bento-sec{ padding:70px 0 76px; }
.bento{
  display:grid; gap:16px;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:230px 230px;
}
.bento a{ position:relative; overflow:hidden; display:block; background:var(--peach-soft); }
.bento img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.bento a:hover img{ transform:scale(1.05); }
.bento .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px;
  background:linear-gradient(to top, rgba(62,46,28,.80), rgba(62,46,28,.22) 58%, transparent);
  color:#fff;
}
.bento .cap .k{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#EEC4B5; }
.bento .cap h3{ font-size:17px; color:#fff; margin-top:4px; }
.bento .cap .p{ font-size:12.5px; color:rgba(255,255,255,.82); margin-top:3px; }
.bento .big{ grid-column:span 2; grid-row:span 2; }
.bento .big .cap h3{ font-size:24px; }
.bento .wide{ grid-column:span 2; }

@media (max-width:1024px){
  .tabpanel .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .bento{ grid-template-columns:repeat(2,1fr); grid-template-rows:auto; }
  .bento .big{ grid-column:span 2; grid-row:span 1; aspect-ratio:4/3; }
  .bento .wide{ grid-column:span 2; }
  .bento a:not(.big){ aspect-ratio:4/3; }
}
@media (max-width:600px){
  .tabbar{ gap:2px; }
  .tabbar button{ padding:11px 12px 14px; font-size:12px; }
  .rail-card{ flex-basis:220px; }
}

/* ---------- mid-page collection feature ----------
   Deliberately NOT a discount banner. This brand sells a keepsake for a
   once-in-a-lifetime moment; price-shouting cheapens it. */
/* Split band: photograph on one side, copy on a solid panel on the other.
   Text never sits on the photo — these product shots are light and busy, and
   no scrim gets gold or white type to a readable contrast over them. */
.feature{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:1fr 1fr;
  min-height:520px;
}
.feature-bg{ position:relative; min-height:320px; }
.feature-bg img{ width:100%; height:100%; object-fit:cover; }
.feature-inner{
  background:var(--band);
  display:flex; flex-direction:column; justify-content:center;
  padding:76px 66px;
}
.feature .orn{ width:46px; height:10px; margin:0 0 20px; color:var(--gold-dk); }
.feature .eyebrow{
  display:block; font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-dk); margin-bottom:18px;
}
.feature h2{
  font-size:clamp(30px,4vw,46px); line-height:1.24; color:#fff;
  margin-bottom:18px;
}
.feature h2 em{ font-style:italic; color:#EEC4B5; }
.feature p{
  color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.75;
  max-width:40ch; margin:0 0 30px;
}
.feature .btn-cream{ align-self:flex-start; }
.feature .btn-cream{
  display:inline-flex; align-items:center; gap:10px;
  background:#FCFCFC; color:var(--band);
  padding:14px 32px; border-radius:var(--btn-radius); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.feature .btn-cream:hover{ background:#EEC4B5; transform:translateY(-2px); }
/* quiet detail line — facts, not urgency */
.feature .facts{
  display:flex; align-items:center;
  gap:20px; flex-wrap:wrap;
  margin-top:30px; font-size:12px; color:rgba(255,255,255,.7);
}
.feature .facts span{ display:inline-flex; align-items:center; gap:7px; }
.feature .facts i{
  width:4px; height:4px; border-radius:50%; background:var(--gold-dk);
  display:inline-block; font-style:normal;
}
@media (max-width:1024px){
  .feature{ grid-template-columns:1fr; min-height:0; }
  .feature-bg{ min-height:300px; }
  .feature-inner{ padding:52px 24px 58px; }
}
@media (max-width:600px){
  .feature-bg{ min-height:240px; }
  .feature-inner{ padding:44px 20px 50px; }
  .feature .facts{ gap:14px; font-size:11.5px; }
}

/* ---------- (retired) discount banner ---------- */
.promo{
  position:relative; overflow:hidden;
  background:var(--band);
  isolation:isolate;
}
/* warm glow so the teal isn't a flat slab */
.promo::before{
  content:''; position:absolute; z-index:0;
  width:70vw; height:70vw; max-width:820px; max-height:820px;
  left:-14%; top:-46%;
  background:radial-gradient(circle, rgba(196,80,96,.40) 0%, rgba(196,80,96,0) 62%);
}
.promo::after{
  content:''; position:absolute; z-index:0; right:-10%; bottom:-50%;
  width:56vw; height:56vw; max-width:660px; max-height:660px;
  background:radial-gradient(circle, rgba(201,169,97,.30) 0%, rgba(201,169,97,0) 64%);
}
.promo-inner{
  position:relative; z-index:2;
  max-width:var(--wrap); margin:0 auto; padding:72px 24px 78px;
  display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center;
}
.promo-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--rose); color:var(--on-accent);
  padding:7px 15px; border-radius:100px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  margin-bottom:20px;
}
.promo-pill .dot{
  width:6px; height:6px; border-radius:50%; background:#fff;
  animation:promoPulse 1.9s ease-in-out infinite;
}
@keyframes promoPulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }

.promo h2{
  font-size:clamp(28px,3.4vw,40px); line-height:1.2; color:#fff; margin-bottom:8px;
}
.promo h2 em{ font-style:italic; color:var(--gold); }
.promo .save{
  display:flex; align-items:baseline; gap:12px; margin:18px 0 14px;
}
.promo .save .num{
  font-family:var(--ff-head); font-size:clamp(46px,6vw,72px);
  line-height:1; color:var(--gold);
}
.promo .save .txt{ font-size:14px; color:#CBD9DF; max-width:20ch; line-height:1.5; }
.promo p{ color:#B7C6CC; font-size:14.5px; max-width:42ch; line-height:1.7; }
.promo-actions{ display:flex; align-items:center; gap:18px; margin-top:26px; flex-wrap:wrap; }
.promo .btn-gold{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--gold); color:var(--band);
  padding:14px 30px; border-radius:var(--btn-radius); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.promo .btn-gold:hover{ background:#E0C27F; transform:translateY(-2px); }
.promo .fine{ font-size:12px; color:#8FA6AF; }

/* layered, slightly rotated product shots */
/* Height is driven by the column width so the square shots always nest
   inside it — a fixed px height let them spill once the column got wide. */
.promo-shots{ position:relative; aspect-ratio:1/0.66; min-height:250px; }
.promo-shots img{
  position:absolute; border-radius:2px; object-fit:cover;
  box-shadow:0 22px 44px rgba(0,0,0,.30);
}
.promo-shots .s1{ width:47%; aspect-ratio:1; left:1%;  top:4%;   transform:rotate(-7deg); z-index:1; }
.promo-shots .s2{ width:44%; aspect-ratio:1; right:3%; top:0;    transform:rotate(5deg);  z-index:3; }
.promo-shots .s3{ width:36%; aspect-ratio:1; left:25%; bottom:0; transform:rotate(2deg);  z-index:2; }
/* a small gold seal tucked into the stack */
.promo-seal{
  position:absolute; z-index:4; right:-2%; bottom:10%;
  width:92px; height:92px; border-radius:50%;
  background:var(--gold); color:var(--band);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1.15;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.promo-seal b{ font-family:var(--ff-head); font-size:19px; font-weight:400; display:block; }

@media (max-width:1024px){
  .promo-inner{ grid-template-columns:1fr; gap:34px; padding:52px 20px 58px; }
  .promo-shots{ height:290px; }
  .promo-seal{ right:4%; }
}
@media (max-width:600px){
  .promo-shots{ height:230px; }
  .promo-seal{ width:74px; height:74px; font-size:9px; }
}
@media (prefers-reduced-motion:reduce){ .promo-pill .dot{ animation:none; } }

/* ---------- scroll-scrubbed proof animation ---------- */
.proof-track{ position:relative; background:var(--peach-soft); }
.proof-stage{
  position:sticky; top:0; min-height:100vh;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:56px; max-width:var(--wrap); margin:0 auto; padding:0 24px;
}
.proof-copy .step-no{
  font-family:var(--ff-head); font-size:12px; color:var(--rose);
  letter-spacing:.18em; margin-bottom:12px;
}
.proof-copy h2{ font-size:29px; margin-bottom:14px; }
.proof-copy p{ color:var(--teal-75); max-width:42ch; }
.proof-steps{ margin-top:26px; }
.proof-steps li{
  display:flex; gap:12px; align-items:baseline;
  padding:9px 0; font-size:14px; color:var(--teal-55);
  border-bottom:1px solid var(--teal-12);
  transition:color .35s var(--ease);
}
.proof-steps li b{
  font-family:var(--ff-head); font-weight:400; color:var(--teal-12);
  transition:color .35s var(--ease);
}
.proof-steps li.on{ color:var(--teal); }
.proof-steps li.on b{ color:var(--rose); }

.proof-art{ display:flex; align-items:center; justify-content:center; }
.proof-art svg{ width:min(94%,470px); height:auto; overflow:visible; }
/* the finished photo cross-fades over the drawn card at the end */
.proof-photo{
  position:absolute; inset:0; margin:auto;
  width:min(94%,470px); height:auto; aspect-ratio:1;
  object-fit:cover; opacity:0;
  box-shadow:0 22px 50px rgba(62,46,28,.18);
}
.proof-art{ position:relative; }

@media (max-width:1024px){
  .proof-stage{ grid-template-columns:1fr; gap:26px; padding:70px 20px; min-height:auto; position:static; }
  .proof-track{ height:auto !important; }
}
@media (prefers-reduced-motion:reduce){
  .proof-stage{ position:static; min-height:auto; padding:60px 24px; }
  .proof-track{ height:auto !important; }
}

/* ---------- personalisation feature ---------- */
.perso{ background:var(--peach); }
.perso-inner{
  max-width:var(--wrap); margin:0 auto; padding:64px 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.perso-inner img{ width:100%; aspect-ratio:1; object-fit:cover; }
.perso h2{ font-size:28px; margin-bottom:14px; }
.perso p{ color:var(--teal-75); margin-bottom:14px; max-width:46ch; }
.perso .steps{ margin:22px 0 26px; }
.perso .steps li{
  display:flex; gap:13px; padding:11px 0;
  border-bottom:1px solid var(--teal-12); font-size:14px;
}
/* --rose on the peach band lands at 4.09 — just under AA for small text,
   so the step numbers take the deeper clay (5.52) */
.perso .steps b{ font-family:var(--ff-head); color:var(--accent-deep); font-weight:400; }

/* ---------- client story ---------- */
.story-band{ background:var(--band); color:#fff; }
.story-inner{
  max-width:var(--wrap); margin:0 auto; padding:64px 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.story-inner img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.story-inner h2{ color:#fff; font-size:26px; }
.story-inner .kicker{ color:#EEC4B5; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:12px; }
.story-inner p{ color:rgba(255,255,255,.8); margin:14px 0 24px; }
.story-inner .btn-line{ border-color:#EEC4B5; color:#EEC4B5; }
.story-inner .btn-line:hover{ background:#EEC4B5; color:var(--band); }

/* ---------- custom CTA ---------- */
.custom-cta{ text-align:center; background:var(--peach-soft); }
.custom-cta h2{ font-size:28px; margin-bottom:12px; }
.custom-cta p{ color:var(--teal-75); max-width:52ch; margin:0 auto 26px; }

/* ---------- customer reviews ----------
   The client collects reviews as WhatsApp / Instagram messages, so the cards are
   shaped like message bubbles (asymmetric bottom-left corner) rather than the
   usual boxed testimonial. Reviewers are credited by occasion and city, never by
   name — same rule that removed the real babies' names from the rest of the site. */
.revs{ background:var(--paper); padding:72px 0 78px; }
.revs .sec-head{ margin-bottom:30px; }

.revs-score{
  display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap;
  padding-bottom:32px; margin-bottom:38px; border-bottom:1px solid var(--teal-12);
}
.revs-score .num{ font-family:var(--ff-head); font-size:40px; line-height:1; color:var(--teal); }
.revs-score .stars{ color:var(--rose); letter-spacing:3px; font-size:15px; }
.revs-score .cnt{ font-size:12.5px; color:var(--teal-55); margin-top:6px; }
.revs-score .sep{ width:1px; height:44px; background:var(--teal-12); }

/* instagram highlight pill — the reviews actually live in a story highlight */
.hl-pill{
  display:inline-flex; align-items:center; gap:13px; padding:7px 20px 7px 7px;
  border:1px solid var(--teal-12); border-radius:999px; background:var(--white);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.hl-pill:hover{ border-color:var(--rose); background:var(--peach-soft); transform:translateY(-2px); }
.hl-ring{
  width:46px; height:46px; border-radius:50%; padding:2px; flex:0 0 auto;
  background:conic-gradient(from 200deg,var(--rose),var(--gold),var(--peach),var(--rose));
}
.hl-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--white); }
.hl-pill .t{ font-size:13.5px; color:var(--teal); font-weight:500; display:flex; align-items:center; gap:6px; }
.hl-pill .t svg{ color:var(--rose); }
.hl-pill .s{ font-size:11px; color:var(--teal-55); margin-top:2px; }

.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.rev{
  position:relative; background:var(--white); border:1px solid var(--teal-12);
  border-radius:16px 16px 16px 3px; padding:26px 26px 20px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s var(--ease);
}
.rev:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(62,46,28,.07); border-color:var(--rose-soft); }
.rev .qm{
  position:absolute; top:12px; right:22px; font-family:var(--ff-head); font-size:60px;
  line-height:1; color:var(--peach); pointer-events:none; user-select:none;
}
.rev .stars{ color:var(--rose); letter-spacing:2px; font-size:12.5px; }
.rev p{ position:relative; color:var(--teal); font-size:14.5px; line-height:1.78; margin:12px 0 18px; }
.rev-meta{ display:flex; align-items:center; gap:11px; padding-top:15px; border-top:1px solid var(--teal-06); }
.rev-av{
  width:34px; height:34px; border-radius:50%; background:var(--peach-soft); color:var(--gold);
  display:grid; place-items:center; flex:0 0 auto;
}
.rev-meta .oc{ font-size:13px; color:var(--teal); }
.rev-meta .pl{ font-size:11.5px; color:var(--teal-55); margin-top:2px; }
.rev-ch{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-55);
}
.rev-ch svg{ color:var(--teal-55); }
.revs-note{ text-align:center; font-size:12px; color:var(--teal-55); margin-top:28px; }

@media (max-width:1024px){
  .rev-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .rev-grid{ grid-template-columns:1fr; }
  .revs-score{ gap:16px; }
  .revs-score .sep{ display:none; }
  .revs-score .num{ font-size:34px; }
}

/* ---------- instagram feed ---------- */
/* Material-style motion: standard curve, staggered entrance, tactile press */
.ig{ --m-ease:cubic-bezier(.4,0,.2,1); padding:64px 0 70px; background:var(--paper); }
.ig-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:26px; flex-wrap:wrap;
}
.ig-head h2{ font-size:26px; }
.ig-handle{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--rose); margin-top:6px;
}
.ig-follow{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--btn-bg); color:var(--btn-ink); padding:12px 24px; border-radius:var(--btn-radius);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  transition:background .25s var(--m-ease), transform .18s var(--m-ease), box-shadow .25s var(--m-ease);
}
.ig-follow:hover{ background:var(--rose); color:var(--on-accent); transform:translateY(-2px); box-shadow:0 8px 20px rgba(196,80,96,.28); }
.ig-follow:active{ transform:translateY(0) scale(.97); }

.ig-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.ig-cell{
  position:relative; overflow:hidden; aspect-ratio:1; display:block;
  background:var(--peach-soft);
  transition:opacity .5s var(--m-ease), transform .5s var(--m-ease);
}
.js-anim .ig-cell{ opacity:0; transform:translateY(16px) scale(.96); }
.js-anim .ig-cell.in{ opacity:1; transform:none; }
.ig-cell img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--m-ease);
}
.ig-cell:hover img{ transform:scale(1.08); }
.ig-cell .veil{
  position:absolute; inset:0;
  background:rgba(62,46,28,.52);
  display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:0;
  transition:opacity .28s var(--m-ease);
}
.ig-cell:hover .veil,.ig-cell:focus-visible .veil{ opacity:1; }
.ig-cell .veil svg{ transform:scale(.82); transition:transform .3s var(--m-ease); }
.ig-cell:hover .veil svg{ transform:scale(1); }

@media (max-width:1024px){ .ig-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .ig-grid{ grid-template-columns:repeat(2,1fr); gap:6px; } }
@media (prefers-reduced-motion:reduce){
  .ig-cell{ opacity:1; transform:none; }
}

/* ---------- newsletter ---------- */
.news{ text-align:center; padding:56px 0; }
.news h2{ font-size:24px; }
.news p{ color:var(--teal-75); font-size:14px; margin-top:8px; }
.news form{ display:flex; max-width:430px; margin:24px auto 0; border:1px solid var(--teal-12); background:#fff; background:var(--white); }
.news input{ flex:1; border:none; outline:none; padding:14px 16px; font-family:inherit; font-size:14px; color:var(--teal); background:transparent; }
.news input::placeholder{ color:var(--teal-55); }
.news button{ background:var(--btn-bg); color:var(--btn-ink); padding:14px 24px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.news button:hover{ background:var(--rose); color:var(--on-accent); }

/* ---------- footer ---------- */
.site-foot{ background:var(--foot-bg); color:rgba(255,255,255,.72); color:color-mix(in srgb, var(--foot-ink) 72%, transparent); padding:56px 0 26px; font-size:13px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.foot-grid h5{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--foot-head); margin-bottom:14px; }
.foot-grid a{ display:block; padding:4px 0; color:rgba(255,255,255,.72); color:color-mix(in srgb, var(--foot-ink) 72%, transparent); }
.foot-grid a:hover{ color:var(--foot-ink); }
.foot-brand .nm{ font-family:var(--ff-head); font-size:17px; color:var(--foot-ink); }
.foot-brand .tl{ font-family:var(--ff-head); font-style:italic; color:var(--foot-head); margin:12px 0; }
.foot-bot{
  border-top:1px solid rgba(255,255,255,.12); border-top-color:color-mix(in srgb, var(--foot-ink) 12%, transparent); margin-top:36px; padding-top:20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:12px; flex-wrap:wrap;
}
.socials{ display:flex; gap:10px; }
.socials a{
  width:32px; height:32px; border:1px solid rgba(255,255,255,.2); border-radius:50%;
  border-color:color-mix(in srgb, var(--foot-ink) 20%, transparent);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.75); color:color-mix(in srgb, var(--foot-ink) 75%, transparent);
}
.socials a:hover{ border-color:var(--foot-head); color:var(--foot-head); }

/* ---------- scroll reveal ----------
   Elements are VISIBLE by default. The hidden state is only applied once JS has
   confirmed it can run the observer (html.js-anim). If JS or IntersectionObserver
   ever fails, content still renders instead of staying invisible.            */
.rv{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js-anim .rv{ opacity:0; transform:translateY(22px); }
.js-anim .rv.in{ opacity:1; transform:none; }

/* Above-the-fold content animates on load, never via the observer —
   a reveal that waits for intersection can leave the hero blank. */
.intro{ opacity:0; transform:translateY(18px); animation:introIn .8s var(--ease) forwards; }
.intro-2{ animation-delay:.12s; }
@keyframes introIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .intro{ opacity:1; transform:none; animation:none; }
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .burger{ display:flex; }
  .head-top{ grid-template-columns:auto 1fr auto; padding:12px 18px; }
  .mainnav{ display:none; }
  body.nav-open .mainnav{
    display:block; position:fixed; inset:0; top:0; z-index:500;
    background:var(--paper); overflow-y:auto; padding:70px 20px 40px;
  }
  body.nav-open .mainnav ul{ flex-direction:column; align-items:stretch; gap:0; }
  body.nav-open .mainnav > ul > li{ border-bottom:1px solid var(--teal-12); }
  body.nav-open .mainnav a.top{ padding:15px 0; font-size:14px; justify-content:space-between; }
  .mega{ position:static; transform:none; opacity:1; pointer-events:auto;
    min-width:0; box-shadow:none; border:none; background:transparent;
    max-height:0; overflow:hidden; padding:0; transition:max-height .35s var(--ease); }
  li.open > .mega{ max-height:1400px; }
  .mega-inner, .mega-inner.no-feat{ grid-template-columns:1fr; gap:20px; padding:6px 0 14px; }
  .mega-col a{ font-size:14px; padding:9px 0; }
  .mega-feat{ grid-template-columns:1fr 1fr; gap:14px; }
  .mega-foot{ background:transparent; border-top:1px solid var(--teal-12); }
  .mega-foot .in{ padding:12px 0; flex-direction:column; align-items:flex-start; gap:10px; }
  .mega-scrim{ display:none; }
  .hero-inner,.perso-inner,.story-inner,.edito-inner{ grid-template-columns:1fr; gap:30px; padding:44px 20px; }
  .edito-inner.flip > :first-child{ order:0; }
  .hero-chip{ left:12px; }
  .hero-stack .main{ width:100%; }
  .hero-stack .inset{ width:40%; bottom:-20px; border-width:5px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .chooser{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .news form{ flex-direction:column; }
  .sec{ padding:44px 0; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}

/* ---------- brand vibe: the client's own craft language ----------
   Three things carry the brand and none of them were on the page before:
   the real bird-and-gift mark, the jute twine with wooden pegs that every
   box is built on, and the blush/gold of the logo itself. */

/* footer sits a shade deeper than body text so the two don't merge */
.site-foot{ background:var(--foot-bg); }

/* the mark, reused as the section ornament in place of a generic star */
.orn-mark{
  display:block; width:34px; height:auto; margin:0 auto 12px; opacity:.9;
}
.sec-head.left .orn-mark{ margin-left:0; }

/* jute twine with miniature clothespins — the single most identifying
   thing the client makes. Drawn in CSS so it costs nothing. */
.twine{
  position:relative; height:26px; margin:0 auto;
  max-width:var(--wrap); width:100%;
}
.twine::before{
  content:''; position:absolute; left:24px; right:24px; top:12px; height:2px;
  background:
    repeating-linear-gradient(90deg,
      var(--gold-lt) 0 5px, transparent 5px 8px);
  opacity:.55;
  border-radius:2px;
}
.twine i{
  position:absolute; top:4px; width:7px; height:17px; border-radius:2px;
  background:linear-gradient(180deg,#D8B98A,#C2A070);
  box-shadow:inset 0 0 0 1px rgba(62,46,28,.18);
}
.twine i::after{
  content:''; position:absolute; left:1px; right:1px; top:6px; height:1px;
  background:rgba(62,46,28,.22);
}
.twine i:nth-child(1){ left:18%; transform:rotate(-6deg); }
.twine i:nth-child(2){ left:42%; transform:rotate(4deg); }
.twine i:nth-child(3){ left:63%; transform:rotate(-3deg); }
.twine i:nth-child(4){ left:84%; transform:rotate(7deg); }

/* paper grain — her product is card stock, not glass */
.grain{ position:relative; }
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(132,97,33,.035) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(132,97,33,.03) 0 1px, transparent 1px),
    radial-gradient(circle at 45% 85%, rgba(132,97,33,.025) 0 1px, transparent 1px);
  background-size:37px 37px, 53px 53px, 29px 29px;
}

/* hero gets the blush wash the logo actually sits on */
.hero{ background:linear-gradient(170deg, var(--peach-soft) 0%, var(--paper) 62%); }

@media (prefers-reduced-motion:reduce){ .twine i{ transform:none; } }

/* ---------- brand watermark ----------
   The mark blown up and bled off an edge at a whisper of opacity, so a band
   reads like the client's own printed stationery. Rules that keep it from
   looking like a stock template: always LARGE and always CROPPED by the section
   edge (a small centred badge looks bought, not designed), always behind the
   content, and — the one that actually matters — only ever over EMPTY space.
   The footer was tried and dropped: all four of its columns are link lists, so
   the wash landed behind live text. The slight rotations are deliberate; the
   mark is hand-drawn, and a dead-square placement reads machine-made. */
.custom-cta, .perso, .story-band, .news, .ab-cta{ position:relative; overflow:hidden; }
.custom-cta::after, .perso::after, .story-band::after, .news::after, .ab-cta::after{
  content:''; position:absolute; pointer-events:none; z-index:0;
  background-repeat:no-repeat; background-size:contain;
  background-image:url('../images/brand/mark.webp');
}
.custom-cta > *, .perso > *, .story-band > *, .news > *, .ab-cta > *{ position:relative; z-index:1; }

/* off the left edge — the copy in these bands is centred, so the left is clear */
.custom-cta::after, .ab-cta::after{
  width:340px; height:528px; left:-96px; top:50%;
  transform:translateY(-50%) rotate(-8deg); opacity:.06;
}
/* into the empty corner beside the numbered steps */
.perso::after{
  width:380px; height:590px; right:-96px; bottom:-188px;
  transform:rotate(9deg); opacity:.07;
}
/* the dark band takes the cream cut of the mark */
.story-band::after{
  background-image:url('../images/brand/mark-cream.webp');
  width:430px; height:668px; left:-124px; bottom:-214px;
  transform:rotate(-11deg); opacity:.085;
}
/* newsletter sits on blush with a narrow centred form — both sides are clear */
.news::after{
  width:300px; height:466px; right:-72px; top:-124px;
  transform:rotate(11deg); opacity:.06;
}

@media (max-width:1024px){
  /* the bands stack and lose their empty columns, so the wash has nowhere safe
     to sit — pull it right back rather than let it drift under the copy */
  .custom-cta::after, .perso::after, .story-band::after, .news::after, .ab-cta::after{ opacity:.035; }
}
@media (max-width:600px){
  .custom-cta::after, .news::after, .ab-cta::after{ display:none; }
  .perso::after, .story-band::after{ opacity:.03; }
}

/* ---------- cart drawer + wishlist state ----------
   The drawer is injected by scripts/store.js so every page gets it
   without touching six files. */
.dw-scrim{
  position:fixed; inset:0; z-index:900; background:rgba(51,38,26,.42);
  opacity:0; transition:opacity .3s var(--ease);
}
body.dw-open .dw-scrim{ opacity:1; }
.dw{
  position:fixed; top:0; right:0; bottom:0; z-index:901;
  width:min(420px,100vw); background:var(--paper);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .36s var(--ease);
  box-shadow:-18px 0 50px rgba(51,38,26,.16);
}
.dw.in{ transform:none; }
.dw-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--teal-12); flex:0 0 auto;
}
.dw-head h2{ font-size:19px; }
.dw-x{ width:34px; height:34px; display:grid; place-items:center; color:var(--teal); border-radius:50%; }
.dw-x:hover{ background:var(--teal-06); color:var(--rose); }
.dw-body{ flex:1 1 auto; overflow-y:auto; padding:6px 22px; }

.dw-ln{
  display:grid; grid-template-columns:72px 1fr auto; gap:14px;
  padding:18px 0; border-bottom:1px solid var(--teal-06);
  align-items:start;            /* otherwise the figure stretches past the thumb */
}
.dw-ln figure{ width:72px; height:72px; background:var(--peach-soft); overflow:hidden; }
.dw-ln img{ width:72px; height:72px; object-fit:cover; }
.dw-cat{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--rose); }
.dw-ln h3{ font-size:14px; margin:3px 0 4px; line-height:1.35; }
.dw-unit{ font-size:12px; color:var(--teal-55); }
.dw-qty{ display:inline-flex; align-items:center; gap:2px; margin-top:9px; border:1px solid var(--teal-12); }
.dw-qty button{ width:26px; height:26px; font-size:14px; color:var(--teal); line-height:1; }
.dw-qty button:hover{ background:var(--peach-soft); color:var(--rose); }
.dw-qty span{ min-width:30px; text-align:center; font-size:13px; }
.dw-ln-end{ text-align:right; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; }
.dw-tot{ font-size:13.5px; font-weight:500; white-space:nowrap; }
.dw-rm{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-55);
  text-decoration:underline; text-underline-offset:3px;
}
.dw-rm:hover{ color:var(--rose); }

.dw-empty{ text-align:center; padding:56px 10px; }
.dw-empty img{ width:92px; height:auto; margin:0 auto 18px; opacity:.5; }
.dw-empty h3{ font-size:19px; margin-bottom:8px; }
.dw-empty p{ font-size:13.5px; color:var(--teal-75); max-width:30ch; margin:0 auto 22px; }

.dw-foot{ flex:0 0 auto; padding:18px 22px 22px; border-top:1px solid var(--teal-12); background:var(--peach-soft); }
.dw-sub{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; }
.dw-sub b{ font-family:var(--ff-head); font-size:19px; font-weight:400; }
.dw-note{ font-size:11.5px; color:var(--teal-55); margin:6px 0 14px; }
.dw-go{ display:block; text-align:center; width:100%; }
.dw-link{
  display:block; text-align:center; margin-top:12px; font-size:12px; color:var(--teal-75);
  text-decoration:underline; text-underline-offset:3px;
}
.dw-link:hover{ color:var(--rose); }

/* saved hearts fill in */
.wish.on{ color:var(--rose); border-color:var(--rose); }
.wish.on svg{ fill:var(--rose); }

/* the wishlist icon badge reuses the cart badge, but in the accent */
.icon-btn .badge[data-wish-count]{ background:var(--gold); }

/* toast */
.ls-toast{
  position:fixed; left:50%; bottom:26px; z-index:950;
  transform:translate(-50%,14px); opacity:0; pointer-events:none;
  background:var(--deep); color:#fff; font-size:13px;
  padding:11px 20px; border-radius:999px;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.ls-toast.in{ opacity:1; transform:translate(-50%,0); }

@media (max-width:600px){
  .dw{ width:100vw; }
  .dw-ln{ grid-template-columns:60px 1fr auto; gap:11px; }
  .dw-ln img{ width:60px; height:60px; }
}
@media (prefers-reduced-motion:reduce){
  .dw, .dw-scrim, .ls-toast{ transition:none; }
}

/* ---------- site search ---------- */
.sr-wrap{
  position:fixed; inset:0; z-index:940; background:rgba(51,38,26,.46);
  opacity:0; transition:opacity .26s var(--ease); padding:0 20px;
  display:flex; align-items:flex-start; justify-content:center;
}
.sr-wrap.in{ opacity:1; }
.sr-panel{
  width:min(700px,100%); margin-top:min(14vh,110px); background:var(--paper);
  transform:translateY(-12px); transition:transform .26s var(--ease);
  max-height:74vh; display:flex; flex-direction:column;
  box-shadow:0 26px 70px rgba(51,38,26,.22);
}
.sr-wrap.in .sr-panel{ transform:none; }
.sr-top{ display:flex; align-items:center; gap:13px; padding:17px 20px; border-bottom:1px solid var(--teal-12); flex:0 0 auto; }
.sr-top > svg{ color:var(--teal-55); flex:0 0 auto; }
.sr-top input{
  flex:1; border:none; outline:none; background:none; font-family:inherit;
  font-size:17px; color:var(--teal); padding:4px 0;
}
.sr-top input::placeholder{ color:var(--teal-55); }
.sr-top input::-webkit-search-cancel-button{ display:none; }
.sr-top button{ width:30px; height:30px; display:grid; place-items:center; color:var(--teal-55); border-radius:50%; }
.sr-top button:hover{ background:var(--teal-06); color:var(--rose); }
.sr-out{ overflow-y:auto; padding:6px 20px 22px; }
.sr-hint{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); margin:18px 0 10px; }
.sr-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sr-chips a, .sr-chips button{
  border:1px solid var(--teal-12); background:var(--white); padding:8px 14px;
  font-size:13px; color:var(--teal-75); font-family:inherit;
  transition:border-color .22s var(--ease), color .22s var(--ease);
}
.sr-chips a:hover, .sr-chips button:hover{ border-color:var(--rose); color:var(--rose); }
.sr-p{ display:flex; align-items:center; gap:13px; padding:10px 0; border-bottom:1px solid var(--teal-06); }
.sr-p:hover{ background:var(--peach-soft); }
.sr-p img{ width:48px; height:48px; object-fit:cover; background:var(--peach-soft); flex:0 0 auto; }
.sr-p span{ display:flex; flex-direction:column; gap:2px; }
.sr-p b{ font-size:14.5px; font-weight:400; color:var(--teal); }
.sr-p em{ font-style:normal; font-size:11.5px; color:var(--teal-55); }
.sr-price{ margin-left:auto; font-size:13.5px; color:var(--teal-75); white-space:nowrap; }
.sr-none{ padding:26px 0 10px; }
.sr-none p{ font-size:14px; color:var(--teal-75); line-height:1.8; margin-bottom:8px; }
.sr-none a{ color:var(--rose); text-decoration:underline; text-underline-offset:3px; }
body.sr-open{ overflow:hidden; }
@media (max-width:600px){ .sr-panel{ margin-top:0; max-height:100vh; height:100vh; } .sr-wrap{ padding:0; } }
@media (prefers-reduced-motion:reduce){ .sr-wrap, .sr-panel{ transition:none; } }

/* ---------- the [hidden] guard ----------
   A class rule that sets `display` beats the UA sheet's `[hidden]{display:none}`,
   so an element with the hidden attribute stays laid out and keeps swallowing
   clicks. The search overlay is position:fixed inset:0, which meant it was
   blocking every click on every page. Never remove these. */
.sr-wrap[hidden], .dw[hidden], .dw-scrim[hidden], .ac-panel[hidden],
.wl-bulk[hidden], .pager[hidden]{ display:none !important; }

/* ── cart feedback ───────────────────────────────────────────────────
   store.js talks to the server now, so an action can fail (offline,
   out of stock). A quiet line at the foot of the screen says so rather
   than leaving the customer guessing. */
.ls-toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,14px);
  background:var(--band); color:#fff; padding:12px 20px; border-radius:2px;
  font-size:13.5px; line-height:1.5; max-width:min(92vw,420px); z-index:9999;
  opacity:0; transition:opacity .25s var(--ease), transform .25s var(--ease);
  box-shadow:0 8px 30px rgba(62,46,28,.22);
}
.ls-toast.on{ opacity:1; transform:translate(-50%,0); }
.ls-toast.bad{ background:#A6584F; }

.dw-pers{ font-size:12px; color:var(--teal-55); margin-top:4px; line-height:1.6; }
.wish.on, .wish[aria-pressed="true"]{ color:var(--rose); }
.wish.on svg, .wish[aria-pressed="true"] svg{ fill:currentColor; }

@media (prefers-reduced-motion:reduce){ .ls-toast{ transition:none; } }

/* ── promotions in the cart and checkout (Phase 7) ─────────────── */
.code-block{ border-top:1px solid var(--teal-12); margin-top:12px; padding-top:16px; }
.code-block label{ display:block; font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--teal-55); margin-bottom:7px; }
.code-row{ display:flex; gap:8px; }
.code-row input{ flex:1; min-width:0; height:44px; padding:0 13px; border:1px solid var(--teal-12); background:var(--white); font-family:inherit; font-size:13.5px; color:var(--teal); text-transform:uppercase; transition:border-color .2s var(--ease); }
.code-row input::placeholder{ text-transform:none; }
.code-row input:focus{ outline:none; border-color:var(--rose); }
.code-row button{ height:44px; padding:0 20px; background:var(--btn-bg); color:var(--btn-ink); font-size:11px; letter-spacing:.11em; text-transform:uppercase; font-weight:500; transition:background .25s var(--ease); }
.code-row button:hover{ background:var(--rose); color:var(--on-accent); }
.code-msg{ font-size:12px; margin-top:8px; line-height:1.55; }
.code-msg:empty{ display:none; }
.code-msg.ok{ color:var(--rose); }
.code-msg.bad{ color:#A6584F; }
.code-on{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--peach-soft); padding:10px 12px; font-size:13px; color:var(--teal-75); }
.code-on b{ color:var(--teal); font-weight:600; letter-spacing:.04em; }
.code-on button{ font-size:11.5px; color:var(--rose); text-decoration:underline; text-underline-offset:3px; }
.free-gap{ margin-top:12px; font-size:12.5px; color:var(--teal-75); }
.free-gap .bar{ height:3px; background:var(--teal-06); margin-top:7px; overflow:hidden; }
.free-gap .bar span{ display:block; height:100%; background:var(--gold-lt); }
.tier-on{ display:inline-block; margin-left:6px; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-lt); padding:1px 6px; vertical-align:1px; }
.tier-hint{ font-size:12px; color:var(--teal-55); margin-top:3px; }

/* ── promo banner section ──────────────────────────────────────── */
.s-promo .pr-card{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; background:var(--white); border:1px solid var(--teal-12); overflow:hidden; }
.s-promo.t-dark .pr-card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); }
.s-promo .pr-card.no-img{ grid-template-columns:1fr; text-align:center; }
.s-promo .pr-copy{ padding:44px 46px; display:flex; flex-direction:column; justify-content:center; }
.s-promo .pr-card.no-img .pr-copy{ align-items:center; }
.s-promo .eyebrow{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose); margin-bottom:12px; }
.s-promo h2{ font-size:27px; }
.s-promo p{ color:var(--teal-75); font-size:14.5px; line-height:1.8; margin:12px 0 22px; max-width:46ch; }
.s-promo .pr-img{ min-height:280px; background:var(--peach-soft); }
.s-promo .pr-img img{ width:100%; height:100%; object-fit:cover; }
.s-promo .pr-card.img-left .pr-img{ order:-1; }
.s-promo .pr-note{ font-size:12px; color:var(--teal-55); margin-top:14px; }
.s-promo .pr-out{ font-size:12px; background:var(--sale); color:var(--on-accent); padding:5px 12px; display:inline-block; margin-bottom:10px; }
@media (max-width:860px){ .s-promo .pr-card{ grid-template-columns:1fr; } .s-promo .pr-card.img-left .pr-img{ order:0; } .s-promo .pr-copy{ padding:32px 26px; } }

/* scheduled announcement link */
.topbar a{ color:var(--bar-em); text-decoration:underline; text-underline-offset:3px; margin-left:6px; }

/* ── keyboard users (Phase 9) ── */
.skip-link{ position:absolute; left:12px; top:-60px; z-index:1000; background:var(--band); color:#fff; padding:10px 16px; font-size:13px; transition:top .15s; }
.skip-link:focus{ top:12px; }
#main:focus{ outline:none; }

/* ── floating WhatsApp (client request, Oct 2026) ── */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:80; display:flex; align-items:center; gap:9px; min-height:52px; padding:0 18px 0 14px; border-radius:999px; background:var(--wa); color:#fff; font-size:13px; letter-spacing:.02em; border:2px solid var(--paper); transition:transform .2s var(--ease), background .2s var(--ease); }
.wa-float:hover{ background:var(--wa-dk); color:#fff; transform:translateY(-2px); }
.wa-float:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }
body.dw-open .wa-float{ display:none; }
@media (max-width:600px){
  .wa-float{ right:14px; bottom:14px; width:54px; height:54px; padding:0; justify-content:center; }
  .wa-float .wa-lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}
@media print{ .wa-float{ display:none; } }

/* ── compact header (client review, Oct 2026: the logo block took too much of the screen) ── */
.site-head .head-top, .brand-lockup .mark, .brand-lockup .name{ transition:padding .25s var(--ease), width .25s var(--ease), font-size .25s var(--ease), margin .25s var(--ease); }
.site-head.compact .head-top{ padding-top:6px; padding-bottom:6px; }
.site-head.compact .brand-lockup .mark{ width:24px; margin-bottom:0; }
.site-head.compact .brand-lockup .name{ font-size:12px; margin-top:2px; }
.site-head.compact .brand-lockup .sub{ display:none; }
@media (max-width:1024px){
  .head-top{ padding-top:8px; padding-bottom:8px; }
  .brand-lockup .mark{ width:28px; }
  .brand-lockup .name{ font-size:12.5px; }
  .brand-lockup .sub{ display:none; }
  .topbar{ font-size:11px; padding:7px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}


/* Shop by category: six tiles sit 3 + 3, not 4 + 2; a category without photos yet gets a branded card */
.cat-grid.n3, .cat-grid.n6{ grid-template-columns:repeat(3,1fr); }
.cat-grid.n5{ grid-template-columns:repeat(5,1fr); }
.cat .cat-soon{ aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:var(--peach); }
.cat .cat-soon img{ width:22%; aspect-ratio:auto; height:auto; object-fit:contain; opacity:.85; }
.cat .cat-soon span{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
@media (max-width:1024px){ .cat-grid.n3, .cat-grid.n5, .cat-grid.n6{ grid-template-columns:repeat(2,1fr); } }

/* Client menu (Oct 2026): one list per group — a compact panel, not a full-width wall */
@media (min-width:1025px){
  .mega-inner[style*="--cols:1"]{ max-width:780px; grid-template-columns:minmax(0, 1fr) 1.7fr; }
  .mega-inner.no-feat[style*="--cols:1"]{ max-width:360px; grid-template-columns:1fr; }
}
/* Phone menu: a plain list of links under each group — no photos, no repeated headings */
@media (max-width:1024px){
  .mega-col h5, .mega-foot, .mega-feat{ display:none; }
  .mega-col:has(.mega-feat){ display:none; }
  .mega-inner, .mega-inner.no-feat{ padding:0 0 10px 12px; gap:0; }
  .mega-col a:not(.mega-card){ font-size:14px; padding:10px 0; border-bottom:1px solid var(--teal-06); }
}

/* ── phone menu: a panel from the left, like Floreal Invites (client, Oct 2026) ── */
.mdrawer{ position:fixed; inset:0; z-index:960; }
.mdrawer[hidden]{ display:none; }
.md-scrim{ position:absolute; inset:0; background:rgba(51,38,26,.42); opacity:0; transition:opacity .3s var(--ease); }
.md-panel{ position:absolute; top:0; bottom:0; left:0; width:min(86vw, 380px); background:var(--paper); display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .34s var(--ease); }
.mdrawer.in .md-scrim{ opacity:1; }
.mdrawer.in .md-panel{ transform:none; }
.md-head{ display:grid; grid-template-columns:44px 1fr 44px; align-items:center; padding:10px 10px 8px; border-bottom:1px solid var(--teal-12); }
.md-x{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--teal); background:none; border:0; cursor:pointer; }
.md-logo{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.md-logo img{ width:26px; height:auto; }
.md-logo span{ font-family:var(--ff-head); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.md-levels{ position:relative; flex:1; overflow:hidden; }
.md-list{ position:absolute; inset:0; overflow-y:auto; padding:8px 0 18px; background:var(--paper); transition:transform .3s var(--ease); }
.md-list[hidden]{ display:block; transform:translateX(100%); visibility:hidden; }
.md-list.away{ transform:translateX(-30%); }
.md-row{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; padding:0 22px;
  font:inherit; font-size:15px; letter-spacing:.02em; color:var(--teal); background:none; border:0; text-align:left; cursor:pointer; }
.md-row:hover, .md-row.here{ background:var(--peach-soft); }
.md-row svg{ color:var(--teal-55); flex:0 0 auto; }
.md-back{ display:flex; align-items:center; gap:10px; min-height:46px; padding:0 22px; font:inherit; font-size:13px; color:var(--teal-75); background:none; border:0; cursor:pointer; }
.md-title{ font-family:var(--ff-head); font-size:19px; color:var(--teal); padding:4px 22px 10px; border-bottom:1px solid var(--teal-12); margin-bottom:6px; }
.md-minor{ margin-top:10px; padding:12px 22px 0; border-top:1px solid var(--teal-12); display:grid; }
.md-minor a{ font-size:13.5px; color:var(--teal-75); padding:9px 0; }
.md-foot{ display:flex; gap:18px; flex-wrap:wrap; padding:14px 22px calc(16px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--teal-12); background:var(--peach-soft); }
.md-foot a{ font-size:12.5px; color:var(--teal-75); }
body.md-open{ overflow:hidden; }
@media (min-width:1025px){ .mdrawer{ display:none !important; } }
@media (prefers-reduced-motion:reduce){ .md-panel, .md-list, .md-scrim{ transition:none; } }

/* ── bottom tab bar for phones, as on the Mikash store ── */
.apptab{ display:none; }
@media (max-width:1024px){
  :root{ --apptab-h:60px; }
  @supports (padding-bottom: env(safe-area-inset-bottom)){ :root{ --apptab-h:calc(60px + env(safe-area-inset-bottom, 0px)); } }
  .apptab{ display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; left:0; right:0; bottom:0; z-index:900;
    height:60px; height:var(--apptab-h, 60px); padding-bottom:0; padding-bottom:env(safe-area-inset-bottom, 0px);
    background:var(--paper); border-top:1px solid var(--teal-12); }
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .apptab{ background:rgba(253,248,243,.95); background:color-mix(in srgb, var(--paper) 95%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  }
  .tb-item{ position:relative; display:grid; justify-items:center; align-content:center; gap:4px; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--teal-75); -webkit-tap-highlight-color:transparent; }
  .tb-item svg{ transition:transform .2s var(--ease); }
  .tb-item:active svg{ transform:scale(.88); }
  .tb-item::before{ content:''; position:absolute; top:0; left:50%; width:24px; height:2px; background:var(--rose); transform:translateX(-50%) scaleX(0); transition:transform .3s var(--ease); }
  .tb-item.on{ color:var(--rose); }
  .tb-item.on::before{ transform:translateX(-50%) scaleX(1); }
  .tb-wa{ color:var(--wa); }
  .tb-icon{ position:relative; display:inline-grid; }
  .tb-badge{ position:absolute; top:-6px; right:-10px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--rose); color:var(--on-accent);
    font-size:9.5px; font-weight:600; line-height:17px; text-align:center; letter-spacing:0; }
  body.has-tabbar{ padding-bottom:60px; padding-bottom:var(--apptab-h, 60px); }
  body.has-tabbar .wa-float{ display:none; }      /* WhatsApp is in the bar on phones */
  body.has-tabbar .ls-toast{ bottom:calc(var(--apptab-h) + 14px); }
  body.has-tabbar .mainnav{ display:none !important; }   /* the drawer replaces the old phone menu */
}

/* Compact dropdowns (client, Oct 2026): a group with one list opens as a card under its
   own menu item, not as a full-width white panel. */
@media (min-width:1025px){
  .mainnav > ul > li.drop{ position:relative; }
  .mainnav li.drop > .mega{ left:50%; right:auto; top:calc(100% - 4px); border:1px solid var(--teal-12); border-radius:2px;
    transform:translate(-50%, -6px); box-shadow:0 22px 44px -18px rgba(62,46,28,.28); }
  .mainnav li.drop:hover > .mega, .mainnav li.drop:focus-within > .mega{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
  .mainnav li.drop-slim > .mega{ width:270px; }
  .mainnav li.drop-wide > .mega{ width:620px; }
  .mainnav li.drop .mega-inner, .mainnav li.drop .mega-inner.no-feat{ max-width:none; padding:22px 24px 20px; gap:26px; }
  .mainnav li.drop-slim .mega-inner{ grid-template-columns:1fr; }
  .mainnav li.drop-wide .mega-inner{ grid-template-columns:minmax(0, .9fr) 1.6fr; }
  .mainnav li.drop .mega-col h5{ margin-bottom:6px; }
  .mainnav li.drop .mega-col a:not(.mega-card){ padding:8px 0; }
  .mainnav li.drop .mega-foot{ display:none; }
  /* a dropdown near the right edge opens leftwards so it never runs off screen */
  .mainnav > ul > li.drop:nth-last-child(-n+3) > .mega{ left:auto; right:-24px; transform:translateY(-6px); }
  .mainnav > ul > li.drop:nth-last-child(-n+3):hover > .mega{ transform:none; }
  body.mega-open .mega-scrim{ opacity:.35; }
}
.drop-note{ margin-top:12px; padding-top:12px; border-top:1px solid var(--teal-12); font-size:12px; color:var(--teal-55); line-height:1.6; }
.drop-note a{ color:var(--rose); text-decoration:underline; text-underline-offset:3px; display:inline !important; padding:0 !important; }

/* Small phones (320–360px): the header row must fit. Account is in the bottom bar and
   Wishlist in the menu drawer, so on phones the header keeps only search and the cart. */
@media (max-width:1024px){
  .head-icons.right .icon-btn[aria-label="Account"], .head-icons.right .icon-btn[aria-label="Wishlist"]{ display:none; }
  .head-top{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; padding-left:12px; padding-right:12px; }
  .head-icons{ gap:0; }
}
@media (max-width:360px){
  .brand-lockup .name{ font-size:11.5px; letter-spacing:.1em; }
  .icon-btn{ width:36px; height:36px; }
  .apptab .tb-item{ font-size:8.5px; letter-spacing:.06em; }
}

/* Phones: product card price and minimum each on one clean line, never broken mid-number */
.prod .price{ flex-wrap:wrap; row-gap:2px; }
.prod .price > span{ white-space:nowrap; }
@media (max-width:600px){
  .prod h3{ font-size:14px; }
  .prod .price{ font-size:12.5px; flex-direction:column; align-items:flex-start; gap:1px; }
  .prod .price .mt{ font-size:11px; color:var(--teal-55); }
  /* product page: quantity box and Add to cart share the row without the label wrapping */
  .buyrow{ flex-wrap:nowrap; gap:8px; }
  .buyrow .stepper button{ width:38px; }
  .buyrow .stepper input{ width:48px; }
  .buyrow .btn-solid{ flex:1 1 auto; min-width:0; white-space:nowrap; padding-left:12px; padding-right:12px; letter-spacing:.12em; }
  .tiles .tile{ padding:10px 6px; }
  .tile .q{ font-size:14px; }
}