/* ============================================================
   DubaiTime — Mobile polish   (v2)

   LOAD ORDER ZAROORI HAI: ye file header.php mein
   <?= $DT_HEAD ?? '' ?> ke BAAD aani chahiye, theme.css ke
   baad nahi. Page ki apni <style> $DT_HEAD se aati hai, aur
   agar ye pehle load hui to .co-form input jaise selectors
   is se jeet jayenge.
   ============================================================ */

/* ---------- iOS zoom fix ----------
   iPhone kisi input par focus hote hi poora page zoom kar deta hai
   agar font-size 16px se kam ho — user ko phir pinch kar ke wapas
   aana parta hai. Checkout par ye har field pe hota hai.

   Bare `input` selector kaafi nahi tha: .co-form input aur
   .coupon input ki specificity zyada hai. Is liye unhe naam se
   likha hai. Naya form kahin add karo to yahan bhi line barha dena. */
@media (max-width: 820px) {
  input, select, textarea,
  .co-form input, .co-form select, .co-form textarea,
  .coupon input { font-size: 16px; }
}

/* ---------- Tablet / bara phone ---------- */
@media (max-width: 900px) {
  :root { --nav-h: 72px; }          /* 96px desktop, thora chhota mobile par */
  .pad    { padding: clamp(3rem, 8vw, 4.5rem) 0; }
  .pad-sm { padding: clamp(2.2rem, 5vw, 3rem) 0; }
  .sec-head { margin-bottom: 2rem; }
}

/* ---------- Cart & checkout (820px par layout collapse hota hai) ---------- */
@media (max-width: 820px) {

  /* Grid ek column ho chuki hai, to sticky ka koi faida nahi —
     summary ab sabse aakhir mein hai. Sticky rakhne se sirf
     scroll anchoring ajeeb hoti hai. */
  .summary, .co-summary { position: static; }

  /* thead chhup jata hai (cart.php line 42), to Total ka number
     bina label ke tairta hai. Wapis laga dete hain. */
  .crow td:last-child::before {
    content: "Total";
    font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--grey); margin-right: .6rem;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 620px) {
  .grid, .grid.g3 { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }

  /* Search wapis lao. theme.css line 321 isay account ke sath chhupa
     deta hai, lekin shop par search sabse zyada istemal hota hai.
     Account drawer ke andar mojood hai — search kahin nahi tha. */
  .nav-icons button.ic-hide[data-search-open] { display: inline-grid; }

  /* Tap targets. position:relative theme.css se aata hai aur wahi rehna
     chahiye, warna .badge apni jagah se ud jayega.

     36px hai, 44px nahi — 375px screen par chaar icons aur brand ka hisab
     yun banta hai: 4x40 + 3x16 = 208px icons, aur ~140px brand. Kul 348px,
     jabke .wrap ki padding ke baad sirf 335px bachte hain. 13px kam par
     search icon brand ke text par charh jata tha. Chaaron ko 36px aur gap
     ko .55rem karne se ~40px slack ban jaata hai.

     Agar 44px chahiye (Apple/Google ki sifarish), to wishlist ke dil ko
     mobile par chhupa do aur usay drawer menu mein daal do — teen icon
     44px par aaram se aa jayenge. */
  .nav-icons { gap: .55rem; font-size: 1.05rem; }
  .nav-icons a,
  .nav-icons button {
    min-width: 36px; min-height: 36px;
    display: inline-grid; place-items: center;
  }

  /* Header halka karo taake chaar icons aur logo aaram se aa jayen */
  .brand      { gap: .5rem; }
  .brand img  { height: 30px; }
  .brand .txt { font-size: 1.05rem; }
  .nav        { gap: .5rem; }

  /* .btn par white-space:nowrap hai, to lamba label narrow screen
     par bahar nikal jata hai. Padding kam kar ke jagah banai. */
  .btn    { padding: .95rem 1.35rem; font-size: .7rem; letter-spacing: .12em; }
  .btn-sm { padding: .65rem 1rem; }

  /* Card ki padding 40px kha rahi thi — text ke liye jagah bachao */
  .info        { padding: .9rem .9rem 1.15rem; }
  .info .name  { font-size: .9rem; margin: .35rem 0 .55rem; }
  .info .price { font-size: .9rem; }
  .info .foot  { font-size: .58rem; }

  /* Quantity buttons: 26px (drawer) aur 34px (cart page) dono
     ungli ke liye chhote hain. Google/Apple dono 44px kehte hain. */
  .cart-line .qty button  { width: 38px; height: 38px; font-size: 1rem; }
  .cart-line .qty span    { width: 40px; }
  .cart-line img          { width: 60px; height: 60px; }
  .cart-line .rm          { padding: .4rem; font-size: 1rem; }
  .crow .qtybox button    { width: 44px; height: 44px; font-size: 1.1rem; }
  .crow .qtybox span      { width: 44px; }
  .crow .rm               { padding: .5rem 0; font-size: .9rem; }

  /* Product gallery ke thumbs flex hain bina wrap ke, to 6 tasveeron
     par har ek dab kar patli ho jati hai. Scroll behtar hai — poora
     size rehta hai aur ungli se swipe kar sakte ho. */
  .thumbs {
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: .3rem;
    scrollbar-width: none;
  }
  .thumbs::-webkit-scrollbar { display: none; }
  .thumbs button { flex: 0 0 auto; width: 62px; height: 62px; scroll-snap-align: start; }

  /* Add to Cart poori chaurai le — 180px min-width ke sath
     qtybox aur wish-btn ke sath ek line mein thusna parta hai. */
  .buy-row .btn { flex: 1 0 100%; min-width: 0; order: 3; }
  .buy-row      { gap: .7rem; }

  /* WhatsApp FAB thora andar, warna scroll karte waqt ungli tale aata hai */
  .wa { width: 48px; height: 48px; right: 14px; bottom: 14px; font-size: 1.3rem; }

}

/* ---------- Chhota phone (360px aur neeche) ---------- */
@media (max-width: 380px) {
  /* Do columns par har card ~150px ka reh jata hai aur
     "Longines La Grande Classique — Ladies Two-Tone" buri tarah
     wrap hota hai. Ek column mein tasveer bari, naam poora. */
  .grid, .grid.g3   { grid-template-columns: 1fr; }
  .grid .card .shot { aspect-ratio: 4 / 3; }   /* poori chaurai ka square bahut lamba lagta hai */
  .sec-head h2      { font-size: 1.7rem; }
  .pd-price .now    { font-size: 1.6rem; }
}

/* ---------- Landscape phone ---------- */
@media (max-height: 460px) and (orientation: landscape) {
  .grid .card .shot  { aspect-ratio: 16 / 10; }
  .gallery .main     { aspect-ratio: 16 / 10; }
  .page-hero         { padding: 1.2rem 0 1rem; }
  .search-ov         { padding-top: 6vh; }
}


/* ============================================================
   v3 — 10 Aug 2026

   Ye section guess se nahi likha gaya. Site ko headless Chromium
   mein 320 / 360 / 390 / 414px par har page ke liye render kar ke
   horizontal overflow naapa gaya, aur sirf wahi cheezein yahan hain
   jo waqai toot rahi thin — plus teen jagah jinhein audit dekh hi
   nahi sakta tha (neeche wajah likhi hai).

   Load order: ye file header.php mein $DT_HEAD ke BAAD aati hai, is
   liye ye index.php ki apni <style> ko override kar sakti hai. Wahi
   is section ke chalne ki poori wajah hai.
   ============================================================ */

/* ---------- 1. Newsletter form ----------
   MAAPA GAYA: index.php 320, 360 aur 390px — teenon par Subscribe
   button right=394px par khara tha, yani form sikur hi nahi raha tha.

   Wajah classic flexbox bug hai. <input> ka default `size` 20 characters
   hai, aur flex item ka min-width `auto` hota hai — matlab input apni
   intrinsic content width se chhota ho hi nahi sakta. 220px input +
   126px button = 346px, jo 320px screen par 26px bahar. max-width:480px
   yahan kuch nahi karta kyunke masla minimum ka hai, maximum ka nahi.

   min-width:0 se input ko sikurne ki ijazat mil jati hai. */
