/* ===========================================================================
   Taj Quran - demo storefront
   Design language: calm, reverent, modern. Deep emerald + warm gold on a
   paper-warm ground; generous whitespace; geometric Islamic motifs used as
   quiet texture rather than decoration. Type pairs a humanist sans for UI
   with Amiri for Arabic/attribution lines.
   =========================================================================== */

:root{
  --emerald:#0B5D4E; --emerald-dp:#074439; --emerald-lt:#0F7A66;
  --gold:#C2A15B; --gold-lt:#E4CE96; --gold-dp:#9A7C3C;
  --paper:#FBF9F4; --paper-2:#F4F0E7; --card:#FFFFFF;
  --ink:#17241F; --ink-2:#4A5A54; --ink-3:#8A968F;
  --line:#E7E1D5; --ok:#0F7A66; --warn:#B4541F;
  --r:14px; --r-lg:22px;
  --sh:0 1px 2px rgba(23,36,31,.05), 0 8px 24px rgba(23,36,31,.06);
  --sh-lg:0 12px 40px rgba(23,36,31,.12);
  --max:1240px;
}

*{box-sizing:border-box}
/* overflow-x:clip, not hidden - hidden would turn <body> into the scroll
   container and break the sticky header. This is a safety net only; anything
   that actually overflows should be fixed at its source. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  overflow-x:clip;
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.arabic{font-family:'Amiri',serif}

/* --- geometric motif, used as a faint background texture ----------------- */
.motif{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(194,161,91,.30) 1px, transparent 0);
  background-size:22px 22px;
}

/* --- top bar ------------------------------------------------------------- */
/* Announcement strip on the original dark emerald, with WhatsApp on the right.
   The empty spacer mirrors the WhatsApp block's width so the announcement stays
   optically centred. */
