/* ══════════════════════════════
   HOME — Hero (variant B: split)
   ══════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  min-height: 600px;
}

.hero-photo {
  position: relative;
  overflow: hidden;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 72px 72px;
  position: relative;
}

.hero-title {
  font-size: clamp(80px, 10vw, 140px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.88;
  color: var(--c-text);
}

.hero-sub {
  margin-top: 28px;
  font-size: 16px;
  color: var(--c-text-2);
  line-height: 1.6;
  letter-spacing: 0.03em;
  max-width: 260px;
}

.btn-primary {
  display: inline-block;
  margin-top: 48px;
  padding: 16px 44px;
  background: var(--c-text);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: opacity .2s;
}
.btn-primary:hover { opacity: .75; }

.hero-corner {
  position: absolute;
  bottom: 40px; right: 48px;
  text-align: right;
}

/* ══════════════════════════════
   HOME — section head (общий для блоков главной)
   ══════════════════════════════ */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-right: 48px;
  margin-bottom: 32px;
}

/* S18: одна метка раздела на весь сайт — 11px Bold, капс, чёрная, оранжевая
   точка. Так же оформлены .about-label, .catalog-title и заголовки футера.
   Было: Lookbook 13px/600 без точки, About 11px/400 серым с точкой. */
.section-title, .catalog-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text);
}
.section-title::before, .catalog-title::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-orange);
  margin-right: 8px;
  vertical-align: middle;
}

.section-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color .15s;
}
.section-link:hover { color: var(--c-text); }

/* ══════════════════════════════
   HOME — Lookbook line (S9)
   Наполняется из таблицы через home.js. Заменила теасер
   «New collection» с пятью захардкоженными плейсхолдерами.
   ══════════════════════════════ */
.section-lookbook {
  padding: 32px 0 0 48px;   /* 2026-10-24: было 96 → 48 → 32px, Алиса — ближе к hero */
  /* якорь #lookbook из шапки — чтобы фиксированная шапка не накрыла заголовок */
  scroll-margin-top: var(--header-h);
}
.section-lookbook[hidden] { display: none; }

.scarf-scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding-right: 48px;
  scrollbar-width: none;
  cursor: grab;
}
.scarf-scroll::-webkit-scrollbar { display: none; }
.scarf-scroll:active { cursor: grabbing; }

/* Линейка кадров: плотный «филмстрип», как сетка каталога (gap 2px) */
.lookbook-row {
  gap: 2px;
  align-items: flex-start;
}

.look-card {
  flex: 0 0 340px;
  display: block;
  text-decoration: none;
  color: inherit;
}

.look-card-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f7f7f7;
}
/* Модельные кадры — разного кадрирования, поэтому cover, а не contain:
   в каталоге принт лежит на белом и его нельзя резать, здесь наоборот. */
.look-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.25,.1,.25,1);
}
.look-card:hover .look-card-img img { transform: scale(1.04); }

.look-card-cap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 4px 0;
}
/* S18: подпись к платку одинаковая в лукбуке и каталоге —
   название 14px Bold строчными, коллекция 11px серым капсом */
.look-card-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: lowercase;
}
.look-card-collection {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* ══════════════════════════════
   HOME — Collections (S18, 2026-09-23)
   Четыре плитки — вход в каталог с фильтром. Воздуха не меньше, чем
   вокруг соседних блоков: отступ сверху как у about, крупные поля по бокам.
   Название — Satoshi Black строчными, как все display-заголовки.
   ══════════════════════════════ */
.section-collections {
  padding: 140px 48px 0;
  scroll-margin-top: var(--header-h);
}
.section-collections .section-head { padding-right: 0; }

.collections-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.coll-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.coll-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* S18: квадрат — принт платка влезает целиком */
  overflow: hidden;
  background: #f7f7f7;
}
/* cover: у модельного кадра подрезаются края, у принта остаётся крупный
   фрагмент — для плитки-навигации это нормально, целиком принт виден в каталоге */
.coll-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.25,.1,.25,1);
}
.coll-card:hover .coll-card-img img { transform: scale(1.04); }

/* Режим 'text' (S18): без картинок, название крупно внизу слева.
   Светло-серый квадрат, а не белый — иначе плитка растворяется в фоне. */
.collections-grid--text .coll-card-img {
  display: flex;
  align-items: flex-end;
  padding: 28px;
  box-sizing: border-box;
  background: #f4f4f4;
  transition: background .3s;
}
.collections-grid--text .coll-card:hover .coll-card-img { background: #ececec; }
.coll-card-title {
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: lowercase;
  color: var(--c-text);
}
/* в текстовом режиме название уже в плитке — под ней остаётся только счётчик */
.collections-grid--text .coll-card-name { display: none; }

.coll-card-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 2px 0;
}
.coll-card-name {
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: lowercase;
}
.coll-card-count {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
  white-space: nowrap;
}

/* ══════════════════════════════
   HOME — платок в движении (S21, 2026-09-26)
   Баннер на всю ширину после about. Пропорция = пропорция файла,
   чтобы до загрузки место уже было занято постером и ничего не прыгало.
   ══════════════════════════════ */
.section-motion { padding: 0 0 140px; }
.motion-video {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 510;
  object-fit: cover;
  background: #dbe6f3;
}

/* ══════════════════════════════
   HOME — About (S9)
   Текст — outputs/brand-approved.md, первые два абзаца.
   ══════════════════════════════ */
.section-about {
  /* якорь #about из шапки — чтобы фиксированная шапка не накрывала заголовок */
  scroll-margin-top: var(--header-h);
}

/* 2026-10-24 (решение Алисы): зеркало hero — фото на правую половину
   экрана, без полей, на всю высоту; текст слева по центру по вертикали.
   Прежний вариант A (видео между центром и правым полем) отложен 26.09. */
.section-about {
  padding: 0;
  /* фото начинается с верха блока — без зазора оно липло к подписям лукбука */
  margin-top: 96px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  align-items: stretch;
}
.about-inner {
  align-self: center;
  max-width: 568px;   /* 520 текста + левое поле 48 */
  padding: 140px 48px;
}
.about-inner .about-text:last-child { margin-bottom: 0; }
.about-photo {
  position: relative;
  overflow: hidden;
  background: #f7f7f7;
}
.about-photo img,
.about-photo video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.about-label {
  display: block;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-text);
  margin-bottom: 28px;
}
/* оранжевый только точкой — правило акцентов из CLAUDE.md */
.about-label::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-orange);
  margin-right: 8px;
  vertical-align: middle;
}

.about-heading {
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 32px;
  color: var(--c-text);
}

.about-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-text-2);
  margin-bottom: 20px;
}

.about-facts {
  display: block;
  margin-top: 32px;
  color: var(--c-text-3);
}

.about-link {
  display: inline-block;
  margin-top: 32px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity .15s;
}
.about-link:hover { opacity: .55; }

.scarf-card {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scarf-card-img {
  width: 300px; height: 300px;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.scarf-card-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .4s ease, opacity .35s ease;
}
.scarf-card:hover .scarf-card-img img { transform: scale(1.04); }

.scarf-card-img .scarf-card-img-hover {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .35s ease;
}
.scarf-card.has-hover:hover .scarf-card-img-hover { opacity: 1; }
.scarf-card.has-hover:hover .scarf-card-img > img:first-child { opacity: 0; }

.scarf-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .08em; color: var(--c-text-3);
}

.scarf-card-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;   /* S18: при переносе названия цена стоит на его первой строке */
  gap: 10px;
}
.scarf-card-name { min-width: 0; }
.scarf-card-price-fav { flex-shrink: 0; }

.scarf-card-price-fav {
  display: flex; align-items: center; gap: 6px;
}

.scarf-card-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;   /* S18: плотнее — по просьбе Алисы */
  text-transform: lowercase;
}

/* S18: цена второстепенна — мелкая и серая, главное в подписи название.
   Вес 700 по шкале, иерархию задают размер и цвет. */
.scarf-card-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-3);
  letter-spacing: 0.02em;
  white-space: nowrap;   /* «€ 129» не ломается на две строки (S14) */
}

/* S18: капс оставлен, но мельче и с меньшей разрядкой — при 11px/0.1em
   коллекция смотрелась крупнее названия платка */
.scarf-card-collection {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* ══════════════════════════════
   SCARVES catalog
   ══════════════════════════════ */
.catalog-header {
  padding: 140px 48px 48px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* .catalog-title — см. .section-title выше (S18) */

.catalog-count {
  font-size: 11px;
  color: var(--c-text-3);
  letter-spacing: 0.06em;
}

.filter-bar {
  padding: 0 48px 48px;
  display: flex;
  gap: 8px;
}

.filter-btn {
  padding: 8px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid #e0e0e0;
  background: none;
  color: var(--c-text-2);
  cursor: pointer;
  transition: all .15s;
}
.filter-btn:hover { border-color: var(--c-text); color: var(--c-text); }
.filter-btn.active {
  background: var(--c-text);
  border-color: var(--c-text);
  color: #fff;
}

.scarves-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 0 48px 96px;
}

.scarves-grid .scarf-card {
  flex: none;
  width: auto;
}

.scarves-grid .scarf-card-img {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  background: #fff;
}

.scarves-grid .scarf-card-img img {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
}

.scarves-grid .scarf-card-info,
.scarves-grid .scarf-card-collection {
  padding: 0 4px;
  margin-top: 6px;   /* S18: воздух между названием и коллекцией */
}

.scarves-grid .scarf-card {
  padding-bottom: 32px;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ══════════════════════════════
   SCARF — single product page
   ══════════════════════════════ */
.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  margin-bottom: 96px;
}

.product-photo {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--header-h);
  box-sizing: border-box;
}
.product-photo > img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
}

/* ── Gallery ── */
.gallery-viewport {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  cursor: grab;
}
.gallery-viewport:active { cursor: grabbing; }
/* S18: вертикальная прокрутка страницы остаётся браузеру, горизонтальный
   свайп отдаётся скрипту галереи — без этого на телефоне жест перехватывался */
.gallery-viewport { touch-action: pan-y; }
.gallery-item img { pointer-events: none; }

.gallery-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.gallery-item {
  flex: 0 0 100%;
  height: 100%;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* dots */
.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 16px;
  flex-shrink: 0;
}
.gallery-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-text-3);
  transition: background .2s;
  cursor: pointer;
  border: none;
  padding: 0;
}
.gallery-dot.active { background: var(--c-text); }
.gallery-thumb:hover { opacity: 0.85; }
.gallery-thumb.active {
  border-color: var(--c-text);
  opacity: 1;
}

.product-info {
  padding: 120px 72px 96px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-back {
  display: inline-block;
  margin-bottom: 64px;
  color: var(--c-text-3);
  letter-spacing: 0.1em;
  transition: color .15s;
  text-decoration: none;
}
.product-back:hover { color: var(--c-text); }
/* Вторая ссылка «← all scarves» над фото — только для телефона (S18).
   На десктопе она не участвует в гриде вовсе (display: none). */
.product-back-top { display: none; }

.product-meta {
  margin-bottom: 48px;
}

.product-collection {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.product-name {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 900;          /* S18: было 800 — начертания нет в системе */
  text-transform: lowercase;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 20px;
  color: var(--c-text);
}

.product-price {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-text);
}

.product-actions {
  margin-bottom: 56px;
  display: flex; gap: 10px; align-items: stretch;
}

.btn-add {
  cursor: pointer; border: none; font-family: var(--font);
  margin-top: 0; white-space: nowrap;
}

.add-feedback {
  margin-top: 14px;
  color: var(--c-text-3);
  min-height: 16px;
  transition: opacity .3s;
}

.product-details {
  border-top: 1px solid #e8e8e8;
  padding-top: 32px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-row {
  display: flex;
  gap: 24px;
  align-items: baseline;
}

.detail-label {
  width: 80px;
  flex-shrink: 0;
}

.detail-val {
  font-size: 13px;
  color: var(--c-text-2);
  letter-spacing: 0.02em;
}

.product-note {
  color: var(--c-text-3);
  line-height: 1.8;
  margin-top: auto;
  padding-top: 16px;
}

/* ── Mobile breakpoint ── */
@media (max-width: 768px) {
  /* HERO на телефоне (S15, 2026-09-22, вариант A).
     Десктопный грид 1fr 1fr тут не работает: колонки делятся не пополам,
     а по минимальной ширине содержимого — .hero-copy распирается заголовком
     и паддингами, забирает ~289px, фото остаётся 86px. Поэтому на мобильном
     сплит разворачивается сверху вниз: фото во всю ширину, текст под ним. */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 54vh 1fr;
  }
  .hero-photo img { object-position: center 38%; }
  .hero-copy {
    padding: 36px 24px 28px;
    justify-content: flex-start;
  }
  .hero-title { font-size: 64px; }
  .hero-sub { margin-top: 18px; font-size: 13px; }
  .hero-copy .btn-primary {
    margin-top: 24px;
    align-self: flex-start;
  }
  .hero-corner { bottom: 16px; right: 20px; }

  .catalog-header {
    padding: 100px 20px 28px;
  }
  .filter-bar {
    padding: 0 20px 28px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .scarves-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px 64px;
  }
  /* S18: подпись на телефоне — та же раскладка, что на десктопе; название
     чуть мельче, длинное переносится, цена держится на первой строке */
  .scarf-card-name { font-size: 13px; }
  .scarf-card-info { gap: 4px; }
  .scarf-card-price-fav { gap: 4px; }
  .section-lookbook { padding: 24px 0 0 20px; }   /* было 64 → 32 → 24px */
  .section-head { padding-right: 20px; margin-bottom: 22px; }
  .lookbook-row { padding-right: 20px; }
  .look-card { flex: 0 0 74vw; }
  .section-motion { padding: 0 0 80px; }
  .motion-video { aspect-ratio: 1 / 1; }

  /* как hero на телефоне: сверху вниз — текст, под ним фото во всю ширину */
  .section-about { margin-top: 0; }   /* сверху текст со своим отступом 80px */
  .about-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .about-inner { max-width: none; padding: 80px 20px 48px; }
  .about-photo { aspect-ratio: 3 / 4; }
  .about-heading { margin-bottom: 24px; }
  .about-text { font-size: 15px; }

  /* SCARF на телефоне — тот же баг, что был у hero (S15): десктопный
     грид 1fr 1fr считает колонки по min-content, а не пополам, и колонка
     с фото схлопывается почти до нуля. Разворачиваем сверху вниз: фото,
     затем карточка товара. */
  .product-layout {
    grid-template-columns: 1fr;
  }
  /* S18: «← all scarves» переехала над фото — под фото между галереей
     и названием оставалась пустая полоса (ссылка + отступ 64px), кнопка
     Add to cart из-за неё уходила ниже первого экрана. Высота области
     под картинку та же, что была: 70vh минус шапка. */
  .product-back-top {
    display: block;
    padding: calc(var(--header-h) + 14px) 20px 12px;
    margin-bottom: 0;
  }
  .product-info .product-back { display: none; }
  /* S18, вторая правка: высота блока больше не фиксированная — галерея
     берёт пропорцию текущего кадра (--g-ratio из scarf.js, по умолчанию
     квадрат), точки идут сразу под фото */
  .product-photo {
    position: relative;
    height: auto;
    padding-top: 0;
  }
  .product-photo .gallery-viewport {
    flex: none;
    aspect-ratio: var(--g-ratio, 1);
    max-height: 72vh;
    transition: aspect-ratio .32s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  .product-photo > img {
    flex: none;
    height: auto;
    max-height: 72vh;
  }
  .product-photo .gallery-dots { padding: 12px 0 0; }
  /* квадратная раскладка принта прижимается к ссылке сверху, а не висит
     посередине с полосами; вертикальные кадры на модели заполняют высоту
     и не меняются */
  .product-photo .gallery-item img,
  .product-photo > img { object-position: center top; }
  .product-info {
    padding: 28px 20px 64px;
  }
  .product-meta { margin-bottom: 28px; }

  /* Collections (S18): 2×2, поля как у соседних блоков */
  .section-collections { padding: 80px 20px 0; }
  .section-collections .section-head { margin-bottom: 22px; }
  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 12px;
  }
  .coll-card-cap {
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
  }
  .coll-card-name { font-size: 20px; }
  .collections-grid--text .coll-card-img { padding: 16px; }
  .coll-card-title { font-size: 26px; }
}

/* S18 (решение Алисы 23.09, пересмотр): названия платков — регистр
   предложения, «Blue irises», «White stork's dream». Это названия работ,
   а не описания: строчными они читались как подпись на ценнике.
   Логотип, меню, hero и заголовки разделов остаются строчными.
   В таблице названия не трогаем — регистр задаётся здесь.
   Элементы — flex-элементы или блоки, поэтому ::first-letter срабатывает. */
.scarf-card-name, .look-card-name, .product-name { text-transform: lowercase; }
.scarf-card-name::first-letter,
.look-card-name::first-letter,
.product-name::first-letter { text-transform: uppercase; }

/* S18 (решение Алисы 23.09): в сетке каталога точки у коллекции убраны —
   36 оранжевых точек подряд давали рябь. Остаются у меток разделов и на
   карточке товара (там она одна на экран). */
.scarves-grid .scarf-card-collection .dot-stock { display: none; }

/* orange stock dot */
.dot-stock {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-orange);
  margin-right: 6px;
  vertical-align: middle;
}

/* ══════════════════════════════
   TEXT PAGES (S11) — shipping, terms, privacy, 404
   Один набор стилей на все текстовые страницы. Новых приёмов не вводится:
   типографика и ритм взяты из блока about на главной, оранжевый — только точкой.
   ══════════════════════════════ */
.text-page {
  padding: 140px 48px 120px;
  scroll-margin-top: var(--header-h);
}

.text-page-inner { max-width: 680px; }

.text-label {
  display: block;
  color: var(--c-text-3);
  margin-bottom: 28px;
}
.text-label::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-orange);
  margin-right: 8px;
  vertical-align: middle;
}

.text-title {
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 32px;
  color: var(--c-text);
}

.text-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-text);
  margin-bottom: 48px;
}

.text-h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-text);
  margin: 48px 0 16px;
}

.text-page p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-text-2);
  margin-bottom: 16px;
}

.text-page a {
  color: var(--c-text);
  border-bottom: 1px solid rgba(10, 10, 10, .25);
  transition: border-color .15s;
}
.text-page a:hover { border-bottom-color: var(--c-text); }

.text-list {
  list-style: none;
  margin: 0 0 16px;
}
.text-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-text-2);
  margin-bottom: 8px;
}
.text-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 4px; height: 1px;
  background: var(--c-text-3);
}

/* Таблица зон. На узком экране уезжает горизонтально внутри своей обёртки —
   страница целиком горизонтально не скроллится. */
.text-table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}
.text-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}
.text-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-3);
  font-weight: 400;
  padding: 0 16px 10px 0;
  border-bottom: 1px solid #EAEAEA;
}
.text-table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid #F2F2F2;
  color: var(--c-text-2);
  line-height: 1.55;
  vertical-align: top;
}
.text-table td:first-child { color: var(--c-text); white-space: nowrap; }
.text-table td:nth-child(3) { white-space: nowrap; color: var(--c-text); }

/* Предупреждение про пошлины. Единственный цветной блок на странице —
   именно его люди не должны пролистать. */
.text-note {
  border-left: 2px solid var(--c-orange);
  padding: 4px 0 4px 20px;
  margin: 32px 0;
}
.text-note-label {
  display: block;
  color: var(--c-text-3);
  margin-bottom: 10px;
}
.text-note p { margin-bottom: 0; color: var(--c-text); }

.text-facts {
  display: block;
  margin-top: 32px;
  color: var(--c-text-3);
}

.text-updated {
  display: block;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid #F2F2F2;
  color: var(--c-text-3);
}

/* 404 — та же сетка, но по центру экрана, без длинного текста */
.text-page-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.text-page-404 a { border-bottom: none; }
/* .text-page a задаёт цвет текста — на чёрной кнопке он делает надпись невидимой.
   Возвращаем белый явно, иначе кнопка выглядит как чёрный прямоугольник. */
/* Селектор с .text-page обязателен: у `.text-page a` специфичность выше,
   чем у одного класса, и надпись на кнопке остаётся чёрной. */
.text-page a.text-404-btn {
  margin-top: 16px;
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .text-page { padding: 100px 20px 80px; }
  .text-lead { font-size: 15px; margin-bottom: 36px; }
  .text-page p, .text-list li { font-size: 14px; }
  .text-h2 { margin: 36px 0 14px; }

  /* Таблица зон доставки на телефоне: горизонтальный скролл внутри узкой
     обёртки обрезал список стран на середине слова. Разворачиваем строки
     в карточки — тот же контент, без прокрутки в сторону. */
  .text-table-wrap { overflow-x: visible; }
  .text-table { min-width: 0; }
  .text-table thead { display: none; }
  .text-table, .text-table tbody, .text-table tr, .text-table td {
    display: block;
    width: auto;
  }
  .text-table tr {
    padding: 16px 0;
    border-bottom: 1px solid #F2F2F2;
  }
  .text-table td {
    padding: 2px 0;
    border-bottom: none;
    white-space: normal;
  }
  .text-table td:first-child { font-size: 15px; margin-bottom: 6px; }
  .text-table td:nth-child(n+2)::before {
    display: block;
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-bottom: 2px;
  }
  .text-table td:nth-child(2)::before { content: "Countries"; }
  .text-table td:nth-child(3)::before { content: "Cost"; }
  .text-table td:nth-child(4)::before { content: "Time"; }
}

/* Якорь Returns (terms.html#returns): фиксированная шапка иначе накрывает
   заголовок раздела. Правило на любой заголовок текстовой страницы с id —
   появятся другие якоря, отдельного правила не понадобится. (2026-09-19, S13) */
.text-page .text-h2[id] {
  scroll-margin-top: var(--header-h);
}