/* ─────────────────────────────────────────────────────────────────────────
   RAQEEM storefront design system.

   Everything here is scoped under `.rq` on purpose. The rest of the site —
   the dashboard, checkout, the design studio — still renders against
   raqeem.css, and this file must not reach them. A wrapper class per screen
   is the cheapest way to guarantee that: no selector here can match outside
   an element carrying `.rq`.

   Only four names collided with raqeem.css component classes (card, btn,
   chip, rise), so those are prefixed .rq-; every other name was free.

   Fonts are the app's own self-hosted files — Lexend for Latin and Noto Kufi
   Arabic for Arabic, both already declared in raqeem.css. No webfont CDN.
   ───────────────────────────────────────────────────────────────────────── */

.rq{
  --ink:#1b0c2f;          /* taken from the wordmark's lettering */
  --ink-2:#2b1848;
  --ink-3:#3a2354;
  --ring:#51354d;         /* the Q */
  --mauve:#976b71;        /* the swoosh */
  --mauve-2:#b09ea7;
  --body:#7d7488;
  --coral:#e24f44;
  --coral-deep:#c93f35;
  --coral-tint:#ffe4da;
  --cream:#fffcf9;
  --cream-2:#faf4f0;
  --blush:#f6ece7;
  --line:#ede6e1;
  --gold:#c9a227;
  --peach:#ffb7a5;
  --rose:#c68c87;

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(27,12,47,.07);
  --sh-md:0 12px 32px -14px rgba(27,12,47,.28);
  --sh-lg:0 30px 64px -24px rgba(27,12,47,.45);

  font-family:'Lexend','Noto Kufi Arabic',system-ui,-apple-system,sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.rq *,.rq *::before,.rq *::after{box-sizing:border-box}
.rq img{max-width:100%;display:block}
.rq a{color:inherit;text-decoration:none}
.rq h1,.rq h2,.rq h3,.rq h4{margin:0;line-height:1.2;font-weight:700}
.rq p{margin:0}
.rq-wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:24px}

/* ── buttons ─────────────────────────────────────────────── */
.rq-btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  border:0;border-radius:var(--r-pill);padding:13px 26px;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
/* Scoped as `.rq .rq-btn-*` on purpose. The reset above (`.rq a{color:inherit}`)
   is one class plus one element, which outbids a single class — so a bare
   `.rq-btn-primary` lost its white label and every anchor CTA rendered plum ink
   on coral. The extra `.rq` puts these back in front. */
.rq .rq-btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 24px -12px rgba(226,79,68,.85)}
.rq .rq-btn-primary:hover{background:var(--coral-deep);transform:translateY(-1px)}
.rq .rq-btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.rq .rq-btn-outline:hover{border-color:var(--ink);transform:translateY(-1px)}
.rq-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  border-bottom:1.5px solid currentColor;padding-bottom:2px}
.rq-link svg{transition:transform .2s ease}
.rq-link:hover svg{transform:translateX(-4px)}
[dir="ltr"] .rq-link:hover svg{transform:translateX(4px)}

/* ── announcement strip ──────────────────────────────────── */
/* overflow:hidden is a hard guarantee, not decoration: this strip is a single
   nowrap line of claims, and if it is ever wider than the screen it drags the
   whole document wider with it — which is exactly what it did at 320px. */
.rq-strip{background:var(--blush);color:var(--body);font-size:13.5px;border-bottom:1px solid var(--line);
  overflow:hidden}
.rq-strip .rq-wrap{display:flex;gap:26px;justify-content:center;align-items:center;height:42px;flex-wrap:wrap}
.rq-strip b{color:var(--ink);font-weight:600}
.rq-strip span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.rq-strip svg{color:var(--coral)}

/* ── the wordmark ────────────────────────────────────────── */
.rq-logo{display:inline-flex;align-items:center}
.rq-logo svg{display:block;width:126px;height:auto}
.rq-logo.sm svg{width:104px}

