/**
 * Design system for the "Can’Art de Table" product fiche — ported from
 * the validated maquette (doc/fiche_produit_gabarit.html and
 * doc/gabarit-fiche-produit-handoff.md §3/§4). Tokens on :root are safe
 * site-wide; component classes are prefixed .canardises- and only appear
 * in the DOM on single-product pages (see Product_Fiche in
 * canardises-dashboard/includes/frontend/class-product-fiche.php).
 */

:root {
	--ground: #efeae0;
	--surface: #faf7ef;
	--surface-2: #f2ecdd;
	--ink: #241d16;
	--ink-soft: #6b5d47;
	--ink-faint: #8d7f68;
	--wine: #6b2737;
	--wine-deep: #4e1c29;
	--wine-tint: #f4e3e2;
	--gold: #9c6f34;
	--gold-tint: #f1e6d1;
	--forest: #3a4a34;
	--forest-tint: #e6ebe0;
	--line: #dccfb2;
	--line-soft: #e7ddc7;
	--canardises-shadow: 0 1px 2px rgba(36, 29, 22, .06), 0 12px 28px -18px rgba(36, 29, 22, .35);
	--canardises-radius: 3px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ground: #1a1611;
		--surface: #221c15;
		--surface-2: #2a2318;
		--ink: #efe6d6;
		--ink-soft: #bcae93;
		--ink-faint: #8f8268;
		--wine: #d17b8f;
		--wine-deep: #e79cab;
		--wine-tint: #3a232a;
		--gold: #d5a75f;
		--gold-tint: #332b1c;
		--forest: #93ab86;
		--forest-tint: #25301f;
		--line: #3c3323;
		--line-soft: #2c2519;
		--canardises-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 32px -20px rgba(0, 0, 0, .6);
	}
}

