/* ==========================================================================
   Mega Silk — "shop" theme: the beautyboxjo.com look
   Loads AFTER mega.css and overrides it. Remove this file + the MS_THEME
   flag from the pages to go back to the editorial design.
   ========================================================================== */
:root{
  --bg:#FFFFFF; --fg:#111111; --muted:#5B5B5B; --faint:#9A9A9A; --card:#F6F6F6; --line:#E6E6E6;
  --gold:#9A7147; --gold-lt:#E2CDAF; --gold-pale:#EEDFCB; --white:#FFFFFF;
  --pink:#E2CDAF; --pink-strong:#9A7147; /* the old pink slots now carry sand-300 / kraft-600 */ --band:#F2F2F2; --sale:#111111;
  --display:"Cairo","Instrument Sans",system-ui,sans-serif;
  --ui:"Cairo","Instrument Sans",system-ui,sans-serif;
  --tint:#FFFFFF; --sheet:#FFFFFF; --sheet-edge:transparent;
}
:root[data-theme="dark"], :root:not([data-theme="light"]){ --tint:#FFFFFF; --sheet:#FFFFFF; }
html{ scroll-behavior:smooth; }
body{ background:#fff !important; color:var(--fg); font-family:var(--ui); font-size:15px; }
body::before, body::after, .scatter{ display:none !important; }

/* no sheet, no frame */
.sheet{ max-width:none; margin:0; border:0; box-shadow:none; background:transparent; animation:none; }
.sheet > section{ padding-inline:0; }
.wrap{ max-width:1320px; padding:0 20px; }
section{ padding:26px 0; }
.ruled::after{ display:none; }

/* ---------- announcement bar ---------- */
.ticker{ background:#fff; border-block-end:1px solid var(--line); padding:7px 0; }
.ticker span{ font-family:var(--ui); font-weight:500; font-size:12.5px; letter-spacing:0; color:#222; animation-duration:26s; }

/* ---------- header ---------- */
.mast{ background:#fff; border-block-end:1px solid var(--line); box-shadow:none; }
.mast .wrap{ flex-wrap:wrap; min-height:0; padding-block:12px; gap:18px; }
.mast.is-stuck .wrap{ min-height:0; }
.logo{ font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-.01em; color:#111; order:1; }
.logo small{ display:none; }
.logo::after{ display:none; }
.logo b, .logo em{ color:var(--pink-strong); font-style:normal; }
.search{ order:2; flex:1 1 380px; display:flex; max-width:640px; }
.search input{ flex:1; border:1px solid #DADADA; border-radius:8px 0 0 8px; padding:11px 14px; font-size:14px; font-family:var(--ui); }
html[dir="rtl"] .search input{ border-radius:0 8px 8px 0; }
.search button{ border:0; background:var(--pink); color:#111; width:46px; border-radius:0 8px 8px 0; cursor:pointer; display:grid; place-items:center; }
html[dir="rtl"] .search button{ border-radius:8px 0 0 8px; }
.search button svg{ width:16px; height:16px; stroke:#111; fill:none; stroke-width:2; }
.acts{ order:3; gap:16px; }
button.t, a.t, .ico{ border:0; padding:4px 2px; font-size:13px; letter-spacing:0; text-transform:none; font-weight:600; color:#111; background:none; }
button.t::before, a.t::before{ display:none; }
button.t:hover, a.t:hover{ color:var(--pink-strong); }
button.t[aria-pressed="true"]{ color:var(--pink-strong); }
.ic{ width:22px; height:22px; stroke-width:1.8; }
.t-ico .count{ background:var(--pink-strong); color:#fff; border:0; top:-6px; inset-inline-end:-8px; min-width:17px; height:17px; font-size:10px; }
.hdr-lbl{ display:flex; flex-direction:column; line-height:1.15; }
.hdr-lbl small{ font-size:11px; color:var(--muted); font-weight:500; }
.hdr-lbl b{ font-size:13px; font-weight:700; }
.cart-total{ font-size:13px; font-weight:700; }
/* category row */
.nav{ order:4; flex-basis:100%; margin:0; gap:2px; border-block-start:1px solid var(--line); padding-block-start:8px; }
.nav a{ font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; padding:8px 12px; color:#111; }
.nav a::after{ display:none; }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--pink-strong); background:none; }
.nav .allcats{ font-weight:700; padding-inline-start:0; }
.nav .allcats::before{ content:"\2261"; margin-inline-end:8px; font-size:18px; vertical-align:-2px; }
.burger{ display:none; }
@media(max-width:940px){ .nav{ position:static; width:auto; height:auto; transform:none; border:0; padding:0; flex-direction:row; overflow:auto; background:none; } .nav a{ font-family:var(--ui); font-size:13px; padding:8px 10px; white-space:nowrap; } .scrim{ display:none; } }
.prog{ display:none; }

/* ---------- section titles ---------- */
.sec-head{ display:block; margin-block-end:16px; }
.sec-head h2, .shop-title{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:0; margin:0; color:#111; }
.sec-head h2 .g, .g{ color:inherit; font-style:normal; }
.sec-num, .pill{ display:none; }
.sec-head .note{ font-size:13px; margin-top:4px; }
.band-title{ background:var(--band); border-radius:14px; text-align:center; padding:18px 10px; margin-block-end:24px; }
.band-title h2{ font-family:var(--display); font-weight:700; font-size:20px; margin:0 0 10px; }
.band-title .arrows{ display:flex; gap:8px; justify-content:center; }
.band-title .arrows button, .row-next{ width:34px; height:34px; border:0; border-radius:8px; background:var(--pink); color:#fff; cursor:pointer; font-size:16px; display:grid; place-items:center; }
.see-all{ display:block; text-align:center; margin:16px auto 0; font-size:13px; font-weight:600; color:#111; text-decoration:underline; }

/* ---------- hero slider ---------- */
.slider{ position:relative; overflow:hidden; aspect-ratio:1400/470; max-height:500px; border-radius:12px; margin-block-start:14px; background:#F6EEE3; }
@media(max-width:700px){ .slider{ aspect-ratio:1/1; max-height:none; } }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:0 clamp(16px,6vw,80px); gap:24px; }
.slide.on{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide .copy{ position:relative; z-index:1; }
.slide .copy h2{ font-family:var(--display); font-weight:800; font-size:clamp(24px,3.4vw,44px); line-height:1.05; margin:0 0 10px; color:#111; }
.slide .copy p{ font-size:clamp(13px,1.4vw,17px); font-weight:500; margin:0 0 16px; color:#333; }
.slide .copy .btn{ padding:12px 26px; }
.slide.pic{ display:block; padding:0; }
.slide.pic .copy{ position:absolute; inset-inline-start:clamp(16px,6vw,80px); top:50%; transform:translateY(-50%); max-width:46%; }
.slide.pic::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.75) 40%,rgba(255,255,255,0) 70%); z-index:1; }
html[dir="rtl"] .slide.pic::before{ background:linear-gradient(270deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.75) 40%,rgba(255,255,255,0) 70%); }
.dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:7px; z-index:2; margin:0; }
.dots button{ width:9px; height:9px; border-radius:50%; border:0; background:rgba(0,0,0,.25); cursor:pointer; padding:0; transition:width .3s; }
.dots button[aria-pressed="true"]{ background:#111; width:26px; border-radius:6px; }
.slider .arr{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.85); cursor:pointer; font-size:18px; }
.slider .arr.prev{ inset-inline-start:10px; } .slider .arr.next{ inset-inline-end:10px; }

.slide.split{ grid-template-columns:1.05fr .95fr; grid-template-rows:minmax(0,1fr); gap:0; padding:0; background:#F6EEE3; }
/* the same photo, blurred, fills the banner behind the real one */
.slide.split::before{ content:""; position:absolute; inset:-30px; background:var(--bg) center/cover; filter:blur(26px) saturate(1.05); opacity:.6; z-index:0; }
.slide.split::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(246,238,227,.92) 0%,rgba(246,238,227,.6) 48%,rgba(246,238,227,0) 70%); z-index:0; }
html[dir="rtl"] .slide.split::after{ background:linear-gradient(270deg,rgba(246,238,227,.92) 0%,rgba(246,238,227,.6) 48%,rgba(246,238,227,0) 70%); }
.slide.split .copy, .slide.split img{ position:relative; z-index:1; }
.slide.split img{ max-height:100%; min-height:0; justify-self:center; filter:drop-shadow(0 14px 28px rgba(0,0,0,.18)); }
.slide.split .copy{ padding:0 clamp(16px,5vw,64px); }
.slide.split img{ height:100%; width:auto; max-width:100%; object-fit:contain; object-position:center; padding:14px 0; }
@media(max-width:700px){ .slide.split{ grid-template-columns:1fr; grid-template-rows:auto 1fr; } .slide.split .copy{ padding:18px 18px 6px; } .slide.split .copy h2{ font-size:22px; } .slide.split img{ object-fit:contain; } }

/* a portrait ad photo: shown whole, the banner sides filled by a blurred copy */
.slide.fit{ display:block; padding:0; background:#F2E6D8; }
.slide.fit::before{ display:none; }
.slide.fit .bg{ position:absolute; inset:-40px; width:auto; height:auto; min-width:120%; min-height:120%; object-fit:cover; object-position:50% 40%; filter:blur(34px) brightness(1.04); opacity:.75; }
.slide.fit .main{ position:absolute; inset:0; margin:auto; height:100%; width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 16px 30px rgba(0,0,0,.22)); }
.slide.fit .copy{ position:absolute; inset-inline-end:clamp(16px,6vw,80px); bottom:clamp(16px,5vw,40px); top:auto; transform:none; max-width:none; z-index:2; }
@media(max-width:700px){ .slide.fit .main{ width:100%; height:auto; object-fit:cover; object-position:50% 30%; } .slide.fit .copy{ inset-inline-end:14px; bottom:14px; } }

/* ---------- hero: product showcase ---------- */
.stage{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(20px,4vw,56px); min-height:440px;
  padding:clamp(22px,3.4vw,44px) clamp(20px,3.6vw,56px); margin-block-start:16px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(154,113,71,.14); border-radius:18px; box-shadow:0 24px 50px -36px rgba(154,113,71,.45); }
.stage-show{ padding-block-end:36px; }
.stage-copy .eyebrow{ display:inline-block; font-size:12px; font-weight:700; color:var(--pink-strong); background:var(--gold-pale); border-radius:999px; padding:6px 12px; margin-block-end:14px; }
.stage-copy h1{ font-family:var(--display); font-weight:800; font-size:clamp(34px,4.6vw,60px); line-height:1.04; letter-spacing:-.015em; margin:0 0 14px; color:#111; }
.stage-copy p{ font-size:16px; color:#444; max-width:46ch; margin:0 0 22px; }
.stage-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.stage-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; padding:0; margin:26px 0 0; font-size:12.5px; font-weight:600; color:#333; }
.stage-chips li::before{ content:"\2713"; color:var(--pink-strong); margin-inline-end:6px; font-weight:800; }
.stage-copy > *{ opacity:0; transform:translateY(14px); animation:rise .7s ease forwards; }
.stage-copy > :nth-child(2){ animation-delay:.08s; } .stage-copy > :nth-child(3){ animation-delay:.16s; }
.stage-copy > :nth-child(4){ animation-delay:.24s; } .stage-copy > :nth-child(5){ animation-delay:.32s; }

.stage-show{ position:relative; aspect-ratio:1; max-width:520px; margin-inline:auto; width:100%; }
.disc{ position:absolute; inset:6%; border-radius:50%; background:radial-gradient(circle at 35% 30%, #EEDFCB 0%, #E2CDAF 60%, #D2B58F 100%); animation:breathe 6s ease-in-out infinite alternate; }
.disc::after{ content:""; position:absolute; inset:-9%; border-radius:50%; border:1.5px dashed rgba(154,113,71,.35); animation:spin 40s linear infinite; }
@keyframes breathe{ to{ transform:scale(1.035); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
.show-items{ position:absolute; inset:14%; }
.show-item{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:scale(.72) rotate(-10deg); filter:drop-shadow(0 26px 32px rgba(0,0,0,.22));
  transition:opacity .55s ease, transform .65s cubic-bezier(.2,.9,.3,1.2); }
.show-item.on{ opacity:1; transform:scale(1) rotate(0); animation:bob 5s ease-in-out .7s infinite alternate; }
.show-item.out{ transform:scale(.78) rotate(12deg); }
.show-tag{ position:absolute; inset-inline-end:2%; top:10%; background:#fff; border-radius:12px; padding:10px 14px; box-shadow:0 12px 30px -14px rgba(0,0,0,.35); text-decoration:none; color:#111; display:grid; gap:2px; min-width:150px; }
.show-tag b{ font-size:13.5px; } .show-tag span{ font-size:14px; font-weight:800; color:var(--pink-strong); }
.show-tag.pop{ animation:tagpop .45s ease; }
@keyframes tagpop{ 0%{ transform:translateY(8px); opacity:0; } 100%{ transform:none; opacity:1; } }
.show-thumbs{ position:absolute; inset-inline:0; bottom:-6px; display:flex; justify-content:center; gap:8px; }
.show-thumbs button{ width:52px; height:52px; border-radius:50%; border:2px solid transparent; background:#fff; padding:6px; cursor:pointer; box-shadow:0 6px 18px -8px rgba(0,0,0,.3); transition:transform .25s, border-color .25s; }
.show-thumbs button img{ width:100%; height:100%; object-fit:contain; }
.show-thumbs button:hover{ transform:translateY(-3px); }
.show-thumbs button[aria-pressed="true"]{ border-color:var(--pink-strong); }
@media(max-width:860px){ .stage{ grid-template-columns:1fr; min-height:0; } .stage-show{ max-width:380px; } }
@media (prefers-reduced-motion: reduce){ .disc, .disc::after, .show-item.on, .stage-copy > *{ animation:none; } .stage-copy > *{ opacity:1; transform:none; } }

/* ---------- category circles ---------- */
.cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:18px; border:0; }
@media(max-width:600px){ .cats{ grid-template-columns:repeat(3,1fr); } }
.cat{ border:0; padding:0; text-align:center; }
.cat:hover{ background:none; }
.cat-shot{ width:min(100%,120px); aspect-ratio:1; margin:0 auto 12px; border-radius:50%; background:var(--band); overflow:hidden; padding:12px; }
.cat-shot img{ object-fit:contain; mix-blend-mode:multiply; transition:transform .4s; }
.cat:hover .cat-shot img{ transform:scale(1.06); }
.cat h3{ font-family:var(--ui); font-weight:700; font-size:14.5px; margin:0; }
.cat p{ display:none; }

/* ---------- product cards ---------- */
.pgrid, .pgrid.four{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; border:0; }
@media(max-width:1100px){ .pgrid, .pgrid.four{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:820px){ .pgrid, .pgrid.four{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .pgrid, .pgrid.four{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.pcard{ border:0; padding:0; position:relative; transition:none; opacity:1 !important; transform:none !important; }
.pcard:hover{ background:none; transform:none !important; }
.pshot{ aspect-ratio:1; background:#fff; border:1px solid #F0F0F0; border-radius:6px; margin-block-end:10px; }
.pshot img{ object-fit:contain; padding:6%; }
.pcard:hover .pshot img{ transform:none; }
.tagit{ position:absolute; top:10px; inset-inline-start:10px; z-index:2; background:var(--sale); color:#fff; font-size:11px; font-weight:700; letter-spacing:0; text-transform:none; padding:4px 9px; border-radius:4px; margin:0; display:inline-block; }
.tagit:empty, .tagit.blank{ display:none; }
.tagit.new{ background:var(--pink-strong); }
.tagit.sold{ background:#777; }
.pcard h3{ font-family:var(--ui); font-weight:700; font-size:14px; line-height:1.35; margin:0 0 4px; min-height:2.7em; }
.pcard h3::after{ display:none; }
.pcard .code{ display:none; }
.pcard .dots{ position:static; justify-content:flex-start; gap:5px; margin:0 0 6px; min-height:12px; }
.pcard .dots .dot{ width:12px; height:12px; border:1px solid #ddd; }
.pcard .price{ font-family:var(--ui); font-weight:800; font-size:15px; color:#111; margin:0; padding:0; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.pcard .price .from{ font-weight:600; font-size:12px; color:var(--muted); }
.was{ font-size:12px; color:#9A9A9A; text-decoration:line-through; font-weight:500; margin:0; }
.add{ display:block; width:100%; margin-block-start:12px; border:0; border-radius:8px; background:var(--pink); color:#111; font-family:var(--ui); font-weight:700; font-size:13px; padding:11px; cursor:pointer; text-align:center; text-decoration:none; transition:background .2s; }
.add:hover{ background:#CDAB7F; }
.add.opts::before{ content:"+ "; }
.pcard .pshot img.is-in{ opacity:1; }

/* ---------- promo banner ---------- */
.promo{ position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:24px; background:var(--gold-pale); border-radius:12px; overflow:hidden; min-height:220px; padding:clamp(16px,4vw,48px); }
.promo img{ width:100%; max-height:300px; object-fit:contain; mix-blend-mode:multiply; }
.promo h2{ font-family:var(--display); font-weight:800; font-size:clamp(26px,4vw,48px); margin:0 0 8px; letter-spacing:-.01em; }
.promo p{ margin:0 0 16px; font-weight:500; }
.promo .tag{ display:inline-block; background:var(--pink-strong); color:#fff; border-radius:999px; padding:8px 18px; font-weight:800; font-size:18px; transform:rotate(-6deg); margin-block-end:12px; }
@media(max-width:700px){ .promo{ grid-template-columns:1fr; text-align:center; } }

/* the certificate photo is portrait: show it whole, as a framed card */
.promo .cert-img{ width:auto; height:auto; max-width:100%; max-height:420px; object-fit:contain; mix-blend-mode:normal; justify-self:center;
  border-radius:12px; box-shadow:0 20px 40px -24px rgba(0,0,0,.35); border:6px solid #fff; }
.promo:hover .cert-img{ transform:scale(1.02) rotate(0); }
@media(max-width:700px){ .promo .cert-img{ max-height:360px; } }

/* ---------- buttons ---------- */
.btn{ border:0; border-radius:8px; background:var(--pink); color:#111; font-family:var(--ui); font-weight:700; letter-spacing:0; text-transform:none; font-size:14px; padding:13px 26px; }
.btn::before{ display:none; }
.btn:hover{ background:#CDAB7F; color:#111; }
.btn-solid{ background:var(--pink-strong); color:#fff; }
.btn-solid:hover{ background:#6B4A30; color:#fff; }
.chip{ border-radius:999px; text-transform:none; letter-spacing:0; font-weight:600; font-size:13px; }
.chip[aria-pressed="true"]{ background:#111; border-color:#111; }
.lnk{ font-weight:600; }
.lnk::after{ background:var(--pink-strong); }

/* ---------- panels / forms ---------- */
.panel{ background:#fff; border:1px solid var(--line); border-radius:12px; }
input, select, textarea{ border-radius:8px; font-family:var(--ui); }
label{ letter-spacing:0; text-transform:none; font-size:13px; font-weight:600; color:#333; }
.paycard{ border-radius:12px; }
.status{ letter-spacing:0; text-transform:none; font-weight:600; }

/* ---------- footer ---------- */
footer.site{ background:#F7F7F7; border:0; margin-block-start:36px; }
.fgrid h4{ font-family:var(--ui); font-weight:800; font-size:14px; letter-spacing:0; text-transform:none; }
.fgrid a{ font-size:13.5px; }
.fbot{ border-block-start:1px solid #E6E6E6; }

/* hero/editorial leftovers are not used in this theme */
.orb, .flyer, .fly-zone, .stage-card{ display:none !important; }
@media (prefers-reduced-motion: reduce){ .slide{ transition:none; } }

/* ==========================================================================
   Motion pack — her products moving. transform/opacity only.
   ========================================================================== */

/* 1. floating products over the hero, parallax on mouse ------------------- */
.floaters{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.floater{ position:absolute; width:var(--w,110px); will-change:transform; filter:drop-shadow(0 16px 24px rgba(0,0,0,.18));
  animation:bob var(--d,7s) ease-in-out infinite alternate; animation-delay:var(--delay,0s); pointer-events:auto; cursor:pointer; }
.floater img{ width:100%; display:block; transition:transform .35s ease; }
.floater:hover img{ transform:scale(1.12) rotate(-6deg); }
@keyframes bob{ from{ translate:0 0; rotate:-4deg; } to{ translate:0 -18px; rotate:5deg; } }
@media(max-width:900px){ .floaters{ display:none; } }

/* 2. gliding product strip --------------------------------------------- */
.glide{ overflow:hidden; border-block:1px solid var(--line); padding:18px 0; background:#fff; }
.glide-track{ display:flex; gap:48px; width:max-content; animation:glide 38s linear infinite; }
.glide:hover .glide-track{ animation-play-state:paused; }
html[dir="rtl"] .glide-track{ animation-direction:reverse; }
@keyframes glide{ to{ transform:translateX(-50%); } }
.glide a{ display:flex; align-items:center; gap:14px; text-decoration:none; color:#111; font-weight:700; font-size:14px; white-space:nowrap; }
.glide img{ width:84px; height:84px; object-fit:contain; transition:transform .35s ease; }
.glide a:hover img{ transform:scale(1.15) rotate(-5deg); }
.glide small{ display:block; color:var(--muted); font-weight:500; font-size:12px; }

/* 3. cards: lift, alternate photo, button slides up ------------------------ */
.pcard{ transition:transform .35s ease, box-shadow .35s ease !important; border-radius:10px; padding:6px; }
.pcard:hover{ transform:translateY(-6px) !important; box-shadow:0 18px 40px -22px rgba(0,0,0,.35); }
.pshot{ position:relative; }
.pshot img.alt{ position:absolute; inset:0; opacity:0; transition:opacity .4s ease; }
.pcard:hover .pshot img.alt{ opacity:1; }
.pcard .add{ transform:translateY(6px); opacity:.92; transition:transform .3s ease, opacity .3s ease, background .2s; }
.pcard:hover .add{ transform:none; opacity:1; }
.tagit{ transition:transform .3s ease; }
.pcard:hover .tagit{ transform:scale(1.08) rotate(-3deg); }

/* 4. fly to cart ---------------------------------------------------------- */
.fly{ position:fixed; z-index:999; width:70px; height:70px; object-fit:contain; border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); pointer-events:none;
  transition:transform .8s cubic-bezier(.4,-.1,.2,1), opacity .8s ease; }
#cartlink .ic{ transition:transform .3s ease; }
#cartlink.is-hit .ic{ transform:scale(1.35) rotate(-10deg); }
#cartlink.is-hit .count{ animation:count-pop .45s ease; }

/* 5. slow zoom on the active slide ---------------------------------------- */
.slide img{ transform:scale(1); }
.slide.on img{ animation:kenburns 7s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.slide .copy > *{ opacity:0; transform:translateY(14px); }
.slide.on .copy > *{ animation:rise .7s ease forwards; }
.slide.on .copy > :nth-child(2){ animation-delay:.12s; }
.slide.on .copy > :nth-child(3){ animation-delay:.24s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* 6. rows reveal as you reach them ---------------------------------------- */
.pgrid .pcard{ opacity:0 !important; transform:translateY(18px) !important; }
.in .pgrid .pcard{ opacity:1 !important; transform:none !important; }
.in .pgrid .pcard:hover{ transform:translateY(-6px) !important; }
.in .pgrid .pcard:nth-child(2){ transition-delay:.06s; } .in .pgrid .pcard:nth-child(3){ transition-delay:.12s; }
.in .pgrid .pcard:nth-child(4){ transition-delay:.18s; } .in .pgrid .pcard:nth-child(5){ transition-delay:.24s; }
.cat-shot{ transition:transform .35s ease, box-shadow .35s ease; }
.cat:hover .cat-shot{ transform:translateY(-6px) scale(1.04); box-shadow:0 16px 30px -18px rgba(0,0,0,.35); }
.promo img{ transition:transform .6s ease; }
.promo:hover img{ transform:scale(1.04) rotate(-2deg); }

@media (prefers-reduced-motion: reduce){
  .floater, .glide-track, .slide.on img, .slide.on .copy > *, .pcard, .fly{ animation:none !important; transition:none !important; }
  .slide .copy > *{ opacity:1; transform:none; }
  .pgrid .pcard{ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   Background: soft aurora in the brand pinks, drifting slowly behind the page
   ========================================================================== */
body{ background:linear-gradient(160deg,#EEDFCB 0%,#F6EEE3 38%,#FBF7F1 70%,#F2E8DB 100%) !important; }
.aurora{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.aurora::after{ content:""; position:absolute; inset:0; opacity:.07;
  background:repeating-linear-gradient(-28deg, transparent 0 22px, #6B4A30 22px 23px, transparent 23px 60px); }
.aurora i{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.9; will-change:transform; }
.aurora .a1{ width:60vw; height:60vw; background:#DCC4A4; top:-22vw; inset-inline-start:-18vw; animation:drift1 26s ease-in-out infinite alternate; }
.aurora .a2{ width:52vw; height:52vw; background:#E8CDB3; bottom:-20vw; inset-inline-end:-16vw; animation:drift2 32s ease-in-out infinite alternate; }
.aurora .a3{ width:36vw; height:36vw; background:#EADFD0; top:38%; inset-inline-start:42%; opacity:.75; animation:drift3 38s ease-in-out infinite alternate; }
@keyframes drift1{ to{ transform:translate(12vw,10vh) scale(1.12); } }
@keyframes drift2{ to{ transform:translate(-10vw,-12vh) scale(1.18); } }
@keyframes drift3{ to{ transform:translate(-8vw,6vh) scale(.9); } }
/* content sits on white and lifts off the wash */
.mast{ background:rgba(255,255,255,.86); backdrop-filter:blur(10px); }
.ticker{ background:#fff; }
.pcard, .promo, .panel, .band-title, .glide{ background:#fff; }
.pcard{ box-shadow:0 10px 30px -22px rgba(154,113,71,.35); }
.band-title{ background:rgba(255,255,255,.7); border:1px solid rgba(154,113,71,.12); }
.cat-shot{ background:#fff; box-shadow:0 10px 24px -14px rgba(154,113,71,.45); border:1px solid rgba(154,113,71,.12); }
.glide{ border-radius:14px; border:1px solid rgba(154,113,71,.12); }
.stage-show .disc{ box-shadow:0 30px 60px -30px rgba(154,113,71,.5); }
footer.site{ background:rgba(255,255,255,.6); }
@media (prefers-reduced-motion: reduce){ .aurora i{ animation:none; } }

/* hover-swap image must stay hidden until hover — the generic fade-in rule
   (.pcard .pshot img.is-in) was out-ranking .pshot img.alt and showing photo 2
   on every card permanently. */
.pcard .pshot img.alt, .pcard .pshot img.alt.is-in{ opacity:0; }
.pcard:hover .pshot img.alt.is-in{ opacity:1; }

/* ---------- hero: package on the disc, product on hover ---------------------
   Each slot holds two photos of the same item: the package it ships in, and
   the product itself. Hovering the photo swaps one for the other. The hover
   area is the photo box only, so the disc, the price tag and the thumbnails
   underneath never trigger it. */
.show-items{ cursor:pointer; }
.show-item{ margin:0; }
.show-item > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .4s ease, transform .55s cubic-bezier(.2,.9,.3,1.1); }
.show-item .pk{ opacity:1; transform:scale(1); }
.show-item .pd{ opacity:0; transform:scale(.88); }
.stage-show.open .show-item.on .pk{ opacity:0; transform:scale(.92); }
.stage-show.open .show-item.on .pd{ opacity:1; transform:scale(1); }

.show-hint{ position:absolute; top:0; inset-inline-start:0; z-index:4; display:inline-block;
  background:rgba(255,255,255,.92); border-radius:999px; padding:6px 13px;
  font-family:var(--ui); font-size:11.5px; font-weight:600; letter-spacing:.02em; color:#7A5A3C;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.4); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.stage-show.open .show-hint{ opacity:0; transform:translateY(-6px); }
@media (hover:none){ .show-hint{ display:none; } }
@media (prefers-reduced-motion: reduce){ .show-item > img{ transition:none; } }

/* ---------- contact page tiles ----------------------------------------------
   The contact page reuses the category-tile markup, but here the detail line
   (number, address, handle) is the whole point, so it is shown, not hidden. */
.contact-tiles{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.contact-tiles .cat{ display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px;
  text-align:start; text-decoration:none; color:var(--fg); transition:box-shadow .25s ease, transform .25s ease; }
.contact-tiles .cat:hover{ background:#fff; transform:translateY(-3px); box-shadow:0 16px 30px -20px rgba(0,0,0,.35); }
.contact-tiles .cat .emo{ display:block; font-size:24px; margin-block-end:10px; }
.contact-tiles .cat h3{ font-size:13px; font-weight:600; color:var(--muted); margin:0 0 4px; }
.contact-tiles .cat p{ display:block; margin:0; font-size:16px; font-weight:700; color:var(--pink-strong); overflow-wrap:anywhere; }
.contact-tiles .cat p{ text-transform:none; letter-spacing:0; }
/* the two payment lines inside a panel: a plain list, not the four-column strip */
.panel .steps{ display:flex; flex-direction:column; gap:12px; border:0; margin-block-start:0; }
.panel .step{ border:0; padding:0; width:auto; }

/* ---------- the wordmark ---------- */
.logo img{ height:46px; width:auto; display:block; }
.mast.is-stuck .logo img{ height:40px; }
footer.site .logo img{ height:38px; }
@media(max-width:600px){ .logo img{ height:38px; } }

/* ---------- beige ground (the colour of her boxes), logo a size up ---------- */
body{ background:linear-gradient(160deg,#EFE2D0 0%,#F6EDE1 40%,#F8F1E7 70%,#F2E6D8 100%) !important; }
.aurora .a1{ background:#E8CDB3; }      /* kraft */
.aurora .a2{ background:#F3DCCB; }      /* sand */
.aurora .a3{ background:#EFE2D0; }      /* a whisper of the brand pink */
.logo img{ height:64px; }
.mast.is-stuck .logo img{ height:52px; }
footer.site .logo img{ height:52px; }
@media(max-width:600px){ .logo img{ height:50px; } }

/* ---------- shop page closer: the night routine ---------- */
.promo.night{ background:linear-gradient(135deg,#EEDFCB 0%,#F6EEE3 55%,#FBF7F1 100%); min-height:300px; }
.promo.night .tag{ background:#111; }
.promo.night p{ max-width:46ch; }
.promo.night .stage-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.promo.night .trio{ position:relative; height:300px; }
.promo.night .trio img{ position:absolute; max-height:none; width:auto; mix-blend-mode:normal;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.18)); transition:transform .5s ease; }
.promo.night .t1{ height:230px; inset-inline-start:0; bottom:10px; transform:rotate(-6deg); }
.promo.night .t2{ height:180px; inset-inline-end:4%; top:0; transform:rotate(8deg); }
.promo.night .t3{ height:120px; inset-inline-end:14%; bottom:0; transform:rotate(-12deg); }
.promo.night:hover .t1{ transform:rotate(-4deg) translateY(-6px); }
.promo.night:hover .t2{ transform:rotate(6deg) translateY(-8px); }
.promo.night:hover .t3{ transform:rotate(-8deg) translateY(-6px); }
@media(max-width:700px){ .promo.night .trio{ height:220px; } .promo.night .t1{ height:170px; } .promo.night .t2{ height:130px; } .promo.night .t3{ height:90px; } }

/* ---------- three rituals (homepage) ---------- */
.rituals{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:860px){ .rituals{ grid-template-columns:1fr; } }
.ritual{ position:relative; display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px 22px;
  text-decoration:none; color:var(--fg); overflow:hidden; min-height:300px; transition:transform .3s ease, box-shadow .3s ease; }
.ritual:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -26px rgba(0,0,0,.35); }
.ritual img{ position:absolute; inset-inline-end:-18px; top:-10px; width:150px; height:150px; object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.16)); transform:rotate(12deg); transition:transform .5s ease; }
.ritual:hover img{ transform:rotate(4deg) scale(1.06); }
.ritual .num{ display:inline-block; font-weight:800; font-size:12px; letter-spacing:.14em; color:var(--pink-strong); margin-block-end:54px; }
.ritual h3{ font-family:var(--ui); font-weight:800; font-size:21px; margin:0 0 10px; max-width:12ch; }
.ritual p{ margin:0 0 18px; font-size:14px; line-height:1.6; color:#444; max-width:34ch; }
.ritual .go{ font-weight:700; font-size:13.5px; color:var(--pink-strong); }

/* ---------- product page: why you'll love it + details ---------- */
.why{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:9px; }
.why li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; }
.why li::before{ content:"✓"; flex:none; width:20px; height:20px; border-radius:50%; background:var(--pink); color:#111; font-size:11px; font-weight:800; display:grid; place-items:center; margin-top:2px; }
.specs{ display:grid; grid-template-columns:130px 1fr; gap:8px 14px; margin:0; font-size:13.5px; }
.specs dt{ color:var(--muted); font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding-top:2px; }
.specs dd{ margin:0; }

/* ---------- beige levels: the one solid button reads as the deepest level ---------- */
.btn-solid, .btn.btn-solid{ background:#9A7147; color:#fff; border-color:#9A7147; }
.btn-solid:hover, .btn.btn-solid:hover{ background:#6B4A30; border-color:#6B4A30; color:#fff; }
.add{ background:#E2CDAF; color:#171310; }
.add:hover{ background:#CDAB7F; }
.promo .tag{ background:#6B4A30; color:#fff; }
.ritual .num, .ritual .go, .contact-tiles .cat p{ color:#9A7147; }

/* footer: three columns now that the payment column is gone */
.fgrid{ grid-template-columns:2fr 1fr 1fr; }
@media(max-width:860px){ .fgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .fgrid{ grid-template-columns:1fr; } }

/* hero: the product sits on a plain white disc */
.disc{ background:#fff; }
.stage-show .disc{ box-shadow:0 30px 60px -30px rgba(107,74,48,.35); }

/* ==========================================================================
   About page
   ========================================================================== */
.ab-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px); border-radius:18px; padding:clamp(22px,4vw,56px); margin-block:18px 0; }
.ab-copy h1{ font-family:var(--display); font-weight:800; font-size:clamp(34px,5vw,60px); line-height:1.05; letter-spacing:-.02em; margin:12px 0 18px; }
.ab-copy p{ font-size:16px; line-height:1.7; color:#333; max-width:52ch; margin:0 0 22px; }
.ab-copy .stage-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-block-end:22px; }
.ab-photo{ margin:0; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(107,74,48,.45); aspect-ratio:4/5; }
.ab-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:860px){ .ab-hero{ grid-template-columns:1fr; } .ab-photo{ order:-1; max-height:70vh; aspect-ratio:auto; } }

.ab-quote{ margin:0 auto; max-width:60ch; text-align:center; padding:clamp(20px,4vw,44px) 0; }
.ab-quote p{ font-family:var(--display); font-weight:700; font-size:clamp(22px,3vw,34px); line-height:1.3; letter-spacing:-.01em; margin:0 0 14px; color:#171310; }
.ab-quote cite{ font-style:normal; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#9A7147; font-weight:700; }

.ab-beliefs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:860px){ .ab-beliefs{ grid-template-columns:1fr; } }
.belief{ position:relative; display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px 22px; overflow:hidden;
  text-decoration:none; color:var(--fg); min-height:320px; transition:transform .3s ease, box-shadow .3s ease; }
.belief:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -26px rgba(0,0,0,.35); }
.belief img{ position:absolute; inset-inline-end:-16px; top:-8px; width:140px; height:140px; object-fit:contain; transform:rotate(10deg);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.16)); transition:transform .5s ease; }
.belief:hover img{ transform:rotate(3deg) scale(1.06); }
.belief blockquote{ margin:70px 0 18px; font-size:15px; line-height:1.6; color:#333; max-width:30ch; }
.belief h3{ font-family:var(--ui); font-weight:800; font-size:17px; margin:0 0 6px; }
.belief .go{ font-weight:700; font-size:13.5px; color:#9A7147; }

.ab-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:260px; gap:14px; margin-block:8px 0; }
@media(max-width:860px){ .ab-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:220px; } }
.ab-tile{ margin:0; border-radius:14px; overflow:hidden; background:#fff; }
.ab-tile.tall{ grid-row:span 2; }
.ab-tile img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .6s ease; }
.ab-tile:hover img{ transform:scale(1.03); }
.ab-tile.stat{ background:#6B4A30; color:#fff; padding:26px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; }
.ab-tile.stat b{ font-family:var(--display); font-weight:800; font-size:48px; line-height:1; }
.ab-tile.stat span{ font-size:14px; line-height:1.5; opacity:.92; }

.ab-how{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:clamp(22px,3vw,40px); }
@media(max-width:860px){ .ab-how{ grid-template-columns:1fr; } }
.ab-how h2{ font-family:var(--ui); font-weight:800; font-size:19px; margin:0 0 8px; }
.ab-how p{ margin:0; font-size:14.5px; line-height:1.65; color:#444; }

.ab-close h2{ font-size:clamp(22px,3vw,34px); line-height:1.3; max-width:24ch; }
/* about photo grid: tall portrait left, two photos top-right, the stat spans beneath them */
.ab-grid{ grid-template-columns:repeat(3,1fr); }
.ab-tile.stat{ grid-column:span 2; }
.ab-tile.stat b{ color:#F3DCCB; }
.ab-tile.stat span{ color:#fff; }
@media(max-width:860px){ .ab-grid{ grid-template-columns:1fr 1fr; } .ab-tile.stat{ grid-column:span 2; } }
.ab-tile.stat span{ text-transform:none; letter-spacing:0; font-size:15px; }

/* about, second cut: the photos shown whole, nothing cropped */
.ab-head{ text-align:center; max-width:60ch; margin:18px auto 0; padding:clamp(22px,4vw,44px) 20px 10px; }
.ab-head h1{ font-family:var(--display); font-weight:800; font-size:clamp(34px,5vw,58px); line-height:1.05; letter-spacing:-.02em; margin:12px 0 14px; }
.ab-head p{ font-size:16.5px; line-height:1.6; color:#333; margin:0 0 18px; }
.ab-head .stage-chips{ justify-content:center; }
.ab-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:860px){ .ab-gallery{ grid-template-columns:1fr 1fr; } }
.ab-gallery figure{ margin:0; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 20px 40px -30px rgba(107,74,48,.4); }
.ab-gallery img{ width:100%; height:auto; display:block; transition:transform .6s ease; }
.ab-gallery figure:hover img{ transform:scale(1.02); }

/* about, third cut: the Instagram facts */
.ab-copy .lead{ font-size:16px; line-height:1.7; color:#333; max-width:52ch; margin:0 0 22px; }
.ab-brands{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:760px){ .ab-brands{ grid-template-columns:1fr; } }
.ab-brand{ display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 24px 20px; text-decoration:none; color:var(--fg);
  transition:transform .3s ease, box-shadow .3s ease; }
.ab-brand:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -26px rgba(0,0,0,.35); }
.ab-brand .ig{ display:inline-block; font-weight:700; font-size:12.5px; color:#9A7147; letter-spacing:.02em; margin-block-end:8px; }
.ab-brand h3{ font-family:var(--ui); font-weight:800; font-size:22px; margin:0 0 8px; }
.ab-brand p{ margin:0 0 16px; font-size:14.5px; line-height:1.6; color:#444; }
.ab-brand .nums{ display:flex; gap:6px 10px; align-items:baseline; flex-wrap:wrap; margin-block-end:14px; }
.ab-brand .nums b{ font-family:var(--display); font-weight:800; font-size:26px; line-height:1; }
.ab-brand .nums span{ font-size:12.5px; color:var(--muted); margin-inline-end:10px; }
.ab-brand .go{ font-weight:700; font-size:13.5px; color:#9A7147; }
.ab-ig{ background:#6B4A30; color:#fff; padding:24px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.ab-ig .eyebrow{ background:rgba(255,255,255,.14); color:#fff; }
.ab-ig .hl{ display:flex; flex-wrap:wrap; gap:8px; }
.ab-ig .hl a{ display:inline-block; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:7px 13px; font-size:13px; font-weight:600; color:#fff; text-decoration:none; transition:background .2s; }
.ab-ig .hl a:hover{ background:rgba(255,255,255,.14); }
.ab-ig .note{ color:rgba(255,255,255,.85); font-size:13px; margin:0; }
.ab-gallery .ab-ig{ background:#6B4A30; }
/* about: the site's own three lines, large */
.ab-lines{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:clamp(26px,4vw,48px); display:grid; gap:10px; }
.ab-lines p{ margin:0; font-family:var(--display); font-weight:800; font-size:clamp(24px,3.6vw,40px); line-height:1.15; letter-spacing:-.015em; color:#171310; }
.ab-lines p:nth-child(2){ color:#9A7147; }
.ab-lines p:nth-child(3){ color:#6B4A30; }
.howto{ margin:0; padding-inline-start:22px; display:grid; gap:8px; font-size:14px; line-height:1.55; }

/* ==========================================================================
   Scroll story — the stage sticks while the page scrolls past it
   ========================================================================== */
.story{ position:relative; height:420vh; margin-block:10px 0; }
.story-pin{ position:sticky; top:0; height:100vh; display:grid; grid-template-rows:auto 1fr auto auto; align-items:center;
  padding:calc(96px + 2vh) clamp(16px,4vw,48px) 4vh; box-sizing:border-box; overflow:hidden;
  background:rgba(255,255,255,.72); backdrop-filter:blur(12px); border-radius:18px; }
.story-head{ text-align:center; }
.story-title{ font-family:var(--display); font-weight:800; font-size:clamp(26px,4.2vw,50px); line-height:1.08; letter-spacing:-.02em; margin:0 0 6px; transition:opacity .2s; }
.story-sub{ margin:0; color:var(--muted); font-size:15px; transition:opacity .2s; }
.story-stage{ display:grid; grid-template-columns:1fr minmax(240px,min(56vh,520px)) 1fr; gap:clamp(12px,3vw,40px); align-items:center; min-height:0; }
.story-vis{ position:relative; aspect-ratio:1; width:100%; max-height:56vh; margin-inline:auto; }
.story-vis::before{ content:""; position:absolute; inset:4%; border-radius:50%; background:#fff; box-shadow:0 30px 60px -30px rgba(107,74,48,.35); }
.story-vis::after{ content:""; position:absolute; inset:-3%; border-radius:50%; border:1.5px dashed rgba(154,113,71,.35); }
.story-vis .sc{ position:absolute; inset:12%; margin:0; opacity:0; will-change:transform,opacity; filter:drop-shadow(0 26px 32px rgba(0,0,0,.2)); }
.story-vis .sc > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; will-change:transform; }
.story-vis .pk-top{ clip-path:inset(0 0 50% 0); z-index:1; }
.story-vis .pk-bot{ clip-path:inset(50% 0 0 0); z-index:3; }
.story-vis .pd{ z-index:2; opacity:0; }
.story-notes{ list-style:none; margin:0; padding:0; display:grid; gap:14px; opacity:0; will-change:transform,opacity; }
.story-notes li{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-weight:600; font-size:14px; line-height:1.45; box-shadow:0 12px 24px -18px rgba(0,0,0,.3); }
.story-notes.left li{ margin-inline-start:auto; max-width:26ch; text-align:end; }
.story-notes.right li{ max-width:26ch; }
.story-cta{ text-align:center; opacity:0; transition:opacity .2s; }
.story-hint{ text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:opacity .3s; }
.story-hint::after{ content:"↓"; display:block; animation:storyhint 1.4s ease-in-out infinite; }
@keyframes storyhint{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@media(max-width:860px){
  .story{ height:380vh; }
  .story-pin{ padding-top:calc(120px + 1vh); grid-template-rows:auto 1fr auto auto auto; }
  .story-stage{ grid-template-columns:1fr; gap:10px; }
  .story-vis{ max-height:38vh; }
  .story-notes{ grid-template-columns:1fr 1fr; gap:8px; }
  .story-notes li{ font-size:12.5px; padding:9px 11px; max-width:none; text-align:start; margin:0; }
  .story-notes.left{ order:2; } .story-notes.right{ order:3; }
}
@media (prefers-reduced-motion: reduce){ .story{ height:auto; } .story-pin{ position:static; height:auto; min-height:80vh; } .story-hint{ display:none; } }

/* ---------- scroll story, dressed up: it is now the first thing on the page ---------- */
.story{ margin-block:14px 0; --glow:#E8CDB3; }
/* the stage pins just under the sticky header (its height is measured into --mast-h) */
.story-pin{ position:sticky; top:var(--mast-h,160px); height:calc(100vh - var(--mast-h,160px)); padding-top:3vh; background:rgba(255,255,255,.78); }
.story-count{ top:3vh; }
.story{ height:320vh; }
@media(max-width:860px){ .story{ height:300vh; } .story-pin{ padding-top:2vh; } .story-count{ top:2vh; } }
.story-glow{ position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(60% 50% at 50% 56%, var(--glow) 0%, rgba(255,255,255,0) 70%); opacity:.55; transition:background .6s ease; }
.story-head, .story-stage, .story-cta, .story-hint, .story-count, .story-dots{ position:relative; z-index:1; }
.story-vis{ transition:transform .2s linear; }
.story-vis::after{ animation:spin 60s linear infinite; }
/* little silk sparkles drifting up */
.story-spark{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.story-spark i{ position:absolute; bottom:-10px; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px rgba(255,255,255,.9), 0 0 2px 1px rgba(154,113,71,.35); opacity:0; animation:spark 9s linear infinite; }
.story-spark i:nth-child(1){ left:8%;  animation-delay:0s;   animation-duration:11s; }
.story-spark i:nth-child(2){ left:19%; animation-delay:2s;   width:4px; height:4px; }
.story-spark i:nth-child(3){ left:31%; animation-delay:5s;   animation-duration:13s; }
.story-spark i:nth-child(4){ left:44%; animation-delay:1s;   width:3px; height:3px; animation-duration:8s; }
.story-spark i:nth-child(5){ left:58%; animation-delay:4s; }
.story-spark i:nth-child(6){ left:69%; animation-delay:7s;   width:5px; height:5px; animation-duration:12s; }
.story-spark i:nth-child(7){ left:81%; animation-delay:3s;   animation-duration:10s; }
.story-spark i:nth-child(8){ left:92%; animation-delay:6s;   width:4px; height:4px; }
@keyframes spark{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 12%{ opacity:.9; } 70%{ opacity:.7; } 100%{ transform:translateY(-105vh) scale(1.1); opacity:0; } }
/* 01 ——— 03 counter with a progress bar */
.story-count{ position:absolute; top:calc(96px + 2vh); inset-inline-start:clamp(16px,4vw,48px); display:flex; align-items:center; gap:10px;
  font-family:var(--ui); font-weight:800; font-size:12px; letter-spacing:.14em; color:#9A7147; }
.story-count .bar{ display:block; width:90px; height:2px; background:rgba(154,113,71,.22); border-radius:2px; overflow:hidden; }
.story-count .bar b{ display:block; height:100%; background:#9A7147; transform-origin:0 50%; transform:scaleX(0); }
html[dir="rtl"] .story-count .bar b{ transform-origin:100% 50%; }
/* scene dots on the right edge */
.story-dots{ position:absolute; top:50%; inset-inline-end:clamp(12px,2.5vw,28px); transform:translateY(-50%); list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.story-dots button{ width:12px; height:12px; border-radius:50%; border:2px solid #9A7147; background:transparent; padding:0; cursor:pointer; transition:transform .25s, background .25s; }
.story-dots button[aria-current="true"]{ background:#9A7147; transform:scale(1.25); }
/* price chip + two buttons */
.story-cta{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.story-price{ font-family:var(--display); font-weight:800; font-size:22px; color:#9A7147; margin-inline-end:6px; }
/* callouts get a kraft tick */
.story-notes li{ position:relative; padding-inline-start:34px; }
.story-notes li::before{ content:"✓"; position:absolute; inset-inline-start:12px; top:11px; width:16px; height:16px; border-radius:50%; background:#E2CDAF; color:#171310; font-size:10px; font-weight:800; display:grid; place-items:center; }
.story-notes.left li{ padding-inline-start:34px; padding-inline-end:14px; text-align:start; }
.story-hint{ display:flex; flex-direction:column; align-items:center; gap:2px; }
@media(max-width:860px){ .story-count{ top:calc(120px + 1vh); } .story-dots{ display:none; } .story-spark i:nth-child(n+5){ display:none; } }
@media (prefers-reduced-motion: reduce){ .story-spark, .story-vis::after{ animation:none; } .story-spark{ display:none; } }
/* phones: the real visible height, not the one behind the browser toolbars */
@supports (height:100dvh){ .story-pin{ height:calc(100dvh - var(--mast-h,160px)); } }
.story-vis .sc{ filter:drop-shadow(0 30px 34px rgba(107,74,48,.28)); }

/* ---------- cards: the button sits on the same line in every card ----------
   Names wrap to one or two lines and some cards have no colour dots, so the
   card is a column that stretches to the row and pushes the button to its
   bottom edge; the name and price keep fixed heights. */
.pgrid{ align-items:stretch; }
.pcard{ display:flex; flex-direction:column; height:100%; }
.pcard > a:first-of-type{ display:block; }
.pcard h3{ min-height:2.7em; max-height:2.7em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pcard .dots{ min-height:14px; }
.pcard .price{ min-height:22px; }
.pcard .add{ margin-block-start:auto; padding-block:11px; }
.pcard .price + .add{ margin-block-start:auto; }
.pcard .add.opts, .pcard .add{ box-sizing:border-box; min-height:42px; display:flex; align-items:center; justify-content:center; }
/* about gallery: three photos now, no dark tile */
.ab-gallery{ grid-template-columns:repeat(3,1fr); }
@media(max-width:860px){ .ab-gallery{ grid-template-columns:1fr 1fr; } }

/* ---------- contact page: photo + three ways to reach her | the form ---------- */
.ct-grid{ display:grid; grid-template-columns:minmax(300px,420px) 1fr; gap:22px; align-items:start; }
@media(max-width:900px){ .ct-grid{ grid-template-columns:1fr; } }
.ct-side{ display:grid; gap:12px; }
.ct-photo{ margin:0; border-radius:14px; overflow:hidden; aspect-ratio:5/4; box-shadow:0 24px 50px -32px rgba(107,74,48,.5); }
.ct-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
.ct-tile{ display:grid; grid-template-columns:48px 1fr auto; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  text-decoration:none; color:var(--fg); transition:transform .25s ease, box-shadow .25s ease, border-color .25s; }
.ct-tile:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -24px rgba(0,0,0,.35); border-color:#E2CDAF; }
.ct-tile .ic{ width:48px; height:48px; border-radius:50%; background:#F6EEE3; display:grid; place-items:center; font-size:22px; }
.ct-tile .tx{ display:grid; gap:1px; min-width:0; }
.ct-tile .tx b{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.ct-tile .tx > span{ font-weight:800; font-size:16px; color:#9A7147; overflow-wrap:anywhere; }
.ct-tile .tx small{ font-size:12.5px; color:#555; }
.ct-tile .arr{ color:#9A7147; font-weight:800; font-size:18px; transition:transform .25s; }
.ct-tile:hover .arr{ transform:translateX(4px); }
html[dir="rtl"] .ct-tile .arr{ transform:scaleX(-1); } html[dir="rtl"] .ct-tile:hover .arr{ transform:scaleX(-1) translateX(4px); }
.ct-form{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:clamp(20px,3vw,34px); }
.ct-form h3{ font-family:var(--ui) !important; font-weight:800 !important; font-size:24px !important; }
.ct-form .form{ display:grid; gap:14px; }
.ct-form .btn{ width:100%; padding-block:13px; }
.ct-photo img{ object-position:center 55%; }

/* nothing may widen the page sideways (clip, not hidden: clip keeps position:sticky working) */
html, body{ overflow-x:clip; }

/* about gallery: one photo is 3:4 and the others 4:5, which left a white strip under the shorter two — box them all at 4:5 */
.ab-gallery figure{ aspect-ratio:4/5; background:#F6EEE3; }
.ab-gallery img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }

/* ==========================================================================
   Phone layout (≤ 640px): same site, laid out for a thumb — real text size,
   no zooming. Header: logo + icons on one row, search below, menu scrolls.
   ========================================================================== */
@media (max-width:640px){
  .mast .wrap{ gap:10px 12px; padding-block:10px; align-items:center; }
  .logo{ order:1; } .logo img{ height:40px; }
  .acts{ order:2; margin-inline-start:auto; gap:12px; }
  .acts .hdr-lbl{ display:none; }                          /* icons only; the labels return on wider screens */
  .acts button.t#lang{ font-size:13px; }
  .search{ order:3; flex:1 1 100%; max-width:none; }
  .search input{ padding:10px 12px; font-size:16px; }      /* 16px stops iOS zooming into the field */
  nav.nav{ order:4; flex:1 1 100%; display:flex; gap:18px; overflow-x:auto; white-space:nowrap; padding-block:2px 4px; margin:0; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  nav.nav::-webkit-scrollbar{ display:none; }
  nav.nav a{ flex:none; font-size:14px; }
  .wrap{ padding-inline:14px; }
  .sheet > section{ padding-inline:0; }
  /* scroll story */
  .story{ height:240vh; margin-block-start:6px; }
  .story-pin{ padding:1.5vh 14px 2vh; border-radius:12px; grid-template-rows:auto 1fr auto auto auto; }
  .story-title{ font-size:clamp(22px,7vw,30px); }
  .story-sub{ font-size:13px; }
  .story-count{ position:static; justify-content:center; margin-block:2px 4px; }
  .story-vis{ max-height:34vh; }
  .story-notes{ grid-template-columns:1fr 1fr; gap:6px; }
  .story-notes li{ font-size:12px; padding:8px 10px 8px 30px; }
  .story-notes li::before{ inset-inline-start:9px; top:9px; width:14px; height:14px; font-size:9px; }
  .story-cta{ gap:8px; } .story-cta .btn{ padding:10px 14px; font-size:13px; } .story-price{ font-size:18px; width:100%; text-align:center; margin:0; }
  .story-hint{ font-size:10px; }
  /* hero */
  .stage{ padding:18px 14px 22px; }
  .stage-copy h1{ font-size:clamp(28px,8.5vw,36px); }
  .stage-show{ max-width:320px; }
  .show-thumbs button{ width:44px; height:44px; }
  /* bands, grids, cards */
  .band-title{ padding:14px 10px; } .band-title h2{ font-size:20px; }
  .cats{ gap:12px; } .cat h3{ font-size:13px; }
  .pgrid, .pgrid.four{ grid-template-columns:1fr 1fr; gap:10px; }
  .pcard h3{ font-size:13px; }
  .pcard .add{ font-size:12px; padding:9px; min-height:38px; }
  .shop-title{ font-size:20px; }
  .promo{ padding:18px 16px; gap:14px; } .promo h2{ font-size:24px; } .promo .tag{ font-size:14px; padding:6px 12px; }
  .promo.night .trio{ height:200px; }
  .ritual{ min-height:0; padding:22px 18px 18px; } .ritual img{ width:110px; height:110px; }
  .ritual .num{ margin-block-end:34px; }
  /* product page */
  .pdp{ grid-template-columns:1fr; gap:18px; }
  .pinfo h1{ font-size:26px; }
  .gal .strip{ grid-template-columns:repeat(5,1fr); gap:8px; }
  .why li{ font-size:13.5px; }
  .specs{ grid-template-columns:110px 1fr; }
  /* cart / checkout / account / contact */
  .split{ grid-template-columns:1fr; gap:16px; }
  .panel.sticky{ position:static; }
  .ct-photo{ aspect-ratio:4/3; }
  /* about */
  .ab-hero{ padding:16px 14px 20px; } .ab-copy h1{ font-size:clamp(28px,8.5vw,36px); }
  .ab-quote p{ font-size:clamp(18px,5.6vw,24px); }
  .ab-brands{ gap:12px; } .ab-brand h3{ font-size:19px; }
  .ab-gallery{ grid-template-columns:1fr 1fr; gap:10px; }
  .ab-gallery figure:first-child{ grid-column:span 2; aspect-ratio:4/3; }
  .ab-lines p{ font-size:clamp(20px,6.2vw,28px); }
  .contact-tiles{ grid-template-columns:1fr; gap:10px; }
  /* footer */
  .fgrid{ grid-template-columns:1fr 1fr; gap:22px; }
  .fgrid > div:first-child{ grid-column:span 2; }
  .ticker span{ font-size:11.5px; }
}

@media (max-width:640px){
  nav.nav{ gap:14px; justify-content:space-between; }
  nav.nav a{ font-size:13.5px; }
  nav.nav .allcats{ font-size:13px; }
}

@media (max-width:640px){
  nav.nav .allcats{ display:none; }                       /* Shop is right there; frees the row for the five links */
  nav.nav{ justify-content:flex-start; gap:22px; }
  .story-count{ display:none; }                            /* the bar and dots are desktop furniture */
  .story-vis{ width:min(100%,36vh); max-height:none; }     /* keep the stage square so the disc is a circle */
  .story-stage{ gap:8px; }
}

/* The story stage must pin the instant the page moves: no gap above it, and a
   header that keeps one height while scrolling (it used to shrink by ~12px once
   "stuck", which moved the pinned stage with it — the glitch). */
.story{ margin-block:0; }
.sheet{ margin-top:0; }
.mast.is-stuck .logo img{ height:64px; }
@media (max-width:640px){ .story{ margin-block-start:0; } .mast.is-stuck .logo img{ height:40px; } }
.sheet > section.story{ padding-block-start:0; }   /* the section padding was the last 26px the stage slid before pinning */

/* phone story: room above the stage for the lid to rise, and every row sized to
   fit one screen so the callouts, price and buttons never pile on each other */
@media (max-width:640px){
  .story-pin{ grid-template-rows:auto auto auto auto; align-content:start; row-gap:4px; padding-bottom:5vh; }
  .story-title{ font-size:clamp(20px,6.4vw,26px); margin-bottom:2px; }
  .story-sub{ font-size:12.5px; }
  .story-stage{ padding-top:7vh; gap:6px; }
  .story-vis{ width:min(100%,30vh); }
  .story-notes li{ font-size:11.5px; line-height:1.35; padding:7px 8px 7px 26px; }
  .story-notes li::before{ inset-inline-start:7px; top:8px; width:13px; height:13px; font-size:8px; }
  .story-cta{ flex-wrap:nowrap; gap:6px; margin-top:2px; }
  .story-price{ width:auto; font-size:16px; margin:0 4px 0 0; text-align:start; }
  .story-cta .btn{ padding:9px 12px; font-size:12.5px; white-space:nowrap; }
  .story-hint{ position:absolute; inset-inline:0; bottom:1vh; }
}

/* The editorial theme turns the nav into a slide-in drawer under 900px and
   parks it off-screen (translateX ±105%). The shop theme shows the nav as a
   plain row instead, so cancel the drawer in both directions. */
@media (max-width:900px){
  html nav.nav, html[dir="rtl"] nav.nav{ position:static; transform:none; width:auto; height:auto; inset:auto;
    background:none; border-inline-start:0; padding:2px 0 4px; flex-direction:row; }
}

/* ---------- 5 Oct: owner's round of fixes ---------- */
/* the 01 ——— 03 counter: gone on every screen */
.story-count{ display:none; }
/* the card holds its button: no hover offset that pushed it over the edge, and
   a little more room so the whole card reads as one piece */
.pcard{ padding:8px 8px 10px; }
.pcard .add{ transform:none; opacity:1; }
.pcard:hover .add{ transform:none; }
/* phones: the story plays by itself in one screen; the page scrolls past it normally */
@media (max-width:640px){
  .story{ height:auto; }
  .story-pin{ position:relative; top:auto; height:auto; min-height:0; padding-bottom:3vh; }
  .story-hint{ display:none; }
  .story-notes, .story-cta, .story-title, .story-sub{ transition:opacity .35s ease; }
}