.subscribe input { min-width: 0; }

@media (max-width: 460px) {
  /* Is se neeche ek line mein dono cheezein thoos'na theek nahi lagta —
     input itna patla ho jata hai ke email likhte waqt sirf 8-10 harf
     nazar aate hain. Upar neeche behtar hai. */
  .subscribe        { flex-direction: column; max-width: 100%; }
  .subscribe input  { padding: .95rem 1.1rem; text-align: center;
                      border-bottom: 1px solid rgba(255,255,255,.25); }
  .subscribe button { padding: .95rem 1.2rem; width: 100%; }
}

/* ---------- 2. Trust row ----------
   MAAPA GAYA: 320px par .t ki chaurai 163px thi, do column = 326px,
   yani 6px bahar. 900px wali media query 2 columns par le aati hai
   lekin padding 1.8rem/1.4rem wahi rehti hai, aur 42px ka icon +
   16px gap + text us jagah mein poora nahi aata.

   Column ek nahi kiya — chaar lambi qatarein scroll barha deti hain.
   Padding aur icon chhota kar ke do column bache hue hain. */
@media (max-width: 460px) {
  .trust .t   { padding: 1.3rem .85rem; gap: .7rem; }
  .trust .ic  { width: 36px; height: 36px; font-size: 1rem; }
  .trust b    { font-size: .78rem; line-height: 1.25; }
  .trust span { font-size: .67rem; line-height: 1.3; }
}
@media (max-width: 330px) {
  /* 320px par do column bhi tang lagte hain — yahan ek hi behtar hai. */
  .trust .wrap                 { grid-template-columns: 1fr; }
  .trust .t                    { border-left: 0 !important; }
  .trust .t:nth-child(2)       { border-top: 1px solid var(--line); }
}

/* ---------- 3. Email verification code boxes ----------
   Audit ne ye nahi pakra kyunke ye step display:none hai jab tak
   verification screen na khule — headless browser ko dikha hi nahi.
   Hisaab se saaf hai: 6 x 46px + 5 x .6rem gap = 326px, aur 320px
   screen par .auth-wrap ki padding ke baad sirf ~270px bachte hain.

   Ye woh screen hai jahan customer verification code daal kar account
   banata hai. Yahan toot'na matlab koi register hi nahi kar sakta. */
@media (max-width: 420px) {
  .code-row       { gap: .4rem; }
  .code-row input { width: 100%; max-width: 46px; min-width: 0;
                    height: 52px; font-size: 1.25rem; }
}
@media (max-width: 340px) {
  .code-row input { height: 46px; font-size: 1.05rem; }
}

/* ---------- 4. Admin payment proofs ----------
   Ye page admin login mangta hai, is liye audit is tak pahunch nahi
   saka. minmax(330px,1fr) ka matlab hai column kabhi bhi 330px se
   chhota nahi hoga — chahe screen 320px ki ho. min() lagane se track
   screen se chhota reh jata hai.

   Aap ye page phone se dekhenge — payment proof aata hai to WhatsApp
   se seedha yahan aana hota hai — is liye ise chalna chahiye. */
@media (max-width: 700px) {
  .adm .grid,
  .grid.adm-grid       { grid-template-columns: 1fr; }
  dl.kv                { grid-template-columns: 1fr; gap: .15rem; }
  dl.kv dt             { font-weight: 600; margin-top: .5rem; }
}

/* ---------- 5. Tables jo phone par fit nahi hoti ----------
   cart.php ki table ko pehle se handle kiya gaya hai (thead chhup jata
   hai). Baqi pages ki tables ke liye ye safety net hai: table apne
   wrapper ke andar side mein scroll ho jati hai, poora page nahi. */
@media (max-width: 820px) {
  .table-wrap,
  .order-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table:not(.cart-table) { min-width: 0; }
}

/* ---------- 6. Drawer aur cart panel ----------
   Dono min() istemal karte hain to overflow nahi hota, lekin 320px par
   86vw = 275px reh jata hai aur cart line ka naam do-teen lafzon mein
   toot'ta hai. Chhoti screen par thora zyada jagah de dete hain. */
