@charset "UTF-8";
/* line 1, _settings.scss */
:root {
  --bg:var(--draft-bg, #FFFFFF);
  --bg-is-light:var(--draft-bg-is-light, true);
  --bg-minor-shade:var(--draft-bg-minor-shade, #f7f7f7);
  --bg-minor-shade-is-light:var(--draft-bg-minor-shade-is-light, true);
  --bg-major-shade:var(--draft-bg-major-shade, #ededed);
  --bg-major-shade-is-light:var(--draft-bg-major-shade-is-light, true);
  --bg-half-shade:var(--draft-bg-half-shade, #808080);
  --bg-half-shade-is-dark:var(--draft-bg-half-shade-is-dark, true);
  --color-btn-bg:var(--draft-color-btn-bg, #0D0D0D);
  --color-btn-bg-is-dark:var(--draft-color-btn-bg-is-dark, true);
  --color-btn-bg-minor-shade:var(--draft-color-btn-bg-minor-shade, #252525);
  --color-btn-bg-minor-shade-is-dark:var(--draft-color-btn-bg-minor-shade-is-dark, true);
  --color-btn-bg-major-shade:var(--draft-color-btn-bg-major-shade, #3d3d3d);
  --color-btn-bg-major-shade-is-dark:var(--draft-color-btn-bg-major-shade-is-dark, true);
  --color-btn-bg-half-shade:var(--draft-color-btn-bg-half-shade, #868686);
  --color-btn-bg-half-shade-is-dark:var(--draft-color-btn-bg-half-shade-is-dark, true);
  --color-accent-text:var(--draft-color-accent-text, #55504E);
  --color-accent-text-is-dark:var(--draft-color-accent-text-is-dark, true);
  --color-accent-text-minor-shade:var(--draft-color-accent-text-minor-shade, #67615f);
  --color-accent-text-minor-shade-is-dark:var(--draft-color-accent-text-minor-shade-is-dark, true);
  --color-accent-text-major-shade:var(--draft-color-accent-text-major-shade, #797270);
  --color-accent-text-major-shade-is-dark:var(--draft-color-accent-text-major-shade-is-dark, true);
  --color-accent-text-half-shade:var(--draft-color-accent-text-half-shade, #aca7a5);
  --color-accent-text-half-shade-is-dark:var(--draft-color-accent-text-half-shade-is-dark, true);
  --color-text-dark:var(--draft-color-text-dark, #0D0D0D);
  --color-text-dark-is-dark:var(--draft-color-text-dark-is-dark, true);
  --color-text-dark-minor-shade:var(--draft-color-text-dark-minor-shade, #252525);
  --color-text-dark-minor-shade-is-dark:var(--draft-color-text-dark-minor-shade-is-dark, true);
  --color-text-dark-major-shade:var(--draft-color-text-dark-major-shade, #3d3d3d);
  --color-text-dark-major-shade-is-dark:var(--draft-color-text-dark-major-shade-is-dark, true);
  --color-text-dark-half-shade:var(--draft-color-text-dark-half-shade, #868686);
  --color-text-dark-half-shade-is-dark:var(--draft-color-text-dark-half-shade-is-dark, true);
  --color-text-light:var(--draft-color-text-light, #FFFFFF);
  --color-text-light-is-light:var(--draft-color-text-light-is-light, true);
  --color-text-light-minor-shade:var(--draft-color-text-light-minor-shade, #f7f7f7);
  --color-text-light-minor-shade-is-light:var(--draft-color-text-light-minor-shade-is-light, true);
  --color-text-light-major-shade:var(--draft-color-text-light-major-shade, #ededed);
  --color-text-light-major-shade-is-light:var(--draft-color-text-light-major-shade-is-light, true);
  --color-text-light-half-shade:var(--draft-color-text-light-half-shade, #808080);
  --color-text-light-half-shade-is-dark:var(--draft-color-text-light-half-shade-is-dark, true);
  --icons_pack:var(--draft-icons_pack, insales-default);
  --controls-btn-border-radius:var(--draft-controls-btn-border-radius, 0px);
  --color-notice-warning:var(--draft-color-notice-warning, #fff3cd);
  --color-notice-warning-is-light:var(--draft-color-notice-warning-is-light, true);
  --color-notice-warning-minor-shade:var(--draft-color-notice-warning-minor-shade, #fff0be);
  --color-notice-warning-minor-shade-is-light:var(--draft-color-notice-warning-minor-shade-is-light, true);
  --color-notice-warning-major-shade:var(--draft-color-notice-warning-major-shade, #ffecac);
  --color-notice-warning-major-shade-is-light:var(--draft-color-notice-warning-major-shade-is-light, true);
  --color-notice-warning-half-shade:var(--draft-color-notice-warning-half-shade, #e6b000);
  --color-notice-warning-half-shade-is-dark:var(--draft-color-notice-warning-half-shade-is-dark, true);
  --color-notice-success:var(--draft-color-notice-success, #d4edda);
  --color-notice-success-is-light:var(--draft-color-notice-success-is-light, true);
  --color-notice-success-minor-shade:var(--draft-color-notice-success-minor-shade, #cae9d2);
  --color-notice-success-minor-shade-is-light:var(--draft-color-notice-success-minor-shade-is-light, true);
  --color-notice-success-major-shade:var(--draft-color-notice-success-major-shade, #bee4c7);
  --color-notice-success-major-shade-is-light:var(--draft-color-notice-success-major-shade-is-light, true);
  --color-notice-success-half-shade:var(--draft-color-notice-success-half-shade, #429e58);
  --color-notice-success-half-shade-is-dark:var(--draft-color-notice-success-half-shade-is-dark, true);
  --color-notice-error:var(--draft-color-notice-error, #f8d7da);
  --color-notice-error-is-light:var(--draft-color-notice-error-is-light, true);
  --color-notice-error-minor-shade:var(--draft-color-notice-error-minor-shade, #f6ccd0);
  --color-notice-error-minor-shade-is-light:var(--draft-color-notice-error-minor-shade-is-light, true);
  --color-notice-error-major-shade:var(--draft-color-notice-error-major-shade, #f3bcc1);
  --color-notice-error-major-shade-is-light:var(--draft-color-notice-error-major-shade-is-light, true);
  --color-notice-error-half-shade:var(--draft-color-notice-error-half-shade, #c52330);
  --color-notice-error-half-shade-is-dark:var(--draft-color-notice-error-half-shade-is-dark, true);
  --color-notice-info:var(--draft-color-notice-info, #cce5ff);
  --color-notice-info-is-light:var(--draft-color-notice-info-is-light, true);
  --color-notice-info-minor-shade:var(--draft-color-notice-info-minor-shade, #bedeff);
  --color-notice-info-minor-shade-is-light:var(--draft-color-notice-info-minor-shade-is-light, true);
  --color-notice-info-major-shade:var(--draft-color-notice-info-major-shade, #acd4ff);
  --color-notice-info-major-shade-is-light:var(--draft-color-notice-info-major-shade-is-light, true);
  --color-notice-info-half-shade:var(--draft-color-notice-info-half-shade, #006fe6);
  --color-notice-info-half-shade-is-dark:var(--draft-color-notice-info-half-shade-is-dark, true);
  --font-family:var(--draft-font-family, Inter);
  --font-size:var(--draft-font-size, 17px);
  --font-family-heading:var(--draft-font-family-heading, Montserrat);
  --heading-ratio:var(--draft-heading-ratio, 1.5);
  --heading-weight:var(--draft-heading-weight, 300);
  --collection_count:var(--draft-collection_count, 12);
  --search_count:var(--draft-search_count, 15);
  --blog_size:var(--draft-blog_size, 6);
  --product_not_available:var(--draft-product_not_available, preorder);
  --layout-content-max-width:var(--draft-layout-content-max-width, 1408px);
  --delta_sidebar:var(--draft-delta_sidebar, 2);
  --sidebar_index_show:var(--draft-sidebar_index_show, false);
  --sidebar_index_position:var(--draft-sidebar_index_position, left);
  --sidebar_collection_show:var(--draft-sidebar_collection_show, true);
  --sidebar_collection_position:var(--draft-sidebar_collection_position, left);
  --sidebar_cart_show:var(--draft-sidebar_cart_show, false);
  --sidebar_cart_position:var(--draft-sidebar_cart_position, left);
  --sidebar_product_show:var(--draft-sidebar_product_show, false);
  --sidebar_product_position:var(--draft-sidebar_product_position, left);
  --sidebar_blog_show:var(--draft-sidebar_blog_show, false);
  --sidebar_blog_position:var(--draft-sidebar_blog_position, left);
  --sidebar_article_show:var(--draft-sidebar_article_show, false);
  --sidebar_article_position:var(--draft-sidebar_article_position, left);
  --sidebar_page_show:var(--draft-sidebar_page_show, false);
  --sidebar_page_position:var(--draft-sidebar_page_position, left);
  --sidebar_compare_show:var(--draft-sidebar_compare_show, false);
  --sidebar_compare_position:var(--draft-sidebar_compare_position, left);
  --sidebar_search_show:var(--draft-sidebar_search_show, false);
  --sidebar_search_position:var(--draft-sidebar_search_position, left);
  --feedback_captcha_enabled:var(--draft-feedback_captcha_enabled, true);
  --favorite_enabled:var(--draft-favorite_enabled, true);
  --compare_enabled:var(--draft-compare_enabled, true); }

/* ═══════════════════════════════════════════════════════════════════════
   THE GESTALT — оформление темы

   Файл собирает две вещи. Первая — дизайн-система лендинга (токены,
   гарнитуры, кнопки, секции `.g-*`), перенесённая из прототипа один
   в один. Вторая — приведение системных виджетов InSales к тому же
   регистру: они рисуют каталог, карточку товара и корзину своей
   разметкой, менять её нельзя, но палитру и типографику они наследуют
   отсюда.

   Внутри нет ни одного url() — все картинки подключаются разметкой
   через asset_url, потому что SCSS компилируется платформой и путей
   к медиа в нём не построить.
   ═══════════════════════════════════════════════════════════════════════ */
/* line 19, theme.scss */
.outside-widgets .delete-widget-link {
  display: none; }

/* line 20, theme.scss */
.outside-widgets .add-widget-link {
  display: none; }

/* line 22, theme.scss */
:root {
  /* бумага и чернила */
  --paper: #ffffff;
  --ink: #0d0d0d;
  --ink-70: #55504e;
  --ink-45: #8a8480;
  --rule: #e5e1dc;
  /* поля линеек — досэмплены из самих кадров, чтобы фото втекало без шва */
  --heroine: #b0909d;
  --heroine-deep: #5c3049;
  --redflag: #530e1b;
  --redflag-deep: #3d0b14;
  --escort: #a55124;
  --escort-deep: #6e3315;
  /* гарнитуры */
  --display: "Montserrat", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* сетка */
  --shell: 1408px;
  --pad: clamp(16px, 4vw, 56px);
  --gap: 10px;
  --r: 18px;
  --rhythm: clamp(72px, 9vw, 132px);
  --head: 77px;
  --ease: cubic-bezier(.16, 1, .3, 1); }

/* ═══════════════  БАЗА  ═══════════════ */
/* line 53, theme.scss */
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased; }

/* Сброс ограничен нашей разметкой, чтобы не задеть системные виджеты
   каталога. Обёртка :where() не добавляет специфичности — селектор
   весит ровно столько же, сколько голый `a`. Без неё `.g-page a`
   перебивал бы `.g-btn`, и текст кнопки чернел бы на чёрном фоне. */
/* line 65, theme.scss */
:where(.g-page, .g-head, .g-foot) img,
:where(.g-page, .g-head, .g-foot) svg {
  display: block;
  max-width: 100%; }

/* line 67, theme.scss */
:where(.g-page, .g-head, .g-foot) img {
  height: auto; }

/* line 68, theme.scss */
:where(.g-page, .g-head, .g-foot) a {
  color: inherit;
  text-decoration: none; }

/* line 69, theme.scss */
:where(.g-page, .g-head, .g-foot) h1,
:where(.g-page, .g-head, .g-foot) h2,
:where(.g-page, .g-head, .g-foot) h3 {
  margin: 0;
  font-weight: 300; }

/* line 72, theme.scss */
:where(.g-page, .g-head, .g-foot) p {
  margin: 0; }

/* line 73, theme.scss */
:where(.g-page, .g-head, .g-foot) dl,
:where(.g-page, .g-head, .g-foot) dd {
  margin: 0; }

/* line 75, theme.scss */
:where(.g-page, .g-head, .g-foot) ul {
  list-style: none; }

/* line 77, theme.scss */
::selection {
  background: var(--ink);
  color: var(--paper); }

/* line 79, theme.scss */
.g-page :focus-visible,
.g-head :focus-visible,
.g-foot :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px; }

/* line 87, theme.scss */
.g-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; }

/* line 92, theme.scss */
.g-skip {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 99;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 8px;
  font: 500 13px/1 var(--body);
  transition: top .2s; }

/* line 98, theme.scss */
.g-skip:focus {
  top: 12px; }

/* line 100, theme.scss */
.g-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad); }

/* лабораторный регистр: объёмы, ноты, цена за миллилитр */
/* line 106, theme.scss */
.g-spec {
  font: 400 11px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-45); }

/* ═══════════════  КНОПКИ  ═══════════════ */
/* line 115, theme.scss */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 500 13px/1 var(--body);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background 0.25s var(--ease), color 0.25s var(--ease); }

/* line 122, theme.scss */
.g-btn:hover {
  background: transparent;
  color: var(--ink); }

/* line 123, theme.scss */
.g-btn--sm {
  padding: 11px 20px;
  font-size: 12px; }

/* line 124, theme.scss */
.g-btn--ghost {
  background: transparent;
  color: var(--ink); }

/* line 125, theme.scss */
.g-btn--ghost:hover {
  background: var(--ink);
  color: var(--paper); }

/* ═══════════════  ШАПКА  ═══════════════
   Не липкая: страница держится на кадрах во всю ширину, и панель,
   едущая поверх них, всё время отрезает у плитки верхние 77px.
   --head при этом остаётся — по нему считается высота триптиха,
   чтобы герой умещался в первый экран. */
/* line 132, theme.scss */
.g-head {
  background: var(--paper);
  border-bottom: 1px solid var(--rule); }

/* line 136, theme.scss */
.g-head__in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px); }

/* line 140, theme.scss */
.g-head__logo svg {
  width: clamp(112px, 12vw, 164px);
  fill: var(--ink); }

/* line 141, theme.scss */
.g-head__nav {
  display: flex;
  gap: clamp(14px, 2vw, 30px);
  margin-inline: auto;
  font: 400 14px/1 var(--body); }

/* line 145, theme.scss */
.g-head__nav a {
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s; }

/* line 146, theme.scss */
.g-head__nav a:hover {
  border-color: var(--ink); }

/* line 147, theme.scss */
.g-head__act {
  display: flex;
  align-items: center;
  gap: 20px; }

/* line 148, theme.scss */
.g-head__phone {
  color: var(--ink); }

/* ═══════════════  ГЕРОЙ — БЕНТО  ═══════════════ */
/* line 152, theme.scss */
.g-hero {
  padding: var(--gap) var(--pad) 0; }

/* line 153, theme.scss */
.g-hero__grid {
  display: grid;
  gap: var(--gap);
  max-width: var(--shell);
  margin-inline: auto;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: calc(100svh - var(--head) - var(--gap));
  min-height: 600px;
  max-height: 900px; }

/* line 161, theme.scss */
.g-hero__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--field); }

/* line 165, theme.scss */
.g-hero__tile--lead {
  grid-column: span 5;
  grid-row: 1 / 4; }

/* line 166, theme.scss */
.g-hero__tile--b {
  grid-column: span 4;
  grid-row: 2 / 4; }

/* line 167, theme.scss */
.g-hero__tile--c {
  grid-column: span 3;
  grid-row: 2 / 4; }

/* line 168, theme.scss */
.g-hero__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 25%);
  transition: transform 1.1s var(--ease); }

/* line 173, theme.scss */
.g-hero__tile:hover img {
  transform: scale(1.05); }

/* line 175, theme.scss */
.g-hero__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 7px;
  padding: clamp(18px, 2vw, 30px);
  padding-top: clamp(70px, 9vw, 140px);
  color: #fff;
  background: linear-gradient(to top, rgba(14, 8, 10, 0.84) 0%, rgba(14, 8, 10, 0.5) 38%, rgba(14, 8, 10, 0) 100%); }

/* line 184, theme.scss */
.g-hero__name {
  font: 300 clamp(1.1rem, 1.9vw, 2.1rem)/1 var(--display);
  letter-spacing: .16em;
  text-transform: uppercase; }

/* line 188, theme.scss */
.g-hero__tile--lead .g-hero__name {
  font-size: clamp(1.5rem, 2.6vw, 2.6rem); }

/* line 189, theme.scss */
.g-hero__note {
  color: rgba(255, 255, 255, 0.8); }

/* широкая плашка с предложением — бумага среди цветных кадров */
/* line 192, theme.scss */
.g-hero__say {
  grid-column: span 7;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid var(--rule);
  border-radius: var(--r); }

/* line 199, theme.scss */
.g-hero__h {
  max-width: 24ch;
  font: 200 clamp(1.5rem, 2.9vw, 2.9rem)/1.12 var(--display);
  letter-spacing: .01em;
  text-wrap: balance; }

/* line 204, theme.scss */
.g-hero__act {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap; }

/* line 205, theme.scss */
.g-hero__from {
  color: var(--ink-45); }

/* ═══════════════  ЛИД  ═══════════════ */
/* line 209, theme.scss */
.g-lede {
  padding-top: clamp(28px, 4vw, 52px); }

/* line 210, theme.scss */
.g-lede__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center; }

/* line 214, theme.scss */
.g-lede__h {
  font: 300 clamp(1.5rem, 3.1vw, 2.6rem)/1.18 var(--display);
  letter-spacing: .01em;
  text-wrap: balance; }

/* line 218, theme.scss */
.g-lede__p {
  margin-top: 16px;
  max-width: 44ch;
  color: var(--ink-70); }

/* line 219, theme.scss */
.g-lede__art {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  background: #efebe7; }

/* line 223, theme.scss */
.g-lede__art video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; }

/* ═══════════════  ОЛЬФАКТОРНАЯ СТРОКА  ═══════════════ */
/* line 229, theme.scss */
.g-tick {
  margin-top: var(--rhythm);
  padding-block: 22px;
  border-block: 1px solid var(--rule);
  overflow: hidden; }

/* line 235, theme.scss */
.g-tick__row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  width: max-content;
  animation: g-tick 46s linear infinite; }

/* line 240, theme.scss */
.g-tick__row span {
  font: 200 clamp(1.4rem, 3vw, 2.5rem)/1 var(--display);
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap; }

/* line 244, theme.scss */
.g-tick__row i {
  color: var(--ink-45);
  font-style: normal;
  font-size: 1.2rem; }

@keyframes g-tick {
  to {
    transform: translateX(-33.333%); } }
/* ═══════════════  СЕКЦИИ  ═══════════════ */
/* line 249, theme.scss */
.g-sec {
  padding-block: var(--rhythm); }

/* line 250, theme.scss */
.g-sec--tight {
  padding-top: 0; }

/* line 252, theme.scss */
.g-sech {
  margin-bottom: clamp(32px, 4vw, 56px); }

/* line 253, theme.scss */
.g-sech--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap; }

/* line 257, theme.scss */
.g-sech__eyebrow {
  margin-bottom: 14px; }

/* line 258, theme.scss */
.g-sech__h {
  font: 300 clamp(2rem, 5.2vw, 4.6rem)/1.02 var(--display);
  letter-spacing: .02em; }

/* line 262, theme.scss */
.g-sech__lede {
  margin-top: 18px;
  max-width: 44ch;
  color: var(--ink-70); }

/* ── Линейки: спек-лист, а не три одинаковые карточки. Кадры линеек уже
      отработали в герое, вторая их порция была бы дублем — здесь блок
      отвечает на другой вопрос: чем они отличаются и что выбрать. ───── */
/* line 267, theme.scss */
.g-cmp {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed; }

/* line 273, theme.scss */
.g-cmp__corner {
  width: clamp(96px, 11vw, 150px); }

/* line 275, theme.scss */
.g-cmp__head {
  position: relative;
  vertical-align: bottom;
  padding: 0 clamp(14px, 1.8vw, 26px) 18px;
  font-weight: 400; }

/* Столбец открывает не паковшот, а сама нота — ягода, гранат, коньяк.
   Фон макро досэмплен под --field, поэтому цвет линейки по-прежнему
   приходит фотографией, а не заливкой. */
/* line 284, theme.scss */
.g-cmp__note {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  border-radius: calc(var(--r) - 6px);
  background: var(--field); }

/* line 290, theme.scss */
.g-cmp__head a {
  display: block;
  color: var(--deep);
  font: 300 clamp(1.15rem, 2.1vw, 2.05rem)/1.05 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase; }

/* line 297, theme.scss */
.g-cmp__label {
  padding: 20px clamp(14px, 1.8vw, 26px) 20px 0;
  vertical-align: top;
  font-weight: 400;
  color: var(--ink-45); }

/* line 303, theme.scss */
.g-cmp td {
  padding: 20px clamp(14px, 1.8vw, 26px);
  vertical-align: top;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5; }

/* line 308, theme.scss */
.g-cmp tbody tr > * {
  border-top: 1px solid var(--rule); }

/* line 310, theme.scss */
.g-cmp__last td {
  padding-bottom: 0; }

/* line 311, theme.scss */
.g-cmp__price {
  display: block;
  font: 300 clamp(1.1rem, 1.5vw, 1.4rem)/1 var(--display);
  letter-spacing: .04em; }

/* line 316, theme.scss */
.g-cmp__go {
  display: inline-block;
  margin-top: 14px;
  font: 400 14px/1 var(--body);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }

/* line 323, theme.scss */
.g-cmp__go:hover {
  color: var(--deep);
  border-color: var(--deep); }

@media (hover: hover) {
  /* line 326, theme.scss */
  .g-cmp__head:hover a {
    text-decoration: underline;
    text-underline-offset: 6px; } }
/* ── Бенто форматов: размер плитки — это вес позиции в каталоге.
      Кремá кормят выручку, поэтому им вдвое больше места.

      Все четыре кадра сняты под свою плитку (4:3, 16:9, 16:9, 21:9) в
      одной комнате при одном свете. Продукт всегда правее центра,
      левый низ пустой — там садится подпись.                ───────── */
/* line 335, theme.scss */
.g-bento {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(220px, 21vw, 300px); }

/* line 340, theme.scss */
.g-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: #efebe7;
  grid-column: span 5; }

/* line 345, theme.scss */
.g-tile--tall {
  grid-column: span 7;
  grid-row: span 2; }

/* line 346, theme.scss */
.g-tile--full {
  grid-column: span 12;
  grid-row: span 1; }

/* line 347, theme.scss */
.g-tile > img,
.g-tile > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform 1s var(--ease); }

/* line 353, theme.scss */
.g-tile:hover > img,
.g-tile:hover > video {
  transform: scale(1.05); }

/* line 355, theme.scss */
.g-tile__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 7px;
  padding: clamp(18px, 2vw, 30px);
  padding-top: clamp(44px, 5vw, 78px);
  color: #fff;
  /* Кадры светлые у нижнего края, поэтому вуаль нужна — но короткая и
     резкая. Прежняя тянулась на 190px и съедала две трети плитки в
     300px: на тёмных кампейн-кадрах это не читалось, на травертине
     превращало картинку в серую муть. */
  background: linear-gradient(to top, rgba(18, 10, 12, 0.8) 0%, rgba(18, 10, 12, 0.46) 42%, rgba(18, 10, 12, 0.12) 74%, rgba(18, 10, 12, 0) 100%); }

/* line 371, theme.scss */
.g-tile__cap b {
  font: 300 clamp(1.25rem, 2.1vw, 2rem)/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase; }

/* line 375, theme.scss */
.g-tile__cap i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.78); }

/* ═══════════════  МАНИФЕСТ — единственный тёмный акт  ═══════════════

   Единственное место, где фотография работает не как товар, а как
   фактура: плечо янтарного флакона на одном ободке света. Градиент
   держит левую половину плотной, чтобы текст лежал на цвете, а не на
   кадре, — снимок читается краем глаза, как вес флакона в руке. */
/* line 383, theme.scss */
.g-mani {
  position: relative;
  overflow: hidden;
  background: var(--redflag-deep);
  color: var(--paper);
  padding-block: clamp(84px, 11vw, 168px); }

/* line 390, theme.scss */
.g-mani__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  pointer-events: none; }

/* line 395, theme.scss */
.g-mani::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, #3d0b14 0%, #3d0b14 24%, rgba(61, 11, 20, 0.88) 44%, rgba(61, 11, 20, 0.4) 72%, rgba(61, 11, 20, 0.66) 100%); }

/* line 401, theme.scss */
.g-mani > .g-shell {
  position: relative;
  z-index: 1; }

/* line 403, theme.scss */
.g-mani__eyebrow {
  color: rgba(255, 255, 255, 0.5); }

/* line 404, theme.scss */
.g-mani__h {
  margin-top: 20px;
  font: 200 clamp(2.4rem, 7.4vw, 7rem)/0.98 var(--display);
  letter-spacing: .01em; }

/* line 409, theme.scss */
.g-mani__p {
  margin-top: clamp(28px, 3.5vw, 46px);
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.72); }

/* line 413, theme.scss */
.g-facts {
  margin-top: clamp(48px, 6vw, 84px);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, 1fr); }

/* плашки лежат уже не на плоском цвете, а на кадре — им нужен свой
   край, иначе правые две растворяются в световом пятне */
/* line 420, theme.scss */
.g-facts div {
  padding: 26px 24px;
  border-radius: var(--r);
  background: rgba(30, 6, 10, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px); }

/* line 427, theme.scss */
.g-facts dt {
  font: 300 clamp(1.1rem, 1.6vw, 1.5rem)/1.1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase; }

/* line 431, theme.scss */
.g-facts dd {
  margin-top: 12px;
  font: 400 11px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58); }

/* ═══════════════  КАРТОЧКИ ТОВАРА  ═══════════════ */
/* line 439, theme.scss */
.g-cards {
  display: grid;
  gap: clamp(14px, 2vw, 28px);
  grid-template-columns: repeat(4, 1fr); }

/* line 443, theme.scss */
.g-card {
  position: relative;
  display: flex;
  flex-direction: column; }

/* Паковшоты пересняты на поле своей линейки, поэтому кадрируем, а не
   вписываем: белая рамка вокруг contain держала флакон на трети
   площади и превращала ряд бестселлеров в аптечную полку. Флакон снят
   целиком внутри кадра, так что cover не режет этикетку. */
/* line 448, theme.scss */
.g-card__img {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--field); }

/* line 452, theme.scss */
.g-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* кадр 3:4 в окне 4:5 срезает по высоте — уводим срез вниз, в пустую
     бесшовку, иначе дозатор упирается в верхний край */
  object-position: 50% 44%;
  transition: transform 0.8s var(--ease); }

/* line 459, theme.scss */
.g-card:hover .g-card__img img {
  transform: scale(1.04); }

/* line 460, theme.scss */
.g-card__t {
  margin-top: 18px;
  font: 400 16px/1.35 var(--body); }

/* line 464, theme.scss */
.g-card__t a::after {
  content: "";
  position: absolute;
  inset: 0; }

/* line 465, theme.scss */
.g-card__spec {
  margin-top: 8px; }

/* line 466, theme.scss */
.g-card__price {
  margin-top: 12px;
  font: 300 clamp(1.15rem, 1.5vw, 1.45rem)/1 var(--display);
  letter-spacing: .04em; }

/* line 471, theme.scss */
.g-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 34px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s var(--ease), width 0.4s var(--ease); }

/* line 476, theme.scss */
.g-card:hover::after {
  opacity: 1;
  width: 64px; }

/* ═══════════════  ОТЗЫВЫ  ═══════════════

   Соседняя секция — бестселлеры, тоже белые карточки в три-четыре
   колонки. Чтобы страница не читалась как две одинаковые полки подряд,
   у отзыва нет кадра вообще: только обводка, оценка и сам текст,
   набранный дисплейной гарнитурой. Голос покупателя получает тот же
   кегль, что заголовки, — это единственное место на лендинге, где
   говорит не бренд. */
/* line 486, theme.scss */
.g-revs {
  display: grid;
  gap: clamp(14px, 2vw, 28px);
  grid-template-columns: repeat(3, 1fr); }

/* line 490, theme.scss */
.g-rev {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--rule);
  border-radius: var(--r); }

/* line 496, theme.scss */
.g-rev__rate {
  display: flex;
  gap: 4px;
  margin-bottom: clamp(18px, 2vw, 26px); }

/* line 497, theme.scss */
.g-rev__rate svg {
  width: 13px;
  height: 13px;
  fill: var(--ink); }

/* line 498, theme.scss */
.g-rev__rate svg.is-off {
  fill: var(--rule); }

/* line 499, theme.scss */
.g-rev__q {
  margin: 0;
  font: 300 clamp(1.05rem, 1.35vw, 1.25rem)/1.45 var(--display);
  letter-spacing: .01em; }

/* margin-top:auto прижимает подпись к низу, поэтому карточки в ряду
   держат общую линию имени независимо от длины отзыва */
/* line 506, theme.scss */
.g-rev__by {
  margin-top: auto;
  padding-top: clamp(22px, 2.4vw, 32px);
  display: flex;
  align-items: center;
  gap: 14px; }

/* Превью товара, а не аватар автора. Поле под кадром — то же
   травертиновое, что у плиток каталога: паковшоты сняты на светлом,
   и на белой карточке без подложки они висели бы в воздухе. */
/* line 513, theme.scss */
.g-rev__pic {
  flex: none;
  width: 64px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(var(--r) - 6px);
  background: #efebe7; }

/* line 517, theme.scss */
.g-rev__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

/* line 518, theme.scss */
.g-rev__who {
  display: grid;
  gap: 6px;
  min-width: 0; }

/* line 519, theme.scss */
.g-rev__by b {
  font: 400 15px/1.3 var(--body); }

/* line 520, theme.scss */
.g-rev__for {
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }

/* line 525, theme.scss */
.g-rev__for:hover {
  color: var(--ink);
  border-color: var(--rule); }

/* Пока в магазине ни одного отзыва, секция с одним заголовком читалась
   бы как недогрузившаяся. Приглашение занимает то же место и объясняет,
   откуда возьмётся содержимое. */
/* line 530, theme.scss */
.g-revs__none {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--rule);
  border-radius: var(--r); }

/* line 536, theme.scss */
.g-revs__none p {
  max-width: 52ch;
  color: var(--ink-70); }

/* ═══════════════  НАБОР  ═══════════════ */
/* line 540, theme.scss */
.g-set {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule); }

/* line 546, theme.scss */
.g-set__txt {
  align-self: center;
  padding: clamp(32px, 4.5vw, 64px); }

/* line 550, theme.scss */
.g-set__eyebrow {
  margin-bottom: 16px; }

/* line 551, theme.scss */
.g-set__h {
  max-width: 14ch;
  font: 300 clamp(1.7rem, 2.9vw, 2.8rem)/1.08 var(--display);
  letter-spacing: .02em; }

/* line 556, theme.scss */
.g-set__p {
  margin-top: 20px;
  max-width: 36ch;
  color: var(--ink-70); }

/* состав коробки: цвет линейки ушёл в засечку слева, потому что
   раскладывать три поля во всю плашку теперь незачем — их место занял
   настоящий кадр набора */
/* line 561, theme.scss */
.g-set__list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px; }

/* line 565, theme.scss */
.g-set__list li {
  display: grid;
  gap: 5px;
  padding-left: 13px;
  border-left: 3px solid var(--field); }

/* line 570, theme.scss */
.g-set__list b {
  font: 300 clamp(0.9rem, 1.1vw, 1.05rem)/1 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase; }

/* line 574, theme.scss */
.g-set__list i {
  font-style: normal; }

/* line 576, theme.scss */
.g-set__price {
  margin-top: 26px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: 300 clamp(1.6rem, 2.4vw, 2.2rem)/1 var(--display);
  letter-spacing: .03em; }

/* line 581, theme.scss */
.g-set__price i {
  font-style: normal; }

/* line 582, theme.scss */
.g-set .g-btn {
  margin-top: 30px; }

/* Кадр набора вместо трёх плоских полей: три флакона по 30 мл в
   коробке — то, что человек получит, а не схема содержимого.
   Этикетки у всех трёх белые: чёрная идёт у мыла и рефила, а в
   наборе только кремы. */
/* line 588, theme.scss */
.g-set__art {
  position: relative;
  min-height: 360px;
  background: #efebe7; }

/* line 589, theme.scss */
.g-set__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 54%;
  transition: transform 1s var(--ease); }

/* line 594, theme.scss */
.g-set:hover .g-set__art img {
  transform: scale(1.04); }

/* ═══════════════  БЛОГ  ═══════════════

   Карточка статьи повторяет геометрию карточки товара, но кадр здесь
   3:2, а не 4:5: превью статей приходят из бэк-офиса горизонтальными,
   и вертикальное окно резало бы их по центру композиции. */
/* line 601, theme.scss */
.g-posts {
  display: grid;
  gap: clamp(14px, 2vw, 28px);
  grid-template-columns: repeat(3, 1fr); }

/* line 605, theme.scss */
.g-post {
  position: relative;
  display: flex;
  flex-direction: column; }

/* line 606, theme.scss */
.g-post__img {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r);
  background: #efebe7; }

/* line 610, theme.scss */
.g-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease); }

/* line 614, theme.scss */
.g-post:hover .g-post__img img {
  transform: scale(1.04); }

/* line 615, theme.scss */
.g-post__date {
  margin-top: 18px; }

/* line 616, theme.scss */
.g-post__t {
  margin-top: 10px;
  font: 400 clamp(1rem, 1.15vw, 1.1rem)/1.35 var(--body); }

/* растяжка ссылки на всю карточку: кадр выше отдан aria-hidden, чтобы
   заголовок и картинка не читались скринридером как две разные ссылки */
/* line 622, theme.scss */
.g-post__t a::after {
  content: "";
  position: absolute;
  inset: 0; }

/* line 623, theme.scss */
.g-post__p {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ink-70); }

/* ═══════════════  ДОСТАВКА / CTA  ═══════════════
   Доставка — последнее обещание перед подвалом, и оно про коробку,
   которую человек получит в руки. Поэтому не текстовая полоса, а тот
   же кадр-обещание. */
/* line 629, theme.scss */
.g-cta {
  border-top: 1px solid var(--rule);
  padding-block: clamp(56px, 7vw, 96px); }

/* line 630, theme.scss */
.g-cta__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center; }

