/* Mega Search — layer plein écran (namespace .mgs-)
   Apparence cible : layer fullscreen Doofinder v1.8 de delihemp.com.
   Personnalisation par variables CSS --mgs-* (voir snippet d'installation). */

.mgs-root {
  --mgs-accent: #728067;
  --mgs-accent-hover: #65725c;
  --mgs-accent-active: #596450;
  --mgs-text: #323334;
  --mgs-text-light: #f5f9ff;
  --mgs-muted: #75767a;
  --mgs-border: #cbccce;
  --mgs-bg: #ffffff;
  --mgs-z: 2147483647;
  --mgs-col: 280px;   /* largeur de la colonne de gauche (logo / facettes) */
  --mgs-gutter: 24px; /* espace entre colonne gauche et zone produits */

  position: fixed;
  inset: 0;
  z-index: var(--mgs-z);
  display: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--mgs-text);
  -webkit-font-smoothing: antialiased;
}

.mgs-root.mgs-open { display: block; }

.mgs-root *, .mgs-root *::before, .mgs-root *::after { box-sizing: border-box; }

/* :where() : reset sans poids de spécificité, pour que les classes
   de boutons (chips, filtres, appliquer...) puissent le surcharger */
.mgs-root :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Certains thèmes fixent la typo sur « p, ul li » (Horizon : police, taille,
   interlignage du corps de texte) : elle ne doit pas entrer dans le layer. */
.mgs-root :where(li, p) {
  font: inherit;
  letter-spacing: inherit;
}

.mgs-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mgs-open .mgs-backdrop { opacity: 0; }

.mgs-layer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--mgs-bg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mgs-open .mgs-layer { opacity: 1; transform: none; }

/* ---------- Header ---------- */

/* Barre de recherche collée au logo (colonne à la largeur du logo), comme
   le header Doofinder ; un grand logo reste plafonné à --mgs-col. */
.mgs-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 32px;
  column-gap: var(--mgs-gutter);
  row-gap: 12px;
  align-items: end;
  padding: 32px 48px 0;
  flex: none;
}

.mgs-logo {
  display: block;
  height: 48px;
  max-width: var(--mgs-col);
  width: auto;
  object-fit: contain;
}

.mgs-searchbox {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  width: 100%;
  border-bottom: 1px solid var(--mgs-accent);
}

.mgs-searchbox input[type="search"] {
  flex: 1;
  height: 100%;
  padding: 0 4px;
  font: inherit;
  font-size: 16px;
  color: #000;
  background: transparent;
  border: 0;
  outline: none;
  appearance: none;
}

.mgs-searchbox input[type="search"]::-webkit-search-cancel-button { display: none; }

/* Spinner de l'« impression de recherche » (searchDelay) */
.mgs-search-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0 7px;
  display: none;
  border: 2px solid var(--mgs-border);
  border-top-color: var(--mgs-accent);
  border-radius: 50%;
  animation: mgs-spin 0.7s linear infinite;
}

.mgs-searching .mgs-search-spinner { display: block; }

@keyframes mgs-spin { to { transform: rotate(360deg); } }

.mgs-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mgs-text);
}

/* Glyphe volontairement large dans le bouton 32px, comme Doofinder (30px) :
   une croix à 20px paraissait trop discrète. */
.mgs-close svg { width: 28px; height: 28px; }

.mgs-close:hover { color: var(--mgs-accent-hover); }

/* ---------- Dernières recherches (chips sous la barre) ---------- */

.mgs-suggestions {
  grid-column: 2;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  width: 100%;
}

.mgs-initial .mgs-suggestions.mgs-has-items { display: flex; }

.mgs-suggestions-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mgs-muted);
}

@media (min-width: 769px) {
  .mgs-suggestions-title::after { content: ':'; }
}

.mgs-suggestions-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mgs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 14px;
  font-size: 14px;
  line-height: 21px;
  color: var(--mgs-text);
  background: transparent;
  border: 1px solid var(--mgs-muted);
  border-radius: 800px;
}

.mgs-chip-term { cursor: pointer; }
.mgs-chip-term:hover { color: var(--mgs-accent-hover); }

