/* ==========================================================
   FASE 3 — EXPERIENCIA DE COMPRA
   ==========================================================
   Hoja aparte de style.css a propósito: solo se encola en páginas de
   producto, carrito y checkout. La portada no la carga, y así no paga
   un archivo que no usa.

   El configurador se viste por capas: el plugin trae su propia hoja,
   el tema le inyecta la paleta con wp_add_inline_style() y aquí está
   la tercera capa, que es la de jerarquía y movimiento. Las tres
   ordenan igual: variables, estructura, movimiento. */

/* ==========================================================
   1. MOVIMIENTO — un solo idioma para todo el sitio
   ==========================================================
   Las mismas curvas y duraciones que usa style.css, en nombres
   propios, para poder ajustar el ritmo de la compra sin tocar el
   resto del sitio. */
:root{
	--p3-dur-1:.16s;
	--p3-dur-2:.28s;
	--p3-dur-3:.5s;
	--p3-ease:cubic-bezier(.22,.61,.36,1);
	--p3-ease-mask:cubic-bezier(.76,0,.24,1);
	--p3-bar-h:76px;
}

/* ==========================================================
   2. CONFIGURADOR — estructura
   ========================================================== */

/* El indicador de progreso es el del plugin (.pw-flow), que ya sabe
   qué diapositiva está a la vista y cuánto lleva. Aquí ya no hay barra
   propia: dos indicadores de lo mismo, uno de ellos contando pasos
   completados y otro posiciones, se contradicen en cuanto el cliente
   retrocede. */


/* --- Cabecera de cada paso ------------------------------------- */

.pw-step{border:0;padding:0;margin:0 0 2px;background:transparent;}

/* ------------------------------------------------------------------
   El <legend> visible
   ------------------------------------------------------------------
   Hay dos markup distintos para los mismos pasos y este bloque cubre
   el que se está viendo.

   El acordeón de abajo (.pw-step-head, .pw-step-toggle, .pw-step-body)
   espera que el nombre del paso lo ponga un <button> y que el campo
   real venga envuelto en un .pw-step-body. El plugin, en cambio, emite
   un <fieldset class="pw-step"> con el <legend> dentro y las opciones
   sueltas, sin esa envoltura. Contra ese markup el acordeón no se
   dibuja, sus reglas no aplican, y el recorte de accessibility de
   abajo se comía el único título visible: el resultado eran seis
   bloques de opciones apilados sin separación ni nombre, con el texto
   de cada paso amontonado contra el anterior.

   Por eso aquí el <legend> vuelve a ser el título de verdad: visible,
   con aire arriba y abajo para separar un paso del siguiente, y con el
   mismo carácter de las etiquetas del sitio. El recorte de
   accesibilidad se queda solo para cuando exista el botón del
   acordeón, que es el caso en que el nombre sí lo pone otro elemento.
   ------------------------------------------------------------------ */
.pw-step{margin:0 0 34px;}
.pw-step > legend{
	float:none;
	width:auto;height:auto;
	padding:0 0 14px;
	margin:0;
	overflow:visible;
	clip-path:none;
	white-space:normal;
	color:var(--ink);
	font-family:var(--font-display);
	font-size:.82rem;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	line-height:1.3;
}
.pw-step:last-of-type{margin-bottom:0;}

/* La línea de ayuda ya no hace falta como separador: el título del
   paso lleva su propio aire y la ayuda va inmediatamente debajo. */
.pw-step .pw-step-help{margin:0 0 16px;}

/* Y el recorte de accesibilidad se conserva para el otro markup, el
   del acordeón, donde el nombre visible lo pone el botón del paso y
   el <legend> solo está para lectores de pantalla. */
.pw-step:has(> .pw-step-toggle) > legend{
	position:absolute;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
}

.pw-step-head{
	display:flex;
	align-items:center;
	gap:12px;
	padding:16px 0;
	border-top:1px solid var(--line);
}
.pw-step[data-pw-state="active"] .pw-step-head{border-top-color:var(--ink);}

.pw-step-toggle{
	flex:1 1 auto;
	display:flex;
	align-items:center;
	gap:14px;
	text-align:left;
	background:none;
	border:0;
	padding:0;
	min-height:44px;
	font-family:var(--font-display);
	color:var(--ink);
}
.pw-step-toggle-num{
	font-family:var(--font-mono);
	font-size:.78rem;
	color:var(--muted);
	min-width:20px;
}
.pw-step-toggle-label{
	font-weight:700;
	font-size:1.02rem;
}
.pw-step-toggle-chevron{
	position:relative;
	width:10px;height:10px;
	margin-left:auto;
	border-right:1.5px solid currentColor;
	border-bottom:1.5px solid currentColor;
	transform:rotate(45deg) translate(-2px,-2px);
	transition:transform var(--p3-dur-2) var(--p3-ease);
}
.pw-step-toggle[aria-expanded="false"] .pw-step-toggle-chevron{
	transform:rotate(-45deg) translate(-2px,2px);
}
.pw-step-toggle:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:4px;}

.pw-step-status{
	font-family:var(--font-mono);
	font-size:.68rem;
	text-transform:uppercase;
	letter-spacing:.1em;
	color:var(--muted);
	padding:4px 10px;
	border:1px solid var(--line);
	border-radius:40px;
	white-space:nowrap;
}
.pw-step[data-pw-state="done"] .pw-step-status{
	color:var(--green);
	border-color:color-mix(in srgb, var(--green) 40%, transparent);
}
.pw-step[data-pw-state="active"] .pw-step-status{
	color:var(--ink);
	border-color:var(--ink);
}

.pw-step-body{padding-bottom:26px;}
.pw-step-body[hidden]{display:none;}

/* Entrada de cada paso. Se dispara al quitarse [hidden], que es
   exactamente cuando el usuario acaba de abrirlo. */
.pw-step-body:not([hidden]){
	animation:p3-rise var(--p3-dur-3) var(--p3-ease) both;
}
@keyframes p3-rise{
	from{opacity:0;transform:translateY(10px);}
	to{opacity:1;transform:none;}
}

/* ==========================================================
   3. CONFIGURADOR — opciones
   ========================================================== */

.pw-step-help{margin:.25rem 0 18px;}
.pw-step-sub{
	font-family:var(--font-display);
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.12em;
	color:var(--muted);
	margin:26px 0 12px;
}
.pw-step-sub:first-child{margin-top:0;}

.pw-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
	gap:12px;
}

.pw-opt{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:0;
	padding:10px 10px 14px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	cursor:pointer;
	text-align:center;
	overflow:hidden;
	transition:border-color var(--p3-dur-2) var(--p3-ease),box-shadow var(--p3-dur-2) var(--p3-ease),transform var(--p3-dur-2) var(--p3-ease);
}
.pw-opt img{
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	border-radius:2px;
	display:block;
	background:var(--paper-soft);
}
.pw-opt .pw-ph-fallback{
	width:100%;
	aspect-ratio:4/3;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:var(--font-mono);
	font-size:1.5rem;
	color:var(--muted);
	background:var(--paper-soft);
}
.pw-opt-name{
	margin-top:10px;
	font-family:var(--font-display);
	font-size:.86rem;
	font-weight:600;
	line-height:1.3;
}
.pw-opt-desc{margin-top:4px;font-size:.74rem;color:var(--muted);line-height:1.35;}

/* El radio está oculto pero debe seguir siendo focusable: el anillo
   se dibuja en la etiqueta, que es lo que el usuario ve. */
.pw-opt input{position:absolute;opacity:0;pointer-events:none;}
.pw-opt:has(input:focus-visible){
	outline:2px solid var(--mustard-deep);
	outline-offset:2px;
}

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

