:root{ --bg:#EF3647; --mustard:#FFD43C; --display:"Lilita One","Arial Black",sans-serif; --body:"Poppins",Arial,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ui:#000; } }
:root[data-theme="dark"]{ --ui:#000; }
*,*::before,*::after{ box-sizing:inherit; }
html,body{ height:100%; }
body{ margin:0; font-family:var(--body); background:var(--bg); color:#fff; transition:background .5s; overflow:hidden; -webkit-font-smoothing:antialiased; }
:focus-visible{ outline:3px solid var(--mustard); outline-offset:3px; }
.ui-top{ position:fixed; top:calc(env(safe-area-inset-top,0px) + 16px); left:16px; right:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; z-index:5; flex-wrap:wrap; }
.ui-top svg{ width:140px; height:auto; display:block; }
.seg{ display:inline-flex; flex-wrap:wrap; justify-content:center; background:#000; border-radius:24px; padding:4px; gap:2px; }
.seg button{ font:600 14px var(--body); color:#fff; background:transparent; border:0; border-radius:999px; padding:9px 15px; cursor:pointer; }
.seg button[aria-pressed="true"]{ background:#fff; color:#000; }
.seg.act button{ background:var(--mustard); color:#000; margin:0 2px; }
.seg.act button[aria-pressed="true"]{ background:#fff; }
.stage{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; gap:clamp(40px,10vw,180px); perspective:1700px; cursor:grab; touch-action:none; }
.stage.dragging{ cursor:grabbing; }
.scene{ --s:1; width:300px; height:360px; transform:scale(var(--s)); position:relative; flex:none; }
.scene.hide{ display:none; }
.box3d,.body,.lid,.sachet{ transform-style:preserve-3d; }
.box3d{ position:relative; width:300px; height:360px; transform:rotateX(var(--rx)) rotateY(var(--ry)); }
.scene[data-sku="energy"] .box3d{ --c:#EF3647!important; --cd:#B8202F!important; }
.scene[data-sku="hydra"] .box3d{ --c:#419A6A!important; --cd:#2A6F4B!important; }
.scene .f-front .face-svg rect:nth-of-type(2),
.scene .f-top .face-svg rect:nth-of-type(2){ fill:var(--c)!important; }
.scene[data-sku="hydra"] .face-svg [fill="#3F9A6A"]{ fill:#419A6A!important; }
.scene[data-sku="hydra"] .back{ background:#419A6A!important; }
.body,.lid{ position:absolute; inset:0; }
.lid{ transform-origin:150px 86px -60px; transform:rotateX(var(--open,0deg)); transition:transform .9s cubic-bezier(.3,1.25,.4,1); }
.f{ position:absolute; top:0; left:0; width:300px; height:360px; backface-visibility:hidden; overflow:hidden; }
.f .face-svg{ display:block; width:100%; height:100%; }
.f-front{ transform:translateZ(60px); }
.f-back{ transform:rotateY(180deg) translateZ(60px); }
.f-right{ width:120px; left:90px; transform:rotateY(90deg) translateZ(150px); }
.f-left{ width:120px; left:90px; transform:rotateY(-90deg) translateZ(150px); }
.f-top{ height:120px; top:120px; transform:rotateX(90deg) translateZ(180px); }
.f-bottom{ height:120px; top:120px; transform:rotateX(-90deg) translateZ(180px); }
.clip-b-front{ clip-path:polygon(0 146px,100% 146px,100% 100%,0 100%); }
.clip-l-front{ clip-path:polygon(0 0,100% 0,100% 146px,0 146px); }
.clip-b-right{ clip-path:polygon(0 146px,100% 86px,100% 100%,0 100%); }
.clip-l-right{ clip-path:polygon(0 0,100% 0,100% 86px,0 146px); }
.clip-b-left{ clip-path:polygon(0 86px,100% 146px,100% 100%,0 100%); }
.clip-l-left{ clip-path:polygon(0 0,100% 0,100% 146px,0 86px); }
.clip-b-back{ clip-path:polygon(0 86px,100% 86px,100% 100%,0 100%); }
.clip-l-back{ clip-path:polygon(0 0,100% 0,100% 86px,0 86px); }
.shade{ position:absolute; inset:0; background:#000; opacity:var(--sh,.14); pointer-events:none; }
/* lid inside */
.li{ position:absolute; background:var(--cd); }
.li-front{ left:0; top:0; width:300px; height:146px; transform:translateZ(58.5px); }
.li-back{ left:0; top:0; width:300px; height:86px; transform:translateZ(-58.5px); }
.li-top{ left:0; top:-57px; width:300px; height:117px; transform:translateY(1.5px) rotateX(90deg); filter:brightness(.85); }
.li-right{ left:91.5px; top:0; width:117px; height:146px; clip-path:polygon(0 0,100% 0,100% 86px,0 146px); transform:rotateY(90deg) translateZ(148.5px); filter:brightness(.9); }
.li-left{ left:91.5px; top:0; width:117px; height:146px; clip-path:polygon(0 0,100% 0,100% 146px,0 86px); transform:rotateY(-90deg) translateZ(148.5px); filter:brightness(.9); }
/* white inner collar */
.col{ position:absolute; background:#F4F3EF; }
.c-front{ left:6px; top:100px; width:288px; height:140px; transform:translateZ(57px); }
.c-back{ left:6px; top:40px; width:288px; height:200px; transform:translateZ(-57px); background:#E9E8E3; }
.c-right{ left:93px; top:0; width:114px; height:240px; clip-path:polygon(0 100px,100% 40px,100% 100%,0 100%); transform:rotateY(90deg) translateZ(144px); background:#DEDCD6; }
.c-left{ left:93px; top:0; width:114px; height:240px; clip-path:polygon(0 40px,100% 100px,100% 100%,0 100%); transform:rotateY(-90deg) translateZ(144px); background:#DEDCD6; }
.stacktop{ position:absolute; left:40px; width:220px; height:94px; top:63px; transform:translateZ(-3px) rotateX(90deg);
  background:repeating-linear-gradient(to bottom,var(--c) 0 2.2px,var(--cd) 2.2px 3.2px); }
/* sachets: real print art, 40 x 45 mm */
.sachet{ position:absolute; left:40px; top:110px; width:220px; height:248px; }
.sachet img{ position:absolute; inset:0; width:100%; height:100%; display:block; backface-visibility:hidden; }
.s2{ transform:translateZ(40px); }
.s1{ transform:translateZ(45px); transition:transform 1s cubic-bezier(.3,1.1,.4,1); }
.s1 .sb{ transform:rotateY(180deg); }
.s1 .sf{ transform:translateZ(.6px); } .s1 .sb{ transform:rotateY(180deg) translateZ(.6px); }
.strip{ position:absolute; left:32px; top:24px; width:156px; height:196px; border-radius:6px; background:rgba(255,255,255,.92); box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12); transition:transform .9s cubic-bezier(.3,1.1,.4,1); }
.box3d.out .s1{ transform:translate3d(0,-300px,170px) rotateX(10deg); }
.box3d.out.flip .s1{ transform:translate3d(0,-300px,170px) rotateX(10deg) rotateY(180deg); }
.box3d.peel .strip{ transform:translateY(-150px); }
.floor{ position:absolute; left:-10%; right:-10%; bottom:-70px; height:50px; background:radial-gradient(closest-side,rgba(0,0,0,.4),transparent); filter:blur(6px); }
.ui-bottom{ position:fixed; left:0; right:0; bottom:calc(env(safe-area-inset-bottom,0px) + 16px); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:5; padding:0 12px; }
.hint{ font-weight:600; font-size:13px; text-align:center; }
.name{ position:fixed; left:clamp(16px,4vw,48px); font-family:var(--display); font-size:clamp(40px,7vw,96px); line-height:.9; pointer-events:none; }
.name small{ display:block; font-size:.32em; color:var(--mustard); margin-top:10px; }
@media (min-width:701px){ .stage:not(.both){ padding-left:30vw; } .name{ top:50%; transform:translateY(-50%); } }
@media (max-width:700px){ .scene{ --s:.62 } .stage{ flex-direction:column; gap:0; padding-bottom:120px; } .name{ top:84px; font-size:36px; } .seg button{ padding:8px 11px; font-size:13px; } }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition:none !important; } }
.back{width:100%;height:100%;position:relative;}
.back .seam{position:absolute;left:0;right:0;top:86px;height:2px;background:rgba(0,0,0,.28);}
.back .label{position:absolute;left:20px;right:20px;top:100px;bottom:16px;background:#F4F3EF;color:#111;font:400 6.4px/1.42 Poppins,Arial,sans-serif;padding:11px 12px 10px;display:flex;flex-direction:column;gap:5px;text-align:justify;}
.back .label b{font-weight:700;}
.back .label .row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;}
.back .fssai{font:italic 600 15px Georgia,serif;letter-spacing:-.02em;}
.back .tbc{background:#FFD43C;padding:0 2px;}
.ui-top svg,.name{display:none!important} body.embedded-viewer{background:transparent!important} .stage{padding-left:0!important} .ui-top{justify-content:center} body.solo .ui-top{display:none} button[data-view="back"],#bPeel{display:none!important} .hint{color:#111}
@media (max-width:700px){.scene{--s:.7}.stage{padding-bottom:110px}}
@media (min-width:701px){.scene{--s:.92}.stage{padding-bottom:110px}}

/* Embedded product-page viewer: let the spinning box use the full space above its controls. */
body.solo{height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column}
body.solo .ui-top{display:none}
body.solo .stage{position:relative;inset:auto;width:100%;height:auto;min-height:0;flex:1 1 auto;padding:0;gap:12px;touch-action:pan-y}
body.solo .ui-bottom{position:relative;inset:auto;width:100%;flex:0 0 auto;padding:8px 10px calc(14px + env(safe-area-inset-bottom,0px));gap:8px}
body.solo .seg{max-width:100%;border-radius:18px}
body.solo .seg button{padding:8px 11px;font-size:12px}
body.solo .hint{font-size:12px}
@media (max-width:700px){
  body.solo .stage{padding:0}
  body.solo .ui-bottom{padding:4px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  body.solo .seg{width:100%;gap:3px;padding:4px}
  body.solo .seg button{flex:1 1 auto;padding:8px 6px;font-size:11px}
}
body.card{height:100%;overflow:hidden}
body.card.embedded-viewer{background:#0B0C0B!important}
body.card .ui-top,body.card .ui-bottom,body.card .name{display:none!important}
body.card .stage{position:relative;inset:auto;width:100%;height:100%;padding:0;gap:0;touch-action:pan-y}
body.card .scene{--s:.76}
@media (max-width:700px){body.card .scene{--s:.7}}
.stage.both{display:block}
.stage.both .scene{position:absolute;margin:0;transform-origin:top left}
@media (prefers-reduced-motion:reduce){body.solo .stage{scroll-behavior:auto}}