.mgs-chip-remove {
  display: inline-flex;
  align-items: center;
  color: var(--mgs-muted);
}

.mgs-chip-remove svg { width: 14px; height: 14px; }
.mgs-chip-remove:hover { color: var(--mgs-text); }

.mgs-clear-recent {
  font-size: 14px;
  color: var(--mgs-accent);
}

.mgs-clear-recent:hover { color: var(--mgs-accent-hover); }

/* ---------- État initial (recherche vide, à la Doofinder) ---------- */

.mgs-initial .mgs-layer { height: auto; max-height: 92vh; padding-bottom: 32px; }
.mgs-initial .mgs-content { overflow: visible; }
.mgs-initial .mgs-meta { position: static; }
.mgs-initial .mgs-sort, .mgs-initial .mgs-filters-button { display: none; }

.mgs-initial .mgs-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--mgs-text);
  line-height: 27px;
}

.mgs-popular { width: 100%; }

.mgs-popular-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  margin-bottom: 8px;
  color: var(--mgs-text);
}

.mgs-popular-list { list-style: none; margin: 0; padding: 0; }

.mgs-popular-list button {
  display: block;
  padding: 5.5px 0; /* lignes de 32px, comme Doofinder */
  font-size: 14px;
  line-height: 21px;
  color: var(--mgs-text);
  text-align: left;
}

.mgs-popular-list button:hover { color: var(--mgs-accent-hover); }

/* Carrousel de l'état initial */

.mgs-initial .mgs-results { position: relative; }

.mgs-initial .mgs-grid {
  display: flex;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.mgs-initial .mgs-grid::-webkit-scrollbar { display: none; }

/* 240px = largeur de carte Doofinder (padding 24 + image 190 + 24) */
.mgs-initial .mgs-card { flex: 0 0 240px; min-width: 0; max-width: 240px; }

.mgs-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mgs-text);
  background: var(--mgs-bg);
  border: 1px solid var(--mgs-border);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mgs-carousel-arrow svg { width: 16px; height: 16px; }
.mgs-carousel-arrow:hover { border-color: var(--mgs-accent); }
.mgs-carousel-arrow--prev { left: -12px; }
.mgs-carousel-arrow--next { right: -12px; }

/* Géométrie desktop calquée sur le layer Doofinder (delihemp-pro.fr) :
   - titres à 32px sous la barre (ou sous les dernières recherches) ;
   - colonne des recherches populaires à la largeur de son contenu, 24px de
     gouttière ;
   - « Produits recommandés » décalé de 40px, cartes à 36px du bord de colonne :
     les flèches (chevron 24px, couleur d'accent) occupent la marge, à côté des
     cartes et non par-dessus. */
@media (min-width: 769px) {
  .mgs-initial .mgs-content { padding-top: 32px; }
  .mgs-initial .mgs-suggestions { margin-top: 0; }
  .mgs-initial .mgs-aside { width: auto; }
  .mgs-initial .mgs-aside:not(:has(.mgs-popular)) { display: none; }
  .mgs-initial .mgs-meta { padding: 0 0 0 40px; margin-bottom: 8px; }
  .mgs-initial .mgs-grid { margin: 0 32px; padding: 4px; }

  .mgs-initial .mgs-carousel-arrow {
    top: 35px; /* titre 27px + 8px */
    bottom: 0;
    width: 24px;
    height: auto;
    overflow: hidden;
    color: var(--mgs-accent);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .mgs-initial .mgs-carousel-arrow svg { flex: none; width: 40px; height: 40px; }
  .mgs-initial .mgs-carousel-arrow:hover { opacity: 0.8; }
  .mgs-initial .mgs-carousel-arrow--prev { left: -4px; }
  .mgs-initial .mgs-carousel-arrow--next { right: -4px; }

  /* Pastilles des dernières recherches : 32px, texte gris, croix 18px */
  .mgs-suggestions .mgs-chip { height: 32px; padding: 0; gap: 0; color: var(--mgs-muted); }
  .mgs-suggestions .mgs-chip-term { padding: 0 12px; line-height: 30px; }
  .mgs-suggestions .mgs-chip-remove { height: 30px; padding: 0 8px 0 4px; }
  .mgs-suggestions .mgs-chip-remove svg { width: 18px; height: 18px; }
}

@media (max-width: 768px) {
  .mgs-initial .mgs-aside {
    position: static;
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
  }
  .mgs-initial .mgs-content { flex-direction: column; }
  /* En colonne, .mgs-content garde `align-items: flex-start` (utile en ligne sur
     desktop) : sans largeur explicite, .mgs-results se réduit à son contenu et
     la grille des produits recommandés s'écrase. On l'étire à pleine largeur. */
  .mgs-initial .mgs-results { width: 100%; }
}

/* ---------- Contenu ---------- */

.mgs-content {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  padding: 16px 48px 0;
  overflow: hidden auto;
}

/* ---------- Facettes (aside) ---------- */

.mgs-aside {
  flex: none;
  width: var(--mgs-col);
  margin: 0 var(--mgs-gutter) 48px 0;
  background: var(--mgs-bg);
}

.mgs-aside-head, .mgs-aside-foot { display: none; }

.mgs-quick-cats { display: none; }

.mgs-aside-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
}

.mgs-aside-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mgs-aside-close svg { width: 20px; height: 20px; }

.mgs-facet { margin-bottom: 32px; }

.mgs-facet-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mgs-facet-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
}

.mgs-facet-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}

.mgs-facet.mgs-collapsed .mgs-facet-toggle svg { transform: rotate(180deg); }
.mgs-facet.mgs-collapsed .mgs-facet-body { display: none; }

.mgs-facet-search {
  position: relative;
  margin: 4px 0 16px;
}

.mgs-facet-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 40px;
  font: inherit;
  font-size: 14px;
  color: var(--mgs-text);
  background: var(--mgs-bg);
  border: 1px solid var(--mgs-border);
  border-radius: 6px;
  outline: none;
}

.mgs-facet-search input:focus { border-color: var(--mgs-accent); }

.mgs-facet-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--mgs-muted);
  pointer-events: none;
}

.mgs-facet-options { list-style: none; margin: 0; padding: 0; }

.mgs-facet-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 21px;
}

.mgs-facet-option input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--mgs-border);
  border-radius: 4px;
  background: var(--mgs-bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mgs-facet-option input[type="checkbox"]:checked {
  background: var(--mgs-accent);
  border-color: var(--mgs-accent);
}

.mgs-facet-option input[type="checkbox"]:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.mgs-facet-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgs-facet-option-count { color: var(--mgs-muted); }

.mgs-facet-more-info {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--mgs-muted);
  text-align: right;
}

.mgs-facet-more {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px auto 0;
  font-size: 12px;
}

.mgs-facet-more svg { width: 14px; height: 14px; }
.mgs-facet-more:hover { color: var(--mgs-accent-hover); }

/* Slider prix */

.mgs-price {
  position: relative;
  padding: 34px 12px 26px;
}

.mgs-price-rail {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: #e4e5e6;
}

.mgs-price-track {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--mgs-accent);
}

.mgs-price-ticks {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 100%;
  height: 6px;
  background-image: repeating-linear-gradient(
    to right, var(--mgs-border) 0, var(--mgs-border) 1px, transparent 1px, transparent 8.33%
  );
}

.mgs-price-handle {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid var(--mgs-muted);
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}

.mgs-price-handle:active { cursor: grabbing; border-color: var(--mgs-accent-active); }

/* Certains thèmes (Dawn & dérivés) masquent les <div> vides via une règle
   `div:empty { display: none }` de leur base.css. Nos poignées de prix, la
   barre de progression, les graduations et le repère de scroll infini sont des
   div structurels vides : on force leur affichage (sinon slider insaisissable
   et scroll infini cassé sur ces thèmes). */
.mgs-root .mgs-price-handle,
.mgs-root .mgs-price-track,
.mgs-root .mgs-price-ticks,
.mgs-root .mgs-sentinel,
.mgs-root .mgs-card-link,
.mgs-root .mgs-backdrop { display: block !important; }

.mgs-price-value {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 2px 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--mgs-accent);
  border-radius: 4px;
  white-space: nowrap;
}

.mgs-price-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 14px;
  color: var(--mgs-text);
}

/* ---------- Résultats ---------- */

.mgs-results {
  position: relative;
  flex: 1;
  min-width: 0;
}

.mgs-meta {
  position: sticky;
  top: 0;
  /* Strictement au-dessus des badges (2) : à égalité, la grille — plus tard dans
     le DOM — peindrait par-dessus, et le bouton Filtres mobile (z5), pris dans
     ce contexte d'empilement, serait recouvert avec elle. */
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 32px;
  background: var(--mgs-bg);
}

.mgs-sort { position: relative; }

.mgs-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  font-size: 14px;
}

.mgs-sort-button svg { width: 14px; height: 14px; }

.mgs-sort-menu {
  position: absolute;
  /* Son propre niveau : sur mobile, la ligne .mgs-meta repasse en statique et
     son z-index ne joue plus — le menu passait alors sous les cartes qui le
     suivent. 6 : au-dessus des cartes, des badges (2) et du bouton Filtres (5),
     sous le panneau de filtres (10). */
  z-index: 6;
  right: 0;
  top: calc(100% + 4px);
  min-width: 190px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background: var(--mgs-bg);
  border: 1px solid var(--mgs-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  display: none;
}

.mgs-sort.mgs-open-menu .mgs-sort-menu { display: block; }

.mgs-sort-menu button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  text-align: left;
  font-size: 14px;
}

.mgs-sort-menu button:hover { background: #f2f3f2; }
.mgs-sort-menu button[aria-selected="true"] { color: var(--mgs-accent); font-weight: 700; }

.mgs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding-bottom: 48px;
}

/* Carte produit */

.mgs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--mgs-bg);
  border: 1px solid var(--mgs-border);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}

.mgs-card:hover { border-color: var(--mgs-accent); }

/* ---------- Badges superposés aux cartes ---------- */

/* container-type permet aux unités cqw de valoir « % de la largeur de la
   carte » : un même réglage rend donc pareil sur mobile et desktop, quelle
   que soit la taille de la carte. */
/* Ancrage des badges — volontairement différent selon la ligne :
   - haut : la CARTE, le badge peut donc déborder sur sa marge blanche ;
   - bas  : l'IMAGE, sinon un badge « en bas » atterrirait sous le prix.
   Les deux servent de référence aux `cqw` et mesurent la même largeur (l'image
   occupe 100 % de la boîte de contenu de la carte) : une taille en % rend donc
   pareil des deux côtés. */
.mgs-card { container-type: inline-size; }

.mgs-badge {
  position: absolute;
  z-index: 2;            /* au-dessus de l'image… */
  pointer-events: none;  /* …mais le clic traverse jusqu'au lien de la carte */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: calc(var(--mgs-b-size-d) * 1cqw);
}

/* Emoji et texte : la taille pilote la police, pas la largeur */
.mgs-badge--emoji,
.mgs-badge--text {
  width: auto;
  font-size: calc(var(--mgs-b-size-d) * 1cqw);
}

.mgs-badge--text {
  padding: 0.4em 0.7em;
  font-weight: 700;
  white-space: nowrap;
  /* Hauteur du badge = 1em de texte + 2 × 0.4em de padding, soit 1.8em ; sa
     moitié (0.9em) suffit donc à obtenir une pilule. L'arrondi en % de cette
     demi-hauteur reste fidèle à toutes les tailles, ce qu'une valeur en px
     ne ferait pas. 100 par défaut = l'apparence d'origine.
     La bordure s'ajoute à la hauteur et `border-radius` décrit le bord EXTERNE :
     sans l'inclure, un badge bordé à 100 garderait des méplats au lieu d'être
     une vraie pilule.
     Chaque angle retombe sur l'arrondi général tant qu'il n'est pas défini :
     une seule règle sert donc les deux modes, uniforme et par angle. */
  border-radius:
    calc((0.9em + var(--mgs-b-border, 0px)) * var(--mgs-b-r-tl, var(--mgs-b-radius, 100)) / 100)
    calc((0.9em + var(--mgs-b-border, 0px)) * var(--mgs-b-r-tr, var(--mgs-b-radius, 100)) / 100)
    calc((0.9em + var(--mgs-b-border, 0px)) * var(--mgs-b-r-br, var(--mgs-b-radius, 100)) / 100)
    calc((0.9em + var(--mgs-b-border, 0px)) * var(--mgs-b-r-bl, var(--mgs-b-radius, 100)) / 100);
}

