/**
 * Ficha de producto · el flujo de compra.
 *
 * Vive en `lib/` y no en `css/`, que es una unión a la maqueta: estas clases
 * nacen en el tema porque la maqueta nunca dibujó esta pantalla.
 *
 * Sigue el idioma del sistema y no inventa ninguno: trazo negro (`--stroke`),
 * sombra dura (`--pop-sm`), esquinas de `--r`, y las micro-etiquetas en IBM
 * Plex Mono con versalitas, como en `.product-facts`.
 *
 * Mobile-first, igual que el resto: lo que va sin media query es el teléfono.
 */

/* =========================================================================
 * La galería
 *
 * Ajustes sobre lo que ya define `detail.css`. Se hacen aquí y no allí
 * porque `css/detail.css` es de la maqueta —la comparten sus páginas
 * estáticas— y estos dos cambios solo tienen sentido en la ficha de
 * WooCommerce, donde la columna es mucho más ancha.
 * ====================================================================== */

@media (min-width: 52rem) {
	/*
	 * **Las dos columnas acompañan al scroll.** Cada una es un elemento de la
	 * rejilla y `.detail-layout` trae `align-items: start`, así que ninguna se
	 * estira a la altura de la fila y las dos tienen sitio para desplazarse:
	 * la más corta se queda fija mientras la otra sigue subiendo.
	 *
	 * El desfase es de 6,5 rem y no de 2: la barra del sitio es fija, y con
	 * dos la galería se le metía por debajo. Es el mismo valor que el
	 * `scroll-padding-top` de `base.css` y que el menú de la cuenta.
	 */
	.single-product .product-gallery,
	.single-product .detail-layout--aside > .detail-copy {
		position: sticky;
		top: 6.5rem;
		align-self: start;
	}
}

/*
 * La foto: alto máximo y centrada en su caja.
 *
 * Venía con `max-height: none` y `width: 100%` porque el sachet es un PNG de
 * 2560 px y el tope de 31 rem de la maqueta lo dejaba pequeño. El efecto
 * secundario aparece con las fotos reales del tostadero, que son verticales:
 * sin tope crecían hasta ocupar tres pantallas y el resto de la ficha
 * quedaba a kilómetros.
 *
 * Ahora el alto manda y el ancho lo sigue —`width: auto`—, así una foto
 * apaisada no se estira y una vertical no se dispara. El centrado ya lo pone
 * `place-items: center` de `detail.css`; el `margin-inline: auto` cubre el
 * caso de que esa regla no llegue.
 */
.single-product .product-gallery__main {
	--pdp-media-h: clamp( 20rem, 46vw, 34rem );
	min-height: var(--pdp-media-h);
}

.single-product .product-gallery__main img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--pdp-media-h);
	margin-inline: auto;
	object-fit: contain;
}

.single-product .product-gallery__thumb {
	transition: transform 140ms ease, background 140ms ease;
}

.single-product .product-gallery__thumb:hover {
	transform: translateY(-2px);
}

/* =========================================================================
 * El armazón
 * ====================================================================== */

.chido-buy {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	margin-top: 2rem;
	align-items: start;
}

