/* ==========================================================================
   BAKKAR PRINTING — THEME "INDUSTRIAL PRECISION"
   components.css — the reusable kit.
   --------------------------------------------------------------------------
   OWNER: foundation agent. Page agents must NOT edit this file.
   Depends on: tokens.css, base.css (link in that order).

   Every component reads SEMANTIC tokens only, so every component works
   unchanged inside `zone--paper` (light) and `zone--ink` (dark).
   Every box-model property is LOGICAL, so every component works in RTL.
   Every corner is square. That is the theme.

   CONTENTS
     01 Buttons                  11 Toast
     02 Section header           12 Modal + Lightbox
     03 Spec table / table       13 Skeleton
     04 Product card             14 Empty state
     05 Category card            15 Prose (rich HTML)
     06 Agent card               16 Slider chrome
     07 Tags / chips / badges    17 Ticker (marquee)
     08 Breadcrumb               18 Search
     09 Form controls            19 Spec strip · stats · steps · capability
     10 Pagination               20 CTA band · notes · marks · misc
   ========================================================================== */


/* ==========================================================================
   01. BUTTONS
   ========================================================================== */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-block-size: 46px;
  padding-block: var(--s-3);
  padding-inline: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  color: var(--fg);
  background-color: transparent;
  border: var(--bw-hair) solid transparent;
  overflow: hidden;
  transition: color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}
/* The wipe. Every button in this theme fills from the inline-start edge. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
[dir="rtl"] .btn::before { transform-origin: right; }
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn > svg { inline-size: 14px; block-size: 14px; flex: none; }
.btn__label { display: inline-block; }

/* -- primary: solid red. Wipes to graphite on hover. -----------------------
   It reads its four colours through custom properties with token defaults, so
   a HOST can re-point them (the header CTA on a red bar inverts to a white
   plate with red type) without fighting the cascade. Setting a custom property
   the rule only READS can never lose a specificity race against `.btn--primary`.
   --accent-solid (#D31219) is the red that carries WHITE text at 5.4:1 — the
   logo red #ED1C24 only manages 4.4:1 and would fail AA here.               */
.btn--primary {
  color: var(--btn-fg, var(--accent-fg));
  background-color: var(--btn-bg, var(--accent-solid));
  border-color: var(--btn-bd, var(--accent-solid));
}
.btn--primary::before { background-color: var(--btn-wipe, var(--ink-1000)); }
.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--btn-fg-h, #FFFFFF);
  border-color: var(--btn-wipe, var(--ink-1000));
}
.btn--primary:active { background-color: var(--accent-press); }

/* -- secondary: hairline. Wipes to red on hover. -------------------------- */
.btn--secondary {
  color: var(--fg);
  border-color: var(--line-contrast);
}
/* The WIPE is a red SURFACE that ends up under WHITE text, so it is
   --accent-solid, never --accent. (--accent in dark is #FF2A32; white on it is
   3.73:1 and fails AA. #D31219 carries white at 5.43:1.) The 1px rules on the
   REST of this file stay --accent — that is the token's actual job. */
.btn--secondary::before { background-color: var(--accent-solid); }
.btn--secondary:hover,
.btn--secondary:focus-visible { color: var(--accent-fg); border-color: var(--accent-solid); }

/* -- outline-accent: hairline, but already red. --------------------------- */
.btn--accent-line {
  color: var(--accent);
  border-color: var(--accent);
}
.btn--accent-line::before { background-color: var(--accent-solid); }
.btn--accent-line:hover,
.btn--accent-line:focus-visible { color: var(--accent-fg); border-color: var(--accent-solid); }

/* -- ghost: text only, with a rule that grows. ---------------------------- */
.btn--ghost {
  color: var(--fg-muted);
  padding-inline: var(--s-2);
  min-block-size: 34px;
}
.btn--ghost::before { display: none; }
.btn--ghost::after {
  content: "";
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: var(--s-2);
  inline-size: calc(100% - var(--s-4));
  block-size: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-1) var(--ease);
}
[dir="rtl"] .btn--ghost::after { transform-origin: right; }
.btn--ghost:hover { color: var(--accent); }
.btn--ghost:hover::after { transform: scaleX(1); }

/* -- icon-only ------------------------------------------------------------ */
.btn--icon {
  inline-size: 46px;
  min-inline-size: 46px;
  block-size: 46px;
  min-block-size: 46px;
  padding: 0;
  border-color: var(--line);
  color: var(--fg-muted);
}
.btn--icon::before { background-color: var(--accent-solid); }
.btn--icon:hover { color: var(--accent-fg); border-color: var(--accent-solid); }

/* -- sizes ---------------------------------------------------------------- */
.btn--sm {
  min-block-size: 36px;
  padding-inline: var(--s-4);
  font-size: var(--fs-2xs);
  gap: var(--s-2);
}
.btn--sm > svg { inline-size: 12px; block-size: 12px; }
.btn--lg {
  min-block-size: 56px;
  padding-inline: var(--s-8);
  font-size: var(--fs-sm);
}
/* A block button fills its container, so it must also be allowed to WRAP inside
   it. Inheriting `.btn`'s nowrap made its min-content the full label width (the
   337px "Request a quote for this product" in the product datasheet aside), which
   propped open the grid track and shoved the page sideways at 360/390. */
.btn--block {
  display: flex;
  inline-size: 100%;
  white-space: normal;
  text-wrap: balance;
  line-height: 1.25;
}

.btn:disabled,
.btn.is-disabled { opacity: 0.42; pointer-events: none; }

/* A button group with shared hairlines. */
.btn-group {
  display: inline-flex;
  border: var(--bw-hair) solid var(--line);
}
.btn-group > .btn {
  border: 0;
  border-inline-end: var(--bw-hair) solid var(--line);
}
.btn-group > .btn:last-child { border-inline-end: 0; }


/* ==========================================================================
   02. SECTION HEADER  —  the numbered index (01 / 02 / 03) signature.
   --------------------------------------------------------------------------
   <header class="sec-head">
     <div class="sec-head__lead">
       <span class="sec-head__index">01</span>
       <div class="sec-head__text">
         <span class="sec-head__label micro">…</span>
         <h2 class="sec-head__title">…</h2>
         <p class="sec-head__sub">…</p>
       </div>
     </div>
     <div class="sec-head__actions"> … </div>
   </header>
   ========================================================================== */
.sec-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding-block-end: var(--s-5);
  margin-block-end: var(--s-9);
  border-block-end: var(--bw-hair) solid var(--line);
}
.sec-head::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 68px;
  block-size: var(--bw-rule);
  background-color: var(--accent);
}
.sec-head__lead {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  min-inline-size: 0;
  flex: 1 1 22rem;
}
.sec-head__index {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent);
  padding-block-start: 0.35em;
  font-variant-numeric: tabular-nums;
}
.sec-head__index::before { content: "/ "; color: var(--line-contrast); }
.sec-head__text { min-inline-size: 0; }
.sec-head__label {
  display: block;
  margin-block-end: var(--s-3);
  color: var(--fg-subtle);
}
.sec-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: var(--track-none);
  color: var(--fg-strong);
}
[dir="rtl"] .sec-head__title { text-transform: none; line-height: 1.25; }
.sec-head__sub {
  margin-block-start: var(--s-4);
  max-inline-size: var(--measure);
  font-size: var(--fs-base);
  color: var(--fg-muted);
}
.sec-head__actions { flex: none; padding-block-end: 2px; }

@media (max-width: 639px) {
  .sec-head { align-items: flex-start; }
  .sec-head__actions { inline-size: 100%; }
}


/* ==========================================================================
   03. SPEC TABLE  —  "TECHNICAL SPECIFICATION" framing. + generic .table
   ========================================================================== */
.spec {
  border: var(--bw-hair) solid var(--line);
  background-color: var(--surface);
}
.spec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-block-end: var(--bw-hair) solid var(--line);
  background-color: var(--surface-2);
}
.spec__head-title {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--fg-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.spec__head-title::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  background-color: var(--accent);
  flex: none;
}
.spec__head-ref {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

.spec__table { inline-size: 100%; }
.spec__table tr { border-block-end: var(--bw-hair) solid var(--line); }
.spec__table tr:last-child { border-block-end: 0; }
.spec__table tr:nth-child(even) { background-color: var(--alpha-w-02); }
.zone--paper .spec__table tr:nth-child(even) { background-color: var(--alpha-k-04); }

.spec__table th {
  inline-size: 38%;
  padding: var(--s-4) var(--s-5);
  text-align: start;
  vertical-align: top;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  border-inline-end: var(--bw-hair) solid var(--line);
  white-space: nowrap;
}
.spec__table td {
  padding: var(--s-4) var(--s-5);
  vertical-align: top;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg);
}
.spec__foot {
  padding: var(--s-4) var(--s-5);
  border-block-start: var(--bw-hair) solid var(--line);
  background-color: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}
@media (max-width: 479px) {
  .spec__table th { inline-size: 42%; white-space: normal; padding-inline: var(--s-4); }
  .spec__table td { padding-inline: var(--s-4); }
}

