@media (max-width:1100px){
  .hero-grid,.grid-4,.footer-grid,.grid-3,.list-layout{grid-template-columns:repeat(2,1fr)}
  .hero-grid,.list-layout{grid-template-columns:1fr}
  .offer-band{grid-template-columns:repeat(2,1fr)}
  .section-head{align-items:flex-start}
}

@media (max-width:900px){
  .navbar{flex-wrap:wrap;align-items:center}
  .menu-toggle{display:grid}
  .nav-panel{display:none;width:100%;flex-direction:column;align-items:stretch;padding-top:12px;border-top:1px solid rgba(0,0,0,.06)}
  body.menu-open .nav-panel{display:flex}
  .nav-links,.nav-actions{width:100%;justify-content:center;flex-wrap:wrap}
  .nav-links a{padding:10px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
  .nav-actions .btn{flex:1;min-width:180px}
}

@media (max-width:820px){
  .page-section{padding:42px 0}
  .form-row{grid-template-columns:1fr}
  .topbar .container{justify-content:center;text-align:center}
}

@media (max-width:700px){
  .grid-4,.grid-3,.footer-grid,.stats-grid,.offer-band{grid-template-columns:1fr}
  .card-actions .btn,.nav-actions .btn{flex:auto;width:100%}
  .container{width:min(1220px,calc(100% - 22px))}
  .hero-card,.detail-card,.gallery-card,.summary-card,.cart-card,.card-body,.sidebar-card{padding:18px}
  .hero-title{font-size:clamp(32px,9vw,48px)}
  .section-title{font-size:clamp(28px,8vw,40px)}
  .table,.table thead,.table tbody,.table th,.table td,.table tr{display:block}
  .table thead{display:none}
  .table tr{padding:14px 0;border-bottom:1px solid rgba(0,0,0,.06)}
  .table td{padding:8px 0;border:0}
  .product-cell{align-items:flex-start}
  .product-thumb{width:48px;height:48px}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center}
  .wa-float{width:56px;height:56px;font-size:24px;right:14px;bottom:14px}
}

@media (max-width:520px){
  .logo img,.footer-brand img{max-width:150px!important}
  .btn,.icon-btn,.menu-toggle{min-height:44px}
  .product-image,.cat-visual,.blog-media,.placeholder-box{min-height:180px;padding:18px;font-size:20px}
  .offer-item{padding:10px 0}
  .breadcrumbs{font-size:13px}
  .price-row{align-items:flex-start}
}