/* ============================================================
   Omnitint — page-specific styles
   ============================================================ */

/* ===== Home: dual hero ===== */
.dual-hero {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  min-height: calc(100vh - var(--header-h));
  position: relative;
  border-bottom: 1px solid var(--border);
}
.dual-hero .seam {
  background: var(--border);
  width: 1px;
}

/* ============================================================
   Overlay hero primitives (reusable)
   ============================================================
   Two stacked sub-blocks:
     1. .hero-panel-illust   — illustration with eyebrow + H1 overlaid
                                in white at top-left; a dark gradient
                                scrim across the top gives the text
                                consistent contrast against either a
                                photo or a vector illustration.
     2. .hero-panel-info     — pitch + CTAs on the page surface, below
                                the illustration.
   Used by:
   - .dual-hero--overlay   (home page, two side-by-side panels)
   - .landing-hero--overlay (single-panel landing page hero) */

.hero-panel-illust {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-alt);
  border-radius: var(--r-lg);
}
.hero-panel-illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-panel-illust-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 17, 21, 0.74) 0%,
    rgba(15, 17, 21, 0.52) 38%,
    rgba(15, 17, 21, 0.14) 70%,
    rgba(15, 17, 21, 0)   100%
  );
  pointer-events: none;
}
.hero-panel-illust-text {
  position: absolute;
  top: var(--s-7);
  left: var(--s-7);
  right: var(--s-7);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: #FFFFFF;
  max-width: 520px;
}
.hero-panel .hero-panel-illust-text .eyebrow,
.hero-panel .hero-panel-illust-text .caption,
.landing-hero--overlay .hero-panel-illust-text .eyebrow,
.landing-hero--overlay .hero-panel-illust-text .caption {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  display: inline-block;
}
.hero-panel-illust-text h1 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0;
  text-wrap: balance;
}

.hero-panel-info {
  padding: var(--s-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.hero-panel-info .pitch {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
  min-height: 0;
  max-width: 580px;
}
.hero-panel-info .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--s-2);
}

@media (max-width: 1023px) {
  .hero-panel-illust { aspect-ratio: 16 / 9; }
  .hero-panel-illust-text {
    top: var(--s-5);
    left: var(--s-5);
    right: var(--s-5);
  }
}
@media (max-width: 600px) {
  .hero-panel-illust-text h1 {
    font-size: 24px;
  }
}

/* ============================================================
   DualHero overlay variant
   ============================================================
   Home page only. Reuses the primitives above + dual-panel-specific
   layout: kills panel padding, makes the illustration full-bleed
   (no rounded corners inside the panel), adds a divider hairline. */
.dual-hero--overlay {
  min-height: 0;
}
.dual-hero--overlay .hero-panel {
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  overflow: visible;
}
.dual-hero--overlay .hero-panel-illust {
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.dual-hero--overlay .hero-panel-info {
  padding: var(--s-6) var(--s-7) var(--s-7);
  flex: 1;
}

@media (min-width: 1024px) {
  .dual-hero--overlay.hero-panel-producers,
  .dual-hero--overlay .hero-panel-producers {
    padding-left: 0;
  }
}
@media (max-width: 1023px) {
  .dual-hero--overlay {
    grid-template-columns: 1fr;
  }
  .dual-hero--overlay .hero-panel-info {
    padding: var(--s-5) var(--s-5) var(--s-7);
  }
}

/* ============================================================
   LandingHero overlay variant
   ============================================================
   Single-panel hero used on /paint-producers (and /paint-shops if we
   adopt). Sits inside .container; illustration keeps rounded corners. */
.landing-hero--overlay {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--s-7) 0 var(--s-8);
  /* Override the 2-col grid from the base .landing-hero */
  grid-template-columns: none;
  align-items: stretch;
}
.landing-hero--overlay .hero-panel-illust-text h1 {
  /* slightly larger on a single full-width hero since the illustration
     is wider than a half-panel; helps the title hold the frame */
  font-size: clamp(32px, 3.6vw, 52px);
}
@media (max-width: 600px) {
  .landing-hero--overlay {
    padding: var(--s-6) 0 var(--s-7);
  }
  .landing-hero--overlay .hero-panel-illust-text h1 {
    font-size: 26px;
  }
}

/* Desktop: cap hero block width and center it so content gathers
   toward the middle of the viewport on wide monitors.
   Right panel gets extra left padding to push its content away from
   the central seam. */
@media (min-width: 1024px) {
  .dual-hero {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-panel-producers {
    padding-left: var(--s-9); /* 96px — pushes content further right of seam */
  }
}

.hero-panel {
  position: relative;
  padding: var(--s-9) var(--s-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-5);
  min-height: 640px;
  overflow: hidden;
}
.hero-panel .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.hero-panel h1 {
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 520px;
  /* Reserve 3 line-heights so left/right titles align even if one wraps fewer lines */
  min-height: calc(1.08em * 3);
  margin: 0;
}
.hero-panel .pitch {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 480px;
  /* Reserve 2 line-heights so both panels match below the title */
  min-height: calc(1.6em * 2);
  margin: 0;
}
.hero-panel .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--s-3);
}
@media (max-width: 1023px) {
  .dual-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .dual-hero .seam {
    width: 100%;
    height: 1px;
    background: var(--border);
  }
  .hero-panel {
    min-height: auto;
    padding: var(--s-7) 24px;
    justify-content: flex-start;
  }
  .hero-panel h1 { font-size: 32px; min-height: 0; }
  .hero-panel .pitch { min-height: 0; }
}

