/* Basant Shop — blog.
   These are real pages, not Elementor blocks, so unlike the six section files
   they share one stylesheet instead of each carrying its own copy. Same tokens
   as the home page so the two read as one site. */

:root{
  --night:#12102E; --ink:#16122E; --ink-2:#2A2450; --muted:#6B6483;
  --paper:#FFF6E4; --paper-2:#F6E9CF; --card:#FFFFFF;
  --basanti:#FFC72C; --gulabi:#FF3D81; --ember:#FF5C3A; --gold-d:#B98A00;
  --whatsapp:#25D366; --whatsapp-d:#0F7B3D;
  --line:rgba(22,18,46,.14);
  --measure:68ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--basanti);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.urdu{font-family:"Noto Nastaliq Urdu",serif;direction:rtl;line-height:2}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--basanti);color:#1E1500;
  padding:.6rem 1rem;border-radius:10px;font-weight:800}

/* ===== nav — the home page's bar, on a solid ground ===== */
.nav{position:relative;z-index:30;padding:.9rem 0;color:#fff;background:var(--night)}
.nav .wrap{display:flex;align-items:center;gap:1.2rem}
.nav .brand{display:flex;align-items:center;gap:.5rem;font-weight:900;text-decoration:none;
  font-size:clamp(.85rem,1.5vw,1.1rem);line-height:1;letter-spacing:.03em;text-transform:uppercase}
.nav .brand svg{width:20px;height:28px;flex:none}
.nav nav{margin-left:auto;display:flex;gap:1.5rem;font-weight:500;font-size:.95rem}
.nav nav a{text-decoration:none;opacity:.85;transition:opacity .15s,color .15s}
.nav nav a:hover,.nav nav a[aria-current="page"]{opacity:1;color:var(--basanti)}

/* ===== the strip that says selling is paused ===== */
.paused{background:#2A0A22;color:#FFD9E6;font-size:.88rem;line-height:1.5;
  border-bottom:2px solid rgba(255,199,44,.3)}
.paused .wrap{padding:.7rem 0;display:flex;gap:.7rem;align-items:flex-start}
.paused svg{width:18px;height:18px;flex:none;margin-top:.2rem;color:var(--basanti)}
.paused a{color:var(--basanti);font-weight:700}

/* ===== page head ===== */
.head{position:relative;overflow:hidden;color:#fff;padding:3.6rem 0 3.2rem;
  background:
    radial-gradient(85% 65% at 6% -12%,rgba(255,199,44,.20) 0%,rgba(255,199,44,0) 60%),
    radial-gradient(65% 55% at 97% 2%,rgba(123,63,163,.34) 0%,rgba(123,63,163,0) 58%),
    linear-gradient(168deg,#3A2A7C 0%,#2C2064 36%,#1C1746 68%,#12102E 100%)}
.head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--gulabi) 0%,var(--basanti) 48%,var(--ember) 100%)}
.head .urdu{color:var(--basanti);font-size:1.4rem;margin:0 0 .1rem;text-align:left}
.head h1{margin:0;font-weight:900;letter-spacing:-.02em;line-height:1.05;text-transform:uppercase;
  font-size:clamp(2rem,5.4vw,3.4rem)}
.head h1 em{font-style:normal;color:var(--basanti)}
.head p{margin:.9rem 0 0;max-width:56ch;color:rgba(255,255,255,.88);font-size:1.05rem}

/* ===== post list ===== */
main{padding:3.4rem 0 4rem}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.4rem;
  list-style:none;margin:0;padding:0}
.post-card{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--line);
  border-radius:18px;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.post-card:hover{transform:translateY(-4px);border-color:rgba(255,199,44,.8);
  box-shadow:0 18px 38px rgba(22,18,46,.13)}
.post-card .body{padding:1.3rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.chip{align-self:flex-start;background:rgba(255,61,129,.12);color:#A81F57;border-radius:999px;
  padding:.3rem .75rem;font-size:.7rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.post-card h2{margin:.8rem 0 .5rem;font-size:1.2rem;line-height:1.3;letter-spacing:-.01em;font-weight:800}
.post-card h2 a{text-decoration:none}
.post-card h2 a::after{content:"";position:absolute;inset:0}          /* whole card is the link */
.post-card{position:relative}
.post-card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
.meta{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
  display:flex;gap:.9rem;flex-wrap:wrap;color:var(--muted);font-size:.83rem}
.meta time{font-weight:600}

/* ===== article ===== */
.article{padding:3rem 0 4rem}
.article .wrap{width:min(var(--measure),92vw)}
.article .back{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  color:var(--muted);font-size:.9rem;font-weight:700;margin-bottom:1.6rem}
.article .back:hover{color:var(--ink)}
.article .back svg{width:15px;height:15px}
.article h2{margin:2.4rem 0 .8rem;font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.25;
  letter-spacing:-.015em;font-weight:900}
.article h3{margin:1.8rem 0 .6rem;font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
.article p{margin:0 0 1.15em}
.article ul,.article ol{margin:0 0 1.2em;padding-left:1.3em}
.article li{margin-bottom:.5em}
.article strong{font-weight:700}
.article a{color:var(--ink);font-weight:700;text-decoration-color:var(--gulabi);
  text-underline-offset:3px;text-decoration-thickness:2px}
.lede{font-size:1.12rem;line-height:1.6;color:var(--ink-2)}
.article table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.95rem}
.article th,.article td{text-align:left;padding:.65rem .7rem;border-bottom:1px solid var(--line)}
.article th{font-weight:800;background:var(--paper-2)}
.callout{background:var(--card);border:2px solid var(--line);border-left:5px solid var(--basanti);
  border-radius:14px;padding:1.05rem 1.2rem;margin:0 0 1.5em}
.callout p{margin:0}
.callout p + p{margin-top:.6em}
.callout.warn{border-left-color:var(--gulabi);background:#FFF0F5}

/* ===== closing CTA ===== */
.cta{background:var(--paper-2);border-top:2px solid var(--line);padding:2.6rem 0}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.cta strong{display:block;font-size:1.15rem;letter-spacing:-.01em}
.cta span{display:block;color:var(--muted);font-size:.95rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;
  border-radius:14px;text-decoration:none;font-weight:800;font-size:.98rem;border:2px solid transparent;
  transition:transform .15s,box-shadow .15s}
.btn svg{width:19px;height:19px;flex:none}
.btn-wa{background:var(--whatsapp);color:#06340F;box-shadow:0 5px 0 var(--whatsapp-d)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--whatsapp-d)}
.btn-gold{background:var(--basanti);color:#1E1500;box-shadow:0 5px 0 var(--gold-d)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--gold-d)}

/* ===== footer ===== */
.foot{background:var(--night);color:#fff;padding:2.6rem 0}
.foot .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  font-size:.88rem;color:rgba(255,255,255,.6)}
.foot a{color:rgba(255,255,255,.78);text-decoration:none}
.foot a:hover{color:var(--basanti)}
.foot .links{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem}

@media(max-width:700px){
  body{font-size:16px}
  .head{padding:2.6rem 0 2.3rem}
  main{padding:2.4rem 0 3rem}
  .article{padding:2rem 0 3rem}
  .nav nav{gap:1rem;font-size:.88rem}
  .cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .post-card:hover,.btn:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ── Relaunch additions ───────────────────────────────────────────────
   Breadcrumbs, byline, photographic heroes with srcset, card thumbnails,
   an accordion FAQ that matches the FAQPage schema in the head, related
   reading and a cited source list. */

.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
  font-size:.86rem;color:var(--muted);margin:0 0 1.2rem}
.crumbs a{text-decoration:none;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}

.byline{margin:0 0 2rem;font-size:.88rem;color:var(--muted);font-weight:600;
  letter-spacing:.01em}

.hero-fig{margin:0 0 1.6rem;border-radius:18px;overflow:hidden;
  border:2px solid var(--line);background:var(--night)}
.hero-fig img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.hero-fig figcaption{padding:.75rem 1.05rem;font-size:.85rem;color:var(--muted);
  background:var(--card);border-top:1px solid var(--line)}

.post-card .thumb{display:block;aspect-ratio:1200/630;background:var(--night);
  border-bottom:2px solid var(--line)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}

/* outbound sources are marked rather than left to blend into the body */
.article a[rel~="external"]{text-decoration-thickness:2px;text-underline-offset:3px}
.article a[rel~="external"]::after{content:"↗";font-size:.78em;margin-left:.18em;
  color:var(--muted);text-decoration:none}

.faq-list{margin:2.8rem 0 0}
.faq-list h2{margin-bottom:1rem!important}
details.faq{border:2px solid var(--line);border-radius:14px;background:var(--card);
  margin:0 0 .7rem;overflow:hidden}
details.faq summary{cursor:pointer;list-style:none;padding:1rem 1.15rem;
  font-weight:800;font-size:1.02rem;display:flex;align-items:flex-start;gap:.7rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";flex:none;width:22px;height:22px;border-radius:7px;
  background:var(--basanti);color:#5A1C00;font-weight:900;font-size:1rem;line-height:22px;
  text-align:center;margin-top:.1rem;transition:transform .2s ease}
details.faq[open] summary::before{content:"\2212";transform:rotate(180deg)}
details.faq[open] summary{border-bottom:1px solid var(--line)}
details.faq > div{padding:.95rem 1.15rem 1.1rem;color:var(--muted);line-height:1.65}

.related{margin:2.6rem 0 0;padding:1.5rem 1.6rem 1.7rem;background:var(--paper-2);
  border:2px solid var(--line);border-radius:18px}
.related h2{margin:0 0 .9rem!important;font-size:1.05rem!important;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted)}
.related ul{margin:0;padding:0;list-style:none;display:grid;gap:.75rem}
.related li{padding-left:1.4rem;position:relative}
.related li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;
  border-radius:50%;background:var(--gulabi)}
.related a{font-weight:700;text-decoration-color:rgba(255,61,129,.45);text-underline-offset:3px}
.related span{display:block;color:var(--muted);font-size:.9rem;font-weight:400;line-height:1.5}

.sources{margin:2.2rem 0 0;font-size:.9rem;color:var(--muted)}
.sources h2{font-size:1rem!important;text-transform:uppercase;letter-spacing:.02em;
  margin:0 0 .6rem!important;color:var(--muted)}
.sources ol{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}

@media (max-width:560px){
  .hero-fig{border-radius:14px}
  details.faq summary{font-size:.97rem}
  .related{padding:1.2rem 1.15rem 1.3rem}
}

/* ── Shop block ───────────────────────────────────────────────────────
   Every article ends with a route back to the home page: what we supply
   and how to order it. Deliberately holds no pack names and no prices, so
   it never needs updating when the deals change. */
.shop-cta{margin:2.8rem 0 0;padding:1.6rem 1.7rem 1.75rem;border-radius:20px;
  background:linear-gradient(168deg,#3A2A7C 0%,#2C2064 45%,#1C1746 100%);
  color:#fff;border:2px solid rgba(255,199,44,.32);
  box-shadow:0 20px 44px rgba(9,7,26,.28)}
.shop-cta h2{margin:0 0 .5rem!important;font-size:1.28rem!important;color:#fff!important}
.shop-cta p{margin:0 0 1.15rem;color:rgba(255,246,228,.88);font-size:.98rem;line-height:1.6}
.shop-cta .items{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.2rem;padding:0;list-style:none}
.shop-cta .items li{font-size:.82rem;font-weight:700;letter-spacing:.02em;
  padding:.34rem .72rem;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.shop-cta .row{display:flex;flex-wrap:wrap;gap:.7rem}
.shop-cta a.b{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.35rem;
  border-radius:13px;text-decoration:none;font-weight:800;font-size:.97rem;
  transition:transform .15s ease,box-shadow .15s ease}
.shop-cta a.gold{background:var(--basanti);color:#1E1500;box-shadow:0 5px 0 #B98A00}
.shop-cta a.gold:hover{transform:translateY(-2px);box-shadow:0 7px 0 #B98A00}
.shop-cta a.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.34)}
.shop-cta a.ghost:hover{border-color:var(--basanti);color:var(--basanti)}
.shop-cta .note{margin:1rem 0 0;font-size:.85rem;color:rgba(255,246,228,.62)}
.shop-cta .note a{color:var(--basanti)}
@media (max-width:560px){
  .shop-cta{padding:1.3rem 1.2rem 1.4rem}
  .shop-cta .row a.b{flex:1 1 100%;justify-content:center}
}