/* ---------- typography on the product page ---------- */
.single-product .product_title,
.canardises-encart h2,
.canardises-display {
	font-family: var(--cdv-font-display, "Fraunces", ui-serif, Georgia, serif);
	font-weight: 560;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.canardises-eyebrow {
	display: block;
	font-family: var(--cdv-font-body, "Public Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 .6rem;
}

.single-product :focus-visible {
	outline: 2px solid var(--wine);
	outline-offset: 2px;
}

/* ---------- hero art / gallery placeholder ---------- */
/* Cadre portrait 4/5 façon Lovable ; la bordure/rayon vivent sur le
 * conteneur .woocommerce-product-gallery (voir « fiche layout » plus bas),
 * commun au placeholder et aux vraies photos. */
.canardises-hero-art {
	aspect-ratio: 4 / 5;
	background:
		radial-gradient(circle at 32% 26%, var(--gold-tint), transparent 62%),
		linear-gradient(160deg, var(--wine-tint), var(--surface-2) 72%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.canardises-hero-art svg {
	width: 54%;
	height: 54%;
	display: block;
}

.canardises-fresh-flag {
	position: absolute;
	top: .9rem;
	left: .9rem;
	display: flex;
	align-items: center;
	gap: .35rem;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: 99px;
	padding: .32rem .7rem .32rem .55rem;
	font-size: .72rem;
	font-weight: 600;
	color: var(--ink-soft);
	box-shadow: var(--canardises-shadow);
}

/* ---------- hero copy (inside .summary.entry-summary) ---------- */
/* Pastille frais / conserve (render_eyebrow) — style Lovable « FRAIS ».
 * On masque en parallèle le picto brut ❄️ / les pictos ingrédients que
 * Product_Badges pousse aussi dans .summary (priorité 4). */
.single-product .summary > .canardises-frais-badge,
.single-product .summary > .canardises-pictos-badge {
	display: none;
}

.canardises-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-soft);
	background: var(--wine-tint);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: .3rem .6rem;
	margin: 0 0 1rem;
}

.canardises-tagline {
	font-family: var(--cdv-font-display, "Fraunces", serif);
	font-style: italic;
	font-weight: 450;
	font-size: 1.05rem;
	color: var(--wine);
	margin: .3rem 0 .9rem;
}

.single-product .summary .canardises-desc-courte {
	color: var(--ink-soft);
	font-size: .98rem;
	max-width: 46ch;
	margin: 0 0 1.1rem;
}

.canardises-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1.25rem;
}

.canardises-chip {
	font-size: .76rem;
	font-weight: 500;
	color: var(--ink-soft);
	border: 1px solid var(--line-soft);
	background: var(--surface);
	border-radius: 99px;
	padding: .3rem .75rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.canardises-price-pro {
	color: var(--ink-faint);
	font-size: .82rem;
	margin: -.5rem 0 1rem;
}

.canardises-pro-notice {
	background: var(--gold-tint);
	border: 1px solid var(--line-soft);
	border-left: 3px solid var(--gold);
	border-radius: 0 4px 4px 0;
	padding: 1rem 1.2rem;
	margin: 0 0 1.25rem;
	color: var(--ink);
	font-size: .95rem;
}


/* ============================================================
 * Fiche produit — mise en page (refonte 2026-08-31, alignée sur le
 * rendu Lovable : hero sur 2 colonnes, sections du bas sur 2 colonnes
 * éditoriales). Remplace l'ancienne colonne latérale « fiche technique »
 * (render_rail) + la grille .canardises-content-grid.
 * ============================================================ */

/* ---- hero : image | infos ---- */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

/* Storefront pose des floats sur .images / .summary : on les neutralise et
 * on place explicitement dans la grille. Tout ce qui suit le hero passe
 * pleine largeur. */
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .canardises-hero-art {
	grid-column: 1;
	grid-row: 1;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.single-product div.product > .summary.entry-summary {
	grid-column: 2;
	grid-row: 1;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.single-product div.product > .canardises-trust-row,
.single-product div.product > .canardises-fiche-sections,
.single-product div.product > .canardises-encart,
.single-product div.product > .canardises-similaires,
.single-product div.product > .up-sells,
.single-product div.product > .upsells,
.single-product div.product > .related.products,
.single-product div.product > .woocommerce-tabs {
	grid-column: 1 / -1;
}

/* ---- cadre image (placeholder illustré + vraies photos) ----
 * Le PLACEHOLDER (.canardises-hero-art) garde un cadre portrait 4/5 fixe
 * (il n'a pas de photo, il lui faut une boîte). Les VRAIES photos, elles,
 * ne sont plus forcées en 4/5 : le cadre épouse le format réel de l'image
 * (pas de bande blanche, pas de recadrage — retour exploitant 2026-09-02). */
.single-product div.product > .woocommerce-product-gallery {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
}

.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
	margin: 0;
}

.single-product .woocommerce-product-gallery__image img:not(.zoomImg),
.single-product .woocommerce-product-gallery img.wp-post-image {
	width: 100%;
	height: auto;          /* le cadre suit la hauteur réelle de la photo */
	display: block;
	border-radius: 0;
}

.single-product .woocommerce-product-gallery__trigger {
	z-index: 3;
}

/* ---- ligne de méta sous le prix ---- */
.canardises-meta-line {
	color: var(--ink-faint);
	font-size: .82rem;
	line-height: 1.6;
	margin: .1rem 0 1.4rem;
}

.canardises-meta-sep {
	margin: 0 .55rem;
	opacity: .55;
}

/* ---- bandeau « réassurance » ----
 * Historique : émojis dépareillés → version « tirets » → carte blanche
 * numérotée (retours exploitant 2026-08-31), puis retour 2026-09-02 : la
 * carte blanche pleine largeur « écrase » la page. Version actuelle : plus
 * de carte — une bande éditoriale sur le fond crème, un simple filet fin
 * au-dessus et en dessous, colonnes séparées par des filets fins. */
.canardises-trust-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 2.5rem 0 3rem;
	padding: 1.6rem 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
}

.canardises-trust-item {
	display: block;
	padding: .1rem 1.6rem;
	border-left: 1px solid var(--line-soft);
	background: none;
}

.canardises-trust-item:first-child {
	border-left: 0;
	padding-left: 0;
}

.canardises-trust-item::before {
	content: none;
}

.canardises-trust-item .canardises-glyph {
	display: none;
}

.canardises-trust-num {
	display: block;
	font-family: var(--cdv-font-display, "EB Garamond", Garamond, serif);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--wine);
	line-height: 1;
	margin-bottom: .5rem;
}

.canardises-trust-item span.canardises-trust-text {
	font-size: .9rem;
	color: var(--ink);
	line-height: 1.5;
}

/* ---- sections du bas sur 2 colonnes ----
 * Retour exploitant 2026-08-31 : « je veux quelque chose d'épuré, lisible
 * et structuré » — tailles de texte remontées vers celles de Lovable. */
.canardises-fiche-sections {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.canardises-sec {
	padding: 2.9rem 0;
	border-top: 1px solid var(--line-soft);
	min-width: 0;
}

/* Les 2 premières sections (haut de chaque colonne) sans filet au-dessus. */
.canardises-fiche-sections > .canardises-sec:nth-child(1),
.canardises-fiche-sections > .canardises-sec:nth-child(2) {
	border-top: 0;
	padding-top: .5rem;
}

.canardises-sec h2 {
	font-size: clamp(1.5rem, 2.6vw, 1.8rem);
	line-height: 1.15;
	margin: 0 0 1.3rem;
}

.canardises-sec > .canardises-eyebrow {
	margin-bottom: 1rem;
}

.canardises-sec-body {
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--ink);
}

.canardises-sec-body p {
	margin: 0 0 1.1rem;
	max-width: 60ch;
}

.canardises-sec-body p:last-child {
	margin-bottom: 0;
}

/* Liste des ingrédients (Composition) : une ligne par ingrédient, filets
 * fins entre chaque (façon Lovable). */
.canardises-ing-list {
	list-style: none;
	margin: .9rem 0 0;
	padding: 0;
}

.canardises-ing-list li {
	padding: .85rem 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink);
}