@media (max-width: 380px) {
  .drawer      { width: 92vw; }
  .cart-drawer { width: 96vw; }
  .cart-drawer .ch      { padding: 1.1rem 1.1rem; }
  .cart-drawer .cart-foot { padding: 1.1rem; }
}

/* ---------- 7. Tap targets ----------
   Apple aur Google dono 44px kehte hain. Header icons ka hisaab pehle
   se upar (620px block) mein hai — 36px, aur wahan likha hai kyun.
   Ye baqi jagahon ke liye hai jahan jagah ki tangi nahi hai. */
@media (max-width: 820px) {
  .acc-q            { min-height: 52px; padding: 1.1rem 1.2rem; }
  .hero-dots button { height: 8px; width: 34px; }   /* 3px ungli se lagta nahi tha */
  .auth-tabs button { min-height: 48px; }
  .qtybox button, .qty button { touch-action: manipulation; }
}

/* ---------- 8. Lambe alfaz jo layout tor dete hain ----------
   "129.3755.4" jaise reference numbers aur email addresses phone par
   apne container se bahar nikal jate hain. Ye sirf un jagahon par hai
   jahan customer ka likha hua ya supplier ka reference aata hai —
   har jagah lagana headings ko buri tarah tor deta hai. */
@media (max-width: 620px) {
  .pd-title, .info .name, .cart-line b, .crow .prod b,
  .order-ref, .kv dd, .track-box .step b { overflow-wrap: anywhere; }
}

/* ---------- 9. Safe area (iPhone notch / home bar) ----------
   WhatsApp FAB aur bottom bar iPhone ke home indicator ke neeche chale
   jate hain. env() purane browsers par 0 hota hai, is liye nuqsan nahi. */
