/* ==========================================================================
   BAKKAR PRINTING — THEME "MOMENTUM"
   components.css — the reusable kit.
   --------------------------------------------------------------------------
   OWNED BY: foundation agent. Page agents must NOT edit this file.
   Rich enough that the 7 page agents should almost never need a new component.
   See _partials.html -> COMPONENT CHEATSHEET for a usage snippet per class.

   CONTENTS
     1. Buttons              8. Section header      15. Toast
     2. Cards (base)         9. Forms               16. Modal / lightbox
     3. Product card        10. Pagination          17. Skeleton
     4. Category card       11. Table / specs       18. Empty state
     5. Agent card          12. Tabs                19. Stat / count-up
     6. Badge / chip / tag  13. Accordion           20. Rail / step / misc
     7. Breadcrumb          14. Slider chrome       21. CTA band / share
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--text);
  --btn-bd: transparent;
  /* NOT `none`: this is composed into a shadow LIST
     (`box-shadow: inset 0 0 0 1px var(--btn-bd), var(--btn-sh)`), and a list may
     not contain `none` — the whole declaration becomes invalid and is dropped,
     which silently stripped the border off every .btn--outline. A transparent
     zero-shadow is list-legal and paints nothing. */
  --btn-sh: 0 0 #0000;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: var(--btn-h);
  padding-inline: var(--btn-px);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: inset 0 0 0 1px var(--btn-bd), var(--btn-sh);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--d-quick) var(--e-spring),
    box-shadow var(--d-base) var(--e-out),
    background var(--d-quick) var(--e-soft),
    color var(--d-quick) var(--e-soft);
}
.btn > svg { inline-size: var(--icon); block-size: var(--icon); flex: none; }
.btn:hover  { transform: var(--lift); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: var(--d-instant); }
.btn:disabled,
.btn.is-disabled {
  opacity: .45;
  pointer-events: none;
  transform: none;
}

/* --- primary: the red -> amber gradient. Every stop is AA with white. --- */
.btn--primary {
  --btn-bg: var(--grad-cta);
  --btn-fg: var(--text-on-brand);
  --btn-sh: var(--glow-brand), var(--sh-2);
}
/* Springy sheen sweep on hover — pure decoration, no layout cost. */
.btn--primary::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 55%;
  z-index: -1;
  background: var(--grad-sheen);
  transform: skewX(-18deg);
  opacity: 0;
  transition: inset-inline-start var(--d-slower) var(--e-out), opacity var(--d-fast) var(--e-soft);
}
.btn--primary:hover {
  --btn-bg: var(--grad-cta-hover);
  --btn-sh: var(--glow-brand-lg), var(--sh-3);
}
.btn--primary:hover::after { inset-inline-start: 110%; opacity: 1; }

/* --- secondary: solid ink --- */
.btn--secondary {
  --btn-bg: var(--invert-bg);
  --btn-fg: var(--invert-fg);
  --btn-sh: var(--sh-2);
}
.btn--secondary:hover { --btn-bg: var(--invert-bg-h); --btn-sh: var(--sh-3); }

/* --- outline: hairline on paper --- */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
}
.btn--outline:hover { --btn-bg: var(--surface-2); --btn-bd: var(--text); --btn-sh: var(--sh-2); }

/* --- ghost: no chrome until you touch it --- */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-2);
}
.btn--ghost:hover { --btn-bg: var(--surface-3); --btn-fg: var(--text); }

/* --- soft: brand tint --- */
.btn--soft {
  --btn-bg: var(--brand-soft);
  --btn-fg: var(--brand-ink);
}
.btn--soft:hover { --btn-bg: var(--brand-soft-line); --btn-sh: var(--sh-1); }

/* --- white: for use on ink / photographic surfaces --- */
.btn--white {
  --btn-bg: #fff;
  --btn-fg: var(--ink-900);
  --btn-sh: var(--sh-3);
}
.btn--white:hover { --btn-sh: var(--sh-4); }

/* --- glass: on ink / photo, keeps the image visible --- */
.btn--glass {
  --btn-bg: rgba(255, 255, 255, .12);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--glass:hover { --btn-bg: rgba(255, 255, 255, .22); }

/* --- whatsapp --- */
.btn--wa { --btn-bg: #25D366; --btn-fg: #06331A; --btn-sh: var(--sh-2); }
.btn--wa:hover { --btn-bg: #1FBE5B; }

/* --- sizes --- */
.btn--sm { min-block-size: var(--btn-h-sm); padding-inline: var(--sp-4); font-size: var(--fs-xs); }
.btn--sm > svg { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.btn--lg {
  min-block-size: var(--btn-h-lg);
  padding-inline: var(--btn-px-lg);
  font-size: var(--fs-md);
  border-radius: var(--r-pill);
}
.btn--lg > svg { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.btn--block { display: flex; inline-size: 100%; }

/* --- icon-only --- */
.btn--icon {
  inline-size: var(--btn-h);
  block-size: var(--btn-h);
  min-block-size: 0;
  padding: 0;
  flex: none;
  --btn-bg: var(--surface-3);
  --btn-fg: var(--text-2);
}
.btn--icon:hover { --btn-bg: var(--invert-bg); --btn-fg: var(--invert-fg); }
.btn--icon.btn--sm { inline-size: var(--btn-h-sm); block-size: var(--btn-h-sm); }
.btn--icon.btn--lg { inline-size: var(--btn-h-lg); block-size: var(--btn-h-lg); }

/* Arrow that slides forward on hover (and mirrors correctly in RTL). */
.btn__arrow { transition: transform var(--d-base) var(--e-spring); }
.btn:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* Text link with a moving arrow — the "read more" pattern. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
  transition: gap var(--d-quick) var(--e-spring), color var(--d-fast) var(--e-soft);
}
.link-arrow svg { inline-size: 15px; block-size: 15px; }
[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
.link-arrow:hover { gap: var(--sp-3); color: var(--link-hover); }

/* ==========================================================================
   2. CARD (base)
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--card-r);
  background: var(--surface);
  box-shadow: var(--sh-2), var(--sh-ring);
  overflow: hidden;
  transition:
    transform var(--d-base) var(--e-spring),
    box-shadow var(--d-base) var(--e-out);
}
.card--pad { padding: var(--card-pad); }
.card--warm { background: var(--surface-2); }
.card--ink { background: var(--grad-ink); color: var(--text-on-ink); box-shadow: var(--sh-3); }
.card--flat { box-shadow: var(--sh-ring); }
.card--hot { background: var(--grad-cta); color: var(--text-on-brand); box-shadow: var(--glow-brand), var(--sh-3); }
.card--lift:hover { transform: var(--lift-lg); box-shadow: var(--sh-4), var(--sh-ring); }

/* ==========================================================================
   3. PRODUCT CARD  — big colourful imagery on a tinted bed
   Every product card carries a QUOTE action. There is never a price.
   ========================================================================== */
.p-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  border-radius: var(--card-r);
  background: var(--surface);
  box-shadow: var(--sh-2), var(--sh-ring);
  overflow: hidden;
  transition:
    transform var(--d-base) var(--e-spring),
    box-shadow var(--d-base) var(--e-out);
}
.p-card:hover,
.p-card:focus-within {
  transform: var(--lift-lg);
  box-shadow: var(--sh-4), var(--sh-ring);
}

/* NOTE ON STACKING (this card has a full-bleed link overlay AND live buttons
   sitting on top of it, so the order is deliberate and must not be "tidied"):
     img               z:auto  — the pack shot
     ::before wash     z:1     — decorative, pointer-events:none
     title a::after    z:2     — the whole-card click target -> product page
     badges / quick /
     footer buttons    z:3     — must stay ABOVE the overlay to be clickable
   .p-card__media therefore must NOT create a stacking context (no isolation,
   no transform), or its z:3 children would be trapped beneath the overlay. */
.p-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: var(--sp-3);
  margin-block-end: 0;
  border-radius: var(--r-lg);
  /* The bed is a token; the pastel --tint that app.js sets per product rides
     on top of it as a flat gradient. Dark mode simply drops the gradient, so a
     wall of pack shots does not become a wall of pastel squares on ink. */
  background-color: var(--media-bed);
  background-image: linear-gradient(0deg, var(--tint, transparent) 0%, var(--tint, transparent) 100%);
  overflow: hidden;
}
/* Warm wash behind the pack shot so the photo pops off the card. */
.p-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--media-wash);
  z-index: 1;
  pointer-events: none;
}
.p-card__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--d-slower) var(--e-out);
}
.p-card:hover .p-card__img { transform: scale(1.055); }

.p-card__badges {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  /* Decorative — must not steal the whole-card click. */
  pointer-events: none;
}

/* Quick "request a quote" affordance that rides in on hover (and is always
   visible on touch, where hover does not exist). */
.p-card__quick {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline: var(--sp-3);
  z-index: 3;
  display: flex;
  gap: var(--sp-2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-spring);
}
.p-card:hover .p-card__quick,
.p-card:focus-within .p-card__quick { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .p-card__quick { opacity: 1; transform: none; }
}
/* The quick-view eye rides on photography, so it is a white glass chip in BOTH
   themes (like .btn--white). Scoped 0,2,0 so it beats .btn--icon's own
   --btn-bg/--btn-fg without !important. */
.p-card__quick .btn--icon {
  --btn-bg: rgba(255, 255, 255, .92);
  --btn-fg: var(--ink-900);
  --btn-sh: var(--sh-3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.p-card__quick .btn--icon:hover { --btn-bg: #fff; --btn-fg: var(--ink-900); --btn-sh: var(--sh-4); }

/* Dense on purpose. A grid of these is a BROWSING surface: pack shot, line,
   name, quote button. The prose belongs on the product page. */
.p-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--sp-1);
  padding: var(--sp-4);
}
.p-card__eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .p-card__eyebrow { text-transform: none; font-size: var(--fs-xs); }

.p-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  line-height: 1.32;
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.p-card__title a { display: block; }
/* Whole-card click target, without swallowing the quote button (see the
   stacking note above: this sits at z:2, the buttons at z:3). */
.p-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}
.p-card__title a:hover { color: var(--brand-ink); }

/* THE EXCERPT IS A LIST-VIEW FEATURE.
   In the grid it made every card ~90px taller for copy nobody reads at that
   size, so the grid never shows it. The list row has the horizontal room and
   the reading context, so there it stays. (app.js does not even emit it for
   grid cards; this rule is the belt to that braces.) */
.p-card__excerpt { display: none; }

.p-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-start: auto;
  padding-block-start: var(--sp-3);
}
.p-card__foot .btn,
.p-card__foot .link-arrow { position: relative; z-index: 3; }
.p-card__tags { display: flex; gap: var(--sp-1); flex-wrap: wrap; min-inline-size: 0; }

/* --- list variant (products.html list view) — the excerpt lives HERE --- */
.p-card--list {
  flex-direction: row;
  align-items: stretch;
}
.p-card--list .p-card__media {
  aspect-ratio: 1 / 1;
  inline-size: clamp(140px, 26%, 260px);
  flex: none;
  margin-block-end: var(--sp-3);
}
.p-card--list .p-card__body {
  gap: var(--sp-2);
  padding: var(--sp-5);
  padding-inline-start: var(--sp-2);
}
.p-card--list .p-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}
.p-card--list .p-card__foot { padding-block-start: var(--sp-4); }
@media (max-width: 559px) {
  .p-card--list { flex-direction: column; }
  .p-card--list .p-card__media { inline-size: auto; aspect-ratio: 4 / 3; margin-block-end: 0; }
  .p-card--list .p-card__body { padding-inline-start: var(--sp-5); }
}

/* --- compact variant (related products, drawers, sidebars) --- */
.p-card--mini .p-card__media { aspect-ratio: 16 / 11; }
.p-card--mini .p-card__body { padding: var(--sp-4); }

/* ==========================================================================
   4. CATEGORY CARD
   ========================================================================== */
.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-block-size: 260px;
  border-radius: var(--card-r);
  background: var(--ink-800);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-3);
  transition:
    transform var(--d-base) var(--e-spring),
    box-shadow var(--d-base) var(--e-out);
}
.c-card:hover { transform: var(--lift-lg); box-shadow: var(--sh-5); }

.c-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--d-slower) var(--e-out);
}
.c-card:hover .c-card__img { transform: scale(1.07); }
.c-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-b);
  transition: opacity var(--d-base) var(--e-soft);
}
.c-card:hover::after { opacity: .92; }

/* The transparent category PNG rides as a small glyph, never as the tile. */
.c-card__icon {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  inline-size: 52px;
  block-size: 52px;
  padding: 9px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  object-fit: contain;
  opacity: .95;
  transition: transform var(--d-base) var(--e-spring);
}
.c-card:hover .c-card__icon { transform: rotate(-6deg) scale(1.06); }

.c-card__body {
  margin-block-start: auto;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.c-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: #fff;
  line-height: 1.25;
}
.c-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.c-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}
.c-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}
.c-card__count {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #fff;
}
.c-card__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink-900);
  flex: none;
  transition: transform var(--d-base) var(--e-spring), background var(--d-quick) var(--e-soft), color var(--d-quick) var(--e-soft);
}
.c-card__go svg { inline-size: 15px; block-size: 15px; }
[dir="rtl"] .c-card__go svg { transform: scaleX(-1); }
.c-card:hover .c-card__go { background: var(--grad-cta); color: #fff; transform: scale(1.1); }

/* Child-category chips inside a category card (categories.html). */
.c-card__children {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-block-start: var(--sp-3);
  position: relative;
  z-index: 2;
}

/* The honest empty state: labels-sleeves has zero photographed samples. */
.c-card--empty { background: var(--grad-ink); }
.c-card--empty .c-card__img { opacity: .28; filter: grayscale(.35); }
.c-card__note {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}

/* Small "line" variant used in tight rows (footer-ish, sidebars). */
.c-card--sm { min-block-size: 190px; }
.c-card--sm .c-card__title { font-size: var(--fs-md); }
.c-card--sm .c-card__desc { display: none; }
.c-card--sm .c-card__icon { inline-size: 42px; block-size: 42px; padding: 7px; }

/* ==========================================================================
   5. AGENT CARD (no photo field in the DB -> CSS monogram avatar)
   ========================================================================== */
.a-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  block-size: 100%;
  padding: var(--card-pad);
  border-radius: var(--card-r);
  background: var(--surface);
  box-shadow: var(--sh-2), var(--sh-ring);
  overflow: hidden;
  transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out);
}
.a-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: var(--grad-hot);
  transform: scaleX(0);
  /* transform-origin takes no logical keywords — mirror it explicitly. */
  transform-origin: left center;
  transition: transform var(--d-slow) var(--e-out);
}
[dir="rtl"] .a-card::before { transform-origin: right center; }
.a-card:hover { transform: var(--lift); box-shadow: var(--sh-4), var(--sh-ring); }
.a-card:hover::before { transform: scaleX(1); }

.a-card__top { display: flex; align-items: center; gap: var(--sp-4); }
.a-card__avatar {
  display: grid;
  place-items: center;
  inline-size: 58px;
  block-size: 58px;
  border-radius: var(--r-lg);
  background: var(--grad-cta);
  color: #fff;
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.02em;
  flex: none;
  box-shadow: var(--glow-brand);
  direction: ltr;
}
.a-card--hq .a-card__avatar { background: var(--grad-ink); box-shadow: var(--sh-3); }

.a-card__ids { min-inline-size: 0; }
.a-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  line-height: 1.3;
}
.a-card__region {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-block-start: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
}
.a-card__region svg { inline-size: 13px; block-size: 13px; }

.a-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
  flex: 1 1 auto;
}
.a-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block-start: var(--sp-4);
  border-block-start: var(--border);
}

