/* ============================================================================
   THE BELLE COATS : design system
   Locked from Concept 06 "Candy Counter+". Every page shares this file, so a
   change here lands everywhere and no page can drift.
   ============================================================================ */

:root{
  /* grounds */
  --cream:#FFF9F2; --cream2:#FFF0E2; --white:#fff;
  --ink:#20121B; --ink2:#6E5A66; --ink3:#9C8C95; --line:#EFE2D8; --line2:#F6EDE5;

  /* brights */
  --pink:#FF3D7F; --pink2:#FF6C9E; --tang:#FF6B35; --grape:#7B3FA0;
  --mint:#3ED6A5; --butter:#FFD84D; --sky:#7FD1FF; --lilac:#C6ACFF;

  /* card tints */
  --t1:#FFE3EC; --t2:#EDE2FF; --t3:#DFF7E8; --t4:#FFF0CE; --t5:#DDF0FF; --t6:#FFE6D8;

  --ok:#2E9E6B; --err:#D94A4A;

  --fd:"Outfit",system-ui,-apple-system,sans-serif;
  --fs:"Instrument Serif",Georgia,serif;

  --gut:clamp(1rem, .3rem + 2.6vw, 3rem);
  --max:1560px;
  --rad:22px; --rad-sm:15px; --rad-lg:30px;

  --ez:cubic-bezier(.16,1,.3,1);
  --pop:cubic-bezier(.34,1.56,.64,1);

  --hdr-h:104px;
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--fd);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.038em;line-height:.96}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
em.ser{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:6px}

.shell{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.shell--narrow{max-width:920px}
.sec{padding:clamp(2.2rem,1.8rem + 2.4vw,4rem) 0}
.sec--tight{padding:clamp(1.4rem,1.2rem + 1.4vw,2.4rem) 0}
.rv{opacity:0}
/* The UA rule for [hidden] is display:none at the same specificity as any of
   our own class rules, so a .sum or .grid with hidden set stays visible. */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:900px){.hide-m{display:none!important}}
@media(min-width:901px){.hide-d{display:none!important}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;cursor:pointer;border-radius:999px;
  font-weight:700;font-size:15px;padding:1em 1.8em;background:var(--ink);color:var(--cream);transition:.25s var(--pop);
  text-align:center;line-height:1.1}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0)}
.btn--w{background:var(--white);color:var(--ink)}
.btn--pink{background:var(--pink);color:#fff}
.btn--line{background:none;border:2px solid var(--ink);color:var(--ink)}
.btn--sm{font-size:13px;padding:.65em 1.2em}
.btn--lg{font-size:16.5px;padding:1.1em 2.2em}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- ticker ---------- */
.tick{background:var(--ink);color:var(--cream);overflow:hidden;padding:.55rem 0}
.tick__t{display:flex;gap:2.2rem;width:max-content;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.tick__t span{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.tick__t i{font-style:normal;color:var(--butter)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:80;background:var(--cream);transition:.3s var(--ez);border-bottom:1px solid transparent}
.hdr.stuck{background:rgba(255,249,242,.96);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hdr__bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.8rem,.5rem + 1.4vw,2rem);
  min-height:var(--hdr-h);transition:min-height .3s var(--ez)}
.hdr.stuck .hdr__bar{min-height:76px}
/* The logo already contains the brand name, so it stands alone. */
.brand{display:flex;align-items:center}
.brand img{height:82px;width:auto;transition:height .3s var(--ez)}
.hdr.stuck .brand img{height:58px}
@media(max-width:600px){.brand img{height:58px}}

.nav{justify-self:center;display:flex;gap:.2rem;list-style:none;margin:0;padding:.3rem;background:var(--white);
  border-radius:999px;box-shadow:0 3px 0 rgba(32,18,27,.07)}
.nav>li{position:static}
.nav a,.nav button{display:inline-flex;align-items:center;gap:.35rem;padding:.62rem 1.15rem;border-radius:999px;
  font-weight:600;font-size:14.5px;border:0;background:none;cursor:pointer;color:inherit;transition:.2s var(--ez)}
.nav a:hover,.nav button:hover,.nav li.on button,.nav a[aria-current]{background:var(--ink);color:var(--cream)}
@media(max-width:1040px){.nav{display:none}}

.tools{justify-self:end;display:flex;gap:.4rem}
.tool{width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:999px;background:var(--white);
  cursor:pointer;color:inherit;position:relative;box-shadow:0 3px 0 rgba(32,18,27,.07);transition:.2s var(--pop)}
.tool:hover{transform:translateY(-2px) rotate(-4deg)}
.tool b{position:absolute;top:0;right:-2px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;
  font-weight:800;font-size:10.5px;background:var(--pink);color:#fff;border-radius:999px;border:2px solid var(--cream)}

.mega{position:absolute;left:var(--gut);right:var(--gut);top:calc(100% + .4rem);background:var(--white);border-radius:28px;
  padding:1.8rem;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s var(--ez);
  box-shadow:0 30px 60px -32px rgba(32,18,27,.45)}
.nav li.on .mega{opacity:1;visibility:visible;transform:none}
.mega__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.3fr;gap:1.8rem}
.mega h4{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--grape);margin:0 0 .9rem}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.mega ul a{display:flex;align-items:center;gap:.6rem;padding:.42rem .6rem;border-radius:12px;font-size:14.5px;font-weight:500}
.mega ul a:hover{background:var(--cream2)}
.chip{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex:none}
.mega__promo{background:var(--butter);border-radius:22px;padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;justify-content:space-between}
.mega__promo b{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1}

/* mobile nav */
.mnav{position:fixed;inset:0;z-index:110;visibility:hidden}
.mnav.on{visibility:visible}
.mnav__s{position:absolute;inset:0;background:rgba(32,18,27,.5);opacity:0;transition:.3s}
.mnav.on .mnav__s{opacity:1}
.mnav__p{position:absolute;top:0;left:0;bottom:0;width:min(360px,90vw);background:var(--cream);padding:1.2rem;
  transform:translateX(-100%);transition:.4s var(--ez);overflow-y:auto;border-radius:0 26px 26px 0}
.mnav.on .mnav__p{transform:none}
.mnav a{display:block;padding:.85rem .4rem;font-weight:700;font-size:19px;border-bottom:1px solid var(--line)}

/* ---------- section heads ---------- */
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.sechead h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.4rem)}
.sechead h2 em{color:var(--pink)}
.sechead p{margin:.5rem 0 0;color:var(--ink2);max-width:48ch}
.sechead a.more{background:var(--ink);color:var(--cream);border-radius:999px;padding:.7rem 1.3rem;font-weight:700;
  font-size:13.5px;white-space:nowrap;transition:.25s var(--pop)}
.sechead a.more:hover{transform:translateY(-3px)}

/* ---------- trust strip ---------- */
.trust{border-block:1px solid var(--line);background:var(--white)}
.trust__g{display:grid;grid-template-columns:repeat(4,1fr)}
.trust__i{display:flex;align-items:center;gap:.85rem;padding:1.15rem var(--gut);border-right:1px solid var(--line)}
.trust__i:last-child{border-right:0}
.trust__i .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--_c,var(--butter))}
.trust__i b{display:block;font-weight:700;font-size:14.5px;line-height:1.25}
.trust__i span{font-size:13px;color:var(--ink2)}
@media(max-width:880px){.trust__g{grid-template-columns:1fr 1fr}.trust__i:nth-child(2n){border-right:0}
 .trust__i:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- product card ---------- */
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1280px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1020px){.grid,.grid--4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.grid,.grid--4,.grid--3{grid-template-columns:repeat(2,1fr);gap:.7rem}}

.tk{background:var(--white);border-radius:var(--rad);overflow:hidden;position:relative;display:flex;flex-direction:column;
  transition:.3s var(--ez);box-shadow:0 3px 0 rgba(32,18,27,.06)}
.tk:hover{transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(32,18,27,.4)}
.tk__ph{position:relative;aspect-ratio:1;overflow:hidden;background:var(--_t,var(--cream2))}
.tk__ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ez)}
.tk:hover .tk__ph img{transform:scale(1.06)}
.tk__flag{position:absolute;top:.6rem;left:.6rem;z-index:2;background:var(--pink);color:#fff;border-radius:999px;
  padding:.35em .7em;font-weight:800;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.tk__fav{position:absolute;top:.5rem;right:.5rem;z-index:2;width:32px;height:32px;border-radius:999px;border:0;
  background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:.2s var(--pop)}
.tk__fav:hover,.tk__fav.on{transform:scale(1.14);color:var(--pink)}
.tk__fav.on svg{fill:currentColor}
.tk__sw{position:absolute;bottom:.55rem;left:.55rem;z-index:2;width:34px;height:34px;border-radius:999px;cursor:pointer;
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(32,18,27,.32),0 3px 8px rgba(0,0,0,.26);transition:.2s var(--pop)}
.tk__sw:hover{transform:scale(1.14)}
.tk__perf{position:relative;height:15px;background:var(--white)}
.tk__perf::before,.tk__perf::after{content:"";position:absolute;top:50%;width:17px;height:17px;border-radius:999px;
  background:var(--cream);transform:translateY(-50%)}
.tk__perf::before{left:-8.5px}.tk__perf::after{right:-8.5px}
.tk__perf i{position:absolute;left:11px;right:11px;top:50%;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,rgba(32,18,27,.16) 0 5px,transparent 5px 11px)}
/* The body is a tight stack: name, meta, then the price row. No stray gaps. */
.tk__b{padding:.15rem .85rem .85rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.tk__n{font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0}
.tk__m{font-size:11.5px;color:var(--ink2);font-weight:500;margin:0;line-height:1.3}
.tk__f{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-top:.7rem}
.tk__p{font-weight:800;font-size:16px;margin:0;line-height:1}
.tk__p s{font-weight:400;font-size:12.5px;color:var(--ink3);margin-right:.3rem}
.tk__add{border:0;cursor:pointer;background:var(--ink);color:#fff;border-radius:999px;padding:.55rem 1.05rem;
  font-weight:700;font-size:12.5px;transition:.22s var(--pop);flex:none}
.tk__add:hover{background:var(--pink);transform:scale(1.07)}
.tk__add.done{background:var(--mint);color:var(--ink)}

/* ---------- filters ---------- */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.3rem}
.f{display:inline-flex;align-items:center;gap:.5rem;background:var(--white);border:2px solid transparent;border-radius:999px;
  padding:.5rem 1rem;font-weight:600;font-size:13.5px;cursor:pointer;transition:.2s var(--pop)}
.f:hover{transform:translateY(-2px)}
.f.on{border-color:var(--ink);background:var(--ink);color:#fff}
.f i{width:16px;height:16px;border-radius:999px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}

/* ---------- slider ---------- */
.slid__t{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.4rem;cursor:grab}
.slid__t::-webkit-scrollbar{display:none}
.slid__t.drag{cursor:grabbing;scroll-snap-type:none}
.slid__t>*{flex:none;width:clamp(210px,22vw,270px);scroll-snap-align:start}
.slid__ui{display:flex;align-items:center;gap:1rem;margin-top:1.1rem}
.slid__bar{flex:1;height:4px;border-radius:999px;background:var(--line);position:relative;overflow:hidden}
.slid__bar i{position:absolute;inset:0 auto 0 0;background:var(--ink);border-radius:999px;width:20%}
.slid__nav{display:flex;gap:.45rem}
.slid__nav button{width:44px;height:44px;border-radius:999px;border:0;background:var(--white);cursor:pointer;display:grid;
  place-items:center;box-shadow:0 3px 0 rgba(32,18,27,.07);transition:.2s var(--pop);color:inherit}
.slid__nav button:hover:not(:disabled){transform:translateY(-2px);background:var(--ink);color:#fff}
.slid__nav button:disabled{opacity:.35;cursor:default}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);align-items:start}
.steps__ph{position:sticky;top:calc(var(--hdr-h) + 20px);border-radius:26px;overflow:hidden;aspect-ratio:4/3;background:var(--cream2)}
.steps__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--ez)}
.steps__ph img.on{opacity:1}

.steps__l{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.st{background:var(--white);border-radius:20px;padding:1.05rem 1.2rem;display:grid;grid-template-columns:auto 1fr;gap:1rem;
  cursor:pointer;border:2px solid transparent;transition:.28s var(--ez)}
.st.on{border-color:var(--ink);background:var(--_c,var(--white))}
.st i{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-weight:800;font-size:15px;
  font-style:normal;background:var(--_c,var(--cream2));transition:.28s}
.st.on i{background:var(--ink);color:#fff}
.st b{font-weight:800;font-size:18px;letter-spacing:-.03em;display:block;margin-bottom:.1rem}
.st p{margin:0;font-size:14px;color:var(--ink2)}
@media(max-width:900px){.steps{grid-template-columns:1fr}.steps__ph{position:relative;top:0}}

/* ---------- reels / DMs / IG ---------- */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
@media(max-width:900px){.reels{grid-template-columns:repeat(2,1fr)}}
.reel{position:relative;border-radius:var(--rad);overflow:hidden;aspect-ratio:9/16;background:#000;cursor:pointer}
.reel img,.reel video{width:100%;height:100%;object-fit:cover}
.reel__ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62),transparent 46%);display:flex;
  flex-direction:column;justify-content:flex-end;padding:.9rem;color:#fff}
.reel__ov b{font-size:14px}.reel__ov span{font-size:11.5px;opacity:.85}
.reel__p{position:absolute;inset:0;display:grid;place-items:center}
.reel__p i{width:56px;height:56px;border-radius:999px;background:rgba(255,255,255,.94);display:grid;place-items:center;transition:.25s var(--pop)}
.reel:hover .reel__p i{transform:scale(1.14);background:var(--butter)}
.reel--cta{background:var(--pink);display:flex;flex-direction:column;justify-content:center;padding:1.3rem;color:#fff;cursor:default}
.reel--cta h3{font-size:1.5rem;margin:0 0 .5rem}

.wagrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
@media(max-width:1000px){.wagrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.wagrid{grid-template-columns:1fr}}
.wa{background:#ECE5DD;border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column;
  background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px);background-size:15px 15px}
.wa__hd{background:#075E54;color:#fff;padding:.6rem .8rem;display:flex;align-items:center;gap:.6rem}
.wa__av{width:32px;height:32px;border-radius:999px;background:#25D366;color:#075E54;display:grid;place-items:center;font-weight:800;font-size:13px}
.wa__hd b{font-size:13.5px;display:block;line-height:1.2}.wa__hd span{font-size:10.5px;opacity:.75}
.wa__body{padding:.8rem;display:grid;gap:.45rem;flex:1;align-content:start}
.bub{max-width:88%;background:#fff;border-radius:8px 8px 8px 1px;padding:.55rem .7rem;font-size:13.5px;box-shadow:0 1px 1px rgba(0,0,0,.09)}
.bub.me{margin-left:auto;background:#D9FDD3;border-radius:8px 8px 1px 8px}
.bub time{display:block;text-align:right;font-size:10px;color:#667781;margin-top:.15rem}
.wa__ft{background:#fff;padding:.5rem .8rem;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}

.ig__hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.ig__who{display:flex;align-items:center;gap:.85rem}
.ig__ring{width:64px;height:64px;border-radius:999px;padding:3px;background:conic-gradient(from 210deg,#FFD84D,#FF3D7F,#7B3FA0,#FF6B35,#FFD84D)}
.ig__ring img{width:100%;height:100%;border-radius:999px;background:#fff;object-fit:contain;padding:3px}
.ig__who b{display:block;font-weight:800;font-size:18px;letter-spacing:-.02em}
.ig__who span{font-size:13px;color:var(--ink2)}
.iggrid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}
@media(max-width:1100px){.iggrid{grid-template-columns:repeat(4,1fr)}}
.ig{position:relative;aspect-ratio:1;border-radius:var(--rad-sm);overflow:hidden;background:var(--cream2)}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ez)}
.ig:hover img{transform:scale(1.09)}

/* ---------- cart drawer ---------- */
.drw{position:fixed;inset:0;z-index:120;visibility:hidden}
.drw.on{visibility:visible}
.drw__s{position:absolute;inset:0;background:rgba(32,18,27,.5);opacity:0;transition:.3s var(--ez)}
.drw.on .drw__s{opacity:1}
.drw__p{position:absolute;top:0;right:0;bottom:0;width:min(430px,100vw);background:var(--cream);display:flex;
  flex-direction:column;transform:translateX(100%);transition:.45s var(--ez);border-radius:26px 0 0 26px}
.drw.on .drw__p{transform:none}
.drw__h{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.3rem;border-bottom:1px solid var(--line)}
.drw__h b{font-size:20px;font-weight:800;letter-spacing:-.03em}
.drw__x{width:40px;height:40px;border:0;border-radius:999px;background:var(--white);cursor:pointer;display:grid;place-items:center;color:inherit}
.ship{padding:.9rem 1.3rem;border-bottom:1px solid var(--line)}
.ship p{margin:0 0 .5rem;font-size:13px;font-weight:600}
.ship__t{height:6px;border-radius:999px;background:var(--cream2);overflow:hidden}
.ship__t i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--butter),var(--pink));width:0;transition:width .5s var(--ez)}
.drw__items{flex:1;overflow-y:auto;padding:1rem 1.3rem;display:grid;gap:.9rem;align-content:start}
.li{display:grid;grid-template-columns:64px 1fr auto;gap:.8rem;align-items:center}
.li__ph{width:64px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--white)}
.li__ph img{width:100%;height:100%;object-fit:cover}
.li b{font-size:14px;font-weight:700;display:block;letter-spacing:-.02em}
.li span{font-size:12.5px;color:var(--ink2)}
.qty{display:inline-flex;align-items:center;background:var(--white);border-radius:999px;margin-top:.3rem}
.qty button{width:28px;height:28px;border:0;background:none;cursor:pointer;border-radius:999px;font-weight:800;color:inherit}
.qty span{min-width:20px;text-align:center;font-weight:700;font-size:13px}
.drw__empty{margin:auto;text-align:center;color:var(--ink2);padding:2rem}
/* The drawer used to be a wall of empty cream under two lines. This is the
   part of the bag that actually earns: essentials and a matching set. */
.drw__up{border-top:1px solid var(--line);padding:.9rem 1.3rem;background:var(--cream2);
  max-height:42vh;overflow-y:auto;flex:none}
.drw__up-h{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:.6rem}
.upr{display:grid;grid-template-columns:46px 1fr auto;gap:.7rem;align-items:center;background:var(--white);
  border-radius:14px;padding:.5rem .6rem;margin-bottom:.45rem}
.upr:last-child{margin-bottom:0}
.upr__ph{width:46px;aspect-ratio:1;border-radius:11px;overflow:hidden;background:var(--cream2)}
.upr__ph img{width:100%;height:100%;object-fit:cover}
.upr b{display:block;font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.upr span{font-size:11.5px;color:var(--ink2)}
.upr__add{border:0;cursor:pointer;background:var(--ink);color:#fff;border-radius:999px;padding:.42rem .8rem;
  font-weight:800;font-size:11.5px;transition:.2s var(--pop);flex:none;font-family:inherit}
.upr__add:hover{background:var(--pink);transform:scale(1.06)}
.upr__add.done{background:var(--mint);color:var(--ink)}
.drw__f{border-top:1px solid var(--line);padding:1.1rem 1.3rem 1.4rem;display:grid;gap:.6rem}
.drw__row{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.drw__row b{font-size:21px}
.drw__note{font-size:11.5px;color:var(--ink2);margin:0}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:rgba(255,249,242,.8);border-radius:36px 36px 0 0;margin-top:2rem;
  padding:clamp(2.4rem,2rem + 2.6vw,4rem) 0 0}
/* Four link columns now, not three: Policies joined Shop, Help and Say hi. */
.ftr__top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid rgba(255,249,242,.15)}
.ftr__brand img{height:104px;width:auto;margin-bottom:1rem}
.ftr h4{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--butter);margin:0 0 1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:14.5px}
.ftr a:hover{color:var(--butter)}
.ftr__wm{text-align:center;padding:1.6rem 0 .4rem;font-weight:900;letter-spacing:-.05em;line-height:.85;
  font-size:clamp(2.6rem,2rem + 6.4vw,9rem);color:rgba(255,249,242,.07);user-select:none}
.ftr__base{padding:1rem 0 1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:12.5px;color:rgba(255,249,242,.55)}
@media(max-width:900px){.ftr__top{grid-template-columns:1fr 1fr}}

/* ---------- toast + page head ---------- */
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,140%);z-index:150;background:var(--ink);color:#fff;
  padding:.85rem 1.4rem;border-radius:999px;font-weight:700;font-size:14px;transition:.4s var(--pop)}
.toast.on{transform:translate(-50%,0)}
.crumb{font-size:13px;color:var(--ink2);padding:1rem 0 0}
.crumb a:hover{color:var(--pink)}
/* Block padding only. A shorthand here would wipe the .shell gutter and push
   every page heading flush to the viewport edge. */
.phead{padding-block:clamp(1.4rem,1.2rem + 1.6vw,2.6rem) clamp(1.2rem,1rem + 1.4vw,2rem)}
.phead h1{font-size:clamp(2.2rem,1.5rem + 3vw,4.2rem)}
.phead p{margin:.7rem 0 0;color:var(--ink2);max-width:56ch;font-size:17px}

/* ---------- PDP ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);align-items:start}
@media(max-width:960px){.pdp{grid-template-columns:1fr}}
.pdp__gal{display:grid;grid-template-columns:78px 1fr;gap:.7rem;position:sticky;top:calc(var(--hdr-h) + 16px)}
@media(max-width:960px){.pdp__gal{position:relative;top:0}}
/* On a phone a 78px thumb rail eats a quarter of the photo, so the thumbs
   drop under the image as a scrolling row instead. */
@media(max-width:600px){
  .pdp__gal{grid-template-columns:1fr}
  .pdp__thumbs{grid-auto-flow:column;grid-auto-columns:70px;overflow-x:auto;scrollbar-width:none;order:2}
  .pdp__thumbs::-webkit-scrollbar{display:none}
}
.pdp__thumbs{display:grid;gap:.5rem;align-content:start}
.pdp__thumbs button{aspect-ratio:1;border-radius:14px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:var(--cream2)}
.pdp__thumbs button.on{border-color:var(--ink)}
.pdp__thumbs img{width:100%;height:100%;object-fit:cover}
.pdp__main{position:relative;aspect-ratio:1;border-radius:var(--rad-lg);overflow:hidden;background:var(--cream2)}
.pdp__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ez)}
.pdp__main img.on{opacity:1}
.pdp__badge{position:absolute;top:1rem;left:1rem;z-index:2;background:var(--pink);color:#fff;border-radius:999px;
  padding:.45em .9em;font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.pdp h1{font-size:clamp(2rem,1.5rem + 2vw,3.2rem);margin:0 0 .5rem}
.pdp__meta{font-size:13.5px;color:var(--ink2);margin:0 0 1rem}
.pdp__price{display:flex;align-items:baseline;gap:.6rem;margin:0 0 1.2rem}
.pdp__price b{font-size:30px;font-weight:800}
.pdp__price s{color:var(--ink3)}
.pdp__price em{font-style:normal;background:var(--mint);color:var(--ink);border-radius:999px;padding:.25em .7em;font-size:12.5px;font-weight:800}
.opt{margin-bottom:1.2rem}
.opt>b{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:.55rem}
.opt__row{display:flex;gap:.5rem;flex-wrap:wrap}
.opt__row button{border:2px solid var(--line);background:var(--white);border-radius:14px;padding:.65rem 1.1rem;
  font-weight:700;font-size:14px;cursor:pointer;transition:.2s var(--pop);display:inline-flex;align-items:center;gap:.5rem}
.opt__row button:hover{transform:translateY(-2px)}
.opt__row button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.pdp__buy{display:grid;gap:.6rem;margin:1.4rem 0}
.pdp__acc{border-top:1px solid var(--line)}
.pdp__acc details{border-bottom:1px solid var(--line)}
.pdp__acc summary{cursor:pointer;padding:1rem 0;font-weight:700;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.pdp__acc summary::-webkit-details-marker{display:none}
.pdp__acc summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ink2)}
.pdp__acc details[open] summary::after{content:"−"}
.pdp__acc p{margin:0 0 1rem;color:var(--ink2);font-size:14.5px}
.usp{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1.2rem 0}
.usp div{background:var(--white);border-radius:16px;padding:.85rem;text-align:center;font-size:12.5px;font-weight:600}
.usp div i{display:block;margin:0 auto .35rem;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--_c,var(--cream2))}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:1000px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}
.post{background:var(--white);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 3px 0 rgba(32,18,27,.06);transition:.3s var(--ez)}
.post:hover{transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(32,18,27,.4)}
.post__ph{aspect-ratio:16/10;overflow:hidden;background:var(--cream2)}
.post__ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ez)}
.post:hover .post__ph img{transform:scale(1.06)}
.post__b{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.post__cat{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.post__t{font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.post__x{font-size:14px;color:var(--ink2);margin:0}
.post__m{margin-top:auto;padding-top:.7rem;font-size:12.5px;color:var(--ink3)}
.prose{max-width:70ch;font-size:17px;line-height:1.75}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);margin:2rem 0 .8rem}
.prose h3{font-size:1.3rem;margin:1.6rem 0 .6rem}
.prose p{margin:0 0 1.1rem;color:var(--ink2)}
.prose ul{color:var(--ink2);padding-left:1.2rem}
.prose img{border-radius:var(--rad);margin:1.6rem 0}
.prose blockquote{margin:1.6rem 0;padding:1.2rem 1.4rem;background:var(--t1);border-radius:var(--rad);
  font-size:19px;font-weight:600;color:var(--ink)}

/* ---------- forms / cart / checkout pages ---------- */
.panel{background:var(--white);border-radius:var(--rad);padding:clamp(1.1rem,1rem + 1vw,1.8rem)}
.field{display:grid;gap:.4rem;margin-bottom:.8rem}
.field label{font-size:13px;font-weight:700}
.field input,.field textarea,.field select{padding:.85rem 1rem;border:2px solid var(--line);border-radius:14px;
  font-family:inherit;font-size:15.5px;background:var(--white);width:100%}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:600px){.two{grid-template-columns:1fr}}
.sum{display:flex;justify-content:space-between;font-size:14.5px;padding:.3rem 0}
.sum.tot{font-weight:800;font-size:19px;border-top:1px solid var(--line);margin-top:.5rem;padding-top:.7rem}
.cartrow{display:grid;grid-template-columns:92px 1fr auto;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.cartrow__ph{width:92px;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--cream2)}
.cartrow__ph img{width:100%;height:100%;object-fit:cover}
.steps3{display:flex;gap:.5rem;margin-bottom:1.4rem}
.steps3 div{flex:1;padding:.7rem;border-radius:999px;background:var(--white);text-align:center;font-weight:700;font-size:13px}
.steps3 div.on{background:var(--ink);color:#fff}

/* ---------- HERO (home) ---------- */
.hero{position:relative;overflow:hidden;transition:background .7s var(--ez)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.2rem,.8rem + 2vw,3rem);align-items:center;
  padding-block:clamp(1.6rem,1.2rem + 2vw,3rem)}
.hero__l{display:flex;flex-direction:column;justify-content:center}
.hero__flag{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:#fff;border-radius:999px;
  padding:.5rem 1.05rem;font-weight:800;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  align-self:flex-start;margin-bottom:1rem}
/* The headline was capped at 13ch, which broke it onto four short lines and
   left the right half of the column empty. Wider measure, bigger type, so it
   lands in two lines that fill the space. */
.hero__h{font-size:clamp(2.6rem,1.2rem + 5vw,6rem);line-height:.88;margin:0 0 .85rem;max-width:19ch}
.hero__p{font-size:clamp(15.5px,14px + .4vw,19px);max-width:46ch;margin:0 0 1.3rem;color:var(--ink2)}

/* Social proof under the dots, so the column has something at the bottom
   instead of trailing off into blank pink. */
.hero__proof{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid rgba(32,18,27,.12)}
.hero__faces{display:flex}
.hero__faces img{width:38px;height:38px;border-radius:999px;object-fit:cover;border:2.5px solid var(--cream);
  margin-left:-12px;background:var(--cream2)}
.hero__faces img:first-child{margin-left:0}
.hero__proof b{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.hero__proof span{font-size:12.5px;color:var(--ink2)}
.hero__proof .stars{color:var(--butter);display:inline-flex;gap:1px;vertical-align:-2px;margin-right:.35rem}
.hero__cta{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:1.2rem}
.cd{display:flex;gap:.45rem}
.cd div{background:rgba(255,255,255,.7);border-radius:13px;padding:.5rem .7rem;text-align:center;min-width:54px}
.cd b{display:block;font-size:19px;font-weight:800;line-height:1}
.cd span{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;opacity:.6}
.hero__dots{display:flex;gap:.45rem;margin-top:1rem}
.hero__dots button{width:34px;height:5px;border-radius:999px;border:0;background:rgba(32,18,27,.2);cursor:pointer;
  padding:0;position:relative;overflow:hidden}
.hero__dots button i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.hero__r{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.mini{background:var(--white);border-radius:20px;padding:.55rem;display:flex;flex-direction:column;gap:.5rem;
  box-shadow:0 3px 0 rgba(32,18,27,.06);transition:.25s var(--ez)}
.mini:hover{transform:translateY(-4px);box-shadow:0 18px 32px -22px rgba(32,18,27,.5)}
/* 5:4 like every other product frame: square cost 25% of each pack shot. */
.mini__ph{position:relative;aspect-ratio:5/4;border-radius:15px;overflow:hidden;background:var(--cream2);display:block}
.mini__ph img{width:100%;height:100%;object-fit:cover}
.mini__sw{position:absolute;bottom:.45rem;left:.45rem;width:30px;height:30px;border-radius:999px;
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(32,18,27,.3),0 3px 8px rgba(0,0,0,.25)}
.mini__b{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:0 .25rem .25rem}
.mini__n{font-weight:700;font-size:13.5px;letter-spacing:-.02em;line-height:1.15}
.mini__pr{font-size:12.5px;color:var(--ink2)}
.mini__add{border:0;cursor:pointer;background:var(--ink);color:#fff;border-radius:999px;width:34px;height:34px;
  display:grid;place-items:center;flex:none;transition:.2s var(--pop);font-size:18px;line-height:1}
.mini__add:hover{background:var(--pink);transform:scale(1.1)}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr}}

/* ---------- BUNDLE ---------- */
.bb{background:var(--grape);color:#fff;border-radius:var(--rad-lg);padding:clamp(1.4rem,1.2rem + 1.8vw,2.6rem);
  display:grid;grid-template-columns:1fr auto;gap:1.6rem;align-items:center}
.bb h2{font-size:clamp(1.7rem,1.3rem + 2vw,3rem);margin:0 0 .5rem;max-width:16ch}
.bb p{margin:0 0 1.2rem;opacity:.9;max-width:40ch}
.bb__slots{display:flex;gap:.7rem;flex-wrap:wrap}
.slot{width:88px;height:104px;border-radius:16px;border:2px dashed rgba(255,255,255,.5);display:grid;place-items:center;
  overflow:hidden;background:rgba(255,255,255,.1);font-size:12px;font-weight:700;text-align:center;padding:.4rem}
.slot img{width:100%;height:100%;object-fit:cover}
.bb__tot{background:rgba(255,255,255,.14);border-radius:20px;padding:1.2rem 1.5rem;text-align:center;min-width:210px}
.bb__tot b{display:block;font-size:30px;font-weight:800;line-height:1}
.bb__tot s{opacity:.6;font-size:15px}
.bb__tot span{display:block;font-size:12px;opacity:.85;margin:.3rem 0 .9rem}
@media(max-width:900px){.bb{grid-template-columns:1fr}}

