/* ============================================================
   DHIVI & CO. — page & feature styles
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:calc(100svh - var(--nav-h));
  display:grid;align-items:end;overflow:hidden;background:var(--navy);
  isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:52% 46%;transform:scale(1.06);animation:heroDrift 22s var(--ease) forwards}
@keyframes heroDrift{to{transform:scale(1)}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(8,22,40,.44) 0%,rgba(8,22,40,.10) 30%,rgba(10,29,50,.58) 72%,rgba(9,24,42,.88) 100%);
}
.hero-inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding:clamp(40px,7vw,90px) var(--pad) clamp(36px,5vw,64px);
  color:var(--paper);position:relative;
}
.hero h1{color:var(--paper);max-width:15ch}
.hero .hero-sub{color:rgba(247,250,253,.82);max-width:46ch;margin-top:26px;font-size:clamp(.98rem,1.25vw,1.16rem);line-height:1.6}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.hero-foot{
  margin-top:clamp(30px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
}
.hero-price{
  font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--paper);
  padding-right:26px;border-right:1px solid rgba(247,250,253,.28);
}
.hero-scroll{
  position:absolute;right:var(--pad);bottom:clamp(36px,5vw,64px);
  writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(247,250,253,.6);display:flex;align-items:center;gap:12px;
}
.hero-scroll::after{content:"";width:1px;height:52px;background:linear-gradient(rgba(247,250,253,.6),transparent)}
@media (max-width:860px){
  .hero-price{border-right:0;padding-right:0;width:100%}
  .hero-scroll{display:none}
  .hero-media img{object-position:56% 42%}
}

/* ---------- Refill / steps ---------- */
.oversize-statement{
  font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.025em;
  font-size:clamp(2.4rem,7vw,6.4rem);color:var(--navy);text-wrap:balance;
}
.oversize-statement em{font-style:italic;color:var(--brand)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(44px,6vw,80px);position:relative}
.step{position:relative;padding:30px 26px 30px 0}
.step + .step{padding-left:26px;border-left:1px solid var(--line-soft)}
.step-num{
  font-family:var(--serif);font-size:2.4rem;font-weight:400;color:var(--azure);line-height:1;display:block;margin-bottom:12px;
}
.step h4{font-size:1.02rem;letter-spacing:-.006em;color:var(--navy);margin-bottom:8px;font-weight:600}
.step p{font-size:.88rem;color:var(--ink-mid);line-height:1.55}
.step-arrow{
  position:absolute;top:46px;right:-8px;width:20px;color:var(--azure);opacity:0;
  transform:translateX(-8px);transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.steps.is-in .step:nth-child(1) .step-arrow{opacity:1;transform:none;transition-delay:.25s}
.steps.is-in .step:nth-child(2) .step-arrow{opacity:1;transform:none;transition-delay:.45s}
.steps.is-in .step:nth-child(3) .step-arrow{opacity:1;transform:none;transition-delay:.65s}
@media (max-width:860px){
  .steps{grid-template-columns:1fr}
  .step{padding:22px 0}
  .step + .step{padding-left:0;border-left:0;border-top:1px solid var(--line-soft)}
  .step-arrow{display:none}
  .step-num{font-size:2rem;margin-bottom:8px}
}

/* ---------- Editorial product panels ---------- */
.product-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  border-top:1px solid var(--line-soft);
}
.product-panel:last-of-type{border-bottom:1px solid var(--line-soft)}
.product-panel .pp-media{position:relative;overflow:hidden;min-height:clamp(420px,62vw,760px);background:var(--mist-2)}
.product-panel .pp-media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.6s var(--ease);
}
.product-panel:hover .pp-media img{transform:scale(1.07)}
.product-panel .pp-body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(36px,5.5vw,86px);gap:22px;
}
.product-panel--flip .pp-media{order:2}
.pp-ings{display:flex;flex-wrap:wrap;gap:7px 0;font-size:.83rem;color:var(--ink-mid);line-height:1.5}
.pp-ings span:not(:last-child)::after{content:"·";margin-inline:9px;color:var(--steel-pale)}
.pp-price{
  font-family:var(--serif);font-weight:400;font-size:1.7rem;color:var(--navy);
  padding-top:20px;border-top:1px solid var(--line-soft);
}
@media (max-width:900px){
  .product-panel{grid-template-columns:1fr}
  .product-panel .pp-media{min-height:0;aspect-ratio:4/5}
  .product-panel--flip .pp-media{order:0}
}

