/* NO ONE WAY — прототип интернет-магазина v1
   Токены скопированы из САЙТ/UI KIT/NO_ONE_WAY_UI_KIT_v1/tokens.css без изменений.
   Новые значения вводятся только с префиксом --p- и только для нужд прототипа. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Manrope:wght@400;500&display=swap");

:root {
  --now-color-ivory: #f4f0e8;
  --now-color-ivory-deep: #e6ded2;
  --now-color-graphite: #191817;
  --now-color-muted-light: #767069;
  --now-color-black: #080707;
  --now-color-black-soft: #151212;
  --now-color-muted-dark: #837c75;
  --now-color-touch-outline: #92251f;
  --now-color-touch-active: #c9564d;

  --now-font-display: "Cormorant Garamond", Georgia, serif;
  --now-font-ui: Manrope, Arial, sans-serif;

  --now-type-display-xl-size: clamp(3.25rem, 6.6vw, 6rem);
  --now-type-display-xl-leading: 0.82;
  --now-type-display-xl-tracking: -0.05em;
  --now-type-display-lg-size: clamp(2.75rem, 5vw, 4.5rem);
  --now-type-title-size: clamp(2rem, 3.4vw, 2.875rem);
  --now-type-body-lg-size: 1.125rem;
  --now-type-body-md-size: 0.9375rem;
  --now-type-body-sm-size: 0.8125rem;
  --now-type-label-size: 0.6875rem;
  --now-type-label-tracking: 0.14em;
  --now-type-nav-size: 0.625rem;
  --now-type-nav-tracking: 0.17em;
  --now-type-micro-size: 0.5625rem;
  --now-type-micro-tracking: 0.15em;

  --now-space-2: 0.5rem;
  --now-space-3: 0.75rem;
  --now-space-4: 1rem;
  --now-space-6: 1.5rem;
  --now-space-8: 2rem;
  --now-space-12: 3rem;
  --now-space-16: 4rem;

  /* Сетка. Четыре ступени:
     S  до 599   поля 16, каталог 2, подборки 2, миры 1
     M  600–899  поля 20, каталог 2, подборки 2, миры 2,
                 шапка без вкладок, панель миров снизу, фильтры в шторке
     L  900–1279 поля 42, каталог 3, подборки 3, миры 3, сетка контента 12 колонок
     XL 1280+    поля 42, каталог 3, подборки 4, миры 5, контент до 1440
     Других границ в проекте нет: всё между ступенями тянется резиновой сеткой. */
  --now-layout-max: 90rem;
  --now-layout-margin-desktop: 2.625rem;
  --now-layout-margin-mobile: 1.25rem;
  --now-layout-gutter-desktop: 1.5rem;
  --now-header-height: 5.125rem;

  --now-line-hairline: 1px;
  --now-tab-indicator-width: 2rem;

  --now-duration-instant: 70ms;
  --now-duration-hover: 260ms;
  --now-duration-type: 360ms;
  --now-duration-impact: 240ms;
  --now-duration-frame: 880ms;
  --now-duration-surface: 1250ms;
  --now-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --now-ease-surface: cubic-bezier(.72, 0, .18, 1);

  /* LIGHT semantic mode */
  --now-bg-canvas: var(--now-color-ivory);
  --now-bg-surface: var(--now-color-ivory-deep);
  --now-text-primary: var(--now-color-graphite);
  --now-text-secondary: var(--now-color-muted-light);
  --now-border-default: color-mix(in srgb, var(--now-color-graphite) 22%, transparent);
  --now-action-fill: var(--now-color-graphite);
  --now-action-on-fill: var(--now-color-ivory);
  --now-focus-ring: var(--now-color-graphite);

  /* прототип */
  --p-section-gap: 7.5rem;
  --p-photo-tone: #cfc7bb;
}

[data-theme="touch"] {
  --now-bg-canvas: var(--now-color-black);
  --now-bg-surface: var(--now-color-black-soft);
  --now-text-primary: var(--now-color-ivory);
  --now-text-secondary: var(--now-color-muted-dark);
  --now-border-default: color-mix(in srgb, var(--now-color-ivory) 20%, transparent);
  --now-action-fill: var(--now-color-ivory);
  --now-action-on-fill: var(--now-color-black);
  --now-focus-ring: var(--now-color-ivory);
  --p-photo-tone: #1d1a19;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --now-duration-instant: 1ms;
    --now-duration-hover: 1ms;
    --now-duration-type: 1ms;
    --now-duration-impact: 1ms;
    --now-duration-frame: 1ms;
    --now-duration-surface: 1ms;
  }
}

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--now-bg-canvas);
  color: var(--now-text-primary);
  font-family: var(--now-font-ui);
  font-size: var(--now-type-body-md-size);
  line-height: 1.6;
  transition: background-color var(--now-duration-hover) var(--now-ease-standard),
              color var(--now-duration-hover) var(--now-ease-standard);
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }

:focus-visible { outline: 2px solid var(--now-focus-ring); outline-offset: 3px; }

.wrap {
  max-width: var(--now-layout-max);
  margin-inline: auto;
  padding-inline: var(--now-layout-margin-desktop);
}

.label {
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
  font-weight: 500;
}

.micro {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
}

.display-xl, .display-lg, .title { font-variant-numeric: lining-nums; }

.display-xl {
  font-family: var(--now-font-display);
  font-weight: 400;
  font-size: var(--now-type-display-xl-size);
  line-height: var(--now-type-display-xl-leading);
  letter-spacing: var(--now-type-display-xl-tracking);
}

.display-lg {
  font-family: var(--now-font-display);
  font-weight: 400;
  font-size: var(--now-type-display-lg-size);
  line-height: 0.88;
  letter-spacing: -0.045em;
}

.title {
  font-family: var(--now-font-display);
  font-weight: 400;
  font-size: var(--now-type-title-size);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.muted { color: var(--now-text-secondary); }

/* ---------- text link ---------- */

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--now-duration-hover) var(--now-ease-standard),
              letter-spacing var(--now-duration-hover) var(--now-ease-standard);
}
.tlink:hover { border-bottom-color: currentColor; letter-spacing: 0.17em; }
.tlink .arrow { transition: transform var(--now-duration-hover) var(--now-ease-standard); }
.tlink:hover .arrow { transform: translateX(4px); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 var(--now-space-8);
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
  transition: opacity var(--now-duration-hover) var(--now-ease-standard),
              background-color var(--now-duration-hover) var(--now-ease-standard),
              color var(--now-duration-hover) var(--now-ease-standard);
}
.btn--primary { background: var(--now-action-fill); color: var(--now-action-on-fill); }
.btn--primary:hover { opacity: 0.85; }
.btn--secondary { border: 1px solid var(--now-border-default); }
.btn--secondary:hover { border-color: var(--now-text-primary); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn--block { width: 100%; }

/* ---------- header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--now-header-height);
  background: var(--now-bg-canvas);
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  transition: background-color var(--now-duration-hover) var(--now-ease-standard),
              border-color var(--now-duration-hover) var(--now-ease-standard);
}

.header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--now-space-6);
}

/* Знак — часть состояния, а не постоянная деталь шапки: в LIGHT это
   тонкий гротеск, в TOUCH — контрастная антиква с красной линией.
   Обе картинки лежат в одной ячейке сетки, поэтому смена состояния
   ничего не двигает: меняется только непрозрачность. */
.wordmark {
  display: grid;
  width: 9.5rem;
  line-height: 0;
}
.wordmark__img {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: auto;
  transition: opacity var(--now-motion-fast, 240ms) var(--now-ease-out, ease);
}
.wordmark__img--touch { opacity: 0; }
[data-theme="touch"] .wordmark__img--light { opacity: 0; }
[data-theme="touch"] .wordmark__img--touch { opacity: 1; }

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

.header__utils {
  display: flex;
  justify-content: flex-end;
  gap: var(--now-space-6);
}

.util {
  font-size: var(--now-type-nav-size);
  letter-spacing: var(--now-type-nav-tracking);
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.util:hover { border-bottom-color: currentColor; }

/* ---------- tab bar (FINAL v11) ---------- */

/* Правило заливки: прямоугольник — это превью ДРУГОГО состояния сайта,
   а не универсальный hover. Поэтому он появляется только на кнопке,
   которая уводит из текущего состояния:
   LIGHT → hover TOUCH  = чёрный прямоугольник + красная рамка;
   TOUCH → hover MOVE / HOME / DAILY = светлый прямоугольник без рамки.
   Обычная категория в LIGHT превью не показывает: переходить некуда,
   сайт уже в светлом состоянии. Её hover — только тонкая линия. */

.tabs { display: flex; gap: 36px; }

.tab {
  position: relative;
  font-size: var(--now-type-nav-size);
  letter-spacing: var(--now-type-nav-tracking);
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 0 14px;
  color: var(--now-text-primary);
  isolation: isolate;
  transition: color var(--now-duration-hover) var(--now-ease-standard);
}

/* геометрия прямоугольника: надпись + 14 px по горизонтали и 6 px по вертикали.
   Заливка лежит ниже рамки, иначе чёрное поле закрывает красную линию. */
.tab__fill {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: calc(100% + 28px);
  height: calc(100% - 12px);
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  transition: transform var(--now-duration-hover) var(--now-ease-standard),
              opacity var(--now-duration-hover) var(--now-ease-standard);
}

/* --- LIGHT: превью TOUCH --- */

body:not([data-theme="touch"]) .tab--touch .tab__fill { background: var(--now-color-black); }

body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):hover .tab__fill,
body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):focus-visible .tab__fill {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):hover,
body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):focus-visible {
  color: var(--now-color-ivory);
}

/* --- TOUCH: превью LIGHT у обычных категорий --- */

body[data-theme="touch"] .tab:not(.tab--touch) .tab__fill { background: var(--now-color-ivory); }

