/* ==========================================================================
   STUDIO — components.css
   The reusable kit. Every one of the 8 pages is built from these.

   TWO ANATOMY DECISIONS THAT DEFINE THIS THEME — respect them:

   (a) CARDS ARE NOT FLOATING OBJECTS. They do not have their own drop
       shadow and they do not lift on hover. They are CELLS in a ruled grid.
       Each card paints a 1px ring (box-shadow 0 0 0 1px) and sits flush
       against its neighbours, so adjacent rings collapse into a single
       shared hairline — a precise, disciplined grid, like a spec sheet.
       (A ring rather than a border because rings overlap cleanly at any
       column count and leave no artefact on a partly-filled last row.)

   (b) HOVER IS UNDERSTATED. The ring darkens, the tile warms a shade, the
       image scales by ~0.05, the quote action turns red. Nothing moves in Y.
       No spring. No bounce.
   ========================================================================== */

/* ==========================================================================
   PRODUCT PHOTOGRAPHY — the house crop.
   READ THIS BEFORE CHANGING ANY TILE.

   The supplied product shots are the client's own marketing photographs, not
   packshots. Every one of them is 1:1 and carries burned-in furniture:
     · a phone number + URL baked into the BOTTOM ~10% of several images
       (show_image_89 is the obvious one),
     · a red circular brand watermark,
   and the product itself is usually small in a large empty frame.

   Dropped into a square tile at object-fit:cover, a 1:1 source in a 1:1 box
   gets cropped by exactly nothing — so the phone number renders inside the
   card and the product looks lost. That reads as a mistake, and it would
   sink a "quietly expensive" pitch.

   So tiles apply a house crop: a modest zoom whose origin sits ABOVE centre.
   Scaling about `center 30%` spends the crop budget on the BOTTOM of the
   frame, which is where the burned-in text lives, while barely touching the
   top. It shows source rows ~5% → ~88% — the contact strip lands outside the
   tile — and it pushes the product up to fill the frame properly.

   The red watermark stays. It is on every photograph, so it reads as a
   consistent brand mark rather than an error, and removing it would mean
   re-shooting the catalogue.
   ========================================================================== */
.card__img,
.rtile__img {
  transform: scale(1.2);
  transform-origin: center 30%;
}
/* .cat__media is 4:3, so `cover` already discards 12.5% off the top and
   bottom of a square source. It only needs the bias, not the zoom. */
.cat__img {
  object-position: center 42%;
  transform: scale(1.04);
  transform-origin: center 35%;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 44px;
  padding-inline: var(--sp-5);
  padding-block: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--t-color), box-shadow var(--dur-2) var(--ease);
  /* NOTE: `transform` is deliberately NOT in the transition. Buttons in
     this theme do not move. */
}
[dir="rtl"] .btn { letter-spacing: 0; }

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

.btn__ico { inline-size: 18px; block-size: 18px; flex: none; }
/* Arrows must point "forward", which is the other way in Arabic. */
.btn__arrow { inline-size: 16px; block-size: 16px; flex: none; transition: transform var(--dur-2) var(--ease); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }

/* primary — the flat brand red. No gradient. Ever. */
.btn--primary {
  background: var(--accent-fill);
  color: var(--c-white);
}
.btn--primary:hover { background: var(--accent-fill-hov); }
.btn--primary:active { background: var(--accent-fill-act); }

/* ink — the neutral heavyweight */
.btn--ink { background: var(--bg-ink); color: var(--text-on-ink); }
.btn--ink:hover { background: var(--ink-hover); }
.btn--ink:active { background: var(--ink-active); }

/* secondary — hairline outline on white. The default "other" action. */
.btn--secondary {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.btn--secondary:hover { border-color: var(--border-strong); background: var(--bg-surface); }
.btn--secondary:active { background: var(--bg-surface-2); }

/* ghost — no chrome until you touch it */
.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-surface); color: var(--text); }

/* on the ink band, the primary action inverts to white */
.btn--on-ink { background: var(--c-white); color: var(--c-ink); }
.btn--on-ink:hover { background: var(--on-ink-hover); }

.btn--outline-ink {
  background: transparent;
  border-color: var(--border-on-ink);
  color: var(--text-on-ink);
}
.btn--outline-ink:hover { border-color: var(--border-on-ink-h); background: var(--bg-on-ink-h); }

/* a text action with a forward arrow — used under section heads + on cards */
.btn--link {
  min-block-size: 0;
  padding: var(--sp-1) 0;
  background: none;
  color: var(--text);
  font-weight: var(--fw-semibold);
}
.btn--link:hover { color: var(--text-accent); }
.btn--link:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn--link:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* icon-only */
.btn--icon {
  inline-size: 40px;
  min-inline-size: 40px;
  block-size: 40px;
  min-block-size: 40px;
  padding: 0;
  border-radius: var(--r);
  color: var(--text-secondary);
  background: var(--bg);
  border-color: transparent;
}
.btn--icon:hover { background: var(--bg-surface); color: var(--text); }
.btn--icon svg { inline-size: 20px; block-size: 20px; }

.btn--sm { min-block-size: 36px; padding-inline: var(--sp-4); font-size: var(--fs-xs); }
.btn--lg { min-block-size: 52px; padding-inline: var(--sp-7); font-size: var(--fs-body); }
.btn--block { inline-size: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ==========================================================================
   SECTION HEADER
   A hairline, a small red-dotted label, a big tight title, and a supporting
   line + action pushed to the inline-end. Disciplined and quiet.
   ========================================================================== */
.shead {
  display: grid;
  gap: var(--sp-5);
  padding-block-start: var(--sp-7);
  border-block-start: var(--border-1);
  margin-block-end: var(--sp-9);
}
@media (min-width: 900px) {
  .shead {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--sp-10);
  }
}
.shead__lead { display: grid; gap: var(--sp-4); min-inline-size: 0; }
.shead__title { font-size: var(--fs-h2); max-inline-size: 20ch; }
.shead__aside {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  min-inline-size: 0;
}
@media (min-width: 900px) {
  .shead__aside { justify-items: end; text-align: end; }
}
.shead__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-body);
  max-inline-size: 46ch;
}
.shead--center { justify-items: center; text-align: center; }

