/** Shopify CDN: Minification failed

Line 2525:2 Unexpected "{"
Line 2525:3 Expected identifier but found "%"
Line 2526:24 Unexpected "`"
Line 2527:78 Unterminated string token
Line 2528:61 Unterminated string token
Line 2529:3 Expected identifier but found "%"
Line 2906:2 Unexpected "{"
Line 2906:3 Expected identifier but found "%"
Line 2907:5 Unexpected "'animation d'"
Line 2909:81 Unterminated string token
... and 2 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:ax-abecedaire (INDEX:1) */
.ax-abecedaire__heading {
    margin-block-end: var(--margin-4xl);

    @media (min-width: 1200px) {
      margin-block-end: var(--margin-6xl);
    }
  }

  .ax-abecedaire__heading--left {
    text-align: left;
  }

  .ax-abecedaire__heading--center {
    text-align: center;
  }

  .ax-abecedaire__heading--right {
    text-align: right;
  }

  .ax-abecedaire__columns {
    column-width: 22rem;
    column-gap: var(--gap-2xl);
  }

  .ax-abecedaire__item {
    break-inside: avoid;
    margin-block-end: var(--margin-xl);
  }

  .ax-abecedaire__letter {
    margin-block-end: var(--margin-xs);
  }

  .ax-abecedaire__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ax-abecedaire__product {
    margin-block-end: var(--margin-xs);
  }

  .ax-abecedaire__product a {
    color: inherit;
    text-decoration: none;
  }

  .ax-abecedaire__product a:hover,
  .ax-abecedaire__product a:focus-visible {
    text-decoration: underline;
  }
/* END_SECTION:ax-abecedaire */

/* START_SECTION:ax-article-hero (INDEX:2) */
.ax-article-hero {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-black);
  }

  .ax-article-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    padding-block: var(--gap-3xl) 0;
    padding-inline: var(--page-margin);
  }

  .ax-article-hero__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }

  .ax-article-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .ax-article-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--color-black) 0%, transparent 40%);
  }

  /* Le contenu du hero est en align-items: flex-start → sans ça le fil d'ariane
     prend sa largeur intrinsèque et déborde au lieu de tronquer */
  .ax-article-hero__breadcrumb {
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
  }

  .ax-article-hero__breadcrumb .breadcrumb,
  .ax-article-hero__breadcrumb .breadcrumb__list {
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
  }

  .ax-article-hero__breadcrumb .breadcrumb__list {
    list-style: none;
    display: flex;
    /* Une seule ligne : le titre de l'article tronque au lieu de passer dessous */
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .ax-article-hero__breadcrumb .breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    flex: 0 0 auto;
  }

  .ax-article-hero__breadcrumb .breadcrumb__item:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .ax-article-hero__breadcrumb .breadcrumb__current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ax-article-hero__breadcrumb :is(.breadcrumb__link, .breadcrumb__separator, .breadcrumb__current) {
    color: var(--color-white);
    font-size: var(--font-size--xs);
    line-height: 1.2;
    text-decoration: none;
  }

  .ax-article-hero__ribbon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--gap-xs);
    border-radius: var(--style-border-radius-xs);
    background-color: var(--color-blue-NM);
    color: var(--color-white);
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: var(--font-size--h6);
    line-height: 2;
    text-transform: uppercase;
  }

  .ax-article-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    width: 100%;
  }

  .ax-article-hero__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: var(--font-size--h2);
    line-height: 1;
    color: var(--color-white);
  }

  .ax-article-hero__subtitle {
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.2;
    color: var(--color-white);
  }

  @media screen and (min-width: 1200px) {
    .ax-article-hero {
      display: grid;
      grid-template-columns: 45% 55%;
      min-height: var(--ax-article-hero-min-desktop);
    }

    .ax-article-hero__media {
      aspect-ratio: auto;
    }

    .ax-article-hero__overlay {
      background: linear-gradient(90deg, var(--color-black) 0%, transparent 48%);
    }

    .ax-article-hero__content {
      justify-content: center;
      padding-block: var(--margin-6xl);
      padding-inline-end: var(--gap-2xl);
    }
  }
/* END_SECTION:ax-article-hero */

/* START_SECTION:ax-article (INDEX:3) */
.ax-article {
    padding-block: var(--page-margin) var(--gap-3xl);
  }

  .ax-article__grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24);
  }

  .ax-article__main {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24);
    min-width: 0;
  }

  .ax-article__intro-image-img {
    display: block;
    width: 100%;
    height: auto;
    /* Ratio imposé : la maquette le fixe à 1,95 en desktop comme en mobile
       (820x420,5 et 343x175,9 — nodes 2984-6367 / 2984-5839). Sans lui, une image
       portrait s'affichait sur plus d'un écran de haut (ticket 12682914055).
       Le recadrage est centré, et l'aspect-ratio réserve la place avant chargement. */
    aspect-ratio: 1.95;
    object-fit: cover;
  }

  /* Encadré « En résumé » */
  .ax-article__resume {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: var(--margin-2xl) var(--margin-xl);
    background-color: var(--color-neutral-light);
  }

  .ax-article__resume-heading {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 700;
    /* 18px desktop / 16px mobile (maquettes 3210-42516 et 3210-42519) */
    font-size: var(--font-size--md);
    line-height: 1.2;
    color: var(--color-foreground);
  }

  .ax-article__resume-text {
    font-size: var(--font-size--md);
    line-height: 1.2;
  }

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

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

  /* Corps de l'article (article.content) */
  .ax-article__content > :first-child {
    margin-block-start: 0;
  }

  .ax-article__content h2 {
    margin-block: var(--gap-24);
    font-size: var(--font-size--h3);
    line-height: 1.1;
  }

  /* Cible des ancres de la table des matières : sans ça le header sticky
     recouvre le titre au moment du saut. */
  .ax-article__content :is(h2, h3, h4)[id] {
    scroll-margin-block-start: calc(
      var(--header-group-height, var(--header-height, 0px)) + var(--gap-xl)
    );
  }

  .ax-article__content h3 {
    font-size: var(--font-size--h4);
  }

  .ax-article__content h4 {
    font-size: var(--font-size--h5);
  }

  .ax-article__content :is(h5, h6) {
    font-size: var(--font-size--h6);
  }

  .ax-article__content p {
    margin-block: 0 var(--gap-lg);
    line-height: 1.45;
  }

  .ax-article__content :is(img, video, iframe) {
    max-width: 100%;
    height: auto;
  }

  /* Desktop : 2 colonnes, colonne droite sticky */
  @media screen and (min-width: 1200px) {
    .ax-article {
      padding-block: var(--page-margin);
    }

    .ax-article__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      column-gap: var(--margin-6xl);
      align-items: start;
    }

    .ax-article__aside {
      display: flex;
      flex-direction: column;
      gap: var(--gap-40);
      position: sticky;
      top: calc(var(--header-group-height, var(--header-height, 0px)) + var(--gap-xl));
    }
  }

  /* Les contenus d'articles (hérités prod) embarquent leur propre table des
     matières (`div.article__table`) — doublon avec la TOC sidebar auto de la
     refonte : on masque celle du contenu. */
  .ax-article__content .article__table {
    display: none;
  }

  /* Mobile : 1 colonne, reflow — table des matières en tête.
     main/aside en display:contents pour ordonner tous les blocs au niveau du grid. */
  @media screen and (max-width: 1199px) {
    .ax-article__main,
    .ax-article__aside {
      display: contents;
    }

    .ax-article-toc { order: 1; }
    .ax-article__resume { order: 2; }
    .ax-article__intro-image { order: 3; }
    .ax-article__content { order: 4; }
    .ax-article-meta { order: 5; }
    .ax-article-related-products { order: 6; }
    .ax-article-related-articles { order: 7; }
  }
/* END_SECTION:ax-article */

/* START_SECTION:ax-athletes (INDEX:4) */
/* Clip horizontally at section bounds so peek-overflow slides don't trigger
     a body horizontal scroll while staying visible inside the section. */
  .ax-athletes {
    overflow-x: clip;
  }

  .ax-athletes__inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24); /* 24px */
    align-items: flex-start;
  }

  .ax-athletes__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24); /* 24px */
    width: 100%;
  }

  .ax-athletes__title {
    margin: 0;
  }

  .ax-athletes__description {
    margin: 0;
    max-width: 43.75rem; /* 700px */
    font-size: var(--font-size--md);
    line-height: 1.4;
  }

  .ax-athletes__description > :first-child {
    margin-block-start: 0;
  }

  .ax-athletes__description > :last-child {
    margin-block-end: 0;
  }

  .ax-athletes__swiper {
    display: block;
    width: 100%;
  }

  .ax-athletes__swiper:empty {
    display: none;
  }

  .ax-athletes__swiper::part(container) {
    overflow: visible; /* allow peek on next slide */
  }

  /* Aperçu décoché : on rogne au bord du carrousel. Sans ça, élargir la tuile à 100 %
     ne suffit pas — la suivante déborde dans la marge de page, que `overflow-x: clip`
     ne coupe qu'au bord de la section, et un fragment reste visible à droite. */
  .ax-athletes:not(.ax-athletes--peek) .ax-athletes__swiper::part(container) {
    overflow: hidden;
  }

  /* Mobile slide width = exactly fills the container split by columns_mobile.
     Extra slides (3rd+) overflow visually to the right thanks to overflow:visible
     on the swiper container — they show at their normal size, not by shrinking
     the visible ones. */
  @media screen and (max-width: 1199px) {
    .ax-athletes__swiper swiper-slide {
      width: calc(
        (100% - var(--gap-xs) * (var(--ax-athletes-columns-mobile) - 1)) /
          var(--ax-athletes-mobile-divisor)
      );
    }

  }

  /* Flèches en bas à droite, comme les autres carrousels du thème
     (cf. ax-tabbed-product-lists). Rendues seulement au-delà du nombre
     de colonnes, donc jamais quand tout tient à l'écran. */
  /* Pied : CTA à gauche, flèches à droite. Le `margin-inline-start: auto` des
     flèches les garde à droite même quand aucun CTA n'est renseigné. */
  .ax-athletes__footer {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    /* Le parent est une colonne en `align-items: flex-start` : sans cette
       largeur, le pied se réduit à son contenu et les flèches ne sont plus à droite. */
    width: 100%;
    padding-block-start: var(--padding-sm);
    /* Gabarit du pied stable, que le CTA soit renseigné ou non. */
    min-height: 2.5rem;
  }

  .ax-athletes__arrows {
    display: flex;
    gap: var(--padding-xs);
    margin-inline-start: auto;

    .slideshow-control {
      position: static;
      margin: 0;
      animation: none !important;
      pointer-events: auto;
      opacity: 1;
    }
  }

  /* ============ ATHLETE CARD ============ */

  .ax-athlete-card {
    width: 100%;
    height: 100%;
    display: block;
  }

  .ax-athlete-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm); /* 8px-ish */
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }

  @media screen and (min-width: 1200px) {
    .ax-athlete-card__link {
      gap: var(--gap-md);
    }
  }

  /* Carte en colonne : image au-dessus, texte en dessous */
  .ax-athlete-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: var(--style-border-radius-xs); /* 4px */
    overflow: clip;
    isolation: isolate;
  }

  .ax-athlete-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--animation-speed-extra-slow) var(--animation-easing);
  }

  /* Hover sur la card → zoom subtil de l'image (clipped par __media overflow). */
  .hover-button-group:has(a:hover) .ax-athlete-card__image {
    transform: scale(1.03);
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-athlete-card__image {
      transition: none;
    }
  }

  /* Diagonal black gradient overlay (bottom-left) — matches figma */
  .ax-athlete-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      223.6deg,
      rgb(0 0 0 / 0) 50%,
      rgb(0 0 0 / 0.8) 100%
    );
    pointer-events: none;
  }

  /* Tag/ribbon (top-left of image) — auto-display if filled */
  .ax-athlete-card__tag {
    position: absolute;
    top: var(--padding-lg);
    left: var(--padding-lg);
    z-index: var(--layer-raised);
    background-color: var(--color-blue-NM);
    color: var(--color-white);
    padding: 0.375rem var(--padding-xs); /* 6px 8px-ish */
    border-radius: var(--style-border-radius-xs);
    font-size: var(--font-size--xs); /* ~14px */
    font-family: var(--font-heading--family);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    white-space: nowrap;
  }

  .ax-athlete-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    align-items: flex-start;
  }

  .ax-athlete-card__name {
    margin: 0;
  }

  .ax-athlete-card__subtitle {
    margin: 0;
    font-size: var(--font-size--14);
    line-height: 1.2;
    color: var(--color-foreground);
  }

  /* Mobile carousel: align "Je découvre" CTAs across cards by reserving 2 lines
     worth of subtitle space — shorter subtitles (1 line) leave room beneath
     so the CTA below sits at a consistent y. */
  @media screen and (max-width: 1199px) {
    .ax-athlete-card__tag {
      top: var(--padding-xs);
      left: var(--padding-xs);
    }
  }

  /* "Je découvre" CTA — underlined, animated retract on card hover */
  /* Animation underline-retract gérée par .link-underlined (base.css).
     On override juste le font-size pour matcher la maquette. */
  .ax-athlete-card__cta {
    font-size: var(--font-size--md);
  }

  /* Bottom CTA */
  .ax-athletes__cta {
    /* L'espacement au-dessus appartient désormais au pied. */
    flex: 0 0 auto;
  }
/* END_SECTION:ax-athletes */

/* START_SECTION:ax-benefits (INDEX:5) */
.ax-benefits {
		position: relative;
		text-align: center;
		overflow: hidden;

	}

	.ax-benefits__bg {
		position: absolute;
		inset: 0;
		z-index: var(--layer-base, 0);
		pointer-events: none;
		/* `.section > *` defaults children to grid-column: 2 (page-width column).
		   For position: absolute children, this sets the containing block to
		   that column area — so inset: 0 only covers page-width. Force span
		   across the full grid (page-margin/content/page-margin) so the bg
		   watermark goes edge-to-edge viewport-wide. */
		grid-column: 1 / -1;
	}

	.ax-benefits__bg-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Corner brackets — filled L-shape in NM blue, mirrored top-left & bottom-right.
	   The inline SVG dictates its own intrinsic size (18×17), no need to constrain. */
	.ax-benefits__corner {
		position: absolute;
		display: block;
		color: var(--color-blue-NM);
		z-index: var(--layer-raised);
		line-height: 0;
	}

	.ax-benefits__corner--top-left {
		inset-block-start: var(--page-margin);
		inset-inline-start: 0;
	}

	.ax-benefits__corner--bottom-right {
		inset-block-end: var(--page-margin);
		inset-inline-end: var(--page-margin);
		transform: rotate(180deg);
	}

	.ax-benefits__title {
		margin: 0;
		color: var(--color-foreground);
		text-wrap: balance;
		position: relative;
		z-index: var(--layer-raised);
		/* Style typographique piloté par .h1-.h6 (heading_size). text-align hérite
		   du wrapper __header (section-header-align-style). */
	}

	.ax-benefits__list {
		display: flex;
		flex-direction: column;
		gap: var(--gap-24);
		align-items: center;
		width: 100%;
		margin: var(--gap-24) 0 0;
		padding: 0;
		list-style: none;
		position: relative;
		z-index: var(--layer-raised);

		@media screen and (min-width: 750px) {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: center;
		}
	}

	.ax-benefits__item {
		display: flex;
		flex-direction: column;
		gap: var(--gap-xs);
		align-items: center;
		width: 100%;
		max-width: 21.4375rem;

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

	.ax-benefits__icon {
		width: 3rem;
		height: 3rem;
		object-fit: contain;
	}

	.ax-benefits__text {
		display: flex;
		flex-direction: column;
		gap: var(--gap-xs);
		align-items: center;
		color: var(--color-foreground);
		text-align: center;
	}

	.ax-benefits__item-title {
		margin: 0;
		text-wrap: balance;
	}

	.ax-benefits__item-description {
		margin: 0;
		font-size: var(--font-size--xs);
		line-height: var(--line-height--body-normal);
		@media screen and (min-width: 1200px) {
			width: 90%;
		}
	}
/* END_SECTION:ax-benefits */

/* START_SECTION:ax-besoin-aide-choisir (INDEX:6) */
.ax-besoin-aide {
		position: relative;
	}

	.ax-besoin-aide__inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--gap-40);
		align-items: center;

		@media screen and (min-width: 1200px) {
			grid-template-columns: 1fr 1fr;
		}
	}

	.ax-besoin-aide__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--gap-lg);
	}

	/* Desktop alignment override (≥ 1200px) */
	@media screen and (min-width: 1200px) {
		.ax-besoin-aide--desktop-center .ax-besoin-aide__text {
			align-items: center;
			text-align: center;
		}
	}

	/* Mobile + tablet alignment override (< 1200px) */
	@media screen and (max-width: 1199px) {
		.ax-besoin-aide--mobile-center .ax-besoin-aide__text {
			align-items: center;
			text-align: center;
		}
	}

	.ax-besoin-aide__title {
		margin: 0;
	}

	.ax-besoin-aide__description {
		font-size: var(--font-size--xs);
		margin: 0;

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

		& > :last-child {
			margin-block-end: 0;
		}
	}

	.ax-besoin-aide__cta {
		margin-block-start: var(--gap-xs);
	}

	.ax-besoin-aide__cards {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--gap-xs);
	}

	.ax-besoin-aide__card-item {
		list-style: none;
	}

	.ax-besoin-aide__signature-item {
		list-style: none;
	}

	.ax-besoin-aide__signature {
		display: flex;
		flex-direction: column;
		gap: var(--gap-3xs);
	}

	.ax-besoin-aide__signature-name {
		margin: 0;
		font-family: var(--font-body--family);
		font-weight: 700;
		font-size: var(--font-size--16);
		line-height: var(--line-height--body-tight);
	}

	.ax-besoin-aide__signature-role {
		margin: 0;
		font-family: var(--font-body--family);
		font-size: var(--font-size--14);
		line-height: var(--line-height--body-tight);
		opacity: var(--opacity-60);
	}

	.ax-besoin-aide__card {
		--card-bg: var(--ax-card-bg, var(--color-white));
		--card-fg: var(--color-foreground);

		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding-block: 0.875rem;
		padding-inline: var(--padding-lg);
		background-color: var(--card-bg);
		color: var(--card-fg);
		border-radius: var(--style-border-radius-xs);
		text-decoration: none;
		transition:
			background-color var(--animation-speed) var(--animation-easing),
			transform var(--animation-speed) var(--animation-easing);
	}

	.ax-besoin-aide__card:hover {
		background-color: color-mix(in srgb, var(--card-bg) 85%, var(--card-fg));
	}

	.ax-besoin-aide__card:focus-visible {
		outline: 2px solid var(--color-foreground);
		outline-offset: 2px;
	}

	.ax-besoin-aide__card-icon {
		flex-shrink: 0;
		inline-size: auto;
		block-size: var(--ax-besoin-aide-icon-h, 2rem);
		width: auto;
		object-fit: contain;
	}

	.ax-besoin-aide__card-label {
		flex: 1;
		display: inline-flex;
		align-items: center;
		gap: var(--gap-md);
		font-family: var(--font-h3--family);
		font-weight: var(--font-h3--weight);
		font-size: var(--font-size--16);
		line-height: 1;
	}

	.ax-besoin-aide__card-arrow {
		width: 0.375rem;
		flex-shrink: 0;
		transition: transform var(--animation-speed) var(--animation-easing);
	}

	.ax-besoin-aide__card:hover .ax-besoin-aide__card-arrow {
		transform: translateX(2px);
	}

	@media (prefers-reduced-motion: reduce) {
		.ax-besoin-aide__card,
		.ax-besoin-aide__card-arrow {
			transition: none;
		}

		.ax-besoin-aide__card:hover .ax-besoin-aide__card-arrow {
			transform: none;
		}
	}

	.ax-besoin-aide__popup {
		display: block;
	}

	dialog.ax-comparateur-popup__dialog {
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--color-background);
		color: var(--color-foreground);

		@media screen and (min-width: 750px) {
			inset-block: 2.5vh;
			inset-inline: 0;
			width: min(96vw, 90rem);
			max-width: min(96vw, 90rem);
			height: auto;
			max-height: none;
			margin-inline: auto;
			padding-block: 0 var(--padding-2xl);
		}
	}

	.ax-comparateur-popup__header {
		position: sticky;
		inset-block-start: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap-md);
		padding-block: var(--padding-xs);
		padding-inline: var(--padding-lg);
		background-color: var(--color-background);
		box-shadow: #0000001f 0px 1px 8px;
	}

	.ax-comparateur-popup__title {
		margin: 0;
	}

	.ax-comparateur-popup__close {
		position: static;
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		padding: 0;
		background-color: var(--color-neutral-light);
		color: var(--color-black);
		border-radius: var(--style-border-radius-xs);
		cursor: pointer;
		transition: background-color var(--animation-speed) var(--animation-easing);
	}

	.ax-comparateur-popup__close:hover {
		background-color: var(--color-neutral);
	}

	.ax-comparateur-popup__close svg {
		width: 1rem;
		height: 1rem;
	}

	.ax-comparateur-popup__body[aria-busy='true'] {
		display: grid;
		place-items: center;
		min-block-size: 60vh;
	}

	.ax-comparateur-popup__body[aria-busy='true']::after {
		content: '';
		width: 2rem;
		height: 2rem;
		border: 2px solid currentColor;
		border-top-color: transparent;
		border-radius: 50%;
		opacity: var(--opacity-40, 0.4);
		animation: atc-spin 0.6s linear infinite;
	}

	@media (prefers-reduced-motion: reduce) {
		.ax-comparateur-popup__body[aria-busy='true']::after {
			animation: none;
		}
	}

	/* --- Card guide des tailles : même look que link_card, ouvre la modale du
	   guide (métaobjet custom.size_guide). CSS de la modale dupliqué depuis
	   blocks/ax-size-guide.liquid — sa stylesheet n'est bundlée que si le
	   block est rendu dans les infos produit. --- */
	.ax-besoin-aide__size-guide {
		display: block;
	}

	.ax-besoin-aide__card--button {
		width: 100%;
		text-align: start;
		cursor: pointer;
	}

	dialog.ax-size-guide__dialog {
		inset-block-start: 50%;
		inset-block-end: auto;
		inset-inline: 0;
		width: min(90vw, var(--narrow-content-width, 34rem));
		max-width: min(90vw, var(--narrow-content-width, 34rem));
		height: auto;
		max-height: 85vh;
		margin-inline: auto;
		padding: var(--padding-2xl);
		overflow-y: auto;
		transform: translateY(-50%);

		@media screen and (min-width: 1200px) {
			padding: var(--padding-4xl);
		}
	}

	@keyframes axSizeGuideIn {
		from {
			opacity: 0;
			transform: translate(0, calc(-50% - 1rem));
		}
		to {
			opacity: 1;
			transform: translateY(-50%);
		}
	}

	@keyframes axSizeGuideOut {
		from {
			opacity: 1;
			transform: translateY(-50%);
		}
		to {
			opacity: 0;
			transform: translate(0, calc(-50% - 1rem));
		}
	}

	dialog.ax-size-guide__dialog[open] {
		animation: axSizeGuideIn var(--animation-speed) var(--animation-easing) forwards;
	}

	dialog.ax-size-guide__dialog.dialog-closing {
		animation: axSizeGuideOut var(--animation-speed) var(--animation-easing) forwards;
	}

	.ax-size-guide__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap-md);
		margin-block-end: var(--margin-lg);
	}

	.ax-size-guide__title {
		margin: 0;
	}

	.ax-size-guide__close {
		position: static;
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		padding: 0;
		background-color: var(--color-neutral-light);
		color: var(--color-black);
		border-radius: var(--style-border-radius-xs);
		cursor: pointer;
		transition: background-color var(--animation-speed) var(--animation-easing);
	}

	.ax-size-guide__close:hover {
		background-color: var(--color-neutral);
	}

	.ax-size-guide__close svg {
		width: 1rem;
		height: 1rem;
	}

	.ax-size-guide__image {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--style-border-radius-sm);
	}
/* END_SECTION:ax-besoin-aide-choisir */

/* START_SECTION:ax-blog-featured (INDEX:7) */
/* Échange de contenu piloté par la barre de filtres 1 : le temps du fetch, on
     estompe sans réserver de hauteur — la nouvelle sélection a le même gabarit. */
  .ax-blog-featured--loading .ax-blog-featured__inner {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .ax-blog-featured__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-3xl);
    align-items: start;

    /* Maquette : featured resserré à 120px des bords (vs 80px page-margin ailleurs) → +40px d'inset desktop. */
    @media screen and (min-width: 1200px) {
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      padding-inline: var(--gap-40);
    }
  }

  .ax-blog-featured__col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24);
    min-width: 0;
  }

  .ax-blog-featured__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-h2--size);
    line-height: 1;
    color: var(--color-foreground);
  }

  .ax-blog-featured__top-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);

    @media screen and (min-width: 1200px) {
      gap: var(--gap-sm);
    }
  }
/* END_SECTION:ax-blog-featured */

/* START_SECTION:ax-blog-filters (INDEX:8) */
/* Fond plein-largeur : span toutes les colonnes de la grille .section
     (sinon l'élément absolu se cale sur la colonne centrale → pas bord à bord). */
  .ax-blog-filters__background {
    grid-column: 1 / -1;
  }

  /* Offset du header sticky quand le JS rescrolle sur la barre N2 après filtrage. */
  .ax-blog-filters--level-2 {
    scroll-margin-block-start: calc(var(--header-height, 100px) + var(--gap-lg));
  }

  .ax-blog-filters__heading {
    margin: 0 0 var(--margin-2xl);
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: var(--font-size--h2);
    line-height: 1;
    color: var(--color-foreground);
  }

  .ax-blog-filters__bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
  }

  .ax-blog-filters--level-1 .ax-blog-filters__bar {
    justify-content: center;
  }

  .ax-blog-filters__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xs) var(--padding-xs);
    border-radius: var(--style-border-radius-xs);
    background-color: var(--pill-bg, var(--color-neutral-light));
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing), color var(--animation-speed) var(--animation-easing);
  }

  .ax-blog-filters__pill--active {
    background-color: var(--color-blue-NM);
    color: var(--color-background);
  }

  .ax-blog-filters__pill:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .ax-blog-filters__description {
    max-width: 46.75rem;
    margin: var(--margin-xl) auto 0;
    font-size: var(--font-size--xs);
    line-height: 1.2;
    text-align: center;
  }

  .ax-blog-filters__description > * {
    margin: 0;
  }

  /* Mobile : la barre défile horizontalement (pas de wrap), bord à bord */
  @media screen and (max-width: 1199px) {
    .ax-blog-filters__bar {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      margin-inline: calc(var(--page-margin) * -1);
      padding-inline: var(--page-margin);
    }

    .ax-blog-filters__bar::-webkit-scrollbar {
      display: none;
    }

    .ax-blog-filters--level-1 .ax-blog-filters__bar {
      justify-content: flex-start;
    }
  }
/* END_SECTION:ax-blog-filters */

/* START_SECTION:ax-blog-list (INDEX:9) */
/* Fond plein-largeur : span toutes les colonnes de la grille .section. */
  .ax-blog-list__background {
    grid-column: 1 / -1;
  }

  .ax-blog-list__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-2xl);
  }

  @media screen and (min-width: 1200px) {
    .ax-blog-list__grid {
      grid-template-columns: repeat(3, 1fr);
      column-gap: var(--gap-sm);
      row-gap: var(--gap-40);
    }
  }

  .ax-blog-list__empty {
    margin: 0;
    text-align: center;
    color: var(--color-neutral-dark);
  }

  /* Chargement (filtrage N2 en fetch, cf. ax-blog-filters.js) : grille estompée + spinner. */
  .ax-blog-list--loading {
    position: relative;
    min-height: 12rem;
  }

  .ax-blog-list--loading .ax-blog-list__grid {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Spinner centré sur la 1ère rangée d'images (offset ≈ demi-hauteur d'image). */
  .ax-blog-list--loading::after {
    content: '';
    position: absolute;
    inset-block-start: 7rem;
    inset-inline-start: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin-inline-start: -1.25rem;
    border: 3px solid var(--color-neutral-light);
    border-block-start-color: var(--color-blue-NM);
    border-radius: 50%;
    animation: ax-blog-list-spin 0.7s linear infinite;
  }

  @media screen and (min-width: 1200px) {
    .ax-blog-list--loading::after {
      inset-block-start: 10.5rem;
    }
  }

  @keyframes ax-blog-list-spin {
    to {
      transform: rotate(360deg);
    }
  }
/* END_SECTION:ax-blog-list */

/* START_SECTION:ax-brand-reassurance (INDEX:10) */
.ax-brand-reassurance {
    position: relative;
    isolation: isolate;
    overflow: clip;
    /* Fallback page-margin inline padding when merchant doesn't set padding-inline-* settings */
    --padding-inline-start: var(--page-margin);
    --padding-inline-end: var(--page-margin);
  }

  .ax-brand-reassurance__background {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    /* Override .section--page-width > * { grid-column: 2 }. For absolutely-positioned
       grid items, the containing block is the assigned grid area — so without this,
       inset:0 would clip the bg image to the center column only. */
    grid-column: 1 / -1;
  }

  .ax-brand-reassurance__background-img,
  .ax-brand-reassurance__background source + img,
  .ax-brand-reassurance__background img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ax-brand-reassurance__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-24);
    width: 100%;
    max-width: var(--page-content-width);
    margin-inline: auto;
  }

  /* Mobile alignment override (< 750px) */
  @media screen and (max-width: 1199px) {
    .ax-brand-reassurance--mobile-start .ax-brand-reassurance__content {
      align-items: flex-start;
      text-align: left;
    }
  }

  /* Desktop alignment override (≥ 750px) */
  @media screen and (min-width: 1200px) {
    .ax-brand-reassurance--desktop-start .ax-brand-reassurance__content {
      align-items: flex-start;
      text-align: left;
    }
  }

  .ax-brand-reassurance__title {
    margin: 0;
  }

  .ax-brand-reassurance__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-24);
    align-items: flex-start;
    justify-content: center;
  }

  /* Mobile: stack vertically */
  @media screen and (max-width: 1199px) {
    .ax-brand-reassurance__points {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--gap-sm); /* ~12px */
    }
  }

  /* Desktop: horizontal row */
  @media screen and (min-width: 1200px) {
    .ax-brand-reassurance__points {
      flex-direction: row;
    }
  }

  .ax-brand-reassurance__point {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs); /* 8px between chevrons and text */
    font-size: var(--font-size--md); /* 1.125rem desktop / 1rem mobile */
    line-height: 1.2;
  }

  .ax-brand-reassurance__point::before {
    content: '';
    flex-shrink: 0;
    /* Width matches the SVG's 22:20 ratio so chevrons render at full height
       without mask-size: contain shrinking them. */
    width: 1.375rem; /* 22px */
    height: 1.25rem; /* 20px */
    background-color: var(--color-blue-NM);
    mask-image: var(--icon-triple-chevron-url);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-image: var(--icon-triple-chevron-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
  }

  .ax-brand-reassurance__point-text {
    flex: 1;
  }

  .ax-brand-reassurance__point-text strong,
  .ax-brand-reassurance__point-text b {
    font-weight: 700;
  }

  .ax-brand-reassurance__cta {
    margin-top: var(--gap-sm);
  }
/* END_SECTION:ax-brand-reassurance */

/* START_SECTION:ax-collection-heading (INDEX:11) */
/* Grille à zones : une colonne par défaut (breadcrumb → image → contenu).
     L'espacement vertical vient des marges des zones, pas d'un row-gap, pour
     que les zones vides (image ou breadcrumb masqués) ne créent pas de trou. */
  .ax-collection-heading__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'breadcrumb'
      'media'
      'content';
  }

  .ax-collection-heading__breadcrumb {
    grid-area: breadcrumb;
    margin-block-end: var(--gap-md, 1.6rem);
  }

  .ax-collection-heading__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gap-sm, 1.2rem);
    text-align: left;
    min-width: 0;
  }

  .ax-collection-heading__title {
    margin: 0;
  }

  .ax-collection-heading__description {
    margin: 0;
    /* Longueur de ligne de lecture : la maquette est dessinée à 1440 avec un
       conteneur pleine largeur, mais sur un écran large la ligne devenait
       interminable. Bornée par un réglage de section (sans effet en mobile, où
       la largeur d'écran est toujours inférieure). */
    max-width: var(--description-max-width, 55rem);
  }

  .ax-collection-heading__description[data-collapsed='true'] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--read-more-lines, 1);
    overflow: hidden;

    /* Axome - Mobile : repli à N lignes dédié (maquette : 1 desktop / 2 mobile) */
    @media screen and (max-width: 749px) {
      -webkit-line-clamp: var(--read-more-lines-mobile, var(--read-more-lines, 1));
    }
  }

  .ax-collection-heading__readmore {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
    transition: opacity var(--animation-values, 0.2s ease);
  }

  .ax-collection-heading__readmore:hover,
  .ax-collection-heading__readmore:focus-visible {
    opacity: 0.7;
  }

  /* Image */
  .ax-collection-heading__media {
    grid-area: media;
    position: relative;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
  }

  .ax-collection-heading__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hors desktop 2 colonnes, la hauteur de l'image vient de son ratio.
     « adapt » conserve le ratio naturel de l'image. */
  .ax-collection-heading__media[data-ratio='square'] {
    aspect-ratio: 1 / 1;
  }

  .ax-collection-heading__media[data-ratio='landscape'] {
    aspect-ratio: 3 / 2;
  }

  .ax-collection-heading__media[data-ratio='portrait'] {
    aspect-ratio: 3 / 4;
  }

  .ax-collection-heading__media[data-ratio='adapt'] > img {
    height: auto;
  }

  /* Mobile : image entre le fil d'Ariane et le texte */
  @media screen and (max-width: 749px) {
    .ax-collection-heading__media {
      margin-block-end: var(--gap-lg, 2.4rem);
    }

    .ax-collection-heading__media[data-ratio='landscape'] {
      width: 100%;
      height: 5rem;
    }
  }

  /* Desktop : 2 colonnes — breadcrumb + texte à gauche, image à droite.
     L'image s'étend sur les deux rangées (breadcrumb et contenu) pour que son
     haut s'aligne sur le fil d'Ariane, et épouse la hauteur totale du bloc :
     l'<img> passe en position absolue pour ne pas imposer sa hauteur
     naturelle. */
  @media screen and (min-width: 750px) {
    .ax-collection-heading__body--with-image {
      grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
      grid-template-rows: auto 1fr;
      grid-template-areas:
        'breadcrumb media'
        'content media';
      column-gap: clamp(2.4rem, 4vw, 4.8rem);
    }

    .ax-collection-heading__body--with-image .ax-collection-heading__media {
      aspect-ratio: auto;
      min-height: 20rem;
    }

    .ax-collection-heading__body--with-image .ax-collection-heading__media > img {
      position: absolute;
      inset: 0;
      height: 100%;
    }
  }
/* END_SECTION:ax-collection-heading */

/* START_SECTION:ax-collection-list (INDEX:12) */
.ax-collection-list-section {
    position: relative;
  }

  /* Le web component ne doit pas casser la grille pendant le skeleton. */
  ax-collection-list-nosto {
    display: block;
  }
/* END_SECTION:ax-collection-list */

/* START_SECTION:ax-collection-push (INDEX:13) */
/* Tuile push rendue en natif et injectée par PushBanner dans son slot de grille
     (`.push` côté _nosto), que le slot positionne en absolu inset:0 : l'inner
     remplit la tuile. Maquette : média plein cadre, contenu en bas à gauche,
     mêmes valeurs en desktop et en mobile (padding 16, gap 16, titre 24). */
  .ax-collection-push__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: var(--padding-lg);
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
    color: var(--color-white);
    text-decoration: none;
  }

  .ax-collection-push__inner--centered {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .ax-collection-push__media {
    position: absolute;
    inset: 0;
    display: block;
  }

  .ax-collection-push__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ax-collection-push__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
  }

  .ax-collection-push__inner--centered .ax-collection-push__content {
    align-items: center;
  }

  .ax-collection-push__title {
    margin: 0;
    font-family: var(--font-heading--family);
    /* 24px aux deux breakpoints comme la maquette : --font-size--h2 passerait à
       40px en desktop. */
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: var(--line-height--heading-tight);
  }

  .ax-collection-push__text {
    margin: 0;
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
  }

  /* CTA blanc / texte noir : la tuile est toujours posée sur une image, donc les
     couleurs du bouton sont figées au lieu de suivre le color scheme. Le hover est
     neutralisé pour la même raison — sinon `.button:hover` y réinjecte les couleurs
     du bouton primaire du thème. */
  .ax-collection-push__button,
  .ax-collection-push__button:hover {
    --button-background-color: var(--color-white);
    --button-border-color: var(--color-white);
    --button-color: var(--color-black);
    --button-font-size: var(--font-size--16);
  }
/* END_SECTION:ax-collection-push */

/* START_SECTION:ax-community-grid (INDEX:14) */
.ax-community-grid__title {
    margin: 0 0 var(--gap-lg);
  }

  .ax-community-grid__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .ax-community-grid__item {
    margin: 0;
    padding: 0;
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .ax-community-grid__card {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    padding-block: var(--gap-sm);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--animation-values);
  }

  .ax-community-grid__media {
    flex: 0 0 70px;
    width: 70px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-neutral-light);
  }

  .ax-community-grid__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ax-community-grid__name {
    flex: 1 1 auto;
    font-size: var(--font-size--md);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .ax-community-grid__arrow {
    flex: 0 0 var(--icon-size-sm);
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  @media screen and (min-width: 1200px) {
    .ax-community-grid__list {
      display: grid;
      grid-template-columns: repeat(var(--ax-community-grid-cols, 3), 1fr);
      column-gap: var(--gap-40);
      border-block-start: none;
    }

    .ax-community-grid__card {
      padding: var(--gap-sm);
    }

    .ax-community-grid__card:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    }

    .ax-community-grid__media {
      flex-basis: 128px;
      width: 128px;
    }

    .ax-community-grid__card:hover .ax-community-grid__arrow {
      animation: ax-community-grid-arrow-bounce 0.5s var(--animation-easing);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-community-grid__card:hover .ax-community-grid__arrow {
      animation: none;
    }
  }

  @keyframes ax-community-grid-arrow-bounce {
    0% { transform: translateX(0); }
    50% { transform: translateX(4px); }
    100% { transform: translateX(0); }
  }
/* END_SECTION:ax-community-grid */

/* START_SECTION:ax-community-sessions (INDEX:15) */
.ax-community-sessions {
    position: relative;
    /* Peek des slides sans débordement horizontal de page, drag conservé.
       Pas de display:block ici : on laisse le grid de .section placer le contenu
       dans la colonne centrale (page-width). */
    overflow-x: clip;
    overflow-y: visible;
  }

  .ax-community-sessions__title {
    margin: 0 0 var(--gap-24);
  }

  .ax-community-sessions__carousel {
    --slide-width: 80%;
  }

  .ax-community-sessions__swiper[init='false'] {
    display: none;
  }

  .ax-community-sessions__fallback {
    display: flex;
    gap: var(--gap-lg);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .ax-community-sessions__fallback::-webkit-scrollbar {
    display: none;
  }

  .ax-community-sessions__fallback > .ax-community-sessions__slide {
    scroll-snap-align: start;
  }

  .ax-community-sessions__fallback > .ax-community-sessions__slide,
  .ax-community-sessions__swiper swiper-slide {
    flex: 0 0 auto;
    width: var(--slide-width);
    height: auto;
    min-width: 0;
    box-sizing: border-box;
  }

  .ax-community-sessions__swiper::part(container) {
    overflow: visible;
  }

  .ax-community-sessions__slide {
    display: flex;
    flex-direction: column;
  }

  .ax-community-sessions__card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    height: 100%;
    color: inherit;
    text-decoration: none;
  }

  /* Réserve la hauteur du timeline-group sur toutes les cards → images alignées */
  .ax-community-sessions__card::before {
    content: '';
    display: block;
    height: 26px;
  }

  .ax-community-sessions__card:has(.ax-community-sessions__timeline-group)::before {
    display: none;
  }

  .ax-community-sessions__card:hover .ax-community-sessions__image {
    transform: scale(1.04);
  }

  .ax-community-sessions__timeline-group {
    display: flex;
    align-items: flex-end;
    height: 26px;
  }

  .ax-community-sessions__timeline-group span {
    font-size: var(--font-size--xs);
    font-weight: 600;
    line-height: 1.4;
  }

  /* Barre verticale séparatrice entre groupes passées / à venir (pleine hauteur de slide) */
  .ax-community-sessions__slide {
    position: relative;
  }

  .ax-community-sessions__slide:has(.ax-community-sessions__timeline-group--with-line)::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--gap-lg) / -2);
    width: 1px;
    background-color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .ax-community-sessions__media {
    position: relative;
    aspect-ratio: var(--ax-community-sessions-aspect, 1 / 1);
    overflow: hidden;
    background-color: var(--color-neutral-light);
  }

  .ax-community-sessions__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--animation-values);
  }

  .ax-community-sessions__pill {
    position: absolute;
    inset-block-start: var(--gap-sm);
    inset-inline-start: var(--gap-sm);
    padding: 4px 10px;
    background-color: var(--color-blue-NM);
    font-size: var(--font-size--xs);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-white);
  }

  .ax-community-sessions__description {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    margin-block-start: var(--gap-sm);
  }

  .ax-community-sessions__title-card {
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: 1.3;
  }

  .ax-community-sessions__meta {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-size: var(--font-size--xs);
    line-height: 1.4;
  }

  .ax-community-sessions__meta time {
    font-variant-numeric: tabular-nums;
  }

  .ax-community-sessions__icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: var(--color-blue-NM);
  }

  .ax-community-sessions__swiper::part(pagination) {
    position: relative;
    display: flex;
    justify-content: center;
    gap: var(--gap-xs);
    margin-block-start: var(--gap-24);
  }

  .ax-community-sessions__swiper::part(bullet),
  .ax-community-sessions__swiper::part(bullet-active) {
    width: 8px;
    height: 8px;
    background-color: currentColor;
    opacity: var(--opacity-20);
    transition: opacity var(--animation-values);
  }

  .ax-community-sessions__swiper::part(bullet-active) {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-community-sessions__card:hover .ax-community-sessions__image {
      transform: none;
    }
  }

  @media screen and (min-width: 750px) {
    .ax-community-sessions__carousel {
      --slide-width: 48%;
    }
  }

  @media screen and (min-width: 1200px) {
    .ax-community-sessions__title {
      margin-block-end: var(--gap-40);
    }

    .ax-community-sessions__carousel {
      --slide-width: 32%;
    }
  }
/* END_SECTION:ax-community-sessions */

/* START_SECTION:ax-comparateur (INDEX:16) */
/* Le clip horizontal vit sur la racine de section, donc au bord du viewport : c'est lui
     qui laisse la carte suivante déborder dans la gouttière de page en desktop — l'aperçu
     partiel qui signale qu'il reste du contenu (même mécanique que `ax-athletes`).
     `overflow-y` reste `visible` pour les dropdowns saveur/format des cartes ; `clip`
     (et non `hidden`) est ce qui autorise ce mélange des deux axes. */
  .ax-comparateur {
    overflow-x: clip;
    overflow-y: visible;
  }

  .ax-comparateur__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-40);
  }

  .ax-comparateur__title {
    margin: 0;
  }

  .ax-comparateur__description {
    margin: 0;
    max-width: 50rem;
    font-size: 0.875rem;
  }

  .ax-comparateur__link-more {
    color: inherit;
    font-size: 0.875rem;
  }

  /* Nav slider (vignettes objectifs) */
  .ax-comparateur__nav {
    margin-block-end: var(--gap-40);
  }

  .ax-comparateur__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-sm);
  }

  .ax-comparateur__nav-item {
    flex: 0 0 auto;
    width: 16.375rem;
    max-width: 100%;
  }

  .ax-comparateur__nav-tile {
    display: block;
    transition: transform var(--animation-values);
  }

  /* Réservé aux vrais pointeurs : au tactile le `:hover` reste collé après le tap
     (la tuile restait décalée vers le haut). */
  @media (hover: hover) and (pointer: fine) {
    .ax-comparateur__nav-tile:hover {
      transform: translateY(-4px);
    }
  }

  .ax-comparateur__nav-media {
    display: block;
    aspect-ratio: 262 / 144;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
  }

  .ax-comparateur__nav-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Groupes objectifs */
  .ax-comparateur__group {
    scroll-margin-block-start: calc(var(--header-height, 3.5rem) + 1rem);
  }

  .ax-comparateur__group + .ax-comparateur__group {
    margin-block-start: var(--gap-40);
  }

  .ax-comparateur__group-header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-lg);
    text-align: var(--header-align, center);
  }

  .ax-comparateur__group-title {
    margin: 0;
  }

  .ax-comparateur__group-text {
    margin: 0;
    font-size: 0.875rem;
  }

  .ax-comparateur__carousel {
    position: relative;
    /* Le conteneur interne de Swiper est en `overflow: hidden` : il coupait les
       dropdowns saveur/format au bord de la carte. On le libère (::part ci-dessous)
       et on ne conserve ici que le clipping HORIZONTAL, pour le bleed mobile.
       En desktop il est levé (cf. `min-width: 1200px` plus bas) : le clip de la racine
       de section prend le relais et laisse l'aperçu de la carte suivante s'afficher
       dans la gouttière. */
    overflow-x: clip;
    overflow-y: visible;
  }

  .ax-comparateur__swiper::part(container) {
    overflow: visible;
  }

  /* Fallback SSR (avant init Swiper) : ~3 tuiles visibles en desktop, le reste clippé. */
  .ax-comparateur__fallback {
    display: flex;
    gap: var(--gap-xs);
    overflow: hidden;
  }

  .ax-comparateur__fallback > .ax-comparateur__slide {
    flex: 0 0 calc((100% - 2 * var(--gap-xs)) / 3);
  }

  .ax-comparateur__swiper {
    display: block;
    width: 100%;
  }

  .ax-comparateur__slide {
    display: flex;
    height: auto;
  }

  .ax-comparateur__slide > * {
    width: 100%;
  }

  /* Flèches en pied de bloc, alignées à droite — même gabarit que les autres
     carrousels du thème (`ax-athletes`, `ax-tabbed-product-lists`), la forme ronde
     au filet fin venant de `slideshow-control--shape-outline`.
     Elles étaient en overlay sur les côtés, au milieu de la hauteur des cartes : un
     carré translucide que personne ne voyait, avec le « précédent » en `opacity: 0`
     en début de course — d'où l'impression qu'il n'y avait pas de carrousel. L'état
     désactivé reste donc VISIBLE (grisé), c'est lui qui annonce la course restante. */
  .ax-comparateur__arrows {
    display: flex;
    justify-content: flex-end;
    gap: var(--padding-xs);
    padding-block-start: var(--padding-sm);

    .slideshow-control {
      position: static;
      margin: 0;
      animation: none !important;
      pointer-events: auto;
      opacity: 1;
    }
  }

  @media screen and (min-width: 1200px) {
    /* Aperçu de la carte suivante : le carousel ne clippe plus, la racine de section
       (clippée au bord du viewport) laisse la carte suivante s'afficher dans la
       gouttière de page. Cartes et alignement de grille inchangés. */
    .ax-comparateur__carousel {
      overflow: visible;
    }
  }

  @media screen and (max-width: 1199px) {
    .ax-comparateur__nav-list {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      margin-inline: calc(-1 * var(--page-margin));
      padding-inline: var(--page-margin);
      /* Sans ça, le scroll-snap aligne la 1re tuile sur le bord du scrollport et
         « mange » le padding : la tuile se collait au bord de l'écran. */
      scroll-padding-inline: var(--page-margin);
    }

    .ax-comparateur__nav-list::-webkit-scrollbar {
      display: none;
    }

    .ax-comparateur__nav-item {
      width: calc((100vw - var(--page-margin) * 2) / var(--nav-slides-mobile, 2.5) - var(--gap-sm));
      scroll-snap-align: start;
    }

    .ax-comparateur__nav-media {
      aspect-ratio: 1;
    }

    .ax-comparateur__group-header {
      text-align: var(--header-align-mobile, start);
    }

    /* Mobile : peek ~1 tuile (Swiper prend le relais), flèches masquées (swipe). */
    .ax-comparateur__fallback > .ax-comparateur__slide {
      flex-basis: 85%;
    }

    /* Bleed mobile : le carousel sort des marges de page pour que les cartes
       filent jusqu'aux bords de l'écran. Le 1er slide reste aligné sur le texte
       via les offsets Swiper (cf. ax-comparateur.js) — et via un padding sur le
       fallback SSR, pour qu'il n'y ait pas de saut avant l'init. */
    .ax-comparateur__carousel {
      margin-inline: calc(-1 * var(--page-margin));
    }

    .ax-comparateur__fallback {
      padding-inline: var(--page-margin);
    }

    .ax-comparateur__arrows {
      display: none;
    }
  }
/* END_SECTION:ax-comparateur */

/* START_SECTION:ax-contact (INDEX:17) */
.ax-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-24);
    width: 100%;
  }

  .ax-contact__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24);
    min-width: 0;
  }

  .ax-contact__head {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs); /* 8px surtitre ↔ titre */
  }

  .ax-contact__eyebrow {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--14);
    line-height: 1;
    text-transform: uppercase;
  }

  .ax-contact .ax-contact__title {
    margin: 0;
    line-height: 1;
  }

  .ax-contact__faq {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem; /* 6px texte ↔ lien */
    margin: 0;
  }

  .ax-contact__faq-text {
    font-family: var(--font-body--family);
    font-size: var(--font-size--14);
    line-height: 1.2;
  }

  /* Lien FAQ : soulignement animé du thème (.link-underlined) ; on ne règle que la taille */
  .ax-contact__faq-link {
    font-size: var(--button-font-size); /* 16 mobile → 18 desktop */
  }

  .ax-contact__faq-link:hover {
    opacity: var(--opacity-70, 0.7);
  }

  /* Slot d'embed du formulaire Gorgias (iframe cross-origin). La hauteur de l'iframe
     est gérée globalement via #gorgias-contact-form-wrapper (base.css). */
  .ax-contact__form {
    width: 100%;
    max-width: 37.5rem; /* 600px iso maquette */
  }

  @media screen and (min-width: 750px) {
    .ax-contact__grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-sm); /* 12px gutter */
      align-items: start;
    }

    .ax-contact__content {
      position: sticky;
      /* sous le header-group sticky (header + topbar) + 24px d'air */
      top: calc(var(--header-group-height, var(--header-height, 0px)) + var(--gap-24));
    }
  }
/* END_SECTION:ax-contact */

/* START_SECTION:ax-countdown-with-text (INDEX:18) */
.ax-countdown {
    display: block;
  }

  .ax-countdown__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-lg);
    text-align: center;

    @media screen and (min-width: 1200px) {
      flex-direction: row;
      gap: var(--gap-3xl);
    }
  }

  /* Disposition « empilée » : le compteur garde les textes au-dessus / en-dessous
     même en desktop (un seul titre centré, demande client ticket 12715304418).
     Le mobile est déjà empilé par défaut : seule la bascule en ligne est neutralisée. */
  .ax-countdown__inner--desktop-stacked {
    @media screen and (min-width: 1200px) {
      flex-direction: column;
      gap: var(--gap-lg);
    }
  }

  /* En empilé, les textes ne se partagent plus la largeur : ils la prennent toute
     pour rester centrés sous/au-dessus du compteur. */
  .ax-countdown__inner--desktop-stacked .ax-countdown__side-text {
    @media screen and (min-width: 1200px) {
      flex: 0 0 auto;
      width: 100%;
    }
  }

  /* Mobile : n'afficher qu'un seul des deux textes (l'autre reste en desktop). */
  @media screen and (max-width: 1199px) {
    .ax-countdown__inner--mobile-first .ax-countdown__side-text--second,
    .ax-countdown__inner--mobile-second .ax-countdown__side-text--first {
      display: none;
    }
  }

  .ax-countdown__side-text {
    flex: 1 1 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: clamp(2rem, 3.5vw, 4rem);
    line-height: var(--line-height--heading-tight, 1.1);
    text-transform: uppercase;
  }

  /* Convention héritée de l'ancien thème : l'italique devient du texte outline.
     text-fill-color (et pas color: transparent) : le stroke est en currentColor,
     qui doit rester la couleur du scheme. */
  .ax-countdown__side-text em {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px currentColor;
    font-style: normal;
  }

  .ax-countdown__timer {
    display: flex;
    justify-content: center;
    gap: clamp(var(--gap-md), 2vw, var(--gap-2xl));
  }

  /* Le display: flex ci-dessus battrait l'attribut hidden posé à la fin du décompte. */
  .ax-countdown__timer[hidden] {
    display: none;
  }

  .ax-countdown__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs);
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  ax-countdown[loaded] .ax-countdown__group {
    opacity: 1;
  }

  .ax-countdown__digits {
    display: flex;
    gap: var(--padding-3xs, 2px);
    white-space: nowrap;
  }

  .ax-countdown__digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: clamp(2rem, 3vw, 3rem);
    /* Centrage optique : les chiffres du Gustavo s'assoient sous le centre
       géométrique de leur em-box (même défaut que le badge catégorie blog) —
       on remonte le contenu dans la tuile. En em pour suivre le clamp de taille. */
    padding-block: calc(var(--padding-2xs) - 0.06em) calc(var(--padding-2xs) + 0.06em);
    padding-inline: var(--padding-2xs);
    background-color: var(--color-foreground);
    color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    line-height: 1;
  }

  .ax-countdown__unit {
    font-size: var(--font-size--xs);
  }

  .ax-countdown__end-message {
    margin: 0;
  }
/* END_SECTION:ax-countdown-with-text */

/* START_SECTION:ax-criteres (INDEX:19) */
.ax-criteres__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-24) var(--gap-40);
    align-items: flex-start;
  }

  .ax-criteres__col-left,
  .ax-criteres__col-right {
    flex: 1 1 0;
    min-width: 18.75rem;
  }

  .ax-criteres__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  .ax-criteres__heading-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .ax-criteres__eyebrow {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ax-criteres__title {
    margin: 0;
  }

  .ax-criteres__description {
    margin: 0;
    line-height: 1.2;
  }

  .ax-criteres__col-right {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .ax-criteres__item {
    overflow: hidden;
    padding: 0.875rem var(--gap-lg);
    background-color: var(--critere-bg, var(--color-neutral-light));
    border-radius: var(--style-border-radius-xs);
  }

  .ax-criteres__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding: 0;
    cursor: pointer;
    list-style: none;
  }

  .ax-criteres__summary::-webkit-details-marker { display: none; }
  .ax-criteres__summary::marker { content: ''; }

  .ax-criteres__titre {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .ax-criteres__picto {
    flex-shrink: 0;
    display: inline-flex;
    width: 1.375rem;
    height: 1.25rem;
    color: var(--color-blue-NM);
  }

  .ax-criteres__picto svg {
    width: 100%;
    height: 100%;
  }

  .ax-criteres__label {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1rem;
    line-height: 1;
  }

  .ax-criteres__caret {
    flex-shrink: 0;
    display: inline-flex;
    width: 1.25rem;
    height: 0.625rem;
    transform: rotate(180deg);
    transition: transform var(--animation-values);
  }

  .ax-criteres__caret svg {
    width: 100%;
    height: 100%;
  }

  .ax-criteres__item[open] .ax-criteres__caret {
    transform: rotate(0deg);
  }

  .ax-criteres__content {
    margin-block-start: var(--gap-lg);
    font-size: 0.875rem;
    line-height: 1.2;
  }

  {%- comment -%}
    Même garde que sur `ax-faq` : `calc-size()` est propre à Chrome, alors que
    WebKit reconnaît `::details-content`. Tester les deux, sinon l'accordéon
    s'ouvre sur du vide en Safari / iOS (ticket 12899947605).
  {%- endcomment -%}
  @supports selector(::details-content) and (block-size: calc-size(auto, size)) {
    .ax-criteres__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--animation-speed) var(--animation-easing),
        content-visibility var(--animation-speed) allow-discrete;
    }

    .ax-criteres__item[open]::details-content {
      block-size: calc-size(auto, size);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-criteres__caret,
    .ax-criteres__item::details-content {
      transition: none;
    }
  }

  .ax-criteres__placeholder {
    margin: 0;
    padding: var(--padding-lg);
    background-color: var(--color-neutral-light);
    font-style: italic;
  }

  @media screen and (max-width: 1199px) {
    .ax-criteres__col-left,
    .ax-criteres__col-right {
      flex: 1 1 100%;
    }
  }

  @media screen and (max-width: 749px) {
    .ax-criteres__eyebrow {
      font-size: var(--font-size--xs);
    }
  }
/* END_SECTION:ax-criteres */

/* START_SECTION:ax-expandable-cards (INDEX:21) */
.ax-expandable-cards {
    /* Largeur card active : iso-maquette 341px à 1440px viewport (= 26.6% du
       container 1280px), borné min/max pour rester lisible sur tous écrans. */
    --ax-ec-card-active-width: clamp(280px, 26.6%, 380px);
    /* Hauteur min des slides : iso-maquette = 226px. Le JS l'augmente si le
       contenu réel le nécessite (only-grow → jamais de shift vers le bas). */
    --ax-ec-card-min-height: 226px;
  }

  /* Active l'interpolation des keywords UNIQUEMENT en desktop (où on en a
     besoin pour animer height: 0 ↔ auto sur la description).
     En mobile, cette prop déclenche un layout loop infini avec Swiper, donc
     on la scope. Chrome 129+ / Edge 129+ requis pour l'animation height auto.
     Doc : https://developer.chrome.com/docs/css-ui/animate-to-height-auto */
  @media screen and (min-width: 1200px) {
    .ax-expandable-cards {
      interpolate-size: allow-keywords;
    }
  }

  /* === Gap presets === */
  .ax-expandable-cards--gap-mobile-normal { --ax-ec-card-gap: var(--gap-xs); }   /* 8px */
  .ax-expandable-cards--gap-mobile-large  { --ax-ec-card-gap: 2.25rem; }         /* 36px */

  @media screen and (min-width: 1200px) {
    .ax-expandable-cards--gap-desktop-normal { --ax-ec-card-gap: var(--gap-xs); } /* 8px */
    .ax-expandable-cards--gap-desktop-large  { --ax-ec-card-gap: 2.25rem; }       /* 36px */
  }

  /* === Layout switch desktop / mobile ===
     Desktop : <ul> visible, swiper hidden (jamais init).
     Mobile : <ul> hidden, swiper visible (init via JS + slides movées dedans). */
  .ax-expandable-cards__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--ax-ec-card-gap, var(--gap-xs));
    width: 100%;
  }

  .ax-expandable-cards__swiper {
    display: none;
  }

  /* Pagination externe (light DOM) — bullets stylés globalement dans base.css
     (.swiper-pagination-bullet + .swiper-pagination-bullet-active via les vars
     --ax-pagination-*). On ne gère ici que le layout du conteneur. */
  .ax-expandable-cards__pagination {
    margin-block-start: var(--padding-xs);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-xs);
  }
  .ax-expandable-cards__pagination:empty {
    display: none;
  }

  @media screen and (max-width: 1199px) {
    .ax-expandable-cards__list {
      display: none;
    }
    .ax-expandable-cards__swiper {
      display: block;
      width: 100%;
    }
    .ax-expandable-cards__swiper::part(container) {
      overflow: hidden;
    }
  }

  @media screen and (min-width: 1200px) {
    .ax-expandable-cards__pagination {
      display: none;
    }
  }

  .ax-expandable-cards__slide {
    position: relative;
    border-radius: var(--style-border-radius-xs);
    overflow: hidden;
    min-height: var(--ax-ec-card-min-height);
    display: flex;
  }

  /* === Desktop : flex row natif + hover-expand === */
  @media screen and (min-width: 1200px) {
    .ax-expandable-cards__slide {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
      transition:
        flex-grow .4s var(--animation-timing-default),
        flex-basis .4s var(--animation-timing-default);
      cursor: pointer;
    }

    .ax-expandable-cards__slide.is-active {
      flex-grow: 0;
      flex-basis: var(--ax-ec-card-active-width);
    }
  }

  /* === Card content === */
  .ax-expandable-card {
    position: relative;
    width: 100%;
    flex: 1;
    color: white;
    display: flex;
    flex-direction: column;
  }

  .ax-expandable-card__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .ax-expandable-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ax-expandable-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgb(0 0 0 / 0.7) 100%);
    pointer-events: none;
  }

  .ax-expandable-card__content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--padding-xs);
  }

  .ax-expandable-card__title {
    margin: 0;
    color: inherit;
  }

  .ax-expandable-card__description {
    color: inherit;
  }

  /* === Desktop : transitions === */
  @media screen and (min-width: 1200px) {
    .ax-expandable-card__content {
      padding: var(--padding-lg);
    }
  
    .ax-expandable-card__title {
      font-size: var(--font-size--h4);
      /* line-height identique repos/actif → pas de saut de baseline au hover */
      line-height: var(--font-h3--line-height);
      /* font-size synchronisé sur l'expansion de la card (.4s) pour éviter le saut */
      transition:
        font-size .4s var(--animation-timing-default),
        margin-block-end .4s var(--animation-timing-default);
    }
    /* Description : width fixée à la valeur cible (= largeur du content de la
       card active) pour éviter rewrap pendant le changement de largeur. */
    .ax-expandable-card__description {
      width: var(--ax-ec-desc-width, 100%);
      height: 0;
      overflow: hidden;
      transition: height .4s var(--animation-timing-default);
    }
    .ax-expandable-card__description * {
      opacity: 0;
      transition: opacity .3s ease-in-out;
    }

    .ax-expandable-cards__slide.is-active .ax-expandable-card__title {
      font-size: var(--font-size--h3);
    }
    /* Margin entre title et description seulement si la card a une description. */
    .ax-expandable-cards__slide.is-active .ax-expandable-card__title:has(+ .ax-expandable-card__description) {
      margin-block-end: var(--gap-xs);
    }
    .ax-expandable-cards__slide.is-active .ax-expandable-card__description {
      height: auto;
    }
    .ax-expandable-cards__slide.is-active .ax-expandable-card__description * {
      opacity: 1;
    }
  }

  /* === Mobile : tout visible, titre H3 partout === */
  @media screen and (max-width: 1199px) {
    .ax-expandable-card__title {
      font-size: var(--font-size--h3);
      line-height: var(--font-h3--line-height);
    }
  }
/* END_SECTION:ax-expandable-cards */

/* START_SECTION:ax-faq (INDEX:22) */
.ax-faq__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    align-items: flex-start;
  }

  .ax-faq__col-left,
  .ax-faq__col-right {
    flex: 1 1 0;
    min-width: 18.75rem;
  }

  .ax-faq__col-left {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24);
  }

  .ax-faq__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .ax-faq__eyebrow {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ax-faq__title {
    margin: 0;
  }

  .ax-faq__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
  }

  .ax-faq__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem 0.25rem;
    background-color: var(--color-gris-clair);
    color: var(--color-black);
    border: 2px solid transparent;
    border-radius: var(--style-border-radius-xs);
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--animation-values), color var(--animation-values);
  }

  .ax-faq__tag:hover {
    background-color: var(--color-gris-moyen);
    color: var(--color-white);
  }

  .ax-faq__tag.is-active {
    background-color: var(--color-blue-NM);
    border-color: var(--color-blue-NM);
    color: var(--color-white);
  }

  .ax-faq__item {
    border-block-end: 1px solid var(--color-neutral);
    overflow: hidden;
  }

  .ax-faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xs);
    padding-block: var(--padding-lg);
    cursor: pointer;
    list-style: none;
  }

  .ax-faq__summary::-webkit-details-marker { display: none; }
  .ax-faq__summary::marker { content: ''; }

  .ax-faq__question {
    flex: 1;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--16);
    line-height: 1;
  }

  .ax-faq__chevron {
    flex-shrink: 0;
    display: inline-flex;
    /* 25px : taille du composant « Flèche » de la maquette, identique en desktop
       et en mobile (nodes 4315-28667 / 2984-6721). */
    width: 1.5625rem;
    height: 1.5625rem;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg);
    transition: transform var(--animation-values);
  }

  .ax-faq__chevron svg {
    width: 100%;
    height: 100%;
  }

  .ax-faq__item[open] .ax-faq__chevron {
    transform: rotate(0deg);
  }

  .ax-faq__answer {
    padding-block-end: var(--padding-lg);
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
  }

  {%- comment -%}
    L'animation d'ouverture repose sur `calc-size()`, que seul Chrome connaît.
    Tester `::details-content` ne suffit donc pas : WebKit reconnaît le sélecteur
    (donc applique `block-size: 0`) mais jette la déclaration d'ouverture — la
    réponse restait rognée à zéro, accordéon inutilisable sur iPhone
    (ticket 12899947605). Les deux conditions vont ensemble ; sans elles, repli
    sur l'ouverture native, instantanée.
  {%- endcomment -%}
  @supports selector(::details-content) and (block-size: calc-size(auto, size)) {
    .ax-faq__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--animation-speed) var(--animation-easing),
        content-visibility var(--animation-speed) allow-discrete;
    }
    .ax-faq__item[open]::details-content {
      block-size: calc-size(auto, size);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-faq__chevron,
    .ax-faq__item::details-content {
      transition: none;
    }
  }

  .ax-faq__placeholder {
    margin: 0;
    padding: var(--padding-lg);
    background-color: var(--color-gris-clair);
    color: var(--color-foreground);
    font-style: italic;
  }

  @media screen and (max-width: 1199px) {
    .ax-faq__col-left,
    .ax-faq__col-right {
      flex: 1 1 100%;
    }

    .ax-faq__eyebrow {
      font-size: var(--font-size--xs);
    }

    .ax-faq__tag {
      font-size: 0.875rem;
    }
  }
/* END_SECTION:ax-faq */

/* START_SECTION:ax-featured-product (INDEX:23) */
.ax-featured-product__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;

    @media screen and (min-width: 1200px) {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: 0;
    }
  }

  .ax-featured-product__content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-inline: 0;
    padding-block-start: 1rem;

    @media screen and (min-width: 1200px) {
      padding-inline-start: 5.5rem;
      padding-inline-end: 0;
      padding-block-start: 0;
    }
  }

  @media screen and (max-width: 1199px) {
    .ax-featured-product__gallery {
      margin-inline: calc(-1 * var(--page-margin));
    }
  }

  @media screen and (min-width: 1200px) {
    .ax-featured-product__gallery {
      position: sticky;
      top: calc(var(--header-group-height, var(--header-height, 0px)) + var(--gap-2xl));
      align-self: start;
    }

    .ax-featured-product .product-media-container.constrain-height {
      /* Repli 6rem et non 0px : `--header-group-height` n'est posée que par le JS
         (ResizeObserver du header). Avec 0px, le plafond de hauteur du média valait
         836px avant l'exécution du JS puis 737px après — soit un décalage de ~100px
         sur toute image assez haute pour toucher ce plafond. 6rem ≈ la hauteur réelle
         du groupe header (mesurée 99px), l'écart résiduel est négligeable. */
      --viewport-offset: calc(var(--header-group-height, var(--header-height, 6rem)) + var(--gap-2xl) + var(--gap-2xl));
    }
  }

  .ax-featured-product__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ax-featured-product__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1.25rem;
    line-height: 1;

    @media screen and (min-width: 1200px) {
      font-size: 1.75rem;
    }
  }

  .ax-featured-product .shopify-payment-button,
  .ax-featured-product .accelerated-checkout-block,
  .ax-featured-product local-pickup,
  .ax-featured-product .product-pickup-availability {
    display: none;
  }

  .ax-featured-product .quantity-selector {
    --icon-stroke-width: 2.5px;
    border-width: 1px;
  }

  /* Qté + CTA sur une seule ligne (iso-PDP) : la colonne produit est plus étroite
     qu'en FP → sans ça le CTA (min-width fit-content) wrappe sous la quantité. */
  .ax-featured-product
    .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    min-width: 0;
  }

  .ax-featured-product .add-to-cart-button .add-to-cart-text {
    white-space: nowrap;
  }

  .ax-featured-product .add-to-cart-button {
    padding-inline: var(--padding-sm);
  }

  .ax-featured-product .variant-option.variant-option--flavors {
    margin: 0;
  }

  .ax-featured-product .variant-picker {
    padding-block-end: 0;
  }

  .ax-featured-product .ax-featured-product__header,
  .ax-featured-product .product__nutridays-summary {
    margin-block-end: calc(16px - 1.5rem);
  }

  .ax-featured-product .product-top-line {
    margin-block-end: calc(8px - 1.5rem);
  }

  .ax-featured-product product-estimated-delivery {
    margin-block-end: calc(10px - 1.5rem);
  }

  .ax-featured-product .product-reassurance {
    padding-block: 0;
  }

  .ax-featured-product .product-reassurance__swiper {
    inset-block: 0;
  }
/* END_SECTION:ax-featured-product */

/* START_SECTION:ax-grid-spots (INDEX:25) */
.ax-grid-spots {
    overflow-x: clip;
  }

  .ax-grid-spots__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-24);
  }

  @media screen and (min-width: 1200px) {
    .ax-grid-spots__inner {
      grid-template-columns: minmax(300px, 468px) 1fr;
      gap: var(--gap-24);
    }

    /* Sans en-tête, la grille récupère la colonne du titre. */
    .ax-grid-spots--no-header .ax-grid-spots__inner {
      grid-template-columns: 1fr;
    }

    .ax-grid-spots--header-top .ax-grid-spots__header { align-self: start; }
    .ax-grid-spots--header-center .ax-grid-spots__header { align-self: center; }
    .ax-grid-spots--header-bottom .ax-grid-spots__header { align-self: end; }
  }

  .ax-grid-spots__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);

    @media screen and (min-width: 1200px) {
    gap: var(--gap-3xl);
    }
  }

  .ax-grid-spots__title {
    margin: 0;
  }

  .ax-grid-spots__subtitle {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h4);
    font-weight: var(--font-heading--weight);
    line-height: 1.2;
  }

  .ax-grid-spots__subtitle p {
    margin-block: 0;
  }

  .ax-grid-spots__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gap-sm);
  }

  /* === Desktop layouts par count ==================================== */
  @media screen and (min-width: 1200px) {
    .ax-grid-spots--count-1 .ax-grid-spots__list {
      grid-template-columns: 1fr;
    }
    .ax-grid-spots--count-2 .ax-grid-spots__list {
      grid-template-columns: repeat(2, 1fr);
    }
    .ax-grid-spots--count-3 .ax-grid-spots__list {
      grid-template-columns: repeat(3, 1fr);
    }
    /* Count 4 : 2 grandes col 1+2 (span 2 rows) + 2 stacked col 3. */
    .ax-grid-spots--count-4 .ax-grid-spots__list {
      grid-template-columns: 2fr 2fr 1fr;
      grid-template-rows: 1fr 1fr;
      aspect-ratio: 720 / 487;
    }
    .ax-grid-spots--count-4 .ax-grid-spots__tile:nth-child(1),
    .ax-grid-spots--count-4 .ax-grid-spots__tile:nth-child(2) {
      grid-row: 1 / 3;
    }

    /* Count 5 : iso maquette. Col 1 large (~2fr), col 2/3 petites (1fr).
       Ratios précis maquette : 348/178/178 ≈ 2/1/1, aspect 720/487. */
    .ax-grid-spots--count-5 .ax-grid-spots__list {
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      aspect-ratio: 720 / 487;
    }
    .ax-grid-spots--count-5 .ax-grid-spots__tile:first-child {
      grid-row: 1 / 3;
    }

    /* Counts 1-3 : tiles aspect portrait iso maquette */
    .ax-grid-spots--count-1 .ax-grid-spots__tile,
    .ax-grid-spots--count-2 .ax-grid-spots__tile,
    .ax-grid-spots--count-3 .ax-grid-spots__tile {
      aspect-ratio: 200 / 356;
    }
  }

  /* === Mobile : carousel scroll-snap horizontal (scrollbar hidden) === */
  @media screen and (max-width: 1199px) {
    .ax-grid-spots__list {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 78%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-margin);
      padding-block: var(--padding-xs);
      margin-inline: calc(var(--page-margin) * -1);
      padding-inline: var(--page-margin);
      scrollbar-width: none;
    }
    .ax-grid-spots__list::-webkit-scrollbar { display: none; }
    .ax-grid-spots__tile {
      scroll-snap-align: start;
      aspect-ratio: 280 / 356;
    }
  }

  /* === Tile ========================================================= */
  .ax-grid-spots__tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
    isolation: isolate;
    background: var(--color-neutral-light);
  }

  .ax-grid-spots__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .ax-grid-spots__image,
  .ax-grid-spots__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Media swap desktop/mobile */
  .ax-grid-spots__media--desktop { display: none; }
  .ax-grid-spots__media--mobile { display: block; }

  @media screen and (min-width: 1200px) {
    .ax-grid-spots__media--desktop { display: block; }
    .ax-grid-spots__media--mobile { display: none; }
  }

  /* === Hotspot ====================================================== */
  .ax-grid-spots__hotspot {
    position: absolute;
    inset-inline-start: var(--hot-x-m, 50%);
    inset-block-start: var(--hot-y-m, 50%);
    translate: -50% -50%;
    z-index: 2;
  }

  @media screen and (min-width: 1200px) {
    .ax-grid-spots__hotspot {
      inset-inline-start: var(--hot-x-d, 50%);
      inset-block-start: var(--hot-y-d, 50%);
    }
  }

  /* Trigger : cercle translucide blanc, croix blanche centrée, pulse halo. */
  .ax-grid-spots__trigger {
    --trigger-size: 2rem;
    position: relative;
    display: block;
    width: var(--trigger-size);
    height: var(--trigger-size);
    padding: 0;
    background-color: var(--color-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    list-style: none;
    color: var(--color-white);
    transition: background-color var(--animation-values);
  }

  .ax-grid-spots__trigger::-webkit-details-marker { display: none; }
  .ax-grid-spots__trigger::marker { content: ''; }

  .ax-grid-spots__trigger:hover,
  .ax-grid-spots__hotspot[open] .ax-grid-spots__trigger {
    background-color: rgb(255 255 255 / var(--opacity-80));
  }

  /* Pulse halo qui s'élargit lentement (effet "ping"). */
  .ax-grid-spots__trigger-pulse {
    position: absolute;
    inset: 0;
    background-color: rgb(255 255 255 / var(--opacity-40));
    border-radius: 50%;
    pointer-events: none;
    animation: ax-grid-spots-pulse 2.4s ease-out infinite;
  }

  @keyframes ax-grid-spots-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
  }

  /* Croix centrée absolument (plus robuste que flex+padding). */
  .ax-grid-spots__trigger-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    translate: -50% -50%;
    display: block;
    color: var(--color-black);
  }

  .ax-grid-spots__trigger-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-grid-spots__trigger-pulse {
      animation: none;
    }
  }

  /* === Card =========================================================
     Card positionnée ANCRÉE au + : même X que le hotspot, vertical au-dessus
     ou en dessous selon que le + est dans la moitié haute (--card-v-d/m-bottom)
     ou basse (--card-v-d/m-top). Pour small tiles + mobile, le X passe au
     centre de la tile (--card-x: 50%) avec layout column. */
  .ax-grid-spots__card {
    --card-x: var(--hot-x-d);
    --card-y: var(--hot-y-d);
    --card-offset: var(--gap-xl);

    position: absolute;
    z-index: 3;
    display: block;
    width: max-content;
    max-width: 11rem;
    inset-inline-start: var(--card-x);
    inset-block-start: var(--card-y);
    translate: -50% 0;
    color: inherit;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) allow-discrete;
  }

  /* Vertical : card au-dessus du + si + est en bas, en dessous si + est en haut. */
  .ax-grid-spots__tile--card-v-d-top .ax-grid-spots__card {
    translate: -50% calc(-100% - var(--card-offset));
  }
  .ax-grid-spots__tile--card-v-d-bottom .ax-grid-spots__card {
    translate: -50% var(--card-offset);
  }

  /* === Small tiles desktop : card centrée horizontalement sur la TILE
        + column layout (image en haut, info centrée). */
  @media screen and (min-width: 1200px) {
    .ax-grid-spots__tile--small .ax-grid-spots__card {
      --card-x: 50%;
      max-width: calc(100% - var(--gap-md) * 2);
    }

    .ax-grid-spots__tile--small .ax-grid-spots__card .ax-product-card-mini {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: var(--padding-xs);
    }
  }

  /* === Mobile : card centrée sur tile, layout ROW (mini-card par défaut),
        vertical = --hot-y-m. */
  @media screen and (max-width: 1199px) {
    .ax-grid-spots__card {
      --card-x: 50%;
      --card-y: var(--hot-y-m);
      max-width: calc(100% - var(--gap-md) * 2);
    }

    /* Override les classes desktop avec les classes mobile */
    .ax-grid-spots__tile--card-v-d-top .ax-grid-spots__card,
    .ax-grid-spots__tile--card-v-d-bottom .ax-grid-spots__card {
      translate: -50% 0;
    }
    .ax-grid-spots__tile--card-v-m-top .ax-grid-spots__card {
      translate: -50% calc(-100% - var(--card-offset));
    }
    .ax-grid-spots__tile--card-v-m-bottom .ax-grid-spots__card {
      translate: -50% var(--card-offset);
    }
  }

  /* Reveal : hover du SPOT (+) seulement, OU details[open], OU hover de la
     card elle-même (pour pouvoir interagir avec son contenu sans flicker). */
  .ax-grid-spots__hotspot:hover ~ .ax-grid-spots__card,
  .ax-grid-spots__hotspot:focus-within ~ .ax-grid-spots__card,
  .ax-grid-spots__card:hover,
  .ax-grid-spots__card:focus-within,
  .ax-grid-spots__tile:has(.ax-grid-spots__hotspot[open]) .ax-grid-spots__card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-grid-spots__trigger,
    .ax-grid-spots__card {
      transition: none;
    }
  }
/* END_SECTION:ax-grid-spots */

/* START_SECTION:ax-hero (INDEX:26) */
.ax-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    min-height: var(--ax-hero-min-h, 510px);
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    margin-block: var(--ax-hero-mbs-mobile, 0) var(--ax-hero-mbe-mobile, 0);
  }

  @media screen and (min-width: 1200px) {
    .ax-hero {
      margin-block: var(--ax-hero-mbs-desktop, 0) var(--ax-hero-mbe-desktop, 0);
    }
  }

  /* Largeur "page" : la bannière (média + contenu + overlay) se cale dans la
     colonne centrale avec marges latérales, au lieu du full-bleed par défaut.
     ax-hero écrasant la grille 3-col de .section, on contraint sa boîte ici. */
  .ax-hero.section--page-width {
    max-width: var(--full-page-grid-central-column-width);
    margin-inline: auto;
  }

  .ax-hero > * {
    grid-column: 1 / -1;
  }

  /* === Height presets (mobile by default, overridden desktop via @media) === */
  .ax-hero--height-mobile-auto       { --ax-hero-min-h: auto; } /* hauteur = contenu + padding-block + gaps */
  .ax-hero--height-mobile-compact    { --ax-hero-min-h: 260px; } /* iso brand-story */
  .ax-hero--height-mobile-small      { --ax-hero-min-h: 350px; }
  .ax-hero--height-mobile-medium     { --ax-hero-min-h: 510px; } /* iso-maquette main */
  .ax-hero--height-mobile-large      { --ax-hero-min-h: 650px; }
  .ax-hero--height-mobile-fullscreen { --ax-hero-min-h: 100vh; }
  .ax-hero--height-mobile-custom     { --ax-hero-min-h: var(--ax-hero-custom-mobile, 510px); }

  @media screen and (min-width: 1200px) {
    .ax-hero--height-desktop-auto       { --ax-hero-min-h: auto; }
    .ax-hero--height-desktop-compact    { --ax-hero-min-h: 410px; } /* iso brand-story */
    .ax-hero--height-desktop-small      { --ax-hero-min-h: 400px; }
    .ax-hero--height-desktop-medium     { --ax-hero-min-h: 600px; } /* iso-maquette main */
    .ax-hero--height-desktop-large      { --ax-hero-min-h: 800px; }
    .ax-hero--height-desktop-fullscreen { --ax-hero-min-h: 100vh; }
    .ax-hero--height-desktop-custom     { --ax-hero-min-h: var(--ax-hero-custom-desktop, 600px); }
  }

  /* === Hauteur pilotée par le média ===
     Le média passe en flux (relative + height auto) → sa hauteur naturelle
     dicte celle de la section. Le contenu (déjà en grid-row/column 1) s'empile
     dans la même cellule. Scopé par breakpoint pour cohabiter avec un autre
     preset sur l'autre viewport. */
  @media screen and (max-width: 1199px) {
    .ax-hero--height-mobile-media { --ax-hero-min-h: auto; }

    .ax-hero--height-mobile-media .ax-hero__media {
      position: relative;
      inset: auto;
      grid-row: 1;
    }

    .ax-hero--height-mobile-media :is(.ax-hero__image, .ax-hero__video, .ax-hero__media picture, .ax-hero__media img) {
      position: relative;
      inset: auto;
      height: auto;
    }

    .ax-hero--height-mobile-media :is(.ax-hero__media picture, .ax-hero__media img) {
      display: block;
    }
  }

  @media screen and (min-width: 1200px) {
    .ax-hero--height-desktop-media { --ax-hero-min-h: auto; }

    .ax-hero--height-desktop-media .ax-hero__media {
      position: relative;
      inset: auto;
      grid-row: 1;
    }

    .ax-hero--height-desktop-media :is(.ax-hero__image, .ax-hero__video, .ax-hero__media picture, .ax-hero__media img) {
      position: relative;
      inset: auto;
      height: auto;
    }

    .ax-hero--height-desktop-media :is(.ax-hero__media picture, .ax-hero__media img) {
      display: block;
    }
  }

  /* Background media — full-bleed */
  .ax-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .ax-hero__image,
  .ax-hero__video,
  .ax-hero__media picture,
  .ax-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Toggle vidéo mobile/desktop via CSS — l'autre source <video> est cachée */
  .ax-hero__video--desktop {
    display: none;
  }

  .ax-hero__video--mobile {
    display: block;
  }

  @media screen and (min-width: 1200px) {
    .ax-hero__video--mobile {
      display: none;
    }

    .ax-hero__video--desktop {
      display: block;
    }
  }

  /* Overlay — variants via classe modifier */
  /* Lien couvrant : au-dessus de l'overlay, sous le contenu. */
  .ax-hero__link {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* Le contenu occupe toute la cellule de la grille : sans ça il intercepterait
     chaque clic destiné au lien. Ses éléments interactifs les reprennent. */
  .ax-hero--linked .ax-hero__content {
    pointer-events: none;
  }

  .ax-hero--linked .ax-hero__content :is(a, button, summary, input, select, textarea, [role='button']) {
    pointer-events: auto;
  }

  .ax-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--ax-hero-overlay-opacity, 0.5);
  }

  .ax-hero--overlay-solid .ax-hero__overlay {
    background-color: var(--ax-hero-overlay-color, #000);
  }

  /* Fallback for legacy "gradient" value (from hero.liquid pre-rework) → same as gradient-left */
  .ax-hero--overlay-gradient .ax-hero__overlay,
  .ax-hero--overlay-gradient-left .ax-hero__overlay {
    background: linear-gradient(
      to left,
      transparent 45%,
      var(--ax-hero-overlay-color, #000) 95%
    );
  }

  .ax-hero--overlay-gradient-right .ax-hero__overlay {
    background: linear-gradient(
      to right,
      transparent 45%,
      var(--ax-hero-overlay-color, #000) 95%
    );
  }

  .ax-hero--overlay-gradient-top .ax-hero__overlay {
    background: linear-gradient(
      to top,
      transparent 45%,
      var(--ax-hero-overlay-color, #000) 95%
    );
  }

  .ax-hero--overlay-gradient-bottom .ax-hero__overlay {
    background: linear-gradient(
      to bottom,
      transparent 45%,
      var(--ax-hero-overlay-color, #000) 95%
    );
  }

  /* Content positioning — 3×3 grid placement
     Mobile: positions via --mobile-* classes (sans media query car CSS scope = mobile)
     Desktop: override via --desktop-* classes en min-width: 1200 */
  .ax-hero__content {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ax-hero-content-gap, var(--gap-lg));
    padding-inline: var(--page-margin);
    /* Padding-block piloté par les ranges (visibles en hauteur "auto"), fallback 48px iso-legacy.
       Mobile-first : valeurs mobile au base, override desktop en @media. */
    --ax-hero-pb-start: var(--ax-hero-pbs-mobile, var(--padding-5xl));
    --ax-hero-pb-end: var(--ax-hero-pbe-mobile, var(--padding-5xl));
    padding-block: var(--ax-hero-pb-start) var(--ax-hero-pb-end);
    width: 100%;
    /* Cadre du content : limite la largeur globale (sinon un H1 large fit-content
       prend toute la viewport). Pilotable via le réglage "Largeur max du contenu"
       (classes .ax-hero--content-*). Les block settings (narrow/normal/wide)
       restent appliqués, contraints au min(block-setting, content-max-width). */
    max-width: var(--ax-hero-content-max-w, 50rem);
    color: var(--color-foreground);
  }

  /* Largeur max du contenu (réglage section) — defaut "normal" = 50rem (800px) */
  .ax-hero--content-narrow { --ax-hero-content-max-w: 37.5rem; } /* 600px */
  .ax-hero--content-normal { --ax-hero-content-max-w: 50rem; }   /* 800px */
  .ax-hero--content-wide   { --ax-hero-content-max-w: 75rem; }   /* 1200px */
  .ax-hero--content-none   { --ax-hero-content-max-w: 100%; }

  @media screen and (min-width: 1200px) {
    .ax-hero__content {
      --ax-hero-pb-start: var(--ax-hero-pbs-desktop, var(--padding-5xl));
      --ax-hero-pb-end: var(--ax-hero-pbe-desktop, var(--padding-5xl));
    }
  }

  /* Gap presets — normal = 16px (--gap-md) / large = 32px (--gap-xl) */
  .ax-hero--gap-mobile-normal { --ax-hero-content-gap: var(--gap-lg); }  /* 16px */
  .ax-hero--gap-mobile-large  { --ax-hero-content-gap: var(--gap-2xl); } /* 32px */

  /* Override the base.css `.text-block { width: 100% }` for the hero — consume
     the --width / --max-width CSS vars set by each block's width settings so
     the merchant's "Narrow / Normal / Wide / Custom" widths actually apply. */
  .ax-hero__content > .text-block {
    width: var(--width, 100%);
    max-width: var(--max-width, 100%);
  }


  /* === Mobile positions === */
  .ax-hero--mobile-top-left .ax-hero__content     { place-self: start start; text-align: left; }
  .ax-hero--mobile-top-center .ax-hero__content   { place-self: start center; text-align: center; }
  .ax-hero--mobile-top-right .ax-hero__content    { place-self: start end; text-align: right; }
  .ax-hero--mobile-middle-left .ax-hero__content  { place-self: center start; text-align: left; }
  .ax-hero--mobile-middle-center .ax-hero__content { place-self: center center; text-align: center; }
  .ax-hero--mobile-middle-right .ax-hero__content { place-self: center end; text-align: right; }
  .ax-hero--mobile-bottom-left .ax-hero__content  { place-self: end start; text-align: left; }
  .ax-hero--mobile-bottom-center .ax-hero__content { place-self: end center; text-align: center; }
  .ax-hero--mobile-bottom-right .ax-hero__content { place-self: end end; text-align: right; }

  /* === Desktop positions (override) === */
  @media screen and (min-width: 1200px) {
    .ax-hero__content {
      padding-block: var(--page-margin);
      padding-inline: var(--ax-hero-pad-inline-desktop, var(--page-margin));
      /* gap stays at --gap-md (16px) for both viewports to match Figma */
    }

    .ax-hero--desktop-top-left .ax-hero__content     { place-self: start start; text-align: left; }
    .ax-hero--desktop-top-center .ax-hero__content   { place-self: start center; text-align: center; }
    .ax-hero--desktop-top-right .ax-hero__content    { place-self: start end; text-align: right; }
    .ax-hero--desktop-middle-left .ax-hero__content  { place-self: center start; text-align: left; }
    .ax-hero--desktop-middle-center .ax-hero__content { place-self: center center; text-align: center; }
    .ax-hero--desktop-middle-right .ax-hero__content { place-self: center end; text-align: right; }
    .ax-hero--desktop-bottom-left .ax-hero__content  { place-self: end start; text-align: left; }
    .ax-hero--desktop-bottom-center .ax-hero__content { place-self: end center; text-align: center; }
    .ax-hero--desktop-bottom-right .ax-hero__content { place-self: end end; text-align: right; }
  }

  /* ── CTA dissocié ─────────────────────────────────────────────────────────
     Permet « titre en haut, CTA en bas ». Les blocks marchands sont rendus en un
     seul `content_for 'blocks'` : impossible d'extraire le CTA pour le placer
     ailleurs dans la grille. On étire donc le contenu et on joue sur les marges.

     Cible : les blocks bouton eux-mêmes (`tag: null` → enfants directs) ou le
     `group-block` qui les rassemble. Sans bouton, `:has()` annule tout : la coche
     ne déplace jamais un bloc de texte par erreur. */
  .ax-hero--split-cta
    .ax-hero__content:has(> :is(.button, .button-secondary, .link, .group-block)) {
    align-self: stretch;
  }

  /* Le contenu conserve SA position verticale (sinon le texte serait toujours
     collé en haut). */
  .ax-hero--split-cta:is(.ax-hero--mobile-top-left, .ax-hero--mobile-top-center, .ax-hero--mobile-top-right) .ax-hero__content { justify-content: flex-start; }
  .ax-hero--split-cta:is(.ax-hero--mobile-middle-left, .ax-hero--mobile-middle-center, .ax-hero--mobile-middle-right) .ax-hero__content { justify-content: center; }
  .ax-hero--split-cta:is(.ax-hero--mobile-bottom-left, .ax-hero--mobile-bottom-center, .ax-hero--mobile-bottom-right) .ax-hero__content { justify-content: flex-end; }

  /* Axe vertical du CTA — classe émise UNIQUEMENT s'il diffère de celui du
     contenu, sinon les marges auto creuseraient un vide entre les deux. */
  .ax-hero--ctav-mobile-top .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { margin-block: 0 auto; }
  .ax-hero--ctav-mobile-middle .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { margin-block: auto; }
  .ax-hero--ctav-mobile-bottom .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { margin-block: auto 0; }

  /* Plusieurs boutons (CTA principal + secondaire) : la marge auto ne doit être
     portée que par celui en BORDURE du groupe. Sinon l'espace libre se répartit
     entre tous et les écarte (mesuré : 174px au lieu des 16px de gap).
       - un bouton précédé d'un autre → pas de marge auto en haut ;
       - un bouton suivi d'un autre   → pas de marge auto en bas. */
  .ax-hero--split-cta .ax-hero__content
    > :is(.button, .button-secondary, .link, .group-block)
    ~ :is(.button, .button-secondary, .link, .group-block) {
    margin-block-start: 0;
  }

  .ax-hero--split-cta .ax-hero__content
    > :is(.button, .button-secondary, .link, .group-block):has(
      ~ :is(.button, .button-secondary, .link, .group-block)
    ) {
    margin-block-end: 0;
  }

  /* CTA demandé au-dessus du texte : il est après lui dans le DOM, on inverse
     donc l'ordre visuel (l'ordre de lecture/tabulation, lui, reste inchangé). */
  .ax-hero--ctafirst-mobile .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { order: -1; }

  /* Axe horizontal du CTA — toujours appliqué (surcharge l'align-items du texte). */
  .ax-hero--ctah-mobile-left .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { align-self: flex-start; }
  .ax-hero--ctah-mobile-center .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { align-self: center; }
  .ax-hero--ctah-mobile-right .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { align-self: flex-end; }

  @media screen and (min-width: 1200px) {
    .ax-hero--split-cta:is(.ax-hero--desktop-top-left, .ax-hero--desktop-top-center, .ax-hero--desktop-top-right) .ax-hero__content { justify-content: flex-start; }
    .ax-hero--split-cta:is(.ax-hero--desktop-middle-left, .ax-hero--desktop-middle-center, .ax-hero--desktop-middle-right) .ax-hero__content { justify-content: center; }
    .ax-hero--split-cta:is(.ax-hero--desktop-bottom-left, .ax-hero--desktop-bottom-center, .ax-hero--desktop-bottom-right) .ax-hero__content { justify-content: flex-end; }

    .ax-hero--ctav-desktop-top .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { margin-block: 0 auto; }
    .ax-hero--ctav-desktop-middle .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { margin-block: auto; }
    .ax-hero--ctav-desktop-bottom .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { margin-block: auto 0; }

    /* Les règles mobile vivent hors media query : sans reset, elles fuiteraient
       sur desktop dès que celui-ci n'émet pas sa propre classe (cas « verticaux
       identiques en desktop, différents en mobile » → la marge auto du mobile
       remontait tout le contenu). On remet donc marges ET ordre à plat avant de
       réappliquer les règles desktop. */
    .ax-hero--split-cta .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) {
      margin-block: 0;
      order: 0;
    }
    .ax-hero--ctafirst-desktop .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { order: -1; }

    .ax-hero--ctah-desktop-left .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { align-self: flex-start; }
    .ax-hero--ctah-desktop-center .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { align-self: center; }
    .ax-hero--ctah-desktop-right .ax-hero__content > :is(.button, .button-secondary, .link, .group-block) { align-self: flex-end; }
  }

  /* Text alignment — peut être différent du placement (ex: contenu collé en bas mais texte centré).
     Cascade vers `*` pour que les Hn nested dans les .text-block suivent le réglage section
     (sinon un text-block centré laisse son h1 aligné à gauche par default). */
  .ax-hero--text-mobile-left .ax-hero__content,
  .ax-hero--text-mobile-left .ax-hero__content * { text-align: left; }
  .ax-hero--text-mobile-left .ax-hero__content { align-items: flex-start; }

  .ax-hero--text-mobile-center .ax-hero__content,
  .ax-hero--text-mobile-center .ax-hero__content * { text-align: center; }
  .ax-hero--text-mobile-center .ax-hero__content { align-items: center; }

  .ax-hero--text-mobile-right .ax-hero__content,
  .ax-hero--text-mobile-right .ax-hero__content * { text-align: right; }
  .ax-hero--text-mobile-right .ax-hero__content { align-items: flex-end; }

  @media screen and (min-width: 1200px) {
    .ax-hero--gap-desktop-normal { --ax-hero-content-gap: var(--gap-lg); }  /* 16px */
    .ax-hero--gap-desktop-large  { --ax-hero-content-gap: var(--gap-2xl); } /* 32px */

    .ax-hero--text-desktop-left .ax-hero__content,
    .ax-hero--text-desktop-left .ax-hero__content * { text-align: left; }
    .ax-hero--text-desktop-left .ax-hero__content { align-items: flex-start; }

    .ax-hero--text-desktop-center .ax-hero__content,
    .ax-hero--text-desktop-center .ax-hero__content * { text-align: center; }
    .ax-hero--text-desktop-center .ax-hero__content { align-items: center; }

    .ax-hero--text-desktop-right .ax-hero__content,
    .ax-hero--text-desktop-right .ax-hero__content * { text-align: right; }
    .ax-hero--text-desktop-right .ax-hero__content { align-items: flex-end; }
  }
/* END_SECTION:ax-hero */

/* START_SECTION:ax-ingredients (INDEX:27) */
.ax-ingredients {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  @media screen and (min-width: 750px) {
    .ax-ingredients {
      gap: var(--gap-40);
    }
  }

  /* ── Onglets (pills) ── */
  .ax-ingredients__tabs {
    display: flex;
    justify-content: center;
    gap: var(--gap-xs);
  }

  .ax-ingredients__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xs) var(--padding-xs);
    border: 2px solid transparent;
    border-radius: var(--style-border-radius-xs);
    background-color: var(--color-neutral-light);
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing), color var(--animation-speed) var(--animation-easing);
  }

  .ax-ingredients__tab--active {
    border-color: var(--color-blue-NM);
    background-color: var(--color-blue-NM);
    color: var(--color-background);
  }

  .ax-ingredients__tab:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  /* ── Grille ── */
  .ax-ingredients__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gap-xs);
    row-gap: var(--gap-24);
  }

  @media screen and (min-width: 750px) {
    .ax-ingredients__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Carte masquée par la pagination client-side */
  .ax-ingredients__card[hidden] {
    display: none;
  }

  .ax-ingredients__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .ax-ingredients__media {
    position: relative;
    aspect-ratio: 167.5 / 140;
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    .ax-ingredients__media {
      aspect-ratio: 314 / 140;
    }
  }

  .ax-ingredients__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Fournisseurs : l'image est un logo → contain (sans crop) sur fond clair */
  .ax-ingredients__panel[data-tab='suppliers'] .ax-ingredients__media {
    background-color: var(--color-background);
  }

  .ax-ingredients__panel[data-tab='suppliers'] .ax-ingredients__image {
    object-fit: contain;
    padding: var(--padding-lg);
  }

  /* Placeholder SVG quand l'ingrédient n'a pas d'image (ni image par défaut) */
  .ax-ingredients__image--placeholder {
    background-color: var(--color-neutral-light);
    fill: var(--color-neutral-lighter);
  }

  .ax-ingredients__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-lg);
    padding: var(--padding-lg);
    background-color: var(--color-neutral-light);
  }

  .ax-ingredients__head {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .ax-ingredients__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: var(--font-size--h4);
    line-height: 1;
    color: var(--color-foreground);
  }

  .ax-ingredients__text {
    font-size: var(--font-size--xs);
    line-height: 1.2;
    color: var(--color-foreground);
  }

  .ax-ingredients__text > * {
    margin: 0;
  }

  /* Truncature "Lire la suite" — clamp par défaut, retiré à l'expand */
  .ax-ingredients__text--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }

  .ax-ingredients__more {
    align-self: flex-start;
    margin-block-start: var(--gap-2xs);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    line-height: 1.2;
    text-decoration: underline;
    cursor: pointer;
  }

  .ax-ingredients__supplier {
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.2;
    color: var(--color-foreground);
  }

  /* ── Cartes fournisseur (centrées + pin) ── */
  .ax-ingredients__body--supplier {
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
  }

  .ax-ingredients__location {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin: 0;
    font-size: var(--font-size--xs);
    line-height: 1.2;
    color: var(--color-foreground);
  }

  .ax-ingredients__location svg {
    width: 1em;
    height: 1em;
  }

  /* Pagination : composant partagé .ax-pagination — styles globaux dans base.css. */
/* END_SECTION:ax-ingredients */

/* START_SECTION:ax-klaviyo-cta (INDEX:28) */
.ax-klaviyo-cta {
    display: flex;
    justify-content: var(--content-align-mobile, center);
  }

  @media screen and (min-width: 750px) {
    .ax-klaviyo-cta {
      justify-content: var(--content-align, center);
    }
  }

  .ax-klaviyo-cta__button {
    width: fit-content;
  }
/* END_SECTION:ax-klaviyo-cta */

/* START_SECTION:ax-media-with-text (INDEX:29) */
/* === Wrapper ============================================================ */
  .ax-mwt__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* === Media (column) ===================================================== */
  .ax-mwt__media {
    position: relative;
    overflow: hidden;
  }

  /* === Ratio image / video — appliqué via classes au wrapper ============== */
  .ax-mwt--ratio-mobile-portrait  .ax-mwt__media { aspect-ratio: 3 / 4; }
  .ax-mwt--ratio-mobile-square    .ax-mwt__media { aspect-ratio: 1 / 1; }
  .ax-mwt--ratio-mobile-landscape .ax-mwt__media { aspect-ratio: 4 / 3; }
  /* adapt = pas d'aspect-ratio → ratio natif de l'image */

  @media screen and (min-width: 1200px) {
    .ax-mwt--ratio-desktop-portrait  .ax-mwt__media { aspect-ratio: 3 / 4; }
    .ax-mwt--ratio-desktop-square    .ax-mwt__media { aspect-ratio: 1 / 1; }
    .ax-mwt--ratio-desktop-landscape .ax-mwt__media { aspect-ratio: 4 / 3; }
    .ax-mwt--ratio-desktop-adapt     .ax-mwt__media { aspect-ratio: auto; }
  }

  .ax-mwt__image,
  .ax-mwt__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Lecteur externe : `<deferred-media>` est un conteneur, pas un média — `object-fit`
     n'y produit aucun effet. On fait donc remplir la zone à l'affiche, au bouton de
     lecture et à l'iframe qui les remplace, pour retrouver le cadrage des autres médias. */
  .ax-mwt__video--external .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .ax-mwt__video--external :is(img, iframe, video) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Mobile : show mobile media, hide desktop */
  .ax-mwt__image--desktop,
  .ax-mwt__video--desktop {
    display: none;
  }

  @media screen and (min-width: 1200px) {
    .ax-mwt__image--mobile,
    .ax-mwt__video--mobile { display: none; }
    .ax-mwt__image--desktop,
    .ax-mwt__video--desktop { display: block; }
  }

  /* === Overlay ============================================================ */
  .ax-mwt__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--ax-mwt-overlay-opacity, 0);
    background-color: var(--ax-mwt-overlay-color, #000);
  }
  .ax-mwt--overlay-gradient-bottom .ax-mwt__overlay {
    background: linear-gradient(to bottom, transparent 0%, var(--ax-mwt-overlay-color, #000) 100%);
  }
  .ax-mwt--overlay-gradient-top .ax-mwt__overlay {
    background: linear-gradient(to top, transparent 0%, var(--ax-mwt-overlay-color, #000) 100%);
  }

  /* === Content (column) ===================================================
     Padding vertical fixe. Padding horizontal différencié selon section_width
     + media_position (cf. media query desktop plus bas).
     flex-direction: column → justify-content gère le placement VERTICAL du
     content-inner (top/center/bottom). */
  .ax-mwt__content {
    display: flex;
    flex-direction: column;
    padding-block: var(--gap-3xl);
    padding-inline: var(--gap-24); /* mobile par defaut, override desktop */
  }

  .ax-mwt__content-inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    width: 100%;
  }

  /* Le block heading utilise .text-block (style theme) pour cascader la taille
     visuelle (h1-h6) sur le tag SEO choisi dans le richtext. On override
     text-align pour qu'il hérite de notre système d'alignement parent. */
  .ax-mwt__heading > * {
    text-align: inherit;
  }
  .ax-mwt__text > * {
    margin: 0;
  }

  /* === Mobile : ordre du media (top/bottom) =============================== */
  @media screen and (max-width: 1199px) {
    .ax-mwt__inner {
      gap: var(--gap-24); /* 24px entre media et content */
    }
    .ax-mwt__media {
      border-radius: var(--style-border-radius-xs);
    }
    .ax-mwt--media-mobile-top .ax-mwt__inner { flex-direction: column; }
    .ax-mwt--media-mobile-bottom .ax-mwt__inner { flex-direction: column-reverse; }

    /* Mobile : pas de padding interne sur le content — le padding-block de la
       section (settings padding-block-*-mobile) gère l'espace extérieur. */
    .ax-mwt__content {
      padding-block: 0;
      padding-inline: 0;
    }
    /* En full-width, le content serait collé aux bords du viewport (pas de
       page-margin sur la section) → on remet le page-margin sur le content. */
    .section--full-width .ax-mwt__content {
      padding-inline: var(--page-margin);
    }

    /* Position contenu verticale mobile (top/center/bottom) */
    .ax-mwt--content-mobile-top    .ax-mwt__content { justify-content: flex-start; }
    .ax-mwt--content-mobile-center .ax-mwt__content { justify-content: center; }
    .ax-mwt--content-mobile-bottom .ax-mwt__content { justify-content: flex-end; }

    /* Alignement horizontal mobile : text-align pour le texte ET align-items
       sur le flex-column pour que les boutons (inline) suivent aussi. */
    .ax-mwt--text-mobile-left .ax-mwt__content-inner   { align-items: flex-start; text-align: left; }
    .ax-mwt--text-mobile-center .ax-mwt__content-inner { align-items: center;     text-align: center; }
    .ax-mwt--text-mobile-right .ax-mwt__content-inner  { align-items: flex-end;   text-align: right; }
  }

  /* === Desktop : 2 cols, media left/right ================================= */
  @media screen and (min-width: 1200px) {
    .ax-mwt__inner {
      flex-direction: row;
      align-items: stretch;
    }
    .ax-mwt--media-desktop-right .ax-mwt__inner {
      flex-direction: row-reverse;
    }

    .ax-mwt__media {
      flex: 0 0 var(--ax-mwt-media-width, 50%);
    }
    .ax-mwt__content {
      flex: 1 1 0;
      min-width: 0;
      /* Padding desktop : full-width = 72 des 2 côtés du content ;
         page-width = 72 uniquement sur le côté media (le côté extérieur est
         déjà géré par le page-margin de la section). */
      padding-inline: var(--gap-4xl); /* default = 72 des 2 côtés (full-width) */
    }

    /* Page-width : padding uniquement sur le côté intérieur (= côté media) */
    .section--page-width.ax-mwt--media-desktop-left .ax-mwt__content {
      padding-inline: var(--gap-4xl) 0;
    }
    .section--page-width.ax-mwt--media-desktop-right .ax-mwt__content {
      padding-inline: 0 var(--gap-4xl);
    }

    /* Position contenu verticale desktop (top/center/bottom) */
    .ax-mwt--content-desktop-top    .ax-mwt__content { justify-content: flex-start; }
    .ax-mwt--content-desktop-center .ax-mwt__content { justify-content: center; }
    .ax-mwt--content-desktop-bottom .ax-mwt__content { justify-content: flex-end; }

    /* Alignement horizontal desktop : text-align + align-items pour les boutons */
    .ax-mwt--text-desktop-left .ax-mwt__content-inner   { align-items: flex-start; text-align: left; }
    .ax-mwt--text-desktop-center .ax-mwt__content-inner { align-items: center;     text-align: center; }
    .ax-mwt--text-desktop-right .ax-mwt__content-inner  { align-items: flex-end;   text-align: right; }
  }
/* END_SECTION:ax-media-with-text */

/* START_SECTION:ax-newsletter (INDEX:30) */
.ax-newsletter {
    position: relative;
  }

  /* Largeur « page » : la bande (fond + contenu) se cale dans la colonne
     centrale au lieu du full-bleed (le fond de .section paint full viewport) */
  .ax-newsletter.section--page-width {
    max-width: var(--full-page-grid-central-column-width);
    margin-inline: auto;
  }

  .ax-newsletter__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .ax-newsletter__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ax-newsletter__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-24);
    width: 100%;
    max-width: 37.5rem;
    margin-inline: auto;
    text-align: center;
  }

  .ax-newsletter .ax-newsletter__title {
    margin: 0;
    line-height: 1;
  }

  .ax-newsletter__text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    width: 100%;
  }

  .ax-newsletter__form-zone {
    width: 100%;
  }

  /* En pleine largeur, l'inner file bord à bord dès que le viewport passe
     sous sa max-width : on préserve les marges de page */
  .ax-newsletter.section--full-width .ax-newsletter__inner {
    max-width: min(37.5rem, calc(100% - var(--page-margin) * 2));
  }

  .ax-newsletter--pos-start .ax-newsletter__inner {
    margin-inline: 0 auto;
  }

  .ax-newsletter--pos-end .ax-newsletter__inner {
    margin-inline: auto 0;
  }

  .ax-newsletter--pos-start.section--full-width .ax-newsletter__inner {
    margin-inline: var(--page-margin) auto;
  }

  .ax-newsletter--pos-end.section--full-width .ax-newsletter__inner {
    margin-inline: auto var(--page-margin);
  }

  .ax-newsletter--text-start .ax-newsletter__inner {
    text-align: start;
  }

  .ax-newsletter--text-end .ax-newsletter__inner {
    text-align: end;
  }

  @media screen and (min-width: 1200px) {
    .ax-newsletter--split .ax-newsletter__inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--gap-3xl);
      max-width: none;
    }

    .ax-newsletter--split.section--full-width .ax-newsletter__inner {
      max-width: none;
      padding-inline: var(--page-margin);
    }

    .ax-newsletter--split .ax-newsletter__text {
      flex: 0 0 var(--ax-newsletter-text-width, 50%);
    }

    .ax-newsletter--split .ax-newsletter__form-zone {
      flex: 1 1 0;
      max-width: 37.5rem;
    }
  }

  .ax-newsletter__description {
    margin: 0;
    font-size: var(--font-size--14);
    line-height: 1.2;
  }

  .ax-newsletter__description > :first-child { margin-block-start: 0; }
  .ax-newsletter__description > :last-child { margin-block-end: 0; }

  .ax-newsletter__klaviyo {
    width: 100%;
  }

  .ax-newsletter__form {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .ax-newsletter__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    width: 100%;
  }

  .ax-newsletter .ax-newsletter__input {
    width: 100%;
    height: 2.875rem;
    padding: 0.75rem 0.375rem 0.75rem 1rem;
    background-color: transparent;
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--style-border-radius-xs);
    color: inherit;
    font-size: var(--font-size--16);
    line-height: 1.2;
    text-align: start;
  }

  .ax-newsletter__submit {
    width: fit-content;
    height: 3rem;
    padding-block: 0;
  }

  .ax-newsletter .ax-newsletter__optin {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    width: 100%;
    margin-block-start: var(--gap-lg);
    text-align: start;
    cursor: pointer;
  }

  .ax-newsletter__checkbox {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    background-color: var(--color-gris-clair);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.6875rem;
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--style-border-radius-xs);
    cursor: pointer;
    transition: background-color var(--animation-values);
  }

  .ax-newsletter__checkbox::after {
    content: none;
  }

  .ax-newsletter__checkbox:checked {
    background-color: var(--color-black);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 7.4 6 10.2 10.8 4.2' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .ax-newsletter__checkbox:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .ax-newsletter__optin-text {
    font-size: var(--font-size--14);
    line-height: 1.2;
  }

  .ax-newsletter__message {
    width: 100%;
    margin: var(--gap-lg) 0 0;
    font-size: var(--font-size--14);
    line-height: 1.2;
  }

  .ax-newsletter__message--error {
    color: var(--color-error);
  }

  .ax-newsletter__message--success {
    color: var(--color-success);
  }

  @media screen and (min-width: 1200px) {
    .ax-newsletter__row {
      flex-direction: row;
      align-items: flex-end;
    }

    .ax-newsletter__input {
      flex: 1 0 0;
    }
  }
/* END_SECTION:ax-newsletter */

/* START_SECTION:ax-nm-club (INDEX:31) */
.ax-nm-club {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }

  .ax-nm-club__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);

    @media screen and (min-width: 1200px) {
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-4xl);
    }
  }

  /* Background spans the entire section width — including the page-margin
     columns when section_width is "page-width". For absolutely-positioned
     grid items, the containing block is the assigned grid area, so without
     grid-column: 1 / -1 the inset:0 would clip the bg to the center column.
     isolation: isolate on .ax-nm-club is critical: it keeps the z-index: -1
     inside the section's stacking context (otherwise the bg goes behind the
     section's color-scheme bg and becomes invisible). */
  .ax-nm-club__background {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    grid-column: 1 / -1;
  }

  .ax-nm-club__background-img,
  .ax-nm-club__background source + img,
  .ax-nm-club__background img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Left column — solid Nm Club blue */
  .ax-nm-club__highlight {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: var(--padding-80);
    background-color: var(--color-blue-CLUB);
    color: var(--color-white);
    border-radius: var(--style-border-radius-xs);

    @media screen and (max-width: 1199px) {
      padding: var(--padding-2xl) var(--padding-lg);
    }
  }

  .ax-nm-club__logo {
    width: fit-content;
    background-color: transparent;
  }

  .ax-nm-club__logo-img {
    display: block;
    width: 7rem;
    height: auto;
  }

  .ax-nm-club__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  .ax-nm-club__title {
    margin: 0;
    color: inherit;
  }

  .ax-nm-club__description {

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

    & > :last-child {
      margin-block-end: 0;
    }
  }

  .ax-nm-club__subtitle,
  .ax-nm-club__description {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h3);
    line-height: var(--line-height--body-tight);
  }

  /* Right column — transparent, lets the section bg image (damier) show through.
     The blue card on the left sits on top of the same bg image. */
  .ax-nm-club__actions {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ax-nm-club__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl);
    width: 100%;
  }

  .ax-nm-club__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  .ax-nm-club__point {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    font-size: var(--font-size--16);
    line-height: var(--line-height--heading-norma);
  }

  .ax-nm-club__point::before {
    content: '';
    flex-shrink: 0;
    /* Width matches the SVG's 22:20 ratio so chevrons render at full height
       without mask-size: contain shrinking them. */
    width: 1.375rem; /* 22px */
    height: 1.25rem; /* 20px */
    background-color: var(--color-white);
    mask-image: var(--icon-triple-chevron-url);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-image: var(--icon-triple-chevron-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
  }

  .ax-nm-club__ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);

    @media screen and (min-width: 1200px) {
      align-items: flex-start;
    }
  }

  /* Force Nm Club blue on the primary CTA — branding constant, decoupled from
     the color_scheme so changing the scheme doesn't break the brand identity. */
  .ax-nm-club__cta-primary {
    --button-background-color: var(--color-blue-CLUB);
    --button-color: var(--color-white);
    --button-border-color: var(--color-blue-CLUB);
  }

  .ax-nm-club__cta-primary:hover {
    --button-background-color: var(--color-blue-NM);
    --button-border-color: var(--color-blue-NM);
    --button-color: var(--color-white);
  }

  /* The shopify-account host is what gets clicked to open the auth popover.
     Inherit the brand color and let the inner span carry the animated underline. */
  .ax-nm-club__login {
    color: inherit;
    cursor: pointer;
  }
/* END_SECTION:ax-nm-club */

/* START_SECTION:ax-product-cross-selling (INDEX:32) */
.ax-product-cross-selling {
    overflow-x: clip;
    row-gap: var(--gap-24);

    @media screen and (max-width: 1199px) {
      row-gap: var(--gap-lg);
    }
  }

  .ax-product-cross-selling__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gap-sm);
  }

  @media screen and (min-width: 1200px) {
    .ax-product-cross-selling__list {
      grid-template-columns: repeat(var(--tiles-count, 2), 1fr);
    }
  }

  @media screen and (max-width: 1199px) {
    .ax-product-cross-selling--mobile-stack .ax-product-cross-selling__list {
      grid-template-columns: 1fr;
    }
    .ax-product-cross-selling--mobile-carousel .ax-product-cross-selling__list {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-margin);
    }
    .ax-product-cross-selling--mobile-carousel .ax-product-cross-selling__tile {
      scroll-snap-align: start;
    }
  }

  .ax-product-cross-selling__tile {
    margin: 0;
    padding: 0;
  }

  .ax-product-cross-selling__tile-inner {
    position: relative;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
    isolation: isolate;
    display: block;
    width: 100%;
  }

  .ax-product-cross-selling--ratio-mobile-square .ax-product-cross-selling__tile-inner { aspect-ratio: 1 / 1; }
  .ax-product-cross-selling--ratio-mobile-portrait .ax-product-cross-selling__tile-inner { aspect-ratio: 3 / 4; }

  @media screen and (min-width: 1200px) {
    .ax-product-cross-selling--ratio-desktop-square .ax-product-cross-selling__tile-inner { aspect-ratio: 1 / 1; }
    .ax-product-cross-selling--ratio-desktop-portrait .ax-product-cross-selling__tile-inner { aspect-ratio: 3 / 4; }
  }

  .ax-product-cross-selling__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .ax-product-cross-selling__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ax-product-cross-selling__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-lg);
    height: 100%;
    padding: var(--gap-24);
    pointer-events: none;
  }

  .ax-product-cross-selling__badge {
    padding: 0.25rem 0.5rem;
    background-color: var(--color-blue-NM);
    color: var(--color-white);
    border-radius: var(--style-border-radius-xs);
    font-family: var(--font-body--family);
    font-size: var(--font-size--14);
    line-height: var(--line-height--body-tight);
  }

  /* Carte toujours ancrée en bas (badge en haut si présent), même sans badge */
  .ax-product-cross-selling__content > .ax-cross-card {
    margin-block-start: auto;
  }

  /* Ré-active les pointer-events que __content désactive (form / select / cart). */
  .ax-product-cross-selling .ax-cross-card {
    pointer-events: auto;
  }
/* END_SECTION:ax-product-cross-selling */

/* START_SECTION:ax-product-focus-apparel (INDEX:33) */
.ax-focus-apparel__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-40);
    align-items: start;

    @media screen and (min-width: 1200px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .ax-focus-apparel__media {
    display: none;
    aspect-ratio: 620 / 526;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
    background-color: var(--color-neutral-light);

    @media screen and (min-width: 1200px) {
      display: block;
    }
  }

  .ax-focus-apparel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ax-focus-apparel__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl);
    min-width: 0;

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

  .ax-focus-apparel__title {
    margin: 0;
  }

  .ax-focus-apparel__accordion {
    display: flex;
    flex-direction: column;
  }

  .ax-focus-apparel__item {
    border-block-start: 1px solid var(--color-border);
    padding-block: var(--gap-lg);
    scroll-margin-block-start: calc(
      var(--header-group-height, var(--header-height, 3.5rem)) + var(--gap-lg)
    );
  }

  .ax-focus-apparel__item:last-child {
    border-block-end: 1px solid var(--color-border);
  }

  .ax-focus-apparel__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding: 0;
    cursor: pointer;
    list-style: none;
  }

  .ax-focus-apparel__summary::-webkit-details-marker { display: none; }
  .ax-focus-apparel__summary::marker { content: ''; }

  .ax-focus-apparel__item-title {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--h4);
    line-height: 1;
    color: var(--color-foreground);
  }

  .ax-focus-apparel__reviews-head {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .ax-focus-apparel__reviews-meta .product-rating__count {
    text-decoration: underline;
  }

  .ax-focus-apparel__caret {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5625rem;
    height: 1.5625rem;
    color: var(--color-foreground);
    transition: transform var(--animation-values);
  }

  .ax-focus-apparel__caret svg { width: 1.125rem; height: 1.125rem; }

  .ax-focus-apparel__item[open] .ax-focus-apparel__caret {
    transform: rotate(180deg);
  }

  .ax-focus-apparel__item-content {
    padding-block-start: var(--gap-lg);
    font-size: var(--font-size--14);
    line-height: var(--line-height--body-tight);
  }

  .ax-focus-apparel__item-content.rte ul {
    margin: 0;
    padding-inline-start: 1.3125rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-focus-apparel__caret { transition: none; }
  }
/* END_SECTION:ax-product-focus-apparel */

/* START_SECTION:ax-product-focus (INDEX:34) */
.ax-product-focus-section {
		background-color: var(--color-neutral-light);
	}

	.ax-product-focus {
		display: block;
		container-type: inline-size;
		margin-inline: auto;

		/* #header-group est sticky : sans cette marge les ancres (la section
		   elle-même comme chaque accordéon) se calent sous le header. */
		--ax-product-focus-anchor-offset: calc(
			var(--header-group-height, var(--header-height, 3.5rem)) + var(--gap-lg)
		);

		scroll-margin-block-start: var(--ax-product-focus-anchor-offset);
	}

	.ax-product-focus__heading {
		max-width: 45rem;
		margin: 0 auto var(--margin-xl);
		font-family: var(--font-heading--family);
		font-size: var(--font-size--h2);
		font-weight: var(--font-heading--weight);
		line-height: var(--line-height--heading-tight);
		text-align: center;
		text-wrap: balance;
		color: var(--color-foreground-heading);
	}

	.ax-product-focus__list {
		max-width: 45rem;
		list-style: none;
		margin:  auto;
		padding: 0;
		display: flex;
		flex-direction: column;
	}

	.ax-product-focus__item {
		border-block-start: 1px solid var(--color-border, var(--color-neutral-light));
	}

	.ax-product-focus__item:last-child {
		border-block-end: 1px solid var(--color-border, var(--color-neutral-light));
	}

	/* Accordéon avis en attente de l'API (métafields Reviews.io absents) : le
	   `display: block` ci-dessous neutralise l'attribut `hidden` du navigateur
	   ([hidden] est à égalité de spécificité et perd à la cascade) — on le rétablit. */
	.ax-product-focus__details--reviews[hidden] {
		display: none;
	}

	.ax-product-focus__details {
		display: block;
		scroll-margin-block-start: var(--ax-product-focus-anchor-offset);
	}

	.ax-product-focus__summary {
		display: flex;
		align-items: center;
		gap: var(--gap-md);
		padding-block: var(--padding-lg);
		cursor: pointer;
		font-family: var(--font-heading--family);
		font-size: var(--font-size--md);
		font-weight: var(--font-heading--weight);
		color: var(--color-foreground-heading);
		list-style: none;
	}

	.ax-product-focus__summary::-webkit-details-marker {
		display: none;
	}

	.ax-product-focus__summary-label {
		flex: 1 1 auto;
	}

	.ax-product-focus__summary-rating {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		font-family: var(--font-body--family);
		font-weight: normal;
	}

	.ax-product-focus__caret {
		flex: 0 0 auto;
		display: inline-flex;
		transition: transform var(--animation-speed) var(--animation-easing);
	}

	.ax-product-focus__details[open] .ax-product-focus__caret {
		transform: rotate(180deg);
	}

	.ax-product-focus__content {
		padding-block-end: var(--padding-lg);
		display: flex;
		flex-direction: column;
		gap: var(--gap-lg);
	}

	.ax-product-focus__block {
		display: flex;
		flex-direction: column;
		gap: var(--gap-md);
	}

	.ax-product-focus__block-title {
		margin: 0;
		font-family: var(--font-heading--family);
		font-size: var(--font-size--lg);
		font-weight: var(--font-heading--weight);
		line-height: var(--line-height--heading-tight);
		color: var(--color-foreground-heading);
	}

	.ax-product-focus__rte {
		font-size: var(--font-size--paragraph);
		line-height: var(--line-height--body-loose);
		color: var(--color-foreground);
	}

	.ax-product-focus__rte > *:first-child {
		margin-block-start: 0;
	}

	.ax-product-focus__rte > *:last-child {
		margin-block-end: 0;
	}

	/* Description: tag pills */
	.ax-product-focus__tags {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap-2xs);
	}

	.ax-product-focus__tag {
		padding: var(--padding-xs) var(--padding-md);
		border-radius: var(--style-border-radius-xs);
		font-size: var(--font-size--sm);
		background: var(--color-gris-clair, transparent);
	}

	/* Description: media */
	.ax-product-focus__media {
		margin-block-start: var(--margin-sm);
	}

	.ax-product-focus__media-image,
	.ax-product-focus__media-video {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--style-border-radius-md);
	}

	/* Certifs: documents list */
	.ax-product-focus__docs {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--gap-xs);
	}

	.ax-product-focus__doc-link {
		display: inline-flex;
		align-items: center;
		gap: var(--gap-xs);
		font-size: var(--font-size--sm);
		color: var(--color-foreground);
		text-decoration: none;
	}

	.ax-product-focus__doc-link:hover {
		text-decoration: underline;
	}

	.ax-product-focus__doc-icon {
		flex: 0 0 auto;
		display: inline-flex;
		width: var(--icon-size-xs, 1rem);
		height: var(--icon-size-xs, 1rem);
	}

	.ax-product-focus__certifs-modal-trigger {
		margin-block-start: var(--margin-sm);
		padding: 0;
		background: none;
		border: 0;
		font-family: inherit;
		font-size: var(--font-size--sm);
		font-weight: var(--font-heading--weight);
		color: var(--color-foreground);
		text-decoration: underline;
		text-underline-offset: 4px;
		cursor: pointer;
	}

	/* Composition: flavor selector + per-flavor content */
	.ax-product-focus__flavor {
		display: flex;
		flex-direction: column;
		gap: var(--gap-md);
	}

	.ax-product-focus__flavor-select-wrap,
	.ax-product-focus__table-select-wrap {
		position: relative;
		display: inline-flex;
		max-width: 100%;
		width: fit-content;
		margin-bottom: 1rem;
	}

	.ax-product-focus__flavor-select,
	.ax-product-focus__table-select {
		appearance: none;
		background: var(--color-gris-clair);
		border: 0;
		border-radius: var(--style-border-radius-xs);
		padding: var(--padding-sm) calc(var(--padding-3xl) + var(--padding-xs)) var(--padding-sm) var(--padding-lg);
		font-family: var(--font-heading--family);
		font-size: var(--font-size--md);
		color: var(--color-foreground);
		cursor: pointer;
		max-width: 100%;
	}

	.ax-product-focus__flavor-select:focus-visible,
	.ax-product-focus__table-select:focus-visible {
		outline: 2px solid var(--color-focus, currentColor);
		outline-offset: 2px;
	}

	.ax-product-focus__flavor-select-caret {
		position: absolute;
		inset-inline-end: var(--padding-md);
		top: 50%;
		transform: translateY(-50%);
		display: inline-flex;
		pointer-events: none;
		color: var(--color-foreground);
	}

	.ax-product-focus__flavor-content {
		font-size: var(--font-size--paragraph);
		line-height: var(--line-height--body-loose);
	}

	.ax-product-focus__flavor-content > *:first-child {
		margin-block-start: 0;
	}

	.ax-product-focus__flavor-content > *:last-child {
		margin-block-end: 0;
	}

	.ax-product-focus__flavor-content[hidden] {
		display: none;
	}

	/* Composition: ingredients carousel */
	.ax-product-focus__ingredients {
		display: block;
		width: 100%;
		overflow: hidden;
	}

	/* Mobile only — allow neighbour slides to peek beyond the page-width container */
	@media screen and (max-width: 749px) {
		.ax-product-focus__ingredients::part(container) {
			overflow: visible;
		}
	}

	/* Pre-init fallback so the section doesn't jump on hydration */
	.ax-product-focus__ingredients[init='false'] {
		display: flex;
		gap: var(--gap-md);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ax-product-focus__ingredients[init='false']::-webkit-scrollbar {
		display: none;
	}

	.ax-product-focus__ingredients[init='false'] .ax-product-focus__ingredient {
		flex: 0 0 auto;
		scroll-snap-align: center;
		inline-size: 60%;

		@media screen and (min-width: 750px) {
			inline-size: calc((100% - 2 * var(--gap-md)) / 3);
		}
	}

	.ax-product-focus__ingredient {
		display: flex;
		flex-direction: column;
		gap: var(--gap-xs);
		padding: var(--padding-md);
		background: white;
		border: 1px solid transparent;
		border-radius: var(--style-border-radius-md);
		height: auto;
		box-sizing: border-box;
		transition: border-color var(--animation-speed) var(--animation-easing);
	}

	/* La sélection ne se marque QUE par la bordure : les autres tuiles restent
	   pleinement lisibles. Un grisage les faisait passer pour « non disponibles »
	   ou « non incluses » dans la formule (retour client). */
	.ax-product-focus__ingredients .ax-product-focus__ingredient.is-selected {
		border: 1px solid var(--color-black, #000);
	}

	/* Sans carrousel, toutes les tuiles sont lisibles et aucune n'est « sélectionnée »
	   (le JS ne pose pas `is-selected` dans ce mode ; la règle double la spécificité
	   de l'état sélectionné par sécurité). */
	@media screen and (max-width: 749px) {
		.ax-product-focus__ingredients--static-mobile .ax-product-focus__ingredient,
		.ax-product-focus__ingredients--static-mobile .ax-product-focus__ingredient.is-selected {
			border-color: transparent;
		}
	}

	@media screen and (min-width: 750px) {
		.ax-product-focus__ingredients--static-desktop .ax-product-focus__ingredient,
		.ax-product-focus__ingredients--static-desktop .ax-product-focus__ingredient.is-selected {
			border-color: transparent;
		}
	}

	/* Pagination dots */
	.ax-product-focus__ingredients::part(pagination) {
		margin-block-start: var(--gap-lg);
		position: relative;
	}

	.ax-product-focus__ingredients::part(bullet),
	.ax-product-focus__ingredients::part(bullet-active) {
		background-color: var(--color-black, #000);
	}

	.ax-product-focus__ingredient-image {
		width: auto;
		aspect-ratio: 2 / 1.5;
		margin-block-start: calc(var(--padding-md) * -1);
		margin-inline: calc(var(--padding-md) * -1);
		margin-block-end: var(--gap-sm);
		overflow: hidden;
		border-start-start-radius: var(--style-border-radius-md);
		border-start-end-radius: var(--style-border-radius-md);
	}

	.ax-product-focus__ingredient-image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ax-product-focus__ingredient-link {
		display: contents;
		text-decoration: none;
		color: inherit;
		cursor: pointer;
	}

	.ax-product-focus__ingredient-link:hover .ax-product-focus__ingredient-image img {
		transform: scale(1.04);
		transition: transform calc(var(--animation-speed) * 1.5) var(--animation-easing);
	}

	.ax-product-focus__ingredient-image img {
		transition: transform calc(var(--animation-speed) * 1.5) var(--animation-easing);
	}

	.ax-product-focus__ingredient-title {
		margin: 0;
		font-family: var(--font-heading--family);
		font-size: var(--font-size--xs);
		font-weight: var(--font-heading--weight);
	}

	.ax-product-focus__ingredient-text, 
	.ax-product-focus__ingredient-toggle {
		font-size: var(--font-size--xs);
		line-height: normal;
	}

	.ax-product-focus__ingredient-text[data-collapsed='true'] {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.ax-product-focus__ingredient-toggle {
		align-self: flex-start;
		padding: 0;
		background: none;
		border: 0;
		font-family: inherit;
		color: var(--color-foreground);
		text-decoration: underline;
		text-underline-offset: 2px;
		cursor: pointer;
	}

	.ax-product-focus__ingredient-toggle:focus-visible {
		outline: 2px solid var(--color-focus, currentColor);
		outline-offset: 2px;
	}

	/* Composition: tables */
	.ax-product-focus__composition-table-title {
		margin: 0;
		font-size: var(--font-size--sm);
		font-weight: var(--font-heading--weight);
		color: var(--color-foreground);
	}

	.ax-product-focus__table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--font-size--sm);
	}

	.ax-product-focus__table tbody tr:nth-child(odd) {
		background-color: var(--color-gris-clair);
	}

	.ax-product-focus__table th,
	.ax-product-focus__table td {
		padding: var(--padding-sm) var(--padding-xs);
		text-align: start;
		vertical-align: top;
	}

	.ax-product-focus__table th {
		font-weight: var(--font-heading--weight);
		color: var(--color-foreground-heading);
	}

	.ax-product-focus__table td {
		text-align: end;
	}

	.ax-product-focus__table-subhead,
	.ax-product-focus__table-subvalue {
		display: block;
		font-size: var(--font-size--xs);
		font-weight: normal;
		color: var(--color-foreground-muted, var(--color-neutral));
	}

	.ax-product-focus__table-info {
		margin-block-start: var(--margin-sm);
		font-size: var(--font-size--xs);
		color: var(--color-foreground-muted, var(--color-neutral));
	}

	.ax-product-focus__table-file {
		margin-block-start: var(--margin-sm);
	}

	/* Transparency: numbered items + image */
	.ax-product-focus__transparency-logos {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap-md);
		align-items: center;
	}

	.ax-product-focus__transparency-logos img {
		max-height: 5rem;
		width: auto;
	}

	.ax-product-focus__transparency-items {
		display: grid;
		gap: var(--gap-lg);

		@container (min-width: 700px) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		}
	}

	.ax-product-focus__transparency-items-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--gap-lg);
	}

	.ax-product-focus__transparency-item {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--gap-md);
		align-items: start;
	}

	.ax-product-focus__transparency-item-nb {
		width: 1.5rem;
		height: 1.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--color-blue-NM);
		color: var(--color-white);
		border-radius: var(--style-border-radius-xs);
		font-family: var(--font-heading--family);
		font-weight: 300;
	}

	.ax-product-focus__transparency-item-body {
		display: flex;
		flex-direction: column;
		gap: var(--gap-xs);
	}

	.ax-product-focus__transparency-item-title {
		margin: 0;
		font-family: var(--font-heading--family);
		font-size: var(--font-size--md);
		font-weight: var(--font-heading--weight);
	}

	.ax-product-focus__transparency-item-subtitle {
		margin: 0;
		font-size: var(--font-size--xs);
		font-style: italic;
		color: var(--color-foreground-muted, var(--color-neutral));
	}

	.ax-product-focus__transparency-image {
		/* Axome - image au-dessus de la liste sur mobile, à droite sur desktop */
		order: -1;

		@container (min-width: 700px) {
			order: 0;
		}
	}

	.ax-product-focus__transparency-image img {
		width: 100%;
		height: auto;
		border-radius: var(--style-border-radius-md);
	}

	/* Axome - toggle desktop/mobile : on cible directement l'img portant la classe,
	   sinon `.transparency-image img` (0,1,1) écrase ces règles (0,1,0) → les 2 images s'affichent */
	img.ax-product-focus__transparency-image-mobile,
	img.ax-product-focus__transparency-image-both {
		display: block;
	}

	img.ax-product-focus__transparency-image-desktop {
		display: none;
	}

	@media screen and (min-width: 750px) {
		img.ax-product-focus__transparency-image-mobile {
			display: none;
		}
		img.ax-product-focus__transparency-image-desktop {
			display: block;
		}
	}

	/* Scientific references */
	.ax-product-focus__sci-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--gap-lg);
	}

	.ax-product-focus__sci-item {
		display: grid;
		gap: var(--gap-md);

		@container (min-width: 600px) {
			grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		}
	}

	.ax-product-focus__sci-item--full {
		grid-template-columns: 1fr;
	}

	.ax-product-focus__sci-item-body {
		display: flex;
		flex-direction: column;
		gap: var(--gap-sm);
	}

	.ax-product-focus__sci-item-image img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--style-border-radius-md);
	}

	/* L'animation porte sur le <dialog> lui-même : la faire porter par un enfant
	   désynchronise le fond (immobile) du contenu (mobile). */
	.ax-product-focus__certifs-modal {
		padding: 0;
		border: 0;
		max-width: 36rem;
		width: 100%;
		max-height: 100dvh;
		margin: 0 0 0 auto;
		background: var(--color-background);
		color: var(--color-foreground);
		translate: 100% 0;

		/* `display` + `overlay` en allow-discrete gardent le dialog dans le top layer
		   le temps de l'animation de fermeture. */
		transition: translate var(--animation-speed-extra-slow) var(--animation-timing-default),
			display var(--animation-speed-extra-slow) var(--animation-timing-default) allow-discrete,
			overlay var(--animation-speed-extra-slow) var(--animation-timing-default) allow-discrete;
	}

	.ax-product-focus__certifs-modal[open] {
		translate: 0 0;
	}

	@starting-style {
		.ax-product-focus__certifs-modal[open] {
			translate: 100% 0;
		}
	}

	.ax-product-focus__certifs-modal::backdrop {
		background: rgb(0 0 0 / 0%);
		transition: background var(--animation-speed-extra-slow) var(--animation-easing),
			display var(--animation-speed-extra-slow) var(--animation-easing) allow-discrete,
			overlay var(--animation-speed-extra-slow) var(--animation-easing) allow-discrete;
	}

	.ax-product-focus__certifs-modal[open]::backdrop {
		background: rgb(0 0 0 / 50%);
	}

	@starting-style {
		.ax-product-focus__certifs-modal[open]::backdrop {
			background: rgb(0 0 0 / 0%);
		}
	}

	.ax-product-focus__certifs-modal-panel {
		padding: var(--padding-xl);
		overflow-y: auto;
		max-height: 100dvh;
	}

	@media (prefers-reduced-motion: reduce) {
		.ax-product-focus__certifs-modal,
		.ax-product-focus__certifs-modal::backdrop {
			transition: none;
		}

		.ax-product-focus__certifs-modal[open] {
			translate: 0 0;
		}
	}

	.ax-product-focus__certifs-modal-docs + .ax-product-focus__certifs-modal-content {
		margin-block-start: var(--margin-lg);
	}

	.ax-product-focus__certifs-modal-close {
		position: absolute;
		top: var(--padding-md);
		inset-inline-end: var(--padding-md);
		background: none;
		border: 0;
		padding: var(--padding-xs);
		cursor: pointer;
		color: var(--color-foreground);
	}

	.ax-product-focus__certifs-modal-title {
		margin: 0 0 var(--margin-lg);
		font-family: var(--font-heading--family);
		font-size: var(--font-size--h3);
		font-weight: var(--font-heading--weight);
	}

	.ax-product-focus__certifs-modal-content {
		font-size: var(--font-size--paragraph);
		line-height: var(--line-height--body-loose);
	}

	/* Reviews summary row */
	.ax-product-focus__details--reviews .product-rating {
		display: flex;
		align-items: center;
		gap: var(--padding-2xs);
	}

	/* Reviews widget container inside accordion needs some breathing room */
	.ax-product-focus__details--reviews .reviews-io-widget {
		display: block;
		min-height: 4rem;
	}
/* END_SECTION:ax-product-focus */

/* START_SECTION:ax-product-push (INDEX:35) */
.ax-product-push {
    overflow-x: clip;
    row-gap: var(--gap-24);
  }

  .ax-product-push__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  /* Le titre hérite d'un margin-block-end de la classe .hN du thème : on le
     neutralise pour ne garder que le gap flex (16px iso-maquette). */
  .ax-product-push__title {
    margin: 0;
  }

  .ax-product-push__description {
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-normal);
  }

  .ax-product-push__description > :first-child { margin-block-start: 0; }
  .ax-product-push__description > :last-child { margin-block-end: 0; }

  .ax-product-push__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gap-xs);
  }

  @media screen and (min-width: 1200px) {
    .ax-product-push__list {
      grid-template-columns: repeat(var(--tiles-count, 4), minmax(0, 1fr));
    }

    /* Plus de tuiles que de colonnes : la rangée devient un carousel scroll-snap,
       les tuiles gardent la largeur qu'elles auraient dans la grille statique. */
    .ax-product-push--carousel .ax-product-push__list {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: calc(
        (100% - var(--gap-xs) * (var(--tiles-count, 4) - 1)) / var(--tiles-count, 4)
      );
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .ax-product-push--carousel .ax-product-push__list::-webkit-scrollbar {
      display: none;
    }

    .ax-product-push--carousel .ax-product-push__tile {
      scroll-snap-align: start;
    }
  }

  .ax-product-push__arrows {
    display: flex;
    justify-content: flex-end;
    gap: var(--padding-xs);

    .slideshow-control {
      position: static;
      margin: 0;
      animation: none !important;
      pointer-events: auto;
      opacity: 1;
    }
  }

  @media screen and (max-width: 1199px) {
    .ax-product-push--mobile-stack .ax-product-push__list {
      grid-template-columns: 1fr;
    }
    .ax-product-push--mobile-carousel .ax-product-push__list {
      /* Full-bleed : le carousel sort des marges de page (iso-maquette),
         seul le header reste dans la colonne centrale. */
      grid-column: 1 / -1;
      padding-inline: var(--page-margin);
      grid-auto-flow: column;
      /* 1,5 tuile visible : la moitié de la suivante dépasse (aperçu iso-maquette). */
      grid-auto-columns: calc((100% - var(--gap-xs) * 0.5) / 1.5);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-margin);
      /* Scrollbar masquée (iso-maquette) — le scroll reste fonctionnel. */
      scrollbar-width: none;
    }

    .ax-product-push--mobile-carousel .ax-product-push__list::-webkit-scrollbar {
      display: none;
    }
    .ax-product-push--mobile-carousel .ax-product-push__tile {
      scroll-snap-align: start;
    }
  }

  .ax-product-push__tile {
    margin: 0;
    padding: 0;
  }

  .ax-product-push__tile-inner {
    position: relative;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
    isolation: isolate;
    display: block;
    width: 100%;
    aspect-ratio: var(--tile-ratio-mobile, 78 / 101);

    @media screen and (min-width: 1200px) {
      aspect-ratio: var(--tile-ratio, 78 / 101);
    }
  }

  .ax-product-push__tile-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-indent: -9999px;
    overflow: hidden;
  }

  .ax-product-push__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .ax-product-push__image,
  .ax-product-push__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Overlay gradient haut→bas — couleur + opacité pilotées par tuile (0 = aucun overlay). */
  .ax-product-push__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(
      180deg,
      var(--ax-push-overlay-color, #000) 0%,
      transparent 100%
    );
    opacity: var(--ax-push-overlay-opacity, 0.4);
    pointer-events: none;
  }

  .ax-product-push__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-lg);
    height: 100%;
    padding: var(--padding-lg);
    pointer-events: none;
  }

  /* La carte produit reste ancrée en bas même sans titre/description au-dessus
     (sinon `space-between` colle une carte seule en haut de la tuile). */
  .ax-product-push__content > .ax-product-push-card {
    margin-block-start: auto;
  }

  /* Contenu groupé (bas ou milieu) : titre, description et carte se suivent au lieu
     d'être écartés aux deux extrémités. La marge automatique de la carte doit sauter,
     sinon elle continuerait de repousser le texte vers le haut. */
  .ax-product-push--content-bottom .ax-product-push__content {
    justify-content: flex-end;
  }

  .ax-product-push--content-center .ax-product-push__content {
    justify-content: center;
  }

  :is(.ax-product-push--content-bottom, .ax-product-push--content-center)
    .ax-product-push__content
    > .ax-product-push-card {
    margin-block-start: 0;
  }

  /* `align-items` place les enfants (dont le badge, une pill de largeur naturelle) et
     `text-align` gère le retour à la ligne des textes longs : les deux sont nécessaires. */
  .ax-product-push__heading {
    display: flex;
    flex-direction: column;
    align-items: var(--tile-text-align-items, flex-start);
    gap: var(--gap-sm);
    text-align: var(--tile-text-align, start);
  }

  .ax-product-push__tile-title {
    margin: 0;
    color: var(--ax-push-text-color, var(--color-foreground));
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h3);
    font-weight: var(--font-heading--weight);
    line-height: 1;
  }

  .ax-product-push__tile-description {
    margin: 0;
    color: var(--ax-push-text-color, var(--color-foreground));
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-normal);
  }

  /* Badge promo richtext : chaque paragraphe = une "pastille" bleu NM empilée
     (iso-maquette : deux boîtes bleues, gras possible via <strong>, saut de ligne
     = nouveau paragraphe). */
  .ax-product-push__badge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-3xs);
  }

  .ax-product-push__badge p {
    margin: 0;
    display: inline-block;
    width: fit-content;
    padding: var(--gap-3xs) var(--padding-2xs);
    background-color: var(--color-blue-NM);
    color: var(--color-white);
    font-family: var(--font-body--family);
    font-size: var(--font-size--h4);
    line-height: var(--line-height--body-tight);
  }

  .ax-product-push__badge strong { font-weight: var(--font-heading--weight); }

  /* La carte gère ses propres interactions (panier) que __content désactive. */
  .ax-product-push-card {
    pointer-events: auto;
  }
/* END_SECTION:ax-product-push */

/* START_SECTION:ax-product-recommendations (INDEX:36) */
ax-product-recommendations {
    /* Note: .section class wins on `display: grid` (3-col template:
       page-margin / content / page-margin). Our `display: flex` here is
       overridden — that's fine, `row-gap` works on grids too.
       Use row-gap (NOT gap shorthand) so the 24px applies between rows only,
       not between the section's grid columns (which would add 24px gutters). */
    row-gap: var(--gap-24);
    width: 100%;
    overflow-x: clip;
  }

  ax-product-recommendations[hidden] {
    display: none;
  }

  .ax-product-recommendations__header {
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm);
  }

  .ax-product-recommendations__content {
    position: relative;
  }

  .ax-product-recommendations__products {
    position: relative;
    container-type: inline-size;
    container-name: ax-recommendations-carousel;
  }

  .ax-product-recommendations__grid {
    width: 100%;
  }

  .ax-product-recommendations__carousel {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    container-type: inline-size;
    container-name: ax-recommendations-carousel;
  }

  .ax-product-recommendations__swiper {
    order: 0;
    --swiper-theme-color: currentColor;
    display: block;
    width: 100%;
    margin-block: -16px;
    padding-block: 16px;
  }

  /* Hide swiper until programmatic init swaps the fallback in */
  .ax-product-recommendations__swiper[init='false'] {
    display: none;
  }

  /* SSR fallback — pixel-mirrors the swiper layout to avoid FOUC on init */
  .ax-product-recommendations__fallback {
    display: flex;
    width: 100%;
    gap: var(--resource-list-column-gap-mobile, var(--resource-list-column-gap-desktop, 16px));
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    margin-block: -16px;
    padding-block: 16px;

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

    @media screen and (min-width: 750px) {
      gap: var(--resource-list-column-gap-desktop, 16px);
    }
  }

  /* Slide width formula — matches what Swiper computes once initialised */
  @container ax-recommendations-carousel (max-width: 749px) {
    .ax-product-recommendations__fallback > .ax-product-recommendations__slide,
    .ax-product-recommendations__swiper swiper-slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container ax-recommendations-carousel (min-width: 750px) {
    .ax-product-recommendations__fallback > .ax-product-recommendations__slide,
    .ax-product-recommendations__swiper swiper-slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap-desktop) * (var(--column-count) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .ax-product-recommendations__fallback > .ax-product-recommendations__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  .ax-product-recommendations__swiper swiper-slide {
    width: var(--slide-width);
    height: auto;
    flex-shrink: 0;
    box-sizing: border-box;
    /* Stretch the slide content so all cards align to the tallest sibling. */
    display: flex;
    align-items: stretch;
  }

  .ax-product-recommendations__swiper swiper-slide > .ax-product-recommendations__slide {
    width: 100%;
    display: flex;
  }

  /* Cards inside slides fill the slide height — gives a clean baseline row */
  .ax-product-recommendations__swiper swiper-slide .ax-product-card {
    flex: 1;
  }

  /* Swiper's internal shadow .swiper has overflow:hidden by default — when peek
     is active we want slides to extend past the host edge, so we override.
     In no-peek desktop mode we leave the default clip so slides don't bleed. */
  ax-product-recommendations:not(.ax-product-recommendations--no-peek)
    .ax-product-recommendations__swiper::part(container) {
    overflow: visible;
  }

  @media screen and (max-width: 749px) {
    .ax-product-recommendations__swiper::part(container) {
      overflow: visible;
    }
  }

  /* No-peek desktop: carousel stays within page-width, swiper has no peek room */
  @media screen and (min-width: 750px) {
    .ax-product-recommendations--no-peek {
      .ax-product-recommendations__carousel {
        width: 100%;
        margin-inline: 0;
      }

      .ax-product-recommendations__swiper,
      .ax-product-recommendations__fallback {
        --peek-next-slide-size: 0px;
        padding-inline: 0;
        scroll-padding-inline: 0;
      }
    }
  }

  /* Peek active: __content breaks out to full grid so carousel goes edge-to-edge */
  ax-product-recommendations:not(.ax-product-recommendations--no-peek) > .ax-product-recommendations__content {
    grid-column: 1 / -1;
  }

  /* Peek active: swiper inherits page margin as padding (exposing next slide).
     scroll-padding-inline must mirror padding-inline — otherwise the SSR fallback's
     scroll-snap auto-scrolls past the leading padding on first paint (FOUC). */
  ax-product-recommendations:not(.ax-product-recommendations--no-peek) .ax-product-recommendations__swiper,
  ax-product-recommendations:not(.ax-product-recommendations--no-peek) .ax-product-recommendations__fallback {
    padding-inline: var(--page-margin);
    scroll-padding-inline: var(--page-margin);
  }

  /* Mobile: always full-bleed with internal page-margin padding (regardless of peek) */
  @media screen and (max-width: 749px) {
    .ax-product-recommendations__content {
      grid-column: 1 / -1;
    }

    .ax-product-recommendations__swiper,
    .ax-product-recommendations__fallback {
      padding-inline: var(--page-margin);
      scroll-padding-inline: var(--page-margin);
    }
  }
/* END_SECTION:ax-product-recommendations */

/* START_SECTION:ax-product-tiles (INDEX:37) */
.ax-product-tiles {
    overflow-x: clip;
    row-gap: var(--gap-24);

    @media screen and (max-width: 1199px) {
      row-gap: var(--gap-lg);
    }
  }

  .ax-product-tiles__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gap-sm);
  }

  @media screen and (min-width: 1200px) {
    .ax-product-tiles__list {
      grid-template-columns: repeat(var(--tiles-count, 2), 1fr);
    }
  }

  @media screen and (max-width: 1199px) {
    .ax-product-tiles--mobile-stack .ax-product-tiles__list {
      grid-template-columns: 1fr;
    }
    .ax-product-tiles--mobile-carousel .ax-product-tiles__list {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-margin);
    }
    .ax-product-tiles--mobile-carousel .ax-product-tiles__tile {
      scroll-snap-align: start;
    }
  }

  .ax-product-tiles__tile {
    margin: 0;
    padding: 0;
  }

  .ax-product-tiles__tile-inner {
    position: relative;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
    isolation: isolate;
    display: block;
    width: 100%;
  }

  .ax-product-tiles--ratio-mobile-square .ax-product-tiles__tile-inner { aspect-ratio: 1 / 1; }
  .ax-product-tiles--ratio-mobile-portrait .ax-product-tiles__tile-inner { aspect-ratio: 3 / 4; }

  @media screen and (min-width: 1200px) {
    .ax-product-tiles--ratio-desktop-square .ax-product-tiles__tile-inner { aspect-ratio: 1 / 1; }
    .ax-product-tiles--ratio-desktop-portrait .ax-product-tiles__tile-inner { aspect-ratio: 3 / 4; }
  }

  .ax-product-tiles__tile-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-indent: -9999px;
    overflow: hidden;
  }

  .ax-product-tiles__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .ax-product-tiles__image,
  .ax-product-tiles__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ax-product-tiles__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgb(0 0 0 / var(--opacity-20));
    pointer-events: none;
  }

  .ax-product-tiles__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-lg);
    height: 100%;
    padding: var(--gap-40);
    pointer-events: none;

    @media screen and (max-width: 1199px) {
      padding: var(--padding-lg);
    }
  }

  /* Carte produit ancrée en bas même sans titre/contenu au-dessus (sinon
     space-between colle une carte seule en haut de la tuile). */
  .ax-product-tiles__content > .ax-product-card-mini {
    margin-block-start: auto;
  }

  .ax-product-tiles__content .ax-product-card-mini__info {
    gap: var(--gap-xs);

    @media screen and (max-width: 1199px) {
      gap: 0;
    }
  }

  .ax-product-tiles__heading {
    display: flex;
    align-items: start;
    flex-wrap: nowrap;
    gap: var(--gap-lg);
  }

  .ax-product-tiles__tile-title {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h3);
    font-weight: var(--font-heading--weight);
    line-height: 1;
    min-width: 0;
  }
  
  .ax-product-tiles__badge {
    padding: 0.375rem 0.75rem;
    background-color: var(--color-blue-NM);
    color: var(--color-white);
    border-radius: var(--style-border-radius-xs);
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h4);
    font-weight: var(--font-heading--weight);
    line-height: 1;
    white-space: nowrap;
  }

  /* Re-enable pointer-events que __content désactive (pour cart + details). */
  .ax-product-card-mini--lg {
    pointer-events: auto;
  }
/* END_SECTION:ax-product-tiles */

/* START_SECTION:ax-reveal-cards (INDEX:40) */
.ax-reveal-cards {
    --ax-rc-card-min-height: 370px; /* iso-maquette — pas de var globale équivalente */
    row-gap: var(--gap-24);
  }

  /* Interpolation des keywords (height: 0 ↔ auto animable) — desktop uniquement
     pour éviter le layout loop infini avec Swiper en mobile. */
  @media screen and (min-width: 1200px) {
    .ax-reveal-cards {
      interpolate-size: allow-keywords;
    }
    .ax-reveal-cards__content {
      padding: var(--padding-lg);
    }
  }

  /* Header section (heading + text) */
  .ax-reveal-cards__header {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-24);
  }

  /* Largeur max du paragraphe text : narrow=~600px / normal=~800px / none=full */
  .ax-reveal-cards--text-width-narrow .ax-reveal-cards__text { max-width: 37.5rem; /* 600px */ }
  .ax-reveal-cards--text-width-normal .ax-reveal-cards__text { max-width: 50rem;   /* 800px */ }
  .ax-reveal-cards--text-width-none   .ax-reveal-cards__text { max-width: 100%; }

  .ax-reveal-cards__heading {
    margin: 0;
  }

  /* Wrap autour du CTA pour que text-align (utility section-header-align-style)
     contrôle la position du bouton inline-block. */
  .ax-reveal-cards__cta {
    width: fit-content;       /* sinon le grid section--page-width fait stretch full-width */
    display: inline-block;
  }

  /* Layout cards : <ul> en desktop, swiper en mobile */
  .ax-reveal-cards__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--gap-sm);
    width: 100%;
  }

  .ax-reveal-cards__swiper {
    display: none;
  }

  /* Section : overflow-x clip pour empêcher le scroll horizontal créé par
     le bleed du swiper en mobile (qui déborde des page-margins). */
  .ax-reveal-cards {
    overflow-x: clip;
  }

  @media screen and (max-width: 1199px) {
    .ax-reveal-cards__list {
      display: none;
    }
    .ax-reveal-cards__swiper {
      display: block;
      width: 100%;
    }
    /* Bleed mobile : le swiper-container déborde des page-margins → les slides
       hors viewport sont visibles (peek). overflow-x: clip sur la section
       empêche que le bleed crée un scroll horizontal de la page. */
    .ax-reveal-cards__swiper::part(container) {
      overflow: visible;
    }
  }

  /* Slide = card wrapper
     aspect-ratio iso-maquette (314/370 portrait) appliqué partout — desktop
     ET mobile — pour que les cards gardent le ratio quel que soit le viewport. */
  .ax-reveal-cards__slide {
    position: relative;
    overflow: hidden; /* clip de l'image cover */
    aspect-ratio: 314 / 370;
    display: flex;
    cursor: pointer;
  }

  /* Desktop : cards égales en flex row */
  @media screen and (min-width: 1200px) {
    .ax-reveal-cards__slide {
      flex: 1;
    }
  }

  /* Card content */
  .ax-reveal-card {
    position: relative;
    width: 100%;
    flex: 1;
    color: white;
    display: flex;
    flex-direction: column;
  }

  .ax-reveal-card__media {
    position: absolute;
    inset: 0;
    border-radius: var(--style-border-radius-xs);
    overflow: hidden;
  }

  .ax-reveal-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ax-reveal-card__overlay {
    position: absolute;
    inset: 0;
    /* Gradient seul (transparent en haut → 70% noir bottom) pour la lisibilité
       du texte sans assombrir l'image globalement. */
    background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / var(--opacity-70)) 100%);
    pointer-events: none;
  }

  .ax-reveal-card__content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--gap-24); /* 24px iso-maquette */
  }

  .ax-reveal-card__title {
    margin: 0;
    color: inherit;
  }

  .ax-reveal-card__description {
    color: inherit;
    /* Iso-maquette : 14px / line-height 1.2 (Figma font-size-tiny) */
    font-size: var(--font-size--xs);
    line-height: 1.2;
  }

  .ax-reveal-card__reveal {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  .ax-reveal-card__cta {
    align-self: flex-start;
    width: fit-content;
    color: inherit;
  }

  @media screen and (min-width: 1200px) {
    .ax-reveal-card__reveal {
      height: 0;
      overflow: hidden;
      gap: var(--gap-xs);
      transition: height .4s var(--animation-timing-default);
    }
    .ax-reveal-card__reveal > * {
      opacity: 0;
      transition: opacity .3s ease-in-out;
    }
    .ax-reveal-cards__slide.is-active .ax-reveal-card__reveal {
      height: auto;
    }
    .ax-reveal-cards__slide.is-active .ax-reveal-card__reveal > * {
      opacity: 1;
    }

    .ax-reveal-card__title {
      margin-block-end: 0;
      transition: margin-block-end .4s var(--animation-timing-default);
    }
    .ax-reveal-cards__slide.is-active .ax-reveal-card__title:has(+ .ax-reveal-card__reveal) {
      margin-block-end: var(--gap-xs);
    }
  }

  /* Mobile : description toujours visible (pas de hover) */
  @media screen and (max-width: 1199px) {
    .ax-reveal-card__title {
      font-size: var(--font-size--h3);
      line-height: var(--font-h3--line-height);
      margin-block-end: var(--padding-lg);
    }
  }
/* END_SECTION:ax-reveal-cards */

/* START_SECTION:ax-rich-text (INDEX:41) */
/* Override des vars max-width--body-* en rem fixes : les defaults Shopify sont
     en em/ch (relatifs à la font-size), donc sur un H2 large "narrow" devient
     trop grand (22.75em × 40px = 910px). On force des valeurs prévisibles.
     On ajoute aussi --*-none qui n'existent pas globalement (block text option
     "none" résolvait à invalid → fallback default normal). */
  .ax-rich-text {
    --max-width--body-narrow: 37.5rem; /* 600px */
    --max-width--body-normal: 50rem;   /* 800px */
    --max-width--body-none: 100%;
    --max-width--heading-narrow: 37.5rem;
    --max-width--heading-normal: 50rem;
    --max-width--heading-none: 100%;
  }

  /* __inner porte le flex layout (sans override le display grid de .section--page-width
     qui place le content dans la col 2 = entre les page-margins). */
  .ax-rich-text__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .ax-rich-text__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24); /* 24px iso-maquette */
    width: 100%;
  }

  .ax-rich-text--gap-compact .ax-rich-text__content {
    gap: var(--gap-lg); /* 16px mobile */
  }

  /* Override .text-block { width: 100% } so block "narrow/normal/wide" settings apply */
  .ax-rich-text__content > .text-block {
    width: var(--width, 100%);
    max-width: var(--max-width, 100%);
  }

  /* === Position du contenu : placement horizontal des blocs dans la section ===
     C'est `align-items` qui place réellement les blocs. Le `margin-inline: auto` qui
     tenait ce rôle n'avait aucun effet : `.ax-rich-text__content` occupe déjà toute la
     largeur (`width: 100%`), il n'y avait donc rien à centrer. Le placement venait en
     réalité de l'alignement du texte, qui posait lui aussi `align-items` — d'où
     l'impossibilité de centrer un bloc dont le texte est aligné à gauche.

     À noter : un bloc réglé sur « Remplir » occupe toute la largeur disponible. Il n'y a
     alors rien à positionner, et ce réglage reste sans effet visible — c'est attendu. */
  .ax-rich-text--content-mobile-left .ax-rich-text__content   { align-items: flex-start; }
  .ax-rich-text--content-mobile-center .ax-rich-text__content { align-items: center; }
  .ax-rich-text--content-mobile-right .ax-rich-text__content  { align-items: flex-end; }

  @media screen and (min-width: 1200px) {
    .ax-rich-text__content {
      gap: var(--gap-24);
    }
    .ax-rich-text--gap-compact .ax-rich-text__content {
      gap: var(--gap-24); /* 24px desktop */
    }
    .ax-rich-text--content-desktop-left .ax-rich-text__content   { align-items: flex-start; }
    .ax-rich-text--content-desktop-center .ax-rich-text__content { align-items: center; }
    .ax-rich-text--content-desktop-right .ax-rich-text__content  { align-items: flex-end; }
  }

  /* === Text alignment (text inside blocks) ===
     Cascade text-align to ALL nested elements so blocks' own internal headings
     follow the section setting too (otherwise a centered section would leave
     left-aligned h2 inside text-blocks). */
  .ax-rich-text--text-mobile-left .ax-rich-text__content,
  .ax-rich-text--text-mobile-left .ax-rich-text__content * { text-align: left; }

  .ax-rich-text--text-mobile-center .ax-rich-text__content,
  .ax-rich-text--text-mobile-center .ax-rich-text__content * { text-align: center; }

  .ax-rich-text--text-mobile-right .ax-rich-text__content,
  .ax-rich-text--text-mobile-right .ax-rich-text__content * { text-align: right; }

  @media screen and (min-width: 1200px) {
    .ax-rich-text--text-desktop-left .ax-rich-text__content,
    .ax-rich-text--text-desktop-left .ax-rich-text__content * { text-align: left; }

    .ax-rich-text--text-desktop-center .ax-rich-text__content,
    .ax-rich-text--text-desktop-center .ax-rich-text__content * { text-align: center; }

    .ax-rich-text--text-desktop-right .ax-rich-text__content,
    .ax-rich-text--text-desktop-right .ax-rich-text__content * { text-align: right; }
  }
/* END_SECTION:ax-rich-text */

/* START_SECTION:ax-search-collections-nosto (INDEX:42) */
/* Section = colonne centrée qui porte son propre rythme vertical (SSR) :
     - padding-block-start = écart « chips → grille » (maquette : 16px)
     - gap = écart « grille → CTA » (maquette : 40px)
     - padding-block-end = respiration de bas de panneau (maquette : 24px) */
  .ax-search-collections-nosto-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-40);
    padding-block: var(--padding-lg) var(--padding-2xl);
    width: 100%;
  }

  .ax-search-collections__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .ax-search-collections__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 1200px) {
    .ax-search-collections__grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  .ax-search-collections-nosto-section .ax-search-collection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    aspect-ratio: 1 / 0.8;
    padding: 0.5rem;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs, 4px);
    background-color: var(--color-background);
    color: var(--color-foreground);
    text-decoration: none;
  }

  @media screen and (min-width: 750px) {
    .ax-search-collections-nosto-section .ax-search-collection-card {
      aspect-ratio: 1 / 1;
    }
  }

  .ax-search-collections-nosto-section .ax-search-collection-card--no-link {
    pointer-events: none;
  }

  .ax-search-collections-nosto-section .ax-search-collection-card__picture,
  .ax-search-collections-nosto-section .ax-search-collection-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .ax-search-collections-nosto-section .ax-search-collection-card__image {
    object-fit: cover;
    /* Point focal Shopify du visuel (réglé par fichier dans l'admin) ; à défaut, centre. */
    object-position: var(--ax-search-collection-card-focal, center);
    /* Zoom au survol, ISO ax-collection-list (cf. ax-collection-card-style.liquid). */
    transition: transform var(--animation-speed-extra-slow) var(--animation-easing);
    will-change: transform;
    backface-visibility: hidden;
  }

  /* Sous 750px c'est l'image mobile qui est servie (cf. `<source>` de la carte) :
     elle a son propre point focal, sinon celui du desktop, sinon le centre. */
  @media screen and (max-width: 749px) {
    .ax-search-collections-nosto-section .ax-search-collection-card__image {
      object-position: var(
        --ax-search-collection-card-focal-mobile,
        var(--ax-search-collection-card-focal, center)
      );
    }
  }

  @media (hover: hover) {
    .ax-search-collections-nosto-section .ax-search-collection-card:hover .ax-search-collection-card__image {
      transform: scale(1.05);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-search-collections-nosto-section .ax-search-collection-card__image {
      transition: none;
    }
  }

  .ax-search-collections-nosto-section .ax-search-collection-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Voile bas léger (maquette : dégradé vers rgb(0 0 0 / 0.2)) pour la lisibilité du titre. */
    background: linear-gradient(to top, rgb(0 0 0 / 0.28), transparent 55%);
  }

  .ax-search-collections-nosto-section .ax-search-collection-card__title {
    position: relative;
    z-index: 2;
    margin: 0;
    color: inherit;
    text-align: center;
    font-family: var(--font-heading--family);
    line-height: 1;
    font-size: 0.875rem;
    padding: .745rem;
  }

  @media screen and (min-width: 750px) {
    .ax-search-collections-nosto-section .ax-search-collection-card__title {
      font-size: 1.125rem;
    }
  }

  .ax-search-collections-nosto-section .ax-search-collection-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }

  /* CTA « Voir tous les produits » — bouton plein foncé, texte clair, police heading
     (maquette). --color-foreground/--color-background résolvent dans ce scope (≠
     --color-heading/-rgb qui peuvent être droppés). */
  .ax-search-collections__view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-lg) var(--padding-lg);
    background-color: var(--color-foreground);
    color: var(--color-background);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight, 700);
    font-size: var(--font-size--lg);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border-radius: 0;
    transition: transform var(--animation-speed-medium, 0.2s) var(--animation-timing-bounce, ease),
      opacity var(--animation-speed-medium, 0.2s) ease;
  }

  .ax-search-collections__view-all:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  .ax-search-collections__view-all:active {
    transform: scale(0.97);
  }

  .ax-search-collections__view-all:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  /* Révélation douce du contenu réel qui remplace le skeleton de la modal (morph Nosto),
     ISO slider. La modal porte un skeleton `[data-nosto-render-mode='skeleton']` ; la section
     fetchée arrive en 'personalized'/'fallback' → la racine se met à matcher au morph →
     animation jouée UNE fois. opacity 0.7→1 (jamais 0), 120ms, composité GPU. */
  .ax-search-collections-nosto-section[data-nosto-render-mode]:not([data-nosto-render-mode='skeleton']) {
    animation: ax-nosto-reveal 0.12s ease-out;
  }

  @keyframes ax-nosto-reveal {
    from {
      opacity: 0.7;
    }

    to {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-search-collections-nosto-section[data-nosto-render-mode]:not([data-nosto-render-mode='skeleton']) {
      animation: none;
    }
  }
/* END_SECTION:ax-search-collections-nosto */

/* START_SECTION:ax-slider-stories (INDEX:44) */
.ax-slider-stories--stories {
		overflow-x: clip;
	}

	/* Inner wrapper holds the 2-col split layout. Keeping it off the root means
	   the theme's `.section` 3-col grid (page-margin / content / page-margin)
	   still drives `section--page-width` / `section--full-width` correctly. */
	.ax-slider-stories__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		/* Top + bottom 1fr spacers vertically center the title/link pair against
		   the carousel column on desktop. */
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas:
			'.        carousel'
			'title    carousel'
			'link     carousel'
			'.        carousel';
		column-gap: var(--gap-2xl);
		row-gap: var(--gap-40);
		min-width: 0;

		@media screen and (max-width: 749px) {
			grid-template-columns: 1fr;
			grid-template-rows: auto auto auto;
			grid-template-areas:
				'title'
				'carousel'
				'link';
			row-gap: var(--gap-24);
		}
	}

	/* Titre + sous-titre occupent ensemble la cellule `title` : le row-gap du
	   grid parent (40px) séparerait sinon les deux, alors qu'ils forment un bloc. */
	.ax-slider-stories__header {
		grid-area: title;
		display: flex;
		flex-direction: column;
		gap: var(--gap-24);
	}

	.ax-slider-stories__title {
		margin: 0;
		text-wrap: balance;
		/* Style visuel piloté par la classe .h1-.h6 ajoutée dynamiquement
		   (cf. heading_size). La classe injecte family/size/weight/line-height. */
	}

	.ax-slider-stories__subtitle {
		margin: 0;
	}

	.ax-slider-stories__link {
		grid-area: link;
		align-self: start;
		/* justify-self retiré : la utility section-header-align-style stretch le
		   wrapper sur la cellule et text-align positionne le lien inline. */
	}

	/* Carousel — stories mode. Width + peek bleed are entirely handled by the
	   `.swiper-bleed-mobile` utility in base.css (base width: 100%, expanded
	   on mobile/tablet for the symmetric bleed).

	   Aspect-ratio pre-reserves the carousel height to prevent CLS while Swiper
	   is initializing. Math: each tile is 9:16, slides are placed side-by-side,
	   so container_aspect = slidesPerView × 9/16.
	     - Mobile (slidesPerView 1.6) → 1.6 × 9/16 = 0.9 = 9/10
	     - Desktop (slidesPerView 3)  → 3   × 9/16 = 27/16 */
	.ax-slider-stories__swiper {
		grid-area: carousel;
		display: block;
		min-width: 0;
		aspect-ratio: 9 / 10;

		@media screen and (min-width: 1200px) {
			aspect-ratio: 27 / 16;
		}
	}

	.ax-slider-stories__slide {
		display: flex;
		height: auto;
	}

	.ax-slider-stories__tile {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		width: 100%;
		aspect-ratio: 9 / 16;
		overflow: hidden;
		border-radius: var(--style-border-radius-xs);
		color: inherit;
		text-decoration: none;
		padding: var(--padding-lg);
		gap: var(--gap-xs);
	}

	.ax-slider-stories__media {
		position: absolute;
		inset: 0;
		z-index: var(--layer-base, 0);
		pointer-events: none;
	}

	.ax-slider-stories__media-image,
	.ax-slider-stories__media-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.ax-slider-stories__product {
		position: relative;
		z-index: var(--layer-raised);
		align-self: stretch;
	}

	/* Tile hover → product-card-mini background passe de 80% à 100% opacity. */
	.ax-slider-stories__product .ax-product-card-mini {
		transition: background-color var(--animation-speed) var(--animation-easing);
	}

	.ax-slider-stories__tile:hover .ax-product-card-mini {
		background-color: rgb(255 255 255);
	}

	/* Media trigger (ouvre la modale video) + picto play */
	.ax-slider-stories__media-trigger {
		position: absolute;
		inset: 0;
		z-index: var(--layer-flat);
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}


	a.ax-slider-stories__product {
		text-decoration: none;
		color: inherit;
	}

	/* Modale video */
	.ax-slider-stories__dialog {
		position: fixed;
		inset: 0;
		margin: auto;
		width: fit-content;
		height: fit-content;
		max-width: 92vw;
		max-height: 90vh;
		padding: 0;
		border: 0;
		background: transparent;
		overflow: visible;
	}

	.ax-slider-stories__dialog::backdrop {
		background: rgb(0 0 0 / var(--opacity-80, 0.8));
	}

	.ax-slider-stories__dialog-video {
		display: block;
		width: auto;
		height: auto;
		max-width: 92vw;
		max-height: 90vh;
		border-radius: var(--style-border-radius-xs);
		background: #000;
	}

	.ax-slider-stories__dialog-close {
		position: absolute;
		inset-block-start: var(--padding-sm);
		inset-inline-end: var(--padding-sm);
		z-index: var(--layer-raised);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		padding: 0;
		border: 0;
		border-radius: var(--style-border-radius-50, 50%);
		background: var(--color-white);
		color: var(--color-black);
		cursor: pointer;
	}

	.ax-slider-stories__dialog-close svg { width: 1rem; height: 1rem; }

	.ax-slider-stories__widget-target {
		grid-area: carousel;
		display: block;
		width: 100%;
		min-width: 0;
		min-height: var(--ax-widget-min-height-mobile, 360px);

		@media screen and (min-width: 750px) {
			min-height: var(--ax-widget-min-height-desktop, 480px);
		}

		& .join-widget-list {
			width: 100%;
		}
	}
/* END_SECTION:ax-slider-stories */

/* START_SECTION:ax-sliders-products (INDEX:45) */
ax-sliders-products {
    row-gap: var(--gap-24);
    width: 100%;
    overflow-x: clip;
  }

  ax-sliders-products[hidden] {
    display: none;
  }

  /*
   * Nosto-sourced sections collapse silently when the placement returns
   * no products (or times out) so we don't leave a band of grey skeletons
   * forever. The same convention as `nosto-recommendations` and the
   * sidecart snippet.
   */
  ax-sliders-products[data-nosto-empty] {
    display: none;
  }

  /*
   * Skeleton styles for the slots rendered before Nosto has resolved.
   * `nosto-dynamic-card` (assets/nosto-dynamic-card.js) injects this
   * markup as placeholder content:
   *
   *   <div class="product-card-wrapper">
   *     <div class="nosto-skeleton__cell"></div>
   *     <div class="nosto-skeleton__line"></div>
   *     <div class="nosto-skeleton__line nosto-skeleton__line--short"></div>
   *   </div>
   *
   * Without these rules the skeleton is invisible (classes have no CSS
   * outside `nosto-recommendations` / `main-search-nosto`), which leaves
   * a visually empty band until the dynamic card swap resolves.
   * Proportions match `ax-product-card` for a smooth visual transition.
   */
  ax-sliders-products nosto-dynamic-card .product-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
    width: 100%;
  }

  ax-sliders-products nosto-dynamic-card .nosto-skeleton__cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--style-border-radius-xs);
    /* Même recette que les sections (base unie + reflet blanc) → cartes reco et
       sections exactement de la même couleur via var(--color-skeleton). */
    background-color: var(--color-skeleton);
    background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 80%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position-x: 150%;
    animation: ax-nosto-skeleton-pulse 1.5s linear infinite;
  }

  ax-sliders-products nosto-dynamic-card .nosto-skeleton__line {
    height: 1rem;
    border-radius: 4px;
    background-color: var(--color-skeleton);
  }

  ax-sliders-products nosto-dynamic-card .nosto-skeleton__line--short {
    width: 50%;
  }

  @keyframes ax-nosto-skeleton-pulse {
    to {
      background-position-x: -150%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    ax-sliders-products nosto-dynamic-card .nosto-skeleton__cell {
      animation: none;
    }
  }

  ax-sliders-products .ax-product-recommendations__content {
    width: 100%;
  }

  .ax-sliders-products__view-all-below {
    padding-block-start: var(--padding-sm);
    text-align: center;

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

  .ax-sliders-products__cta-button {
    display: inline-flex;
  }

  ax-sliders-products .ax-product-recommendations__grid {
    width: 100%;
  }

  ax-sliders-products .ax-product-recommendations__carousel {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    container-type: inline-size;
    container-name: ax-recommendations-carousel;
  }

  ax-sliders-products .ax-product-recommendations__swiper {
    order: 0;
    --swiper-theme-color: currentColor;
    display: block;
    width: 100%;
    margin-block: -16px;
    padding-block: 16px;
  }

  ax-sliders-products .ax-product-recommendations__swiper[init='false'] {
    display: none;
  }

  ax-sliders-products .ax-product-recommendations__fallback {
    display: flex;
    width: 100%;
    gap: var(--resource-list-column-gap-mobile, var(--resource-list-column-gap-desktop, 16px));
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    margin-block: -16px;
    padding-block: 16px;

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

    @media screen and (min-width: 750px) {
      gap: var(--resource-list-column-gap-desktop, 16px);
    }
  }

  @container ax-recommendations-carousel (max-width: 749px) {
    ax-sliders-products .ax-product-recommendations__fallback > .ax-product-recommendations__slide,
    ax-sliders-products .ax-product-recommendations__swiper swiper-slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container ax-recommendations-carousel (min-width: 750px) {
    ax-sliders-products .ax-product-recommendations__fallback > .ax-product-recommendations__slide,
    ax-sliders-products .ax-product-recommendations__swiper swiper-slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap-desktop) * (var(--column-count) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  ax-sliders-products .ax-product-recommendations__fallback > .ax-product-recommendations__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  ax-sliders-products .ax-product-recommendations__swiper swiper-slide {
    width: var(--slide-width);
    height: auto;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
  }

  ax-sliders-products .ax-product-recommendations__swiper swiper-slide > .ax-product-recommendations__slide {
    width: 100%;
    display: flex;
  }

  ax-sliders-products .ax-product-recommendations__swiper swiper-slide .ax-product-card {
    flex: 1;
  }

  ax-sliders-products:not(.ax-product-recommendations--no-peek)
    .ax-product-recommendations__swiper::part(container) {
    overflow: visible;
  }

  @media screen and (max-width: 749px) {
    ax-sliders-products .ax-product-recommendations__swiper::part(container) {
      overflow: visible;
    }
  }

  @media screen and (min-width: 750px) {
    ax-sliders-products.ax-product-recommendations--no-peek {
      .ax-product-recommendations__carousel {
        width: 100%;
        margin-inline: 0;
      }

      .ax-product-recommendations__swiper,
      .ax-product-recommendations__fallback {
        --peek-next-slide-size: 0px;
        padding-inline: 0;
        scroll-padding-inline: 0;
      }
    }
  }

  ax-sliders-products:not(.ax-product-recommendations--no-peek) > .ax-product-recommendations__content {
    grid-column: 1 / -1;
  }

  ax-sliders-products:not(.ax-product-recommendations--no-peek) .ax-product-recommendations__swiper,
  ax-sliders-products:not(.ax-product-recommendations--no-peek) .ax-product-recommendations__fallback {
    padding-inline: var(--page-margin);
    scroll-padding-inline: var(--page-margin);
  }

  @media screen and (max-width: 749px) {
    ax-sliders-products .ax-product-recommendations__content {
      grid-column: 1 / -1;
    }

    ax-sliders-products .ax-product-recommendations__swiper,
    ax-sliders-products .ax-product-recommendations__fallback {
      padding-inline: var(--page-margin);
      scroll-padding-inline: var(--page-margin);
    }
  }
/* END_SECTION:ax-sliders-products */

/* START_SECTION:ax-slideshow-nosto (INDEX:46) */
/* This section only styles its loading SKELETON + the personalized image
     fade-in. All slide layout/positioning comes from the shared snippet
     `ax-slideshow-slide-style` (rendered above), so it stays identical to ax-slideshow. */

  /* Loading skeleton : fond clair sobre + logo Nutrimuscle qui « respire » (le
     mouvement est porté par le logo, pas par un shimmer). 0 CLS : le bloc garde
     la hauteur exacte du slide. Le logo est centré via flex. */
  .ax-slideshow-nosto__skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-height: var(--slide-min-height);
    background-color: var(--color-skeleton);
  }

  .ax-slideshow-nosto__skeleton-logo {
    width: clamp(7.5rem, 18vw, 13.75rem);
    height: auto;
    animation: ax-logo-breathe 1.4s ease-in-out infinite;
  }

  @keyframes ax-logo-breathe {
    0%,
    100% {
      opacity: 0.4;
      transform: scale(0.96);
    }

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

  @media screen and (min-width: 750px) {
    .ax-slideshow-nosto__skeleton {
      min-height: var(--slide-min-height-desktop);
    }
  }

  /* Personalized image fades in over a grey base while it decodes (Nosto-only —
     the standard ax-slideshow has no JS-driven fade). */
  .ax-slideshow--nosto .slide__image-container {
    background-color: var(--color-skeleton);
  }

  .ax-slideshow--nosto .slide__image {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .ax-slideshow--nosto .slide__image.cfh-loaded {
    opacity: 1;
  }

  /* Nosto skips display:none placements (getPlacements() returns []), so this
     stays in-flow; it only holds the injected JSON <script>, so it renders 0-height. */
  .ax-slideshow-nosto__placement {
    font-size: 0;
    line-height: 0;
  }

  /* Media overlay (set per-slide from the Nosto JSON) — above the image, below the content. */
  .ax-slideshow-nosto__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-slideshow-nosto__skeleton-logo {
      animation: none;
      opacity: 0.7;
    }

    .ax-slideshow--nosto .slide__image {
      transition: none;
    }
  }
/* END_SECTION:ax-slideshow-nosto */

/* START_SECTION:ax-slideshow (INDEX:47) */
/* This section only styles its loading SKELETON. All slide layout/positioning
     comes from the shared snippet `ax-slideshow-slide-style` (rendered above), and
     the real render reuses the <ax-slideshow> component, so it stays identical to
     ax-slideshow. */

  .ax-slideshow-nosto-bis {
    position: relative;
    display: block;
    width: 100%;
  }

  /* Loading skeleton : le logo Nutrimuscle s'assemble UNE fois, puis des mots-clés
     défilent + un segment de progression glisse. 0 CLS : le bloc garde la hauteur
     exacte du slide ; logo / mots / segment empilés et centrés. */
  .ax-slideshow-nosto-bis-section .ax-slideshow-nosto-bis__skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    flex: 1 1 auto;
    width: 100%;
    min-height: var(--slide-min-height);
    /* Fond shimmer IDENTIQUE aux autres skeletons (cartes), en plus du logo/mots/
       segment posés par-dessus. Même recette : base unie + reflet blanc qui balaie. */
    background-color: var(--color-skeleton);
    background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 80%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position-x: 150%;
    animation: ax-nm-bg 1.5s linear infinite;
  }

  @keyframes ax-nm-bg {
    to {
      background-position-x: -150%;
    }
  }

  .ax-slideshow-nosto-bis-section .ax-slideshow-nosto-bis__mark {
    overflow: visible;
    color: var(--color-blue-NM);
  }

  /* Logo : tracé + apparition UNE seule fois (forwards = reste posé). */
  .ax-slideshow-nosto-bis-section .ax-nm-box {
    stroke-dasharray: 392;
    stroke-dashoffset: 392;
    animation: ax-nm-box 1.3s ease-in-out forwards;
  }

  .ax-slideshow-nosto-bis-section .ax-nm-dash {
    opacity: 0;
    transform-box: fill-box;
    animation: ax-nm-dash 1.3s ease-out forwards;
  }

  .ax-slideshow-nosto-bis-section .ax-nm-txt {
    /* Même typo que le site (heading Gustavo). */
    font-family: var(--font-heading--family);
    font-weight: 700;
    opacity: 0;
    transform-box: fill-box;
    animation: ax-nm-txt 1.3s ease-out forwards;
  }

  @keyframes ax-nm-box {
    0% { stroke-dashoffset: 392; }
    100% { stroke-dashoffset: 0; }
  }

  @keyframes ax-nm-dash {
    0%, 30% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes ax-nm-txt {
    0%, 55% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Mots-clés qui se relaient (même typo que le site). */
  .ax-slideshow-nosto-bis-section .ax-nm-words {
    position: relative;
    height: 0.8125rem;
    width: 15rem;
  }

  .ax-slideshow-nosto-bis-section .ax-nm-words span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    color: var(--color-foreground);
    opacity: 0;
    animation: ax-nm-fade 9.6s linear infinite;
  }

  @keyframes ax-nm-fade {
    0% { opacity: 0; transform: translateY(4px); }
    3% { opacity: 1; transform: none; }
    22% { opacity: 1; }
    25% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 0; }
  }

  /* Indicateur : segment fin qui glisse. */
  .ax-slideshow-nosto-bis-section .ax-nm-track {
    width: 4.5rem;
    height: 2px;
    border-radius: 99px;
    background: rgb(0 0 0 / 0.08);
    overflow: hidden;
  }

  .ax-slideshow-nosto-bis-section .ax-nm-seg {
    width: 1.375rem;
    height: 100%;
    border-radius: 99px;
    background: var(--color-blue-NM);
    animation: ax-nm-seg 1.5s ease-in-out infinite;
  }

  @keyframes ax-nm-seg {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(340%); }
  }

  @media screen and (min-width: 750px) {
    .ax-slideshow-nosto-bis-section .ax-slideshow-nosto-bis__skeleton {
      min-height: var(--slide-min-height-desktop);
    }
  }

  /* Nosto skips display:none placements, so this stays in-flow; it only holds the
     injected handle element, so it renders 0-height. */
  .ax-slideshow-nosto-bis__placement {
    font-size: 0;
    line-height: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-slideshow-nosto-bis-section .ax-nm-box {
      stroke-dashoffset: 0;
    }

    .ax-slideshow-nosto-bis-section .ax-nm-dash,
    .ax-slideshow-nosto-bis-section .ax-nm-txt {
      opacity: 1;
      transform: none;
    }

    .ax-slideshow-nosto-bis-section .ax-nm-words span:first-child {
      opacity: 1;
    }

    .ax-slideshow-nosto-bis-section .ax-slideshow-nosto-bis__skeleton,
    .ax-slideshow-nosto-bis-section .ax-nm-box,
    .ax-slideshow-nosto-bis-section .ax-nm-dash,
    .ax-slideshow-nosto-bis-section .ax-nm-txt,
    .ax-slideshow-nosto-bis-section .ax-nm-words span,
    .ax-slideshow-nosto-bis-section .ax-nm-seg {
      animation: none;
    }
  }
/* END_SECTION:ax-slideshow */

/* START_SECTION:ax-tabbed-product-lists (INDEX:48) */
ax-tabbed-product-lists-component {
    width: 100%;
    overflow-x: clip;
  }

  /* Skeleton de chargement des onglets pilotés par Nosto (remplacé par le JS :
     recos Nosto, ou collection en repli). Animation shimmer, désactivée en reduced-motion. */
  .ax-tabbed-product-lists__skeleton-card {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
    width: 100%;
  }
  .ax-tabbed-product-lists__skeleton-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--style-border-radius-xs);
    /* Même recette que les sections/reco (base unie + reflet blanc, var(--color-skeleton)). */
    background-color: var(--color-skeleton);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 80%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position-x: 150%;
    animation: ax-tabbed-skeleton-pulse 1.5s linear infinite;
  }
  .ax-tabbed-product-lists__skeleton-line {
    height: 0.875rem;
    border-radius: 4px;
    background-color: var(--color-skeleton);
  }
  .ax-tabbed-product-lists__skeleton-line--short {
    width: 45%;
  }
  @keyframes ax-tabbed-skeleton-pulse {
    to { background-position-x: -150%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ax-tabbed-product-lists__skeleton-media { animation: none; }
  }

  .ax-tabbed-product-lists__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--padding-sm);
    padding-block-end: var(--padding-2xl);
    position: relative;

    &:has(.tablist-nav) {
      align-items: flex-end;
      padding-block-end: 0;
    }
    z-index: var(--layer-raised);
  }

  .ax-tabbed-product-lists__header .tablist-nav {
    padding-block-start: 0;
    padding-block-end: var(--padding-2xl);
  }

  /* Mobile : le tablist scrolle, il doit donc sortir de la colonne centrale — sinon les
     pills sont coupées net à la gouttière droite, ce qui se lit comme une bordure.
     scroll-padding-inline miroir de padding-inline, sinon le scroll-snap décale le
     premier onglet de la valeur du padding au premier paint. */
  @media screen and (max-width: 749px) {
    .ax-tabbed-product-lists__header:has(.tablist-nav) {
      grid-column: 1 / -1;
    }

    .ax-tabbed-product-lists__header .tablist-nav {
      padding-inline: var(--page-margin);
      scroll-padding-inline: var(--page-margin);
    }
  }

  .ax-tabbed-product-lists__title {
    margin: 0;
  }

  .ax-tabbed-product-lists__view-all {
    flex-shrink: 0;
    padding-block-end: var(--padding-2xl);
  }

  .ax-tabbed-product-lists__link {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-xs);
    text-decoration: none;
    font-size: var(--font-size--md);
    font-weight: 500;
    border-block-end: 1px solid currentColor;
    transition: border-color var(--animation-speed) var(--animation-easing);

    &[hidden] {
      display: none;
    }

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

  .ax-tabbed-product-lists__caret-icon {
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);

    .ax-tabbed-product-lists__link--caret:hover & {
      transform: translateX(4px);
    }
  }

  .ax-tabbed-product-lists__panels {
    margin-block-start: 0;
    position: relative;

    &.is-loading {
      opacity: 0.5;
      pointer-events: none;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }
  }

  .ax-tabbed-product-lists__panel {
    width: 100%;

    @media screen and (min-width: 750px) {
      &:has(.ax-tabbed-product-lists__text-block) {
        display: grid;
        grid-template-columns: minmax(200px, 1fr) 3fr;
        gap: var(--padding-lg);
        align-items: start;

        .ax-tabbed-product-lists__view-all-below {
          grid-column: 1 / -1;
        }
      }
    }
  }

  .ax-tabbed-product-lists__text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-2xl);

    @media screen and (max-width: 749px) {
      margin-block-end: var(--padding-4xl);
      padding-inline: var(--page-margin);
    }
  }

  .ax-tabbed-product-lists__text-title {
    margin: 0;
  }

  .ax-tabbed-product-lists__text-body {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin: 0;

    em {
      font-style: normal;
      background: linear-gradient(45deg, rgb(134, 114, 193), rgb(223, 99, 137));
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .ax-tabbed-product-lists__heading {
    margin: 0 0 var(--padding-2xl);
  }

  .ax-tabbed-product-lists__view-all-below {
    /* L'espacement au-dessus appartient au pied, qui porte les deux éléments. */
    flex: 1 1 auto;
    text-align: start;
  }

  /* Peek : les panels sont full-bleed — le pied s'aligne sur la 1re et la
     dernière card (même padding que le swiper). En mobile le panel l'est toujours. */
  .ax-tabbed-product-lists__footer {
    @media screen and (max-width: 749px) {
      padding-inline: var(--page-margin);
    }
  }

  ax-tabbed-product-lists-component:not(.ax-tabbed-product-lists--no-peek) .ax-tabbed-product-lists__footer {
    padding-inline: var(--page-margin);
  }

  @media screen and (min-width: 750px) {
    .ax-tabbed-product-lists__view-all-below--center {
      text-align: center;
    }

    .ax-tabbed-product-lists__view-all-below--end {
      text-align: end;
    }
  }

  @media screen and (max-width: 749px) {
    .ax-tabbed-product-lists__view-all-below--mobile-center {
      text-align: center;
    }

    .ax-tabbed-product-lists__view-all-below--mobile-end {
      text-align: end;
    }
  }

  .ax-tabbed-product-lists__cta-button {
    display: inline-flex;
  }

  /* Products container — carries the resource-list CSS vars + container for carousel width calcs */
  .ax-tabbed-product-lists__products {
    position: relative;
    container-type: inline-size;
    container-name: ax-tabbed-carousel;
  }

  /* Grid layout reuses .resource-list--grid classes from base.css */
  .ax-tabbed-product-lists__grid {
    width: 100%;
  }

  /* Carousel container — flex-wrap so we can order swiper / border / arrows */
  .ax-tabbed-product-lists__carousel {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .ax-tabbed-product-lists__swiper {
    order: 0;
  }

  /* Hide swiper before init (progressive enhancement) */
  .ax-tabbed-product-lists__swiper[init='false'] {
    display: none;
  }

  /* SSR fallback — mirrors the Swiper layout pixel-for-pixel to prevent FOUC on init.
     width: 100% is critical: the carousel is display:flex + flex-wrap:wrap, so without
     an explicit width the fallback's width depends on its slide contents, but the
     slide contents use % of the fallback — circular dep that makes slides render
     at ~176px briefly (based on an intermediate resolved width) before snapping to
     the real 471px. Forcing 100% stabilises the cascade on first paint. */
  .ax-tabbed-product-lists__fallback {
    display: flex;
    width: 100%;
    gap: var(--resource-list-column-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    margin-block: -16px;
    padding-block: 16px;

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

  /* Slide width — reproduces the resource-list-carousel formula.
     Applied on the outer wrapper only (SSR fallback div OR swiper-slide once initialised). */
  @container ax-tabbed-carousel (max-width: 749px) {
    .ax-tabbed-product-lists__fallback > .ax-tabbed-product-lists__slide,
    .ax-tabbed-product-lists__swiper swiper-slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container ax-tabbed-carousel (min-width: 750px) {
    .ax-tabbed-product-lists__fallback > .ax-tabbed-product-lists__slide,
    .ax-tabbed-product-lists__swiper swiper-slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  /* SSR fallback slide (horizontal flex row before Swiper init) */
  .ax-tabbed-product-lists__fallback > .ax-tabbed-product-lists__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Swiper-wrapped slide — takes the computed width */
  .ax-tabbed-product-lists__swiper swiper-slide {
    width: var(--slide-width);
    height: auto;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  /* Inner slide div fills its parent (swiper-slide or fallback slot) */
  .ax-tabbed-product-lists__swiper swiper-slide > .ax-tabbed-product-lists__slide {
    width: 100%;
  }

  /* Swiper internal spacing + hover animation breathing room (same 16px as resource-list-carousel) */
  .ax-tabbed-product-lists__swiper {
    --swiper-theme-color: currentColor;
    display: block;
    width: 100%;
    margin-block: -16px;
    padding-block: 16px;
  }

  /* Swiper's internal shadow .swiper has overflow:hidden by default — it clips at the
     host's padded content edge instead of the host edge, eating the peek. Force visible
     so slides can extend through the padding area; the outer component's overflow-x:clip
     still clips at the viewport edge. Only when peek is active — in no-peek desktop we
     want the default clip so slides don't bleed over a side-by-side text block. */
  ax-tabbed-product-lists-component:not(.ax-tabbed-product-lists--no-peek)
    .ax-tabbed-product-lists__swiper::part(container) {
    overflow: visible;
  }

  @media screen and (max-width: 749px) {
    .ax-tabbed-product-lists__swiper::part(container) {
      overflow: visible;
    }
  }

  /* No peek: carousel stays within page-width, no peek room — desktop only */
  @media screen and (min-width: 750px) {
    .ax-tabbed-product-lists--no-peek {
      .ax-tabbed-product-lists__carousel {
        width: 100%;
        margin-inline: 0;
      }

      .ax-tabbed-product-lists__swiper,
      .ax-tabbed-product-lists__fallback {
        --peek-next-slide-size: 0px;
        padding-inline: 0;
        scroll-padding-inline: 0;
      }
    }
  }

  /* Peek: panels break out to full width so carousel can go edge-to-edge */
  ax-tabbed-product-lists-component:not(.ax-tabbed-product-lists--no-peek) > .ax-tabbed-product-lists__panels {
    grid-column: 1 / -1;
  }

  /* Peek: swiper inherits the page margin as padding, exposing next slide.
     scroll-padding-inline must mirror padding-inline — otherwise the SSR fallback's
     scroll-snap auto-scrolls past the leading padding on first paint (FOUC). */
  ax-tabbed-product-lists-component:not(.ax-tabbed-product-lists--no-peek) .ax-tabbed-product-lists__swiper,
  ax-tabbed-product-lists-component:not(.ax-tabbed-product-lists--no-peek) .ax-tabbed-product-lists__fallback {
    padding-inline: var(--page-margin);
    scroll-padding-inline: var(--page-margin);
  }

  /* Mobile: always full bleed regardless of peek setting */
  @media screen and (max-width: 749px) {
    .ax-tabbed-product-lists__panels {
      grid-column: 1 / -1;
    }

    .ax-tabbed-product-lists__swiper,
    .ax-tabbed-product-lists__fallback {
      padding-inline: var(--page-margin);
      scroll-padding-inline: var(--page-margin);
    }
  }

  /* Arrows: positioned below the carousel + below the border separator — desktop only */
  /* Pied de l'onglet : CTA à gauche, flèches à droite, sur une seule ligne.
     La hauteur plancher évite qu'un onglet sans CTA change le gabarit du pied. */
  .ax-tabbed-product-lists__footer {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    width: 100%;
    min-height: 2.5rem;
    /* 24px : l'espacement que portait le CTA, valeur de la maquette. */
    padding-block-start: var(--gap-24);
  }

  .ax-tabbed-product-lists__arrows {
    display: flex;
    gap: var(--padding-xs);
    margin-inline-start: auto;

    .slideshow-control {
      position: static;
      margin: 0;
      animation: none !important;
      pointer-events: auto;
      opacity: 1;
    }
  }

  @media screen and (min-width: 750px) {
    .ax-tabbed-product-lists--no-peek .ax-tabbed-product-lists__footer {
      padding-inline: 0;
    }
  }
/* END_SECTION:ax-tabbed-product-lists */

/* START_SECTION:ax-usage-tips (INDEX:49) */
.ax-usage-tips {
		position: relative;
		text-align: center;
		overflow: hidden;
		color: var(--color-foreground);

	}

	.ax-usage-tips__bg {
		position: absolute;
		inset: 0;
		z-index: var(--layer-base, 0);
		pointer-events: none;
		/* Full-bleed bg even when section is page-width (grid 1 / -1 trick) */
		grid-column: 1 / -1;
	}

	.ax-usage-tips__bg-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ax-usage-tips__title {
		margin: 0;
		text-wrap: balance;
		position: relative;
		z-index: var(--layer-raised);
		/* Style typographique piloté par la classe .h1-.h6 ajoutée via le snippet
		   ax-section-heading (heading_size). text-align hérite du __header. */
	}

	.ax-usage-tips__swiper {
		display: block;
		width: 100%;
		margin-block-start: var(--gap-sm);
		position: relative;
		z-index: var(--layer-raised);
		/* CLS prevention — swiper-container has empty shadow DOM pre-init so
		   the slide children collapse to 0 height. Approx height of a tip
		   (number/icon + 2-3 lines of text); refine if content grows. */
		min-height: 12rem;

		@media screen and (min-width: 750px) {
			margin-block-start: 0.625rem;
		}
	}

	.ax-usage-tips__swiper--icone {
		margin-block-start: var(--gap-24);

		@media screen and (min-width: 750px) {
			margin-block-start: var(--gap-40);
		}
	}

	.ax-usage-tips__slide {
		display: flex;
		justify-content: center;
		width: 100%;
		height: auto;

		@media screen and (min-width: 1200px) {
			flex: 1;
			width: auto;
		}

		/* Swiper applies inline margin-right (from spaceBetween) to every slide.
		   Zero it on the last so the row fills the container with no trailing
		   gap on the right. */
		&:last-child {
			margin-right: 0 !important;
		}
	}

	.ax-usage-tips__tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 21.4375rem;
		padding-inline: var(--padding-md);

		/* Desktop: each slide is ~450px wide already, let the tip fill it. */
		@media screen and (min-width: 1200px) {
			max-width: none;
		}
	}

	/* Big translucent number that the text overlaps via negative margin */
	.ax-usage-tips__tip-number {
		font-family: var(--font-heading--family);
		font-weight: var(--font-heading--weight);
		font-size: 6.25rem; /* 100px — matches Figma. No theme variable that big. */
		line-height: 1;
		opacity: 0.2;
		margin-block-end: -2rem; /* -32px overlap to lay text over the number */
		user-select: none;
	}

	.ax-usage-tips__tip-icon {
		width: 4rem;
		height: 4rem;
		object-fit: contain;
		margin-block-end: var(--gap-sm);
	}

	.ax-usage-tips__tip-text {
		font-weight: inherit !important;
		text-align: center;
		text-wrap: balance;

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

		/* The richtext metafield emits paragraphs — kill default margins */
		> * {
			margin: 0;
		}
	}

	/* Pagination container — rendered in light DOM via Swiper's pagination.el
	   option. Layout only; bullet styling is in base.css (global). Mobile only
	   (hidden on desktop where all tips are visible side-by-side). */
	.ax-usage-tips__pagination {
		position: relative;
		z-index: var(--layer-raised);
		margin-block-start: var(--gap-2xl);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--gap-xs);

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

		&:empty {
			display: none;
		}
	}
/* END_SECTION:ax-usage-tips */

/* START_SECTION:ax-variant-multi-slider (INDEX:50) */
.ax-variant-multi-slider {
    overflow-x: clip;
    row-gap: var(--gap-24);
  }

  .ax-variant-multi-slider__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .ax-variant-multi-slider__title {
    margin: 0;
  }

  .ax-variant-multi-slider__subtitle {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-normal);
    color: var(--color-foreground);
    opacity: var(--opacity-60);
  }

  .ax-variant-multi-slider__description {
    margin-block-end: var(--gap-lg);
  }

  .ax-variant-multi-slider__carousel {
    position: relative;
  }

  .ax-variant-multi-slider__swiper {
    display: block;
    overflow: visible;
  }

  .ax-variant-multi-slider__swiper::part(container) {
    overflow: visible;
  }

  .ax-variant-multi-slider__swiper swiper-slide {
    overflow: visible;
  }

  .ax-variant-multi-slider__fallback {
    display: flex;
    gap: var(--vms-gap, 8px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ax-variant-multi-slider__fallback::-webkit-scrollbar { display: none; }

  .ax-variant-multi-slider__fallback > .ax-variant-multi-slider__slide,
  .ax-variant-multi-slider__swiper swiper-slide {
    flex: 0 0 auto;
    width: 250px;
    height: auto;
    scroll-snap-align: start;
  }

  @media screen and (min-width: 750px) {
    .ax-variant-multi-slider__fallback > .ax-variant-multi-slider__slide,
    .ax-variant-multi-slider__swiper swiper-slide {
      width: calc((100% - (var(--vms-cols, 5) - 1) * var(--vms-gap, 8px)) / var(--vms-cols, 5));
    }
  }

  .ax-variant-multi-slider__fallback > .ax-variant-multi-slider__slide {
    display: flex;
  }

  .ax-variant-multi-slider__swiper swiper-slide {
    height: auto;
    display: flex;
  }

  .ax-variant-multi-slider__swiper swiper-slide > .ax-variant-multi-slider__slide {
    width: 100%;
    height: auto;
    display: flex;
  }

  .ax-variant-multi-slider__slide > .ax-variant-card {
    width: 100%;
  }

  .ax-variant-multi-slider__arrows {
    display: flex;
    gap: var(--gap-xs);
    justify-content: flex-end;
    margin-block-start: var(--gap-lg);
  }

  .ax-variant-multi-slider__arrows .slideshow-control {
    position: static;
    margin: 0;
    animation: none !important;
    pointer-events: auto;
    opacity: 1;
  }

  .ax-variant-multi-slider__panels.is-loading {
    opacity: var(--opacity-50);
    pointer-events: none;
  }
/* END_SECTION:ax-variant-multi-slider */

/* START_SECTION:breadcrumb (INDEX:51) */
.breadcrumb-section {
    position: relative;
  }
/* END_SECTION:breadcrumb */

/* START_SECTION:card-product-sidecart-nosto (INDEX:53) */
/* Carte upsell Nosto du sidecart — maquette « Compléter votre panier ».
     CSS injecté dans le <head> par nosto-reco-core (layout none). */
  .ax-sidecart-card {
    display: flex;
    gap: var(--gap-xs); /* 8px */
    width: 100%;
    padding: var(--padding-lg); /* 16px */
    background-color: var(--color-neutral-light, #f7f7f7);
    border-radius: var(--style-border-radius-xs);
    align-items: flex-start;
  }

  .ax-sidecart-card__image {
    flex-shrink: 0;
    width: 4.375rem; /* 70px — maquette */
    height: 4.375rem;
    overflow: hidden;
    background: var(--color-neutral-light, #f5f5f5);
  }

  .ax-sidecart-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ax-sidecart-card__info {
    display: flex;
    flex-direction: column;
    gap:  0.75rem; /* 12px */
    flex: 1;
    min-width: 0;
  }

  .ax-sidecart-card__head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
    min-width: 0;
  }

  .ax-sidecart-card__title {
    font-family: var(--font-heading--family); /* Gustavo */
    font-weight: 700;
    font-size: 0.875rem; /* 14px — h5 maquette */
    line-height: 1;
    color: var(--color-black);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ax-sidecart-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.375rem; /* 6px — maquette */
    flex-wrap: wrap;
  }

  .ax-sidecart-card__price-prefix {
    font-family: var(--font-heading--family);
    font-size: 0.75rem; /* 12px */
    line-height: 1;
    color: var(--color-blue-NM);
  }

  .ax-sidecart-card__price-value {
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: 0.875rem; /* 12px — h6 maquette */
    line-height: 1;
    color: var(--color-blue-NM); /* #0093E5 */
  }

  .ax-sidecart-card__price-compare {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 0.875rem; /* 14px — maquette */
    line-height: 1;
    color: var(--color-gris-moyen, #969696);
    text-decoration: line-through;
  }

  .ax-sidecart-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xs);
    width: 100%;
  }

  .ax-sidecart-card__variant {
    font-family: var(--font-body--family); /* DM Sans */
    font-weight: 400;
    font-size: 0.875rem; /* 12px — text-tiny maquette */
    line-height: 1.2;
    color: var(--color-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ax-sidecart-card__form {
    margin: 0;
    margin-inline-start: auto;
    display: flex;
  }

  .ax-sidecart-card__form form,
  .ax-sidecart-card__form add-to-cart-component {
    margin: 0;
    display: flex;
  }

  /* Bouton d'ajout compact (icône 32px). On neutralise .button et on cache le label ;
     l'icône reste, et le spinner + checkmark (CSS dans base.css) s'animent par-dessus. */
  .ax-sidecart-card__add-btn.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; /* 32px — maquette */
    height: 2rem;
    min-height: 0;
    padding: 0;
    background: var(--color-white);
    color: var(--color-black);
    border: 0;
    /* La classe .button du thème dessine sa bordure via un box-shadow inset → on le neutralise. */
    box-shadow: none;
    border-radius: var(--style-border-radius-xs);
    cursor: pointer;
  }

  .ax-sidecart-card__add-btn .add-to-cart-text__content {
    display: none; /* icône seule (maquette) */
  }

  .ax-sidecart-card__add-btn .add-to-cart-icon {
    display: inline-flex;
    width: 1.25rem; /* 20px */
    height: 1.25rem;
  }

  .ax-sidecart-card__add-btn .add-to-cart-icon svg {
    width: 100%;
    height: 100%;
  }

  /* La coche de confirmation (checkmark-burst) est forcée à 30px par base.css.
     On la ramène à la taille de l'icône panier (20px), comme sur les cartes produit
     classiques. Spécificité (0,4,0) pour battre `.add-to-cart-button .svg-wrapper .checkmark-burst`. */
  .ax-sidecart-card__add-btn .add-to-cart__added-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .ax-sidecart-card__add-btn.button .svg-wrapper .checkmark-burst {
    width: 1.25rem;
    height: 1.25rem;
  }
/* END_SECTION:card-product-sidecart-nosto */

/* START_SECTION:collection-links (INDEX:56) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media screen and (min-width: 750px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media screen and (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media screen and (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:featured-blog-posts (INDEX:59) */
featured-blog-posts {
    display: block;
    width: 100%;
    overflow-x: clip;
  }

  .featured-blog-posts__footer {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    justify-content: var(--horizontal-alignment, flex-start);
    margin-block-start: var(--gap, 12px);
    /* Hauteur plancher = celle des flèches : le pied ne change pas de gabarit
       selon que le bouton est renseigné ou non. */
    min-height: 2.5rem;
  }

  .featured-blog-posts__swiper {
    --swiper-theme-color: currentColor;
    display: block;
    width: 100%;
  }

  .featured-blog-posts__swiper[init='false'] {
    display: none;
  }

  .featured-blog-posts__slide {
    height: auto;
    display: flex;
    align-items: stretch;
  }

  .featured-blog-posts__slide > .resource-list__item {
    flex: 1;
    width: 100%;
    min-width: 0;
  }

  .featured-blog-posts__swiper::part(container) {
    overflow: visible;
  }

  /* Aperçu desktop désactivé : le carrousel reste en pleine largeur (le mobile en a
     besoin), mais on rogne ce qui dépasse de la colonne de contenu — la carte suivante
     ne mord donc plus dans la marge de page. Le seuil suit celui du JS, qui bascule
     sur `slidesPerView: columns` à partir de 750px. */
  @media screen and (min-width: 750px) {
    .featured-blog-posts--no-peek .featured-blog-posts__swiper::part(container) {
      overflow: hidden;
    }
  }

  /* Poussées à droite du pied. `margin-inline-start: auto` plutôt qu'un
     `justify-content` sur le pied : ça place aussi les flèches à droite quand
     aucun bouton n'est renseigné. */
  .featured-blog-posts__arrows {
    display: flex;
    gap: var(--padding-xs);
    margin-inline-start: auto;

    .slideshow-control {
      position: static;
      margin: 0;
      animation: none !important;
      pointer-events: auto;
      opacity: 1;
    }
  }

  /* Align swiper edges with page margins to allow peek */
  .featured-blog-posts .featured-blog-posts__swiper {
    padding-inline: var(--page-margin);
  }

  @media screen and (max-width: 1199px) {
    .featured-blog-posts .hidden--mobile,
    .featured-blog-posts .mobile\:hidden {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }

    .featured-blog-posts .resource-list--grid {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    .featured-blog-posts .resource-list {
      --resource-list-column-gap: var(--resource-list-column-gap-mobile,
          min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max, 12px)));
      --resource-list-row-gap: var(--resource-list-row-gap-mobile,
          min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max, 12px)));
    }
  }

  @media screen and (min-width: 750px) and (max-width: 1199px) {
    .featured-blog-posts .hidden--desktop,
    .featured-blog-posts .desktop\:hidden {
      /* stylelint-disable-next-line declaration-no-important */
      display: block !important;
    }
  }
/* END_SECTION:featured-blog-posts */

/* START_SECTION:featured-product (INDEX:61) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

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

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer (INDEX:62) */
.footer {
    background: linear-gradient(
      180deg,
      var(--footer-gradient-start) 0%,
      var(--footer-gradient-end) 100%
    );
    color: var(--footer-text);
  }

  .footer__container {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-xl);
    padding-inline: var(--page-margin, var(--padding-lg));
  }

  @media screen and (min-width: 750px) {
    .footer__container {
      row-gap: var(--gap-3xl);
      padding-inline: clamp(var(--padding-2xl), 4vw, var(--padding-6xl));
    }
  }

  .footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
  }

  /* Axome - Refonte 2026: tablet (750-989) uses mobile layout (1 col) to avoid
     cramped footer. Desktop (≥ 990) switches to the 4-col grid. */
  @media screen and (min-width: 1200px) {
    .footer__top {
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: var(--gap-xl);
    }
  }

  .footer__title {
    margin: 0 0 var(--gap-xs);
  }

  .footer__subtitle {
    margin: 0 0 var(--gap-md);
    font-size: var(--font-size--sm);
  }

  .footer__field-wrapper {
    max-width: 100%;
  }

  .footer__field {
    display: flex;
    align-items: stretch;
    border: 1px solid currentColor;
    border-radius: var(--style-border-radius-xs);
    background: var(--color-white);
  }

  .footer__input {
    flex: 1;
    min-width: 0;
    padding: var(--padding-md) var(--padding-sm);
    background: var(--color-white);
    color: var(--color-black);
    border: none;
    border-radius: 0;
    font: inherit;
    font-size: var(--font-size--sm);

    &:focus,
    &:focus-visible {
      outline: none;
      background: var(--color-white);
      color: var(--color-black);
    }
  }

  .footer__input::placeholder {
    color: var(--color-black);
    opacity: 1;
  }

  .footer__submit {
    margin: var(--padding-2xs);
    padding: var(--padding-md) var(--padding-2xl);
    background: var(--footer-accent);
    color: var(--footer-text);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--sm);
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--animation-values);

    &:hover,
    &:focus-visible {
      opacity: var(--opacity-70);
    }
  }

  .footer__optin {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-top: var(--gap-sm);
    font-size: var(--font-size--xs);
  }

  .footer__optin input {
    accent-color: currentColor;
  }

  .footer__message {
    display: block;
    margin: var(--gap-xs) 0 0;
  }

  .footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    list-style: none;
    padding: 0;
    margin: var(--gap-md) 0 0;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .footer__socials {
      gap: var(--gap-2xl);
      margin: var(--gap-2xl) 0 0;
      justify-content: flex-start;
    }
  }

  .footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    transition: opacity var(--animation-values);
  }

  .footer__social:hover,
  .footer__social:focus-visible {
    opacity: var(--opacity-70);
  }

  .footer__social-icon {
    display: block;
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  .footer__menu summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding-block: var(--gap-md);
    font-size: var(--font-size--h5);
    font-weight: var(--font-heading--weight);
    cursor: pointer;
    list-style: none;
  }

  .footer__menu summary::-webkit-details-marker { display: none; }

  .footer__menu-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 10px;
    transition: transform var(--animation-values);
  }

  .footer__menu[open] .footer__menu-chevron {
    transform: rotate(180deg);
  }

  .footer__menu-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--gap-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .footer__menu-link {
    color: currentColor;
    text-decoration: none;
    font-size: var(--font-size--xs);
    transition: opacity var(--animation-values);
  }

  .footer__menu-link:hover,
  .footer__menu-link:focus-visible {
    opacity: var(--opacity-70);
    text-decoration: underline;
  }

  .footer__menu summary:hover {
    color: var(--color-background);
  }

  /* Desktop: flatten — no accordion, always visible */
  @media screen and (min-width: 750px) {
    .footer__newsletter{
      max-width: 32rem;
      margin-right: 5rem;
    }

    .footer__menu summary {
      cursor: default;
      pointer-events: none;
      padding-block: 0 var(--gap-md);
    }
    .footer__menu-chevron {
      display: none;
    }

    /* Force-show menu list on desktop: <details> collapses non-open children by default */
    .footer__menu:not([open]) .footer__menu-list {
      display: flex !important;
    }
    .footer__menu-list {
      margin-bottom: 0;
    }
  }

  .footer__push {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
    padding: var(--gap-lg);
  }

  /* Axome - Refonte 2026: same as .footer__top — tablet stays mobile, desktop
     splits into N columns. */
  @media screen and (min-width: 1200px) {
    .footer__push {
      grid-template-columns: repeat(var(--push-count, 4), 1fr);
      gap: var(--gap-2xl);
    }
  }

  /* Corner brackets — top-left + bottom-right */
  .footer__push::before,
  .footer__push::after {
    content: "";
    position: absolute;
    width: var(--padding-lg);
    height: var(--padding-lg);
    border: 1px solid currentColor;
    pointer-events: none;
  }

  .footer__push::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
  }

  .footer__push::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
  }

  .footer__push-item {
    display: flex;
    gap: var(--gap-sm);
    align-items: center;
  }

  .footer__push-icon {
    flex-shrink: 0;
    width: var(--padding-4xl);
    height: var(--padding-4xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .footer__push-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Force monochrome white — assumes light text color */
    filter: brightness(0) invert(1);
  }

  .footer__push-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xs);
    min-width: 0;
  }

  .footer__push-title {
    margin: 0;
    font-size: var(--font-size--sm);
    font-weight: var(--font-heading--weight);
  }

  .footer__push-text {
    margin: 0;
    font-size: var(--font-size--xs);
    line-height: 1.45;
    opacity: var(--opacity-90);
  }

  .footer__logo {
    display: flex;
    justify-content: center;
  }

  .footer__logo-image {
    max-width: 100%;
  }

  @media screen and (min-width: 750px) {
    .footer__logo-image {
      max-width: min(90%, 800px);
    }
  }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl);
    padding-block-start: var(--gap-lg);
  }

  /* Mobile : liens légaux entre le logo et les sélecteurs (iso-maquette) */
  .footer__bottom .footer__legal-nav {
    order: -1;
  }

  @media screen and (min-width: 750px) {
    .footer__bottom {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: var(--gap-md);
    }

    .footer__bottom .footer__legal-nav {
      order: 0;
    }
  }

  .footer__selectors {
    display: flex;
    gap: var(--gap-24);
    align-items: center;
  }

  /* Override localization-form appearance to fit the footer
     (scoped to the inline language form, not the country dropdown panel) */
  .footer__selectors > localization-form-component {
    width: auto;
    display: inline-flex;
    align-items: center;
  }

  .footer__selectors > localization-form-component .localization-form {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .footer__selectors > localization-form-component .localization-form > * + * {
    margin-left: var(--gap-sm);
  }

  /* Hide any visible label/legend the snippet emits (the "Language:" text) */
  .footer__selectors .language-selector__label,
  .footer__selectors .localization-form label:not(.visually-hidden),
  .footer__selectors .localization-form legend:not(.visually-hidden) {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }

  /* Reset the language-selector wrapper's spacing/borders from the theme */
  .footer__selectors .language-selector {
    padding: 0;
    gap: var(--gap-xs);
    width: auto;
    border: none;
    box-shadow: none;
  }

  /* Style the actual button / select to blend with the gradient */
  .footer__selectors select,
  .footer__selectors .localization-form__select,
  .footer__selectors .localization-selector,
  .footer__selectors .disclosure__button {
    background: transparent;
    background-color: transparent;
    color: currentColor;
    border: none;
    padding: 0;
    font-size: var(--font-size--xs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    max-width: none;
    text-align: left;
  }

  .footer__selectors select option,
  .footer__selectors .localization-form__select option {
    color: var(--color-black);
    background: var(--color-white);
  }

  /* Country selector dropdown (opens upward above the footer bottom bar) */
  .footer-localization {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .footer__selectors .footer-localization__button {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    background: transparent;
    border: none;
    padding: 0;
    color: currentColor;
    font-size: var(--font-size--xs);
    cursor: pointer;
  }

  .footer__selectors .footer-localization__button .svg-wrapper.icon-caret {
    width: var(--icon-size-xs, 12px);
    height: var(--icon-size-xs, 12px);
    color: currentColor;
  }

  .footer-localization__panel {
    position: absolute;
    bottom: calc(100% + var(--margin-xs, 8px));
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 320px;
    max-height: min(50vh, 440px);
    background-color: var(--color-background);
    color: var(--color-foreground);
    border: var(--style-border-width, 1px) solid var(--color-border);
    border-radius: var(--style-border-radius-popover, 12px);
    box-shadow: var(--shadow-popover, 0 4px 30px rgb(0 0 0 / 15%));
    overflow: hidden;
    animation: footer-localization-appear 0.15s var(--animation-easing, ease) both;
  }

  .footer-localization__panel[hidden] {
    display: none;
  }

  @keyframes footer-localization-appear {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

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

  /* Let the inner form fill the panel and the country list scroll */
  .footer-localization__panel localization-form-component {
    width: 100%;
    min-height: 0;
  }

  .footer-localization__panel .localization-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
  }

  /* Position the caret next to the select, not absolutely */
  .footer__selectors .language-selector .svg-wrapper.icon-caret {
    position: static;
    transform: none;
    color: currentColor;
    width: var(--icon-size-xs, 12px);
    height: var(--icon-size-xs, 12px);
  }

  .footer__selectors .language-selector .svg-wrapper.icon-caret svg {
    fill: currentColor;
  }

  /* Sélecteur de langue maison — cf. snippets/ax-language-selector.liquid.
     Typo 14px alignée sur le sélecteur natif voisin, pas sur le bouton devise. */
  .ax-language-selector__toggle {
    list-style: none;
    cursor: pointer;
    font-size: var(--font-size--14);
  }

  .ax-language-selector__toggle::-webkit-details-marker {
    display: none;
  }

  .ax-language-selector[open] .icon-caret {
    rotate: 180deg;
  }

  .ax-language-selector__flag {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
  }

  .ax-language-selector__flag svg {
    width: 100%;
    height: 100%;
  }

  .ax-language-selector__panel {
    width: max-content;
    min-width: 100%;
    padding: var(--padding-2xs);
  }

  .ax-language-selector__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ax-language-selector__link {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--padding-2xs) var(--padding-xs);
    border-radius: var(--style-border-radius-xs);
    color: inherit;
    text-decoration: none;
    font-size: var(--font-size--14);
  }

  .ax-language-selector__link:hover,
  .ax-language-selector__link:focus-visible {
    background-color: var(--color-neutral-light);
  }

  .footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs) var(--gap-lg);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer__legal-link {
    color: currentColor;
    text-decoration: underline;
    font-size: var(--font-size--xs);
    transition: opacity var(--animation-values);
  }

  .footer__legal-link:hover,
  .footer__legal-link:focus-visible {
    opacity: var(--opacity-70);
  }
/* END_SECTION:footer */

/* START_SECTION:header-announcements (INDEX:63) */
.shopify-section-group-header-group:not(.section-header) {
    z-index: 5;
  }
  
  .announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  /* Swiper overrides */
  .announcement-bar__swiper {
    width: 100%;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
    --swiper-navigation-size: 20px;
    --swiper-navigation-sides-offset: 8px;
    --swiper-navigation-color: var(--color-foreground);
    --swiper-pagination-bullet-horizontal-gap: 0;
    --dots-gap: 6px;
    --dots-offset: 8px;
    --dots-space: calc(
      var(--ax-pagination-active-width) + (var(--dots-count, 1) - 1) *
        (var(--ax-pagination-size) + var(--dots-gap)) + var(--dots-offset) * 2
    );
  }

  .announcement-bar__swiper swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .announcement-bar__swiper--has-dots swiper-slide {
    padding-inline: var(--dots-space);
  }

  .announcement-bar__swiper:not(:defined) swiper-slide:not(:first-child) {
    display: none;
  }

  /* Dots — right-aligned, inline with content */
  .announcement-bar__swiper::part(pagination) {
    position: absolute;
    right: var(--dots-offset);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    display: flex;
    gap: var(--dots-gap);
    align-items: center;
    z-index: 10;
  }

  /* Hide nav arrows on mobile */
  .announcement-bar__swiper::part(button-prev),
  .announcement-bar__swiper::part(button-next) {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

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

  .announcement-bar .announcement-bar__text {
    margin: 0;
    /* Écrase le --line-height: 1 inline du block, illisible dès que le texte wrappe */
    line-height: 1.2;
    text-wrap: balance;
  }

  /* Taille des annonces en mobile, iso maquette. `!important` car le block pose
     --font-size en inline, qui l'emporterait sinon. Spécificité gardée à une seule
     classe : le réglage « Taille sur mobile » d'un block (.text-block--{id}, injecté
     plus bas dans le document) reste prioritaire pour rapetisser une annonce longue. */
  @media screen and (max-width: 749px) {
    .announcement-bar__slide {
      --font-size: var(--font-size--sm) !important;
    }
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:layered-slideshow (INDEX:65) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:66) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:68) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:69) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:70) */
/* ─── Redirect fallback — shown behind drawer on /cart ─── */
	.cart-page-redirect {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 60vh;
		padding: var(--padding-5xl);
		text-align: center;
		gap: var(--gap-lg);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	/* Only show when no dialog is open (drawer closed or failed to open) */
	body:not(:has(dialog[open])) .cart-page-redirect {
		opacity: 1;
	}

	.cart-page-redirect__text {
		font-size: var(--font-size--sm);
		color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
		max-width: 30ch;
	}

	.cart-page-redirect__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--gap-md);
	}

	.cart-page-redirect__button {
		padding-inline: var(--padding-4xl);
		padding-block: var(--padding-lg);
	}

	.cart-page {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0 var(--padding-5xl);
	}

	.cart-page--empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.cart-page--empty .cart-page__title,
	.cart-page--empty .cart-page__more-blocks {
		margin-top: var(--margin-6xl);
	}

	.cart-page__more-blocks {
		width: 100%;
	}

	.cart-page--empty .cart-title {
		text-align: center;
	}

	.cart-page__main {
		grid-column: 1;
	}

	.cart-page__summary {
		padding-top: var(--padding-xl);
	}

	.cart-page__title + .cart-page__items {
		margin-block-start: var(--margin-lg);
	}

	@media screen and (min-width: 750px) {
		.cart-page {
			grid-template-columns: 1fr min(50vw, var(--sidebar-width));
			grid-template-rows: min-content min-content 1fr;
		}

		.cart-page__summary {
			display: grid;
			height: 100%;
			grid-column: 2;
			grid-row: 1 / -1;
			align-self: stretch;
			grid-template-rows: subgrid;
			padding-top: 0;

			/* needed to support blurred effect from hero section */
			position: relative;
		}

		.section--page-width .cart-page:has(.cart-summary--extend) {
			grid-column: 2 / 4;
			grid-template-columns: 1fr minmax(
					var(--sidebar-width),
					calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
				);
		}
	}

	@media screen and (min-width: 1400px) {
		.cart-page {
			grid-template-columns: 1fr var(--sidebar-width);
		}
	}

	html:active-view-transition-type(empty-cart-page) {
		/* Root doit etre capture sinon la page derriere la zone animee n'est pas
       rendue pendant la transition et apparait blanche. */
		view-transition-name: root-custom;
	}
/* END_SECTION:main-cart */

/* START_SECTION:marquee (INDEX:76) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }

  /* Axome - Mobile marquee gap override */
  @media screen and (max-width: 749px) {
    .marquee__wrapper,
    .marquee__content,
    .marquee__repeated-items {
      gap: var(--marquee-gap-mobile, var(--marquee-gap));
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:77) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

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

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:79) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:80) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }

  @media (min-width: 1200px) {
    .section-password:has(> .password-section--image-height) {
      flex-grow: 0;
      align-items: start;
    }

    .password-section--image-height {
      aspect-ratio: var(--password-image-aspect-ratio);
      min-height: fit-content;
    }
  }

  .password-section--full-height {
    min-height: 100dvh;
  }
/* END_SECTION:password */

/* START_SECTION:product-hotspots (INDEX:83) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--color-foreground);
      background-color: var(--color-background);
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:84) */
/* Kaching Bundles — états maison sur le DOM de l'app.
     Un deal actif (kaching-bundles-block rendu) prend la main sur la
     quantité : on masque les sélecteurs de quantité (les paliers 1x/2x/3x
     jouent ce rôle) et le slider de variantes, iso-prod. */
  kaching-bundle {
    display: none;
  }

  .shopify-section:has(kaching-bundles-block) kaching-bundle {
    display: block;
    /* Rythme maquette : 16px au-dessus des cartes (gap 10 du group + le
       padding badge de 7px des bars), 24px sous les tuiles (gap 10 + 14) */
    margin-block-end: 0.875rem;
  }

  .shopify-section:has(kaching-bundles-block) .product-form-buttons quantity-selector-component,
  .shopify-section:has(kaching-bundles-block) .sticky-add-to-cart__quantity,
  .shopify-section:has(kaching-bundles-block) variant-options-slider {
    display: none;
  }

  .kaching-bundles__out-of-stock {
    display: none;
  }

  .kaching-bundles__bar.is-oos-disabled {
    opacity: var(--opacity-40, 0.4);
    pointer-events: none;
    filter: grayscale(100%);
  }

  .kaching-bundles__bar.is-oos-disabled .kaching-bundles__bar-container {
    border-color: var(--color-neutral) !important;
    background-color: var(--color-neutral-light) !important;
  }

  /* Overrides visuels DA refonte (maquette 5361-12293) : tuiles verticales
     image → titre → prix → ruban plein bas, badge % flottant hors carte.
     Le DOM de l'app imbrique title/label/subtitle dans first/second-line :
     display: contents aplatit tout dans la colonne de bar-main, `order`
     réordonne. Les !important répondent aux styles embarqués de l'app. */
  .kaching-bundles .kaching-bundles__block {
    /* Marges app : 10px haut/bas — le rythme vertical est géré sur kaching-bundle */
    margin-block: 0 !important;
  }

  .kaching-bundles .kaching-bundles__bars {
    /* L'app pose une grid à colonnes min fixes qui déborde en mobile,
       puis empile ses bars en colonne — la maquette garde 1 ligne partout */
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: stretch;
    /* Gutter maquette : 12 desktop / 8 mobile */
    gap: 0.75rem !important;

    @media screen and (max-width: 749px) {
      gap: 0.5rem !important;
    }
    /* Réserve la hauteur du badge % qui déborde de la carte (top -7px) */
    padding-block-start: 0.4375rem;
  }

  .kaching-bundles .kaching-bundles__bar {
    position: relative;
    flex: 1 1 0 !important;
    min-width: 0;
    /* L'app pose 5.25px de margin-block sur chaque bar */
    margin-block: 0 !important;
  }

  .kaching-bundles .kaching-bundles__bar-container {
    height: 100%;
    padding: 0.5rem !important;
    border: none !important;
    border-radius: var(--style-border-radius-xs) !important;
    background-color: var(--color-neutral-light) !important;
    box-shadow: none !important;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
  }

  .kaching-bundles .kaching-bundles__bar:not(.kaching-bundles__bar--selected) .kaching-bundles__bar-container:hover {
    box-shadow: inset 0 0 0 1px var(--color-neutral) !important;
  }

  .kaching-bundles .kaching-bundles__bar :checked + .kaching-bundles__bar-container {
    box-shadow: inset 0 0 0 1px var(--color-foreground) !important;
  }

  .kaching-bundles .kaching-bundles__bar-wrapper {
    padding: 0 !important;
    height: 100%;
  }

  .kaching-bundles .kaching-bundles__bar-main {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    /* Maquette : image→titre 8 (gap + margin image), titre→prix 4 (gap),
       prix→ruban 6 (gap + margin pricing). L'app force gap 10px. */
    gap: 0.25rem !important;
    width: 100%;
    height: 100%;
  }

  .kaching-bundles .kaching-bundles__bar-main > .kaching-bundles__bar-radio {
    display: none !important;
  }

  .kaching-bundles .kaching-bundles__bar-content,
  .kaching-bundles .kaching-bundles__bar-content-left,
  .kaching-bundles .kaching-bundles__bar-first-line,
  .kaching-bundles .kaching-bundles__bar-second-line {
    display: contents !important;
  }

  .kaching-bundles .kaching-bundles__bar-image {
    /* Packshots app carrés sur fond transparent : contain (cover à la maquette
       croppe les flacons — crop Figma fait à la main, pas généralisable) */
    width: 5.5rem !important;
    height: auto !important;
    aspect-ratio: 1;
    object-fit: contain;
    margin-block-end: 0;
  }

  .kaching-bundles .kaching-bundles__bar-title {
    font-family: var(--font-heading--family);
    /* h6 = 14px desktop / 12px mobile, iso-maquette (titre, prix, badge) */
    font-size: var(--font-size--h6) !important;
    font-weight: 700 !important;
    line-height: 1;
    color: var(--color-foreground) !important;
  }

  .kaching-bundles .kaching-bundles__bar-format {
    font-size: var(--font-size--h6);
    font-weight: 300;
    white-space: nowrap;
  }

  .kaching-bundles .kaching-bundles__bar-pricing {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.375rem;
    order: 1;
    margin-block-end: 0.125rem;
  }

  .kaching-bundles .kaching-bundles__bar-price {
    font-size: var(--font-size--h6) !important;
    font-weight: 700 !important;
    line-height: 1.2;
    color: var(--color-blue-NM) !important;
    white-space: nowrap;
  }

  .kaching-bundles .kaching-bundles__bar-full-price {
    font-size: var(--font-size--h6) !important;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-neutral-dark) !important;
    text-decoration: line-through;
    white-space: nowrap;
  }

  /* Ruban plein largeur collé en bas de carte (margin auto = pills alignées
     entre tuiles de hauteurs différentes) */
  .kaching-bundles .kaching-bundles__bar-label {
    order: 2;
    position: static !important;
    width: 100%;
    margin-block-start: auto;
    padding: 0.0625rem 0.25rem 0.1875rem !important;
    border-radius: 0 !important;
    background-color: var(--color-blue-NM) !important;
    color: var(--color-white) !important;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--14) !important;
    font-weight: 700 !important;
    line-height: 1;
    text-align: center;
    /* Un saut de ligne saisi dans le champ de l'app est restitué tel quel */
    white-space: pre-line;
    /* Un mot par ligne (césure maquette) */
    word-spacing: 100vw;
  }

  /* Badge % au-dessus de la carte, aligné droite */
  .kaching-bundles .kaching-bundles__bar-subtitle {
    position: absolute;
    top: -0.4375rem;
    right: 0.625rem;
    padding: 0.0625rem 0.25rem 0.125rem !important;
    border-radius: 0 !important;
    background-color: var(--color-blue-NM) !important;
    color: var(--color-white) !important;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h6) !important;
    font-weight: 700 !important;
    line-height: 1;
  }

  .sticky-add-to-cart__bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(100%);
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    width: 100%;
    padding-inline: var(--padding-2xl);
    padding-block: var(--padding-sm);
    background: var(--color-background);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
    box-shadow: var(--shadow-button);

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

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

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

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

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
    display: flex;
    align-items: baseline;
    flex-direction: column;
    overflow: hidden;
  }

  .sticky-add-to-cart__title {
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .sticky-add-to-cart__variant {
    font-size: var(--font-size--sm); /* 14px mobile / 16px desktop */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .sticky-add-to-cart__variant-sep {
    margin-inline: var(--gap-2xs);
    opacity: 0.2;
  }

  .sticky-add-to-cart__actions {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    flex-shrink: 0;
  }

  .sticky-add-to-cart__quantity {
    background: transparent;
  }

  .sticky-add-to-cart__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    position: relative;
    background: var(--color-foreground);
    color: var(--color-background);
    border: none;
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    height: var(--height-buy-buttons);
    padding-inline: var(--button-padding-inline);
    /* Remonte le contenu de la moitié du 1.3rem que base.css impose au prix/libellé
       du CTA de la fiche produit, pour que les deux boutons soient iso. Les deux côtés
       sont posés car la feuille UA met 1px de padding-block sur un <button>. */
    padding-block: 0 calc(1.3rem - 1em);
    font-family: var(--button-font-family-primary);
    font-size: var(--button-font-size);
    font-weight: 700;
    line-height: 1;
    text-transform: var(--button-text-case-primary);
    cursor: pointer;
  }

  @media screen and (max-width: 399px) {
    .sticky-add-to-cart__cta {
      gap: var(--gap-2xs);
    }
  }

  .sticky-add-to-cart__cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .sticky-add-to-cart__price {
    display: flex;
    align-items: center;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
  }

  .sticky-add-to-cart__price .price {
    color: inherit;
    font-size: inherit;
  }

  .sticky-add-to-cart__separator {
    flex-shrink: 0;
    width: 2px;
    height: 40%;
    background: var(--color-background);
  }

  .sticky-add-to-cart__label {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sticky-add-to-cart__cta[data-added='true'] :is(.sticky-add-to-cart__price, .sticky-add-to-cart__separator) {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__cta[data-added='true'] :is(.sticky-add-to-cart__price, .sticky-add-to-cart__separator) {
      transition: opacity calc(var(--text-speed) * 1s) ease-out;
    }
  }

  /* Mobile adjustments — stack into two rows: variant info on top, full-width CTA below */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      flex-wrap: wrap;
      padding-inline: var(--padding-md);
      gap: var(--gap-sm);
    }

    .sticky-add-to-cart__info {
      flex: 1 0 100%;
    }

    .sticky-add-to-cart__actions {
      flex: 1 0 100%;
      gap: var(--gap-xs);
    }

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

    .sticky-add-to-cart__bar[data-cta-passed='false'] .sticky-add-to-cart__title {
      display: none;
    }

    .sticky-add-to-cart__bar[data-cta-passed='false'] .sticky-add-to-cart__info[data-singleton='true'] {
      display: none;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:87) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

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

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

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 1199px */
  @media screen and (min-width: 750px) and (max-width: 1199px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:95) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

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

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

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

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

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

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

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

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

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

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

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

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

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_ax-slide (INDEX:110) */
.slide__content {
		height: 100%;
		position: relative;
		z-index: var(--layer-flat);
	}

	.slide__content > * {
		margin: auto;
	}

	.slide__content.background-transparent {
		background-color: transparent;
	}

	slideshow-slide > .slide__image-container {
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute;
	}

	.slide__image-container > picture,
	.slide__image-container > picture > .slide__image,
	.slide__image-container > .slide__image,
	.slide__image-container > .slide__video,
	.slide__image-container > .slide__video-poster {
		position: relative;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Point focal Shopify de l'image (réglé par image dans l'admin) : le crop
		   suit le sujet quel que soit le visuel et la largeur d'écran */
		object-position: var(--slide-focal, center center);
	}

	@media screen and (max-width: 749px) {
		.slide__image-container > picture,
		.slide__image-container > picture > .slide__image,
		.slide__image-container > .slide__image,
		.slide__image-container > .slide__video,
		.slide__image-container > .slide__video-poster {
			object-position: var(--slide-focal-mobile, var(--slide-focal, center center));
		}
	}

	.slide__image-container > picture {
		display: block;
	}

	.slide__image-container > .slide__video-poster {
		position: absolute;
	}

	slideshow-slide .slide__image-container--rounded {
		border-radius: var(--corner-radius, 0);
	}

	/* Axome - Content layout: constrain .slide__content to 50% on desktop, full-width on mobile */
	@media screen and (min-width: 750px) {
		slideshow-slide.ax-slide--layout-half-left > .slide__content,
		slideshow-slide.ax-slide--layout-half-right > .slide__content {
			max-inline-size: 50%;
		}

		slideshow-slide.ax-slide--layout-half-left > .slide__content {
			margin-inline-start: 0;
			margin-inline-end: auto;
		}

		slideshow-slide.ax-slide--layout-half-right > .slide__content {
			margin-inline-start: auto;
			margin-inline-end: 0;
		}
	}

	/* Axome - Slide-wide clickable overlay link. Sits above the image, below the content
     so that sub-block links (button, badge) remain clickable thanks to .slide__content's z-index. */
	.slide__link {
		position: absolute;
		inset: 0;
		z-index: 2;
	}

	.slide__link:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -2px;
	}

	/* Hover-to-button propagation is provided by the .hover-button-group utility
     in base.css, applied on <slideshow-slide> when block_settings.link is set. */

	/* Axome - Visually hide text content but keep it in the DOM for SEO */
	.ax-slide--text-hidden .slide__content {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
/* END_BLOCK:_ax-slide */

/* START_BLOCK:_blog-post-card (INDEX:112) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  /* Overlay style: content sits on top of the image with a gradient fade */
  .blog-post-card--overlay {
    position: relative;
    overflow: hidden;
    background: var(--color-background);
  }

  .blog-post-card--overlay .blog-post-card__image-container {
    margin: 0;
  }

  .blog-post-card--overlay .blog-post-card__image {
    border-radius: 0;
    display: block;
    width: 100%;
  }

  .blog-post-card--overlay .blog-post-card__content {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding-block: 2.5rem 1.5rem;
    padding-inline: 1.5rem;
    background: linear-gradient(
      to bottom,
      transparent 0,
      var(--color-background) 2.5rem,
      var(--color-background) 100%
    );
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:113) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:114) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

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

/* START_BLOCK:_blog-post-featured-image (INDEX:115) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:116) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:117) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:118) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:119) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:120) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:121) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(> #header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:122) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

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

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

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:125) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:127) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:131) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }

  .featured-blog-posts-card__content h4,
  .featured-blog-posts-card__content h4 .text-block {
    font-size: var(--font-size--h3);
  }

  .featured-blog-posts-card__read-link {
    display: inline-block;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    font-size: 1rem;
    line-height: normal;
    margin-block-start: 0.4rem;
    font-weight: bold;
  }

  .featured-blog-posts-card__image-wrap {
    position: relative;
  }

  /* Overlay style: image + content stacked with gradient bleed and text overlap */
  .featured-blog-posts-card--overlay {
    position: relative;
    overflow: hidden;
    background: var(--color-background);
    aspect-ratio: 4 / 5;
  }

  @media screen and (max-width: 749px) {
    .featured-blog-posts-card--overlay {
      aspect-ratio: 3 / 4;
    }
  }

  .featured-blog-posts-card--overlay .featured-blog-posts-card__inner {
    gap: 0;
    height: 100%;
  }

  .featured-blog-posts-card--overlay .featured-blog-posts-card__image-wrap {
    margin: 0;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
  }

  .featured-blog-posts-card--overlay .featured-blog-posts-card__image-wrap picture,
  .featured-blog-posts-card--overlay .featured-blog-posts-card__image-wrap a {
    display: block;
    height: 100%;
    width: 100%;
  }

  .featured-blog-posts-card--overlay .featured-blog-posts-card__image {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
  }

  .featured-blog-posts-card--overlay .featured-blog-posts-card__content {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: auto;
    padding-block: 2.5rem 1.5rem;
    padding-inline: 1.5rem;
    background: linear-gradient(
      to bottom,
      transparent 0,
      var(--color-background) 7.5rem,
      var(--color-background) 100%
    );
  }

  .featured-blog-posts-card__tag {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: var(--layer-overlay, 2);
    padding: 0.4rem .5rem;
    background-color: var(--color-blue-NM);
    color: var(--color-white);
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    pointer-events: none;

    @media screen and (max-width: 749px) {
      padding: 0.4rem;
    }
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:132) */
.featured-blog-posts-card__image {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-blog-posts-title (INDEX:133) */
.featured-blog-posts .text-block h3,
  .featured-blog-posts h3 .text-block {
    font-size: var(--font-size--h2);
    line-height: 1.2;
  }
/* END_BLOCK:_featured-blog-posts-title */

/* START_BLOCK:_featured-product-gallery (INDEX:134) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:137) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:138) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_image (INDEX:141) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

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

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:145) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-details (INDEX:150) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

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

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

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

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

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:155) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

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

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_social-link (INDEX:156) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

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

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accordion (INDEX:158) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:article-card (INDEX:160) */
.article-card-block {
    display: flex;
    min-width: 0;
  }

  .article-card-block > .ax-article-card {
    flex: 1;
    width: 100%;
    min-width: 0;
  }
/* END_BLOCK:article-card */

/* START_BLOCK:ax-badge (INDEX:161) */
.ax-badge {
		font-family: var(--font-heading--family);
		font-size: var(--font-size--xs);
		font-weight: 400;
		line-height: normal;
		padding-block: 0.1875rem;
	}
/* END_BLOCK:ax-badge */

/* START_BLOCK:ax-citation (INDEX:162) */
.ax-citation {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24); /* 24px citation ↔ auteur */
    width: 100%;
    max-width: 36.25rem; /* 580px iso-maquette desktop, fluide sous 580 */
    color: inherit;
  }

  .ax-citation__head {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs); /* 8px surtitre ↔ citation */
  }

  .ax-citation__eyebrow {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--xs); /* 14px desktop */
    line-height: 1;
    text-transform: uppercase;
  }

  .ax-citation__quote {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--h3); /* fallback ; taille pilotée par quote_size (inline) */
    line-height: 1;
  }

  .ax-citation__author {
    display: flex;
    flex-direction: column;
    gap: var(--padding-2xs); /* 4px nom ↔ rôle */
  }

  .ax-citation__author--left { align-items: flex-start; }
  .ax-citation__author--center { align-items: center; }
  .ax-citation__author--right { align-items: flex-end; }

  .ax-citation__name {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--font-size--sm); /* 16px desktop */
    line-height: var(--line-height--body-tight);
  }

  .ax-citation__role {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-tight);
  }
/* END_BLOCK:ax-citation */

/* START_BLOCK:ax-size-guide (INDEX:165) */
.ax-size-guide {
    display: inline-flex;
  }

  .ax-size-guide__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-md);
    color: var(--color-foreground);
    cursor: pointer;
  }

  .ax-size-guide__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    color: currentColor;
  }

  .ax-size-guide__icon svg {
    width: 100%;
    height: auto;
  }

  .ax-size-guide__label {
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight, 1.2);
    border-block-end: var(--style-border-width, 1px) solid currentColor;
  }

  /* Modale centrée dans l'écran (override du modal top-slide de .dialog-modal,
     via la spécificité element+class). Centrage vertical par translate car
     margin:auto ne centre pas un dialog à height auto. */
  dialog.ax-size-guide__dialog {
    inset-block-start: 50%;
    inset-block-end: auto;
    inset-inline: 0;
    width: min(90vw, var(--narrow-content-width, 34rem));
    max-width: min(90vw, var(--narrow-content-width, 34rem));
    height: auto;
    max-height: 85vh;
    margin-inline: auto;
    padding: var(--padding-2xl);
    overflow-y: auto;
    transform: translateY(-50%);

    @media screen and (min-width: 1200px) {
      padding: var(--padding-4xl);
    }
  }

  @keyframes axSizeGuideIn {
    from { opacity: 0; transform: translate(0, calc(-50% - 1rem)); }
    to { opacity: 1; transform: translateY(-50%); }
  }

  @keyframes axSizeGuideOut {
    from { opacity: 1; transform: translateY(-50%); }
    to { opacity: 0; transform: translate(0, calc(-50% - 1rem)); }
  }

  dialog.ax-size-guide__dialog[open] {
    animation: axSizeGuideIn var(--animation-speed) var(--animation-easing) forwards;
  }

  dialog.ax-size-guide__dialog.dialog-closing {
    animation: axSizeGuideOut var(--animation-speed) var(--animation-easing) forwards;
  }

  .ax-size-guide__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    margin-block-end: var(--margin-lg);
  }

  .ax-size-guide__title {
    margin: 0;
  }

  /* Aligné sur le petit bouton « ajouter » des cards produit (ax-cross-card__add--icon) :
     carré gris clair arrondi + icône noire, version compacte. */
  .ax-size-guide__close {
    position: static;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background-color: var(--color-neutral-light);
    color: var(--color-black);
    border-radius: var(--style-border-radius-xs);
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);
  }

  .ax-size-guide__close:hover {
    background-color: var(--color-neutral);
  }

  .ax-size-guide__close svg {
    width: 1rem;
    height: 1rem;
  }

  .ax-size-guide__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--style-border-radius-sm);
  }
/* END_BLOCK:ax-size-guide */

/* START_BLOCK:ax-stock-progress-bar (INDEX:166) */
ax-stock-progress-bar:empty {
    display: none;
  }

  .ax-stock-progress-bar {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
  }

  .ax-stock-progress-bar__label {
    margin: 0;
    font-size: var(--ax-spb-label-size, var(--font-paragraph--size));
    line-height: var(--font-paragraph--line-height);
  }

  .ax-stock-progress-bar__track {
    overflow: hidden;
    block-size: 0.5rem;
    background: color-mix(in srgb, var(--color-foreground) 12%, transparent);
    border-radius: 999px;
  }

  .ax-stock-progress-bar__fill {
    display: block;
    inline-size: var(--ax-spb-progress, 0%);
    block-size: 100%;
    background: var(--ax-spb-fill, var(--color-foreground));
    border-radius: inherit;
    transition: inline-size var(--animation-speed) var(--animation-easing);
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-stock-progress-bar__fill {
      transition: none;
    }
  }
/* END_BLOCK:ax-stock-progress-bar */

/* START_BLOCK:comparison-slider (INDEX:172) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:173) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:174) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:176) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:178) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

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

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

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

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

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

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:181) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:183) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:184) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

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

  .image-block {
    display: flex;

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

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

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:186) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:187) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

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

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:189) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:190) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:191) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-club (INDEX:194) */
.product-club {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    padding: var(--gap-xs);
    overflow: clip;
    background-color: var(--color-blue-CLUB, #004de5);
    border-radius: var(--style-border-radius-xs);
    color: var(--color-white);
  }

  .product-club__columns {
    display: flex;
    align-items: stretch;
    gap: var(--gap-xs);
  }

  .product-club__col {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--padding-2xs);
    justify-content: center;
    min-width: 0;
  }

  .product-club__logo {
    display: block;
    width: 70px;
    height: 32px;
    object-fit: contain;
    object-position: left center;
  }

  .product-club__points {
    margin: 0;
    font-size: var(--font-size--xs);
    font-weight: 700;
    line-height: 1.2;
  }

  .product-club__benefits {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-club__benefit {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-size: var(--font-size--xs);
    font-weight: 400;
    line-height: 1.2;
  }

  .product-club__benefit::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 11px;
    background-color: currentcolor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 11' fill='none'%3E%3Cg stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M0.5 0.5L5.5 5.5L0.5 10.5'/%3E%3Cpath d='M6.5 0.5L11.5 5.5L6.5 10.5'/%3E%3Cpath d='M12.5 0.5L17.5 5.5L12.5 10.5'/%3E%3C/g%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }
/* END_BLOCK:product-club */

/* START_BLOCK:product-custom-property (INDEX:195) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-description-items (INDEX:196) */
.product-description-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    color: var(--color-foreground);
    font-size: var(--font-size--paragraph);
    font-weight: 500;
    line-height: var(--line-height--body-normal);
  }

  .product-description-items__item {
    display: grid;
    grid-template-columns: 10px 1fr;
    column-gap: var(--gap-sm);
    align-items: flex-start;
  }

  .product-description-items__icon {
    /* Aligne le check sur la baseline de la première ligne de texte */
    margin-block-start: 0.4em;
    color: var(--color-blue-NM);
  }
/* END_BLOCK:product-description-items */

/* START_BLOCK:product-estimated-delivery (INDEX:198) */
.product-estimated-delivery {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-size: var(--font-size--14);
    line-height: 1.2;
  }

  .product-estimated-delivery__dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
  }

  .product-estimated-delivery__dot--available {
    background-color: var(--color-instock);
  }

  .product-estimated-delivery__dot--oos {
    background-color: var(--color-outofstock);
  }

  .product-estimated-delivery__text {
    color: var(--color-foreground);
  }

  .product-estimated-delivery__text--emphasized {
    font-weight: 700;
    color: var(--color-blue-NM);
  }

  .product-estimated-delivery__separator {
    color: var(--color-foreground);
  }
/* END_BLOCK:product-estimated-delivery */

/* START_BLOCK:product-find-out-more (INDEX:199) */
.product-find-out-more {
		display: block;
		color: var(--color-foreground);
		font-size: var(--font-size--xs);
		font-weight: 400;
		line-height: var(--line-height--body-normal);
		text-decoration: underline;
		text-underline-offset: 0.25rem;
	}

	.product-find-out-more:hover,
	.product-find-out-more:focus-visible {
		text-decoration-thickness: 2px;
	}
/* END_BLOCK:product-find-out-more */

/* START_BLOCK:product-inventory (INDEX:200) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

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

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

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

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

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-reassurance (INDEX:202) */
.product-reassurance {
    /* The phantom sizer below defines the natural height (= tallest message);
       the swiper is positioned absolute on top so it cannot push the column
       (Swiper's internal wrapper is 4× wide in default slide layout). */
    display: block;
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    /* Pas de padding vertical : l'espacement autour du bloc appartient au contexte
       (hiérarchie 8/16/24 de la colonne infos produit). Ces 16px s'y ajoutaient et
       éloignaient le texte à 40px du bouton d'ajout au lieu de 24 (ticket 12743975306). */
    overflow: hidden;
    position: relative;
  }

  /* Phantom: stacks all messages in the same grid cell, invisible.
     Defines the height of .product-reassurance = tallest wrapped message. */
  .product-reassurance__sizer {
    display: grid;
    visibility: hidden;
    pointer-events: none;
  }

  .product-reassurance__sizer > * {
    grid-area: 1 / 1;
    /* Same paddings/typography as the visible slides so the measurement matches. */
    margin: 0;
    padding-inline-end: var(--padding-4xl);
    font-size: var(--font-size--14);
    line-height: var(--line-height--body-tight);
  }

  .product-reassurance__swiper {
    /* Absolute positioning decouples the swiper from intrinsic sizing — its
       size is dictated by .product-reassurance, not by the wide inner wrapper.
       `inset: 0` et non `1rem` : cet inset reflétait le padding-block du parent,
       supprimé depuis (l'espacement appartient à la colonne). Le laisser encastrait
       le carrousel de 16px dans une boîte de 17px → texte invisible. */
    position: absolute;
    inset: 0;
    /* Override the global white pagination — use foreground for product page. */
    --ax-pagination-color: var(--color-foreground);
    --ax-pagination-opacity-idle: var(--opacity-20);
  }

  .product-reassurance__swiper swiper-slide {
    box-sizing: border-box;
    /* Reserve space on the right so wrapped text never sits behind pagination. */
    padding-inline-end: 7rem;
  }

  .product-reassurance__swiper--single swiper-slide {
    padding-inline-end: 0;
  }

  .product-reassurance__text {
    margin: 0;
    font-size: var(--font-size--14);
    line-height: var(--line-height--body-tight);
  }

  /* Pagination — right-aligned, vertically centered inline with the text. */
  .product-reassurance__swiper::part(pagination) {
    position: absolute;
    inset-inline-end: 0;
    inset-inline-start: auto;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: auto;
    display: flex;
    align-items: center;
    z-index: 2;
  }
/* END_BLOCK:product-reassurance */

/* START_BLOCK:product-recommendations (INDEX:203) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:product-top-line (INDEX:206) */
.product-top-line {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: var(--line-height--body-normal, 1.25);
  }
/* END_BLOCK:product-top-line */

/* START_BLOCK:product-wishlist (INDEX:207) */
.product-wishlist {
    display: inline-flex;
  }

  .product-wishlist .wishlist-button--pdp {
    --wishlist-button-size: 1.5rem;
  }
/* END_BLOCK:product-wishlist */

/* START_BLOCK:review (INDEX:209) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:211) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

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

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

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

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

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:212) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:213) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:216) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }

  .video-block__media--mobile {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .video-block__media--desktop {
      display: none;
    }

    .video-block__media--mobile {
      display: block;
    }

    /* Le cadre est dimensionné par le bouton d'aperçu (--video-aspect-ratio, posé
       en inline avec le ratio natif de la vidéo) : c'est lui qu'il faut basculer. */
    .video-block__media .deferred-media__poster-button,
    .video-block__media .deferred-media__poster-button img,
    .video-block__media .deferred-media__poster-button ~ video {
      aspect-ratio: var(--size-style-aspect-ratio-mobile, var(--size-style-aspect-ratio));
    }
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:217) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

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

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

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

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

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

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

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:ax-article-card (INDEX:220) */
.ax-article-card {
    position: relative;
    display: flex;
    min-width: 0;
  }

  .ax-article-card--vertical {
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .ax-article-card--horizontal {
    flex-direction: row;
    align-items: center;
    gap: var(--gap-lg);

    @media (min-width: 1200px) {
      gap: var(--gap-24);
    }
  }

  /* Overlay : clic souris sur toute la carte, masqué du clavier/SR (le titre porte le lien accessible). */
  .ax-article-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .ax-article-card__media {
    position: relative;
    display: flex;
    align-items: flex-start;
    /* Carré par défaut ; une section peut imposer un autre ratio en posant
       `--ax-article-card-media-ratio` (cf. réglage « format de l'image »). */
    aspect-ratio: var(--ax-article-card-media-ratio, 1 / 1);
    overflow: hidden;
    padding: var(--gap-xs);
    border-radius: var(--style-border-radius-xs);
    background-color: var(--color-neutral-light);
  }

  /* Éléments de la variante custom (ax-article-card-custom) */
  .ax-article-card__excerpt {
    margin: 0;
    font-size: var(--font-size--14);
    line-height: 1.2;
  }

  .ax-article-card__button {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin-block-start: var(--gap-xs);
  }

  .ax-article-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      223.6deg,
      transparent 50%,
      var(--ax-scrim-color, rgb(0 0 0 / 0.8)) 100%
    );
    pointer-events: none;
  }

  /* État sans image : le placeholder reste centré dans le carré gris. */
  .ax-article-card__image--placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* La carte horizontale (Top articles) reste carrée : son image est une vignette
     latérale de largeur fixe, un ratio portrait y déséquilibrerait la ligne. */
  .ax-article-card--horizontal .ax-article-card__media {
    flex: 0 0 auto;
    width: clamp(7.5rem, 36vw, 11.5625rem);
    aspect-ratio: 1 / 1;
  }

  .ax-article-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--style-border-radius-xs);
    transition: transform var(--animation-speed-extra-slow) var(--animation-easing);
  }

  @media (hover: hover) {
    .ax-article-card:hover .ax-article-card__image {
      transform: scale(1.08);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-article-card__image {
      transition: none;
    }
  }

  .ax-article-card__ribbon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem var(--gap-xs);
    border-radius: var(--style-border-radius-xs);
    background-color: var(--color-blue-NM);
    color: var(--color-white);
    font-family: var(--font-heading--family);
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
    text-transform: uppercase;
  }

  /* Alignement par le haut : dans une grille ou un carrousel, les cartes sont étirées
     à la même hauteur, mais leurs titres n'ont pas le même nombre de lignes. Centrer le
     corps décalait alors chaque titre d'une hauteur différente, et la rangée perdait sa
     ligne de base commune. En orientation horizontale, le corps fait la hauteur de son
     contenu (la carte est en `align-items: center`) : ce réglage n'y change rien. */
  .ax-article-card__body {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--gap-lg);
    min-width: 0;
  }

  .ax-article-card .ax-article-card__title {
    margin: 0;
    line-height: 1;
  }

  .ax-article-card__title-link {
    color: inherit;
    text-decoration: none;
  }

  .ax-article-card__title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  /* Souligné animé du thème (.link-underlined) : se rétracte au hover de la carte
     via .hover-button-group:has(a:hover). On ne garde ici que taille/couleur. */
  .ax-article-card__cta {
    align-self: flex-start;
    font-size: var(--font-size--lg);
    line-height: 1;
    color: var(--color-foreground);
  }
/* END_SNIPPET:ax-article-card */

/* START_SNIPPET:ax-article-meta (INDEX:221) */
.ax-article-meta {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: var(--gap-24);
    background-color: var(--color-neutral-light);
    border-radius: var(--style-border-radius-xs);

    @media screen and (max-width: 1199px) {
      padding: var(--gap-lg);
    }
  }

  .ax-article-meta__info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  .ax-article-meta__byline {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--14);
    line-height: 1;
    color: var(--color-foreground);
  }

  .ax-article-meta__author,
  .ax-article-meta__date {
    display: block;
  }

  .ax-article-meta__date {
    margin-block-start: var(--gap-2xs);
  }

  .ax-article-meta__comments {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--font-size--14);
    line-height: 1.2;
    color: var(--color-foreground);
  }

  .ax-article-meta__share {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
  }

  .ax-article-meta__share-label {
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--font-size--14);
    color: var(--color-foreground);
  }

  .ax-article-meta__share-links {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
  }

  .ax-article-meta__share-link {
    display: inline-flex;
    color: var(--color-foreground);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .ax-article-meta__share-link:hover {
    opacity: var(--opacity-60);
  }

  .ax-article-meta__share-link svg {
    width: 1.5rem;
    height: 1.5rem;
  }
/* END_SNIPPET:ax-article-meta */

/* START_SNIPPET:ax-article-related-articles (INDEX:222) */
.ax-article-related-articles {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24);
  }

  .ax-article-related-articles__heading {
    margin: 0;
  }

  .ax-article-related-articles__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  /* Overrides iso-maquette pour le contexte « Découvrir aussi » (carte plus petite
     que dans le blog) : image 120px, gap 16px, titre H4 18px (vs 185 / 24 / 28 au blog). */
  .ax-article-related-articles .ax-article-card--horizontal {
    gap: var(--gap-lg);
  }

  .ax-article-related-articles .ax-article-card--horizontal .ax-article-card__media {
    width: 7.5rem;
  }

  .ax-article-related-articles .ax-article-card__title {
    font-size: var(--font-size--lg);
  }

  /* Badge catégorie iso-maquette (node 4148:75822) : tiny 12px fixe (le 14px du
     token responsive débordait de la vignette 120px) et padding 2/4 qui recentre
     optiquement le Gustavo dans la pastille. */
  .ax-article-related-articles .ax-article-card__ribbon {
    padding-block: 0.125rem 0.25rem;
    font-size: var(--font-size--12);
    max-width: 100%;
  }

  /* Mobile : Push-swipe — carousel horizontal scroll-snap (sans JS). */
  @media screen and (max-width: 1199px) {
    .ax-article-related-articles__list {
      flex-direction: row;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-margin);
      scrollbar-width: none;
      margin-inline: calc(-1 * var(--page-margin));
      padding-inline: var(--page-margin);
    }

    .ax-article-related-articles__list::-webkit-scrollbar {
      display: none;
    }

    .ax-article-related-articles__list > * {
      flex: 0 0 auto;
      width: clamp(16rem, 78vw, 22rem);
      scroll-snap-align: start;
    }

    /* Carte verticale en mobile (image carrée pleine largeur en haut + titre 20px),
       vs horizontale en desktop — cf. maquette Push-swipe mobile. */
    .ax-article-related-articles .ax-article-card--horizontal {
      flex-direction: column;
      gap: var(--gap-xs);
    }

    .ax-article-related-articles .ax-article-card--horizontal .ax-article-card__media {
      width: 100%;
    }

    .ax-article-related-articles .ax-article-card__title {
      font-size: var(--font-h3--size);
    }

    .ax-article-related-articles .ax-article-card__cta {
      font-size: var(--font-size--16);
    }
  }
/* END_SNIPPET:ax-article-related-articles */

/* START_SNIPPET:ax-article-related-products (INDEX:223) */
.ax-article-related-products {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24);
  }

  .ax-article-related-products__heading {
    margin: 0;
  }

  .ax-article-related-products__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }
/* END_SNIPPET:ax-article-related-products */

/* START_SNIPPET:ax-article-toc (INDEX:224) */
.ax-article-toc {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: var(--gap-24);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);

    @media screen and (max-width: 1199px) {
      padding: var(--gap-lg);
    }
  }

  .ax-article-toc[hidden] {
    display: none;
  }

  .ax-article-toc__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--lg);
    line-height: 1;
    color: var(--color-foreground);

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

  .ax-article-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  /* Soulignement animé inversé (.underline-anim--reverse) — non souligné au repos,
     souligné au hover/focus. */
  .ax-article-toc__link {
    display: inline;
    font-size: var(--font-size--16);
    line-height: 1.2;
    color: var(--color-foreground);
  }

  /* Lien de la section active (scrollspy) — souligné en permanence. */
  .ax-article-toc .ax-article-toc__link--active {
    background-size: 100% var(--underline-anim-thickness, 1px);
  }
/* END_SNIPPET:ax-article-toc */

/* START_SNIPPET:ax-collection-card-style (INDEX:227) */
.ax-collection-list__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  @media screen and (min-width: 1200px) {
    .ax-collection-list__grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  .ax-collection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    aspect-ratio: var(--ax-cl-card-ratio, 1 / 1);
    padding: 0.5rem; /* mobile */
    overflow: hidden;
    background-color: var(--color-background);
    color: var(--color-foreground);
    text-decoration: none;
  }

  @media screen and (min-width: 750px) {
    .ax-collection-card {
      padding: 1rem;
    }
  }

  .ax-collection-card--no-link {
    pointer-events: none;
  }

  .ax-collection-card__picture,
  .ax-collection-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .ax-collection-card__image {
    object-fit: cover;
    /* Point focal Shopify du visuel (réglé par fichier dans l'admin) ; à défaut, centre. */
    object-position: var(--ax-collection-card-focal, center);
    transition: transform var(--animation-speed-extra-slow) var(--animation-easing);
    will-change: transform;
    backface-visibility: hidden;
  }

  /* Sous 990px c'est l'image mobile qui est servie (cf. `<source>` de `ax-collection-card`) :
     elle a son propre point focal, sinon celui du desktop, sinon le centre. */
  @media screen and (max-width: 989px) {
    .ax-collection-card__image {
      object-position: var(--ax-collection-card-focal-mobile, var(--ax-collection-card-focal, center));
    }
  }

  @media (hover: hover) {
    .ax-collection-card:hover .ax-collection-card__image {
      transform: scale(1.05);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-collection-card__image {
      transition: none;
    }
  }

  .ax-collection-card__title {
    position: relative;
    z-index: var(--layer-flat);
    margin: 0;
    color: inherit;
    text-align: center;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1;
    font-size: 0.875rem; /* 14px mobile */
  }

  @media screen and (min-width: 750px) {
    .ax-collection-card__title {
      font-size: 1.25rem; /* 20px desktop */
    }
  }

  .ax-collection-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }

  /* Skeleton ISO — same ratio as the cards (0 CLS), grey shimmer. Explicit colours
     (no CSS vars) so the background can't be dropped in any scope. */
  @keyframes ax-collection-card-shimmer {
    to {
      background-position-x: -150%;
    }
  }

  .ax-collection-card--skeleton {
    aspect-ratio: var(--ax-cl-card-ratio, 1 / 1);
    /* Anti-collapse safety net before aspect-ratio applies (FOUC): reserve a height
       via the viewport, kept UNDER the real height so aspect-ratio takes over without
       overshoot. 3 cols default, 6 cols ≥ 1200px. */
    min-height: min(28vw, 240px);
    background-color: var(--color-skeleton);
    background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 80%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position-x: 150%;
    animation: ax-collection-card-shimmer 1.5s linear infinite;
  }

  @media screen and (min-width: 1200px) {
    .ax-collection-card--skeleton {
      min-height: min(13vw, 270px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-collection-card--skeleton {
      animation: none;
    }
  }
/* END_SNIPPET:ax-collection-card-style */

/* START_SNIPPET:ax-collection-cesure-image (INDEX:229) */
.ax-collection-cesure-image {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: var(--padding-lg);
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
    color: var(--color-white);
    text-decoration: none;
  }

  .ax-collection-cesure-image__media {
    position: absolute;
    inset: 0;
    display: block;
  }

  .ax-collection-cesure-image__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ax-collection-cesure-image__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
  }

  .ax-collection-cesure-image__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--xl);
    line-height: var(--line-height--heading-tight);
  }

  .ax-collection-cesure-image__text {
    margin: 0;
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
  }

  .ax-collection-cesure-image__button,
  .ax-collection-cesure-image__button:hover {
    --button-background-color: var(--color-white);
    --button-border-color: var(--color-white);
    --button-color: var(--color-black);
    --button-font-size: var(--font-size--16);
  }

  .ax-collection-cesure-image__button--full-width {
    width: 100%;
  }
/* END_SNIPPET:ax-collection-cesure-image */

/* START_SNIPPET:ax-collection-cesure-stats (INDEX:230) */
.ax-collection-cesure-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-lg);
    width: 100%;
    height: 100%;
    padding: var(--padding-sm);
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
    background-color: var(--ax-cesure-stats-background, var(--color-black));
    color: var(--ax-cesure-stats-color, var(--color-white));
    text-align: center;

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

  .ax-collection-cesure-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs);
    width: 100%;
  }

  .ax-collection-cesure-stats__icon {
    display: block;
    width: auto;
    max-width: 100%;
    height: 1.75rem;

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

  .ax-collection-cesure-stats__value {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--heading-tight);

    @media screen and (min-width: 750px) {
      font-size: var(--font-size--3xl);
    }
  }

  .ax-collection-cesure-stats__text {
    margin: 0;
    font-size: var(--font-size--14);
    line-height: var(--line-height--body-tight);

    @media screen and (min-width: 750px) {
      font-size: var(--font-size--16);
    }
  }
/* END_SNIPPET:ax-collection-cesure-stats */

/* START_SNIPPET:ax-collection-cesure-video (INDEX:231) */
.ax-collection-cesure-video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
  }

  .ax-collection-cesure-video__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ax-collection-cesure-video__sound {
    position: absolute;
    inset-block-end: var(--padding-lg);
    inset-inline-end: var(--padding-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--color-white);
    background-color: rgb(0 0 0 / 0.4);
    border: none 0;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
  }

  .ax-collection-cesure-video__sound[hidden] {
    display: none;
  }

  .ax-collection-cesure-video__sound:hover {
    background-color: rgb(0 0 0 / 0.6);
  }

  .ax-collection-cesure-video__sound-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ax-collection-cesure-video__sound-icon[hidden] {
    display: none;
  }

  .ax-collection-cesure-video__sound-icon svg {
    width: 1rem;
    height: auto;
  }
/* END_SNIPPET:ax-collection-cesure-video */

/* START_SNIPPET:ax-comparateur-card (INDEX:235) */
/* Pendant le chargement (data-state='loading', spinner global base.css),
     le contenu du CTA s'efface pour laisser place au spinner. */
  .ax-comparateur-card__cta[data-state='loading']
    :is(.ax-comparateur-card__cta-label, .ax-comparateur-card__price, .ax-comparateur-card__cta-sep) {
    opacity: 0;
  }

  .ax-comparateur-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: 1.5rem;
    background-color: var(--color-neutral-light);
    border-radius: var(--style-border-radius-xs);
  }

  .ax-comparateur-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(6rem, 38%, 9.8125rem);
    gap: var(--gap-lg);
    align-items: start;
  }

  .ax-comparateur-card__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-lg);
  }

  .ax-comparateur-card__title {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1;
  }

  .ax-comparateur-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2xs);
  }

  .ax-comparateur-card__tag {
    display: inline-block;
    padding: 0.125rem 0.25rem;
    background-color: var(--color-blue-NM);
    color: var(--color-white);
    font-family: var(--font-heading--family);
    font-size: 0.875rem;
    line-height: 1.2;
  }

  .ax-comparateur-card__media {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
  }

  .ax-comparateur-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ax-comparateur-card__specs {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .ax-comparateur-card__spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding-block: 0.75rem;
    border-block-end: 1px solid var(--color-neutral);
    font-size: 0.875rem;
    line-height: 1.2;
  }

  .ax-comparateur-card__spec-key {
    margin: 0;
  }

  .ax-comparateur-card__spec-value {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    text-align: end;
  }

  .ax-comparateur-card__benefits {
    display: flex;
    flex-direction: column;
    margin-block-start: calc(1.25rem - var(--gap-lg));
  }

  .ax-comparateur-card__benefits-title {
    margin: 0 0 1.5rem;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 0.875rem;
  }

  /* Grid plutôt que flex + `calc(50% - gap)` : le flex-basis soustrayait le gap
     entier à CHAQUE tuile (au lieu de la moitié), laissant un vide à droite.
     Le grid répartit l'espace exactement, quel que soit le gap. */
  .ax-comparateur-card__benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-xs);
  }

  .ax-comparateur-card__benefit {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    padding: 0.5rem;
    border: 1px solid var(--color-neutral);
    font-size: 0.75rem;
    line-height: 1.1;
  }

  .ax-comparateur-card__benefit-icon {
    flex-shrink: 0;
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
  }

  .ax-comparateur-card__benefit-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ax-comparateur-card__benefit-label {
    min-width: 0;
  }

  /* Très petits écrans : typo bénéfices réduite pour garder les libellés
     entiers dans leur encadré. */
  @media screen and (max-width: 399px) {
    .ax-comparateur-card__benefit {
      font-size: 0.625rem;
    }
  }

  /* Plage desktop où les 3 tuiles sont étroites : on réduit la typo bénéfices
     pour que les longs libellés restent dans leur encadré (mots entiers). */
  @media screen and (min-width: 1200px) and (max-width: 1400px) {
    .ax-comparateur-card__benefit {
      font-size: 0.625rem;
    }
  }

  /* Les cartes d'une rangée sont étirées à la hauteur de la plus haute : le mou
     vertical est absorbé ICI, au-dessus des sélecteurs, et non entre le dernier
     sélecteur et le CTA. Le duo sélecteur + CTA reste donc soudé au `gap` de la
     carte (16px) sur toutes les cartes, les CTA restant alignés en bas.
     L'`auto` vivait sur le formulaire : l'écart sélecteur → CTA valait 16px sur
     la carte la plus haute mais montait à 35-40px sur les autres. */
  .ax-comparateur-card__selectors {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-block-start: auto;
  }

  .ax-comparateur-card__select-wrap {
    position: relative;
    display: block;
  }

  .ax-comparateur-card__select-trigger {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    width: 100%;
    padding: 0.875rem 1rem;
    background-color: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-black);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    list-style: none;
  }

  .ax-comparateur-card__select-trigger::-webkit-details-marker { display: none; }
  .ax-comparateur-card__select-trigger::marker { content: ''; }

  .ax-comparateur-card__select-label {
    flex: 0 1 auto;
    text-align: start;
    padding-block: 0.1875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ax-comparateur-card__select-chevron {
    flex-shrink: 0;
    margin-inline-start: auto;
    display: inline-flex;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-black);
    transition: transform var(--animation-values);
  }

  .ax-comparateur-card__select-chevron svg {
    width: 100%;
    height: 100%;
  }

  .ax-comparateur-card__select-wrap[open] .ax-comparateur-card__select-chevron {
    transform: rotate(180deg);
  }

  .ax-comparateur-card__select-wrap[open] .ax-comparateur-card__select-trigger {
    border-bottom-color: transparent;
  }


  .ax-comparateur-card__select-list {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: 100%;
    z-index: var(--layer-raised);
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    border-block-start: none;
    /* Plafond de hauteur par device — le JS ne fait que le réduire si le bas de
       l'écran arrive avant (cf. ax-comparateur-card.js). */
    max-height: var(--select-list-max-height, 18rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Scrollbar stylée pour desktop (souris) */
    scrollbar-width: thin;
    scrollbar-color: var(--color-gris-moyen) transparent;

    /* Indication de scroll indépendante de la scrollbar native : sur iOS/macOS
       celle-ci est en overlay et n'apparaît que PENDANT le scroll — la liste
       tronquée passait donc pour « coupée » (retour client). Ombres en dégradés
       `local`/`scroll` : elles se révèlent quand il reste du contenu, se
       résorbent en fin de course, et n'apparaissent pas si tout tient. */
    background-image:
      linear-gradient(var(--color-white) 30%, transparent),
      radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 0.18), transparent),
      linear-gradient(transparent, var(--color-white) 70%),
      radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 0.18), transparent);
    background-position: top, top, bottom, bottom;
    background-size: 100% 2.5rem, 100% 0.75rem, 100% 2.5rem, 100% 0.75rem;
    background-repeat: no-repeat;
    background-attachment: local, scroll, local, scroll;

    /* Mobile : plafond calé pour que les cas courants (jusqu'à ~7 saveurs)
       s'affichent ENTIÈREMENT — pas de troncature à expliquer à l'utilisateur.
       Au-delà, le scroll s'engage et les ombres ci-dessus l'indiquent (les
       scrollbars iOS étant en overlay, invisibles au repos). */
    @media screen and (max-width: 1199px) {
      --select-list-max-height: 20rem;
    }
  }

  .ax-comparateur-card__select-list::-webkit-scrollbar {
    width: 0.5rem;
  }

  .ax-comparateur-card__select-list::-webkit-scrollbar-track {
    background-color: var(--color-neutral-light);
  }

  .ax-comparateur-card__select-list::-webkit-scrollbar-thumb {
    background-color: var(--color-gris-moyen);
    border-radius: var(--style-border-radius-50);
  }

  .ax-comparateur-card__select-count {
    flex-shrink: 0;
    font-weight: normal;
    color: var(--color-gris-moyen);
  }

  .ax-comparateur-card__select-item {
    margin: 0;
  }

  .ax-comparateur-card__select-option {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    width: 100%;
    padding: 0.625rem 1rem;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1rem;
    line-height: normal;
    cursor: pointer;
  }

  .ax-comparateur-card__select-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .ax-comparateur-card__select-option:hover,
  .ax-comparateur-card__select-option:has(input:focus-visible),
  .ax-comparateur-card__select-option:has(input:checked) {
    background-color: var(--color-neutral-light);
  }

  /* Libellé + badges : 6px iso-maquette (le gap 8px du parent reste entre la
     pastille de couleur et ce groupe). */
  .ax-comparateur-card__select-value {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    /* Petits écrans : quand nom long + 2 badges ne tiennent pas, ce sont les
       badges qui passent à la ligne — le nom reste lisible d'un seul tenant. */
    flex-wrap: wrap;
  }

  .ax-comparateur-card__select-name {
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Les badges basculent à la ligne en bloc, jamais l'un sans l'autre. */
  .ax-comparateur-card__select-tags {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .ax-comparateur-card__select-tags:empty {
    display: none;
  }

  /* Le trigger reste sur une seule ligne : c'est le nom qui s'ellipse.
     Pas de `flex: 1` ici, sinon le compteur serait repoussé contre le caret :
     pastille · label · compteur restent groupés à gauche (cf. maquette), le
     caret étant renvoyé à droite par son propre `margin-inline-start: auto`. */
  .ax-comparateur-card__select-value--trigger {
    flex: 0 1 auto;
    flex-wrap: nowrap;
  }

  .ax-comparateur-card__select-item--unavailable .ax-comparateur-card__select-option {
    color: var(--color-gris-moyen);
    cursor: not-allowed;
  }

  .ax-comparateur-card__select-item--unavailable .ax-flavor-badge {
    opacity: var(--opacity-40);
  }

  .ax-comparateur-card__select-item--unavailable .ax-comparateur-card__swatch {
    opacity: var(--opacity-40);
  }

  .ax-comparateur-card__swatch {
    flex-shrink: 0;
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--color-neutral);
  }

  .ax-comparateur-card__form {
    margin: 0;
  }

  /* Produit sans variante : pas de bloc sélecteurs, c'est le formulaire qui reprend
     l'alignement du CTA en bas de carte. */
  .ax-comparateur-card:not(:has(.ax-comparateur-card__selectors)) .ax-comparateur-card__form {
    margin-block-start: auto;
  }

  .ax-comparateur-card__cta {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-lg);
    padding: 0.75rem 1.875rem 0.875rem;
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity var(--animation-values);
  }

  /* Plage desktop étroite (3 tuiles serrées) : gap CTA réduit à 8px pour que
     « prix | Ajouter au panier » tienne sans se serrer. */
  @media screen and (min-width: 1200px) and (max-width: 1300px) {
    .ax-comparateur-card__cta {
      gap: var(--gap-xs);
    }
  }

  .ax-comparateur-card__cta[data-state='loading'] {
    cursor: wait;
  }

  .ax-comparateur-card__cta[data-state='loading'] .ax-comparateur-card__price,
  .ax-comparateur-card__cta[data-state='loading'] .ax-comparateur-card__cta-sep,
  .ax-comparateur-card__cta[data-state='loading'] .ax-comparateur-card__cta-label {
    opacity: 0;
  }

  .ax-comparateur-card__cta:hover:not([disabled]),
  .ax-comparateur-card__cta:focus-visible:not([disabled]) {
    opacity: var(--opacity-80);
  }

  .ax-comparateur-card__cta[disabled] {
    background-color: var(--color-gris-moyen);
    cursor: not-allowed;
  }

  .ax-comparateur-card__cta[disabled] .ax-comparateur-card__price,
  .ax-comparateur-card__cta[disabled] .ax-comparateur-card__cta-sep {
    display: none;
  }

  .ax-comparateur-card__cta-sep {
    display: inline-block;
    width: 1px;
    height: 1rem;
    background-color: currentColor;
  }

  .ax-comparateur-card__link {
    align-self: center;
    text-align: center;
    font-size: 0.875rem;
    color: inherit;
  }

  .ax-comparateur-card--placeholder {
    align-items: center;
    justify-content: center;
    text-align: center;
    font-style: italic;
    min-height: 20rem;
  }
/* END_SNIPPET:ax-comparateur-card */

/* START_SNIPPET:ax-flavor-badges (INDEX:240) */
.ax-flavor-badge {
    flex-shrink: 0;
    padding: 0.125rem 0.25rem;
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--12);
    line-height: 1.2;
  }
/* END_SNIPPET:ax-flavor-badges */

/* START_SNIPPET:ax-product-card-cross (INDEX:246) */
.ax-cross-card {
    display: flex;
    align-items: flex-end;
    gap: var(--gap-xs);
    width: 100%;
    min-width: 0;
    padding: var(--padding-xs);
    background-color: rgb(247 247 247 / var(--opacity-80));
    border-radius: var(--style-border-radius-xs);
  }

  .ax-cross-card__image-wrap {
    flex-shrink: 0;
    width: 6.25rem;
    height: 6.25rem;
    overflow: hidden;
    background: var(--color-neutral-light);
    border-radius: var(--style-border-radius-xs);

    @media screen and (max-width: 1199px) {
      width: 3.75rem;
      height: 3.75rem;
    }
  }

  .ax-cross-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ax-cross-card__info {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-xs);
  }

  .ax-cross-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);

    @media screen and (max-width: 1199px) {
      gap: var(--gap-3xs);
    }
  }

  .ax-cross-card__title {
    color: var(--color-black);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--h5);
    line-height: 1;
    text-decoration: none;
  }

  .ax-cross-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--gap-3xs);
    color: var(--color-black);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
  }

  .ax-cross-card__price-value {
    font-size: var(--font-size--h4);
    line-height: 1;
  }

  .ax-cross-card__price-compare {
    font-family: var(--font-heading--family);
    font-weight: normal;
    font-size: var(--font-size--h4);
    line-height: 1;
    color: var(--color-gris-moyen);
  }

  .ax-cross-card__form {
    display: flex;
    align-items: stretch;
    gap: var(--gap-xs);
    margin: 0;
    width: 100%;
  }

  .ax-cross-card__select {
    flex-shrink: 0;
    position: relative;
  }

  .ax-cross-card__select-details {
    position: relative;
  }

  .ax-cross-card__select-trigger {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 2.75rem;
    padding-inline: 1.125rem 0.75rem;
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-black);
    border-radius: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--h4);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
  }

  .ax-cross-card__select-trigger::-webkit-details-marker { display: none; }
  .ax-cross-card__select-trigger::marker { content: ''; }

  .ax-cross-card__select-chevron {
    flex-shrink: 0;
    display: inline-flex;
    width: 1.0625rem;
    height: 1.0625rem;
    color: var(--color-black);
    transition: transform var(--animation-values);
  }

  .ax-cross-card__select-chevron svg { width: 100%; height: 100%; }

  .ax-cross-card__select-details[open] .ax-cross-card__select-chevron { transform: rotate(180deg); }

  .ax-cross-card__options {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 100%;
    z-index: var(--layer-overlay, 10);
    min-width: 100%;
    width: max-content;
    max-width: 16rem;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    max-height: 14rem;
    overflow-y: auto;
  }

  .ax-cross-card__option { margin: 0; }

  .ax-cross-card__option-label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.625rem 1.125rem;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--16);
    line-height: 1;
    cursor: pointer;
  }

  .ax-cross-card__option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .ax-cross-card__option-label:hover,
  .ax-cross-card__option-label:has(.ax-cross-card__option-input:checked) {
    background: var(--color-neutral-light);
  }

  .ax-cross-card__option--unavailable .ax-cross-card__option-label {
    color: var(--color-gris-moyen);
    cursor: not-allowed;
  }

  .ax-cross-card__add--full {
    flex: 1;
    min-width: 0;
    height: 2.75rem;
    min-height: 0;
    padding-block: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  /* Bouton icône sac (mobile only) */
  .ax-cross-card__add--icon {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background-color: var(--color-neutral-light);
    color: var(--color-black);
    border: none;
    border-radius: var(--style-border-radius-xs);
    cursor: pointer;
    transition: background-color var(--animation-values);
  }

  .ax-cross-card__add--icon:hover {
    background-color: var(--color-neutral);
  }

  .ax-cross-card__add--icon .svg-wrapper {
    width: 1.125rem;
    height: 1.125rem;
    display: inline-flex;
  }

  .ax-cross-card__add--icon svg {
    width: 100%;
    height: 100%;
  }

  /* Mobile/tablette : sélecteur + bouton plein masqués, icône sac visible */
  @media screen and (max-width: 1199px) {
    .ax-cross-card {
      align-items: center;
    }

    .ax-cross-card__info {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .ax-cross-card__text {
      flex: 1;
      min-width: 0;
    }

    .ax-cross-card__form {
      width: auto;
      flex-shrink: 0;
      align-items: center;
    }

    .ax-cross-card__select,
    .ax-cross-card__add--full {
      display: none;
    }

    .ax-cross-card__add--icon {
      display: inline-flex;
    }
  }
/* END_SNIPPET:ax-product-card-cross */

/* START_SNIPPET:ax-product-card-mini (INDEX:247) */
.ax-product-card-mini {
		display: flex;
		gap: var(--gap-xs);
		padding: var(--padding-xs);
		background-color: rgb(255 255 255 / var(--opacity-80));
		border-radius: var(--style-border-radius-xs);
		min-width: 0;
		align-items: center;
	}

	.ax-product-card-mini__image-wrap {
		flex-shrink: 0;
		width: 3.75rem;
		height: 3.75rem;
		overflow: hidden;
		background: var(--color-neutral-light);
	}

	.ax-product-card-mini__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.ax-product-card-mini__info {
		display: flex;
		flex-direction: column;
		gap: var(--gap-3xs);
		min-width: 0;
		flex: 1;
		color: var(--color-foreground);
	}

	.ax-product-card-mini__title {
		margin: 0;
		color: var(--color-black);
		font-family: var(--font-heading--family);
		font-size: 0.875rem;
		font-weight: var(--font-heading--weight);
		line-height: var(--line-height--heading-tight);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.ax-product-card-mini__variant-count {
		color: var(--color-black);
		font-family: var(--font-body--family);
		font-size: var(--font-size--xs);
		line-height: var(--line-height--body-tight);
		opacity: var(--opacity-60);
	}

	.ax-product-card-mini__cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap-xs);
		width: 100%;
	}

	.ax-product-card-mini__price {
		color: var(--color-black);
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: var(--gap-3xs);
	}

	.ax-product-card-mini__price-prefix {
		font-family: var(--font-heading--family);
		font-size: var(--font-size--xs);
		line-height: 1;
		opacity: var(--opacity-60);
	}

	.ax-product-card-mini__price-value {
		font-family: var(--font-heading--family);
		font-weight: var(--font-heading--weight);
		line-height: 1;
		color: inherit;
	}

	.ax-product-card-mini__price-compare {
		font-family: var(--font-body--family);
		font-size: 0.875rem;
		text-decoration: line-through;
		opacity: var(--opacity-60);
	}

	.ax-product-card-mini--lg {
		align-items: flex-start;
		gap: var(--gap-lg);
		padding: var(--padding-lg);
		background-color: var(--color-white);

		@media screen and (max-width: 1199px) {
			gap: var(--gap-xs);
			padding: var(--padding-xs);
		}
	}

	.ax-product-card-mini--lg .ax-product-card-mini__image-wrap {
		width: 6.25rem;
		height: 6.25rem;

		@media screen and (max-width: 1199px) {
			width: 3.75rem;
			height: 3.75rem;
		}
	}

	.ax-product-card-mini--lg .ax-product-card-mini__title {
		font-size: var(--font-size--h4);


		@media screen and (max-width: 1199px) {
			font-size: var(--font-size--sm);
			margin-block-end: 0.3125rem;
		}
	}

	.ax-product-card-mini--lg .ax-product-card-mini__price-value {
		color: var(--color-blue-NM);
		font-size: var(--font-size--h4);
	}

	.ax-product-card-mini--lg .ax-product-card-mini__price-compare {
		color: var(--color-gris-moyen);
		font-family: var(--font-heading--family);
		font-weight: normal;
		font-size: var(--font-size--h4);
		opacity: 1;
		line-height: 1;
	}

	.ax-product-card-mini__details {
		width: 100%;
		padding: var(--padding-2xs) var(--padding-sm);
		background-color: var(--color-neutral-light);
		border-radius: var(--style-border-radius-xs);
	}

	.ax-product-card-mini__details-summary {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap-xs);
		width: 100%;
		color: var(--color-foreground);
		padding:0;
	}

	.ax-product-card-mini__details-summary::-webkit-details-marker { display: none; }
	.ax-product-card-mini__details-summary::marker { content: ''; }

	.ax-product-card-mini__details-label {
		font-family: var(--font-body--family);
		font-size: var(--font-size--xs);
		line-height: 1.2;
	}

	.ax-product-card-mini__details-label::after {
		content: attr(data-label-show);
	}

	.ax-product-card-mini__details[open] .ax-product-card-mini__details-label::after {
		content: attr(data-label-hide);
	}

	.ax-product-card-mini__details-chevron {
		display: inline-flex;
		width: 0.625rem;
		height: 0.625rem;
		transition: transform var(--animation-values);
	}

	details[open] > .ax-product-card-mini__details-summary .ax-product-card-mini__details-chevron {
		transform: rotate(180deg);
	}

	/* Smooth open/close via le pseudo natif `::details-content` (Chrome 131+,
	   Safari 18.2+). Browsers plus anciens fallback en snap (acceptable). */
	@supports selector(::details-content) {
		.ax-product-card-mini__details::details-content {
			block-size: 0;
			overflow: hidden;
			transition:
				block-size var(--animation-speed) var(--animation-easing),
				content-visibility var(--animation-speed) allow-discrete;
		}

		.ax-product-card-mini__details[open]::details-content {
			block-size: calc-size(auto, size);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.ax-product-card-mini__details-chevron,
		.ax-product-card-mini__details::details-content {
			transition: none;
		}
	}

	.ax-product-card-mini__details-list {
		list-style: none;
		margin: var(--gap-xs) 0 0;
		padding: 0;
		font-family: var(--font-body--family);
		font-size: var(--font-size--xs);
		line-height: var(--line-height--body-tight);
	}

	.ax-product-card-mini__details-item {
		position: relative;
		margin: 0;
		padding-inline-start: var(--padding-xl);
	}

	.ax-product-card-mini__details-item::before {
		content: "";
		position: absolute;
		inset-inline-start: var(--padding-xs);
		inset-block-start: calc((1lh - 0.25rem) / 2);
		width: 0.25rem;
		height: 0.25rem;
		border-radius: var(--style-border-radius-50);
		background-color: currentColor;
	}

	.ax-product-card-mini__form {
		margin: 0;
	}

	.ax-product-card-mini__cart-button {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		padding: 0;
		background-color: transparent;
		color: var(--color-black);
		border: none;
		border-radius: var(--style-border-radius-xs);
		cursor: pointer;
		transition: background-color var(--animation-values);
	}

	.ax-product-card-mini--lg .ax-product-card-mini__cart-button {
		background-color: var(--color-neutral-light);
	}

	.ax-product-card-mini__cart-button:hover {
		background-color: var(--color-neutral);
	}

	.ax-product-card-mini__cart-button .svg-wrapper {
		width: 1.125rem;
		height: 1.125rem;
		display: inline-flex;
	}

	.ax-product-card-mini__cart-button svg {
		width: 100%;
		height: 100%;
	}
/* END_SNIPPET:ax-product-card-mini */

/* START_SNIPPET:ax-product-card (INDEX:248) */
.ax-product-card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--padding-xs);
		container-type: inline-size;
	}

	/* Layout horizontal (ex. Produits associés page article) : image carrée à gauche,
	   contenu à droite. Reflow CSS pur — markup inchangé. */
	.ax-product-card--horizontal {
		flex-direction: row;
		align-items: stretch;
		gap: var(--gap-xs);
		padding: var(--gap-sm);
		background-color: var(--color-neutral-light);
		border-radius: var(--style-border-radius-xs);
	}

	.ax-product-card--horizontal .ax-product-card__media {
		flex: 0 0 auto;
		align-self: flex-start;
		width: 7.5rem;
	}

	.ax-product-card--horizontal .ax-product-card__info {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
	}

	/* Prix en bleu NM (maquette Produits associés). Scopé à l'horizontal : les
	   cartes verticales (collection/search/sliders) gardent leur couleur. */
	.ax-product-card--horizontal .ax-product-card__price-value {
		color: var(--color-blue-NM);
	}

	/* Line-heights resserrés iso-maquette (card horizontale) : la colonne infos doit
	   tenir dans la hauteur de l'image carrée (titre 2 lignes = 36px et non 45). */
	.ax-product-card--horizontal .ax-product-card__title {
		line-height: 1;
	}

	.ax-product-card--horizontal .ax-product-card__top-line,
	.ax-product-card--horizontal .ax-product-card__variant-count {
		line-height: var(--line-height--body-tight);
	}

	/* Détails iso-maquette « Produits associés » (scopés horizontal) :
	   tag en pill blanc sur la carte grise, « X saveurs » et « Dès » atténués. */
	.ax-product-card--horizontal .ax-product-card__top-line {
		align-self: flex-start;
		max-width: 100%;
		padding: var(--gap-3xs) var(--gap-2xs);
		background-color: var(--color-white);
	}

	.ax-product-card--horizontal .ax-product-card__variant-count,
	.ax-product-card--horizontal .ax-product-card__price-prefix {
		opacity: var(--opacity-60);
	}

	/* Bouton add-to-cart icône (show_add_to_cart) — au-dessus de l'overlay link. */
	.ax-product-card__form-component {
		position: absolute;
		inset-block-end: var(--gap-sm);
		inset-inline-end: var(--gap-sm);
		z-index: 2;
	}

	.ax-product-card__add-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		padding: 0;
		border: none;
		border-radius: var(--style-border-radius-xs);
		background-color: var(--color-white);
		color: var(--color-foreground);
		cursor: pointer;
		transition: opacity var(--animation-speed) var(--animation-easing);
	}

	.ax-product-card__add-icon:hover {
		opacity: var(--opacity-60);
	}

	.ax-product-card__add-icon .svg-wrapper {
		width: 1.25rem;
		height: 1.25rem;
	}

	.ax-product-card__overlay-link {
		position: absolute;
		inset: 0;
		z-index: 1;
		text-indent: -9999px;
		overflow: hidden;
	}

	.ax-product-card__overlay-link:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 4px;
		border-radius: var(--style-border-radius-xs);
	}

	.ax-product-card__media {
		position: relative;
		aspect-ratio: var(--ax-product-card-image-ratio, 1 / 1);
		overflow: hidden;
		border-radius: var(--style-border-radius-xs);
		transition: background-color var(--animation-speed, 0.3s) var(--animation-easing, ease);
	}

	.ax-product-card__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: bottom;
		transition:
			opacity var(--animation-speed, 0.3s) var(--animation-easing, ease),
			transform var(--animation-speed, 0.3s) var(--animation-easing, ease);
	}

	.ax-product-card__image--hover {
		opacity: 0;
		/* Gray skeleton bg while the hover image is still fetching (after pointer-enter
		   swap). Combined with the inherited `transition: opacity` rule on `img`, the
		   image fades in smoothly once `load` fires instead of popping in abruptly. */
		background-color: var(--color-neutral-light);
	}

	/* Hover-image swap — desktop only (touch devices never fire pointerenter) */
	@media (hover: hover) {
		.ax-product-card--has-hover-image:hover .ax-product-card__media {
			background-color: transparent;
		}

		.ax-product-card--has-hover-image:hover .ax-product-card__image--primary {
			opacity: 0;
		}

		.ax-product-card--has-hover-image:hover .ax-product-card__image--hover {
			opacity: 1;
			transform: scale(1.04);
		}
	}

	/*
    TODO: re-enable badges (sale / sold-out) once the design adds them back.
    Markup is also commented out in the Liquid section above.

    .ax-product-card__top-row {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 2;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: var(--padding-xs);
      pointer-events: none;
    }

    .ax-product-card__badges {
      display: flex;
      flex-direction: column;
      gap: var(--padding-3xs);
    }

    .ax-product-card__badge {
      display: inline-flex;
      align-items: center;
      padding: var(--padding-3xs) var(--padding-xs);
      font-size: var(--font-size--xs);
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: 999px;
      line-height: 1;
      pointer-events: auto;
    }

    .ax-product-card__badge--sale {
      background: var(--color-blue-NM);
      color: #fff;
    }

    .ax-product-card__badge--sold-out {
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      color: var(--color-foreground);
    }
  */

	.ax-product-card__wishlist {
		position: absolute;
		inset-block-start: var(--padding-xs);
		inset-inline-end: var(--padding-xs);
		/* Above the full-card overlay link (z-index 1) so the heart is clickable. */
		z-index: 3;
	}

	.ax-product-card__wishlist .wishlist-button--card {
		--wishlist-button-size: 1.25rem;
		--wishlist-button-color: var(--color-foreground);
	}

	.ax-product-card__quick-add {
		position: absolute;
		inset-block-end: var(--padding-xs);
		inset-inline-end: var(--padding-xs);
		z-index: 2;
		/* Compact icon-only quick-add inside the card */
		--quick-add-display: flex;
		--quick-add-mobile-display: flex;
		--quick-add-mobile-opacity: 1;
	}

	/* Constrain the rendered quick-add button to a 32px icon target.
	   Force `opacity: 1` to override the shared `.quick-add__button { opacity: 0 }`
	   default (≥750px). Disable the shared button's `backdrop-filter: blur(20px)`
	   (blurry halo over the bg image) and `:hover { scale: 1.03 }` (visual noise
	   on a small 32px icon). */
	.ax-product-card__quick-add [data-quick-add-button='add'] add-to-cart-component {
		display: contents;
	}

	.ax-product-card__quick-add .quick-add__button {
		--button-border-width: 0;
		--button-background-color: var(--color-background);
		--button-color: var(--color-foreground);
		position: relative;
		inset: auto;
		right: auto;
		bottom: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 2rem;
		min-height: 2rem;
		width: 2rem;
		height: 2rem;
		padding: 0;
		border-radius: var(--style-border-radius-xs);
		border: none 0;
		opacity: 1;
		backdrop-filter: none;
	}

	.ax-product-card__quick-add .add-to-cart-text {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.ax-product-card__quick-add .quick-add__button:hover {
		scale: 1;
	}

	/* Ré-affirme le switch Add/Choose de Horizon (base.css) : la règle générique
	   `display: flex` ci-dessus a la même spécificité que le masquage de base.css
	   et arrive après lui dans la cascade quand cette feuille est inline (cartes
	   injectées par Nosto) → sans ces règles, les produits mono-variante
	   affichent les DEUX boutons. */
	.ax-product-card__quick-add [data-quick-add-button='add'] .quick-add__button--choose {
		display: none;
	}

	.ax-product-card__quick-add [data-quick-add-button='choose'] add-to-cart-component {
		display: none;
	}

	.ax-product-card__quick-add .quick-add__button,
	.ax-product-card__quick-add .quick-add__button .checkmark-burst,
	.ax-product-card__quick-add .quick-add__button .checkmark-burst :is(.ring, .tick, .line, .check, .burst) {
		color: var(--color-foreground) !important;
		stroke: var(--color-foreground) !important;
	}

	/* Hide the text label inside the quick-add button (icon-only) */
	.ax-product-card__quick-add .add-to-cart-text > span:not(.svg-wrapper):not(.add-to-cart-icon) {
		display: none;
	}

	.ax-product-card__quick-add .svg-wrapper {
		width: auto;
		height: 1rem;
	}

	.ax-product-card__info {
		display: flex;
		flex-direction: column;
		gap: var(--padding-2xs);
	}

	.ax-product-card__top-line {
		display: inline-flex;
		align-self: flex-start;
		padding: 0.125rem 0.25rem;
		background: var(--color-neutral-light);
		color: var(--color-foreground);
		font-family: var(--font-body--family);
		font-size: var(--font-size--xs);
		/* 1.2 → badge de 21px iso maquette (nœud 5446-14445) ; 1.4 le montait à 23,6. */
		line-height: var(--line-height--body-tight);
	}

	.ax-product-card__title {
		margin: 0;
		font-family: var(--font-heading--family);
		font-size: var(--font-size--md);
		font-weight: var(--font-heading--weight);
		line-height: var(--line-height--heading-normal);
		text-wrap: pretty;

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

	.ax-product-card__title-link {
		color: inherit;
		text-decoration: none;
		position: relative;
		z-index: 2;
	}

	.ax-product-card__title-link:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.ax-product-card__variant-count {
		color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
		font-family: var(--font-body--family);
		font-size: var(--font-size--xs);
		line-height: var(--line-height--body-normal);
	}

	.ax-product-card__price {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: var(--padding-2xs);
	}

	.ax-product-card__price-prefix {
		color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
		font-family: var(--font-heading--family);
		font-size: var(--font-size--xs);
		line-height: var(--line-height--body-tight);
	}

	.ax-product-card__price-value,
	.ax-product-card__price-value--sale {
		--color: var(--color-blue-NM);
	}

	.ax-product-card__price-compare {
		color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
		font-family: var(--font-body--family);
		font-size: var(--font-size--sm);
		font-weight: var(--font-body--weight);
		text-decoration: line-through;
	}

	.ax-product-card__unit-price {
		display: none;
		white-space: nowrap;
		color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
		font-family: var(--font-body--family);
		font-size: var(--font-size--xs);
		line-height: var(--line-height--body-normal);
	}

	/* Le toggle "Prix au Kg" pose data-show-unit-price sur la grille Nosto (parent DOM des cartes injectées). */
	[data-show-unit-price] .ax-product-card__unit-price {
		display: block;
	}
/* END_SNIPPET:ax-product-card */

/* START_SNIPPET:ax-product-push-card (INDEX:249) */
.ax-product-push-card {
    display: flex;
    align-items: flex-end;
    gap: var(--gap-xs);
    padding: var(--padding-xs);
    /* voile gris #f7f7f7 @ 80% (iso-maquette, pas blanc) */
    background-color: color-mix(in srgb, var(--color-neutral-light) 80%, transparent);
    border-radius: var(--style-border-radius-xs);
    min-width: 0;
  }

  .ax-product-push-card__image-wrap {
    flex-shrink: 0;
    align-self: flex-end;
    width: 3.75rem;
    height: 3.75rem;
    background-color: var(--color-white);
    border-radius: var(--style-border-radius-xs);
    overflow: hidden;
  }

  .ax-product-push-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .ax-product-push-card__info {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center; /* titre+prix centrés vert. par rapport à l'image (iso-maquette) */
    gap: var(--gap-xs); /* 8px iso-maquette (titre ↔ prix) */
  }

  .ax-product-push-card__title {
    margin: 0;
    color: var(--color-black);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--14); /* 14px iso-maquette */
    line-height: var(--line-height--body-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .ax-product-push-card__variant {
    margin: 0;
    /* Resserre titre ↔ variante à 2px : compense le gap 8px de __info,
       conservé entre les autres lignes (variante ↔ prix). */
    margin-block-start: calc(-1.5 * var(--padding-2xs));
    color: var(--color-black);
    font-size: var(--font-size--12);
    line-height: var(--line-height--body-tight);
    opacity: var(--opacity-60);
  }

  .ax-product-push-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--padding-2xs); /* 4px iso-maquette */
    color: var(--color-black);
  }

  .ax-product-push-card__price-prefix {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--xs);
    line-height: 1;
    opacity: var(--opacity-60);
  }

  .ax-product-push-card__price-value {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    /* 12px iso-maquette (h6 desktop = 14px, trop grand). */
    font-size: var(--font-size--xs);
    line-height: 1;
    color: inherit;
  }

  .ax-product-push-card__price-compare {
    font-family: var(--font-heading--family);
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--color-gris-moyen);
    text-decoration: line-through;
  }

  /* Overrides quick-add : bouton icône 32px blanc iso-maquette (recette reprise
     de .ax-product-card__quick-add, adaptée au flux flex de la carte push). */
  .ax-product-push-card__quick-add {
    flex-shrink: 0;
    align-self: flex-end;
    width: 2rem;
    --quick-add-display: flex;
    --quick-add-mobile-display: flex;
    --quick-add-mobile-opacity: 1;
  }

  .ax-product-push-card__cart-button {
    flex-shrink: 0;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 2rem; /* bouton 32px iso-maquette */
    height: 2rem;
    padding: 0;
    background-color: var(--color-white); /* fond blanc iso-maquette */
    color: var(--color-black);
    border: none;
    border-radius: var(--style-border-radius-xs); /* 4px iso-maquette */
    cursor: pointer;
    transition: opacity var(--animation-values);
  }

  .ax-product-push-card__cart-button:hover {
    opacity: var(--opacity-70, 0.7);
  }

  .ax-product-push-card__cart-button .svg-wrapper {
    width: 1.25rem; /* icône 20px (vector maquette 20×16), centrée dans le bouton 32px */
    height: auto; /* ratio préservé → pas de déformation */
    display: inline-flex;
  }

  .ax-product-push-card__cart-button svg {
    width: 100%;
    height: auto;
  }

  /* Remet le composant dans le flux : ses styles partagés le posent en
     `absolute; inset: 0` (pensé pour recouvrir une card image), ce qui
     éjectait le bouton de la cartouche. */
  .ax-product-push-card__quick-add .quick-add,
  .ax-product-push-card__quick-add .quick-add__product-form-component {
    display: block;
    width: 100%;
  }

  .ax-product-push-card__quick-add .quick-add {
    position: static;
    inset: auto;
    pointer-events: auto;
  }

  .ax-product-push-card__quick-add [data-quick-add-button='add'] add-to-cart-component {
    display: contents;
  }

  .ax-product-push-card__quick-add .quick-add__button {
    --button-border-width: 0;
    --button-background-color: var(--color-white); /* fond blanc iso-maquette */
    --button-color: var(--color-black);
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    width: 2rem; /* bouton 32px iso-maquette */
    height: 2rem;
    padding: 0;
    /* Remplace le gradient `--color-background` des styles partagés : fond blanc
       iso-maquette quel que soit le color scheme de la tuile. */
    background: var(--color-white);
    border-radius: var(--style-border-radius-xs);
    border: none 0;
    opacity: 1;
    backdrop-filter: none;
  }

  .ax-product-push-card__quick-add .quick-add__button:hover {
    scale: 1;
    opacity: var(--opacity-70, 0.7);
  }

  /* Ré-affirme le switch Add/Choose de Horizon (base.css) : la règle générique
     `display: flex` ci-dessus a la même spécificité que le masquage de base.css
     → sans ces règles, les produits mono-variante affichent les DEUX boutons. */
  .ax-product-push-card__quick-add [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  .ax-product-push-card__quick-add [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  .ax-product-push-card__quick-add .quick-add__button,
  .ax-product-push-card__quick-add .quick-add__button .checkmark-burst,
  .ax-product-push-card__quick-add .quick-add__button .checkmark-burst :is(.ring, .tick, .line, .check, .burst) {
    color: var(--color-black) !important;
    stroke: var(--color-black) !important;
  }

  .ax-product-push-card__quick-add .add-to-cart-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  /* Icône seule : masque le libellé texte du bouton */
  .ax-product-push-card__quick-add .add-to-cart-text > span:not(.svg-wrapper):not(.add-to-cart-icon) {
    display: none;
  }

  .ax-product-push-card__quick-add .svg-wrapper {
    width: 1.25rem; /* icône 20px (vector maquette 20×16), centrée dans le bouton 32px */
    height: auto;
  }
/* END_SNIPPET:ax-product-push-card */

/* START_SNIPPET:ax-product-tags (INDEX:250) */
.ax-product-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2xs, 0.5rem);
    pointer-events: none;
  }

  .ax-product-tags__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-3xs, 0.3125rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ax-product-tags__item {
    display: flex;
  }

  .ax-product-tags__label {
    display: inline-block;
    padding: var(--padding-2xs) var(--padding-xs);
    font-size: var(--font-size--2xs);
    border-radius: var(--style-border-radius-xs);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    /* Couleurs par défaut si le metaobject n'en fournit pas (fallback rare) */
    color: var(--color-white, #fff);
    background-color: var(--color-foreground, #0f1114);
  }

  .ax-product-tags__label[href] {
    pointer-events: auto;
  }

  .ax-product-tags__fp {
    flex-shrink: 0;
    pointer-events: none;
  }

  .ax-product-tags__fp img {
    display: block;
    height: auto;
    max-width: 100%;
  }

  /* --- Carte produit : overlay en haut-gauche du média ---
     Le coin haut-droit est réservé au bouton wishlist → on borne la largeur
     à droite pour que les pastilles ne passent jamais sous le cœur. */
  .ax-product-tags--card {
    position: absolute;
    inset-block-start: var(--padding-xs, 1rem);
    inset-inline-start: var(--padding-xs, 1rem);
    inset-inline-end: calc(var(--padding-xs, 1rem) + var(--minimum-touch-target, 2.75rem));
    z-index: 2;
  }

  /* --- Page produit : haut-gauche de la galerie, pastilles plus grandes --- */
  .ax-product-tags--page {
    position: absolute;
    inset-block-start: calc(var(--media-band-block-start, 0px) + var(--padding-sm, 1.25rem));
    inset-inline-start: calc(var(--media-band-inline-start, 0px) + var(--padding-sm, 1.25rem));
    z-index: 2;
  }

  .ax-product-tags--page .ax-product-tags__label {
    font-size: var(--font-size--sm);
  }

  /* Mode « constrain image » : le JS recale les pastilles sur l'image visible
     (letterbox). On les masque le temps du 1er positionnement pour éviter le saut. */
  .media-fit-contain .ax-product-tags--page {
    transition: opacity var(--animation-speed, 0.2s) ease;
  }

  .media-fit-contain .ax-product-tags--page:not([data-media-bands='ready']) {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .ax-product-tags--card {
      inset-inline-end: calc(var(--padding-2xs, 0.25rem) + var(--minimum-touch-target, 2.75rem));
    }
  }
/* END_SNIPPET:ax-product-tags */

/* START_SNIPPET:ax-quick-add-content (INDEX:251) */
/* ========================================
	   Quick Add — contenu dialog Nutrimuscle (compose product-matching +
	   variant-options-format + variant-options-flavor avec image à gauche desktop).
	   Layout : 1 colonne mobile, 2 colonnes desktop (image sticky à gauche).
	   ======================================== */

	/* Le parent .quick-add-modal__content impose son propre grid (7 cols desktop /
	   4 cols mobile) destiné au rendu fetché de la page produit. On le neutralise
	   quand notre contenu Nutrimuscle est présent — on prend la main sur le layout. */
	.quick-add-modal__content:has(.ax-quick-add) {
		display: block;
		padding: 0;
		gap: 0;
	}

	.ax-quick-add {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--gap-lg);
		width: 100%;
		padding: var(--padding-md);
		box-sizing: border-box;
	}

	/* Swap inter-coloris en cours : feedback léger + neutralise les interactions
	   pour éviter un double-clic pendant le fetch. */
	.ax-quick-add[data-ax-color-swapping] {
		opacity: var(--opacity-60);
		pointer-events: none;
	}

	@media screen and (min-width: 750px) {
		.ax-quick-add {
			/* Image desktop fixe à 430×430 (aspect-ratio 1/1 sur .ax-quick-add__media) */
			grid-template-columns: 430px minmax(0, 1fr);
			column-gap: 40px; /* espace image ↔ contenu */
			padding: 80px;
		}
	}

	.ax-quick-add__media {
		position: relative;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		background: var(--color-neutral-light);
		border-radius: var(--style-border-radius-xs);

		/* Image masquée sur mobile — le picker prend toute la largeur */
		@media screen and (max-width: 749px) {
			display: none;
		}
	}

	@media screen and (min-width: 750px) {
		.ax-quick-add__media {
			position: sticky;
			top: var(--padding-md);
			align-self: start;
		}
	}

	.ax-quick-add__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: bottom;
	}

	.ax-quick-add__panel {
		display: flex;
		flex-direction: column;
		gap: var(--gap-md);
		min-width: 0;
		/* Ne pas étirer la colonne à la hauteur de l'image : le contenu (et donc le
		   CTA) reste en haut quand il y a peu de sélecteurs. Le footer sticky gère
		   toujours le cas du contenu long qui scrolle. */
		align-self: start;
	}

	.ax-quick-add__picker {
		display: block;
		min-width: 0;
	}

	.ax-quick-add__title-link {
		text-decoration: none;
		color: inherit;

		/* Mobile : titre affiché en haut, à côté de la croix → réserve de place à droite
		   pour ne pas passer derrière le bouton close (top-right). */
		@media screen and (max-width: 749px) {
			display: block;
			padding-inline-end: 3rem;
		}
	}

	.ax-quick-add__title {
		margin: 0;
		font-family: var(--font-heading--family);
		font-size: var(--font-h2--size, 1.75rem); /* ≈28px — proche maquette, ajustable */
		font-weight: var(--font-heading--weight);
		line-height: var(--line-height--heading-tight);
		color: var(--color-foreground);

		@media screen and (max-width: 749px) {
			font-size: 1.5rem; /* 24px */
		}
	}

	/* Prix sous le titre — hero bleu marque. Doit dominer les nombres de format
	   (28px/900) sinon on cherche le prix dans la modale. Scopé sous .quick-add-modal
	   pour passer devant `product-price .price__regular .price` de base.css. */
	.ax-quick-add__price {
		display: block;
	}

	.quick-add-modal .ax-quick-add__price .price {
		font-size: var(--font-size--3xl); /* 32px desktop */
		font-weight: 700;
		color: var(--color-blue-NM);

		@media screen and (max-width: 749px) {
			font-size: var(--font-size--2xl); /* 24px */
		}
	}

	.ax-quick-add__price .compare-at-price {
		margin-inline-start: var(--gap-2xs);
		font-size: var(--font-size--md);
		color: var(--color-gris-moyen);
		text-decoration: line-through;
	}

	/* Prix au kg (« Soit X / Kg ») — à droite du prix en desktop (flux inline du
	   flex [ref="priceContainer"], aligné sur la baseline), passe sous le prix en
	   mobile (flex-basis 100% force le retour à la ligne). */
	.quick-add-modal .ax-quick-add__price .unit-price {
		font-size: var(--font-size--xs);
		font-weight: 400;
		color: var(--color-neutral-dark);

		@media screen and (max-width: 749px) {
			flex-basis: 100%;
			margin-block-start: var(--margin-3xs);
		}
	}

	.ax-quick-add .variant-option__legend {
		font-family: var(--font-heading--family);
		font-weight: var(--font-heading--weight);
		line-height: var(--line-height--heading-normal);
		color: var(--color-foreground);

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

	.ax-quick-add__form {
		display: flex;
		flex-direction: column;
		padding-block-start: var(--padding-md);

	}

	/* Sticky footer avec quantity stepper + CTA */
	.ax-quick-add__footer {
		position: sticky;
		inset-block-end: 0;
		background: var(--color-background);
		padding-block-start: var(--padding-sm);
		padding-block-end: var(--padding-sm);
		margin-block-start: auto;
		z-index: 2;
	}

	.ax-quick-add__actions {
		display: flex;
		align-items: stretch;
		width: 100%;
	}

	add-to-cart-component {
		width: 100%;
	}

	.ax-quick-add__cta {
		flex: 1 1 auto;
		min-height: 3rem;
		width: 100%;
		background-color: var(--color-foreground);
		color: var(--color-background);
		font-size: var(--font-size--md);
		font-weight: 600;

		/* Mobile : pleine largeur, coins droits (pas de border-radius) */
		@media screen and (max-width: 749px) {
			width: 100%;
			border-radius: 0;
		}
	}
/* END_SNIPPET:ax-quick-add-content */

/* START_SNIPPET:ax-quizz-trigger (INDEX:256) */
.ax-quizz-trigger {
    display: flex;
    justify-content: var(--ax-quizz-trigger-justify, flex-start);
    margin-block: var(--margin-sm) var(--margin-2xl);
  }

  .ax-quizz-trigger--left {
    --ax-quizz-trigger-justify: flex-start;
  }

  .ax-quizz-trigger--center {
    --ax-quizz-trigger-justify: center;
  }

  .ax-quizz-trigger--right {
    --ax-quizz-trigger-justify: flex-end;
  }

  /* Axome - alignement mobile : override du desktop sous 750px */
  @media screen and (max-width: 749px) {
    .ax-quizz-trigger--m-left {
      --ax-quizz-trigger-justify: flex-start;
    }

    .ax-quizz-trigger--m-center {
      --ax-quizz-trigger-justify: center;
    }

    .ax-quizz-trigger--m-right {
      --ax-quizz-trigger-justify: flex-end;
    }
  }

  /* Variante « lien » autonome : le soulignement + la police de la classe .link
     riche vivent dans le snippet button (pas garanti chargé ici), donc on dépouille
     le chrome natif du <button> et on dessine tout. Maquette 4026-16971 :
     Gustavo 700 / 16px mobile · 18px desktop / #0093e5 / soulignement 3px. */
  .ax-quizz-trigger__btn.link {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--color-blue-NM);
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: var(--button-font-size);
    line-height: 1;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.3em;
  }
/* END_SNIPPET:ax-quizz-trigger */

/* START_SNIPPET:ax-shop-the-look-style (INDEX:264) */
.ax-shop-the-look-section {
    display: block;
    width: 100%;
    position: relative;
  }

  .ax-shop-the-look__component {
    display: block;
    width: 100%;
  }

  .ax-shop-the-look__stage {
    position: relative;
    isolation: isolate;
  }

  .ax-shop-the-look__bg {
    display: block;
    width: 100%;
    overflow: hidden;
    /* Fond (background_color du métaobjet) : derrière l'image → visible uniquement
       quand il n'y a pas d'image (sinon l'image en object-fit:cover le recouvre). */
    background-color: var(--color-background);
    /* Le cadre est gouverné par son ratio, jamais par une hauteur d'écran : les
       hotspots sont placés en pourcentage de CE cadre, donc tout ratio qui varie les
       décale par rapport au visuel recadré par `cover`. Mesuré avant correction, un
       point réglé à 73% tombait entre 65,6% et 73% selon les proportions de la
       fenêtre (ticket 13123548602). */
    aspect-ratio: var(--ax-stl-ratio-mobile);

    @media screen and (min-width: 1200px) {
      aspect-ratio: var(--ax-stl-ratio);
    }
  }

  .ax-shop-the-look__bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Point focal Shopify du visuel (réglé par fichier dans l'admin) ; à défaut, centre. */
    object-position: var(--ax-stl-focal, center);
  }

  /* Sous 1200px c'est l'image mobile qui est servie (cf. `<source>` du bandeau) :
     elle a son propre point focal, sinon celui du desktop, sinon le centre. */
  @media screen and (max-width: 1199px) {
    .ax-shop-the-look__bg-img {
      object-position: var(--ax-stl-focal-mobile, var(--ax-stl-focal, center));
    }
  }

  .ax-shop-the-look__content {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--layer-raised);
    /* Respecte les marges de page (section padding) malgré le force-full-width sur __stage */
    padding-inline: var(--page-margin) 0;
    padding-block: var(--page-margin) var(--padding-4xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-40);
    align-items: flex-start;
    max-width: min(70%, 50rem);
    color: var(--color-foreground);

    @media screen and (max-width: 1199px) {
      padding-inline: var(--page-margin);
      padding-block: var(--padding-2xl);
      gap: var(--gap-2xl);
      max-width: 100%;
    }
  }

  .ax-shop-the-look__heading {
    margin: 0;
    /* Piloté par le color picker heading_color (même variable que le color_scheme) */
    color: var(--color-foreground-heading);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    /* Taille pilotée par le setting heading_size (défaut H1 = 64px/32px iso-maquette).
       Les tokens --font-size--hN encodent déjà desktop fluide + override mobile (749). */
    font-size: var(--ax-stl-heading-size, var(--font-size--h1));

    /* Taille mobile distincte, uniquement si le réglage/métaobjet la renseigne —
       sinon on retombe sur le palier mobile déjà porté par le token desktop. */
    @media screen and (max-width: 749px) {
      font-size: var(--ax-stl-heading-size-mobile, var(--ax-stl-heading-size, var(--font-size--h1)));
    }
  }

  .ax-shop-the-look__button {
    align-self: flex-start;
  }

  /* Pin dots */
  .ax-shop-the-look__dot {
    position: absolute;
    inset-block-start: var(--ax-stl-y);
    inset-inline-start: var(--ax-stl-x);
    transform: translate(-50%, -50%);
    z-index: var(--layer-raised);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 1);
    color: var(--color-foreground);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
    transition: transform var(--animation-speed) var(--animation-easing);

    /* Breath pulse ring */
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background-color: rgb(255 255 255 / 0.6);
      z-index: -1;
      animation: ax-shop-the-look-breath 2.4s ease-out infinite;
    }

    &:hover {
      transform: translate(-50%, -50%) scale(1.1);
    }

    &:focus-visible {
      outline: 2px solid var(--color-foreground);
      outline-offset: 2px;
    }

    /* Pause the pulse when the card is open */
    &[aria-expanded='true']::before {
      animation-play-state: paused;
      opacity: 0;
    }

    @media screen and (max-width: 1199px) {
      inset-block-start: var(--ax-stl-y-mobile);
      inset-inline-start: var(--ax-stl-x-mobile);
      width: 1.75rem;
      height: 1.75rem;
    }

    @media (prefers-reduced-motion: reduce) {
      &::before {
        animation: none;
      }
    }
  }

  @keyframes ax-shop-the-look-breath {
    0% {
      transform: scale(1);
      opacity: 0.7;
    }
    70% {
      transform: scale(1.9);
      opacity: 0;
    }
    100% {
      transform: scale(1.9);
      opacity: 0;
    }
  }

  .ax-shop-the-look__dot-icon {
    position: relative;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
  }

  .ax-shop-the-look__dot-bar {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    background-color: var(--color-black);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .ax-shop-the-look__dot-bar--h {
    width: 100%;
    height: 1.5px;
    transform: translate(-50%, -50%);
  }

  .ax-shop-the-look__dot-bar--v {
    width: 1.5px;
    height: 100%;
    transform: translate(-50%, -50%);
  }

  /* Active state: + rotates into x */
  .ax-shop-the-look__dot[aria-expanded='true'] .ax-shop-the-look__dot-bar--h {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .ax-shop-the-look__dot[aria-expanded='true'] .ax-shop-the-look__dot-bar--v {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  /* Card — anchored under its dot (centered horizontally, offset below) */
  .ax-shop-the-look__card {
    position: absolute;
    inset-block-start: var(--ax-stl-y);
    inset-inline-start: var(--ax-stl-x);
    /* Center on dot X, push below dot center (dot half = 1rem + 0.5rem gap).
       --ax-stl-card-offset is set by JS to keep the card inside the stage. */
    transform: translate(calc(-50% + var(--ax-stl-card-offset, 0px)), 1.5rem);
    z-index: calc(var(--layer-raised) + 1);
    width: max-content;
    max-width: min(20rem, calc(100% - var(--padding-md) * 2));

    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    color: inherit;
    border-radius: var(--style-border-radius-xs);
    background-color: rgb(255 255 255 / var(--opacity-90));
    padding-inline-end: var(--padding-md);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &[hidden] {
      display: none;
    }

    &:hover {
      background-color: rgb(255 255 255 / 1);
    }

    &:focus-visible {
      outline: 2px solid var(--color-foreground);
      outline-offset: 2px;
    }

    .ax-product-card-mini {
      background-color: transparent;
      flex: 1;
      padding-inline-end: 0;
    }

    @media screen and (max-width: 1199px) {
      inset-block-start: auto;
      inset-inline-start: calc(var(--page-margin) + var(--padding-sm));
      inset-inline-end: calc(var(--page-margin) + var(--padding-sm));
      inset-block-end: var(--padding-lg);
      transform: none;
      max-width: none;
      width: auto;
    }
  }

  .ax-shop-the-look__card-caret {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--color-black);
    opacity: var(--opacity-60);
  }

  .ax-shop-the-look__bg--placeholder {
    aspect-ratio: 16 / 9;
    background-color: var(--color-neutral-light);
  }

  .ax-shop-the-look__bg--placeholder .ax-shop-the-look__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Skeleton ISO — même zone que le stage (0 CLS pendant le chargement Nosto).
     Couleurs explicites (pas de var quasi-blanche droppée) + shimmer. */
  .ax-shop-the-look__skeleton {
    width: 100%;
    /* Même ratio que le stage final → 0 CLS quand le contenu remplace le skeleton. */
    aspect-ratio: var(--ax-stl-ratio-mobile);
    background-color: var(--color-skeleton);
    background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 80%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position-x: 150%;
    animation: ax-shop-the-look-shimmer 1.5s linear infinite;

    @media screen and (min-width: 1200px) {
      aspect-ratio: var(--ax-stl-ratio);
    }
  }

  @keyframes ax-shop-the-look-shimmer {
    to {
      background-position-x: -150%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-shop-the-look__skeleton {
      animation: none;
    }
  }

  /* Nosto placement — reste in-flow à 0 hauteur (display:none ferait que Nosto
     l'ignore : getPlacements() renvoie []). N'affiche que le handle injecté. */
  .ax-shop-the-look-nosto__placement {
    font-size: 0;
    line-height: 0;
  }
/* END_SNIPPET:ax-shop-the-look-style */

/* START_SNIPPET:ax-slideshow-slide-style (INDEX:266) */
.ax-slideshow-section {
    position: relative;
  }

  .ax-slideshow {
    position: relative;
    display: block;
    width: 100%;
  }

  .ax-slideshow__swiper {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--corner-radius, 0);
    min-height: var(--slide-min-height);
    --swiper-pagination-bottom: 21px;
  }

  .ax-slideshow__swiper[init='false'] {
    display: none;
  }

  /* Axome - SSR fallback: shows first slide before Swiper init (progressive enhancement) */
  .ax-slideshow__fallback {
    position: relative;
    display: flex;
    width: 100%;
    min-height: var(--slide-min-height);
    overflow: hidden;
    border-radius: var(--corner-radius, 0);
  }

  .ax-slideshow__fallback > slideshow-slide {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: var(--slide-min-height);
    flex: 1 1 auto;
    align-self: stretch;
    content-visibility: visible;
    scroll-snap-align: unset;
    view-timeline-name: none;
    border-radius: 0;
  }

  .ax-slideshow__fallback > slideshow-slide:not(:first-child) {
    display: none;
  }

  .ax-slideshow swiper-slide {
    display: flex;
    width: 100%;
    height: auto;
    min-height: var(--slide-min-height);
    box-sizing: border-box;
  }

  /* Axome - Override slideshow-slide defaults (scroll-snap, view-timeline) inside Swiper */
  .ax-slideshow swiper-slide > slideshow-slide {
    position: relative;
    width: 100%;
    height: auto;
    min-height: inherit;
    align-self: stretch;
    flex: 1 1 auto;
    scroll-snap-align: unset;
    view-timeline-name: none;
    content-visibility: visible;
    border-radius: 0;
    overflow: hidden;
  }

  .ax-slideshow swiper-slide > slideshow-slide[aria-hidden='true'] {
    cursor: default;
  }

  /* Axome - Disable slide-reveal animation (no slideshow-timeline in Swiper context) */
  .ax-slideshow .slide__content {
    opacity: 1;
    animation: none;
  }

  /* Axome - Below-media content layout */
  .ax-slideshow--content-below-media swiper-slide > slideshow-slide {
    display: grid;
    grid-template-rows: var(--grid-template-rows);
  }

  .ax-slideshow--content-below-media swiper-slide .slide__image-container,
  .ax-slideshow--content-below-media swiper-slide .slide__content {
    position: static;
  }

  /* Slide content (formerly blocks/_ax-slide.liquid) */
  .slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    /* Couleur de texte du slide : les descendants sans règle de couleur propre
       (ex. sous-titre .text-block.rte, qui n'est PAS .paragraph) héritent ainsi du
       text_color posé inline (--color / --color-foreground) par le métaobjet, au
       lieu de la couleur ambiante du color scheme. Les titres .text-block.h1 ont
       leur propre règle mais lisent le même --color → cohérent. */
    color: var(--color, var(--color-foreground));
    /* Fond du slide (background_color du métaobjet / scheme du block) : visible
       UNIQUEMENT quand il n'y a pas d'image — `background-transparent` (posé si image
       ou overlay) le neutralise sinon. Câblage ISO au block classique. */
    background-color: var(--color-background);
  }

  .slide__content > * {
    margin: auto;
  }

  /* Taille de titre pilotée par le métaobjet Nosto (title_size / title_size_mobile).
     Seule la TAILLE change : la classe `h1` reste, donc famille, graisse et
     interlettrage du thème sont conservés. La classe n'est posée que si une taille
     est renseignée — sans elle, l'échelle h1 du thème s'applique inchangée.
     Sélecteur volontairement long : il doit battre `.text-block.h1 > *` de base.css,
     dont l'ordre de chargement vis-à-vis de ce bundle n'est pas garanti. */
  .slide__content .text-block.ax-slide-title--sized > *,
  .slide__content .text-block.ax-slide-title--sized :is(h1, h2, h3, h4, h5, h6) {
    font-size: var(--ax-slide-title-size);
  }

  @media screen and (max-width: 749px) {
    .slide__content .text-block.ax-slide-title--sized > *,
    .slide__content .text-block.ax-slide-title--sized :is(h1, h2, h3, h4, h5, h6) {
      font-size: var(--ax-slide-title-size-mobile, var(--ax-slide-title-size));
    }
  }

  /* Idem pour le texte courant (sous-titre), sur l'échelle des tailles de corps.
     Doit battre `.text-block.rte > :not(h1…h6)` de base.css. */
  .slide__content .text-block.ax-slide-text--sized,
  .slide__content .text-block.ax-slide-text--sized > * {
    font-size: var(--ax-slide-text-size);
  }

  @media screen and (max-width: 749px) {
    .slide__content .text-block.ax-slide-text--sized,
    .slide__content .text-block.ax-slide-text--sized > * {
      font-size: var(--ax-slide-text-size-mobile, var(--ax-slide-text-size));
    }
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > picture,
  .slide__image-container > picture > .slide__image,
  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Point focal Shopify de l'image (réglé par image dans l'admin) : le crop
       suit le sujet quel que soit le visuel et la largeur d'écran */
    object-position: var(--slide-focal, center center);
  }

  @media screen and (max-width: 749px) {
    .slide__image-container > picture,
    .slide__image-container > picture > .slide__image,
    .slide__image-container > .slide__image,
    .slide__image-container > .slide__video,
    .slide__image-container > .slide__video-poster {
      object-position: var(--slide-focal-mobile, var(--slide-focal, center center));
    }
  }

  .slide__image-container > picture {
    display: block;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }

  /* Axome - Slide-wide clickable overlay link */
  .slide__link {
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .slide__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  /* Axome - Visually hide text content but keep it in the DOM for SEO */
  .ax-slide--text-hidden .slide__content {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Axome - Slide content spacing (scoped to slideshow) */
  .ax-slideshow-section .slide__content {
    padding: 3rem;
  }

  .ax-slideshow-section .group-block-content {
    gap: 1rem;
  }

  /* Badge/tag pill base — mirrors blocks/ax-badge.liquid so the Nosto variant
     (which hand-writes the badge instead of rendering the ax-badge block, whose
     {% stylesheet %} would then not be collected) is styled identically. */
  .ax-badge {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--xs);
    font-weight: 400;
    line-height: normal;
    padding-block: 0.1875rem;
  }

  .ax-slideshow-section .ax-badge {
    margin-block-end: -0.5rem;
  }

  @media screen and (min-width: 750px) {
    .ax-slideshow__swiper,
    .ax-slideshow__fallback,
    .ax-slideshow__fallback > slideshow-slide,
    .ax-slideshow swiper-slide {
      min-height: var(--slide-min-height-desktop);
    }

    .ax-slideshow--content-below-media swiper-slide > slideshow-slide {
      grid-template-rows: var(--grid-template-rows-desktop);
    }

    /* Content layout: constrain .slide__content to 50% on desktop, full-width on mobile */
    slideshow-slide.ax-slide--layout-half-left > .slide__content,
    slideshow-slide.ax-slide--layout-half-right > .slide__content {
      max-inline-size: 50%;
    }

    slideshow-slide.ax-slide--layout-half-left > .slide__content {
      margin-inline-start: 0;
      margin-inline-end: auto;
    }

    slideshow-slide.ax-slide--layout-half-right > .slide__content {
      margin-inline-start: auto;
      margin-inline-end: 0;
    }
  }

  /* Axome - Mobile: tighter padding, content anchored to bottom, pagination bottom-right */
  @media screen and (max-width: 749px) {
    .ax-slideshow-section .slide__content {
      padding: 1rem 1rem 3.5rem;
    }

    .ax-slideshow-section .slide__content > .layout-panel-flex--column {
      justify-content: flex-end;
    }

  }

  .ax-slideshow__swiper::part(pagination) {
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
  }

  @media screen and (min-width: 1200px) {
    .ax-slideshow__swiper {
      --swiper-pagination-bottom: 33px;
    }

    .ax-slideshow__swiper::part(pagination) {
      left: 2.5rem;
      right: auto;
      width: fit-content;
      text-align: start;
    }
  }

  /* Navigation controls (play/pause + prev/next arrows) — shared with ax-slideshow.
     --layer-raised (2): above the slide media/link, but BELOW the sticky #header-group
     (z-index 4) so the controls never overlap the header. */
  .ax-slideshow__controls {
    position: absolute;
    inset-block-end: 1.875rem;
    inset-inline-end: 2.5rem;
    z-index: var(--layer-raised);
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  @media screen and (max-width: 1199px) {
    .ax-slideshow__controls {
      inset-block-end: var(--gap-lg);
      inset-inline-end: var(--gap-lg);
    }
  }

  /* Axome - Mobile: play/pause en bas à gauche (les puces de pagination sont en
     bas à droite ≤749px) pour éviter qu'ils se superposent. */
  @media screen and (max-width: 749px) {
    .ax-slideshow__controls {
      inset-block-end: 1rem;
      inset-inline-start: auto;
      inset-inline-end: 1rem;
    }
  }

  .ax-slideshow__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity var(--animation-values);
  }

  .ax-slideshow__control:hover,
  .ax-slideshow__control:focus-visible {
    opacity: var(--opacity-80);
  }

  .ax-slideshow__control .svg-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ax-slideshow__control svg {
    display: block;
  }

  .ax-slideshow__control--play-pause {
    width: 1.625rem;
    height: 1.625rem;
    border: 1px solid var(--color-white);
    border-radius: 50%;
    color: var(--color-white);
  }

  .ax-slideshow__control--play-pause .svg-wrapper {
    width: 1.125rem;
    height: 1.125rem;
    --icon-stroke-width: 1px;
  }

  .ax-slideshow__control--play-pause svg {
    width: 100%;
    height: 100%;
  }

  .ax-slideshow__icon-play svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1px;
    stroke-linejoin: round;
  }

  .ax-slideshow__control--play-pause[data-state='playing'] .ax-slideshow__icon-play,
  .ax-slideshow__control--play-pause[data-state='paused'] .ax-slideshow__icon-pause {
    display: none;
  }

  .ax-slideshow__control--arrow {
    width: 1.5625rem;
    height: 1.5625rem;
    background-color: rgb(255 255 255 / var(--opacity-70));
    border-radius: 50%;
    color: var(--color-black);
  }

  .ax-slideshow__control--arrow .svg-wrapper {
    width: 0.65rem;
    height: 0.65rem;
  }

  .ax-slideshow__control--arrow svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
  }

  .ax-slideshow__control--arrow:hover,
  .ax-slideshow__control--arrow:focus-visible {
    background-color: var(--color-white);
    opacity: 1;
  }

  @media screen and (max-width: 1199px) {
    .ax-slideshow__control--arrow {
      display: none;
    }
  }
/* END_SNIPPET:ax-slideshow-slide-style */

/* START_SNIPPET:ax-variant-card (INDEX:268) */
/* Spinner de chargement du CTA (convention FP data-state='loading' :
     l'animation et l'opacité du spinner viennent de base.css, ici seulement
     l'ancrage et le fondu du label). */
  .ax-variant-card__cta {
    position: relative;
    overflow: hidden;
  }

  .ax-variant-card__cta[data-state='loading'] .ax-variant-card__cta-label {
    opacity: 0;
  }

  .ax-variant-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    min-width: 0;
    height: 100%;
    color: var(--color-foreground);
  }

  .ax-variant-card__media-link {
    display: block;
    text-decoration: none;
  }

  .ax-variant-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--style-border-radius-xs);
    background-color: var(--color-neutral-light);
  }

  .ax-variant-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ax-variant-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--padding-2xs);
  }

  .ax-variant-card__eyebrow {
    padding: var(--gap-3xs) var(--padding-2xs);
    background-color: var(--color-neutral-light);
    border-radius: var(--style-border-radius-xs);
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
  }

  .ax-variant-card__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h5);
    font-weight: var(--font-heading--weight);
    line-height: var(--line-height--heading-tight);
  }

  .ax-variant-card__title-link {
    color: inherit;
    text-decoration: none;
  }

  .ax-variant-card__title-link:hover {
    text-decoration: underline;
  }

  .ax-variant-card__count {
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
    opacity: var(--opacity-60);
  }

  .ax-variant-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--padding-2xs);
  }

  .ax-variant-card__price-prefix {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--xs);
    line-height: 1;
    opacity: var(--opacity-60);
  }

  .ax-variant-card__price-value {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--h4);
    line-height: 1;
    color: var(--color-blue-NM);
  }

  .ax-variant-card__price-compare {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--sm);
    line-height: 1;
    color: var(--color-gris-moyen);
    text-decoration: line-through;
  }

  .ax-variant-card__ctas {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    margin-block-start: auto;
  }

  .ax-variant-card__select {
    position: relative;
  }

  .ax-variant-card__select-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    min-height: 2.8125rem;
    padding: 0 1rem;
    background-color: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-black);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    list-style: none;
  }

  .ax-variant-card__select-trigger::-webkit-details-marker { display: none; }
  .ax-variant-card__select-trigger::marker { content: ''; }

  .ax-variant-card__select-trigger--static {
    cursor: default;
  }

  /* Libellé + badges : 6px iso-maquette, comme le gap des options. */
  .ax-variant-card__select-value {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    /* Petits écrans : quand nom long + 2 badges ne tiennent pas, ce sont les
       badges qui passent à la ligne — le nom reste lisible d'un seul tenant. */
    flex-wrap: wrap;
  }

  .ax-variant-card__option-name {
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Les badges basculent à la ligne en bloc, jamais l'un sans l'autre. */
  .ax-variant-card__select-tags {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .ax-variant-card__select-tags:empty {
    display: none;
  }

  /* Le trigger reste sur une seule ligne : c'est le nom qui s'ellipse. */
  .ax-variant-card__select-value--trigger {
    flex: 1;
    flex-wrap: nowrap;
  }

  .ax-variant-card__select-label {
    flex: 0 1 auto;
    text-align: start;
    padding-block: 0.1875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ax-variant-card__select-chevron {
    flex-shrink: 0;
    display: inline-flex;
    width: 1.1875rem;
    height: 1.1875rem;
    color: var(--color-black);
    transition: transform var(--animation-values);
  }

  .ax-variant-card__select-chevron svg { width: 100%; height: 100%; }

  .ax-variant-card__select[open] .ax-variant-card__select-chevron {
    transform: rotate(180deg);
  }

  .ax-variant-card__select[open] .ax-variant-card__select-trigger {
    border-bottom-color: transparent;
  }

  .ax-variant-card__options {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: var(--layer-raised);
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    border-block-start: none;
    max-height: 18rem;
    overflow-y: auto;
  }

  .ax-variant-card__option { margin: 0; }

  .ax-variant-card__options .ax-variant-card__option-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.625rem 1rem;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
  }

  .ax-variant-card__option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .ax-variant-card__option-label:hover,
  .ax-variant-card__option-label:has(.ax-variant-card__option-input:focus-visible),
  .ax-variant-card__option-label:has(.ax-variant-card__option-input:checked) {
    background-color: var(--color-neutral-light);
  }

  .ax-variant-card__option--unavailable .ax-variant-card__option-label {
    color: var(--color-gris-moyen);
    cursor: not-allowed;
  }

  .ax-variant-card__option--unavailable .ax-variant-card__swatch {
    opacity: var(--opacity-40);
  }

  .ax-variant-card__swatch {
    flex-shrink: 0;
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--color-neutral);
  }

  .ax-variant-card:has(.ax-variant-card__select[open]) {
    position: relative;
    z-index: var(--layer-overlay, 10);
  }

  .ax-variant-card__form {
    margin: 0;
    margin-block-start: auto;
  }

  .ax-variant-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.875rem 0.875rem;
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity var(--animation-values);
  }

  .ax-variant-card__cta:hover:not([disabled]) {
    opacity: var(--opacity-80);
  }

  .ax-variant-card__cta[disabled] {
    color: var(--color-white);
  }


  .ax-variant-card--placeholder .ax-variant-card__media {
    aspect-ratio: 1 / 1;
  }

  .ax-variant-card__title-skeleton {
    width: 70%;
    height: 1rem;
    margin-block-start: var(--gap-sm);
    background-color: var(--color-neutral-light);
    border-radius: var(--style-border-radius-xs);
  }
/* END_SNIPPET:ax-variant-card */

/* START_SNIPPET:background-media (INDEX:269) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:270) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:271) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:274) */
/* Axome - Refonte 2026: same animated underline-retract pattern as the
     global .link-underlined utility (base.css). Multi-line safe via
     box-decoration-break: clone. The .hover-button-group:has(a:hover) selector
     in base.css also targets .link, so card-level hovers propagate. */
  .link {
    display: inline;
    color: inherit;
    text-decoration: none;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--button-font-size); /* 16px mobile / 18px desktop, aligne sur .button */
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    transition: background-size var(--animation-speed-extra-slow) var(--animation-easing);
    padding-block-end: 0.125rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .link:hover,
  .link:focus-visible {
    background-size: 0 2px;
    background-position: 100% 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    .link {
      transition: none;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:buy-buttons-styles (INDEX:275) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

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

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

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

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

  /* Axome - Sous 750px, `min-width: fit-content` fait déborder le bouton d'ajout
     (quantité 106 + bouton 233 > 341 dispo) et le renvoie à la ligne. On l'autorise
     à se comprimer pour qu'il reste sur la ligne du sélecteur de quantité. */
  @media screen and (max-width: 749px) {
    .product-form-buttons
      > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
      min-width: 0;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:276) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:278) */
.cart-bubble {
    --cart-padding: 0.2em;

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

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

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

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

  .cart-bubble__text {
    font-size: 14px;
    color: var(--color-primary-button-background);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-items-component (INDEX:280) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

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

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

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

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

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

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

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

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:collection-card (INDEX:284) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:289) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:290) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:291) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:292) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:293) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:302) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:304) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

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

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:305) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

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

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

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:306) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

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

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

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

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

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

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

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

  header-actions {
    display: flex;

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

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

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

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

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

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: -5px;
    --cart-bubble-right: -6px;

    position: relative;
  }

  .header-actions__cart-icon .svg-wrapper {
    height: 2rem;
    width: 2rem;
  }

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

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

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

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

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

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

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

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

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

  .header-actions__text {
    display: flex;
    align-items: center;
  }

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

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

/* START_SNIPPET:jumbo-text (INDEX:319) */
.jumbo-text__container {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:322) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:323) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

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

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:325) */
.media-block {
    overflow: hidden;
    position: relative;

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

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:351) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:352) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

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

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:353) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:357) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    @media screen and (min-width: 750px) {
      padding: 0 var(--page-margin);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &:hover {
      opacity: 1;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:358) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:360) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

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

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

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

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

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

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

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card (INDEX:361) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:363) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

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

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

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

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:364) */
.product-information {
    gap: var(--gap) 0;
  }

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

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

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

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

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

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

  /* Desktop styles */
  @media screen and (min-width: 900px) {
    .product-information.section {
      grid-template-columns:
        var(--page-margin)
        min(calc(var(--page-width) - var(--page-margin) * 2), calc(100% - var(--page-margin) * 2))
        var(--page-margin);
    }

    .product-information__grid {
      grid-column: 2;
    }

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

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side — Axome : 60% media / 40% details */
      &.product-information--media-left {
        grid-template-columns: 3fr 2fr;

        .product-information__media {
          padding-right: 2.75rem;
        }

        .product-details {
          padding-left: 2.75rem;
        }

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

      /* Media on the right side — Axome : 40% details / 60% media */
      &.product-information--media-right {
        grid-template-columns: 2fr 3fr;

        .product-information__media {
          padding-left: 2.75rem;
          order: 1;
        }

        .product-details {
          padding-right: 2.75rem;
          order: 0;
        }

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

      /* Equal width columns — Axome : ratio 60% media / 40% details */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;

        &.product-information--media-left {
          grid-template-columns:
            var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) * 0.6) calc(
              var(--full-page-grid-central-column-width) * 0.4
            )
            var(--full-page-grid-margin);

          .product-information__media {
            grid-column: 2 / 3;

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

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

        &.product-information--media-right {
          grid-template-columns:
            var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) * 0.4) calc(
              var(--full-page-grid-central-column-width) * 0.6
            )
            var(--full-page-grid-margin);

          .product-information__media {
            grid-column: 3 / 4;

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

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

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

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

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

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

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

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

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

  /* Axome : ratio 60/40 conserve sur grand ecran (override Horizon 2/1) */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 3fr 2fr;
    }

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

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

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

  /* Axome - Sticky header offset : le product-details s'arrête sous le header-group sticky + 1rem d'air */
  .product-details.sticky-content--desktop {
    --sticky-header-offset: calc(var(--header-group-height, var(--header-height, 0px)) + 1rem);
  }

  /* Axome - Colonne media sticky sur la hauteur du product-details.
     `align-self: start` : sans lui l'item de grille s'étire et n'a plus de course.
     Garde en padding compensée par une marge négative plutôt qu'un `top` : un `top` non nul
     décalerait le media en permanence si la hauteur du header est fausse ou si un ancêtre
     clippe l'overflow. La garde chevauche le fil d'ariane, d'où le `pointer-events`. */
  @media screen and (min-width: 900px) {
    .product-information__grid:not(.product-information--media-none) .product-information__media {
      --media-sticky-clearance: calc(var(--header-group-height, var(--header-height, 0px)) + var(--gap-xl));

      position: sticky;
      top: 0;
      align-self: start;
      padding-block-start: var(--media-sticky-clearance);
      margin-block-start: calc(-1 * var(--media-sticky-clearance));
      pointer-events: none;
    }

    .product-information__grid:not(.product-information--media-none) .product-information__media > * {
      pointer-events: auto;
    }

    /* Le <media-gallery> porte déjà .sticky-content (sticky + top hérité de --sticky-header-offset).
       C'est la colonne qui pilote le sticky ici, sinon les deux offsets se cumulent. */
    .product-information__grid:not(.product-information--media-none)
      .product-information__media
      > media-gallery.sticky-content {
      position: static;
    }
  }

  /* Axome - Force ratio 60% media / 40% details sur desktop, toutes variantes confondues.
     Override en fin de feuille pour gagner sur la cascade Horizon (subgrid, --half, etc.) */
  @media screen and (min-width: 900px) {
    .product-information .product-information__grid:not(.product-information--media-none).product-information--media-left,
    .product-information .product-information__grid:not(.product-information--media-none).product-information--media-right {
      display: grid;
    }

    .product-information
      .product-information__grid:not(.product-information--media-none, .product-information__grid--half).product-information--media-left {
      grid-template-columns: 60% 40%;
    }

    .product-information
      .product-information__grid:not(.product-information--media-none, .product-information__grid--half).product-information--media-right {
      grid-template-columns: 40% 60%;
    }
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-matching (INDEX:367) */
/* ========================================
	   Product Matching — bascule format (Poudre/Gélule/Flocons/...).
	   Pure CSS, simples liens <a>. Le nombre de colonnes s'adapte
	   automatiquement au nombre de formats jumeaux.
	   Design : container avec border fine, item courant en bleu Nutrimuscle.
	   ======================================== */

	.product-matching {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: var(--gap-3xs);
		padding: var(--padding-2xs);
		background-color: var(--color-background);
		border: 1px solid var(--color-black);
		border-radius: var(--style-border-radius-xs);
		margin-block-end: var(--margin-md);
	}

	.product-matching__item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--gap-xs);
		min-width: 0;
		padding-block: var(--padding-2xs);
		padding-inline: var(--padding-md);
		text-decoration: none;
		color: var(--color-foreground);
		font-size: var(--font-size--sm);
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		cursor: pointer;
		transition:
			background-color var(--animation-speed) var(--animation-easing),
			color var(--animation-speed) var(--animation-easing);
	}

	/* État actif : format courant — fond bleu Nutrimuscle, texte blanc, pas cliquable */
	.product-matching__item--current {
		background-color: var(--color-blue-NM);
		color: var(--color-white);
		cursor: default;
	}

	/* État inactif : format jumeau — transparent, hover léger */
	.product-matching__item--other:hover,
	.product-matching__item--other:focus-visible {
		background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
	}

	.product-matching__label {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.product-matching__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1em;
		height: 1em;
	}

	.product-matching__icon-mask {
		width: 100%;
		height: 100%;
		background-color: currentColor;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
/* END_SNIPPET:product-matching */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:368) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

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

  /* Bascule alignée sur la grille PDP (900px), cf. product-media-swiper.liquid */
  @media screen and (min-width: 900px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

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

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

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

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

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

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

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

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

  .media-gallery__mobile-controls .slideshow-controls__counter {
    margin-right: 1rem;
    
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:369) */
.dialog-thumbnails-list-container {
		position: fixed;
		width: 100%;
		bottom: 0;
		display: flex;
		z-index: var(--layer-raised);
	}

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

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

	.dialog--closed .dialog-thumbnails-list {
		animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
	}

	@media screen and (min-width: 750px) {
		.dialog-thumbnails-list {
			position: fixed;
			flex-direction: column;
			inset: 50% var(--margin-lg) auto auto;
			right: 0;
			max-height: calc(100vh - 200px);
			overflow-y: auto;
			animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
			animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
		}

		.dialog--closed .dialog-thumbnails-list {
			animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
		}
	}

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

		img {
			height: 100%;
			object-fit: cover;
			border-radius: var(--media-radius);
			aspect-ratio: var(--aspect-ratio);
		}

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

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

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

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

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

	.dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
		/* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
		bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
		right: var(--padding-lg);
	}

	@media screen and (min-width: 750px) {
		.dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
			/* Move the controls up to match the padding on the thumbnails */
			bottom: var(--padding-lg);

			/* Move the controls to the left of the thumbnails list on the right */
			right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
		}
	}

	@media screen and (max-width: 899px) {
		/* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
		.media-gallery--hint
			:is(
				swiper-slide.swiper-slide-active + swiper-slide,
				swiper-slide:has(+ swiper-slide.swiper-slide-active:last-of-type)
			) {
			content-visibility: auto;

			product-media-swiper[actioned] & {
				content-visibility: visible;
			}
		}
	}

	.dialog-zoomed-gallery__dialog {
		background-color: var(--color-background);
		view-transition-name: zoom-dialog-ui;
	}

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

	.dialog--preloading {
		opacity: 0;
	}

	@media screen and (max-width: 749px) {
		.dialog-zoomed-gallery {
			/* Prevent scroll wheel or swipe scrolling */
			overscroll-behavior: none;
			scrollbar-width: none;
			display: flex;
			scroll-snap-type: x mandatory;
			overflow-x: hidden;
			scroll-behavior: smooth;
			height: 100%;

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

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

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

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

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

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

		.product-media__drag-zoom-wrapper {
			display: flex;
			aspect-ratio: auto;
			height: 100%;
			width: 100%;
			overflow: scroll;
			scrollbar-width: none;
			justify-content: center;

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

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

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

		.media-gallery--hint {
			--slideshow-gap: var(--gap-2xs);

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

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

	.dialog-zoomed-gallery__close-button {
		color: #fff;
		mix-blend-mode: difference;
		z-index: var(--layer-raised);
	}

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

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

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

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

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

	:root:active-view-transition .dialog-zoomed-gallery__dialog {
		background-color: transparent;
	}

	::view-transition-group(zoom-dialog-ui) {
		z-index: calc(var(--layer-overlay) + 1);
	}

	::view-transition-old(gallery-item-open),
	::view-transition-new(gallery-item-open) {
		animation-timing-function: step-start;
	}

	::view-transition-old(gallery-item-close),
	::view-transition-new(gallery-item-close) {
		animation-timing-function: step-end;
	}

	@media screen and (min-width: 750px) {
		:root:active-view-transition .product-media__image {
			background-color: transparent;
		}
	}

	::view-transition-group(gallery-item-open),
	::view-transition-group(gallery-item-close) {
		z-index: var(--layer-overlay);
		border-radius: var(--gallery-media-border-radius);
		overflow: clip;
	}

	::view-transition-group(gallery-item-open) {
		animation-timing-function: var(--spring-d300-b0-easing);
		animation-duration: var(--spring-d300-b0-duration);
	}

	::view-transition-group(gallery-item-close) {
		animation-timing-function: var(--spring-d220-b0-easing);
		animation-duration: var(--spring-d220-b0-duration);
	}

	@media screen and (max-width: 749px) {
		::view-transition-group(gallery-item-open),
		::view-transition-group(gallery-item-close) {
			animation-timing-function: step-start;
			animation-duration: 0.1s;
		}

		::view-transition-new(gallery-item-open) {
			animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
			animation-timing-function: var(--spring-d180-b0-easing);
			animation-duration: var(--spring-d180-b0-duration);
		}

		::view-transition-old(gallery-item-close) {
			animation: fade-out 0.08s linear forwards;
		}
	}

	@keyframes fade-in {
		from {
			scale: 0.98;
			opacity: 0.8;
		}
	}

	@keyframes fade-out {
		to {
			opacity: 0;
		}
	}

	/*
   * Product media gallery slideshow context styles
   */
	.product-media-gallery__slideshow--single-media [data-swiper-main] {
		@media screen and (max-width: 899px) {
			grid-area: unset;
		}
	}

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

	@media screen and (max-width: 899px) {
		/* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
		.media-gallery--hint
			:is(
				swiper-slide.swiper-slide-active + swiper-slide,
				swiper-slide:has(+ swiper-slide.swiper-slide-active:last-of-type)
			) {
			content-visibility: auto;

			product-media-swiper[actioned] & {
				content-visibility: visible;
			}
		}
	}

	@media screen and (min-width: 900px) {
		.media-gallery--carousel product-media-swiper[data-thumbnail-position='left'] [data-swiper-thumbs] {
			order: -1;
		}
	}

	.media-gallery--carousel .product-media-swiper__arrows .slideshow-control {
		padding-inline: 0;
		opacity: 1;
	}

	/* Axome - Force arrows visible on mobile for product gallery (grid or carousel) */
	@media screen and (max-width: 899px) {
		media-gallery .product-media-swiper__arrows .slideshow-control {
			opacity: 1;
		}
	}

	/* Axome - Hide arrows on desktop in grid mode (not needed, media shown as grid) */
	@media screen and (min-width: 900px) {
		.media-gallery--grid .product-media-swiper__arrows {
			display: none;
		}
	}

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

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

	swiper-slide.product-media-container--tallest {
		content-visibility: visible;
	}
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media-swiper (INDEX:371) */
/* ========================================
     Bascule desktop/mobile de la galerie — 900px

     La galerie suit la grille de la PDP, qui passe en une colonne à 900px
     (product-information-content.liquid), pas le switch global 1200px des
     utilitaires .mobile:hidden / .desktop:hidden. Les réutiliser ici ouvrait
     une bande hybride en tablette (900-1199) : vignettes desktop masquées mais
     contrôles mobiles rendus avec le style desktop.
     ======================================== */

	@media screen and (max-width: 899px) {
		.gallery-mobile\:hidden {
			/* stylelint-disable-next-line declaration-no-important */
			display: none !important;
		}
	}

	@media screen and (min-width: 900px) {
		.gallery-desktop\:hidden {
			/* stylelint-disable-next-line declaration-no-important */
			display: none !important;
		}
	}

	/* ========================================
     Product Media Swiper — host & main container
     ======================================== */

	product-media-swiper {
		display: block;
		position: relative;
	}

	product-media-swiper [data-swiper-main] {
		width: 100%;
	}

	/* Fenêtre entre la définition du custom element (shadow root vide, plus rien de
	   projeté) et son `initialize()` : la boîte garde son gabarit et son aplat gris,
	   au lieu de s'effondrer puis de repousser le contenu. */
	product-media-swiper [data-swiper-main][init='false'] {
		/* `display: block` est indispensable : tant que Swiper n'a pas initialisé le
		   composant, `swiper-container` est un élément inconnu du navigateur, donc
		   `display: inline` — et une boîte inline ignore `width` comme `aspect-ratio`.
		   En desktop la grille le blockifiait déjà, d'où un mobile qui s'effondrait seul. */
		display: block;
		aspect-ratio: var(--main-media-ratio, 1);
		background-color: var(--color-skeleton);
	}

	/* Même plafond que celui des slides en `constrain-height` (cf. base.css) : sans lui
	   la boîte réservée dépasse la hauteur finale sur les grands écrans, et le contenu
	   qui suit remonte à l'init. Les valeurs suivent celles de base.css et de la section
	   produit mis en avant — à garder synchronisées si elles y changent. */
	@media screen and (min-width: 750px) {
		product-media-swiper:has(.constrain-height) [data-swiper-main][init='false'] {
			--viewport-offset: calc(var(--header-height, 3.5rem) + 8rem);
			--constrained-min-height: 500px;

			max-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
		}
	}

	@media screen and (min-width: 1200px) {
		.ax-featured-product product-media-swiper:has(.constrain-height) [data-swiper-main][init='false'] {
			--viewport-offset: calc(
				var(--header-group-height, var(--header-height, 6rem)) + var(--gap-2xl) + var(--gap-2xl)
			);
		}
	}

	product-media-swiper swiper-slide {
		display: block;
		height: auto;
	}

	/* Avant l'init de Swiper, les slides sont dans le flux et s'empilent en colonne
	   (6 médias ≈ 3400px au lieu de 500) : c'est du CLS au chargement.
	   Crochet `[init='false']` comme partout ailleurs dans le thème — Swiper ne retire
	   jamais cet attribut, c'est notre JS qui le fait après `.initialize()`. Contrairement
	   aux autres sections on ne masque PAS le conteneur (les slides sont dedans, pas dans
	   un fallback séparé) : on garde le 1er média peint et on masque les suivants, ce qui
	   réserve exactement la hauteur finale. Sans JS, seul le 1er média s'affiche — le
	   carrousel étant de toute façon inutilisable sans JS.
	   Les miniatures ne sont PAS concernées : elles forment déjà une colonne (desktop)
	   ou sont masquées (mobile), donc leur empilement pré-init ressemble au rendu final.
	   Les masquer ne gagnait rien et faisait clignoter la colonne à l'init. */
	product-media-swiper [data-swiper-main][init='false'] swiper-slide:not(:first-of-type) {
		display: none;
	}

	/* Axome - Main media image partage le border-radius des thumbs (desktop uniquement) */
	@media screen and (min-width: 900px) {
		product-media-swiper [data-swiper-main] .product-media__image,
		product-media-swiper [data-swiper-main] :is(video, .deferred-media__poster-button img) {
			border-radius: var(--thumbnail-radius, var(--media-radius));
		}

		/* En media-fit-contain, `max-height: var(--constrained-height)` rogne la hauteur du
		   slide sans réduire sa largeur : l'<img> (width/height: 100%) devient plus large que
		   l'image peinte et le border-radius tombe dans le letterbox. On fait coller la boîte
		   de l'<img> à l'image réelle pour que les coins arrondis soient sur la photo.
		   La hauteur reste à 100% : en `height: auto` l'<img> se dimensionne sur sa taille
		   intrinsèque, c.-à-d. la valeur calculée de `sizes` — qui ne suit pas la largeur
		   réelle de la colonne média et rétrécissait l'image en tablette. */
		product-media-swiper [data-swiper-main] .media-fit-contain .product-media__image {
			aspect-ratio: var(--media-preview-ratio, 1);
			width: auto;
			height: 100%;
			max-width: 100%;
			margin: auto;
		}
	}

	/* La règle `deferred-media[class] … { object-fit: cover }` de base.css vise le bloc
	   vidéo, mais elle matche AUSSI la galerie produit : l'élément y porte un attribut
	   `class` vide, et `[class]` teste la présence de l'attribut, pas son contenu.
	   Résultat, la vidéo s'affichait rognée et pleine largeur (645px) là où son poster
	   était contenu (399px), d'où le saut au clic sur lecture. En `media-fit-contain`,
	   tous les médias sont contenus — la vidéo comme les images. */
	/* FI vidéo iso photos (ticket 12689734303) : la vidéo REMPLIT la boîte des
	   images (cover, crop latéral du 16:9) au lieu d'être letterboxée. Poster et
	   vidéo restent cohérents entre eux — en les désynchronisant, l'affichage
	   saute au clic sur lecture (leçon du cadrage précédent). */
	product-media-swiper [data-swiper-main] :is(video, .deferred-media__poster-button img),
	product-media-swiper
		[data-swiper-main]
		:is(.product-media-container--video, .product-media-container--external_video)
		.product-media__image {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

	/* Slides vidéo : le poster du bouton play est masqué par la galerie (qui
	   affiche sa propre preview) → jamais converti par l'observer, jamais
	   `.cfh-loaded` → il retenait le fond skeleton en otage, d'où des bandes
	   grises permanentes en letterbox. Ici c'est le média VISIBLE qui gouverne :
	   preview chargée = fond rendu. */
	product-media-swiper .product-media-container.lazy-skeleton:has(.product-media__image.cfh-loaded) {
		background-color: transparent;
	}

	/* ========================================
     Arrows
     Default: absolute overlay on the main swiper (mirrors the ex-slideshow-arrows.liquid styles).
     The .product-media-swiper__arrows wrapper sits inside <product-media-swiper> and is
     positioned relative to it. Individual slideshow-control buttons get pointer-events back.
     ======================================== */

	.product-media-swiper__arrows {
		--cursor-previous: w-resize;
		--cursor-next: e-resize;

		position: absolute;
		inset: 0;
		display: flex;
		z-index: var(--layer-heightened);
		pointer-events: none;
		mix-blend-mode: difference;
		align-items: center;
		justify-content: space-between;
	}

	.product-media-swiper__arrows[data-position='left'] {
		justify-content: flex-start;
		padding-inline: var(--padding-xs);
		align-items: flex-end;
	}

	.product-media-swiper__arrows[data-position='right'] {
		justify-content: flex-end;
		padding-inline: var(--padding-xs);
		align-items: flex-end;
	}

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

	/* Icon-style 'none' hides the button entirely — matches legacy behaviour */
	.product-media-swiper__arrows .slideshow-control.slideshow-control--style-none {
		display: none;
	}

	/* Cancel mix-blend-mode when shape has a background (square / circle) */
	.product-media-swiper__arrows:has(.slideshow-control--shape-square),
	.product-media-swiper__arrows:has(.slideshow-control--shape-circle) {
		mix-blend-mode: normal;
	}

	/* Disabled state — Swiper ajoute .swiper-button-disabled */
	.product-media-swiper__arrows .slideshow-control.swiper-button-disabled,
	.product-media-swiper__arrows .slideshow-control.is-disabled {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}

	/* Pagination on-media (dots/counter) */
	.product-media-swiper[data-controls-position='on_media'] [data-swiper-pagination][data-instance='primary'] {
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: var(--layer-raised);
	}

	/* ========================================
     Thumbnails (primary + mobile)
     ======================================== */

	[data-swiper-thumbs] {
		width: 100%;
		margin-block-start: var(--margin-sm);
	}

	[data-swiper-thumbs] swiper-slide {
		width: clamp(44px, 7vw, var(--thumbnail-width, 80px));
		aspect-ratio: var(--aspect-ratio, 1);
		border-radius: var(--thumbnail-radius, var(--media-radius));
		cursor: pointer;
		opacity: var(--opacity-50, 0.5);
		transition: opacity var(--animation-speed) var(--animation-easing);
		overflow: hidden;
		position: relative;
	}

	/* Axome - vignettes agrandies au-delà de la largeur maquette (grand écran) ; inchangées en dessous */
	@media (min-width: 1600px) {
		[data-swiper-thumbs] swiper-slide {
			width: clamp(44px, 7vw, 88px);
		}
	}

	[data-swiper-thumbs] swiper-slide:is(.is-thumb-active, .swiper-slide-thumb-active) {
		opacity: 1;
	}

	[data-swiper-thumbs] swiper-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: inherit;
	}

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

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

	/* Desktop layout : thumbs left / right */
	@media screen and (min-width: 900px) {
		.product-media-swiper[data-thumbnail-position='left'],
		.product-media-swiper[data-thumbnail-position='right'] {
			display: grid;
			gap: var(--gap-xs);
			grid-template-areas:
				'thumbs main'
				'thumbs arrows';
			grid-template-columns: auto minmax(0, 1fr);
			grid-template-rows: minmax(0, 1fr) auto;
		}

		.product-media-swiper[data-thumbnail-position='right'] {
			grid-template-areas:
				'main thumbs'
				'arrows thumbs';
			grid-template-columns: minmax(0, 1fr) auto;
		}

		.product-media-swiper[data-thumbnail-position='left'] [data-swiper-thumbs][data-instance='primary'],
		.product-media-swiper[data-thumbnail-position='right'] [data-swiper-thumbs][data-instance='primary'] {
			grid-area: thumbs;
			width: auto;
			max-height: 100%;
			margin-block-start: 0;
		}

		.product-media-swiper[data-thumbnail-position='left'] [data-swiper-main],
		.product-media-swiper[data-thumbnail-position='right'] [data-swiper-main] {
			grid-area: main;
		}

		.product-media-swiper[data-thumbnail-position='left'] .ax-product-tags--page,
		.product-media-swiper[data-thumbnail-position='right'] .ax-product-tags--page {
			grid-area: main;
		}

		/* La colonne des miniatures est en `auto` : le conteneur des thumbs étant lui
		   aussi un swiper, il s'effondre pendant la fenêtre d'init et la colonne tombe
		   à 0 — le média principal occupait alors toute la largeur puis se rétractait.
		   On lui réserve la largeur d'une vignette, comme après l'init. */
		.product-media-swiper[data-thumbnail-position='left'] [data-swiper-thumbs][data-instance='primary'][init='false'],
		.product-media-swiper[data-thumbnail-position='right'] [data-swiper-thumbs][data-instance='primary'][init='false'] {
			width: clamp(44px, 7vw, var(--thumbnail-width, 80px));

			@media (min-width: 1600px) {
				width: clamp(44px, 7vw, 88px);
			}
		}

		.product-media-swiper[data-thumbnail-position='left'] .product-media-swiper__arrows,
		.product-media-swiper[data-thumbnail-position='right'] .product-media-swiper__arrows {
			grid-area: arrows;
			position: static;
			inset: auto;
			mix-blend-mode: normal;
		}

		.product-media-swiper[data-thumbnail-position='left']
			[data-swiper-thumbs][data-instance='primary']::part(container),
		.product-media-swiper[data-thumbnail-position='right']
			[data-swiper-thumbs][data-instance='primary']::part(container) {
			height: 100%;
		}
	}

	/* ========================================
     Pagination — wrapper positioning
     Les classes internes (.slideshow-controls__counter-*, .slideshow-controls__dots)
     sont stylées ci-dessous (portées depuis snippets/slideshow-controls.liquid pour
     garantir leur présence sur les pages où slideshow-controls.liquid n'est plus rendu).
     ======================================== */

	[data-swiper-pagination] {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: var(--minimum-touch-target);
		width: 100%;
	}

	.product-media-swiper__mobile-controls {
		grid-area: auto;
	}

	/* ---- Ported from slideshow-controls.liquid (dots + counter) ---- */

	.product-media-swiper .slideshow-controls__dots {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		list-style: none;
		gap: 0.6rem;
		padding: var(--padding-sm) var(--padding-lg);
		border-radius: 3rem;
		overflow: hidden;
	}

	.product-media-swiper .slideshow-controls__dots button {
		--color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
		--color-active: var(--color-foreground);
		--color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
		--size: 0.56rem;

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

	.product-media-swiper .slideshow-controls__dots button::after {
		content: '';
		display: block;
		background-color: var(--color);
		height: var(--size);
		width: var(--size);
		border-radius: calc(var(--size) / 2);
		box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);
	}

	.product-media-swiper .slideshow-controls__dots button:hover {
		--color: var(--color-hover);
	}

	.product-media-swiper .slideshow-controls__dots button[aria-selected='true'] {
		--color: var(--color-active);
	}

	.product-media-swiper .slideshow-controls__dots button[aria-selected='true']::after {
		box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
	}

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

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

	.product-media-swiper .slideshow-controls__counter-list {
		display: none;
		margin: 0;
		padding: 0;
		list-style: none;
		gap: 0.625rem;
		align-items: baseline;
		font-variant-numeric: tabular-nums;
	}

	.product-media-swiper .slideshow-controls__counter-item {
		--color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
		--color-active: var(--color-foreground);

		width: auto;
		height: auto;
		padding: 0;
		color: var(--color);
		font-size: var(--font-size--sm);
		font-weight: 400;
		line-height: 1;
		transition: color var(--animation-values);
	}

	.product-media-swiper .slideshow-controls__counter-item[aria-selected='true'] {
		color: var(--color-active);
		font-weight: 700;
	}

	/* Mobile — swap compact pour liste */
	@media screen and (max-width: 899px) {
		.product-media-swiper__mobile-controls .slideshow-controls__counter {
			background-color: transparent;
			backdrop-filter: none;
			padding: 0;
			border-radius: 0;
		}

		.product-media-swiper__mobile-controls .slideshow-controls__counter-compact {
			display: none;
		}

		.product-media-swiper__mobile-controls .slideshow-controls__counter-list {
			display: inline-flex;
		}

		/* Pas de rotation du caret ici : le snippet partagé slideshow-arrow fait déjà
		   pivoter le span de -90deg, et flip-x retourne la flèche « précédent ». Une
		   seconde rotation portait le total à -180deg — les deux chevrons pointaient
		   alors vers le haut au lieu de l'extérieur. */

		/* Axome - Flèches mobile toujours noires (annule le mix-blend-mode qui inverse selon le fond) */
		.product-media-swiper__arrows {
			mix-blend-mode: normal;
		}

		.product-media-swiper__arrows .slideshow-control {
			color: var(--color-black);
		}

		/* Axome - Pagination mobile : overlay bas-droite sur l'image. En tablette (≥750px)
		   `constrain-height` letterboxe l'image, d'où le retrait --media-band-inline-end. */
		.product-media-swiper__mobile-controls {
			position: absolute;
			inset: auto calc(var(--media-band-inline-end, 0px) + var(--padding-lg)) var(--padding-lg) auto;
			width: auto;
			min-height: auto;
			z-index: var(--layer-raised);
			pointer-events: none;
			mix-blend-mode: difference;
		}

		.product-media-swiper__mobile-controls > * {
			pointer-events: auto;
		}

		/* Axome - Couleurs blanches pour que mix-blend-mode: difference inverse réellement le fond */
		.product-media-swiper__mobile-controls .slideshow-controls__counter,
		.product-media-swiper__mobile-controls .slideshow-controls__counter-item {
			color: var(--color-white);
		}

		.product-media-swiper__mobile-controls .slideshow-controls__counter .slash {
			color: rgb(255 255 255 / var(--opacity-50));
		}

		.product-media-swiper__mobile-controls .slideshow-controls__counter-item[aria-selected='true'] {
			color: var(--color-white);
		}

		.product-media-swiper__mobile-controls .slideshow-controls__dots button {
			--color: rgb(255 255 255 / var(--opacity-50));
			--color-active: var(--color-white);
			--color-hover: var(--color-white);
		}
	}

	/* ========================================
     Hint mode (mobile peek)
     ======================================== */

	@media screen and (max-width: 899px) {
		/* Expose overflow uniquement en mode peek/hint mobile pour montrer la prochaine slide */
		.media-gallery--hint product-media-swiper [data-swiper-main]::part(container) {
			overflow: visible;
		}

		.media-gallery--hint product-media-swiper [data-swiper-main]::part(wrapper) {
			gap: var(--gap-2xs);
		}

		.media-gallery--hint product-media-swiper swiper-slide:not(:only-child) {
			width: 90%;
		}
	}

	/* ========================================
     Grid mode — hide swiper on desktop
     ======================================== */

	@media screen and (min-width: 900px) {
		media-gallery.media-gallery--grid product-media-swiper {
			display: none;
		}
	}

	/* ========================================
     Single media — hide controls & arrows (defensive)
     ======================================== */

	product-media-swiper.slideshow--single-media .product-media-swiper__arrows,
	product-media-swiper.slideshow--single-media [data-swiper-pagination],
	product-media-swiper.slideshow--single-media [data-swiper-thumbs] {
		display: none;
	}
/* END_SNIPPET:product-media-swiper */

/* START_SNIPPET:product-media (INDEX:372) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

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

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

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

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

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

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

/* START_SNIPPET:product-offer-summary (INDEX:373) */
.product__nutridays {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.6875rem;
		border-radius: 0.3125rem;
		overflow: hidden;
	}

	.product__nutridays-summary {
		overflow: hidden;
		border-radius: var(--style-border-radius-xs);
		/* Permet d'animer height: 0 → auto via interpolate-size */
		interpolate-size: allow-keywords;
	}

	/* Animation smooth de l'ouverture/fermeture du details
	   ::details-content cible tout sauf le <summary> (Chrome 131+ / Firefox 129+) */
	.product__nutridays-summary::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size 0.3s var(--ease-out-cubic, ease),
			content-visibility 0.3s allow-discrete;
	}

	.product__nutridays-summary[open]::details-content {
		block-size: auto;
	}

	@media (prefers-reduced-motion: reduce) {
		.product__nutridays-summary::details-content {
			transition: none;
		}
	}

	.product__nutridays-summary > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem;
		cursor: pointer;
		list-style: none;
	}

	.product__nutridays-summary > summary::-webkit-details-marker {
		display: none;
	}

	.product__nutridays-summary .icon-caret {
		flex-shrink: 0;
		width: 32px;
		height: 32px;
		background-color: var(--offer-text-color);
		color: var(--offer-bg-color);
	}

	.product__nutridays-summary .icon-caret svg {
		transition: transform 0.2s ease;
	}

	.product__nutridays-summary[open] .icon-caret svg {
		transform: rotate(180deg);
	}

	.product__nutridays-summary-content {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		font-weight: 700;
		max-width: calc(100% - 4.5rem);
	}

	.product__nutridays-summary-content-arrow {
		font-weight: 300;
		text-decoration: underline;
	}

	.product__nutridays-bg-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.product__nutridays-text {
		position: relative;
		max-width: 90%;
		opacity: 1;
	}

	.product__nutridays-text strong {
		font-weight: 600;
	}

	.product__nutridays-text p:first-child {
		margin-top: 0;
	}

	.product__nutridays-text p:last-child {
		margin-bottom: 0;
	}

	.product__nutridays-title {
		margin: 0 0 0.3125rem 0;
		font-size: 1rem;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.02em;
		color: currentColor;
	}

	.product__nutridays-title + p {
		margin-top: 0;
	}
/* END_SNIPPET:product-offer-summary */

/* START_SNIPPET:product-story (INDEX:377) */
.product-story__btn {
    z-index: var(--layer-raised);
    position: absolute;
    inset-block-start: calc(var(--media-band-block-start, 0px) + var(--padding-sm));
    inset-inline-end: calc(var(--media-band-inline-end, 0px) + var(--padding-sm));
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 60px;
    block-size: 60px;
    padding: 0;
    border: 2px solid var(--color-foreground);
    border-radius: 50%;
    background-color: var(--color-background);
    cursor: pointer;
    overflow: hidden;
  }

  .product-story__btn-media {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    padding: var(--padding-3xs);
    object-fit: cover;
  }

  .product-story__btn-icon {
    position: relative;
    display: flex;
    transform: translateX(12%);
    color: var(--color-background);
  }

  .product-story__btn-icon svg {
    inline-size: var(--icon-size-sm);
    block-size: auto;
    overflow: visible;
  }

  @media screen and (min-width: 1200px) {
    .product-story__btn {
      inline-size: 76px;
      block-size: 76px;
      inset-block-start: calc(var(--media-band-block-start, 0px) + var(--padding-md));
      inset-inline-end: calc(var(--media-band-inline-end, 0px) + var(--padding-md));
    }

    .product-story__btn-icon svg {
      inline-size: var(--icon-size-lg);
    }
  }

  /* La bulle est positionnée par rapport à la galerie */
  media-gallery:has(.product-story__btn) {
    position: relative;
  }

  /* Mode « constrain image » : le JS recale la bulle sur l'image visible
     (letterbox). On la masque le temps du 1er positionnement pour éviter le saut.
     Son ancrage change ensuite d'un média à l'autre — une vidéo verticale au milieu
     d'images carrées est bien plus étroite — d'où la transition sur les insets, calée
     sur la durée d'animation de hauteur du carrousel. */
  media-gallery:has(.media-fit-contain) .product-story__btn {
    transition: opacity var(--animation-speed, 0.2s) ease;
  }

  /* La transition de position n'est activée QU'APRÈS le premier placement (le JS pose
     l'attribut une frame plus tard). Sans ce garde-fou, la pastille s'animait depuis sa
     position par défaut — en haut du conteneur média — jusqu'à sa place calculée, et on
     la voyait littéralement voler en travers de l'image au chargement. Une fois posée,
     la transition sert aux changements de média (image carrée ↔ vidéo verticale). */
  media-gallery:has(.media-fit-contain) .product-story__btn[data-media-bands-animated] {
    transition:
      opacity var(--animation-speed, 0.2s) ease,
      inset-block-start var(--animation-values),
      inset-inline-end var(--animation-values);
  }

  media-gallery:has(.media-fit-contain) .product-story__btn:not([data-media-bands='ready']) {
    opacity: 0;
  }

  /* Story chrome uses literal colors: theme color tokens don't reliably resolve in <dialog> scope (cf. sidecart-porting-guide piège #1). */
  .story-player__dialog {
    padding: 0;
    border: none;
    background: transparent;
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
  }

  .story-player__dialog::backdrop {
    background-color: rgb(0 0 0 / var(--opacity-60));
  }

  .story-player__frame {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    background-color: #000;
  }

  .story-player__swiper {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .story-player__slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .story-player__media-wrap {
    inline-size: 100%;
    block-size: 100%;
  }

  .story-player__media {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .story-player__media--contain {
    object-fit: contain;
  }

  /* Header */
  .story-player__header {
    z-index: 3;
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: var(--padding-sm) var(--padding-sm) 0;
  }

  .story-player__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gap-xs);
  }

  .story-player__action {
    display: flex;
    padding: 4px;
    border: none;
    background: transparent;
    color: #d9d9d9;
    cursor: pointer;
  }

  .story-player__action svg { inline-size: var(--icon-size-sm); block-size: auto; }
  .story-player__action--sound[hidden] { display: none; }

  /* Pagination (barres de progression) */
  .story-player__pagination {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .story-player__pagination .swiper-pagination-bullet {
    position: relative;
    inline-size: 100%;
    block-size: 2px;
    margin: 0;
    padding: var(--padding-xs) 0;
    border: none;
    border-radius: 0;
    background: transparent;
    opacity: 1;
    cursor: pointer;
  }

  .story-player__pagination .swiper-pagination-bullet::before,
  .story-player__pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    transform: translateY(-50%);
    block-size: 2px;
  }

  .story-player__pagination .swiper-pagination-bullet::before {
    inline-size: 100%;
    background-color: #d9d9d9;
    opacity: var(--opacity-30);
  }

  .story-player__pagination .swiper-pagination-bullet::after {
    inline-size: 0;
    background-color: #d9d9d9;
  }

  .story-player__pagination .swiper-pagination-bullet-active::after {
    inline-size: var(--story-dots-active-width, 0);
    transition: inline-size var(--story-transition-duration, 5000ms) linear;
  }

  /* Tap zones */
  .story-player__nav {
    z-index: var(--layer-raised);
    position: absolute;
    inset-block: 56px 56px;
    inline-size: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .story-player__nav--prev { inset-inline-start: 0; }
  .story-player__nav--next { inset-inline-end: 0; }

  /* Footer */
  .story-player__footer {
    z-index: 3;
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
  }

  .story-player__footer-btn {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    inline-size: 100%;
    padding: 18px var(--padding-lg);
    border: none;
    background: transparent;
    color: #d9d9d9;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .story-player__footer-btn[hidden] { display: none; }
  .story-player__footer-btn svg { inline-size: 12px; block-size: auto; overflow: visible; }

  /* Options panel */
  .story-player__options {
    z-index: 4;
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
  }

  .story-player__options.is-open { visibility: visible; opacity: 1; }

  .story-player__options-bg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: none;
    background-color: rgb(0 0 0 / var(--opacity-60));
    cursor: pointer;
  }

  .story-player__options-content {
    position: absolute;
    inset-block-end: -100%;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: 0 var(--padding-xl) var(--padding-xl);
    transition: inset-block-end 250ms ease-in-out;
  }

  .story-player__options.is-open .story-player__options-content { inset-block-end: 0; }

  .story-player__options-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-sm);
    overflow: hidden;
  }

  .story-player__options-item { border-block-end: 1px solid rgb(0 0 0 / 0.1); }
  .story-player__options-item:last-child { border-block-end: none; }

  .story-player__options-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    padding: 14px var(--padding-lg);
    color: var(--color-foreground);
    text-decoration: none;
  }

  .story-player__options-link svg { inline-size: var(--icon-size-sm); block-size: auto; }

  .story-player__options-cancel {
    inline-size: 100%;
    padding: 14px var(--padding-lg);
    border: none;
    border-radius: var(--style-border-radius-sm);
    background-color: var(--color-background);
    color: var(--color-foreground);
    font: inherit;
    cursor: pointer;
  }

  /* Desktop : carte portrait centrée */
  @media screen and (min-width: 1200px) {
    .story-player__frame {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      transform: translate(-50%, -50%);
      inline-size: 80%;
      max-inline-size: 420px;
      block-size: auto;
      aspect-ratio: 9 / 16;
      max-block-size: 96%;
      border-radius: var(--style-border-radius-sm);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-story__btn,
    .story-player__pagination .swiper-pagination-bullet-active::after,
    .story-player__options,
    .story-player__options-content { transition: none; }
  }
/* END_SNIPPET:product-story */

/* START_SNIPPET:quantity-selector (INDEX:379) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

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

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

/* START_SNIPPET:quick-add-modal-styles (INDEX:380) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  /* Axome — quick-add Nutrimuscle : modal plus large + hauteur selon le contenu
     (titre + prix + offre + format + saveur + CTA). Scopé via :has(.ax-quick-add)
     pour ne pas impacter le chemin non-Axome (fetch de la page produit).
     height: fit-content (et NON auto) : le <dialog>:modal a inset:0 (top+bottom),
     donc height:auto = remplir l'espace (clampé à max-height → grand vide).
     fit-content dimensionne au contenu ; au-delà de 90vh, .quick-add-modal__content
     scrolle via son overflow-y: auto. */
  @media screen and (min-width: 750px) {
    .quick-add-modal:has(.ax-quick-add) {
      width: 85dvw;
      max-width: 80rem;
      height: fit-content;
      max-height: 90vh;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-3xs);
    right: var(--margin-3xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  /* Axome — quick-add Nutrimuscle : croix alignée sur la ligne du titre (moins dans le coin) */
  @media screen and (min-width: 750px) {
    .quick-add-modal:has(.ax-quick-add) .quick-add-modal__close {
      top: 2.5rem;
      right: 2.5rem;
    }
  }

  .quick-add-modal__close:focus,
  .quick-add-modal__close:focus-visible {
    border: none;
    outline: none;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    /* Pas de bordure / anneau de focus sur la croix (demande Nutrimuscle) */
    &:focus,
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: none;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option+.variant-option {
    margin: 0;
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      display: none !important;
    }
  }

  .quick-add-modal__content .product-matching__item {
    padding-block: var(--padding-2xs);
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

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

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:382) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

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

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

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

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

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

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

    &:hover {
      scale: 1.03;

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

    &:active {
      scale: 0.99;
    }

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

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

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

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

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

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

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }
  
  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:384) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

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

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

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

    .price {
      font-weight: 500;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:385) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:386) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    /* Les flèches de la refonte restent visibles et grisées une fois inactives,
       comme dans les autres carrousels. Les formes héritées de Horizon gardent
       leur comportement d'origine (disparition). */
    .slideshow-control[disabled]:not(.slideshow-control--shape-outline) {
      display: none;
    }

    /* Écarte les deux flèches aux extrémités — mise en page du carrousel natif
       Horizon uniquement. Sans le scope sur `slideshow-arrows`, la règle fuyait
       vers les sections qui posent leur propre conteneur de flèches groupées
       dans un `.resource-list__carousel` (cf. featured-blog-posts). */
    slideshow-arrows .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  /* Axome - Refonte 2026: mobile peek layout extends to tablet (< 1200px), so
     tablet carousels show 1 full slide + 1 peeking — same as mobile — instead
     of cramming N cards side-by-side. */
  @container resource-list-carousel (max-width: 1199px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 1200px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

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

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:reviews-io-product (INDEX:388) */
/* Overrides scopés au widget REVIEWS.io (Polaris). !important requis : la CSS du
     widget est injectée au runtime par build.js, donc après celle du thème. */
  .ElementsWidget-prefix .ElementsWidget .u-marginBottom--lg {
    margin-bottom: 0 !important;
  }

  .ElementsWidget-prefix .ElementsWidget .R-ContentList .R-ContentList__item.u-textLeft--all.u-positionRelative {
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
  }

  .ElementsWidget-prefix .ElementsWidget {
    margin-bottom: 0 !important;
  }

  .ElementsWidget-prefix .ElementsWidget__footer.u-textRight--all {
    display: none !important;
  }

  @media screen and (min-width: 1200px) {
    /* Le groupe central (attributs) occupe tout l'espace dispo : on neutralise le
       groupe droit, vide (bouton « écrire un avis » désactivé). */
    .ElementsWidget-prefix .header__inner .header__group--right {
      flex-basis: 0 !important;
    }

    /* Sliders d'attributs DANS les avis uniquement (pas le header résumé), 2 colonnes.
       La gouttière est déjà faite par le padding 10px des sliders ; le groupe a une
       marge négative (0 -10px) qui le fait déborder → on la neutralise. Pas de
       column-gap (il doublerait la gouttière). */
    .ElementsWidget-prefix .R-ContentList__item .R-SliderIndicator-group {
      margin-inline: 0 !important;
    }

    .ElementsWidget-prefix .R-ContentList__item .R-SliderIndicator--sm {
      max-width: 50% !important;
    }
  }
/* END_SNIPPET:reviews-io-product */

/* START_SNIPPET:search-modal (INDEX:390) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
    /* --ease-out-quad (token global) démarre très vite : « agressif » sur une
       ouverture plein écran. Courbe locale à départ progressif. */
    --ax-search-ease: cubic-bezier(0.4, 0, 0.2, 1);

    display: block;
  }

  .dialog-modal.search-modal__content {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 100dvh;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    /* Dialog `non-modal` (la page reste interactive : on ferme la recherche en
       cliquant le header). N'étant plus dans le top-layer, le panneau a besoin
       d'un z-index pour passer au-dessus du contenu de page. */
    z-index: var(--layer-overlay);
    border-radius: 0;
    background: transparent;
    /* Neutralise l'ombre par défaut de .dialog-modal (jointure header/recherche). */
    box-shadow: none;
    overflow: hidden;
  }

  .search-modal__content::backdrop {
    display: none;
  }

  .dialog-modal[open].search-modal__content {
    animation: none;
  }

  /* Pendant la fermeture, on fige le contenu : sinon, en quittant l'état frappe,
     Nosto vide l'autocomplete (blur) et la liste de collections réapparaît une
     fraction de seconde avant que la modal disparaisse (effet « suppression +
     retour collections »). On masque donc le contenu le temps du fondu. */
  .search-modal__content.dialog-closing .predictive-search-form__content-wrapper {
    visibility: hidden;
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-panel-fade-out 360ms var(--ease-out-quad) forwards;
  }

  @keyframes search-panel-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes search-panel-fade-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .search-modal__content[open] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Scroll-lock du fond, porté en CSS et non par l'attribut `html[scroll-lock]`
     que pose dialog.js : cet attribut est partagé et `header-menu` le retire
     (#syncDesktopScrollLock, appelé sur chaque clic document et chaque
     hover/leave de menu) dès qu'aucun dropdown de menu n'est ouvert — il
     relâchait donc le verrou du search resté ouvert.

     `:not([data-docked])` cible le mode modal (desktop) : en docked (mobile) le
     dialog est TOUJOURS `open`, son verrou est porté par [data-search-expanded]
     (règle dans le media query ci-dessous). */
  html:has(#search-modal:not([data-docked]) dialog[open]) {
    overflow: hidden;
  }

  /* ===== Mobile/tablette < 1330px : recherche « ancrée » (docked) =====
     Le dialog est affiché en permanence (search-modal-panel.js → dock). En état
     DOCKED il est transparent et laisse passer les clics : seule la rangée input
     (posée sur .header-mobile__search) est visible et cliquable. Au focus du champ
     (:focus-within) il devient le panneau plein écran. Aucune ouverture/fermeture
     de modal sur mobile — deux états pilotés par le focus. */
  @media screen and (max-width: 1329px) {
    .dialog-modal.search-modal__content {
      inset: 0;
      height: 100%;
      overflow: visible;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .search-modal__content {
      pointer-events: none;
    }

    .search-modal__content .predictive-search-form__header,
    .search-modal__content[data-search-expanded] .predictive-search-form__content-wrapper {
      pointer-events: auto;
    }

    /* Pas d'animation d'« ouverture » : le champ est là dès le départ (docked).
       Annule les animations globales déclenchées par [open] (fade-in du dialog,
       slide-down vertical du panneau — réservés au desktop). */
    .dialog-modal[open].search-modal__content {
      animation: none;
    }

    .search-modal__content[open] predictive-search-component {
      animation: none;
    }

    .search-modal__content predictive-search-component {
      background: transparent;
      position: static;
    }

    .search-modal__content .predictive-search-form {
      position: static;
    }

    /* L'opacité est plus courte que le clip-path : au repli le contenu se dissout
       avant la fin du volet, ce qui adoucit la fermeture et masque au passage la
       remise à l'état vide de l'autocomplete Nosto (déclenchée par le blur). */
    .search-modal__content .predictive-search-form__content-wrapper {
      transition: clip-path 460ms var(--ax-search-ease),
        background-color 460ms var(--ax-search-ease), opacity 240ms var(--ax-search-ease);
    }

    .search-modal__content[data-search-expanded] .predictive-search-form__content-wrapper {
      background: var(--color-background);
    }

    .search-modal__content:not([data-search-expanded]) .predictive-search-form__content-wrapper {
      clip-path: inset(0 0.8rem 100% 0.8rem round 0.5rem);
      opacity: 0;
    }

    .search-modal__content[data-search-expanded] .predictive-search-form__content-wrapper {
      clip-path: inset(0 0 0 0 round 0);
      opacity: 1;
    }

    /* scroll-lock uniquement quand le panneau est déployé. */
    html:has(#search-modal dialog[data-search-expanded]) {
      overflow: hidden;
    }

    html:has(#search-modal dialog[data-search-expanded]) #header-group > *:not(#search-modal),
    html:has(#search-modal dialog[data-search-expanded]) body > *:not(#header-group) {
      touch-action: none;
    }
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  /* Séparateur vertical entre la croix de reset et la fermeture supprimé
     (cf. maquette : pas de divider). */

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: block;
    width: 100%;
    position: relative;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

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

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

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

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

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

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: var(--color-foreground);
    opacity: 1;
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    /* Croix alignée à DROITE de sa zone tactile (la zone min-width s'étend vers la
       gauche, la croix reste collée à droite) + marge de fin nulle :
       - desktop (loupe masquée) → la croix tombe à la FIN de la bordure (soulignement) ;
       - mobile (loupe = voisine de droite via order:2) → la croix se rapproche de la loupe. */
    justify-content: flex-end;
    min-width: var(--minimum-touch-target);
    padding-block: 0;
    padding-inline: var(--padding-sm) 0;
    margin-inline-end: 0;
    background: transparent;
    color: var(--color-foreground);
    opacity: 1;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

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

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    /* ⚠️ --icon-size-md vaut 2.5rem (plus grand que --icon-size-lg) dans ce thème
       → déformait le svg. On utilise --icon-size-xs (≈13px), comme la croix de
       fermeture / la maquette « Icons Supprimer ». */
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

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

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

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

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

  .predictive-search__close-panel,
  .predictive-search__back {
    display: none;
  }

  /*
   * Nosto autocomplete — hidden by default, only revealed when
   * `data-nosto-active` is set on <predictive-search-component>. Native
   * predictive markup is hidden in the same state so the two never
   * overlap visually.
   */
  .nosto-autocomplete-dropdown {
    display: none;
  }

  predictive-search-component[data-nosto-active] .predictive-search-form__content {
    display: none;
  }

  /* Footer natif « Tout afficher » masqué en mode Nosto (le dropdown Nosto a son
     propre CTA). !important car la règle :has([data-search-results]) a une
     spécificité supérieure et le réafficherait → double bouton. */
  predictive-search-component[data-nosto-active] .predictive-search-form__footer {
    display: none !important;
  }

  predictive-search-component[data-nosto-active] .nosto-autocomplete-dropdown {
    display: block;
    width: 100%;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Hide scrollbar — match native predictive behavior */
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* Le wrapper natif est positionné (top: 100%) pour le mode fallback ;
     en mode Nosto le contenu vit dans le flux du panneau. */
  predictive-search-component[data-nosto-active] .predictive-search-form__content-wrapper {
    position: static;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  @media screen and (min-width: 1330px) {
    .predictive-search__reset-button {
      display: none;
    }

    predictive-search-component[data-nosto-active] {
      display: flex;
      flex-direction: column;
      min-height: 0;
      max-height: 100dvh;
    }

    predictive-search-component[data-nosto-active] .predictive-search-form {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }

    predictive-search-component[data-nosto-active] .predictive-search-form__content-wrapper {
      position: relative;
      inset: auto;
      flex: 1 1 auto;
      height: auto;
      min-height: 0;
      max-height: none;
      padding-block-end: var(--padding-2xl);
      overflow-y: auto;
      /* Arrivé en bout de liste, le scroll ne se propage pas à la page derrière. */
      overscroll-behavior: contain;
      scrollbar-width: none;
    }

    predictive-search-component[data-nosto-active] .predictive-search-form__content-wrapper::-webkit-scrollbar {
      display: none;
    }

    predictive-search-component[data-nosto-active] .nosto-autocomplete-dropdown {
      padding-inline: var(--padding-5xl);
      /* Pas de scroll interne au dropdown : c'est le wrapper qui scrolle. */
      max-height: none;
      overflow: visible;
    }
  }

  @media screen and (max-width: 1329px) {
    predictive-search-component[data-nosto-active] .predictive-search-form__content-wrapper {
      position: absolute;
      inset-block: 100% calc(100% - 100dvh);
      inset-inline: 0;
      display: flex;
      flex-direction: column;
      /* C'est le wrapper qui scrolle (chips + collections + CTA empilés), pas le
         dropdown : sinon, dropdown flex:1 + section collections en frère écrasent
         le dropdown à 0 et le contenu se chevauche. */
      overflow-y: auto;
      /* Arrivé en bout de liste, le scroll ne se propage pas à la page derrière. */
      overscroll-behavior: contain;
      scrollbar-width: none;
    }

    predictive-search-component[data-nosto-active] .predictive-search-form__content-wrapper::-webkit-scrollbar {
      display: none;
    }

    predictive-search-component[data-nosto-active] .nosto-autocomplete-dropdown {
      /* Hauteur = contenu (chips, ou produits en frappe). Pas de flex:1 ni de
         scroll interne : le wrapper s'en charge. */
      flex: 0 0 auto;
      min-height: 0;
      overflow: visible;
      padding-inline: 0.8rem;
    }

  }

  /* Reset du positionnement Starter (absolute) — le dropdown Preact vit
     dans le flux du panneau. */
  predictive-search-component[data-nosto-active] .nosto-autocomplete-dropdown > * {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  /* ===== Desktop ≥ 1330px : grande barre type maquette (+ ✕ à droite) ===== */
  @media screen and (min-width: 1330px) {
    .dialog-modal.search-modal__content {
      position: fixed;
    }

    .search-modal__content::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: var(--layer-base);
      background: rgb(0 0 0 / 0.25);
      backdrop-filter: blur(17.5px);
      -webkit-backdrop-filter: blur(17.5px);
      pointer-events: none;
      animation: search-panel-fade-in 420ms var(--ax-search-ease) both;
    }

    .search-modal__content .predictive-search-form__content-wrapper {
      transform: none;
      will-change: auto;
    }

    .search-modal__content predictive-search-component {
      width: auto;
      margin-inline: var(--padding-4xl);
      border-end-start-radius: 1rem;
      border-end-end-radius: 1rem;
      overflow: hidden;
    }

    .dialog-modal.search-modal__content .predictive-search-form__header {
      position: static;
      background: var(--color-background);
      border: none;
      border-radius: 0;
      gap: var(--gap-lg);
      padding: var(--ax-search-row-top, 6px) var(--padding-5xl) 0;
    }

    .predictive-search-form__header-inner {
      /* Query en heading (Gustavo) taille h4, comme la maquette. */
      --search-input-font-size: var(--font-size--h4);

      flex: 1 1 auto;
      min-width: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      /* Soulignement foncé sous la barre, contenu dans les marges (pas full
         width). Porté par l'inner (et non le header) pour rester inset.
         --color-heading ne résout pas ici → --color-foreground. */
      border-block-end: var(--style-border-width) solid var(--color-foreground);
    }

    input.search-input {
      font-family: var(--font-heading--family);
      font-size: var(--search-input-font-size);
      font-weight: var(--font-heading--weight, 700);
      padding-block: var(--padding-sm);
      padding-inline: 0;
    }

    .search-input::placeholder {
      font-family: var(--font-body--family);
      font-weight: 400;
    }

    /* Soulignement TOUJOURS foncé (maquette), y compris au focus. La règle globale
       `:has(.search-input:focus)` force --color-border (gris) avec une spécificité
       0,3,0 ; on la bat en préfixant par le composant + le même motif :has. */
    predictive-search-component[data-nosto-active] .predictive-search-form__header-inner,
    predictive-search-component[data-nosto-active] .predictive-search-form__header-inner:focus-within,
    predictive-search-component[data-nosto-active]
      .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
      border-block-end-color: var(--color-foreground) !important;
    }

    .predictive-search__icon {
      display: none;
    }

    .predictive-search-form__header::before {
      content: none;
    }

    .predictive-search__close-panel {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      padding: 0;
      border: var(--style-border-width) solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
      border-radius: 50%;
      background: transparent;
      color: var(--color-foreground);
      cursor: pointer;
      animation: ax-search-close-in 320ms 320ms var(--ease-out-quad) both;
      transition: background-color 200ms var(--ease-out-quad), border-color 200ms var(--ease-out-quad);
    }

    .predictive-search__close-panel:hover {
      background-color: color-mix(in srgb, var(--color-foreground) 8%, transparent);
      border-color: var(--color-foreground);
    }

    .predictive-search__close-panel .svg-wrapper {
      display: flex;
      width: 1rem;
      height: 1rem;
      transition: transform 260ms var(--ease-out-quad);
    }

    .predictive-search__close-panel:hover .svg-wrapper {
      transform: rotate(90deg);
    }

    .predictive-search__close-panel svg {
      width: 100%;
      height: 100%;
    }

    body:has(#search-modal dialog[open]) .header-menu__search {
      position: relative;
      z-index: var(--layer-temporary);
    }

    body:has(#search-modal dialog[open]) .header-menu__search-trigger {
      visibility: hidden;
    }
  }

  @keyframes ax-search-close-in {
    from {
      opacity: 0;
      transform: rotate(-90deg) scale(0.6);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .search-modal__content .predictive-search__close-panel {
      animation: none;
    }

    .search-modal__content .predictive-search-form__header,
    .search-modal__content .predictive-search-form__header-inner,
    .search-modal__content .predictive-search-form__content-wrapper,
    .search-modal__content .predictive-search__icon,
    .search-modal__content .predictive-search__back,
    .search-modal__collections .ax-search-collection-card,
    .nosto-autocomplete-dropdown nosto-dynamic-card {
      transition: none;
    }
  }

  /* ===== Mobile/tablette < 1330px : la rangée input remplace visuellement
     la barre .header-mobile__search du header (mêmes métriques que
     .header-mobile__search-trigger : zone padding .3rem .8rem .8rem,
     pill bordée, loupe à droite). ===== */
  @media screen and (max-width: 1329px) {
    .dialog-modal.search-modal__content .predictive-search-form__header {
      position: absolute;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      background-color: var(--color-neutral-light);
      border: none;
      padding: 0.3rem 0.8rem 0.8rem;
      gap: 0.5rem;
      transition: background-color 460ms var(--ax-search-ease);
    }

    .search-modal__content[data-search-expanded] .predictive-search-form__header {
      background-color: var(--color-background);
    }

    /* Clone EXACT de .header-mobile__search-trigger (barre native du header,
       _dev/css/header-menu.css) pour un morph sans saut visuel à l'ouverture :
       mêmes flex/gap, padding .8rem 1rem, bordure bleue, rayon 0.5rem, fond,
       police et taille de loupe (1.3rem). */
    .predictive-search-form__header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex: 1;
      min-width: 0;
      padding: 0.8rem 1rem;
      color: var(--color-foreground-muted, #999);
      font-size: var(--font-size--md, 1rem);
      font-family: inherit;
      text-align: start;
      transition: border-color 460ms var(--ax-search-ease),
        box-shadow 460ms var(--ax-search-ease), scale 160ms var(--ease-out-quad);
    }

    .search-modal__content:not([data-search-expanded]) .predictive-search-form__header-inner:active {
      scale: 0.98;
    }

    /* Pill identique au repos et au focus. Trois règles la contestent au focus :
       `.predictive-search-form__header-inner:focus-within` plus haut dans ce
       fichier (bordure grise + ombre supprimée), et predictive-search-styles qui
       rend les bordures transparentes puis repasse le rayon à
       --style-border-radius-inputs quand le dropdown Nosto est déployé. D'où les
       sélecteurs d'état répétés (spécificité égale, règle plus basse) et les
       `!important`. */
    .predictive-search-form__header-inner,
    .predictive-search-form__header-inner:focus-within,
    .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
      background-color: var(--color-white);
      /* stylelint-disable-next-line declaration-no-important */
      border: 1px solid var(--color-blue-NM) !important;
      /* stylelint-disable-next-line declaration-no-important */
      border-radius: 0.5rem !important;
      box-shadow: 0 4px 12px rgb(0 0 0 / var(--opacity-40));
    }

    .search-modal__content[data-search-expanded] .predictive-search-form__header-inner {
      /* stylelint-disable-next-line declaration-no-important */
      border-color: var(--color-border) !important;
      box-shadow: none;
    }

    /* L'input se comporte comme le libellé du trigger : pas de padding propre
       (la pill porte le padding), police héritée, fond transparent. Texte saisi
       foncé ; placeholder au même gris que le libellé du trigger. */
    input.search-input {
      flex: 1;
      min-width: 0;
      width: auto;
      padding: 0;
      font-size: var(--font-size--md, 1rem);
      font-family: inherit;
      /* `input { font: inherit }` (base.css) fait hériter la line-height du body
         (plus haute) → la pill ouverte était plus grande que le trigger, qui est
         un <button> en line-height: normal. On réaligne sur `normal`. */
      line-height: normal;
      color: var(--color-foreground);
    }

    .search-input::placeholder {
      color: var(--color-foreground-muted, #999);
      opacity: 1;
    }

    /* Loupe à droite : mêmes dimensions (1.3rem) et couleur que
       .header-mobile__search-icon. Le padding 1rem de la pill gère l'espace. */
    .predictive-search__icon {
      position: static;
      order: 2;
      flex-shrink: 0;
      width: 1.1rem;
      height: 1.1rem;
      margin: 0;
      color: var(--color-foreground);
    }

    .predictive-search__icon > svg {
      width: 1.1rem;
      height: 1.1rem;
    }

    .predictive-search__icon {
      transition: opacity 240ms var(--ease-out-quad), width 240ms var(--ease-out-quad),
        margin-inline-start 240ms var(--ease-out-quad);
    }

    .predictive-search-form__header-inner:has(.predictive-search__reset-button:not([hidden]))
      .predictive-search__icon {
      opacity: 0;
      width: 0;
      margin-inline-start: -0.75rem;
    }

    .search-modal__content .predictive-search__back {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      align-self: stretch;
      width: 0;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--color-foreground);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      overflow: hidden;
      margin-inline-end: -0.5rem;
      transition: width 320ms var(--ease-out-quad), opacity 200ms var(--ease-out-quad),
        margin-inline-end 320ms var(--ease-out-quad), translate 160ms var(--ease-out-quad),
        visibility 320ms var(--ease-out-quad);
    }

    .search-modal__content[data-search-expanded] .predictive-search__back {
      width: var(--minimum-touch-target);
      opacity: 1;
      visibility: visible;
      margin-inline-end: 0;
    }

    .search-modal__content .predictive-search__back .svg-wrapper {
      display: flex;
      flex: 0 0 auto;
      width: 1.1rem;
      height: 1.1rem;
      scale: -1 1;
    }

    .search-modal__content .predictive-search__back svg {
      width: 100%;
      height: 100%;
    }

    .search-modal__content .predictive-search__back:active {
      translate: -0.15rem 0;
    }

    .search-modal__collections .ax-search-collection-card,
    .nosto-autocomplete-dropdown nosto-dynamic-card {
      transition: opacity 320ms var(--ease-out-quad), translate 320ms var(--ease-out-quad);

      @starting-style {
        opacity: 0;
        translate: 0 0.75rem;
      }
    }

    .search-modal__collections .ax-search-collection-card:nth-child(2) {
      transition-delay: 40ms;
    }

    .search-modal__collections .ax-search-collection-card:nth-child(3) {
      transition-delay: 80ms;
    }

    .search-modal__collections .ax-search-collection-card:nth-child(4) {
      transition-delay: 120ms;
    }

    .search-modal__collections .ax-search-collection-card:nth-child(5) {
      transition-delay: 160ms;
    }

    .search-modal__collections .ax-search-collection-card:nth-child(6) {
      transition-delay: 200ms;
    }
  }

  /* Barre native du header masquée pendant que le panneau est ouvert :
     la rangée input du panneau prend exactement sa place. */
  body:has(#search-modal dialog[open]) .header-mobile__search {
    visibility: hidden;
  }

  /* ===== Ghost completion (suffixe gris dans l'input) =====
     Géométrie calée sur l'input : même police, même padding, posé
     derrière (l'input garde un fond transparent). Rempli par Preact
     (GhostCompletion) via le portal [data-nosto-ghost]. */
  .predictive-search-form__header-inner {
    position: relative;
  }

  input.search-input {
    position: relative;
    z-index: 1;
  }

  .nosto-ghost-completion {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: pre;
    pointer-events: none;
    font-size: var(--search-input-font-size, var(--font-size--md));
    font-family: inherit;
    z-index: 0;
  }

  @media screen and (min-width: 1330px) {
    .nosto-ghost-completion {
      font-family: var(--font-heading--family);
      font-weight: var(--font-heading--weight, 700);
    }
  }

  @media screen and (max-width: 1329px) {
    .nosto-ghost-completion {
      /* Suit le padding-inline de l'inner (l'input est à 0). */
      padding-inline: 1rem 0.5rem;
    }
  }

  /* Mobile : le composant et le form occupent toute la hauteur du panneau */
  @media screen and (max-width: 1329px) {
    .search-modal__content[open] predictive-search-component,
    .search-modal__content predictive-search-component .predictive-search-form {
      height: 100%;
    }
  }
  /* Collections SSR (content-perso Nosto) : visibles tant qu'aucun produit réel
     n'est affiché — donc état vide ET pendant la frappe avant l'arrivée des
     résultats (on évite le « trou » : collections disparues / produits pas encore
     là). Masquées seulement quand de vrais produits sont rendus
     (`[data-has-products]` posé par Results.tsx sur des hits réels, pas un skeleton). */
  .search-modal__collections {
    display: none;
  }

  predictive-search-component[data-nosto-active]:not(:has([data-nosto-element="autocomplete"][data-has-products]))
    .search-modal__collections {
    /* Le rythme vertical (chips→grille, grille→CTA, bas) est porté par la section
       SSR elle-même (.ax-search-collections-nosto-section). Ici : visibilité +
       alignement horizontal uniquement. */
    display: block;
  }

  @media screen and (min-width: 1330px) {
    predictive-search-component[data-nosto-active] .search-modal__collections {
      padding-inline: var(--padding-5xl);
    }
  }

  @media screen and (max-width: 1329px) {
    predictive-search-component[data-nosto-active] .search-modal__collections {
      padding-inline: 0.8rem;
    }
  }

  /* ── Skeleton des collections (réservation d'espace au 1er paint) ───────────
     La grille de collections est une SECTION fetchée à la demande : son
     (layout grille, ratio des cartes, shimmer) n'arrive qu'avec
     le morph (plusieurs secondes, attente Nosto). Le skeleton est pourtant rendu
     côté serveur DANS ce snippet → sans ces règles, ses classes seraient non
     stylées (display:block, aspect-ratio ignoré) → cartes de hauteur 0, donc
     « aucun espace dédié » si l'utilisateur ouvre vite. On porte ici le strict
     nécessaire, scopé à l'état skeleton (`[data-nosto-render-mode="skeleton"]` +
     classes `--skeleton`) pour ne jamais entrer en conflit avec le CSS de la
     section une fois morphée (perso/fallback). Valeurs ISO à la section. */
  .search-modal__collections [data-nosto-render-mode='skeleton'] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-40);
    padding-block: var(--padding-lg) var(--padding-2xl);
    width: 100%;
  }

  .search-modal__collections [data-nosto-render-mode='skeleton'] .ax-search-collections__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .search-modal__collections [data-nosto-render-mode='skeleton'] .ax-search-collections__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 1330px) {
    .search-modal__collections [data-nosto-render-mode='skeleton'] .ax-search-collections__grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @keyframes ax-search-modal-skeleton-shimmer {
    to {
      background-position-x: -150%;
    }
  }

  /* Recette skeleton PARTAGÉE — cartes collection, bouton « voir tout » et cellule
     média des cartes produit. Une seule déclaration (au lieu de 3 copies). Mêmes
     couleurs/animation que les autres sections Nosto (collection-list, shop-the-look)
     → l'ensemble reste iso. Seules les DIMENSIONS diffèrent par élément (plus bas).
     La carte produit Nosto rend son propre skeleton (cellule média + lignes) au
     connect, mais son CSS de section (SERP/PLP) n'est pas chargé ici → sans ces
     règles la cellule serait sans dimension (hauteur 0, grille qui saute). */
  .search-modal__collections .ax-search-collection-card--skeleton,
  .search-modal__collections .ax-search-collections__view-all--skeleton,
  .nosto-autocomplete-dropdown nosto-dynamic-card .nosto-skeleton__cell {
    border-radius: var(--style-border-radius-xs, 4px);
    background-color: var(--color-skeleton);
    background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 80%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position-x: 150%;
    animation: ax-search-modal-skeleton-shimmer 1.5s linear infinite;
  }

  /* Dimensions par élément. */
  .search-modal__collections .ax-search-collection-card--skeleton,
  .nosto-autocomplete-dropdown nosto-dynamic-card .nosto-skeleton__cell {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .search-modal__collections .ax-search-collections__view-all--skeleton {
    width: 12rem;
    height: 3.25rem;
  }

  /* Cartes produit : média (cellule, ci-dessus) empilé avec des lignes de texte.
     Lignes PLATES dans la MÊME base grise que la cellule (fin de l'écart de teinte
     qui faisait paraître le skeleton produit « d'une autre couleur »). */
  .nosto-autocomplete-dropdown nosto-dynamic-card .product-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .nosto-autocomplete-dropdown nosto-dynamic-card .nosto-skeleton__line {
    height: 0.9rem;
    border-radius: var(--style-border-radius-xs, 4px);
    background-color: var(--color-skeleton);
  }

  .nosto-autocomplete-dropdown nosto-dynamic-card .nosto-skeleton__line--short {
    width: 55%;
  }

  .nosto-autocomplete-dropdown nosto-dynamic-card .nosto-skeleton__line--price {
    width: 40%;
  }

  @media (prefers-reduced-motion: reduce) {
    .search-modal__collections .ax-search-collection-card--skeleton,
    .search-modal__collections .ax-search-collections__view-all--skeleton,
    .nosto-autocomplete-dropdown nosto-dynamic-card .nosto-skeleton__cell {
      animation: none;
    }
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:391) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

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

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

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

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

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

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

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:392) */
.section-wrapper {
    --section-height-offset: 0px;
  }

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

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

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

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

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

/* START_SNIPPET:skip-to-content-link (INDEX:394) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:396) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

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

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

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

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

  /* Forme de la refonte 2026 : rond au filet fin, sans aplat.
     Définie ici et non section par section — c'est ce qui garantit qu'une
     nouvelle section rendant le snippet hérite de la DA sans rien recopier. */
  .slideshow-control.slideshow-control--shape-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0 var(--padding-xs);
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    border-radius: 50%;
    background-color: transparent;
    color: rgb(var(--color-foreground-rgb));
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .slideshow-control.slideshow-control--shape-outline:hover:not([disabled]) {
    border-color: rgb(var(--color-foreground-rgb));
  }

  .slideshow-control.slideshow-control--shape-outline[disabled] {
    opacity: 1;
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
  }

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

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:397) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

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

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

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

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

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

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

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

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:398) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    button {
      --size: 0.56rem;

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

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

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

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

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

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

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

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

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

  /* Axome - pagination list (hidden by default, shown on mobile product gallery) */
  .slideshow-controls__counter-list {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: var(--gap-sm);
    align-items: baseline;
    font-variant-numeric: tabular-nums;
  }

  .slideshow-controls__counter-item {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
    --color-active: var(--color-foreground);

    width: auto;
    height: auto;
    padding: 0;
    color: var(--color);
    font-size: var(--font-size--sm);
    font-weight: 400;
    letter-spacing: 0.05em;
    transition: color var(--animation-values);
  }

  .slideshow-controls__counter-item[aria-selected='true'] {
    color: var(--color-active);
    font-weight: 700;
  }

  /* Axome - Mobile product gallery: swap compact counter for pagination list */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls .slideshow-controls__counter {
      background-color: transparent;
      backdrop-filter: none;
      padding: 0;
      border-radius: 0;
    }

    .media-gallery__mobile-controls .slideshow-controls__counter-compact {
      display: none;
    }

    .media-gallery__mobile-controls .slideshow-controls__counter-list {
      display: inline-flex;
    }
  }

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

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

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

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

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

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

  .slideshow-controls__thumbnail {
    position: relative;
  }

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

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

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

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

    svg {
      display: none;
    }
  }

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

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:401) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:403) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

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

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

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

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:tablist-nav (INDEX:411) */
.tablist-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--padding-md);
    position: relative;
    padding-block: var(--padding-xs);

    @media screen and (max-width: 749px) {
      flex-wrap: nowrap;
      flex: 1 1 0;
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;

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

      .tablist-nav__tab {
        scroll-snap-align: start;
      }
    }
  }

  .tablist-nav__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-2xs);
    flex-shrink: 0;
    padding: var(--padding-2xs) var(--padding-xs);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    border: 0;
    border-radius: var(--style-border-radius-xs);
    color: rgb(var(--color-foreground-rgb));
    font-size: var(--font-size--sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition:
      background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    }

    &[aria-selected='true'] {
      background-color: var(--color-blue-NM);
      color: var(--color-white);
    }

    &:focus-visible {
      outline: 2px solid currentcolor;
      outline-offset: 2px;
    }
  }

  .tablist-nav__icon {
    inline-size: 1.25em;
    block-size: 1.25em;
    object-fit: contain;
  }

  .tablist-nav__label {
    line-height: 1;
  }
/* END_SNIPPET:tablist-nav */

/* START_SNIPPET:text (INDEX:413) */
:root {
    --text-align-default: left;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SNIPPET:variant-main-picker (INDEX:425) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-options-format (INDEX:427) */
/* ========================================
	   Variant Options Format — cards horizontales (titre + sous-titre + badge remise)
	   Layout : 3 cards visibles, scroll horizontal au-delà.
	   ======================================== */

	.variant-option--format {
		border: 0;
		padding: 0;
		margin-block-end: var(--margin-lg);
		/* fieldset a min-width: min-content par defaut, ce qui force le slider
		   a s'etendre a la largeur cumulee de ses slides. min-width: 0 corrige. */
		min-width: 0;
		max-width: 100%;
	}

	/* Dernier fieldset du picker (produit sans option Saveur interne) : le rythme
	   sous le slider est alors donné par le gap du groupe + la compensation posée
	   sur `.ax-saveur-switch`, sinon les deux espacements s'additionnent. */
	.variant-picker__form .variant-option--format:last-of-type {
		margin-block-end: 0;
	}

	/* Header "Format" + caption optionnelle (ex : "Combien tu en consommes ?") */
	.variant-option__header--format {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--gap-2xs);
	}

	.variant-option__legend--format {
		display: block;
		font-size: var(--font-size--md);
		font-weight: 700;
		color: var(--color-foreground);
	}

	/* Bascule format (Poudre/Gélule/…) : espace sous le header. Posé ici plutôt que
	   sur le header, pour ne pas décaler les cards quand la bascule est absente
	   (elle ne sort que si le produit a des jumeaux). */
	.variant-option--format .product-matching {
		margin-block-start: var(--margin-sm);
	}

	.variant-option__caption {
		margin: 0;
		font-size: var(--font-size--sm);
		font-weight: 400;
		color: var(--color-neutral-dark);
	}

	variant-options-format-slider {
		display: block;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	/* Viewport relatif pour positionner le fade + la fleche par dessus le slider */
	.variant-options-format__viewport {
		position: relative;
		width: 100%;
		min-width: 0;
	}

	/* Fade gradient cote droit — masque visuel "il y a encore du contenu".
	   Cache automatiquement quand le slider est en fin (classe is-end). */
	.variant-options-format__viewport::after {
		content: '';
		position: absolute;
		inset-block: 0;
		right: -1px;
		width: 4rem;
		background: linear-gradient(to right, transparent, var(--color-background));
		pointer-events: none;
		opacity: 1;
		transition: opacity var(--animation-speed) var(--animation-easing);
		z-index: 2;
	}

	.variant-options-format__viewport.is-end::after {
		opacity: 0;
	}

	/* Fade gradient cote gauche — visible quand on a deja scrolle */
	.variant-options-format__viewport::before {
		content: '';
		position: absolute;
		inset-block: 0;
		left: -1px;
		width: 4rem;
		background: linear-gradient(to left, transparent, var(--color-background));
		pointer-events: none;
		opacity: 0;
		transition: opacity var(--animation-speed) var(--animation-easing);
		z-index: 2;
	}

	.variant-options-format__viewport.is-start-scrolled::before {
		opacity: 1;
	}

	.variant-options-format__nav {
		/* La largeur ne doit pas depasser le decalage exterieur, sinon le bouton passe
		   au-dessus du bord des cards et avale le clic de selection du format. */
		--nav-offset: 15px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--nav-offset);
		height: 100%;
		padding: 0;
		border: 0;
		background-color: transparent;
		color: var(--color-foreground);
		cursor: pointer;
		opacity: 1;
		transition: opacity var(--animation-speed) var(--animation-easing);
		z-index: 3;
	}

	.variant-options-format__nav--prev {
		inset-inline-start: var(--padding-2xs);
		left: calc(-1 * var(--nav-offset));
	}

	.variant-options-format__nav--next {
		inset-inline-end: var(--padding-2xs);
		right: calc(-1 * var(--nav-offset));
	}

	.variant-options-format__nav svg {
		width: .8rem;
		height: .8rem;
	}

	.variant-options-format__nav[hidden] {
		display: none;
	}

	.variant-options-format__nav:focus-visible {
		outline: 2px solid var(--color-foreground);
		outline-offset: 2px;
	}

	/* --- Slider container ---
	   Avant l'init Swiper : flex en row pour éviter le FOUC.
	   Après init, swiper-container prend la main via shadow DOM. */
	.variant-options-format__list {
		display: block;
		width: 100%;
		/* overflow-x: clip permet de combiner avec overflow-y: visible (contrairement
		   a `hidden` qui force l'autre axe en `auto`). On clippe horizontalement les
		   slides du carousel mais on laisse le badge "-XX%" depasser au-dessus. */
		overflow-x: clip;
		overflow-y: visible;
		/* Marge du haut pour reserver l'espace du badge (moitie qui depasse) */
		padding-block-start: 0.75rem;
	}

	/* Le shadow DOM de swiper-container clippe par defaut — on force overflow visible
	   sur la partie .swiper (container interne) pour laisser le badge depasser. */
	.variant-options-format__list::part(container) {
		overflow: visible;
	}

	.variant-options-format__list[init='false'] {
		display: flex;
		gap: var(--gap-xs);
	}

	.variant-options-format__list[init='false'] swiper-slide {
		flex: 0 0 auto;
	}

	.variant-options-format__slide {
		width: 135px;
		height: auto;
	}

	/* --- Grid mode (quick-add modal) --- */
	.variant-options-format--grid {
		width: 100%;
	}

	.variant-options-format__list--grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-xs);
	}

	.variant-options-format__slide--grid {
		width: 100%;
		height: auto;
		min-width: 0;
	}

	/* --- Card (label) ---
	   Le <label> wrap le radio. Le radio est positionné en absolute + opacity 0
	   pour rester accessible (focus, screen readers) tout en étant invisible
	   et en couvrant toute la card pour qu'un clic n'importe où la sélectionne.
	*/
	.variant-options-format__card {
		/* Référence de largeur (100cqi = largeur interne de la card) pour l'unité
		   auto-ajustée du titre. */
		container-type: inline-size;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start!important;
		gap: var(--gap-3xs);
		width: 100%;
		height: 100%;
		min-height: 5rem;
		padding: var(--padding-md) var(--padding-sm);
		border: var(--options-border-width, 2px) solid var(--color-white);
		border-radius: var(--style-border-radius-xs);
		background-color: var(--color-neutral-light);
		cursor: pointer;
		scroll-snap-align: start;
		text-align: center;
		/* overflow: hidden; */
		transition:
			border-color var(--animation-speed) var(--animation-easing),
			background-color var(--animation-speed) var(--animation-easing);
	}

	/* Radio caché mais cliquable et focusable (couvre toute la card).
	   On surcharge le style global `input[type="radio"]` du thème. */
	.variant-options-format__input {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		appearance: none;
		opacity: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		z-index: 1;
	}

	.variant-options-format__card:hover {
		border-color: var(--color-neutral-dark);
	}

	/* État sélectionné : bordure foreground épaisse */
	.variant-options-format__card:has(.variant-options-format__input:checked),
	.variant-options-format__card--selected {
		border-color: var(--color-foreground);
	}

	/* Focus visible (clavier) — on outline la card via :focus-visible du radio */
	.variant-options-format__card:has(.variant-options-format__input:focus-visible) {
		outline: 2px solid var(--color-foreground);
		outline-offset: 2px;
	}

	/* --- Titre principal (ex : "1.00 kg") ---
	   Deux niveaux de typographie :
	     - le nombre (.title-number) en gros et gras
	     - l'unité (.title-unit) plus petite et légère
	   Les deux côte-à-côte avec un petit espace, ligne unique. */
	.variant-options-format__title {
		--format-number-size: 1.75rem;
		--format-unit-size-max: 1.125rem;
		/* Taille d'unité qui tient sur la ligne, à droite du nombre : on retire la
		   largeur estimée du nombre (nb de caractères x avance moyenne) de la largeur
		   de la card, et on répartit le reste sur les caractères de l'unité. Les
		   avances sont des estimations basses (Gustavo bold / DM Sans regular) — le
		   `min()` ci-dessous garantit qu'on ne dépasse jamais la taille nominale. */
		--format-unit-fit: calc(
			(100cqi - var(--format-number-ch, 3) * 0.58 * var(--format-number-size))
			/ var(--format-unit-ch, 2) / 0.53
		);
		display: inline-flex;
		flex-wrap: nowrap;
		align-items: baseline;
		color: var(--color-black);
		line-height: 1;
	}

	.variant-options-format__title-number {
		font-family: var(--font-heading--family);
		font-size: var(--format-number-size);
		font-weight: 700;
		line-height: 1;
	}

	.variant-options-format__title-unit {
		font-size: min(var(--format-unit-size-max), var(--format-unit-fit));
		font-weight: 400;
		line-height: 1;
		white-space: nowrap;
	}

	.variant-options-format__subtitle {
		font-size: 0.75rem;
		font-weight: 400;
		line-height: 1.3;
		color: var(--color-black);
	}

	/* --- Badge remise — dans le flux de la card, sous le subtitle (bleu Nutrimuscle Club) --- */
	.variant-options-format__badge {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(-25%, -50%);
		padding: var(--padding-3xs) var(--padding-xs);
		background-color: var(--color-blue-light);
		color: var(--color-white);
		font-size: var(--font-size--xs);
		font-weight: 700;
		line-height: 1.4;
	}

	.quick-add-modal .variant-options-format__list--grid{
    	grid-template-columns: repeat(3, minmax(0, 1fr));
    	gap: var(--gap-sm);
	}

	.quick-add-modal .variant-options-format__badge {
    	padding: 0rem 0.3rem;
	}

	/* Sous-titre format à 12px dans la quick-add (maquette) — PDP inchangée */
	.quick-add-modal .variant-options-format__subtitle {
		font-size: var(--font-size--xs);
		text-align: left;
	}

	/* Titre des cards format dans la quick-add (maquette) — font heading.
	   Le conteneur pilote la taille (number = 1em), l'unité reste proportionnelle. */
	.quick-add-modal .variant-options-format__title {
		font-size: 1.375rem; /* 22px desktop */
		--format-number-size: 1.375rem;
	}

	.quick-add-modal .variant-options-format__title-number {
		font-family: var(--font-heading--family);
		font-size: 1em; /* = taille du conteneur */
	}

	/* Mobile : conteneur 20px → number 20px, unit ~14px (proportionnel) */
	@media screen and (max-width: 749px) {
		.quick-add-modal .variant-options-format__title {
			font-size: 1.25rem; /* 20px */
			--format-number-size: 1.25rem;
		}
	}

	/* --- État indisponible : opacity générale + pastille "Revient vite" --- */
	.variant-options-format__card--unavailable {
		background-color: var(--color-neutral-light);
	}

	.variant-options-format__card--unavailable .variant-options-format__title,
	.variant-options-format__card--unavailable .variant-options-format__subtitle {
		color: var(--color-neutral);
	}

	.variant-options-format__oos {
		display: inline-block;
		margin-block-start: var(--margin-3xs);
		padding: var(--padding-3xs) var(--padding-2xs);
		background-color: var(--color-lowstock);
		color: var(--color-white);
		font-size: var(--font-size--2xs);
		line-height: var(--font-size--2xs);
		font-weight: 600;
	}
/* END_SNIPPET:variant-options-format */

/* START_SNIPPET:variant-swatches (INDEX:429) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:430) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:431) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */

/* START_SNIPPET:wishlist-button (INDEX:432) */
.wishlist-button {
    --wishlist-button-size: 1.25rem;
    --wishlist-button-color: var(--color-foreground);
    --wishlist-button-color-active: var(--color-blue-NM, var(--color-primary, currentColor));
    display: inline-flex;
  }

  /* Hidden until the Advanced Wishlist app upgrades the element (removes [loading]). */
  .wishlist-button[loading] {
    display: none;
  }

  .wishlist-button__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wishlist-button-color);
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      color var(--animation-speed, 0.2s) var(--animation-easing, ease),
      transform var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  @media (hover: hover) {
    .wishlist-button__btn:hover {
      transform: scale(1.08);
    }
  }

  .wishlist-button__btn:active {
    transform: scale(0.94);
  }

  .wishlist-button__btn[aria-busy='true'] {
    opacity: var(--opacity-50, 0.5);
    pointer-events: none;
  }

  .wishlist-button__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: var(--style-border-radius-xs);
  }

  .wishlist-button__face {
    display: inline-flex;
  }

  .wishlist-button__icon {
    display: block;
    width: var(--wishlist-button-size);
    height: var(--wishlist-button-size);
    fill: currentColor;
  }

  /* Outline (not in wishlist) by default, filled (in wishlist) when aria-checked. */
  .wishlist-button .ooo-wl-wishlist-button-remove {
    display: none;
  }

  .wishlist-button__btn[aria-checked='true'] {
    color: var(--wishlist-button-color-active);
  }

  .wishlist-button__btn[aria-checked='true'] .ooo-wl-wishlist-button-add {
    display: none;
  }

  .wishlist-button__btn[aria-checked='true'] .ooo-wl-wishlist-button-remove {
    display: inline-flex;
  }

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

    .wishlist-button__btn:hover,
    .wishlist-button__btn:active {
      transform: none;
    }
  }
/* END_SNIPPET:wishlist-button */