/* Kian Parts Co — kianparts.co
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * genre: modern-minimal · theme: custom (KPC Brand Standards §1, closed palette)
 * Every colour and family below is a token; nothing else is allowed in the file. */

@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-600-800.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); font-weight: 600 800; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  /* brand fills (Brand Standards §1) and their shades — no other hue exists on this site */
  --ink: #1B262C;
  --ink-deep: #141D22;
  --ink-flap: #0E1519;
  --deep: #0F4C75;
  --signal: #3282B8;
  --white: #FFFFFF;
  --paper: #F3F5F7;
  --rule: #DCE2E7;
  --rule-strong: #B9C4CC;
  --text: #1B262C;
  --text-2: #44525C;
  --text-3: #5E6D77;
  --text-4: #7D8B95;
  --on-ink: #FFFFFF;
  --on-ink-2: rgba(255, 255, 255, 0.74);
  --on-ink-3: rgba(255, 255, 255, 0.56);
  --rule-ink: rgba(255, 255, 255, 0.12);
  --rule-ink-strong: rgba(255, 255, 255, 0.24);
  --stroke-ink: rgba(255, 255, 255, 0.15);
  --hit: rgba(50, 130, 184, 0.16);
  --shadow-flap: rgba(0, 0, 0, 0.5);

  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-text: "Barlow", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --maxw: 1440px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --radius: 10px;
  --radius-lg: 16px;
  --nav-h: 72px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 480ms;

  color-scheme: light;
}

:root:lang(ar) {
  --font-display: "IBM Plex Sans Arabic", "Archivo", Arial, sans-serif;
  --font-text: "IBM Plex Sans Arabic", "Barlow", Arial, sans-serif;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
html:lang(ar) { font-size: 103%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--font-text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-style: normal; font-weight: 700; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--signal); color: var(--white); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; padding: 12px 16px; background: var(--white); color: var(--ink); border-radius: var(--radius); font-weight: 600; }
.skip:focus { top: 12px; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font: 500 0.8125rem/1.2 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
  margin-block-end: 20px;
}
.eyebrow::before { content: ""; inline-size: 28px; block-size: 2px; background: var(--signal); flex: none; }
.eyebrow--ink { color: var(--on-ink-2); }
:lang(ar) .eyebrow { letter-spacing: 0; font-family: var(--font-text); font-weight: 600; font-size: 0.875rem; }

.h2 {
  font: 800 clamp(2rem, 1.1rem + 2.6vw, 3.5rem)/1.02 var(--font-display);
  letter-spacing: -0.025em;
}
:lang(ar) .h2 { letter-spacing: 0; line-height: 1.25; font-weight: 600; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 52px; padding: 0 28px;
  border: 0; border-radius: var(--radius);
  font: 600 1rem/1 var(--font-text); letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.btn--deep { background: var(--deep); color: var(--white); }
.btn--deep:hover { background: var(--ink); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--deep); }
.link { background: none; border: 0; padding: 4px 0; color: var(--text-2); text-decoration: underline; text-underline-offset: 0.2em; font-size: 0.9375rem; }
.link:hover { color: var(--ink); }

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-block-end: 1px solid var(--rule-ink);
  color: var(--on-ink);
  color-scheme: dark;
}
.nav__inner { display: flex; align-items: center; gap: 32px; block-size: var(--nav-h); }
.nav__brand { display: block; flex: none; padding-block: 6px; }
.nav__brand img { inline-size: 104px; block-size: auto; }
.nav__links { display: flex; gap: 28px; margin-inline-start: auto; }
.nav__links a, .nav__lang {
  color: var(--on-ink-2); text-decoration: none; font-weight: 500; font-size: 0.9375rem; white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.nav__links a:hover, .nav__lang:hover { color: var(--on-ink); }
.nav__end { display: flex; align-items: center; gap: 20px; }
.nav__lang { font-family: var(--font-text); }
.nav__lang:lang(ar) { font-family: "IBM Plex Sans Arabic", var(--font-text); font-size: 1rem; }
.nav__quote {
  display: inline-flex; align-items: center; gap: 10px;
  min-block-size: 40px; padding: 0 8px 0 16px;
  border: 1px solid var(--rule-ink-strong); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
:dir(rtl) .nav__quote, [dir="rtl"] .nav__quote { padding: 0 16px 0 8px; }
.nav__quote:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.nav__count, .basket__n {
  display: inline-grid; place-items: center; min-inline-size: 26px; block-size: 26px; padding: 0 7px;
  border-radius: 999px; background: var(--signal); color: var(--white);
  font: 500 0.8125rem/1 var(--font-mono);
}
.nav__count.is-bump { animation: bump var(--dur-long) var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.28); } 100% { transform: scale(1); } }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__end { margin-inline-start: auto; gap: 14px; }
  .nav__brand img { inline-size: 92px; }
}

/* ---------------------------------------------------------------- hero */
.hero { background: var(--ink); color: var(--on-ink); color-scheme: dark; overflow: clip; }
.hero__inner { padding-block: clamp(40px, 7vw, 96px) clamp(32px, 4vw, 56px); }
.hero__title {
  font: 800 clamp(3.25rem, 9.4vw, 8.75rem)/0.9 var(--font-display);
  letter-spacing: -0.045em;
  margin-block-end: clamp(32px, 4.5vw, 64px);
}
.hero__line { display: block; }
.hero__dot { color: var(--signal); }
:lang(ar) .hero__title { letter-spacing: 0; line-height: 1.12; font-weight: 600; font-size: clamp(3rem, 10vw, 9rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}
.hero__lede { max-inline-size: 40ch; font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.5; color: var(--on-ink-2); margin-block-end: 40px; }

.lookup__label { display: block; font: 600 0.9375rem/1.3 var(--font-text); margin-block-end: 12px; }
.lookup__field, .filter { position: relative; }
.lookup__icon, .filter__icon {
  position: absolute; inset-inline-start: 18px; top: 50%; inline-size: 22px; block-size: 22px; translate: 0 -50%;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; pointer-events: none; opacity: 0.7;
}
.lookup input {
  inline-size: 100%; min-block-size: 64px;
  padding: 0 56px 0 54px;
  background: var(--ink-deep); color: var(--on-ink);
  border: 1px solid var(--rule-ink-strong); border-radius: var(--radius);
  font: 500 1.25rem/1 var(--font-mono); letter-spacing: 0.02em;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
[dir="rtl"] .lookup input { text-align: right; padding: 0 54px 0 56px; }
.lookup input::placeholder { color: var(--on-ink-3); font-size: 1.0625rem; }
.lookup input:hover { border-color: var(--on-ink-3); }
.lookup input:focus { outline: none; border-color: var(--signal); background: var(--ink-flap); box-shadow: 0 0 0 3px rgba(50, 130, 184, 0.35); }
.lookup input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.6; }
.lookup kbd {
  position: absolute; inset-inline-end: 16px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; inline-size: 28px; block-size: 28px;
  border: 1px solid var(--rule-ink-strong); border-radius: 6px;
  font: 500 0.875rem/1 var(--font-mono); color: var(--on-ink-3);
}
.lookup input:focus ~ kbd, .lookup input:not(:placeholder-shown) ~ kbd { opacity: 0; }
@media (hover: none), (max-width: 760px) { .lookup kbd { display: none; } .lookup input { padding-inline-end: 16px; } }
@media (max-width: 560px) { .lookup input { font-size: 1.0625rem; } .lookup input::placeholder { font-size: 0.9375rem; } }
.lookup__hint { margin-block-start: 12px; font-size: 0.9375rem; color: var(--on-ink-3); }

.lookup__results:empty { display: none; }
.lookup__results { margin-block-start: 16px; border-block-start: 1px solid var(--rule-ink); }
.hit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  padding-block: 14px; border-block-end: 1px solid var(--rule-ink);
}
.hit__code { font: 500 1.125rem/1.2 var(--font-mono); }
.hit__what { grid-column: 1; font-size: 0.9375rem; color: var(--on-ink-2); }
.hit__match { color: var(--on-ink); }
.hit__match b { font-family: var(--font-mono); font-weight: 500; }
.hit .part__add { grid-column: 2; grid-row: 1 / span 2; }
.hits__more { display: inline-block; margin-block-start: 14px; color: var(--on-ink); font-weight: 600; }
.hits__none { padding-block: 16px; color: var(--on-ink-2); }
.hits__none b { color: var(--on-ink); font-family: var(--font-mono); font-weight: 500; }

