/* AyoPlus - header mini-cart popover + cart count badge.
   Loaded on every front-end page: the header is everywhere.

   The mini-cart classes below (.woocommerce-mini-cart*, .mini_cart_item) only
   ever exist inside the mini-cart, so they are styled unscoped - that way the
   design holds whichever widget renders the panel (Astra header cart, an
   Elementor cart widget, the Woo widget in a sidebar). Only the panel shell
   itself needs wrapper-specific selectors. */

:root {
  --ayo-mc-red: #ee3124;
  --ayo-mc-ink: #101828;
  --ayo-mc-muted: #667085;
  --ayo-mc-line: #eceef1;
}

/* ---------- panel shell ---------- */

/* Le conteneur extérieur reste dans le DOM quand le panneau est fermé, replié à
   hauteur nulle. Lui donner bordure, fond et ombre dessinait un filet de 320px
   à côté de l'icône : la coquille est donc portée par le contenu, que le
   conteneur rogne tant qu'il est fermé. Ici, uniquement la largeur. */
.ast-site-header-cart .ast-site-header-cart-data,
.ast-header-break-point .ast-site-header-cart .ast-site-header-cart-data,
.elementor-menu-cart__container,
.site-header .widget_shopping_cart {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  width: 320px !important;
  position: absolute;
  right: 0 !important;
  top: 25px !important;
}

.widget_shopping_cart_content,
.wpr-mini-cart-content {
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  /* Ne pas se laisser comprimer par un parent flex étroit. */
  flex: none;
  /* Interligne fixée ici : héritée du thème (~1.86), elle étirait chaque
     ligne du panier et donnait ce panneau démesurément haut. */
  line-height: 1.3;
  font-size: 12.5px;
  color: var(--ayo-mc-ink);
  border: 1px solid var(--ayo-mc-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
  overflow: hidden;
}

/* Filet de sécurité : hors page panier, le panneau est rendu par un conteneur
   dont le nom varie (Astra, Royal Elementor, widget Woo) et qui, en largeur
   automatique dans un contexte étroit, réduisait le panneau à une colonne de
   quelques dizaines de pixels. Plutôt que de deviner ce nom, la largeur est
   réclamée par les éléments internes - eux sont toujours les mêmes, et tout
   ancêtre en largeur automatique s'élargit avec eux. */
.woocommerce-mini-cart,
.woocommerce-mini-cart__total,
.woocommerce-mini-cart__buttons,
.woocommerce-mini-cart__empty-message {
  min-width: 296px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Avant le premier chargement des fragments WooCommerce, le contenu peut être
   vide : sans cela, la coquille dessinerait à nouveau un filet. */
.widget_shopping_cart_content:empty {
  display: none;
}

/* ---------- product list ---------- */

.woocommerce-mini-cart {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 46vh;
  overflow-y: auto;
}

.woocommerce-mini-cart-item,
li.mini_cart_item {
  position: relative;
  display: block;
  margin: 0;
  /* Marge à droite réservée au bouton de suppression. */
  padding: 8px 34px 8px 10px;
  border-bottom: 1px solid var(--ayo-mc-line);
  list-style: none;
}

.woocommerce-mini-cart-item:last-child,
li.mini_cart_item:last-child {
  border-bottom: none;
}

/* Woo met l'image et le titre dans le même lien : en grille, la vignette tient
   sa colonne au lieu de flotter par-dessus le texte. */
.woocommerce-mini-cart-item > a:not(.remove),
li.mini_cart_item > a:not(.remove) {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: var(--ayo-mc-ink);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.3;
}

/* Titre borné à deux lignes, la troisième est remplacée par « … ».
   Le <span> vient de mini-cart.php : sans lui, le nom serait un simple nœud
   texte, non clampable. */
.ayo-mc-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.ayo-mc-title .ayoplus-item-weight {
  color: var(--ayo-mc-muted);
  font-weight: 400;
}

.woocommerce-mini-cart-item > a:not(.remove):hover,
li.mini_cart_item > a:not(.remove):hover {
  color: var(--ayo-mc-red);
}

.woocommerce-mini-cart-item img,
li.mini_cart_item img {
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--ayo-mc-line);
  background: #fff;
  min-width: auto !important;
}

/* Quantité / prix : alignés sous le titre, pas sous la vignette. */
.woocommerce-mini-cart-item .quantity,
li.mini_cart_item .quantity {
  display: block;
  /* 32px de vignette + 8px de gouttière : la quantité s'aligne sous le titre. */
  margin: 3px 0 0 40px;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--ayo-mc-muted);
}

