/* =========================================================
   carparts.krd — industrial/utilitarian design foundation
   Asphalt dark + signal orange · AR/EN with RTL via logical props
   ========================================================= */

:root {
  --ink: #16181d;
  --ink-soft: #3c414b;
  --muted: #6b7280;
  --bg: #f2f1ec;
  --panel: #ffffff;
  --line: #dedcd4;
  --asphalt: #1b1e24;
  --asphalt-2: #242832;
  --accent: #e8590c;
  --accent-hover: #d14e08;
  --accent-ink: #ffffff;
  --ok: #1a7f4e;
  --chip-bg: #eceae3;
  --radius: 10px;
  --font-display: "Archivo", "Cairo", sans-serif;
  --font-body: "Tajawal", "Archivo", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --shadow: 0 1px 2px rgba(22, 24, 29, .06), 0 8px 24px -12px rgba(22, 24, 29, .18);
}

/* Dark theme: only the colour tokens flip, the rest of the styling is
   unchanged. Visitors choose for themselves; the admin sets the default.
   --asphalt stays dark (topbar/footer already were) but ends up slightly
   lighter than the background, otherwise those sections disappear. */
[data-theme="dark"] {
  --ink: #eceef3;
  --ink-soft: #b3b9c6;
  --muted: #8b93a3;
  --bg: #14161b;
  --panel: #1c1f26;
  --line: #2b2f39;
  --asphalt: #1c1f26;
  --asphalt-2: #262a34;
  --accent: #ff6b1f;
  --accent-hover: #ff7f3d;
  --accent-ink: #14161b;
  --ok: #34c07d;
  --chip-bg: #242832;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; }

.container {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .6rem 1.4rem;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-hover); }

.btn--dark { background: var(--asphalt); color: #fff; }
.btn--dark:hover { background: var(--asphalt-2); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--wa { background: #1da851; color: #fff; }
.btn--wa:hover { background: #178a43; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- header ---------- */

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: transparent;
  border: 1px solid #3a3f4b;
  color: #e6e8ee;
  border-radius: 999px;
  padding: .2rem .75rem;
  font-family: var(--font-body);
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.lang-btn:hover { border-color: var(--accent); background: rgba(232, 89, 12, .12); }

#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  /* The header is drawn by JavaScript, so it is empty for the first frame.
     Once the fonts stopped blocking the first paint, that frame became visible
     and everything below it jumped down 69px when the header arrived — a layout
     shift of 1.0, the worst score there is. Reserving the height keeps the page
     still. 68px is .header__inner's min-height, plus the 1px border. */
  min-height: 69px;
  box-sizing: border-box;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 68px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo .logo-mark { width: 30px; height: 30px; color: var(--accent); }
.logo em { font-style: normal; color: var(--accent); }

.nav {
  display: flex;
  gap: 1.5rem;
}

/* ---------- search in the header ----------
   The site's only search box used to be the one in the hero, so a visitor
   looking at a part had to go back to the home page to look for the next one.
   This one travels with them. It takes the free space between the logo and the
   menu, which is what pushes the menu right — the menu no longer does that
   itself. */
.header__search {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 1 1 auto;
  max-width: 360px;
  margin-inline-start: auto;
  padding: 0 .85rem;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  transition: border-color .18s, background .18s;
}
.header__search:focus-within {
  border-color: var(--accent);
  background: var(--panel);
}
.header__search svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--ink-soft); stroke-width: 2;
  stroke-linecap: round;
}
.header__search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: .9rem; color: var(--ink);
}
.header__search input::placeholder { color: var(--ink-soft); opacity: .85; }
/* the browser's own clear cross sits badly in a pill and duplicates Escape */
.header__search input::-webkit-search-cancel-button { display: none; }
/* on the home page, until the hero's own search has scrolled away */
.header__search.is-hidden { visibility: hidden; opacity: 0; }
.nav a {
  font-weight: 500;
  font-size: .95rem;
  white-space: nowrap;                 /* the header row must never wrap */
  color: var(--ink-soft);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); border-bottom-color: var(--accent); }

@media (max-width: 860px) {
  .nav { display: none; }
  .header__inner { justify-content: space-between; }
  .header__search { max-width: none; margin-inline-start: 0; }
}
/* Below this the logo, the button and the tools already fill the row; a search
   box squeezed in beside them would be too narrow to type a part number into. */
@media (max-width: 700px) {
  .header__search { display: none; }
}

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(180deg, var(--asphalt) 0%, var(--asphalt-2) 100%);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}

/* generated hero visual + readability scrim (direction-aware for RTL) */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__bg img,
.hero__bg video {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 72% center;
  opacity: .92;
  will-change: transform;
}
[dir="rtl"] .hero__bg img,
[dir="rtl"] .hero__bg video { transform: scaleX(-1); }

/* lichte, elegante scrim: zacht verloop achter de tekstkolom en een
   subtiele fade onderin naar de logo-strip — de video blijft zichtbaar */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(23, 26, 32, .62) 0%, rgba(23, 26, 32, .34) 42%, rgba(23, 26, 32, .04) 72%, transparent 100%),
    linear-gradient(180deg, transparent 58%, rgba(23, 26, 32, .42) 100%);
}
[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(-90deg, rgba(23, 26, 32, .62) 0%, rgba(23, 26, 32, .34) 42%, rgba(23, 26, 32, .04) 72%, transparent 100%),
    linear-gradient(180deg, transparent 58%, rgba(23, 26, 32, .42) 100%);
}

/* ---------- page loader: remschijf draait en remt af zodra de site er is ---------- */

html.is-loading { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #1b1e24;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  transition: opacity .45s ease;
}
.loader.is-done { opacity: 0; pointer-events: none; }