/* Mobile: hide pitch so both panels (with CTAs) fit in viewport */
@media (max-width: 767px) {
  .hero-panel .pitch { display: none; }
  /* Hide secondary "become partner / request adaptation" CTAs — keep only the primary action per card */
  .hero-panel .btn-secondary { display: none; }
  .hero-panel { padding: var(--s-6) 16px; gap: var(--s-3); }
  .hero-panel h1 {
    font-size: 26px;
    line-height: 1.18;
  }
  .hero-panel .eyebrow { font-size: 12px; }
  .hero-panel .actions { margin-top: var(--s-2); }
}

/* Three-up feature row */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 768px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--s-5); }
}
/* Pillar card — Stitch port. Each pillar wraps in a bordered surface card;
   the icon retains its yellow ring so the brand accent survives. */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.feature:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-card-hover);
}
.feature .icon-wrap {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  position: relative;
}
.feature .icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2.4px solid var(--brand-yellow);
  border-radius: var(--r-pill);
}
.feature .icon-wrap svg { width: 22px; height: 22px; color: var(--ink); position: relative; z-index: 1; }
.feature h3 { font-size: 18px; font-weight: 600; }
.feature p { color: var(--ink-muted); font-size: 15px; line-height: 1.55; flex-grow: 1; }

/* Catalog strip (horizontal) */
.catalog-strip-wrap { position: relative; }
.catalog-strip {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  padding: 8px 4px var(--s-5);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.catalog-strip .color-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
}
.catalog-strip::-webkit-scrollbar { height: 6px; }
.catalog-strip::-webkit-scrollbar-track { background: transparent; }
.catalog-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); }
.catalog-strip-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 24px;
  width: 80px;
  background: linear-gradient(90deg, transparent 0%, var(--bg) 100%);
  pointer-events: none;
}
.section-alt .catalog-strip-wrap::after {
  background: linear-gradient(90deg, transparent 0%, var(--surface-alt) 100%);
}

.catalog-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-5);
  flex-wrap: wrap;
  gap: 16px;
}

/* Service banner */
.service-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: var(--s-7);
}
@media (max-width: 768px) {
  .service-banner { grid-template-columns: 1fr; padding: var(--s-5); }
}
.service-banner h3 { font-size: 24px; margin-bottom: var(--s-3); }
.service-banner p { color: var(--ink-muted); margin-bottom: var(--s-4); }

/* ===== Paint shops & producers ===== */
.landing-hero {
  padding: var(--s-9) 0 var(--s-8);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
@media (max-width: 1023px) {
  .landing-hero { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-7) 0; }
}
.landing-hero .copy h1 { font-size: clamp(36px, 4.2vw, 56px); margin-bottom: var(--s-4); }
.landing-hero .copy p { font-size: 18px; line-height: 1.6; color: var(--ink-muted); margin-bottom: var(--s-5); max-width: 580px; }
.landing-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-illustration {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
}

/* Photo hero — replaces the inline SVG illustration on producers + shops.
   4:3 landscape feel that pairs naturally with the 2-col copy + image hero. */
.hero-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface-alt);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 768px) {
  .three-col { grid-template-columns: 1fr; }
}
.three-col .item {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.three-col .num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Card variant — used by paint-shops Solution block.
   Each item is a bordered surface card with the ring-bullet inline with
   the title (top row), body text below. Yellow ring-bullets carry the
   brand accent. */
.three-col--cards { gap: var(--s-5); }
.three-col--cards .item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-6);
  gap: var(--s-4);
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.three-col--cards .item:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-card-hover);
}
.three-col--cards .item-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.three-col--cards .item-head h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.three-col--cards .item p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

/* Two-col benefits with ring bullets */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
}
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Colorants deep-dive — Stitch port.
   Left column carries the caption + h2 + body + a big photo of canisters
   (grayscale by default, color on hover). Right column hosts the
   feature ring-list inside a bordered surface-alt panel. */
.colorants-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center;
}
@media (max-width: 1023px) {
  .colorants-grid { grid-template-columns: 1fr; gap: var(--s-7); }
}
.colorants-copy { display: flex; flex-direction: column; gap: var(--s-5); }
.colorants-photo {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface-alt);
}
.colorants-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1);
  transition: filter 0.5s ease;
}
.colorants-photo:hover img { filter: grayscale(0); }
.colorants-features {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-7);
}
.colorants-features .ring-list { gap: var(--s-4); }
.colorants-features .ring-list li { font-size: 16px; }
@media (max-width: 600px) {
  .colorants-features { padding: var(--s-5); }
}

/* Four-up tile block */
.four-up {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1023px) { .four-up { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .four-up { grid-template-columns: 1fr; } }
/* Three-tile variant — wider cards when one tile is dropped. */
.four-up--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .four-up--three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .four-up--three { grid-template-columns: 1fr; } }
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 200px;
  transition: border-color 0.15s, box-shadow 0.2s;
}
.tile:hover { border-color: var(--ink); box-shadow: var(--shadow-card-hover); }
.tile .icon-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  position: relative;
}
.tile .icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2.4px solid var(--brand-yellow);
  border-radius: var(--r-pill);
}
.tile .icon-wrap svg { width: 20px; height: 20px; }
.tile h3 { font-size: 17px; font-weight: 600; }
.tile p { color: var(--ink-muted); font-size: 14px; line-height: 1.55; }

/* Photo-tile variant — square illustration at top, copy below.
   Ported from Stitch's paint-shops Service & Support render. */
.four-up--photo { gap: var(--s-5); }
.four-up--photo .tile {
  padding: 0;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}
.four-up--photo .tile-photo {
  aspect-ratio: 1 / 1;
  background: var(--surface-alt);
  overflow: hidden;
}
.four-up--photo .tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.four-up--photo .tile:hover .tile-photo img { transform: scale(1.03); }
.four-up--photo .tile-body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.four-up--photo .tile h3 { margin: 0; }
.four-up--photo .tile p { margin: 0; }

