/* Единственная таблица стилей GOBLES.

   Язык вёрстки снят с образца, показанного заказчиком (замер - _refmeasure.js): светлый сайт
   с чередованием белого и кремового, широкий ритм секций (100px), центрированные serif-заголовки
   с надстрочной меткой капсом, карточки в тонкой песочной рамке, винные кнопки-пилюли,
   шаги огромными числами, таблица с цветной шапкой, аккордеоны вопросов в две колонки,
   финальная винная полоса со снимком и светлый подвал в четыре колонки.
   Копируем композицию и ритм, а не файлы: имена классов, шрифты и палитра здесь свои.

   Палитра приезжает подстановкой из _tokens.js на сборке - маркер VARS ниже заменяется на
   готовый блок :root. Второй копии цветов здесь быть не должно: имена переменных живут ещё
   и в проверке футпринта, и разъедутся молча.

   Внутри комментариев нельзя писать последовательность "звёздочка-слэш": она закрывает
   комментарий досрочно, остаток шапки становится кодом и первое правило после него
   (обычно :root) выбрасывается целиком - кнопки цвета фона, то есть невидимые.

   Порядок: сброс, каркас, шапка, полосы, типографика, кнопки, карточки, первый экран,
   блоки главной, PDP, заметки, подборщик, подвал, мобильные правки одним куском. */

:root {
  --gbl-ink: #121317;
  --gbl-ink-soft: #1f2027;
  --gbl-paper: #ffffff;
  --gbl-sand: #eae4dc;
  --gbl-cream: #f7f3ea;
  --gbl-edge: #ede5d4;
  --gbl-taupe: #7c766e;
  --gbl-wine: #8d2438;
  --gbl-wine-deep: #6a1728;
  --gbl-blush: #c98a94;
  --gbl-rule: rgba(18,19,23,.13);
  --gbl-rule-dark: rgba(255,255,255,.17);
  --gbl-display: 'Gloock', Georgia, serif;
  --gbl-text: 'Host Grotesk', system-ui, sans-serif;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body.soireeframe {
  margin: 0;
  background: var(--gbl-paper);
  color: var(--gbl-ink);
  font-family: var(--gbl-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Клиентский js прячет карточки подборщика через свойство hidden. Карточка - flex-колонка,
   и её display перебил бы hidden, если бы не эта строка. */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gbl-wine); outline-offset: 2px; }

/* ---- каркас -------------------------------------------------------------------------------
   Контейнер 1200 - как у образца; ниже 1200 держим поля 48px. */

.soireerow { width: min(1200px, 100% - 48px); margin-inline: auto; }

.soireemain { display: block; }

.velvetskip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--gbl-ink); color: var(--gbl-paper);
  padding: 12px 20px; text-decoration: none; font-weight: 600;
}
.velvetskip:focus { left: 12px; top: 12px; }

/* ---- шапка: узкая светлая, кнопка-пилюля справа --------------------------------------------
   Верхний ярус (.velvettop) - кремовая полоса с цифрами каталога, нижний (.velvetline) - белый
   ряд со знаком, меню и пилюлей. Липкая ВСЯ шапка целиком: два разных top у вложенных sticky
   наезжают сами на себя на прокрутке. */

.soireehead {
  position: sticky; top: 0; z-index: 40;
  background: var(--gbl-paper); color: var(--gbl-ink);
  border-bottom: 1px solid var(--gbl-edge);
}
.soireehead a { text-decoration: none; }

.velvettop { background: var(--gbl-cream); border-bottom: 1px solid var(--gbl-edge); }
.velvettop .soireerow {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  min-height: 36px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gbl-taupe);
}
.velvettop span { display: inline-flex; align-items: center; gap: 9px; }
/* Метка-разделитель псевдоэлементом, а не символом в тексте: символ уехал бы в выдачу поиска. */
.velvettop span::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gbl-wine);
}
.velvettop a { margin-left: auto; color: var(--gbl-wine-deep); font-weight: 600; }
.velvettop a:hover { color: var(--gbl-ink); }

.velvetline .soireerow {
  display: flex; align-items: center; gap: 26px; min-height: 78px; flex-wrap: wrap;
}

.velvetbrand { height: 42px; width: auto; display: block; }

/* margin-right: auto у меню: пустой ход уходит вправо, перед кнопкой. */
.velvetmenu { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; margin-right: auto; }
.velvetmenu a {
  font-size: 14px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gbl-ink);
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.velvetmenu a:hover { color: var(--gbl-wine); border-bottom-color: var(--gbl-wine); }
.velvetmenu a[aria-current="page"] { color: var(--gbl-wine-deep); border-bottom-color: var(--gbl-wine-deep); }

.velvetcta {
  flex: none;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 26px; border-radius: 999px;
  background: var(--gbl-wine); color: var(--gbl-paper);
  border: 1px solid var(--gbl-wine);
  transition: background .15s, border-color .15s;
}
.velvetcta:hover { background: var(--gbl-wine-deep); border-color: var(--gbl-wine-deep); }

/* ---- полосы-секции -------------------------------------------------------------------------
   Ритм образца: 100px сверху и снизу, фоны чередуются белый / кремовый; тёмная полоса
   остаётся для миссии и цифр. */

.sashband { padding: 100px 0; }
.sashplain { background: var(--gbl-paper); }
.sashtint { background: var(--gbl-cream); }
.sashdark { background: var(--gbl-ink); color: var(--gbl-paper); }

.sashdark .sashsub { color: rgba(255,255,255,.72); }
.sashdark .sashkick { color: var(--gbl-blush); }

/* Заголовочный блок секции: метка капсом, крупный serif по центру, серый подзаголовок под ним.
   Обёртка нужна отдельным классом - на PDP и в заметках заголовки остаются левыми. */
.sashcrown { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.sashcrown .sashsub { margin-inline: auto; }
.sashcrown :last-child { margin-bottom: 0; }
/* Шапка страницы: тот же блок, но в полосе он один. Нижние 52px там отделяли бы заголовок
   от пустоты и растили тёмную полосу зря. */
.soireerow > .sashcrown:only-child { margin-bottom: 0; }

.sashtitle {
  font-family: var(--gbl-display);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.14; font-weight: 400; letter-spacing: -.018em;
  margin: 0 0 16px;
}
.sashsub {
  font-size: 17px; line-height: 1.7; color: var(--gbl-taupe);
  margin: 0 0 22px; max-width: 62ch;
}

h2, h3 { font-family: var(--gbl-display); font-weight: 400; letter-spacing: -.012em; }

/* Метка над заголовком: капс с чёрточками по бокам. Чёрточки псевдоэлементами, чтобы в текст
   страницы не попали лишние символы. */
.sashkick {
  display: block;
  font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gbl-wine); margin: 0 0 16px;
}
.sashcrown .sashkick { display: flex; align-items: center; justify-content: center; gap: 12px; }
.sashcrown .sashkick::before, .sashcrown .sashkick::after {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5;
}
.sashkick a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---- кнопки -------------------------------------------------------------------------------
   Пилюли у навигационных кнопок (радиус 24 у образца), прямоугольная широкая - у покупки. */

.sealbtn, .sealghost, .sealbuy {
  display: inline-block; cursor: pointer;
  font-family: var(--gbl-text);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 30px; margin: 0 10px 10px 0;
  border-radius: 999px; text-decoration: none; text-align: center;
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.sealbtn { background: var(--gbl-wine); color: var(--gbl-paper); border-color: var(--gbl-wine); }
.sealbtn:hover { background: var(--gbl-wine-deep); border-color: var(--gbl-wine-deep); }

.sealghost { background: transparent; color: inherit; border-color: currentColor; }
.sealghost:hover { background: var(--gbl-ink); color: var(--gbl-paper); border-color: var(--gbl-ink); }
.sashdark .sealghost:hover { background: var(--gbl-paper); color: var(--gbl-ink); border-color: var(--gbl-paper); }

/* Кнопка покупки: широкая винная плашка почти без скругления - как в карточке образца. */
.sealbuy {
  background: var(--gbl-wine); color: var(--gbl-paper); border-color: var(--gbl-wine);
  border-radius: 4px; padding: 15px 26px;
}
.sealbuy:hover { background: var(--gbl-wine-deep); border-color: var(--gbl-wine-deep); }

/* ---- карточка-плитка товара ----------------------------------------------------------------
   Белая карточка в песочной рамке, радиус 6, снимок сверху во всю ширину, текст с полями. */

.gowngrid {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}

.gownplate {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--gbl-paper); border: 1px solid var(--gbl-edge); border-radius: 6px;
  overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.gownplate:hover {
  border-color: var(--gbl-blush);
  box-shadow: 0 14px 34px rgba(18,19,23,.09);
  transform: translateY(-3px);
}

.gownshot {
  position: relative; display: block; overflow: hidden;
  background: #fff; border-bottom: 1px solid var(--gbl-edge);
  aspect-ratio: 4 / 5;
}
.gownshot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.gownplate:hover .gownshot img { transform: scale(1.04); }

.gownbadge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--gbl-paper); color: var(--gbl-wine-deep);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gbl-edge);
}

/* Текстовая часть карточки: поля 22px, кнопка прижата к низу. */
.gowncore { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px; min-width: 0; }

.gownname { font-family: var(--gbl-text); font-size: 16px; line-height: 1.4; font-weight: 600; margin: 0 0 10px; }
.gownname a { text-decoration: none; }
.gownname a:hover { color: var(--gbl-wine); }

.gownspec {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 13px; color: var(--gbl-taupe);
}
.sashdark .gownspec { color: rgba(255,255,255,.66); }

.gownprice {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-family: var(--gbl-display);
  font-size: 21px; font-weight: 400; margin: 0;
}

/* Приписка у цены: у образца цифра в карточке подписана мелким капсом.
   ⚠ <em> браузер набирает курсивом — тег взят за смысл, вид возвращаем руками. */
.gowncue {
  font-family: var(--gbl-text); font-style: normal;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gbl-taupe);
}

/* Кнопка проверки цены прижата к низу плитки: имена разной длины, без этого кнопки в ряду
   скачут по высоте. */
.gownact { margin: auto 0 0; padding-top: 18px; }
.gownact .sealbuy { display: block; width: 100%; margin: 0; padding: 13px 14px; font-size: 12px; }

/* Звёзды долями: ширина внутреннего слоя равна проценту рейтинга. */
.glintchip {
  position: relative; display: inline-block;
  width: 74px; height: 13px; flex: none;
  background: linear-gradient(var(--gbl-rule), var(--gbl-rule));
  -webkit-mask: repeat-x left center / 14.8px 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.6 7 .8-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E");
  mask: repeat-x left center / 14.8px 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.6 7 .8-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E");
}
.glintchip i { display: block; height: 100%; background: var(--gbl-wine); }
.sashdark .glintchip { background: linear-gradient(var(--gbl-rule-dark), var(--gbl-rule-dark)); }
.sashdark .glintchip i { background: var(--gbl-blush); }

/* ---- первый экран: снимок во всю полосу под тёмной вуалью -----------------------------------
   Слой .entryhaze лежит фоном, вуаль - его псевдоэлемент; текст идёт поверх. */

.entryscene { position: relative; overflow: hidden; background: var(--gbl-ink); color: var(--gbl-paper); }

.entryhaze { position: absolute; inset: 0; z-index: 0; }
.entryhaze img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.entryhaze::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(18,19,23,.93) 0%, rgba(18,19,23,.82) 46%, rgba(18,19,23,.55) 100%);
}

.entryscene .soireerow { position: relative; z-index: 2; padding: 140px 0 100px; }

/* ⚠ Ширина колонки 620px, а не 44ch: под цифрами внизу лежит ряд из трёх, и на 44ch
   (около 400px) третья цифра уходила на вторую строку - счётчики вставали столбиком.
   Абзацы держат свою меру сами, поэтому расширять колонку безопасно. */
.entrycopy { min-width: 0; max-width: 620px; }
.entrycopy .sashtitle { font-size: clamp(36px, 5.6vw, 64px); margin-bottom: 20px; }
.entrycopy .sashsub { font-size: 18px; max-width: 48ch; color: rgba(255,255,255,.76); }

/* Бейдж-рамка над заголовком: тонкая капсула капсом, как у образца. */
.entrytag {
  display: inline-block; margin: 0 0 22px;
  padding: 9px 20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.34);
  font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gbl-paper);
}

.entrystat {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--gbl-rule-dark);
}
.entrystat div { min-width: 0; }
.entrystat b {
  display: block; font-family: var(--gbl-display);
  font-size: 34px; font-weight: 400; line-height: 1;
}
.entrystat span {
  display: block; margin-top: 8px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62);
}

/* Лента «следом по отзывам»: снимок в ноготь и цена, без звёзд. */
.glamrail {
  display: grid; gap: 20px; grid-template-columns: repeat(5, 1fr);
  margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--gbl-rule-dark);
}
.glamitem { display: flex; gap: 14px; align-items: center; text-decoration: none; min-width: 0; }
.glamitem img { flex: none; width: 66px; height: 82px; object-fit: cover; background: #fff; border-radius: 4px; }
.glamitem span { min-width: 0; }
/* ⚠ Имя карточки — предложение на строку; в колонке шириной в ноготь оно разворачивалось
   в пять строк и рейл разъезжался по высоте. Режем показом двух строк, текст остаётся целым. */
.glamitem strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; line-height: 1.35; font-weight: 600;
}
.glamitem i {
  display: block; font-style: normal; margin-top: 6px;
  font-family: var(--gbl-display); font-size: 15px; color: var(--gbl-blush);
}
.glamitem:hover strong { color: var(--gbl-blush); }

/* ---- usp-полоса ----------------------------------------------------------------------------
   У образца это четыре карточки в рамке, а не подчёркнутые колонки. */

.poiserow { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }
.poisecard {
  background: var(--gbl-paper); border: 1px solid var(--gbl-edge); border-radius: 6px;
  padding: 30px 26px; min-width: 0; text-align: center;
}
.poisecard h2 { font-size: 20px; margin: 0 0 10px; }
.poisecard p { margin: 0; font-size: 15px; color: var(--gbl-taupe); line-height: 1.65; }

/* ---- плитки категорий (и рейлы-ссылки) ------------------------------------------------------
   min-height: 0 обязателен: флекс-элемент с aspect-ratio отказывается сжиматься ниже
   содержимого, и ряд плиток разъезжается по высоте на узких экранах. */

.rackfront { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.rackpanel {
  position: relative; display: flex; min-height: 0;
  aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--gbl-ink); color: var(--gbl-paper);
  text-decoration: none; border-radius: 6px;
}
.rackpanel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .5; transition: transform .4s ease, opacity .3s;
}
.rackpanel:hover img { transform: scale(1.06); opacity: .38; }
/* ⚠ Плашка должна давить до самого верха своей высоты: у товарных снимков фон белый,
   и на мягком градиенте подпись «11 pieces from $17.99» тонула в нём почти дословно. */
.rackpanel span {
  position: relative; z-index: 2; margin-top: auto; padding: 34px 24px 24px;
  display: block; width: 100%;
  background: linear-gradient(to top, rgba(18,19,23,.96) 0%, rgba(18,19,23,.8) 58%, rgba(18,19,23,0) 100%);
}
.rackpanel strong {
  display: block; font-family: var(--gbl-display);
  font-size: 22px; font-weight: 400; line-height: 1.2;
}
.rackpanel i {
  display: block; font-style: normal; margin-top: 6px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7);
}

/* Рейл «читать дальше»: те же плитки, но без снимков - фиксированной пропорции не даём. */
.encorereel { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
.encorereel .rackpanel { aspect-ratio: auto; min-height: 150px; }
.encorereel .rackpanel span { background: none; }

/* ---- пиллы и полоса цифр ------------------------------------------------------------------- */

.cluerow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }

.cluepill {
  display: inline-block; text-decoration: none;
  background: var(--gbl-paper); border: 1px solid var(--gbl-edge);
  padding: 11px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s;
}
.cluepill:hover { background: var(--gbl-wine); color: var(--gbl-paper); border-color: var(--gbl-wine); }

.toastband { display: grid; gap: 28px; grid-template-columns: repeat(4, 1fr); text-align: center; }
.toastband > div { padding: 0 12px; border-left: 1px solid var(--gbl-rule-dark); }
.toastband > div:first-child { border-left: none; }
.toastnum {
  display: block; font-family: var(--gbl-display);
  font-size: clamp(32px, 4.2vw, 48px); font-weight: 400; line-height: 1;
}
.toastlabel {
  display: block; margin-top: 10px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.68);
}

/* ---- промо-дуэт ---------------------------------------------------------------------------- */

.duetpair { display: grid; gap: 26px; grid-template-columns: repeat(2, 1fr); }
.duetslab {
  padding: 48px; border-radius: 6px;
  background: var(--gbl-cream); border: 1px solid var(--gbl-edge);
}
/* Фон и цвет назначаются вместе: одиночный фон пережил бы переопределение тёмной полосы,
   а цвет текста нет - заголовок стал бы невидим (случай ynd). */
.duetslab.sashdark {
  background: var(--gbl-ink); color: var(--gbl-paper); border-color: var(--gbl-ink);
}
.duetslab h2 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.16; margin: 0 0 14px; }
.duetslab p { margin: 0 0 26px; color: var(--gbl-taupe); max-width: 46ch; }
.duetslab.sashdark p { color: rgba(255,255,255,.72); }

/* ---- ценности, шаги, справка ---------------------------------------------------------------
   Шаги образца: огромное число, под ним чёрточка, затем заголовок и текст. */

.gracerow { display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr); }
.graceitem { min-width: 0; text-align: center; }
.graceitem svg { width: 36px; height: 36px; color: var(--gbl-wine); margin: 0 auto 16px; }
.graceitem h3 { font-size: 21px; margin: 0 0 10px; }
.graceitem p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--gbl-taupe); }

.primpcols { display: grid; gap: 44px; grid-template-columns: repeat(3, 1fr); align-items: start; }

.primplist { list-style: none; margin: 0; padding: 0; display: contents; }
.primplist li { display: block; margin: 0; min-width: 0; }
.primplist strong {
  display: block; font-family: var(--gbl-display); font-weight: 400;
  font-size: 22px; margin-bottom: 10px;
}
.primplist span { display: block; font-size: 15px; line-height: 1.7; color: var(--gbl-taupe); }

.primpnum {
  display: block; margin-bottom: 16px; padding-bottom: 16px;
  font-family: var(--gbl-display); font-size: 54px; line-height: 1;
  color: var(--gbl-blush);
  border-bottom: 1px solid var(--gbl-edge);
}

/* Справочная таблица: цветная шапка (первая ячейка чернильная, остальные винные),
   строки через одну кремовые. */
.hemrows {
  width: 100%; border-collapse: collapse; margin: 0 auto;
  font-size: 15px; background: var(--gbl-paper);
  border: 1px solid var(--gbl-edge); border-radius: 6px; overflow: hidden;
}
.hemrows caption {
  caption-side: top; text-align: center; padding-bottom: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gbl-taupe);
}
.hemrows th, .hemrows td {
  padding: 14px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--gbl-edge);
}
.hemrows thead th {
  font-family: var(--gbl-text); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--gbl-wine); color: var(--gbl-paper); border-bottom: none;
}
.hemrows thead th:first-child { background: var(--gbl-ink); }
.hemrows tbody th { font-weight: 600; }
.hemrows tbody tr:nth-child(even) { background: var(--gbl-cream); }
.hemrows tbody tr:last-child th, .hemrows tbody tr:last-child td { border-bottom: none; }

ul.trimlist { margin: 22px 0; padding: 0; list-style: none; }
ul.trimlist li {
  position: relative; padding: 0 0 12px 26px; font-size: 16px;
}
ul.trimlist li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gbl-wine);
}

/* ---- spotlight, уход, миссия --------------------------------------------------------------- */

.musewrap {
  display: grid; gap: 48px; grid-template-columns: 420px 1fr; align-items: center;
  background: var(--gbl-paper); border: 1px solid var(--gbl-edge); border-radius: 6px;
  padding: 40px; max-width: 1040px; margin-inline: auto;
}
.museframe {
  display: block; position: relative; overflow: hidden; border-radius: 6px;
  aspect-ratio: 4 / 5; background: #fff; border: 1px solid var(--gbl-edge);
}
.museframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.musebody { min-width: 0; }
.musebody h3 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.18; margin: 0 0 16px; }
.musebody h3 a { text-decoration: none; }
.musebody > p { margin: 0 0 18px; color: var(--gbl-taupe); max-width: 58ch; }

.pressduo { display: grid; gap: 26px; grid-template-columns: repeat(2, 1fr); align-items: start; }

.presslist {
  background: var(--gbl-paper); border: 1px solid var(--gbl-edge); border-radius: 6px;
  padding: 34px 32px;
}
.presslist h3 { margin: 0 0 16px; font-size: 22px; }
.presslist ul { margin: 0; padding-left: 20px; }
.presslist li { margin-bottom: 11px; font-size: 15px; line-height: 1.6; color: var(--gbl-taupe); }

/* Миссия: текст слева, снимок справа. */
.pledgeband { display: grid; gap: 48px; grid-template-columns: 1.15fr .85fr; align-items: center; }
.pledgeband .sashcrown { text-align: left; margin: 0; max-width: none; }
.pledgeband .sashcrown .sashkick { justify-content: flex-start; }
.pledgeband .sashcrown .sashkick::before { display: none; }
.pledgeband .sashcrown .sashsub { margin-inline: 0; }

/* ---- velvet-подборка фото-плитками --------------------------------------------------------- */

.twirlband { min-width: 0; }

.twirlframe {
  display: block; overflow: hidden; border-radius: 6px; min-width: 0;
  border: 1px solid var(--gbl-edge); background: var(--gbl-cream);
}
.twirlframe img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .35s ease; }
.twirlframe:hover img { transform: scale(1.03); }
.sashdark .twirlframe { border-color: var(--gbl-rule-dark); background: var(--gbl-ink-soft); }

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

.twirltile { min-width: 0; text-align: center; }
/* Подпись обычным набором, не капсом: под ней стоит обрезанное имя кроя длиной в полстроки. */
.twirltile > a:not(.twirlframe) {
  display: inline-block; margin-top: 14px; text-decoration: none;
  font-size: 13.5px; line-height: 1.5; font-weight: 500;
  color: var(--gbl-ink); border-bottom: 1px solid var(--gbl-wine);
}
.twirltile > a:not(.twirlframe):hover { color: var(--gbl-wine); }
.sashdark .twirltile > a:not(.twirlframe) { color: var(--gbl-blush); border-bottom-color: currentColor; }
.sashdark .twirltile > a:not(.twirlframe):hover { color: var(--gbl-paper); }

/* ---- SEO-заметка, вопросы и отзывы --------------------------------------------------------- */

.salonnote { display: grid; gap: 40px; grid-template-columns: 320px 1fr; align-items: start; }
.salonhead {
  font-size: clamp(26px, 3vw, 36px); line-height: 1.16; margin: 0;
  position: sticky; top: 140px;
}
.salonbody { min-width: 0; }
/* Тот же блок дважды: с заголовком в колонке и без него. Без этого правила одинокое тело
   садилось бы в колонку 320px при пустой половине экрана. */
.salonbody:only-child { grid-column: 1 / -1; }
.salonbody > p { margin: 0 0 18px; font-size: 17px; line-height: 1.75; max-width: 74ch; }
.salonbody h3 { font-size: 23px; margin: 30px 0 12px; }

/* Вопросы главной: два столбца аккордеонов в рамке. Раскрывает браузер тегом details -
   своего js тут нет. */
.askgrid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); align-items: start; }

.askcard {
  background: var(--gbl-paper); border: 1px solid var(--gbl-edge); border-radius: 6px;
  padding: 22px 26px;
}
.askcard summary {
  cursor: pointer; list-style: none;
  font-family: var(--gbl-display); font-size: 19px; line-height: 1.35;
  display: flex; align-items: flex-start; gap: 14px;
}
.askcard summary::-webkit-details-marker { display: none; }
/* Знак «плюс» рисуем псевдоэлементом и поворачиваем в «минус» на раскрытии: символ в разметке
   уехал бы в текст страницы. */
.askcard summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: 8px;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--gbl-wine), var(--gbl-wine)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--gbl-wine), var(--gbl-wine)) center / 1.5px 13px no-repeat;
  transition: transform .2s;
}
.askcard[open] summary::after { transform: rotate(90deg); background-size: 13px 1.5px, 0 0; }
.askcard p { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--gbl-taupe); }

.whisperrow { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.whisperquote {
  margin: 0; padding: 32px 28px;
  background: var(--gbl-paper); border: 1px solid var(--gbl-edge); border-radius: 6px;
}
.whisperquote .glintchip { margin-bottom: 16px; }
.whisperquote p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--gbl-taupe); }
.whispername {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--gbl-edge);
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gbl-ink);
}

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

.encoreband {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch;
  background: var(--gbl-wine); color: var(--gbl-paper);
  border-radius: 6px; overflow: hidden;
}
.encoreband > div { padding: 64px 56px; align-self: center; }
/* Заголовочный блок тут левый: .sashcrown по умолчанию центрирует и режется по 720px,
   а половина полосы уже этого - текст встал бы столбиком посередине винного поля. */
.encoreband .sashcrown { text-align: left; margin: 0 0 26px; max-width: none; }
.encoreband .sashcrown .sashkick { justify-content: flex-start; }
.encoreband .sashcrown .sashkick::before { display: none; }
.encoreband .sashcrown .sashsub { margin-inline: 0; }
/* ⚠ Метка по умолчанию винная - на винном поле её просто нет. */
.encoreband .sashkick { color: rgba(255,255,255,.78); }
.encoreband .sashtitle { margin-bottom: 16px; }
.encoreband .sashsub { color: rgba(255,255,255,.8); max-width: 44ch; }
.encoreband .sealghost { border-color: rgba(255,255,255,.6); }
.encoreband .sealghost:hover { background: var(--gbl-paper); color: var(--gbl-wine-deep); border-color: var(--gbl-paper); }
.encoreband .sealbtn { background: var(--gbl-paper); color: var(--gbl-wine-deep); border-color: var(--gbl-paper); }
.encoreband .sealbtn:hover { background: var(--gbl-ink); color: var(--gbl-paper); border-color: var(--gbl-ink); }

.encoreshot { position: relative; min-height: 300px; }
.encoreshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- страница товара ----------------------------------------------------------------------- */

.charmpath { padding: 20px 0 0; font-size: 12.5px; color: var(--gbl-taupe); }
.charmpath .soireerow { display: block; }
.charmpath a { color: var(--gbl-taupe); text-decoration: none; }
.charmpath a:hover { color: var(--gbl-wine); }
.charmpath i { font-style: normal; margin: 0 8px; opacity: .5; }
.charmpath [aria-current] { color: var(--gbl-ink); }

.fitmain { display: grid; gap: 48px; grid-template-columns: 460px 1fr; align-items: start; }
.fitshot {
  position: relative; overflow: hidden; border-radius: 6px;
  aspect-ratio: 4 / 5; background: #fff; border: 1px solid var(--gbl-edge);
}
.fitshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fitside { min-width: 0; }
.fitside .sashtitle { font-size: clamp(25px, 3vw, 36px); }
.fitside .gownprice { font-size: 32px; margin: 18px 0 20px; }
.fitside .cluerow { margin-top: 24px; justify-content: flex-start; }
.fitword { font-size: 17px; line-height: 1.7; color: var(--gbl-taupe); margin: 16px 0; max-width: 58ch; }

