/* ==========================================================================
   LEGION — дизайн-система макета
   Источник: docs/design/design-system.md (Этап 7), направление «Мастерская Legion»
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Токены
   -------------------------------------------------------------------------- */
:root {
  /* Цвет — фон / поверхности / текст */
  --color-bg: #FAF7F3;
  --color-bg-alt: #F1EBE3;
  --color-surface: #FFFFFF;
  --color-text: #241A1A;
  --color-text-secondary: #5B4E46;
  --color-text-muted: #8A7C6E;
  --color-text-on-primary: #FFFFFF;

  /* Цвет — фирменный акцент */
  --color-primary: #7F1719;
  --color-primary-hover: #9C2E28;
  --color-primary-active: #5E1012;
  --color-primary-wash: #F4E7E3;

  /* Цвет — вторичный акцент */
  --color-secondary: #BFA07A;
  --color-secondary-wash: #F2EAE0;

  /* Цвет — границы */
  --color-border: #E4DCD3;
  --color-border-strong: #CBBFB0;

  /* Цвет — статус (сознательно отличны от primary) */
  --color-success: #3F7A5C;
  --color-success-wash: #E7F1EC;
  --color-warning: #A66A0A;
  --color-warning-wash: #F7ECDA;
  --color-danger: #C1401F;
  --color-danger-wash: #FBEAE4;
  --color-info: #4B6478;
  --color-info-wash: #E9EDF0;

  /* Типографика */
  --font-display: 'Golos Text', 'Arial', sans-serif;
  --font-body: 'Inter', 'Arial', sans-serif;

  /* Отступы (4px база) */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-8: 3rem;      /* 48 */
  --space-10: 4rem;     /* 64 */
  --space-12: 6rem;     /* 96 */

  /* Радиусы */
  --radius-sm: 0.375rem;  /* 6  */
  --radius-md: 0.625rem;  /* 10 */
  --radius-lg: 1rem;      /* 16 */
  --radius-pill: 999px;

  /* Тени (тёплый тон, не rgba(0,0,0,.1)) */
  --shadow-sm: 0 2px 8px rgba(36, 26, 26, .08);
  --shadow-md: 0 12px 32px rgba(36, 26, 26, .16);

  /* Движение */
  --motion-fast: 120ms ease-out;
  --motion-base: 200ms ease-in-out;
  --motion-slow: 300ms ease-in-out;

  /* Контейнер */
  --container-max: 90rem; /* 1440px; на широких мониторах шире — см. ниже */
  --gutter: 1rem;
}

@media (min-width: 48em) { :root { --gutter: 1.5rem; } }
@media (min-width: 64em) { :root { --gutter: 2rem; } }
/* Широкие мониторы: контент тянется, а не стоит узкой колонкой по центру. */
@media (min-width: 100em) { :root { --container-max: 100rem; --gutter: 2.5rem; } }
@media (min-width: 120em) { :root { --container-max: 116rem; --gutter: 3rem; } }

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   2. Сброс и база
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
fieldset { border: none; margin: 0; padding: 0; }

/* Видимый фокус — везде, только при клавиатурной навигации */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   3. Типографика
   -------------------------------------------------------------------------- */
.text-display { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 1.15; letter-spacing: -.01em; }
.text-h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1.2; }
.text-h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.28; }
.text-h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.35; }
.text-h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.text-body-lg { font-size: 1.125rem; line-height: 1.6; }
.text-body-sm { font-size: 0.875rem; line-height: 1.55; }
.text-caption { font-size: 0.8125rem; line-height: 1.4; font-weight: 500; color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }

@media (min-width: 48em) {
  .text-display { font-size: 3.5rem; line-height: 1.1; }
  .text-h1 { font-size: 2.5rem; line-height: 1.15; }
  .text-h2 { font-size: 1.875rem; line-height: 1.25; }
  .text-h3 { font-size: 1.375rem; line-height: 1.3; }
}

.price { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--color-text); white-space: nowrap; }
.price__currency { font-size: .78em; color: var(--color-text-secondary); font-weight: 500; margin-left: .1em; }
.price--lg { font-size: 1.75rem; }
.price-old { font-family: var(--font-body); font-size: 1rem; color: var(--color-text-muted); text-decoration: line-through; margin-left: var(--space-2); }
.price-installment { font-size: .875rem; color: var(--color-text-secondary); margin-top: var(--space-1); }

