/* ============================================================
   product.css — ek product ke safhe (/p/{slug}) ke apne rules.

   Load ki tarteeb: theme.css -> catalogue.css -> links.css
                 -> nav.css -> product.css (ye file, sab se aakhir)

   Is liye yahan kisi cheez se larai nahi karni parti: jo bhi
   likha hai wo aage nikal jata hai. Magar usool wahi teen hain:

     1. Rang hard-code nahi — sab var(--...). Chaaron theme
        (white, ivory, midnight, bazaar) ek hi markup par chalti hain.
     2. left/right nahi — inline-start/end. Urdu me safha ulta
        chalta hai aur seedhi property ulti taraf ja girti hai.
     3. Naap seerhi se: jagah --s*, matn --t*. Apna ghara hua
        number sirf wahan jahan seerhi me us qad ka koi darja nahi.

   Safhe ka maqsad ek hi hai: Rs 400,000 ka inverter bechne laiq
   dikhna. Us ke liye teen cheezein buland rakhi gayi hain —
   tasveer, warranty ka badge aur rate — aur baqi sab un ke
   neeche darje-ba-darje.
   ============================================================ */


/* ============================================================
   1. Breadcrumb
   ------------------------------------------------------------
   Nishan (›) CSS se aata hai, markup se nahi: RTL me use ulta
   (‹) hona parta hai, aur screen-reader ko wo bakwas sunane ka
   koi faida nahi.
   ============================================================ */
.crumbs {
  padding-block: var(--s4) 0;
  font-size: var(--t-sm);
  color: var(--muted);
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  min-width: 0;
}
.crumbs li { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }
.crumbs li + li::before {
  content: "\203A";              /* › */
  color: var(--faint);
  font-size: var(--t-md);
  line-height: 1;
}
body[dir="rtl"] .crumbs li + li::before { content: "\2039"; }   /* ‹ */

.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Aakhri qadam (product ka apna naam) link nahi — aur lamba naam
   patti ko chaura na kare, is liye ek qatar me kat jata hai.
   flex (block nahi): block par nishan (›) ka faasla khatam ho jata tha aur naam
   apni poori chaurai ke sath alag qatar par gir jata. Katna <bdi> par, li par nahi —
   Urdu me li rtl hai aur angrezi naam ka SHURU kat jata tha, aakhir nahi. */
.crumbs li[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  display: flex;
  flex: 1 1 12ch;
  min-width: 0;
}
.crumbs li[aria-current="page"] bdi {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ============================================================
   2. Do khane — tasveer aur faisla
   ------------------------------------------------------------
   Tasveer thori bari (1.08fr) — solar panel ki tasveer me detail
   hoti hai. minmax(0, …) laazmi hai: bina is ke lambi spec ki
   line khana chaura kar ke safhe ko dayen-bayen scroll de deti hai.
   ============================================================ */
.pdp { padding-top: var(--s5); }

.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
}

/* ---------- Tasveer ---------- */
/* .ph theme.css se aata hai (background, place-items, position:relative)
   — yahan sirf qad aur kinare. Ratio wahi 4:3 jo card par hai, taake
   dukandar ki ek hi tasveer dono jagah bina kate baith jaye. */
