/* Mobile first adjustments */
html, body{width:100%;max-width:100vw;overflow-x:hidden}
body{font-size:14px}
@media (max-width:900px){
  .navbar.glass{
    padding:8px 0 8px 16px;
    background-image:url("../images/navbar.png");
    background-position:left center;
    background-size:auto 100%;
    background-repeat:no-repeat;
    box-shadow:0 14px 34px rgba(11,17,32,0.12);
    border-bottom:1px solid rgba(15,23,42,0.08);
    min-height:auto;
    flex-wrap:wrap;
    gap:8px;
    justify-content:space-between;
  }
  .navbar.glass::before,.navbar.glass::after{display:none}
  .nav-left{flex:0 0 auto;padding:0 10px}
  .nav-center{flex:1 1 100%;margin:0;order:2}
  .nav-right{display:flex;align-items:center;gap:10px;order:1;padding:0 10px}
  .products.grid, .product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px;align-items:flex-start;padding:0 12px 14px;width:100% !important;}
  .products.grid .card, .product-card{padding:16px;border-radius:22px;min-height:auto;box-shadow:0 18px 40px rgba(11,17,32,0.08);max-width:100% !important;}
  .product-image, .card img{height:160px;object-fit:cover;border-radius:18px;aspect-ratio:4/3}
  .title, .product-title{font-size:13px;line-height:1.35;min-height:40px}
  .price{font-size:13px;gap:8px}
  .price .old{font-size:12px}
  .actions{gap:10px;margin-top:10px}
  .actions button{flex:1 1 calc(50% - 7px);padding:10px 10px;font-size:12px;min-width:0}
  .btn-primary{padding:10px 14px;font-size:14px}
  .icon-btn{padding:8px;font-size:16px}
  .section{padding:16px 10px}
  .modal-content{max-width:100% !important;width:calc(100% - 24px) !important;margin:0 auto !important;padding:12px !important}
  .main-image{height:auto !important;max-height:220px !important;min-height:160px !important}
  .bottom-nav{display:none !important}
}

@media (max-width:768px){
  html, body{overflow-x:hidden;max-width:100vw}
  .navbar.glass{padding:8px 0 8px 16px}
  .nav-center{order:2;width:100%;margin:0}
  .nav-right{order:1;padding:0 10px}
  .nav-left{padding:0 10px}
  .section{padding:14px 10px}
  .products.grid, .product-grid{display:grid !important;grid-template-columns:1fr !important;gap:12px;padding:0 10px 12px !important;width:100% !important;}
  .products.grid .card, .product-card{padding:14px;gap:10px;max-width:100% !important;}
  .product-image, .card img{height:150px;aspect-ratio:4/3}
  .title, .product-title{font-size:13px;min-height:40px}
  .price{font-size:13px}
  .actions button{padding:10px 8px;font-size:12px}
  .modal-content{padding:12px;max-width:calc(100% - 20px) !important}
  .wa-order-modal{padding:12vh 0 20px !important;}
  .wa-modal-content{padding:12px !important;max-width:100% !important;width:100% !important;margin:0 !important;box-sizing:border-box !important;}
  .main-image{height:auto !important;max-height:200px !important;min-height:140px !important}
  .card .meta{gap:8px}
  .bottom-nav{display:none !important}
}

@media (max-width:768px){
  .wa-order-modal{padding:8vh 0 16px !important;}
  .wa-modal-content{max-width:100% !important;width:100% !important;margin:0 !important;box-sizing:border-box !important;}
}

@media (min-width:901px){
  .nav-left{flex:0 0 auto}
  .nav-center{flex:1;display:flex;justify-content:center}
}

@media screen and (max-width:768px){
  html, body{overflow-x:hidden !important;max-width:100vw !important;width:100% !important;}
  header, main, nav, .products.grid, .products-grid, .modal-content, .product-card, .card{max-width:100vw !important;overflow-x:hidden !important;}
  img, .card img, .product-image{width:auto !important;max-width:100% !important;}
  .products-grid,
  .products.grid{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:minmax(0,1fr) !important;align-items:stretch !important;gap:12px !important;padding:10px !important;width:100% !important;}
  .product-card,
  .products.grid .card{background:#fff !important;border-radius:18px !important;overflow:visible !important;display:flex !important;flex-direction:column !important;justify-content:space-between !important;min-height:0 !important;height:auto !important;padding:14px !important;gap:10px !important;box-shadow:0 16px 30px rgba(11,17,32,0.08) !important;}
  .product-image,
  .product-card img,
  .card img{width:100% !important;aspect-ratio:4/3 !important;height:150px !important;object-fit:cover !important;display:block !important;border-radius:18px !important;}
  .order-grid{grid-template-columns:1fr !important;}
  .order-hero p{max-width:100% !important;}
  .order-price{min-width:0 !important;}
  .title,
  .product-title,
  .product-name{font-size:13px !important;line-height:1.35 !important;font-weight:600 !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;text-overflow:ellipsis !important;min-height:40px !important;margin-top:4px !important;}
  .product-price,
  .price{font-size:13px !important;font-weight:700 !important;margin-top:3px !important;white-space:normal !important;display:flex !important;flex-wrap:wrap !important;align-items:flex-start !important;gap:6px !important;}
  .actions,
  .product-buttons{display:flex !important;gap:8px !important;margin-top:8px !important;flex-wrap:wrap !important;}
  .buy-btn,
  .chat-btn,
  .actions button{height:auto !important;min-width:0 !important;font-size:12px !important;border-radius:16px !important;padding:10px 8px !important;flex:1 1 calc(50% - 6px) !important;justify-content:center !important;}
  .rating{font-size:12px !important;}
  .specs{max-height:48px !important;overflow:hidden !important;}
  .specs .chip{font-size:11px !important;padding:5px 8px !important;white-space:nowrap !important;max-width:100% !important;text-overflow:ellipsis !important;overflow:hidden !important;display:inline-block !important;}
  .product-card *{max-width:100% !important;word-break:break-word !important;}
  .products.grid .card .badge,
  .product-card .badge{position:absolute !important;left:10px !important;top:10px !important;padding:4px 8px !important;font-size:10px !important;border-radius:12px !important;letter-spacing:0.03em !important;box-shadow:0 4px 12px rgba(11,17,32,0.08) !important;max-width:calc(100% - 20px) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;z-index:10 !important;}
  .products.grid .card .badge.badge-promo,
  .product-card .badge.badge-promo{background:#dc2626 !important;}
  .modal-content{max-width:100% !important;padding:12px !important;margin:0 10px !important;}
  .main-image{height:220px !important;}
  .card{padding:16px !important;gap:12px !important;}
  .card .meta{gap:8px !important;}
  .card .title, .title, .product-title{font-size:13px !important;line-height:1.35 !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;line-clamp:2 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:normal !important;word-break:normal !important;overflow-wrap:normal !important;hyphens:none !important;height:auto !important;min-height:44px !important;}
  .actions{gap:8px !important;}
  .products.grid .card{align-self:stretch !important;}
  .bottom-nav{display:none !important;}
}

@media screen and (max-width:768px){
  .wa-order-modal{
    padding:6vh 0 16px !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }
  .wa-modal-content{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border-radius:22px 22px 0 0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    padding:0 !important;
  }
  .wa-modal-content .order-card{
    padding:20px 16px 24px !important;
    max-width:100% !important;
  }
  .wa-order-modal .modal-content{
    margin:0 !important;
  }
}