/** Shopify CDN: Minification failed

Line 6659:5 Cannot use type selector "-item" directly after nesting selector "&"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:footer (INDEX:14) */
/* ⚠ Auto-generated from src/sections/footer/footer.css — do not edit directly. */
/* src/sections/footer/footer.css */
@layer reset, base, components, variants;

@layer components {
  .shopify-section--footer {
    background-color: var(--color-white);
  }

  footer {
    display: grid;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 15) calc(var(--spacing) * 10);
  }

  .footer-menu__list {
    display: grid;
    row-gap: calc(var(--spacing) * 10);
  }

  .footer-menu__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: calc(var(--spacing) * 10) 0;
  }

  .footer-menu__title svg {
    width: calc(var(--spacing) * 10);
  }

  .footer-menu {
    display: grid;
  }

  .footer-menu__list {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    padding-bottom: calc(var(--spacing) * 10);
  }

  .footer-menu.is-close .footer-menu__list {
    padding-bottom: 0;
    max-height: 0;
  }

  .footer-menu .footer-menu__toggle {
    display: grid;
  }

  .footer-menu__toggle-plus,
  .footer-menu__toggle-minus {
    grid-column: 1/-1;
    grid-row: 1/-1;
  }

  .footer-menu .footer-menu__toggle .footer-menu__toggle-plus {
    opacity: 0;
    transition: all 0.1s ease-in-out;
  }

  .footer-menu.is-close .footer-menu__toggle .footer-menu__toggle-plus {
    opacity: 1;
  }

  .footer-menu__social-link {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 5);
  }

  @media screen and (min-width: 768px) {
    footer {
      display: grid;
      grid-template: repeat(3, auto) / repeat(4, 1fr);
      justify-content: space-between;
      align-items: flex-start;
      row-gap: var(--spacings-small-xl, 16px);
      column-gap: 88px;
      padding: calc(var(--spacing) * 25) calc(var(--spacing) * 20);
    }

    .footer-menu {
      display: grid;
      row-gap: calc(var(--spacing) * 12);
      width: fit-content;
      grid-row: 1/-1;

      &:nth-child(3) {
        grid-row: 1 / span 1;
      }

      &.footer-menu__inside {
        width: 100%;
        padding: var(--spacings-medium-xs, 20px) 0;

        grid-row: 1 / span 1;
        grid-row: 2 / span 1;
      }
    }

    .footer-menu.is-close-desktop {
      row-gap: 0;
    }

    .row-start-2 {
      grid-row: 2 / span 1;
    }

    .row-start-1 {
      grid-row: 1 / span 1;
    }

    .footer-menu__title {
      cursor: default;
      padding: 0;
      pointer-events: none;
    }

    .footer-menu.is-close-desktop .footer-menu__title {
      padding: 0 0 calc(var(--spacing) * 12) 0;
    }

    .footer-menu__title.is-show-desktop {
      cursor: pointer;
      pointer-events: auto;
    }

    .footer-menu__title .footer-menu__toggle {
      display: none;
    }

    .footer-menu__title.is-show-desktop .footer-menu__toggle {
      display: grid;
    }

    .footer-menu__list {
      transition: all 0.3s ease-in-out;
      overflow: hidden;
      padding-bottom: 0;
    }

    .footer-menu.is-close .footer-menu__list {
      max-height: max-content;
    }

    .footer-menu.is-close-desktop .footer-menu__list {
      padding-bottom: 0;
      max-height: 0;
    }
  }

  .bottom-footer {
    background-color: var(--color-black);

    .bottom-footer__inside {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: flex-start;
      gap: 1.5rem;
      inline-size: 100%;
      padding: 1rem 1rem 2rem;

      @media (width >=48rem) {
        flex-flow: row nowrap;
        justify-content: space-between;
        padding: 1rem 2.5rem;
      }
    }

    & .social-menu {
      display: flex;
      flex-flow: row wrap;
      align-items: flex-start;
      justify-content: center;
      gap: 1rem;
    }

    & .social-menu-link {
      color: var(--color-white);
    }

    & svg {
      min-block-size: 1rem;
      min-inline-size: 1rem;
      fill: currentcolor;
    }
  }
}

/* Cookie consent web-component */
cookie-consent-button {
  cursor: pointer;
}
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:18) */
/* ⚠ Auto-generated from src/sections/header/header.css — do not edit directly. */
/* src/sections/header/header.css */
@layer reset, base, components, variants, settings;

@layer components {
  body.bg-secondary header {
    --color-white: #f8f8f8;
  }

  body.bg-secondary header.menu-is-open {
    --color-white: #ffffff;
  }

  body.bg-secondary header:has(.header__section--bottom.is-open) {
    --color-white: #ffffff;
  }

  .menu__level-1--mobile {
    display: grid;
    font-family: 'Diptyque Saint Germain';
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
  }

  .menu__level-1--desktop {
    display: none;
  }

  header {
    --move-to: 0;
    position: sticky;
    left: 0;
    top: 0px;
    width: 100%;
    pointer-events: none;
    height: 100%;
    pointer-events: none;
    transition:
      transform 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      top 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      background-color 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    z-index: 10;
    margin: 0 auto;
    width: 100%;
  }

  header:has(.header--grid) {
    position: absolute;
    top: unset;
  }

  .header-relative {
    position: relative;
    pointer-events: none;
    height: 100%;
  }

  .header-inside {
    padding-block: calc(var(--spacing) * 8);
    padding-inline: calc(var(--spacing) * 8);
    position: sticky;
    top: 0;
    background-color: var(--color-white);
    transition:
      transform 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      background-color 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    z-index: 10;
    /* max-width: var(--max-width); */
    margin: 0 auto;
    width: 100%;
  }

  header:has(.header--transparent) {
    mix-blend-mode: difference;

    .header-inside {
      background-color: transparent;
    }
  }

  header:has(.header--transparent) .header__logo svg {
    color: var(--color-white);
  }

  header:has(.header--transparent) .menu__item {
    color: var(--color-white);
  }

  header:has(.header__menu-toggle.is-open) {
    mix-blend-mode: normal;

    & .header-inside {
      background-color: var(--color-white);
    }
  }

  header:has(.header--transparent__mobile) {
    mix-blend-mode: difference;

    @media (min-width: 1024px) {
      mix-blend-mode: unset;
    }

    .header-inside {
      background-color: transparent;
      transition: background-color 0s;

      @media (min-width: 1024px) {
        background-color: var(--color-white);
      }
    }
  }

  header:has(.header--transparent__mobile) .header__logo svg {
    color: var(--color-white);

    @media (min-width: 1024px) {
      color: var(--color-black);
    }
  }

  header:has(.header--transparent__mobile) .menu__item,
  header:has(.header--transparent__mobile) .header__action-link--cart-count {
    color: var(--color-white);

    @media (min-width: 1024px) {
      color: var(--color-black);
    }
  }

  header:has(.header__menu-toggle.is-open) {
    mix-blend-mode: normal;

    & .header-inside {
      background-color: var(--color-white);
    }
  }

  header:has(.header--transparent__mobile) .header__actions svg,
  header:has(.header--transparent__mobile) .header__search-button svg,
  header:has(.header--transparent__mobile) .header__menu-toggle svg {
    color: var(--color-white);

    @media (min-width: 1024px) {
      color: var(--color-black);
    }
  }

  header:has(.header__menu-toggle.is-open) .header__logo svg {
    color: var(--color-black);
  }

  header:has(.header__menu-toggle.is-open) .menu__item {
    color: var(--color-black);
  }

  header:has(.header--transparent) .header__actions svg,
  header:has(.header--transparent) .header__search-button svg,
  header:has(.header--transparent) .header__menu-toggle svg {
    color: var(--color-white);
  }

  header:has(.header__menu-toggle.is-open) .header__actions svg,
  header:has(.header__menu-toggle.is-open) .header__search-button svg,
  header:has(.header__menu-toggle.is-open) .header__menu-toggle svg {
    color: var(--color-black);
  }

  .header__menu-toggle {
    display: grid;
  }

  .header__menu-toggle .icon-cross {
    opacity: 0;
  }

  .header__menu-toggle .icon-cross,
  .header__menu-toggle .icon-menu {
    grid-column: 1/-1;
    grid-row: 1/-1;
    transition: opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
  }
  @media screen and (max-width: 1024px) {
    .body--product:has(.header--transparent) {
      & .header-inside a,
      & .header__logo svg,
      & .menu__item,
      & .header__actions svg,
      & .header__search-button svg,
      & .header__menu-toggle svg {
        color: var(--color-black);
      }
    }

    .body--product:has(.header--transparent) .header--reverse {
      & .main-product__image-container:not(.custom-container) img,
      & .main-product__image-container.container-black img,
      & .main-product__image-container:not(.custom-container) video,
      & .main-product__image-container.container-black video {
        background-color: var(--color-white);
      }
      & .header-inside a,
      & .header__logo svg,
      & .menu__item,
      & .header__actions svg,
      & .header__search-button svg,
      & .header__menu-toggle svg {
        color: var(--color-white);
      }
    }
  }
  .header__menu-toggle.is-open .icon-menu {
    opacity: 0;
  }

  .header__menu-toggle.is-open .icon-cross {
    opacity: 1;
  }

  .menu__level-1-container {
    position: relative;
    top: unset;
    background-color: var(--color-white);
    z-index: 10;
  }

  .container-menu-level-1 {
    display: flex;
    justify-content: space-between;
    background-color: var(--color-white);
    align-items: center;
    transform: translateX(100px);
    opacity: 0;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99) 0.1s;
  }

  .container-menu-level-1 .menu-level-1_label-mobile {
    padding-top: calc(var(--spacing) * 16);
    padding-bottom: calc(var(--spacing) * 8);
  }

  header.is-scroll-down {
    & .header-inside {
      transform: translateY(calc(-100%));
    }
  }

  header.menu-is-open {
    transform: translateY(calc(var(--move-to) * -1));
    transition: transform 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
  }

  .header__logo {
    pointer-events: auto;
  }

  .header__logo svg {
    width: calc(var(--spacing) * 52);
    aspect-ratio: 104 / 32;
    color: var(--color-black);
  }

  .header__controls {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 8);
    pointer-events: auto;
  }

  .header__section--top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 11;
    pointer-events: none;
  }

  .header__actions {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 8);
    pointer-events: auto;
  }

  .header__action-link--cart {
    display: grid;

    svg,
    .header__action-link--cart-count {
      grid-column: 1/-1;
      grid-row: 1/-1;
      justify-self: center;
      align-self: center;
    }
  }

  .header__action-link--cart-count {
    font-size: 10px;
    font-weight: 600;
    user-select: none;
    padding-top: 7px;
  }

  .header__section--bottom {
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 64px;
    overflow-y: scroll;
    left: 0;
    background-color: var(--color-white);
    width: 100%;
    height: calc(100svh - 64px);
    z-index: 10;
    padding: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 50);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition:
      padding 0.3s 0.6s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      clip-path 0.9s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      opacity 0.3s 0.6s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      background-color 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    pointer-events: none;
    /*visibility: hidden;*/
  }

  .header__section--bottom.is-open {
    opacity: 1;
    pointer-events: auto;
    /*visibility: visible;*/
    padding-bottom: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition:
      padding 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      clip-path 0.9s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
  }

  .mobile-search-bar {
    position: relative;
    inline-size: 100%;
    cursor: pointer;

    @media (width >=64rem) {
      display: none;
    }

    & svg {
      position: absolute;
      block-size: 3rem;
      inline-size: 1.25rem;
      inset-block-start: 0rem;
      inset-inline-start: 0.75rem;
      pointer-events: none;
    }

    & input {
      display: grid;
      min-block-size: 3rem;
      inline-size: 100%;
      margin-block-end: 1rem;
      padding-inline: 2.75rem 0.75rem;
      column-gap: calc(var(--spacing) * 5);
      font-family: 'Apercu Pro', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0.1px;
      background-color: transparent;
      border: 0.0625rem solid var(--Gris-Nacre, #e6e5e5);
      border-radius: 0.125rem;
      appearance: none;
      pointer-events: none;
    }
  }

  .menu__level-1-arrow {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .menu__level-1,
  .menu__level-1-arrow,
  slide-push-mobile {
    /*transform: translateX(-100px);*/
    /*opacity: 0;*/
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
  }

  .menu__level-1 {
    --title-menu: var(--color-black);
    color: var(--title-menu);
    font-weight: 300;
  }

  .header__section--bottom.is-open .menu__level-1,
  .header__section--bottom.is-open .menu__level-1-arrow,
  .header__section--bottom.is-open slide-push-mobile {
    /*transform: translateX(0);
    opacity: 1;*/
    pointer-events: auto;
  }

  .header__section--bottom:has(.menu__submenu.is-open) {
    overflow: hidden;
  }

  .header__section--bottom:has(.menu__submenu.is-open) .menu__level-1,
  .header__section--bottom:has(.menu__submenu.is-open) .menu__level-1-arrow,
  .header__section--bottom:has(.menu__submenu.is-open) slide-push-mobile {
    transform: translateX(-100px);
    opacity: 0;
    pointer-events: none;
  }

  .menu__item {
    padding: calc(var(--spacing) * 8) 0;
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 8);
    justify-content: space-between;
    font-family: 'Diptyque Saint Germain';
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
  }

  .menu__item--submenu {
    width: 100%;
    background-color: var(--color-white);
    justify-content: flex-start;
    position: sticky;
    top: 0;
    /*padding-top: calc(var(--spacing) * 16);*/
  }

  .menu__level-1-container .menu__level-1-label--mobile {
    margin: 0;
  }

  .menu__item--submenu.w-fit {
    width: fit-content;
  }

  .menu__item-arrow svg {
    width: calc(var(--spacing) * 10);
  }

  .menu__submenu {
    position: fixed;
    overflow: scroll;
    transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    opacity: 0;
    pointer-events: none;
    /*visibility: hidden;*/
    top: 68px;
    left: 0;
    background-color: var(--color-white);
    width: 100%;
    max-height: calc(100vh - 64px - 50px);
    height: max-content;
    padding: calc(var(--spacing) * 8);
    display: grid;
    padding: var(--spacings-small-xl, 16px);

    /*row-gap: calc(var(--spacing) *20 );*/
    padding-top: 0;
    /*overflow-x: hidden;*/
  }

  .menu__submenu-content {
    display: grid;
    row-gap: calc(var(--spacing) * 12);
  }

  .menu__level-1-container {
    display: flex;
    width: 100%;
    align-items: center;
    padding-top: calc(var(--spacing) * 16);
    padding-top: var(--spacings-small-xl);

    justify-content: space-between;
  }

  .menu__submenu.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .menu__submenu.is-open .list-menu,
  .menu__submenu.is-open .push-menu,
  .header__section--bottom:has(.menu__submenu.is-open)
    .menu__level-1-container {
    transform: translateX(0);
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99) 0s;
  }

  .push-menu__link {
    margin: 0;
    padding-top: var(--spacings-small-l);
    width: fit-content;
    justify-self: center;
  }

  .list-menu {
    display: grid;
    row-gap: calc(var(--spacing) * 12);
    padding-top: calc(var(--spacing) * 8);
  }

  .list-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .button-primary--link {
      margin: 0;
    }
  }

  .list-menu__items {
    display: grid;
    row-gap: calc(var(--spacing) * 10);
  }

  .list-menu__items--heavy {
    row-gap: 0;
  }

  .list-menu__item {
    color: var(--color-content-secondary);
    font-family: 'Apercu Pro';
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    letter-spacing: 0;
    display: grid;
    row-gap: calc(var(--spacing));
  }

  .list-menu__item--link-desktop {
    display: none;
  }

  .list-menu__item.font-heavy {
    color: var(--color-black);
    font-family: 'Diptyque Saint Germain';
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    padding-block: calc(var(--spacing) * 8);
  }

  .push-menu {
    display: grid;
    gap: var(--spacings-small-xl, 8px);
    padding-top: var(--spacings-small-xl, 16px);
  }

  .push-menu,
  .list-menu {
    transform: translateX(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99) 0.1s;
  }

  .push-menu__image-link img {
    aspect-ratio: 4 / 3;
    height: 100%;
  }

  .push-menu__content {
    display: grid;
    text-align: center;
    row-gap: calc(var(--spacing) * 4);
    padding: 0 var(--spacings-small-xl, 16px) var(--spacings-small-xl, 16px)
      var(--spacings-small-xl, 16px);
  }

  @media screen and (min-width: 1024px) {
    .menu-dekstop-backdrop {
      visibility: hidden;
      opacity: 0;
      position: fixed;
      pointer-events: none;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .menu__level-1--mobile {
      display: none;
    }

    .menu__level-1--desktop {
      display: grid;
    }

    header:has(.menu__item:hover),
    header:has(.menu__item:focus-within) {
      mix-blend-mode: normal;

      & .header-inside {
        background-color: var(--color-white);
      }
    }

    header.is-scroll-down {
      & .header-inside {
        transform: translateY(calc(-100%));
        transition: 0.15s 0.2s cubic-bezier(0.48, -0.01, 0.34, 0.99);
      }
    }

    header.is-scroll-down:has(.menu__item:hover),
    header.is-scroll-down:has(.menu__item:focus-within) {
      mix-blend-mode: normal;

      & .header-inside {
        transform: translateY(calc(-80%));
      }
    }

    .header-inside:has(.header--transparent) .menu__item:hover,
    .header-inside:has(.header--transparent) .menu__item:focus-within {
      color: var(--color-black);
    }

    .header-inside:has(.menu__item:hover) .header__actions svg,
    .header-inside:has(.menu__item:hover) .header__search-button svg,
    .header-inside:has(.menu__item:hover) .header__logo svg,
    .header-inside:has(.menu__item:focus-within) .header__actions svg,
    .header-inside:has(.menu__item:focus-within) .header__search-button svg,
    .header-inside:has(.menu__item:focus-within) .header__logo svg {
      color: var(--color-black);
    }

    body:has(.menu__item:hover) .menu-dekstop-backdrop,
    body:has(.menu__item:focus-within) .menu-dekstop-backdrop {
      visibility: visible;
      opacity: 1;
      transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    }

    .menu__level-1-container .menu__level-1-label--mobile {
      display: none;
    }

    .menu__level-1-container {
      position: relative;
      top: unset;
      padding: 0;
    }

    header {
      display: grid;
      pointer-events: none;
      z-index: 6;
      position: sticky;
      top: -56px;

      /*row-gap: calc(var(--spacing) * 12);*/
      transition: transform 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    }

    header:has(.header--grid) {
      position: absolute;
      top: unset;
    }

    .header-relative {
      position: relative;
      pointer-events: none;
    }

    .header-inside {
      position: sticky;
      display: grid;
      grid-template: 0.5fr 1fr / 1fr;
      align-items: flex-start;
      top: -56px;
      transition: 0.15s cubic-bezier(0.48, -0.01, 0.34, 0.99);

      height: fit-content;
      padding-block: 0;
      pointer-events: none;
      padding-bottom: calc(var(--spacing) * 0);
      padding-top: calc(var(--spacing) * 12);

      padding-inline: calc(var(--spacing) * 16);
      background-color: var(--color-white);
    }

    .header__menu-toggle {
      display: none;
    }

    .header__section--top {
      grid-row: 1/-1;
      grid-column: 1/-1;
      position: relative;
      align-self: flex-start;
      height: 100%;
      align-items: flex-start;
      z-index: 11;
      pointer-events: none;
      max-width: var(--max-width);
      margin: 0 auto;
      width: 100%;
    }

    .header__controls {
      position: sticky;
      top: calc(18px);
      padding-bottom: 0px;
      pointer-events: auto;
    }

    .header__actions {
      position: sticky;
      top: calc(18px);
      pointer-events: auto;
    }

    .menu__level-1,
    .menu__level-1-arrow {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
      transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    }

    .push-menu,
    .list-menu {
      transform: translateX(0);
      opacity: 1;
      transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99) 0.1s;
    }

    .header__section--bottom {
      overflow: visible;
      grid-row: 2 / -1;
      grid-column: 1 / -1;
      display: flex;
      box-sizing: border-box;
      position: sticky;
      justify-content: center;
      align-items: center;
      opacity: 1;
      clip-path: unset;
      top: 0px;
      left: 0;
      background-color: transparent;
      width: 100%;
      height: auto;
      z-index: 10;
      padding: 0;
      transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
      pointer-events: auto;
      visibility: visible;
      padding-bottom: 0;

      /*padding-bottom: calc(var(--spacing) * 12);*/
    }

    .menu__item-arrow {
      display: none;
    }

    t-menu:has(.menu__item.is-first) {
      & .menu__submenu {
        transition:
          clip-path 0.9s cubic-bezier(0.48, -0.01, 0.34, 0.99),
          opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
      }
    }

    .menu__submenu {
      position: absolute;
      overflow: visible;
      transition: all 0s cubic-bezier(0.48, -0.01, 0.34, 0.99);
      opacity: 0;
      pointer-events: none;
      /*visibility: hidden;*/
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      top: calc(100%);
      left: -32px;
      background-color: var(--color-white);
      width: calc(100% + 64px);
      max-height: auto;
      height: max-content;
      display: grid;
      padding: var(--spacings-medium-l, 40px) var(--spacings-small-m);
    }

    .list-menu__header a {
      display: none;
    }

    .list-menu .links {
      padding-top: calc(var(--spacing) * 4);
    }

    .list-menu__item--link-desktop {
      display: grid;
      margin: 0;
      width: fit-content;
      padding-top: 8px;
    }

    .list-menu__items {
      row-gap: calc(var(--spacing) * 10);
    }

    .list-menu__item.font-heavy {
      padding: 0;
    }

    .menu__item {
      padding: 0;
      cursor: pointer;
      padding-block-start: calc(var(--spacing) * 10);

      padding-block-end: calc(var(--spacing) * 12);
      padding-inline: calc(var(--spacing) * 6);
      transition: all 0s cubic-bezier(0.48, -0.01, 0.34, 0.99);
      font-family: 'Apercu Pro';
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: 0;
    }

    .menu__item:hover .menu__submenu,
    .menu__item:focus-within .menu__submenu {
      opacity: 1;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      pointer-events: auto;
      /*visibility: visible;*/
    }

    .header__section--bottom:has(.menu__item:hover)
      .menu__item:not(:hover)
      .menu__level-1,
    .header__section--bottom:has(.menu__item:focus-within)
      .menu__item:not(:focus-within)
      .menu__level-1 {
      opacity: 0.7;
    }

    .menu__item--submenu {
      display: none;
    }

    .menu__submenu-content {
      display: flex;
      justify-content: center;
      column-gap: calc(var(--spacing) * 8);
    }

    .list-menu {
      padding-top: 0;
      padding-right: var(--spacings-small-xl, 16px);
    }

    .push-menu {
      padding-top: 0;
    }

    .block-push-menu {
      width: 100%;
      max-width: calc(var(--spacing) * 137);
    }

    .block-list-menu {
      max-width: calc(var(--spacing) * 100);
      width: 100%;
    }
  }

  .mobile-menu-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-block-end: 1rem;

    @media (width >=64rem) {
      display: none;
    }

    & svg {
      block-size: 1rem;
      inline-size: 1rem;
    }
  }
}

