/* ---- MDV : loop items boutique ---- */

/* 1. Retour a la ligne equilibre sur les textes */
.e-loop-item .wine-title,
.e-loop-item .wine-title > *,
.e-loop-item .wine-cuvee,
.e-loop-item .wine-cuvee p,
.e-loop-item .wine-domain,
.e-loop-item .wine-domain p,
.e-loop-item .wine-contenance,
.e-loop-item .wine-contenance p {
  text-wrap: balance;
  -webkit-hyphens: none !important;
  hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* 2. Pas de cadre autour de la carte produit */
.e-loop-item .wine-card {
  border: none !important;
}

/* 3. Bouton "Ajouter" plus compact
   (selecteur volontairement plus specifique que la regle Elementor
   .elementor-791 .elementor-element-a5dbb8b .elementor-button) */
.e-loop-item .wine-card .wine-btn a.elementor-button {
  padding: 4px 14px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* 4. TEMPORAIRE : visuel de remplacement en attendant les vraies
   photos produits. A SUPPRIMER une fois les images en place. */
.e-loop-item .wine-frame {
  background-image: url("https://dev.maison-des-vins.com/wp-content/uploads/2026/08/ChatGPT-Image-15-aout-2026-a-22_37_17.png.webp") !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* 5. Fines lignes de separation entre les rangees de la grille */
.elementor-loop-container .e-loop-item {
  position: relative;
}
.elementor-loop-container .e-loop-item::before {
  content: "";
  position: absolute;
  top: calc(var(--grid-row-gap, 39px) / -2);
  left: calc(var(--grid-column-gap, 8px) / -2);
  right: calc(var(--grid-column-gap, 8px) / -2);
  border-top: 1px solid rgba(175, 142, 0, 0.30);
  pointer-events: none;
}
/* pas de ligne au-dessus de la 1re rangee (4 colonnes) */
.elementor-loop-container .e-loop-item:nth-of-type(-n+4)::before { display: none; }
/* pas de debord aux extremites de la grille */
.elementor-loop-container .e-loop-item:nth-of-type(4n+1)::before { left: 0; }
.elementor-loop-container .e-loop-item:nth-of-type(4n)::before { right: 0; }

/* grille a 2 colonnes (tablette + mobile) */
@media (max-width: 1024px) {
  .elementor-loop-container .e-loop-item:nth-of-type(-n+4)::before { display: block; }
  .elementor-loop-container .e-loop-item:nth-of-type(-n+2)::before { display: none; }
  .elementor-loop-container .e-loop-item:nth-of-type(2n+1)::before { left: 0; }
  .elementor-loop-container .e-loop-item:nth-of-type(2n)::before { right: 0; }
}

/* 6. Pastille etiquette (BIO, Vin du Mois...) juste au-dessus de la contenance.
   Le HTML est insere par l'extrait PHP "MDV - Pastille etiquette dans les
   cartes boutique" ; il n'apparait que si le produit a une etiquette. */
.e-loop-item .wine-etiquette {
  top: -11px !important;         /* chevauche le haut de l'image, en miroir de la contenance */
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  z-index: 3 !important;
  padding: 3px 12px !important;  /* pastille fine */
  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* 7. Pastilles etiquettes de la colonne de droite : meme style que la
   pastille des cartes produit (plus fine, meme graisse, meme ivoire). */
.cv-sidebar .cv-pill {
  font-size: 12px !important;
  padding: 3px 12px !important;
  letter-spacing: 1px !important;
  line-height: 1.25 !important;
  color:#fffbf0 !important;
  border: 0 !important;
  border-radius: 999px !important;
}


/* 8. Pagination sur mobile : une seule ligne, quoi qu'il arrive.
   Elle etait en display:block et repassait a la ligne. On la met en
   flex nowrap, on annule les marges laterales des liens (Elementor en
   pose une vingtaine de pixels de chaque cote, en !important : d'ou le
   selecteur repete pour passer devant),.
   Filet de securite : si le nombre de pages augmente au point de ne
   plus tenir, la ligne devient defilable au doigt au lieu de casser. */
@media (max-width: 767px) {

  .elementor-pagination {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    padding-inline: 8px;
  }
  .elementor-pagination::-webkit-scrollbar { display: none; }

  .elementor-pagination .page-numbers.page-numbers.page-numbers {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
  }

  /* "Precedent" / "Suivant" : on ne garde que le chevron.
     Selecteur repete lui aussi, sinon la regle de taille ci-dessus
     l emporterait et le mot resterait visible. */
  .elementor-pagination .page-numbers.prev.prev.prev,
  .elementor-pagination .page-numbers.next.next.next {
    font-size: 0 !important;
    line-height: 1 !important;
  }
  .elementor-pagination .page-numbers.prev::before {
    content: "\2039";
    font-size: 22px !important;
    line-height: 1;
    margin: 0 !important;
    vertical-align: middle;
  }
  .elementor-pagination .page-numbers.next::after {
    content: "\203A";
    font-size: 22px !important;
    line-height: 1;
    margin: 0 !important;
    vertical-align: middle;
  }

}

/* 9. Barre de recherche boutique : texte dans la palette du site.
   Le champ heritait d'un gris bleute (rgb(71,85,105)) etranger a la
   charte ; on passe au brun du site, et l'invite en gris chaud. */
.cv-search input {
  color:#402E15 !important;
  font-family: "Alegreya", Georgia, serif !important;
}
.cv-search input::placeholder {
  color:#5B4B3C !important;
  opacity: 1;
}
.cv-search input::-webkit-input-placeholder {
  color:#5B4B3C !important;
}

/* 9. Chevrons de pagination, desktop uniquement.
   En mobile on garde les mots seuls : la place est comptee. */
@media (min-width: 768px) {

  /* La police Alegreya SC rend les minuscules en petites capitales et
     les majuscules en grandes : le "P" et le "S" ressortaient donc plus
     haut que le reste du mot. En forcant les minuscules, tout le mot
     passe en petites capitales, d'une hauteur uniforme. */
  .elementor-pagination .page-numbers.prev.prev,
  .elementor-pagination .page-numbers.next.next {
    text-transform: lowercase !important;
  }

  .elementor-pagination .page-numbers.prev::before {
    content: "\2039";
    display: inline-block;
    margin-right: .3em;
    font-size: 1.2em;
    line-height: 1;
    vertical-align: -.05em;
  }
  .elementor-pagination .page-numbers.next::after {
    content: "\203A";
    display: inline-block;
    margin-left: .3em;
    font-size: 1.2em;
    line-height: 1;
    vertical-align: -.05em;
  }
}

/* 10. La rubrique "Etiquette" est masquee dans la liste des filtres.
   Elle doit exister pour que le moteur sache filtrer sur les etiquettes
   (c'est elle que declenchent les pastilles Vin du Mois, BIO, etc.),
   mais elle n'a pas a apparaitre a cote de Cepage ou Millesime.
   Les liens restent dans le DOM : un clic programme fonctionne meme
   sur un element masque. */
.cv-attr-group:has(.cv-attr-options[data-group="etiquette"]) {
  display: none !important;
}
.cv-attr-options[data-group="etiquette"] {
  display: none !important;
}