/* ══════════════════════════════════════════════════════════════
   BUY FROM SOFTCITY — stylesheet

   Brand ke rang wahi hain (navy + gold). Jo badla wo dhancha hai:

   1. SHADOW KA SCALE — pehle ek hi shadow (0 12px 40px) har cheez pe
      lagta tha, chhoti si pill pe bhi. 40px ka blur ek chhote chip pe
      amateur lagta hai. Ab teen darje hain aur zyada tar jagah sirf
      1px ka border — jaise asli e-commerce sites par hota hai.

   2. HOVER AUR TRANSITIONS — pehle kuch bhi harkat nahi karta tha.
      Site "mari hui" mehsoos hoti thi.

   3. PRODUCT IMAGE — pehle object-fit: cover tha, jis se mobile ki
      tasveer ke kinare kat jate thay. E-commerce mein ye sab se buri
      ghalti hai: customer ko poora product dikhna chahiye. Ab contain
      hai, neutral background par.

   4. TYPOGRAPHY KA SCALE — pehle 28px, 15px, 13px bay-tarteeb pare thay.

   5. URDU — Nastaliq font aur us ke liye kushada line-height.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --navy: #071833;
  --navy-2: #0c274c;
  --navy-3: #143a6b;
  --gold: #d4af37;
  --gold-2: #f0d78c;

  --ink: #122033;
  --muted: #5b6b80;
  --line: #e6ebf2;
  --bg: #f4f7fb;
  --white: #fff;
  --danger: #c0392b;
  --ok: #1e8e5a;

  /*
   | Shadow ka scale.
   |
   | Usool: jitni cheez upar "uthi hui" lage, utna bara shadow. Ek chip
   | aur ek modal ka shadow ek jaisa nahi ho sakta — wahi pehle ho raha
   | tha aur wahi sab se zyada amateur lagta tha.
   */
  --shadow-xs: 0 1px 2px rgba(7, 24, 51, .06);
  --shadow-sm: 0 2px 8px rgba(7, 24, 51, .06), 0 1px 2px rgba(7, 24, 51, .04);
  --shadow-md: 0 8px 24px rgba(7, 24, 51, .08), 0 2px 6px rgba(7, 24, 51, .04);
  --shadow-lg: 0 18px 48px rgba(7, 24, 51, .14);

  /* Purana naam — koi purani class tootay nahi */
  --shadow: var(--shadow-sm);

  /* ── Radius ────────────────────────────────────────────── */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --radius: var(--r-md);

  /* ── Spacing — 4px ke guna mein ────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ── Fonts ─────────────────────────────────────────────── */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /*
   | Urdu — Nastaliq.
   |
   | Jameel Noori pehle, kyunki Pakistan mein bohot se computers pe
   | pehle se laga hota hai. Na mile to Noto Nastaliq Urdu (Google ka,
   | muft, wahi Nastaliq shakal). Tafseel layouts/app.blade.php mein.
   */
  --font-urdu: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu",
               "Jameel Noori Nastaleeq Kasheeda", serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ══ Base ══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/*
 | Focus ring.
 |
 | :focus-visible is liye ke ye sirf keyboard se chalne walon ko dikhe —
 | mouse se click karne pe har button ke gird halqa aa jana bhadda lagta
 | hai. Ye hatana nahi: bina is ke keyboard wale customer ko pata hi nahi
 | chalta ke wo kahan khara hai.
 */
:focus-visible {
  outline: 2px solid var(--navy-3);
  outline-offset: 2px;
  border-radius: 4px;
}

.container-bfs { width: min(1240px, calc(100% - 32px)); margin: 0 auto; }

/* ── Typography ka scale ─────────────────────────────────── */

h1, h2, h3, h4 {
  line-height: 1.2;
  letter-spacing: -.02em;   /* bare matan par ye waqai farq daalta hai */
  font-weight: 800;
  color: var(--navy);
}

h1 { font-size: clamp(28px, 4.4vw, 44px); }
h2 { font-size: clamp(22px, 2.6vw, 30px); }
h3 { font-size: 17px; font-weight: 700; }
h4 { font-size: 15px; font-weight: 700; }

p { margin: 0 0 var(--s-3); }

.muted { color: var(--muted); font-size: 13.5px; }

.eyebrow {
  color: var(--gold);
  letter-spacing: .16em;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 var(--s-1);
}

/* ── Urdu ────────────────────────────────────────────────── */

/*
 | Nastaliq ki saten dhalwan hoti hain, is liye usay aam matan se kahin
 | zyada jagah chahiye. 1.6 ki line-height mein harf ek doosre se takra
 | jate hain. 2.2 un ke liye theek hai.
 */
[lang="ur"], .urdu, .urdu-seo {
  font-family: var(--font-urdu);
  line-height: 2.2;
  font-size: 1.15em;
  direction: rtl;
  text-align: right;
}

.urdu-seo {
  color: var(--navy);
  border-top: 1px solid var(--line);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
}

/* ══ Topbar ════════════════════════════════════════════════ */

.topbar {
  background: var(--navy);
  color: #c7d6ea;
  font-size: 12.5px;
  padding: var(--s-2) 0;
}
.topbar a { color: var(--gold-2); font-weight: 600; }
.topbar a:hover { color: #fff; }

/* ══ Header ════════════════════════════════════════════════ */

.header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-main, .nav-row, .topbar-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}
.header-main { padding: var(--s-3) 0; }
.topbar-row { flex-wrap: wrap; }

.logo {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(240px, 48vw);
  line-height: 0;
}
.logo img {
  display: block;
  width: auto;
  height: clamp(28px, 5.6vw, 48px);
  max-width: 100%;
  object-fit: contain;
}
.footer .logo, .logo-footer { max-width: min(280px, 100%); margin-bottom: var(--s-3); }
.footer .logo img, .logo-footer img { height: clamp(40px, 8vw, 56px); }

/* ── Search ──────────────────────────────────────────────── */

.search-wrap { flex: 1; position: relative; min-width: 0; }