/* Service promo callout — pill-shaped bordered shell with "Бесплатно" chip.
   Replaces the centered paragraph; sits above the four-up tiles. */
.service-promo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) auto var(--s-7);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 15px;
  color: var(--ink);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
}
.service-promo strong { font-weight: 600; }
.service-promo .free-pill { margin-left: 0; }
@media (max-width: 600px) {
  .service-promo {
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--r-md);
    text-align: left;
    font-size: 14px;
  }
}

/* Process timeline — Stitch port. Vertical list, 1px hairline connector
   running through the column of yellow badges. No card chrome on the
   steps themselves; the visual rhythm comes from the badges + indent. */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  padding: 0;
  margin: 0 0 var(--s-3) 0;
  list-style: none;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: -10px;
  width: 1px;
  background: var(--border-strong);
  z-index: 0;
}
/* Finishing dot — small disc in --border-strong (NOT yellow) so the
   connector hairline doesn't visually hang off the last badge. */
.timeline::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: -14px;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  z-index: 0;
}
.step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding-left: 0;
}
.step-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--brand-yellow);
  color: var(--brand-yellow-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(10, 10, 10, 0.08);
}
.step-body { padding-top: var(--s-2); }
.step-body h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.step-body p {
  margin-top: var(--s-2);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}
@media (max-width: 600px) {
  .timeline { gap: var(--s-6); }
  .timeline::before { left: 15px; bottom: -8px; }
  .timeline::after { left: 12px; bottom: -12px; }
  .step-badge { width: 32px; height: 32px; font-size: 12px; }
  .step { gap: var(--s-4); }
  .step-body h4 { font-size: 17px; }
  .step-body p { font-size: 14.5px; }
}

/* FAQ */
.faq-list { max-width: 880px; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.faq-q .icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-q .icon { transform: rotate(45deg); }
.faq-a {
  padding: 0 0 24px;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 760px;
}
details.faq-item summary { list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }

/* Checklist block */
.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-6);
}
@media (max-width: 768px) { .checklist { grid-template-columns: 1fr; } }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  line-height: 1.5;
}
.checklist .check {
  width: 24px; height: 24px;
  flex-shrink: 0;
  background: var(--brand-yellow);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.checklist .check svg { width: 14px; height: 14px; }

/* ===== Color search ===== */
.search-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: sticky;
  top: calc(var(--header-h) + 16px);
  z-index: 5;
}
@media (max-width: 768px) { .search-panel { padding: var(--s-4); position: static; } }

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--s-4);
  background: var(--surface-alt);
  padding: 4px;
  border-radius: var(--r-sm);
  width: fit-content;
}
.tab {
  height: 36px;
  padding: 0 16px;
  background: transparent;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }
.tab:hover { color: var(--ink); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.search-controls {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: end;
}
.search-controls .field { margin-bottom: 0; }
@media (max-width: 900px) {
  .search-controls { grid-template-columns: 1fr 1fr; }
  .search-controls .btn { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    height: auto;
    padding: 8px 10px;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
  }
  .search-controls {
    grid-template-columns: 1fr;
  }
  .search-controls .input::placeholder {
    font-size: 14px;
  }
}
.lab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 900px) {
  .lab-grid { grid-template-columns: repeat(2, 1fr); }
  .lab-grid .btn { grid-column: 1 / -1; }
}

.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: var(--s-6) 0 var(--s-4);
  flex-wrap: wrap;
}
.results-bar .count { color: var(--ink-muted); font-size: 14px; }

.results-grid {
  display: grid;
  /* minmax(0, 1fr) lets tracks shrink below their content's min-content size,
     so long color names / catalog chips never force the grid wider than its
     container (which would cause horizontal page scroll on mobile). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  /* Top-align so expanding one card's ΔE breakdown doesn't stretch its row. */
  align-items: start;
}
@media (max-width: 1200px) { .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: keep 2 columns so thumbs stay compact (~quarter of the old full-width size). */
@media (max-width: 480px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } }

/* Producers "Каталог системы" teaser — keep the swatches to a single row.
   Markup slices to 4 (the desktop column count); as columns drop at each
   breakpoint we hide the overflow cards so the row never wraps. Mobile keeps
   two across rather than a lone swatch. */
.results-grid--single-row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) {
  .results-grid--single-row { grid-template-columns: repeat(3, 1fr); }
  .results-grid--single-row .color-card:nth-child(n + 4) { display: none; }
}
@media (max-width: 768px) {
  .results-grid--single-row { grid-template-columns: repeat(2, 1fr); }
  .results-grid--single-row .color-card:nth-child(n + 3) { display: none; }
}
@media (max-width: 480px) {
  .results-grid--single-row { grid-template-columns: repeat(2, 1fr); }
}

.similar-panel {
  margin-top: var(--s-7);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: background-color 0.25s ease;
}
.similar-panel h3 {
  font-size: 22px;
  margin-bottom: var(--s-3);
}
.similar-panel .selected-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-alt);
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}
.similar-panel .selected-mark .swatch-tiny {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(10,10,10,0.06);
}

