/* ==========================================================================
   Boutique (WooCommerce) habillée aux couleurs du château.
   On n'écrit rien dans WooCommerce : on habille ce qu'il affiche.

   1. Fond et textes des pages de la boutique
   2. Fil d'Ariane, nombre de résultats et tri
   3. Haut du catalogue : bandeau, univers sur marbre, encart, titre
   4. La grille du catalogue (filets dorés)
   5. La vignette d'un produit (toutes les grilles de produits)
   6. Le bouton « Ajouter au panier » : sur la photo (souris),
      sous la photo (écran tactile)
   7. Badge promo, pagination, messages
   8. Tablette et téléphone
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fond crème et textes sombres sur toutes les pages de la boutique
      (le bandeau et l'encart velours gardent leur propre fond).
   -------------------------------------------------------------------------- */

body:is(.woocommerce, .woocommerce-page) .wp-site-blocks {
	background-color: var(--wp--preset--color--creme);
}

body:is(.woocommerce, .woocommerce-page) .wp-site-blocks > main {
	padding-bottom: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--encre);
	--tl-accent: var(--wp--preset--color--or-fonce);
}

body:is(.woocommerce, .woocommerce-page) .wp-site-blocks > main :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--noir-chaud);
}

/* Catalogue : le contenu (tri, grille) a la largeur de la grille. */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .wp-site-blocks > main > * {
	max-width: 1120px !important;
	margin-inline: auto !important;
}

/* --------------------------------------------------------------------------
   2. Fil d'Ariane, nombre de résultats et tri
   -------------------------------------------------------------------------- */

.wc-block-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: inherit;
	opacity: 0.75;
	text-decoration: none;
}

/* Dans le bandeau : texte clair, page en cours dorée. */
.tl-bandeau :is(.wc-block-breadcrumbs, .woocommerce-breadcrumb) {
	color: var(--wp--preset--color--or);
}

.tl-bandeau :is(.wc-block-breadcrumbs, .woocommerce-breadcrumb) a {
	color: var(--wp--preset--color--texte-clair);
}

.woocommerce-result-count,
.wc-block-product-results-count {
	color: #8a7a6a;
	font-size: 0.85rem;
}

.woocommerce-ordering select,
.wc-block-catalog-sorting select {
	padding: 0.45rem 2rem 0.45rem 0.8rem;
	border: 1px solid #d8cbb6;
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--noir-chaud);
	font-family: var(--wp--preset--font-family--mukta);
	font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   3. Haut du catalogue (composition « boutique-entete » et encart)
   -------------------------------------------------------------------------- */

/* Le bandeau simple */
.tl-bandeau--simple .wp-block-cover__inner-container {
	max-width: 1120px !important;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.tl-bandeau--simple h1 {
	margin: 0.5rem 0 0.4rem !important;
}

.tl-bandeau--simple .is-style-accroche {
	--tl-accent: var(--wp--preset--color--or);
	margin: 0 !important;
}

/* Sections « Nos univers » et « Nos produits » : fond crème, textes sombres. */
.tl-boutique-univers,
.tl-boutique-produits {
	background-color: var(--wp--preset--color--creme) !important;
	color: var(--wp--preset--color--encre);
	--tl-accent: var(--wp--preset--color--or-fonce);
}

.tl-boutique-univers h2,
.tl-boutique-produits h2 {
	color: var(--wp--preset--color--noir-chaud) !important;
}

/* « Nos univers » : sur un panneau de marbre adouci d'un voile blanc. */
.tl-boutique-univers {
	position: relative;
	isolation: isolate;
	padding-top: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--50));
	padding-bottom: var(--wp--preset--spacing--60);
}

.tl-boutique-univers::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--wp--preset--spacing--50);
	bottom: var(--wp--preset--spacing--30);
	left: clamp(1rem, 6vw, 7.5rem);
	right: clamp(1rem, 6vw, 7.5rem);
	background:
		linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
		#f4f3f1 var(--tl-marbre) center / 900px auto;
}

.tl-boutique-univers p.tl-surtitre-fleurons,
.tl-boutique-univers .tl-categories__nombre {
	color: #7a5a1c;
}

.tl-boutique-univers .tl-titre-section p.is-style-accroche {
	color: #8a6420;
}

.tl-boutique-univers .tl-categories {
	max-width: 1050px;
	margin-inline: auto;
}

/* « Nos produits » : le titre, juste au-dessus de la grille. */
.tl-boutique-produits {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: 0;
}