/* ==========================================================================
   6. BADGE / CHIP / TAG
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wide);
  line-height: 1.4;
  white-space: nowrap;
}
[dir="rtl"] .badge { font-size: var(--fs-xs); }
.badge svg { inline-size: 12px; block-size: 12px; }
.badge--brand { background: var(--grad-cta); color: #fff; box-shadow: var(--glow-brand); }
.badge--soft  { background: var(--brand-soft); color: var(--brand-ink); }
.badge--ink   { background: var(--invert-bg); color: var(--invert-fg); }
.badge--amber { background: var(--note-bg); color: var(--note-fg); }
.badge--ok    { background: var(--ok-50); color: var(--ok-700); }
.badge--glass {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-2); }

/* --- chip: an INTERACTIVE pill (filters, sort, view switches) --- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip-row--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  padding-block-end: var(--sp-1);
  scroll-snap-type: inline mandatory;
}
.chip-row--scroll::-webkit-scrollbar { display: none; }
.chip-row--scroll > .chip { scroll-snap-align: start; flex: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 40px;
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--d-quick) var(--e-spring),
    background var(--d-quick) var(--e-soft),
    color var(--d-quick) var(--e-soft),
    box-shadow var(--d-quick) var(--e-soft);
}
.chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-1); color: var(--text); }
.chip__n {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-3);
}
.chip[aria-pressed="true"],
.chip[aria-selected="true"],
.chip.is-active {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: var(--glow-brand);
}
.chip[aria-pressed="true"] .chip__n,
.chip[aria-selected="true"] .chip__n,
.chip.is-active .chip__n { background: rgba(255, 255, 255, .22); color: #fff; }
.chip svg { inline-size: 14px; block-size: 14px; }
.chip--ink[aria-pressed="true"] { background: var(--invert-bg); color: var(--invert-fg); box-shadow: var(--sh-2); }

/* Removable filter chip. */
.chip--removable { padding-inline-end: var(--sp-2); }
.chip__x {
  display: inline-grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--r-circle);
  background: var(--overlay-1);
  color: inherit;
}
.chip__x:hover { background: var(--overlay-2); }
.chip[aria-pressed="true"] .chip__x { background: rgba(255, 255, 255, .24); }

/* --- tag: a NON-interactive label (product tags) --- */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
a.tag { transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft), transform var(--d-quick) var(--e-spring); }
a.tag:hover { background: var(--brand-soft); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand-soft-line); transform: translateY(-2px); }
.tag::before {
  content: '';
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--r-circle);
  background: var(--amber-400);
  flex: none;
}
.tag--plain::before { display: none; }

/* ==========================================================================
   7. BREADCRUMB
   ========================================================================== */
.crumbs { font-size: var(--fs-xs); }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
}
.crumbs__item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.crumbs__link {
  padding: 4px var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-weight: var(--fw-semibold);
  transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft);
}
.crumbs__link:hover { background: var(--surface-3); color: var(--text); }
.crumbs__sep { color: var(--text-faint); flex: none; inline-size: 12px; block-size: 12px; }
[dir="rtl"] .crumbs__sep { transform: scaleX(-1); }
.crumbs__current {
  padding: 4px var(--sp-2);
  color: var(--text);
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   8. SECTION HEADER
   ========================================================================== */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-block-end: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
}
.sec-head__text { max-inline-size: 62ch; }
.sec-head__title {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-3xl);
}
.sec-head__sub {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--text-2);
  max-inline-size: 58ch;
}
.sec-head__actions { display: flex; gap: var(--sp-2); flex: none; padding-block-end: 4px; }
.sec-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sec-head--center .sec-head__text { max-inline-size: 60ch; }
.sec-head--center .sec-head__sub { margin-inline: auto; }
.sec-head--ink .sec-head__title { color: #fff; }
.sec-head--ink .sec-head__sub { color: var(--text-on-ink-2); }

@media (max-width: 767px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .sec-head__actions { padding-block-end: 0; }
}

/* ==========================================================================
   9. FORMS
   ========================================================================== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.form-grid--1 { grid-template-columns: minmax(0, 1fr); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-2 { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.field { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }

.field__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.field__opt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  text-transform: lowercase;
}
.req { color: var(--brand-ink); font-weight: var(--fw-heavy); }

.field__hint {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-3);
}

.field__err {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--err-700);
}
.field__err svg { inline-size: 14px; block-size: 14px; flex: none; }
.field.is-invalid .field__err { display: flex; }

.input,
.select,
.textarea {
  inline-size: 100%;
  min-block-size: var(--control-h);
  padding-inline: var(--sp-4);
  padding-block: var(--sp-3);
  border: 0;
  border-radius: var(--control-r);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  transition:
    background var(--d-quick) var(--e-soft),
    box-shadow var(--d-quick) var(--e-soft),
    transform var(--d-quick) var(--e-spring);
}
.input::placeholder,
.textarea::placeholder { color: var(--text-faint); font-weight: var(--fw-regular); }

.input:hover,
.select:hover,
.textarea:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px var(--brand-soft);
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible { outline: none; }

.textarea { min-block-size: 140px; resize: vertical; line-height: var(--lh-normal); }
.textarea--tall { min-block-size: 200px; }
.textarea--code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  white-space: pre-wrap;
}
/* The mono stack covers no Arabic face, so Arabic prose falls back to a
   typewriter face with broken cursive joins. Keep the code aesthetic (size,
   leading, pre-wrap) but hand the glyphs back to Almarai in RTL. The
   `<code class="qpay__col">` chips stay mono on purpose — those are Latin
   DB column names, not prose. */
[dir="rtl"] .textarea--code { font-family: var(--font-body); }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--sp-10);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E7482' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  /* Both dimensions explicit: iOS Safari can tile the chevron across the whole
     control when only one value is given on a <select>. */
  background-size: 14px 14px;
  cursor: pointer;
}
[dir="rtl"] .select { background-position: left var(--sp-4) center; }
/* The chevron is a data-URI, so its stroke can't ride a token — brighten it in
   dark so it tracks the other faint icons (--text-3) instead of staying dim. */
:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23949CAC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23949CAC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
}

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea {
  background: var(--err-50);
  box-shadow: inset 0 0 0 2px var(--err-500);
}
.field.is-valid .input,
.field.is-valid .select,
.field.is-valid .textarea { box-shadow: inset 0 0 0 1px var(--ok-500); }

/* --- input with a leading icon / prefix --- */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-inline-start: var(--sp-12); }
.input-group__icon {
  position: absolute;
  inset-inline-start: var(--sp-4);
  inline-size: 18px;
  block-size: 18px;
  color: var(--text-faint);
  pointer-events: none;
}

/* --- checkbox / radio --- */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-2);
}
.check {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 48px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--d-quick) var(--e-soft), box-shadow var(--d-quick) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.check:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-1); }
.check input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}
.check__box {
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  flex: none;
  transition: background var(--d-quick) var(--e-spring), box-shadow var(--d-quick) var(--e-soft);
}
.check__box svg {
  inline-size: 12px;
  block-size: 12px;
  color: #fff;
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--d-fast) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.check input:checked ~ .check__box {
  background: var(--grad-cta);
  box-shadow: inset 0 0 0 2px transparent, var(--glow-brand);
}
.check input:checked ~ .check__box svg { opacity: 1; transform: scale(1); }
.check:has(input:checked) {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-soft-line);
  color: var(--text);
}
.check input:focus-visible ~ .check__box { outline: 3px solid var(--focus); outline-offset: 2px; }
.check--radio .check__box { border-radius: var(--r-circle); }