/* Similar-panel toolbar: dE slider · catalogs popover · bg-fill toggle */
.similar-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.similar-toolbar .dE-control {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 220px;
  max-width: 360px;
  color: var(--ink-muted);
  font-size: 14px;
}
.similar-toolbar .dE-control strong { color: var(--ink); }
.similar-toolbar .dE-control input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--ink);
}
.similar-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.cards-popover { position: relative; }
.popover-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.popover-trigger:hover { border-color: var(--ink); }
.popover-trigger[aria-expanded="true"] { border-color: var(--ink); background: var(--surface-alt); }
.popover-trigger svg { width: 14px; height: 14px; }
.popover-trigger .popover-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.popover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.45);
  z-index: 50;
  /* Hidden on desktop — clicking outside is handled by document-level
     mousedown. The backdrop becomes visible only in mobile bottom-sheet mode. */
  display: none;
}
.popover-panel {
  position: fixed;
  top: 0;
  left: 16px;
  right: auto;
  width: min(920px, calc(100vw - 64px));
  max-height: calc(100vh - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px rgba(10,10,10,0.10), 0 2px 6px rgba(10,10,10,0.05);
  padding: var(--s-5);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.popover-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.popover-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}
.popover-clear {
  background: transparent;
  border: 0;
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.popover-clear:hover { color: var(--ink); }
.popover-x {
  display: none; /* desktop hides the X — trigger button closes it */
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--ink-muted);
  border-radius: var(--r-sm);
}
.popover-x:hover { color: var(--ink); background: var(--surface-alt); }
.popover-catalog-groups {
  display: block;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding-right: 4px;
}
.popover-catalog-group {
  margin: 0 0 18px;
}
.popover-catalog-group:last-child { margin-bottom: 0; }
.popover-letter {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}
.popover-catalog-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.popover-catalog-list .chip-multi {
  width: 100%;
  min-height: 34px;
  height: auto;
  justify-content: flex-start;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.popover-hint {
  font-size: 12px;
  color: var(--ink-subtle);
  margin: 0;
}
.popover-footer {
  display: none; /* desktop hides the footer — handled by trigger/outside-click */
  gap: 12px;
}
.popover-footer .btn { flex: 1; justify-content: center; }

/* Mobile: turn the popover into a bottom-sheet modal */
@media (max-width: 768px) {
  .popover-backdrop { display: block; }
  .popover-panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    max-height: 80vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: var(--s-5) var(--s-4) calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
    z-index: 60;
    animation: sheet-up 220ms ease-out;
  }
  .popover-catalog-list { grid-template-columns: 1fr; }
  .popover-x { display: inline-flex; align-items: center; justify-content: center; }
  .popover-footer { display: flex; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .popover-catalog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Mobile: collapse initial results to just the picked one */
.show-rest-mobile {
  display: none;
}
@media (max-width: 768px) {
  .results-grid.is-mobile-collapsed .color-card:not(.is-selected) { display: none; }
  .show-rest-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    margin-top: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }
  .show-rest-mobile:hover { border-color: var(--ink); }
}

.bg-fill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.bg-fill-toggle:hover { border-color: var(--ink); }
.bg-fill-toggle .toggle-track {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--border-strong);
  border-radius: var(--r-pill);
  transition: background-color 0.15s;
}
.bg-fill-toggle .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgba(10,10,10,0.2);
  transition: transform 0.15s;
}
.bg-fill-toggle[aria-checked="true"] { border-color: var(--ink); }
.bg-fill-toggle[aria-checked="true"] .toggle-track { background: var(--ink); }
.bg-fill-toggle[aria-checked="true"] .toggle-thumb { transform: translateX(14px); }

/* Bg-fill mode: the panel is painted with the selected color; flip text/chrome
   to readable values. `.is-bg-dark` is set when L* < 55 on the selected color. */
