/* ===== Nutriva Studio — clinical-luxe product configurator ===== */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&display=swap');

:root{
  --bg0:#080c0b; --bg1:#0c130f; --bg2:#102019;
  --on:#eef1ea; --soft:#9aa49d; --faint:#67726b;
  --line:rgba(238,241,234,.12); --line-2:rgba(238,241,234,.22);
  --panel:rgba(12,19,15,.72);
  /* signature accent — fresh mint-emerald, used sparingly */
  --ac:#46dfa2; --ac-deep:#1ca47a;
  --gold:var(--ac); --gold-deep:var(--ac-deep);
  --green:#46dfa2; --glow:#8fe8c6;
  --field:rgba(238,241,234,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg0);color:var(--on);
  font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
.serif{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
.mono{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-feature-settings:"tnum" 1;letter-spacing:0}
h1,h2,h3{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-weight:800;margin:0;letter-spacing:-.032em}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:11.5px;letter-spacing:.02em;text-transform:none;color:var(--soft)}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--gold);border-radius:2px;flex:none}
body{font-variant-numeric:tabular-nums}
button{font-family:inherit}

.app{height:100%;display:flex;flex-direction:column}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:18px;padding:0 26px;height:60px;border-bottom:1px solid var(--line);background:rgba(10,18,14,.6);backdrop-filter:blur(10px);z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-family:'Schibsted Grotesk';font-size:20px;font-weight:700;letter-spacing:-.022em}
.brand .leaf{width:22px;height:22px;border-radius:50% 50% 50% 0;background:linear-gradient(140deg,var(--gold),var(--gold-deep));transform:rotate(45deg)}
.brand small{font-family:'Schibsted Grotesk';font-size:9px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase;border-left:1px solid var(--line);padding-left:10px;margin-left:2px}
.seg{margin:0 auto;display:flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden}
.seg button{background:transparent;border:none;color:var(--soft);font-size:13px;font-weight:600;letter-spacing:.02em;padding:9px 22px;cursor:pointer;transition:all .2s;white-space:nowrap}
.seg button.on{background:var(--on);color:var(--bg0)}
.topbar .talk{font-size:12.5px;color:var(--soft);text-decoration:none}
.topbar .talk b{color:var(--gold);font-weight:600}

/* AI build buttons */
.aitop{margin-left:16px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ac);
  background:rgba(70,223,162,.08);border:1px solid var(--ac-deep);border-radius:2px;padding:7px 13px;cursor:pointer;transition:all .16s}
.aitop:hover{background:rgba(70,223,162,.16)}
.aisparkle{font-size:12px;line-height:1}
.aihero{width:100%;display:flex;align-items:center;gap:12px;text-align:left;margin:0 0 16px;cursor:pointer;
  background:linear-gradient(100deg,rgba(70,223,162,.12),rgba(70,223,162,.03));border:1px solid var(--ac-deep);border-radius:3px;padding:13px 15px;font:inherit;color:var(--on);transition:all .16s}
.aihero:hover{background:linear-gradient(100deg,rgba(70,223,162,.2),rgba(70,223,162,.06));transform:translateY(-1px)}
.aihero .aisparkle{font-size:18px;color:var(--ac);flex:none}
.aihero-t{flex:1;font-size:13.5px;color:var(--soft);line-height:1.35}
.aihero-t b{color:var(--on);font-weight:600}
.aihero-arr{color:var(--ac);font-weight:700;flex:none}

/* AI modal extras */
.aimodal{width:min(480px,100%)}
.aimodal textarea.fld{margin-bottom:12px}
.aiex{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.aiex button{font:inherit;font-size:12px;color:var(--soft);background:var(--field);border:1px dashed var(--line-2);border-radius:2px;padding:6px 10px;cursor:pointer;transition:all .15s}
.aiex button:hover{border-color:var(--ac);color:var(--ac)}
.aierr{color:#e3866c;font-size:13px;margin:0 0 12px}
.aierr[hidden]{display:none}
.aimodal.thinking #aiRun{pointer-events:none;opacity:.8}
.aimodal.thinking #aiRunLabel::after{content:"";display:inline-block;width:11px;height:11px;margin-left:8px;border:2px solid rgba(4,20,13,.35);border-top-color:#04140d;border-radius:50%;vertical-align:-1px;animation:aispin .7s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.topbar .tbspace{flex:1}
.topbar .saved{font-family:'Schibsted Grotesk';font-size:10.5px;letter-spacing:.05em;color:var(--green);border:1px solid rgba(86,165,120,.4);border-radius:2px;padding:4px 9px;margin-right:16px;white-space:nowrap;animation:savein .3s cubic-bezier(.2,.8,.2,1)}
.topbar .saved[hidden]{display:none}
@keyframes savein{from{transform:translateY(-4px) scale(.96)}to{transform:none}}

/* ===== save-progress modal ===== */
.modal-back{position:fixed;inset:0;z-index:80;background:rgba(6,12,9,.74);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:24px}
.modal-back.show{display:flex;animation:mfade .2s}
@keyframes mfade{from{background:rgba(6,12,9,0)}to{background:rgba(6,12,9,.74)}}
.modal{width:min(424px,100%);background:linear-gradient(180deg,#13241c,#0d1712);border:1px solid var(--line-2);border-radius:4px;padding:30px 28px 26px;box-shadow:0 40px 90px -20px #000;animation:modalup .3s cubic-bezier(.2,.8,.2,1)}
@keyframes modalup{from{transform:translateY(18px)}to{transform:none}}
.modal h3{font-size:27px;margin:9px 0 0}
.modal>p{color:var(--soft);font-size:14.5px;margin:10px 0 18px;line-height:1.5}
.modal .fld{margin-bottom:12px}
.modal .fld.shake{animation:shake .35s;border-color:var(--red,#bb5b46)}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.modal .btn{width:100%}
.mskip{display:block;width:100%;margin-top:10px;background:none;border:none;color:var(--soft);font-weight:600;font-size:13.5px;cursor:pointer;padding:8px}
.mskip:hover{color:var(--on)}
.mfine{font-size:11.5px;color:var(--faint);margin:16px 0 0;line-height:1.5}

/* ---------- main split ---------- */
.studio{flex:1;display:grid;grid-template-columns:1fr 528px;min-height:0}
.views{display:contents}

/* ====================== STAGE (left) ====================== */
.stage{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 38% 28%, rgba(70,223,162,.10), transparent 46%),
  radial-gradient(80% 70% at 50% 42%, var(--bg2), var(--bg1) 52%, var(--bg0) 100%)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 200px 40px rgba(0,0,0,.55);
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.018) 1px, transparent 0);background-size:3px 3px}
.spotlight{position:absolute;left:50%;top:34%;width:560px;height:560px;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(208,214,206,.16), transparent 62%);
  filter:blur(14px);transition:background .8s ease;pointer-events:none}

.stagewrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.stagewrap .kicker{position:absolute;top:34px;left:34px;max-width:300px}
.stagewrap .kicker h2{font-size:30px;line-height:1.02;margin-top:11px;font-weight:800}
.stagewrap .kicker p{color:var(--soft);font-size:13.5px;margin:7px 0 0}

/* product platform + reflection */
.platform{position:relative;width:340px;height:430px;display:grid;place-items:center;
  animation:floatUp .9s cubic-bezier(.2,.8,.2,1)}
@keyframes floatUp{from{transform:translateY(34px)}to{transform:none}}
.floater{animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.floorshadow{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:230px;height:34px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%);filter:blur(6px)}
.floorglow{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:170px;height:18px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(208,214,206,.22), transparent 70%);filter:blur(7px);transition:background .6s}

/* ---------- the product ---------- */
.product{position:relative;width:340px;height:400px;display:grid;place-items:center}
.vessel{position:absolute;left:50%;top:50%;display:none;flex-direction:column;align-items:center;transform:translate(-50%,-50%);pointer-events:none}
.vessel.show{display:flex;animation:vesselin .45s cubic-bezier(.2,.9,.2,1)}
@keyframes vesselin{from{transform:translate(-50%,-50%) scale(.86)}to{transform:translate(-50%,-50%) scale(1)}}

/* ===== realistic vessels ===== */
.product{
  --cap1:#46504a; --cap2:#2a322c; --cap3:#161c18;
  --captex:repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2.5px, rgba(255,255,255,.05) 2.5px 5px);
  --capspec:rgba(255,255,255,.20);
}

