/** Shopify CDN: Minification failed

Line 2565:19 Unexpected "{"
Line 2565: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:features-list (INDEX:21) */
.features-list {
    background-color: var(--fl-bg);
    padding-block: var(--fl-pv);
  }

  .features-list__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--fl-cols, 4), 1fr);
    gap: 0;
  }

  .features-list__item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 40px;
    align-items: var(--fl-align, flex-start);
    text-align: var(--fl-text-align, start);
  }

  .features-list__item:first-child {
    padding-inline-start: 0;
  }

  .features-list__item:last-child {
    padding-inline-end: 0;
  }

  .features-list__item + .features-list__item {
    border-inline-start: 1px solid var(--fl-divider);
  }

  .features-list__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-color: var(--fl-icon-bg);
    flex-shrink: 0;
    padding: 8px;
    gap: 8px;
  }

  .features-list__icon-wrap img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .features-list__heading {
    margin: 16px 0 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--fl-heading);
    font-family: var(--font-heading--family);
  }

  .features-list__text {
    margin: 12px 0 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--fl-text);
    font-family: var(--font-body--family);
  }

  /* Tablet: 2 columns */
  @media screen and (max-width: 989px) and (min-width: 750px) {
    .features-list__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .features-list__item {
      padding: 24px 32px;
    }

    .features-list__item:first-child {
      padding-inline-start: 32px;
    }

    .features-list__item:last-child {
      padding-inline-end: 32px;
    }

    .features-list__item:nth-child(2n+1) {
      border-inline-start: none;
      padding-inline-start: 0;
    }

    .features-list__item:nth-child(n+3) {
      border-block-start: 1px solid var(--fl-divider);
    }
  }

  /* Mobile: 1 column */
  @media screen and (max-width: 749px) {
    .features-list {
      padding-block: var(--fl-pv-mobile);
    }

    .features-list__grid {
      grid-template-columns: 1fr;
    }

    .features-list__item {
      padding: 20px 0;
    }

    .features-list__item + .features-list__item {
      border-inline-start: none;
      border-block-start: 1px solid var(--fl-divider);
    }
  }
