/** Shopify CDN: Minification failed

Line 1184:23 Expected "}" to go with "{"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-filters-slider (INDEX:6) */
.filter-slider {
  position: relative;
  padding: 0 var(--page-margin, 20px);
}
.filter-slider__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0 4px;
}
.filter-slider__track::-webkit-scrollbar { display: none; }

.filter-slider__track {
  position: relative;
}

/* Sliding indicator (the moving black pill background) */
.filter-slider__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: var(--fs-bg-active, #5c5c52);
  border-radius: 999px;
  transform: translate(0, 0);
  transition: transform 0.75s cubic-bezier(0.7, 0, 0.3, 1),
              width 0.75s cubic-bezier(0.7, 0, 0.3, 1),
              height 0.75s cubic-bezier(0.7, 0, 0.3, 1);
  z-index: 0;
  pointer-events: none;
  will-change: transform, width, height;
}

.filter-slider__pill {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--fs-border, #5e5e55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--fs-text, #3d3d35);
  font-family: var(--font-ui, sans-serif);
  font-size: var(--fs-pill-size, 18px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              letter-spacing 0.35s ease,
              transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease;
}
.filter-slider__pill:hover {
  color: var(--fs-text-hover, #1a1a1a);
  letter-spacing: 0.10em;
  background: rgba(0, 0, 0, 0.04);
}
.filter-slider__pill:active {
  transform: scale(0.96);
}
.filter-slider__pill.is-active {
  color: var(--fs-text-active, #ffffff);
  border-color: transparent;
  background: transparent;
}
.filter-slider__pill.is-active:hover {
  background: transparent;
  color: #ffffff;
}

/* Count badge */
.filter-slider__pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transition: background 0.3s ease;
}
.filter-slider__pill.is-active .filter-slider__pill-count {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.filter-slider__pill:hover .filter-slider__pill-count {
  background: rgba(0, 0, 0, 0.10);
}

@media (max-width: 768px) {
  /* On mobile: pills spread evenly in a single line (no scroll) */
  .filter-slider {
    padding: 0 12px;
  }
  .filter-slider__track {
    gap: 6px !important;
    justify-content: stretch !important;
    overflow: visible;
    padding-right: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .filter-slider__pill {
    flex: 1 1 0 !important;
    min-width: 0;
    font-size: var(--fs-pill-size-mobile, 12px);
    padding: 9px 6px;
    letter-spacing: 0.04em;
    gap: 4px;
  }
  .filter-slider__pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* ========== Toolbar : tri + vue, lié visuellement aux filtres ========== */
.filter-slider .collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0 10px;
  margin-top: 10px;
  font-family: var(--font-ui, sans-serif);
  color: #1a1a1a;
}
.collection-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.collection-toolbar__sort-label {
  font-size: 20px;
  color: #6b6b6b;
}
.collection-toolbar__sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.collection-toolbar__sort-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0 22px 0 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  text-transform: lowercase;
}
.collection-toolbar__sort-wrap select:focus { outline: none; }
.collection-toolbar__caret {
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
  height: 9px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #1a1a1a;
}
.collection-toolbar__right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.collection-toolbar__count {
  font-size: 20px;
  color: #6b6b6b;
}
.collection-toolbar__view { display: inline-flex; gap: 12px; }
.view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #d0d0d0;
  transition: color 0.15s ease;
}
.view-btn:hover { color: #6b6b6b; }
.view-btn svg { width: 34px; height: 34px; fill: currentColor; }
.view-btn.is-active { color: #1a1a1a; }

.collection-page__grid--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.collection-page__grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }

@media (max-width: 768px) {
  .filter-slider .collection-toolbar {
    padding: 16px 0 6px;
    gap: 14px;
  }
  .collection-toolbar__sort-label,
  .collection-toolbar__sort-wrap select,
  .collection-toolbar__count { font-size: 15px; }
  .collection-toolbar__sort-wrap select { padding-right: 16px; }
  .view-btn { width: 40px; height: 40px; }
  .view-btn svg { width: 26px; height: 26px; }
}

/* Hide count badges on filter pills */
.filter-slider__pill-count { display: none !important; }
.filter-slider__pill { gap: 0 !important; }
/* END_SECTION:collection-filters-slider */

/* START_SECTION:collection (INDEX:7) */
/* ========== Collection page uses carousel grid styles ==========
   These rules mirror product-carousel.liquid's stylesheet so cards look
   identical on /collections/* pages (the carousel section's CSS only
   loads when that section is rendered, hence the duplication here).
*/

/* Slide : contexte de positionnement */
.collection-page .carousel__slide { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.collection-page .carousel__cat { z-index: 3; font-size: var(--card-cat-size, 96px); }
@media (max-width: 768px) {
  .collection-page .carousel__cat { font-size: var(--card-cat-size-mobile, 28px) !important; }
}
.collection-page .carousel__badge { z-index: 3; transition: opacity 0.25s ease; }
.collection-page .carousel__img-wrap { position: relative; z-index: 1; transition: opacity 0.4s ease; }

/* Image lifestyle (alt) : overlay complet de la card au hover */
.collection-page .carousel__img-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1),
              transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
}

/* Info bar : flat, fade out au hover */
.collection-page .carousel__info {
  font-family: var(--font-ui);
  position: relative;
  z-index: 2;
  transition: opacity 0.3s ease;
  padding: 20px 22px 22px !important;
  gap: 4px !important;
  display: flex; flex-direction: column;
}
.collection-page .carousel__stars { font-size: 13px; color: var(--olive); display: flex; align-items: center; gap: 4px; }
.collection-page .carousel__stars span { font-family: var(--font-ui); font-size: 13px; font-weight: 400; color: var(--muted); }
.collection-page .carousel__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.collection-page .carousel__name { font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--black); text-transform: none; }
.collection-page .carousel__price { font-size: 20px !important; font-weight: 700 !important; color: var(--black); }
.collection-page .carousel__desc { font-size: 17px !important; font-weight: 400 !important; margin-top: 2px; color: var(--muted); }

/* Bouton ACHETER : pill blanche qui remonte au hover */
.collection-page .carousel__cart-btn {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  margin: 0 !important;
  max-height: none !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 17px 22px !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  opacity: 0;
  transform: translateY(calc(100% + 24px));
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1),
              transform 0.6s cubic-bezier(0.7, 0, 0.3, 1) !important;
  z-index: 5;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.collection-page .carousel__cart-btn-label,
.collection-page .carousel__cart-btn-price { color: #1a1a1a !important; }
.collection-page .carousel__cart-btn-label { font-weight: 500 !important; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; text-align: center; }
.collection-page .carousel__cart-btn-price { font-weight: 700 !important; flex-shrink: 0; }
.collection-page .carousel__cart-btn:disabled { cursor: not-allowed; }

/* Mode grille (tous les produits visibles) */
.collection-page.carousel--grid { overflow: visible; }
.collection-page.carousel--grid .carousel__track {
  display: grid !important;
  grid-template-columns: repeat(var(--cols-desktop, 3), 1fr);
  gap: 20px;
  transform: none !important;
}
.collection-page.carousel--grid .carousel__slide { flex: unset !important; width: 100% !important; min-width: 0; }

/* Zone image plus grande en mode grille */
.collection-page.carousel--grid .carousel__img-wrap { padding-bottom: 125% !important; }
.collection-page.carousel--grid .carousel__img-wrap img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* Catégorie : petit tag discret en haut à gauche */
.collection-page.carousel--grid .carousel__cat {
  position: absolute;
  top: 14px !important;
  left: 16px !important;
  z-index: 3 !important;
  max-width: calc(100% - 32px);
  line-height: 1 !important;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  pointer-events: none;
}

/* État hover — desktop */
@media (hover: hover) {
  .collection-page .carousel__slide:hover .carousel__img-alt { opacity: 1; transform: scale(1); }
  .collection-page .carousel__slide:hover .carousel__img-wrap { opacity: 0; }
  .collection-page .carousel__slide:hover .carousel__badge { opacity: 0; }
  .collection-page .carousel__slide:hover .carousel__info { opacity: 0; pointer-events: none; }
  .collection-page .carousel__slide:hover .carousel__cart-btn {
    opacity: 1 !important;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.05s;
  }
}

/* Mobile : 2 cols par défaut, infos plus compactes */
@media (max-width: 768px) {
  .collection-page.carousel--grid .carousel__track {
    grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
    gap: 10px;
  }
  .collection-page .carousel__info { padding: 12px 12px 10px !important; }
  .collection-page .carousel__name, .collection-page .carousel__price { font-size: 14px !important; }
  .collection-page .carousel__desc { font-size: 12px !important; }
  .collection-page .carousel__stars { font-size: 11px; }
  .collection-page .carousel__cat { top: 10px !important; left: 12px !important; }

  /* Bouton outline toujours visible sur mobile */
  .collection-page .carousel__cart-btn {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    background: transparent !important;
    color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
    box-shadow: none !important;
    margin: 0 12px 12px !important;
    padding: 10px 10px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }
  .collection-page .carousel__cart-btn-product { display: none !important; }
}
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:8) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
    transition: transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
  }
  .collection-card:hover {
    transform: translateY(-4px);
  }
  .collection-card__image {
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1),
                filter 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    will-change: transform;
  }
  .collection-card:hover .collection-card__image {
    transform: scale(1.04);
  }
  @media (prefers-reduced-motion: reduce) {
    .collection-card,
    .collection-card__image { transition: none !important; }
    .collection-card:hover { transform: none !important; }
    .collection-card:hover .collection-card__image { transform: none !important; }
  }
/* END_SECTION:collections */

/* START_SECTION:header (INDEX:11) */
/* Sticky nav — supprime le saut static→fixed. Le nav reste dans le flux
   et se colle en haut quand on scrolle. */
.nav-wrapper,
.nav-wrapper.nav-fixed {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
}
.nav-wrapper.nav-hidden {
  transform: translateY(calc(-100% - 24px)) !important;
}
/* Transition douce entre les états (sur hero transparent → glass scrolled) */
.nav {
  transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}
.nav__link, .nav__logo, .nav__icon {
  transition: color 0.3s ease;
}
.nav__hamburger span {
  transition: background 0.3s ease;
}
/* Spacer plus nécessaire avec sticky */
.nav-spacer { display: none !important; }
/* Mobile: drawer menu — padding-top suffisant pour que le 1er item
   (ACCUEIL) ne soit pas masqué par la nav + ticker fixés en haut */
@media (max-width: 768px) {
  .mobile-menu__drawer-inner { padding-top: 110px !important; }
}
/* END_SECTION:header */

/* START_SECTION:hero-video (INDEX:12) */
/* ========== Hero typography — Rhode style ========== */
.hero__overline {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px 0;
}
.hero__title {
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
.hero__cta-btn {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  padding: 14px 36px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  font-size: 12px !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.hero__slides { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__slide-pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__slides .hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(6%);
  transition: none;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero__slides .hero__slide.is-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hero__slides .hero__slide,
  .hero__slides .hero__slide.is-active {
    transform: none;
    transition: opacity 0.3s linear;
  }
}
/* Mobile: uses svh instead of vh to prevent the hero from resizing
   when the browser address bar hides/shows on scroll */
@media (max-width: 768px) {
  .hero { height: 60svh !important; }
}
/* END_SECTION:hero-video */

/* START_SECTION:product-carousel (INDEX:22) */
/* ========== Titre de la section (« les favoris ») — police « stone » du footer ========== */
.carousel .carousel__header .carousel__title,
.carousel__title {
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  text-transform: lowercase !important;
}

/* ========== Slide : contexte de positionnement ========== */
.carousel__slide { position: relative; overflow: hidden; }
.carousel__cat { z-index: 3; font-size: var(--card-cat-size, 96px); }
@media (max-width: 768px) {
  .carousel__cat { font-size: var(--card-cat-size-mobile, 28px) !important; }
}
.carousel__badge { z-index: 3; transition: opacity 0.25s ease; }
.carousel__img-wrap { position: relative; z-index: 1; transition: opacity 0.4s ease; }

/* ========== Image lifestyle (alt) : overlay complet de la card au hover ========== */
.carousel__img-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.55s cubic-bezier(0.7, 0, 0.3, 1),
              transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
}

/* ========== Info bar : FLAT, directement sur la card (style Rhode) ========== */
.carousel__info {
  font-family: var(--font-ui);
  position: relative;
  z-index: 2;
  transition: opacity 0.3s ease;
  padding: 20px 22px 22px !important;
  gap: 4px !important;
}
.carousel__stars { font-size: 13px; }
.carousel__name { font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.carousel__price { font-size: 20px !important; font-weight: 700 !important; }
.carousel__desc { font-size: 17px !important; font-weight: 400 !important; margin-top: 2px; }

/* ========== Bouton ACHETER : overlay pill en bas au hover ========== */
.carousel__slide .carousel__cart-btn,
.carousel__slide:hover .carousel__cart-btn,
.carousel__slide .carousel__cart-btn:hover,
.carousel__slide:hover .carousel__cart-btn:hover {
  background: #ffffff !important;
  color: #1a1a1a !important;
}
.carousel__cart-btn {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  margin: 0 !important;
  max-height: none !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 17px 22px !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  opacity: 0;
  transform: translateY(calc(100% + 30px));
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.7, 0, 0.3, 1) 0.1s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1) 0.1s !important;
  z-index: 5;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.carousel__cart-btn-label,
.carousel__cart-btn-price { color: #1a1a1a !important; }
.carousel__cart-btn-label {
  font-weight: 500 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  text-align: center;
}
.carousel__cart-btn-price {
  font-weight: 700 !important;
  flex-shrink: 0;
}

/* ========== Mode grille — layout only, tout le reste hérite du carrousel ========== */
.carousel--grid { overflow: visible; }
.carousel--grid .carousel__track {
  display: grid !important;
  grid-template-columns: repeat(var(--cols-desktop, 3), 1fr);
  gap: 20px;
  transform: none !important;
}
.carousel--grid .carousel__slide {
  flex: unset !important;
  width: 100% !important;
  min-width: 0;
}
.carousel--grid .carousel__arrow { display: none !important; }

/* Mobile : 2 cols par défaut */
@media (max-width: 768px) {
  .carousel--grid .carousel__track {
    grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
    gap: 10px;
  }
}

/* ============================================================
   MOBILE — Layout produit Rhode-style : aligné à gauche,
   titre + prix sur une ligne, sous-titre, CTA pill pleine largeur
   ============================================================ */
@media (max-width: 768px) {
  /* Gap entre cards plus généreux */
  .carousel--grid .carousel__track {
    gap: 12px !important;
  }

  /* Card : overflow hidden pour arrondir propre */
  .carousel--grid .carousel__slide {
    overflow: hidden;
  }

  /* Catégorie label : très discret, en mini-badge en haut à gauche */
  .carousel--grid .carousel__cat {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.55 !important;
    top: 16px !important;
    left: 16px !important;
    line-height: 1 !important;
    z-index: 4 !important;
    pointer-events: none;
  }

  /* ===== Info bloc ===== */
  .carousel__info {
    padding: 14px 16px 4px !important;
    gap: 6px !important;
    text-align: left !important;
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ===== Étoiles : alignées à gauche, gris foncé, avis collé ===== */
  .carousel__stars {
    justify-content: flex-start !important;
    align-items: center !important;
    display: inline-flex !important;
    gap: 4px !important;
    font-size: 13px !important;
    color: #4a4a48 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
  }
  .carousel__stars span {
    color: #8a8a85 !important;
    font-size: 12px !important;
    margin-left: 2px;
  }

  /* ===== Titre + prix sur la même ligne (space-between) ===== */
  .carousel__row {
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100%;
  }
  .carousel__name {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-align: left !important;
    line-height: 1.2 !important;
    color: #1a1a1a !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Prix retiré du haut — il reste uniquement dans le bouton CTA */
  .carousel__row .carousel__price {
    display: none !important;
  }

  /* ===== Sous-titre / description courte visible ===== */
  .carousel__desc {
    display: block !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #6a6a65 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-transform: none !important;
    margin-top: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* ===== CTA "BUY [name] — prix" : pill pleine largeur ===== */
  .carousel__cart-btn,
  .carousel__slide .carousel__cart-btn,
  .carousel__slide:hover .carousel__cart-btn {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    background: transparent !important;
    color: #1a1a1a !important;
    border: 1px solid #cfcdc7 !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    padding: 11px 14px !important;
    margin: 2px 0 14px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    width: 100% !important;
    max-width: none !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap;
    overflow: hidden !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }
  .carousel__cart-btn-label {
    font-weight: 600 !important;
    color: #1a1a1a !important;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
  }
  .carousel__cart-btn-price {
    font-weight: 700 !important;
    color: #1a1a1a !important;
    flex-shrink: 0;
  }
  /* Nom produit dans le bouton — visible sur mobile (était caché) */
  .carousel__cart-btn-product {
    display: inline !important;
    font-weight: 600 !important;
  }

  /* Tap feedback */
  .carousel__cart-btn:active { background: #1a1a1a !important; color: #fff !important; border-color: #1a1a1a !important; }
  .carousel__cart-btn:active .carousel__cart-btn-label,
  .carousel__cart-btn:active .carousel__cart-btn-price { color: #fff !important; }

  /* Sur touch : pas de hover, garder info + image visibles */
  .carousel__slide .carousel__info,
  .carousel__slide:hover .carousel__info {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Badge "new" : léger repositionnement */
  .carousel--grid .carousel__badge {
    top: 16px !important;
    right: 16px !important;
    font-size: 10px !important;
    padding: 4px 10px !important;
    letter-spacing: 0.04em !important;
  }
}

/* ========== État hover ========== */
/* Hover state — driven by JS class .is-hovered (fallback for hover-detection issues) */
.carousel__slide { transition: box-shadow 0.4s ease; }
.carousel__slide.is-hovered .carousel__img-alt,
.carousel__slide:hover .carousel__img-alt { opacity: 1; transform: scale(1); }
.carousel__slide.is-hovered .carousel__img-wrap,
.carousel__slide:hover .carousel__img-wrap { opacity: 0; transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
.carousel__slide.is-hovered .carousel__badge,
.carousel__slide:hover .carousel__badge { opacity: 0; transition: opacity 0.3s ease; }
.carousel__slide.is-hovered .carousel__info,
.carousel__slide:hover .carousel__info {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.carousel__slide.is-hovered .carousel__cart-btn,
.carousel__slide:hover .carousel__cart-btn {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}

/* Disable hover swap on touch-only devices (no mouse) */
@media (hover: none) and (pointer: coarse) {
  /* HARD KILL : alt image and cart button cannot exist visually on touch */
  .carousel__slide .carousel__img-alt { display: none !important; visibility: hidden !important; opacity: 0 !important; }
  .carousel__slide .carousel__cart-btn { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
  /* Force main image always fully visible */
  .carousel__slide .carousel__img-wrap,
  .carousel__slide.is-hovered .carousel__img-wrap,
  .carousel__slide:hover .carousel__img-wrap,
  .carousel__slide:active .carousel__img-wrap,
  .carousel__slide:focus .carousel__img-wrap { opacity: 1 !important; visibility: visible !important; transition: none !important; }
  .carousel__slide .carousel__img-wrap img { opacity: 1 !important; visibility: visible !important; }
  /* Keep info + badge always visible on touch */
  .carousel__slide .carousel__info { opacity: 1 !important; pointer-events: auto !important; }
  .carousel__slide .carousel__badge { opacity: 1 !important; }
}
/* (Removed @supports (-webkit-touch-callout) block — it also matched macOS Safari and broke desktop hover) */


/* === Dot pagination (Rhode-style) === */
.carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 28px auto 0;
  padding: 8px 12px;
  flex-wrap: nowrap;
  max-width: 92%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__dots::-webkit-scrollbar { display: none; }

.carousel__dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  padding: 0;
  background: rgba(0, 0, 0, 0.18);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.7, 0, 0.3, 1),
              height 0.35s cubic-bezier(0.7, 0, 0.3, 1),
              background 0.25s ease,
              transform 0.25s ease;
  outline: none;
  position: relative;
}
/* Click hit area extends beyond visible dot */
.carousel__dot::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
}
.carousel__dot:hover {
  background: rgba(0, 0, 0, 0.45);
  transform: scale(1.2);
}
.carousel__dot.is-visible {
  background: rgba(0, 0, 0, 0.45);
}
.carousel__dot.is-active {
  width: 10px;
  height: 10px;
  background: #1a1a1a;
}
.carousel__dot:focus-visible {
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.18);
}

@media (max-width: 768px) {
  .carousel__dots { gap: 6px; margin: 22px auto 0; }
  .carousel__dot { width: 4px; height: 4px; }
  .carousel__dot.is-active { width: 8px; height: 8px; }
}

/* Hide dots in grid mode */
.carousel--grid .carousel__dots { display: none; }


/* === Navigation arrows (desktop) === */
.carousel {
  position: relative;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* === Track : optimisation GPU pour le slide style Rhode === */
.carousel:not(.carousel--grid) .carousel__track {
  will-change: transform;
}
@media (min-width: 769px) {
  .carousel:not(.carousel--grid) .carousel__img-wrap {
    aspect-ratio: 1 / 1.15;
    overflow: hidden;
  }
  .carousel:not(.carousel--grid) .carousel__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
.carousel__nav-arrow {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(92, 92, 82, 0.20);
  background: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #5c5c52;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transform: translateY(-50%) scale(1);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              opacity 0.3s ease,
              color 0.25s ease;
  opacity: 1;
  pointer-events: auto;
}
.carousel__nav-arrow svg {
  width: 18px;
  height: 18px;
}
.carousel__nav-arrow--prev { left: 16px; }
.carousel__nav-arrow--next { right: 16px; }

/* Arrows: always visible on desktop */

.carousel__nav-arrow:hover {
  background: #5c5c52;
  border-color: #5c5c52;
  color: #ffffff;
  transform: translateY(-50%) scale(1.06);
}

/* Click feedback */
.carousel__nav-arrow:active {
  transform: translateY(-50%) scale(0.92);
  transition: transform 0.12s ease;
}

.carousel__nav-arrow.disabled { /* always enabled in infinite mode */ }

/* Arrow ripple (subtle pulse on click) */
.carousel__nav-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.5s ease;
}
.carousel__nav-arrow:active::before {
  opacity: 0.18;
  transform: scale(1.5);
  transition: 0s;
}

/* Hide arrows on mobile */
@media (max-width: 768px) {
  .carousel__nav-arrow { display: none !important; }
}

/* Hide dots on desktop, show on mobile */
.carousel__dots { display: none; }
@media (max-width: 768px) {
  /* === Style: décoratif (ligne de dots full-width comme Rhode) === */
  .carousel--dots-decorative .carousel__dots {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 8px;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    position: relative;
    overflow: hidden !important;
    background-image: radial-gradient(circle, rgba(0,0,0,0.65) 3px, transparent 3.5px);
    background-size: calc(100% / var(--mobile-dots-count, 25)) 8px;
    background-position: 0 center;
    background-repeat: repeat-x;
  }
  .carousel--dots-decorative .carousel__dot { display: none !important; }

  /* === Style: fonctionnel (un dot par produit, cliquable) === */
  .carousel--dots-functional .carousel__dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 22px auto 0;
    padding: 8px 0;
    flex-wrap: nowrap;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    background: none;
  }

  /* === Style: masqué === */
  .carousel--dots-none .carousel__dots { display: none !important; }

}

/* Hide both in grid mode */
.carousel--grid .carousel__nav-arrow,
.carousel--grid .carousel__dots { display: none !important; }


/* === Whitespace fix: no gap below carousel on desktop === */
@media (min-width: 769px) {
  .carousel__dots { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; }
  .carousel { padding-bottom: 0 !important; }
}

/* Hide cloned slides from screen readers */
.carousel__slide.is-clone { aria-hidden: true; }

/* Better arrow spacing on larger screens */
@media (min-width: 1200px) {
  .carousel__nav-arrow--prev { left: 8px; }
  .carousel__nav-arrow--next { right: 8px; }
}

.carousel__img-wrap img {
  transform: scale(1.09) !important;



/* Titres de cards : visibles (réglés via section.settings.card_title_X) */
/* END_SECTION:product-carousel */

/* START_SECTION:search (INDEX:28) */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
/* END_SECTION:search */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:38) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:39) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image (INDEX:44) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */