/* =============================================
   BANNIÈRE BOUTIQUE / CATÉGORIE
   ============================================= */

.lbs-shop-banner {
  position: relative;
  height: 400px;
  background-color: var(--lbe-noir);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.lbs-shop-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.lbs-shop-banner__title {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  font-family: var(--lbe-font-title);
  font-size: 46px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: none;
  margin: 0;
  text-align: center;
}

/* =============================================
   BARRE D'OUTILS
   ============================================= */

.lbs-shop-toolbar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Storefront injecte un .storefront-sorting AVANT et APRÈS la grille, chacun
   contenant tri + compteur + pagination. On masque tout ça : notre toolbar
   .lbs-shop-toolbar remplace le tri/compteur, et la pagination du bas est
   ajoutée nativement par WooCommerce (nav.woocommerce-pagination hors du
   .storefront-sorting) via woocommerce_after_shop_loop. */
.storefront-sorting {
  display: none !important;
}

.lbs-shop-toolbar .woocommerce-result-count {
  margin: 0 !important;
  font-size: 13px;
  color: var(--lbe-taupe);
}

.lbs-shop-toolbar .woocommerce-breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  font-size: 13px !important;
  text-align: center !important;
}

.lbs-shop-toolbar .woocommerce-ordering select {
  border: 1px solid #ddd;
  padding: 10px 14px;
  font-family: var(--lbe-font-body);
  font-size: 13px;
  color: var(--lbe-noir);
  background: #fff;
  cursor: pointer;
}

/* Masque tout tri / compteur en double (Storefront / plugins peuvent en
   injecter en haut ET en bas de la liste). On masque tout par défaut… */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
  display: none !important;
}

/* …puis on ne ré-affiche QUE ceux de notre barre d'outils. */
.lbs-shop-toolbar .woocommerce-ordering,
.lbs-shop-toolbar .woocommerce-result-count {
  display: block !important;
}

/* =============================================
   GRILLE PRODUITS — même ADN que homepage
   ============================================= */

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px 30px !important;
  align-items: start !important;
  max-width: 1200px;
  margin: 40px auto 60px !important;
  padding: 0 40px !important;
}

/* Annule le float/clearing par défaut de WooCommerce qui désaligne la grille */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  position: relative;
  text-align: left !important;
}

/* WooCommerce ajoute des classes first/last qui forcent des marges : on neutralise */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  margin: 0 !important;
  clear: none !important;
}

/* Le cadre image (ratio 3/4, slider) est géré par .lbs-card-media
   dans header.css. Zoom doux au survol uniquement. */
.woocommerce ul.products li.product .lbs-card-media__img {
  transition: transform 0.6s ease;
}

.woocommerce ul.products li.product:hover .lbs-card-media__img {
  transform: scale(1.04);
}

/* Titre + prix style template */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--lbe-font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--lbe-noir) !important;
  padding: 16px 0 4px !important;
  margin: 0 !important;
  line-height: 1.4;
}

.woocommerce ul.products li.product .price {
  font-family: var(--lbe-font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--lbe-noir) !important;
  margin: 0 0 12px !important;
  display: block;
}

/* (Le bouton plein-largeur est remplacé par l'icône flottante .lbs-card-cart-btn
   définie dans header.css.) */

/* Badge promo */
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  background: #cf2020 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  padding: 6px 12px !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
}

/* Pagination — centrée en pleine largeur sous la grille produits */
.woocommerce nav.woocommerce-pagination {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 80px !important;
  padding: 0 40px;
  text-align: center;
  /* On neutralise tout contexte grid/flex hérité qui pousserait la nav
     ou ses liens vers la droite. */
  display: block !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box;
}

.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
  display: inline-flex !important;
  justify-content: center;
  gap: 8px;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  margin: 0 !important;
  display: inline-flex !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--lbe-font-body);
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  color: var(--lbe-noir) !important;
  background: #fff !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--lbe-noir) !important;
  color: #fff !important;
  border-color: var(--lbe-noir) !important;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  .lbs-shop-banner { height: 220px; }
  .lbs-shop-banner__title { font-size: 30px; letter-spacing: 0.5px; }
  .lbs-shop-toolbar { padding: 16px 20px; justify-content: center; }
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 10px !important;
    padding: 0 16px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
  }
}

/* ==========================================================================
   GRILLE DE PRODUITS « BLOCS » (wc-block-grid)
   --------------------------------------------------------------------------
   La page panier (et certaines pages Gutenberg) affiche les produits via les
   blocs WooCommerce, dont les classes diffèrent du loop classique. On leur
   applique le même ADN visuel que les cartes du reste du site.
   ========================================================================== */
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 40px 30px !important;
  list-style: none !important;
  margin: 40px auto 0 !important;
  padding: 0 !important;
  max-width: 1200px;
}

/* Carte centrée, comme sur la page d'accueil */
.wc-block-grid__product {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  background: #ffffff;
}

.wc-block-grid__product-link {
  text-decoration: none !important;
  display: block;
}

/* Image : cadre 3/4, radius 10px, comme .lbs-card-media (avec zoom au survol) */
.wc-block-grid__product-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
  background: #f5f5f5;
  margin-bottom: 14px;
}

.wc-block-grid__product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: 10px;
  transition: transform 0.6s ease;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img {
  transform: scale(1.04);
}

/* Titre : même style que les cartes home (Inter, centré, sobre) */
.wc-block-grid__product-title {
  font-family: var(--lbe-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--lbe-noir) !important;
  text-transform: none !important;
  line-height: 1.4;
  padding: 0 12px !important;
  margin: 0 0 4px !important;
}

/* Prix : centré sous le titre, comme la home */
.wc-block-grid__product-price.price,
.wc-block-grid__product .price {
  font-family: var(--lbe-font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--lbe-noir) !important;
  margin: 0 0 12px !important;
  display: block;
}

/* Bouton « Ajouter au panier » : discret, façon lien souligné (la home utilise
   une icône flottante non disponible sur les blocs ; on garde donc un libellé
   sobre plutôt qu'un gros bouton). */
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button {
  display: inline-block;
  background: transparent !important;
  color: var(--lbe-noir) !important;
  border: none !important;
  border-bottom: 1px solid var(--lbe-noir) !important;
  border-radius: 0 !important;
  padding: 4px 2px !important;
  font-family: var(--lbe-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover {
  background: transparent !important;
  color: var(--lbe-accent) !important;
  border-color: var(--lbe-accent) !important;
}

/* Titres de section du panier vide (« Votre panier… » / « Nouveautés… ») */
.wp-block-woocommerce-empty-cart-block .wp-block-heading {
  font-family: var(--lbe-font-title) !important;
  color: var(--lbe-rose-nude);
  letter-spacing: 1px;
}

@media (max-width: 992px) {
  .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 12px !important;
  }
}