.pw-opt.pw-selected{
	border-color:var(--ink);
	box-shadow:inset 0 0 0 1px var(--ink);
}
.pw-opt.pw-selected::after{
	content:"";
	position:absolute;
	top:8px;right:8px;
	width:20px;height:20px;
	border-radius:50%;
	background:var(--ink);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l5 5L20 6' stroke='%23f8d466' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l5 5L20 6' stroke='%23f8d466' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pw-opt.pw-disabled{opacity:.4;cursor:not-allowed;filter:grayscale(1);}
.pw-opt.pw-disabled:hover{transform:none;border-color:var(--line);}

@keyframes p3-pick{
	0%{transform:scale(1);}
	45%{transform:scale(1.025);}
	100%{transform:scale(1);}
}
.pw-opt.pw-just-picked{animation:p3-pick var(--p3-dur-3) var(--p3-ease);}

/* --- Medidas ---------------------------------------------------- */

.pw-measures{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px 28px;}
.pw-measure{display:flex;flex-direction:column;gap:8px;}
.pw-measure label{
	font-family:var(--font-display);
	font-weight:700;
	font-size:.86rem;
	text-transform:uppercase;
	letter-spacing:.08em;
	margin:0;
}
.pw-measure input[type="number"]{
	width:100%;
	min-height:48px;
	padding:.6rem .8rem;
	font-family:var(--font-mono);
	font-size:1.05rem;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	color:var(--ink);
}
.pw-measure input[type="number"]:focus-visible{
	border-color:var(--ink);
	outline:2px solid var(--mustard-deep);
	outline-offset:1px;
}
.pw-measure input[type="range"]{
	width:100%;
	min-height:28px;
	accent-color:var(--mustard-deep);
	background:transparent;
}
.pw-range-hint{
	font-family:var(--font-mono);
	font-size:.74rem;
	color:var(--muted);
	margin:14px 0 0;
}
.pw-fuera{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin:16px 0 0;
	font-size:.9rem;
}
.pw-fuera input{margin-top:4px;accent-color:var(--ink);width:18px;height:18px;flex-shrink:0;}
.pw-nota{
	width:100%;
	min-height:96px;
	margin-top:12px;
	padding:.7rem .85rem;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	font-family:var(--font-body);
}
.pw-nota:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:1px;}

/* --- Extras ----------------------------------------------------- */

.pw-extra-opt{
	display:flex;
	align-items:center;
	gap:14px;
	min-height:56px;
	padding:.6rem .9rem;
	margin-bottom:8px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	cursor:pointer;
	transition:border-color var(--p3-dur-2) var(--p3-ease),background var(--p3-dur-2) var(--p3-ease);
}
.pw-extra-opt:hover{border-color:var(--ink);}
.pw-extra-opt.pw-selected{
	border-color:var(--ink);
	background:#fff;
	box-shadow:inset 0 0 0 1px var(--ink);
}
.pw-extra-opt:has(input:focus-visible){outline:2px solid var(--mustard-deep);outline-offset:2px;}
.pw-extra-opt img,
.pw-extra-opt .pw-ph-fallback{
	width:56px;height:44px;
	flex-shrink:0;
	object-fit:cover;
	border-radius:2px;
}
.pw-extra-opt input{width:20px;height:20px;accent-color:var(--ink);flex-shrink:0;}

.pw-grabado-label{display:block;margin-top:22px;}
.pw-grabado{
	width:100%;
	min-height:64px;
	padding:.7rem .85rem;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	font-family:var(--font-body);
}
.pw-grabado:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:1px;}
.pw-grabado:disabled{opacity:.5;}
.pw-char-count{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-top:6px;}

.pw-species-warn{
	font-size:.86rem;
	color:var(--ink);
	background:#fbf0d9;
	border:1px solid #e9d7a8;
	border-radius:var(--radius);
	padding:12px 14px;
	margin:16px 0 0;
}

/* ==========================================================
   4. CONFIGURADOR — vista previa y resumen
   ========================================================== */

.pw-preview{
	display:flex;
	align-items:center;
	gap:20px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:18px;
	margin-bottom:8px;
}
.pw-preview-photo{
	width:104px;height:132px;
	flex-shrink:0;
	border:1px solid var(--line);
	background:var(--paper-soft);
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
}
/* Sin foto de especie no hay nada que enseñar en este marco. El hueco
   queda reservando 104×132px de papel vacío junto al texto, que es
   justo el tipo de resto visual que rompe la retícula de la página.
   El JS solo sabe quitar la clase pw-empty cuando la foto arrives, así
   que el estado inicial, que es el que se ve al entrar, se oculta
   aquí directamente. */
.pw-preview-photo:empty,
.pw-preview-photo.pw-empty{
	display:none;
}
.pw-preview-photo img{width:100%;height:100%;object-fit:contain;}
.pw-preview-caption{
	flex:1 1 auto;
	font-family:var(--font-display);
	font-size:.92rem;
	min-width:0;
}
.pw-preview-shape{flex:0 0 auto;}
.pw-preview-table{
	width:150px;
	border:1.5px solid var(--ink);
	background:var(--paper-soft);
	border-radius:2px;
	padding:14px;
	text-align:center;
	transition:aspect-ratio var(--p3-dur-3) var(--p3-ease);
}
.pw-preview-dims{font-family:var(--font-mono);font-size:.76rem;}

.pw-summary{
	position:sticky;
	bottom:0;
	z-index:20;
	background:var(--surface);
	border:1px solid var(--line);
	border-top:2px solid var(--ink);
	border-radius:var(--radius);
	padding:20px 22px;
}
.pw-summary-title{
	font-family:var(--font-display);
	font-weight:700;
	font-size:.8rem;
	text-transform:uppercase;
	letter-spacing:.12em;
	margin:0 0 12px;
	color:var(--muted);
}
.pw-line{
	display:flex;
	justify-content:space-between;
	gap:16px;
	padding:8px 0;
	border-bottom:1px solid var(--line);
	font-size:.9rem;
}
.pw-line-label{color:var(--muted);}
.pw-line-amount{white-space:nowrap;font-family:var(--font-mono);font-size:.86rem;}

.pw-total{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:16px;
	margin:14px 0 6px;
	padding-top:14px;
	border-top:1px solid var(--line);
}
.pw-total-label{
	font-family:var(--font-display);
	font-weight:700;
	font-size:.8rem;
	text-transform:uppercase;
	letter-spacing:.12em;
}
.pw-total-amount{
	font-family:var(--font-mono);
	font-weight:700;
	font-size:clamp(1.5rem,2.4vw,2rem);
	letter-spacing:-.02em;
}
.pw-leadtime{
	font-family:var(--font-mono);
	font-size:.76rem;
	color:var(--muted);
	margin:0 0 14px;
	min-height:1.2em;
}

@keyframes p3-bump{
	0%{transform:scale(1);}
	40%{transform:scale(1.06);}
	100%{transform:scale(1);}
}
.pw-total-amount.pw-total-bump{animation:p3-bump var(--p3-dur-3) var(--p3-ease);}

.pw-submit{
	width:100%;
	min-height:54px;
	font-family:var(--font-display);
	font-weight:700;
	font-size:.95rem;
}
.pw-submit[disabled]{opacity:.45;cursor:not-allowed;}
.pw-actions{display:flex;gap:10px;margin-top:12px;}
.pw-actions .button{
	flex:1 1 auto;
	min-height:44px;
	text-align:center;
	font-size:.72rem;
}

/* Estado de envío: el plugin deja el formulario en manos de WooCommerce,
   así que aquí solo se marca que la acción está en curso. */
.pw-configurator.is-sending .pw-submit{
	pointer-events:none;
	opacity:.7;
}

/* ==========================================================
   5. BARRA DE ACCIÓN EN MÓVIL
   ==========================================================
   Solo por debajo de 900px, que es donde el resumen en flujo queda
   lejos del dedo. El botón NO es una copia del de compra: llama al
   botón real, así que la validación del servidor sigue siendo la
   única que manda. */