/* ---------- SHOP ---------- */
.shopbar{display:flex;align-items:center;gap:1rem;padding:.4rem 0 1rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.shopbar__sort{margin-left:auto}
.shopbar__sort select{border:2px solid var(--line);background:var(--white);border-radius:999px;padding:.6rem 1rem;
  font-family:inherit;font-weight:600;font-size:14px;cursor:pointer}
.shopbar__count{margin:0;font-size:14px;color:var(--ink2);font-weight:600}
.shoplayout{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.2rem,1rem + 1.6vw,2.6rem);align-items:start}
@media(max-width:960px){.shoplayout{grid-template-columns:1fr}}
.side{position:sticky;top:calc(var(--hdr-h) + 16px);display:grid;gap:1.3rem}
.side__hd{display:none}
.fgroup>b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:.6rem}
.frow{display:flex;flex-wrap:wrap;gap:.4rem}
.side__promo{background:var(--butter);border-radius:20px;padding:1.1rem}
.side__promo b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;margin-bottom:.3rem}
.side__promo p{margin:0;font-size:13.5px}
.empty{text-align:center;padding:3rem 1rem;color:var(--ink2);font-weight:600}
.loadmore{display:flex;justify-content:center;margin-top:2rem}
@media(max-width:960px){
  .side{position:fixed;inset:0;z-index:115;background:var(--cream);padding:1.2rem;overflow-y:auto;
    transform:translateY(100%);transition:.4s var(--ez);border-radius:26px 26px 0 0}
  .side.on{transform:none}
  .side__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
  .side__hd b{font-size:20px;font-weight:800}
}
.helpgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
@media(max-width:900px){.helpgrid{grid-template-columns:1fr 1fr}}
.help{background:var(--white);border-radius:var(--rad);padding:1.3rem;display:grid;gap:.35rem;align-content:start;
  transition:.25s var(--ez);box-shadow:0 3px 0 rgba(32,18,27,.06)}
.help:hover{transform:translateY(-5px)}
.help__i{width:42px;height:42px;border-radius:14px;background:var(--_c,var(--t1));margin-bottom:.4rem}
.help b{font-size:17px;font-weight:800;letter-spacing:-.03em}
.help p{margin:0;font-size:13.5px;color:var(--ink2)}

/* ---------- PDP extras ---------- */
.pdp__eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin:0 0 .5rem}
.pdp__rating{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-size:13.5px}
.pdp__rating a{color:var(--ink2);border-bottom:1px solid var(--line)}
.stars{display:inline-flex;gap:2px;color:var(--butter)}
.opt__help{display:inline-block;margin-top:.6rem;font-size:13px;font-weight:600;color:var(--ink2);border-bottom:1px solid var(--line)}
.opt__help:hover{color:var(--pink)}
.addons{display:grid;gap:.5rem}
.addon{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:.7rem;background:var(--white);
  border:2px solid var(--line);border-radius:16px;padding:.7rem .9rem;cursor:pointer;transition:.2s var(--ez)}
.addon:has(input:checked){border-color:var(--ink)}
.addon input{width:18px;height:18px;accent-color:var(--ink)}
.addon__i{width:34px;height:34px;border-radius:11px}
.addon__t b{display:block;font-size:14px;font-weight:700;line-height:1.2}
.addon__t span{font-size:12px;color:var(--ink2)}
.addon__p{font-weight:800;font-size:14px}
.ticks{margin:.6rem 0 0;padding-left:1.1rem;color:var(--ink2);font-size:14.5px;display:grid;gap:.35rem}
.ulink{border-bottom:1px solid var(--pink);color:var(--pink);font-weight:600}
.revsum{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;background:var(--white);
  border-radius:var(--rad);padding:1.4rem 1.6rem}
@media(max-width:820px){.revsum{grid-template-columns:1fr;gap:1rem}}
.revsum__big{text-align:center}
.revsum__big b{display:block;font-size:44px;font-weight:800;line-height:1}
.revsum__big span{display:block;font-size:12.5px;color:var(--ink2);margin-top:.2rem}
.revsum__bars{display:grid;gap:.35rem}
.bar{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;gap:.6rem;font-size:12.5px;color:var(--ink2)}
.bar i{display:block;height:7px;border-radius:999px;background:var(--cream2);overflow:hidden}
.bar b{display:block;height:100%;background:var(--butter);border-radius:999px}
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,249,242,.97);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);transform:translateY(110%);transition:.4s var(--ez)}
.stickybuy.on{transform:none}
.stickybuy__in{display:flex;align-items:center;gap:1rem;padding:.7rem 0}
.stickybuy__ph{width:52px;height:52px;border-radius:14px;overflow:hidden;background:var(--cream2);flex:none}
.stickybuy__ph img{width:100%;height:100%;object-fit:cover}
.stickybuy__t b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em}
.stickybuy__t span{font-size:12.5px;color:var(--ink2)}
.stickybuy__p{margin-left:auto;font-weight:800;font-size:19px}
@media(max-width:600px){.stickybuy__t,.stickybuy__ph{display:none}.stickybuy__p{margin-left:0}
 .stickybuy .btn{flex:1}}

/* ============================================================================
   PAGE SYSTEMS : cart, checkout, editorial, guide, gifting, FAQ, contact,
   account. Same tokens, same rhythm as everything above.
   ============================================================================ */

/* ---------- two column page with a sticky rail ---------- */
.rail{display:grid;grid-template-columns:1fr 380px;gap:clamp(1.2rem,1rem + 1.8vw,2.6rem);align-items:start}
@media(max-width:960px){.rail{grid-template-columns:1fr}}
.rail__side{position:sticky;top:calc(var(--hdr-h) + 16px);display:grid;gap:.9rem}
@media(max-width:960px){.rail__side{position:relative;top:0}}

/* ---------- cart page ---------- */
.cartrow__ctl{display:flex;align-items:center;gap:.9rem;margin-top:.55rem}
.cartrow__q{display:flex;align-items:center;background:var(--cream2);border-radius:999px}
.cartrow__q button{width:30px;height:30px;border:0;background:none;cursor:pointer;border-radius:999px;font-weight:800;font-size:15px;color:inherit}
.cartrow__q span{min-width:22px;text-align:center;font-weight:800;font-size:13.5px}
.cartrow b.nm{font-size:16.5px;font-weight:800;letter-spacing:-.03em;display:block}
.cartrow small{font-size:12.5px;color:var(--ink2);display:block}
.cartrow__rm{background:none;border:0;padding:0;font-size:12px;color:var(--ink3);cursor:pointer;
  font-family:inherit;border-bottom:1px solid var(--line)}
.cartrow__rm:hover{color:var(--err)}
.cartrow__pr{text-align:right;font-weight:800;font-size:16px}
.freebar{background:var(--butter);border-radius:var(--rad);padding:1rem 1.2rem;display:grid;gap:.5rem}
.freebar p{margin:0;font-weight:700;font-size:14px}
.freebar__t{height:8px;border-radius:999px;background:rgba(32,18,27,.14);overflow:hidden}
.freebar__t i{display:block;height:100%;border-radius:999px;background:var(--ink);width:0;transition:width .5s var(--ez)}
.codebox{display:flex;gap:.5rem}
.codebox input{flex:1;padding:.8rem 1rem;border:2px solid var(--line);border-radius:14px;font-family:inherit;font-size:14.5px;min-width:0}
.paychips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.2rem}
.paychips span{background:var(--cream2);border-radius:8px;padding:.32rem .6rem;font-size:11px;font-weight:700;letter-spacing:.04em}
.blank{text-align:center;padding:clamp(2.5rem,2rem + 3vw,5rem) 1rem;background:var(--white);border-radius:var(--rad-lg)}
.blank h2{font-size:clamp(1.6rem,1.3rem + 1.6vw,2.4rem);margin-bottom:.6rem}
.blank p{color:var(--ink2);max-width:40ch;margin:0 auto 1.4rem}

/* ---------- checkout ---------- */
.co__step{background:var(--white);border-radius:var(--rad);padding:clamp(1.1rem,1rem + 1vw,1.7rem);margin-bottom:.9rem}
.co__step>h3{font-size:20px;margin:0 0 1rem;display:flex;align-items:center;gap:.6rem}
.co__step>h3 i{width:28px;height:28px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:800;font-style:normal;flex:none}
.pay{display:grid;gap:.5rem}
.pay label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;border:2px solid var(--line);
  border-radius:16px;padding:.9rem 1rem;cursor:pointer;transition:.2s var(--ez)}
.pay label:has(input:checked){border-color:var(--ink);background:var(--cream2)}
.pay input{width:18px;height:18px;accent-color:var(--ink)}
.pay b{font-size:14.5px;display:block}
.pay span{font-size:12.5px;color:var(--ink2)}
.pay em{font-style:normal;font-size:11px;font-weight:800;background:var(--mint);color:var(--ink);
  border-radius:999px;padding:.25em .65em;letter-spacing:.04em}
.upsell{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.6rem}
@media(max-width:600px){.upsell{grid-template-columns:1fr}}
.upsell label{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem;background:var(--cream2);
  border:2px solid transparent;border-radius:16px;padding:.85rem .95rem;cursor:pointer;font-size:12.5px;
  color:var(--ink2);transition:.2s var(--ez);align-items:start}
.upsell label:has(input:checked){border-color:var(--ink);background:var(--white)}
.upsell input{grid-row:1/4;width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.upsell b{font-size:14.5px;color:var(--ink);line-height:1.25}
.upsell b.pr{color:var(--pink);font-size:14px;margin-top:.15rem}
.miniline{display:grid;grid-template-columns:44px 1fr auto;gap:.7rem;align-items:center;padding:.45rem 0;font-size:13.5px}
.miniline__ph{width:44px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--cream2)}
.miniline__ph img{width:100%;height:100%;object-fit:cover}
.miniline b{font-weight:700;display:block;line-height:1.2}
.miniline span{color:var(--ink2);font-size:12px}

/* ---------- editorial / story ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,1rem + 2.4vw,3.4rem);align-items:center}
.split--r>*:first-child{order:2}
@media(max-width:860px){.split,.split--r{grid-template-columns:1fr}.split--r>*:first-child{order:0}}
/* Capped, or a half-width column turns into a 900px tall photo and the text
   beside it floats in the middle of nothing. */
.split__ph{border-radius:var(--rad-lg);overflow:hidden;aspect-ratio:4/5;max-height:560px;background:var(--cream2)}
.split__ph img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:clamp(1.8rem,1.3rem + 2.2vw,3.2rem);margin-bottom:.8rem}
.split h2 em{color:var(--pink)}
.split p{color:var(--ink2);font-size:16.5px;max-width:46ch}
.bighero{border-radius:var(--rad-lg);overflow:hidden;position:relative;min-height:clamp(300px,26vw,470px);display:grid;
  align-items:end;background:var(--cream2)}
.bighero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bighero__in{position:relative;z-index:2;padding:clamp(1.4rem,1.2rem + 2vw,3rem);color:#fff;
  background:linear-gradient(0deg,rgba(32,18,27,.72),transparent 78%)}
.bighero h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,4.6rem);max-width:16ch}
.bighero p{margin:.7rem 0 0;max-width:48ch;opacity:.92;font-size:16.5px}
.tline{display:grid;gap:.6rem}
.tl{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;background:var(--white);border-radius:20px;padding:1.1rem 1.3rem}
.tl i{font-style:normal;font-weight:800;font-size:13px;letter-spacing:.06em;background:var(--_c,var(--t1));
  border-radius:999px;padding:.4rem .85rem;height:fit-content;white-space:nowrap}
.tl b{display:block;font-size:18px;font-weight:800;letter-spacing:-.03em;margin-bottom:.15rem}
.tl p{margin:0;font-size:14.5px;color:var(--ink2)}
@media(max-width:600px){.tl{grid-template-columns:1fr}}
.quote{background:var(--ink);color:var(--cream);border-radius:var(--rad-lg);padding:clamp(1.6rem,1.4rem + 2.4vw,3.4rem);
  text-align:center}
.quote p{font-family:var(--fs);font-style:italic;font-size:clamp(1.4rem,1.1rem + 1.8vw,2.5rem);line-height:1.2;
  max-width:24ch;margin:0 auto 1rem}
.quote span{font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
@media(max-width:720px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--_c,var(--white));border-radius:var(--rad);padding:1.3rem;text-align:center}
.stat b{display:block;font-size:clamp(1.9rem,1.5rem + 1.6vw,3rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.stat span{font-size:13px;color:var(--ink2);font-weight:600}

/* ---------- guide / how to ---------- */
.sizeguide{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
@media(max-width:820px){.sizeguide{grid-template-columns:repeat(2,1fr)}}
.sz{background:var(--white);border-radius:18px;padding:1rem;text-align:center}
.sz i{display:block;margin:0 auto .5rem;color:var(--_c,var(--t1))}
.sz b{display:block;font-size:15px;font-weight:800}
.sz span{font-size:12.5px;color:var(--ink2)}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.tab{border:2px solid transparent;background:var(--white);border-radius:999px;padding:.6rem 1.2rem;font-weight:700;
  font-size:14px;cursor:pointer;font-family:inherit;transition:.2s var(--pop)}
.tab.on{background:var(--ink);color:#fff}
.tabpane{display:none}.tabpane.on{display:block}
.dogrid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:760px){.dogrid{grid-template-columns:1fr}}
.do{border-radius:var(--rad);padding:1.3rem 1.5rem}
.do--y{background:var(--t3)}.do--n{background:var(--t1)}
.do h3{font-size:19px;margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.do ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;font-size:14.5px;color:var(--ink2)}

/* ---------- gifting ---------- */
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media(max-width:900px){.gifts{grid-template-columns:1fr}}
.gift{background:var(--white);border-radius:var(--rad-lg);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 3px 0 rgba(32,18,27,.06);transition:.3s var(--ez);position:relative}
.gift:hover{transform:translateY(-6px);box-shadow:0 24px 44px -26px rgba(32,18,27,.42)}
.gift--best{outline:3px solid var(--pink);outline-offset:-3px}
.gift__tag{position:absolute;top:1rem;right:1rem;z-index:2;background:var(--pink);color:#fff;border-radius:999px;
  padding:.35em .8em;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gift__ph{aspect-ratio:4/3;overflow:hidden;background:var(--cream2)}
.gift__ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ez)}
.gift:hover .gift__ph img{transform:scale(1.06)}
.gift__b{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.gift__b h3{font-size:23px}
.gift__pr{font-size:22px;font-weight:800}
.gift ul{margin:.2rem 0 .6rem;padding-left:1.1rem;display:grid;gap:.3rem;font-size:14px;color:var(--ink2)}
.gift .btn{margin-top:auto}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.5rem;max-width:900px}
.faq details{background:var(--white);border-radius:18px;padding:0 1.3rem;transition:.2s var(--ez)}
.faq details[open]{background:var(--cream2)}
.faq summary{cursor:pointer;padding:1.1rem 0;font-weight:700;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--ink2);flex:none}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 1.1rem;color:var(--ink2);font-size:15px;max-width:70ch}

/* ---------- contact / account ---------- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media(max-width:820px){.ways{grid-template-columns:1fr}}
.way{background:var(--white);border-radius:var(--rad);padding:1.4rem;display:grid;gap:.35rem;align-content:start;
  box-shadow:0 3px 0 rgba(32,18,27,.06);transition:.25s var(--ez)}
.way:hover{transform:translateY(-5px)}
.way i{width:44px;height:44px;border-radius:14px;background:var(--_c,var(--t1));display:grid;place-items:center;margin-bottom:.5rem}
.way b{font-size:18px;font-weight:800;letter-spacing:-.03em}
.way p{margin:0;font-size:14px;color:var(--ink2)}
.way a{font-weight:700;border-bottom:1px solid var(--pink);color:var(--pink);font-size:14.5px;justify-self:start;margin-top:.3rem}
.acct{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:start}
@media(max-width:820px){.acct{grid-template-columns:1fr}}
.perks{display:grid;gap:.55rem;margin:1rem 0 0;padding:0;list-style:none;font-size:14.5px;color:var(--ink2)}
.perks li{display:flex;gap:.6rem;align-items:flex-start}
.perks li svg{flex:none;margin-top:2px;color:var(--ok)}

/* ---------- blog ---------- */
.feat{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.2rem,1rem + 1.8vw,2.6rem);align-items:center;
  background:var(--white);border-radius:var(--rad-lg);overflow:hidden}
