/* ==========================================================================
   Noor — taweez.online
   The design direction the client chose. Hand-written CSS, no build step, so
   the site can be deployed by copying files and edited on the server if it
   ever has to be.
   ========================================================================== */

:root{
  --green:#0d5c46; --green-d:#073a2c; --green-l:#127a5c;
  --gold:#b98b2e; --gold-l:#d9ae52; --gold-p:#f3e6c8;
  /* Dark Noor. Three surfaces, each a step lighter than the last, so a card
     always reads as sitting ON the page rather than merging into it — which is
     exactly what went wrong when the page and the cards shared one cream. */
  --cream:#08110d;      /* the page itself — near-black with a green cast */
  --paper:#0f261d;      /* cards, panels, inputs — one step up */
  --raised:#153428;     /* hover / the step above a card */
  --ink:#f0ead9;        /* warm cream text, not pure white */
  --ink-2:#a3bcb0;      /* muted */
  --line:#1c3a2e;       /* separators */
  --line-gold:rgba(217,174,82,.28);
  --danger:#ff9d8a; --danger-bg:rgba(168,50,31,.22);
  --ok:#7fdcb0; --ok-bg:rgba(29,107,79,.25);
  --r:14px;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -12px rgba(0,0,0,.55);
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:Amiri,Georgia,serif;font-weight:700;line-height:1.2;margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:820px}

/* Naskh, not nastaliq. Nastaliq's steep cascading baseline is beautiful at
   poster size and close to unreadable at 14px, and it needs roughly double the
   line height for the same text — which is what forced the oversized line boxes
   everywhere. Naskh sits flat, reads small, and matches how BBC Urdu is set. */