/* ---------- POP-OUT INGREDIENT DIAGRAM (signature) ---------- */
.popout{position:relative;padding-block:clamp(50px,7vw,90px)}
.popout-stage{
  position:relative;width:100%;max-width:1080px;margin-inline:auto;aspect-ratio:1/.86;
}
.popout-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(190px,29%,340px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(14,39,64,.55);z-index:3;background:var(--mist-2);
}
.popout-core img{width:100%;height:100%;object-fit:cover;transform:scale(1.9);transition:transform 1.8s var(--ease)}
.popout.is-in .popout-core img{transform:scale(1.55)}
.popout-core::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 60px rgba(14,39,64,.22)}
.popout-lines{position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none}
.popout-lines path{
  fill:none;stroke:var(--steel-pale);stroke-width:1;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.5s var(--ease);
}
.popout.is-in .popout-lines path{stroke-dashoffset:0}
.popout-lines circle{fill:var(--azure);opacity:0;transition:opacity .6s var(--ease) .9s}
.popout.is-in .popout-lines circle{opacity:1}
.callout{
  position:absolute;z-index:4;width:clamp(150px,17vw,215px);
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}
.popout.is-in .callout{opacity:1;transform:none}
/* stage children are: svg, .popout-core, then the callouts */
.popout.is-in .callout:nth-child(3){transition-delay:.50s}
.popout.is-in .callout:nth-child(4){transition-delay:.62s}
.popout.is-in .callout:nth-child(5){transition-delay:.74s}
.popout.is-in .callout:nth-child(6){transition-delay:.86s}
.popout.is-in .callout:nth-child(7){transition-delay:.56s}
.popout.is-in .callout:nth-child(8){transition-delay:.68s}
.popout.is-in .callout:nth-child(9){transition-delay:.80s}
.popout.is-in .callout:nth-child(10){transition-delay:.92s}
.callout h4{
  font-size:.95rem;letter-spacing:-.006em;color:var(--navy);
  font-weight:600;margin-bottom:7px;
}
.callout p{font-size:.79rem;line-height:1.5;color:var(--ink-mid)}
.callout--right{text-align:right}
.popout-hotspots{display:none}
@media (max-width:900px){
  .popout-stage{display:none}
  .popout-hotspots{display:block}
}
/* mobile hotspot version */
.hot-wrap{position:relative;max-width:460px;margin-inline:auto}
.hot-img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;background:var(--mist-2)}
.hot-img img{width:100%;height:100%;object-fit:cover}
.hot{
  position:absolute;width:30px;height:30px;border-radius:50%;z-index:2;
  background:rgba(247,250,253,.92);border:1px solid rgba(21,85,139,.3);
  display:grid;place-items:center;color:var(--brand);font-size:.9rem;line-height:1;
  box-shadow:0 6px 18px -8px rgba(14,39,64,.6);
  transition:transform .4s var(--ease),background .3s;
}
.hot::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(247,250,253,.55);
  animation:ring 2.6s ease-out infinite;
}
@keyframes ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.hot.is-active,.hot:hover{background:var(--brand);color:var(--paper);transform:scale(1.12)}
.hot.is-active::after{display:none}
.hot-panel{
  margin-top:20px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:22px;min-height:132px;
}
.hot-panel h4{font-size:1rem;letter-spacing:-.006em;color:var(--navy);font-weight:600;margin-bottom:8px}
.hot-panel p{font-size:.88rem;color:var(--ink-mid);line-height:1.6}
.hot-nav{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.hot-nav button{
  padding:7px 13px;border-radius:var(--r-sm);border:1px solid var(--line);
  font-size:.82rem;letter-spacing:0;color:var(--navy-soft);
  transition:all .3s var(--ease);
}
.hot-nav button.is-active{background:var(--brand);color:var(--paper);border-color:var(--brand)}

/* ---------- Three generations ---------- */
.gen{
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center;
  padding-block:clamp(44px,6vw,90px);
}
.gen + .gen{border-top:1px solid var(--line-soft)}
.gen--flip .gen-media{order:2}
.gen-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/4;background:var(--mist-2);position:relative}
.gen-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.gen:hover .gen-media img{transform:scale(1.05)}
.gen-badge{
  position:absolute;left:18px;bottom:18px;padding:8px 14px;border-radius:var(--r-sm);
  background:rgba(247,250,253,.92);backdrop-filter:blur(6px);
  font-size:.78rem;letter-spacing:0;color:var(--brand);font-weight:500;
}
@media (max-width:860px){
  .gen{grid-template-columns:1fr}
  .gen--flip .gen-media{order:0}
}