.similar-panel.is-bg-fill { border-color: rgba(255,255,255,0.18); }
.similar-panel.is-bg-fill h3 { color: var(--ink); }
.similar-panel.is-bg-fill .selected-mark { background: rgba(255,255,255,0.92); }
.similar-panel.is-bg-fill.is-bg-dark h3 { color: #fff; }
.similar-panel.is-bg-fill.is-bg-dark .dE-control { color: rgba(255,255,255,0.85); }
.similar-panel.is-bg-fill.is-bg-dark .dE-control strong { color: #fff; }
.similar-panel.is-bg-fill.is-bg-dark .popover-trigger,
.similar-panel.is-bg-fill.is-bg-dark .bg-fill-toggle {
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border-color: rgba(255,255,255,0.6);
}
.similar-panel.is-bg-fill.is-bg-dark .muted { color: rgba(255,255,255,0.8); }

.disclaimer {
  margin-top: var(--s-7);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 880px;
  padding: var(--s-5);
  background: var(--surface-alt);
  border-radius: var(--r-md);
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-alt) 0%, #E2E5EA 50%, var(--surface-alt) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ===== Contacts ===== */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 900px) { .contacts-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.contact-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: start;
}
.contact-item .icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  color: var(--ink);
  flex-shrink: 0;
}
.contact-item .icon svg { width: 18px; height: 18px; }
.contact-item .label { font-size: 13px; color: var(--ink-muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.contact-item .value { font-size: 16px; line-height: 1.5; color: var(--ink); }
.contact-item a { font-size: 16px; }
.contact-item a:hover { text-decoration: underline; }

.inquiry-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.inquiry-form h2 { font-size: 22px; margin-bottom: var(--s-3); }

.contacts-map {
  height: 420px;
  background: var(--surface-alt);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.contacts-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== Registration ===== */
.register-shell {
  max-width: 840px;
  margin: 0 auto;
}
.register-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
@media (max-width: 768px) {
  .stepper { display: none; }
}
.step-pill {
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--border);
  position: relative;
}
.step-pill:last-child { border-right: 0; }
.step-pill .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 600;
}
.step-pill .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
/* v2: active pill is white-surface + dark border instead of yellow background.
   Keeps the "yellow only on buttons + badges" rule. */
.step-pill[data-state="done"] .num { color: var(--ink); }
.step-pill[data-state="active"] {
  background: var(--surface);
  box-shadow: inset 0 -2px 0 0 var(--ink);
}
.step-pill[data-state="active"] .num { color: var(--ink); }
.step-pill[data-state="active"] .name { color: var(--ink); font-weight: 600; }
.step-pill[data-state="pending"] .num { color: var(--ink-subtle); }
.step-pill[data-state="pending"] .name { color: var(--ink-subtle); font-weight: 500; }

.mobile-stepper {
  display: none;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
@media (max-width: 768px) {
  .mobile-stepper { display: block; }
}
.mobile-stepper .label {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.mobile-stepper .label > span:first-child {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mobile-stepper .label .name { color: var(--ink); font-weight: 500; }

/* v2: progress bar uses --ink fill on a --border track (no yellow on a
   wide thin element — that conflicts with the strict palette). */
.progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress-bar > div {
  height: 100%;
  background: var(--ink);
  transition: width 0.3s ease;
}

.step-content { padding: var(--s-7); }
@media (max-width: 768px) { .step-content { padding: var(--s-5); } }
.step-content[hidden] { display: none; }
.step-content h2 { font-size: 24px; margin-bottom: var(--s-2); }
.step-content .lead { color: var(--ink-muted); margin-bottom: var(--s-5); }

.step-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: var(--s-5) var(--s-7);
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .step-nav {
    position: sticky;
    bottom: 0;
    padding: var(--s-3) var(--s-4);
  }
}
.step-nav .btn { flex: 1 1 auto; min-width: 140px; }

/* Summary block (step 4) */
.summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.summary-group {
  background: var(--surface-alt);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.summary-group .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
.summary-group h3 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.summary-group .edit { font-size: 14px; color: var(--ink); text-decoration: underline; cursor: pointer; }
.summary-group dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
@media (max-width: 600px) { .summary-group dl { grid-template-columns: 1fr; gap: 4px 0; } }
.summary-group dt { color: var(--ink-muted); }
.summary-group dd { color: var(--ink); margin: 0; word-break: break-word; }
.summary-group dd.empty { color: var(--ink-muted); font-style: italic; }

/* Confirmation */
.confirmation {
  text-align: center;
  padding: var(--s-9) var(--s-5);
}
.confirmation .ring {
  width: 88px;
  height: 88px;
  border: 6px solid var(--brand-yellow);
  border-radius: var(--r-pill);
  margin: 0 auto var(--s-5);
}
.confirmation h2 { font-size: 32px; margin-bottom: var(--s-3); }
.confirmation p { color: var(--ink-muted); font-size: 17px; margin-bottom: var(--s-6); }
.confirmation .actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Inline assist badge */
.assist-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--ink-muted);
  margin-left: 8px;
}
.assist-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--brand-yellow);
}

/* Filter chips (color search) */
.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-3);
}
.chip-multi {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.chip-multi:hover { border-color: var(--ink); }
.chip-multi[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.empty-state {
  text-align: center;
  padding: var(--s-9) var(--s-4);
  color: var(--ink-muted);
}
.empty-state h3 { font-size: 22px; color: var(--ink); margin-bottom: var(--s-2); }
.empty-state p { max-width: 480px; margin: 0 auto var(--s-5); }

/* Numbered "what you get" list */
.bigger-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5) var(--s-7);
}
@media (max-width: 768px) { .bigger-list { grid-template-columns: 1fr; } }
.bigger-list .item { display: flex; gap: 16px; align-items: flex-start; }
.bigger-list .item .num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-muted);
  width: 36px;
  flex-shrink: 0;
}
.bigger-list .item h4 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.bigger-list .item p { color: var(--ink-muted); font-size: 14px; line-height: 1.55; }

/* ============================================================
   paint-producers — new sections (added 2026-05-12)
   ============================================================ */

/* No-rebrand callout — v2: dropped the warm yellow+magenta gradient and the
   playful card rotations. Cards now sit upright on the strict palette;
   the "after" card carries a 2px brand-yellow border to signal the transform. */
.rebrand-callout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  padding: var(--s-8);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
@media (max-width: 900px) {
  .rebrand-callout { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-6); }
}
.rebrand-copy h2 { font-size: 32px; line-height: 1.15; }
.rebrand-copy .lead { margin-top: var(--s-4); font-size: 17px; }
.rebrand-copy .muted { margin-top: var(--s-3); font-size: 14px; }

/* Rebrand cards — compact before/after sample rows. The "after" card carries
   a yellow-tinted border + olive-colored bold code as the visual diff. */
.rebrand-visual {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  justify-content: center;
}
.rebrand-example-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-content: center;
  width: 100%;
}
.rebrand-card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  justify-content: space-between;
  text-align: left;
}
.rebrand-swatch {
  width: 72px;
  height: 56px;
  flex: 0 0 72px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 2px 4px rgba(10, 10, 10, 0.12);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rebrand-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  align-items: flex-start;
  min-width: 0;
}
.rebrand-label {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.rebrand-code {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.rebrand-arrow {
  color: var(--ink-subtle);
  flex-shrink: 0;
  display: inline-flex;
  /* keep the arrow vertically centered between the (now stretched) cards */
  align-self: center;
}
.rebrand-arrow svg { width: 24px; height: 24px; }
@media (max-width: 560px) {
  .rebrand-example-row {
    gap: var(--s-2);
  }
  .rebrand-card {
    padding: 8px;
    gap: 8px;
  }
  .rebrand-swatch {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .rebrand-label {
    font-size: 9px;
    line-height: 1.15;
  }
  .rebrand-code { font-size: 12px; }
  .rebrand-arrow svg { width: 18px; height: 18px; }
}
/* "After" card: subtle yellow-tinted border + olive bold code — the only
   visual differentiator since the swatch is the same. */
.rebrand-after { border: 1px solid rgba(255, 230, 0, 0.4); }
.rebrand-after .rebrand-code {
  color: var(--brand-olive);
  font-weight: 700;
}

/* 6. Free pill — inline badge for "бесплатно" */
.free-pill {
  display: inline-block;
  margin-left: var(--s-3);
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--brand-yellow);
  border-radius: var(--r-pill);
  vertical-align: middle;
}

/* 7. Materials chip strip */
.materials-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-6);
}
.material-chip {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: var(--r-pill);
}