@supports (padding: env(safe-area-inset-bottom)) {
  .wa { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .cart-drawer .cart-foot { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
}

/* ---------- 10. Landscape phone ----------
   Upar landscape ka ek block pehle se hai. Ye us mein cart aur checkout
   add karta hai — 460px height par sticky summary poori screen kha jata
   hai aur form tak pahunchna mumkin nahi rehta. */
@media (max-height: 500px) and (orientation: landscape) {
  .summary, .co-summary { position: static; }
  .drawer, .cart-drawer { overflow-y: auto; }
}


/* ---------- 11. Touch targets on product cards ----------
   Naapa gaya, andaza nahi. iPhone 390px par:

     shop.php   button.quick   165 x 28px   (font 10.9px)
     index.php  button.sbuy     80 x 27px   (font  9.9px)
     index.php  .sstar          30 x 30px

   Apple aur Google dono 44px kehte hain. Ye woh buttons hain jin
   se customer watch bag mein daalta hai — sabse ahem buttons hain
   poori site ke, aur sabse chhote nikle.

   Sirf touch screens par barhaye gaye hain (pointer:coarse), to
   desktop ka design bilkul waisa hi rehta hai jaisa design kiya
   gaya tha. */
@media (pointer: coarse) and (max-width: 900px) {
  .card .quick, button.quick { min-height: 44px; font-size: .74rem; letter-spacing: .1em; }
  .scard .sbuy, button.sbuy  { min-height: 42px; font-size: .7rem;  letter-spacing: .09em; }
  .sstar, .scard .sstar      { min-width: 40px; min-height: 40px; }

  /* Product ka naam bhi tap hota hai. 25px se chhota hone par
     ungli se product khol'na mushkil ho jata hai. */
  a.sname { display: block; padding: .25rem 0; }

  /* Cart mein quantity ke +/- buttons */
  .qty button, .qtybox button { min-width: 40px; min-height: 40px; }
}

/* ---------- 12. Bohat chhota text ----------
   Kuch jagah body text 11px se neeche tha. iOS Safari 16px se
   chhote input par khud-ba-khud zoom kar deta hai (jo layout tor
   deta hai), aur 11px se neeche parhna mushkil hai — khaas taur
   par un customers ke liye jo watch khareed rahe hain aur aksar
   umar mein bare hote hain. */
@media (max-width: 820px) {
  .card .smeta, .scard .smeta, .pd-meta small { font-size: .7rem; }
  /* Form fields 16px par — is se neeche iOS focus par zoom karta
     hai aur customer ko manually wapas zoom out karna parta hai,
     aksar checkout ke beech mein. */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  textarea, select { font-size: 16px; }
}


/* ---------- 13. Slider dots ka tap area ----------
   Naapa gaya (iPhone 390px):  hero-dots 34x8px,  reel-dots 26x3px.

   Ye jaan boojh kar patli lakeerein hain — motay dots is design mein
   theek nahi lagte. Lekin 3px lambi cheez par ungli lagana tقriban
   namumkin hai.

   Hal: dikhne wali lakeer waisi hi patli rehti hai, magar upar neeche
   ek na-nazar aane wala ::after 44px ka hit area bana deta hai. Yani
   nazar kuch nahi badalta, ungli ko poori jagah mil jati hai. */
@media (pointer: coarse) {
  .hero-dots button,
  .reel-dots button { position: relative; }
  .hero-dots button::after,
  .reel-dots button::after {
    content: "";
    position: absolute;
    left: -6px; right: -6px;
    top: 50%; transform: translateY(-50%);
    height: 44px;
  }
  /* Dots ke darmiyan faasla thora barha diya, warna 44px ke hit area
     ek dusre par charh jate hain aur ghalat dot dab jata hai. */
  .hero-dots { gap: .7rem; }
  .reel-dots { gap: .75rem; }
}


/* ============================================================
   v4 — 11 Aug 2026

   Is round mein teen cheezein hui hain: mail section hata,
   badges bare hue, aur chaar naye policy pages bane. Ye block
   sirf un teenon ke mobile natije sambhalta hai, plus do purani
   cheezein jo pehle chhoot gayi thin.
   ============================================================ */

/* ---------- 14. Global overflow guard ----------
   Ye sab se ahem line hai is file mein aur sab se choti.

   Phone par ek bhi element jo viewport se 1px bahar nikle, poore
   page ko side mein hilne wala bana deta hai — aur user ko lagta
   hai site toot gayi. Masla ye hai ke qusoorwar element dhoondna
   mushkil hai: wo koi lamba product name bhi ho sakta hai, koi
   negative margin, ya kal add hone wala naya section.

   overflow-x:hidden <html> aur <body> DONO par lagana zaroori hai.
   Sirf body par lagane se iOS Safari ise nazarandaz kar deta hai —
   ye Safari ka barson purana bug hai, koi rai nahi.

   position:relative is liye ke bagair iske overflow un elements par
   kaam nahi karta jo position:absolute hain aur jinka containing
   block <html> hai.

   ---- hidden se clip ki taraf ----
   Pehle yahan overflow-x:hidden tha, aur wohi header ko chipakne
   nahi de raha tha.

   Wajah: overflow-x:hidden browser mein ek "scroll container" bana
   deta hai. position:sticky hamesha apne sab se qareeb wale scroll
   container ke andar chipakti hai — page ke saath nahi. To header
   par sticky laga hone ke bawajood wo upar scroll ho kar ghayab ho
   jata tha. CSS mein koi error nahi aata, bas chupchaap kaam karna
   chhor deti hai — isi liye ye masla pakarna mushkil hota hai.

   overflow-x:clip bilkul wohi rukawat lagata hai (kuch bahar nikle
   to kat jata hai) magar scroll container nahi banata. Is liye
   sticky zinda rehti hai. theme.css pehle se clip use karti thi;
   ye file baad mein load hoti hai aur usay hidden se dhaanp rahi
   thi.

   @supports is liye ke clip iOS Safari 16 (2022) se pehle nahi
   chalta. Purane phones par hidden hi rahega — wahan header chipkega
   nahi, magar page side mein hilne se bacha rahega, jo zyada bara
   masla hai. */
html, body { overflow-x: hidden; position: relative; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
body { width: 100%; }

/* max-width:100% har tasveer par — ek bhi bari tasveer poora page
   hila deti hai. height:auto sath is liye ke width girne par
   aspect ratio na bigre. */
img, video, iframe, svg { max-width: 100%; height: auto; }

/* ---------- 15. Trust badges ----------
   theme.css mein ab clamp(118px, 19vw, 260px) hai, to alag mobile
   width ki zaroorat nahi rahi — purani `.badge-shield-img{width:
   min(112px,85%)}` wali line hata di gayi hai warna wo clamp ko
   phone par overrideko kar ke badges dobara chhote kar deti.

   Yahan sirf ye reh gaya hai: teen badges ek row mein hi rehne
   chahiyen. Do-ek ki tooti hui grid bura lagti hai, aur ye badges
   sath mein hi maani rakhte hain — "75 saal + warranty + free
   delivery" ek jumla hai, teen alag baatein nahi. */
@media (max-width: 700px) {
  .badge-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .trust-badges { padding-top: 2.2rem; }
}
@media (max-width: 380px) {
  /* 320px par 19vw = 61px, jo bohat chhota hai. Yahan vw se hat kar
     percentage par aa jate hain: teen badges apni grid track ki
     poori chaurai lete hain, gap kam ho jata hai. */
  .badge-row-3      { gap: .45rem }
  .badge-shield-img { max-width: 100% }
}

/* ---------- 16. SEO copy block ----------
   Homepage ke neeche wala lamba text block. 1.9 ki line-height aur
   .97rem font desktop par khoobsurat hai, phone par ek deewar ban
   jata hai — paanch paragraph bina saans ke. Thora kholna parhne
   layak bana deta hai, aur Google ke Core Web Vitals mein "text
   readability" isi ka naam hai. */
@media (max-width: 620px) {
  .seo-card p        { font-size: .93rem; line-height: 1.75; text-align: left }
  .seo-card h2       { font-size: 1.25rem; line-height: 1.3 }
  .seo-card .links   { font-size: .88rem; line-height: 2.1 }
  /* Collection links ke beech ke pipe "|" wrap hone par line ke
     shuru mein aa jate hain aur ganda lagta hai. */
  .seo-card .links a { display: inline-block }
}

/* ---------- 17. Naye policy pages ----------
   privacy / shipping / warranty / retail — chaaron ek hi .legal
   shell istemal karte hain. Un ka andar ka content phone par theek
   hai, magar do cheezein nahi thin:

     • .w-cols (warranty ka covered/not-covered do column) — 620px
       par ek column ho jata hai, wo page ke apne CSS mein hai.
     • Lambe URLs aur pate .legal p ke andar se bahar nikalte hain. */
@media (max-width: 620px) {
  .legal p, .legal li { overflow-wrap: anywhere }
  .legal h2           { font-size: 1.2rem; margin: 1.6rem 0 .7rem }
  .legal ul           { margin-left: 1rem }
}

/* ---------- 18. Perks bar (header ke bilkul upar) ----------
   Ye pehle se chhoot gayi thi. 3 columns ka grid hai jis mein
   "FREE DELIVERY ALL OVER PAKISTAN" jaisa lamba text hai. 360px par
   teen columns mein har lafz alag line par tootta hai aur bar ki
   height 90px+ ho jati hai — screen ka aik tihai hissa header se
   pehle hi khatam.

   Hal: phone par sitare wala beech ka perk chhupa do (wo sab se kam
   maani rakhta hai) aur baqi do ko chhota kar do. */
@media (max-width: 560px) {
  .perks-row .perk-stars { display: none }
  .perks-row             { gap: .8rem }
  .perks .perk b         { font-size: .6rem; letter-spacing: .04em }
  .perks .perk span      { font-size: .55rem }
}
@media (max-width: 380px) {
  /* Yahan do bhi tang hain — sirf delivery wala rakho, wohi asal
     mein bikwata hai. */
  .perks-row .perk:last-child { display: none }
}

/* ---------- 19. Footer ka naya contact block ----------
   f2-side ab poori chaurai leta hai (footer.php dekho). Tap targets
   pehle se 44px hain. Sirf ye reh gaya: stack hone par contact rows
   aur social icons ke darmiyan saans. */
@media (max-width: 820px) {
  .f2-contact { margin-bottom: 1.2rem }
  .f-social   { gap: .9rem }
  .f-social a { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center }
}