.loader__mark { width: 92px; height: 92px; color: var(--accent, #e8590c); }

/* de remklauw draait niet mee; bij het afremmen knijpt hij — oranje + gloed */
.loader__caliper { color: #4a505c; transition: color .35s; }
.loader.is-braking .loader__caliper { color: var(--accent, #e8590c); }

/* gloed als gelaagde svg-strokes i.p.v. css-filters: drop-shadow/filter
   promoot het svg naar een eigen GPU-laag die op sommige schermen als
   een lichter vierkant om het merkteken rendert — strokes kunnen dat niet */
.loader__glow { opacity: 0; transition: opacity .35s; }
.loader.is-braking .loader__glow { opacity: .28; }
.loader.is-braking .loader__glow--wide { opacity: .12; }

.loader__word {
  font-family: var(--font-display, "Archivo", sans-serif);
  font-weight: 800;
  font-size: 1.15rem;
  color: #e6e8ee;
  opacity: .92;
}
.loader__word em { font-style: normal; color: var(--accent, #e8590c); }

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

/* --- entrance choreography (awwwards-style line reveal) ---
   De verborgen beginstand geldt alleen zolang JS leeft (html.js) en de hero
   nog niet klaargemeld is — content kan dus nooit permanent onzichtbaar zijn,
   wat er ook met de video, het netwerk of een script misgaat. */
.hero .line { display: block; overflow: hidden; }
.hero .line-inner { display: block; }
html.js .hero:not(.is-loaded) .line-inner { transform: translateY(112%); }
.hero.is-loaded .line-inner {
  animation: lineUp .9s cubic-bezier(.19, 1, .22, 1) both;
}
.hero.is-loaded .line:nth-child(2) .line-inner { animation-delay: .12s; }

@keyframes lineUp {
  from { transform: translateY(112%); }
  to   { transform: translateY(0); }
}

html.js .hero:not(.is-loaded) .hero__sub,
html.js .hero:not(.is-loaded) .searchbar,
html.js .hero:not(.is-loaded) .hero__popular,
html.js .hero:not(.is-loaded) .hero__stats,
html.js .hero:not(.is-loaded) .hero__brands {
  opacity: 0;
  transform: translateY(16px);
}
.hero.is-loaded .hero__sub,
.hero.is-loaded .searchbar,
.hero.is-loaded .hero__popular,
.hero.is-loaded .hero__stats,
.hero.is-loaded .hero__brands {
  animation: fadeUp .8s cubic-bezier(.19, 1, .22, 1) both;
}
.hero.is-loaded .hero__sub     { animation-delay: .28s; }
.hero.is-loaded .searchbar     { animation-delay: .4s; }
.hero.is-loaded .hero__popular { animation-delay: .52s; }
.hero.is-loaded .hero__stats   { animation-delay: .64s; }
.hero.is-loaded .hero__brands  { animation-delay: .64s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .line-inner, .hero__sub, .searchbar, .hero__popular, .hero__stats, .hero__brands {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .5);
}
.hero__sub { text-shadow: 0 1px 18px rgba(0, 0, 0, .55); }
.hero h1 .accent { color: var(--accent); }

.hero__sub {
  color: #c3c7d1;
  font-size: 1.08rem;
  max-width: 560px;
  margin: 0 0 2rem;
}

.searchbar {
  display: flex;
  background: var(--panel);
  border-radius: var(--radius);
  padding: .4rem;
  gap: .4rem;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .55);
  max-width: 640px;
}
.searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding-inline: .9rem;
}
.searchbar input:focus { outline: none; }
.searchbar .btn { flex-shrink: 0; }

.hero__popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.1rem;
  font-size: .88rem;
  color: #9aa0ad;
}
.hero__popular a {
  font-family: var(--font-mono);
  font-size: .8rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: .22rem .8rem;
  color: #dfe2e9;
  transition: border-color .2s, background-color .2s;
}
.hero__popular a:hover { border-color: var(--accent); background: rgba(232, 89, 12, .16); }

.hero__stats {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- car brands in the hero ----------
   The same block as the brand grid further down the page, made translucent so
   the video carries on behind it — still obviously a block, with an edge and a
   surface, not a logo floating on a photo.

   Light rather than dark, because the logos are dark: a dark translucent panel
   over a dark video leaves a Mercedes star you cannot make out. This is the one
   place on the site where a white panel over the hero earns itself. */
.hero__brands {
  display: flex;
  gap: .55rem;
  margin-top: 2.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  /* The tiles arrive with the data, after the first paint. Without a reserved
     height the row grew by 80px at that moment and pushed every section below
     it down — half of the layout shift PageSpeed reported. */
  box-sizing: border-box;
  min-height: 110px;
}
.hero-brand {
  /* every tile the same width, shrinking together — five across the 780px hero
     column comes out at about 148px, which leaves a logo and a full brand name
     room to breathe */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .7rem .4rem .6rem;
  border-radius: 12px;
  position: relative;

  /* How transparent this can be is a measured number, not a taste. Behind the
     tiles the hero is almost black — the scrim covers the video at 82–96%, so
     the backdrop lands around 0.012–0.021 luminance. Against that, white at 50%
     puts the dark brand name (#1b1f27) at 5.0:1 and 45% drops it to 4.3, under
     the 4.5 a small bold label needs. So the fill runs 62% down to 50%: glass
     everywhere, and still legible at its thinnest point.

     The old fill was a flat 82% — 11.4:1, more than twice what was needed, which
     is exactly why it read as a solid white chip instead of glass. */
  background: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .50));
  border: 1px solid rgba(255, 255, 255, .55);

  /* The blur is what makes it glass rather than a translucent rectangle: enough
     to dissolve the workshop behind it into colour. Saturation compensates for
     what a heavy blur washes out. */
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);

  /* A bright top edge and a darker bottom one imply thickness — a pane catching
     light from above. The outer shadow lifts it off the video so the edge is
     visible even where the backdrop is light. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -1px 0 rgba(255, 255, 255, .18),
    0 6px 20px rgba(0, 0, 0, .26);
  transition: background .18s, transform .18s, border-color .18s, box-shadow .18s;
}
/* the specular sheen across the top third, clipped to the rounded corner */
.hero-brand::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 42%;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.hero-brand > * { position: relative; }
.hero-brand:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .66));
  border-color: rgba(255, 255, 255, .8);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .22),
    0 10px 26px rgba(0, 0, 0, .3);
}
/* Without a backdrop filter there is nothing to see through, so the glass has
   to become a panel — and the opacity has to carry the contrast on its own. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero-brand { background: rgba(255, 255, 255, .88); }
  .hero-brand:hover { background: rgba(255, 255, 255, .96); }
}

/* ---------- the same glass, in the dark ----------
   Dark glass over a near-black backdrop has almost no fill contrast to work
   with, so the tile has to read through its edges instead: a brighter rim, a
   lit top, and a shadow underneath. That is how dark glass works anyway — you
   see the pane, not the pane's colour.

   The logos are the problem this creates. They are dark artwork drawn for white
   paper: on dark glass a Mercedes star and a Ford oval simply disappear. Rather
   than bleach them white with a filter — which throws away the blue that makes
   a Ford badge a Ford badge — each logo keeps a small light plate of its own.
   The tile is dark, the badge is lit, and the brand stays the colour it is. */
[data-theme="dark"] .hero-brand {
  background: linear-gradient(160deg, rgba(30, 34, 43, .66), rgba(16, 18, 24, .5));
  border-color: rgba(255, 255, 255, .17);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 6px 20px rgba(0, 0, 0, .42);
}
[data-theme="dark"] .hero-brand::before {
  background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
}
[data-theme="dark"] .hero-brand:hover {
  background: linear-gradient(160deg, rgba(42, 47, 58, .78), rgba(24, 27, 34, .62));
  border-color: rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    0 10px 26px rgba(0, 0, 0, .48);
}
/* The plate behind the logo, in both themes.
   In the dark theme it is what keeps a Mercedes star from disappearing. In the
   light theme the tile is translucent white glass at 50-62%, so a solid white
   plate still reads as its own surface against it — and it does the same job for
   the other end of the range: a silver or near-white mark, which would otherwise
   wash straight into the glass. Same geometry in both, so switching themes moves
   nothing. */
.hero-brand img {
  box-sizing: content-box;
  padding: 3px 7px;
  border-radius: 7px;
  background: #fff;
}
[data-theme="dark"] .hero-brand img {
  background: rgba(255, 255, 255, .93);
}
[data-theme="dark"] .hero-brand__name { color: #eef1f6; }
.hero-brand img {
  height: 26px;
  max-width: 100%;
  object-fit: contain;
}
.hero-brand .brand-tile__mono { width: 34px; height: 26px; font-size: .8rem; }
.hero-brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: -.01em;
  color: #1b1f27;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Narrow screens: the row would put six 60px tiles side by side, which is a row
   of smudges. Wrap instead and let a couple drop to a second line. */
@media (max-width: 620px) {
  .hero__brands { flex-wrap: wrap; }
  .hero-brand { flex: 0 1 calc(33.333% - .37rem); }
}

/* --- part-number marquee at the bottom of the hero --- */
.hero__marquee {
  position: relative;
  z-index: 1;
  /* filled with logos once the data is in; hold its 58px from the start */
  min-height: 58px;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, .06);
  background: #fdfdfc;
  overflow: hidden;
  direction: ltr;
}
.hero__marquee-shift {
  width: max-content;
  will-change: transform;
  transition: transform .15s linear;
}
.hero__marquee-track {
  display: flex;
  width: max-content;
  gap: 3.2rem;
  padding: .9rem 0;
  /* the distance is set per render, from the width one repetition turned out
     to be — a fixed percentage cannot know how many copies there are */
  --marquee-shift: 50%;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
/* stop under the cursor, so a number can actually be read and copied */
.hero__marquee:hover .hero__marquee-track,
.hero__marquee:focus-within .hero__marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero__marquee-track { animation: none; }
}
.hero__marquee span {
  display: inline-flex;
  align-items: center;
  gap: 3.2rem;
  white-space: nowrap;
}
/* uitgesneden merklogo's in originele kleur op de lichte strip —
   silhouet-filters maakten gevulde emblemen (Ford e.d.) onleesbaar */
.hero__marquee img {
  height: 28px;
  width: auto;
  filter: grayscale(.2);
  opacity: .92;
  transition: opacity .2s, filter .2s;
}
.hero__marquee img:hover { filter: none; opacity: 1; }
.hero__marquee b { color: #e6e8ee; font-weight: 600; }
.hero__marquee i {
  font-style: normal;
  color: var(--accent);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-shift))); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__marquee-track { animation: none; }
}
.hero__stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: #fff;
}
.hero__stat span { font-size: .85rem; color: #9aa0ad; }

/* ---------- sections ---------- */

.section { padding-block: clamp(3rem, 7vw, 5rem); }
.section--alt { background: var(--panel); border-block: 1px solid var(--line); }
/* The home page alternates: a tinted section carries white cards and a white
   section carries tinted ones, so no card ever sits on its own colour. */
/* white, but without the rules above and below that --alt draws */
.section--white { background: var(--panel); }

/* Each "more" button takes the opposite tone to the section it sits in, so it
   reads as a control instead of dissolving into the background. The variables
   swap with the theme, so this holds in dark mode too. */
.section .brand-more .btn { background: var(--panel); }
.section--alt .brand-more .btn,
.section--white .brand-more .btn { background: var(--bg); }

.section__head { max-width: 620px; margin-bottom: 2.2rem; }
.section__head h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 800; }
.section__head p { color: var(--muted); margin: 0; }