/* --------------------------------------------------------------------------
   4. Слой / контейнер
   -------------------------------------------------------------------------- */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-8); }
.section--alt { background: var(--color-bg-alt); }
@media (min-width: 64em) { .section { padding-block: var(--space-10); } }
.section__head { margin-bottom: var(--space-6); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.section__eyebrow { color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.section__lead { max-width: 42rem; color: var(--color-text-secondary); margin-top: var(--space-2); }

.grid { display: grid; gap: var(--space-5); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(1, 1fr); }
.grid--3 { grid-template-columns: repeat(1, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 30em) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64em) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   5. Кнопки
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 600; font-size: .9375rem;
  height: 3rem; padding-inline: var(--space-5);
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { cursor: not-allowed; background: var(--color-border) !important; color: var(--color-text-muted) !important; border-color: transparent !important; }

.btn--primary { background: var(--color-primary); color: var(--color-text-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:active { background: var(--color-primary-active); }

.btn--secondary { background: transparent; color: var(--color-text); border: 1.5px solid var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn--text { height: auto; padding: 0; color: var(--color-primary); font-weight: 600; }
.btn--text:hover { text-decoration: underline; }

.btn--ghost-photo { background: rgba(36,26,26,.55); color: #fff; backdrop-filter: none; }
.btn--ghost-photo:hover { background: rgba(36,26,26,.72); }

.btn--lg { height: 3.5rem; padding-inline: var(--space-6); font-size: 1rem; }
.btn--sm { height: 2.25rem; padding-inline: var(--space-4); font-size: .875rem; }
.btn--block { width: 100%; }
.btn--icon { width: 3rem; height: 3rem; padding: 0; flex: none; }

.btn--added { background: var(--color-success); color: #fff; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }
.icon--xl { width: 2rem; height: 2rem; }

/* --------------------------------------------------------------------------
   6. Бейджи
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: .75rem; font-weight: 600; line-height: 1;
  padding: .4em .6em;
}
.badge--fact { background: var(--color-secondary-wash); color: var(--color-text); }
.badge--accent { background: var(--color-primary-wash); color: var(--color-primary); }
.badge--success { background: var(--color-success-wash); color: var(--color-success); }
.badge--warning { background: var(--color-warning-wash); color: var(--color-warning); }
.badge--sale { background: var(--color-primary); color: #fff; }
.badge--info { background: var(--color-info-wash); color: var(--color-info); }

.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Плашка-чип фильтра / размера */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  font-size: .875rem; font-weight: 500;
  padding: .45em 1em;
  transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
}
.chip:hover { border-color: var(--color-primary); }
.chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chip.is-disabled { opacity: .4; pointer-events: none; }
.chip--removable { padding-right: .6em; }

/* --------------------------------------------------------------------------
   7. Заглушка изображения (честный плейсхолдер вместо стока)
   -------------------------------------------------------------------------- */
.ph-media {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-bg-alt);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-4);
  aspect-ratio: var(--ph-ratio, 4/5);
  overflow: hidden;
}
.ph-media__icon { width: 2rem; height: 2rem; opacity: .6; }
.ph-media__label { font-size: .8125rem; max-width: 14rem; line-height: 1.4; }
.ph-media--wide { --ph-ratio: 16/9; }
.ph-media--square { --ph-ratio: 1/1; }
.ph-media--tall { --ph-ratio: 3/4; }

/* Реальная фотография (атмосфера/товар) — визуально того же формата, что .ph-media,
   но НЕ заглушка: используется там, где фото не утверждает непроверяемый факт о LEGION
   (интерьеры, ткани, товары на кровати). Для производства/сотрудников/сертификатов —
   тоже .photo, но с меткой .temp-tag (см. ниже): это временный сток/генерация для
   наглядности макета, помечен как подлежащий замене на реальные фото. Настоящих
   выдуманных свидетельств (отзывы, сертификаты с конкретными номерами) здесь нет —
   для отзывов остаётся .review-card без фото людей (см. ниже), сертификат — обезличенный
   генерик-документ без текста/печати. */
.photo {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: var(--ph-ratio, 4/5);
  background: var(--color-bg-alt);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--wide { --ph-ratio: 16/9; }
.photo--square { --ph-ratio: 1/1; }
.photo--tall { --ph-ratio: 3/4; }
.photo--lg-radius { border-radius: var(--radius-lg); }

/* Метка "временное фото" — на стоковых/сгенерированных фото производства,
   сотрудников и обезличенного документа-заглушки сертификата. Напоминание перед
   запуском реального сайта: заменить на настоящие фото. Не используется на .photo
   без этой пометки (те фото — обычные атмосферные/товарные, менять не обязательно). */
.temp-tag {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
  display: flex; align-items: center; gap: .3em;
  max-width: calc(100% - var(--space-3));
  background: rgba(24, 17, 16, .74); color: #fff;
  font-size: .625rem; font-weight: 700; letter-spacing: .02em; line-height: 1.25;
  text-transform: uppercase; text-align: left;
  padding: .3em .55em; border-radius: var(--radius-sm);
  pointer-events: none;
}
.temp-tag svg { width: 11px; height: 11px; flex: none; }
.temp-tag--compact { font-size: .5rem; padding: .25em .4em; letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   8. Шапка сайта
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header__utility {
  display: none;
}
@media (min-width: 64em) {
  .site-header__utility {
    display: flex; align-items: center; gap: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    padding-block: var(--space-2);
    font-size: .875rem; color: var(--color-text-secondary);
  }
  .site-header__utility .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); width: 100%; }
}
.site-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-text); }
.site-header__hours { color: var(--color-text-muted); }

.site-header__main { padding-block: var(--space-3); }
.site-header__main .container { display: flex; align-items: center; gap: var(--space-4); }

.site-header__main .container { flex-wrap: nowrap; }
.site-header__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm);
  flex: none;
}
.site-header__burger:hover { background: var(--color-bg-alt); }
@media (min-width: 64em) { .site-header__burger { display: none; } }