.pw-mobile-bar{
	display:none;
	position:fixed;
	left:0;right:0;bottom:0;
	z-index:60;
	align-items:center;
	gap:14px;
	padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
	background:color-mix(in srgb, var(--paper) 94%, transparent);
	backdrop-filter:blur(10px);
	border-top:1px solid var(--line);
	transform:translateY(0);
	transition:transform var(--p3-dur-3) var(--p3-ease),opacity var(--p3-dur-2) var(--p3-ease);
}
.pw-bar-away{transform:translateY(110%);opacity:0;pointer-events:none;}
.pw-mobile-bar-info{flex:0 0 auto;display:flex;flex-direction:column;line-height:1.2;}
.pw-mobile-bar-label{
	font-family:var(--font-display);
	font-size:.66rem;
	text-transform:uppercase;
	letter-spacing:.12em;
	color:var(--muted);
}
.pw-mobile-bar-total{font-family:var(--font-mono);font-size:1.15rem;}
.pw-mobile-bar-btn{
	flex:1 1 auto;
	min-height:52px;
	background:var(--ink);
	color:#fff;
	border:1px solid var(--ink);
	border-radius:var(--radius);
	font-family:var(--font-display);
	font-weight:700;
	font-size:.8rem;
	text-transform:uppercase;
	letter-spacing:.1em;
	transition:background var(--p3-dur-2) var(--p3-ease),color var(--p3-dur-2) var(--p3-ease);
}
.pw-mobile-bar-btn:hover:not([disabled]){background:var(--mustard);color:var(--ink);}
.pw-mobile-bar-btn[disabled]{opacity:.45;cursor:not-allowed;}
.pw-mobile-bar-btn:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:2px;}

@media (max-width:899px){
	.pw-mobile-bar{display:flex;}
	/* La barra es fija y ocupa unos 76px. Sin esta holgura taparía el
	   final del formulario: el resumen y el botón real. El alto del
	   barra se mide aquí una vez y se reutiliza en los dos sitios que
	   la necesitan: el relleno del configurador y el del botón
	   Continuar.

	   Ese segundo relleno es el que faltaba. El del configurador
	   aparta el final del formulario de la barra, pero la barra es
	   fija y ocupa el ancho entero de la pantalla: cualquier botón que
	   quede en la franja inferior queda debajo de ella aunque el
	   contenedor tenga relleno, porque el relleno no aparta nada que no
	   esté dentro del flujo. Con el botón Continuar al final de cada
	   paso, se pulsaba la zona de la barra en vez del botón. */
	.pw-configurator,
	.single-product:has(.pw-configurator),
	.single-product.has-pw-configurator{
		--p3-bar-h:76px;
		padding-bottom:calc(var(--p3-bar-h) + 16px);
	}
	.pw-config-form{padding-bottom:0;}
	.pw-summary{position:static;}
	/* La barra y la navegación del paso se separan con un filete, para
	   que se lean como dos zonas y no como un botón partido. */
	.pw-configurator .pw-flownav-foot{
		border-bottom:1px solid var(--line);
		padding-bottom:18px;
		margin-bottom:0;
	}
}

/* ==========================================================
   6. FICHA DE PRODUCTO — galería editorial
   ========================================================== */

/* La rejilla de la ficha SIN configurador: foto un poco más ancha que el
   texto, porque aquí la foto es la protagonista y no hay un configurador que
   compita con ella.

   El reparto de columnas vive solo aquí. Antes estaba también en style.css
   con 1fr 1fr, y como esta hoja se carga después, ganaba esta; dos
   definiciones del mismo reparto significa que un cambio hecho en una no se
   nota en la otra. style.css se queda con el contenedor (ancho máximo y
   relleno) y con la regla que colapsa a una columna.

   El mínimo de 360px en la segunda columna es lo que impide que, en una
   ventana estrecha, la foto se quede con un resto mínimo y el texto
   desaparece: por debajo de 980px la rejilla pasa a una columna (más abajo,
   en la media query). */
.single-product:not(.has-pw-configurator) div.product{
	display:grid;
	grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
	gap:56px;
	align-items:start;
}

/* La galería se sale del contenedor para usar el ancho: en una pieza de
   woodworking la foto manda y la ficha no debe parecer una entrada de
   blog con una foto al lado. */
.single-product:not(.has-pw-configurator) .woocommerce-product-gallery{
	width:auto !important;
	float:none !important;
	position:relative;
	margin:0 !important;
}
.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__wrapper{
	display:flex;
	gap:12px;
	align-items:stretch;
}
.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__wrapper .flex-control-thumbs{
	display:flex;
	flex-direction:column;
	gap:10px;
	width:88px;
	flex:0 0 88px;
	order:-1;
	margin:0;
	overflow-y:auto;
	/* El alto lo marca la foto grande, no un número fijo: 520px era la
	   altura correcta solo para una foto apaisada. Con una foto vertical,
	   las miniaturas acababan cortadas con scroll dentro de la propia
	   columna, que es una barra de scroll dentro de otra barra de scroll. */
	max-height:var(--p3-galeria-alto);
	padding:0;
}
.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__wrapper .flex-control-thumbs li{
	width:100%;
	margin:0;
	padding:0;
	border:1px solid var(--line);
	background:var(--paper-soft);
}
.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__wrapper .flex-control-thumbs img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	display:block;
}
.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__wrapper .flex-control-thumbs li.flex-active-thumb img{
	outline:2px solid var(--ink);
	outline-offset:-2px;
}
.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__wrapper .flex-viewport{
	flex:1 1 auto;
	min-width:0;
}
/* El alto de la foto grande está acotado, y el de las miniaturas se
   deja en el mismo valor.
   Sin esto, una fotografía vertical —que es como se photographía un
   mueble de pie, 1200 por 1800— se estiraba a 800px de alto en una
   columna de 550: el título y el botón quedaban muy arriba y había que
   bajar 800px de imagen para llegar a ellos. El alto se limita al 78%
   de la ventana y a 720px, lo que además cabe en una pantalla de
   portátil con la barra del navegador puesta.
   object-fit:contain y no cover: el marco es 4:5 y una foto de 3:2 o
   de 1:1 no entra sin recortar, y un recorte en la ficha de una pieza
   de madera esconde justo la esquina de la tabla que el cliente quiere
   ver. Con contain la foto entra entera y el sobrante queda sobre el
   fondo de papel, que es el fondo de un estudio fotográfico. */
.single-product:not(.has-pw-configurator){--p3-galeria-alto:min(78vh,720px);}
.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__wrapper .flex-viewport{
	max-height:var(--p3-galeria-alto);
}
.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__image img{
	width:100%;
	height:auto;
	max-height:var(--p3-galeria-alto);
	aspect-ratio:4/5;
	object-fit:contain;
	object-position:center;
	display:block;
	background:var(--paper-soft);
}

.single-product:not(.has-pw-configurator) .summary.entry-summary{width:auto !important;float:none !important;margin:0 !important;position:sticky;top:calc(var(--topbar-h) + var(--header-h) + 28px);}

.single-product:not(.has-pw-configurator) .summary .product_title{
	font-family:var(--font-editorial);
	font-weight:400;
	font-size:clamp(2rem,3vw,2.8rem);
	line-height:1.08;
	margin:0 0 14px;
}
.single-product:not(.has-pw-configurator) .summary .price{margin:0 0 18px;font-family:var(--font-mono);font-size:1.4rem;}
.single-product:not(.has-pw-configurator) .summary .price del{color:var(--muted-ink);font-size:1rem;margin-right:8px;}
.single-product:not(.has-pw-configurator) .summary .price ins{text-decoration:none;}
.single-product:not(.has-pw-configurator) .woocommerce-product-details__short-description{
	/* --muted-ink y no --muted: esta es la descripción de la pieza, texto
	   que se lee, y --muted se queda en 3.4:1 sobre papel, por debajo del
	   4.5:1 que pide WCAG AA para letra normal. */
	color:var(--muted-ink);
	border-top:1px solid var(--line);
	padding-top:18px;
	margin:0 0 22px;
}

.single-product:not(.has-pw-configurator) .woocommerce-tabs{
	grid-column:1 / -1;
	margin-top:64px;
	border-top:1px solid var(--line);
}
.single-product:not(.has-pw-configurator) .woocommerce-tabs ul.tabs{
	display:flex;
	gap:24px;
	padding:0;
	margin:0 0 28px;
}
.single-product:not(.has-pw-configurator) .woocommerce-tabs ul.tabs::before{display:none;}
.single-product:not(.has-pw-configurator) .woocommerce-tabs ul.tabs li{margin:0;padding:14px 0;border-bottom:2px solid transparent;}
.single-product:not(.has-pw-configurator) .woocommerce-tabs ul.tabs li::before{display:none;}
.single-product:not(.has-pw-configurator) .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--ink);}
.single-product:not(.has-pw-configurator) .woocommerce-tabs ul.tabs li a{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-ink);}
.single-product:not(.has-pw-configurator) .woocommerce-tabs ul.tabs li.active a{color:var(--ink);}

@media (max-width:980px){
	.single-product:not(.has-pw-configurator) div.product{grid-template-columns:1fr;gap:32px;}
	.single-product:not(.has-pw-configurator) .summary.entry-summary{position:static;}
	.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__wrapper .flex-control-thumbs{
		flex-direction:row;
		width:auto;
		flex:0 0 auto;
		order:0;
		--p3-galeria-alto:min(62vh,560px);
		overflow-x:auto;
	}
	.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__wrapper .flex-control-thumbs li{width:72px;flex:0 0 72px;}
}

/* ==========================================================
   7. CARRITO — confirmación y estados
   ========================================================== */

/* Aviso de "añadido al carrito". Se muestra y se retira solo; el aviso
   real de WooCommerce sigue existiendo en el carrito y el checkout, que
   es donde un usuario de teclado o lector de pantalla lo necesita. */
.p3-toast{
	position:fixed;
	right:20px;
	bottom:24px;
	/* 280: por encima del mini-carrito (260), no por encima de la cabecera.
	   El aviso aparece justo después de añadir al carrito, que es
	   exactamente cuando el panel se está abriendo: si el aviso se
	   quedara debajo del overlay, la confirmación —la única prueba de
	   que el producto entró en el carrito— no se vería. */
	z-index:280;
	display:flex;
	align-items:center;
	gap:14px;
	max-width:min(380px,calc(100vw - 40px));
	padding:16px 18px;
	background:var(--ink);
	color:#fff;
	border-radius:var(--radius);
	box-shadow:0 18px 40px rgba(13,10,8,.24);
	transform:translateY(120%);
	opacity:0;
	transition:transform var(--p3-dur-3) var(--p3-ease),opacity var(--p3-dur-2) var(--p3-ease);
}
.p3-toast.is-in{transform:translateY(0);opacity:1;}
.p3-toast strong{display:block;font-family:var(--font-display);font-size:.92rem;font-weight:700;}
.p3-toast span{display:block;font-size:.82rem;color:rgba(255,255,255,.7);margin-top:2px;}
.p3-toast a{
	flex:0 0 auto;
	padding:10px 16px;
	background:var(--mustard);
	color:var(--ink);
	border-radius:var(--radius);
	font-family:var(--font-mono);
	font-size:.7rem;
	text-transform:uppercase;
	letter-spacing:.1em;
	text-decoration:none;
}
.p3-toast a:hover{background:#fff;}

@keyframes p3-count-pop{
	0%{transform:scale(1);}
	40%{transform:scale(1.28);}
	100%{transform:scale(1);}
}
.cart-count.p3-bump{animation:p3-count-pop var(--p3-dur-3) var(--p3-ease);}

/* El aviso flotante y el mini carrito son la misma información en dos
   sitios distintos, y juntos son ruido: cuando se añade una pieza por
   AJAX se abren los dos a la vez, uno en la esquina y otro encima.

   El mini carrito es el mejor de los dos porque muestra qué se añadió,
   cuánto cuesta y qué se puede hacer después. El aviso "Añadido al
   carrito" solo va a seguir apareciendo en la página del carrito, que
   es donde el mensaje tiene sentido: allí no hay panel que lo sustituya
   y quien navega sin JavaScript necesita leerlo.

   Por eso shop-ux.js se apaga por completo en las páginas que ya
   muestran el aviso oficial de WooCommerce (is-cart, checkout), en vez
   de dejar los dos compitiendo en el sitio entero. */
.woocommerce-cart .p3-toast,
.woocommerce-checkout .p3-toast{display:none;}

/* ------------------------------------------------ Cartas del carrito */
.woocommerce-cart-form table.shop_table,
.woocommerce table.shop_table{
	border:0;
	border-collapse:collapse;
	width:100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
	padding:18px 14px;
	border-bottom:1px solid var(--line);
	text-align:left;
	vertical-align:middle;
}
.woocommerce table.shop_table thead th{
	font-family:var(--font-display);
	font-size:.72rem;
	text-transform:uppercase;
	letter-spacing:.12em;
	color:var(--muted);
	border-bottom:1px solid var(--ink);
}
.woocommerce-cart-form .cart_item img{
	width:96px;
	aspect-ratio:1/1;
	object-fit:cover;
	border:1px solid var(--line);
}
.woocommerce-cart-form .product-name a{
	font-family:var(--font-display);
	font-weight:700;
	text-decoration:none;
}
.woocommerce .quantity input.qty{
	width:88px;
	min-height:46px;
	padding:.4rem .5rem;
	font-family:var(--font-mono);
	font-size:1rem;
	text-align:center;
	border:1px solid var(--line);
	border-radius:var(--radius);
	background:var(--surface);
}
.woocommerce .quantity input.qty:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:1px;}
.woocommerce-cart-form td.product-subtotal{font-family:var(--font-mono);font-weight:700;}

.cart_totals h2{
	font-family:var(--font-editorial);
	font-weight:400;
	font-size:1.6rem;
	margin:0 0 16px;
}
.cart_totals .cart_totals_table th{font-weight:400;color:var(--muted);}
.cart_totals .order-total th,
.cart_totals .order-total td{
	font-family:var(--font-mono);
	font-size:1.3rem;
	border-top:1px solid var(--ink);
	padding-top:16px;
}
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button{
	min-height:52px;
	border-radius:var(--radius);
	transition:background var(--p3-dur-2) var(--p3-ease),color var(--p3-dur-2) var(--p3-ease),border-color var(--p3-dur-2) var(--p3-ease),transform var(--p3-dur-1) var(--p3-ease);
}
.woocommerce .button:active{transform:translateY(1px);}

/* ------------------------------------------------ Checkout */
/* El reparto en dos columnas del checkout no se decide aquí: está más
   abajo, en el bloque del checkout, y su contenedor es el <form>, no
   .col2-set. Ver el comentario de ese bloque antes de añadir reglas de
   rejilla a .col2-set: llevan dos años aquí sin efecto porque .col2-set
   nunca fue contenedor de rejilla. */
