/* ==========================================================================
   Page categorie WooCommerce (product_cat) — archive dynamique MYCA.
   Portage 1:1 de CollectionView.tsx + ProductCard/FilterSidebar/Breadcrumb/
   CategoryTile/TrustBadges (myca-shop React). Chaque regle correspond a la
   classe Tailwind d'origine, en commentaire. Portee sous #myca-category.
   Breakpoints Tailwind : sm = 640px, lg = 1024px, xl = 1280px.
   ========================================================================== */

#myca-category {
	--myca-black: #121212;
	--myca-white: #faf8f4;
	--myca-beige: #e8dfd3;
	--myca-beige-dark: #c9b8a4;
	--myca-orange: #c1622e;
	--myca-gray: #6b6b6b;
	--myca-font-display: "Archivo", "Archivo Narrow", system-ui, sans-serif;

	color: var(--myca-black);
	background: var(--myca-white);

	/* Astra rend ce gabarit a l'interieur de .ast-container (max-width:1240px
	   + son propre padding). Le design source est pense en pleine largeur
	   (max-w-350 = 1400px géré par nos propres conteneurs internes) : on sort
	   du conteneur du theme pour retrouver une largeur de page identique a
	   celle de React, plutot que de cumuler deux conteneurs centres. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

#myca-category *,
#myca-category *::before,
#myca-category *::after {
	box-sizing: border-box;
}

#myca-category h1,
#myca-category h2,
#myca-category h3,
#myca-category h4,
#myca-category p,
#myca-category span,
#myca-category a,
#myca-category div,
#myca-category ul,
#myca-category li,
#myca-category nav,
#myca-category ol,
#myca-category aside,
#myca-category section,
#myca-category form,
#myca-category label,
#myca-category button,
#myca-category input,
#myca-category select {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	background: none;
	text-decoration: none;
	list-style: none;
}

#myca-category button,
#myca-category select {
	cursor: pointer;
}

/* --- Conteneur principal : mx-auto max-w-350 px-4 pt-8 sm:px-6 ----------- */
#myca-category .myca-cat-wrap {
	max-width: 87.5rem;
	margin-inline: auto;
	padding: 2rem 1rem 0;
}

@media (min-width: 640px) {
	#myca-category .myca-cat-wrap {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* --- Fil d'Ariane : border-b bg-myca-white -------------------------------- */
#myca-category .myca-cat-breadcrumb {
	border-bottom: 1px solid color-mix(in oklab, var(--myca-beige-dark) 40%, transparent);
	background: var(--myca-white);
}

#myca-category .myca-cat-breadcrumb-list {
	margin-inline: auto;
	display: flex;
	max-width: 87.5rem;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	padding: 0.75rem 1rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--myca-gray);
}

@media (min-width: 640px) {
	#myca-category .myca-cat-breadcrumb-list {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

#myca-category .myca-cat-breadcrumb-item {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

#myca-category .myca-cat-breadcrumb-item a:hover {
	color: var(--myca-orange);
}

#myca-category .myca-cat-breadcrumb-item.is-current span {
	color: var(--myca-black);
}

#myca-category .myca-cat-breadcrumb-item svg {
	display: block;
	width: 12px;
	height: 12px;
	flex: none;
}

/* --- En-tete : mt-6 -------------------------------------------------------- */
#myca-category .myca-cat-header {
	margin-top: 1.5rem;
}

/* eyebrow : font-display text-xs uppercase tracking-[0.2em] text-myca-orange */
#myca-category .myca-cat-eyebrow {
	display: inline-block;
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 1rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--myca-orange);
}

/* h1 : mt-2 font-display text-2xl uppercase tracking-widest text-myca-black
   sm:text-3xl lg:text-4xl */
#myca-category .myca-cat-title {
	margin-top: 0.5rem;
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--myca-black);
}

@media (min-width: 640px) {
	#myca-category .myca-cat-title {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

@media (min-width: 1024px) {
	#myca-category .myca-cat-title {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}
}

/* p : mt-3 max-w-2xl text-sm text-myca-gray */
#myca-category .myca-cat-subtitle {
	margin-top: 0.75rem;
	max-width: 42rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--myca-gray);
}

/* --- Onglets sous-categories : mt-8 flex flex-wrap gap-2 border-b pb-4 --- */
#myca-category .myca-cat-subnav {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid color-mix(in oklab, var(--myca-beige-dark) 40%, transparent);
}

#myca-category .myca-cat-subnav a {
	border: 1px solid var(--myca-beige-dark);
	padding: 0.5rem 1rem;
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--myca-black);
	transition: background-color 0.2s, color 0.2s;
}

#myca-category .myca-cat-subnav a:hover,
#myca-category .myca-cat-subnav a.is-active {
	background: var(--myca-black);
	color: var(--myca-white);
}