.site-header__logo { display: block; flex: none; }
.site-header__logo img { height: 2.25rem; width: auto; }
@media (min-width: 30em) { .site-header__logo img { height: 2.5rem; } }

.site-header__nav { display: none; }
@media (min-width: 64em) {
  .site-header__nav { display: flex; align-items: center; gap: var(--space-4); margin-left: var(--space-5); flex: none; }
  .site-header__nav a { font-weight: 500; font-size: .875rem; padding-block: var(--space-2); border-bottom: 2px solid transparent; white-space: nowrap; }
  .site-header__nav a:hover { color: var(--color-primary); }
  .site-header__nav a.is-secondary { color: var(--color-text-secondary); }
}
@media (min-width: 78em) {
  .site-header__nav { gap: var(--space-5); }
  .site-header__nav a { font-size: .9375rem; }
}

.site-header__actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; flex: none; }

/* Поиск — иконка-триггер в шапке + выпадающая панель на всю ширину (вместо растущего инпута,
   чтобы раскладка шапки была предсказуемой на любой десктопной ширине). */
.search-field { position: relative; }
.search-field input {
  width: 100%; height: 2.75rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border); background: var(--color-bg);
  padding-inline: var(--space-5) var(--space-3);
  font-size: .9375rem;
}
.search-field input:focus { border-color: var(--color-primary); background: var(--color-surface); }
.search-field svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: var(--color-text-muted); }