.search-wrap input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 11px 50px 11px 18px;
  font: inherit;
  font-size: 14.5px;
  background: var(--bg);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.search-wrap input::placeholder { color: #93a3b8; }
.search-wrap input:focus {
  outline: none;
  background: #fff;
  border-color: var(--navy-3);
  box-shadow: 0 0 0 3px rgba(20, 58, 107, .1);
}

.search-wrap button {
  position: absolute; right: 5px; top: 5px;
  border: 0; cursor: pointer;
  background: var(--navy); color: var(--gold);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.search-wrap button:hover { background: var(--navy-3); }
.search-wrap button:active { transform: scale(.94); }

.suggest {
  position: absolute; left: 0; right: 0; top: 52px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: none; overflow: hidden; z-index: 20;
}
.suggest a { display: block; padding: 10px 14px; font-size: 14px; }
.suggest a:hover { background: var(--bg); }

/* ── Header ke icons ─────────────────────────────────────── */

.icon-btn {
  color: var(--navy); font-size: 12.5px; font-weight: 600;
  text-align: center; position: relative; flex: 0 0 auto;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-sm);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.icon-btn:hover { background: var(--bg); color: var(--navy-3); }
.icon-btn i { font-size: 19px; display: block; margin-bottom: 1px; }

.badge-count {
  position: absolute; top: -2px; right: 0;
  background: var(--gold); color: var(--navy);
  font-size: 10px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 99px;
  display: grid; place-items: center;
  border: 2px solid #fff;
}

.nav-row {
  border-top: 1px solid var(--line);
  padding: var(--s-2) 0;
  gap: var(--s-5);
  font-size: 14px;
  font-weight: 600;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-row::-webkit-scrollbar { display: none; }
.nav-row a {
  white-space: nowrap;
  padding: var(--s-1) 0;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav-row a:hover, .nav-row a.active {
  color: var(--navy-3);
  border-bottom-color: var(--gold);
}

/* ══ Buttons ═══════════════════════════════════════════════ */

.btn-gold, .btn-navy, .btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border-radius: 999px;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .14s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), color .18s var(--ease);
}
.btn-gold:active, .btn-navy:active, .btn-line:active { transform: translateY(1px); }

/*
 | Gold button ka gradient hata diya.
 |
 | Do rangon ka flat-se-flat gradient 2015 wala rujhaan hai. Ek saaf
 | rang zyada mehnga lagta hai, aur gold par navy ka matan parhne mein
 | bhi aasan hai.
 */
.btn-gold {
  background: var(--gold);
  color: var(--navy);
  box-shadow: var(--shadow-xs);
}
.btn-gold:hover { background: #c49f2a; box-shadow: var(--shadow-md); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-3); box-shadow: var(--shadow-md); }

.btn-line { background: #fff; border-color: var(--line); color: var(--navy); }
.btn-line:hover { border-color: var(--navy-3); background: var(--bg); }

/* Disabled — "Out of stock" wala button */
.btn-navy:disabled, .btn-gold:disabled, .btn-line:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ══ Hero ══════════════════════════════════════════════════ */

.hero { padding: var(--s-5) 0 var(--s-2); }

.hero-slide {
  min-height: 440px;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  background: var(--navy) center/cover no-repeat;
  color: #fff;
}

/*
 | Hero ka parda.
 |
 | Pehle 90deg ka ek hi gradient tha. Ab doosri taraf se bhi halka parda
 | hai, taake tasveer chahe kaisi bhi ho, matan hamesha parha ja sake.
 | Hero ki tasveer badalne pe matan ka gayab ho jana aam masla hai.
 */
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,24,51,.92) 0%, rgba(7,24,51,.55) 55%, rgba(7,24,51,.25) 100%),
    linear-gradient(180deg, rgba(7,24,51,.1) 0%, rgba(7,24,51,.45) 100%);
}

.hero-copy {
  position: relative; z-index: 1;
  padding: var(--s-8) var(--s-7);
  max-width: 620px;
}
.hero-copy h1, .hero-copy .hero-title {
  font-size: clamp(27px, 4.2vw, 44px);
  line-height: 1.14;
  margin: var(--s-2) 0 var(--s-3);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
}
.hero-copy p:not(.eyebrow) {
  color: #cfdcef;
  font-size: 15.5px;
  margin-bottom: var(--s-5);
  max-width: 48ch;   /* lambi lines parhne mein mushkil hoti hain */
}
.hero-copy .btn-gold, .hero-copy .btn-line { margin-right: var(--s-2); }
.hero-copy .btn-line { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.hero-copy .btn-line:hover { background: rgba(255,255,255,.2); border-color: #fff; }

/* ══ Sections ══════════════════════════════════════════════ */

.section { padding: var(--s-7) 0; }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.section-head h2 { margin: 0; }
.section-head > a {
  color: var(--navy-3); font-weight: 700; font-size: 14px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .18s var(--ease);
}
.section-head > a:hover { border-bottom-color: var(--navy-3); }

/* ══ Category cards ════════════════════════════════════════ */

.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }

.cat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.cat-card img {
  height: 120px; width: 100%;
  object-fit: cover;
  background: var(--bg);
}
.cat-card p {
  margin: 0; padding: var(--s-3);
  font-weight: 700; font-size: 14px; color: var(--navy);
}

/* Category chips ki patti */
.h-scroll {
  display: flex; gap: var(--s-2);
  overflow-x: auto;
  padding: var(--s-1) 0 var(--s-3);
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll .cat-chip {
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600; font-size: 14px;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.h-scroll .cat-chip:hover {
  border-color: var(--navy-3); color: var(--navy-3); background: #fff;
}

/* ══ Product card — sab se ahem hissa ══════════════════════ */

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }

.product-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/*
 | Product ki tasveer — contain, cover nahi.
 |
 | Ye sab se ahem tabdeeli hai. `cover` tasveer ko khana bharne ke liye
 | kaat deta hai: mobile ka upar neeche ka hissa gayab, joote ka agla
 | hissa kata hua. Customer ko poora product dikhna chahiye — wahi to
 | wo khareed raha hai.
 |
 | `contain` ke saath neutral background zaroori hai, warna mukhtalif
 | shakal ki tasveerein bay-tarteeb lagti hain.
 */
.product-card .card-media {
  display: block;
  background: #fff;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.product-card img {
  height: 220px; width: 100%;
  object-fit: contain;
  padding: var(--s-3);
  background: #fff;
  transition: transform .35s var(--ease);
}
.product-card:hover img { transform: scale(1.04); }

.product-card .body {
  padding: var(--s-3) var(--s-4) var(--s-4);
  display: flex; flex-direction: column; gap: 7px;
  flex: 1;
}

.product-card h3 {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  color: var(--ink);

  /*
   | Do line par kaat dein.
   |
   | Pehle min-height:40px tha, jis se chhote naam wale cards mein khali
   | jagah reh jati thi aur lambe naam cards ki oonchai bigaar dete thay.
   | line-clamp har card ko bilkul barabar rakhta hai.
   */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.product-card h3 a:hover { color: var(--navy-3); }

.product-card .muted { font-size: 12.5px; }
.product-card .muted a:hover { color: var(--navy-3); text-decoration: underline; }

.price {
  font-weight: 800;
  font-size: 17px;
  color: var(--navy);
  letter-spacing: -.01em;
}
.old {
  text-decoration: line-through;
  color: #9aa7b8;
  font-weight: 500;
  font-size: 13px;
  margin-left: var(--s-2);
}

/*
 | Discount ka badge.
 |
 | Pehle ye body ke andar tha aur har card mein ek khali span jagah
 | gherta tha. Ab tasveer ke upar hai — jahan customer ki nazar pehle
 | jati hai, aur jahan us ki koi jagah nahi lagti.
 */
.disc {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.stars { color: var(--gold); font-size: 13px; letter-spacing: .5px; }
.stars .muted { letter-spacing: 0; }

.product-card .body form { margin: 0; margin-top: auto; padding-top: var(--s-2); }
.product-card .body form .btn-navy { width: 100%; }
.product-card .body > .btn-navy { width: 100%; margin-top: auto; }

/*
 | Wishlist ka dil — tasveer ke upar, dayein kone mein.
 |
 | Button ek <form> ke andar hai (asli POST hai, JS nahi). Form ko bhi
 | absolute karna zaroori hai: sirf button ko absolute karte to form
 | khud flow mein reh kar card ke upar ek khali qatar bana deta.
 */
.product-card > form {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
  margin: 0; line-height: 0;
}

.product-card .wish {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--danger); font-size: 17px; line-height: 1;
  cursor: pointer; padding: 0;
  box-shadow: var(--shadow-xs);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.product-card .wish:hover { transform: scale(1.1); background: #fff; }

/* Card ke bahar (jaise wishlist page par) saada dil */
.wish { border: 0; background: transparent; color: var(--danger); font-size: 18px; cursor: pointer; }

/* ══ Flash sale ════════════════════════════════════════════ */

.flash-box {
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-6);
}
.flash-box h2 { color: #fff; }

.countdown { display: flex; gap: var(--s-2); }
.countdown b {
  background: var(--gold); color: var(--navy);
  min-width: 56px; padding: 9px;
  border-radius: var(--r-sm);
  text-align: center; display: block;
  font-variant-numeric: tabular-nums;   /* numbers hilte na rahein */
  font-weight: 800;
}

/* ══ Promo blocks ══════════════════════════════════════════ */

.promo, .app-promo {
  border-radius: var(--r-xl); overflow: hidden;
  min-height: 220px; color: #fff;
  background: var(--navy) center/cover no-repeat;
  position: relative;
}
.promo > *, .app-promo > * { position: relative; z-index: 1; padding: var(--s-6); }
.promo::after, .app-promo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,24,51,.82), rgba(7,24,51,.5));
}
.promo h2, .app-promo h2, .promo h3, .app-promo h3 { color: #fff; }

/* ══ Footer ════════════════════════════════════════════════ */

.footer {
  background: var(--navy);
  color: #a9bdd6;
  padding: var(--s-8) 0 var(--s-5);
  margin-top: var(--s-8);
  font-size: 14px;
}
.footer h4 {
  color: #fff;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.footer a {
  color: #a9bdd6; display: block; margin: 7px 0;
  transition: color .18s var(--ease);
}
.footer a:hover { color: var(--gold-2); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); }
.copy {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: var(--s-6); padding-top: var(--s-4);
  font-size: 13px; color: #8da4c2;
}

/* ══ Toast ═════════════════════════════════════════════════ */

.toast-wrap { position: fixed; right: var(--s-4); bottom: 86px; z-index: 80; display: grid; gap: var(--s-2); }
.toast {
  background: var(--navy); color: #fff;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  border-left: 3px solid var(--gold);
  box-shadow: var(--shadow-lg); min-width: 240px;
}

/* ══ Mobile ki neechli patti ═══════════════════════════════ */

.mobile-bottom {
  display: none; position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff; border-top: 1px solid var(--line); z-index: 60;
  grid-template-columns: repeat(5, 1fr);
  padding: var(--s-2) 0 10px; text-align: center; font-size: 11px;
  font-weight: 600;
}
.mobile-bottom a { color: var(--muted); padding: var(--s-1) 0; }
.mobile-bottom a.active { color: var(--navy); }
.mobile-bottom i { font-size: 19px; display: block; }

/* ══ Shop page ═════════════════════════════════════════════ */

.shop-layout { display: grid; grid-template-columns: 264px 1fr; gap: var(--s-5); align-items: start; }

.filters {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: sticky; top: 92px;   /* header ke neeche chipka rahe */
}
.filters h4 { margin-top: var(--s-4); }
.filters h4:first-child { margin-top: 0; }

/* ══ Forms ═════════════════════════════════════════════════ */

.form input, .form select, .form textarea,
.filters input, .filters select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px var(--s-3);
  font: inherit; font-size: 14.5px;
  margin-bottom: var(--s-3);
  background: #fff;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus,
.filters input:focus, .filters select:focus {
  outline: none;
  border-color: var(--navy-3);
  box-shadow: 0 0 0 3px rgba(20, 58, 107, .1);
}
.form label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: var(--s-1); }

.qty { display: flex; align-items: center; gap: var(--s-2); }
.qty button {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.qty button:hover { border-color: var(--navy-3); background: var(--bg); }

/* ══ Tables ════════════════════════════════════════════════ */

.table {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  font-size: 14px;
}
.table th {
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  text-align: left;
}
.table td { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); text-align: left; }
.table tbody tr:hover { background: #fafcff; }

/* ══ Account / dashboard ═══════════════════════════════════ */

.dash { display: grid; grid-template-columns: 248px 1fr; gap: var(--s-5); align-items: start; }

.side {
  background: var(--navy); color: #bdcfe6;
  border-radius: var(--r-lg); padding: var(--s-4);
  position: sticky; top: 92px;
}
.side a {
  display: block; padding: 10px var(--s-3);
  border-radius: var(--r-sm); margin: 3px 0;
  font-size: 14px; font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.side a.active, .side a:hover { background: rgba(212,175,55,.16); color: var(--gold-2); }

.stat {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.stat b { font-size: 26px; display: block; color: var(--navy); letter-spacing: -.02em; }

/* ══ Page hero ═════════════════════════════════════════════ */

.page-hero {
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  color: #fff; border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-7);
  margin: var(--s-4) 0 var(--s-5);
}
.page-hero h1 { color: #fff; margin: 0 0 var(--s-2); }
.page-hero p { color: #cfdcef; margin: 0; }

/* ══ Cart ══════════════════════════════════════════════════ */

.cart-item {
  display: grid; grid-template-columns: 90px 1fr auto;
  gap: var(--s-3); align-items: center;
  background: #fff; border: 1px solid var(--line);
  padding: var(--s-3); border-radius: var(--r-md);
  margin-bottom: var(--s-2);
}
.cart-item img { width: 90px; height: 90px; object-fit: contain; border-radius: var(--r-sm); background: var(--bg); }

/* ══ SEO intro / trust / FAQ ═══════════════════════════════ */

.seo-intro {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s-6) var(--s-7);
}
.seo-intro h2 { margin: 0 0 var(--s-3); }
.seo-intro p { margin: 0 0 var(--s-3); line-height: 1.7; max-width: 76ch; }
.seo-intro a { color: var(--navy-3); font-weight: 600; border-bottom: 1px solid rgba(20,58,107,.25); }
.seo-intro a:hover { border-bottom-color: var(--navy-3); }

.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.trust-grid > * {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.trust-grid h3 { margin: 0 0 var(--s-2); }
.trust-grid p { margin: 0; color: var(--muted); font-size: 14px; }

.city-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.city-pills span {
  background: #fff; border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px;
  font-weight: 600; font-size: 13px;
}

.faq-wrap details {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-2);
  transition: border-color .18s var(--ease);
}
.faq-wrap details[open] { border-color: var(--navy-3); }
.faq-wrap summary {
  font-weight: 700; cursor: pointer; color: var(--navy);
  list-style: none;
}
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary::after {
  content: "+"; float: right;
  font-size: 20px; line-height: 1; color: var(--gold); font-weight: 400;
}
.faq-wrap details[open] summary::after { content: "−"; }
.faq-wrap details p { margin: var(--s-3) 0 0; color: var(--muted); line-height: 1.7; }

/* ══ Flash messages ════════════════════════════════════════ */

.bfs-flash {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  margin: var(--s-4) 0;
  font-weight: 600; font-size: 14px; border: 1px solid;
}
.bfs-flash-ok  { background: #e8f5ee; border-color: #b6dfc8; color: #1b6b45; }
.bfs-flash-err { background: #fdecea; border-color: #f5c2bd; color: #96271a; }

.demo-note {
  background: #fff8e4; border: 1px solid #f0d78c; color: #6b5410;
  padding: 10px var(--s-4); border-radius: var(--r-sm); font-size: 13px;
}

/* ══ Pagination ════════════════════════════════════════════ */

.bfs-pagination { margin: var(--s-6) 0 var(--s-2); }
.bfs-pagination nav div:first-child { display: none; }
.bfs-pagination svg { width: 18px; height: 18px; }

/* ══ Skip link ═════════════════════════════════════════════ */

.skip-link {
  position: absolute; left: -999px; top: var(--s-2); z-index: 200;
  background: var(--gold); color: var(--navy);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); font-weight: 700;
}
.skip-link:focus { left: var(--s-4); }

/* ══════════════════════════════════════════════════════════
   Jin logon ne animation band ki hui hai.

   Ye marzi ki baat nahi — kuch logon ko harkat se chakkar aate hain
   (vestibular disorder). Browser ki setting hum tak aati hai; us ka
   ehtaram karna chahiye.
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover, .cat-card:hover { transform: none; }
  .product-card:hover img { transform: none; }
}