.chido-buy__form > * + * {
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.chido-buy__step {
	margin: 0;
	padding: 0;
	border: 0;
}

/* La micro-etiqueta de cada paso: el mismo tratamiento que `.product-facts b`. */
.chido-buy__step legend,
.chido-buy__label {
	display: block;
	margin-bottom: 0.6rem;
	padding: 0;
	font: 0.62rem/1.3 "IBM Plex Mono", monospace;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
}

.chido-buy__fixed {
	margin: 0;
	font: 700 1.15rem/1 var(--font-display);
}

/* =========================================================================
 * 1 · Tipo de pedido
 * ====================================================================== */

.chido-buy__choice {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.7rem;
	align-items: center;
	padding: 0.9rem 1rem;
	border: var(--stroke);
	border-radius: var(--r);
	background: var(--paper);
	cursor: pointer;
	transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.chido-buy__choice + .chido-buy__choice {
	margin-top: 0.6rem;
}

.chido-buy__choice input {
	grid-row: span 2;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--ink);
}

.chido-buy__choice-name {
	font: 700 1.05rem/1.2 var(--font-display);
}

.chido-buy__choice-desc {
	grid-column: 2;
	font-size: 0.85rem;
	color: var(--muted);
}

.chido-buy__choice:has( input:checked ) {
	background: var(--yellow);
	box-shadow: var(--pop-sm);
}

/* La suscripción no existe todavía: se ve, se entiende y no se puede pulsar. */
.chido-buy__choice--muted {
	border-style: dashed;
	background: transparent;
	cursor: not-allowed;
	opacity: 0.62;
}

/* =========================================================================
 * 2 · Las moliendas
 * ====================================================================== */

/* ---------- Le moulin ----------
   La molette est le visage de l'`input[type=range]` : elle tourne, elle ne
   décide rien. Cachée sans JavaScript — une barre qui ne fait rien vaut moins
   que pas de barre du tout, et les cartes en dessous suffisent.

   Molette à gauche, commande et libellés à droite (demandé le 20/08/2026).
   Mobile-first : sur téléphone les deux s'empilent, la colonne d'achat est trop
   étroite pour tenir une molette et une barre côte à côte. */
.moulin {
	display: none;
}

.moulin--js {
	display: grid;
	gap: 0.9rem;
	justify-items: center;
	margin-bottom: 1.1rem;
	padding: 1.1rem 1.15rem;
	border: var(--stroke-thin);
	border-radius: var(--r-sm);
	background: var(--paper-2);
}

.moulin__dial {
	display: grid;
	place-items: center;
}

.moulin__burr {
	width: clamp(6.5rem, 30vw, 8.5rem);
	height: auto;
	cursor: grab;
	touch-action: none; /* sinon le doigt fait défiler la page au lieu de tourner */
}

/* La molette reste immobile : seul le point tourne (demandé le 20/08/2026).
   `transform-box` et `transform-origin` sont explicites parce que sur un
   élément SVG l'origine par défaut n'est pas le centre. */
.moulin__pin {
	transform: rotate(var(--tour, 0deg));
	transform-box: view-box;
	transform-origin: 50% 50%;
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.moulin__burr:active {
	cursor: grabbing;
}

.moulin__ctrl {
	display: grid;
	gap: 0.3rem;
	width: 100%;
	min-width: 0;
}

/* ---------- La barre ----------
   Reprise de la référence du 20/08/2026, mise au langage du site : piste fine,
   chemin parcouru en jaune, gros bouton rond cerclé de papier et d'encre avec
   un grain de café dedans, et des crans dessous — un par mouture, un sur deux
   plus haut pour qu'on les compte d'un coup d'œil.

   `--pct` vient du script : WebKit n'a pas d'équivalent à
   `::-moz-range-progress`, le remplissage se fait au dégradé. */
.moulin__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2.2rem;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

.moulin__range::-webkit-slider-runnable-track {
	height: 0.65rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	background:
		linear-gradient(90deg, var(--yellow) 0 var(--pct, 0%), var(--paper) var(--pct, 0%) 100%);
}

.moulin__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.45rem;
	height: 1.45rem;
	/* WebKit compte cette marge depuis la boîte de bordure de la piste, pas
	   depuis son contenu : mesuré au pixel sur la page réelle. Ne pas la
	   « corriger » au calcul. */
	margin-top: -0.62rem;
	border: var(--stroke);
	border-radius: 50%;
	background: var(--yellow) var(--grain-cafe) center / 62% no-repeat;
	/* Les deux anneaux de la référence, sans une image de plus : papier puis
	   encre, en ombres portées sans décalage. */
	box-shadow:
		0 0 0 0.22rem var(--paper),
		0 0 0 calc(0.22rem + var(--sw-thin)) var(--ink);
}

.moulin__range::-moz-range-track {
	height: 0.65rem;
	border: var(--stroke-thin);
	border-radius: var(--r-pill);
	background: var(--paper);
}

.moulin__range::-moz-range-progress {
	height: 0.65rem;
	border-radius: var(--r-pill);
	background: var(--yellow);
}

/* Firefox centre le pouce tout seul : pas de marge à corriger ici. */
.moulin__range::-moz-range-thumb {
	width: 1.45rem;
	height: 1.45rem;
	border: var(--stroke);
	border-radius: 50%;
	background: var(--yellow) var(--grain-cafe) center / 62% no-repeat;
	box-shadow:
		0 0 0 0.22rem var(--paper),
		0 0 0 calc(0.22rem + var(--sw-thin)) var(--ink);
}

/* Le focus se voit : c'est une commande, et elle s'utilise au clavier. */
.moulin__range:focus-visible {
	outline: none;
}

.moulin__range:focus-visible::-webkit-slider-thumb {
	box-shadow:
		0 0 0 0.22rem var(--paper),
		0 0 0 calc(0.22rem + var(--sw-thin)) var(--ink),
		0 0 0 calc(0.22rem + var(--sw-thin) + var(--sw)) var(--turquoise);
}

.moulin__range:focus-visible::-moz-range-thumb {
	box-shadow:
		0 0 0 0.22rem var(--paper),
		0 0 0 calc(0.22rem + var(--sw-thin)) var(--ink),
		0 0 0 calc(0.22rem + var(--sw-thin) + var(--sw)) var(--turquoise);
}

/* Les crans : un par mouture, rentrés d'un demi-bouton de chaque côté — c'est
   la course réelle du pouce. Un sur deux est plus haut. */
.moulin__ticks {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-inline: 0.725rem;
	margin-top: -0.35rem;
}

.moulin__ticks span {
	width: var(--sw-thin);
	height: 0.3rem;
	border-radius: var(--r-pill);
	background: var(--ink);
	opacity: 0.4;
}

.moulin__ticks span:nth-child(odd) {
	height: 0.5rem;
	opacity: 0.6;
}

.moulin__scale {
	display: flex;
	justify-content: space-between;
	margin: 0.1rem 0.55rem 0;
	font: 600 0.66rem/1.2 var(--font-body);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.moulin__now {
	display: grid;
	gap: 0.1rem;
	margin: 0.35rem 0 0;
}

.moulin__now strong {
	font: 700 1.1rem/1.1 var(--font-display);
}

.moulin__now span {
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--muted);
}

/* Dès qu'il y a la place : la molette à gauche, tout le reste à droite. */
@media (min-width: 26rem) {
	.moulin--js {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 1.1rem;
		align-items: center;
		justify-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.moulin__pin { transition: none; }
}

.chido-buy__picker {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}

.chido-buy__option {
	display: grid;
	justify-items: center;
	gap: 0.35rem;
	padding: 0.85rem 0.6rem;
	border: var(--stroke-thin);
	border-radius: var(--r-sm);
	background: var(--paper);
	text-align: center;
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.chido-buy__option:hover {
	transform: translateY(-2px);
	border-color: var(--ink);
}

/* Sin esto el SVG hereda el tamaño del contenedor y ocupa media pantalla:
   es exactamente lo que pasaba antes de escribir esta hoja. */
.chido-buy__option-icon svg {
	display: block;
	width: 2.4rem;
	height: 2.4rem;
}

.chido-buy__option-name {
	font: 700 0.9rem/1.15 var(--font-display);
}

.chido-buy__option-desc {
	font-size: 0.68rem;
	line-height: 1.3;
	color: var(--muted);
}

.chido-buy__option.is-active {
	border: var(--stroke);
	background: var(--yellow);
	box-shadow: var(--pop-sm);
}

/* =========================================================================
 * El formulario de WooCommerce
 *
 * El `<select>` de la molienda solo se esconde **cuando el JavaScript ha
 * arrancado** y ha marcado el formulario. Si no carga, el desplegable sigue
 * visible y el café se puede comprar igual. Por eso la regla cuelga de
 * `.chido-buy--js` y no del selector a secas.
 * ====================================================================== */

.chido-buy--js .variations,
.chido-buy--js .reset_variations {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.chido-buy .woocommerce-variation-price {
	margin-bottom: 0.75rem;
	font: 700 1.6rem/1 var(--font-display);
}

.chido-buy .quantity {
	display: inline-block;
	margin-right: 0.75rem;
}

.chido-buy .quantity input.qty {
	width: 4.5rem;
	padding: 0.6rem;
	border: var(--stroke);
	border-radius: var(--r-sm);
	background: var(--paper);
	font: 700 1rem/1 var(--font-display);
	text-align: center;
}

.chido-buy .single_add_to_cart_button {
	padding: 0.85rem 1.6rem;
	border: var(--stroke);
	border-radius: var(--r-pill);
	background: var(--yellow);
	box-shadow: var(--pop-sm);
	font: 700 1.05rem/1 var(--font-display);
	color: var(--ink);
	cursor: pointer;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.chido-buy .single_add_to_cart_button:hover:not( .disabled ) {
	transform: translate(-2px, -2px);
	box-shadow: var(--pop);
}

.chido-buy .single_add_to_cart_button.disabled {
	background: var(--paper-2);
	box-shadow: none;
	opacity: 0.6;
	cursor: not-allowed;
}

/* =========================================================================
 * El resumen
 * ====================================================================== */

.chido-buy__recap {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: var(--stroke);
	border-radius: var(--r-lg);
	background: var(--pink);
	box-shadow: var(--pop);
	color: var(--paper);
}

.chido-buy__recap-title {
	margin: 0;
	font: 700 1.5rem/1 var(--font-display);
}

.chido-buy__recap-sub {
	margin: 0.35rem 0 1.1rem;
	font-size: 0.9rem;
	color: rgba(255, 253, 244, 0.85);
}

.chido-buy__recap-qty {
	margin: 0 0 0.9rem;
	font: 0.68rem/1 "IBM Plex Mono", monospace;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.chido-buy__recap-lines {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding-top: 0.9rem;
	border-top: var(--sw-thin) solid rgba(255, 253, 244, 0.4);
}

.chido-buy__recap-lines > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}

.chido-buy__recap-lines dt,
.chido-buy__recap-lines dd {
	margin: 0;
	font-size: 0.92rem;
}

.chido-buy__recap-lines dd {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.chido-buy__recap-total {
	margin-top: 0.4rem;
	padding-top: 0.7rem;
	border-top: var(--sw-thin) solid rgba(255, 253, 244, 0.4);
}

.chido-buy__recap-total dt,
.chido-buy__recap-total dd {
	font: 700 1.15rem/1 var(--font-display);
}

.chido-buy__recap-note {
	margin: 1rem 0 0;
	font-size: 0.78rem;
	font-style: italic;
	color: rgba(255, 253, 244, 0.85);
}

.chido-buy__recap .product-payments span {
	border-color: var(--paper);
	color: var(--paper);
}

/* =========================================================================
 * Tablet y escritorio
 * ====================================================================== */

@media (min-width: 30rem) {
	.chido-buy__picker {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 52rem) {
	.chido-buy {
		grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 0.5fr);
		gap: clamp(2rem, 4vw, 3rem);
	}

	/* El resumen acompaña mientras se eligen las opciones. */
	.chido-buy__recap {
		position: sticky;
		top: 2rem;
	}
}