/* Kautzmann — Responsive 0.1.0 : marges et mises en page du thème Airi sur téléphone et tablette.
   Rien ici ne touche au retrait, au paiement ni aux champs de commande. */

/* 1. Marges latérales (le thème annule la marge du conteneur avec une marge négative de .row) */
@media (max-width: 767px) {
	body:not(.home):not(.kza-page):not(.kzb-page) #main > .container > .row > #site-content {
		padding-left: 16px;
		padding-right: 16px;
	}
}
@media (min-width: 768px) and (max-width: 1365px) {
	body:not(.home):not(.kza-page):not(.kzb-page) #main > .container > .row {
		margin-left: 0;
		margin-right: 0;
	}
	body:not(.home):not(.kza-page):not(.kzb-page) #main > .container > .row > #site-content {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* 1 ter. Pages à bandeau vidéo pleine largeur (Pâques, Buffets et cocktails) : pas de marge, le bandeau va d'un bord à l'autre */
@media (max-width: 1365px) {
	body:not(.home):not(.kza-page):not(.kzb-page) #main > .container > .row > #site-content:has([class*="-video"]) {
		padding-left: 0;
		padding-right: 0;
		overflow-x: clip;
	}
}

/* 1 bis. Fil d'Ariane et en-tête de page : même marge que le contenu sur tablette */
@media (min-width: 768px) and (max-width: 1365px) {
	body:not(.home):not(.kza-page):not(.kzb-page) #section_page_header .container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* 2. Panier et commande */
.wrap-related-product,
.woocommerce-cart .cross-sells,
.woocommerce-cart .cross-sells .swiper,
.woocommerce-cart .cross-sells .swiper-container {
	max-width: 100%;
	overflow: hidden;
}
.woocommerce-checkout #customer_details.col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}
.woocommerce-checkout #main img,
.woocommerce-cart #main img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 1100px) {
	.woocommerce-cart .woocommerce {
		flex-wrap: wrap;
	}
	.woocommerce-cart .woocommerce > form.woocommerce-cart-form,
	.woocommerce-cart .woocommerce > .cart-collaterals,
	.woocommerce-cart .woocommerce > .custom-related-products {
		flex: 0 0 100%;
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
		float: none;
	}
	.woocommerce-cart .cart-collaterals .cart_totals {
		float: none;
		width: 100% !important;
	}
	.woocommerce-cart .woocommerce-cart-form .coupon {
		width: 100%;
	}
}

@media (max-width: 1100px) {
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #payment,
	.woocommerce-checkout #place_order {
		max-width: 100%;
		box-sizing: border-box;
	}
}

/* 3. Fiche produit (le carrousel « Autres suggestions » est coupé au bord de la page) */
@media (max-width: 1365px) {
	.single-product #site-content,
	.woocommerce-cart #site-content {
		overflow-x: clip;
	}
}
@media (max-width: 1365px) {
	.single-product .product--large-image,
	.single-product .woocommerce-product-gallery,
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
		height: auto !important;
		min-height: 0 !important;
	}
	.single-product .woocommerce-product-gallery__image img {
		width: 100%;
		height: auto;
	}
}
@media (max-width: 767px) {
	.single-product .summary .product_title {
		font-size: clamp(28px, 8.4vw, 40px);
		line-height: 1.1;
	}
}
@media (min-width: 768px) and (max-width: 1365px) {
	.single-product .summary .product_title {
		font-size: clamp(32px, 4.6vw, 52px);
		line-height: 1.1;
	}
}

/* 4. Zones tactiles : la zone cliquable est étendue à 44 px sur écran tactile, sans changer la mise en page */
@media (pointer: coarse) {
	.la-breadcrumb-item-link,
	.la-breadcrumb a,
	.site-footer li a,
	.footer-bottom a,
	.search-button,
	.show-password-input {
		position: relative;
	}
	.la-breadcrumb-item-link::after,
	.la-breadcrumb a::after,
	.site-footer li a::after,
	.footer-bottom a::after,
	.search-button::after,
	.show-password-input::after {
		content: "";
		position: absolute;
		left: -8px;
		right: -8px;
		top: 50%;
		min-height: 44px;
		height: 100%;
		transform: translateY(-50%);
	}
}

/* 5. Anciennes pages de catégories (Restauration, Chocolats, Pâtisserie, Cocktail…) en tablette : filtre au-dessus, cartes sur 2 colonnes */
@media (min-width: 768px) and (max-width: 1100px) {
	.general-products .wrap-sub-category-filter,
	.general-products .list-products.container {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.general-products .list-products > .row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		margin-left: 0;
		margin-right: 0;
	}
	.general-products .list-products .list-product.col-md-4 {
		width: 100% !important;
		max-width: none !important;
		flex: none !important;
		margin: 0;
		padding: 0;
		float: none;
		display: block;
	}
	.general-products .list-products .list-product .content,
	.general-products .list-products .list-product .content .wrap-text,
	.general-products .list-products .list-product .content .wrap-img {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
}
@media (max-width: 480px) {
	.header-category,
	.header-category .page-title {
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}

/* Ancien prix barré : illisible (prune sur prune) quand la carte devient prune au survol */
.list-product:hover .price del,
.list-product:hover .price del .woocommerce-Price-amount,
.list-product:hover .price del bdi,
.list-product:focus-within .price del,
.list-product:focus-within .price del .woocommerce-Price-amount {
	color: #e8d9e7 !important;
	opacity: 1;
}

/* Vidéos et blocs médias pleine largeur : ne pas dépasser la zone de contenu */
#site-content video,
#site-content iframe,
#site-content [class*="-video"] {
	max-width: 100%;
}
#site-content [class*="-video"] {
	overflow: hidden;
}
@media (max-width: 767px) {
	#site-content a,
	#site-content p,
	#site-content li {
		overflow-wrap: anywhere;
	}
}