/* A complete product scene: a brand story, one hero bottle, one order. */
.milk-shop{--milk-accent:#ffe17b;--milk-ink:#191916;--milk-paper:#fffaf0}
.milk-shop:has([value="lactose"]:checked){--milk-accent:#dfc9ef}
.milk-shop:has([value="cocoa"]:checked){--milk-accent:#e6c7ac}
.shop-copy>.eyebrow{top:25%;left:6%;width:26%;color:#64635c}
.shop-copy>h2{top:29%;left:6%;width:29%;font-size:clamp(72px,7.3vw,124px);line-height:.91;margin:0;letter-spacing:-.055em}
.shop-copy>h2 em{color:#eabf27}
.shop-intro{left:6%;top:57%;width:27%;font-size:16px;line-height:1.6;color:#55534b}
.shop-seal{position:absolute;left:6%;top:72%;display:flex;align-items:center;gap:24px;padding:12px 17px;margin:0;border:1px solid #24241e;border-radius:50%;transform:rotate(-8deg);font:500 12px/1.35 Manrope,sans-serif;letter-spacing:.04em;color:#23231e;background:#ffe17b}
.shop-seal span{font-size:28px;line-height:1}
.shop-active .product-image{height:68svh;width:34%;max-width:470px;top:47%;filter:drop-shadow(8px 15px 10px #66573c1b)}
.product-caption{bottom:13%;font-size:12px;letter-spacing:.045em;color:#7b7668;max-width:28%;white-space:normal;line-height:1.6;text-align:center}
.product-config{position:absolute;inset:19% 5% auto auto;width:29%;max-width:460px;gap:24px;display:flex;flex-direction:column;color:var(--milk-ink);font-family:Manrope,Arial,sans-serif}
.config-kicker{font-size:12px;line-height:1.5;letter-spacing:.065em;margin:0 0 12px;color:#78746b}
.product-config .product-name{font-family:Manrope,Arial,sans-serif;font-size:clamp(28px,2.5vw,40px);line-height:1.1;letter-spacing:-.05em;margin:0 0 14px;font-weight:500}
.product-config .product-description{font-size:16px;line-height:1.5;color:#656056;margin:0;white-space:normal;max-width:35ch}
.product-config fieldset{margin:0;padding:0;border:0;min-width:0}
.product-config legend{width:100%;display:flex;align-items:center;gap:10px;font:500 12px/1.5 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#69645a;padding:0;margin:0 0 12px;float:none;position:static}
.product-config legend>span{color:#aaa394;font-weight:400;font-variant-numeric:tabular-nums}
.product-config .config-flavors{display:flex;gap:7px}
.config-flavors label{flex:1;min-width:0}
.config-flavors label span{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:12px 6px;min-height:83px;line-height:1.2;text-align:center;font-size:16px;color:#777166;border:1px solid #d9d3c6;border-radius:12px;background:transparent;white-space:normal;transition:background .18s,border-color .18s,color .18s}
.config-flavors label span:before{display:none}
.config-flavors input:checked+span{background:var(--milk-accent);border-color:#191916;color:#191916;font-weight:500}
.milk-type-icon{width:20px;height:23px}
.config-flavors label:hover span{border-color:#191916;color:#191916}
.product-config .config-volumes{display:flex;gap:8px;margin:0;padding:0;background:none;position:static}
.config-volumes span{padding:0;min-height:85px;gap:6px;color:#a09a8d;border:0;border-radius:0;background:none;box-shadow:none}
.volume-icon-space{height:55px}
.volume-bottle{width:25px;height:48px;stroke-width:1.25}
.config-volumes label:first-of-type .volume-bottle{width:20px;height:39px}
.config-volumes label:last-of-type .volume-bottle{width:29px;height:55px}
.config-volumes span b{font-size:12px;line-height:1.5;letter-spacing:.025em;font-weight:400}
.config-volumes input:checked+span{background:none;color:#191916;box-shadow:none}
.config-volumes input:checked+span .volume-bottle{fill:#191916;stroke:#191916}
.config-volumes input:checked+span b{font-weight:600}
.config-purchase{border-top:1px solid #d9d3c6;padding-top:17px;display:flex;flex-direction:column;gap:14px}
.purchase-row{position:static;inset:auto;translate:none;width:100%;margin:0;padding:0;justify-content:space-between;gap:16px;box-sizing:border-box}
.quantity{border:1px solid #d9d3c6;border-radius:25px;padding:0 4px;display:flex;align-items:center;gap:3px}
.quantity button{width:32px;height:36px;font-size:24px;color:#191916;background:none}
.quantity output{font-size:16px;min-width:24px;width:24px}
.product-price{font:500 28px/1.1 Manrope,sans-serif;letter-spacing:-.04em;color:#191916}
.add-to-bag{position:static;inset:auto;translate:none;display:flex;width:100%;height:50px;align-items:center;justify-content:space-between;gap:15px;padding:0 22px;border:0;border-radius:28px;background:#191916!important;color:#fffaf0;font:500 12px/1.4 Manrope,sans-serif;letter-spacing:.09em;transition:background .18s,transform .18s}
.add-to-bag:hover{background:#37372f!important;transform:translateY(-1px)}
.add-to-bag:active{transform:translateY(0)}
.buy-ufo{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.shop-footnote{position:static;inset:auto;translate:none;width:100%;margin:0;font:400 12px/1.5 Manrope,sans-serif;color:#8b8476;letter-spacing:0;text-transform:none;text-align:center;white-space:normal}
.milk-shop>.shop-sprig{display:block!important;z-index:-1;width:105px;height:235px;bottom:-55px;opacity:.85}
.milk-shop>.sprig-pink{left:-37px}.milk-shop>.sprig-yellow{right:-43px;height:205px;bottom:-40px}
.shop-feedback{bottom:2%;font-size:12px}
@media(min-aspect-ratio:1/1) and (max-height:760px){
 .product-config{top:16%;gap:18px}
 .config-kicker{margin-bottom:9px}
 .product-config .product-name{margin-bottom:10px;font-size:28px}
 .product-config legend{margin-bottom:8px}
 .config-flavors label span{min-height:74px;padding:9px 4px;font-size:16px}
 .config-volumes span{min-height:75px}.volume-icon-space{height:47px}
 .volume-bottle{height:42px}.config-volumes label:first-of-type .volume-bottle{height:34px}.config-volumes label:last-of-type .volume-bottle{height:47px}
 .config-purchase{padding-top:12px;gap:10px}
 .add-to-bag{height:46px}
}
@media(max-aspect-ratio:1/1){
 .shop-copy>.eyebrow{top:10%;left:6%;width:88%;font-size:12px}
 .shop-copy>h2{top:13%;left:6%;width:88%;font-size:46px;text-align:center;line-height:1}
 .shop-seal,.shop-intro,.product-caption{display:none}
 .shop-active .product-image{top:33%;height:29svh;width:65%;max-width:none}
 .product-config{inset:51% 7% auto 7%;width:86%;max-width:none;gap:16px}
 .config-kicker{display:none}
 .product-config .product-name{font-size:28px;margin:0}
 .product-config .product-description{display:none}
 .product-config legend{font-size:12px;margin-bottom:9px}
 .config-flavors label span{min-height:76px;padding:8px 4px;font-size:16px}
 .product-config .config-volumes{gap:7px;margin:0}
 .config-volumes span{min-height:73px;gap:5px}
 .volume-icon-space{height:44px}
 .volume-bottle{height:38px;width:20px}.config-volumes label:first-of-type .volume-bottle{height:31px;width:16px}.config-volumes label:last-of-type .volume-bottle{height:44px;width:23px}
 .config-purchase{padding-top:13px;display:grid;grid-template-columns:1fr;gap:12px}
 .purchase-row{width:100%;gap:12px;left:auto;right:auto;bottom:auto}
 .product-price{font-size:28px}
 .add-to-bag{width:100%;height:48px;left:auto;right:auto;bottom:auto}
 .shop-footnote{font-size:12px;bottom:auto;left:auto;right:auto;width:100%}
 .milk-shop>.shop-sprig{display:none!important}
 .shop-feedback{display:none}
}
@media(max-aspect-ratio:1/1) and (max-height:850px){
 .shop-copy>.eyebrow{top:8%}.shop-copy>h2{top:11%;font-size:40px}
 .shop-active .product-image{top:30%;height:25svh}
 .product-config{top:45%;gap:12px}
 .config-flavors label span{min-height:66px;gap:5px}.milk-type-icon{height:19px;width:17px}
 .product-config legend{margin-bottom:6px}
 .config-volumes span{min-height:64px}.volume-icon-space{height:36px}
 .volume-bottle{height:32px}.config-volumes label:first-of-type .volume-bottle{height:26px}.config-volumes label:last-of-type .volume-bottle{height:36px}
 .config-purchase{padding-top:10px;gap:9px}.quantity button{height:32px}.add-to-bag{height:44px}
}
@media(prefers-reduced-motion:reduce){.add-to-bag,.config-flavors label span{transition:none}}
.product-config .config-volumes legend{position:static;inset:auto;float:none;display:flex;width:100%;margin:0 0 12px;padding:0}
@media(min-aspect-ratio:1/1) and (max-height:760px){.product-config .config-volumes legend{margin-bottom:8px}}
@media(max-aspect-ratio:1/1){.product-config .config-volumes legend{margin-bottom:9px}}
@media(max-aspect-ratio:1/1) and (max-height:850px){.product-config .config-volumes legend{margin-bottom:6px}}
.product-config legend>span{display:inline;flex:none;min-height:0;height:auto;width:auto;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;font:400 12px/1.5 Manrope,sans-serif;color:#aaa394}
@media(max-aspect-ratio:1/1){.config-flavors label span{height:80px;min-height:80px}}
/* Preserve the continuous bottle zoom from the breakfast scene. */
.product-image,.shop-active .product-image{top:calc(56% - var(--focus,0) * 9%);height:calc(32svh + var(--focus,0) * 36svh);width:34%;max-width:470px}
@media(max-aspect-ratio:1/1){.product-image,.shop-active .product-image{top:calc(56% - var(--focus,0) * 23%);height:calc(32svh - var(--focus,0) * 3svh);width:65%;max-width:none}}
@media(max-aspect-ratio:1/1) and (max-height:850px){.product-image,.shop-active .product-image{top:calc(56% - var(--focus,0) * 26%);height:calc(32svh - var(--focus,0) * 7svh)}}

/* Same printed sticker treatment as the scan scene. */
.shop-seal{isolation:isolate;top:70%;width:178px;min-height:132px;padding:22px 20px;justify-content:center;gap:13px;border:5px solid #fffdf1;border-radius:18px 30px 18px 30px;background:#ffda48;box-shadow:0 4px 0 #173e3020,0 9px 18px #133b2c12;transform:rotate(-7deg);font:500 16px/1.25 Manrope,sans-serif;letter-spacing:-.025em;color:#111;text-align:left}
.shop-seal:before{content:'';position:absolute;inset:5px;border:1px dashed #173e3045;border-radius:9px 21px 9px 21px;z-index:-1;pointer-events:none}
.shop-seal span{font-size:28px;flex:none}
@media(max-aspect-ratio:1/1){.shop-seal{display:none}}

/* Larger botanical framing, including a third sprig from above. */
.milk-shop>.shop-sprig{width:175px;height:340px;bottom:-60px;opacity:1}
.milk-shop>.sprig-pink{left:-55px}
.milk-shop>.sprig-yellow{right:-60px;height:310px;bottom:-45px}
.shop-flower-top{position:absolute;top:-88px;left:30%;width:150px;height:260px;object-fit:contain;object-position:bottom;transform:rotate(166deg);transform-origin:50% 50%;pointer-events:none;z-index:-1}
@media(max-aspect-ratio:1/1){.shop-flower-top{top:-80px;left:34%;width:90px;height:150px;opacity:.8}.milk-shop>.shop-sprig{display:none!important}}

/* Give the order a little more room below the product introduction. */
.product-config .config-flavors{margin-top:18px}
.milk-shop>.shop-sprig{width:205px;height:380px;bottom:-65px}
.milk-shop>.sprig-pink{left:-62px}
.milk-shop>.sprig-yellow{right:-67px;height:350px;bottom:-50px}
@media(max-aspect-ratio:1/1){.product-config .config-flavors{margin-top:8px}}

.milk-shop>.sprig-pink{animation:product-flower-lean 8s ease-in-out infinite;transform-origin:50% 100%}
@keyframes product-flower-lean{0%,100%{transform:rotate(12deg)}50%{transform:rotate(16deg)}}
.product-slosh{position:absolute;pointer-events:none;z-index:3;display:none}
@media(prefers-reduced-motion:reduce){.milk-shop>.sprig-pink{animation:none;transform:rotate(14deg)}}
.milk-shop>.sprig-pink{left:-75px}
@keyframes product-flower-lean{0%,100%{transform:rotate(5deg)}50%{transform:rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.milk-shop>.sprig-pink{transform:rotate(6deg)}}

/* Shared control shapes across the story, shop, menu, and cart. */
:root{--control-radius:999px;--control-radius-panel:20px}
button,.header nav>button,.header nav .menu-toggle,
.breakfast-active:not(.shop-active) .scroll-cue,
.cart .checkout-button,.cart .back-to-bag,.cart .empty-shop,
.end-actions button,.add-to-bag{border-radius:var(--control-radius)}
.quantity button,.cart-item-controls button:not(.remove-item){border-radius:50%}
.cart-item-controls .remove-item{border-radius:var(--control-radius)}
.chapter-nav button{border-radius:var(--control-radius-panel);padding-inline:16px}
.config-flavors label span,.config-volumes label>span,
.product-config input:focus-visible+span{border-radius:var(--control-radius-panel)}

/* A level saucer receives the cow into its central hatch. */
.ufo{transform:none}
.cow-wrap{transform:translate(-50%,var(--cow-y)) rotate(var(--cow-tilt,0deg)) scale(var(--cow-scale,1))}
/* Leave clear space above the cow on the return scene. */
.ending{inset:11.5% 5% auto;transform:none}
.ending h2{font-size:clamp(54px,6.7vw,122px);margin:0 0 18px;line-height:.88}
.ending>p{margin:0;line-height:1.5}
.ending .end-actions{margin-top:18px}
.ending .return-shop{background:#191916;color:#fff9e8}
@media(max-aspect-ratio:1/1){
 .ending{inset:23% 5% auto}
 .ending h2{font-size:clamp(42px,10.5vw,64px);margin-bottom:12px}
 .ending>p{font-size:12px}
 .ending .end-actions{flex-direction:row;gap:8px;margin-top:12px}
 .ending .end-actions button{font-size:10px;padding:11px 13px;letter-spacing:.02em;max-width:48%}
}
@media(max-height:600px) and (min-aspect-ratio:1/1){
 .ending{top:15%}.ending h2{font-size:clamp(40px,6vw,64px);margin-bottom:10px}
 .ending .end-actions{margin-top:10px}
}

/* Clip at the luminous aperture, rather than behind the saucer's outer rim. */
.cow-flight-plane{position:absolute;inset:0;z-index:9;pointer-events:none;mask-image:linear-gradient(to bottom,transparent calc(var(--hatch-y,0px) - 3px),#000 calc(var(--hatch-y,0px) + 3px));-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--hatch-y,0px) - 3px),#000 calc(var(--hatch-y,0px) + 3px))}
.hatch-glow{position:absolute;z-index:10;left:50%;top:var(--hatch-y,0px);width:var(--hatch-width,100px);height:var(--hatch-height,15px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#fffefa 0%,#fff6ba 40%,#ffd66b55 66%,transparent 75%);filter:blur(3px);opacity:var(--hatch-glow,0);pointer-events:none}
.alien-reader{translate:calc(var(--cabin-x,0) * -12px) calc(var(--cabin-y,0) * -7px);will-change:transform,translate}
.alien-eater{translate:calc(var(--cabin-x,0) * -19px) calc(var(--cabin-y,0) * -11px);will-change:transform,translate}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.alien-reader,.alien-eater{translate:none;will-change:auto}}
@media(prefers-reduced-motion:reduce){.hatch-glow{display:none}}
/* Prevent focus restoration from internally scrolling the fixed scene. */
.scene{overflow:clip}

/* On phones, flowers frame the lower corners rather than filling the sides. */
@media(max-aspect-ratio:1/1){
 .foreground-flowers .parallax-flowers{inset:auto;bottom:-18px;width:auto;height:42svh;max-height:370px;aspect-ratio:1586 / 992;background-size:contain;translate:none;transform:none}
 .foreground-flowers .flowers-left{left:-32px;right:auto}
 .foreground-flowers .flowers-right{right:-32px;left:auto}
 .shop-flower-top{top:-64px;left:36%;width:70px;height:120px}
}

/* Follow the visible viewport as mobile browser bars collapse or expand. */
.scene{height:100%;height:100dvh}

.header nav>.shop-shortcut{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.nav-arrow{display:block;flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Portrait breakfast: one guest seated in the right-hand chair. */
@media(max-aspect-ratio:1/1){
 .breakfast-photo{background-size:auto 100%;background-position:90% center}
 .breakfast .alien-reader{display:none}
 .breakfast .alien-eater{right:-10%;bottom:7%;width:60%;height:42%;animation:none;translate:none;transform:none;will-change:auto}
 .breakfast .window-headline{top:24%;left:50%;width:94%;font-size:clamp(52px,14vw,80px);white-space:normal;line-height:.95}
 .breakfast .window-headline em{display:block;margin:5px 0 0;line-height:1.05}
 .product-image,.shop-active .product-image{left:50%;top:calc(60.5% - var(--focus,0) * 27.5%);height:calc(18svh + var(--focus,0) * 11svh);width:calc(34% + var(--focus,0) * 31%)}
}
@media(max-aspect-ratio:1/1) and (max-height:850px){
 .product-image,.shop-active .product-image{top:calc(60.5% - var(--focus,0) * 30.5%);height:calc(18svh + var(--focus,0) * 7svh)}
}

@media(max-aspect-ratio:1/1){
 .product-stage:before{top:calc(60.5% + 9svh);width:58px}
 .product-stage:after{top:calc(60.5% + 9svh);width:46px}
 .breakfast-active:not(.shop-active) .scene-footer{display:flex;justify-content:center}
 .breakfast-active:not(.shop-active) .scene-footer .signature,.breakfast-active:not(.shop-active) .scene-footer .chapter{display:none}
}

/* Mobile product hierarchy: product name, larger bottle, then one compact order. */
.product-mobile-name{display:none}
@media(max-aspect-ratio:1/1){
 .shop-copy>h2{display:none}
 .shop-copy>.eyebrow{top:8%;font-size:12px;letter-spacing:.045em;text-align:center}
 .product-mobile-name{display:block;position:absolute;top:12%;left:6%;width:88%;margin:0;text-align:center;color:#191916;font:500 30px/1.15 Manrope,sans-serif;letter-spacing:-.045em}
 .product-image,.shop-active .product-image{top:calc(60.5% - var(--focus,0) * 27%);height:calc(18svh + var(--focus,0) * 15svh)}
 .product-config{top:52%;left:7%;right:7%;width:86%;gap:16px}
 .config-summary{display:none}
 .product-config legend,.product-config .config-volumes legend{margin-bottom:8px}
 .config-flavors label span{flex-direction:row;gap:6px;min-height:60px;height:60px;padding:8px 5px;text-align:left;font-size:16px;line-height:1.2;letter-spacing:-.035em;background:#fffdf8}
 .config-flavors .milk-type-icon{width:17px;height:20px;flex:none}
 .config-volumes label>span{min-height:58px;height:58px;gap:4px}
 .volume-icon-space{height:33px}
 .volume-bottle{height:29px;width:18px}
 .config-volumes label:first-of-type .volume-bottle{height:25px;width:15px}
 .config-volumes label:last-of-type .volume-bottle{height:33px;width:20px}
 .config-purchase{padding-top:14px;gap:12px}
 .quantity button{height:36px}
 .add-to-bag{height:48px}
 .shop-footnote{font-size:12px}
}
@media(max-aspect-ratio:1/1) and (max-height:740px){
 .product-mobile-name{font-size:28px}
 .product-config{top:51%;gap:12px}
 .config-flavors label span{min-height:54px;height:54px}
 .config-volumes label>span{min-height:54px;height:54px}
 .config-purchase{padding-top:10px;gap:9px}
 .quantity button{height:32px}
 .add-to-bag{height:44px}
}

/* Monochrome SVG controls, including labels generated by the story and cart. */
.ui-icon{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.scroll-cue,.end-actions button,.checkout-button,.empty-shop{display:inline-flex;align-items:center;justify-content:center;gap:8px}
@media(max-aspect-ratio:1/1){
 .ending{top:20%}
 .ending .end-actions{flex-direction:column;align-items:center;gap:10px;margin-top:16px}
 .ending .end-actions button{width:min(100%,260px);max-width:none;min-height:44px;padding:12px 18px;font-size:12px;letter-spacing:.025em}
 .scene-footer .scroll-cue{gap:5px}
 .scene-footer .scroll-cue .ui-icon{width:14px;height:14px}
}
@media(max-aspect-ratio:1/1) and (max-height:740px){.ending{top:18%}}