/* ---------- Nutrition category cards ---------- */
.nutri-card{
  background:#fff;border-radius:var(--r-md);padding:30px 28px;
  border:1px solid var(--line-soft);height:100%;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.nutri-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.nutri-card h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--navy);margin-bottom:6px}
.nutri-card .nc-line{width:34px;height:1px;background:var(--azure);margin-block:16px}
.nutri-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.nutri-list li{
  font-size:.74rem;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--mist);color:var(--navy-soft);
}

/* ---------- Quote block ---------- */
.quote{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.5rem,3.4vw,3rem);line-height:1.16;letter-spacing:-.02em;
  color:var(--paper);text-wrap:balance;
}
.quote-cite{margin-top:26px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,250,253,.55)}

/* ---------- Process ---------- */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:clamp(36px,5vw,64px)}
.process-step{padding:26px 20px;border-left:1px solid var(--line-soft);position:relative}
.process-step:first-child{border-left:0;padding-left:0}
.process-step .ps-icon{width:34px;height:34px;color:var(--azure);margin-bottom:16px}
.process-step h4{font-size:.98rem;letter-spacing:-.006em;color:var(--navy);font-weight:600;margin-bottom:7px}
.process-step p{font-size:.82rem;color:var(--ink-mid);line-height:1.5}
@media (max-width:860px){
  .process{grid-template-columns:1fr 1fr}
  .process-step{border-left:0;border-top:1px solid var(--line-soft);padding-inline:0 16px}
  .process-step:first-child{border-top:0}
}

/* ---------- Drop status ---------- */
.drop-banner{
  border-radius:var(--r-lg);padding:clamp(30px,4.5vw,58px);position:relative;overflow:hidden;
  background:var(--mist);border:1px solid var(--line-soft);
}
.drop-banner[data-state="open"]{background:linear-gradient(135deg,rgba(61,143,207,.2),rgba(195,221,243,.28));border-color:rgba(61,143,207,.35)}
.drop-banner[data-state="soldout"]{background:linear-gradient(135deg,rgba(238,223,194,.4),rgba(180,198,217,.35));border-color:var(--alert-pale)}
.countdown{display:flex;gap:clamp(14px,3vw,38px);margin-top:26px;flex-wrap:wrap}
.cd-unit{text-align:center;min-width:66px}
.cd-num{
  font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5.4vw,3.9rem);
  line-height:1;color:var(--brand);font-variant-numeric:tabular-nums;display:block;
}
.cd-lab{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-top:9px;display:block}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--azure);animation:pulse 2.2s ease-in-out infinite}
.status-dot--closed{background:var(--steel-pale);animation:none}
.status-dot--soldout{background:var(--alert);animation:none}