/* line 634, theme.scss */
.g-cta__h {
  font: 300 clamp(1.8rem, 3.4vw, 3rem)/1.05 var(--display);
  letter-spacing: .02em; }

/* line 635, theme.scss */
.g-cta__p {
  margin-top: 14px;
  max-width: 44ch;
  color: var(--ink-70); }

/* line 636, theme.scss */
.g-cta__act {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 3vw, 38px); }

/* line 640, theme.scss */
.g-cta__tel {
  color: var(--ink); }

/* line 641, theme.scss */
.g-cta__art {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  background: #efebe7; }

/* line 645, theme.scss */
.g-cta__art img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover; }

/* ═══════════════  ПОДВАЛ  ═══════════════ */
/* line 649, theme.scss */
.g-foot {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(48px, 6vw, 80px) 32px; }

/* line 650, theme.scss */
.g-foot a {
  color: inherit;
  text-decoration: none; }

/* line 651, theme.scss */
.g-foot__in {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: 1.3fr repeat(4, 1fr); }

/* line 655, theme.scss */
.g-foot__mark {
  width: 180px;
  fill: var(--paper);
  display: block; }

/* line 656, theme.scss */
.g-foot__brand .g-spec {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.5); }

/* Знаки оплаты. Держатся в брендовой колонке, а не в нижней плашке с
   копирайтом: та набрана 11-м моноширинным, и плашки высотой 28px
   разорвали бы её строку. Заодно колонка перестаёт быть коротышкой
   рядом с четырьмя списками ссылок. */