/* Generic data table. */
.table { inline-size: 100%; border: var(--bw-hair) solid var(--line); }
.table caption {
  padding: var(--s-4) var(--s-5);
  text-align: start;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  border-block-end: var(--bw-hair) solid var(--line);
  background-color: var(--surface-2);
}
.table th,
.table td {
  padding: var(--s-3) var(--s-5);
  text-align: start;
  border-block-end: var(--bw-hair) solid var(--line);
  font-size: var(--fs-sm);
}
.table th {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  background-color: var(--surface-2);
}
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr:hover { background-color: var(--surface-3); }

/* Any wide block must scroll inside itself, never the page. */
/* Wide spec tables scroll INSIDE this box. `contain: paint` is load-bearing: in
   RTL the scroller's inline overflow otherwise leaks a few px into the ancestor
   chain and pushes the document itself sideways (categories.html was +5px at
   360 AR). Containment pins the overflow to the scroller, where it belongs. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  contain: paint;
}


/* ==========================================================================
   04. PRODUCT CARD
   --------------------------------------------------------------------------
   Rendered by Bakkar.render.productCard(p) — see app.js. Every card carries a
   REQUEST A QUOTE action. There is no price and never a cart.
   ========================================================================== */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
  transition: border-color var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease);
}
.pcard:hover,
.pcard:focus-within { border-color: var(--line-contrast); }

/* The red slab that runs up the inline-start edge on hover. */
.pcard::before {
  content: "";
  position: absolute;
  inset-block: -1px;
  inset-inline-start: -1px;
  inline-size: var(--bw-slab);
  background-color: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-2) var(--ease);
  z-index: 2;
}
.pcard:hover::before,
.pcard:focus-within::before { transform: scaleY(1); }

.pcard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--surface-inset);
  border-block-end: var(--bw-hair) solid var(--line);
}
.pcard__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  background-color: transparent;
  transition: transform var(--dur-4) var(--ease), filter var(--dur-3) var(--ease);
}
.pcard:hover .pcard__img { transform: scale(1.045); }

/* REF chip — the product id, straight off the DB row. Traceability. */
.pcard__ref {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--paper-100);
  background-color: rgba(5, 6, 7, 0.78);
  border-inline-end: var(--bw-hair) solid var(--alpha-w-16);
  border-block-end: var(--bw-hair) solid var(--alpha-w-16);
  font-variant-numeric: tabular-nums;
}
/* Media count chip (images + videos), block-end/inline-end of the media. */
.pcard__count {
  position: absolute;
  inset-block-end: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--paper-100);
  background-color: rgba(5, 6, 7, 0.78);
}
.pcard__count svg { inline-size: 11px; block-size: 11px; }

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
  padding: var(--s-5);
}
.pcard__cat {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent);
}
.pcard__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--fg-strong);
}
[dir="rtl"] .pcard__title { text-transform: none; line-height: 1.4; }
.pcard__title a { display: block; }
.pcard__title a::after {
  /* Full-card click target, without wrapping the whole card in an <a>. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pcard__title a:hover { color: var(--accent); }
.pcard__excerpt {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-1);
}

.pcard__foot {
  display: flex;
  margin-block-start: auto;
  border-block-start: var(--bw-hair) solid var(--line);
}
.pcard__act {
  position: relative;
  z-index: 2;               /* beat the .pcard__title a::after overlay */
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 48px;
  padding-inline: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-muted);
  border-inline-end: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
  white-space: nowrap;
}
.pcard__act:last-child { border-inline-end: 0; }
.pcard__act svg { inline-size: 12px; block-size: 12px; flex: none; }
.pcard__act:hover { color: var(--fg-strong); background-color: var(--surface-3); }
.pcard__act--quote { color: var(--accent); font-weight: var(--fw-medium); }
.pcard__act--quote:hover { color: var(--accent-fg); background-color: var(--accent-solid); }

/* -- Row variant (products.html "list view") ------------------------------ */
@media (min-width: 640px) {
  .pcard--row { flex-direction: row; }
  .pcard--row .pcard__media {
    inline-size: 15rem;
    flex: none;
    aspect-ratio: auto;
    border-block-end: 0;
    border-inline-end: var(--bw-hair) solid var(--line);
  }
  .pcard--row .pcard__body { padding: var(--s-6); }
  .pcard--row .pcard__excerpt { -webkit-line-clamp: 2; }
  .pcard--row .pcard__foot {
    border-block-start: 0;
    margin-block-start: var(--s-5);
    inline-size: fit-content;
    border: var(--bw-hair) solid var(--line);
  }
  .pcard--row .pcard__act { padding-inline: var(--s-5); min-block-size: 42px; }
}


/* ==========================================================================
   05. CATEGORY CARD
   --------------------------------------------------------------------------
   NOTE: the category PNGs are transparent and several are near-empty. They are
   used ONLY as a small glyph (.ccard__glyph). The tile ALWAYS renders a real
   product photograph behind it, so a tile can never come out blank.
   ========================================================================== */
.ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  block-size: 100%;
  min-block-size: 20rem;
  overflow: hidden;
  background-color: var(--ink-950);
  border: var(--bw-hair) solid var(--line);
  color: var(--paper-100);
  transition: border-color var(--dur-2) var(--ease);
}
.ccard:hover { border-color: var(--accent); }

.ccard__media { position: absolute; inset: 0; z-index: 0; }
.ccard__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.08) brightness(0.72);
  transition: transform var(--dur-5) var(--ease), filter var(--dur-4) var(--ease);
}
.ccard:hover .ccard__img {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1) brightness(0.82);
}
.ccard__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(5, 6, 7, 0.94) 0%, rgba(5, 6, 7, 0.70) 38%, rgba(5, 6, 7, 0.28) 100%);
}
/* Blueprint hatch over the image — this is what makes it read as a spec tile. */
.ccard__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(255,255,255,0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 30px);
  opacity: 0.5;
  transition: opacity var(--dur-3) var(--ease);
}
.ccard:hover .ccard__scrim::after { opacity: 0.9; }

/* The drawing-number plate.
   .ccard is a PERMANENTLY dark photo tile — it does not flip with the page — so
   like .ccard__title (#FFFFFF) and .ccard__desc (--steel-200) it must pin its red
   to the graphite-calibrated --red-lit rather than the mode-dependent --accent.
   With --accent the paper red (#B81217) landed on a near-black scrim in LIGHT.
   The index also sits at the TOP of the tile, where the scrim gradient is at its
   weakest (0.28 alpha) — over a light photo the glyph measured ~1:1 and was
   invisible in BOTH modes. So it gets its own opaque plate: the red is then read
   against a known ground (~5:1) whatever the photograph does. Sharp, mono,
   hairline — a drawing number in the corner of a spec tile. */
.ccard__index {
  position: absolute;
  inset-block-start: var(--s-5);
  inset-inline-start: var(--s-5);
  z-index: 2;
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--red-lit);
  background-color: rgba(5, 6, 7, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-variant-numeric: tabular-nums;
}
.ccard__glyph {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-end: var(--s-4);
  z-index: 2;
  inline-size: 54px;
  block-size: 54px;
  object-fit: contain;
  background: none;
  opacity: 0.32;
  filter: brightness(0) invert(1);   /* force the flat PNG to a white glyph */
  transition: opacity var(--dur-3) var(--ease);
  pointer-events: none;
}
.ccard:hover .ccard__glyph { opacity: 0.6; }

.ccard__body {
  position: relative;
  z-index: 2;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ccard__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  text-transform: uppercase;
  color: #FFFFFF;
}
[dir="rtl"] .ccard__title { text-transform: none; line-height: 1.3; }
.ccard__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.ccard__desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--steel-200);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ccard__children {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
/* The "made to order" badge on an empty category rides the same fixed dark tile,
   so it takes the fixed graphite red too. (0,2,0) beats the bare .tag--accent. */
.ccard .tag--accent {
  color: var(--red-lit);
  border-color: var(--red-lit);
}
.ccard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-start: var(--s-4);
  margin-block-start: var(--s-1);
  border-block-start: var(--bw-hair) solid var(--alpha-w-16);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--steel-400);
}
/* Same reason as .ccard__index: fixed dark tile → fixed graphite red.
   --red-lit on the scrim is 5.00:1; the light-mode --accent was 3.13:1. */
.ccard__go {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--red-lit);
  position: relative;
  z-index: 4;
}
.ccard__go svg { inline-size: 12px; block-size: 12px; }
.ccard__go:hover { color: #FFFFFF; }

/* Compact variant — for sub-category strips. */
.ccard--sm { min-block-size: 13rem; }
.ccard--sm .ccard__title { font-size: var(--fs-lg); }
.ccard--sm .ccard__body { padding: var(--s-5); }
.ccard--sm .ccard__desc { -webkit-line-clamp: 2; }


/* ==========================================================================
   06. AGENT CARD  —  no photo field in the DB, so: CSS monogram plate.
   ========================================================================== */
.acard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  block-size: 100%;
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.acard:hover { border-color: var(--line-contrast); background-color: var(--surface-3); }
.acard::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  inline-size: 0;
  block-size: var(--bw-rule);
  background-color: var(--accent);
  transition: inline-size var(--dur-3) var(--ease);
}
.acard:hover::after { inline-size: 56px; }