/* --- Tuiles sous-categories : mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4 */
#myca-category .myca-cat-subgrid {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 640px) {
	#myca-category .myca-cat-subgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	#myca-category .myca-cat-subgrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Tuile : group relative block overflow-hidden bg-myca-beige aspect-[4/5] */
#myca-category .myca-cat-subtile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--myca-beige);
	aspect-ratio: 4 / 5;
}

#myca-category .myca-cat-subtile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

#myca-category .myca-cat-subtile:hover .myca-cat-subtile-img {
	transform: scale(1.05);
}

#myca-category .myca-cat-subtile-overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top in oklab, color-mix(in oklab, var(--myca-black) 70%, transparent), transparent, transparent);
}

#myca-category .myca-cat-subtile-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25rem;
}

@media (min-width: 640px) {
	#myca-category .myca-cat-subtile-caption {
		padding: 1.5rem;
	}
}

#myca-category .myca-cat-subtile-name {
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--myca-white);
}

@media (min-width: 640px) {
	#myca-category .myca-cat-subtile-name {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

#myca-category .myca-cat-subtile-link {
	margin-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 1rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--myca-orange);
}

#myca-category .myca-cat-subtile-link svg {
	display: block;
	width: 12px;
	height: 12px;
	flex: none;
}

/* --- Corps : mt-8 flex flex-col gap-4 lg:mt-12 lg:flex-row lg:gap-8 ------ */
#myca-category .myca-cat-body {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-bottom: 4rem;
}

@media (min-width: 1024px) {
	#myca-category .myca-cat-body {
		margin-top: 3rem;
		flex-direction: row;
		gap: 2rem;
	}
}

/* --- Sidebar filtres : visible sur toutes les tailles (empilee en mobile),
   sticky en colonne a partir de lg, comme la maquette React. -------------- */
#myca-category .myca-cat-filters {
	width: 100%;
}

@media (min-width: 1024px) {
	#myca-category .myca-cat-filters {
		position: sticky;
		top: 7rem;
		align-self: flex-start;
		width: 16rem;
		flex-shrink: 0;
		padding-right: 1.5rem;
		border-right: 1px solid color-mix(in oklab, var(--myca-beige-dark) 40%, transparent);
	}
}

/* space-y-8 : 2rem entre chaque bloc de filtre (Couleur / Taille / Prix /
   Nouveautes), sans marge propre a chacun — la meme regle que React. */
#myca-category .myca-cat-filters-body {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#myca-category .myca-cat-checkbox-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--myca-black);
}

#myca-category .myca-cat-checkbox-row input {
	height: 1rem;
	width: 1rem;
	accent-color: var(--myca-orange);
}

/* --- Couleur : pastilles rondes h-8 w-8 border-2 -------------------------- */
#myca-category .myca-cat-swatches {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#myca-category .myca-cat-swatch {
	position: relative;
	height: 2rem;
	width: 2rem;
	border-radius: 9999px;
	border: 2px solid var(--myca-beige-dark);
	display: inline-block;
}

#myca-category .myca-cat-swatch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#myca-category .myca-cat-swatch.is-active,
#myca-category .myca-cat-swatch:has(input:checked) {
	border-color: var(--myca-orange);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--myca-orange) 30%, transparent);
}

/* --- Taille : pastilles rectangulaires, actif = fond noir ----------------- */
#myca-category .myca-cat-sizes {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#myca-category .myca-cat-size {
	position: relative;
	border: 1px solid var(--myca-beige-dark);
	padding: 0.375rem 0.75rem;
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--myca-black);
}

#myca-category .myca-cat-size input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

#myca-category .myca-cat-size.is-active,
#myca-category .myca-cat-size:has(input:checked) {
	border-color: var(--myca-black);
	background: var(--myca-black);
	color: var(--myca-white);
}

/* --- Prix : label + valeur + curseur -------------------------------------- */
#myca-category .myca-cat-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#myca-category .myca-cat-price-value {
	font-size: 0.875rem;
	color: var(--myca-orange);
}

#myca-category .myca-cat-range {
	margin-top: 0.75rem;
	width: 100%;
	accent-color: var(--myca-orange);
}

/* --- Zone resultats : transition douce pendant un rafraichissement AJAX -- */
#myca-category .myca-cat-results-body {
	transition: opacity 0.15s;
}

#myca-category .myca-cat-results-body.is-loading {
	opacity: 0.4;
	pointer-events: none;
}

/* --- Colonne resultats : flex-1 min-w-0 ----------------------------------- */
#myca-category .myca-cat-results {
	flex: 1 1 0%;
	min-width: 0;
}

