/* ============================================================
   catalogue.css — public site ke apne rules.

   Load ki tarteeb: theme.css (tokens + mushtarka purze)
                 -> catalogue.css (ye file)
                 -> links.css (jo cheezein prototype me <button>
                    thin aur ab <a> hain, un ki shaklein).

   Do usool jo yahan kabhi nahi torhe jate:
     1. Rang hard-code nahi — sab var(--...) se. Warna theme
        badalne par aadhi screen purane rang par reh jati hai.
     2. left/right nahi — inline-start/end. Urdu me page ulta
        chalta hai (dir="rtl") aur seedhi property wahan galat
        taraf ja girti hai.

   links.css baad me aati hai, is liye jo property wahan likhi
   hai (misal: .viewswitch a ka rang) us se yahan larai nahi ki
   gayi — yahan wo cheezein hain jo wahan nahi hain.
   ============================================================ */


/* ============================================================
   0. PAIMANA — jagah aur naap ki seerhi
   ------------------------------------------------------------
   Pehle har jagah mun-mane number the (13px, 18px, 26px, 38px)
   aur isi wajah se har band ka wazan ek jaisa lagta tha: safha
   "saada" nahi, "be-tarteeb" lag raha tha. Ab do seerhiyan hain:
   jagah ke liye --s* aur naap ke liye --t*. Naya rule likhte
   waqt seerhi se number uthana hai, apna ghara hua nahi.

   Ye theme ke tokens badalte nahi — un ke upar sirf apne naam
   rakhte hain, is liye chaaron theme jaise chal rahi thin waise
   hi chalti hain.
   ============================================================ */
:root {
  /* --- Jagah: sab kuch --step (4px) ke goone me --- */
  --s1:  calc(var(--step) * 1);    /*  4px */
  --s2:  calc(var(--step) * 2);    /*  8px */
  --s3:  calc(var(--step) * 3);    /* 12px */
  --s4:  calc(var(--step) * 4);    /* 16px */
  --s5:  calc(var(--step) * 5);    /* 20px */
  --s6:  calc(var(--step) * 6);    /* 24px */
  --s8:  calc(var(--step) * 8);    /* 32px */
  --s10: calc(var(--step) * 10);   /* 40px */
  --s12: calc(var(--step) * 12);   /* 48px */
  --s16: calc(var(--step) * 16);   /* 64px */

  /* --- Naap: card par teen darje saaf nazar aane chahiyen ---
     rate (sab se buland) > naam > brand aur code (sirf pehchaan).
     Pehle teenon qareeb qareeb ek hi naap ke the, is liye aankh
     ko pata hi nahi chalta tha ke pehle kya parhna hai. */
  --t-3xs: 10.5px;   /* badge */
  --t-2xs: 11.5px;   /* upper-case chhote label */
  --t-xs:  12.5px;   /* code, ginti */
  --t-sm:  13.5px;   /* hint, chhota button */
  --t-md:  14.5px;   /* aam matn */
  --t-lg:  15.5px;   /* product ka naam */
  --t-xl:  17px;
  --t-2xl: clamp(20px, 1.05rem + .9vw, 26px);    /* section ka unwan */
  --t-3xl: clamp(27px, 1.5rem + 2.2vw, 46px);    /* hero */
  --t-rate: clamp(21px, 1.05rem + 1.15vw, 28px); /* rate — sab se buland */

  /* Mili-juli tasveerein ek hi qad me — warna grid har qatar par uchalta hai */
  --media-ratio: 4 / 3;

  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Chipki hui patti ka qad — anchor par jump karte waqt itni jagah
     chhorni parti hai. Upar koi aur chipki patti lage to safha sirf
     ye number barha de, baaqi sab khud theek ho jata hai. */
  --stick-h: 92px;

  /* .wrap ka side padding (theme.css me 20 / 16 / 14 par badalta hai).
     Yahan naql is liye rakhi hai ke kuch cheezein (chips ka scroller)
     ulti taraf utni hi bahar nikalti hain — number mel na khaye to
     360px par safha chaura ho kar horizontal scroll de deta hai. */
  --gutter: 20px;
}

html { scroll-padding-top: var(--stick-h); }


/* ============================================================
   1. Upar ki patti
   ============================================================ */
.util { background: var(--ink); color: var(--ground); font-size: var(--t-xs); }
.util .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 42px; flex-wrap: wrap; }
.util a { color: inherit; }
.util a:hover { text-decoration: underline; color: inherit; }
.util-item { display: inline-flex; align-items: center; gap: 7px; }
.util-item svg { width: 15px; height: 15px; flex: none; opacity: .7; }

/* Ye purze pehle <button> the aur ab <a> hain — dono likh diye taake
   kal koi wapas badal de to patti ujarh na jaye. */
.lang-toggle { display: inline-flex; border: 1px solid; border-color: color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; overflow: hidden; }
.lang-toggle button,
.lang-toggle a {
  background: transparent; border: 0; color: inherit;
  padding: 6px 14px; font-size: var(--t-xs); cursor: pointer;
  min-height: 34px; display: inline-flex; align-items: center;
}
.lang-toggle button[aria-pressed="true"],
.lang-toggle button.on,
.lang-toggle a[aria-pressed="true"],
.lang-toggle a.on { background: var(--ground); color: var(--ink); font-weight: 600; }


/* ============================================================
   2. Header
   ============================================================ */
.header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.header .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 76px; }

/* Chipki hui patti zara si aar-paar — neeche ka maal khiskta hua
   jhalakta rehta hai. Sirf wahan jahan blur chalta ho, warna matn
   tasveeron par charh kar parhne laiq nahi rehta. */
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .header {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
  }
}

.brandmark { display: flex; align-items: center; gap: var(--s3); flex: none; }
.brandmark .mark {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
}
/* Logo apni shakal me: unchai Shop details se (--logo-h, <html> par), chaurai logo khud tay
   karta hai — chaura logo square me simat kar chhota nahi hota, square logo square hi rehta hai. */