.mgs-badge img { display: block; width: 100%; height: auto; }

.mgs-badge--shape { aspect-ratio: 1; }
.mgs-badge--circle { border-radius: 50%; }
.mgs-badge--square { border-radius: 4px; }

/* Ancrages : décalages en % de la largeur de la carte */
/* Tous les badges sont ancrés à la CARTE : à gauche/droite ils affleurent son
   bord (et non celui de l'image, en retrait du padding). Les badges du bas
   restent visuellement au bas de l'IMAGE : leur bord inférieur est calé à
   « 24px (padding) + hauteur de l'image (100cqw) − marge », `translateY(-100%)`
   ramenant le bord bas du badge sur cette ligne quelle que soit sa hauteur. */
.mgs-badge--top-left     { top: calc(var(--mgs-b-y) * 1cqw); left: calc(var(--mgs-b-x) * 1cqw); }
.mgs-badge--top-right    { top: calc(var(--mgs-b-y) * 1cqw); right: calc(var(--mgs-b-x) * 1cqw); }
.mgs-badge--top-center   { top: calc(var(--mgs-b-y) * 1cqw); left: 50%; transform: translateX(-50%); }
.mgs-badge--bottom-left  { top: calc(24px + (100 - var(--mgs-b-y)) * 1cqw); left: calc(var(--mgs-b-x) * 1cqw); transform: translateY(-100%); }
.mgs-badge--bottom-right { top: calc(24px + (100 - var(--mgs-b-y)) * 1cqw); right: calc(var(--mgs-b-x) * 1cqw); transform: translateY(-100%); }
.mgs-badge--bottom-center{ top: calc(24px + (100 - var(--mgs-b-y)) * 1cqw); left: 50%; transform: translate(-50%, -100%); }

.mgs-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 12px;
  overflow: hidden;
}

.mgs-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mgs-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
}

.mgs-card-prices {
  display: flex;
  justify-content: flex-end; /* DH Pro : prix à droite de la case */
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.mgs-card-price { font-weight: 700; color: var(--mgs-accent); } /* DH Pro : prix en vert */

.mgs-card-price--compare {
  color: var(--mgs-muted);
  text-decoration: line-through;
  font-size: 12px;
}

/* ---------- « Impression de recherche » : cartes squelettes ---------- */

.mgs-skel {
  background: linear-gradient(90deg, #f1f1f2 25%, #e5e5e7 37%, #f1f1f2 63%);
  background-size: 400% 100%;
  animation: mgs-shimmer 1.2s ease infinite;
  border-radius: 4px;
}

@keyframes mgs-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.mgs-skel-card { pointer-events: none; }

.mgs-skel-line {
  height: 12px;
  width: 90%;
  margin-top: 6px;
}

.mgs-skel-line--short { width: 60%; }

.mgs-skel-price {
  display: inline-block;
  height: 14px;
  width: 40%;
}

.mgs-skel-count {
  display: inline-block;
  height: 14px;
  width: 150px;
  vertical-align: middle;
}

.mgs-card-price--sale { color: #c0392b; }

.mgs-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* États vides / chargement */

.mgs-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--mgs-muted);
}

.mgs-loading { opacity: 0.5; pointer-events: none; }

/* Retour en haut */

.mgs-back-to-top {
  position: fixed;
  right: 48px;
  bottom: 32px;
  z-index: 4; /* même raison que .mgs-meta : à 2, les badges peindraient dessus */
  width: 48px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--mgs-text-light);
  background: var(--mgs-accent);
  border: 1px solid var(--mgs-accent);
  border-radius: 500px;
}

.mgs-back-to-top.mgs-visible { display: flex; }
.mgs-back-to-top:hover { background: var(--mgs-accent-hover); }
.mgs-back-to-top svg { width: 20px; height: 20px; }

/* Bouton filtres (mobile) */

.mgs-filters-button {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  /* padding bas : sans lui, les chips (dernières recherches, catégories) touchent
     le bord de la zone de défilement et les cartes viennent s'y coller au scroll */
  .mgs-header { padding: 16px 16px 12px; grid-template-columns: auto minmax(0, 1fr) 32px; column-gap: 12px; }
  .mgs-logo { height: 40px; max-width: 96px; }
  .mgs-content { padding: 12px 16px 0; }
  .mgs-suggestions { grid-column: 1 / -1; }

  /* chips de filtre rapide par categorie, sous la barre */
  .mgs-quick-cats {
    grid-column: 1 / -1;
    display: none;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 12px 0 0;
    padding-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid #ececec;
  }
  .mgs-quick-cats.mgs-has-items { display: flex; }
  .mgs-initial .mgs-quick-cats { display: none; }

  .mgs-quick-chip {
    flex: none;
    padding: 4px 14px;
    font-size: 14px;
    line-height: 21px;
    color: var(--mgs-text);
    background: #fff;
    border: 1px solid var(--mgs-border);
    border-radius: 800px;
  }

  .mgs-quick-chip.mgs-selected {
    color: #fff;
    background: var(--mgs-accent);
    border-color: var(--mgs-accent);
  }

  /* panneau de filtres : bottom sheet */
  .mgs-aside {
    position: fixed;
    inset: 44px 0 0 0;
    z-index: 10; /* au-dessus du bouton Filtres flottant (5) et des badges (2) */
    width: 100%;
    margin: 0;
    display: none;
    flex-direction: column;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  }

  .mgs-root.mgs-filters-open .mgs-aside { display: flex; }

  .mgs-aside-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    padding: 22px 16px 8px;
  }

  .mgs-aside-head::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: #c9c9cb;
  }

  .mgs-aside-title { font-size: 14px; line-height: 21px; font-weight: 700; }

  .mgs-aside-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 16px 16px;
  }

  .mgs-aside-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid #ececec;
  }

  .mgs-aside-clear {
    font-size: 14px;
    color: var(--mgs-accent);
  }

  .mgs-aside-apply {
    padding: 12px 22px;
    font-size: 14px;
    color: #fff;
    background: var(--mgs-accent);
    border-radius: 800px;
  }

  .mgs-aside-apply:active { background: var(--mgs-accent-active); }

  /* La ligne « N résultats / Trié par » défile avec le contenu : collée en haut,
     elle chevaucherait les cartes. En statique, son z-index est ignoré : le
     bouton Filtres (fixe, z5) répond directement au contexte racine, au-dessus
     des badges (2). */
  .mgs-meta { position: static; }

  /* bouton Filtres flottant, centre en bas */
  .mgs-filters-button {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 5; /* au-dessus des badges (2) ; le panneau de filtres (10) le recouvre */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--mgs-accent);
    border-radius: 800px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  }

  .mgs-filters-button svg { width: 18px; height: 18px; }

  .mgs-back-to-top { display: none !important; }

  /* grille 2 colonnes, cartes compactes */
  .mgs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .mgs-card { padding: 12px; }

  /* Badges : la taille « mobile » du réglage prend le relais */
  .mgs-badge { width: calc(var(--mgs-b-size-m) * 1cqw); }
  .mgs-badge--emoji,
  .mgs-badge--text { width: auto; font-size: calc(var(--mgs-b-size-m) * 1cqw); }

  /* etat initial : plein ecran, comme le Doofinder mobile */
  .mgs-initial .mgs-layer { height: 100%; max-height: none; padding-bottom: 0; }
  .mgs-initial .mgs-content { overflow: hidden auto; }

  /* dernieres recherches : titre + Supprimer tout, chips sur une ligne */
  .mgs-initial .mgs-suggestions.mgs-has-items {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 10px;
  }
  .mgs-suggestions-title { order: 1; color: var(--mgs-text); }
  .mgs-clear-recent { order: 2; justify-self: end; }
  .mgs-suggestions-list {
    order: 3;
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mgs-suggestions-list::-webkit-scrollbar { display: none; }
  .mgs-chip { flex: none; }

  /* recherches populaires : pastilles sur une ligne */
  .mgs-popular-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    margin-bottom: 10px;
  }
  .mgs-popular-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mgs-popular-list::-webkit-scrollbar { display: none; }
  .mgs-popular-list li { flex: none; }
  .mgs-popular-list button {
    padding: 4px 14px;
    border: 1px solid var(--mgs-muted);
    border-radius: 800px;
    font-size: 14px;
  }

  /* separation pleine largeur avant les produits recommandes
     (neutralise le chrome du bottom-sheet : inset, arrondis, ombre) */
  .mgs-initial .mgs-aside {
    position: relative;
    inset: auto;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-radius: 0;
    box-shadow: none;
  }
  .mgs-initial .mgs-aside::after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    bottom: 0;
    height: 6px;
    background: #f2f2f3;
  }

  /* produits recommandes : grille 2 colonnes, titre a gauche */
  .mgs-initial .mgs-meta { justify-content: flex-start; margin-bottom: 12px; }
  .mgs-initial .mgs-count { font-size: 14px; line-height: 21px; }
  .mgs-initial .mgs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    overflow: visible;
  }
  .mgs-initial .mgs-card { max-width: none; }
  .mgs-initial .mgs-carousel-arrow { display: none; }

  /* etat initial : l'aside est un simple bloc, sans chrome de panneau */
  .mgs-initial .mgs-aside-head, .mgs-initial .mgs-aside-foot { display: none; }
  .mgs-initial .mgs-aside-body { padding: 0; overflow: visible; }
}

/* Colonne de gauche volontairement identique à toutes les largeurs : un
   élargissement grand écran (360px) laissait un vide important entre le logo
   et la barre de recherche, 280px suffit aux facettes et au slider prix. */

/* Empêche le scroll de la page derrière le layer */
html.mgs-lock, html.mgs-lock body { overflow: hidden !important; }

/* ---------- Filtres configurables ---------- */

/* valeurs sans résultat, mode « grisées » */
.mgs-facet-option.mgs-dim { color: #b6b8bb; }
.mgs-facet-option.mgs-dim .mgs-facet-option-count { color: #cfd0d2; }

/* pastilles */
.mgs-fpills { display: flex; flex-wrap: wrap; gap: 7px; }
.mgs-fpill {
  border: 1px solid var(--mgs-border);
  border-radius: 800px;
  padding: 5px 13px;
  font-size: 13px;
  color: var(--mgs-text);
  background: #fff;
  cursor: pointer;
}
.mgs-fpill:hover { border-color: var(--mgs-accent); }
.mgs-fpill.mgs-on { background: var(--mgs-accent); border-color: var(--mgs-accent); color: #fff; }
.mgs-fpill.mgs-dim { color: #b6b8bb; }

/* nuancier */
.mgs-fswatches { display: flex; flex-wrap: wrap; gap: 10px; }
.mgs-fswatch {
  width: 52px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  font-size: 11px;
  color: var(--mgs-muted);
}
.mgs-fswatch-disc {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 4px;
  border-radius: 50%;
  border: 1px solid var(--mgs-border);
  box-sizing: border-box;
}
.mgs-fswatch.mgs-on .mgs-fswatch-disc {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mgs-accent);
}
.mgs-fswatch-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mgs-fswatch.mgs-dim { opacity: 0.4; }

/* logos */
.mgs-flogos { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.mgs-flogo {
  background: #fff;
  border: 1px solid var(--mgs-border);
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
}
.mgs-flogo img { display: block; height: 22px; width: auto; max-width: 76px; object-fit: contain; }
.mgs-flogo:hover { border-color: var(--mgs-accent); }
.mgs-flogo.mgs-on { border-color: var(--mgs-accent); box-shadow: 0 0 0 1px var(--mgs-accent); }
.mgs-flogo-text { font-size: 12.5px; color: var(--mgs-text); }
.mgs-flogo.mgs-dim { opacity: 0.4; }

/* menu déroulant : replié par défaut, cadre de champ */
.mgs-facet-dropdown .mgs-facet-header {
  border: 1px solid var(--mgs-border);
  border-radius: 6px;
  padding: 8px 12px;
}
.mgs-facet-dropdown { padding-bottom: 6px; }

/* prix min–max */
.mgs-fminmax { display: flex; align-items: center; gap: 8px; }
.mgs-fminmax input {
  width: 76px;
  border: 1px solid var(--mgs-border);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 14px;
}
.mgs-fminmax-sep { color: var(--mgs-muted); }
.mgs-fminmax-go {
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--mgs-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* chips des filtres actifs, au-dessus des résultats */
.mgs-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.mgs-chip-active {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, var(--mgs-accent) 14%, #fff);
  color: var(--mgs-accent-active);
  border-radius: 800px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mgs-chip-active .mgs-chip-x { opacity: 0.55; font-size: 11px; }
.mgs-chip-active:hover .mgs-chip-x { opacity: 1; }
.mgs-chips-clear {
  color: var(--mgs-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 0;
}

/* disposition « barre horizontale » (desktop) : les groupes deviennent des
   menus dépliants alignés au-dessus des résultats */
@media (min-width: 769px) {
  .mgs-layout-bar .mgs-content { flex-direction: column; }
  .mgs-layout-bar .mgs-aside {
    position: static;
    width: 100%;
    margin: 0 0 18px;
    display: block;
  }
  .mgs-layout-bar .mgs-aside-head,
  .mgs-layout-bar .mgs-aside-foot { display: none; }
  .mgs-layout-bar .mgs-aside-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    padding: 0;
    overflow: visible;
  }
  .mgs-layout-bar .mgs-facet { position: relative; padding: 0; border: 0; }
  .mgs-layout-bar .mgs-facet-header {
    border: 1px solid var(--mgs-border);
    border-radius: 800px;
    padding: 8px 16px;
    gap: 8px;
  }
  .mgs-layout-bar .mgs-facet-body {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 6;
    min-width: 240px;
    max-height: 320px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--mgs-border);
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
    padding: 14px;
  }
  /* en barre, « replié » signifie menu fermé — on inverse la convention */
  .mgs-layout-bar .mgs-facet:not(.mgs-collapsed) .mgs-facet-body { display: block; }
}

/* logos en grille : N par ligne, réglé par le marchand (desktop / mobile) */
.mgs-flogos-grid {
  display: grid;
  grid-template-columns: repeat(var(--mgs-logo-cols-d, 3), 1fr);
}
.mgs-flogos-grid .mgs-flogo { width: 100%; }
@media (max-width: 768px) {
  .mgs-flogos-grid {
    grid-template-columns: repeat(var(--mgs-logo-cols-m, var(--mgs-logo-cols-d, 3)), 1fr);
  }
}

/* ---------- Thèmes qui imposent un style à tous les champs ----------
   Certains habillages stylent tous les champs du site en !important (Halloween
   de Deli Hemp : `input, select, textarea { background: #121212 !important;
   color: … !important }`). Un !important de thème bat nos règles normales quelle
   que soit leur spécificité : nos champs reprennent ici leur apparence en
   !important, la spécificité de .mgs-root départageant alors en notre faveur. */
.mgs-root .mgs-searchbox input[type="search"] {
  background: transparent !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.mgs-root .mgs-facet-search input,
.mgs-root .mgs-fminmax input {
  background: var(--mgs-bg) !important;
  color: var(--mgs-text) !important;
  border: 1px solid var(--mgs-border) !important;
  box-shadow: none !important;
}
.mgs-root .mgs-facet-search input:focus { border-color: var(--mgs-accent) !important; }
.mgs-root .mgs-facet-option input[type="checkbox"] {
  background: var(--mgs-bg) !important;
  border: 1px solid var(--mgs-border) !important;
  box-shadow: none !important;
}
.mgs-root .mgs-facet-option input[type="checkbox"]:checked {
  background: var(--mgs-accent) !important;
  border-color: var(--mgs-accent) !important;
}

/* ---------- Thème delipro (DH Pro) : styles globaux à neutraliser ---------- */
.mgs-root label {
  text-align: left;
  margin-bottom: 0;
}

/* Visiteur non connecté : mention « Connexion pour le prix » à la place du prix,
   au-dessus du lien de la carte pour mener à la page de connexion */
.mgs-card-login {
  margin-left: auto; /* à droite de la case */
  position: relative;
  z-index: 3;
  font-weight: 700;
  color: var(--mgs-accent);
  text-decoration: underline;
}