/* ---------- Shop grid ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px)}
.shop-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-soft);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.shop-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.shop-card .sc-media{aspect-ratio:4/5;overflow:hidden;background:var(--mist-2);position:relative}
.shop-card .sc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.shop-card:hover .sc-media img{transform:scale(1.06)}
.shop-card .sc-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.shop-card .sc-body .btn{margin-top:auto}
.sc-build{
  display:grid;place-items:center;aspect-ratio:4/5;
  background:radial-gradient(circle at 50% 44%,rgba(195,221,243,.5),var(--mist) 62%);
  position:relative;overflow:hidden;
}
.sc-build .bubble{
  width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#D9C6A6,#A98459 62%,#7E5F3D);
  box-shadow:0 26px 54px -26px rgba(14,39,64,.6);
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
.sc-build .orbit{position:absolute;inset:0;animation:spin 40s linear infinite}
.sc-build .orbit i{
  position:absolute;width:12px;height:12px;border-radius:50%;background:var(--azure);opacity:.7;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1000px){.shop-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.shop-grid{grid-template-columns:1fr}}

/* ---------- PDP ---------- */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,72px);align-items:start}
.pdp-media{position:sticky;top:calc(var(--nav-h) + 24px);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--mist-2)}
.pdp-media img{width:100%;height:100%;object-fit:cover}
.pdp-buy{background:var(--paper-2);border-radius:var(--r-md);padding:24px;margin-top:8px}
.spec-row{display:flex;justify-content:space-between;gap:16px;padding-block:14px;border-bottom:1px solid var(--line-soft);font-size:.88rem}
.spec-row:last-child{border-bottom:0}
.spec-row dt{color:var(--ink-soft);flex-shrink:0}
.spec-row dd{margin:0;text-align:right;color:var(--navy)}
@media (max-width:900px){
  .pdp{grid-template-columns:1fr}
  .pdp-media{position:static}
}

/* ---------- Accordion ---------- */
.acc-item{border-bottom:1px solid var(--line-soft)}
.acc-btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:22px;
  padding:24px 0;text-align:left;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.42rem);color:var(--navy);line-height:1.28;
  transition:color .3s;
}
.acc-btn:hover{color:var(--brand)}
.acc-ico{flex-shrink:0;width:20px;height:20px;position:relative;margin-top:6px}
.acc-ico::before,.acc-ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--brand);
  transform:translate(-50%,-50%);transition:transform .45s var(--ease),opacity .3s;
}
.acc-ico::before{width:15px;height:1.4px}
.acc-ico::after{width:1.4px;height:15px}
.acc-item.is-open .acc-ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc-panel{overflow:hidden;height:0;transition:height .5s var(--ease)}
.acc-panel-inner{padding-bottom:26px;max-width:74ch;color:var(--ink-mid);font-size:.94rem;line-height:1.68}
.acc-panel-inner p + p{margin-top:.9em}

/* ---------- Ingredient library ---------- */
.ing-group + .ing-group{margin-top:clamp(40px,5vw,72px)}
.ing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:26px}
.ing-tile{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:20px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.ing-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(61,143,207,.4)}
.ing-tile h4{font-size:.98rem;letter-spacing:-.006em;color:var(--navy);font-weight:600;margin-bottom:8px}
.ing-tile p{font-size:.82rem;color:var(--ink-mid);line-height:1.55}
.ing-tile .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.ing-tile .tags span{font-size:.72rem;padding:4px 10px;border-radius:var(--r-pill);background:var(--mist);color:var(--brand);letter-spacing:.04em}

/* ============================================================
   CUSTOMIZER
   ============================================================ */