.brandmark .mark.has-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: var(--logo-h, 42px); max-width: min(260px, 46vw);
  background: var(--surface); border: 1px solid var(--line); padding: 3px;
}
.brandmark .mark img { width: 100%; height: 100%; object-fit: contain; }
.brandmark .mark.has-logo img { width: auto; height: 100%; max-width: 100%; }
/* Shop details: "naam logo ke sath" band (logo me naam pehle se ho). Naam aankh se chhupta
   hai magar screen reader ke liye rehta hai (.vh jaisa); tagline aur beech ka <br> bhi chhupte hain. */
.brandmark.logo-only .name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.brandmark.logo-only .tag,
.brandmark.logo-only br { display: none; }
.brandmark .name { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.15; letter-spacing: -.024em; }
/* Urdu ki 2.05 line-height naam + tagline wale do-qatar ke blok ko 16px uncha kar deti
   thi — header phool jata aur chipka menu us ke neeche ghus jata. */
body[dir="rtl"] .header .brandmark { line-height: 1.3; }
/* Chhota label: naap kam, harfon ka faasla zyada — isi se "label" lagta hai */
.brandmark .tag { font-size: var(--t-3xs); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

.search { flex: 1 1 auto; position: relative; max-width: 520px; }
/* Search 520px par ruk jata hai — WhatsApp ka button kinare par rahe, beech me na latke. */
.header .btn-primary { margin-inline-start: auto; }
.search svg { position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
/* padding-inline khud palat jati hai — Urdu ke liye alag rule ki zaroorat nahi */
.search input {
  width: 100%; min-height: 46px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--raised);
  padding-inline: 45px var(--s4); color: var(--ink);
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.search input:hover { border-color: color-mix(in srgb, var(--ink) 16%, var(--line)); }
.search input:focus { background: var(--surface); }


/* ============================================================
   3. Slider
   ============================================================ */
.slider {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background-color: var(--accent); color: var(--on-accent);
  margin: var(--s6) 0 var(--s2);
  /* Accent ka saada chaukor thoss lagta tha. Do halki tehain us ko
     gehrai deti hain — dono rang token se bante hain, is liye har
     theme me theek baithti hain. */
  background-image:
    radial-gradient(120% 90% at 85% 8%, color-mix(in srgb, var(--on-accent) 14%, transparent), transparent 60%),
    linear-gradient(var(--grad-angle, 135deg), color-mix(in srgb, var(--accent-dark) 80%, transparent), transparent 62%);
}
body[dir="rtl"] .slider { --grad-angle: 225deg; }

.slider-track { display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.slide { flex: 0 0 100%; padding: var(--s12); min-height: 250px; display: flex; flex-direction: column; justify-content: center; gap: var(--s3); }
.slide h2 { font-size: clamp(24px, 1.25rem + 1.9vw, 38px); margin: 0; max-width: 20ch; line-height: 1.12; letter-spacing: -.028em; color: inherit; overflow-wrap: break-word; }
.slide p { margin: 0; font-size: var(--t-xl); opacity: .86; max-width: 48ch; }
.slide .btn { align-self: flex-start; margin-top: var(--s2); background: var(--on-accent); color: var(--accent); border-color: transparent; }
.slide .btn:hover { background: var(--on-accent); color: var(--accent); opacity: .88; }

.slider-nav { position: absolute; inset-block: 0; inset-inline: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s3); pointer-events: none; }
.slider-nav button {
  pointer-events: auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid; border-color: color-mix(in srgb, currentColor 34%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit; cursor: pointer; display: grid; place-items: center;
}
.slider-nav button:hover { background: color-mix(in srgb, currentColor 24%, transparent); }
.slider-nav svg { width: 19px; height: 19px; }
/* Teer ka rukh zubaan ke sath palatna zaroori hai */
body[dir="rtl"] .slider-nav svg { transform: scaleX(-1); }

.slider-dots { position: absolute; inset-inline: 0; bottom: var(--s4); display: flex; gap: var(--s2); justify-content: center; }
.slider-dots button { width: 28px; height: 28px; padding: 0; border: 0; cursor: pointer; background: transparent; display: grid; place-items: center; }
.slider-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, currentColor 40%, transparent); transition: width .2s var(--ease), background-color .2s var(--ease); }
.slider-dots button[aria-current="true"]::before { background: currentColor; width: 24px; border-radius: 999px; }
/* Dots neeche 16px par 28px ke hain — slide ka neeche ka padding (phone par 24-32px)
   un ke liye kam tha aur dots button ke upar aa jate. Teer 44px ke hain aur matn 48px
   se shuru — pichla teer matn dhak leta tha. :has ka wazan neeche ke .slide rules se
   zyada hai, is liye har chaurai par yahi chalta hai. */
.slider:has(.slider-dots) .slide { padding-bottom: 60px; }
@media (min-width: 721px) {
  .slider:has(.slider-nav) .slide { padding-inline: 72px; }
}


/* ============================================================
   4. Hero (slider band ho to)
   ============================================================ */
.hero { padding: var(--s12) 0 var(--s8); }
.hero h1 { font-size: var(--t-3xl); line-height: 1.06; letter-spacing: -.032em; margin: 0 0 var(--s3); max-width: 17ch; text-wrap: balance; overflow-wrap: break-word; }
.hero p { margin: 0; font-size: var(--t-xl); color: var(--muted); max-width: 54ch; text-wrap: pretty; }

.stamp { display: inline-flex; align-items: center; gap: var(--s2); background: var(--warn-soft); color: var(--warn-ink); border-radius: 999px; padding: 6px var(--s3); font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s4); }
.stamp .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.trust { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.trust-item { display: flex; align-items: center; gap: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: var(--s2) var(--s4); font-size: var(--t-md); }
.trust-item svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; }


/* ============================================================
   5. Section
   ------------------------------------------------------------
   Aam band ka wazan kam (24px) — asal jagah products ko milti hai
   (neeche #products dekhein). Pehle har band ka padding barabar tha,
   is liye rate list aur "dukan par aayein" wala band ek hi ahmiyat
   ke lagte the.
   ============================================================ */
