/* Version 02: real WebGL objects + restrained dimensional product staging. */
.cosmos{isolation:isolate;perspective:1250px}
#orbit-canvas{position:absolute;inset:-6% -6% 0;width:112%;height:106%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .7s ease;contain:strict}
.cosmos[data-scene-ready="true"] #orbit-canvas{opacity:1}
.cosmos[data-scene-ready="true"] .planet,
.cosmos[data-scene-ready="true"] .orbit,
.cosmos[data-scene-ready="true"] .glass-bubble{opacity:0;transition:opacity .7s ease}
.scene{transform:rotateY(calc(var(--ry,0deg) + var(--orbit-angle,0deg))) rotateX(var(--rx,0deg));transform-style:preserve-3d}
.hero-bottle{transform-style:preserve-3d;filter:drop-shadow(16px 21px 13px #030f1a75)}
.bottle-left{--depth:35px;--turn:-16deg;left:21%;top:8%}
.bottle-right{--depth:105px;--turn:15deg;left:51%;top:20%}
.float{animation-name:float-depth;animation-duration:9s}
.floating-label{transform:translateZ(140px) rotate(-3deg);border-color:#dce9c64d;box-shadow:0 12px 30px #0002,inset 0 1px #fff3}
.star-one{transform:translateZ(50px)}
.star-two{transform:translateZ(-30px)}
.orbit-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:10;display:flex;align-items:center;gap:8px;padding:6px;border:1px solid #d3e3cb40;border-radius:100px;background:#bdcfbf12;box-shadow:inset 0 1px #e7efde18,0 5px 20px #081f281c;backdrop-filter:blur(12px)}
.orbit-controls button{display:grid;place-items:center;color:#e9f0db;background:transparent;width:36px;height:36px;padding:0;border-radius:50%;font-size:18px;border:1px solid transparent}
.orbit-controls button:hover{background:#d4e4c523;border-color:#e8f3d42b}
.orbit-controls button:active{background:#d4e4c540}
.orbit-controls [data-orbit-reset]{font-size:9px;letter-spacing:1.4px;width:90px}
.motion{bottom:-26px;right:50%;transform:translateX(50%);border:0;background:transparent;font-size:9px;white-space:nowrap;opacity:.85}
.hero .cosmos{padding-bottom:25px}
.hero-bottom{bottom:18px}
.hero-haze:after{content:"";position:absolute;left:60%;top:8%;height:90%;width:45%;background:radial-gradient(ellipse at 50% 45%,#b6cba01c,transparent 65%);opacity:.7;filter:blur(8px);pointer-events:none}
.flavor-art{perspective:900px}
.flavor-halo{transform:rotateX(20deg) rotateY(-32deg) rotateZ(-18deg);border:2px solid #faffed9c;background:linear-gradient(135deg,#fefff91f,transparent 50%,#fafff333);box-shadow:inset 0 2px 4px #fff,0 0 0 3px #829a714d,0 3px 0 5px #eef4e492,16px 24px 32px #4c65442b;transition:transform .8s ease,background .8s ease}
.flavor-halo:before{inset:10px -35px;border:2px solid #6e897145;box-shadow:0 2px 1px #fff9;transform:rotateX(66deg) rotateZ(-20deg)}
.flavor-panel[data-flavor=rose] .flavor-halo,.flavor-panel[data-flavor=fizzrose] .flavor-halo{transform:rotateX(-16deg) rotateY(32deg) rotateZ(18deg)}
.product-bottle{transform:translateZ(60px) rotateZ(8deg);filter:drop-shadow(18px 22px 10px #243e2b38)}
.crate-stage{transform:perspective(1400px) rotateX(4deg) rotateY(-5deg);transform-origin:center center;box-shadow:inset 0 2px #ffffffe0,inset 2px 0 #ffffff80,3px 5px 0 #b6c4a8,6px 10px 0 #a8b799,10px 20px 32px #273d2828;transition:transform .6s ease,box-shadow .6s ease}
.crate-stage:hover{transform:perspective(1400px) rotateX(1deg) rotateY(-2deg)}
.crate-item .bottle{filter:drop-shadow(8px 11px 4px #213c2930)}
.crate-label{padding-top:3px}
.reward-disc{border:2px solid #e6ecd8bc;box-shadow:inset 6px 1px 12px #e9efdb90,2px 2px 0 #aec3a5,4px 4px 0 #819c85,6px 6px 0 #b4c6a7,8px 8px 0 #729286,18px 30px 42px #030b154d;animation:medallion 12s ease-in-out infinite;transform-style:preserve-3d}
.paused .reward-disc{animation-play-state:paused}
@keyframes float-depth{0%,100%{transform:translate3d(0,-8px,var(--depth)) rotateZ(var(--turn))}50%{transform:translate3d(3px,8px,calc(var(--depth) + 10px)) rotateZ(calc(var(--turn) + 2deg))}}
@keyframes medallion{0%,100%{transform:rotateY(-24deg) rotateZ(16deg) translateY(0)}50%{transform:rotateY(12deg) rotateZ(8deg) translateY(-9px)}}
@media(max-width:1100px){.orbit-controls{bottom:3px}.motion{bottom:-37px}.hero .cosmos{margin-bottom:25px}.floating-label{left:-1%;bottom:15%}.bottle-right{--depth:70px}.bottle-left{--depth:20px}}
@media(max-width:760px){#orbit-canvas{inset:0 -6% 0;width:112%;height:100%}.cosmos{perspective:1200px}.hero .cosmos{height:500px;padding-bottom:55px;margin-top:5px;margin-bottom:0}.bottle-left{left:20%;top:1%;--depth:20px;--turn:-13deg}.bottle-right{left:49%;top:9%;--depth:55px;--turn:14deg}.orbit-controls{bottom:27px;gap:5px;white-space:nowrap}.orbit-controls button{min-width:38px;height:38px}.orbit-controls [data-orbit-reset]{width:110px;font-size:9px}.motion{bottom:-7px;font-size:8px}.floating-label{bottom:24%;left:0;transform:translateZ(45px) rotate(-3deg)}.hero-bottom{bottom:23px}.crate-stage,.crate-stage:hover{transform:none;box-shadow:inset 0 1px #ffffffe0,inset 1px 0 #ffffff80,0 3px 0 #b6c4a8,0 10px 25px #273d2817}.product-bottle{transform:translateZ(20px) rotateZ(7deg)}.flavor-halo{width:220px;height:240px}.reward-disc{animation:none}}
@media(max-width:360px){.hero .cosmos{height:455px}.orbit-controls{bottom:20px}.floating-label{bottom:25%}.motion{bottom:-15px}}
@media(prefers-reduced-motion:reduce){#orbit-canvas{transition:none}.scene{transform:rotateY(var(--orbit-angle,0deg))!important}.float{transform:translateZ(var(--depth)) rotateZ(var(--turn))}.reward-disc{animation:none}.crate-stage,.crate-stage:hover{transform:none}}
.paused .scene{transform:rotateY(var(--orbit-angle,0deg))}
/* Keep controls outside the label area and leave breathing room under bottles. */
@media(min-width:761px){.hero-bottle{width:clamp(110px,9.7vw,150px)}.bottle-left{top:5%}.bottle-right{top:14%}.orbit-controls{left:0;transform:none;bottom:13px;background:rgba(14,36,42,.88);backdrop-filter:blur(10px)}.motion{right:0;left:auto;transform:none;bottom:22px;padding:7px 10px;background:rgba(14,36,42,.85);border:1px solid #c8ddbd26;opacity:1}.floating-label{bottom:23%;left:-4%;transform:translateZ(80px) rotate(-3deg)}}
@media(min-width:761px) and (max-width:1100px){.hero-bottle{width:105px}.bottle-right{top:12%}.orbit-controls{bottom:0}.motion{bottom:-31px;left:0;right:auto}.floating-label{bottom:25%;left:-5%}}
@media(max-width:760px){.orbit-controls{background:rgba(14,36,42,.85)}}
.hero-promises{display:flex;align-items:center;gap:20px;margin-top:24px;color:#e3edce}
.bio-wordmark{display:flex;flex-direction:column;gap:3px;font-size:24px;line-height:1;font-weight:700;letter-spacing:1px;border-right:1px solid #c6d5b63b;padding-right:20px}
.bio-wordmark>span{font-size:7px;font-weight:500;letter-spacing:1.3px;white-space:nowrap}
.dispatch-promise{display:flex;align-items:center;gap:10px}
.dispatch-promise svg{width:26px;height:30px;fill:none;stroke:#c6d6a6;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dispatch-promise b,.dispatch-promise small{display:block}
.dispatch-promise b{font-size:12px;font-weight:500}
.dispatch-promise small{margin-top:4px;font-size:9px;color:#c6d0bf;line-height:1.5}
.package-dispatch{font-size:11px;line-height:1.6;color:#4b624b;margin-top:14px}
@media(max-width:760px){.hero-promises{gap:14px;margin-top:23px}.bio-wordmark{padding-right:14px;font-size:22px}.dispatch-promise{gap:8px}.dispatch-promise b{font-size:11px}.dispatch-promise small{font-size:9px;max-width:190px}.dispatch-promise svg{width:23px}}
@media(max-width:760px){.hero-bottle{width:90px}.bottle-right{top:7%}.motion{z-index:11;background:#10262d;color:#d9e8ce;border:1px solid #d3e3cb40;opacity:1}}
@media(max-width:360px){.hero-bottle{width:81px}}

/* Use the approved complete bottle photos, without a separate label layer.
   The square source remains unmodified; only its transparent side margins are
   outside the display frame. Automatic width preserves the source proportions. */
.bottle.schorle{aspect-ratio:332 / 1254}
.bottle.schorle .bottle-photo{width:auto;height:100%;left:50%;top:0;transform:translateX(-50%)}