.ur{font-family:'Noto Naskh Arabic','Geeza Pro',serif;direction:rtl;line-height:1.85}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.rule{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold)}
.rule::before,.rule::after{content:'';height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule::after{background:linear-gradient(270deg,transparent,var(--gold))}
.pattern{position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1'%3E%3Cpath d='M36 4 44 20 62 22 50 35 53 53 36 45 19 53 22 35 10 22 28 20Z'/%3E%3Ccircle cx='36' cy='36' r='30'/%3E%3Cpath d='M36 6v60M6 36h60M15 15l42 42M57 15L15 57'/%3E%3C/g%3E%3C/svg%3E");background-size:110px;pointer-events:none}

/* ---------- buttons & controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 26px;font:600 15px/1 Inter,sans-serif;cursor:pointer;text-decoration:none;transition:.18s}
.btn-p{background:var(--green-l);color:#04241b}
.btn-p:hover{background:#17916d}
.btn-g{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#3a2b06}
.btn-g:hover{filter:brightness(1.06)}
.btn-o{background:transparent;color:var(--gold-l);box-shadow:inset 0 0 0 1.5px var(--line-gold)}
.btn-o:hover{background:rgba(217,174,82,.1);box-shadow:inset 0 0 0 1.5px var(--gold)}
.btn-light{background:transparent;color:#f4efe2;box-shadow:inset 0 0 0 1.5px rgba(217,174,82,.5)}
.btn-light:hover{background:rgba(217,174,82,.12)}
.btn-sm{padding:9px 16px;font-size:13.5px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.link{color:var(--gold-l);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.link-quiet{color:var(--ink-2);text-decoration:none;font-size:13.5px}
.link-quiet:hover{color:var(--gold-l)}

label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.hint{font-weight:400;color:var(--ink-2);font-size:12.5px}
input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],textarea,select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#061410;
  font:400 15px/1.4 Inter,sans-serif;color:var(--ink);transition:.15s}
input::placeholder,textarea::placeholder{color:#6d8579}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,139,46,.15)}
textarea{min-height:92px;resize:vertical}
.field{margin-bottom:16px}
.field-error input,.field-error textarea{border-color:var(--danger)}
.err{color:var(--danger);font-size:13px;margin-top:5px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.grid-2{grid-template-columns:1fr}}

.alert{border-radius:10px;padding:14px 18px;margin-bottom:20px;font-size:14.5px}
.alert-ok{background:var(--ok-bg);color:var(--ok);border-left:3px solid var(--ok)}
.alert-err{background:var(--danger-bg);color:var(--danger);border-left:3px solid var(--danger)}

/* ---------- header ---------- */
.topbar{background:#030706;color:#cfe0d8;font-size:13px;text-align:center;padding:9px 20px}
.topbar b{color:var(--gold-l)}
header.site{position:sticky;top:0;z-index:50;background:rgba(8,17,13,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:78px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
/* The logo: the full Bismillah in naskh, set BESIDE the name rather than above
   it. Stacked, the two sat as separate objects of different widths; side by
   side with a hairline between, they read as one lockup.

   Solid deep green, not a gold gradient. A gradient across text this small goes
   muddy, and mid-gold on cream is weak — the green is the brand's own colour and
   holds its contrast at any size. */
.brand-bismillah{
  flex:none;
  font-family:Amiri,'Noto Naskh Arabic','Geeza Pro',serif;
  font-size:22px;
  line-height:1.3;
  white-space:nowrap;
  /* Gold on the dark page — the deep green it used on cream would disappear. */
  color:var(--gold-l);
}
.brand-rule{flex:none;width:1px;height:30px;background:linear-gradient(180deg,transparent,var(--gold),transparent)}
.brand-text{display:flex;flex-direction:column;justify-content:center}
.brand-t{font-family:Amiri,serif;font-size:21px;font-weight:700;display:block;line-height:1.15}
.brand-s{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* On the dark footer the green would disappear, so the Bismillah goes gold. */
.brand-on-dark .brand-bismillah{color:var(--gold-l)}
.brand-t{color:var(--ink)}
.brand-on-dark .brand-t{color:#fff}

@media(max-width:820px){
  /* Two elements plus a basket and a button do not fit a narrow header, and the
     domain name is the one that has to survive. */
  .brand-bismillah,.brand-rule{display:none}
}
.nav-links{display:flex;gap:22px}
.nav a.lnk{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav a.lnk:hover,.nav a.lnk[aria-current=page]{color:var(--gold-l)}
.basket-link{position:relative;display:flex;align-items:center;gap:7px;text-decoration:none;font-size:14.5px;font-weight:600;color:var(--ink)}
.basket-count{background:var(--gold-l);color:#3a2b06;border-radius:999px;min-width:21px;height:21px;padding:0 6px;display:grid;place-items:center;font:700 11.5px/1 Inter,sans-serif}
/* The logo lockup is wide, so the links have to give way sooner than before —
   at 980px they were wrapping onto two lines inside the header. */
@media(max-width:1140px){.nav-links{display:none}}

/* Phones: the header has to hold a brand, a basket and a button in 375px.
   The strapline and the CTA are the two things a phone does not need — the
   basket link and the logo both already lead where the CTA would. */
@media(max-width:620px){
  .nav{height:64px;gap:14px}
  .brand-s{display:none}
  .brand-t{font-size:19px}
  
  .nav .btn-p{display:none}
  .topbar{font-size:12px;padding:8px 14px}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0d4535 0%,#062018 100%);color:var(--ink);border-bottom:1px solid var(--line)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:20px 20px 22px}
.hero h1{font-size:clamp(26px,3vw,35px);color:#fff}
.hero h1 em{font-style:normal;color:var(--gold-l)}
.hero .ur-title{font-size:clamp(17px,2.2vw,21px);line-height:1.7;color:var(--gold-l);margin-bottom:8px}
.hero p.lead{font-size:15px;color:#cfe0d8;max-width:56ch;margin:8px 0 14px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-pts{display:flex;flex-wrap:nowrap;gap:15px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(217,174,82,.28);font-size:12.5px;color:#cfe0d8;white-space:nowrap}
.hero-pts span{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.tick{width:15px;height:15px;flex:none;border-radius:50%;background:var(--gold);color:var(--green-d);display:grid;place-items:center;font-size:9px;font-weight:800}

/* Phones cannot hold three of these side by side without shrinking the text to
   nothing, so below this width they are allowed to wrap again. */
@media(max-width:620px){
  .hero-pts{flex-wrap:wrap;white-space:normal;gap:8px 16px;font-size:13px}
}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:26px;padding:28px 20px 32px}}

/* The Qur'anic verse in the hero's right column, in place of the product
   mockup that used to sit there. Amiri carries Arabic properly; the fallback
   chain matters because a missing glyph here is very visible. */
.verse{border:1px solid rgba(217,174,82,.4);border-radius:14px;padding:18px 24px;background:rgba(0,0,0,.14);text-align:center}
.hero-side{display:flex;flex-direction:column}
.verse-strap{font-size:17px;line-height:1.7;color:var(--gold-l);margin:0 0 12px;text-align:center}
.verse-ar{font-family:Amiri,'Noto Naskh Arabic','Geeza Pro',serif;font-size:clamp(19px,2.3vw,25px);line-height:1.95;color:var(--gold-l);margin:0}
.verse-ur{font-size:15px;line-height:1.8;color:#e3ddcd;margin:14px 0 0}
.verse-en{font-size:13.5px;line-height:1.65;color:#a8c4b9;margin:10px 0 0;font-style:italic}
.verse-ref{font:600 11px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:12px 0 0}
@media(max-width:900px){.verse{padding:22px 20px}}

/* ---------- page head (inner pages) ---------- */
.page-head{position:relative;overflow:hidden;background:linear-gradient(160deg,#10402f 0%,#070f0c 100%);color:var(--ink);border-bottom:1px solid var(--line);padding:30px 0 34px;text-align:center}
.page-head h1{color:#fff;font-size:clamp(28px,3.8vw,38px);margin:6px 0 8px}
.page-head .ur{color:var(--gold-l);font-size:19px;line-height:1.7}
.page-head p{color:#cfe0d8;max-width:62ch;margin:0 auto}
/* Breadcrumbs default to the LIGHT background, and only go pale inside the dark
   page head. They were written the other way round, so on a cream page the
   links rendered near-white on near-white and could not be read. */
.crumbs{font-size:13px;color:var(--ink-2);margin-bottom:8px}
.crumbs a{color:var(--gold-l);text-decoration:none;font-weight:600}
.crumbs a:hover{color:#eac97a;text-decoration:underline;text-underline-offset:3px}
.page-head .crumbs{color:#a8c4b9}
.page-head .crumbs a{color:#cfe0d8;font-weight:500}
.page-head .crumbs a:hover{color:var(--gold-l)}

/* ---------- strips & sections ---------- */
.strip{background:#050c09;border-bottom:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:18px 20px}
.strip div{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.strip b{display:block;color:var(--ink);font-size:14.5px}
.ic{width:34px;height:34px;flex:none;border-radius:9px;background:rgba(217,174,82,.16);color:var(--gold-l);display:grid;place-items:center}
@media(max-width:860px){.strip .wrap{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:520px){.strip .wrap{grid-template-columns:1fr}}

/* Compact rhythm. Sections were 72px top and bottom, so every join between two
   sections cost 144px of empty page — on a catalogue of short cards that reads
   as the site being unfinished rather than as breathing room. */
section{padding:44px 0}
section.tight{padding:30px 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 28px}
.sec-head h2{font-size:clamp(26px,3.2vw,34px);margin:8px 0 10px}
.sec-head p{color:var(--ink-2);margin:0}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px}
/* A band that is DARKER than the page, so cards on it still lift. */
.bg-paper{background:#050c09;border-block:1px solid var(--line)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;position:relative}
.step-n{font-family:Amiri,serif;font-size:40px;color:rgba(217,174,82,.22);line-height:1;position:absolute;top:14px;right:18px}
.step h3{font-size:18px;margin-bottom:8px}
.step p{margin:0;font-size:14.5px;color:var(--ink-2)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- catalogue ---------- */
.grp{margin-bottom:34px}
.grp:last-child{margin-bottom:0}
.grp-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:16px;border-bottom:2px solid var(--line-gold)}
.grp-head h2,.grp-head h3{font-size:25px}
.grp-head h2 a,.grp-head h3 a{text-decoration:none}
.grp-head h2 a:hover,.grp-head h3 a:hover{color:var(--green)}
.grp-head .ur{font-size:18px;color:var(--gold-l)}
.grp-head p{margin:0;font-size:14px;color:var(--ink-2);flex:1 1 320px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(278px,1fr));gap:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:6px;transition:.18s;position:relative;cursor:pointer}
.bg-paper .card{background:var(--raised)}
.card:hover{border-color:var(--gold);background:var(--raised);transform:translateY(-3px);box-shadow:var(--shadow)}
/* English on the left, Urdu on the right of the same line. Aligned on the top
   rather than the baseline: nastaliq's descenders drop well below a latin
   baseline, and baseline-aligning the two pushes the Urdu visibly low. */
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.card-top h3{margin:0;font:700 18px/1.45 Amiri,serif;flex:1 1 auto}
.card h3 a{text-decoration:none}
.card h3 a::after{content:'';position:absolute;inset:0}
.card .card-ur{flex:0 0 auto;font-size:15.5px;line-height:1.5;color:var(--gold-l);text-align:right;max-width:52%}
/* The purpose is the label; the summary is the explanation under it. */
.card .card-purpose{margin:0;font-size:13.5px;font-weight:600;color:var(--gold-l)}
.card .card-summary{margin:4px 0 0;font-size:13.2px;line-height:1.6;color:var(--ink-2);flex:1}
.card .card-more{display:block;margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);font:600 12.5px/1 Inter,sans-serif;color:var(--ink-2);transition:.18s}
.card:hover .card-more{color:var(--gold-l)}

/* ---------- product page ---------- */
.product-head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:22px}
.product-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start}
.order-card{background:var(--paper);border:1.5px solid var(--gold);border-radius:var(--r);padding:24px;position:sticky;top:96px;box-shadow:var(--shadow)}
.order-card h2{font-size:21px;margin-bottom:4px}
.order-card .note{font-size:13px;color:var(--ink-2);margin:0 0 16px}
.order-card fieldset{margin-bottom:0}
.order-card legend{font-size:16px;margin-bottom:10px}
.product-body h2{font-size:22px;margin:22px 0 8px}
.product-body h2:first-child{margin-top:0}
.product-body p{color:var(--ink-2);font-size:15.5px}
/* Four short facts. A row on desktop, a 2x2 grid on a phone — as four
   full-width pills they filled most of the first screen. */
.made-of{list-style:none;display:grid;grid-template-columns:repeat(4,auto);justify-content:start;
  gap:8px 22px;margin:16px 0 0;padding:0}
.made-of li{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-2)}
.made-of li::before{content:'✓';flex:none;width:17px;height:17px;border-radius:50%;
  background:rgba(217,174,82,.16);color:var(--gold-l);display:grid;place-items:center;font-size:10px}
@media(max-width:860px){.made-of{grid-template-columns:1fr 1fr;gap:9px 16px}}
@media(max-width:380px){.made-of li{font-size:12.3px}}
@media(max-width:940px){
  .product-layout{grid-template-columns:1fr;gap:28px}
  /* The order card leads WITHIN the layout, so the reading order is:
     what it is (product-intro) -> order it -> the rest of the detail. The
     description is never behind the form, and the form is never a long scroll
     away. */
  .order-card{position:static;order:-1}
}
/* Scoped to .product-head — these were once written for a `.product` wrapper a
   rebuild removed, so they matched nothing and the Urdu fell back to body size. */
.product-head h1{font-size:clamp(30px,4vw,42px);margin:0}

/* English left, Urdu hard right, one line. Aligned on the top rather than the
   baseline: naskh descenders sit below a latin baseline, and baseline-aligning
   the pair pushes the Urdu visibly low. */
.product-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.product-title h1{flex:1 1 auto;min-width:0}
.product-head .ur-name{flex:0 0 auto;font-size:clamp(22px,2.4vw,28px);line-height:1.5;
  color:var(--gold-l);margin:0;text-align:right;max-width:48%}

/* The about text carries the head now, so it is set as body copy rather than a
   one-line label. */
.product-about{font-size:16px;line-height:1.7;color:var(--ink-2);margin:12px 0 0;max-width:72ch}
@media(max-width:620px){
  .product-about{font-size:15.5px;margin-top:10px}
  .product-title{gap:12px}
  .product-head .ur-name{font-size:21px}
}

.price-row{display:flex;align-items:baseline;gap:12px;padding:16px 0;border-block:1px solid var(--line);margin-bottom:22px}
.price-row span{color:var(--ink-2);font-size:15px}
.spec{list-style:none;margin:22px 0 0;padding:0;font-size:14.5px;color:var(--ink-2)}
.spec li{display:flex;gap:10px;padding:7px 0}
.spec li::before{content:'✓';color:var(--gold);font-weight:800;flex:none}

/* ---------- basket ---------- */
.basket{display:grid;grid-template-columns:1.6fr .9fr;gap:28px;align-items:start}
@media(max-width:920px){.basket{grid-template-columns:1fr}}
.line{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:14px}
.line-top{display:flex;gap:16px;align-items:flex-start}
.line-thumb{width:64px;height:64px;flex:none;border-radius:10px;border:1px solid var(--line-gold);background:repeating-linear-gradient(0deg,var(--raised) 0 10px,rgba(185,139,46,.12) 10px 11px);display:grid;place-items:center;font:700 13px/1 Amiri,serif;color:var(--gold-l)}
.line h3{font-size:18px;margin:0}
.line .ur{font-size:14px;color:var(--gold-l);margin:-2px 0 0}
.line .meta{font-size:13.5px;color:var(--ink-2);margin:2px 0 0}
.line-price{margin-left:auto;text-align:right;font:700 18px/1 Amiri,serif;white-space:nowrap}
.line-detail{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:14px}
.written-for{background:rgba(217,174,82,.13);border:1px solid var(--line-gold);border-radius:9px;padding:11px 14px;font-size:13.8px;color:var(--ink);display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.written-for b{color:var(--ink)}
.written-for.missing{background:var(--danger-bg);color:var(--danger)}
.line-actions{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}
.qty{display:flex;align-items:center;gap:8px}
.qty input{width:74px;text-align:center;padding:9px}
.summary{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;position:sticky;top:96px}
.summary h2{font-size:22px;margin-bottom:16px}
.sum-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:14.5px;color:var(--ink-2)}
.sum-row.total{border-top:1px solid var(--line-gold);margin-top:10px;padding-top:14px;font:700 21px/1.2 Amiri,serif;color:var(--ink)}
.sum-note{font-size:12.5px;color:var(--ink-2);margin-top:14px}
.empty{text-align:center;padding:60px 20px}
.empty h2{font-size:26px;margin-bottom:10px}

/* ---------- checkout ---------- */
.checkout{display:grid;grid-template-columns:1.35fr .8fr;gap:30px;align-items:start}
@media(max-width:920px){.checkout{grid-template-columns:1fr}}
.method{display:block;border:1.5px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;cursor:pointer;background:var(--paper);transition:.15s}
.method:hover{border-color:var(--gold)}
.method.on{border-color:var(--gold);background:rgba(217,174,82,.12)}
.method input{margin-right:10px}
.method-top{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15.5px}
.method-top .cost{margin-left:auto;font:700 16px/1 Amiri,serif}
.method p{margin:6px 0 0 26px;font-size:13.5px;color:var(--ink-2)}
fieldset{border:0;padding:0;margin:0 0 26px}
legend{font:700 20px/1 Amiri,serif;margin-bottom:14px;padding:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;cursor:pointer}
.check input{margin-top:3px;flex:none}

/* ---------- confirmation ---------- */
.confirm-badge{width:72px;height:72px;border-radius:50%;background:rgba(217,174,82,.16);color:var(--gold-l);display:grid;place-items:center;font-size:32px;margin:0 auto 18px}
.order-table{width:100%;border-collapse:collapse;font-size:14.5px}
.order-table th{text-align:left;font:600 12px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding:0 0 10px;border-bottom:1px solid var(--line)}
.order-table td{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.order-table td:last-child,.order-table th:last-child{text-align:right}

/* ---------- faq / details ---------- */
details.faq{background:var(--paper);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
details.faq summary{cursor:pointer;padding:17px 22px;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';color:var(--gold);font-size:20px;line-height:1}
details.faq[open] summary::after{content:'–'}
details.faq p{margin:0;padding:0 22px 20px;font-size:14.5px;color:var(--ink-2)}

/* ---------- prose ---------- */
.prose h2{font-size:26px;margin:34px 0 12px}
.prose h3{font-size:20px;margin:26px 0 10px}
.prose p,.prose li{color:var(--ink-2);font-size:15.5px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:7px}
.prose a{color:var(--gold-l)}

/* ---------- delivery options ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.opt{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.opt.feat{border-color:var(--gold);box-shadow:var(--shadow)}
.opt h3{font-size:22px;margin-bottom:6px}
.opt .p{font-family:Amiri,serif;font-size:30px;margin:10px 0 4px}
.opt ul{margin:16px 0 22px;padding:0;list-style:none;font-size:14.5px;color:var(--ink-2)}
.opt li{display:flex;gap:10px;padding:6px 0}
.opt li::before{content:'✓';color:var(--gold);font-weight:800;flex:none}
@media(max-width:820px){.two{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer.site{background:#040908;color:#9fb8ae;font-size:14px;border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:38px;padding:38px 20px 24px}
.f-blurb{margin:0 0 10px;font-size:13.6px;line-height:1.75;max-width:56ch}
footer.site h2{color:#fff;font:700 15px/1 Amiri,serif;margin:0 0 14px;letter-spacing:.02em}
footer.site a{display:block;text-decoration:none;padding:5px 0;color:#9fb8ae}
footer.site a:hover{color:var(--gold-l)}
.f-bot{border-top:1px solid rgba(255,255,255,.1);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px 22px;flex-wrap:wrap;font-size:13px}
/* The legal links are inline here, not the stacked block the columns use. */
.f-legal{display:flex;gap:18px;flex-wrap:wrap}
.f-legal a{display:inline;padding:0}
@media(max-width:820px){.f-bot{justify-content:flex-start}}
@media(max-width:820px){.f-grid{grid-template-columns:1fr 1fr}.f-blurb{max-width:none}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}
/* Screen-reader-only, for labels that would otherwise be decoration. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ==========================================================================
   MOBILE
   Nearly all of this shop's traffic is a phone. Everything below exists to make
   choosing a taweez and paying for it work with one thumb.
   ========================================================================== */

/* --- inputs must be 16px or iOS zooms the whole page on focus ---
   Safari zooms into any field whose text is under 16px, which throws the
   customer out of the layout mid-order and is the single most jarring thing a
   mobile checkout can do. This is a functional rule, not a typographic one. */
input[type=text],input[type=email],input[type=tel],input[type=search],
input[type=number],textarea,select{font-size:16px}

/* --- the topbar stays one line --- */
.topbar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-sep{opacity:.5;margin:0 7px}
@media(max-width:620px){
  .topbar{font-size:11.5px;padding:7px 12px}
  .topbar .tb-mid{display:none}
}

/* --- header controls sized for a thumb (44px is the accepted minimum) --- */
.menu-toggle{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:11px;cursor:pointer;padding:0}
.menu-bars{display:block;width:19px}
.menu-bars i{display:block;height:2px;background:var(--gold-l);border-radius:2px;margin:4px 0;transition:.18s}
.menu-toggle[aria-expanded=true]{background:rgba(217,174,82,.12);border-color:var(--gold)}
.menu-toggle[aria-expanded=true] .menu-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-bars i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] .menu-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.basket-link{min-height:44px;padding:0 4px}
.account-link{min-height:44px;display:flex;align-items:center;font-weight:600}
.basket-count{min-width:24px;height:24px;font-size:12.5px}

/* --- the drawer --- */
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--paper);
  max-height:calc(100vh - 120px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-menu .wrap{padding-top:14px;padding-bottom:20px}
.menu-heading{font:600 11px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:10px 0 8px}
.menu-cats,.menu-pages{list-style:none;margin:0 0 12px;padding:0}
.menu-cats a,.menu-pages a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;padding:8px 2px;text-decoration:none;font-size:16px;font-weight:600;
  border-bottom:1px solid var(--line)}
.menu-cats a .ur{font-size:15px;color:var(--gold-l);font-weight:400}
.menu-pages a{font-weight:500;font-size:15.5px;min-height:46px}
.menu-arrow{color:var(--gold-l)}
/* The page behind must not scroll while the drawer is open. */
body.menu-open{overflow:hidden}

@media(max-width:1140px){
  .menu-toggle{display:flex}
  .mobile-menu{display:block}
}

/* MUST come after the rule above.
   The `hidden` attribute is only `display:none` from the browser's own
   stylesheet, so any class rule setting `display:block` silently beats it — and
   the drawer rendered open on every page load. */
.mobile-menu[hidden]{display:none}
@media(max-width:620px){
  .nav{gap:10px;height:62px}
  .nav-cta{display:none}
  .account-link{display:none}   /* it lives in the drawer on a phone */
  .basket-word{display:none}    /* the count is the whole point */
  .basket-link::before{content:'🧺';font-size:19px}
}

/* --- the hero gets out of the way faster on a phone --- */
@media(max-width:620px){
  .hero .wrap{padding:18px 20px 20px;gap:20px}
  .hero h1{font-size:26px}
  .hero p.lead{font-size:15px;margin:8px 0 14px}
  .hero .cta .btn{flex:1 1 auto;justify-content:center}
  .verse{padding:16px 18px}
  .page-head{padding:22px 0 24px}
}

/* --- choosing: cards are the whole browse experience on a phone --- */
@media(max-width:620px){
  .cards{grid-template-columns:1fr;gap:12px}
  .card{padding:16px}
  .card-top h3{font-size:17px}
  .card .card-summary{font-size:13.5px}
  .grp{margin-bottom:24px}
  .sec-head{margin-bottom:20px}
  section{padding:30px 0}
}

/* --- ordering: the buy button follows the customer down the page ---
   The form sits over a thousand pixels below the fold once the description is
   in place. Rather than shorten the description, the action comes along. */
.buy-bar{display:none}
@media(max-width:940px){
  .buy-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;align-items:center;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,17,13,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line-gold)}
  .buy-bar .buy-name{flex:1;min-width:0;font-size:13.5px;color:var(--ink-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .checkout-bar .buy-name b{display:block;font-family:Amiri,serif;font-size:20px;color:var(--ink)}
  .buy-bar .btn{flex:0 0 auto;min-height:46px}
  /* Room for the bar so it never covers the last thing on the page. */
  body.has-buy-bar{padding-bottom:74px}
  /* While the drawer is open the bar is a stray control over an unrelated
     screen — it belongs to the page behind, not the menu in front. */
  body.menu-open .buy-bar{display:none}
}

/* --- basket and checkout --- */
@media(max-width:620px){
  .line-actions{gap:10px}
  .line-actions .qty input{width:64px;min-height:44px}
  .line-actions .btn{min-height:44px}
  .summary{padding:20px;position:static}
  .checkout{gap:20px}
  .method{padding:14px 16px}
  .made-of span{font-size:12.5px;padding:6px 11px}
  .product-head h1{font-size:28px}
  .product-body h2{font-size:19px}
  details.faq summary{padding:15px 18px;font-size:15px}
  .f-grid{gap:20px;padding:26px 20px 18px}
  .order-table td,.order-table th{font-size:13.5px}
}

/* A form control should never be smaller than a fingertip. */
@media(max-width:940px){
  .btn{min-height:46px}
  .btn-sm{min-height:40px}
  input,textarea,select{min-height:46px}
  textarea{min-height:92px}
}