.software-collage-card {
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.08);
  overflow: hidden;
}
.software-collage-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   Tinting system section — v2: vertical accordion (Variant B).
   Six rows in a single column, identical on desktop and mobile.
   Each row shows number + icon + title + short blurb + owner tag
   + chevron. Click expands inline; only one row open at a time.
   Used on / (Home).
   ============================================================ */
.tinting-system { padding: var(--s-9) 0; }

.tinting-system .ts-head {
  max-width: 720px;
  margin: 0 auto var(--s-7);
  text-align: center;
}
.tinting-system .ts-head .caption { color: var(--ink-subtle); }
.tinting-system .ts-head h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.18;
  margin-top: var(--s-3);
}
.tinting-system .ts-head p {
  color: var(--ink-muted);
  font-size: 16px;
  margin-top: var(--s-3);
}

.tinting-system .ts-diagram-block {
  max-width: 1120px;
  margin: 0 auto var(--s-7);
}

.tinting-system .ts-diagram-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1448 / 1086;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.tinting-system .ts-diagram-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tinting-system .ts-diagram-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tinting-system .ts-diagram-links {
  position: absolute;
  inset: 0;
}

.tinting-system .ts-diagram-link {
  position: absolute;
  z-index: 2;
  display: block;
  left: var(--hotspot-left);
  top: var(--hotspot-top);
  width: var(--hotspot-width);
  height: var(--hotspot-height);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 22px;
  cursor: pointer;
  transform: none;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.tinting-system .ts-diagram-link:hover {
  background: rgba(255, 230, 0, 0.14);
  border-color: rgba(10, 10, 10, 0.24);
  box-shadow: 0 10px 26px rgba(10, 10, 10, 0.07);
  transform: translateY(-1px);
}

.tinting-system .ts-diagram-link:focus-visible {
  background: rgba(255, 230, 0, 0.16);
  border-color: rgba(10, 10, 10, 0.26);
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.36);
  outline: 0;
}

.tinting-system .ts-diagram-link--overview {
  --hotspot-left: 34%;
  --hotspot-top: 36.2%;
  --hotspot-width: 32.1%;
  --hotspot-height: 21.8%;
  border-radius: 24px;
}
.tinting-system .ts-diagram-link--colorants {
  --hotspot-left: 17.4%;
  --hotspot-top: 4.5%;
  --hotspot-width: 19.8%;
  --hotspot-height: 20.8%;
}
.tinting-system .ts-diagram-link--formulas {
  --hotspot-left: 63%;
  --hotspot-top: 4.5%;
  --hotspot-width: 19.8%;
  --hotspot-height: 20.8%;
}
.tinting-system .ts-diagram-link--software {
  --hotspot-left: 75.1%;
  --hotspot-top: 36.4%;
  --hotspot-width: 19.8%;
  --hotspot-height: 20.6%;
}
.tinting-system .ts-diagram-link--base-paints {
  --hotspot-left: 63%;
  --hotspot-top: 68.1%;
  --hotspot-width: 19.8%;
  --hotspot-height: 20.7%;
}
.tinting-system .ts-diagram-link--equipment {
  --hotspot-left: 17.4%;
  --hotspot-top: 68.1%;
  --hotspot-width: 19.8%;
  --hotspot-height: 20.7%;
}
.tinting-system .ts-diagram-link--catalogs {
  --hotspot-left: 5.2%;
  --hotspot-top: 36.4%;
  --hotspot-width: 19.8%;
  --hotspot-height: 20.6%;
}

.tinting-system .ts-diagram-mobile-links {
  display: none;
}

@media (max-width: 760px) {
  .tinting-system .ts-diagram-block {
    margin-bottom: var(--s-6);
  }

  .tinting-system .ts-diagram-visual {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .tinting-system .ts-diagram-link:not(.ts-diagram-link--overview) {
    display: none;
  }

  .tinting-system .ts-diagram-mobile-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    overflow: hidden;
  }

  .tinting-system .ts-diagram-mobile-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 10px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    transition: background 0.16s ease;
  }

  .tinting-system .ts-diagram-mobile-link:hover,
  .tinting-system .ts-diagram-mobile-link:focus-visible {
    background: var(--surface-alt);
  }

  .tinting-system .ts-diagram-mobile-link:focus-visible {
    outline: 2px solid var(--brand-yellow);
    outline-offset: -2px;
  }

  .tinting-system .ts-diagram-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    border-radius: var(--r-sm);
    background: var(--surface-alt);
    color: var(--ink-muted);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
  }

  .tinting-system .ts-diagram-mobile-link.omnitint .ts-diagram-num {
    background: var(--brand-yellow);
    color: var(--brand-yellow-ink);
  }

  .tinting-system .ts-diagram-title {
    min-width: 0;
  }
}

/* paint-producers — Option B reshape (added 2026-05-12) */

/* Anchor offset so #colorants / #software / #lab / #process land below the sticky header. */
section[id="colorants"],
section[id="software"],
section[id="lab"],
section[id="process"] {
  scroll-margin-top: calc(var(--header-h, 80px) + 16px);
}

/* "Подробнее →" affordance inside each three-pillar tile.
   margin-top:auto pushes it to the bottom so tiles align even when paragraph
   lengths differ. */
.feature .feature-link {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-olive);
  text-decoration: none;
  align-self: flex-start;
}
.feature .feature-link:hover { text-decoration: underline; }

/* Intro line above the materials chip strip inside the Lab section */
.materials-intro {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  font-size: 14px;
  color: var(--ink-muted);
  text-align: center;
}

/* ============================================================
   /tinting-system page
   ============================================================ */

/* "Подробнее →" link inside the home accordion's expanded panel — jumps to
   the matching anchor on /tinting-system. */
.tinting-system .ts-detail-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.tinting-system .ts-detail-more svg { width: 16px; height: 16px; }
.tinting-system .ts-detail-more:hover { text-decoration: underline; }

/* System map TOC — 6 anchor tiles at the top of /tinting-system.
   Same visual language as the home accordion rows, but each tile is a
   single link that scrolls to the matching deep-dive section below. */
.ts-map-section {
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.ts-map {
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.ts-map-item + .ts-map-item { border-top: 1px solid var(--border); }
.ts-map-item a {
  display: grid;
  grid-template-columns: 64px 40px minmax(0, 1fr) 74px 22px;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.15s;
}
.ts-map-item a:hover { background: var(--surface-alt); }
.ts-map-item .ts-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink-subtle);
  line-height: 1;
}
.ts-map-item .ts-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-map-item .ts-icon img { width: 100%; height: 100%; object-fit: contain; }
.ts-map-item .ts-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ts-map-item .ts-title { font-size: 18px; font-weight: 600; color: var(--ink); }
.ts-map-item .ts-blurb { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.ts-map-item .ts-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--brand-yellow);
  color: var(--brand-yellow-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ts-map-item .ts-tag-external {
  background: var(--surface-alt);
  color: var(--ink-subtle);
}
.ts-map-item .ts-arrow {
  grid-column: 5;
  width: 22px;
  height: 22px;
  color: var(--ink-subtle);
  transition: transform 0.15s, color 0.15s;
}
.ts-map-item a:hover .ts-arrow {
  color: var(--ink);
  transform: translateX(2px);
}
.ts-map-item .ts-arrow svg { width: 100%; height: 100%; }

@media (max-width: 768px) {
  .ts-map-item a {
    grid-template-columns: 36px 36px 1fr auto;
    gap: var(--s-3);
    padding: var(--s-4);
  }
  .ts-map-item .ts-arrow { grid-column: auto; }
  .ts-map-item .ts-num { font-size: 20px; }
  .ts-map-item .ts-icon { width: 36px; height: 36px; }
  .ts-map-item .ts-title { font-size: 16px; }
  .ts-map-item .ts-blurb { display: none; }
  .ts-map-item .ts-tag { display: none; }
}

/* Deep-dive section — alternating bg, 2-col desktop, 1-col mobile.
   Photo and copy swap positions on odd rows (--reversed). */
.deep-dive {
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.deep-dive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}
.deep-dive-grid--reversed .deep-dive-copy { order: 2; }
.deep-dive-grid--reversed .deep-dive-photo { order: 1; }
@media (max-width: 900px) {
  .deep-dive-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .deep-dive-grid--reversed .deep-dive-copy { order: 2; }
  .deep-dive-grid--reversed .deep-dive-photo { order: 1; }
  /* On mobile every row is photo-first regardless of reversed */
  .deep-dive-grid .deep-dive-photo { order: 1; }
  .deep-dive-grid .deep-dive-copy { order: 2; }
}

.deep-dive-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.deep-dive-copy h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  font-weight: 600;
  margin: 0;
}
.deep-dive-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.deep-dive-eyebrow .ts-num-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.deep-dive-eyebrow .ts-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--brand-yellow);
  color: var(--brand-yellow-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.deep-dive-eyebrow .ts-tag-external {
  background: var(--surface-alt);
  color: var(--ink-subtle);
}

.deep-dive-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.deep-dive-body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
}

.deep-dive-specs {
  margin: var(--s-3) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
.deep-dive-spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.deep-dive-spec-row dt {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
}
.deep-dive-spec-row dd {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.deep-dive-photo {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  background: var(--surface-alt);
}
.deep-dive-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .deep-dive-photo { aspect-ratio: 16 / 9; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: var(--s-3);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow .arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.15s;
}
.link-arrow:hover .arrow { transform: translateX(2px); }

/* Responsibility split — 3 + 3 with service bonus line */
.resp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-top: var(--s-7);
}
@media (max-width: 768px) {
  .resp-split { grid-template-columns: 1fr; gap: var(--s-5); }
}
.resp-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.resp-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 var(--s-4);
}
.resp-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  flex-shrink: 0;
}
.resp-dot-brand { background: var(--brand-yellow); }
.resp-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.resp-col li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  align-items: baseline;
  font-size: 16px;
  color: var(--ink);
}
.resp-col li strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink-subtle);
}
.resp-bonus {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}


/* ============================================================
   /about page
   ============================================================ */

/* Mission pull-quote — single block on --surface-alt with the caption and
   one large-ish quoted sentence. Aligns container, no quotation marks. */
.mission-quote {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.mission-quote .caption {
  display: inline-block;
  margin-bottom: var(--s-4);
}
.mission-quote p {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}

/* Stats strip — 5 figure + label pairs, evenly spaced on desktop, wrap to a
   2-col grid on tablet, single column on phone. */
.stats-strip {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5);
}
/* 3-col variant used on the home «О компании» block. Tablet (1023px) and
   mobile (600px) media queries below already collapse to 3 / 2 cols and
   adjust borders; the base override here only changes the desktop grid. */
