/** Shopify CDN: Minification failed

Line 2442:19 Unexpected "{"
Line 2442:28 Expected ":"

**/
/* START_SECTION:breadcrumbs (INDEX:2) */
.breadcrumbs-section {
    background-color: var(--bc-bg);
  }

  .breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    font-family: var(--font-body--family);
    font-size: var(--bc-font-size, 13px);
  }

  .breadcrumbs__item {
    display: flex;
    align-items: center;
    color: var(--bc-link-color, var(--color-text-muted, var(--cm-text-muted)));
  }

  .breadcrumbs__item + .breadcrumbs__item::before {
    content: '/';
    margin-inline: 0.4em;
    color: var(--bc-link-color, var(--color-text-muted, var(--cm-text-muted)));
    opacity: 0.6;
  }

  .breadcrumbs__link {
    color: inherit;
    text-decoration: none;
  }

  .breadcrumbs__link:hover {
    text-decoration: underline;
  }

  .breadcrumbs__item--current {
    color: var(--bc-active-color, var(--color-text-dark, var(--cm-text)));
    font-weight: var(--bc-active-weight, 600);
  }

  @media (max-width: 749px) {
    .breadcrumbs__list {
      font-size: var(--bc-font-size-mobile, 12px);
    }
  }
/* END_SECTION:breadcrumbs */
/* START_SECTION:footer-utilities (INDEX:22) */
.casmani-footer-bar__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--color-border, #e5e5e5);
    font-size: 0.8125rem;
    color: var(--fbar-text, var(--color-foreground-muted, var(--color-foreground)));
  }

  /* Мобилка (дизайн): ряд «оплата слева — языки справа», копирайт под ними слева */
  @media screen and (max-width: 749px) {
    .casmani-footer-bar__inner {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 1.25rem 0.5rem;
    }

    .casmani-footer-bar__payments {
      order: 1;
    }

    .casmani-footer-bar__lang {
      order: 2;
    }

    .casmani-footer-bar__copyright {
      order: 3;
      flex-basis: 100%;
      text-align: left;
      white-space: normal;
    }
  }

  @media screen and (min-width: 750px) {
    .casmani-footer-bar__inner {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }

  .casmani-footer-bar__copyright {
    margin: 0;
    white-space: nowrap;
    /* Ревью дизайнера (3.43): 14/20 */
    font-size: 14px;
    line-height: 20px;
  }

  /* Отдельной строкой под копирайтом и внутри того же <p>: ряд .__inner
     раскладывает своих прямых детей флексом, и обёртка сломала бы порядок
     на мобилке. Цвет и размер наследуются — подпись должна совпадать
     с копирайтом. Снимаем только nowrap, иначе длинная строка не переносится. */
  .casmani-footer-bar__credit {
    display: block;
    margin-top: 4px;
    white-space: normal;
  }

  .casmani-footer-bar__lang {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .casmani-footer-bar__lang-btn {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.625rem;
    font-size: 0.8125rem;
    font-family: var(--font-body--family);
    color: var(--color-foreground-muted, var(--color-foreground));
    border-radius: 2rem;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1;
  }

  .casmani-footer-bar__lang-btn--active {
    background-color: var(--fbar-lang-bg, var(--color-foreground));
    color: var(--fbar-lang-text, var(--color-background));
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.625rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-family: var(--font-body--family);
    line-height: 1;
  }

  .casmani-footer-bar__lang-btn:not(.casmani-footer-bar__lang-btn--active):hover {
    color: var(--color-foreground);
  }

  .casmani-footer-bar__payments {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .casmani-footer-bar__payment-badge {
    display: inline-flex;
    align-items: center;
  }

  .casmani-footer-bar__payment-badge svg {
    display: block;
  }
/* END_SECTION:footer-utilities */
/* START_SECTION:footer (INDEX:23) */
.casmani-footer__inner {
    display: grid;
    /* Ревью дизайнера (3.39): на мобиле навигация в 2 колонки.
       minmax(0,1fr) вместо 1fr: у 1fr минимум = min-content, и длинный
       неразрывный контент (e-mail в контактах) распирал сетку за вьюпорт. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem 1.5rem;
    padding-block: 3rem;
  }

  @media screen and (max-width: 749px) {
    .casmani-footer__brand {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 750px) {
    .casmani-footer__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 2rem 3rem;
    }
  }

  @media screen and (min-width: 990px) {
    .casmani-footer__inner {
      grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
      gap: 2rem;
      align-items: start;
    }
  }

  .casmani-footer__brand {
    display: flex;
    flex-direction: column;
    /* Ревью дизайнера (3.37): лого -> описание 24px */
    gap: 24px;
  }

  .casmani-footer__logo-link {
    display: inline-block;
  }

  .casmani-footer__logo {
    display: block;
    /* Ревью дизайнера (3.36): высота логотипа 48px */
    height: 48px;
    width: auto;
    max-width: none;
  }

  .casmani-footer__logo--text {
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .casmani-footer__tagline {
    /* Ревью дизайнера (3.38): 14/20 */
    font-size: 14px;
    line-height: 20px;
    color: var(--f-link-color, var(--color-foreground-muted, var(--color-foreground)));
    max-width: 280px;
    margin: 0;
  }

  .casmani-footer__col-title {
    /* Ревью дизайнера (3.40): 12px; цвет — настройка Column title color */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--f-title-color, #2b574e);
    margin: 0 0 1.125rem;
    font-family: var(--font-body--family);
  }

  .casmani-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .casmani-footer__links a {
    color: var(--f-link-color, var(--color-foreground-muted, var(--color-foreground)));
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: color 0.2s;
  }

  .casmani-footer__links a:hover {
    color: var(--color-foreground);
  }

  .casmani-footer__contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .casmani-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--f-link-color, var(--color-foreground-muted, var(--color-foreground)));
  }

  .casmani-footer__contact-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--f-contact-icon, var(--f-link-color, var(--color-foreground-muted, var(--color-foreground))));
  }

  /* Телефон и почта — одинаковый размер иконок */
  .casmani-footer__contact-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  .casmani-footer__phones {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .casmani-footer__contact-item a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
    /* длинный e-mail не переносится и вылезал за колонку на узких экранах */
    overflow-wrap: anywhere;
  }

  .casmani-footer__contact-item a:hover {
    color: var(--color-foreground);
  }

  .casmani-footer__social {
    display: flex;
    gap: 0.625rem;
    margin-top: 1.5rem;
  }

  .casmani-footer__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1.5px solid var(--f-social-border, var(--color-border, #e0e0e0));
    /* Ревью дизайнера (3.41): 8px вместо круга; радиус и бордер настраиваются */
    border-radius: var(--f-social-radius, 8px);
    color: var(--f-social-color, var(--color-foreground));
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
  }

  .casmani-footer__social-btn:hover {
    background-color: var(--f-social-color, var(--color-foreground));
    color: var(--color-background);
  }

  .casmani-footer__disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-block-end: 3rem;
    padding: 16px 20px;
    border: 1px solid var(--f-disc-border, var(--cm-border));
    border-radius: var(--style-border-radius-md, 0.8rem);
    background: var(--f-disc-bg, transparent);
    color: var(--f-disc-color, var(--color-foreground));
  }

  .casmani-footer__disclaimer-icon {
    flex-shrink: 0;
    display: inline-flex;
    /* иконка совмещена с первой строкой текста, а не с центром плашки */
    margin-block-start: 1px;
    color: var(--f-disc-icon, var(--cm-accent-strong));
  }

  .casmani-footer__disclaimer-text {
    margin: 0;
    font-size: var(--f-disc-size, 14px);
    line-height: 1.5;
  }

  .casmani-footer__disclaimer-text strong,
  .casmani-footer__disclaimer-text b {
    font-weight: 600;
  }

  @media screen and (max-width: 749px) {
    .casmani-footer__disclaimer {
      margin-block-end: 2rem;
      padding: 14px 16px;
    }

    .casmani-footer__disclaimer-text {
      font-size: var(--f-disc-size-mobile, 13px);
    }
  }
/* END_SECTION:footer */
/* START_SECTION:header-announcements (INDEX:26) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  @media screen and (max-width: 749px) {
    .announcement-bar__slides {
      max-width: 100%;
      width: 100%;
      text-align: center;
    }
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */
/* START_SECTION:header (INDEX:27) */
/* ── Контакты в шапке ──
     Значения токенов --hc-* приходят из <style> сниппета header-contacts
     (там нужен Liquid). Здесь только статические правила — им место в
     head-бандле, иначе блок успевает отрисоваться без стилей.
     У каждого var() есть фолбэк на случай, если токены ещё не пришли. */
  .header-contacts__item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--hc-text, var(--cm-text));
    text-decoration: none;
  }

  .header-contacts__item:hover {
    color: var(--hc-text, var(--cm-text));
  }

  a.header-contacts__item:hover .header-contacts__line1 {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .header-contacts__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--hc-icon-size, 24px);
    height: var(--hc-icon-size, 24px);
  }

  /* Свой размер у каждой иконки; пусто = общий --hc-icon-size. */
  .header-contacts__icon--phone {
    width: var(--hc-icon-phone, var(--hc-icon-size, 24px));
    height: var(--hc-icon-phone, var(--hc-icon-size, 24px));
  }

  .header-contacts__icon--address {
    width: var(--hc-icon-address, var(--hc-icon-size, 24px));
    height: var(--hc-icon-address, var(--hc-icon-size, 24px));
  }

  .header-contacts__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .header-contacts__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .header-contacts__line1 {
    font-size: var(--hc-font-size, 16px);
    line-height: 1.3;
    color: var(--hc-text, var(--cm-text));
  }

  .header-contacts__line2 {
    font-size: var(--hc-line2-font-size, 14px);
    line-height: 1.3;
    color: var(--hc-muted, var(--cm-text-muted));
  }

  body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  /* Custom header colors */
  #header-component {
    --header-row-bg: var(--header-custom-bg, transparent);
    --header-row-text: var(--header-custom-text, var(--color-foreground));
  }

  .header__row--top {
    background-color: var(--header-custom-bg, transparent) !important;

    /* Own max content width instead of the theme-wide page width (1280px). */
    --page-width: calc(1376px + var(--page-margin) * 2);
  }

  .header__row--top .header-menu,
  .header__row--top .header-actions__action,
  .header__row--top .menu-list__link,
  .header__row--top .header-logo {
    color: var(--header-custom-text, inherit);
  }

  /* Icons (hamburger, account, cart, search) — separate color picker, falls back to text color */
  .header__row--top svg {
    color: var(--header-icon-color, var(--header-custom-text, inherit));
  }

  /* Inline language switcher */
  .header-lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* The inline language switcher belongs to the desktop header row (alongside the
     horizontal menu). Below 990px the hamburger drawer takes over and language is
     switched inside it, so hide the inline switcher — otherwise it overlaps the
     mobile action icons. (Its own `mobile:hidden` only covers ≤749px.) */
  @media screen and (max-width: 989px) {
    .header-lang-switcher,
    .dropdown-localization {
      display: none;
    }
  }

  .header-lang-switcher__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 4px 8px;
    border-radius: 48px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--header-custom-text, var(--color-foreground));
    text-decoration: none;
    transition: opacity 0.2s;
    font-family: var(--font-body--family);
  }

  .header-lang-switcher__item--active {
    background-color: var(--header-lang-active-bg, var(--header-custom-text, var(--color-foreground)));
    color: #ffffff;
  }

  .header-lang-switcher__item:not(.header-lang-switcher__item--active):hover {
    opacity: 0.7;
  }

  /* Hide the form wrapper margin */
  .header-lang-switcher form {
    display: contents;
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 990px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__link:not([aria-haspopup]):hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /** For transparent header, apply inherit to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-color-scheme='top']:hover .header__row--top,
  [data-transparent-color-scheme='top']:focus-within .header__row--top,
  [data-transparent-color-scheme='both']:hover .header__row--top,
  [data-transparent-color-scheme='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover .header__row--bottom,
  [data-transparent-color-scheme='bottom']:focus-within .header__row--bottom,
  [data-transparent-color-scheme='both']:hover .header__row--bottom,
  [data-transparent-color-scheme='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-heightened);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-sticky);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* When top row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='top']:hover,
  [data-transparent-color-scheme='top']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover,
  [data-transparent-color-scheme='bottom']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-scheme-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component uses a different color scheme, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from color scheme, background is controlled by the underlays */
    background-color: transparent;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--color-border);
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Стоковый Horizon гасил ВСЕ остальные элементы колонки, когда наводишь на
     один: правило было `.header__column:has(...:hover) { ...:not(:hover) { opacity } }`.
     Со стороны это читается как «реагируют все иконки сразу» — наводишь на поиск,
     а мигают и аккаунт, и корзина. Эффект уже убран у меню в _header-menu.liquid,
     здесь снят и у иконок, чтобы поведение было одинаковым.
     Взамен отклик даёт сам наведённый элемент, а не его соседи. */
  @media (hover: hover) {
    .header-actions__action:hover,
    .header__icon--menu:hover {
      opacity: var(--opacity-subdued-text);
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  /* Casmani: настраиваемые вертикальные паддинги верхнего ряда (только десктоп).
     Значения приходят инлайном на .header__row--top; без них остаётся штатный
     --header-padding. Правило .header--collapse-row-paddings специфичнее и
     по-прежнему обнуляет нижний паддинг при слитых рядах.
     Мобайла тут нет намеренно: ниже 750px тема ставит `padding-block: 0`
     шорткатом, высоту мобильной шапки задаёт --header-drawer-min-height. */
  .header__row--top .header__columns {
    --padding-block-start: var(--header-pad-top, var(--header-padding));
    --padding-block-end: var(--header-pad-bottom, var(--header-padding));
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
     * the height of the header
     */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

      /* Any nested sections should not be offset */
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  /* ============================================
     MEGA MENU
  ============================================ */

  .mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 200;
    pointer-events: none;
  }

  .mega-menu__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: auto;
    background-color: var(--header-custom-bg, rgb(var(--color-background-rgb)));
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.18);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }

  .mega-menu__panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mega-menu__panel-inner {
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
    padding: 32px 40px;
    box-sizing: border-box;
  }

  /* Left column — category list */
  .mega-menu__left {
    flex: 0 0 220px;
    padding-right: 32px;
    border-right: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    margin-right: 40px;
  }

  .mega-menu__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mega-menu__item-link {
    display: block;
    padding: 10px 16px;
    border-radius: var(--style-border-radius-md, 0.8rem);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--header-custom-text, var(--color-foreground));
    text-decoration: none;
    transition: background-color 0.15s, opacity 0.15s;
    font-family: var(--font-body--family);
  }

  .mega-menu__item-link:hover {
    background-color: rgb(var(--color-foreground-rgb) / 0.08);
  }

  /* Right column — products */
  .mega-menu__right {
    flex: 1;
  }

  .mega-menu__right--products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .mega-menu__product-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--header-custom-text, var(--color-foreground));
    border-radius: var(--style-border-radius-lg, 1rem);
    overflow: hidden;
    transition: opacity 0.15s;
  }

  .mega-menu__product-card:hover {
    opacity: 0.85;
  }

  .mega-menu__product-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--style-border-radius-lg, 1rem);
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .mega-menu__product-img-wrap--placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mega-menu__product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mega-menu__product-info {
    padding: 10px 4px 4px;
  }

  .mega-menu__product-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--header-custom-text, var(--color-foreground));
    font-family: var(--font-body--family);
  }

  .mega-menu__product-price {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    opacity: 0.75;
    color: var(--header-custom-text, var(--color-foreground));
    font-family: var(--font-body--family);
  }

  /* Right column — collections */
  .mega-menu__right--collections {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }

  .mega-menu__collection-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--header-custom-text, var(--color-foreground));
    transition: opacity 0.15s;
  }

  .mega-menu__collection-card:hover {
    opacity: 0.85;
  }

  .mega-menu__collection-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--style-border-radius-lg, 1rem);
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .mega-menu__collection-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mega-menu__collection-title {
    margin: 10px 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    color: var(--header-custom-text, var(--color-foreground));
    font-family: var(--font-body--family);
  }

  /* Hide mega menu below 990px — the hamburger drawer nav takes over on tablet
     and mobile, so the horizontal menu triggers only exist ≥990px. */
  @media screen and (max-width: 989px) {
    .mega-menu {
      display: none;
    }
  }

  /* ── Casmani mobile header layout ──
     Search icon stays beside the hamburger (leftB, the grid default) instead of
     next to favorites/cart (rightB) where it used to overlap them. Account
     button stays hidden — favorites + cart are the only right-side actions. */
  @media screen and (max-width: 749px) {
    #header-component header-actions .account-button {
      display: none;
    }
  }
/* END_SECTION:header */
/* START_SECTION:mega-menu-config (INDEX:48) */
/* ============================================
     MEGA MENU
  ============================================ */

  /* Trigger links: switch to row so chevron sits beside the title */
  .has-mega-menu > .menu-list__link {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  /* Chevron injected as direct child of <a data-skip-node-update> */
  .mega-menu__chevron {
    flex-shrink: 0;
    display: block;
    width: 12px;
    height: 8px;
    opacity: 0.7;
    overflow: visible;
    transform: translateY(3px) rotate(0deg);
    transition: transform 0.2s ease, opacity 0.2s ease,
      color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .has-mega-menu:hover > .menu-list__link .mega-menu__chevron,
  .mega-open > .menu-list__link .mega-menu__chevron {
    transform: translateY(0px) rotate(180deg);
    opacity: 1;
  }

  .mega-menu {
    position: fixed;
    top: var(--header-height, 60px);
    left: 0;
    width: 100%;
    z-index: 199;
    pointer-events: none;
  }

  /* Backdrop — blurs everything below the header while a panel is open.
     Starts at the header bottom (.mega-menu top) so the header stays sharp,
     and sits behind the panel (z-index: -1) so the panel stays sharp too. */
  .mega-menu__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: rgb(0 0 0 / 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  .mega-menu:has(.mega-menu__panel.is-open) .mega-menu__backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
  }

  .mega-menu__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--mega-menu-bg, var(--header-custom-bg, rgb(var(--color-background-rgb))));
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.18);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }

  .mega-menu__panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mega-menu__panel-inner {
    display: flex;
    align-items: stretch;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
    padding: 28px 40px;
    box-sizing: border-box;
  }

  .mega-menu__divider {
    flex: 0 0 1px;
    background: rgb(var(--color-foreground-rgb) / 0.12);
    margin: 0 32px;
  }

  /* ── Left column ── */
  .mega-menu__left {
    flex: 2;
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    min-width: 0;
  }

  .mega-menu__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mega-menu__item-link {
    display: block;
    padding: 6px 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.75rem;
    letter-spacing: 0;
    color: var(--header-custom-text, var(--color-foreground));
    text-decoration: none;
    font-family: var(--font-heading--family);
    opacity: 0.45;
    transition: opacity 0.15s;
  }

  .mega-menu__item.is-active .mega-menu__item-link,
  .mega-menu__item-link:hover {
    opacity: 1;
    background: none;
    text-decoration: underline;
    text-underline-offset: 25%;
    text-decoration-thickness: 5%;
    text-decoration-skip-ink: auto;
  }

  .mega-menu__item--simple .mega-menu__item-link--simple {
    opacity: 0.6;
  }

