/* ===========================================================
   CARTE PRODUIT HORIZONTALE ULTRA-COMPACTE — MOBILE (<=767px)
   SCOPÉE : appliquer seulement à l'intérieur d'un conteneur
   .only-compact-cards
   =========================================================== */
@media (max-width: 767px) {

  /* ================== Variables ================== */
  .only-compact-cards .wd-products {
    --img-col: 156px;
    --img-ratio: 1 / 1;
    --grid-col-gap: 12px;
    --grid-row-gap: 4px;

    --card-mt: 0px;
    --card-mb: 12px;

    --card-pad-t: 18px;
    --card-pad-r: 10px;
    --card-pad-b: 18px;
    --card-pad-l: 8px;
    --card-radius: 12px;
	--card-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);

    --title-font: inherit;
    --title-size: 13.5px;
    --title-weight: 600;
    --title-color: var(--wd-title-color, var(--color-heading, currentColor));

    --brand-font: inherit;
    --brand-size: 12px;
    --brand-weight: 500;
    --brand-color: var(--wd-text-color, currentColor);

    --stock-font: inherit;
    --stock-size: 13px;
    --stock-weight: 600;
    --stock-color: var(--wd-success-color, #464646);

    --price-font: inherit;
    --price-size: 16px;
    --price-weight: 700;
    --price-color: var(--wd-primary-color, currentColor);
    --price-gap: 6px;

    --price-del-font: inherit;
    --price-del-size: 15px;
    --price-del-weight: 500;
    --price-del-color: var(--title-color);

    /* taille carrée du bouton mobile (Woodmart ~40px) */
    --btn-square: 40px;
  }

.only-compact-cards .wd-products.wd-grid-g {
  display: grid !important;         /* on conserve la grille Woodmart */
  grid-template-columns: 1fr;       /* 1 produit par ligne */
  grid-auto-flow: row;
  row-gap: var(--grid-row-gap, 10px);
}

  .only-compact-cards .wd-products .product-grid-item {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: var(--card-mt) !important;
    margin-bottom: var(--card-mb) !important;
  }

  .only-compact-cards .wd-products .product-grid-item:last-child {
    margin-bottom: 0 !important;
  }

  /* 1) Carte : 2 colonnes [image | contenu] */
  .only-compact-cards .wd-products .product-grid-item .product-wrapper {
    display: grid !important;
    grid-template-columns: var(--img-col) 1fr !important;
    column-gap: var(--grid-col-gap) !important;
    align-items: stretch !important;
    padding: var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l) !important;
    border-radius: var(--card-radius);
    text-align: left !important;

    /* ↓ Ombre portée d’après ton screen */
    box-shadow: var(--card-shadow, 0px 1px 1px rgba(0, 0, 0, 0.1));
    background-color: #fff; /* optionnel mais conseillé pour bien voir l’ombre */
  }

  /* 2) Colonne image */
  .only-compact-cards .wd-products .product-grid-item .product-element-top {
    grid-column: 1 !important;
    grid-row: 1 / span 5 !important;
    margin: 0 !important;
  }

  .only-compact-cards .wd-products .product-grid-item .product-image-link {
    display: block !important;
  }

  .only-compact-cards .wd-products .product-grid-item .product-image-link img {
    width: 100% !important;
    aspect-ratio: var(--img-ratio) !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .only-compact-cards .wd-products .product-grid-item .wd-buttons {
    display: none !important;
  }

  .only-compact-cards .wd-products .product-grid-item .product-labels {
    transform: scale(.9);
    transform-origin: top left;
  }

  /* 3) Colonne contenu (sélecteur Woodmart) */
  .only-compact-cards .wd-products .product-grid-item .product-element-bottom {
    grid-column: 2 !important;
    grid-row: 1 / span 5 !important;
    padding: 0 !important;
    margin: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "title  title"
      "brand  brand"
      "rating rating"
      "stock  stock"
      "price  btn" !important;
    row-gap: var(--grid-row-gap) !important;
    column-gap: 10px !important;
    text-align: left !important;

    /* ===== centrage vertical de tout le contenu ===== */
    height: 100% !important;            /* occupe toute la hauteur de la carte */
    align-content: center !important;    /* centre les rangées verticalement */
    justify-items: start !important;     /* contenu aligné à gauche */
    grid-auto-rows: min-content !important; /* empêche l'étirement des lignes */
  }

  /* Titre */
  .only-compact-cards .wd-products .product-grid-item .product-element-bottom .wd-entities-title {
    grid-area: title !important;
    margin: 0 !important;
    font-family: var(--title-font) !important;
    font-size: var(--title-size) !important;
    font-weight: var(--title-weight) !important;
    line-height: 1.3 !important;
    color: var(--title-color) !important;
  }

  /* Marque */
  .only-compact-cards .wd-products .product-grid-item .product-element-bottom .wd-product-brands-links {
    grid-area: brand !important;
    margin: 0 !important;
    font-family: var(--brand-font) !important;
    font-size: var(--brand-size) !important;
    font-weight: var(--brand-weight) !important;
    color: var(--brand-color) !important;
    padding-top: 2px;
    padding-bottom: 3px;
  }

  /* Avis */
  .only-compact-cards .wd-products .product-grid-item .product-element-bottom .star-rating {
    grid-area: rating !important;
    margin: 0 !important;
    padding-bottom: 3px;
  }

  /* Stock */
  .only-compact-cards .wd-products .product-grid-item .product-element-bottom .wd-product-stock {
    grid-area: stock !important;
    margin: 0 !important;
    font-family: var(--stock-font) !important;
    font-size: var(--stock-size) !important;
    font-weight: var(--stock-weight) !important;
    color: var(--stock-color) !important;
  }

  /* Prix */
  .only-compact-cards .wd-products .product-grid-item .product-element-bottom .wrap-price {
    grid-area: price !important;
    margin: 0 !important;
  }

  .only-compact-cards .wd-products .product-grid-item .product-element-bottom .price {
    margin: 2px 10px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    column-gap: var(--price-gap) !important;
    font-family: var(--price-font) !important;
    font-size: var(--price-size) !important;
    font-weight: var(--price-weight) !important;
    color: var(--price-color) !important;
  }

  .only-compact-cards .wd-products .product-grid-item .product-element-bottom .price del {
    opacity: 1 !important;
    font-family: var(--price-del-font) !important;
    font-size: var(--price-del-size) !important;
    font-weight: var(--price-del-weight) !important;
    color: var(--price-del-color) !important;
  }

  /* 4) Bouton mobile Woodmart (carré) — on garde son style,
        on centre juste les icônes spinner/checked */
  .only-compact-cards .wd-products .product-grid-item .product-element-bottom .wd-add-btn {
    grid-area: btn !important;
    margin: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    overflow: visible !important; /* pas de crop */
  }

  /* Le bouton carré */
  .only-compact-cards .wd-products .product-grid-item .add-to-cart-loop {
    width: var(--btn-square) !important;
    height: var(--btn-square) !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    position: relative !important;
    line-height: 1 !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: 0 !important; /* cache le texte visuellement */
  }

  /* texte accessible mais masqué visuellement */
  .only-compact-cards .wd-products .product-grid-item .add-to-cart-loop span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Icônes Woodmart (spinner/checked) centrées */
  .only-compact-cards .wd-products .product-grid-item .add-to-cart-loop::before,
  .only-compact-cards .wd-products .product-grid-item .add-to-cart-loop::after,
  .only-compact-cards .wd-products .product-grid-item .add-to-cart-loop.loading::before,
  .only-compact-cards .wd-products .product-grid-item .add-to-cart-loop.loading::after,
  .only-compact-cards .wd-products .product-grid-item .add-to-cart-loop.added::before,
  .only-compact-cards .wd-products .product-grid-item .add-to-cart-loop.added::after {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    display: block !important;
  }

  /* ❌ Supprimer le bloc vide sous le bouton */
  .only-compact-cards .wd-products .product-grid-item .product-element-bottom .fade-in-block {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Pas de marge basse parasite */
  .only-compact-cards .wd-products .product-grid-item .product-element-bottom > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* ===========================================================
   Titre sur 3 lignes (toujours scoped)
   =========================================================== */
@media (max-width: 767px) {
  .only-compact-cards .wd-products .product-grid-item .wd-entities-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    white-space: normal !important;
    max-height: calc(1.3em * 3) !important;
    height: auto !important;
  }

  .only-compact-cards .wd-products .product-grid-item .line-clamp-2 {
    -webkit-line-clamp: 3 !important;
    max-height: calc(1.3em * 3) !important;
  }

  .only-compact-cards .wd-products .product-grid-item .wd-entities-title a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    white-space: normal !important;
  }
}

/* ================== Stock : vert + icône propre (sans carré) — SCOPÉ ================== */
@media (max-width: 767px) {
  .only-compact-cards .wd-products {
    --stock-green: #16a34a;        /* vert */
    --stock-icon-size: 15px;       /* taille icône */
    --stock-gap: 3px;              /* espace icône <-> texte */
    --stock-stroke: 0;             /* épaisseur SVG (0 à 2) */
    --stock-faux-bold: 0;          /* épaissir un peu les glyphes (0, 1, 2) */

    /* réglages fins d’alignement icône */
    --stock-icon-pad: 0px;         /* padding global icône (comme avant) */
    --stock-icon-pad-top: 0px;     /* ⇐ nouveau */
    --stock-icon-pad-bottom: 0px;  /* ⇐ nouveau */
    --stock-icon-nudge-x: 0px;
    --stock-icon-nudge-y: 0px;

    /* réglages texte */
    --stock-text-size: 14px;       /* ⇐ taille texte */
    --stock-text-weight: 600;      /* ⇐ graisse texte */
    --stock-text-font: inherit;    /* ⇐ police, change en "Inter", etc. */
    --stock-text-pad-top: 0px;     /* ⇐ padding haut du texte */
    --stock-text-pad-bottom: 0px;  /* ⇐ padding bas du texte */
  }

  /* Bloc "En stock" */
  .only-compact-cards .wd-products .product-grid-item .wd-product-stock.in-stock {
    color: var(--stock-green) !important;
    font-weight: var(--stock-text-weight) !important;
    font-size: var(--stock-text-size) !important;
    font-family: var(--stock-text-font) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--stock-gap) !important;
    line-height: 1.2 !important;

    /* padding vertical du texte */
    padding-top: var(--stock-text-pad-top) !important;
    padding-bottom: var(--stock-text-pad-bottom) !important;
  }

  /* Icône font / <i> / classes "icon" */
  .only-compact-cards .wd-products .product-grid-item .wd-product-stock.in-stock i,
  .only-compact-cards .wd-products .product-grid-item .wd-product-stock.in-stock [class*="icon"] {
    color: var(--stock-green) !important;
    font-size: var(--stock-icon-size) !important;
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;

    /* padding global + haut/bas séparés */
    padding: var(--stock-icon-pad) !important;
    padding-top: calc(var(--stock-icon-pad) + var(--stock-icon-pad-top)) !important;
    padding-bottom: calc(var(--stock-icon-pad) + var(--stock-icon-pad-bottom)) !important;

    position: relative !important;
    transform: translate(var(--stock-icon-nudge-x), var(--stock-icon-nudge-y)) !important;

    text-shadow:
      calc(var(--stock-faux-bold) * 0.5px) 0 0 currentColor,
      calc(var(--stock-faux-bold) * -0.5px) 0 0 currentColor,
      0 calc(var(--stock-faux-bold) * 0.5px) 0 currentColor,
      0 calc(var(--stock-faux-bold) * -0.5px) 0 currentColor !important;
  }

  /* Icône SVG */
  .only-compact-cards .wd-products .product-grid-item .wd-product-stock.in-stock svg {
    width: var(--stock-icon-size) !important;
    height: var(--stock-icon-size) !important;
    display: inline-block !important;
    vertical-align: middle !important;

    /* même logique de padding que l’icône font */
    padding: var(--stock-icon-pad) !important;
    padding-top: calc(var(--stock-icon-pad) + var(--stock-icon-pad-top)) !important;
    padding-bottom: calc(var(--stock-icon-pad) + var(--stock-icon-pad-bottom)) !important;

    position: relative !important;
    transform: translate(var(--stock-icon-nudge-x), var(--stock-icon-nudge-y)) !important;
  }

  .only-compact-cards .wd-products .product-grid-item .wd-product-stock.in-stock svg path,
  .only-compact-cards .wd-products .product-grid-item .wd-product-stock.in-stock svg circle,
  .only-compact-cards .wd-products .product-grid-item .wd-product-stock.in-stock svg rect,
  .only-compact-cards .wd-products .product-grid-item .wd-product-stock.in-stock svg polyline {
    fill: currentColor !important;
    stroke: currentColor !important;
    stroke-width: var(--stock-stroke) !important;
  }

  /* Fallback : “✓” si aucune icône */
  .only-compact-cards .wd-products .product-grid-item .wd-product-stock.in-stock:not(:has(i, [class*="icon"], svg))::before {
    content: "✓";
    display: inline-block;
    font-size: var(--stock-icon-size);
    line-height: 1;
    color: var(--stock-green);
    margin-right: var(--stock-gap);

    /* même système de padding */
    padding: var(--stock-icon-pad);
    padding-top: calc(var(--stock-icon-pad) + var(--stock-icon-pad-top));
    padding-bottom: calc(var(--stock-icon-pad) + var(--stock-icon-pad-bottom));

    position: relative;
    transform: translate(var(--stock-icon-nudge-x), var(--stock-icon-nudge-y));
    text-shadow:
      calc(var(--stock-faux-bold) * 0.4px) 0 0 currentColor,
      calc(var(--stock-faux-bold) * -0.4px) 0 0 currentColor,
      0 calc(var(--stock-faux-bold) * 0.4px) 0 currentColor,
      0 calc(var(--stock-faux-bold) * -0.4px) 0 currentColor;
  }
}