/** Shopify CDN: Minification failed

Line 1533:9 Expected ":"

**/
/* ==========================================================================
   NYLLEA DESIGN SYSTEM — surcouche moderne sur Shrine Pro (base Dawn)
   Chargé APRÈS base.css. Ne modifie jamais base.css directement.
   Marque : beige #CBB89D (accent-1) · vert sauge #7E9B8A (accent-2) · noir #2B2B2B
   Cible : femmes 45-64 ans, mobile Facebook → lisibilité, réassurance, douceur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Palette sémantique (dérivée des settings existants, en RGB pour rgba) */
  --ny-beige: 203, 184, 157;      /* #CBB89D */
  --ny-sage: 126, 155, 138;       /* #7E9B8A */
  --ny-ink: 43, 43, 43;           /* #2B2B2B */
  --ny-beige-soft: 247, 243, 236; /* #F7F3EC — fond doux */
  --ny-grey-soft: 247, 247, 247;  /* #F7F7F7 — dérivé de blanc (cards produit/FAQ) */
  --ny-sage-deep: 95, 143, 116;   /* #5F8F74 — sauge foncée (déjà utilisée drawer) */

  /* Échelle d'espacement fluide */
  --ny-space-2xs: clamp(0.4rem, 0.35rem + 0.25vw, 0.6rem);
  --ny-space-xs: clamp(0.8rem, 0.7rem + 0.5vw, 1.2rem);
  --ny-space-sm: clamp(1.2rem, 1rem + 0.75vw, 1.8rem);
  --ny-space-md: clamp(1.6rem, 1.3rem + 1.25vw, 2.8rem);
  --ny-space-lg: clamp(2.4rem, 1.9rem + 2vw, 4.4rem);
  --ny-space-xl: clamp(3.6rem, 2.8rem + 3vw, 6.4rem);

  /* Rayons harmonisés */
  --ny-radius-sm: 8px;
  --ny-radius-md: 14px;
  --ny-radius-lg: 20px;
  --ny-radius-pill: 999px;

  /* Ombres douces 2 couches, teintées encre/sauge (jamais noir pur) */
  --ny-shadow-sm: 0 1px 2px rgba(var(--ny-ink), 0.06), 0 2px 8px rgba(var(--ny-ink), 0.05);
  --ny-shadow-md: 0 2px 6px rgba(var(--ny-ink), 0.07), 0 10px 24px rgba(var(--ny-ink), 0.07);
  --ny-shadow-lg: 0 4px 10px rgba(var(--ny-ink), 0.08), 0 18px 40px rgba(var(--ny-ink), 0.10);
  --ny-shadow-cta: 0 6px 16px rgba(var(--ny-ink), 0.18);

  /* Mouvement */
  --ny-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ny-dur-fast: 160ms;
  --ny-dur: 260ms;
  --ny-dur-slow: 420ms;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHIE FLUIDE (clamp) — supprime les sauts 749/750px
   Les tailles inline par section (style="font-size:...") restent prioritaires.
   -------------------------------------------------------------------------- */
h1, .h1 { font-size: clamp(2.6rem, 2rem + 2.4vw, 4.2rem); line-height: 1.15; }
h2, .h2 { font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); line-height: 1.2; }
h3, .h3 { font-size: clamp(1.9rem, 1.65rem + 1vw, 2.4rem); line-height: 1.25; }
h4, .h4 { font-size: clamp(1.7rem, 1.55rem + 0.6vw, 2rem); }
h1, .h1, h2, .h2, h3, .h3 { text-wrap: balance; }
p, .rte { text-wrap: pretty; }

/* Confort de lecture senior : corps légèrement aéré */
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* --------------------------------------------------------------------------
   3. BOUTONS & CTA — plus « cliquables », hover premium, états accessibles
   -------------------------------------------------------------------------- */
.button,
.shopify-challenge__button,
button.shopify-payment-button__button--unbranded {
  transition:
    transform var(--ny-dur-fast) var(--ny-ease),
    box-shadow var(--ny-dur) var(--ny-ease),
    opacity var(--ny-dur-fast) var(--ny-ease);
  letter-spacing: 0.04em;
}

.button:not(.button--secondary):not([disabled]) {
  box-shadow: var(--ny-shadow-sm);
}

@media (hover: hover) {
  .button:not([disabled]):hover {
    transform: translateY(-2px);
    box-shadow: var(--ny-shadow-cta);
  }
}

.button:not([disabled]):active {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--ny-shadow-sm);
  transition-duration: 80ms;
}

/* Focus visible net (a11y senior) — anneau sauge */
.button:focus-visible,
.field__input:focus-visible,
.select__select:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(var(--ny-sage), 0.9) !important;
  outline-offset: 2px;
  box-shadow: none;
}

/* Cible tactile confortable */
.button { min-height: 4.6rem; }

/* --------------------------------------------------------------------------
   4. CARTES (produit / collection / blog / contenu) — profondeur douce unifiée
   -------------------------------------------------------------------------- */
.card-wrapper .card,
.card--card,
.article-card {
  transition: transform var(--ny-dur) var(--ny-ease), box-shadow var(--ny-dur) var(--ny-ease);
}

@media (hover: hover) {
  .card-wrapper:hover .card--card,
  .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-4px);
    box-shadow: var(--ny-shadow-md);
  }
}


::selection {
  background: rgba(var(--ny-beige), 0.55);
  color: rgb(var(--ny-ink));
}

/* --------------------------------------------------------------------------
   6. BADGES & PILLS — cohérence de rayon, sauge en badge promo
   -------------------------------------------------------------------------- */
.badge {
  border-radius: var(--ny-radius-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   7. FORMULAIRES — champs plus doux, focus sauge
   -------------------------------------------------------------------------- */
.field__input,
.select__select,
.customer .field input {
  transition: border-color var(--ny-dur-fast) var(--ny-ease), box-shadow var(--ny-dur-fast) var(--ny-ease);
}

.field__input:focus,
.select__select:focus {
  box-shadow: 0 0 0 3px rgba(var(--ny-sage), 0.25);
}

/* --------------------------------------------------------------------------
   8. IMAGES & MÉDIA — rendu soigné
   -------------------------------------------------------------------------- */
.media img { transition: transform var(--ny-dur-slow) var(--ny-ease); }

@media (hover: hover) {
  .card-wrapper:hover .media img { transform: scale(1.03); }
}

/* --------------------------------------------------------------------------
   9. DÉTAILS DE FINITION
   -------------------------------------------------------------------------- */
/* Scrollbar discrète teinte marque */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--ny-ink), 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--ny-ink), 0.55); }

/* Séparateurs plus doux */
hr { border: 0; border-top: 1px solid rgba(var(--ny-ink), 0.1); }


/* --------------------------------------------------------------------------
   10. ACCESSIBILITÉ MOUVEMENT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   NYLLEA DS — HEADER & FOOTER (announcement-bar, header, ticker, footer)
   Surcouche chargée APRÈS base.css et nyllea-design-system.css.
   Sélecteurs réels des sections Shrine Pro — aucun sélecteur inventé.
   Mobile d'abord. Tokens : --ny-* (définis dans nyllea-design-system.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ANNOUNCEMENT BAR — propre, lisible, bouton code promo soigné
   -------------------------------------------------------------------------- */
.announcement-bar__message {
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Bouton "copier le code" : vraie affordance de bouton */
.announcement-bar__discount {
  gap: var(--ny-space-2xs);
  box-shadow: var(--ny-shadow-sm);
  transition:
    box-shadow var(--ny-dur) var(--ny-ease),
    transform var(--ny-dur-fast) var(--ny-ease);
  min-height: 4.4rem;
}

@media (hover: hover) {
  .announcement-bar__discount:hover {
    box-shadow: var(--ny-shadow-md);
    transform: translateY(-1px);
  }
}

.announcement-bar__discount:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}

.announcement-bar__discount.success .announcement-bar__discount__success {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   2. HORIZONTAL TICKER — bords fondus, pause au survol
   -------------------------------------------------------------------------- */
.horizontal-ticker {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.horizontal-ticker__item {
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (hover: hover) {
  .horizontal-ticker:hover .horizontal-ticker__container {
    animation-play-state: paused;
  }
}

/* --------------------------------------------------------------------------
   3. HEADER SHELL — ombre douce au scroll (classes posées par StickyHeader JS)
   -------------------------------------------------------------------------- */
.header-wrapper {
  transition: box-shadow var(--ny-dur) var(--ny-ease);
}

/* .scrolled-past-header / .shopify-section-header-sticky sont ajoutées sur
   .section-header (classe du schema) par le JS de la section header */
.section-header.scrolled-past-header .header-wrapper,
.section-header.shopify-section-header-sticky .header-wrapper {
  box-shadow: var(--ny-shadow-md);
}

/* La bordure basse devient plus discrète quand l'ombre prend le relais */
.section-header.scrolled-past-header .header-wrapper--border-bottom {
  border-bottom-color: rgba(var(--ny-ink), 0.06);
}

/* Le badge actif "v2" (pill avec color scheme) : rayon harmonisé */
.header__active-menu-item-v2 {
  border-radius: var(--ny-radius-pill);
}

/* --------------------------------------------------------------------------
   5. SOUS-MENUS (dropdown + mega) — panneaux flottants doux
   -------------------------------------------------------------------------- */
.header__submenu.global-settings-popup {
  border-radius: var(--ny-radius-md);
  box-shadow: var(--ny-shadow-lg);
  border: 1px solid rgba(var(--ny-ink), 0.06);
}

.header__submenu .header__menu-item {
  transition: color var(--ny-dur-fast) var(--ny-ease), background-color var(--ny-dur-fast) var(--ny-ease);
}

@media (hover: hover) {
  .header__submenu .header__menu-item:hover {
    
  }
}

.mega-menu__content {
  box-shadow: var(--ny-shadow-lg);
  border-bottom: 1px solid rgba(var(--ny-ink), 0.06);
}

.mega-menu__link {
  transition: color var(--ny-dur-fast) var(--ny-ease);
}

@media (hover: hover) {
  .mega-menu__link:hover {
    
  }
}

.mega-menu__link--active {
  
}

/* --------------------------------------------------------------------------
   6. ICÔNES HEADER — cibles tactiles ≥44px, feedback net, bulle panier marque
   -------------------------------------------------------------------------- */
.header__icon {
  min-width: 4.4rem;
  min-height: 4.4rem;
}

.header__icon .icon {
  transition: transform var(--ny-dur-fast) var(--ny-ease);
}

@media (hover: hover) {
  .header__icon:hover .icon {
    transform: scale(1.08);
  }
}

/* --------------------------------------------------------------------------
   7. DRAWER MOBILE — lisible, aéré, cibles tactiles confortables
   -------------------------------------------------------------------------- */
.menu-drawer {
  box-shadow: var(--ny-shadow-lg);
}

.menu-drawer__title {
  letter-spacing: 0.02em;
}

.menu-drawer__title-and-close-btn {
  padding-top: var(--ny-space-xs);
  padding-bottom: var(--ny-space-xs);
  border-bottom: 1px solid rgba(var(--ny-ink), 0.08);
}

.menu-drawer__close-btn {
  min-width: 4.4rem;
  min-height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-drawer__menu-item {
  min-height: 4.4rem;
  font-size: 1.7rem;
  line-height: 1.4;
  transition: background-color var(--ny-dur-fast) var(--ny-ease), color var(--ny-dur-fast) var(--ny-ease);
}

.menu-drawer__menu-item:hover {
  background-color: rgba(var(--ny-ink), 0.05);
}

/* Élément actif : filet sauge à gauche, fond doux */
.menu-drawer__menu-item--active {
  
  
  font-weight: 600;
}

.menu-drawer__close-button {
  min-height: 4.4rem;
}

.menu-drawer__utility-links {
  border-top: 1px solid rgba(var(--ny-ink), 0.08);
}

.menu-drawer__account {
  min-height: 4.4rem;
}

/* Icônes sociales du drawer : cibles 44px */
.menu-drawer .list-social__link {
  min-width: 4.4rem;
  min-height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   8. FOOTER — hiérarchie claire, colonnes aérées, bas de page discret
   -------------------------------------------------------------------------- */
.footer__content-top {
  padding-top: var(--ny-space-lg);
  padding-bottom: var(--ny-space-md);
}

.footer__blocks-wrapper {
  row-gap: var(--ny-space-md);
}

/* Titres de colonnes : petit filet sauge = repère visuel */
.footer-block__heading {
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: var(--ny-space-xs);
}

/* Liens des menus footer : espacés, hover noir (comme le shop d'origine), cible tactile correcte */
.footer-block--menu .list-menu__item--link {
  min-height: 4.4rem;
  align-items: center;
  transition: color var(--ny-dur-fast) var(--ny-ease);
  text-underline-offset: 0.25em;
}

@media (hover: hover) {
  .footer-block--menu .list-menu__item--link:hover {
    color: rgb(var(--ny-ink));
  }
}

@media screen and (min-width: 750px) {
  .footer-block--menu .list-menu__item--link {
    min-height: 3.6rem;
  }
}

/* Newsletter : champ et bouton harmonisés au design system */
.footer__newsletter .field__input {
  border-radius: var(--ny-radius-md);
}

.newsletter__solid-btn {
  border-radius: var(--ny-radius-md);
  margin-top: var(--ny-space-xs);
}

/* Icônes sociales footer : cibles 44px + hover sauge */
.footer .list-social__link {
  min-width: 4.4rem;
  min-height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--ny-dur-fast) var(--ny-ease), transform var(--ny-dur-fast) var(--ny-ease);
}

@media (hover: hover) {
  .footer .list-social__link:hover {
    color: rgb(var(--ny-ink));
    transform: translateY(-2px);
  }
}

/* Bas de footer : séparation douce, texte secondaire apaisé */
.footer__content-bottom {
  border-top: 1px solid rgba(var(--ny-ink), 0.08);
  padding-top: var(--ny-space-sm);
}

.footer__content-bottom-wrapper {
  row-gap: var(--ny-space-xs);
}

.footer__copyright {
  line-height: 1.6;
}

.copyright__content {
  opacity: 0.75;
}

.copyright__content a {
  text-underline-offset: 0.25em;
  transition: color var(--ny-dur-fast) var(--ny-ease);
}

@media (hover: hover) {
  .copyright__content a:hover {
    color: rgb(var(--ny-ink));
    opacity: 1;
  }
}

/* Liens des politiques (CGV, confidentialité…) : cible tactile suffisante */
.policies li a {
  display: inline-block;
  padding: 0.6rem 0;
}

/* Sélecteurs pays / langue : panneau flottant doux */
.footer .disclosure__list-wrapper {
  border-radius: var(--ny-radius-md);
  box-shadow: var(--ny-shadow-lg);
  border: 1px solid rgba(var(--ny-ink), 0.06);
}

.footer .disclosure__button {
  min-height: 4.4rem;
}

/* Icônes de paiement : alignées, sobres */
.list-payment__item svg {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(var(--ny-ink), 0.10);
}

/* --------------------------------------------------------------------------
   9. FOCUS VISIBLE — renfort local (le global est dans nyllea-design-system)
   -------------------------------------------------------------------------- */
.header__icon:focus-visible,
.menu-drawer__menu-item:focus-visible,
.menu-drawer__close-btn:focus-visible,
.menu-drawer__close-button:focus-visible,
.announcement-bar__discount:focus-visible,
.footer .disclosure__button:focus-visible,
.newsletter__solid-btn:focus-visible {
  outline: 3px solid rgba(var(--ny-sage), 0.9);
  outline-offset: 2px;
}

/* ==========================================================================
   NYLLEA DS — PAGE D'ACCUEIL (polish moderne des sections de templates/index.json)
   Charger APRÈS nyllea-design-system.css (tokens --ny-* requis).
   Sections couvertes : image-banner, multicolumn, featured-collection,
   image-with-text, comparison-slider, collapsible-content, contact-form.
   Sélecteurs vérifiés dans sections/*.liquid + assets/base.css + snippets/card-product.liquid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — image-banner
   Réglages réels : show_text_box=false → .banner--desktop-transparent,
   texte blanc, overlay 30% (#Banner-xxx::after), contenu bottom-left desktop /
   center mobile.
   -------------------------------------------------------------------------- */

/* L'overlay plat noir devient un dégradé doux, plus dense là où vit le texte
   (bas de bannière). L'opacité reste pilotée par le réglage admin (inline). */
/* Lisibilité du texte blanc posé sur photo (cible senior) */
.banner--desktop-transparent .banner__heading,
.banner--desktop-transparent .banner__text {
  
}

.banner__heading {
  letter-spacing: 0.01em;
}

/* Respiration entre heading / texte / boutons */
.banner__box > * + * {
  margin-top: var(--ny-space-sm);
}

/* CTA hero : vraie affordance de bouton principal */
.banner__buttons .button--primary {
  box-shadow: var(--ny-shadow-cta);
  min-width: 22rem;
  font-weight: 700;
}

@media screen and (max-width: 749px) {
  /* Mobile FB : le CTA prend la largeur, pouce-friendly */
  .banner__buttons {
    
    max-width: 40rem;
  }
  .banner__buttons .button--primary {
    
  }
  .banner__box {
    padding-bottom: var(--ny-space-md);
  }
}

/* --------------------------------------------------------------------------
   2. MULTICOLUMN — « Miért minket válasszon » (4 cartes beiges, 2 col mobile)
   Classes réelles : .multicolumn-card (+ __image-wrapper, __info), .splide__slide.
   -------------------------------------------------------------------------- */
.multicolumn .multicolumn-card {
  border-radius: var(--ny-radius-md);
  overflow: hidden;
  box-shadow: var(--ny-shadow-sm);
  transition: transform var(--ny-dur) var(--ny-ease), box-shadow var(--ny-dur) var(--ny-ease);
  height: 100%;
}

@media (hover: hover) {
  .multicolumn .multicolumn-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ny-shadow-md);
  }
}

/* L'image suit le rayon de la carte (ratio square, pleine largeur) */
.multicolumn .multicolumn-card__image-wrapper .media img,
.multicolumn .multicolumn-card__image-wrapper .media {
  border-radius: 0; /* la carte clippe déjà via overflow:hidden */
}

/* Titres et texte de carte : tailles confortables 45-64 ans */
.multicolumn .multicolumn-card__info h3 {
  font-size: clamp(1.6rem, 1.45rem + 0.6vw, 2rem);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.multicolumn .multicolumn-card__info .rte,
.multicolumn .multicolumn-card__info .rte p {
  font-size: clamp(1.4rem, 1.3rem + 0.4vw, 1.6rem);
  line-height: 1.55;
}

/* 2 colonnes mobile : padding interne compacté mais lisible */
@media screen and (max-width: 749px) {
  .multicolumn .multicolumn-card__info {
    padding: 1.4rem 1.4rem 1.8rem;
  }
}

/* Espace sous le titre de section */
.multicolumn .title-wrapper-with-link {
  margin-bottom: var(--ny-space-md);
}

/* --------------------------------------------------------------------------
   3. FEATURED COLLECTION — product-cards (snippet card-product : .card-wrapper,
   .card__inner, .card__content, .card__heading, .card-information, .price)
   Section actuellement désactivée dans index.json — prête si réactivée.
   -------------------------------------------------------------------------- */
.collection .card-wrapper .card {
  border-radius: var(--ny-radius-md);
}

.collection .card-wrapper .card__inner {
  border-radius: var(--ny-radius-md);
  overflow: hidden;
}

.collection .card__heading {
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.8rem);
  line-height: 1.35;
}

.collection .card__heading .full-unstyled-link {
  text-underline-offset: 0.25em;
}

.collection .card-information .price {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.collection .card__content {
  padding-top: 1rem;
}

/* Bouton « voir tout » : même langage que le CTA hero */
.collection .collection__view-all {
  margin-top: var(--ny-space-md);
}

.collection .collection__view-all .button {
  box-shadow: var(--ny-shadow-cta);
  min-width: 22rem;
}

/* Titre + description de section */
.collection .collection__title {
  margin-bottom: var(--ny-space-md);
}

.collection .collection__description {
  margin-top: var(--ny-space-xs);
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.7rem);
}

/* --------------------------------------------------------------------------
   4. IMAGE WITH TEXT — « A MI TÖRTÉNETÜNK » (storytelling Luna)
   Classes réelles : .image-with-text__media / __content / __heading / __text.
   -------------------------------------------------------------------------- */
.image-with-text__media {
  border-radius: var(--ny-radius-lg);
  overflow: hidden;
  box-shadow: var(--ny-shadow-sm);
}

.image-with-text__content {
  padding: var(--ny-space-lg) var(--ny-space-md);
  gap: 0; /* on gère la respiration via margins ci-dessous */
}

.image-with-text__content > * + * {
  margin-top: var(--ny-space-sm);
}

.image-with-text__heading {
  margin-bottom: 0;
  letter-spacing: 0.01em;
}

/* Longueur de ligne + interligne confort lecture */
.image-with-text__text.rte,
.image-with-text__text.rte p {
  max-width: 62ch;
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.7rem);
  line-height: 1.7;
}

@media screen and (max-width: 749px) {
  .image-with-text__content {
    padding: var(--ny-space-md) var(--ny-space-sm);
  }
}

/* --------------------------------------------------------------------------
   5. COMPARISON SLIDER — avant/après
   Classes réelles : comparison-slider (élément), __overlay, __underlay,
   __line (--circle), __arrow-left/right, __before-text, __after-text, __input.
   Remplace proprement le custom_css admin (radius 30px bricolé).
   -------------------------------------------------------------------------- */
comparison-slider.comparison-slider {
  border-radius: var(--ny-radius-lg);
  overflow: hidden;
  box-shadow: var(--ny-shadow-md);
}

comparison-slider .comparison-slider__overlay,
comparison-slider .comparison-slider__underlay,
comparison-slider img {
  border-radius: inherit;
}

/* Ligne + poignée : blanc net avec ombre douce, lisible sur toute photo */
comparison-slider .comparison-slider__line {
  filter: drop-shadow(0 1px 4px rgba(var(--ny-ink), 0.35));
}

/* Étiquettes avant/après en pastilles pill */
comparison-slider .comparison-slider__before-text,
comparison-slider .comparison-slider__after-text {
  border-radius: var(--ny-radius-pill);
  box-shadow: var(--ny-shadow-sm);
}

comparison-slider .comparison-slider__before-text h3,
comparison-slider .comparison-slider__after-text h3 {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Focus clavier visible sur le range (a11y) */
comparison-slider .comparison-slider__input:focus-visible {
  outline: 3px solid rgba(var(--ny-sage), 0.9);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. COLLAPSIBLE CONTENT — FAQ (accordéons)
   Classes réelles : .accordion, .accordion__details, .accordion__summary,
   .summary__title, .accordion__title, .accordion__content-wrapper/__content,
   icône .icon-caret (rotation 180° déjà gérée par base.css sur [open]).
   -------------------------------------------------------------------------- */
.collapsible-content .accordion {
  border-bottom: 1px solid rgba(var(--ny-ink), 0.12);
}

.collapsible-content .accordion--top-border:first-of-type,
.collapsible-content .accordion.accordion--top-border {
  border-top-color: rgba(var(--ny-ink), 0.12);
}

.collapsible-content .accordion__summary {
  padding: 1.8rem 0.2rem;
  gap: 1.2rem;
  transition: color var(--ny-dur-fast) var(--ny-ease);
}

@media (hover: hover) {
  .collapsible-content .accordion__summary:hover {
    
  }
}

/* Question : taille confortable, pas de casse au milieu d'un mot */
.collapsible-content .accordion__title {
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.8rem);
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Chevron : rotation animée (base.css fait le rotate(180deg) à l'ouverture) */
/* Réponse : interligne + contraste de lecture */
.collapsible-content .accordion__content.rte {
  font-size: clamp(1.4rem, 1.35rem + 0.3vw, 1.6rem);
  line-height: 1.7;
  padding-bottom: 2rem;
  max-width: 70ch;
}

/* Ouverture plus feutrée que le 0.2s ease-in-out d'origine */
.collapsible-content .accordion__content-wrapper {
  transition: grid-template-rows var(--ny-dur) var(--ny-ease);
}

.collapsible-content .collapsible-content__header {
  margin-bottom: var(--ny-space-md);
}

/* --------------------------------------------------------------------------
   7. CONTACT FORM
   Classes réelles : .contact, .contact__fields, .field, .field__input,
   .field__label, .text-area, .contact__button.
   -------------------------------------------------------------------------- */
.contact .field__input {
  border-radius: var(--ny-radius-sm);
  font-size: 1.6rem; /* évite aussi le zoom auto iOS (<16px) */
}

.contact .field {
  margin-bottom: 1.8rem;
}

.contact .text-area {
  min-height: 14rem;
  line-height: 1.6;
}

.contact__button {
  margin-top: var(--ny-space-sm);
}

.contact__button .button {
  box-shadow: var(--ny-shadow-cta);
  font-weight: 700;
}

.contact .title {
  margin-bottom: var(--ny-space-md);
}

/* Message succès / erreur : plus visibles */
.contact .form__message {
  font-size: 1.5rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. GARDE-FOU MOUVEMENT (redondant avec le DS mais autonome si chargé seul)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .multicolumn .multicolumn-card,
.multicolumn .multicolumn-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   NYLLEA DS — PAGE PRODUIT (surcouche, chargée après nyllea-design-system.css)
   Périmètre : main-product (CSS only), image-slider, results, testimonials,
   rich-text, comparison-table, collapsible-content (FAQ), related-products.
   AUCUN sélecteur ne cible EasySell (COD form) ni Trustoo — apps intouchables.
   Sélecteurs vérifiés dans les fichiers liquid réels. Tokens : --ny-*.
   Mobile-first, lisibilité senior (femmes 45-64 ans).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BLOC INFOS PRODUIT — hiérarchie & respiration
   -------------------------------------------------------------------------- */

/* Titre produit : uppercase déjà géré par réglage — on affine le rendu */
.main-product__info-container .product__title h1 {
  letter-spacing: 0.02em;
  line-height: 1.18;
  text-wrap: balance;
}

/* Étoiles + label avis : label lisible mais secondaire */
.main-product__info-container .rating-stars__label {
  color: rgba(var(--ny-ink), 0.75);
  font-weight: 500;
}

/* Bullets bénéfices (blocs text + icône check_circle) :
   icône recolorée sauge (l'inline --icon-color est battu par la couleur
   posée directement sur l'icône), texte plus aéré */
.main-product__info-container .product__text-container .product__text {
  line-height: 1.45;
  align-items: flex-start;
}
/* Prix : présent mais discret (barré adouci, jamais agressif) */
.main-product__info-container .product-page-price .price--large {
  letter-spacing: 0.02em;
}
.main-product__info-container .price__compare-price .price-item--regular,
.main-product__info-container .price__sale .price-item--regular {
  color: rgba(var(--ny-ink), 0.45);
  text-decoration-thickness: 1px;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   2. ACCORDÉONS RÉASSURANCE (collapsible_tab du bloc infos)
   → cards douces au lieu de simples lignes bordées
   -------------------------------------------------------------------------- */
.main-product__info-container .product__accordion.accordion {
  background: rgb(var(--ny-grey-soft));
  border: 1px solid rgba(var(--ny-ink), 0.06);
  border-radius: var(--ny-radius-md);
  overflow: hidden;
  transition: box-shadow var(--ny-dur) var(--ny-ease);
}
/* neutralise la simple bordure haute d'origine (remplacée par la card) */
.main-product__info-container .product__accordion.accordion--top-border {
  border-top: 1px solid rgba(var(--ny-ink), 0.06);
}
.main-product__info-container .product__accordion .accordion__summary {
  padding: 1.3rem 1.5rem;
  transition: background-color var(--ny-dur-fast) var(--ny-ease);
}
@media (hover: hover) {
  .main-product__info-container .product__accordion .accordion__summary:hover {
    background-color: rgba(var(--ny-ink), 0.03);
  }
}
.main-product__info-container .product__accordion .accordion__content {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  line-height: 1.55;
}
/* espacement régulier entre deux cards accordéon consécutives */
.main-product__info-container .product__accordion.accordion + .product__accordion.accordion {
  margin-top: var(--ny-space-2xs);
}

/* --------------------------------------------------------------------------
   3. AVIS INLINE (bloc reviews du bloc infos) — card plus premium
   -------------------------------------------------------------------------- */
.main-product__info-container .review-items-container .review-item {
  box-shadow: var(--ny-shadow-sm);
  padding: 1.2rem 1.4rem 1.3rem;
}
.main-product__info-container .review-item__text p {
  line-height: 1.5;
  font-size: 1.45rem;
}
.main-product__info-container .review-item__author {
  border-top-color: rgba(var(--ny-ink), 0.08);
  color: rgba(var(--ny-ink), 0.6);
}

/* --------------------------------------------------------------------------
   4. GALERIE MÉDIA — radius existant (--media-radius) + ombre douce
   -------------------------------------------------------------------------- */
.product__media-wrapper .product__media-list .global-media-settings {
  box-shadow: var(--ny-shadow-md);
}

/* Vignettes : coins doux + anneau de sélection sauge (au lieu du noir dur) */
.thumbnail-list .thumbnail {
  border-radius: var(--ny-radius-sm);
  overflow: hidden;
  transition: opacity var(--ny-dur-fast) var(--ny-ease), box-shadow var(--ny-dur-fast) var(--ny-ease);
}
.thumbnail-list .thumbnail img {
  border-radius: inherit;
}
/* --------------------------------------------------------------------------
   5. VARIANT PICKER / PILLS / SELECT — modernisation défensive
   (la page PawRoll actuelle passe par EasySell ; ces règles couvrent
   les pickers du thème s'ils sont réactivés — aucun impact sinon)
   -------------------------------------------------------------------------- */
.product-form__input input[type='radio'] + label {
  border-radius: var(--ny-radius-pill);
  transition: background-color var(--ny-dur-fast) var(--ny-ease),
    color var(--ny-dur-fast) var(--ny-ease),
    box-shadow var(--ny-dur-fast) var(--ny-ease);
}
.product-form__input .select__select {
  border-radius: var(--ny-radius-sm);
}
.main-product__info-container .form__label {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   6. IMAGE/VIDEO SLIDER (preuve sociale vidéo sous le fold)
   -------------------------------------------------------------------------- */
.image-slide .image-slide__image.media {
  box-shadow: var(--ny-shadow-sm);
}

/* --------------------------------------------------------------------------
   7. RESULTS (stats % tulajdonosok) — card unifiée + accent sauge
   -------------------------------------------------------------------------- */
.content-and-results .results__rows-container {
  background: rgb(var(--ny-grey-soft));
  border: 1px solid rgba(var(--ny-ink), 0.05);
  border-radius: var(--ny-radius-md);
  box-shadow: var(--ny-shadow-sm);
  padding: var(--ny-space-sm) var(--ny-space-sm);
}
.content-and-results .results__row {
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(var(--ny-ink), 0.08);
}
.content-and-results .results__row:first-of-type {
  border-top: none;
  padding-top: 0.4rem;
}
.content-and-results .results__row:last-of-type {
  border-bottom: none;
  padding-bottom: 0.4rem;
}
/* anneaux de pourcentage : accent sauge marque (au lieu de l'accent scheme) */
.content-and-results .results__percentage::after {
  background: rgb(var(--ny-grey-soft));
}
.content-and-results .results__percentage p {
  font-size: 1.9rem;
}
.content-and-results .results__text {
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. TESTIMONIALS — cards unifiées (radius md, ombre sm, padding généreux)
   NB : compatibles avec le custom_css scale(0.7) posé dans product.json
   -------------------------------------------------------------------------- */
.multicolumn-card.testimonial-card {
  border-radius: var(--ny-radius-md);
  box-shadow: var(--ny-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ny-dur) var(--ny-ease);
}
.testimonial-card .multicolumn-card__info {
  padding: 1.5rem 2rem 2rem;
}
.testimonial-card .multicolumn-text {
  line-height: 1.5;
}
.testimonial-card__author-container {
  border-top-color: rgba(var(--ny-ink), 0.08);
}
.testimonial-card__author {
  color: rgba(var(--ny-ink), 0.65);
}

/* --------------------------------------------------------------------------
   9. COMPARISON TABLE — ombres adoucies (teinte encre, jamais noir pur)
   -------------------------------------------------------------------------- */
.comparison-table td {
  --outer-box-shadow: 0.2rem 0.3rem 1rem rgba(var(--ny-ink), 0.10),
    var(--border-shadow-offset) rgba(var(--ny-ink), 0.05);
}
.comparison-table .comparison-table__row-name h3 {
  font-weight: 600;
}
.comparison-table th {
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   10. FAQ (collapsible-content) — accordéons en cards modernes
   -------------------------------------------------------------------------- */
.collapsible-content .accordion.accordion--top-border {
  border-top: none;
}
.collapsible-content .grid__item .accordion {
  background: rgb(var(--ny-grey-soft));
  border: 1px solid rgba(var(--ny-ink), 0.06);
  border-radius: var(--ny-radius-md);
  overflow: hidden;
}
.collapsible-content .grid__item .accordion + .accordion {
  margin-top: var(--ny-space-xs);
}
.collapsible-content .accordion .accordion__summary {
  padding: 1.5rem 1.6rem;
  transition: background-color var(--ny-dur-fast) var(--ny-ease);
}
@media (hover: hover) {
  .collapsible-content .accordion .accordion__summary:hover {
    background-color: rgba(var(--ny-ink), 0.03);
  }
  .collapsible-content summary:hover .accordion__title {
    text-decoration: none;
  }
}
.collapsible-content .accordion .accordion__content {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  line-height: 1.55;
  color: rgba(var(--ny-ink), 0.85);
}
.collapsible-content .accordion__title {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. RELATED PRODUCTS — cohérence (cards gérées par le DS global)
   -------------------------------------------------------------------------- */
.related-products .related-products__heading {
  margin-bottom: var(--ny-space-sm);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   12. RICH-TEXT (titres d'intro de section, ex. "PawRoll™ vs …")
   -------------------------------------------------------------------------- */
.rich-text__heading {
  text-wrap: balance;
}
.rich-text__text {
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   13. CONFORT MOBILE (cible principale : mobile Facebook)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* bullets bénéfices légèrement plus lisibles sans casser le réglage inline */
  .main-product__info-container .product__text-container .product__text {
    line-height: 1.5;
  }
  /* accordéons : zone tactile généreuse */
  .main-product__info-container .product__accordion .accordion__summary,
  .collapsible-content .accordion .accordion__summary {
    min-height: 4.4rem;
  }
  /* card results : padding un peu plus compact sur petit écran */
  .content-and-results .results__rows-container {
    padding: var(--ny-space-xs) var(--ny-space-xs);
  }
  .content-and-results .results__percentage {
    margin-right: 1.4rem;
  }
}

/* ==========================================================================
   NYLLEA DS — PANIER + COLLECTION + PAGES UTILITAIRES
   Surcouche de polish. Chargé APRÈS base.css + nyllea-design-system.css.
   Tokens définis dans nyllea-design-system.css (--ny-*).
   Sélecteurs vérifiés dans : snippets/cart-drawer.liquid, sections/main-cart-*,
   main-collection-*, main-404, main-page, main-search, track-order,
   promo-popup, scroll-to-top-btn, email-signup-banner, newsletter, collage,
   snippets/text-with-icon-block, cart-discount-field, cart-progress-bar,
   pagination + config réelle (settings_data.json).
   Mobile-first — cibles tactiles >= 44px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TIROIR PANIER — structure & header
   -------------------------------------------------------------------------- */

/* Bord gauche adouci du panneau (desktop) + séparateurs plus légers */
.cart-drawer .drawer__inner {
  border-color: rgba(var(--ny-ink), 0.08);
  box-shadow: -12px 0 40px rgba(var(--ny-ink), 0.12);
}

.cart-drawer .drawer__header {
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid rgba(var(--ny-ink), 0.08);
}

.cart-drawer .drawer__heading {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Bouton fermer : cible 44px déjà assurée par base.css — feedback tactile doux */
.cart-drawer .drawer__close {
  justify-content: center;
  border-radius: var(--ny-radius-pill);
  transition: background-color var(--ny-dur-fast) var(--ny-ease),
    transform var(--ny-dur-fast) var(--ny-ease);
}

.cart-drawer .drawer__close:hover {
  background-color: rgba(var(--ny-ink), 0.05);
}

.cart-drawer .drawer__close:active {
  transform: translateY(-50%) scale(0.94);
}

.cart-drawer .cart-drawer__warnings .drawer__close:active {
  transform: scale(0.94);
}

/* Timer (bloc countdown_timer, scheme inverse) : bandeau net, chiffres lisibles */
.cart-drawer .cart-timer {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Barre de progression : rail plus doux, animation conservée */
.cart-drawer .cart-progress__bar {
  background-color: rgba(var(--ny-ink), 0.08);
}

/* --------------------------------------------------------------------------
   2. TIROIR PANIER — lignes produit aérées
   -------------------------------------------------------------------------- */

.cart-drawer .cart-drawer-item {
  padding: 1.4rem 0;
}

/* Séparateur léger entre les lignes produit */
.cart-drawer .cart-drawer-item + .cart-drawer-item {
  border-top: 1px solid rgba(var(--ny-ink), 0.07);
}

/* Vignette produit : rayon cohérent, ombre douce du DS */
.cart-drawer .cart-drawer-item .cart-item__image {
  border-radius: var(--ny-radius-sm);
  box-shadow: var(--ny-shadow-sm);
}

.cart-drawer .cart-drawer-item__right {
  padding-left: 1.4rem;
}

.cart-drawer .cart-drawer-item .cart-item__name {
  line-height: 1.3;
  font-weight: 700;
}

/* Économies ligne ("megtakarítás …") : discret mais lisible */
.cart-drawer .cart-drawer-item__saving {
  font-size: 1.3rem;
  opacity: 0.85;
}

/* Bouton supprimer : zone tactile élargie sans bouger la mise en page */
.cart-drawer .cart-drawer-item cart-remove-button .button {
  position: relative;
}

.cart-drawer .cart-drawer-item cart-remove-button .button::after {
  content: '';
  position: absolute;
  inset: -1.2rem;
}

/* Sélecteur de quantité : +/- confortables au pouce */
.cart-drawer .cart-drawer-item .quantity__button {
  min-width: 2em;
  min-height: 2em;
  transition: background-color var(--ny-dur-fast) var(--ny-ease);
}

.cart-drawer .cart-drawer-item .quantity__button:hover {
  background-color: rgba(var(--ny-ink), 0.05);
}

/* Prix ligne : l'accent beige reste, le barré s'efface */
.cart-drawer .cart-drawer-item .cart-item__old-price {
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   3. TIROIR PANIER — trust badges en cards douces beige-soft
   (3 blocs text_with_icon dans le body — textes hongrois non touchés)
   -------------------------------------------------------------------------- */

.cart-drawer__body > .product__text-container {
  background: rgb(var(--ny-grey-soft));
  border: 1px solid rgba(var(--ny-ink), 0.08);
  border-radius: var(--ny-radius-md);
  padding: 1.1rem 1.3rem;
  width: 100%;
}

/* Les cards s'enchaînent avec un petit gap régulier */
.cart-drawer__body > .product__text-container + .product__text-container {
  margin-top: -0.7rem;
}

.cart-drawer__body > .product__text-container .product__text {
  margin: 0;
  line-height: 1.35;
}

/* Badge avis étoiles (bloc custom_liquid .cart-rating-badge) : aligné sur les cards */
.cart-drawer__body > .cart-rating-badge {
  background: rgb(var(--ny-grey-soft));
  border: 1px solid rgba(var(--ny-ink), 0.08);
  border-radius: var(--ny-radius-md);
  padding: 1.1rem 1.3rem;
}

/* --------------------------------------------------------------------------
   4. TIROIR PANIER — footer : code promo, totaux, checkout, paiements
   -------------------------------------------------------------------------- */

.cart-drawer .drawer__footer {
  border-top: 1px solid rgba(var(--ny-ink), 0.1);
  box-shadow: 0 -6px 18px rgba(var(--ny-ink), 0.05);
}

/* Champ code promo (Kuponkód) : champ + bouton harmonisés, cible 44px+ */
.cart-drawer .cart-discount--bottom-separator {
  border-bottom-color: rgba(var(--ny-ink), 0.08);
}

.cart-drawer .cart-discount-form .field__input {
  border-radius: var(--ny-radius-sm);
}

.cart-drawer .cart-discount-form .button {
  min-height: 4.7rem;
  border-radius: var(--ny-radius-sm);
  font-weight: 700;
}

/* Totaux : ligne économies en respiration, total bien ancré */
.cart-drawer .cart-drawer__totals__row {
  line-height: 1.25;
}

.cart-drawer .cart-drawer__totals__row__money {
  font-variant-numeric: tabular-nums;
}

/* Bouton checkout (#CartDrawer-Checkout, sauge #5f8f74 via settings) :
   massif, ombre CTA, aucun changement de logique */
.cart-drawer .cart__checkout-button {
  min-height: 5.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: var(--ny-shadow-cta);
}

@media (hover: hover) {
  .cart-drawer .cart__checkout-button:not([disabled]):hover {
    box-shadow: 0 6px 20px rgba(var(--ny-ink), 0.25);
  }
}

/* Badges paiement : discrets, réguliers */
.cart-drawer .payment-badges {
  gap: 0.6rem;
}

.cart-drawer .payment-badges .icon {
  border-radius: 4px;
  opacity: 0.9;
}

/* État vide : recentré, bouton continuer visible */
.cart-drawer .cart-drawer__warnings .cart__empty-text {
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   5. PAGE PANIER (/cart) — main-cart-items + main-cart-footer
   -------------------------------------------------------------------------- */

.cart-items .cart-item {
  border-bottom: 1px solid rgba(var(--ny-ink), 0.07);
}

.cart-item__image-container,
.cart-items .cart-item__image {
  border-radius: var(--ny-radius-sm);
}

.cart-items .cart-item__name {
  font-weight: 700;
}

/* Cible tactile du bouton supprimer */
.cart-items cart-remove-button .button {
  min-width: 4.4rem;
  min-height: 4.4rem;
}

.cart__footer .totals__subtotal-value {
  font-variant-numeric: tabular-nums;
}

.cart__checkout-button {
  min-height: 5.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   6. COLLECTION — bannière + grille produits
   -------------------------------------------------------------------------- */

.collection-hero__title {
  letter-spacing: 0.01em;
}

.collection-hero__description {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* Cards produit de la grille : radius md + ombre sm au repos.
   Le hover -4px + ombre md vient du design system (section 4). */
.product-grid .card--card,
.product-grid .card--standard .card__inner {
  border-radius: var(--ny-radius-md);
  box-shadow: var(--ny-shadow-sm);
  overflow: hidden;
}

.product-grid .card--card .card__media,
.product-grid .card--standard .card__media {
  border-radius: calc(var(--ny-radius-md) - 2px);
  overflow: hidden;
}

.product-grid .card__heading {
  line-height: 1.3;
}

/* Pagination : lien pleine cible (44px déjà en hauteur), feedback hover */
.pagination__item {
  min-width: 4.4rem;
  border-radius: var(--ny-radius-sm);
  transition: background-color var(--ny-dur-fast) var(--ny-ease);
}

a.pagination__item:hover {
  background-color: rgba(var(--ny-ink), 0.05);
}

/* Filtres : résumé de facette plus tactile */
.facets__summary,
.mobile-facets__open {
  min-height: 4.4rem;
}

/* --------------------------------------------------------------------------
   7. 404 + PAGES STATIQUES + RECHERCHE + TRACK ORDER
   -------------------------------------------------------------------------- */

/* 404 : bloc respirant, bouton retour boutique bien visible */
.template-404 {
  padding-top: var(--ny-space-xl);
  padding-bottom: var(--ny-space-xl);
}

.template-404 p {
  font-size: 1.6rem;
  opacity: 0.8;
}

.template-404 .button {
  margin-top: var(--ny-space-md);
}

/* Pages statiques (CGV, mentions…) : confort de lecture senior */
.main-page-title {
  margin-bottom: var(--ny-space-md);
}

.page-width--narrow .rte {
  line-height: 1.7;
}

.page-width--narrow .rte h2,
.page-width--narrow .rte h3 {
  margin-top: var(--ny-space-lg);
}

/* Recherche : champ arrondi doux, boutons loupe/reset en cible 44px */
.template-search__search .field__input {
  border-radius: var(--ny-radius-sm);
}

.template-search__search .field__button {
  min-width: 4.4rem;
  min-height: 4.4rem;
}

.predictive-search {
  border-radius: var(--ny-radius-md);
  box-shadow: var(--ny-shadow-md);
  overflow: hidden;
}

/* Track order : formulaire resserré et centré */
.track-order-form {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.track-order-form .field {
  margin: var(--ny-space-sm) 0;
}

.track-order-form .field__input {
  border-radius: var(--ny-radius-sm);
}

/* --------------------------------------------------------------------------
   8. PROMO POPUP — arrondi lg + ombre lg
   -------------------------------------------------------------------------- */

.popup-modal {
  border-radius: var(--ny-radius-lg);
  box-shadow: var(--ny-shadow-lg);
}

.popup-modal__close {
  border-color: rgba(var(--ny-ink), 0.25);
  transition: transform var(--ny-dur-fast) var(--ny-ease),
    border-color var(--ny-dur-fast) var(--ny-ease);
}

.popup-modal__close:hover {
  border-
  transform: rotate(90deg);
}

.popup-modal .field__input {
  border-radius: var(--ny-radius-sm);
}

.popup-modal__dismiss-btn {
  min-height: 4.4rem;
}

/* Voile derrière le popup : encre tamisée plutôt que noir pur */
.popup-overlay--active {
  background: rgba(var(--ny-ink), 0.45);
}

/* --------------------------------------------------------------------------
   9. SCROLL TO TOP — discret, cible 44px
   -------------------------------------------------------------------------- */

.scroll-to-top-btn {
  width: 4.4rem;
  height: 4.4rem;
  box-shadow: var(--ny-shadow-md);
  opacity: 0.92;
}

@media (hover: hover) {
  .scroll-to-top-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
  }

  .scroll-to-top-btn-bottom-center:hover {
    transform: translateX(-50%) translateY(-2px);
  }
}

/* --------------------------------------------------------------------------
   10. NEWSLETTER + EMAIL SIGNUP BANNER + COLLAGE
   -------------------------------------------------------------------------- */

.newsletter .newsletter-form__field-wrapper .field__input {
  border-radius: var(--ny-radius-sm);
}

.newsletter__wrapper.content-container:not(.content-container--full-width) {
  border-radius: var(--ny-radius-lg);
}

.newsletter-form__button.field__button {
  min-width: 4.4rem;
  min-height: 4.4rem;
}

.email-signup-banner__box {
  border-radius: var(--ny-radius-lg);
  box-shadow: var(--ny-shadow-md);
}

/* Collage : médias arrondis cohérents (les hovers viennent du DS) */
.collage__item .media {
  border-radius: var(--ny-radius-md);
  overflow: hidden;
}

.collage-card {
  border-radius: var(--ny-radius-md);
}