.sec { padding: var(--s6) 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.sec-head h2 { font-size: var(--t-2xl); margin: 0; letter-spacing: -.026em; line-height: 1.15; }
.sec-head .hint { font-size: var(--t-sm); color: var(--muted); }


/* ============================================================
   6. Brand ki qatar aur category ki chips
   ============================================================ */
.brands { display: flex; gap: var(--s2); flex-wrap: wrap; }
.brand-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4); max-width: 100%;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font-weight: 600; font-size: var(--t-md); color: var(--ink);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
/* Bohat lamba brand naam 360px ki screen ko chaura kar deta tha — ab kat jata hai */
.brand-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-chip:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); background: var(--raised); }
.brand-chip[aria-pressed="true"],
.brand-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.brand-chip .n { font-weight: 500; font-size: var(--t-xs); opacity: .7; font-variant-numeric: tabular-nums; }

.chips {
  display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s1);
  /* Ungli se khiskane par chip kinare par theek ruk jaye */
  scroll-snap-type: x proximity; scroll-padding-inline: var(--s4);
  overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4); scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; white-space: nowrap; font-size: var(--t-md); font-weight: 500; color: var(--ink);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); background: var(--raised); }
.chip[aria-pressed="true"],
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.chip .count { font-size: var(--t-xs); opacity: .68; font-variant-numeric: tabular-nums; }
/* Mouse wali screen par side me khiskane ka koi aasan raasta nahi (patli scrollbar
   mushkil se pakri jati hai) aur aakhri chip kat jati thi — wahan chips lipat jati hain.
   Ungli wali screen par khiskne wali qatar hi behtar hai. */
@media (hover: hover) and (pointer: fine) {
  .chips { flex-wrap: wrap; overflow-x: visible; }
}

/* Sub-category ki qatar halki rehti hai taake main category se farq saaf rahe */
.subchips { margin-top: var(--s2); }
.subchips .chip { min-height: 40px; padding: 0 var(--s3); font-size: var(--t-sm); background: var(--raised); border-color: transparent; }
.subchips .chip:hover { border-color: var(--line); }
.subchips .chip[aria-pressed="true"],
.subchips .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }


/* ============================================================
   7. Toolbar: nateeja + tarteeb + view switch
   ------------------------------------------------------------
   Neeche baal barabar lakeer — isi se toolbar aur maal ki list do
   alag cheezein lagti hain.
   ============================================================ */
.listbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding-bottom: var(--s3); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line-soft);
}
.listbar .result { font-size: var(--t-md); color: var(--muted); }
/* Filter wale safhe ki sirwar — chhoti, list ke upar; sirf is liye ke safhe ki ek <h1> ho. */
.list-h { font-size: var(--t-2xl); margin: var(--s3) 0 var(--s3); line-height: 1.2; letter-spacing: -.024em; overflow-wrap: anywhere; }
body[dir="rtl"] .list-h { letter-spacing: 0; line-height: 1.6; }
.listbar .result strong { color: var(--ink); font-size: var(--t-xl); font-weight: 700; font-family: var(--font-display); letter-spacing: -.02em; margin-inline-end: 2px; }
.listbar select { min-height: 42px; max-width: 100%; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: var(--t-sm); }
/* Filter hatane ka raasta — sirf filter/search lage safhe par aata hai */
.clear-filters { min-height: 42px; padding: 0 var(--s3); display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.clear-filters:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); background: var(--raised); }
.clear-filters svg { width: 15px; height: 15px; }

.viewswitch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.viewswitch button,
.viewswitch a { border: 0; background: transparent; color: var(--muted); cursor: pointer; min-height: 42px; padding: 0 var(--s3); display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sm); }
.viewswitch button[aria-pressed="true"],
.viewswitch button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.viewswitch svg { width: 16px; height: 16px; }


/* ============================================================
   8. PRODUCTS — grid aur list, dono ek hi markup se
   ------------------------------------------------------------
   Poore safhe me sab se zyada jagah isi ko milti hai: customer
   yahin aaya hai.
   ============================================================ */
#products { padding-bottom: var(--s12); }

.products { display: grid; gap: var(--s6) var(--s4); }
.products[data-view="grid"] { grid-template-columns: repeat(auto-fill, minmax(min(238px, 100%), 1fr)); }
.products[data-view="list"] { grid-template-columns: 1fr; gap: 0; }

.item {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              border-color .18s var(--ease), background-color .18s var(--ease);
}
/* Keyboard se card ke andar aayein to card khud bhi jaag jata hai */
.item:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

/* Border ko aur halka karne ki koshish ki thi (--line-soft), magar white
   theme me surface aur ground dono safed hain — card ghaib ho jata tha.
   Is liye rest par --line hi rehta hai aur "halka pan" hover se aata
   hai: card uthta hai, chillata nahi.
   hover:hover — ungli wali screen par tap ke baad hover chipak jata
   hai, is liye wahan ye chalta hi nahi. */
@media (hover: hover) and (pointer: fine) {
  .products[data-view="grid"] .item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  }
  /* Poore card par hover ho to naam bhi rang badal leta hai — tasveer par
     maus ho tab bhi customer ko dikhe ke card khulta hai. Underline nahi:
     wo sirf seedha naam par aane par aata hai. */
  .item:hover .item-name a { color: var(--accent-text); }
}
/* theme.css har transition band kar deti hai jab user ne animation rok
   rakhi ho — tab card ka uthna "khiskna" nahi, "jhatka" ban jata hai.
   Is liye wahan sirf saya aur border rehte hain. */
@media (prefers-reduced-motion: reduce) {
  .products[data-view="grid"] .item:hover { transform: none; }
}

/* --- Tasveer ki jagah --- */
/* Dukandar ki tasveerein har naap ki hoti hain; aspect-ratio na ho to
   grid ki har qatar alag bulandi par chali jati hai. */
.item-media { position: relative; background: var(--ph-bg); flex: none; min-height: 0; overflow: hidden; }
/* Dukandar ki tasveerein kisi bhi naap ki aati hain. contain is liye ke
   panel ya inverter ka kinara kat jaye to product pehchana nahi jata —
   cover khoobsurat to lagta hai magar yahan galat hai.
   position:absolute — .ph grid hai aur us ki auto qatar me height:100% kabhi hal
   nahi hoti: dabba tasveer ke apne naap ka ban jata tha, aspect-ratio (aur 360px ka
   16:9) be-asar, aur lambi (portrait) tasveer neeche se kat jati thi. */
.item-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--s2); }

