/* =========================================================================
   Masar Scientific — public site stylesheet
   Hand-written, no build step. One file serves both directions: layout uses
   logical properties (inline-start/end) so Arabic (RTL) and English (LTR)
   share every rule.
   1 tokens · 2 base · 3 layout · 4 components · 5 header/footer · 6 home
   7 catalog · 8 product · 9 forms/quote · 10 content pages · 11 motion
   ========================================================================= */

/* 1 ───────────────────────────── tokens
   Brand → roles → components. Pages never carry raw colours or sizes. */
/* The new Saudi Riyal sign (U+20C1): one glyph traced from the official symbol, first in the font stack
   and limited to that character, so every price written with it shows the real symbol. */
@font-face { font-family: "Masar SAR"; src: url("../fonts/masar-sar.woff2") format("woff2"), url("../fonts/masar-sar.woff") format("woff"); unicode-range: U+20C1; font-display: block; }

:root {
  /* brand */
  --brand-primary: #3f2b6d; /* logo purple: structure and actions */
  --brand-support: #ddc857; /* logo gold: small details only */
  --brand-surface: #f6f4fa; /* a trace of the logo purple on white: wells, bands, photo plates */

  --purple-950: #170e2b;
  --purple-900: #211538;
  --purple-800: #2d1f50;
  --purple-700: var(--brand-primary);
  --purple-600: #52398b;
  --purple-500: #6a51ab;
  --purple-300: #b3a6d4;
  --purple-200: #d8d0ea;
  --purple-100: #ebe7f5;
  --purple-50: #f4f1f9;
  --gold-700: #8a7420;
  --gold-500: var(--brand-support);
  --gold-300: #ebdf9e;
  --gold-100: #f8f2d4;

  /* roles */
  --color-canvas: #ffffff; /* the page itself: white, as the brief asks */
  --color-bg: var(--brand-surface); /* tinted wells and alternate bands */
  --color-surface: #ffffff;
  --color-surface-2: #eeeaf5; /* deeper wells */
  --color-ink: #1d1830;
  --color-ink-2: #4c465c;
  --color-ink-3: #6f697d;
  --color-line: #e6e2ee;
  --color-line-strong: #d2cce0;
  /* the logo's double arc (the same one the closing panel draws), as a motif for page covers */
  --motif-arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520' fill='none' stroke='rgb(221,200,87)' stroke-opacity='.62' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M460 260A200 200 0 0 0 294.7 63'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M460 260A200 200 0 0 1 294.7 457'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M446 260A186 186 0 0 0 292.3 76.8'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M446 260A186 186 0 0 1 292.3 443.2'/%3E%3C/svg%3E");

  --success: #1d7349; --success-bg: #e6f2ea;
  --warning: #83610a; --warning-bg: #f9f0d6;
  --danger: #b3261e;  --danger-bg: #f9e7e4;
  --info: #2b5797;    --info-bg: #e8eef8;

  /* legacy aliases used by a few inline styles */
  --ink: var(--color-ink); --ink-2: var(--color-ink-2); --ink-3: var(--color-ink-3);
  --line: var(--color-line); --line-strong: var(--color-line-strong);
  --surface: var(--color-surface); --surface-2: var(--color-bg); --surface-3: var(--color-surface-2);

  /* type: fluid scale */
  --font-sans: "Masar SAR", "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.845rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.955rem + 0.25vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-3xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
  --fs-display: clamp(2rem, 0.6rem + 4vw, 3.75rem);
  --lh-body: 1.75;
  --lh-head: 1.3;

  /* space / layout */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-16: 4rem;
  --section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;

  /* shape / depth: one radius family, layered soft shadows */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px;
  --radius-sm: var(--r-sm); --radius: var(--r-md); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-lg);
  --shadow-1: 0 1px 2px rgb(29 24 48 / 0.05), 0 4px 14px rgb(29 24 48 / 0.06);
  --shadow-2: 0 2px 4px rgb(29 24 48 / 0.06), 0 14px 34px rgb(45 31 80 / 0.13);
  --shadow-3: 0 4px 10px rgb(29 24 48 / 0.08), 0 28px 64px rgb(45 31 80 / 0.22);

  /* motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* drawing: fast start, long settle */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-write: cubic-bezier(0.3, 0.55, 0.2, 1); /* titles being written in */
  --dur-1: 150ms; --dur-2: 250ms; --dur-3: 420ms;
  --dur-4: 680ms; /* a line being drawn */
  --dur-5: 900ms; /* the slowest settle (arcs, images) */
  --stagger: 80ms;

  color-scheme: light;
}

/* 2 ───────────────────────────── base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[dir="ltr"] body { line-height: 1.65; }
img, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }
a { color: var(--purple-700); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a, button, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--color-ink); font-weight: 700; line-height: var(--lh-head); text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.45; }
[dir="ltr"] h1, [dir="ltr"] h2 { line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--purple-700); color: #fff; }
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-line-strong); border-radius: var(--r-full); border: 2px solid var(--color-canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--color-ink-3); }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset; -webkit-text-fill-color: var(--color-ink); }
[dir="ltr"], bdi { unicode-bidi: isolate; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--purple-700); color: #fff; border-radius: var(--r-md); transition: top var(--dur-1) var(--ease); }
.skip-link:focus { top: 12px; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.muted { color: var(--color-ink-3); }

/* Arabic never gets letter-spacing (it breaks joined letters). */
[dir="rtl"] * { letter-spacing: 0 !important; }

/* 3 ───────────────────────────── layout */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(40px, 5vw, 72px); }
.section-alt { background: var(--color-bg); }
.stack > * + * { margin-top: var(--stack, 1rem); }
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* Heading on the start side, its link on the end side sitting on the heading's own baseline;
   an optional lead paragraph runs underneath across the full width. */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; align-items: last baseline; gap: 12px 24px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.section-head > .lead, .section-head > .field-hint { grid-column: 1 / -1; max-width: 60ch; }
@media (max-width: 640px) { .section-head { grid-template-columns: minmax(0, 1fr); } .section-head > .lead { order: 1; } .section-head > .text-link { order: 2; } }
.kicker { font-size: var(--fs-sm); font-weight: 600; color: var(--purple-600); margin-bottom: 10px; }
.lead { font-size: var(--fs-lg); color: var(--color-ink-2); line-height: 1.8; }
[dir="ltr"] .lead { line-height: 1.65; }

/* 4 ───────────────────────────── components */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 1.05em; height: 1.05em; }
.icon-lg { width: 1.6em; height: 1.6em; }
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 46px; padding: 0 1.25rem; border-radius: var(--r-md); border: 1px solid transparent;
  font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled], .btn.is-loading { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--purple-700); color: #fff; }
.btn-secondary { background: var(--color-surface); color: var(--purple-700); border-color: var(--color-line-strong); }
.btn-ghost { background: transparent; color: var(--purple-700); padding-inline: 0.75rem; }
.btn-gold { background: var(--gold-500); color: var(--purple-900); }
.btn-light { background: #fff; color: var(--purple-800); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.35); }
.btn-lg { min-height: 54px; padding: 0 1.6rem; font-size: var(--fs-base); }
.btn-sm { min-height: 38px; padding: 0 0.9rem; }
.btn-block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
  .btn:active { transform: translateY(1px); box-shadow: none; }
  .btn-primary:hover { background: var(--purple-600); }
  .btn-secondary:hover { border-color: var(--purple-300); }
  .btn-ghost:hover { background: var(--purple-50); box-shadow: none; transform: none; }
  .btn-gold:hover { background: #e6d46d; }
  .btn-light:hover { background: var(--purple-50); }
  .btn-outline-light:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.6); }
}
.btn .spinner { display: none; }
.btn.is-loading .spinner { display: inline-block; }
.spinner { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin 600ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.text-link { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--purple-700); text-decoration: none; }
.text-link .icon { transition: transform var(--dur-2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover .icon { transform: translateX(4px); }
  [dir="rtl"] .text-link:hover .icon { transform: scaleX(-1) translateX(4px); }
}

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent; color: var(--color-ink-2); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.icon-btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--color-surface-2); color: var(--purple-700); } }

.badge { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.7em; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; white-space: nowrap; background: var(--color-surface-2); color: var(--color-ink-2); }
.badge-purple { background: var(--purple-100); color: var(--purple-700); }
.badge-gold { background: var(--gold-100); color: var(--gold-700); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.tag-sku { display: inline-flex; align-items: baseline; gap: 0.45em; font-size: var(--fs-xs); color: var(--color-ink-3); }
.tag-sku b { font-family: var(--font-mono); font-weight: 500; color: var(--color-ink-2); direction: ltr; unicode-bidi: isolate; }
.illustrative-tag { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; padding: 3px 10px; border-radius: var(--r-full); background: rgb(23 14 43 / 0.72); color: #fff; font-size: 0.72rem; font-weight: 500; pointer-events: none; }
.illustrative-tag.at-top { inset-block-end: auto; inset-block-start: 10px; }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.7; }
.alert .icon { margin-top: 0.2em; }
.alert-info { background: var(--info-bg); color: #1d3f70; }
.alert-success { background: var(--success-bg); color: #155a38; }
.alert-warning { background: var(--warning-bg); color: #664a05; }
.alert-danger { background: var(--danger-bg); color: #8c1d17; }

.card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--r-lg); }
.card-pad { padding: clamp(18px, 2.4vw, 28px); }
.card-plate { background: var(--color-bg); border-color: transparent; }
.section-alt .card-plate { background: var(--color-canvas); }

.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--r-full); background: var(--color-surface); color: var(--purple-700); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; border: 1px solid var(--color-line-strong); transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.chip .icon { width: 15px; height: 15px; }
.chip:hover { border-color: var(--purple-300); background: var(--purple-50); }

.breadcrumbs { font-size: var(--fs-sm); color: var(--color-ink-3); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs a { color: var(--color-ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--purple-700); text-decoration: underline; }
.breadcrumbs .sep { color: var(--color-line-strong); }

.pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 40px; }
.pagination a, .pagination span { min-width: 44px; height: 44px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink-2); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pagination .is-current { background: var(--purple-700); border-color: var(--purple-700); color: #fff; }
.pagination .is-disabled { opacity: 0.45; }
@media (hover: hover) and (pointer: fine) { .pagination a:hover { border-color: var(--purple-300); color: var(--purple-700); } }

.empty-state { display: grid; justify-items: center; gap: 8px; text-align: center; padding: clamp(40px, 6vw, 72px) 20px; color: var(--color-ink-3); }
.empty-state .icon-wrap { color: var(--purple-300); margin-bottom: 6px; }
.empty-state .icon-wrap .icon { width: 2.5rem; height: 2.5rem; stroke-width: 1.4; }
.empty-state h2, .empty-state h3 { font-size: var(--fs-lg); color: var(--color-ink); }
.empty-state p { max-width: 52ch; }
.empty-state .actions { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Toasts: enter from the bottom; exit faster than they enter. */
.toasts { position: fixed; z-index: 90; inset-block-end: 20px; inset-inline-start: 20px; display: grid; gap: 10px; width: min(380px, calc(100vw - 40px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--purple-900); color: #fff; box-shadow: var(--shadow-3); font-size: var(--fs-sm); opacity: 1; transform: translateY(0); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.toast[data-state="enter"] { opacity: 0; transform: translateY(14px); }
.toast[data-state="exit"] { opacity: 0; transform: translateY(8px); transition-duration: var(--dur-1); }
.toast .icon { color: var(--gold-500); }
.toast.is-error { background: #5b1512; }
.toast.is-error .icon { color: #ffb4ab; }
.toast a { margin-inline-start: auto; color: var(--gold-300); font-weight: 600; white-space: nowrap; }

/* Quantity stepper */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--color-line-strong); border-radius: var(--r-md); background: var(--color-surface); overflow: hidden; height: 46px; }
.qty button { width: 42px; border: 0; background: transparent; color: var(--color-ink-2); display: grid; place-items: center; transition: background-color var(--dur-1) var(--ease); }
.qty button:active { background: var(--purple-100); }
@media (hover: hover) and (pointer: fine) { .qty button:hover { background: var(--purple-50); color: var(--purple-700); } }
.qty input { width: 72px; border: 0; border-inline: 1px solid var(--color-line); text-align: center; font-variant-numeric: lining-nums tabular-nums; font-weight: 500; font-size: 1rem; -moz-appearance: textfield; background: transparent; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; background: var(--purple-50); }
.qty-sm { height: 40px; }
.qty-sm button { width: 36px; }
.qty-sm input { width: 58px; font-size: 0.95rem; }

/* 5 ───────────────────────────── header, navigation, footer */
/* Solid, never see-through: dark sections scrolling underneath must not tint it. */
/* Contact bar above the header (scrolls away; the header stays) */
.topbar { background: var(--purple-800); color: rgb(255 255 255 / 0.84); font-size: var(--fs-xs); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 36px; }
.topbar-contact { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: inherit; text-decoration: none; transition: color var(--dur-1) var(--ease); }
.topbar a:hover { color: #fff; }
.topbar .icon { width: 15px; height: 15px; color: var(--gold-300); }
.topbar :focus-visible { outline-color: var(--gold-500); }
.topbar-track { font-weight: 600; }
@media (max-width: 640px) { .topbar-email, .topbar-track { display: none; } .topbar-contact { gap: 0 14px; } }
.site-header { position: sticky; top: 0; z-index: 60; background: var(--color-canvas); border-bottom: 1px solid var(--color-line); transition: box-shadow var(--dur-2) var(--ease); view-transition-name: site-header; }
.site-header.is-scrolled { box-shadow: 0 6px 20px rgb(29 24 48 / 0.06); }
.header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 44px; width: auto; }
.main-nav { flex: 1; min-width: 0; }
.main-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--color-ink-2); font-weight: 500; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; transition: color var(--dur-1) var(--ease); }
/* Active/hover indicator: a 2px bar that grows from the reading start. */
.nav-link::after { content: ""; position: absolute; inset-inline: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--purple-700); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-2) var(--ease); }
[dir="rtl"] .nav-link::after { transform-origin: 100% 50%; /* right edge = reading start in RTL */ }
.nav-link[aria-current="page"], .nav-link.is-active { color: var(--purple-700); font-weight: 600; }
.nav-link[aria-current="page"]::after, .nav-link.is-active::after, .nav-item.is-open > .nav-link::after { transform: scaleX(1); }
.nav-link .chev { transition: transform var(--dur-2) var(--ease); }
.nav-item.is-open > .nav-link .chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover { color: var(--purple-700); } .nav-link:hover::after { transform: scaleX(1); } }
.nav-item { position: relative; }
.main-nav { position: relative; }
/* One indicator for the whole menu: it glides to the item under the pointer and back to the current
   page. Placed from measured (physical) coordinates by app.js, so it works in both directions. */
.nav-glider { position: absolute; left: 0; bottom: 4px; width: 100px; height: 2px; border-radius: 2px; background: var(--purple-700); transform-origin: 0 50%; opacity: 0; pointer-events: none; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease); }
.main-nav.has-glider .nav-link::after { display: none; }
/* Page on its way: a gold line draws along the bottom of the header from the reading start. */
.nav-progress { position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; background: var(--gold-500); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
[dir="rtl"] .nav-progress { transform-origin: 100% 50%; /* right edge = reading start in RTL */ }
.nav-progress.is-running { opacity: 1; animation: nav-progress 2.6s var(--ease-out) forwards; }
@keyframes nav-progress { 0% { transform: scaleX(0); } 40% { transform: scaleX(0.55); } 100% { transform: scaleX(0.92); } }
/* Menu items arrive one after another each time a dropdown opens (--k is set by app.js). */
.js .dropdown a:not(.btn), .js .mega-foot { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease); }
.js .nav-item.is-open > .dropdown a:not(.btn), .js .nav-item.is-open > .dropdown .mega-foot { opacity: 1; transform: none; transition-delay: calc(var(--k, 0) * 22ms + 30ms), calc(var(--k, 0) * 22ms + 30ms), 0ms; }