.canardises-ing-list li:first-child {
	padding-top: 0;
}

/* Liste de définitions (Composition) : filets fins entre les lignes. */
.canardises-def-list {
	margin: 0 0 1.6rem;
}

.canardises-def-list > div {
	padding: 1rem 0;
	border-bottom: 1px solid var(--line-soft);
}

.canardises-def-list > div:first-child {
	padding-top: 0;
}

.canardises-def-list dt {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: .45rem;
}

.canardises-def-list dd {
	margin: 0;
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.65;
}

/* Encadré allergènes (façon Lovable : filet terracotta épais à gauche). */
.canardises-allergenes {
	border-left: 4px solid var(--wine);
	background: var(--wine-tint);
	border-radius: 0 4px 4px 0;
	padding: 1.2rem 1.4rem;
	margin-top: 1.6rem;
}

.canardises-allergenes .canardises-eyebrow {
	color: var(--wine);
	margin-bottom: .5rem;
}

.canardises-allergenes p:last-child {
	margin: 0;
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.6;
}

/* Conservation : sous-blocs à intitulé en capitales, EMPILÉS (une colonne).
 * « Conditions de conservation » regroupe les deux lignes avant / après
 * ouverture l'une sous l'autre. Auparavant en grille 2 colonnes : les blocs
 * de hauteurs très inégales (« Durée » court, « Conditions » long) créaient
 * un grand vide sous « Durée » avant « Formats disponibles » (retour
 * exploitant 2026-09-02). Une seule colonne = rythme régulier, et les
 * conditions se lisent sur toute la largeur. */
.canardises-subblocks {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: start;
}

.canardises-subblock .canardises-eyebrow {
	margin-bottom: .5rem;
}

.canardises-subblock p:not(.canardises-eyebrow) {
	margin: 0;
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.6;
}

/* Lignes « avant ouverture » / « après ouverture » empilées : léger interligne
 * entre les deux, pas l'espacement d'un nouveau sous-bloc. */
.canardises-subblock p:not(.canardises-eyebrow) + p:not(.canardises-eyebrow) {
	margin-top: .55rem;
}

.canardises-subblock-lead {
	font-weight: 600;
	color: var(--ink);
}

/* Valeurs nutritionnelles — vrai tableau si le texte est régulier
 * (parse_nutrition_rows), sinon prose. */
.canardises-nutri-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1.1rem;
	font-size: 1rem;
}

.canardises-nutri-table th,
.canardises-nutri-table td {
	padding: .8rem 0;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: top;
}

.canardises-nutri-table th {
	text-align: left;
	font-weight: 400;
	color: var(--ink);
}

.canardises-nutri-table td {
	text-align: right;
	color: var(--ink-soft);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	padding-left: 1rem;
}