.woocommerce form .form-row{margin:0 0 18px;display:block;}
.woocommerce form .form-row label{display:block;margin-bottom:6px;font-family:var(--font-display);font-weight:600;font-size:.88rem;}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
	width:100%;
	min-height:50px;
	padding:.6rem .8rem;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	font-family:var(--font-body);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
	border-color:var(--ink);
	outline:2px solid var(--mustard-deep);
	outline-offset:1px;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{border-color:#9a5a4a;}
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message{
	border-top-color:var(--ink);
	background:var(--paper-soft);
	border-radius:var(--radius);
}

/* ==========================================================
   8. MOVIMIENTO REDUCIDO
   ==========================================================
   Una sola regla que apaga transiciones y animaciones propias de esta
   fase. La información no depende de ninguna de ellas: los pasos
   plegados se siguen viendo con su icono girado, el total se sigue
   viendo completo y el aviso de confirmación aparece sin deslizarse. */
@media (prefers-reduced-motion:reduce){
	.pw-step-body:not([hidden]),
	.pw-opt.pw-just-picked,
	.pw-total-amount.pw-total-bump,
	.cart-count.p3-bump,
	.p3-toast{
		animation:none !important;
		transition:none !important;
	}
	.p3-toast{transform:none;}
	.pw-step-toggle-chevron{transition:none;}
	.pw-preview-table{transition:none;}
}

/* --- Flechas del carrusel ---------------------------------------
   WooCommerce las pinta dentro del visor y con opacidad cero hasta que
   hay más de una imagen. Se rediseñan aquí para que se vean con la
   tipografía del sitio y tengan área de toque suficiente. */
.single-product .woocommerce-product-gallery__wrapper .flex-control-nav{
	position:absolute;
	top:50%;
	left:0;right:0;
	margin:0;
	padding:0 14px;
	display:flex;
	justify-content:space-between;
	pointer-events:none;
	transform:translateY(-50%);
}
.single-product .woocommerce-product-gallery__wrapper .flex-control-nav a{
	pointer-events:auto;
	width:48px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter:blur(6px);
	border:1px solid var(--line);
	border-radius:50%;
	color:var(--ink);
	text-decoration:none;
	font-size:1.1rem;
	line-height:1;
	transition:background var(--p3-dur-2) var(--p3-ease),color var(--p3-dur-2) var(--p3-ease),transform var(--p3-dur-1) var(--p3-ease);
}
.single-product .woocommerce-product-gallery__wrapper .flex-control-nav a:hover{
	background:var(--ink);
	color:#fff;
}
.single-product .woocommerce-product-gallery__wrapper .flex-control-nav a:active{transform:scale(.94);}
.single-product .woocommerce-product-gallery__wrapper .flex-control-nav a:focus-visible{
	outline:2px solid var(--mustard-deep);
	outline-offset:2px;
}
.single-product .woocommerce-product-gallery__wrapper .flex-control-nav a::before{
	content:attr(data-label);
	position:absolute;
	width:1px;height:1px;
	overflow:hidden;
	clip-path:inset(50%);
}
/* En táctil se retiran: el dedo ya hace de flecha y dos botones
   encima de la foto estorban. */
@media (hover:none){
	.single-product .woocommerce-product-gallery__wrapper .flex-control-nav{display:none;}
}

/* La miniatura activa también se anuncia, no solo se ve marcada. */
.single-product .woocommerce-product-gallery__wrapper .flex-control-thumbs li.flex-active-thumb::after{
	content:"";
	position:absolute;
	inset:0;
	border:2px solid var(--ink);
	pointer-events:none;
}
.single-product:not(.has-pw-configurator) .woocommerce-product-gallery__wrapper .flex-control-thumbs li{position:relative;}

/* ==========================================================
   9. FICHA — datos técnicos antes de comprar
   ==========================================================
   Tres líneas como mucho. Suficiente para decidir si la mesa encaja
   sin tener que abrir el configurador, y suficiente para que la foto
   siga mandando en la pantalla. */
.pw-facts{
	display:flex;
	flex-wrap:wrap;
	gap:0;
	margin:0 0 22px;
	padding:0;
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
}
.pw-fact{
	flex:1 1 160px;
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:14px 18px 14px 0;
}
.pw-fact + .pw-fact{border-left:1px solid var(--line);padding-left:18px;}
.pw-fact dt{
	font-family:var(--font-mono);
	font-size:.66rem;
	text-transform:uppercase;
	letter-spacing:.12em;
	color:var(--muted);
}
.pw-fact dd{margin:0;font-size:.92rem;}

.pw-price-note{
	font-size:.92rem;
	color:var(--muted);
	border-left:2px solid var(--mustard-deep);
	padding-left:14px;
	margin:0 0 20px;
}

@media (max-width:560px){
	.pw-fact{flex:1 1 100%;}
	.pw-fact + .pw-fact{border-left:0;padding-left:0;border-top:1px solid var(--line);}
}

/* ==========================================================
   10. CARRITO — cabecera y estados de la página
   ==========================================================
   La tabla del carrito ya está vestida más arriba. Lo que faltaba era
   el marco: sin un título que diga dónde está el cliente, la tabla
   aparece bajo la barra de confianza y parece la lista de productos de
   una categoría cualquiera.

   El título lo pone un gancho, no una plantilla: WooCommerce ya escribe
   <h1> en la página del carrito, así que este bloque se limita a
   envolverlo con el subtítulo que falta. Si un día se cambia el
   título, el subtítulo sigue siendo cierto. */

/* El encabezado lo viste style.css (.maderia-page-head), que se carga en
   todo el sitio. Aquí solo se recorta un poco su aire inferior, porque en
   el carrito y el checkout la tabla o el formulario ya traen su propio
   relleno y con el aire completo se abre un hueco grande entre el título y
   la primera fila. */
.woocommerce-cart .maderia-page-head,
.woocommerce-checkout .maderia-page-head{
	margin-bottom:26px;
}

/* Carrito vacío. WooCommerce lo pinta como un párrafo suelto dentro de
   un <p class="return-to-shop">. Se le da forma de bloque con aire
   porque es una página, no una frase perdida, y se le añade una salida
   clara: sin productos, lo útil es volver al catálogo. */
.cart-empty,
.woocommerce .cart-empty{
	font-family:var(--font-display);
	font-size:1.35rem;
	font-weight:700;
	line-height:1.3;
	letter-spacing:-.01em;
	margin:0 0 24px;
	padding:0;
	border:0;
	background:transparent;
}
.woocommerce .return-to-shop{
	margin:0;
}
.woocommerce .return-to-shop a{
	display:inline-flex;
	align-items:center;
	min-height:52px;
	padding:0 26px;
	background:var(--ink);
	color:#fff;
	border-radius:var(--radius);
	font-family:var(--font-display);
	font-weight:700;
	font-size:.92rem;
	text-decoration:none;
	transition:background var(--p3-dur-2) var(--p3-ease);
}
.woocommerce .return-to-shop a:hover{background:var(--black);}

/* Aviso de cupón aplicado y de cupones disponibles. Salen de
   WooCommerce y son los que explican por qué el total ha cambiado;
   se les sube el contraste porque son texto pequeño sobre papel. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
	border-top-width:2px;
	padding:14px 18px;
	margin:0 0 22px;
	list-style:none;
}
.woocommerce .woocommerce-message{
	border-top-color:var(--ink);
	background:#F7F9F5;
	color:var(--ink);
}
.woocommerce .woocommerce-message .button{
	float:right;
	margin-left:12px;
	min-height:38px;
	padding:0 16px;
	font-size:.8rem;
}
.woocommerce .woocommerce-error{
	border-top-color:#9a5a4a;
	background:#FDF4F1;
	color:var(--ink);
}
/* El aviso de error de cupón llega dentro de una lista con viñeta; la
   viñeta no aporta nada y descuadra el texto. */
.woocommerce .woocommerce-error li{margin:0 0 4px;}
.woocommerce .woocommerce-error li::marker{content:"";}

/* --- Checkout ---------------------------------------------------
   El checkout clásico de WooCommerce es una rejilla de dos columnas con
   los datos de envío y, al lado, el resumen. En pantallas estrechas
   WooCommerce la apila, pero en anchas el resumen queda en una columna
   estrecha con el código de descuento empujado. Se le da un ancho
   legible y se sube el resumen para que el total se vea sin bajar. */
/* El contenedor de la rejilla es el <form class="checkout">, que es lo
   que tiene los tres bloques como hijos: los campos (.col2-set), el
   título del resumen y el resumen (#order_review).

   Antes el reparto estaba puesto sobre .col2-set, y ahí no funciona
   nada: .col2-set nunca fue un contenedor de rejilla, así que
   grid-template-columns y los grid-column de los hijos no se aplicaban
   y el checkout salía en una sola columna con el resumen debajo de
   todo el formulario, aunque el comentario dijera que el resumen iba
   en una columna de 420px al lado. Por eso el formulario de envío se
   leía largo y cuesta llegar al total.

   display:grid se pone aquí y no se heredaba de WooCommerce: su CSS
   pone float:left y width:48% en .col-1 y .col-2, que es una maquetación
   de dos columnas con flotantes. Con esos flotantes anulados más abajo,
   los hijos se quitaban de la floats y se amontonaban en el flujo
   normal. */
.woocommerce-checkout form.checkout{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,420px);
	gap:40px;
	align-items:start;
}
.woocommerce-checkout form.checkout > .col2-set{
	grid-column:1;
	grid-row:1;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{
	width:auto !important;
	float:none;
	padding:0;
}
.woocommerce-checkout #order_review{
	grid-column:2;
	grid-row:2;
	align-self:start;
}
.woocommerce-checkout #order_review_heading{
	grid-column:2;
	grid-row:1;
	margin:0 0 14px;
	font-family:var(--font-display);
	font-size:1.15rem;
	font-weight:800;
}
/* Por debajo de 900px todo en una columna y en orden de lectura: campos,
   resumen, forma de pago. Con el ancho repartido en dos a 900px los
   campos de una sola columna se quedaban en 340px y las etiquetas y los
   valores no cabían en una línea. */