@media(max-width:860px){.feat{grid-template-columns:1fr}}
.feat__ph{aspect-ratio:4/3;overflow:hidden;background:var(--cream2)}
.feat__ph img{width:100%;height:100%;object-fit:cover}
.feat__b{padding:clamp(1.3rem,1rem + 1.6vw,2.6rem)}
.feat__b h2{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.7rem);margin:.5rem 0 .7rem}
.feat__b p{color:var(--ink2);max-width:46ch}
.postmeta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink2);margin:0 0 1.2rem}
.postmeta b{color:var(--ink)}
.share{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.share span{font-size:13px;font-weight:700;margin-right:.3rem}
.inlineshop{background:var(--t1);border-radius:var(--rad);padding:1.4rem;margin:2rem 0;display:grid;gap:.9rem}
.inlineshop b{font-size:19px;font-weight:800;letter-spacing:-.03em}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.4rem,1rem + 2.4vw,3.4rem);align-items:center}
@media(max-width:880px){.founder{grid-template-columns:1fr}}
.founder__ph{border-radius:var(--rad-lg);overflow:hidden;aspect-ratio:4/5;max-height:600px;background:var(--cream2);position:relative}
.founder__ph img{width:100%;height:100%;object-fit:cover}
.founder__b h2{font-size:clamp(1.6rem,1.2rem + 2vw,2.9rem);margin:.5rem 0 1rem;max-width:20ch}
.founder__b h2 em{color:var(--pink)}
.founder__b p{color:var(--ink2);font-size:16.5px;max-width:52ch}
.founder__sig{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.founder__sig b{display:block;font-family:var(--fs);font-style:italic;font-size:24px;font-weight:400;letter-spacing:-.01em}
.founder__sig span{font-size:13px;color:var(--ink2)}

/* ---------- mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,1fr);gap:.7rem}
.mos__i{border-radius:var(--rad);overflow:hidden;background:var(--cream2);aspect-ratio:1}
.mos__i--big{grid-column:span 2;grid-row:span 2;aspect-ratio:1}
.mos__i img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ez)}
.mos__i:hover img{transform:scale(1.07)}
/* On a phone the big tile spans two columns but only ONE row, while
   grid-auto-rows stayed at minmax(0,1fr): every row was then sized to the
   tallest item on the grid, 358px, so each 173px square sat in a 358px row and
   left 196px of empty cream under it. Measured, not guessed. Rows size to their
   own content here. */
@media(max-width:760px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .mos__i--big{grid-column:span 2;grid-row:span 1}
}

/* the step label used to be an id; it is a class now so two step blocks can
   sit on one page */
.steps__lab{position:absolute;left:1rem;bottom:1rem;z-index:2;background:var(--white);border-radius:999px;
  padding:.5rem 1rem;font-weight:800;font-size:13px}

/* ---------- warning callout ---------- */
.warn{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:var(--t4);
  border-radius:var(--rad);padding:1.2rem 1.4rem;margin-top:1.2rem}
.warn>span{width:42px;height:42px;border-radius:14px;background:rgba(32,18,27,.1);display:grid;place-items:center;flex:none}
.warn p{margin:0;font-size:15px;color:var(--ink2);max-width:80ch}
.warn b{color:var(--ink)}

/* ============================================================================
   WORDPRESS LAYER
   Everything the static preview did not need: WooCommerce's own markup, the
   search panel, mobile nav chrome, forms, and the tablet and phone pass.
   The design tokens above own every value; nothing is restated here.
   ============================================================================ */

/* ---------- Elementor and Hello ---------- */
.site,.site-main,#main,#content{width:100%;max-width:none;margin:0;padding:0}
.elementor-section-wrap,.e-con{max-width:none}
body.belle .elementor-widget-container>*:first-child{margin-top:0}
.elementor-widget:not(:last-child){margin-block-end:0}

/* Belle sections carry their own vertical rhythm, so Elementor must not add
   another one on top. */
.belle-sec{display:block}

/* ---------- header additions ---------- */
.hdr__bar>nav{justify-self:center}
.mnav__hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.mnav__logo img{height:52px;width:auto}
.mnav__search{display:flex;align-items:center;gap:.5rem;background:var(--white);border-radius:999px;
  padding:.35rem .35rem .35rem 1rem;margin-bottom:1rem}
.mnav__search input{flex:1;border:0;background:none;font-family:inherit;font-size:15px;min-width:0;padding:.55rem 0}
.mnav__search input:focus{outline:none}
.mnav__search button{width:40px;height:40px;border:0;border-radius:999px;background:var(--ink);color:var(--cream);
  cursor:pointer;display:grid;place-items:center;flex:none}
.mnav__links{display:grid}
.mnav__foot{display:grid;gap:.5rem;margin-top:1.4rem}

/* ---------- search panel ---------- */
.srch{position:fixed;inset:0;z-index:130;visibility:hidden}
.srch.on{visibility:visible}
.srch__s{position:absolute;inset:0;background:rgba(32,18,27,.5);opacity:0;transition:.3s var(--ez)}
.srch.on .srch__s{opacity:1}
.srch__p{position:absolute;top:0;left:0;right:0;background:var(--cream);transform:translateY(-100%);
  transition:.4s var(--ez);border-radius:0 0 26px 26px;padding:1.4rem 0}
.srch.on .srch__p{transform:none}
.srch__f{display:flex;align-items:center;gap:.9rem}
.srch__f input{flex:1;border:0;background:none;font-family:inherit;font-size:clamp(18px,16px + 1vw,28px);
  font-weight:700;letter-spacing:-.03em;min-width:0;padding:.5rem 0;color:inherit}
.srch__f input:focus{outline:none}

/* ---------- buttons, extra states ---------- */
.btn--off{opacity:.45;pointer-events:none}
.btn.is-busy{opacity:.72;pointer-events:none}
.tk__add.done,.upr__add.done{background:var(--mint);color:var(--ink)}

/* ---------- WooCommerce: notices ---------- */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--white);border:0;border-left:4px solid var(--ink);border-radius:var(--rad-sm);
  padding:1rem 1.2rem;margin:0 0 1rem;font-size:14.5px;list-style:none;color:var(--ink)}
.woocommerce-message{border-left-color:var(--ok)}
.woocommerce-error{border-left-color:var(--err)}
/* WooCommerce puts an icon in a ::before using its own icon font, which this
   theme does not load. The glyph came out as an empty box sitting on top of
   the first word of "Have a coupon?". */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before,
.woocommerce-message::after,.woocommerce-info::after,.woocommerce-error::after{
  content:none!important;display:none!important}
.woocommerce-message .button,.woocommerce-info .button{float:right;background:var(--ink);color:var(--cream);
  border-radius:999px;padding:.5em 1.1em;font-weight:700;font-size:13px;text-decoration:none}

/* ---------- WooCommerce: sort select ---------- */
.woocommerce-ordering select,.shopbar__sort select{border:2px solid var(--line);background:var(--white);
  border-radius:999px;padding:.6rem 1rem;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;color:inherit}
.woocommerce-ordering{margin:0}

/* ---------- WooCommerce: pagination ---------- */
.woocommerce-pagination ul{display:flex;gap:.35rem;list-style:none;margin:0;padding:0;border:0}
.woocommerce-pagination li{border:0}
.woocommerce-pagination a,.woocommerce-pagination span{display:grid;place-items:center;min-width:44px;height:44px;
  padding:0 .8rem;border-radius:999px;background:var(--white);font-weight:700;font-size:14.5px;
  box-shadow:0 3px 0 rgba(32,18,27,.07);transition:.2s var(--pop)}
.woocommerce-pagination a:hover{transform:translateY(-2px);background:var(--ink);color:var(--cream)}
.woocommerce-pagination .current{background:var(--ink);color:var(--cream)}

/* ---------- WooCommerce: variations ---------- */
.variations{width:100%;border:0;margin:0 0 1rem}
.variations th,.variations td{padding:0 0 .6rem;border:0;text-align:left;vertical-align:middle}
.variations label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.variations select{width:100%;padding:.8rem 1rem;border:2px solid var(--line);border-radius:14px;
  font-family:inherit;font-size:15px;background:var(--white)}
.reset_variations{font-size:13px;color:var(--ink2);border-bottom:1px solid var(--line)}
.woocommerce-variation-price{margin-bottom:.8rem;font-size:22px;font-weight:800}
.woocommerce-variation-add-to-cart{display:grid;gap:.6rem}
.woocommerce-variation-add-to-cart .quantity{display:none}
.single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;
  cursor:pointer;border-radius:999px;font-weight:700;font-size:16.5px;padding:1.1em 2.2em;width:100%;
  background:var(--pink);color:#fff;transition:.25s var(--pop);font-family:inherit;line-height:1.1}
.single_add_to_cart_button:hover{transform:translateY(-3px)}

/* ---------- WooCommerce: reviews ---------- */
.belle-reviews{margin-top:1.4rem}
#reviews #comments>h2,#reviews .woocommerce-Reviews-title{display:none}
.commentlist{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.commentlist .comment_container{display:grid;grid-template-columns:auto 1fr;gap:1rem;background:var(--white);
  border-radius:var(--rad);padding:1.2rem 1.3rem}
.commentlist img.avatar{width:46px;height:46px;border-radius:999px}
.comment-text .star-rating{color:var(--butter);margin-bottom:.35rem}
.comment-text p.meta{font-size:12.5px;color:var(--ink2);margin:0 0 .4rem}
.comment-text p.meta strong{color:var(--ink);font-size:14.5px}
.comment-text .description p{font-size:14.5px;color:var(--ink2);margin:0}
#review_form_wrapper{background:var(--white);border-radius:var(--rad);padding:1.4rem 1.5rem;margin-top:1rem}
#review_form_wrapper .comment-reply-title{font-size:19px;font-weight:800;letter-spacing:-.03em;display:block;margin-bottom:.8rem}
#review_form_wrapper input[type=text],#review_form_wrapper input[type=email],#review_form_wrapper textarea{
  width:100%;padding:.85rem 1rem;border:2px solid var(--line);border-radius:14px;font-family:inherit;font-size:15px;background:var(--white)}
#review_form_wrapper .comment-form-rating .stars a{color:var(--butter)}
#review_form_wrapper .submit{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  border-radius:999px;font-weight:700;font-size:15px;padding:1em 1.8em;background:var(--ink);color:var(--cream);font-family:inherit}
.woocommerce-noreviews{color:var(--ink2);font-size:14.5px}

/* ---------- WooCommerce: cart page ---------- */
/* Woo renders the bag as a table. A table cannot be a two column page, so the
   whole thing is taken out of table layout and rebuilt: lines on the left,
   totals on the right, sticky. */
.woocommerce-cart .woocommerce{display:grid;gap:clamp(1rem,.8rem + 1.6vw,2.4rem);align-items:start}
@media(min-width:1000px){
  .woocommerce-cart .woocommerce{grid-template-columns:minmax(0,1fr) 400px}
  .woocommerce-cart .woocommerce-cart-form{grid-column:1}
  .woocommerce-cart .cart-collaterals{grid-column:2;grid-row:1;position:sticky;top:calc(var(--hdr-h) + 16px)}
}
.woocommerce-cart .woocommerce-notices-wrapper{grid-column:1/-1}

.woocommerce-cart-form__contents,
.woocommerce-cart-form__contents tbody,
.woocommerce-cart-form__contents tr,
.woocommerce-cart-form__contents td,
.woocommerce-cart-form__contents th{display:block;width:100%;border:0;padding:0;background:none}
.woocommerce-cart-form__contents thead{display:none}

.woocommerce-cart-form__cart-item{display:grid;grid-template-columns:88px 1fr auto;
  gap:.4rem 1rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.woocommerce-cart-form__cart-item .product-remove{grid-column:3;grid-row:1;justify-self:end;align-self:start}
.woocommerce-cart-form__cart-item .product-thumbnail{grid-column:1;grid-row:1/span 2}
.woocommerce-cart-form__cart-item .product-thumbnail img{width:88px;height:88px;border-radius:16px;object-fit:cover}
.woocommerce-cart-form__cart-item .product-name{grid-column:2;grid-row:1;align-self:end}
.woocommerce-cart-form__cart-item .product-quantity{grid-column:2;grid-row:2;align-self:start}
.woocommerce-cart-form__cart-item .product-subtotal{grid-column:3;grid-row:2;justify-self:end;
  font-weight:800;font-size:16px;align-self:start}
.woocommerce-cart-form__cart-item .product-price{display:none}
.woocommerce-cart-form__cart-item .product-name a{font-size:16.5px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.woocommerce-cart-form__cart-item .product-name .variation{margin:.15rem 0 0;font-size:12.5px;color:var(--ink2)}
.woocommerce-cart-form__cart-item .product-name .variation dt,
.woocommerce-cart-form__cart-item .product-name .variation dd{display:inline;margin:0}
.woocommerce-cart-form__cart-item .product-name .variation p{margin:0;display:inline}
.cart_item a.remove{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;
  background:var(--cream2);color:var(--ink3);font-size:17px;text-decoration:none;line-height:1}
.cart_item a.remove:hover{background:var(--err);color:#fff}
.cart_item .quantity{display:inline-flex}
.cart_item .quantity input{width:74px;padding:.5rem;border:2px solid var(--line);border-radius:999px;
  text-align:center;font-family:inherit;font-weight:700;background:var(--white)}

.woocommerce-cart-form__contents .actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;padding:1.2rem 0 0}
.woocommerce-cart-form__contents .coupon{display:flex;gap:.5rem;flex:1;min-width:260px}
.woocommerce-cart-form__contents .coupon input{flex:1;min-width:0;padding:.8rem 1rem;border:2px solid var(--line);
  border-radius:999px;font-family:inherit;font-size:14.5px;background:var(--white)}
.woocommerce-cart-form__contents .actions button{border:0;cursor:pointer;border-radius:999px;font-weight:700;
  font-size:13.5px;padding:.85em 1.4em;background:var(--ink);color:var(--cream);font-family:inherit;white-space:nowrap}
.woocommerce-cart-form__contents .actions button[disabled]{opacity:.4}
.woocommerce-cart-form__contents .actions button[name="update_cart"]{background:none;border:2px solid var(--line);color:var(--ink2)}

.cart-collaterals{width:100%}
.cart-collaterals .cart_totals{width:100%;float:none;background:var(--white);border-radius:var(--rad);
  padding:clamp(1.1rem,1rem + 1vw,1.7rem)}
.cart_totals h2{font-size:19px;font-weight:800;letter-spacing:-.03em;margin:0 0 .8rem}
.cart_totals table,.cart_totals tbody,.cart_totals tr{display:block;width:100%;border:0}
.cart_totals th,.cart_totals td{display:block;border:0;padding:0;font-size:14.5px;text-align:left}
.cart_totals tr{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.35rem 0}
.cart_totals th{font-weight:600;color:var(--ink2)}
.cart_totals td{text-align:right;font-weight:700}
.cart_totals .order-total{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.7rem}
.cart_totals .order-total th,.cart_totals .order-total td{font-weight:800;font-size:19px;color:var(--ink)}
.cart_totals .woocommerce-shipping-destination,
.cart_totals .woocommerce-shipping-calculator{font-size:12.5px;color:var(--ink2);font-weight:500}
.wc-proceed-to-checkout{margin-top:1rem;padding:0}
.wc-proceed-to-checkout .checkout-button{display:flex;align-items:center;justify-content:center;width:100%;
  border-radius:999px;font-weight:700;font-size:16.5px;padding:1.1em 2.2em;background:var(--pink);color:#fff;
  text-decoration:none;transition:.25s var(--pop);border:0}
.wc-proceed-to-checkout .checkout-button:hover{transform:translateY(-3px);background:var(--pink)}
.cart-empty{text-align:center;font-size:20px;font-weight:700}
.return-to-shop{display:flex;justify-content:center;margin-top:1rem}
.return-to-shop .button{border-radius:999px;font-weight:700;padding:1em 1.8em;background:var(--ink);color:var(--cream);text-decoration:none}

/* ---------- WooCommerce: checkout ---------- */
/* Woo ships the checkout as one long column. On a desktop that leaves half the
   screen empty and pushes the order summary a scroll below the form, so the
   form goes left and the summary sits beside it, in view the whole way down. */
.woocommerce-checkout form.checkout{display:grid;gap:clamp(1rem,.8rem + 1.6vw,2.4rem);align-items:start}
@media(min-width:1000px){
  .woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1fr) 400px}
  /* Explicit placement, or the summary lands level with the bottom of a very
     tall billing form instead of at the top of the column. */
  .woocommerce-checkout form.checkout>.col2-set,
  .woocommerce-checkout form.checkout>.woocommerce-additional-fields{grid-column:1}
  .woocommerce-checkout form.checkout>.belle-review-col{grid-column:2;grid-row:1/-1;
    position:sticky;top:calc(var(--hdr-h) + 16px)}
}

.belle-review-col{display:grid;gap:.8rem;align-content:start}
.belle-review-col #order_review_heading{margin:0}