body[data-theme="touch"] .tab:not(.tab--touch):not([aria-pressed="true"]):hover .tab__fill,
body[data-theme="touch"] .tab:not(.tab--touch):not([aria-pressed="true"]):focus-visible .tab__fill {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

body[data-theme="touch"] .tab:not(.tab--touch):not([aria-pressed="true"]):hover,
body[data-theme="touch"] .tab:not(.tab--touch):not([aria-pressed="true"]):focus-visible {
  color: var(--now-color-graphite);
}

/* --- hover без смены состояния: только тонкая линия --- */

.tab__hint {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: var(--now-tab-indicator-width);
  height: 1px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background: color-mix(in srgb, var(--now-text-primary) 45%, transparent);
  transition: transform var(--now-duration-hover) var(--now-ease-standard);
}

body:not([data-theme="touch"]) .tab:not(.tab--touch):not([aria-pressed="true"]):hover .tab__hint,
body:not([data-theme="touch"]) .tab:not(.tab--touch):not([aria-pressed="true"]):focus-visible .tab__hint,
body[data-theme="touch"] .tab--touch:not([aria-pressed="true"]):hover .tab__hint,
body[data-theme="touch"] .tab--touch:not([aria-pressed="true"]):focus-visible .tab__hint {
  transform: translateX(-50%) scaleX(1);
}

/* --- красная рамка: только TOUCH и только на светлом фоне --- */

.tab--touch .tab__frame {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: calc(100% + 28px);
  height: calc(100% - 12px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tab--touch .tab__frame span {
  position: absolute;
  background: var(--now-color-touch-outline);
  transform: scale(0);
  transition: transform 220ms var(--now-ease-standard);
}
.tab--touch .tab__frame span:nth-child(1) { top: 0; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; }
.tab--touch .tab__frame span:nth-child(2) { top: 0; right: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: top; transition-delay: 210ms; }
.tab--touch .tab__frame span:nth-child(3) { bottom: 0; right: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: right; transition-delay: 420ms; }
.tab--touch .tab__frame span:nth-child(4) { bottom: 0; left: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: bottom; transition-delay: 630ms; }

body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):hover .tab__frame span:nth-child(1),
body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):focus-visible .tab__frame span:nth-child(1),
body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):hover .tab__frame span:nth-child(3),
body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):focus-visible .tab__frame span:nth-child(3) {
  transform: scaleX(1);
}

body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):hover .tab__frame span:nth-child(2),
body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):focus-visible .tab__frame span:nth-child(2),
body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):hover .tab__frame span:nth-child(4),
body:not([data-theme="touch"]) .tab--touch:not([aria-pressed="true"]):focus-visible .tab__frame span:nth-child(4) {
  transform: scaleY(1);
}

/* --- активный индикатор 32 × 2 --- */

.tab__line {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: var(--now-tab-indicator-width);
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  background: var(--now-text-primary);
  transition: transform var(--now-duration-type) var(--now-ease-standard);
}
.tab[aria-pressed="true"] .tab__line { transform: translateX(-50%) scaleX(1); }

/* красный сигнал принадлежит только TOUCH */
body[data-theme="touch"] .tab--touch[aria-pressed="true"] { color: var(--now-color-touch-active); }
body[data-theme="touch"] .tab--touch[aria-pressed="true"] .tab__line { background: var(--now-color-touch-active); }

.tab--impact { animation: impact var(--now-duration-impact) var(--now-ease-standard); }
@keyframes impact {
  0% { transform: scale(1); }
  40% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* ---------- surface transition LIGHT ↔ TOUCH ---------- */

.surface {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  clip-path: circle(0px at 50% 0%);
  display: none;
}
.surface--active { display: block; }
.surface--run {
  clip-path: circle(var(--p-surface-r, 150vmax) at var(--p-surface-x, 50%) var(--p-surface-y, 0%));
  transition: clip-path var(--now-duration-surface) var(--now-ease-surface);
}
.surface__bg { position: absolute; inset: 0; }
.surface__photo {
  position: absolute;
  top: var(--now-header-height);
  right: 0;
  bottom: 0;
  width: 38%;
}
.surface__photo img { width: 100%; height: 100%; object-fit: cover; }
.surface--to-touch .surface__bg { background: var(--now-color-black); }
.surface--to-touch .surface__photo img { object-fit: contain; }
.surface--to-light .surface__bg { background: var(--now-color-ivory); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: min(calc(100vh - var(--now-header-height)), 900px);
  display: grid;
  align-items: center;
}
.hero__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--now-layout-gutter-desktop);
  width: 100%;
  padding-block: var(--now-space-16);
}
.hero__text { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--now-space-8); }
.hero__sub { max-width: 20rem; font-size: var(--now-type-body-lg-size); line-height: 1.55; color: var(--now-text-secondary); }
.hero__marker { position: absolute; left: var(--now-layout-margin-desktop); bottom: var(--now-space-8); }

.hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 100%;
  overflow: hidden;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }

.line-in > span { display: block; overflow: hidden; }
.line-in > span > i {
  display: block;
  font-style: normal;
  transform: translateY(0.14em);
  opacity: 0;
  animation: lineIn var(--now-duration-type) var(--now-ease-standard) forwards;
}
.line-in > span:nth-child(1) > i { animation-delay: 60ms; }
.line-in > span:nth-child(2) > i { animation-delay: 150ms; }
@keyframes lineIn { to { transform: translateY(0); opacity: 1; } }

/* ---------- секции ---------- */

.section { padding-block: var(--p-section-gap); }
.section--tight { padding-block: var(--now-space-16); }
.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--now-space-6);
  margin-bottom: var(--now-space-12);
}

/* маркер запуска */
.dropbar {
  border-block: var(--now-line-hairline) solid var(--now-border-default);
  background: var(--now-bg-surface);
}
.dropbar__inner {
  min-height: 180px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: var(--now-layout-gutter-desktop);
}
.dropbar__mark { grid-column: 1 / span 3; }
.dropbar__text { grid-column: 4 / span 6; }
.dropbar__link { grid-column: 11 / span 2; justify-self: end; }

/* четыре мира */
.worlds { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--now-layout-gutter-desktop); }
.world { display: flex; flex-direction: column; gap: var(--now-space-4); }
.world > a { display: flex; flex-direction: column; gap: var(--now-space-3); }
.world__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--p-photo-tone); }
.world__name, .world__desc { display: block; }
.world__media img,
.world__media .ph { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transition: transform var(--now-duration-type) var(--now-ease-standard); }
.world:hover .world__media img,
.world:hover .world__media .ph { transform: scale(calc(var(--zoom, 1) * 1.02)); }
.world__name { margin-top: var(--now-space-2); }
.world__desc { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); max-width: 16rem; }

/* образы запуска */
.look { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--now-layout-gutter-desktop); align-items: center; margin-bottom: var(--p-section-gap); }
.look__media { grid-column: 1 / span 7; aspect-ratio: 4 / 3; overflow: hidden; background: var(--p-photo-tone); }
.look__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.look__body { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: var(--now-space-6); }
.look--flip .look__media { grid-column: 6 / span 7; grid-row: 1; }
.look--flip .look__body { grid-column: 1 / span 4; grid-row: 1; }
.look__items { display: flex; flex-direction: column; gap: 6px; font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }

/* ---------- карточка изделия в сетке ---------- */

.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--now-layout-gutter-desktop) var(--now-layout-gutter-desktop); }
.grid-products--3 { grid-template-columns: repeat(3, 1fr); }

.card { display: flex; flex-direction: column; gap: var(--now-space-2); }
.card__name { text-decoration: none; }

.card__dots { display: flex; gap: 8px; margin-top: 2px; }
.card__dot { padding: 3px; border: 1px solid transparent; line-height: 0; }
.card__dot i { display: block; width: 11px; height: 11px; border: 1px solid var(--now-border-default); }
.card__dot[aria-pressed="true"] { border-color: var(--now-text-primary); }
.card__dot:hover i { border-color: var(--now-text-primary); }
.card__media { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--p-photo-tone); margin-bottom: var(--now-space-2); }
.card__name, .card__meta, .card__price { display: block; }
.card__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transition: transform var(--now-duration-type) var(--now-ease-standard), opacity var(--now-duration-type) var(--now-ease-standard); }
.card__shot--2 { opacity: 0; }
.card:hover .card__shot--1 { opacity: 0; }
.card:hover .card__shot--2 { opacity: 1; }
.card:hover .card__shot { transform: scale(calc(var(--zoom, 1) * 1.03)); }
.card__flag {
  position: absolute; left: 0; top: 0;
  padding: 6px 10px;
  background: var(--now-bg-canvas);
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
}
.card__name { font-size: var(--now-type-body-md-size); }
.card__meta { font-size: var(--now-type-label-size); letter-spacing: var(--now-type-label-tracking); text-transform: uppercase; color: var(--now-text-secondary); }
.card__price { font-size: var(--now-type-body-sm-size); }

/* плейсхолдер фотографии */
.ph {
  width: 100%; height: 100%;
  background: var(--p-photo-tone);
  display: grid; place-items: center;
}
.ph span { font-size: var(--now-type-micro-size); letter-spacing: var(--now-type-micro-tracking); text-transform: uppercase; color: var(--now-text-secondary); }

/* ---------- манифест ---------- */

.manifest { text-align: center; }
.manifest p { max-width: 44rem; margin-inline: auto; }

/* ---------- вход в TOUCH ---------- */

.touchband {
  background: var(--now-color-black);
  color: var(--now-color-ivory);
  min-height: 560px;
  display: grid;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.touchband__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--now-layout-gutter-desktop); align-items: end; padding-block: var(--now-space-16); }