/* ---------- categories ---------- */

/* Sixteen categories in two rows, same shape as the brand grid above it. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .7rem;
}
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

.cat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cat-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
/* A tile still on line art keeps the same picture height, so the grid stays
   even while not every category has a photograph yet. */
.cat-card > svg {
  width: 100%; height: 104px; padding: 1.6rem 0; margin: 0;
  color: var(--accent); box-sizing: border-box;
}
@media (max-width: 1100px) { .cat-card > svg { height: 140px; padding: 2.2rem 0; } }
.cat-card__name, .brand-tile__name {
  font-family: var(--font-display); font-weight: 700; font-size: .84rem;
  display: flex; align-items: center; justify-content: center; min-height: 2.3rem;
  width: 100%; padding: 0 .5rem 1.4rem; line-height: 1.25; text-align: center;
}
@media (max-width: 1100px) { .cat-card__name, .brand-tile__name { font-size: .95rem; padding: 0 1rem 1.5rem; } }

/* ---------- the seam between a tile's picture and its name ----------
   Navy hairlines that stretch with the tile, meeting a fixed centrepiece: a
   short diagonal up into a level run, and a hollow orange hexagon between them.
   Flat vector throughout — no gradient, no shadow, nothing that scales with the
   grid except the two straight runs. */
.tile-rule {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 22px;
  /* 44px of nothing on either side. The rule is not what anyone came to look
     at; the space is what keeps it from competing with the name below it. */
  margin: 44px 0;
  color: #12395B;
}
.tile-rule__mark { flex: none; display: block; width: 72px; height: 22px; }
/* 2px tall at y=16, which is where the mark's own horizontal run sits, so the
   drawn line and the stretched one are a single unbroken line */
.tile-rule__line {
  position: absolute; top: 15px; height: 2px;
  background: currentColor;
  /* half the centrepiece, plus the padding the tile already has */
  width: calc(50% - 36px - .9rem);
}
.tile-rule__line--l { left: .9rem; }
.tile-rule__line--r { right: .9rem; }
/* navy disappears on a dark tile, so the line lifts off the surface instead */
[data-theme="dark"] .tile-rule { color: rgba(255, 255, 255, .34); }

/* popular car brands (home) */
/* logo on top, name underneath — a brand is recognised by its mark first */
/* Same steps as the category grid right above it: five and three left the
   brands in a different rhythm on a tablet, and the two sections sit one under
   the other on the same page. */
.brand-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .7rem; }
@media (max-width: 1100px) { .brand-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
.brand-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 1.4rem .6rem 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-body); font-weight: 500; font-size: .85rem;
  text-align: center; line-height: 1.25;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.brand-tile:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow); }
.brand-more { text-align: center; margin-top: 1.5rem; }

/* ---------- part cards ---------- */

.parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.2rem;
}

.part-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color .2s, box-shadow .25s;
}
.part-card:hover { border-color: var(--ink); box-shadow: var(--shadow); }

.part-card__media {
  position: relative;
  aspect-ratio: 4 / 2.6;
  display: grid;
  place-items: center;
  background: var(--chip-bg);
  color: var(--ink-soft);
}
.part-card__art { width: 84px; height: 84px; opacity: .85; }

.badge {
  position: absolute;
  top: .7rem;
  inset-inline-start: .7rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .18rem .6rem;
  border-radius: 4px;
}
.badge--new { background: var(--ok); color: #fff; }
.badge--used { background: var(--asphalt); color: #fff; }
.badge--refurbished { background: #b45309; color: #fff; }

/* brand-logo badge — mirrors the condition badge (top right, auto-RTL) */
.brand-badge {
  position: absolute;
  top: .7rem;
  inset-inline-end: .7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-badge--mono {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bc, #3a3f4a);
  color: #fff;
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .01em;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
}
/* logos are often wide (e.g. 160x36): fixed height, width scales along, and
   flex:none so the flex container cannot squash the logo */
.brand-badge img {
  flex: none;
  height: 44px;
  width: auto;
  max-width: 92px;
  min-width: 44px;
  object-fit: contain;
  background: var(--panel);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .18);
}
.detail__media .brand-badge--mono { width: 52px; height: 52px; font-size: 1rem; border-radius: 12px; }
.detail__media .brand-badge img { height: 52px; max-width: 130px; border-radius: 12px; padding: 7px 10px; }

.part-card__body {
  background: var(--panel);
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
}

.pn-chip {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
  /* the page tone, so the part number reads as a chip on the white card */
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .12rem .55rem;
  direction: ltr;
  unicode-bidi: embed;
}

.part-card__title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0;
}

.part-card__fits {
  font-size: .82rem;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.part-card__meta {
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.part-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
}
.part-card__price small { font-size: .72rem; font-weight: 600; color: var(--muted); }
.part-card__city { font-size: .8rem; color: var(--muted); }

/* ---------- how it works ---------- */

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  counter-reset: step;
}
@media (max-width: 820px) { .how-grid { grid-template-columns: 1fr; } }

.how-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  position: relative;
}
.how-card::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .1em;
  display: block;
  margin-bottom: .8rem;
}
.how-card h3 { font-size: 1.15rem; }
.how-card p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---------- dealer CTA ---------- */

.dealer-cta {
  background:
    radial-gradient(700px 300px at 15% 120%, rgba(232, 89, 12, .25), transparent 60%),
    var(--asphalt);
  color: #fff;
  border-radius: 16px;
  padding: clamp(2.2rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.dealer-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: .4rem; }
.dealer-cta p { color: #c3c7d1; margin: 0; max-width: 520px; }
.dealer-cta__action { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.dealer-cta__action small { color: #9aa0ad; font-size: .8rem; }

/* ---------- parts page (filters + results) ---------- */

.page-head {
  background: var(--asphalt);
  color: #fff;
  padding-block: 2.2rem;
}
.page-head h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; margin: 0; }

.browse {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 1.6rem;
  align-items: start;
  padding-block: 2rem 4rem;
}
@media (max-width: 920px) { .browse { grid-template-columns: 1fr; } }

.filters {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.15rem;
  position: sticky;
  /* the sticky header is one row now that the prototype strip is gone; a little
     room below it so the filter panel does not touch it while scrolling */
  top: 85px;
  max-height: calc(100vh - 101px);
  overflow-y: auto;
}
@media (max-width: 920px) { .filters { position: static; top: auto; max-height: none; overflow: visible; } }

.filters h2 {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: .5rem;
}

/* compact filter panel — minimal spacing so the whole tile stays in view */
.filters .field { margin-bottom: .42rem; }
.filters .field label { margin-bottom: .14rem; font-size: .78rem; }
.filters .field input,
.filters .field select { min-height: 37px; }
.filters .btn { margin-top: .2rem; padding-block: .58rem; }

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .3rem;
}
.field input,
.field select {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--ink);
  padding-inline: .85rem;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 16px;
}
.field input:hover, .field select:hover:not(:disabled) { border-color: #c4c0b4; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 89, 12, .14); }
.field select:disabled { background-color: var(--chip-bg); color: var(--muted); cursor: not-allowed; opacity: .75; }

.filters .btn { width: 100%; }

.results__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.results__count { font-weight: 700; font-size: .95rem; }
.results__bar select {
  min-height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding-inline: .95rem 2.4rem;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 15px;
  transition: border-color .18s, box-shadow .18s;
}
[dir="rtl"] .results__bar select { background-position: left .8rem center; padding-inline: 2.4rem .95rem; }
.results__bar select:hover { border-color: #c4c0b4; }
.results__bar select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 89, 12, .14); }

.results-empty {
  background: var(--panel);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--muted);
}

/* ---------- detail page ---------- */