/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
  gap: 0;
  /* the outer rounding; the cells' rings draw everything else */
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cards--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg);
  /* the hairline ring — collapses with its neighbours into one shared line */
  box-shadow: 0 0 0 1px var(--border);
  transition: background-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.card:hover {
  background: var(--bg-hover);
  box-shadow: 0 0 0 1px var(--border-strong);
  z-index: 1;   /* so the darker ring wins over its neighbours' */
}
.card:focus-within {
  box-shadow: 0 0 0 1px var(--border-strong);
  z-index: 1;
}

/* the tile the product photograph sits on */
.card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  border: var(--border-1);
  background: var(--bg-surface);
  overflow: hidden;
}
.card__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease);
}
.card:hover .card__img { transform: scale(1.25); }   /* base zoom is 1.2 — this is the +.05 nudge */

/* a small structure badge pinned into the tile */
.card__badge {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 1;
}

.card__body { display: grid; gap: var(--sp-2); min-inline-size: 0; flex: 1 1 auto; }

.card__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.card__link { display: block; }
/* the whole card is clickable, but only the name is the real link */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card:hover .card__name { color: var(--text-accent); }

.card__excerpt {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Pin the box to EXACTLY two lines. Without this, line-clamp leaves the
     descenders of the clipped third line peeking below the fold, and the
     name/meta rows across a row of cards stop aligning. */
  block-size: calc(2em * var(--lh-body));
}

/* The meta line — the MATERIAL, sitting quietly under the excerpt.
   Sentence case, not uppercase: at 11px + tracking a laminate spec like
   "PET / MET-PET / PE laminate" is far too wide and truncates to mush. */
.card__meta {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-block-start: var(--sp-1);
}

/* The quote action IS the foot: a full-width hairline-topped row.
   It sits above .card__link::after (z-index) so the card links to the
   product and this strip links to the quote — two targets, no ambiguity. */
.card__quote {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-block-size: 44px;
  margin-block-start: auto;
  padding-block-start: var(--sp-4);
  border-block-start: var(--border-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-body);
  color: var(--text);
  white-space: nowrap;
  transition: var(--t-color);
}
.card__quote:hover { color: var(--text-accent); }
.card__quote svg {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  transition: transform var(--dur-2) var(--ease);
}
[dir="rtl"] .card__quote svg { transform: scaleX(-1); }
.card__quote:hover svg { transform: translateX(3px); }
[dir="rtl"] .card__quote:hover svg { transform: scaleX(-1) translateX(3px); }

/* --- LIST variant (products.html list view) -----------------------------
   Same card, laid out as a row: photo | body (WITH the excerpt) | quote.
   `Studio.render.productCard(p, 'list')` emits exactly this.
   Put the rows in a `.cards.cards--list` so they still share one hairline. */
.cards--list { grid-template-columns: minmax(0, 1fr); }

.card--row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5);
}
.card--row .card__media { inline-size: 148px; }
.card--row .card__body { gap: var(--sp-2); }
/* The grid card pins the excerpt to EXACTLY two lines so names and meta rows
   line up across a row of tiles. A list row has no neighbour to line up with,
   and the pinned height just leaves a hole under a one-line excerpt. */
.card--row .card__excerpt { block-size: auto; }
.card--row .card__quote {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .card--row { grid-template-columns: 104px minmax(0, 1fr); }
  .card--row .card__media { inline-size: 104px; }
  .card--row .card__quote {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-block-start: var(--sp-4);
    border-block-start: var(--border-1);
  }
}
@media (max-width: 420px) {
  .card--row { grid-template-columns: minmax(0, 1fr); }
  .card--row .card__media { inline-size: 100%; }
}

/* ==========================================================================
   CATEGORY CARD  (and the scroll-snap rail on the homepage)
   RULE: a category tile is ALWAYS backed by a real product photograph.
   Several of the category PNGs are near-empty, so they are never allowed to
   be the only thing in a tile.
   ========================================================================== */
.cat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border);
  transition: background-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.cat:hover {
  background: var(--bg-hover);
  box-shadow: 0 0 0 1px var(--border-strong);
  z-index: 1;
}
.cat__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  border: var(--border-1);
  background: var(--bg-surface);
  overflow: hidden;
}
.cat__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease);
}
.cat:hover .cat__img { transform: scale(1.09); }     /* base zoom is 1.04 */
.cat__body { display: grid; gap: var(--sp-1); }
.cat__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-head);
}
.cat__link::after { content: ""; position: absolute; inset: 0; }
.cat:hover .cat__name { color: var(--text-accent); }
.cat__count { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* children listed under a parent category */
.cat__kids { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); }

/* ==========================================================================
   RAIL — horizontal scroll-snap strip (the homepage category rail).
   RTL: because the track is a flex row inside a dir-aware container, the
   browser reverses it for free. The ARROWS are mirrored in JS/CSS.
   ========================================================================== */
.rail { position: relative; }
.rail__track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--gutter);
  padding-block-end: var(--sp-2);
  /* bleed the rail to the viewport edges so it reads as a strip that
     continues past the page — then pad it back to the container. */
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }

.rail__item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  inline-size: clamp(190px, 46vw, 232px);
}

/* the rail tile: photo on the grey surface, hairline, then the label below */
.rtile {
  position: relative;
  display: grid;
  gap: var(--sp-3);
}
.rtile__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  border: var(--border-1);
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease);
}
.rtile__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease);
}
.rtile:hover .rtile__media { border-color: var(--border-strong); }
.rtile:hover .rtile__img { transform: scale(1.26); } /* base zoom is 1.2 */
.rtile__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.rtile:hover .rtile__name { color: var(--text-accent); }
.rtile__count { font-size: var(--fs-xs); color: var(--text-muted); }
.rtile__link::after { content: ""; position: absolute; inset: 0; }

/* rail chrome */
.rail__nav { display: flex; gap: var(--sp-2); }
.rail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border: var(--border-1);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  transition: var(--t-color);
}
.rail__btn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--bg-surface); }
.rail__btn:disabled { opacity: 0.35; cursor: default; }
.rail__btn svg { inline-size: 18px; block-size: 18px; }
[dir="rtl"] .rail__btn svg { transform: scaleX(-1); }