@media (max-width:900px){
	.woocommerce-checkout form.checkout{
		grid-template-columns:minmax(0,1fr);
		gap:32px;
	}
	.woocommerce-checkout form.checkout > .col2-set,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review{
		grid-column:1;
		grid-row:auto;
	}
}

/* Los campos de pago (tarjeta, transferencia, pago en efectivo) se
   leen como una lista de opciones, no como bloques con borde. El borde
   lo pone el campo de radio, que es lo que se puede pulsar; el bloque
   entero sigue siendo pulsable porque WooCommerce lo enlaza, pero
   poner el borde también en el div duplicaría la señal. */
.woocommerce-checkout .payment_methods{
	background:transparent;
	border:0;
	padding:0;
	margin:0;
}
.woocommerce-checkout .payment_methods ul{
	border:1px solid var(--line);
	border-radius:var(--radius);
	overflow:hidden;
}
.woocommerce-checkout .payment_methods li{
	border-bottom:1px solid var(--line);
	padding:0;
}
.woocommerce-checkout .payment_methods li:last-child{border-bottom:0;}
.woocommerce-checkout .payment_methods li label{
	display:flex;
	align-items:center;
	gap:10px;
	padding:16px 18px;
	margin:0;
	font-family:var(--font-display);
	font-weight:600;
	cursor:pointer;
}
.woocommerce-checkout .payment_methods li input[type="radio"]{
	margin:0;
	flex-shrink:0;
	width:18px;
	height:18px;
	accent-color:var(--ink);
}
.woocommerce-checkout .payment_methods li:has(input:checked){
	background:var(--paper-soft);
}
.woocommerce-checkout .payment_methods li .payment_box{
	background:transparent;
	padding:0 18px 18px 46px;
	font-size:.86rem;
	color:var(--muted-ink);
	line-height:1.55;
}
.woocommerce-checkout .payment_methods li .payment_box p{margin:0 0 8px;}

.woocommerce-checkout #payment{
	background:transparent;
	border-radius:var(--radius);
	padding:0;
}
.woocommerce-checkout #payment ul.payment_methods{
	padding:0;
}
.woocommerce-checkout #payment .form-row.place-order{
	padding:20px 0 0;
	margin:20px 0 0;
	border-top:1px solid var(--line);
}
.woocommerce-checkout #payment #place_order{
	width:100%;
	min-height:56px;
	background:var(--ink);
	color:#fff;
	border:0;
	border-radius:var(--radius);
	font-family:var(--font-display);
	font-size:1rem;
	font-weight:800;
	padding:0 28px;
	transition:background var(--p3-dur-2) var(--p3-ease);
}
.woocommerce-checkout #payment #place_order:hover{background:var(--black);}
.woocommerce-checkout #payment #place_order:focus-visible{
	outline:2px solid var(--mustard-deep);
	outline-offset:2px;
}
.woocommerce-checkout #payment .terms{
	margin:0 0 16px;
	font-size:.82rem;
	line-height:1.5;
}
.woocommerce-checkout #payment .terms label{display:inline;}

/* El bloque "tu pedido" en la versión clásica se llama así en el
   plantilla; los importes van en columna y el total destacado. */