.topbar{background:var(--emerald-dp);color:#EADFC4}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.announce{flex:1;text-align:center;padding:10px 8px;font-size:.95rem;font-weight:600;
  color:#F2E8CE;letter-spacing:-.005em;transition:color .16s}
.announce:hover{color:var(--gold-lt);text-decoration:underline}
.tb-spacer{flex:0 0 150px}
.wa{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:5px 12px;
  border-radius:999px;background:#25D366;color:#08331A;font-weight:700;font-size:.86rem;
  transition:.16s;white-space:nowrap}
.wa:hover{background:#1FBF5A;transform:translateY(-1px)}
.wa svg{width:16px;height:16px}
@media(max-width:820px){
  .tb-spacer{display:none}
  .announce{text-align:left;font-size:.84rem}
  .wa span{display:none}
  .wa{padding:5px 9px}
}

/* --- header -------------------------------------------------------------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(251,249,244,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:22px;height:76px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand-logo{height:50px;width:auto;object-fit:contain;transition:opacity .18s}
.brand:hover .brand-logo{opacity:.85}
@media(max-width:680px){.brand-logo{height:40px}}

.searchbar{flex:1;position:relative;max-width:560px}
.searchbar input{width:100%;height:46px;border:1px solid var(--line);border-radius:999px;
  padding:0 48px 0 20px;font-size:.95rem;background:var(--card);color:var(--ink);
  outline:none;transition:border-color .18s, box-shadow .18s}
.searchbar input:focus{border-color:var(--emerald);box-shadow:0 0 0 4px rgba(11,93,78,.10)}
.searchbar button{position:absolute;right:5px;top:5px;width:36px;height:36px;border:0;
  border-radius:50%;background:var(--emerald);color:#fff;cursor:pointer;display:grid;place-items:center}
.searchbar button:hover{background:var(--emerald-lt)}

.hactions{display:flex;align-items:center;gap:10px;margin-left:auto}
.iconbtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;position:relative;transition:.18s}
.iconbtn:hover{border-color:var(--emerald);color:var(--emerald)}
.badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--gold);color:#3A2E12;font-size:.68rem;font-weight:800;
  display:grid;place-items:center}

/* --- nav ----------------------------------------------------------------- */
/* --- mega menu ----------------------------------------------------------- */
/* nav.main is the positioning context so a panel can span the full width.
   No overflow on the row: a scroll container forces BOTH axes to auto and
   would clip the panel (that bug hid the first dropdowns). */
/* Emerald bar with a soft gold hairline under it - carries the brand colour
   through the header instead of leaving the nav as plain white. */
nav.main{position:relative;z-index:40;
  background:linear-gradient(180deg,var(--emerald) 0%,var(--emerald-dp) 100%);
  border-bottom:3px solid var(--gold)}
/* One row, always. It cannot wrap (that dropped the last three links onto a
   second line) and it cannot scroll (overflow here would clip the mega panel),
   so the items shrink to fit instead: padding and type scale with the viewport
   between the 900px mobile breakpoint and the 1240px max width. */
.navrow{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;overflow:visible;
  justify-content:center}
/* flex:0 0 auto on BOTH kinds of item. The department links sit inside
   .nav-item wrappers while About us / Contact us / Learn Quran / More are bare
   .nav-top children, so any shrinkage lands entirely on those four - with
   min-width:0 they collapsed past their own padding and the labels ran
   together. Nothing shrinks now; the clamp does the fitting. */
.nav-top{display:inline-flex;align-items:center;
  padding:13px clamp(7px, .9vw, 12px);
  font-size:clamp(.66rem, .79vw, .8rem);
  font-weight:600;color:#E8EFEB;white-space:nowrap;letter-spacing:-.005em;
  border-bottom:3px solid transparent;margin-bottom:-3px;transition:.16s;
  flex:0 0 auto}
.nav-top:hover{color:#fff;background:rgba(255,255,255,.10);border-bottom-color:var(--gold-lt)}
.nav-item{position:static;flex:0 0 auto}
.nav-item:hover > .nav-top{color:#fff;background:rgba(255,255,255,.10);
  border-bottom-color:var(--gold-lt)}

.mega{position:absolute;left:0;right:0;top:100%;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line);
  box-shadow:0 22px 44px rgba(23,36,31,.15);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s}
.nav-item:hover .mega{opacity:1;visibility:visible;transform:none}
/* The panel is hidden with visibility, not display, so its width still counts
   toward the document's scroll width. Books Duas Wazaif wants ~1414px of
   columns inside a 1240px wrap - without wrapping that overflow put a
   horizontal scrollbar on every page of the site. */
.megain{display:flex;flex-wrap:wrap;gap:26px 44px;padding:26px 22px 30px;
  align-items:flex-start;max-width:100%}
.mcol{display:flex;flex-direction:column;gap:2px;min-width:150px;
  max-width:100%;flex:0 1 auto}
.mcol h5{margin:0 0 9px;font-size:.78rem;font-weight:800;color:var(--emerald);
  text-transform:none;letter-spacing:.01em}
.mcol a{font-size:.92rem;color:var(--ink);padding:5px 0;line-height:1.35;
  border-bottom:1px solid transparent;width:fit-content}
.mcol a:hover{color:var(--emerald);border-bottom-color:var(--gold)}
.mpromo{margin-left:auto;position:relative;width:250px;flex-shrink:0;border-radius:var(--r);
  overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
.mpromo img{width:100%;height:180px;object-fit:contain;padding:12px;mix-blend-mode:multiply}
.mpromo span{position:absolute;left:0;bottom:0;right:0;padding:9px 12px;font-size:.8rem;
  font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(7,68,57,.88))}
.mpromo:hover img{transform:scale(1.04);transition:transform .3s}

@media(max-width:1180px){
  /* the clamp above already tightens the row; only the panel needs help here */
  .megain{gap:22px 30px}
  .mpromo{display:none}
}
/* Below ~1150px the 13 labels genuinely cannot fit on one line at a legible
   size, and since nothing shrinks any more they would simply be cut off (the
   page-level overflow-x:clip hides the overflow rather than scrolling it).
   So the row becomes its own swipeable strip from here down. */
@media(hover:none),(max-width:1150px){
  .navrow{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .navrow::-webkit-scrollbar{display:none}
  .mega{display:none}
  .nav-top{font-size:.8rem;padding:12px 11px}
}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;color:#F3EEE1;
  background:linear-gradient(135deg,var(--emerald-dp) 0%, var(--emerald) 55%, var(--emerald-lt) 100%)}
.hero:before{content:"";position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(circle at 1px 1px, var(--gold-lt) 1.4px, transparent 0);
  background-size:26px 26px}
.hero .wrap{position:relative;padding:74px 22px;display:grid;
  grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.12;margin:0 0 16px;
  letter-spacing:-.03em;font-weight:800}
.hero p{font-size:1.06rem;opacity:.9;margin:0 0 26px;max-width:52ch}
.hero .ayah{font-size:1.5rem;opacity:.85;margin-bottom:14px;color:var(--gold-lt)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-card{background:rgba(255,255,255,.09);border:1px solid rgba(228,206,150,.28);
  border-radius:var(--r-lg);padding:24px;backdrop-filter:blur(6px)}
.hero-stat{display:flex;justify-content:space-between;padding:11px 0;
  border-bottom:1px dashed rgba(228,206,150,.25);font-size:.94rem}
.hero-stat:last-child{border-bottom:0}
.hero-stat b{color:var(--gold-lt);font-size:1.05rem}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 26px;
  border-radius:999px;font-weight:700;font-size:.95rem;border:1px solid transparent;
  cursor:pointer;transition:.2s;white-space:nowrap}
.btn-gold{background:var(--gold);color:#2C2208}
.btn-gold:hover{background:var(--gold-lt);transform:translateY(-1px);box-shadow:var(--sh-lg)}
.btn-ghost{background:transparent;color:#F3EEE1;border-color:rgba(243,238,225,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.10)}
.btn-emerald{background:var(--emerald);color:#fff}
.btn-emerald:hover{background:var(--emerald-lt)}
.btn-sm{height:40px;padding:0 18px;font-size:.88rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* --- sections ------------------------------------------------------------ */
section{padding:60px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:28px;flex-wrap:wrap}
.sec-head h2{margin:0;font-size:1.7rem;letter-spacing:-.02em;font-weight:800}
.sec-head p{margin:6px 0 0;color:var(--ink-2);font-size:.96rem}
.rule{width:52px;height:3px;border-radius:2px;background:var(--gold);margin-bottom:14px}

/* --- category tiles, image-led -------------------------------------------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:.24s;position:relative;display:flex;flex-direction:column}
.cat:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--sh-lg)}
.cat .thumb{aspect-ratio:4/3;background:linear-gradient(160deg,var(--paper-2),#EDE7DA);
  position:relative;overflow:hidden;display:grid;place-items:center}
.cat .thumb img{width:100%;height:100%;object-fit:contain;padding:16px;
  transition:transform .4s ease;mix-blend-mode:multiply}
.cat:hover .thumb img{transform:scale(1.07)}
.cat .thumb:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,68,57,.55),transparent 52%)}
.cat .meta{position:absolute;left:0;right:0;bottom:0;padding:13px 15px;z-index:2;color:#fff}
.cat .meta h3{margin:0;font-size:1rem;font-weight:700;line-height:1.28;
  text-shadow:0 1px 6px rgba(0,0,0,.4)}
.cat .meta span{font-size:.78rem;opacity:.92}
.cat .count{position:absolute;top:11px;right:11px;z-index:2;background:rgba(255,255,255,.93);
  color:var(--emerald-dp);font-size:.7rem;font-weight:800;padding:4px 9px;border-radius:999px}

/* wide feature tile for the collection strip */
.collections{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.coll{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:190px;
  display:flex;align-items:flex-end;border:1px solid var(--line);
  background:linear-gradient(140deg,var(--emerald-dp),var(--emerald-lt))}
.coll img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:26px 26px 26px 45%;opacity:.95;transition:transform .4s}
.coll:hover img{transform:scale(1.06)}
.coll:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(7,68,57,.94) 34%,rgba(7,68,57,.35) 62%,transparent)}
.coll .txt{position:relative;z-index:2;padding:22px;color:#F3EEE1;max-width:64%}
.coll .txt h3{margin:0 0 5px;font-size:1.2rem;font-weight:800;letter-spacing:-.01em}
.coll .txt span{font-size:.85rem;opacity:.9}
.coll .txt em{display:inline-block;margin-top:11px;font-style:normal;font-size:.8rem;
  font-weight:700;color:var(--gold-lt);letter-spacing:.04em}

/* --- product grid -------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#D8CFB8}
.card .ph{aspect-ratio:1/1;background:var(--paper-2);position:relative;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .35s}
.card:hover .ph img{transform:scale(1.045)}
.tag{position:absolute;top:10px;left:10px;background:var(--emerald);color:#fff;
  font-size:.68rem;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.04em}
.tag.out{background:#8A968F}
.card .body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .cat-line{font-size:.7rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.card h3{margin:0;font-size:.95rem;font-weight:650;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .price{margin-top:auto;display:flex;align-items:baseline;gap:8px;padding-top:4px}
.card .price b{font-size:1.12rem;color:var(--emerald);font-weight:800}
.card .price s{color:var(--ink-3);font-size:.85rem}
.code{font-size:.72rem;color:var(--ink-3);font-family:ui-monospace,monospace}

/* --- product page -------------------------------------------------------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:46px;padding:36px 0 10px}
.gallery .main{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;padding:24px}
.gallery .main img{max-height:100%;object-fit:contain}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs img{width:74px;height:74px;object-fit:contain;background:var(--card);padding:7px;
  border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:.18s}
.thumbs img:hover,.thumbs img.on{border-color:var(--emerald)}
.pdp h1{font-size:1.85rem;line-height:1.22;margin:6px 0 12px;letter-spacing:-.02em}
.price-row{display:flex;align-items:baseline;gap:14px;margin:18px 0}
.price-row .now{font-size:2rem;font-weight:800;color:var(--emerald)}
.price-row s{color:var(--ink-3);font-size:1.05rem}
.stockline{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.dot.out{background:var(--warn)}
.buybox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;margin-top:22px;box-shadow:var(--sh)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:42px;height:46px;border:0;background:transparent;font-size:1.15rem;cursor:pointer;color:var(--ink-2)}
.qty button:hover{background:var(--paper-2)}
.qty input{width:54px;height:46px;border:0;text-align:center;font-weight:700;font-size:1rem;outline:none}
.specs{width:100%;border-collapse:collapse;margin-top:12px;font-size:.93rem}
.specs td{padding:11px 0;border-bottom:1px solid var(--line)}
.specs td:first-child{color:var(--ink-3);width:42%}

/* --- video block --------------------------------------------------------- */
.videoblock{background:linear-gradient(150deg,var(--emerald-dp),var(--emerald) 72%);
  position:relative;overflow:hidden}
/* the video is the first thing on the page now that the hero is gone */
.videotop{padding:26px 0 34px}
.videotop .vwrap{aspect-ratio:21/9;border-radius:var(--r-lg)}
@media(max-width:860px){.videotop .vwrap{aspect-ratio:16/9}}
.videoblock:before{content:"";position:absolute;inset:0;opacity:.13;
  background-image:radial-gradient(circle at 1px 1px, var(--gold-lt) 1.4px, transparent 0);
  background-size:26px 26px}
.videoblock .wrap{position:relative}
.vwrap{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(228,206,150,.30);box-shadow:0 20px 60px rgba(0,0,0,.30);
  background:#04231D;aspect-ratio:16/9}
.vwrap video{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;inset:0;margin:auto;width:88px;height:88px;border-radius:50%;
  border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(194,161,91,.94);color:#201804;
  box-shadow:0 10px 40px rgba(0,0,0,.4);transition:transform .2s,opacity .25s}
.vplay svg{width:38px;height:38px;margin-left:5px}
.vplay:hover{transform:scale(1.07);background:var(--gold-lt)}
.vplay.hide{opacity:0;pointer-events:none;transform:scale(.7)}
.vsound{position:absolute;right:16px;bottom:56px;z-index:3;display:inline-flex;align-items:center;
  gap:7px;height:40px;padding:0 15px;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  background:rgba(7,68,57,.72);color:#F3EEE1;font:inherit;font-size:.82rem;font-weight:700;
  cursor:pointer;backdrop-filter:blur(6px);transition:.18s}
.vsound:hover{background:rgba(7,68,57,.92);border-color:var(--gold)}
.vsound svg{width:18px;height:18px}
@media(max-width:680px){.vsound span{display:none}.vsound{padding:0 12px;bottom:50px}}

/* --- misc ---------------------------------------------------------------- */
.crumbs{font-size:.85rem;color:var(--ink-3);padding:18px 0}
.crumbs a:hover{color:var(--emerald)}
.empty{text-align:center;padding:70px 20px;color:var(--ink-2)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;padding:0 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);display:grid;place-items:center;font-weight:600}
.pager .on{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.pager a:hover{border-color:var(--emerald)}
.note{background:#FFF9E8;border:1px solid #F0DFA8;border-radius:var(--r);
  padding:13px 16px;font-size:.88rem;color:#6B551C}

.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px}
.trust div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.trust b{display:block;margin:10px 0 4px}
.trust span{font-size:.87rem;color:var(--ink-2)}
.trust svg{color:var(--emerald)}

/* --- footer -------------------------------------------------------------- */
footer.site{background:var(--emerald-dp);color:#CFE0D9;margin-top:70px;
  padding:52px 0 26px;font-size:.92rem}
footer.site h4{color:#fff;font-size:.98rem;margin:0 0 14px}
footer.site a{opacity:.86} footer.site a:hover{opacity:1;color:var(--gold-lt)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.fgrid ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.fbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;opacity:.75;font-size:.85rem}

@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;padding:52px 22px}
  .pdp{grid-template-columns:1fr;gap:28px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  header.site .wrap{height:auto;padding:12px 22px;flex-wrap:wrap}
  .searchbar{order:3;flex-basis:100%;max-width:none}
  .fgrid{grid-template-columns:1fr}
  section{padding:42px 0}
}

/* ===== product detail, laid out like tajquran.com ========================= */
/* Full-bleed two-column split: image panel on a soft ground at the left, the
   buy column on card white at the right, with the copy scrolling under it. */
.pdp2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:start;border-top:1px solid var(--line);background:var(--card)}
.pdp2-media{position:sticky;top:0;background:#F3F5F3;min-height:min(88vh,760px);
  display:grid;place-items:center;padding:20px}
.slider{position:relative;width:100%;max-width:620px;aspect-ratio:1/1;
  display:grid;place-items:center}
.slider .slide{margin:0;position:absolute;inset:0;display:none;place-items:center}
.slider .slide.on{display:grid}
.slider .slide img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.13))}
.navarrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border:0;background:transparent;color:var(--ink);cursor:pointer;display:grid;
  place-items:center;border-radius:50%;transition:background .15s}
.navarrow:hover{background:rgba(0,0,0,.06)}
.navarrow svg{width:26px;height:26px}
.navarrow.prev{left:-4px} .navarrow.next{right:-4px}
.dots{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.22)}
.dots button.on{background:var(--emerald);width:20px;border-radius:99px}

.pdp2-info{padding:44px 5vw 56px 44px}
.pdp2-inner{max-width:520px}
.pdp2 h1{font-size:1.72rem;line-height:1.25;letter-spacing:-.02em;margin:0 0 16px;font-weight:600}
.p2price{display:flex;align-items:baseline;gap:12px;margin-bottom:34px}
.p2price .amt{font-size:1.32rem;font-weight:600;color:#C0392B}
.p2price .amt.onreq{color:var(--ink-2);font-size:1.05rem}
.p2price s{color:var(--ink-3);font-size:1rem}

/* Shopify renders each attribute as a label plus a single bordered "option"
   box; these are read-only here because the ERP ships one variant per item. */
.specfield{margin-bottom:18px}
.specfield .lbl{display:block;font-size:.86rem;color:var(--ink-2);margin-bottom:7px}
.specfield .val{border:1px solid #C9CFCB;border-radius:9px;padding:14px 16px;
  text-align:center;font-size:.95rem;background:var(--card)}

.buyrow{display:grid;grid-template-columns:150px 1fr;gap:14px;margin-top:30px}
.qty2{display:flex;align-items:center;border:1px solid #C9CFCB;border-radius:9px;height:56px}
.qty2 button{width:46px;height:100%;border:0;background:transparent;cursor:pointer;
  font-size:1.15rem;color:var(--ink-2)}
.qty2 input{width:100%;min-width:0;border:0;text-align:center;font-size:1rem;
  background:transparent;color:var(--ink);font-family:inherit}
.qty2 input:focus{outline:none}
.addbtn{height:56px;border:1px solid #C9CFCB;border-radius:9px;background:var(--card);
  color:var(--ink);font:inherit;font-size:.97rem;cursor:pointer;display:flex;
  align-items:center;justify-content:center;gap:9px;transition:border-color .15s,background .15s}
.addbtn svg{width:19px;height:19px}
.addbtn:hover:not([disabled]){border-color:var(--emerald);background:#F4F9F7}
.addbtn[disabled]{opacity:.5;cursor:not-allowed}

.demandbtn{margin-top:14px;height:58px;border-radius:9px;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;
  font-size:1rem;transition:background .15s}
.demandbtn:hover{background:#1FBE5A}
.demandbtn svg{width:22px;height:22px}

.stock2{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:.88rem;color:var(--ink-2)}
.stock2 .dot{width:8px;height:8px;border-radius:50%;background:var(--emerald)}
.stock2 .dot.out{background:#C0392B}
.pdesc{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:.96rem;line-height:1.7}

@media(max-width:900px){
  .pdp2{grid-template-columns:1fr}
  .pdp2-media{position:static;min-height:0;padding:14px}
  .slider{max-width:460px}
  .pdp2-info{padding:28px 18px 44px}
  .pdp2-inner{max-width:none}
  .navarrow.prev{left:2px} .navarrow.next{right:2px}
}

/* ===== search drawer, modelled on the Shopify predictive search ========== */
.sd-scrim{position:fixed;inset:0;background:rgba(12,20,17,.42);z-index:60;
  animation:sdfade .16s ease}
@keyframes sdfade{from{opacity:0}to{opacity:1}}
body.sd-open{overflow:hidden}

/* [hidden] is only `display:none` from the UA stylesheet, so ANY display rule
   on a class outranks it. .sdrawer sets display:flex, which left the drawer
   sitting open - and empty - on every page until this guard was added. */
[hidden]{display:none !important}
.sdrawer{position:fixed;top:0;left:0;right:0;z-index:61;background:var(--card);
  max-height:100vh;display:flex;flex-direction:column;
  box-shadow:0 18px 40px rgba(0,0,0,.16);animation:sddown .18s ease}
@keyframes sddown{from{transform:translateY(-14px);opacity:.6}to{transform:none;opacity:1}}
.sd-bar{border-bottom:1px solid var(--line);flex:0 0 auto}
.sd-barin{display:flex;align-items:center;gap:14px;height:66px}
.sd-ico{width:21px;height:21px;color:var(--ink-3);flex:0 0 auto}
#sdq{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.12rem;
  color:var(--ink);padding:0}
#sdq:focus{outline:none}
#sdq::-webkit-search-cancel-button{display:none}
.sd-close{width:34px;height:34px;border:0;background:transparent;cursor:pointer;
  color:var(--ink-2);display:grid;place-items:center;border-radius:50%;flex:0 0 auto}
.sd-close:hover{background:var(--paper)}
.sd-close svg{width:21px;height:21px}

.sd-body{overflow-y:auto;padding:22px 0 30px;flex:1 1 auto}
.sd-body section{padding:0;margin-bottom:22px}
.sd-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.sd-head h4{margin:0;font-size:1rem;font-weight:600;color:var(--ink)}
.sd-clear,.sd-all{border:0;background:none;font:inherit;font-size:.88rem;
  color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sd-clear:hover,.sd-all:hover{color:var(--emerald)}

.sd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:20px 18px}
.sd-card{display:flex;flex-direction:column;gap:6px}
.sd-ph{display:block;aspect-ratio:1/1;background:#F3F5F3;border-radius:6px;overflow:hidden;
  display:grid;place-items:center}
.sd-ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sd-card .sd-t{font-size:.93rem;line-height:1.35;color:var(--ink)}
.sd-card .sd-p{font-size:.93rem;color:#C0392B;font-weight:600}
.sd-card:hover .sd-t{text-decoration:underline;text-underline-offset:2px}

.sd-empty{color:var(--ink-2);font-size:.95rem;padding:8px 0}

@media(max-width:640px){
  .sd-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px 12px}
  .sd-barin{height:58px;gap:10px}
  #sdq{font-size:1rem}
}

/* ---- category results: drawer strip, search page, /collections index ----- */
.sd-colls{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}
.sd-coll{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:12px;padding:9px 13px 9px 9px;background:var(--paper);transition:.16s}
.sd-coll:hover{border-color:var(--emerald);background:var(--card)}
.sd-cph{width:52px;height:52px;flex:0 0 auto;border-radius:8px;overflow:hidden;
  background:#F3F5F3;display:grid;place-items:center}
.sd-cph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sd-ct{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:.92rem;color:var(--ink)}
.sd-ct em{font-style:normal;font-size:.74rem;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.07em}
.sd-ct b{font-weight:400;font-size:.8rem;color:var(--ink-2)}

.catmatch{padding:4px 0 26px}
.catmatch h3{margin:0 0 13px;font-size:.78rem;font-weight:800;color:var(--emerald);
  text-transform:uppercase;letter-spacing:.12em}
.catmatch-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}
.catmatch-card,.colcard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:13px;padding:10px;background:var(--card);transition:.16s}
.catmatch-card:hover,.colcard:hover{border-color:var(--emerald);
  box-shadow:0 8px 20px rgba(11,93,78,.09)}
.catmatch-card .ph,.colcard .ph{width:54px;height:54px;flex:0 0 auto;border-radius:9px;
  overflow:hidden;background:var(--paper-2);display:grid;place-items:center}
.catmatch-card .ph img,.colcard .ph img{width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply}
.catmatch-card .t,.colcard .t{font-size:.93rem;line-height:1.3;color:var(--ink)}
.catmatch-card .n,.colcard .n{display:block;font-size:.78rem;color:var(--ink-3)}
.catmatch-card>span:not(.ph),.colcard>span:not(.ph){display:flex;flex-direction:column;
  gap:2px;min-width:0}

.colgroup{padding:6px 0 30px}
.colgroup h3{display:flex;align-items:baseline;gap:12px;margin:0 0 15px;
  font-size:1.12rem;font-weight:700}
.colgroup h3 a{color:var(--ink)}
.colgroup h3 a:hover{color:var(--emerald)}
.colgroup h3 span{font-size:.82rem;font-weight:400;color:var(--ink-3)}
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:13px}

@media(max-width:640px){
  .sd-colls,.catmatch-row,.colgrid{grid-template-columns:1fr 1fr;gap:10px}
  .sd-cph,.catmatch-card .ph,.colcard .ph{width:44px;height:44px}
}

/* ===== content pages ===================================================== */
.page{max-width:760px;padding:8px 0 60px}
.page h1{font-size:2rem;line-height:1.2;letter-spacing:-.02em;margin:10px 0 6px}
.page .lede{font-size:1.08rem;color:var(--ink-2);margin:0 0 26px}
.page h3{font-size:1.05rem;margin:30px 0 8px;color:var(--emerald)}
.page p{color:var(--ink-2);margin:0 0 14px}
.page a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}
/* .page a above (element+class) otherwise beats .btn-emerald's own color:#fff
   (single class) on specificity, turning a button's text the same emerald
   as its background - invisible. .page .btn (two classes) outranks it. */
.page .btn{color:#fff;text-decoration:none}
.page .muted{color:var(--ink-3);font-size:.9rem}
.page .note{background:var(--paper-2);border-left:3px solid var(--gold);
  padding:12px 16px;border-radius:0 10px 10px 0;font-size:.93rem}

.contactgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.ccard{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card)}
.ccard h3{margin:0 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.ccard p{margin:0;font-size:.98rem;color:var(--ink)}
.ccard .muted{display:block;margin-top:4px}

.faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;
  background:var(--card);overflow:hidden}
.faq summary{cursor:pointer;padding:15px 18px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--emerald);font-size:1.3rem;font-weight:400}
.faq details[open] summary:after{content:"\2212"}
.faq details p{padding:0 18px 16px;margin:0}

/* ===== footer contact strip + social ===================================== */
.fcontact{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;align-items:start;padding:26px 0 4px;margin-top:22px;
  border-top:1px solid rgba(255,255,255,.14)}
.fc{display:flex;gap:11px;align-items:flex-start;color:#EADFC4;font-size:.9rem}
.fc svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;opacity:.75}
.fc span{display:flex;flex-direction:column;gap:1px;min-width:0}
.fc b{font-weight:600;color:#fff;word-break:break-word}
.fc span span{opacity:.7}
a.fc:hover b{color:var(--gold-lt)}
.fsocial{display:flex;gap:10px;align-items:center}
.fsocial a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);color:#EADFC4;transition:.16s}
.fsocial a:hover{background:var(--gold);color:#3A2E12;border-color:var(--gold)}
.fsocial svg{width:19px;height:19px}
.fpay{opacity:.75}

/* ===== floating WhatsApp ================================================= */
.wafloat{position:fixed;right:18px;bottom:18px;z-index:55;width:56px;height:56px;
  border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(37,211,102,.42);transition:transform .18s}
.wafloat:hover{transform:scale(1.07)}
.wafloat svg{width:30px;height:30px}
@media(max-width:640px){.wafloat{width:50px;height:50px;right:14px;bottom:14px}
  .wafloat svg{width:26px;height:26px}}

/* ===== mobile menu drawer =============================================== */
.burger{display:none}
.md-scrim{position:fixed;inset:0;background:rgba(12,20,17,.45);z-index:70}
body.md-open{overflow:hidden}
.mdrawer{position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);z-index:71;
  background:var(--card);display:flex;flex-direction:column;
  box-shadow:6px 0 30px rgba(0,0,0,.2);animation:mdin .2s ease}
@keyframes mdin{from{transform:translateX(-100%)}to{transform:none}}
.md-top{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.md-top span{font-weight:700;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3)}
.md-top button{width:34px;height:34px;border:0;background:transparent;cursor:pointer;
  color:var(--ink-2);display:grid;place-items:center}
.md-top button svg{width:21px;height:21px}
.md-body{overflow-y:auto;padding:6px 0 28px;flex:1 1 auto}
.md-body details{border-bottom:1px solid var(--line)}
.md-body summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:.96rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.md-body summary::-webkit-details-marker{display:none}
.md-body summary:after{content:"+";color:var(--emerald);font-size:1.15rem}
.md-body details[open] summary:after{content:"\2212"}
.md-body details a{display:flex;justify-content:space-between;gap:10px;
  padding:10px 18px 10px 30px;font-size:.92rem;color:var(--ink-2)}
.md-body details a:hover{color:var(--emerald);background:var(--paper)}
.md-body .md-all{font-weight:600;color:var(--emerald)}
.md-body em{font-style:normal;font-size:.76rem;color:var(--ink-3)}
.md-plain{padding:14px 0 0}
.md-plain a{display:block;padding:10px 18px;font-size:.93rem;color:var(--ink)}
.md-plain a:hover{color:var(--emerald);background:var(--paper)}

@media(hover:none),(max-width:1150px){ .burger{display:grid} }
@media(min-width:1151px){ .mdrawer,.md-scrim{display:none !important} }

/* ===== cart, checkout, order confirmation =============================== */
.cartlayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;
  align-items:start;padding-bottom:56px}

.cline{display:grid;grid-template-columns:82px minmax(0,1fr) 92px 120px;gap:16px;
  align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cph{width:82px;height:82px;border-radius:10px;overflow:hidden;background:var(--paper-2);
  display:grid;place-items:center}
.cph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cinfo{display:flex;flex-direction:column;gap:3px;min-width:0}
.cinfo>a{font-size:.98rem;line-height:1.35}
.cinfo>a:hover{color:var(--emerald)}
.cinfo .rm{font-size:.8rem;color:var(--warn);width:fit-content;
  text-decoration:underline;text-underline-offset:3px}
.cinfo .oos{font-size:.8rem;color:var(--warn)}
.cqty input{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;
  text-align:center;font:inherit;background:var(--card)}
.cprice{text-align:right;display:flex;flex-direction:column;gap:2px}
.cprice b{font-size:1.05rem}
.cprice span{font-size:.78rem;color:var(--ink-3)}
.cartactions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:20px 0}
.cartactions .clear{margin-left:auto;font-size:.85rem;color:var(--warn);
  text-decoration:underline;text-underline-offset:3px}

.csum{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:22px;position:sticky;top:96px}
.csum h3{margin:0 0 16px;font-size:.8rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3)}
.csum .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:.94rem}
.csum .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;
  font-size:1.05rem}
.csum .row.total b{font-size:1.3rem;color:var(--emerald)}
.csum .cta{width:100%;margin-top:16px;justify-content:center;text-align:center;
  border:0;font:inherit;font-weight:600;cursor:pointer}
.csum .hint{font-size:.8rem;color:var(--ink-3);margin:10px 0 0;line-height:1.5}
.csum .hint a{color:var(--emerald);text-decoration:underline}

.sline{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;
  align-items:center;padding:8px 0;font-size:.87rem}
.sph{position:relative;width:46px;height:46px;border-radius:8px;overflow:hidden;
  background:var(--paper-2);display:grid;place-items:center}
.sph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sph i{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;border-radius:999px;
  background:var(--emerald);color:#fff;font-style:normal;font-size:.68rem;font-weight:700;
  display:grid;place-items:center;padding:0 4px}
.sline .st{line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.sline .sp{font-weight:600;white-space:nowrap}

/* checkout form */
.cofields h3{margin:0 0 16px;font-size:1.05rem}
.fld{display:block;margin-bottom:16px}
.fld>span{display:block;font-size:.86rem;color:var(--ink-2);margin-bottom:6px}
.fld>span i{font-style:normal;color:var(--ink-3)}
.fld input,.fld textarea{width:100%;border:1px solid var(--line);border-radius:11px;
  padding:13px 14px;font:inherit;font-size:.96rem;background:var(--card);color:var(--ink);
  outline:none;transition:border-color .16s, box-shadow .16s}
.fld input:focus,.fld textarea:focus{border-color:var(--emerald);
  box-shadow:0 0 0 4px rgba(11,93,78,.10)}
.fld textarea{resize:vertical}
.fld.bad input,.fld.bad textarea{border-color:var(--warn)}
.fld em{display:block;font-style:normal;font-size:.82rem;color:var(--warn);margin-top:6px}
.fldrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formerr{background:#FDF1EC;border:1px solid #E9C3B2;color:#8A3A12;border-radius:var(--r);
  padding:14px 16px;margin-bottom:20px;font-size:.94rem}
.paymethod{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--r);padding:16px;background:var(--card)}
.paymethod.on{border-color:var(--emerald);background:#F5FAF8}
.paymethod .dot{width:18px;height:18px;border-radius:50%;border:5px solid var(--emerald);
  flex:0 0 auto;margin-top:2px}
.paymethod span:last-child{display:flex;flex-direction:column;gap:2px;font-size:.9rem;
  color:var(--ink-2)}
.paymethod b{color:var(--ink);font-size:.98rem}
.cofields .hint{font-size:.83rem;color:var(--ink-3);margin:10px 0 0}

/* confirmation */
.okhead{text-align:center;padding:44px 0 30px;max-width:620px;margin:0 auto}
.okhead .tick{width:66px;height:66px;border-radius:50%;background:#E7F4EF;color:var(--emerald);
  display:grid;place-items:center;margin:0 auto 18px}
.okhead .tick svg{width:34px;height:34px}
.okhead h1{font-size:1.8rem;margin:0 0 8px;letter-spacing:-.02em}
.okhead p{color:var(--ink-2);margin:0 0 20px}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1FBE5A}
.okgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:10px}
.okcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:22px}
.okcard h3{margin:0 0 14px;font-size:.8rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3)}
.okcard p{margin:0;color:var(--ink-2);line-height:1.7}
.okline{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.93rem}
.okline em{font-style:normal;color:var(--ink-3);font-size:.78rem;margin-left:6px}
.okline a:hover{color:var(--emerald)}
.okline.oktotal{border-bottom:0;padding-top:14px;font-weight:700}
.okline.oktotal b{color:var(--emerald);font-size:1.2rem}
.oksteps{margin:0;padding-left:20px;color:var(--ink-2);line-height:1.9;font-size:.93rem}
.okcard .hint{font-size:.8rem;color:var(--ink-3);margin-top:14px}

