/*
 * Habillage de WooCommerce aux tokens du site (inc/woocommerce.php). woocommerce.css et
 * woocommerce-smallscreen.css de l'extension sont retirées ; woocommerce-layout.css est gardée et
 * se charge avant ce fichier : les sélecteurs repris d'elle ont la même spécificité, et l'emportent.
 * Mobile-first : ses flottants de bureau sont neutralisés sous les points de rupture.
 */

/* --- Commun ---------------------------------------------------------------------------------- */

.woocommerce-breadcrumb {
	margin-block-end: var(--espace-5);
	color: var(--couleur-texte-doux);
	font-size: var(--taille-petite);
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--espace-2) var(--espace-5);
	border: 0;
	border-radius: var(--rayon-pilule);
	background: var(--couleur-primaire);
	color: var(--couleur-sur-primaire);
	font-weight: var(--graisse-forte);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;

	&:hover {
		background: var(--couleur-accent);
		color: var(--couleur-sur-primaire);
	}

	&:disabled,
	&.disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > * {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espace-3);
	margin: 0 0 var(--espace-5);
	padding: var(--espace-4) var(--espace-5);
	border-inline-start: 4px solid var(--couleur-primaire);
	border-radius: var(--rayon-s);
	background: var(--couleur-primaire-douce);
	list-style: none;
}

.woocommerce-error {
	border-inline-start-color: var(--couleur-erreur, #b3261e);
}

.woocommerce form .form-row {
	margin-block-end: var(--espace-4);

	& label {
		display: block;
		margin-block-end: var(--espace-1);
		font-weight: var(--graisse-forte);
	}
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
	float: none;
	width: 100%;

	@media (min-width: 768px) {
		width: 47%;
	}
}

@media (min-width: 768px) {
	.woocommerce form .form-row-first,
	.woocommerce-page form .form-row-first {
		float: left;
	}

	.woocommerce form .form-row-last,
	.woocommerce-page form .form-row-last {
		float: right;
	}
}

.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 44px;
	padding: var(--espace-2) var(--espace-3);
	border: 1px solid var(--couleur-trait);
	border-radius: var(--rayon-s);
	background: var(--couleur-surface);
	color: var(--couleur-texte);
}

.woocommerce .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-2);
	min-height: 44px;
	cursor: pointer;
}

.woocommerce .required {
	color: var(--couleur-accent);
	text-decoration: none;
}

/* Étoiles en caractères, sans la police de l'extension (définie dans la feuille retirée). */
.woocommerce .star-rating {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 5.4em;
	height: 1.2em;
	line-height: 1.2;
	letter-spacing: 0.08em;

	&::before {
		content: "★★★★★";
		position: absolute;
		inset: 0;
		color: var(--couleur-trait);
	}

	& span {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		overflow: hidden;
		height: 100%;
		padding-block-start: 1.5em;

		&::before {
			content: "★★★★★";
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			color: var(--couleur-accent);
		}
	}
}

.woocommerce .price {
	color: var(--couleur-primaire);
	font-weight: var(--graisse-forte);

	& del {
		color: var(--couleur-texte-doux);
		font-weight: var(--graisse-texte);
	}

	& ins {
		text-decoration: none;
	}
}

.woocommerce span.onsale {
	position: absolute;
	inset-block-start: var(--espace-3);
	inset-inline-start: var(--espace-3);
	z-index: 1;
	padding: var(--espace-1) var(--espace-3);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-accent);
	color: var(--couleur-sur-primaire);
	font-size: var(--taille-petite);
	font-weight: var(--graisse-forte);
}

/* --- Boutique : grille de produits (2, 3 dès 768 px, 4 dès 1200 px) --------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-block-end: var(--espace-5);
}

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(var(--colonnes, 2), minmax(0, 1fr));
	gap: var(--espace-6) var(--espace-5);
	clear: both;
	margin: 0;
	padding: 0;
	list-style: none;

	&::before,
	&::after {
		display: none;
	}

	@media (min-width: 768px) {
		--colonnes: 3;
	}

	@media (min-width: 1200px) {
		--colonnes: 4;
	}
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce[class*="columns-"] ul.products li.product,
.woocommerce-page[class*="columns-"] ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--espace-2);
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce ul.products li.product {
	& a img {
		width: 100%;
		margin-block-end: var(--espace-3);
		border-radius: var(--rayon-m);
		aspect-ratio: 1;
		object-fit: cover;
	}

	& .woocommerce-loop-product__title {
		color: var(--couleur-texte);
		font-family: var(--police-texte);
		font-size: var(--taille-texte);
		font-weight: var(--graisse-forte);
	}

	& .woocommerce-LoopProduct-link {
		color: inherit;
		text-decoration: none;
	}

	& .button {
		align-self: flex-start;
		margin-block-start: auto;
	}
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--espace-2);
	margin-block-start: var(--espace-7);
	padding: 0;
	border: 0;
	list-style: none;

	& li {
		border: 0;
	}

	& .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		border: 1px solid var(--couleur-trait);
		border-radius: var(--rayon-pilule);
		color: var(--couleur-texte);
		text-decoration: none;
	}

	& .page-numbers.current {
		border-color: var(--couleur-primaire);
		background: var(--couleur-primaire);
		color: var(--couleur-sur-primaire);
	}
}

/* --- Fiche produit : empilée en mobile, deux colonnes dès 768 px ------------------------------ */

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
	float: none;
	width: 100%;
	margin-block-end: var(--espace-6);

	@media (min-width: 768px) {
		width: 48%;
	}
}