.woocommerce-checkout .woocommerce-checkout-review-order-table{
	font-size:.9rem;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td{
	padding:12px 0;
	border-bottom:1px solid var(--line);
	text-align:left;
	vertical-align:top;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{
	font-family:var(--font-display);
	font-size:.68rem;
	text-transform:uppercase;
	letter-spacing:.12em;
	color:var(--muted);
	border-bottom:1px solid var(--ink);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name{
	font-family:var(--font-display);
	font-weight:600;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{
	font-family:var(--font-display);
	font-size:1.25rem;
	font-weight:800;
	border-bottom:0;
	padding-top:16px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{text-align:right;}

/* --- Carrito móvil ---------------------------------------------
   La tabla del carrito es una tabla: en 375px tiene siete columnas y
   ninguna se lee. WooCommerce sustituye la tabla por bloques cuando
   detecta pantallas estrechas, pero los estilos de este tema la dejaban
   igual, así que en móvil el cliente veía una tabla con la columna del
   precio cortada.

   Los selectores de abajo usan las clases que WooCommerce imprime en
   cada celda —.product-remove, .product-thumbnail, .product-name,
   .product-price, .product-quantity, .product-subtotal— y los nombres
   de columna que desaparecen se recuperan con ::before. El contenido es
   el mismo; lo único que cambia es la disposición. Por eso funciona con
   cualquier versión de WooCommerce que mantenga esas clases, que es lo
   que lleva haciendo desde la 3.x. */
@media (max-width:780px){
	.woocommerce-cart-form,
	.woocommerce-cart-form tbody,
	.woocommerce-cart-form tr,
	.woocommerce-cart-form td,
	.woocommerce-cart-form th{
		display:block;
		width:100%;
	}
	.woocommerce-cart-form thead{
		/* Las cabeceras se ocultan de verdad, no con display:none: al
		   desaparecen de la vista pero siguen en el árbol, y quien
		   recorra la tabla con un lector de pantalla la lee como lo que
		   es. */
		position:absolute;
		width:1px;height:1px;
		overflow:hidden;
		clip-path:inset(50%);
		white-space:nowrap;
	}
	.woocommerce-cart-form tr.cart_item{
		display:grid;
		grid-template-columns:84px minmax(0,1fr) auto;
		grid-template-areas:
			"thumb name  remove"
			"thumb unit  unit"
			"thumb qty   price";
		gap:5px 14px;
		align-items:start;
		padding:18px 0;
		border-bottom:1px solid var(--line);
	}
	.woocommerce-cart-form tr.cart_item > *{
		padding:0;
		border:0;
		text-align:left;
		float:none;
	}
	.woocommerce-cart-form tr.cart_item .product-thumbnail{
		grid-area:thumb;
		width:84px !important;
	}
	.woocommerce-cart-form tr.cart_item .product-thumbnail img{
		width:84px;
		height:84px;
	}
	.woocommerce-cart-form tr.cart_item .product-remove{
		grid-area:remove;
		justify-self:end;
	}
	/* La × de quitar es un <a> con la etiqueta "Quitar" de WooCommerce.
	   Se le da área de toque de 40px porque es el control más pequeño de
	   la pantalla y en un dedo es donde más errores se cometen. */
	.woocommerce-cart-form tr.cart_item .product-remove a{
		display:flex;
		align-items:center;
		justify-content:center;
		width:40px;
		height:40px;
		border-radius:50%;
		border:1px solid var(--line);
		color:var(--muted-ink);
		text-decoration:none;
		font-size:1.15rem;
		line-height:1;
	}
	.woocommerce-cart-form tr.cart_item .product-remove a:hover,
	.woocommerce-cart-form tr.cart_item .product-remove a:focus-visible{
		border-color:var(--ink);
		color:var(--ink);
	}
	.woocommerce-cart-form tr.cart_item .product-name{grid-area:name;}
	.woocommerce-cart-form tr.cart_item .product-name .product-remove{
		/* El enlace también aparece dentro del nombre del producto en
		   algunas versiones. En móvil solo se deja el de la esquina. */
		display:none;
	}
	.woocommerce-cart-form tr.cart_item .product-price{
		grid-area:unit;
		font-size:.86rem;
		color:var(--muted-ink);
	}
	.woocommerce-cart-form tr.cart_item .product-price::before{
		content:"Precio unitario: ";
		font-family:var(--font-display);
		font-size:.68rem;
		font-weight:600;
		text-transform:uppercase;
		letter-spacing:.1em;
		color:var(--muted);
	}
	.woocommerce-cart-form tr.cart_item .product-quantity{
		grid-area:qty;
		text-align:left;
	}
	.woocommerce-cart-form tr.cart_item .product-quantity::before{
		content:"Cantidad";
		display:block;
		font-family:var(--font-display);
		font-size:.68rem;
		font-weight:600;
		text-transform:uppercase;
		letter-spacing:.1em;
		color:var(--muted);
		margin-bottom:5px;
	}
	.woocommerce-cart-form tr.cart_item .product-subtotal{
		grid-area:price;
		align-self:end;
		justify-self:end;
		text-align:right;
	}
	.woocommerce-cart-form tr.cart_item .product-subtotal::before{
		content:"Subtotal";
		display:block;
		font-family:var(--font-display);
		font-size:.68rem;
		font-weight:600;
		text-transform:uppercase;
		letter-spacing:.1em;
		color:var(--muted);
		margin-bottom:2px;
	}
	.woocommerce-cart-form tr.cart_item .product-subtotal .amount{
		font-weight:800;
		font-size:1.02rem;
	}
	/* La fila de la tabla de cupones y actualización es un <tr> suelto
	   con un solo <td colspan>. En móvil se pone en columna, que es como
	   se usa: campo arriba, botón abajo y a lo ancho. */
	.woocommerce-cart-form tr.actions,
	.woocommerce-cart-form tfoot tr{
		display:block;
		padding:18px 0;
	}
	.woocommerce-cart-form tr.actions > td,
	.woocommerce-cart-form tfoot tr > td{
		padding:0;
		border:0;
	}

	.woocommerce .cart-collaterals,
	.woocommerce .cart_totals{
		width:100%;
		float:none;
	}
	.woocommerce .cart-collaterals{margin-top:34px;}
	.woocommerce .cart_totals h2{
		font-size:1.15rem;
		font-weight:800;
	}
	.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button{
		width:100%;
		min-height:56px;
		display:flex;
		align-items:center;
		justify-content:center;
		font-family:var(--font-display);
		font-size:1rem;
		font-weight:800;
	}
}

/* El cupón y el botón de actualizar se apilan en una columna en móvil;
   en escritorio se quedan en la fila, que es donde se usan. */
.woocommerce .coupon{
	display:flex;
	gap:8px;
	align-items:stretch;
}
.woocommerce .coupon input.input-text{
	min-height:46px;
	padding:.5rem .75rem;
	flex:1 1 auto;
	min-width:0;
	border:1px solid var(--line);
	border-radius:var(--radius);
}
.woocommerce .coupon button.button,
.woocommerce .actions .button{
	min-height:46px;
	padding:0 20px;
	flex:0 0 auto;
	background:var(--ink);
	color:#fff;
	border:0;
	border-radius:var(--radius);
	font-family:var(--font-display);
	font-weight:700;
}
.woocommerce .coupon button.button:hover,
.woocommerce .actions .button:hover{background:var(--black);}
.woocommerce .actions .button[disabled]{
	background:var(--line);
	color:var(--muted-ink);
	cursor:not-allowed;
}

/* ==========================================================
   10. CARRITO, CHECKOUT, CUENTA Y PÁGINAS DE ENCARGO
   ==========================================================
   Lo que hay arriba viste el carrito y el checkout: la piel de la
   tabla, los campos y los botones. Lo que va debajo reorganiza las
   páginas para que se lean como un recorrido y no como una lista de
   campos.

   Las tres piezas nuevas son el hilo de pasos, el carrito vacío y la
   página de encargo de una categoría sin piezas. Los tres están
   escritos en PHP con ganchos de WooCommerce, no con plantillas
   sobreescritas: si WooCommerce actualiza cart.php, esto sigue
   funcionando. */

/* --- El hilo de pasos -------------------------------------------
   Tres pasos. El activo va con fondo ink y la nota mustards; los
   que ya se pasaron llevan el número en verde, igual que los pasos
   del configurador, para que el mismo gesto signific lo mismo en
   las dos partes de la compra. */
.ms-pasos{
	list-style:none;
	display:flex;
	align-items:stretch;
	gap:0;
	margin:0 0 34px;
	padding:0;
	border:1px solid var(--line);
	background:var(--surface);
}
.ms-paso{
	flex:1 1 0;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	min-height:56px;
	padding:0 18px;
	position:relative;
	color:var(--muted-ink);
	font-family:var(--font-display);
	font-size:.82rem;
	white-space:nowrap;
}
/* El separador entre pasos se dibuja con el ::before de cada uno, no
   con un borde, porque en el paso activo tiene que quedar tapado: un
   borde sobre fondo ink se vería como una línea atravesando el
   recuadro. */
.ms-paso + .ms-paso::before{
	content:"";
	position:absolute;
	left:0;top:0;bottom:0;
	width:1px;
	background:var(--line);
}
.ms-paso-num{
	flex-shrink:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:22px;height:22px;
	border-radius:50%;
	border:1px solid var(--line);
	font-family:var(--font-mono);
	font-size:.68rem;
	color:var(--muted-ink);
	transition:background var(--p3-dur-2) var(--p3-ease),color var(--p3-dur-2) var(--p3-ease),border-color var(--p3-dur-2) var(--p3-ease);
}
.ms-paso--activo{
	color:var(--ink);
	font-weight:700;
}
.ms-paso--activo .ms-paso-num{
	background:var(--ink);
	border-color:var(--ink);
	color:#fff;
}
.ms-paso--activo::before,
.ms-paso--activo + .ms-paso::before{background:transparent;}

@media (max-width:600px){
	/* En móvil caben tres, pero los títulos no. Se queda el número y
	   se oculta el texto: el número solo no dice nada, así que el
	   título se mantiene y lo que se acorta es el ritmo, con menos
	   relleno y sin el salto a una línea por paso. */
	.ms-paso{padding:0 10px;font-size:.72rem;}
	.ms-paso-titulo{overflow:hidden;text-overflow:ellipsis;}
}

/* --- Carrito vacío ---------------------------------------------
   WooCommerce pinta un párrafo y un enlace. Esto es una página: una
   pieza de taller vacía en el centro, el texto que explica qué
   hacer y dos salidas. */
.carrito-vacio{
	text-align:center;
	max-width:560px;
	margin:0 auto;
	padding:24px 0 8px;
}
.carrito-vacio-icono{
	color:var(--line);
	margin:0 auto 22px;
	width:80px;height:80px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--line);
	border-radius:50%;
}
.carrito-vacio-titulo{
	margin:0 0 12px;
	font-family:var(--font-editorial);
	font-weight:400;
	font-size:1.9rem;
	letter-spacing:-.015em;
}
.carrito-vacio-texto{
	margin:0 auto 26px;
	max-width:46ch;
	color:var(--muted-ink);
	line-height:1.6;
}
.carrito-vacio-acciones{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:12px;
	margin:0 0 26px;
}
.carrito-vacio-nota{
	margin:0;
	font-size:.82rem;
	color:var(--muted-ink);
	line-height:1.55;
}
.carrito-vacio-nota a{color:var(--ink);text-underline-offset:3px;}

/* --- Garantías del checkout ------------------------------------
   Tres puntos con icono y texto corto. Va dentro del bloque de pago
   y por encima del botón: es la última cosa que el cliente lee antes
   de pagar, que es justo donde conviene responder a "¿y si no me
   gusta lo que hepedido?". */
.ms-garantias{
	margin:0 0 24px;
	padding:22px 24px;
	background:var(--paper-soft);
	border-radius:var(--radius);
}
.ms-garantias-titulo{
	margin:0 0 16px;
	font-family:var(--font-display);
	font-size:.72rem;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--muted-ink);
}
.ms-garantias-lista{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	gap:14px;
}
.ms-garantia{
	display:grid;
	grid-template-columns:20px minmax(0,1fr);
	gap:12px;
	align-items:start;
}
.ms-garantia-icono{
	stroke:var(--clay);
	margin-top:2px;
}
.ms-garantia-titulo{
	display:block;
	font-family:var(--font-display);
	font-weight:700;
	font-size:.88rem;
	line-height:1.35;
	color:var(--ink);
}
.ms-garantia-texto{
	display:block;
	margin-top:3px;
	font-size:.82rem;
	line-height:1.5;
	color:var(--muted-ink);
}
.ms-garantias-plazo{
	margin:18px 0 0;
	padding-top:16px;
	border-top:1px solid var(--line);
	font-family:var(--font-mono);
	font-size:.72rem;
	letter-spacing:.04em;
	color:var(--muted-ink);
}

/* --- Pedido recibido ------------------------------------------- */
.ms-recibido{
	margin:26px 0 0;
	padding:26px 28px;
	background:var(--paper-soft);
	border-radius:var(--radius);
}
.ms-recibido-lead{
	margin:0 0 22px;
	font-size:1rem;
	line-height:1.6;
	color:var(--ink);
	max-width:60ch;
}
.ms-recibido-sub{
	margin:0 0 14px;
	font-family:var(--font-display);
	font-size:.72rem;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--muted-ink);
}
.ms-recibido-lista{
	list-style:none;
	margin:0 0 24px;
	padding:0;
	display:grid;
	gap:14px;
}
.ms-recibido-linea{
	padding:16px 18px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
}
.ms-recibido-nombre{
	display:block;
	margin:0 0 10px;
	font-family:var(--font-display);
	font-weight:700;
	font-size:.94rem;
}
.ms-recibido-datos{
	margin:0;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
	gap:10px 18px;
}
.ms-recibido-dato dt{
	font-family:var(--font-mono);
	font-size:.62rem;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--muted);
	margin-bottom:2px;
}
.ms-recibido-dato dd{
	margin:0;
	font-family:var(--font-mono);
	font-size:.86rem;
	color:var(--ink);
}
.ms-recibido-acciones{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
}

/* La configuración que se imprime en la página de pedido va también
   junto a cada pedido de "Mi cuenta". */
.ms-cuenta-config{
	margin:4px 0 0;
	font-family:var(--font-mono);
	font-size:.76rem;
	color:var(--muted-ink);
}

/* --- Página de encargo ----------------------------------------
   Lo que se ve al pulsar una categoría que el taller todavía no
   tiene publicada. El sitio miente si aquí pone "no hay productos":
   los hay, se hacen a medida. */
.bajo-pedido{
	max-width:900px;
	margin:0 auto;
	padding:8px 0 0;
}
.bajo-pedido-head{
	text-align:center;
	max-width:64ch;
	margin:0 auto 44px;
}
.bajo-pedido-eyebrow{
	margin:0 0 14px;
	font-family:var(--font-mono);
	font-size:.68rem;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--mustard-ink);
}
.bajo-pedido-title{
	margin:0 0 16px;
	font-family:var(--font-editorial);
	font-weight:400;
	font-size:2.1rem;
	line-height:1.1;
	letter-spacing:-.015em;
}
.bajo-pedido-lead{
	margin:0 auto;
	font-size:1.02rem;
	line-height:1.65;
	color:var(--muted-ink);
}