/* --- file input --- */
.file {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4);
  border-radius: var(--control-r);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  transition: background var(--d-quick) var(--e-soft), box-shadow var(--d-quick) var(--e-soft);
}
.file:hover { box-shadow: inset 0 0 0 2px var(--line-strong); }
.file.is-dragover,
.file.has-file {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand);
}
.file input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}
.file__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--btn-h-sm);
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--invert-bg);
  color: var(--invert-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  cursor: pointer;
  flex: none;
  transition: transform var(--d-quick) var(--e-spring), background var(--d-quick) var(--e-soft);
}
.file__btn:hover { transform: translateY(-2px); background: var(--invert-bg-h); }
.file__btn svg { inline-size: 14px; block-size: 14px; }
.file__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
}
.file.has-file .file__name { color: var(--text); }

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-block-start: var(--sp-6);
}
.form-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--note-bg);
  box-shadow: inset 0 0 0 1px var(--note-line);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--note-fg);
}
.form-note svg { inline-size: 16px; block-size: 16px; flex: none; margin-block-start: 2px; color: var(--note-icon); }

/* ==========================================================================
   10. PAGINATION
   ========================================================================== */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-block-start: var(--sp-12);
}
.pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  block-size: 44px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-2);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition:
    transform var(--d-quick) var(--e-spring),
    background var(--d-quick) var(--e-soft),
    color var(--d-quick) var(--e-soft),
    box-shadow var(--d-quick) var(--e-soft);
}
.pager__link:hover { transform: translateY(-2px); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-1); }
.pager__link[aria-current="page"],
.pager__link.is-active {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: var(--glow-brand);
}
.pager__link.is-disabled { opacity: .38; pointer-events: none; }
.pager__link svg { inline-size: 15px; block-size: 15px; }
[dir="rtl"] .pager__link svg { transform: scaleX(-1); }
.pager__ellipsis {
  display: inline-grid;
  place-items: center;
  min-inline-size: 32px;
  block-size: 44px;
  color: var(--text-faint);
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   11. TABLE / SPEC TABLE
   ========================================================================== */
.table-wrap {
  inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
}
.table {
  inline-size: 100%;
  min-inline-size: 420px;
  font-size: var(--fs-sm);
  text-align: start;
}
.table caption {
  padding: var(--sp-3) var(--sp-4);
  text-align: start;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.table th,
.table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--line);
}
.table thead th {
  background: var(--surface-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
[dir="rtl"] .table thead th { text-transform: none; font-size: var(--fs-xs); }
.table tbody tr { transition: background var(--d-fast) var(--e-soft); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-block-end: 0; }

/* Spec table: label column is a fixed, quiet rail. */
.table--specs { min-inline-size: 0; }
.table--specs th {
  inline-size: 38%;
  background: var(--surface-2);
  font-weight: var(--fw-bold);
  color: var(--text-2);
  white-space: normal;
}
.table--specs td { font-weight: var(--fw-semibold); color: var(--text); }
@media (max-width: 559px) {
  .table--specs, .table--specs tbody, .table--specs tr, .table--specs th, .table--specs td { display: block; inline-size: 100%; }
  .table--specs th { border-block-end: 0; padding-block-end: var(--sp-1); background: transparent; font-size: var(--fs-xs); color: var(--text-3); }
  .table--specs td { padding-block-start: 0; }
}

/* ==========================================================================
   12. TABS
   ========================================================================== */
.tabs__list {
  display: flex;
  gap: var(--sp-1);
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  inline-size: fit-content;
  max-inline-size: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 40px;
  padding-inline: var(--sp-5);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  flex: none;
  transition: background var(--d-quick) var(--e-soft), color var(--d-quick) var(--e-soft), box-shadow var(--d-quick) var(--e-out);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-2);
}
/* Below 560px three labels at --sp-5 tracking overrun the strip (401px of pills
   in a 328px rail at 360w), and the last one — "Artwork & Files" — gets sliced
   mid-word. A clipped strip with no fade reads as broken, and a permanent edge
   mask would sit over that same label forever, so shrink the pills until all
   three FIT instead. overflow-x stays as the safety net, but it no longer
   engages. Height (and therefore the tap target) is untouched. */
@media (max-width: 559px) {
  .tabs__tab { padding-inline: var(--sp-2); font-size: var(--fs-xs); }
}
.tabs__panel { padding-block-start: var(--sp-8); }
.tabs__panel[hidden] { display: none; }
.tabs__panel:not([hidden]) { animation: tab-in var(--d-base) var(--e-out) both; }
@keyframes tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   13. ACCORDION
   ========================================================================== */
.acc { display: flex; flex-direction: column; gap: var(--sp-3); }
.acc__item {
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--sh-ring);
  overflow: hidden;
  transition: box-shadow var(--d-base) var(--e-out);
}
.acc__item:has(.acc__btn[aria-expanded="true"]) { box-shadow: var(--sh-3), var(--sh-ring); }
.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  inline-size: 100%;
  min-block-size: 60px;
  padding: var(--sp-4) var(--sp-5);
  text-align: start;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
  transition: background var(--d-fast) var(--e-soft);
}
.acc__btn:hover { background: var(--surface-2); }
.acc__icon {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: var(--r-circle);
  background: var(--surface-3);
  color: var(--text-2);
  flex: none;
  transition: transform var(--d-base) var(--e-spring), background var(--d-quick) var(--e-soft), color var(--d-quick) var(--e-soft);
}
.acc__icon svg { inline-size: 13px; block-size: 13px; }
.acc__btn[aria-expanded="true"] .acc__icon {
  transform: rotate(180deg);
  background: var(--grad-cta);
  color: #fff;
}
.acc__panel { padding: 0 var(--sp-5) var(--sp-5); }
.acc__panel[hidden] { display: none; }

/* ==========================================================================
   14. SLIDER CHROME  (used by Bakkar.slider())
   ========================================================================== */
.slider { position: relative; overflow: hidden; }
.slider__viewport { position: relative; overflow: hidden; block-size: 100%; }
.slider__track {
  display: flex;
  block-size: 100%;
  transition: transform var(--d-slide) var(--e-out);
  will-change: transform;
}
.slider.is-dragging .slider__track { transition: none; }
.slider__slide {
  position: relative;
  flex: 0 0 100%;
  inline-size: 100%;
  min-inline-size: 0;
}

/* --- controls --- */
.slider__nav {
  position: absolute;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  color: #fff;
  transition: background var(--d-quick) var(--e-soft), transform var(--d-quick) var(--e-spring), color var(--d-quick) var(--e-soft);
}
.slider__btn:hover { background: #fff; color: var(--ink-900); transform: scale(1.08); }
.slider__btn:disabled { opacity: .35; pointer-events: none; }
.slider__btn svg { inline-size: 17px; block-size: 17px; }
[dir="rtl"] .slider__btn svg { transform: scaleX(-1); }
.slider__btn--pause svg { transform: none; }
[dir="rtl"] .slider__btn--pause svg { transform: none; }

.slider__dots {
  position: absolute;
  inset-block-end: var(--sp-6);
  inset-inline-start: var(--sp-6);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.slider__dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: inline-size var(--d-base) var(--e-spring), background var(--d-base) var(--e-soft);
}
.slider__dot:hover { background: rgba(255, 255, 255, .7); }
.slider__dot[aria-current="true"],
.slider__dot.is-active {
  inline-size: 30px;
  background: #fff;
}

/* Autoplay progress hairline. */
.slider__progress {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 3;
  block-size: 3px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
.slider__bar {
  block-size: 100%;
  inline-size: 100%;
  background: var(--grad-hot);
  /* transform-origin takes no logical keywords — mirror it explicitly. */
  transform-origin: left center;
  transform: scaleX(0);
}
[dir="rtl"] .slider__bar { transform-origin: right center; }

.slider.is-playing .slider__bar {
  animation: slider-bar var(--slider-delay, 6000ms) linear forwards;
}
/* Hovering or focusing the slider freezes the bar where it is, in step with
   the autoplay timer being held (see Bakkar.slider -> hold()/release()). */
.slider.is-hold .slider__bar { animation-play-state: paused; }

@keyframes slider-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .slider__progress { display: none; }
}

/* Dots on a light surface (thumbnail rails, related-product carousels). */
.slider--light .slider__dot { background: var(--line-strong); box-shadow: none; }
.slider--light .slider__dot[aria-current="true"] { background: var(--brand); }
.slider--light .slider__btn {
  background: var(--surface);
  box-shadow: var(--sh-2), inset 0 0 0 1px var(--line);
  color: var(--text);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.slider--light .slider__btn:hover { background: var(--invert-bg); color: var(--invert-fg); }

/* ==========================================================================
   15. TOAST
   ========================================================================== */
.toasts {
  position: fixed;
  inset-block-end: var(--sp-6);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  inline-size: min(440px, calc(100vw - var(--sp-8)));
  pointer-events: none;
}
[dir="rtl"] .toasts { transform: translateX(50%); }

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--ink-900);
  color: #fff;
  box-shadow: var(--sh-5);
  pointer-events: auto;
  animation: toast-in var(--d-slow) var(--e-spring) both;
}
.toast.is-leaving { animation: toast-out var(--d-base) var(--e-soft) both; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(12px) scale(.97); }
}
.toast__icon {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--r-circle);
  flex: none;
  margin-block-start: 1px;
}
.toast__icon svg { inline-size: 13px; block-size: 13px; }
.toast--ok  .toast__icon { background: var(--ok-500); color: #06301F; }
.toast--err .toast__icon { background: var(--err-500); color: #fff; }
.toast--info .toast__icon { background: var(--info-500); color: #fff; }
.toast__msg { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.5; }
.toast__close {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--r-circle);
  color: rgba(255, 255, 255, .6);
  flex: none;
  transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft);
}
.toast__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.toast__close svg { inline-size: 12px; block-size: 12px; }

/* ==========================================================================
   16. MODAL / LIGHTBOX
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: var(--backdrop-blur);
  backdrop-filter: var(--backdrop-blur);
  animation: fade-in var(--d-base) var(--e-soft) both;
}
.modal__panel {
  position: relative;
  inline-size: min(620px, 100%);
  max-block-size: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--sh-5);
  overflow: hidden;
  animation: modal-in var(--d-slow) var(--e-spring) both;
}
.modal__panel--wide { inline-size: min(1000px, 100%); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(24px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-block-end: var(--border);
  flex: none;
}
.modal__title { font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
.modal__close {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  flex: none;
  transition: background var(--d-fast) var(--e-soft), transform var(--d-base) var(--e-spring), color var(--d-fast) var(--e-soft);
}
.modal__close:hover { background: var(--invert-bg); color: var(--invert-fg); transform: rotate(90deg); }
.modal__close svg { inline-size: 15px; block-size: 15px; }
.modal__body {
  padding: var(--sp-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}
.modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-block-start: var(--border);
  background: var(--surface-2);
  flex: none;
}

/* --- quick view (product preview dialog) ---
   A browse-altitude preview opened from the card eye button. Built on .modal,
   so it inherits the head/close/backdrop/scroll-lock and flips with the theme
   because every colour here is a semantic token. */
.modal--qv .modal__panel { inline-size: min(860px, 100%); }
.qv { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 620px) {
  .qv { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; }
}
.qv__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--media-bed);
  background-image: linear-gradient(0deg, var(--tint, transparent) 0%, var(--tint, transparent) 100%);
}
.qv__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.qv__badges { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); z-index: 2; }
.qv__info { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.qv__eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .qv__eyebrow { text-transform: none; font-size: var(--fs-xs); }
.qv__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  line-height: 1.24;
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.qv__excerpt { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.qv__specs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-3);
  border-block-start: var(--border);
}
.qv__spec { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-xs); line-height: 1.4; }
.qv__spec-k { color: var(--text-3); font-weight: var(--fw-semibold); flex: none; }
.qv__spec-v { color: var(--text); text-align: end; min-inline-size: 0; }
.qv__tags { margin-block-start: var(--sp-3); }
/* Dark drops the pastel --tint so the media bed reads as a recessed surface,
   exactly like .p-card__media / .gal__stage. */
:root[data-theme="dark"] .qv__media { background-image: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .qv__media { background-image: none; }
}

/* --- lightbox --- */
.lightbox { z-index: var(--z-lightbox); padding: 0; }
.lightbox .modal__backdrop { background: rgba(8, 9, 13, .92); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* A 2-row grid (stage + caption) so the caption can never be pushed off the
   viewport, and the close button is pinned to the viewport, not the panel. */
.lightbox__panel {
  position: relative;
  inline-size: min(1200px, calc(100vw - var(--sp-8)));
  block-size: min(88vh, 900px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: var(--sp-4);
  animation: modal-in var(--d-slow) var(--e-spring) both;
}
.lightbox__stage {
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-block-size: 0;
  block-size: 100%;
  overflow: hidden;          /* a zoomed image must not escape the stage */
  touch-action: none;        /* we handle pan/zoom ourselves */
  cursor: zoom-out;          /* the empty space around the image closes on click */
}

/* --- lightbox toolbar --- */
.lightbox__bar {
  position: absolute;
  inset-block-start: calc(-1 * var(--sp-12));
  inset-inline: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-block-size: var(--tap);
}
.lightbox__count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
}
.lightbox__tools {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.lightbox__tool {
  display: inline-grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft);
}
.lightbox__tool:hover:not(:disabled) { background: rgba(255, 255, 255, .18); color: #fff; }
.lightbox__tool:disabled { opacity: .35; cursor: not-allowed; }
.lightbox__tool svg { inline-size: 18px; block-size: 18px; }
.lightbox__tool--close:hover { background: var(--red-cta); color: #fff; }
.lightbox__tool:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lightbox__level {
  min-inline-size: 4.5ch;
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  color: rgba(255, 255, 255, .78);
  font-variant-numeric: tabular-nums;
}
.lightbox__sep {
  inline-size: 1px;
  block-size: 20px;
  margin-inline: var(--sp-1);
  background: rgba(255, 255, 255, .18);
}

/* while panning, kill the transition so the drag tracks the pointer 1:1 */
.lightbox.is-zoomed .lightbox__img { transition: none; }

/* Video poster, shown ONLY on file:// where YouTube refuses to embed (Error 153).
   Served over http the real player embeds instead and this never renders. */
.lightbox__poster {
  position: relative;
  display: grid;
  place-items: center;
  max-inline-size: min(100%, 900px);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--sh-5);
}
.lightbox__poster img { display: block; inline-size: 100%; block-size: auto; max-block-size: 64vh; object-fit: cover; }
.lightbox__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  inline-size: 74px;
  block-size: 74px;
  border-radius: 50%;
  background: var(--red-cta);
  color: #fff;
  box-shadow: 0 10px 34px -8px rgba(0, 0, 0, .6);
  transition: transform var(--d-base) var(--e-spring);
}
[dir="rtl"] .lightbox__play { transform: translate(50%, -50%); }
.lightbox__poster:hover .lightbox__play { transform: translate(-50%, -50%) scale(1.08); }
[dir="rtl"] .lightbox__poster:hover .lightbox__play { transform: translate(50%, -50%) scale(1.08); }
.lightbox__play svg { inline-size: 28px; block-size: 28px; margin-inline-start: 3px; }
[dir="rtl"] .lightbox__play svg { margin-inline-start: 0; margin-inline-end: 3px; }
.lightbox__poster-note {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent);
  color: rgba(255, 255, 255, .9);
  font-size: var(--fs-xs);
  text-align: center;
}

@media (max-width: 559px) {
  .lightbox__bar { inset-block-start: calc(-1 * var(--sp-10)); gap: var(--sp-2); }
  .lightbox__tool { inline-size: 34px; block-size: 34px; }
  .lightbox__tool svg { inline-size: 16px; block-size: 16px; }
}
.lightbox__img {
  max-inline-size: 100%;
  /* Anchored to the VIEWPORT, not to a percentage. `max-block-size: 100%` was
     applied and computed here but never actually constrained the image — it kept
     rendering at its natural 1100px inside a 666px stage and ran off the bottom
     of the screen. A vh cap always resolves, whatever the grid chain does. */
  max-block-size: min(72vh, 800px);
  inline-size: auto;
  block-size: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-5);
  object-fit: contain;
  transform-origin: center center;
  transition: transform var(--d-base) var(--e-out);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

/* In full screen the panel owns the whole viewport, so let the picture use it. */
.lightbox.is-fullscreen .lightbox__panel {
  inline-size: 100vw;
  block-size: 100vh;
  padding: var(--sp-16) var(--sp-6) var(--sp-6);
}
.lightbox.is-fullscreen .lightbox__img { max-block-size: 82vh; }
.lightbox.is-fullscreen .lightbox__bar { inset-block-start: var(--sp-4); inset-inline: var(--sp-6); }
.lightbox__frame {
  inline-size: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-5);
  background: #000;
}
/* Pinned to the viewport corner — it can never be clipped by a tall image. */
.lightbox__close {
  position: fixed;
  inset-block-start: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 5;
}
/* Arrows sit INSIDE the stage at every width — outside-the-panel arrows clip
   the moment the viewport gets close to the panel's max width. */
.lightbox__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  color: #fff;
  transition: background var(--d-quick) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.lightbox__nav:hover { background: #fff; color: var(--ink-900); transform: translateY(-50%) scale(1.08); }
.lightbox__nav svg { inline-size: 20px; block-size: 20px; }
[dir="rtl"] .lightbox__nav svg { transform: scaleX(-1); }
.lightbox__nav--prev { inset-inline-start: var(--sp-3); }
.lightbox__nav--next { inset-inline-end: var(--sp-3); }

.lightbox__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  text-align: center;
  color: rgba(255, 255, 255, .8);
  font-size: var(--fs-sm);
  min-block-size: 1.5em;
}
.lightbox__count {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  color: #fff;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   17. SKELETON
   ========================================================================== */
.skel {
  position: relative;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  overflow: hidden;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--overlay-inv-2), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skel--text  { block-size: 12px; margin-block-end: var(--sp-2); }
.skel--text:last-child { inline-size: 62%; }
.skel--title { block-size: 20px; inline-size: 70%; border-radius: var(--r-xs); margin-block-end: var(--sp-3); }
.skel--media { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.skel--pill  { block-size: 32px; inline-size: 90px; border-radius: var(--r-pill); }
.skel-card {
  padding: var(--sp-3);
  border-radius: var(--card-r);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--sh-ring);
}
.skel-card__body { padding: var(--sp-4) var(--sp-2) var(--sp-2); }

/* ==========================================================================
   18. EMPTY STATE
   ========================================================================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) var(--sp-6);
  border-radius: var(--r-2xl);
  background: var(--surface-2);
  box-shadow: var(--sh-ring-warm);
}
.empty__icon {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: var(--r-xl);
  background: var(--grad-hot-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand-soft-line);
  margin-block-end: var(--sp-2);
}
.empty__icon svg { inline-size: 30px; block-size: 30px; }
.empty__title { font-size: var(--fs-xl); }
.empty__body { max-inline-size: 46ch; color: var(--text-2); font-size: var(--fs-sm); }
.empty__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-block-start: var(--sp-3); }

/* ==========================================================================
   19. STAT / COUNT-UP
   ========================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--sp-5);
}
.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat__num {
  font-family: var(--font-num);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] .stat { align-items: flex-start; }
.stat__num--grad {
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-inline-end: 0.06em;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .stat__num--grad { color: var(--brand); -webkit-text-fill-color: currentColor; }
}
.stat__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-3);
  letter-spacing: var(--ls-wide);
  line-height: 1.4;
}
.stat--ink .stat__num { color: #fff; }
.stat--ink .stat__label { color: var(--text-on-ink-2); }
.stat--on-brand .stat__num { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.stat--on-brand .stat__label { color: rgba(255, 255, 255, .82); }

/* ==========================================================================
   20. RAIL / STEP / MEDIA / MISC
   ========================================================================== */
/* Horizontal scroll-snap rail — process steps, related products, thumbs. */
.rail {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block-end: var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.rail::-webkit-scrollbar { block-size: 6px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }
.rail::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Numbered process step. */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  inline-size: min(280px, 78vw);
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2), var(--sh-ring);
  transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out);
}
.step:hover { transform: var(--lift); box-shadow: var(--sh-4), var(--sh-ring); }
.step__n {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-md);
  background: var(--grad-hot-soft);
  box-shadow: inset 0 0 0 1px var(--brand-soft-line);
  color: var(--brand-ink);
  font-family: var(--font-num);
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  direction: ltr;
  flex: none;
}
.step:hover .step__n { background: var(--grad-cta); color: #fff; box-shadow: var(--glow-brand); }
.step__title { font-size: var(--fs-md); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--text); }
.step__desc { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }

/* Capability / feature tile. */
.feat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  block-size: 100%;
  padding: var(--card-pad);
  border-radius: var(--card-r);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--sh-ring);
  transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out);
}
.feat:hover { transform: var(--lift); box-shadow: var(--sh-4), var(--sh-ring); }
.feat__icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--r-md);
  background: var(--grad-hot-soft);
  box-shadow: inset 0 0 0 1px var(--brand-soft-line);
  color: var(--brand);
  flex: none;
  transition: background var(--d-base) var(--e-soft), color var(--d-base) var(--e-soft), transform var(--d-base) var(--e-spring);
}
.feat__icon svg { inline-size: 22px; block-size: 22px; }
.feat:hover .feat__icon { background: var(--grad-cta); color: #fff; transform: rotate(-5deg) scale(1.05); }
.feat__title { font-size: var(--fs-md); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--text); }
.feat__desc { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-2); }

/* Key/value info row (contact details, agent contacts). */
.info-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.info-row { display: flex; align-items: flex-start; gap: var(--sp-4); }
.info-row__icon {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand-ink);
  flex: none;
}
.info-row__icon svg { inline-size: 18px; block-size: 18px; }
.info-row__k {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .info-row__k { text-transform: none; font-size: var(--fs-xs); }
.info-row__v { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); line-height: 1.55; }
.info-row__v a:hover { color: var(--brand-ink); }

/* Social icon row (light surfaces). */
.social { display: flex; gap: var(--sp-2); }
.social a {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  transition: background var(--d-quick) var(--e-soft), color var(--d-quick) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.social a:hover { background: var(--grad-cta); color: #fff; transform: translateY(-3px); box-shadow: var(--glow-brand); }
.social svg { inline-size: 18px; block-size: 18px; }

/* Share row (product page). */
.share { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.share__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-3); }

/* Map embed. */
.map-embed {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-3), var(--sh-ring);
  background: var(--surface-3);
}
.map-embed iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

/* Video thumb with a play badge (product gallery). */
.play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(11, 12, 18, .35);
  transition: background var(--d-quick) var(--e-soft);
}
.play-badge::after {
  content: '';
  inline-size: 54px;
  block-size: 54px;
  border-radius: var(--r-circle);
  background: var(--grad-cta);
  box-shadow: var(--glow-brand-lg);
  clip-path: none;
  transition: transform var(--d-base) var(--e-spring);
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"),
    var(--grad-cta);
  background-repeat: no-repeat;
  background-position: center;
}
*:hover > .play-badge { background: rgba(11, 12, 18, .18); }
*:hover > .play-badge::after { transform: scale(1.12); }

/* A quiet divider with a warm dot in the middle. */
.divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--line-strong);
}
.divider::before,
.divider::after { content: ''; block-size: 1px; flex: 1 1 auto; background: currentColor; }
.divider__dot { inline-size: 6px; block-size: 6px; border-radius: var(--r-circle); background: var(--amber-400); flex: none; }

/* Spinner. */
.spinner {
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--r-circle);
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  animation: spin 700ms linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading { pointer-events: none; }
.btn.is-loading > :not(.spinner) { opacity: .5; }

/* Brand marquee — the customer names on the packs we print. */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  inline-size: max-content;
  gap: var(--sp-4);
  animation: marquee 42s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--sh-ring);
  font-family: var(--font-num);
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text-2);
  white-space: nowrap;
  direction: ltr;
}
.marquee__item::before {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--r-circle);
  background: var(--grad-hot);
  flex: none;
}