.touchband__body { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--now-space-6); }
.touchband__mark { grid-column: 6 / span 2; justify-self: end; align-self: start; color: var(--now-color-muted-dark); }
.touchband p { color: var(--now-color-muted-dark); }
.touchband .tlink:hover { border-bottom-color: var(--now-color-touch-active); color: var(--now-color-touch-active); }
.touchband .linkghost { color: color-mix(in srgb, var(--now-color-ivory) 70%, transparent); }
.touchband .linkghost:hover { color: var(--now-color-ivory); }
.touchband__inner { position: relative; z-index: 1; }
.touchband__photo { position: absolute; right: 0; top: 0; bottom: 0; width: 34%; opacity: 0.75; }
.touchband__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- сервис ---------- */

.service { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--now-line-hairline) solid var(--now-border-default); }
.service__cell { text-decoration: none; padding: var(--now-space-8) var(--now-space-6) var(--now-space-8) 0; border-right: var(--now-line-hairline) solid var(--now-border-default); display: flex; flex-direction: column; gap: var(--now-space-3); }
.service__cell:first-child { padding-left: 0; }
.service__cell:last-child { border-right: 0; }
.service__cell:not(:first-child) { padding-left: var(--now-space-6); }

/* ---------- подписка ---------- */

.subscribe { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--now-layout-gutter-desktop); align-items: end; }
.subscribe__text { grid-column: 1 / span 5; }
.subscribe__form { grid-column: 7 / span 6; display: flex; gap: var(--now-space-4); align-items: flex-end; }

.field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
/* подпись поля — первый span внутри label.field; селектор .field label
   не совпадал ни с одной разметкой, и подписи всё это время рисовались
   обычным текстом */
.field > span:first-of-type { font-size: var(--now-type-micro-size); letter-spacing: var(--now-type-micro-tracking); text-transform: uppercase; color: var(--now-text-secondary); }
.field input {
  height: 52px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--now-border-default);
  color: var(--now-text-primary);
  font: inherit;
  border-radius: 0;
}
.field input:focus { outline: none; border-bottom: 2px solid var(--now-text-primary); }
.field input::placeholder { color: var(--now-text-secondary); }

/* ---------- footer ---------- */

.footer { border-top: var(--now-line-hairline) solid var(--now-border-default); padding-block: var(--now-space-16) var(--now-space-8); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--now-layout-gutter-desktop); }
.footer__col h3 { font-size: var(--now-type-label-size); letter-spacing: var(--now-type-label-tracking); text-transform: uppercase; font-weight: 500; margin-bottom: var(--now-space-4); }
.footer__col li { margin-bottom: 10px; font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.footer__col a:hover { color: var(--now-text-primary); }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--now-space-6); flex-wrap: wrap; margin-top: var(--now-space-16); padding-top: var(--now-space-6); border-top: var(--now-line-hairline) solid var(--now-border-default); }
.footer__bottom ul { display: flex; gap: var(--now-space-6); flex-wrap: wrap; }

/* ---------- кнопка назад ---------- */

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--now-space-8);
  padding-bottom: 4px;
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--now-text-secondary);
  border-bottom: 1px solid transparent;
  transition: color var(--now-duration-hover) var(--now-ease-standard),
              border-color var(--now-duration-hover) var(--now-ease-standard);
}
.backlink:hover { color: var(--now-text-primary); border-bottom-color: currentColor; }
.backlink .arrow { transition: transform var(--now-duration-hover) var(--now-ease-standard); }
.backlink:hover .arrow { transform: translateX(-4px); }

.backrow { padding-top: var(--now-space-4); }

/* ---------- вход в intimate objects ---------- */

.touchlinks {
  display: flex;
  align-items: center;
  gap: var(--now-space-8);
  flex-wrap: wrap;
  margin-top: var(--now-space-6);
}

.objectsbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 10px 16px;
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--now-text-primary);
  isolation: isolate;
}

/* лёгкая красная подложка вместо чёрной заливки: чёрное поле на чёрном
   фоне TOUCH не читается, а рамка должна оставаться главным событием */
.objectsbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--now-color-touch-outline) 16%, transparent);
  opacity: 0;
  transition: opacity var(--now-duration-hover) var(--now-ease-standard);
}
.objectsbtn:hover::before,
.objectsbtn:focus-visible::before { opacity: 1; }

.objectsbtn__frame { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.objectsbtn__frame span {
  position: absolute;
  background: var(--now-color-touch-outline);
  transition: transform 220ms var(--now-ease-standard);
}
.objectsbtn__frame span:nth-child(1) { top: 0; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; }
.objectsbtn__frame span:nth-child(2) { top: 0; right: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: top; transition-delay: 210ms; }
.objectsbtn__frame span:nth-child(3) { bottom: 0; right: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: right; transition-delay: 420ms; }
.objectsbtn__frame span:nth-child(4) { bottom: 0; left: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: bottom; transition-delay: 630ms; }

.objectsbtn:hover .objectsbtn__frame span:nth-child(1),
.objectsbtn:focus-visible .objectsbtn__frame span:nth-child(1),
.objectsbtn:hover .objectsbtn__frame span:nth-child(3),
.objectsbtn:focus-visible .objectsbtn__frame span:nth-child(3) { transform: scaleX(1); }

.objectsbtn:hover .objectsbtn__frame span:nth-child(2),
.objectsbtn:focus-visible .objectsbtn__frame span:nth-child(2),
.objectsbtn:hover .objectsbtn__frame span:nth-child(4),
.objectsbtn:focus-visible .objectsbtn__frame span:nth-child(4) { transform: scaleY(1); }

/* пульсация: только надпись, только цветом, без движения и свечения */
.objectsbtn__word {
  transition: color 300ms var(--now-ease-standard);
}
.objectsbtn.is-pulse .objectsbtn__word { color: var(--now-color-touch-active); }
.objectsbtn:hover .objectsbtn__word,
.objectsbtn:focus-visible .objectsbtn__word { color: var(--now-color-touch-active); }
.objectsbtn .arrow { transition: transform var(--now-duration-hover) var(--now-ease-standard); }
.objectsbtn:hover .arrow { transform: translateX(4px); }

/* без курсора рамка рисуется сразу: элемент должен читаться как вход,
   а не как обычная строка текста */
@media (hover: none) {
  .objectsbtn__frame span:nth-child(1),
  .objectsbtn__frame span:nth-child(3) { transform: scaleX(1); }
  .objectsbtn__frame span:nth-child(2),
  .objectsbtn__frame span:nth-child(4) { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .objectsbtn.is-pulse .objectsbtn__word { color: var(--now-text-primary); }
}

/* ---------- каталог ---------- */

.catalog__head { padding-block: var(--now-space-8) var(--now-space-8); }
.catalog__intro { max-width: 32rem; color: var(--now-text-secondary); margin-top: var(--now-space-4); }
.subnav { display: flex; gap: var(--now-space-8); flex-wrap: wrap; padding-block: var(--now-space-6); border-block: var(--now-line-hairline) solid var(--now-border-default); }
.subnav button {
  font-size: var(--now-type-nav-size);
  letter-spacing: var(--now-type-nav-tracking);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--now-text-secondary);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--now-duration-hover) var(--now-ease-standard);
}
.subnav button:hover { color: var(--now-text-primary); }
.subnav button[aria-pressed="true"] { color: var(--now-text-primary); border-bottom-color: var(--now-text-primary); }

.filters { display: flex; gap: var(--now-space-8); align-items: center; flex-wrap: wrap; padding-block: var(--now-space-6); }
/* группа переносится внутри себя: на узком ноутбуке ряд фишек длиннее экрана */
.filters__group { display: flex; gap: var(--now-space-4); align-items: center; flex-wrap: wrap; }
.filters__group > span { font-size: var(--now-type-micro-size); letter-spacing: var(--now-type-micro-tracking); text-transform: uppercase; color: var(--now-text-secondary); }
.chip {
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--now-border-default);
  transition: border-color var(--now-duration-hover) var(--now-ease-standard),
              background-color var(--now-duration-hover) var(--now-ease-standard),
              color var(--now-duration-hover) var(--now-ease-standard);
}
.chip:hover { border-color: var(--now-text-primary); }
.chip[aria-pressed="true"] { background: var(--now-action-fill); color: var(--now-action-on-fill); border-color: var(--now-action-fill); }
.filters__count { margin-left: auto; font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.empty { padding-block: var(--now-space-16); color: var(--now-text-secondary); }

/* строка выбранных фильтров */
.applied {
  display: flex;
  align-items: center;
  gap: var(--now-space-3);
  flex-wrap: wrap;
  padding-block: var(--now-space-4);
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  margin-bottom: var(--now-space-8);
}
.applied__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--now-text-primary);
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
  transition: opacity var(--now-duration-hover) var(--now-ease-standard);
}
.applied__chip i { font-style: normal; font-size: 0.875rem; line-height: 1; }
.applied__chip:hover { opacity: 0.6; }
.applied .linkghost { margin-left: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.card__flag--slot { color: var(--now-text-secondary); }

/* закрытая карточка: кадр не читается до подтверждения возраста */
.card--gated .card__shot { filter: blur(18px); transform: scale(calc(var(--zoom, 1) * 1.08)); }
.card--gated:hover .card__shot { transform: scale(calc(var(--zoom, 1) * 1.08)); }
.card--gated .card__shot--2 { display: none; }
.card__gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--now-space-2);
  text-align: center;
  padding: var(--now-space-4);
  background: color-mix(in srgb, var(--now-color-black) 22%, transparent);
  color: var(--now-color-ivory);
}
.card__gate i {
  font-style: normal;
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  padding: 6px 12px;
  border: 1px solid currentColor;
}
.card__gate span {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  opacity: 0.85;
}

/* editorial-вставка внутри сетки каталога */
.gridbreak { grid-column: 1 / -1; margin-block: var(--now-space-12); }
.gridbreak__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--now-layout-gutter-desktop); align-items: center; }
.gridbreak__media { grid-column: 1 / span 7; aspect-ratio: 4 / 3; overflow: hidden; background: var(--p-photo-tone); }
.gridbreak__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.gridbreak__body { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: var(--now-space-4); }

/* соседние миры */
.neighbours { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--now-layout-gutter-desktop); margin-top: var(--now-space-8); }
.neighbours a { display: flex; flex-direction: column; gap: var(--now-space-2); padding-top: var(--now-space-4); border-top: var(--now-line-hairline) solid var(--now-border-default); }
.neighbours a:hover .neighbours__name { letter-spacing: 0.17em; }
.neighbours__name { transition: letter-spacing var(--now-duration-hover) var(--now-ease-standard); }
.neighbours__desc { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }

/* кнопка фильтров — только mobile */
.filters__open { display: none; }

/* раздел без ассортимента */
.soon { padding-block: var(--now-space-16) var(--p-section-gap); display: flex; flex-direction: column; gap: var(--now-space-4); max-width: 32rem; }
.soon p { font-size: var(--now-type-body-lg-size); line-height: 1.55; color: var(--now-text-secondary); }
.soon__form { display: flex; gap: var(--now-space-4); align-items: flex-end; margin-top: var(--now-space-4); }
.soon__form .field { flex: 1; }

/* ---------- страница изделия ---------- */

.pdp { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--now-layout-gutter-desktop); padding-block: var(--now-space-8) var(--p-section-gap); }
.pdp__gallery {
  grid-column: 1 / span 7;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--now-space-4);
  align-items: start;
}
.pdp__thumbs { display: flex; flex-direction: column; gap: var(--now-space-2); position: sticky; top: calc(var(--now-header-height) + var(--now-space-8)); }
.pdp__thumb {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--p-photo-tone);
  opacity: 0.45;
  transition: opacity var(--now-duration-hover) var(--now-ease-standard);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.pdp__thumb[aria-selected="true"], .pdp__thumb:hover { opacity: 1; }
.pdp__shot { aspect-ratio: 3 / 4; background: var(--p-photo-tone); overflow: hidden; width: 100%; cursor: zoom-in; }
.pdp__shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.pdp__info { grid-column: 9 / span 4; position: sticky; top: calc(var(--now-header-height) + var(--now-space-8)); align-self: start; display: flex; flex-direction: column; gap: var(--now-space-6); }
.pdp__crumb { color: var(--now-text-secondary); }
.pdp__price { font-size: var(--now-type-body-lg-size); }
.pdp__desc { color: var(--now-text-secondary); }
.pdp__row { display: flex; flex-direction: column; gap: var(--now-space-3); }
.pdp__rowhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--now-space-4); }
.pdp__opts { display: flex; gap: var(--now-space-2); flex-wrap: wrap; }
.swatch { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--now-border-default); font-size: var(--now-type-label-size); letter-spacing: var(--now-type-label-tracking); text-transform: uppercase; }
.swatch i { width: 12px; height: 12px; display: block; border: 1px solid var(--now-border-default); }
.swatch[aria-pressed="true"] { border-color: var(--now-text-primary); }
.size { min-width: 52px; text-align: center; padding: 10px 8px; border: 1px solid var(--now-border-default); font-size: var(--now-type-label-size); letter-spacing: var(--now-type-label-tracking); }
.size[aria-pressed="true"] { background: var(--now-action-fill); color: var(--now-action-on-fill); border-color: var(--now-action-fill); }
.size--out { color: var(--now-text-secondary); position: relative; overflow: hidden; }
.size--out::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; top: 50%;
  height: 1px;
  background: var(--now-border-default);
  transform: rotate(-16deg);
}
.pdp__onesize { color: var(--now-text-secondary); }
.pdp__row--flash .pdp__opts { box-shadow: 0 2px 0 var(--now-text-primary); }

.pdp__shot { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.shotfull { aspect-ratio: 3 / 4; overflow: hidden; background: var(--p-photo-tone); }
.shotfull img { width: 100%; height: 100%; object-fit: cover; }

/* закреплённая кнопка покупки — только mobile */
.buybar { display: none; }
.specs { border-top: var(--now-line-hairline) solid var(--now-border-default); }
.specs div { display: flex; justify-content: space-between; gap: var(--now-space-4); padding: 12px 0; border-bottom: var(--now-line-hairline) solid var(--now-border-default); font-size: var(--now-type-body-sm-size); }
.specs dt, .specs span:first-child { color: var(--now-text-secondary); }
.privacy-note { border: 1px solid var(--now-border-default); padding: var(--now-space-6); display: flex; flex-direction: column; gap: var(--now-space-3); }

/* подсказка по размеру */
.sizehint { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); margin-top: var(--now-space-2); }
.sizehint--promise { color: var(--now-text-primary); }
.sizehint--promise a { border-bottom: 1px solid var(--now-border-default); }
.sizehint--promise a:hover { border-bottom-color: currentColor; }

/* срок доставки в карточке */
.delivery { display: flex; flex-direction: column; gap: var(--now-space-2); padding-top: var(--now-space-4); border-top: var(--now-line-hairline) solid var(--now-border-default); }
.delivery p { font-size: var(--now-type-body-sm-size); }
.delivery .muted { color: var(--now-text-secondary); }

/* комплект из образа */
.setbox { border: 1px solid var(--now-border-default); padding: var(--now-space-6); display: flex; flex-direction: column; gap: var(--now-space-3); }
.setbox__line { display: flex; justify-content: space-between; gap: var(--now-space-4); font-size: var(--now-type-body-sm-size); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.setbox__line:hover { border-bottom-color: var(--now-border-default); }
.setbox__total { display: flex; justify-content: space-between; gap: var(--now-space-4); font-size: var(--now-type-body-md-size); padding-top: var(--now-space-3); border-top: var(--now-line-hairline) solid var(--now-border-default); }
.setbox .btn { margin-top: var(--now-space-2); }

/* секция «как это сделано» */
.made { padding-block: var(--p-section-gap) 0; }
.made__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--now-layout-gutter-desktop); align-items: center; }
.made__media { grid-column: 1 / span 5; aspect-ratio: 4 / 3; overflow: hidden; background: var(--p-photo-tone); }
.made__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.made__body { grid-column: 7 / span 5; display: flex; flex-direction: column; gap: var(--now-space-4); }
.made__body p { font-size: var(--now-type-body-lg-size); line-height: 1.55; color: var(--now-text-secondary); }
.made__stub {
  font-size: var(--now-type-micro-size) !important;
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-color-touch-outline) !important;
  border: 1px solid var(--now-color-touch-outline);
  padding: var(--now-space-3);
}
[data-theme="touch"] .made__stub { color: var(--now-color-touch-active) !important; border-color: var(--now-color-touch-active); }

/* ---------- сервисные страницы ---------- */

.page { padding-block: var(--now-space-8) var(--p-section-gap); max-width: 52rem; }
.page__title { margin-top: var(--now-space-12); }
.page__intro {
  margin-top: var(--now-space-6);
  font-size: var(--now-type-body-lg-size);
  line-height: 1.55;
  color: var(--now-text-secondary);
  max-width: 40rem;
}
.page__body { margin-top: var(--now-space-16); display: flex; flex-direction: column; gap: var(--now-space-4); }
.page__head {
  margin-top: var(--now-space-12);
  padding-bottom: var(--now-space-3);
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
}
.page__body > .page__head:first-child { margin-top: 0; }
.page__text { font-size: var(--now-type-body-lg-size); line-height: 1.55; }
.page__note { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }

.page__list { display: flex; flex-direction: column; gap: var(--now-space-3); }
.page__list li {
  padding-left: var(--now-space-6);
  position: relative;
  font-size: var(--now-type-body-md-size);
}
.page__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 10px; height: 1px;
  background: var(--now-text-secondary);
}

.page__steps { display: flex; flex-direction: column; }
.page__steps li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--now-space-4);
  padding: var(--now-space-4) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-md-size);
}
.page__steps li:first-child { border-top: var(--now-line-hairline) solid var(--now-border-default); }
.page__step { font-family: var(--now-font-display); font-size: 1.25rem; line-height: 1; color: var(--now-text-secondary); }

.tablewrap { overflow-x: auto; }
.page__table { width: 100%; border-collapse: collapse; font-size: var(--now-type-body-sm-size); min-width: 26rem; }
.page__table th, .page__table td {
  text-align: left;
  padding: var(--now-space-3) var(--now-space-4) var(--now-space-3) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  vertical-align: top;
}
.page__table th {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  font-weight: 500;
}
.page__table td:first-child { color: var(--now-text-primary); }
.page__table td { color: var(--now-text-secondary); }

.faq { display: flex; flex-direction: column; }
.faq__item { border-bottom: var(--now-line-hairline) solid var(--now-border-default); }
.faq__item:first-child { border-top: var(--now-line-hairline) solid var(--now-border-default); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--now-space-4) var(--now-space-8) var(--now-space-4) 0;
  position: relative;
  font-size: var(--now-type-body-md-size);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: var(--now-space-4);
  color: var(--now-text-secondary);
}
.faq__item[open] summary::after { content: "−"; }
.faq__item p {
  padding: 0 var(--now-space-8) var(--now-space-4) 0;
  color: var(--now-text-secondary);
  font-size: var(--now-type-body-md-size);
  max-width: 40rem;
}

.page__next {
  display: flex;
  align-items: baseline;
  gap: var(--now-space-8);
  flex-wrap: wrap;
  margin-top: var(--p-section-gap);
  padding-top: var(--now-space-6);
  border-top: var(--now-line-hairline) solid var(--now-border-default);
}
.page__next a {
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.page__next a:hover { border-bottom-color: currentColor; }

/* ---------- страница о бренде ---------- */

.about__hero { padding-block: var(--now-space-12) var(--now-space-8); }
.about__lead {
  max-width: 34rem;
  margin-top: var(--now-space-6);
  font-size: var(--now-type-body-lg-size);
  line-height: 1.55;
  color: var(--now-text-secondary);
}

/* манифест набирается крупно: это единственный длинный текст бренда,
   который человек читает целиком */
.about__manifest { display: flex; flex-direction: column; gap: var(--now-space-6); }
.about__manifest p { max-width: 52rem; }
.about__manifest p {
  font-family: var(--now-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* две колонки: слева метка раздела, справа текст */
.about__two { display: grid; grid-template-columns: 3fr 8fr; gap: var(--now-layout-gutter-desktop); align-items: start; }
.about__two > div:last-child { display: flex; flex-direction: column; gap: var(--now-space-4); max-width: 44rem; }
.about__two p { font-size: var(--now-type-body-lg-size); line-height: 1.55; }
.about__two .muted { color: var(--now-text-secondary); }
.about__two .title + p { margin-top: var(--now-space-2); }

.about__worlds { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--now-space-6) var(--now-layout-gutter-desktop); margin-top: var(--now-space-6); }
.about__worlds a { display: flex; flex-direction: column; gap: var(--now-space-2); padding-top: var(--now-space-4); border-top: var(--now-line-hairline) solid var(--now-border-default); }
.about__worlds .muted { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.about__worlds a:hover .label { letter-spacing: 0.17em; }
.about__worlds .label { transition: letter-spacing var(--now-duration-hover) var(--now-ease-standard); }

/* TOUCH внутри светлой страницы: бренд показывает, что умеет менять состояние */
.about__touch {
  background: var(--now-bg-canvas);
  color: var(--now-text-primary);
  padding-block: var(--p-section-gap);
  margin-block: var(--p-section-gap);
}

.about__facts { display: flex; flex-direction: column; gap: var(--now-space-6); }
.about__facts li { display: flex; flex-direction: column; gap: 6px; padding-top: var(--now-space-4); border-top: var(--now-line-hairline) solid var(--now-border-default); }
.about__facts b { font-weight: 400; font-size: var(--now-type-body-lg-size); }
.about__facts span { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }

.about__no { display: flex; flex-direction: column; }
.about__no li {
  padding: var(--now-space-4) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-lg-size);
  line-height: 1.4;
}
.about__no li:first-child { border-top: var(--now-line-hairline) solid var(--now-border-default); }

.about__stub {
  font-size: var(--now-type-micro-size) !important;
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-color-touch-outline);
  border: 1px solid var(--now-color-touch-outline);
  padding: var(--now-space-3);
}

/* ---------- вход и профиль ---------- */

.login { padding-block: var(--now-space-8) var(--p-section-gap); }
.login__panel {
  max-width: 26rem;
  margin-top: var(--now-space-16);
  display: flex;
  flex-direction: column;
  gap: var(--now-space-4);
}
.login__panel .muted { color: var(--now-text-secondary); }
.login__panel form { display: flex; flex-direction: column; gap: var(--now-space-4); margin-top: var(--now-space-4); }

.code { display: flex; gap: var(--now-space-2); }
.code__cell {
  flex: 1;
  height: 52px;
  text-align: center;
  font: inherit;
  font-size: 1.125rem;
  background: none;
  border: 1px solid var(--now-border-default);
  border-radius: 0;
  color: var(--now-text-primary);
}
.code__cell:focus { outline: none; border-color: var(--now-text-primary); }

.account { padding-block: var(--now-space-8) 0; }
.account__head { display: flex; align-items: baseline; gap: var(--now-space-6); margin-top: var(--now-space-12); }
.account__head .muted { color: var(--now-text-secondary); font-size: var(--now-type-body-sm-size); }

.account__tabs {
  display: flex;
  gap: var(--now-space-8);
  align-items: baseline;
  margin-top: var(--now-space-12);
  padding-bottom: var(--now-space-3);
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
}
.account__tabs a {
  font-size: var(--now-type-nav-size);
  letter-spacing: var(--now-type-nav-tracking);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--now-text-secondary);
  padding-bottom: var(--now-space-3);
  margin-bottom: calc(-1 * var(--now-space-3) - 1px);
  border-bottom: 2px solid transparent;
  transition: color var(--now-duration-hover) var(--now-ease-standard);
}
.account__tabs a:hover { color: var(--now-text-primary); }
.account__tabs a[aria-selected="true"] { color: var(--now-text-primary); border-bottom-color: var(--now-text-primary); }
.account__out { margin-left: auto; }

.account__body { margin-top: var(--now-space-12); max-width: 46rem; }

/* заказы */
.orders { display: flex; flex-direction: column; }
.order { padding: var(--now-space-6) 0; border-bottom: var(--now-line-hairline) solid var(--now-border-default); display: flex; flex-direction: column; gap: var(--now-space-2); }
.order:first-child { border-top: var(--now-line-hairline) solid var(--now-border-default); }
.order__head { display: flex; justify-content: space-between; gap: var(--now-space-4); }
.order__hidden { display: flex; justify-content: space-between; align-items: center; gap: var(--now-space-4); margin-top: var(--now-space-2); font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.order__items { display: flex; flex-wrap: wrap; gap: var(--now-space-6); margin-top: var(--now-space-3); }
.order__item { display: flex; gap: var(--now-space-3); align-items: center; font-size: var(--now-type-body-sm-size); }
.order__thumb { width: 48px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--p-photo-tone); flex: 0 0 auto; }
.order__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.order__actions { display: flex; gap: var(--now-space-6); margin-top: var(--now-space-3); }

/* сообщение о переносе гостевого списка */
.notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--now-space-4);
  padding: var(--now-space-4);
  margin-bottom: var(--now-space-6);
  border: 1px solid var(--now-border-default);
  font-size: var(--now-type-body-sm-size);
  color: var(--now-text-secondary);
}

/* сохранённое */
.savedlist { display: flex; flex-direction: column; }
.savedrow { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--now-space-4); align-items: center; padding: var(--now-space-4) 0; border-bottom: var(--now-line-hairline) solid var(--now-border-default); }
.savedrow:first-child { border-top: var(--now-line-hairline) solid var(--now-border-default); }
.savedrow__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--p-photo-tone); }
.savedrow__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.savedrow__body { display: flex; flex-direction: column; gap: 2px; font-size: var(--now-type-body-sm-size); }
.savedrow__body .muted { color: var(--now-text-secondary); font-size: var(--now-type-label-size); letter-spacing: var(--now-type-label-tracking); text-transform: uppercase; }
.savedrow__right { display: flex; align-items: center; gap: var(--now-space-4); }
.savedrow__tag { font-size: var(--now-type-micro-size); letter-spacing: var(--now-type-micro-tracking); text-transform: uppercase; color: var(--now-color-touch-outline); }
[data-theme="touch"] .savedrow__tag { color: var(--now-color-touch-active); }
.btn--small { min-height: 34px; padding: 0 var(--now-space-4); font-size: var(--now-type-micro-size); }

/* мой размер и адреса */
.sizeform { display: flex; flex-direction: column; gap: var(--now-space-6); max-width: 26rem; }
.sizeform .field { max-width: 10rem; }
.addresses { display: flex; flex-direction: column; margin-bottom: var(--now-space-8); }
.addressrow { display: flex; justify-content: space-between; align-items: center; gap: var(--now-space-4); padding: var(--now-space-4) 0; border-bottom: var(--now-line-hairline) solid var(--now-border-default); }
.addressrow:first-child { border-top: var(--now-line-hairline) solid var(--now-border-default); }
.addressform { display: flex; gap: var(--now-space-4); align-items: flex-end; max-width: 32rem; }
.addressform .field { flex: 1; }

/* ---------- корзина ---------- */

.cartpage { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--now-layout-gutter-desktop); padding-block: var(--now-space-8) var(--p-section-gap); }
.cartpage__items { grid-column: 1 / span 7; }
.cartpage__summary { grid-column: 9 / span 4; align-self: start; position: sticky; top: calc(var(--now-header-height) + var(--now-space-8)); border: 1px solid var(--now-border-default); padding: var(--now-space-8); display: flex; flex-direction: column; gap: var(--now-space-4); }

.cartline { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--now-space-6); padding: var(--now-space-6) 0; border-bottom: var(--now-line-hairline) solid var(--now-border-default); align-items: start; }
.cartline:first-child { border-top: var(--now-line-hairline) solid var(--now-border-default); }
.cartline__media { aspect-ratio: 3 / 4; background: var(--p-photo-tone); overflow: hidden; }
.cartline__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.cartline__body { display: flex; flex-direction: column; gap: 6px; }
.cartline__opts { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.qty { display: inline-flex; align-items: center; align-self: flex-start; border: 1px solid var(--now-border-default); margin-top: var(--now-space-2); }
.qty button { width: 34px; height: 34px; }
.qty span { min-width: 32px; text-align: center; font-size: var(--now-type-body-sm-size); }
.cartline__right { text-align: right; display: flex; flex-direction: column; gap: var(--now-space-3); align-items: flex-end; }
.linkghost { font-size: var(--now-type-micro-size); letter-spacing: var(--now-type-micro-tracking); text-transform: uppercase; color: var(--now-text-secondary); border-bottom: 1px solid transparent; }
.linkghost:hover { color: var(--now-text-primary); border-bottom-color: currentColor; }

.total { display: flex; justify-content: space-between; font-size: var(--now-type-body-lg-size); padding-top: var(--now-space-4); border-top: var(--now-line-hairline) solid var(--now-border-default); }
.sumrow { display: flex; justify-content: space-between; font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }

/* формы оформления */
.formhead { display: block; margin: var(--now-space-12) 0 var(--now-space-4); }
.formhead:first-child { margin-top: 0; }
[data-checkout] .field { margin-bottom: var(--now-space-6); }
.field--error input { border-bottom-color: var(--now-color-touch-outline); border-bottom-width: 2px; }
.field__error { font-size: var(--now-type-body-sm-size); color: var(--now-color-touch-outline); margin-top: 6px; }
[data-theme="touch"] .field--error input { border-bottom-color: var(--now-color-touch-active); }
[data-theme="touch"] .field__error { color: var(--now-color-touch-active); }

.radios { display: flex; flex-direction: column; gap: 0; border-top: var(--now-line-hairline) solid var(--now-border-default); margin-bottom: var(--now-space-8); }
.radio {
  display: flex;
  align-items: flex-start;
  gap: var(--now-space-4);
  width: 100%;
  padding: var(--now-space-4) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  text-align: left;
}
.radio__dot {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  margin-top: 4px;
  border: 1px solid var(--now-border-default);
  border-radius: var(--now-radius-circle, 999px);
  position: relative;
  transition: border-color var(--now-duration-hover) var(--now-ease-standard);
}
.radio[aria-checked="true"] .radio__dot { border-color: var(--now-text-primary); }
.radio[aria-checked="true"] .radio__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--now-text-primary);
}
.radio__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.radio__name { font-size: var(--now-type-body-md-size); }
.radio__term { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.radio__price { font-size: var(--now-type-body-sm-size); white-space: nowrap; }
.radio:hover .radio__dot { border-color: var(--now-text-primary); }

/* галочки и согласие */
.checks { display: flex; flex-direction: column; margin-bottom: var(--now-space-6); }
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--now-space-3);
  padding: var(--now-space-3) 0;
  text-align: left;
  font-size: var(--now-type-body-md-size);
  line-height: 1.5;
}
.check i {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 4px;
  border: 1px solid var(--now-border-default);
  position: relative;
  transition: background-color var(--now-duration-hover) var(--now-ease-standard),
              border-color var(--now-duration-hover) var(--now-ease-standard);
}
.check:hover i { border-color: var(--now-text-primary); }
.check--on i { background: var(--now-action-fill); border-color: var(--now-action-fill); }
.check--on i::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 4px; height: 9px;
  border: solid var(--now-action-on-fill);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.check em { display: block; font-style: normal; font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.check a { border-bottom: 1px solid currentColor; }

.consent { margin-top: var(--now-space-8); padding-top: var(--now-space-6); border-top: var(--now-line-hairline) solid var(--now-border-default); }
.formnote { font-size: var(--now-type-body-sm-size); margin-bottom: var(--now-space-4); max-width: 34rem; }

/* блок оплаты: встроенный компонент провайдера в оформлении бренда */
.paybox {
  border: 1px solid var(--now-border-default);
  padding: var(--now-space-6);
  margin-bottom: var(--now-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--now-space-4);
}
.paybox__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--now-space-4) var(--now-space-6);
}
.paybox__num { grid-column: 1 / -1; }
.paybox input:disabled { color: var(--now-text-secondary); -webkit-text-fill-color: var(--now-text-secondary); opacity: 1; }
.paybox__note { color: var(--now-text-secondary); }

.paybox__sbp { display: flex; gap: var(--now-space-6); align-items: flex-start; }
.paybox__qr {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  background:
    repeating-linear-gradient(90deg, var(--now-text-primary) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, var(--now-text-primary) 0 6px, transparent 6px 12px);
  opacity: 0.25;
}
.paybox__sbp b { font-weight: 400; }
.paybox__sbp p { margin-top: 4px; }

@media (max-width: 899px) {
  .paybox__grid { grid-template-columns: 1fr 1fr; }
  .paybox__num { grid-column: 1 / -1; }
}

/* предупреждение об остатках */
.alarm {
  border: 1px solid var(--now-color-touch-outline);
  padding: var(--now-space-6);
  margin-bottom: var(--now-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--now-space-3);
}
.alarm .label { color: var(--now-color-touch-outline); }
.alarm p { font-size: var(--now-type-body-sm-size); }

/* пункт выдачи */
.pickup { display: flex; flex-direction: column; gap: var(--now-space-4); align-items: flex-start; margin-bottom: var(--now-space-6); }
.pickup__chosen { display: flex; flex-direction: column; gap: 2px; }
.pickup__chosen b { font-weight: 400; }
.pickup__chosen .muted { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }

.pickmap {
  position: relative;
  height: 12rem;
  background: var(--now-bg-surface);
  border: 1px solid var(--now-border-default);
}
.pickmap__pin {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: var(--now-radius-circle, 999px);
  background: var(--now-text-primary);
}
.pickmap__pin.is-on { width: 13px; height: 13px; margin: -6px 0 0 -6px; background: var(--now-color-touch-outline); }

.picklist { display: flex; flex-direction: column; }
.picklist__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--now-space-4);
  padding: var(--now-space-4) 0;
  border-top: var(--now-line-hairline) solid var(--now-border-default);
  text-align: left;
  font-size: var(--now-type-body-md-size);
}
.picklist__row:last-child { border-bottom: var(--now-line-hairline) solid var(--now-border-default); }
.picklist__row b { font-weight: 400; display: block; }
.picklist__row .muted { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.picklist__row:hover { background: var(--now-bg-surface); }
.picklist__row[aria-pressed="true"] b { border-bottom: 2px solid var(--now-text-primary); }

/* подсказки адреса */
.suggest { position: relative; }
.suggest__list {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 5;
  background: var(--now-bg-canvas);
  border: 1px solid var(--now-border-default);
  border-top: 0;
  display: flex;
  flex-direction: column;
}
.suggest__item { padding: 10px var(--now-space-4); text-align: left; font-size: var(--now-type-body-sm-size); }
.suggest__item:hover { background: var(--now-bg-surface); }

/* сводка заказа */
.summary__toggle { display: none; }
.summary__body { display: flex; flex-direction: column; gap: var(--now-space-4); }

/* ожидание оплаты */
.pending {
  min-height: calc(100vh - var(--now-header-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--now-space-4);
  padding-block: var(--now-space-16);
}
.pending .muted { color: var(--now-text-secondary); max-width: 30rem; font-size: var(--now-type-body-lg-size); }
.pending__spin {
  width: 30px; height: 30px;
  border: 1px solid var(--now-border-default);
  border-top-color: var(--now-text-primary);
  border-radius: 999px;
  animation: pendingSpin 1.1s linear infinite;
  margin-bottom: var(--now-space-4);
}
@keyframes pendingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pending__spin { animation: none; } }

/* счётчик позиций в заголовке */
.cartcount {
  margin-left: var(--now-space-4);
  font-family: var(--now-font-ui);
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  vertical-align: middle;
}

/* смена размера в строке */
.sizesel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: var(--now-space-2);
  padding: 5px 10px;
  border: 1px solid var(--now-border-default);
  font-size: var(--now-type-label-size);
  letter-spacing: var(--now-type-label-tracking);
  text-transform: uppercase;
}
.sizesel::after { content: "⌄"; color: var(--now-text-secondary); line-height: 1; }
.sizesel:hover { border-color: var(--now-text-primary); }
.cartline__sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--now-space-2); }
.cartline__sizes .size { min-width: 40px; padding: 7px 6px; }

/* закончившаяся позиция */
.cartline--out .cartline__media { opacity: 0.5; }
.cartline__warn {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-color-touch-outline);
  margin-top: var(--now-space-2);
}
[data-theme="touch"] .cartline__warn { color: var(--now-color-touch-active); }

/* строка отложенного */
.asidestrip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--now-space-4);
  padding: var(--now-space-4) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
}
.asidestrip:hover .label { letter-spacing: 0.17em; }
.asidestrip .label { transition: letter-spacing var(--now-duration-hover) var(--now-ease-standard); }

/* закреплённая кнопка оформления — только mobile */
.cartbar { display: none; }

/* ---------- мини-корзина ---------- */

/* только что добавленная позиция */
.cartline--new { position: relative; }
.cartline--new::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--now-space-4));
  right: calc(-1 * var(--now-space-4));
  top: 0; bottom: 0;
  background: color-mix(in srgb, var(--now-text-primary) 5%, transparent);
  pointer-events: none;
}
.cartline--new > * { position: relative; }

/* отмена удаления */
.cartline--undo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--now-space-4);
  grid-template-columns: none;
  font-size: var(--now-type-body-sm-size);
  color: var(--now-text-secondary);
}
.cartline--undo b { font-weight: 400; color: var(--now-text-primary); }

/* порог бесплатной доставки */
.ship { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.ship--done { color: var(--now-text-primary); }

/* сохранённое в пустой панели */
.minisaved { display: flex; flex-direction: column; gap: var(--now-space-2); margin-top: var(--now-space-8); }
.minisaved__row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--now-space-3);
  align-items: center;
  padding: var(--now-space-3) 0;
  border-top: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-sm-size);
}
.minisaved__row b { font-weight: 400; display: block; }
.minisaved__row .muted { color: var(--now-text-secondary); font-size: var(--now-type-label-size); }
.minisaved__m { aspect-ratio: 3 / 4; overflow: hidden; background: var(--p-photo-tone); }
.minisaved__m img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }

/* фон не прокручивается под открытой панелью */
body.is-locked { overflow: hidden; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100%;
  background: var(--now-bg-canvas);
  border-left: var(--now-line-hairline) solid var(--now-border-default);
  z-index: 90;
  transform: translateX(100%);
  transition: transform var(--now-duration-type) var(--now-ease-standard);
  display: flex;
  flex-direction: column;
}
.drawer--open { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: var(--now-space-6); border-bottom: var(--now-line-hairline) solid var(--now-border-default); }
.drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--now-space-6); }
.drawer__foot { padding: var(--now-space-6); border-top: var(--now-line-hairline) solid var(--now-border-default); display: flex; flex-direction: column; gap: var(--now-space-4); }
.scrim { position: fixed; inset: 0; background: rgba(8, 7, 7, 0.4); z-index: 85; opacity: 0; pointer-events: none; transition: opacity var(--now-duration-type) var(--now-ease-standard); }
.scrim--on { opacity: 1; pointer-events: auto; }

/* ---------- модальное окно ---------- */

.modal {
  position: fixed;
  z-index: 95;
  inset: auto 0 0 0;
  margin-inline: auto;
  max-width: 720px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--now-bg-canvas);
  border: 1px solid var(--now-border-default);
  padding: var(--now-space-12);
  display: none;
}
.modal--open { display: block; top: 12vh; bottom: auto; }
.modal__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--now-space-8); }
.sizetable { width: 100%; border-collapse: collapse; font-size: var(--now-type-body-sm-size); }
.sizetable th, .sizetable td { text-align: left; padding: 10px 0; border-bottom: var(--now-line-hairline) solid var(--now-border-default); }
.sizetable th { font-size: var(--now-type-micro-size); letter-spacing: var(--now-type-micro-tracking); text-transform: uppercase; color: var(--now-text-secondary); font-weight: 500; }

/* фильтры внутри панели: вертикальный список групп */
.filters--panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--now-space-8); }
.filters--panel .filters__group { flex-wrap: wrap; }

/* ---------- нижняя навигация mobile ---------- */

.mobilenav { display: none; }

/* ---------- поиск ---------- */

/* Оверлей во весь экран: одно действие за раз. Шапка остаётся сверху,
   чтобы человек видел, где он, и мог выйти. */
.search {
  min-height: calc(100vh - var(--now-header-height));
  background: var(--now-bg-canvas);
  padding-block: var(--now-space-12) var(--p-section-gap);
}
.search__inner { display: flex; flex-direction: column; gap: var(--now-space-12); }

.search__field {
  display: flex;
  align-items: baseline;
  gap: var(--now-space-6);
  padding-bottom: var(--now-space-4);
  border-bottom: 2px solid var(--now-text-primary);
}
.search__field input {
  flex: 1;
  min-width: 0;
  font-family: var(--now-font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  background: none;
  border: 0;
  color: var(--now-text-primary);
  border-radius: 0;
}
.search__field input:focus { outline: none; }
.search__field input::placeholder { color: var(--now-text-secondary); }
.search__field input::-webkit-search-cancel-button { display: none; }
.search__count {
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  white-space: nowrap;
}
.search__close { white-space: nowrap; }

.search__body { display: flex; flex-direction: column; gap: var(--now-space-12); }
.search__group { display: flex; flex-direction: column; gap: var(--now-space-4); }
.search__hint { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }

/* сервисная страница в результатах */
.pagerow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--now-space-4);
  padding: var(--now-space-4) 0;
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  font-size: var(--now-type-body-md-size);
}
.search__group .pagerow:first-of-type { border-top: var(--now-line-hairline) solid var(--now-border-default); }
.pagerow:hover { color: var(--now-text-primary); }
.pagerow:hover span:first-child { border-bottom: 1px solid currentColor; }

.search__none {
  border: 1px solid var(--now-border-default);
  padding: var(--now-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--now-space-4);
  max-width: 40rem;
}
.search__none .muted { color: var(--now-text-secondary); }
.search__ask { display: flex; gap: var(--now-space-4); align-items: flex-end; margin-top: var(--now-space-2); }
.search__ask .field { flex: 1; }

@media (max-width: 899px) {
  .search { padding-block: var(--now-space-8) var(--now-space-16); }
  .search__inner { gap: var(--now-space-8); }
  .search__field { flex-wrap: wrap; gap: var(--now-space-3); }
  .search__field input { flex: 1 0 100%; }
  .search__ask { flex-direction: column; align-items: stretch; }
}

/* ---------- служебный экран писем ---------- */

.mail { margin-top: var(--now-space-16); }
.mail__meta {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: var(--now-space-6);
  padding-bottom: var(--now-space-4);
  border-bottom: var(--now-line-hairline) solid var(--now-border-default);
  margin-bottom: var(--now-space-6);
}
.mail__meta p { margin-top: 6px; font-size: var(--now-type-body-sm-size); }
.mail__frame { background: var(--now-color-ivory); border: 1px solid var(--now-border-default); }
.mail__frame iframe { display: block; width: 100%; height: 760px; border: 0; }

@media (max-width: 899px) {
  .mail__meta { grid-template-columns: 1fr; gap: var(--now-space-3); }
}

/* ---------- возрастное подтверждение ---------- */

/* Страница остаётся на месте и видна, но нечитаема: человек понимает,
   куда он попал, и при этом не видит содержимого до подтверждения. */
body.is-gated .header,
body.is-gated #view,
body.is-gated .footer,
body.is-gated .mobilenav {
  filter: blur(14px);
  pointer-events: none;
  user-select: none;
}

.agegate {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: var(--now-space-6);
  background: color-mix(in srgb, var(--now-bg-canvas) 72%, transparent);
}
.agegate[hidden] { display: none; }

.agegate__panel {
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: var(--now-space-4);
  padding: var(--now-space-12);
  background: var(--now-bg-canvas);
  border: 1px solid var(--now-border-default);
}
.agegate__panel p { color: var(--now-text-secondary); }
.agegate__actions { display: flex; gap: var(--now-space-3); margin-top: var(--now-space-4); }
.agegate__actions .btn { flex: 1; }

/* ---------- cookie ---------- */

.cookiebar {
  position: fixed;
  left: var(--now-space-6);
  bottom: var(--now-space-6);
  z-index: 72;
  width: min(26rem, calc(100% - 2 * var(--now-space-6)));
  display: flex;
  flex-direction: column;
  gap: var(--now-space-4);
  padding: var(--now-space-6);
  background: var(--now-bg-canvas);
  border: 1px solid var(--now-border-default);
}
.cookiebar[hidden] { display: none; }
.cookiebar p { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
/* Обе кнопки равны по весу и оформлению: приватный выбор не должен
   быть визуально слабее согласия. */
.cookiebar__actions { display: flex; flex-direction: column; gap: var(--now-space-2); }
.cookiebar__actions .btn { width: 100%; }

/* ---------- состояния загрузки и сообщений ---------- */

/* Кадр проявляется после загрузки. До этого на его месте тональное поле,
   заданное контейнером, а не пустой прямоугольник.

   Правило задаёт только скрытое состояние:
   если написать здесь opacity: 1, оно перебьёт по весу селектора всякую
   намеренную прозрачность — второй кадр тайла, знак другого состояния —
   и подмена на наведении молча перестанет работать. */
img[data-ready] { transition: opacity var(--now-duration-type) var(--now-ease-standard); }
img[data-ready="no"] { opacity: 0; }
img[data-ready="failed"] { opacity: 0; }

.imgfail {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--now-space-3);
  color: var(--now-text-secondary);
}

/* Сообщение: то же, что объявляется скринридеру */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--now-space-8);
  z-index: 96;
  transform: translate(-50%, 12px);
  opacity: 0;
  max-width: min(28rem, calc(100% - 2 * var(--now-space-6)));
  padding: var(--now-space-4) var(--now-space-6);
  background: var(--now-action-fill);
  color: var(--now-action-on-fill);
  font-size: var(--now-type-body-sm-size);
  text-align: center;
  transition: transform var(--now-duration-type) var(--now-ease-standard),
              opacity var(--now-duration-type) var(--now-ease-standard);
}
.toast[hidden] { display: none; }
.toast--in { transform: translate(-50%, 0); opacity: 1; }
.toast--error { background: var(--now-color-touch-outline); color: var(--now-color-ivory); }

/* Нет соединения */
.offline {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 97;
  padding: var(--now-space-3) var(--now-layout-margin-desktop);
  background: var(--now-color-touch-outline);
  color: var(--now-color-ivory);
  font-size: var(--now-type-body-sm-size);
  text-align: center;
}
.offline[hidden] { display: none; }
body:has(.offline:not([hidden])) .header { top: 2.6rem; }

/* Скелетон списка: используется, пока данные едут */
.skeleton { display: flex; flex-direction: column; gap: var(--now-space-4); }
.skeleton__line {
  height: 10px;
  background: color-mix(in srgb, var(--now-text-primary) 10%, transparent);
}
.skeleton__line--short { width: 46%; }
.skeleton__media { aspect-ratio: 3 / 4; background: var(--p-photo-tone); }

/* Кнопка в работе */
.btn--busy { opacity: 0.55; pointer-events: none; }

/* Блок «не загрузилось» внутри секции */
.loadfail {
  border: 1px solid var(--now-border-default);
  padding: var(--now-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--now-space-3);
  align-items: flex-start;
}
.loadfail p { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }

@media (max-width: 899px) {
  .toast { bottom: 88px; }
  body:has(.cartbar) .toast, body:has(.buybar) .toast { bottom: 100px; }
  .offline { padding-inline: var(--now-layout-margin-mobile); }
}

/* ---------- бейдж прототипа ---------- */

.protobadge {
  position: fixed;
  right: var(--now-space-4);
  bottom: var(--now-space-4);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: var(--now-space-3);
  padding: 8px 12px;
  background: var(--now-bg-canvas);
  border: 1px solid var(--now-border-default);
  font-size: var(--now-type-micro-size);
  letter-spacing: var(--now-type-micro-tracking);
  text-transform: uppercase;
  color: var(--now-text-secondary);
  max-width: 320px;
}
.protobadge[hidden] { display: none; }

/* ---------- адаптив ---------- */

@media (max-width: 1279px) {
  .worlds { grid-template-columns: repeat(3, 1fr); row-gap: var(--now-space-12); }
  .grid-products { grid-template-columns: repeat(3, 1fr); }
  .tabs { gap: 22px; }
  .neighbours { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
  :root {
    --now-layout-margin-desktop: var(--now-layout-margin-mobile);
    --p-section-gap: 4.5rem;
    --now-type-display-xl-size: clamp(2.75rem, 12vw, 4rem);
  }

  .wrap { padding-inline: var(--now-layout-margin-mobile); }

  .header__inner { grid-template-columns: 1fr auto; }
  .header .tabs { display: none; }
  .header__utils { gap: var(--now-space-4); }

  .hero { min-height: auto; }
  .hero__inner { display: flex; flex-direction: column; gap: var(--now-space-8); padding-block: 0 var(--now-space-12); }
  .hero__photo { position: relative; width: calc(100% + 2 * var(--now-layout-margin-mobile)); margin-inline: calc(-1 * var(--now-layout-margin-mobile)); height: 60vh; order: -1; }
  .hero__text { grid-column: auto; }
  .hero__marker { position: static; }

  .dropbar__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--now-space-4); padding-block: var(--now-space-8); }
  .dropbar__link { justify-self: start; }

  .worlds { grid-template-columns: repeat(2, 1fr); gap: var(--now-space-6); }

  .look { display: flex; flex-direction: column; gap: var(--now-space-6); margin-bottom: var(--now-space-16); }
  .look__media, .look--flip .look__media { aspect-ratio: 3 / 4; }

  .grid-products { grid-template-columns: repeat(2, 1fr); gap: var(--now-space-6); }

  .touchband { min-height: 420px; }
  .touchband__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--now-space-6); }
  .touchband__photo { display: none; }

  .service { grid-template-columns: repeat(2, 1fr); }
  .service__cell { border-right: 0; padding-inline: 0 !important; border-bottom: var(--now-line-hairline) solid var(--now-border-default); }

  .subscribe { display: flex; flex-direction: column; align-items: stretch; gap: var(--now-space-8); }
  .subscribe__form { flex-direction: column; align-items: stretch; }

  .footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: var(--now-space-8); }

  .pdp { display: flex; flex-direction: column; gap: var(--now-space-8); }
  .pdp__info { position: static; }
  .pdp__gallery {
    grid-template-columns: 1fr;
    margin-inline: calc(-1 * var(--now-layout-margin-mobile));
    gap: var(--now-space-2);
  }
  .pdp__thumbs {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: var(--now-layout-margin-mobile);
    order: 2;
  }
  .pdp__thumbs::-webkit-scrollbar { display: none; }
  .pdp__thumb { flex: 0 0 64px; }

  .made__inner { display: flex; flex-direction: column; gap: var(--now-space-6); }
  .made__media { aspect-ratio: 3 / 4; }

  .buybar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 76;
    align-items: center;
    justify-content: space-between;
    gap: var(--now-space-4);
    padding: var(--now-space-3) var(--now-layout-margin-mobile);
    padding-bottom: calc(var(--now-space-3) + env(safe-area-inset-bottom));
    background: var(--now-bg-canvas);
    border-top: var(--now-line-hairline) solid var(--now-border-default);
  }
  .buybar__name { font-size: var(--now-type-body-sm-size); }
  .buybar .btn { flex: 0 0 auto; }
  /* пока открыта карточка, нижняя навигация уступает место покупке */
  body:has(.buybar) .mobilenav { display: none; }

  .account__tabs { gap: var(--now-space-6); overflow-x: auto; scrollbar-width: none; }
  .account__tabs::-webkit-scrollbar { display: none; }
  .account__tabs a { white-space: nowrap; }
  .account__out { margin-left: var(--now-space-4); }
  .account__head { flex-direction: column; gap: var(--now-space-2); }
  .savedrow { grid-template-columns: 48px 1fr; }
  .savedrow__right { grid-column: 1 / -1; justify-content: space-between; }
  .addressform { flex-direction: column; align-items: stretch; }

  .soon__form { flex-direction: column; align-items: stretch; }

  .cartbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 76;
    align-items: center;
    justify-content: space-between;
    gap: var(--now-space-4);
    padding: var(--now-space-3) var(--now-layout-margin-mobile);
    padding-bottom: calc(var(--now-space-3) + env(safe-area-inset-bottom));
    background: var(--now-bg-canvas);
    border-top: var(--now-line-hairline) solid var(--now-border-default);
  }
  .cartbar__sum { font-size: var(--now-type-body-md-size); }
  .cartbar .btn { flex: 0 0 auto; }
  /* пока видна кнопка оформления, нижняя навигация уступает место */
  body:has(.cartbar) .mobilenav { display: none; }
  body:has(.cartbar) .protobadge { bottom: 76px; }
  .cartpage__summary .btn--block { display: none; }

  .about__two { grid-template-columns: 1fr; gap: var(--now-space-4); }
  .about__worlds { grid-template-columns: 1fr; gap: var(--now-space-4); }
  .about__touch { padding-block: var(--now-space-16); margin-block: var(--now-space-16); }

  .cartpage { display: flex; flex-direction: column-reverse; gap: var(--now-space-8); }
  .cartpage__summary { position: sticky; top: var(--now-header-height); z-index: 40; padding: 0; border: 0; align-self: stretch; }
  .summary__toggle {
    display: flex;
    gap: var(--now-space-4);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--now-space-4);
    background: var(--now-bg-surface);
    border: 1px solid var(--now-border-default);
  }
  .summary__body {
    display: none;
    padding: var(--now-space-4);
    border: 1px solid var(--now-border-default);
    border-top: 0;
    background: var(--now-bg-canvas);
  }
  .cartpage__summary.is-open .summary__body { display: flex; }

  .pickmap { height: 9rem; }

  .modal { padding: var(--now-space-6); top: 6vh; max-height: 86vh; }

  .subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--now-layout-margin-mobile));
    padding-inline: var(--now-layout-margin-mobile);
    gap: var(--now-space-6);
  }
  .subnav::-webkit-scrollbar { display: none; }
  .chip, .subnav button { white-space: nowrap; }

  /* фильтры уезжают в полноэкранную панель */
  .filters:not(.filters--panel) { display: none; }
  .filters__open { display: inline-flex; width: 100%; margin-block: var(--now-space-6); }

  .touchlinks { flex-direction: column; align-items: flex-start; gap: var(--now-space-6); }
  .objectsbtn { margin-left: -16px; }

  .gridbreak__inner { display: flex; flex-direction: column; gap: var(--now-space-6); }
  .gridbreak__media { aspect-ratio: 3 / 4; }
  .neighbours { grid-template-columns: 1fr; gap: var(--now-space-4); }

  .mobilenav {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 75;
    background: var(--now-bg-canvas);
    border-top: var(--now-line-hairline) solid var(--now-border-default);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobilenav .tabs { display: flex; justify-content: space-around; gap: 0; }
  .mobilenav .tab { padding: 16px 6px; min-width: 44px; min-height: 44px; letter-spacing: 0.12em; }
  .mobilenav .tab__fill, .mobilenav .tab__frame, .mobilenav .tab__hint { display: none; }

  body { padding-bottom: 62px; }
  .protobadge { bottom: 76px; max-width: calc(100% - 2 * var(--now-space-4)); }

  .agegate__panel { padding: var(--now-space-8); }
  .agegate__actions { flex-direction: column; }

  .cookiebar {
    left: var(--now-space-4);
    right: var(--now-space-4);
    bottom: 76px;
    width: auto;
  }
  body:has(.buybar) .cookiebar { bottom: 88px; }
  body:has(.buybar) .protobadge { bottom: 88px; }
}

/* ---------- письма ---------- */
.emails { padding-block: var(--now-space-16) var(--now-space-16); }
.emails__lead { max-width: 44ch; color: var(--now-text-secondary); margin-top: var(--now-space-4); }
.emails__grid {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: var(--now-space-12);
  margin-top: var(--now-space-12);
  align-items: start;
}
.emails__list { display: flex; flex-direction: column; }
.emails__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  background: none;
  border: 0;
  border-top: var(--now-line-hairline) solid var(--now-border-default);
  padding: var(--now-space-4) 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.emails__item:last-of-type { border-bottom: var(--now-line-hairline) solid var(--now-border-default); }
.emails__item b { font-weight: 400; font-size: var(--now-type-body-sm-size); }
.emails__item span { font-size: var(--now-type-micro-size); color: var(--now-text-secondary); }
.emails__item[aria-pressed="true"] b { border-bottom: 1px solid var(--now-text-primary); align-self: flex-start; }
.emails__note { font-size: var(--now-type-micro-size); color: var(--now-text-secondary); margin-top: var(--now-space-4); }

.emails__inbox {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--now-space-4) var(--now-space-6);
  border: 1px solid var(--now-border-default);
  margin-bottom: var(--now-space-4);
}
.emails__inbox b { font-weight: 400; }
.emails__inbox span:last-child { font-size: var(--now-type-body-sm-size); color: var(--now-text-secondary); }
.emails__frame { width: 100%; height: 70vh; border: 1px solid var(--now-border-default); background: #F4F0E8; }

@media (max-width: 899px) {
  .emails__grid { grid-template-columns: 1fr; gap: var(--now-space-8); }
  .emails__frame { height: 60vh; }
}

/* ---------- S: телефон ---------- */
@media (max-width: 599px) {
  :root { --now-layout-margin-mobile: 1rem; }

  .grid-products { gap: var(--now-space-4); }
  .worlds { grid-template-columns: 1fr; }
  .service { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .about__worlds { grid-template-columns: 1fr; }
  .paybox__grid { grid-template-columns: 1fr; }
  .wordmark { width: 7.5rem; }
}

/* <picture> — обёртка над <img> ради выбора формата, а не элемент
   раскладки. Без display:contents она создаёт собственный бокс, и
   всё, что рассчитано на img внутри контейнера — object-fit,
   абсолютное позиционирование, — перестаёт работать. */
picture { display: contents; }