/* =========================================================
   FICHE PRODUIT
   AG INFORMATIQUE 81 SHOP
========================================================= */

.single-product .ag-shop-main {
	background: #ffffff;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.single-product
.woocommerce-breadcrumb {
	max-width:
		var(--container-width);

	width:
		min(
			calc(100% - 40px),
			var(--container-width)
		);

	margin:
		24px
		auto
		0;

	color:
		var(--color-text-muted);

	font-size: 0.73rem;
}


/* =========================================================
   WRAPPER PRODUIT
========================================================= */

.single-product
.woocommerce
div.product {
	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(0, 0.95fr);

	align-items: start;

	gap: 68px;

	max-width:
		var(--container-width);

	width:
		min(
			calc(100% - 40px),
			var(--container-width)
		);

	margin:
		50px
		auto
		0;
}


/* =========================================================
   GALERIE
========================================================= */

.single-product
.woocommerce
div.product
div.images {
	float: none;

	width: 100%;

	margin: 0;
}

.single-product
.woocommerce-product-gallery {
	overflow: hidden;

	border:
		1px solid
		var(--color-border);

	border-radius: 22px;

	background: #ffffff;

	box-shadow:
		0 14px 40px
		rgba(
			11,
			17,
			24,
			0.07
		);
}

.single-product
.woocommerce-product-gallery__image
img {
	width: 100%;

	max-height: 650px;

	margin: 0 auto;

	padding: 28px;

	object-fit: contain;
}


/* =========================================================
   MINIATURES
========================================================= */

.single-product
.flex-control-thumbs {
	display: grid;

	grid-template-columns:
		repeat(
			5,
			minmax(0, 1fr)
		);

	gap: 9px;

	margin:
		12px
		0
		0 !important;

	padding: 0 !important;
}

.single-product
.flex-control-thumbs
li {
	float: none !important;

	width: 100% !important;
}

.single-product
.flex-control-thumbs
img {
	width: 100%;

	aspect-ratio: 1 / 1;

	padding: 7px;

	border:
		1px solid
		var(--color-border);

	border-radius: 10px;

	object-fit: contain;
}


/* =========================================================
   SUMMARY
========================================================= */

.single-product
.woocommerce
div.product
div.summary {
	float: none;

	width: 100%;

	margin: 0;
}

.product-summary-eyebrow {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	margin-bottom: 14px;

	color:
		var(--color-primary);

	font-size: 0.76rem;
	font-weight: 800;

	letter-spacing: 0.1em;

	text-transform: uppercase;
}

.product-summary-eyebrow::before {
	content: "";

	width: 8px;
	height: 8px;

	border-radius: 50%;

	background:
		var(--color-primary);
}


/* =========================================================
   TITRE
========================================================= */

.single-product
.product_title {
	margin:
		0
		0
		16px;

	color:
		var(--color-dark);

	font-size:
		clamp(
			2.1rem,
			4.2vw,
			3.65rem
		);

	font-weight: 860;

	letter-spacing: -0.052em;

	line-height: 1.03;
}


/* =========================================================
   PRIX
========================================================= */

.single-product
.woocommerce
div.product
p.price,
.single-product
.woocommerce
div.product
span.price {
	margin:
		0
		0
		20px;

	color:
		var(--color-dark);

	font-size: 1.65rem;
	font-weight: 850;
}


/* =========================================================
   DESCRIPTION COURTE
========================================================= */

.single-product
.woocommerce-product-details__short-description {
	margin-bottom: 22px;

	color:
		var(--color-text-muted);

	font-size: 0.96rem;

	line-height: 1.75;
}


/* =========================================================
   DISPONIBILITÉ
========================================================= */

.single-product
.stock {
	display: inline-flex;

	align-items: center;

	margin:
		0
		0
		16px !important;

	padding:
		6px
		10px;

	border-radius: 999px;

	font-size: 0.72rem;
	font-weight: 800;
}

.single-product
.stock.available-on-order {
	background:
		var(--color-primary-soft);

	color:
		var(--color-primary);
}


/* =========================================================
   INFORMATION SUR COMMANDE
========================================================= */

.ag-product-order-notice {
	display: flex;

	align-items: flex-start;

	gap: 13px;

	margin:
		0
		0
		22px;

	padding:
		16px
		17px;

	border:
		1px solid
		#c9e0f8;

	border-radius: 13px;

	background:
		var(--color-primary-soft);
}

.ag-product-order-notice__icon {
	display: grid;

	flex: 0 0 38px;

	place-items: center;

	width: 38px;
	height: 38px;

	border-radius: 11px;

	background: #ffffff;

	color:
		var(--color-primary);

	font-size: 1rem;
}

.ag-product-order-notice
strong {
	display: block;

	margin-bottom: 3px;

	color:
		var(--color-dark);

	font-size: 0.82rem;
}

.ag-product-order-notice
p {
	margin: 0;

	color:
		var(--color-text-muted);

	font-size: 0.75rem;

	line-height: 1.55;
}


/* =========================================================
   VARIATIONS
========================================================= */

.single-product
.variations {
	width: 100%;

	margin:
		0
		0
		20px !important;
}

.single-product
.variations
tbody {
	display: grid;

	gap: 14px;
}

.single-product
.variations
tr {
	display: grid;

	grid-template-columns: 1fr;

	gap: 7px;
}

.single-product
.variations
th,
.single-product
.variations
td {
	display: block;

	padding: 0 !important;
}

.single-product
.variations
select {
	width: 100%;

	min-height: 46px;

	padding:
		10px
		38px
		10px
		13px;

	border:
		1px solid
		var(--color-border);

	border-radius: 10px;

	background: #ffffff;
}


/* =========================================================
   PANIER
========================================================= */

.single-product
form.cart {
	display: flex;

	align-items: stretch;

	flex-wrap: wrap;

	gap: 10px;

	margin:
		0
		0
		24px !important;
}

.single-product
.quantity {
	display: flex;

	align-items: center;

	border:
		1px solid
		var(--color-border);

	border-radius: 10px;
}

.single-product
.quantity
.qty {
	width: 72px;

	min-height: 48px;

	border: 0;

	text-align: center;
}

.single-product
.single_add_to_cart_button {
	flex: 1;

	min-height: 50px !important;

	border: 0 !important;

	border-radius: 10px !important;

	background:
		linear-gradient(
			135deg,
			var(--color-primary-light),
			var(--color-primary-dark)
		) !important;

	color: #ffffff !important;
}


/* =========================================================
   CONFIANCE
========================================================= */

.ag-product-trust {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	gap: 9px;

	margin-top: 24px;
}

.ag-product-trust__item {
	display: flex;

	align-items: center;

	gap: 9px;

	padding: 12px;

	border:
		1px solid
		var(--color-border);

	border-radius: 11px;

	background:
		var(--color-background-alt);
}

.ag-product-trust__icon {
	display: grid;

	flex: 0 0 34px;

	place-items: center;

	width: 34px;
	height: 34px;

	border-radius: 10px;

	background:
		var(--color-primary-soft);

	color:
		var(--color-primary);
}


/* =========================================================
   ONGLETS
========================================================= */

.single-product
.woocommerce-tabs {
	grid-column: 1 / -1;

	width: 100%;

	margin-top: 25px;
}

.single-product
.woocommerce-tabs
ul.tabs {
	display: flex;

	flex-wrap: wrap;

	gap: 7px;

	margin:
		0
		0
		25px !important;

	padding: 0 !important;

	border-bottom:
		1px solid
		var(--color-border);
}

.single-product
.woocommerce-tabs
ul.tabs
li {
	border: 0 !important;

	background: transparent !important;
}

.single-product
.woocommerce-tabs
ul.tabs
li
a {
	padding:
		13px
		16px !important;

	color:
		var(--color-text-muted) !important;
}

.single-product
.woocommerce-tabs
ul.tabs
li.active
a {
	border-bottom:
		3px solid
		var(--color-primary);

	color:
		var(--color-primary) !important;
}


/* =========================================================
   ASSOCIÉS
========================================================= */

.single-product
.related,
.single-product
.upsells {
	grid-column: 1 / -1;

	width: 100%;

	margin-top: 50px;
	padding-top: 50px;

	border-top:
		1px solid
		var(--color-border);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 850px) {

	.single-product
	.woocommerce
	div.product {
		grid-template-columns: 1fr;

		gap: 40px;
	}

	.ag-product-trust {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 620px) {

	.single-product
	.woocommerce
	div.product {
		width:
			calc(
				100% - 24px
			);
	}

	.single-product
	form.cart {
		flex-direction: column;
	}

	.single-product
	.quantity,
	.single-product
	.quantity
	.qty {
		width: 100%;
	}

	.single-product
	.single_add_to_cart_button {
		width: 100%;
	}

}