/* Dropdowns scale from their trigger (top), fast in, faster out. */
.dropdown {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 300px; padding: 8px;
  background: var(--color-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.98); transform-origin: top;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), visibility 0s linear var(--dur-1);
}
.nav-item.is-open > .dropdown { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s; }
.dropdown a:not(.btn) { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-1) var(--ease); }
.dropdown a:not(.btn):hover, .dropdown a:not(.btn):focus-visible { background: var(--purple-50); }
.dropdown .dd-icon { flex: none; color: var(--purple-600); margin-top: 0.2em; }
.dropdown .dd-title { display: block; font-weight: 600; font-size: var(--fs-sm); line-height: 1.5; }
.dropdown .dd-text { display: block; font-size: var(--fs-xs); color: var(--color-ink-3); line-height: 1.5; }
.mega { width: min(880px, calc(100vw - 48px)); padding: 18px; }
/* Categories in balanced columns, each followed by its sub-categories */
.mega-cols { columns: 3; column-gap: 8px; }
.mega-group { break-inside: avoid; padding-block-end: 8px; }
.dropdown a.mega-root { align-items: center; }
/* each category's icon sits on a soft tile that turns brand purple with a gold icon on hover */
.mega .mega-root .dd-icon { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; border-radius: 10px; background: var(--purple-50); color: var(--purple-700); transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.mega .mega-root .dd-icon .icon { width: 20px; height: 20px; }
.mega .mega-root:hover .dd-icon, .mega .mega-root:focus-visible .dd-icon { background: var(--purple-700); color: var(--gold-500); }
.dropdown a.mega-sub { display: flex; align-items: center; gap: 9px; padding: 6px 12px; padding-inline-start: 22px; font-size: var(--fs-sm); color: var(--color-ink-2); line-height: 1.55; }
.dropdown a.mega-sub .icon { width: 18px; height: 18px; color: var(--purple-600); opacity: 0.75; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease-out); }
.dropdown a.mega-sub:hover, .dropdown a.mega-sub:focus-visible { color: var(--purple-700); }
.dropdown a.mega-sub:hover .icon, .dropdown a.mega-sub:focus-visible .icon { opacity: 1; transform: scale(1.08); }
@media (max-width: 1100px) { .mega-cols { columns: 2; } }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--color-line); }
.mega-foot p { font-size: var(--fs-sm); color: var(--color-ink-3); }

.header-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.lang-switch { display: inline-grid; place-items: center; height: 44px; min-width: 44px; padding: 0 8px; border-radius: var(--r-md); color: var(--color-ink-2); font-weight: 600; font-size: var(--fs-sm); line-height: 1; text-decoration: none; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.lang-switch:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .lang-switch:hover { background: var(--color-surface-2); color: var(--purple-700); } }
.quote-link { position: relative; }
/* The list and the cart say what they are next to their icon on wide screens (the count stays on the icon). */
.hdr-label { display: none; }
@media (min-width: 1360px) {
  .icon-btn.quote-link, .icon-btn.cart-link { width: auto; gap: 6px; padding-inline: 10px 12px; grid-auto-flow: column; }
  .hdr-label { display: inline; font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-2); }
  .quote-link .count-badge, .cart-link .count-badge { position: static; margin-inline-start: 2px; }
}
.count-badge { position: absolute; top: 2px; inset-inline-end: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-full); background: var(--gold-500); color: var(--purple-900); font-size: 0.72rem; font-weight: 700; line-height: 19px; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.count-badge.is-bumping { animation: bump 380ms var(--ease); }
/* The photo that flies into the quote list when a product is added (see flyToQuote in app.js). */
.fly-ghost { position: fixed; z-index: 95; margin: 0; padding: 8px; object-fit: contain; background: var(--color-surface); border-radius: var(--r-md); box-shadow: var(--shadow-2); pointer-events: none; will-change: transform, opacity; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.menu-toggle { display: none; }

@media (max-width: 1100px) {
  .main-nav { display: none; }
  .menu-toggle { display: inline-grid; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .brand img { height: 38px; }
  .header-cta { display: none; }
  .lang-switch { display: none; }
}

/* Mobile drawer (slides from the inline-end edge) */
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--purple-950) 50%, transparent); opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
.drawer-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease), visibility 0s; }
.drawer { position: fixed; z-index: 71; top: 0; bottom: 0; inset-inline-end: 0; width: min(380px, 88vw); height: 100vh; height: 100dvh; background: var(--color-surface); display: flex; flex-direction: column; box-shadow: var(--shadow-3); transform: translateX(100%); transition: transform 320ms var(--ease-drawer); visibility: hidden; }
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.is-open { transform: translateX(0); visibility: visible; }
.js .drawer-nav > li, .js .drawer-foot > * { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out); }
.js .drawer.is-open .drawer-nav > li, .js .drawer.is-open .drawer-foot > * { opacity: 1; transform: none; transition-delay: calc(var(--k, 0) * 40ms + 120ms); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--color-line); }
.drawer-head img { height: 34px; width: auto; }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.drawer-nav { list-style: none; }
.drawer-nav a, .drawer-nav summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 4px; border-bottom: 1px solid var(--color-line); color: var(--color-ink); text-decoration: none; font-weight: 500; cursor: pointer; list-style: none; }
.drawer-nav summary::-webkit-details-marker { display: none; }
.drawer-nav .chev { transition: transform var(--dur-2) var(--ease); }
.drawer-nav details[open] summary .chev { transform: rotate(180deg); }
.drawer-nav .sub a { padding: 10px 14px; font-weight: 400; color: var(--color-ink-2); }
.drawer-nav .sub a.sub-child { min-height: 42px; padding-block: 8px; padding-inline-start: 30px; font-size: var(--fs-sm); color: var(--color-ink-3); }
.drawer-nav .sub a { display: flex; align-items: center; gap: 10px; }
.drawer-nav .sub a .icon { flex: none; width: 18px; height: 18px; color: var(--purple-600); }
.drawer-nav .sub a.sub-child .icon { width: 16px; height: 16px; opacity: 0.75; }
.drawer-foot { padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-line); display: grid; gap: 10px; }

/* Search overlay */
.search-panel { position: fixed; z-index: 80; inset: 0; display: grid; align-items: start; justify-items: center; padding: calc(var(--header-h) + 12px) 16px 16px; background: color-mix(in srgb, var(--purple-950) 45%, transparent); opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
.search-panel.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease), visibility 0s; }
.search-box { width: min(720px, 100%); background: var(--color-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; transform: translateY(-8px) scale(0.985); transition: transform var(--dur-2) var(--ease); }
.search-panel.is-open .search-box { transform: none; }
.search-field { display: flex; align-items: center; gap: 10px; padding-block: 8px; padding-inline: 16px 10px; border-bottom: 1px solid var(--color-line); }
.search-field .icon { color: var(--color-ink-3); }
.search-field input { flex: 1; height: 50px; border: 0; background: transparent; font-size: max(16px, 1.08rem); min-width: 0; }
.search-field input:focus { outline: none; }
.suggestions { max-height: min(60vh, 460px); overflow-y: auto; }
.suggestion { display: flex; align-items: center; gap: 14px; padding: 10px 16px; color: var(--color-ink); text-decoration: none; }
.suggestion[aria-selected="true"], .suggestion:hover { background: var(--purple-50); }
.suggestion img, .suggestion .ph { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: contain; background: var(--color-bg); flex: none; mix-blend-mode: multiply; }
.suggestion .s-name { font-weight: 600; font-size: var(--fs-sm); line-height: 1.45; display: block; }
.suggestion .s-meta { display: flex; gap: 12px; align-items: center; font-size: var(--fs-xs); color: var(--color-ink-3); }
.search-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: var(--color-bg); border-top: 1px solid var(--color-line); font-size: var(--fs-sm); color: var(--color-ink-3); }
.search-empty { padding: 26px 16px; text-align: center; color: var(--color-ink-3); font-size: var(--fs-sm); }

/* Closing call: the page ends on the brand's deep purple field, bookending the one near the top. */
.closing { padding-block: 0 var(--section-y); }
.closing-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 26px; justify-items: start; padding: clamp(28px, 5vw, 64px); border-radius: var(--r-lg); background: var(--purple-800); color: #fff; box-shadow: var(--shadow-2); }
.closing-panel > div:not(.closing-actions) { max-width: min(62%, 720px); }
.closing h2 { font-size: var(--fs-3xl); color: #fff; }
.closing .lead { margin-top: 14px; max-width: 58ch; color: rgb(255 255 255 / 0.78); }
.closing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.closing .btn-outline-light { background: var(--purple-800); }
/* Two concentric arcs on the far side of the panel, opening from their midpoint (mirrored in LTR). */
.closing-rings { position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-end: -150px; width: 520px; height: 520px; margin-block-start: -260px; pointer-events: none; }
[dir="ltr"] .closing-rings { transform: scaleX(-1); }
.closing-rings path { fill: none; stroke: rgb(221 200 87 / 0.45); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1 2; }
.reveal-ready .closing-panel:not(.is-visible) .closing-rings path { stroke-dashoffset: 1; }
.reveal-ready .closing-panel.is-visible .closing-rings path { animation: bp-draw 1100ms var(--ease-out) 260ms both; }
.reveal-ready .closing-panel.is-visible .closing-rings path:nth-child(n+3) { animation-delay: 420ms; }
@media (max-width: 900px) {
  .closing-panel > div:not(.closing-actions) { max-width: none; }
  .closing-rings { inset-block-start: auto; inset-block-end: -300px; inset-inline-end: -330px; margin-block-start: 0; }
}

.site-footer { border-top: 1px solid var(--color-line); padding-top: clamp(48px, 6vw, 72px); color: var(--color-ink-2); font-size: var(--fs-sm); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); padding-bottom: 40px; }
.footer-brand img { height: 46px; width: auto; margin-bottom: 16px; }
.footer-brand p { max-width: 38ch; color: var(--color-ink-3); line-height: 1.8; }
.footer-col h2 { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 14px; color: var(--color-ink); }
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { color: var(--color-ink-2); text-decoration: none; }
.footer-col a:hover { color: var(--purple-700); text-decoration: underline; }
.footer-col ul + ul { margin-top: 9px; }
.contact-line { display: flex; align-items: center; gap: 10px; }
.contact-line .icon { color: var(--purple-500); }
.socials { display: flex; gap: 8px; margin-top: 16px; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--color-line-strong); color: var(--color-ink-2); background: var(--color-surface); transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.socials a:hover { color: var(--purple-700); border-color: var(--purple-300); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 20px; border-top: 1px solid var(--color-line); font-size: var(--fs-xs); color: var(--color-ink-3); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-bottom a { color: var(--color-ink-3); text-decoration: none; }
.footer-bottom a:hover { color: var(--purple-700); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }

.wa-float { position: fixed; z-index: 55; inset-block-end: max(20px, env(safe-area-inset-bottom)); inset-inline-end: 20px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #1f9d57; color: #fff; box-shadow: var(--shadow-2); transition: transform var(--dur-1) var(--ease); }
.wa-float:active { transform: scale(0.95); }
.wa-float .icon { width: 28px; height: 28px; }

/* 6 ───────────────────────────── home */
.hero { padding-block: clamp(28px, 4.5vw, 64px) clamp(48px, 6vw, 88px); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-copy h1 { font-size: var(--fs-display); line-height: 1.24; margin-bottom: 22px; }
[dir="ltr"] .hero-copy h1 { line-height: 1.08; letter-spacing: -0.025em; }
.hero-copy h1 span { display: block; }
.hero-accent { color: var(--purple-600); }
.hero-copy .lead { max-width: 54ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 18px; }
/* Company figures (only those the team has entered) */
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.hero-facts div { display: grid; gap: 2px; }
.hero-facts dt { font-size: var(--fs-xs); color: var(--color-ink-3); }
.hero-facts dd { margin: 0; font-weight: 700; color: var(--purple-700); font-variant-numeric: lining-nums tabular-nums; }
.hero-search { margin-top: 28px; display: flex; align-items: center; gap: 8px; max-width: 520px; padding: 5px; padding-inline-start: 14px; border: 1px solid var(--color-line-strong); border-radius: var(--r-md); background: var(--color-surface); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.hero-search:focus-within { border-color: var(--purple-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple-500) 20%, transparent); }
.hero-search .icon { color: var(--color-ink-3); }
.hero-search input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: max(16px, 0.98rem); }
.hero-search input:focus { outline: none; }
.hero-search input, .picker-search input { text-overflow: ellipsis; }
.hero-figure { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 4.3; background: var(--color-surface-2); box-shadow: var(--shadow-2); }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Catalogue plate: real products standing on shelves drawn with the brand's double hairline; the
   shelves, the upright and the quarter arc together echo the geometry of the logo mark.
   One composition in both languages: product photos cannot be mirrored, so the plate always lays
   out right-to-left, and no line ever runs through a product. */
.hero-visual { display: grid; gap: 18px; width: 100%; max-width: 600px; margin-inline: auto; }
.plate { --shelf-low: 12%; --shelf-high: 55%; --upright: 70%; --stroke: 7px; position: relative; width: 100%; aspect-ratio: 1 / 1.02; direction: rtl; }
/* Backdrop first in the DOM, so no z-index is needed and product photos can multiply onto it. */
.plate-arc { position: absolute; inset-block-end: var(--shelf-low); inset-inline-end: calc(100% - var(--upright)); width: 60%; aspect-ratio: 1; background: var(--purple-100); border-start-start-radius: 100%; }
.plate-line { position: absolute; pointer-events: none; }
.plate-shelf-low, .plate-shelf-a, .plate-shelf-b { height: var(--stroke); border-block: 2px solid var(--gold-500); }
.plate-shelf-low { inset-inline: 0; inset-block-end: var(--shelf-low); }
.plate-shelf-a { inset-inline-start: 0; width: 23%; inset-block-end: var(--shelf-high); }                       /* under figure 2 only */
.plate-shelf-b { inset-inline-start: var(--upright); inset-inline-end: 0; inset-block-end: var(--shelf-high); } /* from the upright out */
.plate-upright { inset-block: 0 var(--shelf-low); inset-inline-start: var(--upright); width: var(--stroke); border-inline: 2px solid var(--gold-500); }
/* White photo backgrounds disappear into the paper: the whole item multiplies (it is its own stacking context while it animates). */
.plate-item { position: absolute; display: block; text-decoration: none; color: var(--color-ink-2); mix-blend-mode: multiply; }
.plate-item img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform var(--dur-2) var(--ease); }
/* A soft contact shadow where each product meets its shelf; it stays on the shelf when the product is lifted. */
.plate-item::after { content: ""; position: absolute; inset-inline: 27%; inset-block-end: -5px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgb(29 24 48 / 0.2), transparent); transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); pointer-events: none; }
.plate-item[data-slot="1"] { inset-inline-start: 25%; inset-block-end: calc(var(--shelf-low) + var(--stroke)); width: 43%; height: 80%; }
.plate-item[data-slot="2"] { inset-inline-start: 0; inset-block-end: calc(var(--shelf-high) + var(--stroke)); width: 22%; height: 38%; }
.plate-item[data-slot="3"] { inset-inline-start: 3%; inset-block-end: calc(var(--shelf-low) + var(--stroke)); width: 16%; height: 23%; }
.plate-item[data-slot="4"] { inset-inline-end: 1%; inset-block-end: calc(var(--shelf-low) + var(--stroke)); width: 25%; height: 20%; }
.plate-item[data-slot="5"] { inset-inline-end: 2%; inset-block-end: calc(var(--shelf-high) + var(--stroke)); width: 24%; height: 27%; }
/* Figure numbers sit centred under each product, just below its shelf. */
.plate-caption { margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--color-ink-3); }
.plate-no, .pl-no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--purple-300); background: var(--color-canvas); color: var(--purple-700); font-size: 0.72rem; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.plate-no { position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--stroke) + 7px); margin-inline: auto; }
.plate-item.is-hot img { transform: translateY(-6px); }
.plate-item.is-hot::after { transform: scaleX(0.8); opacity: 0.55; }
.plate-item.is-hot .plate-no, .plate-legend a.is-hot .pl-no { background: var(--purple-700); border-color: var(--purple-700); color: #fff; }

/* The legend under the plate names every figure (in the page's own language and direction). */
.plate-legend { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; }
.plate-legend a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; margin-inline: -8px; border-radius: var(--r-md); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-1) var(--ease); }
.plate-legend a.is-hot { background: var(--purple-50); }
.pl-no { flex: none; }
.pl-text { display: grid; min-width: 0; line-height: 1.4; }
.pl-name { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sku { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-ink-3); text-align: start; }
[dir="rtl"] .pl-sku { text-align: right; }

/* Drafting entrance, once per load: the shelves and the upright are drawn, the arc opens from its
   centre like a compass, then the products are set down on the shelves one by one. (The plate is
   always laid out right-to-left, so these origins are physical on purpose.) */
.plate-shelf-low, .plate-shelf-a, .plate-shelf-b { transform-origin: 100% 50%; }
.plate-upright { transform-origin: 50% 100%; }
.plate-arc { transform-origin: 0 100%; /* the arc's centre: where the upright meets the lower shelf */ }
.js .plate-shelf-low { animation: draw-x var(--dur-4) var(--ease-out) calc(var(--arrive, 0ms) + 80ms) both; }
.js .plate-upright { animation: draw-y var(--dur-4) var(--ease-out) calc(var(--arrive, 0ms) + 260ms) both; }
.js .plate-shelf-a, .js .plate-shelf-b { animation: draw-x var(--dur-4) var(--ease-out) calc(var(--arrive, 0ms) + 420ms) both; }
.js .plate-arc { animation: arc-open var(--dur-5) var(--ease-out) calc(var(--arrive, 0ms) + 380ms) both; }
.js .plate-item { animation: set-down var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--arrive, 0ms) + 700ms + var(--i, 0) * var(--stagger)); }
.js .plate-legend { animation: rise var(--dur-3) var(--ease) calc(var(--arrive, 0ms) + 1100ms) both; }
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes arc-open { from { transform: scale(0); } }
@keyframes set-down { from { opacity: 0; transform: translateY(-16px); } }
@media (hover: hover) and (pointer: fine) {
  .plate-item:hover img { transform: translateY(-6px); }
  .plate-item:hover::after { transform: scaleX(0.8); opacity: 0.55; }
  .plate-legend a:hover { background: var(--purple-50); }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 520px; margin-top: 8px; }
  .hero-figure { aspect-ratio: 16 / 11; }
}
@media (max-width: 560px) {
  .plate { --shelf-low: 10%; --stroke: 6px; aspect-ratio: 1 / 0.98; }
  .plate-no, .pl-no { width: 20px; height: 20px; font-size: 0.66rem; }
  .plate-legend { gap: 0 14px; }
  .pl-name { white-space: normal; }
  .hero { padding-bottom: 36px; }
}