.crumb {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  color: var(--muted);
  margin-block: 1.4rem .8rem;
  transition: color .2s;
}
.crumb:hover { color: var(--ink); }
.crumb svg { width: 15px; height: 15px; }
[dir="rtl"] .crumb svg { transform: scaleX(-1); }

.detail {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  padding-bottom: 4rem;
  align-items: start;
}
@media (max-width: 920px) { .detail { grid-template-columns: 1fr; } }

.detail__media {
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  position: relative;
}
.detail__media svg { width: 160px; height: 160px; opacity: .85; }

.detail__panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem;
  position: sticky;
  top: 115px;
  align-self: start;
}
@media (max-width: 920px) { .detail__panel { position: static; } }

.detail__title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; }

.detail__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }

.id-plate {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--asphalt);
  color: #fff;
  border-radius: 8px;
  padding: .7rem 1rem;
  margin-block: 1rem;
}
.id-plate__label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #9aa0ad;
}
.id-plate__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .06em;
  direction: ltr;
  unicode-bidi: embed;
}
.id-plate__hint { font-size: .78rem; color: var(--muted); margin: .4rem 0 0; }

.detail__price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  margin-block: .4rem 0;
}
.detail__price small { font-size: .95rem; color: var(--muted); font-weight: 600; }
.detail__price-note { font-size: .8rem; color: var(--muted); margin: 0 0 1.2rem; }

.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-block: 1.2rem; }
.contact-row .btn--form { grid-column: 1 / -1; }

.dealer-box {
  border-top: 1px solid var(--line);
  margin-top: 1.4rem;
  padding-top: 1.2rem;
}
.dealer-box__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.dealer-box__name { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }
.dealer-box__meta { font-size: .85rem; color: var(--muted); }
.dealer-box .verified {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--ok);
  font-size: .8rem;
  font-weight: 700;
}
.dealer-box .verified svg { width: 14px; height: 14px; }

.spec-block { margin-top: 2rem; }
.spec-block h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: .8rem; }

.compat-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compat-table th, .compat-table td {
  text-align: start;
  padding: .65rem .9rem;
  font-size: .9rem;
  border-bottom: 1px solid var(--line);
}
.compat-table th {
  background: var(--chip-bg);
  font-family: var(--font-display);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.compat-table tr:last-child td { border-bottom: 0; }

/* the invitation's own details: shown, but not the dealer's to rewrite */
.inv-locked { margin-bottom: 1.8rem; }
.inv-locked__note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 1.1rem; padding: .75rem .9rem; border-radius: 10px;
  background: var(--chip-bg); color: var(--ink-soft); font-size: .88rem;
}
.inv-locked__note .lk { flex: none; margin-top: 2px; }
/* A grey box on its own reads as an empty field waiting to be filled, so the
   label carries a padlock and the box is visibly inert: dashed edge, no caret,
   no focus ring, nothing to click. */
.is-locked-field > label { display: flex; align-items: center; gap: 6px; }
.is-locked-field > label .lk { opacity: .65; }
/* pointer-events: none used to sit here, which also killed the cursor and the
   tooltip — the field looked inert but said nothing about why. It stays
   uneditable through readonly; the cursor now says so and the title explains. */
.input.is-locked {
  background: var(--chip-bg); color: var(--ink-soft);
  border-style: dashed; cursor: not-allowed; user-select: none;
}
.input.is-locked:focus { outline: none; box-shadow: none; border-color: var(--line); }
.is-locked-field > label { cursor: not-allowed; }
.is-locked-field .loc-map { cursor: not-allowed; opacity: .92; }
.is-locked-field .loc-map iframe { pointer-events: none; }
.is-locked-field .loc-map iframe { height: 200px; }
.inv-h2 { font-size: 1.05rem; font-weight: 800; margin: 1.6rem 0 .8rem; }
.inv-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.inv-row .hint { margin: 0; }
.inv-row .hint.is-bad { color: #e11d48; }
#iv-mapwrap { margin-bottom: 1rem; }
#iv-mapwrap iframe { height: 240px; }

/* a brand tile with no logo anywhere: same shape, initials instead of an image */
.brand-tile__mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 30px; border-radius: 6px;
  background: color-mix(in srgb, var(--bc) 22%, transparent);
  color: var(--bc); font-weight: 800; font-size: .82rem; letter-spacing: .02em;
}

/* ---------- invited dealer completing their account ---------- */
.inv-wrap { max-width: 640px; margin: 3.5rem auto 5rem; }
.inv-panel { padding: 2rem 2rem 2.2rem; }
.inv-head { margin-bottom: 1.6rem; }
.inv-head h1 { font-size: 1.7rem; font-weight: 800; margin: .5rem 0 .4rem; }
.inv-head p { color: var(--muted); margin: 0; }
.inv-badge {
  display: inline-block; padding: .25rem .6rem; border-radius: 999px;
  background: var(--accent-soft, rgba(255,106,0,.12)); color: var(--accent);
  font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.inv-submit { width: 100%; height: 46px; margin-top: 1rem; font-size: .98rem; }
.inv-err {
  margin: .8rem 0 0; padding: .7rem .9rem; border-radius: 10px;
  background: rgba(225,29,72,.1); color: #e11d48; font-size: .9rem;
}
.inv-note { display: flex; gap: 14px; align-items: flex-start; }
.inv-note svg { flex: none; color: var(--accent); margin-top: 2px; }
.inv-note h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 .35rem; }
.inv-note p { color: var(--muted); margin: 0; }
@media (max-width: 560px) {
  .inv-grid { grid-template-columns: 1fr; }
  .inv-panel { padding: 1.4rem 1.2rem 1.6rem; }
}

/* ---------- dealer location on the part page ---------- */
/* The map is as wide as the description tile above it. It shows an area, not a
   doorstep: a dealer's exact address is theirs to give out, so the circle marks
   roughly where they are and the note says so. */
.loc-map {
  position: relative; margin-top: .2rem; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
}
.loc-map iframe { display: block; width: 100%; height: 300px; border: 0; }
/* the circle sits over the map, so it must not swallow drag or zoom */
.loc-map__area {
  position: absolute; inset: 0; margin: auto; width: 150px; height: 150px;
  border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.loc-note {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: .7rem; font-size: .9rem; color: var(--muted);
}
.loc-note svg { flex: none; }
.loc-note b { color: var(--text); font-weight: 700; }
@media (max-width: 640px) { .loc-map iframe { height: 220px; } }

.desc-block p {
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem .9rem;
  font-size: .9rem;
  line-height: 1.6;
}

/* ---------- modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 24, 29, .55);
  display: none;
  place-items: center;
  z-index: 100;
  padding: 1rem;
}
.modal-backdrop.is-open { display: grid; }

.modal {
  background: var(--panel);
  border-radius: 14px;
  padding: 1.8rem;
  width: min(460px, 100%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
}
.modal h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: .2rem; }
.modal > p { color: var(--muted); font-size: .88rem; margin-top: 0; }
.modal .field textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .92rem;
  padding: .7rem;
  min-height: 90px;
  resize: vertical;
}
.modal .field textarea:focus { outline: none; border-color: var(--accent); }
.modal__actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.modal__actions .btn { flex: 1; }

.modal__success {
  display: none;
  text-align: center;
  padding: 1.5rem 0 .5rem;
}
.modal__success svg { width: 52px; height: 52px; color: var(--ok); margin: 0 auto 1rem; }
.modal__success p { font-weight: 700; }

/* ---------- footer ---------- */

#site-footer { background: var(--asphalt); color: #b8bcc6; margin-top: auto; }

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-block: 3rem 2rem;
}
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

.footer__brand p { font-size: .88rem; max-width: 34ch; }
.logo--foot { color: #fff; margin-bottom: .8rem; }

#site-footer h4 {
  color: #fff;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .9rem;
}
#site-footer a {
  display: block;
  font-size: .9rem;
  padding-block: .25rem;
  color: #b8bcc6;
  transition: color .2s;
}
#site-footer a:hover { color: #fff; }
#site-footer .logo--foot { display: inline-flex; }

.footer__bottom {
  /* 1fr | auto | 1fr — the copyright sits on the left, "Powered by" is in the
     middle column and is therefore truly centred against the full width.
     The third column stays empty and keeps the centre balanced. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  padding-block: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8rem;
  color: #7d828e;
}
@media (max-width: 640px) {
  .footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* "Powered by Webiro" — the logo is blue; brightness(0)+invert turns it white
   so it fits the dark footer. The ID selector is required: #site-footer a sets
   display:block and would otherwise override the inline-flex. */
#site-footer .powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding-block: 0;
  /* same font, size and colour as the copyright next to it */
  font: inherit;
  color: inherit;
  transition: color .2s;
}
#site-footer .powered-by:hover { color: #b8bcc6; }
#site-footer .powered-by img {
  height: 12px;
  width: auto;
  display: block;
  /* the wordmark is centred inside the svg frame, but for text the optical
     centre of the letters sits higher than the line centre — without this
     correction the logo hangs ~2.6px too low next to "Powered by" */
  transform: translateY(-.18em);
  filter: brightness(0) invert(1);
  opacity: .6;
  transition: opacity .2s;
}
#site-footer .powered-by:hover img { opacity: 1; }

/* ---------- dashboard & admin (step 4 + 5) ---------- */

/* only the PRODUCT PHOTO fills the box — not the brand logo in .brand-badge
   (that one is a grandchild, hence the direct-child selector) */
.part-card__photo, .detail__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.dash { padding-block: 2rem 4rem; }

.dash__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.dash__who { font-size: .9rem; color: var(--muted); }
.dash__who b { color: var(--ink); font-family: var(--font-display); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
}
.stat-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
}
.stat-card span { font-size: .82rem; color: var(--muted); }
.stat-card--warn b { color: var(--accent); }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.6rem;
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.panel__head h2 { font-size: 1.2rem; font-weight: 800; margin: 0; }
.panel__head p { font-size: .84rem; color: var(--muted); margin: .2rem 0 0; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  text-align: start;
  padding: .7rem .8rem;
  font-size: .89rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table th {
  font-family: var(--font-display);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table .pn-chip { font-size: .7rem; }

.table-scroll { overflow-x: auto; }

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .18rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pill--active { background: #e2f3ea; color: var(--ok); }
.pill--paused { background: #ececec; color: var(--ink-soft); }
.pill--pending { background: #fdeadd; color: #b45309; }
.pill--rejected { background: #fde3e3; color: #b91c1c; }

.btn--sm {
  min-height: 34px;
  padding: .25rem .8rem;
  font-size: .8rem;
  border-radius: 7px;
}
.btn--danger { background: transparent; color: #b91c1c; border: 1.5px solid #eecaca; }
.btn--danger:hover { border-color: #b91c1c; }
.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.req-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  padding: .9rem 0;
  border-bottom: 1px dashed var(--line);
}
.req-item:last-child { border-bottom: 0; }
.req-item__id { align-self: start; }
.req-item__head { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; }
.req-item__name { font-weight: 700; font-family: var(--font-display); }
.req-item__phone { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); direction: ltr; unicode-bidi: embed; }
.req-item__date { font-size: .75rem; color: var(--muted); margin-inline-start: auto; }
.req-item__msg { margin: .2rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.req-item__part { font-size: .78rem; color: var(--muted); }

/* login card */
.auth-wrap { max-width: 460px; margin-inline: auto; padding-block: 3.5rem 5rem; }
.auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2rem;
}
.auth-card h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: .3rem; }
.auth-card > p { color: var(--muted); font-size: .9rem; margin-top: 0; }
.auth-list { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.2rem; }
.auth-dealer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: .8rem 1rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .95rem;
  text-align: start;
  transition: border-color .2s, box-shadow .2s;
}
.auth-dealer:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.auth-dealer b { font-family: var(--font-display); }
.auth-dealer small { color: var(--muted); }

/* part-form */
.pform .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 700px) { .pform .grid2 { grid-template-columns: 1fr; } }
.pform textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .92rem;
  padding: .7rem;
  min-height: 70px;
  resize: vertical;
}
.pform textarea:focus { outline: none; border-color: var(--accent); }
.field .hint { font-size: .75rem; color: var(--muted); margin-top: .25rem; }

.compat-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto auto auto;
  gap: .6rem;
  align-items: end;
  padding: .8rem;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  margin-bottom: .6rem;
}
@media (max-width: 700px) { .compat-row { grid-template-columns: 1fr 1fr; } }
.compat-row select[multiple] { min-height: 84px; padding-block: .4rem; }
.compat-row .field { margin-bottom: 0; }
.compat-row__del {
  background: transparent;
  border: 0;
  color: #b91c1c;
  cursor: pointer;
  font-size: 1.1rem;
  padding: .4rem;
  align-self: center;
}

.photo-drop {
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.photo-drop img { width: 84px; height: 64px; object-fit: cover; border-radius: 6px; }

.toast {
  position: fixed;
  bottom: 1.4rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--asphalt);
  color: #fff;
  border-radius: 10px;
  padding: .8rem 1.4rem;
  font-size: .9rem;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
[dir="rtl"] .toast { transform: translateX(50%); }
.toast.is-visible { opacity: 1; }

/* ---------- content pages (step 7: default pages) ---------- */

.page-head p.page-head__sub {
  margin: .5rem 0 0;
  color: #b8bcc6;
  max-width: 60ch;
}

.prose {
  max-width: 720px;
  padding-block: 2.5rem 4.5rem;
}
.prose h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 2.2rem 0 .6rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); line-height: 1.75; }
.prose ul { padding-inline-start: 1.2rem; }
.prose .note {
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .8rem 1rem;
  font-size: .85rem;
  color: var(--muted);
  margin-top: 2.5rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  align-items: start;
  padding-block: 2.5rem 4.5rem;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-info .panel { margin-bottom: 0; }
.contact-info h3 { font-size: 1rem; font-weight: 800; margin-bottom: .3rem; }
.contact-info p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.contact-info .mono { font-family: var(--font-mono); font-size: .88rem; direction: ltr; unicode-bidi: embed; }

/* ---------- reveal animations ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* body layout: footer pinned to the bottom */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* ================= Phase D — dealer profiles & directory ================= */
.muted { color: var(--muted); }

.verified {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--ok); font-size: .8rem; font-weight: 700;
}
.verified svg { width: 14px; height: 14px; }
.verified--lg { font-size: .82rem; background: rgba(26, 127, 78, .12); padding: .22rem .7rem; border-radius: 999px; }

/* dealer logo (monogram or image) */
.dealer-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 14px; overflow: hidden; background: var(--panel); }
.dealer-logo--mono { background: var(--dc, #333); color: #fff; font-family: var(--font-display); font-weight: 800; letter-spacing: .01em; }
.dealer-logo img { width: 100%; height: 100%; object-fit: contain; }

/* part.html: the dealer box becomes a link to the profile */
.dealer-box--link { display: block; text-decoration: none; color: inherit; }
.dealer-box--link:hover .dealer-box__name { color: var(--accent); }
.dealer-box__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .8rem; color: var(--accent); font-weight: 700; font-size: .85rem; }
.dealer-box__cta svg { width: 15px; height: 15px; }
[dir="rtl"] .dealer-box__cta svg { transform: scaleX(-1); }

/* public dealer card on the product page (same as the portal preview) */
.dcard { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.25rem; background: var(--chip-bg); }
.dcard__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .85rem; }
.dcard__head { display: flex; gap: .9rem; align-items: center; text-decoration: none; color: inherit; }
.dcard__logo { width: 56px; height: 56px; border-radius: 14px; font-size: 1.15rem; flex: none; }
.dcard__id { min-width: 0; }
.dcard__name { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.2; }
.dcard__head:hover .dcard__name { color: var(--accent); }
.dcard__loc { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .85rem; margin-top: .25rem; }
.dcard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.dcard__btns .btn { min-height: 44px; }
.dcard__btns .btn--form { grid-column: 1 / -1; }
.dcard__call { border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); }
.dcard__call:hover { border-color: var(--ink); }
.dcard__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: nowrap; margin-top: 1rem; }
.dcard__member { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .8rem; line-height: 1; white-space: nowrap; min-width: 0; }
.dcard__member svg { flex: none; display: block; }
.dcard__link { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent); font-weight: 700; font-size: .82rem; line-height: 1; text-decoration: none; white-space: nowrap; flex: none; }
.dcard__link svg { display: block; }

/* icon/text alignment: check, pin and clock exactly at text height */
.verified, .verified--lg, .dcard__loc, .dealer-hero__loc, .dealer-tile__loc, .dealer-hero__meta { line-height: 1; }
.verified svg, .verified--lg svg, .dcard__loc svg, .dealer-hero__loc svg, .dealer-tile__loc svg { display: block; flex: none; }
[dir="rtl"] .dcard__link svg { transform: scaleX(-1); }