.search-overlay {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 45;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-4);
  transform: translateY(-6px); opacity: 0; visibility: hidden;
  transition: transform var(--motion-base), opacity var(--motion-base), visibility 0s var(--motion-base);
}
.search-overlay.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.search-overlay .search-field { max-width: 34rem; margin-inline: auto; }
.header-action {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); flex: none;
}
.header-action:hover { background: var(--color-bg-alt); }
.header-action__count {
  position: absolute; top: 0.25rem; right: 0.25rem;
  background: var(--color-primary); color: #fff; font-size: .625rem; font-weight: 700;
  min-width: 1.05rem; height: 1.05rem; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center; padding-inline: .2em;
}
.header-action--help { display: none; }
@media (min-width: 64em) {
  .header-action--help {
    display: inline-flex; width: auto; height: 2.75rem; padding-inline: var(--space-3);
    background: var(--color-primary-wash); color: var(--color-primary); border-radius: var(--radius-md);
    font-weight: 600; font-size: .8125rem; gap: var(--space-2); white-space: nowrap; flex: none;
  }
  .header-action--help:hover { background: var(--color-primary); color: #fff; }
}
@media (min-width: 78em) { .header-action--help { padding-inline: var(--space-4); font-size: .875rem; } }

/* Мега-меню (десктоп) — упрощённая раскрывающаяся панель */
.mega {
  position: relative;
}
.mega__panel {
  display: none;
  position: absolute; top: 100%; left: 0; margin-top: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--space-5); min-width: 30rem;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  z-index: 50;
}
.mega:hover .mega__panel, .mega:focus-within .mega__panel { display: grid; }
.mega__list a { display: block; padding: var(--space-2) 0; font-size: .9375rem; }
.mega__list a:hover { color: var(--color-primary); }
.mega__promo {
  background: var(--color-bg-alt); border-radius: var(--radius-md);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2);
}

/* Мобильное меню-шторка */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--color-surface);
  transform: translateX(-100%);
  transition: transform var(--motion-slow);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.mobile-menu__close { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.mobile-menu__close:hover { background: var(--color-bg-alt); }
.mobile-menu__body { padding: var(--space-4); flex: 1; }
.mobile-menu__group { border-bottom: 1px solid var(--color-border); }
.mobile-menu__group summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-1); font-weight: 600; font-size: 1.0625rem;
}
.mobile-menu__group summary::-webkit-details-marker { display: none; }
.mobile-menu__group summary .icon { transition: transform var(--motion-base); }
.mobile-menu__group[open] summary .icon { transform: rotate(180deg); }
.mobile-menu__sub { padding: 0 var(--space-1) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-menu__sub a { padding: var(--space-2) 0; color: var(--color-text-secondary); font-size: .9375rem; }
.mobile-menu__link { display: block; padding: var(--space-4) var(--space-1); font-weight: 600; font-size: 1.0625rem; border-bottom: 1px solid var(--color-border); }
.mobile-menu__link.is-secondary { color: var(--color-text-secondary); font-weight: 500; }
.mobile-menu__foot { margin-top: auto; padding: var(--space-5) var(--space-4); background: var(--color-bg-alt); display: flex; flex-direction: column; gap: var(--space-3); }
.overlay {
  position: fixed; inset: 0; background: rgba(36,26,26,.4); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity var(--motion-base);
}
.overlay.is-open { opacity: 1; pointer-events: auto; }
body.no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. Мобильная нижняя навигация
   -------------------------------------------------------------------------- */
.mobile-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  transition: transform var(--motion-base);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-tabbar.is-hidden { transform: translateY(100%); }
@media (min-width: 64em) { .mobile-tabbar { display: none; } }
.mobile-tabbar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; padding-block: var(--space-2); position: relative;
  color: var(--color-text-secondary); font-size: .6875rem; font-weight: 600;
  min-height: 4rem;
}
.mobile-tabbar__item.is-active { color: var(--color-primary); }
.mobile-tabbar__count {
  position: absolute; top: .35rem; right: 50%; margin-right: -1.15rem;
  background: var(--color-primary); color: #fff; font-size: .625rem; font-weight: 700;
  min-width: 1.05rem; height: 1.05rem; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------------------------------
   10. Хлебные крошки
   -------------------------------------------------------------------------- */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: .8125rem; color: var(--color-text-secondary); padding-block: var(--space-4); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs__sep { color: var(--color-border-strong); }
.breadcrumbs__current { color: var(--color-text); }

/* --------------------------------------------------------------------------
   11. Карточки
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--motion-base), transform var(--motion-base);
}

/* Карточка товара */
.product-card { display: flex; flex-direction: column; overflow: hidden; }
.product-card:hover, .product-card:focus-within { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.product-card__media { position: relative; }
.product-card__media .ph-media { border-radius: 0; border-width: 0 0 1px 0; }
.product-card__badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.product-card__fav {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.9); display: inline-flex; align-items: center; justify-content: center;
}
.product-card__fav:hover { background: #fff; }
.product-card__fav.is-active .icon { fill: var(--color-primary); stroke: var(--color-primary); }
.product-card__quick {
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--motion-base), transform var(--motion-base);
}
.product-card:hover .product-card__quick, .product-card:focus-within .product-card__quick { opacity: 1; transform: none; }
.product-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-card__name { font-family: var(--font-body); font-weight: 600; font-size: 1rem; }
.product-card__name a:hover { color: var(--color-primary); }
.product-card__benefit { font-size: .8125rem; color: var(--color-text-secondary); }
.product-card__rating { display: flex; align-items: center; gap: var(--space-1); font-size: .8125rem; color: var(--color-text-secondary); }
.product-card__rating strong { color: var(--color-text); }
.product-card__sizes { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: auto; }
.product-card__sizes .chip { padding: .3em .65em; font-size: .75rem; }
.product-card__footer { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-border); }
.product-card__footer .price { white-space: nowrap; }
.product-card__footer > .btn { width: 100%; }
.product-card__price-from { font-size: .75rem; color: var(--color-text-muted); display: block; }

/* Карточка категории/сценария */
.category-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; display: block; }
.category-card .ph-media { border-radius: var(--radius-lg); border-color: var(--color-border); }
.category-card__label {
  position: absolute; left: var(--space-4); bottom: var(--space-4); right: var(--space-4);
  background: rgba(36,26,26,.55); color: #fff; border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); font-weight: 600;
}

/* Карточка преимущества */
.advantage { display: flex; flex-direction: column; gap: var(--space-3); }
.advantage__icon { width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--color-primary-wash); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.advantage__title { font-weight: 600; }
.advantage__text { font-size: .875rem; color: var(--color-text-secondary); }

/* Карточка серии */
.series-card { display: flex; flex-direction: column; }
.series-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.series-card__price { color: var(--color-text-secondary); font-size: .875rem; }

/* --------------------------------------------------------------------------
   12. Формы
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: .875rem; font-weight: 600; }
.field input, .field select, .field textarea {
  height: 3rem; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong); background: var(--color-surface);
  padding-inline: var(--space-4);
}
.field textarea { height: auto; padding-block: var(--space-3); resize: vertical; min-height: 6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-wash);
}
.field--error input { border-color: var(--color-danger); }
.field__error { font-size: .8125rem; color: var(--color-danger); display: flex; align-items: center; gap: var(--space-1); }
.field__hint { font-size: .8125rem; color: var(--color-text-muted); }
.field-row { display: grid; gap: var(--space-4); }
.field-row > * { min-width: 0; }
@media (min-width: 40em) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.consent { display: flex; align-items: flex-start; gap: var(--space-2); font-size: .8125rem; color: var(--color-text-secondary); }
.consent input { margin-top: .2em; }
.consent a { color: var(--color-primary); text-decoration: underline; }

/* Степпер количества */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); }
.stepper button { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.stepper button:hover { color: var(--color-primary); }
.stepper input { width: 2.25rem; height: 2.25rem; border: none; text-align: center; background: none; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------------------------
   13. Квиз
   -------------------------------------------------------------------------- */
.quiz-progress { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.quiz-progress__seg { flex: 1; height: .3rem; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.quiz-progress__seg.is-done, .quiz-progress__seg.is-current { background: var(--color-primary); }

.quiz-step { display: none; }
.quiz-step.is-active { display: block; animation: quiz-in var(--motion-slow); }
@keyframes quiz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.quiz-answers { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 40em) { .quiz-answers--2col { grid-template-columns: 1fr 1fr; } }
.quiz-answer {
  display: flex; align-items: center; gap: var(--space-3);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5); min-height: 3.5rem;
  text-align: left; font-size: 1rem; font-weight: 500;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.quiz-answer:hover { border-color: var(--color-secondary); }
.quiz-answer.is-selected { border-color: var(--color-primary); background: var(--color-primary-wash); color: var(--color-primary); font-weight: 600; }
.quiz-answer__icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--color-secondary); }

.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-8); }