#myca-category .myca-cat-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid color-mix(in oklab, var(--myca-beige-dark) 40%, transparent);
}

#myca-category .myca-cat-count {
	font-size: 0.75rem;
	color: var(--myca-gray);
}

#myca-category .myca-cat-sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#myca-category .myca-cat-sort label {
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--myca-gray);
}

#myca-category .myca-cat-sort select {
	border: 1px solid var(--myca-beige-dark);
	background: var(--myca-white);
	padding: 0.375rem 0.75rem;
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--myca-black);
}

#myca-category .myca-cat-empty {
	margin-top: 3rem;
	text-align: center;
	font-size: 0.875rem;
	color: var(--myca-gray);
}

/* --- Grille produits : mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 */
#myca-category .myca-cat-grid {
	margin-top: 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	#myca-category .myca-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	#myca-category .myca-cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	#myca-category .myca-cat-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- Carte produit : group flex flex-col ---------------------------------- */
#myca-category .myca-cat-card {
	display: flex;
	flex-direction: column;
}

#myca-category .myca-cat-card-media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--myca-beige);
}

#myca-category .myca-cat-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

#myca-category .myca-cat-card:hover .myca-cat-card-img {
	transform: scale(1.05);
}

#myca-category .myca-cat-card-hover {
	position: absolute;
	inset: 0;
	background: color-mix(in oklab, var(--myca-black) 10%, transparent);
	opacity: 0;
	transition: opacity 0.3s;
}

#myca-category .myca-cat-card:hover .myca-cat-card-hover {
	opacity: 1;
}

#myca-category .myca-cat-badge {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	padding: 0.25rem 0.5rem;
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--myca-white);
}

#myca-category .myca-cat-badge.is-new {
	background: var(--myca-orange);
}

#myca-category .myca-cat-badge.is-bestseller {
	background: var(--myca-black);
}

#myca-category .myca-cat-wishlist {
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
	display: grid;
	place-items: center;
	height: 2.25rem;
	width: 2.25rem;
	background: color-mix(in oklab, var(--myca-white) 90%, transparent);
	backdrop-filter: blur(6px);
	color: var(--myca-black);
	opacity: 0;
	transition: opacity 0.2s;
}

#myca-category .myca-cat-card:hover .myca-cat-wishlist {
	opacity: 1;
}

#myca-category .myca-cat-wishlist.is-liked {
	color: var(--myca-orange);
	opacity: 1;
}

#myca-category .myca-cat-wishlist svg {
	width: 16px;
	height: 16px;
}

#myca-category .myca-cat-wishlist.is-liked svg {
	fill: currentColor;
}

#myca-category .myca-cat-card-info {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

#myca-category .myca-cat-card-name {
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--myca-black);
	line-height: 1.375;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#myca-category .myca-cat-card-subcat {
	font-size: 0.75rem;
	color: var(--myca-gray);
	text-transform: capitalize;
}

#myca-category .myca-cat-card-price {
	margin-top: 0.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#myca-category .myca-cat-card-price-current {
	font-family: var(--myca-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--myca-orange);
}

#myca-category .myca-cat-card-price-compare {
	font-size: 0.75rem;
	color: var(--myca-gray);
	text-decoration: line-through;
}


/* --- Pagination ------------------------------------------------------------ */
#myca-category .myca-cat-pagination {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

#myca-category .myca-cat-pagination a,
#myca-category .myca-cat-pagination span {
	border: 1px solid var(--myca-beige-dark);
	padding: 0.5rem 0.875rem;
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--myca-black);
}

#myca-category .myca-cat-pagination .current {
	background: var(--myca-black);
	color: var(--myca-white);
	border-color: var(--myca-black);
}

/* --- Bandeau de confiance : border-y bg-myca-white ------------------------ */
#myca-category .myca-cat-trust {
	margin-top: 4rem;
	border-top: 1px solid color-mix(in oklab, var(--myca-beige-dark) 40%, transparent);
	border-bottom: 1px solid color-mix(in oklab, var(--myca-beige-dark) 40%, transparent);
	background: var(--myca-white);
}

#myca-category .myca-cat-trust-grid {
	margin-inline: auto;
	max-width: 87.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding: 2.5rem 1rem;
}

@media (min-width: 640px) {
	#myca-category .myca-cat-trust-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	#myca-category .myca-cat-trust-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

#myca-category .myca-cat-trust-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

#myca-category .myca-cat-trust-item svg {
	width: 24px;
	height: 24px;
	flex: none;
	color: var(--myca-orange);
}

#myca-category .myca-cat-trust-title {
	font-family: var(--myca-font-display);
	font-weight: 400;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--myca-black);
}

#myca-category .myca-cat-trust-sub {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var(--myca-gray);
}