/* ---- profile hero ---- */
.dealer-hero { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 1.6rem; }
.dealer-hero__cover { height: 96px; background: linear-gradient(120deg, var(--asphalt), var(--asphalt-2)); }
.dealer-hero__bar { display: flex; align-items: flex-end; gap: 1.1rem; padding: 0 1.6rem 1.2rem; flex-wrap: wrap; }
.dealer-hero__logo { width: 96px; height: 96px; border-radius: 20px; border: 4px solid var(--panel); box-shadow: var(--shadow); font-size: 1.9rem; margin-top: -48px; }
.dealer-hero__id { flex: 1 1 260px; min-width: 0; padding-bottom: .15rem; }
.dealer-hero__name { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 800; margin: 0; }
.dealer-hero__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; margin-top: .45rem; }
.dealer-hero__loc { display: inline-flex; align-items: center; gap: .3rem; }
.dealer-hero__actions { display: flex; gap: .6rem; padding-bottom: .3rem; }
.dealer-hero__stats { display: flex; gap: 2.6rem; padding: 1.1rem 1.6rem; border-top: 1px solid var(--line); background: var(--chip-bg); }
.dstat b { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.dstat span { font-size: .8rem; color: var(--muted); }

/* ---- profile listings ---- */
.dealer-listings__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.1rem; }
.dealer-listings__head h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; margin: 0; }

/* ---- directory ---- */
.dealer-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; padding-block: .5rem 0; }
.dealer-tile { display: flex; flex-direction: column; gap: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; text-decoration: none; color: inherit; transition: border-color .18s, box-shadow .18s, transform .18s; }
.dealer-tile:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); }
.dealer-tile__top { display: flex; align-items: center; gap: .8rem; }
.dealer-tile__logo { width: 52px; height: 52px; border-radius: 13px; font-size: 1.1rem; flex: none; }
.dealer-tile__id { min-width: 0; }
.dealer-tile__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.dealer-tile__loc { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .86rem; }
.dealer-tile__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .3rem; }
.dealer-tile__count { font-size: .88rem; color: var(--ink-soft); }
.dealer-tile__count b { font-weight: 800; }
.dealer-tile__cta { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent); font-weight: 700; font-size: .85rem; }
[dir="rtl"] .dealer-tile__cta svg { transform: scaleX(-1); }

@media (max-width: 640px) {
  .dealer-hero__stats { gap: 1.6rem; }
  .dealer-hero__actions { width: 100%; }
  .dealer-hero__actions .btn { flex: 1; justify-content: center; }
}

/* ================= Phase C — distance filter & map ================= */
.field--distance { display: grid; grid-template-columns: 1.25fr 1fr; gap: .5rem; }
.field--distance label { grid-column: 1 / -1; }
.field--distance select { width: 100%; min-width: 0; }
.field--radius:disabled { opacity: .5; cursor: not-allowed; }
.part-card__dist {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .55rem; padding: .2rem .55rem;
  border-radius: 999px; background: rgba(232, 89, 12, .1);
  color: var(--accent); font-size: .78rem; font-weight: 700; width: max-content;
}
.part-card__dist svg { width: 12px; height: 12px; }

/* ---- interactive Iraq map (dealers.html) ---- */
.dealer-mapwrap { margin: .4rem 0 1.6rem; }
.dealer-map { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1rem .6rem; }
.iraq-map { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; }
.iraq-shape { fill: #f1efe8; stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; }
.map-dot { fill: #cbc8bd; }
.map-pin { cursor: pointer; }
.map-pin__halo { fill: var(--accent); opacity: 0; transition: opacity .18s; }
.map-pin.is-active .map-pin__halo,
.map-pin:hover .map-pin__halo,
.map-pin:focus-visible .map-pin__halo { opacity: .2; }
.map-pin__dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.map-pin.is-active .map-pin__dot { fill: var(--ink); }
.map-pin__num { fill: #fff; font-family: var(--font-display); font-weight: 800; font-size: 11px; text-anchor: middle; pointer-events: none; }
.map-pin__lbl { fill: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 11px; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.map-pin:focus { outline: none; }

.dir-head:empty { display: none; }
.dir-head { margin-bottom: .9rem; }
.dir-chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--chip-bg); border-radius: 999px; padding: .3rem .4rem .3rem .95rem; font-weight: 700; font-size: .9rem; }
.dir-chip button { border: 0; background: var(--ink); color: #fff; width: 22px; height: 22px; border-radius: 999px; cursor: pointer; font-size: .78rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.dir-chip button:hover { background: var(--accent); }

/* ================= Phase E — richer product page ================= */
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem 1.1rem; }
.spec { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
/* no rule under the bottom cell of each column */
.spec:last-child { border-bottom: 0; }
@media (min-width: 561px) { .spec:nth-last-child(2) { border-bottom: 0; } }
.spec dt { color: var(--muted); font-size: .84rem; font-weight: 600; margin: 0; flex: none; }
.spec dd { margin: 0; font-weight: 700; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.spec dd .pn-chip { font-weight: 600; }
.badge--inline { position: static; font-size: .7rem; }
.spec-link { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--muted); }
.spec-link:hover { color: var(--accent); border-color: var(--accent); }

.similar { margin-top: 3rem; }
.similar:empty { display: none; }
.similar__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin-bottom: 1.2rem; }

/* ---- ratings (reviews) ---- */
.reviews-block:empty { display: none; }
.reviews-block { margin-top: 3rem; }
.reviews__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.reviews__head h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin: 0; }
.reviews__avg { display: inline-flex; align-items: center; gap: .5rem; }
.reviews__avg b { font-size: 1.1rem; }
.stars { color: #e8a33d; letter-spacing: 1px; white-space: nowrap; }
.stars__off { color: var(--line); }
.reviews__list { display: grid; gap: .8rem; margin-bottom: 1.8rem; max-width: 720px; }
.review { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.review__top { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.review__top .stars { font-size: .95rem; }
.review__top b { font-size: .92rem; }
.review p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.review-form { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.25rem; max-width: 520px; }
.review-form h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 0 0 .8rem; }
.review-form__stars { display: flex; gap: .1rem; margin-bottom: .8rem; }
.rf-star { border: 0; background: none; cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--line); padding: 0 .05rem; transition: color .12s; }
.rf-star.is-on { color: #e8a33d; }
.review-form input, .review-form textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: .7rem .85rem; font-family: var(--font-body); font-size: .92rem; margin-bottom: .7rem; }
.review-form textarea { min-height: 90px; resize: vertical; }
.review-form .btn { width: auto; }
/* always breathing room between the last content and the footer (inner pages) */
body[data-page="part"] main > .container,
body[data-page="shops"] main > .container { padding-bottom: 4rem; }

@media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr; } }

/* =========================================================
   3D map of Iraq on the dealers page (reuses js/iraqmap.js).
   Light + purple, like the admin map. Vars scoped to .dealer-mapwrap.
   ========================================================= */