.quiz-result-card { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .quiz-result-card { grid-template-columns: 12rem 1fr; align-items: center; } }
.quiz-result-card__why { background: var(--color-secondary-wash); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: .875rem; margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   14. Каталог — фильтры и панель управления
   -------------------------------------------------------------------------- */
.catalog-layout { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 64em) { .catalog-layout { grid-template-columns: 17rem 1fr; } }

.filters { display: none; }
@media (min-width: 64em) { .filters { display: block; position: sticky; top: 6rem; } }
.filters__group { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
.filters__group summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.filters__group summary::-webkit-details-marker { display: none; }
.filters__group summary .icon { transition: transform var(--motion-base); }
.filters__group[open] summary .icon { transform: rotate(180deg); }
.filters__body { padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.filters__option { display: flex; align-items: center; gap: var(--space-2); font-size: .9375rem; }
.filters__option input { width: 1.15rem; height: 1.15rem; accent-color: var(--color-primary); }
.filters__range { display: flex; align-items: center; gap: var(--space-2); }
.filters__range input { width: 100%; height: 2.5rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); padding-inline: var(--space-2); text-align: center; }
.filters__firmness { display: flex; flex-direction: column; gap: var(--space-1); }
.firmness-scale { display: flex; gap: 3px; height: .5rem; border-radius: var(--radius-pill); overflow: hidden; margin-top: var(--space-2); }
.firmness-scale span { flex: 1; background: var(--color-border); }
.firmness-scale span.is-filled { background: var(--color-secondary); }

.applied-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-5); flex-wrap: wrap;
}
.catalog-toolbar__count { color: var(--color-text-secondary); font-size: .9375rem; }
.catalog-toolbar__right { display: flex; align-items: center; gap: var(--space-3); }
.filters-trigger { display: inline-flex; align-items: center; gap: var(--space-2); }
@media (min-width: 64em) { .filters-trigger { display: none; } }
.sort-select { height: 2.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding-inline: var(--space-3); background: var(--color-surface); font-size: .875rem; }
.view-toggle { display: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; }
@media (min-width: 40em) { .view-toggle { display: flex; } }
.view-toggle button { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
.view-toggle button.is-active { background: var(--color-primary-wash); color: var(--color-primary); }

/* Мобильная шторка фильтров */
.filters-sheet {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end;
  visibility: hidden;
}
.filters-sheet.is-open { visibility: visible; }
.filters-sheet__panel {
  background: var(--color-surface); width: 100%; max-height: 88vh; overflow-y: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-md);
  padding: var(--space-5); transform: translateY(100%); transition: transform var(--motion-slow);
}
.filters-sheet.is-open .filters-sheet__panel { transform: translateY(0); }
.filters-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.filters-sheet__apply { position: sticky; bottom: 0; background: var(--color-surface); padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--color-border); }

.empty-state { text-align: center; padding: var(--space-10) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.empty-state__icon { width: 3rem; height: 3rem; color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   15. Страница товара
   -------------------------------------------------------------------------- */
.product-header { display: grid; gap: var(--space-8); margin-bottom: var(--space-10); }
.product-header > * { min-width: 0; } /* не даём горизонтально-скроллящимся рядам (миниатюры, чипы) раздувать грид-колонку */
@media (min-width: 64em) { .product-header { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.gallery__main { margin-bottom: var(--space-3); }
.gallery__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; }
.gallery__thumbs .ph-media, .gallery__thumbs .photo {
  width: 4.5rem; flex: none; cursor: pointer;
  border: 1.5px solid var(--color-border); aspect-ratio: 1/1;
}
.gallery__thumbs .ph-media.is-active, .gallery__thumbs .photo.is-active { border-color: var(--color-primary); }
.gallery__thumbs .ph-media__label, .gallery__thumbs .ph-media__icon { display: none; }

.product-info__title { margin-bottom: var(--space-2); }
.product-info__meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.product-info__price-block { padding: var(--space-5); background: var(--color-bg-alt); border-radius: var(--radius-lg); margin-bottom: var(--space-5); }

.variant-group { margin-bottom: var(--space-5); }
.variant-group__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); font-weight: 600; font-size: .9375rem; }
.variant-group__label a { font-weight: 500; font-size: .8125rem; color: var(--color-primary); }
.variant-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.availability { display: flex; align-items: center; gap: var(--space-2); font-size: .9375rem; margin-bottom: var(--space-5); }
.availability__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-success); flex: none; }
.availability.is-order .availability__dot { background: var(--color-warning); }

