/** Shopify CDN: Minification failed

Line 2722:54 Expected identifier but found whitespace
Line 2723:4 Unexpected "has("
Line 2735:54 Expected identifier but found whitespace
Line 2736:4 Unexpected "has("
Line 2740:54 Expected identifier but found whitespace
Line 2741:4 Unexpected "has("
Line 2745:54 Expected identifier but found whitespace
Line 2746:4 Unexpected "has("
Line 2922:56 Expected identifier but found whitespace
Line 2923:6 Unexpected "has("
... and 6 more hidden warnings

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

  .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;
  }

  /* NUTRI EFFICACE : menu desktop uniquement a partir de 1201px
     (pattern Facialiste). En dessous : format mobile/tablette (drawer). */
  @media screen and (min-width: 1201px) {
    #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: 1201px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  /* Entre 750 et 1200 px, on est en mode drawer force :
     la rangee basse (menu desktop) n'a plus de raison d'exister. */
  @media screen and (max-width: 1200px) {
    #header-component[data-menu-style='drawer'] .header__row--bottom {
      display: none;
    }

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

  /* UNE SEULE LOUPE en mode drawer tablette (750-1200 px).
     Horizon rend deux boutons de recherche : le principal, et un
     doublon destine au mobile (.search-action--hidden-on-menu) que le
     theme ne masque que lorsque data-menu-style='menu'. Notre drawer
     force sous 1201 px laissait donc les DEUX visibles. On masque le
     doublon sur cette plage ; la loupe principale prend la place
     "leftB" de la grille drawer, a cote du hamburger (comme sur
     Facialiste). Le mobile <= 749 px reste inchange. */
  @media screen and (min-width: 750px) and (max-width: 1200px) {
    #header-component .search-action--hidden-on-menu {
      display: none !important;
    }
  }

  .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;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* 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);
  }

  .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);
  }

  /* =====================================================
     NUTRI EFFICACE — MENU DESKTOP V3

     Structure visuelle reprise du menu Facialiste :
     - pastilles arrondies au niveau 1
     - dropdown compact, opaque et arrondi
     - colonne unique
     - zones parentes en overflow visible

     Horizon utilise toutefois un overflow-menu avec Shadow DOM et anime
     le panneau sur toute la largeur du header. Le dropdown est donc place
     en position fixed par le JS, directement sous son item parent.
     ===================================================== */

  #header-component {
    --ne-menu-radius: 8px;
    --ne-menu-fill: #ecf9d4;
    --ne-menu-fill-strong: #e3f6c0;
    --ne-menu-border: #dbf4af;
    --ne-menu-fill: color-mix(in srgb, var(--ne-menu-accent, #b7e85f) 27%, var(--ne-menu-surface, #ffffff));
    --ne-menu-fill-strong: color-mix(in srgb, var(--ne-menu-accent, #b7e85f) 39%, var(--ne-menu-surface, #ffffff));
    --ne-menu-border: color-mix(in srgb, var(--ne-menu-accent, #b7e85f) 50%, var(--ne-menu-surface, #ffffff));
    --ne-fc-radius: 8px;
    --ne-fc-top-pad-x: clamp(10px, 0.8vw, 14px);
  }

  @media screen and (min-width: 1201px) {
    /* Horizon applique contain: layout au header. Or cette propriete
       transformerait le repere d'un enfant position:fixed. On la neutralise
       uniquement sur desktop, pour que les coordonnees JS correspondent
       exactement au viewport. */
    #header-component {
      contain: none !important;
      overflow: visible !important;
      z-index: 10000 !important;
    }

    .header-section,
    #header-component .header__row,
    #header-component .header__columns,
    #header-component .header__column,
    #header-component .header-menu,
    #header-component .menu-list,
    #header-component .menu-list__list,
    #header-component .overflow-menu,
    #header-component .menu-list__list-item {
      overflow: visible !important;
    }

    #header-component .header__column--center {
      justify-content: center;
      position: relative;
      z-index: 10020;
    }

    /* Capsule de navigation */
    #header-component .header-menu .overflow-menu::part(list) {
      justify-content: center;
      gap: var(--ne-menu-gap, 4px);
      padding: var(--ne-menu-capsule-pad, 5px 6px);
      background-color: var(--ne-menu-capsule-bg, transparent);
      border: var(--ne-menu-capsule-border-width, 0) solid var(--ne-menu-border);
      border-radius: var(--ne-menu-capsule-radius, 999px);
      box-shadow: var(--ne-menu-capsule-shadow, none);
      overflow: visible;
    }

    /* Chaque item reste un repere semantique et un contexte d'empilement.
       Le positionnement du panneau, lui, est calcule par le JS. */
    #header-component .header-menu .menu-list__list-item:not([slot='overflow']) {
      position: relative !important;
      z-index: 10030 !important;
      isolation: isolate;
    }

    /* Niveau 1 — pastilles Facialiste */
    #header-component .header-menu .menu-list__list-item:not([slot='overflow']) > .menu-list__link,
    #header-component .header-menu .menu-list__link {
      display: inline-flex;
      align-items: center;
      min-height: var(--ne-menu-link-height, 40px);
      margin: 0;
      padding: 8px var(--ne-fc-top-pad-x);
      border: 0;
      border-radius: var(--ne-fc-radius);
      background-color: transparent;
      color: var(--ne-menu-top-color, inherit);
      white-space: nowrap;
      text-transform: var(--ne-menu-text-case, none);
      font-size: var(--ne-menu-font-size, clamp(17px, calc(0.86vw + 3px), 19px)) !important;
      line-height: 1.15;
      transition: background-color 0.18s ease;
    }

    #header-component .header-menu .menu-list__list-item:hover > .menu-list__link,
    #header-component .header-menu .menu-list__link:hover,
    #header-component .header-menu .menu-list__link[aria-expanded='true'],
    #header-component .header-menu details[open] > summary .menu-list__link,
    #header-component .header-menu .menu-list__link[aria-current],
    #header-component .header-menu .menu-list__link[aria-current='page'] {
      background-color: var(--ne-menu-fill) !important;
      border-radius: var(--ne-fc-radius) !important;
      color: var(--ne-menu-top-color, inherit) !important;
      opacity: 1 !important;
    }

    #header-component .header-menu .menu-list__link:focus-visible {
      background-color: var(--ne-menu-fill);
      outline: 3px solid var(--ne-menu-accent);
      outline-offset: 2px;
    }

    /* ──────────────────────────────────────────────────────────────
       Chevron d'affordance sur les items avec sous-menu (desktop)
       Signale visuellement qu'une entree est depliable. Cible
       uniquement les liens porteurs de aria-haspopup : les liens
       simples (ex. « Mon histoire ») restent sans chevron.

       IMPORTANT : le chevron est attache au ::after du TITRE
       (.menu-list__link-title), et NON du lien. Horizon pose deja
       un .menu-list__link::after en position:absolute (safety box) ;
       comme un element n'a qu'un seul ::after, s'en servir faisait
       heriter ce position:absolute/top/left et collait le chevron
       en haut a gauche. Le ::after du titre, lui, est libre et coule
       naturellement en ligne, apres le texte.
       Aucune modif du markup — 100% CSS, neutre pour le SEO.
       ────────────────────────────────────────────────────────────── */
    #header-component .header-menu .menu-list__link[aria-haspopup] .menu-list__link-title {
      display: inline-flex;
      align-items: center;
    }

    #header-component .header-menu .menu-list__link[aria-haspopup] .menu-list__link-title::after {
      content: '';
      flex: 0 0 auto;
      width: var(--ne-chevron-size, 0.5em);
      height: var(--ne-chevron-size, 0.5em);
      margin-inline-start: var(--ne-chevron-gap, 0.45em);
      border-right: var(--ne-chevron-thickness, 2.5px) solid currentColor;
      border-bottom: var(--ne-chevron-thickness, 2.5px) solid currentColor;
      transform: translateY(-0.18em) rotate(45deg);
      transform-origin: center;
      transition: transform 0.22s var(--ease-out-cubic, ease);
      pointer-events: none;
    }

    /* Rotation vers le haut quand le sous-menu est ouvert. */
    #header-component .header-menu .menu-list__link[aria-haspopup][aria-expanded='true'] .menu-list__link-title::after {
      transform: translateY(0.02em) rotate(225deg);
    }

    /* Respecte « reduire les animations » : chevron lisible, sans transition. */
    @media (prefers-reduced-motion: reduce) {
      #header-component .header-menu .menu-list__link[aria-haspopup] .menu-list__link-title::after {
        transition: none;
      }
    }

    /* Panneau compact. Les top/left definitifs sont poses inline par le JS.
       position:fixed permet d'echapper au calcul pleine largeur de Horizon. */
    #header-component .header-menu .menu-list__submenu {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: auto !important;
      bottom: auto !important;
      inset: auto !important;
      inset-block: auto !important;
      inset-inline: auto !important;
      translate: none !important;
      transform: none !important;
      margin: 0 !important;

      width: max-content !important;
      inline-size: max-content !important;
      min-width: 220px !important;
      min-inline-size: 220px !important;
      max-width: min(92vw, 520px) !important;
      max-inline-size: min(92vw, 520px) !important;

      padding: 8px !important;
      background: var(--ne-menu-surface, #ffffff) !important;
      background-color: var(--ne-menu-surface, #ffffff) !important;
      color: var(--ne-menu-on-surface, #191919) !important;
      border: 1px solid var(--ne-menu-border) !important;
      border-radius: var(--ne-menu-panel-radius, var(--ne-fc-radius)) !important;
      box-shadow: 0 12px 34px rgba(25, 25, 25, 0.10) !important;
      box-sizing: border-box !important;
      clip-path: none !important;
      overflow: visible !important;
      contain: none !important;
      content-visibility: visible !important;
      isolation: isolate !important;
      z-index: 10050 !important;
      transition: opacity 0.16s ease, visibility 0.16s ease !important;
    }

    /* ──────────────────────────────────────────────────────────────
       NEUTRALISATION DE LA « SAFETY BOX » HORIZON

       header-menu.js pose data-safety-box="true" sur le lien actif des
       qu'un pointermove est detecte, ce qui active dans _header-menu.liquid :

         .menu-list__link::after {
           position: absolute; top: var(--header-padding);
           height: var(--box-height); left: 0; right: 0;
         }

       Ce rectangle sert a rejoindre en diagonale un mega-menu pleine
       largeur colle sous le header. Ici le panneau est en position:fixed
       SOUS le header : la safety box ne mene donc plus a rien, et elle
       intercepte le pointeur pendant tout le deplacement.

       Pire : notre CSS met .menu-list__list-item en position:relative,
       donc le rectangle se cale desormais sur le <li> et deborde vers le
       bas sur toute la hauteur du header. Quand on descend la souris,
       elementFromPoint() renvoie le lien DEJA actif ; la routine
       #reconcilePointerTarget() de Horizon voit alors
       listItem.contains(activeItem) === true et n'envoie aucun
       pointerenter de rattrapage. Le menu voisin ne s'ouvre pas.

       C'est LA cause principale des ouvertures aleatoires « surtout en
       descendant la souris ». On desactive donc la safety box sur desktop,
       notre propre pont ::before la remplacant integralement.
       ────────────────────────────────────────────────────────────── */
    #header-component .header-menu .menu-list__link::after {
      content: none !important;
      display: none !important;
    }

    /* Pont invisible entre la pastille et le dropdown.
       Hauteur calee sur l'ecart reel (reglable jusqu'a 24px dans l'editeur),
       et non plus sur une valeur figee de 16px qui laissait une zone morte.
       Les bornes laterales sont posees par le JS (--ne-bridge-left/right)
       pour couvrir la pastille meme quand le panneau est recale contre le
       bord droit du viewport. */
    #header-component .header-menu .menu-list__submenu::before {
      content: '' !important;
      position: absolute !important;
      top: calc(-1 * (var(--ne-menu-panel-offset, 10px) + 8px)) !important;
      left: var(--ne-bridge-left, 0px) !important;
      right: var(--ne-bridge-right, 0px) !important;
      height: calc(var(--ne-menu-panel-offset, 10px) + 10px) !important;
      display: block !important;
      background: transparent !important;
      pointer-events: inherit !important;
    }

    /* Un panneau ferme reste un bloc position:fixed avec ses coordonnees
       inline : tant qu'il n'est pas inerte, il peut capter le pointeur
       pendant les 160ms de transition sur visibility. */
    #header-component .header-menu .menu-list__submenu {
      pointer-events: none !important;
    }

    #header-component .header-menu .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
    #header-component .header-menu .menu-list__submenu[data-active] {
      pointer-events: auto !important;
    }

    /* Le fond pleine largeur natif de Horizon ne doit plus grandir. */
    #header-component .header__underlay-open {
      height: var(--header-height, 100%) !important;
    }

    #header-component .header__underlay-open::after {
      display: none !important;
      box-shadow: none !important;
      clip-path: none !important;
    }

    /* Neutralisation complete de la structure mega-menu Horizon.
       C'est le point cle emprunte a Facialiste : un dropdown simple est une
       vraie colonne verticale, sans grille ni transformation interne. */
    #header-component .header-menu .menu-list__submenu-inner {
      position: relative !important;
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 1 !important;
      translate: none !important;
      transform: none !important;
      overflow: visible !important;
      contain: none !important;
    }

    #header-component .header-menu .menu-list__submenu :is(
      .mega-menu,
      .mega-menu__grid,
      .mega-menu__list,
      .mega-menu__column,
      ul,
      ol,
      menu,
      li,
      div,
      section,
      nav
    ) {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      margin: 0 !important;
      padding: 0 !important;
      padding-inline: 0 !important;
      grid-column: auto !important;
      grid-row: auto !important;
      grid-template-columns: none !important;
      grid-template-rows: none !important;
      grid-auto-flow: row !important;
      list-style: none !important;
      overflow: visible !important;
      contain: none !important;
    }

    #header-component .header-menu .menu-list__submenu .mega-menu__grid,
    #header-component .header-menu .menu-list__submenu .mega-menu__list,
    #header-component .header-menu .menu-list__submenu .mega-menu__column,
    #header-component .header-menu .menu-list__submenu ul {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: var(--ne-menu-panel-gap, 2px) !important;
    }

    #header-component .header-menu .menu-list__submenu .mega-menu__column > div {
      display: block !important;
      width: 100% !important;
    }

    /* Liens du dropdown */
    #header-component .header-menu .menu-list__submenu .mega-menu__link,
    #header-component .header-menu .menu-list__submenu .menu-list__link,
    #header-component .header-menu .menu-list__submenu a {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      width: 100% !important;
      min-width: max-content !important;
      min-height: var(--ne-menu-sub-height, 44px) !important;
      height: auto !important;
      margin: 0 !important;
      padding: 10px 14px !important;
      box-sizing: border-box !important;
      font-size: var(--ne-menu-sub-font-size, 17px) !important;
      line-height: 1.35 !important;
      border: 0 !important;
      border-radius: var(--ne-fc-radius) !important;
      background: transparent !important;
      color: var(--ne-menu-on-surface, #191919) !important;
      text-align: left !important;
      text-decoration: none !important;
      text-transform: none !important;
      white-space: nowrap !important;
      -webkit-hyphens: none !important;
      hyphens: none !important;
      word-break: normal !important;
      overflow-wrap: normal !important;
      transition: background-color 0.18s ease !important;
    }

    /* Séparateurs fins : ajoutés en JS selon l'ordre réel des liens.
       Cette méthode reste fiable même si Horizon change ses wrappers internes. */
    #header-component .header-menu .menu-list__submenu a.ne-submenu-link--divider {
      /* Repli WebKit ancien avant color-mix() */
      border-bottom: 1px solid #ddefbd !important;
      border-bottom-color: color-mix(
        in srgb,
        var(--ne-menu-accent, #b7e85f) 38%,
        var(--ne-menu-surface, #ffffff)
      ) !important;
    }

    #header-component .header-menu .menu-list__submenu .mega-menu__link:hover,
    #header-component .header-menu .menu-list__submenu .mega-menu__link:focus-visible,
    #header-component .header-menu .menu-list__submenu .menu-list__link:hover,
    #header-component .header-menu .menu-list__submenu .menu-list__link:focus-visible,
    #header-component .header-menu .menu-list__submenu a:hover,
    #header-component .header-menu .menu-list__submenu a:focus-visible,
    #header-component .header-menu .menu-list__submenu a[aria-current] {
      background-color: var(--ne-menu-fill) !important;
      color: var(--ne-menu-on-surface, #191919) !important;
      border-radius: var(--ne-fc-radius) !important;
      box-shadow: none !important;
    }

    #header-component .header-menu .menu-list__submenu a:focus-visible {
      outline: 3px solid var(--ne-menu-accent);
      outline-offset: -2px;
    }

    /* ──────────────────────────────────────────────────────────────
       Liens parents non cliquables (desktop uniquement)

       Le href reste dans le DOM : le maillage interne du header vers la
       collection parente est conserve pour le crawl. Seule la navigation
       utilisateur est neutralisee, par le JS, en phase de capture.
       ────────────────────────────────────────────────────────────── */
    #header-component[data-ne-parent-nonav='true']
      .header-menu
      .menu-list__list-item:not([slot='overflow'])
      > .menu-list__link[aria-haspopup='true'] {
      cursor: default;
    }

    #header-component .header-menu .menu-list__submenu a {
      cursor: pointer !important;
    }

    /* Lien collection injecte en fin de panneau : sans lui, la collection
       parente devient inaccessible depuis le header. Le filet separateur
       vient du lien precedent (classe .ne-submenu-link--divider), il n'y a
       donc pas de border-top a ajouter ici sous peine de double trait. */
    #header-component .header-menu .menu-list__submenu a.ne-submenu-link--all {
      justify-content: space-between !important;
      gap: 14px !important;
      font-weight: 600 !important;
    }

    /* Chevron d'indication, construit en bordures : aucune police d'icone,
       aucune requete reseau, et il herite de la couleur du texte. */
    #header-component .header-menu .menu-list__submenu a.ne-submenu-link--all::after {
      content: '';
      flex: 0 0 auto;
      width: var(--ne-arrow-size, 0.42em);
      height: var(--ne-arrow-size, 0.42em);
      border-top: var(--ne-arrow-thickness, 2.5px) solid currentColor;
      border-right: var(--ne-arrow-thickness, 2.5px) solid currentColor;
      transform: rotate(45deg);
      transform-origin: center;
      transition: transform 0.18s var(--ease-out-cubic, ease);
      pointer-events: none;
    }

    #header-component .header-menu .menu-list__submenu a.ne-submenu-link--all:hover::after,
    #header-component .header-menu .menu-list__submenu a.ne-submenu-link--all:focus-visible::after {
      transform: rotate(45deg) translate(2px, -2px);
    }

    @media (prefers-reduced-motion: reduce) {
      #header-component .header-menu .menu-list__submenu a.ne-submenu-link--all::after {
        transition: none;
      }
    }
  }

  /* =====================================================
     NUTRI EFFICACE — Répartition du header desktop V6.6

     Avec le CTA téléphone, deux colonnes latérales identiques (1fr / 1fr)
     centraient le menu dans la page entière et non dans l'espace réellement
     disponible. Le menu se retrouvait donc trop près du CTA tandis qu'un
     grand vide restait entre le logo et la navigation.

     On donne volontairement davantage d'espace à la colonne de droite :
     - le menu se décale naturellement vers la gauche
     - le CTA et les icônes respirent
     - aucun transform n'est appliqué au menu, ce qui reste fiable sur Safari
       et WebKit lors des mesures d'overflow effectuées par Horizon
     ===================================================== */
  @media screen and (min-width: 1201px) {
    #header-component {
      --ne-header-logo-desktop-offset: -18px;
      --ne-header-column-gap: clamp(16px, 1.35vw, 26px);
      --ne-header-actions-gap: clamp(10px, 0.8vw, 16px);
    }

    #header-component .header__row--top .header__columns {
      --header-left: minmax(180px, 0.86fr);
      --header-center: auto;
      --header-right: minmax(310px, 1.14fr);
      column-gap: var(--ne-header-column-gap) !important;
    }

    #header-component .header__column--left {
      justify-content: flex-start !important;
      min-width: 0 !important;
    }

    #header-component .header__column--center {
      justify-content: center !important;
      min-width: 0 !important;
    }

    #header-component .header__column--right {
      justify-content: flex-end !important;
      min-width: 310px !important;
      gap: var(--ne-header-actions-gap) !important;
    }

    /* Décalage léger du logo uniquement : le menu n'utilise aucun transform,
       afin de ne pas fausser les calculs de position des sous-menus Horizon. */
    #header-component .header__column--left .header-logo,
    #header-component .header__row--top .header-logo {
      margin-left: 0 !important;
      transform: translateX(var(--ne-header-logo-desktop-offset)) !important;
      -webkit-transform: translateX(var(--ne-header-logo-desktop-offset)) !important;
      transform-origin: left center !important;
    }

    /* Neutralise les marges parasites que certains blocs Horizon peuvent
       ajouter autour de la navigation ou des actions après hydratation. */
    #header-component .header__column--center .header-menu,
    #header-component .header__column--right > * {
      margin-block: 0 !important;
    }
  }

  /* Sur les grands écrans, le numéro s'affiche dans le CTA : la colonne
     droite reçoit donc un peu plus de place et le menu avance davantage. */
  @media screen and (min-width: 1500px) {
    #header-component .header__row--top .header__columns {
      --header-left: minmax(200px, 0.80fr);
      --header-right: minmax(430px, 1.20fr);
    }

    #header-component .header__column--right {
      min-width: 430px !important;
    }
  }

  /* =====================================================
     NUTRI EFFICACE — CTA téléphone desktop V6.6
     Remplace avantageusement le lien « Contact » dans le header.
     Le bouton est injecté dans la colonne d'actions afin de préserver
     la structure Horizon et le fonctionnement des sous-menus.
     ===================================================== */
  @media screen and (min-width: 1201px) {
    #header-component .ne-desktop-phone {
      flex: 0 0 auto !important;
      min-height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 9px !important;
      margin: 0 !important;
      padding: 9px 14px !important;
      color: var(--ne-phone-text, #ffffff) !important;
      background: var(--ne-phone-bg, #111111) !important;
      border: 1px solid var(--ne-phone-bg, #111111) !important;
      border-radius: var(--ne-menu-radius, 10px) !important;
      box-shadow: 0 4px 13px rgba(17, 17, 17, 0.12) !important;
      box-sizing: border-box !important;
      text-decoration: none !important;
      white-space: nowrap !important;
      line-height: 1 !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: transparent !important;
      transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
    }

    #header-component .ne-desktop-phone:hover,
    #header-component .ne-desktop-phone:focus-visible {
      color: var(--ne-phone-text, #ffffff) !important;
      background: var(--ne-phone-bg-hover, #252525) !important;
      border-color: var(--ne-phone-bg-hover, #252525) !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 6px 17px rgba(17, 17, 17, 0.16) !important;
    }

    #header-component .ne-desktop-phone:focus-visible {
      outline: 3px solid var(--ne-phone-icon, #b7e85f) !important;
      outline-offset: 2px !important;
    }

    #header-component .ne-desktop-phone__icon {
      flex: 0 0 auto !important;
      width: 21px !important;
      height: 21px !important;
      display: block !important;
      color: var(--ne-phone-icon, #b7e85f) !important;
    }

    #header-component .ne-desktop-phone__label {
      color: var(--ne-phone-text, #ffffff) !important;
      font-family: inherit !important;
      font-size: 15px !important;
      font-weight: 650 !important;
      line-height: 1.1 !important;
      letter-spacing: 0.015em !important;
      text-transform: none !important;
    }

    #header-component .ne-desktop-phone__number {
      display: inline !important;
      color: var(--ne-phone-text, #ffffff) !important;
      opacity: 0.84 !important;
      font-family: inherit !important;
      font-size: 13.5px !important;
      font-weight: 450 !important;
      line-height: 1 !important;
      letter-spacing: 0.015em !important;
    }

    /* Trois présentations pilotables depuis l'éditeur Shopify :
       message uniquement, numéro uniquement, ou les deux. */
    #header-component .ne-desktop-phone--label .ne-desktop-phone__number,
    #header-component .ne-desktop-phone--number .ne-desktop-phone__label {
      display: none !important;
    }

    #header-component .ne-desktop-phone--both .ne-desktop-phone__number::before {
      content: '•' !important;
      margin-right: 7px !important;
      color: var(--ne-phone-icon, #b7e85f) !important;
    }
  }

  @media screen and (max-width: 1200px) {
    #header-component .ne-desktop-phone {
      display: none !important;
    }
  }


  /* =====================================================
     NUTRI EFFICACE — Actions desktop renforcées V6.6

     Rythme volontairement explicite :
     - 16 à 20 px entre le CTA et la loupe
     - 10 à 12 px entre la loupe et le panier
     - aucun chevauchement dépendant du gap interne d'Horizon

     Les marges sont appliquées aux conteneurs réels plutôt qu'au seul
     column-gap. Cela reste stable après hydratation, sous Safari et WebKit.
     ===================================================== */
  @media screen and (min-width: 1201px) {
    #header-component {
      --ne-desktop-utility-size: 46px;
      --ne-desktop-utility-icon-size: 24px;
      --ne-desktop-utility-gap: clamp(10px, 0.65vw, 12px);
      --ne-desktop-cta-tools-gap: clamp(16px, 1vw, 20px);
      --ne-desktop-utility-border: #dcefc0;
      --ne-desktop-utility-hover: #eef9dc;
    }

    /* On neutralise le gap de la colonne : chaque séparation est ensuite
       contrôlée précisément, quel que soit le markup généré par Horizon. */
    #header-component .header__column--right {
      gap: 0 !important;
    }

    #header-component .ne-desktop-phone {
      margin: 0 var(--ne-desktop-cta-tools-gap) 0 0 !important;
    }

    #header-component .header__column--right .search-action {
      margin: 0 !important;
    }

    /* Le composant header-actions contient notamment le panier. Sa marge
       gauche crée un vrai espace après la loupe, même lorsqu'il est rendu
       dans un conteneur personnalisé ou après une hydratation Shopify. */
    #header-component .header__column--right header-actions,
    #header-component .header__column--right .header-actions {
      display: inline-flex !important;
      align-items: center !important;
      gap: var(--ne-desktop-utility-gap) !important;
      margin: 0 0 0 var(--ne-desktop-utility-gap) !important;
      padding: 0 !important;
    }

    #header-component .header__column--right header-actions > *,
    #header-component .header__column--right .header-actions > *,
    #header-component .header__column--right .header-actions__group {
      align-items: center !important;
      gap: var(--ne-desktop-utility-gap) !important;
    }

    #header-component .header__column--right .search-action,
    #header-component .header__column--right .header-actions__action:not(.account-button) {
      flex: 0 0 var(--ne-desktop-utility-size) !important;
      width: var(--ne-desktop-utility-size) !important;
      height: var(--ne-desktop-utility-size) !important;
      min-width: var(--ne-desktop-utility-size) !important;
      min-height: var(--ne-desktop-utility-size) !important;
      margin-top: 0 !important;
      margin-right: 0 !important;
      margin-bottom: 0 !important;
      margin-left: 0 !important;
      padding: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #111111 !important;
      background-color: #ffffff !important;
      border: 1px solid var(--ne-desktop-utility-border) !important;
      border-radius: var(--ne-menu-radius, 10px) !important;
      box-shadow: 0 2px 7px rgba(17, 17, 17, 0.05) !important;
      box-sizing: border-box !important;
      opacity: 1 !important;
      -webkit-tap-highlight-color: transparent !important;
      transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease !important;
    }

    #header-component .header__column--right .search-action:hover,
    #header-component .header__column--right .search-action:focus-within,
    #header-component .header__column--right .header-actions__action:not(.account-button):hover,
    #header-component .header__column--right .header-actions__action:not(.account-button):focus-visible {
      color: #111111 !important;
      background-color: var(--ne-desktop-utility-hover) !important;
      border-color: var(--ne-menu-accent, #b7e85f) !important;
      box-shadow: 0 4px 11px rgba(17, 17, 17, 0.09) !important;
      transform: translateY(-1px) !important;
      -webkit-transform: translateY(-1px) !important;
    }

    #header-component .header__column--right .search-action:focus-within,
    #header-component .header__column--right .header-actions__action:not(.account-button):focus-visible {
      outline: 3px solid #cce99b !important;
      outline-color: color-mix(in srgb, var(--ne-menu-accent, #b7e85f) 58%, #ffffff) !important;
      outline-offset: 2px !important;
    }

    #header-component .header__column--right .search-action .svg-wrapper,
    #header-component .header__column--right .header-actions__action:not(.account-button) .svg-wrapper {
      width: var(--ne-desktop-utility-icon-size) !important;
      height: var(--ne-desktop-utility-icon-size) !important;
      min-width: var(--ne-desktop-utility-icon-size) !important;
      min-height: var(--ne-desktop-utility-icon-size) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    #header-component .header__column--right .search-action svg,
    #header-component .header__column--right .header-actions__action:not(.account-button) svg {
      width: var(--ne-desktop-utility-icon-size) !important;
      height: var(--ne-desktop-utility-icon-size) !important;
      max-width: none !important;
      max-height: none !important;
      color: currentColor !important;
      overflow: visible !important;
    }

    #header-component .header__column--right .search-action svg :is(path, circle, line, polyline, rect),
    #header-component .header__column--right .header-actions__action:not(.account-button) svg :is(path, circle, line, polyline, rect) {
      stroke-width: 1.8px !important;
      vector-effect: non-scaling-stroke;
    }
  }


  /* =====================================================
     NUTRI EFFICACE — Icônes du header mobile V6.8

     Reprise de la présentation desktop pour améliorer la visibilité :
     - zones tactiles carrées de 44 px
     - bordure vert clair et fond blanc lorsque le header est sticky
     - pictogrammes blancs sur le header transparent
     - retour automatique au noir après activation du sticky

     Aucun déplacement de nœud ni transform structurel : le comportement
     Horizon reste intact sous Safari, WebKit et iOS.
     ===================================================== */
  @media screen and (max-width: 1200px) {
    #header-component[data-menu-style='drawer'] {
      /* V6.10 — Priorite au logo : la place necessaire aux espaces
         est prise sur les capsules, pas sur le lettrage de marque.
         40 px reste au-dessus du minimum WCAG 2.2 (24 px) et la
         hauteur de barre de 60 px conserve une zone tactile confortable.
         Repasser a 44px ici si tu veux le calibre d'origine. */
      --ne-mobile-utility-size: 40px;
      --ne-mobile-utility-icon-size: 21px;
      --ne-mobile-utility-radius: 10px;
      --ne-mobile-utility-border: #dcefc0;
      --ne-mobile-utility-hover: #eef9dc;

      /* --- V6.9 : tokens de rythme horizontal ---------------------
         --ne-mobile-utility-gap  : ecart ENTRE deux capsules
         --ne-mobile-edge         : ecart entre capsule extreme et bord
         --ne-mobile-logo-inset   : reserve autour du logo (0 par defaut)
         Un seul endroit a modifier pour re-regler toute la barre. */
      --ne-mobile-utility-gap: clamp(8px, 3vw, 12px);
      --ne-mobile-edge: clamp(12px, 4vw, 18px);
      /* 0 = le logo garde toute sa cellule centrale. La separation
         visuelle avec les capsules est deja assuree par le column-gap. */
      --ne-mobile-logo-inset: 0px;
      --ne-mobile-bar-min-height: 60px;
      --ne-mobile-bar-padding-block: 8px;
    }

    /* =====================================================
       V6.9 — Rythme horizontal de la barre mobile.

       Cause du defaut "icones collees" : la loupe (colonne rightA)
       etait alignee en `end` et le panier (colonne rightB) en
       `start`. Les deux capsules convergeaient donc l'une vers
       l'autre et annulaient le column-gap de 6-9 px.

       Correction : gap reel entre colonnes + alignement centre dans
       chaque cellule. La grille 5 colonnes native Horizon
       (44 | 44 | 1fr | 44 | 44) reste symetrique, donc le logo
       demeure reellement centre, y compris sous Safari/iOS.
       ===================================================== */
    #header-component[data-menu-style='drawer'] .header__row--top .header__columns {
      grid-template-columns:
        var(--ne-mobile-utility-size)
        var(--ne-mobile-utility-size)
        minmax(0, 1fr)
        var(--ne-mobile-utility-size)
        var(--ne-mobile-utility-size) !important;
      column-gap: var(--ne-mobile-utility-gap) !important;
      padding-inline: var(--ne-mobile-edge) !important;
      padding-block: var(--ne-mobile-bar-padding-block) !important;
      min-height: var(--ne-mobile-bar-min-height) !important;
      align-items: center !important;
    }

    /* Chaque capsule occupe exactement le centre de sa cellule :
       plus aucune derive d'alignement entre loupe et panier. */
    #header-component[data-menu-style='drawer'] .header__icon--menu,
    #header-component[data-menu-style='drawer'] .search-action,
    #header-component[data-menu-style='drawer'] header-actions {
      justify-self: center !important;
      align-self: center !important;
    }

    /* Si header-actions expose plusieurs boutons (compte + panier),
       ils conservent le meme ecart que le reste de la barre. */
    #header-component[data-menu-style='drawer'] header-actions,
    #header-component[data-menu-style='drawer'] .header-actions,
    #header-component[data-menu-style='drawer'] .header-actions__group {
      display: inline-flex !important;
      align-items: center !important;
      gap: var(--ne-mobile-utility-gap) !important;
      margin: 0 !important;
    }

    /* Le logo ne vient jamais lecher les capsules voisines. */
    #header-component[data-menu-style='drawer'] .header__row--top .header-logo {
      justify-self: center !important;
      padding-inline: var(--ne-mobile-logo-inset) !important;
    }

    /* Tres petits ecrans : on resserre d'abord les marges de bord,
       jamais l'ecart entre deux icones (cible tactile preservee). */
    @media screen and (max-width: 380px) {
      #header-component[data-menu-style='drawer'] {
        --ne-mobile-edge: 10px;
        --ne-mobile-utility-gap: 8px;
        --ne-mobile-logo-inset: 0px;
      }
    }

    /* Hamburger, recherche et panier : même famille visuelle que desktop. */
    #header-component[data-menu-style='drawer'] .header__icon--menu,
    #header-component[data-menu-style='drawer'] .search-action,
    #header-component[data-menu-style='drawer'] .header-actions__action:not(.account-button) {
      width: var(--ne-mobile-utility-size) !important;
      height: var(--ne-mobile-utility-size) !important;
      min-width: var(--ne-mobile-utility-size) !important;
      min-height: var(--ne-mobile-utility-size) !important;
      margin: 0 !important;
      padding: 8px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #111111 !important;
      background-color: #ffffff !important;
      border: 1px solid var(--ne-mobile-utility-border) !important;
      border-radius: var(--ne-mobile-utility-radius) !important;
      box-shadow: 0 2px 7px rgba(17, 17, 17, 0.06) !important;
      box-sizing: border-box !important;
      opacity: 1 !important;
      -webkit-tap-highlight-color: transparent !important;
      transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease !important;
    }

    #header-component[data-menu-style='drawer'] .header__icon--menu:hover,
    #header-component[data-menu-style='drawer'] .header__icon--menu:focus-visible,
    #header-component[data-menu-style='drawer'] .search-action:hover,
    #header-component[data-menu-style='drawer'] .search-action:focus-within,
    #header-component[data-menu-style='drawer'] .header-actions__action:not(.account-button):hover,
    #header-component[data-menu-style='drawer'] .header-actions__action:not(.account-button):focus-visible {
      color: #111111 !important;
      background-color: var(--ne-mobile-utility-hover) !important;
      border-color: var(--ne-menu-accent, #b7e85f) !important;
      box-shadow: 0 4px 11px rgba(17, 17, 17, 0.09) !important;
      transform: translateY(-1px) !important;
      -webkit-transform: translateY(-1px) !important;
    }

    #header-component[data-menu-style='drawer'] .header__icon--menu:focus-visible,
    #header-component[data-menu-style='drawer'] .search-action:focus-within,
    #header-component[data-menu-style='drawer'] .header-actions__action:not(.account-button):focus-visible {
      outline: 3px solid #cce99b !important;
      outline-offset: 2px !important;
    }

    #header-component[data-menu-style='drawer'] :is(
        .header__icon--menu,
        .search-action,
        .header-actions__action:not(.account-button)
      ) .svg-wrapper,
    #header-component[data-menu-style='drawer'] :is(
        .header__icon--menu,
        .search-action,
        .header-actions__action:not(.account-button)
      ) svg {
      width: var(--ne-mobile-utility-icon-size) !important;
      height: var(--ne-mobile-utility-icon-size) !important;
      min-width: var(--ne-mobile-utility-icon-size) !important;
      min-height: var(--ne-mobile-utility-icon-size) !important;
      max-width: none !important;
      max-height: none !important;
      color: currentColor !important;
    }

    #header-component[data-menu-style='drawer'] :is(
        .header__icon--menu,
        .search-action,
        .header-actions__action:not(.account-button)
      ) svg :is(path, circle, line, polyline, rect) {
      stroke-width: 1.9px !important;
      vector-effect: non-scaling-stroke;
    }

    /* Le hamburger personnalisé reste bien centré dans sa nouvelle capsule. */
    #header-component[data-menu-style='drawer'] .header__icon--menu .ne-hamburger {
      width: 23px !important;
      height: 17px !important;
      flex-basis: 23px !important;
      color: currentColor !important;
    }

    /* État transparent mobile : pictogrammes blancs, bordure blanche légère.
       Le fond translucide garde les icônes lisibles sur les images claires. */
    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      .header__icon--menu,
    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      .search-action,
    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      .header-actions__action:not(.account-button) {
      color: #ffffff !important;
      background-color: rgba(17, 17, 17, 0.10) !important;
      border-color: rgba(255, 255, 255, 0.72) !important;
      box-shadow: 0 2px 9px rgba(0, 0, 0, 0.12) !important;
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
    }

    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      .header__icon--menu:hover,
    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      .header__icon--menu:focus-visible,
    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      .search-action:hover,
    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      .search-action:focus-within,
    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      .header-actions__action:not(.account-button):hover,
    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      .header-actions__action:not(.account-button):focus-visible {
      color: #ffffff !important;
      background-color: rgba(255, 255, 255, 0.18) !important;
      border-color: #ffffff !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16) !important;
    }

    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      :is(.header__icon--menu, .search-action, .header-actions__action:not(.account-button)):focus-visible,
    #header-component[transparent]:not([data-sticky-state='active'])[data-menu-style='drawer']
      .search-action:focus-within {
      outline-color: rgba(255, 255, 255, 0.92) !important;
    }

    /* Sticky actif : retour explicite au noir, même si le schéma transparent
       du thème tente encore d'hériter de la couleur blanche. */
    #header-component[data-sticky-state='active'][data-menu-style='drawer']
      .header__icon--menu,
    #header-component[data-sticky-state='active'][data-menu-style='drawer']
      .search-action,
    #header-component[data-sticky-state='active'][data-menu-style='drawer']
      .header-actions__action:not(.account-button) {
      color: #111111 !important;
      background-color: #ffffff !important;
      border-color: var(--ne-mobile-utility-border) !important;
      box-shadow: 0 2px 7px rgba(17, 17, 17, 0.06) !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }


  /* =====================================================
     NUTRI EFFICACE — Compteur panier centré dans la capsule V6.13

     Le composant <cart-icon> occupe désormais toute la zone intérieure
     du bouton. La bulle est placée à 50 % / 50 % de cette zone : son
     centrage ne dépend donc plus de la taille différente des pictogrammes
     desktop, tablette et mobile.

     Le wrapper du SVG natif reste en place pour conserver les dimensions,
     mais devient invisible quand le panier contient un produit. Aucun trait
     noir ne peut ainsi apparaître derrière la bulle orange.
     ===================================================== */
  #header-component
    cart-icon.header-actions__cart-icon--has-cart:not(.header-actions__cart-icon--text) {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
    overflow: visible !important;
  }

  /* Le panier SVG reste dans le flux afin de préserver la géométrie du
     composant, mais il est totalement invisible dès que le compteur existe. */
  #header-component
    cart-icon.header-actions__cart-icon--has-cart:not(.header-actions__cart-icon--text)
    > .svg-wrapper {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #header-component
    cart-icon.header-actions__cart-icon--has-cart:not(.header-actions__cart-icon--text)
    > .svg-wrapper
    svg {
    opacity: 0 !important;
    visibility: hidden !important;
    mask: none !important;
    -webkit-mask: none !important;
  }

  #header-component
    cart-icon.header-actions__cart-icon--has-cart:not(.header-actions__cart-icon--text)
    > .cart-bubble {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--cart-bubble-size, 20px) !important;
    height: var(--cart-bubble-size, 20px) !important;
    min-width: var(--cart-bubble-size, 20px) !important;
    min-height: var(--cart-bubble-size, 20px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #header-component
    cart-icon.header-actions__cart-icon--has-cart:not(.header-actions__cart-icon--text)
    > .cart-bubble
    .cart-bubble__background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
  }

  #header-component
    cart-icon.header-actions__cart-icon--has-cart:not(.header-actions__cart-icon--text)
    > .cart-bubble
    .cart-bubble__text {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  #header-component
    cart-icon.header-actions__cart-icon--has-cart:not(.header-actions__cart-icon--text)
    > .cart-bubble
    .cart-bubble__text-count {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }
/* END_SECTION:header */
/* START_BLOCK:_header-logo (INDEX:70) */
.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: 0;
    }

    @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:71) */
.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: 750px) {
    #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%;
  }

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

  .menu-list__link {
    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);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    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: var(--menu-top-level-font-color);
    }

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

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [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;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .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;
  }

  .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%;
  }

  .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:email-signup (INDEX:102) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */
/* START_BLOCK:image (INDEX:110) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */
/* START_BLOCK:popup-link (INDEX:119) */
/* =========================================================
     NUTRI-EFFICACE — BANDEAU RECETTES OFFERTES AVANT LE FOOTER
     ========================================================= */

  .shopify-section.shopify-section-group-footer-group:
    has(.popup-link--recevoir-des-recettes-offertes) .section-background {
    background:
      radial-gradient(
        circle at 12% 20%,
        rgba(183, 232, 95, 0.28),
        transparent 32%
      ),
      linear-gradient(135deg, #f4fae8 0%, #eef8dc 100%) !important;
    border-top: 1px solid rgba(134, 189, 50, 0.36);
    border-bottom: 1px solid rgba(134, 189, 50, 0.28);
  }

  .shopify-section.shopify-section-group-footer-group:
    has(.popup-link--recevoir-des-recettes-offertes) .section {
    min-height: 0 !important;
  }

  .shopify-section.shopify-section-group-footer-group:
    has(.popup-link--recevoir-des-recettes-offertes) .custom-section-content {
    width: 100%;
  }

  .shopify-section.shopify-section-group-footer-group:
    has(.popup-link--recevoir-des-recettes-offertes) .section-content-wrapper {
    width: 100%;
    padding-block: clamp(28px, 4vw, 46px) !important;
  }

  .popup-link--recevoir-des-recettes-offertes {
    display: block;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__button {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 124px;
    margin: 0;
    padding: 24px 26px;
    box-sizing: border-box;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    border: 1px solid rgba(134, 189, 50, 0.46);
    border-radius: 20px;
    background:
      linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.94) 72%,
        rgba(183, 232, 95, 0.18) 100%
      );
    color: #111111;
    text-align: left;
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.07);
    cursor: pointer;
    transition:
      transform 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__button::after {
    content: "";
    position: absolute;
    top: -54px;
    right: 150px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: rgba(183, 232, 95, 0.13);
    pointer-events: none;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__button:hover {
    border-color: rgba(134, 189, 50, 0.72);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(17, 17, 17, 0.1);
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__button:focus-visible {
    outline: 3px solid rgba(134, 189, 50, 0.52);
    outline-offset: 4px;
  }

  .popup-link__lead-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(134, 189, 50, 0.42);
    border-radius: 18px;
    background: #eef8dc;
    color: #456b12;
  }

  .popup-link__lead-icon svg {
    display: block;
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .popup-link__lead-icon svg path:last-child {
    fill: #ffc206;
    stroke: #dca700;
    stroke-width: 1;
  }

  .popup-link__lead-copy {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .popup-link__lead-eyebrow {
    display: inline-flex;
    margin: 0 0 5px;
    color: #6da31f;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__label {
    color: #111111;
    font-size: clamp(1.18rem, 1.6vw, 1.48rem);
    font-weight: 820;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  .popup-link__lead-subtitle {
    display: block;
    max-width: 780px;
    margin-top: 7px;
    color: rgba(17, 17, 17, 0.67);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
  }

  .popup-link__lead-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-width: 148px;
    min-height: 48px;
    padding: 0 18px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 12px;
    background: #ffc206;
    color: #111111;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(255, 194, 6, 0.2);
  }

  .popup-link__lead-cta svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
  }

  .popup-link--recevoir-des-recettes-offertes
    .popup-link__button:hover
    .popup-link__lead-cta svg {
    transform: translateX(3px);
  }

  @media screen and (max-width: 749px) {
    .shopify-section.shopify-section-group-footer-group:
      has(.popup-link--recevoir-des-recettes-offertes) .section-content-wrapper {
      padding-block: 24px !important;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__button {
      min-height: 0;
      padding: 19px 17px;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 13px;
      border-radius: 17px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__button::after {
      top: auto;
      right: -45px;
      bottom: -70px;
      width: 145px;
      height: 145px;
    }

    .popup-link__lead-icon {
      width: 48px;
      height: 48px;
      flex-basis: 48px;
      border-radius: 14px;
    }

    .popup-link__lead-icon svg {
      width: 25px;
      height: 25px;
    }

    .popup-link__lead-eyebrow {
      margin-bottom: 4px;
      font-size: 0.66rem;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__label {
      font-size: 1.08rem;
      line-height: 1.18;
    }

    .popup-link__lead-subtitle {
      margin-top: 6px;
      font-size: 0.82rem;
      line-height: 1.45;
    }

    .popup-link__lead-cta {
      width: 100%;
      min-width: 0;
      min-height: 47px;
      margin-top: 4px;
      grid-column: 1 / -1;
      border-radius: 11px;
    }
  }

  /* =========================================================
     NUTRI-EFFICACE — LIEN D’OUVERTURE
     ========================================================= */

  .popup-link__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    vertical-align: middle;
    line-height: 1.2;
  }

  .popup-link__label {
    display: block;
    line-height: inherit;
  }

  .popup-link__icon {
    display: block;
    width: clamp(18px, 0.82em, 24px);
    height: clamp(18px, 0.82em, 24px);
    flex: 0 0 clamp(18px, 0.82em, 24px);
    align-self: center;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* =========================================================
     NUTRI-EFFICACE — FENÊTRE MODALE / TIROIR
     ========================================================= */

  .popup-link__content {
    --ne-black: #111111;
    --ne-green: #b7e85f;
    --ne-green-strong: #86bd32;
    --ne-green-soft: #eef8dc;
    --ne-yellow: #ffc206;
    --ne-border: rgba(134, 189, 50, 0.36);

    max-width: min(94vw, 520px);
    max-height: min(92dvh, var(--modal-max-height));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ne-border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 26px 70px rgba(17, 17, 17, 0.22);
    color: var(--ne-black);
  }

  .popup-link__content::backdrop {
    background: rgba(17, 17, 17, 0.58);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .popup-link__inner {
    display: flex;
    width: 100%;
    height: 100%;
    max-height: inherit;
    padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 42px);
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    scrollbar-width: thin;
    scrollbar-color: var(--ne-green-strong) rgba(183, 232, 95, 0.16);
  }

  .popup-link__inner::-webkit-scrollbar {
    width: 7px;
  }

  .popup-link__inner::-webkit-scrollbar-track {
    background: rgba(183, 232, 95, 0.14);
  }

  .popup-link__inner::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--ne-green-strong);
  }

  /* =========================================================
     TIROIR LATÉRAL
     ========================================================= */

  .popup-link__content--drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: clamp(420px, 31vw, 500px);
    max-width: 94vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-left: 3px solid var(--ne-green);
    border-radius: 0;
    background:
      linear-gradient(
        180deg,
        rgba(238, 248, 220, 0.52) 0,
        rgba(255, 255, 255, 0) 165px
      ),
      #ffffff;
    box-shadow: -24px 0 70px rgba(17, 17, 17, 0.22);
  }

  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  @keyframes ne-popup-drawer-in {
    from {
      opacity: 0.75;
      transform: translateX(100%);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes ne-popup-drawer-out {
    from {
      opacity: 1;
      transform: translateX(0);
    }

    to {
      opacity: 0.75;
      transform: translateX(100%);
    }
  }

  .popup-link__content--drawer[open] {
    animation: ne-popup-drawer-in 0.3s ease-out both;
  }

  .popup-link__content--drawer.dialog-closing {
    animation: ne-popup-drawer-out 0.24s ease-in both;
  }

  /* =========================================================
     IMAGE DU COACH
     ========================================================= */

  .popup-link__inner .image-block {
    width: 148px !important;
    max-width: 148px !important;
    height: auto !important;
    margin: 0 auto 24px !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .popup-link__inner .image-block__image {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    border: 2px solid rgba(134, 189, 50, 0.38) !important;
    border-radius: 24px !important;
    background: var(--ne-green-soft);
    box-shadow: 0 14px 32px rgba(17, 17, 17, 0.1);
  }

  /* =========================================================
     CONTENU ÉDITORIAL
     ========================================================= */

  .popup-link__inner .text-block,
  .popup-link__inner rte-formatter {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ne-black);
    text-align: left !important;
  }

  .popup-link__inner .rte h1,
  .popup-link__inner .rte h2,
  .popup-link__inner .rte h3,
  .popup-link__inner .rte h4,
  .popup-link__inner .rte h5,
  .popup-link__inner .rte h6 {
    max-width: 390px;
    margin: 0 auto 20px;
    color: var(--ne-black);
    font-size: clamp(1.7rem, 3.2vw, 2.15rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-align: center;
  }

  .popup-link__inner .rte h1 br,
  .popup-link__inner .rte h2 br,
  .popup-link__inner .rte h3 br,
  .popup-link__inner .rte h4 br,
  .popup-link__inner .rte h5 br,
  .popup-link__inner .rte h6 br {
    display: none;
  }

  .popup-link__inner .rte p {
    margin: 0 0 15px;
    color: rgba(17, 17, 17, 0.82);
    font-size: 0.96rem;
    line-height: 1.62;
    text-align: left;
  }

  .popup-link__inner .rte p br:first-child,
  .popup-link__inner .rte p br:last-child {
    display: none;
  }

  .popup-link__inner .rte ul {
    display: grid;
    margin: 18px 0 20px;
    padding: 0;
    gap: 10px;
    list-style: none;
  }

  .popup-link__inner .rte li {
    position: relative;
    min-height: 22px;
    padding-left: 31px;
    color: rgba(17, 17, 17, 0.84);
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .popup-link__inner .rte li::before {
    content: "✓";
    position: absolute;
    top: 0.05em;
    left: 0;
    display: inline-flex;
    width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ne-green);
    color: #315006;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
  }

  .popup-link__inner .rte p:has(> strong) {
    margin: 21px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--ne-border);
    border-radius: 13px;
    background: var(--ne-green-soft);
    color: var(--ne-black);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .popup-link__inner .rte p:has(> strong) strong {
    font-weight: 800;
  }


  /* =========================================================
     CORRECTIF V4 — COULEUR DES TEXTES DANS LES POP-UPS
     Les blocs d'avis peuvent hériter d'une couleur verte du thème.
  ========================================================= */
  .popup-link__content .popup-link__inner :where(
    p,
    li,
    blockquote,
    cite,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong,
    em
  ) {
    color: var(--ne-black) !important;
  }

  /* Les éléments purement décoratifs ou de notation conservent
     leurs couleurs spécifiques lorsqu'elles sont appliquées via SVG/pseudo-élément. */
  .popup-link__content .popup-link__inner svg,
  .popup-link__content .popup-link__inner svg * {
    color: inherit;
  }

  /* =========================================================
     FORMULAIRE E-MAIL
     ========================================================= */

  .popup-link__inner .email-signup-block {
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
  }

  .popup-link__inner .email-signup__form {
    width: 100%;
    margin: 0;
  }

  .popup-link__inner .email-signup__input-group,
  .popup-link__inner .email-signup__input-group--integrated {
    display: grid !important;
    width: 100%;
    min-height: 58px;
    padding: 5px !important;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(134, 189, 50, 0.46) !important;
    border-radius: 14px !important;
    background: #ffffff;
    box-shadow: 0 9px 24px rgba(17, 17, 17, 0.06);
  }

  .popup-link__inner .email-signup__input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    outline: 0;
    background: #ffffff !important;
    color: var(--ne-black);
    font-size: 0.9rem;
    box-shadow: none !important;
  }

  .popup-link__inner .email-signup__input::placeholder {
    color: rgba(17, 17, 17, 0.5);
  }

  .popup-link__inner .email-signup__input:focus {
    outline: 2px solid rgba(134, 189, 50, 0.52);
    outline-offset: -2px;
  }

  .popup-link__inner .email-signup__button {
    min-width: 116px;
    min-height: 48px;
    padding: 0 17px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--ne-yellow) !important;
    color: var(--ne-black) !important;
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none !important;
    transition:
      background-color 0.2s ease,
      transform 0.2s ease;
  }

  .popup-link__inner .email-signup__button:hover,
  .popup-link__inner .email-signup__button:focus-visible {
    background: #f0b400 !important;
    color: var(--ne-black) !important;
    transform: translateY(-1px);
  }

  /* =========================================================
     BOUTON DE FERMETURE
     ========================================================= */

  .popup-link__close {
    position: absolute;
    z-index: 5;
    top: 16px;
    right: 16px;
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(134, 189, 50, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ne-black);
    opacity: 1;
    animation: none;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.08);
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      transform 0.2s ease;
  }

  .popup-link__close:hover,
  .popup-link__close:focus-visible {
    border-color: var(--ne-green-strong);
    background: var(--ne-green-soft);
    transform: rotate(4deg);
  }

  .popup-link__close svg {
    width: 15px;
    height: 15px;
  }

  /* =========================================================
     MOBILE
     ========================================================= */

  @media screen and (max-width: 749px) {
    .popup-link__content,
    .popup-link__content--drawer {
      inset: 0;
      width: 100vw;
      max-width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      border: 0;
      border-top: 3px solid var(--ne-green);
      border-radius: 0;
    }

    .popup-link__inner {
      padding:
        72px
        22px
        calc(30px + env(safe-area-inset-bottom, 0px));
    }

    .popup-link__inner .image-block {
      width: 132px !important;
      max-width: 132px !important;
      margin-bottom: 20px !important;
    }

    .popup-link__inner .rte h1,
    .popup-link__inner .rte h2,
    .popup-link__inner .rte h3,
    .popup-link__inner .rte h4,
    .popup-link__inner .rte h5,
    .popup-link__inner .rte h6 {
      max-width: 315px;
      margin-bottom: 18px;
      font-size: clamp(1.65rem, 7vw, 2rem);
    }

    .popup-link__inner .rte p {
      font-size: 0.94rem;
      line-height: 1.6;
      text-align: justify;
      text-align-last: left;
      text-justify: inter-word;
    }

    .popup-link__inner .rte li {
      font-size: 0.9rem;
    }

    .popup-link__inner .rte p:has(> strong) {
      text-align: left;
      text-align-last: left;
    }

    /* Formulaire mobile : champ et bouton distincts, sans bloc surdimensionné */
    .popup-link__inner .email-signup__input-group,
    .popup-link__inner .email-signup__input-group--integrated {
      display: flex !important;
      width: 100% !important;
      min-height: 0 !important;
      height: auto !important;
      padding: 0 !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 10px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .popup-link__inner .email-signup__input {
      position: static !important;
      inset: auto !important;
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      height: 52px !important;
      min-height: 52px !important;
      margin: 0 !important;
      padding: 0 16px !important;
      flex: 0 0 52px !important;
      border: 1px solid rgba(134, 189, 50, 0.52) !important;
      border-radius: 12px !important;
      background: #ffffff !important;
      text-align: center;
      transform: none !important;
      box-shadow: 0 6px 16px rgba(17, 17, 17, 0.05) !important;
    }

    .popup-link__inner .email-signup__button {
      position: static !important;
      inset: auto !important;
      display: inline-flex !important;
      width: 100% !important;
      height: 52px !important;
      min-height: 52px !important;
      margin: 0 !important;
      padding: 0 18px !important;
      flex: 0 0 52px !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 12px !important;
      line-height: 1 !important;
      transform: none !important;
    }

    .popup-link__inner .email-signup__button:hover,
    .popup-link__inner .email-signup__button:focus-visible {
      transform: none !important;
    }

    .popup-link__close {
      top: calc(14px + env(safe-area-inset-top, 0px));
      right: 14px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .popup-link__content--drawer[open],
    .popup-link__content--drawer.dialog-closing {
      animation: none;
    }
  }

  /* =========================================================
     CORRECTIF V6 — BANDEAU CENTRÉ DESKTOP + UX MOBILE
     ========================================================= */

  .shopify-section.shopify-section-group-footer-group:
    has(.popup-link--recevoir-des-recettes-offertes) .custom-section-content,
  .shopify-section.shopify-section-group-footer-group:
    has(.popup-link--recevoir-des-recettes-offertes) .section-content-wrapper {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .shopify-section.shopify-section-group-footer-group:
    has(.popup-link--recevoir-des-recettes-offertes) .section-content-wrapper {
    padding: clamp(28px, 3vw, 40px) 22px !important;
  }

  .popup-link--recevoir-des-recettes-offertes {
    width: min(100%, 1120px);
    max-width: 1120px;
    margin: 0 auto;
  }

  /* Desktop : colonnes latérales symétriques pour garder le texte
     parfaitement centré dans la carte */
  .popup-link--recevoir-des-recettes-offertes .popup-link__button {
    width: 100%;
    min-height: 138px;
    margin: 0 auto;
    padding: 25px 30px;
    grid-template-columns:
      minmax(150px, 180px)
      minmax(0, 1fr)
      minmax(150px, 180px);
    justify-content: center;
    gap: 22px;
    text-align: center;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__button::after {
    top: -68px;
    right: -38px;
    width: 190px;
    height: 190px;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
    justify-self: center;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-copy {
    width: 100%;
    align-items: center;
    justify-self: center;
    text-align: center;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-eyebrow,
  .popup-link--recevoir-des-recettes-offertes .popup-link__label,
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle {
    text-align: center;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle {
    max-width: 640px;
    margin-right: auto;
    margin-left: auto;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
    width: 168px;
    min-width: 168px;
    justify-self: center;
  }

  /* Tablettes */
  @media screen and (max-width: 990px) and (min-width: 750px) {
    .popup-link--recevoir-des-recettes-offertes .popup-link__button {
      grid-template-columns: 92px minmax(0, 1fr) 150px;
      padding-inline: 22px;
      gap: 16px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
      width: 56px;
      height: 56px;
      flex-basis: 56px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
      width: 150px;
      min-width: 150px;
    }
  }

  /* Mobile : vraie carte verticale centrée */
  @media screen and (max-width: 749px) {
    .shopify-section.shopify-section-group-footer-group:
      has(.popup-link--recevoir-des-recettes-offertes) .section-content-wrapper {
      padding: 22px 16px !important;
    }

    .popup-link--recevoir-des-recettes-offertes {
      width: 100%;
      max-width: 430px;
      margin: 0 auto;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__button {
      display: flex !important;
      width: 100%;
      min-height: 0;
      padding: 23px 19px 19px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      border-radius: 18px;
      text-align: center;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__button::after {
      top: -64px;
      right: -58px;
      bottom: auto;
      width: 150px;
      height: 150px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
      width: 58px;
      height: 58px;
      flex: 0 0 58px;
      margin: 0 auto 15px;
      border-radius: 16px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
      width: 29px;
      height: 29px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-copy {
      width: 100%;
      align-items: center;
      text-align: center;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-eyebrow {
      margin-bottom: 6px;
      font-size: 0.68rem;
      text-align: center;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__label {
      max-width: 290px;
      margin: 0 auto;
      font-size: 1.22rem;
      line-height: 1.15;
      text-align: center;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle {
      max-width: 310px;
      margin: 9px auto 0;
      font-size: 0.86rem;
      line-height: 1.5;
      text-align: center;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
      width: 100%;
      max-width: 310px;
      min-width: 0;
      min-height: 50px;
      margin: 18px auto 0;
      flex: 0 0 auto;
      border-radius: 12px;
    }
  }

  /* Très petits écrans */
  @media screen and (max-width: 390px) {
    .popup-link--recevoir-des-recettes-offertes .popup-link__button {
      padding: 21px 16px 17px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__label {
      max-width: 260px;
      font-size: 1.14rem;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle,
    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
      max-width: 280px;
    }
  }


  /* =========================================================
     CORRECTIF V7 — BANDEAU RECETTES OFFERTES
     Icône cadeau + rendu aligné avec la rassurance
     ========================================================= */

  /* Desktop : bandeau plus harmonieux et zone icône premium */
  .popup-link--recevoir-des-recettes-offertes .popup-link__button {
    min-height: 152px;
    padding: 24px 28px;
    grid-template-columns: 196px minmax(0, 1fr) 188px;
    gap: 24px;
    align-items: center;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__button::after {
    top: auto;
    right: 108px;
    bottom: -82px;
    width: 186px;
    height: 186px;
    background: rgba(183, 232, 95, 0.16);
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
    width: 156px;
    height: 106px;
    flex: 0 0 156px;
    justify-self: center;
    border: 1px solid rgba(134, 189, 50, 0.26);
    border-radius: 24px;
    background: rgba(183, 232, 95, 0.18);
    box-shadow: none;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
    width: 72px;
    height: 72px;
    overflow: visible;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-box,
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-lid {
    fill: rgba(255, 255, 255, 0.42);
    stroke: #86bd32;
    stroke-width: 2.1;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-ribbon {
    stroke: #86bd32;
    stroke-width: 2.5;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-bow {
    fill: rgba(255, 194, 6, 0.36);
    stroke: #d7a104;
    stroke-width: 1.8;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-copy {
    max-width: 100%;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-eyebrow {
    margin-bottom: 7px;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__label {
    max-width: 100%;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle {
    max-width: 600px;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
    width: 170px;
    min-width: 170px;
    min-height: 52px;
    border-radius: 13px;
  }

  /* Tablettes */
  @media screen and (max-width: 990px) and (min-width: 750px) {
    .popup-link--recevoir-des-recettes-offertes .popup-link__button {
      min-height: 140px;
      padding: 22px 22px;
      grid-template-columns: 132px minmax(0, 1fr) 154px;
      gap: 18px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
      width: 118px;
      height: 86px;
      flex-basis: 118px;
      border-radius: 20px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
      width: 58px;
      height: 58px;
    }
  }

  /* Mobile : vraie carte UX, pas de décalage entre icône/texte/CTA */
  @media screen and (max-width: 749px) {
    .popup-link--recevoir-des-recettes-offertes {
      max-width: 420px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__button {
      display: flex !important;
      min-height: 0;
      padding: 22px 16px 18px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      text-align: center;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__button::after {
      right: -62px;
      bottom: -74px;
      width: 146px;
      height: 146px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
      width: 84px;
      height: 84px;
      flex: 0 0 84px;
      margin: 0 auto 14px;
      border-radius: 21px;
      background: rgba(183, 232, 95, 0.18);
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
      width: 48px;
      height: 48px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-copy {
      width: 100%;
      align-items: center;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-eyebrow,
    .popup-link--recevoir-des-recettes-offertes .popup-link__label,
    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle {
      text-align: center;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__label {
      max-width: 285px;
      margin: 0 auto;
      font-size: 1.18rem;
      line-height: 1.16;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle {
      max-width: 300px;
      margin-top: 8px;
      font-size: 0.84rem;
      line-height: 1.48;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
      width: 100%;
      max-width: 292px;
      min-width: 0;
      min-height: 50px;
      margin-top: 17px;
      border-radius: 12px;
    }
  }

  @media screen and (max-width: 390px) {
    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
      width: 78px;
      height: 78px;
      flex-basis: 78px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
      width: 44px;
      height: 44px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
      max-width: 274px;
    }
  }


  /* =========================================================
     CORRECTIF V8 — CTA PRÉ-FOOTER
     Icône plus compacte, couleur #7BAC2B, sans demi-cercle décoratif
     ========================================================= */

  /* Desktop */
  .popup-link--recevoir-des-recettes-offertes .popup-link__button {
    min-height: 132px;
    padding: 22px 26px;
    grid-template-columns: 112px minmax(0, 1fr) 170px;
    gap: 20px;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__button::after {
    display: none !important;
    content: none !important;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
    width: 86px;
    height: 86px;
    flex: 0 0 86px;
    justify-self: center;
    border: 1px solid rgba(134, 189, 50, 0.26);
    border-radius: 21px;
    background: rgba(183, 232, 95, 0.18);
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
    width: 50px;
    height: 50px;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-box,
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-lid {
    fill: rgba(255, 255, 255, 0.42);
    stroke: #7BAC2B;
    stroke-width: 2.1;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-ribbon {
    stroke: #7BAC2B;
    stroke-width: 2.5;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-bow {
    fill: rgba(255, 194, 6, 0.20);
    stroke: #7BAC2B;
    stroke-width: 1.8;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-eyebrow {
    margin-bottom: 6px;
    color: #7BAC2B;
    font-size: 0.74rem;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__label {
    font-size: clamp(1.12rem, 1.45vw, 1.34rem);
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle {
    max-width: 560px;
    margin-top: 6px;
    font-size: 0.88rem;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
    width: 172px;
    min-width: 172px;
    min-height: 50px;
  }

  /* Tablettes */
  @media screen and (max-width: 990px) and (min-width: 750px) {
    .popup-link--recevoir-des-recettes-offertes .popup-link__button {
      min-height: 126px;
      padding: 20px 22px;
      grid-template-columns: 96px minmax(0, 1fr) 154px;
      gap: 16px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
      width: 78px;
      height: 78px;
      flex-basis: 78px;
      border-radius: 18px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
      width: 46px;
      height: 46px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle {
      font-size: 0.84rem;
    }
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    .popup-link--recevoir-des-recettes-offertes {
      max-width: 400px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__button {
      padding: 20px 16px 17px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
      width: 72px;
      height: 72px;
      flex: 0 0 72px;
      margin: 0 auto 13px;
      border-radius: 18px;
      background: rgba(183, 232, 95, 0.18);
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
      width: 42px;
      height: 42px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-eyebrow {
      margin-bottom: 6px;
      font-size: 0.66rem;
      line-height: 1.25;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__label {
      max-width: 285px;
      font-size: 1.14rem;
      line-height: 1.16;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle {
      max-width: 292px;
      margin-top: 8px;
      font-size: 0.82rem;
      line-height: 1.46;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
      max-width: 292px;
      min-height: 49px;
      margin-top: 16px;
    }
  }

  @media screen and (max-width: 390px) {
    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
      width: 68px;
      height: 68px;
      flex-basis: 68px;
      border-radius: 17px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
      width: 39px;
      height: 39px;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__label {
      font-size: 1.08rem;
    }

    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-subtitle,
    .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
      max-width: 270px;
    }
  }


  /* =========================================================
     CORRECTIF V9 — FINITIONS CTA PRÉ-FOOTER
     ========================================================= */

  /* Bloc icône : sans bordure, comme demandé */
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
    border: 0 !important;
    box-shadow: none !important;
    background: rgba(183, 232, 95, 0.18) !important;
  }

  /* Icône cadeau : version verte normale (même esprit que la couleur hover souhaitée) */
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-box,
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-lid,
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-ribbon,
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-bow {
    fill: none !important;
    stroke: #7BAC2B !important;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-box,
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-lid {
    stroke-width: 2.15 !important;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-ribbon {
    stroke-width: 2.45 !important;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon .gift-bow {
    stroke-width: 1.9 !important;
  }

  /* Effet hover : bump identique à la logique de la réassurance */
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
    transition: transform 0.3s ease;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__button:hover .popup-link__lead-icon svg,
  .popup-link--recevoir-des-recettes-offertes .popup-link__button:focus-visible .popup-link__lead-icon svg {
    transform: translateY(-2px) scale(1.06);
  }

  /* Bouton CTA : flèche explicitement noire */
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta {
    color: #111111 !important;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta svg,
  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-cta svg path {
    stroke: #111111 !important;
    color: #111111 !important;
  }


  /* =========================================================
     CORRECTIF V10 — BLOC ICÔNE SANS BORDURE, SANS HOVER
     ========================================================= */

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__lead-icon svg {
    transition: none !important;
    transform: none !important;
  }

  .popup-link--recevoir-des-recettes-offertes .popup-link__button:hover .popup-link__lead-icon svg,
  .popup-link--recevoir-des-recettes-offertes .popup-link__button:focus-visible .popup-link__lead-icon svg {
    transform: none !important;
  }
/* END_BLOCK:popup-link */
/* START_SNIPPET:background-media (INDEX:138) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:cart-bubble (INDEX:145) */
.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(--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(--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:146) */
.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:cart-products (INDEX:147) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap);
  }

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

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */
/* START_SNIPPET:header-actions (INDEX:164) */
.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;
  }

  .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;
    width: 100%;
    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: var(--sidebar-width);
      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: 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;
    }
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:header-drawer (INDEX:165) */
.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: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .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: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

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

  /* 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;
  }
/* END_SNIPPET:header-drawer */
/* START_SNIPPET:predictive-search-styles (INDEX:186) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

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

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:193) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */
/* START_SNIPPET:quick-add-modal-styles (INDEX:197) */
#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:resource-card (INDEX:201) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */
/* START_SNIPPET:search-modal (INDEX:206) */
/* 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 {
    margin: auto;
    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 {
      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:207) */
.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:208) */
.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);
  }
/* END_SNIPPET:section */
/* START_SNIPPET:skip-to-content-link (INDEX:210) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */
/* START_SNIPPET:slideshow-styles (INDEX:216) */
/*
   * 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:226) */
: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);
  }
/* END_SNIPPET:text */