/* Mobile usability and resilient small-screen layout */
img{height:auto}
.brand img,.footer-brand img{aspect-ratio:7/3;object-fit:contain}
.hero-art img{aspect-ratio:375/272;object-fit:contain}
.product-shot img{aspect-ratio:1/1;object-fit:contain}
.product-backs img{aspect-ratio:7/4;object-fit:contain}
.flavor-stage img{aspect-ratio:7/5;object-fit:contain}
.manuka-art img{aspect-ratio:25/18;object-fit:contain}
.section,.hero,.guarantee,.final-cta{scroll-margin-top:92px}
button,a{-webkit-tap-highlight-color:transparent}
@media (max-width:900px){
  .site-header nav{max-height:calc(100dvh - 78px);overflow-y:auto;box-shadow:0 12px 22px rgba(23,19,33,.12)}
  .site-header nav .button{width:100%}
  .product-detail-copy,.picker-copy,.manuka>div:last-child,.guarantee>div:last-child{min-width:0}
  .hero-art img{max-height:470px;object-fit:contain}
  .flavor-stage{gap:18px}
  .story-poster{transform:none}
  summary{min-height:48px;display:flex;align-items:center}
  footer a{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:520px){
  .announcement{font-size:.72rem;line-height:1.3;padding:9px 10px}
  .site-header{height:72px}
  .brand img{width:132px;height:auto}
  .site-header nav{top:72px;max-height:calc(100dvh - 72px)}
  .menu{min-width:48px;min-height:48px;padding:9px 14px}
  .hero-copy>p,.product-detail-copy p,.manuka p,.guarantee p{font-size:1rem}
  .hero-actions .button,.picker-copy>.button,.manuka .button,.guarantee .button,.final-cta .button{width:100%;text-align:center}
  .hero-art img{max-height:330px}
  .proof{gap:7px}
  .marquee{justify-content:center}
  .section-head{margin-bottom:38px}
  .flavor-stage h3{overflow-wrap:anywhere}
  .tabs{display:grid;grid-template-columns:1fr;margin:24px 0}
  .tabs button{width:100%;min-height:48px}
  .ingredient-cloud button{min-height:48px}
  .story-poster .story-title{overflow-wrap:normal}
  footer>div{align-items:flex-start}
}
@media (max-width:360px){
  .hero h1{font-size:2.85rem}
  .section h2,.product-detail-copy h2,.manuka h2,.guarantee h2{font-size:2.55rem}
  .story-poster .story-title{font-size:3.45rem}
  .ingredient-cloud{grid-template-columns:1fr}
  .guarantee-badge{box-shadow:10px 10px 0 var(--pink)}
}
@media (hover:none){
  .button:hover,.ingredient-cloud button:hover{transform:none}
  .button:hover{box-shadow:5px 5px 0 var(--pink)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}