@media (min-width: 768px) {
	.woocommerce #content div.product div.images,
	.woocommerce div.product div.images,
	.woocommerce-page #content div.product div.images,
	.woocommerce-page div.product div.images {
		float: left;
	}

	.woocommerce #content div.product div.summary,
	.woocommerce div.product div.summary,
	.woocommerce-page #content div.product div.summary,
	.woocommerce-page div.product div.summary {
		float: right;
	}
}

.woocommerce div.product {
	position: relative;

	& .product_title {
		margin-block-end: var(--espace-3);
		font-size: var(--taille-h2);
	}

	& p.price {
		margin-block: var(--espace-3) var(--espace-5);
		font-size: var(--taille-h4);
	}

	& div.images img {
		border-radius: var(--rayon-l);
	}

	& .woocommerce-product-gallery__trigger {
		position: absolute;
		inset-block-start: var(--espace-3);
		inset-inline-end: var(--espace-3);
		z-index: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: var(--rayon-pilule);
		background: var(--couleur-surface);
		text-decoration: none;
	}

	& div.images {
		position: relative;
	}

	& form.cart {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--espace-3);
		margin-block: var(--espace-5);
	}

	& .quantity .qty {
		width: 5em;
		min-height: 44px;
		border: 1px solid var(--couleur-trait);
		border-radius: var(--rayon-s);
		text-align: center;
	}

	& .product_meta {
		color: var(--couleur-texte-doux);
		font-size: var(--taille-petite);
	}
}

.woocommerce div.product .woocommerce-tabs {
	clear: both;

	& ul.tabs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--espace-2);
		margin: 0 0 var(--espace-5);
		padding: 0;
		border-block-end: 1px solid var(--couleur-trait);
		list-style: none;
	}

	& ul.tabs li a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 var(--espace-4);
		color: var(--couleur-texte-doux);
		font-weight: var(--graisse-forte);
		text-decoration: none;
	}

	& ul.tabs li.active a {
		border-block-end: 3px solid var(--couleur-primaire);
		color: var(--couleur-primaire);
	}
}

.woocommerce .related,
.woocommerce .upsells {
	clear: both;
	margin-block-start: var(--espace-8);
}

/* --- Panier et commande ------------------------------------------------------------------------ */

.woocommerce table.shop_table {
	width: 100%;
	margin-block-end: var(--espace-6);
	border: 1px solid var(--couleur-trait);
	border-radius: var(--rayon-m);
	border-collapse: separate;
	border-spacing: 0;

	& th,
	& td {
		padding: var(--espace-3) var(--espace-4);
		border-block-start: 1px solid var(--couleur-trait);
		text-align: start;
		vertical-align: middle;
	}

	& thead th {
		border-block-start: 0;
	}

	& img {
		width: 64px;
		border-radius: var(--rayon-s);
	}

	& a.remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: var(--rayon-pilule);
		color: var(--couleur-texte-doux);
		font-size: 1.5em;
		text-decoration: none;

		&:hover {
			background: var(--couleur-primaire-douce);
			color: var(--couleur-primaire);
		}
	}
}

/* Tableau du panier en mobile : une carte par ligne, libellé de colonne devant chaque valeur
   (data-title, posé par WooCommerce sur shop_table_responsive). Tableau classique dès 768 px. */
.woocommerce table.shop_table_responsive {
	& thead {
		display: none;

		@media (min-width: 768px) {
			display: table-header-group;
		}
	}

	& tr,
	& td {
		display: block;

		@media (min-width: 768px) {
			display: revert;
		}
	}

	& td[data-title]::before {
		content: attr(data-title) " : ";
		font-weight: var(--graisse-forte);

		@media (min-width: 768px) {
			content: none;
		}
	}
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	float: none;
	width: 100%;

	@media (min-width: 768px) {
		float: right;
		width: 48%;
	}
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
	float: none;
	width: 100%;

	@media (min-width: 768px) {
		width: 48%;
	}
}

@media (min-width: 768px) {
	.woocommerce .col2-set .col-1,
	.woocommerce-page .col2-set .col-1 {
		float: left;
	}

	.woocommerce .col2-set .col-2,
	.woocommerce-page .col2-set .col-2 {
		float: right;
	}
}

.woocommerce-checkout #payment {
	padding: var(--espace-5);
	border-radius: var(--rayon-m);
	background: var(--couleur-primaire-douce);

	& ul.payment_methods {
		margin: 0 0 var(--espace-4);
		padding: 0;
		list-style: none;
	}
}

/* --- Mon compte : navigation au-dessus en mobile, à gauche dès 992 px ---------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

@media (min-width: 992px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 25%;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		float: right;
		width: 70%;
	}
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--espace-6);
	padding: 0;
	list-style: none;

	& a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 var(--espace-3);
		border-radius: var(--rayon-s);
		color: var(--couleur-texte);
		text-decoration: none;
	}

	& .is-active a,
	& a:hover {
		background: var(--couleur-primaire-douce);
		color: var(--couleur-primaire);
	}
}