/* Hide top header loupe icon when mobile menu is opened */
.header-inside [data-btn-toogle-search] {
  transition: 0.2s ease-out;
}

.header-inside:has(.header__section--bottom.is-open) [data-btn-toogle-search] {
  opacity: 0;
  pointer-events: none;
}

header.header--transition {
  mix-blend-mode: normal;

  & .header-inside {
    background-color: var(--color-white);
  }
}

header.header--transition a,
header.header--transition .header__logo svg,
header.header--transition .menu__item,
header.header--transition .header__actions svg,
header.header--transition .header__search-button svg,
header.header--transition .header__menu-toggle svg {
  color: var(--color-black);
}
/* END_SECTION:header */

/* START_SECTION:main-product-v2 (INDEX:23) */
/* ⚠ Auto-generated from src/sections/main-product-v2/main-product-v2.css — do not edit directly. */
/* src/sections/main-product-v2/main-product-v2.css */
@layer components {
  .section-main-product-v2 {
    background-color: #f8f8f8;

    @media screen and (min-width: 1024px) {
      --mp-gallery-slide-size: calc((100vh - 120px) * 0.75);
    }

    .main-product__container {
      display: grid;
      padding-block-end: 40px;

      @media screen and (min-width: 1024px) {
        grid-template: auto / auto auto;
        padding-block-end: 0;
        height: 100%;
        /*max-height: calc(100vh - 120px);*/
      }

      .main-product__gallery {
        @media screen and (min-width: 1024px) {
          max-width: 56.04vw;
          width: 100%;
        }
      }

      .main-product__description {
        background-color: #f8f8f8;

        @media screen and (min-width: 1024px) {
          display: grid;
          align-content: center;
          max-width: 633px;
          width: 100%;
          padding: var(--spacings-large-xs, 56px) var(--spacings-large-l, 120px);
        }
      }

      .product-description__inside {
        display: grid;
        padding: var(--spacings-medium-s, 24px) var(--spacings-small-xl, 16px) 0;
        text-align: center;

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

        .product-description__title {
          display: grid;
        }

        .product-description__ingredients {
          padding-block-start: 16px;
        }
      }

      .main-product__long-description {
        display: block;
        padding-block-start: 16px;
      }

      .main-product__long-description input[type='checkbox'] {
        display: none;
      }

      .main-product__long-description label {
        cursor: pointer;
      }

      .main-product__long-description .hero-collection_description_see-less {
        display: none;
      }

      .main-product__long-description.is-expanded .hero-collection_description_see-more {
        display: none;
      }

      .main-product__description.is-expanded .hero-collection_description_see-less {
        display: inline;
      }
    }
  }
}
/* END_SECTION:main-product-v2 */

/* START_SECTION:main-product (INDEX:24) */
@layer reset, base, components, variants;

  @layer components {
    .engraving-trigger__wrapper {
      position: relative;
      grid-row: 1 / -1;
      grid-column: 1 / -1;
      pointer-events: none;
      height: 100%;
      width: 100%;
      display: grid;
      @media screen and (min-width: 1024px) {
        width: calc(100%);
      }

      .engraving-trigger__wrapper--content {
        height: calc(100vh - 64px);
        justify-self: end;
        z-index: 20;
      }
      .engraving-trigger {
        pointer-events: auto;
        position: sticky;
        top: calc(100vh - 64px - 39px - 16px);
        margin-block-end: 16px;
        margin-inline-end: 16px;
        z-index: 2;
        display: grid;
        padding: var(--spacings-small-m, 8px);

        gap: var(--spacings-small-xs, 2px);
        border-radius: var(--radius-large, 999px);
        background: var(--Background-primary, #fff);
        align-content: center;
        overflow: hidden;
        @media screen and (min-width: 1024px) {
          position: sticky;
          top: calc(100vh - 120px - 39px - 16px);
        }
        .engraving-trigger__content {
          --label-size: 1ch;
          display: inline-grid;
          align-items: center;
          grid-template-columns: auto 0ch;
          gap: var(--spacings-small-xs, 2px);
          transition: all 0.3s ease;
        }

        &:hover {
          .engraving-trigger__content {
            grid-template-columns: auto var(--label-size);
          }
          .label {
            transform: translateX(0);
            opacity: 1;
          }
        }

        .label {
          transform: translateX(100%);
          opacity: 0;
          transition: all 0.3s ease;
        }
      }
    }
    .main-product__images {
      display: grid;
      grid-template: 1fr / 1fr;
      .main-product__slider {
        grid-row: 1 / -1;
        grid-column: 1 / -1;
      }
    }
  }
/* END_SECTION:main-product */

/* START_SECTION:mini-cross-sell (INDEX:26) */
/* ⚠ Auto-generated from src/sections/mini-cross-sell/mini-cross-sell.css — do not edit directly. */
/* src/sections/mini-cross-sell/mini-cross-sell.css */
@layer reset, base, components, variants, settings;

@layer components {
  .section-content-media {
    display: grid;
  }
  .section-content-media.mini-cross-sell {
    display: block;
    @media screen and (min-width: 1024px) {
      display: flex;
    }
  }
}

@layer variants {
  .section-content-media.v-container-padded-desktop {
    @media screen and (min-width: 1024px) {
      padding-inline: 120px;
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        padding-inline: 80px;
      }
    }
  }

  .section-content-media.v-container-padded-mobile {
    padding-inline: 32px;

    &:not(.v-container-padded-desktop) {
      @media screen and (min-width: 1024px) {
        padding-inline: none;
      }
    }

    &.v-container-padded-desktop {
      @media screen and (min-width: 1024px) {
        padding-inline: 120px;
      }
    }
  }

  .section-content-media.v-disposition-media-mobile--top {
    grid-template: auto auto / auto;

    .media-container {
      order: 1;
    }

    .block-content-container.content-container {
      order: 2;
      --padding-block-start: var(--spacings-medium-l, 40px);

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

  .section-content-media.v-disposition-media-mobile--bottom {
    grid-template: auto auto / auto;

    .media-container {
      order: 2;
    }

    .block-content-container.content-container {
      order: 1;
    }
  }

  .section-content-media.v-disposition-media-desktop--bottom,
  .section-content-media.v-disposition-media-desktop--top {
    @media screen and (min-width: 1024px) {
      grid-template: auto auto / auto;
    }

    .block-content-container.content-container .inside {
      @media screen and (min-width: 1024px) {
        max-width: 653px;
      }
    }
  }

  .section-content-media.v-disposition-media-desktop--right,
  .section-content-media.v-disposition-media-desktop--left {
    @media screen and (min-width: 1024px) {
      grid-template: auto / auto auto;
    }

    &.v-media-ratio-desktop-56,
    &.v-media-ratio-desktop-45 {
      @media screen and (min-width: 1024px) {
        display: flex;
        flex-direction: row;
      }

      .media-container {
        @media screen and (min-width: 1024px) {
          max-width: 50%;
          min-width: 36.11%;
          width: 100%;
        }
      }

      .block-content-container.content-container {
        @media screen and (min-width: 1024px) {
          max-width: 50%;
          min-width: 36.11%;
          width: 100%;
        }
      }
    }

    &.v-media-ratio-desktop-43,
    &.v-media-ratio-desktop-11,
    &.v-media-ratio-desktop-169 {
      @media screen and (min-width: 1024px) {
        display: flex;
        flex-direction: row;
      }

      .media-container {
        @media screen and (min-width: 1024px) {
          max-width: 53.47%;
          min-width: 37.85%;
          width: 100%;
        }
      }

      .block-content-container.content-container {
        @media screen and (min-width: 1024px) {
          max-width: 46.53%;
          min-width: 33.26%;
          width: 100%;
        }
      }
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        padding-block: 0 !important;
      }

      .inside {
        @media screen and (min-width: 1024px) {
          max-width: 430px;
        }
      }
    }
  }

  .section-content-media.v-disposition-media-desktop--left,
  .section-content-media.v-disposition-media-desktop--top {
    .media-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }
  }

  .section-content-media.v-disposition-media-desktop--right,
  .section-content-media.v-disposition-media-desktop--bottom {
    .media-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }
  }
}

@layer reset, base, components, variants, settings;

@layer components {
    c-mini-cross-sell {
        display: block;
    }
}
/* END_SECTION:mini-cross-sell */

/* START_SECTION:newsletter-popin (INDEX:27) */
/* ⚠ Auto-generated from src/sections/newsletter-popin/newsletter-popin.css — do not edit directly. */
/* src/sections/newsletter-popin/newsletter-popin.css */
@layer components {
  .shopify-section--newsletter-popin {
    display: flex;
    position: fixed;
    align-items: flex-end;
    justify-content: center;
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0rem;
    inset-inline-start: 0rem;
    background-color: color-mix(in srgb, var(--color-black) 30%, transparent);
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    transition: 0.15s ease-out;
    z-index: 1000;
    pointer-events: none;

    text-align: center;

    @media (width >=48rem) {
      align-items: center;
    }

    &:has([data-open]) {
      visibility: visible;
      opacity: 1;
      pointer-events: initial;
    }

    & .popin-container {
      display: flex;
      position: relative;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
      gap: 0rem;
      max-block-size: calc(100svh - 8rem);
      inline-size: 100%;
      margin: 0;
      padding: 1.5rem;
      padding-block-start: 1.25rem;
      background-color: var(--color-white);
      border-block-start: 0.0625rem solid var(--color-gris-nacre);
      cursor: auto;

      @media (width >=48rem) {
        max-inline-size: 25rem;
        border: 0.0625rem solid var(--color-gris-nacre);
      }
    }

    & .popin-close {
      position: relative;
      margin-block-end: 0.75rem;
      margin-inline-start: auto;
      cursor: pointer;

      &::after {
        content: '';
        position: absolute;
        inline-size: calc(100% + 1rem);
        block-size: calc(100% + 1rem);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      & svg {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        fill: var(--color-black);
        cursor: pointer;
      }
    }

    & .body-m-light {
      margin-block-start: 0.625rem;
      color: var(--color-gris-perle);
      text-align: center;
    }

    & .input-container {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
      width: 100%;
      margin-block-start: 1.5rem;
      color: var(--color-gris-perle);
    }

    & input {
      inline-size: 100%;
      text-align: center;

      &[type='checkbox'] {
        inline-size: auto;
        display: inline-block;
      }
    }

    & .form-error {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
      margin-block-start: 0.125rem;
      color: var(--color-red);

      &[aria-hidden='true'] {
        display: none;
      }

      & svg {
        block-size: 0.75rem;
        inline-size: 0.75rem;
      }
    }

    & label {
      color: inherit;
      text-wrap: pretty;

      & a {
        text-decoration: underline;
      }
    }

    & .confidentiality-checkbox {
      display: flex;
      position: relative;
      align-items: center;
      gap: 1rem;
      margin-block-start: 1rem;
      color: var(--color-gris-perle);

      &[aria-invalid='true'] {
        color: var(--color-red);
      }
    }

    & .button {
      margin-block-start: 1.5rem;
    }
  }

  /* Hiding chat bubble when newsletter popin is open */
  html:has(.shopify-section--newsletter-popin > [data-open])
    div[style]:has(iframe#launcher) {
    opacity: 0;
    pointer-events: none;
  }
}
/* END_SECTION:newsletter-popin */

/* START_SECTION:newsletter (INDEX:28) */
/* ⚠ Auto-generated from src/sections/newsletter/newsletter.css — do not edit directly. */
/* src/sections/newsletter/newsletter.css */
@layer reset, base, components, variants ,settings;
@layer components {
  .newsletter-help {
    display: grid;
    background-color: var(--color-white);
    /*row-gap: calc(var(--spacing) * 20);*/
    justify-items: center;
    margin: 0 auto;

    .newsletter-help__inside {
      display: grid;
      padding: 0 calc(var(--spacing) * 10);
      row-gap: calc(var(--spacing) * 20);
      justify-items: center;
      margin: 0 auto;
      width: 100%;
      grid-column: 1/-1;
      grid-row: 1 /-1;

      @media screen and (min-width: 768px) {
        grid-template: 1fr / 1fr 1fr;
        padding: 0 0;
      }
    }

    .bg-newsletter {
      display: none;

      @media screen and (min-width: 768px) {
        display: grid;

        width: 100%;
        height: 100%;
        grid-column: 1 / -1;
        grid-row: 1 / span 1;
      }
    }

    .bg-help {
      display: none;

      @media screen and (min-width: 768px) {
        display: grid;
        background-color: var(--color-white-100);
        width: 100%;
        height: 100%;
        grid-column: 2 / span 1;
        grid-row: 1 /-1;
      }
    }
  }

  .newsletter-help_border {
    width: 100%;
    height: calc(var(--spacing) * 4);
    border-bottom: 1px solid var(--color-black);
  }

  .newsletter {
    text-align: center;
    display: grid;
    /*row-gap: calc(var(--spacing) * 15);*/
  }

  .newsletter_content {
    display: grid;
    row-gap: calc(var(--spacing) * 8);
  }

  .help {
    display: grid;
    align-content: center;
    width: 100%;
    text-align: center;
    background-color: var(--color-white-100);

    padding: var(--spacings-medium-l, 40px) var(--Space-20, 20px);
    row-gap: calc(var(--spacing) * 10);

    .container-btn {
      padding-block-start: 20px;
    }
  }

  .help_title {
    display: grid;
    row-gap: 16px;
  }

  .help_infos {
    display: grid;
  }

  .help_link {
    color: #000;
    font-family: 'Diptyque Saint-Germain';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: underline;
    text-underline-offset: calc(var(--spacing) * 3);
    transition: 0.3s ease;

    &:hover {
      text-underline-offset: calc(var(--spacing) * 2);
    }
  }

  @media screen and (min-width: 768px) {
    .newsletter-help {
      padding: 0 0;
      border-top: 1px solid var(--Gris-Nacre, #e6e5e5);
      border-bottom: 1px solid var(--Gris-Nacre, #e6e5e5);
      grid-template: 1fr / 1fr 1fr;
    }

    .newsletter-help_border {
      display: none;
    }

    .newsletter,
    .help {
      padding: calc(var(--spacing) * 25) 16.67%;
    }

    .newsletter_content,
    .newsletter_form {
      max-width: 480px;
    }

    .help_title,
    .container-btn,
    .help_infos {
      max-width: 480px;
    }

    .newsletter {
      width: 100%;
      justify-content: center;
      border-right: 1px solid var(--Gris-Nacre, #e6e5e5);
    }

    .help {
      width: 100%;
      background-color: transparent;
      justify-content: center;
      align-items: center;
    }
  }
}
/* END_SECTION:newsletter */

/* START_SECTION:product-information (INDEX:32) */
/* ⚠ Auto-generated from src/sections/product-information/product-information.css — do not edit directly. */
/* src/sections/product-information/product-information.css */
@layer reset, base, components, variants, settings;

@layer components {
  .product-information {
    --section-max-width: 1920px;
    max-width: var(--section-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    @media screen and (max-width: 1024px) {
      padding: var(--spacings-medium-l) var(--spacings-small-xl);
      gap: var(--spacings-medium-l);
    }
    @media screen and (max-width: 768px) {
      flex-wrap: wrap;
    }

    .product-information__title {
      @media screen and (max-width: 768px) {
        text-align: center;
      }
    }

    .product-information--left,
    .product-information--right {
      width: 50%;
      padding: var(--spacings-large-l);

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

    .product-information__item {
      &:not(:last-child) {
        border-bottom: var(--border-width-extra-small, 1px) solid
          var(--State-Disable, #c8c8c8);
      }
    }

    .product-information__item-button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacings-medium-xs) var(--spacings-small-l);
      gap: var(--spacings-small-xl);
      background: none;
      border: none;
      font: inherit;
      color: inherit;
      cursor: pointer;
    }
  }
  .reinsurances-custom__sidebar-item {
    margin-bottom: var(--spacings-medium-s);
  }
}
/* END_SECTION:product-information */

/* START_SECTION:reassurance (INDEX:35) */
/* ⚠ Auto-generated from src/sections/reassurance/reassurence.css — do not edit directly. */
/* src/sections/reassurance/reassurence.css */
@layer reset, base, components, variants;

@layer components {
  .reassurance {
    display: grid;

    margin: 0 auto;
    background-color: var(--color-white);
    padding: 0 calc(var(--spacing) * 10) calc(var(--spacing) * 20);
    row-gap: calc(var(--spacing) * 15);
    justify-items: center;
  }
  .reassurance__border {
    width: 100%;
    border-top: 1px solid var(--color-black);
  }
  .reassurance__container {
    overflow: scroll;
    width: calc(100% + 40px);
    margin-inline: -20px;
  }
  .reassurance__list {
    display: flex;
    width: max-content;
    align-items: flex-start;
    column-gap: calc(var(--spacing) * 4);
    padding-inline: 20px;
    scroll-padding-inline: 20px;
  }
  .reassurance-item {
    width: 25.6vw;
    text-align: center;
    display: grid;
    row-gap: calc(var(--spacing) * 2);
    align-items: flex-start;
  }
  .reassurance-item__figure img {
    height: 82px;
    aspect-ratio: 66/82;
    padding: 0 calc(var(--spacing) * 5);
    object-fit: contain;
  }
  @media screen and (min-width: 768px) {
    .reassurance {
      padding: 0 calc(var(--spacing) * 20) 56px;
      row-gap: 24px;
    }
    .reassurance__border {
      padding-bottom: 32px;
    }
    .reassurance__container {
      justify-self: center;
      width: fit-content;
    }
    .reassurance__list {
      column-gap: 24px;
    }
    .reassurance-item {
      width: 130px;
      text-align: center;
      row-gap: 10px;
      padding: 0rem;
    }
    .reassurance-item__figure img {
      height: 125px;
      width: 100px;
      aspect-ratio: 100/125;
      object-fit: contain;
      padding: 0rem;
    }
  }
}
/* END_SECTION:reassurance */

/* START_SECTION:section-content-media (INDEX:36) */
/* ⚠ Auto-generated from src/sections/section-content-media/section-content-media.css — do not edit directly. */
/* src/sections/section-content-media/section-content-media.css */
@layer reset, base, components, variants, settings;

@layer components {
  .section-content-media {
    display: grid;
  }
  .section-content-media.mini-cross-sell {
    display: block;
    @media screen and (min-width: 1024px) {
      display: flex;
    }
  }
}

@layer variants {
  .section-content-media.v-container-padded-desktop {
    @media screen and (min-width: 1024px) {
      padding-inline: 120px;
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        padding-inline: 80px;
      }
    }
  }

  .section-content-media.v-container-padded-mobile {
    padding-inline: 32px;

    &:not(.v-container-padded-desktop) {
      @media screen and (min-width: 1024px) {
        padding-inline: none;
      }
    }

    &.v-container-padded-desktop {
      @media screen and (min-width: 1024px) {
        padding-inline: 120px;
      }
    }
  }

  .section-content-media.v-disposition-media-mobile--top {
    grid-template: auto auto / auto;

    .media-container {
      order: 1;
    }

    .block-content-container.content-container {
      order: 2;
      --padding-block-start: var(--spacings-medium-l, 40px);

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

  .section-content-media.v-disposition-media-mobile--bottom {
    grid-template: auto auto / auto;

    .media-container {
      order: 2;
    }

    .block-content-container.content-container {
      order: 1;
    }
  }

  .section-content-media.v-disposition-media-desktop--bottom,
  .section-content-media.v-disposition-media-desktop--top {
    @media screen and (min-width: 1024px) {
      grid-template: auto auto / auto;
    }

    .block-content-container.content-container .inside {
      @media screen and (min-width: 1024px) {
        max-width: 653px;
      }
    }
  }

  .section-content-media.v-disposition-media-desktop--right,
  .section-content-media.v-disposition-media-desktop--left {
    @media screen and (min-width: 1024px) {
      grid-template: auto / auto auto;
    }

    &.v-media-ratio-desktop-56,
    &.v-media-ratio-desktop-45 {
      @media screen and (min-width: 1024px) {
        display: flex;
        flex-direction: row;
      }

      .media-container {
        @media screen and (min-width: 1024px) {
          max-width: 50%;
          min-width: 36.11%;
          width: 100%;
        }
      }

      .block-content-container.content-container {
        @media screen and (min-width: 1024px) {
          max-width: 50%;
          min-width: 36.11%;
          width: 100%;
        }
      }
    }

    &.v-media-ratio-desktop-43,
    &.v-media-ratio-desktop-11,
    &.v-media-ratio-desktop-169 {
      @media screen and (min-width: 1024px) {
        display: flex;
        flex-direction: row;
      }

      .media-container {
        @media screen and (min-width: 1024px) {
          max-width: 53.47%;
          min-width: 37.85%;
          width: 100%;
        }
      }

      .block-content-container.content-container {
        @media screen and (min-width: 1024px) {
          max-width: 46.53%;
          min-width: 33.26%;
          width: 100%;
        }
      }
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        padding-block: 0 !important;
      }

      .inside {
        @media screen and (min-width: 1024px) {
          max-width: 430px;
        }
      }
    }
  }

  .section-content-media.v-disposition-media-desktop--left,
  .section-content-media.v-disposition-media-desktop--top {
    .media-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }
  }

  .section-content-media.v-disposition-media-desktop--right,
  .section-content-media.v-disposition-media-desktop--bottom {
    .media-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }
  }
}
/* END_SECTION:section-content-media */

/* START_SECTION:section-coupon (INDEX:37) */
/* ⚠ Auto-generated from src/sections/section-coupon/section-coupon.css — do not edit directly. */
/* src/sections/section-coupon/section-coupon.css */
@layer reset, base, components, variants, settings;

@layer components {
  .section-coupon {
    display: grid;
    margin-inline: auto;
    max-width: 1053px;
    width: fit-content;

    @media screen and (min-width: 1024px) {
      justify-content: center;
    }
  }
}

@layer variants {
  .section-coupon:has(.content-container.is-white) {
    border: 1px solid var(--State-Disable, #c8c8c8);
  }

  .section-coupon.v-container-padded-desktop {
    @media screen and (min-width: 1024px) {
      padding-inline: 120px;
    }

    .content-container {
      @media screen and (min-width: 1024px) {
        padding-inline: 80px;
      }
    }
  }

  .section-coupon.v-container-padded-mobile {
    padding-inline: 32px;

    &:not(.v-container-padded-desktop) {
      @media screen and (min-width: 1024px) {
        padding-inline: none;
      }
    }

    &.v-container-padded-desktop {
      @media screen and (min-width: 1024px) {
        padding-inline: 120px;
      }
    }
  }

  .section-coupon.v-disposition-media-mobile--top {
    grid-template: auto auto / auto;

    .media-container {
      order: 1;
    }

    .content-container {
      order: 2;
      --padding-block-start: var(--spacings-medium-l, 40px);

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

  .section-coupon.v-disposition-media-mobile--bottom {
    grid-template: auto auto / auto;

    .media-container {
      order: 2;
    }

    .content-container {
      order: 1;
    }
  }

  .section-coupon.v-disposition-media-desktop--right,
  .section-coupon.v-disposition-media-desktop--left {
    @media screen and (min-width: 1024px) {
      grid-template: auto / auto auto;
    }

    &.v-media-ratio-desktop-56,
    &.v-media-ratio-desktop-45 {
      @media screen and (min-width: 1024px) {
        display: flex;
        flex-direction: row;
      }

      .media-container {
        @media screen and (min-width: 1024px) {
          min-width: 392px;
          max-width: 653px;
          width: 100%;
        }
      }

      .content-container {
        @media screen and (min-width: 1024px) {
          max-width: 50%;
          min-width: 36.11%;
          width: 100%;
        }
      }
    }

    &.v-media-ratio-desktop-43,
    &.v-media-ratio-desktop-11,
    &.v-media-ratio-desktop-169 {
      @media screen and (min-width: 1024px) {
        display: flex;
        flex-direction: row;
      }

      .media-container {
        @media screen and (min-width: 1024px) {
          max-width: 400px;
          min-width: 400px;
          width: 100%;
        }
      }

      .content-container {
        @media screen and (min-width: 1024px) {
          min-width: 392px;
          max-width: 653px;
          width: 100%;
        }
      }
    }

    .content-container {
      @media screen and (min-width: 1024px) {
        padding-block: 31px !important;
        padding-inline: 80px;
      }

      .inside {
        @media screen and (min-width: 1024px) {
          max-width: 493px;
        }
      }
    }
  }

  .section-coupon.v-disposition-media-desktop--left,
  .section-coupon.v-disposition-media-desktop--top {
    .media-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }

    .content-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }
  }

  .section-coupon.v-disposition-media-desktop--right,
  .section-coupon.v-disposition-media-desktop--bottom {
    .media-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }

    .content-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }
  }
}
/* END_SECTION:section-coupon */

/* START_SECTION:section-faq (INDEX:38) */
@layer reset, base, components, variants ,settings;
  @layer components {
    .section-faq {
      display: flex;
      padding-inline: var(--spacings-medium-m, 32px);
      flex-direction: column;
      align-items: center;
      gap: var(--spacings-medium-m, 32px);
      @media screen and (min-width: 1024px) {
        padding-inline: var(--spacings-large-xl, 160px);
        gap: var(--spacings-medium-l, 40px);
      }
    }
    .section-faq--header {
      text-align: center;
      display: grid;
      max-width: 653px;
    }
    .section-faq--content {
      display: grid;
      max-width: 653px;
    }
    .faq--item {
      border-bottom: var(--border-width-extra-small, 1px) solid var(--State-Disable, #c8c8c8);
      padding: var(--spacings-medium-xs, 20px) 0;
    }
    .faq--item--header {
      padding-inline-start: 12px;
      display: grid;
      grid-template-columns: auto 20px;
      gap: 16px;
      align-items: center;
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
    }
    .faq--item--header--arrow {
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }
    .faq--item--header[aria-expanded='true'] .faq--item--header--arrow {
      transform: rotate(180deg);
    }
    .faq--item--header[aria-expanded='true'] ~ .faq--item--content {
      padding-block-start: 16px;
    }
    .faq--item--content {
      display: grid;
      padding-inline-start: 12px;

      grid-template-columns: auto 20px;
      gap: 16px;
      overflow: hidden;
      height: 0;
      transition:
        height 0.35s ease,
        padding-block-start 0.35s ease;

      .faq--item--content--inner {
        p,
        li {
          margin-block: 1rem;

          &:first-child {
            margin-block-start: 0;
          }

          &:last-child {
            margin-block-end: 0;
          }
        }
        ul,
        li {
          list-style: disc;
          /* padding-bottom: var(--spacings-small-xl, 16px); */
        }
        li {
          margin-inline-start: 1rem;
        }

        a {
          text-decoration: underline;
        }
      }
    }
  }
/* END_SECTION:section-faq */

/* START_SECTION:section-in-page-nav (INDEX:39) */
/* ⚠ Auto-generated from src/sections/section-in-page-nav/section-in-page-nav.css — do not edit directly. */
/* src/sections/section-in-page-nav/section-in-page-nav.css */
@layer components {
  .section-in-page-nav {
    position: relative;

    .section-in-page-nav__items {
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: nowrap;
      align-items: center;
      overflow-x: auto;
      gap: var(--spacings-medium-s);
      padding: var(--spacings-small-l) var(--spacings-medium-s);
      border-bottom: 1px solid var(--State-Disable, #c8c8c8);
      background: var(--Background-primary, #fff);
      position: sticky;
      top: 64px;
      left: 0;
      right: 0;
      z-index: 10;
      transition: top 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);

      body:has(header.is-scroll-down) & {
        top: 0;
      }

      @media screen and (max-width: 768px) {
        padding: var(--spacings-small-l) var(--spacings-small-xl);
      }

      .section-in-page-nav__item {
        white-space: nowrap;
      }
    }
  }
}
/* END_SECTION:section-in-page-nav */

/* START_SECTION:section-text-gallery-media (INDEX:40) */
/* ⚠ Auto-generated from src/sections/section-text-gallery-media/section-text-gallery-media.css — do not edit directly. */
/* src/sections/section-text-gallery-media/section-text-gallery-media.css */
@layer reset, base, components, variants, settings;

@layer components {
  c-section-text-gallery-media {
    display: grid;
    align-items: flex-start;

    & > .content-container {
      padding: 40px 16px 32px;
      margin: 0 auto;

      .inside {
        max-width: 653px;
      }
    }
  }
}

@layer variants {
  c-section-text-gallery-media.v-disposition-media-desktop--left {
    @media screen and (min-width: 1024px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: 40px;
    }

    & > .media-container {
      @media screen and (min-width: 1024px) {
        grid-column: 1/2;
        grid-row: 1/-1;
        align-self: center;
      }
    }

    & > .content-container {
      @media screen and (min-width: 1024px) {
        padding: 0 var(--spacings-medium-xl, 48px) 40px;
        align-self: flex-end;
      }
    }

    c-gallery-container.v-slider {
      .embla {
        --slide-spacing: 16px;
        --slide-size-desktop: 40%;
      }
    }
  }

  c-section-text-gallery-media.v-disposition-media-desktop--right {
    @media screen and (min-width: 1024px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: 40px;
    }

    & > .media-container {
      @media screen and (min-width: 1024px) {
        grid-column: 2/3;
        grid-row: 1/-1;
        align-self: center;
      }
    }

    & > .content-container {
      @media screen and (min-width: 1024px) {
        padding: 0 var(--spacings-medium-xl, 48px) 40px;
        align-self: flex-end;
      }
    }

    c-gallery-container.v-slider {
      .embla {
        --slide-spacing: 16px;
        --slide-size-desktop: 40%;
      }
    }
  }
  c-section-text-gallery-media.v-disposition-media-desktop--right,
  c-section-text-gallery-media.v-disposition-media-desktop--left {
    .gallery-list {
      .embla__progress {
        @media (min-width: 1024px) {
          display: none;
        }
      }
      .embla__viewport {
        padding-inline: var(--spacings-small-xl, 16px);

        @media (min-width: 1024px) {
          padding-inline: var(--spacings-small-xl, 16px);
        }
      }
      &:has(.container-product-card:nth-child(3)),
      &:has(.container-collection-card:nth-child(3)),
      &:has(.container-info-card:nth-child(3)),
      &:has(.container-media-card:nth-child(3)) {
        .embla__progress {
          @media (min-width: 1024px) {
            display: grid;
          }
        }
      }
    }
  }

  c-section-text-gallery-media.v-disposition-media-desktop--top {
    & > .content-container {
      padding: 32px 16px 40px;

      @media screen and (min-width: 1024px) {
        padding: 40px 0 40px 0;
        margin: 0 auto;
        width: 100%;
      }

      .inside {
        @media screen and (min-width: 1024px) {
          max-width: 653px;
        }
      }

      & > .media-container {
        padding-block-end: 32px;

        @media screen and (min-width: 1024px) {
          padding-block-end: 40px;
        }
      }
    }
    c-gallery-container.v-slider {
      padding-block-end: 40px;
      @media screen and (min-width: 1024px) {
        padding-block-end: 56px;
      }
      .gallery-list {
        .embla__progress {
          @media (min-width: 1024px) {
            display: none;
          }
        }
        &:has(.container-product-card:nth-child(5)),
        &:has(.container-collection-card:nth-child(5)),
        &:has(.container-info-card:nth-child(5)),
        &:has(.container-media-card:nth-child(5)) {
          .embla__viewport {
            padding-inline: var(--spacings-small-xl, 16px);

            @media (min-width: 1024px) {
              padding-inline: var(--spacings-medium-m, 32px);
            }
          }
          .embla__progress {
            @media (min-width: 1024px) {
              display: grid;
            }
          }
        }
        .embla__viewport {
          padding-inline: var(--spacings-small-xl, 16px);

          @media (min-width: 1024px) {
            padding-inline: 0;
          }
        }
      }
      .embla__container {
        @media (min-width: 1024px) {
          justify-content: center;

          &:has(.container-product-card:nth-child(5)),
          &:has(.container-collection-card:nth-child(5)),
          &:has(.container-info-card:nth-child(5)),
          &:has(.container-media-card:nth-child(5)) {
            justify-content: flex-start;
          }
        }
      }
    }
  }
}
/* END_SECTION:section-text-gallery-media */

/* START_SECTION:set-to-compose-product (INDEX:41) */
/* ⚠ Auto-generated from src/sections/set-to-compose-product/set-to-compose-product.css — do not edit directly. */
/* src/sections/set-to-compose-product/set-to-compose-product.css */
@layer reset, base, components, variants;

@layer components {
  /* Container whole section */
  .set-to-compose-product {
    width: 100%;
    position: relative;
  }

  /* Style Error Message */
  .set-to-compose-product_error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacings-small-l);
    color: var(--color-white, #fff);
    text-align: center;
    background: var(--Background-quaternary, #000);
    transform: translateY(0);
    transition: transform 0.3s ease;
    opacity: 1;

    @media screen and (max-width: 768px) {
      padding: var(--spacings-small-l) var(--spacings-small-xl);
    }

    p {
      flex: 1;
      padding: 0 var(--spacings-medium-s);
    }

    &.hidden {
      opacity: 0;
      transform: translateY(-100%);
      overflow: hidden;
      pointer-events: none;
      transition:
        transform 0.3s ease,
        opacity 0s 0.3s ease;
    }
  }

  .set-to-compose-product_error-message_button {
    position: absolute;
    right: var(--spacings-small-l);
    color: inherit;
    width: 24px;
    height: 24px;
  }

  /* Style Hero */
  .set-to-compose-product_hero {
    padding-top: var(--spacings-large-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 768px) {
      padding-top: var(--spacings-medium-l);
    }
  }
  .set-to-compose-product_hero_title {
    text-align: center;
  }
  .set-to-compose-product_hero_description {
    padding-inline: var(--spacings-medium-xs);
    position: relative;
    text-align: center;
    font-weight: 300;
    display: block;
    max-width: 653px;
    margin: 0 auto;
    padding-top: var(--spacings-small-m);
    padding-bottom: var(--spacings-small-m);
  }

  /* Style Product Grid */
  .set-to-compose-product_grid {
    padding: var(--spacings-large-xs) var(--spacings-medium-m);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--spacings-small-xl);
    row-gap: var(--spacings-medium-l);

    @media screen and (max-width: 768px) {
      padding: var(--spacings-medium-l) var(--spacings-small-xl);
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--spacings-small-m);
      row-gap: var(--spacings-medium-m);
    }
  }

  .set-to-compose-product_grid_item {
    position: relative;
  }

  .set-to-compose-product_check {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-large, 999px);
    border: var(--border-width-extra-small, 1px) solid
      var(--Border-primary, #000);
    background: var(--Background-primary, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 3;
  }

  .set-to-compose-product_check-icon {
    width: 16px;
    height: 16px;

    @media screen and (max-width: 768px) {
      width: 18px;
      height: 18px;
    }
  }

  .set-to-compose-product_check-icon svg {
    width: 100%;
    height: 100%;
  }

  .set-to-compose-product_grid_item.is-selected .set-to-compose-product_check {
    opacity: 1;
    pointer-events: none;
  }
}
/* END_SECTION:set-to-compose-product */

/* START_SECTION:spotify (INDEX:44) */
/* ⚠ Auto-generated from src/sections/spotify/spotify.css — do not edit directly. */
/* src/sections/spotify/spotify.css */
/* END_SECTION:spotify */

/* START_SECTION:text-image (INDEX:47) */
/* Text Image Section Styles */
  @layer reset, base, components, variants, settings;

  @layer components {
    .text-image {
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;

      padding: var(--spacings-medium-l, 40px) 0;
      /*overflow: hidden;*/
    }

    .text-image__content {
      display: flex;
      flex-direction: column;
    }

    /* Text content */
    .text-image__texts-container {
      flex: 1;
      padding: var(--spacings-medium-m) var(--spacings-medium-l);
      box-sizing: border-box;
      @media screen and (min-width: 1024px) {
        padding: var(--spacings-meduim-l) 0px var(--spacings-large-xs);
      }
    }

    .text-image__texts-content {
      position: relative;
      max-width: 653px;
      width: 100%;
      margin: 0 auto;
      /* padding-bottom: var(--spacings-small-s, 4px); */
    }

    .container-large .text-image__texts-content {
      max-width: 653px;
      width: 100%;
      margin: 0 auto;
    }

    .text-image__texts-content {
      display: flex;
      flex-direction: column;
    }

    .container-ratio--1 .text-image__texts-container {
      min-width: 53.5%;
    }

    .container-ratio--2 .text-image__texts-container {
      min-width: 54.5%;
    }

    .container-ratio--3 .text-image__texts-container {
      min-width: 46.5%;
    }

    .container-ratio--4 .text-image__texts-container {
      min-width: 42.5%;
    }

    .container-ratio--5 .text-image__texts-container {
      min-width: 50%;
    }

    .text-image__overtitle,
    .text-image__title,
    .text-image__subtitle {
      margin-bottom: var(--spacings-small-m, 8px);
    }

    .text-image__title:only-child {
      margin-bottom: 0;
    }

    .text-image__label,
    .text-image__description {
      margin: var(--spacings-small-m, 8px) 0;
    }

    .text--image__button-container {
      margin-top: var(--spacings-medium-m, 32px);
    }

    .text--image__button-container .product-form__submit {
      margin-top: 0 !important;
    }

    /* Image content */
    .text-image__content-image {
      position: relative;
      flex: 1;
      line-height: 0;
      grid-column: 1/-1;
      grid-row: 1/-1;
      /* width: 100%; */
    }

    .text-image__content-image-item {
      width: 100%;
      display: grid;
    }

    .text-image__content-image-item-desktop {
      display: none;
    }

    .text-image__content-image-item-mobile {
      display: block;
      grid-column: 1/-1;
      grid-row: 1/-1;
    }

    .text-image__content-image-item-button {
      grid-column: 1/-1;
      grid-row: 1/-1;
      z-index: 2;
      position: relative;
      padding-bottom: var(--spacings-medium-l, 40px);
      align-self: flex-end;
      justify-self: center;
    }
    .container-product-card-horizontal {
      grid-column: 1/-1;
      grid-row: 1/-1;
      z-index: 2;
      height: 100%;
      justify-self: center;

      @media screen and (min-width: 1024px) {
        justify-self: flex-end;
      }
      .product-card-horizontal {
        position: sticky;
        top: calc(100vh - 152px - 48px);
        margin-bottom: var(--spacings-medium-l, 40px);

        @media screen and (min-width: 1024px) {
          margin-bottom: var(--spacings-medium-xl, 48px);
          margin-inline-end: var(--spacings-medium-xl, 48px);
        }
      }
    }
    .text-image__content-image-item-button--sticky {
      --position-sticky: 100vh;
      align-self: unset;
      height: 100%;

      button,
      a {
        margin-top: 0;
        position: sticky;
        top: calc(var(--position-sticky));
      }
    }
    .container-ratio--1 .text-image__content-image {
      min-width: 46.5%;
    }

    .container-ratio--2 .text-image__content-image {
      min-width: 45.5%;
    }

    .container-ratio--3 .text-image__content-image {
      min-width: 53.5%;
    }

    .container-ratio--4 .text-image__content-image {
      min-width: 57.5%;
    }

    .container-ratio--5 .text-image__content-image {
      min-width: 50%;
    }
    .section-text-media .text-image__content--top .text-image__texts-container,
    .section-text-media .text-image__content--bottom,
    .section-text-media .text-image-desktop--bottom,
    .section-text-media .text-image-desktop--left,
    .section-text-media .text-image-desktop--right {
      padding-bottom: 0;
    }
    .section-text-media .text-image-desktop--top,
    .text-image__content--bottom .text-image__texts-container,
    .section-text-media .text-image-desktop--left,
    .section-text-media .text-image-desktop--right {
      padding-top: 0;
    }
    /* Desktop image display */
    @media screen and (min-width: 1024px) {
      .text-image__content-image-item-desktop {
        display: block;
        grid-column: 1/-1;
        grid-row: 1/-1;

        &:has(video) {
          padding-block-end: 0;
          padding-bottom: 0;
        }
      }

      .text-image__content-image-item-mobile {
        display: none;
      }
    }

    .text-image__content-mobile--top {
      flex-direction: column-reverse;
    }

    .text-image__content-mobile--bottom {
      flex-direction: column;
    }

    .text-image .video-container {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .text-image .text-image__content-item-video-mobile {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .text-image .video-content {
      width: 100%;
      height: 100%;
    }

    /*
.text-image__content-mobile--bottom .text-image__texts-container {
  padding-top: 0;
} */

    /* Desktop layout */
    @media screen and (min-width: 1024px) {
      .text-image {
        padding: var(--spacings-large-xs, 56px) 0;
      }

      .text-image__content {
        flex-direction: row;
        align-items: center;
      }

      .text-image__content--left {
        flex-direction: row-reverse;
      }

      .text-image__content--right {
        flex-direction: row;
      }

      .text-image__content--top {
        flex-direction: column-reverse;
      }

      .text-image__content--bottom {
        flex-direction: column;
      }

      .container-ratio--4.text-image__content--top .text-image__content-image,
      .container-ratio--4.text-image__content--bottom .text-image__content-image {
        min-width: 100%;
      }

      .container-ratio--1.text-image__content--top .text-image__texts-content,
      .container-ratio--2.text-image__content--top .text-image__texts-content,
      .container-ratio--3.text-image__content--top .text-image__texts-content,
      .container-ratio--4.text-image__content--top .text-image__texts-content,
      .container-ratio--5.text-image__content--top .text-image__texts-content {
        width: 653px;
      }

      .text-image__texts-container {
        padding: var(--spacings-large-m, 80px) var(--spacings-large-l, 120px);
      }

      .text-image__content-image-item-button {
        /*bottom: var(--spacings-medium-xl, 40px);*/
      }

      .text-image__content--top .text-image__texts-container,
      .text-image__content--bottom .text-image__texts-container {
        padding: var(--spacings-medium-l, 40px) var(--spacings-large-l, 120px);
      }

      .text-image-desktop--top {
        padding-bottom: var(--spacings-small-m, 8px);
      }

      .text-image-desktop--bottom {
        padding-top: var(--spacings-small-m, 8px);
      }

      /* .text-image__content--top .text-image__texts-container {
    padding-bottom: 0;
  }
  .text-image__content--bottom .text-image__texts-container {
    padding-top: 0;
  } */
    }

    @media screen and (max-width: 1024px) {
      .text-image__content-image,
      .text-image__texts-container,
      .text-image__texts-content {
        width: 100%;
        /*min-width: 100% !important;*/
      }

      .text-image-mobile--top {
        padding-bottom: var(--spacings-small-m, 8px);
      }

      .text-image-mobile--bottom {
        padding-top: var(--spacings-small-m, 8px);
      }
    }
  }
/* END_SECTION:text-image */

/* CSS from block stylesheet tags */
/* START_BLOCK:_banner_content (INDEX:51) */
/* ⚠ Auto-generated from src/blocks/_banner_content/_banner_content.css — do not edit directly. */
/* src/blocks/_banner_content/_banner_content.css */
@layer components {
  .is-hide {
    visibility: hidden;
    display: none;
  }
  .banner_content {
    display: grid;
    width: 100%;
    padding: calc(var(--spacing) * 6);
    grid-template: auto / 1fr auto;
    box-sizing: border-box;

    & a {
      position: relative;
      &::before {
        transition: all 0.3s ease;
      }
    }
  }

  .banner__inside {
    display: grid;
    grid-column: 1/-1;
    grid-row: 1/-1;
    align-content: center;
    text-align: center;
    padding: 0 var(--spacings-medium-s);
  }
  .banner__close {
    width: calc(var(--spacing) * 8);
    align-self: center;
    justify-self: end;
    grid-row: 1/-1;
    grid-column: 2/-1;

    cursor: pointer;
  }
  .banner-text {
    justify-self: center;
  }
  .banner-countdown {
    display: grid;
    row-gap: calc(var(--spacing) * 4);
    justify-content: center;
    justify-items: center;
  }
  .banner-countdown__content {
    text-align: center;
  }
  .countdown-container {
    display: flex;
    column-gap: calc(var(--spacing) * 4);
  }

  @media screen and (min-width: 1024px) {
    .banner-countdown {
      display: grid;
      grid-template: auto / auto 1fr;
    }
    .banner-countdown__content {
      grid-column: 1 / span 1;
      grid-row: 1/-1;
      max-width: 62vh;
      text-align: left;
    }
    #countdown-timer {
      grid-column: 1/-1;
      grid-row: 1/-1;
      justify-self: center;
      align-self: center;
    }
  }
}
/* END_BLOCK:_banner_content */

/* START_BLOCK:_collection-card-list (INDEX:56) */
/* ⚠ Auto-generated from src/blocks/_collection-card-list/_collection-card-list.css — do not edit directly. */
/* src/blocks/_collection-card-list/_collection-card-list.css */
@layer components {
  .gallery-list {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: none;
    grid-template-rows: auto;
    row-gap: 21px;
    column-gap: var(--spacings-small-xl, 16px);
    padding-inline: var(--spacings-small-xl, 16px);
    pointer-events: none;
    opacity: 0;

    @media (min-width: 1024px) {
      row-gap: 24px;
      padding-inline: var(--spacings-medium-m, 32px);
    }

    &.is-active {
      display: grid;
      opacity: 1;
      pointer-events: auto;
    }
    /*
    &.shimmer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #ededed 30%, #dcdcdc 50%, #ededed 70%);
      background-size: 400%;
      animation: shimmer 1.5s infinite linear;
      z-index: 10;
    }
    */
  }
}
/* END_BLOCK:_collection-card-list */

/* START_BLOCK:_collection-card (INDEX:57) */
/* ⚠ Auto-generated from src/blocks/_collection-card/_collection-card.css — do not edit directly. */
/* src/blocks/_collection-card/_collection-card.css */
/* END_BLOCK:_collection-card */

/* START_BLOCK:_content-container-cross-sell (INDEX:58) */
@layer components {
    .block-content-container.content-container {
      --background-color: transparent;
      width: 100%;
      display: grid;
      text-align: center;
      justify-content: center;
      padding-inline: var(--spacings-medium-m, 32px);
      background-color: var(--background-color);
      padding-block: var(--spacings-medium-l, 40px);
      @media screen and (min-width: 1024px) {
        padding-inline: var(--spacings-large-l, 120px);
        padding-block: var(--spacings-large-xs, 56px);
      }
      .inside {
        display: grid;
        align-content: center;
        gap: var(--spacings-small-m, 8px);
      }
    }
  }
  @layer variants {
    .block-content-container.content-container.v-text-align-left {
      text-align: left;
      c-countdown {
        justify-content: flex-start;
      }
    }
    .block-content-container.content-container.v-text-align-center {
      text-align: center;
      c-countdown {
        justify-content: center;
      }
    }
    .block-content-container.content-container.v-text-align-right {
      text-align: right;
      c-countdown {
        justify-content: flex-end;
      }
    }
  }
/* END_BLOCK:_content-container-cross-sell */

/* START_BLOCK:_content-container (INDEX:59) */
@layer components {
    .block-content-container.content-container {
      --background-color: transparent;
      width: 100%;
      display: grid;
      text-align: center;
      justify-content: center;
      padding-inline: var(--spacings-medium-m, 32px);
      background-color: var(--background-color);
      padding-block: var(--spacings-medium-l, 40px);
      @media screen and (min-width: 1024px) {
        padding-inline: var(--spacings-large-l, 120px);
        padding-block: var(--spacings-large-xs, 56px);
      }
      .inside {
        display: grid;
        align-content: center;
        gap: var(--spacings-small-m, 8px);
      }
    }
  }
  @layer variants {
    .block-content-container.content-container.v-text-align-left {
      text-align: left;
      c-countdown {
        justify-content: flex-start;
      }
    }
    .block-content-container.content-container.v-text-align-center {
      text-align: center;
      c-countdown {
        justify-content: center;
      }
    }
    .block-content-container.content-container.v-text-align-right {
      text-align: right;
      c-countdown {
        justify-content: flex-end;
      }
    }
  }
/* END_BLOCK:_content-container */

/* START_BLOCK:_countdown (INDEX:60) */
@layer components {
    .container-countdown {
      display: grid;
    }
  }
/* END_BLOCK:_countdown */

/* START_BLOCK:_counter-card (INDEX:61) */
/* ⚠ Auto-generated from src/blocks/_counter-card/_counter-card.css — do not edit directly. */
  /* src/blocks/_counter-card/_counter-card.css */
/* END_BLOCK:_counter-card */

/* START_BLOCK:_description (INDEX:62) */
/* ⚠ Auto-generated from src/blocks/_description/description.css — do not edit directly. */
/* src/blocks/_description/description.css */
@layer reset, base, components, variants, settings;

@layer components {
  .body {
    overflow: hidden;
    color: var(--Content-primary, #000);
    text-overflow: ellipsis;
    padding: var(--spacings-small-m, 8px) 0;

    /* body-large/light */
    font-family: 'Apercu Pro';
    font-size: var(--typography-body-l-light-font-size, 16px);
    font-style: normal;
    font-weight: var(--typography-body-l-light-font-weight, 300);
    line-height: var(--typography-body-l-light-line-height, 22px);
    /* 137.5% */
    letter-spacing: var(--typography-body-l-light-letter-spacing, 0);
  }
}
/* END_BLOCK:_description */

/* START_BLOCK:_form (INDEX:63) */
/* ⚠ Auto-generated from src/blocks/_form/_form.css — do not edit directly. */
/* src/blocks/_form/_form.css */
@layer reset, base, components, variants, settings;

@layer components {
  .block-form-newsletter_inside {
    display: grid;
    width: 100%;
    justify-self: center;
    padding-block-start: var(--spacings-medium-xs, 20px);
  }

  .message--error,
  .message--error-cgv {
    display: none;
    text-align: left;
    padding-top: 8px;
    color: var(--State-Error, #d12f37);
    padding-inline-start: 16px;
  }

  .message--error:has([data-error-text]:not(:empty)),
  .message--error-cgv:has([data-error-text]:not(:empty)) {
    display: flex;
    align-items: center;
    gap: var(--spacings-small-s);
  }
}

@layer variants {
  c-form-newsletter.v-email-invalid {
    input[type='email'] {
      border-color: var(--State-Error, #d12f37);
    }
  }

  c-form-newsletter.v-cgv-invalid {
    .confidentiality-checkbox {
      color: var(--State-Error, #d12f37);

      input[type='checkbox'] {
        outline: 1px solid var(--State-Error, #d12f37);
        border-color: var(--State-Error, #d12f37);
      }

      p,
      a,
      cookie-consent-button {
        color: var(--State-Error, #d12f37);
      }
    }
  }

  .block-form-newsletter_inside.v-sucess {
    input[type='email'] {
      border: 1px solid var(--State-Approved, #03a536);
    }

    .message--sucess {
      padding-top: 8px;
      display: flex;
      align-items: center;
      gap: var(--spacings-small-s);
      text-align: left;
      padding-inline: 16px;
      color: var(--State-Approved, #03a536);
    }
  }
}
/* END_BLOCK:_form */

/* START_BLOCK:_gallery-container (INDEX:64) */
/* ⚠ Auto-generated from src/blocks/_gallery-container/_gallery-container.css — do not edit directly. */
/* src/blocks/_gallery-container/_gallery-container.css */
@layer components {
  c-gallery-container {
    background-color: var(--background-color);
    overflow: hidden;

    .container-tabs {
      overflow: scroll;
    }

    .tabs {
      position: relative;
      width: max-content;
      display: flex;
      align-items: flex-start;
      gap: var(--spacings-medium-s, 24px);
      padding-block-end: var(--spacings-medium-s, 24px);
      padding-inline: 16px;

      margin: 0 auto;
    }
    /*
    .shimmer::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #ededed 30%, #dcdcdc 50%, #ededed 70%);
      background-size: 400%;
      animation: shimmer 1.5s infinite linear;
    }
    */
  }

  .gallery-container__content {
    display: grid;
  }

  .embla {
    --slide-spacing: 16px;
    --slide-size-mobile: 70%;
    --slide-size-desktop: 22%;

    .embla__viewport {
      --bg-info-card: 'transparent';
      overflow: hidden;
      position: relative;
      padding-block-end: 2px;

      @media (min-width: 1024px) {
        padding-inline: 0;
      }
    }

    .container_embla__prev,
    .container_embla__next {
      height: 100%;
      z-index: 2;
      right: 0;
      width: 100px;
      position: absolute;
      display: none;
      top: 50%;
      opacity: 1;
      transform: translateY(calc(-50% - 20px));
      cursor: none;

      @media (min-width: 1024px) {
        display: grid;
      }

      &[data-disabled] {
        opacity: 0;
        pointer-events: none;
        cursor: not-allowed;
      }
    }

    .container_embla__prev {
      left: 0;
    }

    .container_embla__next {
      right: 0;
    }

    .embla__prev,
    .embla__next {
      cursor: none;
      display: grid;
      align-self: center;
      justify-self: center;
      width: 40px;
      height: var(--spacings-medium-l, 40px);
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      border-radius: var(--radius-full, 999px);
      border: var(--border-width-extra-small, 1px) solid
        var(--Border-primary, #000);
      background: var(--Background-primary, #fff);
      transition: transform 0.15s ease-out;
    }

    .embla__progress {
      display: block;
      border-radius: var(--radius-small, 2px);
      box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
      border-radius: var(--radius-small, 2px);
      background: var(--State-Disable, #c8c8c8);
      position: relative;
      height: 1px;
      justify-self: center;
      align-self: center;
      width: 240px;
      max-width: 90%;
      overflow: hidden;

      .embla__progress__bar {
        background: var(--Content-primary, #000);
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        left: -100%;
      }
    }
  }

  @keyframes shimmer {
    0% {
      background-position: 100% 100%;
    }

    100% {
      background-position: 0 0;
    }
  }
}

@layer variants {
  c-gallery-container.v-grid {
    .gallery-list {
      .embla__container {
        grid-template: auto / 1fr 1fr;
        display: grid;
        row-gap: 32px;
        column-gap: 8px;
        justify-content: center;

        @media (min-width: 1024px) {
          display: flex;
          row-gap: 40px;
          column-gap: var(--spacings-small-xl, 16px);

          .embla__slide {
            max-width: 300px;
            width: 100%;

            &.container-info-card {
              max-width: 449px;
              width: 100%;
            }
          }
        }
        &:has(.container-product-card:nth-child(4)),
        &:has(.container-collection-card:nth-child(4)),
        &:has(.container-info-card:nth-child(4)),
        &:has(.container-media-card:nth-child(4)) {
          @media (min-width: 1024px) {
            display: grid;
            grid-template: auto / repeat(4, minmax(0, 300px));
          }
        }
      }
    }

    .embla__prev,
    .embla__next {
      display: none;
      visibility: hidden;
    }

    .embla__progress {
      display: none;
    }
  }
  c-gallery-container.v-slider {
    .gallery-list {
      padding-inline: 0;

      @media (min-width: 1024px) {
        padding-inline: 0;
      }
      .embla__container {
        display: flex;

        touch-action: pan-y pinch-zoom;
        margin-left: calc(var(--slide-spacing) * -1);
      }
      .embla__slide {
        flex: 0 0 var(--slide-size-mobile);
        min-width: 0;
        padding-left: var(--slide-spacing);

        @media (min-width: 1024px) {
          flex: 0 0 var(--slide-size-desktop);
        }
      }
    }
  }
}
/* END_BLOCK:_gallery-container */

/* START_BLOCK:_info-card-list (INDEX:65) */
/* ⚠ Auto-generated from src/blocks/_info-card-list/_info-card-list.css — do not edit directly. */
/* src/blocks/_info-card-list/_info-card-list.css */
@layer components {
  .gallery-list {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: none;
    grid-template-rows: auto;
    row-gap: 21px;
    column-gap: var(--spacings-small-xl, 16px);
    padding-inline: var(--spacings-small-xl, 16px);
    pointer-events: none;
    opacity: 0;

    @media (min-width: 1024px) {
      row-gap: 24px;
      padding-inline: var(--spacings-medium-m, 32px);
    }

    &.is-active {
      display: grid;
      opacity: 1;
      pointer-events: auto;
    }
    /*
    &.shimmer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #ededed 30%, #dcdcdc 50%, #ededed 70%);
      background-size: 400%;
      animation: shimmer 1.5s infinite linear;
      z-index: 10;
    }
    */
  }
}
/* END_BLOCK:_info-card-list */

/* START_BLOCK:_info-card (INDEX:66) */
/* ⚠ Auto-generated from src/blocks/_info-card/_info-card.css — do not edit directly. */
/* src/blocks/_info-card/_info-card.css */
/* END_BLOCK:_info-card */

/* START_BLOCK:_input (INDEX:67) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .block-input {
      display: grid;
      gap: 8px;
      border: none;
    }
    .confidentiality-checkbox {
      display: grid;
      grid-template-columns: 24px 1fr;
      padding: var(--spacings-small-m, 8px) 0;
      align-items: center;
      gap: var(--spacings-small-s, 4px);
      align-self: stretch;
      text-align: left;

      a,
      cookie-consent-button {
        color: var(--Content-secondary, #000);

        text-decoration: underline;
      }
    }

    input[type='email'] {
      border-radius: var(--radius-small, 2px);
      color: var(--Content-primary, #000);
      border: var(--border-width-extra-small, 1px) solid var(--Border-secondary, #717171);
      padding: var(--spacings-small-l, 12px);
      text-align: center;
      &::placeholder {
        color: var(--Content-primary, #000);
      }
    }
  }
/* END_BLOCK:_input */

/* START_BLOCK:_media-card (INDEX:71) */
/* ⚠ Auto-generated from src/blocks/_media-card/_media-card.css — do not edit directly. */
/* src/blocks/_media-card/_media-card.css */
/* END_BLOCK:_media-card */

/* START_BLOCK:_media-card_list (INDEX:72) */
/* ⚠ Auto-generated from src/blocks/_media-card_list/_media-card_list.css — do not edit directly. */
/* src/blocks/_media-card_list/_media-card_list.css */
@layer components {
  .gallery-list {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: none;
    grid-template-rows: auto;
    row-gap: 21px;
    column-gap: var(--spacings-small-xl, 16px);
    padding-inline: var(--spacings-small-xl, 16px);
    pointer-events: none;
    opacity: 0;

    @media (min-width: 1024px) {
      row-gap: 24px;
      padding-inline: var(--spacings-medium-m, 32px);
    }

    &.is-active {
      display: grid;
      opacity: 1;
      pointer-events: auto;
    }
    /*
    &.shimmer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #ededed 30%, #dcdcdc 50%, #ededed 70%);
      background-size: 400%;
      animation: shimmer 1.5s infinite linear;
      z-index: 10;
    }
    */
  }
}
/* END_BLOCK:_media-card_list */

/* START_BLOCK:_media-container-clean (INDEX:73) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .media-container {
      display: grid;
      .test-container-image,
      .container-card-horizontal,
      .container-button,
      .container-video {
        grid-column: 1/-1;
        grid-row: 1/-1;
      }
      .test-container-image {
        display: grid;
      }
      picture {
        display: grid;
        align-self: center;
      }
    }
  }
/* END_BLOCK:_media-container-clean */

/* START_BLOCK:_media-container (INDEX:74) */
/* ⚠ Auto-generated from src/blocks/_media-container/_media-container.css — do not edit directly. */
/* src/blocks/_media-container/_media-container.css */
@layer reset, base, components, variants, settings;

@layer components {
  .media-container {
    display: grid;

    .test-container-image,
    .container-card-horizontal,
    .container-button,
    .container-video {
      grid-column: 1/-1;
      grid-row: 1/-1;
    }

    .test-container-image {
      display: grid;
    }

    picture {
      display: grid;
      align-self: center;
    }

    .container-card-horizontal {
      justify-items: center;
      display: grid;
      pointer-events: none;
      z-index: 2;
      width: 100%;
      height: 100%;

      @media screen and (min-width: 1024px) {
        justify-items: flex-end;
      }

      .product-card-horizontal {
        position: sticky;
        pointer-events: auto;
        top: calc(100vh - 152px - 48px);
        margin-block: var(--spacings-medium-l, 40px);

        @media screen and (min-width: 1024px) {
          margin-block: var(--spacings-medium-xl, 48px);
          margin-inline-end: var(--spacings-medium-xl, 48px);
        }
      }
    }

    .container-button {
      display: grid;
      justify-items: center;
      width: 100%;
      height: fit;
      pointer-events: none;

      align-items: flex-end;

      .cta {
        pointer-events: auto;

        margin-block: var(--spacings-medium-l, 40px);

        @media screen and (min-width: 1024px) {
          margin-block: var(--spacings-medium-xl, 48px);
        }
      }
    }
  }
}

@layer variants {
  .container-button.v-sticky {
    height: 100%;
    align-items: unset;

    .cta {
      position: sticky;
      top: calc(100vh - 48px - 48px);
    }
  }

  .media-container[data-animate-card]
    .container-card-horizontal
    .product-card-horizontal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 1.2s ease,
      transform 1.2s ease;
    transition-delay: var(--card-delay, 2s);
  }

  .media-container[data-animate-card].is-visible
    .container-card-horizontal
    .product-card-horizontal {
    opacity: 1;
    transform: translateY(0);
  }
}
/* END_BLOCK:_media-container */

/* START_BLOCK:_overtitle (INDEX:76) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .overtitle {
      color: var(--Content-secondary, #717171);

      /* label-small/regular */
      font-family: 'Apercu Pro';
      font-size: var(--typography-label-s-regular-font-size, 12px);
      font-style: normal;
      font-weight: var(--typography-label-s-regular-font-weight, 400);
      line-height: var(--typography-label-s-regular-line-height, 14px); /* 116.667% */
      letter-spacing: var(--typography-label-s-regular-letter-spacing, 0);
    }
  }
/* END_BLOCK:_overtitle */

/* START_BLOCK:_product-card-list (INDEX:77) */
/* ⚠ Auto-generated from src/blocks/_product-card-list/_product-card-list.css — do not edit directly. */
/* src/blocks/_product-card-list/_product-card-list.css */
@layer components {
  .gallery-list {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: none;
    grid-template-rows: auto;
    row-gap: 21px;
    column-gap: var(--spacings-small-xl, 16px);
    padding-inline: var(--spacings-small-xl, 16px);
    pointer-events: none;
    opacity: 0;

    @media (min-width: 1024px) {
      row-gap: 24px;
      padding-inline: var(--spacings-medium-m, 32px);
    }

    &.is-active {
      display: grid;
      opacity: 1;
      pointer-events: auto;
    }
    /*
    &.shimmer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #ededed 30%, #dcdcdc 50%, #ededed 70%);
      background-size: 400%;
      animation: shimmer 1.5s infinite linear;
      z-index: 10;
    }
    */
  }
}
/* END_BLOCK:_product-card-list */

/* START_BLOCK:_product-card (INDEX:78) */
/* ⚠ Auto-generated from src/blocks/_product-card/_product-card.css — do not edit directly. */
/* src/blocks/_product-card/_product-card.css */
/* END_BLOCK:_product-card */

/* START_BLOCK:_subtitle (INDEX:83) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .subtitle {
      color: var(--Content-secondary, #717171);
      padding-bottom: var(--spacings-small-m, 8px);

      /* label-small/regular */
      font-family: 'Apercu Pro';
      font-size: var(--typography-label-s-regular-font-size, 12px);
      font-style: normal;
      font-weight: var(--typography-label-s-regular-font-weight, 400);
      line-height: var(--typography-label-s-regular-line-height, 14px); /* 116.667% */
      letter-spacing: var(--typography-label-s-regular-letter-spacing, 0);
    }
  }
/* END_BLOCK:_subtitle */

/* START_BLOCK:_title (INDEX:84) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .title {
      color: var(--Content-primary, #000);

      /* headline-medium/regular */
      font-family: 'Diptyque Saint Germain';
      font-size: var(--typography-headline-m-font-size, 32px);
      font-style: normal;
      font-weight: var(--typography-headline-m-font-weight, 400);
      line-height: var(--typography-headline-m-line-height, 38px); /* 118.75% */
      letter-spacing: var(--typography-headline-m-letter-spacing, 0);
    }
  }
/* END_BLOCK:_title */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:audio-player (INDEX:86) */
/* ⚠ Auto-generated from src/snippets/audio-player/audio-player.css — do not edit directly. */
/* src/snippets/audio-player/audio-player.css */
@layer components {
  c-audio-player {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* Play / Pause button */
  .audio-player__play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    display: grid;
  }

  .audio-player--dark .audio-player__play-btn {
    color: #000;
  }

  .audio-player--light .audio-player__play-btn {
    color: #fff;
  }

  .audio-player__play-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
  }

  .audio-player__icon {
    display: grid;
    width: 24px;
    height: 24px;
    grid-row: 1/-1;
    grid-column: 1/-1;

    &[hidden] {
      visibility: hidden;
      pointer-events: none;
    }

    & svg {
      width: 24px;
      height: 24px;
      pointer-events: none;
    }
  }

  /* Waveform */
  .audio-player__waveform {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 0;
  }

  .audio-player__waveform-track,
  .audio-player__waveform-fill {
    display: flex;
    align-items: center;
  }

  .audio-player__waveform-fill {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0);
  }

  .audio-player--dark .audio-player__waveform-track {
    color: rgba(0, 0, 0, 0.25);
  }

  .audio-player--dark .audio-player__waveform-fill {
    color: #000;
  }

  .audio-player--light .audio-player__waveform-track {
    color: rgba(255, 255, 255, 0.25);
  }

  .audio-player--light .audio-player__waveform-fill {
    color: #fff;
  }

  /* Time display */
  .audio-player__time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .audio-player--dark .audio-player__time {
    color: #000;
  }

  .audio-player--light .audio-player__time {
    color: #fff;
  }

  .audio-player__time-sep {
    opacity: 0.4;
  }

  /* Track info */
  .audio-player__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .audio-player__title {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
  }

  .audio-player__artist {
    font-size: 11px;
    opacity: 0.6;
    line-height: 1.2;
  }

  .audio-player--dark .audio-player__title,
  .audio-player--dark .audio-player__artist {
    color: #000;
  }

  .audio-player--light .audio-player__title,
  .audio-player--light .audio-player__artist {
    color: #fff;
  }
}
/* END_SNIPPET:audio-player */

/* START_SNIPPET:card-product (INDEX:95) */
/* ⚠ Auto-generated from src/snippets/card-product/card-product.css — do not edit directly. */
/* src/snippets/card-product/card-product.css */
@layer components {
  .card-product {
    display: grid;
    row-gap: var(--spacings-small-xl);
    text-align: center;
    justify-items: center;
    height: 100%;
    grid-template: auto 1fr / auto;
  }

  .card-product__top {
    display: grid;
    grid-template: 1fr / 1fr;
    width: 100%;
  }

  .card-product-quick-buy__container {
    grid-row: 1 / -1;
    grid-column: 1/-1;
    z-index: 3;
    align-self: flex-end;
    justify-self: flex-end;
    padding-block-end: var(--spacings-small-xl);
    padding-inline-end: var(--spacings-small-xl);
  }

  .card-product_tags {
    grid-row: 1 / -1;
    grid-column: 1/-1;
    z-index: 3;
    align-self: flex-start;
    justify-self: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacings-small-m);
    padding-top: var(--spacings-small-m);
    padding-left: var(--spacings-small-m);
    pointer-events: none;
    transition: all 0.3s ease;

    @media screen and (min-width: 1024px) {
      padding-top: var(--spacings-small-xl);
      padding-left: var(--spacings-small-xl);
    }
  }

  .card-product_tags .tag {
    display: grid;
    padding: var(--spacings-small-s) var(--spacings-small-s)
      var(--spacings-small-xs);
    background-color: var(--color-white);
    /* color: var(--color-content-secondary); */
  }

  .card-product_image {
    display: grid;
    grid-row: 1 / -1;
    grid-column: 1/-1;
  }

  .card-product_image figure {
    grid-column: 1/-1;
    grid-row: 1/-1;
    z-index: 1;
    width: 100%;
    aspect-ratio: 3/4;
  }

  .card-product_image figure:nth-child(even) {
    transition: all 0.5s linear;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
  }

  /* .card-product_image.is-hover-active:hover ~ .card-product_tags {
    opacity: 0;
    transition: all 0s ease;
  } */
  @media (hover: hover) and (pointer: fine) {
    .card-product_image.is-hover-active:hover figure:nth-child(even) {
      z-index: 2;
      opacity: 1;
      visibility: visible;
    }
  }

  .card-product figure img {
    display: grid;
    aspect-ratio: 3/4;
    height: 100%;
  }

  .card-product_content {
    grid-row: 2 / span 1;
    grid-column: 1/-1;
    display: grid;
    width: 100%;
    row-gap: var(--spacings-small-xl);
    padding: 0 var(--spacings-small-m) var(--spacings-small-xl);

    @media screen and (min-width: 1024px) {
      padding: 0 var(--spacings-small-xl) var(--spacings-small-xl);
    }
  }

  .card-product_description {
    overflow: hidden;
    height: fit-content;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .card-product_infos {
    display: grid;
    align-content: flex-start;
    row-gap: var(--spacings-small-xl);

    &.card-product_infos--set-to-compose {
      align-content: space-between;
    }

    .card-product_infos_top {
      display: grid;
      row-gap: var(--spacings-small-m);
    }

    .card-product_infos_bottom {
      display: grid;
      row-gap: var(--spacings-small-s);
    }
  }

  .card-product_content {
    & .product-form {
      align-self: flex-end;

      & .button {
        margin: auto;

        &.button--card-product {
          width: fit-content;
        }
      }
    }
  }

  /* Handle set-to-compose variant */
  .card-product.set-to-compose {
    border: 1px solid var(--State-Disable, #c8c8c8);
  }
}
/* END_SNIPPET:card-product */

/* START_SNIPPET:cart-total (INDEX:103) */
@layer reset, base, components, variants;

  @layer components {
    .cart__engraving_info {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 16px 0;
      @media screen and (min-width: 1024px) {
        padding: 40px 0;
      }
    }
  }
/* END_SNIPPET:cart-total */

/* START_SNIPPET:category-card (INDEX:104) */
/* ⚠ Auto-generated from src/snippets/category-card/category-card.css — do not edit directly. */
/* src/snippets/category-card/category-card.css */
@layer components {
  c-category-card {
    display: grid;
    height: 100%;
    grid-template-rows: auto 1fr;

    .media-container {
      align-self: flex-start;
    }
    .content-container {
      --background-color: transparent;
      display: grid;
      text-align: center;
      justify-content: center;
      padding: var(--spacings-small-xl, 16px);
      height: 100%;

      .inside {
        display: grid;
        height: 100%;
        gap: var(--spacings-small-m, 8px);
        grid-template-rows: 1fr auto;

        .inside__top {
          display: grid;
          gap: var(--spacings-small-m, 8px);
          align-self: flex-start;
          .title {
            color: var(--Content-primary, #000);
            /* headline-medium/regular */
            font-family: 'Diptyque Saint Germain';
            font-size: var(--typography-headline-m-font-size, 32px);
            font-style: normal;
            font-weight: var(--typography-headline-m-font-weight, 400);
            line-height: var(--typography-headline-m-line-height, 38px);
            /* 118.75% */
            letter-spacing: var(--typography-headline-m-letter-spacing, 0);
          }

          .description {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            align-self: stretch;
          }
          .category-card__product-count {
            padding-block-start: 8px;
          }
        }
        .inside__bottom {
          display: grid;
          gap: var(--spacings-small-m, 8px);
          align-self: flex-end;
        }
      }
    }
  }
}
/* END_SNIPPET:category-card */

/* START_SNIPPET:container-video (INDEX:107) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .container-video {
      position: relative;
      display: grid;
      video {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: cover;
      }
    }
    .video-desktop {
      display: none;
      @media screen and (min-width: 1024px) {
        display: grid;
        align-self: center;
      }
    }
    .video-mobile {
      display: grid;
      @media screen and (min-width: 1024px) {
        display: none;
      }
    }
    .video-controls {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
    }
    .video-btn {
      pointer-events: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      color: #fff;
      display: grid;
      align-items: center;
      justify-content: center;

      &[hidden] {
        display: none;
      }
    }
    .video-btn__icon {
      grid-column: 1/-1;
      grid-row: 1/-1;
      display: flex;
      align-items: center;
      justify-content: center;
      svg {
        width: 24px;
        height: 24px;
      }
      &[hidden] {
        pointer-events: none;
        visibility: hidden;
      }
    }
  }
/* END_SNIPPET:container-video */

/* START_SNIPPET:countdown (INDEX:108) */
/* ⚠ Auto-generated from src/snippets/countdown/countdown.css — do not edit directly. */
/* src/snippets/countdown/countdown.css */
@layer components {
  c-countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: var(--spacings-small-xl, 16px) 0;
  }

  .countdown__item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .countdown__label {
    min-height: 14px;
  }

  .countdown__end-message {
    text-align: center;
  }

  [data-show-seconds='false'] .countdown__item--seconds,
  [data-show-seconds='false'] .countdown__separator--seconds {
    display: none;
  }
}
/* END_SNIPPET:countdown */

/* START_SNIPPET:css-variables (INDEX:109) */
/* ⚠ Auto-generated from src/snippets/css-variables/01-color.css — do not edit directly. */
/* src/snippets/css-variables/01-color.css */
/* ==========================================================================
   Color tokens — source: Figma "Fondation - Components" Mode 1.tokens.json
   ========================================================================== */
@layer reset, base, components, variants;
@layer base {
  :root {
    /* -------------------------------------------------------------------------
     Neutrals
     ---------------------------------------------------------------------- */
    --color-white: #ffffff;
    --color-white-100: #f8f8f8;
    --color-white-200: #e9e9e9;
    --color-black-100: #c8c8c8;
    --color-black-200: #717171;
    --color-black: #000000;

    --color-gray: #808080;
    --color-gris-nacre: #e6e5e5;
    --color-gray-nacre: #e6e5e5;
    --color-gris-perle: #5f5f5f;
    --color-content-secondary: #717171;
    --Neutrals-Grey-58: #6d6d6d;

    /* -------------------------------------------------------------------------
     Feedback
     ---------------------------------------------------------------------- */
    --color-green: #03a536;
    --color-red: #d13037;

    /* -------------------------------------------------------------------------
     Brand palette
     ---------------------------------------------------------------------- */
    --color-blanc-montaigne: #f3efef;
    --color-bleu-roy: #313477;
    --color-ciel: #57b3e7;
    --color-turquoise: #00aabc;
    --color-jade: #008156;
    --color-vert-eau: #70bb93;
    --color-vert-amande: #b7c5a6;
    --color-vert-bouteille: #004139;
    --color-prairie: #22a155;
    --color-pomme: #a4c54a;
    --color-d-vert: #2e5538;
    --color-vert: #2e5538;
    --color-olive: #47574a;
    --color-mousse: #6a6a3c;
    --color-ivoire: #f1cfa9;
    --color-orange: #ed7049;
    --color-safran: #f59c46;
    --color-rouge: #d12f37;
    --color-brique: #8f2937;
    --color-fushia: #b22f70;
    --color-rose-pale: #f9cbcf;
    --color-cuivre: #af6440;
    --color-peche: #f4a078;
    --color-marron: #843f31;
    --color-caramel: #dd6637;

    /* -------------------------------------------------------------------------
     Semantic aliases — design system
     ---------------------------------------------------------------------- */
    --color-surface: var(--color-white);
    --color-surface-subtle: var(--color-white-100);
    --color-text: var(--color-black);
    --color-text-subtle: var(--color-black-200);
    --color-border: var(--color-white-200);

    /* -------------------------------------------------------------------------
     Semantic aliases — Figma tokens
     ---------------------------------------------------------------------- */
    --Content-primary: var(--color-black);
    --Content-secondary: var(--color-black-200);
    --Border-primary: var(--color-black);
    --Border-secondary: var(--color-black-200);
    --Background-primary: var(--color-white);
    --Background-secondary: var(--color-white-100);
    --Background-tertiary: var(--color-blanc-montaigne);
    --Background-quaternary: var(--color-black);
    --Overlay-soft: #00000040;
    --Overlay-strong: #00000080;
    --State-Pressed: var(--color-black-200);
    --State-Disable: var(--color-black-100);
    --State-Approved: var(--color-green);
    --State-Alert: var(--color-orange);
    --State-Error: var(--color-red);
  }
}

/* ⚠ Auto-generated from src/snippets/css-variables/02-typography.css — do not edit directly. */
/* src/snippets/css-variables/02-typography.css */
/* ==========================================================================
   Typography tokens — source: Figma "Fondation - Components" node 106-156
   Desktop.tokens.json + Mobile.tokens.json
   Breakpoint responsive : 750px
   ========================================================================== */
@layer base {
  :root {
    --font-headline: 'Diptyque Saint-Germain', serif;
    --font-body: 'Apercu Pro', sans-serif;

    /* -------------------------------------------------------------------------
     headline-m
     Mobile  28px / lh 34px
     Desktop 32px / lh 38px
     ---------------------------------------------------------------------- */
    --typography-headline-m-font-family: var(--font-headline);
    --typography-headline-m-font-weight: 400;
    --typography-headline-m-letter-spacing: 0px;
    --typography-headline-m-font-size-mobile: 28px;
    --typography-headline-m-line-height-mobile: 34px;
    --typography-headline-m-font-size-desktop: 32px;
    --typography-headline-m-line-height-desktop: 38px;
    /* live — s'adapte au breakpoint */
    --typography-headline-m-font-size: var(
      --typography-headline-m-font-size-mobile
    );
    --typography-headline-m-line-height: var(
      --typography-headline-m-line-height-mobile
    );

    /* -------------------------------------------------------------------------
     headline-s · regular
     Mobile  20px / lh 24px
     Desktop 24px / lh 28px
     ---------------------------------------------------------------------- */
    --typography-headline-s-regular-font-family: var(--font-headline);
    --typography-headline-s-regular-font-weight: 400;
    --typography-headline-s-regular-letter-spacing: 0px;
    --typography-headline-s-regular-font-size-mobile: 20px;
    --typography-headline-s-regular-line-height-mobile: 24px;
    --typography-headline-s-regular-font-size-desktop: 24px;
    --typography-headline-s-regular-line-height-desktop: 28px;
    /* live */
    --typography-headline-s-regular-font-size: var(
      --typography-headline-s-regular-font-size-mobile
    );
    --typography-headline-s-regular-line-height: var(
      --typography-headline-s-regular-line-height-mobile
    );

    /* -------------------------------------------------------------------------
     headline-s · caps  (text-transform: uppercase)
     Mobile  20px / lh 24px / ls -0.4px
     Desktop 24px / lh 28px / ls -0.5px
     ---------------------------------------------------------------------- */
    --typography-headline-s-caps-font-family: var(--font-headline);
    --typography-headline-s-caps-font-weight: 400;
    --typography-headline-s-caps-text-transform: uppercase;
    --typography-headline-s-caps-font-size-mobile: 20px;
    --typography-headline-s-caps-line-height-mobile: 24px;
    --typography-headline-s-caps-letter-spacing-mobile: -0.4px;
    --typography-headline-s-caps-font-size-desktop: 24px;
    --typography-headline-s-caps-line-height-desktop: 28px;
    --typography-headline-s-caps-letter-spacing-desktop: -0.5px;
    /* live */
    --typography-headline-s-caps-font-size: var(
      --typography-headline-s-caps-font-size-mobile
    );
    --typography-headline-s-caps-line-height: var(
      --typography-headline-s-caps-line-height-mobile
    );
    --typography-headline-s-caps-letter-spacing: var(
      --typography-headline-s-caps-letter-spacing-mobile
    );

    /* -------------------------------------------------------------------------
     body-l · light   (identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-body-l-light-font-family: var(--font-body);
    --typography-body-l-light-font-size: 16px;
    --typography-body-l-light-line-height: 22px;
    --typography-body-l-light-font-weight: 300;
    --typography-body-l-light-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     body-l · alternatif  (Diptyque Saint-Germain — identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-body-l-alternatif-font-family: var(--font-headline);
    --typography-body-l-alternatif-font-size: 20px;
    --typography-body-l-alternatif-line-height: 28px;
    --typography-body-l-alternatif-font-weight: 400;
    --typography-body-l-alternatif-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     body-m · light   (identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-body-m-light-font-family: var(--font-body);
    --typography-body-m-light-font-size: 14px;
    --typography-body-m-light-line-height: 20px;
    --typography-body-m-light-font-weight: 300;
    --typography-body-m-light-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     body-m · alternatif  (Diptyque Saint-Germain — identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-body-m-alternatif-font-family: var(--font-headline);
    --typography-body-m-alternatif-font-size: 14px;
    --typography-body-m-alternatif-line-height: 18px;
    --typography-body-m-alternatif-font-weight: 400;
    --typography-body-m-alternatif-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     body-s · light   (identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-body-s-light-font-family: var(--font-body);
    --typography-body-s-light-font-size: 12px;
    --typography-body-s-light-line-height: 16px;
    --typography-body-s-light-font-weight: 300;
    --typography-body-s-light-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     label-l · light   (identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-label-l-light-font-family: var(--font-body);
    --typography-label-l-light-font-size: 16px;
    --typography-label-l-light-line-height: 20px;
    --typography-label-l-light-font-weight: 300;
    --typography-label-l-light-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     label-l · regular   (identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-label-l-regular-font-family: var(--font-body);
    --typography-label-l-regular-font-size: 16px;
    --typography-label-l-regular-line-height: 20px;
    --typography-label-l-regular-font-weight: 400;
    --typography-label-l-regular-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     label-l · caps   (identique mobile/desktop — text-transform: uppercase)
     ---------------------------------------------------------------------- */
    --typography-label-l-caps-font-family: var(--font-body);
    --typography-label-l-caps-font-size: 16px;
    --typography-label-l-caps-line-height: 20px;
    --typography-label-l-caps-font-weight: 400;
    --typography-label-l-caps-letter-spacing: 0px;
    --typography-label-l-caps-text-transform: uppercase;

    /* -------------------------------------------------------------------------
     label-m · light   (identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-label-m-light-font-family: var(--font-body);
    --typography-label-m-light-font-size: 14px;
    --typography-label-m-light-line-height: 16px;
    --typography-label-m-light-font-weight: 300;
    --typography-label-m-light-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     label-m · regular   (identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-label-m-regular-font-family: var(--font-body);
    --typography-label-m-regular-font-size: 14px;
    --typography-label-m-regular-line-height: 16px;
    --typography-label-m-regular-font-weight: 400;
    --typography-label-m-regular-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     label-m · caps   (identique mobile/desktop — text-transform: uppercase)
     ---------------------------------------------------------------------- */
    --typography-label-m-caps-font-family: var(--font-body);
    --typography-label-m-caps-font-size: 14px;
    --typography-label-m-caps-line-height: 16px;
    --typography-label-m-caps-font-weight: 400;
    --typography-label-m-caps-letter-spacing: 0px;
    --typography-label-m-caps-text-transform: uppercase;

    /* -------------------------------------------------------------------------
     label-m · alternatif  (Diptyque Saint-Germain — identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-label-m-alternatif-font-family: var(--font-headline);
    --typography-label-m-alternatif-font-size: 16px;
    --typography-label-m-alternatif-line-height: 18px;
    --typography-label-m-alternatif-font-weight: 400;
    --typography-label-m-alternatif-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     label-s · light   (identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-label-s-light-font-family: var(--font-body);
    --typography-label-s-light-font-size: 12px;
    --typography-label-s-light-line-height: 14px;
    --typography-label-s-light-font-weight: 300;
    --typography-label-s-light-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     label-s · regular   (identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-label-s-regular-font-family: var(--font-body);
    --typography-label-s-regular-font-size: 12px;
    --typography-label-s-regular-line-height: 14px;
    --typography-label-s-regular-font-weight: 400;
    --typography-label-s-regular-letter-spacing: 0px;

    /* -------------------------------------------------------------------------
     label-s · caps   (identique mobile/desktop — text-transform: uppercase)
     ---------------------------------------------------------------------- */
    --typography-label-s-caps-font-family: var(--font-body);
    --typography-label-s-caps-font-size: 12px;
    --typography-label-s-caps-line-height: 14px;
    --typography-label-s-caps-font-weight: 400;
    --typography-label-s-caps-letter-spacing: 0px;
    --typography-label-s-caps-text-transform: uppercase;

    /* -------------------------------------------------------------------------
     label-s · alternatif  (Diptyque Saint-Germain — identique mobile/desktop)
     ---------------------------------------------------------------------- */
    --typography-label-s-alternatif-font-family: var(--font-headline);
    --typography-label-s-alternatif-font-size: 14px;
    --typography-label-s-alternatif-line-height: 16px;
    --typography-label-s-alternatif-font-weight: 400;
    --typography-label-s-alternatif-letter-spacing: 0px;
  }

  /* ==========================================================================
   Desktop — bascule les variables "live" pour les tokens responsives
   ========================================================================== */
  @media (min-width: 750px) {
    :root {
      --typography-headline-m-font-size: var(
        --typography-headline-m-font-size-desktop
      );
      --typography-headline-m-line-height: var(
        --typography-headline-m-line-height-desktop
      );

      --typography-headline-s-regular-font-size: var(
        --typography-headline-s-regular-font-size-desktop
      );
      --typography-headline-s-regular-line-height: var(
        --typography-headline-s-regular-line-height-desktop
      );

      --typography-headline-s-caps-font-size: var(
        --typography-headline-s-caps-font-size-desktop
      );
      --typography-headline-s-caps-line-height: var(
        --typography-headline-s-caps-line-height-desktop
      );
      --typography-headline-s-caps-letter-spacing: var(
        --typography-headline-s-caps-letter-spacing-desktop
      );
    }
  }
}

/* ⚠ Auto-generated from src/snippets/css-variables/03-typography-classes.css — do not edit directly. */
/* src/snippets/css-variables/03-typography-classes.css */
/* ==========================================================================
   Typography utility classes — mobile first + CSS nesting
   Usage : <h2 class="headline-m">...</h2>
   ========================================================================== */

/* --------------------------------------------------------------------------
   Headlines — responsive (mobile → desktop ≥750px)
   -------------------------------------------------------------------------- */
@layer base {
  .headline-m {
    font-family: var(--typography-headline-m-font-family);
    font-size: var(--typography-headline-m-font-size-mobile);
    line-height: var(--typography-headline-m-line-height-mobile);
    font-weight: var(--typography-headline-m-font-weight);
    letter-spacing: var(--typography-headline-m-letter-spacing);

    @media (min-width: 750px) {
      font-size: var(--typography-headline-m-font-size-desktop);
      line-height: var(--typography-headline-m-line-height-desktop);
    }
  }

  .headline-s-regular {
    font-family: var(--typography-headline-s-regular-font-family);
    font-size: var(--typography-headline-s-regular-font-size-mobile);
    line-height: var(--typography-headline-s-regular-line-height-mobile);
    font-weight: var(--typography-headline-s-regular-font-weight);
    letter-spacing: var(--typography-headline-s-regular-letter-spacing);

    @media (min-width: 750px) {
      font-size: var(--typography-headline-s-regular-font-size-desktop);
      line-height: var(--typography-headline-s-regular-line-height-desktop);
    }
  }

  .headline-s-caps {
    font-family: var(--typography-headline-s-caps-font-family);
    font-size: var(--typography-headline-s-caps-font-size-mobile);
    line-height: var(--typography-headline-s-caps-line-height-mobile);
    font-weight: var(--typography-headline-s-caps-font-weight);
    letter-spacing: var(--typography-headline-s-caps-letter-spacing-mobile);
    text-transform: var(--typography-headline-s-caps-text-transform);

    @media (min-width: 750px) {
      font-size: var(--typography-headline-s-caps-font-size-desktop);
      line-height: var(--typography-headline-s-caps-line-height-desktop);
      letter-spacing: var(--typography-headline-s-caps-letter-spacing-desktop);
    }
  }

  /* --------------------------------------------------------------------------
   Body — identique mobile/desktop
   -------------------------------------------------------------------------- */

  .body-l-light {
    font-family: var(--typography-body-l-light-font-family);
    font-size: var(--typography-body-l-light-font-size);
    line-height: var(--typography-body-l-light-line-height);
    font-weight: var(--typography-body-l-light-font-weight);
    letter-spacing: var(--typography-body-l-light-letter-spacing);
  }

  .body-l-alternate {
    font-family: var(--typography-body-l-alternatif-font-family);
    font-size: var(--typography-body-l-alternatif-font-size);
    line-height: var(--typography-body-l-alternatif-line-height);
    font-weight: var(--typography-body-l-alternatif-font-weight);
    letter-spacing: var(--typography-body-l-alternatif-letter-spacing);
  }

  .body-m-light {
    font-family: var(--typography-body-m-light-font-family);
    font-size: var(--typography-body-m-light-font-size);
    line-height: var(--typography-body-m-light-line-height);
    font-weight: var(--typography-body-m-light-font-weight);
    letter-spacing: var(--typography-body-m-light-letter-spacing);
  }

  .body-m-alternate {
    font-family: var(--typography-body-m-alternatif-font-family);
    font-size: var(--typography-body-m-alternatif-font-size);
    line-height: var(--typography-body-m-alternatif-line-height);
    font-weight: var(--typography-body-m-alternatif-font-weight);
    letter-spacing: var(--typography-body-m-alternatif-letter-spacing);
  }

  .body-s-light {
    font-family: var(--typography-body-s-light-font-family);
    font-size: var(--typography-body-s-light-font-size);
    line-height: var(--typography-body-s-light-line-height);
    font-weight: var(--typography-body-s-light-font-weight);
    letter-spacing: var(--typography-body-s-light-letter-spacing);
  }

  /* --------------------------------------------------------------------------
   Labels — identique mobile/desktop
   -------------------------------------------------------------------------- */

  .label-l-light {
    font-family: var(--typography-label-l-light-font-family);
    font-size: var(--typography-label-l-light-font-size);
    line-height: var(--typography-label-l-light-line-height);
    font-weight: var(--typography-label-l-light-font-weight);
    letter-spacing: var(--typography-label-l-light-letter-spacing);
  }

  .label-l-regular {
    font-family: var(--typography-label-l-regular-font-family);
    font-size: var(--typography-label-l-regular-font-size);
    line-height: var(--typography-label-l-regular-line-height);
    font-weight: var(--typography-label-l-regular-font-weight);
    letter-spacing: var(--typography-label-l-regular-letter-spacing);
  }

  .label-l-caps {
    font-family: var(--typography-label-l-caps-font-family);
    font-size: var(--typography-label-l-caps-font-size);
    line-height: var(--typography-label-l-caps-line-height);
    font-weight: var(--typography-label-l-caps-font-weight);
    letter-spacing: var(--typography-label-l-caps-letter-spacing);
    text-transform: var(--typography-label-l-caps-text-transform);
  }

  .label-m-light {
    font-family: var(--typography-label-m-light-font-family);
    font-size: var(--typography-label-m-light-font-size);
    line-height: var(--typography-label-m-light-line-height);
    font-weight: var(--typography-label-m-light-font-weight);
    letter-spacing: var(--typography-label-m-light-letter-spacing);
  }

  .label-m-regular {
    font-family: var(--typography-label-m-regular-font-family);
    font-size: var(--typography-label-m-regular-font-size);
    line-height: var(--typography-label-m-regular-line-height);
    font-weight: var(--typography-label-m-regular-font-weight);
    letter-spacing: var(--typography-label-m-regular-letter-spacing);
  }

  .label-m-caps {
    font-family: var(--typography-label-m-caps-font-family);
    font-size: var(--typography-label-m-caps-font-size);
    line-height: var(--typography-label-m-caps-line-height);
    font-weight: var(--typography-label-m-caps-font-weight);
    letter-spacing: var(--typography-label-m-caps-letter-spacing);
    text-transform: var(--typography-label-m-caps-text-transform);
  }

  .label-m-alternate {
    font-family: var(--typography-label-m-alternatif-font-family);
    font-size: var(--typography-label-m-alternatif-font-size);
    line-height: var(--typography-label-m-alternatif-line-height);
    font-weight: var(--typography-label-m-alternatif-font-weight);
    letter-spacing: var(--typography-label-m-alternatif-letter-spacing);
  }

  .label-s-light {
    font-family: var(--typography-label-s-light-font-family);
    font-size: var(--typography-label-s-light-font-size);
    line-height: var(--typography-label-s-light-line-height);
    font-weight: var(--typography-label-s-light-font-weight);
    letter-spacing: var(--typography-label-s-light-letter-spacing);
  }

  .label-s-regular {
    font-family: var(--typography-label-s-regular-font-family);
    font-size: var(--typography-label-s-regular-font-size);
    line-height: var(--typography-label-s-regular-line-height);
    font-weight: var(--typography-label-s-regular-font-weight);
    letter-spacing: var(--typography-label-s-regular-letter-spacing);
  }

  .label-s-caps {
    font-family: var(--typography-label-s-caps-font-family);
    font-size: var(--typography-label-s-caps-font-size);
    line-height: var(--typography-label-s-caps-line-height);
    font-weight: var(--typography-label-s-caps-font-weight);
    letter-spacing: var(--typography-label-s-caps-letter-spacing);
    text-transform: var(--typography-label-s-caps-text-transform);
  }

  .label-s-alternate {
    font-family: var(--typography-label-s-alternatif-font-family);
    font-size: var(--typography-label-s-alternatif-font-size);
    line-height: var(--typography-label-s-alternatif-line-height);
    font-weight: var(--typography-label-s-alternatif-font-weight);
    letter-spacing: var(--typography-label-s-alternatif-letter-spacing);
  }
}

/* ⚠ Auto-generated from src/snippets/css-variables/04-spacing.css — do not edit directly. */
/* src/snippets/css-variables/04-spacing.css */
@layer reset, base, components, variants;

/* ==========================================================================
   Spacing, border-width, radius, opacity & layout tokens
   Source: Figma "Fondation - Components" Mode 1.tokens.json
   ========================================================================== */
@layer base {
  :root {
    /* -------------------------------------------------------------------------
     Spacings
     ---------------------------------------------------------------------- */
    --spacing: 2px;
    --spacing-small-xs: 2px;
    --spacing-small-s: 4px;
    --spacing-small-m: 8px;
    --spacing-small-l: 12px;
    --spacing-small-xl: 16px;
    --spacing-medium-xs: 20px;
    --spacing-medium-s: 24px;
    --spacing-medium-m: 32px;
    --spacing-medium-l: 40px;
    --spacing-medium-xl: 48px;
    --spacing-large-xs: 56px;
    --spacing-large-s: 64px;
    --spacing-large-m: 80px;
    --spacing-large-l: 120px;
    --spacing-large-xl: 160px;

    /* Aliases with plural prefix (legacy diptyque naming) */
    --spacings-small-xs: var(--spacing-small-xs);
    --spacings-small-s: var(--spacing-small-s);
    --spacings-small-m: var(--spacing-small-m);
    --spacings-small-l: var(--spacing-small-l);
    --spacings-small-xl: var(--spacing-small-xl);
    --spacings-medium-xs: var(--spacing-medium-xs);
    --spacings-medium-s: var(--spacing-medium-s);
    --spacings-medium-m: var(--spacing-medium-m);
    --spacings-medium-l: var(--spacing-medium-l);
    --spacings-medium-xl: var(--spacing-medium-xl);
    --spacings-large-xs: var(--spacing-large-xs);
    --spacings-large-s: var(--spacing-large-s);
    --spacings-large-m: var(--spacing-large-m);
    --spacings-large-l: var(--spacing-large-l);
    --spacings-large-xl: var(--spacing-large-xl);

    /* -------------------------------------------------------------------------
     Border widths
     ---------------------------------------------------------------------- */
    --border-width-extra-small: 1px;
    --border-width-small: 1.5px;
    --border-width-medium: 2px;
    --border-width-large: 3px;
    --border-width-extra-large: 4px;

    /* -------------------------------------------------------------------------
     Border radius
     ---------------------------------------------------------------------- */
    --radius-small: 2px;
    --radius-medium: 4px;
    --radius-large: 8px;
    --radius-full: 999px;

    /* -------------------------------------------------------------------------
     Opacity
     ---------------------------------------------------------------------- */
    --opacity-opaque: 1;
    --opacity-very-high: 0.95;
    --opacity-high: 0.75;
    --opacity-medium: 0.5;
    --opacity-low: 0.25;
    --opacity-very-low: 0.1;
    --opacity-transparent: 0;

    /* -------------------------------------------------------------------------
     Layout
     ---------------------------------------------------------------------- */
    --container-small: 800px;
    --container-medium: 1028px;
    --container-large: 1140px;
    --max-width: 1440px;

    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1200px;
  }
}
/* END_SNIPPET:css-variables */

/* START_SNIPPET:cta (INDEX:110) */
@layer components {
  }
  @layer variants {
    .cta.v-fit {
      width: fit-content;
      justify-self: center;
    }
    .cta.v-primary.v-margin-top {
      margin-top: var(--spacings-medium-m, 32px);
    }
    .cta.v-secondary.v-margin-top {
      margin-top: var(--spacings-medium-s, 24px);
    }
    .cta.v-primary {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      &.v-small {
        height: var(--spacings-medium-l, 40px);
        padding: 0 var(--spacings-small-m, 8px);
        .cta--label {
          gap: var(--spacings-small-xs, 2px);

          font-family: 'Diptyque Saint Germain';
          font-size: var(--typography-label-s-alternatif-font-size, 14px);
          font-style: normal;
          font-weight: var(--typography-label-s-alternatif-font-weight, 400);
          line-height: var(--typography-label-s-alternatif-line-height, 16px); /* 114.286% */
          letter-spacing: var(--typography-label-s-alternatif-letter-spacing, 0);
        }
      }
      &.v-large {
        height: var(--spacings-medium-xl, 48px);
        padding: 0 var(--spacings-medium-s, 24px);
        .cta--label {
          gap: var(--spacings-small-s, 4px);
          font-style: normal;
          font-size: var(--typography-label-m-alternatif-font-size, 16px);
          font-family: 'Diptyque Saint Germain';
          font-weight: var(--typography-label-m-alternatif-font-weight, 400);
          line-height: var(--typography-label-m-alternatif-line-height, 18px);
          letter-spacing: var(--typography-label-m-alternatif-letter-spacing, 0);
        }
      }
      &.v-light {
        color: var(--Content-primary, #000);
        border: var(--border-width-extra-small, 1px) solid currentColor;
        background: var(--Background-primary, #fff);
        transition: all 0.4s ease;

        &:after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          background: currentColor;
          width: 100%;
          height: 2px;
          clip-path: inset(0 0 0 0);
          transition: all 0.4s ease;
        }
        &:hover,
        &:focus {
          &:after {
            clip-path: inset(100% 0 0 0);
          }
        }
        &:active {
          color: var(--State-Pressed, #717171);
        }
        &:disabled,
        &.is-form-disabled {
          color: var(--State-Disable, #c8c8c8);
          cursor: initial;
          .cta--label {
            color: var(--State-Disable, #c8c8c8);
          }
        }
        .cta--label {
          color: var(--Content-primary, #000);
        }
      }
      &.v-dark {
        color: var(--Content-primary, #000);
        border: var(--border-width-extra-small, 1px) solid transparent;
        background: currentColor;
        transition: all 0.4s ease;

        &:active {
          color: var(--State-Pressed, #717171);
        }
        &:disabled,
        &.is-form-disabled {
          color: var(--State-Disable, #c8c8c8);
          cursor: initial;
        }
        .cta--label {
          color: #fff;
        }
      }
      .cta--label {
        display: flex;
        align-items: center;
      }
    }

    .cta.v-secondary {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: flex-start;
      gap: var(--spacings-small-s, 4px);

      &.v-large {
        .cta--label {
          position: relative;
          display: flex;
          align-items: flex-start;
          gap: var(--spacings-small-s, 4px);
          /* label-medium/alt */
          font-family: 'Diptyque Saint Germain';
          font-size: var(--typography-label-m-alternatif-font-size, 16px);
          font-style: normal;
          font-weight: var(--typography-label-m-alternatif-font-weight, 400);
          line-height: var(--typography-label-m-alternatif-line-height, 18px); /* 112.5% */
          letter-spacing: var(--typography-label-m-alternatif-letter-spacing, 0);
          padding-bottom: 4px;

          &:after {
            transition: all 0.4s ease;

            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: currentColor;
            width: 100%;
            height: 1px;
          }
        }
      }
      &:active {
        color: var(--State-Pressed, #717171);
      }
      &:disabled,
      &.is-form-disabled {
        color: var(--State-Disable, #c8c8c8);
        cursor: initial;
      }
      &:hover,
      &:focus {
        .cta--label::after,
        .cta--label .cta--label__text::after {
          transform: translateY(-2px);
        }
      }
      &.v-normal .cta--label {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--spacings-small-s, 4px);
        /* label-medium/alt */
        font-family: 'Diptyque Saint Germain';
        font-size: var(--typography-label-m-alternatif-font-size, 16px);
        font-style: normal;
        font-weight: var(--typography-label-m-alternatif-font-weight, 400);
        line-height: var(--typography-label-m-alternatif-line-height, 18px); /* 112.5% */
        letter-spacing: var(--typography-label-m-alternatif-letter-spacing, 0);
        .cta--label__text {
          position: relative;
          padding-bottom: 4px;

          &:after {
            transition: all 0.4s ease;

            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: currentColor;
            width: 100%;
            height: 1px;
          }
        }
      }
    }
    .cta.v-full {
      width: 100%;
    }
  }
/* END_SNIPPET:cta */

/* START_SNIPPET:description-main-products (INDEX:114) */
/* ⚠ Auto-generated from src/snippets/description-main-products/description-main-products.css — do not edit directly. */
/* src/snippets/description-main-products/description-main-products.css */
@layer components {
  .description-main-products {
    overflow: hidden;
  }

  [data-render-related-product] {
    display: grid;
  }

  .buy-main-product {
    display: grid;
    width: 100%;
    padding-inline: 16px;
    margin-block-start: 40px;
    @media screen and (min-width: 1024px) {
      padding-inline: 0;
    }
  }
}

@layer variants {
  .product-description__inside.v-desktop {
    display: none;

    @media screen and (min-width: 1024px) {
      display: grid;
    }
  }
}
/* END_SNIPPET:description-main-products */

/* START_SNIPPET:engraving-panel (INDEX:116) */
@layer reset, base, components, variants;

  @layer components {
    .engraving-panel__engraving_info {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 8px;
      text-align: left;
    }

    .engraving-panel {
      position: fixed;
      top: 0;
      visibility: hidden;
      pointer-events: none;
      right: 0;
      width: 100%;
      height: 100vh;
      background: white;
      z-index: 20;
      display: grid;
      grid-template: auto 1fr auto / auto;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      background-color: white;

      &.is-open {
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
        &:has([data-tab-id='tab-1']:checked) {
          .engraving-step--position {
            opacity: 1;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
          .bottom-panel-1 {
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
        }
        &:has([data-template-nbr='1']:checked) {
          .engraving-step__content-1 {
            opacity: 1 !important;
            display: grid !important;
            pointer-events: auto;
            z-index: 2;
            input {
              display: inline-block;
            }
          }
        }
        &:has([data-template-nbr='2']:checked) {
          .engraving-step__content-2 {
            opacity: 1 !important;
            display: grid !important;
            pointer-events: auto;
            input {
              display: inline-block;
            }
          }
        }
        &:has([data-tab-id='tab-2']:checked) {
          .engraving-step--text {
            opacity: 1;
            display: grid !important;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
          .bottom-panel-2 {
            position: relative;
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
        }
        &:has([data-tab-id='tab-3']:checked) {
          .engraving-step--fonts {
            display: grid;
            position: relative;
            opacity: 1;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
          .bottom-panel-3 {
            position: relative;
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
        }
        &:has([data-tab-id='tab-4']:checked) {
          .engraving-step--colors {
            display: grid;
            position: relative;
            opacity: 1;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
          .bottom-panel-4 {
            position: relative;
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
        }
      }

      @media screen and (min-width: 1024px) {
        grid-template: auto 1fr / auto;
      }
    }

    .engraving-panel__header {
      align-self: start;
      padding: var(--spacings-small-xl, 16px) var(--spacings-medium-xs, 20px);

      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacings-small-xl, 16px);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
      z-index: 1;
      max-width: 1440px;
      width: 100%;

      @media screen and (min-width: 1024px) {
        padding: var(--spacings-small-xl, 16px) var(--spacings-medium-xs, 20px);

        margin: 0 auto;
        box-shadow: none;
      }

      button {
        justify-self: flex-end;
        svg {
          width: 24px;
          height: 24px;
        }
      }
    }

    .engraving-panel__body {
      display: grid;

      max-width: 1440px;
      width: 100%;

      @media screen and (min-width: 1024px) {
        max-height: calc(100svh - 60px);
        display: grid;
        align-items: flex-start;
        grid-template: auto / 1fr 633px;
        gap: 0;
        margin: 0 auto;
      }

      .content {
        width: 100%;
        display: grid;

        @media screen and (min-width: 1024px) {
          height: 100%;
          max-height: none;
          overflow-y: auto;
        }
      }
    }

    .engraving-panel__image {
      width: 100%;
      background-color: var(--Background-secondary, #fff);

      @media screen and (min-width: 1024px) {
        aspect-ratio: unset;
        position: sticky;
        height: calc(100svh - 60px);
        top: 0;
      }
      img {
        aspect-ratio: 393/240;
        object-fit: contain;
        @media screen and (min-width: 1024px) {
          aspect-ratio: 807/696;
        }
      }
    }

    .engraving-tabs {
      position: sticky;
      top: 0;
      background-color: white;
      z-index: 10;
      display: flex;
      padding: var(--spacings-small-xl, 16px) 0;
      justify-content: center;
      align-items: center;
      gap: var(--spacings-medium-s, 24px);
      align-self: stretch;

      @media screen and (min-width: 1024px) {
        display: none;
      }
    }

    .engraving-tabs__item {
      position: relative;
      display: flex;
      height: var(--spacings-medium-s, 24px);
      padding-bottom: var(--spacings-small-m, 8px);
      justify-content: center;
      align-items: center;
      color: var(--Content-secondary, #717171);

      &.is-disabled {
        opacity: 0.5;
      }

      &:has(input:checked) {
        border-bottom: var(--border-width-extra-small, 1px) solid var(--Border-primary, #000);
        color: var(--Content-primary, #000);
      }

      &:has(input:focus-visible),
      label {
        font-family: var(--typography-label-m-regular-font-family, 'Apercu Pro');
        font-size: var(--typography-label-m-regular-font-size, 14px);
        font-style: normal;
        font-weight: var(--typography-label-m-regular-font-weight, 400);
        line-height: var(--typography-label-m-regular-line-height, 16px);
        letter-spacing: var(--typography-label-m-regular-letter-spacing, 0);
      }

      input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }
    }

    .engraving-panel__form-wrapper c-product-form form {
      padding: var(--spacings-small-xl, 16px);
      display: grid;

      grid-template: 1fr / 1fr;

      @media screen and (min-width: 1024px) {
        overflow: visible;
        gap: var(--spacings-medium-l, 40px);
        padding: var(--spacings-large-xs, 56px) var(--spacings-large-l, 120px) var(--spacings-medium-l, 40px);
      }
    }
    c-product-form {
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .engraving-step {
      display: grid;
      grid-column: 1/-1;
      grid-row: 1/-1;
      opacity: 0;
      pointer-events: none;

      @media screen and (min-width: 1024px) {
        opacity: 1;
        pointer-events: auto;
        grid-column: unset;
        grid-row: unset;
      }
      .engraving-step__header {
        display: none;
        @media screen and (min-width: 1024px) {
          display: grid;
          width: 100%;
          padding-block-end: 18px;
        }
      }
    }

    .engraving-step__content {
      opacity: 0;
      display: none;
      input {
        display: none;
      }
    }

    .engraving-step--position {
      display: flex;
      /*padding: var(--spacings-small-xl, 16px);*/
      justify-content: center;
      flex-wrap: wrap;
      align-items: flex-start;
      column-gap: var(--spacings-small-xl, 16px);
      align-self: stretch;
      @media screen and (min-width: 1024px) {
        padding: 0;
        justify-content: flex-start;
      }
    }

    .button--disabled {
      opacity: 0.5;
      filter: grayscale(1);
    }
    .engraving-panel__footer-desktop {
      /*position: sticky;
      bottom: 0;
      */
      display: none;
      @media screen and (min-width: 1024px) {
        background-color: white;
        align-content: flex-start;

        z-index: 2;
        display: grid;
        gap: var(--spacings-small-l, 12px);
        text-align: center;
        justify-content: center;
        padding: 0 var(--spacings-large-l, 120px) var(--spacings-large-xs, 56px);
      }
    }
    .engraving-panel__footer {
      align-self: end;
      position: sticky;
      align-content: flex-start;

      bottom: 0;
      display: grid;
      gap: var(--spacings-small-l, 12px);
      grid-template: auto/auto;
      text-align: center;
      justify-content: center;
      background-color: white;
      padding: var(--spacings-small-m, 8px);
      z-index: 3;

      @media screen and (min-width: 1024px) {
        display: none;
      }
      .bottom-panel {
        pointer-events: none;
        display: grid;
        justify-items: center;
        opacity: 0;
        grid-column: 1/-1;
        grid-row: 1/-1;
      }
    }

    @keyframes slideInFromRight {
      from {
        transform: translateX(30%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideInFromLeft {
      from {
        transform: translateX(-30%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @media screen and (max-width: 1023px) {
      .engraving-panel[data-direction='forward'].is-open {
        &:has([data-tab-id='tab-1']:checked) .engraving-step--position,
        &:has([data-tab-id='tab-2']:checked) .engraving-step--text,
        &:has([data-tab-id='tab-3']:checked) .engraving-step--fonts,
        &:has([data-tab-id='tab-4']:checked) .engraving-step--colors {
          animation: slideInFromLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        }
      }

      .engraving-panel[data-direction='backward'].is-open {
        &:has([data-tab-id='tab-1']:checked) .engraving-step--position,
        &:has([data-tab-id='tab-2']:checked) .engraving-step--text,
        &:has([data-tab-id='tab-3']:checked) .engraving-step--fonts,
        &:has([data-tab-id='tab-4']:checked) .engraving-step--colors {
          animation: slideInFromRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        }
      }
    }
  }
/* END_SNIPPET:engraving-panel */

/* START_SNIPPET:engraving-product-form-input (INDEX:117) */
@layer reset, base, components, variants;

  @layer components {
    .engraving--font-diptyque {
      font-family: 'Diptyque Saint Germain';
      font-size: 44px;
      align-self: center;
    }
    .engraving--font-desmond {
      font-family: 'Desmond Handwriting';
      font-size: 44px;
      align-self: center;
    }
    .engraving-option {
      position: relative;
      display: grid;
      gap: var(--spacings-small-m, 8px);
      padding: var(--spacings-small-m, 8px) var(--spacings-small-l, 12px) var(--spacings-small-l, 12px)
        var(--spacings-small-l, 12px);
      text-align: center;
      border-radius: var(--radius-small, 2px);
      border: var(--border-width-extra-small, 1px) solid transparent;
      .engraving-option__image {
        width: 40px;
        height: 54px;
        display: grid;
        aspect-ratio: 40/54;
        justify-self: center;
      }
      .engraving-option__content {
        display: grid;
        gap: var(--spacings-small-xs, 2px);
      }
      &:has(input:checked) {
        border: var(--border-width-extra-small, 1px) solid var(--Border-secondary, #717171);
      }

      &:has(input:focus-visible) {
        box-shadow:
          0 0 0 2px white,
          0 0 0 4px var(--Border-primary, #000);
        outline: none;
      }

      label {
        display: grid;
      }

      input {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 0;
        top: 0;
        left: 0;
        margin: -1px;
        overflow: hidden;
        opacity: 0;
        cursor: pointer;
        white-space: nowrap;
        border-width: 0;
        &::placeholder {
          color: var(--Content-primary);
        }
      }
    }
    .engraving-step--text {
      align-items: flex-start;
      overflow-y: scroll;
      max-height: 150px;
      @media screen and (min-width: 1024px) {
        max-height: none;
        overflow-y: auto;
      }
      .engraving-step__content {
        gap: var(--spacings-small-xl, 16px);
      }
      .engraving-input {
        display: grid;
        gap: var(--spacings-small-m, 8px);
        .engraving-input__wrapper {
          position: relative;
          display: flex;
          align-items: center;
        }
        .engraving-input__counter {
          position: absolute;
          right: var(--spacings-small-l, 12px);
          color: var(--Content-secondary, #717171);
          pointer-events: none;
        }
        label {
          display: grid;
          padding-inline-start: var(--spacings-small-xl, 16px);
        }
        input {
          width: 100%;
          padding: var(--spacings-small-xl, 16px) calc(var(--spacings-small-l, 12px) * 4) var(--spacings-small-xl, 16px)
            var(--spacings-small-l, 12px);
          border-radius: var(--radius-small, 2px);
          border: var(--border-width-extra-small, 1px) solid var(--Border-secondary, #717171);

          &.is-error {
            border-color: var(--State-Error, #d13037);
          }
        }
        .engraving-input__error {
          display: none;
          color: var(--State-Error, #d13037);
          margin-top: var(--spacings-small-xs, 2px);
          align-items: center;
          gap: var(--spacings-small-xs, 2px);
          padding-inline-start: var(--spacings-small-xl, 16px);

          svg {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
          }

          &.is-active {
            display: flex;
          }
        }
      }
    }
    .engraving-step--fonts,
    .engraving-step--colors {
      display: grid;
      align-items: flex-start;
      .engraving-step__content {
        --nbr-choices: 1;
        /* padding: var(--spacings-small-xl, 16px);*/
        justify-content: center;
        grid-template-columns: repeat(var(--nbr-choices), auto);
        align-items: center;
        justify-items: center;
        gap: var(--spacings-small-xl, 16px);
        @media screen and (min-width: 1024px) {
          padding: 0;
          justify-content: flex-start;
          justify-items: flex-start;
          grid-template-columns: repeat(var(--nbr-choices), auto);
        }
        .engraving-option {
          width: fit-content;

          &:has(input:checked) {
            background-color: var(--Color-Background-secondary);
            border: var(--border-width-extra-small, 1px) solid var(--Border-secondary, #717171);
          }
          .engraving-option__image {
            width: 70px;
            height: 70px;
            aspect-ratio: 1/1;
            background-color: var(--Background-secondary, #f8f8f8);
          }
        }
      }
    }
  }
/* END_SNIPPET:engraving-product-form-input */

/* START_SNIPPET:full-page-loader (INDEX:124) */
@layer components {
    .full-page-loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .full-page-loader[aria-hidden='false'] {
      opacity: 1;
      pointer-events: all;
    }

    .full-page-loader__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .full-page-loader__logo {
      width: 160px;
      height: auto;
      aspect-ratio: 160/200;
    }

    .full-page-loader__spinner {
      width: 24px;
      height: 24px;
      border: 2px solid var(--color-black, #000);
      border-top-color: transparent;
      border-radius: 50%;
    }
  }
/* END_SNIPPET:full-page-loader */

/* START_SNIPPET:gallery-main-product (INDEX:130) */
/* ⚠ Auto-generated from src/snippets/gallery-main-product/gallery-main-product.css — do not edit directly. */
/* src/snippets/gallery-main-product/gallery-main-product.css */
@layer reset, base, components, variants;

@layer components {
  header:has(.header--grid-mobile) {
    position: absolute !important;
    top: unset;

    @media (min-width: 1024px) {
      position: sticky !important;
      mix-blend-mode: unset !important;
    }
  }

  header.is-edito-visible {
    mix-blend-mode: unset !important;
  }

  header.is-edito-visible .header-inside {
    background-color: transparent;
  }

  header.is-edito-visible .header__logo svg,
  header.is-edito-visible .menu__item {
    color: var(--color-white);
  }

  .main-product__gallery {
    .engraving-trigger__wrapper {
      --tuncat-expanded-height: 0px;
      position: relative;
      grid-row: 1 / -1;
      grid-column: 1 / -1;
      pointer-events: none;
      transition: opacity 0.3s ease;
      display: grid;
      align-self: flex-end;
      justify-self: flex-end;
      margin-block-end: calc(203px + var(--tuncat-expanded-height));
      z-index: 2;

      @media screen and (min-width: 1024px) {
        justify-self: flex-end;
        position: sticky;
        bottom: 0;
        margin-block-end: 0;
      }
      .engraving-trigger__wrapper--content {
        height: auto;
        display: grid;
      }
      .engraving-trigger {
        pointer-events: auto;
        position: sticky;
        align-self: flex-end;
        /*top: calc(100vh - 64px - 39px - 16px);*/
        margin-block-end: 16px;
        margin-inline-end: 16px;
        z-index: 2;
        display: grid;
        width: fit-content;
        justify-self: end;
        padding: var(--spacings-small-m, 8px);

        gap: var(--spacings-small-xs, 2px);
        border-radius: var(--radius-full, 999px);
        background: var(--Background-primary, #fff);
        align-content: center;
        overflow: hidden;

        @media screen and (min-width: 1024px) {
          position: sticky;
          top: unset;
          align-self: flex-end;
          bottom: 16px;
        }

        .engraving-trigger__content {
          --label-size: 1ch;
          display: inline-grid;
          align-items: center;
          grid-template-columns: auto 0ch;
          gap: 0;
          transition: all 0.3s ease;
          .logo {
            display: inline-grid;
            justify-items: center;
            align-items: center;
          }
        }

        &:hover,
        .is-animate-engraving-trigger & {
          .engraving-trigger__content {
            grid-template-columns: auto var(--label-size);
          }

          .label {
            transform: translateX(0);
            opacity: 1;
          }
        }

        .label {
          transform: translateX(100%);
          opacity: 0;
          transition: all 0.3s ease;
        }
      }
    }
  }
  .gallery-main-product {
    display: grid;

    .main-product__slider {
      grid-row: 1 / -1;
      grid-column: 1 / -1;
    }

    .main-product__tags {
      grid-column: 1/-1;
      grid-row: 1/-1;
      justify-self: flex-start;
      align-self: flex-start;
      z-index: 2;
      margin-block-start: 92px;
      margin-inline-start: 16px;
      transition: opacity 0.3s ease;

      @media (min-width: 1024px) {
        margin-block-start: 16px;
        margin-inline-start: 16px;
      }

      .main-product__tag-text {
        background-color: white;
        padding: 4px;
      }
    }

    .embla {
      --slide-spacing: 16px;
      --slide-size-mobile: 100%;
      --slide-size-tablet: 60%;
      --slide-size-desktop: 100%;

      .embla__viewport {
        --bg-info-card: 'transparent';
        overflow: hidden;
        position: relative;
        padding-block-end: 2px;
        display: grid;

        @media (min-width: 1024px) {
          padding-inline: 0;
        }
      }

      .product-description {
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
        align-self: end;
        justify-self: center;
        width: 100%;
        text-align: center;
        min-height: 171px;

        color: white;
        mix-blend-mode: difference;
        pointer-events: none;
        transition: opacity 0.3s ease;
        padding: 0 0 var(--spacings-medium-s, 24px);

        @media (min-width: 1024px) {
          display: none;
        }
      }

      .embla__container {
        grid-column: 1/-1;
        grid-row: 1/-1;
        transition: height 0.3s linear;
        height: fit-content;
        display: flex;
        align-items: flex-start;
        /* Add this */
        touch-action: pan-y pinch-zoom;
        margin-left: calc(var(--slide-spacing) * -1);
      }

      .embla__slide {
        flex: 0 0 var(--slide-size-mobile);
        min-width: 0;

        @media (min-width: 768px) {
          flex: 0 0 var(--slide-size-tablet);
        }

        @media (min-width: 1024px) {
          flex: 0 0 var(--mp-gallery-slide-size, var(--slide-size-desktop));
        }
      }

      .container_embla__prev,
      .container_embla__next {
        width: 40px;
        height: 40px;
        z-index: 2;
        position: absolute;
        display: none;
        top: 50%;
        opacity: 1;
        transform: translateY(-50%);
        cursor: pointer;

        @media (min-width: 1024px) {
          display: grid;
        }

        &[data-disabled] {
          opacity: 0;
          pointer-events: none;
          cursor: not-allowed;
        }
      }

      .container_embla__prev {
        left: 16px;
      }

      .container_embla__next {
        right: 16px;
      }

      .embla__prev,
      .embla__next {
        cursor: pointer;
        display: grid;
        align-self: center;
        justify-self: center;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
        border-radius: var(--radius-full, 999px);
        border: var(--border-width-extra-small, 1px) solid
          var(--Border-primary, #000);
        background: var(--Background-primary, #fff);
        transform: none !important;
        transition: background-color 0.15s ease-out;
      }

      .embla__prev:hover,
      .embla__next:hover {
        background: var(--color-white-100, #f8f8f8);
      }

      .embla__progress {
        display: block;
        border-radius: var(--radius-small, 2px);
        background: rgba(255, 255, 255, 0.35);
        mix-blend-mode: difference;
        position: relative;
        height: 1px;
        justify-self: center;
        align-self: end;
        width: 240px;
        max-width: 90%;
        overflow: hidden;
        margin-block-end: 8px;
        margin-inline: auto;

        .embla__progress__bar {
          background: white;
          position: absolute;
          width: 100%;
          top: 0;
          bottom: 0;
          left: -100%;
          mix-blend-mode: difference;
        }
      }
    }
  }
}
/* END_SNIPPET:gallery-main-product */

/* START_SNIPPET:info-card (INDEX:167) */
/* ⚠ Auto-generated from src/snippets/info-card/info-card.css — do not edit directly. */
/* src/snippets/info-card/info-card.css */
@layer components {
  c-info-card {
    background-color: var(--bg-info-card);
    display: grid;
    max-width: 449px;
    padding: var(--spacings-medium-xs, 20px) var(--spacings-medium-s, 24px)
      var(--spacings-medium-s, 24px) var(--spacings-medium-s, 24px);
    align-items: center;
    gap: var(--spacings-medium-xs, 20px);
    justify-items: center;
    height: 100%;
    box-sizing: border-box;
    align-items: flex-start;

    .icon-container {
      width: var(--spacings-medium-m, 32px);
      height: var(--spacings-medium-m, 32px);

      img {
        aspect-ratio: 1/1;
      }
    }

    .content-container {
      display: grid;
      row-gap: 8px;
      max-width: 449px;
      padding: 0;
      text-align: center;
    }
  }
}
/* END_SNIPPET:info-card */

/* START_SNIPPET:link (INDEX:170) */
@layer components {
    .link {
      margin-top: 12px;
    }
    
  }
  @layer variants {
    .link.v-primary {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: flex-start;
      gap: var(--spacings-small-s, 4px);

      &:active {
        color: var(--State-Pressed, #717171);
      }
      &:disabled {
        color: var(--State-Disable, #c8c8c8);
        cursor: initial;
      }
      &:hover,
      &:focus {
        .cta--label::after,
        .cta--label .cta--label__text::after {
          transform: translateY(-2px);
        }
      }
      .cta--label {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--spacings-small-s, 4px);
        /* label-medium/alt */
        font-family: 'Diptyque Saint Germain';
        font-size: var(--typography-label-m-regular-font-size, 14px);
        font-style: normal;
        font-weight: var(--typography-label-m-regular-font-weight, 400);
        line-height: var(--typography-label-m-regular-line-height, 16px); /* 114.286% */
        letter-spacing: var(--typography-label-m-regular-letter-spacing, 0);
        .cta--label__text {
          position: relative;
          padding-bottom: 4px;

          &:after {
            transition: all 0.4s ease;

            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: currentColor;
            width: 100%;
            height: 1px;
          }
        }
      }
    }
    .link.v-secondary {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: flex-start;
      gap: var(--spacings-small-s, 4px);

      &:active {
        color: var(--State-Pressed, #717171);
      }
      &:disabled {
        color: var(--State-Disable, #c8c8c8);
        cursor: initial;
      }
      &:hover,
      &:focus {
        .cta--label::after,
        .cta--label .cta--label__text::after {
          transform: translateY(-2px);
        }
      }
      .cta--label {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--spacings-small-s, 4px);
        font-family: 'Apercu Pro';
        font-size: var(--typography-label-s-regular-font-size, 12px);
        font-style: normal;
        font-weight: var(--typography-label-s-regular-font-weight, 400);
        line-height: var(--typography-label-s-regular-line-height, 14px); /* 116.667% */
        letter-spacing: var(--typography-label-s-regular-letter-spacing, 0);
        .cta--label__text {
          position: relative;
          padding-bottom: 4px;

          &:after {
            transition: all 0.4s ease;

            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: currentColor;
            width: 100%;
            height: 1px;
          }
        }
      }
    }
    .link.v-tabs {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: flex-start;
      gap: var(--spacings-small-s, 4px);
      color: var(--Content-secondary, #717171);

      &:disabled {
        color: var(--State-Disable, #c8c8c8);
        cursor: initial;
      }
      &:hover,
      &:focus,
      &.is-active {
        color: var(--Content-primary, #000);
        .cta--label::after,
        .cta--label .cta--label__text::after {
          transform: translateY(-2px);

          background-color: currentColor;
        }
      }
      .cta--label {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--spacings-small-s, 4px);
        font-family: 'Apercu Pro';
        font-size: var(--typography-label-m-regular-font-size, 14px);
        font-style: normal;
        font-weight: var(--typography-label-m-regular-font-weight, 400);
        line-height: var(--typography-label-m-regular-line-height, 16px); /* 114.286% */
        letter-spacing: var(--typography-label-m-regular-letter-spacing, 0);
        .cta--label__text {
          position: relative;
          padding-bottom: 8px;

          &:after {
            transition: all 0.4s ease;

            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: transparent;
            width: 100%;
            height: 1px;
          }
        }
      }
    }
  }
/* END_SNIPPET:link */

/* START_SNIPPET:main-product-reassurance (INDEX:176) */
/* ⚠ Auto-generated from src/snippets/main-product-reassurance/main-product-reassurance.css — do not edit directly. */
/* src/snippets/main-product-reassurance/main-product-reassurance.css */
@layer components {
  .reassurance-main-product {
    padding-inline: 16px;
    overflow: hidden;
    padding-block-start: 24px;
    @media (min-width: 1024px) {
      padding-block-start: 32px;
    }
  }
  .main-product-reassurance {
    .embla__viewport {
      overflow: hidden;
    }

    .embla__container {
      display: flex;
      touch-action: pan-y pinch-zoom;
    }

    .embla__slide {
      flex: 0 0 100%;
      min-width: 0;
      display: grid;
    }

    .main-product-reassurance__item {
      display: grid;
      align-content: center;
      text-align: center;
      padding: 16px 4px;
      .item-title {
        padding-bottom: 4px;
      }
    }

    .embla__dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding-block: 4px;
    }

    .embla__dot {
      appearance: none;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      width: 10px;
      height: 1px;
      background-color: var(--color-foreground, #1a1a1a);
      opacity: 0.2;
      transition: opacity 0.3s ease;

      &.is-active {
        opacity: 1;
      }
    }
  }

  .main-product-reassurance__trigger {
    cursor: pointer;
  }

  .reinsurances-custom__sidebar {
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.4s ease,
      visibility 0.4s ease;

    &.active {
      opacity: 1;
      visibility: visible;
    }
  }

  .reinsurances-custom__sidebar-background {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    cursor: pointer;
  }

  .reinsurances-custom__sidebar-content {
    position: absolute;
    z-index: 10;
    left: 100%;
    width: 510px;
    height: 100%;
    background-color: #fff;
    transition: left 0.4s ease;

    &.active {
      left: calc(100% - 510px);
    }

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

      &.active {
        left: 0;
      }
    }
  }

  .reinsurances-custom__sidebar-header {
    padding: var(--spacings-medium-s, 24px);
    border-bottom: var(--border-width-extra-small, 1px) solid
      var(--color-gris-nacre);
  }

  .reinsurances-custom__sidebar-body {
    padding: 20px var(--spacings-medium-s, 24px);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }

  .reinsurances-custom__sidebar-header-close {
    text-align: right;
    cursor: pointer;
  }

  .reinsurances-custom__sidebar-title {
    padding-bottom: var(--spacings-small-xl, 16px);

    &:empty {
      display: none;
    }
  }

  .reinsurances-custom__sidebar-description {
    ul {
      list-style: disc;
    }

    a {
      text-decoration: underline;
    }

    &-item {
      margin-bottom: var(--spacings-small-s, 4px);
    }

    :is(p, li) {
      margin-block: 1rem;

      &:first-child {
        margin-block-start: 0;
      }

      &:last-child {
        margin-block-end: 0;
      }
    }
  }
}
/* END_SNIPPET:main-product-reassurance */

/* START_SNIPPET:main-product-tuncat-description (INDEX:177) */
/* ⚠ Auto-generated from src/snippets/main-product-tuncat-description/main-product-tuncat-description.css — do not edit directly. */
/* src/snippets/main-product-tuncat-description/main-product-tuncat-description.css */
@layer components {
  .main-product-tuncat-description {
    display: block;
    padding-block-start: 16px;
    padding-inline: 16px;
    pointer-events: auto;
    text-align: center;
  }

  .main-product-tuncat-description__short,
  .main-product-tuncat-description__long {
    max-width: 653px;
    margin-inline: auto;
  }

  .main-product-tuncat-description__long {
    display: none;
    margin-block-start: 8px;
  }

  .main-product-tuncat-description__see-more,
  .main-product-tuncat-description__see-less {
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
  }

  .main-product-tuncat-description__see-more {
    display: inline;
    margin-inline-start: 4px;
  }

  .main-product-tuncat-description__see-less {
    display: block;
    width: fit-content;
    margin-block-start: 8px;
    margin-inline: auto;
  }

  .main-product-tuncat-description.is-expanded
    .main-product-tuncat-description__see-more {
    display: none;
  }

  .main-product-tuncat-description.is-expanded
    .main-product-tuncat-description__long {
    display: block;
  }

  c-tuncat:not(:defined) {
    visibility: hidden;
  }
}

@layer variants {
  .main-product-tuncat-description.v-desktop {
    display: none;

    @media screen and (min-width: 1024px) {
      display: block;
    }
  }
}
/* END_SNIPPET:main-product-tuncat-description */

/* START_SNIPPET:media-card (INDEX:178) */
/* ⚠ Auto-generated from src/snippets/media-card/media-card.css — do not edit directly. */
/* src/snippets/media-card/media-card.css */
@layer components {
  c-media-card {
    display: grid;
    height: 100%;
    grid-template-rows: auto 1fr;

    .media-container {
      align-self: flex-start;
    }

    .content-container {
      --background-color: transparent;
      display: grid;
      text-align: center;
      justify-content: center;
      padding-inline: 4px;
      padding-block-end: 16px;
      padding-block-start: 0px;
      height: 100%;
      @media (min-width: 1024px) {
        padding: 0 var(--spacings-small-xl, 16px) var(--spacings-small-xl, 16px);
      }

      .inside {
        display: grid;
        height: 100%;
        gap: var(--spacings-small-m, 8px);
        grid-template-rows: 1fr auto;

        .inside__top {
          display: grid;
          gap: var(--spacings-small-m, 8px);
          align-self: flex-start;
          padding-block-start: 16px;

          .title {
            color: var(--Content-primary, #000);
            /* headline-medium/regular */
            font-family: 'Diptyque Saint Germain';
            font-size: var(--typography-headline-m-font-size, 32px);
            font-style: normal;
            font-weight: var(--typography-headline-m-font-weight, 400);
            line-height: var(--typography-headline-m-line-height, 38px);
            /* 118.75% */
            letter-spacing: var(--typography-headline-m-letter-spacing, 0);
          }

          .description {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            line-clamp: 5;
            -webkit-line-clamp: 5;
            align-self: stretch;
          }
        }

        .inside__bottom {
          display: grid;
          gap: var(--spacings-small-m, 8px);
          align-self: flex-end;
        }
      }
    }
  }
}

@layer variants {
  .embla__container.v-border c-media-card {
    border: 1px solid var(--State-Disable, #c8c8c8);
  }
}
/* END_SNIPPET:media-card */

/* START_SNIPPET:picture (INDEX:182) */
@layer base {
    picture {
      display: grid;
    }
  }
/* END_SNIPPET:picture */

/* START_SNIPPET:product-card-horizontal (INDEX:185) */
@layer reset, base, components, variants;

  @layer components {
    .cart__item-engraving {
      padding: 8px;
      background-color: var(--Background-secondary, #f8f8f8);
      max-width: 535px;

      &.is-open {
        .container-plus-minus .plus-minus-icon svg {
          transform: rotate(90deg);
        }
        .cart__item-engraving-wrapper {
          grid-template-rows: 1fr;
          padding-block-start: 12px;
        }
      }
      .cart__item-engraving-title {
        display: grid;
        background: transparent;
        border: none;
        padding: 0;
        row-gap: 8px;
        cursor: pointer;
        @media screen and (min-width: 1024px) {
          width: 100%;

          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      .plus-minus-icon {
        display: flex;
        align-items: center;
        margin: 0;
        gap: 4px;
        svg {
          display: inline-block;
          width: 16px;
          height: 16px;
          transform: rotate(270deg);
          transition: transform 0.3s ease;
        }
      }
      .cart__item-engraving-footer {
        padding-block-start: 12px;
      }
      .cart__item-engraving-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        transition: all 0.3s ease;
      }
      .cart__item-engraving-content {
        overflow: hidden;
        display: grid;
        gap: 4px;
      }
      .cart__item-engraving-line {
        display: grid;
        grid-template-columns: auto 1fr;
        justify-content: flex-start;
        align-items: center;
        justify-items: flex-start;
        gap: 4px;
      }
    }
    .product-card-horizontal {
      display: grid;
      border-radius: var(--radius-medium, 4px);
      max-height: 152px;
      width: 361px;
      grid-template: auto/auto 1fr;
      height: 100%;
      padding: var(--spacings-small-l, 12px);
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(20px);
      gap: var(--spacings-small-l, 12px);
      @media screen and (min-width: 1024px) {
        width: 400px;
        max-height: 170px;
      }

      .container-image {
        width: 96px;
        aspect-ratio: 3/4;
        @media screen and (min-width: 1024px) {
          aspect-ratio: 109/146;
          width: 109px;
        }
        img {
          height: 100%;
        }
      }
      .container-content {
        display: grid;
        align-items: center;
        align-content: center;
        text-align: start;

        .content-top {
          display: grid;
          gap: var(--spacings-small-m, 8px);
          width: 100%;

          @media screen and (min-width: 1024px) {
            gap: var(--spacings-small-l, 12px);
          }
          .product-card-horizontal-title-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .product-name {
            overflow: hidden;
            height: fit-content;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .product-name-2 {
            overflow: hidden;
            height: fit-content;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
        .content-bottom {
          padding-top: var(--spacings-medium-xs, 20px);

          .button--shoppable {
            position: relative;
            block-size: 1.25rem;
            padding-inline: initial;
            font-size: 0.875rem;
            background-color: transparent;
            border: none;
            box-shadow: none;
            appearance: none;

            svg {
              display: inline-block;
            }

            &::before {
              content: '';
              position: absolute;
              block-size: 0.0625rem;
              inline-size: 100%;
              inset-block-end: 0rem;
              inset-inline-start: -0.0625rem;
              background-color: currentcolor;
              transition: 0.3s ease;
              pointer-events: none;
            }

            &:hover::before {
              inset-block-end: 0.125rem;
            }
            .button__label:before {
              content: none;
            }
          }
        }
      }
    }
  }
  @layer variants {
    .product-card-horizontal.v-full {
      width: 100%;
    }
    .product-card-horizontal.v-quantity-selector {
      max-height: initial;
      .container-content {
        align-content: space-between;
      }
      .content-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
/* END_SNIPPET:product-card-horizontal */

/* START_SNIPPET:product-card-v2 (INDEX:186) */
/* ⚠ Auto-generated from src/snippets/product-card-v2/product-card-v2.css — do not edit directly. */
  /* src/snippets/product-card-v2/product-card-v2.css */
/* END_SNIPPET:product-card-v2 */

/* START_SNIPPET:product-form (INDEX:190) */
@layer reset, base, components, variants,settings;

  @layer components {
    c-product-form {
      display: grid;
      align-self: flex-end;
    }
  }
/* END_SNIPPET:product-form */

/* START_SNIPPET:product-images (INDEX:191) */
/* ⚠ Auto-generated from src/snippets/product-images/product-images.css — do not edit directly. */
/* src/snippets/product-images/product-images.css */
@layer components {
  .product-images {
    overflow: hidden;

    .embla__parallax__layer {
      width: 100%;
      height: 100%;
    }

    picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    img {
      display: block;
      width: 100%;
      object-fit: cover;
    }
  }
}

@layer variants {
  .product-images:not(.v-edito-image-mobile) {
    padding-block-start: 68px;
    height: calc(669px + 8px + var(--tuncat-expanded-height, 0px));

    @media (min-width: 1024px) {
      aspect-ratio: 3/4;
      height: auto;
      padding-block-start: 0;
    }

    img {
      height: 491px;

      @media (min-width: 1024px) {
        height: 100%;
      }
    }
  }

  .product-images:not(.v-edito-image-mobile):not(.v-black) {
    background-color: #f8f8f8;
  }

  .product-images.v-black:not(.v-edito-image-mobile) {
    background: linear-gradient(0deg,
        rgb(12, 12, 12),
        rgb(27, 25, 24),
        rgb(21, 21, 19),
        rgb(12, 12, 12),
        rgb(13, 13, 13));

    img {
      height: 491px;

      @media (min-width: 1024px) {
        height: 100%;
      }
    }
  }

  .product-images.v-edito-image-mobile {
    height: calc(699px + var(--tuncat-expanded-height, 0px));

    @media (min-width: 1024px) {
      aspect-ratio: 3/4;
      height: auto;
    }

    img {
      aspect-ratio: 9/16;
      height: 699px;

      @media (min-width: 1024px) {
        height: 100%;
        aspect-ratio: unset;
      }
    }
  }
}
/* END_SNIPPET:product-images */

/* START_SNIPPET:quick-buy (INDEX:199) */
/* ⚠ Auto-generated from src/snippets/quick-buy/quick-buy.css — do not edit directly. */
/* src/snippets/quick-buy/quick-buy.css */
@layer components {
  .card-product-quick-buy__container {
    .card-product-quick-buy {
      pointer-events: auto;
      z-index: 2;
      display: grid;
      height: 36px;

      border-radius: var(--radius-full, 999px);
      background: var(--Background-primary, #fff);
      align-content: center;
      overflow: hidden;
      color: var(--Content-primary, #000);
      padding: var(--spacings-small-m, 8px);
      &:active {
        color: var(--State-Pressed, #717171);
      }
      &:disabled {
        color: #717171;
        cursor: initial;
        pointer-events: none;
        background: #c8c8c8;
        label {
          color: #717171;
        }
      }
      &:hover,
      .is-animate-quick-buy & {
        .card-product-quick-buy__content {
          gap: var(--spacings-small-xs, 2px);

          grid-template-columns: auto var(--label-size);
        }

        .label {
          transform: translateX(0);
          opacity: 1;
        }
      }

      .label {
        display: inline-block;
        width: 100%;
        text-wrap: nowrap;
        overflow: hidden;
        transform: translateX(100%);
        opacity: 0;
        transition: all 0.3s ease;
      }

      .card-product-quick-buy__content {
        --label-size: 1ch;
        display: inline-grid;
        align-items: center;
        grid-template-columns: auto 0ch;
        transition: all 0.3s ease;
        .logo {
          display: inline-grid;
        }
      }
    }
  }
}
/* END_SNIPPET:quick-buy */

/* START_SNIPPET:related-products-v2 (INDEX:202) */
/* ⚠ Auto-generated from src/snippets/related-products-v2/related-products-v2.css — do not edit directly. */
/* src/snippets/related-products-v2/related-products-v2.css */
.related-products-v2 {
  display: grid;
  --slide-spacing: 8px;
  --slide-size: 33%;

  .embla__viewport {
    overflow: hidden;
  }

  .embla__container {
    display: flex;
    margin-inline-start: 8px;

    margin-inline-end: 16px;
    touch-action: pan-y pinch-zoom;
    justify-self: center;

    @media screen and (min-width: 1024px) {
      margin-inline-start: -8px;
      margin-inline-end: 0px;
    }

    &:has(.embla__slide:nth-child(4)) {
      justify-self: unset;
    }
  }

  .embla__slide {
    padding-left: var(--slide-spacing);

    flex: 0 0 max-content;
    min-width: 0;
  }

  width: 100%;
  margin-block-start: 16px;

  @media screen and (min-width: 1024px) {
    margin-block-start: 40px;
  }

  .related-product {
    display: grid;

    width: fit-content;
    padding: var(--spacings-small-m, 8px) var(--spacings-small-l, 12px) var(--spacings-small-l, 12px) var(--spacings-small-l, 12px);

    border-radius: var(--radius-small, 2px);
    border: var(--border-width-extra-small, 1px) solid transparent;
    text-align: center;
    row-gap: 8px;

    &.is-active {
      border: var(--border-width-extra-small, 1px) solid var(--Border-secondary, #717171);
    }

    .related-product__img {
      img {
        max-width: 40px;
        width: 100%;
        object-fit: cover;
        aspect-ratio: 40 / 54;
      }
    }

    .related-product__content {
      display: grid;
      row-gap: 2px;
    }
  }
}
/* END_SNIPPET:related-products-v2 */

/* START_SNIPPET:set-to-compose-form (INDEX:205) */
/* ⚠ Auto-generated from src/snippets/set-to-compose-form/set-to-compose-form.css — do not edit directly. */
/* src/snippets/set-to-compose-form/set-to-compose-form.css */
@layer reset, base, components, variants;

@layer components {
  .set-to-compose-form {
    align-self: flex-end;
  }
  .set-to-compose-form form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacings-small-xl);
  }
  .set-to-compose-form__quantity-wrapper {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-large, 999px);
    background: var(--Background-secondary, #f8f8f8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--spacings-small-xs);
  }
  .set-to-compose-form__quantity-value {
    color: var(--Content-primary, #000);
  }
  .set-to-compose-form__decrement,
  .set-to-compose-form__increment {
    width: 16px;
    height: 16px;
    display: block;
    align-items: center;
    justify-content: center;
    color: var(--Content-primary, #000);
    transition: color 0.4s ease;

    &:disabled {
      color: var(--State-Disable, #c8c8c8);
    }
  }
}
/* END_SNIPPET:set-to-compose-form */

/* START_SNIPPET:sticky-composition-bar (INDEX:212) */
/* ⚠ Auto-generated from src/snippets/sticky-composition-bar/sticky-composition-bar.css — do not edit directly. */
/* src/snippets/sticky-composition-bar/sticky-composition-bar.css */
@layer reset, base, components, variants;

@layer components {
  .sticky-composition-bar {
    --section-max-width: 1920px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--background-primary, #ffffff);
    border-top: 1px solid var(--State-Disable, #c8c8c8);
    width: 100%;
    box-sizing: border-box;
    transition: height 0.8s ease-out;
    overflow: hidden;

    &.open {
      height: var(--open-height);
    }

    &:not(.open) {
      height: var(--closed-height);
    }
  }

  .sticky-composition-bar_header {
    width: 100%;
    max-width: var(--section-max-width);
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacings-small-xl) var(--spacings-large-xl);

    @media screen and (max-width: 768px) {
      padding: var(--spacings-small-xl);
    }
  }

  .sticky-composition-bar--left {
    display: flex;
    align-items: center;
  }

  .sticky-composition-bar_title {
    color: var(--Content-primary, #000);
  }

  .sticky-composition-bar--right {
    display: flex;
    align-items: center;
    gap: var(--spacings-small-xl);
  }

  .sticky-composition-bar_price {
    color: var(--Content-primary, #000);
  }

  .sticky-composition-bar_toggle {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transform: rotate(90deg);
    transition: transform 0.3s ease-in-out;

    .sticky-composition-bar.open & {
      transform: rotate(270deg);
    }
  }

  .sticky-composition-bar_toggle_icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Content-primary, #000);
  }

  .sticky-composition-bar_content {
    padding: var(--spacings-medium-xs) 0;
    max-width: var(--section-max-width);
    margin: 0 auto;
  }

  .sticky-composition-bar_content_items {
    display: flex;
    padding: 0 var(--spacings-medium-m);
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacings-small-xl);
    align-self: stretch;

    @media screen and (max-width: 768px) {
      padding: 0 var(--spacings-small-xl);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(auto-fill, 1fr);
      column-gap: var(--spacings-small-m);
      row-gap: var(--spacings-small-xl);
      max-height: 72vh;
      overflow-y: auto;
    }
  }

  .sticky-composition-bar_content_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    background: var(--Background-secondary, #f8f8f8);
    aspect-ratio: 216/328;
    max-width: min(450px, 20vw);
    position: relative;

    &.has-content {
      aspect-ratio: unset;
    }

    .mobile-hidden {
      display: block;
    }

    .mobile-visible {
      display: none;
    }

    @media screen and (max-width: 768px) {
      aspect-ratio: unset;
      max-width: 100%;

      .mobile-hidden {
        display: none;
      }

      .mobile-visible {
        display: block;
      }
    }
  }

  .sticky-composition-bar_content_item_button--remove {
    position: absolute;
    right: 8px;
    top: 8px;
    border-radius: var(--radius-large, 999px);
    border: var(--border-width-extra-small, 1px) solid
      var(--Border-primary, #000);
    background: var(--Background-primary, #fff);
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
      background 0.3s ease,
      opacity 0.3s ease;
    pointer-events: none;

    &:hover {
      background: var(--Background-secondary, #f8f8f8);
    }
  }

  .sticky-composition-bar_content_item.has-content
    .sticky-composition-bar_content_item_button--remove {
    opacity: 1;
    pointer-events: auto;
  }

  .sticky-composition-bar_content_item_button--remove_icon {
    width: 16px;
    height: 16px;

    @media screen and (max-width: 768px) {
      width: 18px;
      height: 18px;
    }
  }

  .sticky-composition-bar_content_item_image {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3/4;
  }

  .sticky-composition-bar_content_item_image img:not([src]) {
    display: none;
  }

  .sticky-composition-bar_content_item_title {
    width: 100%;
    padding: var(--spacings-small-xl) var(--spacings-small-m);
    text-align: center;
  }

  .sticky-composition-bar_content_button {
    width: fit-content;
    margin: 0 auto;
    margin-top: var(--spacings-medium-m);
  }
}
/* END_SNIPPET:sticky-composition-bar */