/* ==========================================================================
   BADGE / CHIP / TAG
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px var(--sp-2);
  border-radius: var(--r-xs);
  background: var(--bg);
  border: var(--border-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
[dir="rtl"] .badge { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.badge--accent { background: var(--accent-wash); border-color: var(--accent-wash-bd); color: var(--text-accent); }
.badge--ink { background: var(--bg-ink); border-color: var(--bg-ink); color: var(--text-on-ink); }
.badge--solid { background: var(--bg); border-color: var(--border-strong); }

/* chip — a filter pill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 36px;
  padding-inline: var(--sp-4);
  border: var(--border-1);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: var(--t-color);
  cursor: pointer;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); background: var(--bg-surface); }
.chip.is-active,
.chip[aria-pressed="true"] {
  background: var(--bg-ink);
  border-color: var(--bg-ink);
  color: var(--text-on-ink);
}
.chip__x { inline-size: 14px; block-size: 14px; opacity: 0.7; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* tag — a quiet keyword */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--sp-2);
  border-radius: var(--r-xs);
  background: var(--bg-surface);
  border: var(--border-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.tag:hover { color: var(--text); border-color: var(--border-strong); }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  list-style: none;
  padding-block: var(--sp-5);
}
.crumbs__item { display: flex; align-items: center; gap: var(--sp-2); }
.crumbs__item:not(:last-child)::after {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-block-start: 1px solid var(--border-strong);
  border-inline-end: 1px solid var(--border-strong);
  transform: rotate(45deg);
  flex: none;
}
[dir="rtl"] .crumbs__item:not(:last-child)::after { transform: rotate(-135deg); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current="page"] { color: var(--text); font-weight: var(--fw-medium); }

/* ==========================================================================
   AGENT CARD — CSS monogram avatar (no photos exist for agents)
   ========================================================================== */
.agent {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border);
  transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.agent:hover { background: var(--bg-hover); box-shadow: 0 0 0 1px var(--border-strong); z-index: 1; }
.agent__top { display: flex; align-items: center; gap: var(--sp-4); }
.agent__mono {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  border-radius: var(--r);
  background: var(--bg-ink);
  color: var(--text-on-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.agent__id { min-inline-size: 0; }
.agent__name { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--ls-head); }
.agent__region { font-size: var(--fs-xs); color: var(--text-muted); }
.agent__desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-body); }
.agent__ct { display: grid; gap: var(--sp-2); padding-block-start: var(--sp-4); border-block-start: var(--border-1); margin-block-start: auto; }
.agent__row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); min-block-size: 36px; }
.agent__row svg { inline-size: 16px; block-size: 16px; flex: none; color: var(--text-muted); }
.agent__row a:hover { color: var(--text-accent); }

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */
.field { display: grid; gap: var(--sp-2); min-inline-size: 0; }

.field__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: var(--ls-body);
}
.field__req { color: var(--text-accent); margin-inline-start: 2px; }

.input,
.select,
.textarea {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 48px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border: var(--border-1);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: var(--t-color), box-shadow var(--dur-2) var(--ease);
  appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--text-muted); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--border-strong); }

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

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

/* the chevron on a select — a background-image, so it must flip in RTL */
.select {
  padding-inline-end: var(--sp-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: right var(--sp-4) center;
}
[dir="rtl"] .select { background-position: left var(--sp-4) center; }
/* A data: URI cannot read a custom property, so the chevron has to be restated
   for the dark ground. Miss this and the select looks like it lost its arrow. */
:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B919C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }

.field__error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-accent);
}
.field__error svg { inline-size: 14px; block-size: 14px; flex: none; }

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--accent); }
.field.is-invalid .field__error { display: flex; }

.field.is-valid .input,
.field.is-valid .select,
.field.is-valid .textarea { border-color: var(--success-border); }

/* checkbox / radio */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: var(--border-1);
  border-radius: var(--r);
  cursor: pointer;
  min-block-size: 48px;
  transition: var(--t-color);
}
.check:hover { border-color: var(--border-strong); background: var(--bg-surface); }
.check__box {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  margin-block-start: 2px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: var(--t-color);
}
.check__box--radio { border-radius: 50%; }
.check__input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.check__input:checked + .check__box { background: var(--accent-fill); border-color: var(--accent-fill); }
.check__input:checked + .check__box::after {
  content: "";
  inline-size: 9px;
  block-size: 5px;
  border-inline-start: 2px solid #fff;
  border-block-end: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.check__input:checked + .check__box--radio::after {
  inline-size: 6px; block-size: 6px; border: 0; border-radius: 50%; background: #fff; transform: none;
}
.check__input:focus-visible + .check__box { box-shadow: var(--ring); }
.check:has(.check__input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.check__text { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-snug); }
.check:has(.check__input:checked) .check__text { color: var(--text); font-weight: var(--fw-medium); }

.field-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) { .field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  list-style: none;
  margin-block-start: var(--sp-10);
}
.pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 40px;
  block-size: 40px;
  padding-inline: var(--sp-3);
  border: var(--border-1);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  transition: var(--t-color);
}
.pager__link:hover { border-color: var(--border-strong); color: var(--text); background: var(--bg-surface); }
.pager__link[aria-current="page"] {
  background: var(--bg-ink);
  border-color: var(--bg-ink);
  color: var(--text-on-ink);
}
.pager__link.is-disabled { opacity: 0.4; pointer-events: none; }
.pager__link svg { inline-size: 16px; block-size: 16px; }
[dir="rtl"] .pager__link svg { transform: scaleX(-1); }
.pager__gap { color: var(--text-muted); padding-inline: var(--sp-1); }

/* ==========================================================================
   TOAST
   ========================================================================== */
.toasts {
  position: fixed;
  inset-block-end: var(--sp-6);
  inset-inline-end: var(--sp-6);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--sp-3);
  inline-size: min(360px, calc(100vw - var(--sp-8)));
  pointer-events: none;
  /* the stack steps up when the back-to-top button appears under it — same
     duration as the button's own fade, so the two move as one gesture */
  transition: inset-block-end var(--dur-3) var(--ease);
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg);
  border: var(--border-1-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast__ico { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 1px; }
.toast--success .toast__ico { color: var(--c-green-700); }
.toast--error .toast__ico { color: var(--text-accent); }
.toast--info .toast__ico { color: var(--text-secondary); }
.toast__body { flex: 1 1 auto; min-inline-size: 0; }
.toast__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.toast__msg { font-size: var(--fs-xs); color: var(--text-muted); margin-block-start: 2px; }
.toast__x {
  flex: none;
  inline-size: 28px; block-size: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-muted);
}
.toast__x:hover { background: var(--bg-surface); color: var(--text); }
.toast__x svg { inline-size: 14px; block-size: 14px; }

/* ==========================================================================
   MODAL / LIGHTBOX
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease), visibility var(--dur-3) var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__panel {
  inline-size: min(640px, 100%);
  max-block-size: calc(100svh - var(--sp-10));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-raised);
  border: var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  transform: translateY(8px);
  transition: transform var(--dur-3) var(--ease);
}
.modal.is-open .modal__panel { transform: none; }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-block-end: var(--border-1);
}
.modal__title { font-size: var(--fs-h3); }
.modal__body { padding: var(--sp-6); }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-block-start: var(--border-1);
}
.modal__x {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border-radius: var(--r);
  color: var(--text-muted);
  flex: none;
}
.modal__x:hover { background: var(--bg-surface); color: var(--text); }
.modal__x svg { inline-size: 18px; block-size: 18px; }

/* ==========================================================================
   LIGHTBOX / IMAGE VIEWER
   Built by Studio.lightbox(items, i) — there is no markup for it in the page.
   items: [{ type: 'IMAGE' | 'VIDEO', url, alt }]

   Studio's version of a viewer: a dark, flat ground and a HAIRLINE toolbar.
   No glass blur, no glow, no pillow — the chrome is a 1px-bordered plate that
   sits on the ground exactly the way every other container in this theme sits
   on the page.

   THREE THINGS THAT LOOK LIKE BUGS AND ARE NOT:
     · the image is capped against the VIEWPORT (min(72vh, 800px)), not with a
       percentage — a % max-block-size does not constrain it and the picture
       renders at its natural size and runs off the screen;
     · the STAGE closes on click, the IMAGE does not (the image stops the
       event) — that is how "click the empty space to dismiss" is done;
     · zoom / rotate / download are DISABLED, not removed, while a video is up.
       Removing them would make the toolbar jump.
   ========================================================================== */
.lb {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background: var(--backdrop-heavy);
  color: #FFFFFF;
}
.lb[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lb { animation: lb-in var(--dur-2) var(--ease); }
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lb__backdrop { position: absolute; inset: 0; }

.lb__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  block-size: 100%;
  inline-size: 100%;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  gap: var(--sp-3);
  /* The panel is the full viewport and sits ABOVE .lb__backdrop, so without
     this it swallows every click that lands in its padding gutters, the gap
     under the toolbar and the band around the caption — the backdrop could
     never actually be hit. Make the frame transparent to the pointer and let
     the three real surfaces opt back in. */
  pointer-events: none;
}
.lb__bar,
.lb__stage,
.lb__caption { pointer-events: auto; }

/* --- toolbar: a hairline plate, not a floating pill --------------------- */
.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.05);
}
[dir="rtl"] .lb__bar { padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2); }

.lb__count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[dir="rtl"] .lb__count { text-transform: none; letter-spacing: 0; }

.lb__tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.lb__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: var(--t-color);
}
.lb__tool:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.lb__tool:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; }
.lb__tool svg { inline-size: 19px; block-size: 19px; }
/* Disabled — greyed, still there, still the same width. The bar must not move. */
.lb__tool:disabled,
.lb__tool[aria-disabled="true"] { opacity: 0.32; pointer-events: none; cursor: default; }
.lb__tool--close { color: #FFFFFF; }
.lb__tool--close:hover { background: var(--accent-fill); border-color: var(--accent-fill); }

.lb__level {
  min-inline-size: 52px;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.86);
  font-variant-numeric: tabular-nums;
}
.lb__sep {
  inline-size: 1px;
  block-size: 20px;
  margin-inline: var(--sp-2);
  background: rgba(255, 255, 255, 0.18);
  flex: none;
}

/* --- stage -------------------------------------------------------------- */
.lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 0;
  overflow: hidden;
  cursor: default;
}
.lb__img {
  max-inline-size: 100%;
  /* NOT a percentage. `max-block-size: 100%` computes and does nothing here —
     the image renders at its natural height and walks off the screen. Anchor
     it to the VIEWPORT. */
  max-block-size: min(72vh, 800px);
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform var(--dur-2) var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}
.lb.is-zoomed .lb__img { transition: none; }
.lb.is-zoomed .lb__stage { cursor: grab; }

.lb__frame {
  inline-size: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  max-block-size: min(72vh, 800px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-sm);
  background: #000;
}

/* The file:// poster — YouTube refuses any embed with a null page origin
   (Error 153), so off-http we show a real poster that opens in a new tab. */
.lb__poster {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: min(100%, 900px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #000;
}
.lb__poster img {
  inline-size: 100%;
  max-block-size: min(62vh, 640px);
  object-fit: cover;
  opacity: 0.6;
}
.lb__play {
  position: absolute;
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--r-pill);
  background: var(--accent-fill);
  color: #FFFFFF;
}
.lb__play svg { inline-size: 26px; block-size: 26px; }
.lb__poster-note {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--sp-3);
  text-align: center;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.86);
  background: rgba(0, 0, 0, 0.62);
}

/* --- prev / next -------------------------------------------------------- */
.lb__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.45);
  color: #FFFFFF;
  cursor: pointer;
  transition: var(--t-color);
}
.lb__nav:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.42); }
.lb__nav svg { inline-size: 20px; block-size: 20px; }
/* Logical insets: the "previous" button lands on the correct side in Arabic
   with no extra rules. The GLYPHS are mirrored by .mirror. */
.lb__nav--prev { inset-inline-start: var(--sp-3); }
.lb__nav--next { inset-inline-end: var(--sp-3); }

.lb__caption {
  text-align: center;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.78);
  min-block-size: 1.4em;
  max-inline-size: 80ch;
  margin-inline: auto;
}

