/*
Theme Name: Cabrio - Dolce Machja
Theme URI: https://dolce-machja.local
Author: Cyrille Bernard
Author URI: https://cabrio.local
Description: Thème de blocs (FSE) pour une boutique de confitures artisanales sous WooCommerce. Identité gourmande, catalogue produits, panier et retrait en point de vente.
Version: 1.33.3
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Requires Plugins: woocommerce
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cab-dolce-machja
Tags: full-site-editing, block-patterns, block-styles, woocommerce, e-commerce, custom-colors, custom-menu, wide-blocks, translation-ready
*/

/*
 * Le style visuel du thème est piloté par theme.json (FSE).
 * Ce fichier ne sert qu'aux ajustements CSS ponctuels non couverts
 * par theme.json. Préfixe des classes personnalisées : .cab-dolce-
 */

/* -------------------------------------------------------------------------
 * Page d'accueil — sections pleine largeur qui s'enchaînent sans blanc
 * ---------------------------------------------------------------------- */

/* Supprime l'espace au-dessus du contenu (header collé au hero). */
.cab-dolce-home {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
}

/* Pied de page collé à la dernière section (pas de bande blanche). */
footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
 * Ancres : défilement doux + décalage sous l'en-tête collant (pas de coupe)
 * ---------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

/* Utilisateur connecté : ajouter la hauteur de la barre d'admin (32 px). */
html:has( body.admin-bar ) {
	scroll-padding-top: 152px;
}

@media screen and ( max-width: 782px ) {
	html:has( body.admin-bar ) {
		scroll-padding-top: 166px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

/* -------------------------------------------------------------------------
 * Bouton « retour en haut » (injecté par back-to-top.js)
 * ---------------------------------------------------------------------- */
.cab-dolce-top {
	position: fixed;
	right: clamp( 1rem, 3vw, 2rem );
	bottom: clamp( 1rem, 3vw, 2rem );
	z-index: 200;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px -6px rgba( 58, 35, 24, 0.55 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 12px );
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.18s ease;
}

.cab-dolce-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.cab-dolce-top:hover,
.cab-dolce-top:focus-visible {
	background-color: var( --wp--preset--color--secondary );
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-top {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

/* Supprime les blancs entre les sections (hero / diaporama / etc.). */
.cab-dolce-home > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
 * Boutons — survol harmonisé et fluide
 * ---------------------------------------------------------------------- */

/* Transition douce sur tous les boutons. */
.wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Boutons à fond « accent » (hero, points de vente…) : même survol que le
 * bouton par défaut du thème → fond prune foncé + texte clair. */
.wp-block-button__link.has-accent-background-color:hover,
.wp-block-button__link.has-accent-background-color:focus {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Boutons « contour » (is-style-outline) : se remplissent en terracotta au survol. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--primary ) !important;
	border-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* -------------------------------------------------------------------------
 * WooCommerce — cartes produit gourmandes (grille de la boutique)
 * ---------------------------------------------------------------------- */

/* Coins arrondis + ombre douce sur les visuels produit. */
.wc-block-product-template .wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product img {
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba( 58, 35, 24, 0.08 );
}

/* Léger soulèvement de la carte au survol. */
.wc-block-product-template .wc-block-product {
	transition: transform 0.18s ease;
}

.wc-block-product-template .wc-block-product:hover {
	transform: translateY( -4px );
}

/* Prix mis en valeur (repli si le style theme.json n'est pas appliqué). */
.wc-block-product-template .wp-block-woocommerce-product-price {
	font-weight: 700;
}

@media ( prefers-reduced-motion: reduce ) {
	.wc-block-product-template .wc-block-product {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Slider « produits en vedette » (accueil) — défilement horizontal, sans JS
 * ---------------------------------------------------------------------- */
.cab-dolce-slider .wc-block-product-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: clamp( 1rem, 2.5vw, 1.75rem );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0.5rem;
	padding: 0.5rem 0.25rem 1.5rem;
	margin: 0;
	list-style: none;
	scrollbar-color: var( --wp--preset--color--primary ) transparent;
}

.cab-dolce-slider .wc-block-product-template > .wc-block-product {
	flex: 0 0 auto;
	width: clamp( 240px, 42vw, 320px );
	scroll-snap-align: start;
	background-color: var( --wp--preset--color--base );
	border-radius: 16px;
	padding: 0.85rem 0.85rem 0.35rem;
	box-shadow: 0 12px 32px -18px rgba( 58, 35, 24, 0.5 );
}

.cab-dolce-slider .wc-block-product-template::-webkit-scrollbar {
	height: 8px;
}

.cab-dolce-slider .wc-block-product-template::-webkit-scrollbar-thumb {
	background: var( --wp--preset--color--primary );
	border-radius: 999px;
}

.cab-dolce-slider .wc-block-product-template::-webkit-scrollbar-track {
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 10%, transparent );
	border-radius: 999px;
}

/* Flèches de navigation du carrousel (injectées par carousel.js). */
.cab-dolce-slider {
	position: relative;
}

.cab-dolce-slider__nav {
	position: absolute;
	top: 38%;
	transform: translateY( -50% );
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px -6px rgba( 58, 35, 24, 0.55 );
	transition: background-color 0.18s ease, transform 0.18s ease;
	z-index: 3;
}

.cab-dolce-slider__nav:hover,
.cab-dolce-slider__nav:focus-visible {
	background-color: var( --wp--preset--color--secondary );
	transform: translateY( -50% ) scale( 1.08 );
}

.cab-dolce-slider__nav--prev {
	left: -12px;
}

.cab-dolce-slider__nav--next {
	right: -12px;
}

/* Sur mobile : pas de flèches, on fait glisser au doigt. */
@media ( max-width: 600px ) {
	.cab-dolce-slider__nav {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Diaporama plein écran (accueil) — une confiture à la fois
 * ---------------------------------------------------------------------- */
.cab-dolce-slideshow {
	position: relative;
}

.cab-dolce-slideshow__track,
.cab-dolce-slideshow .wc-block-product-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-dolce-slideshow__track::-webkit-scrollbar,
.cab-dolce-slideshow .wc-block-product-template::-webkit-scrollbar {
	display: none;
}

.cab-dolce-slideshow__track > .cab-dolce-slideshow__slide,
.cab-dolce-slideshow .wc-block-product-template > .wc-block-product {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
}

/* Diapo « produit » : photo plein cadre + nom/prix/bouton en surimpression. */
.cab-dolce-slideshow .wc-block-product {
	position: relative;
	min-height: 74vh;
	display: block;
	overflow: hidden;
	background-color: var( --wp--preset--color--secondary );
	padding: 0;
	border: 0;
}

/* Pas de soulèvement au survol dans le diaporama (chaque diapo est plein écran). */
.cab-dolce-slideshow .wc-block-product-template .wc-block-product,
.cab-dolce-slideshow .wc-block-product-template .wc-block-product:hover {
	transform: none;
	transition: none;
}

.cab-dolce-slideshow .wc-block-product .cab-dolce-slide__image,
.cab-dolce-slideshow .wc-block-product .wc-block-components-product-image,
.cab-dolce-slideshow .wc-block-product .wc-block-components-product-image a,
.cab-dolce-slideshow .wc-block-product .wc-block-components-product-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
}

.cab-dolce-slideshow .wc-block-product .wc-block-components-product-image img {
	object-fit: cover;
}

.cab-dolce-slide__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp( 2rem, 6vw, 4.5rem ) 1.5rem clamp( 2.5rem, 6vw, 4rem );
	background: linear-gradient( to top, rgba( 28, 26, 25, 0.82 ) 0%, rgba( 28, 26, 25, 0.35 ) 55%, rgba( 28, 26, 25, 0 ) 100% );
}

/* Titre et prix en clair pour rester lisibles sur la diapo (au repos). */
.cab-dolce-slide__overlay .wp-block-post-title,
.cab-dolce-slide__overlay .wp-block-post-title a,
.cab-dolce-slide__overlay .wp-block-woocommerce-product-price,
.cab-dolce-slide__overlay .wp-block-woocommerce-product-price * {
	color: var( --wp--preset--color--base ) !important;
}

.cab-dolce-slide__overlay .wp-block-woocommerce-product-price {
	font-weight: 700;
}

/* Survol du titre : passage en terracotta (primaire). */
.cab-dolce-slide__overlay .wp-block-post-title a:hover,
.cab-dolce-slide__overlay .wp-block-post-title a:focus {
	color: var( --wp--preset--color--primary ) !important;
}

/* Capsule promo du diaporama (badge conditionnel WooCommerce) — coin haut-droit. */
.cab-dolce-slideshow .wc-block-product .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: clamp( 1.5rem, 5vh, 3rem );
	right: clamp( 1.5rem, 4vw, 3.5rem );
	left: auto;
	z-index: 4;
	margin: 0;
	font-size: 1rem;
	padding: 0.5rem 1.4rem;
	letter-spacing: 0.08em;
}

/* Prix + poids par variation, centrés et lisibles dans le diaporama. */
.cab-dolce-slide__overlay .cab-dolce-pricing {
	margin-block: 0.6rem 1.4rem;
}

.cab-dolce-slide__overlay .cab-dolce-pw__row {
	font-size: 1.25rem;
}

/* Description courte : claire, centrée, largeur de lecture, max 3 lignes. */
.cab-dolce-slide__desc {
	max-width: 48ch;
	margin-inline: auto;
	color: var( --wp--preset--color--base ) !important;
	opacity: 0.92;
	font-size: 1.05rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cab-dolce-slide__desc .wp-block-post-excerpt__more-text {
	display: none;
}

/* -------------------------------------------------------------------------
 * Grille produits « façon Instagram » — photo en fond + texte par-dessus
 * ---------------------------------------------------------------------- */
/* Filtres rapides (pastilles de catégories) au-dessus de la grille. */
.cab-dolce-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 auto var( --wp--preset--spacing--50 );
	max-width: 1200px;
}

.cab-dolce-filter {
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast ) 18%, transparent );
	background: transparent;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	padding: 0.55rem 1.15rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cab-dolce-filter:hover,
.cab-dolce-filter:focus-visible {
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary );
}

.cab-dolce-filter.is-active {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

/* Tuiles très serrées, sans arrondi (grille façon Instagram). */
.cab-dolce-grid .wc-block-product-template {
	gap: 0.1rem !important;
}

.cab-dolce-grid .wc-block-product {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 0;
	margin: 0;
	padding: 0;
	background-color: var( --wp--preset--color--contrast );
}

/* Ceinture/bretelles : la photo remplit vraiment toute la tuile (jusqu'en bas). */
.cab-dolce-grid .wc-block-product .wc-block-grid__product-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

/* Date cachée (sert uniquement au filtre « Nouveautés »). */
.cab-dolce-tile__date {
	display: none !important;
}

/* Badge promo dans le coin haut-droit de la tuile. */
.cab-dolce-grid .wc-block-product .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	left: auto;
	z-index: 3;
	margin: 0;
}

/* La photo remplit toute la tuile. */
.cab-dolce-grid .wc-block-product .cab-dolce-tile__image,
.cab-dolce-grid .wc-block-product .wc-block-components-product-image,
.cab-dolce-grid .wc-block-product .wc-block-components-product-image a,
.cab-dolce-grid .wc-block-product .wc-block-components-product-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
}

.cab-dolce-grid .wc-block-product .wc-block-components-product-image img {
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* Zoom léger de la photo au survol (pas de soulèvement de la tuile). */
.cab-dolce-grid .wc-block-product-template .wc-block-product:hover {
	transform: none;
}

.cab-dolce-grid .wc-block-product:hover .wc-block-components-product-image img {
	transform: scale( 1.06 );
}

/* Voile plein cadre + nom/prix centrés : CACHÉS au repos, révélés au survol. */
.cab-dolce-tile__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 0.35rem;
	padding: 1.5rem;
	background-color: rgba( 28, 26, 25, 0.58 );
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cab-dolce-grid .wc-block-product:hover .cab-dolce-tile__overlay,
.cab-dolce-grid .wc-block-product:focus-within .cab-dolce-tile__overlay {
	opacity: 1;
}

/* Toute la tuile est cliquable. WooCommerce pose déjà un lien sur l'image,
 * qui couvre tout le cadre ; c'est le voile, posé par-dessus, qui interceptait
 * les clics et obligeait à viser le titre. On le rend transparent au pointeur
 * plutôt que d'ajouter un second lien étiré, qui ferait doublon au clavier et
 * pour les lecteurs d'écran. Le survol continue de fonctionner : il se
 * déclenche sur la tuile entière, dont l'image reste un enfant. */
.cab-dolce-tile__overlay {
	pointer-events: none;
}

/* Le titre reste cliquable pour lui-même. */
.cab-dolce-tile__overlay a {
	pointer-events: auto;
}

/* Le texte monte doucement en apparaissant. */
.cab-dolce-tile__overlay > * {
	transform: translateY( 14px );
	transition: transform 0.4s ease;
}

.cab-dolce-grid .wc-block-product:hover .cab-dolce-tile__overlay > *,
.cab-dolce-grid .wc-block-product:focus-within .cab-dolce-tile__overlay > * {
	transform: translateY( 0 );
}

.cab-dolce-tile__overlay .wp-block-post-title,
.cab-dolce-tile__overlay .wp-block-post-title a,
.cab-dolce-tile__overlay .wp-block-woocommerce-product-price,
.cab-dolce-tile__overlay .wp-block-woocommerce-product-price * {
	color: var( --wp--preset--color--base ) !important;
	margin: 0;
}

.cab-dolce-tile__overlay .wp-block-post-title {
	line-height: 1.2;
}

/* Liste prix + poids par variation (une ligne par format). */
.cab-dolce-pricing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.4rem;
}

.cab-dolce-pricing,
.cab-dolce-pricing * {
	color: var( --wp--preset--color--base ) !important;
}

.cab-dolce-pw__row {
	font-size: 1.05rem;
	line-height: 1.3;
}

/* Ancien prix barré (promo) plus discret, prix promo en gras. */
.cab-dolce-pw__price del {
	opacity: 0.7;
	font-weight: 400;
	margin-right: 0.3rem;
}

.cab-dolce-pw__price ins {
	text-decoration: none;
	font-weight: 700;
}

.cab-dolce-pw__unit {
	font-size: 0.85rem;
	opacity: 0.85;
	margin-left: 0.3rem;
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-grid .wc-block-product .wc-block-components-product-image img,
	.cab-dolce-tile__overlay,
	.cab-dolce-tile__overlay > * {
		transition: none;
	}

	.cab-dolce-tile__overlay > * {
		transform: none;
	}
}

/* Flèches de navigation. */
.cab-dolce-slideshow__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background-color: rgba( 255, 255, 255, 0.85 );
	color: var( --wp--preset--color--contrast );
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px -6px rgba( 58, 35, 24, 0.5 );
	transition: background-color 0.18s ease, transform 0.18s ease;
	z-index: 3;
}

.cab-dolce-slideshow__nav:hover,
.cab-dolce-slideshow__nav:focus-visible {
	background-color: #fff;
	transform: translateY( -50% ) scale( 1.08 );
}

.cab-dolce-slideshow__nav--prev {
	left: 18px;
}

.cab-dolce-slideshow__nav--next {
	right: 18px;
}

/* Points de navigation. */
.cab-dolce-slideshow__dots {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	display: flex;
	gap: 0.55rem;
	justify-content: center;
	z-index: 3;
}

.cab-dolce-slideshow__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: rgba( 255, 255, 255, 0.6 );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.4 );
	cursor: pointer;
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.cab-dolce-slideshow__dot[aria-current="true"] {
	background-color: #fff;
	transform: scale( 1.3 );
}

@media ( max-width: 600px ) {
	.cab-dolce-slideshow__nav {
		width: 40px;
		height: 40px;
		font-size: 1.5rem;
	}

	.cab-dolce-slideshow__nav--prev {
		left: 8px;
	}

	.cab-dolce-slideshow__nav--next {
		right: 8px;
	}
}

/* -------------------------------------------------------------------------
 * Accessibilité
 * ---------------------------------------------------------------------- */

/* Masquage visuel réservé aux lecteurs d'écran. */
.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Le lien d'évitement réapparaît quand il reçoit le focus clavier. */
.skip-link.screen-reader-text:focus {
	background-color: var( --wp--preset--color--base );
	border-radius: 6px;
	box-shadow: 0 0 2px 2px rgba( 0, 0, 0, 0.3 );
	clip: auto;
	clip-path: none;
	color: var( --wp--preset--color--primary );
	display: block;
	font-weight: 600;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 12px 20px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/* Contour de focus clavier lisible sur tous les éléments interactifs. */
:where( a, button, input, select, textarea, .wp-block-button__link, summary ):focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

/* Cible du lien d'évitement : pas de contour disgracieux au focus programmatique. */
#cab-dolce-content:focus {
	outline: none;
}

/* -------------------------------------------------------------------------
 * En-tête & navigation — version moderne
 * ---------------------------------------------------------------------- */

/* En-tête collant : position, marges, bordure et ombre gérées ici (pas de
 * style en ligne dans le markup, pour éviter les erreurs de validation de bloc). */
/* Le conteneur de la partie de modèle « en-tête » est rendu collant : son
 * parent (.wp-site-blocks) fait toute la hauteur de la page, donc il reste
 * bien visible au défilement (le rendre collant sur le header interne ne
 * marche pas : il est enfermé dans un conteneur de sa propre hauteur). */
/* Empêche l'ancrage de défilement de Chrome de "compenser" le rétrécissement
 * du header (cause principale du tremblement au scroll). */
html {
	overflow-anchor: none;
}

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Décalage sous la barre d'administration WordPress (utilisateur connecté). */
.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

.cab-dolce-header {
	position: relative;
	z-index: 100;
	padding-block: 0.7rem;
	padding-inline: clamp( 1rem, 4vw, 2rem );
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast ) 8%, transparent );
	box-shadow: 0 6px 22px -14px rgba( 58, 35, 24, 0.45 );
	transition: box-shadow 0.3s ease, background-color 0.3s ease, padding 0.4s ease;
}

/* En-tête compact au défilement : header plus fin + logo réduit. */
.cab-dolce-header.is-scrolled {
	padding-block: 0.3rem;
}

.cab-dolce-logo,
.cab-dolce-logo img {
	transition: width 0.4s ease, height 0.4s ease;
}

.cab-dolce-header.is-scrolled .cab-dolce-logo,
.cab-dolce-header.is-scrolled .cab-dolce-logo img {
	width: 48px !important;
	height: auto !important;
}

/* Fond crème net (pas de backdrop-filter : évite le scintillement au scroll). */
.cab-dolce-header.has-background {
	background-color: var( --wp--preset--color--base );
}

/* Repli pour les navigateurs sans color-mix : fond crème opaque + bordure charte. */
@supports not ( background-color: color-mix( in srgb, red, blue ) ) {
	.cab-dolce-header {
		border-bottom-color: var( --wp--preset--color--base-2 );
	}

	.cab-dolce-header.has-background {
		background-color: var( --wp--preset--color--base );
	}
}

/* Espacements de la barre et du bloc d'actions (compte + panier). */
.cab-dolce-header__bar {
	gap: clamp( 1rem, 3vw, 2rem );
}

/* Logo du site dans l'en-tête. */
.cab-dolce-logo {
	line-height: 0;
}

.cab-dolce-logo img {
	display: block;
	height: auto;
	transition: transform 0.2s ease;
}

.cab-dolce-logo a:hover img,
.cab-dolce-logo a:focus img {
	transform: scale( 1.04 );
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-logo img {
		transition: none;
	}
}

/* Bloc marque : nom + baseline corse serrés (conservé au cas où). */
.cab-dolce-brand {
	gap: 0.1rem;
}

.cab-dolce-brand .wp-block-site-title {
	line-height: 1.1;
	margin: 0;
}

/* Baseline « A cunfittura di Baracucca » : petites capitales espacées, caramel. */
.cab-dolce-baseline {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading );
	font-style: italic;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --wp--preset--color--contrast-2 );
}

.cab-dolce-header__actions {
	gap: 0.8rem;
}

/* Espacement aéré entre les entrées du menu. */
.cab-dolce-header .wp-block-navigation {
	font-family: var( --wp--preset--font-family--body );
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.01em;
}

.cab-dolce-header .wp-block-navigation .wp-block-navigation__container {
	gap: clamp( 1.1rem, 2vw, 2.2rem );
}

/* Chaque lien : couleur douce au repos, soulignement animé au survol. */
.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding: 0.35rem 0.15rem;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: color 0.18s ease;
}

.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background-color: var( --wp--preset--color--primary );
	transform: scaleX( 0 );
	transform-origin: center;
	transition: transform 0.22s ease;
}

.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content:focus,
.cab-dolce-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.cab-dolce-header .wp-block-navigation .wp-block-navigation-item__content:focus::after,
.cab-dolce-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX( 1 );
}

/* Lien « Mon compte » : icône + pastille au survol. */
.cab-dolce-header .cab-dolce-account a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-header .cab-dolce-account a::before {
	content: "\1F464"; /* 👤 */
	font-size: 0.95em;
	line-height: 1;
}

.cab-dolce-header .cab-dolce-account a:hover,
.cab-dolce-header .cab-dolce-account a:focus {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--primary );
}

/* Icône « Compte » (WooCommerce) + panier : mêmes couleurs, même survol. */
.cab-dolce-header__actions .wp-block-woocommerce-customer-account a,
.cab-dolce-header__actions .wc-block-mini-cart__button {
	color: var( --wp--preset--color--contrast );
	transition: color 0.18s ease, transform 0.18s ease;
}

.cab-dolce-header__actions .wp-block-woocommerce-customer-account a:hover,
.cab-dolce-header__actions .wp-block-woocommerce-customer-account a:focus,
.cab-dolce-header__actions .wc-block-mini-cart__button:hover,
.cab-dolce-header__actions .wc-block-mini-cart__button:focus {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-header__actions .wp-block-woocommerce-customer-account svg,
.cab-dolce-header__actions .wc-block-mini-cart__button svg {
	width: 1.4rem;
	height: 1.4rem;
}

/* Lien Connexion / Déconnexion (bloc natif, bascule selon l'état). */
.cab-dolce-header .cab-dolce-loginout a {
	color: var( --wp--preset--color--contrast );
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.18s ease;
}

.cab-dolce-header .cab-dolce-loginout a:hover,
.cab-dolce-header .cab-dolce-loginout a:focus {
	color: var( --wp--preset--color--primary );
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Bouton burger (mobile) aux couleurs de la charte. */
.cab-dolce-header .wp-block-navigation__responsive-container-open,
.cab-dolce-header .wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--contrast );
}

/* Overlay mobile : fond crème, liens larges et centrés. */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--base );
	padding: clamp( 2rem, 8vw, 4rem );
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.4rem;
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.4rem;
	font-family: var( --wp--preset--font-family--heading );
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* -------------------------------------------------------------------------
 * Emplacements photo — page « Les fruits de Corse »
 * Cadrage propre des images de décor, vides comme remplies.
 * ---------------------------------------------------------------------- */

/* Triptyque : 3 photos portrait, gap serré (identique à la grille d'accueil). */
.cab-dolce-triptyque {
	gap: 0.1rem !important;
}

.cab-dolce-triptyque .wp-block-column {
	margin: 0;
}

.cab-dolce-tri-img,
.cab-dolce-tri-img img {
	margin: 0;
}

.cab-dolce-tri-img {
	position: relative;
	display: block;
	overflow: hidden;
}

.cab-dolce-tri-img img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.5s ease;
}

/* Survol : zoom de la photo + assombrissement (même effet que les tuiles). */
.cab-dolce-tri-img:hover img,
.cab-dolce-tri-img:focus-within img {
	transform: scale( 1.06 );
}

.cab-dolce-tri-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba( 28, 26, 25, 0.35 );
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.cab-dolce-tri-img:hover::after,
.cab-dolce-tri-img:focus-within::after {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-tri-img img,
	.cab-dolce-tri-img::after {
		transition: none;
	}

	.cab-dolce-tri-img:hover img,
	.cab-dolce-tri-img:focus-within img {
		transform: none;
	}
}

/* Sur mobile, on conserve les 3 colonnes côte à côte (comme le modèle). */
@media screen and ( max-width: 781px ) {
	.cab-dolce-triptyque {
		flex-wrap: nowrap !important;
	}

	.cab-dolce-triptyque .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}
}

/* Tuile fruit (bloc Bannière) : photo en fond, format carré, texte par-dessus. */
.cab-dolce-fruit-cover {
	aspect-ratio: 1 / 1;
	min-height: 0 !important;
	border-radius: 12px;
	overflow: hidden;
	padding: 1rem;
}

/* Variante paysage (16/9) : sections à deux tuiles, ex. « trésors du maquis ». */
.cab-dolce-fruit-cover--wide {
	aspect-ratio: 16 / 9;
}

/* La photo de fond couvre toute la tuile. */
.cab-dolce-fruit-cover .wp-block-cover__image-background {
	object-fit: cover;
}

/* Texte centré, espacement resserré, toujours au-dessus du voile. */
.cab-dolce-fruit-cover .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cab-dolce-fruit-cover .wp-block-cover__inner-container > * {
	margin: 0;
}

/* Le texte de la tuile reste blanc, y compris dans l'éditeur. */
.cab-dolce-fruit-cover .wp-block-cover__inner-container :where( h1, h2, h3, h4, p ) {
	color: var( --wp--preset--color--base );
}

/* Survol : zoom de la photo, assombrissement et texte en fondu
   (même effet que la grille « Nos confitures » de l'accueil). */
.cab-dolce-fruit-cover .wp-block-cover__image-background {
	transition: transform 0.5s ease;
}

.cab-dolce-fruit-cover:hover .wp-block-cover__image-background,
.cab-dolce-fruit-cover:focus-within .wp-block-cover__image-background {
	transform: scale( 1.06 );
}

/* Voile sombre absent au repos, révélé au survol. */
.cab-dolce-fruit-cover .wp-block-cover__background.has-background-dim {
	opacity: 0 !important;
	transition: opacity 0.4s ease;
}

.cab-dolce-fruit-cover:hover .wp-block-cover__background.has-background-dim,
.cab-dolce-fruit-cover:focus-within .wp-block-cover__background.has-background-dim {
	opacity: 0.58 !important;
}

/* Texte masqué au repos, qui remonte en douceur au survol. */
.cab-dolce-fruit-cover .wp-block-cover__inner-container {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cab-dolce-fruit-cover:hover .wp-block-cover__inner-container,
.cab-dolce-fruit-cover:focus-within .wp-block-cover__inner-container {
	opacity: 1;
}

.cab-dolce-fruit-cover .wp-block-cover__inner-container > * {
	transform: translateY( 14px );
	transition: transform 0.4s ease;
}

.cab-dolce-fruit-cover:hover .wp-block-cover__inner-container > *,
.cab-dolce-fruit-cover:focus-within .wp-block-cover__inner-container > * {
	transform: translateY( 0 );
}

/* Dans l'éditeur, tout reste visible pour pouvoir modifier les textes. */
.editor-styles-wrapper .cab-dolce-fruit-cover .wp-block-cover__inner-container {
	opacity: 1;
}

.editor-styles-wrapper .cab-dolce-fruit-cover .wp-block-cover__inner-container > * {
	transform: none;
}

.editor-styles-wrapper .cab-dolce-fruit-cover .wp-block-cover__background.has-background-dim {
	opacity: 0.5 !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-fruit-cover .wp-block-cover__image-background,
	.cab-dolce-fruit-cover .wp-block-cover__background.has-background-dim,
	.cab-dolce-fruit-cover .wp-block-cover__inner-container,
	.cab-dolce-fruit-cover .wp-block-cover__inner-container > * {
		transition: none;
	}

	.cab-dolce-fruit-cover .wp-block-cover__inner-container > * {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Boutique — mise en page à deux colonnes avec barre latérale
 * ---------------------------------------------------------------------- */
.cab-dolce-shop {
	align-items: flex-start;
}

/* Barre latérale : reste visible pendant le défilement des produits. */
.cab-dolce-shop__sidebar {
	position: sticky;
	top: 120px;
}

.admin-bar .cab-dolce-shop__sidebar {
	top: 152px;
}

.cab-dolce-shop__sidebar h2,
.cab-dolce-shop__sidebar h3 {
	font-family: var( --wp--preset--font-family--heading );
}

.cab-dolce-shop__sidebar > h2:first-child {
	margin-top: 0;
}

/* Conteneur du bloc Recherche : ni cadre ni fond (styles par défaut du bloc). */
.cab-dolce-shop__sidebar .wp-block-search__inside-wrapper {
	gap: 0.4rem;
	padding: 0;
	border: 0;
	background: transparent;
}

/* Bouton loupe : pastille terracotta. */
.cab-dolce-shop__sidebar .wp-block-search__button {
	margin: 0;
	padding: 0.55rem 0.95rem;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-shop__sidebar .wp-block-search__button:hover,
.cab-dolce-shop__sidebar .wp-block-search__button:focus {
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* Champ de recherche aux couleurs de la charte. */
.cab-dolce-shop__sidebar .wp-block-search__input {
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	padding: 0.6rem 1rem;
	background-color: var( --wp--preset--color--base );
	font-size: 0.95rem;
}

.cab-dolce-shop__sidebar .wp-block-search__input:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

/* Liste des catégories : une ligne par catégorie, compteur à droite. */
.cab-dolce-shop__sidebar .wc-block-product-categories-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le compteur est un frère du lien : c'est le <li> qui porte la mise en ligne. */
.cab-dolce-shop__sidebar .wc-block-product-categories-list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-shop__sidebar .wc-block-product-categories-list-item:last-child {
	border-bottom: 0;
}

.cab-dolce-shop__sidebar .wc-block-product-categories-list-item > a {
	flex: 1 1 auto;
	padding: 0;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: color 0.18s ease;
}

.cab-dolce-shop__sidebar .wc-block-product-categories-list-item > a:hover,
.cab-dolce-shop__sidebar .wc-block-product-categories-list-item > a:focus {
	color: var( --wp--preset--color--primary );
}

/* Compteur en pastille discrète, aligné à droite sur la même ligne. */
.cab-dolce-shop__sidebar .wc-block-product-categories-list-item-count {
	flex: none;
	min-width: 1.8rem;
	padding: 0.08rem 0.5rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.78rem;
	line-height: 1.5;
	text-align: center;
}

/* Sous-catégories : ligne entière sous le parent, légèrement décalées. */
.cab-dolce-shop__sidebar .wc-block-product-categories-list-item > .wc-block-product-categories-list {
	flex: 0 0 100%;
	margin: 0.35rem 0 0;
	padding-left: 0.9rem;
	border-left: 2px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-shop__sidebar .wc-block-product-categories-list-item > .wc-block-product-categories-list .wc-block-product-categories-list-item {
	border-bottom: 0;
	padding: 0.3rem 0;
	font-size: 0.92rem;
}

/* Encarts de la barre latérale. */
.cab-dolce-shop__card > *:first-child {
	margin-top: 0;
}

.cab-dolce-shop__card > *:last-child {
	margin-bottom: 0;
}

/* Barre « nombre de résultats + tri ». */
.cab-dolce-shop__toolbar {
	gap: 1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-shop__toolbar .woocommerce-result-count {
	margin: 0;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.9rem;
}

.cab-dolce-shop__toolbar select {
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	padding: 0.45rem 2rem 0.45rem 0.9rem;
	background-color: var( --wp--preset--color--base );
	font-size: 0.9rem;
}

/* Sur tablette et mobile : la barre latérale passe au-dessus des produits. */
@media screen and ( max-width: 781px ) {
	.cab-dolce-shop__sidebar {
		position: static;
		top: auto;
	}
}

/* -------------------------------------------------------------------------
 * Boutique — liste de produits en barre latérale (« Produits les mieux notés »)
 * Vignette à gauche, titre / note / prix à droite.
 * ---------------------------------------------------------------------- */

/* --- Cas 1 : bloc « Collection de produits » --- */
.cab-dolce-shop__sidebar .wc-block-product-template {
	display: flex !important;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wc-block-product {
	display: grid;
	grid-template-columns: 72px 1fr;
	/* Rangées explicites : indispensable pour que « 1 / -1 » couvre
	   toute la hauteur (sinon -1 vaut la ligne 1 et l'image se décale). */
	grid-template-rows: repeat( 4, min-content );
	align-items: center;
	align-content: center;
	column-gap: 0.85rem;
	row-gap: 0.15rem;
	width: 100% !important;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
	background: none;
	box-shadow: none;
}

/* Pas de soulèvement au survol dans la barre latérale. */
.cab-dolce-shop__sidebar .wc-block-product-template .wc-block-product:hover {
	transform: none;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-woocommerce-product-image {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
	margin: 0;
}

/* Titre, note et prix : tous en colonne 2, alignés à gauche. */
.cab-dolce-shop__sidebar .wc-block-product-template .wc-block-product > *:not( .wp-block-woocommerce-product-image ) {
	grid-column: 2;
	justify-self: stretch;
}

/* Les blocs portent des marges en ligne (réglages d'espacement du modèle) :
   on les neutralise, c'est « row-gap » qui gère l'écart entre les lignes. */
.cab-dolce-shop__sidebar .wc-block-product-template .wc-block-product > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-woocommerce-product-image img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: none;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-post-title {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.35;
	text-align: left;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-post-title a {
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: color 0.18s ease;
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-post-title a:hover,
.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-post-title a:focus {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-woocommerce-product-price {
	margin: 0.2rem 0 0;
	font-size: 0.92rem;
	text-align: left;
	color: var( --wp--preset--color--contrast-2 );
}

/* Étoiles (bloc « Note du produit ») aux couleurs de la charte. */
.cab-dolce-shop__sidebar .wc-block-product-template .wc-block-components-product-rating,
.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-woocommerce-product-rating {
	margin: 0 !important;
	font-size: 0.85rem;
	line-height: 1.2;
	text-align: left;
	justify-content: flex-start;
}

.cab-dolce-shop__sidebar .wc-block-components-product-rating__stars,
.cab-dolce-shop__sidebar .wc-block-components-product-rating__stars::before,
.cab-dolce-shop__sidebar .wc-block-components-product-rating__stars span::before {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-shop__sidebar .wc-block-components-product-rating__reviews_count {
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.8rem;
}

/* Bouton d'achat masqué : la barre latérale reste une liste de découverte. */
.cab-dolce-shop__sidebar .wc-block-product-template .wp-block-woocommerce-product-button {
	display: none;
}

/* --- Cas 2 : liste classique WooCommerce (product_list_widget) --- */
.cab-dolce-shop__sidebar ul.product_list_widget {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-dolce-shop__sidebar ul.product_list_widget li {
	display: grid;
	grid-template-columns: 72px 1fr;
	grid-template-rows: repeat( 3, min-content );
	align-items: center;
	align-content: center;
	column-gap: 0.85rem;
	row-gap: 0.15rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-shop__sidebar ul.product_list_widget li:last-child {
	border-bottom: 0;
}

.cab-dolce-shop__sidebar ul.product_list_widget li > a {
	display: contents;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
}

.cab-dolce-shop__sidebar ul.product_list_widget li img {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
	width: 72px;
	height: 72px;
	margin: 0;
	object-fit: cover;
	border-radius: 10px;
	float: none;
}

.cab-dolce-shop__sidebar ul.product_list_widget .product-title {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 0.95rem;
	line-height: 1.35;
	transition: color 0.18s ease;
}

.cab-dolce-shop__sidebar ul.product_list_widget li > a:hover .product-title,
.cab-dolce-shop__sidebar ul.product_list_widget li > a:focus .product-title {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-shop__sidebar ul.product_list_widget .star-rating {
	margin: 0.2rem 0;
	font-size: 0.75rem;
	color: var( --wp--preset--color--primary );
}

.cab-dolce-shop__sidebar ul.product_list_widget .woocommerce-Price-amount {
	font-weight: 600;
	font-size: 0.92rem;
	color: var( --wp--preset--color--contrast-2 );
}

.cab-dolce-shop__sidebar ul.product_list_widget del {
	opacity: 0.6;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
 * Page de résultats de recherche — cartes avec visuel
 * ---------------------------------------------------------------------- */

/* Formulaire de recherche centré, aux couleurs de la charte. */
.cab-dolce-search-form .wp-block-search__inside-wrapper {
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: transparent;
}

.cab-dolce-search-form .wp-block-search__input {
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	padding: 0.7rem 1.1rem;
	background-color: var( --wp--preset--color--base );
}

.cab-dolce-search-form .wp-block-search__input:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.cab-dolce-search-form .wp-block-search__button {
	margin: 0;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-search-form .wp-block-search__button:hover,
.cab-dolce-search-form .wp-block-search__button:focus {
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* Grille de résultats. */
.cab-dolce-results .wp-block-post-template {
	gap: clamp( 1.2rem, 2.5vw, 2rem );
}

.cab-dolce-result {
	height: 100%;
}

.cab-dolce-result .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}

.cab-dolce-result .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.cab-dolce-result:hover .wp-block-post-featured-image img {
	transform: scale( 1.06 );
}

/* Repli visuel quand l'article n'a pas d'image mise en avant. */
.cab-dolce-result .wp-block-post-featured-image:empty {
	display: none;
}

.cab-dolce-result .wp-block-post-title a {
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: color 0.18s ease;
}

.cab-dolce-result .wp-block-post-title a:hover,
.cab-dolce-result .wp-block-post-title a:focus {
	color: var( --wp--preset--color--primary );
}

.cab-dolce-result .wp-block-post-excerpt {
	color: var( --wp--preset--color--contrast-2 );
}

.cab-dolce-result .wp-block-post-excerpt__more-link {
	color: var( --wp--preset--color--primary );
}

/* Pagination des résultats. */
.cab-dolce-results .wp-block-query-pagination {
	gap: 0.6rem;
}

.cab-dolce-results .wp-block-query-pagination a,
.cab-dolce-results .wp-block-query-pagination .current {
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	text-decoration: none;
}

.cab-dolce-results .wp-block-query-pagination .current {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-result .wp-block-post-featured-image img {
		transition: none;
	}

	.cab-dolce-result:hover .wp-block-post-featured-image img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Boutique — vignettes produit : zoom + assombrissement au survol
 * (même effet que les tuiles « fruits » et le triptyque)
 * ---------------------------------------------------------------------- */

/* On abandonne le soulèvement de la carte au profit du zoom sur la photo. */
.cab-dolce-shop__main .wc-block-product-template .wc-block-product:hover {
	transform: none;
}

.cab-dolce-shop__main .wc-block-components-product-image {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

.cab-dolce-shop__main .wc-block-components-product-image img {
	display: block;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}

.cab-dolce-shop__main .wc-block-product:hover .wc-block-components-product-image img,
.cab-dolce-shop__main .wc-block-product:focus-within .wc-block-components-product-image img {
	transform: scale( 1.06 );
}

/* Voile sombre révélé au survol. */
.cab-dolce-shop__main .wc-block-components-product-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgba( 28, 26, 25, 0.35 );
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cab-dolce-shop__main .wc-block-product:hover .wc-block-components-product-image::after,
.cab-dolce-shop__main .wc-block-product:focus-within .wc-block-components-product-image::after {
	opacity: 1;
}

/* Badge promo au-dessus du voile. */
.cab-dolce-shop__main .wp-block-woocommerce-product-sale-badge {
	z-index: 3;
}

/* WooCommerce le colle à 4 px du bord et le dimensionne pour de grandes
 * vignettes : sur les 269 px de la boutique, la capsule occupait le tiers de
 * la largeur de l'image. On la décolle au même retrait que sur la grille
 * d'accueil (0,7 rem) et on la resserre.
 *
 * Les produits similaires utilisent des vignettes de même gabarit : ils
 * partagent donc la règle. La grille d'accueil en est exclue — ses vignettes
 * de 399 px laissent la capsule d'origine à 23 % de la largeur, soit déjà
 * moins qu'ici après correction. */
.cab-dolce-shop__main .wc-block-components-product-sale-badge,
.cab-dolce-related .wc-block-components-product-sale-badge {
	top: 0.7rem;
	right: 0.7rem;
	padding: 0.22rem 0.62rem;
	font-size: 0.72rem;
}

/* -------------------------------------------------------------------------
 * Pastille de note incrustée en bas à droite de la vignette
 * ---------------------------------------------------------------------- */
.cab-dolce-rating-badge {
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	z-index: 3;
	/* Purement décorative : elle ne doit pas percer un trou dans le lien qui
	   couvre la vignette. Sa lecture accessible passe par l'attribut
	   aria-label du bloc d'étoiles, pas par le pointeur. */
	pointer-events: none;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	background-color: rgba( 251, 247, 242, 0.92 );
	box-shadow: 0 4px 12px -4px rgba( 58, 35, 24, 0.45 );
	line-height: 1;
}

/* Étoiles WooCommerce aux couleurs de la charte, compactes.
 *
 * WooCommerce ne stylise « .star-rating » que sous un ancêtre « .woocommerce »
 * (ou sous l'ancien balisage « .wc-block-grid__product-rating »). Le bloc
 * Collection de produits n'en génère aucun : sur la page d'accueil, le badge
 * affichait donc la phrase brute « Noté 5.00 sur 5 basé sur 1 notation
 * client » au lieu des étoiles. On rejoue ici les règles de WooCommerce en
 * les rattachant au badge, ce qui les rend indépendantes du conteneur.
 * La police « WooCommerce », qui porte les glyphes, est déclarée globalement
 * et reste donc disponible. */
.cab-dolce-rating-badge .star-rating {
	display: block;
	position: relative;
	float: none;
	overflow: hidden;
	width: 5.4em;
	height: 1em;
	margin: 0;
	color: var( --wp--preset--color--primary );
	font-family: WooCommerce, sans-serif;
	font-size: 0.78rem;
	line-height: 1;
}

.cab-dolce-rating-badge .star-rating::before {
	content: "sssss";
	position: absolute;
	top: 0;
	left: 0;
	float: left;
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 22%, transparent );
}

/* La largeur en ligne posée par WooCommerce sur ce span donne la proportion
   d'étoiles pleines ; le décalage vertical repousse le texte hors du cadre. */
.cab-dolce-rating-badge .star-rating > span {
	position: absolute;
	top: 0;
	left: 0;
	float: left;
	overflow: hidden;
	padding-top: 1.5em;
}

.cab-dolce-rating-badge .star-rating > span::before {
	content: "SSSSS";
	position: absolute;
	top: 0;
	left: 0;
}

/* Le libellé « Note x sur 5 » reste pour les lecteurs d'écran uniquement. */
.cab-dolce-rating-badge .rating,
.cab-dolce-rating-badge .star-rating > span > strong {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Pas de pastille dans la barre latérale : la note y est déjà affichée. */
.cab-dolce-shop__sidebar .cab-dolce-rating-badge {
	display: none;
}

/* Pastille de note révélée au survol, comme les textes des autres visuels,
 * et au même rythme que les voiles des tuiles (0,4 s).
 *
 * Quatre contextes partagent ce comportement : le diaporama « en vedette »,
 * la grille de la page d'accueil, la boutique et les produits similaires. */
.cab-dolce-slideshow .cab-dolce-rating-badge,
.cab-dolce-grid .cab-dolce-rating-badge,
.cab-dolce-shop__main .cab-dolce-rating-badge,
.cab-dolce-related .cab-dolce-rating-badge {
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.cab-dolce-slideshow .wc-block-product:hover .cab-dolce-rating-badge,
.cab-dolce-slideshow .wc-block-product:focus-within .cab-dolce-rating-badge,
.cab-dolce-grid .wc-block-product:hover .cab-dolce-rating-badge,
.cab-dolce-grid .wc-block-product:focus-within .cab-dolce-rating-badge,
.cab-dolce-shop__main .wc-block-product:hover .cab-dolce-rating-badge,
.cab-dolce-shop__main .wc-block-product:focus-within .cab-dolce-rating-badge,
.cab-dolce-related .wc-block-product:hover .cab-dolce-rating-badge,
.cab-dolce-related .wc-block-product:focus-within .cab-dolce-rating-badge {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-shop__main .cab-dolce-rating-badge {
		transition: opacity 0.2s ease;
		transform: none;
	}

	.cab-dolce-shop__main .wc-block-product:hover .cab-dolce-rating-badge,
	.cab-dolce-shop__main .wc-block-product:focus-within .cab-dolce-rating-badge {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Boutique — bandeau d'en-tête sur le dégradé de l'accueil
 * Le fil d'Ariane est remonté sur le bandeau du titre : un seul élément
 * porte le dégradé, donc pas de couture dans le dégradé diagonal.
 * ---------------------------------------------------------------------- */

/* Fil d'Ariane superposé au dégradé.
   Il est sorti du flux (position absolue) plutôt que tiré par une marge
   négative : sa hauteur varie selon les pages (boutique, catégorie…), ce qui
   décalait le bandeau. Hors du flux, la position ne dépend plus de lui. */
main:has( .cab-dolce-shop ) {
	position: relative;
}

main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs {
	position: absolute;
	top: 1.5rem;
	left: 0;
	right: 0;
	z-index: 2;
	font-family: var( --wp--preset--font-family--body );
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--base );
}

main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs .woocommerce-breadcrumb,
main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs nav {
	font-family: var( --wp--preset--font-family--body );
	color: var( --wp--preset--color--base );
}

main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs a {
	color: var( --wp--preset--color--base );
	text-decoration: none;
	border-bottom: 1px solid rgba( 251, 247, 242, 0.45 );
	transition: border-color 0.18s ease, opacity 0.18s ease;
}

main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs a:hover,
main:has( .cab-dolce-shop ) > .wp-block-woocommerce-breadcrumbs a:focus {
	border-bottom-color: var( --wp--preset--color--base );
	opacity: 0.85;
}

/* Bandeau du titre : pleine largeur + dégradé « confiture ».
   On reproduit le comportement natif de « alignfull » (pas de 100vw,
   donc aucun débordement horizontal lié à la barre de défilement). */
/* Le bandeau colle à l'en-tête (pas de blanc au-dessus). */
main:has( .cab-dolce-shop ) {
	margin-top: 0 !important;
}

main:has( .cab-dolce-shop ) > .wp-block-group:has( > .wp-block-query-title ) {
	max-width: none;
	/* Le bandeau devient le premier élément du flux : il colle à l'en-tête. */
	margin-top: 0 !important;
	/* Marge latérale du site compensée : bord à bord.
	   « !important » nécessaire : la mise en page contrainte de WordPress
	   impose « margin-left/right: auto !important » à ses enfants. */
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	padding-top: 4.5rem;
	padding-bottom: 3.5rem;
	background-image: var( --wp--preset--gradient--confiture );
}

/* Titre et accroche calqués sur le hero de l'accueil.
   « !important » : les classes de taille de police de WordPress en usent aussi. */
main:has( .cab-dolce-shop ) > .wp-block-group:has( > .wp-block-query-title ) .wp-block-query-title {
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--xx-large ) !important;
}

main:has( .cab-dolce-shop ) > .wp-block-group:has( > .wp-block-query-title ) p {
	color: var( --wp--preset--color--base ) !important;
	font-size: var( --wp--preset--font-size--large ) !important;
	font-weight: 400;
	opacity: 0.9;
}

/* Mobile : bandeau un peu plus compact. */
@media screen and ( max-width: 781px ) {
	main:has( .cab-dolce-shop ) > .wp-block-group:has( > .wp-block-query-title ) {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Pied de page — listes de liens resserrées et survol terracotta
 * ---------------------------------------------------------------------- */
.cab-dolce-footer .wp-block-navigation__container {
	gap: 0.55rem;
}

.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content {
	display: inline-block;
	padding: 0.1rem 0;
	transition: color 0.18s ease, transform 0.18s ease;
}

/* Le lien passe en terracotta et se décale légèrement au survol.
   « !important » : les classes de couleur de WordPress en usent aussi. */
.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var( --wp--preset--color--primary ) !important;
	transform: translateX( 3px );
}

/* Icônes sociales : même couleur de survol. */
.cab-dolce-footer .wp-block-social-links .wp-social-link {
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.cab-dolce-footer .wp-block-social-links .wp-social-link:hover,
.cab-dolce-footer .wp-block-social-links .wp-social-link:focus-within {
	color: var( --wp--preset--color--primary ) !important;
	transform: translateY( -2px );
}

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content,
	.cab-dolce-footer .wp-block-social-links .wp-social-link {
		transition: color 0.18s ease;
	}

	.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
	.cab-dolce-footer .wp-block-navigation .wp-block-navigation-item__content:focus,
	.cab-dolce-footer .wp-block-social-links .wp-social-link:hover,
	.cab-dolce-footer .wp-block-social-links .wp-social-link:focus-within {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * En-tête et pied de page alignés sur la largeur du contenu des pages
 * Ce sont des groupes « contraints » : leurs enfants sont bridés à la
 * taille de contenu (1080 px) alors que les sections des pages utilisent
 * la largeur étendue (1200 px). On les aligne sur cette dernière.
 * ---------------------------------------------------------------------- */
.cab-dolce-header .cab-dolce-header__bar,
.cab-dolce-footer > .wp-block-columns,
.cab-dolce-footer > .wp-block-separator,
.cab-dolce-footer > .wp-block-group,
.cab-dolce-footer > p {
	max-width: var( --wp--style--global--wide-size );
}

/* -------------------------------------------------------------------------
 * En-tête — menu hamburger étendu aux tablettes
 * Le bouton et le panneau existent déjà (réglage « mobile » du bloc
 * Navigation) : WordPress les masque au-dessus de 600 px. On repousse ce
 * seuil à 1024 px pour couvrir smartphones ET tablettes.
 * ---------------------------------------------------------------------- */
@media screen and ( min-width: 600px ) and ( max-width: 1023px ) {

	/* Bouton hamburger visible. */
	.cab-dolce-header .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex !important;
	}

	/* Menu en ligne masqué : il ne s'affiche qu'en superposition. */
	.cab-dolce-header .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none !important;
	}

	/* Croix de fermeture disponible dans le panneau ouvert. */
	.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: block !important;
	}
}

/* Confort tactile : zone de clic plus généreuse sur le hamburger. */
.cab-dolce-header .wp-block-navigation__responsive-container-open {
	padding: 0.35rem;
	border-radius: 8px;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.cab-dolce-header .wp-block-navigation__responsive-container-open:hover,
.cab-dolce-header .wp-block-navigation__responsive-container-open:focus-visible {
	color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--base-2 );
}

/* Panneau ouvert : liens bien espacés et lisibles au doigt. */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 0.4rem 0;
}

/* Le soulignement animé du menu de bureau n'a pas de sens en superposition. */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* -------------------------------------------------------------------------
 * Bouton hamburger — à droite des icônes, aux couleurs de la marque,
 * et icône à 3 barres (celle de WordPress n'en a que 2).
 * ---------------------------------------------------------------------- */
@media screen and ( max-width: 1023px ) {

	/* Ordre : logo à gauche, puis compte/panier, puis le hamburger. */
	.cab-dolce-header .cab-dolce-header__bar {
		justify-content: flex-start;
	}

	.cab-dolce-header .cab-dolce-header__bar > .wp-block-site-logo {
		order: 1;
	}

	.cab-dolce-header .cab-dolce-header__bar > .cab-dolce-header__actions {
		order: 2;
		margin-left: auto;
	}

	.cab-dolce-header .cab-dolce-header__bar > .wp-block-navigation {
		order: 3;
	}
}

/* Pastille du bouton.
   Pas de « display » ici : WordPress masque déjà le bouton au-dessus de
   600 px, et notre requête média le réaffiche jusqu'à 1023 px. En forcer
   un ici le rendrait visible aussi sur grand écran. */
.cab-dolce-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 10px;
	color: var( --wp--preset--color--primary );
	background-color: transparent;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.cab-dolce-header .wp-block-navigation__responsive-container-open:hover,
.cab-dolce-header .wp-block-navigation__responsive-container-open:focus-visible {
	color: var( --wp--preset--color--secondary );
	background-color: var( --wp--preset--color--base-2 );
}

/* On masque l'icône native (2 barres) et on en dessine 3. */
.cab-dolce-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.cab-dolce-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

/* Croix de fermeture du panneau, aux mêmes couleurs. */
.cab-dolce-header .wp-block-navigation__responsive-container-close {
	padding: 0.35rem;
	border-radius: 10px;
	color: var( --wp--preset--color--primary );
	transition: color 0.18s ease, background-color 0.18s ease;
}

.cab-dolce-header .wp-block-navigation__responsive-container-close:hover,
.cab-dolce-header .wp-block-navigation__responsive-container-close:focus-visible {
	color: var( --wp--preset--color--secondary );
	background-color: var( --wp--preset--color--base-2 );
}

/* -------------------------------------------------------------------------
 * Panneau du menu ouvert — aux couleurs de la marque
 * ---------------------------------------------------------------------- */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--secondary );
	background-image: var( --wp--preset--gradient--confiture );
	color: var( --wp--preset--color--base );
	padding: clamp( 2rem, 8vw, 4rem );
}

/* Liens : titrage Roxborough, crème, terracotta au survol. */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	font-size: clamp( 1.35rem, 5vw, 1.7rem );
	padding: 0.45rem 0;
	transition: color 0.18s ease;
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var( --wp--preset--color--primary ) !important;
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.8rem;
}

/* Croix de fermeture : crème sur le dégradé, terracotta au survol. */
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--base );
}

.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
.cab-dolce-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	color: var( --wp--preset--color--primary );
	background-color: rgba( 251, 247, 242, 0.14 );
}

/* -------------------------------------------------------------------------
 * Pagination — boutique et résultats de recherche
 * ---------------------------------------------------------------------- */
.cab-dolce-shop__main .wp-block-query-pagination,
.cab-dolce-results .wp-block-query-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: var( --wp--preset--spacing--60 );
	padding-top: var( --wp--preset--spacing--50 );
	border-top: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-shop__main .wp-block-query-pagination-numbers,
.cab-dolce-results .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

/* Numéros de page en pastilles. */
.cab-dolce-shop__main .page-numbers,
.cab-dolce-results .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.65rem;
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-shop__main a.page-numbers:hover,
.cab-dolce-shop__main a.page-numbers:focus-visible,
.cab-dolce-results a.page-numbers:hover,
.cab-dolce-results a.page-numbers:focus-visible {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--secondary );
}

/* Page courante : pastille terracotta, texte foncé (charte). */
.cab-dolce-shop__main .page-numbers.current,
.cab-dolce-results .page-numbers.current {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
}

.cab-dolce-shop__main .page-numbers.dots,
.cab-dolce-results .page-numbers.dots {
	min-width: 1.5rem;
	padding: 0;
	color: var( --wp--preset--color--contrast-2 );
}

/* Liens « précédent » / « suivant » en boutons contour. */
.cab-dolce-shop__main .wp-block-query-pagination-previous,
.cab-dolce-shop__main .wp-block-query-pagination-next,
.cab-dolce-results .wp-block-query-pagination-previous,
.cab-dolce-results .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	/* La bordure est comptée dans la hauteur, sinon ces boutons font 42 px
	   contre 40 px pour les pastilles de numéros, qui n'en ont pas. */
	box-sizing: border-box;
	height: 40px;
	padding: 0 1.05rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.92rem;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-shop__main .wp-block-query-pagination-previous:hover,
.cab-dolce-shop__main .wp-block-query-pagination-previous:focus-visible,
.cab-dolce-shop__main .wp-block-query-pagination-next:hover,
.cab-dolce-shop__main .wp-block-query-pagination-next:focus-visible,
.cab-dolce-results .wp-block-query-pagination-previous:hover,
.cab-dolce-results .wp-block-query-pagination-previous:focus-visible,
.cab-dolce-results .wp-block-query-pagination-next:hover,
.cab-dolce-results .wp-block-query-pagination-next:focus-visible {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

/* Flèches décoratives. */
.cab-dolce-shop__main .wp-block-query-pagination-previous::before,
.cab-dolce-results .wp-block-query-pagination-previous::before {
	content: "\2190";
}

.cab-dolce-shop__main .wp-block-query-pagination-next::after,
.cab-dolce-results .wp-block-query-pagination-next::after {
	content: "\2192";
}

/* Mobile : pagination centrée et resserrée. */
@media screen and ( max-width: 600px ) {
	.cab-dolce-shop__main .wp-block-query-pagination,
	.cab-dolce-results .wp-block-query-pagination {
		justify-content: center;
	}

	.cab-dolce-shop__main .wp-block-query-pagination-previous,
	.cab-dolce-shop__main .wp-block-query-pagination-next,
	.cab-dolce-results .wp-block-query-pagination-previous,
	.cab-dolce-results .wp-block-query-pagination-next {
		padding: 0 0.8rem;
		font-size: 0.85rem;
	}
}

/* -------------------------------------------------------------------------
 * Fiche produit — bandeau d'en-tête (même traitement que la boutique)
 * Fil d'Ariane, titre du produit et description courte sur le dégradé.
 * ---------------------------------------------------------------------- */

/* Le bandeau colle à l'en-tête. Sur la fiche produit, WooCommerce insère un
   conteneur « .wp-block-group.woocommerce » AUTOUR du <main> : c'est lui qui
   porte l'espacement entre blocs, il faut donc le viser aussi. */
main:has( .cab-dolce-product-banner ),
.wp-site-blocks > .wp-block-group.woocommerce:has( .cab-dolce-product-banner ) {
	margin-top: 0 !important;
}

.cab-dolce-product-banner {
	max-width: none;
	/* Marge latérale du site compensée : bord à bord.
	   « !important » : la mise en page contrainte impose « margin: auto ». */
	margin-top: 0 !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	/* Le fil d'Ariane étant ici DANS le bandeau (et non superposé comme sur
	   la boutique), c'est lui qui reçoit le retrait haut : 1,5 rem, comme là-bas. */
	padding-top: 1.5rem;
	padding-bottom: 3.5rem;
	background-image: var( --wp--preset--gradient--confiture );
}

/* Fil d'Ariane clair sur le dégradé. */
.cab-dolce-product-banner .wp-block-woocommerce-breadcrumbs,
.cab-dolce-product-banner .woocommerce-breadcrumb,
.cab-dolce-product-banner nav {
	font-family: var( --wp--preset--font-family--body );
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--base );
}

.cab-dolce-product-banner a {
	color: var( --wp--preset--color--base );
	text-decoration: none;
	border-bottom: 1px solid rgba( 251, 247, 242, 0.45 );
	transition: border-color 0.18s ease, opacity 0.18s ease;
}

.cab-dolce-product-banner a:hover,
.cab-dolce-product-banner a:focus {
	border-bottom-color: var( --wp--preset--color--base );
	opacity: 0.85;
}

/* Titre du produit : même traitement que le hero. */
.cab-dolce-product-banner .wp-block-post-title {
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	/* Aligne le titre sur la même hauteur que celui de la boutique. */
	margin-top: 1.15rem;
	margin-bottom: var( --wp--preset--spacing--20 );
}

/* Description courte : plus grande, plus claire. */
.cab-dolce-product-banner .wp-block-post-excerpt,
.cab-dolce-product-banner .wp-block-post-excerpt p {
	color: var( --wp--preset--color--base ) !important;
	font-size: var( --wp--preset--font-size--large ) !important;
	font-weight: 400;
	opacity: 0.9;
	margin-bottom: 0;
}

/* Mobile : bandeau plus compact. */
@media screen and ( max-width: 781px ) {
	.cab-dolce-product-banner {
		padding-bottom: 2.5rem;
	}

	.cab-dolce-product-banner .wp-block-post-title {
		margin-top: 0.1rem;
	}
}

/* -------------------------------------------------------------------------
 * Fiche produit — section « produits similaires »
 * Bandeau rosé pleine largeur + effets de survol de la boutique.
 * ---------------------------------------------------------------------- */

/* La section rejoint le pied de page, sans bande claire intermédiaire. */
main:has( .cab-dolce-related ) {
	margin-bottom: 0 !important;
}

.cab-dolce-related > :first-child {
	margin-top: 0;
}

/* Titre de section à la même échelle que les autres titres du site.
   « !important » : les classes de taille de police de WordPress en usent. */
.cab-dolce-related h2 {
	text-align: center;
	margin-bottom: var( --wp--preset--spacing--50 );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-large ) !important;
	line-height: 1.2;
}

/* Vignette : zoom + assombrissement au survol (comme la boutique). */
.cab-dolce-related .wc-block-product-template .wc-block-product:hover {
	transform: none;
}

.cab-dolce-related .wc-block-components-product-image {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

.cab-dolce-related .wc-block-components-product-image img {
	display: block;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}

.cab-dolce-related .wc-block-product:hover .wc-block-components-product-image img,
.cab-dolce-related .wc-block-product:focus-within .wc-block-components-product-image img {
	transform: scale( 1.06 );
}

.cab-dolce-related .wc-block-components-product-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgba( 28, 26, 25, 0.35 );
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cab-dolce-related .wc-block-product:hover .wc-block-components-product-image::after,
.cab-dolce-related .wc-block-product:focus-within .wc-block-components-product-image::after {
	opacity: 1;
}

.cab-dolce-related .wp-block-woocommerce-product-sale-badge {
	z-index: 3;
}

/* La révélation au survol de la pastille de note est regroupée avec celle de
   la boutique et de la grille d'accueil, dans la section « pastille de note ». */

@media ( prefers-reduced-motion: reduce ) {
	.cab-dolce-related .wc-block-components-product-image img,
	.cab-dolce-related .wc-block-components-product-image::after,
	.cab-dolce-related .cab-dolce-rating-badge {
		transition: none;
	}

	.cab-dolce-related .wc-block-product:hover .wc-block-components-product-image img,
	.cab-dolce-related .wc-block-product:focus-within .wc-block-components-product-image img,
	.cab-dolce-related .cab-dolce-rating-badge {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Fiche produit — onglets (Description, Informations, Avis)
 * ---------------------------------------------------------------------- */
.wp-block-woocommerce-product-details ul.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp( 0.6rem, 2vw, 2rem );
	margin: 0 0 var( --wp--preset--spacing--50 );
	padding: 0 0 0.1rem;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
	list-style: none;
}

/* Réinitialise les décorations par défaut de WooCommerce. */
.wp-block-woocommerce-product-details ul.wc-tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.wp-block-woocommerce-product-details ul.wc-tabs li::before,
.wp-block-woocommerce-product-details ul.wc-tabs li::after {
	display: none;
}

.wp-block-woocommerce-product-details ul.wc-tabs li a {
	display: block;
	padding: 0.7rem 0.2rem;
	border-bottom: 2px solid transparent;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.98rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-block-woocommerce-product-details ul.wc-tabs li a:hover,
.wp-block-woocommerce-product-details ul.wc-tabs li a:focus-visible {
	color: var( --wp--preset--color--primary );
}

/* Onglet actif : soulignement terracotta. */
.wp-block-woocommerce-product-details ul.wc-tabs li.active a {
	color: var( --wp--preset--color--contrast );
	border-bottom-color: var( --wp--preset--color--primary );
	font-weight: 600;
}

/* Panneaux. */
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel {
	padding-top: var( --wp--preset--spacing--20 );
}

/* Chaque panneau répète le libellé de son onglet (« Description »,
   « Informations complémentaires », « Avis »). L'onglet actif, souligné,
   joue déjà ce rôle : on masque ces titres visuellement, tout en les
   conservant pour les lecteurs d'écran et la structure du document. */
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel > h2:first-child,
.wp-block-woocommerce-product-details .woocommerce-Reviews-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Tableau « Informations complémentaires ». */
.wp-block-woocommerce-product-details .shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-woocommerce-product-details .shop_attributes th,
.wp-block-woocommerce-product-details .shop_attributes td {
	padding: 0.65rem 0.8rem;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
	text-align: left;
	vertical-align: top;
}

.wp-block-woocommerce-product-details .shop_attributes th {
	width: 32%;
	font-weight: 600;
	color: var( --wp--preset--color--contrast-2 );
}

.wp-block-woocommerce-product-details .shop_attributes p {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Avis clients
 * ---------------------------------------------------------------------- */
.woocommerce-Reviews .commentlist {
	margin: 0 0 var( --wp--preset--spacing--50 );
	padding: 0;
	list-style: none;
}

.woocommerce-Reviews .commentlist li {
	margin-bottom: var( --wp--preset--spacing--40 );
	padding: var( --wp--preset--spacing--40 );
	border-radius: 12px;
	background-color: var( --wp--preset--color--base-2 );
}

.woocommerce-Reviews .comment-text .star-rating {
	color: var( --wp--preset--color--primary );
	margin-bottom: 0.4rem;
}

.woocommerce-Reviews .woocommerce-review__author {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.05rem;
}

.woocommerce-Reviews .woocommerce-review__published-date {
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.85rem;
}

/* Formulaire d'avis, au style des autres champs du site. */
.woocommerce-Reviews #respond input[type="text"],
.woocommerce-Reviews #respond input[type="email"],
.woocommerce-Reviews #respond textarea {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 12px;
	background-color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--body );
}

.woocommerce-Reviews #respond input:focus,
.woocommerce-Reviews #respond textarea:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.woocommerce-Reviews #respond .stars a {
	color: var( --wp--preset--color--primary );
}

.woocommerce-Reviews #respond .form-submit input[type="submit"] {
	padding: 0.75rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce-Reviews #respond .form-submit input[type="submit"]:hover,
.woocommerce-Reviews #respond .form-submit input[type="submit"]:focus-visible {
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* Onglets défilables plutôt que tassés sur petit écran. */
@media screen and ( max-width: 600px ) {
	.wp-block-woocommerce-product-details ul.wc-tabs {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.wp-block-woocommerce-product-details ul.wc-tabs li a {
		white-space: nowrap;
	}
}

/* WooCommerce impose « border: none » et « color: inherit » sur le lien des
   onglets (product-details.css, sélecteurs préfixés « html body »). Plutôt que
   de lutter contre, on porte couleur et soulignement sur le <li> : le lien,
   lui, hérite — ce qui utilise la règle de WooCommerce au lieu de la combattre. */
.wp-block-woocommerce-product-details ul.tabs.wc-tabs {
	border-bottom: 1px solid var( --wp--preset--color--base-2 ) !important;
}

.wp-block-woocommerce-product-details ul.tabs.wc-tabs li {
	border-bottom: 2px solid transparent !important;
	margin-bottom: -1px;
	color: var( --wp--preset--color--contrast-2 ) !important;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-block-woocommerce-product-details ul.tabs.wc-tabs li:hover,
.wp-block-woocommerce-product-details ul.tabs.wc-tabs li:focus-within {
	color: var( --wp--preset--color--primary ) !important;
}

/* Onglet actif : texte foncé et soulignement terracotta.
   Préfixe « html body » pour égaler la spécificité de WooCommerce. */
html body .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details ul.tabs.wc-tabs.wc-tabs li.active.active {
	border-bottom-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
}

/* Le lien hérite de la couleur du <li> et ne porte plus de bordure. */
.wp-block-woocommerce-product-details ul.tabs.wc-tabs li a {
	color: inherit !important;
	border: 0 !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}

html body .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details ul.tabs.wc-tabs.wc-tabs li.active.active a {
	color: var( --wp--preset--color--contrast ) !important;
	font-weight: 600 !important;
}

/* Le « border-bottom » du <li> actif est verrouillé par une règle de
   WooCommerce que la spécificité seule ne surpasse pas. On dessine donc le
   soulignement avec un pseudo-élément, hors de portée de ce conflit. */
.wp-block-woocommerce-product-details ul.tabs.wc-tabs li {
	position: relative;
}

html body .wp-block-woocommerce-product-details ul.tabs.wc-tabs li.active::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	border: 0;
	background-color: var( --wp--preset--color--primary ) !important;
}

/* Le bloc conteneur est lui aussi bridé (512 px par défaut). */
.wp-block-woocommerce-product-image-gallery {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

/* -------------------------------------------------------------------------
 * Fiche produit — galerie à vignettes verticales
 * Vignettes en colonne à gauche, grande image à droite.
 * Le ratio carré est imposé en CSS (object-fit) : aucune régénération
 * d'images nécessaire, et la colonne ne saute plus d'une photo à l'autre.
 * ---------------------------------------------------------------------- */
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	/* WooCommerce fige une largeur sur la galerie : on la laisse occuper
	   toute la colonne, sinon la grande image reste inutilement petite. */
	width: 100% !important;
	max-width: none !important;
}

/* Grande image à droite. */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 12px;
	overflow: hidden;
}

/* Ratio carré, sans toucher au calque de zoom. */
.woocommerce-product-gallery__image > a > img,
.woocommerce-product-gallery__image > img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Colonne de vignettes à gauche. */
.woocommerce-product-gallery .flex-control-thumbs {
	order: 1;
	flex: 0 0 78px;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	width: 100% !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	/* Bordure réservée dès le repos : la vignette ne change pas de taille
	   quand elle devient active, et le cerclage reste dans le cadre
	   (contrairement à box-shadow, qui déborde et se fait rogner). */
	box-sizing: border-box;
	border: 2px solid transparent;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
}

/* Vignette active : cerclée de terracotta. */
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1 !important;
	border-color: var( --wp--preset--color--primary ) !important;
	box-shadow: none !important;
}

/* Loupe de la visionneuse, dans le coin de la grande image. */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	z-index: 5;
	top: 0.8rem;
	right: 0.8rem;
}

/* Mobile : vignettes en bande horizontale sous la photo. */
@media screen and ( max-width: 600px ) {
	.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
		flex-direction: column;
	}

	.woocommerce-product-gallery .flex-control-thumbs {
		order: 2;
		flex: 0 0 auto;
		flex-direction: row;
		width: 100%;
		overflow-x: auto;
	}

	.woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 68px;
	}
}

/* -------------------------------------------------------------------------
 * Fiche produit — prix, choix de variation, quantité et ajout au panier
 * ---------------------------------------------------------------------- */

/* Prix principal de la fiche produit, mis en valeur.
   « > » volontaire : cible le prix placé directement dans la colonne d'achat,
   pas ceux des grilles (produits similaires, boutique), qui gardent leur taille. */
.single-product .wp-block-column > .wp-block-woocommerce-product-price {
	font-size: 1.8rem !important;
	font-weight: 700;
	line-height: 1.2;
	color: var( --wp--preset--color--contrast-2 );
}

.single-product .wp-block-column > .wp-block-woocommerce-product-price del {
	opacity: 0.55;
	font-weight: 400;
	font-size: 0.75em;
}

/* --- Choix de la variation : le tableau devient une mise en page verticale --- */
.single-product form.cart table.variations {
	width: 100%;
	margin: 0 0 var( --wp--preset--spacing--40 );
	border: 0;
	background: none;
}

.single-product form.cart table.variations tbody,
.single-product form.cart table.variations tr,
.single-product form.cart table.variations th,
.single-product form.cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
}

.single-product form.cart table.variations th.label label {
	display: block;
	margin-bottom: 0.45rem;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.single-product form.cart table.variations td.value select {
	width: 100%;
	max-width: 320px;
	padding: 0.72rem 2.4rem 0.72rem 1.1rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
	cursor: pointer;
}

.single-product form.cart table.variations td.value select:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.single-product form.cart a.reset_variations {
	display: inline-block;
	margin-top: 0.55rem;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.85rem;
}

/* Prix de la variation choisie. */
.single-product .woocommerce-variation-price .price {
	display: block;
	margin-bottom: var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--contrast-2 );
	font-size: 1.45rem;
	font-weight: 700;
}

.single-product .woocommerce-variation-availability p {
	margin: 0 0 var( --wp--preset--spacing--30 );
	font-size: 0.9rem;
	color: var( --wp--preset--color--contrast-2 );
}

/* --- Quantité + bouton sur une même ligne --- */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
}

.single-product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}

/* Sélecteur « − 1 + » : un groupe arrondi à la hauteur du bouton (48 px).
   Les boutons sont injectés par assets/js/quantity.js. */
.single-product form.cart .quantity.cab-dolce-qty {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 48px;
	padding: 0 0.25rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	background-color: var( --wp--preset--color--base );
}

.single-product form.cart .cab-dolce-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.single-product form.cart .cab-dolce-qty__btn:hover,
.single-product form.cart .cab-dolce-qty__btn:focus-visible {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--primary );
}

/* Champ central : hauteur et remplissage forcés (WooCommerce les impose). */
.single-product form.cart .quantity input.qty {
	width: 44px !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem !important;
	font-weight: 600;
	text-align: center;
	color: var( --wp--preset--color--contrast );
}

.single-product form.cart .quantity input.qty:focus {
	outline: 0;
}

.single-product form.cart .quantity.cab-dolce-qty:focus-within {
	border-color: var( --wp--preset--color--primary );
}

/* Flèches natives masquées : les boutons « − / + » les remplacent. */
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product form.cart .quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Bouton d'ajout au panier : pastille terracotta, texte foncé (charte).
   « !important » : WooCommerce impose sa propre couleur de bouton. */
.single-product form.cart button.single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 210px;
	padding: 0.9rem 1.7rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.single-product form.cart button.single_add_to_cart_button:hover,
.single-product form.cart button.single_add_to_cart_button:focus-visible {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Bouton inactif tant qu'aucune variation n'est choisie. */
.single-product form.cart button.single_add_to_cart_button.disabled,
.single-product form.cart button.single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Message « Ce produit est déjà dans votre panier » et alertes de stock. */
.single-product .stock {
	font-size: 0.9rem;
	color: var( --wp--preset--color--leaf );
}

.single-product .stock.out-of-stock {
	color: var( --wp--preset--color--secondary );
}

/* -------------------------------------------------------------------------
 * Fiche produit — respiration de la colonne d'achat
 * ---------------------------------------------------------------------- */
.single-product .wp-block-woocommerce-product-rating {
	margin-bottom: var( --wp--preset--spacing--30 );
}

.single-product .wp-block-column > .wp-block-woocommerce-product-price {
	margin-bottom: var( --wp--preset--spacing--50 );
}

.single-product form.cart table.variations {
	margin-bottom: var( --wp--preset--spacing--50 ) !important;
}

.single-product .woocommerce-variation-add-to-cart {
	margin-top: var( --wp--preset--spacing--40 );
}

.single-product .wp-block-woocommerce-product-meta {
	margin-top: var( --wp--preset--spacing--50 );
	padding-top: var( --wp--preset--spacing--40 );
	border-top: 1px solid var( --wp--preset--color--base-2 );
	font-size: 0.9rem;
}

.single-product .wp-block-woocommerce-product-meta .wp-block-group {
	gap: 1.2rem;
	flex-wrap: wrap;
}

/* Encart « retrait sur place » un peu plus aéré. */
.single-product .wp-block-add-to-cart-form + .wp-block-group {
	margin-top: var( --wp--preset--spacing--50 ) !important;
}

/* -------------------------------------------------------------------------
 * « Vous aimerez peut-être aussi… » (ventes incitatives) et ventes croisées
 * Sections « classiques » de WooCommerce : même traitement visuel que les
 * produits similaires (bandeau rosé pleine largeur + effets de survol).
 * ---------------------------------------------------------------------- */
main section.upsells,
main section.cross-sells {
	max-width: none !important;
	/* Bord à bord : on compense la marge latérale du site. */
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: var( --wp--preset--spacing--70 ) var( --wp--style--root--padding-left );
	background-color: var( --wp--preset--color--base-2 );
}

/* Contenu recentré sur la largeur du site. */
main section.upsells > h2,
main section.upsells > ul.products,
main section.cross-sells > h2,
main section.cross-sells > ul.products {
	max-width: var( --wp--style--global--wide-size );
	margin-right: auto;
	margin-left: auto;
}

main section.upsells > h2,
main section.cross-sells > h2 {
	margin-top: 0;
	margin-bottom: var( --wp--preset--spacing--50 );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-large ) !important;
	line-height: 1.2;
	text-align: center;
}

/* Grille de produits. */
main section.upsells ul.products,
main section.cross-sells ul.products {
	/* Flex plutôt que grille : les tuiles restent centrées quel que soit
	   leur nombre, sans piste vide résiduelle. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22.5px;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

main section.upsells li.product,
main section.cross-sells li.product {
	flex: 0 1 222px;
	max-width: 222px;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	text-align: center;
	list-style: none;
}

main section.upsells li.product::before,
main section.cross-sells li.product::before {
	display: none;
}

/* Vignette (conteneur ajouté par assets/js/loop-thumb.js). */
main section.upsells .cab-dolce-thumb,
main section.cross-sells .cab-dolce-thumb {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: 0.8rem;
}

main section.upsells .cab-dolce-thumb img,
main section.cross-sells .cab-dolce-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 !important;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}

/* Zoom + voile sombre au survol, comme les produits similaires. */
main section.upsells li.product:hover .cab-dolce-thumb img,
main section.upsells li.product:focus-within .cab-dolce-thumb img,
main section.cross-sells li.product:hover .cab-dolce-thumb img,
main section.cross-sells li.product:focus-within .cab-dolce-thumb img {
	transform: scale( 1.06 );
}

main section.upsells .cab-dolce-thumb::after,
main section.cross-sells .cab-dolce-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgba( 28, 26, 25, 0.35 );
	opacity: 0;
	transition: opacity 0.4s ease;
}

main section.upsells li.product:hover .cab-dolce-thumb::after,
main section.upsells li.product:focus-within .cab-dolce-thumb::after,
main section.cross-sells li.product:hover .cab-dolce-thumb::after,
main section.cross-sells li.product:focus-within .cab-dolce-thumb::after {
	opacity: 1;
}

/* Titre et prix. */
main section.upsells .woocommerce-loop-product__title,
main section.cross-sells .woocommerce-loop-product__title {
	margin: 0 0 0.35rem;
	padding: 0 !important;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 18px !important;
	line-height: 1.3;
}

main section.upsells li.product .price,
main section.cross-sells li.product .price {
	display: block;
	margin-bottom: 0.9rem;
	color: var( --wp--preset--color--contrast ) !important;
	font-size: 14.4px !important;
	font-weight: 700 !important;
}

/* Le montant lui-même hérite (WooCommerce le style séparément). */
main section.upsells li.product .price .woocommerce-Price-amount,
main section.cross-sells li.product .price .woocommerce-Price-amount {
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

main section.upsells li.product .price del,
main section.cross-sells li.product .price del {
	opacity: 0.55;
	font-weight: 400;
}

main section.upsells li.product a,
main section.cross-sells li.product a {
	text-decoration: none;
}

/* Bouton, au style du site. */
main section.upsells li.product a.button,
main section.cross-sells li.product a.button {
	display: inline-block;
	padding: 12px 24px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-size: 14.4px !important;
	font-weight: 600 !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

main section.upsells li.product a.button:hover,
main section.cross-sells li.product a.button:hover {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Badge promo éventuel. */
main section.upsells li.product .onsale,
main section.cross-sells li.product .onsale {
	z-index: 3;
}

@media ( prefers-reduced-motion: reduce ) {
	main section.upsells .cab-dolce-thumb img,
	main section.cross-sells .cab-dolce-thumb img,
	main section.upsells .cab-dolce-thumb::after,
	main section.cross-sells .cab-dolce-thumb::after {
		transition: none;
	}

	main section.upsells li.product:hover .cab-dolce-thumb img,
	main section.cross-sells li.product:hover .cab-dolce-thumb img {
		transform: none;
	}
}

/* Section « produits similaires » masquée quand WooCommerce n'en propose
   aucun : sans cela, il ne resterait qu'un bandeau rosé vide. */
.cab-dolce-related:not( :has( .wc-block-product ) ) {
	display: none;
}

/* Idem pour les ventes incitatives et croisées sans produit. */
main section.upsells:not( :has( li.product ) ),
main section.cross-sells:not( :has( li.product ) ) {
	display: none;
}

/* Grille des produits similaires centrée, comme les ventes incitatives. */
.cab-dolce-related .wc-block-product-template {
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * Fiche produit — badge « Promo ! » de la galerie
 * Par défaut : cercle vert olive placé à cheval sur la première vignette.
 * On le transforme en capsule terracotta, en haut à droite de la grande image.
 * ---------------------------------------------------------------------- */
.wp-block-woocommerce-product-image-gallery {
	position: relative;
}

.wp-block-woocommerce-product-image-gallery span.onsale {
	position: absolute !important;
	top: 0.9rem !important;
	right: 0.9rem !important;
	bottom: auto !important;
	left: auto !important;
	z-index: 6;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0.38rem 0.9rem !important;
	/* Contour, graisse et absence d'ombre alignés sur la pastille de la
	   boutique et du panier. Le contour manquait ici parce que la galerie
	   utilise l'ancien balisage « span.onsale » et non le bloc, qui porte
	   ces styles d'origine. */
	border: 1px solid rgb( 67, 69, 75 ) !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: none !important;
}

/* La loupe passe en bas à droite pour ne pas croiser le badge. */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: auto !important;
	bottom: 0.9rem !important;
	right: 0.9rem !important;
}

/* Mobile : les vignettes passent dessous, le badge reste sur la photo. */
@media screen and ( max-width: 600px ) {
	.wp-block-woocommerce-product-image-gallery span.onsale {
		top: 0.7rem !important;
		right: 0.7rem !important;
	}
}

/* -------------------------------------------------------------------------
 * Panier (bloc WooCommerce)
 * ---------------------------------------------------------------------- */

/* Titre de la page. */
.woocommerce-cart .wp-block-post-title {
	text-align: center;
	font-family: var( --wp--preset--font-family--heading );
}

/* --- Colonne des articles --- */
.wc-block-cart-items {
	border: 0;
}

.wc-block-cart-items__header {
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.wc-block-cart-items__row td {
	padding-top: var( --wp--preset--spacing--40 );
	padding-bottom: var( --wp--preset--spacing--40 );
}

/* Vignette produit. */
td.wc-block-cart-item__image {
	width: 96px !important;
}

.wc-block-cart-item__image img {
	width: 96px !important;
	max-width: none !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
}

/* Nom du produit. */
.wc-block-components-product-name {
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: 1.15rem !important;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.18s ease;
}

.wc-block-components-product-name:hover,
.wc-block-components-product-name:focus {
	color: var( --wp--preset--color--primary ) !important;
}

/* Détails de variation (contenance…). */
.wc-block-components-product-details {
	margin: 0.35rem 0 0;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.88rem;
}

.wc-block-components-product-details__name {
	font-weight: 600;
}

/* Prix unitaire et total de ligne. */
.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-item__total .wc-block-components-product-price {
	color: var( --wp--preset--color--contrast-2 );
	font-weight: 700;
}

.wc-block-cart-item__total .wc-block-components-product-price {
	font-size: 1.05rem;
}

/* Sélecteur de quantité, au style du site. */
.wc-block-components-quantity-selector {
	display: inline-flex !important;
	align-items: center;
	box-sizing: border-box;
	width: auto !important;
	min-width: 0;
	height: 42px;
	margin-top: 0.6rem;
	padding: 0 0.2rem;
	border: 1px solid var( --wp--preset--color--base-2 ) !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--base );
}

.wc-block-components-quantity-selector::after {
	display: none !important;
}

.wc-block-components-quantity-selector__input {
	width: 40px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem !important;
	font-weight: 600;
	text-align: center;
}

.wc-block-components-quantity-selector__button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var( --wp--preset--color--contrast-2 ) !important;
	font-size: 1.1rem;
	opacity: 1 !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wc-block-components-quantity-selector__button:hover:not( :disabled ),
.wc-block-components-quantity-selector__button:focus-visible {
	background-color: var( --wp--preset--color--base-2 ) !important;
	color: var( --wp--preset--color--primary ) !important;
}

.wc-block-components-quantity-selector__button:disabled {
	opacity: 0.35 !important;
	cursor: not-allowed;
}

/* Lien « Supprimer ». */
.wc-block-cart-item__remove-link {
	margin-top: 0.6rem;
	color: var( --wp--preset--color--contrast-2 ) !important;
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.18s ease;
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus {
	color: var( --wp--preset--color--secondary ) !important;
}

/* --- Colonne des totaux --- */
.wc-block-cart__sidebar .wc-block-components-sidebar-layout,
.wc-block-cart__sidebar > * {
	border-radius: 16px;
}

.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	padding: var( --wp--preset--spacing--50 );
	border: 0;
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.wc-block-cart__totals-title {
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.wc-block-components-totals-item {
	color: var( --wp--preset--color--contrast );
}

.wc-block-components-totals-item__label {
	color: var( --wp--preset--color--contrast-2 );
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.5rem;
}

/* Code promo. */
.wc-block-components-totals-coupon__input input,
.wc-block-components-text-input input {
	border: 1px solid var( --wp--preset--color--base-2 ) !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--body );
}

.wc-block-components-totals-coupon__button {
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-weight: 600 !important;
}

.wc-block-components-totals-coupon__button:hover {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Bouton « Valider la commande ». */
.wc-block-cart__submit-button {
	width: 100%;
	padding: 0.95rem 1.6rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus-visible {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Mobile : la colonne des totaux passe sous les articles. */
@media screen and ( max-width: 700px ) {
	.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
		padding: var( --wp--preset--spacing--40 );
	}

	.wc-block-cart-item__image img {
		width: 72px !important;
	}
}

/* -------------------------------------------------------------------------
 * Panier / Commande / Mon compte — bandeau dégradé en tête
 * Ces pages utilisent le modèle de page standard : c'est le titre lui-même
 * qui devient le bandeau, pleine largeur, comme sur la boutique.
 * ---------------------------------------------------------------------- */
.woocommerce-cart main,
.woocommerce-checkout main,
.woocommerce-account main {
	margin-top: 0 !important;
}

.woocommerce-cart main > .wp-block-post-title,
.woocommerce-checkout main > .wp-block-post-title,
.woocommerce-account main > .wp-block-post-title {
	max-width: none;
	/* Bord à bord : on compense la marge latérale du site.
	   « !important » : la mise en page contrainte impose « margin: auto ». */
	margin-top: 0 !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	padding: 4.5rem var( --wp--style--root--padding-left ) 3.5rem;
	background-image: var( --wp--preset--gradient--confiture );
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--xx-large ) !important;
	text-align: center;
}

/* Les notifications de la boutique restent au-dessus du bandeau. */
.woocommerce-cart main > .wc-block-store-notices:empty,
.woocommerce-checkout main > .wc-block-store-notices:empty {
	margin: 0;
}

@media screen and ( max-width: 781px ) {
	.woocommerce-cart main > .wp-block-post-title,
	.woocommerce-checkout main > .wp-block-post-title,
	.woocommerce-account main > .wp-block-post-title {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Panier vide — « Nouveau dans la boutique »
 * Même bandeau rosé que « Produits similaires » / « Vous aimerez… ».
 * Le titre et la grille sont deux frères : le fond étant uni, on le pose
 * sur les deux sans couture visible.
 * ---------------------------------------------------------------------- */

/* Panier vide : on libère les conteneurs de leur largeur maximale, afin que
   le bandeau puisse aller bord à bord avec la technique habituelle du thème
   (marges négatives sur la marge du site) plutôt qu'avec « 100vw », qui
   inclut la barre de défilement et provoque un débordement. */
body.woocommerce-cart:has( .wp-block-woocommerce-empty-cart-block ) .entry-content,
body.woocommerce-cart:has( .wp-block-woocommerce-empty-cart-block ) .wp-block-woocommerce-cart {
	max-width: none !important;
}

/* Le message et le trait restent, eux, à la largeur du site. */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block > .wp-block-separator {
	max-width: var( --wp--style--global--wide-size );
	margin-left: auto;
	margin-right: auto;
}

/* Message « panier vide », au-dessus du bandeau. */
.wc-block-cart__empty-cart__title {
	font-family: var( --wp--preset--font-family--heading );
	color: var( --wp--preset--color--contrast );
}

.wp-block-woocommerce-empty-cart-block > .wp-block-separator {
	margin-block: var( --wp--preset--spacing--50 );
	color: var( --wp--preset--color--base-2 );
}

/* --- Le bandeau : titre + grille --- */
.wp-block-woocommerce-empty-cart-block > h2:not( .wc-block-cart__empty-cart__title ),
.wp-block-woocommerce-empty-cart-block > .wc-block-product-new {
	max-width: none;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	background-color: var( --wp--preset--color--base-2 );
}

.wp-block-woocommerce-empty-cart-block > h2:not( .wc-block-cart__empty-cart__title ) {
	margin-top: var( --wp--preset--spacing--60 ) !important;
	margin-bottom: 0 !important;
	padding: var( --wp--preset--spacing--70 ) 1rem var( --wp--preset--spacing--50 );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-large ) !important;
	line-height: 1.2;
	text-align: center;
}

.wp-block-woocommerce-empty-cart-block > .wc-block-product-new {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 1rem var( --wp--preset--spacing--70 );
}

/* Grille : tuiles centrées, mêmes dimensions que les autres sections. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22.5px;
	max-width: var( --wp--style--global--wide-size );
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	flex: 0 1 222px !important;
	max-width: 222px !important;
	min-width: 0 !important;
	width: 222px !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center;
}

/* Vignette : le conteneur d'image sert à rogner le zoom. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0 0 0.8rem;
	border-radius: 12px;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image img,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:focus-within .wc-block-grid__product-image img {
	transform: scale( 1.06 );
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgba( 28, 26, 25, 0.35 );
	opacity: 0;
	transition: opacity 0.4s ease;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image::after,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:focus-within .wc-block-grid__product-image::after {
	opacity: 1;
}

/* Titre et prix, mêmes valeurs que les autres sections. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	margin: 0 0 0.35rem;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 18px !important;
	line-height: 1.3;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	display: block;
	margin-bottom: 0.9rem;
	color: var( --wp--preset--color--contrast ) !important;
	font-size: 14.4px !important;
	font-weight: 700 !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
	text-decoration: none;
}

/* Bouton, identique aux autres sections. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.button,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-block;
	padding: 12px 24px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-size: 14.4px !important;
	font-weight: 600 !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.button:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img,
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image::after {
		transition: none;
	}

	.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Badge « Promo » des grilles héritées (panier vide)
 * Aligné sur le badge de la boutique : capsule terracotta, texte foncé.
 * ---------------------------------------------------------------------- */
.wc-block-grid__product {
	position: relative;
}

.wc-block-grid__product-onsale {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	z-index: 3;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0.25rem 0.75rem !important;
	/* Même contour fin que le badge de la boutique. */
	border: 1px solid rgb( 67, 69, 75 ) !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 15.75px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-transform: uppercase;
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------
 * Commande (bloc Checkout)
 * ---------------------------------------------------------------------- */

/* Titres d'étape (Coordonnées, Adresse, Paiement). */
.wc-block-components-checkout-step__title {
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
}

.wc-block-components-checkout-step__description {
	color: var( --wp--preset--color--contrast-2 );
}

.wc-block-components-checkout-step {
	border-color: var( --wp--preset--color--base-2 );
}

/* Champs de formulaire, au style du reste du site. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-combobox input,
.wc-block-components-select__container select {
	border: 1px solid var( --wp--preset--color--base-2 ) !important;
	border-radius: 12px !important;
	background-color: var( --wp--preset--color--base ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-select__container select:focus {
	outline: 2px solid var( --wp--preset--color--primary ) !important;
	outline-offset: 1px;
	box-shadow: none !important;
}

.wc-block-components-text-input label,
.wc-block-components-select__label {
	color: var( --wp--preset--color--contrast-2 ) !important;
}

/* Cases à cocher et boutons radio aux couleurs de la marque. */
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input,
.wc-block-components-checkout input[type="checkbox"],
.wc-block-components-checkout input[type="radio"] {
	accent-color: var( --wp--preset--color--primary );
}

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-color: var( --wp--preset--color--base-2 ) !important;
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has( input:checked ) {
	border-color: var( --wp--preset--color--primary ) !important;
	background-color: color-mix( in srgb, var( --wp--preset--color--base-2 ) 55%, transparent );
}

/* --- Récapitulatif (colonne latérale) --- */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: var( --wp--preset--spacing--50 );
	border: 0;
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.wc-block-components-checkout-order-summary__title,
.wc-block-components-panel__button {
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-weight: 400 !important;
}

.wc-block-components-order-summary-item__image img {
	border-radius: 10px;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: 1rem !important;
}

.wc-block-components-order-summary-item__quantity {
	background-color: var( --wp--preset--color--primary ) !important;
	border-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.5rem;
	color: var( --wp--preset--color--contrast );
}

/* Bouton « Commander ». */
.wc-block-components-checkout-place-order-button {
	width: 100%;
	padding: 0.95rem 1.6rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus-visible {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Lien « Retour au panier ». */
.wc-block-components-checkout-return-to-cart-button {
	color: var( --wp--preset--color--contrast-2 ) !important;
	transition: color 0.18s ease;
}

.wc-block-components-checkout-return-to-cart-button:hover {
	color: var( --wp--preset--color--primary ) !important;
}

/* Notices et messages d'erreur. */
.wc-block-components-validation-error {
	color: var( --wp--preset--color--secondary );
}

/* -------------------------------------------------------------------------
 * En-tête de la page de commande
 * Tunnel volontairement sans navigation ni pied de page (choix WooCommerce
 * pour limiter les abandons), mais aux couleurs et au logo de la marque.
 * ---------------------------------------------------------------------- */
.cab-dolce-checkout-header {
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-checkout-header .cab-dolce-header__bar,
.cab-dolce-checkout-header__bar {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	gap: 1rem;
}

.cab-dolce-checkout-header .cab-dolce-logo img {
	display: block;
	height: auto;
}

.cab-dolce-checkout-header__note {
	margin: 0;
}

/* Sans pied de page, on aère le bas de la page de commande. */
.cab-dolce-checkout {
	padding-bottom: var( --wp--preset--spacing--70 );
}

@media screen and ( max-width: 600px ) {
	.cab-dolce-checkout-header__bar {
		justify-content: center;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * Confirmation de commande (« Commande reçue »)
 * ---------------------------------------------------------------------- */
.woocommerce-order-received main {
	margin-top: 0 !important;
}

/* Le message de statut devient le bandeau d'en-tête. */
.woocommerce-order-received main > .wc-block-order-confirmation-status {
	max-width: none;
	margin-top: 0 !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	padding: 4.5rem var( --wp--style--root--padding-left ) 3.5rem;
	background-image: var( --wp--preset--gradient--confiture );
	text-align: center;
}

.woocommerce-order-received main > .wc-block-order-confirmation-status,
.woocommerce-order-received main > .wc-block-order-confirmation-status * {
	color: var( --wp--preset--color--base ) !important;
}

/* Titre : même traitement que celui de la boutique (Roxborough, xx-large). */
.woocommerce-order-received main > .wc-block-order-confirmation-status h1,
.woocommerce-order-received main > .wc-block-order-confirmation-status h2 {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--xx-large ) !important;
	line-height: 1.15;
}

/* Phrase de confirmation : accroche en Montserrat, comme sur la boutique. */
.woocommerce-order-received main > .wc-block-order-confirmation-status p {
	margin: var( --wp--preset--spacing--20 ) 0 0;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: var( --wp--preset--font-size--large ) !important;
	font-weight: 400 !important;
	line-height: 1.5;
	opacity: 0.9;
}

/* Texte d'explication sous le bandeau. */
.wc-block-order-confirmation-status-description {
	margin-bottom: var( --wp--preset--spacing--60 );
	color: var( --wp--preset--color--contrast-2 );
	text-align: center;
}

.wc-block-order-confirmation-status-description a {
	color: var( --wp--preset--color--primary );
}

/* Adresses de facturation / livraison en cartes rosées. */
.wc-block-order-confirmation-address-wrapper .wp-block-column {
	padding: var( --wp--preset--spacing--50 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.wc-block-order-confirmation-address-wrapper h2,
.wc-block-order-confirmation-address-wrapper h3 {
	margin-top: 0;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.15rem !important;
	font-weight: 400 !important;
}

/* Récapitulatif (n° de commande, date, total, moyen de paiement). */
.wc-block-order-confirmation-summary {
	padding: var( --wp--preset--spacing--50 );
	border: 0;
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.wc-block-order-confirmation-summary-list-item__key {
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wc-block-order-confirmation-summary-list-item__value {
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.1rem;
}

/* Tableau des articles commandés. */
.wc-block-order-confirmation-totals table {
	width: 100%;
	border-collapse: collapse;
}

.wc-block-order-confirmation-totals th,
.wc-block-order-confirmation-totals td {
	padding: 0.8rem 0.6rem;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
	text-align: left;
}

.wc-block-order-confirmation-totals th {
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wc-block-order-confirmation-totals tfoot td,
.wc-block-order-confirmation-totals tfoot th {
	font-weight: 700;
}

.wc-block-order-confirmation-totals__product-name {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.05rem;
}

/* Titres de section (Détails de la commande, etc.). */
.woocommerce-order-received main h2 {
	font-family: var( --wp--preset--font-family--heading );
}

@media screen and ( max-width: 781px ) {
	.woocommerce-order-received main > .wc-block-order-confirmation-status {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}
}

/* Espace sous les adresses, pour détacher le contenu du pied de page. */
.woocommerce-order-received main {
	padding-bottom: var( --wp--preset--spacing--70 );
}

.woocommerce-order-received main > .wc-block-order-confirmation-address-wrapper {
	margin-bottom: var( --wp--preset--spacing--60 );
}

/* -------------------------------------------------------------------------
 * Mon compte (markup classique WooCommerce)
 * ---------------------------------------------------------------------- */

/* Menu et contenu côte à côte (par défaut ils s'empilent). */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--60 );
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 250px;
	width: auto !important;
	max-width: 100%;
	float: none !important;
	margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 320px;
	width: auto !important;
	max-width: 100%;
	float: none !important;
	margin: 0 !important;
}

/* --- Menu latéral --- */
.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin: 0 0 0.3rem;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.65rem 1rem;
	border-radius: 10px;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus-visible {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--primary );
}

/* Onglet courant : pastille terracotta, texte foncé (charte). */
.woocommerce-MyAccount-navigation li.is-active a {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
}

/* Déconnexion, détachée du reste. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.8rem;
	padding-top: 0.8rem;
	border-top: 1px solid var( --wp--preset--color--base-2 );
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var( --wp--preset--color--contrast-2 );
}

/* --- Contenu --- */
.woocommerce-MyAccount-content > p:first-child {
	color: var( --wp--preset--color--contrast-2 );
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 400;
}

/* Tableau des commandes. */
.woocommerce-orders-table,
.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}

.woocommerce-orders-table th,
.woocommerce-table th {
	padding: 0.7rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: left;
}

.woocommerce-orders-table td,
.woocommerce-table td {
	padding: 0.9rem 0.6rem;
	border: 0;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

/* Adresses en cartes rosées. */
.woocommerce-Addresses .woocommerce-Address,
.woocommerce-Address address {
	border-radius: 14px;
}

.woocommerce-Addresses .woocommerce-Address {
	padding: var( --wp--preset--spacing--50 );
	background-color: var( --wp--preset--color--base-2 );
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin-top: 0;
	font-size: 1.15rem !important;
}

/* Champs de formulaire (connexion, adresses, détails du compte). */
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account textarea,
.woocommerce-account select {
	width: 100%;
	padding: 0.72rem 1rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 12px;
	background-color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
}

.woocommerce-account input:focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.woocommerce-account label {
	display: block;
	margin-bottom: 0.35rem;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.9rem;
}

/* Boutons. */
.woocommerce-account .button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
	display: inline-block;
	width: auto;
	padding: 0.75rem 1.6rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var( --wp--preset--color--primary ) !important;
	color: var( --wp--preset--color--contrast ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover {
	background-color: var( --wp--preset--color--secondary ) !important;
	color: var( --wp--preset--color--base ) !important;
}

/* Formulaire de connexion, centré et encadré. */
.woocommerce-account:not( .logged-in ) .woocommerce-form-login {
	max-width: 460px;
	margin-inline: auto;
	padding: var( --wp--preset--spacing--60 );
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--base );
}

/* Sur mobile, le menu repasse au-dessus du contenu. */
@media screen and ( max-width: 781px ) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------------------
 * Mon compte — corrections de mise en page
 * ---------------------------------------------------------------------- */

/* Liens du menu : l'interligne du thème gonflait leur hauteur. */
.woocommerce-MyAccount-navigation li a {
	padding: 0.55rem 1rem;
	line-height: 1.4;
}

.woocommerce-MyAccount-navigation li {
	margin-bottom: 0.15rem;
	/* WooCommerce impose un remplissage bas de 18 px : d'où « !important ». */
	padding: 0 !important;
	line-height: 0;
}

/* Adresses : grille plutôt que flottants.
   Les blocs faisaient 356 px chacun dans une colonne de 642 px — le
   remplissage s'ajoutant à leur largeur, ils se chevauchaient et le second
   basculait vers le bas. La grille répartit l'espace réellement disponible. */
.woocommerce-Addresses,
.woocommerce-account .u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--50 );
}

.woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .u-columns.col2-set > div {
	box-sizing: border-box;
	flex: 1 1 240px;
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
}

/* Titre et lien de modification, alignés proprement. */
.woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
}

.woocommerce-Address-title a {
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.88rem;
}

.woocommerce-Address-title a:hover,
.woocommerce-Address-title a:focus {
	color: var( --wp--preset--color--primary );
}

/* -------------------------------------------------------------------------
 * Mon compte — tableau de bord et commandes
 * ---------------------------------------------------------------------- */

/* Message d'accueil. */
.woocommerce-MyAccount-content > p:first-of-type {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.2rem;
	color: var( --wp--preset--color--contrast );
}

/* Raccourcis du tableau de bord. */
.cab-dolce-account-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
	margin-top: var( --wp--preset--spacing--50 );
}

.cab-dolce-account-card {
	display: block;
	padding: var( --wp--preset--spacing--50 );
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 14px;
	background-color: var( --wp--preset--color--base );
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.cab-dolce-account-card:hover,
.cab-dolce-account-card:focus-visible {
	border-color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--base-2 );
	transform: translateY( -2px );
}

.cab-dolce-account-card__icon {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
	line-height: 1;
}

.cab-dolce-account-card__title {
	display: block;
	margin-bottom: 0.25rem;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.1rem;
}

.cab-dolce-account-card__text {
	display: block;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.88rem;
	line-height: 1.45;
}

/* Pastilles d'état des commandes. */
.cab-dolce-status {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

/* En attente / en cours : terracotta. */
.cab-dolce-status--pending,
.cab-dolce-status--on-hold {
	background-color: color-mix( in srgb, var( --wp--preset--color--primary ) 35%, transparent );
	color: var( --wp--preset--color--contrast );
}

.cab-dolce-status--processing {
	background-color: color-mix( in srgb, var( --wp--preset--color--primary ) 60%, transparent );
	color: var( --wp--preset--color--contrast );
}

/* Terminée : olive. */
.cab-dolce-status--completed {
	background-color: color-mix( in srgb, var( --wp--preset--color--leaf ) 25%, transparent );
	color: var( --wp--preset--color--leaf );
}

/* Annulée, remboursée, échouée : prune atténué. */
.cab-dolce-status--cancelled,
.cab-dolce-status--refunded,
.cab-dolce-status--failed {
	background-color: color-mix( in srgb, var( --wp--preset--color--secondary ) 18%, transparent );
	color: var( --wp--preset--color--secondary );
}

/* Boutons du tableau des commandes, un peu plus compacts. */
.woocommerce-orders-table .button {
	padding: 0.5rem 1.1rem !important;
	font-size: 0.88rem !important;
}

/* Tableau des commandes sur mobile : lignes empilées et lisibles. */
@media screen and ( max-width: 600px ) {
	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table,
	.woocommerce-orders-table tbody,
	.woocommerce-orders-table tr,
	.woocommerce-orders-table td {
		display: block;
		width: 100%;
	}

	.woocommerce-orders-table tr {
		margin-bottom: var( --wp--preset--spacing--40 );
		padding: var( --wp--preset--spacing--40 );
		border: 1px solid var( --wp--preset--color--base-2 );
		border-radius: 14px;
	}

	.woocommerce-orders-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.4rem 0;
		border: 0;
		text-align: right;
	}

	.woocommerce-orders-table td::before {
		content: attr( data-title );
		color: var( --wp--preset--color--contrast-2 );
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
}

/* -------------------------------------------------------------------------
 * « Voir la commande » — bandeau avec récapitulatif en sous-titre
 * ---------------------------------------------------------------------- */

/* Le bandeau passe du titre seul au conteneur titre + phrase. */
.woocommerce-view-order main > .cab-dolce-order-banner {
	max-width: none;
	margin-top: 0 !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	padding: 4.5rem var( --wp--style--root--padding-left ) 3.5rem;
	background-image: var( --wp--preset--gradient--confiture );
	text-align: center;
}

/* Le titre n'a plus besoin de porter le bandeau lui-même. */
.woocommerce-view-order main .cab-dolce-order-banner > .wp-block-post-title {
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	background-image: none !important;
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--xx-large ) !important;
	line-height: 1.15;
}

/* Récapitulatif, au même traitement que les accroches des autres bandeaux. */
.cab-dolce-order-banner__intro {
	max-width: 44rem;
	margin: var( --wp--preset--spacing--20 ) auto 0;
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 400;
	line-height: 1.5;
	opacity: 0.9;
}

/* La phrase d'origine de WooCommerce fait doublon. */
.woocommerce-view-order .woocommerce-MyAccount-content > p:first-of-type {
	display: none;
}

@media screen and ( max-width: 781px ) {
	.woocommerce-view-order main > .cab-dolce-order-banner {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}
}

/* Le premier titre du contenu s'aligne sur la première entrée du menu.
   Le conteneur de notifications, vide, précède toujours le contenu réel :
   on cible donc l'élément qui le suit, et son premier enfant. */
.woocommerce-MyAccount-content > section:first-of-type,
.woocommerce-MyAccount-content > section:first-of-type > :first-child,
.woocommerce-MyAccount-content > p:first-of-type,
.woocommerce-MyAccount-content > h2:first-of-type,
.woocommerce-MyAccount-content > form:first-of-type {
	margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
 * Détails client d'une commande — même carte rosée que la page Adresses
 * ---------------------------------------------------------------------- */

/* Une seule adresse : la section entière devient la carte.
   Deux adresses (facturation + livraison) : chaque colonne devient une carte. */
.woocommerce-customer-details:not( :has( .woocommerce-column ) ),
.woocommerce-customer-details .woocommerce-column {
	box-sizing: border-box;
	padding: var( --wp--preset--spacing--50 );
	border-radius: 14px;
	background-color: var( --wp--preset--color--base-2 );
}

/* Deux colonnes côte à côte, comme sur la page Adresses. */
.woocommerce-customer-details .woocommerce-columns--addresses {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--50 );
}

.woocommerce-customer-details .woocommerce-column {
	flex: 1 1 240px;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/* Titre dans la carte. */
.woocommerce-customer-details .woocommerce-column__title {
	margin-top: 0 !important;
	margin-bottom: 0.6rem;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.15rem !important;
	font-weight: 400 !important;
}

/* L'encadré par défaut de WooCommerce n'a plus lieu d'être. */
.woocommerce-customer-details address {
	/* WooCommerce impose son encadré : « !important » nécessaire. */
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	font-style: normal;
	line-height: 1.7;
}

/* Téléphone et e-mail, intégrés à la carte. */
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 0.5rem 0 0;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.92rem;
}

.woocommerce-customer-details address br + br {
	display: none;
}

/* -------------------------------------------------------------------------
 * Bandeau générique — pages, articles, archives et blog
 * Reprend le traitement de la boutique et de la fiche produit.
 * ---------------------------------------------------------------------- */
main.cab-dolce-has-banner {
	margin-top: 0 !important;
}

.cab-dolce-banner {
	max-width: none;
	margin-top: 0 !important;
	margin-right: calc( var( --wp--style--root--padding-right ) * -1 ) !important;
	margin-bottom: var( --wp--preset--spacing--60 ) !important;
	margin-left: calc( var( --wp--style--root--padding-left ) * -1 ) !important;
	padding: 4.5rem var( --wp--style--root--padding-left ) 3.5rem;
	background-image: var( --wp--preset--gradient--confiture );
	text-align: center;
}

.cab-dolce-banner .wp-block-post-title,
.cab-dolce-banner .wp-block-query-title {
	margin: 0;
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--xx-large ) !important;
	line-height: 1.15;
}

/* Date, catégorie ou description : accroche en Montserrat. */
.cab-dolce-banner .wp-block-post-date,
.cab-dolce-banner .wp-block-term-description,
.cab-dolce-banner p {
	margin: var( --wp--preset--spacing--20 ) 0 0;
	color: var( --wp--preset--color--base ) !important;
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: var( --wp--preset--font-size--large ) !important;
	font-weight: 400;
	opacity: 0.9;
}

.cab-dolce-banner a {
	color: var( --wp--preset--color--base ) !important;
}

/* Image mise en avant des pages et articles : médaillon à cheval sur le bas
 * du bandeau. Compact (environ 200 px contre une bannière pleine largeur) et
 * décoratif, avec la même grammaire de survol que le reste du site.
 * Le débordement se calcule ainsi : le médaillon dépasse du bandeau de
 * « marge basse négative - padding bas », soit 112 - 32 = 80 px. La marge
 * basse du bandeau (8rem) laisse donc 48 px d'air sous le médaillon. */
.cab-dolce-banner:has( .cab-dolce-featured-image ) {
	margin-bottom: 8rem !important;
	padding-bottom: 2rem;
}

/* Sur grand écran le médaillon est calé à droite. Le bandeau est pleine
 * largeur : sans correction, le médaillon irait jusqu'au bord de l'écran.
 * La marge droite rattrape donc la demi-gouttière qui sépare le bandeau de
 * la colonne de contenu, pour un alignement net sur le texte en dessous. */
.cab-dolce-featured-image {
	width: 190px;
	margin: var( --wp--preset--spacing--40 ) max( 0px, calc( ( 100% - var( --wp--style--global--content-size ) ) / 2 ) ) -7rem auto !important;
}

.cab-dolce-featured-image img {
	display: block;
	width: 190px;
	height: 190px;
	border: 6px solid var( --wp--preset--color--base );
	border-radius: 28px;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.18 );
	object-fit: cover;
	transform: rotate( -3deg );
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cab-dolce-featured-image:hover img {
	box-shadow: 0 18px 36px rgba( 0, 0, 0, 0.26 );
	transform: rotate( 0deg ) scale( 1.06 );
}

/* Pied d'article : catégories et commentaires. */
.cab-dolce-post-footer {
	margin-top: var( --wp--preset--spacing--70 );
	padding-top: var( --wp--preset--spacing--50 );
	border-top: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-post-footer .wp-block-post-terms a {
	display: inline-block;
	margin-right: 0.4rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.85rem;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-post-footer .wp-block-post-terms a:hover {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

@media screen and ( max-width: 781px ) {
	.cab-dolce-banner {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}

	/* Médaillon réduit : débordement de 88 - 32 = 56 px, 48 px d'air dessous. */
	.cab-dolce-banner:has( .cab-dolce-featured-image ) {
		margin-bottom: 6.5rem !important;
	}

	/* En petite largeur, le médaillon revient au centre sous le titre. */
	.cab-dolce-featured-image {
		width: 150px;
		margin-right: auto !important;
		margin-bottom: -5.5rem !important;
		margin-left: auto !important;
	}

	.cab-dolce-featured-image img {
		width: 150px;
		height: 150px;
		border-radius: 22px;
	}
}

/* -------------------------------------------------------------------------
 * Commentaires
 * Chaque commentaire est une bulle avec une pointe dirigée vers l'avatar,
 * posé à l'extérieur à gauche. Les réponses sont repliées derrière un bouton
 * (assets/js/comments.js) et rattachées par un rail vertical.
 * ---------------------------------------------------------------------- */
.cab-dolce-comments {
	margin-top: var( --wp--preset--spacing--60 );
}

.cab-dolce-comments .wp-block-comments-title {
	display: inline-block;
	/* Le soulignement colle au texte : il faut de l'air sous le filet pour
	   qu'il se lise comme un titre de section et non comme une étiquette. */
	margin: 0 0 var( --wp--preset--spacing--60 );
	padding-bottom: 0.4em;
	border-bottom: 3px solid var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.2;
}

/* Listes : ni puces ni retrait natif, le décalage est géré plus bas. */
.cab-dolce-comments .wp-block-comment-template,
.cab-dolce-comments .wp-block-comment-template ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-dolce-comments .wp-block-comment-template > li + li {
	margin-top: var( --wp--preset--spacing--40 );
}

/* Un commentaire : avatar à gauche, bulle à droite. */
.cab-dolce-comment {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.cab-dolce-comment__avatar {
	flex-shrink: 0;
	line-height: 0;
}

.cab-dolce-comment__avatar img {
	display: block;
	width: 56px;
	height: 56px;
	border: 2px solid var( --wp--preset--color--base-2 );
	border-radius: 50%;
}

.cab-dolce-comment__bubble {
	position: relative;
	flex: 1;
	min-width: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 14px;
	background-color: var( --wp--preset--color--base );
}

/* Pointe de la bulle : deux triangles superposés pour garder le liseré. */
.cab-dolce-comment__bubble::before,
.cab-dolce-comment__bubble::after {
	content: "";
	position: absolute;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.cab-dolce-comment__bubble::before {
	top: 18px;
	left: -9px;
	border-right: 9px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-comment__bubble::after {
	top: 19px;
	left: -7px;
	border-top-width: 7px;
	border-bottom-width: 7px;
	border-right: 8px solid var( --wp--preset--color--base );
}

/* En-tête de bulle : auteur, date, modification, réponse. */
.cab-dolce-comment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.9rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-comment__head .wp-block-comment-author-name {
	color: var( --wp--preset--color--secondary );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}

.cab-dolce-comment__head .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}

.cab-dolce-comment__head .wp-block-comment-author-name a:hover {
	text-decoration: underline;
}

/* La date pousse les actions à droite. */
.cab-dolce-comment__head .wp-block-comment-date {
	flex: 1;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.82rem;
	opacity: 0.75;
}

.cab-dolce-comment__head .wp-block-comment-date a,
.cab-dolce-comment__head .wp-block-comment-edit-link a {
	color: inherit;
	text-decoration: none;
}

.cab-dolce-comment__head .wp-block-comment-edit-link {
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
}

.cab-dolce-comment__head .wp-block-comment-edit-link a:hover {
	text-decoration: underline;
}

/* Bouton « Répondre » et bouton de repli : même pastille contournée. */
.cab-dolce-comment__head .wp-block-comment-reply-link a,
.cab-dolce-toggle-replies {
	display: inline-block;
	padding: 0.55rem 1.4rem;
	border: 2px solid var( --wp--preset--color--primary );
	border-radius: 999px;
	background-color: transparent;
	color: var( --wp--preset--color--secondary );
	cursor: pointer;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cab-dolce-comment__head .wp-block-comment-reply-link a:hover,
.cab-dolce-toggle-replies:hover {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.cab-dolce-comment .wp-block-comment-content {
	margin: 0;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem;
	line-height: 1.75;
}

.cab-dolce-comment .wp-block-comment-content p:last-child {
	margin-bottom: 0;
}

/* Commentaire en attente de modération.
 * WordPress n'ajoute aucune classe sur le <li> dans ce cas : le seul repère
 * disponible est la note que le bloc « Contenu du commentaire » insère en
 * tête de contenu. On remonte donc jusqu'à la bulle avec :has(). */
.cab-dolce-comment .wp-block-comment-content p:has( > .comment-awaiting-moderation ) {
	margin: 0 0 0.85rem;
}

.cab-dolce-comment .comment-awaiting-moderation {
	display: block;
	padding: 0.55rem 0.85rem;
	border-radius: 8px;
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
	font-size: 0.78rem;
	font-style: normal;
	line-height: 1.5;
}

.cab-dolce-comment .comment-awaiting-moderation::before {
	content: "⏳ ";
}

/* Bulle en pointillés et voile brun tant que la validation n'est pas faite. */
.cab-dolce-comment__bubble:has( .comment-awaiting-moderation ) {
	border-color: var( --wp--preset--color--secondary );
	border-style: dashed;
	background-color: rgba( 176, 106, 74, 0.07 );
}

/* La pointe suit : liseré brun à l'extérieur, voile identique à l'intérieur
   — le triangle se superpose au fond de page, la teinte reste juste. */
.cab-dolce-comment__bubble:has( .comment-awaiting-moderation )::before {
	border-right-color: var( --wp--preset--color--secondary );
}

.cab-dolce-comment__bubble:has( .comment-awaiting-moderation )::after {
	border-right-color: rgba( 176, 106, 74, 0.07 );
}

/* Bouton de repli : aligné sur le bord gauche des bulles de réponse. */
.cab-dolce-toggle-replies {
	margin: 0.75rem 0 0 4.75rem;
}

.cab-dolce-toggle-replies::before {
	content: "▾";
	margin-right: 0.5em;
}

.cab-dolce-toggle-replies[aria-expanded="true"]::before {
	content: "▴";
}

/* Réponses : rail vertical et bulle rosée pour les distinguer. */
.cab-dolce-comments .wp-block-comment-template ol {
	margin: 0.75rem 0 0 4.75rem;
	padding-left: 1.5rem;
	border-left: 3px solid var( --wp--preset--color--base-2 );
}

.cab-dolce-comments .wp-block-comment-template ol > li + li {
	margin-top: var( --wp--preset--spacing--30 );
}

.cab-dolce-comments .wp-block-comment-template ol .cab-dolce-comment__bubble {
	background-color: var( --wp--preset--color--base-2 );
}

.cab-dolce-comments .wp-block-comment-template ol .cab-dolce-comment__bubble::after {
	border-right-color: var( --wp--preset--color--base-2 );
}

/* Pagination des commentaires : mêmes pastilles que celle de la boutique,
 * pour n'avoir qu'un seul vocabulaire de pagination sur tout le site. Les
 * classes diffèrent (« comments-pagination » et non « query-pagination »),
 * d'où la reprise des règles plutôt qu'un simple ajout de sélecteur. */
.cab-dolce-comments .wp-block-comments-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin-top: var( --wp--preset--spacing--50 );
	padding-top: var( --wp--preset--spacing--40 );
	border-top: 1px solid var( --wp--preset--color--base-2 );
	font-family: var( --wp--preset--font-family--body );
}

.cab-dolce-comments .wp-block-comments-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

/* Numéros de page en pastilles. */
.cab-dolce-comments .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.65rem;
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-comments a.page-numbers:hover,
.cab-dolce-comments a.page-numbers:focus-visible {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--secondary );
}

.cab-dolce-comments .page-numbers.current {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
}

.cab-dolce-comments .page-numbers.dots {
	min-width: 1.5rem;
	padding: 0;
	color: var( --wp--preset--color--contrast-2 );
}

/* Liens « précédents » / « suivants » en boutons contour. */
.cab-dolce-comments .wp-block-comments-pagination-previous,
.cab-dolce-comments .wp-block-comments-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	/* Bordure comprise dans les 40 px, comme sur la boutique. */
	box-sizing: border-box;
	height: 40px;
	padding: 0 1.05rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.92rem;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cab-dolce-comments .wp-block-comments-pagination-previous:hover,
.cab-dolce-comments .wp-block-comments-pagination-previous:focus-visible,
.cab-dolce-comments .wp-block-comments-pagination-next:hover,
.cab-dolce-comments .wp-block-comments-pagination-next:focus-visible {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

/* Flèches décoratives. Le « suivant » est poussé à droite du conteneur. */
.cab-dolce-comments .wp-block-comments-pagination-previous::before {
	content: "\2190";
}

.cab-dolce-comments .wp-block-comments-pagination-next::after {
	content: "\2192";
}

.cab-dolce-comments .wp-block-comments-pagination-next {
	margin-left: auto;
}

/* Discussion close : le formulaire disparaît côté WordPress, cette mention
 * prend sa place pour que le fil ne s'interrompe pas sans explication. Le
 * contour en pointillés reprend celui des commentaires en attente : dans les
 * deux cas, rien de neuf ne peut arriver ici. */
.cab-dolce-comments-closed {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: var( --wp--preset--spacing--60 ) 0 0;
	padding: var( --wp--preset--spacing--40 );
	border: 1px dashed var( --wp--preset--color--primary );
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.9rem;
	text-align: center;
}

.cab-dolce-comments-closed::before {
	content: "🔒";
	flex-shrink: 0;
}

/* Formulaire de réponse : carte rosée détachée du fil. */
.cab-dolce-comments .comment-respond {
	margin-top: var( --wp--preset--spacing--60 );
	padding: var( --wp--preset--spacing--50 );
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.cab-dolce-comments .comment-reply-title {
	display: block;
	margin: 0 0 var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--secondary );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.5rem;
	line-height: 1.2;
}

.cab-dolce-comments .comment-reply-title small {
	margin-left: 1rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
	font-weight: 400;
}

.cab-dolce-comments .comment-reply-title small a {
	color: var( --wp--preset--color--contrast-2 );
}

/* « Annuler la réponse » : pastille discrète accolée au titre. Le lien n'est
 * visible que lorsque le formulaire a été déplacé sous un commentaire. */
.cab-dolce-comments #cancel-comment-reply-link {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var( --wp--preset--color--secondary );
	border-radius: 999px;
	color: var( --wp--preset--color--secondary );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.cab-dolce-comments #cancel-comment-reply-link::before {
	content: "✕";
	margin-right: 0.45em;
}

.cab-dolce-comments #cancel-comment-reply-link:hover {
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* Formulaire déplacé sous un commentaire après un clic sur « Répondre ».
 * WordPress l'insère comme frère du <li> visé, à pleine largeur : on le
 * décale au même retrait que les réponses et on le rattache par un rail
 * terracotta, plus soutenu que celui des réponses pour signaler l'action
 * en cours. Le titre reprend la mise en page de l'en-tête des bulles. */
.cab-dolce-comments .wp-block-comment-template .comment-respond {
	margin: 0.75rem 0 0 4.75rem;
	padding: var( --wp--preset--spacing--40 );
	border-left: 3px solid var( --wp--preset--color--primary );
	border-radius: 0 16px 16px 0;
}

.cab-dolce-comments .wp-block-comment-template .comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	font-size: 1.25rem;
}

.cab-dolce-comments .wp-block-comment-template .comment-reply-title small {
	margin-left: 0;
}

/* Au-delà du premier niveau, la liste parente fournit déjà le retrait. */
.cab-dolce-comments .wp-block-comment-template ol .comment-respond {
	margin-left: 0;
}

/* Connecté : ligne d'identité au-dessus de la zone de commentaire, séparée
 * par un filet terracotta. Elle reste un paragraphe en flux — les nœuds de
 * texte et les liens y alternent, une mise en page en flex disloquerait la
 * ponctuation qui les sépare. */
.cab-dolce-comments .logged-in-as {
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.85rem;
	line-height: 1.7;
}

.cab-dolce-logged-in-avatar {
	width: 32px;
	height: 32px;
	margin-right: 0.55rem;
	border: 2px solid var( --wp--preset--color--base-2 );
	border-radius: 50%;
	vertical-align: middle;
}

.cab-dolce-comments .logged-in-as a {
	color: var( --wp--preset--color--secondary );
	font-weight: 600;
	text-decoration: none;
}

.cab-dolce-comments .logged-in-as a:hover {
	text-decoration: underline;
}

/* La mention des champs obligatoires passe à la ligne, en retrait discret. */
.cab-dolce-comments .logged-in-as .required-field-message {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.78rem;
	font-style: italic;
	opacity: 0.75;
}

.cab-dolce-comments .required {
	color: var( --wp--preset--color--secondary );
}

.cab-dolce-comments .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cab-dolce-comments .comment-form input[type="text"],
.cab-dolce-comments .comment-form input[type="email"],
.cab-dolce-comments .comment-form input[type="url"],
.cab-dolce-comments .comment-form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --wp--preset--color--primary );
	border-radius: 10px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem;
}

.cab-dolce-comments .comment-form input:focus,
.cab-dolce-comments .comment-form textarea:focus {
	border-color: var( --wp--preset--color--secondary );
	box-shadow: 0 0 0 3px rgba( 226, 150, 124, 0.3 );
	outline: none;
}

.cab-dolce-comments .comment-form textarea {
	min-height: 9rem;
	resize: vertical;
}

/* Grille du formulaire : trois colonnes pour caser nom, e-mail et site sur
 * une seule ligne. Le reste occupe toute la largeur. On passe par une grille
 * et non des blocs en ligne, dont les espaces du HTML faisaient déborder la
 * troisième colonne. La propriété « order » remonte les trois champs
 * au-dessus de la zone de commentaire, que WordPress place en premier. */
.cab-dolce-comments .comment-form {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --wp--preset--spacing--30 ) 1rem;
}

.cab-dolce-comments .comment-form > * {
	grid-column: 1 / -1;
	margin: 0;
}

.cab-dolce-comments .comment-form .comment-notes {
	order: -2;
}

.cab-dolce-comments .comment-form-author,
.cab-dolce-comments .comment-form-email,
.cab-dolce-comments .comment-form-url {
	order: -1;
}

.cab-dolce-comments .comment-form-author {
	grid-column: 1;
}

.cab-dolce-comments .comment-form-email {
	grid-column: 2;
}

.cab-dolce-comments .comment-form-url {
	grid-column: 3;
}

.cab-dolce-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.cab-dolce-comments .comment-form-cookies-consent label {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.cab-dolce-comments .comment-form .form-submit {
	margin-bottom: 0;
}

/* Le bouton d'envoi n'est pas ciblé ici : dans un thème de blocs, WordPress
 * lui donne les classes « wp-block-button__link wp-element-button » et il
 * hérite donc du style de bouton global défini dans theme.json, comme le
 * reste du site. */

@media screen and ( max-width: 781px ) {
	.cab-dolce-comment {
		gap: 0.9rem;
	}

	.cab-dolce-comment__avatar img {
		width: 42px;
		height: 42px;
	}

	.cab-dolce-comments .wp-block-comment-template ol,
	.cab-dolce-comments .wp-block-comment-template .comment-respond,
	.cab-dolce-toggle-replies {
		margin-left: 2rem;
	}

	.cab-dolce-comments .wp-block-comment-template ol {
		padding-left: 0.9rem;
	}

	/* Une seule colonne : les trois champs s'empilent, toujours au-dessus
	   de la zone de commentaire grâce à « order ». */
	.cab-dolce-comments .comment-form {
		grid-template-columns: 1fr;
	}

	.cab-dolce-comments .comment-form-author,
	.cab-dolce-comments .comment-form-email,
	.cab-dolce-comments .comment-form-url {
		grid-column: 1 / -1;
	}

	/* Pagination resserrée et centrée. */
	.cab-dolce-comments .wp-block-comments-pagination {
		justify-content: center;
	}

	.cab-dolce-comments .wp-block-comments-pagination-next {
		margin-left: 0;
	}

	.cab-dolce-comments .wp-block-comments-pagination-previous,
	.cab-dolce-comments .wp-block-comments-pagination-next {
		padding: 0 0.8rem;
		font-size: 0.85rem;
	}
}

/* -------------------------------------------------------------------------
 * Pagination du bloc de démonstration (cab-demo-pagination)
 * Ce bloc suppose Bootstrap, qui n'est pas chargé ici : sans style, la liste
 * s'affiche en puces verticales. On reprend les valeurs de la pagination
 * de la boutique pour rester cohérent.
 * ---------------------------------------------------------------------- */
.wp-block-cab-demo-pagination ul.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-cab-demo-pagination ul.pagination li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-cab-demo-pagination ul.pagination li::marker {
	content: "";
}

/* Numéros de page en pastilles. */
.wp-block-cab-demo-pagination .page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.65rem;
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

a.page:hover,
a.page:focus-visible {
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--secondary );
}

/* Page courante : pastille terracotta, texte foncé (charte). */
.wp-block-cab-demo-pagination .page.active {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
}

/* « Prev » et « Next » en boutons contour. */
.wp-block-cab-demo-pagination .button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 40px;
	padding: 0 1.05rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	color: var( --wp--preset--color--contrast );
	font-size: 0.92rem;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

a.button:hover,
a.button:focus-visible {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

/* Bouton inactif en début ou fin de liste. */
.wp-block-cab-demo-pagination .button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Points de suspension entre les numéros. */
.wp-block-cab-demo-pagination .dots,
.wp-block-cab-demo-pagination li > span:not( .button ) {
	padding: 0 0.2rem;
	color: var( --wp--preset--color--contrast-2 );
}

/* -------------------------------------------------------------------------
 * Formulaire du bloc de démonstration (cab-demo-form)
 * Comme la pagination, ce bloc s'appuie sur une grille externe non chargée
 * (« row », « col-6 »…). On la reconstitue et on habille les champs.
 * ---------------------------------------------------------------------- */
.wp-block-cab-demo-form .row {
	display: grid;
	grid-template-columns: repeat( 12, 1fr );
	gap: var( --wp--preset--spacing--40 );
}

.wp-block-cab-demo-form .col-12 {
	grid-column: span 12;
}

.wp-block-cab-demo-form .col-6 {
	grid-column: span 6;
}

.wp-block-cab-demo-form .col-4 {
	grid-column: span 4;
}

.wp-block-cab-demo-form .col-3 {
	grid-column: span 3;
}

/* Champs de saisie, au style des autres formulaires du site. */
.wp-block-cab-demo-form input[type="text"],
.wp-block-cab-demo-form input[type="email"],
.wp-block-cab-demo-form input[type="tel"],
.wp-block-cab-demo-form input[type="number"],
.wp-block-cab-demo-form input[type="password"],
.wp-block-cab-demo-form select,
.wp-block-cab-demo-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.72rem 1rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 12px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
}

.wp-block-cab-demo-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.wp-block-cab-demo-form input:focus,
.wp-block-cab-demo-form select:focus,
.wp-block-cab-demo-form textarea:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
}

.wp-block-cab-demo-form label {
	display: block;
	margin-bottom: 0.35rem;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.9rem;
}

/* Cases à cocher et boutons radio. */
.wp-block-cab-demo-form input[type="checkbox"],
.wp-block-cab-demo-form input[type="radio"] {
	accent-color: var( --wp--preset--color--primary );
	margin-right: 0.4rem;
}

/* Zone des boutons. */
.wp-block-cab-demo-form .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-cab-demo-form .actions li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-cab-demo-form button,
.wp-block-cab-demo-form input[type="submit"],
.wp-block-cab-demo-form input[type="reset"],
.wp-block-cab-demo-form input[type="button"] {
	padding: 0.75rem 1.6rem;
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 999px;
	background-color: transparent;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Bouton principal en terracotta plein. */
.wp-block-cab-demo-form .primary,
.wp-block-cab-demo-form input[type="submit"] {
	border-color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
}

.wp-block-cab-demo-form .primary:hover,
.wp-block-cab-demo-form input[type="submit"]:hover,
.wp-block-cab-demo-form button:hover,
.wp-block-cab-demo-form input[type="reset"]:hover {
	background-color: var( --wp--preset--color--secondary );
	border-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base );
}

/* Une seule colonne sur petit écran. */
@media screen and ( max-width: 600px ) {
	.wp-block-cab-demo-form .col-6,
	.wp-block-cab-demo-form .col-4,
	.wp-block-cab-demo-form .col-3,
	.wp-block-cab-demo-form [class*="col-12-small"] {
		grid-column: span 12;
	}
}

/* -------------------------------------------------------------------------
 * Blocs natifs — finitions à la charte
 * ---------------------------------------------------------------------- */

/* Tableaux : en-têtes distingués, comme ailleurs sur le site. */
.wp-block-table th {
	/* La couleur de bordure est neutralisée en amont : « !important » requis. */
	border-bottom: 1px solid var( --wp--preset--color--base-2 ) !important;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: left;
}

.wp-block-table td {
	border-bottom: 1px solid var( --wp--preset--color--base-2 ) !important;
}

/* Citation : le texte respire à droite du filet terracotta. */
.wp-block-quote {
	padding-left: var( --wp--preset--spacing--40 );
	/* Le navigateur applique « margin: 1em 40px » à toute balise blockquote.
	   Selon le conteneur, cette marge latérale survit et décale la citation
	   par rapport au reste du contenu : on la neutralise. */
	margin-inline: 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.6rem;
	color: var( --wp--preset--color--contrast-2 );
	font-size: 0.9rem;
	font-style: normal;
}

/* -------------------------------------------------------------------------
 * Formulaire de démonstration — ordre des champs et cases à cocher
 * ---------------------------------------------------------------------- */

/* Le message remonte juste sous les nom et prénom.
   La grille permet de réordonner sans toucher au contenu de la page. */
.wp-block-cab-demo-form .row > :has( input[type="text"] ),
.wp-block-cab-demo-form .row > :has( input[type="email"] ) {
	order: 1;
}

.wp-block-cab-demo-form .row > :has( textarea ) {
	order: 2;
}

.wp-block-cab-demo-form .row > :has( input[type="radio"] ) {
	order: 3;
}

.wp-block-cab-demo-form .row > :has( input[type="checkbox"] ) {
	order: 4;
}

.wp-block-cab-demo-form .row > :has( input[type="submit"] ),
.wp-block-cab-demo-form .row > .actions {
	order: 5;
}

/* Libellé des choix : sur la même ligne que sa puce.
   La règle générique les passait en bloc, ce qui les empilait. */
.wp-block-cab-demo-form input[type="radio"] + label,
.wp-block-cab-demo-form input[type="checkbox"] + label {
	display: inline;
	margin: 0 1.4rem 0 0.45rem;
	color: var( --wp--preset--color--contrast );
	font-size: 1rem;
	cursor: pointer;
	vertical-align: middle;
}

.wp-block-cab-demo-form input[type="radio"],
.wp-block-cab-demo-form input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	vertical-align: middle;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Code — encart blanc détaché du fond crème du site
 * ---------------------------------------------------------------------- */
.wp-block-code,
.wp-block-preformatted {
	padding: var( --wp--preset--spacing--40 );
	border: 1px solid var( --wp--preset--color--base-2 );
	border-radius: 12px;
	background-color: #ffffff;
	color: var( --wp--preset--color--contrast );
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.88rem;
	line-height: 1.6;
	/* Les lignes longues défilent dans l'encart au lieu d'élargir la page. */
	overflow-x: auto;
	tab-size: 2;
}

.wp-block-code code {
	display: block;
	background: none;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	white-space: pre;
}

/* Code en ligne dans un paragraphe : pastille rosée discrète. */
:where( p, li, td, dd ) > code {
	padding: 0.12em 0.4em;
	border-radius: 6px;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast-2 );
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.9em;
}


/* -------------------------------------------------------------------------
 * Formulaire de contact
 * Champs et messages calqués sur le formulaire de commentaire : le site n'a
 * ainsi qu'un seul vocabulaire de saisie.
 * ---------------------------------------------------------------------- */
.cab-dolce-contact__form {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --wp--preset--spacing--40 ) 1rem;
	margin: 0;
}

.cab-dolce-contact__champ,
.cab-dolce-contact__mention,
.cab-dolce-contact__envoi,
.cab-dolce-contact__piege {
	grid-column: 1 / -1;
	margin: 0;
}

/* Nom et e-mail se partagent la première ligne. */
.cab-dolce-contact__champ--nom {
	grid-column: 1;
}

.cab-dolce-contact__champ--email {
	grid-column: 2;
}

.cab-dolce-contact label {
	display: block;
	margin-bottom: 0.35rem;
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cab-dolce-contact__requis {
	color: var( --wp--preset--color--secondary );
}

.cab-dolce-contact input[type="text"],
.cab-dolce-contact input[type="email"],
.cab-dolce-contact textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --wp--preset--color--primary );
	border-radius: 10px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.95rem;
}

.cab-dolce-contact input:focus,
.cab-dolce-contact textarea:focus {
	border-color: var( --wp--preset--color--secondary );
	box-shadow: 0 0 0 3px rgba( 226, 150, 124, 0.3 );
	outline: none;
}

.cab-dolce-contact textarea {
	min-height: 9rem;
	resize: vertical;
}

/* Champ en erreur : le liseré seul ne suffirait pas, le message l'accompagne. */
.cab-dolce-contact__champ.is-erreur input,
.cab-dolce-contact__champ.is-erreur textarea {
	border-color: var( --wp--preset--color--secondary );
	border-width: 2px;
}

.cab-dolce-contact__erreur {
	display: block;
	margin-top: 0.35rem;
	color: var( --wp--preset--color--secondary );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.82rem;
	font-weight: 600;
}

/* Accusé de réception après envoi. */
.cab-dolce-contact__succes,
.cab-dolce-contact__alerte {
	margin: 0 0 var( --wp--preset--spacing--40 );
	padding: 0.85rem 1.1rem;
	border-left: 4px solid var( --wp--preset--color--leaf );
	border-radius: 0 12px 12px 0;
	background-color: var( --wp--preset--color--base-2 );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.92rem;
}

.cab-dolce-contact__alerte {
	border-left-color: var( --wp--preset--color--secondary );
}

.cab-dolce-contact__mention {
	color: var( --wp--preset--color--contrast-2 );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
	font-style: italic;
	opacity: 0.85;
}

/* Pot de miel : sorti du cadre plutôt que masqué en « display: none », que
   certains robots savent repérer. Retiré du parcours clavier par tabindex. */
.cab-dolce-contact__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Coordonnées, à droite du formulaire. */
.cab-dolce-contact-infos {
	padding: var( --wp--preset--spacing--50 );
	border-radius: 16px;
	background-color: var( --wp--preset--color--base-2 );
}

.cab-dolce-contact-infos h3 {
	margin: 0 0 0.4rem;
	color: var( --wp--preset--color--secondary );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.1rem;
	line-height: 1.2;
}

.cab-dolce-contact-infos p {
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-size: 0.92rem;
	line-height: 1.7;
}

.cab-dolce-contact-infos p:last-child {
	margin-bottom: 0;
}

.cab-dolce-contact-infos a {
	color: var( --wp--preset--color--secondary );
	font-weight: 600;
}

@media screen and ( max-width: 781px ) {
	.cab-dolce-contact__form {
		grid-template-columns: 1fr;
	}

	.cab-dolce-contact__champ--nom,
	.cab-dolce-contact__champ--email {
		grid-column: 1 / -1;
	}
}

/* Les champs de saisie du thème comptent bordure et espacement intérieur dans
 * leur largeur. Sans cela, un « width: 100% » déborde de sa colonne dès que le
 * champ est placé dans une grille : sur la page de contact, « nom » et
 * « e-mail » se chevauchaient de 14 px. Le formulaire de commentaire, dont les
 * trois champs du visiteur déconnecté sont eux aussi en grille, avait le même
 * défaut — invisible tant qu'on navigue connecté. */
.cab-dolce-contact input[type="text"],
.cab-dolce-contact input[type="email"],
.cab-dolce-contact textarea,
.cab-dolce-comments .comment-form input[type="text"],
.cab-dolce-comments .comment-form input[type="email"],
.cab-dolce-comments .comment-form input[type="url"],
.cab-dolce-comments .comment-form textarea {
	box-sizing: border-box;
}