.acard__head { display: flex; align-items: flex-start; gap: var(--s-4); }
.acard__mono {
  display: grid;
  place-items: center;
  inline-size: 62px;
  block-size: 62px;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-none);
  color: var(--accent);
  background-color: var(--surface-inset);
  border: var(--bw-hair) solid var(--line);
  background-image:
    repeating-linear-gradient(45deg, var(--alpha-w-04) 0 1px, transparent 1px 6px);
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.zone--paper .acard__mono {
  background-image: repeating-linear-gradient(45deg, var(--alpha-k-04) 0 1px, transparent 1px 6px);
}
.acard:hover .acard__mono { border-color: var(--accent); }
.acard__id { min-inline-size: 0; padding-block-start: var(--s-1); }
.acard__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--fg-strong);
}
[dir="rtl"] .acard__name { text-transform: none; line-height: 1.35; }
.acard__region {
  display: block;
  margin-block-start: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
.acard__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  flex: 1;
}
.acard__foot {
  display: flex;
  margin-block-start: auto;
  border: var(--bw-hair) solid var(--line);
}
.acard__link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-muted);
  border-inline-end: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
}
.acard__link:last-child { border-inline-end: 0; }
.acard__link svg { inline-size: 13px; block-size: 13px; flex: none; }
.acard__link:hover { color: var(--accent-fg); background-color: var(--accent-solid); }


/* ==========================================================================
   07. TAGS · CHIPS · BADGES
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  background-color: transparent;
  border: var(--bw-hair) solid var(--line);
  white-space: nowrap;
  transition: var(--t-color);
}
a.tag:hover,
button.tag:hover { color: var(--accent); border-color: var(--accent); }
.tag--accent { color: var(--accent); border-color: var(--accent); }
.tag--solid {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
.tag--ghost { border-color: var(--alpha-w-16); color: var(--steel-300); }

/* Filter chip — toggles. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 34px;
  padding-inline: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-muted);
  background-color: var(--surface-2);
  border: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
  white-space: nowrap;
}
.chip:hover { color: var(--fg-strong); border-color: var(--line-contrast); }
.chip[aria-pressed="true"],
.chip.is-active {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
.chip__x { inline-size: 11px; block-size: 11px; opacity: 0.8; }
.chip__n {
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

/* Count badge. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 20px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
  border: var(--bw-hair) solid var(--line);
}
.badge--accent { color: var(--accent-fg); background-color: var(--accent-solid); border-color: var(--accent-solid); }
.badge--line   { color: var(--accent); border-color: var(--accent); }


/* ==========================================================================
   08. BREADCRUMB
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
.crumbs a { color: var(--fg-subtle); }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep {
  color: var(--line-contrast);
  user-select: none;
}
.crumbs [aria-current="page"] { color: var(--fg); }


/* ==========================================================================
   09. FORM CONTROLS
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: var(--s-6); }

.form-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.form-grid--full { grid-column: 1 / -1; }

.fieldset {
  border: var(--bw-hair) solid var(--line);
  padding: var(--s-6);
  background-color: var(--surface);
}
.fieldset__legend {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-5);
  padding-inline-end: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--fg-strong);
}
.fieldset__legend::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  background-color: var(--accent);
  flex: none;
}

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

.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-muted);
}
.field__req { color: var(--accent); }
.field__opt {
  font-size: var(--fs-2xs);
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--fg-subtle);
}
.field__hint {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--fg-subtle);
}

.input,
.select,
.textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--field-fg);
  background-color: var(--field-bg);
  border: var(--bw-hair) solid var(--field-border);
  transition: border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--field-ph); opacity: 1; }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--line-contrast); background-color: var(--field-bg-hover); }
.input:focus,
.select:focus,
.textarea:focus { border-color: var(--accent); background-color: var(--field-bg-hover); }
.input:disabled,
.select:disabled,
.textarea:disabled { opacity: 0.45; cursor: not-allowed; }

.textarea {
  min-block-size: 9rem;
  line-height: var(--lh-body);
  resize: vertical;
}

.select {
  padding-inline-end: var(--s-9);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7280' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 12px 8px;
  cursor: pointer;
}
[dir="rtl"] .select { background-position: left var(--s-4) center; }
.select:focus { background-color: var(--field-bg-hover); }

/* Monospaced fields — the composed RFQ notes preview reads as a spec sheet. */
.textarea--mono,
.input--mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* -- Checkbox / radio ----------------------------------------------------- */
.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  background-color: var(--surface-2);
  border: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
}
.check:hover { border-color: var(--line-contrast); }
.check:has(.check__input:checked) {
  border-color: var(--accent);
  background-color: var(--accent-tint);
}
.check__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  margin: 0;
}
.check__box {
  display: grid;
  place-items: center;
  inline-size: 17px;
  block-size: 17px;
  flex: none;
  margin-block-start: 3px;
  border: var(--bw-hair) solid var(--line-contrast);
  background-color: var(--field-bg);
  transition: var(--t-color);
}
.check__box::after {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  background-color: var(--accent-fg);
  clip-path: polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 85% 8%, 37% 71%);
  transform: scale(0);
  transition: transform var(--dur-1) var(--ease);
}
.check__input:checked + .check__box {
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
.check__input:checked + .check__box::after { transform: scale(1); }
.check__input:focus-visible + .check__box {
  outline: var(--focus-w) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.check__text {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg);
  min-inline-size: 0;
}

/* Radio = same plate, round dot instead of a tick (still a square plate). */
.check--radio .check__box::after {
  clip-path: none;
  inline-size: 7px;
  block-size: 7px;
}

.check-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

/* -- File input ----------------------------------------------------------- */
.filedrop {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background-color: var(--field-bg);
  border: var(--bw-hair) dashed var(--line-contrast);
  transition: var(--t-color);
  flex-wrap: wrap;
}
.filedrop:hover,
.filedrop.is-dragover { border-color: var(--accent); background-color: var(--field-bg-hover); }
.filedrop__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}
.filedrop__name {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.filedrop__name.has-file { color: var(--fg); }
.filedrop__clear { flex: none; }

/* -- Validation states ---------------------------------------------------- */
.field--error .input,
.field--error .select,
.field--error .textarea,
.field--error .filedrop {
  border-color: var(--err-500);
  background-color: var(--err-tint);
}
.field--error .field__label { color: var(--err-500); }
.field__error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--err-500);
}
.field__error::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  background-color: var(--err-500);
  flex: none;
}
.field--ok .input,
.field--ok .select,
.field--ok .textarea { border-color: var(--ok-500); }

/* Form-level error summary. */
.form-error {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background-color: var(--err-tint);
  border: var(--bw-hair) solid var(--err-500);
  border-inline-start-width: var(--bw-slab);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--err-500);
}


/* ==========================================================================
   10. PAGINATION
   ========================================================================== */
.pager {
  display: flex;
  align-items: stretch;
  inline-size: fit-content;
  max-inline-size: 100%;
  border: var(--bw-hair) solid var(--line);
  overflow-x: auto;
}
.pager__item {
  display: grid;
  place-items: center;
  min-inline-size: 46px;
  block-size: 46px;
  padding-inline: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  border-inline-end: var(--bw-hair) solid var(--line);
  background-color: var(--surface);
  transition: var(--t-color);
  flex: none;
}
.pager__item:last-child { border-inline-end: 0; }
.pager__item:hover { color: var(--fg-strong); background-color: var(--surface-3); }
.pager__item[aria-current="page"] {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
}
.pager__item.is-disabled { opacity: 0.35; pointer-events: none; }
.pager__item svg { inline-size: 12px; block-size: 12px; }
.pager__gap { pointer-events: none; color: var(--fg-subtle); }


/* ==========================================================================
   11. TOAST
   ========================================================================== */