/* line 662, theme.scss */
.g-pay {
  display: flex;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none; }

/* line 663, theme.scss */
.g-pay__i {
  width: 44px;
  height: 28px; }

/* line 664, theme.scss */
.g-pay__card {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.2; }

/* line 665, theme.scss */
.g-pay__word {
  fill: rgba(255, 255, 255, 0.72);
  font: 600 9.5px/1 var(--body);
  letter-spacing: .09em;
  text-anchor: middle; }

/* line 669, theme.scss */
.g-pay__word--visa {
  font: italic 700 10.5px/1 var(--body);
  letter-spacing: .04em; }

/* два круга Mastercard: screen осветляет пересечение, из-за чего линза
   видна и без второго цвета. Там, где режим не поддержан, круги просто
   сливаются в узнаваемый силуэт. */
/* line 673, theme.scss */
.g-pay__disc {
  fill: rgba(255, 255, 255, 0.5);
  mix-blend-mode: screen; }

/* line 675, theme.scss */
.g-foot__col {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px; }

/* line 676, theme.scss */
.g-foot__t {
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 5px; }

/* line 677, theme.scss */
.g-foot__col a {
  color: rgba(255, 255, 255, 0.82);
  width: fit-content;
  transition: color .2s; }

/* line 678, theme.scss */
.g-foot__col a:hover {
  color: var(--paper); }

