/**
 * Estilos de las páginas de WooCommerce (tienda, carrito, checkout, mi cuenta).
 *
 * Se encola solo en esas páginas y después de `caprii-theme` (ver functions.php),
 * así que gana por orden a `woocommerce.css` sin necesidad de `!important`.
 *
 * WooCommerce mezcla dos generaciones de markup y hay que atacar las dos:
 *
 *   - Bloques (`.wc-block-*`): tienda, carrito y checkout. El carrito y el
 *     checkout se pintan en cliente, así que acá solo valen los nombres de
 *     clase de los componentes de @woocommerce/blocks-components.
 *   - Shortcode clásico (`.woocommerce-*`): mi cuenta, que sigue siendo
 *     `[woocommerce_my_account]`, y todos sus formularios y tablas.
 *
 * Ningún hex hardcodeado: todo sale de los tokens de assets/css/tokens.css,
 * así que las páginas de la tienda cambian con la temporada como el resto.
 */

:root {
	/* Perillas locales: cambiando estas tres se reafina toda la tienda. */
	--cw-radius: 0; /* Igual que el CTA de las tarjetas de producto. */
	--cw-card-ratio: 4 / 5; /* Igual que caprii/product-carousel. */
	--cw-gap: 8px;

	--cw-label-size: 0.72rem;
	--cw-label-tracking: 0.08em;
}

/* ---------------------------------------------------------------------------
   1. Cascarón de página
--------------------------------------------------------------------------- */

/*
 * Los títulos de tienda, carrito y cuenta heredaban el h1 de la home
 * (xx-large, hasta 4.5rem). Sobre una página utilitaria con dos párrafos y un
 * menú, esa escala deja la pantalla vacía: acá bajan un escalón.
 */
.woocommerce-page main > .wp-block-post-title,
.woocommerce-page main > .wp-block-query-title,
.woocommerce main > .wp-block-query-title {
	margin-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
	font-size: clamp(2rem, 4vw, 3rem);
}

/* Migas: dato secundario, no un elemento de navegación protagonista. */
.wc-block-breadcrumbs {
	font-size: var(--cw-label-size);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

.wc-block-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.wc-block-breadcrumbs a:hover {
	color: var(--c-ink);
}

/* ---------------------------------------------------------------------------
   2. Controles de formulario — clásico y bloques comparten look
--------------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page .woocommerce-input-wrapper input.input-text,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-select__select {
	box-sizing: border-box;
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--c-ink);
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--cw-radius);
	transition: border-color 0.2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__select:focus {
	border-color: var(--c-ink);
	outline: none;
}

.woocommerce form .form-row label,
.wc-block-components-checkout-step__title {
	font-size: var(--cw-label-size);
	font-weight: 500;
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

.woocommerce form .form-row {
	margin-bottom: 1.25rem;
}

/* La etiqueta flotante de los bloques usa su propio nodo. */
.wc-block-components-text-input label {
	font-family: var(--wp--preset--font-family--body);
	color: var(--c-ink-soft);
}

/* Las casillas y radios de Woo no deben heredar el uppercase de las labels. */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--c-ink);
}

