/* ===========================================
     FAND Theme Global Styles
     (CSS Variables are defined in _css_variables.html.erb via theme_setting())
     =========================================== */

  /* Подарочная карта «Стёжка» — переиспользуемая картинка (каталог, корзина).
     Размеры в cqw масштабируют содержимое под ширину карты. ВАЖНО: cqw на самом
     контейнере (.fand-gc-art) резолвится от вьюпорта (элемент не запрашивает сам
     себя), поэтому фон/скругление/тень/паддинг — на дочернем .fand-gc-art__inner. */
  .fand-gc-art{ container-type:inline-size; position:relative; width:100%; aspect-ratio:1.58/1; }
  .fand-gc-art__inner{
    position:absolute; inset:0; overflow:hidden; border-radius:4cqw;
    box-shadow:0 5cqw 12cqw -8cqw rgba(40,4,14,.5);
    padding:8cqw 9cqw; display:flex; flex-direction:column; justify-content:space-between;
    background-color:#59091b;
    background-image:
      radial-gradient(130% 100% at 50% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
      repeating-linear-gradient(64deg, rgba(0,0,0,.30) 0 .5cqw, rgba(255,214,170,.10) .8cqw 1.3cqw, rgba(255,255,255,0) 1.3cqw 17cqw),
      repeating-linear-gradient(-64deg, rgba(0,0,0,.30) 0 .5cqw, rgba(255,214,170,.10) .8cqw 1.3cqw, rgba(255,255,255,0) 1.3cqw 17cqw),
      linear-gradient(160deg,#6a0f22,#420711);
  }
  .fand-gc-art__inner::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:repeating-linear-gradient(64deg,transparent 0 8cqw,rgba(0,0,0,.05) 8cqw 9cqw),
               repeating-linear-gradient(-64deg,transparent 0 8cqw,rgba(0,0,0,.05) 8cqw 9cqw);}
  .fand-gc-art__inner > *{position:relative; z-index:2;}
  .fand-gc-art__brand{font-family:var(--fand-font-title); letter-spacing:.42em; font-size:7cqw; line-height:1; color:#F2E5CF; padding-left:.42em; text-shadow:0 1px 0 rgba(0,0,0,.35);}
  .fand-gc-art__label{font-size:3.4cqw; letter-spacing:.28em; text-transform:uppercase; color:#D8BC7C; margin-bottom:2.5cqw;}
  .fand-gc-art__amount{font-family:var(--fand-font-price); font-weight:500; font-size:15cqw; line-height:1; color:#F2E5CF; font-variant-numeric:tabular-nums; text-shadow:0 1px 1px rgba(0,0,0,.4);}
  .fand-gc-art__rub{font-size:7.5cqw; margin-left:1.5cqw; opacity:.85;}
  .fand-gc-art__tag{font-size:3.2cqw; letter-spacing:.06em; color:rgba(242,229,207,.72); line-height:1;}
  /* Очень маленькая миниатюра (страница /cart, ~64px): без мелкого текста */
  @container (max-width:96px){
    .fand-gc-art__label, .fand-gc-art__tag{display:none;}
    .fand-gc-art__amount{font-size:18cqw;}
    .fand-gc-art__brand{font-size:9cqw;}
  }

  /* Custom scrollbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: #D4D4D4 transparent;
  }
  *::-webkit-scrollbar { width: 2px; height: 2px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: #D4D4D4; border-radius: 4px; }
  *::-webkit-scrollbar-thumb:hover { background: #ABABAB; }

  /* Base Typography. Inter is listed first so digits/separators/currency
     glyphs (the only chars in the Inter subset we load) get its modern
     numerals site-wide; letters fall through to the next family. */
  html, body {
    font-family: 'Inter', var(--fand-font-body);
    color: var(--fand-color-text);
    background-color: var(--fand-color-bg);
    overflow-x: clip;
    max-width: 100vw;
  }
  /* iOS Safari: белый статус-бар — корень html в цвет фона сайта (как TheCultt). */
  html { background-color: var(--fand-color-bg); }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', var(--fand-font-heading);
    font-weight: 400;
  }

  /* Крупные заголовки страниц — Playfair Display SC (как на главной). Правило
     вне @layer с !important, т.к. tailwind-утилиты (font-[...]) лежат в @layer и
     проигрывают вне-слойному правилу h1 выше — класс font-family не срабатывал. */
  .fand-title-font { font-family: var(--fand-font-title) !important; }

  /* Цифры и значок рубля — шрифтом Jost Light (как в мини-приложении).
     Подключаем подмножество Jost 300 только для глифов 0-9 и ₽; за счёт
     unicode-range и пер-глифного фолбэка все ОСТАЛЬНЫЕ символы остаются
     основным шрифтом (Raleway). font-weight:100 900 — чтобы цифры всегда были
     светлого начертания независимо от жирности окружающего текста. */
  @font-face {
    font-family: 'JostNum';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/jost-num-edbd185d.woff2") format('woff2');
    unicode-range: U+0030-0039, U+20BD;
  }

  /* Jost Medium (500) — фиксированный вес для ЦИФР в личном кабинете (стандарт:
     цифры = Jost Medium). Подмножество (0-9, ₽); буквы падают на Raleway/Playfair.
     font-weight:500 — единственное значение, поэтому цифры всегда Medium,
     независимо от жирности окружающего текста. */
  @font-face {
    font-family: 'JostMed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/jost-med-65e63c25.woff2") format('woff2');
    unicode-range: U+0030-0039, U+20BD;
  }

  /* === ЕДИНЫЙ СТАНДАРТ ШРИФТОВ ЛИЧНОГО КАБИНЕТА (список/данные .acct + детали заказа .fand-fonts) ===
     Текст — Raleway; заголовки — Playfair Display SC; цифры — Jost Medium (500).
     'JostMed'/'Jost' содержат только цифры/₽ → буквы падают на Raleway/Playfair. */
  .acct, .acct--wide, .fand-fonts {
    font-family: 'JostMed', 'Raleway', sans-serif;
    --fand-font-body:    'JostMed', 'Raleway', sans-serif;
    --fand-font-price:   'JostMed', 'Raleway', sans-serif;
    --fand-font-heading: 'JostMed', 'Playfair Display SC', serif;
    --fand-font-title:   'JostMed', 'Playfair Display SC', serif;
  }
  /* :not(.fand-page-title) — заголовок «Личный кабинет» оформляется общим
     правилом заголовков разделов, остальные заголовки кабинета не трогаем. */
  .acct h1:not(.fand-page-title), .acct h2, .acct h3, .acct h4,
  .acct .acct__title:not(.fand-page-title),
  .fand-fonts h1:not(.fand-page-title), .fand-fonts h2, .fand-fonts h3, .fand-fonts h4 {
    font-family: 'JostMed', 'Playfair Display SC', serif !important;
  }
  .acct .fand-price, .acct .fand-price *, .acct .loy-num, .acct .balls-card__num, .acct .balls-row__a, .acct .acct__balls,
  .fand-fonts .fand-price, .fand-fonts .fand-price * {
    font-family: 'JostMed', var(--fand-font-body) !important;
    font-weight: 500 !important;
    font-feature-settings: 'tnum' 1;
  }

  /* === #10 — начертания Jost для цифр === */
  /* Цены и знак ₽ — Jost Light (300). Покрываем и вложенные элементы цены,
     т.к. внутренние div-ы имеют font-semibold/medium и перебивают вес. */
  .fand-price,
  .fand-price * {
    font-family: 'Jost', var(--fand-font-price) !important;
    font-weight: 300 !important;
    font-feature-settings: 'tnum' 1;
  }
  /* Бейдж рассрочки под ценой. Лежит внутри .fand-price, а правило выше красит
     всё внутри в Jost целиком — поэтому задаём ему собственную пару: буквы
     Raleway, цифры и ₽ — Jost из семейства 'JostNum' (тот же приём, что в
     личном кабинете). Сумма — Medium, пояснение — Regular. */
  .fand-installment,
  .fand-installment * {
    font-family: 'JostNum', 'Raleway', sans-serif !important;
    font-feature-settings: 'tnum' 1;
  }
  .fand-installment__amount {
    font-weight: 500 !important;
    letter-spacing: 0.01em;
  }
  .fand-installment__tail {
    font-weight: 400 !important;
  }

  /* Знак вопроса рядом с рассрочкой. Подсказка на нативном <details>: на iPhone
     кнопка не получает фокус по тапу, поэтому hover и focus-within там не работают.
     У <summary> НЕЛЬЗЯ ставить display: flex — Safari тогда перестаёт открывать
     details по нажатию; размеры задаём через inline-block и line-height. */
  .fand-installment__info {
    position: relative;
    display: inline-block;
    line-height: 0;
  }
  .fand-installment__q {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    padding: 4px;          /* палец попадает по знаку, а не мимо */
    margin: -4px;
    line-height: 0;
  }
  .fand-installment__q::-webkit-details-marker { display: none; }
  .fand-installment__q::marker { content: ''; }
  .fand-installment__q svg { width: 16px; height: 16px; display: block; }
  @media (min-width: 1024px) {
    .fand-installment__q svg { width: 19px; height: 19px; }
  }
  .fand-installment__hint {
    display: none;
    position: absolute;
    bottom: 100%;
    right: -6px;           /* прижата к правому краю знака: на телефоне не уезжает за экран */
    margin-bottom: 8px;
    width: 240px;
    max-width: 70vw;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--fand-color-primary);
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
    z-index: 20;
  }
  .fand-installment__info[open] .fand-installment__hint { display: block; }
  @media (hover: hover) {
    .fand-installment__info:hover .fand-installment__hint { display: block; }
  }

  /* Кнопки навигации в шапке (Каталог, Бренды и т.д.) — Raleway Light */
  .header--nav-link {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300 !important;
  }
  /* Бренд и название сумки в карточке — Light (300), буквы и цифры. Цифры — Jost,
     буквы — Raleway; вес 300 через !important, т.к. h3-заголовок перебивается
     неслоевым правилом h1–h6. */
  .product-card-title,
  .product-card-brand { font-family: 'Jost', var(--fand-font-body) !important; font-weight: 300 !important; }
  /* Телефоны/цифры в подвале — Jost Regular (400) */
  .fand-footer__nav-list,
  .fand-footer__social-link { font-family: 'Jost', var(--fand-font-body) !important; }

  /* Links */
  a {
    transition: color var(--fand-transition);
  }

  /* Global: remove focus outline/ring from all inputs, buttons, selects, textareas */
  input:focus,
  select:focus,
  textarea:focus,
  button:focus {
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: none !important;
  }

  /* #4 — при скролле шапка (с корзиной) уходила не до конца: из-за смещения
     top-[30px] после сдвига на -100% оставался виден низ шапки. Добавляем это
     смещение к сдвигу, чтобы шапка скрывалась полностью. */
  .headroom--unpinned:not([data-toggle-menu-open-value="true"]):not([data-slideover-open-value="true"]) nav {
    transform: translateY(calc(-100% - 120px)) !important;
  }

  /* Мобилка: при открытом бургере прячем шапку (меню на весь экран).
     На десктопе шапку НЕ прячем — меню выезжает панелью слева поверх затемнения. */
  @media (max-width: 1023px) {
    header:has(.hamburger-visible) > nav {
      display: none !important;
    }
  }

  header:has(.hamburger-visible) ~ .bottom-nav {
    display: none !important;
  }

  /* B1 — бургер-меню на весь экран (без «дверок» сверху/снизу) */
  @media (max-width: 1023px) {
    header:has(.hamburger-visible) .fand-mobile-menu {
      position: fixed;
      inset: 0;
      height: 100dvh;
      z-index: 60;
      overflow-y: auto;
      background: var(--fand-color-bg);
    }
  }

  /* Десктоп: бургер-меню — выезжающая панель слева (как на thecultt) */
  @media (min-width: 1024px) {
    header:has(.hamburger-visible) .fand-mobile-menu {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      height: 100dvh;
      z-index: 61;
      overflow-y: auto;
      background: var(--fand-color-bg);
      box-shadow: 0 0 40px rgba(20, 15, 11, 0.18);
      animation: fandDrawerIn 0.25s ease;
    }
    /* Затемнение фона поверх шапки/контента, но под панелью */
    header:has(.hamburger-visible) .fand-menu-backdrop {
      z-index: 60 !important;
    }
  }
  @keyframes fandDrawerIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  /* ===========================================
     FAND Buttons
     =========================================== */

  .fand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Raleway', var(--fand-font-body);
    border-radius: var(--fand-radius-md);
    transition: all var(--fand-transition);
    cursor: pointer;
    /* Единый вид всех кнопок-плашек: Raleway Regular, 14px на мобиле и 16px на
       десктопе — размер кнопки «Смотреть каталог» в блоке «Для больших дел».
       Размеры и вес держатся здесь, а не Tailwind-классами в секциях: раньше
       каждая кнопка тащила свой text-lg/text-xl и font-medium, отсюда разнобой. */
    font-size: 14px;
    font-weight: 400;
    line-height: 110%;
  }

  @media (min-width: 1024px) {
    .fand-btn {
      font-size: 16px;
    }
  }

  .fand-btn--primary {
    background-color: var(--fand-color-primary);
    color: var(--fand-color-bg-light);
    padding: 16px 40px;
  }

  .fand-btn--primary:hover {
    background-color: var(--fand-color-primary-hover);
  }

  .fand-btn--secondary {
    background-color: var(--fand-color-text-light);
    color: var(--fand-color-text-dark);
    border: 1px solid var(--fand-color-border);
    padding: 16px 40px;
  }

  .fand-btn--secondary:hover {
    background-color: var(--fand-color-bg-gray);
    border-color: var(--fand-color-primary);
  }

  .fand-btn--light {
    background-color: var(--fand-color-bg-light);
    color: var(--fand-color-text-dark);
    padding: 16px 40px;
  }

  .fand-btn--light:hover {
    background-color: var(--fand-color-text-light);
  }

  /* Override default Spree buttons - use same specificity as Tailwind */
  .btn-primary,
  .btn-primary:not(:disabled, .btn-disabled) {
    background-color: var(--fand-color-primary) !important;
    color: white !important;
    border-radius: var(--fand-radius-md) !important;
    font-family: var(--fand-font-body) !important;
    /* Mobile: 12px regular */
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 110% !important;
    transition: background-color var(--fand-transition) !important;
  }

  /* Desktop: 20px medium */
  @media (min-width: 1024px) {
    .btn-primary,
    .btn-primary:not(:disabled, .btn-disabled) {
      font-size: 20px !important;
      font-weight: 500 !important;
      line-height: 110% !important;
    }
  }

  .btn-primary:hover,
  .btn-primary:hover:not(:disabled, .btn-disabled) {
    background-color: var(--fand-color-primary-hover) !important;
    color: white !important;
  }

  /* Icons inside primary buttons should always be white */
  .btn-primary svg,
  .btn-primary svg path,
  .btn-primary svg circle,
  .btn-primary svg rect,
  .btn-primary svg line,
  .btn-primary:hover svg,
  .btn-primary:hover svg path,
  .btn-primary:hover svg circle,
  .btn-primary:hover svg rect,
  .btn-primary:hover svg line {
    color: white !important;
    stroke: white !important;
    fill: none !important;
  }

  .btn-secondary,
  .btn-secondary:not(:disabled, .btn-disabled) {
    background-color: white !important;
    color: var(--fand-color-primary) !important;
    border: 1px solid var(--fand-color-primary) !important;
    border-radius: var(--fand-radius-md) !important;
    font-family: var(--fand-font-body) !important;
    /* Mobile: 12px regular */
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 110% !important;
    transition: border-color var(--fand-transition) !important;
  }

  /* Desktop: 20px medium */
  @media (min-width: 1024px) {
    .btn-secondary,
    .btn-secondary:not(:disabled, .btn-disabled) {
      font-size: 20px !important;
      font-weight: 500 !important;
      line-height: 110% !important;
    }
  }

  .btn-secondary:hover,
  .btn-secondary:hover:not(:disabled, .btn-disabled) {
    background-color: white !important;
    color: var(--fand-color-primary) !important;
    border-color: var(--fand-color-primary-hover) !important;
  }

  /* Icons inside secondary buttons should use primary color */
  .btn-secondary svg,
  .btn-secondary svg path,
  .btn-secondary svg circle,
  .btn-secondary svg rect,
  .btn-secondary svg line,
  .btn-secondary:hover svg,
  .btn-secondary:hover svg path,
  .btn-secondary:hover svg circle,
  .btn-secondary:hover svg rect,
  .btn-secondary:hover svg line {
    color: var(--fand-color-primary) !important;
    stroke: var(--fand-color-primary) !important;
  }

  /* ===========================================
     FAND Form Inputs
     =========================================== */

  .text-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-family: var(--fand-font-body);
    border: 1px solid #D4D4D4 !important;
    border-radius: var(--fand-radius-lg);
    transition: border-color var(--fand-transition);
  }

  .text-input:focus,
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="tel"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus {
    border-color: var(--fand-color-primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--fand-color-primary);
  }

  /* ===========================================
     FAND Product Cards
     =========================================== */

  /* Product card image background */
  .product-card .card-product-featured-images-container,
  .product-card .aspect-square,
  .swiper-slide .card-product-featured-images-container,
  .swiper-slide .aspect-square {
    background-color: var(--fand-color-bg-gray);
    border-radius: 10px;
    overflow: hidden;
  }

  /* Product card info block - fixed height for consistency */
  .product-card-inner {
    height: 82px; /* brand(~12px) + title(2 lines ~24px) + condition(~14px) + gap + price(~12px) */
  }

  .product-card-text-block {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .product-card-price-block {
    flex-shrink: 0;
    margin-top: auto;
    display: flex;
    align-items: center;
    min-height: 26px; /* = высота кнопки корзины (мобайл): цена ровно по центру кнопки */
  }

  /* Главная/новинки (.pc-na): цена и кнопка корзины чуть выше (≈20% от текущего
     расстояния до низа). Цена сидит по ЦЕНТРУ блока высотой с кнопку → её центр
     совпадает с центром кнопки на ОБОИХ экранах. margin-bottom цены = bottom кнопки. */
  .pc-na .product-card-price-block {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    min-height: 26px;   /* = высота кнопки корзины (мобайл) */
  }
  .pc-na .pcg-cart { bottom: 14px; }
  @media (min-width: 1024px) {
    .pc-na .product-card-price-block { margin-bottom: 22px; min-height: 32px; } /* = высота кнопки (десктоп) */
    .pc-na .pcg-cart { bottom: 22px; }
  }
  /* Размеры шрифта — в @layer utilities: иначе Tailwind-утилиты !text-[12px]
     (тоже в этом слое, с !important) перебивают неслоевое правило — для !important
     приоритет CSS-слоёв важнее специфичности. */
  @layer utilities {
    /* Мобайл: бренд, модель и цена — один размер. */
    @media (max-width: 1023px) {
      .pc-na .product-card-brand,
      .pc-na .product-card-title,
      .pc-na .product-card-price,
      .pc-na .product-card-price * { font-size: 14px !important; }
    }
    /* Десктоп: бренд, модель и цена — один размер (цена тоже 18px, чтобы совпадала). */
    @media (min-width: 1024px) {
      .pc-na .product-card-brand,
      .pc-na .product-card-title,
      .pc-na .product-card-price,
      .pc-na .product-card-price * { font-size: 18px !important; }
    }
  }

  /* Кнопка «в корзину» в карточке каталога — иконка-сумка напротив цены, без
     фона-круга, цветом цены (#1A1A1A); по центру высоты цены. */
  .pcg-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 26px;            /* = высота ценового блока (мобайл): иконка по центру цены */
    background: transparent;
    color: #1A1A1A;          /* цвет цены */
    cursor: pointer;
    transition: color .2s ease, transform .1s ease;
  }
  .pcg-cart-btn:hover:not(.is-added) { color: #1A1A1A; }
  .pcg-cart-btn:active { transform: scale(.9); }
  /* КОРПУС сумки — ровно по высоте цифр цены, ручка выступает над строкой.
     Корпус занимает 15 из 22 единиц viewBox, поэтому весь значок выше строки цены,
     а translateY поднимает его ровно настолько, чтобы прямоугольная часть легла
     между верхом и низом цифр. Размеры подобраны замером рендера.
     Селектор по viewBox сумки — чтобы не задеть галочку «добавлено» (её рисует
     cart_add_feedback_controller.js своим SVG 24×24 со своей толщиной). */
  .pcg-cart-btn svg[viewBox="0 0 24 22"] { width: 13px; height: 12px; display: block; transform: translateY(-1.12px); }
  /* Толщина линии = толщине штриха цифр цены. На мобиле цена набрана Jost Light:
     её штрих 0,77px в «Новинках» (14px) и 0,88px в каталоге (16px), поэтому
     stroke-width 1.5 даёт 0,81px — посередине между ними.
     Атрибут stroke-width=2 в самой иконке перебиваем стилем. */
  /* Толщина — на самом svg: рисунок корзины идёт из набора через <use>, внутрь него селектор path не проходит, а stroke-width наследуется */
  .pcg-cart-btn svg[viewBox="0 0 24 22"] { stroke-width: 1.5; }
  @media (min-width: 1024px) {
    .pcg-cart-btn { width: 28px; height: 32px; } /* = высота ценового блока (десктоп) */
    .pcg-cart-btn svg[viewBox="0 0 24 22"] { width: 18px; height: 17px; transform: translateY(-1.8px); }
    .pcg-cart-btn svg[viewBox="0 0 24 22"] path { stroke-width: 1.8; } /* штрих цены 18px/normal = 1,38px */
  }
  /* Состояние «добавлено в корзину»: сумка → БОРДОВАЯ галочка + короткий пульс
     (одинаково на компе и телефоне). */
  .pcg-cart-btn.is-added { color: var(--fand-color-burgundy); animation: pcgPop .38s ease; }
  @keyframes pcgPop { 0% { transform: scale(.85); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }

  /* Кнопка «Подобрать под заказ» в карточке каталога: подчёркивание ниже и
     непрерывное (не прерывается под выносными элементами букв — р, д, з). */
  .fand-order-request {
    text-underline-offset: 4px;
    text-decoration-skip-ink: none;
  }

  /* ===== Каталог: шрифты в фильтрах и в выпадающем списке сортировки =====
     Названия фильтров — Raleway Regular, значения списка и «Сбросить все» —
     Raleway Light, все цифры (счётчики и поля цены) — Jost Light. */
  .fand-filters {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
  }
  /* Названия фильтров: заголовок аккордеона, подпись у «пилюль» и бейджей,
     кнопка фильтра в мобильном попапе. */
  .fand-filters .st-accordion > a,
  .fand-filters [data-controller~="radio-pills"] > div:first-child,
  .fand-filters [data-controller~="badges-filter"] > div:first-child,
  .fand-filters [data-controller~="filter-popup"] > button {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 400 !important;
  }
  /* Значения списка, «Все» под названием фильтра и «Сбросить все» — light даже
     там, где в разметке стоит font-medium. Само слово «Все» подставляет
     selected_badges_controller.js, когда в фильтре ничего не выбрано. */
  .fand-filters label,
  .fand-filters .fand-filter-all,
  .fand-filters .btn-primary,
  .fand-filters a span {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300 !important;
  }
  /* Цифры: счётчики в скобках и поля «От/До» в фильтре цены. */
  .fand-filters .opacity-50,
  .fand-filters input[type="text"],
  .fand-filters input[type="number"] {
    font-family: 'Jost', sans-serif !important;
    font-weight: 300 !important;
  }
  /* Выпадающий список «Сортировать» — Raleway Light. */
  [data-sort-dropdown-target="menu"] span,
  [data-sort-dropdown-target="menu"] label {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300 !important;
  }

  /* Кнопки «Фильтр» и «Сортировать» в каталоге — на десктопе тот же шрифт и та же
     толщина, что у пунктов меню в шапке (Raleway 300). Мобильный вид не трогаем:
     там остаётся font-medium из разметки. */
  @media (min-width: 1024px) {
    .fand-catalog-control {
      font-family: 'Raleway', sans-serif !important;   /* то же, что .header--nav-link */
      font-weight: 300 !important;
    }
  }

  /* Алфавит брендов — в одну строку без переноса, полосу прокрутки прячем. */
  .fand-alphabet-row { scrollbar-width: none; }
  .fand-alphabet-row::-webkit-scrollbar { display: none; }
  /* «Вам также может понравиться» (страница товара): название модели — не более
     одной строки, длинное обрезается многоточием. Перебиваем Tailwind-утилиту
     line-clamp-2 из разметки карточки — специфичности двух классов хватает. */
  .fand-related-products .product-card-title {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  /* Оставляем место под кнопку, чтобы длинное название/состояние/цена не заезжали */
  .product-card-text-block { padding-right: 30px; }
  .product-card-price-block { padding-right: 36px; }
  @media (min-width: 1024px) {
    .product-card-text-block { padding-right: 38px; }
    .product-card-price-block { padding-right: 42px; }
  }

  @media (min-width: 1024px) {
    .product-card-inner {
      height: 126px; /* brand(~22px) + title(2 lines ~43px) + condition(~19px) + gap(~14px) + price(~22px) */
    }

    .product-card-price-block {
      min-height: 32px; /* = высота кнопки корзины (десктоп): цена ровно по центру кнопки */
    }
  }

  /* Product card mini gallery dots */
  .pcg-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    height: 8px;
  }

  .pcg-dot {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #D4D4D4;
    transition: all 0.15s ease;
  }

  .pcg-dot--active {
    width: 6px;
    height: 6px;
    background-color: #999;
  }

  @media (min-width: 1024px) {
    .pcg-dots { gap: 5px; margin-top: 8px; height: 10px; }
    .pcg-dot { width: 5px; height: 5px; }
    .pcg-dot--active { width: 7px; height: 7px; }
  }

  /* Product card gallery arrows */
  .pcg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }

  .product-card-featured-image:hover .pcg-arrow {
    opacity: 1;
    pointer-events: auto;
  }

  .pcg-arrow:hover {
    background: rgba(255, 255, 255, 1);
  }

  .pcg-arrow--prev { left: 6px; }
  .pcg-arrow--next { right: 6px; }

  @media (max-width: 1023px) {
    .pcg-arrow { display: none; }

    /* Show card gallery arrows on mobile in scrollable products homepage section */
    .pcg-arrows-mobile .pcg-arrow {
      display: flex;
      opacity: 0.45;
      pointer-events: auto;
      width: 18px;
      height: 18px;
      background: rgba(255, 255, 255, 0.55);
    }
    .pcg-arrows-mobile .pcg-arrow--prev { left: 3px; }
    .pcg-arrows-mobile .pcg-arrow--next { right: 3px; }
    /* Увеличиваем ЗОНУ НАЖАТИЯ (невидимую), больше вверх — палец легче попадает.
       Размер самой стрелки и кружка не меняется. */
    .pcg-arrows-mobile .pcg-arrow::before {
      content: '';
      position: absolute;
      top: -90px; bottom: -55px; left: -24px; right: -24px;
    }
  }

  /* PDP gallery arrows (main product image) */
  .pdp-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    border: 1px solid var(--fand-color-border);
    color: var(--fand-color-text);
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
  }

  .pdp-gallery-arrow:hover {
    background: rgba(255, 255, 255, 1);
  }

  .pdp-gallery-arrow--prev { left: 10px; }
  .pdp-gallery-arrow--next { right: 10px; }

  /* Desktop: show on hover only */
  @media (min-width: 1024px) {
    .pdp-gallery-arrow {
      opacity: 0;
      pointer-events: none;
    }
    .group:hover .pdp-gallery-arrow {
      opacity: 1;
      pointer-events: auto;
    }
  }

  /* Mobile: always visible, smaller */
  .pdp-gallery-arrow--mobile {
    width: 32px;
    height: 32px;
  }

  .swiper-button-disabled.pdp-gallery-arrow {
    opacity: 0 !important;
    pointer-events: none;
  }

  /* ===========================================
     FAND Page Container
     Breakpoints:
       < 1024px  — 20px  (mobile)
       1024-1279 — 40px  (tablet)
       1280-1599 — 120px (MacBook 13" / medium monitors)
       >= 1600   — 40px + max-width 1500px centers content
     =========================================== */

  .page-container {
    max-width: var(--fand-container-max-width);
    margin: 0 auto;
    padding-left: var(--fand-container-padding);
    padding-right: var(--fand-container-padding);
  }

  /* Заголовок раздела — единый вид. Образец: «Гарантия подлинности»
     (/pages/authentification), на каждой ширине берём его же значения.
     У контентных страниц стили заголовка лежат внутри самой страницы
     (правится в админке), поэтому здесь повторяем образец и перебиваем их
     через !important.
     Шрифт, начертание и регистр одинаковы везде; размер и отступ снизу
     различаются: мобильный 24px/15px, десктопный 26px/40px — как у образца. */
  .content-title,      /* гарантия подлинности — образец */
  .faq-title,          /* FAQ */
  .delivery-title,     /* оплата и доставка */
  .about-heading,      /* о нас */
  .concierge-title,    /* FAND Concierge */
  .fand-page-title {   /* блог и подарочные карты — класс из шаблонов темы */
    font-family: 'Playfair Display SC', serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    line-height: 1.2 !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
  }

  /* Лид под заголовком раздела: полная формулировка услуги, когда сам заголовок
     сокращён до ключевой фразы. Заголовок в этом случае прижимаем к лиду —
     они читаются как один блок. Браузер без :has просто оставит обычный отступ. */
  .fand-page-title:has(+ .fand-page-lead) { margin-bottom: 8px !important; }
  .fand-page-lead {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: #1A1A1A;
    margin: 0 0 15px;
  }
  @media (min-width: 1024px) {
    .fand-page-lead { font-size: 19px; margin-bottom: 40px; }
  }

  /* Отступ от шапки 40px для страниц, где контейнер уже стоит по шапке и боковые
     поля менять не нужно: избранное, корзина. Задаём здесь, а не Tailwind-классом
     pt-10 — в сборку попадают только реально использованные классы, и полагаться
     на это в правке отступа не хочется. */
  .fand-section-top {
    padding-top: 40px;
  }




  /* Отступ до нижней линии — такой же, как от заголовка до верхней:
     заголовок задаёт его своим margin-bottom (15px на мобиле, 40px на десктопе).
     Классом Tailwind не обойтись: lg:mt-12 в сборку не попал. */
  .cart-totals { margin-top: 15px !important; }
  @media (min-width: 1024px) {
    .cart-totals { margin-top: 40px !important; }
  }

  /* Итоги корзины: «Итого» и сумма — Raleway regular, цифры Jost regular. */
  .cart-totals__label,
  .cart-totals__sum {
    font-family: 'JostNum', 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #1C1714;
    letter-spacing: normal;
    text-transform: none;
  }
  /* Низ страниц, собранных из блоков: доводим отступ до подвала до общих 64px.
     Нижний внутренний отступ секции приходит инлайн-стилем из настроек в
     админке, поэтому перебиваем его !important. Правило берёт только последнюю
     секцию страницы — промежутки между блоками не трогаются. */
  .section-product-grid turbo-frame > div[style]:last-of-type,
  main.page-contents > div[class*="section-"]:last-of-type .fand-images4-large-text {
    padding-bottom: 64px !important;
  }
  @media (max-width: 1023px) {
    .section-product-grid turbo-frame > div[style]:last-of-type,
    main.page-contents > div[class*="section-"]:last-of-type .fand-images4-large-text {
      padding-bottom: 40px !important;
    }
  }

  /* «Не нашли нужную модель?» в блоке консьержа внизу каталога — Playfair
     Display обычный: переменная --fand-font-heading даёт Raleway, а --fand-font-title
     вариант с капителью, здесь нужен ни тот ни другой. */
  .concierge-cta-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
  }

  /* Единый отступ от контента до подвала — образец страница «Подарочная карта»:
     40px на мобиле, 64px с 1024px. Класс ставится корневому контейнеру страницы;
     значение держим здесь, чтобы менять в одном месте, а не по шаблонам. */
  .fand-page-bottom { padding-bottom: 40px; }
  @media (min-width: 1024px) {
    .fand-page-bottom { padding-bottom: 64px; }
  }

  /* Итоги во всплывающей корзине: то же начертание, что на полной странице,
     но на 2px крупнее — 18px на мобиле, 20px на десктопе. */
  .cart-pane-total .cart-totals__label,
  .cart-pane-total .cart-totals__sum {
    font-size: 18px;
  }
  @media (min-width: 1024px) {
    .cart-pane-total .cart-totals__label,
    .cart-pane-total .cart-totals__sum {
      font-size: 20px;
    }
  }
  /* Кнопки корзины — как «Отправить заявку»: обычный регистр.
     .cart-empty-btn — «Продолжить покупки» в пустой корзине; margin-top: 0
     гасит margin-top: auto от .fand-req-btn, иначе кнопка прижимается к низу
     колонки и уезжает от надписи «Корзина пуста». */
  .cart-checkout-btn,
  .cart-empty-btn,
  .wish-empty-btn,
  .gc-submit-btn {
    text-transform: none !important;
    display: block;
  }
  .cart-empty-btn,
  .wish-empty-btn,
  .gc-submit-btn { margin-top: 0 !important; }
  /* Заголовок всплывающей корзины — Playfair Display без капители: общий
     .fand-title-font даёт вариант SC, здесь нужен обычный. */
  #slideover-cart .fand-title-font {
    font-family: 'Playfair Display', serif !important;
  }
  /* «Корзина пуста» — Raleway Light, обычный регистр. */
  .cart-empty-text {
    font-family: 'Raleway', var(--fand-font-body);
    font-weight: 300;
    text-transform: none;
  }

  /* === Личный кабинет: типографика по макету (десктоп и мобайл) ===
     Буквы Raleway Light, цифры и ₽ — Jost Light: семейство 'JostNum' содержит
     только цифры и ₽, поэтому буквы падают на следующий шрифт в списке,
     а один общий font-weight: 300 делает и то и другое светлым. */

  /* Шапка кабинета: «Выйти» и баллы одной высоты с заголовком и по его центру. */
  .acct__head {
    align-items: center !important;
    --acct-head-h: 31px;   /* высота заголовка: 26px × line-height 1.2 */
  }
  /* margin: 0 — общее правило заголовков разделов добавляет отступ снизу,
     из-за него блок становится выше и «Выйти» с баллами уезжают вниз. */
  .acct__head .acct__title { line-height: var(--acct-head-h) !important; margin: 0 !important; }
  .acct__head .acct__logout,
  .acct__head .acct__balls {
    height: var(--acct-head-h);
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  /* Заказы: размер как у кнопки «Выйти» (15px). */
  .acct-order, .acct-order * {
    font-family: 'JostNum', 'Raleway', sans-serif !important;
    font-weight: 300 !important;
    font-size: 15px !important;
    color: #1C1714 !important;
  }

  /* Программа лояльности */
  .loy-card__label, .loy-card__meta, .loy-card__next,
  .loy-tier__thr, .loy-tier__perk, .loy-tier__note {
    font-family: 'JostNum', 'Raleway', sans-serif !important;
    font-weight: 300 !important;
  }
  /* «Вам доступна скидка …» и «Уровни клуба» — regular. */
  .loy-welcome, .loy-welcome b,
  .loy-sect {
    font-family: 'JostNum', 'Raleway', sans-serif !important;
    font-weight: 400 !important;
  }
  .loy-card__name {
    font-family: 'JostNum', 'Playfair Display', serif !important;
    font-weight: 400 !important;
  }
  /* Размеры — как у названия уровня (14px). */
  .loy-sect,
  .loy-tier__thr,
  .loy-tier__perk,
  .loy-tier__note { font-size: 14px !important; }
  /* Цифры внутри лояльности — тоже Light. Селектор с .acct — иначе перебивает
     общий стандарт кабинета (.acct .loy-num → Jost Medium). */
  .acct .loy-num,
  .loy-num {
    font-family: 'JostNum', 'Raleway', sans-serif !important;
    font-weight: 300 !important;
  }

  /* Личные данные */
  .acct-block-title {
    font-family: 'JostNum', 'Playfair Display', serif !important;
    font-weight: 400 !important;
  }
  .profile-input, .profile-label {
    font-family: 'JostNum', 'Raleway', sans-serif !important;
    font-weight: 300 !important;
  }
  /* Кнопка «Сохранить»: заливка как у подвала, надпись как у кнопки
     «Отправить заявку» на странице «Партнёрам». */
  /* Селектор усилен: правило .btn-primary ниже в этом же файле задаёт фон и шрифт
     через !important, при равной специфичности выигрывало бы оно. */
  .acct .acct-save,
  input.acct-save,
  .acct-save.btn-primary {
    background-color: var(--fand-color-burgundy) !important;
    text-transform: none !important;   /* .btn-primary поднимает всё в верхний регистр */
    letter-spacing: .3px !important;   /* как у кнопки «Отправить заявку» на «Продать» */
    font-family: 'JostNum', 'Raleway', sans-serif !important;
    font-weight: 400 !important;
    font-size: 15px !important;
  }

  /* ===== Страницы-заявки («Продать», «Партнёрам») =====
     Общий текст и форма. Стили лежат здесь, а не в самих страницах, чтобы
     обе заявки выглядели одинаково и правились в одном месте. */
  .fand-req-text {
    font-family: 'Raleway', var(--fand-font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: #1A1A1A;
    text-align: left;   /* на мобиле — как у образца «Гарантия подлинности» */
  }
  .fand-req-text + .fand-req-text { margin-top: 22px; }

  .fand-req-form { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
  .fand-req-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .fand-req-col { display: flex; flex-direction: column; gap: 24px; }
  .fand-req-field { display: flex; flex-direction: column; gap: 8px; }
  .fand-req-field label,
  .fand-req-field__label {
    font-family: 'Raleway', var(--fand-font-body);
    font-weight: 300;
    font-size: 14px;
    color: #1A1A1A;
  }
  .fand-req-field__req { color: #8A2035; }
  .fand-req-form .fand-req-field input,
  .fand-req-form .fand-req-field select,
  .fand-req-form .fand-req-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    background: #fff;
    font-family: 'Raleway', var(--fand-font-body);
    font-weight: 300;
    font-size: 15px;
    color: #1A1A1A;
    outline: none;
    transition: border-color .2s ease;
  }
  .fand-req-form .fand-req-field input:focus,
  .fand-req-form .fand-req-field select:focus,
  .fand-req-form .fand-req-field textarea:focus { border-color: var(--fand-color-primary); }

  /* Выпадающий список — та же рамка, что у полей ввода, со своей стрелкой:
     нативная стрелка у каждого браузера своя и ломает единый вид формы. */
  .fand-req-form .fand-req-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
  }
  .fand-req-form .fand-req-field input::placeholder,
  .fand-req-form .fand-req-field textarea::placeholder { color: #9A948A; }
  .fand-req-form .fand-req-field textarea { min-height: 180px; resize: vertical; }
  .fand-req-field--grow { height: 100%; }
  .fand-req-field--grow textarea { flex: 1; }

  /* Поле выбора файлов: рамка с надписью, нативный input внутри и невидим —
     элемент тот же, поэтому логика отправки фото не меняется. */
  .fand-req-file {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease;
  }
  .fand-req-file:hover { border-color: var(--fand-color-border-hover); }
  .fand-req-file:focus-within { border-color: var(--fand-color-primary); }
  .fand-req-file__text {
    font-family: 'Raleway', var(--fand-font-body);
    font-weight: 300;
    font-size: 15px;
    color: #9A948A;
  }
  .fand-req-form .fand-req-file input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; border: 0;
    opacity: 0;
    overflow: hidden;
  }
  .fand-req-hint {
    font-family: 'Raleway', var(--fand-font-body);
    font-weight: 300;
    font-size: 13px;
    color: #9A948A;
  }
  .fand-req-btn,
  .fand-req-form .fand-req-btn {
    letter-spacing: .3px;
    width: 100%;
    margin-top: auto;
    padding: 16px 24px;
    border: none;
    border-radius: 6px;
    background: var(--fand-color-burgundy);
    color: #fff;
    font-family: 'Raleway', var(--fand-font-body);
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
    transition: opacity .2s ease;
  }
  .fand-req-btn:hover,
  .fand-req-form .fand-req-btn:hover { opacity: .92; }
  .fand-req-btn:disabled,
  .fand-req-form .fand-req-btn:disabled { opacity: .6; cursor: default; }

  @media (min-width: 1024px) {
    .fand-req-text { font-size: 18px; text-align: justify; }
    .fand-req-form { margin-top: 40px; gap: 28px; }
    .fand-req-grid--2 { grid-template-columns: 1fr 1fr; gap: 24px; }
    .fand-req-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .fand-req-grid--4 { grid-template-columns: repeat(4, 1fr); }
  }

  /* Вступление контентной страницы: текст и кадр рядом. Образец — «Продать»,
     здесь те же пропорции, но разметка общая для нескольких страниц. */
  .fand-hero { display: grid; grid-template-columns: 1fr; gap: 28px; }
  .fand-hero__media {
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;   /* на мобиле колонки идут друг под другом — нужна своя высота */
  }
  .fand-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  /* Кадра ещё нет: фирменная плашка с монограммой вместо пустого прямоугольника. */
  .fand-hero__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 60%),
      var(--fand-color-bg-gray);
  }
  .fand-hero__mark {
    display: block;
    width: 42%;
    max-width: 220px;
    color: var(--fand-color-burgundy);
    opacity: .14;
  }
  .fand-hero__mark svg { width: 100%; height: auto; display: block; }

  @media (min-width: 1024px) {
    /* На десктопе кадр тянется на высоту соседней колонки с текстом. */
    .fand-hero { grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; margin-top: 8px; }
    .fand-hero__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
    /* Страница аутентификации: текст выше картинки, а height:100% не резолвится
       против авто-высоты грид-строки — кадр падал к своей aspect-высоте.
       height:auto + align-self:stretch тянут медиа ровно на высоту текста,
       картинку кладём абсолютно, чтобы заполнила растянутый бокс. */
    .auth-page .fand-hero__media,
    .care-page .fand-hero__media { height: auto; align-self: stretch; position: relative;
      /* поджать карточку ровно под видимые строки текста: медиа тянется на высоту
         строчных боксов, но у строк есть полуинтерлиньяж (line-height 32.4 при 18px),
         поэтому кадр выступал на ~8px выше первой буквы и ~11px ниже последней. */
      margin-top: 8px; margin-bottom: 11px; }
    .auth-page .fand-hero__media .fand-hero__img,
    .care-page .fand-hero__media .fand-hero__img { position: absolute; inset: 0; }
  }

  /* Контейнер «как на странице подлинности»: сверху 40px, на десктопе левый край
     по шапке (его даёт сам .page-container), на мобиле поля 40px. */
  .page-container.fand-content-page {
    padding-top: 40px;
  }
  @media (max-width: 1023px) {
    .page-container.fand-content-page {
      padding-left: 40px;
      padding-right: 40px;
    }
  }

  /* Мобильные отступы — как у образца: контейнер с полями 40px и таким же
     отступом сверху. У контентных страниц контейнеры свои, с разными полями
     (15–20px), поэтому выравниваем их между собой. */
  @media (max-width: 1023px) {
    /* Через main — чтобы перебить !important, который некоторые страницы задают
       своим контейнерам в контенте (например, «о нас»: padding 20px !important). */
    main .faq-container,
    main .delivery-container,
    main .about-container,
    main .concierge-container {
      padding-left: 40px !important;
      padding-right: 40px !important;
      padding-top: 40px !important;
    }
    /* Блог и подарочные карты: отступ сверху раньше давал padding самого
       заголовка (py-10), но общее правило его обнуляет — задаём контейнеру. */
    .page-container.fand-page-title-wrap {
      padding-left: 40px;
      padding-right: 40px;
      padding-top: 40px;
    }
  }

  @media (min-width: 1024px) {
    .content-title,
    .faq-title,
    .delivery-title,
    .about-heading,
    .concierge-title,
    .fand-page-title {
      font-size: 26px !important;
      margin: 0 0 40px !important;
    }
    /* Отступ заголовка от шапки — 40px, как у образца. Левый край задаёт сам
       .page-container: он же держит шапку, поэтому заголовок встаёт ровно под
       бургером и словом «Бренды». */
    .page-container.fand-page-title-wrap {
      padding-top: 40px;
    }

    /* Вступительный текст на странице подарочных карт — как основной текст
       страницы «Гарантия подлинности» (.text-description): Raleway 18px,
       вес 200, межстрочный 1.8, по ширине. Ширина блока равна ширине превью
       карты: сетка ниже двухколоночная с зазором 64px (lg:gap-16), поэтому
       колонка = половина контейнера минус половина зазора. */
    .gc-lead {
      font-family: 'Raleway', var(--fand-font-body) !important;
      font-size: 18px !important;
      font-weight: 200 !important;
      line-height: 1.8 !important;
      color: #1a1a1a !important;   /* перебивает inline-цвет в шаблоне (он остаётся для мобильной версии) */
      text-align: justify;
      max-width: calc(50% - 32px) !important;
    }

    /* Контентные страницы (подлинность, FAQ, оплата и доставка, о нас) свёрстаны
       в админке и лежат в собственных контейнерах шириной 1320px с полями 40px —
       из-за этого их заголовки не совпадали с шапкой. Приводим контейнеры к тем
       же размерам, что у .page-container, чтобы левый край шёл по шапке на любой
       ширине экрана. */
    .content-container,
    .faq-container,
    .delivery-container,
    .about-container,
    .concierge-container {
      max-width: var(--fand-container-max-width) !important;
      padding-left: var(--fand-container-padding-lg) !important;
      padding-right: var(--fand-container-padding-lg) !important;
    }
  }

  @media (min-width: 1280px) and (max-width: 1599px) {
    /* На этих ширинах .page-container берёт поля 120px — повторяем для контентных. */
    .content-container,
    .faq-container,
    .delivery-container,
    .about-container,
    .concierge-container {
      padding-left: 120px !important;
      padding-right: 120px !important;
    }
  }

  @media (min-width: 1024px) {
    .page-container {
      padding-left: var(--fand-container-padding-lg);
      padding-right: var(--fand-container-padding-lg);
    }
  }

  @media (min-width: 1280px) and (max-width: 1599px) {
    .page-container {
      padding-left: 120px;
      padding-right: 120px;
    }
  }

  /* ===========================================
     FAND Scrollbar Styling
     =========================================== */

  /* Hide scrollbar utility class */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
  }

  /* ===========================================
     FAND Animations
     =========================================== */

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fadeIn {
    animation: fadeIn 0.5s ease forwards;
  }

  /* ===========================================
     FAND Dark Section (Burgundy Background)
     =========================================== */

  .fand-dark-section {
    background-color: var(--fand-color-burgundy);
    color: var(--fand-color-text-light);
  }

  .fand-dark-section h1,
  .fand-dark-section h2,
  .fand-dark-section h3 {
    color: var(--fand-color-bg-light);
  }

  .fand-dark-section p {
    color: rgba(255, 255, 255, 0.8);
  }

  .fand-dark-section .fand-btn--primary {
    background-color: var(--fand-color-bg-light);
    color: var(--fand-color-text-dark);
  }

  .fand-dark-section .fand-btn--primary:hover {
    background-color: var(--fand-color-text-light);
  }

  /* ===========================================
     FAND Mobile Specific Styles
     =========================================== */

  /* Mobile Header */
  @media (max-width: 1023px) {
    .fand-header__top {
      padding-top: 12px;
      padding-bottom: 12px;
    }

    .fand-header__logo img {
      max-height: 15px;
    }

    /* Mobile button sizes. Размер шрифта не задаём — он единый для всех кнопок
       и живёт в .fand-btn; здесь только внутренние отступы. */
    .fand-btn--primary,
    .fand-btn--secondary,
    .fand-btn--light {
      padding: 10px 16px;
    }

    /* Mobile headings */
    h1, h2, h3 {
      font-size: 24px;
      line-height: 1.1;
    }

    /* Mobile text */
    .fand-mobile-text {
      font-size: 14px;
      line-height: 1.4;
    }

    /* Mobile product cards */
    .product-card .card-product-featured-images-container,
    .product-card .aspect-square,
    .swiper-slide .card-product-featured-images-container,
    .swiper-slide .aspect-square {
      border-radius: 10px;
    }
  }

  /* Mobile Navigation Styles */
  .fand-mobile-nav {
    font-family: var(--fand-font-body);
  }

  .fand-mobile-nav__item {
    transition: background-color var(--fand-transition);
  }

  .fand-mobile-nav__back {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .fand-mobile-nav__footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
  }

  /* Mobile Hero Banner */
  @media (max-width: 1023px) {
    .fand-hero-banner {
      min-height: 678px;
    }

    .fand-hero-banner__content {
      padding: 40px 15px;
    }

    .fand-hero-banner__title {
      font-size: 24px;
    }

    .fand-hero-banner__cta {
      padding: 10px 16px;
      font-size: 14px;
      border-width: 0.5px;
    }
  }

  /* Mobile Featured Taxons */
  @media (max-width: 1023px) {
    .fand-featured-taxons__image-wrapper {
      width: 79px;
      height: 79px;
      border-radius: 8px;
    }

    .fand-featured-taxons__label {
      font-size: 10px;
    }
  }

  /* Mobile About/Image with Text */
  @media (max-width: 1023px) {
    .fand-image-with-text__image-wrapper {
      border-radius: 4px;
    }

    .fand-image-with-text__heading {
      font-size: 24px;
    }

    .fand-image-with-text__text {
      font-size: 14px;
    }
  }

  /* Mobile Related Products */
  @media (max-width: 1023px) {
    .fand-related-products__title {
      font-size: 24px;
    }

    .fand-products-swiper .swiper-slide {
      width: 79px;
    }
  }

  /* Mobile Footer */
  @media (max-width: 1023px) {
    .fand-footer__nav-title {
      font-size: 14px;
    }

    .fand-footer__nav-list {
      font-size: 14px;
    }

    .fand-footer__social-link {
      font-size: 14px;
    }

    .fand-footer__copyright-content {
      font-size: 12px;
    }
  }

  /* Mobile Newsletter */
  @media (max-width: 1023px) {
    .fand-newsletter__heading {
      font-size: 24px;
    }

    .fand-newsletter__text {
      font-size: 14px;
    }

    .fand-newsletter__input {
      padding: 12px 16px;
      font-size: 14px;
    }
  }

  /* Mobile Announcement Bar */
  @media (max-width: 1023px) {
    .fand-announcement-bar {
      height: 30px;
      font-size: 14px;
    }
  }

  /* Главная: строка-анонс фиксирована вверху; прячется и появляется ВМЕСТЕ с шапкой.
     Шапку (nav) прячет Headroom (класс headroom--unpinned на <header>); контроллер
     announcement-headroom вешает body.hp-nav-hidden в том же состоянии → уводим строку
     вверх синхронно с шапкой. В самом верху и при скролле вверх — строка снова видна. */
  body.fand-homepage .fand-announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 51;
    transition: transform 0.25s ease;
  }
  body.fand-homepage.hp-nav-hidden .fand-announcement-bar {
    transform: translateY(-100%);
  }

  /* ===========================================
     Desktop Navigation Menu Items
     =========================================== */

  @media (min-width: 1024px) {
    .header--nav-link {
      font-size: 20px;
      text-transform: none !important;
    }
  }

  /* ===========================================
     Header
     =========================================== */

  /* Header search input - remove Tailwind border reset */
  #mobile-search,
  #desktop-search {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #mobile-search:focus,
  #desktop-search:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* ===========================================
     Hero Banner Buttons - Override block_attributes inline styles
     =========================================== */
  .fand-hero-banner__buttons,
  .fand-hero__buttons {
    background-color: transparent !important;
    width: auto !important;
  }

  .fand-hero-banner__buttons .fand-btn--hero,
  .fand-hero__buttons .fand-btn--hero {
    background-color: transparent !important;
  }

  @media (min-width: 1024px) {
    .fand-hero-banner__buttons .fand-btn--hero,
    .fand-hero__buttons .fand-btn--hero {
      background-color: white !important;
    }
  }

  /* ===========================================
     FAND Checkout Styles
     =========================================== */

  /* Checkout section headings */
  .checkout-section h2 {
    font-family: var(--fand-font-body) !important;
  }

  /* Checkout field with floating label */
  .checkout-field {
    position: relative;
  }

  .checkout-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #D4D4D4;
    font-size: 14px;
    font-family: var(--fand-font-body);
    pointer-events: none;
    transition: all 0.2s ease;
  }

  @media (min-width: 1024px) {
    .checkout-label {
      left: 20px;
      font-size: 20px;
    }
  }

  /* Hide label when input has value or is focused */
  .checkout-input:focus + .checkout-label,
  .checkout-input:not(:placeholder-shown) + .checkout-label,
  .checkout-input.has-value + .checkout-label,
  .checkout-select--filled + .checkout-label {
    opacity: 0;
    visibility: hidden;
  }

  /* Checkout input fields */
  .checkout-input {
    width: 100%;
    padding: 12px 16px !important;
    border: 1px solid #D4D4D4 !important;
    border-radius: 10px !important;
    /* Цифры → Jost Medium (стандарт FAND), буквы → Raleway. Раньше цифры падали
       на тонкое подмножество Inter → разнобой «жирные буквы + тонкие цифры». */
    font-family: 'JostMed', var(--fand-font-body);
    font-weight: 500;
    font-size: 14px !important;
    color: #1A1A1A;
    background-color: white !important;
    transition: border-color 0.2s ease;
    box-shadow: none !important;
  }

  @media (min-width: 1024px) {
    .checkout-input {
      padding: 16px 20px !important;
      font-size: 20px !important;
    }
  }

  .checkout-input:focus {
    outline: none !important;
    border-color: var(--fand-color-primary) !important;
    box-shadow: none !important;
  }

  .checkout-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D4D4D4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
  }

  @media (min-width: 1024px) {
    .checkout-select {
      background-position: right 20px center;
      padding-right: 48px;
    }
  }

  /* Form group - no relative positioning needed anymore */
  .form-group {
    position: relative;
  }

  /* Radio inputs */
  .radio-input {
    width: 16px;
    height: 16px;
    border: 1.5px solid #540111;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
  }

  @media (min-width: 1024px) {
    .radio-input {
      width: 22px;
      height: 22px;
      border-width: 2px;
    }
  }

  .radio-input:checked {
    border: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C3.58885 0 0 3.58885 0 8C0 12.4112 3.58885 16 8 16C12.4112 16 16 12.4112 16 8C16 3.58885 12.4112 0 8 0ZM12.1635 5.31885L6.99423 11.4727C6.93753 11.5402 6.86697 11.5948 6.78734 11.6327C6.70771 11.6706 6.62087 11.6909 6.53269 11.6923H6.52231C6.43605 11.6923 6.35077 11.6741 6.27199 11.639C6.1932 11.6039 6.12268 11.5526 6.065 11.4885L3.84962 9.02692C3.79335 8.96725 3.74959 8.89693 3.72089 8.8201C3.69219 8.74327 3.67914 8.66148 3.6825 8.57953C3.68587 8.49758 3.70558 8.41714 3.74047 8.34292C3.77537 8.2687 3.82476 8.2022 3.88572 8.14734C3.94668 8.09247 4.018 8.05035 4.09548 8.02345C4.17295 7.99654 4.25502 7.98539 4.33687 7.99065C4.41872 7.99592 4.49869 8.01749 4.57208 8.0541C4.64547 8.09071 4.7108 8.14162 4.76423 8.20385L6.50615 10.1392L11.2212 4.52731C11.3269 4.40503 11.4766 4.32928 11.6377 4.31644C11.7989 4.3036 11.9586 4.35469 12.0824 4.45868C12.2062 4.56266 12.2841 4.71119 12.2993 4.87215C12.3144 5.0331 12.2656 5.19356 12.1635 5.31885Z' fill='%23540111'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
  }

  @media (min-width: 1024px) {
    .radio-input:checked {
      background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0C4.93466 0 0 4.93466 0 11C0 17.0653 4.93466 22 11 22C17.0653 22 22 17.0653 22 11C22 4.93466 17.0653 0 11 0ZM16.7248 7.31341L9.61707 15.775C9.5391 15.8678 9.44209 15.9428 9.33259 15.9949C9.2231 16.047 9.10369 16.075 8.98245 16.0769H8.96817C8.84957 16.0769 8.73231 16.0519 8.62398 16.0036C8.51565 15.9553 8.41869 15.8848 8.33938 15.7966L5.29322 12.412C5.21586 12.33 5.15568 12.2333 5.11622 12.1276C5.07676 12.022 5.05882 11.9095 5.06344 11.7969C5.06807 11.6842 5.09517 11.5736 5.14315 11.4715C5.19114 11.3695 5.25904 11.278 5.34286 11.2026C5.42669 11.1272 5.52475 11.0692 5.63128 11.0322C5.73781 10.9952 5.85066 10.9799 5.9632 10.9871C6.07574 10.9944 6.18569 11.024 6.2866 11.0744C6.38752 11.1247 6.47735 11.1947 6.55082 11.2803L8.94596 13.9414L15.4291 6.22505C15.5745 6.05692 15.7803 5.95277 16.0019 5.93511C16.2234 5.91745 16.4431 5.9877 16.6133 6.13068C16.7835 6.27366 16.8906 6.47788 16.9115 6.6992C16.9323 6.92052 16.8653 7.14115 16.7248 7.31341Z' fill='%23540111'/%3E%3C/svg%3E");
      background-size: 22px 22px;
    }
  }

  /* Checkbox inputs */
  .checkbox-input {
    width: 16px;
    height: 16px;
    border: 1px solid #D4D4D4;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
  }

  @media (min-width: 1024px) {
    .checkbox-input {
      width: 20px;
      height: 20px;
    }
  }

  .checkbox-input:checked {
    background-color: transparent;
    border-color: #D4D4D4;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L4.5 8.5L11 1' stroke='%23311E1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 58%;
  }

  /* Payment method card */
  .payment-method-card {
    background-color: white;
    border: 1px solid #D4D4D4;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease;
  }

  @media (min-width: 1024px) {
    .payment-method-card {
      padding: 16px 20px;
    }
  }

  .payment-method-card:hover {
    border-color: #540111;
  }

  /* City autocomplete dropdown */
  .city-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #D4D4D4;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .city-autocomplete-dropdown.hidden {
    display: none;
  }

  .city-autocomplete-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .city-autocomplete-item:hover {
    background-color: var(--fand-color-bg-light);
  }

  /* Checkout sidebar */
  .checkout-sidebar {
    background-color: transparent;
    border: none;
    padding: 0;
  }

  @media (min-width: 1024px) {
    .checkout-sidebar {
      background-color: white;
      border: 1px solid #540111;
      border-radius: 16px;
      padding: 24px;
    }
  }

  .checkout-sidebar-items {
    max-height: none;
  }

  /* Первый товар без верхнего padding */
  #checkout-line-items > turbo-frame:first-child .cart-line-item,
  #line-items > turbo-frame:first-child .cart-line-item {
    padding-top: 0;
  }

  /* Последний товар в checkout - без бордера */
  .checkout-sidebar #checkout-line-items > turbo-frame:last-child .cart-line-item {
    border-bottom: none;
  }

  /* =========================================
     Mobile Bottom Navigation
     ========================================= */
  /* Нижнее меню в стиле мини-приложения: «стеклянная» пилюля со скользящим
     индикатором + отдельная круглая кнопка поиска. */
  .bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 40;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }
  @media (min-width: 1024px) { .bottom-nav { display: none; } }

  .bn-row { display: flex; align-items: center; gap: 10px; }

  .bn-pill {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 34px rgba(20, 15, 11, 0.18);
    border-radius: 34px;
    padding: 7px;
  }

  .bn-indicator {
    position: absolute;
    z-index: 0;
    top: 7px; left: 7px;
    width: 0;
    height: calc(100% - 14px);
    background: rgba(84, 1, 17, 0.10);
    border-radius: 26px;
    /* Анимацию переезда делает JS (Web Animations API) в bottom_nav_controller.js —
       пружинистая, надёжная на любой переход. CSS-transition здесь не нужен. */
    transition: none;
    pointer-events: none;
  }

  .bn-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 11px;
    border-radius: 26px;
    color: var(--fand-color-text);
    font-family: var(--fand-font-body);
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color .4s ease, transform .4s ease;
  }
  .bn-item:active { transform: scale(.94); }
  /* Плавное «загорание» сердечка «Избранное» (заливка/обводка) */
  .bn-item .bn-heart { transition: fill .4s ease, stroke .4s ease; }
  .bn-item.is-active { color: var(--fand-color-burgundy); }
  .bn-item svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .bn-item .bn-heart { fill: none; }
  .bn-item.is-active .bn-heart { fill: var(--fand-color-burgundy); stroke: var(--fand-color-burgundy); }

  .bn-search {
    pointer-events: auto;
    flex: 0 0 auto;
    width: 68px; height: 68px;   /* круглая, по высоте равна пилюле с кнопками */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 34px rgba(20, 15, 11, 0.18);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s, border-color .2s;
  }
  .bn-search svg { width: 22px; height: 22px; stroke: #1a1a1a; fill: none; stroke-width: 1.8; }
  .bn-search.is-active { background: var(--fand-color-burgundy); border-color: var(--fand-color-burgundy); }
  .bn-search.is-active svg { stroke: #fff; }

  /* Add bottom padding on mobile so content isn't hidden behind the nav */
  @media (max-width: 1023px) {
    /* M5 — отступ под нижнее меню переносим НА ФУТЕР: его бордовый фон заполняет
       низ, и белого блока внизу больше нет. */
    body { padding-bottom: 0; }
    /* Бордовый фон футера + запас на home-indicator, чтобы низ не белел. */
    .fand-footer { padding-bottom: calc(73px + env(safe-area-inset-bottom, 0px)); }

    /* Float PDP buy button above the bottom navigation */
    .fixed-pdp-button {
      bottom: 73px;
    }

    /* M4 — меньше пустого места между блоком «Бренды» и блоком «Качество. Характер…» */
    body.fand-homepage .fand-twophoto { padding-top: 3px !important; }
    /* #3 — ещё −30% от текущего (4px→3px): низ строки брендов и верх «Качества». */
    body.fand-homepage .fand-scrollable-taxons { padding-bottom: 3px !important; }
  }

  /* #2 — убираем всплывающие flash-сообщения («комментарии» при действиях),
     которые перекрывают бегущую строку. На чекауте оставляем (там важны ошибки). */
  body:not(#checkout-page) #flashes { display: none !important; }

  /* #7/#20 — одинаковые вертикальные отступы между всеми блоками на главной */
  body.fand-homepage section { padding-top: 34px !important; padding-bottom: 34px !important; }
  @media (max-width: 1023px) { body.fand-homepage section { padding-top: 22px !important; padding-bottom: 22px !important; } }

  /* Точечные увеличения отступов между конкретными блоками (поверх общего 34px):
     #11 — «Новинки» → красный блок «подлинность» (+50%);
     #14 — «подлинность» → «Подборки» (+50%);
     #18 — «Есть вопросы?» → «Присоединяйтесь» (×2). */
  body.fand-homepage .fand-scrollable-products { margin-bottom: 34px !important; }
  body.fand-homepage .fand-images3-text { margin-bottom: 34px !important; }
  body.fand-homepage .fand-image-with-text { margin-bottom: 68px !important; }
  @media (max-width: 1023px) {
    body.fand-homepage .fand-scrollable-products { margin-bottom: 22px !important; }
    body.fand-homepage .fand-images3-text { margin-bottom: 22px !important; }
    body.fand-homepage .fand-image-with-text { margin-bottom: 44px !important; }
  }

  /* === Единые шрифты на ГЛАВНОЙ: заголовки 40px, текст 18px, компактный интервал (#9/#15) ===
     Скоуп — главная (пустой slug → в классе body есть токен "-page").
     Другие страницы (каталог/категории/товар) не затрагиваются. Хиро — это <div>, не <section>,
     заголовок хиро — h1, поэтому баннер не меняется. */
  body.fand-homepage section h2 {
    font-size: 40px !important;
    line-height: 1.18 !important;
  }
  /* Шрифт ЗАГОЛОВКОВ секций/блоков главной — Playfair Display SC (как на странице
     «Гарантия подлинности»). Только h2-заголовки секций и заголовок hero; названия
     товаров (h3) и брендов (span) не трогаем. JostNum первым — только для цифр/₽. */
  body.fand-homepage section h2,
  body.fand-homepage .fand-hero-banner h1,
  body.fand-homepage .fand-hero-slider h1 {
    font-family: 'JostNum', 'Playfair Display SC', serif !important;
    font-weight: 400 !important; /* Playfair Display SC regular (#8) */
  }
  /* Единый вес заголовков: гасим жирное (<strong>/<b>) внутри заголовков —
     иначе «Качество. Характер. Уникальность.» (обёрнут в <strong>) толще других. */
  body.fand-homepage section h2 *,
  body.fand-homepage .fand-hero-banner h1 *,
  body.fand-homepage .fand-hero-slider h1 * {
    font-weight: 400 !important;
  }
  body.fand-homepage section h2 .trix-content { font-size: inherit !important; line-height: inherit !important; }
  body.fand-homepage section .trix-content:not(h2 .trix-content),
  body.fand-homepage section .fand-twophoto__text,
  body.fand-homepage section .fand-images2-text__text,
  body.fand-homepage section .fand-images3-text__text {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
  @media (max-width: 1023px) {
    body.fand-homepage section h2 { font-size: 30px !important; }
    body.fand-homepage section .trix-content:not(h2 .trix-content),
    body.fand-homepage section .fand-twophoto__text,
    body.fand-homepage section .fand-images2-text__text,
    body.fand-homepage section .fand-images3-text__text {
      font-size: 15px !important;
    }
  }
  /* «На примерке»: товар виден, но купить нельзя. Без свечения/пульсации —
     статус обозначает только текстовая плашка (как «Новинка»). */

  /* Полноэкранный просмотр (PhotoSwipe): дефолтные «ужасные» стрелки → тонкий
     шеврон в стиле сайта (кликабельность кнопок сохраняется). */
  .pswp__button--arrow { display: flex !important; align-items: center; justify-content: center; }
  .pswp__button--arrow .pswp__icn { display: none !important; }
  .pswp__button--arrow::before {
    content: "";
    width: 15px;
    height: 15px;
    border: solid #212121;
    border-width: 0 0 2px 2px;
    opacity: 0.85;
  }
  .pswp__button--arrow--prev::before { transform: rotate(45deg); }
  .pswp__button--arrow--next::before { transform: rotate(-135deg); }

  /* Flash-плашки уведомлений/успеха — в стиле бренда (бордо + белый текст)
     вместо стрёмного зелёного. Ошибки/предупреждения не трогаем.
     Скоуп #flashes — чтобы не задеть инлайн alert-success (напр. промокод). */
  #flashes .alert-notice,
  #flashes .alert-success {
    background-color: var(--fand-color-burgundy) !important;
  }
  #flashes .alert-notice .flash-message,
  #flashes .alert-success .flash-message,
  #flashes .alert-notice button,
  #flashes .alert-success button {
    color: #FFFFFF !important;
  }

  /* FAQ: крупнее и читаемее. Перебиваем мелкие инлайн-размеры (13px/11px)
     из custom_code страницы за счёт более высокой специфичности.
     Цифры — стандарт FAND (Jost Medium), буквы падают на Raleway; !important
     чтобы перебить инлайн font-family из custom_code. */
  .faq-item .faq-question {
    font-size: 18px; line-height: 1.4;
    font-family: 'JostMed', var(--fand-font-body) !important;
  }
  .faq-item .faq-answer {
    font-size: 16px; line-height: 1.6;
    font-family: 'JostMed', var(--fand-font-body) !important;
  }