@media (max-width: 639px) {
  .lb__panel { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  .lb__bar { padding-inline: var(--sp-3) var(--sp-1); }
  .lb__tool { inline-size: 38px; block-size: 38px; }
  .lb__count { inline-size: 100%; text-align: center; }
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
}
.empty__ico {
  display: grid;
  place-items: center;
  inline-size: 48px; block-size: 48px;
  border-radius: var(--r);
  background: var(--bg);
  border: var(--border-1);
  color: var(--text-muted);
}
.empty__ico svg { inline-size: 22px; block-size: 22px; }
.empty__title { font-size: var(--fs-h3); }
.empty__text { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 44ch; }

/* ==========================================================================
   TABLE / SPEC LIST
   ========================================================================== */
.table-wrap { overflow-x: auto; border: var(--border-1); border-radius: var(--r-lg); }
.table { inline-size: 100%; font-size: var(--fs-sm); }
.table th,
.table td { padding: var(--sp-4) var(--sp-5); text-align: start; }
.table thead th {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-surface);
  border-block-end: var(--border-1);
  white-space: nowrap;
}
[dir="rtl"] .table thead th { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.table tbody tr + tr td { border-block-start: var(--border-1); }
.table tbody tr:hover td { background: var(--bg-hover); }
.table td:first-child { font-weight: var(--fw-medium); color: var(--text); }

/* spec key/value rows (product page) */
.specs { display: grid; border-block-start: var(--border-1); }
.spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: var(--border-1);
  font-size: var(--fs-sm);
}
.spec__key { color: var(--text-muted); }
.spec__value { color: var(--text); font-weight: var(--fw-medium); }

/* ==========================================================================
   TABS
   ========================================================================== */
.tabs { border-block-end: var(--border-1); display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  padding: var(--sp-4) var(--sp-4);
  min-block-size: 48px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  transition: var(--t-color);
}
.tab:hover { color: var(--text); }
.tab::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: var(--sp-2);
  block-size: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--dur-2) var(--ease);
}
.tab[aria-selected="true"] { color: var(--text); font-weight: var(--fw-semibold); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabpanel { padding-block-start: var(--sp-7); }
.tabpanel[hidden] { display: none; }

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.acc { border-block-start: var(--border-1); }
.acc__item { border-block-end: var(--border-1); }
.acc__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  min-block-size: 56px;
  text-align: start;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-head);
  color: var(--text);
  transition: var(--t-color);
}
.acc__btn:hover { color: var(--text-accent); }
.acc__sign {
  position: relative;
  inline-size: 20px; block-size: 20px;
  flex: none;
  color: var(--text-muted);
}
.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease);
}
.acc__sign::before { inline-size: 12px; block-size: 1.5px; transform: translate(-50%, -50%); }
.acc__sign::after  { inline-size: 1.5px; block-size: 12px; transform: translate(-50%, -50%); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc__panel { overflow: hidden; }
.acc__panel[hidden] { display: none; }
.acc__inner { padding-block-end: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-relaxed); }

/* ==========================================================================
   SLIDER CHROME (shared with .rail)
   ========================================================================== */
.dots { display: flex; gap: var(--sp-2); align-items: center; }
.dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: var(--t-color), width var(--dur-3) var(--ease);
  padding: 0;
}
.dot[aria-current="true"] { background: var(--accent); inline-size: 20px; border-radius: var(--r-pill); }
/* the dot's real 40px tap target without changing its look */
.dot-hit {
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 40px;
}

/* ==========================================================================
   STAT
   ========================================================================== */
.stat { display: grid; gap: var(--sp-2); }
.stat__value {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.band--ink .stat__value { color: var(--text-on-ink); }
.stat__label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.band--ink .stat__label { color: var(--text-on-ink-mut); }

/* ==========================================================================
   PAGE HEADER — the slim one. Every page except the homepage opens with it.
   A hairline-bottomed strip: breadcrumb, small label, h1, one supporting
   line, and (optionally) an action pushed to the inline-end. No hero image,
   no dark band, no gradient — the page's content is the event, not its title.

     <section class="phead">
       <div class="container">
         <nav aria-label="Breadcrumb"><ol class="crumbs">…</ol></nav>
         <div class="phead__in">
           <div class="phead__lead">
             <span class="label label--accent">Catalogue</span>
             <h1 class="phead__title">All products</h1>
             <p class="phead__sub">…</p>
           </div>
           <div class="phead__aside"> …btn… </div>
         </div>
       </div>
     </section>
   ========================================================================== */
.phead {
  padding-block-end: var(--sp-9);
  border-block-end: var(--border-1);
  background: var(--bg);
}
.phead--surface { background: var(--bg-surface); }
.phead__in {
  display: grid;
  gap: var(--sp-6);
  align-items: end;
}
@media (min-width: 900px) {
  .phead__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--sp-10); }
}
.phead__lead { display: grid; gap: var(--sp-4); min-inline-size: 0; }
.phead__title { font-size: var(--fs-h1); max-inline-size: 18ch; }
.phead__sub {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  max-inline-size: 56ch;
}
.phead__aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-inline-size: 0; }
@media (min-width: 900px) {
  .phead__aside { justify-content: flex-end; }
}
/* the crumb strip is flush to the top of the page header */
.phead .crumbs { padding-block: var(--sp-6) var(--sp-5); }

/* --------------------------------------------------------------------------
   .phead--slim — THE WORKING variant, and the one every index page uses.

   The bare `.phead` is the generous one: a 60px h1 over a 21px lead runs the
   strip past 250px and pushes the first row of content below the fold. On a
   page whose CONTENT is the event — the catalogue, the category index, the
   agent network, the contact form — the title is not the event, so the head is
   rationed instead: crumbs → modest h1 → ONE short line → one action. ~134px
   on desktop, and the grid starts immediately.

   Still Studio: a hairline underneath (never a shadow, never a band), tight
   neo-grotesk type, no gradient. Only the SCALE changes.

   This lives in the KIT, not in four page stylesheets. products, categories,
   agents and contact all wear the same header, so it is defined once — the
   copies that used to sit in pages/products.css, pages/agents.css and
   pages/contact.css were three slightly different headers wearing one class
   name, and categories.css had none at all, so the class was silently inert
   there.
   -------------------------------------------------------------------------- */