.toasts {
  position: fixed;
  inset-block-end: var(--s-6);
  inset-inline-end: var(--s-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  inline-size: min(26rem, calc(100vw - var(--s-8)));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background-color: var(--surface);
  color: var(--fg);
  border: var(--bw-hair) solid var(--line);
  border-inline-start: var(--bw-slab) solid var(--accent);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast--ok  { border-inline-start-color: var(--ok); }
.toast--err { border-inline-start-color: var(--err); }
.toast__icon {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  margin-block-start: 2px;
  color: var(--accent);
}
.toast--ok  .toast__icon { color: var(--ok); }
.toast--err .toast__icon { color: var(--err); }
.toast__msg { flex: 1; min-inline-size: 0; }
.toast__close {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  display: grid;
  place-items: center;
  color: var(--fg-subtle);
  transition: var(--t-color);
}
.toast__close:hover { color: var(--fg); }
.toast__close svg { inline-size: 11px; block-size: 11px; }

@media (max-width: 519px) {
  .toasts {
    inset-inline: var(--s-4);
    inset-block-end: var(--s-4);
    inline-size: auto;
  }
}



/* ==========================================================================
   12. MODAL + LIGHTBOX (the image / video viewer)
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.modal__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--scrim-heavy);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.modal__dialog {
  position: relative;
  inline-size: min(52rem, 100%);
  max-block-size: calc(100svh - var(--s-10));
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  color: var(--fg);
  border: var(--bw-hair) solid var(--line);
  border-block-start: var(--bw-rule) solid var(--accent-brand);
  box-shadow: var(--shadow-4);
  opacity: 0;
  transform: translateY(10px);
  clip-path: inset(0 0 10px 0);
  transition: opacity var(--dur-3) var(--ease),
              transform var(--dur-3) var(--ease),
              clip-path var(--dur-3) var(--ease);
}
.modal.is-open .modal__scrim { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; clip-path: inset(0); }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-block-end: var(--bw-hair) solid var(--line);
  background-color: var(--surface-2);
  flex: none;
}
.modal__title {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--fg-strong);
}
.modal__close {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  flex: none;
  border: var(--bw-hair) solid var(--line);
  color: var(--fg-muted);
  background-color: transparent;
  transition: var(--t-color);
}
.modal__close:hover {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
.modal__close svg { inline-size: 13px; block-size: 13px; }
.modal__body { padding: var(--s-6); overflow-y: auto; flex: 1; }
.modal__foot {
  display: flex;
  gap: var(--s-3);
  justify-content: flex-end;
  padding: var(--s-5) var(--s-6);
  border-block-start: var(--bw-hair) solid var(--line);
  background-color: var(--surface-2);
  flex: none;
  flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   THE LIGHTBOX — photo + video viewer with a real instrument toolbar:
     zoom out · zoom % · zoom in · fit · rotate · full screen · download · close
   plus wheel-zoom anchored at the cursor, drag-to-pan, double-click, the
   Fullscreen API and RTL-aware arrow keys. Driven by Bakkar.lightbox().

   The viewer is DELIBERATELY graphite in BOTH modes: a photograph is judged on
   a dark ground. It is the one surface in the theme that does not follow the
   paper mode — and it is still the same sharp, mono, hairline instrument.
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: block;
}
.lightbox__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(5, 6, 7, 0.94);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.lightbox.is-open .lightbox__scrim { opacity: 1; }

.lightbox__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--s-4) var(--gutter) var(--s-5);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.lightbox.is-open .lightbox__panel { opacity: 1; }
.lightbox :focus-visible { outline-color: var(--red-lit); }

/* -- the toolbar ---------------------------------------------------------- */
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block-end: var(--s-3);
  border-block-end: var(--bw-hair) solid var(--ink-700);
}
.lightbox__count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--steel-400);
  font-variant-numeric: tabular-nums;
}
.lightbox__tools {
  display: flex;
  align-items: center;
  gap: 0;
  border: var(--bw-hair) solid var(--ink-700);
  background-color: rgba(12, 13, 15, 0.9);
}
.lightbox__tool {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  color: var(--steel-200);
  background-color: transparent;
  border: 0;
  border-inline-end: var(--bw-hair) solid var(--ink-700);
  transition: var(--t-color);
}
.lightbox__tool:last-child { border-inline-end: 0; }
.lightbox__tool:hover { color: #FFFFFF; background-color: var(--ink-750); }
.lightbox__tool--close:hover { background-color: var(--accent-solid); color: #FFFFFF; }
.lightbox__tool svg { inline-size: 15px; block-size: 15px; }
/* Greyed, NEVER removed — the bar must not jump when a video is showing. */
.lightbox__tool:disabled,
.lightbox__tool[aria-disabled="true"] {
  opacity: 0.32;
  pointer-events: none;
  cursor: not-allowed;
}
/* The zoom read-out. Fixed width so the toolbar does not shuffle at 100→250%. */
.lightbox__level {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 40px;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--steel-300);
  border-inline-end: var(--bw-hair) solid var(--ink-700);
}
.lightbox__sep {
  inline-size: 1px;
  block-size: 40px;
  flex: none;
  background-color: var(--ink-700);
}

/* -- the stage ------------------------------------------------------------ */
/* Clicking the EMPTY SPACE around the picture closes the viewer; clicking the
   picture itself does not (app.js stops that event). */
.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 0;
  overflow: hidden;
  padding-block: var(--s-4);
  touch-action: none;
}
/* A percentage max-height does NOT constrain this image (it computes fine and
   the picture still paints at its natural size and runs off the screen).
   Anchor it to the VIEWPORT. */
.lightbox__img {
  max-block-size: min(72vh, 800px);
  max-inline-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  background-color: var(--ink-950);
  border: var(--bw-hair) solid var(--ink-700);
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform var(--dur-2) var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox.is-zoomed .lightbox__img { transition: none; }

.lightbox__frame {
  inline-size: min(100%, 68rem);
  aspect-ratio: 16 / 9;
  max-block-size: min(72vh, 800px);
  border: var(--bw-hair) solid var(--ink-700);
  background-color: #000;
}

/* The file:// poster. YouTube refuses an embed whose page origin is null, so
   off-http we show a real poster that opens the video on YouTube instead of a
   dead player. */
.lightbox__poster {
  position: relative;
  display: block;
  inline-size: min(100%, 60rem);
  border: var(--bw-hair) solid var(--ink-700);
  background-color: var(--ink-950);
}
.lightbox__poster img {
  inline-size: 100%;
  max-block-size: min(64vh, 720px);
  object-fit: cover;
  filter: grayscale(0.2) contrast(1.05);
}
.lightbox__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  inline-size: 68px;
  block-size: 68px;
  color: #FFFFFF;
  background-color: var(--accent-solid);
  box-shadow: var(--shadow-accent);
}
.lightbox__play svg { inline-size: 22px; block-size: 22px; }
.lightbox__poster-note {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-block-start: var(--bw-hair) solid var(--ink-700);
  background-color: var(--ink-1000);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--steel-300);
  text-align: center;
}

.lightbox__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block-start: var(--s-3);
  border-block-start: var(--bw-hair) solid var(--ink-700);
}
.lightbox__caption {
  font-size: var(--fs-sm);
  color: var(--steel-300);
  min-inline-size: 0;
}
.lightbox__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--steel-500);
  text-align: end;
}
@media (max-width: 719px) { .lightbox__hint { display: none; } }

.lightbox__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  color: var(--paper-100);
  background-color: rgba(5, 6, 7, 0.72);
  border: var(--bw-hair) solid var(--ink-700);
  transition: var(--t-color);
  z-index: 2;
}
.lightbox__nav:hover {
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #FFFFFF;
}
.lightbox__nav--prev { inset-inline-start: 0; }
.lightbox__nav--next { inset-inline-end: 0; }
.lightbox__nav svg { inline-size: 14px; block-size: 14px; }

/* In the browser's own fullscreen the panel owns the whole screen. */
.lightbox:fullscreen { background-color: #050607; }
.lightbox:fullscreen .lightbox__scrim { opacity: 1; }


/* ==========================================================================
   13. SKELETON
   ========================================================================== */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-2);
  border: var(--bw-hair) solid var(--line);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0%,
    var(--alpha-w-06) 45%,
    var(--alpha-w-10) 50%,
    var(--alpha-w-06) 55%,
    transparent 100%);
  animation: bk-sweep 1.4s var(--ease-lin) infinite;
}
.zone--paper .skeleton::after {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--alpha-k-04) 45%,
    var(--alpha-k-08) 50%,
    var(--alpha-k-04) 55%,
    transparent 100%);
}
@keyframes bk-sweep { to { transform: translateX(100%); } }
.skeleton--text { block-size: 0.85em; margin-block: 0.3em; border: 0; }
.skeleton--title { block-size: 1.6em; inline-size: 65%; border: 0; }
.skeleton--media { aspect-ratio: 4 / 5; }
.skeleton--card { block-size: 24rem; }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}


/* ==========================================================================
   14. EMPTY STATE
   ========================================================================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--s-6);
  border: var(--bw-hair) dashed var(--line-contrast);
  background-color: var(--surface-2);
}
.empty__glyph {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--line-contrast);
  letter-spacing: var(--track-wide);
}
.empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--fg-strong);
}
[dir="rtl"] .empty__title { text-transform: none; }
.empty__body {
  max-inline-size: 40ch;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.empty__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: var(--s-2);
}


/* ==========================================================================
   15. PROSE  —  renders the rich CKEditor HTML in data.js description_*
   ========================================================================== */
.prose { color: var(--fg-muted); font-size: var(--fs-base); line-height: var(--lh-body); }
.prose > *:first-child { margin-block-start: 0; }
.prose > *:last-child  { margin-block-end: 0; }

.prose h3,
.prose h4 {
  position: relative;
  margin-block: var(--s-8) var(--s-4);
  padding-inline-start: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--fg-strong);
}
[dir="rtl"] .prose h3,
[dir="rtl"] .prose h4 { text-transform: none; line-height: 1.4; }
.prose h3::before,
.prose h4::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 12px;
  block-size: var(--bw-rule);
  background-color: var(--accent);
}
.prose p { margin-block-end: var(--s-4); max-inline-size: var(--measure); }
.prose strong { color: var(--fg-strong); font-weight: var(--fw-semi); }
.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-block-end: var(--s-6);
  list-style: none;
  max-inline-size: var(--measure);
}
.prose li {
  position: relative;
  padding-inline-start: var(--s-6);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.prose li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 6px;
  block-size: 6px;
  border: var(--bw-hair) solid var(--accent);
}
.prose ol { counter-reset: prose-ol; }
.prose ol > li { counter-increment: prose-ol; }
.prose ol > li::before {
  content: counter(prose-ol, decimal-leading-zero);
  inset-block-start: 0;
  inline-size: auto;
  block-size: auto;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--accent);
}
.prose blockquote {
  margin-block: var(--s-6);
  padding: var(--s-5);
  border-inline-start: var(--bw-slab) solid var(--accent);
  background-color: var(--surface-2);
  font-size: var(--fs-md);
  color: var(--fg);
}


/* ==========================================================================
   16. SLIDER CHROME  —  driven by Bakkar.Slider() in app.js
   --------------------------------------------------------------------------
   <div class="slider" data-slider data-autoplay="6500">
     <div class="slider__viewport" data-slider-viewport>
       <div class="slider__track" data-slider-track>
         <div class="slider__slide"> … </div>
       </div>
     </div>
     <div class="slider__chrome"> … </div>
   </div>
   ========================================================================== */
.slider { position: relative; }
.slider__viewport {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.slider__viewport.is-dragging { cursor: grabbing; }
.slider__track {
  display: flex;
  will-change: transform;
  transition: transform var(--dur-5) var(--ease);
}
.slider__track.is-instant { transition: none; }
.slider__slide {
  flex: 0 0 100%;
  inline-size: 100%;
  min-inline-size: 0;
}
/* Multi-up carousels (related products, agents). */
.slider--multi .slider__track { gap: var(--s-5); }
.slider--multi .slider__slide { flex: 0 0 calc(100% / var(--per-view, 1) - (var(--s-5) * (var(--per-view, 1) - 1) / var(--per-view, 1))); }

.slider__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.slider__btns { display: flex; border: var(--bw-hair) solid var(--line); }
.slider__btn {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  color: var(--fg-muted);
  background-color: transparent;
  border-inline-end: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
}
.slider__btn:last-child { border-inline-end: 0; }
.slider__btn:hover { color: var(--accent-fg); background-color: var(--accent-solid); }
.slider__btn:disabled { opacity: 0.3; pointer-events: none; }
.slider__btn svg { inline-size: 14px; block-size: 14px; }

.slider__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.slider__count b { color: var(--accent); font-weight: var(--fw-medium); }

.slider__dots { display: flex; align-items: center; gap: var(--s-2); }
.slider__dot {
  inline-size: 30px;
  block-size: 3px;
  background-color: var(--line-strong);
  transition: background-color var(--dur-2) var(--ease), inline-size var(--dur-2) var(--ease);
  position: relative;
}
.slider__dot::after {
  /* Bigger hit target than 3px. */
  content: "";
  position: absolute;
  inset: -12px -3px;
}
.slider__dot:hover { background-color: var(--fg-muted); }
.slider__dot[aria-current="true"] {
  inline-size: 46px;
  background-color: var(--accent);
}

.slider__pause {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border: var(--bw-hair) solid var(--line);
  color: var(--fg-subtle);
  transition: var(--t-color);
}
.slider__pause:hover { color: var(--accent); border-color: var(--accent); }
.slider__pause svg { inline-size: 11px; block-size: 11px; }

.slider__progress {
  position: relative;
  block-size: 2px;
  inline-size: 100%;
  background-color: var(--line);
  overflow: hidden;
}
.slider__progress-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0;
  background-color: var(--accent);
}
.slider__progress-bar.is-running { transition: inline-size linear; }


/* ==========================================================================
   17. TICKER (MARQUEE)  —  the horizontally scrolling category strip.
   ========================================================================== */
.ticker {
  position: relative;
  overflow: hidden;
  border-block: var(--bw-hair) solid var(--line);
  background-color: var(--bg-deep);
  --ticker-h: 58px;
}
.ticker__track {
  display: flex;
  inline-size: max-content;
  animation: bk-ticker var(--dur-marquee) linear infinite;
}
[dir="rtl"] .ticker__track { animation-name: bk-ticker-rtl; }
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

@keyframes bk-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes bk-ticker-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  block-size: var(--ticker-h);
  padding-inline: var(--s-5);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-none);
  color: var(--fg-subtle);
  transition: color var(--dur-1) var(--ease);
}
[dir="rtl"] .ticker__item { text-transform: none; font-size: var(--fs-md); }
.ticker__item:hover { color: var(--fg-strong); }
.ticker__sep {
  display: inline-flex;
  align-items: center;
  block-size: var(--ticker-h);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  user-select: none;
}
.ticker__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--accent);
  letter-spacing: var(--track-wide);
}
/* Edge fade so the strip does not just get chopped off. */
.ticker::before,
.ticker::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 6rem;
  z-index: 2;
  pointer-events: none;
}
.ticker::before {
  inset-inline-start: 0;
  background: linear-gradient(to right, var(--bg-deep), transparent);
}
.ticker::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, var(--bg-deep), transparent);
}
[dir="rtl"] .ticker::before { background: linear-gradient(to left, var(--bg-deep), transparent); }
[dir="rtl"] .ticker::after  { background: linear-gradient(to right, var(--bg-deep), transparent); }

@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker__track { animation: none; }
}



/* ==========================================================================
   18. SEARCH — A DIALOG, NOT A FIELD.
   --------------------------------------------------------------------------
   There is no inline header search field and no toggle any more. The header
   carries a search ICON at every width; it opens this modal (also on "/" and
   on Cmd/Ctrl+K). Real dialog semantics: aria-modal, focus trapped, Esc
   closes, focus returns to the trigger, body scroll locked, results walkable
   with ↑ ↓ Enter via aria-activedescendant on the combobox input.

   It is styled as a TERMINAL: a sharp panel with a red top rule, corner
   brackets, mono group headers and 01/02/03 indices down the results.
   ========================================================================== */
.sdlg {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  /* MUST be an explicit minmax(0, 1fr). Without a declared column the implicit
     track is auto-sized to the PANEL'S min-content (~500px, set by the result
     rows), and `inline-size: min(44rem, 100%)` then resolves 100% against a
     track the panel itself grew — so on a 390px phone the panel measured 503px
     and pushed ✕ / CLEAR clean off the screen. `position: fixed` meant it never
     grew document.scrollWidth, so no overflow harness could see it. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  align-content: start;
  justify-items: center;
  padding: clamp(var(--s-4), 6vh, var(--s-11)) var(--gutter) var(--s-6);
}
.sdlg__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--scrim-heavy);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.sdlg.is-open .sdlg__scrim { opacity: 1; }

.sdlg__panel {
  position: relative;
  z-index: 1;
  justify-self: center;
  inline-size: min(44rem, 100%);
  /* A grid item's default min-inline-size is `auto` = its min-content. That
     floor is what defeated `min(44rem, 100%)`; pin it to 0 so the panel can
     actually shrink to the viewport. */
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: min(80svh, 44rem);
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  color: var(--fg);
  border: var(--bw-hair) solid var(--line);
  border-block-start: var(--bw-rule) solid var(--accent-brand);
  box-shadow: var(--shadow-4);
  opacity: 0;
  transform: translateY(-8px);
  clip-path: inset(0 0 12px 0);
  transition: opacity var(--dur-3) var(--ease),
              transform var(--dur-3) var(--ease),
              clip-path var(--dur-3) var(--ease);
}
.sdlg.is-open .sdlg__panel { opacity: 1; transform: none; clip-path: inset(0); }

/* -- the field ------------------------------------------------------------ */
.sdlg__form {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  padding-inline: var(--s-5);
  block-size: 60px;
  border-block-end: var(--bw-hair) solid var(--line);
  background-color: var(--field-bg);
}
.sdlg__icon {
  inline-size: 17px;
  block-size: 17px;
  flex: none;
  color: var(--accent);
}
.sdlg__input {
  flex: 1;
  min-inline-size: 0;
  block-size: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--field-fg);
  background: none;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}
.sdlg__input::placeholder { color: var(--field-ph); opacity: 1; }
.sdlg__input:focus { outline: none; }
.sdlg__input::-webkit-search-decoration,
.sdlg__input::-webkit-search-cancel-button,
.sdlg__input::-webkit-search-results-button { -webkit-appearance: none; display: none; }

.sdlg__clear,
.sdlg__close {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  flex: none;
  color: var(--fg-subtle);
  border: var(--bw-hair) solid transparent;
  background-color: transparent;
  transition: var(--t-color);
}
.sdlg__clear:hover { color: var(--accent); }
.sdlg__close {
  border-color: var(--line);
  color: var(--fg-muted);
}
.sdlg__close:hover {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
.sdlg__clear svg { inline-size: 11px; block-size: 11px; }
.sdlg__close svg { inline-size: 12px; block-size: 12px; }

/* -- results -------------------------------------------------------------- */
.sdlg__results {
  flex: 1;
  min-block-size: 0;
  min-inline-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sdlg__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background-color: var(--surface-2);
  border-block-end: var(--bw-hair) solid var(--line-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
.sdlg__group b {
  color: var(--accent);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.sdlg__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-block-end: var(--bw-hair) solid var(--line-faint);
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.sdlg__item:hover,
.sdlg__item.is-active,
.sdlg__item[aria-selected="true"] { background-color: var(--surface-3); }
.sdlg__item.is-active,
.sdlg__item[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .sdlg__item.is-active,
[dir="rtl"] .sdlg__item[aria-selected="true"] { box-shadow: inset -3px 0 0 var(--accent); }

.sdlg__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-subtle);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.sdlg__thumb {
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  object-fit: cover;
  border: var(--bw-hair) solid var(--line);
  background-color: var(--media-bed);
}
.sdlg__thumb--icon {
  display: grid;
  place-items: center;
  color: var(--accent);
  background-color: var(--surface-2);
}
.sdlg__thumb--icon svg { inline-size: 18px; block-size: 18px; }
.sdlg__meta { flex: 1; min-inline-size: 0; }
.sdlg__name {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--fg-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdlg__sub {
  display: block;
  margin-block-start: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdlg__go {
  flex: none;
  inline-size: 13px;
  block-size: 13px;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}
.sdlg__item:hover .sdlg__go,
.sdlg__item.is-active .sdlg__go { opacity: 1; }

/* Popular lines, before you type. Never a blank grey box. */
.sdlg__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-block-end: var(--bw-hair) solid var(--line-faint);
}
.sdlg__chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  padding-inline: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-muted);
  border: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
}
.sdlg__chip:hover {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}

/* The real no-results state. */
.sdlg__empty { padding: var(--s-9) var(--s-6); text-align: center; }
.sdlg__empty-glyph {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--fg-subtle);
  margin-block-end: var(--s-3);
}
.sdlg__empty-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg);
  margin-block-end: var(--s-2);
}
.sdlg__empty-body {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  max-inline-size: 36ch;
  margin-inline: auto;
}
.sdlg__empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

/* -- foot ----------------------------------------------------------------- */
.sdlg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex: none;
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border-block-start: var(--bw-hair) solid var(--line);
  background-color: var(--surface-2);
}
.sdlg__hints {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
.sdlg__hint { display: inline-flex; align-items: center; gap: var(--s-2); }
.kbd {
  display: inline-grid;
  place-items: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-muted);
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
}
.sdlg__all {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 32px;
  padding-inline: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent);
  border: var(--bw-hair) solid var(--accent);
  transition: var(--t-color);
}
.sdlg__all:hover {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
.sdlg__all svg { inline-size: 11px; block-size: 11px; }
@media (max-width: 559px) {
  .sdlg__hints { display: none; }
  .sdlg__all { inline-size: 100%; justify-content: center; }
}


/* ==========================================================================
   18b. THE SEGMENTED CONTROL  (.seg)
   --------------------------------------------------------------------------
   The customiser's radiogroups. Sharp, mono, hairline-divided; the live option
   is a solid red plate with WHITE type (#D31219 = 5.4:1, so the small mono
   label genuinely passes AA). It reads its colours through a custom-property
   seam so the copy INSIDE THE DRAWER can be re-pointed at the --dw-* tokens —
   including when the sidebar is painted Bakkar Red.
   ========================================================================== */
.cust__group + .cust__group { margin-block-start: var(--s-5); }
.cust__legend {
  display: block;
  margin-block-end: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--seg-legend, var(--fg-subtle));
}

/* The live option is the INVERTED plate — ink-on-paper in light, paper-on-ink in
   dark. It is deliberately NOT red: the drawer already carries a red language
   thumb and a red quote CTA, and three more red bars stacked under them would
   turn "surgical red" into a red wall and stop the CTA reading as the primary
   action. The customiser is an instrument panel; the red belongs to the funnel. */
.seg {
  --seg-bg:     var(--surface-2);
  --seg-line:   var(--line);
  --seg-fg:     var(--fg-muted);
  --seg-fg-on:  var(--invert-fg);
  --seg-on:     var(--invert-bg);
  --seg-hover:  var(--fg);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  inline-size: 100%;
  background-color: var(--seg-bg);
  border: var(--bw-hair) solid var(--seg-line);
}
.seg__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 42px;
  padding-inline: var(--s-2);
  min-inline-size: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--seg-fg);
  background-color: transparent;
  border-inline-end: var(--bw-hair) solid var(--seg-line);
  transition: var(--t-color);
}
.seg__opt:last-child { border-inline-end: 0; }
.seg__opt:hover { color: var(--seg-hover); }
.seg__opt[aria-checked="true"] {
  color: var(--seg-fg-on);
  background-color: var(--seg-on);
}
.seg__opt > svg { inline-size: 13px; block-size: 13px; flex: none; }
.seg__opt > span {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The Header/Sidebar style swatches. */
.seg__sw {
  inline-size: 12px;
  block-size: 12px;
  flex: none;
  border: var(--bw-hair) solid var(--line-contrast);
}
.seg__sw--default { background-color: var(--invert-bg); }
.seg__sw--red { background-color: var(--red-500); border-color: var(--red-500); }
/* On the live (inverted) plate the "default" swatch has to invert too, or it
   disappears into the plate it is sitting on. */
.seg__opt[aria-checked="true"] .seg__sw--default {
  background-color: var(--invert-fg);
  border-color: var(--invert-fg);
}

/* The drawer's inline copy speaks the sidebar's language. It deliberately does
   NOT inherit --dw-seg-thumb (that is the LANGUAGE switch's red thumb): the live
   segment keeps the inverted instrument plate. Only a Bakkar Red sidebar needs a
   different one — on red, an ink plate would read as a hole. */
.drawer .seg {
  --seg-bg:    var(--dw-seg-bg);
  --seg-line:  var(--dw-seg-line);
  --seg-fg:    var(--dw-seg-fg);
  --seg-hover: var(--dw-fg);
}
:root[data-sidebar="red"] .drawer .seg {
  --seg-on:    #FFFFFF;
  --seg-fg-on: var(--red-700);
}
.drawer .cust__legend { --seg-legend: var(--dw-fg-3); }
/* On a Bakkar Red sidebar the live plate is white, so the swatches invert again. */
:root[data-sidebar="red"] .drawer .seg__sw--default {
  background-color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.55);
}
:root[data-sidebar="red"] .drawer .seg__opt[aria-checked="true"] .seg__sw--default {
  background-color: var(--red-700);
  border-color: var(--red-700);
}


/* ==========================================================================
   18b-ii. THE ARABIC FONT PICKER  (.fnt)
   --------------------------------------------------------------------------
   Eleven faces will not fit a segmented control, so this is a proper radiogroup
   LIST inside its own scroll well — read as a type SPECIMEN SHEET, which is what
   this theme would print: a mono index (01…11), the family name in mono caps,
   and the specimen itself SET IN THAT FACE so the difference is visible before
   you commit. Sharp, hairline-ruled, zero radius.

   The live row is flagged the way this theme flags anything live: a 4px red slab
   on the leading edge (border-inline-start, so it flips in RTL) over a stepped
   surface. Same custom-property seam as .seg, so the drawer's inline copy can be
   re-pointed at the --dw-* tokens — including on a Bakkar Red sidebar.

   It only ever changes --font-arabic (tokens.css §2c). The Latin type is
   untouched, in both directions.
   ========================================================================== */
.cust__hint {
  display: block;
  margin-block-end: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--fnt-hint, var(--fg-subtle));
}

.fnt {
  --fnt-bg:     var(--surface-2);
  --fnt-line:   var(--line);
  --fnt-fg:     var(--fg-muted);
  --fnt-fg-on:  var(--fg-strong);
  --fnt-on:     var(--surface-3);
  --fnt-slab:   var(--accent-solid);
  --fnt-idx:    var(--fg-subtle);
  --fnt-tag:    var(--accent);

  display: block;
  inline-size: 100%;
  /* The well. ~4.5 rows deep, then it scrolls — the panel itself must not grow
     into a 700px column on a phone. */
  max-block-size: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--fnt-bg);
  border: var(--bw-hair) solid var(--fnt-line);
}
.fnt__opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  inline-size: 100%;
  min-block-size: 52px;
  padding: var(--s-2) var(--s-3);
  text-align: start;
  color: var(--fnt-fg);
  background-color: transparent;
  /* Transparent by default so the live slab costs no layout shift. */
  border-inline-start: var(--bw-slab) solid transparent;
  border-block-end: var(--bw-hair) solid var(--fnt-line);
  transition: var(--t-color);
}
.fnt__opt:last-child { border-block-end: 0; }
.fnt__opt:hover { color: var(--fnt-fg-on); }
.fnt__opt:focus-visible {
  outline: var(--focus-w) solid var(--focus-color);
  outline-offset: calc(var(--focus-offset) * -1);
}
.fnt__opt[aria-checked="true"] {
  color: var(--fnt-fg-on);
  background-color: var(--fnt-on);
  border-inline-start-color: var(--fnt-slab);
}

.fnt__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--fnt-idx);
}
.fnt__opt[aria-checked="true"] .fnt__idx { color: var(--fnt-slab); }