/* END_SECTION:features-list */
/* 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_SECTION:product-information (INDEX:61) */
/* ── Full-width sticky bar ── */
  .sticky-add-to-cart__bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(100%);
    z-index: calc(var(--layer-sticky) - 1);
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
    box-sizing: border-box;
    height: 80px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;

    @starting-style {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  /* Inner max-width wrapper so content doesn't stretch ultra-wide */
  .sticky-add-to-cart__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateY(0);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateY(100%);
    display: none;
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: 52px;
    overflow: hidden;
    border-radius: var(--style-border-radius-sm);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0;
  }

  .sticky-add-to-cart__title {
    font-family: var(--font-heading--family);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    /* Ревью дизайнера (3.25): весь текст слева — medium */
    font-weight: 500;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-dark, var(--cm-text));
  }

  .sticky-add-to-cart__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 0;
    margin-top: 2px;
  }

  .sticky-add-to-cart__variant {
    color: var(--color-text-muted, var(--cm-text-muted));
    font-size: var(--font-paragraph-small--size);
    font-weight: 500;
  }

  .sticky-add-to-cart__price {
    font-weight: 500;
    font-size: var(--font-paragraph-medium--size);
    white-space: nowrap;
  }

  /* Chosen color wins over the price snippet's own colors (sale/compare-at) */
  .sticky-add-to-cart__price,
  .sticky-add-to-cart__price * {
    color: var(--sticky-price-color, var(--cm-text));
  }

  /* Quantity selector inside the sticky bar */
  .sticky-add-to-cart__qty {
    flex-shrink: 0;
  }

  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__qty {
      display: none;
    }
  }

  .sticky-add-to-cart__qty .quantity-selector-wrapper {
    flex-wrap: nowrap;
  }

  .sticky-add-to-cart__qty .price-per-item {
    display: none;
  }

  .sticky-add-to-cart__qty quantity-selector-component {
    display: inline-flex;
    align-items: center;
    height: var(--height-buy-buttons);
    border: 1px solid var(--cm-border-strong, #d0d0d0);
    border-radius: var(--cm-btn-radius, 64px);
    background: #fff;
    padding-inline: 16px;
    gap: 12px;
    box-sizing: border-box;
  }

  .sticky-add-to-cart__qty .quantity-minus,
  .sticky-add-to-cart__qty .quantity-plus {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: var(--cm-text);
  }

  .sticky-add-to-cart__qty .quantity-selector input[type='number'] {
    width: 22px;
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    color: var(--cm-text);
    -moz-appearance: textfield;
    padding: 0;
  }

  .sticky-add-to-cart__qty .quantity-selector input[type='number']::-webkit-outer-spin-button,
  .sticky-add-to-cart__qty .quantity-selector input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .sticky-add-to-cart__qty .quantity-selector input[type='number']:focus {
    outline: none;
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
    flex-shrink: 0;
    border-radius: var(--cm-btn-radius, 48px);
    background-color: var(--sticky-btn-bg, var(--cm-primary)) !important;
    color: var(--sticky-btn-text, #ffffff) !important;
    border-color: var(--sticky-btn-bg, var(--cm-primary)) !important;
  }

  .sticky-add-to-cart__button svg path,
  .sticky-add-to-cart__button svg rect,
  .sticky-add-to-cart__button svg circle,
  .sticky-add-to-cart__button svg line {
    fill: none;
    stroke: var(--sticky-btn-text, #ffffff);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      padding: 16px;
      gap: 12px;
    }

    .sticky-add-to-cart__inner {
      gap: 12px;
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    /* Free up room for the quantity selector */
    .sticky-add-to-cart__image {
      display: none;
    }

    .sticky-add-to-cart__qty quantity-selector-component {
      padding-inline: 12px;
      gap: 8px;
    }
  }

  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar .compare-at-price {
      display: none;
    }

    /* Too tight for the quantity selector — fall back to (N) in the button */
    .sticky-add-to-cart__qty {
      display: none;
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title,
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* Mobile: drop the section's top padding (the spacing setting still applies on desktop) */
  @media screen and (max-width: 749px) {
    .product-information.spacing-style {
      padding-block-start: 0;
    }
  }
/* END_SECTION:product-information */
/* START_SECTION:product-recommendations (INDEX:63) */
/* Quick add: full-width bottom bar */
  .product-recommendations .quick-add__button {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 48px !important;
    border-radius: 0 0 16px 16px !important;
    background: var(--pr-quickadd-bg, var(--color-primary, var(--cm-primary))) !important;
    color: var(--pr-quickadd-color, #fff) !important;
    border: none !important;
    justify-content: center !important;
    backdrop-filter: none !important;
    gap: 8px;
  }

  .product-recommendations .quick-add__button .add-to-cart-icon {
    color: var(--pr-quickadd-color, #fff);
    width: 24px !important;
    fill: var(--pr-quickadd-color, #fff);
  }

  .product-recommendations .quick-add__button .svg-wrapper svg {
    color: var(--pr-quickadd-color, #fff);
    fill: var(--pr-quickadd-color, #fff);
  }

  .product-recommendations .quick-add__button .add-to-cart-text {
    background: transparent !important;
    color: var(--pr-quickadd-color, #fff);
    border-radius: 0 0 16px 16px !important;
    justify-content: center;
  }

  .product-recommendations .quick-add__button .add-to-cart-text__content {
    grid-template-columns: 1fr !important;
  }

  .product-recommendations .quick-add__button .add-to-cart-text__content span span {
    color: var(--pr-quickadd-color, #fff);
    opacity: 1 !important;
    translate: 0 0 !important;
    filter: blur(0) !important;
  }

  /* Price: brand green by default, overridable per section */
  .product-recommendations .price-item--sale,
  .product-recommendations .price__regular .price {
    color: var(--pr-price, var(--color-primary, var(--cm-primary))) !important;
  }

  .product-recommendations .compare-at-price {
    color: var(--color-text-muted, var(--cm-text-muted));
  }

  /* See all button */
  .product-recommendations__see-all {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }

  .product-recommendations__see-all a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: var(--cm-btn-radius, 100px);
    /* Ревью дизайнера (3.30): stroke #D8CDB6 (цвета нет в палитре --cm-*, уточнить), текст medium 16px */
    border: 1px solid #d8cdb6;
    background: transparent;
    color: var(--color-text-dark, var(--cm-text));
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
  }

  .product-recommendations__see-all a:hover {
    background: var(--color-text-dark, var(--cm-text));
    color: #fff;
  }

  /* Ревью дизайнера (3.28, 3.30): на мобиле заголовок 32/40, кнопка full width */
  @media screen and (max-width: 749px) {
    .product-recommendations .section-resource-list__content :is(h1, h2, h3, h4) {
      font-size: 32px;
      line-height: 40px;
    }

    .product-recommendations__see-all a {
      width: 100%;
    }
  }
/* END_SECTION:product-recommendations */
/* START_SECTION:promo-banner (INDEX:65) */
.promo-banner {
    margin-top: var(--section-mt-mobile);
    margin-bottom: var(--section-mb-mobile);
  }

  .promo-banner__card {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--promo-bg);
    border: var(--promo-border-w-mobile) solid var(--promo-border-color);
    border-radius: var(--promo-radius);
    overflow: hidden;
  }

  @media screen and (max-width: 749px) {
    .promo-banner--mobile-bleed .promo-banner__card {
      margin-inline: calc(50% - 50vw);
      border-radius: 0;
      /* Edge-to-edge: side borders would sit flush with the screen edge, keep only top/bottom. */
      border-inline-width: 0;
    }
  }

  .promo-banner__media {
    grid-column: 1;
    grid-row: 1;
  }

  .promo-banner__img {
    display: block;
    width: 100%;
    height: var(--promo-image-height-mobile);
    object-fit: cover;
  }

  .promo-banner__img--desktop {
    display: none;
  }

  .promo-banner__panel {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: var(--promo-padding-mobile);
  }

  .promo-banner__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .promo-banner__eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--promo-eyebrow-color);
    font-family: var(--font-body--family);
  }

  .promo-banner__heading {
    margin: 0;
    font-size: var(--promo-heading-size-mobile);
    line-height: 1.15;
    font-weight: 400;
    color: var(--promo-heading-color);
    font-family: var(--font-heading--family);
  }

  .promo-banner__body {
    margin: 0;
    font-size: var(--promo-body-size-mobile);
    line-height: 1.6;
    color: var(--promo-body-color);
    font-family: var(--font-body--family);
  }

  .promo-banner__divider {
    display: none;
  }

  .promo-banner__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .promo-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 14px 24px;
    border-radius: var(--cm-btn-radius, 999px);
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
  }

  .promo-banner__btn:hover {
    opacity: 0.85;
  }

  .promo-banner__btn--primary {
    background: var(--promo-btn-bg);
    color: var(--promo-btn-color);
  }

  .promo-banner__btn--secondary {
    background: transparent;
    color: var(--promo-btn2-color);
    border: 1px solid var(--promo-btn2-border);
  }

  @media screen and (min-width: 750px) {
    .promo-banner {
      margin-top: var(--section-mt);
      margin-bottom: var(--section-mb);
    }

    .promo-banner__card {
      grid-template-columns: var(--promo-image-width) 1fr;
      grid-template-rows: 1fr;
      border-width: var(--promo-border-w);
    }

    .promo-banner__media {
      grid-column: 1;
      grid-row: 1;
    }

    .promo-banner__img {
      height: 100%;
      min-height: var(--promo-image-height);
    }

    .promo-banner__img--desktop {
      display: block;
    }

    .promo-banner__img--mobile {
      display: none;
    }

    .promo-banner__panel {
      grid-column: 2;
      grid-row: 1;
      flex-direction: row;
      align-items: center;
      gap: var(--promo-padding);
      padding: var(--promo-padding);
    }

    .promo-banner__content {
      flex: 1;
    }

    .promo-banner__heading {
      font-size: var(--promo-heading-size);
    }

    .promo-banner__body {
      font-size: var(--promo-body-size);
    }

    .promo-banner__divider {
      display: block;
      align-self: stretch;
      flex-shrink: 0;
      width: 1px;
      background: var(--promo-divider-color);
      /* Cancels the panel's own padding so the line reaches the banner's true top/bottom edges. */
      margin-block: calc(-1 * var(--promo-padding));
    }

    .promo-banner__actions {
      flex-direction: column;
      align-items: stretch;
      min-width: 200px;
    }
  }
/* END_SECTION:promo-banner */
/* 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_BLOCK:_product-details (INDEX:127) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }

    /* Top divider with the padding sitting inside (below the border), 24px */
    .product-details {
      border-top: 1px solid var(--cm-border);
    }

    .product-details > .group-block {
      padding-block-start: 24px;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */
/* START_BLOCK:price (INDEX:168) */
product-price .price {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: 26px;
    line-height: 34px;
    letter-spacing: 0px;
    color: var(--price-color, var(--color-foreground));
  }

  /* Ревью дизайнера: цена продукта на мобиле 24px */
  @media screen and (max-width: 749px) {
    product-price .price {
      font-size: 24px;
      line-height: 32px;
    }
  }
/* END_BLOCK:price */
/* START_BLOCK:product-code (INDEX:170) */
.product-code {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em;
    font-family: var(--font-body--family);
    line-height: 1.4;
  }

  .product-code__label {
    color: var(--pc-label, var(--cm-text-muted));
    font-weight: var(--pc-label-weight, 400);
  }

  .product-code__value {
    color: var(--pc-code, var(--cm-text));
    font-weight: var(--pc-code-weight, 600);
  }
/* END_BLOCK:product-code */
/* START_BLOCK:product-eyebrow (INDEX:174) */
.product-eyebrow {
    font-family: var(--font-body--family);
    font-size: var(--eyebrow-size-mobile, 12px);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.4;
  }

  @media screen and (min-width: 750px) {
    .product-eyebrow {
      font-size: var(--eyebrow-size-desktop, 14px);
    }
  }
/* END_BLOCK:product-eyebrow */
/* START_BLOCK:product-installments (INDEX:175) */
.pi-block {
    display: block;
  }

  .pi-text {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--pi-size, 15px);
    line-height: 1.5;
    color: var(--pi-color, var(--cm-text-muted));
  }

  .pi-text .pi-amount,
  .pi-text .pi-rates,
  .pi-text strong,
  .pi-text b {
    font-weight: 600;
    color: var(--pi-strong, var(--cm-text));
  }

  @media screen and (max-width: 749px) {
    .pi-text {
      font-size: var(--pi-size-m, var(--pi-size, 15px));
    }
  }
/* END_BLOCK:product-installments */
/* START_BLOCK:product-inventory (INDEX:176) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  /* Ревью дизайнера (3.10): «În stoc» — medium */
  .product-inventory__text {
    font-weight: 500;
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__extra {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-xs);
  }

  .product-inventory__sep {
    opacity: 0.6;
  }
/* END_BLOCK:product-inventory */
/* START_BLOCK:product-store-pickup (INDEX:178) */
.product-pickup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-body--family);
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
  }

  .product-pickup__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--pickup-icon, var(--cm-primary));
  }

  .product-pickup__icon svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  .product-pickup__text {
    color: var(--pickup-text, var(--cm-text-muted));
  }

  .product-pickup__link {
    color: var(--pickup-link, var(--cm-text));
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
  }

  .product-pickup__link:hover {
    opacity: 0.75;
  }
/* END_BLOCK:product-store-pickup */
/* START_BLOCK:product-stories (INDEX:179) */
.ps-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

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

  .ps-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ps-list::-webkit-scrollbar { display: none; }

  .ps-item {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1.5px solid var(--ps-ring, #d0d0d0);
    padding: 4px;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .ps-item:hover { transform: scale(1.06); }

  .ps-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
  }

  .ps-item--placeholder .ps-item__img { background: #d4cfc8; }

  .ps-item__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ps-item__play-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ps-play, #141414);
  }

  .ps-item__play-btn svg {
    margin-left: 1px;
  }

  .ps-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ps-modal[hidden] { display: none; }

  .ps-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
  }

  .ps-modal__wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
    max-width: 90vw;
    max-height: 90dvh;
  }

  .ps-modal__close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
  }

  .ps-modal__close:hover { background: rgba(255, 255, 255, 0.22); }

  .ps-modal__stage {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .ps-modal__media {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 80vw;
    max-height: 75dvh;
  }

  .ps-modal__image,
  .ps-modal__video {
    max-width: 80vw;
    max-height: 75dvh;
    object-fit: contain;
    border-radius: 12px;
    display: block;
  }

  .ps-modal__arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
  }

  .ps-modal__arrow:hover { background: rgba(255, 255, 255, 0.22); }
  .ps-modal__arrow[hidden] { visibility: hidden; }

  .ps-modal__dots {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .ps-modal__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.35);
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }

  .ps-modal__dot--active {
    background: white;
    transform: scale(1.3);
  }

  @media screen and (max-width: 749px) {
    .ps-item { width: 72px; height: 72px; }
  }
/* END_BLOCK:product-stories */
/* START_BLOCK:product-trust-badges (INDEX:181) */
.ptb-block {
    --ptb-pad-x: 16px;
    border: 1px solid var(--ptb-border-color, #e8e4df);
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
  }

  .ptb-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px var(--ptb-pad-x);
  }

  /* Divider between rows — inset to the inner padding, not edge-to-edge of the frame */
  .ptb-row + .ptb-row {
    position: relative;
  }

  .ptb-row + .ptb-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--ptb-pad-x);
    right: var(--ptb-pad-x);
    height: 1px;
    background: var(--ptb-divider-color, #f0ede9);
  }

  .ptb-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
  }

  .ptb-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .ptb-icon svg {
    width: 24px;
    height: 24px;
  }

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

  .ptb-title {
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: var(--cm-text);
    margin: 0;
  }

  .ptb-desc {
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: var(--cm-text-muted);
    margin: 0;
  }

  .ptb-desc a {
    color: var(--cm-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
/* END_BLOCK:product-trust-badges */
/* START_BLOCK:product-upsell (INDEX:182) */
.pup-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pup-heading {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--pup-heading-size, 28px);
    line-height: 1.2;
    color: var(--cm-text);
    margin: 0;
  }

  .pup-scroll-wrap { overflow: hidden; }

  .pup-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .pup-track::-webkit-scrollbar { display: none; }

  /* One product per view; the next card peeks on the right */
  .pup-card {
    flex-shrink: 0;
    width: 88%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 16px;
    background: var(--pup-card-bg, transparent);
  }

  .pup-card__img-wrap {
    display: block;
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pup-img-bg, var(--cm-surface-warm));
    text-decoration: none;
  }

  .pup-card__img {
    width: 100%;
    height: 100%;
    object-fit: var(--pup-img-fit, cover);
    display: block;
    transition: transform 0.3s ease;
  }

  .pup-card__img-wrap:hover .pup-card__img { transform: scale(1.04); }

  /* Colour + overlay come from snippet 'product-placeholder' (.cm-ph). */
  .pup-card__img-placeholder {
    width: 100%;
    height: 100%;
  }

  .pup-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pup-card__title {
    font-family: var(--font-body--family);
    font-size: 14px;
    /* Ревью дизайнера (3.15): semibold */
    font-weight: 600;
    line-height: 18px;
    color: var(--pup-title-color, var(--cm-text));
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pup-card__price {
    font-family: var(--font-body--family);
    font-size: 14px;
    /* Ревью дизайнера (3.16): medium, зелёный бренда */
    font-weight: 500;
    color: var(--cm-primary, #356c61);
    margin: 0 0 4px;
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
  }

  .pup-card__price--sale { color: var(--cm-accent-strong); }

  .pup-card__price--compare {
    font-size: 12px;
    font-weight: 400;
    color: var(--cm-text-light);
    text-decoration: line-through;
  }

  .pup-card__atc {
    align-self: flex-start;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: 36px;
    border-radius: var(--cm-btn-radius, 100px);
    border: none;
    font-family: var(--font-body--family);
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 16px;
    transition: opacity 0.2s;
    white-space: nowrap;
  }

  .pup-card__atc:hover { opacity: 0.9; }
  .pup-card__atc:disabled { cursor: default; }

  /* Loading / done states — icon+text hidden, spinner or check shown */
  .pup-card__atc-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pup-atc-spin 0.6s linear infinite;
  }

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

  .pup-card__atc-check { display: none; }

  .pup-card__atc.is-loading .pup-card__atc-icon,
  .pup-card__atc.is-loading .pup-card__atc-text,
  .pup-card__atc.is-done .pup-card__atc-icon,
  .pup-card__atc.is-done .pup-card__atc-text {
    display: none;
  }

  .pup-card__atc.is-loading .pup-card__atc-spinner { display: inline-block; }
  .pup-card__atc.is-done .pup-card__atc-check { display: inline-flex; }

  .pup-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: 6px;
  }

  .pup-dot {
    width: 6px;
    height: 6px;
    border-radius: 100px;
    border: none;
    background: var(--cm-border-strong);
    padding: 0;
    cursor: pointer;
    transition: width 0.3s cubic-bezier(0.65, 0, 0.35, 1), background 0.25s ease;
  }

  .pup-dot--active { width: 16px; background: var(--cm-text); }

  @media screen and (max-width: 749px) {
    .pup-card { width: 90%; }
    .pup-heading { font-size: var(--pup-heading-size-mobile, 22px); }
  }
/* END_BLOCK:product-upsell */
/* START_SNIPPET:background-media (INDEX:194) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:buy-buttons-styles (INDEX:201) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  /* Избранное на странице товара — текстовая кнопка во всю ширину под ATC */
  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
     where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */
/* 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:group (INDEX:233) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */
/* 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-badges-styles (INDEX:264) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */
/* START_SNIPPET:product-information-content (INDEX:268) */
/* Variant button sizing — use !important to beat base.css flex/min-height */
  .product-information .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
    height: 28px !important;
    min-height: 28px !important;
    flex: 0 0 auto !important;
    padding-block: 6px !important;
    padding-inline: 10px !important;
    border-radius: var(--cm-btn-radius, 32px) !important;
    gap: 4px !important;
    font-size: 0.875rem;
  }

  /* ::before fake-border inherits border-radius from parent — force it too */
  .product-information .variant-option__button-label:not(.variant-option__button-label--has-swatch)::before,
  .product-information .variant-option__button-label:not(.variant-option__button-label--has-swatch)::after {
    border-radius: var(--cm-btn-radius, 32px) !important;
  }

  .product-information .variant-option--buttons,
  .product-information .variant-option--equal-width-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: unset !important;
    gap: 4px;
    --options-border-width: 1.5px;
    --options-border-radius: var(--cm-btn-radius, 32px);
  }

  /* Override selected variant pill color — driven by section settings via inline vars */
  .product-information .variant-picker {
    --color-selected-variant-background: var(--pi-variant-active-bg, var(--cm-primary));
    --color-selected-variant-border: var(--pi-variant-active-border, var(--cm-primary));
    --color-selected-variant-text: var(--pi-variant-active-text, #ffffff);
    --color-selected-variant-hover-background: var(--pi-variant-active-bg, var(--cm-primary));
    --color-selected-variant-hover-border: var(--pi-variant-active-border, var(--cm-primary));
    --color-selected-variant-hover-text: var(--pi-variant-active-text, #ffffff);
  }

  /* Quantity selector — override base.css and buy-buttons-styles. Fixed 124x56 pill. */
  .product-information .product-details .quantity-selector {
    /* Ревью дизайнера (3.8): уже (120px) и без белого фона — только stroke */
    width: 120px !important;
    height: 56px !important;
    border-radius: var(--cm-btn-radius, 64px) !important;
    border: 1px solid #d4cfc8 !important;
    background-color: transparent !important;
    padding-block: 0 !important;
    padding-inline: 16px !important;
    gap: 0 !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    align-self: auto !important;
    box-sizing: border-box !important;
  }

  .product-information .product-details .quantity-selector:hover {
    background-color: #ffffff !important;
  }

  .product-information .product-details .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--cm-text) !important;
    padding: 0 !important;
  }

  .product-information .product-details .quantity-selector input[type="number"] {
    width: 24px !important;
    max-width: 24px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--cm-text) !important;
    background: transparent !important;
    -moz-appearance: textfield !important;
  }

  .product-information .product-details .quantity-selector input[type="number"]::-webkit-outer-spin-button,
  .product-information .product-details .quantity-selector input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  .product-information {
    gap: var(--gap) 0;
  }

  /* Gallery image — desktop sizing and border-radius */
  @media screen and (min-width: 750px) {
    .product-information__media slideshow-slides,
    .product-information__media slideshow-slide,
    .product-information__media .product-media-constraint-wrapper {
      height: 700px !important;
      max-height: 700px !important;
    }

    .product-information__media .product-media-constraint-wrapper {
      border-radius: 24px;
      overflow: hidden;
    }

    /* :where(:not(.dialog-zoomed-gallery *)) — тот же приём, что и в base.css
       для .product-media-container: зум переиспользует класс .product-media__image
       для полноразмерных фото, и без исключения !important-высота обычной
       галереи (700px) протекала в диалог зума. Обязательно через :where() —
       голый :not(.dialog-zoomed-gallery *) добавляет класс к специфичности
       (0,2,0 -> 0,3,0) и это правило начинает перебивать соседнее
       ".media-fit-contain :is(img,...)" (тоже 0,2,0), которое раньше
       выигрывало ничью по порядку объявления. На сторах с Media fit: Contain
       это молча ломало десктопную галерею на cover — фото обрезало. :where()
       не добавляет веса, специфичность (и старое поведение вне зума) та же. */
    .product-information__media .product-media__image:where(:not(.dialog-zoomed-gallery *)) {
      height: 700px !important;
      object-fit: cover;
    }
  }

  /* Gallery chevrons — bottom-right corner of image */
  @media screen and (min-width: 750px) {
    .product-information__media .media-gallery--carousel slideshow-container {
      position: relative;
    }

    .product-information__media .media-gallery--carousel slideshow-arrows {
      position: absolute !important;
      inset: auto !important;
      bottom: 16px !important;
      right: 16px !important;
      width: auto !important;
      height: auto !important;
      display: flex !important;
      flex-direction: row !important;
      gap: 8px !important;
      justify-content: flex-end !important;
      align-items: center !important;
      z-index: 10;
      mix-blend-mode: normal !important;
    }

    .product-information__media slideshow-arrows .slideshow-control {
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      border-radius: 56px !important;
      background: var(--pi-arrow-bg, transparent) !important;
      border: 1px solid var(--pi-arrow-border, #7E7B78) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      box-shadow: none !important;
      color: var(--pi-arrow-color, #1B1006) !important;
    }

    .product-information__media slideshow-arrows .slideshow-control:hover {
      background: rgba(126, 123, 120, 0.1) !important;
    }

    .product-information__media slideshow-arrows .slideshow-control .svg-wrapper {
      width: 14px !important;
      height: 14px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .product-information__media slideshow-arrows .slideshow-control svg,
    .product-information__media slideshow-arrows .slideshow-control path {
      stroke: var(--pi-arrow-color, #1B1006) !important;
    }
  }

  /* Ревью дизайнера: звёзды Yotpo filled, не stroke.
     Пустая часть звезды — кремовая заливка вместо белой с оранжевым контуром */
  .star-container path {
    stroke: none !important;
  }

  .star-container linearGradient stop:last-child {
    stop-color: var(--cm-surface-cream, #ede4d0) !important;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }

    /* Ревью дизайнера: тайтл продукта на мобиле 28/36 medium */
    .product-information .product-details h1 {
      font-size: 28px;
      line-height: 36px;
      font-weight: 500;
    }

    /* Ревью дизайнера: описание продукта на мобиле 16/24 */
    .product-information .product-details .text-block.rte {
      font-size: 16px;
      line-height: 24px;
    }

    /* Ревью дизайнера (3.7): инпуты размеров на мобиле —
       6px/10px паддинги (высота 28px), stroke 1px у активного и неактивного,
       выбранный medium, невыбранный без заливки */
    .product-information .variant-picker .variant-option__button-label {
      --options-border-width: 1px;

      padding-block: 6px;
      padding-inline: 10px;
      min-height: 28px;
      min-width: 28px;
      font-size: 14px;
      line-height: 16px;
      background-color: transparent;
    }

    .product-information .variant-picker .variant-option__button-label:has([data-current-checked='true']) {
      font-weight: 500;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    /* Fixed 469px content column + real 72px gutter (design spec @1440).
       Media takes the remaining space (1fr). */
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left,
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      column-gap: 72px;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 1fr 469px;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 469px 1fr;
    }

    /* Gutter is now column-gap; drop the padding-based spacing so it stays exactly 72px */
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ) .product-information__media,
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ) .product-details {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */
/* 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:product-media-gallery-content (INDEX:270) */
/* Product with no media — see the sorted_media.size == 0 branch above. */
  .product-media-gallery__no-media {
    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, 1);
    border-radius: var(--gallery-media-border-radius, 0);
    overflow: hidden;
  }

  /* Классический зум: полоса миниатюр — часть раскладки (flex row в колонке
     диалога, order: 2), а не плавающий поверх фото оверлей — иначе нижний
     кусок увеличенного фото прятался под ней, и снимок казался "прижат
     кверху". `order` ставит её визуально ПОСЛЕ .dialog-zoomed-gallery несмотря
     на то, что в разметке она идёт раньше. Небольшой bottom-отступ — чтобы
     полоса не липла к самому краю экрана ("приподнять превью"). */
  .dialog-thumbnails-list-container {
    position: static;
    width: 100%;
    flex-shrink: 0;
    order: 2;
    padding-bottom: var(--padding-lg);
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  /* Классический зум: миниатюры — горизонтальная полоса внизу на любой
     ширине. Стоковый Horizon на десктопе (>=750px) превращал их в
     вертикальную колонку у правого края — эта версия стока больше не
     подключается. */

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      /* См. тот же фикс в slideshow-controls.liquid: без ширины коробка
         картинки уже родителя, и при object-fit: contain миниатюра
         прижимается влево. Это миниатюры в окне зума. */
      width: 100%;
      height: 100%;
      object-fit: var(--thumbnail-fit, cover);
      background-color: var(--thumbnail-bg, transparent);
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list.
       Классический зум: миниатюры теперь снизу на любой ширине (не только
       мобилка), поэтому десктопный оверрайд "сдвинуть влево от колонки
       справа" больше не нужен — это правило одно на все размеры. */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  /* Mobile: main product-page gallery media = fixed 390px height, responsive full width.
     object-fit тянется из токена --product-media-fit, который ставит класс
     .media-fit-<fit> (см. {% style %} выше). Через Liquid значение сюда не
     подставить: этот блок — {% stylesheet %}, в нём Liquid не работает. */
  @media screen and (max-width: 749px) {
    .product-information .product-media-container:not(.dialog-zoomed-gallery *) {
      aspect-ratio: auto;
      height: 390px;
      max-height: none;
    }

    .product-information .product-media-container:not(.dialog-zoomed-gallery *) .product-media-constraint-wrapper,
    .product-information .product-media-container:not(.dialog-zoomed-gallery *) .product-media {
      aspect-ratio: auto;
      width: 100%;
      height: 100%;
    }

    .product-information .product-media-container:not(.dialog-zoomed-gallery *) .product-media__image {
      aspect-ratio: auto;
      width: 100%;
      height: 100%;
      object-fit: var(--product-media-fit, cover);
    }

    /* 16px breathing room above the gallery (keeps the 390px media height intact) */
    .product-information media-gallery.spacing-style {
      padding-block-start: 16px;
    }
  }

  /* Классический зум — тёмный фон вместо белого (--color-background темы).
     Колонка: фото сверху (забирает всё, что осталось от миниатюр), полоса
     миниатюр — фиксированной высоты снизу (order: 2 у неё самой). */
  .dialog-zoomed-gallery__dialog {
    background-color: #000;
    flex-direction: column;
  }

  /* display жёстко скоуплен на [open]: без этого правило перебивает
     дефолтный UA-стиль браузера `dialog:not([open]) { display: none }`
     (авторский CSS всегда выигрывает у UA независимо от специфичности),
     и закрытый диалог остаётся в дереве рендера — невидимый (opacity: 0
     из zoom-dialog dialog в base.css), но перекрывает весь вьюпорт своим
     position:absolute/inset:0 и ловит клики/курсор zoom-out поверх всей
     страницы. */
  .dialog-zoomed-gallery__dialog[open] {
    display: flex;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  /* Классический зум — одна картинка на весь экран, листается влево/вправо
     стрелками/свайпом. Раньше это правило жило только под max-width:749px,
     а на десктопе `<ul>` со снимками просто стекался блоками сверху вниз
     ("выглядит ужасно" — фидбек после первой версии). Теперь работает на
     любой ширине. */
  .dialog-zoomed-gallery {
    /* Prevent scroll wheel or swipe scrolling */
    overscroll-behavior: none;
    scrollbar-width: none;
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* flex: 1 (не height: 100%) — отдаёт место полосе миниатюр снизу вместо
       того чтобы залезать под неё; min-height: 0 нужен, иначе flex-элемент
       не сжимается меньше содержимого и всё равно растягивает диалог. */
    flex: 1;
    min-height: 0;
    order: 1;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .dialog-zoomed-gallery .product-media-container {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
  }

  .dialog-zoomed-gallery .product-media-container--image .product-media {
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  /* .product-media {display:flex} само по себе не растягивает <img> по высоте:
     это замещённый элемент с атрибутом sizes, браузер сперва резолвит его
     "внутренний" размер по sizes/srcset и это перебивает flex-stretch. Без
     явного 100% картинка оставалась ниже своей зоны (та же причина, что и у
     .product-media__drag-zoom-wrapper выше) — object-fit: contain укладывал
     её в подрезанную коробку прижатой к верху, а не по центру. */
  .dialog-zoomed-gallery .product-media-container--image .product-media__image {
    width: 100%;
    height: 100%;
  }

  .dialog-zoomed-gallery .product-media-container--video,
  .dialog-zoomed-gallery .product-media-container--external_video {
    align-content: center;
  }

  .dialog-zoomed-gallery
    :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
    .product-media {
    aspect-ratio: auto;
    align-items: center;
    height: 100%;

    .product-media__image {
      height: 100%;
    }
  }

  /* <drag-zoom-wrapper> сидит МЕЖДУ .product-media-container и .product-media
     в разметке — без явного height/width он сжимается до контента (высота
     фото), а не до своей ячейки, и .product-media/img внутри с height:100%
     наследуют этот же "сжатый" размер. Отсюда были и чёрная полоса снизу
     (фото ниже реальной высоты зоны), и "не по центру" — эта часть нужна на
     ЛЮБОЙ ширине, а не только на мобилке. */
  .product-media__drag-zoom-wrapper {
    display: flex;
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
    justify-content: center;
    overflow: hidden;
  }

  /* А вот скролл + transform (pinch/drag зум) — только там, где реально
     работает сам JS-компонент (`isMobileBreakpoint()` внутри него). Раньше
     это правило жило тут же без media query — из-за этого поймали баг:
     `#resetZoom()` вешает `--drag-zoom-scale: 1.5` инлайн-стилем на КАЖДОЕ
     закрытие диалога, на любой ширине (слушатель на window, без проверки
     брейкпоинта), а десктопный JS этот стиль никогда не пересчитывает и не
     сбрасывает. Итог: открыл → закрыл → открыл — фото на десктопе тупо
     рендерилось transform: scale(1.5), обрезанное. */
  @media screen and (max-width: 749px) {
    .product-media__drag-zoom-wrapper {
      overflow: scroll;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }
  }

  @media screen and (max-width: 749px) {
    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  /* Крестик — тот же "чистый круг", что у .cart-drawer__close-button:
     белый кружок с тонкой рамкой и тёмной иконкой, а не blend-mode трюк
     (на чёрном фоне зума он "терялся" — фидбек "выглядит так себе"). */
  .dialog-zoomed-gallery__close-button {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 48px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: var(--cm-text);
    z-index: var(--layer-raised);
  }

  .dialog-zoomed-gallery__close-button svg {
    width: 16px;
    height: 16px;
    --icon-stroke-width: 1.5px;
  }

  .dialog-zoomed-gallery__close-button svg path {
    stroke: var(--cm-text);
  }

  /* Prev/next over the enlarged photo (Product media gallery -> Show navigation
     arrows in zoom). Тот же сниппет 'slideshow-arrow' (.slideshow-control /
     .slideshow-control--previous), что и стрелки обычной галереи товара —
     тот же кружок с рамкой и иконкой 14px (см. рецепт в
     'product-information-content': .slideshow-control 44x44 + border + icon
     14px). Диалог светлый (см. .dialog-zoomed-gallery__close-button выше),
     поэтому те же белый кружок + тёмная иконка, а не белым по белому.
     Позиционировано fixed — диалог полноэкранный top-layer элемент, вне
     разметки самой галереи. */
  .dialog-zoomed-gallery__arrows {
    display: contents;
  }

  .dialog-zoomed-gallery__dialog .slideshow-control {
    position: fixed;
    top: 50%;
    translate: 0 -50%;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 56px;
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: none;
    color: var(--cm-text);
    opacity: 1;
    z-index: var(--layer-raised);
  }

  .dialog-zoomed-gallery__dialog .slideshow-control:hover {
    background: var(--cm-surface-warm);
  }

  .dialog-zoomed-gallery__dialog .slideshow-control .svg-wrapper {
    width: 14px;
    height: 14px;
  }

  .dialog-zoomed-gallery__dialog .slideshow-control svg,
  .dialog-zoomed-gallery__dialog .slideshow-control path {
    stroke: var(--cm-text);
  }

  .dialog-zoomed-gallery__dialog .slideshow-control--previous {
    left: var(--margin-lg);
  }

  .dialog-zoomed-gallery__dialog .slideshow-control--next {
    right: var(--margin-lg);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }

    /* Dots spacing: 16px from the media above, 12px to the thumbnails block below.
       Drop the touch-target min-height so the wrapper hugs the dots. */
    .media-gallery__mobile-dots {
      min-height: 0;
      margin-block: 16px 12px;
    }

    .media-gallery__mobile-dots .slideshow-controls__dots {
      padding-block: 0;
    }

    /* Casmani: inset the carousel media 16px from the screen edges and round its
       corners (24px = --style-border-radius-xl). Desktop keeps the theme's own
       min-width:750 media-radius handling untouched. */
    .media-gallery--carousel slideshow-slide.product-media-container {
      padding-inline: 16px;
    }

    .media-gallery--carousel slideshow-slide.product-media-container .product-media {
      border-radius: var(--style-border-radius-xl);
      overflow: hidden;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */
/* START_SNIPPET:product-media (INDEX:271) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.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--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */
/* START_SNIPPET:quantity-selector (INDEX:273) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }

  /* Pill-shaped quantity selector for product page */
  .product-form-buttons quantity-selector-component {
    display: inline-flex;
    align-items: center;
    height: 56px;
    border: 1px solid #d4cfc8;
    border-radius: var(--cm-btn-radius, 64px);
    background: #fff;
    padding-block: 16px;
    padding-inline: 24px;
    gap: 16px;
    box-sizing: border-box;
  }

  .product-form-buttons .quantity-minus,
  .product-form-buttons .quantity-plus {
    width: auto;
    height: auto;
    border-radius: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: var(--cm-text);
  }

  .product-form-buttons .quantity-selector input[type="number"] {
    width: 24px;
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    color: var(--cm-text);
    -moz-appearance: textfield;
    padding: 0;
  }

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

  .product-form-buttons .quantity-selector input[type="number"]:focus {
    outline: none;
  }
/* END_SNIPPET:quantity-selector */
/* 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:quick-add-styles (INDEX:276) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: var(--cm-btn-radius, 50px);
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: var(--cm-btn-radius, 50px);
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-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:section (INDEX:285) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }

  /* App blocks (Yotpo etc.) are plain divs with no width of their own:
     in the flex-column content wrapper with align-items != stretch they
     shrink-wrap and hug one edge. Force them to span the content column. */
  .section-content-wrapper > .shopify-app-block {
    width: 100%;
  }
/* END_SNIPPET:section */
/* 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-arrow (INDEX:289) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */
/* START_SNIPPET:slideshow-arrows (INDEX:290) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */
/* START_SNIPPET:slideshow-controls (INDEX:291) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        /* Ширина обязательна. Без неё картинка получает ширину по своим
           пропорциям, коробка выходит уже родителя, и при object-fit: contain
           миниатюра прижимается к левому краю — в Safari это видно, потому что
           он иначе считает height: 100% относительно высоты, полученной из
           aspect-ratio родителя. С width: 100% коробка занимает всю ячейку,
           а object-position по умолчанию центрирует содержимое. */
        width: 100%;
        height: 100%;
        object-fit: var(--thumbnail-fit, cover);
        background-color: var(--thumbnail-bg, transparent);
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  /* Desktop product-gallery thumbnails — same design as mobile (designer 3.6):
     framed active thumbnail (border -> 3px gap -> image), inactive = white 50%
     overlay. :not([aria-selected='true']) also covers first paint, before
     slideshow.js stamps aria-selected on every thumbnail. */
  @media screen and (min-width: 750px) {
    media-gallery .slideshow-controls__thumbnails .slideshow-control {
      position: relative;
      box-sizing: border-box;
      padding: 3px;
      border: 2px solid transparent;
      border-radius: var(--thumbnail-radius, var(--media-radius));
    }

    media-gallery .slideshow-controls__thumbnails .slideshow-control img {
      width: 100%;
      border-radius: max(0px, calc(var(--thumbnail-radius, var(--media-radius)) - 3px));
    }

    media-gallery .slideshow-controls__thumbnails .slideshow-control[aria-selected='true'] {
      border: 2px solid var(--thumbnail-active-border-color, currentcolor);
      outline: none;
    }

    media-gallery .slideshow-controls__thumbnails .slideshow-control:not([aria-selected='true'])::after {
      content: '';
      position: absolute;
      /* inset считается от padding box (внутри 2px рамки), картинка ещё на 3px глубже */
      inset: 3px;
      background: rgb(255 255 255 / 0.5);
      border-radius: max(0px, calc(var(--thumbnail-radius, var(--media-radius)) - 3px));
      pointer-events: none;
    }
  }

  /* Mobile: product-gallery thumbnails (scoped to <media-gallery>) */
  @media screen and (max-width: 749px) {
    /* Start from the left edge instead of centering; no vertical padding; 4px gap */
    media-gallery .slideshow-controls__thumbnails {
      margin-inline: 0;
      padding-block: 0;
      gap: 4px;
    }

    /* 20px space under the thumbnails */
    media-gallery .slideshow-controls__thumbnails-container {
      padding-block-end: 20px;
    }

    /* 72x72 framed thumbnails: border → 3px transparent gap → image */
    media-gallery .slideshow-controls__thumbnails .slideshow-control {
      width: 72px;
      height: 72px;
      aspect-ratio: auto;
      box-sizing: border-box;
      padding: 3px;
      border: 2px solid transparent;
      border-radius: var(--thumbnail-radius, var(--media-radius));
    }

    media-gallery .slideshow-controls__thumbnails .slideshow-control img {
      width: 100%;
      height: 100%;
      object-fit: var(--thumbnail-fit, cover);
      background-color: var(--thumbnail-bg, transparent);
      border-radius: max(0px, calc(var(--thumbnail-radius, var(--media-radius)) - 3px));
    }

    /* Selected thumbnail gets the configurable border color (no default outline) */
    media-gallery .slideshow-controls__thumbnails .slideshow-control[aria-selected='true'] {
      border: 2px solid var(--thumbnail-active-border-color, currentcolor);
      outline: none;
    }

    /* Ревью дизайнера (3.6): невыбранные миниатюры — overlay #ffffff 50% поверх фото */
    media-gallery .slideshow-controls__thumbnails .slideshow-control {
      position: relative;
    }

    media-gallery .slideshow-controls__thumbnails .slideshow-control[aria-selected='false']::after {
      content: '';
      position: absolute;
      /* inset считается от padding box (внутри 2px рамки), картинка ещё на 3px глубже */
      inset: 3px;
      background: rgb(255 255 255 / 0.5);
      border-radius: max(0px, calc(var(--thumbnail-radius, var(--media-radius)) - 3px));
      pointer-events: none;
    }

    /* Dots: inactive 6x6 (--cm-border-strong), active 16x6 pill (--cm-text), no border */
    media-gallery .slideshow-controls__dots {
      gap: 6px;
    }

    media-gallery .slideshow-controls__dots button {
      --size: 6px;
      --color: var(--cm-border-strong);
      --color-active: var(--cm-text);
      /* Size the button to its dot (drop the fixed 12px box + negative margin)
         so the flex gap is uniform and the active pill is a true 16px. */
      width: auto;
      height: auto;
      margin: 0;
    }

    media-gallery .slideshow-controls__dots button::after {
      box-shadow: none;
      transition: width 0.35s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.25s ease;
    }

    @media (prefers-reduced-motion: reduce) {
      media-gallery .slideshow-controls__dots button::after {
        transition: none;
      }
    }

    media-gallery .slideshow-controls__dots button[aria-selected='true']::after {
      width: 16px;
      border-radius: 3px;
      box-shadow: none;
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

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

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */
/* 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 */
/* START_SNIPPET:text (INDEX:303) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .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):is(.h1, .h2, .h3, .h4, .h5, .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 p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--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;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }

  /* Optional per-block font-size (px) / weight overrides — work on any preset.
     Note the trailing colon in [style*='--size-override:'] — without it the
     selector would also match --size-override-mobile. */
  .text-block[style*='--size-override:'],
  .text-block[style*='--size-override:'] > :is(h1, h2, h3, h4, h5, h6, p, *) {
    font-size: var(--size-override) !important;
  }

  .text-block[style*='--weight-override:'],
  .text-block[style*='--weight-override:'] > :is(h1, h2, h3, h4, h5, h6, p, *) {
    font-weight: var(--weight-override) !important;
  }

  @media screen and (max-width: 749px) {
    .text-block[style*='--size-override-mobile:'],
    .text-block[style*='--size-override-mobile:'] > :is(h1, h2, h3, h4, h5, h6, p, *) {
      font-size: var(--size-override-mobile) !important;
    }

    .text-block[style*='--weight-override-mobile:'],
    .text-block[style*='--weight-override-mobile:'] > :is(h1, h2, h3, h4, h5, h6, p, *) {
      font-weight: var(--weight-override-mobile) !important;
    }
  }
/* END_SNIPPET:text */
/* START_SNIPPET:variant-main-picker (INDEX:312) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  /* ── Casmani: Color option as circular variant-image swatches (like quick view) ── */
  /* Replace the equal-width text grid with a simple flex row of round swatches.
     !important is used because the theme's base .variant-option__button-label sets
     flex/min-height/padding that would otherwise squash these into ovals. */
  .variant-option.variant-option--cm-color {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    grid-template-columns: none !important;
  }

  .variant-option.variant-option--cm-color .variant-option__button-label--cm-color {
    position: relative;
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 52px !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    border: 2px solid transparent !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    cursor: pointer;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Kill the theme's fake ::before/::after border on the round swatch */
  .variant-option.variant-option--cm-color .variant-option__button-label--cm-color::before,
  .variant-option.variant-option--cm-color .variant-option__button-label--cm-color::after {
    content: none !important;
    display: none !important;
  }

  .variant-option--cm-color .variant-option__button-label--cm-color input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .variant-option__cm-color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .variant-option__cm-color img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: var(--cm-swatch-fit, cover);
    background-color: var(--cm-swatch-bg, transparent);
    border-radius: 50%;
  }

  .variant-option__cm-color:empty {
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }

  /* Selected state — ring in the brand colour (or the block's override) */
  .variant-option--cm-color .variant-option__button-label--cm-color:has(input:checked) {
    border-color: transparent !important;
    outline: 2px solid var(--cm-swatch-ring, var(--cm-primary));
    outline-offset: 2px;
  }

  .variant-option--cm-color .variant-option__button-label--cm-color:not(:has(input:checked)):hover {
    outline: 2px solid rgb(var(--color-foreground-rgb) / 0.25);
    outline-offset: 2px;
  }
/* END_SNIPPET:variant-main-picker */