.pdp-media {
  aspect-ratio: var(--media-ratio);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* contain, cover nahi: detail par panel ya inverter ka kinara kat
   jana nuqsan hai — customer poora maal dekhna chahta hai. Aas paas
   ki khaali jagah --ph-bg ki hai, is liye jaan bujh kar chhori hui lagti hai. */
/* position:absolute — .ph grid hai, aur grid ki auto qatar me height:100% hal nahi
   hoti: dabba tasveer ke apne naap ka ban jata tha aur lambi (portrait) photo neeche
   se kat jati thi. Seed ki tasveerein 4:3 thin, is liye pehle nazar nahi aaya. Badge
   pehle se absolute + z-index:1 hain, upar hi rehte hain. */
.pdp-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pdp-media.ph svg { width: 54px; height: 54px; }

/* ---------- Dayan khana ---------- */
.pdp-info { display: flex; flex-direction: column; min-width: 0; }

.pdp-brand {
  align-self: flex-start;
  font-size: var(--t-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--accent-text);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.pdp-brand:hover { text-decoration: underline; text-underline-offset: 3px; }

.pdp-title {
  font-size: clamp(23px, 1.15rem + 1.6vw, 36px);
  line-height: 1.14;
  letter-spacing: -.028em;
  margin: var(--s2) 0 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Code aur stock ek hi qatar me — dono "pehchaan" hain, faisla nahi. */
.pdp-ident {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  margin-top: var(--s3);
  font-size: var(--t-xs);
}
.pdp-sku {
  color: var(--muted);
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 4px var(--s2);
  font-family: var(--font-body);
}

.pdp-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  font-size: var(--t-sm);
}
.pdp-stock .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pdp-stock.is-in  { color: var(--ok-ink); }
.pdp-stock.is-out { color: var(--warn-ink); }

/* ---------- Warranty ----------
   Rate se PEHLE, apne alag badge me. Solar me warranty hi wo cheez
   hai jis par bara faisla rukta hai ("12 saal product, 25 saal
   performance") — use sirf specs ki qatar me daal dena us ko
   chhupa dena hai. */
.pdp-warranty {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  padding: var(--s2) var(--s4);
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok-ink);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  max-width: 100%;
}
.pdp-warranty svg { width: 18px; height: 18px; flex: none; }
.pdp-warranty .k {
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  font-family: var(--font-body);
  opacity: .85;
}
.pdp-warranty .v { font-size: var(--t-md); font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Rate ----------
   Safhe ki sab se buland cheez. Card par --t-rate hai; yahan us se
   bara, kyunki yahan muqabla kisi doosre product se nahi hai. */
.pdp-rate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
}
.pdp-rate .val {
  font-family: var(--font-display);
  font-size: clamp(31px, 1.4rem + 2.8vw, 48px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.032em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.pdp-rate .unit {
  font-size: var(--t-sm);
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--font-body);
}

/* Rate chhupa ho to jagah khaali nahi chhorte — "poochh lein" wahi
   wazan le leta hai jo rate ka tha, warna safha adhoora lagta hai. */
.pdp-ask {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--warn-ink);
}

/* ---------- WhatsApp ----------
   Yahan button bhara hua (solid) hai — card par halka rakha gaya tha
   kyunki wahan tees button ek sath chillate the. Is safhe par ek hi
   kaam hai, aur wohi ye hai. */
.pdp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s5);
  min-height: 54px;
  padding-inline: var(--s6);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  font-weight: 700;
  font-size: var(--t-xl);
  text-align: center;
  transition: background-color .15s var(--ease);
}
.pdp-cta:hover,
.pdp-cta:focus-visible { background: var(--accent-dark); color: var(--on-accent); }
.pdp-cta svg { width: 20px; height: 20px; flex: none; }

.pdp-note {
  margin: var(--s3) 0 0;
  font-size: var(--t-xs);
  color: var(--faint);
  text-wrap: pretty;
}


/* ============================================================
   3. Specs — safhe ka dil
   ------------------------------------------------------------
   Do khane ki table. Paragraph nahi, kyunki customer parhta nahi
   — dhoondta hai ("MPPT kitne?"), aur dhoondne ke liye aankh ko
   seedhi qatar chahiye.
   ============================================================ */
.specs-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.specs { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.specs tr + tr { border-top: 1px solid var(--line-soft); }

/* Lambi qadar (misal "N-type TOPCon bifacial, 30 yr linear output")
   khana chaura na kare — anywhere us ko torh deta hai. */
.specs th,
.specs td {
  padding: var(--s3) var(--s5);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.specs th {
  width: 38%;
  font-weight: 600;
  color: var(--muted);
  font-size: var(--t-sm);
  font-family: var(--font-body);
  background: var(--raised);
  border-inline-end: 1px solid var(--line-soft);
}
.specs td { font-weight: 600; color: var(--ink); }

/* Ek hi qatar par do rang badalna nazar ko qatar par tikaye rakhta hai */
.specs tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--raised) 45%, transparent); }

/* Colon ke baghair likhi hui line — poori chaurai, halka wazan */
.specs-wide td {
  background: transparent;
  font-weight: 400;
  color: var(--muted);
}


/* ============================================================
   4. Tafseel
   ============================================================ */
.pdp-desc {
  max-width: 68ch;
  font-size: var(--t-md);
  color: var(--muted);
  text-wrap: pretty;
}
.pdp-desc p { margin: 0 0 var(--s3); }
.pdp-desc p:last-child { margin-bottom: 0; }


/* ============================================================
   5. "Ye bhi dekhein"
   ------------------------------------------------------------
   Card ka markup list wala hi hai, is liye shakl catalogue.css se
   aa rahi hai. Yahan sirf wo do cheezein hain jo list par nahi
   hotin: naam ka link aur wapsi ka link.
   ============================================================ */