/* ---------------------------------------------------------------------------
   3. Botones
--------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .woocommerce-Button,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.caprii-order-confirmation .wp-block-button__link,
.caprii-order-tracking__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--cw-label-size);
	font-weight: 500;
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-base);
	background: var(--c-ink);
	border: 1px solid var(--c-ink);
	border-radius: var(--cw-radius);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .woocommerce-Button:hover,
.wc-block-components-button:not(.is-link):hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.caprii-order-confirmation .wp-block-button__link:hover,
.caprii-order-tracking__button:hover {
	color: var(--c-base);
	background: var(--c-accent);
	border-color: var(--c-accent);
}

/* Los botones de texto (quitar, editar, "¿tenés un cupón?") son enlaces. */
.wc-block-components-button.is-link,
.wc-block-cart-item__remove-link,
.woocommerce-remove-coupon {
	font-size: 0.8rem;
	color: var(--c-ink-soft);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wc-block-components-button.is-link:hover,
.wc-block-cart-item__remove-link:hover {
	color: var(--c-ink);
}

/* ---------------------------------------------------------------------------
   4. Avisos
--------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	padding: 1rem 1.25rem;
	font-size: 0.9rem;
	color: var(--c-ink);
	background: var(--c-base-alt);
	border: 1px solid var(--c-border);
	border-left-width: 3px;
	border-radius: var(--cw-radius);
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-left-color: var(--c-accent);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	border-left-color: var(--c-surface);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left-color: var(--c-detail);
}

.wc-block-components-notice-banner > svg {
	fill: currentColor;
}

/* ---------------------------------------------------------------------------
   5. Tienda — archive de productos (bloques)
--------------------------------------------------------------------------- */

/* Barra de resultados + orden. */
.woocommerce-result-count {
	margin: 0;
	font-size: var(--cw-label-size);
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

.woocommerce-ordering select,
.wc-block-components-sort-select__select {
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--cw-label-size);
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink);
	background: transparent;
	border: 1px solid var(--c-border);
	border-radius: var(--cw-radius);
}

/* La grilla de Woo trae `grid-gap: 1.25em`; la ajustamos al aire de la home. */
.wp-block-woocommerce-product-collection .wc-block-product-template__responsive {
	grid-gap: var(--cw-gap);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Tarjeta: mismo idioma visual que caprii/product-carousel. */
.wc-block-product-template .wc-block-product {
	position: relative;
}

.wc-block-product-template .wc-block-product > :not(:last-child) {
	margin-bottom: 0.35rem;
}

.wc-block-product .wc-block-components-product-image {
	overflow: hidden;
	margin-bottom: 0.6rem;
}

/*
 * El bloque product-image emite `aspect-ratio` en un style inline, así que
 * este es el único punto del archivo donde `!important` es inevitable.
 */
.wc-block-product .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: var(--cw-card-ratio) !important;
	object-fit: cover !important;
	transition: transform 0.6s ease;
}

.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.04);
}

/* Woo le pone un borde gris a las imágenes sin alt; ensucia la grilla. */
.wc-block-product .wc-block-components-product-image img[alt=""] {
	border: none;
}

/*
 * La plantilla de Woo centra nombre y precio; el resto del sitio los alinea a
 * la izquierda (ver el carrusel de la home).
 */
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-price,
.wc-block-product .wc-block-components-product-button {
	text-align: left;
}

.wc-block-product .wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
}

.wc-block-product .wp-block-post-title a {
	color: var(--c-ink);
	text-decoration: none;
}

.wc-block-product .wc-block-components-product-price {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--c-ink);
}

/* El botón ocupa el ancho de la tarjeta, como en el carrusel. */
.wc-block-product .wc-block-components-product-button .wp-block-button__link {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem 0.75rem;
	font-size: var(--cw-label-size);
	letter-spacing: var(--cw-label-tracking);
	text-align: center;
	text-transform: uppercase;
	color: var(--c-base);
	background: var(--c-ink);
	border-radius: var(--cw-radius);
}

.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover {
	background: var(--c-accent);
}

/* Paginación. */
.wp-block-woocommerce-product-collection .wp-block-query-pagination {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	font-size: var(--cw-label-size);
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
}

.wp-block-woocommerce-product-collection .wp-block-query-pagination a,
.wp-block-woocommerce-product-collection .wp-block-query-pagination .current {
	padding: 0.4rem 0.7rem;
	color: var(--c-ink-soft);
	text-decoration: none;
}

.wp-block-woocommerce-product-collection .wp-block-query-pagination .current {
	color: var(--c-ink);
	border-bottom: 1px solid currentColor;
}

