/**
 * Electropo — Product Card CSS (priorité maximale)
 *
 * CSS dédié aux cards produits WooCommerce.
 * Chargé avec priority 10000 dans wp_enqueue_scripts.
 * Override TOUT : Storefront, WooCommerce natif, electropo-design.css, catalogue-electropo.css.
 *
 * Référence exacte : /mobile-fixes/reference-nextjs/ProductCard.tsx
 *
 * Version 1.0.0 — 2026-09-01
 *
 * @package Electropo
 */

/* ════════════════════════════════════════════════════════════════════════════
   RESET STOREFRONT / WC NATIF — tueur de compression
   Ces règles écrasent tout ce que Storefront/WC injecte sur les cards.
   ════════════════════════════════════════════════════════════════════════════ */

/* Reset Storefront : padding + margin sur les items du grid */
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  clear: none !important;
  list-style: none !important;
}

/* Reset WC : .product-inner / .product-wrapper Storefront ajoute du padding */
.woocommerce ul.products li.product .product-inner,
.woocommerce ul.products li.product .product-wrapper,
.ep-product-card .product-inner,
.ep-product-card .product-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

/* Kill les boutons WC natifs — on utilise ep-card-btn */
.ep-product-card .button:not(.ep-card-btn),
.ep-product-card .added_to_cart,
.ep-product-card .ajax_add_to_cart:not(.ep-card-btn),
.ep-product-card .add_to_cart_button:not(.ep-card-btn) {
  display: none !important;
}

/* Kill le woocommerce-loop-product__link Storefront qui wrappe le titre+image */
.ep-product-card .woocommerce-loop-product__link {
  display: contents !important; /* rend invisible le wrapper sans casser la structure */
  text-decoration: none !important;
}

/* Reset WC prix natif (on utilise ep-card-price-row) */
.ep-product-card .price {
  display: none !important;
}
/* Mais on garde si notre template le réutilise (fallback) */
.ep-product-card .ep-card-price-row .price {
  display: flex !important;
  font-size: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   GRID PRODUITS — 2 colonnes mobile, 3 desktop, 4 large
   ════════════════════════════════════════════════════════════════════════════ */

ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products,
.ep-product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 1280px) {
  ul.products,
  .woocommerce ul.products,
  .ep-product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ARTICLE CARD — structure flex-col, hauteur 100%
   ════════════════════════════════════════════════════════════════════════════ */

article.ep-product-card,
.ep-product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: box-shadow 150ms ease, transform 150ms ease !important;
}

article.ep-product-card:hover,
.ep-product-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09) !important;
  transform: translateY(-1px) !important;
}

article.ep-product-card.ep-product-card--out-of-stock,
.ep-product-card.ep-product-card--out-of-stock {
  opacity: 0.75 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   BADGES TOP-LEFT
   ════════════════════════════════════════════════════════════════════════════ */

.ep-card-badges {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  pointer-events: none !important;
}

.ep-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
}