.mega-menu__item--simple .mega-menu__item-link--simple:hover {
    opacity: 1;
  }

  /* ── Middle column ── */
  .mega-menu__middle {
    flex: 4;
    border-right: none;
    padding-right: 24px;
    margin-right: 0;
    min-width: 0;
  }

  .mega-menu__sub-panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .mega-menu__sub-panel.is-active {
    display: grid;
  }

  .mega-menu__sub-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--style-border-radius-md, 0.8rem);
    text-decoration: none;
    color: var(--header-custom-text, var(--color-foreground));
    transition: background-color 0.15s;
  }

  .mega-menu__sub-item:hover {
    background-color: rgb(var(--color-foreground-rgb) / 0.07);
  }

  .mega-menu__sub-img-wrap {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-sm, 0.6rem);
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .mega-menu__sub-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mega-menu__sub-label {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    letter-spacing: 0;
    font-family: var(--font-body--family);
  }

  /* ── Right column — products ── */
  .mega-menu__right--products {
    flex: 0 0 auto;
    width: 496px; /* 3×160px + 2×8px gap */
    display: block;
    min-width: 0;
  }

  .mega-menu__products-panel {
    display: none;
    grid-template-columns: repeat(3, 160px);
    gap: 8px;
    width: 100%;
  }

  .mega-menu__products-panel.is-active {
    display: grid;
  }

  /* Подпись над рядом товаров. Панель — grid, поэтому строка растягивается
     на все колонки: 3 в classic, 4 в tiles. */
  .mega-menu__products-title {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-family: var(--font-heading--family);
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--header-custom-text, var(--color-foreground));
  }

  /* Smooth appear when switching between left-column items (hover-driven).
     The outgoing panel is hidden instantly; the incoming one fades + slides in,
     which reads as a gentle crossfade — like the collection tabs. */
  .mega-menu__sub-panel.is-active,
  .mega-menu__products-panel.is-active {
    animation: mm-panel-appear 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  @keyframes mm-panel-appear {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-menu__sub-panel.is-active,
    .mega-menu__products-panel.is-active {
      animation: none;
    }
  }

  .mega-menu__product-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--header-custom-text, var(--color-foreground));
    transition: opacity 0.15s;
  }

  .mega-menu__product-card:hover { opacity: 0.85; }

  .mega-menu__product-img-wrap {
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 16px;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .mega-menu__product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mega-menu__product-info { padding: 10px 0 4px; }

  .mega-menu__product-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: 0;
    color: var(--header-custom-text, var(--color-foreground));
    font-family: var(--font-heading--family);
  }

  .mega-menu__product-prices {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 0px;
  }

  .mega-menu__product-price {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5rem;
    color: var(--mega-price-color, var(--cm-primary));
    font-family: var(--font-body--family);
  }

  .mega-menu__product-compare-price {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--header-custom-text, var(--color-foreground));
    opacity: 0.5;
    font-family: var(--font-body--family);
    text-decoration: line-through;
  }

  /* ── Collections grid layout ── */
  .mega-menu__collections-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 32px;
    width: 100%;
  }

  .mega-menu__coll-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--header-custom-text, var(--color-foreground));
    transition: opacity 0.15s;
  }

  .mega-menu__coll-card:hover { opacity: 0.85; }

  .mega-menu__coll-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--style-border-radius-lg, 1rem);
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .mega-menu__coll-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mega-menu__coll-title {
    margin: 10px 0 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    text-align: center;
    color: var(--header-custom-text, var(--color-foreground));
    font-family: var(--font-heading--family);
  }

  /* ── Product badges ── */
  .mega-menu__product-img-wrap { position: relative; }

  .mega-menu__badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .mega-menu__badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    border-radius: 43px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    font-family: var(--font-body--family);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mega-menu__badge--sale        { background-color: var(--cm-accent-strong); }
  .mega-menu__badge--new         { background-color: var(--cm-teal); }
  .mega-menu__badge--bestseller  { background-color: #236D88; }

  /* ── Panel style 2: Tiles — плитки подколлекций сверху, ряд из 4 товаров снизу.
        Та же разметка (left / middle / right), перекладка чистым CSS. Desktop only:
        ниже 990px мегаменю скрыто целиком. ── */
  .mega-menu__panel-inner--tiles {
    display: grid;
    grid-template-columns: 240px 1px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }

  .mega-menu__panel-inner--tiles .mega-menu__left {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .mega-menu__panel-inner--tiles .mega-menu__divider {
    grid-column: 2;
    grid-row: 1 / 3;
    height: 100%;
    margin: 0;
  }

  .mega-menu__panel-inner--tiles .mega-menu__middle {
    grid-column: 3;
    grid-row: 1;
    padding-right: 0;
    padding-left: 40px;
  }

  .mega-menu__panel-inner--tiles .mega-menu__right--products {
    grid-column: 3;
    grid-row: 2;
    width: auto;
    margin-top: 32px;
    padding-left: 40px;
  }

  /* Подколлекции — плитки: широкая картинка, подпись по центру снизу */
  .mega-menu__panel-inner--tiles .mega-menu__sub-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }

  .mega-menu__panel-inner--tiles .mega-menu__sub-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    border-radius: 0;
  }

  .mega-menu__panel-inner--tiles .mega-menu__sub-item:hover {
    background: none;
  }

  .mega-menu__panel-inner--tiles .mega-menu__sub-item:hover .mega-menu__sub-label {
    text-decoration: underline;
    text-underline-offset: 25%;
  }

  .mega-menu__panel-inner--tiles .mega-menu__sub-img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 5;
    border-radius: var(--style-border-radius-md, 0.8rem);
  }

  .mega-menu__panel-inner--tiles .mega-menu__sub-label {
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  /* Товары — 4 карточки в ряд на всю ширину */
  .mega-menu__panel-inner--tiles .mega-menu__products-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }

  .mega-menu__panel-inner--tiles .mega-menu__product-card {
    min-width: 0;
  }

  .mega-menu__panel-inner--tiles .mega-menu__product-img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Бейджи столбиком (START над SALE, как в макете) */
  .mega-menu__panel-inner--tiles .mega-menu__badges {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 4-й товар существует в разметке, но виден только в стиле Tiles */
  .mega-menu__panel-inner:not(.mega-menu__panel-inner--tiles) .mega-menu__products-panel .mega-menu__product-card:nth-child(n + 4) {
    display: none;
  }

  /* 990–1199px: в Tiles сужаемся до 3 колонок */
  @media screen and (min-width: 990px) and (max-width: 1199px) {
    .mega-menu__panel-inner--tiles {
      grid-template-columns: 190px 1px minmax(0, 1fr);
    }

    .mega-menu__panel-inner--tiles .mega-menu__sub-panel,
    .mega-menu__panel-inner--tiles .mega-menu__products-panel {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mega-menu__panel-inner--tiles .mega-menu__products-panel .mega-menu__product-card:nth-child(n + 4) {
      display: none;
    }
  }

  /* ── Chevron on mega-menu triggers ── */
  .mega-menu__chevron {
    display: inline-block;
    flex-shrink: 0;
    margin-left: 3px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    transition: transform 0.2s ease;
  }

  .has-mega-menu.mega-open .mega-menu__chevron {
    transform: rotate(180deg);
  }

  /* Hidden below 990px — the hamburger drawer nav takes over on tablet + mobile,
     so the horizontal menu triggers (and thus the mega panel) only exist ≥990px. */
  @media screen and (max-width: 989px) {
    .mega-menu { display: none; }
  }

  /* 990–1199px: show 2 products instead of 3. */
  @media screen and (min-width: 990px) and (max-width: 1199px) {
    .mega-menu__right--products {
      width: auto; /* was a fixed 496px (3 columns) */
    }

    .mega-menu__products-panel {
      grid-template-columns: repeat(2, minmax(0, 160px));
    }

    /* Render only the first 2 products */
    .mega-menu__products-panel .mega-menu__product-card:nth-child(n + 3) {
      display: none;
    }
  }

  /* ── Casmani mobile sub-drawers ── */
  .casmani-mobile-submenu {
    position: fixed;
    /* Sit below the shared green header (its height set via JS, 64px fallback) */
    top: var(--casmani-sub-top, 64px);
    left: 0;
    width: 100%;
    bottom: 0;
    height: auto;
    background-color: var(--color-background);
    z-index: calc(var(--layer-menu-drawer) + 1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    visibility: visible;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  .casmani-mobile-submenu.is-open {
    transform: translateX(0);
  }

  /* Children keep their natural height — when an accordion expands the submenu
     scrolls instead of squishing the product carousel below it. */
  .casmani-mobile-submenu > * {
    flex-shrink: 0;
  }

  .casmani-submenu-header {
    display: flex;
    align-items: center;
    padding: 16px 16px 8px;
    background-color: transparent;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 24px;
  }

  .casmani-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 0;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    font-family: var(--font-body--family);
    font-size: inherit;
    line-height: inherit;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
  }

  .casmani-back-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: block;
  }

  .casmani-submenu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }

  .casmani-submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .casmani-item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-family: var(--font-heading--family);
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .casmani-item-caret {
    flex-shrink: 0;
    opacity: 0.45;
    transition: transform 0.2s ease;
    /* Theme paints drawer SVGs white; force dark or the accordion chevron is invisible. */
    color: rgb(var(--color-foreground-rgb)) !important;
  }

  .casmani-item-open > .casmani-item-link .casmani-item-caret {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* Smooth accordion expand: animate the grid row from 0fr to 1fr */
  .casmani-sub-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }

  .casmani-item-open .casmani-sub-wrap {
    grid-template-rows: 1fr;
  }

  .casmani-sub-items {
    overflow: hidden;
    min-height: 0;
    list-style: none;
    margin: 0;
    /* No vertical padding on the grid item — otherwise its padding box keeps an
       8px strip visible when collapsed (grid row = 0fr). Bottom spacing comes
       from the last sub-link's own padding instead. */
    padding: 0 20px;
  }

  .casmani-sub-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .casmani-sub-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .casmani-sub-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .casmani-sub-label {
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-foreground);
  }

  .casmani-sub-link:hover .casmani-sub-label { opacity: 0.7; }

  /* Make trigger links in drawer show caret */
  .has-mobile-submenu .menu-drawer__menu-item--mainlist {
    cursor: pointer;
  }

  .menu-drawer .casmani-fwd-caret {
    flex-shrink: 0;
    width: 20px !important;
    height: 20px !important;
    opacity: 0.5;
    visibility: visible !important;
    /* The theme paints drawer SVGs white; the caret stroke uses currentColor,
       so without an explicit dark color it renders white-on-white (invisible). */
    color: rgb(var(--color-foreground-rgb)) !important;
  }

  /* ── Collections sub-drawer: image rows + view-all button ── */
  .casmani-submenu-list--collections > li,
  .casmani-submenu-list--collections > li:first-child {
    border: none;
  }

  .casmani-coll-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 20px;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .casmani-coll-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .casmani-coll-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .casmani-coll-label {
    font-family: var(--font-heading--family);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-foreground);
  }

  .casmani-coll-seeall {
    display: block;
    margin: 16px 20px 8px;
    padding: 14px 20px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.25);
    border-radius: var(--cm-btn-radius, 50px);
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-foreground);
    text-decoration: none;
  }

  /* ── Products sub-drawer: horizontal product carousel ── */
  .casmani-prod-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 8px 20px 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .casmani-prod-carousel::-webkit-scrollbar {
    display: none;
  }

  .casmani-prod-card {
    flex: 0 0 auto;
    width: 160px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .casmani-prod-imgwrap {
    position: relative;
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    border-radius: 16px;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .casmani-prod-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* "No image" placeholder — beats the rule above, which would stretch the
     overlay PNG to the full square. */
  .casmani-prod-imgwrap .cm-ph__img {
    width: var(--cm-placeholder-size, 45%);
    height: auto;
    object-fit: contain;
  }

  .casmani-prod-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 50px;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
  }

  .casmani-prod-badge--sale { background-color: var(--cm-accent-strong); }
  .casmani-prod-badge--new  { background-color: var(--cm-teal); }
  .casmani-prod-badge--top  { background-color: #236d88; }

  .casmani-prod-title {
    margin-top: 10px;
    font-family: var(--font-heading--family);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-foreground);
  }

  .casmani-prod-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 4px;
  }

  .casmani-prod-price {
    font-family: var(--font-body--family);
    font-size: 1rem;
    font-weight: 500;
    color: #2d7a5f;
    white-space: nowrap;
  }

  .casmani-prod-compare {
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    color: var(--color-foreground);
    opacity: 0.5;
    text-decoration: line-through;
    white-space: nowrap;
  }
