/* Shared layout guardrails: fluid sizing, wrapping, safe areas and short screens. */
html{scrollbar-gutter:stable}
body{min-width:0}
main,section,header,footer,.container,.hero-copy,.hero-art,.feature-copy,.steps,.final-box>div{min-width:0}
.hero-grid,.feature-grid,.footer-grid,.section-head,.drink-gallery-head,.final-box{min-width:0}
.cta{white-space:normal;overflow-wrap:anywhere}
.hero h1,h2,h3{overflow-wrap:break-word}
.navlinks a,.catalog-thumb,.catalog-filters button{touch-action:manipulation}
.ticker-track{width:max-content;min-width:100%;max-width:none}
.ticker-track>a{flex:0 0 auto}
.catalog-shell{max-width:100%}
.catalog-close,.catalog-controls button{font-family:inherit}
@media(min-width:761px) and (max-width:1050px){
 .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .hero h1{font-size:clamp(40px,5vw,54px)}
 .hero-actions .cta{width:100%}
 .nav{gap:14px}.navlinks{gap:14px}
 .nav>.cta{font-size:11px;padding-inline:12px}
 .brand-logo-header{width:135px}
 .final-box{grid-template-columns:minmax(0,1fr)}
 .final-box>.cta{justify-self:start}
 .category-info{padding-right:16px}.category-arrow{display:none}
}
@media(max-width:760px){
 .container{width:calc(100% - 40px)}
 .hero-actions{grid-template-columns:1fr}
 .hero-actions .cta{min-height:48px;font-size:13px}
 .hero-badges{flex-wrap:wrap}
 .hero-pack-caption{max-width:90%;width:max-content}
 .hero-pack-caption span,.hero-pack-caption strong{white-space:normal}
 .footer-grid,.feature-grid,.hero-grid{grid-template-columns:minmax(0,1fr)}
 .float-wa{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:380px){
 .container{width:calc(100% - 28px)}
 .hero h1{font-size:clamp(30px,10vw,39px)}
 .hero .eyebrow{font-size:9px;letter-spacing:.06em}
 .brand-logo-header{width:105px}
 .nav>.cta{font-size:10px;min-height:44px;padding-inline:8px}
 .category-grid{grid-template-columns:minmax(0,1fr)}
 .category-visual{aspect-ratio:1.5}
 .drink-card-copy h3{font-size:17px}
 .drink-card-copy small{font-size:9px}
 .step{grid-template-columns:1fr;gap:7px}
 .final-box{padding:26px 20px}
 .catalog-header strong{font-size:10px}
}
@media(max-width:300px){
 .nav{grid-template-columns:1fr}.nav>.cta{grid-column:1;grid-row:2;margin-top:8px}
 .navlinks{grid-row:3;font-size:9px;gap:4px}
 .drink-grid{grid-template-columns:1fr}.drink-card.beer-main{grid-column:auto}
}
@media(max-height:540px) and (orientation:landscape){
 header{position:relative}
 .hero-grid{padding-block:30px}
 .hero-art{max-width:340px}
 html{scroll-padding-top:16px}
}
@media(prefers-reduced-motion:reduce){.catalog-spotlight img{animation:none!important}}

/* Ground the beer inside the yellow highlight instead of letting it float/crop. */
.drink-mini:not(.red)::before{
 content:"";position:absolute;right:28px;top:50%;translate:0 -50%;
 width:176px;max-width:36%;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle at 34% 28%,#fffdf2 0,#fff3bd 68%,#f4c633 100%);
 border:1px solid #fff9dd;box-shadow:inset 0 -12px 24px #d69b001f,0 14px 30px #8a590020
}
.drink-mini:not(.red)::after{
 content:"";position:absolute;right:66px;bottom:18px;
 width:100px;height:13px;border-radius:50%;
 background:#4d2d0048;filter:blur(5px)
}
.drink-mini .cutout{
 z-index:1;right:78px;bottom:20px;width:76px;height:172px;
 object-fit:contain;object-position:center bottom;transform:rotate(4deg);transform-origin:50% 100%;
 filter:drop-shadow(0 10px 7px #68410040)
}
@media(max-width:760px){
 .drink-mini:not(.red)::before{right:16px;width:155px;max-width:42%}
 .drink-mini:not(.red)::after{right:44px;bottom:18px;width:96px}
 .drink-mini .cutout{opacity:1;right:58px;bottom:20px;width:68px;height:158px;transform:rotate(4deg)}
 .drink-mini-copy{max-width:58%}
}
@media(max-width:520px){
 .drink-mini-row{grid-template-columns:1fr}
 .drink-mini{min-height:210px}
 .drink-mini:not(.red)::before{right:14px;width:158px;max-width:44%}
 .drink-mini:not(.red)::after{right:42px;width:98px}
 .drink-mini .cutout{right:57px;bottom:18px;width:69px;height:164px}
 .drink-mini-copy{max-width:57%}
}