.phead--slim { padding-block-end: var(--sp-5); }

/* the crumb strip IS the header's top padding — it does not need its own */
.phead--slim .crumbs { padding-block: var(--sp-4) var(--sp-2); }

.phead--slim .phead__in { gap: var(--sp-4); align-items: center; }
.phead--slim .phead__lead { gap: var(--sp-2); }

/* modest. 24 → 32, set tight, one line at every width we care about. */
.phead--slim .phead__title {
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  max-inline-size: 26ch;
}

/* one short supporting line — dropped from --fs-lead to --fs-sm */
.phead--slim .phead__sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  max-inline-size: 62ch;
}

/* ==========================================================================
   TOOLBAR — the row above a grid: result count on the start, controls on the
   end (sort <select>, grid/list switch). Wraps, never overflows.
   ========================================================================== */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  margin-block-end: var(--sp-6);
  border-block-end: var(--border-1);
}
.toolbar__count { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.toolbar__count strong { color: var(--text); font-weight: var(--fw-semibold); }
.toolbar__end { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.toolbar .select { min-block-size: 40px; padding-block: var(--sp-2); inline-size: auto; min-inline-size: 170px; }

/* grid / list view switch — the same segmented idiom as the language toggle */
.viewsw {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--bg-surface);
  border: var(--border-1);
  border-radius: var(--r);
  flex: none;
}
.viewsw__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 36px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: var(--t-color);
}
.viewsw__btn:hover { color: var(--text); }
.viewsw__btn[aria-pressed="true"] {
  background: var(--bg);
  border: var(--border-1);
  color: var(--text);
}
.viewsw__btn svg { inline-size: 17px; block-size: 17px; }

/* ==========================================================================
   GALLERY — product page. Main frame + thumbnail strip.
   Thumbs are buttons; wire the main image with data-lightbox to open it.
   ========================================================================== */
.gal { display: grid; gap: var(--sp-3); min-inline-size: 0; }
.gal__main {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  /* Cap it against the VIEWPORT so the stage always FITS, at every width. */
  max-block-size: min(72vh, 640px);
  inline-size: 100%;
  border: var(--border-1);
  border-radius: var(--r-lg);
  background: var(--media-bed);
  overflow: hidden;
  cursor: zoom-in;
}
/* contain, never cover: a tall or square shot is never cropped or blown up. */
.gal__img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.gal__thumbs {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: 2px;
}
.gal__thumbs::-webkit-scrollbar { display: none; }
.gal__thumb {
  flex: 0 0 auto;
  inline-size: 72px;
  block-size: 72px;
  padding: 0;
  border: var(--border-1);
  border-radius: var(--r);
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease);
}
.gal__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.gal__thumb:hover { border-color: var(--border-strong); }
.gal__thumb[aria-current="true"] { border-color: var(--accent); }

/* ==========================================================================
   MEDIA FRAME — a hairline box for a map iframe, a video, a photo.
   ========================================================================== */
.frame {
  position: relative;
  border: var(--border-1);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  overflow: hidden;
}
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--4x3  { aspect-ratio: 4 / 3; }
.frame--map  { aspect-ratio: 16 / 10; }
.frame > iframe,
.frame > img,
.frame > video { inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; display: block; }

/* ==========================================================================
   NOTE — a quiet hairline callout. Used for the "no prices" disclosure, the
   lead-time note on the quote form, opening hours on contact.
   ========================================================================== */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: var(--border-1);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg-surface);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.note svg { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: 2px; color: var(--text-accent); }
.note strong { color: var(--text); }

/* ==========================================================================
   GRID UTILITIES — for pages that need a plain (non-ruled) grid: agents,
   contact panels, about blocks. Cards that carry their own ring (.agent)
   sit in `.cards`-style flush grids instead; these are for spaced blocks.
   ========================================================================== */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
/* a flush, ruled grid of ring-cards (agents.html) — rings collapse like .cards */
.cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* the classic 2-up page split: content + a sticky sidebar */
.split { display: grid; gap: var(--sp-9); align-items: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: var(--sp-10); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split__side--sticky { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-6)); }
}

/* a bordered panel — the neutral container for a form, a summary, an aside */
.panel {
  border: var(--border-1);
  border-radius: var(--r-lg);
  background: var(--bg);
  padding: var(--sp-7);
}
.panel--surface { background: var(--bg-surface); }
.panel__title { font-size: var(--fs-h4); margin-block-end: var(--sp-4); }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
/* Bottom inline-END, i.e. bottom-right in English and bottom-left in Arabic —
   where a back-to-top control is always looked for. That is the same corner as
   the toast stack, so the toasts step up over the button while it is on screen
   (see .to-top.is-in ~ .toasts, below) rather than the button being exiled to
   the other side of the viewport. */
.to-top {
  position: fixed;
  inset-block-end: var(--sp-6);
  inset-inline-end: var(--sp-6);
  z-index: var(--z-sticky);
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border: var(--border-1-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease), visibility var(--dur-3) var(--ease);
}
.to-top.is-in { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--bg-surface); }
.to-top svg { inline-size: 18px; block-size: 18px; }

/* Both live in the bottom inline-end corner, and a toast is wide enough to
   bury the button whole. The button is the one that comes and goes, so the
   toast stack yields to it: while .to-top is on screen the toasts sit one
   button-height + one gap higher. Every page puts .to-top immediately before
   .toasts, which is what makes the sibling combinator reach. */
.to-top.is-in ~ .toasts { inset-block-end: calc(var(--sp-6) + 44px + var(--sp-3)); }

/* ==========================================================================
   SEARCH DIALOG — the header's ONLY search affordance.
   There is no inline field and no toggle any more: one icon, at every width,
   opening a real dialog (aria-modal, focus-trapped, Esc closes, focus returns
   to the trigger, body scroll locked). Also opens on "/" and Cmd/Ctrl+K.

   Studio's take: a plain, hairline-bordered white plate near the top of the
   screen. No glass, no blur, no glow — the backdrop dims, the plate contains.
   ========================================================================== */