/* END_SECTION:mega-menu-config */
/* START_SECTION:newsletter-hero (INDEX:49) */
.newsletter-hero {
    position: relative;
    overflow: hidden;
  }

  #NewsletterHero-{{ section.id }} .section-background {
    grid-column: 1 / -1;
  }

  .newsletter-hero__bg-section-background {
    display: none;
  }

  .newsletter-hero__curve {
    grid-column: 1 / -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 160px;
    z-index: 1;
    display: block;
  }

  .newsletter-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--nh-pt) + 160px) var(--nh-pb);
    gap: 0;
  }

  /* Desktop images */
  .newsletter-hero__img--desktop {
    grid-column: 1 / -1;
    position: absolute;
    bottom: 0;
    z-index: 3;
    width: clamp(180px, 18vw, 300px);
  }

  .newsletter-hero__img--left {
    left: var(--nh-img-left-x, 0px);
    bottom: var(--nh-img-left-y, 0px);
    width: var(--nh-img-left-w, clamp(180px, 18vw, 300px));
  }

  .newsletter-hero__img--right {
    right: var(--nh-img-right-x, 0px);
    bottom: var(--nh-img-right-y, 0px);
    width: var(--nh-img-right-w, clamp(180px, 18vw, 300px));
  }

  .newsletter-hero__img--desktop img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .newsletter-hero__img--mobile {
    display: none;
  }

  /* Content */
  .newsletter-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    max-width: var(--nh-content-w, 804px);
    padding-inline: 1rem;
  }

  /* Заголовок можно сузить отдельно от блока — так правятся переносы строк,
     не трогая ширину поля с кнопкой. Центрируется сам: он флекс-элемент
     .newsletter-hero__content с align-items: center. */
  .newsletter-hero__heading {
    font-family: var(--font-heading--family);
    font-size: var(--nh-heading-size);
    font-weight: 400;
    color: var(--nh-heading-color);
    margin: 0;
    line-height: 1.2;
    max-width: var(--nh-heading-w, none);
  }

  /* Form */
  .newsletter-hero__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .newsletter-hero__field-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 480px;
  }

  /* .newsletter-hero prefix beats base.css input:not(...) specificity (0,1,1) */
  .newsletter-hero .newsletter-hero__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 56px;
    border: 1px solid var(--nh-input-border);
    border-radius: var(--cm-btn-radius, 48px);
    background: var(--nh-input-bg);
    outline: none;
    padding: 18px 24px;
    font-family: var(--font-body--family);
    font-size: 1rem;
    color: var(--nh-input-text);
    box-sizing: border-box;
  }

  .newsletter-hero .newsletter-hero__input::placeholder {
    color: var(--nh-input-text);
    opacity: 0.6;
  }

  .newsletter-hero__btn {
    flex: 0 0 auto;
    width: auto;
    height: 56px;
    background: var(--nh-btn-bg);
    color: var(--nh-btn-text);
    border: none;
    border-radius: var(--cm-btn-radius, 48px);
    padding: 16px 32px;
    font-family: var(--font-body--family);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: opacity 0.2s;
  }

  .newsletter-hero__btn:hover {
    opacity: 0.88;
  }

  .newsletter-hero__privacy {
    font-family: var(--font-body--family);
    font-size: 13px;
    /* Ревью дизайнера (3.35): regular #8A8A8A (цвета нет в палитре --cm-*, уточнить) */
    font-weight: 400;
    color: var(--nh-subtext-color, #8a8a8a);
    margin: 0;
    line-height: 1.4;
  }

  .newsletter-hero__privacy p {
    margin: 0;
    color: var(--nh-subtext-color, #8a8a8a);
  }

  /* Ревью дизайнера (3.35): ссылка «politica de confidentialitate» — medium, тёмная */
  .newsletter-hero__privacy a {
    color: var(--nh-privacy-link, var(--cm-text, #2c2722));
    font-weight: 500;
    text-decoration: underline;
  }

  .newsletter-hero__success {
    font-family: var(--font-body--family);
    font-size: 1rem;
    color: var(--nh-heading-color);
    margin: 0;
  }

  .newsletter-hero__error {
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    color: #c0392b;
    margin: 0;
  }

  /* Mobile */
  @media (max-width: 749px) {
    .newsletter-hero__inner {
      padding-block: calc(var(--nh-pt-mob) + 56px) var(--nh-pb-mob);
      flex-direction: column;
      align-items: center;
    }

    .newsletter-hero__curve {
      /* Ревью дизайнера (3.31): кривая меньше */
      height: 56px;
    }

    .newsletter-hero__img--desktop {
      display: none;
    }

    .newsletter-hero__img--mobile {
      display: block;
      width: 70%;
      max-width: 300px;
      margin: 0 auto 1.5rem;
      position: static;
    }

    .newsletter-hero__img--mobile img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    /* Не задана мобильная ширина — откатываемся к десктопной, то есть к тому,
       что было до появления настроек. */
    .newsletter-hero__content {
      max-width: var(--nh-content-w-mob, var(--nh-content-w, 804px));
    }

    .newsletter-hero__heading {
      font-size: var(--nh-heading-size-mob);
      /* Ревью дизайнера (3.32): 24px -> line-height 32 */
      line-height: 1.333;
      max-width: var(--nh-heading-w-mob, var(--nh-heading-w, none));
    }

    .newsletter-hero__field-wrap {
      flex-direction: column;
      gap: 0.75rem;
    }

    .newsletter-hero__input {
      width: 100%;
      max-width: 100%;
    }

    .newsletter-hero__btn {
      width: 100%;
    }
  }
/* END_SECTION:newsletter-hero */
/* START_BLOCK:_announcement (INDEX:82) */
.announcement-bar__inner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .announcement-bar__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 1em;
  }

  .announcement-bar__icon img {
    display: block;
  }

  .announcement-bar__text {
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
  }

  /* Бегущая строка на мобилке: длинный текст не переносится на две строки,
     а едет. Класс --marquee ставит announcement-marquee.js и только если текст
     реально не влез — короткие объявления остаются статичными по центру. */
  @media screen and (max-width: 749px) {
    .announcement-bar__slide {
      overflow: hidden;
    }

    /* Селектор из двух классов намеренно: тема ставит `.text-block > *` и
       `.custom-typography > *` с `text-wrap: var(--text-wrap)`, и они перебивают
       text-wrap-часть шортката `white-space`. Поэтому text-wrap задаём отдельно. */
    .announcement-bar__slide .announcement-bar__inner {
      flex-wrap: nowrap;
      white-space: nowrap;
      text-wrap: nowrap;
    }

    .announcement-bar__slide--marquee .announcement-bar__track {
      display: flex;
      width: max-content;
      animation: announcement-marquee var(--marquee-duration, 18s) linear infinite;
    }

    .announcement-bar__slide--marquee .announcement-bar__inner {
      width: max-content;
      justify-content: flex-start;
      /* зазор между копиями, чтобы строки не слипались на стыке */
      padding-inline-end: var(--marquee-gap, 48px);
    }
  }

  @keyframes announcement-marquee {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  /* Без анимации бежать нечему — возвращаем перенос, копию убираем. */
  @media (prefers-reduced-motion: reduce) {
    .announcement-bar__slide--marquee .announcement-bar__track {
      animation: none;
      width: auto;
    }

    /* .announcement-bar__slide--marquee висит на самом слайде — сцепляем классы,
       чтобы перебить mobile-правило из двух классов выше. */
    .announcement-bar__slide--marquee.announcement-bar__slide .announcement-bar__inner {
      white-space: normal;
      text-wrap: wrap;
      width: auto;
      justify-content: center;
      padding-inline-end: 0;
    }

    .announcement-bar__slide--marquee .announcement-bar__inner[data-marquee-clone] {
      display: none;
    }
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */
/* START_BLOCK:_header-logo (INDEX:110) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 12px 0px;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */
/* START_BLOCK:_header-menu (INDEX:111) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 990px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  /* A little gap between top-level menu items. Use padding (part of the item's
     measured offsetWidth) rather than margin or flex gap — the overflow-list
     sizes items by offsetWidth, so margin would desync its calculation and make
     the header reflow/flicker on load. */
  .menu-list__list-item + .menu-list__list-item {
    padding-inline-start: 8px;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--font-body--family);
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: inherit;
    }

    @media screen and (min-width: 990px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
    position: relative;
    font-size: 16px;
    /* Inherits color from the link — no own transition, so text stays in
       lockstep with the pill background (single animation on the link). */
    color: inherit;
  }

  /* Pill background on hover/active — replaces sliding underline */
  .menu-list__link {
    border-radius: 32px;
    padding: 8px 16px 8px 20px;
    height: auto;
    align-self: center;
    transition: background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
      color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Single source of truth for the hovered/active color: set it on the link.
     The title (color: inherit) and the chevron (stroke: currentColor) follow it
     automatically, so all three animate together with the pill background. */
  .menu-list__list-item:not([slot='overflow']):where(:hover, :focus-within) > .menu-list__link,
  .menu-list__link--active:not([slot='overflow'] .menu-list__link--active),
  .mega-open:not([slot='overflow']) > .menu-list__link {
    background-color: var(--menu-hover-pill-bg, rgba(0, 0, 0, 0.08));
    color: var(--menu-hover-pill-color, inherit);
  }

  /* Chevron color set explicitly (the injected SVG doesn't reliably pick up the
     link's animated color via currentColor). Same 0.22s curve → stays in sync. */
  .menu-list__list-item:not([slot='overflow']):where(:hover, :focus-within) > .menu-list__link .mega-menu__chevron,
  .menu-list__link--active:not([slot='overflow'] .menu-list__link--active) .mega-menu__chevron,
  .mega-open:not([slot='overflow']) > .menu-list__link .mega-menu__chevron {
    color: var(--menu-hover-pill-color, inherit);
  }

  /* Remove title side padding since the <a> now carries the padding */
  .menu-list__link-title {
    padding-inline: 0;
  }

  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /* Disable the theme's native safety-box bridge (the absolute ::after sized by
     --box-height). This theme navigates via the custom mega menu, which has its
     own hover zones — the native box is unused here and only flickers on hover. */
  .menu-list__link::after {
    display: none !important;
  }

  /* Active/expanded links keep inherited color */
  .menu-list .menu-list__link--active,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: inherit;
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  /* Compact dropdown mode: none of the currently-overflowing items have mega-menu
     content of their own. Falling back to the full-page-width two-column grid
     below leaves a large empty area next to the plain link(s), so instead render
     a small anchored dropdown list — like a normal "more links" menu. */
  .overflow-menu:not(:has([slot='overflow'] .menu-list__submenu))::part(overflow) {
    position: absolute;
    display: block;
    inset-inline: auto 0;
    width: max-content;
    /* Ширина = ширине кнопки «Ещё» (её отдаёт header-menu.js в --cm-more-width).
       Карточка прижата к правому краю меню, и любой лишний пиксель влево — это
       козырёк над соседним пунктом: уводя курсор вверх с него, попадаешь на
       соседа, тот активируется и дропдаун захлопывается. */
    min-width: var(--cm-more-width, 140px);
    /* Отступ от шапки — прозрачной рамкой, а не смещением: визуально зазор
       есть, а поверхность под курсором остаётся непрерывной. Реальный отступ
       оставлял полоску, где не в ховере ни кнопка, ни карточка. */
    top: 100%;
    border-top: var(--padding-2xs) solid transparent;
    background-clip: padding-box;
    padding: var(--padding-xs) 0;
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-md);
    box-shadow: var(--shadow-popover);
    clip-path: none; /* stylelint-disable-line */
  }

  .overflow-menu:not(:has([slot='overflow'] .menu-list__submenu))::part(overflow-list) {
    display: flex;
    flex-direction: column;
    grid-column: unset;
    /* Neutral: the reveal-from-under-header transform/oversized padding below are
       tuned for the full mega-menu panel and would shove this compact list off
       its own card or add huge whitespace around a couple of plain links. */
    transform: none;
    padding-block: var(--padding-2xs);
    padding-inline: 0;
    max-height: none;
  }

  .overflow-menu:not(:has([slot='overflow'] .menu-list__submenu)) .menu-list__link {
    font-size: 1rem;
    padding-block: var(--padding-xs);
    padding-inline: var(--padding-md);
    white-space: nowrap;
  }

  /* Карточку дропдауна (фон + тень) надо показать вместе со списком: базовое
     правило поднимает видимость только у ::part(overflow-list), а сам
     ::part(overflow) оставляет hidden — на экране оставался голый текст
     ссылок на раскрывшейся шапке вместо дропдауна. */
  .overflow-menu:not(:has([slot='overflow'] .menu-list__submenu)):has([slot='overflow'] [aria-expanded='true'])::part(overflow) {
    visibility: visible;
  }

  /* Шеврон кнопки «Ещё» — размеры и анимация как у мега-меню. Правила
     продублированы здесь, а не взяты из mega-menu-config: та секция есть не
     на каждом магазине, и без неё шеврон остался бы неоформленным. */
  .menu-list__more-chevron {
    flex-shrink: 0;
    display: block;
    width: 12px;
    height: 8px;
    opacity: 0.7;
    overflow: visible;
    transform: rotate(0deg);
    transition: transform 0.2s ease, opacity 0.2s ease,
      color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Два отдельных правила, и без :has(). Сгруппированный селектор, у которого
     первая часть была `.overflow-menu:has(...)`, целиком выпадал из собранного
     CSS — шеврон оставался неповёрнутым при открытом дропдауне. Признак:
     базовые стили класса применяются, а hover-правило отсутствует, хотя
     element.matches() по его селектору возвращает true.
     data-overflow-expanded ставит сам header-menu.js при активации. */
  header-menu[data-overflow-expanded='true'] [slot='more'] .menu-list__more-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  [slot='more']:hover .menu-list__more-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
    transform: translateY(4px);
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */
/* START_SNIPPET:cart-bubble (INDEX:203) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--color-primary-button-text));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-bg, var(--color-primary-button-background));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */
/* START_SNIPPET:cart-items-component (INDEX:206) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */
/* START_SNIPPET:favorites-drawer (INDEX:225) */
.fav-drawer__dialog {
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--drawer-width, 95vw);
    max-width: 500px;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    border-radius: 0;
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
    overflow: hidden;
  }

  .fav-drawer__dialog:modal {
    max-height: 100dvh;
  }

  .fav-drawer__dialog::backdrop {
    background: rgb(0 0 0 / 0.4);
  }

  .fav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    border-bottom: 1px solid var(--color-border);
  }

  .fav-drawer__heading {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: var(--cm-text);
  }

  .fav-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 48px;
    background: transparent;
    color: var(--cm-text);
    cursor: pointer;
    flex-shrink: 0;
  }

  .fav-drawer__close svg {
    width: 16px;
    height: 16px;
  }

  .fav-drawer__close svg path {
    stroke: var(--cm-text);
  }

  .fav-drawer__body {
    height: calc(100% - 65px);
    overflow-y: auto;
    padding: 0 32px;
  }

  .fav-drawer__error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--style-border-radius-md, 0.8rem);
    background: var(--cm-surface-warm);
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--cm-text);
  }

  .fav-drawer__error button {
    border: none;
    background: none;
    padding: 0;
    color: var(--cm-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
  }

  /* ── row ── */
  .fav-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .fav-row:last-child {
    border-bottom: none;
  }

  .fav-row__media {
    display: block;
    width: 88px;
    height: 110px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--cm-surface-warm);
  }

  .fav-row__img {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Вписывание + фон только под настоящим фото (тег img) — Theme settings ->
     Favorites -> Drawer image (Image fit / Image background). Фон просвечивает
     сквозь прозрачные PNG. Плейсхолдер "нет фото" — это <span class="cm-ph">,
     у него свой фон из --cm-placeholder-bg; тег-селектор не даёт этому
     правилу его перебить. */
  img.fav-row__img {
    object-fit: var(--cm-fav-image-fit, cover);
    background-color: var(--cm-fav-image-bg, transparent);
  }

  .fav-row__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .fav-row__title {
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: var(--cm-text);
    text-decoration: none;
  }

  .fav-row__prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .fav-row__price {
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 500;
    color: var(--cm-text);
  }

  .fav-row__cmp {
    font-family: var(--font-body--family);
    font-size: 12px;
    color: var(--cm-text-muted);
  }

  .fav-row__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 8px;
    flex-wrap: wrap;
  }

  .fav-row__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: var(--cm-btn-radius, 100px);
    background: var(--cm-primary);
    color: #fff;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .fav-row__btn[disabled] {
    opacity: 0.5;
    cursor: default;
  }

  .fav-row__btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
  }

  .fav-row__btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255 255 255 / 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fav-spin 0.7s linear infinite;
  }

  @keyframes fav-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .fav-row__remove {
    border: none;
    background: none;
    padding: 0;
    color: var(--cm-text-muted);
    font-family: var(--font-body--family);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
  }

  /* ── empty state ── */
  .fav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 0 28px;
  }

  .fav-empty__icon {
    margin-bottom: 24px;
  }

  .fav-empty__icon svg {
    width: 64px;
    height: 64px;
    display: block;
    color: inherit;
  }

  .fav-empty__title {
    margin: 0 0 12px;
    font-family: var(--font-heading--family);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--cm-text);
  }

  .fav-empty__subtitle {
    margin: 0 0 32px;
    max-width: 360px;
    font-family: var(--font-body--family);
    font-size: 16px;
    line-height: 24px;
    color: var(--cm-text-muted);
  }

  .fav-empty__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    border-radius: var(--cm-btn-radius, 100px);
    background: var(--cm-primary);
    color: #fff;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
  }

  @media screen and (max-width: 749px) {
    .fav-drawer__header {
      padding: 20px 16px;
    }

    .fav-drawer__body {
      padding: 0 16px;
    }
  }
