/* Responsive polish. Desktop hero composition remains in packaging.css. */
.hero__picker{display:none}
@media(min-width:861px){.bottle--mobile{display:none!important}}
@media(max-width:860px){
 .hero--brand .grass{display:none}
 .hero--brand .bottle[data-pos="-2"],.hero--brand .bottle[data-pos="2"]{opacity:0;visibility:hidden;pointer-events:none}
 .hero--brand .hero__stage{margin-bottom:4px}
 .hero--brand .hero__picker{display:flex;position:relative;z-index:12;justify-content:center;gap:8px;margin:0 auto 16px;padding:0 20px;color:var(--cream)}
 .hero__picker button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:52px;min-height:48px;padding:6px;border:0;background:transparent;color:inherit;font:600 14px/1 var(--sc-font-text);cursor:pointer;opacity:.65;border-radius:8px}
 .hero__picker button i{display:block;width:28px;height:3px;border-radius:3px;background:currentColor;transition:background .2s,width .2s}
 .hero__picker button.is-on{opacity:1}
 .hero__picker button.is-on i{background:var(--olive);width:36px}
 .hero__picker button:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
}
.story .sl picture{display:block;width:100%;height:100%}
.final__media picture{display:block;width:100%;height:100%}

/* Contacts are real groups, not narrow columns that break phone numbers. */
.foot__grid{grid-template-columns:minmax(220px,1.3fr) minmax(180px,1fr) minmax(185px,1fr) minmax(190px,1fr);gap:32px}
.foot__grid>div{min-width:0}
.foot__brand p{line-height:1.6}
.foot__group h4{font-size:14px;line-height:1.4;letter-spacing:.025em;color:rgba(255,255,255,.65);margin-bottom:12px}
.foot__group ul{gap:4px;font-size:17px;line-height:1.6}
.foot__group li{margin:0}
.foot__group a{display:inline-flex;align-items:center;min-height:44px;gap:.35em;padding:4px 0}
.foot__phones a{white-space:nowrap;font-variant-numeric:tabular-nums}
.foot__social a,.foot__social span{white-space:nowrap}
.foot__address li{padding-top:4px;max-width:24ch;text-wrap:pretty}
.foot__base{font-size:14px;line-height:1.6;color:rgba(255,255,255,.65);gap:16px}
.foot__base .credit{font-size:14px;color:rgba(255,255,255,.65)}
.foot a:focus-visible{outline:2px solid var(--olive);outline-offset:5px;border-radius:3px}
.catalog__head>div{min-width:0;max-width:100%}
@media(min-width:601px) and (max-width:1100px){
 .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px}
 .foot__brand{grid-column:1/-1}
 .foot__social{grid-column:1/-1}
 .foot__social ul{display:flex;flex-wrap:wrap;column-gap:28px}
}
@media(max-width:600px){
 .foot{padding-top:40px;padding-bottom:calc(112px + env(safe-area-inset-bottom))}
 .foot__grid{grid-template-columns:minmax(0,1fr);gap:24px;padding-bottom:28px}
 .foot__brand{grid-column:auto;padding-bottom:4px}
 .foot__brand p{max-width:28ch;margin-top:16px;font-size:17px}
 .foot__group{border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
 .foot__group h4{margin-bottom:8px}
 .foot__group ul{font-size:17px}
 .foot__address li{max-width:32ch}
 .foot__base{flex-direction:column;align-items:flex-start;gap:12px}
 .foot__base>span{max-width:35ch;text-wrap:pretty}
 /* Long actions should wrap deliberately rather than clip inside a pill. */
 .howto__cta,.final__cta{gap:12px}
 .howto__cta .btn{width:100%;white-space:normal;min-height:52px;padding:12px 18px;text-align:center}
 .howto__cta a[href^="tel:"]{white-space:nowrap}
 .ccards a[href^="tel:"]{white-space:nowrap;font-variant-numeric:tabular-nums}
 .calc__box .btn,.premium-about .btn{white-space:normal;text-align:center;padding:12px 16px;min-height:52px}
}
@media(max-width:360px){
 .catalog__head h2{font-size:34px;line-height:1.08;overflow-wrap:break-word}
 .tile--packaging .tile__acts{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px}
 .tile--packaging .tile__acts>a{grid-column:1/-1;justify-self:start;white-space:normal}
 .tile--packaging .tile__acts [data-order]{margin-left:0;justify-self:stretch;white-space:normal}
 .tile--packaging .tile__acts .btn{padding:10px 14px}
 .tile--packaging .tile__acts .btn--icon{padding:0}
}
@media(prefers-reduced-motion:reduce){.hero__picker button i{transition:none}}