:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1015;
  --bg-elevated: #13161d;
  --surface: #161a22;
  --surface-2: #1c212b;
  --surface-3: #232936;
  --border: rgba(255, 255, 255, 0.07);
  --border-light: rgba(255, 255, 255, 0.11);
  --accent: #e8707f;
  --accent-hover: #f08a97;
  --accent-deep: #c95a68;
  --accent-dim: rgba(232, 112, 127, 0.12);
  --accent-glow: rgba(232, 112, 127, 0.18);
  --green: #6ecfae;
  --green-dim: rgba(110, 207, 174, 0.11);
  --green-glow: rgba(110, 207, 174, 0.14);
  --green-text: #052e16;
  --amber: #e8b86d;
  --amber-text: #451a03;
  --text: #eceff4;
  --muted: #9aa3b2;
  --muted-dim: #6b7585;
  --header-bg: rgba(14, 16, 21, 0.78);
  --badge-overlay: rgba(0, 0, 0, 0.65);
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.34);
  --shadow-accent: 0 8px 28px rgba(232, 112, 127, 0.14);
  --copart: #4d8fd9;
  --copart-hover: #3a7fc8;
  --iaai: var(--accent);
  --iaai-hover: var(--accent-hover);
  --shadow-copart: 0 8px 28px rgba(77, 143, 217, 0.18);
  --shadow-iaai: var(--shadow-accent);
  --hero-glow-1: rgba(232, 112, 127, 0.08);
  --hero-glow-2: rgba(110, 207, 174, 0.05);
  --ambient-a: rgba(255, 61, 82, 0.09);
  --ambient-b: rgba(88, 101, 242, 0.07);
  --ambient-c: rgba(46, 230, 168, 0.06);
  --grid-line: rgba(255, 255, 255, 0.035);
  --card-inset: rgba(255, 255, 255, 0.04);
  --glass: rgba(17, 20, 28, 0.72);
  --tag-clean-bg: #123024;
  --tag-clean-fg: #6ee7a8;
  --tag-clean-bd: transparent;
  --tag-salvage-bg: #3a2410;
  --tag-salvage-fg: #fbbf77;
  --tag-salvage-bd: transparent;
  --tag-danger-bg: #3a1620;
  --tag-danger-fg: #fca5a5;
  --tag-danger-bd: transparent;
  --tag-neutral-bg: #232936;
  --tag-neutral-fg: #cbd5e1;
  --tag-neutral-bd: #333c4d;
  --tag-outline-bg: #16294a;
  --tag-outline-fg: #7db3ff;
  --tag-outline-bd: transparent;
  --tag-cta-bg: color-mix(in srgb, var(--amber) 15%, var(--surface-2));
  --tag-cta-fg: var(--amber);
  --tag-cta-bd: color-mix(in srgb, var(--amber) 30%, transparent);
  --radius: 7px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --max: 1280px;
  --header-h: 60px;
  --nav-h: 44px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f8;
  --bg-elevated: #dfe8e3;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #e8eaef;
  --border: rgba(15, 23, 42, 0.08);
  --border-light: rgba(15, 23, 42, 0.12);
  --accent: #be1e2d;
  --accent-hover: #a01825;
  --accent-deep: #8a1522;
  --accent-dim: rgba(190, 30, 45, 0.08);
  --accent-glow: rgba(190, 30, 45, 0.12);
  --green: #166534;
  --green-dim: rgba(22, 101, 52, 0.08);
  --green-glow: rgba(22, 101, 52, 0.06);
  --green-text: #14532d;
  --amber: #b45309;
  --amber-text: #78350f;
  --text: #111827;
  --muted: #6b7280;
  --muted-dim: #9ca3af;
  --header-bg: rgba(255, 255, 255, 0.82);
  --badge-overlay: rgba(17, 24, 39, 0.62);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.03), 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 24px 48px rgba(0, 0, 0, 0.1);
  --shadow-accent: 0 2px 6px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(190, 30, 45, 0.18);
  --copart: #1254b9;
  --copart-hover: #0f4699;
  --iaai: var(--accent);
  --iaai-hover: var(--accent-hover);
  --shadow-copart: 0 2px 6px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(18, 84, 185, 0.22);
  --shadow-iaai: var(--shadow-accent);
  --hero-glow-1: rgba(0, 0, 0, 0.02);
  --hero-glow-2: rgba(0, 0, 0, 0.015);
  --glass: rgba(255, 255, 255, 0.9);
  --tag-clean-bg: #dcfce7;
  --tag-clean-fg: #15803d;
  --tag-clean-bd: transparent;
  --tag-salvage-bg: #ffedd5;
  --tag-salvage-fg: #c2410c;
  --tag-salvage-bd: transparent;
  --tag-danger-bg: #fee2e2;
  --tag-danger-fg: #b91c1c;
  --tag-danger-bd: transparent;
  --tag-neutral-bg: #eef1f6;
  --tag-neutral-fg: #475569;
  --tag-neutral-bd: #e2e8f0;
  --tag-outline-bg: #dbeafe;
  --tag-outline-fg: #1d4ed8;
  --tag-outline-bd: transparent;
  --tag-cta-bg: #fdecd8;
  --tag-cta-fg: #7c2d12;
  --tag-cta-bd: color-mix(in srgb, #d97706 32%, transparent);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html.browse-scroll-lock {
  overflow: hidden !important;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.45;
  min-height: 100vh;
  position: relative;
  transition: color 0.25s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-lot,
.page-browse,
.page-home {
  position: relative;
  isolation: isolate;
}

/* ── Harmonic mesh backdrop ── */
.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.site-backdrop__base {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    168deg,
    #0c0e14 0%,
    #090b11 48%,
    #080a10 100%
  );
}

.site-backdrop__mesh {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse 58% 48% at 14% 10%, rgba(232, 112, 127, 0.22) 0%, transparent 72%),
    radial-gradient(ellipse 52% 44% at 86% 14%, rgba(129, 140, 248, 0.18) 0%, transparent 74%),
    radial-gradient(ellipse 54% 50% at 74% 86%, rgba(94, 200, 168, 0.14) 0%, transparent 72%),
    radial-gradient(ellipse 48% 42% at 10% 82%, rgba(190, 120, 160, 0.1) 0%, transparent 70%);
  filter: blur(72px);
  opacity: 0.88;
  will-change: transform;
  animation: cs-mesh-drift 52s ease-in-out infinite alternate;
}

.site-backdrop__calm {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 88% 72% at 50% 38%,
      rgba(14, 17, 24, 0.35) 0%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 100% 90% at 50% 50%,
      transparent 38%,
      rgba(0, 0, 0, 0.28) 100%
    );
}

[data-theme="light"] .site-backdrop__base {
  background: linear-gradient(
    168deg,
    #f6f7fb 0%,
    #f1f3f8 45%,
    #f4f5f9 100%
  );
}

[data-theme="light"] .site-backdrop__mesh {
  background:
    radial-gradient(ellipse 58% 48% at 14% 10%, rgba(225, 100, 120, 0.16) 0%, transparent 74%),
    radial-gradient(ellipse 52% 44% at 86% 14%, rgba(140, 150, 235, 0.13) 0%, transparent 76%),
    radial-gradient(ellipse 54% 50% at 74% 86%, rgba(88, 175, 150, 0.11) 0%, transparent 74%),
    radial-gradient(ellipse 48% 42% at 10% 82%, rgba(200, 145, 175, 0.08) 0%, transparent 72%);
  filter: blur(56px);
  opacity: 1;
}

[data-theme="light"] .site-backdrop__calm {
  background:
    radial-gradient(
      ellipse 86% 70% at 50% 36%,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.22) 52%,
      transparent 82%
    ),
    radial-gradient(
      ellipse 100% 92% at 50% 50%,
      transparent 52%,
      rgba(15, 23, 42, 0.035) 100%
    );
}

@keyframes cs-mesh-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2.5%, 1.5%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .site-backdrop__mesh {
    animation: none !important;
  }

  .lot-price-dots__dot {
    animation: none !important;
    opacity: 0.62;
  }
}

.site-footer,
.home-footer,
.browse-subheader,
.lot-page,
/* УВАГА, пастка. Це правило робить УСІХ прямих дітей body позиційованими
   (position:relative; z-index:1) і має величезну специфічність через три
   :not(#id). Тому воно перебиває position:fixed будь-якої накладки, і та
   лягає в потік сторінки ВНИЗУ замість того, щоб накрити екран.
   На цьому вже спіткнулись двічі: спершу модальне вікно (.cs-modal), потім
   переглядач фото (.lot-lightbox). КОЖНА нова накладка, яку скрипт додає в
   кінець body, мусить бути дописана у винятки тут. */
.page-home > :not(.site-backdrop):not(.site-header):not(.cs-modal):not(.lot-lightbox):not(.cs-consent),
.page-browse > :not(.site-backdrop):not(.site-header):not(.browse-dropdown-host):not(.browse-dropdown-backdrop):not(.cs-modal):not(.lot-lightbox):not(.cs-consent),
.page-lot > :not(.site-backdrop):not(.site-header):not(#lot-export-tip-host):not(#lot-export-dropdown):not(#lot-export-region-dropdown):not(.cs-modal):not(.lot-lightbox):not(.cs-consent) {
  position: relative;
  z-index: 1;
}

/* Theme toggle */
.theme-toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-light);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

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

/* ── Top header ── */
.top-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.top-header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--text);
  line-height: 1;
}

.logo:hover { text-decoration: none; opacity: 0.92; }

.logo-img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

[data-theme="light"] .logo-img {
  filter: drop-shadow(0 1px 2px rgba(15, 20, 25, 0.08));
}

.logo-word {
  display: flex;
  align-items: baseline;
  gap: 0.32em;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
}

.logo-cars {
  font-weight: 500;
  color: var(--text);
}

.logo-accent {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.search-wrap {
  flex: 1;
  max-width: 520px;
  position: relative;
}

.search-wrap svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted-dim);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 38px;
  padding: 0 0.85rem 0 2.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s;
}

.search-input::placeholder { color: var(--muted-dim); }

.search-input:focus {
  border-color: var(--border-light);
  background: var(--surface-2);
}

/* ── Single-row header: logo · nav · search · Sign In (Cars&Bids style) ── */
.site-header-inner .site-nav-pills {
  flex: 0 1 auto;
}

.header-search {
  flex: 0 1 300px;
  min-width: 0;
  max-width: 320px;
  margin-left: auto;
}

.header-search .search-input {
  height: 38px;
  border-radius: 7px;
  background: var(--surface-2);
}

.header-search .search-input:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-dim);
  background: var(--surface);
}

/* the search already claims the free space — don't push twice */
.header-search ~ .menu-toggle {
  margin-left: 0;
}

.btn-signin {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 1.05rem;
  border-radius: 7px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.btn-signin:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 14px var(--accent-dim);
}

.btn-signin:active {
  transform: translateY(1px);
}

/* Pages without the header search: keep Sign In pinned right */
.site-header-inner > .btn-signin:not(.header-search ~ .btn-signin) {
  margin-left: auto;
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.header-stats strong {
  color: var(--text);
  font-weight: 600;
}

/* ── Category nav (Cars & Bids / ABM style) ── */
.category-nav {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.category-nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--nav-h);
  overflow-x: auto;
  scrollbar-width: none;
}

.category-nav-inner::-webkit-scrollbar { display: none; }

.nav-tab {
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  text-decoration: none;
}

.nav-tab:hover { color: var(--text); text-decoration: none; }

.nav-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.nav-tab.nav-muted {
  cursor: default;
  opacity: 0.45;
}

.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 0.25rem;
}

/* ── Quick filters strip ── */
.filters-bar {
  position: relative;
  z-index: 20;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ДИЛЕРСЬКІ ЕЛЕМЕНТИ — СХОВАНІ НАПЕВНО.

   Сучасні браузери застосовують `hidden` як `display:none !important`, тож у
   них атрибута вистачає навіть там, де є власний display (перевірено на
   .plan-cta: display:block + hidden дає computed display:none). Правило нижче
   — запобіжник для старіших движків, де `[hidden]` зі стилів браузера
   програвав будь-якому авторському display. Слід тієї самої пастки є нижче в
   цьому ж файлі (.lot-not-found__result).

   `!important` свідомо: це не оформлення, а межа тарифу. Якщо правило колись
   програє — платне опиниться на очах у того, хто не платив, і помітить це не
   розробник, а користувач. */
[data-dealer-only][hidden] {
  display: none !important;
}

.filter-chip {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.filter-chip:hover {
  border-color: var(--border-light);
  color: var(--text);
}

.filter-chip.active {
  background: var(--accent-dim);
  border-color: rgba(230, 57, 70, 0.45);
  color: var(--accent);
}

.filter-chip.green.active {
  background: var(--green-dim);
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--green);
}

.filter-chip.amber.active {
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--amber) 42%, transparent);
  color: var(--amber);
}

.filters-spacer { flex: 1; }

.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.view-btn {
  padding: 0.35rem 0.55rem;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.view-btn.active {
  background: var(--surface-2);
  color: var(--text);
}

.view-btn svg { width: 16px; height: 16px; }

.sort-select {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

/* ── Browse custom selects ── */
.browse-select {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

.browse-select.open {
  z-index: 60;
}

.browse-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.65rem 0.4rem 0.85rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.browse-select-trigger:hover {
  border-color: var(--border-light);
  background: var(--surface-2);
}

.browse-select.open .browse-select-trigger {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-dim);
  background: var(--surface);
}

.browse-select-chevron {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.15s ease;
}

.browse-select.open .browse-select-chevron {
  transform: rotate(180deg);
  color: var(--text);
}

.browse-select-panel {
  display: none !important;
}

.browse-dropdown-host {
  position: fixed;
  z-index: 20000;
  visibility: visible;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--border-light) 70%, transparent);
  padding: 0.4rem;
  max-height: min(360px, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.browse-dropdown-host[hidden] {
  display: none !important;
}

/* Sidebar dropdowns size to their widest option (e.g. long engine spec strings)
   so they never wrap onto a second line. Width is capped to the viewport in JS. */
.browse-dropdown-host--auto {
  width: max-content;
  max-width: 460px;
}

.browse-dropdown-host--auto .browse-select-option {
  white-space: nowrap;
}

.browse-dropdown-host::-webkit-scrollbar {
  width: 6px;
}

.browse-dropdown-host::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 999px;
}

.browse-dropdown-host .browse-select-scroll {
  max-height: none;
  overflow: visible;
  padding: 0.1rem;
}

.browse-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19999;
  visibility: visible;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
}

.browse-dropdown-backdrop[hidden] {
  display: none !important;
}

.browse-select-scroll {
  max-height: min(320px, 52vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.browse-select-scroll::-webkit-scrollbar {
  width: 6px;
}

.browse-select-scroll::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 999px;
}

.browse-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

/* Кружечок зразка кольору — у рядку списку і на самій кнопці.

   Світлі кольори (white, ivory, cream) на світлому тлі зливались би, тому
   обведення стоїть ЗАВЖДИ, а не лише для них: так кружечок читається на
   обох темах, і правило не доводиться тримати списком винятків. */
.browse-select-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(128, 128, 128, 0.45);
  vertical-align: -1px;
  flex: 0 0 auto;
}

.browse-select-option:hover {
  background: var(--surface-2);
  color: var(--text);
}

.browse-select-option.is-selected {
  background: var(--accent-dim);
  color: var(--accent);
}

.browse-select-option.is-selected[data-value=""] {
  background: var(--surface-2);
  color: var(--text);
}

.browse-select-option.is-selected[data-value=""] .browse-select-check {
  color: var(--muted);
}

.browse-select-option-main {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.browse-select-option-hint {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted-dim);
  line-height: 1.25;
}

.browse-select-option.is-selected .browse-select-option-hint {
  color: color-mix(in srgb, var(--accent) 65%, var(--muted-dim));
}

.browse-select-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0;
  color: currentColor;
}

.browse-select-option.is-selected .browse-select-check {
  opacity: 1;
}

/* Sort dropdown: each field row carries a clickable ↑/↓ direction toggle. */
.browse-sort-opt .browse-select-option-main {
  flex: 1 1 auto;
}

.browse-sort-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.browse-sort-dir:hover {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.browse-select-option.is-selected .browse-sort-dir {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}

.results-count {
  font-size: 0.75rem;
  color: var(--muted-dim);
  width: 100%;
  margin-top: -0.35rem;
  padding: 0 1.25rem 0.5rem;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

/* ── Browse pagination ── */
.browse-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: var(--max);
  margin: 0 auto;
  /* Зверху вже є 48px нижнього відступу <main>, тож власний верхній відступ = 0,
     а нижній робимо такими ж 48px. Інакше кнопки сидять високо в смузі:
     заміряно 68px повітря зверху проти 32px знизу — саме це й читалось як
     «нервово» між картками й нижнім блоком. */
  padding: 0 1.25rem 3rem;
}

.browse-pagination[hidden] {
  display: none !important;
}

/* Напис замість недосяжних сторінок історії. Показується лише тоді, коли
   знайденого більше, ніж можна прогортати. */
.pagination-narrow {
  max-width: 46ch;
  margin: 0.7rem auto 0;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.pagination-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* Той самий крок, що й у .pagination-numbers — інакше стрілки стоять на 1.6px
     далі за цифри, і ряд виглядає нерівним (заміряно: 6.4px проти 4.8px). */
  gap: 0.3rem;
  flex-wrap: wrap;
}

.pagination-numbers {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
}

/* Nav arrows + number pills share one square-ish pill shape */
.browse-pagination .pagination-nav,
.pagination-num {
  flex: 0 0 auto;
  min-width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.browse-pagination .pagination-nav svg {
  display: block;
  width: 16px;
  height: 16px;
}

.browse-pagination .pagination-nav:hover:not(:disabled),
.pagination-num:hover:not(:disabled):not(.is-active) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--accent-dim);
  color: var(--accent);
}

.browse-pagination .pagination-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Active page — filled accent, non-clickable */
.pagination-num.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}

.pagination-ellipsis {
  flex: 0 0 auto;
  /* Без штучної ширини: коробка обіймає сам символ, тому відступ навколо «…»
     дорівнює звичайному зазору, а не подвоюється. */
  text-align: center;
  color: var(--muted-dim);
  font-weight: 600;
  user-select: none;
}

/* ── Main grid ── */
main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

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

.lot-grid--refreshing {
  opacity: 0.55;
  pointer-events: none;
  filter: saturate(0.85);
  transition: opacity 0.15s ease;
}

.lot-grid.list-view {
  grid-template-columns: 1fr;
}

/* Browse + lot detail: use more horizontal space on wide screens */
.page-browse,
.page-lot {
  --browse-max: min(100% - 1.5rem, 1720px);
  --browse-pad-x: clamp(0.75rem, 1.4vw, 1.5rem);
}

@media (min-width: 1500px) {
  .page-browse,
  .page-lot {
    --browse-max: min(100% - 2rem, 1920px);
  }
}

.page-lot .site-header-inner,
.page-browse .site-header-inner,
.page-browse .browse-subheader-inner,
.page-browse .filters-bar,
.page-browse .results-count,
.page-browse main,
.page-browse .browse-pagination {
  max-width: var(--browse-max);
}

.page-lot .site-header-inner,
.page-browse .site-header-inner,
.page-browse .browse-subheader-inner,
.page-browse .filters-bar,
.page-browse main,
.page-browse .browse-pagination,
.page-browse .results-count {
  padding-left: var(--browse-pad-x);
  padding-right: var(--browse-pad-x);
}

.page-browse .results-count {
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
  padding-top: 0;
  padding-bottom: 0.35rem;
}

.page-browse .lot-grid {
  --card-min: 380px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
  gap: 1.15rem;
}

/* ── Card (Cars & Bids grid style) ── */
.lot-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s, transform 0.18s;
}

.lot-card:hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
}

.lot-card.hidden { display: none; }

.lot-card-link { cursor: pointer; }

/* Картка browse: клікабельні лише ФОТО і НАЗВА. Раніше вся картка була одним
   великим кліком, і палець-курсор з'являвся навіть над цінами й тегами.
   Модифікатор, а не зміна .lot-card-link — на «Проданих» картка й далі
   клікається цілком, і там курсор має лишатись пальцем. */
.lot-card--link-parts { cursor: default; }
.lot-card--link-parts .lot-photo { cursor: pointer; }

.muted-dash {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: lowercase;
}

.data-strip-single {
  grid-template-columns: 1fr;
}

.badge.title-salvage {
  background: rgba(251, 146, 60, 0.9);
  color: #431407;
}

[data-theme="dark"] .badge.title-salvage {
  color: #fff7ed;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 2.5rem;
}

.load-more-wrap.hidden { display: none; }

.load-more-btn {
  font: inherit;
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.load-more-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.load-more-btn:disabled { opacity: 0.6; cursor: wait; }

/* ── Lot detail page ── */
.page-lot main.lot-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

@media (min-width: 1100px) {
  .page-lot main.lot-page {
    max-width: 1680px;
    margin-left: 1rem;
    margin-right: auto;
    padding-left: 0;
    padding-right: 1.5rem;
  }
}

.lot-breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.lot-breadcrumb a { color: var(--muted); text-decoration: none; }
.lot-breadcrumb a:hover { color: var(--text); }

.lot-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

.lot-gallery {
  min-width: 0;
  width: 100%;
}

/* Gallery: layout visible immediately; images fade in when loaded */
.lot-gallery-stage:not(:has(.lot-main-media, .lot-pano-video-wrap, .lot-spin360, .lot-iaai-360, .lot-pano-wrap)) {
  background: linear-gradient(
    110deg,
    var(--surface-2) 28%,
    color-mix(in srgb, var(--border) 55%, var(--surface-2)) 50%,
    var(--surface-2) 72%
  );
  background-size: 220% 100%;
  animation: lot-shimmer 1.4s ease-in-out infinite;
}

@keyframes lot-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Gallery: full layout shown at once — no staggered image fade-in */
.lot-main-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.lot-thumb img {
  opacity: 1;
}

.lot-thumb-skeleton {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface-2);
  animation: lot-shimmer 1.4s ease-in-out infinite;
}

.lot-gallery-main {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
  width: 100%;
  aspect-ratio: 4 / 3;
  touch-action: pan-y;
}

.lot-gallery-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lot-pano-toggle-host {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  justify-content: center;
  padding: 0;
  pointer-events: none;
}

.lot-pano-toggle-host:not([hidden]) {
  pointer-events: auto;
}

.lot-pano-toggle-host[hidden] {
  display: none !important;
}

.lot-pano-toggle {
  display: inline-flex;
  gap: 0.12rem;
  padding: 0.14rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border: 1px solid rgba(255, 255, 255, 0.44);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .lot-pano-toggle {
  background: rgba(16, 18, 24, 0.42);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.32);
}

.lot-pano-btn {
  border: none;
  background: transparent;
  color: rgba(28, 32, 40, 0.9);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.38rem 0.82rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.lot-pano-btn:last-child {
  border-right: none;
}

[data-theme="dark"] .lot-pano-btn {
  color: rgba(240, 242, 245, 0.88);
}

.lot-pano-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.26);
}

[data-theme="dark"] .lot-pano-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.08);
}

.lot-pano-btn.active {
  background: rgba(200, 16, 46, 0.55);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .lot-pano-btn.active {
  background: rgba(220, 28, 58, 0.52);
}

.lot-thumb-360-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.lot-thumb-360 { position: relative; }

.lot-spin360 {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: var(--surface-2);
}

.lot-spin360-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  background: var(--surface-2);
}

.lot-gallery-main:has(.lot-spin360) {
  aspect-ratio: 4 / 3;
}

.lot-gallery-main:has(.lot-spin360).is-media-aspect {
  aspect-ratio: 4 / 3;
}

.lot-spin360.is-dragging { cursor: grabbing; }

.lot-pano-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: none;
}

.lot-pano-wrap:has(.lot-iaai-360-wrap--interior) {
  cursor: grab;
}

.lot-pano-wrap:has(.lot-iaai-360-wrap--interior).is-dragging {
  cursor: grabbing;
}

.lot-spin360-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: inherit;
  touch-action: none;
}

.lot-spin360.is-dragging .lot-spin360-hit {
  cursor: grabbing;
}

.lot-pano-video-shell {
  position: absolute;
  inset: 0;
}

.lot-pano-back-spin {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.lot-pano-back-spin:hover {
  background: #fff;
}

[data-theme="dark"] .lot-pano-back-spin {
  background: rgba(24, 24, 28, 0.92);
  color: #f5f5f5;
}

[data-theme="dark"] .lot-pano-back-spin:hover {
  background: rgba(36, 36, 42, 0.96);
}

.lot-thumb-engine-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.lot-thumb-engine { position: relative; }

.lot-thumb-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  pointer-events: none;
  background: #12151a;
}

.lot-pano-video-wrap {
  position: absolute;
  inset: 0;
}

.lot-pano-video-wrap .lot-pano-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: auto;
  object-fit: cover;
  object-position: center center;
  background: transparent;
}

.lot-pano-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lot-pano-wrap:has(.lot-pano-viewer.is-ready) {
  cursor: grab;
}

.lot-pano-wrap:has(.lot-pano-viewer.is-ready).is-dragging {
  cursor: grabbing;
}

.lot-pano-viewer .pnlm-container {
  width: 100%;
  height: 100%;
}

.lot-pano-viewer .pnlm-compass,
.lot-pano-viewer .pnlm-controls,
.lot-pano-viewer .pnlm-controls-container {
  display: none !important;
}

.lot-pano-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  background: var(--surface-2);
}

.lot-pano-state-slot {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.lot-pano-fallback {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 115%, var(--hero-glow-1), transparent 55%),
    radial-gradient(ellipse 60% 50% at 12% 18%, var(--hero-glow-2), transparent 50%),
    linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 48%, color-mix(in srgb, var(--surface-2) 80%, #000) 100%);
}

.lot-pano-fallback-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.lot-pano-fallback-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  animation: lot-pano-glow-drift 9s ease-in-out infinite;
}

.lot-pano-fallback-glow--a {
  width: 42%;
  height: 42%;
  top: -8%;
  left: -6%;
  background: var(--accent-dim);
}

.lot-pano-fallback-glow--b {
  width: 36%;
  height: 36%;
  bottom: -10%;
  right: -4%;
  background: var(--green-dim);
  animation-delay: -4.5s;
}

.lot-pano-fallback-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
}

.lot-pano-fallback-orbit--1 {
  width: min(72%, 420px);
  height: min(72%, 420px);
  animation: lot-pano-orbit-spin 22s linear infinite;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--muted) 35%, transparent);
}

.lot-pano-fallback-orbit--2 {
  width: min(54%, 300px);
  height: min(54%, 300px);
  animation: lot-pano-orbit-spin 16s linear infinite reverse;
  opacity: 0.7;
}

.lot-pano-fallback-orbit--3 {
  width: min(38%, 210px);
  height: min(38%, 210px);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  animation: lot-pano-orbit-spin 11s linear infinite;
  opacity: 0.85;
}

.lot-pano-fallback-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  max-width: 18rem;
  padding: 1.35rem 1.5rem;
  text-align: center;
  border-radius: calc(var(--radius-lg) + 2px);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 var(--card-inset);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lot-pano-fallback-ring {
  width: 4.75rem;
  height: 4.75rem;
  color: var(--text);
  margin-bottom: 0.15rem;
  animation: lot-pano-ring-breathe 3.2s ease-in-out infinite;
}

.lot-pano-fallback-ring svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent));
}

.lot-pano-fallback-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.lot-pano-fallback-msg {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 16rem;
}

.lot-pano-fallback-dots {
  display: inline-flex;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.lot-pano-fallback-dots span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: lot-pano-dot-pulse 1.2s ease-in-out infinite;
}

.lot-pano-fallback-dots span:nth-child(2) { animation-delay: 0.15s; }
.lot-pano-fallback-dots span:nth-child(3) { animation-delay: 0.3s; }

.lot-pano-fallback--unavailable .lot-pano-fallback-ring {
  animation: none;
  opacity: 0.72;
}

.lot-pano-fallback--unavailable .lot-pano-fallback-orbit {
  animation-play-state: paused;
  opacity: 0.45;
}

.lot-gallery-main.is-pano-unavailable,
.lot-gallery-main:has(.lot-pano-fallback--loading),
.lot-gallery-main:has(.lot-pano-fallback--unavailable) {
  touch-action: auto;
}

.lot-gallery-main.is-pano-unavailable .lot-spin360,
.lot-gallery-main:has(.lot-pano-fallback--loading) .lot-spin360,
.lot-gallery-main:has(.lot-pano-fallback--unavailable) .lot-spin360 {
  cursor: default;
  touch-action: auto;
}

.lot-gallery-main.is-pano-unavailable .lot-spin360-hit,
.lot-gallery-main:has(.lot-pano-fallback--loading) .lot-spin360-hit,
.lot-gallery-main:has(.lot-pano-fallback--unavailable) .lot-spin360-hit {
  pointer-events: none;
}

@keyframes lot-pano-orbit-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes lot-pano-glow-drift {
  0%, 100% { translate: 0 0; opacity: 0.45; }
  50% { translate: 3% 2%; opacity: 0.65; }
}

@keyframes lot-pano-ring-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes lot-pano-dot-pulse {
  0%, 80%, 100% { opacity: 0.28; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

.lot-pano-wrap:not(:has(.lot-iaai-360.is-ready)) .lot-iaai-360-wrap--exterior {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lot-pano-wrap:has(.lot-iaai-360-wrap--interior) .lot-iaai-360-wrap {
  opacity: 1;
  pointer-events: auto;
}

.lot-pano-wrap:has(.lot-iaai-360.is-ready) .lot-pano-fallback {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lot-pano-wrap:has(.lot-pano-viewer.is-ready) .lot-pano-fallback,
.lot-pano-wrap:has(.pnlm-loaded) .lot-pano-fallback {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lot-spin360:has(.lot-spin360-img.is-loaded) .lot-pano-fallback {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lot-gallery-stage:has(.lot-iaai-360.is-ready):not(:has(.lot-pano-wrap)) .lot-pano-fallback {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lot-pano-video-wrap:has(.lot-pano-video.is-ready) .lot-pano-fallback {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lot-pano-video-wrap .lot-pano-video:not(.is-ready) {
  opacity: 0;
  pointer-events: none;
}

.lot-pano-video-wrap .lot-pano-video.is-failed {
  display: none;
}

.lot-main-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border: none;
  background: transparent;
}

.lot-gallery-stage > img.lot-main-media,
.lot-gallery-stage > iframe.lot-main-media,
.lot-gallery-stage > .lot-pano-video-wrap,
.lot-gallery-stage > .lot-pano-video-shell,
.lot-gallery-stage > .lot-iaai-360-wrap {
  position: absolute;
  inset: 0;
}

iframe.lot-iaai-360 {
  position: absolute;
  left: 0;
  width: calc(100% + var(--iaai-iframe-right-chrome, 48px));
  height: calc(100% + var(--iaai-iframe-chrome, 58px));
  top: calc(-1 * var(--iaai-iframe-chrome, 58px));
  border: 0;
  z-index: 2;
}

iframe.lot-iaai-360:not(.is-ready) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.lot-iaai-360-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  background: #111;
  clip-path: inset(
    var(--iaai-iframe-top-chrome, 0)
    var(--iaai-iframe-right-chrome, 48px)
    var(--iaai-iframe-bottom-chrome, 0)
    var(--iaai-iframe-left-chrome, 0)
  );
}

.lot-gallery-main:has(.lot-iaai-360-wrap) {
  --iaai-iframe-chrome: 58px;
  --iaai-iframe-right-chrome: 48px;
}

/* Exterior: crop native IAAI chrome (toggle + autoplay) — our pill toggle sits above. */
.lot-gallery-main:has(.lot-iaai-360-wrap--exterior) {
  --iaai-iframe-chrome: 56px;
  --iaai-iframe-right-chrome: 48px;
  --iaai-iframe-bottom-chrome: 52px;
}

.lot-iaai-360-wrap--exterior {
  background: var(--surface-2);
  clip-path: inset(
    var(--iaai-iframe-chrome, 56px)
    var(--iaai-iframe-right-chrome, 48px)
    var(--iaai-iframe-bottom-chrome, 52px)
    var(--iaai-iframe-left-chrome, 0)
  );
}

.lot-iaai-360-wrap--exterior iframe.lot-iaai-360 {
  left: 0;
  top: calc(-1 * var(--iaai-iframe-chrome, 56px));
  width: calc(100% + var(--iaai-iframe-right-chrome, 48px));
  height: calc(
    100% + var(--iaai-iframe-chrome, 56px) + var(--iaai-iframe-bottom-chrome, 52px)
  );
}

.lot-gallery-main:has(.lot-iaai-360-wrap--exterior) {
  touch-action: pan-y;
}

.lot-iaai-360-wrap--interior {
  background: var(--surface-2);
  clip-path: none;
}

.lot-iaai-360-wrap--interior iframe.lot-iaai-360 {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.lot-gallery-main:has(.lot-iaai-360-wrap--interior) {
  --iaai-iframe-chrome: 0;
  --iaai-iframe-right-chrome: 0;
  --iaai-iframe-top-chrome: 0;
  --iaai-iframe-bottom-chrome: 0;
  --iaai-iframe-left-chrome: 0;
  touch-action: auto;
}

.lot-spin360-img:not(.is-loaded) {
  opacity: 0;
}

.lot-spin360 .lot-spin360-img {
  z-index: 2;
}

.lot-gallery-main:has(.lot-iaai-360-wrap):not(:has(.lot-pano-wrap)) {
  touch-action: auto;
}

.lot-gallery-main:has(.lot-spin360),
.lot-gallery-main:has(.lot-pano-wrap) {
  touch-action: none;
}

.lot-gallery-main:has(.lot-pano-video),
.lot-gallery-main:has(.lot-pano-video-wrap) {
  touch-action: auto;
}

.lot-main-yt {
  object-fit: unset;
}

.lot-iaai-360 {
  background: transparent;
  pointer-events: auto;
}

@media (min-width: 900px) and (max-width: 1099px) {
  .lot-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-rows: auto auto;
    gap: 1.25rem;
    align-items: start;
  }

  .lot-gallery {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .lot-summary {
    grid-column: 2;
    grid-row: 1;
  }

  .lot-details-col {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (min-width: 1100px) {
  .lot-detail-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 460px) minmax(300px, 350px);
    gap: 1.25rem;
  }

  .lot-gallery,
  .lot-summary,
  .lot-details-col {
    grid-column: auto;
    grid-row: auto;
  }
}

.lot-gallery-nav[hidden] {
  display: none !important;
  pointer-events: none;
}

.lot-gallery-main.is-extra-view .lot-gallery-nav {
  display: none !important;
  pointer-events: none;
}

.lot-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 2.35rem;
  height: 2.35rem;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
}

.lot-gallery-nav:hover {
  background: rgba(0, 0, 0, 0.72);
}

.lot-gallery-prev { left: 0.65rem; }
.lot-gallery-next { right: 0.65rem; }

.lot-photo-counter {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 4;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
}

.lot-gallery-badges {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none;
}

.lot-gallery-extras {
  margin-top: 0.65rem;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.lot-gallery-extras[hidden] {
  display: none !important;
}

.lot-gallery-extras-label {
  margin: 0 0 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.lot-gallery-extras-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.lot-extra-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.65rem;
  padding: 0.4rem 0.85rem 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 1px 0 var(--card-inset);
}

.lot-extra-btn:hover {
  border-color: var(--border-light);
  background: color-mix(in srgb, var(--surface-2) 85%, var(--text));
}

.lot-extra-btn.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.lot-extra-btn.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.lot-extra-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  /* Not selected: muted (grey) glyph on a soft grey circle. */
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--muted);
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.lot-extra-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

/* The filled engine glyph carries more internal detail — nudge it up a touch
   so it reads the same optical size as the stroked photo/360 icons. */
.lot-extra-btn--engine .lot-extra-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* Selected tab: red glyph on a white circle (the active Photos look). */
.lot-extra-btn.active .lot-extra-icon {
  color: var(--accent);
  background: var(--surface);
}

.lot-extra-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  text-align: left;
  line-height: 1.2;
}

.lot-extra-copy strong {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lot-extra-copy span {
  font-size: 0.68rem;
  color: var(--muted);
}

.lot-gallery-main.is-extra-view {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.lot-gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.65rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0 0.4rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.lot-thumb {
  flex: 0 0 96px;
  height: 72px;
  padding: 0;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  scroll-snap-align: start;
  transition: opacity 0.15s ease;
}

.lot-thumb:not(.active) { opacity: 0.65; }
.lot-thumb:hover,
.lot-thumb.active { opacity: 1; }

.lot-thumb--skeleton {
  flex: 0 0 96px;
  height: 72px;
  border: none;
  border-radius: 6px;
  cursor: default;
  opacity: 1;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--surface-2) 80%, var(--surface)) 0%,
    color-mix(in srgb, var(--surface-3) 70%, var(--surface)) 50%,
    color-mix(in srgb, var(--surface-2) 80%, var(--surface)) 100%
  );
  background-size: 200% 100%;
  animation: lot-gallery-shimmer 1.2s ease-in-out infinite;
}

.lot-gallery-thumbs--pending {
  min-height: 76px;
}

.lot-extra-btn--skeleton {
  display: inline-block;
  width: 7.5rem;
  height: 2.65rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--surface-2) 80%, var(--surface)) 0%,
    color-mix(in srgb, var(--surface-3) 70%, var(--surface)) 50%,
    color-mix(in srgb, var(--surface-2) 80%, var(--surface)) 100%
  );
  background-size: 200% 100%;
  animation: lot-gallery-shimmer 1.2s ease-in-out infinite;
}

.lot-gallery-extras--pending {
  min-height: 4.5rem;
}

.lot-thumb-video {
  position: relative;
}

.lot-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.lot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: var(--surface-2);
}

.lot-thumb-engine img {
  object-fit: cover;
  object-position: center center;
}

.lot-detail-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.35rem;
}

.lot-detail-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.lot-price-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.lot-price-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 38%, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lot-price-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
}

.lot-price-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.lot-price-breakdown div { min-width: 0; }

.lot-price-breakdown dt {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text) 38%, var(--muted));
  margin-bottom: 0.15rem;
}

.lot-price-breakdown dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.lot-carfax-strip {
  margin: 0 0 1.25rem;
}

.lot-carfax-strip__label {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* "i" hint next to the Market value label */
.lot-mv-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.3rem;
  vertical-align: middle;
  color: var(--muted-dim);
  cursor: help;
}

.lot-mv-info svg {
  display: block;
}

.lot-mv-info:hover,
.lot-mv-info:focus-visible {
  color: var(--accent);
  outline: none;
}

.lot-mv-info__tip {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 230px;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 100;
}

.lot-mv-info:hover .lot-mv-info__tip,
.lot-mv-info:focus-within .lot-mv-info__tip {
  opacity: 1;
  visibility: visible;
}

.lot-carfax-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.lot-carfax-strip__grid div { min-width: 0; }

.lot-carfax-strip__grid dt {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text) 38%, var(--muted));
  margin-bottom: 0.15rem;
}

.lot-carfax-strip__grid dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.lot-carfax-strip__note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.lot-stats-strip {
  margin: 0 0 1.35rem;
}

.lot-stats-strip__label {
  margin: 0 0 0.5rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.lot-stats-strip__note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--muted-dim);
}

.lot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.btn-copart-lg {
  width: 100%;
  padding: 0.72rem 1.1rem;
  font-size: 0.95rem;
  border-radius: 7px;
}

.lot-back-link {
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.lot-back-link:hover { color: var(--text); }

.lot-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.lot-panels {
  display: block;
  margin: 0;
}

.lot-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}

.lot-panel h2 {
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
}

.lot-panel-muted { color: var(--muted); }

.lot-panel-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

.lot-stats-empty-msg {
  margin: 0 0 0.75rem;
}

.lot-stats-load-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2, var(--card));
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.lot-stats-load-btn:hover:not(:disabled) {
  background: var(--accent-soft, rgba(59, 130, 246, 0.12));
  border-color: var(--accent, #3b82f6);
}

.lot-stats-load-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.lot-stats-load-hint {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.lot-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 0;
}

.lot-kv-grid dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.lot-kv-grid dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
  font-size: 0.9rem;
  word-break: break-word;
}

.lot-highlight { color: var(--green); }

.spread-hot {
  font-weight: 700;
  color: var(--green);
  font-size: 0.95rem;
}

.hero-preview-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.hero-preview-empty,
.preview-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.check.partial { color: var(--amber); font-weight: 600; font-size: 0.85rem; }

@media (max-width: 768px) {
  /* `minmax(0, 1fr)`, А НЕ `1fr`.

     `1fr` — це насправді `minmax(auto, 1fr)`, і нижня межа `auto` дорівнює
     найменшій ширині вмісту. Галерея вимагала 356px при контейнері 327, тож
     колонка ставала ШИРШОЮ за сторінку: на телефоні лот сповзав убік на
     п'ять пікселів, і сторінка хиталась горизонтально при кожному дотику.

     Нуль у нижній межі дозволяє колонці стиснутись, а вміст усередині вже
     має свої прокрутки. */
  .lot-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .lot-price-breakdown { grid-template-columns: 1fr; }
  .lot-thumb {
    flex: 0 0 80px;
    height: 60px;
  }
}

.lot-photo {
  position: relative;
  width: 100%;
  background: var(--surface-2);
  overflow: hidden;
  flex-shrink: 0;
}

/* «Live»-бейдж (пульсуючий) — оверлей у кутку фото, коли слот аукціону вже настав. */
/* Позначки в кутку фото — однією стрічкою. Кожна з них окремо приклеєна до
 * кута, тож дві одночасно (Live + New) лягали б одна на одну. */
.lot-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
}
.lot-badges .lot-live-badge { position: static; top: auto; left: auto; }

/* Синій, а не фірмовий червоний: червоне на картці вже означає «торги йдуть
 * зараз», і друга червона плашка поруч читалась би як те саме. */
.lot-new-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: #2563eb;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .lot-new-badge { background: #3b82f6; }

/* Смужка «показано лише нові»: список звужено не панеллю фільтрів, тож це
 * треба сказати словами й дати вихід. */
.browse-newbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid color-mix(in srgb, #2563eb 30%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #2563eb 8%, transparent);
  font-size: 0.86rem;
  color: var(--text);
}
.browse-newbar a { color: #2563eb; font-weight: 700; }
[data-theme="dark"] .browse-newbar a { color: #60a5fa; }

.lot-live-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  border-radius: var(--radius);
  background: #d61f2a;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
}
.lot-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: lot-live-pulse 1.4s ease-in-out infinite;
}
@keyframes lot-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .lot-live-dot { animation: none; }
}

.lot-photo::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 75%;
}

.lot-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* IAAI JPEGs include a lot-id strip at the bottom */
.lot-photo-iaai img,
.lot-gallery-stage > img.lot-main-media.lot-media-iaai,
.lot-thumb img.lot-media-iaai {
  object-fit: cover;
  object-position: center top;
  height: 112%;
  inset: 0 0 auto 0;
}

/* ── Крапки фото на картці + гортання при наведенні ────────────────────────
   Крапки завжди видимі (щоб було зрозуміло, що фото кілька), яскравішають під
   курсором. pointer-events:none — клік по картці має лишатись кліком по картці. */
.lot-photo-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  z-index: 3;                 /* над шарами фото (1) і Live-бейджем (2) */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  opacity: 0.55;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));   /* читабельно і на світлому фото */
  transition: opacity 0.16s ease;
}
.lot-card:hover .lot-photo-dots { opacity: 1; }

.lot-photo-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  transition: background-color 0.14s ease, transform 0.14s ease;
}
.lot-photo-dot.is-active {
  background: #fff;
  transform: scale(1.35);
}

/* Наступні фото — шари поверх основного. Непрозорий фон, щоб шар повністю
   перекривав базове фото (у нього object-fit:contain — інакше просвічувало б). */
.lot-photo img.lot-photo-layer {
  opacity: 0;
  z-index: 1;
  background: var(--surface-2);
}
.lot-photo img.lot-photo-layer.is-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lot-photo-dots,
  .lot-photo-dot { transition: none; }
}

.lot-photo-badges {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
}

.badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: var(--badge-overlay);
  color: var(--text);
}

.badge.clean {
  background: rgba(52, 211, 153, 0.92);
  color: var(--green-text);
  box-shadow: 0 1px 6px rgba(16, 185, 129, 0.28);
}

.badge.sale {
  background: var(--badge-overlay);
  color: var(--amber);
  margin-left: auto;
}

.lot-photo-badges .badge.sale {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.lot-body {
  padding: 0.85rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  min-height: 0;
}

.lot-title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.lot-title a:hover { color: var(--accent); }

.lot-sub {
  font-size: 0.75rem;
  color: var(--muted);
}

.lot-card .lot-sub {
  font-size: 0.8125rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--text) 58%, var(--muted));
}

.lot-sub .dot { color: var(--muted-dim); margin: 0 0.2rem; }

.lot-card .lot-sub .dot {
  color: color-mix(in srgb, var(--text) 40%, var(--muted-dim));
}

/* Price row — scannable at a glance */
.price-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.lot-card .price-row {
  justify-content: space-between;
  gap: 0.75rem;
}

.lot-card .price-row .lot-price-hero-main {
  gap: 0.15rem;
  min-width: 0;
}

.lot-card .price-est-sell {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}

.price-est-range {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}

.price-total {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.price-bid {
  font-size: 0.75rem;
  color: var(--muted);
}

.spread {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--green-dim);
  color: var(--green);
  white-space: nowrap;
}

/* Carfax + stats — one compact block */
.data-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.72rem;
}

.data-strip dt {
  color: var(--muted-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.62rem;
  margin-bottom: 0.1rem;
}

.data-strip dd {
  font-weight: 600;
  color: var(--text);
}

.data-strip .highlight { color: var(--green); }

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);   /* квадратніше — як кнопка аукціону (було 999px pill) */
  border: 1px solid transparent;
  white-space: nowrap;
}

.tag-clean {
  background: var(--tag-clean-bg);
  color: var(--tag-clean-fg);
  border-color: var(--tag-clean-bd);
}

.tag-salvage {
  background: var(--tag-salvage-bg);
  color: var(--tag-salvage-fg);
  border-color: var(--tag-salvage-bd);
}

.tag-nonrepairable {
  background: var(--tag-danger-bg);
  color: var(--tag-danger-fg);
  border-color: var(--tag-danger-bd);
}

.tag-keys {
  background: var(--tag-neutral-bg);
  color: var(--tag-neutral-fg);
  border-color: var(--tag-neutral-bd);
}

.tag-nokeys {
  background: var(--tag-danger-bg);
  color: var(--tag-danger-fg);
  border-color: var(--tag-danger-bd);
}