.canardises-nutri-table tr.is-sub th {
	padding-left: 1.6rem;
	color: var(--ink-soft);
}

.canardises-nutrition-body {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--ink);
}

/* Dernière rangée de la grille éditoriale : « Conseils de dégustation » et
 * « Accords mets & boissons » forment une paire de cartes crème identiques,
 * alignées haut et bas (retour exploitant 2026-09-02 : traitements
 * disparates — carte pleine à gauche, sous-carte blanche à droite — « rien
 * n'est aligné ni harmonieux »). --card porte tout l'habillage ; il
 * remplace le filet supérieur de .canardises-sec par une vraie bordure et
 * force les deux cartes à la même hauteur (align-self: stretch). */
.canardises-sec.canardises-sec--card {
	background: var(--surface-2);
	border: 1px solid var(--line-soft);
	border-radius: 6px;
	padding: 2.1rem 2.2rem;
	align-self: stretch;
}

.canardises-sec--degustation .canardises-sec-body {
	font-size: 1.05rem;
}

/* Dans une carte --card, l'encart « Accords » ne redouble pas d'un cadre :
 * l'eyebrow + le texte se posent directement dans la carte. */
.canardises-sec--card .canardises-pairing-item {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.canardises-sec .canardises-pairing-item p:last-child {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink);
}

/* Pastille « Confirmé » (allergènes / valeurs nutri). */
.canardises-status-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .02em;
	border-radius: 99px;
	padding: .22rem .6rem;
	margin: 0 0 .7rem;
	background: var(--forest-tint);
	color: var(--wine-deep);
}

.canardises-status-pill .canardises-dot {
	width: .4rem;
	height: .4rem;
	border-radius: 99px;
	background: currentColor;
	display: inline-block;
}

/* ---- « Produits similaires » (upsells natifs, restylés) ----
 * IMPORTANT : ne mettre en grille QUE le <ul class="products"> (la liste).
 * La <section class="up-sells upsells products"> porte aussi la classe
 * `products` : la griller elle aussi imbriquait deux grilles et écrasait
 * les cartes à ~1/9 de large (déformation signalée le 2026-08-31). */
.canardises-similaires {
	margin-top: 1rem;
	padding-top: 2.4rem;
	border-top: 1px solid var(--line-soft);
}

.single-product .canardises-similaires .up-sells,
.single-product section.up-sells.upsells {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.single-product .canardises-similaires ul.products,
.single-product section.up-sells ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
	width: 100%;
}

.single-product .canardises-similaires ul.products > li.product,
.single-product section.up-sells ul.products > li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: 4px;
	padding: 1.1rem 1.1rem 1.2rem;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.single-product .canardises-similaires > .up-sells > h2,
.single-product section.up-sells > h2 {
	font-family: var(--cdv-font-display, "EB Garamond", Garamond, serif);
	font-weight: 500;
	font-size: 1.3rem;
	margin: 0;
	text-align: left;
}

/* Carte « produit similaire » : simple (image, nom, prix, bouton). Le
 * sélecteur de quantité de la grille boutique n'a pas sa place dans un
 * bloc « vous aimerez aussi ». */
.single-product .canardises-similaires ul.products .canardises-qty--loop,
.single-product section.up-sells ul.products .canardises-qty--loop {
	display: none;
}

.single-product .canardises-similaires ul.products li.product .button,
.single-product section.up-sells ul.products li.product .button {
	margin-top: auto;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
	.single-product div.product {
		grid-template-columns: 1fr;
	}

	.single-product div.product > .summary.entry-summary {
		grid-column: 1;
		grid-row: auto;
		margin-top: 1.75rem !important;
	}

	.canardises-fiche-sections {
		grid-template-columns: 1fr;
	}

	.canardises-fiche-sections > .canardises-sec:nth-child(2) {
		border-top: 1px solid var(--line-soft);
		padding-top: 2.4rem;
	}

	.canardises-trust-row {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 1.75rem;
	}

	.canardises-trust-item:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}

	.single-product .canardises-similaires ul.products,
	.single-product section.up-sells ul.products {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.canardises-trust-row {
		grid-template-columns: 1fr;
		row-gap: 1.5rem;
	}

	.canardises-trust-item {
		border-left: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-product * {
		transition: none !important;
	}
}