/*
 * Páginas de compra (Plan 4): carrito, checkout, página de gracias y Mi cuenta, con el contenido de WooCommerce dentro
 * (partes/pagina-compra.php). Valores del JSON de Elementor (páginas 12 y 14), de la hoja del widget de Elementor Pro que
 * hoy las pinta (widget-woocommerce-cart.min.css y widget-woocommerce-my-account.min.css), de la del tema hijo
 * (la-caribena/style.css) y de las medidas del navegador sobre la web de hoy (capturas/medidas-plan4/, Tarea 1): si no
 * coinciden, manda la medida (capturas/rulings-plan-4.md).
 * El CSS de WooCommerce sigue cargado y sus reglas pesan hasta (0,5,1) (.woocommerce button.button:disabled[disabled]:
 * hover): las de aquí van bajo .compra .woocommerce y con una clase de más donde compiten, como cabecera.css con el
 * mini-carrito; pruebas/compra-paginas.py lo comprueba con estilos calculados. Todo va bajo .compra, que no contiene el
 * mini-carrito (un <dialog> del pie): nada de aquí lo alcanza.
 * D10: «Proceder al pago» en burdeos sobre amarillo; el texto sobre rosa, en burdeos; los enlaces cian y rosa de hoy,
 * oscurecidos en su tono hasta 4,5:1 sobre su fondo.
 */
.compra {
	--cian-texto: #20809d;      /* el #5BC0DE de hoy (2,09:1 sobre blanco) oscurecido en su tono: 4,53:1 */
	--rosa-texto-gris: #d71c47; /* --rosa-texto da 4,41:1 sobre el crema de los avisos y 4,08 sobre el #F1F2F3 de las pestañas; este, 4,88 y 4,52 */
	--gris-elementor: #69727d;  /* el texto de los widgets de Elementor Pro: 4,88:1 sobre blanco */
	--borde-caja: #d5d8dc;      /* el borde de sus secciones */
	display: flow-root;
}

/* Héroe de carrito y Mi cuenta (cf7cd63 y dc37a5d): 450 px con 10 px de relleno a los lados, la foto a sangre con su
   velo y el título centrado, 30 px por encima del centro (los 60 px de margen inferior de 775a384 y 39bc38d).
   isolation: el velo en multiply se mezcla con la foto y no con la página. */