/* Three ways to work with us: one primary field, two supporting panels */
.paths { padding-bottom: var(--section-y); }
.paths-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.path { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--color-bg); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-2) var(--ease); }
.path h3 { font-size: var(--fs-xl); font-weight: 700; }
.path p { color: var(--color-ink-3); font-size: var(--fs-sm); line-height: 1.8; max-width: 52ch; }
.path-cta { display: inline-flex; align-items: center; gap: 0.4em; margin-top: auto; padding-top: 10px; font-weight: 600; font-size: var(--fs-sm); color: var(--purple-700); }
.path-cta .icon { transition: transform var(--dur-2) var(--ease); }
.path-quote { grid-row: 1 / span 2; justify-content: flex-end; min-height: 340px; overflow: hidden; isolation: isolate; background: var(--purple-800); color: #fff; }
.path-quote h3 { color: #fff; font-size: var(--fs-2xl); }
.path-quote p { color: rgb(255 255 255 / 0.78); font-size: var(--fs-base); }
.path-quote .path-cta { margin-top: 8px; color: var(--gold-300); }
.path-types { font-family: var(--font-mono); font-size: var(--fs-xs); color: rgb(255 255 255 / 0.6); text-align: start; }
[dir="rtl"] .path-types { text-align: right; }
/* The logo's double-stroke arc, drawn large and quiet in the panel's far corner. */
.path-quote { --panel: var(--purple-800); }
.path-arc { position: absolute; z-index: -1; inset-block-start: -34%; inset-inline-end: -16%; width: 74%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgb(221 200 87 / 0.42); box-shadow: inset 0 0 0 9px var(--panel), inset 0 0 0 10.5px rgb(221 200 87 / 0.42); transition: box-shadow var(--dur-2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .path:not(.path-quote):hover { background: var(--color-surface-2); }
  .path-quote:hover { --panel: var(--purple-900); background: var(--panel); }
  .path:hover .path-cta .icon { transform: translateX(4px); }
  [dir="rtl"] .path:hover .path-cta .icon { transform: scaleX(-1) translateX(4px); }
}
@media (max-width: 820px) {
  .paths-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .path-quote { grid-row: auto; min-height: 280px; }
}

/* Sector switcher: an accordion list beside a photo stage of the same height (no dead space). */
.switcher { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.switcher-list { display: grid; align-content: start; border-block-start: 1px solid var(--color-line); }
.sw-item { position: relative; border-block-end: 1px solid var(--color-line); }
.sw-item::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; background: var(--purple-700); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out); }
[dir="rtl"] .sw-item::after { transform-origin: 100% 50%; /* right edge = reading start in RTL */ }
.sw-item.is-open::after { transform: scaleX(1); }
.sw-head { margin: 0; font: inherit; }
.sw-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; border: 0; background: none; text-align: start; color: var(--color-ink-3); cursor: pointer; }
.st-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.st-name { font-size: var(--fs-xl); font-weight: 700; line-height: 1.35; color: var(--color-ink-2); transition: color var(--dur-1) var(--ease); }
.st-tagline { font-size: var(--fs-sm); line-height: 1.6; }
.sw-chev { flex: none; color: var(--color-line-strong); transition: transform var(--dur-3) var(--ease-out), color var(--dur-1) var(--ease); }
.sw-item.is-open .st-name { color: var(--purple-700); }
.sw-item.is-open .sw-chev { transform: rotate(180deg); color: var(--purple-600); }
@media (hover: hover) and (pointer: fine) { .sw-trigger:hover .st-name { color: var(--purple-700); } }
/* The body opens with the grid-rows technique (no height measuring); closed bodies are hidden from focus. */
.sw-body { display: grid; grid-template-rows: 1fr; }
.sw-body-inner { min-height: 0; overflow: hidden; display: grid; gap: 14px; justify-items: start; }
.sw-body-inner > p { color: var(--color-ink-2); max-width: 60ch; }
.sw-body-inner > .text-link { margin-bottom: 22px; }
.js .sw-body { transition: grid-template-rows var(--dur-3) var(--ease-out), visibility 0s linear 0s; }
.js .sw-item:not(.is-open) .sw-body { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
.sp-cats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.sw-photo { position: relative; margin: 0; overflow: hidden; background: var(--color-surface-2); }
.sw-photo img { width: 100%; height: 100%; object-fit: cover; }
.sw-photo-inline { display: none; }
.switcher-stage { position: relative; min-height: 24rem; border-radius: var(--r-lg); overflow: hidden; background: var(--color-surface-2); }
.switcher-stage .sw-photo { position: absolute; inset: 0; z-index: 0; clip-path: inset(0 0 0 100%); transition: clip-path 0s linear 950ms; }
[dir="ltr"] .switcher-stage .sw-photo { clip-path: inset(0 100% 0 0); }
.switcher-stage .sw-photo.was-active { z-index: 1; }
.switcher-stage .sw-photo.is-active { z-index: 2; clip-path: inset(0); transition: clip-path 950ms var(--ease-write); }
.switcher-stage .sw-photo.is-active img { animation: img-settle var(--dur-5) var(--ease-out) both; }
@keyframes img-settle { from { transform: scale(1.05); } }
@media (max-width: 900px) {
  .switcher { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .switcher-stage { display: none; }
  .switcher-list { gap: 16px; border: 0; }
  .sw-item { border: 1px solid var(--color-line); border-radius: var(--r-lg); background: var(--color-surface); overflow: hidden; }
  .sw-item::after, .sw-chev { display: none; }
  .sw-trigger { padding: 18px 18px 6px; cursor: default; }
  .js .sw-item:not(.is-open) .sw-body { grid-template-rows: 1fr; visibility: visible; }
  .sw-body-inner { padding: 0 18px 20px; }
  .sw-body-inner > .text-link { margin-bottom: 0; }
  .sw-photo-inline { display: block; aspect-ratio: 16 / 9; }
}

/* Catalogue index: a ruled directory, not a wall of tiles. Each category has a line icon from the
   site's own set (product photos made inconsistent, sometimes invisible icons). The last row never
   leaves an empty cell: a final item on its own stretches across what is left of the row. */
.cat-index { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.4vw, 48px); }
.cat-index li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.cat-index li:last-child:nth-child(3n + 2) { grid-column: span 2; }
/* A stretched last row keeps its content together at the start; only its rule runs to the end. */
.cat-index li:last-child:is(:nth-child(3n + 1), :nth-child(3n + 2)) a { grid-template-columns: 48px auto auto 20px; justify-content: start; }
.cat-index a { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 20px; align-items: center; gap: 14px; min-height: 80px; padding: 14px 2px; border-block-end: 1px solid var(--color-line); color: var(--color-ink); text-decoration: none; }
/* On hover the row's rule is redrawn in purple from the reading start, like the nav indicator. */
.cat-index a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; background: var(--purple-700); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out); }
[dir="rtl"] .cat-index a::after { transform-origin: 100% 50%; /* right edge = reading start in RTL */ }
.ci-icon { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--purple-50); color: var(--purple-600); transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.ci-icon .icon { width: 24px; height: 24px; stroke-width: 1.6; }
.ci-name { font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; transition: color var(--dur-1) var(--ease); }
.ci-count { font-size: var(--fs-sm); color: var(--color-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ci-arrow { color: var(--color-line-strong); transition: color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cat-index a:hover .ci-name { color: var(--purple-700); }
  .cat-index a:hover::after { transform: scaleX(1); }
  .cat-index a:hover .ci-icon { background: var(--purple-700); color: #fff; }
  .cat-index a:hover .ci-arrow { color: var(--purple-600); transform: translateX(4px); }
  [dir="rtl"] .cat-index a:hover .ci-arrow { transform: scaleX(-1) translateX(4px); }
}
@media (max-width: 1100px) {
  .cat-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-index li:last-child:nth-child(n) { grid-column: auto; }
  .cat-index li:last-child:nth-child(n) a { grid-template-columns: 48px minmax(0, 1fr) auto 20px; justify-content: normal; }
  .cat-index li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cat-index li:last-child:nth-child(odd) a { grid-template-columns: 48px auto auto 20px; justify-content: start; }
}
@media (max-width: 760px) {
  .cat-index { grid-template-columns: minmax(0, 1fr); }
  .cat-index li:last-child:nth-child(odd) { grid-column: auto; }
  .cat-index li:last-child:nth-child(n) a { grid-template-columns: 48px minmax(0, 1fr) auto 20px; justify-content: normal; }
  .cat-index a { min-height: 68px; }
}

/* Steps as a route (مسار): stations joined by one quiet line. The purple line fills the route as the
   reader moves down the list (drawn exactly over it, same width), and every station it reaches turns solid. */
.steps-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.steps-intro { position: sticky; top: calc(var(--header-h) + 28px); }
.steps-intro .lead { margin-top: 12px; }
.steps-intro .btn { margin-top: 26px; }
.steps { --station: 44px; --station-bg: var(--color-canvas); list-style: none; }
.section-alt .steps { --station-bg: var(--color-bg); }
.steps li { position: relative; display: grid; grid-template-columns: var(--station) minmax(0, 1fr); gap: 20px; padding-block-end: clamp(26px, 3vw, 40px); }
.steps li:last-child { padding-block-end: 0; }
.steps li:not(:last-child)::before, .steps li:not(:last-child)::after { content: ""; position: absolute; inset-block: calc(var(--station) + 6px) 6px; pointer-events: none; }
.steps li:not(:last-child)::before, .steps li:not(:last-child)::after { inset-inline-start: calc(var(--station) / 2 - 1px); width: 2px; border-radius: 2px; }
.steps li:not(:last-child)::before { background: var(--color-line-strong); }
.steps li:not(:last-child)::after { background: var(--purple-700); transform: scaleY(var(--seg, 0)); transform-origin: 50% 0; }
.step-n { position: relative; display: grid; place-items: center; width: var(--station); height: var(--station); border-radius: 50%; background: var(--station-bg); border: 1.5px solid var(--color-line-strong); font-size: var(--fs-base); font-weight: 600; color: var(--purple-600); font-variant-numeric: tabular-nums; transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-3) var(--ease); }
.steps li.is-reached .step-n { background: var(--purple-700); border-color: var(--purple-700); color: #fff; }
.steps li:last-child.is-reached .step-n { box-shadow: 0 0 0 4px var(--station-bg), 0 0 0 5.5px var(--gold-500); /* arrival: the logo's double ring */ }
.steps li > div { padding-top: 8px; }
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--color-ink-3); font-size: var(--fs-sm); line-height: 1.8; }
@media (max-width: 860px) { .steps-wrap { grid-template-columns: minmax(0, 1fr); } .steps-intro { position: static; } }

/* Fit-out band */
.fitout-band { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .fitout-band { grid-template-columns: minmax(0, 1fr); } }

/* Blueprint: an illustrative floor plan on drafting paper, drawn line by line (once). Walls first,
   then the dimensions, the furniture and the fixed equipment; the door swings in the logo's gold arc,
   and the numbered points arrive last. */
.blueprint { position: relative; margin: 0; border-radius: var(--r-lg); background: var(--color-bg); overflow: hidden; }
.section-alt .blueprint { background: var(--color-canvas); }
.js .blueprint[data-blueprint="load"] { --bp-at: var(--arrive, 0ms); }
.blueprint svg { width: 100%; height: auto; }
.bp-grid { fill: none; stroke: color-mix(in srgb, var(--purple-700) 8%, transparent); stroke-width: 0.6; }
.bp-wall, .bp-thin, .bp-dim, .bp-furn, .bp-arc, .bp-fix { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bp-wall { stroke: var(--purple-700); stroke-width: 2; stroke-linecap: square; }
.bp-thin { stroke: var(--purple-700); stroke-width: 1.1; }
.bp-dim { stroke: var(--color-ink-3); stroke-width: 0.9; }
.bp-furn { stroke: var(--purple-500); stroke-width: 1.4; }
.bp-fix { stroke: var(--purple-300); stroke-width: 1.2; }
.bp-arc { stroke: var(--gold-500); stroke-width: 2.2; }
.bp-draw { stroke-dasharray: 1 2; }
.bp-mark { transform-box: fill-box; transform-origin: center; }
.bp-mark circle { fill: var(--purple-700); transition: fill var(--dur-2) var(--ease); }
.bp-mark text { fill: #fff; font-size: 15px; font-weight: 600; text-anchor: middle; transition: fill var(--dur-2) var(--ease); }
[data-bp-zone] { transition: opacity var(--dur-2) var(--ease); }
.js .blueprint[data-blueprint="load"] .bp-draw, .blueprint.is-drawn .bp-draw { animation: bp-draw var(--dur-4) var(--ease-out) both; animation-delay: calc(var(--bp-at, 0ms) + var(--d, 0) * var(--stagger) + 120ms); }
.js .blueprint[data-blueprint="load"] .bp-fade, .blueprint.is-drawn .bp-fade { animation: fade-in var(--dur-3) var(--ease) both; animation-delay: calc(var(--bp-at, 0ms) + var(--d, 0) * var(--stagger) + 120ms); }
.js .blueprint[data-blueprint="load"] .bp-mark, .blueprint.is-drawn .bp-mark { animation: mark-pop var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--bp-at, 0ms) + var(--d, 0) * var(--stagger) + 120ms); }
.blueprint.is-waiting .bp-draw { stroke-dashoffset: 1; }
.blueprint.is-waiting .bp-fade, .blueprint.is-waiting .bp-mark { opacity: 0; }
@keyframes bp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes mark-pop { from { opacity: 0; transform: scale(0.4); } }
/* A point in the text brings its zone forward and quiets the rest of the drawing. */
.blueprint[data-focus] [data-bp-zone] { opacity: 0.3; }
.blueprint[data-focus="1"] [data-bp-zone="1"], .blueprint[data-focus="2"] [data-bp-zone="2"], .blueprint[data-focus="3"] [data-bp-zone="3"] { opacity: 1; }
.blueprint[data-focus="1"] [data-bp-mark="1"] circle, .blueprint[data-focus="2"] [data-bp-mark="2"] circle, .blueprint[data-focus="3"] [data-bp-mark="3"] circle { fill: var(--gold-500); }
.blueprint[data-focus="1"] [data-bp-mark="1"] text, .blueprint[data-focus="2"] [data-bp-mark="2"] text, .blueprint[data-focus="3"] [data-bp-mark="3"] text { fill: var(--purple-900); }

.bp-points { list-style: none; display: grid; gap: 4px; margin-top: 22px; }
.bp-points li { display: flex; gap: 14px; align-items: center; min-height: 48px; padding: 6px 10px; margin-inline: -10px; border-radius: var(--r-md); font-weight: 500; cursor: default; transition: background-color var(--dur-1) var(--ease); }
.bp-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--purple-700); color: #fff; font-variant-numeric: lining-nums tabular-nums; font-size: var(--fs-sm); font-weight: 600; transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.bp-points li.is-focused { background: var(--purple-50); }
.bp-points li.is-focused .bp-num { background: var(--gold-500); color: var(--purple-900); }
@media (hover: hover) and (pointer: fine) { .bp-points li:hover { background: var(--purple-50); } .bp-points li:hover .bp-num { background: var(--gold-500); color: var(--purple-900); } }

/* Closing band variant used inside pages (sectors, services) */
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); background: var(--color-bg); }
.cta-band h2 { font-size: var(--fs-xl); }
.cta-band p { color: var(--color-ink-2); margin-top: 8px; max-width: 58ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .cta-band { grid-template-columns: minmax(0, 1fr); } }