/* line 679, theme.scss */
.g-foot__law {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.42); }

/* ═══════════════  АДАПТИВ  ═══════════════ */
@media (max-width: 1180px) {
  /* line 689, theme.scss */
  .g-cards {
    grid-template-columns: repeat(2, 1fr); }

  /* line 690, theme.scss */
  .g-facts {
    grid-template-columns: repeat(2, 1fr); }

  /* line 691, theme.scss */
  .g-head__nav {
    display: none; }

  /* пять колонок при 1180px дают по 150px — «Оплата и доставка»
     переносится на три строки. Вордмарк уходит в собственную строку, а
     четыре списка ссылок встают под ним одним рядом: делить их на три
     колонки нельзя, четвёртая уезжала бы на пустую строку. */
  /* line 697, theme.scss */
  .g-foot__in {
    grid-template-columns: repeat(4, 1fr); }

  /* line 698, theme.scss */
  .g-foot__brand {
    grid-column: 1 / -1; } }
@media (max-width: 980px) {
  /* line 702, theme.scss */
  .g-revs, .g-posts {
    grid-template-columns: repeat(2, 1fr); }

  /* Таблица на узком экране разворачивается в три блока подряд.
     Подпись строки не прячем, а кладём над ними во всю ширину: три
     колонки значений без «ноты» и «характера» слева читаются вслепую.
     Селектор с th — иначе .g-cmp th display:block перебивает по весу. */
  /* line 708, theme.scss */
  .g-cmp, .g-cmp thead, .g-cmp tbody, .g-cmp tr, .g-cmp th, .g-cmp td {
    display: block;
    width: auto; }

  /* line 709, theme.scss */
  .g-cmp th.g-cmp__corner {
    display: none; }

  /* line 710, theme.scss */
  .g-cmp thead tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap); }

  /* line 711, theme.scss */
  .g-cmp__head {
    padding: 0 0 18px; }

  /* line 712, theme.scss */
  .g-cmp tbody tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap); }

  /* line 713, theme.scss */
  .g-cmp tbody tr > * {
    border-top: 0; }

  /* line 714, theme.scss */
  .g-cmp th.g-cmp__label {
    grid-column: 1 / -1;
    padding: 22px 0 2px;
    border-top: 1px solid var(--rule); }

  /* line 719, theme.scss */
  .g-cmp td {
    padding: 14px 0; }

  /* line 721, theme.scss */
  .g-tile, .g-tile--tall, .g-tile--full {
    grid-column: span 12;
    grid-row: span 1; }

  /* line 722, theme.scss */
  .g-set {
    grid-template-columns: 1fr; }

  /* line 723, theme.scss */
  .g-set__art {
    order: -1;
    min-height: 280px; }

  /* line 724, theme.scss */
  .g-lede__in, .g-cta__in {
    grid-template-columns: 1fr; }

  /* Триптих на телефоне: кадры встают в столбик, первый занимает экран,
     остальные два идут за ним карточками 4:5. */
  /* line 728, theme.scss */
  .g-hero__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: 0;
    max-height: none; }

  /* line 733, theme.scss */
  .g-hero__say {
    grid-column: 1 / -1;
    grid-row: 1; }

  /* line 734, theme.scss */
  .g-hero__tile--lead {
    grid-column: 1 / -1;
    grid-row: 2;
    aspect-ratio: 4 / 5; }

  /* line 735, theme.scss */
  .g-hero__tile--b {
    grid-column: 1;
    grid-row: 3;
    aspect-ratio: 3 / 4; }

  /* line 736, theme.scss */
  .g-hero__tile--c {
    grid-column: 2;
    grid-row: 3;
    aspect-ratio: 3 / 4; } }