/* --- Tasveer ka link ---
   Poori tasveer par phaila hua ek khali anchor. Markup ke andar ghusne ke
   bajaye upar chadha diya hai: badge apni purani jagah par hi rehte hain
   aur .ph ka grid bhi nahi toot-ta. z-index 2 — badge-out (1) ke upar,
   warna "stock khatam" wali chaadar click kha jati hai. */
.item-media .media-link { position: absolute; inset: 0; z-index: 2; }

.badge-new {
  position: absolute; top: var(--s2); inset-inline-start: var(--s2); z-index: 1;
  background: var(--warn-ink); color: var(--surface);
  font-size: var(--t-3xs); font-weight: 700; letter-spacing: .04em;
  padding: 4px var(--s2); border-radius: 999px; font-family: var(--font-body);
}
.badge-out {
  position: absolute; inset: 0; z-index: 1;
  background: color-mix(in srgb, var(--ground) 74%, transparent);
  display: grid; place-items: center; text-align: center; padding: var(--s2);
  font-size: var(--t-2xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-body);
}
/* Tasveer ka rang halka par jaye to "stock khatam" parhne laiq rehta hai */
@supports ((backdrop-filter: saturate(.2)) or (-webkit-backdrop-filter: saturate(.2))) {
  .badge-out { -webkit-backdrop-filter: saturate(.25) blur(1px); backdrop-filter: saturate(.25) blur(1px); }
}

/* --- Card ke andar ka matn ---
   Faasle jaan bujh kar barabar nahi: brand aur naam ek hi cheez ke do
   hisse hain (4px), code us se alag pehchaan hai (8px), aur rate apne
   alag khane me baithta hai (lakeer + 12px). Pehle teenon ke beech 9px
   tha — isi liye card "table ka khana" lagta tha. */
