@media (max-width:1100px){
  .grid,.cats{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr 1fr}.why div:nth-child(3){border-left:0;padding-left:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .hero-meta{display:none}
}
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:flex}
  .header-row{gap:10px;height:64px}
  .search{order:5;flex-basis:100%;max-width:none}
  .header-row{flex-wrap:wrap;height:auto;padding:10px 0}
  .tool span.l{display:none}
  .shop{grid-template-columns:1fr}
  .filters{position:fixed;inset:0 auto 0 0;width:min(320px,88vw);background:var(--warm);z-index:210;padding:24px;overflow:auto;transform:translateX(-105%);transition:transform .35s;box-shadow:var(--shadow)}
  .filters.open{transform:none}
  .filter-toggle{display:inline-flex}
  .pdp,.cart-layout,.checkout,.compare-band,.backyard,.newsletter,.auth,.prose-layout,.acct{grid-template-columns:1fr}
  .pdp-info,.summary,.side-nav{position:static}
  .side-nav{flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line)}
  .side-nav a{border-left:0;border-bottom:2px solid transparent;white-space:nowrap}
  .auth-art{min-height:220px;padding:32px}
  .admin{grid-template-columns:1fr}
  .admin-side{flex-direction:row;overflow-x:auto;padding:12px}
  .admin-side .logo{margin:0 12px 0 0}
  .backyard img{max-height:360px}
}
@media (max-width:640px){
  .grid,.cats,.why,.footer-grid,.stats,.row2,.row3,.ship-opts,.assure{grid-template-columns:1fr}
  .why div+div{border-left:0;padding-left:0}
  .announce span:not(:first-child){display:none}
  .nl-form{flex-direction:column}
  .line{grid-template-columns:72px 1fr}
  .line img{width:72px;height:72px}
  .line>:last-child{grid-column:2}
  .table thead{display:none}
  .table tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .table td{display:flex;justify-content:space-between;border:0;padding:6px 4px}
  .table td[data-l]::before{content:attr(data-l);font-family:var(--mono);font-size:.7rem;text-transform:uppercase;color:var(--mute)}
  .hero{min-height:620px}
}