/* ══════════════════════════════════════════════════════════════
   Responsive

   Pakistan mein zyada tar khareedari phone se hoti hai, is liye chhoti
   screen pe layout "sukar kar" kaam chalane ki jagah apni tarteeb
   maangta hai.

   Teen daraje:
     ≤1100px   tablet — shop/dashboard ke side panel upar aa jate hain
     ≤991px    chhota tablet — do columns, neeche ki patti
     ≤640px    phone — do columns product, sticky sab khatam
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  /*
   | Side panel yahin se poori chaurai le leta hai.
   |
   | 264px ka filter panel 1024px ki screen pe products ke liye itni kam
   | jagah chhorta hai ke teen cards bhi theek se nahi aate.
   */
  .shop-layout, .dash { grid-template-columns: 1fr; }
  .filters, .side { position: static; }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .cats { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
  .cats, .grid-4, .grid-3, .footer-grid { grid-template-columns: 1fr 1fr; }

  .hero-slide { min-height: 380px; }
  .hero-copy { padding: 40px 28px; }
  .hero-copy p:not(.eyebrow) { margin-bottom: 20px; }

  .hide-mobile { display: none !important; }
  .mobile-bottom { display: grid; }
  body { padding-bottom: 72px; }   /* neechli patti matan na dhanpe */

  .header-main { flex-wrap: wrap; row-gap: 10px; padding: 10px 0; }
  .search-wrap { order: 5; flex-basis: 100%; }
  .logo { max-width: min(200px, 50vw); }
  .nav-row { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }

  .trust-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 32px 0; }
  .seo-intro { padding: 28px; }
  .page-hero { padding: 28px; }
}

@media (max-width: 640px) {
  /*
   | Phone pe product do columns mein rehte hain, ek mein nahi.
   |
   | Ek column mein har card poori screen gher leta hai aur customer ko
   | muqabla karne ke liye bohot scroll karna parta hai. Do columns
   | Pakistan ki har bari e-commerce app ka tareeqa hai.
   */
  .cats, .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  .hero-slide { min-height: 320px; border-radius: 18px; }
  .hero-copy { padding: 28px 20px; }
  .hero-copy .btn-gold, .hero-copy .btn-line {
    margin-right: 6px; padding: 10px 16px; font-size: 13.5px;
  }

  /* Card chhota, magar tasveer phir bhi poori nazar aaye */
  .product-card img { height: 150px; padding: 8px; }
  .product-card .body { padding: 10px 12px 12px; gap: 5px; }
  .product-card h3 { font-size: 13.5px; }
  .price { font-size: 15.5px; }
  .old { font-size: 12px; }
  /* Badge aur dil kinaron ke aur qareeb -- chhoti tasveer par 12px bohot hai */
  .disc, .product-card > form { top: 8px; }
  .disc { left: 8px; font-size: 10px; padding: 3px 7px; }
  .product-card > form { right: 8px; }
  .product-card .wish { width: 30px; height: 30px; font-size: 15px; }
  .btn-navy, .btn-gold, .btn-line { padding: 10px 16px; font-size: 13.5px; }

  .nav-row { display: none; }
  .header-main { padding: 8px 0; gap: 8px; }
  .logo { max-width: min(168px, 52vw); }
  .logo img { height: clamp(26px, 8vw, 36px); }
  .footer .logo, .logo-footer { max-width: min(220px, 100%); }

  .icon-btn { font-size: 0; min-width: 40px; padding: 4px; }
  .icon-btn i { font-size: 18px; }

  .trust-grid { grid-template-columns: 1fr; }
  .seo-intro { padding: 20px; border-radius: 18px; }
  .section { padding: 28px 0; }
  .section-head { margin-bottom: 16px; }
  .flash-box { padding: 20px; border-radius: 18px; }
  .page-hero { padding: 22px; border-radius: 18px; }

  /* Cart — tasveer upar, tafseel neeche */
  .cart-item { grid-template-columns: 72px 1fr; }
  .cart-item img { width: 72px; height: 72px; }

  /*
   | Urdu phone pe thora chhota.
   |
   | Nastaliq ke harf aam font se zyada chaurai lete hain; 1.15em par
   | chhoti screen pe line bohot jaldi toot jati hai.
   */
  [lang="ur"], .urdu, .urdu-seo { font-size: 1.05em; line-height: 2; }

  /* Table chhoti screen pe chaurai mein scroll kare, nichur na jaye */
  .table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 380px) {
  .logo { max-width: 42vw; }
  .logo img { height: 26px; }
  .header-main { gap: 6px; }
  .product-card img { height: 130px; }
  .hero-copy { padding: 22px 16px; }
}