.item-brand {
  font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; font-family: var(--font-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-name {
  --lh-name: 1.34;
  font-size: var(--t-lg); font-weight: 600; line-height: var(--lh-name);
  letter-spacing: -.012em; margin: var(--s1) 0 0;
  overflow-wrap: anywhere;
  /* Do qatar se lamba naam kat jata hai, aur chhota naam bhi do qatar
     ki jagah ghere rehta hai — is liye har card me code aur rate ek hi
     bulandi par aate hain. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2em * var(--lh-name));
}
/* Naam ab link hai, magar neela-lakeer wala link nahi: rang wahi --ink
   rehta hai. "Yahan click hota hai" ka ishara hover/focus par milta hai —
   30 card ki qatar me 30 rangeen sirwar safha shor bana dete hain. */
.item-name a { color: inherit; text-decoration: none; }
.item-name a:hover,
.item-name a:focus-visible { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* --- Specs ki ek qatar ---
   Solar ka customer naam se nahi, hindson se chunta hai (580W, 6kW, 200Ah).
   Ek hi qatar par israr: har card ki bulandi barabar rehti hai, warna do
   spec wala card teen spec wale ke saath seedh me nahi baithta.
   tabular-nums se upar neeche ke hindse ek seedh me girte hain. */
.item-specs {
  margin-top: var(--s1);
  font-size: var(--t-xs); line-height: 1.5; color: var(--muted);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* bdi block me khud ba khud isolate hai, magar ellipsis usi par lagta hai
   jis ke paas overflow ho — is liye dono ko qatar me rakha. */
.item-specs bdi { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.item-sku {
  font-size: var(--t-xs); color: var(--faint); margin-top: var(--s2); line-height: 1.4;
  /* Lambi category ki rah ("Lighting > Ceiling > LED Panel") card ko
     chaura nahi karti — ek qatar me kat jati hai */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Rate: card ki sab se buland cheez ---
   tabular-nums taake qatar me rate ke hindsay seedh me aayein. */
.rate { margin-top: auto; display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
/* 800 (700 nahi): naam ke neeche ab specs ki ek aur qatar aa gayi hai, is
   liye card par matn ka wazan barh gaya — rate ko usi hisab se thora aur
   bhaari karna para, warna wo teen qataron me se ek lagne lagta hai. */
.rate .val {
  font-family: var(--font-display); font-size: var(--t-rate); font-weight: 800;
  line-height: 1.05; letter-spacing: -.028em; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rate .unit { font-size: var(--t-2xs); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-body); }
.rate-ask { margin-top: auto; font-size: var(--t-md); font-weight: 700; color: var(--warn-ink); }

/* --- Warranty ka pill ---
   Solar me dusra sawal hamesha "warranty kitni hai" hota hai — is liye wo
   card par hi hai, detail safhe par chhupa hua nahi. Rang --ok-* ka jorha
   hai: chaaron theme me ye jorha pehle se parhne laiq naapa hua hai, is
   liye apna sabz nahi ghara. Chhota aur thanda — rate se muqabla nahi karta. */
.item-warranty {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; min-width: 0;
  padding: 3px var(--s2); border-radius: 999px;
  background: var(--ok-soft); color: var(--ok-ink);
  font-family: var(--font-body); font-size: var(--t-2xs); font-weight: 700;
  line-height: 1.6; white-space: nowrap;
}
.item-warranty svg { width: 13px; height: 13px; flex: none; opacity: .9; }
.item-warranty bdi { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* --- "Tafseel dekhein" --- */
/* WhatsApp button ka muqabla nahi karna: isi liye ye sirf matn hai, dabba
   nahi. Sauda WhatsApp par hota hai; ye us ke liye hai jo pehle spec parhna
   chahta hai. 32px bulandi — ungli ke liye kaafi, button jitni nahi. */
.item-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 32px; font-size: var(--t-xs); font-weight: 600;
  color: var(--muted); white-space: nowrap;
}
.item-more:hover,
.item-more:focus-visible { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.item-more svg { width: 13px; height: 13px; flex: none; }

/* --- WhatsApp ka button ---
   Pehle har card ke neeche thoss accent ki poori patti thi: 30 card yani
   30 chikhte hue sabz dabbe, aur rate un me daab jata tha. Ab button
   halka hai (wahi jorha jo theme.css ke .t-accent me hai) aur hover ya
   focus par bhar jata hai — rate buland rehta hai, aur button phir bhi
   saaf button lagta hai. */
.wa {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding-inline: var(--s4);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background: var(--accent-soft); color: var(--accent-text);
  font-weight: 600; font-size: var(--t-sm);
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.wa:hover,
.wa:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wa svg { width: 17px; height: 17px; flex: none; }


/* ------------------------------------------------------------
   8a. GRID ki shakl
   ------------------------------------------------------------ */
.products[data-view="grid"] .item { flex-direction: column; }
.products[data-view="grid"] .item-media { aspect-ratio: var(--media-ratio); border-bottom: 1px solid var(--line-soft); }
.products[data-view="grid"] .item-body { padding: var(--s3) var(--s4) var(--s4); display: block; flex: 1 1 auto; min-width: 0; }
/* display:contents — side wale purze grid shakl me apna dabba na banayein,
   card me ghul jayein (rate hamesha card ke neeche chipka rahe) */
.products[data-view="grid"] .item-side { display: contents; }
/* Baal barabar lakeer pehchaan (brand/naam/code) aur sauda (rate) ko alag
   karti hai. Rate margin-top:auto se neeche chipka hai, is liye ek qatar
   ke saare card par ye lakeer bhi ek hi bulandi par aati hai. */
.products[data-view="grid"] .rate,
.products[data-view="grid"] .rate-ask {
  border-top: 1px solid var(--line-soft);
  padding: var(--s3) var(--s4) 0;
}
/* display:contents ki qeemat: warranty aur "tafseel" ab card ke seedhe
   bachche hain, yani item-body ki padding un par nahi lagti — kinare
   yahan hath se dene parte hain.
   align-self:start zaroori hai: flex ka bachcha inline-flex ko blockify
   kar deta hai aur pill poori chaurai kha kar patti ban jata hai. */
.products[data-view="grid"] .item-warranty {
  align-self: start;
  margin: 0 var(--s4) var(--s3);
  /* max-width:100% flex me card ki poori chaurai naapta hai — margin us me
     shamil nahi. Lambi warranty ("25-year performance") tab dono kinaron se
     bahar nikal jati; is liye chaurai me se dono margin khud ghatate hain. */
  max-width: calc(100% - var(--s8));
}
.products[data-view="grid"] .wa { margin: var(--s3) var(--s4) var(--s1); }
.products[data-view="grid"] .item-more { margin: 0 var(--s4) var(--s3); }


/* ------------------------------------------------------------
   8b. LIST ki shakl — ye "rate sheet" hai, card ki qatar nahi
   ------------------------------------------------------------
   Qataren aapas me jurhi hui hain (negative margin se dono border
   ek ho jate hain), ek chhorh kar ek qatar halki rangi hai, aur rate
   hamesha ek hi khane me. Chaure screen par aankh isi tarah qatar ke
   aakhir tak seedhi chalti hai.
   ------------------------------------------------------------ */
.products[data-view="list"] .item { flex-direction: row; align-items: stretch; border-radius: 0; }
.products[data-view="list"] .item + .item { margin-top: -1px; }
.products[data-view="list"] .item:first-child { border-start-start-radius: var(--radius); border-start-end-radius: var(--radius); }
.products[data-view="list"] .item:last-child { border-end-start-radius: var(--radius); border-end-end-radius: var(--radius); }
.products[data-view="list"] .item:nth-child(even) { background: var(--raised); }

.products[data-view="list"] .item-media { width: 104px; align-self: stretch; border-inline-end: 1px solid var(--line-soft); }
/* Itni si chaurai me placeholder ka likha nahi samata — sirf nishan rehta hai.
   :not([class]) is liye ke badge bhi span hain, aur wo yahan chhupne nahi chahiyen. */
.products[data-view="list"] .item-media > span:not([class]) { display: none; }

.products[data-view="list"] .item-body { padding: var(--s3) var(--s4); display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; }
.products[data-view="list"] .item-name { font-size: var(--t-lg); min-height: 0; margin-top: 2px; }
.products[data-view="list"] .item-sku { margin-top: var(--s1); }

.products[data-view="list"] .item-side { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); flex: none; }
/* Rate ka khana: chaurai pakki aur hindsay tabular — is liye upar neeche
   ke saare rate ek hi seedh me girte hain */
.products[data-view="list"] .rate {
  margin-top: 0; flex-direction: column; align-items: flex-end;
  gap: 2px; min-width: 9ch; text-align: end;
}
.products[data-view="list"] .rate-ask { margin-top: 0; text-align: end; min-width: 9ch; }
.products[data-view="list"] .wa { min-width: 128px; }

/* List me qatar chaurai ki tang hai: warranty rate ke pehlu me baithta
   hai (flex:none warna 9ch wale rate ka khana khisak jata hai) aur
   "tafseel" sab se aakhir me. item-body ka min-width:0 pehle se hai, is
   liye jagah kam pare to naam simat-ta hai — qatar bahar nahi nikalti. */
/* 0 1 auto (none nahi): tang qatar me pill khud simat kar ellipsis par
   chala jata hai — rate ka 9ch wala khana apni jagah se nahi hilta. */
.products[data-view="list"] .item-warranty { flex: 0 1 auto; align-self: center; max-width: 16ch; }
.products[data-view="list"] .item-more { flex: none; }
/* Specs naam ke foran neeche — code us ke baad. Bulandi na khaye is liye
   yahan bhi ek hi qatar. */
.products[data-view="list"] .item-specs { margin-top: 3px; }

@media (hover: hover) and (pointer: fine) {
  /* List me card uthta nahi — poori qatar halki si rang jati hai. z-index
     se us ka border saath wali qatar ke neeche nahi chhupta. */
  .products[data-view="list"] .item:hover {
    z-index: 1;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  }
}


/* ------------------------------------------------------------
   8c. Khali nateeja
   ------------------------------------------------------------ */
/* grid-column: poori chaurai le, warna pehle column me simat jata hai */
.empty {
  grid-column: 1 / -1;
  display: grid; place-items: center; gap: var(--s2);
  padding: var(--s16) var(--s5);
  text-align: center; text-wrap: balance; overflow-wrap: anywhere;
  color: var(--muted); font-size: var(--t-md);
  background: var(--surface);
  border: 1px dashed var(--line); border-radius: var(--radius);
}


/* ============================================================
   9. Thok band — sanvi band hai, is liye wazan kam
   ============================================================ */
.band {
  background-color: var(--ink); color: var(--ground);
  background-image: linear-gradient(var(--grad-angle, 135deg), color-mix(in srgb, var(--accent) 24%, transparent), transparent 58%);
  border-radius: var(--radius); padding: var(--s8);
  display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap;
}
body[dir="rtl"] .band { --grad-angle: 225deg; }
.band h2 { font-size: var(--t-2xl); margin: 0 0 var(--s2); color: inherit; letter-spacing: -.026em; overflow-wrap: break-word; }
.band p { margin: 0; opacity: .78; max-width: 52ch; font-size: var(--t-md); }
/* Band ka background ink hai — button ke rang ulte karne parte hain warna ghayab ho jata */
.band .btn-primary { background: var(--ground); color: var(--ink); }
.band .btn-primary:hover { background: var(--ground); color: var(--ink); opacity: .88; }


/* ============================================================
   10. Map
   ============================================================ */
.mapsec { display: grid; grid-template-columns: 340px 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.map-info { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.map-info h2 { font-size: var(--t-xl); margin: 0; letter-spacing: -.02em; }
.map-line { display: flex; gap: var(--s3); font-size: var(--t-md); overflow-wrap: anywhere; }
.map-line svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; margin-top: 2px; }
.map-frame { min-height: 320px; background: var(--raised); position: relative; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; min-height: 320px; }
.map-ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--s3); color: var(--faint); text-align: center; padding: var(--s6); }
.map-ph svg { width: 40px; height: 40px; opacity: .55; }
/* Embed na ho to naqshe ka khaali dabba nahi — pata aur "Raasta dekhein" poori chaurai.
   Button phail kar 1000px ki patti na bane. */
.mapsec.no-map { grid-template-columns: 1fr; }
.mapsec.no-map .map-info > .btn { align-self: flex-start; }


/* ============================================================
   11. Footer
   ============================================================ */
.footer { border-top: 1px solid var(--line); margin-top: var(--s8); padding: var(--s10) 0 var(--s16); }
.footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s8); }
.footer h4 { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 var(--s3); font-weight: 700; font-family: var(--font-body); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-md); }
/* Poora footer sabz linkon se bhara hua shor karta tha — ab matn ki tarah
   parhta hai aur hover par hi jaagta hai */
.footer ul a { color: var(--muted); }
/* Ungli ke liye footer ke link 16px ki patli lakeer the — poori qatar dabne laiq. */
@media (pointer: coarse) {
  .footer ul { gap: 0; }
  .footer ul a { display: inline-flex; align-items: center; min-height: 40px; }
}
.footer ul a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* "Install our app" — footer ke link jaisa hi dikhe, magar button (JS se kaam karta hai). */
.pwa-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--accent-text); cursor: pointer; text-align: start; }
.pwa-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .pwa-link { min-height: 40px; } }
.pwa-help { display: block; margin-top: var(--s1); font-size: var(--t-sm); color: var(--muted); }
.footer .legal { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line-soft); font-size: var(--t-xs); color: var(--muted); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }


/* ============================================================
   11a. "Safha nahi mila" / "Kuch ghalat hua" (NotFound, Error)
   ============================================================ */
.oops { min-height: 100vh; display: grid; place-items: center; padding: var(--s8) 0; }
/* place-items:center wrap ko us ke matn jitna chaura karta hai — lamba request-ID ya dukan
   ka naam 320px par card ko screen se bahar dhakel deta tha. */
.oops > .wrap { width: 100%; min-width: 0; }
.oops-card {
  max-width: 560px; margin: 0 auto; padding: var(--s8) var(--s6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  display: grid; gap: var(--s3); text-align: center; justify-items: center;
}
.oops-card .brandmark { color: var(--ink); text-decoration: none; margin-bottom: var(--s2); }
.oops-card h1 { font-size: var(--t-2xl); margin: 0; line-height: 1.2; letter-spacing: -.024em; }
.oops-card p { margin: 0; color: var(--muted); font-size: var(--t-md); max-width: 44ch; text-wrap: pretty; }
.oops-ur { font-family: var(--font-urdu); line-height: 2; font-size: var(--t-lg); }
.oops-card .search { width: 100%; max-width: none; margin-top: var(--s2); }
.oops-actions { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; margin-top: var(--s2); }
.oops-ref { font-size: var(--t-xs); color: var(--faint); overflow-wrap: anywhere; }
.oops-card .name { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .oops-card { padding: var(--s6) var(--s4); }
  .oops-actions { width: 100%; }
  .oops-actions .btn { flex: 1 1 100%; }
}


/* ============================================================
   12. Mobile bar
   ============================================================ */
/* env(safe-area-inset-bottom) — iPhone ki home-bar button ko na kha jaye */
.mobile-bar {
  display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -18px color-mix(in srgb, var(--ink) 70%, transparent);
  padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));
  gap: var(--s2);
}
.mobile-bar .btn { flex: 1 1 auto; }


