/* Layout: кинематографичный hero с роликом, редакционная сетка 12 колонок,
   где подпись раздела живёт на левом поле, а заголовок и текст — в основном поле.
   Цвет: как логотип и чёрный фасад на Паркенте — тёплый чёрный, кость и серый. Цвет на сайте дают
   только фотографии: флаконы, ингредиенты, магазин. Никаких цветных точек, градиентов и подложек.
   Шрифты: Source Serif 4 (заголовки, тонкие начертания, оптический размер) и Jost (навигация, подписи, текст). */
:root {
  color-scheme: light;
  --ink: #12110f;
  --ink-2: #1b1a17;
  --ink-3: #2c2a26;
  --video: #0d0d0c;
  --paper: #f3f0ea;
  --paper-2: #ebe7df;
  --paper-3: #dfd9ce;
  --white: #faf8f4;
  --mute: #6d675e;
  --mute-inv: #a29e97;
  --line: rgba(18, 17, 15, .12);
  --line-2: rgba(18, 17, 15, .26);
  --line-inv: rgba(250, 248, 244, .14);
  --line-inv-2: rgba(250, 248, 244, .32);
  --err: #a3271d;

  --f-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-text: "Jost", "Futura PT", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;

  --fs-h2: clamp(2.5rem, 5.2vw, 5.9rem);
  --fs-lead: clamp(1.0625rem, 1.2vw, 1.25rem);

  --gutter: clamp(16px, 4.2vw, 64px);
  --col-gap: clamp(16px, 2vw, 28px);
  --sec-pad: clamp(110px, 13vw, 210px);
  --max: 1520px;
  --hdr-h: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .3, 1);
  --svh-gap: 0px;
}
@supports (height: 100lvh) {
  :root { --svh-gap: calc(100lvh - 100svh); }
}
@media (max-width: 760px) {
  :root { --hdr-h: 64px; }
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }
[inert] { pointer-events: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.35;
  stroke-linecap: round; stroke-linejoin: round;
}

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 300;
  padding: 10px 16px; background: var(--ink); color: var(--white);
  font: 500 13px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Сетка 12 колонок: подпись на левом поле (3 колонки), содержание — в основном поле (9) */
.grid12, .sec-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
.grid12 > .side, .sec-head > .side { grid-column: 1 / span 3; padding-top: 1.05em; }
.grid12 > .main { grid-column: 4 / -1; min-width: 0; }

/* ---------- Типографика ---------- */
.eyebrow {
  font: 500 .75rem/1.3 var(--f-text);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--mute);
}
[data-tone="dark"] .eyebrow { color: var(--mute-inv); }
.caps { font: 500 .75rem/1.2 var(--f-text); letter-spacing: .26em; text-transform: uppercase; }

/* Заголовки: тонкий Source Serif 4 с оптическим размером; курсив — тем же цветом, без подсветки */
.h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.h2 em { font-style: italic; font-weight: 250; letter-spacing: -.016em; }

.sec-head { row-gap: 30px; margin-bottom: clamp(56px, 7vw, 116px); }
.sec-head > .h2 { grid-column: 4 / -1; }
.sec-head > .sec-head__lead, .sec-head > .sec-head__tools, .sec-head > .heritage__text { grid-column: 4 / span 6; }
.sec-head__lead { font-weight: 400; font-size: var(--fs-lead); line-height: 1.65; color: var(--mute); max-width: 34rem; }
[data-tone="dark"] .sec-head__lead { color: var(--mute-inv); }

.link {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 0; background: none; border: 0;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; color: inherit; position: relative;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 32px; bottom: 0; height: 1px;
  background: currentColor; transform-origin: left; transition: transform .6s var(--ease);
}
.link:hover::after { transform: scaleX(.25); }
.link .ico { width: 18px; height: 18px; transition: transform .6s var(--ease); }
.link:hover .ico { transform: translateX(6px); }

/* ---------- Кнопки ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 30px;
  border: 1px solid currentColor; border-radius: 0;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  background: transparent; color: inherit;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn--sm { min-height: 40px; padding: 0 16px; }
.btn .ico { width: 18px; height: 18px; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: currentColor; transform: translateY(101%);
  transition: transform .65s var(--ease);
}
/* Наведение: кнопка «выворачивается» — заливка уезжает вверх, цвета меняются местами */
.btn--ink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--ink::before { background: var(--paper); }
.btn--ink:hover { color: var(--ink); }
.btn--paper { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--paper::before { background: var(--ink); }
.btn--paper:hover { color: var(--white); }
.btn--line::before { background: var(--ink); }
.btn--line:hover { color: var(--white); border-color: var(--ink); }
[data-tone="dark"] .btn--line::before { background: var(--white); }
[data-tone="dark"] .btn--line:hover { color: var(--ink); border-color: var(--white); }
.btn:hover::before { transform: none; }
.btn[disabled] { opacity: .4; pointer-events: none; }

.icon-btn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  background: none; border: 0; color: inherit;
  transition: opacity .3s;
}
.icon-btn:hover { opacity: .62; }
.icon-btn--line { border: 1px solid currentColor; width: 54px; height: 54px; }
.icon-btn[aria-pressed="true"] .ico { fill: currentColor; }
/* Счётчик корзины и избранного: цифра в инверсном цвете шапки */
.badge {
  position: absolute; top: 5px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  font: 500 11px/1 var(--f-text); letter-spacing: 0;
  background: var(--white); color: var(--ink);
}
.hdr[data-tone="light"] .badge { background: var(--ink); color: var(--white); }

.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  font: 500 .6875rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase;
  background: var(--ink); color: var(--white);
}
.tag--new { background: var(--ink); color: var(--white); }
.tag--hit { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.tag--line { background: none; color: var(--ink); border: 1px solid var(--line-2); }

/* ---------- Шапка ---------- */
.hdr {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50;
  height: var(--hdr-h);
  color: var(--white);
  transition: transform .6s var(--ease), opacity .6s var(--ease), color .4s, background-color .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.hdr[data-tone="light"] { color: var(--ink); }
.hdr.is-solid[data-tone="light"] { background: var(--hdr-bg, rgba(243, 240, 234, .9)); border-color: var(--line); }
.hdr.is-solid[data-tone="dark"] { background: var(--hdr-bg, rgba(18, 17, 15, .86)); border-color: var(--line-inv); }
.hdr.is-solid { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hdr.is-hidden { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
.hdr.is-cinema { opacity: 0; pointer-events: none; }
.hdr__in {
  height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  padding-inline: var(--gutter);
}
.hdr__nav { display: flex; align-items: center; gap: 30px; }
.hdr__link {
  font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; padding: 8px 0; position: relative;
}
.hdr__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.hdr__link:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr__burger {
  display: none; align-items: center; gap: 12px;
  background: none; border: 0; padding: 8px 0;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase;
}
.burger { display: grid; gap: 6px; width: 24px; }
.burger i { display: block; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.menu-open .burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.hdr__tools { justify-self: end; display: flex; align-items: center; gap: 4px; }
.hdr__lang { margin-right: 10px; }

.lang { display: inline-flex; align-items: center; gap: 2px; }
.lang button {
  background: none; border: 0; padding: 8px 6px;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .18em;
  opacity: .42; transition: opacity .3s;
}
.lang button + button::before { content: "/"; margin-right: 8px; opacity: .5; }
.lang button[aria-pressed="true"], .lang button:hover { opacity: 1; }

/* Логотип: повторяет фирменный знак — полоса, надпись, полоса с «Parfum since 1995» */
.logo {
  display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px;
  text-decoration: none; color: inherit;
}
.logo__bar { height: 2.5px; background: currentColor; transform-origin: left; }
.logo__word {
  font: 500 19px/1 var(--f-text); letter-spacing: .075em; text-transform: uppercase;
  padding: 2px 0 1px 1px; white-space: nowrap; text-align: center;
}
.logo__since {
  display: flex; align-items: center; gap: 6px;
  font: 500 6.5px/1 var(--f-text); letter-spacing: .32em; text-transform: uppercase; white-space: nowrap;
}
.logo__since i { flex: 1; height: 2.5px; background: currentColor; }

/* ---------- Меню ---------- */
.menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--ink);
  color: var(--white);
  padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 6vh);
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease), visibility 0s .55s;
  overflow-y: auto;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .55s var(--ease), visibility 0s; }
.menu__in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
.menu__nav { display: grid; justify-items: start; }
.menu__nav a {
  font: 250 clamp(2.4rem, 6vw, 5.2rem)/1.06 var(--f-display); letter-spacing: -.02em;
  text-decoration: none; padding: .04em 0;
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), color .3s;
}
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a:hover { font-style: italic; }
.menu__nav:hover a:not(:hover) { color: var(--mute-inv); }
/* Справка магазина: тихий столбец Jost, телефон — единственная яркая строка */
.menu__aside {
  display: grid; gap: 2px; align-content: end; justify-items: start;
  font-size: 1rem; line-height: 1.6; color: var(--mute-inv);
  opacity: 0; transition: opacity .7s var(--ease);
}
.menu.is-open .menu__aside { opacity: 1; transition-delay: .35s; }
.menu__aside .eyebrow { margin-bottom: 16px; color: var(--mute-inv); }
.menu__aside a { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--line-inv-2); transition: border-color .3s; }
.menu__aside a:hover { border-color: var(--white); }
.menu__aside .lang { margin: 26px 0 0 -6px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--video); color: var(--white); }
.js .hero { height: 700vh; }
.hero__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
}
.hero__stage { position: absolute; inset: 0; background: var(--video); }
.hero__canvas, .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__canvas { z-index: 0; }
.hero__poster { z-index: 1; object-fit: cover; object-position: 41% 50%; transition: opacity .6s; }
.hero__poster.is-hidden { opacity: 0; }
.hero__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__veil--intro {
  background: linear-gradient(90deg, rgba(13, 13, 12, .8) 0%, rgba(13, 13, 12, .44) 30%, rgba(13, 13, 12, 0) 52%);
  opacity: var(--intro-o, 1);
}
.hero__veil--spray {
  background: radial-gradient(85% 78% at 0% 27%, rgba(13, 13, 12, .68) 0%, rgba(13, 13, 12, .34) 46%, rgba(13, 13, 12, 0) 78%);
  opacity: var(--spray-o, 0);
}
.hero__annos { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.hero__intro {
  position: absolute; z-index: 3;
  left: var(--gutter); top: 50%;
  width: min(38rem, 44vw);
  opacity: var(--intro-o, 1);
  transform: translateY(calc(-44% - (1 - var(--intro-o, 1)) * 40px));
}
.hero__intro .eyebrow { color: rgba(250, 248, 244, .66); }
/* Заголовок: тонкий Source Serif на оптическом размере 60, вторая строка — курсив со сдвигом, тем же белым */
.hero__title {
  margin: .36em 0 .46em;
  font-family: var(--f-display);
  font-weight: 280;
  font-optical-sizing: auto;
  font-size: clamp(3.2rem, 7.2vw, 8.4rem);
  line-height: 1;
  letter-spacing: -.024em;
}
.hero__title .ln { display: block; overflow: hidden; padding: 0 .12em .12em; margin: 0 -.12em -.12em; }
.hero__title .ln > * { display: block; }
.hero__title em { font-style: italic; font-weight: 220; padding-left: .86em; letter-spacing: -.018em; }
.hero__lead { max-width: 23.5em; font-weight: 400; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.62; color: rgba(250, 248, 244, .78); }

.hero__cue {
  position: absolute; z-index: 3; left: 50%; bottom: calc(26px + var(--svh-gap));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .32em; text-transform: uppercase;
  color: rgba(250, 248, 244, .6);
  opacity: var(--intro-o, 1);
}
/* Подсказка «Листайте»: неподвижная тонкая линия, без бегущего блика */
.hero__cue i { width: 1px; height: 40px; background: rgba(250, 248, 244, .3); }

/* Хореография загрузки: шапка, подпись, строки заголовка, подзаголовок */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.is-ready) .hdr { opacity: 0; transform: translateY(-14px); }
  .js:not(.is-ready) .hero__intro .eyebrow,
  .js:not(.is-ready) .hero__lead,
  .js:not(.is-ready) .hero__cue span { opacity: 0; transform: translateY(14px); }
  .js:not(.is-ready) .hero__title .ln > * { transform: translateY(105%); }
  .js:not(.is-ready) .logo__bar, .js:not(.is-ready) .logo__since i { transform: scaleX(0); }
  .js .hero__intro .eyebrow, .js .hero__lead, .js .hero__cue span { transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .js .hero__intro .eyebrow { transition-delay: .35s; }
  .js .hero__title .ln > * { transition: transform 1.3s var(--ease); }
  .js .hero__title .ln:first-child > * { transition-delay: .45s; }
  .js .hero__title .ln:last-child > * { transition-delay: .6s; }
  .js .hero__lead { transition-delay: .85s; }
  .js .hero__cue span { transition-delay: 1.05s; }
  .js .logo__bar, .js .logo__since i { transition: transform 1.2s var(--ease) .2s; }
}