.tag-rundrive {
  background: var(--tag-outline-bg);
  color: var(--tag-outline-fg);
  border-color: var(--tag-outline-bd);
}

.tag-buynow {
  background: var(--tag-clean-bg);
  color: var(--tag-clean-fg);
  border-color: var(--tag-clean-bd);
  font-weight: 700;
}

/* Рядок «теги + кнопка аукціону» в одну лінію. Кнопку піднято з футера на рівень
   тегів → в активній картці футер не використовується: зникає порожнеча від
   margin-top:auto, картка стискається під контент (нижча, кнопка не «провалюється»).
   .tags росте й притискає кнопку праворуч; самі теги переносяться всередині блоку. */
.tags-row {
  display: flex;
  align-items: flex-start;   /* кнопка тримається рівня 1-го рядка тегів навіть при переносі */
  gap: 0.6rem;
}
.tags-row .tags {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
.tags-row > .btn-copart,
.tags-row > .btn-iaai {
  flex-shrink: 0;
}

.lot-footer {
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Sold outcome (status + date) sits in the footer's empty space, left of the
   auction button. margin-right:auto pushes it left without touching the shared
   flex-end footer; the compact two-line block matches the button height so the
   card size is unchanged. */
.sold-outcome {
  margin-right: auto;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.42rem;
  min-width: 0;
}
/* Status is the single colour accent; the date recedes in muted grey so the pair
   reads as a quiet caption rather than two heavy headlines. */
.sold-outcome-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sold-outcome-date {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  white-space: nowrap;
}
/* Distinct per-status colours: sold = green, on-approval = blue, not-sold = red
   (buy-now is a sale ⇒ green). Semantic mid-tones that read on white or dark cards. */
.sold-outcome-sold .sold-outcome-label,
.sold-outcome-buynow .sold-outcome-label { color: #1e9e57; }
.sold-outcome-approval .sold-outcome-label { color: #d4a017; }
.sold-outcome-notsold .sold-outcome-label { color: #d64545; }

.btn-copart {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  background: var(--copart);
  color: #fff;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-copart:hover { background: var(--copart-hover); }

.btn-iaai {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  background: var(--iaai);
  color: #fff;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-iaai:hover { background: var(--iaai-hover); }

.vin-link {
  font-size: 0.68rem;
  color: var(--muted-dim);
  font-family: ui-monospace, monospace;
}

.vin-link:hover { color: var(--muted); }

/* List view variant */
.lot-grid.list-view .lot-card {
  flex-direction: row;
}

.lot-grid.list-view .lot-photo {
  width: 240px;
  min-width: 240px;
  min-height: unset;
}

.lot-grid.list-view .lot-body {
  padding: 1rem 1.15rem;
}

.lot-grid.list-view .data-strip {
  max-width: 420px;
}

/* Empty state */
.empty-state {
  display: none;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
}

.empty-state.visible { display: block; }

.empty-state p { margin-top: 0.5rem; font-size: 0.875rem; }

.grid-loading,
.grid-error {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}

.grid-error strong {
  color: var(--text);
  display: block;
  margin-bottom: 0.35rem;
}

.grid-error code {
  font-size: 0.8125rem;
  color: var(--accent);
}

/* Lot page — not found overlay */
body.lot-not-found-open {
  overflow: hidden;
}

body.lot-not-found-open .site-header,
body.lot-not-found-open .site-footer,
/* .home-footer — спільний футер, який тепер стоїть і на сторінках лота.
   Без цього рядка він світився б крізь оверлей «лот недоступний». */
body.lot-not-found-open .home-footer,
body.lot-not-found-open .site-backdrop,
body.lot-not-found-open #lot-page {
  display: none !important;
}

.lot-not-found {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

.lot-not-found[hidden] {
  display: none !important;
}

.lot-not-found__panel {
  width: min(100%, 24rem);
  padding: 1.5rem 1.5rem 1.65rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.lot-not-found__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 1.25rem 0 0;
  padding: 0.65rem 1.15rem 0.65rem 0.95rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.lot-not-found__back:hover {
  background: var(--accent-hover);
}

/* «View result» — та сама пігулка, що й «Back», але зелена (веде на sold-результат);
   вища специфічність [hidden] потрібна, бо .lot-not-found__back задає display:inline-flex. */
.lot-not-found__result {
  background: #1e9e57;
  text-decoration: none;
}
.lot-not-found__result:hover {
  background: #17864a;
}
.lot-not-found__result[hidden] {
  display: none;
}

.lot-not-found__back-arrow {
  font-size: 1.2rem;
  line-height: 1;
}

.lot-not-found__title {
  margin: 0 0 0.55rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.lot-not-found__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted-dim);
}

/* ── Home page ── */
.page-home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header,
.home-header,
.top-header {
  position: sticky;
  top: 0;
  z-index: 500;
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  overflow: visible;
}

.site-header-inner,
.home-header-inner,
.top-header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: visible;
}

.site-header-inner .logo,
.home-header-inner .logo,
.top-header-inner .logo {
  flex-shrink: 0;
}

/* Single-row pill nav */
.site-nav-pills {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  overflow: visible;
  margin-left: 0.25rem;
}

.nav-pill {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

a.nav-pill:hover,
button.nav-pill:hover {
  color: var(--text);
  text-decoration: none;
  background: var(--surface-2);
}

.nav-pill.active {
  color: var(--text);
  background: var(--surface-2);
}

.nav-dropdown-muted {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.nav-dropdown-muted {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Auctions dropdown */
.nav-dropdown {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}

.nav-dropdown.open {
  z-index: 520;
}

.nav-dropdown-trigger svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.nav-dropdown.open .nav-dropdown-trigger svg,
.nav-dropdown:hover .nav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.35rem;
  z-index: 521;
}

/* Invisible bridge — cursor can move down without leaving the dropdown */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  right: -0.5rem;
  bottom: 100%;
  height: 0.5rem;
}

.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  border-radius: calc(var(--radius) - 2px);
}

.nav-dropdown-menu a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.nav-dropdown-menu a.active {
  color: var(--accent);
  background: var(--accent-dim);
}

.site-header-inner .theme-toggle,
.site-header-inner .menu-toggle {
  flex-shrink: 0;
}

.site-header-inner .menu-toggle {
  margin-left: auto;
}

.site-header-inner .theme-toggle {
  margin-left: 0;
}

/* Browse subheader (search row) */
.browse-subheader {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.browse-subheader-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.browse-subheader .search-wrap {
  flex: 1;
  max-width: none;
}

.site-nav-bar {
  display: none;
}

.nav-pill-cta {
  display: none;
}

.header-cta {
  display: none;
}

/* Mobile menu */
.menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  margin-left: auto;
}

.menu-toggle svg { width: 18px; height: 18px; }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 0.5rem 1.25rem 0.75rem;
}

.mobile-menu a {
  padding: 0.65rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--text); text-decoration: none; }
.mobile-menu.open { display: flex; }

.mobile-menu-label {
  padding: 0.75rem 0 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dim);
}

.mobile-menu-sub {
  padding-left: 0.85rem !important;
  font-size: 0.875rem !important;
}

.mobile-menu-muted {
  opacity: 0.45;
  pointer-events: none;
}

.mobile-menu-active {
  color: var(--accent) !important;
}

/* Hero extras */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.hero-btn {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s;
}

.hero-btn.primary {
  background: var(--accent);
  color: #fff;
}

.hero-btn.primary:hover {
  background: var(--accent-hover);
  text-decoration: none;
}

.hero-btn.ghost {
  border: 1px solid var(--border);
  color: var(--muted);
}

.hero-btn.ghost:hover {
  border-color: var(--border-light);
  color: var(--text);
  text-decoration: none;
}

.hero-note {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--muted-dim);
  max-width: 480px;
}

.hero-note strong { color: var(--muted); font-weight: 600; }

.hpc-footnote {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  font-size: 0.65rem;
  color: var(--muted-dim);
  line-height: 1.45;
}

/* Filter rules */
.filter-rules {
  margin-bottom: 2.5rem;
}

.filter-rules-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.filter-col {
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.filter-col-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.filter-col-title.pass { color: var(--green); }
.filter-col-title.skip { color: var(--muted-dim); }

.filter-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.filter-tags li {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.filter-tags.pass li {
  background: var(--green-dim);
  border-color: rgba(52, 211, 153, 0.25);
  color: var(--green);
}

[data-theme="light"] .filter-tags.pass li {
  border-color: rgba(5, 150, 105, 0.25);
}

.filter-tags.skip li {
  background: var(--surface-2);
  color: var(--muted-dim);
  text-decoration: line-through;
  text-decoration-color: var(--muted-dim);
}

/* Yards */
.yards-section {
  margin-bottom: 2.5rem;
}

.yards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.yard-chip {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: all 0.15s;
}

.yard-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.section-sub.center { text-align: center; margin-bottom: 1.25rem; }

/* Compare table */
.compare-section {
  margin-bottom: 3.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.compare-table-wrap {
  max-width: 560px;
  margin: 0 auto;
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.compare-table th,
.compare-table td {
  padding: 0.65rem 0.85rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
}

.compare-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-dim);
  font-weight: 700;
}

.compare-table .highlight-col {
  background: var(--accent-dim);
  font-weight: 600;
}

.compare-table tbody tr:last-child td { border-bottom: none; }

.check.yes { color: var(--green); font-weight: 700; }
.check.no { color: var(--muted-dim); }

/* FAQ */
.faq-section {
  margin-bottom: 2.5rem;
}

.faq-list {
  max-width: 640px;
  margin: 1.25rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.faq-q svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s;
}

.faq-item.open .faq-q svg { transform: rotate(180deg); }

.faq-a {
  display: none;
  padding: 0 1rem 0.85rem;
}

.faq-item.open .faq-a { display: block; }

.faq-a p {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Hero band */
.hero-band {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.hero-band-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 65% 15%, var(--hero-glow-1), transparent 62%),
    radial-gradient(ellipse 60% 55% at 5% 75%, var(--hero-glow-2), transparent 55%);
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  pointer-events: none;
}

.hero-band-inner {
  position: relative;
  z-index: 0;
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  align-items: center;
}

.hero-copy { text-align: left; }

.hero-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin: 0 0 1.1rem;
  position: relative;
  z-index: 0;
}

.hero-title {
  font-size: clamp(2.6rem, 6.4vw, 4.75rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.94;
  margin: 0;
  position: relative;
  z-index: 0;
}

.hero-title-accent { color: var(--accent); }

/* the short rule that closes the headline block */
.hero-rule {
  display: block;
  width: 88px;
  height: 5px;
  margin: 1.6rem 0 1.5rem;
  background: var(--accent);
}

.hero-lead {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.75rem;
  max-width: 460px;
}

.hero-search {
  display: flex;
  align-items: center;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.3rem 0.3rem 0.3rem 0.85rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.hero-search:focus-within {
  border-color: rgba(230, 57, 70, 0.4);
  box-shadow: 0 4px 32px rgba(230, 57, 70, 0.08);
}

.hero-search svg {
  width: 18px;
  height: 18px;
  color: var(--muted-dim);
  flex-shrink: 0;
}

.hero-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.6rem 0.75rem;
  outline: none;
  min-width: 0;
}

.hero-search input::placeholder { color: var(--muted-dim); }

.hero-search button {
  flex-shrink: 0;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.6rem 1.15rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: background 0.15s;
}

.hero-search button:hover { background: var(--accent-hover); }

/* Hero product preview card */
.hero-preview-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-dim);
  margin-bottom: 0.5rem;
  text-align: right;
}

.hero-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--card-inset) inset,
    var(--shadow-lg);
  transform: perspective(800px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.4s ease;
}

.hero-preview:hover .hero-preview-card {
  transform: perspective(800px) rotateY(0deg) rotateX(0deg);
}

.hpc-photo {
  position: relative;
  aspect-ratio: 16 / 9;
}

.hpc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hpc-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
}

.hpc-badge.clean {
  background: rgba(52, 211, 153, 0.9);
  color: var(--green-text);
}

.hpc-body { padding: 0.85rem 1rem 1rem; }

.hpc-title {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}

.hpc-meta {
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 0.65rem;
}

.hpc-prices {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.hpc-label {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-dim);
  font-weight: 600;
}

.hpc-value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.hpc-spread {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: var(--green-dim);
  color: var(--green);
}

.hpc-rows { display: flex; flex-direction: column; gap: 0.3rem; }

.hpc-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--muted);
}

.hpc-row strong { color: var(--text); font-weight: 600; }

.hpc-date { color: var(--amber) !important; }

/* Metrics bar */
.metrics-bar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.metrics-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0;
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
  text-align: center;
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.metric-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: 0.15rem;
}

.metric-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
}

.home-main {
  flex: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
  width: 100%;
}

.section-head-row { margin-bottom: 1.25rem; }

.section-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.section-title.center { text-align: center; margin-bottom: 1.5rem; }

.section-sub {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dim);
  margin-bottom: 0.85rem;
}

.entry-section { margin-bottom: 3.5rem; }

.entry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.entry-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.15rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.entry-card:hover {
  border-color: var(--border-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.entry-card.entry-primary {
  border-color: rgba(230, 57, 70, 0.35);
  background: linear-gradient(160deg, var(--surface) 0%, rgba(230, 57, 70, 0.08) 100%);
}

.entry-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--accent-dim);
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.entry-icon svg { width: 16px; height: 16px; }

.entry-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}

.entry-desc {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.45;
  flex: 1;
}

.entry-count {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 0.6rem;
}

.entry-count svg { width: 12px; height: 12px; }

/* Steps */
.steps-section {
  margin-bottom: 3.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.steps-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem 1.5rem;
}

/* 4 → 2 before the 768px rule drops it to a single column */
@media (max-width: 1080px) {
  .steps-list { grid-template-columns: 1fr 1fr; }
}

/* a centred sub-heading sits tight under its title */
.section-title.center + .section-sub.center {
  margin-top: -1rem;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0.5rem;
}

.step-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.step strong {
  font-size: 0.9375rem;
  font-weight: 700;
}

.step span:last-child {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
}

.preview-section { margin-bottom: 3.5rem; }

.preview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.preview-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.preview-link:hover { text-decoration: underline; }

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.preview-card:hover {
  border-color: var(--border-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.preview-img-wrap {
  position: relative;
}

.preview-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.preview-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
}

.preview-badge.spread {
  background: rgba(52, 211, 153, 0.9);
  color: var(--green-text);
}

.preview-badge.today {
  background: rgba(251, 191, 36, 0.9);
  color: var(--amber-text);
}

.preview-body {
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.preview-price {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.preview-price small {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
}

.preview-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}

.preview-meta {
  font-size: 0.72rem;
  color: var(--muted-dim);
}

/* Features panel */
.features-section { margin-bottom: 2.5rem; }

.features-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start;
}

.features-intro .section-sub { margin-top: 0.5rem; line-height: 1.55; }

.features-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
}

.features-list li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.feat-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}

.feat-icon svg { width: 16px; height: 16px; }

.features-list strong {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.15rem;
}

.features-list span {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.45;
}

/* CTA band */
.cta-band {
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(230, 57, 70, 0.08) 0%, transparent 70%),
    var(--surface);
}

.cta-text {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  transition: background 0.15s, transform 0.15s;
}

.cta-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Home footer */
.home-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: auto;
}

.home-footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 1.25rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.footer-brand p {
  font-size: 0.75rem;
  color: var(--muted-dim);
  margin-top: 0.5rem;
  line-height: 1.5;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.footer-links a {
  color: var(--muted);
  transition: color 0.15s;
}

.footer-links a:hover { color: var(--text); text-decoration: none; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 0.85rem 1.25rem;
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted-dim);
}

.page-home .site-footer { margin-top: auto; }

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover { color: var(--text); }

.home-header,
.top-header,
.category-nav,
.metrics-bar,
.lot-card,
.entry-card,
.preview-card,
.hero-preview-card,
.features-panel,
.cta-band,
.home-footer,
.search-input,
.filter-chip,
.insight-box,
.price-item {
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Mobile */
@media (max-width: 768px) {
  .top-header-inner { gap: 0.75rem; }
  .header-stats span:not(.live-dot) { display: none; }
  .header-stats strong::after { content: " lots"; font-weight: 400; color: var(--muted); }
  .filters-spacer { display: none; }
  .browse-select { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
  .browse-select-trigger { width: 100%; justify-content: space-between; }
  .lot-grid.list-view .lot-card { flex-direction: column; }
  .lot-grid.list-view .lot-photo { width: 100%; min-width: unset; }

  .site-header-inner { gap: 0.5rem; }
  .site-nav-pills { display: none; }
  .menu-toggle { display: flex; }
  .browse-subheader-inner { flex-wrap: wrap; }
  .header-stats span:not(.live-dot) { display: none; }

  /* nav is hidden here — let the header search use the freed width */
  .header-search { flex: 1 1 auto; max-width: none; margin-left: 0; }
  /* the count is hidden below, so don't leave a lone live dot */
  .site-header-inner .header-stats { display: none; }
  .btn-signin { padding: 0 0.8rem; font-size: 0.8rem; }

  .hero-band-inner {
    grid-template-columns: 1fr;
    padding: 2rem 1.25rem 2.5rem;
    gap: 2rem;
  }

  .hero-copy { text-align: center; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-search { margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero-note { margin-left: auto; margin-right: auto; text-align: center; }

  .hero-preview-label { text-align: center; }
  .hero-preview-card { transform: none; }

  .metrics-inner { gap: 1rem; }
  .metric { padding: 0 1rem; flex: 1 1 40%; }
  .metric-divider { display: none; }

  .entry-grid { grid-template-columns: 1fr 1fr; }
  .filter-rules-inner { grid-template-columns: 1fr; }
  .steps-list { grid-template-columns: 1fr; gap: 1.25rem; }
  .preview-grid { grid-template-columns: 1fr; }
  .features-panel { grid-template-columns: 1fr; padding: 1.5rem; }
  .features-list { grid-template-columns: 1fr; }

  .home-footer-inner { flex-direction: column; }
}

/* Narrow: the search can no longer share the row — give it its own line */
@media (max-width: 620px) {
  .site-header-inner {
    flex-wrap: wrap;
    row-gap: 0.55rem;
    /* two rows now — the header must grow instead of clipping */
    height: auto;
    min-height: var(--header-h);
    padding-top: 0.6rem;
    padding-bottom: 0.7rem;
  }
  .header-search {
    order: 10;
    flex: 1 0 100%;
    max-width: none;
    margin-left: 0;
  }
  .header-stats { margin-left: auto; }
}

@media (max-width: 480px) {
  .entry-grid { grid-template-columns: 1fr; }
  /* tightest layout: row 1 = logo · Sign In · menu · theme, row 2 = search */
  .header-stats { display: none; }
  .btn-signin { margin-left: auto; padding: 0 0.85rem; font-size: 0.78rem; height: 34px; }
  .header-search .search-input { height: 34px; font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════
   Premium v2 — visual layer (gallery/video logic untouched)
   ═══════════════════════════════════════════════════════════ */

.site-header,
.home-header,
.top-header {
  border-bottom-color: var(--border);
  box-shadow: none;
}

.site-header::after,
.home-header::after,
.top-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--border-light) 30%,
    var(--border-light) 70%,
    transparent
  );
  opacity: 0.6;
  pointer-events: none;
}

.logo-accent {
  color: var(--accent);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.nav-pill.active,
.nav-dropdown-trigger.active {
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

.nav-dropdown-menu {
  border-radius: var(--radius-md);
  padding: 0.45rem;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

.theme-toggle,
.menu-toggle {
  border-radius: 999px;
  background: var(--surface-2);
}

.theme-toggle:hover,
.menu-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Lot detail summary card ── */
.page-lot main.lot-page {
  padding: 2rem 1.5rem 4rem;
}

.lot-breadcrumb {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-bottom: 1.25rem;
  color: var(--muted-dim);
}

.lot-breadcrumb span:last-child {
  color: var(--text);
}

@media (min-width: 900px) and (max-width: 1099px) {
  .lot-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-rows: auto auto;
    gap: 1.25rem;
    align-items: start;
  }

  .lot-gallery {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .lot-summary {
    grid-column: 2;
    grid-row: 1;
  }

  .lot-details-col {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (min-width: 1100px) {
  .page-lot main.lot-page {
    max-width: none;
    margin-left: 1rem;
    margin-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 4rem;
    padding-left: 0;
    padding-right: 0;
  }

  .lot-detail-grid {
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 460px) minmax(300px, 350px);
  }

  .lot-gallery,
  .lot-summary,
  .lot-details-col {
    grid-column: auto;
    grid-row: auto;
  }
}

.lot-summary-inner {
  position: relative;
  padding: 1.5rem 1.4rem 1.35rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    var(--surface) 0%,
    color-mix(in srgb, var(--surface-2) 35%, var(--surface)) 100%
  );
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

[data-theme="light"] .lot-summary-inner {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
  border-color: rgba(15, 23, 42, 0.07);
  box-shadow: var(--shadow-md);
}

.lot-summary-inner::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 45%, transparent) 35%,
    color-mix(in srgb, var(--green) 35%, transparent) 65%,
    transparent 100%
  );
  opacity: 0.85;
}

.lot-summary-inner::after {
  display: none;
}

.lot-summary-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.65rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.lot-summary-eyebrow::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
  box-shadow: none;
}

.lot-detail-title {
  position: relative;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.28;
  margin: 0 0 1.15rem;
}

.lot-price-value {
  font-size: clamp(1.95rem, 3.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}

.lot-price-value--loading,
#lot-fee.lot-price-value--loading,
#lot-delivery.lot-price-value--loading {
  display: inline-flex;
  align-items: center;
  min-height: 1em;
}

.lot-price-value--empty {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}

.lot-price-empty {
  display: inline-block;
  color: var(--muted-dim);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.lot-price-empty--hero {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: none;
}

.lot-price-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  font-family: var(--font);
  line-height: 1;
  vertical-align: middle;
  color: var(--text);
}

.lot-price-dots[data-size="hero"] {
  font-size: clamp(1.95rem, 3.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.lot-price-dots[data-size="sm"] {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.lot-price-dots__dot {
  width: 0.2em;
  height: 0.2em;
  min-width: 4px;
  min-height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.48;
  animation: lot-price-dot 1s ease-in-out infinite;
}

.lot-price-dots[data-size="hero"] .lot-price-dots__dot {
  min-width: 5px;
  min-height: 5px;
  border-radius: 3px;
}

.lot-price-dots__dot:nth-child(2) {
  animation-delay: 0.14s;
}

.lot-price-dots__dot:nth-child(3) {
  animation-delay: 0.28s;
}

.lot-price-breakdown dd.lot-price-value--loading {
  justify-content: center;
}

@keyframes lot-price-dot {
  0%, 72%, 100% {
    opacity: 0.48;
    transform: scale(1);
  }

  36% {
    opacity: 1;
    transform: scale(1.06);
  }
}

.lot-page--loading #lot-gallery-stage:empty::after {
  content: "";
  display: block;
  width: 100%;
  min-height: 14rem;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--surface-2) 80%, var(--surface)) 0%,
    color-mix(in srgb, var(--surface-3) 70%, var(--surface)) 50%,
    color-mix(in srgb, var(--surface-2) 80%, var(--surface)) 100%
  );
  background-size: 200% 100%;
  animation: lot-gallery-shimmer 1.2s ease-in-out infinite;
}

@keyframes lot-gallery-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.lot-price-hero {
  position: relative;
  align-items: flex-start;
  margin-bottom: 0;
  padding-bottom: 0.85rem;
}

.lot-price-hero-main {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.lot-price-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 38%, var(--muted));
}

.spread,
.spread-hot {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 18%, transparent);
  box-shadow: none;
  letter-spacing: -0.01em;
}

.lot-price-breakdown {
  position: relative;
  display: flex;
  gap: 0;
  margin: 0 0 0;
  padding: 0.72rem 0.45rem;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  border-radius: 0 0 7px 7px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-top: none;
}

.lot-price-hero + .lot-price-breakdown {
  margin-top: -0.15rem;
}

.lot-price-hero-main {
  padding-bottom: 0.15rem;
}

.lot-price-hero:has(+ .lot-price-breakdown) {
  padding: 0.65rem 0.75rem 0.5rem;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 7px 7px 0 0;
  border-bottom: none;
}

.lot-price-breakdown div {
  flex: 1;
  min-width: 0;
  padding: 0 0.45rem;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
}

.lot-price-card > .lot-price-breakdown.lot-price-breakdown--compact {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lot-price-card {
  display: flex;
  flex-direction: column;
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

.lot-price-main {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0 0.5rem;
}

.lot-price-main .lot-price-hero {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.lot-price-card .lot-price-hero:has(+ .lot-price-breakdown) {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.lot-price-card .lot-price-hero + .lot-price-breakdown {
  margin-top: 0;
}

.lot-price-breakdown__col--delivery {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lot-delivery-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0 0.5rem;
  margin: 0;
  background: transparent;
  border: none;
  border-top: 1px solid color-mix(in srgb, #93c5fd 32%, var(--border-light));
  border-radius: 0;
  box-shadow: none;
}

.lot-delivery-panel .lot-delivery-head {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin: 0;
}

.lot-delivery-panel__price {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.lot-delivery-panel .lot-delivery-zip--inline {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, #93c5fd 26%, var(--border));
  width: 100%;
}

.lot-delivery-head {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.24rem;
  max-width: 100%;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 42%, var(--muted));
}

.lot-delivery-panel .lot-delivery-zip__apply {
  background: color-mix(in srgb, var(--surface) 55%, #dbeafe);
  border-color: color-mix(in srgb, #93c5fd 42%, var(--border));
  color: color-mix(in srgb, #2563eb 80%, var(--text));
}

.lot-delivery-panel .lot-delivery-zip__apply:hover:not(:disabled) {
  background: color-mix(in srgb, #dbeafe 62%, var(--surface));
  border-color: color-mix(in srgb, #3b82f6 38%, var(--border));
}

[data-theme="dark"] .lot-delivery-panel {
  border-top-color: color-mix(in srgb, #3b82f6 26%, var(--border-light));
}

[data-theme="dark"] .lot-delivery-panel .lot-delivery-zip--inline {
  border-top-color: color-mix(in srgb, #3b82f6 22%, var(--border));
}

[data-theme="dark"] .lot-delivery-panel .lot-delivery-zip__apply {
  background: color-mix(in srgb, var(--surface) 70%, #1e3a5f);
  border-color: color-mix(in srgb, #3b82f6 35%, var(--border));
  color: color-mix(in srgb, #93c5fd 88%, var(--text));
}

/* Delivery panel themes — add one class on .lot-delivery-panel, e.g. lot-delivery-panel--ocean */
.lot-delivery-panel--ocean {
  background: color-mix(in srgb, var(--surface) 84%, #3b82f6 16%);
  border-color: color-mix(in srgb, #3b82f6 22%, var(--border-light));
  box-shadow: 0 1px 5px color-mix(in srgb, #3b82f6 10%, transparent);
}

.lot-delivery-panel--ocean .lot-delivery-zip--inline {
  border-top-color: color-mix(in srgb, #3b82f6 18%, var(--border));
}

.lot-delivery-panel--sage {
  background: color-mix(in srgb, var(--surface) 86%, var(--green) 14%);
  border-color: color-mix(in srgb, var(--green) 24%, var(--border-light));
  box-shadow: 0 1px 5px color-mix(in srgb, var(--green) 10%, transparent);
}

.lot-delivery-panel--sage .lot-delivery-zip--inline {
  border-top-color: color-mix(in srgb, var(--green) 20%, var(--border));
}

.lot-delivery-panel--ghost {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-light);
  border-left: 1px solid var(--border-light);
  border-radius: 0;
  box-shadow: none;
}

.lot-delivery-panel--inset {
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  border-color: var(--border);
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent),
    0 1px 0 color-mix(in srgb, var(--surface) 80%, transparent);
}

.lot-delivery-panel--warm {
  background: color-mix(in srgb, var(--surface) 88%, var(--amber) 12%);
  border-color: color-mix(in srgb, var(--amber) 28%, var(--border-light));
  box-shadow: 0 1px 5px color-mix(in srgb, var(--amber) 10%, transparent);
}

.lot-delivery-panel--warm .lot-delivery-zip--inline {
  border-top-color: color-mix(in srgb, var(--amber) 22%, var(--border));
}

[data-theme="light"] .lot-delivery-panel--ocean {
  background: color-mix(in srgb, var(--surface) 92%, #dbeafe 8%);
}

[data-theme="light"] .lot-delivery-panel--sage {
  background: color-mix(in srgb, var(--surface) 94%, var(--green-dim) 6%);
}

[data-theme="light"] .lot-delivery-panel--warm {
  background: color-mix(in srgb, var(--surface) 94%, #fef3c7 6%);
}

.lot-price-breakdown__col--delivery dd {
  margin-bottom: 0;
}

.lot-price-breakdown div:not(:last-child) {
  border-right: 1px solid var(--border);
}

.lot-price-breakdown dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
  color: color-mix(in srgb, var(--text) 38%, var(--muted));
}

.lot-price-breakdown dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lot-carfax-strip {
  margin: 0;
  padding-top: 0.9rem;
  border-top: none;
}

.lot-carfax-strip__label,
.lot-stats-strip__label,
.lot-delivery-zip__label {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 38%, var(--muted));
}

.lot-carfax-strip__grid {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0.72rem 0.45rem;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.lot-carfax-strip__grid div {
  flex: 1;
  min-width: 0;
  padding: 0 0.45rem;
  text-align: center;
}

.lot-carfax-strip__grid div:not(:last-child) {
  border-right: 1px solid var(--border);
}

.lot-carfax-strip__grid dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
  color: color-mix(in srgb, var(--text) 38%, var(--muted));
}

.lot-carfax-strip__grid dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lot-carfax-strip__note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.lot-stats-strip {
  margin: 0.4rem 0 0;
  padding-top: 0;
  border-top: none;
}

.lot-price-breakdown--compact {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.lot-price-breakdown--compact div {
  flex: none;
  padding: 0;
}

.lot-price-breakdown--compact div:not(:last-child) {
  border-right: none;
}

.lot-price-breakdown--compact .lot-price-breakdown__col {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem;
  flex-wrap: nowrap;
}

.lot-price-breakdown--compact dt {
  margin: 0;
  font-size: 0.7rem;
  white-space: nowrap;
}

.lot-price-breakdown--compact dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .lot-price-main {
    padding: 0.65rem 0 0.45rem;
  }

  .lot-delivery-panel {
    padding: 0.55rem 0 0.58rem;
  }
}

.lot-sold-range {
  --sold-bid-font: 1.25rem;
  --sold-wing-font: 0.88rem;
  --sold-bid-pad-y: 0.52rem;
  --sold-bid-pad-x: 0.8rem;
  --sold-bid-ch: 5;
  --range-green: #3ecf8e;
  --range-lime: #7ecf72;
  --range-yellow: #e8cc62;
  --range-orange: #e89a58;
  --range-red: #ef5f6a;
  position: relative;
  padding: 1.25rem 0 0.2rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme="light"] .lot-sold-range {
  --range-green: #15803d;
  --range-lime: #65a30d;
  --range-yellow: #ca8a04;
  --range-orange: #ea580c;
  --range-red: #dc2626;
}

/* Compact inline strip: LOW $2,600   EST $3,150   HIGH $3,700 (monospace) */
.lot-sold-range__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.lot-sold-range__row--solo,
.lot-sold-range__row:has(#lot-sold-low-wrap[hidden]):has(#lot-sold-high-wrap[hidden]) {
  justify-content: center;
}

.lot-sold-range__center {
  min-width: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.4rem;
}

.lot-sold-range__wing {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.38rem;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.lot-sold-range__cap {
  display: inline;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.lot-sold-range__val {
  display: inline;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  line-height: 1.2;
}

.lot-sold-range__track {
  margin-top: 0.55rem;
  margin-left: -0.2rem;
  margin-right: -0.2rem;
  padding: 0.35rem 0.2rem 0;
}

.lot-sold-range__track-shell {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
}

.lot-sold-range__track-labels {
  display: none;
}

.lot-sold-range__track-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--border) 95%, transparent);
  background:
    /* vertical cell dividers (~14 cells) */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(7.1428% - 1px),
      color-mix(in srgb, var(--border) 78%, transparent) calc(7.1428% - 1px),
      color-mix(in srgb, var(--border) 78%, transparent) 7.1428%
    ),
    /* smooth wash: green (left edge) → white (centre) → red (right edge) */
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--range-green) 20%, var(--surface)) 0%,
      var(--surface) 50%,
      color-mix(in srgb, var(--range-red) 20%, var(--surface)) 100%
    );
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  pointer-events: none;
  z-index: 0;
}

/* Bid marker: just a clean vertical green tick — no dot */
.lot-sold-range__bid-tick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--range-green);
  box-shadow: 0 0 0 1.5px var(--surface);
  pointer-events: none;
  z-index: 4;
  transition: left 0.08s ease;
}

.lot-sold-range__track-shell.is-dragging .lot-sold-range__bid-tick {
  transition: none;
}

.lot-sold-range__avg-tick {
  display: none;
}

.lot-sold-range__avg-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-dim);
  white-space: nowrap;
  pointer-events: none;
}

.lot-sold-range__slider {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 3;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

/* ПАЛЬЦЕМ ПОВЗУНОК ВИС.
 *
 * `touch-action: pan-y` вище каже браузеру, що вертикальна прокрутка його,
 * і той ЧЕКАЄ, доки стане зрозуміло, куди пішов палець. На смужці 22px
 * заввишки це відчувається як залипання: тягнеш — не рухається, відпускаєш —
 * смикається.
 *
 * Сам повзунок горизонтальний, тож на дотику жест віддаємо йому одразу.
 * Ціна: сторінку не прокрутити, якщо палець ліг саме на смужку. Для
 * контрола такої висоти це звичайний розмін, і він того вартий.
 *
 * Робочу точку ловити не треба: у `input[type=range]` дотик у будь-яке
 * місце доріжки одразу переставляє значення й починає перетягування —
 * саме тому невидима «ручка» шириною 1px лишається без змін (її положення
 * рахує JS у відсотках ширини, і ширша ручка зсунула б мальовану мітку
 * відносно справжньої).
 */
@media (pointer: coarse) {
  .lot-sold-range__slider { touch-action: none; }
}

.lot-sold-range__slider:focus {
  outline: none;
}

.lot-sold-range__slider:focus-visible {
  box-shadow: 0 0 0 2px var(--green-glow);
  border-radius: 6px;
}

.lot-sold-range__slider:focus-visible::-webkit-slider-thumb {
  background: transparent;
  box-shadow: none;
}

.lot-sold-range__slider:focus-visible::-moz-range-thumb {
  background: transparent;
  box-shadow: none;
}

.lot-sold-range__slider::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border: none;
}

.lot-sold-range__slider::-moz-range-track {
  height: 4px;
  background: transparent;
  border: none;
}

.lot-sold-range__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1px;
  height: 22px;
  margin-top: -9px;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: grab;
}

.lot-sold-range__slider:hover::-webkit-slider-thumb,
.lot-sold-range__slider:active::-webkit-slider-thumb,
.lot-sold-range__track-shell.is-dragging .lot-sold-range__slider::-webkit-slider-thumb {
  width: 1px;
  margin-left: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: grabbing;
}

.lot-sold-range__slider::-moz-range-thumb {
  width: 1px;
  height: 22px;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: grab;
}

.lot-sold-range__slider:active::-moz-range-thumb,
.lot-sold-range__track-shell.is-dragging .lot-sold-range__slider::-moz-range-thumb {
  width: 1px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: grabbing;
}

.lot-sold-range__bid-wrap:not(.is-buy-now-mode) {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.02rem;
  position: relative;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: text;
  vertical-align: baseline;
  transition: box-shadow 0.18s ease;
}

.lot-sold-range__bid-wrap.is-buy-now-mode {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.52rem 0.65rem;
  border-radius: 7px;
}

.lot-sold-range__bid-wrap:not(.is-buy-now-mode)::before {
  /* Валюту ставить lot.js (setLotCurrency): для канадського лота тут «C$». */
  content: var(--cs-bid-cur, "$");
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--range-green);
  line-height: 1.15;
  user-select: none;
}

/* No frame — plain editable text; a soft underline only while editing. */
.lot-sold-range__bid-wrap:focus-within,
.lot-sold-range__bid-wrap.is-editing {
  box-shadow: 0 1.5px 0 var(--range-green);
}

.lot-sold-range__bid-wrap .lot-sold-range__bid.lot-bid-input {
  flex: 0 0 auto;
  display: inline-block;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: left;
  color: var(--range-green);
  caret-color: var(--range-green);
  field-sizing: content;
}

.lot-sold-range__bid.lot-bid-input::selection {
  background: color-mix(in srgb, var(--green) 28%, transparent);
  color: var(--green);
}

.lot-sold-range__bid.lot-bid-input::placeholder {
  color: color-mix(in srgb, var(--green) 50%, var(--muted));
  font-weight: 600;
  font-size: 1em;
  letter-spacing: 0;
}

.lot-bid-input--loading {
  opacity: 0.85;
}

.lot-sold-range__bid.lot-bid-input:focus,
.lot-sold-range__bid.lot-bid-input:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
  padding: 0;
  background: transparent;
}

.lot-sold-range__bid {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: var(--sold-bid-font);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--green);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.lot-sold-range__bid:focus,
.lot-sold-range__bid:focus-visible {
  outline: none;
  box-shadow: none;
}

.lot-bid-readout[hidden] {
  display: none !important;
}

.lot-sold-range__slider:disabled {
  cursor: default;
}

.lot-sold-range__bid-wrap .lot-bid-readout:not([hidden]) {
  display: block;
  width: 100%;
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: center;
  color: var(--green);
}

.lot-bid-readout {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}

.lot-stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.lot-stats-strip__grid div {
  min-width: 0;
  text-align: center;
}

.lot-stats-strip__grid dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
  color: color-mix(in srgb, var(--text) 38%, var(--muted));
}

.lot-stats-strip__grid dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lot-stats-strip__note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--muted-dim);
}

.lot-sold-dual {
  width: 100%;
  max-width: none;
  margin: 0 0 0.7rem;
}

.lot-sold-dual[hidden] {
  display: none !important;
}

/* ── Buy Now / Est. bid: two free buttons, no enclosing container ── */
.lot-bidseg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  /* Опора для значка історії ціни в кутку картки. Обмежена САМЕ цим блоком —
     правило position:relative на дітей body в цьому проєкті вже одного разу
     зламало накладки з position:fixed. */
  position: relative;
}

/* Значок історії ціни Buy Now — у правому верхньому куті картки.
   Не всередині пігулки: кнопка в кнопці недійсна, та й клік по ній
   перемикав би базис ціни. Лежить поверх, з запасом від краю, щоб не
   наїжджати на закруглення рамки. */
.lot-bin-hist {
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  /* Колір беремо від самої картки: вона буває звичайна й кольорова (Buy Now
     малюється акцентом), і прибитий сірий значок на кольоровій тонув би.
     Так він завжди в тон тексту, який поруч. */
  color: currentColor;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.lot-bin-hist:hover { opacity: 1; background: rgba(127, 127, 127, 0.14); }
.lot-bin-hist:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.lot-bidseg__pill {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  padding: 0.6rem 0.7rem;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  cursor: pointer;
  font: inherit;
  line-height: 1.12;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease, color 0.18s ease;
}

/* Наведення показує, яким кнопка СТАНЕ після вибору: Buy Now тягне в акцентний,
 * оцінка ставки — в зелений. Раніше сюди домішувалось 18% кольору тексту, тобто
 * майже чорного, і обидві кнопки однаково бруднішали до сірого — підказки нуль,
 * вигляд неохайний. */
.lot-bidseg__pill:hover:not(.is-active) {
  background: var(--surface);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

#lot-sold-or-bin-btn:hover:not(.is-active) {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

#lot-sold-est-btn:hover:not(.is-active) {
  background: color-mix(in srgb, var(--range-green) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--range-green) 28%, transparent);
}

.lot-bidseg__label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.lot-bidseg__price {
  font-size: 0.98rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}

.lot-bidseg__pill.is-active {
  background: var(--surface);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

/* Заливка РІВНА, без градієнта: раніше низ кнопки вицвітав у біле, і колір
 * читався як брудний напівтон замість чистого акценту. */
#lot-sold-or-bin-btn.is-active {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 6px 18px color-mix(in srgb, var(--accent) 15%, transparent);
}

#lot-sold-or-bin-btn.is-active .lot-bidseg__label,
#lot-sold-or-bin-btn.is-active .lot-bidseg__price {
  color: var(--accent);
}

#lot-sold-est-btn.is-active {
  background: color-mix(in srgb, var(--range-green) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--range-green) 46%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--range-green) 22%, transparent),
    0 6px 18px color-mix(in srgb, var(--range-green) 15%, transparent);
}

#lot-sold-est-btn.is-active .lot-bidseg__label,
#lot-sold-est-btn.is-active .lot-bidseg__price {
  color: var(--range-green);
}

/* Est. bid "i" explainer */
.lot-bid-info-btn {
  appearance: none;
  position: absolute;
  top: 0;
  right: 0.1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-dim);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.lot-bid-info-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 18%, transparent);
}

.lot-bid-info-btn svg {
  display: block;
}

.lot-bid-info-tip {
  position: fixed;
  z-index: 20000;
  max-width: min(20rem, calc(100vw - 24px));
  padding: 0.6rem 0.75rem;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.4;
}

.lot-bid-info-tip[hidden] {
  display: none !important;
}

/* Est. bid mode: highlight the editable amount */
.lot-sold-range--est-mode #lot-bid-label {
  color: var(--range-green);
  font-weight: 700;
}

/* Est. bid: no frame — plain green text like Low/High, just editable */
.lot-sold-range--est-mode #lot-bid-wrap {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Buy Now mode: the estimate range is not relevant, so collapse it */
.lot-sold-range--bin-mode .lot-sold-range__row,
.lot-sold-range--bin-mode .lot-sold-range__track {
  display: none;
}


.lot-pricing-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 0 0 0.75rem;
}

.lot-pricing-bar__bin {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
}

.lot-pricing-bar__cap {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-dim);
  flex-shrink: 0;
}

.lot-pricing-bar__val {
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  letter-spacing: -0.02em;
}

.lot-price-basis {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.lot-price-basis--compact {
  margin: 0;
}

.lot-price-basis__label,
.lot-price-basis__toggle {
  display: none;
}

.lot-price-basis__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.lot-price-basis__btn:hover {
  color: var(--text);
}

.lot-price-basis__btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.lot-price-basis__btn[data-basis="buynow"].active {
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
  color: var(--amber);
}

.lot-stats-strip--comps-hidden {
  margin-bottom: 0;
}

.lot-stats-strip--comps-hidden .lot-stats-strip__note {
  margin-top: 0;
}

.lot-sold-range__bid-wrap.is-buy-now-mode {
  background: color-mix(in srgb, var(--amber) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--amber) 35%, transparent);
}

.lot-sold-range__bid-wrap.is-buy-now-mode .lot-bid-readout {
  color: var(--amber);
}

.lot-bid-input {
  width: 100%;
  max-width: 7.5rem;
  margin: 0 auto;
  padding: 0.2rem 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.lot-bid-input:focus {
  outline: none;
  border-color: var(--border);
  box-shadow: none;
}

.lot-bid-input:focus-visible {
  outline: none;
  border-color: var(--border);
  box-shadow: none;
}

.lot-delivery-zip--inline {
  margin: 0.38rem 0 0;
  padding-top: 0;
  border-top: none;
  width: 100%;
}

.lot-delivery-zip--inline .lot-delivery-zip__tag {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 38%, var(--muted));
  white-space: nowrap;
  cursor: default;
}

.lot-delivery-zip--inline .lot-delivery-zip__row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.lot-delivery-zip--inline .lot-delivery-zip__input {
  flex: 0 0 4.25rem;
  width: 4.25rem;
  padding: 0.22rem 0.28rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: var(--surface);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
}

.lot-delivery-zip--inline .lot-delivery-zip__input:focus {
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.lot-delivery-zip--inline .lot-delivery-zip__apply {
  padding: 0.22rem 0.42rem;
  min-width: 2.5rem;
  min-height: 1.55rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: var(--surface);
}

.lot-delivery-zip__apply-idle[hidden],
.lot-delivery-zip__apply-busy[hidden] {
  display: none;
}

.lot-delivery-zip__apply-busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.14rem;
  min-height: 1em;
}

.lot-delivery-zip__dot {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  animation: lot-zip-dot 0.85s ease-in-out infinite;
}

.lot-delivery-zip__dot:nth-child(2) {
  animation-delay: 0.14s;
}

.lot-delivery-zip__dot:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes lot-zip-dot {
  0%, 70%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }

  35% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.lot-delivery-zip--inline .lot-delivery-zip__hint {
  margin: 0 0 0 0.5rem;
  font-size: 0.68rem;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  min-height: 0;
  align-self: center;
}

.lot-delivery-zip--inline .lot-delivery-zip__hint[hidden] {
  display: none;
}

.lot-delivery-zip--inline .lot-delivery-zip__hint--error {
  color: var(--accent-deep);
  font-weight: 600;
}

.lot-delivery-zip {
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.lot-delivery-zip__label {
  display: block;
}

.lot-delivery-zip__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 7px;
}

.lot-delivery-zip__input {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 0.5rem 0.65rem;
  border-radius: 7px;
  border: none;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
}

.lot-delivery-zip__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.lot-delivery-zip__input--error {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.lot-delivery-zip__hint {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}

.lot-delivery-zip__note {
  display: none;
}

.lot-export-section {
  --exp-orange: #c96a3c;
  --exp-track: color-mix(in srgb, var(--muted) 15%, var(--surface));
  margin-top: 1.25rem;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  /* Very tight, subtle shadow — no wide soft strips around the card. */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* ── Hero (always visible; click to expand/collapse) ── */
.lot-export-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 0.95rem 1.35rem 1.05rem;
  background: var(--surface-2);
  border: none;
  cursor: pointer;
  outline: none;
}

.lot-export-hero__eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  /* Розріджені великі літери з'їдають міжслівний пробіл — повертаємо його. */
  word-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.lot-export-hero__total {
  margin-top: 0.25rem;
  font-size: clamp(1.95rem, 3.5vw, 2.35rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ── Country picker (custom styled dropdown) ── */
.lot-export-picker {
  position: relative;
  display: inline-flex;
  margin-top: 0.6rem;
  max-width: 100%;
}

.lot-export-hero__where {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.42rem 0.7rem;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lot-export-hero__where:hover,
.lot-export-picker.is-open .lot-export-hero__where {
  background: color-mix(in srgb, var(--exp-orange) 12%, transparent);
}

.lot-export-hero__flag {
  font-size: 1.2rem;
  line-height: 1;
}

.lot-export-hero__country {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.lot-export-hero__sep {
  color: var(--muted-dim);
}

.lot-export-hero__sep[hidden] {
  display: none;
}

.lot-export-hero__route {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lot-export-hero__pickchev {
  display: inline-flex;
  margin-left: 0.1rem;
  color: var(--muted-dim);
  transition: transform 0.25s ease;
}

.lot-export-picker.is-open .lot-export-hero__pickchev {
  transform: rotate(180deg);
}

/* Hidden native <select> — kept purely as the value/options/change model. */
.lot-export-hero__select-src {
  display: none;
}

/* The dropdown list — appended to <body> so the card's overflow:hidden can't
   clip it; positioned as a fixed popover under the trigger via JS. */
.lot-export-dropdown {
  --exp-orange: #c96a3c;
  position: fixed;
  width: 270px;
  max-width: calc(100vw - 32px);
  max-height: 304px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(30, 22, 14, 0.45), 0 4px 12px -6px rgba(30, 22, 14, 0.25);
  z-index: 20000;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.lot-export-dropdown--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.lot-export-dropdown__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.13s ease;
}

.lot-export-dropdown__row:hover {
  background: color-mix(in srgb, var(--exp-orange) 10%, var(--surface));
}

.lot-export-dropdown__row[aria-selected="true"] {
  background: color-mix(in srgb, var(--exp-orange) 17%, var(--surface));
}

.lot-export-dropdown__flag {
  width: 24px;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1;
}

.lot-export-dropdown__name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.lot-export-dropdown__check {
  color: var(--exp-orange);
  font-size: 0.95rem;
  font-weight: 800;
}

.lot-export-hero__chev {
  position: absolute;
  top: 0.95rem;
  right: 1.05rem;
  display: inline-flex;
  color: var(--muted);
  transition: transform 0.25s ease;
}

.lot-export-hero[aria-expanded="true"] .lot-export-hero__chev {
  transform: rotate(180deg);
}

/* Empty (no destination chosen yet) — a slim label + chevron row.
   The picker stretches across the whole bar so a click anywhere opens it. */
.lot-export-hero--empty {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 0.85rem 1.15rem;
  /* Доки країну не обрано, це ЄДИНА дія в блоці. Кольорова заливка на майже
   * білій сторінці виглядала брудною плямою, тож помітність дає не фон, а
   * обідок і акцентна стрілка.
   *
   * Обідок малює САМА СЕКЦІЯ, а не ця смуга: у секції своє скруглення 18px, і
   * власна рамка смуги з меншим радіусом лишала по кутах білі трикутники
   * підкладки. Смуга тільки заповнює секцію, а та обрізає її по своїх кутах. */
  background: transparent;
  transition: background 0.18s ease;
}

.lot-export-hero--empty:hover {
  background: var(--surface-2);
}

.lot-export-section:has(.lot-export-hero--empty) {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.lot-export-section:has(.lot-export-hero--empty:hover) {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-light));
  box-shadow: var(--shadow-sm);
}

.lot-export-hero--empty .lot-export-hero__eyebrow {
  color: var(--text);
}

.lot-export-hero--empty .lot-export-hero__chev {
  color: var(--accent);
}

.lot-export-hero--empty .lot-export-hero__total {
  display: none;
}

.lot-export-hero--empty .lot-export-picker {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
}

.lot-export-hero--empty .lot-export-hero__where {
  position: absolute;
  inset: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.lot-export-hero--empty .lot-export-hero__where > * {
  display: none;
}

.lot-export-hero--empty .lot-export-hero__chev {
  position: static;
  top: auto;
  right: auto;
}

.lot-export-section__panel[hidden] {
  display: none;
}

/* ── Region select ── */
.lot-export-region {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.35rem 0;
}

.lot-export-region[hidden] {
  display: none;
}

.lot-export-region__label {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

/* Region trigger — same styled-dropdown family, compact pill. */
.lot-export-picker--region {
  margin-top: 0;
}

.lot-export-region__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.6rem 0.38rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lot-export-region__trigger:hover,
.lot-export-picker--region.is-open .lot-export-region__trigger {
  border-color: color-mix(in srgb, var(--exp-orange) 55%, var(--border));
}

.lot-export-dropdown--region {
  width: auto;
  min-width: 168px;
}

/* ── Result body ── */
.lot-export-calc__result {
  padding: 0.2rem 1.1rem 0;
}

.lot-export-calc__result[hidden] {
  display: none;
}

/* Group header + subtotal */
.lot-export-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem 0 0.35rem;
}

.lot-export-group__title {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.lot-export-group__sub {
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Row */
.lot-export-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--border);
}

/* Independent "Other Fees" line — separated from the groups above */
.lot-export-standalone {
  margin-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.lot-export-standalone .lot-export-row {
  border-bottom: none;
}

.lot-export-row:last-child {
  border-bottom: none;
}

/* КАЛЬКУЛЯТОР — ВПРИТИК ДО КРАЇВ КАРТКИ, НА ВСІХ ЕКРАНАХ.
 *
 * Він лежить усередині картки лота, у якої свої відступи 1.4rem з боків і
 * 1.35rem знизу. Разом із власною рамкою калькулятора виходила рамка в
 * рамці, а між ними — смужка порожнечі.
 *
 * Від'ємні поля рівно на ці відступи витягують блок до країв, а бічні й
 * нижню рамки прибираємо — вони збігалися б із рамкою самої картки. Знизу
 * лишається її ж заокруглення, щоб край виглядав цілим. */
.lot-summary-inner > .lot-export-section {
  margin-left: -1.4rem;
  margin-right: -1.4rem;
  margin-bottom: -1.35rem;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Spec editor (engine size / fuel type) — shown in the export estimate when the
   lot is missing a value the calc needs. Plain, styled to match the cost rows. */
.lot-export-spec {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.lot-export-spec__label {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
}
.lot-export-spec__field {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.lot-export-spec__field--select { padding: 0; align-items: stretch; }
.lot-export-spec__input {
  width: 3ch;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 0;
  outline: none;
  -moz-appearance: textfield;
}
/* Індекс призначення: 3ch розраховані на «4.0» і різали placeholder «00000»
   до «0000(». Канадський код іще довший — «A1A 1A1». */
/* Сума у валюті лота поруч із переведеною: «Vehicle $80,320 (C$110,040)» */
.lot-export-footer__from { opacity: 0.6; font-weight: 600; }
/* Немає продажів для порівняння → немає й шкали: смуга без чисел читається
   як діапазон, якого нема. Ховаємо КЛАСОМ, бо атрибут `hidden` на цьому
   елементі перемикають обидва завантажувачі сторінки й перебивають один
   одного. Знак валюти теж прибираємо, доки поле порожнє: «C$» над прочерком
   виглядає як обрізане число. */
.lot-sold-range__bid-wrap.is-empty-bid::before { content: none; }
/* Помилка індексу — під самим полем, і поле підсвічене: мовчазний нуль у
   рядку доставки читався як «калькулятор зламаний». */
.lot-export-spec--error .lot-export-spec__field {
  border-color: var(--danger, #c62828);
  box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.12);
}
.lot-export-spec__error {
  margin: 0.15rem 0 0.4rem;
  padding: 0 0.9rem;
  font-size: 0.78rem;
  color: var(--danger, #c62828);
}
.lot-export-spec__input--zip {
  width: 8ch;
  text-transform: uppercase;
}
.lot-export-spec__input::-webkit-outer-spin-button,
.lot-export-spec__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* "L" styled like the "$" prefix in the cost rows (bold, text colour) */
.lot-export-spec__unit { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.lot-export-spec__select {
  box-sizing: border-box;
  /* Fit the select to its SELECTED option (not the widest one) and grow as the
     pick changes. width:auto is the fallback where field-sizing isn't supported. */
  field-sizing: content;
  width: auto;
  max-width: 14rem;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.3rem 1.5rem 0.3rem 0.55rem;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa3b2' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 12px;
}

.lot-export-row__label {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
}

.lot-export-row--zero .lot-export-row__label {
  color: var(--muted);
}

.lot-export-row__bar {
  width: 60px;
  flex-shrink: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--exp-track);
  overflow: hidden;
}

.lot-export-row__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.lot-export-row__amt {
  box-sizing: border-box;
  flex-shrink: 0;
  width: var(--exp-amt-w, 4rem);
  max-width: 8.5rem;
  justify-content: flex-end;
  text-align: right;
  /* Transparent 1px border matches the editable amount's border so plain and editable
     numbers inset identically → they line up to the pixel. */
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.lot-export-row--zero .lot-export-row__amt {
  color: var(--muted);
}

/* Row info "ⓘ" */
.lot-export-calc__info-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 0.35rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

/* 15 ПІКСЕЛІВ — НЕ ЦІЛЬ ДЛЯ ПАЛЬЦЯ.
 *
 * Збільшуємо саму зону натиску, а не значок: невидимий прямокутник навколо
 * доводить її до ~35px, і розкладка при цьому не рухається. */
@media (pointer: coarse) {
  .lot-export-calc__info-btn { position: relative; }

  .lot-export-calc__info-btn::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
}

.lot-export-calc__info-btn:hover {
  color: var(--exp-orange);
  background: color-mix(in srgb, var(--exp-orange) 13%, transparent);
}

.lot-export-calc__info-btn svg {
  display: block;
}

/* Editable amount — same box footprint as the plain amount (border-box + no negative
   margin) so its scale bar lines up with the non-editable rows. The hover box breathes
   to the LEFT (into the bar→amount gap); the number stays pinned to the right edge. */
.lot-export-row__amt--edit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  padding: 0.1rem 0 0.1rem 0.35rem;
  margin: 0;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: text;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lot-export-row__amt--edit:hover,
.lot-export-row__amt--edit:focus-within {
  border-color: color-mix(in srgb, var(--exp-orange) 45%, transparent);
  background: color-mix(in srgb, var(--exp-orange) 8%, transparent);
}

.lot-export-row__cur {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.lot-export-row__input {
  min-width: 1.5ch;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 0;
  outline: none;
  -moz-appearance: textfield;
}

.lot-export-row__input::-webkit-outer-spin-button,
.lot-export-row__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Info tooltip host */
.lot-export-calc__tip {
  position: fixed;
  z-index: 20000;
  max-width: min(20rem, calc(100vw - 24px));
  padding: 0.6rem 0.75rem;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.4;
}

.lot-export-calc__tip[hidden] {
  display: none !important;
}

/* ── Notes (dashed box) ── */
.lot-export-notes {
  margin: 1rem 0 0;
  padding: 0.85rem 0.95rem;
  border: 1px dashed color-mix(in srgb, var(--exp-orange) 28%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--exp-orange) 5%, var(--surface));
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.lot-export-note {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.8rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
}

.lot-export-note__mark {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--muted-dim);
}

.lot-export-note--warn {
  color: var(--exp-orange);
}

.lot-export-note--warn .lot-export-note__mark {
  color: var(--exp-orange);
}

/* ── Footer: vehicle + all-in ── */
.lot-export-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.95rem;
  padding-bottom: 1.25rem;
  border-top: 1px solid var(--border);
}

.lot-export-footer__veh,
.lot-export-footer__lbl {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ТОЙ САМИЙ ВІДСТУП, ЩО Й У «ALL-IN».
 *
 * Праворуч підпис і сума — два елементи з `gap: 0.45rem`, ліворуч був
 * звичайний пробіл у тексті. Пробіл вужчий за цей відступ, та ще й
 * стискається поруч із великим напівжирним числом — «Vehicle» і сума майже
 * зліплювались, тоді як сусідня пара дихала. */
.lot-export-footer__veh {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}

.lot-export-footer__veh span {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}

.lot-export-footer__all {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}

.lot-export-footer__val {
  font-size: 1.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ── Loading / error ── */
.lot-export-calc__loading,
.lot-export-calc__error {
  padding: 1.1rem 0 1.3rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

.lot-export-calc__error {
  color: var(--exp-orange);
}

.lot-export-calc__result--busy {
  opacity: 0.55;
}

@media (max-width: 640px) {
  .lot-export-hero__total {
    font-size: 2.3rem;
  }

  .lot-export-row__bar {
    width: 52px;
  }
}

.lot-delivery-zip__apply {
  flex-shrink: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 7px;
  border: none;
  background: var(--surface-3);
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.lot-delivery-zip__apply:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 8%, var(--surface-3));
}

.lot-delivery-zip__apply:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lot-delivery-zip__apply--busy:disabled {
  opacity: 1;
}

.lot-delivery-zip__hint--ok {
  color: var(--green);
  font-weight: 600;
}

.lot-delivery-zip__hint--error {
  color: var(--accent-deep);
}

.lot-delivery-zip__hint--prompt {
  color: var(--accent);
  font-weight: 600;
}

.lot-delivery-zip__input--prompt {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.lot-actions {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
}

.btn-copart,
.btn-iaai,
.btn-copart-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-copart,
.btn-copart-lg.btn-copart {
  background: var(--copart);
  box-shadow: var(--shadow-copart);
}

.btn-copart:hover,
.btn-copart-lg.btn-copart:hover {
  background: var(--copart-hover);
  transform: none;
  box-shadow: var(--shadow-copart);
  filter: none;
}

.btn-iaai,
.btn-copart-lg.btn-iaai {
  background: var(--iaai);
  box-shadow: var(--shadow-iaai);
}

.btn-iaai:hover,
.btn-copart-lg.btn-iaai:hover {
  background: var(--iaai-hover);
  transform: none;
  box-shadow: var(--shadow-iaai);
  filter: none;
}

.lot-back-link {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem;
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
}

.lot-back-link:hover {
  background: var(--surface-2);
}

/* Gallery frame — cosmetic only */
.lot-gallery-main {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* Стрілки гортання фото.
 *
 * Малюємо шеврон псевдоелементом, а не символом «‹»: текстовий знак у кожному
 * шрифті свого розміру й ніколи не стоїть рівно в центрі кола. Заодно розмітка
 * лишається незмінною в усіх трьох галереях (lot.js, lot-instant.js,
 * sold-lot.js) — міняти по три файли заради вигляду не доводиться.
 *
 * Фон темний і напівпрозорий, бо стрілка лежить на фотографії: світле коло
 * зливається з небом і кузовами, а темне читається на будь-якому знімку
 * незалежно від теми сайту. */
.lot-gallery-nav {
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(17, 24, 39, 0.52);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0;                      /* ховаємо символ із розмітки */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: opacity 0.18s ease, transform 0.15s ease, background 0.15s ease;
}

.lot-gallery-nav::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
}

.lot-gallery-prev::before { transform: rotate(135deg); margin-left: 0.18rem; }
.lot-gallery-next::before { transform: rotate(-45deg); margin-right: 0.18rem; }

.lot-gallery-nav:hover {
  transform: translateY(-50%) scale(1.08);
  background: rgba(17, 24, 39, 0.78);
  border-color: rgba(255, 255, 255, 0.34);
}

.lot-gallery-nav:active {
  transform: translateY(-50%) scale(0.96);
  background: rgba(17, 24, 39, 0.88);
}

/* Ховаємо, доки курсор не на фото. Тільки там, де курсор взагалі є: на
 * телефоні немає :hover, і сховані стрілки означали б, що гортати нема чим. */
@media (hover: hover) and (pointer: fine) {
  .lot-gallery-nav {
    opacity: 0;
    pointer-events: none;
  }

  /* `:focus-within` тут НЕ годиться: після кліку мишею кнопка лишається
   * сфокусованою, і стрілки не зникали, коли курсор ішов із фото. Беремо
   * `:focus-visible` — він спрацьовує на клавіатурі й не спрацьовує на клік. */
  .lot-gallery-main:hover .lot-gallery-nav,
  .lot-gallery-main:has(.lot-gallery-nav:focus-visible) .lot-gallery-nav {
    opacity: 1;
    pointer-events: auto;
  }

  /* Клавіатура: фокус мусить бути видимим навіть без миші на фото. */
  .lot-gallery-nav:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
}

.lot-photo-counter {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-light);
}

.lot-gallery-extras-label {
  font-weight: 800;
  letter-spacing: 0.1em;
}

.lot-panels {
  display: block;
  margin: 0;
}

.lot-details-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.lot-details-inner {
  padding: 1.35rem 1.3rem 1.4rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.lot-specs-inner {
  padding: 1.35rem 1.3rem 1.4rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.lot-specs-inner[hidden] {
  display: none;
}

[data-theme="light"] .lot-specs-inner {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .lot-details-inner {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow-md);
}

.lot-details-title {
  margin: 0 0 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.lot-panel {
  border-radius: var(--radius-md);
  padding: 1.25rem 1.35rem;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 90%, var(--bg)));
  box-shadow: var(--shadow-sm);
}

.lot-panel h2 {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Vehicle details (aligned spec list) ── */
.lot-vd {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0;
  max-width: none;
}

.lot-vd-group__title {
  margin: 0 0 0.35rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.lot-vd-list {
  margin: 0;
}

.lot-vd-divider {
  display: none;
}

.lot-vd-row {
  display: grid;
  grid-template-columns: 6.75rem minmax(0, 1fr);
  gap: 0.5rem 0.85rem;
  align-items: baseline;
  padding: 0.35rem 0;
}

.lot-vd-row:last-child {
  padding-bottom: 0;
}

.lot-vd-row dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
}

.lot-vd-row__val {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

/* Назва майданчика буває довга — «ANAHEIM CONSOLIDATED, CA» переносилась на
   другий рядок і ламала рівну сітку деталей. Тримаємо в ОДИН рядок і
   скорочуємо трьома крапками; повна назва лишається у title (підказка при
   наведенні), тож нічого не втрачається.
   `min-width: 0` обовʼязковий: без нього flex-дитина не дає себе стиснути,
   і ellipsis просто не спрацьовує. */
.lot-vd-row__val--nowrap,
.lot-vd-row__val--nowrap .lot-vd-row__val-inner,
.lot-vd-row__val--nowrap .lot-vd-row__val-inner > span:last-child,
.lot-vd-row__val--nowrap .lot-yard {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lot-vd-row--mono .lot-vd-row__val {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.lot-vd-list--stacked .lot-vd-row {
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.45rem 0;
}

.lot-vd-list--stacked .lot-vd-row dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.lot-vd-list--stacked .lot-vd-row__val {
  font-size: 0.92rem;
  line-height: 1.4;
}

.lot-vd-row__val--warn {
  color: var(--amber);
}

.lot-vd-row__val--danger {
  color: var(--tag-danger-fg);
}

.lot-vd-row__val--good {
  color: var(--green);
}

.lot-vd-row__val-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.lot-vd-row__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
}

.lot-vd-row__icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.lot-vd-row__val--good .lot-vd-row__icon {
  color: var(--green);
}

.lot-vd-row__val--warn .lot-vd-row__icon {
  color: var(--amber);
}

.lot-vd-row__val--danger .lot-vd-row__icon {
  color: var(--tag-danger-fg);
}

@media (max-width: 720px) {
  .lot-vd-row {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
}

/* ── Browse cards ── */
.lot-card {
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.lot-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}

.lot-photo {
  position: relative;
}

.lot-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
  pointer-events: none;
}

.price-total {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.data-strip {
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border-color: var(--border);
}

.browse-subheader {
  background: var(--glass);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}

.search-input {
  height: 42px;
  border-radius: 999px;
  padding-left: 2.5rem;
  background: var(--surface-2);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.filter-chip.active {
  background: var(--accent-dim);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}

/* ── Hero ── */
.hero-eyebrow {
  font-weight: 800;
  letter-spacing: 0.12em;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.hero-title {
  font-weight: 800;
  letter-spacing: -0.04em;
}

.hero-search {
  border-radius: 999px;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
}

.hero-search button {
  border-radius: 999px;
  font-weight: 700;
  background: var(--accent);
  box-shadow: var(--shadow-accent);
}

.hero-preview-card,
.entry-card,
.preview-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.cta-band {
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
}

.cta-btn {
  background: var(--accent);
  box-shadow: var(--shadow-accent);
  font-weight: 700;
}

.site-footer,
.home-footer {
  border-top-color: var(--border);
  background: var(--surface);
}

[data-theme="light"] .lot-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .lot-card:hover {
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .browse-subheader {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .site-header,
[data-theme="light"] .home-header,
[data-theme="light"] .top-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(1.04);
  border-bottom-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .lot-panel {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .lot-gallery-main {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.05),
    var(--shadow-md);
}

[data-theme="light"] .lot-extra-btn.active {
  background: var(--accent-dim);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: none;
}


/* ── Browse sidebar filters ── */
.browse-layout {
  max-width: var(--browse-max, var(--max));
  margin: 0 auto;
  padding: 0 var(--browse-pad-x, 1.25rem);
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  position: relative;
  z-index: 1;
}

.browse-layout .browse-main {
  flex: 1;
  min-width: 0;
}

/* inner blocks are constrained by .browse-layout now */
.page-browse .browse-layout main,
.page-browse .browse-layout .results-count,
.page-browse .browse-layout .browse-pagination {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.browse-sidebar {
  width: 252px;
  flex-shrink: 0;
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 0.95rem 1rem;
  margin-bottom: 2rem;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.sidebar-head h2 {
  font-size: 0.85rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Сердечко збереження пошуку — у кутку панелі фільтрів, поряд із «Reset all».
   Притиснуте вправо через margin-left:auto, щоб заголовок лишався ліворуч, а
   обидві дії трималися купи. */
.sidebar-save-search {
  margin-left: auto;
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #6b7280);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.sidebar-save-search:hover {
  color: var(--accent, #e11d48);
  background: color-mix(in srgb, var(--accent, #e11d48) 10%, transparent);
}

.sidebar-save-search:active { transform: scale(0.92); }

/* Збережений — заливаємо, як сердечко лота: стан має читатись з одного погляду. */
.sidebar-save-search.is-saved {
  color: var(--accent, #e11d48);
}
.sidebar-save-search.is-saved svg { fill: currentColor; }

.sidebar-reset {
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: 8px;
}

.sidebar-reset:hover {
  background: var(--accent-dim);
}

.sidebar-section {
  border-top: 1px solid var(--border);
  padding: 0.15rem 0;
}

.sidebar-section:first-of-type {
  border-top: none;
}

.sidebar-section summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text);
  padding: 0.55rem 0;
  user-select: none;
}

.sidebar-section summary::-webkit-details-marker {
  display: none;
}

.sidebar-section summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
  margin-right: 3px;
  flex-shrink: 0;
}

.sidebar-section[open] summary::after {
  transform: rotate(225deg);
}

.sidebar-body {
  padding: 0.1rem 0 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sidebar-label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sidebar-select,
.sidebar-input {
  width: 100%;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.44rem 0.55rem;
  outline: none;
  transition: border-color 0.15s;
}

.sidebar-select:focus,
.sidebar-input:focus {
  border-color: var(--border-light);
}

.sidebar-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Styled sidebar dropdowns — a themed .browse-select layer replaces the native
   OS <select> popup (which rendered as a bare black terminal-style list). The
   native <select> stays in the DOM but hidden as the value source of truth. */
.sidebar-select.is-enhanced {
  display: none;
}

.browse-select--sidebar {
  display: block;
  width: 100%;
  z-index: 1;
}

.browse-select--sidebar .browse-select-trigger {
  width: 100%;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 7px;
  padding: 0.44rem 0.5rem 0.44rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--bg-elevated);
  border-color: var(--border);
}

.browse-select--sidebar .browse-select-trigger:hover {
  border-color: var(--border-light);
  background: var(--bg-elevated);
}

.browse-select--sidebar.open .browse-select-trigger {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-dim);
  background: var(--bg-elevated);
}

.browse-select--sidebar .browse-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.browse-select--sidebar.browse-select--disabled {
  opacity: 0.45;
}

.browse-select--sidebar.browse-select--disabled .browse-select-trigger {
  pointer-events: none;
  cursor: not-allowed;
}

.sidebar-input::-webkit-outer-spin-button,
.sidebar-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sidebar-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.sidebar-range {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sidebar-range-sep {
  color: var(--muted-dim);
  flex-shrink: 0;
}

.sidebar-checks {
  gap: 0.12rem;
}

.sidebar-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--muted);
  cursor: pointer;
  padding: 0.16rem 0;
}

.sidebar-check input {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}

.sidebar-check:hover span,
.sidebar-check input:checked + span {
  color: var(--text);
}

.sidebar-segment {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.sidebar-seg-opt {
  flex: 1;
  position: relative;
}

.sidebar-seg-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sidebar-seg-opt span {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.38rem 0.2rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sidebar-seg-opt + .sidebar-seg-opt span {
  border-left: 1px solid var(--border);
}

.sidebar-seg-opt input:checked + span {
  background: var(--accent-dim);
  color: var(--accent);
}

.sidebar-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.sidebar-toggle svg {
  width: 14px;
  height: 14px;
}

.sidebar-toggle:hover {
  border-color: var(--border-light);
  color: var(--text);
}

.sidebar-toggle-count {
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

@media (max-width: 980px) {
  .sidebar-toggle {
    display: inline-flex;
  }

  .browse-layout {
    display: block;
  }

  .browse-sidebar {
    display: none;
    position: static;
    width: 100%;
    max-height: none;
    margin-bottom: 1rem;
  }

  .browse-sidebar.open {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════
   Legal / contact pages
   ═══════════════════════════════════════════════════════════ */

.legal-main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.25rem 3.5rem;
}

.legal-head {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.legal-title {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.legal-sub {
  margin-top: 0.75rem;
  max-width: 58ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.legal-body h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.6rem;
}

.legal-body > h2:first-child { margin-top: 0; }

.legal-body p,
.legal-body li {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.legal-body p + p { margin-top: 0.7rem; }

.legal-body ul {
  list-style: none;
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.legal-body li {
  position: relative;
  padding-left: 1.1rem;
}

.legal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.legal-body strong { color: var(--text); font-weight: 650; }

.legal-body a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.legal-body a:hover { text-decoration: underline; }

/* Contact page cards */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.contact-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.25rem;
}

.contact-card h2 {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
}

.contact-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 0.85rem;
}

.contact-link {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.contact-link:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .contact-grid { grid-template-columns: 1fr; }
  .legal-main { padding-top: 2rem; }
}

/* "In development" tag inside a feature heading */
.feat-soon {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   Pricing page
   ═══════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pricing-hero {
  position: relative;
  border-bottom: 1px solid var(--border);
}

.pricing-hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3.25rem 1.25rem 3rem;
}

.pricing-hero .hero-lead { max-width: 560px; margin-bottom: 0; }

.pricing-main {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem 1.25rem 3.5rem;
}

/* ── plan cards ───────────────────────────────────────────── */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.6rem 1.4rem;
}

.plan-card.featured {
  border-color: var(--accent);
  box-shadow: 0 8px 30px var(--accent-dim);
}

.plan-badge {
  position: absolute;
  top: -0.7rem;
  left: 1.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-name {
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.plan-amount {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.plan-period { font-size: 0.875rem; color: var(--muted); }

/* ── МІСЯЦЬ / РІК ──────────────────────────────────────────────────────────
 *
 * Сегментований перемикач над картками. У розмітці він `hidden` і
 * відкривається лише тоді, коли сервер підтвердив наявність річних цін.
 *
 * Кнопки не менші за 44px: перемикач стоїть угорі сторінки, куди на телефоні
 * тягнуться великим пальцем, і дрібна ціль тут коштує продажу.
 */
.billing-period {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}

.billing-period__switch {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.billing-period__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.65rem 1.25rem;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.billing-period__btn:hover { color: var(--text); }

.billing-period__btn.is-on {
  background: var(--accent);
  color: #fff;
}

.billing-period__save {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Рядок «скільки це на місяць і скільки економиш». Саме він перетворює
 * «$299» на зрозуміле число — без нього річна ціна виглядає просто більшою. */
.plan-yearly {
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent);
}

.plan-note {
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.plan-points {
  list-style: none;
  margin: 1.35rem 0 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.plan-points li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.plan-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.36em;
  width: 13px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Тариф, на якому людина зараз: кнопка лишається на місці, щоб картки не
   «стрибали», але не клікається і не вдає заклик до дії. */
.plan-cta.is-current,
.plan-cta:disabled {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--border-light);
  cursor: default;
  box-shadow: none;
}

.plan-cta {
  display: block;
  text-align: center;
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.plan-cta.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}

.plan-cta.primary:hover { filter: brightness(1.08); }

.plan-cta.ghost {
  border: 1px solid var(--border);
  color: var(--text);
}

.plan-cta.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Пробний тиждень: другорядна дія під головною кнопкою, не замість неї.

   `[hidden]` тут із `!important` з тієї самої причини, що й у дилерських
   елементів вище: у кнопки власний `display:block`, і в старішому движку
   атрибут програв би йому. Ціна помилки — обіцянка тріалу тому, хто його вже
   брав, тобто відмова просто в іншому місці. */
.plan-trial { margin-top: 0.5rem; }
.plan-trial[hidden] { display: none !important; }

.plan-trial-note {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-dim);
}
.plan-trial-note[hidden] { display: none !important; }

.plan-disclaimer {
  margin: 1.5rem auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-dim);
}

/* ── comparison table ─────────────────────────────────────── */

.compare-block { margin-top: 4rem; }

.plan-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.plan-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.plan-table th,
.plan-table td {
  padding: 0.8rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td { border-bottom: none; }

/* НА ТЕЛЕФОНІ ТАБЛИЦЯ МУСИТЬ ВЛІЗТИ, А НЕ ЇХАТИ ВБІК.
 *
 * `min-width: 620px` тримав її ширшою за екран. Обгортка з `overflow-x`
 * малює правильно — за її межами нічого не видно, — але СТОРІНКА все одно
 * тягнулась на 206 пікселів у порожнечу: палець зсував усе вбік, і людина
 * опинялась перед порожнім полем. Саме на цю сторінку ведуть оголошення.
 *
 * Бічна прокрутка всередині таблиці була б не кращою: у ній порівнюють
 * тарифи, а порівнювати те, чого не видно одночасно, неможливо.
 *
 * Заміряно на 375px: 581 → 375, таблиця 333 і читається. */
@media (max-width: 700px) {
  .plan-table { min-width: 0; }

  .plan-table th,
  .plan-table td {
    padding: 0.55rem 0.35rem;
    font-size: 0.8rem;
  }

  /* Назва пункту переноситься в кілька рядків — це й дає потрібну ширину
     трьом колонкам тарифів. */
  .plan-table th:first-child,
  .plan-table td:first-child {
    text-align: left;
    white-space: normal;
  }
}

.plan-table thead th {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.plan-table thead th.pt-featured { color: var(--accent); }

.plan-table tbody th {
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  width: 45%;
}

.plan-table .pt-val {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}

.pt-yes svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
  vertical-align: middle;
}

.pt-no { color: var(--muted-dim); }

.pricing-faq { margin-top: 4rem; }

@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card.featured { order: -1; }
}

/* ═══════════════════════════════════════════════════════════
   Accounts — sign-in page and header account menu
   ═══════════════════════════════════════════════════════════ */

.auth-main {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4.5rem 1.25rem 5rem;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 408px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 2rem 1.9rem 1.9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 40px rgba(15, 23, 42, 0.08);
}

:root[data-theme="dark"] .auth-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.45);
}

/* Heading */
.auth-heading { text-align: center; margin-bottom: 1.5rem; }
.auth-heading h1 {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.auth-heading p {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Segmented tabs */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
  padding: 0.25rem;
  border-radius: 10px;
  background: var(--surface-2);
  margin-bottom: 1.5rem;
}

.auth-tab {
  padding: 0.55rem;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.auth-tab:hover:not(.active) { color: var(--text); }

.auth-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* Top banner — only for errors no field owns */
.auth-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.auth-error::before {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23be1e2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Google */
.auth-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.auth-google:hover {
  border-color: var(--border-light);
  background: var(--surface-2);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.25rem 0;
  color: var(--muted-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-form { display: flex; flex-direction: column; gap: 1.05rem; }

.auth-field { display: flex; flex-direction: column; gap: 0.4rem; }

.auth-field > span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-field > span em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-dim);
}

.auth-field input {
  height: 46px;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-field input::placeholder { color: var(--muted-dim); }

.auth-field input:hover { border-color: var(--border-light); }

.auth-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.auth-hint { font-style: normal; font-size: 0.75rem; color: var(--muted-dim); margin-top: 0.05rem; }

.auth-submit {
  height: 46px;
  margin-top: 0.5rem;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}

.auth-submit:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px var(--accent-dim);
}
.auth-submit:active:not(:disabled) { transform: translateY(1px); }
.auth-submit:disabled { opacity: 0.6; cursor: default; }

.auth-foot {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted-dim);
  text-align: center;
}

.auth-foot-link { margin-top: 1.1rem; border: none; padding: 0; }

.auth-foot a { color: var(--muted); text-decoration: underline; }

/* ── header account menu ─────────────────────────────────── */

.account-menu { position: relative; flex-shrink: 0; }

.account-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 38px;
  padding: 0 0.7rem 0 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 190px;
}

.account-trigger:hover { border-color: var(--border-light); }

.account-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
}

.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 220px;
  display: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.16));
  overflow: hidden;
  z-index: 60;
}

.account-menu.open .account-dropdown { display: block; }

/* Меню акаунта на вузькому екрані.
   Панель прив'язана до ПРАВОГО краю аватарки (`right: 0` всередині
   `.account-menu`), а аватарка стоїть не скраю шапки. При ширині 244px це
   виносило панель за ЛІВИЙ край екрана: на 375px виміряно left = -30, і
   ім'я, пошта та всі пункти були обрізані.
   Лік: на вузькому робимо `.account-menu` непозиційованим, і опорою стає
   сама шапка (вона sticky). Тоді `right` відлічується від краю екрана. */
@media (max-width: 560px) {
  .account-menu { position: static; }

  .account-dropdown {
    right: 12px;
    left: auto;
    min-width: 0;
    max-width: calc(100vw - 24px);
  }
}

.account-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.account-head-name {
  font-size: 0.875rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-head-email { font-size: 0.75rem; color: var(--muted); word-break: break-all; }

.account-item {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.account-item:hover { background: var(--surface-2); }

@media (max-width: 480px) {
  .account-name { display: none; }
  .account-trigger { padding: 0 0.3rem; }
}

/* The [hidden] attribute must win over any display rule we set on an element,
   otherwise `el.hidden = true` silently does nothing. */
[hidden] { display: none !important; }

.auth-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }

.auth-sub {
  margin: 0.45rem 0 1.35rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

.auth-ok {
  margin-bottom: 1rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--pos, #15803d) 30%, transparent);
  background: color-mix(in srgb, var(--pos, #15803d) 10%, transparent);
  color: var(--pos, #15803d);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.auth-foot-link { margin-top: 0.9rem; }
.auth-foot-link a { color: var(--muted); font-weight: 600; }

/* ── Locked catalog ──────────────────────────────────────── */

.locked-panel {
  grid-column: 1 / -1;
  max-width: 460px;
  margin: 2.5rem auto;
  padding: 2.25rem 1.75rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.locked-icon {
  width: 34px;
  height: 34px;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.locked-panel h2 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.locked-panel p {
  margin: 0.5rem 0 1.35rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.locked-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.locked-btn {
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.locked-btn.primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.locked-btn.primary:hover { filter: brightness(1.08); }
.locked-btn.ghost { border: 1px solid var(--border); color: var(--text); }
.locked-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── Locked catalog ──────────────────────────────────────── */

.locked-panel {
  grid-column: 1 / -1;
  max-width: 460px;
  margin: 2.5rem auto;
  padding: 2.25rem 1.75rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.locked-icon {
  width: 34px;
  height: 34px;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.locked-panel h2 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.locked-panel p {
  margin: 0.5rem 0 1.35rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.locked-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.locked-btn {
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.locked-btn.primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.locked-btn.primary:hover { filter: brightness(1.08); }
.locked-btn.ghost { border: 1px solid var(--border); color: var(--text); }
.locked-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── 404 ─────────────────────────────────────────────────── */

.notfound-main {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 1.25rem 5rem;
}

.notfound-title {
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.94;
  margin: 0;
}

.notfound-lead {
  max-width: 440px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

.notfound-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; }


a.account-item { display: block; text-decoration: none; }
/* ── Consent checkboxes ──────────────────────────────────── */

.auth-consent {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.15rem;
}

.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  cursor: pointer;
}

.auth-check input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 0.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-check a { color: var(--text); text-decoration: underline; }
.auth-check a:hover { color: var(--accent); }

/* ── Field-level validation ──────────────────────────────── */

.auth-field-msg {
  display: none;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.3;
  color: var(--accent);
}

.auth-field-msg::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  /* Colour baked into the SVG (error text is always accent red), so no mask —
     a failed mask renders as a solid square, which is worse than no icon. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23be1e2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Shown by the error class, not by clearing [hidden]: the base rule above is
   display:none, which a plain `hidden=false` cannot override. */
.auth-field.has-error .auth-field-msg,
.auth-field-msg.show { display: flex; }

/* the terms message sits under the consent block, not inside an .auth-field */
#terms-msg { margin-top: 0.15rem; margin-left: 1.6rem; }

/* Border only — a filled field reads as loud and cheap when several show at
   once. The border and the message carry the signal. */
.auth-field.has-error input { border-color: var(--accent); }
.auth-field.has-error input:focus { box-shadow: 0 0 0 3px var(--accent-dim); }

.auth-check.has-error input {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 4px;
}

/* ── Email verification step ─────────────────────────────── */

#verify-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-verify-lead {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.auth-verify-lead strong { color: var(--text); }

.otp-inputs {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.otp-inputs input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.otp-inputs input:hover { border-color: var(--border-light); }

.otp-inputs input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* a filled box reads as "done" */
.otp-inputs input:not(:placeholder-shown),
.otp-inputs input[value]:not([value=""]) { border-color: var(--text); }

.auth-field.has-error .otp-inputs input { border-color: var(--accent); }

@media (max-width: 400px) {
  .otp-inputs { gap: 0.35rem; }
  .otp-inputs input { height: 48px; font-size: 1.25rem; }
}

.auth-verify-actions {
  margin-top: 1.1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}

.auth-link {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.auth-link:hover { filter: brightness(1.1); }
.auth-link:disabled { color: var(--muted-dim); cursor: default; text-decoration: none; }

/* Verify step + change-email screen */
.auth-verify-foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.8125rem;
}

/* back arrow on the change-email screen */
.auth-back {
  position: absolute;
  top: 1.4rem;
  left: 1.3rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  border-radius: 9px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.auth-back:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-light); }
.auth-back svg { width: 18px; height: 18px; }

#change-email-form { display: flex; flex-direction: column; gap: 1rem; }

/* ── Account / cabinet ──────────────────────────────────────────────────── */
.account-main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.6rem 1.5rem 4rem;
}

.account-page-head { margin: 0 0 1.6rem; }
.account-page-head h1 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.account-page-sub { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9rem; }

/* layout: side tabs + panels */
.account-layout { display: flex; gap: 2rem; align-items: flex-start; }

.account-tabs {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: sticky;
  top: 5.5rem;
}
.account-tab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.account-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.account-tab:hover { background: var(--surface-2); color: var(--text); }
.account-tab.active { background: var(--accent); color: #fff; }

.account-panels { flex: 1; min-width: 0; }
.account-panel { display: none; flex-direction: column; gap: 1.1rem; }
.account-panel.active { display: flex; }

.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.55rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.account-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
}
.account-card-note {
  margin: -0.55rem 0 1.1rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

.account-form { display: flex; flex-direction: column; gap: 1.05rem; }
/* Single-line fields shouldn't stretch the full width of a wide card. */
.account-form .auth-field { max-width: 560px; }
.account-code-input { max-width: 260px; }

/* read-only rows */
.account-static { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.05rem; }
.account-static:last-child { margin-bottom: 0; }
.account-static-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; }
.account-static-value { font-size: 0.92rem; font-weight: 600; word-break: break-all; }
.account-static-hint { font-size: 0.74rem; color: var(--muted); }
.account-tz-select { max-width: 320px; }

/* ── custom date picker (datepicker.js) ── */
input[data-datepicker] {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 15px 15px;
  padding-right: 1.95rem;
}
.cs-datepicker {
  margin: 0.55rem 0 0.15rem; padding: 0.6rem; width: 100%; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,0.12));
  font-size: 0.85rem; color: var(--text);
}
.cs-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem; }
.cs-dp-title { font-weight: 700; }
.cs-dp-nav {
  background: none; border: none; cursor: pointer; font-size: 1.15rem; line-height: 1;
  padding: 0.1rem 0.5rem; color: var(--text); border-radius: 7px;
}
.cs-dp-nav:hover { background: var(--surface-2); }
.cs-dp-nav.is-disabled, .cs-dp-nav[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }
.cs-dp-nav.is-disabled:hover, .cs-dp-nav[disabled]:hover { background: none; }
.cs-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cs-dp-wd span { text-align: center; font-size: 0.66rem; font-weight: 600; color: var(--muted); padding: 2px 0; }
.cs-dp-day {
  background: none; border: none; cursor: pointer; padding: 5px 0; border-radius: 7px;
  color: var(--text); font-size: 0.82rem;
}
.cs-dp-day:hover { background: var(--surface-2); }
.cs-dp-day.is-sel { background: var(--accent); color: #fff; font-weight: 700; }
.cs-dp-day.is-disabled { opacity: 0.28; cursor: default; pointer-events: none; }
.cs-dp-foot { margin-top: 0.45rem; text-align: right; }
.cs-dp-clear {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 0.76rem; font-weight: 600; padding: 0.2rem 0.35rem; border-radius: 6px;
}
.cs-dp-clear:hover { background: var(--surface-2); color: var(--text); }
.account-methods { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.account-method {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.78rem;
  font-weight: 600;
}

.account-form-foot { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.account-save { width: auto; padding-left: 1.4rem; padding-right: 1.4rem; }
.account-flash, .account-flash-line { font-size: 0.82rem; font-weight: 600; color: #16a34a; }
.account-flash-line { margin: 0; }

/* inline (secondary) buttons */
.account-inline-btn {
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.account-inline-btn:hover { border-color: var(--border-light); }
.account-inline-btn:disabled { opacity: 0.55; cursor: default; }
.account-inline-btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.account-inline-btn-quiet:hover { color: var(--text); border-color: transparent; }

/* email: current + Change */
.account-email-view { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.account-email-view .account-static { margin-bottom: 0; flex: 1; min-width: 0; }

.account-subflow { margin-top: 0.2rem; }
.account-subflow-note { margin: 0 0 0.4rem; font-size: 0.85rem; line-height: 1.55; color: var(--muted); }
.account-subflow-note strong { color: var(--text); }
.account-code-input { letter-spacing: 0.4em; font-weight: 700; font-size: 1.05rem; text-align: center; }

/* toggle switch */
.account-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  margin-top: 0.3rem;
}
.account-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.account-toggle-track {
  flex-shrink: 0;
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  transition: background 0.18s ease;
}
.account-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}
.account-toggle input:checked + .account-toggle-track { background: var(--accent); }
.account-toggle input:checked + .account-toggle-track .account-toggle-thumb { transform: translateX(17px); }
.account-toggle input:focus-visible + .account-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-toggle-label { font-size: 0.88rem; font-weight: 600; }

/* billing */
.account-plan { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.account-plan-info { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.account-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}
.account-plan-price { font-size: 0.95rem; font-weight: 700; }
.account-plan-status { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--muted); }
.account-plan-cta {
  flex-shrink: 0;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.account-plan-cta:hover { border-color: var(--border-light); }

.account-empty-row { display: flex; align-items: flex-start; gap: 0.8rem; }
.account-empty-row p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--muted); }
.account-badge-dev {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* sign out */
.account-signout-row { margin-top: 1.8rem; text-align: center; }
.account-signout {
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
.account-signout:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 720px) {
  .account-layout { flex-direction: column; gap: 1rem; }
  .account-tabs {
    position: static;
    flex-direction: row;
    flex: 0 0 auto;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }
  .account-tab { flex: 1; justify-content: center; }
}
@media (max-width: 520px) {
  .account-main { padding-top: 1.8rem; }
  .account-card { padding: 1.2rem 1.15rem 1.3rem; }
  .account-plan-cta { width: 100%; text-align: center; }
  .account-tab span, .account-tab { font-size: 0.85rem; }
}

/* ── Sold history ───────────────────────────────────────────────────────── */
.sold-main { max-width: 1200px; margin: 0 auto; padding: 2.4rem 1.5rem 4rem; }
.sold-head { margin: 0 0 1.4rem; }
.sold-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.sold-sub { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9rem; }

.sold-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1.4rem; }
.sold-input { height: 40px; padding: 0 0.8rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.9rem; flex: 1 1 220px; min-width: 160px; }
.sold-input:focus { outline: none; border-color: var(--accent); }
.sold-input-sm { flex: 0 1 160px; }
.sold-input-xs { flex: 0 1 100px; min-width: 80px; }
.sold-apply { height: 40px; padding: 0 1.3rem; border: none; border-radius: 9px; background: var(--accent); color: #fff; font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.sold-apply:hover { filter: brightness(1.05); }
.sold-reset { height: 40px; padding: 0 0.9rem; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--muted); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.sold-reset:hover { color: var(--text); }

.sold-status { margin: 0 0 1rem; font-size: 0.88rem; color: var(--muted); font-weight: 600; }

.sold-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sold-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 1rem 1.1rem 1.05rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); }
.sold-card-top { display: flex; align-items: start; justify-content: space-between; gap: 0.6rem; }
.sold-card-title { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.sold-badge { flex-shrink: 0; padding: 0.16rem 0.5rem; border-radius: 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.sold-badge-copart { background: #eaf5ea; color: #1c7a34; border-color: #cfe8cf; }
.sold-badge-iaai { background: #eef1fb; color: #2d47b5; border-color: #d6ddf6; }
.sold-card-price { margin-top: 0.7rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.sold-card-sold { font-size: 0.74rem; font-weight: 700; color: #16a34a; letter-spacing: 0.01em; }
.sold-card-meta { margin-top: 0.4rem; font-size: 0.82rem; color: var(--muted); }
.sold-card-vin { margin-top: 0.5rem; font-size: 0.74rem; color: var(--muted); font-family: 'SF Mono', Menlo, Consolas, monospace; word-break: break-all; }
.sold-empty { grid-column: 1 / -1; padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: 0.92rem; }
.sold-more-row { text-align: center; margin-top: 1.6rem; }
.sold-more { padding: 0.7rem 1.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.sold-more:hover { border-color: var(--accent); color: var(--accent); }
.sold-more:disabled { opacity: 0.5; cursor: default; }
:root[data-theme="dark"] .sold-badge-copart { background: rgba(28,122,52,0.18); color: #6fd98a; border-color: rgba(28,122,52,0.35); }
:root[data-theme="dark"] .sold-badge-iaai { background: rgba(45,71,181,0.20); color: #9fb0f0; border-color: rgba(45,71,181,0.4); }

/* ── Sold history · card with photo ─────────────────────────────────────── */
.sold-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sold-card-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.sold-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sold-card.no-photo .sold-card-img { display: none; }
.sold-card.no-photo .sold-card-photo::after {
  content: "No photo";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.8rem; font-weight: 600; opacity: 0.6;
}
.sold-card-photo .sold-badge {
  position: absolute; top: 0.6rem; right: 0.6rem;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(2px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.sold-card-body { padding: 0.85rem 1.05rem 1rem; }
.sold-card-body .sold-card-title { display: block; margin-bottom: 0.15rem; }
:root[data-theme="dark"] .sold-card-photo .sold-badge { background: rgba(20,24,33,0.85); }

/* ── Sold lot detail ────────────────────────────────────────────────────── */
.sold-detail-main { max-width: 1200px; margin: 0 auto; padding: 1.6rem 1.5rem 4rem; }
.sold-detail-back {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--muted); font-size: 0.88rem; font-weight: 600; text-decoration: none; margin-bottom: 1.1rem;
}
.sold-detail-back:hover { color: var(--accent); }

.sold-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 1.8rem; align-items: start; }
.sold-detail-gallery { min-width: 0; }
.sold-detail-stage {
  aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--border);
}
.sold-detail-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sold-detail-stage.no-photo::after { content: "No photo"; display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); }
.sold-detail-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.sold-detail-thumb { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 4 / 3; }
.sold-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sold-detail-thumb.is-active { border-color: var(--accent); }

.sold-detail-info { min-width: 0; }
.sold-detail-info .sold-badge { position: static; }
.sold-detail-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.6rem 0 1rem; line-height: 1.2; }
.sold-detail-pricecard {
  display: flex; gap: 1.5rem; align-items: baseline; flex-wrap: wrap;
  padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 1.2rem;
}
.sold-detail-price-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sold-detail-price-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.sold-detail-soldon-value { font-size: 1rem; font-weight: 700; color: #16a34a; }

.sold-detail-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1.2rem; margin: 0; }
.sold-detail-spec { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.sold-detail-spec dt { color: var(--muted); font-size: 0.85rem; }
.sold-detail-spec dd { margin: 0; font-size: 0.85rem; font-weight: 600; text-align: right; word-break: break-word; }

.sold-detail-calc { margin-top: 1.6rem; padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sold-detail-calc-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.2rem; }
.sold-detail-calc-note { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.7rem; }

.sold-detail-missing { max-width: 560px; margin: 3rem auto; text-align: center; }
.sold-detail-missing h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.6rem; }
.sold-detail-missing p { color: var(--muted); margin: 0 0 1.4rem; }

@media (max-width: 820px) {
  .sold-detail { grid-template-columns: 1fr; gap: 1.2rem; }
  .sold-detail-specs { grid-template-columns: 1fr; }
}

/* ── Sold lot detail (reuses the live .lot-* layout) — status pill on the
   final-price hero, replacing the live page's estimated-bid range. ── */
.lot-price-card--sold .lot-price-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
/* Breakdown rows (Final price / Buyer fees): spaced, aligned rows with a divider
   line BETWEEN them (same style as the delivery section) — not crammed, and no
   line under the total. */
.lot-price-card--sold .lot-price-breakdown--compact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.1rem;
}
.lot-price-card--sold .lot-price-breakdown--compact .lot-price-breakdown__col {
  align-items: center;
}
.lot-price-card--sold .lot-price-breakdown--compact .lot-price-breakdown__col + .lot-price-breakdown__col {
  padding-top: 0.4rem;
  border-top: 1px solid color-mix(in srgb, #93c5fd 32%, var(--border-light));
}
.lot-price-card--sold .lot-price-breakdown--compact dd {
  font-size: 0.96rem;
}
.sold-status-pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.34em 0.72em; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent;
}
.sold-status-pill::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: currentColor; opacity: 0.9;
}
.sold-status-pill--sold {
  color: #157347; background: rgba(25, 135, 84, 0.12); border-color: rgba(25, 135, 84, 0.25);
}
.sold-status-pill--approval {
  color: #9a6700; background: rgba(201, 152, 0, 0.14); border-color: rgba(201, 152, 0, 0.3);
}
.sold-status-pill--other {
  color: var(--muted); background: rgba(120, 120, 120, 0.14); border-color: rgba(120, 120, 120, 0.28);
}
.sold-status-pill--buynow {
  color: #157347; background: rgba(25, 135, 84, 0.12); border-color: rgba(25, 135, 84, 0.25);
}
.sold-status-pill--notsold {
  color: #b42318; background: rgba(180, 35, 24, 0.10); border-color: rgba(180, 35, 24, 0.26);
}
[data-theme="dark"] .sold-status-pill--sold { color: #4ade80; background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.32); }
[data-theme="dark"] .sold-status-pill--approval { color: #fbbf24; background: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.32); }
[data-theme="dark"] .sold-status-pill--buynow { color: #4ade80; background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.32); }
[data-theme="dark"] .sold-status-pill--notsold { color: #f87171; background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.30); }

/* Sales history — sold lot detail page: scannable list of every auction
   appearance of this VIN (own runs + cross-linked other lots) */
.sold-hist {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 14px;
}
/* ── Історія ціни Buy Now ───────────────────────────────────────────────── */
/* Рядок чисел над графіком: Now / Lowest / Highest / Changes. Той самий жанр,
   що й у трекерів цін — поточну ціну треба читати ВІДНОСНО розмаху, а не саму
   по собі. */
.ph-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 2px 10px;
}
.ph-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ph-stat__cap {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ph-stat__val {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ph-stat__sub { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
/* Поле наведення: курсор має підказувати, що графік відповідає на рух миші. */
.sold-hist-chart .ph-hit { cursor: crosshair; }
/* Поточна ціна — помітніша за решту крапок: її шукають першою. */
.sold-hist-chart .ph-dot--now { stroke-width: 2.5; }
@media (max-width: 560px) {
  .ph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.7rem; }
}

/* Коротке підсвічування секції після переходу зі значка в картці Buy Now:
   на довгій сторінці інакше незрозуміло, куди саме нас привели. */
.sold-hist--flash { animation: soldHistFlash 1.2s ease-out; }
@keyframes soldHistFlash {
  0%   { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sold-hist--flash { animation: none; }
}
.sold-hist__head { display: flex; align-items: center; gap: 10px; margin: 2px 6px 12px; }
.sold-hist__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--accent-dim); color: var(--accent);
}
.sold-hist__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.sold-hist__count { color: var(--muted); font-weight: 600; }
.sold-hist__body { padding: 0 2px; }
.sold-hist-sep { opacity: 0.5; margin: 0 1px; }

/* Price-trajectory chart (interactive) */
.sold-hist-chart-wrap { position: relative; margin: 2px 0 4px; }
.shc-legend { display: flex; gap: 18px; margin: 0 6px 2px; font-size: 0.78rem; color: var(--muted); }
.shc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.shc-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sold-hist-chart { width: 100%; height: auto; display: block; touch-action: none; }
.sold-hist-chart text, .sold-hist-chart .shc-ax { fill: var(--muted); font-size: 10.5px; font-family: inherit; font-weight: 500; }
.sold-hist-chart .shc-grid { stroke: var(--border); stroke-width: 1; }
.sold-hist-chart .shc-dot { stroke: var(--surface); stroke-width: 1.5; paint-order: stroke; }
.sold-hist-chart .shc-dot--big { stroke-width: 2; }
/* Selection / hover ring: theme-aware outline (near-black on light, near-white on
   dark) so it reads as a crisp "current point" marker against any status colour,
   instead of blending into the same-coloured dot. */
.sold-hist-chart .shc-selected,
.sold-hist-chart .shc-active { stroke: var(--text); }
.sold-hist-chart .shc-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.5; }
.shc-tip {
  position: absolute; z-index: 6; pointer-events: none;
  background: #fbfcfe; border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 9px; padding: 12px 15px 13px; white-space: nowrap; min-width: 152px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.32);
}
.shc-tip::after {
  content: ""; position: absolute; left: var(--shc-arrow, 50%); bottom: -6px;
  width: 11px; height: 11px; background: #fbfcfe;
  border-right: 1px solid rgba(17, 24, 39, 0.1);
  border-bottom: 1px solid rgba(17, 24, 39, 0.1);
  transform: translateX(-50%) rotate(45deg);
}
.shc-tip--below::after {
  bottom: auto; top: -6px;
  border-right: none; border-bottom: none;
  border-left: 1px solid rgba(17, 24, 39, 0.1);
  border-top: 1px solid rgba(17, 24, 39, 0.1);
}
.shc-tip__top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.shc-tip__pill {
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.3em 0.7em; border-radius: 999px; line-height: 1.3;
}
.shc-tip__pill::before {
  content: ""; display: inline-block; width: 0.46em; height: 0.46em; border-radius: 50%;
  background: currentColor; margin-right: 0.46em; vertical-align: 0.06em;
}
.shc-tip__when { color: #5b6472; font-size: 0.84rem; font-weight: 600; }
.shc-tip__price {
  font-weight: 800; color: #0f1729; font-size: 1.45rem; line-height: 1.05;
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
}
.shc-tip__meta {
  color: #475264; font-size: 0.86rem; font-weight: 500;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(17, 24, 39, 0.09);
}

/* Selected-appearance card — updates when a chart point is clicked */
.shc-detail {
  margin: 12px 4px 8px; padding: 12px 15px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.shc-detail__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shc-detail__price { font-size: 1.35rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.shc-detail__date { color: var(--muted); font-size: 0.9rem; margin-left: auto; white-space: nowrap; }
.shc-detail__meta { margin-top: 6px; color: var(--muted); font-size: 0.84rem; }
.shc-detail__link { color: var(--accent); font-weight: 700; text-decoration: none; }
.shc-detail__link:hover { text-decoration: underline; }
.shc-cap { margin: 6px; color: var(--muted); font-size: 0.82rem; }
.shc-cap b { color: var(--text); font-weight: 700; }

/* Summary "story" line */
.sold-hist-sum {
  margin: 8px 4px 16px; padding: 11px 14px; border-radius: 12px;
  background: var(--surface-2); color: var(--muted); font-size: 0.9rem; line-height: 1.5;
}
.sold-hist-sum b { color: var(--text); font-weight: 700; }
.sold-hist-sum b.sold { color: var(--green); }

/* One merged, date-sorted list of every appearance */
.sold-hist-rows { display: flex; flex-direction: column; }
.sold-hist-rows.is-collapsed .sold-hist-r.is-extra { display: none; }
.sold-hist-r {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 8px; border-radius: 11px; text-decoration: none; color: inherit;
}
.sold-hist-r + .sold-hist-r::before {
  content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--border);
}
.sold-hist-r__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.sold-hist-r__dot--sold { background: var(--green); }
.sold-hist-r__dot--notsold { background: var(--accent); }
.sold-hist-r__dot--approval { background: var(--amber); }
.sold-hist-r__dot--buynow { background: #60a5fa; }
.sold-hist-r__when { flex: none; min-width: 130px; }
.sold-hist-r__day { font-weight: 700; color: var(--text); font-size: 0.9rem; }
.sold-hist-r__time { color: var(--muted); font-size: 0.76rem; margin-left: 5px; }
.sold-hist-r__price { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; flex: none; min-width: 74px; }
.sold-hist-r__meta {
  flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 0.83rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sold-hist-r__meta .lot { color: inherit; }
.sold-hist-r__go { color: var(--muted); flex: none; transition: transform .15s ease, color .15s ease; }
.sold-hist-r.is-link { cursor: pointer; }
.sold-hist-r.is-link .lot { color: var(--accent); font-weight: 700; }
.sold-hist-r.is-link:hover { background: var(--surface-2); }
.sold-hist-r.is-link:hover .sold-hist-r__go { color: var(--accent); transform: translateX(2px); }

.sold-hist-more {
  margin-top: 12px; width: 100%; padding: 10px; border-radius: 11px;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font: inherit; font-weight: 600; font-size: 0.86rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.sold-hist-more:hover { background: var(--surface-2); color: var(--text); }

@media (max-width: 560px) {
  .sold-hist-r { gap: 9px; padding: 12px 6px; }
  .sold-hist-r__when { min-width: 108px; }
  .sold-hist-r__meta { display: none; }
}

/* Global-search Sold-history results section (browse.html, scope=all) */
.sold-matches { margin-top: 8px; padding-bottom: 52px; }
.sold-matches__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 0 0 22px; padding-top: 26px; border-top: 1px solid var(--border);
}
.sold-matches__title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.sold-matches__count { color: var(--muted); font-weight: 600; }
.sold-matches__all { color: var(--accent); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.sold-matches__all:hover { text-decoration: underline; }

.lot-main-media--empty {
  width: 100%; aspect-ratio: 4 / 3; border-radius: inherit;
  background: repeating-linear-gradient(45deg, rgba(128,128,128,0.06) 0 12px, rgba(128,128,128,0.11) 12px 24px);
}

/* Sold actions: no big "Open on …" button — a compact brand link to the
   auction instead (replaces the live page's full-width CTA + the auction row). */
.lot-actions--sold { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; }
.sold-auction-link {
  display: inline-flex; align-items: center; gap: 0.42em;
  padding: 0.42em 0.95em; border-radius: 10px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
  color: #fff; text-decoration: none; border: 1px solid transparent;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.sold-auction-link:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sold-auction-link__icon { opacity: 0.92; }
.sold-auction-link--copart { background: #16467e; }
.sold-auction-link--iaai { background: #c8102e; }


/* Панелі даних лота з'являються ПЛАВНО вже готовими, а не спалахують empty→content
   під час поетапного складання сторінки. Ховаємо, поки не проставлено data-lot-ready
   (ставить lot-instant.js після відмальовки; у lot.html є безпечний 3с-таймаут). */
/* Поки не прийшли СВІЖІ дані з API (data-lot-fresh) — ховаємо панелі даних лота
   (visibility зберігає місце → без стрибка розкладки; opacity тут не працює через
   анімацію появи з fill-mode:forwards). Так старі дані з кешу/прев'ю НЕ показуються —
   панелі з'являються одразу фінальними. */
html:not([data-lot-fresh]) .lot-summary,
html:not([data-lot-fresh]) .lot-details-col {
  visibility: hidden;
}


/* ── Рядок Location → модальне вікно майданчика ────────────────────────────
   Було наведення з підказкою; стало клік і вікно по центру — так воно вміщує
   адресу, графік і кнопки, працює на телефоні й не зникає, поки ведеш курсор. */
/* Клікабельні рядки деталей: майданчик і дата торгів. Вигляд спільний, щоб
   вони поводились однаково — підсвічується і значок, і текст. */
.lot-yard,
.lot-cal {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.15s ease;
}
/* Майданчик — фірмовим червоним; дата — синім. Різні кольори тут навмисно:
   дії різні за суттю (відкрити картку майданчика проти додати в календар), і
   синій відрізняє її від решти червоних акцентів сторінки. */
.lot-yard:hover, .lot-yard:focus-visible { color: var(--accent); }
.lot-cal:hover, .lot-cal:focus-visible { color: #0064e0; }
/* Значок усередині має свій колір (.lot-vd-row__icon { color: var(--muted) }),
   і успадкування його не бере — через це підсвічувався лише текст. */
.lot-yard:hover .lot-vd-row__icon, .lot-yard:focus-visible .lot-vd-row__icon,
.lot-cal:hover .lot-vd-row__icon, .lot-cal:focus-visible .lot-vd-row__icon { color: inherit; }
.lot-yard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lot-cal:focus-visible { outline: 2px solid #0064e0; outline-offset: 3px; }

.cs-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.cs-modal[hidden] { display: none; }

.cs-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 15, 22, 0.55);
  animation: cs-fade-in 0.18s ease;
}

.cs-modal__card {
  position: relative;
  width: min(400px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: cs-modal-in 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes cs-fade-in { from { opacity: 0; } }
@keyframes cs-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

/* Шапка з роздільником — заголовок не зливається зі змістом. */
.cs-modal__title {
  margin: 0;
  /* Заголовок по ЦЕНТРУ (як у фейсбуку); однакові відступи з обох боків, щоб
     хрестик праворуч не зміщував текст. */
  text-align: center;
  padding: 1rem 3.1rem 0.9rem;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.cs-modal__body { padding: 0.95rem 0.9rem 0.9rem; }

.cs-modal__x {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-modal__x:hover { background: var(--surface-2); color: var(--text); }
body.cs-modal-open { overflow: hidden; }

/* Пари «підпис — значення»: підпис приглушений, значення веде. */
.yard-rows { display: flex; flex-direction: column; }
.yard-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.yard-row:last-child { border-bottom: 0; }
.yard-row__k { flex: 0 0 5.5rem; font-size: 0.75rem; color: var(--muted); }
.yard-row__v { flex: 1; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }

.yard-warn {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}
.yard-note { margin: 0.9rem 0 0; font-size: 0.74rem; line-height: 1.45; color: var(--muted); }

.yard-actions { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.yard-btn {
  flex: 1;
  padding: 0.68rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.yard-btn:hover { border-color: var(--accent); color: var(--accent); }
.yard-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.yard-btn--primary:hover { filter: brightness(1.07); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cs-modal__card, .cs-modal__backdrop { animation: none; }
}


/* ── Кнопка «Location» + вікно вибору місця ────────────────────────────────
   Був список штатів зі стрілкою й крапкою-індикатором. Тепер це кнопка, що
   відкриває вікно: місто/індекс + радіус. Без стрілки — вона обіцяла випадний
   список, а відкривається вікно. */
/* Розміри точно як у сусідніх фільтрів (.browse-select-trigger) — інакше кнопка
   вибивалась із ряду: була вища й з іншим шрифтом. */
.browse-locbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.browse-locbtn:hover { border-color: var(--border-light); background: var(--surface-2); }
.browse-locbtn__pin { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.browse-locbtn:hover .browse-locbtn__pin { color: var(--text); }

.browse-locbtn.is-active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.browse-locbtn.is-active .browse-locbtn__pin { color: var(--accent); }

.loc-hint { margin: 0 0 0.85rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }

/* Поле як у фейсбуці: одна рамка, підпис дрібним зверху, значення під ним. */
.loc-field {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.loc-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.loc-field__pin { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); }
.loc-field__wrap { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.loc-field__k { font-size: 0.7rem; font-weight: 500; color: var(--muted); }
.loc-field__input {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
}
.loc-field__input:focus { outline: none; }
select.loc-field__input { cursor: pointer; }

.loc-status { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--muted); }

/* Підвал із роздільником і дією праворуч — як у фейсбуці. */
.loc-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0.9rem -0.9rem -0.9rem;
  padding: 0.8rem 0.9rem;
  border-top: 1px solid var(--border);
}
.loc-foot .yard-btn { flex: 0 0 auto; min-width: 7rem; }
/* Apply — синій, як у фейсбуку (у них #0064e0); Clear — червоний, бо скидає
   вибір. Колір задано лише в цьому вікні, глобальний --accent не чіпаємо. */
.loc-foot .yard-btn--primary {
  background: #0064e0;
  border-color: #0064e0;
  color: #fff;
}
.loc-foot .yard-btn--primary:hover { background: #0a72f5; border-color: #0a72f5; color: #fff; }
.loc-foot .yard-btn--danger {
  background: transparent;
  border-color: #e0455a;
  color: #e0455a;
}
.loc-foot .yard-btn--danger:hover { background: #e0455a; border-color: #e0455a; color: #fff; }


/* ── Карта у вікні вибору місця ────────────────────────────────────────────
   MapLibre + тайли OpenFreeMap. Рушій вантажиться лише при відкритті вікна. */
/* 545 = 516 карти + 2x14.4 внутрішніх відступів картки (0.9rem) */
.cs-modal__card--wide { width: min(545px, 100%); }

.loc-map {
  position: relative;
  /* 516x308 — рівно розмір карти у фейсбуку (видно з їхнього запиту static_map).
     Важливо памʼятати: їхній static_map рахує зум по тайлах 256px, а MapLibre по
     512px, тож при однаковому номері зуму наш кадр удвічі тісніший. Ширшою
     картою це компенсувати не можна — розмір вікна узгоджений. */
  width: 100%;
  max-width: 516px;
  height: min(308px, 46vh);
  min-height: 240px;
  margin-top: 0.15rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
/* Карта майданчика у вікні лота. Та сама карта, що й у «Change location» —
   стиль, щити трас і значки місць спільні (web/cs-map.js). Висота менша: тут
   не треба вміщати коло радіуса, досить показати, де це місто.

   Зум навмисно НЕ близький: координати зі стрічки — рівня міста, і на
   крупному плані шпилька стояла б на випадковій будівлі. Точна адреса
   відкривається в Maps — саме для цього поруч кнопка. */
.yard-map {
  /* Той самий розмір, що й карта у вікні «Change location»: 516x308 — рівно
     кадр фейсбучного static_map, під який доводився стиль. Менша карта (190px)
     на далекому плані читалась гірше: назви штатів і міст у неї не вміщались. */
  width: 100%;
  max-width: 516px;
  height: min(308px, 46vh);
  min-height: 240px;
  margin: 0 0 0.85rem;
}

.cs-map {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.cs-map .maplibregl-ctrl-attrib { font-size: 10px; }
/* Значок атрибуції — маленький білий кружечок із чорною «i», як у фейсбуку.
   Сам блок прибирати НЕ можна: ODbL OpenStreetMap і умови OpenFreeMap вимагають
   вказання авторства.

   MapLibre малює свій значок псевдоелементом `:after` НА КОНТЕЙНЕРІ, а клікати
   треба по <summary> під ним. Через це другий клік не згортав назад — курсор
   потрапляв у псевдоелемент. Тому: `:after` гасимо, а кружечком робимо саме
   <summary> — він і показує «i», і приймає клік у обидва боки. */
.cs-map .maplibregl-ctrl-attrib.maplibregl-compact {
  margin: 8px;
  padding: 0;
  min-height: 20px;
  border-radius: 999px;
  background: transparent;
  /* row-reverse: <summary> у розмітці перший, але кнопка мусить лишатись
     ПРАВОРУЧ — і згорнутою, і розгорнутою, щоб згортати кліком у те саме
     місце. Блок притиснутий до правого нижнього кута, тож текст росте вліво. */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
}
.cs-map .maplibregl-ctrl-attrib.maplibregl-compact::after { display: none; }
.cs-map .maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23111' d='M9 4.6h2v2.1H9zm0 3.5h2v7.3H9z'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.cs-map .maplibregl-ctrl-attrib.maplibregl-compact-show {
  padding: 2px 2px 2px 8px;
  background: rgba(255, 255, 255, 0.92);
}
.cs-map .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
  background-color: #f0f0f0;
}
.cs-map .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { display: block; }
.cs-map .maplibregl-ctrl-bottom-right { margin: 0; }

/* Кнопки + / − у лівому нижньому куті карти. Базовий вигляд MapLibre (білий
   блок із тінню) на темній карті читається добре, правимо лише відступ і
   заокруглення, щоб вони не впирались у край і збігались із кружечком «i»
   навпроти. */
.cs-map .maplibregl-ctrl-bottom-left { margin: 0; }
.cs-map .maplibregl-ctrl-bottom-left .maplibregl-ctrl-group {
  margin: 8px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.cs-map .maplibregl-ctrl-bottom-left .maplibregl-ctrl-group button {
  width: 26px;
  height: 26px;
}

/* Підказки: список під полем, як у фейсбуці. */
.loc-suggest {
  margin: -0.35rem 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
}
.loc-sug {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.loc-sug:last-child { border-bottom: 0; }
.loc-sug:hover { background: var(--surface-2); }
.loc-sug__name { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.loc-sug__meta { font-size: 0.75rem; color: var(--muted); }
/* Пояснення замість порожнього списку: місце є, але не в наших країнах. */
.loc-sug__note { margin: 0; padding: 12px 14px; font-size: 0.8125rem;
                 color: var(--muted); }

/* Підказка поверх карти, поки місце не обране — інакше зміна радіуса виглядає
   так, ніби карта не реагує. */
.loc-map__hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(20, 24, 33, 0.82);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.loc-map__hint[hidden] { display: none; }

/* ── Сердечко «Watchlist» ───────────────────────────────────────────────────
   Два місця, один вигляд: угорі праворуч на фото картки у списку і в
   підсумковій картці лота. Розмітку дає web/saved.js, тому клас один.
   На фото потрібна власна підкладка — знімок під нею може бути і світлим,
   і темним, а контур сердечка мусить читатись на обох. */
.cs-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 20, 28, 0.42);
  backdrop-filter: blur(2px);
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}
.cs-heart svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Тінь під контуром — щоб біле сердечко читалось і на світлому знімку. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
/* Наведення НЕ темнить підкладку: було rgba(...,0.62), і на темному фото
   контур сердечка тонув у майже чорному колі — виглядало так, ніби значок
   зникає. Реагуємо збільшенням, а плашку робимо трохи СВІТЛІШОЮ. */
.cs-heart:hover { background: rgba(16, 20, 28, 0.34); transform: scale(1.09); }
.cs-heart:active { transform: scale(0.94); }
.cs-heart:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Збережене — залите червоним, як у маркетплейсах. */
.cs-heart.is-saved { color: #f3536a; }
.cs-heart.is-saved svg { fill: #f3536a; stroke: #f3536a; }

/* Варіант у підсумковій картці лота: підкладка не потрібна — фон рівний. */
.cs-heart--panel {
  top: 1.15rem;
  right: 1.15rem;
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  color: var(--muted);
  backdrop-filter: none;
}
.cs-heart--panel:hover { background: var(--surface-2); color: var(--text); }
.cs-heart--panel.is-saved,
.cs-heart--panel.is-saved:hover { color: #f3536a; }
/* Заголовок не має заповзати під кнопку. */
.lot-summary-inner .lot-detail-title { padding-right: 2.9rem; }


/* ── Режим «Watchlist» (browse.html?watchlist=1) ────────────────────────────
   Вигляд НЕ відрізняється від звичайного списку: та сама панель фільтрів, той
   самий сайдбар. Спершу я їх ховав — сторінка виглядала обрізаною й порожньою.
   Тепер фільтри реально працюють (saved=1 на бекенді це просто ще один фільтр),
   тож ховати нема чого. Клас лишається для дрібних відмінностей за потреби. */


/* ── Кнопка «моє місцезнаходження» на карті ─────────────────────────────────
   Вигляд знятий із фейсбуку: білий заокруглений квадрат зі суцільною чорною
   стрілкою, угорі праворуч. Скидаємо оформлення групи MapLibre, бо воно дає
   свою рамку й радіус. */
.loc-map .cs-geo-ctrl.maplibregl-ctrl-group {
  margin: 10px;
  border-radius: 12px;
  background: none;
  box-shadow: none;
  border: 0;
}
.loc-map .cs-geo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.loc-map .cs-geo-btn svg { width: 22px; height: 22px; fill: #111; }
/* Селектори з .cs-geo-ctrl НЕ для краси: MapLibre має
   `.maplibregl-ctrl button:not(:disabled):hover {background-color: rgba(0,0,0,.05)}`
   зі специфічністю (0,3,1) — воно перебивало `.loc-map .cs-geo-btn:hover` (0,3,0)
   і на наведенні знімало білу заливку. Кнопка ставала напівпрозорою й зникала
   на темній карті. Третій клас дає (0,4,0) і виграє. */
.loc-map .cs-geo-ctrl .cs-geo-btn:hover { background: #f2f3f5; }
.loc-map .cs-geo-ctrl .cs-geo-btn:active { background: #e8eaed; transform: scale(0.95); }
.loc-map .cs-geo-ctrl .cs-geo-btn:focus-visible { outline: 2px solid #0064e0; outline-offset: 2px; }
/* Поки браузер питає дозвіл і шукає — кнопка пульсує, інакше здається, що клік
   не спрацював (визначення може тривати кілька секунд). */
.loc-map .cs-geo-btn.is-busy { animation: cs-geo-pulse 1s ease-in-out infinite; }
@keyframes cs-geo-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .loc-map .cs-geo-btn.is-busy { animation: none; opacity: 0.6; }
}

/* ── Кнопка «нагадати про торги» ────────────────────────────────────────────
   Живе в тому самому слоті, що й декоративні значки рядка (шпилька локації),
   тож успадковує від .lot-vd-row__icon розмір і колір. Тут лишається тільки
   те, що робить її кнопкою. */
/* .lot-cal оформлюється разом із .lot-yard — див. вище. */

/* Вікно «Remind me». Головне тут — КОЛИ; що за машина, видно на сторінці під
   вікном, тому назву не повторюємо. Кожен рядок каже, що станеться після
   натискання, — це знімає потребу в окремому абзаці пояснень. */
.cal-when {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.cal-alerts {
  margin: 0.2rem 0 1rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.cal-choices {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.cal-choices button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.cal-choices button:last-child { border-bottom: 0; }
.cal-choices button:hover { background: var(--surface-2); }
.cal-choices button small { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.cal-note { margin: 0.75rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }


/* ── Підписка на календарну стрічку (налаштування акаунта) ──────────────────*/
.cal-sub { display: flex; gap: 0.5rem; align-items: center; margin: 0.15rem 0 0.6rem; }
.cal-sub__url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}
.cal-sub__actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.7rem; }
/* .yard-btn має flex:1 — у цьому рядку кнопка через це займала всю ширину. */
.cal-sub__actions .yard-btn { flex: 0 0 auto; min-width: 9.5rem; }
.cal-sub__actions .yard-btn--primary { background: #0064e0; border-color: #0064e0; color: #fff; }
.cal-sub__actions .yard-btn--primary:hover { background: #0a72f5; border-color: #0a72f5; color: #fff; }


/* Поради під адресою стрічки: список, а не суцільний абзац — кроки для Apple
   мають читатись як кроки. */
.cal-tips {
  margin: 0;
  padding-left: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}
.cal-tips strong { color: var(--text); font-weight: 600; }
.cal-tips em { font-style: normal; font-weight: 600; }

/* ── Перегляд фото лота у вікні ────────────────────────────────────────────
 * Картка по центру екрана поверх затемненої сторінки. Саме вікно, а не
 * повноекранна заливка: видно межі перегляду, видно, що сторінка нікуди не
 * поділась, і зрозуміло, куди тицьнути, щоб закрити.
 *
 * `position: fixed` рахується від вікна браузера, тож картка стоїть по центру
 * екрана незалежно від того, наскільки сторінка прокручена. */
.lot-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ПОЛІВ НЕМАЄ. Вони забирали 80px висоти, а висота тут — єдине, що
   * вирішує: знімки з аукціонів 4:3, екрани ширші, тож по вертикалі
   * місця завжди менше. Кожен піксель поля — це піксель, якого немає в
   * машині. Кнопки лежать поверх знімка й своїх полів не потребують. */
  padding: 0;
  /* Суцільний темний фон, БЕЗ розмивання сторінки під ним.
   *
   * Розмитий фон виглядав краще, але коштував надто дорого: щоб його зробити,
   * браузер мусить малювати всю сторінку під накладкою і щоразу перераховувати
   * розмиття — при масштабуванні фото це давало помітні ривки. Сторінку ми
   * тепер не малюємо взагалі, тож і розмивати нема чого. Темний непрозорий фон
   * читається як навмисний, а не як порожнеча. */
  background: #0c0f15;
  cursor: zoom-out;
}

/* Вище за липку шапку (z-index 500): модальне вікно мусить накривати сторінку
   ПОВНІСТЮ, інакше шапка висить поверх фото й виглядає як збій. */
.lot-lightbox { z-index: 600; }

.lot-lightbox[hidden] { display: none; }

.lot-lightbox__card {
  position: relative;
  display: flex;
  /* Картка по розміру знімка, але не більша за екран.
   *
   * ТУТ СТОЯЛА СТЕЛЯ 1200px — і на широкому моніторі фото займало ледь
   * половину екрана, а решта лишалась чорною. Стеля була не потрібна: розмір
   * і так обмежений вікном, а знімки з аукціонів приходять по 1600–2048 px
   * завширшки, тобто ми самі обрізали те, що є.
   *
   * Межа тепер одна — саме вікно. Угору понад власний розмір знімок НЕ
   * розтягуємо: кожен зайвий піксель там це не деталі, а розмиття. */
  max-width: 100%;
  max-height: 100%;
  /* РАМКИ НЕМАЄ. Світла оправа з тінню читалась як «вікно з фотографією» —
   * саме вона й створювала відчуття, що знімок не на весь екран, навіть
   * коли місця довкола лишалось обмаль. Тепер знімок торкається верху й
   * низу, а темне поле обабіч читається як звичайне поле переглядача. */
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
  animation: lot-lightbox-in 0.16s ease-out;
}

@keyframes lot-lightbox-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lot-lightbox__card { animation: none; }
}

.lot-lightbox__img {
  display: block;
  /* ВИСОТА ВІКНА — ЗАВЖДИ, а не «не більше за вікно».
   *
   * `max-height` лише обмежує: знімок, менший за екран, лишався свого
   * розміру й висів посеред чорного. На активних лотах це непомітно (там
   * 2576 px), а в архіві джерело буває дрібнішим — і та сама сторінка
   * виглядала по-різному залежно від лота, що й читається як поломка.
   *
   * Тепер знімок завжди по висоті вікна. Дрібне джерело стане м'якшим — але
   * різкості там і не було, її нізвідки взяти: проксі вміє лише зменшувати
   * (web_api/media.py, _downscale_image), а не домальовувати.
   *
   * `max-width` + `contain` — запобіжник для панорамних пропорцій: без них
   * надширокий знімок вилазив би за екран, а з жорсткою висотою ще й
   * розтягнувся б. */
  height: 100vh;
  width: auto;
  max-width: 100vw;
  object-fit: contain;
  border-radius: 0;
}

.lot-lightbox__x,
.lot-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.lot-lightbox__card:focus { outline: none; }

.lot-lightbox__x {
  top: 1.1rem;
  right: 1.1rem;
  /* Без світлої рамки: на хрестику вона читалась як кільце навколо кнопки. */
  border-color: transparent;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.35rem;
  line-height: 1;
}

.lot-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
}

/* Шеврон малюємо тим самим способом, що й у галереї на сторінці, — щоб два
 * переглядачі не розʼїхались у дрібницях. */
.lot-lightbox__nav::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
}

.lot-lightbox__prev { left: 1.1rem; }
.lot-lightbox__next { right: 1.1rem; }
.lot-lightbox__prev::before { transform: rotate(135deg); margin-left: 0.2rem; }
.lot-lightbox__next::before { transform: rotate(-45deg); margin-right: 0.2rem; }

.lot-lightbox__x:hover,
.lot-lightbox__nav:hover { background: rgba(17, 24, 39, 0.85); }
.lot-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }

.lot-lightbox__x:focus-visible,
.lot-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lot-lightbox__counter {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Підказка, що знімок клікабельний. */
#lot-gallery-stage img.lot-main-media { cursor: zoom-in; }

/* Стрілки ховаються, доки курсор не на знімку — так само, як у галереї на
 * сторінці. Фото має бути видно цілим, а не крізь дві кнопки.
 * Хрестик і лічильник лишаються: перший — єдина очевидна дорога назад, другий
 * показує, скільки ще кадрів попереду. */
@media (hover: hover) and (pointer: fine) {
  .lot-lightbox__nav,
  .lot-lightbox__x,
  .lot-lightbox__counter {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, background 0.15s ease, transform 0.15s ease;
  }

  .lot-lightbox__card:hover .lot-lightbox__nav,
  .lot-lightbox__card:hover .lot-lightbox__x,
  .lot-lightbox__card:hover .lot-lightbox__counter,
  .lot-lightbox__card:has(:focus-visible) .lot-lightbox__nav,
  .lot-lightbox__card:has(:focus-visible) .lot-lightbox__x,
  .lot-lightbox__card:has(:focus-visible) .lot-lightbox__counter {
    opacity: 1;
  }

  .lot-lightbox__card:hover .lot-lightbox__nav,
  .lot-lightbox__card:hover .lot-lightbox__x,
  .lot-lightbox__card:has(:focus-visible) .lot-lightbox__nav,
  .lot-lightbox__card:has(:focus-visible) .lot-lightbox__x {
    pointer-events: auto;
  }
}

@media (max-width: 560px) {
  .lot-lightbox { padding: 0.6rem; }
  .lot-lightbox__card { padding: 0.25rem; border-radius: 10px; }
  .lot-lightbox__nav { width: 2.35rem; height: 2.35rem; }
  .lot-lightbox__prev { left: 0.6rem; }
  .lot-lightbox__next { right: 0.6rem; }
}

/* Поки відкритий переглядач, декоративний фон сторінки ховаємо зовсім.
 *
 * `.site-backdrop__mesh` — це шар на весь екран із розмиттям 72px,
 * `will-change: transform` і НЕСКІНЧЕННОЮ анімацією на 52 секунди. Його не
 * видно під вікном, але браузер усе одно перемальовує його щокадру, а під час
 * масштабування — ще й перераховує розмиття. Саме звідси ривки.
 *
 * Для решти модальних (`.cs-modal`) фон лишаємо видимим, бо крізь них сторінку
 * видно, але анімацію зупиняємо: статична картинка нічого не коштує. */
body.cs-lightbox-open .site-backdrop { display: none; }

/* Поки відкритий переглядач, СТОРІНКА ПІД НИМ НЕ МАЛЮЄТЬСЯ ВЗАГАЛІ.
 *
 * Її все одно не видно, але браузер цього не знає: при масштабуванні він
 * перераховує й перемальовує весь документ — липку шапку з розмиттям фону,
 * галерею, панелі цін, тіні. Звідси ривки, хоча на екрані лише фото.
 *
 * `visibility: hidden` вимикає саме малювання, лишаючи розмітку на місці: при
 * закритті нічого не стрибає і сторінка не прокручується на початок, як було б
 * із `display: none`. */
body.cs-lightbox-open > *:not(.lot-lightbox) {
  visibility: hidden;
}

body.cs-modal-open .site-backdrop__mesh {
  animation: none;
  will-change: auto;
}

/* Перемальовування накладки не повинно тягти за собою решту сторінки. */
.lot-lightbox { contain: layout paint; }

/* Рядок, на який перейшли з клавіатури у випадайці. Не «вибраний» — лише
 * підказка, куди потрапив погляд. */
.browse-select-option.is-typeahead {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Підтвердження дії — наше вікно замість браузерного confirm(). */
.cs-confirm__card {
  max-width: 420px;
  padding: 1.3rem 1.4rem 1.15rem;
  text-align: center;
}
.cs-confirm__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cs-confirm__text {
  margin: 0 0 1.2rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.cs-confirm__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}
.cs-confirm__btn {
  min-width: 118px;
  padding: 0.62rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cs-confirm__btn--ghost:hover { border-color: var(--border-light); }
.cs-confirm__btn--go.is-danger {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}
.cs-confirm__btn--go.is-danger:hover { filter: brightness(1.06); }

/* Скільки нових лотів у збережених пошуках.
 *
 * Значок тут — не окраса, а єдине місце, де людина дізнається про надходження,
 * тож він має бути помітним і при цьому не кричати. Звідси дрібний розмір,
 * помірна вага й повітря навколо: у меню завширшки 220px велике коло
 * впиралося в текст і виглядало наліпкою.
 */
/* `a.account-item { display: block }` (вище) має вищу вагу за клас, тож тут
 * потрібен такий самий тип селектора — інакше рядок лишається блоковим, і
 * число стоїть упритул до тексту замість правого краю. */
a.account-item--count,
.account-item--count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}
.account-item-badge {
  flex: 0 0 auto;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.69rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  /* Цифри однакової ширини: інакше значок сіпається, коли 9 стає 10. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: cs-badge-in 0.18s ease-out;
}
.account-item-badge[hidden] { display: none; }

@keyframes cs-badge-in {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Меню трохи ширше: «Saved searches» + значок у 220px стояли впритул. */
.account-dropdown { min-width: 244px; }

/* Крапка на кутику аватара — другий, тихіший натяк для згорнутого меню. */
.account-trigger.has-new .account-avatar { position: relative; overflow: visible; }
.account-trigger.has-new .account-avatar::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  /* Обведення кольором підкладки — щоб крапка читалась і на темній темі. */
  box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ── Saved searches ────────────────────────────────────────────────────────
 * Токени беремо ті самі, що й решта сторінок акаунта (--surface/--border).
 * Спершу тут стояли --card/--line, яких у теми немає, тож картки падали на
 * запасні кольори й виглядали чужими на сторінці.
 */

.searches-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 920px;
}

.search-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.search-card__main { flex: 1 1 auto; min-width: 0; }

.search-card__name {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 0.45rem;
}
.search-card__name:hover { color: var(--accent); }

.search-card__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.search-chip {
  font-size: 0.76rem;
  line-height: 1.5;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 7%, transparent);
  color: var(--muted);
  white-space: nowrap;
}
.search-chip b { font-weight: 600; color: var(--text); }

.search-card__side {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

.search-new {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #16a34a 35%, transparent);
  background: color-mix(in srgb, #16a34a 13%, transparent);
  color: #15803d;
  text-decoration: none;
  white-space: nowrap;
}
.search-new:hover { background: color-mix(in srgb, #16a34a 20%, transparent); }
[data-theme="dark"] .search-new:not(.search-new--none) { color: #4ade80; }

.search-new--none {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

.search-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid transparent;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.search-del:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.search-del[disabled] { opacity: 0.5; cursor: default; }

/* Порожній стан — теж картка: інакше сторінка з одним рядком тексту виглядає
 * так, ніби вона не догрузилась. */
.searches-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 2.6rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.searches-empty svg { color: var(--accent); opacity: 0.85; }
.searches-empty h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.searches-empty p {
  margin: 0;
  max-width: 34rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}
.searches-empty .account-inline-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  text-decoration: none;
}

.empty-note { color: var(--muted); }

@media (max-width: 560px) {
  .search-card { flex-direction: column; align-items: flex-start; }
  .search-card__side { align-self: stretch; justify-content: space-between; }
}


/* ── Смужка згоди на рахунок конверсій ──────────────────────────────────────
   Показується ЛИШЕ там, де згода обов'язкова (ЄС, Британія, Швейцарія) і
   лише коли ключ Meta справді вписаний — рішення приймає сервер
   (web_api/main.py, /consent.json).

   КЛАС `.cs-consent` ДОПИСАНИЙ У ВИНЯТКИ правила позиціювання вище. Без цього
   `position: fixed` перебивається, і смужка лягає в потік сторінки внизу, під
   футером. На цьому вже спіткнулись двічі — див. коментар біля того правила.

   z-index вищий за липку шапку (500) і за накладки (600): смужку треба
   прибрати з дороги, а не шукати під чимось. */
.cs-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  padding: 0.9rem 1.25rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(12, 15, 22, 0.08);
  animation: cs-fade-in 0.18s ease;
}

.cs-consent__text {
  margin: 0;
  max-width: 60ch;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.cs-consent__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Обидві кнопки — не менші за 44px заввишки: смужка виїжджає знизу, тобто
   рівно там, де на телефоні тримають великий палець. */
.cs-consent__actions button {
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.cs-consent__no {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.cs-consent__yes {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}

@media (max-width: 560px) {
  .cs-consent {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cs-consent__actions { justify-content: stretch; }
  .cs-consent__actions button { flex: 1; }
}

/* ── ЗАМОК НА ПЛАТНИХ ЧИСЛАХ ────────────────────────────────────────────────

   Розмиття в `em`, а не в пікселях: той самий клас стоїть і на підсумку
   картки (28px), і на рядку характеристик (13px), і в обох випадках скло має
   бути однаково матовим ВІДНОСНО тексту. У пікселях довелось би тримати
   окреме правило під кожен розмір і щоразу про них пам'ятати.

   Цифри під склом — оздоба з locked.js, не дані. Тому `user-select:none` і
   `aria-hidden`: ні скопіювати, ні прочитати голосом їх не можна, а підпис
   для читача екрана стоїть на самому замку. */
.cs-lock {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  cursor: pointer;
  user-select: none;
  vertical-align: baseline;
  line-height: inherit;
  color: inherit;
  border-radius: 6px;
  transition: opacity 0.15s ease;
}
.cs-lock__ghost {
  filter: blur(0.19em);
  opacity: 0.5;
  pointer-events: none;
  white-space: nowrap;
}
.cs-lock__ico {
  width: 0.8em;
  height: 0.8em;
  flex: none;
  opacity: 0.45;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.cs-lock:hover .cs-lock__ico,
.cs-lock:focus-visible .cs-lock__ico { opacity: 1; color: var(--accent); }
.cs-lock:hover .cs-lock__ghost { opacity: 0.62; }
.cs-lock:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Замкнений блок на місці графіка. Висоту задає сторінка через
   `--cs-lock-h`, бо графіки на лоті й на картці різні. */
.cs-lock-block {
  position: relative;
  display: block;
  width: 100%;
  height: var(--cs-lock-h, 180px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--card, transparent);
}
.cs-lock-block__art {
  position: absolute;
  inset: 0;
  padding: 14px;
  color: var(--accent);
  opacity: 0.35;
  filter: blur(6px);
  pointer-events: none;
}
.cs-lock-block__art svg { width: 100%; height: 100%; display: block; }
.cs-lock-block__over {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 12px;
}
.cs-lock-block__over .cs-lock__ico { width: 20px; height: 20px; opacity: 0.5; }
.cs-lock-block__title { font-size: 0.9375rem; font-weight: 700; }
.cs-lock-block__note { font-size: 0.75rem; color: var(--muted-dim); }
.cs-lock-block__cta {
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent);
}
.cs-lock-block:hover .cs-lock-block__cta { text-decoration: underline; }
.cs-lock-block:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Людям, які просили прибрати рух, скло лишається — воно не рухається. */
@media (prefers-reduced-motion: reduce) {
  .cs-lock, .cs-lock__ico { transition: none; }
}

/* Обрізаний номер лота й VIN. Видно початок, кінець зрізав СЕРВЕР — крапки
   тут не малюнок, а те, що справді приїхало. Підкреслення точкове, щоб було
   видно: це не просто текст, на нього можна натиснути. */
.cs-lock-tail {
  cursor: pointer;
  border-bottom: 1px dashed var(--border);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cs-lock-tail:hover,
.cs-lock-tail:focus-visible { color: var(--accent); border-color: var(--accent); }
.cs-lock-tail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Рядок «зараз показуємо лише TX» у вікні вибору місця. Без нього вікно
   відкривалось порожнім і виглядало так, ніби фільтра немає, — хоча видача
   була обмежена штатом, і саме його мав прибрати «Clear». */
.loc-current {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--muted-dim);
}
.loc-current[hidden] { display: none !important; }