/* ==========================================================================
   21. CTA BAND  (the closing "Request a Quote" device — used on every page)
   ========================================================================== */
.cta-band {
  position: relative;
  display: grid;
  gap: var(--sp-8);
  padding: clamp(2rem, 1.3rem + 3vw, 4rem);
  border-radius: var(--r-3xl);
  background: var(--grad-cta);
  color: var(--text-on-brand);
  box-shadow: var(--glow-brand-lg), var(--sh-4);
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before,
.cta-band::after {
  content: '';
  position: absolute;
  border-radius: var(--r-circle);
  z-index: -1;
  pointer-events: none;
}
.cta-band::before {
  inline-size: 30rem;
  block-size: 30rem;
  inset-block-start: -45%;
  inset-inline-end: -8%;
  background: radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 65%);
}
.cta-band::after {
  inline-size: 22rem;
  block-size: 22rem;
  inset-block-end: -40%;
  inset-inline-start: -5%;
  background: radial-gradient(circle, rgba(255,190,120,.28) 0%, rgba(255,190,120,0) 65%);
}
@media (min-width: 900px) {
  .cta-band { grid-template-columns: 1.35fr 1fr; align-items: center; }
}
.cta-band__title {
  font-size: var(--fs-3xl);
  color: #fff;
  letter-spacing: var(--ls-tighter);
}
.cta-band__body {
  margin-block-start: var(--sp-4);
  max-inline-size: 54ch;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: rgba(255, 255, 255, .90);
}
.cta-band__note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-5);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #fff;
}
.cta-band__note svg { inline-size: 14px; block-size: 14px; flex: none; }
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 900px) {
  .cta-band__actions { align-items: stretch; }
}

/* ==========================================================================
   22. SEARCH DIALOG  (.sdlg)  — the command palette
   --------------------------------------------------------------------------
   The header carries a single search ICON. It opens this: a large field, live
   results grouped by kind, keyboard-driven, focus-trapped. There is no inline
   header search field anywhere in the theme any more.

   Opened by: the header search button, "/" or Cmd/Ctrl+K (app.js).
   ========================================================================== */
.sdlg {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  /* Not centred: a command palette belongs in the upper third, where the eye
     already is and where the results have room to grow downwards. */
  align-content: start;
  justify-items: center;
  padding: clamp(1rem, 6vh, 6rem) var(--gutter) var(--gutter);
}
.sdlg__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: var(--backdrop-blur);
  backdrop-filter: var(--backdrop-blur);
  animation: fade-in var(--d-base) var(--e-soft) both;
}
.sdlg__panel {
  position: relative;
  inline-size: min(640px, 100%);
  max-block-size: min(70vh, 620px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--sh-5), var(--sh-ring);
  overflow: hidden;
  animation: sdlg-in var(--d-slow) var(--e-spring) both;
}
@keyframes sdlg-in {
  from { opacity: 0; transform: translateY(-16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---- the field ---- */
.sdlg__form {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  padding-inline: var(--sp-5);
  block-size: 68px;
  border-block-end: var(--border);
}
.sdlg__icon {
  inline-size: 20px;
  block-size: 20px;
  color: var(--brand-ink);
  flex: none;
}
.sdlg__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.sdlg__input::placeholder { color: var(--text-faint); font-weight: var(--fw-medium); }
.sdlg__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sdlg__input:focus-visible { outline: none; }   /* the whole panel IS the field */

.sdlg__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--r-circle);
  background: var(--surface-3);
  color: var(--text-2);
  flex: none;
  transition: background var(--d-fast) var(--e-soft);
}
.sdlg__clear:hover { background: var(--surface-4); color: var(--text); }
.sdlg__clear svg { inline-size: 12px; block-size: 12px; }

.sdlg__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  flex: none;
  transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.sdlg__close:hover { background: var(--invert-bg); color: var(--invert-fg); transform: rotate(90deg); }
.sdlg__close svg { inline-size: 13px; block-size: 13px; }

/* ---- results ---- */
.sdlg__results {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2);
}
.sdlg__group {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .sdlg__group { text-transform: none; font-size: var(--fs-xs); }

.sdlg__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--tap);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  transition: background var(--d-fast) var(--e-soft);
}
.sdlg__item:hover,
.sdlg__item.is-active {
  background: var(--brand-soft);
}
.sdlg__item.is-active .sdlg__name { color: var(--brand-ink); }
.sdlg__item.is-active .sdlg__go { opacity: 1; transform: none; }

.sdlg__thumb {
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--media-bed);
  flex: none;
}
.sdlg__thumb--icon {
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.sdlg__thumb--icon svg { inline-size: 20px; block-size: 20px; }

.sdlg__meta { min-inline-size: 0; flex: 1 1 auto; }
.sdlg__name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1.35;
}
.sdlg__sub {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.sdlg__go {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--brand-ink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--d-fast) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
[dir="rtl"] .sdlg__go { transform: scaleX(-1) translateX(-4px); }
[dir="rtl"] .sdlg__item.is-active .sdlg__go { transform: scaleX(-1); }
.sdlg__item:hover .sdlg__go { opacity: 1; }

/* Chip row used by the empty state ("popular categories"). */
.sdlg__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
}
.sdlg__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 36px;
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.sdlg__chip:hover {
  background: var(--brand-soft);
  color: var(--brand-ink);
  transform: translateY(-2px);
}

/* No-results */
.sdlg__empty { padding: var(--sp-8) var(--sp-5); text-align: center; }
.sdlg__empty-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.sdlg__empty-icon svg { inline-size: 22px; block-size: 22px; }
.sdlg__empty-title { font-size: var(--fs-md); font-weight: var(--fw-heavy); color: var(--text); }
.sdlg__empty-body {
  margin-block-start: var(--sp-2);
  margin-inline: auto;
  max-inline-size: 40ch;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.sdlg__empty-actions { display: flex; justify-content: center; gap: var(--sp-2); margin-block-start: var(--sp-5); flex-wrap: wrap; }

/* ---- foot: keyboard legend + view-all ---- */
.sdlg__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
  padding: var(--sp-3) var(--sp-4);
  border-block-start: var(--border);
  background: var(--surface-2);
}
.sdlg__hints { display: flex; align-items: center; gap: var(--sp-4); min-inline-size: 0; }
.sdlg__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
  white-space: nowrap;
}
@media (max-width: 559px) { .sdlg__hints { display: none; } }

.kbd {
  display: inline-grid;
  place-items: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 5px;
  border-radius: var(--r-xs);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 0 var(--line-strong);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--text-2);
  direction: ltr;
}

.sdlg__all {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
  min-block-size: 36px;
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  transition: background var(--d-fast) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.sdlg__all:hover { background: var(--brand-soft-line); transform: translateY(-1px); }
.sdlg__all svg { inline-size: 14px; block-size: 14px; }
[dir="rtl"] .sdlg__all svg { transform: scaleX(-1); }

/* ==========================================================================
   23. THEME CUSTOMISER  (.cust) + the generic segmented radio (.seg)
   --------------------------------------------------------------------------
   A real dialog: focus-trapped, Esc closes, labelled, backdrop click closes.
   On desktop it hangs under the header at the inline-end. On mobile it becomes
   a bottom sheet (and its trigger lives in the drawer).
   ========================================================================== */
.cust {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}
.cust__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: var(--backdrop-blur);
  backdrop-filter: var(--backdrop-blur);
  animation: fade-in var(--d-base) var(--e-soft) both;
}
.cust__panel {
  position: absolute;
  inset-block-start: calc(var(--header-h) + var(--sp-2));
  inset-inline-end: var(--gutter);
  inline-size: min(340px, calc(100vw - var(--gutter) * 2));
  max-block-size: calc(100vh - var(--header-h) - var(--sp-8));
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-5), var(--sh-ring);
  overflow: hidden;
  animation: cust-in var(--d-base) var(--e-out) both;
}
@keyframes cust-in {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* Mobile: a bottom sheet. Thumb-reachable, and it cannot hang off the edge. */
@media (max-width: 767px) {
  .cust__panel {
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline: 0;
    inline-size: auto;
    max-block-size: 86vh;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    animation-name: cust-in-sheet;
  }
  @keyframes cust-in-sheet {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
}

.cust__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex: none;
  padding: var(--sp-4) var(--sp-4) var(--sp-3) var(--sp-5);
  border-block-end: var(--border);
}
.cust__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  color: var(--text);
}
.cust__title svg { inline-size: 17px; block-size: 17px; color: var(--brand-ink); }
.cust__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  flex: none;
  transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.cust__close:hover { background: var(--invert-bg); color: var(--invert-fg); transform: rotate(90deg); }