.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.logo-wall figure { margin: 0; height: 88px; display: grid; place-items: center; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--r-md); background: var(--color-surface); }
.logo-wall img { max-height: 52px; width: auto; filter: grayscale(1); opacity: 0.8; transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
.logo-wall figure:hover img { filter: none; opacity: 1; }
.quote-card { margin: 0; padding: 26px; border-radius: var(--r-lg); background: var(--color-bg); }
.quote-card blockquote { margin: 0 0 18px; font-size: var(--fs-base); line-height: 1.85; color: var(--color-ink-2); }
.quote-card figcaption { font-size: var(--fs-sm); color: var(--color-ink-3); }
.quote-card figcaption b { display: block; color: var(--color-ink); }

/* 7 ───────────────────────────── catalog */
.page-head { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(24px, 3.5vw, 44px) clamp(28px, 3.4vw, 48px); background: var(--color-bg); }
/* The logo's double arc stands in the far corner of every cover and is swept in like a compass once the
   page is on screen. Covers that carry a photo or a drawing leave it out. */
@property --pa-sweep { syntax: '<angle>'; inherits: false; initial-value: 172deg; }
.page-head::before { content: ""; position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-end: -150px; width: 440px; aspect-ratio: 1; translate: 0 -50%; background: var(--motif-arc) center / contain no-repeat; pointer-events: none;
  -webkit-mask-image: conic-gradient(from 5deg at 50% 50%, #000 var(--pa-sweep), #0000 calc(var(--pa-sweep) + 0.5deg));
  mask-image: conic-gradient(from 5deg at 50% 50%, #000 var(--pa-sweep), #0000 calc(var(--pa-sweep) + 0.5deg)); }
[dir="ltr"] .page-head::before { scale: -1 1; }
.js .page-head::before { animation: arc-sweep 1.5s var(--ease-write) calc(var(--arrive, 0ms) + 420ms) both; }
@keyframes arc-sweep { from { --pa-sweep: 0deg; } to { --pa-sweep: 172deg; } }
.page-head.page-head-split::before, .page-head:has(.split-figure)::before { display: none; }
@media (max-width: 640px) { .page-head::before { width: 300px; inset-inline-end: -175px; } }
.page-head .blueprint { background: var(--color-canvas); }
/* Every inner page draws its baseline as it arrives, the same drafting gesture as the home page. */
.page-head::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; background: var(--gold-500); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
[dir="rtl"] .page-head::after { transform-origin: 100% 50%; /* right edge = reading start in RTL */ }
.js .page-head::after { animation: page-rule 1.4s var(--ease-out) calc(var(--arrive, 0ms) + 260ms) both; }
@keyframes page-rule { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.page-head h1 { margin-top: 14px; }
.page-head .kicker { margin-top: 16px; margin-bottom: 0; }
.page-head .kicker + h1 { margin-top: 6px; }
.page-head .lead { margin-top: 12px; max-width: 70ch; }
/* Page head with a drawing beside the title (design & fit-out) */
.page-head-split > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.page-head-split .blueprint { max-width: 620px; justify-self: end; width: 100%; }
@media (max-width: 900px) { .page-head-split > .container { grid-template-columns: minmax(0, 1fr); } .page-head-split .blueprint { justify-self: stretch; } }
.page-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.result-count { font-size: var(--fs-sm); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.catalog-head-aside { display: grid; justify-items: end; gap: 10px; }
.catalog-files { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .catalog-head-aside { justify-items: start; } }
.section-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }

.catalog { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); padding-block: clamp(24px, 3vw, 40px) var(--section-y); align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 8px; max-height: calc(100vh - var(--header-h) - 40px); max-height: calc(100dvh - var(--header-h) - 40px); overflow-y: auto; padding-inline-end: 4px; scrollbar-width: thin; }
.filter-group { border-bottom: 1px solid var(--color-line); padding-block: 10px 14px; }
.filter-group > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 700; font-size: var(--fs-sm); padding-block: 6px; list-style: none; }
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group[open] > summary .chev { transform: rotate(180deg); }
.filter-group .chev { transition: transform var(--dur-2) var(--ease); color: var(--color-ink-3); }
.filter-list { list-style: none; display: grid; gap: 2px; margin-top: 8px; }
.filter-list a, .filter-check { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--color-ink-2); text-decoration: none; font-size: var(--fs-sm); line-height: 1.5; cursor: pointer; }
.filter-list a:hover, .filter-check:hover { background: var(--color-surface-2); color: var(--color-ink); }
.filter-list a.is-active { background: var(--purple-100); color: var(--purple-700); font-weight: 600; }
.filter-list .count, .filter-check .count { margin-inline-start: auto; font-variant-numeric: lining-nums tabular-nums; font-size: 0.8rem; color: var(--color-ink-3); }
.filter-list .sub { padding-inline-start: 22px; }
.filter-check input { width: 18px; height: 18px; accent-color: var(--purple-700); flex: none; }
.filters-actions { display: grid; gap: 8px; padding-top: 12px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.toolbar .active-filters { flex: 1; }
.view-switch { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--color-bg); }
.view-switch .icon-btn { width: 38px; height: 38px; border-radius: var(--r-sm); color: var(--color-ink-3); }
.view-switch .icon-btn[aria-pressed="true"] { background: var(--color-surface); color: var(--purple-700); box-shadow: 0 1px 2px rgb(29 24 48 / 0.08); }
.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.price-range label { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--color-ink-3); }
.price-range .input { height: 42px; padding-inline: 10px; font-variant-numeric: tabular-nums; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sort-select { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--color-ink-3); }
.select, .sort-select select { height: 44px; padding: 0 12px; border: 1px solid var(--color-line-strong); border-radius: var(--r-md); background: var(--color-surface); font-size: max(16px, 0.93rem); color: var(--color-ink); }
.filters-toggle { display: none; }
@media (max-width: 960px) {
  .catalog { grid-template-columns: minmax(0, 1fr); }
  .filters { position: fixed; z-index: 72; inset: auto 0 0 0; top: auto; max-height: 82vh; max-height: 82dvh; padding: 0 18px max(18px, env(safe-area-inset-bottom)); background: var(--color-surface); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3); transform: translateY(100%); visibility: hidden; transition: transform 320ms var(--ease-drawer), visibility 0s linear 320ms; }
  .filters.is-open { transform: none; visibility: visible; transition: transform 340ms var(--ease-drawer), visibility 0s; }
  .filters-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 14px 0 10px; background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
  .filters-sheet-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--color-line-strong); }
  .filters-toggle { display: inline-flex; }
}
@media (min-width: 961px) { .filters-sheet-head { display: none; } .filters .filters-apply { display: none; } }

/* Product card */
.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.products-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .products-grid.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .products-grid, .products-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .products-grid, .products-grid.cols-4 { gap: 10px; } }
.product-card { position: relative; display: flex; flex-direction: column; }
/* Each photo stands on a tinted plate: white photo backgrounds multiply away, so pictures from
   different sources sit together as one set. On hover the product lifts off its plate, the way the
   hero's products stand on their shelves, and its contact shadow stays behind. */
.pc-media { --plate: var(--color-bg); position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-lg); background: var(--plate); overflow: hidden; isolation: isolate; transition: background-color var(--dur-2) var(--ease); }
.section-alt .pc-media { --plate: var(--color-canvas); }
.pc-media::after { content: ""; position: absolute; z-index: -1; inset-inline: 30%; inset-block-end: 11%; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgb(29 24 48 / 0.16), transparent); opacity: 0; transform: scaleX(0.7); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); pointer-events: none; }
.pc-media img { width: 100%; height: 100%; object-fit: contain; padding: 12%; mix-blend-mode: multiply; transition: transform var(--dur-3) var(--ease-out); }
.pc-media .ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--purple-200); }
.pc-media .ph .icon { width: 44px; height: 44px; stroke-width: 1.25; }
.pc-badges { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.pc-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 2px 6px; flex: 1; }
.product-card .tag-sku { display: none; }
.pc-cat { font-size: var(--fs-xs); color: var(--purple-600); font-weight: 600; }
.pc-title { font-size: var(--fs-base); font-weight: 600; line-height: 1.55; }
.pc-title a { color: var(--color-ink); text-decoration: none; }
.pc-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: auto; padding-top: 8px; }
.pc-price { font-weight: 700; color: var(--color-ink); font-size: var(--fs-base); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-price.on-request { font-weight: 500; font-size: var(--fs-sm); color: var(--color-ink-3); }
.pc-actions { position: relative; z-index: 2; padding: 2px 0 0; display: flex; gap: 8px; }
.pc-actions form { flex: 1; }
.pc-actions .btn { width: 100%; justify-content: flex-start; padding-inline: 12px; background: transparent; border-color: var(--color-line-strong); }
.btn.is-added { background: var(--success-bg); color: var(--success); border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .pc-media img { transform: translateY(-7px); }
  .product-card:hover .pc-media::after { opacity: 1; transform: scaleX(0.9); }
  .product-card:hover .pc-title a { color: var(--purple-700); }
  .pc-actions .btn:hover { border-color: var(--purple-700); background: var(--purple-50); box-shadow: none; transform: none; }
}
@media (max-width: 520px) {
  .pc-body { padding: 10px 2px 6px; }
  .pc-actions { padding: 0; }
  .pc-actions .btn { font-size: 0.82rem; padding-inline: 8px; }
}
.avail { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; }
.avail-in_stock { color: var(--success); }
.avail-out_of_stock { color: var(--danger); }
.avail-on_request, .avail-preorder { color: var(--warning); }

/* 8 ───────────────────────────── product page */
.product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); padding-block: clamp(20px, 3vw, 36px) clamp(40px, 5vw, 64px); align-items: start; }
.gallery { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 12px; }
.gallery-main { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-lg); background: var(--color-bg); overflow: hidden; }
.gallery-main img { position: relative; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: opacity var(--dur-2) var(--ease); }
.gallery-main img.is-swapping { opacity: 0.3; }
.gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.gallery-thumbs button { width: 76px; height: 76px; flex: none; padding: 6px; border-radius: var(--r-md); border: 1px solid var(--color-line); background: var(--color-bg); transition: border-color var(--dur-1) var(--ease); }
.gallery-thumbs button[aria-current="true"] { border-color: var(--purple-500); box-shadow: 0 0 0 1px var(--purple-500); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product-info h1 { font-size: var(--fs-2xl); margin-block: 10px 14px; }
.js .product-info > * { animation: rise var(--dur-3) var(--ease-out) both; }
.js .product-info > :nth-child(2) { animation-delay: 50ms; }
.js .product-info > :nth-child(3) { animation-delay: 100ms; }
.js .product-info > :nth-child(4) { animation-delay: 150ms; }
.js .product-info > :nth-child(5) { animation-delay: 200ms; }
.js .product-info > :nth-child(n + 6) { animation-delay: 250ms; }
.product-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.product-summary { margin-top: 18px; color: var(--color-ink-2); line-height: 1.85; }
.buy-box { margin-top: 24px; padding: 20px; border-radius: var(--r-lg); background: var(--color-surface); box-shadow: var(--shadow-1); }
.hazard-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--warning-bg); }
.hazard-note > .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--warning); }
.hazard-note b { display: block; font-size: var(--fs-sm); color: var(--color-ink); }
.hazard-note p { margin: 4px 0 0; font-size: var(--fs-sm); line-height: 1.75; color: var(--color-ink-2); }
.hazard-note .text-link { margin-top: 8px; font-size: var(--fs-sm); }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.price-big { font-size: var(--fs-xl); font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.price-was { color: var(--color-ink-3); text-decoration: line-through; }
.price-note { font-size: var(--fs-sm); color: var(--color-ink-3); }
.quote-note { display: flex; gap: 12px; align-items: flex-start; }
.quote-note .qn-icon { flex: none; color: var(--purple-600); margin-top: 0.25em; }
.quote-note b { display: block; font-size: var(--fs-base); margin-bottom: 2px; }
.quote-note p { font-size: var(--fs-sm); color: var(--color-ink-3); line-height: 1.7; }
.tiers { width: 100%; margin-top: 16px; font-size: var(--fs-sm); }
.tiers th, .tiers td { padding: 9px 4px; text-align: start; border-bottom: 1px solid var(--color-line); }
.tiers th { font-weight: 600; color: var(--color-ink-3); border-bottom-width: 2px; }
.tiers tr:last-child td { border-bottom: 0; }
.tiers td:last-child { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; }
.buy-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.buy-controls .btn { flex: 1; min-width: 190px; }
.moq-line { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: var(--fs-sm); color: var(--color-ink-3); }
.notes-toggle { margin-top: 14px; }
.notes-toggle summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--purple-700); list-style: none; display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.notes-toggle summary::-webkit-details-marker { display: none; }
.notes-toggle textarea { margin-top: 10px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 22px 0 0; }
.facts div { padding: 11px 0; border-bottom: 1px solid var(--color-line); }
.facts dt { font-size: var(--fs-xs); color: var(--color-ink-3); }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: var(--fs-sm); }
.b2b-box { margin-top: 22px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--color-surface-2); display: grid; gap: 10px; }
.b2b-box b { font-size: var(--fs-base); }
.b2b-box p { font-size: var(--fs-sm); color: var(--color-ink-2); line-height: 1.75; }
.b2b-box .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.product-sections { border-top: 1px solid var(--color-line); background: var(--color-surface); }
.section-nav { position: sticky; top: var(--header-h); z-index: 5; background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.section-nav ul { display: flex; gap: 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.section-nav a { display: inline-flex; height: 52px; align-items: center; padding: 0 14px; color: var(--color-ink-3); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.section-nav a:hover { color: var(--purple-700); }
.section-nav a.is-active { color: var(--purple-700); border-bottom-color: var(--purple-700); }
.product-section { padding-block: 36px; border-bottom: 1px solid var(--color-line); }
.product-section:last-child { border-bottom: 0; }
.product-section h2 { font-size: var(--fs-xl); margin-bottom: 18px; }
.prose { max-width: 75ch; color: var(--color-ink-2); line-height: 1.95; }
[dir="ltr"] .prose { line-height: 1.75; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-xl); margin-top: 1.6em; color: var(--color-ink); }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.4em; color: var(--color-ink); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--purple-500); }
/* A body that opens with a paragraph reads as lead and details side by side (services). */
.lead-split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 88px); align-items: start; }
.lead-split .prose { max-width: none; }
.prose-intro { position: sticky; top: calc(var(--header-h) + 28px); font-size: var(--fs-lg); line-height: 1.85; color: var(--color-ink); }
@media (max-width: 860px) { .lead-split { grid-template-columns: minmax(0, 1fr); } .prose-intro { position: static; } }
.prose a { font-weight: 500; }
.specs-table { width: 100%; max-width: 820px; font-size: var(--fs-sm); }
.specs-table th, .specs-table td { padding: 12px 4px; text-align: start; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: 0; }
.specs-table th { width: 36%; font-weight: 600; color: var(--color-ink-3); }
.docs-list { display: grid; gap: 10px; max-width: 820px; list-style: none; }
.doc-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: var(--r-md); background: var(--color-surface); }
.doc-item .doc-icon { flex: none; color: var(--danger); }
.doc-item .doc-meta { font-size: var(--fs-xs); color: var(--color-ink-3); }
.doc-item .btn { margin-inline-start: auto; }
@media (max-width: 900px) {
  .product-layout { grid-template-columns: minmax(0, 1fr); }
  .gallery { position: static; }
}
@media (max-width: 520px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* 9 ───────────────────────────── forms & quote */
.field { display: grid; gap: 7px; }
.label { font-weight: 600; font-size: var(--fs-sm); color: var(--color-ink); }
.label .req { color: var(--danger); margin-inline-start: 2px; }
.label .opt { font-weight: 400; color: var(--color-ink-3); font-size: var(--fs-xs); }
.input, .textarea, .select-input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--color-line-strong); background: var(--color-surface);
  font-size: max(16px, 1rem); line-height: 1.5; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #9a95a6; }