.sdlg {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--sp-4);
  padding-block-start: min(12vh, 96px);
  background: var(--backdrop);
}
.sdlg[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sdlg { animation: sdlg-in var(--dur-2) var(--ease); }
  .sdlg .sdlg__panel { animation: sdlg-panel-in var(--dur-3) var(--ease); }
}
@keyframes sdlg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sdlg-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.sdlg__backdrop { position: absolute; inset: 0; }

.sdlg__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  inline-size: min(640px, 100%);
  max-block-size: min(74vh, 620px);
  background: var(--bg-raised);
  color: var(--text);
  border: var(--border-1-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

/* --- the field --------------------------------------------------------- */
.sdlg__form {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  border-block-end: var(--border-1);
  flex: none;
}
[dir="rtl"] .sdlg__form { padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3); }
.sdlg__icon { inline-size: 18px; block-size: 18px; flex: none; color: var(--text-muted); }
.sdlg__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  padding-block: var(--sp-2);
}
.sdlg__input::placeholder { color: var(--text-muted); font-weight: var(--fw-regular); }
.sdlg__input:focus-visible { outline: none; }
.sdlg__input::-webkit-search-cancel-button { display: none; }

.sdlg__clear,
.sdlg__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--t-color);
}
.sdlg__clear:hover,
.sdlg__close:hover { background: var(--bg-surface); color: var(--text); }
.sdlg__close { border-color: var(--border); }
.sdlg__clear svg,
.sdlg__close svg { inline-size: 17px; block-size: 17px; }

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

.sdlg__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r);
  min-block-size: 56px;
  color: var(--text);
  transition: var(--t-color);
}
.sdlg__item:hover,
.sdlg__item.is-active {
  background: var(--bg-surface);
  border-color: var(--border);
}
.sdlg__item.is-active { border-color: var(--border-strong); }
.sdlg__thumb {
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border-radius: var(--r-sm);
  border: var(--border-1);
  object-fit: cover;
  background: var(--media-bed);
}
.sdlg__thumb--icon {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: var(--bg-surface);
}
.sdlg__thumb--icon svg { inline-size: 20px; block-size: 20px; }
.sdlg__meta { min-inline-size: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.sdlg__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdlg__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdlg__go { flex: none; color: var(--text-muted); }
.sdlg__go svg { inline-size: 16px; block-size: 16px; }
.sdlg__item:hover .sdlg__go,
.sdlg__item.is-active .sdlg__go { color: var(--text-accent); }

.sdlg__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 var(--sp-2) var(--sp-2);
}
.sdlg__chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 34px;
  padding-inline: var(--sp-4);
  border: var(--border-1);
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: var(--t-color);
}
.sdlg__chip:hover { border-color: var(--border-strong); color: var(--text); }

/* the real no-results state */
.sdlg__empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
}
.sdlg__empty-icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  color: var(--text-muted);
}
.sdlg__empty-icon svg { inline-size: 20px; block-size: 20px; }
.sdlg__empty-title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text); }
.sdlg__empty-body { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 42ch; }
.sdlg__empty-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-2); justify-content: center; }

/* --- foot: the keyboard hints + "view all" ----------------------------- */
.sdlg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-block-start: var(--border-1);
  background: var(--bg-surface);
  flex: none;
}
.sdlg__hints { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.sdlg__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.kbd {
  display: inline-grid;
  place-items: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 4px;
  border: var(--border-1);
  border-radius: var(--r-xs);
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-secondary);
}
.sdlg__all {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 36px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text);
  transition: var(--t-color);
}
.sdlg__all:hover { color: var(--text-accent); }
.sdlg__all svg { inline-size: 15px; block-size: 15px; }

@media (max-width: 559px) {
  .sdlg { padding-block-start: var(--sp-4); }
  .sdlg__panel { max-block-size: calc(100svh - var(--sp-8)); }
  .sdlg__hints { display: none; }
  .sdlg__foot { justify-content: flex-end; }
}

/* ==========================================================================
   CUSTOMISER — Appearance / Header style / Mobile sidebar style.

   TWO COPIES OF THE SAME CONTROLS, always in sync:
     · the desktop DIALOG (#customiser), opened by the header's icon;
     · an INLINE copy inside the drawer on mobile (never a second overlay —
       opening one from inside an open drawer stacks two focus traps).
   app.js wires [data-cust] document-wide, so both copies always agree.
   ========================================================================== */
.cust {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--backdrop);
}
.cust[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .cust { animation: sdlg-in var(--dur-2) var(--ease); }
}
.cust__backdrop { position: absolute; inset: 0; }

.cust__panel {
  position: relative;
  z-index: 1;
  inline-size: min(420px, 100%);
  max-block-size: calc(100svh - var(--sp-10));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-raised);
  color: var(--text);
  border: var(--border-1-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
}
.cust__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-block-end: var(--border-1);
}
.cust__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}
.cust__title svg { inline-size: 18px; block-size: 18px; color: var(--text-accent); }
.cust__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--t-color);
}
.cust__close:hover { background: var(--bg-surface); color: var(--text); }
.cust__close svg { inline-size: 17px; block-size: 17px; }
.cust__body { padding: var(--sp-5); display: grid; gap: var(--sp-6); }
.cust__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-block-start: var(--border-1);
  background: var(--bg-surface);
}
.cust__note { font-size: var(--fs-xs); color: var(--text-muted); }

.cust__group { display: grid; gap: var(--sp-3); }
.cust__legend {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
[dir="rtl"] .cust__legend { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }

/* The drawer's inline copy — same groups, drawer tokens. */
.drawer__cust { display: grid; gap: var(--sp-5); }
.drawer__cust .cust__legend { color: var(--dw-fg-3); }

/* --------------------------------------------------------------------------
   .seg — the segmented radiogroup. The same idiom as the language switcher:
   a hairline track, flat options, the live one on a raised plate. No thumb
   animation here (the options are not all the same width), just a plate.
   -------------------------------------------------------------------------- */
.seg {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 2px;
  border: var(--border-1);
  border-radius: var(--r);
  background: var(--bg-surface);
}
.seg__opt {
  flex: 1 1 0;
  min-inline-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 40px;
  padding-inline: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--t-color);
}
.seg__opt:hover { color: var(--text); }
.seg__opt svg { inline-size: 15px; block-size: 15px; flex: none; }
.seg__opt[aria-checked="true"] {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text);
  font-weight: var(--fw-semibold);
}
/* the colour swatch on the Default / Bakkar Red options */
.seg__sw {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-strong);
}
.seg__sw--default { background: var(--bg); }
.seg__sw--red { background: var(--c-red-plate); border-color: var(--c-red-plate); }

/* Inside the drawer the .seg runs on the drawer's tokens, so it stays legible
   when the sidebar is painted Bakkar Red. */
.drawer .seg {
  background: var(--dw-seg-bg);
  border-color: var(--dw-seg-line);
}
.drawer .seg__opt { color: var(--dw-seg-fg); }
.drawer .seg__opt:hover { color: var(--dw-seg-fg-on); }
.drawer .seg__opt[aria-checked="true"] {
  background: var(--dw-seg-thumb);
  border-color: var(--dw-seg-thumb-bd);
  color: var(--dw-seg-fg-on);
}
.drawer .seg__sw--default { background: var(--bg); border-color: var(--border-strong); }

/* Three options at 360px would each be ~38px wide with an icon in them. Stack
   the Appearance group instead of crushing it. */
@media (max-width: 400px) {
  .drawer .seg__opt { padding-inline: var(--sp-1); font-size: 11px; gap: 5px; }
}
@media (max-width: 360px) {
  .drawer .seg__opt svg { display: none; }
}

/* --------------------------------------------------------------------------
   .fnt — the ARABIC FONT picker. The customiser's fourth group.

   Eleven options will not fit a .seg, so this is a proper vertical
   radiogroup: a hairline track (the same track as .seg — it is the same
   family of control, just taller), one flat row per face, the live one on a
   raised plate with a red tick. It SCROLLS inside the panel: the group is a
   fixed-height, hairline-ruled well, so the four groups above it never get
   pushed off the panel.

   Every row previews ITSELF — the family name and the Arabic sample are set
   in --fp, that row's own stack (declared once in tokens.css and shared with
   the [data-font] token override, so the preview cannot lie about what you
   are picking). Latin rows stay on Inter; only these two spans move.
   -------------------------------------------------------------------------- */
.cust__hint {
  margin-block-start: calc(var(--sp-2) * -1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.drawer__cust .cust__hint { color: var(--dw-fg-3); }

.fnt {
  display: grid;
  gap: 2px;
  padding: 2px;
  border: var(--border-1);
  border-radius: var(--r);
  background: var(--bg-surface);
  max-block-size: 244px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* the scroll well needs a hint that there is more below the fold */
  scrollbar-width: thin;
}
.fnt__opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  inline-size: 100%;
  min-block-size: 46px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-muted);
  text-align: start;
  cursor: pointer;
  transition: var(--t-color);
}
/* --fp: this row's own stack. Same token the [data-font] override uses. */
.fnt__opt[data-value="sultan"]    { --fp: var(--f-sultan); }
.fnt__opt[data-value="cairo"]     { --fp: var(--f-cairo); }
.fnt__opt[data-value="tajawal"]   { --fp: var(--f-tajawal); }
.fnt__opt[data-value="almarai"]   { --fp: var(--f-almarai); }
.fnt__opt[data-value="plexar"]    { --fp: var(--f-plexar); }
.fnt__opt[data-value="notosans"]  { --fp: var(--f-notosans); }
.fnt__opt[data-value="notokufi"]  { --fp: var(--f-notokufi); }
.fnt__opt[data-value="vazirmatn"] { --fp: var(--f-vazirmatn); }
.fnt__opt[data-value="changa"]    { --fp: var(--f-changa); }
.fnt__opt[data-value="elmessiri"] { --fp: var(--f-elmessiri); }
.fnt__opt[data-value="amiri"]     { --fp: var(--f-amiri); }

.fnt__opt:hover { background: var(--bg); color: var(--text); }
.fnt__opt[aria-checked="true"] {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text);
}
.fnt__txt {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: grid;
  gap: 1px;
}
.fnt__name {
  font-family: var(--fp, var(--font-sans));
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The sample is the point of the control — it is the biggest thing in the row
   and it is always Arabic, always in the row's own face. */
.fnt__sample {
  font-family: var(--fp, var(--font-sans));
  font-size: 1.0625rem;
  font-weight: var(--fw-regular);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fnt__opt[aria-checked="true"] .fnt__sample { color: var(--text); }
.fnt__end {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.fnt__badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  border: var(--border-1);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  line-height: 1.4;
  white-space: nowrap;
}
[dir="rtl"] .fnt__badge {
  font-family: var(--font-ar);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
.fnt__tick {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.fnt__opt[aria-checked="true"] .fnt__tick { opacity: 1; }

/* Inside the drawer it runs on the drawer's tokens, so it survives a Bakkar
   Red sidebar exactly like .seg does. */
.drawer .fnt {
  background: var(--dw-seg-bg);
  border-color: var(--dw-seg-line);
}
.drawer .fnt__opt { color: var(--dw-seg-fg); }
.drawer .fnt__opt:hover { background: var(--dw-btn-bg-h); color: var(--dw-seg-fg-on); }
.drawer .fnt__opt[aria-checked="true"] {
  background: var(--dw-seg-thumb);
  border-color: var(--dw-seg-thumb-bd);
  color: var(--dw-seg-fg-on);
}
.drawer .fnt__opt .fnt__sample { color: inherit; }
.drawer .fnt__badge { color: inherit; border-color: currentColor; opacity: 0.7; }
.drawer .fnt__opt[aria-checked="true"] .fnt__tick { color: var(--dw-seg-fg-on); }
:root[data-sidebar="red"] .drawer .fnt__opt[aria-checked="true"] .fnt__tick { color: var(--c-red-plate); }

/* 360px: the badge is the first thing to go — the tick already says which row
   is live, and the sample must never be crushed. */
@media (max-width: 380px) {
  .fnt__opt { gap: var(--sp-2); padding-inline: var(--sp-2); }
  .drawer .fnt__badge { display: none; }
}

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