.fnt__body { display: block; min-inline-size: 0; }
.fnt__name {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* THE SPECIMEN. Each row previews itself — the family is pinned per option
   below, never inherited, so the list reads as a real specimen sheet in EITHER
   language and whatever the live choice is. */
.fnt__sample {
  display: block;
  direction: rtl;
  margin-block-start: 2px;
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0;
  color: currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnt__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1;
  padding: 3px 5px;
  white-space: nowrap;
  color: var(--fnt-tag);
  border: var(--bw-hair) solid currentColor;
}
.fnt__opt[aria-checked="true"] .fnt__tag { color: var(--fnt-slab); }

/* ---- The eleven specimens. ------------------------------------------------ */
.fnt__opt[data-value="sultan"]    .fnt__sample { font-family: 'Sultan Nahia', 'Cairo', 'Segoe UI', Tahoma, sans-serif; }
.fnt__opt[data-value="cairo"]     .fnt__sample { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; }
.fnt__opt[data-value="tajawal"]   .fnt__sample { font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; }
.fnt__opt[data-value="almarai"]   .fnt__sample { font-family: 'Almarai', 'Segoe UI', Tahoma, sans-serif; }
.fnt__opt[data-value="plexar"]    .fnt__sample { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }
.fnt__opt[data-value="notosans"]  .fnt__sample { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }
.fnt__opt[data-value="notokufi"]  .fnt__sample { font-family: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif; }
.fnt__opt[data-value="vazirmatn"] .fnt__sample { font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif; }
.fnt__opt[data-value="changa"]    .fnt__sample { font-family: 'Changa', 'Segoe UI', Tahoma, sans-serif; }
.fnt__opt[data-value="elmessiri"] .fnt__sample { font-family: 'El Messiri', 'Segoe UI', Tahoma, sans-serif; }
.fnt__opt[data-value="amiri"]     .fnt__sample { font-family: 'Amiri', 'Segoe UI', Tahoma, serif; }

/* ---- The drawer's inline copy speaks the sidebar's language. -------------- */
.drawer .cust__hint { --fnt-hint: var(--dw-fg-3); }
.drawer .fnt {
  --fnt-bg:    var(--dw-seg-bg);
  --fnt-line:  var(--dw-seg-line);
  --fnt-fg:    var(--dw-fg-2);
  --fnt-fg-on: var(--dw-fg);
  --fnt-on:    var(--dw-hover-bg);
  --fnt-idx:   var(--dw-fg-3);
  --fnt-slab:  var(--dw-accent);
  --fnt-tag:   var(--dw-accent);
}
/* On a Bakkar Red sidebar the accent IS white — a red slab on red would vanish,
   and the stepped surface has to go the other way (down into the plate). */
:root[data-sidebar="red"] .drawer .fnt {
  --fnt-on:    rgba(0, 0, 0, 0.22);
  --fnt-fg-on: #FFFFFF;
  --fnt-slab:  #FFFFFF;
  --fnt-tag:   #FFFFFF;
}

/* 360px. The row keeps all three columns — the "DEFAULT" tag is part of the
   option's accessible name and must not be display:none'd off the row — it just
   tightens up. The specimen column is minmax(0, 1fr) + ellipsis, so it yields
   before anything can push the well wider than the panel. */
@media (max-width: 400px) {
  .fnt__opt { gap: var(--s-2); padding-inline: var(--s-2); }
  .fnt { max-block-size: 15rem; }
}


/* ==========================================================================
   18c. THE CUSTOMISER PANEL
   --------------------------------------------------------------------------
   Desktop only — an instrument panel dropped from the header's customiser
   button. On mobile the SAME three groups live INLINE inside the drawer (never
   a second overlay stacked on an already-open dialog); app.js wires both copies
   document-wide, so they can never disagree.
   ========================================================================== */
.cust {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}
.cust__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.cust.is-open .cust__scrim { opacity: 1; }

.cust__panel {
  position: absolute;
  /* Clears the full chrome (topbar + masthead) so it never sits on top of the
     button that opened it. */
  inset-block-start: calc(var(--header-h) + var(--s-2));
  inset-inline-end: var(--gutter);
  inline-size: min(23rem, calc(100vw - var(--gutter) * 2));
  max-block-size: calc(100svh - var(--header-h) - var(--s-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--surface);
  color: var(--fg);
  border: var(--bw-hair) solid var(--line);
  border-block-start: var(--bw-rule) solid var(--accent-brand);
  box-shadow: var(--shadow-4);
  opacity: 0;
  transform: translateY(-8px);
  clip-path: inset(0 0 12px 0);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              clip-path var(--dur-2) var(--ease);
}
.cust.is-open .cust__panel { opacity: 1; transform: none; clip-path: inset(0); }

.cust__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-block-end: var(--bw-hair) solid var(--line);
  background-color: var(--surface-2);
}
.cust__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--fg-strong);
}
.cust__title svg { inline-size: 14px; block-size: 14px; color: var(--accent); }
.cust__close {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  flex: none;
  border: var(--bw-hair) solid var(--line);
  color: var(--fg-muted);
  background-color: transparent;
  transition: var(--t-color);
}
.cust__close:hover {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
.cust__close svg { inline-size: 12px; block-size: 12px; }

.cust__body { padding: var(--s-5); }
.cust__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-block-start: var(--bw-hair) solid var(--line);
  background-color: var(--surface-2);
}
.cust__note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-subtle);
}


/* ==========================================================================
   18d. THE SLIM PAGE HEADER  —  .page-head / .page-head--slim
   --------------------------------------------------------------------------
   Every listing / content page opens with this instead of an oversized hero:
   a breadcrumb, a modest H1 and at most ONE short line of sub-copy. It reads
   like the title block at the top of a drawing sheet, and the CONTENT STARTS
   ALMOST IMMEDIATELY (~92px mobile / ~120px desktop).

     <header class="page-head page-head--slim">
       <div class="container page-head__in">
         <nav class="crumbs">…</nav>                     <- optional
         <div class="page-head__row">
           <span class="page-head__index" dir="ltr">02</span>   <- optional
           <h1 class="page-head__title">All Products</h1>
         </div>
         <p class="page-head__sub">One short line.</p>   <- optional
       </div>
     </header>
   ========================================================================== */
.page-head {
  position: relative;
  padding-block: var(--s-9) var(--s-8);
  background-color: var(--bg);
  color: var(--fg);
  border-block-end: var(--bw-hair) solid var(--line);
}
.page-head__in { display: flex; flex-direction: column; gap: var(--s-3); }
.page-head__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  min-inline-size: 0;
}
.page-head__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-wide);
  color: var(--accent);
  flex: none;
  padding-block-start: 2px;
}
.page-head__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--fg-strong);
  min-inline-size: 0;
}
.page-head__sub {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-muted);
  max-inline-size: var(--measure);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* THE SLIM ONE. ~92px at 390, ~120px at 1440. */
.page-head--slim {
  padding-block: var(--s-5) var(--s-5);
}
.page-head--slim .page-head__in { gap: var(--s-2); }
.page-head--slim .page-head__title { font-size: var(--fs-xl); }
.page-head--slim .page-head__sub { -webkit-line-clamp: 1; }
@media (min-width: 1024px) {
  .page-head--slim { padding-block: var(--s-6) var(--s-6); }
}
/* The red hairline that flags the sheet — the one drop of colour up here. */
.page-head--slim::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 72px;
  block-size: var(--bw-rule);
  background-color: var(--accent-brand);
}

/* ==========================================================================
   19. SPEC STRIP · STAT · PROCESS STEP · CAPABILITY · KV
   ========================================================================== */

/* -- Spec strip: the row of technical facts under the hero. --------------- */
.specstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block-start: var(--bw-hair) solid var(--line);
  background-color: var(--surface);
}
.specstrip__cell {
  position: relative;
  padding: var(--s-5) var(--s-6);
  border-inline-end: var(--bw-hair) solid var(--line);
}
.specstrip__cell:last-child { border-inline-end: 0; }
.specstrip__k {
  display: block;
  margin-block-end: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
.specstrip__v {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}
.specstrip__v em {
  font-style: normal;
  color: var(--accent);
}
@media (max-width: 767px) {
  .specstrip { grid-template-columns: repeat(2, 1fr); }
  .specstrip__cell:nth-child(2n) { border-inline-end: 0; }
  .specstrip__cell:nth-child(-n + 2) { border-block-end: var(--bw-hair) solid var(--line); }
}

/* -- Stat plate ----------------------------------------------------------- */
.stat {
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
}
.stat__v {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}
.stat__v sup { color: var(--accent); font-size: 0.5em; vertical-align: super; }
.stat__k {
  display: block;
  margin-block-start: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}

/* -- Process steps: a hairline route through the plant. ------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  border-block-start: var(--bw-hair) solid var(--line);
  border-inline-start: var(--bw-hair) solid var(--line);
}
.step {
  position: relative;
  padding: var(--s-6);
  background-color: var(--surface);
  border-inline-end: var(--bw-hair) solid var(--line);
  border-block-end: var(--bw-hair) solid var(--line);
  transition: background-color var(--dur-2) var(--ease);
}
.step:hover { background-color: var(--surface-3); }
.step::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  inline-size: 0;
  block-size: var(--bw-rule);
  background-color: var(--accent);
  transition: inline-size var(--dur-3) var(--ease);
}
.step:hover::before { inline-size: 48px; }
.step__n {
  display: block;
  margin-block-end: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-2) var(--ease);
}
@supports (-webkit-text-stroke: 1px red) {
  .step__n {
    color: transparent;
    -webkit-text-stroke: 1px var(--line-contrast);
    transition: -webkit-text-stroke-color var(--dur-2) var(--ease);
  }
  .step:hover .step__n { -webkit-text-stroke-color: var(--accent); }
}
.step__t {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fg-strong);
  margin-block-end: var(--s-3);
}
[dir="rtl"] .step__t { text-transform: none; }
.step__d { font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-muted); }

/* -- Capability plate ----------------------------------------------------- */
.cap {
  position: relative;
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
  transition: border-color var(--dur-2) var(--ease);
  block-size: 100%;
}
.cap:hover { border-color: var(--line-contrast); }
.cap__k {
  display: block;
  margin-block-end: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cap__t {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--fg-strong);
  margin-block-end: var(--s-3);
}
[dir="rtl"] .cap__t { text-transform: none; line-height: 1.4; }
.cap__d { font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-muted); }

