/* Mobile first adjustments */
html, body{width:100%;max-width:100vw;overflow-x:hidden}
body{font-size:14px}
.searchbar{min-width:unset;width:100%}
@media (max-width:900px){
  .navbar.glass{
    padding:8px 10px;
    background:url("../images/navbar.png") center center no-repeat;
    background-size:auto 100%;
    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}
  .nav-center{flex:1 1 100%;margin:0;order:2}
  .nav-right{display:flex;align-items:center;gap:10px;order:1}
  .searchbar{
    width:min(100%,200px);
    max-width:200px;
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(241,245,249,0.9);
    box-shadow:0 8px 20px rgba(11,17,32,0.08);
    padding:8px 10px;
  }
  .hero{padding:12px 10px 8px}
  .hero-slide{min-height:300px}
  .hero-content{max-width:none;padding:22px 18px}
  .hero-content h1{font-size:32px}
  .document-banner{padding:16px 14px}
  .document-banner__inner{min-height:260px}
  .document-banner__text{left:18px;bottom:18px;max-width:65%}
  .document-banner__title{font-size:1.15rem}
  .document-banner__caption{padding:12px 16px;font-size:14px}
  .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}
  .searchbar{padding:10px 12px}
  .icon-btn{padding:8px;font-size:16px}
  .hero{padding:12px 10px 8px}
  .hero-slide{min-height:300px}
  .hero-slide .overlay{display:none !important}
  .hero-content{padding:16px 12px;max-width:calc(100% - 24px)}
  .document-banner{padding:14px 12px}
  .document-banner__inner{padding:14px;min-height:220px}
  .document-banner__text{left:14px;bottom:14px;max-width:70%}
  .document-banner__title{font-size:1rem}
  .document-banner__caption{padding:10px 14px;font-size:13px}
  .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}
  .hero-nav-btn{width:34px;height:34px;font-size:18px}
  .bottom-nav{display:none !important}
}

@media (max-width:768px){
  html, body{overflow-x:hidden;max-width:100vw}
  .navbar.glass{padding:8px 10px}
  .nav-center{order:2;width:100%;margin:0}
  .nav-right{order:1}
  .searchbar{width:min(100%,180px);max-width:180px;padding:8px 10px;}
  .hero-slide{min-height:260px}
  .hero-content{padding:16px 14px;max-width:calc(100% - 28px)}
  .hero-content h1{font-size:26px}
  .hero{padding:12px 10px 8px}
  .section{padding:14px 10px}
  .products.grid, .product-grid{display:grid !important;grid-template-columns:repeat(2,minmax(0,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}
  .document-banner{padding:12px 10px}
  .document-banner__inner{padding:14px;min-height:200px}
  .document-banner__text{left:14px;bottom:14px;max-width:70%}
  .modal-content{padding:12px;max-width:calc(100% - 20px) !important}
  .main-image{height:auto !important;max-height:200px !important;min-height:140px !important}
  .card .meta{gap:8px}
  .bottom-nav{display:none !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;}
  .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;}
  .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;}
  .hero-slide{height:240px !important;}
  .hero-content{padding:18px 20px !important;}
  .hero-content h1{font-size:28px !important;}
  .hero-nav-btn{width:36px;height:36px !important;font-size:20px !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;height:auto !important;min-height:44px !important;}
  .actions{gap:8px !important;}
  .products.grid .card{align-self:stretch !important;}
  .bottom-nav{display:none !important;}
}