/* =========================================================================
   Pawmily — Normalización de WooCommerce

   WooCommerce trae su propia identidad visual: una familia lila-gris
   (#e9e6ed, #cfc8d8), morado (#7f54b3), rojos puros (#a00) y radios de 5px.
   Nada de eso pertenece a esta paleta y se filtra en las plantillas que el
   tema no sobrescribe pieza por pieza.

   Esta hoja se carga última y neutraliza esos valores de forma sistemática,
   en lugar de ir persiguiéndolos de uno en uno cada vez que aparecen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Variables de WooCommerce

   El plugin declara su identidad en 17 variables CSS y las consume en todo
   su CSS, a veces con !important. Remapearlas aquí alinea de una vez todo
   lo que dibuja —incluido lo que este tema no ha tocado— y evita perseguir
   selectores uno por uno.

   Los valores originales quedan anotados para que se vea qué se sustituye.
   ------------------------------------------------------------------------- */

:root {
	--wc-primary:            var(--pw-ink-brand);   /* era #720eec (morado)  */
	--wc-primary-text:       var(--pw-surface);     /* era #fcfbfe           */
	--wc-secondary:          var(--pw-surface);     /* era #e9e6ed (lila)    */
	--wc-secondary-text:     var(--pw-ink);         /* era #515151 (gris)    */
	--wc-highlight:          var(--pw-ink-brand);   /* era #958e09 (oliva)   */
	--wc-highligh-text:      var(--pw-surface);     /* nombre con error en el plugin */
	--wc-content-bg:         var(--pw-surface);     /* era #fff              */
	--wc-subtext:            var(--pw-ink-soft);    /* era #767676           */

	--wc-red:                var(--pw-danger);      /* era #a00              */
	--wc-destructive:        var(--pw-danger);      /* era #cc1818           */
	--wc-green:              var(--pw-success);     /* era #007518           */
	--wc-orange:             var(--pw-ink-brand);   /* era #ffba00           */
	--wc-blue:               var(--pw-focus);       /* era #2ea2cc           */

	--wc-form-border-color:  var(--pw-line-strong); /* era rgba(32,7,7,.8)   */
	--wc-form-border-radius: var(--pw-r);           /* era 4px               */
	--wc-form-border-width:  1.5px;
	--wc-card-border-radius: var(--pw-r-lg);        /* era 8px               */
}

/* -------------------------------------------------------------------------
   1. Pestañas de la ficha de producto

   El plugin dibuja cada <li> como una carpeta: fondo gris, borde, radio de
   4px y pseudo-elementos que simulan las esquinas curvas. El tema estiliza
   el <a> de dentro como pastilla, así que quedaban dos contenedores
   anidados y el texto se salía del interior.
   ------------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs {
	padding: 0 0 var(--pw-3);
	margin: 0 0 var(--pw-6);
	border-bottom: 1px solid var(--pw-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after { content: none; display: none; border: 0; }

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
}

/* Las esquinas simuladas del plugin. */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
	content: none;
	display: none;
	border: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Ahora la pastilla vive solo en el enlace. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: var(--pw-2) var(--pw-5);
	border-radius: var(--pw-r-full);
	color: var(--pw-ink);
	font-family: var(--pw-font-display);
	font-weight: 600;
	text-decoration: none;
	text-shadow: none;
	transition: background-color var(--pw-fast) var(--pw-ease),
	            color var(--pw-fast) var(--pw-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li a:hover { background: var(--pw-surface); color: var(--pw-ink-deep); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a {
	background: var(--pw-ink-brand);
	color: var(--pw-surface);
}

/* -------------------------------------------------------------------------
   2. Paginación

   El tema estilizaba `.woocommerce-pagination`, pero el plugin marca los
   enlaces con `ul.page-numbers`, que también aparece fuera de ese contenedor.
   ------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul,
ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pw-2);
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li,
ul.page-numbers li { border: 0; margin: 0; overflow: visible; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
ul.page-numbers a, ul.page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--pw-3);
	background: var(--pw-surface);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-r-full);
	color: var(--pw-ink);
	font-family: var(--pw-font-display);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--pw-fast) var(--pw-ease),
	            border-color var(--pw-fast) var(--pw-ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
ul.page-numbers a:hover {
	background: var(--pw-bg);
	border-color: var(--pw-ink-brand);
	color: var(--pw-ink-deep);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
ul.page-numbers .current {
	background: var(--pw-ink-brand);
	border-color: var(--pw-ink-brand);
	color: var(--pw-surface);
}

/* -------------------------------------------------------------------------
   3. Tablas: radio de 5px y bordes lila
   ------------------------------------------------------------------------- */

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td {
	border-color: var(--pw-line);
}

.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th { border-top-color: var(--pw-line); }

/* -------------------------------------------------------------------------
   4. Rojos puros del plugin (#a00) → el rojo de la paleta
   ------------------------------------------------------------------------- */

.woocommerce a.remove,
.woocommerce .shop_table a.remove {
	color: var(--pw-ink-soft);
	font-weight: 700;
}
.woocommerce a.remove:hover,
.woocommerce .shop_table a.remove:hover {
	color: var(--pw-danger);
	background: var(--pw-danger-bg);
}

.woocommerce form .form-row .required,
.woocommerce .required,
.woocommerce label.required_field,
.woocommerce abbr.required {
	color: var(--pw-danger);
	border: 0;
	text-decoration: none;
}

/* La etiqueta NO se pone en rojo por estar el campo vacío.

   WooCommerce marca `woocommerce-invalid` en cuanto se pinta el formulario,
   antes de que el visitante escriba nada, así que colorear la etiqueta llena
   el checkout de advertencias por adelantado. El asterisco ya indica que el
   campo es obligatorio, y el borde rojo aparece si de verdad falla al enviar. */
.woocommerce form .form-row.woocommerce-invalid .required { color: var(--pw-danger); }

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea {
	border-color: var(--pw-danger);
	background: var(--pw-danger-bg);
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
	border-color: var(--pw-success);
}

/* El plugin pinta el borde de los campos obligatorios con un rojo casi negro
   mediante `border-color` en línea; se iguala aquí. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border-color: var(--pw-line-strong);
}

/* -------------------------------------------------------------------------
   5. Select2

   El selector de región y comuna del checkout usa Select2, que llega con su
   propia caja gris de esquinas rectas. Es el control más visible del pago en
   Chile, así que debe verse como el resto de los campos.
   ------------------------------------------------------------------------- */

.select2-container--default .select2-selection--single,
.woocommerce .select2-container .select2-selection--single {
	height: auto;
	min-height: 48px;
	padding: var(--pw-2) var(--pw-4);
	background: var(--pw-surface);
	border: 1.5px solid var(--pw-line-strong);
	border-radius: var(--pw-r);
	display: flex;
	align-items: center;
	transition: border-color var(--pw-fast) var(--pw-ease),
	            box-shadow var(--pw-fast) var(--pw-ease);
}
.select2-container--default .select2-selection--single:hover { border-color: var(--pw-brand); }

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--pw-ink-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pw-brand) 28%, transparent);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--pw-ink-deep);
	font-family: var(--pw-font-body);
	font-size: 16px;
	line-height: 1.5;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--pw-ink-soft);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: var(--pw-3);
	top: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--pw-ink) transparent transparent;
	border-width: 6px 5px 0;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--pw-ink);
	border-width: 0 5px 6px;
}

/* Desplegable */
.select2-container--default .select2-dropdown,
.select2-dropdown {
	background: var(--pw-surface);
	border: 1.5px solid var(--pw-line-strong);
	border-radius: var(--pw-r);
	box-shadow: var(--pw-shadow-lg);
	overflow: hidden;
}
.select2-container--default .select2-search--dropdown { padding: var(--pw-2); }
.select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 40px;
	padding: var(--pw-2) var(--pw-3);
	border: 1.5px solid var(--pw-line);
	border-radius: var(--pw-r-sm);
	background: var(--pw-bg);
	font-size: 16px;
}
.select2-container--default .select2-results__option {
	padding: var(--pw-2) var(--pw-4);
	color: var(--pw-ink);
	font-size: var(--pw-text-sm);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--pw-ink-brand);
	color: var(--pw-surface);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--pw-bg);
	color: var(--pw-ink-deep);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   6. Enlaces grises sueltos
   ------------------------------------------------------------------------- */

.woocommerce a:not(.pw-btn):not(.button):not(.pw-card__add) { color: var(--pw-ink-brand); }
.woocommerce-tabs a { color: inherit; }

/* -------------------------------------------------------------------------
   7. Estrellas de valoración

   Usan la tipografía de iconos del plugin y su propio color; se alinean con
   el marrón de marca (aquí sí es seguro: son glifos grandes, no texto).
   ------------------------------------------------------------------------- */

.woocommerce .star-rating span,
.woocommerce p.stars a { color: var(--pw-brand); }
.woocommerce .star-rating::before { color: var(--pw-line-strong); }

/* -------------------------------------------------------------------------
   8. Cantidad
   ------------------------------------------------------------------------- */

.woocommerce .quantity input.qty {
	background: var(--pw-surface);
	border: 1.5px solid var(--pw-line-strong);
	border-radius: var(--pw-r-full);
	color: var(--pw-ink-deep);
}

/* -------------------------------------------------------------------------
   9. Página de pedido recibido
   ------------------------------------------------------------------------- */

.woocommerce-order-overview,
.woocommerce ul.order_details {
	display: grid;
	gap: var(--pw-4);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: 0 0 var(--pw-8);
	padding: var(--pw-6);
	list-style: none;
	background: var(--pw-surface);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-r-xl);
}
.woocommerce ul.order_details li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font-size: var(--pw-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pw-ink-soft);
}
.woocommerce ul.order_details li strong {
	display: block;
	margin-top: var(--pw-1);
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-lg);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pw-ink-deep);
}
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after { content: none; }

.woocommerce-thankyou-order-received {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-2xl);
	font-weight: 600;
	color: var(--pw-ink-deep);
	margin-bottom: var(--pw-6);
}

/* -------------------------------------------------------------------------
   10. Restos varios
   ------------------------------------------------------------------------- */

/* El plugin usa `#f7f6f7` de fondo en varios bloques informativos. */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error { border-top: 0; }

/* Barras de progreso y contadores de la cuenta. */
.woocommerce-MyAccount-content mark,
.woocommerce mark {
	background: var(--pw-line);
	color: var(--pw-ink-deep);
	padding: 0 var(--pw-1);
	border-radius: var(--pw-r-sm);
}

/* Tabla de descargas y direcciones. */
.woocommerce .woocommerce-Address,
.woocommerce address {
	padding: var(--pw-5);
	background: var(--pw-surface);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-r-lg);
	font-style: normal;
	line-height: var(--pw-leading-body);
}
.woocommerce .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pw-3); }
.woocommerce .woocommerce-Address-title h2, .woocommerce .woocommerce-Address-title h3 { margin: 0 0 var(--pw-3); font-size: var(--pw-text-lg); }

/* Los <legend> y <fieldset> del plugin. */
.woocommerce fieldset {
	margin: var(--pw-6) 0 0;
	padding: var(--pw-5);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-r-lg);
	background: var(--pw-surface);
}
.woocommerce legend {
	padding: 0 var(--pw-2);
	font-family: var(--pw-font-display);
	font-weight: 600;
	color: var(--pw-ink-deep);
}

/* -------------------------------------------------------------------------
   11. Los dos casos que exigen más peso

   Se usa !important solo aquí, y por un motivo concreto: el plugin lo usa
   primero. En el resto del archivo basta el orden de carga.
   ------------------------------------------------------------------------- */

/* WooCommerce declara `color: var(--wc-red) !important` en la equis de
   eliminar. Al remapear --wc-red ya no sale rojo puro, pero en reposo debe
   ser discreta y volverse roja solo al apuntarla. */
.woocommerce a.remove,
.woocommerce .shop_table a.remove { color: var(--pw-ink-soft) !important; }
.woocommerce a.remove:hover,
.woocommerce .shop_table a.remove:hover { color: var(--pw-danger) !important; }

/* Las filas de los totales llevan un selector con ID (#add_payment_method),
   que ningún selector de clases puede superar. Se replica su forma. */
#add_payment_method .cart-collaterals .cart_totals tr td,
#add_payment_method .cart-collaterals .cart_totals tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
	border-top-color: var(--pw-line);
	border-left: 0;
	border-right: 0;
}

/* -------------------------------------------------------------------------
   12. Filas alternas

   El plugin tiñe las filas pares con `rgba(0,0,0,.025)`. Un negro al 2,5%
   sobre una paleta cálida se lee como suciedad, no como banda. Se usa el
   mismo selector que él (`nth-child(2n)`) para que no queden dos sistemas
   de rayado superpuestos.
   ------------------------------------------------------------------------- */