.hero__who {
  position: absolute; z-index: 3; left: var(--gutter); bottom: calc(11vh + var(--svh-gap));
  display: grid; gap: 12px;
  opacity: var(--who-o, 0);
  transform: translateY(calc((1 - var(--who-o, 0)) * 16px));
}
.hero__who .caps { color: rgba(250, 248, 244, .66); }
.hero__who-name {
  font: 300 clamp(1.7rem, 2.8vw, 2.9rem)/1.02 var(--f-display); letter-spacing: -.018em;
}
.hero__who-name em { font-style: italic; font-weight: 250; }

/* Фраза брызга: две строки появляются по очереди, пока туман летит в камеру */
.hero__spray {
  position: absolute; z-index: 3; left: var(--gutter); top: 18vh;
  max-width: 11em;
  font: 300 clamp(2.2rem, 4.9vw, 5.6rem)/1.04 var(--f-display); letter-spacing: -.022em;
  text-shadow: 0 2px 40px rgba(13, 13, 12, .35), 0 1px 3px rgba(13, 13, 12, .18);
  pointer-events: none;
}
.hero__spray .s1, .hero__spray .s2 { display: block; }
.hero__spray .s1 { opacity: var(--s1, 0); transform: translateY(calc((1 - var(--s1, 0)) * 34px)); filter: blur(calc((1 - var(--s1, 0)) * 8px)); }
.hero__spray .s2 { font-style: italic; font-weight: 250; letter-spacing: -.016em; padding-left: .7em; color: rgba(250, 248, 244, .85); opacity: var(--s2, 0); transform: translateY(calc((1 - var(--s2, 0)) * 34px)); filter: blur(calc((1 - var(--s2, 0)) * 8px)); }

.hero__tiers {
  position: absolute; z-index: 3; left: 50%; bottom: calc(30px + var(--svh-gap));
  transform: translateX(-50%);
  display: flex; gap: 30px; margin: 0; padding: 0; list-style: none;
  color: var(--ink);
  font: 500 .75rem/1 var(--f-text); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
  opacity: var(--tiers-o, 0);
}
/* Ярус нот: монохромные волосяные линии, активный — в полную силу */
.hero__tiers li { display: flex; align-items: center; gap: 12px; opacity: .5; transition: opacity .5s var(--ease); }
.hero__tiers li.is-on { opacity: 1; }
.hero__tiers i { width: 28px; height: 1px; background: currentColor; transform: scaleX(.45); transform-origin: left; transition: transform .6s var(--ease); }
.hero__tiers li.is-on i { transform: none; }

.anno {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 6px 2px; margin: 0;
  background: none; border: 0; color: var(--ink);
  text-align: left; white-space: nowrap;
  pointer-events: auto;
  will-change: transform, opacity;
}
.anno--r { align-items: flex-end; text-align: right; }
.anno__name { font: italic 400 var(--anno-fs, 22px)/1 var(--f-display); letter-spacing: -.008em; }
.anno__tier { font: 500 max(11px, calc(var(--anno-fs, 22px) * .45))/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; opacity: .74; }
.anno:hover .anno__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.anno.is-off { pointer-events: none; }

/* Финал сцены: приглашение в «Лабораторию» справа от кадра (или от флаконов в белой студии), без цен и корзины.
   Высоту ставит app.js (--feat-top): блок стоит по центру кадра, низ кнопки — на одной линии с полкой флаконов */
.welcome {
  position: absolute; z-index: 4;
  right: var(--gutter); top: var(--feat-top, 20vh);
  width: min(33vw, 480px);
  color: var(--ink);
  opacity: var(--feat-o, 0);
  transform: translateX(calc((1 - var(--feat-o, 0)) * 48px));
  pointer-events: none;
  visibility: hidden;
}
.welcome.is-live { pointer-events: auto; visibility: visible; }
.welcome__eyebrow { color: var(--mute); }
.welcome__title {
  margin: 22px 0 26px;
  font: 300 clamp(2.5rem, 4.5vw, 4.5rem)/1 var(--f-display); letter-spacing: -.024em;
}
.welcome__title em { display: block; font-style: italic; font-weight: 250; letter-spacing: -.016em; padding-left: .5em; }
.welcome__lead { font-weight: 400; font-size: 1.0625rem; line-height: 1.65; color: var(--mute); max-width: 27rem; }
/* одно главное действие — кнопка; каталог — тихая ссылка рядом, а не вторая рамка */
.welcome__cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.welcome__cta .btn { min-height: 54px; padding: 0 26px; }
.price { font: 300 2rem/1 var(--f-display); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.price small { font: 400 .875rem/1 var(--f-text); color: var(--mute); margin-left: 4px; letter-spacing: .04em; }

/* Этикетка на кадре: аромат сезона, ведёт в карточку */
.plate-cap {
  position: absolute; z-index: 4; left: 0; top: 0;
  display: grid; gap: 5px; justify-items: start;
  padding: 11px 16px 12px; border: 0; text-align: left;
  background: rgba(250, 248, 244, .95); color: var(--ink);
  opacity: var(--feat-o, 0);
  pointer-events: none;
  transition: background-color .4s, color .4s;
}
.plate-cap.is-live { pointer-events: auto; }
.plate-cap .caps { font-size: .6875rem; color: var(--mute); transition: color .4s; }
.plate-cap__name { font: 400 1.05rem/1 var(--f-display); }
.plate-cap__name em { font-style: italic; }
.plate-cap:hover { background: var(--ink); color: var(--white); }
.plate-cap:hover .caps { color: var(--mute-inv); }

.hero__skip {
  position: absolute; z-index: 5; right: var(--gutter); bottom: calc(24px + var(--svh-gap));
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 8px 0;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(250, 248, 244, .74);
}
.hero__skip .ico { width: 16px; height: 16px; }
.hero[data-tone="light"] .hero__skip { color: var(--ink); }
.hero__skip.is-off { opacity: 0; pointer-events: none; }
.hero__now { display: none; }
.hero__load { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(250, 248, 244, .1); transition: opacity .8s; z-index: 5; }
.hero__load i { display: block; height: 100%; width: calc(var(--load, 0) * 100%); background: rgba(250, 248, 244, .72); transition: width .4s var(--ease); }
.hero__load.is-done { opacity: 0; }

/* Заставка первого визита (app.js: intro). Чёрное поле того же тона, что кадр ролика: уходит — и флакон проступает из темноты.
   Знак повторяет логотип в шапке; его верхняя полоса — настоящая загрузка кадров */
.curtain { display: none; }
.is-intro .curtain {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: var(--video); color: rgba(250, 248, 244, .94);
  transition: opacity 1.1s var(--ease-io) .12s;
}
.curtain.is-out { opacity: 0; pointer-events: none; }
.curtain.is-fast { transition-duration: .45s; transition-delay: 0s; }
.curtain__logo {
  display: inline-flex; flex-direction: column; align-items: stretch; gap: .21em;
  font-size: clamp(34px, 4.4vw, 58px);
  opacity: 0; transform: translateY(.22em); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
.is-intro-set .curtain__logo { opacity: 1; transform: none; }
.curtain.is-out .curtain__logo { opacity: 0; transform: translateY(-.16em); transition-duration: .6s; }
.curtain__bar { height: .1em; background: rgba(250, 248, 244, .16); }
.curtain__bar i { display: block; height: 100%; background: currentColor; transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .6s var(--ease); }
.curtain__word { font: 500 1em/1 var(--f-text); letter-spacing: .075em; text-transform: uppercase; padding: .1em 0 .05em .05em; white-space: nowrap; text-align: center; }
.curtain__since { display: flex; align-items: center; gap: .32em; font: 500 .342em/1 var(--f-text); letter-spacing: .32em; text-transform: uppercase; white-space: nowrap; }
.curtain__since i { flex: 1; height: .29em; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 1.3s var(--ease) .3s; }
.curtain__since i:last-child { transform-origin: left; }
.is-intro-set .curtain__since i { transform: none; }

/* Вертикальный экран: кадр сверху, текст — в чёрном поле снизу */
.hero.is-portrait .hero__poster { height: 70%; object-position: 47% 50%; }
.hero.is-portrait .hero__veil--intro { background: linear-gradient(0deg, rgba(13, 13, 12, .9) 0%, rgba(13, 13, 12, .55) 30%, rgba(13, 13, 12, 0) 52%); }
.hero.is-portrait .hero__veil--spray { display: none; }
.hero.is-portrait .hero__intro {
  left: var(--gutter); right: var(--gutter); width: auto; top: auto; max-width: 40rem;
  bottom: calc(86px + var(--svh-gap));
  transform: translateY(calc((1 - var(--intro-o, 1)) * -30px));
}
.hero.is-portrait .hero__cue { display: none; }
.hero.is-portrait .hero__who, .hero.is-portrait .hero__spray { top: auto; right: var(--gutter); bottom: calc(76px + var(--svh-gap)); }
.hero.is-portrait .hero__tiers { left: var(--gutter); transform: none; bottom: calc(70px + var(--svh-gap)); color: var(--white); }
.hero.is-portrait .hero__skip { color: rgba(250, 248, 244, .74); }
.hero.is-portrait .hero__now {
  display: grid; gap: 10px;
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: calc(108px + var(--svh-gap));
  color: var(--white); opacity: var(--tiers-o, 0);
}
.hero.is-portrait .hero__now .caps { color: rgba(250, 248, 244, .66); }
.hero__now-notes { font: italic 300 clamp(1.4rem, 6vw, 2.2rem)/1.14 var(--f-display); letter-spacing: -.012em; text-wrap: balance; }

/* ---------- Появление при прокрутке ---------- */
.h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .14em .12em; margin: 0 -.14em -.12em; }
.h2 .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .h2[data-split] .w > span { transform: translateY(108%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
  .js .h2[data-split].is-in .w > span { transform: none; }
  .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* шторка срезает детей, а не сам блок: Chrome не считает полностью срезанный элемент видимым и не запускает появление */
  .js [data-reveal="clip"] { opacity: 1; transform: none; }
  .js [data-reveal="clip"] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--ease-io) var(--d, 0s); }
  .js [data-reveal="clip"].is-in > * { clip-path: inset(0); }
  .js .fam[data-reveal] .fam__field { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-io); transition-delay: var(--d, 0s); }
  .js .fam[data-reveal].is-in .fam__field { clip-path: inset(0); }
  .js .card[data-reveal] .card__media { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease-io); transition-delay: var(--d, 0s); }
  .js .card[data-reveal].is-in .card__media { clip-path: inset(0); }
}

/* ---------- Вступление ---------- */
/* Заявление: тонкий Source Serif спокойного размера; марки — курсивом того же цвета */
.intro { padding-block: clamp(120px, 16vw, 240px) clamp(90px, 11vw, 170px); }
.intro .main { display: grid; gap: clamp(34px, 3.2vw, 48px); justify-items: start; }
.intro__text {
  max-width: 25em;
  font: 300 clamp(1.5rem, 2.4vw, 2.6rem)/1.22 var(--f-display);
  letter-spacing: -.008em;
  text-wrap: balance;
}
.intro__text em { font-style: italic; }
.intro__text .wd { opacity: var(--o, .16); transition: opacity .25s linear; }

/* ---------- Карта домов: ночной глобус, флаги на древках, список стран ---------- */
/* Шар — гравюра в тонах чернил и камня; цвет на нём дают только флаги. Справа — страны волосяными строками */
.world { position: relative; background: var(--ink); color: var(--white); padding-block: var(--sec-pad); overflow: hidden; }
.world .sec-head { margin-bottom: clamp(36px, 4.6vw, 72px); }
.world__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.world__stage { grid-column: 1 / span 7; position: sticky; top: calc(var(--hdr-h) + 12px); display: grid; justify-items: center; gap: 14px; min-width: 0; }
.world__ball { position: relative; width: min(100%, 680px, calc(100vh - var(--hdr-h) - 70px)); aspect-ratio: 1; }
.world__globe { position: relative; z-index: 1; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.world__globe.is-hot { cursor: pointer; }
.world__globe.is-grab { cursor: grabbing; }
/* пока грузится d3 — ровный тёмный диск с волосяным контуром */
.world__ball::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  background: #1b1a17; box-shadow: 0 0 0 .75px rgba(250, 248, 244, .3); transition: opacity .8s;
}
.world__ball.is-live::before { opacity: 0; }
.world.is-flat .world__stage { display: none; }
.world.is-flat .world__panel { grid-column: 1 / -1; }
/* подсказка у указателя: страна, флаг и число домов */
.world__tip {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 10px;
  background: var(--white); color: var(--ink); white-space: nowrap;
  font: 300 1.0625rem/1 var(--f-display);
  opacity: 0; transform: translate(-50%, calc(-100% - 16px)); transition: opacity .25s;
}
.world__tip.is-on { opacity: 1; }
.world__tip .flag { width: 22px; }
.world__tip small { font: 500 .6875rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.world__hint { color: var(--mute-inv); text-align: center; }
.world__panel { grid-column: 8 / -1; min-width: 0; }
/* вкладки «Дома / Сырьё»: тот же сегмент, что в каталоге, только на чёрном */
.world__tabs { display: flex; width: 100%; margin-bottom: 26px; border-color: var(--line-inv-2); }
.world__tabs button { flex: 1; height: 44px; color: var(--mute-inv); }
.world__tabs button + button { border-left-color: var(--line-inv); }
.world__tabs button:hover { color: var(--white); }
.world__tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); }
/* ноты страны сырья: курсивом, регион капсом, ниже — короткий факт */
.wn { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wn li { display: grid; gap: 6px; }
.wn__note { justify-self: start; display: inline-flex; align-items: baseline; gap: 10px; padding: 0; border: 0; background: none; color: var(--white); text-align: left; }
.wn__note em { font: italic 300 1.375rem/1.15 var(--f-display); letter-spacing: -.008em; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color .3s; }
.wn__note:hover em { text-decoration-color: currentColor; }
.wn__note small { font: 500 .6875rem/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-inv); }
.wn p { max-width: 30rem; font-size: .9375rem; line-height: 1.55; color: var(--mute-inv); }
.world__stats { margin: 0 0 clamp(28px, 3vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-inv-2); }
.world__stats div { padding: 20px 12px 0 0; display: grid; gap: 12px; align-content: start; min-width: 0; }
.world__stats div + div { padding-left: 18px; border-left: 1px solid var(--line-inv); }
.world__stats dt { font: 200 clamp(2.2rem, 3.4vw, 3.4rem)/.9 var(--f-display); letter-spacing: -.025em; font-variant-numeric: lining-nums; white-space: nowrap; }
.world__stats dd { margin: 0; font: 500 .6875rem/1.65 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mute-inv); text-wrap: balance; }
.world__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-inv-2); }
.wc { border-bottom: 1px solid var(--line-inv); }
.wc__row {
  width: 100%; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto 5.4em 14px; align-items: center; gap: 16px;
  padding: 14px 0; background: none; border: 0; color: inherit; text-align: left;
}
.wc__row .flag { width: 27px; box-shadow: 0 0 0 1px var(--line-inv); }
.wc__name { min-width: 0; font: 300 clamp(1.2rem, 1.45vw, 1.45rem)/1.1 var(--f-display); letter-spacing: -.01em; }
.wc__n, .wc__km { font: 500 .6875rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mute-inv); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.wc__km { text-align: right; }
.wc__chev { width: 14px; height: 14px; color: var(--mute-inv); transition: transform .6s var(--ease), color .3s; }
.wc__row:hover .wc__name, .wc.is-hot .wc__name, .wc.is-open .wc__name { font-style: italic; }
.wc.is-open .wc__chev { transform: rotate(45deg); color: var(--white); }
.wc__more { display: grid; gap: 22px; padding: 2px 0 30px 43px; animation: amRise .8s var(--ease) both; }
.wc__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; color: var(--mute-inv); line-height: 1.6; }
.wc__meta span { color: var(--white); }
/* знаки домов страны: те же белые маски, что в бегущей ленте, сеткой в волосяную линию */
.wc__houses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-inv); border-left: 1px solid var(--line-inv); }
.wh {
  position: relative; display: grid; place-items: center; min-width: 0; height: 78px; padding: 0 10px 12px;
  background: none; border: 0; border-right: 1px solid var(--line-inv); border-bottom: 1px solid var(--line-inv);
  color: var(--white); transition: background-color .4s var(--ease);
}
.wh__img {
  display: block; max-width: 100%; background: currentColor; opacity: .82;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: opacity .4s;
}
.wh__word { font: 300 1rem/1 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wh__meta {
  position: absolute; left: 4px; right: 4px; bottom: 9px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 .6875rem/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-inv);
}
.wh:hover { background: rgba(250, 248, 244, .05); }
.wh:hover .wh__img { opacity: 1; }
.wc__cat { display: grid; gap: 14px; }
.wc__cat > .caps { color: var(--mute-inv); }
.wc__prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wc__prods button { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.wc__prods .thumb { margin-bottom: 8px; }
.wc__prods .sr-brand { margin: 0; color: var(--mute-inv); font-size: .6875rem; }
.wc__prods .sr-name { font-size: 1rem; }
.wc__prods button:hover .sr-name { font-style: italic; }
.wc__none { max-width: 26rem; font-size: .9375rem; line-height: 1.6; color: var(--mute-inv); }
@media (max-width: 1100px) {
  .world__stage { grid-column: 1 / span 6; }
  .world__panel { grid-column: 7 / -1; }
  .wc__more { padding-left: 0; }
  .wc__prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .world__grid { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .world__stage, .world__panel { grid-column: 1 / -1; }
  .world__stage { position: relative; top: 0; }
  .world__ball { width: min(100%, 560px); }
  .wc__prods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .world__ball { width: calc(100% + 24px); margin-inline: -12px; }
  .world__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world__stats dt { font-size: 2.4rem; }
  .world__stats div + div { padding-left: 16px; }
  .world__stats div:nth-child(3) { grid-column: 1 / -1; padding: 18px 0 0; margin-top: 18px; border-left: 0; border-top: 1px solid var(--line-inv); }
  .wc__row { grid-template-columns: 24px minmax(0, 1fr) auto 14px; gap: 12px; padding: 13px 0; }
  .wc__row .flag { width: 24px; }
  .wc__km { display: none; }
  .wc__houses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wh { height: 70px; }
  .wc__prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Семейства ---------- */
/* Цвет здесь дают только снимки ингредиентов: без цветных плашек и точек. Подписи — под фото */
/* сверху — отступ: после тёмной «Карты домов» заголовок иначе прилипает к её краю */
.families { padding-top: clamp(72px, 8vw, 128px); padding-bottom: clamp(70px, 8vw, 120px); }
.fam-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(52px, 5vw, 76px) var(--col-gap); }
.fam {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 0; border: 0; background: none; text-align: left; color: inherit;
}
.fam__field {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; max-width: 100%; margin-bottom: 12px;
  background: var(--paper-3);
}
.fam__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.015);
  transition: transform 1.8s var(--ease);
}
.fam:hover .fam__img { transform: scale(1.06); }
.fam__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.fam__name { min-width: 0; font: 300 clamp(1.45rem, 1.75vw, 1.85rem)/1.05 var(--f-display); letter-spacing: -.012em; }
.fam__count {
  flex: none; font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute); font-variant-numeric: tabular-nums;
}
.fam__notes { font-weight: 400; font-size: .9375rem; line-height: 1.5; color: var(--mute); }
.fam__go { align-self: flex-start; margin-top: 4px; }
.fam:hover .fam__go::after { transform: scaleX(.25); }
.fam:hover .fam__go .ico { transform: translateX(6px); }

/* ---------- Подборки «Для неё» и «Для него» ---------- */
.edits { padding-bottom: clamp(20px, 3vw, 40px); }
.edits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
/* Фото на всю плитку, снизу — нейтральная тень под белый текст; кнопка — общая .btn--paper */
.edit {
  position: relative; isolation: isolate; overflow: hidden; display: block;
  aspect-ratio: 5 / 4; color: var(--white); text-decoration: none; background: var(--ink-2);
}
.edit:focus-visible { outline-color: var(--ink); }
.edit__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.edit:hover .edit__img { transform: scale(1.04); }
.edit__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 12, 0) 30%, rgba(13, 13, 12, .16) 44%, rgba(13, 13, 12, .46) 66%, rgba(13, 13, 12, .74) 100%);
}
.edit__body { position: absolute; left: clamp(22px, 3vw, 48px); right: clamp(22px, 3vw, 48px); bottom: clamp(22px, 3vw, 44px); display: grid; gap: 14px; justify-items: start; }
.edit__count { color: rgba(250, 248, 244, .82); }
.edit__t { font: 300 clamp(2.5rem, 4.4vw, 4.9rem)/1 var(--f-display); letter-spacing: -.02em; }
.edit__s { max-width: 26rem; font-weight: 400; font-size: 1rem; line-height: 1.5; color: rgba(250, 248, 244, .9); }
.edit__go { margin-top: 10px; }
.edit__go .ico { transition: transform .6s var(--ease); }
.edit:hover .edit__go { color: var(--white); }
.edit:hover .edit__go::before { transform: none; }
.edit:hover .edit__go .ico { transform: translateX(5px); }

/* ---------- Аромат под погоду ---------- */
/* Слева — Ташкент сейчас: крупная температура тонким Source Serif и шкала-градусник, которую можно потянуть.
   Справа — три аромата под эту погоду. Вечером раздел темнеет, как улица за окном */
.today { position: relative; background: var(--paper-2); padding-block: var(--sec-pad); transition: background-color 1s var(--ease), color 1s var(--ease); }
.today.is-night { background: var(--ink); color: var(--white); }
.today__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.today__now { grid-column: 1 / span 5; display: grid; justify-items: start; min-width: 0; }
.today__now .eyebrow { font-variant-numeric: tabular-nums lining-nums; }
.today__deg {
  margin: clamp(26px, 3vw, 44px) 0 0 -.06em; display: flex; align-items: flex-start;
  font: 200 clamp(7.5rem, 15vw, 14.5rem)/.8 var(--f-display); letter-spacing: -.05em;
  font-variant-numeric: lining-nums proportional-nums;
}
.today__unit { margin-left: .02em; font-size: .4em; line-height: 1; letter-spacing: 0; }
.today__sky { margin-top: clamp(22px, 2.4vw, 32px); font: italic 300 clamp(1.2rem, 1.55vw, 1.5rem)/1.3 var(--f-display); color: var(--ink-3); text-wrap: balance; }
.today.is-night .today__sky { color: var(--mute-inv); }
/* градусник: волосяная шкала с делениями через 5°, бегунок — тонкая чернильная стрелка */
.therm { position: relative; width: 100%; margin-top: clamp(40px, 4.2vw, 60px); }
.therm__zone { display: inline-block; margin-bottom: 10px; color: var(--mute); transform: translateX(calc(var(--t, .6) * (100cqw - 100%))); }
.today.is-night .therm__zone { color: var(--mute-inv); }
.therm { container-type: inline-size; }
.therm__input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 34px; margin: 0; background: transparent; color: inherit; cursor: ew-resize; }
.therm__input:focus { outline: none; }
.therm__input:focus-visible { outline: 1.5px solid currentColor; outline-offset: 6px; }
.therm__input::-webkit-slider-runnable-track {
  height: 34px;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 10%) 0 50% / 100% 9px no-repeat;
  opacity: 1;
}
.therm__input::-moz-range-track { height: 1px; background: currentColor; }
.therm__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 3px; height: 34px; border: 0; border-radius: 0; background: currentColor; box-shadow: 0 0 0 5px var(--paper-2); transition: box-shadow 1s var(--ease); }
.today.is-night .therm__input::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--ink); }
.therm__input::-moz-range-thumb { width: 3px; height: 34px; border: 0; border-radius: 0; background: currentColor; }
.therm__ticks { position: relative; height: 12px; margin-top: 8px; font: 500 .6875rem/1 var(--f-text); letter-spacing: .1em; color: var(--mute); font-variant-numeric: tabular-nums lining-nums; }
.today.is-night .therm__ticks { color: var(--mute-inv); }
.therm__ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.therm__ticks span:nth-child(1) { left: 0; transform: none; }
.therm__ticks span:nth-child(2) { left: 20%; }
.therm__ticks span:nth-child(3) { left: 40%; }
.therm__ticks span:nth-child(4) { left: 60%; }
.therm__ticks span:nth-child(5) { left: 80%; }
.therm__ticks span:nth-child(6) { left: auto; right: 0; transform: none; }
.today__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(30px, 3vw, 42px); }
.today.is-night .seg { border-color: var(--line-inv-2); }
.today.is-night .seg button { color: var(--mute-inv); }
.today.is-night .seg button + button { border-left-color: var(--line-inv); }
.today.is-night .seg button:hover { color: var(--white); }
.today.is-night .seg button[aria-checked="true"] { background: var(--white); color: var(--ink); }
.today__pick { grid-column: 7 / -1; min-width: 0; display: grid; align-content: start; }
.today__lead { margin: clamp(22px, 2.4vw, 32px) 0 clamp(26px, 3vw, 40px); max-width: 32rem; font-size: var(--fs-lead); line-height: 1.65; color: var(--mute); }
.today.is-night .today__lead { color: var(--mute-inv); }
/* список «под погоду»: свои классы, независимые от результатов подбора */
@keyframes amRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid currentColor; }
.tl__item {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 22px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  animation: amRise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 100ms);
}
.tl__info { display: grid; gap: 5px; min-width: 0; }
.tl__name { justify-self: start; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: 300 1.5rem/1.1 var(--f-display); letter-spacing: -.012em; }
.tl__name:hover { font-style: italic; }
.tl__why { font-size: .9375rem; line-height: 1.45; color: var(--mute); }
.tl__side { display: grid; justify-items: end; gap: 10px; }
.today.is-night .tl__item { border-bottom-color: var(--line-inv); }
.today.is-night .sr-brand, .today.is-night .tl__why, .today.is-night .card__price small { color: var(--mute-inv); }
.today.is-night .card__add { border-color: var(--line-inv-2); color: var(--white); }
.today.is-night .card__add:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.today__src { margin-top: 22px; font-size: .8125rem; line-height: 1.5; color: var(--mute); }
.today.is-night .today__src { color: var(--mute-inv); }
.today__src:empty { display: none; }
@media (max-width: 1100px) {
  .today__now { grid-column: 1 / span 6; }
  .today__pick { grid-column: 7 / -1; }
}
@media (max-width: 860px) {
  .today__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(56px, 10vw, 80px); }
  .today__now, .today__pick { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tl__item { grid-template-columns: 76px minmax(0, 1fr); gap: 12px 16px; align-items: start; }
  .tl__thumb { grid-row: span 2; }
  .tl__name { font-size: 1.375rem; }
  .tl__side { grid-column: 2; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .today__deg { font-size: clamp(6.5rem, 34vw, 9rem); }
  .today__ctl .seg { flex: 1 1 auto; }
  .today__ctl .seg button { flex: 1; }
}

/* ---------- Каталог ---------- */
/* Фильтры: всё прямоугольное, в тонкую линию; выбранное — заливка чернилами, наведение — чернильная рамка.
   Первая строка — «для кого» и порядок, вторая — семейства */
.shop { padding-block: var(--sec-pad); }
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  padding-block: 22px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
.seg { display: inline-flex; border: 1px solid var(--line-2); }
.seg button {
  height: 38px; padding: 0 18px; border: 0; background: none;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
  transition: background-color .4s, color .4s;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--white); }
.chips { order: 3; display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; min-width: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 0; background: none; color: var(--ink);
  font: 500 .75rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .35s, color .35s, border-color .35s;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip--active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip .ico { width: 14px; height: 14px; }
.chip--active { padding-right: 11px; }
.sort { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.sort select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
  padding: 8px 20px 8px 0; color: var(--ink);
  font: 400 .9375rem/1.2 var(--f-text); letter-spacing: 0; text-transform: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2312110f' stroke-width='1.1'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
  transition: border-color .3s;
}
.sort select:hover { border-bottom-color: var(--ink); }
.shop__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; margin-bottom: 18px; }
.shop__count { font: 500 .75rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); font-variant-numeric: tabular-nums; }
.shop__view { margin-left: auto; }
.shop__view button { height: 34px; padding: 0 14px; }

/* Карта ароматов: флаконы-вырезки на поле камня, волосяной крест осей; цвет — только у фотографий */
.smap { margin-bottom: 8px; }
.smap__field {
  position: relative; aspect-ratio: 16 / 8.2; max-height: 76vh; width: 100%;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat;
}
.smap__ax { position: absolute; font: 500 .6875rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.smap__ax--x0 { left: 0; bottom: 14px; }
.smap__ax--x0::before { content: "← "; }
.smap__ax--x1 { right: 0; bottom: 14px; }
.smap__ax--x1::after { content: " →"; }
.smap__ax--y1 { left: 50%; top: 14px; transform: translateX(-50%); padding: 0 10px; background: var(--paper); }
.smap__ax--y0 { left: 50%; bottom: 14px; transform: translateX(-50%); padding: 0 10px; background: var(--paper); }
.smap__item {
  position: absolute; z-index: 1; width: 10.5%; padding: 0; border: 0; background: none; color: inherit; text-align: center;
  transform: translateX(-50%); display: grid; justify-items: center; gap: 2px;
  transition: opacity .6s var(--ease), filter .6s var(--ease);
  animation: smapIn .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes smapIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.smap__ph.thumb { width: 62%; background: none; overflow: visible; }
.smap__ph .photo { transition: transform .8s var(--ease); transform-origin: 50% 90%; }
.smap__name { margin-top: 4px; font: 300 1rem/1.1 var(--f-display); letter-spacing: -.005em; }
.smap__brand { font: 500 .6875rem/1.3 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.smap__item:hover { z-index: 2; }
.smap__item:hover .smap__ph .photo { transform: scale(1.08) translateY(-2%); }
.smap__item:hover .smap__name { font-style: italic; }
.smap__item.is-off { opacity: .16; filter: grayscale(1); }
.smap__note { max-width: 40rem; margin-top: 18px; font-size: .875rem; line-height: 1.6; color: var(--mute); }
@media (max-width: 760px) {
  .shop__view { margin-left: 0; width: 100%; }
  .shop__view button { flex: 1; }
  .smap__field { aspect-ratio: 4 / 6; max-height: none; }
  .smap__item { width: 24%; }
  .smap__ph.thumb { width: 56%; }
  .smap__name { font-size: .8125rem; line-height: 1.1; }
  .smap__brand { display: none; }
  .smap__ax { font-size: .6875rem; letter-spacing: .16em; }
}
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 72px var(--col-gap); }
.grid__note {
  grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line-2);
  font: italic 300 1.375rem/1.25 var(--f-display); color: var(--mute);
}
/* скрытые фильтром карточки и пустое состояние: свой display иначе перебил бы атрибут hidden */
.card[hidden], .grid__note[hidden], .shop__empty[hidden] { display: none; }
.shop__empty { padding: 60px 0; display: grid; justify-items: start; gap: 20px; font: 300 1.5rem/1.3 var(--f-display); }
.shop__more { display: flex; justify-content: center; margin-top: 80px; }
.shop__more[hidden] { display: none; }

.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* Подложка: один и тот же светлый «камень» под каждым флаконом (фото без фона), ровный свет без цветных пятен */
.thumb, .card__media {
  position: relative; display: block; width: 100%; max-width: 100%;
  aspect-ratio: 4 / 5; overflow: hidden; padding: 0; border: 0; isolation: isolate;
  background: var(--paper-2);
}
.thumb > .bottle, .card__media > .bottle, .thumb > .photo, .card__media > .photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.thumb > .photo, .card__media > .photo { object-fit: contain; z-index: 1; }
/* тень под флаконом: все фото выровнены по одной линии дна */
.card__media.has-photo::after, .thumb:has(> .photo)::after {
  content: ""; position: absolute; left: 26%; right: 26%; top: 89%; height: 5%; z-index: 0;
  background: radial-gradient(closest-side, rgba(18, 17, 15, .2), rgba(18, 17, 15, 0));
}
.card__media > .photo { transition: transform 1.2s var(--ease), opacity .7s var(--ease); transform-origin: 50% 90%; }
.card__media:hover > .photo { transform: scale(1.03); }
/* второе фото (ингредиенты, атмосфера) проявляется при наведении */
.card__media > .photo--alt { object-fit: cover; opacity: 0; z-index: 2; transform: scale(1.04); }
@media (hover: hover) {
  .card__media.has-alt:hover > .photo:not(.photo--alt) { opacity: 0; }
  .card__media.has-alt:hover > .photo--alt { opacity: 1; transform: none; }
}
.card__media > .bottle { z-index: 1; }
.card__tags { position: absolute; left: 14px; top: 14px; z-index: 4; display: flex; gap: 6px; }
.card__fav { position: absolute !important; right: 6px; top: 6px; z-index: 5; color: var(--ink); }
.card__body { padding-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.card__body > * { min-width: 0; }
.card__brand { font: 500 .75rem/1.3 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.card__name {
  justify-self: start; padding: 0; border: 0; background: none; text-align: left; color: inherit;
  font: 300 clamp(1.3rem, 1.6vw, 1.55rem)/1.1 var(--f-display); letter-spacing: -.01em;
  text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: .2em;
  transition: text-decoration-color .35s;
}
.card__name:hover { text-decoration-color: currentColor; }
.card__notes { font-weight: 400; font-size: .875rem; line-height: 1.45; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line);
}
.card__price { font-weight: 400; font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.card__price small { color: var(--mute); font-size: .8125rem; }
.card__meta { margin-left: auto; font: 500 .6875rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.card__add {
  width: 40px; height: 40px; flex: none; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 0; background: none; color: var(--ink);
  transition: background-color .35s, color .35s, border-color .35s;
}
.card__add:hover, .card__add.is-done { background: var(--ink); color: var(--white); border-color: var(--ink); }
.card__add .ico { width: 18px; height: 18px; }

/* Флакон-рисунок (если у аромата ещё нет фото): крышка приподнимается, из распылителя — облачко */
.bottle { overflow: visible; }
.bottle .b-cap, .bottle .b-mist { transition: transform .9s var(--ease), opacity .9s var(--ease); transform-box: fill-box; transform-origin: 50% 100%; }
.bottle .b-mist { opacity: 0; transform: scale(.4); transform-origin: 0 50%; }
.card__media:hover .bottle .b-cap, .gal__slide--svg:hover .bottle .b-cap, .bottle.is-open .b-cap { transform: translateY(-16px) rotate(-7deg); }
.card__media:hover .bottle .b-mist, .bottle.is-open .b-mist { opacity: 1; transform: scale(1); }

/* ---------- Дома: две бегущие ленты логотипов ---------- */
/* Ровный тёплый чёрный, белые знаки домов чуть приглушены; ячейки разделены волосяными линиями */
.houses {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: var(--white); padding-block: var(--sec-pad);
}
.houses .sec-head { margin-bottom: clamp(48px, 5.6vw, 88px); }
.belts { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 3.8vw, 56px); }
.belt { min-width: 0; }
.belt__label {
  width: 100%; max-width: var(--max); margin: 0 auto 16px; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 14px; color: var(--white);
}
.belt__label i { width: 28px; height: 1px; background: var(--line-inv-2); }
.belt__label span { color: var(--mute-inv); font-variant-numeric: tabular-nums lining-nums; }
.belt__view {
  overflow: hidden;
  border-block: 1px solid var(--line-inv);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.belt__track { display: flex; width: max-content; animation: belt var(--dur, 64s) linear infinite; }
.belt:hover .belt__track, .belt:focus-within .belt__track { animation-play-state: paused; }
.belt__set { display: flex; align-items: center; flex: none; }
@keyframes belt { to { transform: translateX(-50%); } }
.mark {
  position: relative; display: inline-grid; place-items: center; flex: none;
  height: clamp(104px, 10vw, 136px); padding: 0 clamp(26px, 3vw, 46px);
  background: none; border: 0; border-right: 1px solid var(--line-inv);
  color: var(--white);
  transition: background-color .5s var(--ease);
}
.mark__img {
  display: block; width: 120px; height: 40px;
  background: currentColor; opacity: .8;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.mark__word { font: 300 1.5rem/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; opacity: .8; transition: opacity .5s var(--ease); }
.mark__meta {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; white-space: nowrap;
  font: 500 .6875rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute-inv);
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease);
}
.mark:hover, .mark:focus-visible { background: rgba(250, 248, 244, .04); }
.mark:focus-visible { outline-offset: -8px; }
.mark:hover .mark__img, .mark:focus-visible .mark__img, .mark:hover .mark__word, .mark:focus-visible .mark__word { opacity: 1; }
.mark:hover .mark__img, .mark:focus-visible .mark__img { transform: translateY(-6px); }
.mark:hover .mark__meta, .mark:focus-visible .mark__meta { opacity: 1; transform: none; }
.houses__note { margin-top: clamp(44px, 5vw, 68px); max-width: 34rem; font-size: 1rem; line-height: 1.65; color: var(--mute-inv); }

/* ---------- Подбор ---------- */
/* Слева — опыт консультантов крупной цифрой и то, по чему подбираем; справа — короткий тест в тихой панели */
.finder { background: var(--paper); padding-block: var(--sec-pad); }
.finder__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap); align-items: start;
}
.finder__intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--hdr-h) + 40px); display: grid; justify-items: start; min-width: 0; }
.finder__years { display: grid; justify-items: start; justify-self: stretch; margin-top: clamp(26px, 2.8vw, 44px); }
.finder__num {
  margin-left: -.05em;
  font: 200 clamp(6rem, 13vw, 12rem)/.8 var(--f-display);
  letter-spacing: -.04em; font-variant-numeric: lining-nums proportional-nums;
}
.finder__plus { position: relative; top: .1em; margin-left: .03em; font-size: .46em; vertical-align: top; letter-spacing: 0; }
.finder__cap {
  justify-self: stretch; margin-top: clamp(18px, 2vw, 26px); padding-top: 16px; border-top: 1px solid var(--line-2);
  font: 500 .75rem/1.5 var(--f-text); letter-spacing: .26em; text-transform: uppercase;
}
.finder__title { margin-top: clamp(40px, 4.2vw, 64px); font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.02; }
.finder__lead { margin-top: clamp(22px, 2.2vw, 30px); max-width: 31rem; font-size: var(--fs-lead); line-height: 1.66; color: var(--ink-3); }
/* критерии подбора: подписи через волосяные линии; линия перед первым словом каждой строки срезана */
.finder__crit {
  display: flex; flex-wrap: wrap; row-gap: 12px;
  margin: clamp(28px, 3vw, 40px) 0 0 -19px; padding: 0; list-style: none;
  clip-path: inset(0 0 0 19px);
  font: 500 .75rem/1.2 var(--f-text); letter-spacing: .24em; text-transform: uppercase;
}
.finder__crit li { padding: 2px 18px; border-left: 1px solid var(--line-2); }
/* тихая панель теста на всю высоту левой колонки: верх — по надзаголовку, низ — по строке критериев */
.finder__quiz {
  grid-column: 7 / -1; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column;
  padding: clamp(24px, 3.2vw, 48px);
  background: var(--white); border: 1px solid var(--line);
}
.finder__start { max-width: 32rem; margin-bottom: clamp(30px, 3.2vw, 46px); font-size: 1rem; line-height: 1.6; color: var(--mute); text-wrap: pretty; }
.quiz { flex: 1; display: flex; flex-direction: column; }
.quiz__fade { flex: 1; display: flex; flex-direction: column; animation: quizIn .7s var(--ease) both; }
@keyframes quizIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.quiz__top { display: flex; align-items: center; gap: 20px; }
.quiz__step {
  flex: none; font: 500 .75rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums; color: var(--mute);
}
/* прогресс: чёрная волосяная линия поверх серой */
.quiz__bar { flex: 1; position: relative; height: 1px; background: var(--line); overflow: hidden; }
.quiz__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .9s var(--ease); }
.quiz__q { margin: clamp(28px, 3vw, 44px) 0 clamp(22px, 2.4vw, 32px); font: 300 clamp(1.75rem, 2.5vw, 2.5rem)/1.06 var(--f-display); letter-spacing: -.018em; text-wrap: balance; }
.quiz__q:focus { outline: none; }
.quiz__q em { font-style: italic; }
.quiz__opts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.quiz__opts li { animation: optIn .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
@keyframes optIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.opt {
  width: 100%; min-height: 62px; display: flex; align-items: center; gap: 16px;
  padding: 16px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left;
  font: 400 clamp(1.0625rem, 1.3vw, 1.25rem)/1.35 var(--f-text); color: var(--ink-3);
  transition: padding .5s var(--ease), color .3s;
}
.opt__t { flex: 1; }
.opt .ico { width: 18px; height: 18px; opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .5s var(--ease); }
.opt:hover, .opt:focus-visible, .opt[aria-pressed="true"] { padding-left: 14px; color: var(--ink); }
.opt:hover .ico, .opt:focus-visible .ico, .opt[aria-pressed="true"] .ico { opacity: 1; transform: none; }
.opt[aria-pressed="true"] { font-weight: 500; }
.opt:focus-visible { outline-offset: 2px; }
.quiz__nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: auto; padding-top: 24px; min-height: 64px; }
.quiz__back .ico { transform: scaleX(-1); }
.quiz__back:hover .ico { transform: scaleX(-1) translateX(6px); }
.quiz__back::after { left: 30px; right: 0; }
.quiz__ask { margin-left: auto; color: var(--mute); transition: color .3s; }
.quiz__ask:hover { color: var(--ink); }
.res { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.res__item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); animation: optIn .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 100ms); }
.res__info { display: grid; gap: 5px; min-width: 0; }
.res__label { margin-bottom: 5px; font: 500 .6875rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.res__name { justify-self: start; padding: 0; border: 0; background: none; text-align: left; font: 300 1.5rem/1.1 var(--f-display); letter-spacing: -.012em; }
.res__name:hover { font-style: italic; }
.res__why { font-size: .9375rem; line-height: 1.45; color: var(--mute); }
.res__side { display: grid; justify-items: end; gap: 10px; }
.quiz__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- О магазине: настоящие фото ---------- */
.heritage { position: relative; background: var(--ink); color: var(--white); padding-block: var(--sec-pad); }
.heritage__text { display: grid; gap: 18px; font-weight: 400; font-size: var(--fs-lead); line-height: 1.68; color: var(--mute-inv); max-width: 34rem; }
/* Фото магазина: цвет даёт только съёмка; подпись — под кадром, без затемнения */
.shots {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: clamp(270px, 32vw, 500px) clamp(200px, 21vw, 330px);
  gap: clamp(40px, 4vw, 56px) var(--col-gap); margin: 0 0 clamp(80px, 9vw, 140px);
}
.shot { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.shot__ph { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--ink-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.shot:hover img { transform: scale(1.03); }
.shot figcaption {
  font: 500 .75rem/1.4 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute-inv);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* четыре кадра лесенкой: сверху широкий слева, снизу — справа (световой флакон Kilian из галереи убран 2026-10-15) */
.shot--1 { grid-column: 1 / span 7; grid-row: 1; }
.shot--2 { grid-column: 8 / span 5; grid-row: 1; }
.shot--3 { grid-column: 1 / span 5; grid-row: 2; }
.shot--4 { grid-column: 6 / span 7; grid-row: 2; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-inv-2); }
.fact { padding: 36px 24px 0 0; display: grid; gap: 18px; align-content: start; }
.fact + .fact { padding-left: 28px; border-left: 1px solid var(--line-inv); }
.fact dt {
  display: flex; align-items: flex-start; gap: .1em;
  font: 200 clamp(2.9rem, 5vw, 5.1rem)/.95 var(--f-display); letter-spacing: -.02em;
  font-variant-numeric: lining-nums; color: var(--white);
}
.fact dt .ico { width: .26em; height: .26em; margin-top: .1em; fill: currentColor; stroke: none; }
.fact dd { margin: 0; font: 500 .75rem/1.7 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute-inv); text-wrap: balance; }

/* ---------- Сервис ---------- */
.ritual { padding-block: var(--sec-pad); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
/* Шаг: римская цифра и пиктограмма в одну строку, ниже — название и текст */
.step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: start; column-gap: 16px; padding: 28px 28px 8px 0; }
.step + .step { padding-left: 28px; border-left: 1px solid var(--line); }
.step__n { font: italic 300 1.75rem/1 var(--f-display); color: var(--mute); }
.step__badge { display: block; color: var(--ink); }
.step__ico { display: block; width: 52px; height: 52px; margin: -6px -4px 0 0; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.step__ico * { vector-effect: non-scaling-stroke; }
.step__t { grid-column: 1 / -1; margin-top: clamp(40px, 4.2vw, 64px); font: 300 clamp(1.45rem, 1.8vw, 1.75rem)/1.1 var(--f-display); letter-spacing: -.01em; }
.step p { grid-column: 1 / -1; margin-top: 14px; font-weight: 400; font-size: 1rem; line-height: 1.65; color: var(--mute); }

/* ---------- Магазин ---------- */
/* Тон чуть темнее основного фона: отделяет «Магазин» от «Сервиса» без линий и подложек */
.visit { padding-block: var(--sec-pad); background: var(--paper-2); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 6vw; align-items: center; }
.visit__map { position: relative; margin: 0; aspect-ratio: 5 / 4; max-width: 100%; background: var(--paper-3); overflow: hidden; }
.visit__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.visit__map:hover .visit__photo { transform: scale(1.03); }
/* Подпись на фото: чёрная прямоугольная плашка в углу кадра, как музейная этикетка */
.visit__pin {
  position: absolute; left: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 20px 15px 16px;
  background: var(--ink); color: var(--white);
  font: 500 .75rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
}
.visit__pin .ico { width: 14px; height: 14px; }
.visit__info { display: grid; gap: 24px; justify-items: start; }
.visit__list { margin: 14px 0 10px; width: 100%; border-top: 1px solid var(--ink); }
.visit__list > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.visit__list dt { font: 500 .75rem/1.9 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.visit__list dd { margin: 0; font-size: 1rem; }
.visit__list dd a { text-decoration: none; }
.visit__list small { display: block; margin-top: 4px; font-size: .875rem; font-weight: 400; color: var(--mute); }
/* «Сейчас открыто» по ташкентскому времени: подпись капсом с волосяной чертой, без цветных индикаторов */
.visit__list small.open-now, .open-now {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font: 500 .6875rem/1.4 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mute);
}
.open-now::before { content: ""; flex: none; width: 16px; height: 1px; background: currentColor; }
.open-now.is-open { color: var(--ink); }
.menu .open-now { color: var(--mute-inv); }
.menu .open-now.is-open { color: var(--white); }
.visit__phone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.copy {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; background: none; border: 0;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
  border-bottom: 1px solid var(--line-2); transition: color .3s, border-color .3s;
}
.copy .ico { width: 14px; height: 14px; }
.copy:hover { color: var(--ink); border-color: var(--ink); }
.visit__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Telegram ---------- */
.club { background: var(--ink); color: var(--white); padding-block: var(--sec-pad) clamp(96px, 11vw, 170px); }
.club__in { display: grid; justify-items: start; gap: 30px; }
.club .h2 { max-width: 12em; }
.club__lead { max-width: 30rem; font-weight: 400; font-size: var(--fs-lead); line-height: 1.65; color: var(--mute-inv); }

/* ---------- Подвал ---------- */
/* Подвал того же чёрного, что и блок Telegram: их разделяет волосяная линия по сетке */
.ftr { background: var(--ink); color: var(--paper); padding-block: 0 28px; }
.ftr__cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  padding-block: clamp(64px, 7vw, 100px) clamp(80px, 8vw, 120px); border-top: 1px solid var(--line-inv);
}
.ftr__col h3 { font: 500 .75rem/1 var(--f-text); letter-spacing: .26em; text-transform: uppercase; color: var(--mute-inv); margin-bottom: 26px; }
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ftr__col li { text-wrap: balance; }
.ftr__col a, .ftr__col span { display: inline-flex; align-items: center; gap: 12px; font-weight: 400; font-size: 1rem; line-height: 1.45; text-decoration: none; color: var(--paper); }
.ftr__col a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ftr__col .ico { width: 16px; height: 16px; }
.ftr__mark { display: grid; gap: clamp(6px, .9vw, 14px); padding-bottom: clamp(36px, 4vw, 56px); color: var(--white); }
.ftr__bar, .ftr__since i { height: clamp(2px, .42vw, 6px); background: currentColor; }
.ftr__word {
  display: block; text-align: center; white-space: nowrap;
  font: 500 clamp(2.4rem, 12.2vw, 12.4rem)/.84 var(--f-text); letter-spacing: .03em; text-transform: uppercase;
  margin-top: .02em;
}
.ftr__since { display: flex; align-items: center; gap: 2.2vw; font: 500 clamp(.6875rem, 1vw, 1rem)/1 var(--f-text); letter-spacing: .5em; text-transform: uppercase; white-space: nowrap; }
.ftr__since i { flex: 1; }
.ftr__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-top: 22px; border-top: 1px solid var(--line-inv); font-size: .875rem; color: var(--mute-inv); }
.ftr__demo { font-weight: 400; }
.ftr__bottom .lang { margin-inline: -6px; }

/* ---------- Оверлеи ---------- */
.scrim { position: absolute; inset: 0; background: rgba(13, 13, 12, .48); opacity: 0; transition: opacity .5s var(--ease); }
.is-open > .scrim { opacity: 1; }

/* Поиск: панель сверху, строка ввода — крупный тонкий Source Serif на волосяной линии */
.search { position: fixed; inset: 0; z-index: 80; visibility: hidden; transition: visibility 0s .6s; }
.search.is-open { visibility: visible; transition: visibility 0s; }
.search__panel {
  position: relative; background: var(--paper);
  padding-top: calc(env(safe-area-inset-top, 0px) + 28px); padding-bottom: 60px;
  max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-102%); transition: transform .7s var(--ease);
}
.search.is-open .search__panel { transform: none; }
.search__bar { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--ink); }
.search__bar > .ico { width: 22px; height: 22px; stroke-width: 1.2; }
.search__bar input {
  flex: 1; min-width: 0; border: 0; border-radius: 0; background: none; outline: none; padding: 20px 0 18px;
  font: 300 clamp(1.75rem, 3vw, 2.75rem)/1.1 var(--f-display); letter-spacing: -.015em; color: var(--ink);
}
.search__bar input::placeholder { color: var(--mute); opacity: 1; }
.search__bar input::-webkit-search-cancel-button { display: none; }
.search__bar .icon-btn { margin-right: -10px; }
.search__hints { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; padding: 24px 0 4px; }
.search__hints .caps { color: var(--mute); margin-right: 4px; }
.sr-hint {
  padding: 3px 0; background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
  font: 400 1rem/1.3 var(--f-text); color: var(--ink); transition: border-color .3s;
}
.sr-hint:hover { border-color: var(--ink); }
.search__results { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 64px; padding-top: 40px; }
.search__results:empty { display: none; }
.sr-group h3 { font: 500 .75rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); margin-bottom: 16px; }
.sr-group .sr-sub { margin-top: 34px; }
.sr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sr-row { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; }
.sr-row:hover .sr-name { font-style: italic; }
.sr-thumb { width: 56px; }
.sr-brand { display: block; margin-bottom: 5px; font: 500 .75rem/1.3 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.sr-name { display: block; font: 400 1.25rem/1.15 var(--f-display); letter-spacing: -.008em; }
.sr-price { font-size: .9375rem; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.sr-price small { color: var(--mute); font-size: .8125rem; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-chip {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 0; background: none;
  font: 400 .9375rem/1 var(--f-text); color: var(--ink); white-space: nowrap;
  transition: background-color .3s, color .3s, border-color .3s;
}
.sr-chip:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.sr-empty { grid-column: 1 / -1; max-width: 36rem; font: 300 clamp(1.3rem, 1.8vw, 1.6rem)/1.4 var(--f-display); letter-spacing: -.005em; text-wrap: pretty; }

.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; transition: visibility 0s .7s; }
.drawer.is-open { visibility: visible; transition: visibility 0s; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(480px, 100%);
  display: flex; flex-direction: column;
  background: var(--paper);
  transform: translateX(102%); transition: transform .8s var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer--wide .drawer__panel { width: min(1180px, 100%); }
/* Корзина и избранное: вкладки с линией-указателем на нижней волосяной линии шапки */
.drawer__head { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; min-height: 72px; padding: 0 18px 0 32px; border-bottom: 1px solid var(--line); }
.drawer__head > .icon-btn { align-self: center; }
.tabs { display: flex; gap: 30px; }
.tabs button {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  padding: 0; background: none; border: 0;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute); transition: color .3s;
}
.tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.tabs button[aria-selected="true"], .tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"]::after { transform: none; }
.tabs sup { position: relative; top: -.5em; font: 500 .6875rem/1 var(--f-text); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 32px 32px; }
.drawer__foot { padding: 24px 32px calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: grid; gap: 16px; }
.drawer__foot:empty { display: none; }
.drawer__foot .btn { width: 100%; }
.drawer__foot .link { justify-self: start; }
.drawer__x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; z-index: 5; width: 44px; height: 44px; background: rgba(243, 240, 234, .92); }

.line { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.line__info { display: grid; gap: 6px; align-content: start; min-width: 0; }
.line__brand { font: 500 .75rem/1.3 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.line__name { justify-self: start; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: 400 1.3rem/1.1 var(--f-display); letter-spacing: -.008em; }
.line__name:hover { font-style: italic; }
.line__meta { font-size: .875rem; line-height: 1.45; color: var(--mute); }
.line__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); }
.qty button { width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; transition: background-color .3s, color .3s; }
.qty button:hover { background: var(--ink); color: var(--white); }
.qty button .ico { width: 14px; height: 14px; }
.qty output { min-width: 28px; text-align: center; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.line__price { font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.line__price small { color: var(--mute); font-size: .8125rem; }
.line__remove {
  justify-self: start; margin-top: 10px; padding: 4px 0; background: none; border: 0; border-bottom: 1px solid var(--line-2);
  font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
  transition: color .3s, border-color .3s;
}
.line__remove:hover { color: var(--ink); border-color: var(--ink); }
.line__row .btn--line { border-color: var(--line-2); }
.line__row .btn--line:hover { border-color: var(--ink); }
.bag-empty { padding: 72px 0 24px; display: grid; gap: 16px; justify-items: start; }
.bag-empty p:first-child { font: 300 2.1rem/1.05 var(--f-display); letter-spacing: -.018em; text-wrap: balance; }
.bag-empty p + p { max-width: 24rem; color: var(--mute); line-height: 1.6; }
.bag-empty .btn { margin-top: 14px; }
.sum { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sum span { font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.sum strong { font: 300 2rem/1 var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.sum strong small { margin-left: 2px; font: 400 .875rem/1 var(--f-text); letter-spacing: .02em; color: var(--mute); }
.foot-note { font-size: .875rem; line-height: 1.55; color: var(--mute); }

/* Оформление заказа: поля — Jost на волосяной линии, ошибка — единственный цвет */
.form { display: grid; gap: 28px; padding-top: 34px; }
.form h3 { margin-bottom: 2px; font: 300 2.1rem/1.05 var(--f-display); letter-spacing: -.018em; text-wrap: balance; }
.field { display: grid; gap: 2px; }
.field > label, .field legend, .field__lbl { padding: 0; font: 500 .75rem/1.3 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.field legend { margin-bottom: 12px; }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent;
  padding: 10px 0 11px; font: 400 1rem/1.45 var(--f-text); color: var(--ink); outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--mute); opacity: .8; }
.field textarea { resize: vertical; min-height: 68px; }
.field input:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.field[data-error] input, .field[data-error] textarea { border-color: var(--err); box-shadow: 0 1px 0 var(--err); }
.field__err { margin-top: 6px; font-size: .875rem; line-height: 1.4; color: var(--err); }
.field__err:empty { display: none; }
.field fieldset { border: 0; margin: 0; padding: 0; display: grid; min-width: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.radios label {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-2); font-size: .9375rem; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s;
}
.radios label:hover { border-color: var(--ink); }
.radios input { position: absolute; opacity: 0; pointer-events: none; }
.radios label:has(input:checked) { background: var(--ink); color: var(--white); border-color: var(--ink); }
.radios label:has(input:focus-visible) { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.order-text {
  width: 100%; min-height: 230px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 0;
  background: var(--white); color: var(--ink); font: 400 .9375rem/1.65 var(--f-text); resize: vertical;
}
.order-text:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.done-title { padding-top: 4px; font: 300 2.1rem/1.05 var(--f-display); letter-spacing: -.018em; text-wrap: balance; }
.done-text { max-width: 30rem; color: var(--mute); line-height: 1.6; }

/* Карточка аромата: галерея слева, описание справа */
.pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); height: 100%; }
/* Галерея: флакон на ровном тёплом сером, как в студийной съёмке; цвет даёт только фотография */
.pdp__media { position: relative; overflow: hidden; background: var(--paper-2); }
.gal { position: absolute; inset: 0; }
.gal__track {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__track:focus-visible { outline: 1.5px solid var(--ink); outline-offset: -6px; }
.gal__slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; overflow: hidden; container-type: size; }
.gal__frame {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: min(80cqw, 62cqh); aspect-ratio: 4 / 5; transform: translate(-50%, -52%);
}
.gal__frame > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
/* контактная тень на линии дна: у всех фото флакон стоит на 89% высоты кадра */
.gal__slide--shot .gal__frame::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 87%; height: 4.5%;
  background: radial-gradient(closest-side, rgba(18, 17, 15, .2), rgba(18, 17, 15, 0));
}
.gal__slide .bottle { position: absolute; left: 50%; bottom: 3%; width: min(92%, 640px); height: 92%; transform: translateX(-50%); }
.gal__slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* фото семейства: только функциональное затемнение снизу, чтобы читалась подпись */
.gal__slide--mood::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(0deg, rgba(13, 13, 12, .5), rgba(13, 13, 12, 0));
}
.gal__slide figcaption {
  position: absolute; left: 32px; bottom: 30px; z-index: 2;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--mute);
}
.gal__slide--mood figcaption { color: var(--white); }
.gal__nav {
  position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px;
  display: grid; place-items: center; border: 1px solid var(--line-2); background: none; color: var(--ink);
  transition: background-color .3s, color .3s, border-color .3s;
}
.gal__nav .ico { width: 18px; height: 18px; }
.gal__nav:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.gal__nav--prev { left: 24px; }
.gal__nav--prev .ico { transform: scaleX(-1); }
.gal__nav--next { right: 24px; }
.gal__bars { position: absolute; right: 32px; bottom: 23px; z-index: 3; display: flex; gap: 6px; }
.gal__bars button { position: relative; width: 26px; height: 22px; padding: 0; border: 0; background: none; transition: width .5s var(--ease); }
.gal__bars button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(18, 17, 15, .28); transition: background-color .3s;
}
.gal__bars button:hover::before { background: rgba(18, 17, 15, .6); }
.gal__bars button[aria-current="true"] { width: 46px; }
.gal__bars button[aria-current="true"]::before { background: var(--ink); }
/* на фотографии семейства стрелки лежат на светлой плашке, указатель кадров — светлый над затемнением */
.gal.is-photo .gal__nav { background: rgba(243, 240, 234, .92); border-color: transparent; }
.gal.is-photo .gal__nav:hover { background: var(--ink); color: var(--white); }
.gal.is-photo .gal__bars button::before { background: rgba(250, 248, 244, .45); }
.gal.is-photo .gal__bars button[aria-current="true"]::before { background: var(--white); }

/* Описание: воздух, волосяные линии, одна гарнитура для имени и цены */
.pdp__info {
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 88px clamp(28px, 4.6vw, 72px) 72px;
}
.pdp__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.pdp__brand { font: 500 .75rem/1.3 var(--f-text); letter-spacing: .26em; text-transform: uppercase; }
.pdp__name {
  margin-top: 14px;
  font: 300 clamp(2.5rem, 3.6vw, 3.75rem)/1 var(--f-display); letter-spacing: -.024em; text-wrap: balance;
}
.pdp__meta { margin-top: 16px; font-size: .9375rem; line-height: 1.5; color: var(--mute); }
.pdp__desc { margin-top: 40px; max-width: 34rem; font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }

/* Родина аромата: глобус, флаг, путь до Ташкента */
.origin {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 2.8vw, 40px); align-items: center;
  margin-top: 48px; padding: 30px 0 34px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.origin__globe { position: relative; isolation: isolate; width: clamp(150px, 15vw, 214px); aspect-ratio: 1; }
/* пока грузится d3, на месте шара — ровный диск того же камня */
.origin__globe::after { content: ""; position: absolute; inset: 7%; z-index: -1; border-radius: 50%; background: var(--paper-2); box-shadow: 0 0 0 .75px var(--line-2); transition: opacity .6s; }
.origin.is-live .origin__globe::after { opacity: 0; }
.origin__globe canvas { position: relative; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.origin__globe canvas:active { cursor: grabbing; }
.origin__hint {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap;
  font: 500 .6875rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mute);
  opacity: 0; transition: opacity .4s;
}
.origin:hover .origin__hint { opacity: 1; }
.origin.is-flat { grid-template-columns: minmax(0, 1fr); }
.origin.is-flat .origin__globe { display: none; }
.origin__eyebrow { color: var(--mute); }
.origin__country {
  display: flex; align-items: center; gap: 14px; margin: 14px 0 10px;
  font: 300 clamp(1.75rem, 2.2vw, 2.15rem)/1.05 var(--f-display); letter-spacing: -.018em;
}
/* флаг — настоящий, поэтому цветной; маленький, прямоугольный, с волосяной рамкой */
.flag { width: 27px; height: auto; aspect-ratio: 3 / 2; flex: none; box-shadow: 0 0 0 1px var(--line); }
.origin__city { font-size: 1rem; line-height: 1.55; color: var(--mute); }
.origin__km {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 10px;
  font: 500 .75rem/1.2 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.origin__km .ico { width: 15px; height: 15px; }

/* Паспорт аромата: музейная этикетка — подписи капсом, значения тонким Source Serif, шкалы — чернильные штрихи */
.pp { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--ink); display: grid; gap: 30px; }
.pp__title { color: var(--mute); }
.pp__facts { margin: -8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pp__facts > div { display: grid; gap: 10px; align-content: start; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.pp__facts > div:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--line); }
.pp__facts dt { font: 500 .6875rem/1.3 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.pp__facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 1rem; line-height: 1.35; }
.pp__num { font: 300 1.9rem/1 var(--f-display) !important; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.pp__nose { font: 300 1.2rem/1.2 var(--f-display) !important; letter-spacing: -.005em; }
.meter { display: inline-flex; gap: 3px; }
.meter i { display: block; width: 15px; height: 3px; background: var(--line-2); }
.meter i.on { background: var(--ink); }
.pp__sub { margin-bottom: 14px; color: var(--mute); }
/* аккорды: подпись и линия, длина — сила аккорда */
.acc { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.acc li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: 14px; font-size: .9375rem; line-height: 1.3; }
.acc li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc i { position: relative; display: block; height: 3px; }
.acc i::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px; background: var(--line); }
.acc i::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc((.3 + .7 * var(--v, 1)) * 100%);
  background: var(--ink); transform-origin: left; animation: accIn 1.1s var(--ease) both; animation-delay: calc(.25s + var(--i, 0) * 70ms);
}
@keyframes accIn { from { transform: scaleX(0); } }
/* когда носить: шесть тонких столбиков — четыре сезона и время дня */
.when { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 10px; }
.when li { display: grid; gap: 10px; justify-items: center; min-width: 0; }
.when li i { position: relative; display: block; width: 100%; max-width: 34px; height: 54px; border-bottom: 1px solid var(--ink); }
.when li i::after {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: calc(var(--v, 0) * 100%);
  background: var(--ink); transform-origin: bottom; animation: whenIn 1s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * 60ms);
}
@keyframes whenIn { from { transform: scaleY(0); } }
.when li span { font: 500 .6875rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.when .when__day { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line); }
.pp__fact { display: grid; gap: 10px; font: italic 300 1.1875rem/1.45 var(--f-display); letter-spacing: -.004em; text-wrap: pretty; }
.pp__fact .caps { font-style: normal; color: var(--mute); }
.pp__src { margin-top: -12px; font-size: .8125rem; line-height: 1.5; color: var(--mute); }

/* Как раскрывается на коже: шкала времени над пирамидой; ярусы светлеют и гаснут по часам */
.dry { display: grid; gap: 12px; padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.dry__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.dry__t { color: var(--mute); }
.dry__play { color: var(--ink); }
.dry__play::after { right: 0; }
.dry__now { min-height: 2.9em; font: italic 300 1.1875rem/1.4 var(--f-display); color: var(--ink-3); text-wrap: pretty; }
.dry.is-on .dry__now { color: var(--ink); }
.dry__input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 0; background: transparent; color: var(--ink); cursor: ew-resize; }
.dry__input:focus { outline: none; }
.dry__input:focus-visible { outline: 1.5px solid currentColor; outline-offset: 6px; }
.dry__input::-webkit-slider-runnable-track {
  height: 30px;
  background: linear-gradient(currentColor, currentColor) 0 50% / calc(var(--p, 0) * 100%) 3px no-repeat, linear-gradient(var(--line-2), var(--line-2)) 0 50% / 100% 1px no-repeat;
}
.dry__input::-moz-range-track { height: 1px; background: var(--line-2); }
.dry__input::-moz-range-progress { height: 3px; background: currentColor; }
.dry__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 3px; height: 30px; border: 0; border-radius: 0; background: currentColor; box-shadow: 0 0 0 4px var(--paper); }
.dry__input::-moz-range-thumb { width: 3px; height: 30px; border: 0; border-radius: 0; background: currentColor; }
.dry__ticks { position: relative; height: 12px; font: 500 .6875rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-variant-numeric: tabular-nums lining-nums; }
.dry__ticks span { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.dry__ticks span:first-child { transform: none; }
.dry__ticks span:last-child { transform: translateX(-100%); }
.dry.is-on ~ .tier { opacity: calc(.2 + .8 * var(--k, 1)); transition: opacity .35s linear; }

/* Откуда ноты: страны сырья строками с флагом; выбранная — курсивом, шар поворачивается к ней */
.geo { margin-top: 30px; display: grid; gap: 14px; }
.geo__title { color: var(--mute); }
.geo__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.geo__row {
  width: 100%; display: grid; grid-template-columns: 24px minmax(0, 8.5rem) minmax(0, 1fr); align-items: baseline; gap: 14px;
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink-3); text-align: left;
  transition: padding .5s var(--ease), color .3s;
}
.geo__row .flag { width: 24px; align-self: center; }
.geo__c { font: 300 1.125rem/1.2 var(--f-display); color: var(--ink); }
.geo__n { font-size: .9375rem; line-height: 1.5; }
.geo__n em { font: italic 400 1rem/1.3 var(--f-display); color: var(--ink); }
.geo__n small { font: 500 .6875rem/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-left: 4px; }
.geo__sep { margin: 0 8px; color: var(--mute); }
.geo__row:hover .geo__c, .geo__row[aria-pressed="true"] .geo__c { font-style: italic; }
.geo__row[aria-pressed="true"] { padding-left: 10px; color: var(--ink); }
.geo__fact { padding-left: 16px; border-left: 1px solid var(--ink); font: italic 300 1.0625rem/1.5 var(--f-display); text-wrap: pretty; }
.geo__lab { display: grid; gap: 10px; margin-top: 6px; }
.geo__lab .caps { color: var(--mute); }
.geo__lab ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.geo__lab li { font-size: .875rem; line-height: 1.55; color: var(--mute); }
.geo__lab em { font: italic 400 1rem/1.3 var(--f-display); color: var(--ink); }
.sim__why { margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--mute); }

/* Цена, объём, покупка — сразу под именем */
.pdp__buy { display: grid; gap: 22px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.pdp__price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.pdp__buy .price {
  font: 300 clamp(2rem, 2.5vw, 2.4rem)/1 var(--f-display); letter-spacing: -.012em;
  font-variant-numeric: tabular-nums lining-nums;
}
.pdp__ml { font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.vols { display: flex; flex-wrap: wrap; gap: 6px; }
.vol {
  min-width: 78px; height: 42px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 0; background: none; color: var(--ink);
  font: 400 .9375rem/1 var(--f-text); font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s, border-color .3s;
}
.vol:hover { border-color: var(--ink); }
.vol[aria-checked="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pdp__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.pdp__actions .btn--line { grid-column: 1 / -1; border-color: var(--line-2); }
.pdp__actions .btn--line:hover { border-color: var(--ink); }
.pdp__actions .icon-btn--line { width: 54px; height: 54px; border-color: var(--line-2); transition: background-color .3s, color .3s, border-color .3s; }
.pdp__actions .icon-btn--line:hover { opacity: 1; border-color: var(--ink); }
.pdp__actions .icon-btn--line[aria-pressed="true"] { border-color: var(--ink); }
/* Запрос цены у аромата без цены: форма и ответ на всю ширину */
.pdp__actions .ask { grid-column: 1 / -1; display: grid; gap: 18px; }
.ask__lead, .ask__done { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--mute); }
.ask__done { color: var(--ink); }
.ask__done b { font-weight: 500; }
.pdp__actions .ask .link { justify-self: center; }

/* Пирамида нот: волосяные линии, прямоугольные ноты-ссылки */
.pyr2 { display: grid; margin-top: 48px; border-top: 1px solid var(--ink); }
.tier { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.tier__head { display: grid; gap: 8px; align-content: start; padding-top: 5px; }
.tier__name { font: italic 300 1.5rem/1 var(--f-display); letter-spacing: -.01em; }
.tier__time { font: 500 .75rem/1.4 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.tier__notes { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.note-chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 0; background: none; color: var(--ink);
  font: 400 .9375rem/1 var(--f-text); white-space: nowrap;
  transition: background-color .3s, color .3s, border-color .3s;
}
.note-chip:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pdp__hint { margin-top: 14px; }

.pdp__similar { margin-top: 64px; display: grid; gap: 18px; }
.pdp__similar h3 { font: 500 .75rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.sim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sim button { display: grid; gap: 5px; align-content: start; padding: 0; border: 0; background: none; color: inherit; text-align: left; min-width: 0; }
.sim .thumb { margin-bottom: 10px; }
.sim .sr-brand { margin-bottom: 0; }
.sim .sr-name { font-size: 1.05rem; }
.sim button:hover .sr-name { font-style: italic; }

/* Уведомление: чернильная плашка с волосяной рамкой, действие — подчёркнутая подпись */
.toast {
  position: fixed; z-index: 120; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  width: max-content; min-width: min(340px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  padding: 17px 22px 17px 24px; background: var(--ink); color: var(--white);
  border: 1px solid var(--line-inv); font-size: .9375rem; line-height: 1.45;
  transform: translate(-50%, calc(100% + 48px)); transition: transform .6s var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); }
.toast button {
  flex: none; padding: 5px 0; background: none; border: 0; border-bottom: 1px solid var(--line-inv-2); color: var(--white);
  font: 500 .75rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .3s;
}
.toast button:hover { border-color: var(--white); }
.toast button:focus-visible { outline-color: var(--white); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Адаптив ---------- */
@media (max-width: 1280px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .hdr__link { display: none; }
  .hdr__burger { display: inline-flex; }
  .fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finder__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(64px, 9vw, 96px); }
  .finder__intro, .finder__quiz { grid-column: 1 / -1; }
  .finder__intro { position: static; max-width: 40rem; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(3) { padding-left: 0; border-left: 0; }
  .step:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 26px; }
  .visit__grid { grid-template-columns: minmax(0, 1fr); }
  .welcome { width: min(36vw, 440px); }
  .welcome__title { font-size: clamp(2.1rem, 4vw, 3.3rem); }
  .pdp { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100%; }
  .drawer--wide .drawer__panel { overflow-y: auto; overscroll-behavior: contain; }
  .pdp__media { width: 100%; height: min(100vw, 64vh); }
  .pdp__info { overflow: visible; padding-top: 44px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n + 3) { margin-top: 26px; border-top: 1px solid var(--line-inv); }
}
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 14px; }
  .grid12 > .side, .sec-head > .side, .grid12 > .main, .sec-head > .h2,
  .sec-head > .sec-head__lead, .sec-head > .sec-head__tools, .sec-head > .heritage__text { grid-column: 1 / -1; }
  .grid12 > .side, .sec-head > .side { padding-top: 0; }
  .grid12 { row-gap: 26px; }
  .sec-head { row-gap: 22px; }
  .search__results { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 32px; }
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .menu__in { grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; }
  .menu__aside { padding-top: 28px; border-top: 1px solid var(--line-inv); }
  .edits__grid { grid-template-columns: minmax(0, 1fr); }
  .shots {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    grid-template-rows: none;
  }
  .shots::-webkit-scrollbar { display: none; }
  .shot { flex: 0 0 78%; gap: 12px; scroll-snap-align: start; }
  .shot__ph { flex: none; height: 56vw; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .js .hero { height: 620vh; }
  .hdr__lang { display: none; }
  .hdr__burger-label { display: none; }
  .logo__word { font-size: 15px; }
  .logo__since { font-size: 5.5px; gap: 5px; }
  .logo__bar, .logo__since i { height: 2px; }
  .hdr__tools { gap: 0; }
  .icon-btn { width: 38px; height: 38px; }

  .hero__title { font-size: clamp(3rem, 15vw, 4.6rem); margin: .32em 0 .36em; }
  .hero__lead { font-size: 1rem; }
  .hero__spray { font-size: clamp(2rem, 9.6vw, 3rem); }
  .hero__tiers { gap: 16px; font-size: .6875rem; letter-spacing: .2em; }
  .hero__tiers i { width: 14px; }
  .anno__tier { display: none; }
  .anno__name { font-size: var(--anno-fs, 17px); }
  .welcome { left: var(--gutter); right: var(--gutter); width: auto; top: var(--feat-top, 50%); transform: translateY(calc((1 - var(--feat-o, 0)) * 28px)); }
  .welcome__eyebrow { display: none; }
  .welcome__title { margin: 0 0 12px; font-size: clamp(2rem, 9.4vw, 2.7rem); }
  .welcome__title em { padding-left: .3em; }
  .welcome__lead { font-size: .9375rem; line-height: 1.5; }
  .welcome__cta { margin-top: 16px; gap: 10px 22px; }
  .welcome__cta .btn { min-height: 46px; padding: 0 18px; }
  .plate-cap { padding: 8px 11px 9px; }
  .plate-cap__name { font-size: .9375rem; }
  .price { font-size: 1.6rem; }
  .hero__skip { bottom: calc(22px + var(--svh-gap)); }

  .fam-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .fam-grid::-webkit-scrollbar { display: none; }
  .fam { scroll-snap-align: start; }
  .edit { aspect-ratio: 4 / 5; }
  .edit__t { font-size: clamp(2.3rem, 11vw, 3.1rem); }
  .edit__s { font-size: 1rem; }
  .edit__go { min-height: 48px; padding: 0 22px; }
  .intro__text { text-wrap: pretty; }
  .filters { gap: 14px; padding-block: 18px; }
  .seg { width: 100%; }
  .seg button { flex: 1; padding: 0 6px; }
  .chips { order: 0; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .chips::-webkit-scrollbar { display: none; }
  .sort { margin-left: 0; }
  .shop__bar { flex-wrap: wrap; min-height: 56px; }
  .card__body { padding-top: 14px; gap: 6px; }
  .card__name { font-size: 1.15rem; }
  /* марка занимает место двух строк и прижата к низу: названия в ряду стоят на одной линии */
  .card__brand { display: flex; align-items: flex-end; min-height: 2.6em; font-size: .6875rem; letter-spacing: .2em; }
  .card__notes { font-size: .8125rem; }
  .card__price { font-size: .875rem; }
  .card__meta { display: none; }
  .card__foot { justify-content: space-between; margin-top: 8px; padding-top: 12px; }
  .card__add { width: 36px; height: 36px; }
  .card__tags { left: 10px; top: 10px; }
  .tag { height: 20px; padding: 0 7px; font-size: .6875rem; }
  .mark { height: 92px; padding: 0 22px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step, .step + .step { padding: 26px 0 8px; border-left: 0; }
  .step + .step { border-top: 1px solid var(--line); margin-top: 18px; }
  .step:nth-child(n + 3) { margin-top: 18px; }
  .step__t { margin-top: 26px; }
  .step__ico { width: 44px; height: 44px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact, .fact + .fact { padding: 26px 14px 30px 0; border-left: 0; }
  .fact:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--line-inv); }
  .fact:nth-child(n + 3) { margin-top: 0; border-top: 1px solid var(--line-inv); }
  .fact dt { font-size: 2.75rem; }
  .visit__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .visit__cta { width: 100%; }
  .visit__cta .btn { flex: 1 1 auto; }
  .finder__num { font-size: clamp(6rem, 30vw, 8.5rem); }
  .finder__crit { row-gap: 14px; }
  .finder__quiz { margin-inline: calc(var(--gutter) * -1); padding: 34px var(--gutter) 22px; border-inline: 0; }
  .finder__start { font-size: 1rem; margin-bottom: 30px; }
  .quiz__q { margin: 26px 0 22px; }
  .opt { min-height: 58px; padding-block: 15px; }
  .quiz__nav { padding-top: 16px; min-height: 56px; }
  .res__item { grid-template-columns: 76px minmax(0, 1fr); gap: 12px 16px; align-items: start; }
  .res__thumb { grid-row: span 2; }
  .res__name { font-size: 1.375rem; }
  .res__side { grid-column: 2; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .quiz__actions .btn { flex: 1 1 auto; }
  .ftr__cols { padding-block: 56px 72px; }
  .ftr__bottom { flex-direction: column; align-items: flex-start; }
  .search__panel { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: 44px; max-height: 92vh; max-height: 92dvh; }
  .search__bar { gap: 12px; }
  .search__bar > .ico { width: 20px; height: 20px; }
  .search__bar input { padding: 16px 0 14px; }
  .search__hints { gap: 10px 20px; padding-top: 20px; }
  .search__hints .caps { flex: 1 1 100%; }
  .sr-row { gap: 16px; }
  .sr-name { font-size: 1.15rem; }
  .drawer__head { min-height: 64px; padding-left: 20px; }
  .tabs { gap: 24px; }
  .drawer__body { padding-inline: 20px; }
  .drawer__foot { padding-inline: 20px; }
  .line { grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
  .pdp__media { height: min(118vw, 66vh); }
  .pdp__info { padding: 36px 20px 60px; }
  .pdp__tags { margin-bottom: 20px; }
  .pdp__name { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .pdp__buy { margin-top: 28px; padding-top: 24px; gap: 18px; }
  .pdp__buy .price { font-size: 1.9rem; }
  .pdp__desc { margin-top: 32px; font-size: 1rem; }
  .pyr2 { margin-top: 40px; }
  .tier { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 0; }
  .tier__head { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 14px; padding-top: 0; }
  .gal__nav { display: none; }
  .gal__bars { right: 20px; bottom: 15px; }
  .gal__slide figcaption { left: 20px; bottom: 22px; }
  .origin { grid-template-columns: 136px minmax(0, 1fr); gap: 18px; margin-top: 40px; padding: 24px 0 26px; }
  .origin__globe { width: 136px; }
  .pp__facts > div:nth-child(2n) { padding-left: 14px; }
  .pp__num { font-size: 1.6rem !important; }
  .pp__nose { font-size: 1.05rem !important; }
  .acc li { grid-template-columns: 8rem minmax(0, 1fr); gap: 10px; }
  .when { gap: 0 6px; }
  .when .when__day { margin-left: 4px; padding-left: 6px; }
  .geo__row { grid-template-columns: 22px minmax(0, 1fr); row-gap: 4px; }
  .geo__row .geo__n { grid-column: 2; }
  .origin__country { font-size: 1.55rem; gap: 10px; margin: 10px 0 8px; }
  .origin__city { font-size: .9375rem; }
  .origin__km { margin-top: 14px; }
  .flag { width: 24px; }
  .pdp__similar { margin-top: 52px; }
  .sim { gap: 10px; }
  .sim .sr-name { font-size: 1rem; }
  .radios { display: grid; }
  .toast { left: 16px; right: 16px; width: auto; min-width: 0; max-width: none; transform: translateY(calc(100% + 48px)); }
  .toast.is-on { transform: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .welcome__lead { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .hero { height: auto; }
  .hero__sticky { position: relative; }
  .belt__track { animation: none !important; }
  .belt__view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .belt__set--copy { display: none; }
}