/* -- Key/value list ------------------------------------------------------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-5); }
.kv__k {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  padding-block-start: 3px;
  white-space: nowrap;
}
.kv__v { font-size: var(--fs-sm); color: var(--fg); min-inline-size: 0; }


/* ==========================================================================
   20. CTA BAND · NOTE · MARKS · TOOLBAR · TABS · ACCORDION · GALLERY · MAP
   ========================================================================== */

/* -- CTA band with the hazard stripe. ------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 1rem + 4.5vw, 4.5rem);
  background-color: var(--surface-inset);
  border: var(--bw-hair) solid var(--line);
}
.cta-band__hazard {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: min(240px, 40%);
  block-size: 8px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 6px,
    transparent 6px 12px
  );
  pointer-events: none;
}
.cta-band__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-9);
  align-items: center;
}
@media (max-width: 899px) {
  .cta-band__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}
.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-strong);
  margin-block-end: var(--s-4);
}
[dir="rtl"] .cta-band__title { text-transform: none; line-height: 1.3; }
.cta-band__body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-inline-size: var(--measure);
}
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cta-band__note {
  margin-block-start: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}

/* -- Note / callout ------------------------------------------------------- */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  background-color: var(--surface-2);
  border: var(--bw-hair) solid var(--line);
  border-inline-start: var(--bw-slab) solid var(--accent);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--fg-muted);
}
.note svg { inline-size: 16px; block-size: 16px; flex: none; color: var(--accent); margin-block-start: 2px; }
.note--warn { border-inline-start-color: var(--warn-500); }
.note--warn svg { color: var(--warn-500); }
.note strong { color: var(--fg-strong); }

/* -- Brand marks (the customers whose packs we print). -------------------- */
.marks {
  display: flex;
  flex-wrap: wrap;
  border-block-start: var(--bw-hair) solid var(--line);
  border-inline-start: var(--bw-hair) solid var(--line);
}
.marks__item {
  flex: 1 1 12rem;
  display: grid;
  place-items: center;
  min-block-size: 6.5rem;
  padding: var(--s-5) var(--s-4);
  text-align: center;
  border-inline-end: var(--bw-hair) solid var(--line);
  border-block-end: var(--bw-hair) solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: var(--track-none);
  color: var(--fg-subtle);
  transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
[dir="rtl"] .marks__item { text-transform: none; font-size: var(--fs-md); }
.marks__item:hover { color: var(--fg-strong); background-color: var(--surface); }

/* -- Toolbar + segmented control (products.html) -------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-4);
  border-block: var(--bw-hair) solid var(--line);
}
.toolbar__group { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.toolbar__count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}
.toolbar__count b { color: var(--accent); font-weight: var(--fw-medium); }
.toolbar .select { min-block-size: 38px; padding-block: var(--s-2); font-size: var(--fs-sm); }

.segmented { display: inline-flex; border: var(--bw-hair) solid var(--line); }
.segmented__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 38px;
  padding-inline: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  border-inline-end: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
}
.segmented__btn:last-child { border-inline-end: 0; }
.segmented__btn:hover { color: var(--fg-strong); }
.segmented__btn[aria-pressed="true"] { color: var(--accent-fg); background-color: var(--accent-solid); }
.segmented__btn svg { inline-size: 13px; block-size: 13px; }

/* -- Tabs ----------------------------------------------------------------- */
.tabs__list {
  display: flex;
  gap: 0;
  border-block-end: var(--bw-hair) solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  white-space: nowrap;
  border-block-end: var(--bw-rule) solid transparent;
  margin-block-end: -1px;
  transition: var(--t-color);
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] {
  color: var(--fg-strong);
  border-block-end-color: var(--accent);
}
.tabpanel { padding-block-start: var(--s-7); }
.tabpanel[hidden] { display: none; }

/* -- Accordion ------------------------------------------------------------ */
.acc { border-block-start: var(--bw-hair) solid var(--line); }
.acc__item { border-block-end: var(--bw-hair) solid var(--line); }
.acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  inline-size: 100%;
  padding-block: var(--s-5);
  text-align: start;
  color: var(--fg);
  transition: var(--t-color);
}
.acc__trigger:hover { color: var(--accent); }
.acc__label {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  min-inline-size: 0;
}
.acc__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--accent);
  flex: none;
}
.acc__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: 1.15;
}
[dir="rtl"] .acc__title { text-transform: none; }
.acc__icon {
  position: relative;
  inline-size: 14px;
  block-size: 14px;
  flex: none;
}
.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.acc__icon::before { inset-block-start: 50%; inset-inline: 0; block-size: 1.5px; transform: translateY(-50%); }
.acc__icon::after  { inset-inline-start: 50%; inset-block: 0; inline-size: 1.5px; transform: translateX(-50%); }
.acc__trigger[aria-expanded="true"] .acc__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.acc__trigger[aria-expanded="true"] { color: var(--accent); }
.acc__panel { padding-block-end: var(--s-6); }
.acc__panel[hidden] { display: none; }

/* -- Gallery / thumbs / video --------------------------------------------- */
.gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--surface-inset);
  border: var(--bw-hair) solid var(--line);
}
.gallery__main img,
.gallery__main iframe {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border: 0;
}
.gallery__zoom {
  position: absolute;
  inset-block-end: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: 2;
}
.gallery__thumbs {
  display: flex;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
  overflow-x: auto;
  padding-block-end: var(--s-2);
}
.thumb {
  position: relative;
  inline-size: 74px;
  block-size: 74px;
  flex: none;
  overflow: hidden;
  border: var(--bw-hair) solid var(--line);
  background-color: var(--surface-inset);
  transition: border-color var(--dur-1) var(--ease);
}
.thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.thumb:hover { border-color: var(--line-contrast); }
.thumb[aria-current="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: rgba(5, 6, 7, 0.5);
  color: #FFFFFF;
  transition: background-color var(--dur-1) var(--ease);
}
.play-badge svg { inline-size: 18px; block-size: 18px; }
.thumb:hover .play-badge { background-color: rgba(237, 28, 36, 0.72); }
.gallery__main .play-badge svg { inline-size: 44px; block-size: 44px; }

/* -- Map ------------------------------------------------------------------ */
.map-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--surface-2);
  border: var(--bw-hair) solid var(--line);
}
.map-frame iframe { inline-size: 100%; block-size: 100%; border: 0; }
/* Desaturate the map so it belongs to the palette instead of fighting it. */
.map-frame--tinted iframe { filter: grayscale(1) contrast(1.05) brightness(0.92); }
.map-frame__pin {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-start: var(--s-4);
  z-index: 2;
  padding: var(--s-2) var(--s-3);
  background-color: var(--accent-solid);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

/* -- Icon link row (socials, share) --------------------------------------- */
.iconrow {
  display: flex;
  inline-size: fit-content;
  border: var(--bw-hair) solid var(--line);
}
.iconrow__link {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  color: var(--fg-muted);
  border-inline-end: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
}
.iconrow__link:last-child { border-inline-end: 0; }
.iconrow__link:hover { color: var(--accent-fg); background-color: var(--accent-solid); }
.iconrow__link svg { inline-size: 16px; block-size: 16px; }

/* -- Hairline grid: cards that share a single 1px rule, no gaps. ---------- */
.hgrid {
  display: grid;
  gap: var(--bw-hair);
  background-color: var(--line);
  border: var(--bw-hair) solid var(--line);
}
.hgrid > * { background-color: var(--bg); }
.hgrid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.hgrid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.hgrid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* -- Media object (contact lines, agent details) -------------------------- */
.media {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}
.media__icon {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  flex: none;
  color: var(--accent);
  border: var(--bw-hair) solid var(--line);
  background-color: var(--surface-2);
}
.media__icon svg { inline-size: 16px; block-size: 16px; }
.media__body { min-inline-size: 0; }
.media__k {
  display: block;
  margin-block-end: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
.media__v { display: block; font-size: var(--fs-sm); color: var(--fg); line-height: 1.5; }
a.media__v:hover { color: var(--accent); }

/* ==========================================================================
   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);
}