/* --- cap: cylindrical + knurled + beveled --- */
.cap{position:relative;z-index:3;border-radius:6px 6px 3px 3px;border:1px solid rgba(0,0,0,.55);
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, var(--capspec) 12%, rgba(255,255,255,.03) 28%, rgba(0,0,0,.10) 58%, rgba(0,0,0,.5) 100%),
    var(--captex),
    linear-gradient(180deg, var(--cap1), var(--cap2) 56%, var(--cap3));
  background-blend-mode:overlay, normal, normal;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.28), inset 0 -5px 7px rgba(0,0,0,.5), 0 4px 9px rgba(0,0,0,.4);}
.cap::after{content:"";position:absolute;top:1px;left:7%;right:7%;height:3px;border-radius:3px;background:rgba(255,255,255,.32)}

/* --- glass body: translucent, cylindrical, glossy --- */
.glass{position:relative;overflow:hidden;z-index:2;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 26%);
  box-shadow:inset 0 0 34px rgba(0,0,0,.30), inset 0 15px 22px rgba(0,0,0,.28), inset 0 -12px 20px rgba(0,0,0,.32);}
.glass::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.12) 8%, rgba(255,255,255,.22) 19%, rgba(255,255,255,.05) 33%, rgba(0,0,0,.03) 54%, rgba(0,0,0,.16) 80%, rgba(0,0,0,.42) 100%);}
.contents{position:absolute;left:6px;right:6px;bottom:5px;z-index:1;
  display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;gap:1.5px;padding:3px;overflow:hidden;
  background:none;transition:none;filter:blur(.4px) saturate(.92)}
/* discrete capsules / tablets / gummies in product colour */
.cap-pill{width:15px;height:6px;border-radius:4px;flex:none;transform:rotate(var(--r,0deg));
  background:linear-gradient(90deg, color-mix(in srgb,var(--glow) 72%,#52524a) 0 47%, rgba(255,255,255,.18) 47% 53%, color-mix(in srgb,var(--glow) 44%,#e6e6df) 53% 100%);
  box-shadow:inset 0 .5px .5px rgba(255,255,255,.35), inset 0 -1px 1.5px rgba(0,0,0,.22), 0 .5px 1px rgba(0,0,0,.22)}
.tab-pill{width:9px;height:9px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 38% 32%, color-mix(in srgb,var(--glow) 48%,#efefe8), color-mix(in srgb,var(--glow) 80%,#3a3a33));
  box-shadow:inset 0 .5px .5px rgba(255,255,255,.3), inset 0 -1px 2px rgba(0,0,0,.24), 0 .5px 1px rgba(0,0,0,.22)}
.gum-pill{width:10px;height:10px;border-radius:4px;flex:none;transform:rotate(var(--r,0deg));
  background:linear-gradient(135deg, color-mix(in srgb,var(--glow) 50%,#efefe8), color-mix(in srgb,var(--glow) 78%,#3a3a33));
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4), inset 0 -1px 2px rgba(0,0,0,.2), 0 .5px 1px rgba(0,0,0,.2)}
/* bulk fills for powder & liquid */
.contents.bulk{display:block;padding:0;left:0;right:0;
  background:linear-gradient(90deg, rgba(0,0,0,.3), rgba(255,255,255,.18) 22%, rgba(0,0,0,.1) 70%, rgba(0,0,0,.32)),
            linear-gradient(180deg, color-mix(in srgb,var(--glow) 74%,#000), color-mix(in srgb,var(--glow) 92%,#000));
  background-blend-mode:overlay, normal}
.contents.liquid{box-shadow:0 -2px 16px color-mix(in srgb,var(--glow) 45%,transparent)}
.contents.liquid::before{content:"";position:absolute;top:-1px;left:0;right:0;height:4px;background:color-mix(in srgb,var(--glow) 96%,#fff);opacity:.55}
.contents::before{content:"";position:absolute;top:-2px;left:0;right:0;height:7px;background:color-mix(in srgb,var(--glow) 98%,#fff);opacity:.5;filter:blur(1px)}
.sheen{position:absolute;top:4%;bottom:8%;left:18%;width:6%;z-index:5;border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);filter:blur(1.5px)}
.sheen::after{content:"";position:absolute;top:6%;bottom:30%;left:150%;width:40%;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);filter:blur(1px)}

/* label (frosted, slightly curved by side shading) — carries the product colour */
.label{position:absolute;z-index:6;background:linear-gradient(180deg, rgba(248,245,238,.97), rgba(238,234,222,.94));
  color:#1a1a14;border-radius:2px;border-top:3px solid var(--glow);box-shadow:0 6px 18px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.4);
  display:flex;flex-direction:column;padding:11px 12px;text-align:left;overflow:hidden}
.label::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.14),transparent 14%,transparent 86%,rgba(0,0,0,.14))}
.label .lbrand{font-family:'Schibsted Grotesk';font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb, var(--glow) 58%, #2c2c24)}
.label .lname{font-family:'Schibsted Grotesk';font-weight:500;font-size:18px;line-height:1.04;margin:3px 0 5px}
.label .lstrip{height:2px;background:var(--glow);opacity:.9;margin:0 0 6px}
.label .lacts{font-family:'Schibsted Grotesk';font-size:8px;line-height:1.5;color:#4a4636;letter-spacing:.02em;flex:1 1 auto;min-height:0;overflow:hidden}
.label .lfoot{margin-top:6px;flex:none;display:flex;justify-content:space-between;font-family:'Schibsted Grotesk';font-size:7.5px;color:#8a8470;letter-spacing:.05em;padding-top:6px;border-top:1px solid #1a1a1418}
.label.flash{animation:lblflash .5s ease}
@keyframes lblflash{0%{opacity:.25;transform:translateY(4px)}100%{opacity:1;transform:none}}

/* BOTTLE — neck, shoulder, body */
.v-bottle .cap{width:92px;height:40px;margin-bottom:-3px}
.v-bottle .neck{width:96px;height:15px;border:1px solid rgba(0,0,0,.45);border-bottom:none;border-radius:3px 3px 0 0;z-index:1;margin-bottom:-3px;
  background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.16) 20%, rgba(0,0,0,.06) 52%, rgba(0,0,0,.45)), linear-gradient(180deg,#222a24,#171d18)}
.v-bottle .glass{width:174px;height:250px;border-radius:18px 18px 16px 16px}
.v-bottle .glass{box-shadow:inset 0 0 34px rgba(0,0,0,.3), inset 0 22px 26px rgba(0,0,0,.34), inset 0 -12px 20px rgba(0,0,0,.32)}
.v-bottle .contents{height:56%;border-radius:0 0 14px 14px}
.v-bottle .label{left:18px;right:18px;top:70px;height:150px}

/* JAR (powder/gummy) — wide tub */
.v-jar .cap{width:188px;height:42px;border-radius:9px 9px 4px 4px;margin-bottom:-3px}
.v-jar .glass{width:202px;height:184px;border-radius:12px 12px 16px 16px}
.v-jar .contents{height:60%;border-radius:0 0 14px 14px}
.v-jar .label{left:20px;right:20px;top:42px;height:122px}
.v-jar .label .lname{font-size:21px}

/* DROPPER (liquid) — rubber teat + pipette */
.v-dropper .bulb{width:30px;height:42px;border-radius:15px 15px 7px 7px;border:1px solid rgba(0,0,0,.4);position:relative;z-index:4;
  background:linear-gradient(90deg, rgba(0,0,0,.4), rgba(255,255,255,.18) 24%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.4)), linear-gradient(180deg,#33403a,#1a221d)}
.v-dropper .cap{width:56px;height:30px;border-radius:5px;margin-top:-7px}
.v-dropper .glass{width:104px;height:236px;border-radius:12px 12px 22px 22px}
.v-dropper .contents{height:64%;border-radius:0 0 20px 20px}
.v-dropper .label{left:12px;right:12px;top:74px;height:130px}
.v-dropper .label .lname{font-size:15px}
.v-dropper .label .lacts{font-size:7px}

/* DOYPACK (stand-up pouch) — matte foil, gussets, curvature */
.v-doypack{align-items:center}
.v-doypack .dp-seal{width:176px;height:15px;border:1px solid rgba(0,0,0,.35);border-bottom:none;border-radius:2px 2px 0 0;position:relative;z-index:3;margin-bottom:-1px;
  background:repeating-linear-gradient(90deg,#d6cfbf 0 4px,#b7af9f 4px 8px)}
.v-doypack .dp-body{width:196px;height:254px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:2px 2px 7px 7px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.05) 10%, rgba(255,255,255,.16) 22%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.04) 58%, rgba(0,0,0,.22) 84%, rgba(0,0,0,.42) 100%),
    linear-gradient(165deg, #dadcd4, #b9bcb3);
  background-blend-mode:overlay, normal;
  box-shadow:inset 0 10px 16px rgba(255,255,255,.10), inset 0 -22px 36px rgba(0,0,0,.45);transition:background .6s}
.v-doypack .dp-sheen{position:absolute;top:6%;bottom:10%;left:20%;width:5%;z-index:4;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);filter:blur(2px)}
.v-doypack .label{left:26px;right:26px;top:56px;height:150px}

/* TUBE (effervescent) — opaque cylinder, takes a cap */
.v-tube{align-items:center}
.v-tube .cap{width:78px;height:30px;border-radius:6px 6px 3px 3px;margin-bottom:-3px}
.v-tube .tube-body{width:96px;height:248px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:12px 12px 14px 14px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 9%, rgba(255,255,255,.2) 21%, rgba(255,255,255,.03) 37%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.2) 84%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, #f4f5f1 0%, #dfe1da 12%, #c6c9c1 100%);
  background-blend-mode:overlay, normal;
  box-shadow:inset 0 -14px 26px rgba(0,0,0,.4);transition:background .6s}
.v-tube .tube-sheen{position:absolute;top:5%;bottom:6%;left:19%;width:5%;z-index:4;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);filter:blur(1.5px)}
.v-tube .label{left:11px;right:11px;top:62px;height:150px}
.v-tube .label .lname{font-size:15px}
.v-tube .label .lacts{font-size:7px}

/* form pips floating cue */
.formtag{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);font-family:'Schibsted Grotesk';font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.formtag b{color:var(--on)}

/* mini live stats row under product (stage footer) */
.stagestats{position:absolute;bottom:30px;left:34px;right:34px;display:flex;gap:26px;justify-content:center;align-items:center}
.stagestats .st{ text-align:center}
.stagestats .st .v{font-family:'Schibsted Grotesk';font-size:25px;font-weight:700;letter-spacing:-.02em}
.stagestats .st .v small{font-size:13px;color:var(--soft)}
.stagestats .st .k{font-family:'Schibsted Grotesk';font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.stagestats .sep{width:1px;height:30px;background:var(--line)}

/* ====================== CONTROL PANEL (right) ====================== */
/* ---------- control panel: scroll body + pinned estimate ---------- */
.panel-side{background:linear-gradient(180deg,#0d1712,#0b130f);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative}
.pscroll{flex:1;overflow-y:auto;padding:26px 28px 28px}
.pscroll::-webkit-scrollbar{width:8px}.pscroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.psec{padding:20px 0;border-top:1px solid var(--line)}
.psec:first-child{border-top:none;padding-top:4px}
.psec .lab{display:flex;align-items:baseline;gap:9px;margin-bottom:14px}
.psec .lab .n{font-family:'Schibsted Grotesk';font-size:10px;color:var(--gold-deep)}
.psec .lab h3{font-size:19px;white-space:nowrap}
.psec .lab .opt{margin-left:auto;font-family:'Schibsted Grotesk';font-size:9.5px;color:var(--faint);letter-spacing:.05em}

/* goal swatch grid */
.goals{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.goal{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:2px;cursor:pointer;background:var(--field);transition:all .18s;white-space:nowrap}
.goal:hover{border-color:var(--line-2);background:rgba(238,241,234,.08)}
.goal .dot{width:13px;height:13px;border-radius:50%;flex:none;box-shadow:0 0 10px currentColor}
.goal .gt{font-size:13.5px;font-weight:600}
.goal.on{border-color:var(--on);background:rgba(238,241,234,.12)}
.goal.on .gt{color:var(--on)}

/* format icons row */
.forms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fm{border:1px solid var(--line);border-radius:2px;padding:11px 6px;text-align:center;cursor:pointer;background:var(--field);transition:all .18s}
.fm:hover{border-color:var(--line-2)}
.fm .fi{height:26px;display:grid;place-items:center;margin-bottom:6px}
.fm .ft{font-size:12px;font-weight:600}
.fm .fn{font-family:'Schibsted Grotesk';font-size:8px;color:var(--faint);letter-spacing:.04em}
.fm.on{border-color:var(--gold);background:rgba(70,223,162,.10)}
.fm.on .ft{color:var(--gold)}
.fm .fi i{display:block;background:none}
.fi .i-bottle{width:13px;height:22px;border:1.5px solid currentColor;border-radius:3px 3px 4px 4px;border-top:4px solid currentColor;color:var(--soft)}
.fm.on .i-bottle{color:var(--gold)}
.fi .i-jar{width:20px;height:17px;border:1.5px solid currentColor;border-radius:3px 3px 5px 5px;border-top:4px solid currentColor;color:var(--soft)}
.fm.on .i-jar{color:var(--gold)}
.fi .i-drop{width:11px;height:22px;border:1.5px solid currentColor;border-radius:3px 3px 6px 6px;color:var(--soft);position:relative}
.fi .i-drop::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:6px;height:6px;background:currentColor;border-radius:2px}
.fm.on .i-drop{color:var(--gold)}
.fi .i-pouch{width:17px;height:23px;border:1.5px solid currentColor;border-radius:3px 3px 7px 7px;color:var(--soft);position:relative}
.fi .i-pouch::before{content:"";position:absolute;top:-3px;left:-1.5px;right:-1.5px;height:4px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px)}
.fm.on .i-pouch{color:var(--gold)}
.fi .i-tube{width:12px;height:24px;border:1.5px solid currentColor;border-radius:5px;color:var(--soft);position:relative}
.fi .i-tube::before{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:9px;height:5px;background:currentColor;border-radius:2px 2px 1px 1px}
.fm.on .i-tube{color:var(--gold)}

/* text field */
.fld{display:block;width:100%;background:var(--field);border:1px solid var(--line-2);border-radius:2px;color:var(--on);
  font:inherit;font-size:14.5px;padding:12px 13px;transition:all .16s}
.fld::placeholder{color:var(--faint)}
textarea.fld{resize:vertical;min-height:92px;line-height:1.5;font-family:inherit}

.copyinfo{margin-top:14px;font-size:13px;color:var(--green);font-family:'Schibsted Grotesk';letter-spacing:.02em}

/* checkbox */
.check{display:flex;align-items:center;gap:10px;cursor:pointer;margin-top:14px;font-size:13.5px;color:var(--soft);user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .ck-box{width:18px;height:18px;border:1px solid var(--line-2);border-radius:3px;display:grid;place-items:center;color:transparent;font-size:11px;transition:all .15s;flex:none}
.check input:checked + .ck-box{background:var(--gold);border-color:var(--gold);color:#04140d}
.check input:checked + .ck-box::after{content:"✓"}
.check:hover .ck-box{border-color:var(--gold)}
.copynote{margin-top:18px;font-size:13.5px;color:var(--green);font-family:'Schibsted Grotesk';letter-spacing:.02em}
.copynote[hidden]{display:none}
.fld:focus{outline:none;border-color:var(--gold);background:rgba(70,223,162,.06)}
.flabel{display:block;font-size:13px;color:var(--soft);margin-bottom:8px;font-weight:500}

/* PILL INPUT */
.pillbox{border:1px solid var(--line-2);border-radius:2px;background:var(--field);padding:8px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-height:48px;transition:border-color .16s}
.pillbox:focus-within{border-color:var(--gold)}
.pill{display:inline-flex;align-items:center;gap:7px;background:rgba(238,241,234,.10);border:1px solid var(--line-2);border-radius:2px;padding:5px 8px 5px 10px;font-size:12.5px;font-weight:600;animation:pillin .25s cubic-bezier(.2,1.4,.4,1)}
.pill .pdot{width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 7px var(--glow)}
.pill button{background:none;border:none;color:var(--faint);cursor:pointer;font-size:14px;line-height:1;padding:0}
.pill button:hover{color:var(--on)}
@keyframes pillin{from{transform:scale(.7)}to{transform:none}}
.pillbox input{flex:1;min-width:120px;background:none;border:none;color:var(--on);font:inherit;font-size:14px;padding:6px 4px}
.pillbox input:focus{outline:none}
.suggest{position:relative}
.basedtag{display:flex;align-items:center;gap:8px;margin-bottom:18px;padding:9px 12px;border:1px solid var(--gold-deep);border-radius:2px;background:rgba(70,223,162,.08);font-size:13px;color:var(--soft)}
.basedtag b{color:var(--gold);font-family:'Schibsted Grotesk';font-size:15px;font-weight:500}
.basedtag button{margin-left:auto;background:none;border:none;color:var(--faint);cursor:pointer;font-size:13px}
.basedtag button:hover{color:var(--on)}
.sugmenu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#0f1813;border:1px solid var(--line-2);border-radius:2px;z-index:30;max-height:206px;overflow-y:auto;box-shadow:0 16px 40px rgba(0,0,0,.5);display:none}
.sugmenu.show{display:block}
.sugmenu div{padding:9px 13px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--line)}
.sugmenu div:hover,.sugmenu div.hl{background:rgba(70,223,162,.12);color:var(--gold)}
.quickadd{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.qa{font-size:11.5px;color:var(--soft);border:1px dashed var(--line-2);border-radius:2px;padding:5px 9px;cursor:pointer;background:none;transition:all .15s;white-space:nowrap}
.qa:hover{border-color:var(--gold);color:var(--gold)}
.qa .p{color:var(--gold);margin-right:4px}

/* qty chips */
.qty{display:flex;gap:7px;flex-wrap:wrap}

/* ---------- source step (custom vs catalogue) ---------- */
.srclist{display:flex;flex-direction:column;gap:9px}
.srcrow{display:flex;align-items:center;gap:13px;padding:12px 13px;border:1px solid var(--line);border-radius:2px;background:var(--field);cursor:pointer;transition:all .16s;position:relative}
.srcrow:hover{border-color:var(--line-2);background:rgba(238,241,234,.07)}
.srcrow.on{border-color:var(--gold);background:rgba(70,223,162,.08)}
.srcrow .smini{width:38px;height:58px;border-radius:5px 5px 6px 6px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(100deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 42%,rgba(0,0,0,.22));position:relative;overflow:hidden;flex:none}
.srcrow .smini::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:24px;height:9px;background:#1a221d;border-radius:2px}
.srcrow .smini i{position:absolute;left:0;right:0;bottom:0;height:54%;background:var(--c,var(--glow));box-shadow:0 -2px 10px var(--c,var(--glow))}
.srcrow.custom .smini{display:grid;place-items:center;background:rgba(70,223,162,.08);border-style:dashed;border-color:var(--gold-deep)}
.srcrow.custom .smini::before{display:none}
.srcrow.custom .smini b{font-family:'Schibsted Grotesk';font-size:22px;color:var(--gold);font-weight:500}
.srcrow .sbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.srcrow .scat{font-family:'Schibsted Grotesk';font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c2,var(--gold-deep))}
.srcrow .sname{font-family:'Schibsted Grotesk';font-size:17px;font-weight:500;line-height:1.1}
.srcrow .sspec{font-family:'Schibsted Grotesk';font-size:9.5px;color:var(--soft);letter-spacing:.02em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srcrow .sright{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.srcrow .sprice{font-family:'Schibsted Grotesk';font-size:15px}
.srcrow .sprice small{font-size:10px;color:var(--soft)}
.srcrow .stick{width:18px;height:18px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:transparent;font-size:11px;transition:all .16s}
.srcrow.on .stick{background:var(--gold);border-color:var(--gold);color:#04140d}
.srchdr{font-family:'Schibsted Grotesk';font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:6px 0 -2px;padding-left:2px}

/* ---------- packaging finishes ---------- */
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pk{min-width:0;border:1px solid var(--line);border-radius:2px;padding:10px;cursor:pointer;background:var(--field);transition:all .16s;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.pk:hover{border-color:var(--line-2)}
.pk .pksw{width:100%;height:30px;border-radius:2px;border:1px solid rgba(255,255,255,.16)}
.pk .pkn{font-size:12px;font-weight:600}
.pk.on{border-color:var(--gold);background:rgba(70,223,162,.08)}
.pk.on .pkn{color:var(--gold)}
.pk-clear .pksw{background:linear-gradient(100deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(0,0,0,.2))}
.pk-amber .pksw{background:linear-gradient(100deg,rgba(214,150,70,.5),rgba(150,95,30,.3) 50%,rgba(70,40,10,.4))}
.pk-frost .pksw{background:linear-gradient(100deg,rgba(235,238,232,.55),rgba(210,216,206,.35) 50%,rgba(150,160,150,.3))}
.pk-cobalt .pksw{background:linear-gradient(100deg,rgba(70,110,180,.5),rgba(40,70,140,.35) 50%,rgba(15,30,80,.45))}
.pk-whiteplastic .pksw{background:linear-gradient(100deg,#c9ccc4,#fdfdfb 42%,#dadcd4 75%,#bcc0b8)}
.pk-blackplastic .pksw{background:linear-gradient(100deg,#2c322e,#454d47 38%,#1a201c 60%,#0c100e)}

/* cap swatches */
.cap-black .pksw{background:linear-gradient(180deg,#39433d,#1a221d 60%,#0f1612)}
.cap-silver .pksw{background:linear-gradient(180deg,#e7ebee,#aab1b8 55%,#838a92)}
.cap-white .pksw{background:linear-gradient(180deg,#fdfdfb,#e8e8e3 60%,#d2d2cc)}
.cap-ribwhite .pksw{background:repeating-linear-gradient(90deg,#d9d9d3 0 3px,#fbfbf8 3px 6px)}
.cap-ribsilver .pksw{background:repeating-linear-gradient(90deg,#8d949c 0 3px,#d6dade 3px 6px)}
.cap-gold .pksw{background:linear-gradient(180deg,#eccf86,#c8a64f 60%,#a8842f)}

/* cap material — drives the cap colour & texture variables */
.product[data-cap=black]{--cap1:#46504a;--cap2:#2a322c;--cap3:#161c18;--capspec:rgba(255,255,255,.18)}
.product[data-cap=silver]{--cap1:#f1f5f8;--cap2:#b2b9c0;--cap3:#7d848c;--capspec:rgba(255,255,255,.6)}
.product[data-cap=white]{--cap1:#ffffff;--cap2:#e7e7e1;--cap3:#cfcfc8;--capspec:rgba(255,255,255,.5)}
.product[data-cap=gold]{--cap1:#f1d48b;--cap2:#c8a64f;--cap3:#9b7c33;--capspec:rgba(255,255,255,.55)}
.product[data-cap=ribwhite]{--cap1:#ffffff;--cap2:#e7e7e1;--cap3:#cfcfc8;--capspec:rgba(255,255,255,.4);--captex:repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 4px, rgba(255,255,255,.55) 4px 8px)}
.product[data-cap=ribsilver]{--cap1:#f1f5f8;--cap2:#a9b0b7;--cap3:#7d848c;--capspec:rgba(255,255,255,.5);--captex:repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 4px, rgba(255,255,255,.5) 4px 8px)}

/* finish tints applied to the product glass */
.product[data-finish=amber] .glass{border-color:rgba(214,150,70,.4);box-shadow:inset 0 0 40px rgba(90,55,15,.45), inset 12px 0 26px rgba(227,170,80,.12)}
.product[data-finish=amber] .glass::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(214,150,70,.30),rgba(150,95,30,.12) 45%,rgba(70,40,10,.28));pointer-events:none;z-index:1}
.product[data-finish=frost] .glass{border-color:rgba(235,238,232,.45)}
.product[data-finish=frost] .glass::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(235,238,232,.42),rgba(210,216,206,.20) 50%,rgba(150,160,150,.22));backdrop-filter:blur(1px);pointer-events:none;z-index:1}
.product[data-finish=cobalt] .glass{border-color:rgba(70,110,180,.42)}
.product[data-finish=cobalt] .glass::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(70,110,180,.34),rgba(40,70,140,.16) 48%,rgba(15,30,80,.32));pointer-events:none;z-index:1}
.product .contents,.product .sheen{z-index:2}
/* fill heights per form-state handled in JS; keep waterline hidden */
.product .contents::before{display:none}
.product .contents.liquid::before{display:block}
/* opaque plastic finishes — solid body, no visible fill */
.product[data-finish=whiteplastic] .glass{border-color:rgba(0,0,0,.18);
  background:linear-gradient(90deg,#b9bdb4 0%,#dfe1da 12%,#fbfbf8 40%,#eceee7 60%,#cdd0c8 82%,#aeb2a9 100%);
  box-shadow:inset 0 16px 24px rgba(255,255,255,.55), inset 0 -20px 30px rgba(0,0,0,.18)}
.product[data-finish=whiteplastic] .contents,
.product[data-finish=blackplastic] .contents{display:none}
.product[data-finish=blackplastic] .glass{border-color:rgba(0,0,0,.55);
  background:linear-gradient(90deg,#080b09 0%,#2b322d 16%,#3f473f 40%,#272e29 62%,#141916 82%,#070a08 100%);
  box-shadow:inset 0 16px 20px rgba(255,255,255,.12), inset 0 -20px 30px rgba(0,0,0,.6)}
/* keep the vertical gloss highlight readable on plastic */
.product[data-finish=whiteplastic] .glass::before,
.product[data-finish=blackplastic] .glass::before{opacity:.6}

/* brand hint */
.brandhint{font-size:12.5px;color:var(--faint);margin:14px 0 0;line-height:1.5;border-left:1px solid var(--line-2);padding-left:11px}

/* ---------- formula read-only (catalogue) ---------- */
.ronote{border:1px solid var(--line-2);border-radius:2px;background:var(--field);padding:15px}
.rohead{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px}
.rohead .rolock{font-size:13px;opacity:.7;margin-top:2px}
.rohead b{font-family:'Schibsted Grotesk';font-size:17px;font-weight:500;display:block;margin-bottom:2px}
.rohead span{font-size:12.5px;color:var(--soft);line-height:1.4}
.ropills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}
.pill.ro{background:rgba(238,241,234,.07);cursor:default}
.modbtn{width:100%;background:rgba(70,223,162,.1);border:1px solid var(--gold-deep);color:var(--gold);font-weight:600;font-size:14px;padding:11px;border-radius:2px;cursor:pointer;transition:all .16s}
.modbtn:hover{background:rgba(70,223,162,.18)}
.modhint{font-size:12px;color:var(--faint);margin:10px 0 0;line-height:1.45}

/* ---------- brand: label artwork ---------- */
.tmpl{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.tmpl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.tmpl-k{font-size:13px;font-weight:600;display:block}
.tmpl-d{font-family:'Schibsted Grotesk';font-size:10px;color:var(--faint);letter-spacing:.04em}
.tmpl-dl{background:none;border:1px solid var(--line-2);color:var(--on);font-weight:600;font-size:12.5px;padding:8px 13px;border-radius:2px;cursor:pointer;white-space:nowrap;transition:all .16s}
.tmpl-dl:hover{border-color:var(--gold);color:var(--gold)}
.tmpl-instr{margin:0 0 14px;padding:0 0 0 16px;color:var(--soft);font-size:13px;line-height:1.55}
.tmpl-instr li{margin:3px 0}
.tmpl-instr b{color:var(--on)}
.dropzone{border:1px dashed var(--line-2);border-radius:3px;background:var(--field);padding:22px 16px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:5px;align-items:center;transition:all .16s}
.dropzone:hover,.dropzone.drag{border-color:var(--gold);background:rgba(70,223,162,.06)}
.dz-ic{font-size:20px;color:var(--gold)}
.dz-t{font-size:14px}
.dz-t u{color:var(--gold);text-underline-offset:2px;cursor:pointer}
.dz-s{font-family:'Schibsted Grotesk';font-size:10px;color:var(--faint);letter-spacing:.03em}
.upchip{display:flex;align-items:center;gap:10px;margin-top:11px;border:1px solid rgba(86,165,120,.5);background:rgba(86,165,120,.1);border-radius:2px;padding:10px 12px}
.upchip[hidden]{display:none}

/* send-to-designer */
.desdiv{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--faint);font-family:'Schibsted Grotesk';font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.desdiv::before,.desdiv::after{content:"";flex:1;height:1px;background:var(--line)}
.desbtn{width:100%;background:none;border:1px dashed var(--line-2);color:var(--soft);font-weight:600;font-size:13px;padding:12px;border-radius:2px;cursor:pointer;transition:all .16s}
.desbtn:hover{border-color:var(--gold);color:var(--gold)}
.desbtn[hidden]{display:none}
.desform{display:flex;gap:8px;margin-top:11px}
.desform[hidden]{display:none}
.desform .fld{flex:1}
.desform .desend{flex:none;width:auto;padding:0 18px;white-space:nowrap}
.upchip .up-ic{width:18px;height:18px;border-radius:50%;background:var(--green);color:#06120b;display:grid;place-items:center;font-size:11px;flex:none;font-weight:700}
.upchip .up-name{flex:1;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upchip button{background:none;border:none;color:var(--faint);cursor:pointer;font-size:13px}
.upchip button:hover{color:var(--on)}

/* rail: skipped step */
.srk.skip{opacity:.3}
.srk.skip i{border-style:dashed}
.qchip{border:1px solid var(--line);border-radius:2px;padding:9px 13px;cursor:pointer;background:var(--field);font-family:'Schibsted Grotesk';font-size:12px;color:var(--soft);transition:all .16s}
.qchip:hover{border-color:var(--line-2)}
.qchip.on{border-color:var(--on);color:var(--on);background:rgba(238,241,234,.1)}

/* ---------- live estimate dock (panel bottom, sticky-ish) ---------- */
.estdock{flex:none;padding:15px 26px 18px;background:#0a120e;border-top:1px solid var(--line-2)}
.estcard{border:1px solid var(--gold-deep);border-radius:2px;background:linear-gradient(180deg,rgba(70,223,162,.08),rgba(70,223,162,.02));padding:15px 16px}
.estcard .etop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.estcard .etop .el{font-family:'Schibsted Grotesk';font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.estcard .etop .mk{font-family:'Schibsted Grotesk';font-size:8px;color:var(--faint);border:1px solid var(--line);padding:1px 6px;border-radius:2px}
.estcard .price{font-family:'Schibsted Grotesk';font-size:32px;line-height:1}
.estcard .price small{font-size:15px;color:var(--soft)}
.estcard .erow{display:flex;justify-content:space-between;font-size:12.5px;color:var(--soft);margin-top:9px;padding-top:9px;border-top:1px solid var(--line);white-space:nowrap}
.estcard .erow b{color:var(--on);font-weight:600;font-family:'Schibsted Grotesk';font-size:12px}
.cta{display:flex;gap:10px;margin-top:13px}
.btn{flex:1;background:var(--gold);color:#04140d;border:none;border-radius:2px;font-weight:700;font-size:14.5px;letter-spacing:.01em;padding:14px;cursor:pointer;transition:all .16s;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover{background:#5fe9b0;transform:translateY(-1px)}
.btn.ghost{flex:none;background:transparent;color:var(--soft);border:1px solid var(--line-2);font-weight:600}
.btn.ghost:hover{color:var(--on);border-color:var(--on);background:none}

/* ---------- stepped panel (BlueCotton-style) ---------- */
.steprail{flex:none;display:flex;align-items:center;padding:15px 26px;border-bottom:1px solid var(--line);background:#0c1611}
.srk{display:flex;align-items:center;gap:8px;flex:none;color:var(--faint);cursor:default}
.srk i{width:23px;height:23px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-family:'Schibsted Grotesk';font-size:10.5px;font-style:normal;background:var(--field);transition:all .2s}
.srk .srt{font-size:12.5px;font-weight:600;white-space:nowrap}
.srl{flex:1;height:1px;background:var(--line);margin:0 9px;min-width:8px}
.srk.reached{cursor:pointer}
.srk.done i{background:rgba(70,223,162,.16);border-color:var(--gold-deep);color:var(--gold)}
.srk.done{color:var(--soft)}
.srk.on{color:var(--on)}
.srk.on i{background:var(--gold);border-color:var(--gold);color:#04140d}
.srk:not(.on) .srt{display:none}

.pstep{display:none}
.pstep.show{display:block;animation:stepin .4s cubic-bezier(.2,.8,.2,1)}
@keyframes stepin{from{transform:translateX(16px)}to{transform:none}}
.pstep .ph{margin-bottom:20px}
.pstep .ph .eyebrow{display:inline-flex;margin-bottom:11px}
.pstep .ph h3{font-size:31px;line-height:1.02;font-weight:800}
.pstep .ph p{color:var(--soft);font-size:14px;margin:7px 0 0;max-width:40ch}

.navfoot{flex:none;display:flex;align-items:center;gap:14px;padding:13px 26px;border-top:1px solid var(--line-2);background:#0a120e;min-height:78px}
.navfoot .fest{display:flex;flex-direction:column;line-height:1.12}
.navfoot .fnote{font-size:12px;color:var(--soft);line-height:1.4;max-width:300px}
.navfoot .fnote b{color:var(--on);font-weight:600}
.navfoot .fest .fl{font-family:'Schibsted Grotesk';font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.navfoot .fest .fp{font-family:'Schibsted Grotesk';font-size:22px}
.navfoot .fest .fp small{font-size:12px;color:var(--soft)}
.navfoot .nbtns{margin-left:auto;display:flex;gap:6px;align-items:center}
.navfoot .btn{flex:none;padding:13px 26px}
.navback{background:none;border:none;color:var(--soft);font-weight:600;font-size:14px;cursor:pointer;padding:11px 12px;border-radius:2px}
.navback:hover{color:var(--on)}
.navback[hidden]{display:none}

/* ====================== CATALOG VIEW ====================== */
.catalog{grid-column:1 / -1;overflow-y:auto;padding:34px clamp(26px,5vw,70px) 70px}
.catalog .chead{max-width:680px;margin-bottom:26px}
.catalog .chead h2{font-size:clamp(30px,4vw,46px);line-height:1.04;margin-top:10px}
.catalog .chead p{color:var(--soft);font-size:16px;margin-top:10px;max-width:54ch}
.grid-cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pcard{background:var(--bg1);padding:0;cursor:pointer;display:flex;flex-direction:column;transition:background .2s;position:relative}
.pcard:hover{background:#10201a}
.pcard .pcimg{height:182px;position:relative;overflow:hidden;display:grid;place-items:center;border-bottom:1px solid var(--line);
  background:radial-gradient(70% 80% at 50% 36%, color-mix(in srgb,var(--c) 22%,transparent), transparent 60%)}
.pcard .vmini{position:relative;width:62px;height:104px;border-radius:7px 7px 8px 8px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(100deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 40%,rgba(0,0,0,.2));overflow:hidden}
.pcard .vmini::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:42px;height:14px;background:#1a221d;border-radius:3px 3px 2px 2px}
.pcard .vmini i{position:absolute;left:0;right:0;bottom:0;height:56%;background:var(--c);box-shadow:0 -2px 14px var(--c)}
.pcard .pcidx{position:absolute;top:12px;left:14px;font-family:'Schibsted Grotesk';font-size:10px;color:var(--faint);letter-spacing:.1em}
.pcard .pcb{padding:15px 16px 17px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard .pccat{font-family:'Schibsted Grotesk';font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--c2,var(--gold-deep))}
.pcard .pcname{font-family:'Schibsted Grotesk';font-size:21px;font-weight:500}
.pcard .pcspec{font-family:'Schibsted Grotesk';font-size:10.5px;color:var(--soft);letter-spacing:.02em}
.pcard .pcacts{font-size:12px;color:var(--soft);line-height:1.4;margin-top:2px}
.pcard .pcfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;padding-top:12px;border-top:1px solid var(--line);margin-top:13px}
.pcard .pcprice{font-family:'Schibsted Grotesk';font-size:19px}
.pcard .pcprice small{font-size:11px;color:var(--soft)}
.pcard .pcmeta{font-family:'Schibsted Grotesk';font-size:9px;color:var(--faint);text-align:right;letter-spacing:.04em}
.pcard .pcpick{margin-top:13px;border:1px solid var(--line-2);border-radius:2px;text-align:center;padding:9px;font-weight:600;font-size:13px;color:var(--on);transition:all .18s}
.pcard:hover .pcpick{background:var(--gold);color:#04140d;border-color:var(--gold)}

/* ====================== CONFIRM ====================== */
.confirm{grid-column:1 / -1;display:none;overflow-y:auto;padding:6vh clamp(26px,6vw,90px)}
.confirm.show{display:block}
.confirm .seal{width:58px;height:58px;border-radius:50%;border:1px solid var(--gold-deep);color:var(--gold);display:grid;place-items:center;font-size:26px;margin-bottom:20px}
.confirm h2{font-size:clamp(30px,4.4vw,52px);line-height:1.04;max-width:18ch}
.confirm h2 em{font-style:italic;color:var(--gold)}
.confirm .sub{color:var(--soft);font-size:17px;margin:14px 0 30px;max-width:48ch}
.recap{border:1px solid var(--line);max-width:620px}
.recap .rr{display:flex;gap:16px;padding:13px 18px;border-top:1px solid var(--line);font-size:14.5px;align-items:flex-start}
.recap .rv{display:block}
.recap .rr:first-child{border-top:none}
.recap .rk{min-width:128px;font-family:'Schibsted Grotesk';font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.recap .rv .pill2{display:inline-block;border:1px solid var(--line-2);border-radius:2px;padding:2px 9px;font-size:12px;margin:2px 4px 2px 0;color:var(--soft);white-space:nowrap}
.again{margin-top:26px;background:none;border:1px solid var(--line-2);color:var(--soft);border-radius:2px;padding:11px 20px;font-weight:600;cursor:pointer}
.again:hover{color:var(--on);border-color:var(--on)}

/* ---------- mobile ---------- */
.mtoggle{display:none}
@media(max-width:980px){
  body{overflow:auto}
  .app{height:auto;min-height:100%}
  .studio{grid-template-columns:1fr}
  .stage{height:42vh;min-height:300px;position:relative;z-index:5}
  .panel-side{border-left:none;border-top:1px solid var(--line);height:auto;overflow:visible;padding-bottom:40px}
  .estdock{margin:24px -22px 0;position:static}
  .stagewrap .kicker,.stagestats{display:none}
  .platform{transform:scale(.82)}
  .catalog,.confirm{height:auto}
}
@media(max-width:560px){
  .packs{grid-template-columns:repeat(3,1fr)}
  .goals{grid-template-columns:1fr}
  .topbar{padding:0 16px;gap:10px}
  .brand small{display:none}
  .panel-side{padding:22px 18px 60px}
}