/* ============================================================================
   AlwaysOnFleek — CUSTOM STYLE  (fichier LIVE du child theme)
   ----------------------------------------------------------------------------
   SOURCE DE VÉRITÉ unique du CSS "front". Chargé sur tout le site par
   oceanwp-child/functions.php (handle `aof-custom`, cache-busting filemtime).
   → NE PAS coller dans « Elementor → CSS personnalisé » (ce serait un doublon).
   (Les CSS injectés par les mu-plugins — barre livraison gratuite, stepper du
   side cart, quantité sur carte grille — restent DANS leurs mu-plugins, pas ici.)

   NB : le script PHP du déclencheur Quick View (.aof-qv) N'EST PAS du CSS →
   il vit dans le mu-plugin `aof-woo-tweaks.php`, pas dans ce fichier.

   Design tokens : prune #7A1B5C (hover #5E1444), bleu #1F3A5C, rose #A23E82,
   or #D9A441, gris texte #7a7882 / #9A98A0, bordures #E3E1E6, fond #F8F7FA.

   SOMMAIRE
     0. Animations
     1. Quick View (modale)
     2. Swatches de variation (.aof-swatches)
     3. Loader d'ajout au panier (.is-aof-loading)
     4. Trending — Filtre (wl-advance-product-filter)
     5. Cartes produit (grille WooLentor) — boutons
     6. Pagination (grille) — pastilles rondes du design
     7. Fiche produit — bloc Add to Cart WooLentor (.aof-swatches-single)
     8. Produits similaires — Related WooCommerce (.aof-related-product)
     9. Hero (accueil) — visuels absolute alignés sur la base (.aof-hero-visual)
    10. Page panier — WooLentor Cart aura (alignement + responsive)
    11. Cross-sell — titre personnalisé + auto-masquage (.aof-crosssell-section)
    12. Breadcrumb — fil d'Ariane OceanWP (.site-breadcrumbs)
    14. CookieYes — anti-débordement mobile de la fenêtre « Préférences cookies »
    15. Marquee — barre d'annonce défilante du topbar (.marquee-content)
    16. Popup newsletter (Elementor Popup #6279) — modale bornée sur mobile
   ============================================================================ */


/* ══════════════════════════════════════════════════════════════════════════
   0. ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes aofPopIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}
@keyframes aofSpin {
  to { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════════════════════════════════════
   1. QUICK VIEW (modale WooLentor, scopée à .aof-quickview-item)
   ══════════════════════════════════════════════════════════════════════════ */

/* Centrage vertical de la boîte modale */
.woolentor-quickview-modal-wrapper:has(.aof-quickview-item) {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: fit-content !important;
}

/* Coins arrondis de la boîte modale */
.woolentor-quickview-modal-content:has(.aof-quickview-item) {
  border-radius: 16px;
  padding: 0 !important;
}

/* Bouton de fermeture (croix) — pastille ronde */
.woolentor-quickview-modal-content:has(.aof-quickview-item) .woolentor-quickview-modal-close {
  top: 15px;
  right: 15px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1F3A5C;
  background: #F8F7FA;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  transition: background .15s, color .15s;
}
.woolentor-quickview-modal-content:has(.aof-quickview-item) .woolentor-quickview-modal-close:hover {
  background: #7A1B5C;
  color: #fff;
}

/* Libellé d'attribut ("Haar Farbe") */
.woolentor-quickview-modal-content:has(.aof-quickview-item) .aof-quickview-item .variations .label {
  border: 0px !important;
  padding-left: 0;
  text-transform: capitalize;
  color: #9A98A0;
  font-size: 13px;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Sélecteur de quantité (−  valeur  +) */
.woolentor-quickview-modal-content:has(.aof-quickview-item) .aof-quickview-item .wl-quantity-cal {
  padding: 2px !important;
  color: #1F3A5C !important;
  font-size: 17px;
  border-radius: 24px !important;
  border: 1.5px solid rgb(227, 225, 230);
}
.woolentor-quickview-modal-content:has(.aof-quickview-item) .aof-quickview-item .wl-quantity-cal .qty {
  color: #1F3A5C !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* Bouton "In den Warenkorb" */
.woolentor-quickview-modal-content:has(.aof-quickview-item) .aof-quickview-item .wl-addto-cart .single_add_to_cart_button {
  background: #7A1B5C !important;
  color: #fff !important;
  padding: 15px !important;
  border-radius: 28px !important;
  text-transform: capitalize !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  transition: background .18s !important;
}

/* Espacements du formulaire de variation dans la modale */
.woolentor-quickview-modal-content:has(.aof-quickview-item) .woocommerce-variation-add-to-cart {
  margin-bottom: 0 !important;
}
.woolentor-quickview-modal-content:has(.aof-quickview-item) .variations_form,
.woolentor-quickview-modal-content:has(.aof-quickview-item) .variations_form .variations,
.woolentor-quickview-modal-content:has(.aof-quickview-item) .variations_form .variations tr {
  margin-bottom: 0 !important;
}

/* ── Quick View : passe AU-DESSUS du header sticky (sinon son haut est masqué) ── */
.woolentor-quickview-modal.woolentor-quickview-open { z-index: 99999 !important; }

/* ── Quick View mobile : contenu plus haut que l'écran → aligné en haut + scrollable
   (sinon le centrage vertical coupe le début du modal, sans pouvoir y accéder) ── */
@media (max-width: 640px) {
  .woolentor-quickview-modal-wrapper:has(.aof-quickview-item) {
    align-items: flex-start !important;      /* haut visible (plus de centrage qui coupe) */
    height: 100vh;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px 12px;
  }
  /* le scroll passe au wrapper : le contenu n'est plus tronqué en interne */
  .aof-quickview-item {
    max-height: none !important;
    overflow: visible !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. SWATCHES DE VARIATION — pastilles du design (scopé .aof-swatches)
   ──────────────────────────────────────────────────────────────────────────
   Ajouter la classe "aof-swatches" au conteneur RACINE du composant concerné
   (Loop Item, template Quick View à côté de aof-quickview-item, etc.).
   Les swatches ailleurs sur le site ne sont pas touchés.
   ══════════════════════════════════════════════════════════════════════════ */

/* Taille : 16px en loop custom, 26px dans le Quick View, 24px dans la grille WooLentor.
   NB : la grille WooLentor (loop item) n'a PAS la classe .aof-swatches → on la cible
   en plus via .woolentor-product-grid pour que la variation ACTIVE ait l'anneau prune. */
.aof-swatches .swatchly-swatch {
  min-width: 20px !important;
  min-height: 20px !important;
}
.aof-quickview-item .aof-swatches .swatchly-swatch {
  min-width: 26px !important;
  min-height: 26px !important;
}
.woolentor-product-grid .swatchly-swatch {
  min-width: 20px !important;
  min-height: 20px !important;
}

/* Base : cercle + fin liseré gris */
.aof-swatches .swatchly-swatch,
.woolentor-product-grid .swatchly-swatch {
  border-radius: 50% !important;
  padding: 0px !important;
  border: none !important;
  cursor: pointer !important;
  display: block !important;
  box-shadow: none;                    /* pas d'anneau au repos (l'anneau prune n'apparaît qu'à l'état actif/survol) */
  transition: box-shadow 0.15s !important;
}
/* Neutralise l'anneau interne (inset) du plugin */
.aof-swatches .swatchly-swatch::before,
.woolentor-product-grid .swatchly-swatch::before {
  display: none !important;
}
/* Survol + Sélectionnée (= variation ACTIVE) : anneau prune du design */
.aof-swatches .swatchly-swatch:hover,
.aof-swatches .swatchly-swatch.swatchly-selected,
.woolentor-product-grid .swatchly-swatch:hover,
.woolentor-product-grid .swatchly-swatch.swatchly-selected {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(122, 27, 92) 0px 0px 0px 4px !important;
  border-color: transparent !important;
}
/* Masque le lien "Clear" (reset des variations) à côté des swatches */
.reset_variations { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   3. LOADER D'AJOUT AU PANIER — bouton .aof-atc pendant l'AJAX
   ──────────────────────────────────────────────────────────────────────────
   .is-aof-loading est posée par le JS sur le vrai bouton pendant l'ajout.
   Le spinner suit currentColor (prune sur icône, blanc sur bouton prune).
   ══════════════════════════════════════════════════════════════════════════ */

.is-aof-loading {
  position: relative !important;
  pointer-events: none;   /* évite les double-clics pendant l'ajout */
  cursor: wait;
}
/* masque le contenu (icône/texte) sans changer la taille */
.is-aof-loading > *,
.is-aof-loading svg,
.is-aof-loading img {
  visibility: hidden !important;
}
/* le spinner */
.is-aof-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: aofSpin .6s linear infinite;
}

/* Masque le lien "Warenkorb anzeigen" ajouté après l'ajout + le focus bleu */
.aof-atc .added_to_cart { display: none !important; }
.aof-atc a:focus { outline: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   4. TRENDING — FILTRE (wl-advance-product-filter)
   ──────────────────────────────────────────────────────────────────────────
   Scopé au widget filtre. Toolbar horizontale à dropdowns + slider prix.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 4.1 Toolbar horizontale ── */
.elementor-widget-wl-advance-product-filter .wlpf-group-header { display: none !important; } /* cache le titre "Filter" */

.elementor-widget-wl-advance-product-filter .wlpf-group-content {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 16px;
}
.elementor-widget-wl-advance-product-filter .wlpf-group-filters-list {
  display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 16px;   /* nowrap = les 4 filtres sur UNE ligne (desktop) */
  /* ── Panneau du groupe de filtres (style carte du design) ── */
  padding: 16px 20px !important;                   /* espace intérieur (!important : WooLentor force un padding sinon) */
  background: #fff;                                /* fond du panneau */
  border: 1px solid #E3E1E6;                       /* bordure fine */
  border-radius: 16px;                             /* coins arrondis */
  box-shadow: 0 2px 12px rgba(31, 58, 92, 0.05);   /* ombre douce (optionnel) */
  /* Panneau = largeur du conteneur (borné), CENTRÉ, marge basse.
     Les filtres flexibles (ci-dessous) le remplissent → pas de vide, pas de débordement. */
  max-width: 100%;
  margin: 0 auto 40px !important;
}
/* MÊME LARGEUR pour tous les filtres : flex:1 1 0 = largeur égale, remplit le
   panneau ET se réduit pour tenir sur une ligne (jamais de débordement) */
.elementor-widget-wl-advance-product-filter .wlpf-filter-wrap {
  margin: 0 !important; flex: 1 1 0; min-width: 0;
}
/* Neutralise les marges/paddings natifs qui décalaient la base
   (la marge basse sous le nice-select = la zone jaune de l'inspecteur) */
.elementor-widget-wl-advance-product-filter .wlpf-filter-content { margin: 0 !important; padding: 0 !important; }
.elementor-widget-wl-advance-product-filter .wlpf-filter-content > * { margin-bottom: 0 !important; }
.elementor-widget-wl-advance-product-filter .wlpf-filter-collapse { display: none !important; }

.elementor-widget-wl-advance-product-filter .wlpf-filter-header { margin: 0 0 6px; padding: 0; border: 0; }
.elementor-widget-wl-advance-product-filter .wlpf-filter-label-text {
  margin: 0; font-size: 13px; font-weight: 500; color: #7a7882; font-family: 'Inter', sans-serif; text-transform: capitalize;
}

/* Mobile / tablette : les filtres reviennent sur plusieurs lignes (sinon nowrap déborde) */
@media (max-width: 1024px) {
  .elementor-widget-wl-advance-product-filter .wlpf-group-filters-list { flex-wrap: wrap; }
  .elementor-widget-wl-advance-product-filter .wlpf-filter-wrap { flex-basis: 45%; max-width: none; }
}
@media (max-width: 600px) {
  .elementor-widget-wl-advance-product-filter .wlpf-filter-wrap { flex-basis: 100%; }
}

/* ── 4.2 Dropdowns (Kategorie / Farbe / Sortieren) en pilule ── */
.elementor-widget-wl-advance-product-filter .nice-select.wlpf-terms-select {
  border: 1.5px solid #E3E1E6; border-radius: 24px; background: #F8F7FA; float: none;
  height: auto; line-height: 1.3; padding: 9px 38px 9px 16px;
  font-size: 13.5px; font-weight: 500; color: #1F3A5C;
  width: 100%; min-width: 0; margin: 0 !important;   /* remplit le wrap + supprime la marge basse */
}
.elementor-widget-wl-advance-product-filter .nice-select.wlpf-terms-select:after { border-color: #7A1B5C; right: 16px; }
.elementor-widget-wl-advance-product-filter .nice-select .list {
  border-radius: 12px; border: 1px solid #E3E1E6; z-index: 9999; max-height: 320px; overflow-y: auto;
}
.elementor-widget-wl-advance-product-filter .nice-select .option.selected { color: #7A1B5C; font-weight: 600; }
.elementor-widget-wl-advance-product-filter .nice-select .option:hover { background: #F4F1F6; }

/* Accent PRUNE pour le seul dropdown "Sortieren" — remplacer <ID> par sa classe :
.elementor-widget-wl-advance-product-filter .<ID> .nice-select.wlpf-terms-select {
  border-color: #7A1B5C; color: #7A1B5C; background: #fff; font-weight: 600;
}
*/

/* ── 4.3 Anti-rognage du menu déroulant (overflow visible sur la chaîne) ── */
.elementor-widget-wl-advance-product-filter,
.elementor-widget-wl-advance-product-filter .elementor-widget-container,
.elementor-widget-wl-advance-product-filter .wlpf-group-wrap,
.elementor-widget-wl-advance-product-filter .wlpf-group-content,
.elementor-widget-wl-advance-product-filter .wlpf-group-filters-list,
.elementor-widget-wl-advance-product-filter .wlpf-filter-wrap,
.elementor-widget-wl-advance-product-filter .wlpf-filter-content {
  overflow: visible !important;
}

/* ── 4.4 Preis (slider natif) ── */
/* Le prix suit la largeur commune (200px) du .wlpf-filter-wrap ; on annule juste
   son min-width natif pour ne pas casser l'égalité de largeur */
.elementor-widget-wl-advance-product-filter .wlpf-price-filter { min-width: 0; }
.elementor-widget-wl-advance-product-filter .wlpf-price-range-fields {
  display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: #1F3A5C; margin-bottom: 8px;
}
.elementor-widget-wl-advance-product-filter .wlpf-price-range-ui.ui-slider {
  height: 6px; background: #E3E1E6; border: 0; border-radius: 6px;
}
.elementor-widget-wl-advance-product-filter .wlpf-price-range-ui .ui-slider-range {
  background: linear-gradient(90deg, #A23E82, #7A1B5C); border: 0;
}
.elementor-widget-wl-advance-product-filter .wlpf-price-range-ui .ui-slider-handle {
  width: 16px; height: 16px; top: -5px; border-radius: 50%; background: #7A1B5C;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(122, 27, 92, .4); cursor: pointer;
}
/* Ajustement vertical du bloc prix si besoin : translateY(6px)=base des pilules, -2px=remonter
.elementor-widget-wl-advance-product-filter .wlpf-price-filter { transform: translateY(0); }
*/

/* ── 4.5 Search (si conservé ; hors design) ── */
.elementor-widget-wl-advance-product-filter .wlpf-search-field {
  border: 1.5px solid #E3E1E6; border-radius: 24px; background: #F8F7FA;
  padding: 9px 16px; font-size: 13.5px; color: #1F3A5C; width: 100%; min-width: 0;
}

/* ── 4.6 Boutons Apply / Clear (si apply action = button ; sinon passer en live) ── */
.elementor-widget-wl-advance-product-filter .wlpf-group-action { display: flex; gap: 10px; align-items: center; margin: 0; }
.elementor-widget-wl-advance-product-filter .wlpf-group-apply-action-button {
  background: #7A1B5C; color: #fff; border: 0; border-radius: 24px;
  padding: 10px 22px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .18s;
}
.elementor-widget-wl-advance-product-filter .wlpf-group-apply-action-button:hover { background: #5E1444; }
.elementor-widget-wl-advance-product-filter .wlpf-group-clear-action-button {
  background: #fff; color: #1F3A5C; border: 1.5px solid #E3E1E6; border-radius: 24px;
  padding: 10px 22px; font-weight: 600; font-size: 14px; cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. CARTES PRODUIT (grille WooLentor) — boutons
   ──────────────────────────────────────────────────────────────────────────
   Le layout stepper+bouton (flex, min-width…) est géré par le mu-plugin
   `aof-grid-qty.php`. Ici : uniquement le STYLE visuel des boutons.
   ══════════════════════════════════════════════════════════════════════════ */

/* Bouton "In den Warenkorb" de la carte : fond bleu, compact, sans icône */
.woolentor-cart-btn.aof-atc {
  background: rgb(122, 27, 92) !important;
  color: #fff;
  padding: 5px !important;
  border-radius: 26px !important;
  font-size: 11px !important;
  text-transform: capitalize;
  font-family: 'Poppins', sans-serif;
  transition: background .18s !important;
}
/* Hover add-to-cart : bleu foncé (charte, dérivé du #1F3A5C) */
.woolentor-cart-btn.aof-atc:hover {
  background: rgb(122, 27, 92) !important;
  color: #fff;
}


.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover{
  color: #fff;
}
.woolentor-cart-btn.aof-atc svg { display: none; }   /* masque l'icône panier */

/* Boutons d'action rapide sur l'image (Quick View, wishlist…) */
.woolentor-quick-action {
  width: 30px !important;
  height: 30px !important;
}
/* Icône Quick View : trait bleu (#1F3A5C) + remplissage blanc */
.woolentor-style-modern .woolentor-quickview-btn svg path, .woolentor-style-modern .woolentor-quickview-btn svg, .woolentor-style-modern .woolentorquickview svg{
  stroke: #FFF !important;
  fill: #1F3A5C !important;
  color: #FFF !important;
}

/* Bouton "Mehr laden" (charger plus) : prune arrondi */
.woolentor-load-more-btn {
  background: #7A1B5C !important;
  border: 1px solid #7A1B5C !important;
  border-radius: 26px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. PAGINATION (grille) — pastilles rondes du design
   ──────────────────────────────────────────────────────────────────────────
   ⚠ Le <ul> porte AUSSI la classe .page-numbers → on cible bien a/span (items),
   jamais le <ul>, sinon le conteneur devient un cercle.
   ══════════════════════════════════════════════════════════════════════════ */

.woolentor-pagination-numbers ul.page-numbers {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; list-style: none; margin: 32px 0 0; padding: 0;
}
.woolentor-pagination-numbers ul.page-numbers li {
  margin: 0; padding: 0; list-style: none;
}

/* Chaque item (numéro, prev, next) = pastille PARFAITEMENT ronde.
   box-sizing:border-box + width == height + padding:0 → cercle exact (pas d'ovale). */
.woolentor-pagination-numbers a.page-numbers,
.woolentor-pagination-numbers span.page-numbers {
  box-sizing: border-box !important;
  display: flex; align-items: center; justify-content: center;
  width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important;
  border: 1.5px solid #E3E1E6; border-radius: 50%; background: #fff;
  color: #1F3A5C; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
  line-height: 1; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.woolentor-pagination-numbers a.page-numbers:hover {
  border-color: #7A1B5C; color: #7A1B5C;
}
/* Page active = prune plein */
.woolentor-pagination-numbers span.page-numbers.current {
  background: #7A1B5C; border-color: #7A1B5C; color: #fff;
}
/* Flèches prev / next : gris, prune au survol */
.woolentor-pagination-numbers a.page-numbers.prev,
.woolentor-pagination-numbers a.page-numbers.next { color: #9a98a0; }
.woolentor-pagination-numbers a.page-numbers.prev:hover,
.woolentor-pagination-numbers a.page-numbers.next:hover { color: #7A1B5C; border-color: #7A1B5C; }
.woolentor-pagination-numbers a.page-numbers .sli { font-size: 15px; line-height: 1; }

/* Responsive : pastilles plus compactes sur mobile */
@media (max-width: 480px) {
  .woolentor-pagination-numbers a.page-numbers,
  .woolentor-pagination-numbers span.page-numbers { width: 38px !important; height: 38px !important; font-size: 14px; }
  .woolentor-pagination-numbers ul.page-numbers { gap: 6px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. FICHE PRODUIT — Bloc "Add to Cart" WooLentor (scopé .aof-swatches-single)
   ──────────────────────────────────────────────────────────────────────────
   Poser la classe "aof-swatches-single" dans les "CSS Classes" du widget
   WL Product Add to Cart (wl-style-4). Reproduit le bloc variante + quantité +
   bouton du design "AlwaysOnFleek Produkt.dc.html". N'affecte pas le même
   widget utilisé ailleurs (grille, quick view…).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 7.1 Libellé d'attribut "HAAR FARBE" ── */
.aof-swatches-single .wl-addto-cart,
.aof-swatches-single .variations_form { margin: 0; }

.aof-swatches-single table.variations {
  border: 0; width: 100%; margin: 0 0 22px;
}
.aof-swatches-single table.variations tbody,
.aof-swatches-single table.variations tr { display: block; }
.aof-swatches-single table.variations th.label {
  display: block; padding: 0 0 10px; border: 0;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; color: #1F3A5C;   /* "HAAR FARBE" en majuscules bleu */
}
.aof-swatches-single table.variations th.label label { font-weight: 600; margin: 0; }
/* la cellule value = rangée swatches + reset alignés (comme le design) */
.aof-swatches-single table.variations td.value {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0;
}
/* masque le <select> natif (le swatch est le contrôle visible) */
.aof-swatches-single .swatchly_default_select { display: none !important; }

/* ── 7.2 Swatches (mêmes pastilles que la Section 2, scopées au single, 30px) ── */
.aof-swatches-single .swatchly-type-wrap {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0;
}
.aof-swatches-single .swatchly-swatch {
  min-width: 30px !important; min-height: 30px !important; width: 30px; height: 30px;
  border-radius: 50% !important; padding: 0 !important; border: none !important;
  cursor: pointer; display: block !important;
  box-shadow: none;                      /* pas d'anneau au repos */
  transition: box-shadow .15s !important;
}
.aof-swatches-single .swatchly-swatch::before { display: none !important; }  /* neutralise l'anneau interne du plugin */
.aof-swatches-single .swatchly-swatch:hover,
.aof-swatches-single .swatchly-swatch.swatchly-selected {                    /* survol / variation active = anneau prune */
  box-shadow: rgb(255,255,255) 0 0 0 2px, rgb(122,27,92) 0 0 0 4px !important;
  border-color: transparent !important;
}
/* Le lien "Clear" est masqué globalement (Section 2). Pour l'afficher façon
   "Zurücksetzen" du design, décommenter (NB : le texte natif reste "Clear") :
.aof-swatches-single a.reset_variations {
  display: inline-block !important; margin-left: 2px;
  color: #9a98a0; font-size: 13px; text-decoration: underline;
}
.aof-swatches-single a.reset_variations:hover { color: #7A1B5C; }
*/

/* ── 7.3 Quantité + "In den Warenkorb" sur une seule ligne ── */
.aof-swatches-single .woocommerce-variation-add-to-cart {
  display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; margin: 0;
}
/* le design n'a pas de libellé "Quantity" au-dessus du stepper */
.aof-swatches-single .wl-quantity-wrap { display: flex; align-items: stretch; margin: 0; }
.aof-swatches-single .wl-quantity-wrap > .label { display: none !important; }

/* boîte du stepper : bordure 1.5px, coins 12px, fond blanc */
.aof-swatches-single .wl-quantity-cal {
  display: flex; align-items: center; overflow: hidden;
  border: 1.5px solid #E3E1E6 !important; border-radius: 12px !important;
  background: #fff; padding: 0 !important;
}
/* boutons − / + : 46×52, bleu → prune au survol */
.aof-swatches-single .wl-quantity {
  width: 46px; height: 52px; display: flex; align-items: center; justify-content: center;
  color: #1F3A5C; cursor: pointer; background: none; border: none; transition: color .15s;
}
.aof-swatches-single .wl-quantity:hover { color: #7A1B5C; }
.aof-swatches-single .wl-quantity i { font-size: 13px; line-height: 1; }
/* champ quantité central */
.aof-swatches-single .wl-quantity-cal .quantity { margin: 0; }
.aof-swatches-single .wl-quantity-cal input.qty {
  width: 44px; height: 52px; padding: 0; border: 0 !important; background: none;
  text-align: center; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px;
  color: #1F3A5C; -moz-appearance: textfield; appearance: textfield;
}
.aof-swatches-single .wl-quantity-cal input.qty::-webkit-outer-spin-button,
.aof-swatches-single .wl-quantity-cal input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* bouton "In den Warenkorb" : pilule prune h52 + icône panier */
.aof-swatches-single .wl-cart-wrap { flex: 1; min-width: 200px; display: flex; margin: 0; }
.aof-swatches-single .single_add_to_cart_button {
  flex: 1; min-width: 200px; height: 52px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 28px; border: 0 !important; border-radius: 28px !important;
  background: #7A1B5C !important; color: #fff !important;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; text-transform: none;
  box-shadow: 0 8px 22px rgba(122,27,92,.28); transition: background .15s !important;
}
.aof-swatches-single .single_add_to_cart_button:hover { background: #5E1444 !important; }
/* icône panier avant le texte (masque SVG, suit currentColor = blanc) */
.aof-swatches-single .single_add_to_cart_button::before {
  content: ""; width: 19px; height: 19px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h13l-1.3 8.4a2 2 0 0 1-2 1.6H9.3a2 2 0 0 1-2-1.6L6 4.5H3.5'/%3E%3Ccircle cx='9.5' cy='21' r='1'/%3E%3Ccircle cx='16' cy='21' r='1'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h13l-1.3 8.4a2 2 0 0 1-2 1.6H9.3a2 2 0 0 1-2-1.6L6 4.5H3.5'/%3E%3Ccircle cx='9.5' cy='21' r='1'/%3E%3Ccircle cx='16' cy='21' r='1'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* masque la barre wishlist/compare vide de WooLentor + nettoie l'espacement variation */
.aof-swatches-single .wl-wishlist-compare-txt { display: none !important; }
.aof-swatches-single .single_variation_wrap { margin: 0; }
.aof-swatches-single .woocommerce-variation.single_variation { margin: 0; }

/* ── 7.4 Responsive : quantité + bouton restent sur une ligne ── */
@media (max-width: 480px) {
  .aof-swatches-single .single_add_to_cart_button { min-width: 0; padding: 0 18px; font-size: 15px; }
  .aof-swatches-single .wl-cart-wrap { min-width: 0; }
}

/* ── 7.5 Galerie produit : image plein cadre (scopé .aof-pdp-gallery) ──
   Poser la classe "aof-pdp-gallery" dans les "CSS Classes" du widget
   WooCommerce Product Images. L'image remplit tout le cadre (carré du design). */
.aof-pdp-gallery .woocommerce-product-gallery { margin: 0; width: 100%; }
.aof-pdp-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
  min-height: 0 !important;             /* annule le min-height:340px inline */
}
/* chaque vue = cadre carré qui remplit la colonne */
.aof-pdp-gallery .woocommerce-product-gallery__image {
  aspect-ratio: 1 / 1;                  /* cadre carré (comme le design) */
  border-radius: 12px;
  overflow: hidden;
  margin: 0 !important;
  width: 100% !important;
}
/* le lien de zoom + l'image remplissent tout le cadre */
.aof-pdp-gallery .woocommerce-product-gallery__image > a,
.aof-pdp-gallery .woocommerce-product-gallery__image img.wp-post-image {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.aof-pdp-gallery .woocommerce-product-gallery__image img.wp-post-image {
  object-fit: cover;                    /* remplit tout (recadre si besoin) */
  border-radius: 12px;
}


/* ══════════════════════════════════════════════════════════════════════════
   8. PRODUITS SIMILAIRES — widget Related WooCommerce (scopé .aof-related-product)
   ──────────────────────────────────────────────────────────────────────────
   Poser la classe "aof-related-product" dans les "CSS Classes" du widget
   WooCommerce → "Produits similaires" (Related products). Reproduit les cartes
   du design (image + titre + swatches + prix + bouton prune). N'affecte que ce widget.
   ══════════════════════════════════════════════════════════════════════════ */

/* Masque le <h2>Related products</h2> natif (on garde le titre Elementor "Ähnliche Produkte") */
.aof-related-product .related.products > h2 { display: none !important; }

/* ── 8.1 Grille 4 / 2 / 2 (comme la boutique) ── */
.aof-related-product ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin: 0 !important; padding: 0 !important; list-style: none;
}
.aof-related-product ul.products::before,
.aof-related-product ul.products::after { display: none !important; content: none !important; }
@media (max-width: 1024px) { .aof-related-product ul.products { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 640px)  { .aof-related-product ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ── 8.2 Carte ── */
.aof-related-product ul.products li.product {
  float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
  background: #fff; border: 1px solid #E3E1E6; border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; text-align: left;
  box-shadow: 0 4px 16px rgba(31, 58, 92, .06);
  transition: transform .2s, box-shadow .2s;
}
.aof-related-product ul.products li.product:hover {
  transform: translateY(-4px); box-shadow: 0 16px 34px rgba(31, 58, 92, .13);
}
/* le lien enveloppe image + titre + swatches + prix ; on l'étire pour aligner les prix/boutons */
.aof-related-product li.product > a.woocommerce-LoopProduct-link {
  display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; text-decoration: none;
}
/* image affleurante en haut */
.aof-related-product li.product img {
  width: 100% !important; height: 200px; object-fit: cover; display: block;
  margin: 0 0 14px !important; border-radius: 0 !important;
}
/* titre */
.aof-related-product li.product .woocommerce-loop-product__title {
  padding: 0 18px; margin: 0 0 9px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
  color: #2B2B33; line-height: 1.35; min-height: 40px;
}
/* prix (poussé en bas de la carte pour aligner d'une carte à l'autre) */
.aof-related-product li.product .price {
  margin: auto 0 0 !important; padding: 8px 18px 0;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; color: #1F3A5C;
}
.aof-related-product li.product .price .amount,
.aof-related-product li.product .price bdi { color: #1F3A5C; font-weight: 700; }
.aof-related-product li.product .price del { color: #9a98a0; font-weight: 500; font-size: 14px; }
.aof-related-product li.product .price ins { text-decoration: none; }

/* ── 8.3 Bouton "In den Warenkorb" (prune, pleine largeur, + icône panier) ── */
.aof-related-product li.product a.button,
.aof-related-product li.product a.add_to_cart_button {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 14px 18px 18px !important; padding: 12px !important;
  border: none !important; border-radius: 24px !important;
  background: #7A1B5C !important; color: #fff !important;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2;
  box-shadow: 0 6px 16px rgba(122, 27, 92, .22); transition: background .18s;
}
.aof-related-product li.product a.button:hover,
.aof-related-product li.product a.add_to_cart_button:hover { background: #5E1444 !important; color: #fff !important; }
/* icône panier (masque SVG, suit le blanc) */
.aof-related-product li.product a.button::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h13l-1.3 8.4a2 2 0 0 1-2 1.6H9.3a2 2 0 0 1-2-1.6L6 4.5H3.5'/%3E%3Ccircle cx='9.5' cy='21' r='1'/%3E%3Ccircle cx='16' cy='21' r='1'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h13l-1.3 8.4a2 2 0 0 1-2 1.6H9.3a2 2 0 0 1-2-1.6L6 4.5H3.5'/%3E%3Ccircle cx='9.5' cy='21' r='1'/%3E%3Ccircle cx='16' cy='21' r='1'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* masque le lien "Warenkorb anzeigen" ajouté après l'ajout AJAX */
.aof-related-product li.product .added_to_cart { display: none !important; }

/* ── 8.4 Swatches dans la carte (produits variables) ── */
.aof-related-product .swatchly_loop_variation_form { padding: 0 18px; margin: 2px 0 4px; }
.aof-related-product .swatchly_loop_variation_form .variations { border: 0; margin: 0; width: 100%; }
.aof-related-product .swatchly_loop_variation_form .variations tbody,
.aof-related-product .swatchly_loop_variation_form .variations tr,
.aof-related-product .swatchly_loop_variation_form .variations td { display: block; padding: 0; border: 0; }
.aof-related-product .swatchly_loop_variation_form .variations tr + tr { margin-top: 8px; }
/* libellé d'attribut ("A Farbe" / "Taille") */
.aof-related-product .swatchly_loop_variation_form .variations td.label,
.aof-related-product .swatchly_loop_variation_form .variations td.label label {
  font-size: 12px; color: #9a98a0; font-weight: 500; margin: 0 0 6px; text-transform: capitalize;
}
/* masque le <select> natif */
.aof-related-product .swatchly_default_select { display: none !important; }
/* rangée de swatches */
.aof-related-product .swatchly-type-wrap { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* swatches COULEUR = pastilles rondes (cf. Section 2)
   NB : la couleur vient de la config du terme d'attribut (Produits → Attributs → terme →
   couleur). Sans couleur définie, la pastille apparaît vide → à renseigner côté attributs. */
.aof-related-product .swatchly-type-color .swatchly-swatch {
  width: 20px; height: 20px; min-width: 20px; min-height: 20px;
  border-radius: 50% !important; padding: 0 !important; border: none !important;
  cursor: pointer; box-shadow: none; transition: box-shadow .15s;
}
.aof-related-product .swatchly-type-color .swatchly-swatch::before { display: none !important; }
.aof-related-product .swatchly-type-color .swatchly-swatch:hover,
.aof-related-product .swatchly-type-color .swatchly-swatch.swatchly-selected {
  box-shadow: rgb(255, 255, 255) 0 0 0 2px, rgb(122, 27, 92) 0 0 0 4px !important;
}

/* swatches TAILLE (type label) = petites pastilles pilules */
.aof-related-product .swatchly-type-label .swatchly-swatch {
  padding: 0 !important; border-radius: 50px;
  border: 1px solid #E3E1E6; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #1F3A5C; cursor: pointer; transition: border-color .15s, color .15s;
}
.aof-related-product a {
  font-family: "Inter", sans-serif !important;
  text-transform: capitalize;
}

.aof-related-product .swatchly-swatch:has(.swatchly-content .swatchly-text) {
  min-width: 25px !important;
  min-height: 25px !important;
}

.aof-related-product li.product .woocommerce-loop-product__title{
  padding: 8px 18px !important;
  text-transform: capitalize;
  color: #2B2B33 !important;
}

.aof-related-product .swatchly-type-label .swatchly-swatch:hover,
.aof-related-product .swatchly-type-label .swatchly-swatch.swatchly-selected {
  border-color: #7A1B5C; color: #7A1B5C;
}
.aof-related-product .swatchly-type-label .swatchly-swatch.swatchly-disabled {
  opacity: .4; text-decoration: line-through; cursor: not-allowed;
}
.aof-related-product .swatchly-content { line-height: 1; }


/* ══════════════════════════════════════════════════════════════════════════
   9. HERO (accueil) — visuels en position:absolute alignés sur la base
   ──────────────────────────────────────────────────────────────────────────
   Poser la classe "aof-hero-visual" sur le container parent qui porte les
   images en position absolute. Chaque enfant absolute est ancré en bas
   (base commune) au lieu d'être calé en haut.
   ══════════════════════════════════════════════════════════════════════════ */

.aof-hero-visual { position: relative; }
/* les containers absolute SAUF le dernier → ancrés sur la base */
/* .aof-hero-visual > .e-con[data-settings*='"position":"absolute"']:not(:last-child) {
  top: auto !important;
  bottom: 0 !important;
} */
/* le DERNIER container absolute → reste en haut */
/* .aof-hero-visual > .e-con[data-settings*='"position":"absolute"']:last-child {
  top: 0 !important;
  bottom: auto !important;
} */

.aof-home-title1 h1{
  font-size: clamp(34px, 5vw, 54px);
  text-wrap: balance;
}

.aof-livraison-banner-title .elementor-heading-title{
    font-size: clamp(16px, 2.2vw, 22px);
}

.aof-home-title-20-off h2{
  font-size : clamp(28px, 4vw, 42px) !important;
}

.aof-title-cart h2{
  font-size: clamp(22px, 2.8vw, 30px);
}


/* ══════════════════════════════════════════════════════════════════════════
   10. PAGE PANIER — WooLentor Cart aura (alignement + responsive)
   ──────────────────────────────────────────────────────────────────────────
   Le widget rend un grid `image | meta | prix` (align-items:start), qui passe
   à `100px 1fr auto` (≤980) puis `90px 1fr` + prix pleine largeur (≤600).
   ══════════════════════════════════════════════════════════════════════════ */

/* Image + meta strictement alignés en haut (corrige le décalage meta/image).
   Spécificité renforcée + reset des marges sur a/img (une marge/align externe
   OceanWP/WooCommerce décalait l'image vers le bas). */
.wl-cart-table--aura .wl-cart-item { align-items: start !important; }
.wl-cart-table--aura article.wl-cart-item > .wl-cart-item__image,
.wl-cart-table--aura article.wl-cart-item > .wl-cart-item__meta,
.wl-cart-table--aura article.wl-cart-item > .wl-cart-item__price {
  align-self: start !important;
  margin-top: 0 !important;
}
.wl-cart-table--aura .wl-cart-item__image,
.wl-cart-table--aura .wl-cart-item__image a,
.wl-cart-table--aura .wl-cart-item__image img { margin: 0 !important; display: block; }
.wl-cart-table--aura .wl-cart-item__name { margin-top: 0 !important; }

/* <981px : pas de débordement, texte qui casse + image réduite.
   NB : le contrôle "Image Size" du widget pose width+min-width+height (non responsive)
   avec une forte spécificité Elementor → on force la réduction ici (!important).
   (Alternative propre : régler "Image Size" en responsive dans le widget.) */
@media (max-width: 980px) {
  .wl-cart-table--aura .wl-cart-item__meta { min-width: 0; }
  .wl-cart-table--aura .wl-cart-item__name,
  .wl-cart-table--aura .wl-cart-item__name a { overflow-wrap: anywhere; }
  .wl-cart-table--aura .wl-cart-item__controls { flex-wrap: wrap; row-gap: 10px; }
  .wl-cart-table--aura .wl-cart-item__image {
    width: 100px !important; min-width: 100px !important; height: 100px !important;
  }
}
@media (max-width: 600px) {
  .wl-cart-table--aura .wl-cart-item__image {
    width: 90px !important; min-width: 90px !important; height: 90px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   11. CROSS-SELL — titre personnalisé + auto-masquage (.aof-crosssell-section)
   ──────────────────────────────────────────────────────────────────────────
   Poser la classe "aof-crosssell-section" sur le CONTENEUR qui enveloppe À LA
   FOIS ton titre (heading Elementor) ET le shortcode de cross-sell
   ([aof_bought_together] sur la fiche produit, ou [aof_cart_cross_sells] au panier).
   → Les shortcodes ne rendent RIEN quand il n'y a pas de vente croisée : la section
     entière (ton titre compris) se masque alors toute seule.  (:has() = Chrome/Edge,
     Safari, Firefox ≥ 121.)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) Aucun cross-sell rendu → on masque toute la section (ton titre inclus) */
.aof-crosssell-section:not(:has(.aof-bt, .aof-cart-crosssells)) {
  display: none !important;
}
/* 2) On masque les titres NATIFs (tu utilises le tien à la place) */
.aof-crosssell-section .aof-bt__title,
.aof-crosssell-section .aof-cart-crosssells .cross-sells > h2 {
  display: none !important;
}

.woocommerce form .form-row .input-checkbox {
  display: inline-block !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   12. BREADCRUMB — fil d'Ariane natif OceanWP (nav.site-breadcrumbs)
   ──────────────────────────────────────────────────────────────────────────
   Markup : nav.site-breadcrumbs > ol.trail-items > li.trail-item
   (.trail-begin = premier, .trail-end = page courante). Séparateurs posés en
   CSS par OceanWP → on les remplace par le chevron rose du design.
   ══════════════════════════════════════════════════════════════════════════ */

.site-breadcrumbs, .site-breadcrumbs a { font-family: 'Inter', sans-serif !important; font-size: 13px; font-weight: 500; }
.site-breadcrumbs .trail-items {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.site-breadcrumbs .trail-item { display: inline-flex; align-items: center; margin: 0; }

/* liens gris → prune au survol */
.site-breadcrumbs .trail-item a { color: #7a7882 !important; text-decoration: none; transition: color .15s; }
.site-breadcrumbs .trail-item a:hover { color: #7A1B5C !important; }

/* page courante (dernier item) : bleu + gras, non cliquable */
.site-breadcrumbs .trail-item.trail-end,
.site-breadcrumbs .trail-item.trail-end a { color: #1F3A5C !important; font-weight: 600; pointer-events: none; }

/* neutralise le séparateur natif d'OceanWP */
.site-breadcrumbs .trail-items li::after,
.site-breadcrumbs .trail-items li::before { content: none !important; }

/* chevron rose du design avant chaque item sauf le premier */
.site-breadcrumbs .trail-item:not(.trail-begin)::before {
  content: ""; width: 13px; height: 13px; flex: none; margin: 0 9px; background: #A23E82;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── 12.2 Variante WooCommerce (shop / catégorie) ──
   Markup : .site-breadcrumbs.woocommerce-breadcrumbs > <a>… <span.breadcrumb-sep>&gt;</span> texte-courant
   (le séparateur est un VRAI <span>, la page courante est un texte NU sans balise). */
.site-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.site-breadcrumbs a { color: #7a7882 !important; font-weight: 500; text-decoration: none; transition: color .15s; }
.site-breadcrumbs a:hover { color: #7A1B5C !important; }   /* bat le hover d'accent d'OceanWP */
/* le texte nu de fin (page courante, mode Woo) → bleu gras : on colore le conteneur,
   les liens repassent en gris via la règle a ci-dessus.
   ⚠ display:block (PAS flex) → le breadcrumb se comporte comme du TEXTE : il revient
   à la ligne tout seul et ne peut jamais déborder (les noms de produit longs). */
.site-breadcrumbs.woocommerce-breadcrumbs {
  /* display: block; */
  color: #1F3A5C;
  font-weight: 600;
  max-width: 100%;
  line-height: 2;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.site-breadcrumbs.woocommerce-breadcrumbs a { display: inline; }
/* séparateur natif ">" remplacé par le chevron rose du design */
.site-breadcrumbs .breadcrumb-sep {
  width: 13px; height: 13px; vertical-align: middle; display: inline-block; margin: 0 9px;
  font-size: 0; line-height: 0; color: transparent; background: #A23E82;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── 12.3 Barre de titre de page OceanWP (.page-header) au design ── */
.page-header {
  background: #F8F7FA;
  /* ce parametre est rajouté dans chaque page apres le titre avec la taille adequate, car le header natif ne permet pas de mettre le breadcum au dessus du titre.donc on masque le titre du header natif et on le remplace par un titre dans elementor avec la classe aof-page-header-title. */
  /* border-bottom: 1px solid #E3E1E6; */ 
  padding: 40px 24px 34px;
}
/* ceci permet d'effacer le separateur de la barre de titre de page natif OceanWP, celui ci est remplacé par le separateur apres le titre de page dans elementor avec la classe aof-page-header-title. */
.centered-minimal-page-header{
  border-bottom: none !important;
}
/* ⚠ width:100% + box-sizing OBLIGATOIRES : OceanWP donne à .container un
   `width:1200px; max-width:90%` — le `max-width:90%` (responsive) était écrasé par
   notre `max-width:1180px`, d'où le débordement mobile (conteneur figé à 1180px).
   `width:100%` rétablit la responsivité (≤ écran) tout en gardant le cap 1180px. */
.page-header .page-header-inner {
  max-width: 1180px !important;   /* !important : bat le `.container{width:auto!important}` d'OceanWP */
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto;
}
/* garde-fou : le breadcrumb ne dépasse jamais son conteneur */
.page-header .site-breadcrumbs {
  max-width: 100% !important;
  /* ⚠ OceanWP force `.site-breadcrumbs{ height:32px; overflow:hidden }` (règle de base) et
     son override `.position-under-title` ne réinitialise PAS height/overflow → dès que le
     fil d'Ariane passe à 2 lignes (mobile, nom de produit long), la 2ᵉ ligne était COUPÉE.
     On rétablit une hauteur auto + overflow visible pour que tout le fil s'affiche. */
  height: auto !important;
  overflow: visible !important;
}
.page-header .page-header-title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(30px, 4vw, 42px); color: #1F3A5C; margin: 0 0 14px; line-height: 1.1;
}
/* variante "centered-minimal" : titre + breadcrumb centrés (comme le design panier/checkout) */
.centered-minimal-page-header { text-align: center; }
.centered-minimal-page-header .site-breadcrumbs { justify-content: center; }

/* ── 12.4 Mobile : le breadcrumb ne déborde jamais (noms de produit longs) ──
   Le dernier item (nom produit) restait sur une ligne → débordement horizontal.
   On force le retour à la ligne + la casse des mots longs, et min-width:0 pour
   que les items flex puissent rétrécir. */
@media (max-width: 640px) {
  .site-breadcrumbs {
    flex-wrap: wrap;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 12px;
  }
  .site-breadcrumbs,
  .site-breadcrumbs a,
  .site-breadcrumbs .trail-items,
  .site-breadcrumbs .trail-item,
  .site-breadcrumbs .trail-item a {
    white-space: normal !important;
    min-width: 0;
    max-width: 100%;
  }
}


/* Kollektionne page  */
.aof-kollektionen-title h1{
  font-size: clamp(34px, 4.5vw, 46px);
}

/* shop page title */

.page-header-title, .page-subheading{
  display:none;
}


/* SHOP PAGE  */
.woolentor-list-card .woolentor-product-actions .woolentor-cart-btn, .woolentor-cart-btn, .woolentor-product-actions .button, .woolentor-product-actions .add_to_cart_button{
  min-height: 30px !important;
}

.aof-cardqty__btn, .aof-cardqty .qty{
  height: 26px !important;
}

.aof-cardqty__btn{
  width: 22px !important;
}

.aof-cardqty .qty{
  min-width: 20% !important;
  width: 30px !important;
}


.woolentor-archive-data-area{
  display: flex;
  flex-direction: column;
}

.woolentor-archive-desc{
  max-width: 560px;
  align-self: center;
}

/* .woolentor-cart-btn{
  color: rgb(122, 27, 92) !important;
}
.woolentor-cart-btn:hover{
  color: rgb(122, 27, 92) !important;
} */


.aof-error-title div{
  font-size: clamp(72px, 14vw, 120px);
  background: linear-gradient(135deg, rgb(31, 58, 92), rgb(122, 27, 92)) padding-box text;
  color: transparent;
  margin-bottom: 8px;
}

.aof-kontakt-title h1{
  font-size: clamp(30px, 4vw, 44px);
}

/* 404 page  */
.woolentor_psa_price .price{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 70% !important;
}

/* 404 search ajax */
.woolentor_psa_price .price{
  font-size: 20px !important;
}

#woolentor_psa_results_wrapper{
  margin-top: 10px !important;
  border-radius: 26px !important;
}

#woolentor_psa_results_wrapper div{
  border: none !important;
}

/* Danke page */
.aof-danke-title{
  font-size: clamp(26px, 3.6vw, 36px);
}

/* Masque la barre de titre OceanWP UNIQUEMENT sur la page "commande reçue" (Danke).
   Les détails de commande sont des FRÈRES de .page-header (pas dedans) → on cible
   depuis <body> : la classe WooCommerce, + un :has() de secours sur la notice succès. */
.woocommerce-order-received .page-header,
body:has(.woocommerce-thankyou-order-received) .page-header {
  display: none !important;
}


.aof-uber-uns-title{
  font-size: clamp(26px, 3.4vw, 36px);
}

.aof-uber-uns-title2{
  position: relative;
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.5;
  color: rgb(31, 58, 92);
  margin: 0px auto 22px;
  max-width: 760px !important;
  text-align: center;
}

.aof-uber-uns-title2 p{
  line-height: 1.5;
}

.aof-uber-uns-title3{
  font-size: clamp(24px, 3vw, 32px);
}

.aof-uber-uns-box-look{
  padding: clamp(40px, 6vw, 64px);
}

.aof-uber-uns-box-look-title{
  font-size: clamp(26px, 3.6vw, 38px);
}

/* Masque le fil d'Ariane UNIQUEMENT sur la page Über uns (body.page-id-4130).
   Pour masquer TOUTE la barre de titre (titre + breadcrumb), remplacer
   .site-breadcrumbs par .page-header. */
.page-id-4130 .site-breadcrumbs {
  display: none !important;
}

/* POPUP NEWSLETTER CODE REDUCTION  */

#elementor-popup-modal-6279 .dialog-widget-content{
  border-radius: 30px;
}

.elementor-popup-modal .dialog-close-button svg{
  fill: rgb(31, 58, 92);
}

#elementor-popup-modal-6279 .dialog-message{
  /* max-width: 760px !important; */
  /* width: 760px !important; */
}

/* Header SPÉCIFIQUE à /versand-ruckgabe/ (page #6269) | /impressum/ (page #6273) | /datenschutzerklärung (page #6271) | /faq (page #6367) | /agb (page #6450) — n'affecte aucune autre page */
.page-id-6269 .page-header, .page-id-6273 .page-header, .page-id-6271 .page-header, .page-id-6367 .page-header, .page-id-6450 .page-header {
  /* tes overrides ici, ex. : */
  background: #1F3A5C;
  border-bottom: none;
}

@media (max-width: 1024px) {
  .page-id-6269 .page-header , .page-id-6273 .page-header, .page-id-6271 .page-header, .page-id-6367 .page-header, .page-id-6450 .page-header { padding-left: 24px; }
}
/* .page-id-6269 .page-header .page-header-title {
  color: #fff !important;
} */
.page-id-6269 .site-breadcrumbs a,
.page-id-6269 .site-breadcrumbs , .page-id-6273 .site-breadcrumbs a,
.page-id-6273 .site-breadcrumbs, .page-id-6271 .site-breadcrumbs a,
.page-id-6271 .site-breadcrumbs, .page-id-6367 .site-breadcrumbs a,
.page-id-6367 .site-breadcrumbs, .page-id-6450 .site-breadcrumbs a,
.page-id-6450 .site-breadcrumbs {
  color: rgb(217, 164, 65) !important;
}
.page-id-6269 .site-breadcrumbs a:hover,
.page-id-6273 .site-breadcrumbs a:hover, .page-id-6271 .site-breadcrumbs a:hover, .page-id-6367 .site-breadcrumbs a:hover, .page-id-6450 .site-breadcrumbs a:hover {
  color: rgb(217, 164, 65) !important;
  text-decoration: underline !important;
}
.page-id-6269 .site-breadcrumbs .trail-item.trail-end a,
.page-id-6273 .site-breadcrumbs .trail-item.trail-end a, .page-id-6271 .site-breadcrumbs .trail-item.trail-end a, .page-id-6367 .site-breadcrumbs .trail-item.trail-end a, .page-id-6450 .site-breadcrumbs .trail-item.trail-end a {
  color: #fff !important;
}

.page-id-6269 .site-breadcrumbs .breadcrumb-sep, .page-id-6273 .site-breadcrumbs .breadcrumb-sep, .page-id-6271 .site-breadcrumbs .breadcrumb-sep, .page-id-6367 .site-breadcrumbs .breadcrumb-sep, .page-id-6450 .site-breadcrumbs .breadcrumb-sep {
  background: rgba(255, 255, 255, 0.45) !important;
}

.aof-versand-ruckgabe-title h1{
  font-size: clamp(28px, 3.6vw, 38px);
}

.aof-datenschutzerklarung-box{
  padding: clamp(24px, 4vw, 40px);
}

.aof-faq-title h1{
  font-size: clamp(28px, 3.8vw, 40px);
}

.aof-agb-title h1{
  font-size: clamp(28px, 3.6vw, 38px);
}

.aof-mein-konto-title h1{
  font-size: clamp(26px, 3.6vw, 38px);
}

/* Page Mein Konto - Login Form  */
.page-id-6534 .elementor-widget-wl-myaccount-login-form input[type="checkbox"], .page-id-7 .woocommerce form .form-row .input-checkbox {
  height: 22px !important;
  width: 22px !important;
  margin-left: 5px;
  border-radius: 6px;
  margin-right: 5px;
  position: relative;
}

.page-id-6534 input[type="checkbox"]:checked::before, .page-id-7 .woocommerce form .form-row .input-checkbox:checked::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff !important;
}

.page-id-6534 input[type="checkbox"]:checked, .page-id-7 .woocommerce form .form-row .input-checkbox:checked {
    background-color: rgb(122, 27, 92) !important; /* Remplacez par votre couleur (ex: le violet de votre bouton LOG IN) */
    border-color: rgb(122, 27, 92) !important;     /* Optionnel : change aussi la bordure pour harmoniser */
}

.page-id-7 .woolentor-order-review-product span.product-thumbnail img{
  border-radius: 12px !important;
}

.woocommerce form .form-row label, .woocommerce-page form .form-row label{
  display: inline-block !important;
}

.elementor-6534 .elementor-element.elementor-element-a74b13e .woolentor-myaccount-form-login button, .elementor-6534 .elementor-element.elementor-element-6c663a4 .woolentor-myaccount-form-register button, .elementor-7018 .elementor-element.elementor-element-418faa6 .woolentor-myaccount-form-login button, .elementor-7018 .elementor-element.elementor-element-fbbe085 .woolentor-myaccount-form-register button{
  text-transform: capitalize;
  font-weight: 500 !important;
}
/* ==========================================================================
   14. CookieYes — fenêtre « Préférences cookies » : anti-débordement mobile
   --------------------------------------------------------------------------
   Le plugin cookie-law-info rend .cky-preference-center avec une largeur fixe
   (~845px). Sur mobile (< écran) cette fenêtre dépasse le viewport et crée un
   SCROLL HORIZONTAL parasite sur toute la page (diagnostiqué via console :
   cky-preference-center/-header/-body-wrapper = 845px, right=665 sur 360px).
   On borne la fenêtre + son contenu à l'écran. NE touche pas au design desktop.
   ========================================================================== */
.cky-preference-center,
.cky-preference-header,
.cky-preference-body-wrapper,
.cky-preference-content-wrapper,
.cky-preference-footer {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .cky-preference-center {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
  }
  /* filet de sécurité : aucun débordement horizontal de page sur mobile.
     ⚠ `clip` et NON `hidden` : `overflow-x:hidden` sur html/body crée un conteneur de
     défilement qui CASSE `position:sticky` (top-bar) sous 640px. `clip` bloque le
     débordement sans créer de conteneur → le sticky continue de fonctionner. */
  html,
  body {
    overflow-x: clip;
  }
}


/* produit unique  */

.woocommerce-variation-price{
  display: none !important;
}
.woocommerce img.pswp__img, .woocommerce-page img.pswp__img{
  border-radius: 12px;
}

.lg-object.lg-image{
  border-radius: 12px;
  /* border: 2px rgb(122, 27, 92) !important; */
}

.woocommerce div.product div.images, .woocommerce.content-full-width div.product div.images, .slick-initialized .slick-slide{
  border-radius: 12px !important;
}

.aof-single-product-title h1{
  font-size: clamp(28px, 3.6vw, 38px) !important;
}

@media (max-width:767px) {
  .woocommerce div.product .wl-addto-cart.wl-style-4 form.cart .button:not(.woolentor-quick-checkout-button), .wl-addto-cart.wl-style-4 form.cart .button:not(.woolentor-quick-checkout-button){
    padding: 10px !important;
  }

  .aof-swatches-single .wl-quantity-cal input.qty{
    height: 48px !important;
  }

  .aof-bt{
    padding: 20px !important;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs{
    display: flex;
  }

  .woocommerce .elementor-5480 .elementor-element.elementor-element-814c675 .woocommerce-tabs ul.wc-tabs li a{
    font-size: 10px !important;
  }

  .aof-related-product li.product a.button, .aof-related-product li.product a.add_to_cart_button{
    margin: 14px 10px 18px !important;
  }
}


.elementor-4550 .elementor-element.elementor-element-def1ae7 .swatchly-swatch{
  min-width: 22px !important;
  min-height: 22px !important;
}

.swatchly-type-wrap{
  gap: 5px !important;
}

.woocommerce span.onsale{
  padding: 1em !important;
}


/* Page cathegory  */
.aof-details-link{
  margin-top: 30px !important;
}

@media (max-width: 767px) {
  .elementor-4270 .elementor-element.elementor-element-50f8b83 {
    /* margin-top: 40px; */
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   15. MARQUEE — barre d'annonce défilante du topbar (100 % CSS)
   --------------------------------------------------------------------------
   Mets la classe `marquee-content` (SANS point) sur CHAQUE headline du topbar ;
   le conteneur est ciblé automatiquement (rien à y ajouter).
   Boucle via translateX(-50%) : pour un défilement SANS raccord, mets un NOMBRE
   PAIR de copies identiques, assez nombreuses pour dépasser la largeur de la barre.
   Vitesse = `animation-duration` de la piste. Hauteur = `min-height` de #topbar-template.
   ══════════════════════════════════════════════════════════════════════════ */

/* Top-bar OceanWP : pleine largeur, sans espace vertical hérité, nav vide masquée
   → la barre colle en haut (top:0). */
#top-bar.container { width: 100% !important; max-width: 100% !important; }
#top-bar-wrap, #top-bar, #top-bar-inner, #top-bar-content {
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
  min-height: 0 !important;
}
#top-bar-nav { display: none !important; }

/* Barre d'annonce FIXÉE en haut, au-dessus du menu (reste visible au scroll).
   position:sticky garde sa place dans le flux → aucun contenu masqué, pas de décalage. */
#top-bar-wrap {
  position: sticky;
  top: 0;
  z-index: 9999;            /* au-dessus du header/menu */
}
/* Le menu OceanWP n'était pas sticky → on le rend sticky NOUS-MÊMES, collé SOUS la barre.
   Les deux étant dans le même conteneur de scroll (#wrap), ils s'empilent :
   barre à top:0, menu à top:hauteur-de-la-barre. */
#site-header {
  position: sticky;
  top: 53px;               /* ← = hauteur de #topbar-template ; ajuste si trou/chevauchement */
  z-index: 9998;           /* juste sous la barre (9999) */
}

/* Fenêtre : clip horizontal + centrage vertical (le cercle de surlignage dépasse le texte). */
#topbar-template {
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 2.6em;      /* ← hauteur de la barre / 2.6em ou 3.2em / */
}
/* Le wrapper Elementor s'étire à la hauteur de la barre → on le centre en flex
   pour que la piste (donc le texte) soit centrée verticalement. */
#topbar-template > .elementor {
  width: 100%;
  display: flex;
  align-items: center;
}

/* Piste (conteneur Elementor des headlines) : wrap mobile + gap neutralisés,
   largeur = max-content, puis animation. */
#topbar-template .e-con:has(> .marquee-content) {
  --flex-wrap: nowrap !important;
  --flex-wrap-mobile: nowrap !important;
  --gap: 0px !important; --column-gap: 0px !important; --row-gap: 0px !important;
  width: max-content !important;
  max-width: none !important;
  padding: 0 !important;
  will-change: transform;                              /* rendu GPU fluide (mobile) */
  animation: aof-marquee-scroll 25s linear infinite;   /* ← vitesse */
}
#topbar-template .e-con:has(> .marquee-content):hover { animation-play-state: paused; }

/* Headlines : largeur naturelle, pas d'étirement, écart entre messages.
   transform:none = Motion Effects OFF (translateY qui coupait le haut).
   margin:0 sur le h3 = supprime la marge qui poussait le texte en haut de l'item
   (surtout PAS de flex sur le h3 : ça collerait les mots autour de « 49,99 € »). */
#topbar-template .marquee-content,
#topbar-template .marquee-content .elementor-widget-container,
#topbar-template .marquee-content .elementor-headline {
  transform: none !important;
}
#topbar-template .marquee-content {
  --container-widget-flex-grow: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding-right: 64px;    /* écart entre deux messages */
}
#topbar-template .marquee-content .elementor-headline { margin: 0 !important; }

@keyframes aof-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }        /* translate3d = compositing GPU (fluide mobile) */
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Mobile : défilement plus rapide (25s → 10s) */
@media (max-width: 767px) {
  #topbar-template .e-con:has(> .marquee-content) { animation-duration: 10s; }
}

@media (prefers-reduced-motion: reduce) {
  #topbar-template .e-con:has(> .marquee-content) { animation: none !important; }
}

.elementor-4270 .elementor-element.elementor-element-50f8b83{
  /* --min-height: 400px !important; */
}


/* Cart page  */
.wl-cart-total--aura .wl-coupon-btn, .wl-cart-total--aura .wl-coupon-btn.button {
  border: 1px solid rgb(122, 27, 92);
}


/* side cart  */
.xoo-wsc-pattern-card, .xoo-wsc-img-col img, .xoo-wsc-img-col, .xoo-wsc-sm-back-cont{
  border-radius: 5px !important;
}
/* ══════════════════════════════════════════════════════════════════════════
   16. POPUP NEWSLETTER (Elementor Popup #6279) — d'après la maquette AOF-Newsletter-Popup
   --------------------------------------------------------------------------
   Mapping maquette → éléments Elementor :
     .aof-nl-grid   (grille)              → #eac7c1b
     .aof-nl-visual (colonne « 10% »)     → #3d04054  (« 10% » + « Willkommensrabatt »)
     .aof-nl-pct    (« 10% »)             → #ff6e741
     .aof-nl-sub    (« Willkommensrabatt ») → #545456d
     .aof-nl-body   (colonne form)        → #b52a5d5
     .aof-nl-title  (titre H2)            → #f3b1c62
   Ciblage robuste : la modale QUI CONTIENT le contenu (eac7c1b), sans dépendre de l'ID.
   ══════════════════════════════════════════════════════════════════════════ */

/* Croix de fermeture au design (cercle blanc, X prune au survol) — toutes tailles */
.elementor-popup-modal:has(.elementor-element-eac7c1b) .dialog-close-button {
  position: absolute !important; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.9); color: #1F3A5C;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; z-index: 5; margin: 0; padding: 0;
  transition: background .15s, color .15s;
}
.elementor-popup-modal:has(.elementor-element-eac7c1b) .dialog-close-button:hover {
  background: #F8F7FA; color: #C23B3B;
}
.elementor-popup-modal:has(.elementor-element-eac7c1b) .dialog-close-button i,
.elementor-popup-modal:has(.elementor-element-eac7c1b) .dialog-close-button svg {
  font-size: 17px; width: 17px; height: 17px;
}

/* ── Mobile (≤640px, comme la maquette) ──
   Tout est ancré sur .aof-newsletter-form (classe posée sur la GRILLE #eac7c1b) et sur la
   POSITION des enfants (visuel = 1er .e-con, form = dernier .e-con) → indépendant des IDs
   qu'Elementor régénère et du code qu'il ajoute autour. */
@media (max-width: 640px) {

  /* 1) Modale bornée à l'écran, HAUTEUR = contenu, centrée, défilement interne si trop haute.
        (Elementor centre déjà l'overlay ; margin:auto garde la boîte centrée.) */
  .elementor-popup-modal:has(.aof-newsletter-form) .dialog-widget-content {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 40px) !important;
    height: auto !important;
    margin: auto !important;
    border-radius: 18px !important;
    overflow: hidden auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* IMPORTANT : re-contraint le contenu interne à 100% de la boîte. Sinon .dialog-message garde
     la largeur FIXE de la popup (plus large que la boîte bornée) → son bord gauche s'aligne sur la
     boîte et tout l'excédent DÉBORDE À DROITE (rogné par overflow-x) = padding gauche OK / droite
     collée au bord. On borne .dialog-message, la racine Elementor ET la grille à 100%. */
  .elementor-popup-modal:has(.aof-newsletter-form) .dialog-message,
  .elementor-popup-modal:has(.aof-newsletter-form) .dialog-message > .elementor,
  .aof-newsletter-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    max-height: none !important;
    height: auto !important;
  }

  /* 2) LA CAUSE DU VIDE : la grille (portée par .e-con-inner, wrapper que « boxed » insère entre
        .aof-newsletter-form et ses colonnes) a en base « grid_rows_grid_mobile = 2 » →
        Elementor applique grid-template-rows: repeat(2, 1fr). Les 2 rangées prennent 50/50 d'une
        hauteur étirée, et « grid_align_items_mobile: start » colle chaque item EN HAUT de sa rangée
        → 275px de vide sous le petit bandeau. On force donc les rangées à AUTO (hauteur du contenu)
        + UNE colonne + gap 0. C'est grid-template-ROWS qu'il fallait écraser (grid-auto-rows était
        ignoré car les rangées sont EXPLICITES). */
  .aof-newsletter-form,
  .aof-newsletter-form > .e-con-inner {
    --min-height: 0px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .aof-newsletter-form > .e-con-inner {
    --e-con-grid-template-columns: 1fr !important;
    --e-con-grid-template-rows: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    grid-auto-rows: min-content !important;
    align-content: start !important;
    align-items: start !important;
    --gap: 0px !important; --row-gap: 0px !important; --column-gap: 0px !important;
    gap: 0 !important;
  }

  /* 3) Visuel « 10% Willkommensrabatt » → bandeau compact À LA HAUTEUR DU CONTENU, centré. */
  .aof-newsletter-form .e-con-inner > .e-con:first-child {
    --min-height: 0px !important; min-height: 0 !important; height: auto !important;
    --flex-direction: row !important; flex-direction: row !important;
    --align-items: center !important; align-items: center !important;
    --gap: 8px !important; --column-gap: 8px !important; --row-gap: 0px !important;
    --padding-top: 16px !important; --padding-bottom: 16px !important;
    --padding-left: 16px !important; --padding-right: 16px !important;
  }
  .aof-newsletter-form .e-con-inner > .e-con:first-child .elementor-widget { width: auto !important; }
  .aof-newsletter-form .e-con-inner > .e-con:first-child > .elementor-widget:nth-child(1) .elementor-heading-title {
    font-size: 32px !important; line-height: 1 !important; margin: 0 !important;
  }
  .aof-newsletter-form .e-con-inner > .e-con:first-child > .elementor-widget:nth-child(2) .elementor-heading-title {
    font-size: 12px !important; margin: 0 !important;
  }

  /* 4) Colonne formulaire : hauteur = contenu, padding resserré, seul le H2 est réduit. */
  .aof-newsletter-form .e-con-inner > .e-con:last-child {
    --min-height: 0px !important; min-height: 0 !important; height: auto !important;
    --padding-top: 22px !important; --padding-bottom: 24px !important;
    --padding-left: 20px !important; --padding-right: 20px !important;
  }
  .aof-newsletter-form .e-con-inner > .e-con:last-child h2.elementor-heading-title {
    font-size: 20px !important; line-height: 1.25 !important;
  }
}

@media (max-width:640px) {

/* Home page  */
.elementor-4550 .elementor-element.elementor-element-4ea703e{
  --padding-left: 5px !important;
  --padding-right: 5px !important;
}

.elementor-4550 .elementor-element.elementor-element-4ea703e p.stock.out-of-stock{
  font-size: 8px !important;
}
  .elementor-4550 .elementor-element.elementor-element-2eda7b1 .elementor-heading-title {
    font-size: 15px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   17. HERO (accueil) — CTA « Jetzt Kaufen » / « Kollektionen ansehen »
   --------------------------------------------------------------------------
   Le conteneur #0c8184b est flex-direction:row + flex-wrap:wrap + justify:flex-start.
   Les 2 pills font ~360px : elles tiennent sur UNE ligne à 414px (iPhone 11 Pro Max),
   mais sous ~400px (iPhone 15 Pro = 393px) le 2e bouton passe à la ligne et, en flex-start,
   les deux se collent à gauche de façon déséquilibrée (« décalé »).
   → Sous 400px on EMPILE proprement (colonne), largeur = contenu (align-items:flex-start),
   alignés sous le titre. 11 Pro Max (414) garde le côte-à-côte.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .elementor-element-0c8184b {
    --flex-direction: column !important;
    flex-direction: column !important;
    --align-items: flex-start !important;
    align-items: flex-start !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   18. ENTÊTE — Compte / login / « Hallo, Prénom » / logout
   --------------------------------------------------------------------------
   Éléments injectés par le mu-plugin aof-account-header.php selon l'état de connexion.
   Desktop/tablette (≥641px) : #aof-hd-account (salutation) + #aof-hd-logout (icône logout).
   Barre MOBILE (≤640px) : #aof-hd-maccount-bar (icône seule si déconnecté ; « Hallo, X » +
   logout si connecté). Menu hamburger : #aof-hd-mlogout.
   ══════════════════════════════════════════════════════════════════════════ */

/* Icône logout desktop/tablette (à côté de la salutation) */
#aof-header #aof-hd-logout {
  display: flex; align-items: center;
  color: #1F3A5C; padding: 4px; margin-left: 2px;
  transition: color .15s;
}

/* Barre compte MOBILE : masquée ≥641px, visible ≤640px (là où le compte manquait) */
#aof-header #aof-hd-maccount-bar { display: none; }
@media (max-width: 640px) {
  #aof-header #aof-hd-maccount-bar {
    display: flex; align-items: center; gap: 6px;
    color: #1F3A5C; flex: none;
  }
}
/* Déconnecté : simple icône user → login */
#aof-header a#aof-hd-maccount-bar { padding: 4px; }
/* Connecté : « Hallo, Prénom » (discret mais visible) + icône logout */
#aof-header #aof-hd-maccount-bar .aof-mbar-greet {
  display: flex; align-items: center;
  /* color: #1F3A5C;  */
  color: #FFBA00;
  font-size: 13px; font-weight: 600;
  max-width: 40vw; overflow: hidden;
}
#aof-header #aof-hd-maccount-bar .aof-mbar-greet span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#aof-header #aof-hd-maccount-bar .aof-mbar-logout {
  display: flex; align-items: center; color: #1F3A5C; padding: 4px; flex: none;
}

/* Ligne « Abmelden » dans le menu hamburger (sous la salutation) */
#aof-header #aof-hd-mlogout {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 6px; font-size: 15px; font-weight: 500;
  color: #C23B3B; border-bottom: 1px solid #F1EFF3;
}
#aof-header #aof-hd-mlogout svg { flex: none; }