/* ------------------------------------------------------------------
   Correctifs d'affichage Lakaz Mama
   Chaque bloc porte la mesure qui l'a motive. Ne rien ajouter ici sans
   avoir mesure le probleme d'abord.
   ------------------------------------------------------------------ */

/* 1. Tuiles de categories.
   Les visuels viennent des photos produits : rapports de 1376x768 a
   1200x1800, d'ou des tuiles de 335 a 511px. Rapport impose + hauteur de
   titre reservee sur deux lignes -> les 5 tuiles font 471,9px. */
.lakit-iconbox__main_img{
	aspect-ratio: 4 / 5;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.lakit-iconbox__box_header{ width: 100%; }
.lakit-iconbox__title{ min-height: 2.4em; }

/* 2. Plancher de lisibilite.
   Mesure : copyright du pied 10px en mobile (12px en desktop), badges
   « Promo » 10,5px, libelles de partage produit 8px. Sous 12px le texte
   n'est plus confortable, et 8px est illisible. */
[data-elementor-type="footer"] .elementor-widget-text-editor p,
footer .elementor-widget-text-editor p{
	font-size: 12px;
	line-height: 1.6;
}
/* Le badge est porte par la DIV, le texte visible est le span aria-hidden
   a l'interieur : cibler le span seul ne suffisait pas. */
.wc-block-grid__product-onsale,
.wc-block-grid__product-onsale span,
ul.products span.onsale,
.lakit-products span.onsale{
	font-size: 12px;
	line-height: 1.5;
}
.lakit-wooproduct-share__label,
.lakit-wooproduct-share span,
.product_meta .detail-label{
	font-size: 12px;
}

/* 3. Interlignes des titres.
   Mesure : tous les titres gitan-latin sont a 1.2, sauf les 3 titres de
   colonnes du pied a 22px/22px (1.0). « Nous contacter » passe sur deux
   lignes en mobile et les lignes se touchent. */
[data-elementor-type="footer"] .elementor-widget-heading .elementor-heading-title,
footer .elementor-widget-heading .elementor-heading-title{
	line-height: 1.3;
}

/* 4. Hierarchie du panier vide.
   Mesure : « Votre panier est vide » 16px/19,2px alors que son frere
   « Nos nouveautes » est a 30px/36px, dans le meme bloc et au meme
   niveau. Le message principal etait deux fois plus petit que le
   sous-titre de la liste qui le suit. */
.wp-block-woocommerce-empty-cart-block > h2:first-of-type,
.wc-block-cart__empty-cart__title{
	font-size: 30px;
	line-height: 1.2;
	margin-bottom: 8px;
}
.wp-block-woocommerce-empty-cart-block > hr.wp-block-separator{
	margin-top: 32px;
	margin-bottom: 32px;
}

/* 5. Debordement horizontal.
   Mesure : scrollWidth 776 vs clientWidth 768 (et 398 vs 390). La page
   scrollait lateralement de 8px sous 1024px, a cause de la grille du
   bloc panier-vide qui garde ses gouttieres negatives sans compensation. */
@media (max-width: 1024px){
	.wp-block-woocommerce-empty-cart-block{ overflow-x: hidden; }
	.wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products{
		margin-left: 0;
		margin-right: 0;
	}
}

/* 6. Page « Mon compte ».
   Mesure : formulaire cale a gauche sur un canevas de 1440px, champs de
   770px de large pour saisir un e-mail, et 630px entre l'en-tete et le
   pied. On recentre et on borne, c'est la mise en page WooCommerce
   habituelle. */
.woocommerce-account .woocommerce{
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register{
	width: 100%;
	margin: 0;
	padding: 0;
}
.woocommerce-account .woocommerce form.login .form-row{ width: 100%; }
/* « Mot de passe perdu ? » sortait du formulaire, le float n'etait pas purge */
.woocommerce-account .woocommerce form.login::after{
	content: "";
	display: table;
	clear: both;
}
.woocommerce-account .woocommerce-LostPassword{
	float: none;
	margin-top: 12px;
}

/* 7. Debordement de la grille produits en mobile sur les pages categorie.
   Mesure : .woocommerce.lakit_wc_widget_current_query 1427,61px dans un
   conteneur de 1299,88px -> 127,7px passaient sous le conteneur. */
@media (max-width: 767px){
	.elementor-widget-container > .woocommerce.lakit_wc_widget_current_query{
		height: auto;
		overflow: visible;
	}
	.lakit-products{ margin-bottom: 24px; }
}

/* 8. Fil d'Ariane : les items depassaient le bas de leur conteneur de
   ~12,6px (ligne de base plus haute que la boite). */
.lakit-breadcrumbs__wrap,
.lakit-breadcrumbs__items{
	line-height: 1.6;
	align-items: center;
}

/* 9. Interligne par defaut des titres.
   Mesure : les titres sans reglage Elementor explicite heritent d'un
   line-height de 1.0 du theme (h2 « Nous contacter » 46px/46px, « Commander
   et se faire livrer » 32px/32px). Sur une ligne ca passe, des que le titre
   se replie en mobile les lignes se touchent. Cette regle ne s'applique
   qu'aux titres SANS reglage : Elementor ecrit une regle par widget bien plus
   specifique des qu'une valeur est definie, elle continue donc de gagner. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-lakit-heading .lakit-heading__title{
	line-height: 1.25;
}

/* 10. Creux laisse par la pagination.
   WordPress emet un <nav class="woocommerce-pagination"> VIDE quand la
   categorie tient sur une page, le JS le retire, mais la marge basse reservee
   reste : 140px de creux en bureau sur /categorie/traiteur/, 220px en mobile
   sur l'accueil. On ne reserve la place que si la pagination existe. */
.woocommerce-pagination:empty,
.lakit-pagination:empty{ display: none; }
.lakit-products > *:last-child:not(.woocommerce-pagination):not(.lakit-pagination){ margin-bottom: 0; }
.lakit-products{ margin-bottom: 32px; }

/* 11. En-tete mobile sur deux rangees.
   Mesure 14/09 a 390px : l'en-tete faisait 127,8px de haut au lieu d'une
   rangee, le logo provisoire etant trop large il repoussait les icones
   panier/compte a la ligne. On borne le logo en mobile. */
@media (max-width: 767px){
	.site-branding img,
	.lakit-logo img,
	[data-elementor-type="header"] .lakit-logo img{
		max-width: 150px;
		height: auto;
	}
	[data-elementor-type="header"] .elementor-widget-lakit-logo{ flex-shrink: 0; }
}