/* ==========================================================
   ГРАНАТ — вариант 4 «Галерея»
   Сделано по макету из Figma (кадр antiques-marketplace).
   Антикварный дом: светлый кремовый фон, заголовки с засечками
   в два цвета, золотые надзаголовки, прямые углы, фотографии
   в паспарту, тёмный подвал с водяным знаком.
   ========================================================== */

:root{
  --bg:#faf7f2;            /* фон страницы */
  --bg-2:#f5f1e9;          /* чередующиеся секции */
  --card:#fffefb;
  --ink:#241f1b;           /* основной текст */
  --ink-soft:#3a332d;
  --muted:#6b625a;
  --line:#e4ddd0;          /* волосяные линии */
  --gold:#b08d57;          /* акцент: надзаголовки, вторая строка заголовка */
  --gold-soft:#c9ad7d;
  --dark:#16120f;          /* кнопки и подвал */
  --serif:"Playfair Display","PT Serif","Times New Roman",Times,serif;
  /* the wordmark: heavy grotesque letters in garnet, as the sign on the salon's wall */
  --wordmark:"Arial Black","Arial Bold",Gadget,"Helvetica Neue",Arial,Helvetica,sans-serif;
  --garnet:#7a1730;
}

/* iOS must not inflate text when the phone is turned; the page is light only (no forced dark);
   the root paints the same cream behind the notch letterbox */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#faf7f2;color-scheme:only light}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.65;overflow-wrap:break-word;
}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* ---------- Типографика ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:.01em}
h1{font-size:54px;line-height:1.18;margin:0 0 26px}
h2{font-size:38px;line-height:1.25;margin:0 0 10px}
h3{font-size:19px;margin:0 0 10px}
.gold{color:var(--gold)}
.eyebrow{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin:0 0 16px;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex:0 0 auto}
.eyebrow.center{justify-content:center}
.eyebrow.plain::before{display:none}
.lead{font-size:16px;color:var(--muted);max-width:520px;margin:0 0 34px}
.sub{color:var(--muted);margin:0 0 26px}
.label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin:0 0 4px;
}

/* ==========================================================
   ЗНАЧКИ — SVG прямо в CSS, ничего не загружается.
   Цвет значка = цвет текста рядом.
   ========================================================== */
.ico{
  display:inline-block;width:21px;height:21px;flex:0 0 auto;vertical-align:-4px;
  background-color:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
.i-image{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='8.5' cy='10' r='1.6'/><path d='m4 17 4.5-4.5 3 3L15 12l5 5'/></svg>")}
.i-sofa{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 11.2V7.6a2.2 2.2 0 0 1 2.2-2.2h9.6A2.2 2.2 0 0 1 19 7.6v3.6'/><rect x='2.6' y='11.2' width='18.8' height='6.4' rx='2.2'/><path d='M12 11.6v6'/><path d='M5.6 17.6v2.2M18.4 17.6v2.2'/></svg>")}
.i-search{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.8' cy='10.8' r='6.6'/><path d='m15.6 15.6 4.8 4.8'/></svg>")}
.i-call{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6.4 3.4h3.1l1.5 4-2 1.4a12.2 12.2 0 0 0 6.2 6.2l1.4-2 4 1.5v3.1a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.4 5.6a2 2 0 0 1 2-2.2Z'/></svg>")}
.i-heart{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.4S3.6 15.1 3.6 9.4A4.4 4.4 0 0 1 12 7.2a4.4 4.4 0 0 1 8.4 2.2c0 5.7-8.4 11-8.4 11Z'/></svg>")}
.i-camera{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2.6' y='7.4' width='18.8' height='12.6' rx='2'/><path d='M8.2 7.4 9.6 4.9h4.8l1.4 2.5'/><circle cx='12' cy='13.8' r='3.8'/></svg>")}
.i-star{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='m12 3.6 2.6 5.4 5.9.9-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9L3.5 9.9l5.9-.9Z'/></svg>")}
.i-cart{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9.6' cy='19.8' r='1.5'/><circle cx='17.4' cy='19.8' r='1.5'/><path d='M2.6 3.6h2.7l2.5 11.4h11l2-8.3H6.4'/></svg>")}
.i-truck{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 6.6h10.9v9.4H2.6z'/><path d='M13.5 9.8h3.9l3 3.1v3.1h-6.9z'/><circle cx='6.8' cy='17.8' r='1.7'/><circle cx='17.3' cy='17.8' r='1.7'/></svg>")}
.i-shield{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 20 6v5.5c0 4.4-3.2 7.9-8 9.5-4.8-1.6-8-5.1-8-9.5V6Z'/><path d='m8.6 12 2.4 2.4 4.4-4.6'/></svg>")}
.i-card{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2.6' y='5.4' width='18.8' height='13.2' rx='2.2'/><path d='M2.6 9.8h18.8'/><path d='M6.4 14.6h4'/></svg>")}
.i-trash{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 6.8h15'/><path d='M9.5 6.8V4.9h5v1.9'/><path d='M6.6 6.8 7.6 20a1 1 0 0 0 1 .9h6.8a1 1 0 0 0 1-.9l1-13.2'/><path d='M10.4 10.5v6.6M13.6 10.5v6.6'/></svg>")}
.i-box{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3 8.5 4.4v9.2L12 21l-8.5-4.4V7.4Z'/><path d='m3.5 7.4 8.5 4.4 8.5-4.4M12 11.8V21'/></svg>")}
.i-frame{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='1.4'/><rect x='6' y='7' width='12' height='10' rx='.8'/><path d='m6.8 17 3.4-4 2.2 2.4 2.4-3 2.4 4.6'/></svg>")}
.i-icon{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5.2 21V9.6a6.8 6.8 0 0 1 13.6 0V21Z'/><circle cx='12' cy='10.4' r='2.3'/><path d='M12 13.2V17M10.2 14.8h3.6'/></svg>")}
.i-vase{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9.4 3.6h5.2v2.2c0 1.2 3 2.6 3 6.4 0 5-2.4 8.2-5.6 8.2S6.4 17.2 6.4 12.2c0-3.8 3-5.2 3-6.4Z'/><path d='M7 11.6c3.4 1.6 6.6 1.6 10 0'/></svg>")}
.i-cutlery{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3.4v7.2a2.4 2.4 0 0 0 2.4 2.4h.2V21'/><path d='M7 3.4v4.8M9.6 3.4v4.8'/><path d='M16.4 3.4c-1.6 1.4-2.2 3.6-2.2 6 0 1.6.8 2.6 2.2 2.8V21'/></svg>")}
.i-statue{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='6.6' r='3'/><path d='M8.4 17.4 9.6 13a3.4 3.4 0 0 1 4.8 0l1.2 4.4Z'/><path d='M7.6 17.4h8.8v1.8H7.6Z'/><path d='M9.4 19.2h5.2V21H9.4Z'/></svg>")}
.i-clock{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><path d='M12 6.8V12l3.4 2.2'/></svg>")}
.i-coin{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9.4' cy='9.4' r='5.8'/><circle cx='14.6' cy='14.6' r='5.8'/></svg>")}
.i-medal{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='15.2' r='5.2'/><circle cx='12' cy='15.2' r='1.9'/><path d='m8.6 10.6-3.2-7.2h4.2L12 8.4l2.4-5h4.2l-3.2 7.2'/></svg>")}
.i-book{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4.6h5.6A2.4 2.4 0 0 1 12 7v13a2 2 0 0 0-2-2H4Z'/><path d='M20 4.6h-5.6A2.4 2.4 0 0 0 12 7v13a2 2 0 0 1 2-2h6Z'/></svg>")}
.i-gem{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m12 21 9-12-3.4-6H6.4L3 9Z'/><path d='M3 9h18M8.6 3 12 21 15.4 3'/></svg>")}
.i-lamp{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v3'/><path d='M4.8 13.4 12 6l7.2 7.4Z'/><path d='M9.6 13.4a2.4 2.4 0 0 0 4.8 0'/></svg>")}
.i-glass{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6.8 3.6h10.4l-.9 5.6a4.7 4.7 0 0 1-8.6 0Z'/><path d='M12 13.8v6.4'/><path d='M8.2 20.4h7.6'/></svg>")}
.i-gift{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='9.4' width='18' height='4.2' rx='1'/><path d='M4.6 13.6V20a1 1 0 0 0 1 1h12.8a1 1 0 0 0 1-1v-6.4'/><path d='M12 9.4V21'/><path d='M12 9.4S10.9 5 8.7 5a2.2 2.2 0 0 0 0 4.4Z'/><path d='M12 9.4S13.1 5 15.3 5a2.2 2.2 0 0 1 0 4.4Z'/></svg>")}
.i-doc{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.4h8l4 4V20a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4.4a1 1 0 0 1 1-1Z'/><path d='M13.6 3.6V8h4.2'/><path d='M8.4 13h7M8.4 16.6h4.6'/></svg>")}
:root{--heart-fill:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M12 20.4S3.6 15.1 3.6 9.4A4.4 4.4 0 0 1 12 7.2a4.4 4.4 0 0 1 8.4 2.2c0 5.7-8.4 11-8.4 11Z'/></svg>")}
.on .i-heart{--ico:var(--heart-fill)}

/* ---------- Шапка ---------- */
.nav{background:var(--bg);border-bottom:1px solid var(--line)}
/* края не уже своего содержимого: строка меню не переносится ни при каком шрифте, логотип
   сдвигается от центра на несколько px, только когда места впритык */
.nav-in{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:20px;padding-top:18px;padding-bottom:18px}
.lang{display:flex;align-items:center;gap:8px;position:relative;font-size:11px;letter-spacing:.12em}
/* переключатель языка: ссылки на эту же страницу на русском, казахском и английском */
.lang a{
  display:inline-block;color:var(--muted);text-transform:uppercase;font-weight:600;text-decoration:none;
  border:1px solid var(--line);border-radius:2px;padding:7px 12px;line-height:1;background:transparent;
}
.lang a:hover{border-color:var(--gold-soft);color:var(--ink)}
.lang a.on{color:var(--ink);border-color:var(--gold);background:var(--card)}
.brand{text-align:center;text-decoration:none;display:block}
/* the wordmark is drawn (img/granat.svg): the letters of the salon's wall sign on every device */
.brand .wordmark{display:block;height:30px;width:auto;margin:0 auto}
.brand span{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  display:block;margin-top:4px;text-indent:.24em;
}
.menu{display:flex;align-items:center;justify-content:flex-end;gap:30px;flex-wrap:wrap}
.menu a{
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-soft);
}
.menu a:hover{color:var(--gold)}
/* кнопка внутри меню: .menu a специфичнее .btn-*, цвет надо вернуть явно */
.menu a.btn-dark{color:#f6f1e8}
.menu a.btn-dark:hover{color:#fff}
.menu a.btn-out{color:var(--ink)}
.menu a.btn-out:hover{color:var(--bg)}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border:1px solid transparent;border-radius:2px;cursor:pointer;
  font-family:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;text-decoration:none;
}
.btn-dark{background:var(--dark);color:#f6f1e8}
.btn-dark:hover{background:#000;color:#fff}
.btn-out{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-out:hover{background:var(--ink);color:var(--bg)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#9b7a49;color:#fff}
.btn-sm{padding:11px 20px;font-size:11px}
.link-more{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--gold);font-weight:600;white-space:nowrap;
}
.link-more:hover{color:var(--ink)}

/* ==========================================================
   МЕСТО ПОД ФОТОГРАФИЮ
   В макете каждый блок держит снимок. Пока их нет, подложка
   сделана похожей на фотографию: тёплая, тёмная, с виньеткой.
   Настоящее фото ставится так — внутрь блока кладём <img>:
   <span class="ph"><img src="foto/chasy.jpg" alt="Часы"></span>
   ========================================================== */
.ph{
  background:
    radial-gradient(115% 85% at 28% 18%, rgba(255,236,201,.40), rgba(255,236,201,0) 62%),
    radial-gradient(95% 85% at 82% 92%, rgba(32,20,11,.55), rgba(32,20,11,0) 68%),
    linear-gradient(148deg,#7d5f40 0%,#5e452d 46%,#3b2a1a 100%);
  color:#efe0c6;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.ph::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 70px rgba(25,15,8,.5);pointer-events:none}
.ph .ico{opacity:.38}
.ph img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
/* паспарту: светлая рамка с волосяной линией вокруг снимка */
.mat{display:block;background:var(--card);border:1px solid var(--line);padding:14px}

/* ---------- Первый экран ---------- */
.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:56px;align-items:center;padding-top:86px;padding-bottom:86px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero .ph{aspect-ratio:4/3}
.hero .ph .ico{width:92px;height:92px}

/* ---------- Секции ---------- */
.section{padding-top:78px;padding-bottom:78px}
.section-2{background:var(--bg-2)}
.section-head{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.section-head>div{flex:1 1 320px;min-width:0}
.section-head h2{margin:0}
.section-head .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.arrow{
  width:38px;height:38px;border:1px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--ink);border-radius:2px;font-size:15px;
}
.arrow:hover{border-color:var(--ink)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- Категории экспозиции ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px}
.cat{text-decoration:none;display:block}
.cat .ph{aspect-ratio:1/1}
.cat .ph .ico{width:34px;height:34px}
.cat .mat{padding:8px}
.cat b{font-family:var(--serif);font-weight:400;font-size:17px;display:block;margin:14px 0 2px}
.cat span{font-size:12.5px;color:var(--muted)}
.cat:hover b{color:var(--gold)}

/* ---------- Лоты ---------- */
.lots{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.lots-3{grid-template-columns:repeat(3,1fr)}
.lots-2{grid-template-columns:repeat(2,1fr)}
.lot{
  background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;
  position:relative;
}
.lot:hover{border-color:var(--gold-soft)}
.lot .ph{aspect-ratio:4/3}
.lot .ph .ico{width:46px;height:46px}
.lot-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.lot-origin{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.lot-title{
  font-family:var(--serif);font-size:19px;font-weight:400;text-decoration:none;display:block;
  margin-bottom:16px;line-height:1.35;
}
.lot:hover .lot-title{color:var(--gold)}
.lot-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
}
.lot-price{font-family:var(--serif);font-size:19px}
.lot-price.ask{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tag{
  position:absolute;top:14px;left:14px;z-index:2;background:rgba(250,247,242,.94);color:var(--ink);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:6px 11px;
}
.lot.sold .ph{filter:grayscale(.7);opacity:.62}
.lot.sold .tag{background:rgba(40,33,28,.9);color:#e8dfd2}

/* ---------- О салоне ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about .ph{aspect-ratio:4/5}
.about .ph .ico{width:86px;height:86px}
.quote-text{font-size:16px;color:var(--ink-soft);margin:0 0 26px}
.sign{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px}
.sign b{font-family:var(--serif);font-weight:400;font-size:19px;display:block}
.sign .role{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sign .mark{margin-left:auto;font-family:var(--serif);font-size:22px;color:var(--gold-soft);font-style:italic}

/* ---------- Условия ---------- */
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.term{background:var(--card);border:1px solid var(--line);padding:28px 26px}
.term .box{
  width:38px;height:38px;border:1px solid var(--gold-soft);display:flex;align-items:center;
  justify-content:center;margin-bottom:18px;
}
.term .ico{width:19px;height:19px;color:var(--gold)}
.term p{margin:0;font-size:14px;color:var(--muted)}

/* ---------- Контакты ---------- */
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.contact-row{margin-bottom:22px}
.contact-row p{margin:0;font-size:16px}
.contacts .ph{aspect-ratio:4/3}
.contacts .ph .ico{width:70px;height:70px}

/* ---------- Каталог ---------- */
.cat-cols{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:start;padding-top:44px;padding-bottom:80px}
.cat-cols>*{min-width:0}
.filters{position:-webkit-sticky;position:sticky;top:16px}
.fgroup{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.fgroup:last-of-type{border-bottom:0}
.check{display:flex;align-items:center;gap:11px;padding:6px 0;font-size:15px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--gold)}
.check .num{margin-left:auto;font-size:12px;color:var(--muted)}
.two{display:flex;gap:10px}
.two input{
  width:100%;height:42px;border:1px solid var(--line);background:var(--card);
  padding:0 12px;font-size:14px;font-family:inherit;color:var(--ink);border-radius:2px;
}
.crumbs{font-size:12px;letter-spacing:.06em;color:var(--muted);padding-top:26px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs span{margin:0 8px;color:var(--line)}
.pager{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:44px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--card);text-decoration:none;font-size:13px;
  padding:0 14px;border-radius:2px;
}
.pager .cur{background:var(--dark);color:#f6f1e8;border-color:var(--dark)}
.pager a:hover{border-color:var(--ink)}

/* ---------- «Скоро аукцион»: объявленные заранее, над первым экраном главной ---------- */
.announce{background:var(--dark);color:#f4ece0;padding:14px 0}
.announce p{margin:0;font-size:14px;line-height:1.5;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.announce p+p{margin-top:8px}
.announce a{color:#f4ece0;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.announce a:hover{color:var(--gold-soft)}
.announce-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}

/* ---------- Фото вещи на весь экран (gallery.js) ---------- */
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.zoom-hint{
  position:absolute;right:12px;top:12px;z-index:2;width:40px;height:40px;border-radius:50%;pointer-events:none;
  background:rgba(22,18,15,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4ece0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.8v5.4M7.8 10.5h5.4'/%3E%3C/svg%3E") center/20px no-repeat;
  opacity:0;transition:opacity .15s;
}
.zoomable:hover .zoom-hint,.zoomable:focus-visible .zoom-hint{opacity:1}
/* phones cannot hover: the sign is always there */
@media (hover:none){.zoom-hint{opacity:.85}}
.zoom-open,.zoom-open body{overflow:hidden}
.zoom{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:rgba(12,10,8,.93);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.zoom:active{cursor:grabbing}
.zoom-img{position:absolute;left:0;top:0;width:auto;height:auto;max-width:none;max-height:none;transform-origin:0 0;box-shadow:0 12px 40px rgba(0,0,0,.45);-webkit-user-drag:none}
.zoom button{
  position:absolute;z-index:1;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.12);
  color:#f4ece0;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.zoom button:hover,.zoom button:focus-visible{background:rgba(255,255,255,.26);outline:none}
.zoom-close{top:14px;right:14px}
.zoom-prev{left:14px;top:50%;transform:translateY(-50%)}
.zoom-next{right:14px;top:50%;transform:translateY(-50%)}
.zoom-count{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);color:#cbbfae;font-size:13px;letter-spacing:.1em;background:rgba(0,0,0,.35);padding:4px 12px;border-radius:12px}
.delivery-note{color:var(--ink-soft)}

/* ---------- Страница предмета ---------- */
.item{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-top:36px;padding-bottom:80px}
.item .ph{aspect-ratio:4/3}
.item .ph .ico{width:96px;height:96px}
.thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.thumb{width:92px;height:70px;border:1px solid var(--line);padding:5px;cursor:pointer;background:var(--card)}
.thumb .ph{width:100%;height:100%;aspect-ratio:auto}
.thumb .ico{width:20px;height:20px}
.thumb.on,.thumb:hover{border-color:var(--gold)}
.status{
  display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-soft);padding:7px 14px;margin-bottom:20px;
}
.price-line{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;margin:26px 0;
}
.price-line .val{font-family:var(--serif);font-size:38px}
.specs{list-style:none;margin:26px 0;padding:0;font-size:15px}
.specs li{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.specs li:last-child{border-bottom:0}
.specs .k{flex:0 0 150px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding-top:3px}
.after{font-size:13px;color:var(--muted);margin:14px 0 0}

/* ---------- Подвал ---------- */
footer{background:var(--dark);color:#cbbfae;padding:64px 0 0;position:relative;overflow:hidden}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;position:relative;z-index:1}
.fbrand .wordmark{display:block;height:24px;width:auto}
.fbrand span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:block;margin-top:5px}
.fcols p{font-size:13.5px;color:#a3978a;margin:16px 0 0}
.ftitle{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.flist{list-style:none;margin:0;padding:0}
.flist li{margin-bottom:11px}
.flist a{color:#cbbfae;text-decoration:none;font-size:14px}
.flist a:hover{color:#fff}
.fmail{display:flex;gap:10px;margin-top:14px;border-bottom:1px solid #3a322a;padding-bottom:8px}
.fmail input{
  flex:1;min-width:0;background:none;border:0;color:#e6dbcc;font-family:inherit;font-size:14px;padding:4px 0;
}
.fmail input::placeholder{color:#7d7266}
.fmail button{background:none;border:0;color:var(--gold);cursor:pointer;font-size:16px}
.watermark{
  font-family:var(--wordmark);font-weight:900;font-size:130px;letter-spacing:.06em;color:rgba(255,255,255,.035);
  text-align:center;margin:26px 0 0;line-height:1;user-select:none;white-space:nowrap;
}
.fbottom{
  border-top:1px solid #2b241e;margin-top:10px;padding:20px 0 26px;
  display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:#7d7266;position:relative;z-index:1;
}
.fbottom .right{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap}
.fbottom a{color:#7d7266;text-decoration:none}
.fbottom a:hover{color:#cbbfae}

/* ---------- Адаптив ---------- */
@media (max-width:1100px){
  h1{font-size:42px}
  h2{font-size:32px}
  .cats{grid-template-columns:repeat(3,1fr)}
  .lots,.lots-3{grid-template-columns:repeat(2,1fr)}
  .fcols{grid-template-columns:repeat(2,1fr)}
  .watermark{font-size:80px}
}
/* меню занимает 455px: ниже 1160 оно уже не помещается рядом с именем салона */
@media (max-width:1160px){
  .nav-in{grid-template-columns:1fr;gap:14px;justify-items:center;text-align:center}
  .menu{justify-content:center;gap:22px}
}
@media (max-width:860px){
  .wrap{padding:0 20px}
  .hero,.about,.contacts,.item{grid-template-columns:1fr;gap:34px}
  .hero{padding-top:44px;padding-bottom:44px}
  .section{padding-top:52px;padding-bottom:52px}
  .cat-cols{grid-template-columns:1fr;gap:28px}
  .filters{position:static}
  .terms{grid-template-columns:1fr}
}
@media (max-width:560px){
  h1{font-size:32px}
  h2{font-size:26px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .lots,.lots-2,.lots-3{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr}
  .watermark{font-size:46px}
  .specs li{flex-direction:column;gap:2px}
  .specs .k{flex:none}
}

/* ==========================================================
   Добавлено для серверной версии (Rust/axum)
   ========================================================== */
.page-title{margin:0 0 14px}
.item-title{font-size:40px;margin:0 0 20px}
.price-line .val.ask{font-size:20px;color:var(--muted)}
.sort .link-more{color:var(--muted)}
.sort .link-more.on,.sort .link-more:hover{color:var(--gold)}
.factions{display:flex;gap:10px;flex-wrap:wrap}
.empty{background:var(--card);border:1px solid var(--line);padding:44px 28px;text-align:center}
.lot a.ph{text-decoration:none}
button.thumb{appearance:none;font:inherit;color:inherit}
@media (max-width:560px){
  .item-title{font-size:28px}
  .price-line .val{font-size:30px}
  .price-line .val.ask{font-size:18px}
}

/* ==========================================================
   Аукционы, вход участников, «Мои ставки»
   ========================================================== */
.nav-left{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.acct{
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-soft);border-bottom:1px solid var(--gold-soft);padding-bottom:2px;
}
.acct:hover{color:var(--gold)}
.menu-form{display:inline;margin:0}
@media (max-width:1160px){ .nav-left{justify-content:center} }

.tag-auction{background:var(--dark);color:#f6f1e8}
.lot-bid{display:flex;flex-direction:column;gap:3px;min-width:0}
.lot-note{font-size:11px;letter-spacing:.04em;color:var(--muted)}

.auction{border:1px solid var(--line);background:var(--card);padding:24px 24px 20px;margin:22px 0 0}
.auction .price-line{margin:0 0 12px;border-top:0;padding-top:0}
.au-timer{
  margin-left:auto;font-size:13px;letter-spacing:.04em;color:var(--gold);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.au-meta{font-size:13px;color:var(--muted);margin:0 0 6px}
.au-reserve{font-size:13px;color:var(--gold);margin:0 0 6px}
.au-reserve:empty{display:none}
.flash{padding:12px 14px;font-size:14px;margin:0 0 14px;border-left:3px solid}
.flash.ok{background:#eef4ec;border-color:#4d7a45;color:#2f5428}
.flash.err{background:#fbefe9;border-color:#b0563a;color:#8a3a22}
.you{padding:12px 14px;font-size:14px;margin:12px 0 4px;border-left:3px solid}
.you-lead{background:#eef4ec;border-color:#4d7a45;color:#2f5428}
.you-outbid{background:#fbefe9;border-color:#b0563a;color:#8a3a22}
.you-won{background:#f6efe0;border-color:var(--gold);color:#6d5228}
.you-lost,.you-none{background:var(--bg-2);border-color:var(--line);color:var(--muted)}
.bid-label{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin:18px 0 8px;
}
.bid-row{display:flex;gap:10px;flex-wrap:wrap}
.bid-row input{
  flex:1 1 180px;min-width:0;height:50px;border:1px solid var(--line);background:var(--bg);
  padding:0 14px;font-size:18px;font-family:inherit;color:var(--ink);border-radius:2px;
}
.bid-row input:focus{outline:none;border-color:var(--gold)}
.au-history{margin-top:22px}
.au-tbl{width:100%;border-collapse:collapse;font-size:14px}
.au-tbl td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.au-tbl td.num{white-space:nowrap;text-align:right;padding-right:0}
.au-tbl .when{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:400;white-space:nowrap}
.au-tbl tr.me td{font-weight:600}
.auto{
  display:inline-block;line-height:1.3;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;
  border:1px solid var(--line);padding:1px 5px;margin-left:4px;vertical-align:1px;
}
.au-list{padding-top:10px;padding-bottom:70px}
.au-group{font-size:26px;margin:36px 0 20px}

.wrap.narrow{max-width:760px}
.panel-card{background:var(--card);border:1px solid var(--line);padding:34px;margin:26px 0 70px}
.form{display:flex;flex-direction:column;gap:6px;margin-top:20px;align-items:stretch}
.form .lbl{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin-top:12px;
}
.form .hint{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400}
.form input:not([type=checkbox]){
  height:50px;border:1px solid var(--line);background:var(--bg);padding:0 14px;font-size:17px;
  font-family:inherit;color:var(--ink);border-radius:2px;width:100%;
}
.form input:focus{outline:none;border-color:var(--gold)}
.form .btn{margin-top:14px;align-self:flex-start}
.check-line{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:14px 0 4px;cursor:pointer}
.check-line input{width:17px;height:17px;margin-top:2px;accent-color:var(--gold);flex:0 0 auto}
.code-input{font-size:28px !important;letter-spacing:.4em;text-align:center}

.my-list{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.my-row{
  display:grid;grid-template-columns:1fr auto;gap:6px 20px;padding:18px 20px;border:1px solid var(--line);
  border-left:3px solid var(--line);background:var(--card);text-decoration:none;color:inherit;
}
.my-row:hover{border-color:var(--gold-soft)}
.my-lead{border-left-color:#4d7a45}
.my-outbid{border-left-color:#b0563a}
.my-won{border-left-color:var(--gold)}
.my-title{min-width:0}
.my-title b{font-family:var(--serif);font-weight:400;font-size:18px;display:block}
.my-title span{font-size:12px;color:var(--muted)}
.my-state{font-size:14px;align-self:center;text-align:right}
.my-nums{grid-column:1/-1;display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.logout{margin:30px 0 70px}
@media (max-width:560px){
  .my-row{grid-template-columns:1fr}
  .my-state{text-align:left}
  .auction{padding:18px 16px}
  .panel-card{padding:24px 18px}
}


/* ==========================================================
   Телефоны и сенсорные экраны
   От 280 px (Galaxy Fold сложенный) до планшетов. Телефон «лёжа»
   получает ту же компактную шапку, что и телефон «стоя».
   ========================================================== */

/* длинные слова и номера переносятся, а не раздвигают страницу */
h1,h2,h3,.lot-title,.item-title,.quote-text,.my-title b{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
/* колонки сеток могут сжиматься уже своего содержимого */
.hero>*,.about>*,.contacts>*,.item>*,.cats>*,.lots>*,.terms>*,.fcols>*{min-width:0}
img{max-width:100%}

/* ---------- разделы над вещами: ряд разделов, подразделы раскрываются при наведении ---------- */
.secbar{display:flex;flex-wrap:wrap;gap:2px 26px;margin:30px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.sec{position:relative}
.sec-a{
  display:inline-flex;align-items:center;min-height:40px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);border-bottom:1px solid transparent;white-space:nowrap;
}
.sec-a:hover,.sec-a.on{color:var(--gold)}
.sec-a.on{border-bottom-color:var(--gold)}
.sec-drop{
  display:none;position:absolute;left:-16px;top:100%;z-index:40;min-width:250px;padding:8px 0;
  background:var(--card);border:1px solid var(--line);box-shadow:0 18px 36px rgba(22,18,15,.14);
}
/* the last two open leftwards, so a panel never runs off the screen */
.sec:nth-last-child(-n+2) .sec-drop{left:auto;right:-16px}
.sec-drop a{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:9px 16px;font-size:15px;color:var(--ink);text-decoration:none}
.sec-drop a span{color:var(--muted);font-size:12px}
.sec-drop a:hover,.sec-drop a.on{background:var(--bg-2);color:var(--gold)}
.sec-drop .sec-drop-all{border-bottom:1px solid var(--line);margin-bottom:4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
/* only a real mouse opens the panel; a finger goes to the section, where the row below lists its subsections */
@media (hover:hover) and (pointer:fine){
  .sec:hover .sec-drop,.sec:focus-within .sec-drop{display:block}
}
.subbar{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.chip{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid var(--line);
  background:var(--card);font-size:14px;color:var(--ink);text-decoration:none;border-radius:2px;white-space:nowrap;
}
.chip span{font-size:12px;color:var(--muted)}
.chip:hover{border-color:var(--gold-soft)}
.chip.on{border-color:var(--gold);color:var(--gold)}
.chip.on span{color:var(--gold)}
/* phones and touch screens: both rows scroll sideways instead of wrapping into a wall of links */
@media (max-width:860px), (hover:none){
  .secbar,.subbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .secbar{gap:0 22px;padding-bottom:2px}
  .sec,.chip{flex:0 0 auto}
  .sec-drop{display:none !important}
}
@media (pointer:coarse), (max-width:560px), (max-height:500px) and (max-width:1160px){
  .sec-a,.chip{min-height:44px}
  .sec-a{min-width:44px;justify-content:center}
}

/* меню телефона и кнопка фильтров: на компьютере их нет */
.mnav{display:none}
.ffold-btn{display:none}
.mnav-btn::-webkit-details-marker,.ffold-btn::-webkit-details-marker{display:none}
.mnav-btn::marker,.ffold-btn::marker{content:""}

/* поля ввода 16px: мельче - и iPhone увеличивает страницу при каждом нажатии на поле */
@media (max-width:1160px), (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea{font-size:16px !important}
}

/* ---------- пальцу нужно место: крупные цели на сенсорных экранах ---------- */
@media (pointer:coarse), (max-width:560px), (max-height:500px) and (max-width:1160px){
  .btn{min-height:46px}
  .btn-sm{min-height:44px;padding-top:0;padding-bottom:0}
  .menu a:not(.btn){padding:12px 2px;min-width:44px;text-align:center}
  .lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
  .acct{display:inline-flex;align-items:center;min-height:44px}
  .link-more{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-block;padding:12px 0;min-width:44px;text-align:center}
  .check{min-height:44px;padding:8px 0}
  .check input,.check-line input{width:20px;height:20px}
  .check-line{min-height:44px;align-items:center}
  .pager a,.pager span{min-width:44px;height:44px}
  .arrow{width:44px;height:44px}
  .flist li{margin:0}
  .flist a,.fbottom a{display:inline-flex;align-items:center;min-height:44px}
  .fmail button{min-width:44px;min-height:44px}
  .contact-row a{display:inline-block;padding:10px 0}
  /* ссылка внутри фразы: цель под палец, а межстрочный интервал прежний */
  .lead a{display:inline-block;padding:10px 0;margin:-10px 0}
  .au-tbl td{padding:11px 10px 11px 0}
  .two input{height:44px}
}

/* ---------- компактная шапка: телефон (и раскрытый складной), планшет стоя, телефон «лёжа» ---------- */
@media (max-width:900px), (max-height:500px) and (max-width:1160px){
  .nav{position:relative}
  .nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px;text-align:left}
  .nav-left,.menu{display:none}
  .brand{text-align:left;min-width:0;min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .brand .wordmark{height:22px;margin:0}
  .brand span{font-size:11px;letter-spacing:.16em;text-indent:0;margin-top:3px}
  .mnav{display:block;flex:0 0 auto}
  .mnav-btn{
    display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--ink);
    border-radius:2px;background:var(--card);cursor:pointer;list-style:none;
    -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  }
  .mnav-ico{display:block;width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
  .mnav-close{display:none}
  .mnav[open] .mnav-open,.mnav[open] .mnav-ico{display:none}
  .mnav[open] .mnav-close{display:inline}
  .mnav[open] .mnav-btn{background:var(--dark);border-color:var(--dark);color:#f6f1e8}
  .mnav-panel{
    position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--bg);
    border-bottom:1px solid var(--line);box-shadow:0 22px 40px rgba(22,18,15,.18);
    padding:4px 20px 22px;max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  .mnav-links a{
    display:flex;align-items:center;min-height:54px;border-bottom:1px solid var(--line);
    text-decoration:none;color:var(--ink);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  }
  .mnav-links a::after{content:"\2192";margin-left:auto;padding-left:12px;color:var(--gold)}
  .mnav-cta{display:flex;flex-direction:column;gap:10px;margin:18px 0 0}
  .mnav-cta .btn{width:100%}
  .mnav-lang{margin-top:18px}
}

/* шире 600px (раскрытый складной, планшет, телефон «лёжа») меню - карточка под кнопкой,
   а не полоса во всю ширину экрана */
@media (min-width:600px) and (max-width:900px), (min-width:600px) and (max-height:500px) and (max-width:1160px){
  .mnav{position:relative}
  .mnav-panel{left:auto;right:0;top:calc(100% + 11px);width:360px;border:1px solid var(--line)}
}

/* ---------- мелкие подписи: телефон в любом положении ---------- */
@media (max-width:560px), (max-height:500px) and (max-width:1160px){
  .tag{font-size:11px}
  .auto{font-size:10.5px}
  .fbrand span{font-size:11px}
}

/* ---------- фильтры коллекции: на телефоне свёрнуты в одну строку ---------- */
@media (max-width:860px){
  .ffold-btn{
    display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;
    border:1px solid var(--line);background:var(--card);cursor:pointer;list-style:none;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  }
  .ffold-hint::after{content:"\25BE";color:var(--gold);font-size:15px}
  .ffold[open] .ffold-hint::after{content:"\25B4"}
  .ffold[open]>.ffold-btn{margin-bottom:20px}
  .fgroup{margin-bottom:20px;padding-bottom:16px}
}

/* ---------- телефон ---------- */
@media (max-width:560px){
  .hero{padding-top:28px;padding-bottom:36px;gap:26px}
  .hero-actions .btn{flex:1 1 auto}
  .section{padding-top:44px;padding-bottom:44px}
  .section-head{margin-bottom:24px}
  .eyebrow{font-size:11.5px;gap:10px}
  .eyebrow::before{width:24px}
  .lead{font-size:16px}
  .tag{padding:6px 10px}
  .lot-origin{font-size:11.5px}
  .lot-body{padding:16px 16px 14px}
  .lot-note{font-size:12px}
  .item{padding-top:20px;padding-bottom:56px;gap:24px}
  .price-line{padding:16px 0;margin:20px 0}
  .bid-row .btn{flex:1 1 100%}
  .auction{margin-top:18px}
  .terms{gap:14px}
  .term{padding:22px 20px}
  .contacts{gap:28px}
  .cat-cols{padding-top:24px;padding-bottom:56px}
  .crumbs{padding-top:16px}
  .page-title{font-size:30px}
  .fcols{gap:26px}
  .fbottom{flex-direction:column;gap:2px}
  .fbottom .right{margin-left:0}
  .watermark{font-size:44px;letter-spacing:.12em}
  .au-group{font-size:23px;margin:28px 0 16px}
}

/* ---------- самые узкие: старый iPhone SE, Galaxy Fold, крупный шрифт в настройках ---------- */
@media (max-width:400px){
  .wrap{padding-left:16px;padding-right:16px}
  h1{font-size:28px}
  h2{font-size:24px}
  .page-title{font-size:27px}
  .item-title{font-size:25px}
  .price-line .val{font-size:27px}
  .cats{gap:12px}
  .cat b{font-size:15px}
  .btn{padding-left:18px;padding-right:18px;letter-spacing:.1em}
  .mnav-panel{padding:4px 16px 20px}
  .brand .wordmark{height:20px}
  .panel-card{padding:22px 16px}
  .auction{padding:16px 14px}
}
@media (max-width:320px){
  .cats{gap:10px}
  .mnav-btn{padding:0 10px;gap:8px}
  .lang a{padding:0 11px}
}
/* уже 300px (Galaxy Fold, iPhone SE с увеличением): кнопка меню - один значок, иначе подпись
   под логотипом переносится и шапка вырастает вдвое; слово остаётся для программ чтения с экрана */
@media (max-width:300px){
  .mnav-btn{width:44px;padding:0;justify-content:center}
  .mnav-open,.mnav-close{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .mnav[open] .mnav-ico{display:block;position:relative;background:transparent;box-shadow:none}
  .mnav[open] .mnav-ico::before,.mnav[open] .mnav-ico::after{content:"";position:absolute;left:0;top:0;width:16px;height:2px;background:currentColor;transform:rotate(45deg)}
  .mnav[open] .mnav-ico::after{transform:rotate(-45deg)}
}

/* ---------- старые телефоны: iOS 14 и раньше, старый Android ---------- */
/* без aspect-ratio рамки под фото схлопнулись бы в ноль */
@supports not (aspect-ratio: 1 / 1){
  .hero .ph::before,.lot .ph::before,.item .ph::before,.contacts .ph::before{content:"";display:block;padding-top:75%}
  .cat .ph::before{content:"";display:block;padding-top:100%}
  .about .ph::before{content:"";display:block;padding-top:125%}
}
/* gap во flex появился в Safari 14.1 - вместе с inset: без них элементы слиплись бы */
@supports not (inset: 0){
  .hero-actions>*,.factions>*,.bid-row>*{margin:0 10px 10px 0}
  .menu>*+*{margin-left:26px}
  .lang>*+*,.nav-left>*+*,.mnav-btn>*+*{margin-left:10px}
  .eyebrow::before{margin-right:14px}
  .section-head .right>*+*,.lot-foot>*+*{margin-left:12px}
  .mnav-cta>*+*{margin-top:10px}
}