.compra__heroe { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 450px; padding-inline: 10px; overflow: hidden; }
.compra__heroe .compra__foto,
.compra__heroe .compra__textura { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.compra__heroe .compra__textura { z-index: 1; opacity: .69; mix-blend-mode: multiply; }
/* El velo bajo el título (D10: texto grande blanco sobre foto o velo, al menos 3:1), con la solución de las cabeceras
   con foto del Plan 3 (.cabecera-archivo::before, tienda.css): una capa entre la foto y el título. En el carrito, su velo
   rosa de hoy (#EA5F7F85 × 0,69 en multiply: un 36 % efectivo, 1,5:1) más opaco en su mismo tono; en Mi cuenta, que no
   lleva velo (1,3-1,5:1 sobre la foto), el negro de aquellas cabeceras. --velo es la opacidad mínima, en pasos de 0,05,
   que da 3:1 en el punto más claro bajo el título a 1440, 768 y 390 px (pruebas/compra-paginas.py, contraste_heroes). */
.compra__heroe::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: var(--velo); }
.compra--carrito .compra__heroe { --velo: .95; }
.compra--carrito .compra__heroe::before { background: #ea5f7f; mix-blend-mode: multiply; }
.compra--cuenta .compra__heroe { --velo: .4; }
.compra--cuenta .compra__heroe::before { background: #000; }
/* 50 px en 600, mayúsculas y 10 px entre palabras, en blanco. Interlineado de 30 px en escritorio, como hoy, donde cabe
   en una línea; por debajo de 1025 px parte en varias y con 30 px se montan (hoy, en tableta): 1,2, el de móvil de hoy,
   con sus 10 px de relleno. */
.compra__titulo--heroe { position: relative; z-index: 2; margin: 0 0 60px; padding: 10px; color: #fff; font: 600 50px/1.2 var(--letra); word-spacing: 10px; text-align: center; text-transform: uppercase; }
@media (min-width: 1025px) { .compra__titulo--heroe { padding: 0; line-height: 30px; } }

/* El contenido se monta sobre el héroe, como hoy: un margen de −10 % (el % de un margen se mide sobre el ancho de la
   página) y, en el carrito, un relleno del 3 % arriba (4bc01e56); debajo, un 4 % (carrito) y un 6 % (Mi cuenta,
   70a073b6). La caja de 1140 px de Elementor, sin relleno a los lados: en móvil, las cajas van de borde a borde.
   position: encima del héroe, que es un contexto de apilamiento propio. flow-root: el contenedor de Elementor es flex y
   el margen de su último hijo (los 30 px bajo los totales en una columna, el del párrafo del carrito vacío) se suma a
   su 4 % en vez de colapsarse con él (medido). */
.compra__contenido { position: relative; display: flow-root; }
.compra__heroe + .compra__contenido { width: 100%; max-width: 1140px; margin: -10% auto 4%; }
.compra--carrito .compra__contenido { padding-top: 3%; }
.compra--cuenta .compra__contenido { margin-bottom: 6%; }

/* Checkout y página de gracias, sin héroe: el h1 de hello-elementor (40 px en 500), como hoy. */
.compra__titulo:not(.compra__titulo--heroe) { margin: 8px 0 16px; color: var(--cuerpo); font: 500 40px/1.2 var(--letra); }

/* Los párrafos, con el reset de hello-elementor, que hoy pinta estas páginas: nada arriba y 0,9 rem debajo (medido: el
   de «Volver a la tienda», 14,4 px). */
.compra p { margin-block: 0 .9rem; }

/* Avisos de WooCommerce, los del tema hijo (style.css:326-345): crema con borde amarillo y un ✔ a la izquierda. */
.compra .woocommerce-message,
.compra .woocommerce-info { position: relative; margin: 0 0 2em; padding: 1rem 1.25rem 1rem 3rem; border: 1px solid #f9d681; border-left-width: 5px; border-radius: 5px; background: #fffaf4; box-shadow: 0 2px 5px rgba(0, 0, 0, .03); color: var(--cuerpo); font-family: var(--letra); }
.compra .woocommerce-message::before,
.compra .woocommerce-info::before { content: "\2714"; position: absolute; top: 50%; left: 1.2rem; transform: translateY(-50%); color: #f9d681; font-family: inherit; font-size: 1.25rem; }

/* El botón de los avisos («Ver carrito»), el del tema hijo (style.css:347-361): rosa, a la derecha (WooCommerce), con
   5 px de radio y 0,6 × 1,2 rem de relleno; con el ratón encima, su #B95B70. D10, regla 1 (.boton--rosa): el texto
   blanco, a 19 px y en 700 (hoy, 14 px en 600: 3,26:1 no basta a ese tamaño). */
.compra .woocommerce :is(.woocommerce-message, .woocommerce-info) a.button { padding: .6rem 1.2rem; border: 0; border-radius: 5px; background: var(--rosa); color: #fff; font: 700 19px/normal var(--letra); text-decoration: none; }
.compra .woocommerce :is(.woocommerce-message, .woocommerce-info) a.button:hover { background: #b95b70; color: #fff; } /* blanco 4,38:1: basta a ese tamaño */

/* Enlaces dentro de un texto, subrayados (WCAG 1.4.1): el color solo no llega a 3:1 frente al texto de al lado. Los
   sueltos (el nombre del producto, la ×, «Cambiar dirección», «¿Olvidaste la contraseña?», las pestañas de Mi cuenta) y
   los botones van como hoy, sin subrayar. Acota la regla del Plan 2, que subrayaba todos los de las páginas de tienda
   (rulings-plan-2.md:234). Dónde: los avisos (todas las páginas); la frase de los términos (checkout) y el producto de
   la tabla del pedido (página de gracias), de la Tarea 6; el texto de privacidad del registro y los párrafos del
   escritorio (Mi cuenta), de la Tarea 7. Los de los avisos van en un <div> y no en una frase de un <p>: 24 px de alto
   (WCAG 2.5.8) y el rosa que da 4,5:1 sobre el crema. */
.compra :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-privacy-policy-text, .compra__terminos, .woocommerce-MyAccount-content > p, .woocommerce-table--order-details .product-name) a:not(.button) { text-decoration: underline; }
.compra :is(.woocommerce-message, .woocommerce-info) a:not(.button) { display: inline-block; color: var(--rosa-texto-gris); line-height: 24px; }

/* «(incl. impuestos)»: hoy oculto en toda la web por el tema hijo (style.css:364). */
.compra .tax_label { display: none; }

/* Carrito con productos (80fa801): en escritorio, la tabla y el cupón en su caja a la izquierda (59 %) y los totales a la
   derecha, 30 px más allá y fijos al hacer scroll (sticky_right_column); una columna hasta 1024 px, con 30 px entre la
   columna de la izquierda y los totales y 30 px bajo estos (widget-woocommerce-cart.min.css; medido: el cupón no lleva
   margen, los totales 30 px solo en una columna). :has, porque el carrito vacío no lleva columnas. */
@media (min-width: 1025px) {
	.compra--carrito .woocommerce:has(> .woocommerce-cart-form) { display: grid; grid-template-columns: 59% minmax(0, 1fr); column-gap: 30px; align-items: start; }
	.compra--carrito .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.compra--carrito .woocommerce > .cart-collaterals { position: sticky; top: 0; }
}
/* Las cajas: blancas, con borde de 1 px, 3 px de radio y 16 × 30 px de relleno. */
.compra .compra__caja,
.compra .woocommerce .cart-collaterals .cart_totals { margin: 0; padding: 16px 30px; border: 1px solid var(--borde-caja); border-radius: 3px; background: #fff; }
.compra .compra__caja--tabla { margin-bottom: 30px; }
.compra .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; text-align: start; }
@media (max-width: 1024px) {
	.compra--carrito .woocommerce > .cart-collaterals { margin-top: 30px; }
	.compra .woocommerce .cart-collaterals .cart_totals { margin-bottom: 30px; }
}

/* La tabla: cabeceras de 20 px en 500, en burdeos (order_summary_title de 80fa801); celdas de 16 px con interlineado de
   10 px en el #333 del cuerpo, y lo que va en un span (los importes), en burdeos (order_summary_items y
   order_summary_color). Separadores #D5D8DC. El 0,9 em de la tabla es el reset de hello-elementor (medido: 14,4 px). */
.compra .woocommerce table.shop_table.cart { margin: 0; border: 0; font-size: .9em; }
.compra .woocommerce table.shop_table.cart th { padding: 0 20px 8px 0; border: 0; color: var(--burdeos); font: 500 20px/1.3 var(--letra); }
.compra .woocommerce table.shop_table.cart td { padding: 20px 20px 20px 0; border-top: 1px solid var(--borde-caja); color: var(--cuerpo); font: 400 16px/10px var(--letra); letter-spacing: -.2px; }
.compra .woocommerce table.shop_table.cart td span { color: var(--burdeos); }
.compra .woocommerce table.shop_table.cart tbody tr:first-child td { border-top-width: 0; }
.compra .woocommerce table.shop_table.cart td.product-remove { padding-inline: 0; }
.compra .woocommerce table.shop_table.cart img { display: block; width: 55px; height: auto; }
.compra .woocommerce table.shop_table.cart td.product-thumbnail a { display: block; } /* en línea, con la imagen en bloque dentro, su caja mediría 0 y no llegaría a 24 px */
/* La ×: rosa, como hoy (3,26:1, basta para un icono), de 24 × 24 px (hoy, 14 × 24). Con el ratón encima, burdeos: hoy
   amarilla (1,61:1). */
.compra .woocommerce table.shop_table.cart a.remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: none; color: var(--rosa) !important; font-size: 24px; } /* WooCommerce la pinta roja con !important */
.compra .woocommerce table.shop_table.cart a.remove:hover { background: none; color: var(--burdeos) !important; }
/* El nombre: el cian de hoy, oscurecido (D10), en un bloque de 24 px de alto (WCAG 2.5.8; hoy, 20). Los 7 px de margen
   negativo arriba y abajo lo dejan ocupar en la línea los 10 px del interlineado de la celda: la fila mide lo de hoy
   (50 px en móvil) y el texto queda donde hoy. */
.compra .woocommerce table.shop_table.cart td.product-name a { display: inline-block; margin-block: -7px; color: var(--cian-texto); line-height: 24px; }
/* La cantidad: 16 px, como las celdas, y con ellos el 3,631 em de ancho de WooCommerce da los 58 px de hoy. */
.compra .woocommerce table.shop_table.cart .quantity .qty { min-height: 28px; max-height: 28px; padding: 1px 2px; border: 1px solid var(--rosa); border-radius: 3px; background: transparent; color: var(--burdeos); font: 400 16px/10px var(--letra); letter-spacing: -.2px; text-align: start; }
.compra .woocommerce table.shop_table.cart td.actions { padding: 16px 0 0; border-top: 1px solid var(--borde-caja); text-align: start; }
/* «Actualizar el carrito» y «Aplicar el cupón»: contorno rosa al 43 % (#EA5F7F6E) de 2 px sobre transparente, texto gris
   de 16 px con interlineado de 10 px y el relleno de Elementor (.88rem 2rem); WooCommerce baja el primero al 50 %
   mientras no hay cambios, como hoy. Con el ratón encima, fondo rosa y texto burdeos (D10: el blanco de hoy, con 16 px
   en 400, da 3,26:1). */
.compra .woocommerce table.shop_table.cart button.button,
.compra .woocommerce .compra__cupon button.button { padding: .88rem 2rem; border: 2px solid #ea5f7f6e; border-radius: 3px; background: transparent; color: var(--gris-elementor); font: 400 16px/10px var(--letra); letter-spacing: -.2px; }
.compra .woocommerce table.shop_table.cart button.button:not(:disabled):hover,
.compra .woocommerce .compra__cupon button.button:hover { border-color: var(--rosa); background: var(--rosa); color: var(--burdeos); }
/* El cupón: el campo en dos tercios y el botón en uno, 30 px entre los dos (coupon-col de Elementor: sus columnas
   reparten el ancho entero, relleno incluido; en flex con base 0 el relleno quedaría fuera del reparto). En una columna
   hasta 1024 px, el botón debajo, a todo el ancho y a 15 px. El error de un cupón (cart.js lo añade al final de la caja)
   va en su propia fila, bajo el campo y el botón, como en Elementor, que lo añade tras su fila. */
.compra .compra__cupon { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 30px; }
.compra .compra__cupon .input-text { width: 100%; margin: 0; padding: 7.5px; border: 1px solid rgba(32, 7, 7, .8); border-radius: 4px; background: #fff; box-shadow: none; color: #000; font: 400 15px/16px var(--letra); letter-spacing: -.2px; }
.compra .woocommerce .compra__cupon button.button { width: 100%; }
.compra .compra__cupon .coupon-error-notice { grid-column: 1 / -1; margin: 0; font-size: 14px; }
@media (max-width: 1024px) {
	.compra .compra__cupon { grid-template-columns: minmax(0, 1fr); gap: 15px; }
}

/* Totales: «Totales del carrito» de 20 px con interlineado de 10, en negro. Las filas, como el widget: la celda en el
   14,4 px del cuerpo de la tabla, y su nombre (td::before, porque las th van ocultas) y los importes, de 20 px con
   interlineado de 10 en el gris de Elementor; el nombre a la izquierda y el importe a la derecha, con 15 px entre filas
   (totals_rows_gap). El importe del envío va en negrita (#shipping_method .amount de WooCommerce), como hoy.
   WooCommerce alinea las celdas a la derecha con !important hasta 768 px (woocommerce-smallscreen.css): la del envío,
   que va a la izquierda, también lo necesita. */
.compra .woocommerce .cart_totals h2 { margin: 0 0 16px; padding: 0 20px 8px 0; color: #000; font: 400 20px/10px var(--letra); letter-spacing: -.2px; }
.compra .woocommerce .cart_totals table.shop_table { margin: 0 0 6px; border: 0; } /* los 6 px de WooCommerce bajo la tabla, como hoy */
.compra .woocommerce .cart_totals table.shop_table th { display: none; }
.compra .woocommerce .cart_totals table.shop_table td { padding: 7.5px 12px 7.5px 0; border: 0; color: var(--cuerpo); font: 400 14.4px/1.5 var(--letra); text-align: end !important; }
.compra .woocommerce .cart_totals table.shop_table td::before,
.compra .woocommerce .cart_totals table.shop_table td .woocommerce-Price-amount { color: var(--gris-elementor); font: 400 20px/10px var(--letra); letter-spacing: -.2px; }
.compra .woocommerce .cart_totals table.shop_table td::before { content: attr(data-title); float: inline-start; }
.compra .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td { padding-inline-end: 0; text-align: start !important; }
.compra .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td::before { width: 100%; margin-bottom: 10px; } /* flota a todo el ancho, como en el widget: la lista empieza a su lado y baja */
.compra .woocommerce .cart_totals .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
/* El label, como el reset de hello-elementor (en línea como bloque, con interlineado 1). */
.compra .woocommerce .cart_totals .woocommerce-shipping-methods label { display: inline-block; color: var(--gris-elementor); line-height: 1; vertical-align: middle; }
.compra .woocommerce .cart_totals .woocommerce-shipping-destination { margin: 0; color: var(--gris-elementor); }
.compra .woocommerce .cart_totals .shipping-calculator-button { display: inline-block; color: var(--cian-texto); line-height: 24px; } /* 24 px de alto (hoy, 21,6) */
.compra .woocommerce .cart_totals .shipping-calculator-button::after { display: none; } /* la flecha de WooCommerce: hoy no está */

/* El aviso del envío gratis, con el aspecto de hoy (el aviso del tema hijo con 10 px de relleno y texto negro) y sin ✔. */
.compra .aviso-envio { margin-bottom: 15px; padding: 10px; border: 1px solid #f9d681; border-left-width: 5px; border-radius: 5px; background: #fffaf4; box-shadow: 0 2px 5px rgba(0, 0, 0, .03); color: #000; font: 400 16px/1.65 var(--letra); }

/* «Proceder al pago»: a todo el ancho, 20 px en 500 y en mayúsculas, con interlineado de 10 px y 15 px de relleno (40 px
   de alto). En burdeos sobre el amarillo de hoy (D10, regla 4: el blanco da 1,69:1); con el ratón encima, fondo rosa,
   también con texto burdeos (4,55:1). Sin la animación «buzz» de hoy (movimiento: fase B). */
.compra .woocommerce .wc-proceed-to-checkout { display: flex; flex-direction: column; padding: 1em 0 0; }
.compra .woocommerce .wc-proceed-to-checkout a.checkout-button { margin: 0; padding: 15px 1em; border-radius: 3px; background: var(--amarillo); color: var(--burdeos); font: 500 20px/10px var(--letra); letter-spacing: -.2px; text-align: center; text-transform: uppercase; }
.compra .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--rosa); color: var(--burdeos); }

/* Sin las filas alternas en gris de la tabla responsiva de WooCommerce (hasta 768 px), en el carrito y en los totales,
   como el widget (widget-woocommerce-cart.min.css). Solo en el carrito: la tabla del pedido de la página de gracias sí
   las lleva hoy (las de hello-elementor, más abajo). */
.compra--carrito .woocommerce table.shop_table tr:nth-child(n) td { background-color: transparent; }

/* Móvil: la tabla responsiva de WooCommerce (woocommerce-smallscreen.css, hasta 768 px), sin relleno a los lados de
   las celdas y sin separadores entre ellas; el nombre de cada dato (td::before) con la letra de las cabeceras. Hasta
   767 px, cada producto con 16 × 28 px de relleno y una línea entre productos; la fila de «Actualizar el carrito»,
   sin relleno (widget-woocommerce-cart.min.css). */
@media (max-width: 768px) {
	.compra .woocommerce table.shop_table.cart td,
	.compra .woocommerce table.shop_table.cart td.actions { padding-inline: 0; border-top-width: 0; }
	.compra .woocommerce table.shop_table.cart td::before { color: var(--burdeos); font: 500 20px/1.3 var(--letra); letter-spacing: 0; }
}
@media (max-width: 767px) {
	.compra .woocommerce table.shop_table.cart tr.cart_item { padding: 16px 28px; }
	.compra .woocommerce table.shop_table.cart tr.cart_item + tr.cart_item { border-top: 1px solid var(--borde-caja); }
	.compra .woocommerce table.shop_table.cart td.actions { padding: 0; }
}

/* Checkout clásico (P7) con el aspecto del de bloques de hoy (D6): el formulario a la izquierda y el resumen a la derecha,
   688 y 372 px de la caja de 1140 a 1440 px (captura de producción), en una columna hasta 767 px. En el clásico, el pago
   y «Realizar el pedido» van con el resumen (#order_review), no con el formulario: diferencia inevitable (puerta 1). */
.compra--checkout form.checkout::after { content: ""; display: table; clear: both; }
@media (min-width: 768px) {
	.compra--checkout form.checkout #customer_details { float: left; width: 60.35%; }
	.compra--checkout form.checkout #order_review_heading,
	.compra--checkout form.checkout #order_review { float: right; clear: right; width: 32.65%; }
}
/* Facturación y envío, una debajo de otra, como en el de bloques (WooCommerce las pone lado a lado, al 48 %). */
.compra--checkout .woocommerce .col2-set .col-1,
.compra--checkout .woocommerce .col2-set .col-2 { float: none; width: 100%; }
/* Títulos de sección: 20 px en 500 con 28 de interlineado, como «Información de contacto» o «Dirección de envío» de hoy. */
.compra--checkout .woocommerce h3 { margin: 32px 0 16px; color: var(--cuerpo); font: 500 20px/1.4 var(--letra); }
.compra--checkout .woocommerce #order_review_heading { margin-top: 0; }
/* Campos: 50 px de alto, borde de 1 px en el #2B2D2F al 80 % de WooCommerce Blocks (medido; el texto, en #2B2D2F) y
   4 px de radio, a todo el ancho de su fila (el país, cuando solo hay uno, es un <select> sin select2 y se quedaría a lo
   que mide su texto). La etiqueta va encima y no dentro del campo (el clásico no la hace flotar): diferencia inevitable,
   y por eso a 14 px y no a los 16 de la etiqueta flotante de hoy. */
.compra--checkout .woocommerce form .form-row { margin: 0 0 12px; padding: 0; }
.compra--checkout .woocommerce form .form-row label { color: var(--cuerpo); font: 400 14px/1.5 var(--letra); }
.compra--checkout .woocommerce form .form-row .input-text,
.compra--checkout .woocommerce form .form-row select { width: 100%; min-height: 50px; padding: 0 12px; border: 1px solid rgba(43, 45, 47, .8); border-radius: 4px; background: #fff; box-shadow: none; color: #2b2d2f; font: 400 16px/1.2 var(--letra); }
.compra--checkout .woocommerce form .form-row textarea.input-text { min-height: 100px; padding: 12px; }
.compra--checkout .select2-container--default .select2-selection--single { height: 50px; border: 1px solid rgba(43, 45, 47, .8); border-radius: 4px; }
.compra--checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 32px 0 12px; color: #2b2d2f; font: 400 16px/48px var(--letra); } /* sin el .5em de WooCommerce, que lo bajaba */
.compra--checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }
/* El resumen: la tabla de WooCommerce en una caja con el borde del de bloques, en su letra de 13 px con 1,4 de
   interlineado (medido); el total, a 20 px. */
.compra--checkout .woocommerce table.shop_table.woocommerce-checkout-review-order-table { margin: 0 0 24px; border: 1px solid rgba(17, 17, 17, .11); border-radius: 4px; }
.compra--checkout .woocommerce table.woocommerce-checkout-review-order-table th,
.compra--checkout .woocommerce table.woocommerce-checkout-review-order-table td { padding: 12px 16px; color: var(--cuerpo); font: 400 13px/1.4 var(--letra); }
.compra--checkout .woocommerce table.woocommerce-checkout-review-order-table .order-total th,
.compra--checkout .woocommerce table.woocommerce-checkout-review-order-table .order-total td { font-size: 20px; }
.compra--checkout .woocommerce table.woocommerce-checkout-review-order-table .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
/* El pago: sin el fondo gris de WooCommerce; los métodos en una caja con el borde de los campos, como «Opciones de pago»,
   y la descripción del método dentro, en texto normal (hoy no lleva la caja morada de WooCommerce ni su flecha). */
.compra--checkout .woocommerce #payment { border-radius: 0; background: none; }
.compra--checkout .woocommerce #payment ul.payment_methods { padding: 16px; border: 1px solid rgba(43, 45, 47, .8); border-radius: 4px; }
.compra--checkout .woocommerce #payment div.payment_box { margin: 8px 0 0; padding: 0; background: none; color: var(--cuerpo); font-size: 14px; }
.compra--checkout .woocommerce #payment div.payment_box::before { display: none; }
.compra--checkout .woocommerce #payment ul.payment_methods li label { display: inline-block; min-height: 24px; }
/* La frase de los términos (P7): texto de 13 px con 1,4 de interlineado y 24 px debajo; con dos columnas, encima, la
   línea que la separa de lo anterior, con 24 px (medido: en móvil, sin línea). Sus enlaces en el rosa de D10 (hoy
   #EA5F7F), subrayados como hoy. */
.compra--checkout .compra__terminos { margin: 0 0 24px; color: var(--cuerpo); font: 400 13px/1.4 var(--letra); }
@media (min-width: 768px) {
	.compra--checkout .compra__terminos { padding-top: 24px; border-top: 1px solid rgba(51, 51, 51, .2); }
}
.compra--checkout .compra__terminos a { color: var(--rosa-texto); }
/* «← Volver al carrito» a la izquierda y «Realizar el pedido» a la derecha, en la misma fila, como hoy. Sin el clearfix
   de .form-row (sus ::before y ::after serían elementos de la fila y el botón no llegaría al borde) y sin espacio entre
   filas: el <noscript> del botón «Actualizar totales» ocupa una fila vacía; lo separa de la frase su margen. */
.compra--checkout .woocommerce #payment .place-order { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding: 16px 0 0; }
.compra--checkout .woocommerce #payment .place-order::before,
.compra--checkout .woocommerce #payment .place-order::after { display: none; }
.compra--checkout .woocommerce #payment .place-order > noscript { flex-basis: 100%; }
.compra--checkout .woocommerce #payment .place-order .woocommerce-terms-and-conditions-wrapper { flex-basis: 100%; }
.compra--checkout .compra__volver { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; color: var(--cuerpo); font-size: 14px; text-decoration: underline; }
@media (max-width: 767px) {
	.compra--checkout .compra__volver { margin-bottom: 16px; } /* en móvil el botón baja a su fila, a todo el ancho (woocommerce-smallscreen.css) */
}
/* «Realizar el pedido»: el contorno #C36 de Hello Elementor que tiene hoy (fase B), sin el morado de WooCommerce (4,96:1):
   16 px con 1,4 de interlineado y 18 × 30 px de relleno, 60 px de alto (medido). */
.compra--checkout .woocommerce #payment #place_order { float: none; margin: 0; padding: 18px 30px; border: 1px solid #c36; border-radius: 3px; background: transparent; color: #c36; font: 400 16px/1.4 var(--letra); }
.compra--checkout .woocommerce #payment #place_order:hover { background: #c36; color: #fff; }

/* Página de gracias (endpoint order-received de la 13): la plantilla clásica de WooCommerce, que ya es la de hoy, con lo
   que le pone hello-elementor encima (reset.css). Medido (pagina-de-gracias-escritorio.json): títulos de 32 px en 500;
   la tabla en su 0,9 em (14,4 px), con el relleno y el borde superior de WooCommerce, que ganan a los de hello, y los
   otros tres bordes de hello (la línea entre columnas de hoy); las filas impares del cuerpo en gris al 7,1 % (al 10,2 %
   con el ratón encima). Sin relleno bajo el contenido: hello no pone ninguno (en el checkout de hoy, el pie empieza
   donde acaba el bloque) y los 2 em de WooCommerce bajo los datos del cliente ya separan del pie. */
.compra--gracias .woocommerce h2 { margin: .5rem 0 1rem; color: var(--cuerpo); font: 500 32px/1.2 var(--letra); }
.compra--gracias .woocommerce table.shop_table { font-size: .9em; }
.compra--gracias .woocommerce table.shop_table :is(th, td) { border-inline: 1px solid hsla(0, 0%, 50%, .502); border-bottom: 1px solid hsla(0, 0%, 50%, .502); }
.compra--gracias .woocommerce table.shop_table tbody > tr:nth-child(odd) > td { background-color: hsla(0, 0%, 50%, .071); }
.compra--gracias .woocommerce table.shop_table tbody > tr:hover > td { background-color: hsla(0, 0%, 50%, .102); }
.compra--gracias .woocommerce .woocommerce-table--order-details .product-name a { color: var(--rosa-texto); } /* hoy #EA5F7F: D10, regla 2 */

/* Mi cuenta (14), con las medidas de hoy (capturas/medidas-plan4/mi-cuenta-*.json): el área de cuenta del tema hijo
   (la-caribena/style.css:237-280) con lo que le pone encima el widget 1c30f55 (widget-woocommerce-my-account.min.css).
   El contenedor de Elementor (70a073b6) deja 10 px alrededor del widget: en móvil, las tarjetas no llegan al borde. */
.compra--cuenta .compra__contenido { max-width: 1160px; padding: 10px; }
/* La caja del tema hijo, tal cual: flex, 2 rem entre elementos y 2 × 1 rem de relleno; en una columna hasta 768 px. Sus
   elementos incluyen el ::before y el ::after de WooCommerce (woocommerce.css: .woocommerce-account .woocommerce, con
   display: table), así que hoy cada tarjeta queda 2 rem más adentro: la navegación a 48 px del borde de la caja y las
   columnas de acceso (tras el ::before y el div de avisos, vacío) a 80, con 48 a la derecha (medido). */
.compra--cuenta .woocommerce { display: flex; gap: 2rem; padding: 2rem 1rem; }
@media (max-width: 768px) {
	.compra--cuenta .woocommerce { flex-direction: column; padding: 1rem; }
}
/* En «Contraseña perdida», el h2 de la sección (P5, nuevo) va encima del formulario y no a su lado: primero y en su
   propia fila, sin hueco debajo en escritorio; el formulario queda donde hoy. */
.compra--cuenta .woocommerce:has(> .compra__seccion) { flex-wrap: wrap; }
.compra--cuenta .woocommerce > .compra__seccion { flex: 0 0 100%; order: -1; }
@media (min-width: 769px) {
	.compra--cuenta .woocommerce:has(> .compra__seccion) { row-gap: 0; }
}

/* Con sesión: navegación de 320 px y contenido, en tarjetas blancas con borde #DDD, 5 px de radio y sombra (tema hijo).
   La navegación, con 2 rem de relleno (1,5 rem hasta 768 px). El contenido, como el widget: 5 px a la izquierda (arriba
   hasta 1024 px) y dentro su envoltorio de 16 × 30 px (que aquí es el relleno del propio contenido). */
.compra--cuenta .woocommerce-MyAccount-navigation,
.compra--cuenta .woocommerce-MyAccount-content { float: none; border: 1px solid #ddd; border-radius: 5px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .04); }
.compra--cuenta .woocommerce-MyAccount-navigation { flex: 0 0 320px; width: auto; padding: 2rem; }
.compra--cuenta .woocommerce-MyAccount-content { flex: 1 1 0; width: auto; min-width: 0; padding: 16px 30px 16px 35px; color: var(--burdeos); font: 400 16px/1.65 var(--letra); }
/* Pedidos y descargas sin nada que enseñar: el aviso, pegado a la tarjeta (el widget quita el relleno, «-no-data»); con
   filas, 3 px abajo. Direcciones: sin borde ni relleno en la tarjeta ni en el envoltorio. */
:is(.woocommerce-orders, .woocommerce-downloads) .compra--cuenta .woocommerce-MyAccount-content { padding-bottom: 3px; }
.woocommerce-orders .compra--cuenta .woocommerce-MyAccount-content:not(:has(table)),
.woocommerce-downloads .compra--cuenta .woocommerce-MyAccount-content:not(:has(table)) { padding: 0 0 0 5px; }
.woocommerce-edit-address .compra--cuenta .woocommerce-MyAccount-content { padding: 0 0 0 5px; border: 0; }
/* Ahí el h2 de la sección (nuevo) lleva el relleno que no tiene la tarjeta. */
:is(.woocommerce-orders, .woocommerce-downloads) .compra--cuenta .woocommerce-MyAccount-content:not(:has(table)) > .compra__seccion,
.woocommerce-edit-address .compra--cuenta .woocommerce-MyAccount-content > .compra__seccion { margin: 16px 30px 24px; }
@media (max-width: 1024px) {
	.compra--cuenta .woocommerce-MyAccount-content { padding: 21px 30px 16px; }
	:is(.woocommerce-orders, .woocommerce-downloads) .compra--cuenta .woocommerce-MyAccount-content:not(:has(table)),
	.woocommerce-edit-address .compra--cuenta .woocommerce-MyAccount-content { padding: 5px 0 0; }
}
@media (max-width: 768px) {
	.compra--cuenta .woocommerce-MyAccount-navigation { padding: 1.5rem; } /* en la columna, su flex de 320 px es el alto: 320, como hoy */
}
/* Los párrafos, en el texto general (general_text de 1c30f55: 16 px con 1,2 y −0,2 px, en burdeos), con el margen de
   hello (.9 rem; medido en el escritorio: 14,4 px). */
.compra--cuenta .woocommerce-MyAccount-content > p { margin: 0 0 14.4px; font: 400 16px/1.2 var(--letra); letter-spacing: -.2px; }
.compra--cuenta .woocommerce-MyAccount-content > p:last-of-type { margin-bottom: 0; } /* widget: el último, sin margen */
.compra--cuenta .woocommerce-MyAccount-content a:not(.button) { color: var(--burdeos); } /* los enlaces, en el primario (burdeos), como hoy: subrayados donde van dentro de un texto */
/* Pestañas (tabs de 1c30f55): 14 px en 500, mayúsculas, −0,2 px e interlineado 1,2, en burdeos sobre #F9FAFA, 2 px entre
   ellas y 12 × 20 px de relleno (10 px hasta 767 px); la activa sobre #F1F2F3. D10: la activa, en #D71C47 (el rosa de hoy
   da 2,91:1 sobre ese gris y --rosa-texto, 4,08); con el ratón encima, fondo amarillo y texto burdeos (hoy texto
   amarillo, 1,61:1: regla 4). */
.compra--cuenta .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.compra--cuenta .woocommerce-MyAccount-navigation li { margin: 2px 0; }
.compra--cuenta .woocommerce-MyAccount-navigation li:first-child { margin-top: 0; }
.compra--cuenta .woocommerce-MyAccount-navigation li:last-child { margin-bottom: 0; }
.compra--cuenta .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 20px; background: #f9fafa; color: var(--burdeos); font: 500 14px/1.2 var(--letra); letter-spacing: -.2px; text-decoration: none; text-transform: uppercase; }
@media (max-width: 767px) {
	.compra--cuenta .woocommerce-MyAccount-navigation li a { padding: 10px; }
}
.compra--cuenta .woocommerce-MyAccount-navigation li.is-active a { background: #f1f2f3; color: var(--rosa-texto-gris); }
.compra--cuenta .woocommerce-MyAccount-navigation li a:hover { background: var(--amarillo); color: var(--burdeos); }
/* Títulos: 20 px en 400 en burdeos, 24 px debajo (section_titles de 1c30f55). Los de dentro del contenido llevan además la
   raya de 2 px #F4E0E8 del tema hijo (style.css:268-273), también el de la sección (P5), y 30 px encima el primero de
   cada bloque (widget: h2:first-of-type), salvo el de la sección, que abre la tarjeta. */
.compra--cuenta .compra__seccion,
.compra--cuenta #customer_login h2,
.compra--cuenta .woocommerce-MyAccount-content h2,
.compra--cuenta .woocommerce-MyAccount-content h3 { margin: 0 0 24px; color: var(--burdeos); font: 400 20px/1.2 var(--letra); letter-spacing: -.2px; }
.compra--cuenta .woocommerce-MyAccount-content h2 { border-bottom: 2px solid #f4e0e8; }
.compra--cuenta .woocommerce-MyAccount-content h2:not(.compra__seccion):first-of-type { margin-top: 30px; }

/* Acceso y registro: las dos columnas de WooCommerce (flotantes al 48 %; una debajo de otra hasta 768 px), 20 px bajo el
   div de avisos (widget: .u-columns). Cada formulario, en una tarjeta blanca sin borde, con 3 px de radio y 16 × 30 px
   de relleno, y su letra de 14 px (los 2 em de margen de WooCommerce dan los 28 px de hoy). */
.compra--cuenta .u-columns { margin-top: 20px; }
.compra--cuenta .woocommerce form.login,
.compra--cuenta .woocommerce form.register,
.compra--cuenta .woocommerce form.lost_reset_password { padding: 16px 30px; border: 0; border-radius: 3px; background: #fff; font-size: 14px; line-height: 1.65; }
/* «Contraseña perdida»: la mitad de la caja del tema hijo (widget: 50 %; la caja flex mide sin sus 2 rem de hueco), a todo
   el ancho hasta 1024 px. Su texto, el general: 16 px en burdeos. */
.compra--cuenta .woocommerce form.lost_reset_password { width: 50%; }
.compra--cuenta .woocommerce form.lost_reset_password .form-row { width: 100%; } /* widget: sin las dos columnas de WooCommerce */
@media (max-width: 1024px) {
	.compra--cuenta .woocommerce form.lost_reset_password { width: 100%; }
}
.compra--cuenta .woocommerce form.lost_reset_password > p:not(.form-row) { color: var(--burdeos); font: 400 16px/1.2 var(--letra); letter-spacing: -.2px; }
/* Filas de campos: 3 px arriba y abajo y 0,4 em debajo (WooCommerce); etiquetas de 16 px en burdeos con 0,2 em debajo;
   campos sobre #F9FAFA, sin borde, con la sombra interior de WooCommerce y 16 px de relleno, con el texto a 20 px (medido;
   el JSON dice 14) en el rosa de hoy oscurecido para ese gris (D10: #EA5F7F da ≈3,1:1; #D71C47, 4,84). */
.compra--cuenta .woocommerce form .form-row { margin: 0 0 .4em; padding: 3px 0; }
.compra--cuenta .woocommerce form .form-row label { margin-bottom: .2em; color: var(--burdeos); font: 400 16px/1.2 var(--letra); letter-spacing: -.2px; }
.compra--cuenta .woocommerce form .form-row .input-text,
.compra--cuenta .woocommerce form .form-row select { padding: 16px; border: 0; border-radius: 0; background: #f9fafa; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07); color: var(--rosa-texto-gris); font: 400 20px/10px var(--letra); letter-spacing: -.2px; }
/* «Recuérdame»: la etiqueta, de 28 px de alto, con el texto de las casillas (18 px); en escritorio, a la derecha de
   «Acceso» (WooCommerce lo hace flotar), y encima hasta 767 px, como hoy. */
.compra--cuenta .woocommerce form .form-row label.woocommerce-form__label-for-checkbox { display: inline-block; margin-bottom: 2.8px; color: var(--burdeos); font: 400 14px/28px var(--letra); }
.compra--cuenta .woocommerce form .woocommerce-form__label-for-checkbox span { font: 400 18px/1.2 var(--letra); letter-spacing: -.2px; }
.compra--cuenta .woocommerce form .woocommerce-form__input-checkbox { vertical-align: middle; }
@media (max-width: 767px) {
	.compra--cuenta .woocommerce form.login .woocommerce-form-login__submit { display: block; float: none; }
}
.compra--cuenta .woocommerce form .show-password-input { min-width: 24px; min-height: 24px; } /* el ojo que añade woocommerce.js */
/* Los textos del registro: en --rosa-texto (D10, regla 2; hoy #EA5F7F) y con el interlineado 1,5 de login_messages
   (hoy el aviso de la contraseña y el de privacidad se montan: error A). El enlace a la política, en burdeos, como hoy.
   La descripción de «Nombre visible» (Detalles de la cuenta), en el mismo rosa, en cursiva y a 20 px (captura de hoy). */
.compra--cuenta .woocommerce-form-register > p:not(.form-row) { margin: 10px 0 1em; }
.compra--cuenta .woocommerce-form-register > p:not(.form-row),
.compra--cuenta .woocommerce-privacy-policy-text p { color: var(--rosa-texto); font: 400 16px/1.5 var(--letra); letter-spacing: -.2px; }
.compra--cuenta .woocommerce-EditAccountForm em { color: var(--rosa-texto); font: italic 400 20px/1.2 var(--letra); letter-spacing: -.2px; }
.compra--cuenta .woocommerce-privacy-policy-text { margin-bottom: 15px; color: var(--rosa-texto); font-size: 12px; line-height: 1.65; }
.compra--cuenta .woocommerce-privacy-policy-text p { margin: 0; }
.compra--cuenta .woocommerce-privacy-policy-text a { color: var(--burdeos); }
/* «Acceso», «Registrarse», «Restablecer contraseña» y los de guardar: el cian de hoy (fase B) con texto burdeos (7,08:1),
   20 px con interlineado de 10 y 12 × 32 px de relleno: 34 px de alto (medido); los de guardar, 20 px más abajo. */
.compra--cuenta .woocommerce form .button { padding: 12px 32px; border: 0; border-radius: 3px; background: #5bc0de; color: var(--burdeos); font: 400 20px/10px var(--letra); letter-spacing: -.2px; }
.compra--cuenta .woocommerce :is(.woocommerce-EditAccountForm, .woocommerce-address-fields) .button { margin-top: 20px; }
/* «¿Olvidaste la contraseña?»: 12 px en la letra del sistema, como hoy (Roboto: fase B), en un bloque de 24 px
   (WCAG 2.5.8). */
.compra--cuenta .woocommerce-LostPassword { margin-bottom: 0; font-size: 12px; }
.compra--cuenta .woocommerce-LostPassword a { display: inline-block; color: var(--burdeos); font: 400 12px/24px sans-serif; }
/* Detalles de la cuenta: «Cambio de contraseña» sin el recuadro del fieldset, con su leyenda en el texto general y 20 px
   arriba y abajo (widget). */
.compra--cuenta .woocommerce-EditAccountForm { font-size: 14px; line-height: 1.65; } /* sus filas, con la letra de los formularios (14 px) */
.compra--cuenta .woocommerce-EditAccountForm fieldset { margin: 0; padding: 0; border: 0; }
.compra--cuenta .woocommerce-EditAccountForm legend { padding: 20px 0; color: var(--burdeos); font: 400 16px/1.2 var(--letra); letter-spacing: -.2px; }
/* Direcciones: cada una en su columna (14 px), con la raya bajo el título; «Añadir…/Editar» suelto bajo él, 30 px dentro
   (widget: .edit, absoluto), en un bloque de 24 px (WCAG 2.5.8); la dirección, con 45 × 30 px de relleno. */
.compra--cuenta .woocommerce-Addresses .woocommerce-Address { font-size: 14px; line-height: 1.65; }
.compra--cuenta .woocommerce-Address-title .edit { position: absolute; float: none; margin: 10px 0 0 30px; color: var(--burdeos); font: 400 14px/24px var(--letra); }
.compra--cuenta .woocommerce-Address address { padding: 45px 30px 16px; color: var(--burdeos); font: 400 16px/1.2 var(--letra); font-style: normal; letter-spacing: -.2px; }
/* Tablas (pedidos, descargas, un pedido): títulos y filas de 20 px en 400, en burdeos (tables de 1c30f55), con la raya
   de encima en burdeos (tables_divider_border_color) y sin las filas grises de WooCommerce, que el widget quita
   (widget-woocommerce-my-account.min.css: tbody > tr > td, fondo transparente). Sin medida: dev no tiene pedidos (P25). */
.compra--cuenta .woocommerce table.shop_table th,
.compra--cuenta .woocommerce table.shop_table td { border-top: 1px solid var(--burdeos); color: var(--burdeos); font: 400 20px/1.2 var(--letra); letter-spacing: -.2px; }
.compra--cuenta .woocommerce table.shop_table tbody > tr > :is(td, th) { background-color: transparent; }