/* Only the existing product stage changes. Copy, decor, waves and controls
   retain their source layout and stacking positions. */
.product-loop[data-renderer="webgl"] { pointer-events:auto; cursor:grab; }
.product-loop[data-renderer="webgl"].is-dragging { cursor:grabbing; }
.product-loop[data-renderer="webgl"] canvas { display:block; width:100%; height:100%; }
.product-loop[data-renderer="webgl"] > .product-slide { visibility:hidden; pointer-events:none!important; }
.product-carousel .bottle-load-status { position:absolute; left:0; top:100%; margin:0; width:100%; text-align:center; font:12px/1.4 var(--font-display); pointer-events:none; }
.product-carousel .bottle-load-status:empty { display:none; }
.desktop-layout .product-carousel .bottle-load-status { left:60%; width:30%; }
.bottle-preloader { position:absolute; transform:translate(-50%,-50%); width:180px; max-width:46%; display:grid; justify-items:center; gap:12px; color:var(--c-cream); text-align:center; font:500 13px/1.5 var(--font-display); z-index:2; }
.bottle-preloader[hidden],.bottle-preloader [hidden] { display:none; }
.bottle-preloader p { margin:0; }
.bottle-preloader progress { width:100%; height:5px; border:0; border-radius:8px; overflow:hidden; appearance:none; background:rgba(255,255,255,.24); color:var(--c-cream); }
.bottle-preloader progress::-webkit-progress-bar { background:rgba(255,255,255,.24); border-radius:8px; }
.bottle-preloader progress::-webkit-progress-value { background:var(--c-cream); border-radius:8px; }
.bottle-preloader progress::-moz-progress-bar { background:var(--c-cream); border-radius:8px; }
.bottle-preloader span { min-height:1.5em; font-variant-numeric:tabular-nums; }
/* 06.10: the carousel ignores pointers (responsive.css .product-carousel); the retry must take taps. */
.bottle-preloader button { font:inherit; color:inherit; border:1px solid currentColor; border-radius:30px; background:transparent; padding:8px 18px; cursor:pointer; pointer-events:auto; }
.bottle-preloader button:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.product-carousel[data-load-state]:not([data-load-state="ready"]) canvas { visibility:hidden; }
.product-carousel .flavour-control:disabled { opacity:.35; cursor:wait; }
/* Hero ready (01.10: no full-screen start-up screen). The page shows at once; until the fonts and hero
   pictures are decoded (bottles-3d-loader.js, at most 2.5 s) only the layers the hero entrance and text
   reveal animate wait, invisible. A 4 s fallback shows them even if no script runs; reduced motion never hides. */
@media (prefers-reduced-motion: no-preference) {
  body[data-startup-loading] .scene-hero :is(h1, .content-layer.type-body, .ui-cta, .ui-sticker),
  body[data-startup-loading] .scene-hero .art-layer:has(img[src*="hero-water"], img[src*="hero-mini"], img[src*="482afb79ee3c275feb"], img[src*="df802705f4157c1a13"], img[src*="4904bdc91fafed9b30"], img[src*="desktop-imgVector2.svg"], img[src*="mobile-imgVector1.svg"], img[src*="desktop-imgVector6.svg"], .hero-smile-art) {
    visibility: hidden;
    animation: easy-hero-hold 0s 4s forwards;
  }
}
@keyframes easy-hero-hold { to { visibility: visible; } }
/* Header entrance (02.10, hero-entrance.js): the wordmark, the desktop pills and the burger wait too, with
   opacity so the links stay focusable and clickable; a keyboard-focused control shows at once. Same 4 s fallback. */
@media (prefers-reduced-motion: no-preference) {
  body[data-startup-loading] .scene-hero :is(a.ui-nav, [data-figma-node="128:3893"], [data-figma-node="128:3385"], [data-figma-node="128:3418"], [data-figma-node="128:3419"], [data-figma-node="128:3420"], .tablet-menu > summary) {
    opacity: 0;
    animation: easy-menu-hold 0s 4s forwards;
  }
  body[data-startup-loading] .scene-hero :is(a.ui-nav, .tablet-menu > summary):focus-visible { opacity: 1; animation: none; }
  /* an opened tablet menu shows its close control at once */
  body[data-startup-loading] .scene-hero .tablet-menu[open] > summary { opacity: 1; animation: none; }
  /* Separate rule: without :has() support only this one is dropped. */
  body[data-startup-loading] .scene-hero:has(.mobile-menu > summary:focus-visible) :is([data-figma-node="128:3418"], [data-figma-node="128:3419"], [data-figma-node="128:3420"]) { opacity: 1; animation: none; }
}
@keyframes easy-menu-hold { to { opacity: 1; } }
/* The burger bars draw from the right. */
.scene-hero :is([data-figma-node="128:3418"], [data-figma-node="128:3419"], [data-figma-node="128:3420"]) { transform-origin: 100% 50%; }