.cust__close svg { inline-size: 13px; block-size: 13px; }

.cust__body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.cust__legend {
  display: block;
  margin-block-end: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .cust__legend { text-transform: none; font-size: var(--fs-xs); }

.cust__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex: none;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-block-start: var(--border);
  background: var(--surface-2);
}
.cust__note {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  line-height: 1.4;
}

/* ---- .seg — a segmented radiogroup. Reused by all three settings. ---- */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg--stack { grid-auto-flow: row; grid-auto-columns: auto; }
.seg__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 38px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-2);
  white-space: nowrap;
  transition:
    background var(--d-quick) var(--e-soft),
    color var(--d-quick) var(--e-soft),
    box-shadow var(--d-quick) var(--e-soft);
}
.seg__opt svg { inline-size: 15px; block-size: 15px; flex: none; }
.seg__opt:hover { color: var(--text); background: var(--overlay-1); }
.seg__opt[aria-checked="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-2);
}
/* The colour swatch on the "Bakkar Red" options — the option shows you what it
   will do before you pick it. */
.seg__sw {
  inline-size: 14px;
  block-size: 14px;
  border-radius: 5px;
  flex: none;
  box-shadow: inset 0 0 0 1px var(--overlay-2);
}
.seg__sw--default { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.seg__sw--red     { background: var(--red-brand); box-shadow: 0 2px 6px -2px rgba(255, 0, 16, .6); }

/* ---- .fontpick — the ARABIC FONT radiogroup -------------------------------
   Eleven options will not fit a segmented control, so this is a scrollable
   list of radios in the same rounded, inset well the .seg wears — one option
   per row, each one SET IN ITS OWN FACE (name + a live Arabic sample) so the
   difference is visible before you commit to it. Arabic only: the Latin
   typography of the theme is never touched.
   -------------------------------------------------------------------------- */
.fontpick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
  /* ~4.5 rows: enough to read as a list, short enough that the three settings
     above it stay on screen. Scrolls itself, not the dialog. */
  max-block-size: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.fontpick::-webkit-scrollbar { inline-size: 6px; }
.fontpick::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }
.fontpick::-webkit-scrollbar-track { background: transparent; }

.fontpick__opt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: 46px;
  padding-block: var(--sp-2);
  padding-inline: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  text-align: start;
  color: var(--text-2);
  flex: none;
  transition:
    background var(--d-quick) var(--e-soft),
    color var(--d-quick) var(--e-soft),
    box-shadow var(--d-quick) var(--e-soft),
    transform var(--d-quick) var(--e-spring);
}
.fontpick__opt:hover { background: var(--overlay-1); color: var(--text); }
.fontpick__opt:active { transform: scale(.985); }
/* The list is a scroll container: an outset ring would be clipped by its own
   4px gutter, so the focus ring is drawn INSIDE the row instead. */
.fontpick__opt:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  border-radius: var(--r-sm);
}
.fontpick__opt[aria-checked="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-2);
}

/* The tick — an empty ring at rest, the brand gradient once chosen. */
.fontpick__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--r-circle);
  flex: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: transparent;
  transition: background var(--d-quick) var(--e-soft), box-shadow var(--d-quick) var(--e-soft), color var(--d-fast) var(--e-soft);
}
.fontpick__tick svg { inline-size: 10px; block-size: 10px; }
.fontpick__opt[aria-checked="true"] .fontpick__tick {
  background: var(--grad-cta);
  box-shadow: var(--glow-brand), inset 0 0 0 1px rgba(255, 255, 255, .18);
  color: #fff;
}

/* The two label lines. font-family is set per option below — this is the
   preview, so it must NOT inherit the page's current Arabic face. */
.fontpick__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0;
  flex: 1 1 auto;
}
.fontpick__name {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fontpick__opt[aria-checked="true"] .fontpick__name { color: var(--brand-ink); }
/* The Arabic sample — the part that actually sells the choice. */
.fontpick__sample {
  font-size: 1.0625rem;
  font-weight: var(--fw-regular);
  line-height: 1.55;
  letter-spacing: 0;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "Default" flag on Sultan Nahia. */
.fontpick__badge {
  align-self: center;
  flex: none;
  padding-block: 2px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-soft-fg);
  box-shadow: inset 0 0 0 1px var(--brand-soft-line);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1.35;
  white-space: nowrap;
}

/* EVERY option previews itself. The families come from the same --fam-* tokens
   that tokens.css hands to --font-ar, so a preview can never lie. */
.fontpick__opt[data-value="sultan"]    .fontpick__text { font-family: var(--fam-sultan); }
.fontpick__opt[data-value="cairo"]     .fontpick__text { font-family: var(--fam-cairo); }
.fontpick__opt[data-value="tajawal"]   .fontpick__text { font-family: var(--fam-tajawal); }
.fontpick__opt[data-value="almarai"]   .fontpick__text { font-family: var(--fam-almarai); }
.fontpick__opt[data-value="plexar"]    .fontpick__text { font-family: var(--fam-plexar); }
.fontpick__opt[data-value="notosans"]  .fontpick__text { font-family: var(--fam-notosans); }
.fontpick__opt[data-value="notokufi"]  .fontpick__text { font-family: var(--fam-notokufi); }
.fontpick__opt[data-value="vazirmatn"] .fontpick__text { font-family: var(--fam-vazirmatn); }
.fontpick__opt[data-value="changa"]    .fontpick__text { font-family: var(--fam-changa); }
.fontpick__opt[data-value="elmessiri"] .fontpick__text { font-family: var(--fam-elmessiri); }
.fontpick__opt[data-value="amiri"]     .fontpick__text { font-family: var(--fam-amiri); }

/* The hint under the legend — this setting is Arabic-only, say so. */
.cust__hint {
  margin-block: -2px var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--text-faint);
}

/* ==========================================================================
   24. DARK-MODE COMPONENT ADJUSTMENTS
   --------------------------------------------------------------------------
   Almost everything is already token-driven. These are the handful of places
   where a LIGHT-specific decoration has to be switched off rather than
   re-coloured. The @media twin is the JS-disabled fallback — keep them in sync.
   ========================================================================== */
:root[data-theme="dark"] .p-card__media { background-image: none; }
:root[data-theme="dark"] .c-card--empty .c-card__img { opacity: .22; }
:root[data-theme="dark"] .badge--glass,
:root[data-theme="dark"] .btn--glass { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* The .btn--white / .slider__btn / .lightbox__nav family live on PHOTOGRAPHY or
   on the ink slab, which is dark in both themes. They stay exactly as they are
   — that is not an oversight, it is the point of "on-ink" components. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .p-card__media { background-image: none; }
  :root:not([data-theme]) .c-card--empty .c-card__img { opacity: .22; }
}

/* ==========================================================================
   CUSTOMISER — no blur behind the panel.
   The customiser is where you pick the ARABIC FONT. Blurring (or heavily
   dimming) the page behind it hides the very text you are trying to judge, so
   the panel keeps its own elevation while the page stays legible behind it.
   A light scrim still carries focus without obscuring the type.
   Scoped `.cust .cust__…` (0,2,0) so it wins over the base rule without !important.
   ========================================================================== */
.cust .cust__backdrop,
.cust .cust__scrim,
.cust .cust__veil {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(10, 12, 16, .22);
}