.stats-strip--3col { grid-template-columns: repeat(3, 1fr); }
.stats-strip li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--s-5) var(--s-4);
  border-left: 1px solid var(--border);
}
.stats-strip li:first-child { border-left: 0; }
.stats-figure {
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.stats-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}
@media (max-width: 1023px) {
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
  .stats-strip li:nth-child(4) { border-left: 0; }
}
@media (max-width: 600px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stats-strip li { border-left: 0; padding: var(--s-4) 0; border-top: 1px solid var(--border); }
  .stats-strip li:nth-child(-n+2) { border-top: 0; }
}

/* About-cards — link variant of the .tile pattern. Strips link styling,
   adds an arrow chevron at the bottom. */
.about-cards .about-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 220px;
}
.about-cards .about-card .link-arrow {
  margin-top: auto;
  font-size: 14px;
  color: var(--ink-muted);
  transition: color 0.15s;
}
.about-cards .about-card:hover .link-arrow { color: var(--ink); }
.about-cards .about-card:hover .link-arrow .arrow { transform: translateX(2px); }

/* ── Order calculator (cabinet) ─ responsive card rows, no horizontal scroll ─ */
.calc-list { display: flex; flex-direction: column; }
.calc-row { padding: 14px 16px; border-top: 1px solid var(--line, #ececec); }
.calc-row:first-child { border-top: 0; }
.calc-main { display: flex; align-items: center; gap: 12px; }
.calc-code {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  flex: 0 0 auto;
}
.calc-spacer { flex: 1 1 auto; min-width: 8px; }
.calc-qty { width: 88px; flex: 0 0 auto; text-align: right; }
.calc-sums { flex: 0 0 auto; text-align: right; white-space: nowrap; min-width: 96px; }
.calc-sums .calc-retail { font-weight: 600; }
.calc-sums .calc-wholesale { font-size: 12px; color: var(--success, #16A34A); }
.calc-sums .calc-empty { color: var(--ink-subtle, #9aa1ab); }
.calc-fine {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted, #5B6470);
}
.calc-fine .calc-name { color: var(--ink, #0A0A0A); font-weight: 500; }

.calc-totals { display: flex; flex-wrap: wrap; gap: 20px 28px; justify-content: space-between; }
.calc-total-label { font-size: 13px; color: var(--ink-muted, #5B6470); }
.calc-total-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .calc-row { padding: 12px; }
  .calc-main { gap: 8px; }
  .calc-code { min-width: 30px; }
  .calc-qty { width: 70px; }
  .calc-sums { min-width: 82px; }
  .calc-total-value { font-size: 19px; }
}

/* ── Account chip (header) ─────────────────────────────────────────────── */
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line, #e7e7e7);
  border-radius: 999px;
  background: var(--paper, #fff);
  color: var(--ink, #0A0A0A);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  max-width: 220px;
  transition: border-color 0.15s, background 0.15s;
}
.account-chip:hover { border-color: var(--ink, #0A0A0A); }
.account-chip__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink, #0A0A0A);
  color: #FFE600;
  font-size: 12px;
  font-weight: 700;
}
.account-chip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-chip--block {
  display: flex;
  width: 100%;
  max-width: none;
  justify-content: flex-start;
  padding: 7px 14px 7px 7px;
}
@media (max-width: 520px) {
  /* Avatar-only in the top bar on small phones; the hamburger keeps the name. */
  .header-right .account-chip { padding: 5px; }
  .header-right .account-chip__name { display: none; }
}

/* ── Responsive admin tables: desktop table, mobile cards ──────────────── */
.admin-cards { display: none; }
@media (max-width: 640px) {
  .admin-table-wrap { display: none; }
  .admin-cards { display: flex; flex-direction: column; gap: 10px; }
}
.admin-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line, #ececec);
  border-radius: 12px;
  background: var(--paper, #fff);
  color: var(--ink, #0A0A0A);
  text-decoration: none;
}
a.admin-card:active { background: var(--surface-alt, #f6f6f6); }
.admin-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-card__title { font-weight: 700; }
.admin-card__chevron { color: var(--ink-subtle, #9aa1ab); flex: 0 0 auto; }
.admin-card__meta { margin-top: 6px; font-size: 13px; color: var(--ink-muted, #5B6470); line-height: 1.6; }
.admin-card__meta b { color: var(--ink, #0A0A0A); font-weight: 600; }

/* ── Cabinet: desktop top-right logout + admin nav list ────────────────── */
.cabinet-shell { position: relative; }
.cabinet-logout { position: absolute; top: 0; right: 0; }
/* On mobile the hamburger menu already carries logout — hide the inline one. */
@media (max-width: 1023px) { .cabinet-logout { display: none; } }

.admin-nav { display: flex; flex-direction: column; }
.admin-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  color: var(--ink, #0A0A0A);
  text-decoration: none;
  border-radius: 8px;
}
.admin-nav-item:not(:last-child) { border-bottom: 1px solid var(--line, #ececec); }
a.admin-nav-item { transition: background 0.12s; }
a.admin-nav-item:hover { background: var(--surface-alt, #f6f6f6); }
.admin-nav-arrow { color: var(--ink-subtle, #9aa1ab); transition: transform 0.12s, color 0.12s; }
a.admin-nav-item:hover .admin-nav-arrow { transform: translateX(3px); color: var(--ink, #0A0A0A); }
.admin-nav-item--disabled { opacity: 0.55; }