/**
 * WooCommerce vestido con MDB.
 *
 * WooCommerce pinta sus campos con tres marcados distintos y ninguno es el de
 * MDB, así que por defecto la tienda parece de otro sitio web:
 *
 *   1 · Bloques (carrito y pago)     .wc-block-components-text-input
 *       Ya trae la etiqueta flotante y el orden que MDB quiere —input y luego
 *       label—, así que aquí solo hay que vestirlo con los tokens del tema.
 *
 *   2 · Clásico (Mi cuenta, reseñas)  input.input-text, o campos sin clase
 *       Etiqueta ANTES del input y sin envoltorio. A esto lo convierte
 *       assets/js/owari-formularios.js en un .form-outline de verdad; lo de
 *       aquí es el respaldo para cuando no hay JavaScript.
 *
 *   3 · Controles de tienda           select.orderby, input.qty
 *
 * Regla 2 del proyecto: ni un color escrito a mano. Todo sale de --mdb-*, y por
 * eso esto se pone oscuro solo cuando el resto del sitio lo hace.
 *
 * 1 · Respaldo de los campos clásicos
 * 2 · Campos de los bloques
 * 2b · Campos ya convertidos a MDB
 * 2b bis · Modo «etiqueta encima del campo»
 * 2c · Desplegables con etiqueta flotante
 * 2d · El espejo de los desplegables de React
 * 3 · Casillas, radios y selects
 * 4 · Botones
 * 5 · Avisos
 */

/* ──────────────────────── 1 · Respaldo de los campos clásicos ── */

/*
 * Va todo en :where() a propósito: especificidad cero. Cuando el JavaScript
 * convierte el campo en un .form-outline, las reglas de MDB ganan sin pelear y
 * sin un solo !important. Y si el JavaScript no llega a correr, esto ya deja el
 * campo presentable.
 */
.woocommerce :where(
	input.input-text,
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	input[type="date"],
	textarea,
	select
),
:where(.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea) {
	background-color: transparent;
	color: var(--mdb-body-color);
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
	padding: calc(var(--owari-campo-relleno-y, 0.32rem) + 0.23rem) 0.75rem;
	line-height: 1.5;
	width: 100%;
	transition: border-color 0.2s linear, box-shadow 0.2s linear;
}

.woocommerce :where(input, textarea, select):focus,
:where(.comment-form input, .comment-form textarea):focus {
	border-color: var(--mdb-primary);
	box-shadow: inset 0 0 0 1px var(--mdb-primary);
	outline: none;
}

.woocommerce :where(input, textarea)::placeholder {
	color: var(--mdb-tertiary-color);
}

/* La etiqueta de un campo clásico, mientras no la absorba el .form-outline. */
.woocommerce :where(.form-row > label, .woocommerce-form-row > label),
:where(.comment-form > p > label) {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--mdb-secondary-color);
	font-size: 0.875rem;
}

/* El asterisco de obligatorio, en el color de peligro y no en rojo a mano. */
.woocommerce .required,
.woocommerce abbr.required {
	color: var(--mdb-danger);
	border: none;
	text-decoration: none;
}

/*
 * El ojo de «mostrar contraseña». Se ancla a los dos padres posibles: el span
 * de WooCommerce mientras el campo no se ha convertido, y el .form-outline
 * después, porque al convertirlo ese span se absorbe y desaparece.
 */
.woocommerce .password-input {
	display: block;
	position: relative;
}

.woocommerce .show-password-input,
.form-outline > .show-password-input {
	position: absolute;
	top: 50%;
	inset-inline-end: 0.75rem;
	transform: translateY(-50%);
	color: var(--mdb-secondary-color);
	background: none;
	border: none;
	cursor: pointer;
	z-index: 2;
}

/* ─────────────────────────────── 2 · Campos de los bloques ── */

/*
 * El campo de los bloques ya se comporta como un .form-outline: la etiqueta
 * sube al escribir. Solo hay que darle los colores y el trazo del tema, porque
 * de fábrica trae los suyos —fondo blanco fijo incluido— y en tema oscuro
 * aparece una caja blanca en medio de la página.
 *
 * La clase repetida y el `body` no son adorno. WooCommerce escribe estas reglas
 * así:
 *
 *     .wc-block-components-form .wc-block-components-text-input input[type=email]
 *
 * que puntúa (0,3,1). Poner solo `body` delante da (0,2,2) y PIERDE, porque en
 * especificidad tres clases mandan sobre dos clases y dos elementos: fue el
 * primer intento y los campos se quedaron blancos. Repitiendo la clase se llega
 * a (0,3,2) y se gana, sin depender de que `.wc-block-components-form` sea
 * antepasado —en el carrito no siempre lo es— ni de quién cargue el último:
 * WooCommerce reparte estas declaraciones entre packages-style.css y un
 * checkout.css que se inyecta cuando le toca.
 *
 * Es esto o un !important, y esto se puede seguir sobrescribiendo desde fuera.
 */
body .wc-block-components-text-input.wc-block-components-text-input input[type="text"],
body .wc-block-components-text-input.wc-block-components-text-input input[type="email"],
body .wc-block-components-text-input.wc-block-components-text-input input[type="tel"],
body .wc-block-components-text-input.wc-block-components-text-input input[type="number"],
body .wc-block-components-text-input.wc-block-components-text-input input[type="password"],
body .wc-block-components-textarea.wc-block-components-textarea {
	background-color: transparent;
	color: var(--mdb-body-color);
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
	transition: border-color 0.2s linear, box-shadow 0.2s linear;
	/* Las medidas van aparte, más abajo: hacen falta a la fuerza. */
}

/*
 * Las medidas, y aquí sí con `!important`. Explicación, porque va contra la
 * regla 2 del proyecto y no es por pereza.
 *
 * WooCommerce no declara la altura de estos campos una vez: la repite en cuatro
 * selectores cada vez más específicos, todos con los mismos 50 px y 24 px de
 * relleno superior.
 *
 *   .wc-block-components-form .wc-block-components-text-input input[type=text]
 *   …​.wc-block-components-text-input.is-active input[type=text]
 *   …​.wc-block-components-text-input.is-active input[type=text]:focus   ← (0,5,1)
 *   …​.wc-block-components-text-input input:-webkit-autofill
 *
 * Se fueron tapando de uno en uno y cada vez aparecía el siguiente: el campo se
 * veía bien hasta que alguien lo activaba, y luego hasta que lo enfocaba. Para
 * ganarle al cuarto por especificidad hay que repetir la clase cinco veces, y
 * eso se rompe otra vez el día que WooCommerce añada un quinto escalón.
 *
 * Un `!important` en un selector sencillo y sin estados los cubre todos de una,
 * se lee de un vistazo y se puede seguir sobrescribiendo desde fuera con otro
 * `!important`. Es la opción honesta.
 *
 * Solo las tres propiedades que WooCommerce insiste en redeclarar. Todo lo
 * demás —color, borde, fondo— gana por especificidad normal, arriba.
 */
body .wc-block-components-text-input input,
body .wc-block-components-text-input textarea {
	height: auto !important;
	min-height: auto !important;
	/* Copiado de `.form-outline .form-control` de MDB, para que un campo y un
	   desplegable midan lo mismo puestos uno al lado del otro. */
	padding: var(--owari-campo-relleno-y, 0.32rem) var(--owari-campo-relleno-x, 0.75rem) !important;
	line-height: 1.6;
}

body .wc-block-components-text-input.wc-block-components-text-input input:focus,
body .wc-block-components-textarea.wc-block-components-textarea:focus {
	border-color: var(--mdb-primary);
	box-shadow: inset 0 0 0 1px var(--mdb-primary);
	outline: none;
}

/*
 * La etiqueta la coloca el tema, las dos posiciones.
 *
 * WooCommerce la sitúa con números pensados para un campo de 50 px: en reposo a
 * 6 px del borde superior y flotada a 14 px. Al bajar el campo a la altura de
 * MDB —38 px— esos dos valores caen DENTRO de la caja, y la etiqueta se ve
 * escrita encima del texto en vez de sobre el trazo.
 *
 * No se corrige el desfase con un número nuevo, que volvería a romperse a la
 * siguiente versión: se define el comportamiento entero, que es el de MDB.
 * Reposo, centrada dentro; activa, a caballo del borde y reducida.
 */
body .wc-block-components-text-input label {
	position: absolute;
	margin: 0;
	padding: 0;
	max-width: calc(100% - 1.5rem);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--mdb-secondary-color);
	font-size: 1rem;
	line-height: 1;
	transition: all 0.2s ease-out;
	pointer-events: none;

	/*
	 * La posición va con `!important` por lo mismo que las medidas del campo:
	 * WooCommerce la reparte por la misma escalera de selectores —base,
	 * `.is-active`, `:focus`— con números calculados para un campo de 50 px. Al
	 * bajarlo a la altura de MDB, todos ellos caen dentro de la caja.
	 *
	 * El origen a la izquierda y al medio: así, al reducirse, la etiqueta no se
	 * despega del borde ni se descuadra respecto al texto del campo.
	 */
	top: 50% !important;
	left: 0.75rem !important;
	transform: translateY(-50%) !important;
	transform-origin: 0 50%;
}

/*
 * Cuando la etiqueta sube se queda a caballo del borde, y necesita el fondo de
 * la página detrás para tapar la línea.
 *
 * Aquí NO vale `input:not(:placeholder-shown)`, aunque sea el truco de siempre:
 * estos campos no llevan atributo `placeholder`, y un input sin placeholder
 * cumple `:not(:placeholder-shown)` aun estando vacío. Con eso, TODAS las
 * etiquetas se pintaban como flotadas mientras seguían en su sitio de reposo:
 * un recuadro de color cruzando cada campo.
 *
 * Se usa `.is-active`, que es la clase que WooCommerce pone al contenedor
 * cuando el campo tiene foco o contenido. Es su propio criterio, así que
 * siempre coincide con lo que se está viendo.
 */

/*
 * Autocompletar de Chrome pinta el campo de amarillo por su cuenta, desde el
 * navegador y no desde ninguna hoja. La única forma de taparlo es una sombra
 * interior que cubra toda la caja; el color del texto también hay que forzarlo
 * aparte, porque el normal no le llega.
 */
body .wc-block-components-text-input input:-webkit-autofill,
body .wc-block-components-text-input input:-webkit-autofill:hover,
body .wc-block-components-text-input input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--mdb-body-color);
	box-shadow: 0 0 0 100vh var(--mdb-body-bg) inset;
}

body .wc-block-components-text-input input:-webkit-autofill + label,
body .wc-block-components-text-input.is-active label {
	padding-inline: 0.25rem;
	background-color: var(--mdb-body-bg);
	color: var(--mdb-primary);

	/*
	 * Flotada: a caballo del borde superior y reducida, como en MDB. Lleva
	 * `!important` por lo mismo que la regla de reposo; entre reglas propias
	 * decide la especificidad, y esta es la más específica de las dos.
	 */
	top: 0 !important;
	/* 0.25rem menos por la izquierda para compensar el relleno que se le acaba
	   de añadir: así el texto de la etiqueta sigue alineado con el del campo. */
	left: 0.5rem !important;
	transform: translateY(-50%) scale(0.8) !important;
}

/* ─────────── 2b bis · Modo «etiqueta encima del campo» ── */

/*
 * Cuando el Personalizador pone las etiquetas encima, estos campos tambien.
 *
 * Van AQUI y no en tema.css por una razon de orden: las reglas de etiqueta
 * flotada de arriba son de este archivo y puntuan (0,3,2). Desde tema.css —que
 * carga antes— habria que subir a (0,4,x) repitiendo clases; desde este mismo
 * archivo basta con ir despues, que es mas facil de leer y de mantener.
 *
 * El campo gana relleno arriba para hacerle sitio a la etiqueta, que baja al
 * borde superior del contenedor y recupera su tamano y su color normales.
 */
body.owari-etiquetas-normal .wc-block-components-text-input {
	position: relative;
	padding-top: 1.4rem;
}

body.owari-etiquetas-normal .wc-block-components-text-input label,
body.owari-etiquetas-normal .wc-block-components-text-input.is-active label {
	top: 0 !important;
	left: 0 !important;
	transform: none !important;
	background: none !important;
	padding: 0 !important;
	color: var(--mdb-secondary-color);
	font-size: 0.875rem;
}

/* El desplegable de los bloques no pasa por MDB: su etiqueta ya estaba subida
   a la linea del borde, y aqui vuelve al flujo como las demas. */
body.owari-etiquetas-normal .wc-blocks-components-select .wc-blocks-components-select__container {
	padding-top: 1.4rem;
}

body.owari-etiquetas-normal .wc-blocks-components-select .wc-blocks-components-select__label {
	top: 0 !important;
	inset-inline-start: 0 !important;
	transform: none !important;
	background: none !important;
	padding: 0 !important;
	font-size: 0.875rem;
}

/* ──────────────── 2c · Los desplegables también flotan ── */

/*
 * Un <select> siempre tiene un valor elegido, así que su etiqueta no tiene un
 * estado «en reposo»: nace arriba y se queda arriba. Eso es lo correcto en
 * Material y es lo que hace que un desplegable no desentone al lado de un campo
 * de texto con la etiqueta flotada.
 *
 * WooCommerce la pinta encima, en el flujo, como una etiqueta de toda la vida.
 * Se sube a la línea del borde sin tocar el marcado: el <select> sigue siendo el
 * nativo, que es justo lo que hay que respetar para no romper la sincronía de
 * país y provincia.
 */
body .wc-blocks-components-select .wc-blocks-components-select__container {
	position: relative;
}

body .wc-blocks-components-select .wc-blocks-components-select__label {
	position: absolute;
	top: 0;
	inset-inline-start: 0.75rem;
	z-index: 1;
	margin: 0;
	padding-inline: 0.25rem;
	background-color: var(--mdb-body-bg);
	color: var(--mdb-secondary-color);
	font-size: 0.8rem;
	line-height: 1;
	transform: translateY(-50%);
	pointer-events: none;
	max-width: calc(100% - 2.5rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La etiqueta va delante del <select>, así que no hay selector de hermanos que
   valga: el foco se detecta en el contenedor. */
body .wc-blocks-components-select .wc-blocks-components-select__container:focus-within .wc-blocks-components-select__label {
	color: var(--mdb-primary);
}

body .wc-blocks-components-select .wc-blocks-components-select__container:focus-within .wc-blocks-components-select__select {
	border-color: var(--mdb-primary);
	box-shadow: inset 0 0 0 1px var(--mdb-primary);
	outline: none;
}

/* ─────────────── 2b · Campos que ya se convirtieron a MDB ── */

/*
 * Cuando owari-formularios.js convierte un campo clásico, el borde deja de ser
 * del input y pasa a ser la muesca que dibuja MDB. Pero las reglas de
 * WooCommerce son más específicas que las de MDB y le siguen poniendo su fondo
 * blanco y su borde encima: el resultado es un doble trazo y una caja blanca en
 * tema oscuro.
 *
 * Se le quitan los dos al input, que es lo que MDB espera de un .form-control
 * dentro de un .form-outline.
 */
body .form-outline.form-outline .form-control.form-control,
body .form-outline.form-outline .form-control.form-control:focus {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: inherit;

	/*
	 * El relleno tambien. Y ojo al contar: woocommerce-blocktheme.css -la hoja
	 * de compatibilidad de WooCommerce con temas de bloques- lo fija en 0.9rem
	 * con `.woocommerce-page form .form-row input.input-text`, que son 3 clases
	 * y DOS elementos: (0,3,2). `.form-control` es una clase, no un elemento, asi
	 * que con `body` delante esto solo llegaba a (0,3,1) y perdia. Repitiendola
	 * se llega a (0,4,1) y se gana sin depender del orden de carga.
	 */
	padding: var(--owari-campo-relleno-y, 0.32rem) var(--owari-campo-relleno-x, 0.75rem);
	/* WooCommerce impone `line-height: normal` con (0,3,2); sin esto un campo
	   convertido queda mas bajo que uno de bloque teniendo el mismo relleno. */
	line-height: 1.6;

	/*
	 * Y el tamano de la letra, de la misma escalera y por el mismo sitio.
	 *
	 * En esa regla de `woocommerce-blocktheme.css` no va solo el relleno: va
	 * tambien `font-size: var(--wp--preset--font-size--small)`, que son trece
	 * pixeles. Se le tapo el relleno y se le paso por alto el tamano, y el
	 * resultado se veia en «Mi cuenta»: se escribia a trece mientras la etiqueta
	 * flotante seguia a dieciseis, asi que en reposo el rotulo salia mas grande
	 * que el texto que iba debajo, y el campo entero medida treinta y un pixeles
	 * contra los cuarenta y tres de un campo de bloque.
	 *
	 * Un rem es lo que MDB le da a `.form-control`: aqui no se inventa una
	 * medida, se le devuelve la suya.
	 */
	font-size: 1rem;
}

/* ──────────────────────── 3 · Casillas, radios y selects ── */

/*
 * Los selects se dejan nativos a propósito. MDB tiene su componente Select, pero
 * WooCommerce ata país y provincia con su propio JavaScript y sustituir el
 * <select> por un desplegable pintado rompe esa sincronía. Se viste, no se
 * reemplaza.
 */
/*
 * `appearance: none` tiene que ganar sí o sí, y por eso va con la misma
 * especificidad que el resto y no en una regla suelta. Con el aspecto nativo
 * puesto, el navegador pinta el control del sistema —blanco— por mucho que el
 * `background-color` sea transparente: se veían dos cajas blancas en medio de
 * un formulario oscuro mientras los campos de texto ya estaban bien.
 */
body .woocommerce select,
body .wc-blocks-components-select .wc-blocks-components-select__select,
body select.orderby {
	appearance: none;
	background-color: transparent;
	color: var(--mdb-body-color);
}

/*
 * La flecha, con cuidado de no pintar dos.
 *
 * Los desplegables de los bloques YA traen la suya: un <svg> de verdad, hermano
 * del <select>, no un fondo. Dibujarles otra con gradientes deja las dos
 * superpuestas y sale un garabato. A esos solo se les da color.
 */
body .wc-blocks-components-select .wc-blocks-components-select__expand {
	fill: var(--mdb-secondary-color);
}

body .wc-blocks-components-select .wc-blocks-components-select__container:focus-within .wc-blocks-components-select__expand {
	fill: var(--mdb-primary);
}

/*
 * Los clásicos sí necesitan flecha propia, pero solo mientras sigan siendo
 * nativos. En cuanto MDB se queda con uno le pone la clase `select-initialized`
 * y dibuja la suya: sin este `:not()` volveríamos a tener dos.
 */
body .woocommerce select:not(.select-initialized),
body select.orderby:not(.select-initialized) {
	background-image: linear-gradient(45deg, transparent 50%, var(--mdb-secondary-color) 50%),
		linear-gradient(135deg, var(--mdb-secondary-color) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-inline-end: 2rem;
}

body .wc-blocks-components-select .wc-blocks-components-select__select {
	background-color: transparent;
	color: var(--mdb-body-color);
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
}

.wc-blocks-components-select__label {
	color: var(--mdb-secondary-color);
}

/* Las opciones las pinta el sistema: sin un color explícito, en tema oscuro
   salen texto claro sobre fondo claro en varios navegadores. */
.woocommerce select option,
.wc-blocks-components-select__select option {
	background-color: var(--mdb-body-bg);
	color: var(--mdb-body-color);
}

/* Casillas y radios con el acento del tema. */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.wc-block-components-checkbox__input {
	accent-color: var(--mdb-primary);
	width: auto;
}

.wc-block-components-checkbox__label {
	color: var(--mdb-body-color);
}

/* ────────────────────────────────────────── 4 · Botones ── */

/*
 * Los botones de los bloques ya salen con .wp-block-button__link y los viste
 * theme.json. Los que quedan son los del WooCommerce clásico.
 */
.woocommerce :where(a.button, button.button, input.button, .wc-block-components-button) {
	background-color: var(--mdb-primary);
	color: var(--owari-sobre-primary, #fff);
	border: none;
	font-size: 0.8125rem;
	font-weight: 500;
	transition: box-shadow 0.2s linear, background-color 0.2s linear;

	/*
	 * Los mismos tokens que theme.json le da a los botones de bloque. Sin esto,
	 * esta regla —que es mas especifica que la de theme.json— se comia lo que
	 * eligiera el Personalizador y los botones clasicos de WooCommerce se
	 * quedaban con la forma de fabrica mientras el resto del sitio cambiaba.
	 */
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius));
	padding: var(--owari-boton-relleno-y, 0.625rem) 1.5rem;
	letter-spacing: var(--owari-boton-espaciado, 0.06em);
	text-transform: var(--owari-boton-mayusculas, uppercase);
	box-shadow: var(--owari-boton-sombra, var(--wp--preset--shadow--nivel-1));
}

.woocommerce :where(a.button, button.button, input.button, .wc-block-components-button):hover {
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/* El botón secundario de WooCommerce, en versión contorno. */
.woocommerce :where(.button.alt ~ .button, a.button.wc-forward.wc-block-components-button--outlined) {
	background-color: transparent;
	/* El primario COMO TEXTO, no como fondo: tiene que leerse sobre la pagina,
	   y eso depende de si esta en claro o en oscuro. */
	color: var(--owari-primario-texto, var(--mdb-primary));
	border: 2px solid currentColor;
	box-shadow: none;
}

/* ─────────────────────────────────────────── 5 · Avisos ── */

/*
 * Los mensajes de WooCommerce traen su verde y su rojo de fábrica. Se pasan a
 * los tonos del tema para que en oscuro no aparezca una banda clara.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--mdb-border-radius);
	border: 1px solid var(--mdb-border-color);
	border-inline-start-width: 4px;
	background-color: var(--mdb-tertiary-bg);
	color: var(--mdb-body-color);
	padding: 0.9rem 1rem;
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-inline-start-color: var(--mdb-success);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	border-inline-start-color: var(--mdb-info);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-inline-start-color: var(--mdb-danger);
}

/* El mensaje de error de un campo concreto, debajo del campo. */
.woocommerce-error li,
.wc-block-components-validation-error {
	color: var(--mdb-danger);
}

/* Las tablas de la tienda —carrito, pedidos, direcciones— con el borde del
   tema en vez del gris de fábrica. */
.woocommerce table:where(.shop_table, .shop_attributes, .woocommerce-orders-table) {
	border-collapse: collapse;
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
}

.woocommerce table:where(.shop_table, .shop_attributes, .woocommerce-orders-table) :where(th, td) {
	border-color: var(--mdb-border-color);
}

/* ─────────────── 2d · El espejo de los desplegables de React ── */

/*
 * En el carrito y el pago, MDB no puede tomar el <select> de React —lo movería
 * de sitio y React acabaría llamando a removeChild sobre un padre que ya no lo
 * es—. El tema monta un <select> espejo al lado y sincroniza los dos; el
 * original se queda donde estaba, escondido.
 *
 * Se oculta el contenedor del campo, NO el bloque entero: los mensajes de error
 * de validación son hermanos suyos y tienen que seguir viéndose.
 */
.wc-blocks-components-select__container[data-owari-espejo] {
	display: none;
}

.owari-select {
	position: relative;
	width: 100%;
}

/*
 * El espejo nunca se ve: quien se ve es el desplegable que MDB dibuja a partir
 * de él. Pero tiene que seguir en el flujo y ser medible, porque MDB calcula el
 * ancho de su menú a partir del control. `visibility: hidden` no vale por lo
 * mismo que no vale `display: none`.
 */
.owari-select .owari-select-espejo {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
}

/* ─────────── 6 · La puntuación de una reseña ── */

/*
 * Son estrellas, no un desplegable.
 *
 * WooCommerce esconde su <select> y pinta cinco estrellas encima. El
 * convertidor de campos del tema tiene ese select en su lista de exclusiones:
 * envolverlo lo movía dentro del componente de MDB y las estrellas se quedaban
 * fuera de sitio.
 *
 * Aquí solo va la respiración. El color ya lo heredan del primario y el dibujo
 * lo pone la fuente de WooCommerce.
 */
.comment-form-rating {
	margin-bottom: 1.75rem;
}

.comment-form-rating label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--pequeno, 0.875rem);
	color: var(--mdb-secondary-color);
}

/* El párrafo de las estrellas trae margen de WooCommerce; aquí sobra. */
.comment-form-rating .stars {
	margin: 0;
}

/* ────────────────────────────────── Favoritos ── */

/*
 * El corazón, en la esquina de la foto.
 *
 * La foto del producto va envuelta para que el botón tenga contra qué
 * posicionarse: el bloque de la imagen no deja meter nada dentro, así que el
 * envoltorio lo pone PHP alrededor.
 */
.owari-ficha-foto {
	position: relative;
}

.owari-favorito {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: var(--mdb-secondary-color);
	background-color: var(--mdb-body-bg);
	border: 0;
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius-pill));
	box-shadow: var(--wp--preset--shadow--nivel-2);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

/*
 * El icono es un SVG y va en bloque.
 *
 * En línea se apoyaría en la línea base de un renglón que no existe, y dejaría
 * unos píxeles muertos debajo que descentran el corazón dentro del círculo. Con
 * `display: block` el reparto flexible lo centra de verdad.
 */
.owari-favorito__icono {
	display: block;
}

.owari-favorito:hover,
.owari-favorito:focus-visible {
	transform: scale(1.08);
}

/*
 * Marcado: círculo rojo y corazón blanco, como en el modelo.
 *
 * El corazón está relleno en los dos estados —lo que cambia es el color, no la
 * forma—: un contorno y un relleno no pesan lo mismo y al marcarlo parecía que
 * el icono cambiaba de tamaño.
 */
.owari-favorito--marcado {
	color: var(--mdb-body-bg);
	background-color: var(--mdb-danger);
}

/*
 * El corazón de la cabecera, con su cuenta y su panel.
 *
 * Mismo tamaño y misma altura que el carrito de al lado: dos iconos hermanos
 * que no coinciden se ven como un error de montaje.
 */
.owari-favs {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}

.owari-favs__boton {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/*
 * La cuenta, como la del carrito: una pastilla pequeña en la esquina.
 *
 * Con `min-width` y no un ancho fijo, para que un 12 no salga cortado.
 */
.owari-favs__cuenta {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.3rem;
	color: var(--mdb-body-bg);
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1;
	background-color: var(--mdb-danger);
	border-radius: 10rem;
}

.owari-favs__vacio {
	margin: 0;
	padding: 1.25rem 0.75rem;
	color: var(--mdb-secondary-color);
	text-align: center;
}

.owari-favs__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.owari-favs__fila {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	border-bottom: 1px solid var(--mdb-border-color);
}

.owari-favs__fila:last-child {
	border-bottom: 0;
}

.owari-favs__enlace {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.owari-favs__enlace img,
.owari-favs__sinfoto {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	background-color: var(--mdb-tertiary-bg);
	border-radius: var(--mdb-border-radius);
}

.owari-favs__datos {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.owari-favs__nombre {
	overflow: hidden;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.owari-favs__precio {
	color: var(--mdb-secondary-color);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* El aspa de quitar: discreta hasta que se busca. */
/* La misma palabra y el mismo aspecto que en el carrito: quitar algo de una
 * lista se hace igual en los dos paneles, y un aspa de veinte píxeles es un
 * blanco pequeño para algo que no se deshace. */
.owari-favs__quitar {
	flex: 0 0 auto;
	padding: 0;
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
	font-size: 0.8125rem;
	line-height: 1.4;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.2s ease;
}

.owari-favs__quitar:hover,
.owari-favs__quitar:focus-visible {
	color: var(--mdb-danger);
	text-decoration: underline;
}


/*
 * El corazón responde al pasar por encima, en los dos sitios.
 *
 * Un botón que no acusa el cursor parece un adorno. El de la ficha se tiñe del
 * rojo que va a tomar al marcarlo —enseña lo que va a pasar antes de que pase—,
 * y el del menú hace lo mismo.
 */
.owari-favorito:hover,
.owari-favorito:focus-visible {
	color: var(--mdb-danger);
}

/* Ya marcado, el corazón es blanco: al pasar por encima se oscurece el círculo. */
.owari-favorito--marcado:hover,
.owari-favorito--marcado:focus-visible {
	color: var(--mdb-body-bg);
	background-color: color-mix(in srgb, var(--mdb-danger) 82%, black);
}

.owari-favs__boton {
	transition: color 0.2s ease, transform 0.15s ease;
}

.owari-favs__boton:hover,
.owari-favs__boton:focus-visible {
	color: var(--mdb-danger);
	transform: scale(1.06);
}

/*
 * El lateral de favoritos.
 *
 * Igual que el del carrito y por la misma razón: enseña lo que llevas guardado
 * sin sacarte de donde estás, y desde ahí se puede pasar al carrito. Un panelito
 * colgando del icono se queda pequeño en cuanto hay cuatro cosas dentro.
 */
.owari-favs__velo {
	position: fixed;
	inset: 0;
	z-index: 1040;
	background-color: rgba(0, 0, 0, 0.4);
}

.owari-favs__panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1045;
	display: flex;
	flex-direction: column;
	width: min(24rem, 100vw);
	background-color: var(--mdb-body-bg);
	box-shadow: var(--wp--preset--shadow--nivel-3);
}

/* El sangrado de los lados es 1rem y no 1,25: es el que deja el título justo
 * encima de la primera foto, porque el cuerpo pone medio rem y la fila otro
 * medio. Con 1,25 el título empezaba cuatro píxeles antes que la columna de
 * fotos, que es de esas diferencias que no se saben nombrar pero se ven. */
.owari-favs__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	border-bottom: 1px solid var(--mdb-border-color);
}

.owari-favs__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--medio);
}

.owari-favs__cerrar {
	padding: 0.25rem 0.6rem;
	color: var(--mdb-secondary-color);
	font-size: 1.6rem;
	line-height: 1;
	background: none;
	border: 0;
	cursor: pointer;
}

.owari-favs__cerrar:hover,
.owari-favs__cerrar:focus-visible {
	color: var(--mdb-body-color);
}

/* El cuerpo se desplaza solo: la cabecera se queda a la vista. */
.owari-favs__cuerpo {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.5rem;
}

/* Con el lateral abierto, la página de detrás no se mueve. */
.owari-favs-abierto {
	overflow: hidden;
}

/*
 * Cada fila: foto, datos, y debajo el botón de añadir al carrito.
 *
 * En rejilla y no en línea: el botón necesita todo el ancho para leerse, y
 * apretado al lado del aspa se convierte en dos cosas que se estorban.
 */
.owari-favs__fila {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem;
	align-items: center;
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--mdb-border-color);
}

.owari-favs__carrito {
	grid-column: 1 / -1;
	padding: 0.5rem 1rem;
	color: var(--owari-primario-texto-contraste, #fff);
	font-size: 0.8rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background-color: var(--mdb-primary);
	border-radius: var(--mdb-border-radius);
	transition: box-shadow 0.2s ease;
}

.owari-favs__carrito:hover,
.owari-favs__carrito:focus-visible {
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/*
 * Y donde iria el boton, cuando no hay que comprar.
 *
 * Un agotado se queda en la lista —para eso se guarda, para cuando vuelva— pero
 * sin un boton que no lleva a comprar. Ocupa el mismo sitio y tiene la misma
 * forma para que la fila no se descoloque, en gris y sin sombra al pasar
 * porque no hay nada que pulsar.
 */
.owari-favs__agotado {
	grid-column: 1 / -1;
	padding: 0.5rem 1rem;
	color: var(--mdb-secondary-color, var(--mdb-body-color));
	font-size: 0.8rem;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background-color: color-mix(in srgb, var(--mdb-body-color) 8%, transparent);
	border-radius: var(--mdb-border-radius);
}

/*
 * La insignia del carrito, legible sobre cualquier cosa.
 *
 * WooCommerce la pinta del color del texto del menú sobre el fondo del menú, y
 * sobre una cabecera transparente eso salía blanco sobre blanco: el número no
 * se veía. Va como la del corazón —círculo rojo, número blanco—: es un aviso,
 * y un aviso tiene que leerse esté encima de lo que esté.
 */
.owari-cabecera .wc-block-mini-cart__badge {
	color: #fff !important;
	background-color: var(--mdb-danger) !important;
	border-color: transparent !important;
}

/*
 * ── La ficha de producto ──────────────────────────────────────────────────
 *
 * La foto de un producto, redondeada como todo lo demás.
 *
 * MDB le pone la esquina blanda a cuanto pinta —tarjetas, botones, avisos— y la
 * rejilla de WooCommerce salía a escuadra: en medio de una página así, las
 * fotos de la tienda parecen recortadas con tijera. Va como punto de partida y
 * no como estilo de bloque; el estilo aparte es el de volver a la esquina
 * recta, para quien la quiera.
 */
.wc-block-components-product-image img {
	border-radius: var(--mdb-border-radius-lg);
}

/*
 * Y los mismos acabados que cualquier otra imagen.
 *
 * Es una imagen: que se le pueda dar sombra, marco o velo no debería depender
 * de si la subió una persona o la trajo el catálogo. Son los mismos nombres y
 * las mismas reglas que en la foto destacada de una entrada.
 */
.wc-block-components-product-image.is-style-owari-recta img {
	border-radius: 0;
}

.wc-block-components-product-image.is-style-owari-sombra img {
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

.wc-block-components-product-image.is-style-owari-sombra-fuerte img {
	box-shadow: var(--wp--preset--shadow--nivel-3);
}

.wc-block-components-product-image.is-style-owari-marco img {
	padding: 0.25rem;
	background-color: var(--mdb-body-bg);
	border: 1px solid var(--mdb-border-color);
}

/* La proporción va con `!important` porque WooCommerce la escribe en el
 * atributo `style` de la propia imagen, y un círculo con la proporción de otro
 * sería un óvalo. */
.wc-block-components-product-image.is-style-owari-circular img {
	aspect-ratio: 1 !important;
	object-fit: cover;
	border-radius: 50%;
}

.wc-block-components-product-image.is-style-owari-mascara {
	position: relative;
	overflow: hidden;
	border-radius: var(--mdb-border-radius);
	isolation: isolate;
}

.wc-block-components-product-image.is-style-owari-mascara::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(var(--mdb-primary-rgb), 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.wc-block-components-product-image.is-style-owari-mascara:hover::after,
.wc-block-components-product-image.is-style-owari-mascara:focus-within::after {
	opacity: 1;
}

/*
 * Las etiquetas, abajo a la izquierda de la foto.
 *
 * Abajo porque arriba ya está el corazón, y porque el pie de una foto de
 * producto es su parte muerta —la sombra, la mesa— mientras que lo de arriba
 * suele ser justo lo que se está enseñando.
 */
.owari-etiquetas {
	position: absolute;
	inset-inline-start: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.owari-etiqueta {
	padding: 0.15rem 0.55rem;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	border-radius: 999px;
}

/* Rojo lo que corre prisa, azul lo que es noticia, verde lo que dice la
 * tienda de su propio producto. */
.owari-etiqueta--rebaja {
	background-color: var(--mdb-danger);
}

.owari-etiqueta--nueva {
	background-color: var(--mdb-primary);
}

.owari-etiqueta--suya {
	background-color: var(--mdb-success);
}

/*
 * Y la insignia de WooCommerce se apaga cuando el tema pone las suyas.
 *
 * Las dos dicen lo mismo —que hay rebaja— en esquinas distintas, y la del tema
 * además dice cuánto. Solo se apaga si el tema llegó a poner alguna: si la
 * tienda vacía las suyas con el filtro, la de WooCommerce vuelve, que peor que
 * repetir el aviso es quedarse sin darlo.
 */
.owari-ficha-foto--etiquetada .wc-block-components-product-sale-badge {
	display: none;
}

/*
 * ── Los cuatro diseños de la rejilla ──────────────────────────────────────
 *
 * Van en el bloque que envuelve el bucle y no en cada ficha, por lo mismo que
 * en el listado de entradas: una rejilla donde cada ficha se colocara a su
 * manera no sería una rejilla, sería un revoltijo.
 *
 * Ninguno toca la alineación del texto ni cuántas columnas hay. Las dos cosas
 * ya se eligen en el editor —la primera bloque a bloque, la segunda en la
 * colección de productos— y pisarlas sería quitarle a la tienda algo que ya
 * tenía.
 */

/* 1 · Sin tarjeta. La foto se sostiene sola con su sombra y el texto va suelto
 * debajo, sobre el fondo de la página. Es el más ligero: en una rejilla de
 * cuatro o cinco columnas, cuatro tarjetas seguidas pesan. */
.wc-block-product-template.is-style-owari-tienda-limpia .wc-block-components-product-image img {
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/* 2 · Tarjeta. La ficha entera dentro de una caja de MDB, con la foto a ras de
 * los bordes: la esquina la redondea la tarjeta, así que la foto ahí dentro no
 * necesita la suya. */
.wc-block-product-template.is-style-owari-tienda-tarjeta > li,
.wc-block-product-template.is-style-owari-tienda-boton > li {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--mdb-body-bg);
	border-radius: var(--mdb-border-radius-lg);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

.wc-block-product-template.is-style-owari-tienda-tarjeta .wc-block-components-product-image img,
.wc-block-product-template.is-style-owari-tienda-boton .wc-block-components-product-image img {
	width: 100%;
	border-radius: 0;
}

/* El texto, con aire; la foto no, que va pegada. */
.wc-block-product-template.is-style-owari-tienda-tarjeta > li > *:not(.owari-ficha-foto):not(.wp-block-woocommerce-product-image),
.wc-block-product-template.is-style-owari-tienda-boton > li > *:not(.owari-ficha-foto):not(.wp-block-woocommerce-product-image):not(.wc-block-components-product-button) {
	padding-inline: 1rem;
}

.wc-block-product-template.is-style-owari-tienda-tarjeta > li > *:last-child {
	padding-bottom: 1rem;
}

/* 3 · La foto sobre un panel suave. El producto respira dentro de su recuadro
 * en vez de llegar al borde, que es lo que hace falta cuando las fotos vienen
 * recortadas contra fondo blanco y sin ese panel se pierden. */
.wc-block-product-template.is-style-owari-tienda-fondo .wc-block-components-product-image {
	padding: 1.25rem;
	background-color: var(--owari-tienda-panel, color-mix(in srgb, var(--mdb-body-color) 7%, transparent));
	border-radius: var(--mdb-border-radius-lg);
}

/* Lo que va encima se corre lo que mide el panel, para seguir cayendo en la
 * esquina de la foto y no a caballo entre las dos. */
.wc-block-product-template.is-style-owari-tienda-fondo .owari-etiquetas {
	inset-inline-start: 2rem;
	bottom: 2rem;
}

.wc-block-product-template.is-style-owari-tienda-fondo .owari-favorito {
	top: 2rem;
	inset-inline-end: 2rem;
}

/* 4 · Tarjeta con el botón de ancho completo abajo del todo.
 *
 * `margin-top: auto` es lo que lo empuja al fondo, y por eso la ficha es una
 * columna flexible: así el botón de todas las tarjetas de una fila queda a la
 * misma altura aunque un título ocupe dos líneas y otro una. */
.wc-block-product-template.is-style-owari-tienda-boton .wc-block-components-product-button {
	margin-top: auto;
	margin-bottom: 0;
}

/* El margen lleva `!important` porque WooCommerce escribe `margin-bottom:1rem`
 * en el atributo `style` del propio boton, y ahi dejaba una franja en blanco
 * entre el boton y el borde de la tarjeta. */
.wc-block-product-template.is-style-owari-tienda-boton .wc-block-components-product-button .wp-block-button__link {
	display: block;
	width: 100%;
	margin: 0 !important;
	border-radius: 0;
}

/*
 * ── Al producto de al lado ────────────────────────────────────────────────
 *
 * Dos flechas arriba a la derecha, a la altura de las migas. Es un atajo: si
 * ocupa un renglón entero con dos nombres impresos deja de parecerlo, y el
 * nombre tampoco se pierde —está en el `title` y en lo que lee un lector de
 * pantalla—.
 *
 * La fila la hacen las migas, que ya estaban ahí ocupando el renglón; las
 * flechas solo se meten dentro y se van a su borde.
 */
.owari-ficha-cima {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.owari-ficha-pasos {
	display: flex;
	margin-inline-start: auto;
}

/* Cuando no hay migas de las que colgarse, las flechas se ponen su propio
 * renglón. */
.owari-ficha-cima--sola {
	margin-bottom: var(--wp--preset--spacing--30);
}

/*
 * Del tamaño del corazón de las fichas: son la misma clase de cosa, un botón
 * pequeño que solo lleva un icono dentro.
 *
 * Pero van UNIDAS, sin hueco entre ellas y compartiendo el filo del medio. No es
 * un capricho: en una ficha de producto hay otro par de flechas —las de pasar de
 * foto, encima de la imagen— y dos pares de círculos sueltos en la misma pantalla
 * se leen como lo mismo. En el móvil llegaba a ser mentira: ahí el visor esconde
 * las suyas (en una pantalla táctil se pasa la foto arrastrando), así que las
 * únicas flechas visibles eran estas, justo encima de la foto, prometiendo
 * cambiarla y llevando a otro producto.
 *
 * Unidas se leen como un paginador, que es lo que son. Sueltas y redondas se leen
 * como el mando de un visor, que es lo que NO son.
 *
 * Y la forma la decide el Personalizador, como en cualquier otro botón del
 * tema. En «pastilla» un cuadrado con el radio de píldora sale redondo, que es
 * como estaban antes; en «normal» salen con la esquina blanda del resto. Antes
 * iba un 50% escrito a mano y se quedaban redondos dijera lo que dijera el
 * ajuste, que es de las cosas que hacen dudar de si el ajuste hace algo.
 */
.owari-ficha-pasos__paso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--mdb-body-color);
	border: 1px solid var(--mdb-border-color);
	transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* El filo del medio, una sola vez: dos bordes pegados pintan una raya doble. */
.owari-ficha-pasos__paso + .owari-ficha-pasos__paso {
	border-inline-start: 0;
}

/* Y el redondeo, solo por fuera, que es lo que hace de las dos una pieza. */
.owari-ficha-pasos__paso:first-child {
	border-start-start-radius: var(--owari-boton-radio, var(--mdb-border-radius));
	border-end-start-radius: var(--owari-boton-radio, var(--mdb-border-radius));
}

.owari-ficha-pasos__paso:last-child {
	border-start-end-radius: var(--owari-boton-radio, var(--mdb-border-radius));
	border-end-end-radius: var(--owari-boton-radio, var(--mdb-border-radius));
}

a.owari-ficha-pasos__paso:hover,
a.owari-ficha-pasos__paso:focus-visible {
	color: var(--owari-primario-texto, var(--mdb-primary));
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/*
 * El extremo del catálogo.
 *
 * La flecha se queda, apagada: así el par no cambia de forma de una ficha a
 * otra —dos botones que bailan de sitio son dos botones que hay que volver a
 * buscar— y de paso se ve que por ahí ya no se sigue.
 */
.owari-ficha-pasos__paso--fin {
	color: color-mix(in srgb, var(--mdb-body-color) 28%, transparent);
	border-color: color-mix(in srgb, var(--mdb-body-color) 10%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
 * LAS VISTAS DE FICHA
 *
 * Cuatro maneras de enseñar un producto, y cada producto escoge la suya en
 * el panel «Plantilla» del editor. Lo que cambia entre ellas es dónde va la
 * foto —tira de miniaturas al lado, miniaturas debajo, una sola imagen con
 * flechas, o la imagen a la derecha— y cómo se ordena lo demás alrededor.
 *
 * Cada bloque va prefijado con la clase de su vista. Sin ese prefijo, la
 * regla que endereza una vista tuerce las otras tres.
 * ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────── La ficha «tira de miniaturas» ── */

/*
 * Una ficha de producto no es una página: es una decisión.
 *
 * Y quien la toma necesita dos cosas a la vez —ver la prenda y leer lo que le
 * cuentan de ella—, así que aquí la foto y el texto van en paralelo y no uno
 * detrás del otro. Esta vista es la de catálogo de ropa: la tira de miniaturas
 * de pie contra el borde izquierdo, la foto grande a su lado, y a la derecha
 * todo lo que hace falta para decidir, en el orden en que se decide —qué es,
 * qué opinan, cuánto cuesta, de qué está hecho y cómo se compra—.
 *
 * Casi nada de lo de aquí abajo inventa un diseño: WooCommerce ya pinta la tira
 * en columna, ya convierte los colores en círculos y ya oculta su insignia
 * cuando el tema pone la suya. Lo que falta es lo que ninguna tienda puede
 * saber: qué color es el de ESTE sitio, qué radio tienen SUS botones y cuál de
 * los dos corazones sobra cuando hay dos.
 *
 * Todo va prefijado con .owari-ficha-tira. Son cuatro vistas hermanas
 * conviviendo en la misma hoja: sin el prefijo, arreglar una rompería tres.
 *
 * 1 · Las dos columnas
 * 2 · La tira de miniaturas
 * 3 · La valoración, arriba
 * 4 · El precio rebajado
 * 5 · La tabla de especificaciones
 * 6 · El formulario de compra
 * 7 · El corazón, al lado del botón
 */

/* ──────────────────────────────── 1 · Las dos columnas ── */

/*
 * La galería se queda quieta mientras se lee.
 *
 * La columna derecha puede ser larga —tabla, variaciones— y la izquierda
 * se acaba enseguida: al bajar, la foto se iba y quedaba un vacío del ancho de
 * media pantalla justo al lado del texto. Pegada arriba, la foto sigue ahí
 * cuando se llega al botón, que es cuando más falta hace verla.
 *
 * El tope deja sitio a la barra de administración, que es lo único que mide
 * --owari-desplazamiento: el tema se lo pone al `body` solo cuando la barra
 * está puesta. La cabecera fija no entra ahí —no hay ningún token con su
 * altura, y el propio menú se aparta con este mismo—, así que con el menú fijo
 * la foto se mete debajo de él, igual que ya le pasa al lateral del blog. Es la
 * misma cuenta que hace el tema en `.owari-lateral`; el día que exista una
 * medida de la cabecera, se arreglan los dos sitios a la vez.
 *
 * A partir de 782px, que es donde el bloque de columnas deja de apilarlas: por
 * debajo no hay dos columnas que sincronizar y `sticky` solo serviría para que
 * la foto tapara el texto.
 *
 * La alineación superior no se escribe aquí: la elige la plantilla en el propio
 * bloque (verticalAlignment "top"), y `sticky` no funciona sin ella. Repetirla
 * desde el tema le quitaría a quien edita la posibilidad de cambiarla.
 */
@media (min-width: 782px) {
	.owari-ficha-tira .wp-block-columns > .wp-block-column:first-child {
		position: sticky;
		top: calc(var(--owari-desplazamiento, 0px) + var(--wp--preset--spacing--30));
	}
}

/* ─────────────────────────── 2 · La tira de miniaturas ── */

/*
 * La tira en columna no la pone el tema: la pone WooCommerce a partir de 601px
 * cuando la galería NO va en vertical. De ahí que la plantilla deje la
 * orientación en horizontal y escriba las miniaturas ANTES del visor —el orden
 * del marcado es lo único que decide si la tira cae a la izquierda o a la
 * derecha—. Y el ancho tampoco: sale de --wc-block-product-gallery-thumbnails-size,
 * que WooCommerce calcula con el atributo thumbnailSize del bloque.
 *
 * Queda una sola cosa por decir, y es de qué color se marca la miniatura que se
 * está mirando.
 */

/*
 * El filo abajo, en el color del sitio.
 *
 * La plantilla pide el estilo «outline» y no el de fábrica: el de fábrica
 * apaga la miniatura activa con un `brightness`, y una foto oscurecida se lee
 * como «esta no» justo cuando quiere decir «esta sí». Un filo de color dice lo
 * mismo que la pestaña activa de un menú, y lo dice sin tocar la foto.
 *
 * Solo abajo, y no alrededor: un marco completo sobre una miniatura de dos
 * centímetros se come el poco borde que la separa de la de al lado.
 *
 * Quien prefiera el atenuado de WooCommerce lo tiene a un desplegable de
 * distancia en el editor —«Overlay»—; esto no se lo pisa.
 */
.owari-ficha-tira
	.wc-block-product-gallery-thumbnails--active-outline
	.wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	border-width: 0 0 3px;
	border-color: var(--mdb-primary);
	padding: 0;
}

/* ────────────────────────── 3 · La valoración, arriba ── */

/*
 * Las estrellas suben junto al título y no bajan con las reseñas.
 *
 * Lo que hay aquí es solo el renglón: WooCommerce pinta las estrellas y la
 * cuenta de opiniones, y el filtro del tema le añade la nota y las cinco
 * estrellas con las que se vota desde el mismo sitio. Son tres piezas de tres
 * sitios distintos, así que lo que necesitan es un renglón que las alinee por
 * el centro y que sepa partirse cuando no caben, no un tamaño.
 */
.owari-ficha-tira .wc-block-components-product-rating__container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* ─────────────────────────── 4 · El precio rebajado ── */

/*
 * El precio viejo se aparta; el nuevo se queda con el tamaño grande.
 *
 * WooCommerce los pinta a los dos igual de grandes, uno tachado y otro no, y
 * dos cifras del mismo tamaño obligan a leer las dos para saber cuál se paga.
 * El tachado baja un escalón de tamaño y se va al gris del tema; el vigente no
 * se toca, y así hereda el «grande» que la plantilla le da al bloque.
 *
 * `text-decoration: none` en el <ins> porque el navegador subraya lo insertado
 * por defecto, y un precio subrayado parece un enlace.
 */
.owari-ficha-tira .wc-block-components-product-price del {
	margin-inline-end: 0.5rem;
	font-size: var(--wp--preset--font-size--medio);
	color: var(--mdb-secondary-color);
}

.owari-ficha-tira .wc-block-components-product-price ins {
	text-decoration: none;
}

/* ───────────────── 5 · La tabla de especificaciones ── */

/*
 * Ficha técnica, no tabla.
 *
 * El bloque sale con el marcado del bloque de tabla, y el de tabla trae rejilla
 * completa: tres atributos con líneas por los cuatro costados parecen una hoja
 * de cálculo metida en medio de la ficha. Aquí son pares de «esto es esto»,
 * así que se quedan las líneas que separan una fila de la siguiente y se van
 * las demás.
 *
 * El nombre a la izquierda en negrita y el valor a la derecha, que es como se
 * leen los pares cuando hay más de dos: el ojo baja por el borde izquierdo
 * buscando el nombre y salta al valor solo cuando lo encuentra.
 *
 * No hace falta prever la tabla vacía: el bloque no pinta nada cuando el
 * producto no tiene atributos —devuelve cadena vacía antes de abrir el
 * <figure>—, así que no queda un marco huérfano que esconder.
 */
.owari-ficha-tira .wp-block-woocommerce-product-specifications table {
	width: 100%;
	border-collapse: collapse;
}

.owari-ficha-tira .wp-block-woocommerce-product-specifications :where(th, td) {
	padding: 0.6rem 0;
	border: 0;
	border-bottom: 1px solid var(--mdb-border-color);
	font-size: var(--wp--preset--font-size--pequeno);
}

.owari-ficha-tira .wp-block-woocommerce-product-specifications tr:last-child :where(th, td) {
	border-bottom: 0;
}

.owari-ficha-tira .wp-block-product-specifications-item__label {
	width: 40%;
	text-align: start;
	font-weight: 600;
}

.owari-ficha-tira .wp-block-product-specifications-item__value {
	text-align: end;
	color: var(--mdb-secondary-color);
}

/* El valor viene envuelto en <p> por wpautop, y ese <p> trae margen de párrafo. */
.owari-ficha-tira .wp-block-product-specifications-item__value p {
	margin: 0;
}

/* ─────────────────────── 6 · El formulario de compra ── */

/*
 * Las opciones, lado a lado.
 *
 * WooCommerce apila un grupo por atributo, y con dos atributos —color y talla,
 * que es el caso normal en ropa— eso son dos renglones cortos con medio
 * formulario de aire a la derecha. En rejilla caben los dos en el mismo alto y
 * el botón sube a donde se le ve.
 *
 * `auto-fit` con un mínimo y no dos columnas fijas: hay productos con un solo
 * atributo y productos con cuatro, y una rejilla de dos los rompe a los dos.
 *
 * Aviso honesto: la referencia empareja «cantidad» con «talla» en el mismo
 * renglón. Eso aquí no se puede reproducir sin mentir —los atributos no vienen
 * identificados, solo numerados, y no hay forma de saber cuál de ellos es la
 * talla—, así que se emparejan los atributos entre sí y la cantidad se queda
 * con el botón, que es con lo que de verdad va.
 */
.owari-ficha-tira .wp-block-woocommerce-add-to-cart-with-options-variation-selector {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--wp--preset--spacing--20);
}

/*
 * El nombre del atributo, en rótulo pequeño.
 *
 * La referencia lleva la etiqueta flotante de MDB, la que cabalga sobre el
 * borde del campo. Sobre estas opciones no se puede montar: no hay ni <input>
 * ni <label>, son <button role="radio"> dentro de un grupo, y una etiqueta
 * flotante sin campo al que agarrarse quedaría flotando sobre nada. Lo más
 * cercano que no es mentira es el nombre encima del grupo, en el mismo gris y
 * el mismo tamaño que las etiquetas de los campos de al lado.
 */
.owari-ficha-tira .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--mdb-secondary-color);
}

/*
 * Los círculos de color ya los pinta WooCommerce: el estilo «swatch» del bloque
 * de opciones los redondea y esconde el nombre para lectores de pantalla. Lo
 * único que no puede saber es de qué color se marca el elegido, porque lo saca
 * de `CanvasText` —el negro del navegador— cuando nadie se lo dice. Se lo
 * decimos por sus propias variables, que para eso las expone.
 */
.owari-ficha-tira .wc-block-product-filter-chips {
	--wc-product-filter-chips-selected-background: var(--mdb-primary);
	--wc-product-filter-chips-selected-border: var(--mdb-primary);
	--wc-product-filter-chips-selected-text: var(--owari-sobre-primary, #fff);
}

/*
 * Las pastillas de texto —tallas, capacidades— con el radio de los botones del
 * sitio. WooCommerce las deja en 2px, que en un sitio de esquinas redondas se
 * ve como una esquina sin terminar. El número no se escribe: sale del mismo
 * token que decide la forma de todos los botones.
 */
.owari-ficha-tira .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item {
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius));
}

/*
 * El renglón de comprar: cantidad, botón y corazón.
 *
 * Los tres a la misma altura —`stretch`— porque son tres cajas de alturas
 * distintas puestas en fila, y con la línea base bailando parecen tres cosas
 * sueltas en vez de un control. El botón crece hasta llenar lo que queda: en
 * una ficha no hay nada que compita con él, y un botón de comprar del ancho de
 * su texto en medio de una columna vacía parece un enlace más.
 *
 * El botón parte de cero —`flex: 1 1 0`— y no del ancho de su texto. Con la
 * base en `auto`, el renglón se reparte contando el texto entero antes de
 * encoger a nadie, y en cuanto no cabía —en móvil, o con una traducción larga
 * de «Añadir al carrito»— el grupo se partía en tres renglones apilados: el
 * corazón acababa solo debajo del botón y el `stretch` no igualaba nada, porque
 * cada pieza era la única de su línea. Desde cero, el botón cede el ancho que
 * haga falta y los tres se quedan juntos. Lo que ocupa cuando sobra sitio no
 * cambia: sigue siendo todo lo que queda.
 */
.owari-ficha-tira .wc-block-add-to-cart-with-options .wp-block-group:has(> .wp-block-woocommerce-product-button) {
	align-items: stretch;
}

.owari-ficha-tira .wc-block-add-to-cart-with-options .wp-block-woocommerce-product-button {
	flex: 1 1 0;
	min-width: 0;
}

.owari-ficha-tira .wc-block-add-to-cart-with-options .wc-block-components-product-button__button {
	width: 100%;
	height: 100%;
}

/* ───────────────── 7 · El corazón, al lado del botón ── */

/*
 * Dos corazones son uno de más.
 *
 * El tema pone el suyo en la esquina de la foto, que es donde tiene sentido en
 * la rejilla —ahí no hay más sitio—. En la ficha sí lo hay, y el sitio que pide
 * la referencia es al lado del botón de comprar: guardar y comprar son la misma
 * decisión tomada de dos maneras, y separarlas media pantalla obliga a buscar.
 *
 * El de la foto se retira, pero solo si el otro ha llegado: `:has()` pregunta
 * antes de esconder. Si el corazón del formulario no está —porque los favoritos
 * están apagados o porque el filtro que lo inyecta no llegó a correr—, el de la
 * esquina se queda y nadie se queda sin poder guardar.
 */
.owari-ficha-tira:has(.wc-block-add-to-cart-with-options .owari-favorito)
	.wc-block-product-gallery
	.owari-favorito {
	display: none;
}

/*
 * Del tamaño de un icono y centrado contra el renglón.
 *
 * El aspecto es el común del corazón de la compra: un botón de contorno del
 * tema con su mismo redondeo, así que sale redondo si los botones del sitio son
 * pastillas y con la esquina de los botones si no. Antes era un círculo rojo
 * fijo, que no seguía a ninguno de los dos.
 *
 * La medida, fija y no estirada como sus vecinos. Estirarlo fue lo primero que
 * se probó —los tres a la misma altura—, pero con un redondeo de pastilla no
 * aguanta el estirón: el ancho se lo queda el mínimo y el alto se lo da el
 * renglón, y en cuanto el botón de al lado parte su texto en dos líneas el
 * círculo sale huevo. Con la medida escrita a mano sale siempre igual, y
 * centrado se lee igual de emparejado con el botón.
 *
 * No lleva texto que esconder: el botón es solo el icono y su nombre viaja en
 * el aria-label.
 */
.owari-ficha-tira .wc-block-add-to-cart-with-options .owari-favorito {
	position: static;
	flex: 0 0 auto;
	align-self: center;
	width: 2.75rem;
	height: 2.75rem;
}

/**
 * Ficha de producto · vista «banda».
 *
 * Una tienda no vende igual todo lo que vende. Un frasco de perfume se enseña
 * de frente y lo que se cuenta de él —qué lleva, qué opina la gente— es texto
 * largo que no cabe al lado del precio; una camisa, en cambio, se enseña de
 * cuerpo entero y lo que hace falta es la talla. Por eso hay varias vistas de
 * ficha y cada producto elige la suya en el panel «Plantilla» del editor.
 *
 * Ésta es la del frasco: foto grande arriba, la tira de miniaturas debajo, y a
 * la derecha el título con su valoración en el mismo renglón, los distintivos
 * en fila y un acordeón donde caben la descripción larga y las reseñas sin
 * empujar el botón de comprar fuera de la pantalla.
 *
 * Dos decisiones que conviene dejar dichas:
 *
 * 1 · Las miniaturas van debajo porque la galería se declara **vertical**. Es
 *     al revés de lo que suena: `orientation: vertical` apila el visor y la
 *     tira, y entonces WooCommerce pone las miniaturas en fila. Lo que decide
 *     que salgan debajo y no encima es el orden del marcado, no el CSS.
 *
 * 2 · El acordeón es el de WooCommerce (`woocommerce/accordion-*`), no un
 *     `<details>` ni el acordeón de MDB que el tema ya tiene en composiciones.
 *     El de MDB es un `wp:html` con texto fijo y no puede envolver bloques
 *     dinámicos; `<details>` no sabe cerrarse cuando se abre otro. El de
 *     WooCommerce hace las dos cosas y trae su accesibilidad puesta —
 *     `aria-expanded`, `aria-controls`, `role="region"`—, así que aquí sólo hay
 *     que vestirlo de MDB: renglón, chevrón que gira y rótulo en el primario.
 *
 * Todo va prefijado con `.owari-ficha-banda`. Las otras tres vistas comparten
 * bloques con ésta y sin el prefijo se pisarían unas a otras.
 *
 * 1 · El renglón de arriba: título y valoración
 * 2 · Categoría y precio
 * 3 · Distintivos (la tabla de especificaciones, en fila)
 * 4 · Galería: visor arriba, tira de miniaturas debajo
 * 5 · El acordeón, vestido de MDB
 * 6 · Comprar y guardar
 * 7 · En pantalla estrecha
 */

/* ───────── 1 · El renglón de arriba: título y valoración ── */

/*
 * Título a la izquierda, estrellas a la derecha, en la misma línea.
 *
 * `align-items: baseline` y no `center`: el título es tipografía grande y las
 * estrellas un icono pequeño, y centrando por la caja las estrellas quedaban
 * flotando por encima de la línea del título. Apoyadas en la misma base se leen
 * como parte del mismo renglón.
 *
 * El reparto flexible ya lo pone el bloque desde el editor; aquí sólo se
 * corrige el eje y la respiración.
 */
.owari-ficha-banda .owari-ficha-cabeza {
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--30, 1.5rem);
	row-gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.owari-ficha-banda .owari-ficha-cabeza > .wp-block-post-title {
	margin: 0;
	flex: 1 1 14rem;
}

/*
 * Las estrellas heredan el color, así que basta con dárselo al bloque.
 *
 * Las vacías son las mismas cinco estrellas al 50 % de opacidad —lo pone
 * WooCommerce—, de modo que un solo color describe los dos estados. Va en
 * `--mdb-warning` y no en un dorado a mano: es el mismo tono con el que se
 * marca la miniatura activa unas líneas más abajo, y así la ficha tiene un
 * único color de acento.
 */
.owari-ficha-banda .owari-ficha-cabeza .wc-block-components-product-rating {
	flex: 0 0 auto;
	margin: 0;
}

.owari-ficha-banda .wc-block-components-product-rating__container {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.owari-ficha-banda .wc-block-components-product-rating__stars {
	color: var(--mdb-warning);
}

/*
 * La cuenta de reseñas es un enlace al ancla del acordeón, y se ve que lo es.
 *
 * En el modelo va en el color de marca y sin subrayado hasta que se apunta.
 * Es el atajo de quien entra a la ficha buscando lo que opina la gente.
 */
.owari-ficha-banda .wc-block-components-product-rating__reviews_count,
.owari-ficha-banda .wc-block-components-product-rating__reviews_count a {
	color: var(--owari-primario-texto, var(--mdb-primary));
	font-size: var(--wp--preset--font-size--pequeno, 0.875rem);
	text-decoration: none;
}

.owari-ficha-banda .wc-block-components-product-rating__reviews_count a:hover,
.owari-ficha-banda .wc-block-components-product-rating__reviews_count a:focus-visible {
	text-decoration: underline;
}

/* ─────────────────────────── 2 · Categoría y precio ── */

/*
 * La categoría, en versalitas.
 *
 * Debajo del título y en pequeño: no es información que se busque, es
 * información que sitúa. Va en mayúsculas con la letra separada porque a ese
 * cuerpo las mayúsculas juntas se leen mal.
 */
.owari-ficha-banda .owari-ficha-categoria {
	margin: 0 0 var(--wp--preset--spacing--20, 1rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.owari-ficha-banda .owari-ficha-categoria a {
	color: inherit;
	text-decoration: none;
}

.owari-ficha-banda .owari-ficha-categoria a:hover,
.owari-ficha-banda .owari-ficha-categoria a:focus-visible {
	color: var(--owari-primario-texto, var(--mdb-primary));
}

.owari-ficha-banda .wp-block-woocommerce-product-price {
	margin-bottom: var(--wp--preset--spacing--30, 1.5rem);
}

.owari-ficha-banda .wc-block-components-product-price {
	font-weight: 500;
	line-height: 1.2;
}

/*
 * El precio anterior, tachado y apagado; el de ahora, en el color del texto.
 * Los dos en el mismo renglón, que es como se lee «esto vale menos que antes».
 */
.owari-ficha-banda .wc-block-components-product-price del {
	margin-inline-end: 0.5rem;
	color: var(--mdb-secondary-color);
	font-size: 0.7em;
	font-weight: 400;
}

.owari-ficha-banda .wc-block-components-product-price ins {
	text-decoration: none;
}

/* ─── 3 · Distintivos (la tabla de especificaciones, en fila) ── */

/*
 * Aquí la tabla de atributos deja de ser una tabla.
 *
 * WooCommerce pinta las especificaciones como `<figure><table>`: una fila por
 * atributo, etiqueta a la izquierda y valor a la derecha. En el modelo de esta
 * vista eso mismo aparece en horizontal, como tres distintivos con su círculo
 * delante. No hay bloque para eso ni hace falta: es la misma información y sólo
 * cambia el reparto, así que se cambia el reparto.
 *
 * Se desmonta con `display: block` sobre `<table>` en vez de con
 * `display: contents`: `contents` sobre elementos de tabla todavía se le
 * atraganta a algún navegador, y esto no necesita que las filas sean hijas de
 * la figura, sólo que dejen de comportarse como filas de tabla.
 *
 * La cabecera de la tabla se esconde a secas. Ya venía sólo para lectores de
 * pantalla, y sin filas de tabla debajo no describe nada.
 */
.owari-ficha-banda .owari-ficha-sellos {
	margin: 0 0 var(--wp--preset--spacing--30, 1.5rem);
	padding: 0;
}

.owari-ficha-banda .owari-ficha-sellos > table {
	display: block;
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.owari-ficha-banda .owari-ficha-sellos thead {
	display: none;
}

.owari-ficha-banda .owari-ficha-sellos tbody {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 1rem) var(--wp--preset--spacing--30, 1.5rem);
}

/*
 * Cada distintivo crece pero no baja de un ancho legible: por debajo de unos
 * 12rem el rótulo y el valor se parten en tres renglones y el círculo se queda
 * mirando a un texto roto.
 *
 * Cuántos caben en fila lo decide el ancho, no esta regla, y conviene no
 * prometer de más: en la columna derecha de esta vista —unos 35rem con el ancho
 * de contenido de fábrica— caben dos, y el tercero se va solo al renglón de
 * abajo. Tres en fila haría falta bajar el suelo a la mitad, y entonces
 * «Material» y «Base acuosa, sin alcohol» dejarían de caber en un renglón, que
 * es peor negocio: mejor tres distintivos legibles en dos renglones que tres
 * rotos en uno.
 */
.owari-ficha-banda .owari-ficha-sellos tr {
	display: flex;
	flex: 1 1 12rem;
	align-items: center;
	gap: 0.65rem;
	border: 0;
}

.owari-ficha-banda .owari-ficha-sellos th,
.owari-ficha-banda .owari-ficha-sellos td {
	display: block;
	padding: 0;
	border: 0;
	text-align: start;
}

/*
 * El círculo con el icono.
 *
 * Va como `::before` de la etiqueta y no como una imagen porque la fuente de
 * iconos ya está cargada por el tema y así el círculo hereda el tamaño de la
 * letra: si alguien agranda el cuerpo del texto, el distintivo crece con él.
 *
 * Y la parte honesta: el icono es el mismo para todos los distintivos.
 * WooCommerce no guarda un icono por atributo, así que elegir uno distinto para
 * «Material» y otro para «Envío» exigiría que la tienda lo escribiera en algún
 * sitio. Eso es negocio, no tema. Un tilde para los tres dice lo único que el
 * tema sabe de verdad: que este producto tiene ese dato.
 */
.owari-ficha-banda .owari-ficha-sellos th::before {
	content: "\f00c";
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	margin-inline-end: 0.65rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.75em;
	line-height: 1;
	color: var(--owari-sobre-primary, #fff);
	background-color: var(--mdb-primary);
	border-radius: var(--mdb-border-radius-pill);
}

.owari-ficha-banda .owari-ficha-sellos th {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--mdb-secondary-color);
	font-size: var(--wp--preset--font-size--pequeno, 0.875rem);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.owari-ficha-banda .owari-ficha-sellos td {
	color: var(--mdb-body-color);
	font-size: var(--wp--preset--font-size--pequeno, 0.875rem);
	font-weight: 500;
}

/* El valor viene envuelto en párrafo desde WooCommerce; aquí es una línea. */
.owari-ficha-banda .owari-ficha-sellos td > p {
	margin: 0;
}

.owari-ficha-banda .owari-ficha-sellos td a {
	color: inherit;
}

/* ── 4 · Galería: visor arriba, tira de miniaturas debajo ── */

.owari-ficha-banda .wp-block-woocommerce-product-gallery {
	gap: var(--wp--preset--spacing--20, 1rem);
}


/*
 * La foto grande, con el redondeo de MDB.
 *
 * Va en el contenedor y no en la imagen: dentro hay un carrusel de fotos, y
 * redondear cada una dejaría las esquinas parpadeando al pasar de una a otra.
 */
.owari-ficha-banda .wc-block-product-gallery-large-image {
	overflow: hidden;
	border-radius: var(--mdb-border-radius-lg);
	background-color: var(--owari-tienda-panel, color-mix(in srgb, var(--mdb-body-color) 4%, transparent));
}

/*
 * El envoltorio que PHP pone alrededor de cada foto —el que sostiene el corazón
 * y las etiquetas— tiene que ocupar la diapositiva entera. Sin esto se encoge
 * al ancho de la imagen y el corazón se despega de la esquina.
 */
.owari-ficha-banda .wc-block-product-gallery-large-image .owari-ficha-foto {
	width: 100%;
	height: 100%;
}

/*
 * La tira de miniaturas.
 *
 * WooCommerce le da a la tira una proporción calculada a partir del porcentaje
 * que se pide en el bloque, y con eso su alto depende del ancho de la columna:
 * en una pantalla grande salían miniaturas enormes. Aquí se le suelta la
 * proporción y se fija el lado de la miniatura, que es lo que de verdad se
 * quiere decir. Todas las reglas de WooCommerce que se anulan aquí están
 * escritas con `:where()`, o sea con especificidad cero, así que una clase
 * basta y no hace falta ni un `!important`.
 */
.owari-ficha-banda .wc-block-product-gallery-thumbnails {
	aspect-ratio: auto;
	height: auto;
	width: 100%;
}

.owari-ficha-banda .wc-block-product-gallery-thumbnails__scrollable {
	flex-direction: row;
	gap: var(--wp--preset--spacing--20, 1rem);
	height: auto;
	scrollbar-width: none;
}

.owari-ficha-banda .wc-block-product-gallery-thumbnails__thumbnail {
	flex: 0 0 auto;
	height: auto;
	width: auto;
}

.owari-ficha-banda .wc-block-product-gallery-thumbnails__thumbnail__image {
	width: var(--owari-banda-miniatura, 5rem);
	height: var(--owari-banda-miniatura, 5rem);
	max-width: none;
	max-height: none;
	object-fit: cover;
	box-sizing: border-box;
	border-bottom: 3px solid transparent;
	border-radius: var(--mdb-border-radius);
	transition: border-color 0.2s ease, opacity 0.2s ease;
}

.owari-ficha-banda .wc-block-product-gallery-thumbnails__thumbnail__image:hover {
	opacity: 0.85;
}

/*
 * La miniatura que se está viendo lleva un filo abajo.
 *
 * WooCommerce la marca oscureciéndola, que es justo lo contrario de lo que se
 * espera: la que estás mirando parece la apagada. Se quita ese filtro y se pone
 * el filo de color del modelo, en `--mdb-warning` —el mismo amarillo de las
 * estrellas— para que la ficha tenga un solo acento y no dos.
 */
.owari-ficha-banda .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	filter: none;
	border-bottom-color: var(--mdb-warning);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* ───────────────── 5 · El acordeón, vestido de MDB ── */

/*
 * El acordeón vive en la composición PHP de la vista, no en la plantilla: sus
 * rótulos —«Description», «Opinions»— son texto del tema y un .html no los
 * traduciría. Aquí sólo se le da la cara.
 *
 * Las líneas separan paneles en vez de encerrarlos en cajas. Es el acordeón
 * «flush» de MDB, y es el que encaja en una columna estrecha: una caja con
 * borde entero, a este ancho, se come el aire que le queda al texto.
 */
.owari-ficha-banda .owari-ficha-acordeon {
	margin-top: var(--wp--preset--spacing--40, 2.5rem);
}

.owari-ficha-banda .owari-ficha-acordeon .wp-block-woocommerce-accordion-item {
	border-top: 1px solid var(--mdb-border-color);
}

.owari-ficha-banda .owari-ficha-acordeon .wp-block-woocommerce-accordion-item:last-child {
	border-bottom: 1px solid var(--mdb-border-color);
}

/*
 * El rótulo del panel: renglón completo, texto a la izquierda y chevrón a la
 * derecha. El botón ya viene sin fondo ni borde desde WooCommerce; lo que falta
 * es el peso y el color, que son de MDB.
 */
.owari-ficha-banda .owari-ficha-acordeon .accordion-item__heading {
	font-size: var(--wp--preset--font-size--normal, 1rem);
}

.owari-ficha-banda .owari-ficha-acordeon .accordion-item__toggle {
	gap: 1rem;
	padding: var(--wp--preset--spacing--30, 1.5rem) 0;
	color: var(--mdb-body-color);
	font-weight: 500;
	transition: color 0.2s ease;
}

.owari-ficha-banda .owari-ficha-acordeon .accordion-item__toggle:hover {
	color: var(--owari-primario-texto, var(--mdb-primary));
}

/*
 * El panel abierto se anuncia con el color, no con un fondo.
 *
 * MDB pinta de primario el rótulo del panel activo. Es la única señal que hace
 * falta —el chevrón ya se ha dado la vuelta— y no mete un bloque de color en
 * medio de una columna que ya tiene foto, precio y botón compitiendo.
 */
.owari-ficha-banda .owari-ficha-acordeon .is-open > .accordion-item__heading .accordion-item__toggle {
	color: var(--owari-primario-texto, var(--mdb-primary));
}

.owari-ficha-banda .owari-ficha-acordeon .accordion-item__toggle-icon {
	flex: 0 0 auto;
	color: var(--mdb-secondary-color);
}

.owari-ficha-banda .owari-ficha-acordeon .is-open > .accordion-item__heading .accordion-item__toggle-icon {
	color: inherit;
}

.owari-ficha-banda .owari-ficha-acordeon .accordion-panel__wrapper {
	padding-bottom: var(--wp--preset--spacing--30, 1.5rem);
	color: var(--mdb-secondary-color);
}

.owari-ficha-banda .owari-ficha-acordeon .accordion-panel__wrapper > :first-child {
	margin-top: 0;
}

.owari-ficha-banda .owari-ficha-acordeon .accordion-panel__wrapper > :last-child {
	margin-bottom: 0;
}

/*
 * Las reseñas viven dentro de un panel, así que el titulillo que WooCommerce
 * pone encima —«3 valoraciones en …»— repite lo que ya dice el rótulo del
 * panel. Se queda, pero pequeño: es donde está el ancla `#reviews` a la que
 * apunta la cuenta de reseñas de arriba, y quitarlo rompería ese atajo.
 */
.owari-ficha-banda .owari-ficha-acordeon .wp-block-woocommerce-product-reviews-title {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--pequeno, 0.875rem);
	font-weight: 500;
	color: var(--mdb-secondary-color);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.owari-ficha-banda .owari-ficha-acordeon .wp-block-woocommerce-product-review-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.owari-ficha-banda .owari-ficha-acordeon .wp-block-woocommerce-product-review-template > li {
	padding: var(--wp--preset--spacing--20, 1rem) 0;
	border-bottom: 1px solid var(--mdb-border-color);
}

.owari-ficha-banda .owari-ficha-acordeon .wp-block-woocommerce-product-review-author-name {
	color: var(--mdb-body-color);
	font-weight: 500;
}

.owari-ficha-banda .owari-ficha-acordeon .wc-block-product-review-rating__stars {
	color: var(--mdb-warning);
}

/* ─────────────────────────── 6 · Comprar y guardar ── */

.owari-ficha-banda .wp-block-woocommerce-add-to-cart-with-options {
	margin-block: var(--wp--preset--spacing--30, 1.5rem);
}

/*
 * El botón ocupa lo que sobra del renglón de la cantidad.
 *
 * WooCommerce ya pone cantidad y botón en una fila flexible que se parte sola
 * en pantalla estrecha, así que aquí no hay que montar la fila: sólo decir que
 * el botón es el que crece. Sin esto se queda del ancho de su texto y deja un
 * hueco a la derecha que hace pensar que falta algo.
 *
 * El suelo de 14rem es el que decide cuándo se parte: por debajo de eso el
 * botón y el selector ya no caben juntos, y vale más el botón entero debajo que
 * dos cosas estrujadas.
 */
.owari-ficha-banda .wp-block-woocommerce-add-to-cart-with-options .wc-block-components-product-button {
	flex: 1 1 14rem;
	margin: 0;
}

.owari-ficha-banda .wp-block-woocommerce-add-to-cart-with-options .wc-block-components-product-button .wp-block-button__link {
	width: 100%;
}

/*
 * El corazón de favoritos.
 *
 * Va en la esquina de la foto, que es donde el tema lo pone en todas partes
 * —lo monta un filtro de PHP alrededor del bloque de imagen, no la plantilla—.
 * Aquí sólo se le sube el contraste sobre el fondo claro del visor y se le
 * asegura sitio por encima del carrusel.
 *
 * Lo que hay que saber: el visor repite el bloque de imagen una vez por foto, y
 * con él el corazón. Sólo se ve el de la diapositiva visible —WooCommerce
 * esconde las demás—, pero son varios botones para el mismo producto. Se
 * mantienen en sincronía porque el JavaScript de favoritos marca por id de
 * producto, no por botón.
 */
.owari-ficha-banda .wc-block-product-gallery-large-image .owari-favorito {
	z-index: 3;
}

/* ───────────────────── 7 · En pantalla estrecha ── */

/*
 * Con las columnas ya apiladas, la ficha se lee de arriba abajo: foto,
 * miniaturas, título, precio, comprar. Las miniaturas se encogen para que
 * quepan cuatro sin tener que arrastrarlas, y el título y la valoración se
 * separan en dos renglones en vez de pelearse por el ancho.
 */
@media (max-width: 781px) {
	.owari-ficha-banda {
		--owari-banda-miniatura: 4rem;
	}

	.owari-ficha-banda .owari-ficha-cabeza {
		justify-content: flex-start;
	}

	.owari-ficha-banda .owari-ficha-cabeza > .wp-block-post-title {
		flex-basis: 100%;
	}

	.owari-ficha-banda .owari-ficha-sellos tr {
		flex-basis: 100%;
	}
}

/*
 * ── Ficha «lienzo» ────────────────────────────────────────────────────────
 *
 * La vista para el producto que se vende con UNA foto.
 *
 * Las otras fichas del tema reparten la atención entre varias imágenes: una
 * tira de miniaturas al lado, una fila debajo. Eso está bien cuando hay cinco
 * ángulos que enseñar, y estorba cuando solo hay uno: media columna se va en
 * un carrete de una sola casilla, y la foto que importa se queda pequeña para
 * dejarle sitio.
 *
 * Aquí la foto ocupa toda su columna y la navegación se mete DENTRO de ella,
 * en dos flechas encima de la propia imagen. Lo que se gana con eso es el otro
 * lado: la columna de la derecha respira lo bastante como para poner las
 * variaciones en dos grupos de opciones de leer de un vistazo —una lista de
 * radios, no una hilera de pastillas—. El texto largo del producto va debajo de
 * las dos columnas, a todo el ancho, como en las demás vistas.
 *
 * Y el botón de comprar cierra la columna, a la derecha y con el corazón de
 * favoritos a su lado. Con la forma y el color de los botones del sitio: esta
 * vista decide dónde va, no cómo es.
 *
 * Todo va prefijado con .owari-ficha-lienzo. Las cuatro vistas comparten los
 * mismos bloques de WooCommerce y sin el prefijo cada una vestiría a las otras.
 *
 * 1 · La foto sola, con sus flechas
 * 2 · Las opciones, vestidas de radios
 * 3 · Los grupos de opciones, en dos columnas
 * 4 · El botón y el corazón
 * 5 · El precio y su sufijo de impuestos
 */

/* ──────────────────────── 1 · La foto sola, con sus flechas ── */


/*
 * El envoltorio que el tema pone alrededor de la foto —el que sostiene las
 * etiquetas y el corazón— entra en la galería como un hijo flexible más, y sin
 * ancho propia se encoge a lo que mide la imagen. Aquí la foto es la mitad de
 * la página, así que se le dice que ocupe la casilla entera.
 */
.owari-ficha-lienzo .wc-block-product-gallery-large-image__wrapper > .owari-ficha-foto {
	width: 100%;
	height: 100%;
}

/*
 * Las flechas se despegan de la columna en la que vienen.
 *
 * Van con `.owari-ficha` y no con la clase de una vista: las flechas son las
 * mismas en las cuatro, y de fábrica son dos cuadrados blancos que se ven como
 * dos recortes pegados sobre la foto.
 *
 * WooCommerce las mete en `__inner-blocks`, que es una columna flexible tirada
 * encima de la foto. Mientras las flechas son lo único que hay dentro, su
 * `height: 100%` las centra bien; en cuanto entra la insignia de rebaja se
 * reparten el alto con ella y las flechas bajan medio dedo. Sacarlas a
 * absoluta las deja centradas contra la foto pase lo que pase por encima.
 */
.owari-ficha .wc-block-product-gallery-large-image .wc-block-next-previous-buttons {
	position: absolute;
	inset: 0;
	padding-inline: 0.5rem;
}

/*
 * Y se dejan de parecer a dos botones pegados encima de la foto.
 *
 * De fábrica son dos cuadrados blancos opacos de 40px: sobre una foto clara se
 * ven como dos recortes, y sobre una oscura como dos manchas. Aquí se
 * redondean y el blanco se cambia por el fondo del tema casi opaco, con sombra:
 * un círculo que se despega de la foto y se ve sobre cualquier fondo.
 *
 * Casi opaco y no a medio velo, que es como estaban. Traslúcidas se leían con
 * la foto de fondo por dentro y desaparecían sobre las claras: una flecha que
 * hay que buscar no es una flecha, es un acertijo.
 *
 * Y redondas SIEMPRE, no según la forma de botón del Personalizador. Estas no
 * son un botón del sitio: son el mando de un visor, y en un visor las flechas
 * son redondas en todas partes.
 *
 * El fondo sale de --mdb-body-bg y no de un blanco escrito a mano: en oscuro
 * el velo tiene que oscurecer, no aclarar.
 */
/*
 * El icono, centrado y del tamaño que toca.
 *
 * Dos cosas que no se pueden hacer con este `<svg>` y que hay que saber antes de
 * tocarlo:
 *
 * 1. **No tiene `viewBox`.** Solo `width="8" height="12"`. Sin `viewBox` un SVG
 *    no escala su contenido: darle `width: 20px` agranda la caja y deja el trazo
 *    de 8x12 en la esquina de arriba a la izquierda. Se ve más pequeño y
 *    descentrado, que es exactamente lo que pasaba. Lo que sí escala el dibujo
 *    es `transform`, porque transforma lo pintado y no la caja.
 * 2. **El botón no era una caja flexible.** Venía en `display: block`, así que
 *    el icono se centraba solo por la caja de línea y quedaba un píxel bajo.
 *
 * Y se le quita el relleno asimétrico —`2px 2px 0 0` en una flecha,
 * `2px 0 0 2px` en la otra— con el que WooCommerce compensaba a mano que su
 * trazo está tres décimas fuera del centro de su propia caja. Centrando de
 * verdad, esa compensación sobra y lo que hacía era descentrarlo del otro lado.
 */
.owari-ficha .wc-block-next-previous-buttons__button svg {
	padding: 0;
	transform: scale(1.3);
}

.owari-ficha .wc-block-next-previous-buttons__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--mdb-body-color);
	background-color: color-mix(in srgb, var(--mdb-body-bg) 90%, transparent);
	border-radius: var(--mdb-border-radius-pill);
	box-shadow: var(--wp--preset--shadow--nivel-2);
	backdrop-filter: blur(2px);
	transition: color 0.2s ease, background-color 0.2s ease;
}

/*
 * La flecha que no lleva a ningún sitio no se enciende.
 *
 * En la primera foto la de atrás viene con `aria-disabled="true"` y el cursor
 * de «no se puede»; si además se iluminara al pasar por encima estaría
 * prometiendo un paso que no existe. Se deja apagada y que el cursor sea el
 * único que hable.
 */
.owari-ficha .wc-block-next-previous-buttons__button:not([aria-disabled="true"]):hover,
.owari-ficha .wc-block-next-previous-buttons__button:not([aria-disabled="true"]):focus-visible {
	color: var(--mdb-body-color);
	background-color: var(--mdb-body-bg);
}

/*
 * Una sola rebaja anunciada, no dos.
 *
 * El tema ya pone su propia etiqueta de «Oferta» dentro del envoltorio de la
 * foto, y por eso apaga la insignia de WooCommerce con
 * `.owari-ficha-foto--etiquetada .wc-block-components-product-sale-badge`. Esa
 * regla es de descendencia y aquí no llega: en esta galería la insignia no
 * cuelga del envoltorio de la foto, sino de la capa de encima
 * (`__inner-blocks`), que es HERMANA suya. Resultado sin esto: «OFERTA» arriba
 * a la izquierda y «Oferta» abajo a la izquierda, en la misma foto.
 *
 * Se repite el criterio del tema, no se inventa otro: manda la etiqueta del
 * tema —que además dice cuánto se rebaja— y solo cuando llegó a ponerse. Si la
 * tienda vacía las suyas con el filtro, no hay `--etiquetada`, el `:has()` no
 * casa y la insignia de WooCommerce vuelve a verse, que es exactamente lo que
 * dice el comentario de esa regla en el tema.
 */
.owari-ficha-lienzo .wc-block-product-gallery-large-image:has(.owari-ficha-foto--etiquetada) .wc-block-components-product-sale-badge {
	display: none;
}

/*
 * Ojo con lo que NO se toca del `<ul>` que lleva las fotos: su `overflow` ni el
 * `min-width` de sus `<li>`. Pasar de una foto a otra es un scroll programado
 * sobre ese contenedor, y mide el salto por el ancho de la casilla: quitarle el
 * recorte, o fijarle a la casilla un ancho que no sea el suyo, deja a las
 * flechas sin llevar a ningún sitio. El sangrado de arriba sí se le quita, y
 * por eso mismo: cambia el ancho del contenedor y el de la casilla A LA VEZ, y
 * el salto los sigue a los dos. Por debajo de 601px WooCommerce esconde las
 * flechas él solo y la vista se apoya en el arrastre lateral, que sigue
 * funcionando.
 */

/* ─────────────────── 2 · Las opciones, vestidas de radios ── */

/*
 * Las variaciones salen de fábrica como pastillas en fila. Eso funciona para
 * dos tallas y se rompe para seis aromas con nombre: la fila salta de renglón
 * por donde le cabe y hay que leer en zigzag para saber qué se ha elegido.
 *
 * Una lista vertical de radios se lee de una pasada y dice cuál está marcado
 * sin depender del color de fondo de la pastilla. No hay ningún <input> que
 * convertir —WooCommerce dibuja botones con role="radio"—, así que el círculo
 * se fabrica con un ::before y el estado se lee de aria-checked, que es el
 * mismo dato que ve un lector de pantalla.
 *
 * Se deja fuera .is-style-swatch a propósito: esa clase la pone WooCommerce
 * cuando el atributo tiene colores de verdad, y ahí las muestras redondas ya
 * son la mejor forma de enseñarlo. Convertir un color en un radio con el
 * nombre al lado sería cambiar un dibujo por una palabra.
 */
.owari-ficha-lienzo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__items {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.4rem;
}

.owari-ficha-lienzo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item {
	width: 100%;
	padding: 0;
	color: inherit;
	font-size: inherit;
	text-align: start;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/*
 * El texto viene con `display: contents`, que lo deja sin caja propia. Sin caja
 * no se alinea con el círculo y se descuelga hacia la línea base del botón.
 */
.owari-ficha-lienzo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__text {
	display: inline;
}

.owari-ficha-lienzo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__label {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	vertical-align: baseline;
}

/* El círculo. Un borde grueso y nada dentro, como cualquier radio apagado. */
.owari-ficha-lienzo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__label::before {
	content: "";
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	background-color: transparent;
	border: 2px solid var(--mdb-secondary-color);
	border-radius: 50%;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/*
 * Marcado.
 *
 * Hay que apagar antes lo de fábrica: la pastilla elegida se pinta con fondo y
 * borde llenos, y aquí eso dejaría un rectángulo de color detrás del renglón.
 * El aviso de «este es» pasa al círculo y al color del nombre.
 *
 * El punto de dentro es una sombra interior del color del fondo: así el relleno
 * y el anillo son la misma pieza y no se descuadran al cambiar de tamaño de
 * letra.
 */
.owari-ficha-lienzo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item[aria-checked="true"] {
	color: var(--owari-primario-texto, var(--mdb-primary));
	background: transparent;
	border-color: transparent;
}

.owari-ficha-lienzo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item[aria-checked="true"] .wc-block-product-filter-chips__label::before {
	background-color: var(--mdb-primary);
	border-color: var(--mdb-primary);
	box-shadow: inset 0 0 0 3px var(--mdb-body-bg);
}

.owari-ficha-lienzo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item:hover:not([aria-checked="true"]):not(:disabled) .wc-block-product-filter-chips__label::before {
	border-color: var(--owari-primario-texto, var(--mdb-primary));
}

/*
 * El rótulo del atributo —«Elige tu aroma»— hace de título del grupo, así que
 * se le da el peso de un título y aire por debajo. Ya lleva el `id` al que
 * apunta el aria-labelledby del grupo, o sea que no hace falta tocarle nada más.
 */
.owari-ficha-lienzo .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
}

/* ────────────── 3 · Los grupos de opciones, en dos columnas ── */

/*
 * Aroma a la izquierda, capacidad a la derecha.
 *
 * `auto-fit` y no dos columnas fijas: un producto con un solo atributo no debe
 * quedarse con media columna vacía al lado, y uno con tres tampoco debe
 * romperse. Cuando la columna se estrecha —o el producto trae nombres largos—
 * la rejilla vuelve sola a una sola fila por grupo.
 */
.owari-ficha-lienzo .wp-block-woocommerce-add-to-cart-with-options-variation-selector {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0 var(--wp--preset--spacing--40);
	align-items: start;
}

/* ─────────────────────────────── 4 · El botón y el corazón ── */

/*
 * La fila de comprar se va a la derecha y cierra la columna, como en el modelo.
 *
 * Se busca por el botón que lleva dentro y no por la posición: WooCommerce
 * monta esa fila desde una composición distinta según el tipo de producto
 * —simple, variable, agrupado— y en todas es el grupo que contiene el botón.
 */
.owari-ficha-lienzo .wc-block-add-to-cart-with-options .wp-block-group:has(> .wc-block-components-product-button) {
	justify-content: flex-end;
	gap: 0.75rem;
}

/*
 * El botón de comprar no se viste aquí.
 *
 * Esta vista lo pintaba negro y con la esquina viva, y era el único botón de la
 * tienda que no seguía al tema: ni el color del sitio, ni el redondeo, ni la
 * sombra que se eligen en Estilos y en el Personalizador. Ahora es un botón
 * como los demás y la vista solo decide dónde va.
 */

/*
 * El corazón que va junto al botón.
 *
 * Su aspecto es el común del corazón de la compra —el de un botón de contorno
 * del tema—; aquí solo se decide su sitio: estirado a la altura del botón y
 * del ancho de un icono.
 *
 * El `:not(.owari-ficha-foto) >` es lo que separa los dos sitios: el corazón
 * que sigue viviendo encima de la foto no se entera de nada de esto.
 */
.owari-ficha-lienzo :not(.owari-ficha-foto) > .owari-favorito {
	position: static;
	align-self: stretch;
	width: 2.75rem;
	height: auto;
}

/*
 * El corazón se vacía por el trazado y no por el <svg>.
 *
 * El `fill="currentColor"` va escrito en el atributo del <path>, y una regla
 * puesta sobre el <svg> no llega a cambiarlo: hay que apuntar al trazado, que
 * es donde una declaración de CSS sí gana a un atributo de presentación.
 */
.owari-ficha-lienzo :not(.owari-ficha-foto) > .owari-favorito .owari-favorito__icono path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

/* Guardado: el trazado se rellena. */
.owari-ficha-lienzo :not(.owari-ficha-foto) > .owari-favorito.owari-favorito--marcado .owari-favorito__icono path {
	fill: currentColor;
	stroke: none;
}

/*
 * Y si el corazón llega a estar en los dos sitios, manda el del botón.
 *
 * Dos corazones para el mismo producto en la misma pantalla no son dos maneras
 * de guardarlo: son una duda sobre si hacen lo mismo. Mientras el de la foto
 * sea el único que hay, se queda; en cuanto aparezca uno en la fila de comprar,
 * el de la foto se aparta.
 */
.owari-ficha-lienzo:has(.wc-block-add-to-cart-with-options .owari-favorito) .owari-ficha-foto .owari-favorito {
	display: none;
}

/* ──────────────── 5 · El precio y su sufijo de impuestos ── */

/*
 * El «IVA incluido» del modelo no es texto del tema: es el sufijo que
 * WooCommerce añade al precio cuando la tienda tiene configurados los
 * impuestos. Aquí solo se le quita peso, para que acompañe al precio en vez de
 * competir con él.
 */
.owari-ficha-lienzo .woocommerce-price-suffix {
	margin-inline-start: 0.4rem;
	color: var(--mdb-secondary-color);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 400;
	white-space: nowrap;
}

/* La marca y el título van juntos: la marca es el renglón de arriba del título,
   no un dato suelto. Si la tienda no usa marcas el bloque no pinta nada y este
   margen no llega a existir. */
.owari-ficha-lienzo .wp-block-post-terms {
	display: block;
	margin-bottom: 0.25rem;
}

/**
 * Vista de ficha «Product · photo on the right» (producto-espejo).
 *
 * Las otras tres vistas ponen la foto a la izquierda porque así se lee una
 * ficha de tienda desde siempre. Esta la pone a la derecha a propósito, y no
 * por variar: hay catálogos —ropa básica, ropa de trabajo, todo lo que se
 * vende contando de qué está hecho— donde la foto no decide la compra y el
 * texto sí. Cuando lo que convence es la lista de razones, esa lista tiene que
 * caer en el lado por el que empieza a leerse la página, y la foto pasa a
 * acompañar.
 *
 * Lo que se hace aquí y en ninguna otra vista:
 *
 * - La foto vive dentro de un panel gris que es de la COLUMNA, no de la
 *   galería. Así respira por los cuatro lados aunque el producto tenga una
 *   foto cuadrada, una alta o una que ni llene el ancho.
 * - En un teléfono la foto vuelve a subir. El marcado tiene que poner el texto
 *   primero —es lo que deja la foto a la derecha en un escritorio—, pero en
 *   una columna única abrir con un muro de texto es cerrar la ficha.
 * - Cada grupo de opciones se pasa a un solo renglón: el rótulo a la izquierda
 *   y las muestras a la derecha, que es lo que enseña el modelo.
 * - El corazón de favoritos es el único sitio del tema donde su rótulo se lee.
 *   Aquí el botón ocupa el ancho entero debajo del carrito, y un botón ancho
 *   con un icono solo en medio no dice qué hace.
 *
 * Todo va colgado de .owari-ficha-espejo: las cuatro vistas comparten los
 * mismos bloques de WooCommerce y sin el prefijo esto las vestiría a las
 * cuatro.
 *
 * 1 · La foto, a la derecha y sobre su panel
 * 2 · Las opciones, cada grupo en su renglón
 * 3 · Los dos botones, a todo el ancho
 * 4 · El texto largo del producto
 * 5 · La tabla de especificaciones
 */

/* ──────────────── 1 · La foto, a la derecha y sobre su panel ── */

/*
 * El panel lo lleva la columna y no la galería.
 *
 * La galería mide lo que mida su foto, así que si el gris fuera suyo el margen
 * de alrededor sería el de la imagen: cero. Puesto en la columna, el hueco es
 * el relleno del panel y no depende de qué subió la tienda.
 *
 * `--mdb-tertiary-bg` y no un gris escrito: es el mismo token que usa el resto
 * del tema para «superficie apagada», y por eso se oscurece solo cuando el
 * sitio se pone en oscuro en vez de quedarse como una mancha blanca.
 *
 * Las columnas se cuelgan del hijo directo de la ficha. Sin el `>` desde
 * `.owari-ficha-espejo` esto vestiría también las columnas que la tienda
 * escriba dentro de la descripción o las que traiga la composición de reseñas:
 * un bloque de columnas del contenido acabaría con panel gris y saltando de
 * sitio en el teléfono.
 *
 * Y la alineación superior no se escribe aquí: la elige la plantilla en el
 * propio bloque (verticalAlignment «top»). Repetirla desde el tema le quitaría
 * a quien edita la posibilidad de cambiarla desde el Editor del sitio.
 */
.owari-ficha-espejo > .wp-block-columns > .wp-block-column:last-child {
	padding: var(--wp--preset--spacing--30);
	background-color: var(--mdb-tertiary-bg);
	border-radius: var(--wp--custom--radio--medio, var(--mdb-border-radius-lg));
}

/*
 * El corazón que PHP monta encima de la foto se queda, pero sin sombra.
 *
 * Sobre blanco necesitaba despegarse; sobre el panel gris la sombra dibuja un
 * halo alrededor del círculo y se ve el recorte.
 */
.owari-ficha-espejo > .wp-block-columns > .wp-block-column:last-child .owari-favorito {
	box-shadow: none;
	border: 1px solid var(--mdb-border-color);
}

/*
 * En un teléfono, la foto vuelve arriba.
 *
 * 781px es donde el bloque de columnas del núcleo las apila; a partir de ahí
 * el orden del marcado es el orden en pantalla, y el marcado empieza por el
 * texto. `order` lo devuelve sin tocar el HTML, que es lo que mantiene la foto
 * a la derecha en el escritorio.
 */
@media (max-width: 781px) {
	.owari-ficha-espejo > .wp-block-columns > .wp-block-column:last-child {
		order: -1;
	}
}

/* ─────────── 2 · Las opciones, cada grupo en su renglón ── */

/*
 * WooCommerce apila el nombre del atributo sobre sus muestras. El modelo los
 * quiere en la misma línea —«Available colors:» y los círculos al lado—, así
 * que el grupo que envuelve a los dos pasa de columna a fila.
 *
 * Con `wrap`, y no `nowrap`: un atributo con ocho tallas y un nombre largo no
 * cabe en un renglón y la fila entera se desbordaría por la derecha. Al
 * envolver, el rótulo se queda arriba y las muestras bajan, que es feo pero
 * legible.
 */
.owari-ficha-espejo .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute > .wp-block-group {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
	justify-content: space-between;
}

.owari-ficha-espejo .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--mdb-body-color);
}

/* Las muestras se van al borde derecho; el rótulo se queda anclado al
 * izquierdo y los grupos quedan alineados entre sí de renglón a renglón. */
.owari-ficha-espejo .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute .wc-block-product-filter-chips {
	flex: 1 1 auto;
}

.owari-ficha-espejo .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute .wc-block-product-filter-chips__items {
	justify-content: flex-end;
}

/*
 * Los atributos con color ya salen redondos: WooCommerce le pone
 * `is-style-swatch` al grupo en cuanto el atributo tiene un color guardado, y
 * ahí el círculo y el texto escondido son suyos. Lo de aquí es para los otros
 * —la talla, el material—, que salen como pastillas cuadradas de 2px.
 *
 * Aquí está la renuncia de esta vista: el modelo enseña un desplegable para la
 * talla y esto entrega pastillas. Un <select> no se puede convertir en un
 * círculo de color ni en un radio, y las pastillas sí; la tienda que prefiera
 * el desplegable cambia el bloque hijo desde el Editor del sitio, que gana
 * sobre el archivo del tema.
 */
.owari-ficha-espejo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item {
	padding: 0.35rem 0.9rem;
	border-color: var(--mdb-border-color);
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius-pill));
	font-size: 0.875rem;
	transition: color var(--wp--custom--transicion, 0.25s ease), background-color var(--wp--custom--transicion, 0.25s ease), border-color var(--wp--custom--transicion, 0.25s ease);
}

.owari-ficha-espejo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item:hover {
	border-color: var(--mdb-body-color);
}

/*
 * La seleccionada, en el primario del sitio como en las demás vistas.
 *
 * El fondo y el texto ya los pone la regla común de las pastillas; el filo hay
 * que decirlo aquí porque la regla de arriba lo deja gris en todas y pesa más.
 * Antes iba en negro, a juego con un botón de comprar negro que tampoco seguía
 * al tema.
 */
.owari-ficha-espejo .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item[aria-checked="true"] {
	border-color: var(--wc-product-filter-chips-selected-border, var(--mdb-primary));
}

/* ─────────────────── 3 · Los dos botones, a todo el ancho ── */

/*
 * La cantidad se queda en su renglón y el carrito se lleva el siguiente
 * entero.
 *
 * WooCommerce mete los dos en un grupo en fila. Dejar que el botón crezca
 * dentro de esa fila lo dejaría corto siempre que haya cantidad al lado, y en
 * esta vista el botón ancho es la mitad del diseño: es lo que hace que la
 * columna de texto termine en un bloque y no en una frase suelta.
 */
.owari-ficha-espejo .wc-block-add-to-cart-with-options .wp-block-group {
	flex-wrap: wrap;
}

.owari-ficha-espejo .wc-block-add-to-cart-with-options .wp-block-woocommerce-product-button,
.owari-ficha-espejo .wc-block-add-to-cart-with-options .owari-ficha-comprar {
	flex: 1 1 100%;
}

/*
 * El botón de comprar, a todo el ancho y con el texto centrado.
 *
 * Solo eso. El color, el redondeo y la sombra son los de cualquier botón del
 * sitio, y por eso aquí no se escriben: antes esta vista lo pintaba de negro y
 * era un botón que no seguía ni a Estilos ni al Personalizador.
 */
.owari-ficha-espejo .wc-block-add-to-cart-with-options .wc-block-components-product-button__button {
	display: flex;
	width: 100%;
	justify-content: center;
}

/*
 * El corazón, debajo del carrito y con el rótulo puesto.
 *
 * De serie el botón vive absoluto en una esquina de la foto, así que lo
 * primero es devolverlo al flujo. Aquí es un botón de verdad —ancho entero y
 * de contorno—, el hermano callado del de comprar. Su aspecto lo pone la regla
 * común del corazón de la compra (`.owari-ficha-comprar .owari-favorito`).
 *
 * Esto solo se ve si el corazón se pinta dentro del formulario de compra. Si
 * la tienda lo deja donde está de fábrica, encima de la foto, ninguna de estas
 * reglas llega a aplicarse y no estorba.
 */
.owari-ficha-espejo .wc-block-add-to-cart-with-options .owari-favorito {
	position: static;
	order: 99;
	width: 100%;
	height: auto;
	margin-top: var(--wp--preset--spacing--10);
}

/* ────────────────────── 4 · El texto largo del producto ── */

/*
 * La descripción larga es la que carga esta vista: «About the product», sus
 * párrafos y la lista de razones. Es contenido que escribe la tienda, así que
 * lo único que se toca es el ritmo entre secciones y la lista.
 */
.owari-ficha-espejo .wp-block-post-content > :is(h2, h3, h4):not(:first-child) {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--mdb-border-color);
}

/*
 * La lista, en versalitas y en el color de la marca.
 *
 * En el modelo son sellos —GOTS CERTIFICATE, ETHICAL WORK—, no una enumeración
 * que se lee de arriba abajo: cada punto es una promesa suelta. Por eso pierde
 * la viñeta y gana el color; con viñeta y en negro volvían a parecer los pasos
 * de un instructivo.
 */
.owari-ficha-espejo .wp-block-post-content ul {
	margin-inline-start: 0;
	padding-inline-start: 0;
	list-style: none;
}

.owari-ficha-espejo .wp-block-post-content ul > li {
	color: var(--owari-primario-texto, var(--mdb-primary));
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ─────────────────── 5 · La tabla de especificaciones ── */

/*
 * Dos columnas alineadas y ni una raya, como en la primera vista.
 *
 * Es una tabla de verdad —etiqueta y valor, y así la lee un lector de
 * pantalla—, pero dibujada se ve como una hoja de cálculo metida en una ficha.
 * Lo que separa las filas es el aire, no el borde.
 */
.owari-ficha-espejo .wp-block-woocommerce-product-specifications {
	margin-top: var(--wp--preset--spacing--30);
}

.owari-ficha-espejo .wp-block-woocommerce-product-specifications table {
	border: 0;
	border-collapse: collapse;
}

.owari-ficha-espejo .wp-block-woocommerce-product-specifications :is(th, td) {
	padding: 0.5rem 0;
	border: 0;
	vertical-align: top;
}

/* La etiqueta manda en la primera columna: en negrita y con un ancho fijo, para
 * que los valores empiecen todos en la misma vertical en vez de bailar según lo
 * largo que sea el nombre del atributo. Un nombre más largo que 12rem envuelve,
 * que es mejor que desbordar la columna. */
.owari-ficha-espejo .wp-block-product-specifications-item__label {
	width: 12rem;
	padding-inline-end: 1rem;
	color: var(--mdb-body-color);
	font-weight: 600;
	text-align: start;
}

.owari-ficha-espejo .wp-block-product-specifications-item__value {
	color: var(--mdb-secondary-color);
}

/* WooCommerce mete cada valor en su propio párrafo y el margen del tema abre
 * un renglón vacío dentro de cada celda. */
.owari-ficha-espejo .wp-block-product-specifications-item__value > p {
	margin: 0;
}

/*
 * El corazón al lado del botón de comprar, vestido como un botón del tema.
 *
 * `.owari-favorito` nace flotando sobre la foto —ahí es donde vive en la
 * rejilla—, así que lo primero que hay que hacer aquí es devolverlo al flujo.
 * Sin esto se sube a la esquina de lo primero que tenga posición y desaparece
 * del renglón del botón.
 *
 * Y la piel es una sola para todas las vistas: la del botón de contorno del
 * tema —fondo transparente, filo de 2px del color del texto, el primario del
 * sitio y el mismo redondeo que los botones—. Antes cada vista se inventaba la
 * suya —un círculo rojo, un cuadrado gris, un rectángulo de filo fino— y
 * ninguna se parecía al botón que tenía al lado ni a los del resto del sitio.
 * Las vistas deciden dónde va y cuánto mide; qué aspecto tiene lo decide el
 * tema. Guardado se rellena de rojo, que es lo que hace el corazón de la
 * rejilla.
 */
.owari-ficha-comprar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}

.owari-ficha-comprar .owari-favorito {
	position: static;
	inset: auto;
	flex: 0 0 auto;
	color: var(--owari-primario-texto, var(--mdb-primary));
	background-color: transparent;
	border: 2px solid currentColor;
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius));
	box-shadow: none;
}

/* Al pasar por encima: el tinte suave de un botón de contorno y el rojo que va
 * a tomar al guardarlo, sin el salto de escala del corazón de la foto. */
.owari-ficha-comprar .owari-favorito:hover,
.owari-ficha-comprar .owari-favorito:focus-visible {
	color: var(--mdb-danger);
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	transform: none;
}

.owari-ficha-comprar .owari-favorito--marcado {
	color: var(--mdb-body-bg);
	background-color: var(--mdb-danger);
	border-color: var(--mdb-danger);
}

.owari-ficha-comprar .owari-favorito--marcado:hover,
.owari-ficha-comprar .owari-favorito--marcado:focus-visible {
	color: var(--mdb-body-bg);
	background-color: color-mix(in srgb, var(--mdb-danger) 82%, black);
	border-color: color-mix(in srgb, var(--mdb-danger) 82%, black);
}

/* El rótulo impreso solo lo enseña la vista que lo pide. */
.owari-favorito__texto {
	display: none;
}

/*
 * Vista espejo: los dos botones a todo el ancho, uno debajo del otro.
 *
 * Aquí el corazón deja de ser un icono y se convierte en un botón con su
 * nombre escrito, porque en esta vista la columna es estrecha y un icono
 * suelto al lado de un botón ancho parte el renglón en dos pesos distintos.
 */
.owari-ficha-espejo .owari-ficha-comprar {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0.5rem;
}

.owari-ficha-espejo .owari-ficha-comprar > .wp-block-button,
.owari-ficha-espejo .owari-ficha-comprar .wp-block-button__link,
.owari-ficha-espejo .owari-ficha-comprar .owari-favorito {
	width: 100%;
}

/* Y que el ancho lo dé `width` y no el reparto: dentro de una columna, un
 * `flex-basis` del 100% se mide en alto. */
.owari-ficha-espejo .owari-ficha-comprar > .wp-block-button {
	flex: 0 0 auto;
}

.owari-ficha-espejo .owari-ficha-comprar .owari-favorito {
	gap: 0.5rem;
	height: auto;
	padding: 0.7rem 1rem;
	font-weight: 500;
}

.owari-ficha-espejo .owari-favorito__texto {
	display: inline;
}

/*
 * Guardado, el botón ancho no se pinta entero de rojo.
 *
 * Un rectángulo rojo a todo el ancho debajo de «añadir al carrito» se lee como
 * un aviso de error. Se tiñen el filo y el corazón, que es lo que cambió; el
 * rótulo se queda en el color del botón.
 */
.owari-ficha-espejo .owari-ficha-comprar .owari-favorito--marcado,
.owari-ficha-espejo .owari-ficha-comprar .owari-favorito--marcado:hover,
.owari-ficha-espejo .owari-ficha-comprar .owari-favorito--marcado:focus-visible {
	color: var(--owari-primario-texto, var(--mdb-primary));
	background-color: color-mix(in srgb, var(--mdb-danger) 6%, transparent);
	border-color: var(--mdb-danger);
}

.owari-ficha-espejo .owari-ficha-comprar .owari-favorito--marcado .owari-favorito__icono {
	color: var(--mdb-danger);
}

/*
 * Las estrellas, la nota y el contador, en un renglón.
 *
 * La referencia los pone así: estrellas, «4,3/5» en negrita y el número de
 * opiniones detrás, en el mismo peso de línea que el título.
 */
.owari-ficha-valoracion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.owari-ficha-valoracion .wc-block-components-product-rating__container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.owari-ficha-nota {
	color: var(--mdb-primary);
	font-weight: 700;
}

.owari-ficha-valoracion .woocommerce-review-link {
	color: var(--mdb-primary);
	text-decoration: none;
}

/*
 * Valorar desde arriba.
 *
 * En su propio renglón y no pegado a las estrellas de la nota: son dos cosas
 * distintas —lo que opina la gente y lo que vas a opinar tú— y juntas se leen
 * como diez estrellas seguidas.
 */
.owari-valorar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	flex-basis: 100%;
	margin: 0.25rem 0 0;
	font-size: 0.85em;
}

.owari-valorar__rotulo {
	margin-right: 0.25rem;
	color: var(--mdb-secondary-color);
}

.owari-valorar__estrella {
	display: inline-flex;
	color: var(--mdb-secondary-color);
	line-height: 0;
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
}

/*
 * Al pasar por encima se encienden esa estrella y todas las anteriores.
 *
 * Es la convención de cualquier valoración: nadie da «solo la tercera». `:has()`
 * es lo que permite teñir hacia atrás; donde no exista, se enciende únicamente
 * la que está debajo del cursor, que sigue diciendo dónde estás.
 */
.owari-valorar__estrella:hover,
.owari-valorar__estrella:focus-visible,
.owari-valorar__estrella:has( ~ .owari-valorar__estrella:hover ),
.owari-valorar__estrella:has( ~ .owari-valorar__estrella:focus-visible ) {
	color: var(--mdb-warning);
	transform: scale( 1.1 );
}

/*
 * Vista banda: título a la izquierda y valoración a la derecha, en la misma
 * línea. Los enlaces de valorar bajan solos porque ocupan renglón entero.
 */
.owari-ficha-banda .owari-ficha-cabeza {
	align-items: baseline;
	gap: 1rem;
}

/*
 * Las muestras de color de las variaciones.
 *
 * Los círculos ya vienen de fábrica: cuando el atributo es de tipo «Color /
 * imagen» y sus términos tienen color, WooCommerce añade sola la clase
 * `is-style-swatch`, escribe el color en línea y trae su propio CSS —redondez,
 * tamaño, borde de la elegida y la diagonal de la que no tiene color—. El tema
 * NO escribe esa clase a mano: forzada salen círculos vacíos, porque el color
 * no está en ninguna parte que el CSS pueda leer.
 *
 * Lo único que se hace aquí es darle los colores de MDB, y se hace por las
 * variables que su propio CSS ya consulta: así no hay que repetir sus reglas ni
 * pelearse con ellas a golpe de especificidad.
 *
 * Si la tienda no usa atributos de tipo «Color / imagen», las pastillas se
 * quedan con el NOMBRE del color escrito. Es honesto y sigue siendo usable: el
 * tema no puede inventarse un color que la tienda no ha dicho.
 */
.owari-ficha .wc-block-product-filter-chips {
	--wc-product-filter-chips-text: var(--mdb-body-color);
	--wc-product-filter-chips-background: var(--mdb-body-bg);
	--wc-product-filter-chips-border: var(--mdb-border-color);
	--wc-product-filter-chips-selected-border: var(--mdb-primary);
	--wc-product-filter-chips-selected-background: var(--mdb-primary);
	--wc-product-filter-chips-selected-text: var(--owari-sobre-primary, #fff);
}

/* Las pastillas de texto, con el redondeo de los botones del sitio en vez de
 * sus 2 px. */
.owari-ficha .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item {
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius-pill));
	padding: 0.45em 1em;
	font-size: 0.85em;
}

/*
 * El selector de cantidad, con la forma de los botones, en todas las vistas.
 *
 * WooCommerce le escribe el radio a mano, en píxeles, y con él el de sus dos
 * extremos: al lado de un botón de pastilla quedaba una caja de esquinas casi
 * vivas. El número no se escribe: sale del mismo token que decide la forma de
 * todos los botones. El ancho fijo de 107px que trae también es suyo, pero ese
 * ya se lo quita él mismo dentro del formulario de compra.
 */
.owari-ficha .wc-block-components-quantity-selector {
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius));
}

.owari-ficha .wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--minus {
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius)) 0 0 var(--owari-boton-radio, var(--mdb-border-radius));
}

.owari-ficha .wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--plus {
	border-radius: 0 var(--owari-boton-radio, var(--mdb-border-radius)) var(--owari-boton-radio, var(--mdb-border-radius)) 0;
}

/*
 * Vista tira: los círculos algo más grandes, que es lo que enseña la referencia
 * —seis muestras en un renglón, del tamaño de un dedo—.
 */
.owari-ficha-tira .wc-block-product-filter-chips.is-style-swatch .wc-block-product-filter-chips__swatch {
	width: 1.7rem;
	height: 1.7rem;
}

/*
 * Vista lienzo: radio a la izquierda y nombre a la derecha, en columna.
 *
 * Aquí la referencia no pide círculos de color sino una lista de opciones con su
 * nombre escrito, así que se deshace el escondite del texto que pone WooCommerce
 * en el estilo de muestra y la fila pasa a columna.
 */
.owari-ficha-lienzo .wc-block-product-filter-chips__items {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
}

.owari-ficha-lienzo .wc-block-product-filter-chips.is-style-swatch .wc-block-product-filter-chips__item {
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius-pill));
	padding: 0.2em 0.6em 0.2em 0.2em;
}

.owari-ficha-lienzo .wc-block-product-filter-chips.is-style-swatch .wc-block-product-filter-chips__text {
	clip: auto;
	clip-path: none;
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
}

.owari-ficha-lienzo .wc-block-product-filter-chips.is-style-swatch .wc-block-product-filter-chips__swatch {
	width: 1.1rem;
	height: 1.1rem;
}

/* Vista espejo: fila compacta, que la columna es estrecha. */
.owari-ficha-espejo .wc-block-product-filter-chips__items {
	gap: 0.4rem;
}

.owari-ficha-espejo .wc-block-product-filter-chips.is-style-swatch .wc-block-product-filter-chips__swatch {
	width: 1.3rem;
	height: 1.3rem;
}

/*
 * Las etiquetas dentro de la capa que WooCommerce ya tiene sobre la foto.
 *
 * `__inner-blocks` es una columna flexible colocada en absoluto encima de la
 * imagen grande: no hay que posicionar nada, solo decidir a qué lado se pegan.
 */
/* A la izquierda, como en la rejilla del catálogo: la misma etiqueta no puede
 * vivir en una esquina distinta según dónde se mire el producto. */
.owari-ficha-insignia .owari-etiquetas {
	position: static;
	align-self: flex-start;
}


/*
 * Las estrellas de una reseña, a la izquierda como todo lo demás.
 *
 * El bloque las centra con un `margin: 0 auto`, y en una fila donde el nombre,
 * la fecha y el texto empiezan todos en el mismo margen, unas estrellas en
 * mitad del renglón parecen de otra reseña. El margen es lo que hay que quitar:
 * con `text-align` no basta, porque lo que está centrado es la caja y no el
 * texto de dentro.
 */
.owari-ficha-resenas .wc-block-product-review-rating__stars {
	margin-inline: 0;
}

/*
 * Los productos de su categoría, al final de la ficha.
 *
 * La misma separación que la descripción y las reseñas, pero escrita aquí y no
 * en el bloque: la colección de WooCommerce no admite márgenes propios. Con dos
 * clases, para que no la pise el hueco que pone WordPress entre los bloques de
 * una disposición «constrained».
 */
.owari-ficha > .owari-ficha-relacionados {
	margin-block-start: var(--wp--preset--spacing--60);
}

/*
 * Devolverle al carrete los dos centímetros que le quita MDB.
 *
 * Le pasa a las cuatro vistas, así que va una vez y con la clase común. Antes
 * estaba escrito dos veces —en la de miniaturas debajo y en la de foto sola— y
 * faltaba en las otras dos, que es donde se veía el desperfecto.
 *
 * El carrete de fotos es un `<ul>`, y MDB sangra todas las listas con
 * `ol, ul { padding-left: 2rem }`. WooCommerce se lo quita, pero dentro de un
 * `:where()`, que no pesa nada: gana MDB. Y aquí eso no es un detalle de dos
 * píxeles, porque cada diapositiva pide `min-width: 100%` del carrete: con el
 * sangrado puesto, la foto aparece corrida a la derecha, deja una franja vacía
 * a su izquierda y por el otro lado se sale del marco.
 *
 * Y ahí es donde se estropean las flechas, que es lo que se ve primero: van
 * centradas contra el MARCO, no contra la foto, así que con la foto corrida la
 * de la izquierda quedaba medio fuera de ella, a caballo entre la franja vacía
 * y la imagen.
 *
 * El margen de abajo es de la misma familia —MDB se lo pone a toda lista— y
 * hacía el marco más alto que la foto, con las flechas unos píxeles por debajo
 * de su centro: lo justo para verse mal sin saber por qué.
 */
.owari-ficha .wc-block-product-gallery-large-image__container {
	padding-inline: 0;
	margin-block: 0;
}
/*
 * ── Lo que es igual en las cuatro vistas ──────────────────────────────────
 *
 * La foto llena su marco, y el arreglo no está aquí.
 *
 * El marco ya venía redondeado y no se notaba: la foto salía encogida dentro,
 * con franjas de fondo arriba y abajo, enseñando sus cuatro esquinas en pico.
 *
 * La causa era una regla de WooCommerce: `object-fit: contain !important` sobre
 * cualquier imagen de producto sin proporción declarada —la clase
 * `--aspect-ratio-auto`—. Y tiene razón: sin saber qué forma tiene el marco,
 * recortar sería decidir por la tienda qué parte del producto sobra. Ganarle
 * con otro `!important` habría sido discutir con una decisión sensata.
 *
 * Lo que faltaba era decirle la proporción. Las cuatro plantillas la declaran
 * en el bloque de la imagen, así que WooCommerce deja de estar a ciegas y pone
 * la foto a llenar el marco por su cuenta. De paso la proporción queda donde se
 * cambia —Dimensiones del bloque, cuadrada o rectangular— en vez de en una
 * regla del tema que nadie encontraría.
 */

/*
 * Las miniaturas, redondas por las cuatro esquinas.
 *
 * WooCommerce solo les redondea las de arriba, porque marca la activa con un
 * filo de color pegado al borde inferior, y un filo recto pide una esquina
 * recta. El filo se cambia por un contorno alrededor de la miniatura entera:
 * dice lo mismo, no obliga a ninguna forma, y así la miniatura tiene la misma
 * esquina que la foto grande a la que pertenece.
 */
.owari-ficha .wc-block-product-gallery-thumbnails__thumbnail__image {
	border-radius: var(--mdb-border-radius);
}

.owari-ficha .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	border-bottom: 0;
	box-shadow: 0 0 0 2px var(--mdb-primary);
}

/*
 * Y el corazón se queda al lado del botón, no debajo.
 *
 * `flex-wrap: wrap` estaba ahí para que en una columna estrecha nadie se
 * saliera, pero lo que hacía era descolgar el corazón a un renglón para él
 * solo: el botón se estiraba a todo el ancho y el corazón aparecía debajo,
 * suelto, como si fuera otra cosa. Al lado del botón es donde se lee como la
 * otra manera de guardar este producto.
 *
 * Lo que cede ahora es el botón, que encoge —`flex: 0 1 auto` con `min-width`
 * a cero— en vez de empujar. El corazón no encoge nunca: es un icono dentro de
 * un círculo y encogerlo lo deforma.
 *
 * La vista de imagen a la derecha se queda fuera a propósito: ahí los dos son
 * botones anchos, uno debajo del otro, y es lo que pide su diseño.
 */
.owari-ficha:not(.owari-ficha-espejo) .owari-ficha-comprar {
	flex-wrap: nowrap;
	align-items: center;
}

.owari-ficha:not(.owari-ficha-espejo) .owari-ficha-comprar > .wp-block-button {
	flex: 0 1 auto;
	min-width: 0;
}

.owari-ficha:not(.owari-ficha-espejo) .owari-ficha-comprar .owari-favorito {
	flex: 0 0 auto;
}
/*
 * Y el cursor avisa de que ahí se mira de cerca.
 *
 * Al pulsar la foto se abre a pantalla completa. El cursor lo dice antes de
 * pulsar: `zoom-in` es el que usan todos los visores de foto, así que no hay
 * que enseñárselo a nadie.
 */
.owari-ficha .wc-block-product-gallery-large-image__wrapper img {
	cursor: zoom-in;
}

/*
 * ── La ficha de fábrica ───────────────────────────────────────────────────
 *
 * Ya no la hay: el tema trae su propia `single-product.html`, así que todo
 * producto sin vista elegida se pinta con la de tira. Por eso aquí no queda
 * CSS para la galería clásica de WooCommerce —la de flexslider—: no se usa, y
 * un montón de reglas que nadie puede comprobar envejece peor que no tenerlas.
 *
 * Lo que sí se queda es el filtro de PHP que cambia su insignia de «¡Oferta!»
 * por las etiquetas del tema (`owari_tema_ficha_oferta`), porque ese sí sirve
 * en cuanto alguien vuelva a la plantilla de WooCommerce a propósito.
 */

/*
 * La foto de cada línea del carrito.
 *
 * WooCommerce la deja como venga: sin proporción, sin recorte y con las cuatro
 * esquinas en pico. En una lista donde todo lo demás —los botones, los avisos,
 * las tarjetas de la tienda, la ficha— tiene la esquina blanda de MDB, esas
 * fotos se leen como pegadas de otro sitio.
 *
 * El redondeo es el grande, el mismo que la foto de un producto en la rejilla y
 * en la ficha: es la misma foto, y no puede tener una esquina distinta según en
 * qué lista aparezca.
 *
 * Cuadrada y recortada, además de redondeada. Una lista de cuatro cosas donde
 * cada foto tiene su propia forma no se lee como una lista, se lee como cuatro
 * cosas sueltas: lo que ordena la vista es que la columna de fotos sea una
 * columna, todas del mismo tamaño y alineadas.
 *
 * Vale para los dos carritos —el cajón del menú y la página— porque los dos
 * usan la misma clase.
 */
.wc-block-cart-item__image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--mdb-border-radius-lg);
}

/*
 * Y un fondo debajo, para las fotos con transparencia.
 *
 * Un PNG recortado sobre el blanco del cajón se queda flotando sin forma; con
 * el panel detrás se ve dónde empieza y dónde acaba, que es lo mismo que hace
 * la vista de ficha con la foto sobre panel suave.
 */
.wc-block-cart-item__image {
	background-color: var(--owari-tienda-panel, color-mix(in srgb, var(--mdb-body-color) 5%, transparent));
	border-radius: var(--mdb-border-radius-lg);
	overflow: hidden;
	align-self: start;
}

/*
 * ── El cajón del carrito ──────────────────────────────────────────────────
 *
 * WooCommerce apila cada línea en columna: nombre, precio, la descripción
 * entera del producto, y abajo la cantidad con una papelera al lado. Sale una
 * fila de siete centímetros de alto por cada cosa comprada, con la descripción
 * ocupando la mitad —que en un carrito ya no se lee: quien lo tiene ahí ya sabe
 * lo que es— y la papelera pidiendo puntería.
 *
 * Se reordena a lo que hace cualquier carrito que funcione: el nombre arriba y
 * a su derecha la manera de quitarlo; debajo, la cantidad a un lado y lo que
 * cuesta al otro.
 */

/*
 * El reparto de la línea.
 *
 * `display: contents` en el bloque de la cantidad es lo que hace posible todo
 * esto sin tocar el marcado: la papelera vive DENTRO de ese bloque, junto al
 * selector, y desde ahí no se la puede subir al renglón del nombre. Con
 * `contents` el bloque deja de pintar caja y sus dos hijos pasan a ser piezas
 * del mismo reparto que el nombre, cada una colocable donde toque.
 */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap.wc-block-cart-item__wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.15rem 0.75rem;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity.wc-block-cart-item__quantity.wc-block-cart-item__quantity {
	display: contents;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-components-product-name {
	grid-area: 1 / 1;
}

/* Sin `>`: `display: contents` cambia el reparto pero no el árbol del DOM, y el
 * botón sigue colgando del bloque de la cantidad. Un hijo directo aquí no casa
 * con nada. */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap .wc-block-cart-item__remove-link {
	grid-area: 1 / 2;
	justify-self: end;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__prices {
	grid-area: 2 / 1 / auto / -1;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-components-product-metadata {
	grid-area: 3 / 1 / auto / -1;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap .wc-block-components-quantity-selector.wc-block-components-quantity-selector {
	grid-area: 4 / 1;
	justify-self: start;
	margin: 0.35rem 0 0;
}

/*
 * Quitar deja de ser una papelera y pasa a decirlo.
 *
 * Un icono de papelera de veinticuatro píxeles al lado de un selector de
 * cantidad es un blanco pequeño para algo irreversible, y en una lista de
 * cuatro cosas hay que acertar cuál. La palabra ocupa lo mismo, se lee y es
 * más difícil de pulsar por error.
 *
 * El texto lo pone PHP en una variable, no el CSS: una palabra escrita aquí
 * dentro no pasaría por gettext y se quedaría en un idioma para siempre. El
 * `aria-label` del botón no vale para imprimirlo —dice «Eliminar Reloj con
 * estilo del carrito», la frase entera con el nombre del producto dentro—,
 * pero se queda como está: es lo que tiene que oír quien no ve el renglón.
 */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link {
	width: auto;
	height: auto;
	padding: 0;
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
	font-size: 0.8125rem;
	line-height: 1.4;
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
}

.wc-block-cart-item__remove-link > svg {
	display: none;
}

.wc-block-cart-item__remove-link::after {
	content: var(--owari-carrito-quitar, "Remove");
}

/*
 * En rojo al pasar por encima, como el de favoritos.
 *
 * El hover que trae WooCommerce lo pone gris, que en un «quitar» se lee como
 * desactivado: parece que ya no se puede pulsar justo cuando el cursor está
 * encima. Rojo dice lo que va a pasar, y es el mismo rojo con el que se quita
 * algo en el otro cajón.
 */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link:hover,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link:focus-visible {
	color: var(--mdb-danger);
	text-decoration: underline;
}

/*
 * La descripción del producto, fuera.
 *
 * Quien tiene algo en el carrito ya lo eligió: dos líneas contándole otra vez
 * de qué está hecho solo alejan el precio y el botón de pagar. Lo que sí se
 * queda son los detalles de la variación —«Color: Azul / Talla: CH»—, que ahí
 * no son adorno: son lo que distingue una línea de otra del mismo producto.
 */
.wc-block-components-product-metadata > div:not(.wc-block-components-product-details) {
	display: none;
}

/*
 * Y esos detalles, sin sangrar y sin viñetas.
 *
 * WooCommerce los pinta en un `<ul>`, y MDB —como cualquier hoja base— sangra
 * treinta y dos píxeles todas las listas y les pone su punto. Aquí eso deja
 * «Color: Azul» un centímetro a la derecha del nombre al que pertenece y con un
 * topo delante, como si fuera una lista de la compra dentro de otra.
 *
 * Es una lista de verdad —son dos datos sueltos del mismo producto— así que se
 * queda en `<ul>` y lo que se quita es el adorno, no el marcado.
 *
 * Vale para los dos carritos, que traen los mismos detalles con el mismo
 * sangrado de más.
 */
.wc-block-components-product-details {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

/* El rótulo apagado y el valor no: lo que distingue una línea de otra es el
 * «Azul», no el «Color». */
.wc-block-components-product-details__name {
	color: var(--mdb-secondary-color);
}

/*
 * Y el precio de la línea, a la altura de la cantidad.
 *
 * WooCommerce lo pone en su propia celda a la derecha, alineado arriba, o sea
 * enfrente del nombre. Bajarlo lo deja enfrente de la cantidad, que es de lo
 * que es el precio: tantas unidades, tanto dinero.
 */
table.wc-block-cart-items .wc-block-cart-items__row > .wc-block-cart-item__total.wc-block-cart-item__total {
	align-self: end;
}

/*
 * El pie: lo que suma, y una sola manera de seguir.
 *
 * Los dos botones lado a lado se leen como dos caminos del mismo peso, y no lo
 * son: uno lleva a pagar y el otro a mirar la misma lista en otra página. El de
 * pagar se lleva el ancho entero y el otro se queda como lo que es, un enlace.
 */
.wc-block-mini-cart__footer-actions {
	flex-direction: column;
	gap: 0.5rem;
}

/* El marcado los trae al revés —primero el carrito, después pagar—, y en una
 * columna eso deja el atajo encima de la acción. */
.wc-block-mini-cart__footer-actions > .wc-block-mini-cart__footer-checkout {
	order: -1;
	width: 100%;
}

/* Con la clase repetida: el contorno no es un borde sino una sombra interior
 * del estilo de botón, y con un solo peso no se le ganaba. */
.wc-block-mini-cart__footer-actions > .wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart {
	align-self: center;
	width: auto;
	min-height: 0;
	padding: 0;
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
	font-size: 0.875rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	background: none;
	border: 0;
	/* El contorno no es un borde sino una sombra interior del botón de contorno
	 * de WooCommerce, escrita con un peso al que solo se le gana escalando la
	 * cascada tres veces. Una excepción marcada es más honesta que un selector
	 * de seis clases que nadie sabría por qué está así. */
	box-shadow: none !important;
}

/*
 * Y el color, dicho a mano.
 *
 * El hover de un botón de contorno de WooCommerce rellena de azul y pone el
 * texto en blanco. Aquí se le quitó el relleno pero no el texto: al pasar por
 * encima, el enlace se volvía blanco sobre el fondo blanco del cajón y
 * desaparecía. Como enlace que es, lo que hace al pasar por encima es
 * oscurecerse y subrayarse.
 */
.wc-block-mini-cart__footer-actions > .wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__footer-actions > .wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart:focus-visible {
	color: color-mix(in srgb, var(--owari-menu-hover, var(--mdb-primary)) 82%, black);
	text-decoration: underline;
	background: none;
	box-shadow: none;
}

/* El total, con el peso de un total. */
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label,
.wc-block-mini-cart__footer-subtotal .wc-block-components-formatted-money-amount {
	font-size: 1rem;
	font-weight: 600;
}

/*
 * ── Las dos cabeceras de cajón, iguales ───────────────────────────────────
 *
 * El del carrito y el de favoritos son la misma cosa —un panel que entra por un
 * lado con una lista dentro— y tenían dos cabeceras distintas: la del carrito
 * con el título a 32 px y una equis de cincuenta, la de favoritos con el título
 * a la medida «medio» y una equis de texto. Puestos uno al lado del otro no
 * parecían del mismo sitio.
 *
 * Los dos van ahora con el mismo título y la misma equis. Un cajón no es una
 * página: su título no compite con nada, solo dice de qué es la lista, y a 32 px
 * se comía el primer renglón de lo que hay que leer.
 */
h2.wc-block-mini-cart__title.wc-block-mini-cart__title,
.owari-favs__titulo.owari-favs__titulo {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

/*
 * Y la raya debajo, que ya tenía el de favoritos.
 *
 * Separa el título de la lista sin ponerle un fondo distinto: en un panel
 * estrecho, una franja de color por cabecera es mucho color para decir «esto
 * es el título». La raya lo dice con un píxel.
 */
h2.wc-block-mini-cart__title.wc-block-mini-cart__title {
	/* El mismo sangrado que la lista de abajo: el cuerpo del cajón lleva 16 px
	 * y el título venía pegado al borde, así que el nombre del panel empezaba
	 * un centímetro antes que la primera foto. */
	padding: 0 1rem 1rem;
	border-bottom: 1px solid var(--mdb-border-color);
}

/*
 * Y el título deja de contar.
 *
 * WooCommerce escribe «Tu carrito (artículos: 3)». El número ya está en la
 * insignia del icono que se acaba de pulsar para llegar aquí, y volver a
 * decirlo entre paréntesis, en un título, es hacer que el título cambie de
 * ancho cada vez que alguien suma una unidad.
 *
 * Va en su propio `span`, así que se apaga sin tocar el marcado ni perder nada:
 * la lista de debajo dice lo mismo, y mejor.
 */
.wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-items-counter-block {
	display: none;
}

/*
 * La equis, del tamaño de una equis.
 *
 * La de WooCommerce es un botón de cincuenta píxeles con el icono dentro; la de
 * favoritos, un carácter a 1,6 rem. Las dos pasan a ser lo mismo: un icono
 * pequeño y gris que se oscurece al pasar por encima, sin fondo ni borde, que es
 * lo que se espera de un cerrar.
 */
button.wc-block-components-drawer__close.wc-block-components-drawer__close,
.owari-favs__cerrar.owari-favs__cerrar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	min-height: 0;
	padding: 0;
	color: var(--mdb-secondary-color);
	font-size: 1.25rem;
	line-height: 1;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	transition: color 0.2s ease;
	/*
	 * Sin el margen negativo de WooCommerce.
	 *
	 * El suyo es un botón de 50 px colocado a 12 px de las esquinas y con un
	 * `margin: -20px` que devuelve su centro óptico al sitio. Al bajarlo a 32,
	 * esa compensación deja de compensar nada: lo empujaba veinte píxeles
	 * arriba y a la derecha, y la equis se salía del cajón.
	 */
	margin: 0;
}

/* Este SVG sí trae `viewBox`, así que aquí darle medidas escala el dibujo. */
button.wc-block-components-drawer__close.wc-block-components-drawer__close svg {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

button.wc-block-components-drawer__close.wc-block-components-drawer__close:hover,
button.wc-block-components-drawer__close.wc-block-components-drawer__close:focus-visible,
.owari-favs__cerrar.owari-favs__cerrar:hover,
.owari-favs__cerrar.owari-favs__cerrar:focus-visible {
	color: var(--mdb-body-color);
	background: none;
	box-shadow: none;
}

/*
 * ── La página del carrito ─────────────────────────────────────────────────
 *
 * El cajón del menú y la página del carrito comparten marcado: la misma tabla,
 * las mismas clases, la misma línea. Lo que no comparten es el sitio. El cajón
 * son trescientos y pico píxeles de ancho y por eso ahí todo va apilado; la
 * página tiene el ancho entero y, apilada, deja media pantalla en blanco a la
 * derecha de cada nombre.
 *
 * Así que aquí la línea se abre en tres bloques —la foto, lo que es, lo que
 * cuesta— y el resumen se convierte en la tarjeta que espera cualquiera al
 * final de una compra. Todo lo de esta sección va colgando de `.wc-block-cart`,
 * que solo existe en la página: el cajón sigue con lo suyo sin enterarse.
 *
 * El peso de los selectores no es capricho. WooCommerce escribe
 * `table.wc-block-cart-items .wc-block-cart-items__row .X` —(0,3,1)— y alguna
 * de esta misma página llega a (0,4,1). Una clase suelta no le gana a eso
 * ninguna vez, así que el prefijo se repite entero y, cuando hace falta, la
 * clase del final va dos veces.
 */

/*
 * La tabla deja de ser tabla.
 *
 * Una tabla reparte por columnas iguales para todas las filas, y aquí cada
 * línea tiene que repartirse sola: la foto mide lo mismo siempre, pero el
 * nombre, la cantidad y el precio no. Con la tabla desmontada cada `tr` es una
 * rejilla independiente y coloca lo suyo donde toca.
 *
 * La cabecera «PRODUCTO / TOTAL» se va con ella: eran los rótulos de unas
 * columnas que ya no existen, y encima de una lista de cosas compradas no
 * hacen falta.
 */
.wc-block-cart table.wc-block-cart-items,
.wc-block-cart table.wc-block-cart-items > tbody {
	display: block;
	width: 100%;
}

.wc-block-cart table.wc-block-cart-items > thead {
	display: none;
}

/*
 * Cada línea, en cuatro columnas.
 *
 *   ┌──────┬─────────────────────────┬──────────────┐
 *   │      │ Nombre                  │ Cantidad     │
 *   │ foto │ Color: Azul             │ 100$  84,87$ │
 *   │      │ Quitar │ Guardar        │ Ahorra 30$   │
 *   └──────┴─────────────────────────┴──────────────┘
 *
 * Son cuatro y no tres porque las dos acciones de abajo —quitar y guardar—
 * viven en sitios distintos del marcado y no se pueden meter en la misma
 * casilla sin moverlas de sitio a mano. Cada una se queda con su columna: la de
 * quitar mide lo que mide su palabra y la siguiente se lleva el resto.
 *
 * `display: contents` en las tres capas de en medio —la celda, el envoltorio y
 * el grupo de la cantidad— es lo que hace posible todo esto sin tocar el
 * marcado: dejan de pintar caja y lo que llevan dentro pasa a ser pieza de la
 * rejilla de la línea, colocable donde haga falta aunque en el árbol siga
 * colgando tres niveles más abajo.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 90px max-content minmax(0, 1fr) auto;
	/*
	 * Las cuatro filas van escritas aunque casi todas se calculen solas: sin
	 * rejilla explícita, el `-1` con el que la foto abarca la línea entera
	 * apunta al final de una rejilla vacía —o sea, a la primera fila— y la foto
	 * estiraba ella sola ese renglón a noventa píxeles.
	 *
	 *   1 nombre     · cantidad
	 *   2 variación  · precio del producto
	 *   3            · precio de la línea
	 *   4 acciones   · lo que se ahorra
	 */
	grid-template-rows: auto auto auto auto;
	gap: 0.35rem 1rem;
	align-items: start;
	padding: 1.25rem 0;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap.wc-block-cart-item__wrap,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity.wc-block-cart-item__quantity,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total.wc-block-cart-item__total,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: contents;
}

/* La foto, en su columna y de arriba abajo. */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	grid-column: 1;
	grid-row: 1 / -1;
	width: 90px;
	padding: 0;
}

/*
 * El nombre, del color del texto y no del de un enlace.
 *
 * Sigue siendo un enlace y sigue llevando al producto, pero en una lista de
 * cinco líneas cinco titulares en azul subrayado se leen como cinco avisos. El
 * subrayado aparece al pasar por encima, que es cuando hace falta saber que se
 * puede pulsar.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	grid-column: 2 / 4;
	grid-row: 1;
	color: var(--mdb-body-color);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:focus-visible {
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
	text-decoration: underline;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata {
	grid-column: 2 / 4;
	grid-row: 2;
	margin: 0;
	font-size: 0.875rem;
}

/*
 * Las dos acciones, abajo y en el mismo renglón.
 *
 * Quitar algo y guardarlo para después son las dos únicas cosas que se pueden
 * hacer con una línea del carrito, y van juntas al pie del nombre —como el
 * modelo— separadas por una raya para que se lean como dos y no como una frase.
 *
 * En la última fila, que es donde las pone el modelo: abajo a la izquierda lo
 * que se puede hacer, abajo a la derecha lo que se ahorra.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link {
	grid-column: 2;
	grid-row: 4;
	align-self: end;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.25rem 0 0;
}

/*
 * Y aquí la papelera vuelve.
 *
 * En el cajón se apaga: es un panel estrecho donde «Quitar» va al lado del
 * nombre, y un icono más ahí aprieta el renglón. En la página hay sitio y hace
 * falta: al lado va el corazón, que sí lleva el suyo, y una acción con icono
 * junto a otra sin él no se leen como dos opciones del mismo tipo.
 *
 * El icono no sustituye a la palabra, la acompaña: quitar algo de un carrito no
 * se ofrece con un dibujo de veinticuatro píxeles y nada más.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link > svg {
	display: block;
	flex: none;
	width: 1rem;
	height: 1rem;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .owari-carrito-favorito {
	grid-column: 3;
	grid-row: 4;
	align-self: end;
	justify-self: start;
	margin: 0.25rem 0 0;
}

/*
 * El corazón de la línea, con el aspecto de «Quitar» y no el de la ficha.
 *
 * En la ficha y en la rejilla es un círculo con relieve encima de la foto,
 * porque ahí compite con una imagen. Aquí compite con la palabra de al lado, y
 * un círculo flotante junto a un enlace de texto no se leen como dos opciones
 * del mismo tipo. Así que se apaga todo lo de la ficha —la posición absoluta,
 * el fondo, la sombra, el tamaño fijo— y queda el mismo enlace de texto con un
 * corazón delante.
 */
.owari-carrito-favorito.owari-carrito-favorito {
	position: static;
	inset: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	width: auto;
	height: auto;
	padding: 0;
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
	font-size: 0.8125rem;
	line-height: 1.4;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

.owari-carrito-favorito .owari-favorito__icono {
	width: 1rem;
	height: 1rem;
}

/* El rótulo sí se imprime aquí: es la mitad de lo que se está ofreciendo. */
.owari-carrito-favorito .owari-favorito__texto {
	display: inline;
}

/*
 * La raya que las separa.
 *
 * Es del borde y no del texto: separa, no dice nada. Va en el corazón y no
 * entre los dos porque entre dos casillas de una rejilla no hay dónde ponerla.
 */
.owari-carrito-favorito.owari-carrito-favorito::before {
	content: "";
	width: 1px;
	height: 0.875rem;
	margin-right: 0.75rem;
	background-color: var(--mdb-border-color);
}

.owari-carrito-favorito.owari-carrito-favorito:hover,
.owari-carrito-favorito.owari-carrito-favorito:focus-visible {
	color: var(--mdb-danger);
	background: none;
	transform: none;
	text-decoration: underline;
}

/* Marcado: el corazón rojo, sin el círculo rojo de la ficha. */
.owari-carrito-favorito.owari-carrito-favorito.owari-favorito--marcado {
	color: var(--mdb-danger);
	background: none;
}

/*
 * La columna del dinero.
 *
 * De arriba abajo: la cantidad, lo que vale uno, lo que vale la línea y lo que
 * se ahorra. Cada pieza con su fila escrita, porque en el marcado vienen en
 * otro orden —el precio antes que la cantidad— y colocándose solas saldrían así.
 *
 * Una fila sin nada dentro no ocupa nada, así que esconder uno de los dos
 * precios no deja el hueco de la fila que tenía.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector.wc-block-components-quantity-selector,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper > .wc-block-components-product-price,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-sale-badge {
	grid-column: 4;
	justify-self: end;
	text-align: right;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector.wc-block-components-quantity-selector {
	grid-row: 1;
	margin: 0 0 0.5rem;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
	grid-row: 2;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper > .wc-block-components-product-price {
	grid-row: 3;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-sale-badge {
	grid-row: 4;
}

/*
 * El mismo número dos veces, no.
 *
 * WooCommerce da dos precios por línea: el del producto —con su tachado si está
 * de oferta— y el de la línea entera. Con una unidad son el mismo número, y
 * repetirlo uno debajo del otro solo hace dudar de si se está cobrando dos
 * veces. Con una unidad manda el del producto, que es el que trae el tachado;
 * con más de una manda el de la línea, y el del producto se queda arriba,
 * pequeño y con su «cada uno» detrás para que no haya duda de qué es cada cifra.
 */
.wc-block-cart .wc-block-cart-items__row:has(.wc-block-components-quantity-selector__input[value="1"]) .wc-block-cart-item__total-price-and-sale-badge-wrapper > .wc-block-components-product-price {
	display: none;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper > .wc-block-components-product-price {
	font-size: 1.0625rem;
	font-weight: 600;
}

.wc-block-cart .wc-block-cart-items__row:not(:has(.wc-block-components-quantity-selector__input[value="1"])) .wc-block-cart-item__prices {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--mdb-secondary-color);
}

.wc-block-cart .wc-block-cart-items__row:not(:has(.wc-block-components-quantity-selector__input[value="1"])) .wc-block-cart-item__prices::after {
	content: var(--owari-carrito-cada, " each");
}

/* El precio anterior, tachado y apagado: está para comparar, no para leerse. */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-price__regular {
	margin-right: 0.35rem;
	color: var(--mdb-secondary-color);
	font-weight: 400;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-price__value.is-discounted {
	text-decoration: none;
}

/*
 * Lo que se ahorra, en rojo y sin caja.
 *
 * WooCommerce lo pinta como una etiqueta con fondo verde, del tamaño de un
 * sello. En el modelo es una línea de texto en rojo debajo del precio, que es
 * donde se mira: al lado del número que cambia.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-sale-badge.wc-block-components-sale-badge {
	margin: 0.15rem 0 0;
	padding: 0;
	color: var(--mdb-danger);
	font-size: 0.8125rem;
	font-weight: 400;
	background: none;
	border: 0;
}

/*
 * La cantidad, en un campo de MDB.
 *
 * El de WooCommerce es una pastilla con el número en medio y los dos signos a
 * los lados, sin decir en ningún sitio qué es ese número. En el modelo es un
 * campo con su nombre encima, montado sobre el borde, que es como se ve
 * cualquier otro campo del tema. El rótulo lo trae PHP en una variable porque
 * una palabra escrita en el CSS no pasaría por la traducción.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector.wc-block-components-quantity-selector {
	position: relative;
	width: auto;
	min-width: 7.5rem;
	padding: 0.4rem 0.25rem 0.1rem;
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
	background-color: transparent;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector.wc-block-components-quantity-selector::before {
	content: var(--owari-carrito-cantidad, "Quantity");
	position: absolute;
	top: 0;
	left: 0.6rem;
	padding: 0 0.3rem;
	color: var(--mdb-secondary-color);
	font-size: 0.75rem;
	line-height: 1;
	background-color: var(--mdb-body-bg);
	transform: translateY(-50%);
}

/*
 * Los dos signos, del tamaño de un signo.
 *
 * Los de WooCommerce ocupan casi la mitad del campo cada uno y el número queda
 * arrinconado en medio. Aquí el número es lo que se lee y los signos son lo que
 * se pulsa: pequeños, apagados, y se encienden al acercarse.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector__button.wc-block-components-quantity-selector__button {
	width: 1.75rem;
	min-width: 0;
	padding: 0;
	color: var(--mdb-secondary-color);
	font-size: 1rem;
	background: none;
	border: 0;
	opacity: 1;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector__button:hover:not(:disabled),
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector__button:focus-visible {
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
	background: none;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector__input.wc-block-components-quantity-selector__input {
	min-width: 2rem;
	padding: 0;
	color: var(--mdb-body-color);
	font-size: 0.9375rem;
	font-weight: 500;
	background: none;
	border: 0;
}

/*
 * La raya entre líneas.
 *
 * WooCommerce pinta el borde en las celdas, y sin celdas no queda ninguno. Va
 * en la línea entera y solo entre líneas: encima de la primera no hace falta
 * —ya la separa el aire de arriba— y debajo de la última tampoco, que cerraría
 * una lista que no está cerrada.
 */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row + .wc-block-cart-items__row {
	border-top: 1px solid var(--mdb-border-color);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row > td {
	border: 0;
}

/*
 * ── El resumen, en dos tarjetas ───────────────────────────────────────────
 *
 * El modelo tiene dos: la de lo que suma —con el botón de pagar dentro— y la
 * del cupón debajo, separada. WooCommerce las trae todas en fila y con el
 * cupón arriba del todo, que es justo donde no se mira: quien llega al carrito
 * quiere ver cuánto es y seguir, y el cupón es lo que se busca después, si es
 * que se busca.
 *
 * Las dos tarjetas se pintan con los dos pseudoelementos de la columna, no con
 * un fondo en cada bloque: el fondo tendría que envolver cinco piezas que en el
 * marcado son hermanas y no se pueden meter en una caja común sin tocar lo que
 * pinta React. Cada pseudoelemento ocupa las filas que le tocan de la rejilla y
 * se queda debajo, que es todo lo que tiene que hacer un fondo.
 */
.wc-block-cart .wc-block-cart__sidebar {
	display: grid;
	grid-template-columns: 1fr;
	/*
	 * Las filas, en orden: aire, título, sumas, total, pagos exprés, botón, aire
	 * y cupón.
	 *
	 * Los dos aires son filas de verdad y no márgenes. El de abajo, porque un
	 * margen quedaría dentro de la tarjeta y la alargaría por debajo del botón,
	 * y entonces no habría dos tarjetas sino una con un escalón.
	 *
	 * Y el de arriba, porque el sangrado de la tarjeta no puede vivir en su
	 * primera pieza: WooCommerce esconde el título en pantallas estrechas —lo
	 * deja en `display: none`, no en un rincón—, y con el sangrado puesto ahí la
	 * tarjeta se quedaba en el móvil con la primera cifra pegada al borde de
	 * arriba. Una fila fija no depende de qué se vea.
	 */
	grid-template-rows: 1.5rem auto auto auto auto auto 1.5rem auto;
	align-content: start;
	padding: 0;
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
	display: contents;
}

.wc-block-cart .wc-block-cart__sidebar > *,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > * {
	grid-column: 1;
	z-index: 1;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.wc-block-cart .wc-block-cart__sidebar::before,
.wc-block-cart .wc-block-cart__sidebar::after {
	content: "";
	grid-column: 1;
	z-index: 0;
	background-color: var(--mdb-body-bg);
	border-radius: var(--mdb-border-radius-lg);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/* La tarjeta de arriba llega hasta el botón; la de abajo es solo el cupón. */
.wc-block-cart .wc-block-cart__sidebar::before {
	grid-row: 1 / 7;
}

.wc-block-cart .wc-block-cart__sidebar::after {
	grid-row: 8;
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > h2.wc-block-cart__totals-title {
	grid-row: 2;
	margin: 0;
	padding-bottom: 1rem;
	color: var(--mdb-body-color);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	/* WooCommerce lo escribe en versalitas de 0,75 rem, que en una tarjeta con
	 * su propio fondo se lee como el pie de una tabla y no como su título. */
	text-transform: none;
	letter-spacing: 0;
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-totals-block {
	grid-row: 3;
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper:last-child {
	grid-row: 4;
}

.wc-block-cart .wc-block-cart__payment-options {
	grid-row: 5;
}

.wc-block-cart .wc-block-cart__submit {
	grid-row: 6;
	padding-top: 1.25rem;
	padding-bottom: 1.5rem;
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	grid-row: 8;
}

/*
 * Las sumas: rótulo a la izquierda, cifra a la derecha, sin adornos.
 *
 * WooCommerce las deja del tamaño del texto normal y con el mismo peso que el
 * total, así que las cinco líneas pesan lo mismo y hay que leerlas todas para
 * encontrar la que importa.
 */
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item,
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item {
	padding: 0;
	font-size: 0.875rem;
}

.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item__label {
	color: var(--mdb-secondary-color);
	font-weight: 400;
}

/*
 * Solo el alto: el ancho ya lo pone el sangrado de la tarjeta.
 *
 * Con `padding` entero, esta regla —que gana por peso— le devolvía el cero a
 * izquierda y derecha, y el bloque del cupón, que también lleva esta clase, se
 * quedaba con su título pegado al canto de su tarjeta.
 */
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	padding-block: 0.35rem;
	border: 0;
}

/* El cupón sí manda en el suyo: es una tarjeta entera, no una fila de sumas. */
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	padding-block: 1.25rem;
}

/*
 * El total, con el peso de un total y una raya encima.
 *
 * Es la única cifra de la tarjeta que se busca a propósito; el resto son el
 * camino hasta ella.
 */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper:last-child {
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--mdb-border-color);
}

.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item,
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
	font-size: 1rem;
}

.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--mdb-body-color);
	font-weight: 600;
}

/* El botón de pagar, a todo el ancho de su tarjeta. */
.wc-block-cart .wc-block-cart__submit-container {
	padding: 0;
}

.wc-block-cart .wc-block-cart__submit-button {
	width: 100%;
}

/*
 * El cupón, en su propia tarjeta y cerrado.
 *
 * Se queda plegado a propósito: un campo de código promocional abierto delante
 * de quien no tiene ninguno es una pregunta que no se puede contestar, y hay
 * quien se va a buscar un cupón antes que pagar. Lo que sí cambia es el
 * aspecto: deja de ser una fila de acordeón dentro del resumen y pasa a ser el
 * título de su tarjeta, con la flecha a la derecha.
 */
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
	justify-content: space-between;
	width: 100%;
	padding: 0;
	color: var(--mdb-body-color);
	font-size: 1rem;
	font-weight: 600;
}

.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
	order: 1;
	fill: var(--mdb-secondary-color);
}

/*
 * ── El carrito estrecho ───────────────────────────────────────────────────
 *
 * Debajo de la tableta las cuatro columnas no caben: el nombre se parte en
 * cuatro renglones para dejarle sitio a un precio que cabría solo. Se pasa a
 * dos —foto y todo lo demás— y el dinero baja a su propia fila, alineado a la
 * izquierda como el resto: en una columna estrecha, alinear a la derecha una
 * sola cosa la deja sin nada con que alinearse.
 */
@media (max-width: 781px) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 72px max-content minmax(0, 1fr);
		/*
		 *   1 nombre
		 *   2 variación
		 *   3 precio del producto
		 *   4 precio de la línea
		 *   5 lo que se ahorra
		 *   6 cantidad
		 *   7 acciones
		 */
		grid-template-rows: auto auto auto auto auto auto auto;
		column-gap: 0.75rem;
	}

	/*
	 * La foto, de arriba abajo.
	 *
	 * Abarcando solo las dos primeras filas se llevaba su alto entero a un
	 * nombre de un renglón, y entre el nombre y el precio quedaban cincuenta
	 * píxeles de nada. Abarcando la línea completa —que aquí siempre es más alta
	 * que la foto— no estira ninguna fila.
	 */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		width: 72px;
		grid-row: 1 / -1;
	}

	/*
	 * Y el dinero, en la columna del texto y alineado con él.
	 *
	 * Aquí no hay sitio para una columna propia a la derecha: le quitaría al
	 * nombre la mitad de lo que tiene. Cada cifra en su renglón, a la izquierda
	 * como todo lo demás, que en una columna estrecha alinear a la derecha una
	 * sola cosa la deja sin nada con que alinearse.
	 */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector.wc-block-components-quantity-selector,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper > .wc-block-components-product-price,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-sale-badge {
		grid-column: 2 / -1;
		justify-self: start;
		text-align: left;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper > .wc-block-components-product-price {
		grid-row: 4;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-sale-badge {
		grid-row: 5;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector.wc-block-components-quantity-selector {
		grid-row: 6;
		margin: 0.75rem 0 0.25rem;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .owari-carrito-favorito {
		grid-row: 7;
	}
}

/*
 * ── El carrito vacío ──────────────────────────────────────────────────────
 *
 * Debajo del «tu carrito está vacío» WooCommerce pone una rejilla con las
 * novedades de la tienda, que es lo correcto: quien llega a un carrito vacío no
 * viene a que le den la razón, viene a comprar algo.
 *
 * Lo que pone es su rejilla **antigua** —`wc-block-grid`, la de antes de los
 * bloques de producto de ahora—, y le da igual el diseño de tarjeta que se haya
 * elegido para la tienda: no lo entiende. Sale con las fotos en pico y los
 * nombres en azul subrayado, o sea, con la misma foto de la tienda pintada de
 * otra manera en la página de al lado.
 *
 * Aquí no se rehace esa rejilla —es de WooCommerce y está de salida—, solo se le
 * quitan las tres cosas que la delatan. Y va sin `.wc-block-cart` delante a
 * propósito: la misma rejilla sale en los bloques antiguos de «productos por
 * categoría» y compañía, y ahí desentona igual.
 */
.wc-block-grid__product-image img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--mdb-border-radius-lg);
}

/*
 * La tarjeta entera es un enlace, así que el azul y el subrayado se los lleva
 * todo lo que hay dentro: el nombre, el precio y hasta el pie de la foto.
 */
.wc-block-grid__product-link.wc-block-grid__product-link,
.wc-block-grid__product-title.wc-block-grid__product-title {
	color: var(--mdb-body-color);
	text-decoration: none;
}

/*
 * El precio rebajado va en un `<ins>`, que el navegador subraya por su cuenta.
 * Al lado del anterior tachado, un precio subrayado se lee como otro enlace.
 */
.wc-block-grid__product-price ins {
	text-decoration: none;
}

.wc-block-grid__product-link:hover .wc-block-grid__product-title,
.wc-block-grid__product-link:focus-visible .wc-block-grid__product-title {
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
	text-decoration: underline;
}

/*
 * Y la insignia de oferta, la misma pastilla roja que lleva la tienda.
 *
 * La suya es un recuadro blanco con borde; las del tema son pastillas de color.
 * Se le da la forma, no el sitio: dónde la pone WooCommerce dentro de su propia
 * tarjeta es cosa suya y moverla exigiría adivinar contra qué se posiciona.
 */
.wc-block-grid .wc-block-grid__product-onsale.wc-block-grid__product-onsale {
	padding: 0.15rem 0.55rem;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	background-color: var(--mdb-danger);
	border: 0;
	border-radius: 999px;
}

/*
 * ── La página del pago ────────────────────────────────────────────────────
 *
 * El pago de WooCommerce ya trae lo importante bien: los campos que hacen falta,
 * el orden en que se piden y una columna de resumen al lado. Lo que no trae es
 * el aire. Sale todo del mismo tamaño y con el mismo peso —el nombre de un paso
 * pesa lo que una etiqueta de campo, el resumen es una caja con un borde de
 * medio píxel, cada opción de envío va metida en su recuadro— y una página donde
 * nada destaca es una página donde hay que leerlo todo para saber qué falta.
 *
 * Aquí no se cambia ni un campo: se cambia cómo se ven. Los pasos se leen como
 * pasos, los campos se emparejan de dos en dos, las opciones dejan de vivir en
 * cajas y el resumen pasa a ser la misma tarjeta que la del carrito, que es la
 * página de la que se viene.
 */

/*
 * Los pasos, con peso de paso.
 *
 * WooCommerce los escribe del tamaño del texto normal, así que «Dirección de
 * envío» y «Ciudad» pesan lo mismo y hay que leer los dos para saber cuál es el
 * título.
 */
.wc-block-checkout .wc-block-components-checkout-step__title {
	color: var(--mdb-body-color);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

/*
 * El formulario, de dos en dos.
 *
 * WooCommerce lo reparte con anchos flexibles campo a campo, y así el nombre y
 * los apellidos salen emparejados pero la dirección se lleva el renglón entero
 * aunque a su lado quepa el apartamento. Con una rejilla de dos columnas el
 * emparejado deja de depender de qué ancho le tocó a cada campo: cabe lo que
 * cabe, dos por renglón, y lo que tenga que ocupar el renglón entero lo dice.
 *
 * El orden no se toca. Reordenar en la rejilla movería lo que se ve sin mover el
 * orden del tabulador, y quien rellena un formulario con el teclado acabaría
 * saltando de la ciudad al país y de vuelta.
 */
/*
 * La dirección y el apartamento, en el mismo renglón.
 *
 * El reparto de dos columnas lo hace WooCommerce y se queda como está: empareja
 * el nombre con los apellidos, la ciudad con la provincia y el código postal con
 * el teléfono, y por debajo de setecientos píxeles de página los pone de uno en
 * uno él solo. Rehacerlo con una rejilla propia era rehacer también ese
 * comportamiento, y salía peor.
 *
 * Lo único que cambia es la dirección: WooCommerce le da el renglón entero
 * —`flex: 0 0 100%`— y a su derecha queda un hueco donde cabe justo lo que el
 * modelo pone ahí, el apartamento. Aquí se les da la mitad a cada uno, y a la
 * misma anchura de contenedor en la que WooCommerce empareja los demás: por
 * debajo de eso todo vuelve a ir de uno en uno, incluidos estos dos.
 *
 * El campo del apartamento está escondido detrás de un enlace —«+ Añadir
 * apartamento, habitación…»— y hace bien, que es opcional. Al pulsarlo,
 * WooCommerce lo sustituye **en ese mismo sitio**: sale la pareja del modelo sin
 * enseñar el segundo campo hasta que hace falta.
 */
@container (min-width: 700px) {
	.wc-block-checkout .wc-block-components-address-form .wc-block-components-address-form__address_1,
	.wc-block-checkout .wc-block-components-address-form .wc-block-components-address-form__address_2,
	.wc-block-checkout .wc-block-components-address-form .wc-block-components-address-form__address_2-toggle {
		flex: 0 0 calc(50% - 6px);
		width: calc(50% - 6px);
	}
}

/*
 * Y el apartamento, al lado de la dirección.
 *
 * WooCommerce lo esconde detrás de un «+ Añadir apartamento, habitación…» y hace
 * bien: es opcional, y un campo vacío de más en un formulario de pago es un
 * campo que alguien se para a mirar. Lo que cambia es dónde: el enlace ocupa el
 * hueco que deja la dirección a su derecha, y al pulsarlo WooCommerce lo
 * sustituye por el campo **en ese mismo sitio**. Sale la pareja del modelo
 * —dirección y apartamento— sin enseñar el segundo hasta que hace falta.
 */
.wc-block-checkout .wc-block-components-address-form__address_2-toggle {
	align-self: center;
	margin: 0;
}

/*
 * Las opciones de envío y de pago, sin caja.
 *
 * WooCommerce mete cada lista en un recuadro redondeado y le pone otro borde a
 * la opción marcada. Son tres bordes seguidos —el de la caja, el de la opción y
 * el círculo del radio— para decir una sola cosa, y en una página que ya tiene
 * una tarjeta al lado, ese recuadro compite con ella.
 *
 * Se quedan las opciones y la raya que las separa, que es lo que hace falta para
 * leerlas como una lista. Marcada se sabe por el radio, que para eso está.
 */
.wc-block-checkout .wc-block-components-radio-control {
	border: 0;
	border-radius: 0;
	background: none;
}

/*
 * Dos clases y no una: el envío usa `__option` y el pago usa
 * `-accordion-option`, que es la misma opción con un panel que se despliega
 * debajo. Vestir solo una dejaba el envío como una lista y el pago dentro de su
 * recuadro, justo debajo, en la misma página.
 */
.wc-block-checkout .wc-block-components-radio-control__option,
.wc-block-checkout .wc-block-components-radio-control-accordion-option {
	padding: 0.85rem 0;
	border: 0;
	border-radius: 0;
	background: none;
	/* El recuadro de WooCommerce no es un borde: es una sombra hacia dentro de
	 * 1,5 px, asi que quitarle el borde no le quitaba la caja. */
	box-shadow: none;
}

.wc-block-checkout .wc-block-components-radio-control__option + .wc-block-components-radio-control__option,
.wc-block-checkout .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option {
	border-top: 1px solid var(--mdb-border-color);
}

.wc-block-checkout .wc-block-components-radio-control label.wc-block-components-radio-control__option.wc-block-components-radio-control__option,
.wc-block-checkout .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option {
	/* El recuadro de la opcion marcada es una sombra hacia dentro, y su regla
	 * lleva tres clases: con una sola no se le gana. */
	background: none;
	box-shadow: none;
}

/* El nombre de la opción manda; el precio y la explicación acompañan. */
.wc-block-checkout .wc-block-components-radio-control__label {
	color: var(--mdb-body-color);
	font-weight: 500;
}

.wc-block-checkout .wc-block-components-radio-control__secondary-label,
.wc-block-checkout .wc-block-components-radio-control__description,
.wc-block-checkout .wc-block-components-radio-control__secondary-description {
	color: var(--mdb-secondary-color);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/*
 * ── El resumen del pedido ─────────────────────────────────────────────────
 *
 * La misma tarjeta que la del carrito. Se llega aquí desde ahí, y una columna
 * que dice lo mismo no puede cambiar de forma por el camino: la del carrito era
 * blanca con relieve y esta era transparente con un borde de medio píxel.
 */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
	padding: 0 1.5rem 1.5rem;
	background-color: var(--mdb-body-bg);
	border: 0;
	border-radius: var(--mdb-border-radius-lg);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

.wc-block-checkout .wc-block-components-checkout-order-summary__title {
	padding: 1.5rem 0 0.5rem;
}

.wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
	color: var(--mdb-body-color);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
}

/*
 * Cada artículo, como en el carrito.
 *
 *   ┌──────┬────────────────────────┬──────────────┐
 *   │      │ Reloj con estilo       │ Editar Quitar│
 *   │ foto │ 335,29$                │              │
 *   │ 64px │ Cantidad: 2            │      670,59$ │
 *   └──────┴────────────────────────┴──────────────┘
 *
 * `display: contents` en el envoltorio de la foto es lo que permite sacar la
 * cantidad de encima de la imagen sin tocar el marcado: la burbuja vive **dentro**
 * de ese envoltorio, junto a la foto, y desde ahí no se la puede bajar al
 * renglón de debajo del precio.
 */
.wc-block-checkout .wc-block-components-order-summary-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 0.15rem 0.85rem;
	align-items: start;
	padding: 1rem 0;
}

.wc-block-checkout .wc-block-components-order-summary-item + .wc-block-components-order-summary-item {
	border-top: 1px solid var(--mdb-border-color);
}

.wc-block-checkout .wc-block-components-order-summary-item__image {
	display: contents;
}

/*
 * La foto, cuadrada y con la esquina blanda de siempre.
 *
 * Es la misma que la del carrito y la de la ficha, y no puede tener una esquina
 * distinta según en qué lista aparezca. El panel de debajo, para los PNG
 * recortados, por lo mismo que allí.
 */
.wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image.wc-block-components-order-summary-item__image > img {
	grid-column: 1;
	grid-row: 1 / -1;
	width: 64px;
	aspect-ratio: 1;
	object-fit: cover;
	max-width: none;
	background-color: var(--owari-tienda-panel, color-mix(in srgb, var(--mdb-body-color) 5%, transparent));
	border-radius: var(--mdb-border-radius-lg);
}

.wc-block-checkout .wc-block-components-order-summary-item__description {
	/* De partida cruza las dos columnas de texto: en una columna estrecha, un
	 * nombre con las acciones al lado se parte palabra a palabra. Cuando hay
	 * sitio, la consulta de contenedor del final lo devuelve a su columna. */
	grid-column: 2 / -1;
	grid-row: 1 / 3;
}

.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--mdb-body-color);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

/*
 * La cantidad deja de ser una burbuja y pasa a decirlo.
 *
 * Un círculo de veinte píxeles con un número dentro, pegado a la esquina de la
 * foto, hay que saber leerlo: podría ser el número de línea, una insignia o un
 * aviso. Escrito —«Cantidad: 2»— no hay nada que interpretar, y el hueco que
 * deja encima de la foto se lo queda la foto.
 *
 * La palabra la trae PHP en una variable, como las del carrito: escrita aquí no
 * pasaría por gettext. El texto para lectores de pantalla que WooCommerce ya
 * pone —«2 artículos»— se queda donde estaba.
 */
.wc-block-checkout .wc-block-components-order-summary-item__quantity {
	position: static;
	/* La burbuja no estaba colocada con `top` y `left`: la llevaba a la esquina
	 * un `transform`, que mueve lo pintado y no la caja. Quitarle la posicion
	 * absoluta la devolvia a la reja, pero seguia dibujandose ochenta pixeles
	 * mas alla. */
	transform: none;
	grid-column: 2;
	grid-row: 3;
	display: block;
	width: auto;
	min-width: 0;
	height: auto;
	padding: 0;
	color: var(--mdb-secondary-color);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.wc-block-checkout .wc-block-components-order-summary-item__quantity::before {
	content: var(--owari-pago-cantidad, "Quantity") ": ";
}

/*
 * Y el numero, del color del texto.
 *
 * En la burbuja iba en blanco, que es lo que se lee sobre un circulo oscuro.
 * Fuera de ella se quedaba blanco sobre blanco: el renglon decia «Cantidad:» y
 * ahi se acababa.
 */
.wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	padding: 0;
	color: inherit;
	font-size: inherit;
}

.wc-block-checkout .wc-block-components-order-summary-item__total-price {
	grid-column: 3;
	grid-row: 3;
	justify-self: end;
	align-self: end;
	font-weight: 600;
}

/*
 * Y lo que se puede hacer con una línea, al pie de la línea.
 *
 * Lo pinta el navegador —el resumen lo monta React— y son las dos únicas cosas
 * que se pueden hacer con algo que ya está en el pedido: cambiarlo, que es
 * volver a su ficha, y quitarlo.
 *
 * En el modelo van arriba a la derecha, al lado del nombre, y ahí se probaron
 * primero. No caben: la columna del resumen de WooCommerce es el 37 % de la
 * página, o sea unos trescientos píxeles con la foto dentro, y con las dos
 * acciones al lado del nombre a este le quedaban ochenta. «Reloj con estilo»
 * salía en tres renglones, uno por palabra, en una pantalla de mil doscientos.
 *
 * Ensanchar esa columna arreglaba el resumen y estropeaba el formulario, que es
 * lo que pierde lo que ella gana. Así que bajan al pie de la línea, que además
 * es donde están en el carrito: las mismas dos acciones, en el mismo sitio, en
 * las dos páginas.
 */
.owari-pago-acciones {
	grid-column: 2 / -1;
	grid-row: 4;
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.owari-pago-acciones a,
.owari-pago-acciones button {
	padding: 0;
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
	font-size: inherit;
	line-height: inherit;
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
}

.owari-pago-acciones a:hover,
.owari-pago-acciones a:focus-visible,
.owari-pago-acciones button:hover,
.owari-pago-acciones button:focus-visible {
	text-decoration: underline;
	background: none;
}

/* Quitar algo se avisa en rojo, como en el carrito y en favoritos. */
.owari-pago-acciones button:hover,
.owari-pago-acciones button:focus-visible {
	color: var(--mdb-danger);
}

/* La raya entre las dos: separa, no dice nada. */
.owari-pago-acciones button::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.875rem;
	margin-right: 0.5rem;
	vertical-align: -0.15em;
	background-color: var(--mdb-border-color);
}

/*
 * Lo que WooCommerce añade a la caja del artículo y aquí no cabe.
 *
 * La descripción del producto es lo mismo que sobraba en el carrito: quien está
 * pagando ya eligió. Lo que se queda son los detalles de la variación, que es lo
 * que distingue una línea de otra del mismo producto —y esos ya vienen sin
 * sangrar de la regla que comparten los dos carritos—.
 */
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata > div:not(.wc-block-components-product-details) {
	display: none;
}

.wc-block-checkout .wc-block-components-order-summary-item .wc-block-cart-item__prices {
	color: var(--mdb-secondary-color);
	font-size: 0.875rem;
}

/*
 * El radio, pegado al borde de la lista.
 *
 * Al quitarle la caja a la opción se fue con ella el sangrado que le hacía sitio
 * al círculo, y WooCommerce lo tiene colocado en absoluto a dieciséis píxeles
 * del canto: se quedó encima de la primera sílaba del nombre. Vuelve al canto, y
 * el sangrado que se le da al texto es el que necesita el círculo y no el que
 * necesitaba una caja.
 */
.wc-block-checkout .wc-block-components-radio-control__option {
	padding-inline-start: 2rem;
}

.wc-block-checkout .wc-block-components-radio-control__input {
	inset-inline-start: 0;
	left: 0;
}

/*
/*
 * Lo que se ahorra, en rojo y sin caja, como en el carrito.
 *
 * La de WooCommerce es una etiqueta con fondo verde del tamaño de un sello, y
 * aquí además ensancha la columna del precio a costa del nombre.
 */
.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-sale-badge {
	margin: 0.15rem 0 0;
	padding: 0;
	color: var(--mdb-danger);
	font-size: 0.8125rem;
	font-weight: 400;
	text-align: right;
	background: none;
	border: 0;
}

/*
 * El recuadro que quedaba, que no era ni un borde ni una sombra.
 *
 * Era un `::after` de la lista: una capa en absoluto, del tamaño de la lista
 * entera, con un borde de un píxel. Por eso no aparecía al mirar los bordes y
 * las sombras de las opciones —no estaba en ninguna— y por eso, cuando la lista
 * traía una sola opción, se veían dos rayitas sueltas a los lados en vez de una
 * caja: WooCommerce le quita el borde de arriba y el de abajo cuando la primera
 * y la última son la misma, y se quedaban los dos de los costados.
 *
 * Es lo mismo que la caja de la opción marcada y sobra por lo mismo: en una
 * página que ya tiene una tarjeta al lado, otro recuadro compite con ella.
 */
.wc-block-checkout .wc-block-components-radio-control--highlight-checked::after {
	display: none;
}

/*
 * Y la raya entre opciones, la del tema.
 *
 * WooCommerce ya pinta una —otro `::after`, de un píxel, con el color del texto
 * al 20 %— así que había dos, una encima de la otra. Se queda la del tema, que
 * es la misma que separa las líneas del carrito y las del resumen; la suya se
 * apaga.
 */
.wc-block-checkout .wc-block-components-radio-control__option::after,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::after {
	display: none;
}

/*
 * Y en la franja donde la columna del resumen es una rendija.
 *
 * Entre setecientos y novecientos píxeles de página, WooCommerce ya pone el
 * resumen al lado del formulario pero le da el 37 %: con la foto dentro quedan
 * ciento setenta píxeles para el nombre, la cantidad y el precio. La cantidad y
 * el total se pisaban encima —el precio se sale de una columna que la rejilla
 * deja encoger hasta cero— y el nombre salía en tres renglones.
 *
 * Ahí cada cifra baja a su propio renglón. Por debajo de setecientos el resumen
 * se apila debajo del formulario y vuelve a tener la página entera, así que esto
 * es solo para esa franja.
 */
@container (min-width: 700px) and (max-width: 899px) {
	.wc-block-checkout .wc-block-components-order-summary-item__quantity {
		grid-column: 2 / -1;
	}

	.wc-block-checkout .wc-block-components-order-summary-item__total-price {
		grid-column: 2 / -1;
		grid-row: 4;
		justify-self: start;
	}

	.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-sale-badge {
		text-align: left;
	}

	.wc-block-checkout .wc-block-components-order-summary-item .owari-pago-acciones {
		grid-row: 5;
	}
}

/*
 * ── Las dos columnas del pago, mitad y mitad ──────────────────────────────
 *
 * WooCommerce reparte 65 y 35. Le sobra al formulario y le falta al resumen: 35
 * es de sobra para una lista de sumas —que es lo que había ahí antes— y muy poco
 * para una lista de productos con su foto, su nombre y lo que se puede hacer con
 * cada uno.
 *
 * Mitad y mitad, como el modelo. El hueco entre las dos lo sigue poniendo el
 * relleno derecho que WooCommerce le da a la del formulario, así que las dos
 * cajas miden igual y el aire queda en medio.
 *
 * Solo cuando van una al lado de otra: por debajo de setecientos WooCommerce las
 * apila y cada una se lleva la página entera.
 */
@container (min-width: 700px) {
	.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: 50%;
	}
}

/*
 * Y con ese ancho, lo que se puede hacer con la línea vuelve arriba a la
 * derecha, que es donde lo pone el modelo: a la altura del nombre.
 *
 * Necesita que la columna del resumen dé para las tres cosas —foto, texto y
 * acciones— y con la mitad de la página la da en cuanto la página pasa de
 * novecientos. Por debajo se queda al pie de la línea, como en el carrito.
 */
@container (min-width: 900px) {
	.wc-block-checkout .wc-block-components-order-summary-item__description {
		grid-column: 2;
	}

	.wc-block-checkout .wc-block-components-order-summary-item .owari-pago-acciones {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}

/*
 * Y en esa misma franja, los campos de uno en uno.
 *
 * Con las dos columnas a la mitad, entre setecientos y novecientos al formulario
 * le quedan trescientos ochenta píxeles, y WooCommerce sigue emparejando los
 * campos: salen de ciento sesenta y seis, con «Código postal (opcional)» cortado
 * a la mitad. Un campo cuyo nombre no se lee entero no es medio campo, es un
 * campo que hay que adivinar.
 *
 * De uno en uno el formulario se alarga, y alargarse no le hace daño a nadie.
 */
@container (min-width: 700px) and (max-width: 899px) {
	.wc-block-checkout .wc-block-components-address-form.wc-block-components-address-form > * {
		flex: 0 0 100%;
		width: 100%;
	}
}

/*
 * Y un solo resumen, también en el móvil.
 *
 * WooCommerce pinta dos: el de la columna de al lado y otro más, encima del
 * botón de pagar, pensado para repasar el pedido antes de darle. En el
 * escritorio esconde el segundo; por debajo de setecientos píxeles deja los dos.
 *
 * Su idea es que arriba quede una barra plegada con el total y abajo la lista
 * entera. Pero la de arriba se abre, y quien la abre se encuentra con la misma
 * lista dos veces en la misma página —con las mismas fotos, los mismos precios y
 * los mismos «Editar / Quitar»— y una tarjeta dentro de otra, que es como
 * WooCommerce enmarca la segunda.
 *
 * Se queda la de arriba: es la misma que se ve en el escritorio, lleva el total
 * escrito en su cabecera sin necesidad de abrirla, y está donde alguien mira
 * primero cuando quiere saber cuánto va a pagar.
 */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
	display: none;
}

/*
 * ── El menú de la cuenta ──────────────────────────────────────────────────
 *
 * «Mi cuenta» no la pintan bloques: es el atajo de siempre
 * —`[woocommerce_my_account]`— con las plantillas clásicas de WooCommerce. Y su
 * menú lateral es una lista de enlaces a pelo: seis renglones en azul subrayado,
 * uno debajo de otro, sin nada que diga que son la navegación de esta página y
 * no seis avisos sueltos.
 *
 * Aquí pasa a ser lo que es: una tarjeta con la lista dentro, cada entrada con
 * su icono, la que se está mirando marcada y salir separado del resto.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: 1.5rem;
	padding: 0.5rem;
	background-color: var(--mdb-body-bg);
	border-radius: var(--mdb-border-radius-lg);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/*
 * La lista, sin viñetas y sin el sangrado que MDB le pone a todo `<ul>`.
 *
 * Y sin el margen de abajo, que aquí dejaba tres centímetros de tarjeta vacía
 * debajo del último enlace.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Y sin el relleno que WooCommerce le pone a cada elemento: dieciséis píxeles
 * arriba y otros dieciséis abajo, que con el renglón entero pulsable dejaban
 * treinta y dos de nada entre una entrada y la siguiente.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

/*
 * Cada entrada, un renglón entero y pulsable.
 *
 * Antes el blanco de pulsar era la palabra: «Salir» son cuatro caracteres y
 * treinta píxeles. Ahora lo es la fila, que es lo que se espera de un menú.
 *
 * `position: relative` porque el icono va colocado y no en el flujo: así una
 * entrada que el tema no conozca —una tienda puede añadir las suyas— se queda
 * sin icono pero con su rótulo alineado con los demás, en vez de pegado al
 * canto.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation a {
	position: relative;
	display: block;
	padding: 0.6rem 0.85rem 0.6rem 2.75rem;
	color: var(--mdb-body-color);
	font-size: 0.9375rem;
	line-height: 1.5;
	text-decoration: none;
	border-radius: var(--mdb-border-radius);
	transition: color 0.2s ease, background-color 0.2s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
	background-color: var(--owari-tienda-panel, color-mix(in srgb, var(--mdb-body-color) 5%, transparent));
	text-decoration: none;
}

/*
 * La que se está mirando, marcada.
 *
 * Con el color del tema y el fondo suave, no con negrita: cambiar el peso de la
 * letra cambia el ancho del renglón, y al pasar de una entrada a otra el menú
 * entero da un salto.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation .is-active.is-active > a {
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
	background-color: color-mix(in srgb, var(--mdb-primary) 10%, transparent);
	/*
	 * Y sin subrayar. WooCommerce subraya la entrada activa —lo escribe en
	 * `woocommerce-blocktheme.css` con el mismo peso que esta regla, de ahí la
	 * clase repetida— y aquí ya se sabe cuál es por el color y por el fondo; el
	 * subrayado encima la hace parecer un enlace del texto, que es lo único que
	 * va subrayado en el tema.
	 */
	text-decoration: none;
}

/*
 * Los iconos.
 *
 * Uno por punto de la cuenta, sacados de la misma familia autoalojada que ya usa
 * la cabecera: no hay que traer nada nuevo. Cada entrada de WooCommerce trae su
 * clase —`--orders`, `--downloads`…— así que el icono se elige por ella y no hay
 * que tocar el marcado ni pasar por PHP.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation a::before {
	/*
	 * Uno de reserva para lo que traiga un plugin. Cualquiera puede anadir una
	 * seccion a la cuenta, y sin esto la suya es la unica de la lista sin
	 * icono: el hueco se ve mas que el icono.
	 */
	content: "\f192"; /* fa-circle-dot */
	position: absolute;
	inset-inline-start: 0.85rem;
	top: 50%;
	width: 1.15rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1;
	text-align: center;
	color: var(--mdb-secondary-color);
	transform: translateY(-50%);
	transition: color 0.2s ease;
	-webkit-font-smoothing: antialiased;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover::before,
body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible::before,
body.woocommerce-account .woocommerce-MyAccount-navigation .is-active > a::before {
	color: inherit;
}

/* fa-house: el escritorio es la portada de la cuenta. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard > a::before {
	content: "\f015";
}

/* fa-receipt */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders > a::before {
	content: "\f543";
}

/* fa-download */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads > a::before {
	content: "\f019";
}

/* fa-location-dot */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address > a::before {
	content: "\f3c5";
}

/* fa-user */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account > a::before {
	content: "\f007";
}

/* fa-key: las licencias del cliente, si el plugin de soporte esta puesto. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--licencias > a::before,
body.woocommerce-account .woocommerce-MyAccount-navigation-link--licenses > a::before {
	content: "\f084";
}

/* fa-right-from-bracket */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout > a::before {
	content: "\f2f5";
}

/*
 * Y salir, separado del resto.
 *
 * No es otro sitio de la cuenta: es dejar de estar dentro. Una raya encima y el
 * rojo de siempre al pasar por encima —el mismo con el que se quita algo del
 * carrito y de favoritos— lo dicen sin escribir una palabra de más.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.35rem;
	padding-top: 0.35rem;
	border-top: 1px solid var(--mdb-border-color);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout > a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout > a:focus-visible {
	color: var(--mdb-danger);
	background-color: color-mix(in srgb, var(--mdb-danger) 8%, transparent);
}

/*
 * Y los campos de la cuenta, con aire entre ellos.
 *
 * WooCommerce separa sus filas clásicas seis píxeles. Con la etiqueta dentro del
 * campo —que es donde vive una etiqueta flotante en reposo— seis píxeles dejan
 * los rótulos casi tocándose: el formulario se lee como un bloque de texto y no
 * como una lista de cosas que rellenar.
 *
 * Va con el ancho de siempre, el mismo que separa los campos del pago.
 */
body.woocommerce-account .woocommerce form .form-row {
	margin-bottom: 1rem;
}

/*
 * La etiqueta flotante de un campo clásico, a la altura del texto del campo.
 *
 * Otro escalón de la misma escalera, y este se veía peor que el del tamaño de la
 * letra. WooCommerce escribe:
 *
 *     .woocommerce form .form-row label { line-height: 2 }
 *
 * Son (0,2,2) y le ganan a MDB, que le da 1,6 a la etiqueta de un `.form-outline`.
 * Con interlineado 2 la etiqueta mide treinta y ocho píxeles dentro de un campo
 * de treinta y seis —o sea, es más alta que la caja en la que vive— y su texto
 * cae cuatro píxeles por debajo del texto que se escribe: al pulsar el campo, el
 * rótulo daba un salto hacia arriba que no era el de flotar, era el de
 * recolocarse.
 *
 * Y flotada pasaba lo mismo desplazado: MDB la sube una cantidad fija contando
 * con su propio interlineado, así que con el de WooCommerce aterrizaba baja, por
 * dentro del borde en vez de encima.
 *
 * El relleno de arriba se iguala al del campo por lo mismo. MDB le da 0,37 rem a
 * la etiqueta y 0,375 al campo —casi el mismo número— pero aquí el del campo sale
 * del mando de densidad, así que si no se le pasa también a la etiqueta, mover la
 * densidad las descuadra. Medido: con esto el centro del rótulo y el centro de lo
 * que se escribe caen en el mismo píxel.
 */
body .form-outline.form-outline .form-label {
	padding-top: var(--owari-campo-relleno-y, 0.32rem);
	line-height: 1.6;
}

/*
 * Y el campo que no se convierte, midiendo lo mismo que los que sí.
 *
 * `owari-formularios.js` no toca un campo cuya etiqueta es solo para lectores de
 * pantalla, y hace bien: una etiqueta escondida a propósito no debe hacerse
 * visible al flotar. Pero entonces ese campo se queda fuera del `.form-outline`,
 * y el respaldo del tema —que va en `:where()`, con especificidad cero— no le
 * llega: manda WooCommerce con su `.9rem 1.1rem` y sus trece píxeles.
 *
 * En «Direcciones» eso es exactamente un campo, «Apartamento, habitación, etc.»,
 * y salía de 45,6 px en una columna de nueve campos de 35,8, con su propio borde
 * y su propia letra. Se veía como si se hubiera colado de otro formulario.
 *
 * Aquí se le dan las medidas del campo convertido de al lado. El píxel que se le
 * resta al relleno es su borde: el campo convertido no lleva ninguno —lo dibuja
 * la muesca de MDB por fuera del input— y este sí, así que sin descontarlo
 * mediría uno más por arriba y otro por abajo.
 *
 * `:not(.form-control)` es lo que distingue a los que se quedaron fuera: la
 * clase se la pone el JavaScript al convertirlos.
 */
.woocommerce form .form-row input.input-text:not(.form-control),
.woocommerce form .form-row textarea.input-text:not(.form-control) {
	padding: calc(var(--owari-campo-relleno-y, 0.32rem) - 1px) var(--owari-campo-relleno-x, 0.75rem);
	font-size: 1rem;
	line-height: 1.6;
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
}

/*
 * El botón que WooCommerce mete dentro de un aviso.
 *
 * En «Descargas», en «Pedidos» y cada vez que se añade algo al carrito sale un
 * aviso con una acción al lado —«Explorar los productos», «Confirmar dirección
 * de correo electrónico», «Ver carrito»—. En el marcado es un botón como los
 * demás, `a.button.wc-forward`, pero WooCommerce lo desviste dentro del aviso:
 *
 *     .wc-block-components-notice-banner > …__content .wc-forward {
 *         background: transparent !important;
 *         color: #2f2f2f !important;
 *         padding: 0 !important;
 *         text-decoration-line: underline;
 *     }
 *
 * Lo quiere como enlace de texto. El problema es que a la vez le llegan del tema
 * las mayúsculas, el espaciado entre letras y el cuerpo de un botón —eso no lo
 * declara WooCommerce, así que no lo tapa— y lo que sale no es ni una cosa ni la
 * otra: un renglón en versalitas, subrayado y con el espaciado abierto de un
 * botón. Se lee como un botón roto.
 *
 * Aquí vuelve a ser un botón, con la misma forma, el mismo color y la misma
 * sombra que los demás del sitio.
 *
 * Va con `!important` y no por gusto: son tres declaraciones suyas marcadas, y
 * contra eso no hay especificidad que valga. Es el caso que la regla del
 * proyecto reserva para esto —una escalera del plugin, no un capricho—, y solo
 * sobre las tres propiedades que él insiste en marcar.
 */
.woocommerce .wc-block-components-notice-banner__content .wc-forward,
.wc-block-components-notice-banner__content .wc-forward {
	float: none;
	/*
	 * Que pueda encoger. Con `flex: none` —o sea `0 0 auto`— el botón se
	 * dimensiona a su contenido y no cede nunca, y «Confirmar dirección de correo
	 * electrónico» mide 385 píxeles: en un móvil de 375 se salía 58 por la derecha
	 * de la tarjeta que lo contiene. Medido en «Mi cuenta → Pedidos», que es donde
	 * ese aviso vive.
	 *
	 * Con `0 1 auto` sigue sin estirarse cuando sobra sitio —que era lo que se
	 * quería— y parte su texto en dos líneas cuando no lo hay.
	 */
	flex: 0 1 auto;
	max-width: 100%;
	/*
	 * Siempre el último, venga donde venga en el marcado. WooCommerce lo saca a
	 * flote a la derecha y por eso no le importa el orden: en el aviso de
	 * «confirma tu correo» escribe el enlace ANTES del texto. Sin flote, eso lo
	 * dejaba encima de la frase que lo explica.
	 */
	order: 1;
	margin: 0 0 0 auto;
	background-color: var(--mdb-primary) !important;
	color: var(--owari-sobre-primary, #fff) !important;
	padding: var(--owari-boton-relleno-y, 0.625rem) 1.5rem !important;
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius));
	box-shadow: var(--owari-boton-sombra, var(--wp--preset--shadow--nivel-1));
	text-decoration: none;
	opacity: 1;
	transition: box-shadow 0.2s linear, background-color 0.2s linear;
}

.woocommerce .wc-block-components-notice-banner__content .wc-forward:hover,
.woocommerce .wc-block-components-notice-banner__content .wc-forward:focus-visible,
.wc-block-components-notice-banner__content .wc-forward:hover,
.wc-block-components-notice-banner__content .wc-forward:focus-visible {
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/*
 * Y el aviso, repartido en fila.
 *
 * WooCommerce lo saca a flote —`float: right`— dentro de un párrafo, y en cuanto
 * el texto crece o la pantalla encoge el botón se queda encajado en mitad de una
 * frase. En fila, el texto ocupa lo suyo, el botón se va al final y en estrecho
 * se pone debajo en vez de partir el aviso.
 */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

/*
 * ── El contenido de la cuenta ─────────────────────────────────────────────
 *
 * El menú lateral ya era una tarjeta; lo de al lado, no. Y esa asimetría era
 * justo lo que hacía que «Mi cuenta» pareciera a medio hacer: a la izquierda una
 * pieza del tema, a la derecha una tabla de WooCommerce de 2011 flotando sobre
 * el fondo de la página.
 *
 * Con la misma tarjeta a los dos lados, las dos columnas son lo mismo: dos
 * paneles de una misma pantalla. Se copian los valores del menú —el fondo, el
 * radio grande y la sombra de nivel 2— en vez de inventar otros parecidos, que
 * es como se acaba con dos tarjetas que no son la misma tarjeta.
 */
body.woocommerce-account .woocommerce-MyAccount-content {
	padding: 1.5rem;
	background-color: var(--mdb-body-bg);
	border-radius: var(--mdb-border-radius-lg);
	box-shadow: var(--wp--preset--shadow--nivel-2);
}

/*
 * Lo primero de la tarjeta no lleva margen arriba y lo último no lo lleva abajo.
 *
 * Sin esto, el margen del primer párrafo o del primer título se suma al relleno
 * y la tarjeta abre con hueco doble arriba y cierra pegada abajo: descuadrada
 * sin que se vea por qué.
 */
body.woocommerce-account .woocommerce-MyAccount-content > :first-child,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty + * {
	margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

/*
 * ── Las tablas de la cuenta ───────────────────────────────────────────────
 *
 * Pedidos y descargas son la misma tabla clásica de WooCommerce, y venía con
 * tres cosas medidas que no encajan con el resto del tema:
 *
 * - **Relleno de 4px por 8px.** Las filas se tocan; la tabla se lee como un
 *   bloque de texto en vez de como una lista de pedidos.
 * - **Letra de 13,6px**, más pequeña que la del resto de la página sin que haya
 *   ninguna razón para que un pedido se lea peor que un párrafo.
 * - **Un borde alrededor**, que ahora sobra: el marco lo pone la tarjeta, y dos
 *   marcos concéntricos a cinco píxeles uno de otro se ven como un error.
 *
 * Queda una tabla sin caja: la cabecera separada por una línea, las filas por
 * otra más suave, y nada rodeándolo.
 */
body.woocommerce-account .woocommerce-MyAccount-content .shop_table {
	width: 100%;
	margin-bottom: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-size: inherit;
}

/*
 * La cabecera, en pequeño y en mayúsculas: son rótulos de columna, no un título.
 *
 * En negrita y al tamaño del contenido competían con los datos; el ojo no sabía
 * cuál de las dos líneas leer primero.
 */
body.woocommerce-account .woocommerce-MyAccount-content .shop_table thead th {
	padding: 0 0.75rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--mdb-border-color);
	color: var(--mdb-secondary-color);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * El cuerpo nombra `td` **y** `th`, y esto no es por si acaso: el número de
 * pedido es un `<th>` dentro del `<tbody>`. Con solo `td` se quedaba con el
 * relleno de cuatro píxeles de WooCommerce mientras sus vecinas tenían catorce,
 * y la primera columna salía subida respecto al resto de la fila.
 */
body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody td,
body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody th {
	padding: 0.875rem 0.75rem;
	border: 0;
	border-top: 1px solid var(--mdb-divider-color, var(--mdb-border-color));
	vertical-align: middle;
}

/*
 * La primera fila no lleva línea arriba: ya la puso la cabecera, y las dos
 * juntas dejaban un filete doble debajo de los rótulos.
 */
body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody tr:first-child td,
body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody tr:first-child th {
	border-top: 0;
}

/* Que se note cuál se está mirando, sin que parezca pulsable. */
body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody tr:hover td,
body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody tr:hover th {
	background-color: var(--mdb-highlight-bg-color, rgba(0, 0, 0, 0.02));
}

/*
 * El número de pedido, que es el enlace de verdad de cada fila.
 *
 * Venía subrayado y en el color del enlace, como una nota al pie. Aquí es lo que
 * identifica la fila: en el color del texto y con peso, y el subrayado solo
 * cuando el ratón encima dice que se puede pulsar.
 */
body.woocommerce-account .woocommerce-MyAccount-content .shop_table .woocommerce-orders-table__cell-order-number a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content .shop_table .woocommerce-orders-table__cell-order-number a:hover,
body.woocommerce-account .woocommerce-MyAccount-content .shop_table .woocommerce-orders-table__cell-order-number a:focus-visible {
	color: var(--mdb-primary);
	text-decoration: underline;
}

/* La columna de acciones, a la derecha: es donde acaba de leer el ojo. */
body.woocommerce-account .woocommerce-MyAccount-content .shop_table .woocommerce-orders-table__header-order-actions,
body.woocommerce-account .woocommerce-MyAccount-content .shop_table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

/*
 * En estrecho, WooCommerce apila cada fila y pone el rótulo de la columna
 * delante del dato con `content: attr(data-title)`. Eso funciona y no se toca;
 * lo que hace falta es que cada pedido se vea como una ficha y no como catorce
 * renglones seguidos, así que la línea pasa a separar filas —no celdas— y el
 * rótulo se atenúa para que el dato mande.
 */
@media (max-width: 768px) {
	/*
	 * WooCommerce esconde el `<th>` del cuerpo en estrecho —`.shop_table_responsive
	 * tbody th { display: none }`— y con él se va el número de pedido. En una tabla
	 * apilada eso deja cada ficha sin lo único que la identifica: fecha, estado y
	 * total, y ni una palabra de qué pedido es. Vuelve, como primera línea.
	 */
	body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody th {
		display: block;
	}

	body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody td,
	body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody th {
		padding: 0.4rem 0;
		border-top: 0;
		text-align: right;
	}

	body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody tr {
		display: block;
		padding: 1rem 0;
		border-top: 1px solid var(--mdb-border-color);
	}

	body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody tr:first-child {
		border-top: 0;
		padding-top: 0;
	}

	body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody td::before,
	body.woocommerce-account .woocommerce-MyAccount-content .shop_table tbody th::before {
		float: left;
		content: attr(data-title) ": ";
		color: var(--mdb-secondary-color);
		font-weight: 600;
	}
}

/*
 * ── Las direcciones ───────────────────────────────────────────────────────
 *
 * Salían como dos títulos de nivel dos —del tamaño del título de la página— con
 * un enlace azul pegado al lado y, debajo, una frase suelta. Nada decía que eso
 * fueran dos fichas: parecían dos secciones de un documento.
 *
 * Cada una pasa a ser su propia ficha, con su borde y su relleno, dentro de la
 * tarjeta grande. Es la única forma de que se lean como dos cosas del mismo tipo
 * y no como dos apartados de una lista.
 */
body.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-top: 1.25rem;
}

/*
 * Y el clearfix, que en una rejilla deja de ser invisible.
 *
 * WooCommerce limpia los flotes de este contenedor a la manera antigua:
 *
 *     .woocommerce .col2-set::before,
 *     .woocommerce .col2-set::after { content: " "; display: table; }
 *
 * Con flotes eso no se ve. En una rejilla, **cada pseudoelemento con contenido
 * es un elemento de la rejilla**, así que las dos fichas dejan de ser dos hijos
 * y pasan a ser el segundo y el tercero de cuatro: el `::before` ocupa la
 * primera celda, la ficha de facturación cae en la segunda, la de envío baja a
 * la fila de abajo y el `::after` cierra. Se veían las dos en diagonal, cada una
 * en una esquina, con el tamaño correcto y en el sitio equivocado.
 *
 * Costó verlo porque las medidas salían bien: 308 píxeles de ancho, dos columnas
 * de 308. Lo que no cuadraba era que hubiera dos filas.
 */
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after {
	display: none;
}

/*
 * El ancho se nombra con una clase de mas, y no es por gusto. WooCommerce
 * escribe `.woocommerce .col2-set .col-1 { width: 48% }`, que son (0,3,0);
 * `body.woocommerce-account .woocommerce-Address` son (0,2,1) y pierde. Dentro
 * de una rejilla eso no se ve como se espera: la columna medía sus 308px y la
 * ficha se encogía al 48% de esa columna, o sea 148px, y las dos quedaban
 * flotando en diagonal dentro de sus celdas.
 *
 * Con `.woocommerce-Addresses` de por medio son (0,3,1) y gana sin `!important`,
 * que aquí no hace falta: no es una escalera de plugin, es un escalón.
 *
 * El `float` no se toca porque no hay nada que tocar: un elemento de rejilla no
 * flota, la propiedad se ignora sola.
 */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	width: auto;
	padding: 1.25rem;
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
}

/*
 * El encabezado de la ficha: el rótulo arriba y la acción debajo.
 *
 * En fila con `space-between` no funciona, y medirlo lo dejó claro: la ficha
 * mide 308 píxeles y el botón «Añadir dirección de facturación» mide 273. No es
 * que a veces no quepan al lado; es que no caben nunca. Dejarlo a que ajuste
 * solo daba un rótulo colgado a la derecha y un botón debajo ocupando el ancho:
 * la peor de las dos maquetaciones, y además distinta en cada ficha según lo
 * largo que fuera su texto.
 *
 * Apilados, es igual en las dos y a cualquier ancho. El botón se queda del
 * tamaño de su texto porque `align-items` no lo estira.
 */
body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

/*
 * «Dirección de facturación» es el rótulo de una ficha, no un título de sección.
 * WooCommerce lo escribe en un `<h2>` o `<h3>` según la plantilla, así que se
 * nombran los dos: fiarse de uno es dejar la mitad de los temas sin arreglar.
 */
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.3;
}

/*
 * Y la acción, que era un enlace suelto, pasa a botón de contorno.
 *
 * De contorno y no relleno a propósito: en esta pantalla la acción principal es
 * guardar, no editar. Un botón lleno aquí competiría con el de guardar del
 * formulario de al lado.
 */
body.woocommerce-account .woocommerce-Address-title a.edit {
	padding: 0.35rem 0.9rem;
	border: 1px solid currentcolor;
	border-radius: var(--owari-boton-radio, var(--mdb-border-radius));
	color: var(--mdb-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s linear, color 0.2s linear;
	white-space: nowrap;
}

body.woocommerce-account .woocommerce-Address-title a.edit:hover,
body.woocommerce-account .woocommerce-Address-title a.edit:focus-visible {
	background-color: var(--mdb-primary);
	color: var(--owari-sobre-primary, #fff);
	text-decoration: none;
}

/* La dirección en sí, o el «aún no has configurado esto». */
body.woocommerce-account .woocommerce-Address address {
	margin: 0;
	color: var(--mdb-body-color);
	font-style: normal;
	line-height: 1.7;
}

body.woocommerce-account .woocommerce-Address > p:last-child {
	margin-bottom: 0;
	color: var(--mdb-secondary-color);
}

/*
 * ── Los rótulos del formulario de datos ───────────────────────────────────
 *
 * «Cambio de contraseña» es un `<legend>`, y sin estilo un `<legend>` sale al
 * tamaño del texto y sin separación: quedaba a la misma altura visual que los
 * campos que introduce, así que no introducía nada.
 */
body.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin: 2rem 0 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--mdb-border-color);
}

body.woocommerce-account .woocommerce-MyAccount-content legend {
	width: auto;
	margin-bottom: 1rem;
	padding: 0;
	padding-top: 1.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * Y la nota de debajo de un campo —«así será como se mostrará tu nombre»—, que
 * WooCommerce mete en un `<em>` y sale en cursiva al tamaño del texto.
 *
 * En cursiva y grande pesa igual que el dato; es una aclaración, y una
 * aclaración se lee después. Pequeña y atenuada, se lee cuando hace falta.
 */
body.woocommerce-account .woocommerce-MyAccount-content .form-row em,
body.woocommerce-account .woocommerce-MyAccount-content span.description {
	display: block;
	margin-top: 0.35rem;
	color: var(--mdb-secondary-color);
	font-size: 0.8125rem;
	font-style: normal;
	line-height: 1.5;
}