.bajo-pedido-opciones{
	display:grid;
	gap:28px;
	margin:0 0 40px;
}
@media (min-width:760px){
	.bajo-pedido-opciones{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
}
.bajo-pedido-bloque{
	padding:24px 26px;
	background:var(--paper-soft);
	border-radius:var(--radius);
}
.bajo-pedido-sub{
	margin:0 0 16px;
	font-family:var(--font-display);
	font-size:.7rem;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--muted-ink);
}
.bajo-pedido-lista{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	gap:2px;
}
.bajo-pedido-lista a{
	display:flex;
	flex-direction:column;
	gap:2px;
	padding:10px 12px;
	margin:0 -12px;
	border-radius:var(--radius);
	color:var(--ink);
	text-decoration:none;
	transition:background var(--p3-dur-2) var(--p3-ease);
}
.bajo-pedido-lista a:hover{background:var(--surface);}
.bajo-pedido-lista strong{font-family:var(--font-display);font-weight:700;font-size:.94rem;}
.bajo-pedido-lista span{font-size:.8rem;color:var(--muted-ink);line-height:1.45;}
/* Las piezas que sí hay llevan la cuenta detrás. */
.bajo-pedido-lista--piezas a{
	flex-direction:row;
	align-items:baseline;
	justify-content:space-between;
	gap:14px;
}
.bajo-pedido-lista--piezas span{
	flex-shrink:0;
	font-family:var(--font-mono);
	font-size:.66rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--green);
}

.bajo-pedido-cta{
	text-align:center;
	padding:32px 26px;
	border:1px solid var(--ink);
	border-radius:var(--radius);
	margin:0 0 40px;
}
.bajo-pedido-cta-texto{
	margin:0 0 20px;
	font-size:1rem;
	color:var(--ink);
}
.bajo-pedido-botones{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:12px;
}

.bajo-pedido-resto{
	padding-top:28px;
	border-top:1px solid var(--line);
}
.bajo-pedido-resto-titulo{
	display:block;
	margin:0 0 14px;
	font-family:var(--font-mono);
	font-size:.66rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted);
}
.bajo-pedido-resto ul{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	gap:8px 10px;
}
.bajo-pedido-resto a{
	display:inline-block;
	padding:7px 14px;
	border:1px solid var(--line);
	border-radius:40px;
	font-family:var(--font-mono);
	font-size:.7rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ink);
	text-decoration:none;
	transition:border-color var(--p3-dur-2) var(--p3-ease),background var(--p3-dur-2) var(--p3-ease);
}
.bajo-pedido-resto a:hover{border-color:var(--ink);background:var(--paper-soft);}

/* ==========================================================
   FICHA — PRECIO DE REFERENCIA Y FICHA TÉCNICA
   ==========================================================
   El precio "Desde $X" lo imprime el tema en el hueco que WooCommerce
   deja cuando un configurable no tiene _price fija (ver
   maderia_theme_precio_referencia en inc/phase3.php). El texto sale del
   plugin, con su formato, así que aquí solo se le da el cuerpo de la
   ficha: en la misma familia y el mismo tamaño que el precio de un
   producto normal, para que las dos fichas se lean igual.
   Se distingue con el "Desde" en versalitas delante, porque un número
   solo, sin ese prefijo, parece el precio cerrado de la pieza. */
.pw-price-desde{
	margin:0 0 20px;
	font-family:var(--font-display);
	font-size:1.4rem;
	font-weight:800;
	line-height:1.2;
	color:var(--ink);
}
.pw-price-desde .price{
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	color:inherit;
}
.pw-price-desde del,
.pw-price-desde ins{
	text-decoration:none;
}
.pw-price-desde del{
	color:var(--muted-ink);
	font-weight:400;
	margin-right:8px;
}

/* Ficha técnica.
   La descripción larga de un producto simple llega como líneas sueltas
   con el patrón "Etiqueta: valor". Puestas en párrafos se leen como un
   bloque en el que no se distingue qué es el dato y qué es el nombre.
   En una <dl> cada fila es un dato: la etiqueta encima en versalitas
   y oscuras, el valor debajo en el cuerpo del texto. La fila entera
   es pulsable para la tecnofanía? No: aquí no, la ficha es de lectura.
   Ancho máximo para que la etiqueta y su valor no queden separados por
   un mar de espacio en pantallas anchas. */
.ficha-tecnica{
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
	gap:0;
	border-top:1px solid var(--line);
}
.ficha-tecnica-fila{
	padding:14px 18px 14px 0;
	border-bottom:1px solid var(--line);
	min-width:0;
}
.ficha-tecnica dt{
	font-family:var(--font-mono);
	font-size:.68rem;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.1em;
	color:var(--muted-ink);
	margin:0 0 5px;
}
.ficha-tecnica dd{
	margin:0;
	font-size:.95rem;
	line-height:1.45;
	color:var(--ink);
	overflow-wrap:anywhere;
}
@media (max-width:600px){
	.ficha-tecnica{grid-template-columns:1fr;}
}

/* La línea verde de plazo de la tarjeta.
   Cuando el plazo no es un número sino la frase del taller ("Por
   confirmar con el taller"), se pinta en el ocre y no en verde: en
   verde con el check al lado la tarjeta parecía un producto disponible
   cuando lo que dice es que el taller aún no ha dado una fecha. */
.card-lead--por-confirmar{
	color:var(--mustard-deep);
}