/* the board */
.board {
  container-type: inline-size;
  position: relative;
  background: var(--ink-deep);
  border: 1px solid var(--rule-ink);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2.2vw, 28px);
}
.board__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  font: 500 0.8125rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  padding-block-end: 16px; margin-block-end: 14px; border-block-end: 1px solid var(--rule-ink);
}
:lang(ar) .board__head { letter-spacing: 0; font-family: var(--font-text); font-weight: 600; font-size: 0.875rem; }
.board__title { color: var(--on-ink); }
.board__updated { color: var(--on-ink-3); }
.board__cols, .board__row {
  --cell: clamp(8px, calc((100cqi - 60px) / 32.5), 26px);
  display: grid;
  grid-template-columns: calc(var(--cell) * 11 + 20px) minmax(0, 1fr);
  grid-template-areas: "code desc";
  align-items: center; column-gap: calc(var(--cell) * 0.9);
}
.board__cols {
  font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-3);
  margin-block-end: 10px;
}
:lang(ar) .board__cols { letter-spacing: 0; font-family: var(--font-text); font-size: 0.8125rem; }
.board__cols span:last-child { text-align: end; }
.board__rows { display: grid; gap: calc(var(--cell, 16px) * 0.5); direction: ltr; }
.board__row { min-block-size: calc(var(--cell) * 1.5); }
.flaps { display: flex; gap: 2px; min-width: 0; }
.flaps--code { grid-area: code; }
.flaps--desc { grid-area: desc; }
.f {
  position: relative; flex: none;
  display: grid; place-items: center;
  inline-size: var(--cell); block-size: calc(var(--cell) * 1.45);
  background: var(--ink-flap); color: var(--paper);
  border-radius: 2px;
  font: 500 calc(var(--cell) * 0.82)/1 var(--font-mono);
  transform-origin: 50% 50%;
}
.f::after { content: ""; position: absolute; inset-inline: 0; top: 50%; block-size: 1px; background: var(--shadow-flap); }
.f.is-flip { animation: flip 150ms var(--ease-out); }
@keyframes flip { from { transform: scaleY(0.12); } to { transform: scaleY(1); } }
.board__tick { display: block; block-size: 2px; margin-block-start: 18px; background: var(--rule-ink); overflow: hidden; border-radius: 2px; }
.board__tick span { display: block; block-size: 100%; inline-size: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }
.board__tick span.is-run { animation: tick var(--tick, 2600ms) linear forwards; }
@keyframes tick { to { transform: scaleX(1); } }

@container (max-width: 520px) {
  .board__cols { display: none; }
  .board__row {
    --cell: clamp(8px, calc((100cqi - 40px) / 20.6), 19px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "code" "desc";
    row-gap: 6px; padding-block: 4px 8px; border-block-end: 1px solid var(--rule-ink);
  }
  .board__row:last-child { border-block-end: 0; }
}

/* the ticker */
.ticker { overflow: clip; border-block-start: 1px solid var(--rule-ink); padding-block: clamp(16px, 2.4vw, 32px); }
.ticker__track {
  white-space: nowrap; inline-size: max-content;
  font: 800 clamp(4rem, 13vw, 12.5rem)/1 var(--font-display); letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px var(--stroke-ink);
  will-change: transform;
}

/* first-load sequence — the one orchestrated moment */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero__line, .hero__lede, .lookup, .board {
    opacity: 0; transform: translateY(14px);
    animation: rise var(--dur-long) var(--ease-out) forwards;
  }
  .hero .eyebrow { animation-delay: 40ms; }
  .hero__line:nth-child(1) { animation-delay: 110ms; }
  .hero__line:nth-child(2) { animation-delay: 190ms; }
  .hero__lede { animation-delay: 300ms; }
  .lookup { animation-delay: 360ms; }
  .board { animation-delay: 420ms; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__lede { margin-block-end: 28px; }
}

/* ---------------------------------------------------------------- shelf */
.shelf { padding-block: clamp(72px, 9vw, 140px); }
.shelf__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.shelf__head { position: sticky; top: calc(var(--nav-h) + 32px); }
.shelf__head .h2 { margin-block-end: 32px; }
.shelf__tools { display: grid; gap: 16px; }
.filter input {
  inline-size: 100%; min-block-size: 52px; padding: 0 16px 0 50px;
  background: var(--white); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font: 500 1.0625rem/1 var(--font-mono);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
[dir="rtl"] .filter input { text-align: right; padding: 0 50px 0 16px; }
.filter input::placeholder { font-family: var(--font-text); color: var(--text-3); font-size: 1rem; }
:lang(ar) .filter input::placeholder { font-family: "IBM Plex Sans Arabic", var(--font-text); }
.filter input:hover { border-color: var(--text-3); }
.filter input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--hit); }
.filter__icon { color: var(--text-3); inset-inline-start: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 40px; padding: 0 16px;
  background: var(--white); border: 1px solid var(--rule-strong); border-radius: 999px;
  font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.chip span { font: 500 0.8125rem/1 var(--font-mono); color: var(--text-3); }
.chip:hover { border-color: var(--ink); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip[aria-pressed="true"] span { color: var(--on-ink-2); }

.group + .group { margin-block-start: clamp(48px, 6vw, 88px); }
.group__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 24px;
  padding-block-end: 16px; border-block-end: 2px solid var(--ink);
}
.group__head h3 { font: 800 clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem)/1 var(--font-display); letter-spacing: -0.02em; }
:lang(ar) .group__head h3 { letter-spacing: 0; font-weight: 600; line-height: 1.3; }
.group__head p { grid-row: 2; font: 500 0.8125rem/1.3 var(--font-mono); letter-spacing: 0.06em; color: var(--text-3); text-transform: uppercase; }
:lang(ar) .group__head p { text-align: end; justify-self: start; }
.group__n { grid-row: 1 / span 2; grid-column: 2; font: 800 clamp(2.75rem, 2rem + 2vw, 4rem)/0.85 var(--font-display); color: var(--text-4); letter-spacing: -0.04em; }

.part {
  display: grid;
  grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr) auto;
  grid-template-areas: "code what add" ". alt alt";
  align-items: center; gap: 6px 24px;
  padding-block: 20px; border-block-end: 1px solid var(--rule);
  transition: background-color var(--dur-short) var(--ease-out);
}
.part__code { grid-area: code; font: 500 1.375rem/1.15 var(--font-mono); letter-spacing: -0.01em; overflow-wrap: anywhere; }
[dir="rtl"] .part__code { text-align: right; }
.part__what { grid-area: what; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.part__kind { font-weight: 600; }
.part__make { color: var(--text-3); font-size: 0.9375rem; }
.part__alt { grid-area: alt; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; min-width: 0; }
.part__alt:empty { display: none; }
.part__alt-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }
.part__alt ul { display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.part__alt li { font: 400 0.875rem/1.5 var(--font-mono); color: var(--text-2); border-radius: 4px; }
.part__alt li span { font-family: var(--font-text); font-weight: 500; color: var(--text-3); }
.part__alt li.is-hit { background: var(--hit); color: var(--ink); box-shadow: 0 0 0 4px var(--hit); }

.part__add {
  grid-area: add;
  display: inline-grid; align-items: center;
  min-block-size: 40px; padding: 0 16px;
  background: transparent; border: 1px solid var(--ink); border-radius: var(--radius);
  font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.part__add > span { grid-area: 1 / 1; text-align: center; transition: opacity var(--dur-micro) var(--ease-out); }
.part__add-on { opacity: 0; }
.part__add:hover { background: var(--ink); color: var(--white); }
.part__add:active { transform: translateY(1px); }
.part__add[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--white); }
.part__add[aria-pressed="true"] .part__add-off { opacity: 0; }
.part__add[aria-pressed="true"] .part__add-on { opacity: 1; }
.part__add[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--ink); }
.hero .part__add { border-color: var(--rule-ink-strong); color: var(--on-ink); }
.hero .part__add:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.hero .part__add[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--white); }

.part.is-target { background: var(--paper); }
.shelf__none { padding: 40px 0; border-block-start: 2px solid var(--ink); display: grid; gap: 12px; justify-items: start; }
.shelf__none-title { font: 800 1.75rem/1.1 var(--font-display); letter-spacing: -0.02em; }
:lang(ar) .shelf__none-title { letter-spacing: 0; font-weight: 600; }
.shelf__none-title b { font-family: var(--font-mono); font-weight: 500; }
.shelf__none p:not(.shelf__none-title) { color: var(--text-2); }