@media (max-width: 860px) {
  /* line 740, theme.scss */
  .g-hero__h {
    max-width: 22ch; }

  /* line 741, theme.scss */
  .g-head__phone {
    display: none; } }
@media (max-width: 560px) {
  /* line 745, theme.scss */
  :root {
    --gap: 8px;
    --r: 14px; }

  /* колонка ужимается до ~114px: RED FLAG стоит на неразрывном пробеле
     и в исходном кегле заезжает на соседа */
  /* line 748, theme.scss */
  .g-cmp__head a {
    font-size: .95rem;
    letter-spacing: .08em; }

  /* line 749, theme.scss */
  .g-facts {
    grid-template-columns: 1fr; }

  /* line 750, theme.scss */
  .g-foot__in {
    grid-template-columns: 1fr 1fr; }

  /* line 751, theme.scss */
  .g-cards {
    gap: 20px 14px; }

  /* line 752, theme.scss */
  .g-revs, .g-posts {
    grid-template-columns: 1fr; }

  /* кнопка приглашения на телефоне встаёт под текст во всю ширину —
     иначе прижимается к правому краю оторванным от него хвостом */
  /* line 755, theme.scss */
  .g-revs__none {
    display: grid;
    justify-items: start; } }
/* ═══════════════  ДВИЖЕНИЕ ПО ЖЕЛАНИЮ  ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  /* line 761, theme.scss */
  .g-page *,
  .g-page *::before,
  .g-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }

  /* line 768, theme.scss */
  .g-tick__row {
    animation: none; } }