.woocommerce table.shop_attributes tr:nth-child(2n) td,
.woocommerce table.shop_attributes tr:nth-child(2n) th,
.woocommerce table.shop_table tr:nth-child(2n) td,
.woocommerce table.shop_table_responsive tr:nth-child(2n) td {
	background: var(--pw-surface);
}

/* Y las impares, sin fondo, para que la alternancia se lea. */
.woocommerce table.shop_attributes tr:nth-child(odd) td,
.woocommerce table.shop_attributes tr:nth-child(odd) th {
	background: transparent;
}

/* En el carrito las filas ya son tarjetas: no llevan rayado. */
.shop_table.cart tr:nth-child(2n) td,
.shop_table.cart tr:nth-child(odd) td { background: transparent; }

/* -------------------------------------------------------------------------
   13. Carrito: celdas sin bordes propios

   Las filas del carrito son tarjetas maquetadas con grid. Cada <td> seguía
   dibujando su `border-top`, y al no estar en una fila de tabla real el
   resultado eran rayitas sueltas sobre cada celda.
   ------------------------------------------------------------------------- */

.woocommerce table.shop_table.cart tr.cart_item td,
.woocommerce table.shop_table.cart tr.cart_item th,
.woocommerce-page table.shop_table.cart tr.cart_item td,
.shop_table.cart tr.cart_item td { border: 0; }

/* -------------------------------------------------------------------------
   14. Método de envío en los totales

   Con varios métodos WooCommerce imprime radios y conviene la opción
   tocable con borde. Con uno solo emite un input oculto y una etiqueta: ahí
   la caja sobra y se desbordaba sobre la columna de al lado.
   ------------------------------------------------------------------------- */

/* Por defecto, texto plano. */
#shipping_method li label,
.woocommerce-shipping-methods li label {
	display: block;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-weight: 600;
	font-size: var(--pw-text-sm);
	color: var(--pw-ink-deep);
	cursor: default;
	text-align: right;
}

/* La caja tocable solo cuando hay un radio real que elegir. */
#shipping_method li input[type="radio"] + label,
.woocommerce-shipping-methods li input[type="radio"] + label {
	display: flex;
	align-items: center;
	gap: var(--pw-3);
	padding: var(--pw-3) var(--pw-4);
	background: var(--pw-bg);
	border: 1.5px solid var(--pw-line);
	border-radius: var(--pw-r-md);
	cursor: pointer;
	text-align: left;
	transition: border-color var(--pw-fast) var(--pw-ease),
	            background-color var(--pw-fast) var(--pw-ease);
}
#shipping_method li input[type="radio"] + label:hover { border-color: var(--pw-brand); }
#shipping_method li input[type="radio"]:checked + label {
	border-color: var(--pw-ink-brand);
	background: var(--pw-surface);
}

#shipping_method, .woocommerce-shipping-methods { margin: 0; }
#shipping_method li, .woocommerce-shipping-methods li { margin: 0; list-style: none; }

/* Destino y enlace para cambiarlo. */
.woocommerce-shipping-destination {
	display: block;
	margin-top: var(--pw-2);
	font-size: var(--pw-text-xs);
	color: var(--pw-ink-soft);
	text-align: right;
	line-height: var(--pw-leading-snug);
}
.shipping-calculator-button {
	display: inline-block;
	margin-top: var(--pw-1);
	font-size: var(--pw-text-xs);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   15. Fila del carrito: una sola cifra por concepto

   Antes había columna de precio unitario y de subtotal. Con cantidad 1
   muestran la misma cifra dos veces y, sin encabezados, no hay forma de
   saber cuál es cuál. Añadir la cabecera no resuelve bien el problema:
   las filas son tarjetas con su propio relleno, así que sus columnas nunca
   coinciden del todo con las de un thead que vive fuera de ellas.

   Se elimina la columna duplicada: el precio unitario acompaña al nombre
   (donde el dato tiene sentido) y la columna de la derecha es siempre el
   total de esa línea.
   ------------------------------------------------------------------------- */

.shop_table.cart thead { display: none; }

/* El precio unitario vive junto al nombre en todos los tamaños. */
.pw-cart-unit { display: block; }

@media (min-width: 700px) {
	.pw-cart-unit { display: block; }
}

/* La columna propia de precio desaparece: su dato ya está sobre el nombre. */
.shop_table.cart td.product-price { display: none !important; }

@media (min-width: 900px) {
	.shop_table.cart tr.cart_item {
		grid-template-columns: 40px 88px minmax(180px, 1fr) auto auto;
		grid-template-areas: "rm img info qty total";
	}
}

/* El estilo de cifra grande es de la celda, no del encabezado. */
.shop_table.cart td.product-subtotal {
	font-family: var(--pw-font-display);
	font-weight: 700;
	font-size: var(--pw-text-lg);
	color: var(--pw-ink-deep);
	text-align: right;
	white-space: nowrap;
}


/* -------------------------------------------------------------------------
   16. Glifos de la tipografía de iconos del plugin

   WooCommerce dibuja algunas flechas y marcas con `font-family: WooCommerce`
   y caracteres del área de uso privado. No comparten trazo ni peso con los
   iconos del tema y no escalan igual. Se sustituyen por el mismo chevron
   enmascarado que usa el acordeón.
   ------------------------------------------------------------------------- */

.woocommerce .shipping-calculator-button {
	display: inline-flex;
	align-items: center;
	gap: var(--pw-1);
}

.woocommerce .shipping-calculator-button::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--pw-fast) var(--pw-ease);
}
.woocommerce .shipping-calculator-button[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Cualquier otro resto de esa tipografía queda sin glifo antes que mal
   dibujado; los iconos que el tema necesita los imprime como SVG. */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before,
.woocommerce-message::after,
.woocommerce-info::after { content: none; }

/* El formulario que despliega el enlace. */
.woocommerce .shipping-calculator-form {
	margin-top: var(--pw-4);
	padding: var(--pw-4);
	background: var(--pw-bg);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-r-md);
	text-align: left;
}
.woocommerce .shipping-calculator-form .form-row { margin-bottom: var(--pw-3); }
.woocommerce .shipping-calculator-form .button { width: 100%; }

/* -------------------------------------------------------------------------
   17. Carrito en móvil

   WooCommerce trae su propio modo responsive para `shop_table_responsive`:
   oculta la miniatura y convierte cada celda en una línea etiquetada con
   `::before { content: attr(data-title) }`. Ese modo compite con el diseño
   de tarjetas del tema, así que se desactiva por completo y las etiquetas
   las pone el tema donde hacen falta.
   ------------------------------------------------------------------------- */

/* Fuera las etiquetas automáticas del plugin. */
.woocommerce table.shop_table_responsive tr td::before,
.woocommerce-page table.shop_table_responsive tr td::before,
.shop_table.cart tr.cart_item td::before { content: none; }

/* La miniatura se muestra: es la referencia visual del producto. */
.woocommerce table.shop_table_responsive tr td.product-thumbnail,
.woocommerce-page table.shop_table_responsive tr td.product-thumbnail,
.shop_table.cart td.product-thumbnail { display: block; }

/* El plugin también fuerza `display:block` y `text-align:right` en las
   celdas de esa tabla, lo que rompe el grid de la tarjeta. */
.woocommerce table.shop_table_responsive tr td,
.woocommerce-page table.shop_table_responsive tr td { text-align: left; }

@media (max-width: 899px) {
	.shop_table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr) auto;
		grid-template-areas:
			"img info rm"
			"img qty total";
		gap: var(--pw-2) var(--pw-3);
		align-items: start;
		padding: var(--pw-4);
	}

	.shop_table.cart td.product-thumbnail { grid-area: img; }
	.shop_table.cart td.product-name      { grid-area: info; align-self: center; }
	.shop_table.cart td.product-remove    { grid-area: rm; justify-self: end; }
	.shop_table.cart td.product-quantity  { grid-area: qty; align-self: center; }
	.shop_table.cart td.product-subtotal  { grid-area: total; align-self: center; justify-self: end; }

	.shop_table.cart .product-thumbnail img,
	.shop_table.cart .product-thumbnail svg {
		width: 76px;
		height: 76px;
		border-radius: var(--pw-r);
	}

	.shop_table.cart td.product-name a {
		display: block;
		font-size: var(--pw-text-sm);
		line-height: var(--pw-leading-snug);
	}

	/* La etiqueta del total sobra en móvil: la columna es inequívoca. */
	.shop_table.cart td.product-subtotal::before { content: none; }
	.shop_table.cart td.product-subtotal { font-size: var(--pw-text-base); }
}

/* En escritorio la etiqueta sí ayuda, porque hay más columnas. */
@media (min-width: 900px) {
	.shop_table.cart td.product-subtotal::before {
		content: attr(data-title);
		display: block;
		margin-bottom: 2px;
		font-family: var(--pw-font-body);
		font-size: var(--pw-text-xs);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--pw-ink-soft);
	}
}

/* -------------------------------------------------------------------------
   18. Totales: sin los dos puntos que añade el plugin
   ------------------------------------------------------------------------- */

.cart_totals th::after,
.woocommerce-checkout-review-order-table th::after { content: none; }

/* -------------------------------------------------------------------------
   19. Tabla de totales en móvil

   El modo responsive del plugin oculta los <th> y confía en las etiquetas
   `data-title` que el bloque anterior desactiva. En la tabla de totales esos
   <th> son la etiqueta de cada importe, así que se recuperan.
   ------------------------------------------------------------------------- */

.cart_totals table.shop_table_responsive tr th,
.cart_totals table.shop_table tr th,
.woocommerce-checkout-review-order-table tr th,
.pw-summary table tr th {
	display: table-cell;
	text-align: left;
}

.cart_totals table.shop_table_responsive tr td,
.woocommerce-checkout-review-order-table tr td { text-align: right; }

/* Cada fila de totales es etiqueta a la izquierda, importe a la derecha. */
.cart_totals table, .woocommerce-checkout-review-order-table { width: 100%; table-layout: auto; }

/* -------------------------------------------------------------------------
   20. Alineación del texto en las tarjetas del carrito

   El plugin alinea a la derecha todas las celdas de `shop_table_responsive`.
   En las tarjetas del carrito el nombre y el precio unitario deben leerse
   desde la izquierda; solo el importe de línea va a la derecha.
   ------------------------------------------------------------------------- */

.woocommerce table.shop_table_responsive.cart tr.cart_item td,
.woocommerce-page table.shop_table_responsive.cart tr.cart_item td,
.shop_table.cart tr.cart_item td.product-name,
.shop_table.cart tr.cart_item td.product-name a,
.shop_table.cart tr.cart_item .pw-cart-unit { text-align: left; }

.shop_table.cart tr.cart_item td.product-subtotal { text-align: right; }
.shop_table.cart tr.cart_item td.product-remove { text-align: right; }

@media (max-width: 899px) {
	.shop_table.cart tr.cart_item td.product-quantity { justify-self: start; }
}

/* -------------------------------------------------------------------------
   21. Los totales se comportan como tabla en todos los tamaños

   El modo responsive convierte filas y celdas en bloques para apilarlas con
   su etiqueta `data-title`. En una tabla de dos columnas —concepto e
   importe— apilar sobra: caben de sobra incluso a 360 px.

   Los selectores llevan tres clases a propósito: los del plugin
   (`.woocommerce table.shop_table_responsive tr`) pesan (0,2,2) y cualquier
   cosa más ligera pierde.
   ------------------------------------------------------------------------- */

.woocommerce .cart_totals table.shop_table,
.woocommerce-page .cart_totals table.shop_table,
.woocommerce table.woocommerce-checkout-review-order-table,
.woocommerce .pw-summary table.shop_table { display: table; width: 100%; }

.woocommerce .cart_totals table.shop_table tr,
.woocommerce-page .cart_totals table.shop_table tr,
.woocommerce table.woocommerce-checkout-review-order-table tr,
.woocommerce .pw-summary table.shop_table tr { display: table-row; }

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td,
.woocommerce-page .cart_totals table.shop_table th,
.woocommerce-page .cart_totals table.shop_table td,
.woocommerce table.woocommerce-checkout-review-order-table th,
.woocommerce table.woocommerce-checkout-review-order-table td,
.woocommerce .pw-summary table.shop_table th,
.woocommerce .pw-summary table.shop_table td {
	display: table-cell;
	vertical-align: top;
}