.ep-badge--promo { background: #E85E47 !important; color: #fff !important; }
.ep-badge--new   { background: #08AAC5 !important; color: #fff !important; }
.ep-badge--eco   { background: #25A96B !important; color: #fff !important; }
.ep-badge--soon  { background: #6e6e73 !important; color: #fff !important; }

/* ════════════════════════════════════════════════════════════════════════════
   BADGE ÉNERGIE TOP-RIGHT
   ════════════════════════════════════════════════════════════════════════════ */

.ep-card-energy-wrap {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.ep-energy-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   IMAGE — padding-top trick 72% (ratio identique au TSX)
   ════════════════════════════════════════════════════════════════════════════ */

.ep-card-image-link {
  display: block !important;
  text-decoration: none !important;
}

.ep-card-image-wrap {
  position: relative !important;
  background: #F5F5F7 !important;
  overflow: hidden !important;
  padding-top: 72% !important; /* ratio 100:72 = ~4:3 portrait léger */
}

.ep-card-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  transition: transform 500ms ease !important;
}

.ep-product-card:hover .ep-card-image {
  transform: scale(1.06) !important;
}

.ep-card-image-placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ep-card-out-of-stock-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,0.70) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ep-card-out-of-stock-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6e6e73 !important;
  background: rgba(255,255,255,0.90) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid #d2d2d7 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   CORPS DE LA CARD — flex-col, gap 6px, padding 16px desktop
   ════════════════════════════════════════════════════════════════════════════ */

.ep-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 16px !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Brand */
.ep-card-brand {
  font-size: 10px !important;
  color: #6e6e73 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Titre */
.ep-card-title-link {
  text-decoration: none !important;
  display: block !important;
}

.ep-card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 150ms ease !important;
  word-break: break-word !important;
}

.ep-card-title-link:hover .ep-card-title {
  color: #08AAC5 !important;
}

/* Rating */
.ep-card-rating {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.ep-stars {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 13px !important;
}

.ep-star-wrap {
  position: relative !important;
  display: inline-block !important;
  color: #d2d2d7 !important;
  overflow: hidden !important;
  width: 1em !important;
  height: 1em !important;
}

.ep-star-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #FABD00 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.ep-star-empty { color: #d2d2d7 !important; }

.ep-card-rating-count {
  font-size: 11px !important;
  color: #6e6e73 !important;
}

.ep-card-rating-spacer {
  height: 16px !important;
}

/* Specs */
.ep-card-specs {
  font-size: 11px !important;
  color: #6e6e73 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

/* Spacer flex */
.ep-card-spacer {
  flex: 1 !important;
  min-height: 4px !important;
}

/* Prix */
.ep-card-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
}

.ep-card-price {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: #1d1d1f !important;
}

.ep-card-price--sale {
  color: #E85E47 !important;
}

.ep-card-price-original {
  font-size: 12px !important;
  color: #6e6e73 !important;
  text-decoration: line-through !important;
  line-height: 1 !important;
}

/* Stock */
.ep-card-stock {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

.ep-stock-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.ep-stock-dot--in   { background: #25A96B !important; }
.ep-stock-dot--out  { background: #EF4444 !important; }
.ep-stock-dot--soon { background: #6e6e73 !important; }

.ep-stock-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ep-stock-label--in   { color: #25A96B !important; }
.ep-stock-label--out  { color: #EF4444 !important; }
.ep-stock-label--soon { color: #6e6e73 !important; }

/* ════════════════════════════════════════════════════════════════════════════
   BOUTON ADD TO CART — pill pleine largeur, JAMAIS tronqué
   ════════════════════════════════════════════════════════════════════════════ */

.ep-card-btn,
a.ep-card-btn,
span.ep-card-btn {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 0 !important;
  margin-top: 8px !important;
  min-height: 44px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: visible !important;    /* JAMAIS overflow: hidden — sinon texte tronqué */
  text-overflow: unset !important; /* JAMAIS ellipsis */
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease !important;
  box-sizing: border-box !important;
  letter-spacing: 0 !important;
}

/* btn-glass-dark (produits chauds — radiateurs, chauffage) */
.ep-card-btn--dark {
  background: #083E5E !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(8,62,94,0.20) !important;
}
.ep-card-btn--dark:hover,
a.ep-card-btn--dark:hover {
  background: #052B40 !important;
  color: #fff !important;
}

/* btn-snow (climatiseurs, rafraîchisseurs) */
.ep-card-btn--snow {
  background: linear-gradient(180deg, #08AAC5 0%, #0694AC 60%, #057E93 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(8,170,197,0.25) !important;
}
.ep-card-btn--snow:hover,
a.ep-card-btn--snow:hover {
  background: linear-gradient(180deg, #0694AC 0%, #057E93 100%) !important;
  color: #fff !important;
}

/* Désactivé (rupture + coming soon) */
.ep-card-btn--disabled,
span.ep-card-btn--disabled {
  background: #F5F5F7 !important;
  color: #6e6e73 !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SIDEBAR #secondary STOREFRONT — masquée définitivement
   ════════════════════════════════════════════════════════════════════════════ */

#secondary,
.widget-area,
.storefront-sidebar,
aside#secondary {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Le contenu principal prend toute la largeur quand sidebar cachée */
.storefront-full-width-content #primary,
#primary,
.site-main,
#main {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  float: none !important;
}

/* Layout Storefront 2 colonnes → 1 colonne */
.storefront-two-column-right #primary,
.storefront-two-column-left #primary {
  width: 100% !important;
  float: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — max-width: 768px
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Grid 2 colonnes strictes ≥375px */
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .ep-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Card : padding réduit à 8px pour gagner de l'espace sur 165px wide */
  .ep-card-body {
    padding: 8px !important;
    gap: 4px !important;
  }

  /* Image : légèrement plus haute sur mobile = meilleure présentation */
  .ep-card-image-wrap {
    padding-top: 80% !important;
  }

  .ep-card-image {
    padding: 8px !important;
  }

  /* Titre : 12px sur mobile (était 14px) pour éviter overflow à 2 lettres/ligne */
  .ep-card-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* Prix : 15px sur mobile */
  .ep-card-price {
    font-size: 15px !important;
  }

  .ep-card-price-original {
    font-size: 11px !important;
  }

  /* Stock : compact */
  .ep-stock-label {
    font-size: 10px !important;
  }

  /* Bouton : taille réduite mais JAMAIS tronqué
     Sur ~165px wide (2 col, 10px gap, 20px page padding) :
     165px - 16px padding = 149px utile
     "Ajouter au panier" = ~120px en 11px bold → OK
     "In den Warenkorb" = ~130px en 11px bold → OK à 11px
  */
  .ep-card-btn,
  a.ep-card-btn,
  span.ep-card-btn {
    font-size: 11px !important;
    padding: 8px 10px !important;
    min-height: 40px !important;
    margin-top: 6px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Badges : légèrement plus petits */
  .ep-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  .ep-energy-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
  }

  /* Rating : compact */
  .ep-stars {
    font-size: 11px !important;
  }

  .ep-card-rating-count {
    font-size: 10px !important;
  }

  .ep-card-rating-spacer {
    height: 12px !important;
  }

}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — max-width: 480px (iPhone SE 375px)
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  ul.products,
  .woocommerce ul.products,
  .ep-product-grid {
    gap: 8px !important;
  }

  .ep-card-body {
    padding: 7px !important;
    gap: 3px !important;
  }

  .ep-card-title {
    font-size: 11.5px !important;
  }

  .ep-card-btn,
  a.ep-card-btn {
    font-size: 10.5px !important;
    padding: 7px 8px !important;
    min-height: 38px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   KILL Storefront CSS qui compresse les cards
   ════════════════════════════════════════════════════════════════════════════ */

/* Storefront ajoute une bordure + padding sur l'article */
.woocommerce ul.products li.product:not(.ep-product-card) {
  /* N/A — nos articles ont la classe ep-product-card */
}

/* Forcer woocommerce-loop-product__title à ne pas interférer avec ep-card-title */
.ep-product-card .woocommerce-loop-product__title {
  display: none !important;
}

/* WooCommerce ajoute parfois un padding-bottom via .products à l'intérieur du li */
.ep-product-card > * {
  /* pas de reset global ici — ciblé case par case */
}

/* Storefront : .storefront-handheld-footer-bar parfois interfère avec le layout */
.storefront-handheld-footer-bar ~ #page .ep-product-card {
  /* pas d'impact — mais on neutralise si présent */
}