.product-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.product-cta .btn--primary { flex: 1 1 12rem; }

.info-row-grid { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 40em) { .info-row-grid { grid-template-columns: repeat(3, 1fr); } }
.info-row {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); display: flex; gap: var(--space-3);
}
.info-row__icon { color: var(--color-primary); flex: none; }
.info-row__title { font-weight: 600; font-size: .9375rem; margin-bottom: .2em; }
.info-row__text { font-size: .8125rem; color: var(--color-text-secondary); }

.anchor-tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding-block: var(--space-2); margin-bottom: var(--space-2); }
@media (min-width: 64em) { .anchor-tabs { display: none; } }
.anchor-tabs a { flex: none; padding: .5em 1em; border-radius: var(--radius-pill); background: var(--color-bg-alt); font-size: .8125rem; font-weight: 600; }

.spec-list { display: grid; gap: var(--space-3); }
@media (min-width: 40em) { .spec-list { grid-template-columns: 1fr 1fr; } }
.spec-item { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.spec-item__icon { color: var(--color-secondary); flex: none; margin-top: .1rem; }
.spec-item__label { font-size: .8125rem; color: var(--color-text-secondary); display: block; }
.spec-item__value { font-weight: 600; }

.layers { display: flex; flex-direction: column; gap: var(--space-3); }
.layer { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); }
.layer:nth-child(odd) { background: var(--color-bg-alt); }
.layer__index { width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-primary-wash); color: var(--color-primary); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; font-size: .875rem; }

.fit-columns { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .fit-columns { grid-template-columns: 1fr 1fr; } }
.fit-col { padding: var(--space-5); border-radius: var(--radius-lg); }
.fit-col--good { background: var(--color-success-wash); }
.fit-col--consider { background: var(--color-bg-alt); }
.fit-col__title { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; margin-bottom: var(--space-3); }
.fit-col--good .fit-col__title { color: var(--color-success); }
.fit-col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.fit-col li { display: flex; gap: var(--space-2); font-size: .9375rem; }

details.params-table summary { cursor: pointer; font-weight: 600; color: var(--color-primary); padding: var(--space-3) 0; }
.params-table__grid { display: grid; }
.params-row { display: grid; grid-template-columns: 1fr 1fr; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: .9375rem; }
.params-row__label { color: var(--color-text-secondary); }

.cert-list { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.cert-item { width: 8rem; }
.cert-item .ph-media { aspect-ratio: 3/4; }

.review-empty { text-align: center; padding: var(--space-8) var(--space-4); background: var(--color-bg-alt); border-radius: var(--radius-lg); }

/* Образец карточки отзыва (без реальных отзывов) — только чтобы показать композицию:
   иконка вместо фото человека, звёзды как элемент интерфейса, нейтральный текст-плейсхолдер.
   Каждая карточка помечена .temp-tag — это не настоящее свидетельство клиента. */
.review-sample__lead { max-width: 40rem; color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.review-card {
  position: relative; background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.review-card__head { display: flex; align-items: center; gap: var(--space-3); }
.review-card__avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none;
  background: var(--color-bg); border: 1px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center; color: var(--color-text-muted);
}
.review-card__avatar .icon { width: 1.25rem; height: 1.25rem; }
.review-card__name { font-size: .875rem; color: var(--color-text-muted); }
.review-stars { display: flex; gap: .15rem; color: var(--color-warning); }
.review-stars .icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.review-card__text { color: var(--color-text-secondary); font-style: italic; }

.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; padding: var(--space-4) 0; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { flex: none; transition: transform var(--motion-base); color: var(--color-primary); }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item__body { padding-bottom: var(--space-4); color: var(--color-text-secondary); }

/* Липкая мобильная CTA-панель на странице товара */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-4);
  transform: translateY(100%); transition: transform var(--motion-base);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0));
}
.sticky-cta.is-visible { transform: translateY(0); }
@media (min-width: 64em) { .sticky-cta { display: none; } }
.sticky-cta__price { flex: none; }
.sticky-cta .btn { flex: 1; }