.fitspec {
  width: 100%; border-collapse: collapse; font-size: 15px; max-width: 720px;
  border: 1px solid var(--gbl-edge); border-radius: 6px; overflow: hidden;
}
.fitspec th, .fitspec td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--gbl-edge); }
.fitspec th { width: 210px; font-weight: 600; }
.fitspec tr:nth-child(odd) { background: var(--gbl-cream); }
.fitspec tr:last-child th, .fitspec tr:last-child td { border-bottom: none; }

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

/* ---- заметки ------------------------------------------------------------------------------- */

.journalroll { max-width: 74ch; margin-inline: auto; }
.journalsec { margin-bottom: 36px; }
.journalhead { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.22; margin: 0 0 14px; }
.journalsec p { margin: 0; font-size: 17px; line-height: 1.78; }

.journalfacts {
  background: var(--gbl-cream); border: 1px solid var(--gbl-edge); border-radius: 6px;
  padding: 30px 32px; margin: 36px 0;
}
.journalfacts h2 { font-size: 20px; margin: 0 0 14px; }
.journalfacts ul { margin: 0; padding-left: 20px; }
.journalfacts li { margin-bottom: 10px; font-size: 15px; line-height: 1.6; color: var(--gbl-taupe); }

.journalclose { border-top: 1px solid var(--gbl-edge); padding-top: 28px; }
.journalclose h2 { font-size: 24px; margin: 0 0 12px; }
.journalclose p { margin: 0; font-size: 17px; line-height: 1.72; }

/* ---- подборщик ----------------------------------------------------------------------------- */

form.galadeck {
  margin: 0; display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); align-items: start;
  background: var(--gbl-paper); border: 1px solid var(--gbl-edge); border-radius: 6px; padding: 36px;
}
form.galadeck > p { grid-column: 1 / -1; margin: 0; color: var(--gbl-taupe); }

.galadeck fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.galadeck legend {
  padding: 0; margin-bottom: 10px;
  font-family: var(--gbl-display); font-size: 21px;
}
.galadeck fieldset .sashsub { font-size: 15px; margin-bottom: 14px; }

.galachoice {
  cursor: pointer; font-family: var(--gbl-text); font-size: 14px;
  background: var(--gbl-paper); color: var(--gbl-ink);
  border: 1px solid var(--gbl-edge); border-radius: 999px;
  padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px;
  margin: 0 8px 8px 0;
  transition: background .15s, color .15s, border-color .15s;
}
.galachoice i {
  font-style: normal; font-size: 12px; color: var(--gbl-taupe);
  background: var(--gbl-cream); border-radius: 999px; padding: 1px 8px;
}
.galachoice:hover { border-color: var(--gbl-wine); }
.galachoice[aria-pressed="true"] { background: var(--gbl-wine); color: var(--gbl-paper); border-color: var(--gbl-wine); }
.galachoice[aria-pressed="true"] i { background: rgba(255,255,255,.22); color: var(--gbl-paper); }

.galayield {
  display: grid; gap: 28px; margin-top: 30px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}

/* ---- подвал: светлый, четыре колонки --------------------------------------------------------
   У образца подвал не тёмный, а кремовый с тонкой линией над мелким текстом. */

.nightfoot {
  background: var(--gbl-cream); color: var(--gbl-ink);
  border-top: 1px solid var(--gbl-edge); padding: 76px 0 40px;
}
.nightfootcols {
  display: grid; gap: 40px; padding-bottom: 34px;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--gbl-edge);
}
.nightfootcols ul { list-style: none; margin: 0; padding: 0; }
.nightfootcols li { margin-bottom: 10px; }
.nightfootcols a { color: var(--gbl-taupe); text-decoration: none; font-size: 15px; }
.nightfootcols a:hover { color: var(--gbl-wine); }

.nightfootcols h2 {
  font-family: var(--gbl-text); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gbl-ink); margin: 0 0 16px;
}
.nightfootcols > div > p { font-size: 14px; line-height: 1.65; color: var(--gbl-taupe); margin: 18px 0 0; max-width: 40ch; }

/* Почтовый адрес. font-style: normal обязателен: address браузер набирает курсивом.
   Приписка (.nightaddr i возвращает прямое начертание) объясняет, чем адрес НЕ является:
   человек читает адрес как магазин, а магазина нет. */
.nightaddr {
  font-style: normal; font-size: 14px; line-height: 1.7;
  color: var(--gbl-taupe); margin: 18px 0 0; max-width: 42ch;
}
.nightaddr b {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gbl-ink); margin-bottom: 8px;
}
.nightaddr i { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--gbl-taupe); opacity: .8; }

.nightfootnote { font-size: 13px; color: var(--gbl-taupe); margin: 22px 0 0; line-height: 1.65; }
.nightfootnote a { color: var(--gbl-ink); }

/* ---- мобильные правки одним куском ---------------------------------------------------------
   Три порога. 1080 - планшет: двухколонники в столбец, четвёрки в пары. 760 - телефон:
   служебная полоса шапки прячется, меню уезжает третьей строкой с горизонтальной прокруткой,
   почти всё в один столбец. 460 - узкий телефон: последние пары в столбец.
   Проверять на 500px: new-headless уже не умеет, обрезка справа на 390 - артефакт съёмки. */

@media (max-width: 1080px) {
  .sashband { padding: 72px 0; }
  .sashcrown { margin-bottom: 40px; }

  .pledgeband, .primpcols { grid-template-columns: 1fr; }
  .primpcols { gap: 34px; }

  .salonnote { grid-template-columns: 1fr; }
  .salonhead { position: static; }

  .fitmain { grid-template-columns: 340px 1fr; gap: 34px; }
  .musewrap { grid-template-columns: 300px 1fr; gap: 32px; padding: 30px; }

  .poiserow, .twirlgrid, .whisperrow, .fittrail { grid-template-columns: repeat(2, 1fr); }

  form.galadeck { grid-template-columns: 1fr; }

  .encoreband { grid-template-columns: 1fr; }
  .encoreband > div { padding: 48px 36px; }
  .encoreshot { min-height: 260px; }

  .entryscene .soireerow { padding: 96px 0 76px; }

  /* Снимок в столбце ниже текста: полное 4:5 заняло бы два экрана. */
  .pledgeband .twirlframe img { aspect-ratio: 16 / 10; }
}

@media (max-width: 760px) {
  body.soireeframe { font-size: 16px; }
  .soireerow { width: calc(100% - 32px); }
  .sashband { padding: 54px 0; }
  .sashsub { font-size: 16px; }
  .entrycopy .sashsub { font-size: 17px; }

  .velvettop { display: none; }
  .velvetline .soireerow { gap: 14px; min-height: 58px; padding: 8px 0; }
  .velvetbrand { height: 34px; }
  .velvetcta { margin-left: auto; padding: 10px 16px; font-size: 11.5px; letter-spacing: .08em; }
  /* Меню третьей строкой во всю ширину; nowrap + прокрутка, а не перенос в три этажа. */
  .velvetmenu {
    order: 3; width: 100%; margin-right: 0;
    flex-wrap: nowrap; overflow-x: auto; gap: 18px;
    padding-bottom: 8px; -webkit-overflow-scrolling: touch;
  }
  .velvetmenu a { white-space: nowrap; font-size: 12.5px; }

  .glamrail, .fittrail, .toastband { grid-template-columns: repeat(2, 1fr); }
  .poiserow, .rackfront, .encorereel, .duetpair, .pressduo, .gracerow, .whisperrow,
  .fitmain, .musewrap, .askgrid { grid-template-columns: 1fr; }
  .twirlgrid { grid-template-columns: repeat(2, 1fr); }

  .toastband > div { border-left: none; }

  .gowngrid { gap: 18px; grid-template-columns: repeat(2, 1fr); }
  .gowncore { padding: 16px; }
  .gownact { padding-top: 14px; }
  .gownact .sealbuy { padding: 12px 8px; font-size: 11px; letter-spacing: .06em; }

  .duetslab { padding: 32px; }

  /* Таблица шире экрана листается внутри себя, а не тянет всю страницу вбок. */
  .hemrows { display: block; overflow-x: auto; white-space: nowrap; }
  .hemrows caption { display: block; }
  .hemrows th, .hemrows td { white-space: normal; min-width: 130px; }

  .sealbtn, .sealghost, .sealbuy { padding: 14px 22px; font-size: 12px; }
  .entryscene .soireerow { padding: 72px 0 58px; }
  .entrystat { gap: 26px; margin-top: 34px; }
  .entrystat b { font-size: 26px; }

  .primpnum { font-size: 42px; }
  .musewrap .museframe { max-width: 340px; }
  .salonbody > p { font-size: 16px; }
  .presslist { padding: 26px 24px; }

  .nightfootcols { grid-template-columns: 1fr; gap: 28px; }
  .nightfoot { padding: 48px 0 30px; }
}

@media (max-width: 460px) {
  .gowngrid, .glamrail, .toastband, .twirlgrid, .galayield { grid-template-columns: 1fr; }
  .sashtitle { font-size: clamp(26px, 7.6vw, 33px); }
  .entrycopy .sashtitle { font-size: clamp(30px, 9vw, 40px); }
  .gownact .sealbuy { font-size: 12px; }
  form.galadeck { padding: 22px; }
}