/* =========================================================================
   MONARQUE LADY — хаб участницы. Стили экрана ?showcase=studio.
   Источник истины: CONCEPT.md §1.5 (вкладки по сайтам, карточка 9:16
   правый сайдбар с диалогами), §1.5.3 (только диалоги выбранного сайта
   новые сверху), §1.4 (действие: включает/выключает показ карточки).
   Правила и ограничения:
   • Цвета берутся из токенов темы (sites.css §14), чтобы Студия жила
     в палитре своего сайта и не ломала контраст. Жёстких hex минимум:
     только там, где нужен цвет статуса (новый / ответили / отклонён).
   • Hover меняет ТОЛЬКО цвет и тень. Никаких transform/translate/scale
     и сдвигов — правило владельца.
   • Сетка «контент + сайдбар»; на узких экранах сайдбар уходит вниз.
   • Карточка 9:16 — общий компонент (.mnq-card из cards.css), здесь только
     рамка-контейнер, чтобы не дублировать размеры компонента.
   ========================================================================= */
/* ---------------------------------------------------------------- шапка --- */
.studio-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.studio-head h1 {
  margin: .2rem 0 .3rem;
  font-family: var(--site-serif, var(--font-display));
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.15;
  color: var(--ink);
}
.studio-head__sub {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted);
}
.studio-head__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
/* --------------------------------------------------- сетка кабинет+сайдбар --- */
.studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1.25rem;
  align-items: start;
}
.studio-main { min-width: 0; }
.studio-aside { min-width: 0; }
/* ---------------------------------------------------------------- вкладки --- */
.studio-tabs {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  padding: .35rem;
  margin-bottom: .9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.studio-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  /* hover — только цвет, без движения */
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.studio-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 8%, transparent);
}
.studio-tab.is-active {
  color: var(--site-on-accent, #111);
  background: var(--site-acc, var(--acc));
  border-color: var(--site-acc, var(--acc));
}
.studio-tab:focus-visible {
  outline: 2px solid var(--site-acc, var(--acc));
  outline-offset: 2px;
}
.studio-tab__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.studio-tab__dot.is-on { opacity: 1; }
.studio-tab__dot.is-off { opacity: .25; }
/* Счётчик диалогов: показывает, что на вкладке есть запросы */
.studio-tab__count {
  min-width: 1.1rem;
  padding: 0 .3rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 22%, transparent);
  color: inherit;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.studio-tab.is-active .studio-tab__count {
  background: color-mix(in srgb, var(--site-on-accent, #111) 20%, transparent);
}
/* ------------------------------------------------------- панель вкладки --- */
.studio-panel[hidden] { display: none; }
.studio-panel__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem;
  margin-bottom: .9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  flex-wrap: wrap;
}
.studio-panel__info {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  min-width: 0;
}
.studio-panel__site {
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
}
.studio-panel__status {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.studio-panel__status.is-on { color: var(--site-acc, var(--acc)); }
.studio-panel__status.is-off { color: var(--muted); }
.studio-panel__counters {
  margin: .1rem 0 0;
  font-size: .74rem;
  color: var(--muted);
}
/* --------------------------------------------------- круглая миниатюра ---
   Владелец: миниатюра КРУГЛАЯ, не квадратная. Кольцо рисуем псевдоэлементом
   чтобы оно не влияло на раскладку. */
.studio-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 14%, var(--surface));
}
.studio-thumb__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.studio-thumb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--site-acc, var(--acc));
  pointer-events: none;
}
/* Скрытый показ — приглушаем, но миниатюру оставляем читаемой */
.studio-thumb.is-off .studio-thumb__media { opacity: .45; }
.studio-thumb.is-off .studio-thumb__ring {
  border-color: var(--line-strong, var(--line));
  border-style: dashed;
}
.studio-thumb__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: .1rem 0;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--site-on-accent, #111);
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 88%, transparent);
}
/* -------------------------------------------------- переключатель показа --- */
.studio-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .3rem;
  padding: .35rem .6rem .35rem .4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.studio-toggle:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--site-acc, var(--acc)) 55%, var(--line));
}
.studio-toggle__track {
  position: relative;
  display: block;
  width: 30px;
  height: 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transition: background-color .18s ease;
}
.studio-toggle__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  transition: left .18s ease;
}
/* Позиция точки — состояние, а не hover, поэтому движение допустимо */
.studio-toggle.is-on .studio-toggle__track {
  background: var(--site-acc, var(--acc));
}
.studio-toggle.is-on .studio-toggle__dot { left: 16px; }
.studio-toggle.is-on { color: var(--ink); }
/* -------------------------------------------------------- карточка 9:16 ---
   Саму карточку рисует общий компонент (.mnq-card, cards.css). Здесь только
   ограничиваем ширину колонки, чтобы пропорция 9:16 держалась. */
.studio-panel__card {
  display: flex;
  justify-content: center;
}
.studio-panel__card .mnq-card {
  width: min(100%, 340px);
  max-width: 340px;
}
/* --------------------------------------------------------- правый сайдбар --- */
.studio-side-wrap[hidden] { display: none; }
.studio-side {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}
.studio-side__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--line);
}
.studio-side__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
}
.studio-side__site {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--site-acc, var(--acc));
}
.studio-side__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .7rem;
  max-height: 640px;
  overflow-y: auto;
}
.studio-side__note {
  margin: 0;
  padding: .65rem .9rem .8rem;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  line-height: 1.5;
  color: var(--muted);
}
/* ------------------------------------------------------- плашка диалога --- */
.sd-card {
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2, color-mix(in srgb, var(--site-acc, var(--acc)) 5%, transparent));
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* hover — только цвет и тень, позиция не меняется */
.sd-card:hover {
  border-color: color-mix(in srgb, var(--site-acc, var(--acc)) 50%, var(--line));
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .55);
}
/* Новый запрос — акцентная левая грань, без движения */
.sd-card.is-new {
  border-inline-start: 3px solid var(--site-acc, var(--acc));
}
.sd-card.is-accepted { border-inline-start: 3px solid #2f8f6b; }
.sd-card.is-declined { border-inline-start: 3px solid var(--line-strong, var(--line)); opacity: .8; }
.sd-card__top {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.sd-card__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 18%, transparent);
}
.sd-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sd-card__avatar-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: .8rem;
  font-weight: 800;
  color: var(--site-acc, var(--acc));
}
.sd-card__head {
  min-width: 0;
  flex: 1 1 auto;
}
.sd-card__title {
  display: block;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-card__meta {
  display: block;
  margin-top: .1rem;
  font-size: .7rem;
  color: var(--muted);
}
/* Статус: компактная плашка, цвет по смыслу */
.sd-card__status {
  flex: 0 0 auto;
  padding: .1rem .4rem;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--muted);
}
.sd-card.is-new .sd-card__status {
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 22%, transparent);
  color: var(--ink);
}
.sd-card.is-accepted .sd-card__status {
  background: rgba(47, 143, 107, .16);
  color: #1f6b4f;
}
/* На тёмных сайтах зелёный статус должен светлеть, иначе проваливается */
html[data-showcase="studio"] .sd-card.is-accepted .sd-card__status {
  color: #7fd3b2;
  background: rgba(47, 143, 107, .2);
}
.sd-card__msg {
  margin: .45rem 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink-2, var(--muted));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sd-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .5rem;
}
.sd-card__date {
  font-size: .68rem;
  color: var(--muted);
}
.sd-card__open {
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.sd-card__open:hover {
  color: var(--site-on-accent, #111);
  background: var(--site-acc, var(--acc));
  border-color: var(--site-acc, var(--acc));
}
/* ---------------------------------------------- пустое состояние и сироты --- */
.sd-empty {
  padding: 1rem .9rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
  color: var(--muted);
}
.sd-empty b {
  display: block;
  margin-bottom: .25rem;
  font-size: .84rem;
  color: var(--ink);
}
.sd-empty p {
  margin: 0 0 .6rem;
  font-size: .74rem;
  line-height: 1.5;
}
.sd-orphan {
  padding: .7rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sd-orphan__label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
/* ------------------------------------------------------------- адаптив --- */
/* Планшет: сайдбар уходит под контент */
@media (max-width: 1080px) {
  .studio-layout { grid-template-columns: minmax(0, 1fr); }
  .studio-aside { order: 2; }
  .studio-main { order: 1; }
  .studio-side__body { max-height: none; }
}
@media (max-width: 720px) {
  .studio-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .studio-head__actions { width: 100%; }
  .studio-head__actions .btn { flex: 1 1 auto; }
  /* Вкладки — горизонтальная прокрутка, чтобы шесть названий влезли */
  .studio-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .studio-tabs::-webkit-scrollbar { display: none; }
  .studio-tab { flex: 0 0 auto; }
  .studio-panel__head { gap: .7rem; }
  .studio-thumb { width: 56px; height: 56px; }
  .studio-panel__card .mnq-card { width: 100%; max-width: none; }
}
@media (max-width: 420px) {
  .studio-thumb { width: 48px; height: 48px; }
  .studio-tab { padding: .45rem .65rem; font-size: .76rem; }
  .sd-card__status { display: none; }
}
/* -------------------------------------------------- статус карты в шапке --- */
/* Плашка тарифа участницы (user.card_label из /api/my-cards):
   «ПОДПИСКА ELITE» — как карта Резидента на его стороне. */
.studio-head__tier {
  display: inline-block;
  padding: .06rem .4rem;
  border: 1px solid color-mix(in srgb, var(--site-acc, var(--acc)) 55%, transparent);
  border-radius: 4px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--site-acc, var(--acc));
  vertical-align: middle;
}
/* ===========================================================================
   Плашки публичной страницы MONARQUE LADY (CONCEPT.md §1.5.5.1b)
   Суть клуба: промовизитка на сайтах, список желаний и подарки резидентов
   знакомства, поездки, поддержка своего дела, конкурс и карьера. Второй блок —
   этапы создания промомедиа в Студии.
   Карточки с фоновыми изображениями: фон затемняется градиентом, чтобы текст
   оставался контрастным. Тексты приходят из настроек (админка), поэтому
   вёрстка не зависит от их длины: карточки выравниваются по сетке.
   ========================================================================= */

/* =========================================================================
   ЕДИНАЯ ТИПОГРАФИЧЕСКАЯ ШКАЛА БЛОКОВ LADY
   Требование владельца: «У блоков должны быть единые стили текстов и линий.»
   Эталон — блок 01 (парящий текст): он самый крупный по площади.

   Два уровня, чтобы иерархия была, а разнобоя не было:
     A — крупные развороты: 01 парящий, 02/03 duo, 04 панорама, блок подарков;
     B — компактные: 05/06 split, этапы 1–4.
   Текст (body) у всех блоков один и тот же.

   Шрифт — Manrope у всех заголовков. Обоснование: в styles.css блок §25
   «MODERN PLATFORM» явно объявляет «типографика без серифов и декора» и
   переопределяет --font-display на --font-body (Manrope). CONCEPT.md
   требований к антикве не содержит, а владелец просил единообразие, а не
   смену шрифта. Поэтому serif-стек из старых правил убран как мёртвый:
   он и так не применялся, но вводил в заблуждение.
   ========================================================================= */
#cards,
#lady-rest,
#lady-gifts,
#studio-steps {
  /* уровень A — крупные развороты */
  --lady-t-lg: clamp(1.48rem, 2.1vw, 1.92rem);
  /* уровень B — компактные */
  --lady-t-sm: 1.38rem;
  /* текст — один для всех */
  --lady-t-body: 0.96rem;
  --lady-lh-lg: 1.18;
  --lady-lh-body: 1.68;
  --lady-ls: -0.01em;
  /* линии */
  --lady-rule-w: 56px;
  --lady-rule-h: 1px;
  --lady-rule-grad: linear-gradient(90deg, var(--site-acc, #e0a3b4), transparent);
  /* отступы: тег → заголовок → линия → текст */
  --lady-gap-meta: 12px;
  --lady-gap-title: 14px;
  --lady-gap-rule: 16px;
}

.lady-plates {
  margin-top: 20px;
}

/* Просвет логотипы → первый блок. Складывался из padding-bottom экосекции
   (32px) + margin-top (20px) + padding-top .section (63.36px) + margin ряда
   (8px) = 123px. Владелец: «Просвет между логотипами и первым блоком
   уменьшить нужно». Ниже — 16 + 8 + 24 + 8 = 56px, в требуемых 40–56px.
   Нижний отступ секции не трогаем: он отделяет блок от следующего разворота. */
#cards.lady-plates {
  margin-top: 8px;
  padding-top: 24px;
  /* воздух до блока подарков целиком держит сам блок (.lady-gifts 52px) */
  padding-bottom: 0;
}

/* Секция с оставшимися плашками 03–06: верхняя половина просвета от блока
   подарков (26 + 26 = 52px), чтобы разворот не прилипал к следующему блоку. */
#lady-rest.lady-plates {
  /* margin-top базового .lady-plates (20px) здесь лишний: он ломал симметрию
     просветов. Воздух сверху держит .lady-gifts (52px). */
  margin-top: 0;
  padding-top: 0;
}

.lady-head {
  position: relative;
  max-width: 820px;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--site-border-strong, rgba(224, 163, 180, 0.34));
}

.lady-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 96px;
  height: 2px;
  background: var(--site-acc, #e0a3b4);
}

.lady-head__title {
  margin: 10px 0 12px;
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--site-text, #fdf1f4);
}

.lady-head__lead {
  margin: 0;
  max-width: 64ch;
  color: var(--site-muted, #c2a3ad);
  font-size: 1rem;
  line-height: 1.65;
}

/* --- Секция 1: асимметричная журнальная композиция (12 колонок) ------------ */
.lady-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.lady-plate {
  position: relative;
  grid-column: 1 / -1;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--site-border-strong, rgba(224, 163, 180, 0.34));
  border-top: 2px solid var(--site-acc, #e0a3b4);
  background:
    linear-gradient(
      165deg
      color-mix(in srgb, var(--site-acc, #e0a3b4) 10%, var(--site-surface-2, #3a2028)) 0%
      var(--site-surface, #301a20) 48%
      var(--site-bg-2, #241217) 100%
    );
  box-shadow: 0 28px 68px -32px rgba(0, 0, 0, 0.9);
  transition: border-color 0.24s ease, box-shadow 0.24s ease, background-color 0.24s ease;
}

.lady-plate:hover {
  border-color: var(--site-acc, #e0a3b4);
  box-shadow:
    0 32px 76px -28px rgba(0, 0, 0, 0.95)
    0 0 26px -10px color-mix(in srgb, var(--site-acc, #e0a3b4) 48%, transparent);
}

/* Медиа-кадр и стеклянный бейдж номера */
.lady-plate__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  background: #14090c;
}

.lady-plate__bg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background-size: cover;
  background-position: center;
}

.lady-plate__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg
    rgba(16, 7, 10, 0.28) 0%
    transparent 38%
    rgba(16, 7, 10, 0.55) 100%
  );
  pointer-events: none;
}


/* Текстовое тело: мета-строка, заголовок, акцентный разделитель, текст */
.lady-plate__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 36px;
  gap: 0;
}

/* Мета-строка плашки. После удаления бейджей-номеров в ней остался один
   элемент — тег витрины, поэтому gap больше не нужен. */
.lady-plate__meta {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
}


.lady-plate__tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-acc, #e0a3b4);
}

.lady-plate__title {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: var(--lady-t-lg, clamp(1.48rem, 2.1vw, 1.92rem));
  font-weight: 600;
  line-height: var(--lady-lh-lg, 1.18);
  letter-spacing: var(--lady-ls, -0.01em);
  color: var(--site-text, #fdf1f4);
  margin: 0 0 var(--lady-gap-title, 14px);
}

.lady-plate__rule {
  width: var(--lady-rule-w, 56px);
  height: var(--lady-rule-h, 1px);
  margin: 0 0 var(--lady-gap-rule, 16px);
  background: var(--lady-rule-grad, linear-gradient(90deg, var(--site-acc, #e0a3b4), transparent));
}

.lady-plate__text {
  font-size: var(--lady-t-body, 0.96rem);
  line-height: var(--lady-lh-body, 1.68);
  color: var(--site-text-soft, #e8cdd5);
  margin: 0;
}

/* 1. Lead-разворот (Полоса 01): широкая витринная композиция */
.lady-plate--lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 360px;
}

.lady-plate--lead .lady-plate__media {
  border-right: 1px solid var(--site-border, rgba(224, 163, 180, 0.22));
}

.lady-plate--lead .lady-plate__body {
  padding: 40px 44px;
}

/* Блок 01 — эталон шкалы, отдельного размера не имеет. */
.lady-plate--lead .lady-plate__title {
  font-size: var(--lady-t-lg, clamp(1.48rem, 2.1vw, 1.92rem));
}

/* 2–3. Парный разворот (Полосы 02 и 03): 2 колонки бок о бок */
.lady-plate--duo {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  min-height: 450px;
}

.lady-plate--duo .lady-plate__media {
  height: 230px;
  min-height: 230px;
  flex: 0 0 230px;
  border-bottom: 1px solid var(--site-border, rgba(224, 163, 180, 0.22));
}

.lady-plate--duo .lady-plate__body {
  flex: 1 1 auto;
  justify-content: flex-start;
  padding: 28px 30px 32px;
}

/* 4. Панорамная полоса (Полоса 04): текст слева, фото справа */
.lady-plate--panorama {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 54% 46%;
  min-height: 320px;
}

.lady-plate--panorama .lady-plate__media {
  order: 2;
  grid-column: 2;
  grid-row: 1;
  border-left: 1px solid var(--site-border, rgba(224, 163, 180, 0.22));
}

.lady-plate--panorama .lady-plate__body {
  order: 1;
  grid-column: 1;
  grid-row: 1;
  padding: 36px 42px;
}

/* 5–6. Финальный асимметричный разворот (Полосы 05 и 06): 2 карточки в ряд */
.lady-plate--split {
  grid-column: span 6;
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 280px;
}

.lady-plate--split .lady-plate__media {
  border-right: 1px solid var(--site-border, rgba(224, 163, 180, 0.22));
}

.lady-plate--split .lady-plate__body {
  padding: 26px 28px;
}

.lady-plate--split .lady-plate__title {
  font-size: var(--lady-t-sm, 1.38rem);
  line-height: var(--lady-lh-lg, 1.18);
  letter-spacing: var(--lady-ls, -0.01em);
}

/* 3-бис. Широкая полоса (Полоса 03): плашка одинока в своей паре, поэтому
   занимает весь ряд — пустой половины справа не остаётся.
   Раскладка зеркальна панораме: медиа СЛЕВА, текст СПРАВА. Ряды 03 и 04
   чередуют сторону кадра, поэтому лента не выглядит повтором одного шаблона. */
.lady-plate--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 320px;
}

.lady-plate--wide .lady-plate__media {
  order: 1;
  grid-column: 1;
  grid-row: 1;
  border-right: 1px solid var(--site-border, rgba(224, 163, 180, 0.22));
}

.lady-plate--wide .lady-plate__body {
  order: 2;
  grid-column: 2;
  grid-row: 1;
  padding: 36px 42px;
}

@media (max-width: 760px) {
  /* На телефоне — та же одноколоночная раскладка, что у остальных плашек:
     кадр сверху, текст под ним. */
  .lady-plate--wide {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .lady-plate--wide .lady-plate__media {
    order: 0;
    height: 210px;
    min-height: 210px;
    flex: 0 0 210px;
    border-right: 0;
    border-bottom: 1px solid var(--site-border, rgba(224, 163, 180, 0.22));
  }
  .lady-plate--wide .lady-plate__body {
    order: 1;
    padding: 22px 20px 24px;
  }
}

/* --- Секция 2: 4 этапа создания промовизитки в Студии (2×2 матрица) ------- */
.lady-grid--steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.lady-plate--step {
  grid-column: auto;
  display: grid;
  /* Медиа фиксированной ширины 160px (--lady-thumb-w) — та же стандартная
     миниатюра 9:16, что в блоках подарков и путешествий. Тело забирает
     остаток ширины плитки. */
  grid-template-columns: var(--lady-thumb-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 290px;
}

.lady-step__rail {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  /* после удаления пилюли с номером в рельсе один тег — прижимаем влево */
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--site-border, rgba(224, 163, 180, 0.22));
  background: rgba(16, 7, 10, 0.52);
}


.lady-step__tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-muted, #c2a3ad);
}

.lady-step__media {
  grid-column: 1;
  grid-row: 2;
  /* Стандартная миниатюра 9:16: 160 × 284.4. Размер фиксирован на всех
     ширинах экрана — требование владельца «фото должны быть 9:16»
     и «картинки везде наши стандартные миниатюры 9:16». */
  width: var(--lady-thumb-w);
  height: auto;
  aspect-ratio: 9 / 16;
  min-height: 0;
  align-self: start;
  border-right: 1px solid var(--site-border, rgba(224, 163, 180, 0.22));
}

.lady-step__body {
  grid-column: 2;
  grid-row: 2;
  padding: 24px 26px;
}

.lady-plate--step .lady-plate__title {
  font-size: var(--lady-t-sm, 1.38rem);
  line-height: var(--lady-lh-lg, 1.18);
  letter-spacing: var(--lady-ls, -0.01em);
  margin-bottom: var(--lady-gap-title, 14px);
}

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width: 1120px) {
  .lady-plate--split {
    grid-column: 1 / -1;
  }

  .lady-grid--steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .lady-grid,
  .lady-grid--steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .lady-plate,
  .lady-plate--lead,
  .lady-plate--duo,
  .lady-plate--panorama,
  .lady-plate--split {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .lady-plate__media,
  .lady-plate--lead .lady-plate__media,
  .lady-plate--duo .lady-plate__media,
  .lady-plate--panorama .lady-plate__media,
  .lady-plate--split .lady-plate__media {
    order: 0;
    height: 210px;
    min-height: 210px;
    flex: 0 0 210px;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--site-border, rgba(224, 163, 180, 0.22));
  }

  .lady-plate__body,
  .lady-plate--lead .lady-plate__body,
  .lady-plate--duo .lady-plate__body,
  .lady-plate--panorama .lady-plate__body,
  .lady-plate--split .lady-plate__body {
    order: 1;
    padding: 22px 20px 24px;
  }

  .lady-plate--step {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .lady-step__media {
    /* На телефоне плитка в одну колонку: медиа остаётся той же
       миниатюрой 9:16 — 160 × 284.4. */
    width: var(--lady-thumb-w);
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    aspect-ratio: 9 / 16;
    border-right: 0;
    border-bottom: 1px solid var(--site-border, rgba(224, 163, 180, 0.22));
  }

  .lady-step__body {
    padding: 20px;
  }
}

/* ===========================================================================
   РЯД ПРОМОВИЗИТОК + ПАРЯЩИЙ ТЕКСТОВЫЙ БЛОК (решение владельца)
   «УМЕНЬШИ КАРТОЧКИ НА 25%. ПОСТАВЬ СЛЕВА ТРИ КАРТОЧКИ А СПРАВА ТЕКСТ!
    ПАРЯЩИЙ - ЗНАЧИТ БЕЗ ОКАНТОВКИ, БЕЗ ФОНА, БЕЗ НИХУЙ»
   Уточнения владельца: «Нужно не 3 карточки в первом блоке, а 5.»
   «ДЕФЕКТ. Ограничить сужение!» (текстовая колонка не уже 320px).

   КАСКАД (порядок приоритетов жёсткий):
     1. текстовая колонка НЕ уже 320px — никогда;
     2. заголовок максимум в 2 строки;
     3. 5 карточек, если помещается;
     4. 4 карточки, если 5 не влезают;
     5. 3 карточки, если 4 не влезают;
     6. текст вниз — только когда 3 карточки + 320px текста не влезают.

   ПОЧЕМУ КОНТЕЙНЕРНЫЕ ЗАПРОСЫ, А НЕ @media (max-width):
   правый сайдбар новостей авто-раскрывается на >= 1024px (токен
   --mnq-sb-open-min-width) и забирает 360px у #view. Доступная ширина из-за
   этого НЕ монотонна по вьюпорту: на 1024px она 596px, на 1000px — 932px.
   Вьюпорт-медиазапрос на таком стыке дал бы инверсию каскада (на более узком
   экране больше карточек). Контейнерный запрос считает ФАКТИЧЕСКУЮ ширину
   блока, поэтому порядок 5 → 4 → 3 → вниз соблюдается всегда.

   ЧИСЛА (карточка 143×255 = 191×340 минус 25%, зазор 10px, текст 320px):
     трек N карточек = N×143 + (N−1)×10
       5 → 755      4 → 602      3 → 449
     нужно доступной ширины (трек + зазор колонок 32 + текст 320):
       5 → 1107     4 → 954      3 → 801
     меньше 801 → текст вниз.

   ВАЖНО ПРО РАЗМЕР КАРТОЧКИ: при открытом сайдбаре на 1440 доступно 1012px
   а 5×143 + 32 + 320 = 1107px — не влезает на 95px. Чтобы владелец получил
   ПЯТЬ карточек (приоритет 3 выше, чем «4 карточки»), карточки в этой полосе
   сжимаются в диапазоне 124…143px: 5×124 + 40 = 660, + 32 + 320 = 1012 — ровно
   впритык. На 1536px и шире (сайдбар открыт, доступно >= 1108px) карточки
   снова 143px. Пропорция 9:16 сохраняется при любом размере.
   =========================================================================== */

/* Секция — контейнер: каскад считается по её реальной ширине. */
.lady-plates {
  container-type: inline-size;
  container-name: ladyrow;
}

/* По умолчанию — 5 карточек слева, текст справа не уже 320px. */
.lady-row {
  position: relative;
  display: grid;
  /* Трек ровно под четыре карточки: 4 × 140 + 3 × 10 = 590px.
     Текст забирает остаток и не уже 300px. На 1440 ряд 1012 = 670 + 32 + 310. */
  grid-template-columns: minmax(0, 670px) minmax(300px, 1fr);
  gap: 32px;
  align-items: center;
  margin-top: 8px;
}

/* Слева — карточки 9:16 ФИКСИРОВАННОГО размера var(--lady-thumb-w) = 140px
   как у подарков и путешествий (владелец: «Размер миниатюр не должен меняться
   при изменении ширины экрана... на мобилках помещались две миниатюры в ряд
   с запасом»). Меняется только число видимых карточек, размер — никогда. */
/* РОВНО ЧЕТЫРЕ карточки (владелец: «Вот тут просто оставить 4 миниатюры
   вместо 5-ти»). Размер фиксированный 140px, поэтому четыре карточки
   занимают 4 × 140 + 3 × 10 = 590px — ровно ширину трека.
   Пятая карточка в разметке остаётся (данные в JS не режем), но не
   показывается ни на какой ширине экрана. */
/* Внешний вид карточки задан единым модулем (css/cards.css). Здесь только
   раскладка ряда: сколько карточек в строке и с каким просветом. */
.lady-row__track {
  display: grid;
  grid-template-columns: repeat(4, var(--lady-thumb-w));
  gap: 10px;
  overflow: hidden;
}

/* В ряду показываем четыре карточки: пятая и следующие не выводятся. */
.lady-row__track > .mnq-card:nth-child(n + 5) {
  display: none;
}

/* Парящий текстовый блок: без рамки, без фона, без тени — только текст. */
.lady-row__float {
  position: relative;
  max-width: 560px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lady-row__float .lady-plate__title {
  margin-bottom: var(--lady-gap-title, 14px);
}

/* ---------- текст вниз: 590px трека + 320px текста уже не влезают ----------
   Число карточек здесь не меняется — их по-прежнему четыре (пятая скрыта
   общим правилом выше). Меняется только расположение: текст уходит под ряд
   а карточки листаются горизонтально. */
@container ladyrow (max-width: 941px) {
  .lady-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lady-row__float {
    max-width: none;
  }

  .lady-row__track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .lady-row__track::-webkit-scrollbar {
    display: none;
  }

  .lady-row__track .mnq-card {
    flex: 0 0 var(--lady-thumb-w);
    width: var(--lady-thumb-w);
    scroll-snap-align: start;
  }
}

/* Промежуточный диапазон: контейнер уже 670px (трек из четырёх карточек
   по 160 + три просвета по 10) — тоже сетка 2×2, без обрезки. */
@container ladyrow (max-width: 700px) {
  .lady-row__track {
    display: grid;
    grid-template-columns: repeat(2, var(--lady-thumb-w));
    gap: 10px;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

/* МОБИЛКА: карточки промовизитки тоже сеткой 2×2 (владелец: «На мобилках
   выводить их не в ряд, а гридами 2х2»). Размер тот же — 160px. */
@media (max-width: 620px) {
  .lady-row__track {
    display: grid;
    grid-template-columns: repeat(2, var(--lady-thumb-w));
    gap: var(--lady-thumb-gap);
    overflow-x: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
}

@media (max-width: 375px) {
  .lady-row__track { column-gap: 8px; }
}

@media (max-width: 359px) {
  .lady-row__track { grid-template-columns: var(--lady-thumb-w); }
}

/* ===========================================================================
   ЛОГОТИПЫ ЭКОСИСТЕМЫ между хиро и первым промоблоком (решение владельца)
   «7 логотипов сайтов экосистемы. Логотипы притушенные, монохромные.
    При наведении появляется цвет и открывается стильный кастомный тултип.»

   ЦВЕТА: --eco-accent ниже — дословные копии --site-accent из css/sites.css
   (бренд-цвет витрины). Продублированы здесь потому, что токены sites.css
   объявлены на html[data-showcase="..."], а на странице LADY активен только
   один из них (studio). Правки в sites.css не вносились.

   ПОЧЕМУ НЕТ --site-mark-filter: раньше логотип красился filter'ом, наложенным
   на золотой SVG, а тултип — готовым hex-акцентом. Это два независимых
   механизма, и они не совпадали (у miss filter затемнял brightness .82, у
   career hue-rotate 168° давал другой оттенок, чем hex). Владелец: «Цветовой
   акцент некоторых тултипов не совпадает с акцентом логотипов». Теперь оба
   элемента красятся ОДНИМ значением --eco-accent через color/currentColor
   filter для подкраски не используется. Совпадение гарантировано по
   определению. Приглушённый монохром в покое остаётся: grayscale(1) +
   opacity .5 на .lady-ecosystem__lockup.

   §0.0.2: сам логотип при наведении НЕ двигается и размер не меняет.
   Меняются только filter/opacity. Сдвиг на 4px — у тултипа, не у логотипа.
   =========================================================================== */

.lady-ecosystem-section {
  position: relative;
  /* Выше шапки (z-index: 90 в styles.css): секция создаёт stacking context
     и при z-index: 3 шапка перекрывала верх тултипа — пропадало название
     витрины. 95 — выше шапки, но ниже консьержа (100) и модалок (120+). */
  z-index: 95;
  /* Полоса-связка между хиро и контентом, а не отдельная секция с воздухом.
     Просветы по замеру: hero → логотипы ≈ 29px (padding-top не трогаем)
     логотипы → первый блок ≈ 56px. Нижний отступ уменьшен с 32px до 16px:
     вторая половина просвета приходится на #cards (см. правило ниже). */
  padding-block: clamp(20px, 2vw, 30px) 16px;
}

.lady-ecosystem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Зазор подобран по сумме ширин: 7 подписанных локапов ≈ 894px, при 1440
     контейнер 1012px → 6 зазоров по 16px дают 990px и один ряд.
     При 38px (как было для голых монограмм) ряд разваливался на два. */
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0 auto;
  max-width: 100%;
}

/* Один логотип = ссылка + подсказка. Геометрия ссылки не меняется на hover. */
.lady-ecosystem__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-decoration: none;
  border-radius: 10px;
  outline-offset: 4px;
  color: var(--eco-accent, #d9bc7a);
  /* ВАЖНО: filter здесь НЕЛЬЗЯ. Любой filter/transform/backdrop-filter на
     предке создаёт containing block для position:fixed, и тултип внутри
     ссылки начинал отсчитывать top от логотипа, а не от вьюпорта — уезжал
     за пределы экрана. Тонирование живёт на .lady-ecosystem__lockup. */
}

/* Локап: монограмма + словесный знак витрины. У каждой витрины своё имя
   поэтому логотипы отличаются друг от друга, а не повторяют одну «M».
   Здесь же — притушенный монохром и появление цвета на hover. Тултип лежит
   рядом (соседний узел), поэтому filter на локапе его не затрагивает. */
.lady-ecosystem__lockup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.lady-ecosystem__item:hover .lady-ecosystem__lockup,
.lady-ecosystem__item:focus-visible .lady-ecosystem__lockup {
  /* Цвет при наведении — ровно --eco-accent, без filter. Логотип и акцент
     тултипа красятся ОДНИМ значением, поэтому рассинхрона быть не может. */
  filter: none;
  opacity: 1;
}

.lady-ecosystem__mark {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: currentColor;
}

.lady-ecosystem__wordmark {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
}

/* ------------------------------------------------------------------ тултип ---
   Кастомная подсказка над логотипом: тёмная подложка в палитре витрины
   рамка 1px, радиус 10px, акцентная полоска сверху, тонкая тень, указатель
   вниз. Появление — opacity + сдвиг 4px. Сдвиг по горизонтали (--tip-dx)
   пишет JS, чтобы у крайних логотипов подсказка не обрезалась краем экрана. */
.lady-ecosystem__tip {
  /* position: fixed — принципиально: абсолютный тултип у крайнего логотипа
     расширял бы scrollWidth страницы (на 390px давал вылет до 427px), даже
     будучи visibility:hidden. Fixed-элементы в scrollWidth не входят, поэтому
     страница не получает горизонтальный скролл ни на одной ширине.
     Координаты (left/top) и позицию указателя (--tip-arrow-x) считает JS
     в ladyEcosystemBind(): это же даёт точное ограничение по краям экрана. */
  position: fixed;
  left: var(--tip-left, 50%);
  top: var(--tip-top, 0px);
  z-index: 200;
  display: block;
  width: max-content;
  max-width: min(260px, calc(100vw - 24px));
  padding: 12px 14px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--eco-accent, #d9bc7a) 42%, transparent);
  background:
    linear-gradient(180deg
      color-mix(in srgb, var(--eco-accent, #d9bc7a) 9%, #17100f) 0%,
      #120c0d 100%);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.92);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* акцентная полоска сверху */
.lady-ecosystem__tip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: 10px 10px 0 0;
  background: var(--eco-accent, #d9bc7a);
}

/* указатель внизу тултипа, смотрит ВНИЗ на логотип.
   Тултип всегда открывается вверх — переворота вниз нет. */
.lady-ecosystem__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tip-arrow-x, 50%);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  transform: rotate(45deg);
  border-right: 1px solid color-mix(in srgb, var(--eco-accent, #d9bc7a) 42%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--eco-accent, #d9bc7a) 42%, transparent);
  background: #120c0d;
}


.lady-ecosystem__item:hover .lady-ecosystem__tip,
.lady-ecosystem__item:focus-visible .lady-ecosystem__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.lady-ecosystem__tip-name {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eco-accent, #d9bc7a);
}

.lady-ecosystem__tip-text {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(253, 241, 244, 0.82);
}

/* ------------------------------------------------- палитра каждой витрины ---
   Значения дословно из css/sites.css (--site-mark-filter / --site-accent). */
.lady-ecosystem__item[data-site="club"] {
  --eco-accent: #d9bc7a;
}

.lady-ecosystem__item[data-site="miss"] {
  --eco-accent: #b18a3e;
}

.lady-ecosystem__item[data-site="dating"] {
  --eco-accent: #c99a86;
}

.lady-ecosystem__item[data-site="career"] {
  --eco-accent: #8fa6b8;
}

.lady-ecosystem__item[data-site="travel"] {
  --eco-accent: #7fc4b0;
}

.lady-ecosystem__item[data-site="models"] {
  --eco-accent: #b5a8c9;
}

.lady-ecosystem__item[data-site="venture"] {
  --eco-accent: #d8b45a;
}

/* ------------------------------------------------------------- адаптив --- */
@media (max-width: 1024px) {
  .lady-ecosystem {
    gap: clamp(14px, 2.4vw, 28px);
  }
}

/* Планшет: перенос в два ряда (по центру). */
/* Планшет: тоже ОДИН ряд. Раньше здесь стоял max-width: 420px — он и рвал
   полосу на 3 ряда на 768px. Теперь ширина не ограничивается, а логотипы
   делят её поровну: при 768 доступно ~736px → (736 − 6×12)/7 = 94px на
   логотип, подписи читаются свободно. */
@media (max-width: 768px) {
  .lady-ecosystem {
    flex-wrap: nowrap;
    gap: 12px;
    max-width: 100%;
    justify-content: center;
  }

  .lady-ecosystem__item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .lady-ecosystem__lockup {
    min-width: 0;
  }

  .lady-ecosystem__mark {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
  }

  .lady-ecosystem__wordmark {
    font-size: 8px;
    letter-spacing: 0.08em;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .lady-ecosystem__tip {
    max-width: 230px;
    padding: 10px 12px 11px;
  }

  .lady-ecosystem__tip-text {
    font-size: 11px;
  }
}

/* Мобилка: два ряда (4 + 3). Чтобы 7 подписанных логотипов влезли в 390px
   локап разворачивается вертикально: монограмма сверху, имя под ней в две
   строки. Логотипы остаются различимыми — это важно (дефект «семь одинаковых M»). */
/* Мобилка: ВСЕ 7 логотипов в ОДИН ряд, без переноса и без горизонтального
   скролла страницы (владелец: «Устрани перенос блока с фото на нижний ряд»).

   Почему не «только монограмма M»: у всех витрин один и тот же знак M, в покое
   он ещё и обесцвечен (grayscale(1)) — семь одинаковых серых букв. Владелец уже
   называл это дефектом («Все 7 логотипов одинаковые»). Поэтому подпись витрины
   на мобилке СОХРАНЯЕТСЯ, а в один ряд всё влезает за счёт флюидной раскладки.

   Числа: доступно 348px при вьюпорте 390 (контейнер .wrap, поля 21px).
     item = (348 − 6 зазоров × 6px) / 7 = 44.6px   → 7×44.6 + 36 = 348 ✓
     при 360px: (318 − 36) / 7 = 40.3px           → тоже в один ряд ✓
   flex: 1 1 0 + min-width: 0 делят ширину поровну на ЛЮБОМ узком экране
   поэтому перенос невозможен по построению, а не «подобран под 390». */
@media (max-width: 480px) {
  .lady-ecosystem {
    /* nowrap — страховка: ряд не может разорваться */
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    justify-content: center;
  }

  .lady-ecosystem__item {
    /* равные доли, сжатие разрешено — все 7 всегда в одном ряду */
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .lady-ecosystem__lockup {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .lady-ecosystem__mark {
    width: 16px;
    height: 16px;
  }

  .lady-ecosystem__wordmark {
    font-size: 6px;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    /* не даём длинному имени распереть ячейку и сломать ряд */
    max-width: 100%;
  }

  .lady-ecosystem__tip {
    max-width: min(240px, calc(100vw - 24px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lady-ecosystem__lockup,
  .lady-ecosystem__tip {
    transition: none;
  }
}

/* =========================================================================
   БЛОК ПОДАРКОВ — разворот «как подарок превращается в вечер» (#lady-gifts).
   Требование владельца: симметрично первому блоку (там карточки слева, текст
   справа), здесь текст СЛЕВА + медиа СПРАВА, отбито промежутком.

   Последовательность 4 кадров читается на четырёх уровнях:
   стрелки между слотами, номер этапа в углу, подпись под слотом и рельс
   с узлами под всей цепочкой. Всё тонкое и акцентное — журнальный разворот
   не инфографика.

   §0.0.2: hover меняет только border-color/box-shadow/opacity. Геометрия
   слотов, стрелок и подписей при наведении не меняется.
   ========================================================================= */

/* Промежуток от первого блока: отдельный разворот, а не продолжение ряда. */
/* Отдельный разворот: 52px воздуха с обеих сторон, симметрично.

   Почему MARGIN, а не padding: отступ снаружи делает границы секции и
   видимый контент эквидистантными — и «технический» замер
   (gifts.top − row.bottom), и замер по видимому контенту дают одно и то же
   число 52. С padding воздух оказывался внутри блока: границы секций
   сходились вплотную, а расхождение читалось как несимметрия.
   У соседей вертикальный воздух обнулён, чтобы не удваивать просвет. */
/* ФИКСИРОВАННЫЙ РАЗМЕР МИНИАТЮРЫ — общий для блока подарков и блока
   путешествий (владелец: «Размер миниатюр не должен меняться при изменении
   ширины экрана. Его нужно зафиксировать таким, чтобы на мобилках
   помещались две миниатюры в ряд с запасом»).

   Почему 160px (владелец: «До 160 пикс. увеличить миниатюры»):
     • экран 390 → контент 358px. Две миниатюры 160×2 = 320 плюс просвет 14
       = 334px, запас справа 24px — «с запасом» соблюдено;
     • экран 360 → контент 328px, 334px не влезает на 6px, поэтому на этой
       ширине просвет сужается до 8px (320 + 8 = 328 — ровно в край);
     • экран 340 и уже → контент 308px и меньше, две по 160 физически
       не помещаются — там одна колонка.
   Ни vw, ни clamp, ни долей fr: одно число на всех ширинах, от 1440 до 360.
   Высота выводится из пропорции 9:16: 140 × 16/9 = 248.9px. */
/* Объявлено на :root, потому что размер нужен ТРЁМ блокам — карточкам
   #cards (.lady-row__item), подаркам и путешествиям. Если объявить только
   на блоках, то в .lady-plates переменная не видна и grid-template-columns
   схлопывается в одну колонку. */
:root {
  --lady-thumb-w: 160px;
  --lady-thumb-gap: 14px;
}

.lady-gifts {
  margin-block: 52px;
  padding-block: 0;
}

.lady-gifts__grid {
  display: grid;
  /* Зеркало .lady-row: там медиа слева, текст справа. Здесь наоборот.
     Одна строка держится как можно дольше: текстовая колонка имеет нижний
     предел 280px (а не 320px), медиа забирает остаток и сжимается
     пропорционально — слоты уменьшаются, но остаются 9:16. */
  /* Медиа-колонка ровно по ширине ряда миниатюр: 4 × 160 + 3 × 14 = 682px.
     Текст забирает остаток и не уже 260px (на 1440 это 292px). */
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: clamp(22px, 2.6vw, 48px);
  /* start, а не center: текстовая колонка заметно выше медиа (435px против
     146–200px), и при center медиа визуально «съезжало» вниз — любой замер
     по top читался как перенос на вторую строку. С start обе колонки
     начинаются с одной линии: одна строка видна и по числам, и глазом. */
  align-items: start;
}

/* Средние ширины (1152–761): текст уже, медиа шире — чтобы цепочка из четырёх
   слотов не сжималась до нечитаемого размера, но строка не рвалась. */
/* Порог одиночной строки для ФИКСИРОВАННЫХ миниатюр.
   Медиа-колонке нужно 4 × 140 + 3 × 14 = 602px, тексту — минимум 280px
   плюс промежуток 48px. Итого 930px ширины секции.
   Замер ширины секции: 1440 → 1012 (входит), 1366 → 938 (входит)
   1280 → 852 (не входит). Поэтому одиночная строка держится от 1361px
   ниже текст встаёт над медиа — иначе четвёртая миниатюра вылезала
   за пределы блока. */
@media (max-width: 1360px) {
  .lady-gifts__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .lady-gifts__text { order: -1; }
  .lady-gifts__flow { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .lady-gifts__rail { display: none; }
}

/* -------------------------------------------------------------------------
   ЧЕТЫРЕ БЛОКА СО СЛОТАМИ (Знакомства, Работа, Проекты, Эмиграция).
   Вёрстка целиком переиспользует .lady-gifts__*: размер миниатюры,
   пропорция 9:16, мобильная сетка 2×2 и плейсхолдеры приходят оттуда же,
   поэтому правка --lady-thumb-w автоматически применяется ко всем блокам.

   Модификатор --mirror меняет сторону: у блока подарков текст слева,
   медиа справа; здесь медиа слева, текст справа. Колонки чередуются,
   чтобы лента не выглядела повтором одного шаблона.
   ------------------------------------------------------------------------- */

/* У блока подарков текст слева, медиа справа (minmax(260px,1fr) auto).
   У зеркального — наоборот: медиа слева, текст справа. */
.lady-gifts--mirror .lady-gifts__grid {
  grid-template-columns: auto minmax(260px, 1fr);
}

/* Порядок в разметке у всех блоков одинаковый (текст, затем медиа), поэтому
   зеркальность задаётся order: медиа встаёт в первую колонку, текст во вторую.
   Без этого grid-авторазмещение клало текст влево, и медиа уезжало за край. */
.lady-gifts--mirror .lady-gifts__media-col { order: 1; }
.lady-gifts--mirror .lady-gifts__text { order: 2; }

/* Когда колонки становятся в столбец, текст у зеркального блока идёт
   первым — как и у остальных блоков ленты. */
@media (max-width: 1360px) {
  /* Зеркальная раскладка задана селектором из двух классов (0,2,0) — он
     сильнее общего .lady-gifts__grid (0,1,0), поэтому одноколоночную
     раскладку нужно повторить с той же специфичностью, иначе на мобилке
     остаются две колонки и ряд вылезает за экран. */
  .lady-gifts--mirror .lady-gifts__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lady-gifts--mirror .lady-gifts__text { order: -1; }
  .lady-gifts--mirror .lady-gifts__media-col { order: 0; }
}

/* Кнопка «Подробнее» в блоках про кабинет. Оформлена в языке ленты:
   тонкая рамка акцента, капс, без заливки. §0.0.2: в :hover меняются
   только цвет, фон и рамка — размер и положение те же. */
.lady-gifts__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 11px 22px;
  border: 1px solid color-mix(in srgb, var(--site-acc, #e0a3b4) 46%, transparent);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--site-acc-2, #efc0cd);
  background: transparent;
  transition: border-color 0.24s ease, background-color 0.24s ease, color 0.24s ease;
}

.lady-gifts__more:hover,
.lady-gifts__more:focus-visible {
  border-color: var(--site-acc, #e0a3b4);
  background: color-mix(in srgb, var(--site-acc, #e0a3b4) 12%, transparent);
  color: var(--site-text, #fdf1f4);
}

/* Кнопка «Подробнее» в шапке секции-плиточника. Стоит под лидом,
   в языке ленты: тонкая рамка акцента, капс, без заливки.
   §0.0.2: в :hover меняются только цвет, фон и рамка — размер тот же. */
.lady-head__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 11px 22px;
  border: 1px solid color-mix(in srgb, var(--site-acc, #e0a3b4) 46%, transparent);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--site-acc-2, #efc0cd);
  background: transparent;
  transition: border-color 0.24s ease, background-color 0.24s ease, color 0.24s ease;
}

.lady-head__more:hover,
.lady-head__more:focus-visible {
  border-color: var(--site-acc, #e0a3b4);
  background: color-mix(in srgb, var(--site-acc, #e0a3b4) 12%, transparent);
  color: var(--site-text, #fdf1f4);
}

/* Плейсхолдер внутри плитки: рамка 9:16 с точкой-знаком. Позиционируется
   по медиа-блоку, который уже держит пропорцию. */
.lady-step__media .lady-gifts__ph {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

/* Медиа-блок плитки — точка отсчёта для абсолютного плейсхолдера. */
.lady-step__media {
  position: relative;
}

/* ---------------------------------------------------------------- текст --- */
.lady-gifts__text { min-width: 0; }

.lady-gifts__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--lady-gap-meta, 12px);
}


.lady-gifts__tag {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-muted, #c2a3ad);
}

.lady-gifts__title {
  margin: 0 0 var(--lady-gap-title, 14px);
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: var(--lady-t-lg, clamp(1.48rem, 2.1vw, 1.92rem));
  font-weight: 600;
  line-height: var(--lady-lh-lg, 1.18);
  letter-spacing: var(--lady-ls, -0.01em);
  color: var(--site-text, #fdf1f4);
}

.lady-gifts__rule {
  width: var(--lady-rule-w, 56px);
  height: var(--lady-rule-h, 1px);
  margin: 0 0 var(--lady-gap-rule, 16px);
  background: var(--lady-rule-grad, linear-gradient(90deg, var(--site-acc, #e0a3b4), transparent));
}

.lady-gifts__lead {
  margin: 0;
  max-width: 58ch;
  font-size: var(--lady-t-body, 0.96rem);
  line-height: var(--lady-lh-body, 1.68);
  color: var(--site-muted, #c2a3ad);
}

/* -------------------------------------------------------- цепочка медиа --- */
.lady-gifts__media-col { min-width: 0; }

/* Ряд миниатюр: ровно четыре колонки фиксированной ширины. Размер не
   зависит от ширины экрана — меняется только то, сколько колонок видно. */
.lady-gifts__flow {
  display: grid;
  grid-template-columns: repeat(4, var(--lady-thumb-w));
  column-gap: var(--lady-thumb-gap);
  align-items: start;
}

/* Слот — ровно кадр 9:16. Подпись этапа лежит внутри кадра, поэтому
   «хвоста» под ним нет и соотношение слота совпадает с кадром (0.5625). */
.lady-gifts__step {
  margin: 0;
  width: var(--lady-thumb-w);
  min-width: 0;
  display: block;
  aspect-ratio: 9 / 16;
}

/* Кадр 9:16 — та же пропорция, что у карточек первого блока. */
.lady-gifts__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  /* overflow не скрываем: стрелка-связка выходит за правый край кадра
     в промежуток до следующего слота. Скругление держат сами медиа. */
  border: 1px solid var(--site-border-strong, rgba(224, 163, 180, 0.34));
  background: #14090c;
  /* только цвет/тень: геометрия при наведении не меняется (§0.0.2) */
  transition: border-color 0.24s ease, box-shadow 0.24s ease;
}

.lady-gifts__step:hover .lady-gifts__frame {
  border-color: var(--site-acc, #e0a3b4);
  box-shadow: 0 12px 28px -18px rgba(224, 163, 180, 0.55);
}

.lady-gifts__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 7px;
}

/* Плейсхолдер: рамка 9:16 с подписью этапа. Никаких случайных картинок. */
.lady-gifts__ph {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background:
    repeating-linear-gradient(
      135deg
      rgba(224, 163, 180, 0.045) 0 10px
      transparent 10px 20px
    );
}
.lady-gifts__ph-mark {
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--site-acc, #e0a3b4) 55%, transparent);
  border-radius: 50%;
  position: relative;
}
.lady-gifts__ph-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--site-acc, #e0a3b4) 45%, transparent);
}
.lady-gifts__ph-text {
  max-width: 100%;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
  color: var(--site-muted, #c2a3ad);
}

/* Номер этапа в углу кадра. */

/* Подпись этапа — единственный текст слота. Лежит поверх нижнего края
   кадра на мягкой подложке, чтобы читалась на любом фото. */
/* Подпись слота — СВЕРХУ кадра (решение владельца: «Подписи перенести
   наверх фото»). Скрим-градиент идёт сверху вниз, поэтому текст читается
   на любом фото и не задевает лицо: подпись занимает верхнюю кромку
   лицо остаётся в центральной части кадра.
   Длинная подпись «Вещь из списка желаний» переносится в две строки —
   перенос по словам, высота подстраивается, обрезки нет. */
.lady-gifts__cap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  padding: 7px 5px 16px;
  background: linear-gradient(to bottom, rgba(20, 9, 13, 0.92), rgba(20, 9, 13, 0));
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: var(--site-text-soft, #e8cdd5);
  /* перенос по словам: подпись занимает столько строк, сколько нужно */
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Стрелка между слотами: волосяная линия с наконечником в акценте.
   Ширина фиксированная — слоты не сдвигаются. */
.lady-gifts__arrow {
  position: absolute;
  top: 50%;
  /* выходит из кадра в промежуток: ширина промежутка = фиксированный gap */
  right: calc(-1 * var(--lady-thumb-gap));
  width: var(--lady-thumb-gap);
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
}
.lady-gifts__arrow-line {
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--site-acc, #e0a3b4) 62%, transparent);
}
.lady-gifts__arrow-head {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--site-acc, #e0a3b4);
  border-right: 1px solid var(--site-acc, #e0a3b4);
  transform: rotate(45deg);
  margin-left: -3px;
}

/* Рельс под цепочкой: точки-узлы под каждым слотом и линия между ними. */
.lady-gifts__rail {
  display: flex;
  align-items: center;
  margin-top: 14px;
  padding-inline: 4px;
}
.lady-gifts__node {
  flex: 0 0 var(--lady-thumb-w);
  height: 5px;
  position: relative;
}
.lady-gifts__node::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--site-acc, #e0a3b4);
  opacity: 0.75;
}
.lady-gifts__node-line {
  flex: 0 0 auto;
  width: var(--lady-thumb-gap);
  height: 1px;
  background: color-mix(in srgb, var(--site-acc, #e0a3b4) 34%, transparent);
}

/* ---------------------------------------------------------------- адаптив --- */
/* ПОРОГ ПЕРЕНОСА — 960px. Числа (замер по ширинам, сайдбар = оверлей
   доступную ширину не меняет):
     1024 → секция 596px, медиа 358px, слот 77×137 (9:16) — одна строка;
      900 → секция 479px, медиа 243px, слот 50×89 — читать невозможно;
      768 → секция 356px, слот 19×35 — тем более.
   Значит граница проходит между 1024 и 900. Ставлю 960: на 1024 и выше —
   одна строка, ниже — текст сверху, цепочка снизу в горизонтальной прокрутке. */
@media (max-width: 960px) {
  .lady-gifts__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  /* На узком экране текст сверху, медиа под ним — как в первом блоке.
     Промежуток под стрелку-связку сохраняем: цепочка должна читаться и здесь. */
  .lady-gifts__flow {
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  /* Ширина миниатюры та же, что на десктопе — 140px. Меняется только
     то, сколько колонок видно в прокрутке. */
  .lady-gifts__flow {
    grid-template-columns: repeat(4, var(--lady-thumb-w));
  }
  .lady-gifts__rail { display: none; }
}

/* ПРОМЕЖУТОЧНЫЙ ДИАПАЗОН 961–1109px: секция здесь 533–681px, а четыре
   миниатюры требуют 4 × 160 + 3 × 14 = 682px — не влезают. Держим ту же
   сетку 2×2, что и на мобилке, чтобы ничего не обрезалось. */
@media (min-width: 961px) and (max-width: 1109px) {
  .lady-gifts__flow {
    grid-template-columns: repeat(2, var(--lady-thumb-w));
    row-gap: var(--lady-thumb-gap);
    overflow-x: visible;
  }
  .lady-travel__flow {
    grid-template-columns: repeat(2, var(--lady-thumb-w));
    row-gap: var(--lady-thumb-gap);
    overflow-x: visible;
  }
}

/* МОБИЛКА: сетка 2×2 вместо ряда (владелец: «На мобилках выводить их не
   в ряд, а гридами 2х2»). Четыре миниатюры встают в две строки по две
   горизонтальной прокрутки нет. Размер остаётся 160px — он не зависит от
   ширины экрана, меняется только число колонок.
   Просвет считается от доступной ширины: 2 × 160 + gap ≤ ширина контента. */
@media (max-width: 620px) {
  .lady-gifts { padding-block: 44px; }

  .lady-gifts__flow {
    grid-template-columns: repeat(2, var(--lady-thumb-w));
    column-gap: var(--lady-thumb-gap);
    row-gap: var(--lady-thumb-gap);
    overflow-x: visible;
    padding-bottom: 0;
  }

  /* Стрелки-связки теряют смысл при сетке: цепочка идёт сверху вниз
     а не слева направо. */
  .lady-gifts__arrow { display: none; }
}

/* 360–375: контент 328–343px. 2 × 160 + 14 = 334 уже не влезает на 360
   поэтому просвет сужается до 8px — 328px встаёт ровно в край. */
@media (max-width: 375px) {
  .lady-gifts__flow { column-gap: 8px; }
}

/* 359 и уже: контент ≤ 327px, две миниатюры по 160 физически не помещаются
   (нужно 328). Одна колонка. */
@media (max-width: 359px) {
  .lady-gifts__flow { grid-template-columns: var(--lady-thumb-w); }
}

/* =========================================================================
   БЛОК «ПУТЕШЕСТВИЯ» (#lady-travel) — зеркало блока подарков:
   медиа СЛЕВА, текст СПРАВА, три кадра в один ряд.

   Владелец: «Итого 4 фото — полная аналогия по вёрстке со вторым блоком
   только зеркально отображено». Поэтому четыре кадра одной пропорции 9:16
   и равной ширины — четыре равные колонки сетки. Высота каждого выводится
   из его ширины по aspect-ratio: w × 16/9 = w × 1.7778. Фиксированных высот
   не задаём, поэтому ширина и высота у всех четырёх совпадают до пикселя.

   Подписей над кадрами нет — уточнение владельца «подписи не нужны».
   §0.0.2: hover меняет только border-color/box-shadow. Геометрия неизменна.
   ========================================================================= */

/* Тот же просвет, что у блока подарков: 52px с каждой стороны.
   Вертикальные margin соседних секций схлопываются, поэтому между блоками
   подарков и путешествий остаётся 52px, а не 104. */
.lady-travel {
  margin-block: 52px;
  padding-block: 0;
}

/* Зеркало .lady-gifts__grid: медиа идёт первым и забирает большую долю. */
.lady-travel__grid {
  display: grid;
  /* Зеркально подаркам: медиа слева ровно по ширине ряда (682px)
     текст справа забирает остаток, не уже 260px. */
  grid-template-columns: auto minmax(260px, 1fr);
  gap: clamp(22px, 2.6vw, 48px);
  align-items: start;
}

@media (max-width: 1360px) {
  .lady-travel__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .lady-travel__text { order: -1; }
  .lady-travel__flow { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .lady-travel__rail { display: none; }
}

/* -------------------------------------------------------- цепочка медиа --- */
.lady-travel__media-col { min-width: 0; }

/* Пропорции колонок = пропорции кадров. Отсюда равная высота. */
/* Четыре кадра одной пропорции 9:16 и равной ширины — полная аналогия
   цепочке блока подарков, только зеркально (владелец: «Итого 4 фото —
   полная аналогия по вёрстке со вторым блоком, только зеркально»).
   Высота считается от ширины колонки: w × 16/9 = w × 1.7778. */
/* Тот же фиксированный ряд, что и у подарков: четыре колонки 140px. */
.lady-travel__flow {
  display: grid;
  grid-template-columns: repeat(4, var(--lady-thumb-w));
  column-gap: var(--lady-thumb-gap);
  align-items: start;
}

.lady-travel__step {
  margin: 0;
  width: var(--lady-thumb-w);
  min-width: 0;
  display: block;
  aspect-ratio: 9 / 16;
}

.lady-travel__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  /* overflow не скрываем: стрелка-связка выходит за правый край кадра
     в промежуток до следующего. Скругление держат сами медиа. */
  border: 1px solid var(--site-border-strong, rgba(224, 163, 180, 0.34));
  background: #14090c;
  /* только цвет/тень: геометрия при наведении не меняется (§0.0.2) */
  transition: border-color 0.24s ease, box-shadow 0.24s ease;
}

.lady-travel__step:hover .lady-travel__frame {
  border-color: var(--site-acc, #e0a3b4);
  box-shadow: 0 12px 28px -18px rgba(224, 163, 180, 0.55);
}

.lady-travel__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 7px;
}

/* Плейсхолдер: рамка с точкой-знаком, как в блоке подарков. */
.lady-travel__ph {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      135deg
      rgba(224, 163, 180, 0.045) 0 10px
      transparent 10px 20px
    );
}
.lady-travel__ph-mark {
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--site-acc, #e0a3b4) 55%, transparent);
  border-radius: 50%;
  position: relative;
}
.lady-travel__ph-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--site-acc, #e0a3b4) 45%, transparent);
}

/* Стрелка-связка: волосяная линия с наконечником в акценте. */
.lady-travel__arrow {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--lady-thumb-gap));
  width: var(--lady-thumb-gap);
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
}
.lady-travel__arrow-line {
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--site-acc, #e0a3b4) 62%, transparent);
}
.lady-travel__arrow-head {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--site-acc, #e0a3b4);
  border-right: 1px solid var(--site-acc, #e0a3b4);
  transform: rotate(45deg);
  margin-left: -3px;
}

/* Рельс: точка под каждым кадром. Колонки повторяют пропорции цепочки
   поэтому узлы стоят ровно по центрам кадров. */
.lady-travel__rail {
  display: flex;
  align-items: center;
  margin-top: 14px;
  padding-inline: 4px;
}
.lady-travel__node {
  flex: 0 0 var(--lady-thumb-w);
  height: 5px;
  position: relative;
}
/* Колонки цепочки равные — узлы и так стоят по центрам кадров. */

.lady-travel__node::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--site-acc, #e0a3b4);
  opacity: 0.75;
}
.lady-travel__node-line {
  flex: 0 0 auto;
  width: var(--lady-thumb-gap);
  height: 1px;
  background: color-mix(in srgb, var(--site-acc, #e0a3b4) 34%, transparent);
}

/* ---------------------------------------------------------------- текст --- */
.lady-travel__text { min-width: 0; }

.lady-travel__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--lady-gap-meta, 12px);
}

.lady-travel__tag {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-muted, #c2a3ad);
}

.lady-travel__title {
  margin: 0 0 var(--lady-gap-title, 14px);
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: var(--lady-t-lg, clamp(1.48rem, 2.1vw, 1.92rem));
  font-weight: 600;
  line-height: var(--lady-lh-lg, 1.18);
  letter-spacing: var(--lady-ls, -0.01em);
  color: var(--site-text, #fdf1f4);
}

.lady-travel__rule {
  width: var(--lady-rule-w, 56px);
  height: var(--lady-rule-h, 1px);
  margin: 0 0 var(--lady-gap-rule, 16px);
  background: var(--lady-rule-grad, linear-gradient(90deg, var(--site-acc, #e0a3b4), transparent));
}

.lady-travel__lead {
  margin: 0;
  max-width: 58ch;
  font-size: var(--lady-t-body, 0.96rem);
  line-height: var(--lady-lh-body, 1.68);
  color: var(--site-muted, #c2a3ad);
}

/* ---------------------------------------------------------------- адаптив --- */
/* Тот же порог 960px, что у блока подарков. */
@media (max-width: 960px) {
  .lady-travel__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  /* На узком экране текст идёт первым — как в блоке подарков. */
  .lady-travel__text { order: -1; }
  .lady-travel__flow {
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    /* число колонок задаётся ниже явно — auto-flow здесь не нужен
       иначе он перебивал сетку 2×2 на мобилке */
    grid-auto-flow: row;
  }
  /* Ширина та же фиксированная 140px, что и на десктопе. */
  .lady-travel__flow {
    grid-template-columns: repeat(4, var(--lady-thumb-w));
  }
  .lady-travel__rail { display: none; }
}

/* МОБИЛКА: та же сетка 2×2, что и в блоке подарков. */
@media (max-width: 620px) {
  .lady-travel { margin-block: 44px; }

  .lady-travel__flow {
    grid-template-columns: repeat(2, var(--lady-thumb-w));
    column-gap: var(--lady-thumb-gap);
    row-gap: var(--lady-thumb-gap);
    overflow-x: visible;
    padding-bottom: 0;
  }

  .lady-travel__arrow { display: none; }
}

@media (max-width: 375px) {
  .lady-travel__flow { column-gap: 8px; }
}

@media (max-width: 359px) {
  .lady-travel__flow { grid-template-columns: var(--lady-thumb-w); }
}

/* Просвет логотипы → первый блок на МОБИЛЬНОМ.
   Здесь padding-top #cards перебивался правилом из sites.css:2213
     html:has(#mnq-sb-root)[data-showcase] main#view > section.hero-compact:not([hidden]) ~ section
       { padding-block-start: 34px !important; }
   Специфичность (2,4,4) + !important — выше, чем у #cards.lady-plates.
   Поэтому повторяем ровно ту же цепочку селекторов (свойство то же, а
   селектор не пересекается с их правилом по смыслу: у нас id #cards)
   иначе просвет на телефоне остаётся 34px вместо 24px. */
@media (max-width: 767px) {
  html:has(#mnq-sb-root)[data-showcase] main#view > section.hero-compact:not([hidden]) ~ section#cards.lady-plates {
    padding-block-start: 24px !important;
  }
}

/* На узком экране шкала сжимается, но соотношение уровней сохраняем:
   иначе A (23.68px) и B (22.08px) сливаются и иерархия пропадает. */
@media (max-width: 760px) {
  #cards,
  #lady-rest,
  #lady-gifts,
  #studio-steps {
    --lady-t-lg: 1.58rem;
    --lady-t-sm: 1.26rem;
  }
}

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