.dealer-mapwrap {
  --accent: #6d5efc; --accent-2: #9b8cff;
  --map-top-hi: #d3d9ee; --map-top-mid: #b6bfda; --map-top-lo: #9ba6ca;
  --map-side-hi: #a6afce; --map-side-lo: #949ec0;
  --map-ground: #3c4666; --map-cast: rgba(43,52,84,.26);
  --gov-top: #bcc4de; --gov-stroke: rgba(30,36,66,.34);
  --gov-lbl: #171c38; --gov-lbl-stroke: rgba(255,255,255,.9); --gov-lbl-dim: rgba(23,28,56,.6);
}
/* map + region list side by side (always equal height; the list scrolls itself) */
.map-row { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; align-items: stretch; margin-bottom: 1.4rem; }
.map-row > .map-card { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.map-card__head { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.map-card__title { font-family: var(--font-head, inherit); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.map-card__sub { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.map-card__body { padding: 14px 16px; }
@media (max-width: 820px) { .map-row { grid-template-columns: 1fr; } .map-row .region-list { flex: 0 0 auto; max-height: 360px; } }

.iraq3d { position: relative; width: 100%; margin: 0 auto; }
.iraq3d__svg { width: 100%; height: auto; display: block; overflow: visible; }
.iraq3d.is-zoomed .iraq3d__svg { overflow: hidden; cursor: grab; touch-action: none; }
.iraq3d.is-zoomed .iraq3d__svg:active { cursor: grabbing; }
.map-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.map-zoom__btn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 15px; font-weight: 700; cursor: pointer; display: grid; place-items: center; transition: .15s; }
.map-zoom__btn:hover { color: var(--ink); border-color: var(--accent); }
.st-hi { stop-color: var(--map-top-hi); } .st-mid { stop-color: var(--map-top-mid); } .st-lo { stop-color: var(--map-top-lo); }
.ss-hi { stop-color: var(--map-side-hi); } .ss-lo { stop-color: var(--map-side-lo); }
.gs-0 { stop-color: var(--map-ground); stop-opacity: .22; } .gs-1 { stop-color: var(--map-ground); stop-opacity: .07; } .gs-2 { stop-color: var(--map-ground); stop-opacity: 0; }
.rl-0 { stop-color: #fff; stop-opacity: .9; } .rl-1 { stop-color: #fff; stop-opacity: .12; } .rl-2 { stop-color: #5a6284; stop-opacity: .35; }
.gh-0 { stop-color: #a99bff; } .gh-1 { stop-color: var(--accent); } .gh-2 { stop-color: #4f36d6; }
.iraq3d__ground { animation: badgeIn .9s ease backwards; }
.gov { cursor: pointer; transition: transform .28s cubic-bezier(.22,.9,.28,1.25), filter .28s ease, opacity .25s ease; }
.gov.is-hover { transform: translateY(-26px); filter: drop-shadow(0 20px 16px var(--map-cast)); }
.gov.is-hover:active { transform: translateY(-13px); transition: transform .08s cubic-bezier(.4,0,1,1), filter .28s ease, opacity .25s ease; }
.iraq3d:has(.gov.is-hover) .gov:not(.is-hover) { opacity: .5; }
.iraq3d:has(.gov.is-hover) .gov-badge:not(.is-hover) { opacity: .35; }
.gov-in { animation: govRise .6s cubic-bezier(.2,.75,.3,1.12) backwards; animation-delay: var(--d, 0ms); }
@keyframes govRise { from { transform: translateY(44px); opacity: 0; } }
.gov-side { fill: url(#mapSideLit); transition: fill .2s; }
.gov-top { fill: url(#mapTopLit); stroke: var(--gov-stroke); stroke-width: 1; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.gov-tint { fill: var(--accent); opacity: 0; pointer-events: none; transition: opacity .2s; }
.gov--d1 .gov-tint { opacity: .16; } .gov--d2 .gov-tint { opacity: .30; } .gov--d3 .gov-tint { opacity: .45; }
.gov-hit { fill: transparent; stroke: none; pointer-events: all; }
.gov.is-hover .gov-top { fill: url(#govHoverGrad); stroke: #2e1f7a; stroke-width: 2; animation: none; }
.gov.is-hover .gov-tint { opacity: 0; }
.gov.is-hover .gov-side { fill: color-mix(in srgb, var(--accent), #000 52%); }
.gov-badge { pointer-events: none; animation: badgeIn .5s ease backwards; transition: transform .28s cubic-bezier(.22,.9,.28,1.25), opacity .25s ease; }
.gov-badge.is-hover { transform: translate(5.2px, -15.6px); }
@keyframes badgeIn { from { opacity: 0; } }
.gov-badge__dot { fill: var(--accent); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.gov-badge__ring { fill: none; stroke: var(--accent-2); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ringPing 2.8s ease-out infinite; }
@keyframes ringPing { 0% { transform: scale(1); opacity: .75; } 65%, 100% { transform: scale(2.05); opacity: 0; } }
.gov-badge__num { fill: #fff; font-size: 13px; font-weight: 800; text-anchor: middle; }
.gov-badge__lbl { fill: var(--gov-lbl); font-size: 15px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: var(--gov-lbl-stroke); stroke-width: 3.5px; }
.gov-badge.is-empty .gov-badge__lbl { font-size: 13px; font-weight: 600; fill: var(--gov-lbl-dim); }
.gov-badge.is-hover .gov-badge__lbl { fill: #2e1f7a; }
.map-legend { display: flex; gap: 16px; justify-content: center; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.legend-chip { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--gov-stroke); background: var(--gov-top); }
.legend-swatch--d1 { background: color-mix(in srgb, var(--gov-top), var(--accent) 16%); }
.legend-swatch--d2 { background: color-mix(in srgb, var(--gov-top), var(--accent) 30%); }
.legend-swatch--d3 { background: color-mix(in srgb, var(--gov-top), var(--accent) 45%); }
/* region list */
.region-list { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.region-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 12px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; color: var(--ink); transition: background .14s; font-family: inherit; }
.region-row:hover, .region-row.is-hover { background: rgba(109,94,252,.10); }
.region-row__name { font-weight: 600; font-size: 13.5px; }
.region-row__count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--accent); }
.region-row.is-empty .region-row__count { color: var(--muted); font-weight: 500; }
.region-row .i { width: 16px; height: 16px; color: var(--muted); flex: none; }
.region-row.is-empty { opacity: .72; }
@media (prefers-reduced-motion: reduce) { .gov-in, .gov-badge, .gov-badge__ring, .iraq3d__ground, .gov-top { animation: none; } .gov, .gov-badge { transition: none; } }

/* ---------- photo gallery on the product page ---------- */
.detail__thumbs {
  display: flex; gap: 8px; margin-top: 10px;
  overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px;
}
.detail__thumb {
  flex: 0 0 auto; width: 74px; height: 74px; padding: 0;
  border: 2px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--chip-bg); cursor: pointer; transition: border-color .15s ease;
}
.detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__thumb:hover { border-color: var(--ink-soft); }
.detail__thumb.is-active { border-color: var(--accent); }

/* icon variant of the topbar button (theme toggle) */
.lang-btn--icon { padding: 0; width: 30px; justify-content: center; }
.lang-btn--icon svg { width: 15px; height: 15px; }

/* ---------- language: first-visit panel + topbar dropdown ---------- */

/* everything behind goes out of focus, only the panel stays sharp */
.langpick {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(22, 24, 29, .45);
  backdrop-filter: blur(7px) saturate(.9);
  -webkit-backdrop-filter: blur(7px) saturate(.9);
  opacity: 0; transition: opacity .22s ease;
}
.langpick.is-open { opacity: 1; }

.langpick__panel {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(22, 24, 29, .45);
  padding: 1.8rem 1.6rem 1.4rem;
  transform: translateY(10px) scale(.985);
  transition: transform .28s cubic-bezier(.19, 1, .22, 1);
}
.langpick.is-open .langpick__panel { transform: none; }

.langpick__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; margin: .9rem 0 .3rem; letter-spacing: -.02em;
}
.langpick__title em { color: var(--accent); font-style: normal; }
.langpick__sub { color: var(--muted); font-size: .88rem; margin: 0 0 1.2rem; line-height: 1.5; }

.langpick__list { display: grid; gap: 8px; }

/* row: hairline box with an orange marker bar on the leading edge */
.langpick__opt {
  position: relative;
  display: flex; align-items: center; gap: .8rem;
  width: 100%; padding: .8rem .9rem;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer; text-align: start;
  font-family: var(--font-body);
  color: var(--ink);
  transition: border-color .18s, background-color .18s, transform .18s;
}
.langpick__opt::before {
  content: ""; position: absolute; inset-inline-start: -1px; top: 12%; bottom: 12%;
  width: 3px; border-radius: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform .18s ease;
}
.langpick__opt:hover, .langpick__opt:focus-visible {
  border-color: var(--accent); background: var(--panel); outline: none;
}
.langpick__opt:hover::before, .langpick__opt:focus-visible::before { transform: scaleY(1); }

.langpick__names { display: flex; flex-direction: column; line-height: 1.25; }
.langpick__names b { font-family: var(--font-display); font-size: 1.02rem; }
.langpick__names span { color: var(--muted); font-size: .78rem; }
.langpick__go {
  margin-inline-start: auto; color: var(--muted);
  font-size: 1.1rem; transition: color .18s, transform .18s;
}
[dir="rtl"] .langpick__go { transform: scaleX(-1); }
.langpick__opt:hover .langpick__go { color: var(--accent); transform: translateX(3px); }
[dir="rtl"] .langpick__opt:hover .langpick__go { transform: scaleX(-1) translateX(3px); }

/* flag: a real 3:2 rectangle, not a rounded tile */
.lang-flag { width: 22px; height: 15px; flex: 0 0 auto; border-radius: 2px; display: block; }

/* topbar button */
#lang-toggle { gap: .45rem; padding-inline: .55rem; }
#lang-toggle .lang-flag { width: 18px; height: 12px; }
.lang-btn__caret { width: 13px; height: 13px; opacity: .7; }

/* dropdown under the button */
/* The same menu as the admin console's, down to the numbers: 12px radius, 5px
   of padding, 8px rows with a 20x14 flag, and the current language in the
   accent colour. Only the accent differs — orange out here, purple in there. */
.lang-menu {
  position: fixed; z-index: 210;
  min-width: 168px; padding: 5px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px -14px rgba(22, 24, 29, .4);
}
.lang-menu__opt {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: 0; border-radius: 8px;
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  cursor: pointer; text-align: start;
}
.lang-menu__opt .lang-flag { width: 20px; height: 14px; border-radius: 2px; flex: 0 0 auto; }
.lang-menu__opt:hover { background: rgba(9, 12, 20, .045); }
[data-theme="dark"] .lang-menu__opt:hover { background: rgba(255, 255, 255, .05); }
.lang-menu__opt.is-current { color: var(--accent); font-weight: 700; }

/* language + theme now sit in the main header, next to the CTA */
.header__inner { gap: 1.25rem; }
.header__inner .nav { gap: 1.15rem; }
.header__cta { white-space: nowrap; padding-inline: 1rem; }
.header__tools { display: flex; align-items: center; gap: .5rem; margin-inline-start: .25rem; }
/* Same two controls as the admin console's topbar, down to the numbers: a 38px
   square with a 10px radius, no border until you hover, and then a light fill
   with a hairline. The language one widens to fit the flag and the code. */
.header__inner .lang-btn {
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  display: inline-grid;
  place-items: center;
  font-weight: 600;
  transition: .15s;
}
.header__inner #lang-toggle {
  width: auto;
  padding: 0 10px;
  gap: 7px;
  display: inline-flex;
  align-items: center;
}
/* The admin tints with a translucent overlay rather than a flat colour, so the
   two buttons sit on any background the same way. Same numbers here. */
.header__inner .lang-btn:hover {
  background: rgba(9, 12, 20, .045);
  color: var(--ink);
  border-color: rgba(9, 12, 20, .09);
}
[data-theme="dark"] .header__inner .lang-btn:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .08);
}
.header__inner #lang-toggle span { font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.header__inner #lang-toggle .lang-flag { width: 18px; height: 12px; border-radius: 2px; }
/* the console's own icon sizing (svg.i in portal.css), so the two buttons carry
   identical glyphs and not just an identical box */
.header__inner .lang-btn svg.i {
  width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9;
  fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
@media (max-width: 720px) {
  .header__tools { margin-inline-start: auto; }
  .header__inner #lang-toggle span { display: none; }   /* flag only on narrow screens */
}

/* Home page tiles with an uploaded photo. A product shot needs room to read, so
   it gets the whole top of the card rather than the icon's 66px box — the same
   proportions as the reference: picture, rule, dot, name. */
/* The photographs are cut out, so the card shows through behind them and the
   tile works on either theme without a white plate under it.
   The height sets how big the part is drawn: `contain` fits the picture inside
   the box, and a part wider than it is tall was being clamped by a short box
   while a third of the tile stayed empty. */
.cat-card__img {
  width: 100%; height: 104px; object-fit: contain; margin: 0;
  padding: .55rem .5rem .2rem;
}
@media (max-width: 1100px) { .cat-card__img { height: 140px; } }

/* The picture area, lit, in the dark theme.
   Same problem as the brand logos and the same answer: these are cut-outs shot
   on white — a brake disc, an alternator, a radiator — all of them grey metal on
   a transparent background. On a dark tile they turn into silhouettes.

   Full width rather than a chip, because unlike a logo this is a photograph and
   a photograph wants a frame it fills. The card already clips to its radius, so
   the band takes the rounded top corners without being told.

   Line art is deliberately left alone: a category with no photo yet draws in
   orange, which needs no help on a dark tile and would look worse with a white
   panel behind it. */
[data-theme="dark"] .cat-card__img {
  background: rgba(255, 255, 255, .93);
}
/* And the same two zones in the light theme, the other way up.
   Dark mode ended up with a structure light mode never had: a picture area that
   is plainly its own surface, and a card body under it. In the light theme the
   cut-out was floating on the same white as the name, so the card read as one
   flat rectangle with a photograph somewhere in it.

   The tint is the section colour the card sits on, lightened — so the picture
   area reads as a recess in the card rather than a new colour introduced for the
   occasion. Faint on purpose: the eye should register the zone without being
   able to say what colour it is. */
/* White, like the dark theme's lit band — the cut-outs were shot on white, so
   white is the ground they were drawn for and the metal keeps its edges. The
   card is white too, so the hairline is what separates the picture from the body
   rather than a change of colour. */
[data-theme="light"] .cat-card__img {
  background: #fff;
  border-bottom: 1px solid rgba(20, 22, 27, .07);
}
.brand-tile img { width: 100%; max-width: 62px; height: 38px; object-fit: contain; }
/* fewer columns means wider tiles, so the logo may grow with them */
@media (max-width: 1100px) {
  .brand-tile { padding: 1.4rem .8rem; }
  .brand-tile img { max-width: 88px; height: 52px; }
  .brand-tile { font-size: .95rem; }
}

/* A lit plate behind every logo, in the dark theme only.
   These are dark drawings made for white paper — a Toyota ellipse, a Nissan
   ring, a Mazda wordmark, the Dodge stripes — and on a dark tile roughly a third
   of the grid was there in name and gone in fact. The light theme needs nothing:
   the tile is already pale, which is what the artwork expects.

   A plate rather than a filter, for the same reason as in the hero: inverting
   them to white would cost Ford its blue, Kia its red and Chevrolet its gold,
   and the colour is a good part of what makes a badge recognisable at this size.

   content-box keeps the row heights even — the padding grows the plate around
   the logo instead of shrinking the logo inside it. */
[data-theme="dark"] .brand-tile img {
  box-sizing: content-box;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .93);
}
/* The mirror image in the light theme: the tile is the warm section colour, so
   the plate is white. Same idea as the dark theme — the badge gets a surface of
   its own instead of floating on the tile — and the same geometry, so switching
   themes moves nothing. */
[data-theme="light"] .brand-tile img {
  box-sizing: content-box;
  padding: 7px 10px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 22, 27, .05);
}
@media (max-width: 1100px) {
  [data-theme="light"] .brand-tile img { padding: 9px 13px; border-radius: 11px; }
}
@media (max-width: 1100px) {
  [data-theme="dark"] .brand-tile img { padding: 9px 13px; border-radius: 11px; }
}
/* no logo yet: keep the row the same height so the grid stays even */
.brand-tile:not(.brand-tile--logo) { min-height: 96px; font-weight: 700; }

/* ---------- the dealer help videos ----------
   Cards live on both the public site and the portal sign-in screen, so the
   colours come from tokens where they exist and from a translucent white where
   the surface behind is a photo or a gradient. */
.vh-cards { display: flex; flex-direction: column; gap: 10px; }
.vh-cards__head {
  margin: 0 0 2px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; opacity: .75;
}
.vh-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  text-align: start; font-family: inherit;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  color: inherit;
  transition: background .16s, border-color .16s, transform .16s;
}
.vh-card:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); transform: translateY(-1px); }
.vh-card__play {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); color: #12151c;
}
.vh-card__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vh-card__txt b { font-size: 13.5px; font-weight: 650; }
.vh-card__txt span { font-size: 12px; opacity: .8; }

/* the player itself */
.vh-modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; }
.vh-modal__back { position: absolute; inset: 0; background: rgba(6, 8, 12, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vh-modal__panel {
  position: relative; width: min(920px, 100%);
  background: #101319; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.vh-modal__head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; color: #eef1f6; font-size: 13.5px; font-weight: 650;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.vh-modal__head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-modal__x {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 0; color: #aab3c2;
}
.vh-modal__x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* 16:9, and the player fills it whichever kind it turns out to be */
.vh-modal__body { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vh-modal__body iframe,
.vh-modal__body video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }