/* ==========================================================================
   ВТОРОЕ ОФОРМЛЕНИЕ — «JAQUAR ATELIER»
   Источник: макет Stitch «Jaquar Uzbekistan Premium Portal» (Аббосхон, 01.10.2026)
   — тёмный графит, оксблад, античная бронза, травертин;
   — Playfair Display (заголовки) · Cinzel (латинские метки) · Inter (текст);
   — глубина даётся волосяной линией, а не тенью.

   Файл только ДОПОЛНЯЕТ main.css: переопределяет переменные темы, поэтому
   новый вид получают ВСЕ страницы второго оформления, а не только главная.
   Первое оформление (static/site) этого файла не знает и не загружает.
   ========================================================================== */

/* --------------------------------------------------- палитра и типографика */
:root,
.scope-jaquar,
html[data-brand="artize"], .scope-artize,
html[data-brand="essco"],  .scope-essco {
  /* поверхности: #121110 графит · #0d0c0c глубокая тень · #181716 панель */
  --bg-main:#121110;
  --bg-secondary:#0d0c0c;
  --bg-elevated:#181716;
  --bg-high:#201e1d;
  --glass:rgba(18,17,16,.88);
  --drawer-bg:rgba(13,12,12,.985);
  --mbar-bg:rgba(18,17,16,.96);

  /* текст: тёплая слоновая кость по графиту */
  --ink:#f5f2ed;
  --ivory:#f5f2ed;
  --ivory-dim:rgba(245,242,237,.78);
  --muted:#b8b2a8;
  --placeholder:rgba(184,178,168,.46);

  /* акценты: #b08d57 античная бронза · #4a121a оксблад */
  --bronze:#b08d57;
  --bronze-soft:#dfd9cf;
  --bronze-glow:rgba(176,141,87,.12);
  --fill:#4a121a;
  --fill-hover:#2e0007;
  --on-fill:#f5f2ed;
  --step-hover:rgba(245,242,237,.12);
  --mark:#b08d57;
  --badge-bg:#b08d57;
  --badge-fg:#121110;
  --danger:#ff7b7b;
  --danger-text:#ff9a9a;

  /* линии — архитектурный шов, 1px */
  --line:rgba(176,141,87,.26);
  --line-strong:rgba(176,141,87,.52);
  --line-faint:rgba(245,242,237,.10);
  --swatch-line:rgba(245,242,237,.26);

  --ghost-line:rgba(245,242,237,.34);
  --ghost-hover-line:#b08d57;
  --ghost-hover-bg:rgba(176,141,87,.14);
  --chip-bg:#181716;
  --chip-hover-bg:#201e1d;

  /* теней нет — глубина строится тоном и линией */
  --shadow-soft:none;
  --shadow-deep:none;

  --veil:8,7,7;
  --canvas-rgb:18,17,16;
  --glow:176,141,87;
  --atmos-a:#181716; --atmos-b:#201e1d; --atmos-c:#282624;
  --atmos-mark:rgba(176,141,87,.16);
  --gesture:rgba(176,141,87,.07);

  /* шапка — почти чёрная, бронзовый акцент */
  --hdr-bg:rgba(13,12,12,.92); --hdr-bg-2:rgba(13,12,12,.92);
  --hdr-ink:#f5f2ed; --hdr-muted:#b8b2a8; --hdr-accent:#b08d57;
  --hdr-line:rgba(61,57,53,.85); --hdr-line-strong:rgba(176,141,87,.5);
  --hdr-fill:#4a121a; --hdr-fill-hover:#2e0007; --hdr-on-fill:#f5f2ed;
  --hdr-glow:rgba(176,141,87,.12);
  --hdr-mark:#b08d57; --hdr-badge-bg:#b08d57; --hdr-badge-fg:#121110;
  --hdr-shadow:none;

  /* подвал */
  --ftr-bg:#0d0c0c; --ftr-ink:#f5f2ed; --ftr-muted:rgba(245,242,237,.72);
  --ftr-accent:#b08d57; --ftr-line:rgba(61,57,53,.9);

  /* текст поверх фотографии */
  --ph-ink:#f5f2ed; --ph-muted:rgba(245,242,237,.86); --ph-accent:#b08d57;
  --ph-line:rgba(245,242,237,.24); --ph-line-strong:rgba(176,141,87,.6);
  --ph-fill:#4a121a; --ph-fill-hover:#2e0007; --ph-on-fill:#f5f2ed;
  --ph-glow:rgba(176,141,87,.14);
  --ph-glass:rgba(8,7,7,.62);

  --toast-bg:#201e1d; --toast-fg:#f5f2ed; --toast-line:rgba(176,141,87,.3);
  --theme-color:#121110;

  /* Playfair Display держит кириллицу; Cinzel — только латиница,
     поэтому для русских и узбекских меток он аккуратно уступает Inter */
  --serif:'Playfair Display','EB Garamond',Georgia,"Times New Roman",serif;
  --sans:'Inter',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --label:'Cinzel','Inter',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --h-weight:400; --h-track:-.018em; --h-lh:1.08;
  --logo-font:'Cinzel','Playfair Display',Georgia,serif;
  --logo-size:20px; --logo-track:.3em; --logo-weight:600;

  --radius:4px; --radius-lg:8px;
  --r-ctl:6px; --r-btn:4px; --r-card:14px; --r-panel:14px; --r-swatch:999px; --r-hdr:12px;

  color-scheme:dark;
}

/* Artize и Essco внутри тёмной темы сохраняют собственный акцент,
   иначе три раздела сольются в один */
/* ARTIZE — светлая галерейная палитра по макету «Luxury Gallery»:
   слоновая кость, травертин, золото. Остальной сайт остаётся тёмным. */
html[data-brand="artize"], .scope-artize {
  color-scheme:light;
  --bg-main:#fcf9f8;
  --bg-secondary:#f6f3f2;
  --bg-elevated:#ffffff;
  --bg-high:#eae7e7;
  --glass:rgba(252,249,248,.9);
  --drawer-bg:rgba(252,249,248,.985);
  --mbar-bg:rgba(252,249,248,.96);

  --ink:#1c1b1b;
  --ivory:#1c1b1b;
  --ivory-dim:rgba(28,27,27,.78);
  --muted:#7f7667;
  --placeholder:rgba(127,118,103,.5);

  --bronze:#775a19; --mark:#775a19; --hdr-accent:#775a19; --ftr-accent:#775a19;
  --bronze-soft:#4e4639;
  --bronze-glow:rgba(197,160,89,.12);
  --fill:#1c1b1b; --fill-hover:#4e4639; --on-fill:#fcf9f8;
  --step-hover:rgba(28,27,27,.08);
  --badge-bg:#c5a059; --badge-fg:#4e3700; --ph-accent:#c5a059;

  --line:rgba(197,160,89,.34);
  --line-strong:rgba(197,160,89,.62);
  --line-faint:rgba(209,197,180,.75);
  --swatch-line:rgba(127,118,103,.45);
  --ghost-line:rgba(127,118,103,.55);
  --ghost-hover-line:#775a19;
  --ghost-hover-bg:rgba(197,160,89,.12);
  --chip-bg:#ffffff; --chip-hover-bg:#f0eded;

  --h-track:-.01em;

  /* шапка, подвал и плашки — тоже светлые, иначе раздел рвётся пополам */
  --hdr-bg:rgba(252,249,248,.9); --hdr-bg-2:rgba(252,249,248,.96);
  --hdr-ink:#1c1b1b; --hdr-muted:rgba(79,70,57,.8);
  --hdr-line:rgba(197,160,89,.3); --hdr-shadow:0 10px 30px rgba(119,90,25,.06);
  --ftr-bg:#f6f3f2; --ftr-ink:#1c1b1b; --ftr-muted:rgba(79,70,57,.82);
  --ftr-line:rgba(197,160,89,.28);
  --ph-bg:#f0eded; --ph-line:rgba(209,197,180,.9); --ph-line-strong:rgba(197,160,89,.7);
  --plane:#f0eded;
  --toast-bg:#ffffff; --toast-fg:#1c1b1b; --toast-line:rgba(197,160,89,.35);
  --shadow-soft:0 12px 30px rgba(119,90,25,.07); --shadow-deep:0 22px 52px rgba(119,90,25,.1);
}
html[data-brand="artize"] body { background:var(--bg-main); color:var(--ink); }
html[data-brand="artize"] .brand__name,
html[data-brand="artize"] .nav__link,
html[data-brand="artize"] .burger,
html[data-brand="artize"] .goback { color:var(--ink); }
html[data-brand="artize"] .brand__sub,
html[data-brand="artize"] .nav__link { color:var(--muted); }
/* герой: кадр показываем почти как есть — выбеливание съедало золото на
   фотографии; за читаемость отвечает подложка .az-hero__veil */
html[data-brand="artize"] .az-hero__media { filter:saturate(.92) brightness(1.04); }
html[data-brand="essco"], .scope-essco {
  --bronze:#8eb69b; --mark:#8eb69b; --hdr-accent:#8eb69b; --ftr-accent:#8eb69b;
  --line:rgba(142,182,155,.24); --line-strong:rgba(142,182,155,.5);
  --badge-bg:#8eb69b; --badge-fg:#0b1a14; --ph-accent:#8eb69b;
  --fill:#13332c; --fill-hover:#1b4a3f;
  --serif:'Inter',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --h-weight:600; --h-track:-.02em;
  --r-card:10px; --r-panel:10px;
}

/* --------------------------------------------------------- базовая отделка */
html, body { background:var(--bg-main); }

::selection { background:var(--bronze); color:#121110; }

/* метки и надзаголовки — широкий трекинг, как в макете */
.eyebrow, .caption, .tag, .card__kicker, .card__cta, .btn, .chip,
.finish__label, .idx__m, .crumbs {
  letter-spacing:.2em;
}
.eyebrow { letter-spacing:.3em; }

/* теней нет нигде: глубина — тон и линия */
.card, .cat-card, .brand-block, .editorial__media, .spec-item__media,
.panel, .finale__card, .solit__media, .scene, .shot, .idx__img {
  box-shadow:none;
}

/* фотография в тёмной среде: чуть глубже и контрастнее, как в макете */
.shot img, .scene__media img, .hero__bg img, .cat-card img,
.brand-block img, .idx__img img, .editorial__media img {
  filter:brightness(.84) contrast(1.08);
}
.solit__media img, .card__media img, .spec-item__media img { filter:none; }

/* карточка товара на тёмном: светлая подложка под фото остаётся,
   иначе прозрачные PNG товаров сливаются с фоном */
.card__media, .solit__media, .spec-item__media, .mini__media {
  background:#efece4;
}

/* поля ввода */
input, textarea, select {
  background:var(--bg-elevated);
  border-color:var(--line);
  color:var(--ink);
}
input:focus, textarea:focus, select:focus { border-color:var(--bronze); }

/* --------------------------------------------- герой со сменой сцен (v2) */
.hero2 {
  position:relative; width:100%;
  min-height:clamp(560px,86vh,940px);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; background:#0d0c0c;
}
.hero2__stage { position:absolute; inset:0; z-index:0; }
.hero2__scene {
  position:absolute; inset:0; opacity:0; transform:scale(1.04);
  pointer-events:none;
  transition:opacity 1.2s cubic-bezier(.4,0,.2,1), transform 1.8s cubic-bezier(.25,1,.5,1);
}
.hero2__scene.is-on { opacity:1; transform:scale(1); }
.hero2__scene video, .hero2__scene img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:brightness(.72) contrast(1.12);
}
.hero2__scene::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, #121110 0%, rgba(18,17,16,.4) 45%, rgba(13,12,12,.7) 100%),
    linear-gradient(to right, rgba(18,17,16,.8) 0%, transparent 45%, rgba(18,17,16,.8) 100%);
}
.hero2__top {
  position:relative; z-index:2;
  padding:calc(var(--hdr-h) + 36px) var(--gutter) 0;
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
}
.hero2__tag {
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--label); font-size:11px; font-weight:600;
  letter-spacing:.25em; text-transform:uppercase; color:var(--bronze);
}
.hero2__tag i {
  width:6px; height:6px; border-radius:50%; background:var(--bronze);
  display:block; animation:hero2pulse 2.4s ease-in-out infinite;
}
@keyframes hero2pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero2__sound {
  display:inline-flex; align-items:center; gap:12px;
  padding:7px 15px; border:1px solid var(--line);
  background:rgba(18,17,16,.5); backdrop-filter:blur(8px);
  color:var(--muted); cursor:pointer; border-radius:999px;
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .3s, color .3s;
}
.hero2__sound:hover { border-color:var(--line-strong); color:var(--ink); }
.hero2__bars { display:flex; align-items:flex-end; gap:3px; height:15px; }
.hero2__bars i { width:2px; background:var(--bronze); display:block; height:4px; }
.hero2__sound.is-on .hero2__bars i { animation:hero2bar 1.1s ease-in-out infinite; }
.hero2__bars i:nth-child(2){ animation-duration:.85s; animation-delay:.15s }
.hero2__bars i:nth-child(3){ animation-duration:1.4s; animation-delay:.3s }
.hero2__bars i:nth-child(4){ animation-duration:.95s; animation-delay:.05s }
@keyframes hero2bar { 0%,100%{height:4px} 50%{height:15px} }

.hero2__mid {
  position:relative; z-index:2; margin:auto;
  width:100%; max-width:1080px;
  padding:40px var(--gutter); text-align:center;
}
.hero2__rule {
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:22px;
  font-family:var(--label); font-size:11px; font-weight:600;
  letter-spacing:.35em; text-transform:uppercase; color:var(--bronze);
}
.hero2__rule i { width:34px; height:1px; background:rgba(176,141,87,.6); display:block; }
.hero2__h1 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5.2vw,74px); line-height:1.07;
  letter-spacing:-.015em; color:var(--ink); margin:0 0 22px;
}
.hero2__lede {
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(16px,1.5vw,24px); line-height:1.6;
  color:rgba(223,217,207,.9); max-width:62ch; margin:0 auto 34px;
}
.hero2__btns { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

.hero2__bottom {
  position:relative; z-index:2;
  padding:14px var(--gutter);
  border-top:1px solid var(--hdr-line);
  background:rgba(13,12,12,.8); backdrop-filter:blur(10px);
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
}
.hero2__tabs { display:flex; flex-wrap:wrap; gap:4px; }
.hero2__tab {
  padding:7px 13px; background:none; border:0; cursor:pointer;
  border-bottom:2px solid transparent; color:var(--muted);
  font-family:var(--label); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  transition:color .3s, border-color .3s;
}
.hero2__tab:hover { color:var(--ink); }
.hero2__tab.is-on { color:var(--ink); border-bottom-color:var(--bronze); }
.hero2__timer {
  display:flex; align-items:center; gap:12px;
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.hero2__track { display:block; width:96px; height:2px; background:rgba(245,242,237,.18); overflow:hidden; }
.hero2__fill { display:block; height:100%; width:0; background:var(--bronze); transition:width .1s linear; }
@media (max-width:760px){
  .hero2__timer span { display:none; }
  .hero2__tab { font-size:9.5px; padding:6px 9px; }
}

/* ------------------------------------------------- вода в движении (v2) */
/* лента роликов: горизонтальная прокрутка без конца */
.reelwrap { position:relative; }
.reelrow {
  display:flex; gap:16px; overflow-x:auto; overflow-y:hidden;
  padding:2px clamp(16px,4vw,64px); cursor:grab; scroll-behavior:auto;
  scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain;
}
.reelrow::-webkit-scrollbar { display:none; }
.reelrow.is-drag { cursor:grabbing; }
.reelnav {
  position:absolute; top:50%; z-index:5; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; line-height:1;
  appearance:none; font-size:22px; padding:0 0 3px;
  background:var(--glass); backdrop-filter:blur(8px);
  border:1px solid var(--line-faint); color:var(--ink);
  transition:border-color .25s ease, color .25s ease;
}
.reelnav:hover { border-color:var(--bronze); color:var(--bronze); }
.reelnav--l { left:clamp(6px,1.2vw,22px); }
.reelnav--r { right:clamp(6px,1.2vw,22px); }
@media (max-width:760px){ .reelnav{ display:none } .reelrow{ gap:12px; padding-inline:var(--gutter) } }
.reel {
  flex:0 0 clamp(200px,17vw,290px);
  position:relative; aspect-ratio:9/16; overflow:hidden;
  border:1px solid var(--line-faint); border-radius:var(--r-card);
  background:var(--bg-elevated); cursor:pointer; display:block;
  transition:border-color .5s;
}
.reel:hover { border-color:var(--line-strong); }
.reel video {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.8) contrast(1.08);
  transition:transform .7s cubic-bezier(.25,1,.5,1);
}
.reel:hover video { transform:scale(1.05); }
.reel__veil {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,#0d0c0c 0%,transparent 55%,rgba(0,0,0,.2) 100%);
}
/* 19.10.2026, просьба Аббосхона: кнопка воспроизведения по центру
   карточки — как в ленте на jaquar.com. Раньше здесь была стрелка
   в правом верхнем углу. */
.reel__play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px;
  border-radius:50%; border:1px solid rgba(245,242,237,.55);
  background:rgba(8,7,7,.38); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  display:flex; align-items:center; justify-content:center;
  color:rgba(245,242,237,.96); pointer-events:none;
  transition:opacity .3s, transform .5s cubic-bezier(.25,1,.5,1);
}
.reel__play svg { margin-left:2px; }                /* треугольник к центру круга */
.reel:hover .reel__play { transform:translate(-50%,-50%) scale(1.07); }
.reel.is-playing .reel__play { opacity:0; }

/* круглый знак бренда в нижнем углу — как подпись на их карточках */
.reel__znak {
  position:absolute; right:12px; bottom:12px; z-index:3;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:14px; line-height:1; padding-bottom:2px;
  color:var(--on-fill); background:var(--fill);
  border:1px solid rgba(245,242,237,.22);
  pointer-events:none; opacity:.92;
}
.reel__body { position:absolute; left:0; right:46px; bottom:0; padding:16px; z-index:2; pointer-events:none; }
.reel__t { display:block; font-family:var(--serif); font-size:clamp(14px,1.1vw,17px); font-weight:400;
           line-height:1.25; color:var(--ink); margin:0 0 5px; }
.reel__d { display:block; font-size:11px; line-height:1.45; color:var(--muted); margin:0; }
@media (max-width:760px){ .reel__body{padding:12px} .reel__d{display:none} }

/* ------------------------------------------------------- хронология (v2) */
.chrono { position:relative; max-width:1000px; margin:0 auto; }
.chrono::before {
  content:""; position:absolute; left:14px; top:8px; bottom:8px; width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(176,141,87,0) 0%,rgba(176,141,87,.85) 14%,rgba(176,141,87,.85) 86%,rgba(176,141,87,0) 100%);
}
@media (min-width:860px){ .chrono::before{ left:50% } }
.chrono__row { position:relative; display:flex; flex-direction:column; margin-bottom:clamp(26px,3vw,54px); }
.chrono__node {
  position:absolute; left:14px; top:22px; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%;
  background:var(--bg-elevated); border:2px solid var(--bronze); z-index:2;
  transition:transform .3s;
}
.chrono__row:hover .chrono__node { transform:translateX(-50%) scale(1.25); }
.chrono__card {
  padding:clamp(20px,2.2vw,30px);
  background:rgba(24,23,22,.8); border:1px solid var(--line-faint);
  border-radius:var(--r-card); margin-left:46px;
  transition:border-color .3s, transform .3s;
}
.chrono__row:hover .chrono__card { border-color:var(--line-strong); transform:translateY(-4px); }
.chrono__year {
  font-family:var(--serif); font-size:clamp(26px,3vw,38px); font-weight:400;
  letter-spacing:.1em; color:var(--bronze); display:block; margin-bottom:6px;
}
.chrono__t { font-family:var(--serif); font-size:clamp(18px,1.6vw,24px); font-weight:400; color:var(--ink); margin:0 0 9px; line-height:1.25; }
.chrono__x { font-size:14px; line-height:1.6; color:var(--muted); margin:0; }
@media (min-width:860px){
  .chrono__node { left:50%; top:50%; transform:translate(-50%,-50%); }
  .chrono__row:hover .chrono__node { transform:translate(-50%,-50%) scale(1.25); }
  .chrono__row { flex-direction:row; align-items:center; }
  .chrono__card { margin-left:0; width:calc(50% - 56px); }
  .chrono__row--l .chrono__card { margin-right:auto; text-align:right; }
  .chrono__row--r .chrono__card { margin-left:auto; }
}
.chrono__end {
  margin-top:clamp(36px,4vw,70px); padding-top:clamp(26px,3vw,44px);
  border-top:1px solid var(--line-faint); text-align:center;
}
.chrono__end p {
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(17px,1.8vw,25px); line-height:1.5;
  color:var(--bronze-soft); max-width:40ch; margin:0 auto;
}

/* тёплая мгла позади хронологии */
.section--chrono { position:relative; overflow:hidden;
  background:linear-gradient(180deg,#111013 0%,#240c11 52%,#121113 100%); }
.section--chrono::before {
  content:""; position:absolute; left:50%; top:-220px; width:1200px; height:700px;
  transform:translateX(-50%); pointer-events:none; opacity:.18;
  background:radial-gradient(circle,rgba(176,141,87,.5) 0%,transparent 68%);
}

/* ---------------------------------------------- 3D-сцена санузла (v2) */
.room {
  position:relative; width:100%;
  height:clamp(460px,72vh,860px);
  border:1px solid var(--line-faint); border-radius:var(--r-card);
  overflow:hidden; background:#111013;
}
.room__stage { position:absolute; inset:0; }
.room__stage canvas { display:block; width:100%; height:100%; }
.room--nogl .room__stage::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,#181716,#2a2725);
}
.room__chips {
  position:absolute; top:16px; left:16px; right:16px; z-index:20;
  display:flex; flex-wrap:wrap; gap:6px;
  background:rgba(18,17,16,.85); backdrop-filter:blur(10px);
  border:1px solid var(--line-faint); border-radius:10px;
  padding:7px 8px; width:max-content; max-width:calc(100% - 32px);
}
.room__chip {
  padding:6px 12px; border:1px solid transparent; border-radius:7px;
  background:none; cursor:pointer; color:var(--muted);
  font-family:var(--label); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .25s, border-color .25s, background .25s;
}
.room__chip:hover { color:var(--ink); }
.room__chip.is-on { color:var(--bronze); border-color:rgba(176,141,87,.45); background:var(--bg-elevated); }

.room__marks { position:absolute; inset:0; z-index:10; pointer-events:none; }
.room__mark {
  position:absolute; top:0; left:0;
  transform:translate3d(-9999px,-9999px,0);
  display:flex; align-items:center; gap:9px;
  background:none; border:0; padding:0; cursor:pointer;
  pointer-events:auto; opacity:0; transition:opacity .25s;
  margin:-6px 0 0 -6px;
}
.room__dot {
  width:11px; height:11px; border-radius:50%; flex:none;
  background:var(--bronze); box-shadow:0 0 0 4px rgba(176,141,87,.22);
  transition:box-shadow .3s;
}
.room__mark:hover .room__dot { box-shadow:0 0 0 7px rgba(176,141,87,.3); }
.room__tip {
  white-space:nowrap; padding:4px 9px;
  background:rgba(18,17,16,.9); backdrop-filter:blur(8px);
  border:1px solid var(--line-faint); border-radius:5px;
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
}
.room__mark:hover .room__tip { border-color:var(--line-strong); }

.room__card {
  position:absolute; top:72px; right:16px; z-index:30;
  width:min(340px,calc(100% - 32px));
  background:rgba(18,17,16,.96); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:12px; padding:18px;
  transform:translateX(calc(100% + 24px)); opacity:0;
  transition:transform .5s cubic-bezier(.25,1,.5,1), opacity .4s;
  pointer-events:none;
}
.room__card.is-open { transform:translateX(0); opacity:1; pointer-events:auto; }
.room__cardtop {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--line-faint);
}
.room__kicker {
  font-family:var(--label); font-size:9.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.room__close {
  width:24px; height:24px; border:0; border-radius:50%; cursor:pointer;
  background:none; color:var(--muted); font-size:18px; line-height:1;
  transition:color .25s, background .25s;
}
.room__close:hover { color:var(--ink); background:var(--bg-high); }
/* выбор модели узла: стрелки по бокам названия */
.room__nav { display:flex; align-items:center; gap:10px; }
.room__title {
  flex:1 1 auto; min-width:0; text-align:center;
  font-family:var(--serif); font-size:21px; font-weight:400; color:var(--ink);
  margin:0; line-height:1.25;
}
.room__arr {
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; line-height:1; padding:0 0 2px;
  appearance:none; font-size:18px;
  background:transparent; border:1px solid var(--line-faint); color:var(--ivory-dim);
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.room__arr:hover { border-color:var(--bronze); color:var(--bronze); background:var(--bronze-glow); }
.room__arr[hidden] { display:none; }
.room__count {
  display:block; text-align:center; margin:6px 0 0;
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.18em; color:var(--bronze);
}
.room__meta { font-size:12px; color:var(--muted); margin:10px 0 16px; text-align:center; }
.room__all {
  display:block; margin:10px 0 0; text-align:center;
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  transition:color .25s ease;
}
.room__all:hover { color:var(--bronze); }
.room__fin { margin-bottom:16px; }
.room__finlabel {
  display:block; margin-bottom:8px;
  font-family:var(--label); font-size:9.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.room__sws { display:flex; flex-wrap:wrap; gap:6px; }
.room__sw {
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 10px; cursor:pointer; border-radius:7px;
  background:var(--bg-elevated); border:1px solid var(--line-faint);
  color:var(--muted); font-size:10.5px; font-weight:500;
  transition:border-color .25s, color .25s;
}
.room__sw i { width:12px; height:12px; border-radius:50%; display:block; border:1px solid rgba(0,0,0,.4); }
.room__sw.is-on { border-color:var(--bronze); color:var(--ink); }
.room__card .btn { width:100%; justify-content:center; }

.room__hint {
  position:absolute; left:16px; bottom:16px; z-index:20; pointer-events:none;
  padding:5px 11px; border-radius:6px;
  background:rgba(18,17,16,.8); backdrop-filter:blur(8px);
  border:1px solid var(--line-faint);
  font-size:10.5px; letter-spacing:.04em; color:var(--muted);
}
@media (max-width:760px){
  .room { height:clamp(420px,62vh,620px) }
  .room__chips { gap:4px; padding:6px }
  .room__chip { font-size:9px; padding:5px 8px; letter-spacing:.1em }
  .room__hint { display:none }
  .room__card { top:auto; bottom:16px; right:16px; left:16px; width:auto;
                transform:translateY(calc(100% + 24px)) }
  .room__card.is-open { transform:translateY(0) }
  .room__tip { display:none }
}

/* -------------------------------------------- свет: день / вечер (v2) */
.lightx {
  position:relative; width:100%; aspect-ratio:16/9; max-height:720px;
  overflow:hidden; border:1px solid var(--line-faint); border-radius:var(--r-card);
  user-select:none; cursor:ew-resize; background:#0d0c0c;
}
.lightx__base { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.lightx__day { position:absolute; inset:0; width:50%; height:100%; overflow:hidden; pointer-events:none; }
.lightx__day img { position:absolute; top:0; left:0; height:100%; max-width:none; object-fit:cover; }
.lightx__badge {
  position:absolute; bottom:18px; z-index:3;
  padding:6px 14px; border-radius:999px;
  background:rgba(18,17,16,.8); backdrop-filter:blur(8px);
  border:1px solid var(--line-faint);
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
.lightx__badge--l { left:18px; }
.lightx__badge--r { right:18px; }
.lightx__handle {
  position:absolute; top:0; bottom:0; left:50%; z-index:4;
  transform:translateX(-50%); display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.lightx__handle i { display:block; width:2px; height:100%; background:rgba(176,141,87,.85); }
.lightx__handle b {
  position:absolute; width:38px; height:38px; border-radius:50%;
  background:#121110; border:2px solid var(--bronze);
}
.lightx__handle b::before, .lightx__handle b::after {
  content:""; position:absolute; top:50%; width:0; height:0;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transform:translateY(-50%);
}
.lightx__handle b::before { left:8px;  border-right:6px solid var(--bronze); }
.lightx__handle b::after  { right:8px; border-left:6px solid var(--bronze); }
@media (max-width:760px){ .lightx{ aspect-ratio:4/3 } .lightx__badge{ font-size:9px; padding:5px 10px } }

/* ------------------------------------------- узел без лишнего: три слоя (v2)
   Левая колонка — «разрез» из трёх блоков, соединённых линией.
   Правая — пояснение активного слоя. Кнопки, поэтому нужны display и сброс. */
.cut { display:grid; gap:clamp(26px,3vw,56px); align-items:start; }
@media (min-width:980px){ .cut{ grid-template-columns:1.08fr .92fr } }

.cut__stack { display:flex; flex-direction:column; align-items:stretch; }
.cut__link {
  display:block; width:1px; height:clamp(20px,2.4vw,38px); margin:0 auto;
  background:linear-gradient(180deg,rgba(176,141,87,.12),rgba(176,141,87,.55),rgba(176,141,87,.12));
}
.cut__box {
  display:block; width:100%; text-align:left; cursor:pointer;
  appearance:none; font:inherit; color:inherit;
  padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,30px);
  background:var(--bg-elevated); border:1px solid var(--line-faint);
  border-radius:var(--r-panel);
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.cut__box:hover { border-color:var(--line); transform:translateY(-2px); }
.cut__box.is-on { border-color:var(--line-strong); background:var(--bg-high); }
.cut__lvl {
  display:flex; align-items:center; gap:9px;
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.cut__lvl i {
  display:block; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--bronze); background:transparent; transition:background .3s ease;
}
.cut__box.is-on .cut__lvl { color:var(--bronze); }
.cut__box.is-on .cut__lvl i { background:var(--bronze); }
.cut__h {
  display:block; margin:10px 0 8px;
  font-family:var(--serif); font-weight:400; line-height:1.2;
  font-size:clamp(19px,1.8vw,26px); color:var(--ink);
}
.cut__x { display:block; font-size:14px; line-height:1.65; color:var(--muted); }
@media (min-width:980px){
  .cut__x { max-width:52ch }
}

.cut__side { display:flex; flex-direction:column; align-items:flex-start; }
@media (min-width:980px){ .cut__side{ position:sticky; top:calc(var(--hdr-h,72px) + 28px) } }
.cut__tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.cut__tab {
  appearance:none; cursor:pointer; font:inherit;
  padding:8px 15px; border-radius:999px;
  background:var(--chip-bg); border:1px solid var(--line-faint); color:var(--muted);
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.cut__tab:hover { border-color:var(--line); color:var(--ink); }
.cut__tab.is-on { border-color:var(--bronze); color:var(--bronze); background:var(--bronze-glow); }
.cut__panel {
  width:100%; margin:0 0 22px;
  padding:clamp(18px,2vw,26px);
  border:1px solid var(--line-faint); border-left:2px solid var(--bronze);
  border-radius:var(--r-card); background:var(--bg-secondary);
}
.cut__badge {
  display:block;
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze);
}
.cut__ph {
  margin:9px 0 8px; font-family:var(--serif); font-weight:400;
  font-size:clamp(17px,1.5vw,22px); line-height:1.25; color:var(--ink);
}
.cut__px { margin:0; font-size:14px; line-height:1.7; color:var(--muted); }

/* ------------------------------------------- «Формы в пространстве»: барабан
   Медальоны лежат на эллипсе; смещение и масштаб считает JS,
   поэтому центрирование здесь — через margin, а не transform. */
.section--dial { position:relative; overflow:hidden; background:var(--bg-secondary); }
.section--dial::before {
  content:""; position:absolute; left:50%; top:0; width:min(1100px,120%); height:100%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(176,141,87,.10), transparent 62%);
}
.section--dial > .container { position:relative; z-index:2; }
.dial__head { text-align:center; max-width:760px; margin:0 auto clamp(18px,2.4vw,40px); }
.dial__head .hero2__rule { justify-content:center; }

.dial { position:relative; }
.dial__stage {
  position:relative; height:clamp(270px,34vw,470px);
  touch-action:pan-y; cursor:grab; overflow:hidden;
}
.dial__stage:active { cursor:grabbing; }
.dial__ellipse {
  position:absolute; left:50%; bottom:clamp(44px,6vw,80px);
  width:min(1040px,94%); height:clamp(104px,13vw,200px);
  transform:translateX(-50%); pointer-events:none;
  border:1px solid rgba(176,141,87,.22); border-radius:50%;
}
/* все медальоны лежат в ОДНОЙ ячейке сетки — центр даётся place-items,
   а transform остаётся свободным для JS (смещение, масштаб) */
.dial__track { position:absolute; inset:0; display:grid; place-items:center; }
.dial__item {
  grid-area:1 / 1; position:relative;
  width:clamp(140px,15.5vw,230px);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  appearance:none; background:none; border:0; padding:0; font:inherit; cursor:pointer;
  will-change:transform, opacity;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .45s ease;
}
.dial__ring {
  display:grid; place-items:center;
  width:clamp(140px,15.5vw,230px); height:clamp(140px,15.5vw,230px);
  border-radius:50%; border:1px solid var(--line-faint);
  background:var(--bg-elevated);
  transition:border-color .35s ease;
}
.dial__item.is-on .dial__ring { border-color:var(--bronze); }
/* Снимок каталога — квадратный, со своей светлой подложкой. Раньше он стоял
   внутри круга с полями, и были видны углы квадрата. Теперь кадр заполняет
   круг целиком: фон внутри медальона один, краёв не видно. */
.dial__plate {
  display:block; overflow:hidden;
  width:88%; height:88%; border-radius:50%;
  background:#edeae5;          /* подложка, пока кадр не пришёл */
}
.dial__plate img { width:100%; height:100%; object-fit:cover; display:block; }
.dial__lbl {
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  transition:color .3s ease;
}
.dial__item.is-on .dial__lbl { color:var(--bronze); }

.dial__nav {
  position:absolute; top:50%; z-index:30; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; line-height:1;
  appearance:none; font-size:22px; padding:0 0 3px;
  background:var(--glass); backdrop-filter:blur(8px);
  border:1px solid var(--line-faint); color:var(--ink);
  transition:border-color .25s ease, color .25s ease;
}
.dial__nav:hover { border-color:var(--bronze); color:var(--bronze); }
.dial__nav--l { left:0; }
.dial__nav--r { right:0; }

.dial__card { text-align:center; max-width:560px; margin:clamp(6px,1.4vw,22px) auto 0; }
.dial__kicker {
  display:block; font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bronze);
}
.dial__title {
  margin:10px 0 8px; font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,2.6vw,38px); line-height:1.15; color:var(--ink);
  letter-spacing:.04em;
}
.dial__fin { margin:0 0 20px; font-size:14px; line-height:1.6; color:var(--muted); }

@media (max-width:760px){
  .dial__ellipse { bottom:34px }
  .dial__nav { width:38px; height:38px; font-size:19px }
}

/* --------------------------------------- хроника: сначала четыре вехи (v2) */
.chrono__row--hid { display:none; }
.chrono__more { display:flex; margin:clamp(16px,2vw,30px) auto 0; }

/* --------------------------------------- шапка второго оформления: одна
   кнопка меню вместо горизонтальной навигации, меню — на весь экран.
   Механика открытия (data-open) берётся из main.css и не меняется. */
/* верхняя навигация остаётся на месте; кнопка меню — в дополнение к ней */
.burger {
  display:grid; place-items:center; width:44px; height:44px; color:var(--ivory);
  position:relative;
}
.burger span { display:block; width:22px; height:1px; background:currentColor; position:relative; }
.burger span::before, .burger span::after {
  content:""; position:absolute; left:0; width:22px; height:1px; background:currentColor;
  transition:transform .3s ease, width .3s ease;
}
.burger span::before { top:-7px }
.burger span::after  { top:7px; width:14px }
.burger:hover { color:var(--bronze) }
.burger:hover span::after { width:22px }

.drawer {
  padding:clamp(20px,3vw,34px) var(--gutter) clamp(30px,4vw,56px);
  background:rgba(13,12,12,.985);
}
.drawer::before {
  content:""; position:absolute; left:50%; top:0; width:min(900px,120%); height:70%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(176,141,87,.12), transparent 65%);
}
.drawer__top { position:relative; z-index:2; margin-bottom:clamp(24px,4vw,60px); }
.drawer__nav {
  position:relative; z-index:2;
  margin:auto 0; gap:0; align-items:center; text-align:center;
}
.drawer__link {
  width:100%; max-width:720px; border-bottom:1px solid rgba(245,242,237,.08);
  padding-block:clamp(11px,1.5vw,20px);
  font-size:clamp(26px,4.4vw,54px); line-height:1.1; letter-spacing:.03em;
  color:var(--ivory-dim);
  transition:color .3s ease, letter-spacing .4s ease;
}
.drawer__link:first-child { border-top:1px solid rgba(245,242,237,.08) }
.drawer__link:hover { color:var(--bronze); letter-spacing:.09em }
.drawer[data-open="true"] .drawer__link {
  animation:dlin .6s cubic-bezier(.22,1,.36,1) backwards;
}
.drawer[data-open="true"] .drawer__link:nth-child(1){ animation-delay:.06s }
.drawer[data-open="true"] .drawer__link:nth-child(2){ animation-delay:.11s }
.drawer[data-open="true"] .drawer__link:nth-child(3){ animation-delay:.16s }
.drawer[data-open="true"] .drawer__link:nth-child(4){ animation-delay:.21s }
.drawer[data-open="true"] .drawer__link:nth-child(5){ animation-delay:.26s }
.drawer[data-open="true"] .drawer__link:nth-child(6){ animation-delay:.31s }
.drawer[data-open="true"] .drawer__link:nth-child(7){ animation-delay:.36s }
.drawer[data-open="true"] .drawer__link:nth-child(8){ animation-delay:.41s }
@keyframes dlin { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }
.drawer__foot {
  position:relative; z-index:2; margin-top:auto; padding-top:clamp(22px,3vw,40px);
  align-items:center;
}
@media (prefers-reduced-motion:reduce){
  .drawer[data-open="true"] .drawer__link { animation:none }
}
/* переключатель языка в меню — компактный, по центру, а не во всю ширину */
.drawer .lang--wide {
  align-self:center; width:min(340px,100%);
  margin:0 0 clamp(16px,2.6vw,34px);
}

/* ------------------------------------------------ шаг назад в шапке (v2) */
.goback {
  flex:none; display:grid; place-items:center;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  appearance:none; padding:0;
  background:transparent; border:1px solid var(--line-faint); color:var(--ivory-dim);
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.goback svg { width:17px; height:17px; }
.goback:hover { border-color:var(--bronze); color:var(--bronze); background:var(--bronze-glow); }
.goback[hidden] { display:none; }
@media (max-width:640px){ .goback{ width:32px; height:32px } .goback svg{ width:15px; height:15px } }

/* ------------------------------- раздел каталога: окно ролика компактнее
   Было почти в половину экрана и заслоняло сам каталог. */
/* 19.10.2026, замечание Аббосхона: между роликом и карточками зияло
   191 px пустоты. Колонка была 533 px, а ролик в ней — 400 px, и
   133 px оставались мёртвым полем. Теперь колонка ровно по ролику,
   а всё освободившееся место ушло карточкам. */
.split--wide { grid-template-columns:minmax(0,400px) minmax(0,1fr);
               gap:clamp(22px,2.4vw,44px); }
.split__aside .shot--vert { aspect-ratio:1/1; max-width:540px; }
@media (max-width:1024px){
  .split--wide { grid-template-columns:1fr }
  .split__aside .shot--vert { max-width:420px }
}
@media (max-width:640px){
  .split__aside .shot--vert { max-width:100%; aspect-ratio:4/3 }
}

/* ------------------------------------------------ три бренда (v2)
   Та же секция, что в первом оформлении, но карточками и в тёмной палитре. */
.brandcols { grid-template-columns:repeat(3,1fr); }
.brandcol {
  padding:clamp(22px,2.4vw,34px);
  border:1px solid var(--line-faint);
  border-radius:var(--r-panel);
  background:var(--bg-elevated);
  transition:border-color .4s ease, transform .4s ease;
}
.brandcol:hover { border-color:var(--line); transform:translateY(-3px); }
.brandcol__text { flex:1 1 auto; }
.brandcol__idx { color:var(--bronze); }
@media (max-width:980px){ .brandcols{ grid-template-columns:1fr } }

/* ==========================================================================
   ARTIZE — главная по макету «Luxury Gallery»
   ========================================================================== */
.az-eyebrow {
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--bronze);
  margin:0 0 14px;
}
.az-h2 {
  font-family:var(--serif); font-weight:400; margin:0;
  font-size:clamp(28px,3.4vw,52px); line-height:1.1; letter-spacing:.01em; color:var(--ink);
}
.az-head { max-width:760px; margin:0 0 clamp(28px,3.4vw,54px); }
.az-head--mid { margin-inline:auto; text-align:center; }
.az-sec { padding:clamp(56px,7vw,116px) 0; position:relative; }
.az-sec--path { background:#f7f2e8; }
.az-sec--dial { background:linear-gradient(180deg,#fffdf8,#f4eee2); }

/* ------------------------------------------------------------- герой */
.az-hero {
  position:relative; min-height:min(94vh,860px);
  display:flex; align-items:flex-start; justify-content:center; overflow:hidden;
  background:#faf7f2;
}
.az-hero__media { position:absolute; inset:0; }
.az-hero__media .photo, .az-hero__media img, .az-hero__media .atmos {
  width:100%; height:100%; object-fit:cover; object-position:center;
}
/* Три слоя одного кадра: комната стоит, рука и смеситель двигаются.
   Все слои одного размера и с одним object-fit, поэтому совпадают пиксель
   в пиксель и в покое дают исходную фотографию. */
.az-hero__media--reach { background:#f4efe6; }
.az-hero__lay {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
/* заголовок проявляется, когда рука и смеситель уже сошлись */
/* кадр неподвижен — проявляется только надзаголовок и заголовок */
.az-hero__media--reach ~ .az-hero__in > * {
  opacity:0; transform:translateY(16px);
  transition:opacity 1.1s ease .25s, transform 1.1s cubic-bezier(.16,1,.3,1) .25s;
}
.az-hero__media--reach.is-in ~ .az-hero__in > * { opacity:1; transform:none; }
.az-hero__media--reach.is-in ~ .az-hero__in > .az-hero__h1 { transition-delay:.45s; }
@media (prefers-reduced-motion:reduce){
  .az-hero__media--reach ~ .az-hero__in > * { transition:none; opacity:1; transform:none; }
}
/* подложка: снизу поднимается фарфор, как в макете; кадр светлый, поэтому
   притенять его не нужно — заголовок читается и так */
.az-hero__veil {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(252,249,248,.35) 0%, rgba(252,249,248,0) 30%,
             rgba(252,249,248,0) 62%, rgba(250,247,242,.96) 100%);
}
.az-hero__in {
  position:relative; z-index:2; width:100%;
  max-width:1560px; margin:0 auto;
  padding:clamp(86px,12vh,168px) var(--gutter) 0;
  text-align:center;
}
.az-hero__ey { color:#775a19; margin-bottom:14px; }
.az-hero__h1 {
  font-family:var(--serif); font-weight:300; margin:0;
  font-size:clamp(42px,7.4vw,104px); line-height:1.04; letter-spacing:.035em;
  color:#1c1b1b; text-shadow:0 1px 18px rgba(252,249,248,.75);
}
/* метка прокрутки и тонкая золотая линия под ней */
.az-hero__foot {
  position:absolute; left:50%; bottom:clamp(26px,3.6vw,48px); transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.az-hero__mark {
  font-family:var(--label); font-size:9px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(46,40,32,.55);
}
.az-hero__line {
  width:1px; height:clamp(38px,4.4vw,58px); display:block;
  background:linear-gradient(180deg,#c5a059,#e9c176 45%,transparent);
  animation:azPulse 2.6s ease-in-out infinite;
}
@keyframes azPulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
/* тихая строка под экраном: описание и две ссылки, без крупных кнопок */
.az-herobar { background:#fcf9f8; border-bottom:1px solid var(--line-faint); }
/* строка под экраном: по центру, с воздухом — не спорит с фотографией */
.az-herobar__in {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(18px,2vw,28px);
  padding:clamp(34px,4.4vw,64px) var(--gutter) clamp(30px,3.8vw,56px);
}
.az-herobar__t {
  margin:0; max-width:58ch;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(15px,1.25vw,19px); line-height:1.75; letter-spacing:.005em;
  color:var(--ink);
}
.az-herobar__act { display:flex; align-items:center; gap:clamp(14px,1.6vw,26px); flex-wrap:wrap; justify-content:center; }
.az-herobar__sep { width:1px; height:14px; background:var(--line); display:inline-block; }
@media (max-width:640px){ .az-herobar__sep { display:none; } }
@media (prefers-reduced-motion:reduce){ .az-hero__line { animation:none; } }

/* ============================================ витрина: музейный зал
   Линейная экспозиция по макету «Artize Luxury Gallery» (05.10.2026):
   один непрерывный ряд стеклянных кубов, под каждым — плита с подписью,
   активный куб стоит в центре окна, камера едет строго по горизонтали. */
.az-sec--vit { padding:0 0 clamp(26px,3vw,46px); border-top:1px solid var(--line-faint); }
.az-vit {
  position:relative; overflow:hidden;
  padding:clamp(96px,11vw,150px) 0 clamp(150px,15vw,210px);
  background:linear-gradient(180deg,#faf6ef,#f7f2e8 55%,#eee6d9);
}
/* солнечные лучи сквозь зал */
.az-vit__beam {
  position:absolute; top:-140px; width:min(42vw,620px); height:960px; z-index:0;
  pointer-events:none; filter:blur(58px);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(249,236,211,.22) 45%,transparent);
}
.az-vit__beam--l { left:22%; transform:rotate(-12deg); }
.az-vit__beam--r { right:22%; transform:rotate(12deg); }
/* травертиновый пол: сплошная линия горизонта */
.az-vit__floor {
  position:absolute; left:0; bottom:clamp(74px,8vw,104px); width:100%; height:180px; z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(243,237,225,0),rgba(237,228,212,.75) 38%,#e5d9c5);
}
/* Раньше здесь были две резкие линии пола. Неактивные кубы идут с
   прозрачностью, и линии просвечивали прямо сквозь кадр — читалось как
   полоса поперёк картинки. Оставлен только мягкий переход. */
/* подпись зала — слева сверху, как в макете */
.az-vit__head { position:relative; z-index:3; margin-bottom:clamp(26px,3vw,44px); pointer-events:none; }
.az-vit__head .az-eyebrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.az-dot { width:5px; height:5px; border-radius:50%; background:#c5a059; display:inline-block; flex:none; }
.az-vit__lede { max-width:46ch; margin:8px 0 0; font-size:13px; line-height:1.6; color:var(--muted); }

.az-vit__view {
  position:relative; z-index:2; height:clamp(360px,42vw,520px);
  display:flex; align-items:flex-end; overflow:visible; cursor:grab;
  touch-action:pan-y;
}
.az-vit__view.is-drag { cursor:grabbing; }
.az-vit__track {
  position:absolute; left:0; top:0; bottom:0;
  display:flex; align-items:flex-end; gap:clamp(44px,6vw,96px);
  transition:transform .75s cubic-bezier(.2,.9,.2,1); will-change:transform;
}
.az-vit__item {
  flex:none; width:clamp(210px,21vw,280px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-decoration:none; cursor:pointer; opacity:.52; transform:scale(.94);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.az-vit__item.is-on { opacity:1; transform:scale(1); }

/* сам куб — жидкое стекло в шампанском тоне */
.az-vit__cube {
  position:relative; width:100%; aspect-ratio:1/1; border-radius:12px;
  display:flex; align-items:center; justify-content:center; padding:16px;
  border:1px solid rgba(229,212,185,.65);
  /* нутро витрины — ровно белое: кадры каталога лежат на чистом белом фоне,
     и на белом кубе квадратного края у фотографии не видно. Стекло остаётся
     в оправе, подсветке, блике и преломлении у основания. */
  background:linear-gradient(135deg,#ffffff,#fffefb 48%,#ffffff);
  box-shadow:0 20px 45px rgba(119,90,25,.08),
             inset 0 1px 1px rgba(255,255,255,.9),
             inset 0 -1px 1px rgba(197,160,89,.3);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.az-vit__item.is-on .az-vit__cube {
  border-color:rgba(197,160,89,.95);
  box-shadow:0 25px 55px rgba(197,160,89,.22),
             0 0 30px rgba(229,193,118,.25),
             inset 0 1px 2px rgba(255,255,255,1);
}
/* светильник в потолке витрины */
.az-vit__dl {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:96px; height:6px; border-radius:99px;
  background:rgba(253,230,170,.9); filter:blur(2px);
}
/* блик на стекле */
/* Блик на стекле. Рамка box-shadow рисовала белую линию по нижнему краю
   блика — на 41% высоты куба она читалась как полоса поперёк кадра. Убрана:
   оправа и так есть у самого куба. */
.az-vit__spec {
  position:absolute; top:8px; left:12px; right:12px; height:40%;
  border-radius:8px 8px 0 0; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);
}
.az-vit__idx {
  position:absolute; top:14px; left:16px; z-index:3;
  display:flex; align-items:center; gap:6px;
  font-family:var(--label); font-size:10px; font-weight:500;
  letter-spacing:.25em; text-transform:uppercase; color:#705e3b;
}
.az-vit__idx i { width:5px; height:5px; border-radius:50%; background:#c5a059; }
.az-vit__art { width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; }
.az-vit__art img {
  max-width:84%; max-height:84%; width:auto; height:auto; object-fit:contain;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.az-vit__item:hover .az-vit__art img { transform:scale(1.05); }
.az-vit__art > .photo, .az-vit__art > .atmos { width:100%; height:100%; }
/* преломление у основания */
.az-vit__refr {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:62%; height:12px; border-radius:99px;
  background:rgba(252,211,118,.25); filter:blur(7px);
}
/* плита-постамент с подписью */
.az-vit__plate {
  width:82%; min-height:clamp(120px,12vw,150px); margin-top:-1px; padding:14px 16px;
  display:flex; flex-direction:column; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.7); border-radius:0 0 3px 3px;
  background:linear-gradient(180deg,#ebe3d5,#decfae);
  box-shadow:0 22px 44px rgba(28,27,27,.18); color:#2d2924;
  transition:background .3s ease;
}
.az-vit__item:not(.is-on) .az-vit__plate { background:linear-gradient(180deg,#faf7f2,#ede6d9); }
.az-vit__prow {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-bottom:7px; border-bottom:1px solid rgba(0,0,0,.1);
  font-family:var(--label); text-transform:uppercase;
}
.az-vit__prow b { font-size:10px; font-weight:600; letter-spacing:.25em; color:#775a19; }
.az-vit__prow i { font-size:9px; font-style:normal; letter-spacing:.14em; opacity:.75;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.az-vit__pmid { display:block; text-align:center; margin:auto 0; padding:8px 0; }
.az-vit__pmid strong {
  display:block; font-family:var(--serif); font-size:clamp(16px,1.4vw,20px);
  font-weight:400; line-height:1.2; letter-spacing:-.01em; color:#1c1b1b;
}
.az-vit__pmid em {
  display:block; margin-top:3px; font-family:var(--label); font-style:normal;
  font-size:8.5px; letter-spacing:.25em; text-transform:uppercase; color:#625e54;
}
.az-vit__pfoot {
  display:block; text-align:center; padding-top:7px; border-top:1px solid rgba(0,0,0,.1);
  font-family:var(--label); font-size:8px; letter-spacing:.18em;
  text-transform:uppercase; color:#775a19;
}
.az-vit__sh {
  width:88%; height:22px; margin-top:-10px; border-radius:99px; pointer-events:none;
  background:rgba(28,27,27,.14); filter:blur(9px);
}

/* плавающая плашка: номер витрины, название, артикул и покрытия */
.az-vit__panel {
  position:absolute; left:50%; bottom:clamp(26px,3.4vw,52px); transform:translateX(-50%);
  z-index:5; max-width:calc(100% - 32px);
  display:flex; align-items:center; gap:clamp(14px,2vw,26px);
  padding:12px clamp(16px,1.6vw,22px); border-radius:18px;
  border:1px solid rgba(228,217,196,.95); background:rgba(252,249,248,.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 16px 40px rgba(119,90,25,.12);
}
.az-vit__pl { display:block; padding-right:clamp(14px,1.6vw,22px); border-right:1px solid #ece3d3; }
.az-vit__num { display:flex; align-items:center; gap:7px;
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.25em; text-transform:uppercase; color:#775a19; }
.az-vit__name { display:flex; align-items:baseline; gap:9px; margin-top:3px; flex-wrap:wrap; }
.az-vit__name strong { font-family:var(--serif); font-size:clamp(15px,1.3vw,19px);
  font-weight:400; color:#1c1b1b; }
.az-vit__name i { font-style:normal; font-size:10px; letter-spacing:.08em; color:#625e54; }
.az-vit__pr { display:flex; align-items:center; gap:clamp(10px,1.2vw,16px); }
.az-vit__fin { display:block; }
.az-vit__fin i { display:block; font-family:var(--label); font-style:normal; font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; color:#706757; }
.az-vit__fin b { display:block; margin-top:2px; font-family:var(--label); font-size:11px;
  font-weight:600; letter-spacing:.08em; color:#775a19; }
.az-vit__sw { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.az-vit__chip {
  width:28px; height:28px; border-radius:8px; cursor:pointer; position:relative;
  border:1px solid var(--swatch-line); padding:0; flex:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease;
}
.az-vit__chip::after {
  content:''; position:absolute; inset:0; border-radius:7px; pointer-events:none;
  background:linear-gradient(45deg,rgba(0,0,0,.2),transparent 55%,rgba(255,255,255,.55));
}
.az-vit__chip:hover { transform:scale(1.08); }
.az-vit__chip.is-on {
  box-shadow:0 0 0 2px #fcf9f8, 0 0 0 4px #775a19, inset 0 1px 3px rgba(0,0,0,.2);
}
/* нумерованная лента 01 … N с двумя стрелками */
.az-vit__ribbon {
  position:relative; z-index:6; margin:clamp(-34px,-3vw,-26px) auto 0;
  width:max-content; max-width:calc(100% - 24px);
  display:flex; align-items:center; gap:10px; padding:9px;
  border-radius:99px; border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.88); backdrop-filter:blur(18px);
  box-shadow:0 15px 40px rgba(119,90,25,.12);
}
.az-vit__arr {
  width:40px; height:40px; flex:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;
  border:1px solid #e8decd; background:transparent; color:#4e4639;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.az-vit__arr:hover { background:#ede6d8; color:#1c1b1b; border-color:#c5a059; }
.az-vit__pills {
  display:flex; align-items:center; gap:6px; overflow-x:auto; padding:2px 6px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.az-vit__pills::-webkit-scrollbar { display:none; }
.az-vit__pill {
  width:32px; height:32px; flex:none; border-radius:50%; cursor:pointer; border:0;
  background:transparent; color:#625e54;
  font-family:var(--label); font-size:11px; font-weight:500; letter-spacing:.06em;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease;
}
.az-vit__pill:hover { background:#ede4d2; }
.az-vit__pill.is-on {
  background:#c5a059; color:#4e3700; font-weight:600;
  box-shadow:0 2px 8px rgba(197,160,89,.45);
}
@media (max-width:860px){
  .az-vit__panel { flex-direction:column; align-items:flex-start; gap:10px; border-radius:14px; }
  .az-vit__pl { padding-right:0; border-right:0; }
  .az-vit__lede { display:none; }
}

/* ================================================= барабан коллекций
   Кольцо круглых миниатюр вокруг крупного кадра. Колесо проворачивается,
   выбранная коллекция встаёт в зенит, кружки при этом остаются ровными. */
.az-sec--orb { background:linear-gradient(180deg,#ffffff,#faf7f2 60%,#f4efe6); }
.az-orb { display:flex; justify-content:center; }
.az-orb__grid {
  display:grid; align-items:center; gap:clamp(20px,2.6vw,46px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);
}
@media (max-width:1180px){
  .az-orb__grid { grid-template-columns:1fr; }
  .az-orb__side { max-width:720px; margin-inline:auto; }
}
.az-orb__stage {
  position:relative; width:min(94vw,860px); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; margin-inline:auto;
}
/* боковые панели: слева о коллекции, справа её данные */
.az-orb__side { min-width:0; }
.az-orb__side--l .az-orb__kick { color:#775a19; }
.az-orb__lede { margin:10px 0 0; font-size:14px; line-height:1.65; color:var(--ink); }
.az-orb__desc {
  margin:12px 0 0; font-size:13px; line-height:1.7; color:var(--muted);
  padding-top:12px; border-top:1px solid var(--line-faint);
}
.az-orb__side .az-orb__cta { margin-top:20px; }
.az-orb__specs {
  margin:14px 0 0; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:0 clamp(10px,1.2vw,18px);
}
.az-orb__specs dt {
  font-family:var(--label); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:#706757; padding:9px 0; border-top:1px solid var(--line-faint); align-self:center;
}
.az-orb__specs dd {
  margin:0; padding:9px 0; border-top:1px solid var(--line-faint);
  font-size:13px; line-height:1.45; color:var(--ink); text-align:right;
  overflow-wrap:anywhere;
}
.az-orb__specs dt:first-of-type, .az-orb__specs dd:first-of-type { border-top:0; }
/* холст 3D-модели в центре барабана */
.az-orb__model {
  position:absolute; inset:21%; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.az-orb__model canvas { cursor:grab; touch-action:pan-y; }
.az-orb__model.is-drag canvas { cursor:grabbing; }
.az-orb__model canvas { width:100% !important; height:100% !important; display:block; }
.az-orb__disc {
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  /* середина диска ровно белая — тогда белый фон кадра каталога не даёт
     квадрата с краями, как и внутри стеклянных витрин */
  background:radial-gradient(circle at 50% 50%,
    #ffffff 0%, #ffffff 46%, rgba(250,247,242,.9) 62%,
    rgba(244,239,230,.8) 82%, rgba(236,229,220,.72) 100%);
  border:1px solid rgba(197,160,89,.25);
  box-shadow:0 24px 70px rgba(119,90,25,.07), inset 0 1px 3px rgba(255,255,255,.95);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.az-orb__ring { position:absolute; border-radius:50%; pointer-events:none; }
.az-orb__ring--a { inset:11%; border:1px dashed rgba(197,160,89,.3); }
.az-orb__ring--b { inset:24%; border:1px solid rgba(197,160,89,.17); }
.az-orb__ax { position:absolute; pointer-events:none; }
.az-orb__ax--v { top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(197,160,89,.22),transparent); }
.az-orb__ax--h { left:0; right:0; top:50%; height:1px; transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(197,160,89,.22),transparent); }
.az-orb__mark {
  position:absolute; left:50%; transform:translateX(-50%); z-index:4; white-space:nowrap;
  font-family:var(--label); font-size:9px; letter-spacing:.25em; text-transform:uppercase;
  padding:3px 10px; border-radius:99px; background:rgba(252,249,248,.95);
  border:1px solid rgba(197,160,89,.25); box-shadow:0 2px 6px rgba(119,90,25,.06);
}
.az-orb__mark--t { top:-13px; color:rgba(119,90,25,.85); }
.az-orb__mark--b { bottom:-13px; color:rgba(98,94,84,.8); }
.az-orb__shadow {
  position:absolute; left:50%; bottom:19%; transform:translateX(-50%); z-index:1;
  width:34%; height:12px; border-radius:99px; pointer-events:none;
  background:rgba(197,160,89,.3); filter:blur(9px);
}
.az-orb__wheel {
  position:absolute; inset:0; z-index:5; border-radius:50%;
  pointer-events:none;                 /* иначе колесо перехватывает мышь у модели */
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.az-orb__node { pointer-events:auto; }
.az-orb__node {
  position:absolute; width:clamp(62px,7.6vw,104px); height:clamp(62px,7.6vw,104px);
  margin-left:clamp(-52px,-3.8vw,-31px); margin-top:clamp(-52px,-3.8vw,-31px);
  border:0; padding:0; background:none; cursor:pointer; border-radius:50%;
}
.az-orb__in {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border-radius:50%; padding:6px; background:#ffffff;
  border:1px solid rgba(197,160,89,.3); box-shadow:0 8px 20px rgba(119,90,25,.12);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.az-orb__node:hover .az-orb__in { border-color:rgba(197,160,89,.8); }
.az-orb__in img { width:100%; height:100%; object-fit:contain; border-radius:50%; display:block; }
.az-orb__halo {
  position:absolute; inset:-4px; border-radius:50%; pointer-events:none;
  border:2px solid transparent; transition:border-color .3s ease, box-shadow .3s ease;
}
.az-orb__node.is-on .az-orb__in { border-color:rgba(197,160,89,.95); }
.az-orb__node.is-on .az-orb__halo {
  border-color:#c5a059; box-shadow:0 0 18px rgba(197,160,89,.55);
}
.az-orb__lbl {
  position:absolute; left:50%; bottom:-20px; z-index:3; white-space:nowrap;
  font-family:var(--label); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:2px 8px; border-radius:99px; color:#625e54;
  background:rgba(255,255,255,.95); border:1px solid rgba(197,160,89,.22);
  opacity:0; transition:opacity .3s ease, transform 1.4s cubic-bezier(.16,1,.3,1);
  transform-origin:center; margin-left:-50%;
}
.az-orb__node.is-on .az-orb__lbl { opacity:1; color:#775a19; font-weight:600; }
.az-orb__node:hover .az-orb__lbl { opacity:1; }

/* кнопка в левой панели */
/* покрытия в правой панели барабана */
.az-orb__fin { display:block; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-faint); }
.az-orb__flbl { display:block; font-family:var(--label); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; color:#706757; }
.az-orb__fname { display:block; margin:4px 0 10px; font-family:var(--label);
  font-size:11px; font-weight:600; letter-spacing:.08em; color:#775a19; }
.az-orb__sw { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.az-orb__cta { align-self:flex-start; }
@media (max-width:860px){
  .az-orb__facts { border:0; padding:0; }
  .az-orb__dock { flex-direction:column; align-items:flex-start; }
  .az-orb__lbl { display:none; }
  .az-orb__node.is-on .az-orb__lbl { display:block; }
}

/* переход по брендам в палитре Artize */
.az-sec--brands { background:#f6f3f2; border-top:1px solid var(--line-faint); }
.az-sec--brands .brandcol { background:#ffffff; }
.az-sec--brands .brandcol.is-here { border-color:rgba(197,160,89,.6); background:#fffdf8; }
.az-sec--brands .intro { margin-bottom:clamp(28px,3.4vw,52px); }

/* видео-архив и хроника Artize берут готовые блоки ленты и хроники:
   цвета приходят из токенов бренда, разметка одна и та же */
.az-sec--arch { padding-bottom:clamp(40px,5vw,80px); }
.az-sec--path { background:#f6f3f2; }
.az-sec--path .chrono__card { background:#ffffff; }

/* ----------------------------------------------- экспозиционный селектор */
.az-dial { position:relative; }
.az-dial__stage { position:relative; height:clamp(250px,32vw,430px); overflow:hidden; }
.az-dial__arc {
  position:absolute; left:50%; bottom:clamp(40px,6vw,76px);
  width:min(980px,94%); height:clamp(98px,12vw,186px);
  transform:translateX(-50%); pointer-events:none;
  border:1px solid rgba(197,160,89,.3); border-radius:50%;
}
.az-dial__track { position:absolute; inset:0; display:grid; place-items:center; }
.az-dial__item {
  grid-area:1 / 1; position:relative;
  width:clamp(132px,14.5vw,214px);
  display:flex; flex-direction:column; align-items:center; gap:13px;
  appearance:none; background:none; border:0; padding:0; font:inherit; cursor:pointer;
  will-change:transform, opacity;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .45s ease;
}
.az-dial__ring {
  display:grid; place-items:center;
  width:clamp(132px,14.5vw,214px); height:clamp(132px,14.5vw,214px);
  border-radius:50%; border:1px solid rgba(229,212,185,.9); background:#fffdf8;
  box-shadow:0 16px 38px rgba(119,90,25,.08);
  transition:border-color .35s ease, box-shadow .35s ease;
}
.az-dial__item.is-on .az-dial__ring {
  border-color:rgba(197,160,89,.95);
  box-shadow:0 22px 50px rgba(197,160,89,.24), 0 0 30px rgba(229,193,118,.3);
}
.az-dial__plate { display:block; overflow:hidden; width:88%; height:88%; border-radius:50%; background:#f2ece1; }
.az-dial__plate img { width:100%; height:100%; object-fit:cover; display:block; }
.az-dial__lbl {
  font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  transition:color .3s ease; text-align:center;
}
.az-dial__item.is-on .az-dial__lbl { color:var(--bronze); }
.az-dial__nav {
  position:absolute; top:50%; z-index:30; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; line-height:1; padding:0 0 3px;
  appearance:none; font-size:22px;
  background:rgba(255,253,248,.92); backdrop-filter:blur(8px);
  border:1px solid rgba(197,160,89,.45); color:#6b5c3c;
  transition:border-color .25s ease, color .25s ease;
}
.az-dial__nav:hover { border-color:var(--bronze); color:var(--bronze); }
.az-dial__nav--l { left:0 } .az-dial__nav--r { right:0 }
.az-dial__card { text-align:center; max-width:620px; margin:clamp(6px,1.4vw,22px) auto 0; }
.az-dial__kicker {
  display:block; font-family:var(--label); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bronze);
}
.az-dial__title {
  margin:10px 0 8px; font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,2.8vw,42px); line-height:1.12; color:var(--ink); letter-spacing:.03em;
}
.az-dial__fin { margin:0 0 20px; font-size:13px; line-height:1.6; color:var(--muted); }
@media (max-width:760px){ .az-dial__arc{ bottom:32px } .az-dial__nav{ width:38px;height:38px;font-size:19px } }

/* ==========================================================================
   ПРОЕКТЫ — окно «Маршрут Воды» (макет Аббосхона, 06.10.2026)
   Настоящая карта мира · досье объекта · две встречные ленты.
   Палитра своя не нужна: раздел Jaquar уже графитово-бронзовый.
   ========================================================================== */

/* шапка раздела должна начинаться ниже липкой шапки сайта */
.prj-route {
  padding-top: calc(var(--hdr-safe) + clamp(22px, 3vw, 48px));
  padding-bottom: clamp(40px, 5vw, 76px);
}
.prj-head { max-width: 72ch; }
.prj-head--mid { margin: 0 auto; text-align: center; }
.prj-rule {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--label); font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--bronze); margin: 0 0 14px;
}
.prj-head--mid .prj-rule { justify-content: center; }
.prj-rule span { display: block; width: 42px; height: 1px; background: var(--line-strong); }
.prj-h1 { margin: 0 0 16px; }
.prj-lede {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(16px, 1.5vw, 22px); line-height: 1.55;
  color: var(--muted); margin: 0; max-width: 62ch;
}
.prj-head--mid .prj-lede { margin-inline: auto; }
.prj-stat {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 0;
  font-family: var(--label); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.prj-stat--mid { justify-content: center; }
.prj-stat b { color: var(--bronze); font-weight: 600; }
.prj-stat span { opacity: .45; }

/* ---- карта: пропорция ровно та же, что у кадра в data/worldmap.js,
   поэтому контуры стран заполняют плашку целиком, без пустых полей */
.prj-map {
  position: relative; width: 100%;
  margin-top: clamp(26px, 3vw, 44px);
  aspect-ratio: 2000 / 789;
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(var(--glow), .10), transparent 70%),
    var(--bg-elevated);
  overflow: hidden;
}
.prj-map__plate {
  position: absolute; inset: 0; color: var(--bronze);
  opacity: 0; transition: opacity 1.2s ease;
}
.prj-map__plate.is-in { opacity: .55; }
.prj-map__svg { width: 100%; height: 100%; display: block; }

/* ---- метка объекта */
.prj-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 34px; height: 34px; padding: 0; border: 0; background: none;
  cursor: pointer; z-index: 4;
  display: flex; align-items: center; justify-content: center;
}
.prj-pin__radar {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--bronze); pointer-events: none;
  animation: prjRadar 2.8s cubic-bezier(.15,.85,.35,1) infinite;
}
@keyframes prjRadar {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(2.8); opacity: 0; }
}
.prj-pin__dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bronze); border: 2px solid var(--bg-secondary);
  box-shadow: 0 0 12px var(--bronze);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.prj-pin:hover .prj-pin__dot { transform: scale(1.25); }
.prj-pin.is-on { z-index: 6; }
.prj-pin.is-on .prj-pin__dot {
  width: 16px; height: 16px; background: var(--ivory);
  border-color: var(--bronze); box-shadow: 0 0 18px var(--bronze);
}
.prj-pin.is-on .prj-pin__radar { width: 38px; height: 38px; border-width: 2px; }
/* Подпись висит только у выбранной метки и у той, на которую навели:
   на настоящей карте соседние города стоят близко, и шесть подписей
   разом наезжали бы друг на друга. Все названия есть во вкладках ниже. */
.prj-pin__tag {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap; pointer-events: none; opacity: 0;
  padding: 4px 10px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(8px);
  border: 1px solid var(--line); color: var(--ivory-dim);
  font-family: var(--label); font-size: 11px; letter-spacing: .1em;
  transition: opacity .25s ease, transform .25s ease,
              border-color .25s ease, color .25s ease;
}
.prj-pin__tag--down { bottom: auto; top: 24px; }
.prj-pin:hover .prj-pin__tag, .prj-pin:focus-visible .prj-pin__tag {
  opacity: 1; transform: translateX(-50%) translateY(0);
  border-color: var(--line-strong); color: var(--ivory); z-index: 7;
}
.prj-pin.is-on .prj-pin__tag {
  opacity: 1; transform: translateX(-50%) translateY(0);
  background: var(--bg-high); border-color: var(--bronze);
  color: var(--bronze); font-weight: 600; letter-spacing: .14em;
}

/* ---- точка присутствия: салон Jaquar World, штаб-квартира, наш шоурум */
.prj-map__spots { position: absolute; inset: 0; z-index: 2; }
.prj-spot {
  position: absolute; transform: translate(-50%, -50%);
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.prj-spot i {
  width: 7px; height: 7px; border-radius: 50%; display: block;
  background: var(--bronze-soft); opacity: .62;
  box-shadow: 0 0 7px rgba(var(--glow), .5);
  transition: transform .25s ease, opacity .25s ease;
}
.prj-spot--home i {
  width: 10px; height: 10px; background: var(--bronze); opacity: 1;
  box-shadow: 0 0 14px var(--bronze);
}
.prj-spot:hover i, .prj-spot:focus-visible i { transform: scale(1.5); opacity: 1; }
.prj-spot__tip {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(4px);
  white-space: nowrap; pointer-events: none; opacity: 0;
  display: flex; flex-direction: column; gap: 1px; text-align: center;
  padding: 5px 11px; border-radius: 8px; z-index: 5;
  background: var(--bg-high); border: 1px solid var(--line);
  font-family: var(--label); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bronze);
  transition: opacity .25s ease, transform .25s ease;
}
.prj-spot__tip b {
  font-family: var(--sans); font-size: 11px; font-weight: 400;
  letter-spacing: .02em; text-transform: none; color: var(--ivory);
}
.prj-spot:hover .prj-spot__tip, .prj-spot:focus-visible .prj-spot__tip {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ---- полоса под картой: вкладки и подсказка стоят отдельными строками,
   поэтому перекрыть друг друга не могут */
.prj-map__bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: clamp(16px, 2vw, 34px);
  margin-top: 16px; padding: 14px 18px;
  border: 1px solid var(--line-faint); border-radius: var(--r-card);
  background: var(--bg-elevated);
}
.prj-tabs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.prj-tabs__k {
  font-family: var(--label); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); margin-right: 6px;
}
.prj-tab {
  flex: 0 0 auto; padding: 9px 16px; border: 1px solid var(--line-faint);
  border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--label); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ivory-dim);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.prj-tab:hover { color: var(--ivory); border-color: var(--line); }
.prj-tab.is-on {
  color: var(--bronze); font-weight: 600;
  background: var(--bronze-glow); border-color: var(--line-strong);
}
.prj-map__hint {
  display: flex; align-items: flex-start; gap: 11px; margin: 0;
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.prj-map__hint span {
  flex: 0 0 auto; width: 7px; height: 7px; margin-top: 7px;
  border-radius: 50%; background: var(--bronze);
  animation: prjBlink 1.8s ease-in-out infinite;
}
@keyframes prjBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- досье объекта */
/* Снимки объектов вырезаны из печатной брошюры: настоящая детализация в
   них около 295×169 px. Раньше карточка растягивала их почти на 1050 px —
   отсюда и мыло. Теперь кадр показывается не шире 560 px, то есть меньше
   чем вдвое от исходника, и выглядит резким. Вернуть полноразмерную
   карточку можно, как только придёт оригинал брошюры в печатном качестве. */
.prj-dos {
  /* 07.10.2026: карточка объекта идёт ровно в ширину карты — она лежит в том же
     .container, поэтому без max-width обе совпадают на любом экране сами собой.
     Колонки заданы долями, а не 660 px: иначе на широком экране фото осталось бы
     прежним, а справа появилась бы пустота. 1.08fr держит кадр в пределах 1400 px
     исходника даже на 2560 — увеличивать сверх этого нечего, станет мылить. */
  margin: clamp(22px, 2.4vw, 34px) auto 0; max-width: none;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: stretch; position: relative; overflow: hidden;
  padding: clamp(20px, 2.6vw, 48px);
  border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  background: var(--bg-elevated);
  transition: opacity .22s ease, transform .22s ease;
}
.prj-dos.is-turn { opacity: .4; transform: translateY(10px); }
/* Ширину кадра задаёт колонка сетки. Если оставить aspect-ratio, браузер
   при align-items:stretch считает ширину из высоты строки — и фото вылезает
   на соседнюю колонку поверх заголовка. */
.prj-dos__media {
  /* 07.10.2026: рамка была 3/2, а кадры брошюры 1400x807 — шире, и object-fit
     срезал им края. Ставим пропорции самих кадров, теперь виден весь кадр. */
  position: relative; width: 100%; align-self: start; aspect-ratio: 1400 / 807;
  border-radius: var(--r-card);
  overflow: hidden; border: 1px solid var(--line); background: var(--bg-secondary);
}
.prj-dos__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prj-dos__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--veil), .85), transparent 46%);
}
.prj-dos__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 5px 12px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); color: var(--bronze);
  font-family: var(--label); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
}
.prj-dos__foot {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.prj-dos__foot b { color: var(--ph-ink); font-weight: 400; font-size: 13px; }
.prj-dos__foot i {
  font-style: normal; font-family: var(--label); font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bronze);
}
.prj-dos__body { display: flex; flex-direction: column; }
.prj-dos__ey { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.prj-dos__ey span { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); }
.prj-dos__ey b {
  font-family: var(--label); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--bronze); font-weight: 500;
}
.prj-dos__t {
  font-family: var(--serif); font-weight: 400; margin: 0 0 18px;
  font-size: clamp(24px, 2.6vw, 38px); line-height: 1.12; color: var(--ivory);
}
.prj-dos__ext {
  position: relative; margin: 0 0 18px; border-radius: var(--r-card);
  overflow: hidden; border: 1px solid var(--line-faint); background: var(--bg-secondary);
}
.prj-dos__ext { max-width: 620px; }
.prj-dos__ext img { width: 100%; aspect-ratio: 1400 / 810; object-fit: cover; display: block; }
.prj-dos__ext span {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ph-glass); backdrop-filter: blur(6px);
  border: 1px solid var(--ph-line);
  font-family: var(--label); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ph-ink);
}
.prj-dos__note { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0 0 22px; }
.prj-dos__nav { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.prj-dos__arrows { display: flex; gap: 8px; }
.prj-arrow {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--muted);
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, color .2s ease;
}
.prj-arrow:hover { border-color: var(--bronze); color: var(--bronze); }
.prj-dos__ix { font-family: var(--label); font-size: 11px; letter-spacing: .2em; color: var(--muted); }

/* ---- общая лента: награды едут влево, сертификаты навстречу — вправо */
.prj-marq { position: relative; overflow: hidden; padding: 12px 0; }
.prj-marq::before, .prj-marq::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 3; pointer-events: none;
}
.prj-marq--ltr::before { left: 0;  background: linear-gradient(to right, var(--bg-main), transparent); }
.prj-marq--ltr::after  { right: 0; background: linear-gradient(to left,  var(--bg-main), transparent); }
.prj-marq--rtl::before { left: 0;  background: linear-gradient(to right, var(--bg-secondary), transparent); }
.prj-marq--rtl::after  { right: 0; background: linear-gradient(to left,  var(--bg-secondary), transparent); }
/* Лента не должна обрываться. Сдвиг задаётся не в процентах, а ровно на
   ширину одного набора карточек (--prj-step): её замеряет mount и ставит
   в стиль. Набор повторяется столько раз, чтобы лента была заведомо шире
   экрана — тогда на месте стыка всегда стоит следующая карточка.
   В процентах это не работало: половина дорожки не совпадала с началом
   второго набора, и на широком экране в конце появлялась пустота. */
.prj-marq__track {
  display: flex; align-items: stretch; gap: 24px; width: max-content; padding: 0 12px;
  --prj-step: 50%;
}
.prj-marq--ltr .prj-marq__track { animation: prjRailL var(--prj-time, 46s) linear infinite; }
.prj-marq--rtl .prj-marq__track { animation: prjRailR var(--prj-time, 64s) linear infinite; }
.prj-marq:hover .prj-marq__track,
.prj-marq:focus-within .prj-marq__track { animation-play-state: paused; }
@keyframes prjRailL {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--prj-step))); }
}
@keyframes prjRailR {
  from { transform: translateX(calc(-1 * var(--prj-step))); }
  to   { transform: translateX(0); }
}

/* ---- паспорта качества */
.prj-certs {
  padding: clamp(40px, 5vw, 86px) 0;
  border-top: 1px solid var(--line-faint); background: var(--bg-secondary);
}
.prj-certs__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 22px;
  padding-bottom: clamp(18px, 2vw, 30px); border-bottom: 1px solid var(--line-faint);
  margin-bottom: clamp(18px, 2.2vw, 32px);
}
.prj-certs__aside { margin: 0; max-width: 52ch; font-size: 14px; line-height: 1.7; color: var(--muted); }
.prj-pass {
  flex: 0 0 auto; width: clamp(236px, 23vw, 282px);
  display: flex; flex-direction: column;
  padding: 22px; border-radius: var(--r-card);
  border: 1px solid var(--line-faint); background: var(--bg-elevated);
  transition: border-color .4s ease, transform .4s ease;
}
.prj-pass:hover { border-color: var(--bronze); transform: translateY(-6px); }
.prj-pass__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-faint); margin-bottom: 16px;
}
.prj-pass__land {
  font-family: var(--label); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.prj-pass__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); flex: 0 0 auto; }
/* знак лежит на тёплой кремовой подложке, с воздухом по краям —
   так вырезанные логотипы перестают выглядеть наклейками */
/* Знак лежит на ровной белой подложке: у большинства файлов фон уже белый,
   и на градиенте он проступал светлым прямоугольником внутри плашки. */
.prj-pass__mark {
  width: 100%; height: 96px; border-radius: 10px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; padding: 18px 24px;
  background: #ffffff;
  font-family: var(--label); font-weight: 600; color: var(--bg-main);
}
.prj-pass__mark img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}
.prj-pass__k {
  font-family: var(--serif); font-weight: 400; font-size: 20px;
  margin: 0 0 8px; color: var(--ivory);
}
.prj-pass__d { font-size: 12px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; flex: 1 1 auto; }
.prj-pass__seal {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line-faint);
}
.prj-pass__ok {
  font-family: var(--label); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bronze); font-weight: 600;
}
.prj-pass__src { font-family: var(--label); font-size: 9px; letter-spacing: .1em; color: var(--muted); }

/* ---- awards in motion */
.prj-aw {
  padding: clamp(48px, 6vw, 100px) 0 clamp(40px, 5vw, 76px);
  border-top: 1px solid var(--line-faint); position: relative; overflow: hidden;
}
.prj-aw::before {
  content: ''; position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: min(1100px, 120%); height: 420px; border-radius: 50%;
  background: var(--bronze-glow); filter: blur(90px); pointer-events: none;
}
.prj-aw .prj-marq { margin: clamp(28px, 3vw, 50px) 0 clamp(32px, 3.4vw, 54px); }
.prj-medal {
  display: flex; align-items: center; gap: 18px; flex: 0 0 auto;
  padding: 14px 30px 14px 14px; border-radius: 28px;
  border: 1px solid var(--line-faint); background: var(--bg-elevated);
  transition: border-color .4s ease, transform .4s cubic-bezier(.16,1,.3,1),
              box-shadow .4s ease, padding .4s ease;
}
.prj-medal:hover, .prj-medal:focus-visible {
  border-color: var(--bronze); transform: scale(1.07);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.75);
}
.prj-medal__disc {
  width: 78px; height: 78px; border-radius: 50%; flex: 0 0 auto; padding: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line-strong); background: #ffffff;
  transition: border-color .4s ease, box-shadow .4s ease, width .4s ease, height .4s ease;
}
.prj-medal:hover .prj-medal__disc, .prj-medal:focus-visible .prj-medal__disc {
  border-color: var(--bronze); box-shadow: 0 0 22px rgba(var(--glow), .35);
}
.prj-medal__disc img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
}
/* Ширину подписи резервируем всегда: если она появлялась только при
   наведении, медаль раздувалась и шаг ленты уезжал. */
.prj-medal__txt { display: flex; flex-direction: column; width: 28ch; }
.prj-medal__txt b {
  font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ivory);
  transition: color .3s ease;
}
.prj-medal:hover .prj-medal__txt b, .prj-medal:focus-visible .prj-medal__txt b { color: var(--bronze); }
/* подпись появляется только при наведении — так лента читается спокойнее */
.prj-medal__txt i {
  font-style: normal; font-size: 12px; line-height: 1.5; color: var(--muted);
  opacity: 0; max-height: 0; margin-top: 0; overflow: hidden;
  transition: opacity .35s ease, max-height .45s ease, margin-top .45s ease;
}
.prj-medal:hover .prj-medal__txt i, .prj-medal:focus-visible .prj-medal__txt i {
  opacity: 1; max-height: 64px; margin-top: 6px;
}

/* ---- финальный блок */
.prj-end {
  text-align: center; max-width: 72ch; margin: 0 auto;
  padding-top: clamp(22px, 2.6vw, 40px); border-top: 1px solid var(--line-faint);
}
.prj-end__q {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(17px, 1.7vw, 24px); line-height: 1.55; color: var(--ivory); margin: 0 0 18px;
}
.prj-end__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  margin: 0 0 24px; font-family: var(--label); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.prj-end__sep { color: var(--bronze); }

/* ---- планшет и телефон */
@media (max-width: 1100px) {
  .prj-map__bar { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .prj-dos { grid-template-columns: 1fr; max-width: 660px; }
  .prj-dos__ext { max-width: none; }
}
@media (max-width: 900px) {
  .prj-pin__tag { font-size: 10px; padding: 3px 8px; }
}
@media (max-width: 640px) {
  /* 19.10.2026, замечание Аббосхона: карту «распидорасило».
     Причина: рамку на телефоне делали квадратной, а контуры рисуются
     с preserveAspectRatio="none" — svg послушно растягивался, и материки
     вытягивались по высоте в два с половиной раза. Пропорцию вернули,
     а чтобы карта не стала полоской в 150 px, она шире экрана и
     прокручивается вбок; показывается сразу та часть, где объекты. */
  .prj-map { width: 190%; min-width: 680px; }
  .prj-pin__tag { font-size: 9px; padding: 2px 7px; letter-spacing: .04em; }
  .prj-tab { padding: 7px 13px; font-size: 11px; }
  .prj-medal { padding: 10px 22px 10px 10px; gap: 14px; }
  .prj-medal__disc { width: 62px; height: 62px; padding: 10px; }
  .prj-medal__txt { width: 22ch; }
}
@media (prefers-reduced-motion: reduce) {
  .prj-pin__radar, .prj-map__hint span, .prj-marq__track { animation: none; }
}

/* Объект из брошюры, по которому снимка ещё нет: золотая точка крупнее
   салонной, но без радара — кликать нечего, пока нет кадра. */
.prj-spot--obj i {
  width: 9px; height: 9px; background: var(--bronze); opacity: .92;
  box-shadow: 0 0 10px rgba(var(--glow), .7);
}
.prj-spot--obj .prj-spot__tip { border-color: var(--line-strong); }

/* Набор карточек внутри ленты: сам по себе — та же строка с тем же зазором,
   поэтому стык между наборами ничем не отличается от обычного промежутка. */
.prj-marq__set { display: flex; align-items: stretch; gap: 24px; flex: 0 0 auto; }

/* ==========================================================================
   Ролик раздела каталога — в пропорциях рилса (07.10.2026)

   Блок был квадратный 1:1, а ролики сняты вертикально. Ставим 9:16, как у
   рилса: ролик занимает кадр целиком, без полей по бокам. Правило висит на
   своём классе .shot--reel, чтобы не задеть такие же блоки на страницах
   коллекций и брендов — там кадр остаётся прежним.
   ========================================================================== */
.split__aside .shot--reel { aspect-ratio: 9 / 16; max-width: 400px; }

@media (max-width: 1024px) {
  .split__aside .shot--reel { max-width: 340px; }
}
@media (max-width: 640px) {
  .split__aside .shot--reel { max-width: 300px; aspect-ratio: 9 / 16; }
}

/* ==========================================================================
   Окно-предложение через пять минут на сайте (07.10.2026)

   Намеренно не во весь экран: это предложение, а не преграда. На большом
   экране — карточка в правом нижнем углу, на телефоне — лист снизу.
   Подложка полупрозрачная, страница за ней видна и читается.
   ========================================================================== */
.invite { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.invite__veil {
  position: absolute; inset: 0; background: rgba(8, 7, 7, .42);
  opacity: 0; transition: opacity .22s ease; pointer-events: auto;
}
.invite__card {
  position: absolute; right: clamp(14px, 2vw, 32px); bottom: clamp(14px, 2vw, 32px);
  width: min(400px, calc(100vw - 28px));
  max-height: calc(100vh - 56px); overflow-y: auto; pointer-events: auto;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  background: var(--bg-elevated);
  transform: translateY(14px); opacity: 0;
  transition: transform .26s ease, opacity .26s ease;
}
.invite.is-on .invite__veil { opacity: 1; }
.invite.is-on .invite__card { transform: none; opacity: 1; }

.invite__x {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  display: grid; place-items: center; line-height: 1; font-size: 22px;
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--muted); border-radius: 50%;
}
.invite__x:hover { color: var(--ink); background: var(--glass); }

.invite__card .t-h4 { margin: 6px 0 8px; }
.invite__lede { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; }

.invite__choices { display: grid; gap: 10px; }
.invite__pick {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 14px; text-align: left; cursor: pointer;
  padding: 14px 16px; appearance: none;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--bg-secondary); color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
}
.invite__pick:hover { border-color: var(--bronze); background: var(--bg-elevated); }
.invite__pickH { font-size: 14px; }
.invite__pickT { grid-column: 1; font-size: 12px; line-height: 1.5; color: var(--muted); }
.invite__pickA { grid-column: 2; grid-row: 1 / span 2; color: var(--bronze); }

.invite__form { display: grid; gap: 14px; }
.invite__actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.invite__actions--one { grid-template-columns: 1fr; }

@media (max-width: 640px) {
  .invite__card {
    right: 0; left: 0; bottom: 0; width: auto;
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    max-height: 86vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .invite__veil, .invite__card { transition: none; }
}

/* витрина на главной меняет коллекцию — смена мягкая, без рывка */
#solit-wrap { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { #solit-wrap { transition: none; } }

/* ==========================================================================
   ШОУРУМ — «SHOWROOM PASSPORT» (макет Аббосхона, 07.10.2026)

   Паспорт и билет — бумажные: кремовый лист на тёмной странице. Цвета взяты
   из макета один в один, поэтому заданы здесь локальными переменными, а не
   общими токенами темы: это единственное место на сайте, где светлая бумага.
   ========================================================================== */
.shhero, .shtkwrap {
  --pp: #f6f3ee;            /* бумага */
  --pp-2: #eee8db;          /* бумага потемнее */
  --pp-ink: #1c1b19;        /* текст по бумаге */
  --pp-mute: #8a867e;       /* подписи */
  --gold: #b9924a;
  --gold-soft: #d6b472;
}

.shhero { padding-top: calc(var(--hdr-safe) + clamp(18px, 2.4vw, 40px)); }
.shhero__grid {
  display: grid; gap: clamp(20px, 2.4vw, 38px);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr) minmax(0, .9fr);
  align-items: start;
}
.shhero__say .t-h1 { margin: 10px 0 14px; }
.shhero__say .lede { margin: 0 0 26px; max-width: 42ch; }

.shstatus { border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; }
.shstatus__row {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  font-family: var(--label); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.shstatus__row b { color: var(--gold-soft); font-weight: 400; }
.shstatus__bar { height: 2px; background: var(--line-strong); margin: 12px 0 10px; }
.shstatus__bar i { display: block; height: 100%; width: 50%; background: var(--gold); transition: width .3s ease; }
.shstatus__legs { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--muted); }
.shstatus__legs .is-on { color: var(--ink); }

.shpoints { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.shpoints li { position: relative; padding-left: 16px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.shpoints li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}

/* ------------------------------------------------------------- паспорт */
.shp {
  background: var(--pp); color: var(--pp-ink);
  border-radius: var(--r-card); padding: clamp(20px, 2vw, 32px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.shp__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
  border-bottom: 1px solid rgba(28, 27, 25, .18); padding-bottom: 16px; margin-bottom: 18px; }
.shp__ey, .shp__k, .shtk__ey {
  font-family: var(--label); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pp-mute); margin: 0;
}
.shp__t { font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); margin: 6px 0 4px; letter-spacing: .02em; }
.shp__sub { font-size: 12px; color: var(--gold); margin: 0; letter-spacing: .06em; text-transform: uppercase; }
.shp__stamp {
  flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%;
  border: 1px dashed var(--gold); display: grid; place-content: center; text-align: center;
  color: var(--gold); line-height: 1.25;
}
.shp__stamp b { display: block; font-family: var(--label); font-size: 8px; letter-spacing: .1em; font-weight: 400; }
.shp__stamp i { display: block; font-style: normal; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.shp__body { display: grid; gap: 16px; }
.shp__block { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.shp__v { font-size: 13px; color: var(--gold); margin: 0; }
.shp__q { display: grid; gap: 8px; }
.shp__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shp__actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 4px; }
.shp__foot {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(28, 27, 25, .18);
  font-family: var(--label); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pp-mute); text-align: center;
}
.shp.is-done { opacity: .55; }

.shroute { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shroute__i { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline;
  border: 1px solid rgba(28, 27, 25, .14); border-radius: 4px; padding: 10px 12px; }
.shroute__n { font-family: var(--label); font-size: 10px; color: var(--gold); letter-spacing: .1em; }
.shroute__i b { display: block; font-weight: 400; font-size: 13px; }
.shroute__i i { display: block; font-style: normal; font-size: 11px; color: var(--pp-mute); margin-top: 2px; }
.shroute__empty { font-size: 13px; color: var(--pp-mute); padding: 14px 0; }

/* «таблетки» выбора */
.shpill { display: flex; flex-wrap: wrap; gap: 6px; }
.shpill__i {
  appearance: none; cursor: pointer; font: inherit; font-size: 12px;
  padding: 8px 12px; border: 1px solid rgba(28, 27, 25, .2); border-radius: 3px;
  background: transparent; color: var(--pp-ink); transition: background .18s, border-color .18s;
}
.shpill__i:hover { border-color: var(--gold); }
.shpill__i[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #fff; }

/* поля формы на бумаге: общий стиль сайта тёмный, здесь перекрываем */
.shp .field__label { color: var(--pp-mute); }
.shp .field__control:not(.check__box) {
  background: #fff; color: var(--pp-ink); border-color: rgba(28, 27, 25, .2);
}
/* Заполненное поле Chrome подкрашивает своим серо-синим — на бумаге это
   выглядело грязью. Перебиваем внутренней тенью: фон остаётся белым. */
.shp .field__control:-webkit-autofill,
.shp .field__control:-webkit-autofill:hover,
.shp .field__control:-webkit-autofill:focus,
.shp .field__control:autofill {
  -webkit-box-shadow: inset 0 0 0 1000px #fff !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
  -webkit-text-fill-color: var(--pp-ink) !important;
  caret-color: var(--pp-ink);
}
/* Галочка согласия: на бумаге она тоже .field__control, и общий стиль делал
   из неё большое белое поле — нажать было некуда. Возвращаем квадратик. */
.shp .check__box {
  width: 20px; height: 20px; padding: 0; min-height: 0;
  background: transparent; border: 1px solid rgba(28, 27, 25, .32); border-radius: 5px;
}
.shp .check__box:checked { background: var(--gold); border-color: var(--gold); }
.shp .check { cursor: pointer; }
.shp .field__control::placeholder { color: rgba(28, 27, 25, .38); }
.shp .check__text { color: var(--pp-ink); }
.shp .check__text a { color: var(--gold); }
.shp .btn--quiet { color: var(--pp-ink); border-color: rgba(28, 27, 25, .25); }
.shp .btn--quiet:hover { border-color: var(--gold); color: var(--gold); }
.shform { display: grid; gap: 14px; }

/* -------------------------------------------------- конфигуратор зон */
.shcfg__h { font-family: var(--label); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-soft); margin: 0 0 6px; }
.shcfg__t { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.shcfg__list { display: grid; gap: 8px; }
.shcfg__note { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 14px 0 0; }
.shz {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  text-align: left; cursor: pointer; appearance: none; font: inherit;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--bg-secondary); color: var(--ink);
  transition: border-color .2s, background .2s;
}
.shz:hover { border-color: var(--gold); }
.shz[aria-pressed="true"] { border-color: var(--gold); background: rgba(185, 146, 74, .12); }
.shz__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--gold); }
.shz[aria-pressed="true"] .shz__dot { background: var(--gold); }
.shz__h { display: block; font-family: var(--label); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.shz__t { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.shz__n { font-family: var(--label); font-size: 11px; color: var(--gold-soft); }

/* ---------------------------------------------------------- билет */
.shtk {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
  background: var(--pp); color: var(--pp-ink); border-radius: var(--r-card);
  overflow: hidden; max-width: 1100px; margin: 0 auto;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.shtk__main { padding: clamp(20px, 2.2vw, 34px); }
.shtk__t { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); margin: 6px 0 4px; }
.shtk__sub { font-size: 12px; color: var(--gold); margin: 0 0 20px; letter-spacing: .06em; text-transform: uppercase; }
.shtk__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  border-top: 1px solid rgba(28, 27, 25, .18); border-bottom: 1px solid rgba(28, 27, 25, .18);
  padding: 16px 0; margin-bottom: 18px; }
.shtk__grid span { display: block; font-family: var(--label); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pp-mute); margin-bottom: 4px; }
.shtk__grid b { font-weight: 400; font-size: 13px; }
.shtk__k { font-family: var(--label); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pp-mute); margin: 0 0 10px; }
.shtk__zones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.shtk__z { display: inline-flex; align-items: baseline; gap: 8px; font-size: 12px;
  border: 1px solid rgba(28, 27, 25, .16); border-radius: 3px; padding: 8px 12px; }
.shtk__z i { font-style: normal; font-size: 9px; color: var(--gold); letter-spacing: .1em; }
.shtk__addr { font-size: 12px; color: var(--pp-mute); margin: 0; }
.shtk__addr b { color: var(--pp-ink); font-weight: 400; }

.shtk__stub {
  background: var(--pp-2); padding: clamp(18px, 2vw, 28px); text-align: center;
  border-left: 2px dashed rgba(28, 27, 25, .28);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.shtk__admit { font-family: var(--serif); font-size: 20px; margin: 0; letter-spacing: .04em; }
.shtk__qr { width: 150px; height: 150px; background: #fff; padding: 8px; border-radius: 4px; }
.shtk__qr--none { display: block; }
.shtk__code { font-family: var(--label); font-size: 11px; letter-spacing: .1em; color: var(--pp-mute); margin: 0; }

.shacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; max-width: 1100px; margin: clamp(20px, 2.4vw, 34px) auto 0; }
.shact { text-align: left; cursor: pointer; appearance: none; font: inherit;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--bg-elevated); color: var(--ink); transition: border-color .2s; }
.shact:hover { border-color: var(--gold); }
.shact__h { display: block; font-size: 14px; margin-bottom: 4px; }
.shact__t { display: block; font-size: 12px; color: var(--muted); }
.shact__alt {
  display: inline-block; margin-top: 10px; font-size: 12px; color: var(--gold-soft);
  border-bottom: 1px solid currentColor; cursor: pointer;
}
.shact__alt:hover { color: var(--gold); }
.shact[aria-busy="true"] { opacity: .6; pointer-events: none; }

@media (max-width: 1180px) {
  .shhero__grid { grid-template-columns: 1fr 1fr; }
  .shcfg { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .shhero__grid { grid-template-columns: 1fr; }
  .shp__two { grid-template-columns: 1fr; }
  .shtk { grid-template-columns: 1fr; }
  .shtk__stub { border-left: 0; border-top: 2px dashed rgba(28, 27, 25, .28); }
}


/* Образец покрытия, у которого в базе нет своей фотографии: цвет настоящий,
   а снимок на карточке остаётся прежним. Помечаем тонкой диагональю —
   человек видит, что картинка не от этого покрытия, и это не ошибка сайта. */
.az-vit__chip.is-nofoto::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,0) 0 5px, rgba(255,255,255,.55) 5px 6px,
    rgba(0,0,0,.18) 6px 7px, rgba(255,255,255,0) 7px 12px);
  pointer-events: none;
}
.az-vit__chip { position: relative; }

/* Барабан Artize: пока настоящая модель идёт по сети, в центре мягко
   пульсирует точка. Раньше там стояла нарисованная кодом заглушка —
   на медленной связи её успевали принять за изделие (09.10.2026). */
/* ⚠️ position тут НЕ трогаем: .az-orb__model уже position:absolute с inset:21%,
   а правило по id сильнее правила по классу — заданный здесь relative превращал
   inset в простой сдвиг, и модель уезжала из центра барабана вправо и вниз. */
#az-orb-model.az-orb--gruz::after {
  content:''; position:absolute; left:50%; top:50%; width:34px; height:34px;
  margin:-17px 0 0 -17px; border-radius:50%;
  border:2px solid rgba(226,200,150,.28); border-top-color:rgba(226,200,150,.85);
  animation:azGruz 820ms linear infinite; pointer-events:none;
}
@keyframes azGruz { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  #az-orb-model.az-orb--gruz::after { animation:none; border-top-color:rgba(226,200,150,.45); }
}

/* ---------------------------------------------- 16.10.2026
   Точки меток были бронзовые (--mark) и терялись на травертине.
   Красим в тот же винный, что у кнопки «Открыть серию», и даём
   светлое кольцо — тогда точка читается и на тёмном полу, и на стене. */
.room__dot{ background:var(--fill);
  box-shadow:0 0 0 3px rgba(245,242,237,.92), 0 0 0 5px rgba(0,0,0,.28); }
.room__mark:hover .room__dot{ box-shadow:0 0 0 3px rgba(245,242,237,1), 0 0 0 8px rgba(74,18,26,.45); }

/* галочка «красить всё одним цветом» рядом с выбором отделки */
.room__vse{ display:flex; align-items:center; gap:7px; margin-top:10px;
  font-size:12px; letter-spacing:.02em; color:var(--muted); cursor:pointer; user-select:none; }
.room__vse input{ width:14px; height:14px; accent-color:var(--bronze); cursor:pointer; }
.room__vse:hover{ color:var(--ink); }

/* --- 3D-блок на телефоне: кадр и совет вместо сцены ----------------
   Решение Аббосхона 19.10.2026: на телефоне 3D не показываем совсем.
   Сцена 13 МБ при 2,5 МБ у всей остальной страницы, крутить её в
   маленьком окне неудобно и предмет не разглядеть. Остаётся кадр из
   той же сцены и строчка: смотреть — на компьютере. */
.room__poster{ position:absolute; inset:0; width:100%; height:100%;
               object-fit:cover; display:block; }
.room__pusk{ position:absolute; left:0; right:0; bottom:0; z-index:12;
             display:flex; flex-direction:column; align-items:center; gap:6px;
             text-align:center;
             padding:26px 18px calc(18px + env(safe-area-inset-bottom));
             background:linear-gradient(to top,rgba(10,9,9,.94) 45%,transparent); }
.room__sovetH{ font-family:var(--serif); font-size:18px; line-height:1.25;
               color:var(--ink); }
.room__sovet{ max-width:34ch; font-size:13px; line-height:1.5; color:var(--muted); }
.room--zastavka .room__chips,
.room--zastavka .room__marks,
.room--zastavka .room__card{ display:none; }

@media (max-width:760px){
  /* Блок не держит высоту сцены: кадр ложится по своей пропорции. */
  .room--zastavka{ height:auto !important; aspect-ratio:16/10; }
}

/* ==================================================================
   ТЕЛЕФОН — правки 19.10.2026 по замечаниям Аббосхона.
   Всё внутри медиа-запроса: на компьютере ничего не меняется.
   ================================================================== */
@media (max-width:760px){

  /* --- Нижняя панель перекрывала текст ---------------------------
     .mobile-bar висит снизу на 69 px, а у main было padding-bottom:0.
     Из-за этого обрезались подписи под видео и цена «от 1 250 000 сум». */
  main{ padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important; }

  /* --- 1. Витрина «Предмет в фокусе» -----------------------------
     Было: фото во весь квадрат, покрытия под ним. Приходилось листать
     вниз за цветом и обратно наверх, чтобы увидеть результат.
     Стало: кадр ниже и держится на месте, пока выбираешь покрытие. */
  .solit{ gap:14px; }
  /* Кадр пониже — тогда он и кружки покрытий помещаются в один экран,
     и листать вниз-вверх больше не нужно. Липким его делать нельзя:
     проверено — он наезжает на верхний ряд кружков. */
  .solit__media{
    aspect-ratio:auto !important; width:100%; height:32vh; min-height:190px;
    margin:0 0 6px !important; background:var(--bg-elevated);
  }
  .solit__media img{ object-fit:contain; }
  .solit__body{ gap:16px; }
  .solit__row{ gap:8px 14px; }

  /* --- 2. «Вода в движении» --------------------------------------
     Карточки были 9:16 и шириной 200 px — занимали пол-экрана. */
  .reel{ flex:0 0 148px; aspect-ratio:3/4; }
  .reel__t{ font-size:13px; line-height:1.2; }
  .reel__play{ width:40px; height:40px; }
  .reel__play svg{ width:16px; height:16px; }
  .reel__znak{ width:21px; height:21px; font-size:11px; right:9px; bottom:9px; }
  .reelrow{ gap:10px; }

  /* --- 4. «Три бренда» -------------------------------------------
     Карточки шли длинными простынями текста. */
  .brandcols{ gap:18px; }
  .brandcol{ padding-top:16px; gap:9px; }
  .brandcol__name{ font-size:25px; }
  .brandcol__text{ font-size:14px; line-height:1.58; }
  .brandcol .btn--quiet{ padding-top:4px; }

  /* --- Текст под витриной шёл в два узких столбца ------------------
     auto-fit от 210 px на широком телефоне давал две колонки по три
     слова в строке. На телефоне читается в одну. */
  .focusnote{ grid-template-columns:1fr; gap:18px; }
  .focusnote__t{ max-width:none; }

  /* --- Меню было шире экрана -------------------------------------- */
  .drawer, .drawer__inner{ max-width:100vw; overflow-x:hidden; }
}

/* ==================================================================
   РАЗДЕЛ КАТАЛОГА НА ТЕЛЕФОНЕ — правки 19.10.2026 по замечаниям Аббосхона
   ================================================================== */
@media (max-width:760px){
  /* Ролик раздела на телефоне не нужен: он занимал экран целиком, а
     приходят смотреть карточки. Остальное в колонке (фильтр, КП) остаётся. */
  .split__aside .shot--reel{ display:none; }
  .split__aside{ gap:14px; }

  /* Карточки по две в ряд: в один столбец они выходили во весь экран. */
  .grid--2{ grid-template-columns:repeat(2,1fr); gap:10px 9px; }

  /* Содержимое узкой карточки: строка покрытий в 170 px не читается,
     остальное ужимаем, чтобы карточка не стала лесенкой из переносов. */
  .card__body{ padding:11px 11px 13px; gap:5px; }
  .card__kicker{ font-size:9px; letter-spacing:.07em; }
  .card__title{ font-size:15px; line-height:1.2; }
  .card__variant{ font-size:11px; }
  .card__desc{ display:none; }
  .card__foot{ flex-direction:column; align-items:flex-start; gap:8px; margin-top:4px; }
  .card__cta{ font-size:10px; letter-spacing:.06em; }
  .card--product .card__price{ font-size:13px; }
}

/* ==================================================================
   СНИМКИ РАЗНОЙ ВЕЛИЧИНЫ В КАТАЛОГЕ — 19.10.2026
   Измерено по всем 2115 товарам: у 89 снимок меньше 400 px, из них
   девять меньше 200 px и шестнадцать — технические чертежи. Рядом
   стоящие карточки выглядели по-разному: 512-пиксельный снимок
   заполнял рамку, 300-пиксельный висел квадратиком в темноте.
   ================================================================== */

/* Снимок 200–400 px: растягиваем до рамки, но не обрезаем. */
.photo--fit{ display:flex; align-items:center; justify-content:center; position:relative; }
.photo--fit img{ width:100%; height:100%; object-fit:contain; position:absolute; inset:0; }

/* Снимок меньше 200 px — это чертёж, а не фотография. Растягивать
   нечего: ставим его на светлую подложку по центру, чтобы карточка
   читалась как карточка, а не как пустая рамка с точкой. */
.photo--mini{ display:flex; align-items:center; justify-content:center; position:relative;
              background:var(--bg-high); }
.photo--mini img{ width:auto; height:auto;
                  max-width:min(58%,220px); max-height:min(58%,220px);
                  object-fit:contain; margin:auto; position:absolute; inset:0;
                  background:#fff; border-radius:10px; padding:12px;
                  box-sizing:content-box; filter:none; }
.photo--mini::after{ content:none; }

/* ---- карта в «Проектах»: обёртка для бокового пролистывания ---- */
.prj-mapwrap { margin-top: clamp(26px, 3vw, 44px); }
.prj-mapwrap .prj-map { margin-top: 0; }

@media (max-width:760px){
  .prj-mapwrap{ overflow-x:auto; overflow-y:hidden;
                -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .prj-mapwrap::-webkit-scrollbar{ display:none; }
  /* метки мельче: на узкой карте соседние города стояли впритык */
  .prj-pin{ width:26px; height:26px; }
  .prj-pin__radar{ width:22px; height:22px; }
  .prj-pin__dot{ width:10px; height:10px; }
  .prj-pin.is-on .prj-pin__dot{ width:13px; height:13px; }
}

/* ==================================================================
   ШАПКА НА ТЕЛЕФОНЕ — 19.10.2026, ошибка по разбору Аббосхона
   Замерено на 360/375/390/430 px на четырёх страницах: на «Шоуруме»
   кнопки уходили за правый край на 22–65 px. Причина — блок логотипа
   шириной 202 px со свойством flex:none, он никогда не сжимался:
   «Назад» 32 + логотип 202 + кнопки 154 + отступы не влезали в 355 px.
   На 360 px всё было в порядке — там уже работало авторское правило,
   которое ставит «JAQUAR» и «Uzbekistan» в две строки (логотип 107 px).
   Ничего нового не придумываю: распространяю это же авторское правило
   на ширины до 479 px и разрешаю логотипу сжиматься. Кнопки поиска,
   корзины и меню по-прежнему не сжимаются — они всегда целые.
   ================================================================== */
@media (max-width:479px){
  .brand{ flex:0 1 auto; min-width:0; }
  .hdr__actions{ flex:none; }
}
@media (min-width:375px) and (max-width:479px){
  .brand{ flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; }
  .hdr__inner{ gap:10px; }
  .hdr__actions{ gap:4px; }
}