.input:focus, .textarea:focus, .select-input:focus { outline: none; border-color: var(--purple-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple-500) 20%, transparent); }
.select-input { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f697d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right 12px center; }
[dir="rtl"] .select-input { background-position: left 12px center; }
.input[dir="ltr"] { text-align: left; }
[dir="rtl"] .input[dir="ltr"] { text-align: right; }
.field.has-error .input, .field.has-error .textarea, .field.has-error .select-input { border-color: var(--danger); }
.field-error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); color: var(--danger); line-height: 1.55; }
.field-hint { font-size: var(--fs-sm); color: var(--color-ink-3); line-height: 1.6; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; font-size: var(--fs-sm); line-height: 1.7; color: var(--color-ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 0.2em; accent-color: var(--purple-700); flex: none; }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.radio-card { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--color-line-strong); border-radius: var(--r-md); background: var(--color-surface); cursor: pointer; font-size: var(--fs-sm); font-weight: 500; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.radio-card input { accent-color: var(--purple-700); width: 18px; height: 18px; }
.radio-card:has(input:checked) { border-color: var(--purple-500); background: var(--purple-50); color: var(--purple-800); }
.hp-field { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }

.form-section { padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-lg); background: var(--color-surface); border: 1px solid var(--color-line); }
.form-section + .form-section { margin-top: 18px; }
.form-section-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.form-section-head .fs-num { width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--color-bg); color: var(--purple-700); font-variant-numeric: lining-nums tabular-nums; font-weight: 600; font-size: var(--fs-sm); }
.form-section-head h2 { font-size: var(--fs-lg); }
.form-section-head p { font-size: var(--fs-sm); color: var(--color-ink-3); }
.fs-count { font-weight: 400; font-size: var(--fs-sm); color: var(--color-ink-3); }

.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(20px, 3vw, 32px); align-items: start; padding-block: clamp(24px, 3vw, 40px) var(--section-y); }
.quote-aside { position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 1060px) { .quote-layout { grid-template-columns: minmax(0, 1fr); } .quote-aside { position: static; } }

/* Open product picker: the catalogue as a list of choices */
.picker { padding: clamp(14px, 1.8vw, 20px); border-radius: var(--r-lg); background: var(--color-bg); }
.picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.picker-head h3 { font-size: var(--fs-base); font-weight: 700; }
.picker-total { font-size: var(--fs-sm); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.picker > .field-hint { margin-top: 2px; }
.picker-search { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-inline: 14px; border: 1px solid var(--color-line-strong); border-radius: var(--r-md); background: var(--color-surface); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.picker-search:focus-within { border-color: var(--purple-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple-500) 20%, transparent); }
.picker-search .icon { color: var(--color-ink-3); }
.picker-search input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font-size: max(16px, 1rem); }
.picker-search input:focus { outline: none; }
.picker-cats { display: flex; gap: 8px; margin-top: 12px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.picker-cats::-webkit-scrollbar { display: none; }
.picker-cat { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: var(--r-full); border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.picker-cat:hover { border-color: var(--purple-300); color: var(--purple-700); }
.picker-cat.is-active { background: var(--purple-700); border-color: var(--purple-700); color: #fff; }
.picker-list { list-style: none; margin-top: 12px; max-height: 412px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--r-md); transition: opacity var(--dur-1) var(--ease); }
.picker.is-loading .picker-list { opacity: 0.55; }
.pick + .pick { border-block-start: 1px solid var(--color-line); }
.pick-btn { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 68px; padding: 10px 14px; border: 0; background: transparent; text-align: start; transition: background-color var(--dur-1) var(--ease); }
.pick-btn:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .pick-btn:hover { background: var(--purple-50); } }
.pick-btn:active { background: var(--purple-100); }
.pick-img { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--color-bg); display: grid; place-items: center; overflow: hidden; color: var(--purple-200); }
.pick-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pick-text { display: grid; gap: 2px; min-width: 0; }
.pick-name { font-weight: 600; font-size: var(--fs-sm); line-height: 1.5; }
.pick-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--fs-xs); color: var(--color-ink-3); }
.pick-price { font-size: var(--fs-sm); color: var(--color-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pick-state { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 88px; min-height: 36px; padding: 0 12px; border-radius: var(--r-full); border: 1px solid var(--color-line-strong); font-size: var(--fs-sm); font-weight: 600; color: var(--purple-700); transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.pick-state .icon { width: 1em; height: 1em; stroke-width: 2.2; }
.pick .pick-check { display: none; }
.pick.is-selected .pick-check { display: block; }
.pick.is-selected .pick-plus { display: none; }
.pick.is-selected .pick-state { background: var(--success-bg); border-color: transparent; color: var(--success); }
.pick.is-busy { opacity: 0.55; pointer-events: none; }
.picker-none { margin-top: 12px; padding: 18px; text-align: center; font-size: var(--fs-sm); color: var(--color-ink-3); background: var(--color-surface); border-radius: var(--r-md); }
.picker-foot { display: flex; justify-content: center; margin-top: 8px; }
.picker-foot:empty { display: none; }
@media (max-width: 600px) {
  .pick-btn { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding-inline: 12px; }
  .pick-img { width: 44px; height: 44px; }
  .pick-price { display: none; }
  .pick-state { min-width: 0; width: 40px; padding: 0; }
  .pick-state-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.selected-title { margin: 24px 0 10px; font-size: var(--fs-base); font-weight: 700; }
.selected-empty { padding: 14px 16px; border: 1px dashed var(--color-line-strong); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--color-ink-3); line-height: 1.7; }
.q-lines { display: grid; gap: 10px; }
.q-lines:empty { display: none; }
.q-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--color-line); border-radius: var(--r-md); background: var(--color-surface); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.q-line.is-removing { opacity: 0; transform: translateY(6px); }
.q-line .ql-img { width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--color-bg); overflow: hidden; display: grid; place-items: center; color: var(--purple-200); }
.q-line .ql-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.q-line .ql-name { font-weight: 600; line-height: 1.5; }
.q-line .ql-name a { color: var(--color-ink); text-decoration: none; }
.q-line .ql-name a:hover { color: var(--purple-700); text-decoration: underline; }
.q-line .ql-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: var(--fs-xs); color: var(--color-ink-3); }
.q-line .ql-controls { display: flex; align-items: center; gap: 8px; }
.q-line .ql-notes { grid-column: 2 / -1; }
.q-line .ql-notes .input { min-height: 42px; padding-block: 7px; }
.q-line .field-error { grid-column: 2 / -1; }
@media (max-width: 600px) {
  .q-line { grid-template-columns: 56px minmax(0, 1fr); }
  .q-line .ql-img { width: 56px; height: 56px; }
  .q-line .ql-controls { grid-column: 1 / -1; justify-content: space-between; }
  .q-line .ql-notes { grid-column: 1 / -1; }
}
.custom-rows { display: grid; gap: 10px; }
.custom-row { display: grid; grid-template-columns: minmax(0, 2fr) 96px minmax(0, 2fr) auto; gap: 8px; align-items: start; }
@media (max-width: 640px) { .custom-row { grid-template-columns: minmax(0, 1fr) 90px; } .custom-row .c-notes { grid-column: 1 / -1; } .custom-row .icon-btn { grid-column: 2; justify-self: end; } }

.dropzone { position: relative; display: grid; place-items: center; gap: 8px; padding: 28px 20px; text-align: center; border: 1.5px dashed var(--purple-300); border-radius: var(--r-lg); background: var(--color-bg); color: var(--color-ink-2); transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.dropzone.is-dragging { border-color: var(--purple-600); background: var(--purple-50); }
.dropzone .dz-icon { color: var(--purple-600); }
.dropzone .dz-icon .icon { width: 2rem; height: 2rem; stroke-width: 1.5; }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .dz-choose { color: var(--purple-700); font-weight: 600; text-decoration: underline; }
.dropzone .field-hint { max-width: 60ch; }
.file-list { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.file-list:empty { display: none; }
.file-list li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--color-line); background: var(--color-surface); font-size: var(--fs-sm); }
.file-list .f-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.file-list .f-size { font-variant-numeric: lining-nums tabular-nums; font-size: var(--fs-xs); color: var(--color-ink-3); }
.file-list li.is-invalid { border-color: var(--danger); color: var(--danger); }

.summary-list { list-style: none; display: grid; gap: 8px; margin-block: 18px 14px; padding-top: 16px; border-top: 1px solid var(--color-line); font-size: var(--fs-sm); }
.summary-list li { display: flex; justify-content: space-between; gap: 10px; }
.summary-list b { font-variant-numeric: lining-nums tabular-nums; }

/* Cart and checkout: the same cards as the quote page, with prices on every line */
.cart-link { position: relative; }
.cart-line { grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; }
.cart-line .cl-total { min-width: 7.5em; text-align: end; font-variant-numeric: lining-nums tabular-nums; font-size: var(--fs-sm); }
.cart-line .cl-total b { font-weight: 600; color: var(--color-ink); }
.cl-tier { color: var(--success); font-weight: 600; }
@media (max-width: 640px) {
  .cart-line { grid-template-columns: 56px minmax(0, 1fr); align-items: start; }
  .cart-line .ql-img { width: 56px; height: 56px; }
  .cart-line .ql-controls, .cart-line .cl-total { grid-column: 2; }
  .cart-line .cl-total { min-width: 0; text-align: start; }
}
.cart-summary h2 { font-size: var(--fs-lg); margin-bottom: 14px; }
.cart-totals { display: grid; gap: 10px; margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--color-line); font-size: var(--fs-sm); }
.cart-totals div { display: flex; justify-content: space-between; gap: 12px; }
.cart-totals dt { color: var(--color-ink-2); }
.cart-totals dd { margin: 0; font-variant-numeric: lining-nums tabular-nums; text-align: end; }
.cart-totals dd.muted { font-family: inherit; }
.cart-totals .ct-grand { padding-top: 12px; border-top: 1px dashed var(--color-line-strong); font-size: var(--fs-base); font-weight: 700; }
.cart-totals .ct-grand dt { color: var(--color-ink); }
.cart-totals .ct-grand dd { color: var(--purple-700); }
.cart-note { display: flex; gap: 8px; margin-top: 14px; font-size: var(--fs-xs); line-height: 1.7; color: var(--color-ink-3); }
.cart-note .icon { flex: none; margin-top: 0.3em; color: var(--purple-500); }
.cart-summary .text-link { display: inline-block; margin-top: 10px; font-size: var(--fs-sm); }
.co-lines { list-style: none; display: grid; gap: 10px; margin: 0 0 16px; }
.co-lines li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.co-img { display: block; width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--color-bg); overflow: hidden; }
.co-img img { width: 100%; height: 100%; object-fit: contain; padding: 3px; mix-blend-mode: multiply; }
.co-name { line-height: 1.5; }
.co-lines b { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; white-space: nowrap; }
.co-payment { padding: 14px 16px; border-radius: var(--r-md); background: var(--color-bg); font-size: var(--fs-sm); line-height: 1.7; }
.co-payment b { display: block; margin-bottom: 4px; }
.co-payment p { color: var(--color-ink-2); }
.salla-buy { gap: 10px; }
/* The customer's order page: where the order has got to */
.order-steps { list-style: none; display: grid; gap: 2px; }
.order-steps li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; color: var(--color-ink-3); }
.order-steps li:last-child { padding-bottom: 0; }
/* the line joining the dots */
.order-steps li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 13px; inset-block: 26px 2px; width: 2px; background: var(--color-line); }
.order-steps li.is-done:not(:last-child)::before { background: var(--purple-300); }
.os-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-line-strong); background: var(--color-surface); color: #fff; }
.order-steps li.is-done .os-dot { border-color: var(--purple-600); background: var(--purple-600); }
.order-steps li.is-current .os-dot { border-color: var(--gold-500); box-shadow: 0 0 0 4px rgb(221 200 87 / 0.25); }
.os-label { align-self: center; font-weight: 600; }
.order-steps li.is-done .os-label, .order-steps li.is-current .os-label { color: var(--color-ink); }
.os-now { grid-column: 2; margin-top: 4px; font-size: var(--fs-sm); font-weight: 400; line-height: 1.7; color: var(--color-ink-2); }
.assurances { list-style: none; display: grid; gap: 8px; margin-top: 16px; font-size: var(--fs-sm); color: var(--color-ink-3); }
.assurances li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.6; }
.assurances .icon { color: var(--purple-500); margin-top: 0.15em; }

/* Thank-you */
.thanks { max-width: 720px; margin-inline: auto; text-align: center; padding-block: clamp(48px, 7vw, 96px); }
.thanks-mark { width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); }
.thanks-mark svg { width: 44px; height: 44px; stroke-width: 2.2; }
.thanks-mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 520ms var(--ease) 200ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ref-box { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--color-surface); box-shadow: var(--shadow-1); }
.ref-box .ref-label { font-size: var(--fs-sm); color: var(--color-ink-3); }
.ref-box .ref-value { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 600; letter-spacing: 0.04em !important; color: var(--purple-800); direction: ltr; }
.next-steps { list-style: none; display: grid; gap: 12px; margin: 36px auto 0; max-width: 560px; text-align: start; counter-reset: n; }
.next-steps li { display: flex; gap: 14px; align-items: flex-start; counter-increment: n; line-height: 1.7; }
.next-steps li::before { content: counter(n); width: 28px; flex: none; font-variant-numeric: lining-nums tabular-nums; font-weight: 600; color: var(--purple-600); }

/* 10 ───────────────────────────── content pages */
/* Rows with a picture: listings of sectors and services */
.media-rows { display: grid; gap: clamp(20px, 3vw, 36px); }
.media-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3.5vw, 48px); align-items: center; padding: clamp(14px, 1.6vw, 20px); border-radius: var(--r-lg); background: var(--color-bg); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-2) var(--ease); }
.media-row figure { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--color-surface-2); }
.media-row img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.media-row .mr-body { display: grid; gap: 10px; justify-items: start; padding-inline-end: clamp(8px, 2vw, 28px); }
.media-row h2 { font-size: var(--fs-xl); }
.media-row p { color: var(--color-ink-2); }
@media (hover: hover) and (pointer: fine) {
  .media-row:hover { background: var(--color-surface-2); }
  .media-row:hover img { transform: scale(1.03); }
  .media-row:hover .text-link .icon { transform: translateX(4px); }
  [dir="rtl"] .media-row:hover .text-link .icon { transform: scaleX(-1) translateX(4px); }
}
@media (max-width: 760px) { .media-row { grid-template-columns: minmax(0, 1fr); } .media-row .mr-body { padding: 4px 6px 10px; } }

/* Project cards (real delivered projects only) */
.project-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--color-bg); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-2) var(--ease); }
.project-card figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-2); }
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.project-card .pj-body { display: grid; gap: 6px; padding: 18px 20px 22px; }
.project-card p:not(.pc-cat) { color: var(--color-ink-3); font-size: var(--fs-sm); line-height: 1.75; }
@media (hover: hover) and (pointer: fine) {
  .project-card:hover { background: var(--color-surface-2); }
  .project-card:hover img { transform: scale(1.03); }
}

/* Plain text columns (no card chrome, no icons) */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.points > * { padding-inline: clamp(16px, 2.4vw, 32px); border-inline-start: 1px solid var(--color-line); color: inherit; text-decoration: none; }
.points > *:first-child { padding-inline-start: 0; border-inline-start: 0; }
.points h3 { margin-bottom: 8px; }
.points p { color: var(--color-ink-3); font-size: var(--fs-sm); line-height: 1.8; }
.points a.text-link { margin-top: 10px; }
@media (max-width: 760px) {
  .points { grid-template-columns: minmax(0, 1fr); }
  .points > * { padding: 18px 0; border-inline-start: 0; border-block-start: 1px solid var(--color-line); }
  .points > *:first-child { padding-top: 0; border-block-start: 0; }
}

.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.split-figure { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-surface-2); }
.split-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.link-list { display: grid; }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 2px; border-block-end: 1px solid var(--color-line); color: var(--color-ink); font-weight: 600; text-decoration: none; transition: color var(--dur-1) var(--ease); }
.link-list a:last-child { border-block-end: 0; }
.link-list a:hover { color: var(--purple-700); }
.link-list .icon { color: var(--color-line-strong); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery-grid figure { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-surface-2); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.gallery-grid figcaption.caption { position: absolute; inset-inline: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgb(23 14 43 / 0.62)); color: #fff; font-size: var(--fs-sm); }
@media (hover: hover) and (pointer: fine) { .gallery-grid figure:hover img { transform: scale(1.03); } }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.policy-banner { margin-bottom: 26px; }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .contact-cards { grid-template-columns: minmax(0, 1fr); } }
.contact-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-lg); background: var(--color-bg); text-decoration: none; color: var(--color-ink); transition: background-color var(--dur-2) var(--ease); }
.section-alt :is(.media-row, .project-card, .contact-card) { background: var(--color-canvas); }
.contact-card > .icon { color: var(--purple-600); width: 1.6em; height: 1.6em; }
.contact-card p { color: var(--color-ink-3); font-size: var(--fs-sm); }
@media (hover: hover) and (pointer: fine) { a.contact-card:hover { background: var(--color-surface-2); } }

/* One-action pages (administrator setup) */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-5); }
.auth-card { width: min(440px, 100%); display: grid; gap: var(--sp-4); padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: var(--color-surface); box-shadow: var(--shadow-2); }
.auth-card img { height: 56px; width: auto; margin-inline: auto; }
.auth-card h1 { font-size: var(--fs-xl); text-align: center; }
.auth-card .lead { font-size: var(--fs-sm); text-align: center; }

.error-page { text-align: center; padding-block: clamp(64px, 10vw, 140px); }
.error-code { font-variant-numeric: lining-nums tabular-nums; font-size: var(--fs-display); font-weight: 700; color: var(--purple-300); line-height: 1; margin-bottom: 18px; }

/* Consent banner */
.consent { position: fixed; z-index: 85; inset-block-end: 16px; inset-inline: 16px; max-width: 560px; margin-inline-start: auto; padding: 18px 20px; border-radius: var(--r-lg); background: var(--color-surface); box-shadow: var(--shadow-3); font-size: var(--fs-sm); line-height: 1.7; }
.consent h2 { font-size: var(--fs-base); margin-bottom: 6px; }
.consent p { color: var(--color-ink-2); }
.consent .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.consent .prefs { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-line); }

/* 10b ──────────────────────────── phones: compact grids
   The owner's choice for small screens: the three paths, the categories and the sectors sit three
   side by side, products four side by side, each as a small tile instead of a tall card. */
.path-icon { display: none; }
.sector-tiles, .sector-tiles-note { display: none; }

@media (max-width: 820px) {
  .paths-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 8px; }
  .path, .path-quote { grid-row: auto; min-height: 112px; padding: 14px 10px 12px; gap: 10px; justify-content: space-between; border-radius: var(--r-md); }
  .path h3, .path-quote h3 { font-size: 0.9rem; line-height: 1.4; font-weight: 700; }
  .path p, .path-types, .path-cta { display: none; }
  .path-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--purple-50); color: var(--purple-700); }
  .path-quote .path-icon { background: rgb(255 255 255 / 0.1); color: var(--gold-300); }
  .path-arc { width: 120%; inset-block-start: -80%; inset-inline-end: -68%; }
}

@media (max-width: 760px) {
  .cat-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .cat-index li { flex: 0 0 calc((100% - 16px) / 3); min-width: 0; }
  .cat-index a, .cat-index li:last-child:nth-child(n) a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 104px; padding: 12px 6px; border: 0; border-radius: var(--r-md); background: var(--color-bg); text-align: center; }
  .cat-index a::after, .ci-arrow { display: none; }
  .ci-icon { width: 40px; height: 40px; background: var(--color-surface); }
  .ci-icon .icon { width: 21px; height: 21px; }
  .ci-name { font-size: 0.84rem; line-height: 1.35; }
  .ci-count { font-size: 0.7rem; }

  .products-grid, .products-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .product-card { border-radius: var(--r-md); }
  .pc-body { padding: 6px 6px 8px; gap: 2px; border-top: 0; }
  .pc-cat, .product-card .tag-sku, .pc-meta .avail { display: none; }
  .pc-title { font-size: 0.72rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pc-meta { padding-top: 2px; }
  .pc-price { font-size: 0.72rem; }
  .pc-price.on-request { font-size: 0.7rem; font-weight: 500; }
  /* The add-to-list action becomes a round button on the photo; the label stays for screen readers. */
  .pc-actions { position: absolute; inset-block-start: 5px; inset-inline-end: 5px; padding: 0; }
  .pc-actions .btn { position: relative; width: 32px; min-height: 32px; height: 32px; padding: 0; border-radius: 50%; box-shadow: var(--shadow-1); font-size: 0.8rem; }
  .pc-actions .btn::before { content: ""; position: absolute; inset: -6px; } /* 44px touch area */
  .pc-actions [data-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pc-badges { inset-block-start: 5px; inset-inline-start: 5px; }
  .pc-badges .badge { font-size: 0.6rem; padding: 0.1em 0.5em; }
}

@media (max-width: 900px) {
  .switcher-list, .switcher-stage { display: none; }
  .sector-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; }
  .sector-tiles a { display: grid; gap: 8px; color: var(--color-ink); text-decoration: none; }
  .stl-photo { display: block; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--color-surface-2); }
  .stl-photo img { width: 100%; height: 100%; object-fit: cover; }
  .stl-name { font-size: 0.86rem; font-weight: 700; line-height: 1.4; text-align: center; }
  .sector-tiles-note { display: block; margin-top: 10px; font-size: var(--fs-xs); color: var(--color-ink-3); text-align: center; }
}

/* Footer on phones: the three link columns side by side in small type, the phone/email in one row under them. */
@media (max-width: 760px) {
  .site-footer { padding-top: 36px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "brand brand brand" "cat sol head" "cat sol links" "reach reach reach"; grid-template-rows: auto auto 1fr auto; gap: 0 12px; padding-bottom: 20px; }
  .footer-brand { grid-area: brand; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; margin-bottom: 26px; }
  .footer-brand img { height: 36px; margin: 0; }
  .footer-brand p { grid-column: 1 / -1; grid-row: 2; max-width: none; font-size: 0.84rem; line-height: 1.75; }
  .footer-brand .socials { grid-column: 2; grid-row: 1; margin: 0; }
  .footer-col-catalog { grid-area: cat; }
  .footer-col-solutions { grid-area: sol; }
  .footer-col-contact { display: contents; }
  .footer-col-contact h2 { grid-area: head; }
  .footer-col-contact .footer-links { grid-area: links; align-self: start; margin: 0; }
  .footer-col h2 { margin-bottom: 4px; font-size: 0.9rem; }
  .footer-col ul { gap: 0; }
  .footer-col li > a { display: block; padding-block: 5px; font-size: 0.84rem; line-height: 1.45; }
  .footer-reach { grid-area: reach; display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--color-line); }
  .footer-reach li > a, .footer-reach li > span { padding-block: 6px; font-size: 0.84rem; }
  .footer-bottom { padding-block: 16px; }
}

/* An empty cart: one centred panel instead of a column beside an empty one. */
.cart-layout:has(> [data-cart-aside][hidden]) { grid-template-columns: minmax(0, 1fr); }
.cart-layout:has(> [data-cart-aside][hidden]) > div:first-of-type { width: min(760px, 100%); margin-inline: auto; }

/* Catalogue as a list: one product per row, the photo small at the reading start, the full name readable
   (also on phones, where the grid is four across). */
.products-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.products-grid.is-list .product-card { flex-direction: row; align-items: center; gap: clamp(12px, 2vw, 22px); padding-block: 12px; border-block-end: 1px solid var(--color-line); border-radius: 0; }
.products-grid.is-list .pc-media { flex: none; width: clamp(76px, 10vw, 112px); border-radius: var(--r-md); }
.products-grid.is-list .pc-media img { padding: 10%; }
.products-grid.is-list .pc-body { padding: 0; gap: 2px; min-width: 0; }
.products-grid.is-list .pc-title { font-size: var(--fs-base); display: block; -webkit-line-clamp: unset; overflow: visible; }
.products-grid.is-list .pc-cat { display: block; }
.products-grid.is-list .pc-meta { justify-content: flex-start; gap: 6px 18px; margin-top: 4px; padding-top: 0; }
.products-grid.is-list .pc-meta .avail { display: inline-flex; }
.products-grid.is-list .pc-price { font-size: var(--fs-base); }
.products-grid.is-list .pc-actions { position: relative; inset: auto; flex: none; padding: 0; }
.products-grid.is-list .pc-actions .btn { width: auto; min-height: 40px; height: auto; padding: 0 14px; border-radius: var(--r-md); box-shadow: none; }
.products-grid.is-list .pc-actions [data-label] { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
@media (max-width: 760px) {
  .products-grid.is-list .pc-title { font-size: 0.9rem; }
  .products-grid.is-list .pc-price { font-size: 0.86rem; }
  .products-grid.is-list .pc-actions .btn { width: 40px; padding: 0; border-radius: 50%; }
  .products-grid.is-list .pc-actions [data-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* 11 ───────────────────────────── motion */
/* Scroll reveal: opacity + small rise, once. */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* Photos (data-reveal="media"): a cover in the section's own colour lifts off while the picture settles. */
.reveal-ready [data-reveal="media"] { opacity: 1; transform: none; overflow: hidden; }
.reveal-ready [data-reveal="media"]::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--reveal-cover, var(--color-canvas)); transform-origin: 50% 0; transition: transform var(--dur-5) var(--ease-out) calc(var(--i, 0) * 80ms); pointer-events: none; }
.reveal-ready [data-reveal="media"].is-visible::after { transform: scaleY(0); }
/* An animation, not a transition, so the photo's own hover zoom keeps working once it has settled. */
.reveal-ready [data-reveal="media"].is-visible img { animation: media-settle 1.3s var(--ease-out) calc(var(--i, 0) * 80ms) backwards; }
@keyframes media-settle { from { transform: scale(1.08); } }
.section-alt { --reveal-cover: var(--color-bg); }

/* Page entrance (once): staggered top to bottom. */
.js [data-enter] { animation: rise var(--dur-3) var(--ease) both; animation-delay: calc(var(--arrive, 0ms) + var(--i, 0) * 60ms + 40ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Cross-document page transitions where supported (progressive enhancement). */
@view-transition { navigation: auto; }
/* Between pages: the page leaves slightly upward and the next one rises into place, while the header
   (its own group, see .site-header) stays exactly where it is. */
::view-transition-old(root) { animation: vt-out var(--dur-2) var(--ease) both; }
::view-transition-new(root) { animation: vt-in var(--dur-3) var(--ease-out) both; }
/* Shared element: the photo frame of the product card that was clicked grows into the product page's
   main photo frame (the name is given to that one card on click, see app.js). Both frames are square
   and paper-toned, so the morph is seamless. */
.gallery-main { view-transition-name: product-photo; }
::view-transition-group(product-photo) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); }
::view-transition-old(product-photo), ::view-transition-new(product-photo) { animation-duration: var(--dur-3); height: 100%; object-fit: contain; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* 11a ──────────────────────────── reveals that fit what they reveal
   Not one entrance for everything. Titles are unveiled in the reading direction, like a line drawn across
   the page (their box hugs the words so the unveiling travels across exactly them, and nothing stays
   clipped once it is done); directory rows slide in from the reading start; products are set down on
   their plates the way the hero's products are set on their shelves. Content is visible without JS. */
/* The unveiling is the logo's own gesture (its words are wiped in the same way, 11b): a soft edge travels
   across the words in the reading direction. The mask is twice the title's height and does not clip, so
   accents and descenders are never cut, and it only exists while the animation plays. */
@keyframes unveil {
  from { -webkit-mask: linear-gradient(to left, #000 46.5%, #0000 53.5%) 0% 50% / 215% 200% no-repeat border-box; mask: linear-gradient(to left, #000 46.5%, #0000 53.5%) 0% 50% / 215% 200% no-repeat border-box no-clip; }
  to { -webkit-mask: linear-gradient(to left, #000 46.5%, #0000 53.5%) 100% 50% / 215% 200% no-repeat border-box; mask: linear-gradient(to left, #000 46.5%, #0000 53.5%) 100% 50% / 215% 200% no-repeat border-box no-clip; }
}
@keyframes unveil-ltr {
  from { -webkit-mask: linear-gradient(to right, #000 46.5%, #0000 53.5%) 100% 50% / 215% 200% no-repeat border-box; mask: linear-gradient(to right, #000 46.5%, #0000 53.5%) 100% 50% / 215% 200% no-repeat border-box no-clip; }
  to { -webkit-mask: linear-gradient(to right, #000 46.5%, #0000 53.5%) 0% 50% / 215% 200% no-repeat border-box; mask: linear-gradient(to right, #000 46.5%, #0000 53.5%) 0% 50% / 215% 200% no-repeat border-box no-clip; }
}
[data-reveal="heading"], .page-head h1, .hero-copy h1 .hl { width: fit-content; max-width: 100%; }
/* Before its turn a title is only transparent (a clipped-away box would never be seen by the observer). */
.reveal-ready [data-reveal="heading"] { transform: none; transition: none; }
.reveal-ready [data-reveal="heading"].is-visible { animation: unveil 1.1s var(--ease-write) calc(var(--i, 0) * 60ms) backwards; }
.reveal-ready [data-reveal="row"] { transform: translateX(24px); transition: opacity var(--dur-3) var(--ease), transform 640ms var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
[dir="ltr"].reveal-ready [data-reveal="row"] { transform: translateX(-24px); }
.reveal-ready [data-reveal="set"] { transform: translateY(-16px); transition: opacity 520ms var(--ease), transform 760ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal-ready [data-reveal="row"].is-visible, .reveal-ready [data-reveal="set"].is-visible { transform: none; }

/* Page titles, and the hero's two lines one after the other, are drawn in the same way once the page is
   on screen (after the page-change sheet lifts when there is one: --arrive, set in the layout head). */
.js .page-head h1 { animation: unveil 1.1s var(--ease-write) calc(var(--arrive, 0ms) + 80ms) backwards; }
.js .hero-copy h1 .hl { animation: unveil 1.2s var(--ease-write) calc(var(--arrive, 0ms) + 100ms + var(--l, 0) * 180ms) backwards; }
[dir="ltr"].js .page-head h1, [dir="ltr"].js .hero-copy h1 .hl, [dir="ltr"].reveal-ready [data-reveal="heading"].is-visible { animation-name: unveil-ltr; }

/* A real sequence (the quote journey, the fit-out process) is the page's purple field: its route is drawn
   in the logo's gold as the reader goes down it. */
.section-journey { background: var(--purple-800); color: rgb(255 255 255 / 0.86); --reveal-cover: var(--purple-800); }
.section-journey h2, .section-journey h3 { color: #fff; }
.section-journey .lead, .section-journey .steps p { color: rgb(255 255 255 / 0.76); }
.section-journey .text-link { color: var(--gold-300); }
.section-journey .steps { --station-bg: var(--purple-800); }
.section-journey .steps li:not(:last-child)::before { background: rgb(255 255 255 / 0.16); }
.section-journey .steps li:not(:last-child)::after { background: var(--gold-500); }
.section-journey .step-n { border-color: rgb(255 255 255 / 0.34); color: #fff; }
.section-journey .steps li.is-reached .step-n { background: var(--gold-500); border-color: var(--gold-500); color: var(--purple-900); }
.section-journey :focus-visible { outline-color: var(--gold-500); }

/* 11b ──────────────────────────── the logo on the move
   Following a link within the site: a paper sheet rises over the page while the logo draws itself in
   the middle (the mark with a compass sweep from its crossing, the words from right to left); the next
   page opens under the same sheet and the logo flies into its place in the header as the sheet lifts
   away. The first page of a visit draws the header logo the same way, and so does hovering it.
   The logo is the owner's PNG, never redrawn: two copies are cut along the gap between the mark and the
   words (clip-path) and each is revealed by a mask. Without @property support nothing of this runs. */
@property --mk-sweep { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@property --mk-wipe { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

.brand { position: relative; }
.logo-anim { position: relative; }
.logo-overlay { position: absolute; pointer-events: none; }
.logo-part { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.logo-part.is-mark {
  clip-path: polygon(49.5% 0, 100% 0, 100% 100%, 68.5% 100%, 68.5% 58%, 49.5% 58%);
  -webkit-mask-image: conic-gradient(from 0deg at 75.8% 46.8%, #000 var(--mk-sweep), #0000 calc(var(--mk-sweep) + 0.5deg));
  mask-image: conic-gradient(from 0deg at 75.8% 46.8%, #000 var(--mk-sweep), #0000 calc(var(--mk-sweep) + 0.5deg));
}
.logo-part.is-word {
  clip-path: polygon(0 0, 49.5% 0, 49.5% 58%, 68.5% 58%, 68.5% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(to left, #000 var(--mk-wipe), #0000 calc(var(--mk-wipe) + 6%));
  mask-image: linear-gradient(to left, #000 var(--mk-wipe), #0000 calc(var(--mk-wipe) + 6%));
}
.logo-part.is-drawing.is-mark, html.is-leaving .nav-veil-logo .is-mark, html.is-arriving .nav-veil-logo .is-mark { animation: logo-sweep 380ms var(--ease-out) var(--draw-at, 0ms) both; }
.logo-part.is-drawing.is-word, html.is-leaving .nav-veil-logo .is-word, html.is-arriving .nav-veil-logo .is-word { animation: logo-wipe 300ms var(--ease-out) calc(var(--draw-at, 0ms) + 120ms) both; }
@keyframes logo-sweep { from { --mk-sweep: 0deg; } to { --mk-sweep: 360deg; } }
@keyframes logo-wipe { from { --mk-wipe: 30%; } to { --mk-wipe: 100%; } }

.nav-veil { position: fixed; inset: 0; z-index: 96; background: var(--color-canvas); clip-path: inset(100% 0 0 0); visibility: hidden; pointer-events: none; }
.nav-veil-logo { --veil-logo-h: clamp(64px, 7vw, 96px); position: fixed; z-index: 97; top: 50%; left: 50%; width: calc(var(--veil-logo-h) * 1.8875); height: var(--veil-logo-h); translate: -50% -50%; visibility: hidden; pointer-events: none; }
/* The logo starts once the rising sheet has passed the middle of the screen. */
html.is-leaving { --draw-at: 170ms; }
html.is-leaving .nav-veil { visibility: visible; animation: veil-in 290ms cubic-bezier(0.65, 0, 0.35, 1) both; }
html.is-leaving .nav-veil-logo, html.is-arriving .nav-veil-logo { visibility: visible; }
/* The next page picks the drawing up where the previous one left it (--veil-t: time since the click). */
html.is-arriving { --draw-at: calc(170ms - var(--veil-t, 0ms)); }
html.is-arriving .nav-veil { visibility: visible; clip-path: inset(0); animation: veil-in 290ms cubic-bezier(0.65, 0, 0.35, 1) calc(0ms - var(--veil-t, 0ms)) both; }
html.is-arriving .site-header .brand img, html.is-intro .site-header .brand > img { visibility: hidden; }
@keyframes veil-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* ---------------------------------------------------------------- touch screens
   A finger needs about 44px: small controls get that height on touch screens, links in dense lists 40px,
   and a small badge-link keeps its drawing but gains an invisible hit area around it. Mouse layouts are untouched. */
@media (pointer: coarse) {
  .btn-sm, .picker-cat, .text-link { min-height: 44px; }
  .view-switch .icon-btn { width: 44px; height: 44px; }
  .notes-toggle summary { min-height: 44px; }
  .topbar a { min-height: 40px; }
  .footer-col li > a, .footer-reach li > a { display: flex; align-items: center; min-height: 40px; padding-block: 0; }
  .footer-bottom nav { gap: 0 18px; }
  .footer-bottom nav a { display: inline-flex; align-items: center; min-height: 40px; }
  .contact-line a { display: inline-flex; align-items: center; min-height: 40px; }
  a.badge { position: relative; }
  a.badge::before { content: ""; position: absolute; inset: -10px -6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .nav-veil, .nav-veil-logo { display: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------------------------------------------------------------- service page in sections
   (the furniture fit-out page): a short text beside the space's overview photo and its details */
.svc-sections .container { display: grid; gap: clamp(56px, 8vw, 112px); }
.svc-part { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.svc-part.is-flipped { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.svc-part.is-flipped .svc-part-text { order: 2; }
.svc-part-text { position: sticky; top: calc(var(--header-h) + 28px); }
.svc-part-text h2 { font-size: var(--fs-2xl); line-height: 1.3; text-wrap: balance; }
.svc-part-text p { max-width: 46ch; margin-top: 14px; color: var(--color-ink-2); font-size: var(--fs-lg); line-height: 1.85; text-wrap: pretty; }
.svc-part-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.svc-part-media figure { margin: 0; }
.svc-part-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--color-surface-2); }
.svc-part-media figure.is-lead { grid-column: 1 / -1; }
.svc-part-media figure.is-lead img { aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
.svc-part-media.count-2 figure.is-lead { grid-column: auto; }
.svc-part-media.count-2 figure.is-lead img { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.svc-part-media figcaption { margin-top: 10px; color: var(--color-ink-3); font-size: var(--fs-sm); line-height: 1.75; text-wrap: pretty; }
.svc-more { display: grid; justify-items: center; gap: 20px; padding: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 48px); border-radius: var(--r-lg); background: var(--color-bg); text-align: center; }
.svc-more p { max-width: 58ch; color: var(--color-ink-2); font-size: var(--fs-lg); line-height: 1.8; }
@media (max-width: 900px) {
  .svc-part, .svc-part.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .svc-part.is-flipped .svc-part-text { order: 0; }
  .svc-part-text { position: static; }
}
@media (max-width: 560px) {
  .svc-part-media { grid-template-columns: minmax(0, 1fr); }
  .svc-part-media.count-2 figure.is-lead { grid-column: 1 / -1; }
}

@media print {
  .site-header, .site-footer, .toasts, .wa-float, .consent, .btn, .search-panel, .closing { display: none !important; }
  body { font-size: 12pt; background: #fff; }
}