/* Encart « Idée cadeau » : le prix, doré. */
.tl-encart-prix {
	color: var(--wp--preset--color--or);
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   4. La grille du catalogue : 4 colonnes, cases tracées de filets dorés.
      (Sélecteur renforcé : WooCommerce impose sa propre grille adaptative.)
      --tl-case-haut / --tl-case-cote : marges intérieures de la case,
      utilisées pour placer le bouton sur la photo (section 6).
   -------------------------------------------------------------------------- */

ul.wc-block-product-template.wc-block-product-template__responsive {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0 !important;
	max-width: 1120px;
	margin: 1.5rem auto 0 !important;
	padding: 0 !important;
	border-top: 1px solid rgba(201, 162, 78, 0.45);
	border-left: 1px solid rgba(201, 162, 78, 0.45);
}

ul.wc-block-product-template.wc-block-product-template__responsive > li.wc-block-product {
	--tl-case-haut: 26px;
	--tl-case-cote: 22px;
	position: relative;
	container-type: inline-size;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: var(--tl-case-haut) var(--tl-case-cote) 26px !important;
	border-right: 1px solid rgba(201, 162, 78, 0.45);
	border-bottom: 1px solid rgba(201, 162, 78, 0.45);
	text-align: center !important;
	transition: background-color 0.3s ease;
}

ul.wc-block-product-template__responsive > li.wc-block-product:hover {
	background: #f7f2ea;
}

/* --------------------------------------------------------------------------
   5. La vignette d'un produit (catalogue, produits similaires, panier vide)
   -------------------------------------------------------------------------- */

/* La photo : carrée, sur fond ivoire, léger zoom au survol. */
.wc-block-product .wc-block-components-product-image {
	margin: 0 0 18px !important;
	overflow: hidden;
	background: #f7f2ea;
}

.wc-block-product:hover .wc-block-components-product-image {
	background: #ffffff;
}

.wc-block-product .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.8s ease;
}

.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.05);
}

/* Le nom */
.wc-block-product .wp-block-post-title {
	margin: 0 0 0.3rem !important;
	font-family: var(--wp--preset--font-family--dm-serif-display) !important;
	font-size: 1.2rem !important;
	font-weight: 400 !important;
	line-height: 1.25;
	text-align: center !important;
}

.wc-block-product .wp-block-post-title a {
	color: var(--wp--preset--color--noir-chaud);
	text-decoration: none;
	transition: color 0.25s ease;
}

.wc-block-product .wp-block-post-title a:hover {
	color: #a8873f;
}

/* Le prix */
.wc-block-product .wc-block-components-product-price {
	margin: 0 0 1rem !important;
	color: #6b5d50;
	font-size: 0.9rem !important;
	text-align: center !important;
}

.wc-block-product .wc-block-components-product-price del {
	color: #a89a8a;
}

.wc-block-product .wc-block-components-product-price ins {
	color: #8a6420;
	text-decoration: none;
}

/* Le bouton : noir et or, invisible au repos, révélé au survol de la case. */
.wc-block-product .wc-block-components-product-button {
	justify-content: center !important;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.wc-block-product:is(:hover, :focus-within) .wc-block-components-product-button {
	opacity: 1;
	transform: none;
}

.wc-block-product .wc-block-components-product-button :is(.wp-block-button__link, .wc-block-components-product-button__button) {
	padding: 0.55rem 1.2rem !important;
	border: 1px solid var(--wp--preset--color--noir-chaud) !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--noir-chaud) !important;
	color: var(--wp--preset--color--or) !important;
	font-family: var(--wp--preset--font-family--bodoni-moda) !important;
	font-size: 0.75rem !important;
	font-style: italic;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.wc-block-product .wc-block-components-product-button :is(.wp-block-button__link, .wc-block-components-product-button__button):hover {
	color: #ffffff !important;
}

/* Lien « Voir le panier », après un ajout. */
.wc-block-product .added_to_cart {
	display: inline-block;
	margin-top: 0.5rem;
	color: #a8873f;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. Le bouton « Ajouter au panier » dans la grille du catalogue
   -------------------------------------------------------------------------- */

/* Avec une souris : il glisse sur le bas de la photo au survol.
   La photo est carrée et pleine largeur : sa hauteur vaut la largeur de la
   case (100cqw, grâce à « container-type »), d'où la position du bouton. */
@media (hover: hover) {
	ul.wc-block-product-template__responsive > li.wc-block-product .wc-block-components-product-button {
		position: absolute;
		z-index: 2;
		top: calc(var(--tl-case-haut) + 100cqw - 12px);
		left: calc(var(--tl-case-cote) + 12px);
		right: calc(var(--tl-case-cote) + 12px);
		margin: 0 !important;
		transform: none !important;
		translate: 0 calc(-100% + 8px);
		transition: opacity 0.35s ease, translate 0.35s ease;
	}

	ul.wc-block-product-template__responsive > li.wc-block-product:is(:hover, :focus-within) .wc-block-components-product-button {
		translate: 0 -100%;
	}

	ul.wc-block-product-template__responsive > li.wc-block-product .wc-block-components-product-button :is(.wp-block-button__link, .wc-block-components-product-button__button) {
		width: 100%;
		justify-content: center;
	}

	ul.wc-block-product-template__responsive > li.wc-block-product .added_to_cart {
		display: block;
		margin-top: 4px;
		padding: 4px;
		background: rgba(255, 250, 243, 0.92);
		text-align: center;
	}
}

/* Écran tactile : pas de survol. Le bouton est toujours visible ; dans le
   catalogue, il est juste sous la photo (avant le nom et le prix), compact,
   pour rester aligné quelle que soit la longueur du nom. */
@media (hover: none) {
	.wc-block-product .wc-block-components-product-button {
		opacity: 1;
		transform: none;
	}

	ul.wc-block-product-template__responsive > li.wc-block-product {
		display: flex !important;
		flex-direction: column;
	}

	ul.wc-block-product-template__responsive > li.wc-block-product .wc-block-components-product-image {
		order: 0;
		margin-bottom: 0.6rem !important;
	}

	ul.wc-block-product-template__responsive > li.wc-block-product .wc-block-components-product-button {
		order: 1;
		margin: 0 0 0.9rem !important;
	}

	ul.wc-block-product-template__responsive > li.wc-block-product .wp-block-post-title {
		order: 2;
	}

	ul.wc-block-product-template__responsive > li.wc-block-product .wp-block-woocommerce-product-price {
		order: 3;
	}

	ul.wc-block-product-template__responsive > li.wc-block-product .wc-block-components-product-button :is(.wp-block-button__link, .wc-block-components-product-button__button) {
		padding: 0.5rem 0.4rem !important;
		font-size: 0.68rem !important;
		letter-spacing: 0.06em;
	}

	ul.wc-block-product-template__responsive > li.wc-block-product .added_to_cart {
		font-size: 0.7rem;
	}
}

/* --------------------------------------------------------------------------
   7. Badge promo, pagination, messages
   -------------------------------------------------------------------------- */

.wc-block-components-product-sale-badge,
.woocommerce span.onsale {
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--or) !important;
	color: var(--wp--preset--color--noir-chaud) !important;
	font-family: var(--wp--preset--font-family--bodoni-moda);
	font-style: italic;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wp-block-query-pagination {
	margin-top: 2.5rem !important;
}

.wp-block-query-pagination :is(a, .page-numbers) {
	color: var(--wp--preset--color--noir-chaud);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	color: #a8873f;
}

/* Messages (produit ajouté, erreurs…) : filet doré à gauche. */
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 0 !important;
	border-left: 3px solid var(--wp--preset--color--or) !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	color: var(--wp--preset--color--encre) !important;
}

.wc-block-components-notice-banner > svg {
	background-color: var(--wp--preset--color--or) !important;
}

/* --------------------------------------------------------------------------
   8. Tablette et téléphone
   -------------------------------------------------------------------------- */

/* Tablette : grille en 3 colonnes. */
@media (max-width: 1023px) {
	ul.wc-block-product-template.wc-block-product-template__responsive {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* Téléphone : « Nos univers » en grille de 2 × 2, dans le marbre,
   sans défilement ni filets de navigation. */
@media (max-width: 781px) {
	.tl-boutique-univers::before {
		left: 0.75rem;
		right: 0.75rem;
	}

	.tl-boutique-univers .tl-titre-section h2 {
		font-size: 1.9rem !important;
	}

	.tl-boutique-univers .tl-categories {
		padding-inline: 1.5rem;
	}

	.tl-boutique-univers .tl-categories__piste {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 1.1rem;
		padding: 0.5rem 8px 1rem 0 !important;
		overflow: visible !important;
	}

	.tl-boutique-univers .tl-categories__carte {
		flex: none !important;
		min-width: 0;
	}

	.tl-boutique-univers .tl-categories__cadre::before {
		transform: translate(8px, 8px);
	}

	.tl-boutique-univers .tl-categories__nom {
		font-size: 1.15rem !important;
	}

	.tl-boutique-univers .tl-categories__nav {
		display: none !important;
	}
}

/* Téléphone : grille en 2 colonnes, cases plus serrées. */
@media (max-width: 600px) {
	ul.wc-block-product-template.wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	ul.wc-block-product-template.wc-block-product-template__responsive > li.wc-block-product {
		--tl-case-haut: 16px;
		--tl-case-cote: 12px;
		padding-bottom: 18px !important;
	}

	.wc-block-product .wp-block-post-title {
		font-size: 1.05rem !important;
	}
}

/* Visiteurs qui ont demandé moins d'animations */
@media (prefers-reduced-motion: reduce) {
	.wc-block-product .wc-block-components-product-image img,
	.wc-block-product .wc-block-components-product-button,
	.wc-block-product .wp-block-post-title a {
		transition: none !important;
	}
}