/* Tehlot design system. Single stylesheet, plain CSS, no build step.
   Sections: 1 tokens, 2 base, 3 layout, 4 typography, 5 controls,
   6 badges, 7 filters, 8 lot cards, 9 tables and navigation, 10 states,
   11 lot page blocks, 12 home page blocks, 13 responsive. */

/* ============ 1. TOKENS ============ */

:root {
  /* brand ramp */
  --o-50:  #FFF4EC;
  --o-100: #FFE3D1;
  --o-200: #FDC6A2;
  --o-300: #F79E68;
  --o-400: #F2762F;
  --o-500: #E05C10;
  --o-600: #C24A08;
  --o-700: #9C3A05;
  --o-800: #732B05;

  /* neutral ramp */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFC;
  --n-50:  #F4F5F7;
  --n-100: #EDEFF3;
  --n-200: #E2E5EA;
  --n-300: #C8CDD6;
  --n-400: #A5ADBA;
  --n-500: #6B7480;
  --n-600: #4E586A;
  --n-700: #343D4C;
  --n-800: #212936;
  --n-900: #14181F;

  /* semantic surfaces */
  --bg:            var(--n-25);
  --bg-sunken:     var(--n-50);
  --surface:       var(--n-0);
  --surface-2:     var(--n-50);
  --surface-3:     var(--n-100);
  --surface-inset: var(--n-100);
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-focus:  var(--o-500);

  /* semantic text */
  --text:          var(--n-900);
  --text-2:        var(--n-600);
  --text-muted:    var(--n-500);
  --text-on-accent:#FFFFFF;
  --link:          #1B5FC1;
  --link-visited:  #6B4BB8;

  /* accent */
  --accent:        var(--o-500);
  --accent-bg:     var(--o-600);
  --accent-bg-hover: var(--o-700);
  --accent-soft:   var(--o-50);
  --accent-soft-br:var(--o-200);
  --accent-text:   var(--o-700);

  /* five auction statuses */
  --st-apply-bg:     #E4F6EC;
  --st-apply-br:     #BCE5CD;
  --st-apply-fg:     #096638;
  --st-apply-dot:    #12A05C;

  --st-live-bg:      #E7F0FE;
  --st-live-br:      #C2D9FA;
  --st-live-fg:      #14509F;
  --st-live-dot:     #2B6FD8;

  --st-offer-bg:     #F0EBFD;
  --st-offer-br:     #DACFF8;
  --st-offer-fg:     #55299B;
  --st-offer-dot:    #7B4DE0;

  --st-done-bg:      #ECEEF2;
  --st-done-br:      #DCE0E7;
  --st-done-fg:      #49525F;
  --st-done-dot:     #8A93A1;

  --st-cancel-bg:    #FCEAEA;
  --st-cancel-br:    #F4CACA;
  --st-cancel-fg:    #9C1F1F;
  --st-cancel-dot:   #D93A3A;

  /* discount badge */
  --disc-bg:  var(--o-50);
  --disc-br:  var(--o-200);
  --disc-fg:  var(--o-700);
  --disc-strong-bg: var(--o-600);
  --disc-strong-fg: #FFFFFF;

  /* type */
  --font-ui: Inter, "Helvetica Neue", Arial, "Segoe UI", sans-serif;
  --font-head: "Golos Text", Inter, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-11: 11px;  --lh-11: 15px;
  --fs-12: 12px;  --lh-12: 16px;
  --fs-13: 13px;  --lh-13: 18px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-15: 15px;  --lh-15: 22px;
  --fs-16: 16px;  --lh-16: 24px;
  --fs-18: 18px;  --lh-18: 26px;
  --fs-20: 20px;  --lh-20: 28px;
  --fs-24: 24px;  --lh-24: 31px;
  --fs-30: 30px;  --lh-30: 38px;
  --fs-36: 36px;  --lh-36: 43px;
  --fs-44: 44px;  --lh-44: 50px;

  /* space, 4px base */
  --s-1: 2px;  --s-2: 4px;  --s-3: 6px;  --s-4: 8px;
  --s-5: 12px; --s-6: 16px; --s-7: 20px; --s-8: 24px;
  --s-9: 32px; --s-10: 40px; --s-11: 48px; --s-12: 64px;

  /* radius */
  --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --r-pill: 999px;

  /* layout */
  --container: 1360px;
  --gutter: 20px;
  --sidebar: 264px;
  --header-h: 60px;
  --subheader-h: 48px;

  /* elevation, deliberately flat */
  --sh-1: 0 1px 2px rgba(20, 24, 31, 0.06);
  --sh-2: 0 2px 8px rgba(20, 24, 31, 0.10);
  --sh-3: 0 8px 28px rgba(20, 24, 31, 0.16);
  --focus-ring: 0 0 0 3px rgba(224, 92, 16, 0.32);

  --tap: 44px;
}

/* dark theme. Only semantic tokens are redefined, ramps stay as they are. */
.theme-dark,
[data-theme="dark"] {
  --bg:            #0E1118;
  --bg-sunken:     #090B10;
  --surface:       #161A22;
  --surface-2:     #1C212B;
  --surface-3:     #232936;
  --surface-inset: #11151C;
  --border:        #2A3140;
  --border-strong: #3C4557;
  --border-focus:  var(--o-400);

  --text:          #E9EDF4;
  --text-2:        #B2BBCA;
  --text-muted:    #8B95A6;
  --text-on-accent:#16110D;
  --link:          #7FB2FF;
  --link-visited:  #B79BFF;

  --accent:        var(--o-400);
  --accent-bg:     #E8681B;
  --accent-bg-hover: #F2762F;
  --accent-soft:   #2A1A10;
  --accent-soft-br:#4A2A14;
  --accent-text:   #FFB07A;

  --st-apply-bg:  #0F2A1D;  --st-apply-br:  #1E5238;  --st-apply-fg:  #63DCA0;  --st-apply-dot:  #21C878;
  --st-live-bg:   #11213A;  --st-live-br:   #23447A;  --st-live-fg:   #7FB2FF;  --st-live-dot:   #4B8FEE;
  --st-offer-bg:  #1E1838;  --st-offer-br:  #3A2F63;  --st-offer-fg:  #BCA3FF;  --st-offer-dot:  #8E67F0;
  --st-done-bg:   #1B2029;  --st-done-br:   #2E3542;  --st-done-fg:   #9AA4B4;  --st-done-dot:   #737D8C;
  --st-cancel-bg: #2B1517;  --st-cancel-br: #522A2D;  --st-cancel-fg: #FF9494;  --st-cancel-dot: #E45858;

  --disc-bg: #2A1A10;
  --disc-br: #4A2A14;
  --disc-fg: #FFB07A;
  --disc-strong-bg: #E8681B;
  --disc-strong-fg: #16110D;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 2px 8px rgba(0, 0, 0, 0.5);
  --sh-3: 0 8px 28px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 3px rgba(242, 118, 47, 0.4);
}

/* ============ 2. BASE ============ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  border-radius: var(--r-xs);
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* numbers in prices, dates and counters always line up */
.num, .price, .table td, .lot-card__price, .spec__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============ 3. LAYOUT ============ */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-7);
}

.page { display: flex; flex-direction: column; min-height: 100vh; }
.main { flex: 1; padding: var(--s-7) 0 var(--s-11); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }

.layout-aside {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

.stack   { display: flex; flex-direction: column; gap: var(--s-6); }
.stack-s { display: flex; flex-direction: column; gap: var(--s-4); }
.row     { display: flex; align-items: center; gap: var(--s-4); }
.row-sb  { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.wrap    { flex-wrap: wrap; }
.spacer  { flex: 1; }

/* header */
.header {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header__bar { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img { height: 32px; width: auto; }
/* in the dark theme the wordmark swaps to the light one. In production put two img
   tags with classes instead, this rule works only in Blink and WebKit. */
[data-theme="dark"] img[src$="logo-full.svg"],
.theme-dark img[src$="logo-full.svg"] { content: url("../img/logo-full-dark.3bc516641f0a.svg"); }
.header__search { flex: 1; min-width: 0; max-width: 620px; }
.header__nav { display: flex; align-items: center; gap: var(--s-6); flex: none; }
.header__nav a { color: var(--text-2); font-size: var(--fs-14); }
.header__nav a:hover { color: var(--text); text-decoration: none; }
.header__burger { display: none; }

/* second line of the header with sections */
.subnav {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.subnav__list { display: flex; gap: var(--s-7); overflow-x: auto; height: var(--subheader-h); align-items: center; }
/* Ссылка занимает всю высоту ленты, а не полоску текста в двадцать
   пикселей: иначе палец промахивается мимо цели сверху и снизу. */
.subnav__list a { color: var(--text-2); font-size: var(--fs-14); white-space: nowrap;
  display: inline-flex; align-items: center; align-self: stretch; min-height: 44px; }
.subnav__list a:hover { color: var(--text); text-decoration: none; }
.subnav__list a.is-active { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }

/* footer */
.footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: var(--s-9) 0 var(--s-8);
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
}
.footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-8); }
.footer__cols h4 { font-size: var(--fs-13); color: var(--text); margin-bottom: var(--s-4); font-family: var(--font-ui); font-weight: 600; }
.footer__cols li { margin-bottom: var(--s-3); }
.footer__cols a { color: var(--text-2); }
.footer__legal { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-12); }

/* ============ 4. TYPOGRAPHY ============ */

.h1 { font-family: var(--font-head); font-size: var(--fs-30); line-height: var(--lh-30); font-weight: 700; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-head); font-size: var(--fs-24); line-height: var(--lh-24); font-weight: 700; letter-spacing: -0.02em; }
.h3 { font-family: var(--font-head); font-size: var(--fs-18); line-height: var(--lh-18); font-weight: 600; }
.h4 { font-family: var(--font-ui);   font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; }
.display { font-family: var(--font-head); font-size: var(--fs-44); line-height: var(--lh-44); font-weight: 800; letter-spacing: -0.03em; }

.t-16 { font-size: var(--fs-16); line-height: var(--lh-16); }
.t-15 { font-size: var(--fs-15); line-height: var(--lh-15); }
.t-14 { font-size: var(--fs-14); line-height: var(--lh-14); }
.t-13 { font-size: var(--fs-13); line-height: var(--lh-13); }
.t-12 { font-size: var(--fs-12); line-height: var(--lh-12); }
.t-11 { font-size: var(--fs-11); line-height: var(--lh-11); }

.muted   { color: var(--text-muted); }
.second  { color: var(--text-2); }
.strong  { font-weight: 600; }
.bold    { font-weight: 700; }
.caps    { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-11); font-weight: 600; color: var(--text-muted); }
.nowrap  { white-space: nowrap; }
.clamp-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============ 5. CONTROLS ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  height: 40px; padding: 0 var(--s-6);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  font-size: var(--fs-14); font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn svg { flex: none; }

.btn--primary { background: var(--accent-bg); color: var(--text-on-accent); }
.btn--primary:hover { background: var(--accent-bg-hover); }

.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--secondary:hover { background: var(--surface-2); border-color: var(--text-muted); }

.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

.btn--link { background: none; height: auto; padding: 0; color: var(--link); font-weight: 500; }
.btn--link:hover { text-decoration: underline; }

.btn--lg { height: 48px; padding: 0 var(--s-7); font-size: var(--fs-16); border-radius: var(--r-md); }
.btn--sm { height: 32px; padding: 0 var(--s-5); font-size: var(--fs-13); border-radius: var(--r-sm); }
.btn--icon { width: 40px; padding: 0; }
.btn--icon.btn--sm { width: 32px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* field */
.field { display: flex; flex-direction: column; gap: var(--s-3); }
.field__label { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-2); font-weight: 500; }
.field__hint { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted); }
.field__error { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--st-cancel-fg); }

.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 var(--s-5);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--fs-14); line-height: 38px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.textarea { height: auto; min-height: 96px; padding: var(--s-4) var(--s-5); line-height: var(--lh-14); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:hover, .select:hover { border-color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.input.is-error { border-color: var(--st-cancel-dot); }
.input[disabled] { background: var(--surface-2); color: var(--text-muted); }
.input--sm, .select--sm { height: 32px; line-height: 30px; font-size: var(--fs-13); padding: 0 var(--s-4); }

.select {
  appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236B7480' stroke-width='1.6'%3E%3Cpath d='M4 6.5L8 10.5L12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
[data-theme="dark"] .select, .theme-dark .select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238B95A6' stroke-width='1.6'%3E%3Cpath d='M4 6.5L8 10.5L12 6.5'/%3E%3C/svg%3E");
}

/* search field with a button inside */
.search { display: flex; width: 100%; }
.search .input {
  height: 44px; line-height: 42px; border-radius: var(--r-md) 0 0 var(--r-md);
  border-right: none; font-size: var(--fs-15);
}
.search .btn { height: 44px; border-radius: 0 var(--r-md) var(--r-md) 0; padding: 0 var(--s-7); }
.search--hero .input { height: 56px; line-height: 54px; font-size: var(--fs-16); }
.search--hero .btn { height: 56px; font-size: var(--fs-16); }

/* range pair */
.range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* checkbox and radio */
.check { display: flex; align-items: flex-start; gap: var(--s-4); cursor: pointer; padding: var(--s-2) 0; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-xs);
  background: var(--surface); position: relative;
  transition: background-color .1s ease, border-color .1s ease;
}
.check--radio .check__box { border-radius: 50%; }
.check input:checked + .check__box { background: var(--accent-bg); border-color: var(--accent-bg); }
.check input:checked + .check__box::after {
  content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 9px; border: solid var(--text-on-accent);
  border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.check--radio input:checked + .check__box::after {
  left: 4px; top: 4px; width: 6px; height: 6px; border: none;
  background: var(--text-on-accent); border-radius: 50%; transform: none;
}
.check input:focus-visible + .check__box { box-shadow: var(--focus-ring); }
.check__text { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--text); }
.check__count { color: var(--text-muted); font-size: var(--fs-13); }
.check:hover .check__text { color: var(--text); }

/* switch */
.switch { display: inline-flex; align-items: center; gap: var(--s-4); cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch__track {
  width: 36px; height: 20px; border-radius: var(--r-pill);
  background: var(--border-strong); position: relative; transition: background-color .15s ease;
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #FFFFFF; transition: transform .15s ease;
}
.switch input:checked + .switch__track { background: var(--accent-bg); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }

/* segmented control, used for the tile or list switch */
.segmented { display: inline-flex; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.segmented button {
  height: 30px; padding: 0 var(--s-5); border: none; background: none; border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--fs-13); font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-3);
}
.segmented button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

/* ============ 6. CHIPS, BADGES, TOOLTIP ============ */

/* chip of a selected filter */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 28px; padding: 0 var(--s-3) 0 var(--s-5);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  font-size: var(--fs-13); line-height: 1; color: var(--text);
}
.chip__x {
  width: 18px; height: 18px; border: none; background: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--text-muted);
}
.chip__x:hover { background: var(--surface-3); color: var(--text); }
.chip--reset { border-style: dashed; color: var(--text-2); padding: 0 var(--s-5); cursor: pointer; }
.chip--reset:hover { color: var(--text); border-color: var(--text-muted); }

/* clickable chip used as a quick filter */
.chip-link {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 34px; padding: 0 var(--s-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-13); color: var(--text-2); white-space: nowrap;
}
.chip-link:hover { border-color: var(--text-muted); color: var(--text); text-decoration: none; }
.chip-link.is-active { background: var(--accent-soft); border-color: var(--accent-soft-br); color: var(--accent-text); font-weight: 600; }
.chip-link--block {
  display: flex; height: auto; min-height: 38px; padding: var(--s-4) var(--s-5);
  white-space: normal; justify-content: space-between; gap: var(--s-5); text-align: left;
}

/* status badge, the loudest element of a card */
.status {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 24px; padding: 0 var(--s-4);
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: var(--fs-12); line-height: 1; font-weight: 600; white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.status--lg { height: 30px; padding: 0 var(--s-5); font-size: var(--fs-14); }

.status--apply  { background: var(--st-apply-bg);  border-color: var(--st-apply-br);  color: var(--st-apply-fg); }
.status--apply::before  { background: var(--st-apply-dot); }
.status--live   { background: var(--st-live-bg);   border-color: var(--st-live-br);   color: var(--st-live-fg); }
.status--live::before   { background: var(--st-live-dot); }
.status--offer  { background: var(--st-offer-bg);  border-color: var(--st-offer-br);  color: var(--st-offer-fg); }
.status--offer::before  { background: var(--st-offer-dot); }
.status--done   { background: var(--st-done-bg);   border-color: var(--st-done-br);   color: var(--st-done-fg); }
.status--done::before   { background: var(--st-done-dot); }
.status--cancel { background: var(--st-cancel-bg); border-color: var(--st-cancel-br); color: var(--st-cancel-fg); }
.status--cancel::before { background: var(--st-cancel-dot); }

/* the same five statuses as a 3px strip on top of a card */
.strip { height: 3px; flex: none; }
.strip--apply  { background: var(--st-apply-dot); }
.strip--live   { background: var(--st-live-dot); }
.strip--offer  { background: var(--st-offer-dot); }
.strip--done   { background: var(--st-done-dot); }
.strip--cancel { background: var(--st-cancel-dot); }

/* discount from the starting price */
.disc {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-4);
  background: var(--disc-bg); border: 1px solid var(--disc-br); color: var(--disc-fg);
  border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.disc--strong { background: var(--disc-strong-bg); border-color: var(--disc-strong-bg); color: var(--disc-strong-fg); }
.disc--lg { height: 28px; font-size: var(--fs-14); padding: 0 var(--s-5); }

/* neutral tag: category, platform, auction type */
.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-4);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: var(--fs-12); line-height: 1; color: var(--text-2); white-space: nowrap;
}
.tag--nophoto { background: transparent; border-style: dashed; color: var(--text-muted); }

/* tooltip, pure CSS */
.tip { position: relative; display: inline-flex; }
.tip__mark {
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-strong);
  color: var(--text-muted); font-size: 11px; line-height: 14px; text-align: center;
  cursor: help; background: var(--surface); font-weight: 600;
}
.tip__body {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 180px; max-width: 280px; padding: var(--s-4) var(--s-5);
  background: var(--n-900); color: #FFFFFF; border-radius: var(--r-md);
  font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 400;
  opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 60;
  box-shadow: var(--sh-2); text-align: left;
}
.tip__body::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--n-900);
}
[data-theme="dark"] .tip__body, .theme-dark .tip__body { background: var(--surface-3); border: 1px solid var(--border-strong); }
.tip:hover .tip__body, .tip:focus-within .tip__body { opacity: 1; visibility: visible; }

/* ============ 7. FILTERS ============ */

.filters {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  position: sticky; top: calc(var(--header-h) + var(--s-5));
  max-height: calc(100vh - var(--header-h) - var(--s-9));
  display: flex; flex-direction: column; overflow: hidden;
}
.filters__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.filters__scroll { overflow-y: auto; flex: 1; }
.filters__foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: var(--surface); }

/* second level: filters of the selected category */
.filters__cat-head {
  padding: var(--s-4) var(--s-5);
  background: var(--accent-soft);
  border-top: 1px solid var(--accent-soft-br);
  border-bottom: 1px solid var(--accent-soft-br);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.filters__cat-head .caps { color: var(--accent-text); }
.filters__cat-empty { padding: var(--s-5); color: var(--text-muted); font-size: var(--fs-13); line-height: var(--lh-13); }

.fgroup { border-bottom: 1px solid var(--border); }
.fgroup:last-child { border-bottom: none; }
.fgroup > summary {
  list-style: none; cursor: pointer;
  padding: var(--s-5) var(--s-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-size: var(--fs-14); font-weight: 600; color: var(--text);
}
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 2px;
  border-right: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
.fgroup[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.fgroup > summary:hover { background: var(--surface-2); }
.fgroup__count { font-weight: 500; color: var(--text-muted); font-size: var(--fs-13); margin-left: auto; margin-right: var(--s-3); }
.fgroup__body { padding: 0 var(--s-5) var(--s-5); }
.fgroup__list { max-height: 188px; overflow-y: auto; margin: 0 calc(var(--s-3) * -1); padding: 0 var(--s-3); }
.fgroup__more { margin-top: var(--s-3); }

/* Мобильная шторка фильтров. Открывается скрытым переключателем, а не
   якорем: якорь уводил страницу к шторке, после закрытия возвращал
   человека в начало выдачи и на каждое открытие добавлял запись в
   историю браузера. */
.drawer__toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.drawer { display: none; }
.drawer__toggle:checked + .drawer { display: block; }
/* Фон под открытой шторкой не должен прокручиваться вместе с ней.
   Гасим прокрутку и у html: в части браузеров прокручивается именно
   корневой элемент, и одного правила на body не хватает. */
html:has(.drawer__toggle:checked),
body:has(.drawer__toggle:checked) { overflow: hidden; }
.drawer__backdrop { position: fixed; inset: 0; background: rgba(10, 13, 18, .55); z-index: 90; }
.drawer__panel {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 92vw); z-index: 91;
  background: var(--surface); display: flex; flex-direction: column;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5); border-bottom: 1px solid var(--border); }
.drawer__body { flex: 1; overflow-y: auto; }
.drawer__foot { padding: var(--s-5); border-top: 1px solid var(--border); display: flex; gap: var(--s-4); }
/* Запасной путь для браузеров без :has и для старых ссылок с якорем. */
.drawer:target { display: block; }

/* toolbar above the results */
.toolbar {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-4) 0 var(--s-5);
}
.toolbar__count { font-size: var(--fs-14); color: var(--text-2); }
.chips-row { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-bottom: var(--s-5); }
.btn-filters { display: none; }

/* ============ 8. LOT CARDS ============ */

.lots-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: var(--s-6);
  align-items: stretch;
}
.lots-list { display: flex; flex-direction: column; gap: var(--s-5); }

.lot-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; height: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.lot-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }

.lot-card__media {
  position: relative; display: block; aspect-ratio: 16 / 10;
  background: var(--surface-2); overflow: hidden;
}
.lot-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* half of the base has no photo, so the placeholder is a normal state */
.nophoto {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3);
  color: var(--text-muted); text-align: center; padding: var(--s-4);
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(135deg,
    transparent 0 9px, rgba(107, 116, 128, .10) 9px 10px);
}
.nophoto__cat { font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.nophoto__note { font-size: var(--fs-11); }

/* Подпись поверх рисованной заглушки. Нужна затем, чтобы картинку не
   приняли за снимок самого лота: место в карточке занимает фотография
   предмета торгов, и подставить туда рисунок молча нельзя. */
.nophoto-note {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-12); line-height: 1.35; color: var(--n-0);
  background: rgba(20, 24, 31, .62);
}

.lot-card__over-tl { position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2; }
.lot-card__over-tr { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2; }
.lot-card__over-tl .status { box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.lot-card__body {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); flex: 1;
}
.lot-card__price {
  font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 700;
  letter-spacing: -0.02em; min-height: var(--lh-20);
}
.lot-card__price--none { font-size: var(--fs-15); line-height: var(--lh-20); font-weight: 600; color: var(--text-muted); }
.lot-card__price-old {
  font-size: var(--fs-13); font-weight: 500; color: var(--text-muted);
  text-decoration: line-through; margin-left: var(--s-3); letter-spacing: 0;
}
.lot-card__title {
  font-size: var(--fs-13); line-height: 18px; color: var(--text); min-height: 36px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.lot-card__title:hover { color: var(--accent-text); text-decoration: none; }
.lot-card__meta {
  font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted);
  min-height: var(--lh-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lot-card__foot {
  margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-2);
}
.lot-card__deadline { display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap; }
.lot-card__deadline.is-soon { color: var(--st-cancel-fg); font-weight: 600; }

/* row variant for the list mode, denser, more fields visible */
.lot-row {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; position: relative;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.lot-row:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
.lot-row__media { position: relative; min-height: 118px; background: var(--surface-2); overflow: hidden; }
.lot-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lot-row__media .nophoto { position: absolute; inset: 0; }
.lot-row__body { padding: var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.lot-row__title { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; color: var(--text); }
a.lot-row__title:hover { color: var(--accent-text); text-decoration: none; }
.lot-row__specs { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font-size: var(--fs-13); color: var(--text-2); }
.lot-row__specs span { white-space: nowrap; }
.lot-row__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font-size: var(--fs-12); color: var(--text-muted); }
.lot-row__aside {
  padding: var(--s-5) var(--s-6); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start;
  background: var(--surface);
}
.lot-row__price { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: 700; letter-spacing: -0.02em; }
.lot-row__price--none { font-size: var(--fs-15); font-weight: 600; color: var(--text-muted); }
.lot-row__strip { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }

/* ============ 9. TABLE, PAGINATION, BREADCRUMBS ============ */

.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.table th {
  text-align: left; font-weight: 600; color: var(--text-muted);
  font-size: var(--fs-12); line-height: var(--lh-12);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border-strong);
  white-space: nowrap; background: none;
}
.table td {
  padding: var(--s-5); border-bottom: 1px solid var(--border);
  color: var(--text); line-height: var(--lh-13); vertical-align: top;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.table--zebra tbody tr:nth-child(even) { background: var(--surface-2); }
.table--compact td, .table--compact th { padding: var(--s-3) var(--s-4); }
/* Имена приложенных файлов приходят с площадки склеенными подчерками,
   например Перечень_документов_для_предоставления_участниками.docx.
   Без принудительного переноса такая строка тянула страницу лота вбок
   почти вдвое: при экране 360 ширина документа выходила 616. */
.table td, .table th { overflow-wrap: anywhere; word-break: break-word; }
/* Страховка на случай, если внутри ячейки окажется неразрывный кусок
   длиннее экрана: таблица прокручивается сама, а страница стоит. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table .is-now { font-weight: 700; }
.table .is-past { color: var(--text-muted); }
.table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* pagination */
.pager { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pager__item {
  min-width: 36px; height: 36px; padding: 0 var(--s-4);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: var(--fs-14); font-weight: 500;
}
.pager__item:hover { border-color: var(--border-strong); text-decoration: none; background: var(--surface-2); }
.pager__item.is-current { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--text-on-accent); font-weight: 700; }
.pager__item.is-disabled { color: var(--text-muted); pointer-events: none; background: var(--surface-2); }
.pager__gap { min-width: 24px; text-align: center; color: var(--text-muted); }
.pager__total { margin-left: var(--s-5); color: var(--text-muted); font-size: var(--fs-13); }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--fs-13); color: var(--text-muted); padding: var(--s-5) 0; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-3); }
.crumbs li + li::before { content: "/"; color: var(--border-strong); }
.crumbs .is-current { color: var(--text-2); }

/* ============ 10. STATES ============ */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.card__head { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.card__body { padding: var(--s-6); }
.card__foot { padding: var(--s-5) var(--s-6); border-top: 1px solid var(--border); }

.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--s-11) var(--s-8);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-5);
}
.empty__icon { color: var(--border-strong); }
.empty__title { font-family: var(--font-head); font-size: var(--fs-20); font-weight: 700; }
.empty__text { color: var(--text-2); max-width: 520px; font-size: var(--fs-14); line-height: 21px; }
.empty__actions { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; }

/* loading */
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 300% 100%;
  animation: sk 1.3s ease-in-out infinite;
}
.sk--line { height: 12px; }
.sk--title { height: 18px; }
.sk--price { height: 26px; width: 62%; }
.sk--media { aspect-ratio: 16 / 10; border-radius: 0; }
.sk--w40 { width: 40%; } .sk--w60 { width: 60%; } .sk--w80 { width: 80%; } .sk--w100 { width: 100%; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
.loading-row { display: flex; align-items: center; justify-content: center; gap: var(--s-4); padding: var(--s-8); color: var(--text-muted); font-size: var(--fs-13); }

/* notices */
.note {
  display: flex; gap: var(--s-5); padding: var(--s-5) var(--s-6);
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--surface-2);
  font-size: var(--fs-13); line-height: 19px; color: var(--text-2);
}
.note--accent { background: var(--accent-soft); border-color: var(--accent-soft-br); border-left-color: var(--accent); color: var(--accent-text); }
.note--warn { background: var(--st-cancel-bg); border-color: var(--st-cancel-br); border-left-color: var(--st-cancel-dot); color: var(--st-cancel-fg); }

/* ============ 11. LOT PAGE ============ */

.lot-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-8); align-items: start; }
.lot-head { display: flex; flex-direction: column; gap: var(--s-5); padding-bottom: var(--s-6); }
.lot-head__title { font-family: var(--font-head); font-size: var(--fs-30); line-height: var(--lh-30); font-weight: 700; letter-spacing: -0.02em; }
.lot-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.lot-head__id { color: var(--text-muted); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }

/* gallery */
.gallery { display: flex; flex-direction: column; gap: var(--s-4); }
.gallery__main {
  position: relative; aspect-ratio: 4 / 3; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__counter {
  position: absolute; right: var(--s-5); bottom: var(--s-5);
  background: rgba(20, 24, 31, .78); color: #FFFFFF;
  padding: 3px var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-12); font-variant-numeric: tabular-nums;
}
.gallery__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); }
.gallery__thumb {
  aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface-2); cursor: pointer;
}
.gallery__thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* price panel */
.pricebox { position: sticky; top: calc(var(--header-h) + var(--s-5)); display: flex; flex-direction: column; gap: var(--s-5); }
.pricebox__now { font-size: var(--fs-36); line-height: var(--lh-36); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pricebox__label { font-size: var(--fs-13); color: var(--text-muted); }
.pricebox__rows { display: flex; flex-direction: column; }
.pricebox__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-4) 0; border-bottom: 1px dashed var(--border);
  font-size: var(--fs-14);
}
.pricebox__row:last-child { border-bottom: none; }
.pricebox__row dt { color: var(--text-2); display: inline-flex; align-items: center; gap: var(--s-3); }
.pricebox__row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricebox__row--old dd { color: var(--text-muted); text-decoration: line-through; font-weight: 500; }

/* countdown */
.countdown { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
.countdown__val { font-size: var(--fs-24); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.countdown__cap { font-size: var(--fs-12); color: var(--text-muted); }
.countdown.is-soon { background: var(--st-cancel-bg); border-color: var(--st-cancel-br); }
.countdown.is-soon .countdown__val { color: var(--st-cancel-fg); }

/* specifications, the variable part of the lot */
.spec { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.spec__key, .spec__value { padding: var(--s-4) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-14); line-height: 21px; }
.spec__key { color: var(--text-2); padding-right: var(--s-6); }
.spec__value { color: var(--text); font-weight: 500; }
.spec__value a { font-weight: 500; }
.spec--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-9); }
.spec--2col > div { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-14); }
.spec--2col dt { color: var(--text-2); }
.spec--2col dd { margin: 0; font-weight: 600; text-align: right; }

/* raw description from the state register, often one broken line */
.rawtext {
  font-size: var(--fs-14); line-height: 21px; color: var(--text-2);
  background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6); word-break: break-word;
}
.rawtext--mono { font-family: var(--font-mono); font-size: var(--fs-13); }

/* price reduction chart for the public offer */
.chart { width: 100%; height: auto; }
.chart__grid { stroke: var(--border); stroke-width: 1; }
.chart__step { stroke: var(--st-offer-dot); stroke-width: 2.5; fill: none; }
.chart__area { fill: var(--st-offer-bg); }
.chart__dot { fill: var(--st-offer-dot); }
.chart__now { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.chart__label { fill: var(--text-muted); font-size: 11px; font-family: var(--font-ui); }
.chart__label--now { fill: var(--accent-text); font-weight: 700; }

/* map placeholder */
.map {
  height: 260px; border: 1px solid var(--border); border-radius: var(--r-md);
  background-color: var(--surface-2);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.map__pin { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); color: var(--text-2); font-size: var(--fs-13); }

/* sticky action bar for mobile */
.sticky-cta { display: none; }

/* parties block */
.party { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) 0; border-bottom: 1px solid var(--border); }
.party:last-child { border-bottom: none; }
.party__role { font-size: var(--fs-12); color: var(--text-muted); }
.party__name { font-size: var(--fs-14); font-weight: 600; }
.party__extra { font-size: var(--fs-13); color: var(--text-2); }

/* ============ 12. HOME AND LANDING ============ */

.hero { padding: var(--s-10) 0 var(--s-9); border-bottom: 1px solid var(--border); background: var(--surface); }
.hero__title { font-family: var(--font-head); font-size: var(--fs-36); line-height: var(--lh-36); font-weight: 800; letter-spacing: -0.03em; max-width: 780px; }
.hero__sub { margin-top: var(--s-5); font-size: var(--fs-16); line-height: var(--lh-16); color: var(--text-2); max-width: 680px; }
.hero__search { margin-top: var(--s-7); max-width: 820px; }
.hero__quick { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__stats { margin-top: var(--s-8); display: flex; gap: var(--s-9); flex-wrap: wrap; }
.hero__stat b { display: block; font-family: var(--font-head); font-size: var(--fs-24); line-height: var(--lh-24); font-variant-numeric: tabular-nums; }
.hero__stat span { font-size: var(--fs-13); color: var(--text-muted); }

.section { padding: var(--s-9) 0 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); padding-bottom: var(--s-6); }

/* catalog of 14 property categories */
.cat-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-4); }
.cat {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); min-height: 104px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text); transition: border-color .12s ease, background-color .12s ease;
}
.cat:hover { border-color: var(--accent-soft-br); background: var(--accent-soft); text-decoration: none; }
.cat__ic { color: var(--text-muted); }
.cat:hover .cat__ic { color: var(--accent); }
.cat__box { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-top: auto; }
.cat__name { font-size: var(--fs-13); line-height: 17px; font-weight: 600; }
.cat__count { font-size: var(--fs-12); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* region links */
.geo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3) var(--s-7); }
.geo-grid a { font-size: var(--fs-13); line-height: 22px; color: var(--text-2); }
.geo-grid a:hover { color: var(--accent-text); }
.geo-grid span { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* seo text at the bottom of a landing */
.prose { max-width: 820px; font-size: var(--fs-14); line-height: 22px; color: var(--text-2); }
.prose h2 { font-size: var(--fs-20); line-height: var(--lh-20); color: var(--text); margin: var(--s-7) 0 var(--s-4); }
.prose h3 { font-size: var(--fs-16); line-height: var(--lh-16); color: var(--text); margin: var(--s-6) 0 var(--s-3); }
.prose p { margin-bottom: var(--s-5); }
.prose ul { margin-bottom: var(--s-5); }
.prose li { position: relative; padding-left: var(--s-6); margin-bottom: var(--s-3); }
.prose li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); }

/* how it works, three steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); counter-reset: st; }
.step { padding: var(--s-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.step__n {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-13);
  margin-bottom: var(--s-4);
}
.step__t { font-size: var(--fs-15); font-weight: 600; margin-bottom: var(--s-3); }
.step__d { font-size: var(--fs-13); line-height: 19px; color: var(--text-2); }

/* ============ 13. UTILITIES AND RESPONSIVE ============ */

.only-mobile { display: none; }
.hide { display: none; }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); } .mt-9 { margin-top: var(--s-9); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); } .mb-8 { margin-bottom: var(--s-8); }
.pt-6 { padding-top: var(--s-6); }
.divider { height: 1px; background: var(--border); border: none; margin: var(--s-8) 0; }

@media (max-width: 1280px) {
  .lots-grid { --cols: 3; }
  .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  :root { --sidebar: 240px; }
  .lot-layout { grid-template-columns: minmax(0, 1fr); }
  .pricebox { position: static; }
  .geo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .layout-aside { grid-template-columns: minmax(0, 1fr); }
  .filters--aside { display: none; }
  .btn-filters { display: inline-flex; }
  .lots-grid { --cols: 2; }
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; }
  .lot-row { grid-template-columns: 150px minmax(0, 1fr); }
  .lot-row__aside { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--border); flex-direction: row; align-items: center; justify-content: space-between; }
  .spec { grid-template-columns: 1fr; }
  .spec__key { padding-bottom: 0; border-bottom: none; color: var(--text-muted); font-size: var(--fs-13); }
  .spec--2col { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --header-h: 56px; --gutter: 12px; }
  .container { padding: 0 var(--s-5); }
  .only-mobile { display: block; }
  .no-mobile { display: none !important; }
  .header__nav { display: none; }
  .header__burger { display: inline-flex; }
  /* Поиск на телефоне остается. Раньше он тут прятался совсем, и с
     выдачи или с карточки лота искать было нечем, хотя за поиском на
     сайт и приходят. Уводим его второй строкой во всю ширину. */
  .header__bar { flex-wrap: wrap; height: auto; padding: var(--s-4) 0; gap: var(--s-4) var(--s-5); }
  .header__search { order: 3; flex: 1 0 100%; max-width: none; }
  .main { padding: var(--s-5) 0 var(--s-12); }

  .hero { padding: var(--s-7) 0; }
  .hero__title { font-size: var(--fs-24); line-height: var(--lh-24); }
  .hero__sub { font-size: var(--fs-14); line-height: 21px; margin-top: var(--s-4); }
  .hero__stats { gap: var(--s-6); }

  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .cat { min-height: 0; padding: var(--s-4) var(--s-5); flex-direction: row; align-items: center; gap: var(--s-4); }
  .cat__box { margin-top: 0; }

  .lots-grid { --cols: 1; gap: var(--s-5); }
  .lot-card__media { aspect-ratio: 16 / 9; }
  .lot-card__price { font-size: var(--fs-24); line-height: var(--lh-24); }
  .lot-card__title { font-size: var(--fs-14); line-height: 20px; min-height: 40px; }

  .lot-row { grid-template-columns: 1fr; }
  .lot-row__media { aspect-ratio: 16 / 9; }

  .lot-head__title { font-size: var(--fs-20); line-height: var(--lh-20); }
  .gallery__main { aspect-ratio: 4 / 3; border-radius: 0; border-left: none; border-right: none; }
  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .pricebox__now { font-size: var(--fs-30); line-height: var(--lh-30); }

  .geo-grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: var(--s-6); }
  .toolbar { gap: var(--s-4); }

  /* Размеры под палец. Ниже 44 пикселей по высоте человек промахивается,
     а в списке регионов таких целей было сто четыре из ста шести. */
  .geo-grid a { display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); min-height: 44px; font-size: var(--fs-14);
    border-bottom: 1px solid var(--border); }
  .footer li a, .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .chip-link, .pager__item { min-height: 44px; }
  .btn, .btn--link { min-height: 44px; }
  /* Ссылки внутри заголовков разделов и внутри таблиц тоже цели для
     пальца, а не просто текст: по ним переходят в категорию и на
     площадку. */
  .section__head h2 a, .table td a, .spec dd a, .spec__value a {
    display: inline-flex; align-items: center; min-height: 44px; }
  .chip, .chip--reset { min-height: 44px; padding: 0 var(--s-5); }
  .chip__x { width: 28px; height: 28px; margin-right: calc(var(--s-3) * -1); }
  .check { min-height: 44px; align-items: center; padding: var(--s-3) 0; }
  .fgroup__list { max-height: none; }

  /* Подписи на карточке читались мельче нормы: двенадцать пикселей на
     телефоне это предел разборчивости, а это срок заявок и регион, то
     есть то, по чему выбирают. */
  .lot-card__meta { font-size: var(--fs-13); line-height: var(--lh-13); }
  .lot-card__foot { font-size: var(--fs-13); }
  .status { font-size: var(--fs-13); height: 26px; }
  .table--stack thead { display: none; }
  .table--stack tr { display: block; border-bottom: 1px solid var(--border); padding: var(--s-4) 0; }
  .table--stack td { display: flex; justify-content: space-between; gap: var(--s-5); border: none; padding: var(--s-2) 0; }
  .table--stack td::before { content: attr(data-l); color: var(--text-muted); font-size: var(--fs-12); }

  /* the button to the platform is always within thumb reach */
  .sticky-cta {
    display: flex; gap: var(--s-4); align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(20, 24, 31, .10);
  }
  .sticky-cta .btn { height: var(--tap); }
  .sticky-cta__price { font-size: var(--fs-18); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .sticky-cta__cap { font-size: var(--fs-11); color: var(--text-muted); }
  .has-sticky-cta { padding-bottom: 88px; }
}

/* ============ 14. DOCUMENTATION PAGES ============ */
/* Used only by brand.html, ui-kit.html and preview.html. Not needed in production. */

.doc-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-5) 0; }
.doc-section { padding: var(--s-9) 0 0; }
.doc-title { font-family: var(--font-head); font-size: var(--fs-24); font-weight: 700; padding-bottom: var(--s-3); }
.doc-note { color: var(--text-muted); font-size: var(--fs-13); line-height: 19px; max-width: 760px; padding-bottom: var(--s-6); }
.doc-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-7); }
.doc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--border); }
.doc-row:last-child { border-bottom: none; }
.doc-label { width: 200px; flex: none; color: var(--text-muted); font-size: var(--fs-12); }
.doc-code { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-2); background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 5px; }

.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-4); }
.sw { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.sw__color { height: 62px; }
.sw__meta { padding: var(--s-4); font-size: var(--fs-12); line-height: 16px; }
.sw__meta b { display: block; font-weight: 600; }
.sw__meta span { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-11); }

.preview-wrap { display: flex; gap: var(--s-8); align-items: flex-start; overflow-x: auto; padding-bottom: var(--s-7); }
.frame { border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); flex: none; }
.frame__cap { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); font-size: var(--fs-12); color: var(--text-muted); display: flex; justify-content: space-between; gap: var(--s-5); }
.frame iframe { display: block; border: none; background: var(--bg); }
.frame--desktop iframe { width: 1440px; height: 900px; }
.frame--mobile iframe { width: 375px; height: 812px; }
.frame--desktop { max-width: 100%; }
.zoom-70 { transform: scale(.7); transform-origin: top left; }

/* scaled screenshots for preview.html */
.shots { display: grid; grid-template-columns: 604px 225px; gap: var(--s-7); align-items: start; }
.shot { border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.shot__cap { padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); font-size: var(--fs-12); color: var(--text-muted); }
.shot__box { overflow: hidden; position: relative; }
.shot--desktop .shot__box { width: 604px; height: 378px; }
.shot--desktop iframe { width: 1440px; height: 900px; border: 0; transform: scale(.4194); transform-origin: top left; }
.shot--mobile .shot__box { width: 225px; height: 487px; }
.shot--mobile iframe { width: 375px; height: 812px; border: 0; transform: scale(.6); transform-origin: top left; }
@media (max-width: 900px) { .shots { grid-template-columns: 1fr; } }

/* Пояснение к термину под самим термином.

   Стоит в dt, а не в dd, намеренно: значение в правой колонке
   выровнено по правому краю и набрано полужирным, и объяснение на две
   строки в таком наборе не читается. Слева же оно попадает ровно туда,
   где у человека возникает вопрос. */
.spec--2col > div > .spec__note {
  grid-column: 1 / -1;
  order: 3;
}
.spec--2col > div > .spec__note,
.spec__value .spec__note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-12);
  line-height: 17px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: left;
  max-width: 46ch;
}

/* Условия из извещения приходят абзацем, а не числом. Правое
   выравнивание годится для суммы и ломает три строки текста. */
.spec--text { grid-template-columns: 1fr; }
.spec--text > div { grid-template-columns: 1fr; gap: var(--s-2); }
.spec--text dd {
  text-align: left;
  font-weight: 400;
  line-height: 21px;
  max-width: 78ch;
}
.spec--text dt { font-weight: 600; color: var(--text); }

/* Живой поиск.

   Список висит под строкой поиска, поэтому у формы position: relative.
   Ширина по форме, а не по содержимому: скачущая по ширине панель при
   каждом нажатии клавиши читается как дрожание. */
.header__search { position: relative; }

.podskazki {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--r-12, 12px);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
  padding: var(--s-2, 4px) 0;
}

.podskazki__cap {
  padding: var(--s-4, 8px) var(--s-5, 12px) var(--s-2, 4px);
  font-size: var(--fs-12);
  line-height: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.podskazki__punkt {
  display: block;
  padding: var(--s-4, 8px) var(--s-5, 12px);
  text-decoration: none;
  color: var(--text);
  border-left: 3px solid transparent;
}
.podskazki__punkt:hover,
.podskazki__punkt:focus,
.podskazki__punkt.is-vybran {
  background: var(--surface-2, #f4f6f9);
  border-left-color: var(--accent, #b3541e);
}

.podskazki__title {
  display: block;
  font-size: var(--fs-14);
  line-height: 20px;
  font-weight: 500;
  /* Названия лотов у источника доходят до трехсот знаков. Три строки
     это предел, после которого список перестает быть списком. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.podskazki__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-12);
  line-height: 17px;
  color: var(--text-2, #5b6472);
}
.podskazki__punkt--razdel .podskazki__title { font-weight: 600; }

.podskazki__pusto {
  padding: var(--s-5, 12px);
  font-size: var(--fs-13);
  line-height: 19px;
  color: var(--text-2, #5b6472);
}

.podskazki__vse {
  display: block;
  padding: var(--s-4, 8px) var(--s-5, 12px);
  border-top: 1px solid var(--border);
  margin-top: var(--s-2, 4px);
  font-size: var(--fs-13);
  font-weight: 600;
  text-decoration: none;
  color: var(--accent, #b3541e);
}
.podskazki__vse:hover { text-decoration: underline; }

/* На телефоне форма поиска и так во всю ширину контейнера. Расширять
   панель за ее края нельзя: это дает горизонтальную прокрутку всей
   страницы, проверено замером на 375 пикселях. */
@media (max-width: 767px) {
  .podskazki { max-height: 60vh; }
}

/* Панель фильтров: раскладка до самой кнопки.

   Между .filters и внутренними блоками стоит form, и без нее flex
   обрывался на форме: .filters__scroll не получал flex: 1, форма
   вырастала выше панели, панель обрезала лишнее по overflow: hidden, и
   кнопка "Показать" уезжала на две сотни пикселей ниже дна. Человек,
   отметивший галочку, не видел ее вовсе. Замерено на 1440 пикселях:
   панель 808, форма 954, кнопка на 1227. */
.filters > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.filters__foot { flex: 0 0 auto; }
.filters__foot .btn.is-schitaem { opacity: .7; }
.filters__foot .btn.is-pusto { opacity: .55; cursor: not-allowed; }

/* Просмотр фотографий лота */
.bez-prokrutki { overflow: hidden; }

.prosmotr {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s-4, 8px);
  padding: var(--s-5, 12px);
  background: rgba(12, 16, 22, .92);
}
.prosmotr.is-otkryt { display: flex; }

.prosmotr__ramka {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4, 8px);
}
.prosmotr__kadr {
  max-width: 100%;
  /* Место под подпись и поля: иначе высокий снимок упирается в края и
     кнопку закрытия не нажать. */
  max-height: calc(100vh - 96px);
  object-fit: contain;
  border-radius: var(--r-8, 8px);
  background: #0c1016;
}
.prosmotr__podpis {
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-13);
  line-height: 18px;
}

.prosmotr__zakryt,
.prosmotr__strelka {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.prosmotr__zakryt:hover,
.prosmotr__strelka:hover { background: rgba(255, 255, 255, .24); }
.prosmotr__zakryt:focus-visible,
.prosmotr__strelka:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.prosmotr__zakryt {
  position: absolute;
  top: var(--s-5, 12px);
  right: var(--s-5, 12px);
  font-size: 26px;
}

/* Крупный кадр в карточке тоже кликабельный, и это должно быть видно */
.gallery__main a { display: block; cursor: zoom-in; }

/* На телефоне стрелки по краям съедают ширину снимка, поэтому кладем их
   поверх нижней части кадра, а листать там удобнее свайпом. */
@media (max-width: 767px) {
  .prosmotr { padding: var(--s-4, 8px); }
  .prosmotr__strelka {
    position: absolute;
    bottom: var(--s-6, 16px);
    width: 44px;
    height: 44px;
  }
  .prosmotr__strelka--nazad { left: var(--s-5, 12px); }
  .prosmotr__strelka--vpered { right: var(--s-5, 12px); }
  .prosmotr__kadr { max-height: calc(100vh - 140px); }
}

/* Плавающая кнопка применения фильтров.

   Появляется, когда человек изменил фильтр, а настоящая кнопка панели
   не попала на экран. Прижата к низу окна и учитывает безопасную зону
   телефона, иначе на айфоне она наполовину уезжает под полосу жестов. */
.filtr-plavayushchaya {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-6, 16px) + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 24px);
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.filtr-plavayushchaya.is-vidna {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.filtr-plavayushchaya .btn {
  box-shadow: 0 10px 28px rgba(16, 24, 40, .28);
  white-space: nowrap;
  padding-left: var(--s-7, 20px);
  padding-right: var(--s-7, 20px);
}
.filtr-plavayushchaya .btn[disabled] { opacity: .6; cursor: not-allowed; }

/* На странице лота внизу уже висит своя полоса с ценой и кнопкой на
   площадку. Двум плавающим кнопкам друг на друге места нет, но фильтров
   на карточке и не бывает, так что пересечься они могут только на
   выдаче с мобильной шторкой, где кнопка есть внутри самой шторки. */
.has-sticky-cta .filtr-plavayushchaya { display: none; }

@media (prefers-reduced-motion: reduce) {
  .filtr-plavayushchaya { transition: none; }
}

/* Сохраненный поиск: свернутый блок над выдачей.

   Свернут по умолчанию намеренно: человеку, который просто смотрит
   лоты, он не нужен, а тому, кто ходит сюда каждый день, нужен один
   раз. Развернутая панель на этом месте отодвигала бы выдачу вниз
   всем ради меньшинства. */
.sledit { padding: 0; }
.sledit__head {
  display: flex;
  align-items: center;
  gap: var(--s-4, 8px);
  padding: var(--s-4, 8px) var(--s-5, 12px);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sledit__head::-webkit-details-marker { display: none; }
.sledit__head::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-2, #5b6472);
  border-bottom: 2px solid var(--text-2, #5b6472);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.sledit[open] .sledit__head::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.sledit__head svg { color: var(--accent, #b3541e); flex: 0 0 auto; }
.sledit__head:hover { background: var(--surface-2, #f4f6f9); }
.sledit input[readonly] {
  font-size: var(--fs-13);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-reduced-motion: reduce) {
  .sledit__head::after { transition: none; }
}