/* --------------------------------------------------------------------------
   16. Отзывы / доверие
   -------------------------------------------------------------------------- */
.trust-strip { display: grid; gap: var(--space-6); }
.trust-strip__stats { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-5); }
@media (min-width: 48em) { .trust-strip__stats { grid-template-columns: repeat(4,1fr); } }
.trust-stat__num { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--color-primary); }
.trust-stat__label { font-size: .8125rem; color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   17. Панель консультации
   -------------------------------------------------------------------------- */
.help-panel {
  position: fixed; z-index: 110; background: var(--color-surface); box-shadow: var(--shadow-md);
  visibility: hidden;
}
.help-panel.is-open { visibility: visible; }
@media (max-width: 63.99em) {
  .help-panel { inset: auto 0 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-5); transform: translateY(100%); transition: transform var(--motion-slow); max-height: 85vh; overflow-y: auto; }
  .help-panel.is-open { transform: translateY(0); }
}
@media (min-width: 64em) {
  .help-panel { top: 0; right: 0; bottom: 0; width: 23rem; padding: var(--space-6); transform: translateX(100%); transition: transform var(--motion-slow); overflow-y: auto; }
  .help-panel.is-open { transform: translateX(0); }
}
.help-panel__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-5); gap: var(--space-3); }
.help-panel__channels { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-5) 0; }
.help-panel__channel { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.help-panel__channel:hover { border-color: var(--color-primary); }
.help-panel__hours-note { background: var(--color-info-wash); color: var(--color-info); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: .8125rem; margin-bottom: var(--space-5); }

/* Модалка быстрого просмотра — центрированная, отдельно от help-panel (не боковая шторка) */
.quick-view-modal {
  position: fixed; z-index: 110; top: 50%; left: 50%;
  width: min(90vw, 32rem); max-height: 85vh; overflow-y: auto;
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--space-6);
  transform: translate(-50%, -46%); opacity: 0; visibility: hidden;
  transition: transform var(--motion-base), opacity var(--motion-base), visibility 0s var(--motion-base);
}
.quick-view-modal.is-open { transform: translate(-50%, -50%); opacity: 1; visibility: visible; transition-delay: 0s; }

/* --------------------------------------------------------------------------
   18. Футер
   -------------------------------------------------------------------------- */
.site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding-top: var(--space-10); }
.footer-grid { display: grid; gap: var(--space-8); padding-bottom: var(--space-8); }
@media (min-width: 40em) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .footer-grid { grid-template-columns: 1.3fr repeat(4, 1fr); } }
.footer-col__title { font-weight: 600; margin-bottom: var(--space-3); font-size: .9375rem; }
.footer-col a, .footer-col p { display: block; color: var(--color-text-secondary); font-size: .875rem; padding-block: .3em; }
.footer-col a:hover { color: var(--color-primary); }
.footer-brand__logo img { height: 2.25rem; margin-bottom: var(--space-3); }
.footer-brand p { color: var(--color-text-secondary); font-size: .875rem; max-width: 20rem; }
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.footer-social a { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; }
.footer-bottom { border-top: 1px solid var(--color-border); padding-block: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; font-size: .8125rem; color: var(--color-text-muted); }
.footer-bottom a { color: var(--color-text-muted); }
.footer-bottom a:hover { color: var(--color-primary); }

/* Отступ снизу под мобильную tabbar, чтобы контент/футер не перекрывались */
.tabbar-spacer { height: 4rem; }
@media (min-width: 64em) { .tabbar-spacer { display: none; } }

/* --------------------------------------------------------------------------
   19. Утилиты
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* Только прячем: своё display элемента (inline-flex у кнопок шапки и т.п.) не перебиваем. */
@media (max-width: 63.99em) { .hide-mobile { display: none !important; } }
@media (min-width: 64em) { .hide-desktop { display: none !important; } }

.mock-note {
  background: var(--color-info-wash); color: var(--color-info);
  font-size: .8125rem; text-align: center; padding: var(--space-2) var(--space-4);
}
.mock-note a { text-decoration: underline; }