.woocommerce-mini-cart-item .quantity .amount,
li.mini_cart_item .quantity .amount {
  font-weight: 600;
  color: var(--ayo-mc-ink);
}

.woocommerce-mini-cart-item dl.variation,
li.mini_cart_item dl.variation {
  margin: 2px 0 0 40px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--ayo-mc-muted);
}

.woocommerce-mini-cart-item dl.variation dt,
.woocommerce-mini-cart-item dl.variation dd,
li.mini_cart_item dl.variation dt,
li.mini_cart_item dl.variation dd {
  display: inline;
  margin: 0;
  font-weight: 400;
}

/* ---------- remove button ---------- */

/* Woo le rend souvent quasi invisible (opacité faible, glyphe nu) et certains
   thèmes le laissent flotter au milieu de l'item. Ancré en haut à droite, en
   pastille bordée, toujours opaque. */
.woocommerce-mini-cart-item a.remove,
.woocommerce-mini-cart-item a.remove_from_cart_button,
li.mini_cart_item a.remove,
li.mini_cart_item a.remove_from_cart_button {
  position: absolute !important;
  top: 10px;
  right: 8px;
  left: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 !important;
  padding: 0;
  border: 1px solid #dfe3e8;
  border-radius: 50%;
  background: #fff !important;
  color: var(--ayo-mc-muted) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  opacity: 1 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.woocommerce-mini-cart-item a.remove:hover,
.woocommerce-mini-cart-item a.remove_from_cart_button:hover,
li.mini_cart_item a.remove:hover,
li.mini_cart_item a.remove_from_cart_button:hover {
  background: var(--ayo-mc-red) !important;
  border-color: var(--ayo-mc-red);
  color: #fff !important;
}

.woocommerce-mini-cart-item a.remove:focus-visible,
li.mini_cart_item a.remove:focus-visible {
  outline: 2px solid var(--ayo-mc-red);
  outline-offset: 2px;
}

/* ---------- total ---------- */

.woocommerce-mini-cart__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 3px 8px;
  margin: 0;
  padding: 9px 10px;
  border-top: 1px solid var(--ayo-mc-line);
  background: #fafbfc;
  font-size: 12.5px;
  line-height: 1.25;
}

.woocommerce-mini-cart__total strong {
  font-weight: 600;
  color: var(--ayo-mc-ink);
}

.woocommerce-mini-cart__total .amount {
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ayo-mc-ink);
  white-space: nowrap;
}

/* Mention explicative éventuelle (« total estimé ») : sur sa propre ligne,
   en petit, pour ne pas concurrencer le montant. */
.woocommerce-mini-cart__total small,
.woocommerce-mini-cart__total .ayo-note {
  flex: 1 0 100%;
  font-size: 11px;
  line-height: 1.25;
  color: var(--ayo-mc-muted);
}

/* ---------- buttons ---------- */

.woocommerce-mini-cart__buttons {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 9px 10px;
  border-top: 1px solid var(--ayo-mc-line);
}

p.woocommerce-mini-cart__buttons a.button {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
  padding: 7px 8px !important;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: #fff;
  border: 1.5px solid var(--ayo-mc-red);
  color: var(--ayo-mc-red);
}

.woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  background: #fff5f4;
}

.woocommerce-mini-cart__buttons .button.checkout {
  background: var(--ayo-mc-red);
  border: 1.5px solid var(--ayo-mc-red);
  color: #fff;
}

.woocommerce-mini-cart__buttons .button.checkout:hover {
  background: #d0261a;
  border-color: #d0261a;
}

/* ---------- empty state ---------- */

.woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: 24px 16px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ayo-mc-muted);
  text-align: center;
}

/* ---------- cart count badge ---------- */

.ayo-cart-badge-host {
  position: relative;
  overflow: visible;
}

.ayo-cart-count {
  position: absolute;
  top: -4px;
  right: -7px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ayo-mc-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-family: inherit;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

/* Panier vide : la pastille reste dans le DOM (WooCommerce la remplace via ses
   fragments après un ajout) mais ne s'affiche pas. */
.ayo-cart-count.is-empty {
  display: none;
}

@media (max-width: 420px) {
  .widget_shopping_cart_content,
  .wpr-mini-cart-content {
    width: calc(100vw - 24px);
  }

  /* Sous 320px de large, la largeur plancher ci-dessus déborderait l'écran. */
  .woocommerce-mini-cart,
  .woocommerce-mini-cart__total,
  .woocommerce-mini-cart__buttons,
  .woocommerce-mini-cart__empty-message {
    min-width: 0;
  }
}

div.wpr-mini-cart-remove {
  top: 0 !important;
}