/* Keep the page inside narrow mobile viewports while preserving swipeable rows. */
html,body{max-width:100%;overflow-x:clip}
@media(max-width:800px){
  header,main,footer{min-width:0}
  header{gap:10px}
  header form{min-width:0;flex:1 0 100%;max-width:100%;margin:0}
  header form input{min-width:0}
  input,select,textarea{font-size:16px}
  nav,.gallerythumbs{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-inline:contain}
  nav::-webkit-scrollbar,.gallerythumbs::-webkit-scrollbar{display:none}
  .hero{grid-template-columns:minmax(0,1fr)}
  .herotext,.heroart{min-width:0}
  .benefits{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.card .photo,.cardlink{min-width:0}
  .card h3,.card .price{overflow-wrap:anywhere}
  .product{grid-template-columns:minmax(0,1fr)}
  .productgallery,.productinfo,.photo-stage,.productvideo,.video-frame{min-width:0;max-width:100%}
  .productgallery img,.productvideo video{max-width:100%}
  .story,footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .story{grid-template-columns:minmax(0,1fr)}
  footer>div{min-width:0}
  footer a,footer small{overflow-wrap:anywhere}
  .sticky-buy{max-width:100%;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .sticky-buy .button{white-space:nowrap}
}
@media(max-width:360px){
  header{padding-inline:16px}
  main{padding-inline:16px}
  nav{padding-inline:16px}
  footer{padding-inline:16px}
  .grid{gap:22px 10px}
  .sticky-buy{gap:8px}
  .sticky-buy .button{padding-inline:12px}
}

/* Keep the existing shopping bag visible as the customer scrolls. */
header .bag{
  position:fixed;
  top:calc(40px + env(safe-area-inset-top, 0px));
  right:max(12px, env(safe-area-inset-right, 0px));
  z-index:60;
  min-height:42px;
  padding:7px 9px;
  gap:5px;
  border:1px solid #d5e2d8;
  border-radius:999px;
  background:#fff;
  color:#164b40;
  box-shadow:0 5px 18px #193e352b;
  cursor:pointer;
}
header .bag .bag-icon{width:18px;height:18px}
header .bag .bag-label{font-size:11px;font-weight:600}
header .bag #count{min-width:20px;height:20px;font-size:10px}
header .bag:focus-visible{outline:3px solid #ee744f;outline-offset:3px}
.fly-to-bag{position:fixed;z-index:70;width:48px;height:48px;object-fit:contain;padding:4px;border:1px solid #d5e2d8;border-radius:50%;background:#fff;box-shadow:0 7px 20px #193e3533;pointer-events:none}