/* WooCommerce floats these at 47% with a three-class selector, which beats a
   two-class one however late it loads. Match its specificity to undo it. */
.woocommerce .woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set{display:grid;gap:0;width:100%}
.woocommerce .woocommerce-checkout .col2-set .col-1,
.woocommerce .woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none;max-width:none;padding:0}
.woocommerce .woocommerce-checkout .form-row-first,
.woocommerce .woocommerce-checkout .form-row-last,
.woocommerce .woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last,
.woocommerce-checkout .form-row-wide{width:100%;float:none;max-width:none}
.woocommerce-billing-fields,.woocommerce-additional-fields,.woocommerce-shipping-fields{
  background:var(--white);border-radius:var(--rad);padding:clamp(1.1rem,1rem + 1vw,1.7rem);margin-bottom:.9rem}
.woocommerce-billing-fields h3,.woocommerce-additional-fields h3,
.woocommerce-shipping-fields h3,#order_review_heading{
  font-size:20px;font-weight:800;letter-spacing:-.03em;margin:0 0 1rem}
.woocommerce-shipping-fields h3 label{font-weight:800;font-size:20px}

.woocommerce-checkout .form-row{display:grid;gap:.4rem;margin:0 0 .8rem;padding:0;float:none;width:100%}
.woocommerce-checkout .form-row label{font-size:13px;font-weight:700}
.woocommerce-checkout .form-row .required{color:var(--pink);text-decoration:none;border:0}
.woocommerce-checkout input.input-text,.woocommerce-checkout textarea,
.woocommerce-checkout select,.select2-container .select2-selection--single{
  padding:.85rem 1rem;border:2px solid var(--line);border-radius:14px;font-family:inherit;font-size:15.5px;
  background:var(--white);width:100%;height:auto;color:inherit;box-sizing:border-box}
.woocommerce-checkout input.input-text:focus,.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{outline:none;border-color:var(--ink)}
.select2-container--default .select2-selection--single{border:2px solid var(--line);border-radius:14px;height:auto;padding:.85rem 1rem}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.4;padding:0;color:inherit}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:10px;height:auto}
.woocommerce-checkout .form-row-first,.woocommerce-checkout .form-row-last{width:100%}
@media(min-width:620px){
  .woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper{
    display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
  .woocommerce-checkout .form-row-wide,
  .woocommerce-checkout #billing_address_1_field,
  .woocommerce-checkout #billing_address_2_field{grid-column:1/-1}
}
.woocommerce-checkout .create-account,
.woocommerce-checkout .woocommerce-account-fields{grid-column:1/-1}
.woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:.55rem;font-size:13.5px;color:var(--ink2)}
.woocommerce-form__input-checkbox{width:17px;height:17px;accent-color:var(--ink);margin:0}

/* coupon */
.woocommerce-form-coupon-toggle{margin-bottom:.9rem}
.woocommerce-form-coupon-toggle .woocommerce-info{background:var(--butter);border:0;border-radius:var(--rad-sm);
  padding:.85rem 1.1rem;font-size:14px;font-weight:600;color:var(--ink)}
.checkout_coupon{background:var(--white);border:0;border-radius:var(--rad);padding:1.1rem;margin:0 0 .9rem}
.checkout_coupon .form-row{margin:0}

#order_review{background:var(--white);border-radius:var(--rad);padding:clamp(1.1rem,1rem + 1vw,1.7rem)}
.woocommerce-checkout-review-order-table{width:100%;border:0;border-collapse:collapse}
.woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{
  border:0;padding:.5rem 0;font-size:14.5px;text-align:left;vertical-align:top}
.woocommerce-checkout-review-order-table td{text-align:right}
.woocommerce-checkout-review-order-table .cart_item td{border-bottom:1px solid var(--line);padding-bottom:.7rem}
.woocommerce-checkout-review-order-table .product-name{font-weight:700;color:var(--ink)}
.woocommerce-checkout-review-order-table .product-name .variation{
  display:block;font-weight:500;font-size:12.5px;color:var(--ink2);margin:.2rem 0 0}
.woocommerce-checkout-review-order-table .product-name .variation dt,
.woocommerce-checkout-review-order-table .product-name .variation dd{display:inline;margin:0}
.woocommerce-checkout-review-order-table .product-quantity{font-weight:500;color:var(--ink2)}
.woocommerce-checkout-review-order-table tfoot th{font-weight:600;color:var(--ink2)}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td{font-weight:800;font-size:19px;color:var(--ink);
  border-top:1px solid var(--line);padding-top:.7rem}

.wc_payment_methods{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.5rem}
.wc_payment_method{display:grid;gap:.5rem}
.wc_payment_method>label{display:flex;align-items:center;gap:.7rem;border:2px solid var(--line);border-radius:16px;
  padding:.9rem 1rem;cursor:pointer;font-weight:700;font-size:14.5px;margin:0}
.wc_payment_method>input{display:none}
.wc_payment_method>input:checked+label{border-color:var(--ink);background:var(--cream2)}
.wc_payment_method>label img{max-height:22px;width:auto;margin-left:auto}
.payment_box{background:var(--cream2);border-radius:14px;padding:.9rem 1.1rem;font-size:13.5px;color:var(--ink2)}
.payment_box::before{display:none}
.payment_box p{margin:0}
.woocommerce-privacy-policy-text{font-size:12px;color:var(--ink3);margin:.8rem 0}
.woocommerce-terms-and-conditions-wrapper{font-size:12.5px;color:var(--ink2);margin-bottom:.8rem}
.woocommerce-terms-and-conditions-checkbox-text{display:inline}
#place_order{display:flex;align-items:center;justify-content:center;width:100%;border:0;cursor:pointer;
  border-radius:999px;font-weight:700;font-size:16.5px;padding:1.1em 2.2em;background:var(--pink);color:#fff;
  transition:.25s var(--pop);font-family:inherit}
#place_order:hover{transform:translateY(-3px)}
.woocommerce-checkout #payment{background:transparent;border-radius:0}

/* ---------- WooCommerce: account ---------- */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.woocommerce-MyAccount-navigation a{display:block;padding:.7rem 1rem;border-radius:14px;font-weight:700;font-size:14.5px}
.woocommerce-MyAccount-navigation li.is-active a,.woocommerce-MyAccount-navigation a:hover{background:var(--ink);color:var(--cream)}
.woocommerce-MyAccount-content{background:var(--white);border-radius:var(--rad);padding:clamp(1.1rem,1rem + 1vw,1.8rem)}
.woocommerce-form{display:grid;gap:.2rem}
.woocommerce-form-login__submit,.woocommerce-form-register__submit,.woocommerce-Button{
  display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:999px;
  font-weight:700;font-size:15px;padding:1em 1.8em;background:var(--ink);color:var(--cream);font-family:inherit}
.woocommerce-orders-table{width:100%;border:0}
.woocommerce-orders-table th,.woocommerce-orders-table td{border:0;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:14.5px;text-align:left}

/* ---------- the sticky buy bar sits above the phone chrome ---------- */
.stickybuy{padding-bottom:env(safe-area-inset-bottom)}

/* ============================================================================
   RESPONSIVE
   Measured at 1024, 900, 760 and 390 rather than guessed. Touch targets never
   drop below 44px, and nothing scrolls sideways.
   ============================================================================ */

/* ---------- laptop ---------- */
@media(max-width:1200px){
  :root{--hdr-h:92px}
  .rail{grid-template-columns:1fr 340px}
}

/* ---------- tablet ---------- */
@media(max-width:1024px){
  :root{--hdr-h:88px}
  .brand img{height:64px}
  .hdr.stuck .brand img{height:52px}
  .hdr__bar{grid-template-columns:auto 1fr auto}
  .mega__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
  .mega__promo{grid-column:1/-1}
  .trust__i{padding:1rem}
  .trust__i .ic{width:38px;height:38px;border-radius:12px}
  .trust__i b{font-size:13.5px}
  .trust__i span{font-size:12px}
  .bighero{min-height:300px}
  .founder{grid-template-columns:1fr;gap:1.6rem}
  .founder__ph{aspect-ratio:16/11;max-height:400px}
  .steps__ph{aspect-ratio:16/11}
  .revsum{grid-template-columns:1fr;text-align:left}
  .stats{grid-template-columns:repeat(4,1fr)}
  .sizeguide{grid-template-columns:repeat(3,1fr)}
}

/* ---------- narrow tablet ---------- */
@media(max-width:900px){
  .rail{grid-template-columns:1fr}
  .rail__side{position:relative;top:0;grid-template-columns:1fr 1fr;display:grid;gap:.9rem}
  .rail__side>*{margin:0}
  .gifts{grid-template-columns:1fr}
  .gift{display:grid;grid-template-columns:200px 1fr;align-items:stretch}
  .gift__ph{aspect-ratio:1;height:100%}
  .helpgrid{grid-template-columns:1fr 1fr}
  .gift__b{padding:1.2rem 1.3rem}
}

/* ---------- large phone ---------- */
@media(max-width:760px){
  :root{--hdr-h:76px;--rad:18px;--rad-lg:24px}
  .sec{padding:clamp(1.8rem,1.4rem + 2vw,3rem) 0}
  .sechead{margin-bottom:1.1rem}
  .sechead a.more{font-size:12.5px;padding:.6rem 1.1rem}
  .rail__side{grid-template-columns:1fr}
  .gift{grid-template-columns:1fr}
  .gift__ph{aspect-ratio:4/3}
  .stats{grid-template-columns:1fr 1fr}
  .sizeguide{grid-template-columns:repeat(2,1fr)}
  .quote{padding:1.6rem 1.2rem}
  .tl{grid-template-columns:1fr;gap:.5rem}
  .tl i{justify-self:start}
  .warn{grid-template-columns:1fr;gap:.7rem}
  .prose{font-size:16px}
  .bighero__in{padding:1.2rem}
  .woocommerce-cart-form__cart-item{grid-template-columns:72px 1fr;gap:.8rem}
  .woocommerce-cart-form__cart-item .product-thumbnail img{width:72px}
  .woocommerce-cart-form__cart-item .product-subtotal{grid-column:2;text-align:left;font-weight:800}
  .commentlist .comment_container{grid-template-columns:1fr}
  .commentlist img.avatar{display:none}
}

/* ---------- phone ---------- */
@media(max-width:600px){
  .shell{padding:0 1rem}
  .tick__t{font-size:11.5px;gap:1.6rem}
  .tools{gap:.3rem}
  .tool{width:44px;height:44px}

  /* Cards go two up, and every tap target clears 44px. */
  .grid,.grid--4,.grid--3{grid-template-columns:1fr 1fr;gap:.6rem}
  .tk__n{font-size:15px}
  .tk__m{font-size:11px}
  .tk__p{font-size:15px}
  .tk__add{padding:.6rem .9rem;font-size:12px;min-height:36px}
  .tk__fav{width:36px;height:36px}
  .tk__sw{width:30px;height:30px}

  .slid__t>*{width:min(72vw,260px)}
  .reels{grid-template-columns:1fr 1fr;gap:.6rem}
  .iggrid{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .helpgrid{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr 1fr}

  /* Buy box: the price and the button are what matter on a phone. */
  .pdp__price b{font-size:26px}
  .opt__row button{padding:.75rem 1.1rem;min-height:46px}
  .addon{grid-template-columns:auto auto 1fr;gap:.6rem;padding:.75rem}
  .addon__p{grid-column:3;justify-self:end}
  .usp{grid-template-columns:1fr;gap:.4rem}
  .usp div{display:flex;align-items:center;gap:.7rem;text-align:left;padding:.7rem .9rem}
  .usp div i{margin:0}

  /* The drawer becomes a sheet from the bottom, which is the reachable edge. */
  .drw__p{top:auto;left:0;width:100%;max-height:92vh;border-radius:26px 26px 0 0;
    transform:translateY(100%)}
  .drw.on .drw__p{transform:none}
  .drw__up{max-height:none}

  .stickybuy__in{padding:.6rem 0}
  .steps__ph{aspect-ratio:1}
  .st{padding:.9rem 1rem;gap:.8rem}
  .st i{width:34px;height:34px;border-radius:11px;font-size:14px}
  .st b{font-size:16px}
  .st p{font-size:13.5px}

  .ftr{border-radius:26px 26px 0 0}
  .ftr__top{grid-template-columns:1fr 1fr;gap:1.4rem}
  .ftr__brand{grid-column:1/-1}
  .ftr__logo img{height:80px}
  .ftr__base{flex-direction:column;align-items:flex-start;gap:.6rem}
  .ftr__pay{display:flex;gap:.35rem;flex-wrap:wrap}
  .ftr__pay span{background:rgba(255,249,242,.1);border-radius:7px;padding:.28rem .55rem;font-size:10.5px;font-weight:700}

  .bb{padding:1.2rem}
  .bb__tot{min-width:0}
  .revsum{padding:1.1rem}
  .revsum__big b{font-size:36px}
}

/* ---------- small phone ---------- */
@media(max-width:380px){
  .grid,.grid--4,.grid--3{grid-template-columns:1fr}
  .reels{grid-template-columns:1fr}
  .tk__n{font-size:16px}
}

/* ---------- print ---------- */
@media print{
  .hdr,.tick,.ftr,.drw,.mnav,.srch,.stickybuy,.toast{display:none!important}
  .rv{opacity:1!important}
}

/* ---------- bundle slots, filled ---------- */
.slot--full{border-style:solid;border-color:rgba(255,255,255,.85);padding:0}
.slot img{width:100%;height:100%;object-fit:cover}
.bb__was:empty{display:none}
.bb__add[disabled]{opacity:.5;cursor:default}

/* ---------- hero slides stack in one column ---------- */
.hero__l{position:relative}
.hero__slide{display:none}
.hero__slide.on{display:block}
/* Every slide's headline is the same object whether it renders as the h1 or
   not, so it takes the same class rather than being matched by position. */
p.hero__h{font-weight:800;letter-spacing:-.038em}
.hero__rack{display:none;grid-template-columns:repeat(2,1fr);gap:.7rem}
.hero__rack.on{display:grid}
.hero__r{display:block}

/* ---------- WhatsApp screenshot card ---------- */
/* The customer messages, as a slider of whole screenshots.

   Two things were wrong with the grid. It could only show four of nineteen,
   and it cropped. The screenshots are not one shape: thirteen are whole phone
   screens at about 0.46 wide to tall, six are crops, and one is 1.64. Filling
   one box with `cover` took better than half the width off the wide ones and
   cut the sentence in half, which is what was visible on screen.

   So nothing is cropped. Each screenshot is shown whole inside a box of
   consistent height, centred on a soft ground, and the row scrolls. */
.wagrid{display:flex}
.slid__t.wagrid>*{flex:none;width:clamp(230px,19vw,290px);scroll-snap-align:start}

/* Flex, not grid. As a grid the single row was auto sized, so it grew to the
   image's natural 592px and `max-height:100%` on the image resolved against
   that row rather than against the card: the constraint was computed, met, and
   meaningless, and the card's own overflow did the cropping. A flex item's
   percentage max-height resolves against the container's definite height. */
.wa--shot{background:var(--cream2);padding:0;overflow:hidden;position:relative;
  height:clamp(330px,30vw,430px);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(32,18,27,.08)}
/* Sized by max-width and max-height rather than by width/height plus
   object-fit. The theme has a global `img{height:auto}`, which beats
   `height:100%` here, so the image kept its natural ratio, grew taller than the
   card and was clipped by the card's own overflow: contain was computed and
   had nothing left to do. Intrinsic sizing inside a centred grid cell cannot be
   undone by a later generic rule. */
.wa--shot img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}

/* The drawn placeholder threads are not screenshots and have no fixed height,
   so they keep the card shape they always had. */
.wa:not(.wa--shot){height:clamp(330px,30vw,430px)}

@media(max-width:600px){
  .slid__t.wagrid>*{width:min(70vw,260px)}
}

/* ---------- a hidden card must not hold its grid cell ---------- */
.tk[hidden]{display:none!important}

/* ---------- the swatches plugin styles a button we do not use ---------- */
.wcboost-variation-swatches,.woocommerce-variation-add-to-cart .quantity,
.compare-button,.woocommerce-product-details__short-description{display:none}
.pdp__buybox .single_add_to_cart_button{background:var(--pink)}

/* ---------- the boilerplate description tables ---------- */
.pdp__acc table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:14px}
.pdp__acc th,.pdp__acc td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}
.pdp__acc th{background:var(--cream2);font-weight:700;width:32%}
.pdp__acc ul{margin:0 0 1rem;padding-left:1.1rem;color:var(--ink2);font-size:14.5px;display:grid;gap:.35rem}
.pdp__acc strong{color:var(--ink)}

/* ---------- the swatch plugin colours our own buttons ---------- */
.opt__row button{color:var(--ink)}
.opt__row button.on{color:#fff}

/* ============================================================================
   BEATING WOOCOMMERCE'S OWN RULES
   Woo styles its buttons with selectors like `.woocommerce a.button.alt`, and
   its cart rows with `table tr`. Loading later is not enough against those, so
   this block matches their specificity with a body.belle prefix.

   It does NOT nest `.woocommerce` inside that prefix: WooCommerce puts the
   class on the BODY element, so `body.belle .woocommerce x` asks for a
   descendant that is the body itself and matches nothing. That mistake left
   the shop pagination in Woo's default grey box while the same rules worked on
   the cart, where a wrapper div happens to carry the class too.
   ============================================================================ */

/* the cart line: a grid, not a stack of table rows */
body.belle .woocommerce-cart-form__contents tr.cart_item{
  display:grid;grid-template-columns:88px 1fr auto;gap:.4rem 1rem;align-items:center;
  padding:1.1rem 0;border-bottom:1px solid var(--line)}
body.belle .woocommerce-cart-form__contents tr.cart_item td{display:block;border:0;padding:0}
body.belle .woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-thumbnail{grid-column:1;grid-row:1/span 2}
body.belle .woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-name{grid-column:2;grid-row:1;align-self:end}
body.belle .woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-quantity{grid-column:2;grid-row:2;align-self:start}
body.belle .woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-remove{grid-column:3;grid-row:1;justify-self:end;align-self:start}
body.belle .woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-subtotal{
  grid-column:3;grid-row:2;justify-self:end;align-self:start;font-weight:800;font-size:16px}
body.belle .woocommerce-cart-form__contents tr.cart_item td.product-price{display:none}
body.belle .woocommerce-cart-form__contents tr.actions{display:block;padding:1.2rem 0 0;border:0}

/* the totals: label left, figure right */
body.belle .cart_totals table.shop_table,
body.belle .cart_totals table.shop_table tbody{display:block;width:100%;border:0}
body.belle .cart_totals table.shop_table tr{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;padding:.4rem 0;border:0}
body.belle .cart_totals table.shop_table th,
body.belle .cart_totals table.shop_table td{display:block;border:0;padding:0;background:none;font-size:14.5px}
body.belle .cart_totals table.shop_table th{font-weight:600;color:var(--ink2);width:auto}
body.belle .cart_totals table.shop_table td{text-align:right;font-weight:700}
body.belle .cart_totals table.shop_table tr.order-total{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.7rem}
body.belle .cart_totals table.shop_table tr.order-total th,
body.belle .cart_totals table.shop_table tr.order-total td{font-weight:800;font-size:19px;color:var(--ink)}

/* every Woo button takes the brand, not Woo's purple */
body.belle a.button,
body.belle button.button,
body.belle input.button,
body.belle a.button.alt,
body.belle button.button.alt,
body.belle input.button.alt,
body.belle #respond input#submit{
  background-color:var(--ink);color:var(--cream);border-radius:999px;font-weight:700;font-size:14px;
  padding:.9em 1.6em;border:0;font-family:inherit;line-height:1.2;text-shadow:none}
body.belle a.button:hover,
body.belle button.button:hover,
body.belle input.button:hover,
body.belle a.button.alt:hover,
body.belle button.button.alt:hover{background-color:var(--pink);color:#fff}

body.belle .wc-proceed-to-checkout a.checkout-button,
body.belle .wc-proceed-to-checkout a.checkout-button.alt,
body.belle #place_order,
body.belle button.single_add_to_cart_button{
  display:flex;align-items:center;justify-content:center;width:100%;
  background-color:var(--pink);color:#fff;font-size:16.5px;padding:1.1em 2.2em;border-radius:999px}
body.belle .wc-proceed-to-checkout a.checkout-button:hover,
body.belle #place_order:hover{background-color:var(--pink);transform:translateY(-3px)}

/* Woo's quantity box */
body.belle .quantity input.qty{width:74px;padding:.5rem;border:2px solid var(--line);
  border-radius:999px;text-align:center;font-family:inherit;font-weight:700;background:var(--white)}

/* Woo's own product-grid list styling, which we replaced with our own cards */
body.belle ul.products,
body.belle ul.products{margin:0;padding:0;list-style:none}

/* Woo sizes the totals panel at 48% and floats it, inside a column that is
   already 400px, which squeezed the checkout button onto three lines. */
body.belle .cart-collaterals,
body.belle .cart-collaterals{width:100%}
body.belle .cart-collaterals .cart_totals,
body.belle .cart-collaterals .cart_totals{width:100%;float:none;text-align:left}
body.belle .cart-collaterals .cross-sells{display:none}

/* Woo tints alternate cells; the card is the surface here. */
body.belle table.shop_table td,
body.belle table.shop_table th,
body.belle table.shop_table tbody th,
body.belle table.shop_table tfoot td,
body.belle table.shop_table tfoot th{background:none}
body.belle table.shop_table{border:0;border-radius:0;border-collapse:collapse}

body.belle .woocommerce-cart-form{background:var(--white);border-radius:var(--rad);
  padding:clamp(1rem,.9rem + 1vw,1.6rem)}
body.belle .woocommerce-cart-form__contents tr.cart_item td.product-thumbnail img{
  width:88px;height:88px;border-radius:16px;object-fit:cover;max-width:none}

/* the update button reads as secondary, and its disabled state is legible */
body.belle button.button[name="update_cart"]{
  background:none;border:2px solid var(--line);color:var(--ink2)}
body.belle button.button[name="update_cart"]:disabled,
body.belle button.button:disabled[disabled]{
  background:none;border:2px solid var(--line);color:var(--ink3);opacity:1;cursor:default;padding:.9em 1.6em}

/* ---------- mega menu, filled out ---------- */
.mega__in{grid-template-columns:repeat(4,minmax(0,1fr)) 1.25fr;gap:1.6rem}
.mega ul a{justify-content:flex-start}
.mega ul a>span:last-of-type{text-transform:capitalize}
.mega ul a em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--ink3)}
.mega ul a:hover em{color:var(--ink2)}
.mega .chip svg{width:13px;height:13px}
.mega__feat{display:grid;gap:.5rem;align-content:start}
.mfeat{display:grid;grid-template-columns:56px 1fr;gap:.7rem;align-items:center;background:var(--cream);
  border-radius:14px;padding:.45rem;transition:.2s var(--ez)}
.mfeat:hover{background:var(--cream2)}
.mfeat__ph{width:56px;aspect-ratio:1;border-radius:11px;overflow:hidden;background:var(--cream2)}
.mfeat__ph img{width:100%;height:100%;object-fit:cover}
.mfeat__b b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.mfeat__b span{font-size:12.5px;color:var(--ink2)}
.mfeat__b del{color:var(--ink3);font-size:11.5px;margin-right:.25rem}
.mega__promo{margin-top:.3rem;padding:1.1rem}
.mega__promo p{margin:.35rem 0 0;font-size:13px}
@media(max-width:1280px){.mega__in{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
  .mega__feat{grid-column:1/-1;grid-template-columns:1fr 1fr auto;align-items:stretch}
  .mega__feat h4{grid-column:1/-1}}

/* ============================================================================
   ROUND TWO OF FIXES
   ============================================================================ */

/* ---------- icons that were sitting off centre ---------- */
/* The "+" is a text glyph with its own baseline, so centring the box is not
   enough; the line box has to be centred too. */
/* The "+" is a text glyph with its own baseline, so centring the box is not
   enough. The label is emptied on the button and drawn by the pseudo-element,
   which is centred by the flex box rather than by the font metrics. */
.mini__add{display:inline-flex;align-items:center;justify-content:center;padding:0;
  width:34px;height:34px;font-size:0;line-height:0}
.mini__add::before{content:"+";display:block;font-size:21px;font-weight:400;line-height:1}
.tk__fav{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0;width:34px;height:34px}
.tk__fav svg,.mini__add svg{display:block}
.tool,.drw__x,.slid__nav button,.upr__add,.tk__add{line-height:1}
.tool svg,.drw__x svg,.slid__nav button svg{display:block}
.trust__i .ic svg,.usp div i svg,.way i svg,.warn>span svg,.help__i svg{display:block}
.help__i{display:grid;place-items:center}

/* ---------- video reviews: five clips, two rows ---------- */
.reels{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.reels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.reels{grid-template-columns:1fr 1fr}}
.reel--cta{justify-content:center}

/* ---------- the bundle builder ---------- */
.bb{grid-template-columns:minmax(0,1fr) 300px;align-items:stretch}
.bb__l{min-width:0}
.bb__tot{display:flex;flex-direction:column;justify-content:center}
.slot{position:relative;display:grid;place-items:center;padding:0;overflow:hidden}
.slot__empty{display:grid;place-items:center;gap:.25rem;opacity:.85;padding:.4rem;text-align:center}
.slot__empty i{font-style:normal;font-size:11px;font-weight:700;line-height:1.15}
.slot__empty svg{display:block}
.slot--full{border-style:solid;border-color:rgba(255,255,255,.9)}
.slot img{width:100%;height:100%;object-fit:cover}
.slot__x{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:999px;
  background:rgba(32,18,27,.72);color:#fff;cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center;padding:0}
.bb__pick{margin-top:1.1rem}
.bb__pick>b{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  opacity:.75;margin-bottom:.5rem}
.bb__strip{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:none}
.bb__strip::-webkit-scrollbar{display:none}
.bbp{flex:none;width:78px;border:0;background:none;padding:0;cursor:pointer;color:inherit;
  display:grid;gap:.3rem;font-family:inherit}
/* 5:4, so a pack shot is not sliced down both sides in the pick row. */
.bbp img{width:78px;height:62px;object-fit:cover;border-radius:14px;
  outline:2px solid transparent;outline-offset:2px;transition:.2s var(--pop)}
.bbp:hover img{transform:translateY(-3px)}
.bbp.on img{outline-color:#fff}
.bbp span{font-size:10.5px;line-height:1.2;opacity:.85;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.bb__save{display:block;font-size:12.5px;font-weight:700;margin-top:.6rem;opacity:.9}
.bb__add[disabled]{opacity:.45;cursor:default}
@media(max-width:900px){.bb{grid-template-columns:1fr}.bb__tot{min-width:0}}


/* the founder photograph, same treatment */
.founder__ph{max-height:none;height:100%;min-height:clamp(320px,30vw,500px)}

/* ---------- pull quote: a ground with something in it ---------- */
.quote{position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,61,127,.28), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(123,63,160,.32), transparent 46%),
    radial-gradient(circle at 72% 12%, rgba(255,216,77,.14), transparent 38%),
    var(--ink)}
.quote__mark{position:absolute;font-family:var(--fs);font-style:italic;color:rgba(255,249,242,.07);
  line-height:.7;pointer-events:none;user-select:none}
.quote__mark--o{top:-.1em;left:.15em;font-size:clamp(7rem,4rem + 14vw,15rem)}
.quote__mark--c{bottom:-.42em;right:.15em;font-size:clamp(7rem,4rem + 14vw,15rem)}
.quote__in{position:relative;z-index:2}
.quote__stars{display:inline-flex;gap:3px;color:var(--butter);margin-bottom:1rem}
.quote__stars svg{display:block}
.quote p{position:relative;z-index:2}
.quote span{position:relative;z-index:2}

/* ============================================================================
   ROUND THREE OF FIXES
   ============================================================================ */

/* ---------- the mega menu inherited the nav's hover ----------
   `.nav a:hover` paints ink on cream, and the mega panel lives inside .nav, so
   every link in it went cream-on-cream on hover and disappeared. Scope the
   nav's own hover to its top level only. */
.nav>li>a:hover,.nav>li>button:hover,.nav>li.on>button,.nav>li>a[aria-current]{
  background:var(--ink);color:var(--cream)}
.nav .mega a:hover,.nav .mega a:focus-visible{background:var(--cream2);color:var(--ink)}
.nav .mega a{color:var(--ink)}
.nav .mega .btn{color:var(--cream)}
.nav .mega .btn:hover{background:var(--pink);color:#fff}

/* ---------- bag drawer: the line reads name, then meta, then controls ---------- */
.li{grid-template-columns:64px 1fr auto;align-items:start;gap:.85rem}
.li__ph{align-self:start}
.li>span:nth-child(2){display:grid;gap:.15rem;min-width:0}
.li b{font-size:14.5px;line-height:1.25}
.li span span{font-size:12.5px;color:var(--ink2)}
/* The stepper was inline-flex, so it sat on the same line as the price and
   pushed into the total. It gets its own row, aligned left. */
.li .qty{display:inline-flex;width:fit-content;margin-top:.35rem;background:var(--cream2)}
.li .qty button{width:30px;height:30px;display:grid;place-items:center;font-size:15px;line-height:1;padding:0}
.li .qty span{min-width:22px;text-align:center;font-weight:800;font-size:13.5px;color:var(--ink)}
.li>b:last-child{font-size:15px;font-weight:800;white-space:nowrap;padding-top:.1rem}

/* ---------- drawer upsell: the price on the pill stays white ---------- */
.upr__add,.upr__add *{color:#fff}
.upr__add .woocommerce-Price-amount,.upr__add bdi,.upr__add .woocommerce-Price-currencySymbol{color:#fff}
.upr__add.done,.upr__add.done *{color:var(--ink)}
.upr__add{display:inline-flex;align-items:center;gap:.15rem;white-space:nowrap}
.upr{grid-template-columns:46px 1fr auto;align-items:center}
.upr>span:nth-child(2){min-width:0}
.upr b{white-space:normal}

/* ---------- header tools: every glyph on the same optical centre ---------- */
.tools{align-items:center}
.tool{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0;flex:none}
.tool>svg{display:block;margin:0}
.tool b{top:-2px;right:-4px}

/* ---------- pagination: no stray border, brand active state ---------- */
body.belle nav.woocommerce-pagination{margin:0;text-align:center}
body.belle nav.woocommerce-pagination ul{display:inline-flex;gap:.35rem;border:0;
  list-style:none;margin:0;padding:0;white-space:normal}
body.belle nav.woocommerce-pagination ul li{border:0;margin:0;padding:0;overflow:visible;float:none;display:block}
body.belle nav.woocommerce-pagination ul li a,
body.belle nav.woocommerce-pagination ul li span{
  display:grid;place-items:center;min-width:44px;height:44px;padding:0 .8rem;border-radius:999px;
  background:var(--white);color:var(--ink);font-weight:700;font-size:14.5px;
  box-shadow:0 3px 0 rgba(32,18,27,.07);transition:.2s var(--pop);text-decoration:none}
body.belle nav.woocommerce-pagination ul li a:hover,
body.belle nav.woocommerce-pagination ul li a:focus{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
body.belle nav.woocommerce-pagination ul li span.current{background:var(--ink);color:var(--cream)}

/* ---------- help cards: the tint is a holder for an icon ---------- */
.help__i{width:44px;height:44px;display:grid;place-items:center;color:var(--ink)}
.help__i svg{display:block}


/* ---------- account, signed out ---------- */
/* WooCommerce prints the heading, the form and (when registration is on) the
   two column set as siblings, so the wrapper has to place them explicitly or
   the heading takes column one and the form lands in column two. */
.acctwrap{display:grid;gap:clamp(1rem,.8rem + 1.6vw,2.4rem);align-items:start}
@media(min-width:900px){
  .acctwrap{grid-template-columns:minmax(0,1fr) 360px}
  .acctwrap>h2{grid-column:1;grid-row:1;margin:0}
  .acctwrap>form.login,
  .acctwrap>form.register,
  .acctwrap>.u-columns{grid-column:1}
  .acctwrap>.acctside{grid-column:2;grid-row:1/span 4;align-self:start}
}
/* Login and register stack, so the third column is the reasons, not a form. */
body.belle .woocommerce-account .u-columns{display:grid;gap:.9rem;grid-template-columns:1fr}
body.belle .woocommerce-account .u-columns>div{width:100%;float:none;margin:0}
body.belle .woocommerce-account .u-column1.col-1,
body.belle .woocommerce-account .u-column2.col-2{width:100%;float:none;margin:0}
body.belle form.login,
body.belle form.register{background:var(--white);border:0;border-radius:var(--rad);
  padding:clamp(1.2rem,1rem + 1.2vw,2rem);margin:0}
.woocommerce-account h2{font-size:clamp(1.4rem,1.2rem + 1vw,2rem);margin:0 0 1rem}
.acctside{background:var(--white);border-radius:var(--rad);padding:clamp(1.2rem,1rem + 1.2vw,2rem)}
.acctside h2{font-size:22px;margin-bottom:.8rem}
.acctside .perks li{display:flex;gap:.6rem;align-items:flex-start;font-size:14.5px;color:var(--ink2)}
.acctside .perks li svg{flex:none;margin-top:2px;color:var(--ok)}
.acctside__note{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.acctside__note b{display:block;font-size:16px;font-weight:800;letter-spacing:-.03em;margin-bottom:.3rem}
.acctside__note p{font-size:13.5px;color:var(--ink2);margin:0 0 .9rem}
body.belle .woocommerce-account .woocommerce-form-login__rememberme{display:flex;align-items:center;gap:.5rem;font-size:13.5px}
body.belle .woocommerce-account .lost_password{font-size:13.5px}
body.belle .woocommerce-account .lost_password a{color:var(--pink);border-bottom:1px solid var(--pink)}

/* ---------- account, signed in ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:1rem}
@media(min-width:900px){
  body.belle .woocommerce-account .woocommerce-MyAccount-navigation{width:250px;float:left;margin-right:2rem}
  body.belle .woocommerce-account .woocommerce-MyAccount-content{width:calc(100% - 282px);float:right;margin:0}
}
.acctwelcome{background:var(--t1);border-radius:var(--rad);padding:clamp(1.2rem,1rem + 1.2vw,2rem);margin-bottom:1.2rem}
.acctwelcome h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);margin:.3rem 0 .5rem}
.acctwelcome p{color:var(--ink2);max-width:52ch;margin-bottom:1rem}
body.belle .woocommerce-account .woocommerce-MyAccount-navigation ul{background:var(--white);
  border-radius:var(--rad);padding:.5rem}

/* ============================================================================
   ROUND FOUR : mobile
   ============================================================================ */

/* ---------- filter chips take the brand colours ----------
   A <button> does not inherit `color`, so the chips were picking up whatever
   a plugin last set on buttons rather than the ink. */
.f,.f:link,.f:visited{color:var(--ink)}
.f.on,.f.on span,.f.on:hover{color:#fff}
.f span{color:inherit}
.f:hover{color:var(--ink)}
.f.on:hover{color:#fff}

/* ---------- section heads on a phone ----------
   The heading and its link were stacking with a full line between them. */
@media(max-width:760px){
  .sechead{gap:.5rem;align-items:flex-start}
  .sechead>div{width:100%}
  .sechead a.more{order:2;margin-top:.1rem}
  .sechead p{font-size:14.5px}
}

/* ---------- trust strip on a phone ----------
   The 2x2 grid had the desktop gutter as its padding, so the text had almost
   no room and wrapped after two words. */
@media(max-width:760px){
  .trust__i{padding:.9rem 1rem;gap:.7rem;align-items:flex-start}
  .trust__i .ic{width:36px;height:36px;border-radius:11px}
  .trust__i .ic svg{width:18px;height:18px}
  .trust__i b{font-size:13px;line-height:1.2}
  .trust__i span{font-size:11.5px;line-height:1.25}
}
@media(max-width:420px){
  .trust__g{grid-template-columns:1fr}
  .trust__i{border-right:0!important;border-bottom:1px solid var(--line)}
  .trust__i:last-child{border-bottom:0}
}

/* ---------- the DM cards on a phone ----------
   The block is a real slider at every width now, so it no longer needs its own
   phone-only scroller. What is left is the card width and the type. This sits
   at line ~855 and the slider rules sit at ~477, so anything here overrides
   them: keep it to what genuinely differs on a phone. */
@media(max-width:900px){
  .slid__t.wagrid>*{width:min(78vw,300px)}
  .wa__body{min-height:0}
  .bub{font-size:13px}
}

/* Video reviews and the Instagram feed slide too, for the same reason. */
@media(max-width:600px){
  .reels{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-bottom:.5rem;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    scroll-padding-inline:var(--gut)}
  .reels::-webkit-scrollbar{display:none}
  .reels>*{flex:none;width:min(62vw,260px);scroll-snap-align:start}
  .reel--cta{width:min(72vw,300px)}
}

/* ---------- hero on a phone ---------- */
@media(max-width:760px){
  .hero__grid{gap:1.2rem;padding-block:1.2rem 1.6rem}
  .hero__flag{margin-bottom:.7rem;padding:.42rem .85rem;font-size:10.5px}
  .hero__h{font-size:clamp(2.1rem,1.2rem + 6.4vw,3.2rem);margin-bottom:.6rem;max-width:none}
  .hero__p{font-size:15px;margin-bottom:1rem;max-width:none}
  .hero__cta{gap:.5rem;margin-bottom:.9rem}
  .hero__cta .btn{flex:1;min-width:0;font-size:14.5px;padding:.95em 1.1em}
  .cd div{min-width:48px;padding:.4rem .5rem}
  .cd b{font-size:17px}
  .hero__dots{margin-top:.8rem}
  .hero__proof{margin-top:1rem;padding-top:.9rem;gap:.6rem}
  .hero__faces img{width:32px;height:32px;margin-left:-10px}
  .hero__proof b{font-size:13px}
  .hero__proof span{font-size:11.5px}
  .hero__rack{gap:.5rem}
  .mini__n{font-size:12.5px}
  .mini__pr{font-size:11.5px}
}

/* ---------- section rhythm on a phone ----------
   Sections were carrying desktop padding on top of taller stacked content. */
@media(max-width:600px){
  .sec{padding:1.6rem 0}
  .sec--tight{padding:1.1rem 0}
  .sechead{margin-bottom:.9rem}
  .sechead h2{font-size:clamp(1.6rem,1.1rem + 4.2vw,2.2rem)}
  .phead{padding-block:1.1rem .9rem}
  .phead h1{font-size:clamp(1.9rem,1.3rem + 5vw,2.8rem)}
  .phead p{font-size:15px}
  .filters{gap:.4rem;margin-bottom:1rem}
  .f{padding:.45rem .8rem;font-size:12.5px}
  .f i{width:14px;height:14px}
  .bb{padding:1.1rem}
  .bb h2{font-size:1.5rem}
  .quote{padding:1.6rem 1.1rem}
  .quote p{font-size:1.3rem}
  .ftr{padding-top:2rem}
}

/* ---------- a bigger logo ----------
   The mark carries the brand name, so it is the wordmark as well as the mark
   and has to be readable. It was smallest exactly where it mattered most. */
.brand img{height:124px}
.hdr.stuck .brand img{height:84px}
@media(max-width:1024px){.brand img{height:100px}.hdr.stuck .brand img{height:76px}}
@media(max-width:760px){.brand img{height:88px}.hdr.stuck .brand img{height:68px}}
@media(max-width:420px){.brand img{height:76px}.hdr.stuck .brand img{height:60px}}
.ftr__logo img{height:150px}
@media(max-width:600px){.ftr__logo img{height:110px}}
.mnav__logo img{height:74px}
:root{--hdr-h:140px}
@media(max-width:1024px){:root{--hdr-h:118px}}
@media(max-width:760px){:root{--hdr-h:106px}}
@media(max-width:420px){:root{--hdr-h:94px}}

/* ---------- card price row on a phone ----------
   A sale price prints two figures, which wrapped onto a second line and pushed
   the Add button out of the card. Smaller figures, and the row may wrap as a
   whole rather than breaking the price in half. */
@media(max-width:600px){
  .tk__f{flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
  .tk__p{font-size:14px;white-space:nowrap}
  .tk__p s{font-size:11.5px;margin-right:.2rem}
  .tk__add{padding:.55rem .85rem;font-size:11.5px;min-height:34px}
  .tk__b{padding:.15rem .7rem .7rem}
}
@media(max-width:430px){
  .tk__f{flex-direction:column;align-items:stretch}
  .tk__add{width:100%;text-align:center}
}

/* The empty review state said nothing with a dash; it says "New" now. */
.revsum__new{font-size:26px!important;letter-spacing:-.03em}

/* ============================================================================
   THE "TAG US" CARD
   It was a heading and a button floating in the middle of a flat pink
   rectangle. It is built like the profile it is asking people to post to now:
   the mark in a ring, the handle, the ask, the button, and a strip of the
   poster frames so it reads as the end of the same row.
   ============================================================================ */
.reel--cta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:.55rem;padding:1.4rem 1.1rem;cursor:pointer;color:#fff;text-decoration:none;
  background:
    radial-gradient(circle at 22% 12%, rgba(255,216,77,.42), transparent 46%),
    radial-gradient(circle at 84% 86%, rgba(123,63,160,.5), transparent 52%),
    linear-gradient(150deg, var(--pink), #E0246B 62%, #C0197F);
  transition:.3s var(--ez)}
.reel--cta:hover{transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(32,18,27,.5)}

.cta__ring{width:74px;height:74px;border-radius:999px;padding:3px;flex:none;
  background:conic-gradient(from 210deg,#FFD84D,#fff,#FFD84D,#fff,#FFD84D)}
.cta__ring img{width:100%;height:100%;border-radius:999px;background:#fff;object-fit:contain;padding:4px;display:block}

.cta__at{font-size:13px;font-weight:700;letter-spacing:.02em;opacity:.92}

.reel--cta h3{font-size:clamp(1.25rem,1rem + .7vw,1.6rem);margin:.1rem 0 0;line-height:1.05;max-width:14ch}
.reel--cta p{font-size:13px;line-height:1.4;opacity:.92;margin:0;max-width:26ch}

.cta__btn{margin-top:.35rem;display:inline-flex;align-items:center;gap:.4rem;pointer-events:none}
.cta__btn svg{display:block}

/* Centred with the rest of the stack. Pinned to the bottom it left a hand's
   width of empty gradient in the middle of a very tall card. */
.cta__strip{display:flex;gap:.35rem;margin-top:.9rem}
.cta__strip>span{width:40px;height:52px;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.22);
  display:grid;place-items:center;flex:none}
.cta__strip img{width:100%;height:100%;object-fit:cover;display:block}
.cta__more{font-weight:800;font-size:17px;color:#fff;opacity:.9}

@media(max-width:600px){
  .reel--cta{padding:1.1rem .9rem;gap:.45rem}
  .cta__ring{width:60px;height:60px}
  .reel--cta h3{font-size:1.15rem}
  .reel--cta p{font-size:12px}
  .cta__strip>span{width:32px;height:42px}
}

/* ---------- the hero headline was setting its own lines on top of each other ----------
   At 91px a line-height of .88 put the descender of one line into the
   ascender of the next. */
.hero__h{line-height:.97}
@media(max-width:760px){.hero__h{line-height:1}}

/* ---------- a wider page ----------
   The container capped at 1560px, which left 180px of empty ground either side
   on a 1920 monitor. Wider by 160px, so a large screen carries content rather
   than margin, and the five product columns get the extra width. */
:root{--max:1720px}

/* ============================================================================
   PHONE: THINGS THAT MOVE INSTEAD OF STACKING
   Three sections were short strips on a desktop and half a screen of scrolling
   on a phone. They move sideways now rather than stacking down.
   ============================================================================ */

@keyframes belle-marquee-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes belle-marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- trust strip ---------- */
.trust__i--dup{display:none}

@media(max-width:760px){
  .trust{overflow:hidden}
  .trust__g{display:flex;width:max-content;animation:belle-marquee-l 26s linear infinite}
  .trust__i--dup{display:flex}
  .trust__i{width:auto;padding:.9rem 1.1rem;border-bottom:0!important;border-right:1px solid var(--line)!important;
    white-space:nowrap;flex:none}
  .trust__i b,.trust__i span{white-space:nowrap}
  .trust:hover .trust__g,.trust:focus-within .trust__g{animation-play-state:paused}
}

/* ---------- instagram, two rows drifting the other way ---------- */
.igmarq{display:grid;gap:.5rem;overflow:hidden;
  margin-inline:calc(var(--gut) * -1)}
.igmarq__row{overflow:hidden}
.igmarq__t{display:flex;gap:.5rem;width:max-content}
.igmarq__row--l .igmarq__t{animation:belle-marquee-l 42s linear infinite}
.igmarq__row--r .igmarq__t{animation:belle-marquee-r 42s linear infinite}
/* Square: these are Instagram tiles and the files are 300x300. An earlier
   pass read one 3:2 file in the set and changed the frame to 4:3, which then
   cost every square one 25% of its height. */
.igmarq .ig{flex:none;width:34vw;max-width:170px;aspect-ratio:1;border-radius:var(--rad-sm);
  overflow:hidden;background:var(--cream2);display:block}
.igmarq .ig img{width:100%;height:100%;object-fit:cover}

/* ---------- steps: a swipeable row with the photo above ---------- */
/* Declared before the media query: same specificity, so the later rule wins
   regardless of viewport, and putting the `none` last hid the dots on every
   screen size. */
.steps__dots{display:none;gap:.35rem;justify-content:center;margin-top:.6rem}
.steps__dots button{width:22px;height:5px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(32,18,27,.18);transition:.2s var(--ez)}
.steps__dots button.on{background:var(--ink);width:30px}

@media(max-width:760px){
  .steps{gap:.9rem}
  .steps__ph{aspect-ratio:4/3;position:relative;top:0}
  .steps__l{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-bottom:.5rem;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    scroll-padding-inline:var(--gut)}
  .steps__l::-webkit-scrollbar{display:none}
  .steps__l .st{flex:none;width:min(76vw,320px);scroll-snap-align:start;align-content:start}
  .steps__dots{display:flex}
}

@media(prefers-reduced-motion:reduce){
  .trust__g,.igmarq__t{animation:none!important}
  .trust__i--dup,.igmarq{display:none!important}
  .iggrid.hide-m{display:grid!important}
}

/* ============================================================================
   FORMS
   Contact Form 7 renders its own markup, so this puts it on the site's type,
   spacing and controls rather than the plugin's defaults.
   ============================================================================ */
.formwrap{display:grid;gap:clamp(1rem,.8rem + 1.6vw,2.4rem);align-items:start}
@media(min-width:900px){.formwrap{grid-template-columns:minmax(0,1fr) 360px}}
.formwrap--solo{grid-template-columns:1fr!important;max-width:820px}
.belle-formpanel h2{font-size:clamp(1.5rem,1.3rem + 1.2vw,2.2rem);margin:0 0 .5rem}
.belle-formpanel h2 em{color:var(--pink)}
.belle-formlede{color:var(--ink2);font-size:14.5px;margin:0 0 1.4rem;max-width:52ch}

.wpcf7 .field{display:grid;gap:.4rem;margin:0 0 .9rem}
.wpcf7 .field label{font-size:13px;font-weight:700}
.wpcf7 .field__help{font-size:12px;color:var(--ink2)}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 input[type=url],.wpcf7 input[type=number],.wpcf7 textarea,.wpcf7 select{
  width:100%;padding:.85rem 1rem;border:2px solid var(--line);border-radius:14px;
  font-family:inherit;font-size:15.5px;background:var(--white);color:inherit;box-sizing:border-box}
.wpcf7 textarea{min-height:130px;resize:vertical}
.wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{outline:none;border-color:var(--ink)}
.wpcf7 .wpcf7-form-control-wrap{display:block}

/* the file field, which browsers style badly by default */
.wpcf7 input[type=file]{width:100%;padding:.8rem 1rem;border:2px dashed var(--line);border-radius:14px;
  background:var(--cream2);font-family:inherit;font-size:14px;cursor:pointer}
.wpcf7 input[type=file]::file-selector-button{border:0;border-radius:999px;padding:.5em 1.1em;margin-right:.8rem;
  background:var(--ink);color:var(--cream);font-family:inherit;font-weight:700;font-size:13px;cursor:pointer}

.belle-consent{font-size:13px;color:var(--ink2);margin:.2rem 0 1.1rem}
.belle-consent .wpcf7-list-item{margin:0}
.belle-consent input[type=checkbox]{width:17px;height:17px;accent-color:var(--ink);margin-right:.5rem;vertical-align:-3px}

.wpcf7 .btn{border:0;cursor:pointer;font-family:inherit}
.wpcf7 .wpcf7-spinner{margin:0 0 0 .6rem;vertical-align:middle}

/* messages */
.wpcf7 form .wpcf7-response-output{border:0;border-radius:var(--rad-sm);padding:.9rem 1.1rem;margin:1rem 0 0;
  font-size:14.5px;font-weight:600;background:var(--cream2);color:var(--ink)}
.wpcf7 form.sent .wpcf7-response-output{background:var(--t3)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{background:var(--t1)}
.wpcf7-not-valid-tip{font-size:12.5px;color:var(--err);font-weight:600;margin-top:.25rem}
.wpcf7 .wpcf7-not-valid{border-color:var(--err)}

.formside h3{font-size:19px;font-weight:800;letter-spacing:-.03em;margin:0 0 .5rem}
.formside p{font-size:14px;margin:0 0 .8rem}
.formside p:last-child{margin-bottom:0}
.formside ul{margin:0 0 .8rem;padding-left:1.1rem;font-size:14px;display:grid;gap:.35rem}

/* ============================================================================
   MAP
   ============================================================================ */
.mapwrap{display:grid;gap:clamp(1rem,.8rem + 1.6vw,2rem);align-items:stretch}
@media(min-width:900px){.mapwrap{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.mapwrap__m{border-radius:var(--rad-lg);overflow:hidden;background:var(--cream2);min-height:var(--_h,420px)}
.mapwrap__m iframe{width:100%;height:100%;min-height:var(--_h,420px);border:0;display:block;filter:saturate(.92)}
.mapwrap__a{background:var(--white);border-radius:var(--rad-lg);padding:clamp(1.2rem,1rem + 1.2vw,2rem);
  display:flex;flex-direction:column;align-items:flex-start}
.mapwrap__a h3{font-size:21px;font-weight:800;letter-spacing:-.03em;margin:0 0 .5rem}
.mapwrap__a address{font-style:normal;font-size:15.5px;line-height:1.5;color:var(--ink2);margin-bottom:.9rem}
.mapwrap__note{font-size:14px;color:var(--ink2);margin:0 0 1.1rem}
.mapwrap__list{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.6rem;font-size:14.5px}
.mapwrap__list li{display:flex;align-items:center;gap:.65rem}
.mapwrap__list svg{flex:none;color:var(--ink2)}
.mapwrap__list a{border-bottom:1px solid var(--line)}
.mapwrap__list a:hover{color:var(--pink);border-color:var(--pink)}
@media(max-width:900px){.mapwrap__m{min-height:300px}.mapwrap__m iframe{min-height:300px}}

/* CF7 turns the newlines in a form template into <br>, which opened a gap
   between every label and its field. The grid gap does that job. */
.wpcf7 .field br,.belle-consent br{display:none}
.wpcf7 .field .wpcf7-form-control-wrap{margin:0;display:block}
.wpcf7 p{margin:0}
.wpcf7 .two{margin-bottom:0}

/* ============================================================================
   PHOTO AND COPY, settled
   Three passes left three competing rules for this section. This is the only
   one now.

   The bug: `max-height` on a box with `aspect-ratio` shrinks its WIDTH as well,
   because the ratio has to hold. Capping the height at 460px therefore capped
   the picture at 460px wide inside a 900px column, and the section read as two
   narrow things with a river of empty ground between them.

   So no height cap. The picture takes the full width of its column and the
   ratio decides the height.
   ============================================================================ */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(1.6rem,1rem + 2.6vw,3.6rem);
  align-items:center}
.split--r>*:first-child{order:2}

.split__ph{
  width:100%;
  /* 4/3 rather than 5/4: at 830px wide that is 622px tall instead of 664, which
     sits closer to the height of the words beside it. */
  aspect-ratio:4/3;
  max-height:none;
  min-height:0;
  border-radius:var(--rad-lg);
  overflow:hidden;
  background:var(--cream2)}
.split__ph img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* A split holding a guide rather than a photograph. The frame is 4:3 and the
   guides are 4:5 portrait, so cropping them to fill took the heading off the
   top and the step captions off the bottom. Nothing on a guide is optional, so
   it is shown whole, against the colour of its own edge.

   This has to sit AFTER the .split__ph block above, not before it: the two have
   equal specificity, so the later one wins, and written earlier the modifier
   was silently overruled by the very rule it exists to override. */
.split__ph--whole{aspect-ratio:auto;max-height:min(78vh,780px);background:var(--cream2);
  display:grid;place-items:center}
.split__ph--whole img{width:100%;height:auto;max-height:min(78vh,780px);
  object-fit:contain;display:block}
@media(max-width:860px){
  .split__ph--whole,.split__ph--whole img{max-height:none}
}

/* The words fill their column instead of stopping halfway across it. */
.split__b,.split>div:not(.split__ph){min-width:0}
.split h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,3.1rem);margin-bottom:.9rem;max-width:24ch}
.split p{max-width:56ch;font-size:clamp(15.5px,14.5px + .35vw,17.5px)}
.split .ticks{max-width:56ch}

/* ============================================================================
   PHONE AND TABLET PASS, measured
   Every page was re-measured at 390, 430, 768, 1024, 1280, 1440 and 1920 after
   the container went to 1720px. No page scrolls sideways at any of them. What
   the measurements did turn up was type set under 12.5px and a handful of tap
   targets under 32px, both of which only bite on a phone.
   ============================================================================ */

/* ============================================================================
   WOOCOMMERCE'S SMALL SCREEN TABLE CSS
   Under 768px Woo loads woocommerce-smallscreen.css, which turns every table
   cell into a labelled row: `td::before { content: attr(data-title) ":" }` plus
   `text-align:right`. Our cart is already a grid with its own labels, so on a
   phone every line came out doubled, reading "Product: Amora - Medium" beside
   the name and "Subtotal: 899" beside the price, with a stray colon above the
   thumbnail where the label was empty.
   ============================================================================ */
@media(max-width:768px){
  body.belle table.shop_table_responsive tr td::before,
  body.belle table.shop_table tr td::before,
  body.belle .woocommerce-cart-form__contents td::before,
  body.belle .cart_totals td::before,
  body.belle .cart_totals th::before,
  body.belle .woocommerce-checkout-review-order-table td::before,
  body.belle .woocommerce-table--order-details td::before{content:none!important;display:none!important}

  body.belle table.shop_table_responsive tr td,
  body.belle .woocommerce-cart-form__contents td{text-align:left!important}
  body.belle .woocommerce-cart-form__contents td.product-subtotal,
  body.belle .cart_totals td,
  body.belle .woocommerce-checkout-review-order-table td{text-align:right!important}
  /* The variation list is "Length: Medium", one phrase, not two columns. */
  body.belle .woocommerce-cart-form__contents .product-name .variation{
    display:block;text-align:left}
}

/* The same icon font is behind the empty box after "Change address".
   !important because woocommerce.css is enqueued after the theme stylesheet,
   so on equal specificity Woo's rule is the later one and wins. */
body.belle .shipping-calculator-button::after,
body.belle .woocommerce-remove-coupon::before,
body.belle .woocommerce-Price-amount::before{content:none!important;margin:0!important}

/* ============================================================================
   LANDSCAPE PRODUCT PHOTOGRAPHS
   The pack shots are 4:3 on a cream backdrop; every frame here used to be
   square. Cropping a 4:3 photo to fill a square costs a quarter of its width,
   which on a pack shot is the outer nails on both sides, the logo and the
   phone number. Fitting it instead left a quarter of the frame empty.

   The frame is the thing that changed. It was square, so a 4:3 pack shot left
   a quarter of it empty and the product read as small. Shortening the frame to
   5:4 means the photograph fills it with a 6.6% crop, and since the pack shots
   carry about 7.5% of blank backdrop down each side, that crop lands entirely
   on empty ground. The printed card is never touched, and nothing is zoomed to
   make it fit.
   ============================================================================ */
/* The ways grid is fixed at three columns, so a four item set leaves one card
   alone on a second row. Four goes four across on a wide screen and two by two
   on a tablet, which reads as a set rather than as a mistake. */
.ways:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){
  .ways:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .ways:has(> :nth-child(4):last-child){grid-template-columns:1fr}
}

/* The wide story band. It is far wider than it is tall, so a portrait photo
   keeps only a horizontal strip of itself, and centred that strip was a torso
   with the face cropped off above it. The widget now sets --_pos, and the band
   is taller, so a person actually fits in it. */
.bighero{min-height:clamp(340px,34vw,600px)}
.bighero img{object-position:var(--_pos,50% 26%)}

/* The scrim was a bottom-up wash, which is enough over a dark photograph and
   not enough over a bright one: the yellow eyebrow and the white heading were
   sitting on a pale cheek. A second wash from the left, where the words are,
   holds the text no matter what is behind it. */
.bighero__in{background:
  linear-gradient(0deg,rgba(32,18,27,.78),rgba(32,18,27,.28) 62%,transparent 88%),
  linear-gradient(90deg,rgba(32,18,27,.55),rgba(32,18,27,.12) 52%,transparent 76%)}
.bighero h1{text-shadow:0 2px 22px rgba(32,18,27,.34)}

.tk__ph{aspect-ratio:5/4}
.pdp__main{aspect-ratio:5/4}
.pdp__thumbs button{aspect-ratio:5/4}

/* The safety net, for a photograph too wide even for the shorter frame: show
   all of it and paint the ground its own edge colour. belle_fit() decides. */
.tk__ph img.is-fit,
.pdp__main img.is-fit,
.pdp__thumbs img.is-fit,
.upr__ph img.is-fit{object-fit:contain}
.tk:hover .tk__ph img.is-fit{transform:none}

/* An anchor link scrolls its target to y=0, which is under the sticky header.
   Every element that can be linked to keeps the header's height clear. */
[id]{scroll-margin-top:clamp(76px,4vw + 60px,116px)}

/* The payment chips in the footer were only styled inside a phone media query,
   so on every larger screen they ran together as "UPICardsNetbankingCOD". */
.ftr__pay{display:inline-flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.ftr__pay span{background:rgba(255,249,242,.1);border-radius:7px;
  padding:.3rem .6rem;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:rgba(255,249,242,.8)}

/* 12.5px is the floor on every screen, not only small ones: the shade line on
   a card and the note in the drawer were 11.5px on desktop too. */
.tk__m,.drw__note,.pdp__eyebrow{font-size:12.5px}
body.belle .woocommerce-privacy-policy-text p{font-size:13px;line-height:1.55}

/* Nothing a customer has to read drops below 12.5px on a phone. These were
   11 to 12px: the shade line under a product name, the note in the cart
   drawer, the caption on the "tag us" card, and WooCommerce's own privacy
   sentence on the register form. */
@media(max-width:600px){
  .tk__m{font-size:12.5px}
  .drw__note{font-size:12.5px}
  .reel--cta p{font-size:13px}
  .woocommerce-privacy-policy-text p,
  .woocommerce-form__label-for-checkbox span,
  .woocommerce-terms-and-conditions-wrapper p{font-size:13px;line-height:1.5}
}

/* The slider dots are 5px pills on purpose, but 5px is not a target you can
   hit with a thumb. The pill keeps its size; an invisible box centred on it
   takes the tap. */
.hero__dots button,.steps__dots button{position:relative}
.hero__dots button::after,.steps__dots button::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:34px;
  transform:translateY(-50%)}
/* The hero dot clipped its own progress fill with overflow:hidden, which would
   have clipped the hit box too. The fill carries the rounded ends itself now,
   so the clip is not needed. */
.hero__dots button{overflow:visible}
.hero__dots button i{border-radius:999px}

/* WooCommerce's show-password eye is a 22px icon. Same treatment, and no
   `position` of my own: WooCommerce already absolutely positions this button
   inside the field, and making it relative dropped it back into the flow at
   the full width of the row. */
body.belle .password-input .show-password-input::after{
  content:"";position:absolute;inset:-7px -9px}

/* A small button is still a button. */
@media(max-width:600px){
  .btn--sm{min-height:36px;display:inline-flex;align-items:center}
}

/* Italic emphasis leans into whatever follows it. At heading size the slant
   eats the word space, so "Why reusable matters" read as "reusablematters".
   A hair of margin puts the gap back, and costs nothing when the emphasis is
   the last thing on the line. */
h1 em,h2 em,h3 em,.hero__h em,.sechead h2 em,.split h2 em{margin-right:.055em}

@media(max-width:1024px){
  .split{gap:1.6rem}
  .split h2{max-width:none}
}
@media(max-width:860px){
  .split,.split--r{grid-template-columns:1fr}
  .split--r>*:first-child{order:0}
  .split__ph{aspect-ratio:16/11}
  .split h2,.split p,.split .ticks{max-width:none}
}


/* ============================================================================
   SECTION PHOTOGRAPHS FOLLOW THEIR OWN SHAPE ON A PHONE
   These frames are landscape, which suits the wide pictures and destroys the
   tall ones. Measured at 390: the founder portrait lost 48% and one story
   picture 53%, which is half the photograph gone.

   On a phone, vertical space is the cheap kind: a portrait picture shown as a
   portrait costs a little scrolling and keeps the whole subject. The shape
   class is set in PHP from the file's own dimensions, so nothing is guessed.
   ============================================================================ */
@media(max-width:860px){
  .split__ph.ph--portrait,
  .founder__ph.ph--portrait,
  .gift__ph.ph--portrait{aspect-ratio:4/5}

  .split__ph.ph--square,
  .founder__ph.ph--square,
  .gift__ph.ph--square{aspect-ratio:1}

  .split__ph.ph--wide,
  .founder__ph.ph--wide,
  .gift__ph.ph--wide{aspect-ratio:16/9}
}

/* A tall picture in a landscape frame on a desktop is a smaller problem,
   because the frame is wider, but the founder portrait was still losing its
   top. Give it a shape it fits. */
@media(min-width:861px){
  .founder__ph.ph--portrait{aspect-ratio:4/5}
}


/* The marquee holds a mix: most tiles are 300x300 Instagram squares, a few are
   3:2. One frame cannot serve both, so each tile takes the shape of its own
   file. Same for the journal cards, where a square featured image was losing
   38% of its height to a landscape frame. */
/* The marquee mixes square Instagram tiles with 3:2 ones, and a modifier class
   on the tile would not take (the rule is served and more specific, and the
   frame still measured square, so something in the cascade beats it that I did
   not find). Rather than keep guessing: fit the picture inside the tile against
   the cream. Every tile stays the same size, the row still reads as a rhythm,
   and nothing is cut whatever shape it is. */
.igmarq .ig img{object-fit:contain;background:var(--cream2)}

.post__ph.ph--wide{aspect-ratio:3/2}
.igmarq .ig.ph--portrait{aspect-ratio:4/5}

.post__ph.ph--square{aspect-ratio:1}
.post__ph.ph--portrait{aspect-ratio:4/5}


/* The helper line under the shape picker. Without this it printed at body size
   and read as a paragraph of the product description rather than as a note. */
.opt__note{margin:.55rem 0 0;font-size:13px;line-height:1.5;color:var(--ink2);max-width:46ch}




/* A product with one photograph: no thumbnail track at all. Hiding the strip
   while leaving the 78px column in place is what put the big picture in the
   thumbnail slot. */
.pdp__gal--solo{grid-template-columns:1fr}
@media(max-width:960px){
  .pdp__gal--solo{grid-template-columns:1fr}
}


/* The approximate local price, for a visitor outside India. Quiet on purpose:
   the rupee figure above it is the one that will be charged, and this is only
   there so somebody abroad knows roughly what they are looking at. */
.fx{margin:.35rem 0 0;display:flex;flex-direction:column;gap:.1rem}
.fx__n{font-size:15px;font-weight:700;color:var(--ink2)}
.fx__t{font-size:12.5px;line-height:1.45;color:var(--ink3);max-width:40ch}

/* The same, in the cart and checkout totals table. */
.fx-row th{font-weight:400;color:var(--ink2)}
.fx-row td{text-align:right}
.fx-row small{display:block;margin-top:.2rem;font-size:12px;line-height:1.45;color:var(--ink3)}