/* ═══════════════════════════════════════════════════════════════════════
   СИСТЕМНЫЕ ВИДЖЕТЫ

   Каталог, карточку товара и корзину рисует платформа своей разметкой —
   переписать её нельзя. Но она наследует переменные ниже, поэтому
   остальной магазин попадает в ту же палитру и типографику, что и
   лендинг: белый холст, чёрные чернила, Montserrat в заголовках.
   ═══════════════════════════════════════════════════════════════════════ */
/* line 780, theme.scss */
.page_layout {
  --color-text-dark: var(--ink);
  --color-btn-bg: var(--ink);
  --color-accent-text: var(--ink-70);
  --font-family: var(--body);
  --font-family-heading: var(--display); }

/* line 788, theme.scss */
.page_layout h1,
.page_layout h2,
.page_layout h3,
.page_layout .heading {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .02em; }

/* Скругления системных виджетов.

   Loft берёт радиус из настройки controls-btn-border-radius и применяет
   его не только к кнопкам, но и к панелям, галерее и карточкам. Она
   выставлена в 0px, поэтому арки на галерее, «таблетки» у характеристик
   и круглых обводок больше не будет.

   Кнопки при этом должны остаться таблетками, как в лендинге. Селекторы
   ниже — на элементах, а не на классах: контейнер под них не попадёт
   даже случайно. */
/* line 807, theme.scss */
.page_layout button,
.page_layout input[type="submit"],
.page_layout input[type="button"] {
  border-radius: 999px; }

/* Страховка на случай, если у какого-то виджета радиус зашит в его
   собственный scss, а не берётся из настройки. */
/* line 815, theme.scss */
.page_layout [class*="gallery"] img,
.page_layout [class*="gallery"] picture,
.page_layout [class*="gallery"] [class*="image"],
.page_layout [class*="gallery"] [class*="slide"] {
  border-radius: 0;
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none; }