/* END_SNIPPET:favorites-drawer */
/* START_SNIPPET:header-actions (INDEX:234) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  /* ===== FAVORITES ===== */

  .header-actions__favorites {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Бейдж-счётчик выходит за края кнопки — не резать (button-unstyled даёт overflow) */
    overflow: visible;
    /* Цвет наследуется от соседних иконок хедера — своя настройка цвета тут
       намеренно не применяется, иначе иконка выпадет из ряда на тёмном хедере. */
    color: var(--color-account-icon, currentColor);
    cursor: pointer;
  }

  .header-actions__favorites svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  /* Тот же размер/позиция/форма, что у бабла корзины (--cart-bubble-size /
     -top / -right на .header-actions__cart-icon) — просто локальные копии
     значений: сердечко и корзина не связаны общим родителем, переменные
     оттуда сюда не докинуть. */
  .header-actions__favorites-count {
    position: absolute;
    top: 4.5px;
    right: 2.5px;
    width: 20px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.2em;
    box-sizing: border-box;
  }

  .header-actions__favorites-count[hidden] {
    display: none;
  }

  .header-actions__favorites-count-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--cm-fav-count-bg, var(--cm-accent-strong));
  }

  .header-actions__favorites-count-text {
    position: relative;
    font-family: var(--font-body--family);
    font-size: var(--font-size--3xs, 10px);
    font-weight: 600;
    line-height: 1;
    color: #fff;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    /* Не full width на мобиле — слева остаётся полоска фона, как у панели фильтров */
    width: var(--drawer-width, 95vw);
    max-width: var(--drawer-max-width, 500px);
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);

    @media screen and (min-width: 750px) {
      width: 500px;
      max-width: 95vw;
    }
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: 0 var(--cart-drawer-summary-padding) var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
  }

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-drawer__heading .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }

  /* ===== EMPTY CART DRAWER ===== */

  .cart-drawer__content--empty-state {
    display: flex;
    flex-direction: column;
    height: calc(100% - 61px);
    overflow-y: auto;
    padding: 0;
  }

  /* В empty state upsell-бенд прижат к низу шторки, как в Figma */
  .cart-drawer__content--empty-state .cart-drawer__upsell-band {
    margin-top: auto;
  }

  .cart-empty-drawer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 32px 28px;
  }

  .cart-empty-drawer__icon {
    margin-bottom: 24px;
  }

  .cart-empty-drawer__icon svg {
    width: 64px;
    height: 64px;
    display: block;
  }

  /* Тема ставит color: #fff на svg в драйвере — принудительно наследуем цвет из настройки */
  .cart-empty-drawer__icon svg {
    color: inherit !important;
  }

  .cart-empty-drawer__icon svg path {
    fill: currentColor !important;
  }

  .cart-empty-drawer__title {
    font-family: var(--font-heading--family, serif);
    /* было 3.6rem = 57.6px (rem-ловушка) — «fontul la titlu prea mare» из ревью */
    font-size: 32px;
    font-weight: 400;
    color: var(--color-text-dark, var(--cm-text));
    margin: 0 0 12px;
    line-height: 1.15;
  }

  .cart-empty-drawer__subtitle {
    font-family: var(--font-body--family, sans-serif);
    font-size: 16px;
    color: var(--color-text-muted, var(--cm-text-muted));
    max-width: 400px;
    line-height: 24px;
    margin: 0 0 32px;
  }

  .cart-empty-drawer__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .cart-empty-drawer__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    border-radius: var(--cm-btn-radius, 100px);
    font-family: var(--font-body--family, sans-serif);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease, background 0.2s ease;
  }

  .cart-empty-drawer__btn--primary {
    background: var(--cm-primary, #356c61);
    color: #fff;
    border: 2px solid var(--cm-primary, #356c61);
  }

  .cart-empty-drawer__btn--primary:hover {
    opacity: 0.88;
  }

  .cart-empty-drawer__btn--secondary {
    background: transparent;
    color: var(--color-text-dark, var(--cm-text));
    /* Цвет рамки задаётся настройкой в <style> ниже (default #D8CDB6) */
    border: 1px solid #d8cdb6;
  }

  .cart-empty-drawer__btn--secondary:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  /* Upsell section */
  .cart-upsell {
    border-top: 1px solid #ebebeb;
    padding: 24px 0 0;
  }

  .cart-upsell__header {
    padding: 0 32px 16px;
  }

  /* NB: в теме 1rem = 16px — размеры задаём в px */
  .cart-upsell__heading {
    font-family: var(--font-body--family, sans-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-dark, var(--cm-text));
  }

  .cart-upsell__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 32px 24px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cart-upsell__track::-webkit-scrollbar {
    display: none;
  }

  .cart-upsell__card {
    flex: 0 0 148px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-snap-align: start;
  }

  /* Фон читается из --cart-image-bg (Theme settings -> Cart -> Image background,
     объявлен в brand-tokens). Пусто = прежний #f5f4f2, вид не меняется. */
  .cart-upsell__image-link {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--cart-image-bg, #f5f4f2);
    box-sizing: border-box;
    padding: var(--cart-image-pad, 0px);
  }

  .cart-upsell__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cart-upsell__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cart-upsell__name {
    font-family: var(--font-body--family, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-dark, var(--cm-text));
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-upsell__price {
    font-family: var(--font-body--family, sans-serif);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted, var(--cm-text-muted));
    margin: 0;
  }

  .cart-upsell__form {
    margin: 0;
  }

  .cart-upsell__atc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    border-radius: var(--cm-btn-radius, 100px);
    white-space: nowrap;
    /* НЕ --color-primary: внутри диалога это цвет текста схемы Shopify (тёмный) */
    background: var(--cm-primary, #356c61);
    color: #fff;
    border: none;
    font-family: var(--font-body--family, sans-serif);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .cart-upsell__atc-btn:hover {
    opacity: 0.88;
  }

  /* Loading state while the AJAX add-to-cart request is in flight */
  .cart-upsell__atc-btn.is-loading {
    position: relative;
    pointer-events: none;
    color: transparent;
  }

  .cart-upsell__atc-btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255 255 255 / 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cart-upsell-spin 0.7s linear infinite;
  }

  @keyframes cart-upsell-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Override — empty drawer header now matches filled state (title left + close right) */
  .cart-drawer--empty .cart-drawer__header {
    justify-content: space-between !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding-bottom: 20px !important;
  }

  /* Override — empty drawer inner: no centering, start from top */
  .cart-drawer--empty .cart-drawer__inner {
    display: block !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  /* Override — prevent centering of content in empty state */
  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: flex-start !important;
  }

  /* ===== CASMANI CART DRAWER REDESIGN ===== */

  /* Global 32px side padding for the entire drawer */
  .cart-drawer__dialog {
    --cart-drawer-padding: var(--padding-xl) 32px !important;
    --cart-drawer-padding-desktop: var(--padding-xl) 32px !important;
  }

  /* Header */
  .cart-drawer__header {
    padding: 20px 32px !important;
    border-bottom: 1px solid var(--color-border) !important;
  }

  .cart-drawer__heading {
    font-family: var(--font-body--family, 'Geist', sans-serif) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: 0px !important;
    color: var(--color-text-dark, var(--cm-text));
  }

  /* Close button — clean × circle */
  .cart-drawer__close-button {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid #ccc !important;
    border-radius: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    flex-shrink: 0;
    color: var(--cm-text) !important;
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    position: static !important;
  }

  .cart-drawer__close-button svg {
    width: 16px !important;
    height: 16px !important;
    --icon-stroke-width: 1.5px;
  }

  .cart-drawer__close-button svg path {
    stroke: var(--cm-text) !important;
  }

  /* Thumbnail */
  .cart-drawer .cart-items__media {
    width: 120px;
  }

  /* 2-column grid: image | details (no separate price column) */
  .cart-drawer .cart-items__table-row,
  .cart-drawer .cart-items__table-row--full-width-variants {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: 120px 1fr !important;
    /* 1fr spacer rows top+bottom center the details column against the image */
    grid-template-rows: 1fr auto auto auto auto 1fr !important;
    column-gap: 16px !important;
    grid-template-areas:
      'media .'
      'media details'
      'media variants'
      'media quantity'
      'media error'
      'media .' !important;
  }

  .cart-drawer .cart-items__table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  /* Hide line total — per-unit price shown instead */
  .cart-drawer .cart-items__price {
    display: none !important;
  }

  /* details via display:contents in full-width-variants mode */
  .cart-drawer .cart-items__details {
    display: contents !important;
  }

  .cart-drawer .cart-items__product-info {
    grid-area: details;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .cart-drawer .cart-items__title-price-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
  }

  .cart-drawer .cart-items__title-wrap {
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  .cart-drawer .cart-items__media-container {
    border-radius: 16px;
    overflow: hidden;
    width: 120px;
    height: 150px;
    aspect-ratio: unset;
  }

  .cart-drawer .cart-items__media-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (max-width: 749px) {
    .cart-drawer .cart-items__media {
      width: 88px;
    }

    .cart-drawer .cart-items__media-container {
      width: 88px;
      height: 110px;
    }

    .cart-drawer .cart-items__table-row,
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-columns: 88px 1fr !important;
    }
  }

  /* Item title */
  .cart-drawer .cart-items__title {
    font-family: var(--font-heading--family, 'Recoleta', serif) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: 0px !important;
    color: var(--color-text-dark, var(--cm-text)) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Per-unit price — shown to the right of the title */
  .cart-drawer .cart-items__unit-price-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .cart-drawer .cart-items__unit-price-wrapper span {
    font-family: var(--font-body--family, 'Geist', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    letter-spacing: 0px !important;
    text-align: right !important;
    color: var(--color-text-dark, var(--cm-text)) !important;
  }

  .cart-drawer .cart-items__unit-price-wrapper .compare-at-price {
    font-family: var(--font-body--family, 'Geist', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0px !important;
    text-align: right !important;
    text-decoration: line-through !important;
    color: var(--color-text-muted, var(--cm-text-muted)) !important;
  }

  /* Variants — "Mov · 43 cm" style */
  .cart-drawer .cart-items__variants-wrapper {
    grid-area: variants;
  }

  .cart-drawer .cart-items__variants {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2px;
  }

  .cart-drawer .cart-items__variant {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--color-text-muted, var(--cm-text-muted));
  }

  .cart-drawer .cart-items__variant:not(:last-child)::after {
    content: ' ·';
    margin-right: 4px;
  }

  .cart-drawer .cart-items__variant dt { display: none; }
  .cart-drawer .cart-items__variant dd { margin: 0; font-size: 13px; }

  /* Quantity + Remove row */
  .cart-drawer .cart-items__quantity {
    margin-block-start: 0.8rem;
    grid-area: quantity;
  }

  .cart-drawer .cart-items__quantity-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  /* Pill-style quantity selector */
  .cart-drawer .quantity-selector {
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
    border: 1.5px solid #d8d4cf !important;
    border-radius: var(--cm-btn-radius, 100px) !important;
    background: transparent !important;
    overflow: hidden !important;
    width: 111px !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  .cart-drawer .quantity-selector .quantity-minus,
  .cart-drawer .quantity-selector .quantity-plus,
  .cart-drawer .quantity-selector [name="minus"],
  .cart-drawer .quantity-selector [name="plus"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--cm-text) !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  /* Mobile: compact 99x36 pill. flex (not width) is what actually sizes it:
     base.css sets flex: 1 1 124px and flex-basis beats width on flex items. */
  @media screen and (max-width: 749px) {
    .cart-drawer .quantity-selector {
      flex: 0 0 99px !important;
      width: 99px !important;
      height: 36px !important;
    }

    .cart-drawer .quantity-selector .quantity-minus,
    .cart-drawer .quantity-selector .quantity-plus,
    .cart-drawer .quantity-selector [name="minus"],
    .cart-drawer .quantity-selector [name="plus"] {
      width: 32px !important;
    }
  }

  .cart-drawer .quantity-selector .quantity-minus svg,
  .cart-drawer .quantity-selector .quantity-plus svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--cm-text) !important;
  }

  .cart-drawer .quantity-selector .quantity-minus svg path,
  .cart-drawer .quantity-selector .quantity-plus svg path {
    stroke: var(--cm-text) !important;
    fill: var(--cm-text) !important;
  }

  .cart-drawer .quantity-selector input[type="number"] {
    flex: 1 !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--color-text-dark, var(--cm-text)) !important;
    width: 30px !important;
    min-width: 0 !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
  }

  .cart-drawer .quantity-selector input[type="number"]::-webkit-inner-spin-button,
  .cart-drawer .quantity-selector input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Remove button — trash icon + "Șterge" text, red */

  .cart-drawer .cart-items__remove {
    color: #F34E4E !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-family: var(--font-body--family, 'Geist', sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0px;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 25%;
    text-decoration-thickness: 7.5%;
  }

  .cart-drawer .cart-items__remove svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
  }

  .cart-drawer .cart-items__remove--text svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
  }

  .cart-drawer .cart-items__remove--text svg path {
    stroke: #F34E4E !important;
  }

  /* Item dividers */
  .cart-drawer__items .cart-items__table-row {
    padding-block: 24px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #ebebeb !important;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none !important;
  }

  /* Items area — no bottom padding bleeding into summary.
     overflow: visible — товары и upsell скроллятся одним потоком
     внутри .cart-drawer__scrollable */
  .cart-drawer__items {
    padding-bottom: 0 !important;
    padding-inline: 0 !important;
    overflow: visible !important;
    flex-shrink: 0;
  }

  /* Контент сам не скроллит — скролл живёт в .cart-drawer__scrollable,
     чтобы затухание scroll-hint рисовалось над заметкой, а не поверх summary.
     Пустое состояние (--empty-state) не трогаем — там скроллится сам контент. */
  .cart-drawer__content:not(.cart-drawer__content--empty-state) {
    overflow: hidden !important;
  }

  .cart-drawer__scrollable {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* Move side padding to the table so rows can go full-width */
  .cart-drawer__items .cart-items__table {
    padding-inline: 32px !important;
  }

  /* Summary area — статичный низ шторки (вне скролл-зоны). 20px sus-jos (замечание 1.3) */
  .cart-drawer__summary {
    position: static !important;
    flex-shrink: 0;
    padding: 20px 32px !important;
    gap: 20px !important;
    mask-image: none !important;
    border-top: 1px solid #ebebeb;
    background-color: var(--color-background) !important;
  }

  /* Subtotal row */
  .cart-drawer__summary .cart-totals__total-label {
    font-family: var(--font-body--family, sans-serif);
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 500;
    color: var(--color-text-dark, var(--cm-text));
  }

  @media screen and (min-width: 750px) {
    .cart-drawer__summary .cart-totals__total-label {
      font-size: 20px !important;
      line-height: 28px !important;
    }
  }

  .cart-drawer__summary .cart-totals__total-value {
    font-family: var(--font-body--family, 'Geist', sans-serif) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: 28px !important;
    letter-spacing: 0px !important;
    color: var(--color-text-dark, var(--cm-text));
  }

  @media screen and (max-width: 749px) {
    .cart-drawer__summary .cart-totals__total-value {
      font-size: 18px !important;
      line-height: 26px !important;
    }
  }

  /* 20px между блоком subtotal-текстов и кнопкой (замечание 1.5).
     border/padding сверху убраны: divider даёт border-top самого summary
     (иначе срабатывает базовое .cart-totals:not(:has(.cart-actions))) */
  .cart-drawer .cart-totals {
    gap: 20px !important;
    border-block-start: none !important;
    padding-block-start: 0 !important;
    margin-block-start: 0 !important;
  }

  /* 12px между "Subtotal" и текстом про налоги (замечание 1.5) */
  .cart-drawer .cart-totals__container {
    row-gap: 12px !important;
  }

  /* Tax note — минимум 14px (замечание 1.4) */
  .cart-drawer__summary .cart-totals__tax-note {
    font-size: 14px;
    color: var(--color-text-muted, var(--cm-text-muted));
    line-height: 1.4;
  }

  .cart-drawer__summary .cart-totals__tax-note small {
    font-size: 14px;
    line-height: 20px;
  }

  /* Checkout button — Casmani green pill */
  .cart-drawer .cart__checkout-button {
    background-color: var(--cm-primary, #356c61) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--cm-btn-radius, 10rem) !important;
    height: 5.6rem !important;
    font-family: var(--font-body--family, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0;
  }

  .cart-drawer .cart__checkout-button:hover {
    opacity: 0.88;
  }

  /* Тема красит svg в драйвере в белый — стрелке нужен явный цвет текста */
  .cart-drawer .cart-drawer__view-cart-link svg,
  .cart-drawer .cart-drawer__view-cart-link svg path {
    stroke: currentColor !important;
    color: inherit !important;
    flex-shrink: 0;
  }

  /* "View cart" link below checkout */
  .cart-drawer .cart-drawer__view-cart-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--font-body--family, sans-serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-text-dark, var(--cm-text));
    text-decoration: none;
    margin-top: 0;
  }

  .cart-drawer .cart-drawer__view-cart-link:hover {
    text-decoration: underline;
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: none !important;
    padding-block-start: 0 !important;
  }

  /* Note accordion in drawer */
  .cart-drawer__summary .cart-actions {
    border-color: #ebebeb;
  }

  /* Hide discount block in drawer */
  .cart-drawer .cart-discount {
    display: none !important;
  }

  /* Hide the external note header (title/subtitle shown inside accordion instead) */
  .cart-drawer .cart-page-note-header {
    display: none !important;
  }

  /* Note section — всегда видна, приклеена в sticky-футере шторки над Subtotal.
     Контент раскрывается ВНИЗ от строки-заголовка (между ней и Subtotal).
     Отрицательные маргины растягивают строку на всю ширину summary
     (divider сверху даёт border-top самого summary) */
  .cart-drawer__note-section {
    width: calc(100% + 64px);
    margin: -20px -32px 0;
    padding-inline: 32px;
    border-bottom: 1px solid #ebebeb;
  }

  /* Cart note accordion — header on top, content opens below */
  .cart-drawer .cart-note .details {
    display: flex !important;
    flex-direction: column !important;
  }

  .cart-drawer .cart-note__summary {
    border: none;
    padding-inline: 0;
    padding-block: 16px !important;
    min-height: unset;
    cursor: pointer;
  }

  .cart-drawer .cart-note__label {
    font-family: var(--font-body--family, 'Geist', sans-serif) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--color-text-dark, var(--cm-text)) !important;
  }

  .cart-drawer .cart-note__summary .cart-totals__icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    color: var(--color-text-dark, var(--cm-text)) !important;
  }

  .cart-drawer .cart-note__summary .cart-totals__icon svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--color-text-dark, var(--cm-text)) !important;
  }

  .cart-drawer .cart-note__summary .cart-totals__icon svg path {
    stroke: var(--color-text-dark, var(--cm-text)) !important;
  }

  .cart-drawer .cart-note .details[open] .cart-totals__icon path.vertical {
    display: none !important;
  }

  .cart-drawer .cart-note .cart-totals__icon svg {
    transition: transform 0.2s ease;
  }

  .cart-drawer .cart-note .details[open] .cart-totals__icon svg {
    transform: rotate(180deg);
  }

  .cart-drawer .cart-note__inner {
    padding-block: 0 16px;
  }

  .cart-drawer-note__subtitle {
    font-family: var(--font-body--family, 'Geist', sans-serif);
    font-size: 16px;
    color: var(--color-text-muted, var(--cm-text-muted));
    margin: 0 0 16px;
    line-height: 1.5;
  }

  .cart-drawer .cart-note__instructions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    min-height: 90px;
    font-family: var(--font-body--family, 'Geist', sans-serif);
    font-size: 14px;
    color: var(--color-text-muted, var(--cm-text-muted));
    padding: 12px 14px;
  }

  /* ===== Upsell "S-ar putea să-ți placă" в заполненном драйвере (замечание 1.9) ===== */

  .cart-drawer__upsell-band {
    flex-shrink: 0;
    background: var(--cm-surface-warm, #f1f1ef);
    padding: 20px 32px;
  }

  .cart-drawer__upsell-band .cart-upsell {
    border-top: none;
    padding: 0;
  }

  .cart-drawer__upsell-band .cart-upsell__header {
    padding: 0 0 16px;
  }

  .cart-drawer__upsell-band .cart-upsell__heading {
    font-size: 18px;
    font-weight: 500;
  }

  .cart-drawer__upsell-band .cart-upsell__track {
    padding: 0;
  }

  /* В вертикальной карточке (empty state) обёртка body прозрачна для layout */
  .cart-upsell__body {
    display: contents;
  }

  .cart-upsell__card--wide {
    flex: 0 0 calc(100% - 48px);
    flex-direction: row;
    /* stretch: фото тянется на всю высоту карточки, как в Figma */
    align-items: stretch;
    gap: 16px;
    background: #fff;
    border-radius: 16px;
    padding: 8px;
    box-sizing: border-box;
  }

  .cart-upsell__card--wide .cart-upsell__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding: 6px 8px 6px 0;
  }

  .cart-upsell__card--wide .cart-upsell__image-link {
    flex: 0 0 86px;
    width: 86px;
    height: auto;
    min-height: 100px;
    align-self: stretch;
    aspect-ratio: auto;
    border-radius: 12px;
  }

  .cart-upsell__card--wide .cart-upsell__info {
    width: 100%;
    text-align: left;
  }

  .cart-upsell__card--wide .cart-upsell__name {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
  }

  .cart-upsell__card--wide .cart-upsell__price {
    font-size: 14px;
    line-height: 20px;
  }

  .cart-upsell__card--wide .cart-upsell__form {
    margin-top: 4px;
  }

  .cart-upsell__card--wide .cart-upsell__atc-btn {
    width: auto;
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
  }

  .cart-upsell__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-top: 12px;
  }

  .cart-upsell__dots[hidden] {
    display: none;
  }

  .cart-upsell__dot {
    width: 6px;
    height: 6px;
    border-radius: 100px;
    border: none;
    padding: 0;
    background: var(--cm-border-strong, #d0d0d0);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
  }

  /* Активная точка — вытянутая тёмная пилюля, как в Figma */
  .cart-upsell__dot.is-active {
    width: 18px;
    background: var(--cm-text, #2c2722);
  }

  .cart-free-shipping {
    padding: 12px 32px 16px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    background-color: var(--color-background);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .cart-free-shipping__text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-body--family, 'Geist', sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0px;
    color: var(--color-text-dark, var(--cm-text));
    margin-bottom: 0.8rem;
  }

  .cart-free-shipping__text strong {
    font-weight: 600;
  }

  .cart-free-shipping__amounts {
    font-family: var(--font-body--family, 'Geist', sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: right;
    color: var(--color-text-muted, var(--cm-text-muted));
    white-space: nowrap;
    margin-left: 0.8rem;
  }

  .cart-free-shipping__track {
    width: 100%;
    height: 8px;
    background: #e5e3df;
    border-radius: 16px;
    overflow: hidden;
  }

  .cart-free-shipping__fill {
    height: 100%;
    border-radius: 16px;
    transition: width 0.4s ease;
  }

  /* ===== MOBILE: 16px side padding throughout the drawer ===== */
  @media screen and (max-width: 749px) {
    .cart-drawer__dialog {
      --cart-drawer-padding: var(--padding-xl) 16px !important;
      --cart-drawer-padding-desktop: var(--padding-xl) 16px !important;
    }

    .cart-drawer__header {
      padding: 20px 16px !important;
    }

    .cart-empty-drawer {
      padding: 56px 16px 28px;
    }

    .cart-upsell__header {
      padding: 0 16px 16px;
    }

    .cart-upsell__track {
      padding: 0 16px 24px;
    }

    .cart-drawer__items .cart-items__table {
      padding-inline: 16px !important;
    }

    .cart-drawer__summary {
      padding: 20px 16px !important;
    }

    .cart-drawer__note-section {
      width: calc(100% + 32px);
      margin: -20px -16px 0;
      padding-inline: 16px;
    }

    .cart-drawer__upsell-band {
      padding: 20px 16px;
    }

    .cart-free-shipping {
      padding: 12px 16px 16px;
    }

    .cart-drawer .cart-note__label,
    .cart-drawer__summary .cart-note__label {
      font-size: 16px !important;
    }
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:header-drawer (INDEX:236) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: 20px;
    height: 20px;
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: 100%;
    max-width: 100%;
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: none;
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
      max-width: 25rem;
      border-right: var(--style-border-drawer);
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }

  /* Hide featured products/collections at the bottom of the main drawer */
  .menu-drawer > .menu-drawer__featured-content {
    display: none;
  }

  /* ── Casmani mobile drawer header ── */
  .menu-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    /* Override: header section → Colors → "Mobile drawer header background" */
    background-color: var(--menu-drawer-header-bg, var(--cm-primary));
    flex-shrink: 0;
  }

  .menu-drawer__logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  .menu-drawer__logo-img {
    height: 44px;
    width: auto;
    display: block;
  }

  .menu-drawer__logo-text {
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
  }

  .menu-drawer__header-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--drawer-close-bg, rgba(255, 255, 255, 0.18));
    color: var(--drawer-close-color, #fff);
    padding: 0;
    border: none;
    flex-shrink: 0;
  }

  .menu-drawer__header-close svg {
    width: 20px;
    height: 20px;
  }

  /* Hide the old standalone close button — we replaced it with the header one */
  .menu-drawer > .close-button:not(.menu-drawer__header-close) {
    display: none;
  }

  /* ── Menu items ── */
  .menu-drawer__menu.has-submenu {
    padding-inline: 0;
    padding-block-start: 16px;
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat.has-mobile-submenu {
    margin-block-end: 0;
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    min-height: unset;
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }

  .menu-drawer__menu > .menu-drawer__list-item:first-child {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }

  .menu-drawer__menu-item--mainlist {
    min-height: unset;
    padding: 12px 16px;
    font-family: var(--font-body--family);
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .menu-drawer__menu-item--mainlist .svg-wrapper {
    padding: 0;
    width: 20px;
    height: 20px;
    opacity: 0.45;
  }

  .menu-drawer__menu-item--mainlist .svg-wrapper svg {
    width: 20px;
    height: 20px;
  }

  /* ── Casmani: account button + language pills at bottom ── */
  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-block: auto 0;
    padding: 20px 16px 28px;
    background: none;
  }

  .menu-drawer__account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    padding: 0 20px;
    border-radius: var(--cm-btn-radius, 50px);
    background-color: var(--cm-primary);
    color: #fff;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
  }

  .menu-drawer__account-btn:hover {
    color: #fff;
  }

  .menu-drawer__account-btn .svg-wrapper {
    display: inline-flex;
    width: 20px;
    height: 20px;
    padding: 0;
  }

  .menu-drawer__account-btn .svg-wrapper svg {
    width: 20px;
    height: 20px;
    color: #fff;
  }

  .menu-drawer__lang-switcher {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .menu-drawer__lang-switcher form {
    display: flex;
    margin: 0;
  }

  .menu-drawer__lang-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 38px;
    padding: 0 12px;
    border: none;
    background: none;
    border-radius: 50px;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: rgb(var(--color-foreground-rgb));
    opacity: 0.5;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, background-color 0.15s;
  }

  .menu-drawer__lang-item:hover {
    opacity: 0.8;
  }

  .menu-drawer__lang-item--active {
    background-color: rgba(53, 108, 97, 0.12);
    color: var(--cm-primary);
    opacity: 1;
  }
/* END_SNIPPET:header-drawer */
/* START_SNIPPET:predictive-search-styles (INDEX:261) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:269) */
/* ── Избранное в углу галереи (зеркалит .cm-card__fav карточки товара) ── */
  .product-gallery__fav {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    background: var(--cm-fav-btn-bg, #fff);
    color: var(--cm-fav-color, var(--cm-text));
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
    transition: color 0.15s ease, transform 0.15s ease;
  }

  .product-gallery__fav svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  .product-gallery__fav:hover {
    transform: scale(1.05);
  }

  .product-gallery__fav.is-active {
    color: var(--cm-fav-active, var(--cm-accent-strong));
  }

  .product-gallery__fav.is-active svg path {
    fill: currentColor;
    stroke: currentColor;
  }

  /* Ветка «у товара нет медиа» — свой div, ему position нужен явно. */
  .product-media-gallery__no-media {
    position: relative;
  }

  @media screen and (max-width: 749px) {
    .product-gallery__fav {
      top: 8px;
      right: 8px;
      width: 34px;
      height: 34px;
    }

    .product-gallery__fav svg {
      width: 18px;
      height: 18px;
    }
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */
/* START_SNIPPET:quick-add-modal-styles (INDEX:274) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:search-modal (INDEX:283) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    /* Brand pill — same look as the card ATC buttons across the site */
    --button-background-color: var(--cm-primary);
    --button-color: #fff;

    margin: auto;
    height: 48px;
    padding: 13px 24px;
    border: none;
    border-radius: var(--cm-btn-radius, 100px);
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 500;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      --button-background-color: var(--cm-primary-alt);

      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */
/* START_SNIPPET:search (INDEX:284) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */
/* START_SNIPPET:skip-to-content-link (INDEX:287) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */
/* START_SNIPPET:slideshow-styles (INDEX:293) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */