/* Cross-page mobile consistency and overflow protection. */
html,body{max-width:100%}
img,svg,video{max-width:100%}
input,select,textarea,button{max-width:100%}

@media(max-width:700px){
  body{overflow-x:clip}
  main,.page,.checkout,.layout,.product-layout,.product-main{min-width:0;max-width:100%}
  .page.container,.checkout.container,main.container{width:calc(100% - 20px)}
  .shared-header{position:sticky;top:0}
  .shared-search{height:42px}
  .shared-search input{min-width:0;padding:0 11px}
  .shared-search button{padding:0 14px}
  .shared-footer-grid>*{min-width:0}
  .shared-footer a,.shared-footer p{overflow-wrap:anywhere}

  .toolbar{flex-wrap:wrap;gap:9px}
  .toolbar select{max-width:100%;min-height:40px}
  .filters,.panel,.content,.order-card,.summary{min-width:0}
  .form-grid>*{min-width:0}
  .field input,.field select,.field textarea{font-size:16px}

  /* Category and wishlist cards stay inside the phone viewport. */
  #grid.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;overflow:visible}
  #grid.grid .card{min-width:0;width:auto;padding:10px}
  #grid.grid .card img{height:125px}
  #grid.grid .card h2,#grid.grid .card h3{font-size:12px;min-height:34px;overflow-wrap:anywhere}
  #grid.grid .card .actions{grid-template-columns:1fr;gap:6px}
  #grid.grid .card .add,#grid.grid .card .remove{width:100%;padding:9px 5px;font-size:10px}

  /* Product detail and related items. */
  .product-main .product{padding:14px;gap:18px}
  .product-main .gallery{min-height:0}
  .product-main .info{padding:4px 0}
  .product-main .info h1{font-size:25px;overflow-wrap:anywhere}
  .product-main .benefits{grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-main .benefit{min-width:0;padding:9px 4px}
  .related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;overflow:visible}
  .related-card{min-width:0;padding:10px}
  .related-card img{height:120px}

  /* Checkout/cart content should wrap instead of forcing horizontal scroll. */
  .checkout{gap:14px}
  .checkout .panel,.checkout .summary{padding:16px}
  .summary-row{grid-template-columns:48px minmax(0,1fr) auto;gap:8px}
  .summary-row img{width:48px;height:48px}
  .summary-row h4{overflow-wrap:anywhere}
  .payment{align-items:flex-start}
  .pickup-summary{flex-direction:column}
  .cart-drawer{width:100%;max-width:430px}
  .cart-row{grid-template-columns:58px minmax(0,1fr) auto;gap:9px}
  .cart-row img{width:58px;height:58px}

  /* Account/order/support pages. */
  .page-head,.head{gap:10px}
  .channels,.cards{gap:10px}
  .order-head,.order-body,.order-content{min-width:0}
  .item{min-width:0}
  .item>div{min-width:0}
  .item h3{overflow-wrap:anywhere}
  .buttons a,.button,.shop{min-height:42px}
}

@media(max-width:420px){
  #grid.grid .card img{height:105px}
  #grid.grid .price{font-size:14px}
  .product-main .benefits{grid-template-columns:1fr}
  .product-main .buy-row{grid-template-columns:100px minmax(0,1fr)}
  .related-card img{height:105px}
  .summary-row{grid-template-columns:44px minmax(0,1fr)}
  .summary-row>strong{grid-column:2}
}