/* Глобальні стилі Webflow: shared.css + site.css у index.html;
   сторінкові дельти підставляються з шаблону через syncHeadStyles. */

/**
 * Inter — render-blocking @font-face з /public/fonts/ (стабільні URL без hash).
 *
 * ПРОБЛЕМА БЕЗ ЦЬОГО: @fontsource/inter імпортується в main.jsx → Vite пакує
 * woff2 зі змінним хешем у /assets/; @font-face-декларації є лише в JS-бандлі,
 * тому браузер дізнається про шрифт лише після парсингу JS → short FOUT (Arial → Inter).
 *
 * РІШЕННЯ: Дублюємо критичні @font-face тут (render-blocking CSS) зі стабільними
 * URL /fonts/. Браузер починає завантаження woff2 одразу при парсингу main.css,
 * ще до виконання JS. Preload-хінти в index.html дають найвищий пріоритет.
 */

/* Inter Regular 400 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter SemiBold 600 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter Bold 700 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter accent — Bold для h1/h2. Окреме сімейство, ті самі файли 700. */
@font-face {
  font-family: 'Inter accent';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/inter-cyrillic-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter accent';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/inter-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter accent';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * Fluid-typography база Webflow (`body { font-size: 1vw }` + брейкпоінт 1440px).
 *
 * КРИТИЧНО для стрибків хедера: уся верстка Webflow (зокрема хедер) — на `em`, тож
 * `1em` = поточний `body font-size`. Раніше це правило приходило ТІЛЬКИ з `<style>`
 * усередині фетчнутого `wf/*.html` (через `moveBodyStylesToHead` + `syncHeadStyles`),
 * тобто асинхронно — вже ПІСЛЯ того, як React відрендерив хедер. До інжекту `body`
 * мав `font-size: 14px` (зі `site.css`), після — `1vw`; зміна бази `em` різко «розсувала»
 * всі блоки хедера (особливо помітно на мобайлі, де `em`-множники величезні: 4em+).
 *
 * Виносимо базу в статичний render-blocking `main.css`, щоб `em`-точка відліку була
 * стабільна з ПЕРШОГО кадру й не залежала від таймінгу завантаження шаблону.
 * Значення 1:1 з `wf/index.html` (`body { font-size: 1vw }`, `@media min-width:1440px → 14.4px`).
 */
html body,
html body.body {
  font-size: 1vw;
}

@media screen and (min-width: 1440px) {
  html body,
  html body.body {
    font-size: 14.4px;
  }
}

/* Inter на всіх сторінках. Специфічність вища за webflow `body { Arial }`,
   тож правило тримається після підстановки шаблонного CSS. */
html,
html body,
html body.body,
.leader-shell-host,
.leader-cart-root {
  font-family: Inter, Arial, sans-serif;
}

html h1,
html h2,
html .h1,
html .h2 {
  font-family: 'Inter accent', sans-serif;
}

/* Прибираємо дефолтне підкреслення браузера до завантаження Webflow CSS.
   Специфічність (0,0,1) — будь-яке Webflow-правило перекриє одразу після
   завантаження shared.css/site.css (вони деферовані media=print, тому є
   короткий проміжок, коли видимий контент, але Webflow CSS ще не застосований). */
html a {
  text-decoration: none;
}

html .header-bottom-customers {
  grid-column-gap: 1em;
  column-gap: 1em;
}

html .header-bottom-customers-account-slot {
  display: contents;
}

html .header-bottom-customers-account-root {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

html .header-bottom-customers-button.is-fav,
html .header-bottom-customers-button.is-compare,
html .header-bottom-customers-button.is-cabinet,
html .header-bottom-customers-button.is-account {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Планшет: стабільні відступи (без 5em/7em зі site.css, які стрибають після load). */
@media screen and (max-width: 991px) and (min-width: 480px) {
  html .header-bottom-customers {
    grid-column-gap: 1.5em !important;
    column-gap: 1.5em !important;
    min-width: 0;
  }

  html .header-bottom-customers-buttons {
    /* grid-column-gap: 1.5em !important; */
    /* column-gap: 1.5em !important; */
  }

  html .header-bottom-customers-account-root {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/**
 * Мобільна нижня панель (<=479): фінальні розміри/відступи/підписи одразу.
 * Раніше is-fav/is-compare злітали (flex-basis:0 + min-width:0 + width:auto → width 0),
 * а gap 7em з site.css @991px стрибав, коли підтягувався wf-media @479.
 */
@media screen and (max-width: 479px) {
  html .header-bottom-box {
    gap: 0 !important;
    display: flex;
    align-items: center;
  }

  html .header-bottom-catalog-button {
    flex: 0 0 18%;
    width: 18%;
    min-width: 18%;
    overflow: hidden;
    font-size: 0.69em;
  }

  html .header-bottom-catalog-button-toggle {
    width: 100%;
    max-width: 100%;
    height: 5.5em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4em;
    padding: 0;
    overflow: hidden;
  }

  html .header-bottom-catalog-toggle-text {
    display: none !important;
  }

  html .header-bottom-catalog-toggle-icon {
    position: relative;
    width: 40%;
    height: 40%;
    margin-top: -25%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  html .header-bottom-customers {
    grid-column-gap: 0 !important;
    column-gap: 0 !important;
    grid-row-gap: 0 !important;
    row-gap: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    font-size: 0.69em;
  }

  html .header-bottom-customers-buttons {
    grid-column-gap: 0 !important;
    /* column-gap: 3em !important; */
    grid-row-gap: 0 !important;
    row-gap: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  html .header-bottom-customers-account-root {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    overflow: hidden;
  }

  html .header-bottom-customers-button.is-fav,
  html .header-bottom-customers-button.is-compare,
  html .header-bottom-customers-button.is-cabinet,
  html .header-bottom-customers-button.is-account {
    flex: 1 1 0 !important;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 5.5em !important;
    font-size: 4em !important;
    position: relative;
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: inherit;
    padding: 0 !important;
    overflow: hidden;
  }

  html .header-bottom-customers-account-root .header-bottom-customers-button.is-account,
  html .header-bottom-customers-account-root .header-bottom-customers-button.is-cabinet {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 5.5em !important;
    min-height: 5.5em !important;
    padding: 0 !important;
    overflow: hidden;
  }

  html .header-bottom-customers-button-label,
  html .header-bottom-customers-button-label.like {
    min-width: 1.6em !important;
    min-height: 1.6em !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 1em !important;
    top: 15% !important;
    right: 15% !important;
  }

  html .header-bottom-customers-button-icon {
    width: 40% !important;
    height: 40% !important;
    margin-top: -25%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  html .header-bottom-customers-button-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  html .header-bottom-cart,
  html .header-cart-open-btn {
    position: relative;
    z-index: 2;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-left: 0.6em;
    padding-left: 0.7em;
    padding-right: 0.7em;
  }

  html .header-bottom-cart-sum {
    margin-left: 0.45em;
  }

  /* Підписи — раніше лише в <style> шаблону після fetch. */
  html .header-bottom-catalog-button-toggle:after {
    content: 'каталог';
  }

  html .header-bottom-customers-button.is-fav:after {
    content: 'вподобане';
  }

  html .header-bottom-customers-button.is-compare:after {
    content: 'порівняння';
  }

  html .header-bottom-customers-button.is-cabinet:after,
  html .header-bottom-customers-button.is-account:after {
    content: 'кабінет';
  }

  html .header-bottom-catalog-button-toggle:after,
  html .header-bottom-customers-button.is-fav:after,
  html .header-bottom-customers-button.is-compare:after,
  html .header-bottom-customers-button.is-cabinet:after,
  html .header-bottom-customers-button.is-account:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    width: 100%;
    max-width: 100%;
    transform: none;
    box-sizing: border-box;
    padding: 0 1px;
    font-size: 9px !important;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: center;
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    color: inherit;
  }
}

/**
 * Планшетна нижня панель (480–767): як десктоп — «КАТАЛОГ ТОВАРІВ» + компактні 5.5em іконки.
 * Без mobile-масштабу 3em/4em і без підписів :after.
 */
@media screen and (max-width: 767px) and (min-width: 480px) {
  html .header-bottom-box {
    gap: 0.4em !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  html .header-bottom,
  html .header-bottom.add-shadow {
    padding-top: 0.8em !important;
    padding-bottom: 0.8em !important;
  }

  html .header-bottom-catalog-button {
    flex: 0 0 auto;
    width: auto;
    font-size: inherit;
  }

  html .header-bottom-catalog-button-toggle {
    width: auto !important;
    min-width: 0;
    height: 5.5em !important;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.6em;
    font-size: inherit !important;
    padding: 0 1.2em 0 0;
  }

  html .header-bottom-catalog-toggle-text {
    display: block !important;
    font-size: clamp(11px, 1.8em, 14px);
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }

  html .header-bottom-catalog-toggle-icon {
    position: relative;
    width: 2.2em !important;
    height: 2em !important;
    margin-top: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
  }

  html .header-bottom-customers {
    grid-column-gap: 0.4em !important;
    column-gap: 0.4em !important;
    grid-row-gap: 0 !important;
    row-gap: 0 !important;
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    font-size: inherit;
  }

  html .header-bottom-customers-buttons {
    grid-column-gap: 0.4em !important;
    column-gap: 0.4em !important;
    grid-row-gap: 0 !important;
    row-gap: 0 !important;
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  html .header-bottom-customers-account-root {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    overflow: hidden;
  }

  html .header-bottom-customers-button.is-fav,
  html .header-bottom-customers-button.is-compare,
  html .header-bottom-customers-button.is-cabinet,
  html .header-bottom-customers-button.is-account {
    flex: 0 0 5.5em !important;
    box-sizing: border-box;
    width: 5.5em !important;
    min-width: max(5.5em, 36px) !important;
    max-width: 5.5em !important;
    height: 5.5em !important;
    min-height: max(5.5em, 36px) !important;
    font-size: inherit !important;
    position: relative;
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: inherit;
    padding: 0 !important;
  }

  html .header-bottom-customers-button-label,
  html .header-bottom-customers-button-label.like {
    min-width: 1.6em !important;
    min-height: 1.6em !important;
    padding-left: 0.2em !important;
    padding-right: 0.2em !important;
    font-size: 1em !important;
    top: 15% !important;
    right: 15% !important;
  }

  html .header-bottom-customers-button-icon {
    width: 40% !important;
    height: 40% !important;
    max-width: 40% !important;
    max-height: 40% !important;
    margin-top: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  html .header-bottom-customers-button-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  html .header-bottom-cart,
  html .header-cart-open-btn {
    /* Скидаємо tablet min-width:29em / height:10em з wf-media @767 */
    flex: 0 0 auto !important;
    box-sizing: border-box;
    min-width: auto !important;
    width: auto !important;
    max-width: none !important;
    height: 5.5em !important;
    margin-left: 0.4em;
    margin-right: 0;
    padding-left: 1.2em !important;
    padding-right: 1.2em !important;
    border-radius: 0.6em !important;
    justify-content: flex-start !important;
    align-items: center !important;
    font-size: inherit !important;
  }

  html .header-bottom-cart-icon {
    width: 2.5em !important;
  }

  html .header-bottom-cart-sum {
    margin-left: 1em !important;
    padding-left: 0.8em !important;
  }

  html .header-bottom-cart-cost {
    font-size: 1.5em !important;
    font-weight: 700;
  }

  html .header-bottom-customers-button-label.is-cart {
    font-size: 1em !important;
    min-width: 1.6em !important;
    min-height: 1.6em !important;
  }

  html .header-bottom-catalog-button-toggle:after,
  html .header-bottom-customers-button.is-fav:after,
  html .header-bottom-customers-button.is-compare:after,
  html .header-bottom-customers-button.is-cabinet:after,
  html .header-bottom-customers-button.is-account:after {
    content: none !important;
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  html .text-block-67 {
    font-size: 1em;
  }
}

.product-image {
  width: 100%;
}

:root {
  --leader-page-top: 24px;
  /**
   * Дефолт висоти хедера ДО JS-виміру (`syncLeaderHeaderMetrics` перезапише точним px).
   * Раніше було 7.5rem (=120px) — не відповідало жодному брейкпоінту (реально ~108-140px
   * на десктопі), тож прив'язані до змінної відступи стрибали при першому вимірі.
   * `1vw`-база: обидві смуги ≈ 9.7em; при 1vw це ≈ 9.7vw, з обмеженням під 14.4px базу на 1440+.
   */
  --leader-header-height: 9.7em;
}

@media screen and (min-width: 1440px) {
  :root {
    --leader-header-height: 140px;
  }
}

/* Мобайл (<=767): sticky-частина хедера — лише верхній navbar; нижня панель окремо fixed внизу. */
@media screen and (max-width: 767px) {
  :root {
    --leader-header-height: 76px;
  }

  /**
   * Critical: fixed bottom bar до wf-media.css — інакше панель спочатку в потоці
   * (темна смуга / дірка), потім стрибає вниз екрана.
   */
  html .header-bottom,
  html .header-bottom.add-shadow {
    background-color: #f8f8fb !important;
    color: #17181a !important;
    position: fixed !important;
    inset: auto 0 0 !important;
    z-index: 999 !important;
    box-shadow: 0 -3px 9px #0003;
    padding-top: 1.8em;
    padding-bottom: 1.8em;
  }
}

html {
  scroll-padding-top: calc(var(--leader-header-height) + var(--leader-page-top));
}

/* Шапка в потоці, без відступу знизу — зазор лише всередині сторінок. */
.header-section {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
  height: auto !important;
}

/**
 * Резервування висоти смуг ДО завантаження повного каскаду/шрифта — щоб не було стрибка
 * розкладки. min-height в `em` (від стабільної `1vw`-бази з початку файлу), близько до
 * реально виміряних висот на кожному брейкпоінті. Не фіксуємо жорстко height, щоб контент
 * (наприклад динамічні категорії з CMS) міг за потреби розсунути смугу без обрізання.
 */
.header-box {
  min-height: 4.6em;
}

.header-bottom {
  min-height: 5.05em;
}

.header-navbar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: 0 !important;
}

html.leader-mobile-nav-open,
html.leader-mobile-nav-open body {
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  html.leader-mobile-nav-open .header-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 12;
  }

  html .header-nav.w-nav-menu[data-nav-menu-open] {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 0;
    overflow: hidden;
    background-color: #17181a !important;
    z-index: 9;
  }

  html .header-nav.w-nav-menu[data-nav-menu-open] .header-nav-list {
    position: absolute;
    inset: 12.5em 0 22em 0;
    transform: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html .header-contacts {
    grid-column-gap: 4em;
    grid-row-gap: 4em;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 15em;
    display: flex;
    position: absolute;
    inset: auto 0% 3%;
  }

  html .header-navbar .header-logo,
  html .header-navbar .burger-box,
  html .header-navbar .header-bottom-search {
    z-index: 13;
  }

  /**
   * Мобільний пошук у navbar: фіксуємо розмір форми, щоб сторінковий CSS
   * (product.css тощо) не стискав інпут під час SPA-переходу до restack wf-media.
   */
  html .header-navbar form.header-bottom-search,
  html form.header-bottom-search {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 55em !important;
    max-width: calc(100% - 9em) !important;
    margin: 0 !important;
    z-index: 6;
  }

  html form.header-bottom-search .header-bottom-search-input,
  html .header-bottom-search-input {
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0.7em !important;
    padding-bottom: 0.7em !important;
    font-size: 2.2em !important;
    height: auto !important;
    box-sizing: border-box;
  }
}

/* Верхній відступ — у контенті сторінки, однаковий на всіх екранах. */
.header-section + .section.catalogue,
.header-section + .section.ss-product,
.header-section + .section.product-fs,
.header-section + .section.search-pg,
.header-section + .section.page,
.header-section + .section.about-us,
.header-section + .u-wrapper.catalog,
.header-section + .section.checkout__top-wrapper,
.leader-app-root > .section.search-pg,
.leader-app-root > .section.checkout__top-wrapper {
  margin-top: 0 !important;
  padding-top: var(--leader-page-top) !important;
}

@media screen and (max-width: 767px) {
  .section.fs-new {
    margin-top: 3em;
  }
}

@media screen and (max-width: 479px) {
  .section.checkout__top-wrapper,
  .header-section + .section.checkout__top-wrapper,
  .leader-app-root > .section.checkout__top-wrapper {
    margin-top: 2rem !important;
  }

  .section.fs-new {
    margin-top: 0rem !important;
  }

  .section.fs-new.top_product,
  .header-section + .section.fs-new.top_product {
    margin-top: 0rem !important;
  }

  .section.ss-product,
  .header-section + .section.ss-product {
    padding-top: 0em !important;
    margin-top: 2em !important;
  }

  .prod-fs-right-side-new {
    flex-flow: row wrap;
    align-items: center;
  }

  .prod-fs-right-side-new > :not(.articul_block):not(.div-block-78) {
    flex: 1 0 100%;
  }

  .articul_block {
    flex: 1 0 100%;
    min-width: 0;
    width: 100%;
    align-items: center;
    margin-top: 0.5em;
    margin-bottom: 0;
    margin-right: 0;
  }

  .div-block-78 {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  [swiper-slider="product"],
  .fs-prod-small-cards-slider {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .fs-prod-slider-clw.swiper_for_product,
  #slider-for-product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y !important;
    scrollbar-width: none;
  }

  .fs-prod-slider-clw.swiper_for_product::-webkit-scrollbar,
  #slider-for-product::-webkit-scrollbar {
    display: none;
  }

  .fs-prod-slider-cl.swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px;
    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;
    margin: 0 !important;
    padding: 0 0 4px !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
  }

  .fs-prod-slider-ci.swiper-slide {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Bonus cards: slidesPerView:auto потребує width:auto, інакше Swiper тягне слайд на 100%. */
[swiper-slider='product'] .fs-prod-slider-ci.swiper-slide,
.fs-prod-small-cards-slider .fs-prod-slider-ci.swiper-slide {
  width: auto;
  flex: 0 0 auto;
}

.section.catalogue,
.section.search-pg,
.section.ss-product,
.u-wrapper.catalog,
.section.page,
.section.about-us,
.section.checkout__form,
.leader-manual-sec {
  scroll-margin-top: calc(var(--leader-header-height) + var(--leader-page-top));
}

@media (max-width: 767px) {
  .header-navbar {
    margin-top: 0 !important;
  }

  .characteristics-right-side {
    margin-top: 0;
  }
}

@media screen and (max-width: 479px) {
  .header-navbar {
    margin-top: 0px !important;
  }

  /* Фінальний розмір інпута як у wf-media @479 — вище за product.css під час inject. */
  html form.header-bottom-search .header-bottom-search-input,
  html .header-bottom-search-input {
    background-position: 93% !important;
    height: 2.77778em !important;
    font-size: 4.26667em !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (min-width: 768px) {
  .header-navbar > .wrapper {
    margin-top: 0;
    transition: margin-top .2s;
  }

  /* Повертаємо пошук у центр саме блоку .header-bottom.add-shadow */
  .header-bottom.add-shadow {
    position: relative;
    z-index: 8;
  }

  .header-bottom.add-shadow .wrapper {
    position: relative;
  }

  /* Fallback: якщо форма ще в .header-navbar (старий HTML), не малюємо її поверх «Акції». */
  .header-navbar form.header-bottom-search {
    visibility: hidden !important;
    pointer-events: none;
  }

  .header-bottom.add-shadow .header-bottom-search {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    visibility: visible !important;
    pointer-events: auto;
  }

  /* Ховаємо верхню смугу рівно на її виміряну висоту — нижній бар лишається вгорі. */
  .header-navbar.scroll-now {
    overflow: hidden;
    margin-bottom: 0 !important;
  }

  .header-navbar.scroll-now > .wrapper {
    margin-top: calc(-1 * var(--leader-header-top-height, 0px));
  }
}

.ss-product-tabs-menu {
  top: var(--leader-header-height, 0px) !important;
  z-index: 40;
  transition: top 0.2s;
}

/* Каталожні картки: на мобілці/планшеті Swiper вимикається (< 768px).
   Без цього .swiper { touch-action: pan-y } блокує горизонтальний свайп, а
   translate3d на .swiper-wrapper зсуває першу картку за лівий край. */
@media (max-width: 767px) {
  .catalog-show-desktop {
    min-width: 0;
    width: 100%;
  }

  .leader-clw.swiper {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .leader-clw.swiper::-webkit-scrollbar {
    display: none;
  }

  .leader-clw.swiper .leader-cl.swiper-wrapper {
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
    width: max-content !important;
    touch-action: pan-x pan-y !important;
  }
}

/* Унікальний lightweight-slider тільки для блоку "Про товар". */
.product-about-mini-slider .product-about-mini-slider__viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  container-type: inline-size;
}

.product-about-mini-slider .product-about-mini-slider__viewport::-webkit-scrollbar {
  display: none;
}

.product-about-mini-slider .product-about-mini-slider__track {
  display: flex;
  gap: 8px;
  width: max-content;
  max-width: none;
  min-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-behavior: auto;
  touch-action: pan-x pan-y;
  cursor: grab;
}

.product-about-mini-slider .ss-product-tab-top-cl.product-about-mini-slider__track {
  grid-column-gap: 8px;
  grid-row-gap: 0;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.product-about-mini-slider .product-about-mini-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  padding-right: 0;
  border-right: none;
}

.product-about-mini-slider .ss-product-tab-top-slide-wrapper {
  max-width: none;
  width: 100%;
}

.product-about-mini-slider .product-about-mini-slider__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

.product-about-mini-slider .product-about-mini-slider__track img,
.product-about-mini-slider .product-about-mini-slider__track a {
  -webkit-user-drag: none;
}

/* Порожній бейдж знижки без тексту виглядає як червона крапка. */
.leader-card-discount-wrapper:has([discount="percent"]:empty),
.leader-card-discount-wrapper:has([discount="percentage"]:empty) {
  display: none !important;
}

@media (max-width: 767px) {
  .product-about-mini-slider .ss-product-tab-top-cl.product-about-mini-slider__track {
    width: max-content;
    max-width: none;
    margin-right: 0;
    overflow: visible;
  }

  .product-about-mini-slider .product-about-mini-slider__slide {
    flex: 0 0 calc(100cqi - 48px);
    width: 248px;
    max-width: 248px;
  }

  .product-about-mini-slider .ss-product-tab-top-slide-wrapper {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
}

@media (min-width: 768px) {
  .product-about-mini-slider .product-about-mini-slider__slide {
    flex-basis: calc((100cqi - 8px) / 2);
  }
}

@media (min-width: 992px) {
  .product-about-mini-slider .product-about-mini-slider__slide {
    flex-basis: calc((100cqi - 100px) / 3);
  }
}

/* Залишок CMS-пагінації Webflow у слайдерах колекцій. */
.w-pagination-next {
  display: none !important;
}

.leader-product-manuals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 8px 0 4px;
}

.leader-product-manual-link {
  color: #b3191d;
  font-size: 0.95em;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.leader-product-manual-link:hover {
  color: #8f1216;
}

.order-summary__item-wrapper.top {
  margin-bottom: 15px;
  font-size: 1rem;
}

@media (max-width: 479px) {
  .leader-product-manuals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 8px 0 14px;
  }

  .leader-product-manual-link {
    color: #b3191d;
    font-size: 2.95em;
    font-weight: 600;
    line-height: 140%;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Пагінація Swiper: видима крапка ~10px, зона натискання 48×48px і 8px між кнопками. */
html .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

html .swiper-pagination-bullet {
  position: relative;
  box-sizing: border-box;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  cursor: pointer;
}

html .swiper-pagination-bullet::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  opacity: 0.55;
  pointer-events: none;
  transition: width 0.25s ease, height 0.25s ease, background-color 0.2s ease, opacity 0.2s ease;
}

html .swiper-pagination-bullet-active::before {
  width: 22px;
  border-radius: 999px;
  opacity: 1;
}

/* Підписи днів акції показує лише лабораторний CSS головної. */
.hero-offer-timer-days-prefix,
.hero-offer-timer-days-suffix {
  display: none;
}

/* Головний hero-слайдер: вертикальний бар пагінації справа. */
html .hero-slider-nav {
  z-index: 3;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  background: linear-gradient(180deg, rgba(20, 20, 26, 0.68), rgba(20, 20, 26, 0.5));
  border-radius: 999px;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

html .hero-slider-nav-button {
  position: relative;
  z-index: 2;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

html .hero-slider-nav-button:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

html .hero-slider-nav-button:active {
  transform: scale(0.94);
}

html .hero-slider-nav-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

html .hero-slider-nav-button-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Крапки лишаються в потоці бара. Інакше Swiper ставить пагінацію absolute на всю ширину і накриває кнопку «вниз». */
html .hero-slider-nav-list,
html .hero-slider-nav-list.swiper-pagination {
  position: static;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
  height: auto;
  margin: 0;
  transform: none;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}

html .hero-slider-nav-list .swiper-pagination-bullet {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
}

html .hero-slider-nav-list .swiper-pagination-bullet::before {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.55);
}

html .hero-slider-nav-list .swiper-pagination-bullet:hover::before {
  background: #fff;
  opacity: 1;
}

html .hero-slider-nav-list .swiper-pagination-bullet-active::before {
  width: 12px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(198, 23, 23, 0.55), 0 0 12px rgba(255, 255, 255, 0.35);
}

@media (max-width: 767px) {
  html .hero-slider-nav {
    right: 10px;
    padding: 6px 4px;
    gap: 4px;
  }

  html .hero-slider-nav-button {
    width: 34px;
    height: 34px;
  }

  html .hero-slider-nav-button-icon {
    width: 14px;
    height: 14px;
  }

  html .hero-slider-nav-list .swiper-pagination-bullet {
    width: 24px !important;
    height: 24px !important;
  }

  html .hero-slider-nav-list .swiper-pagination-bullet-active::before {
    width: 12px;
  }
}

/* Знижка на картці: білий на #f30 ≈ 3.7:1, на брендовому червоному ≥ 4.5:1. */
html .leader-card-discount-wrapper {
  background-color: #c61717;
}

html .leader-card-discount-wrapper .xxs-text {
  color: #fff;
}

/* FAQ: плейсхолдери й напівпрозорий сірий не проходять контраст. */
html .faq-form-text-field,
html .faq-form-text-field:hover,
html .faq-form-text-field:focus {
  color: #121323;
}

html .faq-form-text-field::placeholder {
  color: #4a4a55;
  opacity: 1;
}

html .s-text.faq-pp,
html .s-text.faq-left {
  color: #383843;
}

html .faq-pp-link {
  color: #a51212;
}

html main#leader-main,
html main.leader-app-root,
html main#leader-app-root {
  display: block;
}