/* Concepto a la izquierda, importe a la derecha. */
.woocommerce .cart_totals table.shop_table th,
.woocommerce table.woocommerce-checkout-review-order-table th {
	width: 42%;
	text-align: left;
}
.woocommerce .cart_totals table.shop_table td,
.woocommerce table.woocommerce-checkout-review-order-table td { text-align: right; }

/* El bloque de envío comparte fila con su etiqueta. */
.cart_totals .woocommerce-shipping-methods li label,
.cart_totals .woocommerce-shipping-destination,
.cart_totals .shipping-calculator-button { text-align: right; }

/* -------------------------------------------------------------------------
   22. Descripción del método de pago

   El plugin pinta este cuadro con `#payment div.payment_box` —un selector
   con ID— en lila (#dcd7e2) y texto gris (#515151), y le pone un radio de
   2px y una flecha en ::after con su tipografía de iconos. Se replica la
   forma del selector para poder alinearlo.
   ------------------------------------------------------------------------- */

#payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box,
#add_payment_method #payment div.payment_box {
	background-color: var(--pw-bg);
	color: var(--pw-ink);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-r-md);
	padding: var(--pw-4);
	margin: var(--pw-2) 0 var(--pw-4);
	font-size: var(--pw-text-sm);
	line-height: var(--pw-leading-body);
}

#payment div.payment_box p,
.woocommerce-checkout #payment div.payment_box p { color: var(--pw-ink); margin: 0; }

/* La flecha que apunta al método seleccionado, dibujada con la tipografía
   de iconos del plugin. */
#payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before,
#payment div.payment_box::after,
.woocommerce-checkout #payment div.payment_box::after { content: none; border: 0; }

/* Los campos dentro del cuadro heredaban el borde lila. */
#payment div.payment_box input.input-text,
#payment div.payment_box textarea,
.woocommerce-checkout #payment div.payment_box input.input-text,
.woocommerce-checkout #payment div.payment_box textarea {
	border-color: var(--pw-line-strong);
	border-top-color: var(--pw-line-strong);
	background: var(--pw-surface);
}

/* La lista de métodos y su contenedor. */
#payment, .woocommerce-checkout #payment { background: transparent; border-radius: var(--pw-r-lg); }
#payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods { border-bottom: 0; }
#payment div.form-row, .woocommerce-checkout #payment div.form-row { padding: 0; }

/* -------------------------------------------------------------------------
   23. Validación: avisar cuando hay algo que avisar

   El plugin añade `woocommerce-invalid` al pintar el formulario, no al
   detectar un error. Si el borde rojo se ata a esa clase, el visitante llega
   a un checkout que parece lleno de fallos antes de escribir una letra.

   El rojo se reserva para después de un intento de envío: WooCommerce añade
   `woocommerce-invalid` al <form> completo solo entonces.
   ------------------------------------------------------------------------- */

/* Estado de reposo: neutro, aunque el campo esté vacío y sea obligatorio. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--pw-line-strong);
	background: var(--pw-surface);
}

/* Tras intentar enviar, o si el visitante ya pasó por el campo y lo dejó
   mal, entonces sí. */
.woocommerce form.woocommerce-invalid .form-row.woocommerce-invalid input.input-text,
.woocommerce form.woocommerce-invalid .form-row.woocommerce-invalid select,
.woocommerce form.woocommerce-invalid .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid input.input-text:not(:placeholder-shown):invalid,
.woocommerce form .form-row.woocommerce-invalid input.input-text[aria-invalid="true"] {
	border-color: var(--pw-danger);
	background: var(--pw-danger-bg);
}

/* El campo validado correctamente no necesita celebrarse con un borde verde
   permanente: basta con volver al reposo. */
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
	border-color: var(--pw-line-strong);
}

/* -------------------------------------------------------------------------
   24. Carrito vacío
   ------------------------------------------------------------------------- */

.pw-empty--cart { max-width: 620px; margin-inline: auto; }
.pw-empty--cart > .pw-illu { max-width: 220px; }

.pw-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pw-3);
	margin-top: var(--pw-2);
}

.pw-empty__aside {
	margin-top: var(--pw-5);
	text-align: center;
	font-size: var(--pw-text-sm);
}

/* El aviso «tu carrito está vacío» del plugin ya no hace falta. */
.woocommerce .cart-empty.woocommerce-info { display: none; }
.woocommerce .return-to-shop { display: none; }