/** Shopify CDN: Minification failed

Line 14:3 Unexpected "="

**/
/* ============================================================
   CUSTOM CSS — N'GO SHOES
   Thème : Wellina (Custom from Wellina by Komunic)

   Toutes les personnalisations CSS vont ici.
   Chaque bloc doit être encadré par :
     /* CUSTOM:start — description */
     /* CUSTOM:end */
   ============================================================ */

/* CUSTOM:start — Fonts N'GO (Involve uniquement ; Modric désactivé) */
/* Modric n'est plus utilisé (charte : Involve uniquement). On conserve le nom de police
   'Modric' en ALIAS vers Involve, pour qu'un éventuel réglage encore réglé sur "Modric"
   (sections custom) rende quand même de l'Involve plutôt qu'une police de secours. */
@font-face {
  font-family: 'Modric';
  src: url('Involve-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Involve';
  src: url('Involve-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Involve';
  src: url('Involve-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Involve';
  src: url('Involve-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Involve';
  src: url('Involve-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Override des fonts du thème */
  --font-heading--family: 'Involve', sans-serif;
  --font-heading--style: normal;
  --font-heading--weight: 400;

  --font-highlight--family: 'Involve', sans-serif;
  --font-highlight--style: normal;
  --font-highlight--weight: 400;

  --font-body--family: 'Involve', sans-serif;
  --font-body--style: normal;
  --font-body--weight: 400;
}

/* Titres : Involve, majuscules, letter-spacing élargi (charte) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Involve', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Corps de texte : Involve Regular */
body,
p,
li,
td,
input,
textarea,
select {
  font-family: 'Involve', sans-serif;
  font-weight: 400;
}

/* Boutons : Involve, majuscules (charte CTA) */
button,
.btn,
a.btn,
.button,
[class*="button"] {
  font-family: 'Involve', sans-serif;
  text-transform: uppercase;
}
/* CUSTOM:end */

/* CUSTOM:start — Product cards hauteur uniforme (swiper + grille) */
.featured-collection .swiper-wrapper,
.carousel-slider .swiper-wrapper {
  align-items: stretch !important;
}

.featured-collection .swiper-slide,
.carousel-slider .swiper-slide,
.featured-collection .f-column,
.carousel-slider .f-column {
  height: auto !important;
  display: flex;
}

.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card__wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card__media {
  flex-shrink: 0;
  position: relative; /* ancre l'overlay des swatches */
}

.product-card__content {
  flex: 1;
  display: flex;
  align-items: flex-start;
  margin-top: 8px; /* CUSTOM — espace image / contenu */
}

.product-grid.layout-panel-grid {
  align-items: stretch !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Press thumbnails hauteur uniforme */
.press-slide__thumbnail .media {
  --ratio: 0.8 !important;
  --ratio-mobile: 0.8 !important;
}

.press-slide__thumbnail .media img {
  object-fit: cover;
}
/* CUSTOM:end */

/* CUSTOM:start — Header sans border-radius */
.header,
.header__top,
.header__background,
.header__background-inner {
  border-radius: 0 !important;
}

.menu__item::before {
  border-radius: 0 !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Menu header en Involve Semi-Bold (charte) */
.header__menu .menu__item {
  font-family: 'Involve', sans-serif;
  font-weight: 600;
  letter-spacing: 2.3px;
}
/* CUSTOM:end */

/* CUSTOM:start — Pictos header (droite) : jeu unifié (base Lucide, viewBox 24)
   Tous les pictos du cluster de droite partagent désormais la MÊME base : viewBox 24,
   bouts arrondis, épaisseur pilotée par --icon-stroke-width. Plus de calcul par icône :
   à taille égale (20px) et viewBox égal (24), le trait est identique par construction.
   Fichiers : icon-ngo-search/store/account/cart.svg + cœur (header) + cloche (notifications-bell). */
.header__icons--right .icon,
.header__icons--right .ngo-notif__icon,
.header__icons--right .wishlist-link__icon {
  width: 20px;
  height: 20px;
  --icon-stroke-width: 1.6; /* vb24 @20px → ~1,33px, identique pour tous */
}
/* Pictos client resserrés (loupe, magasins, cloche, cœur, compte, panier).
   On réduit la boîte cliquable (40px → 28px) → écart ~8px au lieu de 20px.
   N'affecte PAS les sélecteurs devise/langue (.header__localization, exclus). */
.header__icons--right .header__buttons > :is(a, button, .header__icon),
.header__icons--right .header__buttons > notifications-bell.ngo-notif {
  width: 2.8rem;
}
/* CUSTOM:end */

/* CUSTOM:start — Diapositive vidéo : diapo entière cliquable si bouton (stretched-link)
   Le lien .ngo-slide-cover (injecté par custom.js) recouvre la diapo sous le contenu.
   Le contenu passe les clics au lien de recouvrement (pointer-events:none), sauf ses
   éléments interactifs réels (bouton, liens) qui restent cliquables individuellement. */
.slide.ngo-video-slide {
  position: relative;
}
.ngo-video-slide .ngo-slide-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
.ngo-video-slide .slide__media {
  z-index: 0;
}
.ngo-video-slide .slide__content {
  z-index: 2;
  pointer-events: none; /* laisse passer le clic vers le lien de recouvrement */
}
.ngo-video-slide .slide__content a,
.ngo-video-slide .slide__content button,
.ngo-video-slide .slide__content [role="button"] {
  pointer-events: auto; /* le bouton et les liens réels restent cliquables */
}
/* CUSTOM:end */

/* CUSTOM:start — Cart drawer : clic card = ajout panier, sans picto */
.cart-drawer__recommendation-product .product-card__action {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

.cart-drawer__recommendation-product .product-card {
  cursor: pointer;
}

.cart-drawer__recommendation-product .product-card__link {
  pointer-events: none;
}

.cart-drawer__recommendation-products .swiper-wrapper {
  align-items: stretch !important;
}

.cart-drawer__recommendation-product.swiper-slide {
  height: auto !important;
  display: flex;
}

.cart-drawer__recommendation-product .product-card {
  height: 100%;
  width: 100%;
}

.cart-drawer__recommendation-product .product-card__wrapper {
  height: 100%;
}
/* CUSTOM:end */

/* CUSTOM:start — Swatches couleur liées (page produit) */
.color-swatches-linked {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.color-swatch-linked {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  /* Empêche le thème (effet soulignement des liens) de redimensionner/répéter le gradient */
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center !important;
}

.color-swatch-linked:hover {
  transform: scale(1.15);
}

.color-swatch-linked--active {
  /* Anneau autour de la pastille (ne recouvre pas le gradient) */
  border-color: transparent;
  outline: 2px solid var(--color-foreground, #1B1D27);
  outline-offset: 2px;
}
/* CUSTOM:end */

/* CUSTOM:start — Vignettes image des coloris (page produit) */
.color-swatches-linked--images {
  gap: var(--swatch-gap, 8px);
}

.color-swatch-linked--image {
  width: var(--swatch-size, 84px);
  height: var(--swatch-size, 84px);
  border-radius: 0; /* charte N'GO : pas d'arrondi */
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  box-shadow: none;
  overflow: hidden;
  padding: 0;
  background: none !important;
}

.color-swatch-linked--image.color-swatch-linked--active {
  border-color: transparent;
  outline: 2px solid var(--color-foreground, #1B1D27);
  outline-offset: 2px;
}

/* Pas d'animation au survol sur les swatches image (page produit) */
.color-swatch-linked--image:hover {
  transform: none;
}

.color-swatch-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* CUSTOM:end */

/* CUSTOM:start — Swatches couleur catalogue (rectangles) */
.color-swatches-linked--catalog {
  gap: 4px;
  justify-content: flex-start; /* toujours collé à gauche */
  flex-wrap: nowrap;
}

.color-swatches-linked--catalog .color-swatch-linked {
  flex-shrink: 0; /* pas d'écrasement quand ça scrolle */
}

/* Coloris au-delà de 4 : masqués jusqu'au clic sur "+X" */
.color-swatch-linked--extra {
  display: none;
}

/* Déployé : on montre tout + scroll horizontal si besoin */
.color-swatches-linked--catalog.is-expanded {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none; /* scroll sans barre visible (plus propre sur la photo) */
  -ms-overflow-style: none;
}

.color-swatches-linked--catalog.is-expanded::-webkit-scrollbar {
  display: none;
}

.color-swatches-linked--catalog.is-expanded .color-swatch-linked--extra {
  display: block;
}

/* Overlay : swatches collés en bas-gauche de l'image */
.color-swatches-overlay {
  position: absolute;
  left: 0;
  right: 0; /* pleine largeur : borne le scroll horizontal */
  bottom: 0;
  z-index: 2;
  pointer-events: none; /* ne bloque pas le clic sur l'image */
}

.color-swatches-overlay .color-swatches-linked--catalog {
  margin: 0;
  pointer-events: auto; /* mais les swatches restent cliquables */
}

/* Aperçu : image du coloris survolé, par-dessus la photo de la carte */
.color-swatch-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1; /* au-dessus des images de la carte, sous les swatches (z-index 2) */
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.color-swatch-preview.is-visible {
  opacity: 1;
}

.color-swatches-linked--catalog .color-swatch-linked {
  width: 26px;
  height: 7px;
  border-radius: 0; /* charte N'GO : pas d'arrondi */
  border-width: 1px;
}

/* Coloris en mini-vignettes photo (carrés, charte N'GO) */
.color-swatches-linked--catalog {
  gap: 6px;
}
.color-swatches-linked--catalog .color-swatch-linked--photo {
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: none;
  overflow: hidden;
  padding: 0;
  background: #fff;
}
.color-swatch-linked--photo:hover {
  transform: scale(1.08);
}
.color-swatch-linked--photo .color-swatch-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Coloris placés sous l'image (test) */
.color-swatches-below {
  margin-top: 8px;
  display: none; /* masqué pour le moment — retirer cette ligne pour réactiver */
}
.color-swatches-below .color-swatches-linked--catalog {
  flex-wrap: nowrap;
}

.color-swatch-more {
  font-size: 11px;
  color: var(--color-foreground, #1B1D27);
  opacity: 0.6;
  line-height: 1;
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  flex-shrink: 0;
}
/* CUSTOM:end */

/* CUSTOM:start — Tailles au survol de la carte produit */
.size-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* collé en bas de l'image */
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  /* flou derrière les tailles */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* apparition au survol : petit fade */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none; /* la carte reste cliquable */
}

.product-card:hover .size-overlay,
.product-card:focus-within .size-overlay {
  opacity: 1;
  transform: translateY(0);
}

.size-chip {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-foreground, #1B1D27);
}

.size-chip--unavailable {
  opacity: 0.4;
}

.size-chip--unavailable .size-chip__text {
  text-decoration: line-through;
}

/* Pas de survol sur tactile : afficher en permanence */
@media (hover: none) {
  .size-overlay {
    opacity: 1;
    transform: none;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Produits complémentaires (add-ons à cocher) */
.product-addons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.product-addons__heading {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-foreground, #1B1D27);
}

.product-addons__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-addon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.product-addon__media {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #fff;
}

.product-addon__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-addon__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.product-addon__title {
  font-size: 14px;
  color: var(--color-foreground, #1B1D27);
}

.product-addon__variant {
  font-size: 12px;
  opacity: 0.7;
}

.product-addon__price {
  font-size: 13px;
  color: var(--color-foreground, #1B1D27);
}

.product-addon__soldout {
  font-size: 12px;
  opacity: 0.6;
}

.product-addon--unavailable {
  opacity: 0.55;
  cursor: default;
}

/* Toggle switch */
.product-addon__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.product-addon__switch {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #cfcfcf;
  transition: background 0.2s;
}

.product-addon__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.product-addon__toggle:checked ~ .product-addon__switch {
  background: #1B1D27; /* gris foncé de marque (pas le triplet RGB --color-foreground) */
}

.product-addon__toggle:checked ~ .product-addon__switch::after {
  transform: translateX(20px);
}

.product-addon__toggle:focus-visible ~ .product-addon__switch {
  outline: 2px solid var(--color-foreground, #1B1D27);
  outline-offset: 2px;
}
/* CUSTOM:end */

/* CUSTOM:start — Pont de survol méga-menu / dropdown
   Évite que le menu se referme dans le "trou" entre l'onglet et le panneau
   quand on descend le curseur. Un pont transparent sous l'onglet garde le
   survol actif pendant la traversée. Ajuster --menu-hover-bridge si besoin. */
.header__menu [is="details-mega"][open] > summary .menu__item::after,
.header__menu [is="details-dropdown"][level="top"][open] > summary .menu__item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--menu-hover-bridge, 2.4rem);
  background: transparent;
  z-index: 1;
}
/* CUSTOM:end */

/* CUSTOM:start — Sélecteurs devise + langue séparés dans le header (desktop) */
.header__localization {
  height: var(--header-icon-size); /* aligne verticalement avec les icônes */
  margin-inline-end: 1.4rem;       /* espace entre les deux + avant la recherche */
}
/* Style commun aux deux sélecteurs (texte) */
.header__localization .dropdown-localization__button,
.header__localization .localization-form__select {
  height: 100%;
  padding: 0;
  font-family: 'Involve', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: rgb(var(--color-foreground));
  white-space: nowrap;
  cursor: pointer;
}
.header__localization .btn__text {
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  gap: 0.5rem;
}
/* Devise : drapeau rond + code (EUR…) */
.header__localization--currency .icon-flag {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.header__localization .dropdown-localization__button-arrow {
  margin-inline-start: 0.3rem;
}
/* Langue : <select> natif épuré, aligné EXACTEMENT comme la devise */
.header__localization--language localization-form-component,
.header__localization--language .localization-form,
.header__localization--language .language-selector__wrapper,
.header__localization--language .language-selector,
.header__localization--language .select {
  height: 100%;
  display: flex;
  align-items: center;
  width: auto; /* annule le w-full qui décentrait */
}
.header__localization--language .localization-form__select {
  border: 0;
  background: transparent;
  height: auto;
  line-height: 1;
  font-size: 1.3rem;          /* même taille que « EUR » */
  letter-spacing: 0.04em;
  font-family: 'Involve', sans-serif;
  padding-block: 0;
  padding-inline: 0 1.8rem;   /* place pour le chevron */
}
/* Chevron : même couleur/place que la devise */
.header__localization--language .select::after {
  inset-inline-end: 0;
  width: 1rem;
}
/* CUSTOM:end */

/* CUSTOM:start — Retire le fond (pilule) au survol des items du menu */
@media (hover: hover) {
  .menu__item:hover::before {
    opacity: 0;
  }
  /* on garde la couleur du texte d'origine puisqu'il n'y a plus de fond */
  .menu__item:hover {
    color: rgb(var(--color-foreground));
  }
}
/* CUSTOM:end */

/* CUSTOM:start — sous-menu liens en haut à droite du header */
.header__topbar {
  width: 100%;
  position: relative;
  z-index: 2;
  pointer-events: auto; /* le header sticky met pointer-events:none ; on le réactive ici */
}
.header__topmenu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding-top: 12px;
  padding-bottom: 4px;
}
/* Padding latéral aligné sur le header (top + topmenu) — desktop/tablette uniquement */
@media screen and (min-width: 768px) {
  .header__top,
  .header__topmenu {
    padding-left: 25px !important;
    padding-right: 26px !important;
    max-width: none !important;
  }
}
.header__topmenu-link {
  font-family: 'Involve', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  color: currentColor;
  opacity: 0.8;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.header__topmenu-link:hover,
.header__topmenu-link.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media screen and (max-width: 989px) {
  .header__topmenu { gap: 12px; margin-right: 10px; }
  .header__topmenu-link { font-size: 11px; }
}
/* Liens secondaires (Blog, Points de vente) dans le drawer mobile */
.menu-drawer__menu--secondary {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.menu-drawer__secondary-link {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding-block: 8px;
  opacity: 0.85;
}
.menu-drawer__secondary-link:hover { opacity: 1; }
/* CUSTOM:end */

/* CUSTOM:start — Sous-menus header : fondu (fade) au lieu du slide-down
   Le thème anime en JS (Web Animations API) un transform: translateY(-100% → 0) sur le
   conteneur du dropdown et du mega-menu (= le slide-down). Une déclaration author !important
   bat une animation WAAPI dans la cascade CSS : on annule donc le translateY, et on fait
   apparaître le panneau en simple fondu. */
.dropdown__container,
.mega-menu__container {
  transform: none !important;
}
.dropdown,
.mega-menu {
  opacity: 0;
}
/* Dropdown : apparition immédiate (aucune animation) */
.dropdown {
  transition: none;
}
/* Mega-menu : fondu court → effet de fondu enchaîné quand on passe d'un mega à l'autre
   (le panneau sortant s'efface en JS pendant que l'entrant apparaît ici → la « fenêtre » semble rester). */
.mega-menu {
  transition: opacity 0.1s var(--animation-easing, ease);
}
.dropdown[open],
.mega-menu[open] {
  opacity: 1;
}
/* Le mega-menu avait en plus un fondu interne décalé (0.25s) : on le neutralise,
   le panneau entier fait déjà le fade d'un bloc. */
.mega-menu__wrapper {
  opacity: 1 !important;
  transition: none !important;
  transition-delay: 0s !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Style global des boutons : texte souligné minimaliste (cf. maquette "DÉCOUVRIR")
   Tous les boutons .btn deviennent : fond transparent, sans cadre, texte (MAJUSCULES via le bloc
   typographie plus haut) avec un fin trait souligné. La couleur s'adapte au contexte (currentColor),
   donc le bouton reste lisible aussi bien sur fond clair que sur image/fond sombre.
   Exclusion : les boutons-icônes ronds (panier, recherche, lecture vidéo, +/-) gardent leur forme. */
.btn:not(.btn--icon-only) {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  color: inherit !important;
  height: auto !important;
  min-height: 0 !important;
  width: var(--button-width, auto);
  padding: 0.2rem 0 0.7rem !important; /* pas de padding latéral : le trait épouse la largeur du texte */
  overflow: visible !important;
  transition: none !important; /* pas d'animation au hover */
}

/* Neutralise le pseudo-élément de remplissage natif (fond noir qui glisse au survol).
   On cible [class*="btn--"], le sélecteur exact du thème, pour couvrir aussi les boutons
   custom dont la classe contient "btn--" (ex. .hero-fs__btn--primary). */
[class*="btn--"]:not(.btn--icon-only)::before {
  display: none !important;
  width: 0 !important;
}

/* Boutons texte+icône (.btn--icon-solid) : on masque l'icône circulaire animée
   et son survol, pour garder un simple texte souligné comme les autres boutons. */
.btn--icon-solid .btn__icon,
.btn--icon-solid-desktop .btn__icon {
  display: none !important;
}

/* Boutons pleine largeur : le trait s'étend sur toute la largeur (cf. "AJOUTER AU PANIER") */
.btn--full:not(.btn--icon-only),
.btn--full-mobile:not(.btn--icon-only) {
  justify-content: center;
}

/* Hover : aucun changement d'état (pas d'animation, pas d'atténuation) */
.btn:not(.btn--icon-only):hover {
  opacity: 1 !important;
  background-color: transparent !important;
  border-bottom-color: currentColor !important;
  color: inherit !important; /* bloque le changement de couleur de texte natif (.btn--primary:hover) */
}

/* La pastille de chargement (ajout au panier) reste lisible */
.btn .loading-spinner { color: inherit; }

/* Bouton de paiement dynamique "Acheter maintenant" (non brandé) → même style texte souligné.
   Le thème applique background-color en !important sur `button.…--unbranded` + un ::before qui se
   remplit au survol. On préfixe `body` pour battre sa spécificité, et on neutralise le ::before.
   On ne touche PAS les boutons brandés (Shop Pay, PayPal…) qui ont leurs logos/règles propres. */
body button.shopify-payment-button__button--unbranded {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  border: 1px solid currentColor !important; /* bordure complète (4 côtés) */
  border-radius: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 1rem 2.4rem !important; /* padding de boîte (cadre complet) */
  box-shadow: none !important;
  text-transform: uppercase !important;
  transition: none !important;
}
body button.shopify-payment-button__button--unbranded::before {
  display: none !important;
  width: 0 !important;
}
body button.shopify-payment-button__button--unbranded:not([disabled]):hover,
body button.shopify-payment-button__button--unbranded:not([disabled]):focus {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  border: 1px solid currentColor !important;
  opacity: 1 !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Mega-menu dédié N'GO (layout colonnes + bannières) */
.mega-menu--ngo .mm-ngo__wrapper {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

/* Colonnes de liens (gauche) */
.mega-menu--ngo .mm-ngo__columns {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-col-gap, 30px);
  padding-block: var(--dropdown-offset-top, 2.6rem) var(--dropdown-offset-bottom, 3.6rem);
}
.mega-menu--ngo .mm-ngo__column {
  min-width: 14rem;
}
.mega-menu--ngo .mm-ngo__col-title {
  margin-bottom: 1rem;
}
.mega-menu--ngo .mm-ngo__list > li {
  margin-bottom: 0.4rem;
}

/* Zone bannières (droite) */
.mega-menu--ngo .mm-ngo__banners {
  flex: 0 0 var(--mm-banners-width, 40%);
  display: grid;
  grid-template-columns: repeat(var(--mm-banners-cols, 2), 1fr);
  gap: 1.2rem;
  padding-block: var(--dropdown-offset-top, 2.6rem) var(--dropdown-offset-bottom, 3.6rem);
}
/* Mode « bannières seules » : le réglage « Espacement des colonnes » (--mm-col-gap)
   pilote l'écart entre les bannières (sinon il n'aurait aucun effet, faute de colonnes). */
.mega-menu--ngo-banners-only .mm-ngo__banners {
  gap: var(--mm-col-gap, 1.2rem);
}
.mega-menu--ngo-right .mm-ngo__banners {
  margin-inline-start: auto;
}
/* Mode "bannières seules" (ex. La Marque) : rangée pleine largeur, sans colonnes de liens */
.mega-menu--ngo-banners-only .mm-ngo__banners {
  flex: 1 1 100%;
  width: 100%;
  margin-inline-start: 0;
}

/* Carte bannière */
.mm-ngo-banner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0; /* charte N'GO : coins carrés */
}
.mm-ngo-banner__media {
  display: block;
  position: relative;
}
.mm-ngo-banner__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--mm-ratio, 1);
  object-fit: cover;
}
.mm-ngo-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / var(--mm-overlay, 0));
  pointer-events: none;
}
.mm-ngo-banner__content {
  position: absolute;
  inset-inline: 1.4rem;
  bottom: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: #fff;
  z-index: 1;
}
.mm-ngo-banner--bc .mm-ngo-banner__content {
  align-items: center;
  text-align: center;
}
.mm-ngo-banner--c .mm-ngo-banner__content {
  inset: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.mm-ngo-banner__title {
  font-family: 'Involve', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--mm-title-size, 22px);
  line-height: 1.1;
}
.mm-ngo-banner__subtitle {
  font-family: 'Involve', sans-serif;
  font-size: 0.8em;
  opacity: 0.9;
}
@media (max-width: 1024px) {
  .mm-ngo-banner__title {
    font-size: var(--mm-title-size-mobile, 18px);
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Cloche de notifications N'GO */
notifications-bell.ngo-notif {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* même boîte que les icônes natives → écart horizontal égal entre recherche/cloche/compte/panier */
  width: var(--header-icon-size);
  height: var(--header-icon-size);
}
.ngo-notif__bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: currentColor;
  width: 100%;
  height: 100%;
  overflow: visible !important; /* annule le overflow:hidden de .button-unstyled qui rognait le badge */
}
/* Sécurité : pas de rognage du badge sur les conteneurs proches */
notifications-bell.ngo-notif,
notifications-bell.ngo-notif .ngo-notif__count {
  overflow: visible;
}
.ngo-notif__count {
  position: absolute;
  top: -7px;
  inset-inline-end: -8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  background: #1b1d27;
  color: #fff;
  font-family: 'Involve', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px; /* pastille ronde */
  border: 2px solid #fff; /* liseré : détache le badge de l'icône → chiffre lisible */
  text-transform: none;
  letter-spacing: normal;
  pointer-events: none;
}
.ngo-notif__count[hidden] {
  display: none;
}

/* Panneau */
.ngo-notif__panel {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  width: 360px;
  max-width: 92vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #1b1d27;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border-radius: 0; /* charte : coins carrés */
  z-index: 60;
  overflow: hidden;
}
.ngo-notif__panel[hidden] {
  display: none;
}
.ngo-notif__view {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ngo-notif__view[hidden] {
  display: none;
}
.ngo-notif__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.ngo-notif__title {
  font-family: 'Involve', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
}
.ngo-notif__close,
.ngo-notif__back {
  display: inline-flex;
  cursor: pointer;
  color: currentColor;
}

/* Liste de cartes */
.ngo-notif__cards {
  margin: 0;
  padding: 0;
  overflow-y: auto;
}
.ngo-notif__card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: inherit;
  cursor: pointer;
}
.ngo-notif__card:hover {
  background: rgba(0, 0, 0, 0.03);
}
.ngo-notif__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
}
.ngo-notif__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ngo-notif__card-title {
  flex: 1;
  font-family: 'Involve', sans-serif;
  font-size: 14px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
}
.ngo-notif__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  opacity: 0.5;
}
.ngo-notif__empty {
  padding: 24px 16px;
  text-align: center;
  opacity: 0.6;
  font-family: 'Involve', sans-serif;
  font-size: 14px;
  text-transform: none;
}

/* Vue détail */
.ngo-notif__detail-scroll {
  overflow-y: auto;
  padding-bottom: 20px;
}
.ngo-notif__detail-image img {
  width: 100%;
  height: auto;
  display: block;
}
.ngo-notif__detail-title {
  font-family: 'Involve', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 18px;
  margin: 16px 16px 8px;
}
.ngo-notif__detail-text {
  padding: 0 16px;
  font-family: 'Involve', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
}

/* CTA (bouton plein, carré — distinct du style global "texte souligné") */
.ngo-notif__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 16px;
  padding: 14px 20px;
  background: #1b1d27;
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: 'Involve', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.ngo-notif__cta:hover {
  opacity: 0.9;
}
.ngo-notif__form {
  padding: 16px 16px 0;
}
.ngo-notif__form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ngo-notif__input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-family: 'Involve', sans-serif;
  text-transform: none;
}
.ngo-notif__form .ngo-notif__cta {
  margin: 0;
}
.ngo-notif__form-success,
.ngo-notif__form-error {
  font-family: 'Involve', sans-serif;
  font-size: 13px;
  text-transform: none;
  padding: 8px 0;
}
.ngo-notif__form-error {
  color: #b00020;
}

/* Mobile : panneau plein écran */
@media (max-width: 767.98px) {
  .ngo-notif__panel {
    position: fixed;
    inset: 0;
    top: var(--header-height, 0px);
    width: 100%;
    max-width: none;
    max-height: none;
    height: calc(100vh - var(--header-height, 0px));
  }
  .ngo-notif__cards,
  .ngo-notif__detail-scroll {
    flex: 1;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Cart count : même couleur que le badge cloche */
.cart-count {
  background-color: #1b1d27 !important;
  color: #fff !important;
}
/* Compteur à côté du titre « PANIER » : vrai rond (la variante --unstyled le rendait ovale) */
.cart__heading .cart-count,
.cart-drawer__heading .cart-count {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  aspect-ratio: 1 / 1;
}
/* CUSTOM:end */

/* CUSTOM:start — Bannières du mega-menu (en-tête) : coins carrés (charte, pas d'arrondi) */
.mega-menu .image-card,
.mega-menu .image-card__media,
.mega-menu .image-card__media-wrapper {
  --border-radius: 0 !important;
  border-radius: 0 !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Grille catégorie : scroll horizontal pinné (> 4 éléments) */
/* Desktop (motion ok) : la scène se fige (sticky) pendant qu'on scrolle la hauteur du track,
   et le JS convertit la progression en translateX de la rangée. */
.cat-grid--hscroll .cat-grid__track {
  position: relative;
  height: var(--cat-track-h, auto);
}
.cat-grid--hscroll .cat-grid__stage {
  position: sticky;
  top: var(--header-height, 0px);
  /* la scène remplit l'écran (sous le header) pendant le pin → pas de vide blanc sous la rangée */
  height: calc(100svh - var(--header-height, 0px));
  overflow: hidden;
  display: flex;
  align-items: center;
}
.cat-grid--hscroll .cat-grid__items {
  display: flex !important;
  flex-wrap: nowrap;
  grid-template-columns: none !important;
  will-change: transform;
}
.cat-grid--hscroll .cat-grid__card {
  flex: 0 0 var(--cat-card-w, 25%);
  width: var(--cat-card-w, 25%);
}

/* Desktop + motion : les cartes remplissent toute la hauteur de l'écran (pas de vide) */
@media (min-width: 750px) and (prefers-reduced-motion: no-preference) {
  .cat-grid--hscroll .cat-grid__stage {
    align-items: stretch;
  }
  .cat-grid--hscroll .cat-grid__items {
    height: 100%;
    align-items: stretch;
  }
  .cat-grid--hscroll .cat-grid__card {
    height: 100%;
    display: flex !important; /* bat le display:block inline (#cat-grid-… .cat-grid__card) */
    flex-direction: column;
  }
  /* !important : bat la règle aspect-ratio inline #cat-grid-… .cat-grid__media (spécificité ID) */
  .cat-grid--hscroll .cat-grid__media {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    aspect-ratio: auto !important;
  }
  .cat-grid--hscroll .cat-grid__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Fallback : mobile OU reduced-motion → scroll horizontal libre (pas de pin, swipe natif) */
@media (max-width: 749px), (prefers-reduced-motion: reduce) {
  .cat-grid--hscroll .cat-grid__track {
    height: auto !important;
  }
  .cat-grid--hscroll .cat-grid__stage {
    position: static;
    height: auto !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-grid--hscroll .cat-grid__stage::-webkit-scrollbar {
    display: none;
  }
  .cat-grid--hscroll .cat-grid__items {
    transform: none !important;
    width: max-content;
  }
  .cat-grid--hscroll .cat-grid__card {
    flex: 0 0 min(72vw, 280px);
    width: min(72vw, 280px);
    scroll-snap-align: start;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Grille catégorie : carrousel à flèches discrètes (swipe natif) */
.cat-grid--carousel .cat-grid__carousel {
  position: relative;
}
.cat-grid--carousel .cat-grid__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
/* Glisser-déposer souris (desktop) : curseur « main » */
@media (min-width: 750px) and (pointer: fine) {
  .cat-grid--carousel .cat-grid__viewport { cursor: grab; }
  .cat-grid--carousel .cat-grid__viewport.is-grabbing { cursor: grabbing; }
  .cat-grid--carousel .cat-grid__viewport.is-grabbing,
  .cat-grid--carousel .cat-grid__viewport.is-grabbing * { user-select: none; }
}
/* Pas de « fantôme » d'image au glissement */
.cat-grid--carousel .cat-grid__media img {
  -webkit-user-drag: none;
  user-select: none;
}
.cat-grid--carousel .cat-grid__viewport::-webkit-scrollbar {
  display: none;
}
.cat-grid--carousel .cat-grid__items {
  display: flex !important;
  flex-wrap: nowrap;
  grid-template-columns: none !important;
  /* largeur = zone visible : le calc des cartes se base dessus, les cartes en trop débordent (scroll) */
  width: 100%;
}
.cat-grid--carousel .cat-grid__card {
  flex: 0 0 calc((100% - (var(--cat-cpv, 4) - 1) * var(--cat-gap, 16px)) / var(--cat-cpv, 4));
  width: calc((100% - (var(--cat-cpv, 4) - 1) * var(--cat-gap, 16px)) / var(--cat-cpv, 4));
  min-width: 0;
  scroll-snap-align: start;
}

/* Flèches en haut à droite (sur la ligne du titre) — chevrons discrets, sans arrondi */
.cat-grid--carousel .cat-grid__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto; /* toujours à droite, même sans titre */
}
.cat-grid--carousel .cat-grid__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cat-arrow-size, 36px);
  height: var(--cat-arrow-size, 36px);
  padding: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--cat-arrow-color, #1b1d27);
  background: var(--cat-arrow-bg, transparent);
  transition: opacity 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
/* Flèches en dessous du carrousel (réglage « Position des flèches » = En dessous) */
.cat-grid--carousel .cat-grid__nav--below {
  margin-left: 0;
  margin-top: var(--cat-arrow-below-gap, 16px);
  justify-content: var(--cat-arrow-below-justify, center);
}
.cat-grid--carousel .cat-grid__arrow:hover { opacity: 0.6; }
.cat-grid--carousel .cat-grid__arrow svg {
  width: 58%;
  height: 58%;
  display: block;
}
/* Extrémité atteinte → grisée (reste visible, discrète) */
.cat-grid--carousel .cat-grid__arrow.is-disabled {
  opacity: 0.25;
  pointer-events: none;
}
/* Aucun débordement → pas de flèches du tout */
.cat-grid--carousel.is-static .cat-grid__nav {
  display: none;
}

/* Mobile : swipe natif, flèches masquées par défaut */
@media (max-width: 749px) {
  /* On réserve « --cat-peek-mobile » à droite → la carte suivante dépasse (indice de scroll) */
  .cat-grid--carousel .cat-grid__card {
    flex: 0 0 calc((100% - (var(--cat-cpv-mobile, 2) - 1) * var(--cat-gap-mobile, 10px) - var(--cat-peek-mobile, 32px)) / var(--cat-cpv-mobile, 2));
    width: calc((100% - (var(--cat-cpv-mobile, 2) - 1) * var(--cat-gap-mobile, 10px) - var(--cat-peek-mobile, 32px)) / var(--cat-cpv-mobile, 2));
  }
  .cat-grid--carousel:not(.cat-grid--arrows-mobile) .cat-grid__nav {
    display: none;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Menus header : MAJUSCULES + sans flèche (caret) */
.header__navigation .menu__item {
  text-transform: uppercase;
}
/* masque le caret-down à droite des intitulés de menu */
.header__navigation .menu__item .icon {
  display: none;
}
/* CUSTOM:end */

/* CUSTOM:start — Collection : produits pleine largeur + filtres dans un tiroir (bouton en haut) */
/* Le thème a déjà un tiroir de filtres (#filters-drawer) utilisé sur mobile.
   On l'active aussi sur desktop, on masque la sidebar inline et on étire la grille. */

@media (min-width: 1024px) {
  /* 1) Masquer la sidebar de filtres inline (desktop) */
  .collection .facet-filtering,
  results-list .facet-filtering {
    display: none !important;
  }

  /* 2) Grille produits sur toute la largeur (plus de colonne réservée aux filtres) */
  .collection__wrapper,
  results-list[show-filtering="true"]:not(.collection-empty) .collection__wrapper {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "toolbar"
      "remove-buttons"
      "main-collection-grid" !important;
  }

  /* 3) Forcer le nombre de colonnes "pleine largeur" même quand show-filtering=true */
  [show-filtering="true"] .product-grid[product-grid-view="default"] {
    --f-columns-lg: 3;
  }
  [show-filtering="true"] .product-grid[product-grid-view="zoom-out"] {
    --f-columns-lg: 4;
  }

  /* 4) Bouton desktop qui togglait la sidebar : on le masque */
  .toggle-filter-desktop {
    display: none !important;
  }

  /* 5) Bouton "Filtres" (ouvre le tiroir) visible aussi sur desktop */
  .toggle-filter-mobile {
    display: block !important;
  }
}

@media (min-width: 1200px) {
  [show-filtering="true"] .product-grid[product-grid-view="default"] {
    --f-columns-xl: 4;
  }
  [show-filtering="true"] .product-grid[product-grid-view="zoom-out"] {
    --f-columns-xl: 5;
  }
}

/* 6) Conteneur "full" : barre d'outils "Filtrer et trier" + filtres actifs sur toute
   la largeur (comme la grille produits), avec un petit gutter pour ne pas coller au bord.
   NB : on n'utilise PAS var(--page-padding) ici car sur grand écran il vaut ~13.5rem
   (la marge qui centre en page-width) — ce qui re-centrerait la barre. */
.section-grid--full .facet-toolbar,
.section-grid--full .facet-remove-buttons {
  padding-inline: clamp(1.6rem, 2.5vw, 3.2rem);
}

/* 7) Tiroir de filtres : on le fait venir de la DROITE (comme la maquette) */
.dialog--filters-drawer.dialog--drawer-left {
  margin-inline: auto var(--dialog-drawer-offset-horizontal);
}
.dialog--filters-drawer.dialog--drawer-left[open] {
  animation-name: slideInLeft;
}
.dialog--filters-drawer.dialog--drawer-left.dialog-closing {
  animation-name: slideOutLeft;
}

/* 8) Titre de collection sur toute la largeur (même gutter que la barre d'outils).
   La bannière force son contenu en section-grid--fixed (centré page-width) même en
   conteneur "full" : on remplace les colonnes latérales par un petit gutter. */
.collection-banner--container-full .section__wrapper {
  grid-template-columns: clamp(1.6rem, 2.5vw, 3.2rem) minmax(0, 1fr) clamp(1.6rem, 2.5vw, 3.2rem);
}

/* 9) Fils d'Ariane sur toute la largeur, uniquement sur la page collection
   (la section breadcrumbs sert aussi ailleurs : produit, etc.). */
body.collection .section-breadcrumbs .page-width {
  padding-inline: clamp(1.6rem, 2.5vw, 3.2rem);
}

/* 10) Sections "custom-section" passées en pleine largeur (container page-width--full)
   sur la page collection : on aligne leur contenu (ex. le trait divider) sur le même
   gutter que le titre / la barre d'outils. */
body.collection .custom-section.page-width--full {
  padding-inline: clamp(1.6rem, 2.5vw, 3.2rem);
}

/* 11) Collection principale : reporter l'écart horizontal entre produits aussi en
   marge gauche/droite (les cartes des extrémités ne collent plus au bord).
   --f-column-gap = la valeur du réglage "écart horizontal" de la section. */
.main-collection .product-grid {
  padding-inline: var(--f-column-gap, 0);
}
/* CUSTOM:end */

/* CUSTOM:start — Nom du produit (carte) en MAJUSCULES (charte N'GO) */
.product-card__title {
  font-family: 'Involve', sans-serif; /* CUSTOM — charte : Involve (les titres de carte héritaient d'une autre police) */
  text-transform: uppercase;
}
/* CUSTOM:end */

/* CUSTOM:start — Cartes produit : titre plafonné à 2 lignes.
   Pas de min-height : un titre sur 1 ligne reste sur 1 ligne (pas d'espace réservé).
   Le clamp à 2 lignes garantit que tous les titres qui débordent font exactement
   2 lignes → même hauteur entre eux. */
.product-card__title .reversed-link__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
/* Exception — Recommandations de produits : on réserve 2 lignes pour le titre
   afin que toutes les cartes (prix, etc.) restent alignées même si un titre passe
   sur 2 lignes. (Ailleurs, pas de min-height : cf. bloc ci-dessus.) */
.product-recommendations .product-card__title,
.block-product-recommendations .product-card__title {
  min-height: calc(1.3em * 2);
}
/* CUSTOM:end */

/* CUSTOM:start — Flèches carrousel (préc./suiv.) sans bordure */
.carousel__button.btn--outline,
.carousel__button.btn--outline:hover {
  border: 0;
  box-shadow: none;
}
/* CUSTOM:end */

/* CUSTOM:start — Carte produit : désactive l'animation de lien au survol
   (titre + ligne métas au-dessus : soulignement animé + changement de couleur) */
.product-card__title.reversed-link,
.product-card__title.reversed-link .reversed-link__text,
.product-card__meta.reversed-link,
.product-card__meta.reversed-link .reversed-link__text {
  background-image: none !important;
  transition: none !important;
}
.product-card__title.reversed-link:hover .reversed-link__text,
.product-card__meta.reversed-link:hover .reversed-link__text {
  background-size: 0 0 !important;
  color: inherit !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Page produit : titre en MAJUSCULES (charte N'GO) */
.product-title-block {
  text-transform: uppercase;
}
/* CUSTOM:end */

/* CUSTOM:start — Page produit : galerie plus large que le bloc d'achat (~62/38)
   Natif = 730fr/610fr (≈54/46, quasi 50/50). On élargit la galerie. */
@media (min-width: 768px) {
  .product-information__grid.product-information__grid--media-left {
    grid-template-columns: 68fr 32fr !important;
  }
  .product-information__grid.product-information__grid--media-right {
    grid-template-columns: 32fr 68fr !important;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Galerie produit : curseur cliquable (pas de loupe) sur les images */
.media-gallery--main .media-gallery__item img {
  cursor: pointer;
}
/* CUSTOM:end */

/* CUSTOM:start — Boutons-icônes (pictos) en carré (charte N'GO : pas d'arrondi)
   Natif : .btn--icon-only a --button-corner-radius: 50% (rond). On passe en carré.
   Couvre : flèches de navigation carrousel/lightbox, bouton loupe/zoom, etc. */
.btn--icon-only {
  --button-corner-radius: 0;
}
/* CUSTOM:end */

/* CUSTOM:start — Boutons-icônes : pas d'animation NI de changement de couleur au survol
   On retire le balayage (::before), les transitions, et on fige les couleurs au hover. */
.btn--icon-only::before {
  display: none !important;
}
.btn--icon-only,
.btn--icon-only .icon {
  transition: none !important;
}
/* flèches (outline) : garder la couleur/bordure normales au survol */
.btn--outline.btn--icon-only:hover {
  color: var(--color-foreground) !important;
  border-color: rgb(var(--color-foreground) / var(--button-outline-border-alpha, 0.2)) !important;
  background-color: transparent !important;
}
/* bouton loupe (white) : idem */
.btn--white.btn--icon-only:hover {
  color: rgb(var(--color-black)) !important;
  background-color: rgb(var(--color-white)) !important;
  border-color: rgb(var(--color-white)) !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Lightbox produit : image en plein écran
   Le style inline de PhotoSwipe (.pswp__img { width:800px; height:800px }) bloque la
   taille. On le surcharge en !important. transform/inset neutralisés pour éviter le
   décalage dû au zoom-wrap. object-fit: contain = image entière, aussi grande que l'écran. */
.pswp__zoom-wrap {
  transform: none !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pswp__img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}
/* Croix de fermeture en haut à droite, bien visible au-dessus de l'image */
.ngo-pswp-close {
  position: fixed !important;
  top: 1.6rem !important;
  right: 1.6rem !important;
  z-index: 100001 !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Galerie produit N'GO : 2 photos 4/5 côte à côte + reste en carrousel */
.ngo-gallery,
.ngo-gallery .ngo-gallery__wrapper {
  display: block !important;
}
/* 2 premières : grille 2 colonnes, format 4/5 */
.ngo-gallery__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--media-gap, 1rem);
}
.ngo-gallery__top-item {
  width: 100%;
  margin: 0;
}
/* le reste : carrousel horizontal (scroll-snap), format conservé */
.ngo-gallery__rest {
  display: flex;
  gap: var(--media-gap, 1rem);
  margin-top: var(--media-gap, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ngo-gallery__rest::-webkit-scrollbar {
  display: none;
}
.ngo-gallery__rest-item {
  flex: 0 0 auto;
  width: min(46%, 360px);
  margin: 0;
  scroll-snap-align: start;
}
/* mobile : galerie unifiée en UN SEUL carrousel plein écran (une image à la fois, swipe) */
@media (max-width: 749px) {
  /* Le wrapper devient la piste horizontale scroll-snap ; on neutralise la grille
     et le wrapper du slider (display:contents) pour que TOUTES les images (2 premières
     + reste) deviennent des items frères, chacun sur 100 % de la largeur. */
  .ngo-gallery .ngo-gallery__wrapper {
    display: flex !important;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ngo-gallery .ngo-gallery__wrapper::-webkit-scrollbar {
    display: none;
  }
  .ngo-gallery__top,
  .ngo-gallery__rest-wrap,
  .ngo-gallery__rest {
    display: contents;
  }
  .ngo-gallery__top-item,
  .ngo-gallery__rest-item {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    scroll-snap-align: start;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Galerie produit N'GO : slider du carrousel (flèches + drag souris) */
.ngo-gallery__rest-wrap {
  position: relative;
}
.ngo-gallery__rest {
  cursor: grab;
}
.ngo-gallery__rest.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.ngo-gallery__rest.is-grabbing img {
  pointer-events: none;
}
/* Flèches de navigation — carrées, sans arrondi (charte) */
.ngo-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  /* CUSTOM — plus de carré blanc : on garde juste la flèche (et la zone de clic) */
  background: transparent;
  color: #1b1d27;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.ngo-gallery__nav--prev {
  inset-inline-start: 0.8rem;
}
.ngo-gallery__nav--next {
  inset-inline-end: 0.8rem;
}
.ngo-gallery__nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.ngo-gallery__rest-wrap.ngo-gallery--has-nav .ngo-gallery__nav {
  display: flex;
}
/* Tactile : on garde le scroll natif, pas de flèches */
@media (max-width: 749px) {
  .ngo-gallery__nav {
    display: none !important;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Galerie produit N'GO : points de pagination (mobile uniquement) */
.ngo-gallery__dots {
  display: none;
}
@media (max-width: 749px) {
  /* Contexte de positionnement (la galerie ne défile pas, contrairement au wrapper) */
  .ngo-gallery {
    position: relative;
  }
  /* Points superposés en bas de la photo */
  .ngo-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 2;
    margin: 0;
    pointer-events: auto;
  }
  .ngo-gallery__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 0; /* charte : formes sans arrondi */
    background: rgba(27, 29, 39, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); /* lisibilité sur photos claires ET foncées */
    cursor: pointer;
    transition: background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .ngo-gallery__dot.is-active {
    background: #1b1d27;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Prix produit : taille personnalisée (réglage "custom_price_size" du bloc) */
.product-price-block.ngo-price--custom .price-container,
.product-price-block.ngo-price--custom .price,
.product-price-block.ngo-price--custom .price--sale,
.product-price-block.ngo-price--custom .compare-at-price {
  font-size: var(--ngo-price-size) !important;
  line-height: 1.1 !important;
}
@media (max-width: 749px) {
  .product-price-block.ngo-price--custom .price-container,
  .product-price-block.ngo-price--custom .price,
  .product-price-block.ngo-price--custom .price--sale,
  .product-price-block.ngo-price--custom .compare-at-price {
    font-size: var(--ngo-price-size-mobile, var(--ngo-price-size)) !important;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Accordéon : taille personnalisée des titres (réglage "custom_summary_size")
   La valeur desktop est posée en inline (--summary-font-size). Sur mobile, on bascule
   sur --summary-font-size-mobile. */
@media (max-width: 749px) {
  .ngo-accordion--custom-size {
    --summary-font-size: var(--summary-font-size-mobile) !important;
  }
}
/* CUSTOM:end */

/* CUSTOM — Header transparent sur l'accueil : la transparence vit désormais, auto-contenue,
   dans la section dédiée sections/header-ngo.liquid (header alternatif sélectionnable depuis
   le customizer). L'ancien header (sections/header.liquid) reste 100% normal/opaque.
   Rien ici : tout est dans header-ngo.liquid pour que le switch BO soit propre. */

/* CUSTOM:start — Filtres & tri (collection) : bouton + tiroir en plus petit */
/* Bouton « Filtrer & trier » (mobile + desktop) et menu de tri */
/* .toggle-filter-btn.btn : spécificité supérieure à .btn du thème (var --font-size--paragraph) */
.toggle-filter-btn.btn,
.sorting-filter__select {
  font-size: 14px;
}

/* Select de tri : affiche uniquement « Trier par » + la flèche (pas la valeur choisie).
   Le libellé .sorting-filter__placeholder porte le trait/la flèche ; le <select> natif
   est superposé, transparent, pour rester fonctionnel (options + tri conservé). */
.sorting-filter__container {
  align-items: baseline;
}
.sorting-filter__container .select {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.sorting-filter__control {
  position: relative;
  overflow: visible; /* le wrapper .select clippe par défaut → ne pas rogner l'anneau de focus */
}
/* Libellé visible « Trier par » : trait sous le texte + place pour la flèche */
.sorting-filter__placeholder {
  display: inline-block;
  font-size: 14px;
  line-height: 1.3;
  border-bottom: 1px solid currentColor;
  padding: 0 1.5em 2px 0;
  white-space: nowrap;
  cursor: pointer;
}
/* Flèche collée au bord droit (sinon elle chevauche le texte « par ») */
.sorting-filter__control.select::after {
  inset-inline-end: 0;
}
/* <select> natif superposé et invisible, mais cliquable au clavier/souris */
.sorting-filter__control .sorting-filter__select.form-control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent; /* masque la valeur sélectionnée si jamais rendue */
  opacity: 0;
  cursor: pointer;
}
.sorting-filter__control .sorting-filter__select.form-control:focus {
  outline: 0;
  box-shadow: none;
}
/* Indicateur de focus clavier reporté sur le libellé visible */
.sorting-filter__control:focus-within .sorting-filter__placeholder {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Tiroir de filtres qui s'ouvre à gauche */
.dialog--filters-drawer .filters-drawer__header .h3 {
  font-size: 15px;
}
/* Titres de groupes (Trier, Couleur, Taille…) */
.dialog--filters-drawer .facet__summary,
.dialog--filters-drawer .accordion__summary-text,
.dialog--filters-drawer .facet__label {
  font-size: 14px;
}
/* Options, libellés et bouton « Voir les résultats » */
.dialog--filters-drawer .facets__checkbox-text,
.dialog--filters-drawer .facets__image-label,
.dialog--filters-drawer .price-facet__label,
.dialog--filters-drawer .facets__see-results {
  font-size: 13px;
}
/* CUSTOM:end */

/* CUSTOM:start — Réduction globale des typos (~4%)
   Le thème base toutes ses tailles sur html { font-size: 62.5% } (rem).
   60% = toutes les typos un peu plus petites. (Affecte aussi légèrement les espacements en rem.) */
html {
  font-size: 60%;
}
/* CUSTOM:end */

/* CUSTOM:start — Panier : titre « PANIER » et prix total plus petits */
.cart-drawer__heading.cart__heading {
  font-size: 18px !important;
}
.cart-summary__total-value,
.cart-summary__total-value .price {
  font-size: 18px !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Panier : icônes d'action (code promo, note, livraison) en noir, sans bordure */
.cart-drawer__addon-button {
  color: #1B1D27 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.cart-drawer__addon-button .icon,
.cart-drawer__addon-button svg {
  color: #1B1D27 !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Page produit : masquer la loupe de zoom au survol des images
   (le clic sur l'image ouvre quand même le zoom plein écran via custom.js) */
.media-gallery__zoom-dialog-button {
  display: none !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Prix de la fiche produit en #7f9cad */
.product-price-block,
.product-price-block .price,
.product-price-block .price--sale {
  color: #7f9cad !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Prix soldé (.price--sale) en gris foncé charte #1B1D27 partout
   (cartes produit, panier, recherche…) au lieu de l'orange soldé #d4653f du thème.
   Les pages produit ne sont PAS affectées : leur règle .product-price-block .price--sale
   (#7f9cad) est plus spécifique + !important, donc elle continue de l'emporter. */
.price--sale {
  color: #1B1D27 !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Statuts stock (« En stock… » et « Dernières pièces… ») en #1a1c26 (texte + picto) */
.product-inventory__status.notification--success,
.product-inventory__status.notification--error {
  color: #1a1c26 !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Masquer le bloc « description produit » (texte) sur la page produit */
.text-block[class*="product_description"] {
  display: none !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Page produit : titre à 22px (desktop + mobile) */
.product-title-block .text-block,
.product-title-block .text-block p {
  font-size: 22px !important;
}
/* CUSTOM:end */

/* CUSTOM:start — UGC : masquer le picto flèche (badge) en coin des vignettes */
.ugc__item-badge {
  display: none !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Cartes produit : aucun badge (Promo, etc.) */
product-badge.product-card__badges,
.product-card__badges {
  display: none !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Carte produit (style « card ») : padding réduit à 4px */
.product-card--style-card.product-card--standard .product-card__content {
  padding: 4px !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Carte produit (style « card ») : titre + prix à gauche, achat rapide à droite */
/* Bloc gauche : titre puis prix empilés, peu d'espace entre les deux */
.product-card--style-card.product-card--standard .product-card__content--wrapper {
  gap: 2px;
}
/* Conteneur en rangée : titre/prix à gauche, achat rapide à droite, alignés en bas */
.product-card--style-card.product-card--standard .product-card__content {
  align-items: flex-end;
}

/* Lien « achat rapide » : juste du texte souligné (pas de bouton/cadre/icône) */
.product-card__quick-link {
  flex: 0 0 auto;
  pointer-events: auto;
}
.product-card__quick-link,
.product-card__quick-link .quick-add__product-form-component,
.product-card__quick-link form {
  width: auto !important;
}
.product-card__quick-link .btn,
.product-card__quick-link .quick-add__button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 0 0 2px !important;
  color: rgb(var(--color-foreground)) !important;
}
/* Produit avec tailles : on garde UNIQUEMENT le bouton qui ouvre le sélecteur
   (on masque le bouton "ajouter direct" qui sinon ajoute une taille par défaut). */
.product-card__quick-link quick-add-component:has(.quick-add__button--choose) add-to-cart-component {
  display: none !important;
}
/* le texte reste toujours visible (le thème le masque sur mobile) et souligné */
.product-card__quick-link .btn__text {
  display: inline !important;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
}
/* on retire l'icône panier, le spinner et tout chrome */
.product-card__quick-link .icon,
.product-card__quick-link .btn__icon,
.product-card__quick-link svg,
.product-card__quick-link .quick-add__button-spinner {
  display: none !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Wishlist : bouton cœur (charte N'GO, carré) */
.wishlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.85);
  color: #1B1D27;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.wishlist-btn__icon { width: 20px; height: 20px; display: block; }
.wishlist-btn.is-active .wishlist-btn__icon path,
.wishlist-btn[aria-pressed="true"] .wishlist-btn__icon path {
  fill: #1B1D27;
  stroke: #1B1D27;
}
/* Variante carte : haut-droite de l'image, sans fond (cœur seul) */
.product-card__media { position: relative; }
.wishlist-btn--card {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: transparent;
}
/* Variante fiche produit : sans fond, à côté du titre */
.wishlist-btn--product {
  background: transparent;
  width: 30px;
  height: 30px;
}
.product-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-title-row .product-title-block { flex: 1 1 auto; min-width: 0; }
.product-title-wishlist { flex: 0 0 auto; display: inline-flex; }
/* CUSTOM:end */

/* CUSTOM:start — Wishlist : lien + pastille compteur (header) */
.header__wishlist { position: relative; display: inline-flex; align-items: center; color: inherit; }
.header__wishlist .wishlist-link__icon { width: 20px; height: 20px; display: block; }
/* Pastille wishlist = même style que la pastille panier (.cart-count / --absolute / desktop .cart-icon) */
.wishlist-count {
  --cart-count-size: 2rem;
  position: absolute;
  top: 0.1rem;
  inset-inline-end: var(--cart-count-offset-x, -0.5rem);
  width: var(--cart-count-size, 2rem);
  height: var(--cart-count-size, 2rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 1.4rem;
  font-weight: var(--font-body--weight);
  color: #fff;
  background-color: #1B1D27; /* fond noir (charte) */
  border-radius: 50%;
}
@media (min-width: 768px) {
  .wishlist-count {
    --cart-count-size: 2.2rem;
    top: -0.2rem;
  }
}
.wishlist-count[hidden] { display: none; }

/* Réduction des 2 pastilles du header (panier + wishlist) à 90 % */
.cart-icon .cart-count--absolute,
.wishlist-count {
  transform: scale(0.9);
  transform-origin: center;
}

/* Mobile identique au desktop : le thème réduit la taille (2rem au lieu de 2.2rem),
   descend la pastille (top 0.1rem au lieu de -0.2rem) et la décale moins (offset-x -0.5rem
   au lieu de -0.9rem) sous 768px. On force les valeurs desktop sur mobile, panier + wishlist. */
@media (max-width: 767px) {
  .header {
    --cart-count-offset-x: -0.9rem;
  }
  .cart-icon .cart-count--absolute,
  .header__wishlist .wishlist-count {
    --cart-count-size: 2.2rem;
    top: 0.8rem;
  }
  /* Panier : le décalage horizontal est parfois posé en inline (right) par le JS,
     ce qui le désaligne de la wishlist. On le force sur le même offset partagé. */
  .cart-icon .cart-count--absolute {
    right: auto !important;
    inset-inline-end: var(--cart-count-offset-x) !important;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Wishlist : page favoris */
.wishlist-page__title { font-family: 'Involve', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--wl-title-size, 13px); line-height: 1.2; margin: 0 0 4px; }
.wishlist-page__title-ast { font-size: 0.7em; vertical-align: super; line-height: 0; }
.wishlist-page__title-translation { font-family: 'Involve', sans-serif; font-size: 10px; letter-spacing: 0.02em; opacity: 0.55; margin: 0 0 32px; text-transform: none; }
@media screen and (max-width: 749px) {
  .wishlist-page__title { font-size: var(--wl-title-size-mobile, 13px); }
}
.wishlist-page__grid {
  display: grid;
  grid-template-columns: repeat(var(--wl-cols, 4), 1fr);
  gap: 24px 16px;
}
.wishlist-card { position: relative; display: flex; flex-direction: column; }
.wishlist-card__media { display: block; aspect-ratio: 3/4; overflow: hidden; background: #f1f1f1; }
.wishlist-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wishlist-card__info { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 0; }
.wishlist-card__title { text-decoration: none; color: #1B1D27; text-transform: uppercase; }
.wishlist-card__price { color: #7f9cad; }
.wishlist-page__loading { color: #7A7A7A; }
.wishlist-page__empty { text-align: center; padding: 40px 0; }
.wishlist-page__empty-cta {
  display: inline-block; margin-top: 16px; padding: 12px 28px;
  border: 1px solid #1B1D27; color: #1B1D27; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px;
}
@media (max-width: 749px) {
  .wishlist-page__grid { grid-template-columns: repeat(var(--wl-cols-mobile, 2), 1fr); }
}
/* CUSTOM:end */

/* CUSTOM:start — mega-menu : désactive l'animation de soulignement au hover sur les liens */
.mega-menu__link.reversed-link:hover .reversed-link__text {
  background-size: 0% var(--underline-thickness) !important;
  color: inherit !important;
}
/* CUSTOM:end */

/* CUSTOM:start — mega-menu : hover très discret sur les items (juste un éclaircissement, comme le footer) */
.mega-menu--ngo .mm-ngo__link,
.mega-menu__link {
  transition: opacity .2s ease;
}
.mega-menu--ngo .mm-ngo__link .reversed-link__text {
  transition: opacity .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mega-menu--ngo .mm-ngo__link:hover,
  .mega-menu__link:hover {
    opacity: .6;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — mega-menu : hiérarchie catégories / sous-catégories
   - Noms de catégories (niveau haut) : Involve SemiBold pour bien les démarquer
   - Noms de sous-catégories : 12px, uniformisés avec le reste */
.mega-menu__link--top {
  font-family: 'Involve', sans-serif;
  font-weight: 600;
  font-size: 1.4rem; /* CUSTOM — uniformisé avec les sous-catégories (14px) */
}
.mega-menu__item-child .mega-menu__link {
  font-size: 1.4rem; /* 14px */
}
/* CUSTOM:end */

/* CUSTOM:start — Page produit : bouton « Ajouter au panier » plein, carré, dark grey (bien visible) */
.buy-buttons-block .product-form-buttons add-to-cart-component .btn {
  width: 100%;
  background-color: #1B1D27 !important; /* dark grey (charte) */
  color: #ffffff !important;
  border-color: #1B1D27 !important;
  border-radius: 0 !important; /* carré (charte) */
  padding-bottom: 0 !important;
}
/* Alignement : même hauteur exacte (border-box) que le sélecteur de quantité */
.buy-buttons-block .product-form-buttons add-to-cart-component .btn,
.buy-buttons-block .product-form-buttons .quantity-selector .quantity-input {
  height: 5rem !important;
  box-sizing: border-box !important;
}
/* Neutralise l'inversion de couleur native au survol : le bouton reste dark, texte blanc */
.buy-buttons-block .product-form-buttons add-to-cart-component .btn::before {
  display: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .buy-buttons-block .product-form-buttons add-to-cart-component .btn:hover {
    background-color: #2c2f3d !important; /* léger éclaircissement au survol */
    color: #ffffff !important;
  }
}
/* CUSTOM:end */

/* CUSTOM:start — Achat rapide : masque le badge « Promo » (le badge reste visible sur les cartes produit et la page produit) */
.dialog--quick-add-drawer .product-badges {
  display: none !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Galerie produit : 4px d'écart entre les photos (horizontal + vertical)
   Override de --media-gap (posé en style inline sur <media-gallery> via le réglage natif
   « Écart » / grid_gap). Le !important d'auteur prime sur le style inline non-important.
   Le gap d'une grille s'applique aux deux axes. */
media-gallery {
  --media-gap: 4px !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Bannière de collection : aligner le titre sur la même marge que le header.
   Le header est en pleine largeur avec padding-inline: 48px (réglage header_side_padding),
   alors que la bannière utilise --page-padding (16px / 50px / centré selon la largeur d'écran).
   On force --page-padding: 26px sur la bannière (desktop/tablette) pour que le titre
   « Baskets homme » s'aligne exactement sur le logo et la navigation du header. */
@media (min-width: 750px) {
  .collection-banner {
    --page-padding: 26px;
  }
}
/* CUSTOM:end */


/* CUSTOM:start — Cartes image (image-card) : titre en majuscules. */
.image-card__heading {
  text-transform: uppercase;
}
/* CUSTOM:end */

/* CUSTOM:start — Barre d'annonce (Top banner) : masquer les flèches de navigation
   (la rotation automatique suffit ; les chevrons parasitent la barre fine). */
.announcement-bar .carousel__controls,
.announcement-bar .carousel__button--prev,
.announcement-bar .carousel__button--next {
  display: none !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Onglets (sections « Tabs » autonomes : pages FAQ) : pas de pastille de
   sélection, onglet actif simplement en gras.
   Le thème anime un ::before (largeur 0 → 100 %) au survol ET sur l'onglet actif
   (aria-selected=true), + change la couleur du texte. On neutralise l'indicateur et le
   changement de couleur, et on distingue l'actif uniquement par le gras.
   Scopé à .section-tabs (n'affecte pas les tabs produit/collection).
   !important car section-tabs.css est chargé dans la section, donc après custom.css. */
.section-tabs .tabs__button::before {
  display: none !important;
}
.section-tabs .tabs__button:hover,
.section-tabs .tabs__button[aria-selected="true"] {
  color: rgb(var(--color-secondary-button-text)) !important;
}
.section-tabs .tabs__button[aria-selected="true"] {
  font-weight: 700 !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Accordéons FAQ (variant icône « solide ») : retire le rond gris derrière
   la flèche. Le thème pose un cercle 3rem avec background --color-background-secondary sur
   .accordion--icon-solid .accordion__summary-arrow. Scopé à .section-tabs (pages FAQ).
   Pas de !important : theme.css est chargé avant custom.css et ce sélecteur est plus spécifique. */
.section-tabs .accordion--icon-solid .accordion__summary-arrow {
  background: transparent;
  border-radius: 0;
}
/* CUSTOM:end */

/* CUSTOM:start — Section "scrolling-layers" : icône des items masquée (temporaire).
   Retirer ce bloc pour réafficher les icônes. */
.scrolling-layer-item__icon {
  display: none !important;
}
/* CUSTOM:end */

/* CUSTOM:start — Section "scrolling-layers" : désactive la superposition au scroll (temporaire).
   L'effet natif vient de position:sticky (theme.css). En static, les items défilent
   normalement les uns sous les autres. Retirer ce bloc pour réactiver l'empilement. */
.scrolling-layer-item {
  position: static !important;
}
/* CUSTOM:end */