@media(max-width:900px){
  .cartlayout{grid-template-columns:1fr;gap:24px}
  .csum{position:static}
  .okgrid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .cline{grid-template-columns:64px minmax(0,1fr) 70px;gap:12px}
  .cph{width:64px;height:64px}
  .cprice{grid-column:2 / -1;text-align:left;flex-direction:row;gap:10px;align-items:baseline}
  .fldrow{grid-template-columns:1fr}
}

/* ===== staff order list ================================================= */
.adhead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
.adstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  margin-bottom:20px}
.adstats div{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:15px 17px;display:flex;flex-direction:column;gap:2px}
.adstats b{font-size:1.32rem;color:var(--emerald)}
.adstats span{font-size:.78rem;color:var(--ink-3)}
.adtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.adtabs a{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.87rem;
  background:var(--card)}
.adtabs a.on{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.adtabs em{font-style:normal;opacity:.6;font-size:.8rem}

.adorder{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  margin-bottom:9px;overflow:hidden}
.adorder summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:118px minmax(0,1.4fr) 130px 120px 110px 108px;
  gap:12px;align-items:center;padding:13px 16px;font-size:.9rem}
.adorder summary::-webkit-details-marker{display:none}
.adorder summary:hover{background:var(--paper)}
.adno{font-family:ui-monospace,monospace;font-size:.82rem;color:var(--ink-2)}
.adwho{display:flex;flex-direction:column;min-width:0}
.adwho b{font-weight:600}
.adwho{color:var(--ink-3);font-size:.8rem}
.adwho b{color:var(--ink);font-size:.92rem}
.adph{font-size:.86rem;color:var(--ink-2)}
.adwhen{font-size:.82rem;color:var(--ink-3)}
.adtot{font-weight:700;text-align:right}
.adstat{font-size:.74rem;font-weight:700;text-align:center;padding:5px 9px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.05em}
.s-new{background:#FDF0DC;color:#8A5A12}
.s-confirmed{background:#E3F0FB;color:#175A8A}
.s-packed{background:#EFE7FA;color:#553A8A}
.s-shipped{background:#E4F3EC;color:#0B5D4E}
.s-delivered{background:#DCF2E3;color:#166534}
.s-cancelled{background:#FBE4E0;color:#8A2A18}

.adbody{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:6px 18px 20px;
  border-top:1px solid var(--line)}
.adbody h4{margin:14px 0 8px;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3)}
.adbody p{margin:0;color:var(--ink-2);line-height:1.7;font-size:.92rem}
.adform{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:18px}
.adform select{height:38px;border:1px solid var(--line);border-radius:10px;padding:0 10px;
  background:var(--card);font:inherit;font-size:.88rem}

@media(max-width:1000px){
  .adorder summary{grid-template-columns:1fr 1fr;gap:6px 12px}
  .adtot{text-align:left}
  .adbody{grid-template-columns:1fr;gap:6px}
}

/* ===== bank transfer / QR payment ======================================= */
.paymethod{margin-bottom:10px;cursor:pointer}
.paymethod input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.paymethod .dot{border-color:var(--line);background:var(--card);border-width:2px}
.paymethod.on .dot{border-color:var(--emerald);border-width:5px}
.paymethod:hover{border-color:var(--emerald-lt)}

.bankbox{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;
  border:1px solid var(--emerald);border-top:0;border-radius:0 0 var(--r) var(--r);
  background:#F5FAF8;padding:20px;margin:-14px 0 12px}
.bankqr{display:flex;flex-direction:column;gap:8px;align-items:center}
.bankqr img{width:100%;height:auto;border-radius:10px;background:#fff;
  border:1px solid var(--line);padding:6px}
.bankqr a{font-size:.8rem;color:var(--emerald);text-decoration:underline;
  text-underline-offset:3px}
.bankinfo h4{margin:0 0 6px;font-size:.95rem}
.bankinfo>p{margin:0 0 16px;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.bankinfo .fld{margin-bottom:8px}
.bankinfo .hint{font-size:.82rem;color:var(--ink-3);margin:0}

.adpay{font-style:normal;display:block;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;color:var(--ink-3);margin-top:2px}
.adpay.bank{color:var(--emerald)}

@media(max-width:700px){
  .bankbox{grid-template-columns:1fr;gap:16px}
  .bankqr{max-width:230px;margin:0 auto}
}

/* wallet methods have no QR yet, so their panel is a single column */
.bankbox.noqr{grid-template-columns:1fr}
.acct{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 16px;
  font-size:.9rem}
.acct dt{color:var(--ink-3)}
.acct dd{margin:0;font-weight:600;font-family:ui-monospace,monospace}
.acctnote{font-size:.87rem;color:var(--ink-2);background:var(--card);
  border:1px dashed var(--line);border-radius:10px;padding:10px 13px;margin:0 0 16px}
.acctnote a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}
.adpay.prepaid{color:var(--emerald)}

.fldrow.three{grid-template-columns:1.4fr 1.4fr 1fr}
.fld select{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px 14px;
  font:inherit;font-size:.96rem;background:var(--card);color:var(--ink);outline:none}
.fld select:focus{border-color:var(--emerald);box-shadow:0 0 0 4px rgba(11,93,78,.10)}
.fld.bad select{border-color:var(--warn)}
@media(max-width:620px){.fldrow.three{grid-template-columns:1fr}}

.erpmap{width:100%;border-collapse:collapse;font-size:.83rem;margin-top:6px}
.erpmap td{padding:6px 0;border-bottom:1px solid var(--line);vertical-align:top}
.erpmap td:first-child{color:var(--ink-3);width:46%;font-family:ui-monospace,monospace;
  font-size:.78rem}
.erpmap td:last-child{color:var(--ink)}
.erpmap em{font-style:normal;color:var(--ink-3)}

.csum .kg{display:block;font-style:normal;font-size:.76rem;color:var(--ink-3);margin-top:2px}

/* checkout summary: per-line remove */
.defaultsubmit{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sline{grid-template-columns:46px minmax(0,1fr) auto 26px}
.sline .st{display:flex;flex-direction:column;gap:1px}
.sline .st a{font-size:.76rem;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:2px;width:fit-content}
.sline .st a:hover{color:var(--emerald)}
.slrm{width:24px;height:24px;border:0;background:transparent;cursor:pointer;padding:0;
  color:var(--ink-3);display:grid;place-items:center;border-radius:50%;transition:.14s}
.slrm:hover{background:#FBE4E0;color:var(--warn)}
.slrm svg{width:15px;height:15px}

/* ===== accounts: sign in, register, account page ======================== */
.authwrap{max-width:430px;margin:0 auto;padding:10px 0 60px}
.authwrap h2{margin:0 0 6px}
.authlede{color:var(--ink-2);margin:0 0 22px;font-size:.95rem}
.authcta{width:100%;justify-content:center;border:0;font:inherit;font-weight:600;cursor:pointer;
  margin-top:6px}
.authswap{text-align:center;font-size:.9rem;color:var(--ink-2);margin:16px 0 0}
.authswap a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}

.gbtn{display:flex;align-items:center;justify-content:center;gap:11px;height:50px;
  border:1px solid var(--line);border-radius:11px;background:var(--card);font-weight:600;
  font-size:.96rem;transition:.16s}
.gbtn:hover{border-color:var(--ink-3);box-shadow:var(--sh)}
.gbtn svg{width:20px;height:20px}
.author{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-3);
  font-size:.82rem}
.author:before,.author:after{content:"";flex:1;height:1px;background:var(--line)}

.hav{width:100%;height:100%;border-radius:11px;object-fit:cover}
.iconbtn.signedin{border-color:var(--emerald);overflow:hidden;padding:0}

.acchead{display:flex;align-items:center;gap:16px;padding:8px 0 26px}
.acchead h2{margin:0;font-size:1.4rem}
.acchead p{margin:2px 0 0;color:var(--ink-2);font-size:.9rem}
.acchead .btn{margin-left:auto}
.accav{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.accav.initials{display:grid;place-items:center;background:var(--emerald);color:#fff;
  font-size:1.4rem;font-weight:700}
.okmsg{background:#E7F4EF;border:1px solid #B9DECE;color:#0B5D4E;border-radius:var(--r);
  padding:13px 16px;margin-bottom:20px;font-size:.93rem}
.accgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:56px;
  align-items:start}
.accorder{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:.9rem}
.accorder:last-child{border-bottom:0}
.accorder b{display:block;font-weight:600}
.accorder span:first-child{color:var(--ink-3);font-size:.82rem}
.accorder b{color:var(--ink);font-size:.95rem}
.accamt{text-align:right;font-weight:700;white-space:nowrap}
.accamt i{display:block;margin-top:4px;font-weight:700}
.accorder:hover b{color:var(--emerald)}
@media(max-width:900px){.accgrid{grid-template-columns:1fr}}

/* the categoryc name, shown small above or beside an item wherever it appears:
   cards, search drawer, cart, checkout summary, order pages, admin */
.cat-line{display:block;font-size:.7rem;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.09em;line-height:1.35;font-style:normal;font-weight:400}
.sd-card .cat-line{margin-top:2px}
.cinfo .cat-line{margin-bottom:1px}
.sline .st .cat-line{font-size:.66rem;margin-bottom:1px}
.okline .cat-line,.adbody .cat-line{font-size:.66rem;margin-top:2px}

/* ===== add-to-cart on a card ============================================ */
/* .card is now the container; .card-hit is the link that used to be .card,
   so the tile keeps its layout and the button sits outside the anchor. */
.card-hit{display:flex;flex-direction:column;flex:1;min-height:0}
.card .body{padding-bottom:10px}

.cardadd{margin:0 15px 14px;height:40px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:.85rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,border-color .15s,color .15s}
.cardadd svg{width:16px;height:16px;flex:0 0 auto}
.cardadd:hover:not([disabled]){background:var(--emerald);border-color:var(--emerald);color:#fff}
.cardadd:active:not([disabled]){transform:translateY(1px)}
.cardadd[disabled]{opacity:.5;cursor:not-allowed}
.cardadd.added{background:var(--emerald);border-color:var(--emerald);color:#fff}
.cardadd.added svg{display:none}

/* confirmation strip, so adding without a page change is still visible */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:80;
  display:flex;align-items:center;gap:14px;max-width:min(560px,92vw);
  background:var(--ink);color:#fff;border-radius:12px;padding:13px 18px;
  font-size:.9rem;box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .26s cubic-bezier(.2,.8,.3,1),opacity .26s;opacity:0}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast b{white-space:nowrap;color:var(--gold-lt)}
.toast a{white-space:nowrap;color:#fff;text-decoration:underline;text-underline-offset:3px;
  font-weight:600}
.toast a:hover{color:var(--gold-lt)}
@media(max-width:520px){
  .toast{left:12px;right:12px;bottom:16px;transform:translateY(140%);max-width:none}
  .toast.on{transform:translateY(0)}
  .cardadd{margin:0 10px 10px;font-size:.8rem}
}

/* promotion line in the cart / checkout summary */
.csum .row.sale{color:var(--emerald)}
.csum .row.sale b{color:var(--emerald)}
.csum .row.sale .kg{color:var(--emerald);opacity:.75}

/* ===== sale pop-in on the home page ===================================== */
.promo-scrim{position:fixed;inset:0;background:rgba(12,20,17,.55);z-index:90;
  animation:pfade .2s ease}
@keyframes pfade{from{opacity:0}to{opacity:1}}
body.promo-open{overflow:hidden}

.promo{position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,92vw);padding:34px 30px 28px;border-radius:22px;text-align:center;
  color:#F6EFDC;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(155deg,var(--emerald-dp) 0%,var(--emerald) 55%,var(--emerald-lt) 100%);
  box-shadow:0 26px 70px rgba(0,0,0,.42);animation:ppop .32s cubic-bezier(.2,.9,.3,1)}
@keyframes ppop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}
                to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* the same faint geometric texture the footer uses */
.promo:before{content:"";position:absolute;inset:0;border-radius:22px;opacity:.14;
  background-image:radial-gradient(circle at 1px 1px,var(--gold-lt) 1.3px,transparent 0);
  background-size:24px 24px;pointer-events:none}
.promo > *{position:relative}

.promo-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:grid;place-items:center}
.promo-x:hover{background:rgba(255,255,255,.26)}
.promo-x svg{width:17px;height:17px}

.promo-kicker{font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-lt)}
.promo-pct{font-size:4.4rem;font-weight:800;line-height:1;color:#fff;margin:6px 0 0;
  letter-spacing:-.03em}
.promo-pct i{font-style:normal;font-size:2rem;vertical-align:super;margin-left:2px}
.promo-sub{font-size:1.05rem;color:#EADFC4;margin-bottom:20px}

.promo-clock{display:flex;gap:8px;margin-bottom:12px}
.promo-clock div{background:rgba(255,255,255,.12);border-radius:11px;padding:9px 0;
  min-width:64px;display:flex;flex-direction:column;gap:2px}
.promo-clock b{font-size:1.5rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.promo-clock span{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-lt)}
.promo-ends{font-size:.85rem;color:#EADFC4;margin-bottom:20px}

.promo-cta{width:100%;justify-content:center;background:var(--gold);color:#3A2E12;
  font-weight:700;border:0}
.promo-cta:hover{background:var(--gold-lt);color:#3A2E12}
.promo-later{margin-top:12px;border:0;background:none;color:#EADFC4;opacity:.75;
  font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.promo-later:hover{opacity:1}

@media(max-width:420px){
  .promo{padding:28px 20px 22px}
  .promo-pct{font-size:3.6rem}
  .promo-clock div{min-width:54px}
  .promo-clock b{font-size:1.25rem}
}

/* ===== cart drawer ====================================================== */
.cd-scrim{position:fixed;inset:0;background:rgba(12,20,17,.42);z-index:75;animation:sdfade .16s ease}
body.cd-open{overflow:hidden}
.cdrawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);z-index:76;
  background:var(--card);display:flex;flex-direction:column;
  box-shadow:-8px 0 34px rgba(0,0,0,.2);animation:cdin .24s cubic-bezier(.2,.8,.3,1)}
@keyframes cdin{from{transform:translateX(100%)}to{transform:none}}

.cd-top{display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px 14px;flex:0 0 auto}
.cd-top h4{margin:0;font-size:1.25rem;font-weight:600;display:flex;align-items:center;gap:10px}
.cd-count{background:var(--paper-2);color:var(--ink-2);border-radius:999px;
  font-size:.8rem;font-weight:600;min-width:26px;height:26px;display:grid;place-items:center;
  padding:0 8px}
.cd-x{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--card);
  cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.cd-x:hover{background:var(--paper)}
.cd-x svg{width:19px;height:19px}

.cd-body{flex:1 1 auto;overflow-y:auto;padding:0 22px}
.cd-item{display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.cd-ph{width:74px;height:88px;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:var(--paper-2);display:grid;place-items:center}
.cd-ph img{width:100%;height:100%;object-fit:contain}
.cd-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.cd-titlerow{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.cd-name{font-size:.95rem;line-height:1.35;color:var(--ink)}
.cd-name:hover{text-decoration:underline;text-underline-offset:2px}
.cd-line{white-space:nowrap;font-size:.92rem}
.cd-spec,.cd-unit{font-size:.86rem;color:var(--ink-2);line-height:1.4}
.cd-oos{font-size:.8rem;color:var(--warn)}
.cd-actions{display:flex;align-items:center;gap:14px;margin-top:8px}
.cd-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;
  height:44px}
.cd-qty button{width:40px;height:100%;border:0;background:transparent;cursor:pointer;
  font-size:1.05rem;color:var(--ink-2)}
.cd-qty button:hover{color:var(--emerald)}
.cd-qty span{min-width:28px;text-align:center;font-size:.94rem}
.cd-bin{width:38px;height:38px;border:0;background:transparent;cursor:pointer;
  color:var(--ink-3);display:grid;place-items:center;border-radius:8px}
.cd-bin:hover{color:var(--warn);background:#FBE4E0}
.cd-bin svg{width:19px;height:19px}
.cd-empty{padding:50px 0;text-align:center;color:var(--ink-2)}
.cd-empty p{margin:0 0 16px}

.cd-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:16px 22px 22px;
  background:var(--card)}
.cd-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:7px 0;font-size:.95rem}
.cd-row.cd-disc{color:var(--emerald)}
.cd-row.cd-disc span{display:flex;gap:8px;align-items:flex-start}
.cd-row.cd-disc i{font-style:normal}
.cd-tag{width:16px;height:16px;flex:0 0 auto;margin-top:2px}
.cd-row.cd-total{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;
  font-size:1.05rem}
.cd-row.cd-total b{font-size:1.3rem}
.cd-note{font-size:.8rem;color:var(--ink-3);margin:2px 0 14px}
.cd-checkout{display:block;text-align:center;border:1px solid var(--ink);border-radius:6px;
  padding:15px;font-size:1rem;font-weight:500;color:var(--ink);background:var(--card);
  transition:.16s}
.cd-checkout:hover{background:var(--ink);color:#fff}
.cd-view{display:block;text-align:center;margin-top:12px;font-size:.86rem;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px}
.cd-view:hover{color:var(--emerald)}
@media(max-width:430px){.cd-body,.cd-top,.cd-foot{padding-left:16px;padding-right:16px}}

/* ---------------------------------------------------------------------------
   MOBILE CONTENT PAGES  (/pages/*, /policies/*)
   The .page rules above sit outside every media query, so a phone was getting
   the desktop 2rem heading and 22px gutters. Appended last so these win the
   cascade without editing anything above.
   ------------------------------------------------------------------------- */
@media(max-width:640px){
  .wrap{padding:0 16px}
  .crumbs{padding:12px 0;font-size:.8rem}

  .page{padding:4px 0 44px}
  .page h1{font-size:1.5rem;letter-spacing:-.01em;margin:6px 0 8px}
  .page .lede{font-size:1rem;margin:0 0 20px}
  .page h3{font-size:1rem;margin:24px 0 6px}
  .page p,.page li{font-size:.95rem;line-height:1.65}
  .page ul,.page ol{padding-left:20px}
  .page .note{padding:12px 14px;margin:16px 0}

  /* an IBAN, an email or a bare URL must wrap rather than widen the page */
  .page{overflow-wrap:anywhere}

  /* comfortable tap targets on links inside prose */
  .page a{padding:2px 0}
}
@media(max-width:420px){
  .page h1{font-size:1.35rem}
  .page .lede{font-size:.95rem}
}

/* ---------------------------------------------------------------------------
   MOBILE HEADER ONE ROW
   header.site .wrap is flex-wrap:wrap below 680px. On a 360px phone the
   content box is 316px, and the logo (~144px at height:40) plus three icon
   buttons plus the 22px gap overflowed it - so .hactions wrapped to its own
   line and the header became three stacked bands (logo / icons / search).
   Capping the logo's WIDTH keeps the brand and the actions on one row; the
   search bar stays on its own row underneath, as before.
   ------------------------------------------------------------------------- */
@media(max-width:680px){
  header.site .wrap{gap:10px;padding:10px 16px}
  .brand{flex:0 1 auto;min-width:0}
  .brand-logo{height:38px;max-width:132px}
  .hactions{flex:0 0 auto;gap:6px;margin-left:auto}
  .searchbar{order:3;flex-basis:100%;max-width:none}
  .searchbar input{height:42px;font-size:.9rem}
}
@media(max-width:400px){
  .brand-logo{height:34px;max-width:108px}
  .hactions{gap:3px}
}

/* ---------------------------------------------------------------------------
   HIDE HORIZONTAL NAV ON PHONES
   The department strip duplicates the burger drawer, which is already the
   navigation below 1150px (.burger{display:grid}). On a phone it was a second
   swipeable band eating vertical space above the fold, so it goes.
   Tablets keep it - only phones lose it.
   ------------------------------------------------------------------------- */
@media(max-width:680px){
  nav.main{display:none}
}

/* ---------------------------------------------------------------------------
   SMALLER PRODUCT IMAGE ON PHONES
   .slider is aspect-ratio:1/1, so its width is also its height. At the 900px
   rule (max-width:460px) a 360px phone rendered a ~332px square that filled
   most of the fold and pushed the price and Add to cart below it. Capping the
   width brings the buy column up without cropping anything - the image is
   object-fit:contain, so it just scales.
   ------------------------------------------------------------------------- */
@media(max-width:680px){
  .pdp2-media{padding:10px}
  .slider{max-width:300px;margin-inline:auto}
}
@media(max-width:420px){
  .slider{max-width:260px}
}

/* ---------------------------------------------------------------------------
   TWO PRODUCT CARDS PER ROW ON PHONES
   .grid is repeat(auto-fill,minmax(232px,1fr)): two of those need 484px, more
   than the ~328px a 360px phone offers, so auto-fill dropped to a single
   column and the listing became one tall stack. Pinning two explicit columns
   gives ~158px cards - wider than the search drawer's own mobile cards
   (minmax 132px), which already read fine at that size.
   ------------------------------------------------------------------------- */
@media(max-width:680px){
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .cats,.collections{grid-template-columns:1fr 1fr;gap:12px}
}
@media(max-width:420px){
  .grid{gap:10px}
}


/* ---------------------------------------------------------------------------
   PDP ACTION HIERARCHY
   Add to cart was an outlined secondary button while the WhatsApp button was
   full-width bright green - so the page pushed people to WhatsApp rather than
   to buy. Reversed: Add to cart is now the solid primary, and the enquiry is a
   short, quiet secondary sitting beside it.
   ------------------------------------------------------------------------- */
.addbtn{
  background:var(--emerald);
  border-color:var(--emerald);
  color:#fff;
  font-weight:650;
  font-size:1.02rem;
  height:58px;
  box-shadow:0 2px 10px rgba(11,93,78,.18);
}
.addbtn:hover:not([disabled]){
  background:var(--emerald-dp);
  border-color:var(--emerald-dp);
}
.addbtn[disabled]{
  background:var(--paper-2);
  border-color:#C9CFCB;
  color:var(--ink-3);
  box-shadow:none;
}

/* short, secondary, and no longer competing with the buy button */
.demandbtn{
  margin-top:12px;
  height:40px;
  width:auto;
  align-self:flex-start;
  display:inline-flex;
  padding:0 16px;
  background:transparent;
  color:#128C4A;
  border:1px solid #9EDCB8;
  font-weight:600;
  font-size:.86rem;
  gap:7px;
}
.demandbtn:hover{background:#F2FBF6;border-color:#25D366;color:#0F7A40}
.demandbtn svg{width:16px;height:16px}

@media(max-width:680px){
  .addbtn{height:54px;font-size:.98rem}
  .demandbtn{height:38px;font-size:.83rem}
}

/* ---------------------------------------------------------------------------
   PROMO CARDS UNDER THE VIDEO
   Two equal cards on desktop, stacked on phones. The whole card is the link,
   so the tap target is the card and not just the wording.
   ------------------------------------------------------------------------- */
.adsrow{padding:30px 0 4px}
.adgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.adcard{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:26px 26px 22px;border-radius:14px;color:#fff;
  min-height:186px;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.adcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.ad-course{background:linear-gradient(135deg,#0B5B3F 0%,#07422D 100%)}
.ad-tutor {background:linear-gradient(135deg,#126E63 0%,#0A3F49 100%)}

.adtag{
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:12px;
}
.adcard h3{margin:0 0 8px;font-size:1.5rem;line-height:1.18;font-weight:700;letter-spacing:-.01em}
.adcard h3 em{font-style:normal;color:#E7C77A}
.adcard p{margin:0 0 16px;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.86);max-width:38ch}
.adcta{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-weight:650;font-size:.9rem;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px;
}
.adcta svg{width:16px;height:16px;transition:transform .18s ease}
.adcard:hover .adcta svg{transform:translateX(3px)}

/* large watermark motif, kept behind the text */
.adart{
  position:absolute;right:-14px;bottom:-14px;width:126px;height:126px;
  color:#fff;opacity:.10;z-index:-1;pointer-events:none;
}

@media(max-width:820px){
  .adgrid{grid-template-columns:1fr;gap:14px}
  .adcard{min-height:0;padding:22px 20px 18px}
  .adcard h3{font-size:1.3rem}
  .adart{width:104px;height:104px}
}

/* ---------------------------------------------------------------------------
   PROMO CARD ARTWORK
   Swapped 2026-09-09: these three are now full designed banners (their own
   Urdu headline/CTA/phone number already baked in), not an abstract motif
   under a text overlay - so no dark gradient wash, and background-size is
   "contain" not "cover", since cropping these would cut off real text/CTAs
   rather than just an artistic edge. background-color is the letterbox fill
   behind the image (also what shows while the file loads / if it 404s).
   The card's own h3/p/adtag/adcta text is hidden below since it would just
   duplicate what the banner already says.
   ------------------------------------------------------------------------- */
.ad-course{
  background-color:#F7F0DD;
  background-image:url('/assets/img/ad-taleem-new.png');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.ad-tutor{
  background-color:#F7F0DD;
  background-image:url('/assets/img/ad-aitutor-new.jpeg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.ad-tarseel{
  background-color:#F7F0DD;
  background-image:url('/assets/img/ad-tarseel-new.jpeg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.ad-tarseel h3 em{color:#F4D98B}
/* the artwork replaces it */
.adcard .adart{display:none}
.ad-course .adtag, .ad-course h3, .ad-course p, .ad-course .adcta,
.ad-tutor .adtag, .ad-tutor h3, .ad-tutor p, .ad-tutor .adcta, .ad-tutor .adicon,
.ad-tarseel .adtag, .ad-tarseel h3, .ad-tarseel p, .ad-tarseel .adcta{
  display:none;
}
/* min-height/aspect for these three cards is set at the very end of this
   file, after the "PROMO CARDS - COMPACT" section below which would
   otherwise override it back to min-height:0 (same selector, later wins). */

/* ---------------------------------------------------------------------------
   PROMO CARD APP ICON
   ------------------------------------------------------------------------- */
.adicon{width:60px;height:60px;border-radius:14px;margin-bottom:12px;
  background:#fff;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.ad-tutor .adtag{margin-bottom:10px}
@media(max-width:820px){.adicon{width:50px;height:50px;border-radius:12px}}


/* ---------------------------------------------------------------------------
   PROMO CARDS - COMPACT
   Roughly a third shorter: tighter padding, smaller headline, the icon inline
   with the tag rather than stacked above it, and the blurb capped at two lines
   so a long sentence cannot push the card taller than its neighbour.
   ------------------------------------------------------------------------- */
.adsrow{padding:22px 0 2px}
.adgrid{gap:14px}

.adcard{min-height:0;padding:16px 20px 14px;border-radius:12px}

/* icon and tag share a row */
.ad-tutor{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto;
  column-gap:12px;align-items:center}
.ad-tutor .adicon{grid-row:1;grid-column:1;width:42px;height:42px;margin:0;padding:5px;border-radius:10px}
.ad-tutor .adtag{grid-row:1;grid-column:2;justify-self:start;margin:0}
.ad-tutor h3,
.ad-tutor p,
.ad-tutor .adcta{grid-column:1 / -1}

.adcard .adtag{margin-bottom:8px;padding:2px 9px;font-size:.66rem}
.adcard h3{font-size:1.18rem;line-height:1.2;margin:6px 0 5px}
.adcard p{
  font-size:.83rem;line-height:1.45;margin:0 0 10px;max-width:46ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.adcard .adcta{font-size:.84rem;padding-bottom:1px}
.adcard .adcta svg{width:14px;height:14px}

@media(max-width:820px){
  .adcard{padding:14px 16px 12px}
  .adcard h3{font-size:1.08rem}
  .adcard p{font-size:.8rem;-webkit-line-clamp:3}
  .ad-tutor .adicon{width:38px;height:38px}
}

/* ---------------------------------------------------------------------------
   RECEIPT UPLOAD  (checkout: reference number OR screenshot)
   ------------------------------------------------------------------------- */
.rcpt-or{display:flex;align-items:center;gap:10px;margin:12px 0 10px;
  color:var(--ink-3);font-size:.8rem;text-transform:uppercase;letter-spacing:.6px}
.rcpt-or:before,.rcpt-or:after{content:'';flex:1;height:1px;background:var(--line)}
.rcpt-field input[type=file]{width:100%;font:inherit;font-size:.9rem;padding:9px;
  border:1px dashed #C9CFCB;border-radius:9px;background:var(--paper-2);cursor:pointer}
.rcpt-field input[type=file]:hover{border-color:var(--emerald)}
.rcpt-field input[type=file]:disabled{opacity:.5;cursor:not-allowed}


/* ---------------------------------------------------------------------------
   CARD HOVER IMAGE
   The second gallery picture crossfades in over the first. Both are laid on
   top of each other so the card never changes height, and the swap is skipped
   entirely on touch devices, where "hover" fires on tap and would fight the
   link.
   ------------------------------------------------------------------------- */
.card .ph{position:relative;overflow:hidden}
.card .ph img{transition:opacity .32s ease, transform .35s ease}
.card .ph .ph2{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:14px;box-sizing:border-box;
  /* the tile's own background, so this fully hides the first image and
     nothing has to be faded out underneath it */
  background:var(--paper-2);
  opacity:0;pointer-events:none;
}
.card:hover .ph .ph2{opacity:1}

@media(hover:none){
  .card .ph .ph2{display:none}
}
@media(prefers-reduced-motion:reduce){
  .card .ph img{transition:none}
}

/* ---- Taj search assistant ----------------------------------------------- */
.taj-chat{position:fixed;right:22px;bottom:84px;z-index:80;font-family:inherit}
.taj-chat-launch{border:0;border-radius:999px;background:var(--emerald);color:#fff;padding:12px 17px;box-shadow:0 10px 28px rgba(5,45,37,.24);font:inherit;font-weight:700;cursor:pointer}
.taj-chat-launch:hover{background:var(--emerald-lt)}
.taj-chat-launch-icon{margin-right:5px}
.taj-chat-panel{position:absolute;right:0;bottom:54px;width:min(360px,calc(100vw - 32px));height:470px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(12,35,28,.24);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding:0}
.taj-chat-head{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--emerald-dp);color:#fff}
.taj-chat-head strong,.taj-chat-head small{display:block}.taj-chat-head strong{font-size:.92rem}.taj-chat-head small{font-size:.68rem;opacity:.75;margin-top:1px}
.taj-chat-head button{border:0;background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.taj-chat-welcome{flex:0 0 auto;padding:10px 16px 12px;background:#fff;color:var(--ink);font-size:.84rem;line-height:1.35;border-bottom:1px solid var(--line)}
.taj-chat-messages{flex:1;overflow-y:auto;padding:14px;background:var(--paper)}
.taj-chat-bubble{max-width:90%;padding:9px 11px;border-radius:12px;margin-bottom:9px;font-size:.84rem;line-height:1.35}
.taj-chat-bot{background:#fff;border:1px solid var(--line);color:var(--ink)}.taj-chat-user{margin-left:auto;background:var(--emerald);color:#fff}
.taj-chat-quick-label{display:block;margin-top:10px;font-size:.72rem;font-weight:700;color:var(--emerald)}
.taj-chat-quick{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.taj-chat-quick a{color:var(--emerald);border:1px solid var(--line);border-radius:999px;padding:5px 7px;text-decoration:none;font-size:.72rem;background:var(--paper)}.taj-chat-quick a:hover{background:var(--emerald);color:#fff}
.taj-chat-wa{display:inline-block;margin-top:9px;padding:7px 9px;border-radius:8px;background:#25d366;color:#fff!important;text-decoration:none;font-size:.74rem;font-weight:700}.taj-chat-wa:hover{background:#1da851}
.taj-chat-answer{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:9px;font-size:.82rem;color:var(--ink)}
.taj-chat-answer strong{display:block;color:var(--emerald);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin:3px 0 6px}
.taj-chat-link{display:block;padding:7px 0;border-top:1px solid #eee;color:var(--ink);text-decoration:none}.taj-chat-link:hover{color:var(--emerald)}
.taj-chat-product{display:flex;gap:8px;align-items:center}.taj-chat-product img{width:38px;height:44px;object-fit:contain;background:var(--paper);border-radius:5px;flex:none}.taj-chat-product span{min-width:0}
.taj-chat-link small{display:block;color:var(--ink-3);font-size:.72rem;margin-top:2px}
.taj-chat-form{display:flex;gap:7px;padding:11px;border-top:1px solid var(--line);background:var(--card)}
.taj-chat-form input{min-width:0;flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;font-size:.82rem}.taj-chat-form button{border:0;border-radius:10px;background:var(--emerald);color:#fff;padding:0 12px;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:680px){.taj-chat{right:16px;bottom:76px}.taj-chat-panel{bottom:52px;height:min(470px,calc(100vh - 100px))}}

/* ---------------------------------------------------------------------------
   PROMO CARD BANNER SIZING (2026-09-09)
   Placed last on purpose - the "PROMO CARDS - COMPACT" section above sets
   .adcard{min-height:0}, which would otherwise win over an earlier rule with
   the same selector. These three cards now show a full designed banner
   image (background-size:contain, no text overlay - see PROMO CARD ARTWORK
   above), so they need real height instead of collapsing to just padding.
   ------------------------------------------------------------------------- */
.ad-course, .ad-tutor, .ad-tarseel{ min-height:220px; }
@media(max-width:820px){
  .ad-course, .ad-tutor, .ad-tarseel{ min-height:0; aspect-ratio:16/9.4; padding:0; }
}

/* ---------------------------------------------------------------------------
   PROMO CARDS - DYNAMIC (CRUD, 2026-09-09)
   Now driven by web_promo_boxes (ERP: web_promo_boxes.php, Orders >
   PO/Customers), synced every 2 min by sync_promos.php. Each card is just the
   uploaded banner image - it already carries its own headline/CTA baked in,
   so no text overlay/gradient here (see the old .ad-course/.ad-tutor/
   .ad-tarseel block above, kept for reference but unused now that index.php
   loops over the CRUD rows instead of these three fixed classes).
   ------------------------------------------------------------------------- */
.adcard-dyn{
  position:relative;overflow:hidden;border-radius:14px;
  display:block;background:#F7F0DD;min-height:220px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.adcard-dyn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.adcard-dyn img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:820px){
  .adcard-dyn{min-height:0;aspect-ratio:16/9.4}
  .adgrid{grid-template-columns:1fr !important;gap:14px}
}

/* Promo box "More Details" - a plain link to a dedicated page per box
   (index.php's $moreDetailsUrls), not a CRUD field. That approach (a modal
   fed by details_text/details_image_filename on web_promo_boxes) was tried
   and rolled back. .adcard-box just wraps the existing .adcard-dyn link
   with an optional link below it rather than changing the card itself. */
.adcard-box{display:flex;flex-direction:column;gap:8px}
.adcard-more{align-self:center;border:1px solid var(--emerald,#1f6f4a);
  background:#fff;color:var(--emerald,#1f6f4a);font-weight:600;font-size:.85rem;
  padding:7px 18px;border-radius:999px;text-decoration:none;transition:background .15s ease,color .15s ease}
.adcard-more:hover{background:var(--emerald,#1f6f4a);color:#fff}