/* =========================================================
   LAPSERO - Responsive Master (mobile / tablet fixes)
   Loaded LAST so it overrides style.css / style2.css / pdp.css
   ========================================================= */
*{min-width:0}
html,body{overflow-x:hidden}
img{max-width:100%;height:auto}
.container{width:100%}

/* ---------- Hamburger (hidden on desktop) ---------- */
.hamb{display:none!important;border:1.5px solid #dde3ec;background:#fff;border-radius:10px;width:42px;height:42px;font-size:19px;color:#13293f;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit;line-height:1}
.hamb.on{background:#13293f;color:#fff;border-color:#13293f}

/* ---------- Big tablets : <=1024px ---------- */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr 1fr;gap:22px;padding:28px 18px}
  .hero-left h1{font-size:40px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .brands{grid-template-columns:repeat(3,1fr)}
  .trust{grid-template-columns:repeat(3,1fr)}
  .why{grid-template-columns:1fr 1fr;gap:22px}
  .review-grid{grid-template-columns:1fr 1fr}
  .q-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px}
  .hero-search-card{max-width:100%}
}

/* ---------- Tablets : <=860px ---------- */
@media(max-width:860px){
  .topbar{font-size:11.5px;line-height:1.5;padding:8px 10px}
  .header-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px}
  .logo{order:1}
  .hamb{order:2;margin-left:auto}
  .h-actions{order:3;margin-left:0;gap:12px}
  .logoimg{height:56px;padding:0;background:transparent}
  .search{order:4;flex:1 1 100%}
  .h-actions .callbtn{display:none}
  /* nav becomes collapsible */
  .hamb{display:inline-flex!important}
  .nav{position:sticky;top:0;z-index:49}
  #mainNav{display:none!important;border-top:1px solid rgba(255,255,255,.08)}
  #mainNav.open{display:block!important}
  #mainNav .nav-in{flex-direction:column!important;gap:0!important;padding:6px 10px;overflow:visible}
  #mainNav .nav-in>a,#mainNav .dd>a{padding:12px 10px;font-size:14px;border-radius:8px}
  #mainNav .dd .menu{position:static!important;box-shadow:none;border-radius:10px;margin:0 0 6px;display:none!important;left:auto;right:auto;min-width:0;transform:none;opacity:1}
  #mainNav .dd.open .menu{display:block!important}
  #mainNav .dd .menu.big{display:none!important;grid-template-columns:1fr 1fr}
  #mainNav .dd.open .menu.big{display:grid!important}
  .hero{grid-template-columns:1fr;gap:20px;padding:24px 14px}
  .hero-left h1{font-size:34px}
  .hero-left p{font-size:14px}
  .hero-btn-primary,.hero-btn-sec{padding:13px 16px;font-size:14px;flex:1;justify-content:center}
  .hero-cta-row{display:flex;gap:10px;flex-wrap:wrap}
  .hero-right{min-height:0}
  .hero-main-img{height:300px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card .img{height:170px}
  .card-body h3{font-size:13px;min-height:38px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .brands{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust-strip{grid-template-columns:repeat(2,1fr)}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr}
  .why img{height:260px}
  .review-grid{grid-template-columns:1fr}
  .hero-filter-bar{padding:16px}
  .hf-grid{grid-template-columns:1fr 1fr}
  .chip-row{overflow-x:auto;padding-bottom:6px;flex-wrap:nowrap}
  .chip-row .chip{flex:0 0 auto}
  .sec-head h2{font-size:24px}
  .cart-drawer{width:min(380px,94vw)}
  .modal{padding:12px}
}

/* ---------- Phones : <=620px ---------- */
@media(max-width:620px){
  .container{padding:0 14px}
  .header-in{padding:10px 14px}
  .h-actions .btn{display:none}
  .h-actions{gap:14px}
  .topbar b{display:inline}
  .hero{padding:20px 14px}
  .hero-left h1{font-size:29px;line-height:1.12}
  .hero-main-img{height:230px}
  .hero-card{padding:12px 14px}
  .hero-offer-badge{font-size:11px}
  .hero-stats{gap:8px}
  .hero-stat-item{padding:8px 6px}
  .hero-search-card{padding:14px}
  .hero-search-card h3{font-size:16px}
  .hf-grid{grid-template-columns:1fr}
  .hf-actions{grid-template-columns:1fr}
  .hf-actions .btn.big{width:100%;justify-content:center}
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;margin:12px -14px;padding-left:14px;padding-right:14px}
  .filters button{flex:0 0 auto;padding:8px 14px;font-size:12.5px}
  .sec{padding:22px 0}
  .sec-head h2{font-size:21px}
  .sec-head p{font-size:13px}
  .cat img{height:110px}
  .brand{padding:16px 10px}
  .brand i{font-size:26px}
  .trust div{padding:12px 8px}
  .trust-strip{grid-template-columns:1fr;gap:10px}
  .q-grid{grid-template-columns:1fr}
  .review-card{padding:16px}
  .why-card{flex-direction:column;text-align:center;padding:18px}
  .why-card i{margin:0 auto}
  .footer-grid{grid-template-columns:1fr;gap:18px}
  .f-bottom{flex-direction:column;text-align:center}
  .pdp-btns{grid-template-columns:1fr}
  .pdp-main{max-height:220px}
  .cart-foot .btn.big{padding:13px;font-size:14px!important}
  .wa{width:52px;height:52px;font-size:26px;right:14px;bottom:14px}
  .card-body{padding:11px}
  .price b{font-size:16px}
  .price s{font-size:12px}
  .card-actions{flex-direction:column}
  .card-actions .btn{width:100%;justify-content:center;padding:10px}
  #mainNav .dd .menu.big{grid-template-columns:1fr}
  .policy-box{padding:0!important}
  .lead-box{padding:18px!important}
}

/* ---------- Very small : <=400px ---------- */
@media(max-width:400px){
  .topbar{font-size:10.5px}
  .hero-left h1{font-size:25px}
  .grid{grid-template-columns:1fr 1fr;gap:9px}
  .card .img{height:138px}
  .card-body h3{font-size:12px;min-height:34px}
  .spec{font-size:10.5px;padding:6px 7px}
  .off,.hot{font-size:10px;padding:4px 7px}
  .brands{grid-template-columns:1fr 1fr;gap:10px}
  .cats{grid-template-columns:1fr 1fr;gap:10px}
  .trust{grid-template-columns:1fr 1fr;gap:10px}
  .hero-stats{grid-template-columns:1fr 1fr}
}