/* ═══════════════════════════════════════════════════════════
   معرض التوحيد — supply catalogue
   Palette: galvanised slate + brass + ceramic. Type: Alexandria
   (voice) over IBM Plex Sans Arabic (technical) with Plex Mono
   for codes and sizes — the numbers a plumber actually reads.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Palette taken straight from the logo: the drop's ink blue, its pale
     interior, and warm sand kept only for the order slip and small accents. */
  --ink: #0F2231;
  --navy: #123A5E;
  --brand: #154D84;          /* logo blue */
  --brand-deep: #0E3A66;
  --brand-lit: #3B86C9;
  --brand-pale: #E9F2F9;
  --steel: #38506334;
  --steel: #3A5063;
  --steel-2: #61798C;
  --rule: #DCE4EB;
  --porcelain: #F2F6F9;
  --paper: #FFFFFF;
  --ppr: #1E7A5A;
  --alarm: #A33A2A;
  --sand: #C98A2E;

  --brass: var(--brand);      /* legacy name, now the brand blue */
  --brass-lit: var(--brand-lit);

  --slip: #FDFBF5;
  --slip-rule: #E2DCCB;

  --f-display: 'Alexandria', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;

  --w: 1240px;
  --r: 4px;
  --shadow: 0 1px 2px rgba(15,34,49,.05), 0 10px 30px -14px rgba(15,34,49,.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0; background: var(--porcelain); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.7;
  font-feature-settings: 'ss01';
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

h1, h2, h3, .display { font-family: var(--f-display); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--w); margin-inline: auto; padding-inline: 20px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* eyebrow — a section label, always paired with a rule */
.eyebrow {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass); display: flex;
  align-items: center; gap: 12px; margin-bottom: 10px;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* ── skip link ─────────────────────────────────────────── */
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip:focus { inset-inline-start: 0; }

/* ── top bar ───────────────────────────────────────────── */
.topbar {
  background: var(--ink); color: #c8cdd2; font-size: .8rem;
  font-family: var(--f-mono); letter-spacing: .02em;
}
.topbar .wrap { display: flex; gap: 18px; align-items: center; min-height: 38px; flex-wrap: wrap; }
.topbar a:hover { color: #fff; }
.topbar .spacer { flex: 1; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--ppr); margin-inline-end: 7px; }
.dot.off { background: var(--steel-2); }
.lang {
  border: 1px solid #39434c; padding: 2px 10px; border-radius: var(--r);
  color: #e7eaec; transition: background .15s;
}
.lang:hover { background: #232b33; }

/* ── header ────────────────────────────────────────────── */
.head { background: var(--paper); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 60; }
.head .wrap { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.logo { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; }
.logo small { font-family: var(--f-body); font-weight: 400; font-size: .72rem; color: var(--steel-2); letter-spacing: .04em; }

.searchbox { flex: 1; position: relative; max-width: 520px; }
.searchbox input {
  width: 100%; font: inherit; font-size: .92rem; padding: 11px 40px 11px 14px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--porcelain);
}
.searchbox input:focus { background: #fff; border-color: var(--brass); outline: none; }
.results {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); background: #fff;
  border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow);
  max-height: 62vh; overflow: auto; display: none; z-index: 70;
}
.results.on { display: block; }
.results a { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--porcelain); align-items: center; }
.results a:hover, .results a:focus { background: var(--porcelain); }
.results .rc { font-family: var(--f-mono); font-size: .72rem; color: var(--brass); }
.results .empty { padding: 16px; color: var(--steel-2); font-size: .9rem; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600;
  padding: 11px 18px; border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; transition: transform .12s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--steel); }
.btn-brass { background: var(--brass); color: #fff; }
.btn-brass:hover { background: #855b1e; }
.btn-ghost { border-color: var(--rule); background: transparent; }
.btn-ghost:hover { border-color: var(--steel-2); }
.btn-wa { background: #1f8a4c; color: #fff; }
.btn-wa:hover { background: #196f3d; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.order-btn { position: relative; }
.order-btn .count {
  position: absolute; inset-block-start: -7px; inset-inline-end: -7px;
  background: var(--brass); color: #fff; font-family: var(--f-mono); font-size: .68rem;
  min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px;
}
.order-btn .count:empty, .order-btn .count[data-n="0"] { display: none; }

/* ── nav ───────────────────────────────────────────────── */
.nav { background: var(--steel); }
.nav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav .wrap::-webkit-scrollbar { display: none; }
.nav a {
  color: #dfe4e8; padding: 12px 14px; font-size: .9rem; white-space: nowrap;
  border-block-end: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current] { color: #fff; border-block-end-color: var(--brass-lit); }

/* ── the size rail: the spine of the whole catalogue ───── */
.rail {
  display: flex; gap: 0; font-family: var(--f-mono); font-size: .82rem;
  border-block: 1px solid var(--rule); background: var(--paper); overflow-x: auto; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail span, .rail a {
  padding: 9px 16px; border-inline-end: 1px solid var(--rule); color: var(--steel-2);
  white-space: nowrap; flex-shrink: 0;
}
.rail a:hover { color: var(--brass); background: var(--porcelain); }
.rail a[aria-current] { color: #fff; background: var(--steel); }

/* ── hero ──────────────────────────────────────────────── */
.hero { background: var(--paper); border-block-end: 1px solid var(--rule); }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; padding-block: 56px 48px; align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero .lede { font-size: 1.06rem; color: var(--steel); max-width: 46ch; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-plate {
  background: var(--porcelain); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 22px; position: relative;
}
.hero-plate .tag {
  display: block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em;
  color: var(--sand); margin-bottom: 14px; text-transform: uppercase;
}
.stat-row { display: flex; gap: 28px; margin-top: 26px; flex-wrap: wrap; }
.stat b { font-family: var(--f-display); font-size: 1.7rem; display: block; line-height: 1; }
.stat span { font-size: .8rem; color: var(--steel-2); }

.notice {
  background: #fbf3e2; border: 1px solid #ecd9ae; border-radius: var(--r);
  padding: 12px 16px; font-size: .88rem; color: #6c4e14; display: flex; gap: 10px;
}

/* ── sections & grids ──────────────────────────────────── */
section { padding-block: 52px; }
section.tight { padding-block: 34px; }
.grid { display: grid; gap: 18px; }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-2 { grid-template-columns: repeat(2, 1fr); }

/* category tile */
.tile {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform .15s;
}
.tile:hover { border-color: var(--brass); transform: translateY(-2px); }
.tile img { aspect-ratio: 4/3; object-fit: cover; background: var(--porcelain); }
.tile .body { padding: 16px 18px 18px; }
.tile h3 { margin-bottom: 4px; }
.tile p { font-size: .86rem; color: var(--steel-2); margin: 0; }
.tile .n { font-family: var(--f-mono); font-size: .72rem; color: var(--brass); }

/* product card */
.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: var(--steel-2); box-shadow: var(--shadow); }
.card .ph { position: relative; background: var(--porcelain); }
.card .ph img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.card .stock {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em; padding: 3px 8px;
  border-radius: var(--r); background: #fff; border: 1px solid var(--rule); color: var(--steel);
}
.card .stock.in { color: var(--ppr); border-color: #bfe0d1; }
.card .stock.out { color: var(--alarm); border-color: #e6c6c0; }
.card .body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .code { font-family: var(--f-mono); font-size: .7rem; color: var(--brass); letter-spacing: .04em; }
.card .nm { font-weight: 600; font-size: .95rem; line-height: 1.45; }
.card .meta { font-size: .78rem; color: var(--steel-2); display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.chip {
  font-family: var(--f-mono); font-size: .72rem; border: 1px solid var(--rule);
  padding: 1px 7px; border-radius: var(--r); color: var(--steel);
}
.card .act { padding: 0 16px 16px; }
.card .act .btn { width: 100%; justify-content: center; font-size: .88rem; padding: 10px 12px;
  background: var(--brand-pale); color: var(--brand-deep); border-color: transparent; font-weight: 600; }
.card .act .btn:hover { background: var(--brand); color: #fff; }
.card .act .btn[disabled] { background: var(--porcelain); color: var(--steel-2); }
.poa { font-family: var(--f-mono); font-size: .74rem; color: var(--steel-2); }

/* ── filters ───────────────────────────────────────────── */
.filters { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; padding-block: 18px; border-block-end: 1px solid var(--rule); }
.fgroup { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fgroup > b { font-size: .78rem; color: var(--steel-2); font-weight: 600; margin-inline-end: 4px; }
.fbtn {
  font: inherit; font-family: var(--f-mono); font-size: .76rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r); padding: 4px 10px; cursor: pointer;
}
.fbtn:hover { border-color: var(--brass); }
.fbtn[aria-pressed="true"] { background: var(--steel); color: #fff; border-color: var(--steel); }

/* ── long-tail SKU table ───────────────────────────────── */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); }
table.skus { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.skus th, table.skus td { padding: 9px 14px; text-align: start; border-block-end: 1px solid var(--porcelain); }
table.skus th { background: var(--porcelain); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-2); font-family: var(--f-mono); position: sticky; top: 0; }
table.skus td.c { font-family: var(--f-mono); font-size: .78rem; color: var(--brass); white-space: nowrap; }
table.skus tr:hover td { background: #fbfcfb; }
table.skus .add { font: inherit; font-size: .8rem; background: none; border: 1px solid var(--rule); border-radius: var(--r); padding: 3px 10px; cursor: pointer; }
table.skus .add:hover { border-color: var(--brass); color: var(--brass); }

/* ── product page ──────────────────────────────────────── */
.crumbs { font-size: .82rem; color: var(--steel-2); padding-block: 16px; }
.crumbs a:hover { color: var(--brass); }
.crumbs span { margin-inline: 6px; color: var(--rule); }
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding-block: 8px 52px; align-items: start; }
.pdp .shot { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 26px; }
.pdp .shot img { aspect-ratio: 1; object-fit: contain; }
.spec { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: .92rem; }
.spec th, .spec td { padding: 10px 0; border-block-end: 1px solid var(--rule); text-align: start; }
.spec th { color: var(--steel-2); font-weight: 500; width: 34%; }
.spec td { font-family: var(--f-mono); font-size: .88rem; }
.qty { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: #fff; }
.qty button { font: inherit; width: 40px; border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: var(--steel); }
.qty button:hover { background: var(--porcelain); }
.qty input { width: 62px; border: 0; text-align: center; font-family: var(--f-mono); font-size: .95rem; }
.pdp .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ── the signature: the supply-order slip ──────────────── */
.slip-scrim {
  position: fixed; inset: 0; background: rgba(18, 23, 28, .5); opacity: 0;
  pointer-events: none; transition: opacity .2s; z-index: 100;
}
.slip-scrim.on { opacity: 1; pointer-events: auto; }
.slip {
  position: fixed; inset-block: 0; inset-inline-end: 0; width: min(440px, 100%);
  background: var(--slip); z-index: 101; transform: translateX(var(--slide, 100%));
  transition: transform .28s cubic-bezier(.2, .7, .3, 1); display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -30px rgba(18, 23, 28, .6);
}
html[dir="rtl"] .slip { --slide: -100%; }
.slip.on { transform: translateX(0); }
/* perforated top edge — a real carbon-copy pad */
.slip::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 8px;
  background: repeating-linear-gradient(90deg, var(--slip) 0 6px, transparent 6px 12px);
  border-block-end: 1px dashed var(--slip-rule);
}
.slip header { padding: 24px 22px 14px; border-block-end: 2px solid var(--ink); }
.slip header h2 { font-size: 1.25rem; margin: 0; }
.slip .formno { font-family: var(--f-mono); font-size: .72rem; color: var(--steel-2); letter-spacing: .08em; }
.slip .close { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; background: none; border: 0; font-size: 1.5rem; cursor: pointer; line-height: 1; color: var(--steel-2); }
.slip .lines { flex: 1; overflow: auto; padding: 0 22px; }
.slip .line {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start;
  padding-block: 13px; border-block-end: 1px solid var(--slip-rule);
}
.slip .line .n { font-family: var(--f-mono); font-size: .78rem; color: var(--steel-2); padding-top: 2px; }
.slip .line .nm { font-size: .9rem; font-weight: 600; line-height: 1.4; }
.slip .line .sub { font-family: var(--f-mono); font-size: .72rem; color: var(--brass); }
.slip .line .rm { background: none; border: 0; color: var(--steel-2); cursor: pointer; font-size: .78rem; text-decoration: underline; padding: 0; }
.slip .line .qty { transform: scale(.86); transform-origin: inline-start center; }
.slip .empty { padding: 40px 0; color: var(--steel-2); font-size: .92rem; text-align: center; }
.slip footer { padding: 18px 22px 22px; border-block-start: 2px solid var(--ink); display: grid; gap: 10px; }
.slip footer .tot { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .82rem; }
.slip footer .btn { justify-content: center; }
.slip .fineprint { font-size: .76rem; color: var(--steel-2); line-height: 1.55; }

/* ── chat ──────────────────────────────────────────────── */
.chat-fab {
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 90;
  background: var(--steel); color: #fff; border: 0; border-radius: 40px; padding: 13px 20px;
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; box-shadow: var(--shadow);
}
.chat-fab:hover { background: var(--ink); }
.chat {
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 95;
  width: min(370px, calc(100vw - 32px)); height: min(540px, calc(100vh - 40px));
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow); display: none; flex-direction: column; overflow: hidden;
}
.chat.on { display: flex; }
.chat header { background: var(--ink); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.chat header b { font-family: var(--f-display); font-size: 1rem; }
.chat header .close { margin-inline-start: auto; background: none; border: 0; color: #aab2b9; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.chat .log { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 10px; font-size: .9rem; line-height: 1.6; }
.msg.bot { background: var(--porcelain); align-self: flex-start; border-start-start-radius: 2px; }
.msg.me { background: var(--steel); color: #fff; align-self: flex-end; border-end-end-radius: 2px; }
.qr { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 12px; }
.qr button { font: inherit; font-size: .78rem; background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 5px 11px; cursor: pointer; }
.qr button:hover { border-color: var(--brass); color: var(--brass); }
.chat form { display: flex; border-block-start: 1px solid var(--rule); }
.chat input { flex: 1; border: 0; padding: 13px 15px; font: inherit; font-size: .9rem; }
.chat input:focus { outline: none; }
.chat form button { border: 0; background: var(--brass); color: #fff; padding: 0 18px; font: inherit; font-weight: 600; cursor: pointer; }

/* ── prose blocks ──────────────────────────────────────── */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px 24px; }
details.faq { border-block-end: 1px solid var(--rule); padding-block: 4px; }
details.faq summary { cursor: pointer; font-weight: 600; padding-block: 14px; list-style: none; display: flex; gap: 12px; align-items: baseline; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: '+'; font-family: var(--f-mono); color: var(--brass); }
details.faq[open] summary::before { content: '−'; }
details.faq .a { padding-block-end: 16px; color: var(--steel); }

/* ── footer ────────────────────────────────────────────── */
footer.foot { background: var(--ink); color: #b7bfc6; padding-block: 46px 26px; margin-top: 40px; font-size: .9rem; }
footer.foot h4 { color: #fff; font-family: var(--f-display); font-size: .95rem; margin: 0 0 12px; }
footer.foot a:hover { color: #fff; }
footer.foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
footer.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
footer.foot .legal { border-block-start: 1px solid #263039; margin-top: 34px; padding-top: 18px; font-size: .8rem; color: #7d8892; display: flex; gap: 16px; flex-wrap: wrap; }

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 30px; padding-block: 38px; }
  .pdp { grid-template-columns: 1fr; gap: 26px; }
  .g-4 { grid-template-columns: repeat(3, 1fr); }
  footer.foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .head .wrap { flex-wrap: wrap; min-height: 0; padding-block: 12px; gap: 12px; }
  .searchbox { order: 3; flex-basis: 100%; max-width: none; }
  .g-4, .g-3 { grid-template-columns: repeat(2, 1fr); }
  section { padding-block: 36px; }
  .chat-fab { inset-block-end: 14px; inset-inline-end: 14px; padding: 11px 16px; }
}
@media (max-width: 420px) {
  .g-4, .g-3, .g-2 { grid-template-columns: 1fr; }
}

@media print {
  .topbar, .nav, .chat, .chat-fab, .slip-scrim, .searchbox, .foot { display: none !important; }
  .slip { position: static; transform: none; width: 100%; box-shadow: none; }
  body { background: #fff; }
}


/* ── photographic hero ──────────────────────────────────── */
.hero { position: relative; background: var(--ink); color: #fff; border: 0; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: url('/img/hero-showroom.jpg') center/cover no-repeat;
  opacity: .30; transform: scale(1.03);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(15,34,49,.92), rgba(18,58,94,.80));
}
html[dir="rtl"] .hero::after { background: linear-gradient(to bottom, rgba(15,34,49,.92), rgba(18,58,94,.80)); }
.hero .wrap { position: relative; z-index: 2; padding-block: 76px 66px; }
.hero h1 { color: #fff; }
.hero .lede { color: #D6E3EE; }
.hero .eyebrow { color: var(--sand); }
.hero .eyebrow::after { background: rgba(255,255,255,.22); }
.hero .stat b { color: #fff; }
.hero .stat span { color: #A9C0D2; }
.hero-plate { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); backdrop-filter: blur(3px); }

.hero-plate .rail { background: transparent; }
.hero-plate .rail span { color: #C3D5E3; border-inline-end-color: rgba(255,255,255,.16); }
.hero .notice { background: rgba(201,138,46,.14); border-color: rgba(201,138,46,.4); color: #F2DFBE; }

.head .logo img { height: 54px; width: auto; display: block; }
@media (max-width: 720px) { .head .logo img { height: 42px; } }

/* photo-first category tiles */
.tile { position: relative; }
.tile img { aspect-ratio: 3/2; }
.tile .body { position: relative; }
.tile:hover { border-color: var(--brand); }

/* product photos sit on white, not grey — they were shot on white */
.card .ph { background: #fff; border-block-end: 1px solid var(--porcelain); }
.card .ph img { object-fit: cover; }
.card .ph img[src$=".svg"] { object-fit: contain; background: var(--porcelain); }

.eyebrow { color: var(--brand); }
.btn-brass { background: var(--brand); }
.btn-brass:hover { background: var(--brand-deep); }
.card .code, .results .rc, .crumbs a:hover, .rail a:hover { color: var(--brand); }
.slip .line .sub { color: var(--sand); }
.chat form button { background: var(--brand); }
.order-btn .count { background: var(--sand); }
.nav a:hover, .nav a[aria-current] { border-block-end-color: var(--brand-lit); }
.nav { background: var(--navy); }
footer.foot { background: var(--ink); }

/* showroom strip */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.strip img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); }
@media (max-width: 720px) { .strip { grid-template-columns: repeat(2, 1fr); } }

/* how-it-works list, replacing the size rail in the hero */
.how { list-style: none; counter-reset: s; margin: 4px 0 0; padding: 0; display: grid; gap: 11px; }
.how li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: #D6E3EE; }
.how li::before {
  content: counter(s); flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-family: var(--f-mono); font-size: .78rem;
  display: grid; place-items: center; margin-top: 1px;
}

/* long-form article typography */
.article { font-size: 1.02rem; line-height: 1.92; color: var(--ink); }
.article h2 { font-size: 1.4rem; margin: 1.7em 0 .5em; }
.article h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.article p { margin: 0 0 1.05em; }
.article ul, .article ol { padding-inline-start: 1.3em; margin: 0 0 1.2em; }
.article li { margin-bottom: .5em; }
.article table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .93rem; }
.article th, .article td { padding: 10px 12px; border: 1px solid var(--rule); text-align: start; }
.article th { background: var(--brand-pale); font-weight: 600; }
.article blockquote { margin: 1.4em 0; padding: 14px 18px; background: var(--brand-pale); border-inline-start: 3px solid var(--brand); border-radius: var(--r); }
.article a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.article img { border-radius: var(--r); margin: 1.2em 0; }

/* photographic band at the head of a category */
.band { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.band::before { content: ''; position: absolute; inset: 0; background: var(--band) center/cover no-repeat; opacity: .42; }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,34,49,.86), rgba(18,58,94,.72)); }
.band .wrap { position: relative; z-index: 2; padding-block: 52px 44px; }
.band h1 { color: #fff; margin-bottom: .25em; }
.band .eyebrow { color: var(--sand); }
.band .eyebrow::after { background: rgba(255,255,255,.22); }
.band .mono { font-size: .84rem; color: #BCD0DF; margin: 0; }

/* horizontal scroller — swipe on a phone, arrows on a desktop */
.railhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.railnav { display: flex; gap: 8px; flex-shrink: 0; }
.rnav {
  width: 40px; height: 40px; border: 1px solid var(--rule); background: var(--paper);
  border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--brand);
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.rnav:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
html[dir="rtl"] .rnav { transform: scaleX(-1); }

.scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 25%);
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > figure { margin: 0; scroll-snap-align: start; }
.scroller img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r); display: block; }
@media (max-width: 900px) { .scroller { grid-auto-columns: minmax(200px, 45%); } .railnav { display: none; } }
@media (max-width: 480px) { .scroller { grid-auto-columns: minmax(170px, 68%); } }

.postimg { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r); margin-bottom: 26px; }


/* founder block — portrait was rendering at full height and starving the copy */
.founder { display: grid; grid-template-columns: .8fr 1.2fr; gap: 42px; align-items: center; }
.founder img { aspect-ratio: 4/5; object-fit: cover; object-position: center 22%; border-radius: var(--r); width: 100%; }
.timeline { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding-block: 13px; border-block-end: 1px solid var(--rule); }
.timeline li:last-child { border-block-end: 0; }
.timeline b { font-family: var(--f-mono); font-size: .84rem; color: var(--brand); padding-top: 2px; }
.timeline span { font-size: .93rem; color: var(--steel); line-height: 1.65; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; gap: 24px; } .founder img { aspect-ratio: 16/10; } }


/* section buying guide — the substance answer engines can actually quote */
.guidegrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; }
.guidetext { font-size: 1rem; line-height: 1.95; color: var(--steel); max-width: 62ch; }
.qa { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 4px 20px; }
@media (max-width: 900px) { .guidegrid { grid-template-columns: 1fr; gap: 24px; } }


/* == mobile refinements =====================================
   From a real-device audit on an Android phone, Aug 2026. */

/* iOS Safari force-zooms the page when a user taps an input rendering
   below 16px. The search box was at 14.7px. */
@media (max-width: 720px) {
  .searchbox input,
  input[type="search"],
  input[type="text"],
  input[type="tel"],
  textarea,
  select { font-size: 16px; }
}

/* The help button is position:fixed, so it permanently covers whatever
   sits in the bottom inline-end corner. On phones it was landing on top
   of product cards and filter chips. Shrink it, and give the footer room
   so the last row of content is never trapped underneath. */
@media (max-width: 480px) {
  .chat-fab { padding: 9px 13px; font-size: .8rem; max-width: 42vw; }
}
@media (max-width: 720px) {
  .foot { padding-block-end: 76px; }
}

/* The section nav scrolls sideways but hides its scrollbar, so on a phone
   it just looks like the row was cut off mid-word. Fade the trailing edge
   so it reads as scrollable. */
@media (max-width: 720px) {
  .nav { position: relative; }
  .nav .wrap { scroll-padding-inline: 12px; }
  .nav::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 32px;
    pointer-events: none;
    background: linear-gradient(to left, var(--steel), transparent);
  }
  [dir="rtl"] .nav::after {
    background: linear-gradient(to right, var(--steel), transparent);
  }
}

/* The founder photo is 800x1000, a 4:5 portrait. Below 860px it was being
   forced into a 16/10 landscape box with object-fit:cover, which crops away
   roughly half the frame. Show it at its own ratio instead — no crop at all —
   and cap the width so a full-bleed portrait doesn't swallow the screen. */
@media (max-width: 860px) {
  .founder img {
    aspect-ratio: 4 / 5;
    object-position: center 18%;
    max-width: 320px;
    margin-inline: auto;
    display: block;
  }
}

/* hero dead zone on phones.
   The showroom photo sits at 30% opacity underneath a near-opaque dark
   gradient, so on a small screen the top of the page reads as an empty
   navy band rather than an image. Two changes: tighten the vertical
   padding so real content reaches the fold sooner, and let a little more
   of the photograph through. The gradient still carries the text
   contrast, so the copy stays legible. */
@media (max-width: 720px) {
  .hero .wrap { padding: 26px 18px 30px; }
  .hero::before { opacity: .42; }
}
@media (max-width: 480px) {
  .hero .wrap { padding: 20px 16px 26px; }
}