/* ---------------------------------------------------------------------------
   6. Ficha de producto (bloques)

   La descripción corta es lo único que describe el producto —la larga y sus
   pestañas están dadas de baja— así que se la carga como lista de viñetas y
   tiene que leerse como tal. El bloque de WooCommerce la imprime con su HTML
   crudo: un `<ul>` pelado, sin la clase `wp-block-list`, o sea que no le llega
   nada de los estilos de lista del tema y queda con los del navegador.
--------------------------------------------------------------------------- */

/*
 * El título del producto baja un escalón respecto del h1 de theme.json
 * (xx-large, 3.5rem). Esa escala está pensada para el título de una página,
 * que entra solo en la pantalla; acá comparte columna con el precio, la
 * descripción, los talles y el botón de compra, y a 3.5rem empuja todo eso
 * hacia abajo.
 *
 * No alcanza con la regla del cascarón de página (sección 1): esa apunta a
 * `main > .wp-block-post-title`, y en la ficha el título cuelga de una
 * columna, no de main.
 */
.single-product .wp-block-post-title {
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

.wc-block-components-product-summary ul {
	/* El sangrado por defecto (40px) rompe la alineación de la columna: el
	   texto arrancaría más a la derecha que el precio y el botón de compra.
	   Se sangra solo lo justo para que la viñeta cuelgue del margen. */
	margin: 0;
	padding-left: 1.1em;
	list-style: disc;
}

.wc-block-components-product-summary li {
	margin-bottom: 0.35em;
	padding-left: 0.2em;
	line-height: 1.5;
}

.wc-block-components-product-summary li::marker {
	font-size: 0.85em;
	color: var(--c-ink-soft);
}

.wc-block-components-product-summary li:last-child {
	margin-bottom: 0;
}

/* Un solo párrafo (no todos los productos van con viñetas) no lleva margen
   propio: el espaciado ya lo da el bloque. */
.wc-block-components-product-summary p:first-child {
	margin-top: 0;
}

.wc-block-components-product-summary p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   7. Carrito y checkout (bloques)

   Comparten los componentes `wc-block-components-*`, así que se estilan juntos:
   tocar solo el carrito dejaría el checkout a medio camino.
--------------------------------------------------------------------------- */

.wc-block-cart__totals-title,
.wc-block-components-title,
.wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--cw-label-size);
	font-weight: 500;
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

/*
 * Cabecera y filas de la tabla del carrito. Los separadores ya los dibuja Woo
 * con un `color-mix` sobre currentColor: acá solo se les cambia el color, para
 * no terminar con dos líneas superpuestas.
 */
.wc-block-cart-items__header th {
	font-size: var(--cw-label-size);
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink-soft);
	border-bottom: 1px solid var(--c-border);
}

.wc-block-cart__main .wc-block-cart-items {
	border-bottom-color: var(--c-border);
}

.wc-block-cart__main .wc-block-cart-items td {
	border-top-color: var(--c-border);
}

.wc-block-cart-item__image img {
	border-radius: var(--cw-radius);
}

.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--c-ink);
	text-decoration: none;
}

.wc-block-components-product-metadata {
	font-size: 0.85rem;
	color: var(--c-ink-soft);
}

/* Selector de cantidad. Woo lo pinta con currentColor al 30 %. */
.wc-block-components-quantity-selector {
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--cw-radius);
}

/*
 * Panel lateral de totales. El fondo va en el bloque del resumen y no en
 * `.wc-block-components-sidebar`, que lleva un padding-left porcentual propio
 * y dejaría la caja descolgada de la columna.
 */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--c-base-alt);
	border-radius: var(--cw-radius);
}

.wc-block-components-totals-wrapper {
	border-top-color: var(--c-border);
}

.wc-block-components-totals-item {
	font-size: 0.95rem;
	color: var(--c-ink);
}

.wc-block-components-totals-item__label {
	color: var(--c-ink-soft);
}

.wc-block-components-totals-footer-item {
	font-size: 1.1rem;
	font-weight: 600;
	border-top: 1px solid var(--c-border);
}

/* Cupón. */
.wc-block-components-panel__button {
	font-size: 0.85rem;
	color: var(--c-ink);
}

.wc-block-components-totals-coupon__input input {
	border-radius: var(--cw-radius);
}

/*
 * País en el formulario de dirección. Woo le quita el margen superior porque
 * da por hecho que es el primer campo, pero acá va después de nombre y
 * apellidos y queda pegado a ellos. Se le devuelve el mismo aire que al resto
 * de los campos; si alguna vez vuelve a ser el primero, el `:not` lo deja en 0.
 */
.wc-block-components-form .wc-block-components-checkout-step .wc-block-components-address-form .wc-block-components-country-input:not(:first-child) {
	margin-top: 12px;
}

/* El botón de continuar es la acción principal de la página. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	padding-block: 1.05rem;
	font-size: 0.8rem;
}

/*
 * Carrito vacío: una sola columna centrada con el título y la salida a la
 * tienda. La grilla de novedades que Woo deja acá al crear la página se quitó
 * del contenido, igual que los cross-sells del carrito lleno.
 */
.wp-block-woocommerce-empty-cart-block {
	padding-block: clamp(1rem, 4vw, 3rem) clamp(3rem, 8vw, 6rem);
	text-align: center;
}

.wp-block-woocommerce-empty-cart-block .wp-block-buttons {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* El ícono lo dibuja Woo con una máscara sobre currentColor. */
.wc-block-cart__empty-cart__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	color: var(--c-ink);
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	opacity: 0.35;
}

/* ---------------------------------------------------------------------------
   7b. Checkout y pedido recibido — cascarón

   El checkout usa su propio header (parts/checkout-header.html): logo y vuelta
   al carrito, sin menú, para no sacar a nadie de la compra. Las dos páginas
   toman el mismo margen lateral que el header del sitio en lugar del 1rem del
   resto del contenido, así el formulario arranca alineado con el logo.
--------------------------------------------------------------------------- */

.wp-block-group.caprii-checkout-header {
	padding: 1.15rem clamp(1rem, 4vw, 3rem);
	border-bottom: 1px solid var(--c-border);
}

.caprii-checkout-header .caprii-logo-block {
	width: min(var(--caprii-logo-width, 132px), 38vw);
}

.caprii-checkout-header .wc-block-cart-link {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	font-size: var(--cw-label-size);
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-ink-soft);
}

.caprii-checkout-header .wc-block-cart-link:hover {
	color: var(--c-ink);
}

.caprii-checkout-header .wc-block-cart-link svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

/* En móvil queda solo el ícono: el texto no entra al lado del logo. */
@media (max-width: 599px) {
	.caprii-checkout-header .wc-block-cart-link__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

main.caprii-checkout-main,
main.caprii-order-confirmation {
	padding-inline: clamp(1rem, 4vw, 3rem);
	padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 8vw, 6rem);
}

/* ---------------------------------------------------------------------------
   7c. Pedido recibido (templates/order-confirmation.html)

   Una sola columna angosta: es un comprobante, se lee de arriba abajo. Los
   títulos de sección usan la misma escala que los pasos del checkout, para
   que la compra y su confirmación se sientan la misma pantalla.
--------------------------------------------------------------------------- */

.caprii-order-confirmation > * {
	margin-block: 0;
}

.caprii-order-confirmation > * + * {
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
}

.wc-block-order-confirmation-status h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.05;
}

.wc-block-order-confirmation-status p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--c-ink-soft);
}

.caprii-order-confirmation__heading {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.235rem);
	font-weight: 500;
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

/* Resumen: una grilla de datos en lugar de cinco etiquetas en negrita. */
.caprii-order-confirmation .wc-block-order-confirmation-summary-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	gap: 1.25rem 1.5rem;
	margin: 0;
	padding: 1.5rem 0;
	list-style: none;
	border-block: 1px solid var(--c-border);
}