/* ── header ──────────────────────────────────────────────── */
.rq-header{position:sticky;top:0;z-index:60;background:rgba(255,252,249,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.rq-nav{display:flex;align-items:center;gap:22px;height:78px}
.rq-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500;color:var(--body)}
.rq-nav ul a:hover{color:var(--ink)}
.rq-nav .rq-actions{margin-inline-start:auto;display:flex;align-items:center;gap:14px}
.rq-nav .rq-signin{font-size:15px;font-weight:600}
.rq-icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;background:#fff;cursor:pointer}
.rq-lang{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:7px 14px;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--body);cursor:pointer;transition:.2s}
.rq-lang:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:1040px){.rq-nav ul{display:none}}
@media(max-width:620px){.rq-nav .rq-signin{display:none}.rq-nav{height:68px;gap:12px}}
/* The strip's claims are nowrap by nature. Two of them need ~363px including
   padding, so below that the second has to go — it is repeated in the hero
   chips, the footer and the checkout anyway. */
@media(max-width:700px){
  .rq-strip .rq-wrap{height:38px;gap:16px;font-size:12.5px;justify-content:flex-start}
  .rq-strip span:nth-child(3){display:none}
}
@media(max-width:430px){
  .rq-strip .rq-wrap{justify-content:center;gap:0}
  .rq-strip span:nth-child(2){display:none}
}

/* Phone header. By this point the wordmark, the language toggle and the CTA are
   the only three things left on the line — and at 320px they still came to 44px
   more than the screen, which dragged the whole document wider. Tighten all
   three, give the page back its side padding, and let the row wrap rather than
   overflow if a longer translation ever needs it. */
@media(max-width:520px){
  .rq-wrap{padding-inline:16px}
  .rq-nav{height:64px;gap:10px;flex-wrap:wrap}
  .rq-nav .rq-actions{gap:10px}
  .rq-logo svg{width:98px}
  .rq-lang{padding:6px 12px;font-size:12.5px}
  .rq-nav .rq-btn{padding:10px 18px;font-size:14px}
}

/* ── hero ────────────────────────────────────────────────── */
.rq-hero{background:linear-gradient(176deg,var(--cream) 0%,#fbf3ef 56%,var(--blush) 100%);
  position:relative;overflow:hidden}
.rq-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 84% 6%,rgba(151,107,113,.16) 0%,transparent 62%),
             radial-gradient(ellipse 55% 65% at 6% 98%,rgba(81,53,77,.10) 0%,transparent 68%)}
.rq-hero .rq-wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;
  gap:48px;align-items:center;padding-block:62px 70px}
.rq-toggle{display:inline-flex;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px;margin-bottom:26px;box-shadow:var(--sh-sm)}
.rq-toggle a{font-size:14px;font-weight:600;color:var(--body);padding:9px 20px;border-radius:var(--r-pill);transition:.2s}
.rq-toggle a.on{background:var(--ink);color:var(--cream)}
.rq-hero h1{font-size:clamp(38px,4.6vw,62px);line-height:1.1;font-weight:700;letter-spacing:-.5px}
.rq-hero h1 .u{color:var(--mauve)}
.rq-hero .sub{margin-top:20px;font-size:18px;color:var(--body);max-width:34ch}
.rq-hero .cta{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.rq-hero .from{margin-top:26px;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--body)}
.rq-hero .from b{color:var(--ink);font-weight:700}
.rq-pillprice{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);
  border-radius:var(--r-pill);padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--ink)}
.rq-hero-art{position:relative;display:grid;place-items:center;min-height:520px}
.rq-hero-art .glow{position:absolute;width:88%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(151,107,113,.20) 0%,rgba(81,53,77,.07) 46%,transparent 70%)}
.rq-hero-art img{position:relative;width:100%;max-width:500px;filter:drop-shadow(0 30px 42px rgba(27,12,47,.24))}
.rq-chip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-md);padding:12px 15px;display:flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:600;color:var(--ink)}
.rq-chip small{display:block;font-weight:500;color:var(--body);font-size:12px}
.rq-chip.c1{inset-block-start:0;inset-inline-start:0}
.rq-chip.c2{inset-block-end:0;inset-inline-start:0}
.rq-swatch{width:26px;height:26px;border-radius:7px;background:var(--gold);flex:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
@media(max-width:900px){
  .rq-hero .rq-wrap{grid-template-columns:1fr;padding-block:40px 54px;gap:26px}
  .rq-hero-art{min-height:0;order:-1}
  .rq-hero-art img{max-width:320px}
  .rq-chip{display:none}
}

/* ── trust marquee ───────────────────────────────────────── */
.rq-trust{border-block:1px solid var(--line);background:var(--cream);overflow:hidden}
.rq-marquee{display:flex;width:max-content;animation:rq-slide 34s linear infinite}
.rq-trust:hover .rq-marquee{animation-play-state:paused}
.rq-marquee div{display:flex;align-items:center;gap:52px;padding:22px 26px}
.rq-trust .item{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;
  color:var(--body);white-space:nowrap}
.rq-trust .item svg{color:var(--coral);flex:none}
.rq-trust .dot{width:5px;height:5px;border-radius:50%;background:var(--line)}
@keyframes rq-slide{to{transform:translateX(50%)}}

/* ── steps ───────────────────────────────────────────────── */
.rq-steps{background:var(--cream-2);padding-block:88px}
.rq-steps .head{text-align:center;max-width:640px;margin-inline:auto}
.rq-steps h2{font-size:clamp(28px,3.2vw,42px)}
.rq-steps .head p{margin-top:14px;color:var(--body);font-size:17px}
.rq-stage{margin-top:52px;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:34px;align-items:center}
@media(max-width:900px){.rq-stage{grid-template-columns:1fr}}
.rq-card{background:#fff;border-radius:var(--r-lg);padding:36px 32px;box-shadow:var(--sh-md)}
/* The rotator hides all but the active card, so the grid keeps one child. */
.rq-stagecards{display:grid;gap:18px;align-content:center}
.rq-card[hidden]{display:none}
.rq-bulk .cta{margin-top:28px}
.rq-card .count{display:inline-block;font-size:13px;font-weight:600;color:var(--body);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 13px;margin-bottom:20px}
.rq-card h3{font-size:25px;margin-bottom:12px}
.rq-card p{color:var(--body);font-size:15.5px}
.rq-card .bars{display:flex;gap:6px;margin-top:26px}
.rq-card .bars i{height:4px;flex:1;border-radius:2px;background:var(--line);transition:background .3s}
.rq-card .bars i.on{background:var(--coral)}
.rq-stageart{border-radius:var(--r-lg);min-height:340px;display:grid;place-items:center;padding:26px;
  background:linear-gradient(150deg,#f8f3f1 0%,#ebdcd8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.rq-stageart img{max-height:290px;filter:drop-shadow(0 24px 30px rgba(27,12,47,.26))}
.rq-navdots{display:flex;gap:12px;justify-content:center;margin-top:34px}
.rq-navdots button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  font-family:inherit;font-size:15px;font-weight:600;transition:.2s}
.rq-navdots button:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
/* Which step you are on. Three identical circles and nothing else said where
   you were, so the current one is pinned rather than left to hover state. */
.rq-navdots button[aria-selected="true"]{background:var(--ink);color:var(--cream);
  border-color:var(--ink);font-weight:700}

/* ── features ────────────────────────────────────────────── */
.rq-feats{background:#fff;padding-block:84px}
.rq-feats .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.rq-feat{background:var(--cream);padding:40px 32px;text-align:center}
.rq-feat .ic{width:52px;height:52px;margin-inline:auto;border-radius:14px;background:var(--coral-tint);
  color:var(--coral-deep);display:grid;place-items:center}
.rq-feat h3{margin-top:20px;font-size:19px}
.rq-feat p{margin-top:10px;color:var(--body);font-size:15px}
@media(max-width:900px){.rq-feats .grid{grid-template-columns:1fr}}

/* ── products ────────────────────────────────────────────── */
.rq-products{padding-block:92px;background:var(--cream)}
.rq-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:44px}
.rq-sechead h2{font-size:clamp(28px,3.2vw,42px);max-width:22ch}
.rq-sechead p{margin-top:12px;color:var(--body);font-size:17px;max-width:46ch}
.rq-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1100px){.rq-pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.rq-pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.rq-pgrid{grid-template-columns:1fr}}
.rq-pcard{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.rq-pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:#ddd0cc}
.rq-pcard .shot{aspect-ratio:1;background:linear-gradient(180deg,#fdfbf9 0%,#f6efec 100%);
  display:grid;place-items:center;padding:16px;position:relative}
.rq-pcard .shot img{max-height:88%;filter:drop-shadow(0 14px 18px rgba(27,12,47,.18));
  transition:transform .3s ease}
.rq-pcard:hover .shot img{transform:scale(1.045)}
.rq-tag{position:absolute;inset-block-start:12px;inset-inline-start:12px;font-size:11.5px;
  font-weight:700;padding:5px 11px;border-radius:var(--r-pill);background:var(--coral);color:#fff}
.rq-tag.gold{background:var(--gold)}
.rq-tag.dark{background:var(--ink-2)}
.rq-pcard .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.rq-pcard h3{font-size:16.5px;font-weight:600;line-height:1.45}
.rq-pcard .cap{font-size:13.5px;color:var(--body);min-height:2.9em}
.rq-pcard .row{margin-top:auto;padding-top:14px;display:flex;align-items:center;
  justify-content:space-between;border-top:1px solid var(--line)}
.rq-price{font-size:20px;font-weight:700}
.rq-price small{font-size:13px;font-weight:500;color:var(--body);margin-inline-start:3px}
.rq-mini{font-size:13.5px;font-weight:600;color:var(--coral-deep);display:inline-flex;align-items:center;gap:6px}

/* ── bulk band ───────────────────────────────────────────── */
.rq-bulk{background:var(--cream-2);padding-block:84px;border-top:1px solid var(--line)}
.rq-bulk .rq-wrap{display:grid;grid-template-columns:.86fr 1.14fr;gap:52px;align-items:center}
@media(max-width:900px){.rq-bulk .rq-wrap{grid-template-columns:1fr;gap:30px}}
.rq-bulkar{position:relative;display:grid;place-items:center}
.rq-bulkar::before{content:"";position:absolute;width:88%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(151,107,113,.20) 0%,transparent 70%)}
.rq-bulkar img{position:relative;max-height:400px;filter:drop-shadow(0 26px 34px rgba(27,12,47,.22))}
.rq-eyebrow{display:inline-block;font-size:13px;font-weight:700;color:var(--coral-deep);
  background:var(--coral-tint);border-radius:var(--r-pill);padding:5px 13px;margin-bottom:16px}
.rq-bulk h2{font-size:clamp(26px,3vw,38px)}
.rq-bulk p{margin-top:14px;color:var(--body);font-size:16.5px;max-width:44ch}
.rq-ticks{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.rq-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;font-weight:500}
.rq-ticks svg{color:var(--coral);flex:none;margin-top:4px}

/* ── studio ──────────────────────────────────────────────── */
.rq-studio{background:var(--blush);padding-block:80px;overflow:hidden}
.rq-studio .rq-wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
@media(max-width:900px){.rq-studio .rq-wrap{grid-template-columns:1fr;gap:32px}}
.rq-studio h2{font-size:clamp(26px,3vw,38px)}
.rq-studio p{margin-top:16px;color:var(--body);font-size:17px;max-width:42ch}
.rq-studio ul{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.rq-studio li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;font-weight:500}
.rq-studio li svg{color:var(--coral);flex:none;margin-top:4px}
.rq-mock{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:18px}
.rq-mock .bar{display:flex;gap:7px;margin-bottom:14px}
.rq-mock .bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.rq-mock .canvas{background:linear-gradient(180deg,#f7f4f2,#efe7e4);border-radius:var(--r-md);
  display:grid;place-items:center;padding:22px;position:relative;min-height:300px}
/* The print zone comes from the product's own data, so it has to be measured
   against the photo box — not the padded canvas, which is wider than the image
   and made the box hang off the garment. Hence the wrapper, and hence physical
   left/top: zone coordinates are in image space and must not be mirrored by the
   page's RTL direction. */
.rq-mock .shot{position:relative;display:inline-block;line-height:0}
.rq-mock .shot img{max-height:250px;min-height:0}
.rq-mock .zone{position:absolute;border:2px dashed var(--coral);border-radius:6px;
  background:rgba(226,79,68,.07);display:grid;place-items:center;padding:2px;overflow:hidden}
/* Printed text: it has to read as ink ON the black cloth. The zone is the real
   printable area, so on a phone it can be only a few pixels wide — the label
   then scales down and is clipped by the zone, like the print itself would be. */
.rq-mock .pname{text-align:center;font-weight:700;font-size:clamp(8px,2.2vw,15px);
  line-height:1.15;overflow-wrap:anywhere;
  color:#fffdf8;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.rq-mock .tools{display:flex;gap:8px;margin-top:14px}
.rq-mock .tools span{font-size:12.5px;font-weight:600;color:var(--body);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px}
.rq-mock .tools span.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ── final ───────────────────────────────────────────────── */
.rq-final{position:relative;color:var(--cream);padding-block:82px;text-align:center;overflow:hidden;
  background:linear-gradient(120deg,var(--ink) 0%,#2b1848 42%,var(--ring) 78%,var(--mauve) 100%)}
.rq-final::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 78% 30%,rgba(255,247,240,.18) 0%,transparent 62%)}
.rq-final .rq-wrap{position:relative;z-index:1}
.rq-final h2{font-size:clamp(28px,3.4vw,44px)}
.rq-final p{margin-top:16px;color:#cfc3da;font-size:17px}
.rq-final .cta{margin-top:32px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.rq-final .note{margin-top:22px;font-size:13.5px;color:#b3a7c0}

/* ── footer ──────────────────────────────────────────────── */
.rq-footer{background:var(--ink);color:#cbbfd6;padding-block:60px 30px}
.rq-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
@media(max-width:900px){.rq-fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rq-fgrid{grid-template-columns:1fr}}
.rq-footer h4{font-size:15px;margin-bottom:16px;color:var(--cream)}
.rq-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rq-footer li a{font-size:14.5px;color:#b3a7c0}
.rq-footer li a:hover{color:var(--cream)}
.rq-footer .about p{margin-top:16px;font-size:14.5px;color:#b3a7c0;max-width:34ch}
.rq-fbot{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,252,249,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:#a496b2}
.rq-pay{display:flex;gap:9px;align-items:center}
.rq-pay span{border:1px solid rgba(255,252,249,.2);background:rgba(255,252,249,.06);
  border-radius:6px;padding:5px 11px;font-size:11.5px;font-weight:600;color:#d9d2e2}

/* ── product detail ──────────────────────────────────────── */
.rq-pd{padding-block:36px 92px}
.rq-crumbs{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--body);margin-bottom:28px}
.rq-crumbs a:hover{color:var(--ink)}
.rq-crumbs svg{opacity:.45;flex:none}
.rq-pdlay{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:start}
@media(max-width:900px){.rq-pdlay{grid-template-columns:1fr;gap:30px}}
.rq-gallery{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  display:grid;place-items:center;padding:24px;min-height:400px}
.rq-gallery img{max-height:500px;filter:drop-shadow(0 26px 32px rgba(27,12,47,.2))}
.rq-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.rq-thumbs button{width:74px;height:74px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;padding:6px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.rq-thumbs button:hover{border-color:var(--mauve-2)}
.rq-thumbs button.on{border-color:var(--coral);box-shadow:0 0 0 3px rgba(226,79,68,.13)}
.rq-thumbs img{width:100%;height:100%;object-fit:contain}
.rq-pd h1{font-size:clamp(26px,3.1vw,40px);letter-spacing:-.4px}
.rq-pd .lead{margin-top:14px;color:var(--body);font-size:17px;max-width:46ch}
.rq-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.rq-chips span{font-size:13px;font-weight:600;color:var(--ring);background:var(--blush);
  border-radius:var(--r-pill);padding:6px 13px}
.rq-pdprice{margin-top:24px;display:flex;align-items:baseline;gap:8px}
.rq-pdprice b{font-size:38px;font-weight:700;line-height:1}
.rq-pdprice small{font-size:16px;color:var(--body)}
.rq-hr{height:1px;background:var(--line);margin-block:26px}
.rq-opt{margin-top:24px}
.rq-opt .lbl{display:block;font-size:14px;font-weight:700;margin-bottom:11px}
.rq-opt .lbl span{font-weight:500;color:var(--body)}
.rq-swatches{display:flex;gap:13px;flex-wrap:wrap}
.rq-swatches button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  cursor:pointer;display:grid;place-items:center;transition:transform .2s,box-shadow .2s}
.rq-swatches button:hover{transform:scale(1.09)}
.rq-swatches button.on{box-shadow:0 0 0 2px var(--cream),0 0 0 4px var(--coral)}
.rq-swatches svg{color:#fff;mix-blend-mode:difference}
.rq-sizes{display:flex;gap:9px;flex-wrap:wrap}
.rq-sizes span,.rq-fabric{border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:9px 17px;font-size:14px;font-weight:600}
.rq-fabric{display:inline-block}
.rq-pd .hint{margin-top:11px;font-size:13.5px;color:var(--body)}
.rq-pd .cta{margin-top:30px}
.rq-pd .cta .rq-btn{width:100%}
@media(min-width:900px){.rq-pd .cta .rq-btn{width:auto;min-width:290px}}
.rq-pd .fine{margin-top:14px;font-size:13.5px;color:var(--body);max-width:50ch}

/* ── checkout ────────────────────────────────────────────── */
.rq-checkout{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;
  padding-block:32px 84px}
@media(max-width:900px){.rq-checkout{grid-template-columns:1fr;gap:26px}}
.rq-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sh-sm)}
.rq-panel + .rq-panel{margin-top:18px}
.rq-field{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  transition:border-color .2s,box-shadow .2s}
.rq-field:focus{outline:0;border-color:var(--coral);box-shadow:0 0 0 3px rgba(226,79,68,.14)}
textarea.rq-field{resize:vertical}
.rq-label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.rq-split{display:grid;grid-template-columns:1fr 7rem;gap:16px;align-items:start}
@media(max-width:520px){.rq-split{grid-template-columns:1fr}}
.rq-sumrow{display:flex;justify-content:space-between;gap:12px;padding-block:6px;
  font-size:14.5px;color:var(--body)}
.rq-sumtotal{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:16px;margin-top:12px;border-top:1px solid var(--line)}
.rq-sumtotal b{font-size:26px;font-weight:700}
.rq-note{display:flex;gap:9px;align-items:center;margin-top:16px;background:var(--blush);
  color:var(--ring);border-radius:12px;padding:11px 14px;font-size:13.5px;font-weight:600}
.rq-error{border:1px solid #f0c2bd;background:#fdf0ee;color:#a5322a;border-radius:12px;
  padding:13px 15px;font-size:14.5px}
.rq-back{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;
  color:var(--body);margin-bottom:16px}
.rq-back:hover{color:var(--ink)}
.rq-map{border-radius:12px;overflow:hidden;border:1px solid var(--line);height:14rem}
/* The summary follows the form on tall screens: the total should never scroll
   out of sight while the customer is still filling the address in. */
.rq-sticky{position:sticky;top:96px}
@media(max-width:900px){.rq-sticky{position:static}}

/* ─ order confirmation ──────────────────────────────────── */
.rq-done{max-width:560px;margin-inline:auto;padding-block:72px;text-align:center}
.rq-done .tick{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  margin-inline:auto;background:var(--coral-tint);color:var(--coral-deep)}
.rq-done h1{margin-top:22px;font-size:clamp(24px,3vw,34px)}
.rq-done p{margin-top:12px;color:var(--body)}
.rq-receipt{margin-top:26px;background:var(--cream-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px}
.rq-receipt .num{font-size:32px;font-weight:700;margin-top:4px;line-height:1.2}
.rq-receipt .sub{margin-top:8px;font-size:14.5px;color:var(--body)}
.rq-done .cta{margin-top:28px}

/* ── admin dashboard ────────────────────────────────────── */
/* The dashboard is one reader's workshop, and it was written against the
   compiled storefront utilities. Those read their colours from --color-* tokens
   and in that bundle the tokens are still the OLD brand: --color-gold is
   literally a stock blue (#3563e9), which is why a dashed "print area" box was
   painting blue and every opacity variant of it (bg-gold/10 and friends) had a
   hardcoded copy of the same blue baked in.

   So the fix is not to chase utilities one at a time — it is to re-point the
   tokens here. Every utility the dashboard uses, and every opacity variant of
   every one of them, then resolves to the new palette in a single place.
   Scoped to .rq-admin, so the storefront never sees any of it. */
.rq-admin{
  --color-gold:#e24f44;          /* was #3563e9 — the old brand blue */
  --color-gold-deep:#c93f35;     /* was #2750c8 */
  --color-gold-soft:#ffe4da;     /* was #e8eefd */
  --color-ink:#1b0c2f;           /* was #222733 */
  --color-ink-soft:#7d7488;      /* was #5b6472 */
  --color-line:#ede6e1;          /* was #e3e6ea */
  --color-parchment:#fffcf9;
  --color-parchment-deep:#f6ece7;
  --color-brand:#1b0c2f;         /* was #fa6132, the old orange */
  background:var(--cream);
  min-height:100vh;
}
/* Belt and braces on the names the dashboard actually uses. */
.rq-admin .bg-parchment{background:var(--cream)}
.rq-admin .bg-parchment-deep{background:var(--blush)}
.rq-admin .text-ink{color:var(--ink)}
.rq-admin .text-ink-soft{color:var(--body)}
.rq-admin .border-line{border-color:var(--line)}
.rq-admin .border-gold{border-color:var(--coral)}
.rq-admin .bg-ink{background:var(--ink)}
.rq-admin .text-gold-deep{color:var(--coral-deep)}
.rq-admin .bg-gold{background:var(--coral)}
.rq-admin .bg-gold-soft{background:var(--coral-tint)}
.rq-admin .font-display,.rq-admin .font-brand{
  font-family:'Lexend','Noto Kufi Arabic',system-ui,sans-serif}
/* Blue is the only status hue that would read as a second brand. */
.rq-admin .bg-blue-100{background:var(--blush)}
.rq-admin .text-blue-800{color:var(--ring)}
.rq-admin .bg-blue-600{background:var(--ink-2)}
.rq-admin .text-red-600,.rq-admin .text-red-700{color:#b5342a}
/* Native controls ignore the palette unless told, and default to browser blue. */
.rq-admin input[type="checkbox"],.rq-admin input[type="radio"]{accent-color:var(--coral)}
/* The component classes the dashboard leans on, brought onto the new system.
   Padding is deliberately left to the compiled bundle: the markup depends on
   it. */
.rq-admin .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm)}
.rq-admin .field{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;
  transition:border-color .2s,box-shadow .2s}
.rq-admin .field:focus{outline:0;border-color:var(--coral);box-shadow:0 0 0 3px rgba(226,79,68,.14)}
.rq-admin .label{display:block;font-size:13.5px;font-weight:600;color:var(--body);margin-bottom:6px}
.rq-admin .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  border-radius:var(--r-pill);padding:11px 20px;transition:.18s}
.rq-admin .btn-gold{background:var(--coral);color:#fff;border:0}
.rq-admin .btn-gold:hover{background:var(--coral-deep)}
.rq-admin .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.rq-admin .btn-ghost:hover{border-color:var(--ink)}

/* ── reveal ──────────────────────────────────────────────── */
.rq .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rq .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rq .rv{opacity:1;transform:none}
  .rq-marquee{animation:none}
}