@media (max-width: 960px) {
  .shelf__grid { grid-template-columns: minmax(0, 1fr); }
  .shelf__head { position: static; }
}
@media (max-width: 640px) {
  .part {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "code add" "what add" "alt alt";
    gap: 8px 16px;
  }
  .part__add { align-self: center; }
}

/* directory results */
.shelf__lede { color: var(--text-2); max-inline-size: 40ch; margin-block: -12px 28px; }
.range__title, .dir__count {
  font: 500 0.8125rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
  padding-block-end: 14px; margin-block-end: 8px; border-block-end: 2px solid var(--ink);
}
:lang(ar) .range__title, :lang(ar) .dir__count { letter-spacing: 0; font-family: var(--font-text); font-weight: 600; font-size: 0.9375rem; }
.range .group:first-of-type { margin-block-start: 32px; }
.part--dir { grid-template-areas: "code what add" "alt alt alt"; align-items: start; }
.part--dir .part__add { align-self: start; }
.part__alt--dir { display: grid; gap: 10px; margin-block-start: 8px; padding-inline-start: 0; }
.part__match { font-size: 0.9375rem; color: var(--ink); }
.part__match b { font-family: var(--font-mono); font-weight: 500; background: var(--hit); padding: 1px 6px; border-radius: 4px; }
.part__fits { font-size: 0.9375rem; color: var(--text-2); }
.xref { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.xref > .part__alt-label { flex: none; min-inline-size: 9.5rem; }
.xref ul { display: flex; flex-wrap: wrap; gap: 2px 14px; min-width: 0; }
.xref li { font: 400 0.875rem/1.6 var(--font-mono); color: var(--text-2); border-radius: 4px; }
.xref li span { font-family: var(--font-text); font-weight: 500; color: var(--text-3); }
.xref li.is-hit { background: var(--hit); color: var(--ink); box-shadow: 0 0 0 4px var(--hit); }
.xref__more { flex-basis: 100%; padding-inline-start: calc(9.5rem + 12px); }
.xref__more summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--deep); inline-size: max-content; }
.xref__more summary:hover { text-decoration: underline; }
.xref__more[open] summary { margin-block-end: 6px; }
.tag {
  display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--rule-strong); color: var(--text-2);
  font: 600 0.75rem/1.4 var(--font-text); vertical-align: 1px;
}
@media (max-width: 640px) {
  .part--dir { grid-template-areas: "code add" "what what" "alt alt"; }
  .xref > .part__alt-label { min-inline-size: 0; flex-basis: 100%; }
  .xref__more { padding-inline-start: 0; }
}

/* ---------------------------------------------------------------- statement */
.statement { background: var(--deep); color: var(--white); color-scheme: dark; }
.statement__inner { padding-block: clamp(88px, 12vw, 184px); display: grid; gap: 32px; }
.statement__h { font: 800 clamp(2.5rem, 1rem + 5.6vw, 6.25rem)/0.98 var(--font-display); letter-spacing: -0.035em; max-inline-size: 15ch; }
:lang(ar) .statement__h { letter-spacing: 0; line-height: 1.25; font-weight: 600; max-inline-size: 18ch; }
.statement__p { max-inline-size: 44ch; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); color: rgba(255, 255, 255, 0.82); }

/* ---------------------------------------------------------------- order */
.order { padding-block: clamp(72px, 9vw, 140px); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); counter-reset: step; }
.step { border-block-start: 2px solid var(--ink); padding-block-start: 24px; display: grid; gap: 12px; align-content: start; }
.step__n { font: 500 0.875rem/1 var(--font-mono); color: var(--deep); letter-spacing: 0.08em; }
.step h3 { font: 800 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.05 var(--font-display); letter-spacing: -0.02em; }
:lang(ar) .step h3 { letter-spacing: 0; font-weight: 600; line-height: 1.3; }
.step p { color: var(--text-2); max-inline-size: 36ch; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- quote */
.quote { background: var(--paper); padding-block: clamp(72px, 9vw, 140px); }
.quote__grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-areas: "head basket" "head form";
  gap: 24px clamp(32px, 5vw, 88px); align-items: start;
}
.quote__head { grid-area: head; position: sticky; top: calc(var(--nav-h) + 32px); }
.quote__head .h2 { margin-block-end: 16px; }
.quote__lede { color: var(--text-2); max-inline-size: 30ch; }
.quote__wa { margin-block-start: 16px; color: var(--text-2); max-inline-size: 30ch; }
.quote__wa a { color: var(--deep); font-weight: 600; white-space: nowrap; }
.btn--wa { background: var(--white); color: var(--ink); text-decoration: none; }
.btn--wa:hover { background: var(--paper); }
.form__done p:not(.form__done-title) { color: var(--on-ink-2); }
.basket, .form { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 36px); }
.basket { grid-area: basket; }
.basket__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-block-end: 8px; }
.basket__head h3 { display: flex; align-items: center; gap: 12px; font: 700 1.25rem/1.2 var(--font-display); }
:lang(ar) .basket__head h3 { font-weight: 600; }
.basket__empty { color: var(--text-3); padding-block: 12px 4px; }
.basket__list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px 16px;
  padding-block: 14px; border-block-end: 1px solid var(--rule);
}
.basket__list li:last-child { border-block-end: 0; }
.basket__code { font: 500 1.125rem/1.2 var(--font-mono); }
.basket__what { display: block; font-family: var(--font-text); font-size: 0.875rem; color: var(--text-3); }
.basket__qty, .basket__brand { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--text-3); }
.basket__brand select {
  inline-size: 10rem; min-block-size: 44px; padding: 0 10px;
  border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--white); color: var(--text);
  font: 500 0.9375rem/1 var(--font-text);
}
.basket__brand select:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--hit); }
.basket__qty input {
  inline-size: 7.5rem; min-block-size: 44px; padding: 0 12px;
  border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--white);
  font: 500 1rem/1 var(--font-mono); text-align: end;
}
.basket__qty input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--hit); }
.basket__remove {
  display: grid; place-items: center; inline-size: 40px; block-size: 40px;
  background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text-3);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.basket__remove:hover { background: var(--paper); color: var(--ink); }
.basket__remove svg { inline-size: 18px; block-size: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.basket__list li.is-new { animation: rise var(--dur-long) var(--ease-out) both; }
@media (max-width: 760px) {
  .basket__list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .basket__code { grid-column: 1 / 3; }
  .basket__brand, .basket__qty { grid-row: 2; }
  .basket__brand select { inline-size: 100%; }
  .basket__qty input { inline-size: 100%; }
  .basket__brand, .basket__qty { min-width: 0; }
  .basket__brand > span, .basket__qty > span { flex: none; }
  .basket__remove { grid-column: 3; grid-row: 1 / span 2; }
}

.form { grid-area: form; position: relative; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field__opt { font-weight: 400; color: var(--text-3); }
.field input, .field textarea {
  inline-size: 100%; min-block-size: 52px; padding: 12px 14px;
  background: var(--white); border: 1px solid var(--rule-strong); border-radius: 8px;
  font-size: 1.0625rem; line-height: 1.4;
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.field textarea { resize: vertical; min-block-size: 120px; }
.field input:hover, .field textarea:hover { border-color: var(--text-3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--hit); }
.field input[aria-invalid="true"] { border: 2px solid var(--deep); }
[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
.hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.form__error {
  display: flex; gap: 10px; align-items: flex-start;
  margin-block-start: 20px; padding: 14px 16px;
  background: var(--paper); border-inline-start: 3px solid var(--deep); border-radius: 6px;
  font-weight: 500;
}
.form__error::before { content: "!"; display: grid; place-items: center; flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--deep); color: var(--white); font: 700 0.875rem/1 var(--font-text); }
.form__error a { font-weight: 600; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-block-start: 28px; }
.form__privacy { font-size: 0.875rem; color: var(--text-3); }
.form__done {
  display: grid; gap: 10px; padding: 28px; margin-block-start: 8px;
  background: var(--ink); color: var(--white); border-radius: var(--radius);
}
.form__done:focus { outline: none; }
.form__done-title { font: 700 1.375rem/1.25 var(--font-display); }
:lang(ar) .form__done-title { font-weight: 600; }
.form.is-done .form__grid, .form.is-done .form__foot { display: none; }
@media (max-width: 960px) {
  .quote__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "basket" "form"; }
  .quote__head { position: static; }
}
@media (max-width: 560px) {
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .form__foot .btn { inline-size: 100%; }
}

/* ---------------------------------------------------------------- footer */
.footer { background: var(--ink); color: var(--on-ink); color-scheme: dark; padding-block: clamp(72px, 9vw, 128px) 32px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 5vw, 88px); }
.footer__about p { max-inline-size: 40ch; font-size: 1.125rem; color: var(--on-ink-2); }
.footer__about p + p { margin-block-start: 12px; }
.footer__muted { color: var(--on-ink-3) !important; font-size: 1rem !important; }
.footer__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.footer__facts dt { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-3); margin-block-end: 12px; }
:lang(ar) .footer__facts dt { letter-spacing: 0; font-family: var(--font-text); font-weight: 600; font-size: 0.875rem; }
.footer__facts dd { line-height: 1.6; }
.footer__facts a { color: var(--on-ink); white-space: nowrap; }
.footer__facts a:hover { color: var(--signal); }
.footer__mark { inline-size: min(100%, 980px); margin-block: clamp(72px, 10vw, 140px) clamp(40px, 5vw, 64px); }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding-block-start: 24px; border-block-start: 1px solid var(--rule-ink);
  font-size: 0.875rem; color: var(--on-ink-3);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__links a { color: var(--on-ink-2); text-decoration: none; white-space: nowrap; }
.footer__links a:hover { color: var(--on-ink); text-decoration: underline; }
@media (max-width: 960px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .footer__facts { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .ticker__track { transform: none !important; }
}

@media print {
  .nav, .ticker, .board, .lookup, .part__add, .quote, .chips, .filter { display: none !important; }
  .hero, .footer, .statement { background: none; color: var(--ink); }
}

/* ---------------------------------------------------------------- part pages (/p/<slug>/, /parts/) */
.part__code a, .hit__code a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.18em; }
.part__code a:hover, .hit__code a:hover { text-decoration-color: currentColor; }
.shelf__all { color: var(--deep); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.footer__privacy { margin-block-start: 20px; font-size: 0.875rem; color: var(--on-ink-3); max-inline-size: 70ch; }
.footer--slim { padding-block: 56px 32px; }
.footer--slim .footer__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp { padding-block: calc(var(--nav-h) + clamp(24px, 4vw, 48px)) clamp(56px, 8vw, 96px); background: var(--paper); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.875rem; color: var(--text-3); margin-block-end: 28px; }
.crumbs li + li::before { content: "/"; margin-inline-end: 10px; color: var(--text-4); }
.crumbs a { color: var(--text-2); text-decoration: underline; text-underline-offset: 0.2em; }
.pp__title { font: 800 clamp(2rem, 5vw, 3.5rem)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--ink); margin-block: 12px 16px; overflow-wrap: anywhere; }
.pp__kind { display: block; font: 600 clamp(1.125rem, 2.4vw, 1.5rem)/1.3 var(--font-text); letter-spacing: 0; color: var(--text-2); }
.pp__spec { font: 500 1rem/1.5 var(--font-mono); color: var(--text-2); }
.pp__fits { margin-block-start: 12px; max-inline-size: 80ch; line-height: 1.6; }
.pp__lede { max-inline-size: 64ch; font-size: 1.125rem; color: var(--text-2); }
.pp__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 28px 40px; }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }
.pp__numbers { display: grid; gap: 20px; border-block-start: 1px solid var(--rule); padding-block-start: 28px; }
.pp__xref h2 { display: block; margin-block-end: 8px; }
.pp__xref ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pp__xref li { font: 400 0.9375rem/1.7 var(--font-mono); color: var(--text); }
.pp__xref li span { font-family: var(--font-text); font-weight: 500; color: var(--text-3); }
.pp__note { margin-block-start: 36px; font-size: 0.875rem; color: var(--text-3); max-inline-size: 70ch; }
.pp__jump { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-block: 24px 8px; }
.pp__jump a { color: var(--deep); font-weight: 600; }
.pp__line { margin-block-start: 48px; }
.pp__line .h2 { margin-block-end: 16px; }
.pp__index { columns: 3 16rem; column-gap: 32px; }
.pp__index li { break-inside: avoid; padding-block: 3px; font-size: 0.9375rem; }
.pp__index a { font: 500 0.9375rem/1.5 var(--font-mono); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.18em; }
.pp__index a:hover { text-decoration-color: currentColor; }
.pp__index span { color: var(--text-3); font-size: 0.8125rem; }
@media (max-width: 760px) { .footer--slim .footer__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }