/* ===========================================================================
   posplus.pk — static template design system
   Colorful but professional: calm ink/paper neutrals everywhere, colour comes
   from the product accents and the animated hero. No frameworks, no fonts to
   load — system stack, pure CSS.
   =========================================================================== */

:root {
  /* Ink & paper */
  --ink: #0f1c14;
  --ink-soft: #44554a;
  --ink-faint: #94a39a;
  --paper: #f9fbf8;
  --card: #ffffff;
  --line: #e6ece7;

  /* Brand — Pakistan green, with the product colours as the supporting cast */
  --brand: #16a34a;            /* posplus green */
  --brand-deep: #15803d;
  --navy-1: #04130a;           /* hero deep-forest sky */
  --navy-2: #0b2916;

  /* Product accents */
  --hardware: #f59e0b;
  --paint-a: #7c3aed;
  --paint-b: #d946ef;
  --shoes: #b45309;
  --plants: #65a30d;
  --pharmacy: #0d9488;
  --whatsapp: #16a34a;

  --radius: 16px;
  --radius-lg: 24px;
  --shadow-1: 0 1px 2px rgb(16 24 40 / .05), 0 4px 16px rgb(16 24 40 / .06);
  --shadow-2: 0 4px 8px rgb(16 24 40 / .06), 0 16px 40px rgb(16 24 40 / .12);

  --wrap: 1120px;
  --ease: cubic-bezier(.22, .8, .26, .99);
}

/* ---- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
section { scroll-margin-top: 84px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); font-weight: 800; }
.section { padding-block: 88px; }
.section-head { text-align: center; max-width: 640px; margin-inline: auto; }
.section-head p { color: var(--ink-soft); margin: 12px 0 0; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 14px;
}
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--brand); border-radius: 2px; }

/* ---- buttons & chips ----------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 14px; border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 24px rgb(22 163 74 / .35); }
.btn-primary:hover { background: #22c55e; }
.btn-ghost { border-color: rgb(255 255 255 / .28); color: #fff; }
.btn-ghost:hover { border-color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .06); }
.btn-ghost-dark { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-ghost-dark:hover { border-color: var(--ink-faint); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; box-shadow: 0 8px 24px rgb(22 163 74 / .35); }
.btn-whatsapp:hover { background: #15803d; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .92);
  border: 1px solid rgb(255 255 255 / .14);
}
.chip svg { width: 15px; height: 15px; color: #4ade80; }

/* Periodic light-sweep across a chip (the "Made in Pakistan" badge). */
.chip-shine { position: relative; overflow: hidden; border-color: rgb(255 255 255 / .28); }
.chip-shine::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%;
  background: linear-gradient(105deg, transparent 20%, rgb(255 255 255 / .45) 50%, transparent 80%);
  transform: translateX(-160%) skewX(-18deg);
  animation: chipShine 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chipShine {
  0% { transform: translateX(-160%) skewX(-18deg); }
  45%, 100% { transform: translateX(320%) skewX(-18deg); }
}

/* ---- nav ----------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(251 250 248 / .86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.logo { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 10px; }
.logo .word {
  /* One wordmark: gradient-filled letters with a fine darker border stroke. */
  color: var(--brand-deep);
  filter: drop-shadow(0 1px 1.5px rgb(22 163 74 / .3));
  transition: filter .15s;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo .word {
    background: linear-gradient(100deg, #14532d, #16a34a 55%, #4ade80);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgb(20 83 45 / .3);
  }
}
.logo:hover .word { filter: drop-shadow(0 1px 3px rgb(22 163 74 / .5)) brightness(1.08); }
.logo-mark { width: 27px; height: 27px; border-radius: 8px; flex-shrink: 0; box-shadow: 0 2px 6px rgb(22 163 74 / .35); }
.nav-links { display: flex; gap: 20px; margin-left: auto; font-size: .95rem; color: var(--ink-soft); font-weight: 600; }
.nav-links a { transition: color .15s; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
@media (max-width: 1360px) {
  .nav-links { gap: 14px; font-size: .88rem; }
  .nav-links a svg { width: 15px; height: 15px; }
}
.nav-links a svg { width: 16px; height: 16px; color: var(--brand); opacity: .85; transition: opacity .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover svg { opacity: 1; }
.nav .btn { padding: 9px 18px; font-size: .9rem; white-space: nowrap; }
.nav-product {
  /* the current product's name next to the logo — a soft chip in the
     product's own colours (from the page theme), not plain text */
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 5px 14px; border-radius: 999px;
  font-weight: 800; font-size: .85rem; letter-spacing: .01em;
  background: var(--p-chip-bg, #dcfce7); color: var(--p-chip-ink, #166534);
  border: 1px solid var(--p-chip-line, #86efac);
}
.nav-burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-burger svg { width: 26px; height: 26px; }

/* ---- hero ---------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 20% 0%, var(--navy-2), var(--navy-1) 55%);
  color: #fff;
}
.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  pointer-events: none; will-change: transform;
}
.hero-blob.b1 { width: 520px; height: 520px; background: #16a34a; top: -160px; left: -120px; animation: drift1 26s ease-in-out infinite alternate; }
.hero-blob.b2 { width: 460px; height: 460px; background: #0d9488; bottom: -200px; left: 32%; animation: drift2 32s ease-in-out infinite alternate; }
.hero-blob.b3 { width: 420px; height: 420px; background: #f59e0b; top: -80px; right: -140px; opacity: .35; animation: drift3 24s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(90px, 70px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-70px, -60px) scale(.92); } }
@keyframes drift3 { to { transform: translate(-50px, 90px) scale(1.1); } }

.hero-inner {
  position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center; padding-block: 96px 110px;
}
.hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.6rem); font-weight: 800;
}
.hero h1 .accent {
  background: linear-gradient(92deg, #4ade80, #2dd4bf 55%, #fbbf24);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: rgb(255 255 255 / .78); font-size: 1.13rem; max-width: 34rem; margin: 18px 0 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.hero-visual { position: relative; perspective: 1200px; }
.hero-shot {
  border-radius: var(--radius-lg); border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 40px 90px rgb(0 0 0 / .5);
  transform: rotateY(-8deg) rotateX(3deg);
  transition: transform .3s var(--ease);
  will-change: transform;
}
/* Framed panel around the hero screenshot (the reference-page look): a
   tinted, bordered card with the shot inside. Carries the tilt itself. */
.hero-frame {
  border-radius: var(--radius-lg); border: 1px solid rgb(255 255 255 / .16);
  background: rgb(255 255 255 / .07); padding: 12px;
  box-shadow: 0 40px 90px rgb(0 0 0 / .5);
  transform: rotateY(-8deg) rotateX(3deg);
  transition: transform .3s var(--ease);
  will-change: transform;
}
.hero-frame img { border-radius: 14px; display: block; }

/* Demo-video placeholder frame with a play chip. */
.video-frame {
  position: relative; overflow: hidden; max-width: 760px; margin: 48px auto 0;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: #10141c; box-shadow: var(--shadow-2);
}
.video-frame img { opacity: .8; width: 100%; }
.video-frame .play-chip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play-chip span {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgb(0 0 0 / .62); color: #fff; padding: 11px 22px;
  border-radius: 999px; font-weight: 600; font-size: .92rem;
}
.play-chip svg { width: 16px; height: 16px; }
.video-note { text-align: center; font-size: .87rem; color: var(--ink-soft); margin-top: 14px; }

/* Checklist inside the download buy-card. */
.buy-check { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; color: rgb(255 255 255 / .8); }
.buy-check li { display: flex; align-items: center; gap: 9px; }
.buy-check svg { width: 16px; height: 16px; color: #4ade80; flex-shrink: 0; }
.hero-float {
  position: absolute; right: -18px; bottom: -34px; width: 46%;
  border-radius: var(--radius); border: 1px solid rgb(255 255 255 / .2);
  box-shadow: 0 24px 60px rgb(0 0 0 / .55);
  animation: floaty 6s ease-in-out infinite alternate;
}
@keyframes floaty { to { transform: translateY(-14px); } }

/* ---- stats strip --------------------------------------------------------- */

.stats { border-block: 1px solid var(--line); background: var(--card); }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 34px; text-align: center; }
.stat b { display: block; font-size: 2rem; font-weight: 800; color: var(--ink); }
.stat b .unit { font-size: 1.1rem; color: var(--brand); }
.stat span { color: var(--ink-soft); font-size: .92rem; }

/* ---- product cards ------------------------------------------------------- */

.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.product-card {
  --accent: var(--brand);
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.product-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), transparent 85%);
}
.product-card[data-accent="hardware"] { --accent: var(--hardware); }
.product-card[data-accent="paint"] { --accent: var(--paint-b); }
.product-card[data-accent="shoes"] { --accent: var(--shoes); }
.product-card[data-accent="plants"] { --accent: var(--plants); }
.product-card[data-accent="pharmacy"] { --accent: var(--pharmacy); }

.product-shot { aspect-ratio: 16 / 9.6; overflow: hidden; border-bottom: 1px solid var(--line); }
.product-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .5s var(--ease); }
.product-card:hover .product-shot img { transform: scale(1.04); }

.product-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-name { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 800; }
.product-name .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.product-tag { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.product-feats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.product-feats span {
  font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, #fff); color: color-mix(in srgb, var(--accent) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
}
.product-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
.product-actions .btn { flex: 1; justify-content: center; padding: 10px 12px; font-size: .92rem; }
.product-actions .btn-primary { background: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.product-actions .btn-primary:hover { filter: brightness(1.08); background: var(--accent); }

.product-card.soon { opacity: .78; }
.product-card.soon .product-shot {
  display: grid; place-items: center; background:
    repeating-linear-gradient(-45deg, #f4f4f2 0 14px, #fbfaf8 14px 28px);
  color: var(--ink-faint); font-weight: 700;
}
.soon-badge {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}

/* ---- feature grid -------------------------------------------------------- */

.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.feature {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.feature h3 { font-size: 1.02rem; margin-top: 14px; }
.feature p { color: var(--ink-soft); font-size: .9rem; margin: 6px 0 0; }
.ficon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
}
.ficon svg { width: 21px; height: 21px; }
.ficon.t1 { background: #fff7ed; color: #ea580c; }
.ficon.t2 { background: #f5f3ff; color: #7c3aed; }
.ficon.t3 { background: #ecfdf5; color: #059669; }
.ficon.t4 { background: #eff6ff; color: #2563eb; }
.ficon.t5 { background: #fdf2f8; color: #db2777; }
.ficon.t6 { background: #f0fdfa; color: #0d9488; }
.ficon.t7 { background: #fefce8; color: #ca8a04; }
.ficon.t8 { background: #f8fafc; color: #475569; }

/* ---- urdu band ----------------------------------------------------------- */

.urdu-band {
  /* Light counterpoint to the two dark green bands around it. */
  background: linear-gradient(115deg, #f0fdf4, #ecfdf5 55%, #fefce8);
  border-block: 1px solid var(--line);
  color: var(--ink); overflow: hidden; position: relative;
}
.urdu-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-block: 72px; position: relative; }
.urdu-band h2 .ur { color: var(--brand-deep); }
.urdu-sample {
  direction: rtl; font-size: 1.5rem; line-height: 2.1; font-weight: 600;
  background: var(--card); border: 1px solid #bbf7d0;
  border-radius: var(--radius-lg); padding: 26px 30px; box-shadow: var(--shadow-1);
}
.urdu-sample small { display: block; direction: ltr; font-size: .8rem; color: var(--ink-faint); margin-top: 10px; font-weight: 400; }
.urdu-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; color: var(--ink-soft); }
.urdu-points li { display: flex; gap: 10px; align-items: start; }
.urdu-points svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; margin-top: 4px; }

/* ---- steps --------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; counter-reset: step; position: relative; }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; text-align: center; position: relative; box-shadow: var(--shadow-1);
}
.step-num {
  width: 46px; height: 46px; margin-inline: auto; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; color: #fff;
}
.step:nth-child(1) .step-num { background: var(--brand); }
.step:nth-child(2) .step-num { background: var(--paint-a); }
.step:nth-child(3) .step-num { background: var(--hardware); }
.step h3 { margin-top: 16px; font-size: 1.08rem; }
.step p { color: var(--ink-soft); font-size: .92rem; margin: 8px 0 0; }

/* ---- gallery ------------------------------------------------------------- */

.gallery-tabs { display: flex; justify-content: center; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.gallery-tab {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 9px 20px; font-weight: 700; font-size: .92rem; cursor: pointer; color: var(--ink-soft);
  transition: all .18s var(--ease);
}
.gallery-tab:hover { border-color: var(--ink-faint); color: var(--ink); }
.gallery-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.gallery-panels { margin-top: 28px; position: relative; }
.gallery-panel { display: none; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-panel.active { display: grid; animation: fadeUp .45s var(--ease); }
.gallery-panel figure { margin: 0; }
.gallery-panel img {
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gallery-panel img:hover { transform: scale(1.02); box-shadow: var(--shadow-2); }
.gallery-panel figcaption { text-align: center; font-size: .85rem; color: var(--ink-soft); margin-top: 10px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }

/* ---- faq ----------------------------------------------------------------- */

.faq-list { max-width: 760px; margin: 44px auto 0; display: grid; gap: 12px; }
.faq {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 22px; box-shadow: var(--shadow-1);
}
.faq summary {
  list-style: none; cursor: pointer; font-weight: 700; padding-block: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 500; color: var(--brand);
  transition: transform .25s var(--ease); line-height: 1;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 18px; }

/* ---- contact band -------------------------------------------------------- */

.contact-band {
  background: radial-gradient(100% 140% at 80% 0%, var(--navy-2), var(--navy-1) 60%);
  color: #fff; text-align: center;
}
.contact-inner { padding-block: 80px; }
.contact-inner p.lead { color: rgb(255 255 255 / .75); max-width: 34rem; margin: 14px auto 0; }
.contact-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.contact-number { margin-top: 18px; color: rgb(255 255 255 / .65); font-size: .95rem; }
.contact-number b { color: #fff; letter-spacing: .04em; }

/* ---- footer -------------------------------------------------------------- */

.footer { background: var(--card); border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; padding-block: 30px; color: var(--ink-soft); font-size: .92rem; }
.footer a:hover { color: var(--ink); }
.footer-products { display: flex; flex-wrap: wrap; gap: 16px; font-weight: 600; }

/* richer umbrella footer: brand + link columns + base bar */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-block: 46px 30px; }
.footer-brand p { margin: 14px 0 16px; color: var(--ink-soft); font-size: .93rem; max-width: 340px; }
.footer-flag {
  display: inline-flex; align-items: center; gap: 8px;
  background: #dcfce7; color: #166534; border: 1px solid #86efac;
  padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700;
}
.footer-col h4 {
  margin: 6px 0 14px; font-size: .76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint);
}
.footer-col a { display: block; padding: 5px 0; color: var(--ink-soft); font-weight: 600; font-size: .93rem; }
.footer-col a:hover { color: var(--brand-deep); }
.footer-col .soon { display: block; padding: 5px 0; color: var(--ink-faint); font-size: .86rem; }
.footer-base {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-block: 20px;
  color: var(--ink-faint); font-size: .84rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- reveal animations ---------------------------------------------------
   Hidden state is gated on .js (set by site.js) so a no-JS visitor — or a
   crawler — always sees the full page. Print always shows everything. */

.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].revealed { opacity: 1; transform: none; }
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: 72px; }
  .hero-visual { max-width: 560px; }
  .products-grid { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .urdu-inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .gallery-panel { grid-template-columns: 1fr; }
  .nav-links, .nav .btn-primary { display: none; }
  .nav-burger { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card); border-bottom: 1px solid var(--line); padding: 18px 24px; gap: 14px;
  }
}
@media (max-width: 620px) {
  .products-grid, .features-grid { grid-template-columns: 1fr; }
  .section { padding-block: 64px; }
}

/* ---- WhatsApp: header chip + floating corner button ---------------------- */

.nav-wa {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgb(37 211 102 / .1); border: 1px solid rgb(37 211 102 / .45);
  color: var(--brand-deep, #15803d); font-weight: 800; font-size: .86rem;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  transition: background .15s;
}
.nav-wa svg { width: 16px; height: 16px; fill: #25d366; flex-shrink: 0; }
.nav-wa:hover { background: rgb(37 211 102 / .2); }
@media (max-width: 1150px) { .nav-wa { display: none; } }

.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgb(0 0 0 / .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-fab svg { width: 30px; height: 30px; fill: #fff; }
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 12px 30px rgb(0 0 0 / .34); }

/* Share sits directly above WhatsApp — a shopkeeper forwarding the page to a
   friend is how this product actually spreads, so it deserves a real button.
   Brand green rather than WhatsApp green: they are two different actions. */
.share-fab {
  position: fixed; right: 20px; bottom: 86px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand, #16a34a); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgb(0 0 0 / .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.share-fab svg { width: 25px; height: 25px; }
.share-fab:hover { transform: scale(1.08); box-shadow: 0 12px 30px rgb(0 0 0 / .34); }
/* The confirmation reads to the LEFT of the button so it never leaves the
   screen on a phone. */
.share-said {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; background: #14202b; color: #fff;
  font-size: .8rem; font-weight: 700; padding: 7px 13px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
  max-width: 60vw; overflow: hidden; text-overflow: ellipsis;
}
.share-said.on { opacity: 1; }

/* featured screenshot inside the buy card's left column */
.buy-shot {
  display: block; width: 100%; margin-top: 20px;
  border-radius: 12px; border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 10px 30px rgb(0 0 0 / .3);
}

/* ---- column utilities + mobile hardening --------------------------------
   WHY THIS EXISTS: sections used to carry inline
   style="grid-template-columns:repeat(3,1fr)". An inline style beats every
   media query in this file, so phones kept 3-column grids and the page
   scrolled sideways. Columns now come from these CLASSES, and the overrides
   below sit last in the file so they always win.
   Rule for every new section: never put grid-template-columns in a style
   attribute — use cols-N (or split for a 2-up band).                       */

.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* A text-beside-picture band (the unique section on every product page). */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }

@media (max-width: 980px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split img { margin-inline: auto; }
}
@media (max-width: 620px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .buy-card { padding: 22px; }
  .buy-price { font-size: 2rem; }
  .pay-row { font-size: .88rem; padding: 11px 13px; }
  .section-head h2 { font-size: 1.5rem; }
  .wa-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .wa-fab svg { width: 26px; height: 26px; }
  .share-fab { right: 14px; bottom: 74px; width: 50px; height: 50px; }
  .share-fab svg { width: 23px; height: 23px; }
}

/* Nothing may push the page sideways on a phone. */
img, svg, video, canvas { max-width: 100%; height: auto; }
.wrap { overflow-wrap: break-word; }

/* ---- screenshots full size ------------------------------------------------
   The gallery renders shots at ~600px; the detail that actually sells the
   product is unreadable at that size, so a click opens the real PNG.       */
.gallery-panel figure img { cursor: zoom-in; }
/* The overlay itself NEVER scrolls — an inner layer does. `backdrop-filter`
   makes this element the containing block for `position: fixed` children, so
   a close button inside a scrolling overlay pans away with the picture no
   matter whether it is fixed or absolute. Splitting the two layers is the
   only fix that keeps the blur. */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none; overflow: hidden;
  background: rgb(8 12 10 / .88); backdrop-filter: blur(4px);
}
.lightbox.open { display: block; }
.lightbox-scroll {
  position: absolute; inset: 0; overflow: auto;
  display: grid; place-items: center; padding: 24px;
}
/* Opens FIT TO SCREEN so the whole shot is visible… */
.lightbox img {
  max-width: 100%; max-height: 92vh; width: auto; height: auto;
  border-radius: 12px; box-shadow: 0 20px 60px rgb(0 0 0 / .5); cursor: zoom-in;
}
/* …then a click zooms to the PNG's real pixels and the layer scrolls, which is
   the only way the fit chips and expiry columns are actually readable on a
   phone. Fitting alone showed the shot at the thumbnail's own width. */
.lightbox.zoomed .lightbox-scroll { place-items: start; }
.lightbox.zoomed img { max-width: none; max-height: none; cursor: zoom-out; }

.lightbox-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgb(12 18 15 / .72); color: #fff; font-size: 1.7rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 10px rgb(0 0 0 / .4);
}
.lightbox-close:hover { background: rgb(12 18 15 / .92); }
.lightbox-hint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: rgb(12 18 15 / .72); color: rgb(255 255 255 / .85);
  font-size: .78rem; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  pointer-events: none;
}

/* ---- buy card: the pay rows on a phone -----------------------------------
   Same lesson as #17: these label rows used to carry `style="display:flex"`
   INLINE, and an inline style beats every media query, so on a phone the
   WhatsApp row could not stack — the number was squashed against its label.
   Layout lives in classes so the ≤620px rule can actually win.            */
.pay-line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pay-line .pay-value { font-weight: 700; }
.pay-note { font-weight: 400; color: rgb(255 255 255 / .75); }

@media (max-width: 620px) {
  /* Each part gets its own line: label, then the number, then the note. */
  .pay-line { gap: 6px; }
  .pay-line .pay-value { flex-basis: 100%; }
}

/* ---- the nav on a phone -------------------------------------------------
   Three faults, all found at 360px on 2026-08-06.

   1. THE ICON COLLAPSE. The blanket `max-width: 100%` directly above is meant
      for MEDIA (a 1400px screenshot must not push the page sideways). But an
      icon inside a shrink-to-fit button has no definite container to take a
      percentage OF, so the browser clamps it to ZERO — the burger rendered
      0px wide while its 12px of padding stayed clickable, which is exactly
      "invisible but it still works". Icons state their own pixel size, so
      they opt out of the media rule.
   2. The row was WIDER THAN THE PHONE — logo + product chip + burger needed
      392px of a 360px screen, so the chip jammed against the wordmark and the
      burger fell off the right edge entirely.
   3. The burger was a 12px target. Anything tapped by a thumb needs ~40px.  */
button svg, .btn svg, .chip svg, .nav-wa svg, .nav-links a svg { max-width: none; }

.nav-burger { width: 42px; height: 42px; padding: 0; place-items: center; flex-shrink: 0; }
@media (max-width: 980px) { .nav-burger { display: grid; } }

/* The header is FULL between 1150 and 1360px — logo + 7 links + the WhatsApp
   chip + the CTA all showing at once. The icons above had been collapsing to
   ZERO for the same reason as the burger, so making them real added ~19px
   apiece and tipped the row into horizontal overflow at 1265px. This band
   tightens its own spacing instead of dropping anything: whether the CTA
   belongs in the header at all is the owner's call (POSPLUS-UPDATES U2), not
   something a bug fix should decide by itself. */
@media (max-width: 1360px) {
  .nav-inner { gap: 12px; }
  .nav-links { gap: 11px; }
  .nav .btn { padding: 9px 13px; }
  .nav-wa { padding: 7px 11px; }
}

@media (max-width: 720px) {
  .nav-inner { gap: 12px; }
  .logo { font-size: 1.1rem; gap: 8px; }
  .logo-mark { width: 24px; height: 24px; }
  .logo .word { white-space: nowrap; }
  /* The product name is the ONLY thing in this row allowed to truncate. The
     brand and the menu button always render in full. */
  .nav-product {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .76rem; padding: 4px 10px;
  }
  .logo { flex-shrink: 0; }
}