/* =========================================================
   CATALOGUE WOOCOMMERCE
   AG INFORMATIQUE 81
========================================================= */

.ag-shop-main {
	min-height: 600px;

	background: #ffffff;
}


/* =========================================================
   HERO
========================================================= */

.shop-archive-hero {
	padding:
		68px
		0
		58px;

	background:
		radial-gradient(
			circle at 84% 20%,
			rgba(8, 104, 215, 0.12),
			transparent 30%
		),
		linear-gradient(
			180deg,
			#ffffff,
			#f7faff
		);
}

.shop-archive-eyebrow {
	display: inline-flex;

	align-items: center;

	gap: 9px;

	margin:
		0
		0
		14px;

	color: var(--color-primary);

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

	letter-spacing: 0.11em;

	text-transform: uppercase;
}

.shop-archive-eyebrow > span {
	width: 8px;
	height: 8px;

	border-radius: 50%;

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

.shop-archive-hero h1 {
	max-width: 850px;

	margin: 0;

	color: var(--color-dark);

	font-size:
		clamp(
			3rem,
			5.5vw,
			5rem
		);

	font-weight: 870;

	letter-spacing: -0.06em;

	line-height: 0.98;
}

.shop-archive-hero__description {
	max-width: 720px;

	margin:
		22px
		0
		0;

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

	font-size: 1.05rem;

	line-height: 1.72;
}


/* =========================================================
   CATÉGORIES
========================================================= */

.shop-category-navigation {
	padding:
		22px
		0;

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

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

	background: #ffffff;
}

.shop-category-navigation__inner {
	display: flex;

	align-items: center;

	gap: 9px;

	overflow-x: auto;

	padding-bottom: 2px;

	scrollbar-width: thin;
}

.shop-category-pill {
	display: inline-flex;

	align-items: center;

	flex: 0 0 auto;

	gap: 7px;

	min-height: 40px;

	padding:
		8px
		14px;

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

	border-radius: 999px;

	background: #ffffff;

	color: var(--color-dark-soft);

	font-size: 0.8rem;
	font-weight: 700;

	white-space: nowrap;

	transition:
		background var(--transition),
		border-color var(--transition),
		color var(--transition);
}

.shop-category-pill:hover {
	border-color: #b8d7f7;

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

	color:
		var(--color-primary);

	text-decoration: none;
}

.shop-category-pill.is-active {
	border-color:
		var(--color-primary);

	background:
		var(--color-primary);

	color: #ffffff;
}

.shop-category-pill > span {
	display: grid;

	place-items: center;

	min-width: 20px;
	height: 20px;

	padding:
		0
		5px;

	border-radius: 999px;

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

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

	font-size: 0.64rem;
}

.shop-category-pill.is-active
> span {
	background:
		rgba(
			255,
			255,
			255,
			0.18
		);

	color: #ffffff;
}


/* =========================================================
   CATALOGUE
========================================================= */

.shop-catalogue {
	padding:
		54px
		0
		90px;

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


/* =========================================================
   RÉSULTATS + TRI
========================================================= */

.woocommerce
.woocommerce-result-count {
	margin:
		0
		0
		26px;

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

	font-size: 0.8rem;
}

.woocommerce
.woocommerce-ordering {
	margin:
		0
		0
		26px;
}

.woocommerce
.woocommerce-ordering
select {
	min-height: 44px;

	padding:
		9px
		38px
		9px
		13px;

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

	border-radius: 10px;

	background: #ffffff;

	color:
		var(--color-dark);

	font-size: 0.8rem;

	outline: none;
}


/* =========================================================
   GRILLE
========================================================= */

.woocommerce ul.products {
	display: grid;

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

	gap: 20px;

	margin:
		0
		0
		45px;

	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	position: relative;

	display: flex;

	flex-direction: column;

	float: none;

	width: auto;

	min-width: 0;

	margin: 0;

	padding: 0;

	overflow: hidden;

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

	border-radius: 18px;

	background: #ffffff;

	box-shadow:
		0 7px 24px
		rgba(
			11,
			17,
			24,
			0.045
		);

	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.woocommerce
ul.products
li.product:hover {
	transform:
		translateY(-4px);

	border-color: #bad8f7;

	box-shadow:
		0 18px 42px
		rgba(
			11,
			17,
			24,
			0.085
		);
}


/* =========================================================
   IMAGE
========================================================= */

.woocommerce
ul.products
li.product
a.woocommerce-LoopProduct-link {
	display: flex;

	flex: 1;

	flex-direction: column;

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

.woocommerce
ul.products
li.product
a
img {
	width: 100%;
	height: auto;

	aspect-ratio: 1 / 1;

	margin: 0;

	padding: 16px;

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

	background: #ffffff;

	object-fit: contain;

	transition:
		transform 0.2s ease;
}

.woocommerce
ul.products
li.product:hover
a
img {
	transform:
		scale(1.035);
}


/* =========================================================
   BADGE PROMOTION
========================================================= */

.woocommerce
span.onsale {
	top: 12px;
	right: auto;
	left: 12px;

	z-index: 5;

	min-width: auto;
	min-height: auto;

	margin: 0;

	padding:
		5px
		9px;

	border-radius: 999px;

	background:
		var(--color-primary);

	color: #ffffff;

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

	line-height: 1.3;
}


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

.ag-product-stock {
	position: absolute;

	top: 12px;
	right: 12px;

	z-index: 5;

	display: inline-flex;

	align-items: center;

	min-height: 25px;

	padding:
		4px
		8px;

	border-radius: 999px;

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

.ag-product-stock--order {
	background:
		var(--color-primary-soft);

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


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

.woocommerce
ul.products
li.product
.woocommerce-loop-product__title {
	padding:
		18px
		18px
		0;

	color:
		var(--color-dark);

	font-size: 0.93rem;
	font-weight: 730;

	line-height: 1.42;
}

.woocommerce
ul.products
li.product:hover
.woocommerce-loop-product__title {
	color:
		var(--color-primary);
}


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

.woocommerce
ul.products
li.product
.price {
	display: block;

	margin:
		auto
		0
		0;

	padding:
		12px
		18px
		0;

	color:
		var(--color-dark);

	font-size: 1rem;
	font-weight: 820;
}

.woocommerce
ul.products
li.product
.price
del {
	margin-right: 5px;

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

	font-size: 0.75rem;
	font-weight: 500;

	opacity: 0.75;
}

.woocommerce
ul.products
li.product
.price
ins {
	color:
		var(--color-primary);

	font-weight: 820;

	text-decoration: none;
}


/* =========================================================
   BOUTON
========================================================= */

.woocommerce
ul.products
li.product
.button {
	display: flex;

	align-items: center;
	justify-content: center;

	width:
		calc(
			100% - 36px
		);

	min-height: 44px;

	margin:
		18px
		18px
		18px;

	padding:
		10px
		13px;

	border: 0;

	border-radius: 10px;

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

	color:
		var(--color-primary);

	font-size: 0.78rem;
	font-weight: 760;

	text-align: center;
}

.woocommerce
ul.products
li.product
.button:hover {
	background:
		var(--color-primary);

	color: #ffffff;
}


/* =========================================================
   PAGINATION
========================================================= */

.woocommerce
nav.woocommerce-pagination {
	margin-top: 12px;
}

.woocommerce
nav.woocommerce-pagination
ul {
	display: flex;

	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 7px;

	margin: 0;

	border: 0;
}

.woocommerce
nav.woocommerce-pagination
ul
li {
	border: 0;
}

.woocommerce
nav.woocommerce-pagination
ul
li
a,
.woocommerce
nav.woocommerce-pagination
ul
li
span {
	display: grid;

	place-items: center;

	min-width: 42px;
	height: 42px;

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

	border-radius: 9px;

	background: #ffffff;

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

.woocommerce
nav.woocommerce-pagination
ul
li
span.current {
	border-color:
		var(--color-primary);

	background:
		var(--color-primary);

	color: #ffffff;
}


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

@media (max-width: 1050px) {

	.woocommerce
	ul.products {
		grid-template-columns:
			repeat(
				3,
				minmax(0, 1fr)
			);
	}

}

@media (max-width: 800px) {

	.woocommerce
	ul.products {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}

}

@media (max-width: 620px) {

	.shop-archive-hero {
		padding:
			50px
			0
			45px;
	}

	.shop-catalogue {
		padding:
			38px
			0
			60px;
	}

	.woocommerce
	ul.products {
		grid-template-columns: 1fr;
	}

}