/* Independent natural-scroll layout; desktop selectors and choreography are unchanged. */
html.mobile-experience {scroll-padding-top:24px; overflow-x:clip}
html.mobile-experience body {overflow-x:clip}
html.mobile-experience .header {position:absolute; padding:24px 6% 0; padding-top:max(24px, env(safe-area-inset-top)); display:grid; grid-template-columns:1fr auto; gap:10px 16px}
html.mobile-experience .brand {position:static;grid-area:1/1}
html.mobile-experience .brand img {width:clamp(156px,43vw,225px)}
html.mobile-experience .header .header-order {grid-area:1/2; width:auto; min-height:44px; padding:10px 13px; font-size:13px; letter-spacing:.04em; border-width:1px}
html.mobile-experience .header .nav-left {display:flex;grid-area:2/1/3/3;justify-content:center;gap:28px;padding:0;font-family:var(--body);font-size:10px;letter-spacing:.13em}
html.mobile-experience .nav-left a {display:flex;align-items:center;min-height:44px}
html.mobile-experience .story, html.mobile-experience .stage {height:auto; min-height:0; position:relative; overflow:visible}
html.mobile-experience .story-meter {display:none}
html.mobile-experience .scene {display:flex;flex-direction:column;justify-content:center;position:relative;isolation:isolate;inset:auto;opacity:1;visibility:visible;pointer-events:auto;min-height:clamp(560px,82svh,840px);padding:72px 7%;background:var(--green);overflow:hidden;will-change:auto}
html.mobile-experience .scene::after {content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#041e19 0%,#021a1599 24%,#021a1573 65%,#041e19 100%),radial-gradient(ellipse at center,transparent 25%,#00100c99 100%)}
html.mobile-experience .mobile-scene-image {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.7}
html.mobile-experience .scene-copy, html.mobile-experience .scene-right .scene-copy, html.mobile-experience .scene-serve .scene-copy {position:relative;inset:auto;width:100%;max-width:520px;margin:0 auto;transform:none;will-change:auto}
html.mobile-experience .scene h2, html.mobile-experience .scene-right[data-scene] h2, html.mobile-experience .editorial h2, html.mobile-experience .closing h2 {font-size:clamp(32px,8.7vw,48px);line-height:1.14;text-wrap:balance}
html.mobile-experience .eyebrow {font-size:10px;letter-spacing:.18em;line-height:1.7;margin-bottom:20px}
html.mobile-experience .scene-icon {width:96px;margin:0 auto 24px}
html.mobile-experience .text-link {min-height:44px;font-size:13px;padding:10px 0;margin-top:24px;gap:16px}
html.mobile-experience .scene-hero {min-height:100svh;gap:22px;padding:146px 6% 28px;justify-content:flex-start}
html.mobile-experience .scene-hero::after {background:linear-gradient(180deg,#02171166,transparent 40%,#041e19 100%),radial-gradient(ellipse at center,transparent,#01110c77)}
html.mobile-experience .scene-hero .mobile-scene-image {object-position:40% center;opacity:1}
html.mobile-experience .scene-hero h1 {font-size:clamp(34px,9.2vw,50px);line-height:1.05}
html.mobile-experience .bottle {display:block;position:relative;inset:auto;height:clamp(290px,48svh,510px);width:auto;max-width:85%;aspect-ratio:872/1804;transform:none;margin:0 auto;flex-shrink:0;will-change:auto;filter:drop-shadow(0 14px 22px #0004)}
html.mobile-experience .scroll-cue {display:flex;position:relative;inset:auto;writing-mode:horizontal-tb;font-size:10px;letter-spacing:.15em;margin:0 auto;gap:14px;min-height:44px}
html.mobile-experience .scroll-line {height:28px}
html.mobile-experience .scene-serve {min-height:0;padding:70px 7% 24px;gap:28px}
html.mobile-experience .mobile-serving {position:relative;width:min(100%,440px);height:420px;margin:0 auto}
html.mobile-experience .mobile-serving-bottle {position:absolute;height:370px;width:auto;bottom:25px;left:5%;transform:rotate(-9deg)}
html.mobile-experience .serving-glass {display:block;position:absolute;inset:auto -14% 0 auto;height:330px;width:330px;max-width:none;object-fit:contain;z-index:3}
html.mobile-experience .editorial {position:relative;inset:auto;display:flex;flex-direction:column;min-height:0;gap:32px;padding:44px 7% 68px;background:none;visibility:visible}
html.mobile-experience .editorial .editorial-image {position:relative;inset:auto;width:100%;max-width:500px;height:auto;max-height:none;aspect-ratio:3/4;order:0;transform:none}
html.mobile-experience .editorial .editorial-copy {position:relative;inset:auto;width:100%;max-width:520px;padding:0;order:1;transform:none}
html.mobile-experience .closing {position:relative;inset:auto;display:flex;flex-direction:column;min-height:0;padding:65px 7% 76px;gap:34px;visibility:visible;background:radial-gradient(ellipse at center,#10372a,var(--green) 70%)}
html.mobile-experience .closing :is(.closing-copy,.closing-action) {position:relative;inset:auto;width:100%;max-width:520px;transform:none}
html.mobile-experience .closing-bottle {display:block;position:relative;inset:auto;height:clamp(360px,60svh,530px);width:auto;max-width:90%;transform:none}
html.mobile-experience .closing-action .eyebrow {display:block;max-width:none;margin-bottom:18px;font-size:10px}
html.mobile-experience .closing-action .button {min-height:54px;font-size:22px;max-width:100%;padding:15px 24px;gap:20px}
html.mobile-experience .site-footer {position:relative;inset:auto;display:block;visibility:visible;transform:none;background:var(--deep)}
html.mobile-experience .stockists {padding:60px 7% 48px}
html.mobile-experience .stockists-logo img {width:225px}
html.mobile-experience .stockists p {font-size:14px;max-width:320px;margin:auto}
html.mobile-experience .stockist-links {flex-direction:column;align-items:center;gap:0}
html.mobile-experience .stockist-links .text-link {margin-top:16px}
html.mobile-experience .footer-bar {display:flex;flex-direction:column;padding:32px 7% max(28px, env(safe-area-inset-bottom));gap:16px;text-align:center}
html.mobile-experience .footer-bar .farmacia-logo {width:220px;margin:auto}
html.mobile-experience .back-top {display:flex;min-height:44px;align-items:center}
html.mobile-experience dialog {padding:60px 24px 28px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overscroll-behavior:contain}
html.mobile-experience dialog h2 {font-size:34px}
html.mobile-experience dialog p {font-size:15px}
html.mobile-experience .age-gate {overflow-y:auto;overscroll-behavior:contain;padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom))}
html.mobile-experience .age-gate-box {margin:auto}
html.mobile-experience .age-gate .button {min-height:48px}
@media(max-width:360px) {
 html.mobile-experience .header {padding-inline:5%;gap:6px 10px}
 html.mobile-experience .header .header-order {font-size:12px;padding-inline:10px}
 html.mobile-experience .scene-hero {padding-top:132px;gap:18px}
 html.mobile-experience .mobile-serving {height:360px}
 html.mobile-experience .mobile-serving-bottle {height:315px}
 html.mobile-experience .serving-glass {height:280px;width:280px}
}
@media(orientation:landscape) and (max-height:600px) {
 html.mobile-experience .scene-hero {padding-top:140px}
 html.mobile-experience .age-gate-logo {margin-bottom:20px}
 html.mobile-experience .age-gate-note {margin-top:20px}
}

/* Four chapters, one native touch slider. No autoplay or vertical scroll capture. */
html.mobile-experience .mobile-chapters {position:relative;min-width:0}
html.mobile-experience .chapter-track {display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
html.mobile-experience .chapter-track::-webkit-scrollbar {display:none}
html.mobile-experience .chapter-track:focus-visible {outline:1px solid var(--gold);outline-offset:-4px}
html.mobile-experience .chapter-track .scene {flex:0 0 100%;min-width:0;min-height:clamp(520px,75svh,760px);padding:64px 7% 38px;scroll-snap-align:start;scroll-snap-stop:always}
html.mobile-experience .chapter-track .scene-copy {opacity:1!important}
html.mobile-experience .chapter-controls {display:flex;align-items:center;justify-content:center;gap:12px;padding:0 5% 32px;background:var(--green)}
html.mobile-experience .chapter-controls button {display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #e3bd4366;background:transparent;color:var(--gold);font-size:22px}
html.mobile-experience .chapter-controls button:disabled {opacity:.25;cursor:default}
html.mobile-experience .chapter-dots {display:flex;gap:0}
html.mobile-experience .chapter-dots button {width:32px;border:0}
html.mobile-experience .chapter-dots button::after {content:'';width:5px;height:5px;border-radius:50%;background:#bcc8c055;transition:background .2s,transform .2s}
html.mobile-experience .chapter-dots button[aria-current=true]::after {background:var(--gold);transform:scale(1.5)}
html.mobile-experience .chapter-count {font-size:12px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
html.mobile-experience .mobile-rotating-bottle {aspect-ratio:872/1804;flex-shrink:0;transform-origin:50% 75%}
html.mobile-experience .mobile-rotating-bottle :is(img,canvas) {position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
html.mobile-experience .mobile-rotating-bottle canvas {opacity:0}
html.mobile-experience .mobile-rotating-bottle.is-ready canvas {opacity:1}
html.mobile-experience .mobile-rotating-bottle.is-ready img {opacity:0}
html.mobile-experience .mobile-closing-stage {position:relative;width:100%;height:clamp(360px,60svh,530px)}
html.mobile-experience .mobile-closing-stage .closing-bottle {height:100%;margin:0 auto}
@media(prefers-reduced-motion:reduce) {
 html.mobile-experience .mobile-rotating-bottle,html.mobile-experience .serving-glass {transform:none!important}
}