.caprii-order-confirmation .wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* Woo pone la clave en negrita con `ul li >`: hay que igualar ese camino. */
.caprii-order-confirmation .wc-block-order-confirmation-summary ul li > .wc-block-order-confirmation-summary-list-item__key {
	font-size: var(--cw-label-size);
	font-weight: 500;
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

.caprii-order-confirmation .wc-block-order-confirmation-summary ul li > .wc-block-order-confirmation-summary-list-item__value {
	display: block;
	font-size: 0.95rem;
	color: var(--c-ink);
	overflow-wrap: anywhere;
}

/* Tabla del pedido: filas separadas por línea, sin la caja de Woo. */
.caprii-order-confirmation .wc-block-order-confirmation-totals__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	font-size: 0.95rem;
}

.caprii-order-confirmation .wc-block-order-confirmation-totals__table th,
.caprii-order-confirmation .wc-block-order-confirmation-totals__table td {
	padding: 0.9rem 0;
	border: 0;
	border-bottom: 1px solid var(--c-border);
	font-weight: 400;
	background: none;
}

.caprii-order-confirmation .wc-block-order-confirmation-totals__table thead th {
	padding-top: 0;
	font-size: var(--cw-label-size);
	font-weight: 500;
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

.caprii-order-confirmation .wc-block-order-confirmation-totals__total {
	text-align: right;
	white-space: nowrap;
}

.caprii-order-confirmation .wc-block-order-confirmation-totals__product a {
	color: var(--c-ink);
	text-decoration: none;
}

.caprii-order-confirmation .wc-block-order-confirmation-totals__product a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.caprii-order-confirmation .product-quantity {
	font-weight: 400;
	color: var(--c-ink-soft);
}

.caprii-order-confirmation .wc-block-order-confirmation-totals__table tfoot th {
	color: var(--c-ink-soft);
	text-align: left;
}

.caprii-order-confirmation .wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.caprii-order-confirmation .wc-block-order-confirmation-totals__table tfoot tr:last-child td {
	padding-top: 1.1rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--c-ink);
	border-bottom: 0;
}

/* Direcciones: mismo borde fino que los campos del checkout. */
.caprii-order-confirmation__addresses {
	gap: 1.5rem;
}

.caprii-order-confirmation .wc-block-order-confirmation-shipping-address,
.caprii-order-confirmation .wc-block-order-confirmation-billing-address {
	padding: 1.25rem;
	border: 1px solid var(--c-border);
	border-radius: var(--cw-radius);
}

.caprii-order-confirmation address,
.caprii-order-confirmation .woocommerce-customer-details--phone {
	font-size: 0.95rem;
	font-style: normal;
	line-height: 1.6;
	color: var(--c-ink);
}

.caprii-order-confirmation__actions {
	padding-top: 0.5rem;
}

/*
 * Tarjeta de seguimiento de Moova (Checkout\MoovaTrackingCard en el plugin).
 * Mismo lenguaje que los avisos de la sección 4: franja a la izquierda con el
 * acento, o con el color de detalle si hay que corregir la dirección.
 */
.caprii-order-tracking {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem;
	background: var(--c-base-alt);
	border: 1px solid var(--c-border);
	border-left: 3px solid var(--c-accent);
	border-radius: var(--cw-radius);
}

.caprii-order-tracking.is-error {
	border-left-color: var(--c-detail);
}

.caprii-order-tracking__body {
	flex: 1 1 18rem;
	min-width: 0;
}

.caprii-order-tracking__title {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--c-ink);
}

.caprii-order-tracking__text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--c-ink-soft);
}

.caprii-order-tracking__button {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   8. Mi cuenta (shortcode `[woocommerce_my_account]`)
--------------------------------------------------------------------------- */

/*
 * Woo maqueta esta página con floats (30% / 68%) en woocommerce-layout.css.
 * Los anulamos y usamos grid: el float rompe con contenidos de alto desigual.
 */
.woocommerce-account .woocommerce {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	margin-bottom: clamp(3rem, 7vw, 6rem);
}

@media (min-width: 782px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(180px, 220px) 1fr;
	}
}

/*
 * Y hay que desactivar su clearfix. Woo lo declara sobre este mismo contenedor
 * (`content:" "; display:table`) para contener los floats; en grid deja de ser
 * invisible y pasa a ser una celda más, así que el menú caía en la columna 2 y
 * el contenido bajaba a la fila siguiente.
 */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* La página de login no tiene sidebar: no debe quedar en media columna. */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	display: block;
	max-width: 26rem;
	margin-inline: auto;
}

/*
 * Todo el menú va prefijado con `.woocommerce-account`: sin eso pierde por
 * especificidad contra woocommerce-blocktheme.css, que ya trae su propio
 * margen en el `ul` y padding en los `li`. El alto de fila lo fija el enlace y
 * nada más, así que los `li` van sin padding propio.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li,
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
	padding: 0;
	border-bottom: 1px solid var(--c-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.75rem 0;
	font-size: var(--cw-label-size);
	line-height: 1.4;
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink-soft);
	text-decoration: none;
	transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--c-ink);
	text-decoration: none;
}

/* El elemento activo se marca con una regla propia, no con el subrayado. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active {
	border-bottom-color: var(--c-ink);
}

.woocommerce-MyAccount-content p:first-child {
	margin-top: 0;
}

/* Formularios de login / registro: Woo los mete en una caja gris con radio. */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce-EditAccountForm {
	margin: 0;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--c-base-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--cw-radius);
}

.woocommerce-account h2 {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 1rem;
}

.woocommerce-LostPassword {
	margin-bottom: 0;
	font-size: 0.85rem;
}

/* Tablas de pedidos y descargas. */
.woocommerce table.shop_table {
	width: 100%;
	border: none;
	border-collapse: collapse;
	border-radius: var(--cw-radius);
}

.woocommerce table.shop_table th {
	padding: 0.85rem 0.75rem;
	font-size: var(--cw-label-size);
	font-weight: 500;
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink-soft);
	text-align: left;
	border-bottom: 1px solid var(--c-border);
}

.woocommerce table.shop_table td {
	padding: 1rem 0.75rem;
	border-top: none;
	border-bottom: 1px solid var(--c-border);
}

/*
 * Direcciones.
 *
 * `.woocommerce-Address` no envuelve a la columna: ES la columna. Woo pone las
 * tres clases en el mismo div (`u-column1 col-1 woocommerce-Address`) y la
 * flota al 48%. Como la página no tiene box-sizing global, el padding y el
 * borde de la tarjeta se sumaban a ese 48%, el par pasaba del 100% y el float
 * derecho caía debajo del izquierdo, escalonado.
 *
 * Se reemplazan los floats por grid, con el mismo cuidado que en el contenedor
 * de la cuenta: el clearfix de `.col2-set` también se volvería una celda.
 */
.woocommerce-account .col2-set {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	align-items: start;
}

@media (min-width: 700px) {
	.woocommerce-account .col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after {
	content: none;
}

.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
	float: none;
	width: auto;
}

.woocommerce-Addresses .woocommerce-Address {
	box-sizing: border-box;
	height: 100%;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--c-base-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--cw-radius);
}

/* Título y enlace de edición en una línea, en vez del `float: right` de Woo. */
.woocommerce-account .addresses .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	margin-bottom: 1rem;
}

.woocommerce-account .addresses .title .edit {
	float: none;
	margin-bottom: 0;
	font-size: var(--cw-label-size);
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.2;
}

/* El itálico por defecto de <address> se lee como un mensaje de error. */
.woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	color: var(--c-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product .wc-block-components-product-image img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   9. Archive de categoría de producto (templates/taxonomy-product_cat.html)

   La plantilla reusa el markup de bloques de WooCommerce, así que la grilla,
   las tarjetas y la paginación ya vienen resueltas en la sección 5. Acá solo
   van las piezas propias del encabezado de categoría: miga de pan, sub-nav de
   subcategorías, barra de resultados/orden y estado vacío.
--------------------------------------------------------------------------- */

/* Miga de pan: orienta sin competir con el título. */
.wc-block-breadcrumbs {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--cw-label-size);
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

.wc-block-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.wc-block-breadcrumbs a:hover {
	color: var(--c-ink);
}

/*
 * La descripción del término se escribe en el admin y puede ser larga: se
 * mantiene en ancho de lectura aunque el bloque venga en `alignwide`.
 */
.wp-block-term-description {
	max-width: 60ch;
	line-height: 1.6;
}

/* Subcategorías: fila de chips, no la lista con viñetas de Woo. */
.caprii-subcategories .wc-block-product-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.caprii-subcategories .wc-block-product-categories-list-item {
	margin: 0;
}

.caprii-subcategories .wc-block-product-categories-list-item > a {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	font-size: var(--cw-label-size);
	letter-spacing: var(--cw-label-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-ink);
	border: 1px solid var(--c-border);
	border-radius: var(--cw-radius);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.caprii-subcategories .wc-block-product-categories-list-item > a:hover {
	color: var(--c-base);
	background: var(--c-ink);
}

/*
 * Barra de resultados + orden. La regla de `.woocommerce-ordering select` de la
 * sección 5 ya le da el aire correcto al selector; acá solo se resuelve el
 * reparto horizontal y el corte a dos líneas en pantallas angostas.
 */
.caprii-catalog-bar {
	gap: 0.75rem 1.5rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--c-border);
}

.caprii-catalog-bar > * {
	margin: 0;
}

@media (max-width: 600px) {
	/* Con el ancho justo, contador y orden se apilan en vez de encimarse. */
	.caprii-catalog-bar {
		justify-content: flex-start;
	}
}

/* Estado vacío: una categoría sin stock no puede leerse como un error. */
.caprii-no-products .wp-block-heading {
	margin-bottom: 0.5rem;
}

.caprii-no-products .caprii-subcategories .wc-block-product-categories-list {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------------------
   10. Selector de talle (bloque "Add to Cart + Options")

   El selector de variaciones lo dibuja WooCommerce con `product-filter-chips`.
   Acá se le da la forma cuadrada de la referencia.
--------------------------------------------------------------------------- */

.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

.wc-block-product-filter-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wc-block-product-filter-chips__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0 0.5rem;
	font-family: inherit;
	font-size: 0.78rem;
	line-height: 1;
	color: var(--c-ink);
	background: transparent;
	border: 1px solid var(--c-border);
	border-radius: 0;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wc-block-product-filter-chips__item:hover:not(:disabled) {
	border-color: var(--c-ink);
}

.wc-block-product-filter-chips__item:focus-visible {
	outline: 2px solid var(--c-ink);
	outline-offset: 2px;
}

.wc-block-product-filter-chips__item[aria-checked="true"] {
	color: var(--c-base);
	background: var(--c-ink);
	border-color: var(--c-ink);
}

/* Sin stock: se muestra igual, tachado. Ocultarlo haría creer que ese talle no
   existe, y saber que existe pero está agotado es información. */
.wc-block-product-filter-chips__item:disabled {
	color: var(--c-ink-soft);
	cursor: not-allowed;
	opacity: 0.45;
	text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product-filter-chips__item {
		transition: none;
	}
}

/*
 * El botón hereda el radio de `styles.elements.button` de theme.json y el
 * selector de cantidad el de WooCommerce; los dos se cuadran para acompañar a
 * los chips y al CTA de las tarjetas de producto.
 */
.wc-block-add-to-cart-with-options .wc-block-components-product-button__button,
.wc-block-add-to-cart-with-options__quantity-selector,
.wc-block-add-to-cart-with-options__quantity-selector .wc-block-components-quantity-selector,
.wc-block-add-to-cart-with-options__quantity-selector input.qty {
	border-radius: var(--cw-radius);
}