.rel .item-name a { color: inherit; }
.rel .item-name a:hover,
.rel .item-name a:focus-visible { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

.rel-back {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-text);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.rel-back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* "Ye bhi dekhein" me hamesha 4 card: tablet par 2×2, chaure par ek qatar — auto-fill
   3 + 1 akela chhor deta tha. */
.rel .products[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) {
  .rel .products[data-view="grid"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ============================================================
   6. Urdu (RTL)
   ------------------------------------------------------------
   Nastaliq par UPPER-CASE aur letter-spacing kuch banate nahi —
   ulta harfon ka jorh torh dete hain. Jin jagahon par humne
   zabardasti font-body lagaya hai wahan Urdu kisi bhi system
   font par gir jati hai, is liye wapas Urdu font par.
   ============================================================ */
body[dir="rtl"] .pdp-brand,
body[dir="rtl"] .pdp-rate .unit,
body[dir="rtl"] .pdp-warranty .k {
  font-family: var(--font-urdu);
  text-transform: none;
  letter-spacing: 0;
}
/* Specs ki keys/qeematein, warranty, tafseel aur naam dukandar ka data hai — aksar
   angrezi. Markup me dir="auto" hai; jo khana angrezi nikle (:dir(ltr)) wo Archivo
   aur normal line-height par, warna Nastaliq ke Latin harf aur 2.05 ki qatar. Urdu
   me likha khana khud Nastaliq me rehta hai. */
body[dir="rtl"] .specs :is(th, td):dir(ltr),
body[dir="rtl"] .pdp-warranty .v:dir(ltr),
body[dir="rtl"] .pdp-desc p:dir(ltr) { font-family: var(--font-body); line-height: 1.55; }
body[dir="rtl"] .specs th:dir(rtl) { font-family: var(--font-urdu); }
body[dir="rtl"] .pdp-title:dir(ltr) { line-height: 1.14; letter-spacing: -.02em; }
/* dir="auto" ki wajah se angrezi khane ka "start" bayan ho jata — Urdu safhe par title
   brand/SKU se ulti taraf aur spec ki qeemat apni key se 700px door ja baithti thi. */
body[dir="rtl"] :is(.pdp-title, .specs th, .specs td) { text-align: right; }
body[dir="rtl"] .pdp-brand,
body[dir="rtl"] .pdp-rate .unit,
body[dir="rtl"] .pdp-warranty .k { font-size: var(--t-xs); }
body[dir="rtl"] .pdp-title { letter-spacing: 0; line-height: 1.6; }
/* Hindsay .num (theme.css) se pehle hi seedhe Latin hain — yahan
   sirf qatar ki bulandi qaboo me rakhni hai. */
body[dir="rtl"] .pdp-rate .val { line-height: 1.25; letter-spacing: 0; }


/* ============================================================
   7. Responsive
   ------------------------------------------------------------
   Phone pehle: 360px par kahin se bhi horizontal scroll nahi
   aana chahiye, aur har chhoone wali cheez 44px se choti nahi.
   ============================================================ */

/* 600-900px (tablet, landscape phone): do khane qaim, sirf faasla kam. Pehle yahan
   bhi ek ke upar ek tha — tasveer poori chaurai le kar rate aur WhatsApp ko pehli
   screen se neeche dhakel deti thi. 600 se neeche ek column. */
@media (max-width: 900px) {
  .pdp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
  .pdp-media { border-radius: var(--radius); }
}
@media (max-width: 599px) {
  .pdp-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .crumbs { padding-block: var(--s3) 0; font-size: var(--t-xs); }
  .pdp { padding-top: var(--s4); }
  .pdp-rate,
  .pdp-ask { margin-top: var(--s4); padding-top: var(--s4); }
  .pdp-cta { margin-top: var(--s4); }
  .specs th, .specs td { padding: var(--s3) var(--s4); }
}

@media (max-width: 480px) {
  /* Table ka unwan wala khana tang screen par 38% me do lafz bhi
     nahi samata — thora aur de do, qadar phir bhi torh kar baith
     jati hai kyunki overflow-wrap: anywhere laga hua hai. */
  .specs th { width: 44%; font-size: var(--t-xs); }
  .specs td { font-size: var(--t-sm); }
  .specs th, .specs td { padding: var(--s2) var(--s3); }
  .pdp-warranty { padding: var(--s2) var(--s3); gap: var(--s1) var(--s2); flex-wrap: wrap; }
  .pdp-desc { font-size: var(--t-sm); }
}

@media (max-width: 380px) {
  /* 320px par "Ask about this on WhatsApp" do qatar me toot jata tha. */
  .pdp-cta { font-size: var(--t-lg); padding-inline: var(--s4); }
}

@media (max-width: 360px) {
  /* Ek hi column me tasveer poori chaurai le leti hai — thora chapta
     rakho warna rate tak pohanchne me do scroll lag jate hain. */
  .pdp-media { aspect-ratio: 16 / 9; }
  .pdp-media.ph svg { width: 40px; height: 40px; }
  .rel .products[data-view="grid"] { grid-template-columns: 1fr; }
}

/*
 * Ungli se chalne wali screens par har cheez par haath aana chahiye.
 * Ye block sab se aakhir me hai taake upar ke chhote naap is se na
 * jeet jayein — bilkul waise hi jaise catalogue.css me hai.
 */
@media (pointer: coarse) {
  .crumbs li a,
  .pdp-brand { min-height: 44px; display: inline-flex; align-items: center; }
  .pdp-cta { min-height: 56px; }
  .rel .item-name a { display: inline-block; padding-block: var(--s2); }
}