/* ============================================================
   13. Urdu (RTL)
   ------------------------------------------------------------
   Nastaliq ke apne taqaze hain: UPPER-CASE aur letter-spacing us par
   kuch banate nahi (ulta harfon ka jorh torh dete hain), aur qatar ki
   bulandi zyada chahiye warna zer-zabar kat jate hain.

   Jin jagahon par humne zabardasti font-body lagaya hua tha wahan Urdu
   Archivo me ja kar kisi bhi system font par gir jati thi — un ko wapas
   Urdu font par le aate hain.
   ============================================================ */
body[dir="rtl"] .item-brand,
body[dir="rtl"] .footer h4,
body[dir="rtl"] .badge-new,
body[dir="rtl"] .badge-out,
body[dir="rtl"] .rate .unit,
body[dir="rtl"] .brandmark .tag,
/* tasveer na ho to us ki jagah likha hua "پروڈکٹ تصویر" */
body[dir="rtl"] .item-media span:not([class]) {
  font-family: var(--font-urdu);
  text-transform: none;
  letter-spacing: 0;
}
body[dir="rtl"] .item-media span:not([class]) { font-size: var(--t-2xs); }
body[dir="rtl"] .item-brand,
body[dir="rtl"] .rate .unit,
body[dir="rtl"] .brandmark .tag { font-size: var(--t-xs); }
body[dir="rtl"] .item-name { --lh-name: 1.85; letter-spacing: 0; }
body[dir="rtl"] .hero h1,
body[dir="rtl"] .slide h2,
body[dir="rtl"] .sec-head h2,
body[dir="rtl"] .band h2 { letter-spacing: 0; line-height: 1.5; }
/* Rate ke hindsay .num (theme.css) se pehle hi seedhe Latin rehte hain —
   yahan sirf qatar ki bulandi qaboo me rakhni hai */
