/* Lou Pizzaiol — boutique par catégories : nav sticky + scroll spy */

.lp-cat-nav {
	position: sticky !important;
	top: 0 !important;
	z-index: 40 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	justify-content: center !important;
	background: #fff !important;
	padding: 14px 16px !important;
	margin: 0 0 32px !important;
	border-bottom: 1px solid #eee1cf !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

.lp-cat-nav a {
	display: inline-block !important;
	padding: 8px 18px !important;
	border-radius: 999px !important;
	background: #f7ede0 !important;
	color: #7a1f22 !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	border: 1px solid transparent !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.lp-cat-nav a:hover {
	background: #f0d9c4 !important;
}

.lp-cat-nav a.is-active {
	background: #7a1f22 !important;
	color: #fff !important;
	border-color: #7a1f22 !important;
}

.lp-cat-section {
	scroll-margin-top: 84px !important;
	margin-bottom: 56px !important;
}

.lp-cat-title {
	text-align: center !important;
	font-size: 28px !important;
	margin-bottom: 24px !important;
	position: relative !important;
}

.lp-cat-title::after {
	content: "" !important;
	display: block !important;
	width: 56px !important;
	height: 3px !important;
	background: #d4a437 !important;
	margin: 10px auto 0 !important;
	border-radius: 2px !important;
}

/* Grille : verrouillée en !important pour ne jamais perdre face aux styles
   flottants par défaut de WooCommerce (.columns-4 li.product{width:22%;float:left}) */
.lp-cat-section .woocommerce ul.products,
.lp-cat-section ul.products,
.lp-cat-section ul.products.columns-4 {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: stretch !important;
	float: none !important;
}

/* Neutralise le clearfix historique de WooCommerce (::before/::after avec
   display:table) : en display:grid, ce pseudo-élément devient un vrai item
   de grille et vole la première case (A1). */
.lp-cat-section ul.products::before,
.lp-cat-section ul.products::after,
.lp-cat-section ul.products.columns-4::before,
.lp-cat-section ul.products.columns-4::after {
	content: none !important;
	display: none !important;
}

/* Cards uniformes : même hauteur, image cadrée, bouton toujours aligné en bas */
.lp-cat-section ul.products li.product,
.lp-cat-section ul.products.columns-4 li.product {
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	width: auto !important;
	height: 100% !important;
	background: #fff !important;
	border: 1px solid #f0e6d6 !important;
	border-radius: 10px !important;
	padding: 14px !important;
	text-align: center !important;
	margin: 0 !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.lp-cat-section ul.products li.product:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
	transform: translateY(-2px) !important;
}

.lp-cat-section ul.products li.product > a:first-child {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	color: inherit !important;
	text-decoration: none !important;
}

.lp-cat-section ul.products li.product img {
	width: 100% !important;
	height: 180px !important;
	max-width: none !important;
	object-fit: cover !important;
	border-radius: 8px !important;
	margin-bottom: 10px !important;
}

/* Page Boissons uniquement : "dézoomer" — object-fit: cover recadre l'image
   pour REMPLIR le cadre 180px, ce qui zoome/rogne canettes et bouteilles
   (surtout sur un visuel carré à contenu étroit, ex. bouteille 1,25L). Sur
   contain, l'image entière reste visible, mise à l'échelle SANS rognage
   (letterboxing sur fond blanc, cohérent avec le fond déjà blanc de la carte
   produit). Scopé à .lp-boissons-content (div ajoutée par
   lp_build_catnav_page_content() dans setup-lou-pizzaiol.php autour du
   contenu de la page Boissons) pour ne PAS affecter la page Pizzas, qui
   partage la même structure .lp-cat-section mais doit garder son rendu
   "cover" plein cadre actuel. */
.lp-boissons-content .lp-cat-section ul.products li.product img {
	object-fit: contain !important;
}

/* Certaines photos (Leffe notamment) sont zoomées via transform: scale() >
   1, ce qui agrandit visuellement l'image au-delà de sa boîte de 180px de
   haut — sans "overflow: visible" ici, la carte produit (ou son lien
   englobant) rogne le haut et le bas de l'image agrandie. */
.lp-boissons-content .lp-cat-section ul.products li.product {
	overflow: visible !important;
}
.lp-boissons-content .lp-cat-section ul.products li.product > a:first-child {
	overflow: visible !important;
}

/* La photo produit Heineken a très peu de marge autour de la bouteille
   (contrairement à Desperados, Leffe...) : "contain" seul ne suffit pas,
   la bouteille remplit quasi tout le cadre 180px. On réduit son échelle
   pour retrouver le même équilibre visuel que les autres bières.
   Plusieurs sélecteurs d'attribut car certaines images sont chargées en
   lazy-load (src remplacé temporairement, vraie URL dans srcset/data-src) —
   tout en !important pour prévaloir sur n'importe quel autre style
   (y compris le CSS additionnel du Customizer, chargé après ce fichier). */
.lp-boissons-content .lp-cat-section ul.products li.product img[src*="heineken" i],
.lp-boissons-content .lp-cat-section ul.products li.product img[srcset*="heineken" i],
.lp-boissons-content .lp-cat-section ul.products li.product img[data-src*="heineken" i],
.lp-boissons-content .lp-cat-section ul.products li.product img[data-lazy-src*="heineken" i] {
	transform: scale(0.55) !important;
}

/* Biere Leffe : zoom +50% demandé par le client. Le fichier réellement
   utilisé s'appelle "image-removebg-preview-2.png" (nom générique laissé
   par remove.bg), pas "leffe" — sélecteur corrigé en conséquence.
   ATTENTION collision corrigée le 23/08/2026 : Cristalline 50cl utilise
   "image-removebg-preview-2-1-300x300.png" (même préfixe générique
   remove.bg + suffixe "-1" ajouté par WordPress car un fichier du même nom
   existait déjà). Le sélecteur en "*=" matchait aussi cette image et lui
   appliquait le zoom x1.5 de Leffe, ce qui la faisait déborder de sa boîte
   (180px de haut) et recouvrir visuellement le titre du produit juste
   en-dessous. Sélecteurs resserrés avec un "." après le "2" : ça matche
   toujours "...preview-2.png" (Leffe, y compris ses futures tailles
   générées par WordPress, qui incluent l'original en fin de srcset) mais
   plus "...preview-2-1-..." (Cristalline). Si un futur média reprend
   encore ce nom générique remove.bg, mieux vaut le renommer dans la
   médiathèque plutôt que rajouter une règle CSS ici — ce fichier accumule
   déjà plusieurs correctifs au cas par cas pour la même cause racine. */
.lp-boissons-content .lp-cat-section ul.products li.product img[src*="image-removebg-preview-2." i],
.lp-boissons-content .lp-cat-section ul.products li.product img[srcset*="image-removebg-preview-2." i],
.lp-boissons-content .lp-cat-section ul.products li.product img[data-src*="image-removebg-preview-2." i],
.lp-boissons-content .lp-cat-section ul.products li.product img[data-lazy-src*="image-removebg-preview-2." i] {
	transform: scale(1.5) !important;
}

/* Coca-Cola Zero 1,25L : dézoom demandé par le client. Le fichier réellement
   utilisé s'appelle "image-removebg-preview-3.png" (nom générique laissé
   par remove.bg, pas "coca-zero") — photo bouteille quasi sans marge
   haut/bas, d'où le rognage visuel avant correction.
   Même collision que "preview-2" ci-dessus corrigée le 23/08/2026 : Cristalline
   50cl (post-2091) a fini avec un fichier "image-removebg-preview-3-1....png"
   (encore le nom générique remove.bg + suffixe "-1" WordPress) qui matchait ce
   sélecteur en "*=" et se retrouvait dézoomée par erreur. "." resserré après le
   "3" pour la même raison que "preview-2." plus haut. */
.lp-boissons-content .lp-cat-section ul.products li.product img[src*="image-removebg-preview-3." i],
.lp-boissons-content .lp-cat-section ul.products li.product img[srcset*="image-removebg-preview-3." i],
.lp-boissons-content .lp-cat-section ul.products li.product img[data-src*="image-removebg-preview-3." i],
.lp-boissons-content .lp-cat-section ul.products li.product img[data-lazy-src*="image-removebg-preview-3." i] {
	transform: scale(0.65) !important;
}

/* Cristalline 50cl : zoom +50% demandé par le client (23/08/2026), même
   traitement que Leffe. Ciblée par son ID produit (post-2091) plutôt que par
   nom de fichier générique remove.bg — évite de reproduire la collision
   corrigée juste au-dessus si un futur média réutilise encore ce nom. */
.lp-boissons-content .lp-cat-section ul.products li.product.post-2091 img {
	transform: scale(1.5) !important;
}

.lp-cat-section ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px !important;
	margin: 4px 0 6px !important;
	line-height: 1.3 !important;
}

.lp-cat-section ul.products li.product .price {
	margin-top: auto !important;
	padding-top: 6px !important;
	font-size: 15px !important;
}

/* Le titre et le prix doivent toujours rester lisibles au-dessus de l'image,
   même quand une photo est zoomée via transform: scale() > 1 et déborde de
   sa boîte de 180px (cf. Leffe/Cristalline 50cl ci-dessus) : un transform
   crée un contexte d'empilement qui, par défaut, passe AU-DESSUS des
   éléments suivants en flux normal, alors même qu'ils viennent après dans
   le DOM. Sans ce correctif, l'image agrandie peut recouvrir visuellement
   le titre/prix qui se trouvent juste en-dessous (bug constaté sur
   Cristalline 50cl le 23/08/2026). */
.lp-cat-section ul.products li.product .woocommerce-loop-product__title,
.lp-cat-section ul.products li.product .price {
	position: relative;
	z-index: 1;
}

.lp-cat-section ul.products li.product .button,
.lp-cat-section ul.products li.product a.button {
	margin-top: 14px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

@media (max-width: 900px) {
	.lp-cat-section .woocommerce ul.products,
	.lp-cat-section ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 520px) {
	.lp-cat-nav {
		justify-content: flex-start !important;
		overflow-x: auto !important;
		flex-wrap: nowrap !important;
		-webkit-overflow-scrolling: touch !important;
	}
	.lp-cat-nav a {
		flex: 0 0 auto !important;
	}
	.lp-cat-section .woocommerce ul.products,
	.lp-cat-section ul.products {
		grid-template-columns: 1fr !important;
	}
	.lp-cat-section ul.products li.product img {
		height: 160px !important;
	}
}

/* Fiche produit : galerie d'images. Comportement par défaut de WooCommerce
   (bloc woocommerce/product-image-gallery, sans attribut configurable côté
   bloc) : image principale en haut, vignettes des photos additionnelles
   juste en dessous — déjà le cas nativement (flexslider gère la position
   des vignettes via un <ol class="flex-control-thumbs"> ajouté après le
   wrapper de l'image principale). On ne touche PAS à
   .woocommerce-product-gallery__wrapper : flexslider lui applique des
   dimensions/transform en JS pour le mécanisme de slide, et forcer
   display/width en CSS casse cet affichage (testé : image principale
   disparaît). On se contente de fiabiliser la mise en page de la rangée
   de vignettes elle-même — sans effet quand un produit n'a qu'une seule
   photo (aucune vignette générée dans ce cas). */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	width: 100% !important;
	margin: 12px 0 0 !important;
}

.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
	width: calc(25% - 6px) !important;
	float: none !important;
}

.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li img {
	width: 100% !important;
	height: auto !important;
	border-radius: 6px !important;
}