.cz-hero{
  background:linear-gradient(170deg,var(--mist),var(--paper) 68%);
  padding-block:clamp(58px,8vw,120px);position:relative;overflow:hidden;
}
.cz-progress{
  position:sticky;top:var(--nav-h);z-index:40;background:rgba(247,250,253,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);
}
.cz-progress-inner{
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;
}
.cz-progress-inner::-webkit-scrollbar{display:none}
.cz-step{
  display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-sm);
  font-size:.82rem;letter-spacing:0;color:var(--ink-soft);
  white-space:nowrap;transition:all .4s var(--ease);flex-shrink:0;
}
.cz-step .n{
  width:19px;height:19px;border-radius:50%;border:1px solid currentColor;
  display:grid;place-items:center;font-size:.6rem;letter-spacing:0;
}
.cz-step.is-done{color:var(--azure)}
.cz-step.is-done .n{background:var(--azure);border-color:var(--azure);color:var(--paper)}
.cz-step.is-active{color:var(--brand);background:rgba(61,143,207,.15);font-weight:600}
.cz-step.is-active .n{background:var(--brand);border-color:var(--brand);color:var(--paper)}
.cz-sep{width:14px;height:1px;background:var(--line);flex-shrink:0}

.cz-layout{display:grid;grid-template-columns:1fr 400px;gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:1080px){.cz-layout{grid-template-columns:1fr}}

.cz-panel{display:none}
.cz-panel.is-active{display:block;animation:panelIn .6s var(--ease)}
/* clear the sticky header + progress rail when a level is scrolled into view */
.cz-panel,
.cz-panel .ing-choices,
.cz-panel .aud-grid{scroll-margin-top:calc(var(--nav-h) + 80px)}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.aud-card{
  border:1px solid var(--line);border-radius:var(--r-md);padding:26px 22px;text-align:left;
  background:#fff;transition:all .45s var(--ease);position:relative;overflow:hidden;
}
.aud-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--azure)}
.aud-card.is-sel{border-color:var(--brand);background:rgba(61,143,207,.1);box-shadow:var(--shadow-m)}
.aud-card h4{font-family:var(--serif);font-weight:400;font-size:1.32rem;color:var(--navy);margin-bottom:9px}
.aud-card p{font-size:.83rem;color:var(--ink-mid);line-height:1.5}
.aud-card .tick{
  position:absolute;right:16px;top:16px;width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:var(--paper);display:grid;place-items:center;font-size:.65rem;
  opacity:0;transform:scale(.5);transition:all .4s var(--ease);
}
.aud-card.is-sel .tick{opacity:1;transform:none}
@media (max-width:980px){.aud-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.aud-grid{grid-template-columns:1fr}}

.ing-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:13px;margin-top:30px}
.choice{
  position:relative;text-align:left;border:1px solid var(--line);border-radius:var(--r-md);
  padding:19px 19px 17px;background:#fff;transition:all .42s var(--ease);
}
.choice:hover{transform:translateY(-3px);border-color:var(--azure);box-shadow:var(--shadow-s)}
.choice.is-sel{border-color:var(--brand);background:rgba(61,143,207,.11)}
.choice.is-sel.is-extra{border-color:var(--alert);background:rgba(238,223,194,.3)}
.choice[data-unavailable="1"]{opacity:.42;pointer-events:none}
.choice h5{font-size:.95rem;letter-spacing:-.006em;color:var(--navy);font-weight:600;margin-bottom:7px;padding-right:56px}
.choice p{font-size:.8rem;color:var(--ink-mid);line-height:1.5;margin-bottom:11px}
.choice .nutri{display:flex;flex-wrap:wrap;gap:5px}
.choice .nutri span{font-size:.7rem;padding:4px 10px;border-radius:var(--r-pill);background:var(--mist);color:var(--brand);letter-spacing:.05em}
.choice.is-sel .nutri span{background:rgba(247,250,253,.85)}
.choice .flag{
  position:absolute;right:14px;top:15px;font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-pill);font-weight:600;
}
.flag--pick{background:var(--cyan-pale);color:var(--cyan-deep)}
.flag--extra{background:var(--alert);color:#fff}
.flag--incl{background:var(--azure);color:var(--paper)}
.flag--soon{background:var(--steel-pale);color:var(--navy-soft)}
.choice .allergen{
  margin-top:10px;font-size:.64rem;letter-spacing:.06em;color:#8A5A12;display:flex;align-items:center;gap:5px;
}
.level-note{
  margin-top:18px;padding:13px 18px;border-radius:var(--r-md);
  background:var(--mist);font-size:.8rem;color:var(--navy-soft);line-height:1.5;
}
.level-note strong{color:var(--brand)}
.tip{
  margin-top:16px;padding:14px 18px;border-left:2px solid var(--cyan);
  background:rgba(207,233,239,.16);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.83rem;color:var(--navy-soft);line-height:1.55;
}
.cz-nav{display:flex;justify-content:space-between;gap:14px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line-soft)}