body[dir="rtl"] .rate .val { line-height: 1.2; }

/* "تفصیل دیکھیں" tarjuma hota hai, is liye ise Nastaliq chahiye — aur
   Nastaliq chhote naap me nahi parhi jati, halka sa bara kar diya. */
body[dir="rtl"] .item-more { font-family: var(--font-urdu); font-size: var(--t-sm); line-height: 1.8; }
/* Aage ka teer Urdu me bayen taraf ishara karta hai */
body[dir="rtl"] .item-more svg { transform: scaleX(-1); }

/* Specs aur warranty ki qeematein database me English hi rehti hain
   ("580W", "12 years") — un par Nastaliq zabardasti lagana unhein torh
   deta hai, is liye dono font-body par rehte hain. Sirf itna karna hai
   ke qatar ki bulandi RTL ki 2.05 se wapas aa jaye, warna pill phool jata hai. */
body[dir="rtl"] .item-specs,
body[dir="rtl"] .item-warranty { font-family: var(--font-body); line-height: 1.6; }
/* Block <bdi> ka dir=auto angrezi matn par LTR ho jata hai aur "start" = bayan — Urdu
   card me specs ki qatar ulti taraf chipak jati thi. */
body[dir="rtl"] .item-specs bdi { text-align: right; }
/* Naam par bhi dir="auto" hai (ellipsis sahi taraf) — angrezi naam ka "start" bayan ho jata
   aur naam brand/specs se ulti taraf latakta. Angrezi naam ko Nastaliq wali unchi qatar bhi nahi. */
body[dir="rtl"] .item-name { text-align: right; }
body[dir="rtl"] .item-name:dir(ltr) { --lh-name: 1.34; letter-spacing: -.012em; }
/* Urdu "آج اپ ڈیٹ" 10px ki Nastaliq me parha nahi jata tha. */
body[dir="rtl"] .badge-new { font-size: var(--t-xs); padding: 2px 8px; }


/* ============================================================
   14. Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .mapsec { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  /* Header ab do qatar ka ho jata hai — jump ki jagah barhani parti hai.
     --gutter theme.css ke .wrap padding ke sath chalta hai. */
  :root { --stick-h: 136px; --gutter: 16px; }

  .util .hide-sm { display: none; }
  .header .wrap { flex-wrap: wrap; min-height: 0; padding-top: var(--s3); padding-bottom: var(--s3); gap: var(--s3); }
  /* Sirf header ka search — warna 404 card aur admin ke filter me bhi search sab se
     neeche chala jata tha. */
  .header .search { order: 3; flex-basis: 100%; max-width: none; }
  .header .btn-primary { display: none; }

  .slide { padding: var(--s8) var(--s6); min-height: 210px; }
  .slider-nav { display: none; }
  .hero { padding: var(--s8) 0 var(--s5); }

  .sec { padding: var(--s5) 0; }
  #products { padding-bottom: var(--s8); }

  /* Chips phone par kinare tak chalti hain — beech me ruki hui qatar se
     pata hi nahi chalta ke aur categories bhi hain. Scroller khud apna
     overflow sambhalta hai, is liye safha chaura nahi hota — sharat ye
     hai ke bahar nikalne ka naap --gutter ke barabar rahe. */
  .chips { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

  /* 21 brand phone par 400px ki deewar ban jate the aur maal doosri screen par
     chala jata tha — ab chips ki tarah ek khiskne wali qatar. */
  .brands {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: var(--s1);
  }
  .brands::-webkit-scrollbar { display: none; }
  .brand-chip { flex: none; }
  /* Scroller upar se kaat-ta hai — keyboard focus ka ghera (outline) chapta kat jata tha. */
  .brands { padding-top: var(--s1); margin-top: calc(var(--s1) * -1); }

  /* Sort ka dropdown bhi 16px — warna iPhone tap par zoom (theme.css ka rule yahan
     .listbar select ke apne naap se haar jata tha, ye file baad me load hoti hai). */
  .listbar select { font-size: 16px; }

  /* Footer ke 21 brand ek ke neeche ek — do column kaafi hain. */
  .footer .cols > div:nth-child(3) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }

  .products { gap: var(--s3); }
  .products[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products[data-view="list"] { gap: 0; }
  .products[data-view="grid"] .item-body { padding: var(--s3); }
  .products[data-view="grid"] .rate,
  .products[data-view="grid"] .rate-ask { padding: var(--s2) var(--s3) 0; }
  .products[data-view="grid"] .wa { margin: var(--s2) var(--s3) var(--s1); }
  .products[data-view="grid"] .item-warranty { margin: 0 var(--s3) var(--s2); max-width: calc(100% - var(--s6)); }
  .products[data-view="grid"] .item-more { margin: 0 var(--s3) var(--s2); }

  .products[data-view="list"] .item-media { width: auto; }

  .band { padding: var(--s6); }
  .map-info { padding: var(--s5); }
  .footer .cols { grid-template-columns: 1fr; gap: var(--s6); }
  /* Mobile bar footer ke upar chipki hai — neeche itni jagah chhorna zaroori hai */
  .footer { padding-bottom: 110px; }
  .mobile-bar { display: flex; }
}

/*
 * List view 900px se neeche. Pehle side wala hissa (warranty + rate + WhatsApp +
 * tafseel ≈ 530px) apni jagah se nahi hilta tha aur naam ko 32-85px bachte: "Longi
 * Hi- / MO 5…" ek-ek lafz ki qatar. Ab qatar do manzil ki hai: tasveer bayen, upar
 * naam/specs, neeche rate + WhatsApp + tafseel ek lipatne wali qatar me.
 */
