/*
 * Fiche produit — Ceyssat Ma Bougie.
 * Chargée UNIQUEMENT sur la fiche (inc/produit.php), après main-<version>.css dont elle reprend les
 * jetons (--cmb-*). Source canonique : produit.css ; artefact servi : produit-<version>.css (copie
 * exacte, jamais modifiée une fois servie).
 *
 * 0.1.0 (thème 0.12.7) — passe de finition : achat plus haut sur téléphone (« TTC » sur la ligne du
 * prix, quantité et bouton côte à côte), image et achat côte à côte dès la tablette, invitation au
 * Studio, fil d'Ariane à 44 px, prix des produits liés comme la Boutique.
 *
 * 0.1.1 (thème 0.12.9) — colonne d'achat non collante sur bureau : elle passait sur « Dans le même univers ».
 *
 * Sommaire
 * 1. Mise en page : deux colonnes dès la tablette ; colonne d'achat non collante
 * 2. Prix et achat
 * 3. Invitation au Studio
 * 4. Fil d'Ariane et univers
 * 5. Produits liés
 */

/* ==========================================================================
   1. Mise en page : image et achat côte à côte dès 48em (une seule colonne centrée laissait
   le bouton au bas de l'écran d'une tablette). La grille 7 / 5 du bureau (64em+) est inchangée.
   ========================================================================== */

@media (min-width: 48em) and (max-width: 63.99em) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--cmb-space-l);
	}

	/* align-self : la galerie garde la hauteur de l'image (sinon son fond s'étire à la hauteur de la colonne). */
	.woocommerce div.product div.images,
	.woocommerce-page div.product div.images {
		grid-column: 1;
		align-self: start;
		max-width: none;
		margin: 0;
	}

	.woocommerce div.product div.summary,
	.woocommerce-page div.product div.summary {
		grid-column: 2;
		align-self: start;
		max-width: none;
		margin: 0;
	}
}

/* Bureau : colonne d'achat NON collante. Collée (main-<version>.css, 64em+ et 48em de haut), elle restait fixe
   jusqu'au bas de la grille de la fiche — qui porte aussi « Informations » et « Dans le même univers » — et passait
   sur les produits liés. La photo a sensiblement sa hauteur : le collage n'apportait rien. */
@media (min-width: 64em) {
	.woocommerce div.product div.summary,
	.woocommerce-page div.product div.summary {
		position: static;
	}
}

/* ==========================================================================
   2. Prix et achat
   ========================================================================== */

/* « Prix TTC » sur la ligne du prix : une ligne de moins avant le bouton. */
.woocommerce div.product .summary .price {
	display: inline-block;
	margin-inline-end: var(--cmb-space-2xs);
}

.cmb-product-price-note {
	display: inline-block;
	margin: 0 0 var(--cmb-space-s);
}

/* Téléphone : quantité et bouton sur la même ligne (le bouton prend la place restante).
   Dès 48em, la règle de main-<version>.css (bouton à sa largeur) s'applique. */
@media (max-width: 47.99em) {
	.woocommerce div.product form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   3. Invitation au Studio (inc/produit.php, même visibilité que Home 4)
   Bande lin discrète sous l'achat, avant la réassurance : un titre court, le supplément,
   une phrase, un lien. Jamais un second bouton plein à côté de « Ajouter au panier ».
   ========================================================================== */

.cmb-product-personalize {
	margin: 0 0 var(--cmb-space-m);
	padding: var(--cmb-space-s) var(--cmb-space-m) var(--cmb-space-2xs);
	background: var(--cmb-color-linen);
	border-radius: var(--cmb-radius-m);
}

.cmb-product-personalize__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--cmb-space-xs);
	margin: 0 0 var(--cmb-space-3xs);
	color: var(--cmb-color-text);
	font-weight: var(--cmb-weight-medium);
}

.cmb-product-personalize__price {
	color: var(--cmb-color-accent-strong);
	font-size: var(--cmb-text-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cmb-product-personalize__price abbr {
	text-decoration: none;
}

.cmb-product-personalize__text {
	margin: 0;
	color: var(--cmb-color-text-muted);
	font-size: var(--cmb-text-sm);
	line-height: var(--cmb-leading-snug);
	text-wrap: pretty;
}

/* Lien texte (cible de 44 px) : l'achat reste la seule action pleine de la colonne. */
.cmb-product-personalize__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--cmb-tap-target);
	color: var(--cmb-color-text);
	font-size: var(--cmb-text-sm);
	font-weight: var(--cmb-weight-medium);
	text-decoration-line: underline;
	text-decoration-color: var(--cmb-color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.cmb-product-personalize__link:hover {
	color: var(--cmb-color-text);
	text-decoration-color: var(--cmb-color-charcoal);
}

/* ==========================================================================
   4. Fil d'Ariane (64em+) et lien d'univers au-dessus du titre : zone cliquable de 44 px de
   haut, texte à la même place (comme les catégories de la Boutique).
   ========================================================================== */

.woocommerce div.product .summary .woocommerce-breadcrumb a,
.cmb-product-universes a {
	display: inline-block;
	padding-block: calc((var(--cmb-tap-target) - 1lh) / 2);
	margin-block: calc((var(--cmb-tap-target) - 1lh) / -2);
}

/* ==========================================================================
   5. Produits liés : prix comme la Boutique (taille du texte courant, poids regular).
   ========================================================================== */

.woocommerce .related.products ul.products li.product .price {
	font-size: var(--cmb-text-base);
	font-weight: var(--cmb-weight-regular);
	line-height: var(--cmb-leading-snug);
}