/** Shopify CDN: Minification failed

Line 1362:27 Unexpected "`"
Line 1363:67 Unterminated string token

**/
/* START_SECTION:footer-utilities (INDEX:9) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-foreground-muted);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      text-align: left;
    }
  }

  .utilities a {
    color: var(--color-foreground-muted);
  }

  .utilities > * {
    text-align: center;

    @media screen and (min-width: 750px) {
      text-align: left;
      justify-self: start;
    }
  }

  /* Dynamic positioning based on number of blocks */
  @media screen and (min-width: 750px) {
    /* 1 block: Single column, left aligned */
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

    /* 2 blocks: Two equal columns, start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }

    /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */
/* START_SECTION:footer (INDEX:10) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

  .footer-content .menu__heading__default {
    font-weight: var(--font-heading--weight);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }

    .footer-content[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

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

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */
/* START_SECTION:header-announcements (INDEX:11) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */
/* START_SECTION:header (INDEX: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;
  }

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Sofelya : lien Contact déplacé à droite de l'en-tête (près recherche/panier).
     Le logo étant centré, cette colonne doit peser à peu près autant que la
     navigation à gauche, sans quoi le centrage se voit faux.

     Ce lien se comporte exactement comme un onglet du menu : noir à 55 % au
     repos, trait noir de 2 px balayé au survol, trait posé et texte noir plein
     sur /pages/contact. Il entre aussi dans le relais du trait unique de la
     barre (sofelya-v2.css, « Le relais ») : survolé, il retire le trait de la
     page courante à gauche, et inversement.
     Le trait se pose sous un span intérieur et non sous le lien lui-même : le
     lien est une boîte flex de la hauteur de la colonne, 48 px, le trait
     serait tombé loin sous le texte. Les onglets du menu ont le même span,
     avec 10 px de padding horizontal en plus, d'où le left/right à 0 ici.
     La règle de la page active vient après celle du survol : même
     spécificité, c'est l'ordre qui tranche. */
  .header__contact-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .header__contact-link-title {
    position: relative;
    display: inline-block;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Même interligne que .menu-list__link-title dans sofelya-v2.css : le trait
       se cale sur le bas de cette boîte, deux interlignes différents donnaient
       deux hauteurs de trait dans la même barre. */
    line-height: 1;
    color: rgb(21 21 21 / 0.55);
  }

  .header__contact-link-title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: #151515;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }

  .header__contact-link:hover .header__contact-link-title::after,
  .header__contact-link:focus-visible .header__contact-link-title::after {
    transform: scaleX(1);
  }

  .header__contact-link[aria-current='page'] .header__contact-link-title {
    color: #151515;
  }

  .header__contact-link[aria-current='page'] .header__contact-link-title::after {
    background: #151515;
    transform: scaleX(1);
    transition: none;
  }

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

  /* Sofelya : en-tête aligné sur la trame des sections de contenu (1180px incluant
     24px de padding de chaque côté, comme .sof-gam__head, .sof-ba__head, etc.) pour
     que menu et titres partagent le même bord gauche.
     NB : ne PAS retirer width:100% — sans lui, les marges auto désactivent l'étirement de
     la grille et re-tassent les colonnes au contenu (~790px). */
  @media screen and (min-width: 750px) {
    .header__row--top .header__columns {
      width: 100%;
      max-width: 1180px;
      margin-inline-start: auto;
      margin-inline-end: auto;
      padding-inline-start: 24px;
      padding-inline-end: 24px;
    }
  }
/* END_SECTION:header */
/* START_SECTION:main-blog (INDEX:18) */
/* Les jetons viennent de sofelya-v2.css, chargé partout. On ne
     redéfinit rien ici : palette fermée, noir, blanc, gris, le rose en
     petite quantité. */
  .jb {
    --jb-wrap: 1200px;
    --jb-pad: clamp(20px, 4vw, 56px);
  }

  .jb-wrap {
    max-width: var(--jb-wrap);
    margin-inline: auto;
    padding-inline: var(--jb-pad);
    width: 100%;
  }

  .jb-sep { color: var(--sof-rule-strong); }

  /* Image absente : un aplat, jamais un trou blanc. */
  .jb-ph {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--sof-tint);
  }

  /* ---------- 1. En-tête et à la une ---------- */
  .jb-bc { padding-block: clamp(20px, 3vw, 30px) 0; }

  .jb-bc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--sof-t-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sof-soft);
  }

  .jb-bc__list li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--sof-rule-strong);
  }

  .jb-bc__list a { color: inherit; text-decoration: none; }
  .jb-bc__list a:hover { color: var(--sof-ink); }
  .jb-bc__list [aria-current] { color: var(--sof-ink); }

  /* Pas de filet sous l'en-tête. Le trait noir pleine largeur était la
     ligne la plus lourde de la page et la coupait en deux ; la grille
     dessous dessine déjà sa propre arête avec le cadre des cartes.
     L'écart suffit à séparer. */
  .jb-head { padding-block-end: clamp(8px, 2vw, 24px); }

  .jb-head__in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(36px, 5vw, 64px);
  }

  /* Pages 2 et suivantes, et vues filtrées : pas d'article à la une,
     le titre ne doit pas rester coincé sur une demi-largeur. */
  .jb-head__in--seul { grid-template-columns: 1fr; }

  .jb-head__eyebrow {
    margin: 0 0 18px;
    font-size: var(--sof-t-xs);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sof-acc-ink, #A66155);
  }

  .jb-head__title {
    margin: 0 0 22px;
    font-family: var(--font-heading--family);
    font-size: clamp(2.4rem, 6vw, 4.25rem);
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    color: var(--sof-ink);
  }

  .jb-head__intro {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--sof-t-s);
    line-height: 1.65;
    color: var(--sof-mute);
    max-width: 40ch;
  }

  /* La carte à la une. Sur le blanc, un cadre de filet la ferait
     disparaître : elle reçoit l'aplat gris comme sol. */
  .jb-une {
    background: var(--sof-grey);
    padding: clamp(18px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .jb-une__k {
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sof-acc-ink, #A66155);
  }

  .jb-une__k span:last-child {
    color: var(--sof-soft);
    font-variant-numeric: lining-nums tabular-nums;
  }

  .jb-une__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--sof-tint);
  }

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

  .jb-une__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--sof-t-l);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .jb-une__title a { color: var(--sof-ink); text-decoration: none; }
  .jb-une__title a:hover { text-decoration: underline; text-underline-offset: 4px; }

  .jb-une__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sof-soft);
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* ---------- 2. Les familles ---------- */
  .jb-fam { border-bottom: 1px solid var(--sof-rule); }

  .jb-fam__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-block: 20px;
  }

  .jb-fam__set {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 2.4vw, 32px);
  }

  .jb-fam__l {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    text-decoration: none;
    font-size: var(--sof-t-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sof-soft);
    padding-block: 5px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .jb-fam__l:hover { color: var(--sof-ink); border-color: var(--sof-rule-strong); }
  .jb-fam__l[aria-current] { color: var(--sof-ink); border-color: var(--sof-ink); }

  .jb-fam__n {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    font-variant-numeric: lining-nums tabular-nums;
  }

  .jb-fam__count {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sof-soft);
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* ---------- 3. La trame ---------- */
  /* Le filet n'est PAS le fond de la grille qui transparaît entre les
     cartes : chaque carte porte son propre cadre, les cadres voisins se
     superposent et donnent le trait d'un pixel. Sans ça, une dernière
     rangée incomplète laisserait un grand aplat gris à la place des
     cartes manquantes. */
  .jb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--sof-paper);
    margin-block-start: clamp(24px, 3vw, 36px);
  }

  .jb-card {
    background: var(--sof-paper);
    box-shadow: 0 0 0 1px var(--sof-rule);
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2vw, 28px);
    transition: background 0.25s ease;
  }

  .jb-card:hover { background: var(--sof-grey); }

  .jb-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    margin-bottom: 20px;
    overflow: hidden;
    background: var(--sof-tint);
  }

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

  .jb-card__rub {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sof-acc-ink, #A66155);
  }

  /* Un cran sous le titre de bloc : à 360 px de colonne, --sof-t-l
     cassait les titres longs en trois lignes de capitales. */
  .jb-card__title {
    margin: 0 0 12px;
    font-family: var(--font-heading--family);
    font-size: var(--sof-t-m);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .jb-card__title a {
    color: var(--sof-ink);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.3s ease;
  }

  .jb-card:hover .jb-card__title a { background-size: 100% 1px; }

  .jb-card__excerpt {
    margin: 0 0 20px;
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--sof-mute);
  }

  .jb-card__meta {
    margin: auto 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sof-soft);
    font-variant-numeric: lining-nums tabular-nums;
  }

  .jb-empty {
    text-align: center;
    font-family: var(--font-body--family);
    color: var(--sof-soft);
    padding-block: 3rem;
  }

  /* ---------- 4. La pagination ---------- */
  .jb-pag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: clamp(28px, 4vw, 44px);
    border-top: 1px solid var(--sof-ink);
  }

  .jb-pag__state {
    margin: 0;
    font-size: var(--sof-t-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sof-soft);
    font-variant-numeric: lining-nums tabular-nums;
  }

  .jb-pag__nav { display: flex; gap: 10px; }

  .jb-pag__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid var(--sof-ink);
    color: var(--sof-ink);
    text-decoration: none;
    font-size: var(--sof-t-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .jb-pag__btn:hover { background: var(--sof-ink); color: var(--sof-paper); }

  /* ---------- 5. La bande produit ---------- */
  /* Dernier bloc de la page : pas de marge basse, elle touche le pied
     de page. C'est le seul aplat noir, en face du blanc de l'en-tête. */
  /* `.section` du thème est une grille dont la colonne centrale est
     bordée de deux gouttières : un enfant y atterrit rentré de 40 px.
     Les blocs pleine largeur doivent réclamer toutes les colonnes. */
     Le thème cale déjà `.section > *` sur la colonne du milieu : il faut
     une spécificité supérieure, d'où le sélecteur doublé. */
  .section.jb > .jb-head { grid-column: 1 / -1; }

  /* La bande N'EST PAS pleine largeur, et c'est tout l'enjeu : le pied de
     page du site est du même noir (#151515). Bord à bord, les deux se
     soudaient en une colonne noire de 900 px où la bande cessait
     d'exister. Elle est donc calée sur la largeur des cartes, ce qui en
     fait un objet de la page, et un grand blanc la sépare du pied. */
  .jb-band { margin-block: clamp(32px, 4vw, 56px) clamp(48px, 7vw, 96px); }

  .jb-band__in {
    background: var(--sof-ink);
    color: var(--sof-paper);
    padding: clamp(28px, 3.4vw, 48px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
  }

  .jb-band__k {
    margin: 0 0 14px;
    font-size: var(--sof-t-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sof-acc, #CEA79F);
  }

  .jb-band__title {
    margin: 0 0 14px;
    font-family: var(--font-heading--family);
    font-size: var(--sof-t-xl);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    max-width: 20ch;
  }

  .jb-band__text {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--sof-t-s);
    line-height: 1.65;
    color: rgb(255 255 255 / 0.78);
    max-width: 48ch;
  }

  .jb-btn {
    display: inline-block;
    padding: 16px 28px;
    background: var(--sof-paper);
    color: var(--sof-ink);
    text-decoration: none;
    font-size: var(--sof-t-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.2s ease;
  }

  .jb-btn:hover { background: var(--sof-acc, #CEA79F); }

  /* ---------- Responsive ---------- */
  @media screen and (max-width: 989px) {
    .jb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media screen and (max-width: 749px) {
    .jb-head__in {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 28px;
    }

    .jb-grid { grid-template-columns: 1fr; }

    .jb-fam__row {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .jb-fam__set {
      flex-wrap: nowrap;
      overflow-x: auto;
      width: 100%;
      scrollbar-width: none;
    }

    .jb-fam__set::-webkit-scrollbar { display: none; }
    .jb-fam__l { white-space: nowrap; }

    .jb-band__in { grid-template-columns: 1fr; align-items: start; }

    .jb-pag { flex-direction: column; align-items: stretch; }
    .jb-pag__nav { justify-content: space-between; }
  }

  @media (prefers-reduced-motion: reduce) {
    .jb-card,
    .jb-card__title a,
    .jb-fam__l,
    .jb-pag__btn,
    .jb-btn { transition: none; }
  }
/* END_SECTION:main-blog */
/* START_BLOCK:_announcement (INDEX:82) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @media screen and (max-width: 749px) {
      padding: 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:111) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

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

  @media screen and (min-width: 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;
    }

    /* Sofelya : la boîte de sécurité d'origine ne vit que pendant le
       mouvement, le script la retire après 50 ms d'immobilité. Le pointeur
       arrêté entre le bas du libellé et le haut du panneau se retrouvait donc
       sur le header et le menu se refermait sous la souris. Tant qu'un
       sous-menu est ouvert, la boîte reste posée. */
    &[aria-expanded='true']::after {
      display: block;
    }

    /* Sofelya : le pont. La boîte ci-dessus ne fait que la largeur du libellé,
       or le contenu du méga-menu s'étale jusqu'au bord droit : une descente en
       diagonale traversait les quelques pixels morts entre le libellé et le
       panneau, hors de la boîte, et fermait le menu. Cette bande, large comme
       la fenêtre et haute du seul creux (hauteur de la boîte moins celle du
       libellé), rattache ce creux à l'entrée de menu. Elle n'existe que
       sous-menu ouvert et se tient sous la ligne des liens et des icônes du
       header : elle n'intercepte rien de cliquable. */
    &[aria-expanded='true']::before {
      content: '';
      position: absolute;
      top: 100%;
      left: -100vw;
      right: -100vw;
      height: calc(var(--box-height, 0px) - 100%);
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

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

  /* Sofelya : liens de navigation un peu plus présents sur desktop (poids medium) */
  @media screen and (min-width: 750px) {
    .header-menu .menu-list__link {
      font-weight: 500;
    }
  }

  /* ============================================================
     Sofelya : méga-menu « La boutique » (voir snippets/mega-menu-sofelya.liquid).
     Une carte phare 1,55 fois plus large que la seconde colonne, une ligne
     satellite rattachée à la carte du produit dont elle dépend, et dans les
     états filtrés la suite de la collection : carte moyenne, rangées, lien.
     Le journal a quitté le panneau le 05/09. Les états sont basculés par
     assets/sofelya-shop-tabs.js.
     ============================================================ */
  /* Le méga-menu du thème occupe toute la largeur de l'écran. Les visuels
     ont une hauteur fixe (voir .sof-shop__media) : le panneau ne dépasse donc
     jamais la hauteur maximale du sous-menu, quelle que soit la largeur.
     Aucun plafond de largeur ici : DESIGN.md, « pas de plafond de largeur
     pour l'instant ». */
  .sof-shop {
    width: 100%;
    /* La barre d'onglets collait à la ligne de navigation qui la surplombe :
       deux rangées de libellés en capitales à dix pixels l'une de l'autre se
       lisaient comme un seul bloc. Cet air les sépare. */
    padding-top: var(--sof-sp-m);
    /* .menu-list__list-item impose white-space: nowrap pour que les libellés de
       la nav ne se coupent pas, et ça cascade dans tout le sous-menu : sans ce
       retour à la normale, l'argument de la carte phare tient sur une seule
       ligne et déborde de sa colonne. */
    white-space: normal;
  }

  /* --- 1 · la barre de filtres, lue comme des onglets --- */
  /* Sans filet : il doublait l'air sous la barre et s'empilait avec le
     trait de la page courante et celui de l'onglet actif (pattern « un
     filet qui double un espacement est supprimé »). */
  .sof-shop__bar {
    display: flex;
    align-items: center;
    gap: var(--sof-sp-l);
    margin-bottom: var(--sof-sp-l);
  }

  /* Un rôle, un habit : les onglets reprennent l'habit des liens de la
     barre (assets/sofelya-v2.css, .menu-list__link-title) : même corps,
     capitales, approche m, graisse 500 constante, encre 55 au repos, encre
     pleine et trait de 1 px pour l'onglet actif, trait qui balaie au survol
     sans que l'encre ne bouge. Le corps vient de la même variable que la
     barre pour que les deux rangées restent égales si le réglage change.
     Les onglets sont des liens depuis que le clic ouvre la collection : d'où
     le retrait du soulignement et le display. L'état actif se lit sur
     data-selected et non sur aria-selected, ces liens n'ayant plus role="tab"
     (voir mega-menu-sofelya.liquid). Le tiroir mobile garde ses boutons et
     son aria-selected, avec son propre CSS. */
  .sof-shop__tab {
    position: relative;
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
    font-family: var(--font-body--family);
    font-size: var(--menu-top-level-font-size-desktop, var(--sof-t-xxs));
    font-weight: 500;
    line-height: var(--sof-lh-flat);
    letter-spacing: var(--sof-ls-m);
    text-transform: uppercase;
    cursor: pointer;
  }

  .sof-shop__tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--sof-souligne-decale, 4px));
    height: var(--sof-trait, 1px);
    background: var(--sof-ink, #151515);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sof-dur-slow) var(--sof-ease);
  }

  .sof-shop__tab:hover::after {
    transform: scaleX(1);
  }

  .sof-shop__tab[data-selected='true']::after {
    transform: scaleX(1);
    transition: none;
  }

  /* Le même témoin de focus pour tout ce qui se tabule dans le panneau. */
  .sof-shop__tab:focus-visible,
  .sof-shop__card:focus-visible,
  .sof-shop__row:focus-visible,
  .sof-shop__sat:focus-visible,
  .sof-shop__cta:focus-visible {
    outline: var(--sof-trait, 1px) solid var(--sof-ink, #151515);
    outline-offset: var(--sof-sp-2xs);
  }

  /* sofelya-respire-shell.css pose #header-group a { color: var(--r-black) } :
     sans l'appui, les onglets au repos passaient à l'encre pleine. Comme
     sofelya-v2.css le fait déjà pour les liens du méga-menu du thème. */
  .sof-shop__tab {
    color: var(--sof-ink-55, rgb(21 21 21 / 0.55)) !important;
  }

  .sof-shop__tab[data-selected='true'] {
    color: var(--sof-ink, #151515) !important;
  }

  /* Les trois états sont empilés dans la même cellule de grille plutôt que
     masqués en display:none. Le conteneur du sous-menu fige sa hauteur à
     l'ouverture : si un état changeait la hauteur du contenu, il se faisait
     rogner (la ligne satellite disparaissait) et le panneau se refermait sous
     le curseur. Empilés, les trois états donnent une hauteur constante, égale
     au plus haut des trois.
     visibility: hidden, et non opacity, pour que les liens des états inactifs
     sortent aussi de l'ordre de tabulation. */
  .sof-shop__states {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sof-shop__state {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: var(--sof-sp-2xl);
    align-items: start;
    width: 100%;
    visibility: hidden;
  }

  .sof-shop[data-state='all'] .sof-shop__state[data-state='all'],
  .sof-shop[data-state='pieds'] .sof-shop__state[data-state='pieds'],
  .sof-shop[data-state='visage'] .sof-shop__state[data-state='visage'],
  .sof-shop[data-state='corps'] .sof-shop__state[data-state='corps'] {
    visibility: visible;
  }

  /* --- 2 · les cartes produit --- */
  .sof-shop__card {
    display: block;
    text-decoration: none;
    color: var(--sof-ink, #151515);
  }

  /* Même écart image-légende que les cartes de collection et le tiroir. */
  .sof-shop__media {
    position: relative;
    display: block;
    margin-bottom: var(--sof-sp-s);
    overflow: hidden;
    border-radius: var(--sof-r-s);
    /* Hauteur fixe plutôt qu'un ratio : un ratio plafonné en hauteur rétrécit
       aussi la largeur de la boîte, et le visuel se décollait du bord de sa
       colonne. Ici la boîte occupe toute la colonne et l'image est recadrée. */
    width: 100%;
    height: 230px;
    background-color: var(--sof-grey, #f5f5f5);
  }

  /* Les deux têtes du Rasoir (onglet Corps) : deux cartes empilées dans la
     colonne, l'image plus basse pour que les deux tiennent en face du phare. */
  .sof-shop__media--tete {
    height: 150px;
  }

  .sof-shop__card--tete + .sof-shop__card--tete {
    margin-top: var(--sof-sp-l);
  }

  .sof-shop__media--hero {
    height: 300px;
  }

  .sof-shop__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--sof-dur-slow) var(--sof-ease);
  }

  .sof-shop__card:hover .sof-shop__img {
    transform: scale(1.06);
  }

  /* Le drapeau se pose sur l'image, coin haut gauche, à la même distance
     du bord que le badge des cartes (.c-card__badge). Même boîte aussi :
     retraits 4 et 8, interligne de corps ; en interligne plat la pastille
     faisait 15 px de haut, le texte collé à ses bords. */
  .sof-shop__flag {
    position: absolute;
    top: var(--sof-sp-s);
    left: var(--sof-sp-s);
    display: inline-block;
    padding: var(--sof-sp-2xs) var(--sof-sp-xs);
    border-radius: var(--sof-r-s);
    background: var(--sof-ink, #151515);
    color: var(--sof-paper, #fff);
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xxs);
    font-weight: 500;
    letter-spacing: var(--sof-ls-m);
    text-transform: uppercase;
    line-height: var(--sof-lh-body);
  }

  /* Meme habit que le badge promo des cartes (.c-card__badge--promo) :
     accent clair et texte blanc. L'accent profond est reserve au prix. */
  .sof-shop__flag--rose {
    background: var(--sof-acc, #CEA79F);
  }

  /* Le même surtitre que les cartes de collection (.c-card__k) : le type de
     produit, en capitales, soudé au nom sans écart (05/09). */
  .sof-shop__zone {
    display: block;
    margin-bottom: calc(-1 * var(--sof-kicker-bas)); /* la boite rognee au ras des lettres */
    line-height: var(--sof-lh-flat);
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xxs);
    font-weight: 500;
    letter-spacing: var(--sof-ls-l);
    text-transform: uppercase;
    color: var(--sof-soft, rgb(21 21 21 / 0.64));
  }

  /* Nom à gauche, prix ferré à droite, sur la même ligne de base (pattern
     « si un nom s'accompagne d'une valeur »). Le corps du nom est porté par
     la ligne : le texte qui suit s'en écarte d'un quart de ce corps, en em
     (« titre puis texte »). Corps s pour la seconde carte, le même que le
     nom des cartes de collection ; un cran au-dessus pour le phare, qui
     reste un nom de carte et non un grand titre fluide. */
  /* Hauteur d'accent, seulement quand le nom en porte un (classe posée par
     le Liquid) : l'écart au kicker se mesure depuis l'accent (DESIGN.md,
     kicker puis titre). */
  .sof-shop__line--accent {
    padding-top: var(--sof-accent-haut);
  }

  .sof-shop__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sof-sp-s);
    /* kicker puis titre (DESIGN.md) : l'ecart entre les lettres, moins le
       vide de la boite du nom au-dessus de ses capitales */
    margin-top: calc(var(--sof-kicker-suite) - var(--sof-cap-haut-serre));
    /* titre puis texte : l'ecart entre les lettres, moins le vide de la
       boite du nom sous sa ligne de pied */
    margin-bottom: calc(var(--sof-titre-suite) - var(--sof-titre-bas));
    font-size: var(--sof-t-s);
  }

  .sof-shop__card--hero .sof-shop__line {
    font-size: var(--sof-t-m);
  }

  /* Capitales, demande du 05/09 : l'approche serrée des bas de casse
     laisse place au cran s, des capitales se serrent mal. */
  .sof-shop__name {
    display: block;
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: inherit;
    line-height: var(--sof-lh-tight); /* comme la promesse et la case conseil : rien sous les lettres, le texte suit a un quart du corps */
    letter-spacing: var(--sof-ls-s);
    text-transform: uppercase;
    color: var(--sof-ink, #151515);
  }

  .sof-shop__card:hover .sof-shop__name {
    text-decoration: underline;
    text-decoration-thickness: var(--sof-trait, 1px);
    text-underline-offset: var(--sof-souligne-decale, 4px);
  }

  .sof-shop__desc {
    display: block;
    margin-top: calc(-1 * var(--sof-texte-haut-body)); /* la boite rognee au ras des capitales */
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xs);
    line-height: var(--sof-lh-body);
    color: var(--sof-soft, rgb(21 21 21 / 0.64));
  }

  .sof-shop__card--hero .sof-shop__desc {
    /* la colonne phare est large : sans borne, l'argument tient sur une seule
       ligne de 630 px, illisible */
    max-width: 46ch;
  }

  .sof-shop__price {
    flex: none;
    white-space: nowrap;
    line-height: var(--sof-lh-flat); /* sa boite reste sous le sommet du nom */
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xs, 0.875rem);
    font-weight: 500;
    /* Rose profond = prix a payer, le barre en encre 45 (DESIGN.md). */
    color: var(--sof-acc-ink, #A66155);
  }

  .sof-shop__price s {
    margin-inline-start: var(--sof-sp-2xs);
    font-weight: 400;
    color: var(--sof-ink-45, rgb(21 21 21 / 0.45));
  }

  /* --- 3 · la ligne satellite, enfant visuel de la carte au-dessus --- */
  .sof-shop__sat {
    display: flex;
    align-items: center;
    gap: var(--sof-sp-s);
    /* Le filet reste : il ne sépare pas, il rattache (c'est lui qui dit que
       les Recharges appartiennent à la Râpe). L'air au-dessus tombe à un
       cran pour ne pas le doubler. */
    margin-top: var(--sof-sp-s);
    padding-top: var(--sof-sp-s);
    border-top: 1px solid var(--sof-rule, rgb(21 21 21 / 0.14));
    text-decoration: none;
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xs);
    color: var(--sof-soft, rgb(21 21 21 / 0.64));
  }

  .sof-shop__sat-mark {
    flex: none;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: var(--sof-r-s);
    background-color: var(--sof-grey, #f5f5f5);
  }

  /* Le nom des Recharges, en capitales comme les autres noms (05/09). */
  .sof-shop__sat-text {
    font-weight: 500;
    letter-spacing: var(--sof-ls-s);
    text-transform: uppercase;
    color: var(--sof-ink, #151515);
  }

  /* Le prix des Recharges est un prix à payer : rose profond, ferré à
     droite comme sur les cartes. Le satellite répond comme elles au survol. */
  .sof-shop__sat .sof-shop__price {
    margin-inline-start: auto;
  }

  .sof-shop__sat:hover .sof-shop__sat-text,
  .sof-shop__sat:focus-visible .sof-shop__sat-text {
    text-decoration: underline;
    text-decoration-thickness: var(--sof-trait, 1px);
    text-underline-offset: var(--sof-souligne-decale, 4px);
  }

  /* Encre douce et non accent : le rose est un evenement, un par ecran,
     et il est deja pris par le prix. */
  /* --- 4 · la suite de la collection, deuxième colonne des états filtrés ---
     Après la carte moyenne, les autres produits en rangées : vignette carrée,
     nom et prix sur une ligne de base, comme la rangée du tiroir mobile. Un
     seul air, porté par la liste ; entre deux rangées, l'air suffit, pas de
     filet. Même survol que les cartes. Le lien d'univers ferme la colonne. */
  .sof-shop__more {
    margin: var(--sof-sp-l) 0 0;
    padding: 0;
  }

  .sof-shop__more li + li {
    margin-top: var(--sof-sp-s);
  }

  .sof-shop__row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--sof-sp-s);
    align-items: center;
    text-decoration: none;
    color: var(--sof-ink, #151515);
  }

  .sof-shop__row-media {
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--sof-r-s);
    background-color: var(--sof-grey, #f5f5f5);
  }

  .sof-shop__row .sof-shop__line {
    margin-bottom: 0;
    font-size: var(--sof-t-xs);
  }

  /* Une phrase sous le nom : la regle titre puis texte reprend ses droits. */
  .sof-shop__row .sof-shop__line:has(+ .sof-shop__desc) {
    margin-bottom: calc(var(--sof-titre-suite) - var(--sof-titre-bas));
  }

  /* Le kicker au-dessus du nom, comme sur les cartes : le bloc de texte se
     centre sur la vignette. */
  .sof-shop__row-text {
    display: block;
    min-width: 0;
  }

  .sof-shop__row .sof-shop__desc {
    font-size: var(--sof-t-xxs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sof-shop__row:hover .sof-shop__name,
  .sof-shop__row:focus-visible .sof-shop__name {
    text-decoration: underline;
    text-decoration-thickness: var(--sof-trait, 1px);
    text-underline-offset: var(--sof-souligne-decale, 4px);
  }

  .sof-shop__row:hover .sof-shop__img,
  .sof-shop__row:focus-visible .sof-shop__img {
    transform: scale(1.06);
  }

  /* --- éléments partagés --- */
  /* R2 : l'eyebrow annonce ce qui suit, il y colle, interligne plat. Même
     approche que la zone et le kicker des cartes : un kicker, un habit. */
  .sof-shop__eyebrow {
    margin: 0 0 var(--sof-sp-3xs);
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xxs);
    font-weight: 500;
    line-height: var(--sof-lh-flat);
    letter-spacing: var(--sof-ls-l);
    text-transform: uppercase;
    color: var(--sof-soft, rgb(21 21 21 / 0.64));
  }

  /* Le même comportement que « Découvrir la boutique » du héros
     (sections/sofelya-a-hero.liquid, .a-hero__l) : souligné de 1 px, et au
     survol le texte passe à l'accent profond. Casse et corps restent ceux
     du menu. */
  .sof-shop__cta {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xs);
    font-weight: 500;
    color: var(--sof-ink, #151515);
    text-decoration: underline;
    text-decoration-thickness: var(--sof-trait, 1px);
    text-underline-offset: var(--sof-souligne-decale, 4px);
    transition: color var(--sof-dur-fast) var(--sof-ease);
  }

  /* !important comme pour les onglets : sofelya-respire-shell.css pose
     #header-group a { color }, qui l'emporterait sur le survol. */
  .sof-shop__cta:hover {
    color: var(--sof-acc-ink, #A66155) !important;
  }

  /* Après .sof-shop__cta, qui pose le corps xs. Comme .sof-mob__uni du tiroir : capitales, corps xxs, lettres espacées. */
  .sof-shop__cta--uni {
    margin-top: var(--sof-sp-l);
    font-size: var(--sof-t-xxs);
    letter-spacing: var(--sof-ls-l);
    text-transform: uppercase;
  }

  /* Corps n'a que son phare : le lien ouvre la colonne, sans air au-dessus. */
  .sof-shop__cta--uni:first-child {
    margin-top: 0;
  }



  @media (prefers-reduced-motion: reduce) {
    .sof-shop__img,
    .sof-shop__tab::after {
      transition: none;
    }

    .sof-shop__card:hover .sof-shop__img,
    .sof-shop__row:hover .sof-shop__img {
      transform: none;
    }
  }

  /* ============================================================
     Sofelya : bloc « La boutique » du tiroir mobile
     (voir snippets/sofelya-drawer-shop.liquid, direction P).
     Jeu de styles distinct de celui du méga-menu : le tiroir est un
     autre composant, et la hiérarchie ne peut plus passer par la
     largeur, seulement par l'ordre, la taille et le retrait.
     Cibles tactiles à 44 px minimum.
     ============================================================ */

  /* Le tiroir occupe tout l'écran sur mobile. Le thème le pose à 95vw plafonné
     à 500 px, ce qui laisse une bande du site visible sur le côté : elle tirait
     l'œil vers la page derrière au lieu du menu, et volait 19 px de largeur au
     bloc boutique. Les deux variables sont redéfinies sur `.menu-drawer` et non
     sur `:root`, pour ne pas emporter le tiroir panier au passage. Au-dessus de
     750 px le thème repasse à `width: 25rem`, ce média n'y touche pas. */
  @media screen and (max-width: 749px) {
    .menu-drawer {
      --drawer-width: 100vw;
      --drawer-max-width: 100vw;
    }
  }

  /* La nav du tiroir était à 28 px face à des noms de produits à 17 px : la
     navigation écrasait la boutique alors que c'est elle qu'on met en avant.
     Au cran m elle reste au-dessus du bloc dans la hiérarchie, sans l'aplatir.
     Sélecteur doublé pour passer devant la règle du thème, de même poids. */
  /* Capitales, demande du 05/09 : les rubriques du tiroir prennent la casse
     de la barre desktop, avec la même approche. */
  .menu-drawer .menu-drawer__menu-item--mainlist {
    font-size: var(--sof-t-m);
    line-height: var(--sof-lh-lead);
    letter-spacing: var(--sof-ls-m);
    text-transform: uppercase;
  }

  /* L'espacement du thème était calibré pour les 28 px d'origine : 46 px de boîte
     plus 13 px de marge, soit un pas de 59 px. À 20 px de texte, cette marge n'est
     plus de la respiration mais du vide, et les rubriques se décrochent les unes
     des autres. On supprime la marge et on garde la boîte : elle vaut 45,6 px,
     donc la cible tactile reste au-dessus des 44 px réglementaires. Uniquement
     sur les entrées de premier niveau, les sous-listes gardent leur rythme.
     Le `li` dans le sélecteur n'est pas décoratif : la règle du thème a le même
     poids que la mienne et ma feuille est chargée avant la sienne, donc à égalité
     c'est elle qui l'emporte. L'élément fait pencher la balance. */
  .menu-drawer__menu > li.menu-drawer__list-item--flat {
    margin-block-end: 0;
    /* 07/09 : la boite de 45,6 px du theme laissait 10 px de vide au-dessus et
       au-dessous d'un texte de 20 : les rubriques se decrochaient. Le pas
       se regle sur le lien, ci-dessous. */
    min-height: 0;
    padding-block: 0;
  }

  /* Le lien lui-meme porte une hauteur minimale de 45,6 px dans le theme :
     c'est lui qui fait le pas. Un cran de 4 px de chaque cote du texte. */
  .menu-drawer .menu-drawer__menu-item--mainlist {
    min-height: 0;
    padding-block: var(--sof-sp-xs); /* 8 px : 38 px de boite, la cible tactile reste correcte */
  }
  /* Le thème pose `.menu-drawer__menu > .menu-drawer__list-item { display: flex }`,
     plus spécifique que `.sof-mob-slot`. L'emplacement redevient un bloc par un
     sélecteur de poids égal, et `.sof-mob` prend la largeur explicitement : sans
     cela il reste un item flex en `flex: 0 1 auto`, large de 237 px au lieu de
     320, et tous les filets et visuels du bloc s'arrêtent 83 px avant les liens
     de navigation qui les entourent. */
  .menu-drawer__menu > li.sof-mob-slot {
    display: block;
    min-height: 0;
    padding-block: 0;
  }

  /* Bloc deplie : un vrai saut (24) avant Contact, R2 proximite (07/09). Ferme,
     la rubrique garde le pas des autres. */
  .menu-drawer__menu > li.sof-mob-slot:has(.sof-mob__label[aria-expanded='true']) {
    padding-block-end: var(--sof-sp-l);
  }

  .sof-mob {
    width: 100%;
  }

  /* « La boutique » est une rubrique, pas l'intertitre d'un encadré : elle reprend
     donc les variables de police des entrées de premier niveau du tiroir, et la
     même boîte au pixel (hauteur minimale et padding de `.menu-drawer__menu-item`)
     pour tomber dans le même rythme vertical que Accueil ou Contact. */
  .sof-mob__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 0; /* meme boite que les rubriques, 07/09 */
    margin: 0;
    padding-block: var(--sof-sp-xs);
    padding-inline: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--menu-top-level-font-family, var(--font-body--family));
    font-style: var(--menu-top-level-font-style, normal);
    font-weight: var(--menu-top-level-font-weight, 400);
    font-size: var(--sof-t-m);
    line-height: var(--sof-lh-lead);
    letter-spacing: var(--sof-ls-m);
    text-transform: uppercase;
    color: var(--sof-ink, #151515);
    text-decoration: none;
  }

  .sof-mob__label[aria-expanded='true'] {
    margin-bottom: var(--sof-sp-s);
  }

  /* Le meme « + » que la FAQ des collections : graisse 400, pivote en croix
     quand le bloc est ouvert. */
  .sof-mob__plus {
    font-weight: 400;
    font-size: var(--sof-t-m);
    line-height: 1;
    transition: transform 0.28s ease;
  }

  .sof-mob__label[aria-expanded='true'] .sof-mob__plus {
    transform: rotate(45deg);
  }

  .sof-mob__label:focus-visible {
    outline: var(--sof-trait, 1px) solid var(--sof-ink, #151515);
    outline-offset: var(--sof-sp-3xs);
  }

  @media (prefers-reduced-motion: reduce) {
    .sof-mob__plus {
      transition: none;
    }
  }

  /* Les onglets : sur le blanc, à égalité de largeur, texte centré. Même
     habit que les onglets du desktop : capitales, approche m, graisse 500
     constante, encre 55 au repos, encre pleine et trait de 1 px sous le
     libellé pour l'onglet actif (demande du 05/09, l'aplat grège et le
     témoin papier sont abandonnés). */
  .sof-mob__seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin-bottom: var(--sof-sp-m);
  }

  /* Le padding vertical donne une cible de 45 px, au-dessus des 44 px sous
     lesquels le doigt rate. */
  .sof-mob__tab {
    padding: var(--sof-sp-m) var(--sof-sp-2xs);
    border: 0;
    background: none;
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xxs);
    font-weight: 500;
    line-height: var(--sof-lh-title);
    letter-spacing: var(--sof-ls-m);
    text-transform: uppercase;
    color: var(--sof-ink-55, rgb(21 21 21 / 0.55));
    cursor: pointer;
    transition: color var(--sof-dur-fast) var(--sof-ease);
  }

  .sof-mob__tab[aria-selected='true'] {
    color: var(--sof-ink, #151515);
  }

  /* Le trait est porté par le libellé et non par le bouton, pour souligner
     le mot et non la case entière. */
  .sof-mob__tab-text {
    position: relative;
    display: inline-block;
  }

  .sof-mob__tab-text::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--sof-souligne-decale, 4px));
    height: var(--sof-trait, 1px);
    background: var(--sof-ink, #151515);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sof-dur-slow) var(--sof-ease);
  }

  .sof-mob__tab[aria-selected='true'] .sof-mob__tab-text::after {
    transform: scaleX(1);
  }

  .sof-mob__tab:focus-visible,
  .sof-mob__card:focus-visible,
  .sof-mob__sat:focus-visible,
  .sof-mob__row:focus-visible,
  .sof-mob__uni:focus-visible {
    outline: var(--sof-trait, 1px) solid var(--sof-ink, #151515);
    outline-offset: var(--sof-sp-3xs);
  }

  /* Ici display:none et non l'empilement du desktop : le tiroir défile,
     il n'a pas de hauteur figée à l'ouverture, donc empiler les trois
     états ne ferait que laisser du vide sous les plus courts. */
  .sof-mob__state {
    display: none;
  }

  .sof-mob[data-state='all'] .sof-mob__state[data-state='all'],
  .sof-mob[data-state='pieds'] .sof-mob__state[data-state='pieds'],
  .sof-mob[data-state='visage'] .sof-mob__state[data-state='visage'],
  .sof-mob[data-state='corps'] .sof-mob__state[data-state='corps'] {
    display: block;
  }

  .sof-mob__card {
    display: block;
    text-decoration: none;
    color: var(--sof-ink, #151515);
  }

  /* Le ratio du phare PC, 800 x 300 a 1440 px, soit 2,65 : 1 : le meme
     fichier se cadre pareil sur les deux ecrans (07/09). 128 px pour 339
     de large, la premiere rangee reste au-dessus du pli. */
  .sof-mob__media {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2.65 / 1;
    margin-bottom: var(--sof-sp-s);
    overflow: hidden;
    border-radius: var(--sof-r-s);
    background-color: var(--sof-grey, #f5f5f5);
  }

  .sof-mob__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Tant que les fichiers sont en 4:3, le phare n'en montre que 60 % :
     centre, il coupait les visages et la tete du rasoir. Le regard se pose
     un peu au-dessus du centre, PC et mobile (07/09). */
  .sof-mob__media .sof-mob__img,
  .sof-shop__media--hero .sof-shop__img {
    object-position: 50% 20%;
  }

  /* Le drapeau vit dans l'image, coin haut gauche, à la distance du badge des
     cartes ; même dessin que sur le desktop (carré, accent clair pour le rose). */
  .sof-mob__flag {
    position: absolute;
    top: var(--sof-sp-s);
    left: var(--sof-sp-s);
    display: inline-block;
    padding: var(--sof-sp-2xs) var(--sof-sp-xs);
    border-radius: var(--sof-r-s);
    background: var(--sof-ink, #151515);
    color: var(--sof-paper, #fff);
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xxs);
    font-weight: 500;
    letter-spacing: var(--sof-ls-m);
    text-transform: uppercase;
    line-height: var(--sof-lh-body);
  }

  .sof-mob__flag--rose {
    background: var(--sof-acc, #CEA79F);
  }

  /* Le même surtitre que les cartes de collection (.c-card__k) : le type de
     produit, soudé au nom sans écart. */
  .sof-mob__zone {
    display: block;
    margin-bottom: calc(-1 * var(--sof-kicker-bas)); /* la boite rognee au ras des lettres */
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xxs);
    font-weight: 500;
    line-height: var(--sof-lh-flat);
    letter-spacing: var(--sof-ls-l);
    text-transform: uppercase;
    color: var(--sof-soft, rgb(21 21 21 / 0.64));
  }

  /* Nom à gauche, prix ferré à droite, sur la même ligne de base. La ligne
     porte le corps du nom : le texte qui suit s'en écarte d'un quart, en em. */
  /* Hauteur d'accent, seulement quand le nom en porte un (classe posée par
     le Liquid) : l'écart au kicker se mesure depuis l'accent (DESIGN.md,
     kicker puis titre). */
  .sof-mob__line--accent {
    padding-top: var(--sof-accent-haut);
  }

  .sof-mob__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sof-sp-s);
    /* kicker puis titre (DESIGN.md) : l'ecart entre les lettres, moins le
       vide de la boite du nom au-dessus de ses capitales */
    margin-top: calc(var(--sof-kicker-suite) - var(--sof-cap-haut-serre));
    /* titre puis texte : l'ecart entre les lettres, moins le vide de la
       boite du nom sous sa ligne de pied */
    margin-bottom: calc(var(--sof-titre-suite) - var(--sof-titre-bas));
    font-size: var(--sof-t-s);
  }

  /* Capitales, demande du 05/09 : l'approche serrée des bas de casse
     laisse place au cran s, des capitales se serrent mal. */
  .sof-mob__name {
    display: block;
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: inherit;
    line-height: var(--sof-lh-tight); /* comme la promesse et la case conseil : rien sous les lettres, le texte suit a un quart du corps */
    letter-spacing: var(--sof-ls-s);
    text-transform: uppercase;
    color: var(--sof-ink, #151515);
  }

  .sof-mob__desc {
    display: block;
    margin-top: calc(-1 * var(--sof-texte-haut-body)); /* la boite rognee au ras des capitales */
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xs);
    line-height: var(--sof-lh-body);
    color: var(--sof-soft, rgb(21 21 21 / 0.64));
  }

  /* Rose profond = prix à payer, le barré en encre 45. */
  .sof-mob__price {
    flex: none;
    white-space: nowrap;
    line-height: var(--sof-lh-flat);
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xs);
    font-weight: 500;
    color: var(--sof-acc-ink, #A66155);
  }

  .sof-mob__price s {
    margin-inline-start: var(--sof-sp-2xs);
    font-weight: 400;
    color: var(--sof-ink-45, rgb(21 21 21 / 0.45));
  }

  /* Le satellite : sur une colonne unique, c'est le retrait et le filet
     vertical qui disent la subordination. Le filet reste (il rattache, il ne
     sépare pas), à 1 px comme tous les traits. */
  .sof-mob__sat {
    display: flex;
    align-items: center;
    gap: var(--sof-sp-s);
    margin-top: var(--sof-sp-s);
    padding: var(--sof-sp-s) 0 var(--sof-sp-s) var(--sof-sp-m);
    border-inline-start: var(--sof-trait, 1px) solid var(--sof-rule, rgb(21 21 21 / 0.14));
    text-decoration: none;
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xs);
    color: var(--sof-soft, rgb(21 21 21 / 0.64));
  }

  .sof-mob__sat-text {
    font-weight: 500;
    letter-spacing: var(--sof-ls-s);
    text-transform: uppercase;
    color: var(--sof-ink, #151515);
  }

  .sof-mob__sat-mark {
    flex: none;
    width: 22px;
    height: 22px;
    overflow: hidden;
    border-radius: var(--sof-r-s);
    background-color: var(--sof-grey, #f5f5f5);
  }

  .sof-mob__sat .sof-mob__price {
    margin-inline-start: auto;
  }

  /* Le second produit en « tout voir ». Sans filet : l'air le sépare déjà de
     la carte, un filet le doublerait. */
  .sof-mob__row {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: var(--sof-sp-s);
    align-items: center;
    margin-top: var(--sof-sp-m);
    padding: var(--sof-sp-xs) 0;
    text-decoration: none;
    color: var(--sof-ink, #151515);
  }

  /* La suite de la collection : des rangées à un cran l'une de l'autre,
     un seul air au-dessus de la liste. */
  .sof-mob__more {
    margin: var(--sof-sp-m) 0 0;
    padding: 0;
  }

  .sof-mob__more .sof-mob__row {
    margin-top: 0;
  }

  .sof-mob__more li + li {
    margin-top: var(--sof-sp-s);
  }

  .sof-mob__row-media {
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: var(--sof-r-s);
    background-color: var(--sof-grey, #f5f5f5);
  }

  .sof-mob__row .sof-mob__line {
    margin-bottom: 0;
    font-size: var(--sof-t-xs);
  }

  /* Une phrase sous le nom : la regle titre puis texte reprend ses droits. */
  .sof-mob__row .sof-mob__line:has(+ .sof-mob__desc) {
    margin-bottom: calc(var(--sof-titre-suite) - var(--sof-titre-bas));
  }

  .sof-mob__row-text {
    display: block;
    min-width: 0;
  }

  .sof-mob__row .sof-mob__desc {
    font-size: var(--sof-t-xxs);
  }

  /* Le lien d'univers : le même habit que sur PC, un lien souligne a 1 px,
     ferre a gauche, un cran d'air au-dessus. L'aplat grege d'avant etait
     l'habit des blocs editoriaux (07/09, un role un habit). */
  .sof-mob__uni {
    display: inline-block;
    margin-top: var(--sof-sp-l);
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xxs);
    font-weight: 500;
    letter-spacing: var(--sof-ls-l);
    text-transform: uppercase; /* comme les rubriques et les onglets du tiroir */
    color: var(--sof-ink, #151515);
    text-decoration: underline;
    text-decoration-thickness: var(--sof-trait, 1px);
    text-underline-offset: var(--sof-souligne-decale, 4px);
  }

  /* --- pied du tiroir : les engagements, sur une ligne --- */
  /* Ce bloc est rendu hors du <ul>, il n'hérite donc pas de la gouttière du
     tiroir : on reprend la même variable que `.menu-drawer__menu` pour qu'il
     tombe sur la même verticale que la navigation. */
  .sof-mobfoot {
    padding: var(--sof-sp-l) var(--drawer-padding);
  }

  /* Les règles .sof-mobfoot__label, __list et __link ont été retirées le
     10/08/2026 avec la liste d'articles qu'elles habillaient : le journal est
     désormais un traitement desktop, le pied du tiroir ne porte plus que la
     ligne d'engagements (voir snippets/sofelya-drawer-journal.liquid). */

  /* Direction R : les engagements tiennent sur une ligne, sous un filet. Pas de
     fond, pas d'intertitre, pas de grille : ces mentions sont un rappel de service
     et la moindre mise en forme leur prête un poids qu'elles n'ont pas. Le filet
     suffit à les détacher de la navigation. Si un jour le texte s'allonge, il se
     replie proprement, d'où l'interligne. */
  .sof-mobfoot__line {
    margin: 0;
    padding-block-start: var(--sof-sp-m);
    border-top: var(--sof-trait, 1px) solid var(--sof-rule, rgb(21 21 21 / 0.14));
    font-family: var(--font-body--family);
    font-size: var(--sof-t-xxs);
    line-height: var(--sof-lh-body);
    text-align: center;
    text-wrap: balance;
    color: var(--sof-soft, rgb(21 21 21 / 0.64));
  }

  /* Les points de séparation sont retirés de l'arbre d'accessibilité côté
     balisage, mais restent visibles : dans l'encre douce du texte (R3, deux
     encres par fond), l'écart resserré sous une largeur de mot. */
  .sof-mobfoot__line span {
    padding-inline: var(--sof-sp-2xs);
    color: var(--sof-soft, rgb(21 21 21 / 0.64));
  }

  .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;
  }
  /* Les navigateurs qui savent rogner la boite au ras des lettres le font
     eux-memes : plus de compensation, la marge en em est l'ecart reel. */
  @supports (text-box-trim: trim-both) {
    .sof-shop__zone {
      margin-bottom: 0;
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }

    .sof-shop__line {
      margin-top: var(--sof-kicker-suite);
      margin-bottom: var(--sof-titre-suite);
    }

    .sof-shop__row .sof-shop__line:has(+ .sof-shop__desc) {
      margin-bottom: var(--sof-titre-suite);
    }

    .sof-shop__name,
    .sof-shop__price {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }

    .sof-shop__desc {
      margin-top: 0;
      text-box-trim: trim-start;
      text-box-edge: cap alphabetic;
    }
  }

  /* Les navigateurs qui savent rogner la boite au ras des lettres le font
     eux-memes : plus de compensation, la marge en em est l'ecart reel. */
  @supports (text-box-trim: trim-both) {
    .sof-mob__zone {
      margin-bottom: 0;
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }

    .sof-mob__line {
      margin-top: var(--sof-kicker-suite);
      margin-bottom: var(--sof-titre-suite);
    }

    .sof-mob__row .sof-mob__line:has(+ .sof-mob__desc) {
      margin-bottom: var(--sof-titre-suite);
    }

    .sof-mob__name,
    .sof-mob__price {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }

    .sof-mob__desc {
      margin-top: 0;
      text-box-trim: trim-start;
      text-box-edge: cap alphabetic;
    }
  }
/* END_BLOCK:_header-menu */
/* START_BLOCK:email-signup (INDEX:142) */
.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:social-links (INDEX:168) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */
/* START_BLOCK:sofelya-footer-accordion (INDEX:170) */
.sofelya-footer-accordion {
    width: 100%;
    display: block;
  }

  .sofelya-footer-accordion .sfa__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sof-sp-s);
    list-style: none;
    margin: 0;
    font-size: var(--sof-t-xs);
  }

  .sofelya-footer-accordion .sfa__heading::-webkit-details-marker,
  .sofelya-footer-accordion .sfa__heading::marker {
    display: none;
    content: '';
  }

  /* Taille en em, comme les accordéons du corps de page : le signe garde le
     même rapport à sa ligne partout. Ici le texte fait 13 px, contre 16 sur
     la fiche, donc le signe reste plus petit sans être d'une autre famille. */
  .sofelya-footer-accordion .sfa__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95em;
    height: 0.95em;
    flex-shrink: 0;
  }

  .sofelya-footer-accordion .sfa__toggle svg {
    width: 100%;
    height: 100%;
  }

  .sofelya-footer-accordion .sfa__links p {
    margin: 0;
  }

  .sofelya-footer-accordion .sfa__links {
    font-size: var(--sof-t-xs);
  }

  .sofelya-footer-accordion .sfa__links a {
    text-decoration: none;
    line-height: 1.95;
  }

  /* Tailles du reste du footer calées sur la référence (newsletter, titres) */
  .footer-content .text-block.h3 {
    font-size: 28px;
    line-height: 1.5;
  }

  .footer-content .text-block.paragraph,
  .footer-content .text-block.paragraph p {
    font-size: var(--sof-t-xs);
    line-height: 1.4;
  }

  /* Champ e-mail façon Respire : cadre fin autonome + bouton séparé,
     l'ensemble rempli bord à bord (aligné sur les filets du footer) */
  .footer-content .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: var(--sof-sp-xs);
  }

  .footer-content .email-signup__input.paragraph {
    flex: 1 1 auto;
    width: auto;
  }

  .footer-content .email-signup__button--integrated {
    flex: 0 0 auto;
    margin: 0 !important;
  }

  .footer-content .email-signup__input.paragraph {
    font-size: var(--sof-t-xxs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--sof-ls-s);
    height: 41px;
    padding: 0 var(--sof-sp-s);
    border: 1px solid currentColor !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .footer-content .email-signup__button--integrated.email-signup__button--text {
    position: static !important;
    height: 41px !important;
    font-size: var(--sof-t-xxs);
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 var(--sof-sp-m);
  }

  /* Mention confidentialité sur une seule ligne, collée au champ e-mail */
  .footer-content .text-block.custom p {
    margin: 0;
    font-size: var(--sof-t-xxs);
    white-space: nowrap;
    text-wrap: nowrap;
  }

  /* Proximite (R2) : la note « En vous inscrivant… » appartient au champ
     e-mail, elle s'y colle a 4 px. Le groupe footer impose 16 px d'ecart,
     d'ou le calc negatif. */
  .footer-content .text-block:has(> p a[href*='privacy']),
  .footer-content .email-signup + .text-block {
    margin-top: calc(var(--sof-sp-2xs) - 16px);
  }

  /* Polices type Respire : grotesque (Archivo) + serif (Gelasio), footer uniquement */
  .sofelya-footer-accordion .sfa__heading {
    font-family: var(--sof-corps-famille, sans-serif);
    font-weight: 500;
  }

  .sofelya-footer-accordion .sfa__links {
    font-family: var(--sof-corps-famille, sans-serif);
    font-weight: 400;
  }

  .footer-content .text-block.h3 {
    font-family: var(--sof-titre-famille, var(--sof-corps-famille, sans-serif));
    font-weight: var(--sof-titre-graisse, 500);
    letter-spacing: var(--sof-ls-s);
  }

  .footer-content .text-block.h3 h3 {
    font-family: inherit;
    font-weight: inherit;
  }

  .footer-content .text-block.paragraph p {
    font-family: var(--sof-prose-famille, serif);
    font-weight: 400;
  }

  .footer-content .text-block.custom p,
  .footer-content .email-signup__input.paragraph,
  .footer-content .email-signup__button--integrated.email-signup__button--text {
    font-family: var(--sof-corps-famille, sans-serif);
  }

  .sofelya-footer-accordion .sfa__links a:hover {
    text-decoration: underline;
  }

  .sofelya-footer-accordion .details-content {
    margin-block-start: var(--spacing--size);
  }

  @media screen and (min-width: 750px) {
    .sofelya-footer-accordion {
      width: auto;
      min-width: 180px;
      margin-inline: var(--sof-sp-l);
    }

    .sofelya-footer-accordion .sfa__toggle {
      display: none;
    }

    .sofelya-footer-accordion .sfa__heading {
      cursor: auto;
      justify-content: flex-start;
    }
  }

  @media screen and (max-width: 749px) {
    .sofelya-footer-accordion .sfa__details {
      border-block-end: 1px solid var(--color-foreground);
      padding-block: var(--sof-sp-s);
    }

    .sofelya-footer-accordion--top-border .sfa__details {
      border-block-start: 1px solid var(--color-foreground);
    }

    .sofelya-footer-accordion .sfa__heading {
      cursor: pointer;
    }

    .sofelya-footer-accordion .details-content {
      padding-block-end: var(--sof-sp-xs);
    }

    .sofelya-footer-accordion .sfa__details:not([open]) .details-content {
      margin-block-start: 0;
    }
  }
/* END_BLOCK:sofelya-footer-accordion */
/* START_BLOCK:sofelya-footer-policies (INDEX:171) */
.sofelya-footer-policies__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sof-sp-s) var(--sof-sp-l);
    margin: 0;
    padding: 0;
    list-style: none;
    text-wrap: nowrap;
  }

  /* Capitales fines et espacées, comme le reste des petits libellés du footer.
     Le lien reste lisible : c'est le contraste qui monte au survol, pas la
     taille, pour ne pas faire bouger la ligne. */
  .sofelya-footer-policies a {
    font-family: var(--sof-corps-famille, sans-serif);
    font-weight: 500;
    font-size: var(--sof-t-xxs);
    letter-spacing: var(--sof-ls-l);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .sofelya-footer-policies a:hover,
  .sofelya-footer-policies a:focus-visible {
    color: var(--sof-paper);
    text-decoration: underline;
    text-underline-offset: var(--sof-souligne-decale, 4px);
    text-decoration-thickness: 1px;
  }

  /* Sur mobile, une liste en colonnes mangeait quatre rangées pour des liens
     secondaires. On repasse en texte courant centré, séparé par des points
     médians : deux lignes denses au lieu de quatre. Les libellés eux-mêmes ne
     se coupent pas, c'est l'interligne qui garde la ligne cliquable. */
  @media screen and (max-width: 749px) {
    .sofelya-footer-policies__list {
      display: block;
      max-width: 340px;
      margin-inline: auto;
      text-align: center;
      text-wrap: balance;
      line-height: 2;
    }

    .sofelya-footer-policies__list li {
      display: inline;
    }

    /* Pas de séparateur : quel que soit le procédé, il finit par tomber seul en
       début ou en fin de ligne au moment du retour. L'espacement suffit à
       distinguer les entrées, et text-wrap: balance égalise les lignes. */
    /* Seules les quatre mentions obligatoires restent visibles sur mobile.
       Les autres restent atteignables sur desktop et depuis le tunnel de
       commande, où Shopify les affiche de son côté. */
    .sofelya-footer-policies__list li:not(.sofelya-footer-policies__item--essential) {
      display: none;
    }

    .sofelya-footer-policies a {
      font-size: var(--sof-t-xxs);
      letter-spacing: var(--sof-ls-m);
      white-space: nowrap;
      padding-inline: var(--sof-sp-xs);
    }
  }
/* END_BLOCK:sofelya-footer-policies */
/* START_SNIPPET:accordion-custom-component (INDEX:182) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

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

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */
/* START_SNIPPET:background-media (INDEX:184) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:cart-bubble (INDEX:191) */
.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:192) */
.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:group (INDEX:209) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

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

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

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */
/* START_SNIPPET:header-actions (INDEX:210) */
.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:211) */
.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: var(--sof-t-m);
    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:jumbo-text (INDEX:216) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */
/* START_SNIPPET:predictive-search-styles (INDEX:233) */
/* 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:240) */
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:244) */
#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%, #151515 var(--quick-add-modal-mask-start), #151515 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,
        #151515 0%,
        #151515 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,
        #151515 0%,
        #151515 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:248) */
.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:253) */
/* 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:254) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */
/* START_SNIPPET:skip-to-content-link (INDEX:257) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */
/* START_SNIPPET:slideshow-arrow (INDEX:259) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */
/* START_SNIPPET:slideshow-styles (INDEX:263) */
/*
   * 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:290) */
: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 */