@media (max-width: 900px) {
  .products[data-view="list"] .item { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .products[data-view="list"] .item-media { grid-row: 1 / span 2; width: auto; align-self: start; aspect-ratio: 1; border-inline-end: 0; }
  .products[data-view="list"] .item-body { padding-bottom: var(--s1); }
  .products[data-view="list"] .item-side {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: var(--s2) var(--s3); padding: 0 var(--s3) var(--s3); flex: none;
  }
  .products[data-view="list"] .rate,
  .products[data-view="list"] .rate-ask { order: -1; flex-direction: row; align-items: baseline; min-width: 0; text-align: start; }
  .products[data-view="list"] .item-warranty { max-width: 100%; align-self: center; }
  .products[data-view="list"] .wa { min-width: 0; flex: 1 1 140px; padding-inline: var(--s3); }
}
@media (max-width: 360px) {
  .products[data-view="list"] .item { grid-template-columns: 72px minmax(0, 1fr); }
}
/* Chaure screen par warranty ko jagah hai — "12 yr produ…" pe katne ki zaroorat nahi. */
@media (min-width: 1100px) {
  .products[data-view="list"] .item-warranty { max-width: 40ch; }
}
/* Beech ki chaurai: ek qatar me nahi samati to do qatar me, kate bagair. */
@media (min-width: 901px) and (max-width: 1099px) {
  .products[data-view="list"] .item-warranty,
  .products[data-view="list"] .item-warranty bdi { white-space: normal; }
  .products[data-view="list"] .item-warranty { max-width: 18ch; border-radius: 10px; }
}
/* List ki chhoti tasveer par "UPDATED TODAY" ka pill do qatar me toot kar tasveer dhak leta
   tha (Urdu me poori) — yahan ye tasveer ke neeche ki patli patti. */
.products[data-view="list"] .badge-new {
  inset: auto 0 0 0; border-radius: 0; text-align: center; padding: 2px 4px;
  letter-spacing: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[dir="rtl"] .products[data-view="list"] .badge-new { line-height: 1.9; }
/* Tablet par header me search ko jagah: tagline ("SOLAR · INVERTERS …") chhupa do. */
@media (min-width: 721px) and (max-width: 900px) {
  .brandmark .tag { display: none; }
}

/* ---------- 480px se chhoti screen ---------- */
@media (max-width: 480px) {
  .util .wrap { min-height: 38px; gap: var(--s3); font-size: var(--t-xs); }
  .brandmark .mark { width: 38px; height: 38px; font-size: 17px; }
  /* Phone par bara logo header ko phula deta — admin jitna bhi rakhe, yahan hadd 52px */
  .brandmark .mark.has-logo { width: auto; height: min(var(--logo-h, 42px), 52px); max-width: 48vw; }
  .brandmark .name { font-size: 17px; }
  .slide { padding: var(--s6) var(--s5); min-height: 180px; }
  .slide p { font-size: var(--t-md); }
  .slider { border-radius: var(--radius); margin: var(--s4) 0 var(--s1); }
  .hero p { font-size: var(--t-lg); }
  .trust { gap: var(--s2); }
  .trust-item { padding: var(--s2) var(--s3); font-size: var(--t-sm); }
  .sec { padding: var(--s4) 0; }
  .brands { gap: var(--s2); }
  .brand-chip { padding: 0 var(--s3); font-size: var(--t-sm); }
  .item-name,
  .products[data-view="list"] .item-name { font-size: var(--t-md); }
  .item-sku { font-size: var(--t-2xs); }
  /* Specs (580W, 6kW) aur warranty hi solar ke customer ka faisla hain — 11.5 / 10.5px
     par phone par parhna mushkil tha. Sirf code (pehchaan) chhota rehta hai. */
  .item-specs { font-size: var(--t-xs); }
  .item-warranty { font-size: 12px; padding: 2px 7px; }
  .item-warranty svg { width: 11px; height: 11px; }
  .band { padding: var(--s5); border-radius: var(--radius); }
  .listbar { gap: var(--s2); }
  .map-frame, .map-frame iframe { min-height: 240px; }
  .footer { padding: var(--s8) 0 106px; }
}

/* ---------- 420px: theme.css yahan .wrap ka padding 14px kar deta hai ----------
   Sirf --gutter ka mel — chips is se zyada bahar nikal jayen to 360px par
   safha 4px chaura ho kar dayen-bayen scroll karne lagta hai. */
@media (max-width: 420px) {
  :root { --gutter: 14px; }
}

/* ---------- Bohat chhoti screen (360px aur kam) ---------- */
@media (max-width: 360px) {
  .products[data-view="grid"] { grid-template-columns: 1fr; }
  /* Ek hi column me tasveer poori chaurai le leti hai — thora chapta
     rakho warna pehle product tak pahunchne me do scroll lag jate hain */
  .products[data-view="grid"] .item-media { aspect-ratio: 16 / 9; }
}

/* Landscape phone: chipki hui pattiyan aadhi screen kha jati hain */
@media (max-height: 460px) and (orientation: landscape) {
  :root { --stick-h: 0px; }
  .header { position: static; }
  .mobile-bar { position: static; }
  .footer { padding-bottom: var(--s8); }
}

/*
 * Ungli se chalne wali screens par har cheez par haath aana chahiye:
 * 44px se chhota koi target nahi. Ye block sab se aakhir me hai taake
 * upar ke chhote naap (480px wale) is se na jeet jayein.
 *
 * a[href] jaan bujh kar: links.css is file ke BAAD load hoti hai aur
 * wahan `.viewswitch a { min-height: 42px }` likha hai. Barabar wazan
 * ka selector wahan jeet jata — attribute lagane se wazan barh jata hai.
 */
@media (pointer: coarse) {
  .chip,
  .subchips .chip,
  .brand-chip,
  .wa,
  .viewswitch button,
  .viewswitch a[href],
  /* Matn wala link hai, phir bhi ungli ke liye poora 44px — card par ye
     dusra raasta hai, aur chhooti hui click sab se buri cheez hai. */
  .item-more[href],
  .clear-filters[href],
  .listbar select { min-height: 44px; }
  .lang-toggle button,
  .lang-toggle a[href] { min-height: 40px; }
}