/* live laddoo visualisation */
.cz-side{position:sticky;top:calc(var(--nav-h) + 74px);display:flex;flex-direction:column;gap:18px}
@media (max-width:1080px){.cz-side{position:static;order:-1}}
.viz{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(circle at 50% 45%,var(--paper),var(--mist) 70%);
  border:1px solid var(--line-soft);
}
.viz-ladoo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:38%;aspect-ratio:1;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 36% 30%,#DCC9A9,#B08C60 58%,#805F3C);
  box-shadow:0 26px 52px -24px rgba(14,39,64,.62),inset 0 -8px 22px rgba(14,39,64,.24);
  display:grid;place-items:center;text-align:center;padding:10px;
  transition:transform .6s var(--ease);
}
.viz-ladoo.bump{transform:translate(-50%,-50%) scale(1.07)}
.viz-ladoo .vl-count{font-family:var(--serif);font-weight:400;font-size:1.9rem;color:rgba(247,250,253,.95);line-height:1}
.viz-ladoo .vl-lab{font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,250,253,.72);margin-top:5px}
.viz-svg{position:absolute;inset:0;z-index:1;pointer-events:none}
.viz-svg line{stroke:var(--steel-pale);stroke-width:1;opacity:0;transition:opacity .6s var(--ease)}
.viz-svg line.on{opacity:1}
.viz-chip{
  position:absolute;z-index:2;transform:translate(-50%,-50%) scale(.5);opacity:0;
  padding:6px 11px;border-radius:var(--r-pill);background:#fff;
  border:1px solid var(--line);white-space:nowrap;
  font-size:.72rem;letter-spacing:0;color:var(--brand);font-weight:500;
  box-shadow:var(--shadow-s);transition:transform .55s var(--ease),opacity .5s var(--ease);
}
.viz-chip.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.viz-empty{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;
  font-size:.8rem;letter-spacing:0;color:var(--ink-soft);
  transition:opacity .4s;text-align:center;width:80%;
}

.price-box{background:var(--paper-2);border-radius:var(--r-md);padding:22px}
.price-box .pb-row{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;padding-block:6px;color:var(--ink-mid)}
.price-box .pb-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;padding-top:14px;border-top:1px solid var(--line);
}
.price-box .pb-total .lab{font-size:.88rem;letter-spacing:0;color:var(--ink-soft)}
.price-box .pb-total .val{font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--navy);font-variant-numeric:tabular-nums}
.story-box{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:22px}
.story-row + .story-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.story-row h5{font-size:.86rem;letter-spacing:0;color:var(--brand);font-weight:600;margin-bottom:5px}
.story-row p{font-size:.8rem;color:var(--ink-mid);line-height:1.5}

/* sticky mobile bar */
.cz-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:44;display:none;
  background:rgba(247,250,253,.97);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -12px 30px -20px rgba(14,39,64,.5);
}
.cz-bar .cb-info{font-size:.78rem;color:var(--navy)}
.cz-bar .cb-info strong{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin-left:8px}
@media (max-width:1080px){
  .cz-bar{display:flex}
  body.cz-page{padding-bottom:84px}
}

/* summary / share */
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,56px);align-items:start}
@media (max-width:900px){.summary-grid{grid-template-columns:1fr}}
.build-line{display:flex;justify-content:space-between;gap:18px;padding-block:13px;border-bottom:1px solid var(--line-soft)}
.build-line dt{font-size:.84rem;letter-spacing:0;color:var(--ink-soft);flex-shrink:0;padding-top:2px}
.build-line dd{margin:0;text-align:right;font-size:.9rem;color:var(--navy)}
.share-card{
  background:linear-gradient(165deg,var(--brand),var(--brand-deep));color:var(--paper);
  border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);position:relative;overflow:hidden;
}
.share-card::before{
  content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,rgba(61,143,207,.55),rgba(12,58,98,.35));
}
.share-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.02;position:relative}
.share-ings{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px;position:relative}
.share-ings span{
  padding:6px 12px;border-radius:var(--r-pill);background:rgba(247,250,253,.16);
  border:1px solid rgba(247,250,253,.24);font-size:.68rem;letter-spacing:.08em;
}
.share-btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;position:relative}
.share-btns button,.share-btns a{
  padding:10px 16px;border-radius:var(--r-btn);border:1px solid rgba(247,250,253,.32);
  font-size:.84rem;letter-spacing:0;color:var(--paper);
  transition:background .3s,border-color .3s;
}
.share-btns button:hover,.share-btns a:hover{background:rgba(247,250,253,.14);border-color:var(--paper)}

.name-input{
  width:100%;padding:16px 20px;border-radius:var(--r-btn);border:1px solid var(--line);
  background:#fff;font-family:var(--serif);font-weight:400;font-size:1.28rem;
  transition:border-color .3s;
}
.name-input:focus{outline:none;border-color:var(--azure);box-shadow:0 0 0 3px rgba(61,143,207,.16)}
.name-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.name-chips button{
  padding:7px 14px;border-radius:var(--r-sm);border:1px solid var(--line);
  font-size:.72rem;color:var(--navy-soft);transition:all .3s;
}
.name-chips button:hover{border-color:var(--brand);color:var(--brand);background:rgba(61,143,207,.1)}

/* ---------- Saved recipes / account ---------- */
.recipe-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:24px;display:flex;flex-direction:column;gap:14px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.recipe-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.recipe-card h4{font-family:var(--serif);font-weight:400;font-size:1.45rem;color:var(--navy)}

/* ---------- Admin ---------- */
.admin-body{background:#F4F7FB}
.admin-shell{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
@media (max-width:900px){.admin-shell{grid-template-columns:1fr}}
.admin-side{background:var(--navy);color:var(--paper);padding:26px 18px;position:sticky;top:0;height:100vh;overflow-y:auto}
@media (max-width:900px){.admin-side{position:static;height:auto}}
.admin-side .as-brand{font-family:var(--serif);font-weight:400;font-size:1.16rem;margin-bottom:6px}
.admin-side .as-sub{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,250,253,.5);margin-bottom:26px}
.admin-nav button{
  display:block;width:100%;text-align:left;padding:10px 13px;border-radius:var(--r-sm);
  font-size:.78rem;color:rgba(247,250,253,.78);transition:all .3s;margin-bottom:3px;
}
.admin-nav button:hover{background:rgba(247,250,253,.1);color:#fff}
.admin-nav button.is-active{background:rgba(247,250,253,.17);color:#fff;font-weight:500}
.admin-main{padding:clamp(22px,3.4vw,44px);max-width:1180px}
.admin-tab{display:none}
.admin-tab.is-active{display:block}
.admin-card{background:#fff;border:1px solid #DDE7F1;border-radius:var(--r-md);padding:24px;margin-bottom:20px}
.admin-card h3{font-family:var(--serif);font-weight:400;font-size:1.42rem;color:var(--navy);margin-bottom:5px}
.admin-card .ac-sub{font-size:.82rem;color:var(--ink-soft);margin-bottom:20px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;font-weight:500;letter-spacing:0;color:var(--navy-soft);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:11px 14px;border:1px solid #D2DFEC;border-radius:var(--r-sm);
  background:#FBFDFF;font-size:.9rem;transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand)}
.field .hint{font-size:.72rem;color:var(--ink-soft);margin-top:6px}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #E7EEF6}
.switch-row:last-child{border-bottom:0}
.switch-row .sr-lab{font-size:.88rem;color:var(--navy)}
.switch-row .sr-hint{font-size:.74rem;color:var(--ink-soft);margin-top:2px}
.switch{position:relative;width:44px;height:25px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.switch .track{position:absolute;inset:0;border-radius:var(--r-pill);background:#C9D6E4;transition:background .3s}
.switch .knob{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .3s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked ~ .track{background:var(--azure)}
.switch input:checked ~ .knob{transform:translateX(19px)}
.admin-table{width:100%;border-collapse:collapse;font-size:.84rem}
.admin-table th{
  text-align:left;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  padding:10px 12px;border-bottom:1px solid #DDE7F1;font-weight:500;
}
.admin-table td{padding:12px;border-bottom:1px solid #EAF1F8;vertical-align:top}
.admin-table tr:last-child td{border-bottom:0}
.admin-table .num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.badge--ok{background:rgba(61,143,207,.2);color:var(--brand)}
.badge--off{background:#E4EBF3;color:var(--ink-soft)}
.badge--warn{background:rgba(180,118,30,.16);color:#8A5A12}
.admin-empty{padding:34px;text-align:center;color:var(--ink-soft);font-size:.88rem}
.admin-ing-row{display:grid;grid-template-columns:1.4fr .8fr .7fr .7fr .8fr;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #EAF1F8}
.admin-ing-row:last-child{border-bottom:0}
.admin-ing-row .name{font-size:.84rem;color:var(--navy)}
.admin-ing-row .lvl{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.admin-ing-row input[type="number"]{padding:7px 10px;font-size:.82rem}
@media (max-width:760px){
  .admin-ing-row{grid-template-columns:1fr 1fr;gap:8px}
}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:var(--navy-soft);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--brand)}
.admin-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}

/* ---------- Checkout / cart page ---------- */
.checkout-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(26px,4vw,64px);align-items:start}
@media (max-width:900px){.checkout-grid{grid-template-columns:1fr}}
.order-summary{background:var(--paper-2);border-radius:var(--r-md);padding:26px;position:sticky;top:calc(var(--nav-h) + 22px)}
@media (max-width:900px){.order-summary{position:static}}
.sum-row{display:flex;justify-content:space-between;gap:14px;font-size:.88rem;padding-block:7px;color:var(--ink-mid)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
.sum-total .val{font-family:var(--serif);font-weight:400;font-size:1.9rem;color:var(--navy)}
.promo{display:flex;gap:9px;margin-top:16px}
.promo input{flex:1;min-width:0;padding:11px 15px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:.85rem}
.fulfil{display:grid;gap:10px;margin-top:8px}
.fulfil label{
  display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r-md);cursor:pointer;transition:all .35s var(--ease);background:#fff;
}
.fulfil label:hover{border-color:var(--azure)}
.fulfil label:has(input:checked){border-color:var(--brand);background:var(--paper)}
.fulfil input{margin-top:2px;accent-color:var(--brand);flex:none}
.fulfil input:checked ~ .fl-txt .fl-name{color:var(--brand)}
.fl-txt{display:block;min-width:0}
.fl-name{display:block;font-size:.9rem;font-weight:600;color:var(--navy);line-height:1.4}
.fl-hint{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:5px;line-height:1.55}

/* vertical variant of the process list, for use beside a photo */
.process--stack{grid-template-columns:1fr;margin-top:0}
.process--stack .process-step{
  display:grid;grid-template-columns:26px 1fr;column-gap:14px;row-gap:3px;
  border-left:0;border-top:1px solid var(--line-soft);padding:15px 0;
}
.process--stack .process-step:first-child{border-top:0;padding-top:0}
.process--stack .process-step .ps-icon{width:26px;height:26px;margin-bottom:0;grid-row:1 / span 2}
.process--stack .process-step h4{margin-bottom:0}