/* ==========================================================================
   Matati — carrito, finalizar compra, pedido recibido y Mi cuenta
   Estructura según MANUAL-TIENDA.md; todo el color y la forma sale de los
   tokens de main.css. WooCommerce no carga sus estilos en estas pantallas
   (inc/woocommerce.php), así que no hay que ganarle especificidad a nada
   salvo a select2.
   ========================================================================== */

/* -------------------------------------------------------------------------
 * Pantalla
 * ---------------------------------------------------------------------- */
/* Carrito, checkout, gracias y Mi cuenta: al menos el 80% del alto de la pantalla */
.compra { min-height: 80vh; }

.compra__wrapper { padding-block: 64px var(--espacio-seccion); }

.compra__titulo {
	font-size: var(--txt-h2);
	line-height: .95;
	text-align: center;
}

.compra__volver {
	margin-top: 20px;
	text-align: center;
}

/* Encima de la tarjeta (checkout) */
.compra__volver--arriba { margin: 0 0 20px; }

.compra__aviso {
	margin-top: 20px;
	text-align: center;
}

/* Títulos dentro de las tarjetas: todos iguales */
.carrito__titulo,
.resumen__titulo,
.acceso__titulo,
.cuenta__saludo,
.compra .woocommerce-order-details__title,
.compra .woocommerce-column__title,
.compra .woocommerce-customer-details h2,
.compra .woocommerce-Address-title h2,
.compra .woocommerce-MyAccount-content h2,
.compra .woocommerce-MyAccount-content h3,
.compra legend {
	font-family: var(--fuente-titulo);
	font-size: 27px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	text-align: left;
}

.carrito__intro,
.cuenta__intro {
	margin-top: 10px;
	text-align: left;
}

/* -------------------------------------------------------------------------
 * Tarjeta principal (carrito, checkout, gracias)
 * ---------------------------------------------------------------------- */
.carrito {
	position: relative;
	max-width: 680px;
	margin: 0 auto;
	padding: 44px;
	background: var(--blanco);
	border: var(--borde-grueso);
	border-radius: 48px;
	box-shadow: var(--sombra-tarjeta);
	transition: opacity var(--suave);
}

/* En la página del carrito, sin cápsula: el contenido va directo sobre el fondo */
.compra--carrito .carrito {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Mientras el servidor responde, el bloque se apaga un poco */
.carrito.is-cargando {
	opacity: .55;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Avisos de WooCommerce (van dentro de .woocommerce-notices-wrapper)
 * ---------------------------------------------------------------------- */
.compra .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 20px; }

.compra .woocommerce-message,
.compra .woocommerce-info,
.compra .woocommerce-error,
.cupon__aviso:not([hidden]) {
	position: relative;
	margin: 0;
	padding: 14px 18px 14px 52px;
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	list-style: none;
	background: var(--bg-exito);
	border: var(--grosor) solid var(--c-exito);
	border-radius: 20px;
}

.compra .woocommerce-error,
.cupon__aviso:not([hidden]) {
	background: var(--bg-error);
	border-color: var(--c-error);
}

.compra .woocommerce-info {
	background: var(--blanco);
	border-color: var(--tinta);
}

.compra .woocommerce-error li + li { margin-top: 4px; }

/* Ícono propio (sin la fuente de WooCommerce) */
.compra .woocommerce-message::before,
.compra .woocommerce-info::before,
.compra .woocommerce-error::before,
.cupon__aviso:not([hidden])::before {
	content: "✓";
	position: absolute;
	top: 13px;
	left: 16px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	color: var(--blanco);
	background: var(--c-exito);
	border-radius: 50%;
}

.compra .woocommerce-info::before {
	content: "i";
	font-family: var(--fuente-titulo);
	background: var(--tinta);
}

.compra .woocommerce-error::before,
.cupon__aviso:not([hidden])::before {
	content: "!";
	background: var(--c-error);
}

/* WooCommerce les da foco al avisar: sin recuadro del navegador */
.compra .woocommerce-message:focus,
.compra .woocommerce-info:focus,
.compra .woocommerce-error:focus,
.compra .woocommerce-notices-wrapper:focus { outline: 0; }

/* El botón del aviso, como enlace en su propia línea */
.compra .woocommerce-message .button,
.compra .woocommerce-info .button,
.compra .woocommerce-error .button {
	display: block;
	float: none;
	width: fit-content;
	margin: 6px 0 0;
	padding: 0;
	font-family: var(--fuente-texto);
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-color: var(--rosa);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

/* Carrito vacío: el aviso como texto normal */
.carrito--vacio .cart-empty {
	margin-top: 12px;
	padding: 0;
	text-align: left;
	background: none;
	border: 0;
}

.carrito--vacio .cart-empty::before { display: none; }

/* -------------------------------------------------------------------------
 * Carrito: líneas de producto
 * ---------------------------------------------------------------------- */
.carrito__lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.linea {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 16px;
	background: var(--crema);
	border: var(--borde);
	border-radius: var(--forma-a);
}

.linea__media { width: 88px; }

.linea__foto {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border: var(--borde);
	border-radius: 50%;
}

.linea__nombre {
	font-size: 22px;
	line-height: 1.05;
}

.linea__nombre a { text-decoration: none; }

.linea__precio {
	margin-top: 4px;
	font-size: 16px;
}

.linea__antes {
	margin-left: 6px;
	opacity: .7;
}

.linea__antes .amount { text-decoration: line-through; }

.linea__variacion { font-size: 16px; }

/* wc_get_formatted_cart_item_data devuelve un <dl>: se aplana a una línea */
.linea__variacion dl,
.linea__variacion dt,
.linea__variacion dd {
	display: inline;
	margin: 0;
}

.linea__variacion dd + dt::before { content: " · "; }

/* Columna de acciones, separada por una rayita punteada */
.linea__acciones {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	padding-left: 18px;
	border-left: var(--borde-punteado);
}

.linea__quitar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--tinta);
	background: var(--blanco);
	border: var(--borde);
	border-radius: 50%;
	transition: background var(--rapido);
}

.linea__quitar:hover {
	color: var(--tinta);
	background: var(--rosa);
}

.linea__quitar .icono {
	width: 18px;
	height: 18px;
}

.linea__total {
	font-weight: 800;
	white-space: nowrap;
}

/* Cantidad: pastilla con − y + */
.linea .quantity {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding-inline: 4px;
	background: var(--blanco);
	border: var(--borde);
	border-radius: var(--pastilla);
}

.linea .quantity input {
	width: 36px;
	height: 100%;
	padding: 0;
	font: 700 16px var(--fuente-texto);
	color: var(--tinta);
	text-align: center;
	background: none;
	border: 0;
	-moz-appearance: textfield;
}

.linea .quantity input::-webkit-outer-spin-button,
.linea .quantity input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cantidad__boton {
	width: 28px;
	height: 28px;
	font: 800 18px var(--fuente-texto);
	line-height: 1;
	color: var(--tinta);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.cantidad__boton:hover { background: var(--crema); }

/* El carrito se actualiza solo: esto queda como enlace de emergencia */
.carrito__actualizar {
	display: block;
	margin: 14px auto 0 0;
	padding: 0;
	font: 700 14px var(--fuente-texto);
	color: var(--tinta);
	text-decoration: underline;
	text-decoration-color: var(--rosa);
	text-underline-offset: 4px;
	background: none;
	border: 0;
	cursor: pointer;
}

.carrito__actualizar[hidden] { display: none; }

/* -------------------------------------------------------------------------
 * Cupón (carrito y checkout)
 * ---------------------------------------------------------------------- */
.cupon { margin-top: 28px; }

.cupon__titulo {
	font-weight: 700;
	text-align: left;
}

.cupon__form {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.cupon__campo {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--campo-alto);
	padding: 0 16px;
	font: 16px var(--fuente-texto);
	color: var(--tinta);
	background: var(--blanco);
	border: var(--campo-borde);
	border-radius: var(--campo-radio);
	outline: 0;
	transition: border-color var(--rapido), box-shadow var(--rapido);
}

.cupon__campo:focus {
	border-color: var(--turquesa);
	box-shadow: var(--campo-foco);
}

.cupon__enviar {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--campo-alto);
	height: var(--campo-alto);
	color: var(--tinta);
	background: var(--blanco);
	border: var(--campo-borde);
	border-radius: var(--campo-radio);
	cursor: pointer;
	transition: background var(--rapido);
}

.cupon__enviar:hover { background: var(--rosa); }

.cupon__aviso { margin-top: 10px; }
.cupon__aviso[hidden] { display: none; }

/* -------------------------------------------------------------------------
 * Resumen de pago
 * ---------------------------------------------------------------------- */
.resumen {
	margin-top: 28px;
	padding: 26px;
	text-align: left;
	background: var(--crema);
	border: var(--borde);
	border-radius: 32px;
}

.resumen__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	font-size: 16px;
}

.resumen__fila .amount { white-space: nowrap; }

.resumen__fila--cupon .woocommerce-remove-coupon {
	margin-left: 8px;
	font-size: 14px;
}

/* El total, en su pastilla blanca */
.resumen__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	padding: 12px 12px 12px 24px;
	font-weight: 800;
	background: var(--blanco);
	border: var(--borde);
	border-radius: var(--pastilla);
}

.resumen__cifra {
	font-family: var(--fuente-titulo);
	font-size: 32px;
	line-height: 1;
	white-space: nowrap;
}

.resumen__cifra strong { font-weight: 800; }

.resumen__aclara {
	margin-top: 10px;
	font-size: 14px;
	text-align: center;
}

/* Botón de salida del carrito, a lo ancho */
.carrito__seguir {
	width: 100%;
	margin-top: 28px;
}

/* -------------------------------------------------------------------------
 * Campos de formulario (checkout, acceso, Mi cuenta)
 * ---------------------------------------------------------------------- */
/* Rejilla de 6 columnas: medias filas = 3, fila entera = 6 */
.compra .woocommerce-billing-fields__field-wrapper,
.compra .woocommerce-address-fields__field-wrapper,
.compra .woocommerce-EditAccountForm,
.compra .woocommerce-EditAccountForm fieldset,
.checkout .acceso__form {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: start; /* que la nota de un campo no estire al vecino */
	gap: 16px;
}

.compra .form-row {
	grid-column: span 6;
	min-width: 0; /* sin esto una opción larga ensancha la celda */
	margin: 0;
	text-align: left;
}

.compra .graphica-col-2,
.compra .form-row-first,
.compra .form-row-last { grid-column: span 3; }

.compra .woocommerce-EditAccountForm > p:not(.form-row),
.compra .woocommerce-EditAccountForm fieldset,
.checkout .acceso__form > p:not(.form-row) { grid-column: span 6; }

.compra .clear { display: none; }

.compra .woocommerce-billing-fields h3,
.compra .woocommerce-additional-fields h3 { display: none; }

.compra .form-row > label,
.compra .woocommerce-form-row > label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.compra .form-row .required {
	color: var(--rosa);
	text-decoration: none;
}

.compra .form-row .optional { font-weight: 500; }

.compra .woocommerce-input-wrapper,
.compra .password-input { display: block; position: relative; }

.compra .form-row input[type="text"],
.compra .form-row input[type="email"],
.compra .form-row input[type="tel"],
.compra .form-row input[type="password"],
.compra .form-row input[type="number"],
.compra .form-row select,
.compra .form-row textarea {
	width: 100%;
	height: var(--campo-alto);
	padding: 0 16px;
	font: 16px var(--fuente-texto);
	color: var(--tinta);
	background: var(--blanco);
	border: var(--campo-borde);
	border-radius: var(--campo-radio);
	outline: 0;
	appearance: none;
	transition: border-color var(--rapido), box-shadow var(--rapido);
}

/* Al enfocar se tiñe el propio borde (sin outline encima) */
.compra .form-row input:focus,
.compra .form-row select:focus,
.compra .form-row textarea:focus {
	border-color: var(--turquesa);
	box-shadow: var(--campo-foco);
}

.compra .form-row.woocommerce-invalid input,
.compra .form-row.woocommerce-invalid select { border-color: var(--c-error); }

/* Mensaje de error bajo el campo (lo agrega WooCommerce al validar) */
.compra .checkout-inline-error-message {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-error);
}

.compra .form-row textarea {
	height: auto;
	min-height: 120px;
	padding: 14px 16px;
	resize: vertical;
}

.compra .form-row select {
	padding-right: 44px;
	background: var(--blanco) var(--flecha-select) no-repeat right 16px center / 16px;
	cursor: pointer;
}

/* Botón de ver contraseña que agrega WooCommerce */
.compra .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: var(--ojo) no-repeat center / 20px;
	border: 0;
	transform: translateY(-50%);
	cursor: pointer;
}

.compra .show-password-input.display-password { opacity: .5; }

/* Descripciones y nota de ayuda bajo un campo */
.compra .form-row .description,
.compra .form-row em {
	display: block;
	margin-top: 6px;
	font-size: 14px;
}

/* País con buscador (select2): mismo aspecto que un campo */
.compra .select2-container--default .select2-selection--single {
	height: var(--campo-alto);
	background: var(--blanco);
	border: var(--campo-borde);
	border-radius: var(--campo-radio);
	outline: 0;
}

.compra .select2-container--default.select2-container--focus .select2-selection--single,
.compra .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--turquesa);
	box-shadow: var(--campo-foco);
}

.compra .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 44px 0 16px;
	font-size: 16px;
	line-height: calc(var(--campo-alto) - 2px);
	color: var(--tinta);
}

.compra .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 14px;
	width: 24px;
	height: 100%;
	background: var(--flecha-select) no-repeat center / 16px;
}

.compra .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }

/* El desplegable de select2 se cuelga del <body>, no de .compra */
.select2-dropdown {
	overflow: hidden;
	font-family: var(--fuente-texto);
	color: var(--tinta);
	border: var(--campo-borde);
	border-radius: var(--campo-radio);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	height: 44px;
	padding: 0 14px;
	font: 16px var(--fuente-texto);
	border: var(--campo-borde);
	border-radius: var(--campo-radio);
	outline: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	color: var(--tinta);
	background: var(--crema);
}

/* Casillas propias: "recordarme".
   Van dentro de un .form-row: hace falta el selector largo para ganarle al
   display:block de ".compra .form-row > label" (si no, la marca se ve como una raya). */
.casilla,
.compra .form-row > .casilla {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}

.casilla__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.casilla__marca {
	flex: none;
	width: 24px;
	height: 24px;
	background: var(--blanco) no-repeat center / 16px;
	border: var(--borde);
	border-radius: 8px;
	transition: background-color var(--rapido);
}

.casilla__input:checked + .casilla__marca {
	background-color: var(--rosa);
	background-image: var(--tic);
}

.casilla__input:focus-visible + .casilla__marca {
	outline: var(--grosor) solid var(--turquesa);
	outline-offset: 2px;
}

.casilla__texto {
	font-size: 16px;
	line-height: 1.45;
}

/* Casillas nativas que pinta WooCommerce (crear cuenta, etc.) */
.compra input[type="checkbox"]:not(.casilla__input) {
	flex: none; /* que no se achique con textos de dos líneas */
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--rosa);
}

.compra .woocommerce-form__label-for-checkbox {
	display: flex !important; /* anula el display:block de .form-row > label */
	align-items: center;
	gap: 10px;
	font-weight: 600;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Checkout
 * ---------------------------------------------------------------------- */
.checkout { max-width: 760px; }

/* Barras desplegables: "¿Ya tienes cuenta?" y "¿Tienes un cupón?" */
.desplegable { margin-top: 16px; }

.desplegable__barra {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px;
	font-weight: 700;
	color: var(--blanco);
	text-decoration: none;
	background: var(--turquesa);
	border-radius: var(--pastilla);
	transition: background var(--rapido);
}

.desplegable__barra:hover {
	color: var(--blanco);
	background: var(--tinta);
}

.desplegable__flecha {
	flex: none;
	width: 22px;
	height: 22px;
	transition: transform var(--suave);
}

.desplegable__barra[aria-expanded="true"] .desplegable__flecha { transform: rotate(180deg); }

/* Lo que se despliega: el acceso y el cupón */
.checkout .woocommerce-form-login {
	margin-top: 12px;
	padding: 24px;
	background: var(--crema);
	border: var(--borde);
	border-radius: 32px;
}

.acceso__enviar { margin-top: 4px; }

.acceso__olvido { font-size: 16px; }


.compra .woocommerce-account-fields { margin-top: 16px; }

/* Métodos de pago (lista nativa; el aspecto del checkout va en checkout.css) */
.woocommerce-checkout-payment { background: none; }

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions {
	padding-top: 16px;
	font-size: 14px;
	line-height: 1.5;
	border-top: var(--borde-punteado);
}

/* Texto de los términos que WooCommerce despliega al pulsar el enlace */
.woocommerce-terms-and-conditions {
	padding: 20px;
	background: var(--crema);
}

.woocommerce-terms-and-conditions h2 {
	margin-block: 20px 8px;
	font-size: 18px;
}

/* -------------------------------------------------------------------------
 * Pedido recibido
 * ---------------------------------------------------------------------- */
.compra__detalle > * { margin-top: 20px; }

/* Detalle del pedido y datos de facturación: en caja blanca */
.compra .woocommerce-order-details,
.compra .woocommerce-customer-details {
	padding: 12px 20px;
	text-align: left;
	background: var(--blanco);
	border: var(--borde);
	border-radius: 32px;
}

.compra .woocommerce-order-details__title,
.compra .woocommerce-customer-details h2 { font-size: 17px; }

.cuenta .woocommerce-order-details__title,
.cuenta .woocommerce-customer-details h2 { margin-bottom: 14px; }

.compra address {
	font-style: normal;
	line-height: 1.6;
}

.compra .woocommerce-customer-details--phone,
.compra .woocommerce-customer-details--email { margin: 4px 0 0; }

/* Plegables (los arma compra.js en la pantalla de gracias) */
.plegable__boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

.plegable__flecha {
	flex: none;
	width: 30px;
	height: 30px;
	padding: 5px;
	background: var(--blanco);
	border: var(--borde);
	border-radius: 50%;
	transition: transform var(--suave);
}

.plegable.is-abierto .plegable__flecha { transform: rotate(180deg); }

.plegable__cuerpo { margin-top: 12px; padding-bottom: 8px; }
.plegable__cuerpo[hidden] { display: none; }

/* Grupo de WhatsApp (pedido Completado): texto a la izquierda, botón a todo el ancho */
.grupo-wsp {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 20px;
	text-align: left;
}

.grupo-wsp__boton { width: 100%; }

/* -------------------------------------------------------------------------
 * Pago con Yape (pantalla de gracias). La pieza en sí está en yape.css.
 * ---------------------------------------------------------------------- */
.compra .pago-yape {
	margin-top: 28px;
	padding-top: 28px;
	border-top: var(--borde-punteado);
}

/* -------------------------------------------------------------------------
 * Tablas de WooCommerce (detalle del pedido, mis compras, descargas)
 * ---------------------------------------------------------------------- */
.compra table.shop_table {
	width: 100%;
	font-size: 16px;
	text-align: left;
	border-collapse: collapse;
}

.compra table.shop_table th,
.compra table.shop_table td {
	padding: 14px 10px;
	vertical-align: middle;
	border-bottom: 1px solid var(--linea-suave);
}

.compra table.shop_table thead th {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: var(--borde);
}

.compra table.shop_table tfoot th { font-weight: 700; }

.compra table.shop_table tfoot tr:last-child th,
.compra table.shop_table tfoot tr:last-child td {
	font-weight: 800;
	border-bottom: 0;
}

.compra table.shop_table .button {
	--btn-pad: 8px 16px;
	--btn-txt: 14px;
	margin: 2px;
}

.compra .wc-item-meta {
	margin: 4px 0 0;
	padding: 0;
	font-size: 14px;
	list-style: none;
}

.compra .wc-item-meta p { display: inline; }

/* -------------------------------------------------------------------------
 * Acceso y registro (Mi cuenta sin sesión)
 * ---------------------------------------------------------------------- */
.acceso {
	display: grid;
	gap: 28px;
	max-width: 520px;
	margin: 40px auto 0;
}

.acceso--doble { max-width: 960px; }

/* "o también puedes" entre acceso y registro, cuando van una sobre otra */
.acceso__divisor {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.acceso__divisor::before,
.acceso__divisor::after {
	content: "";
	flex: 1;
	border-top: var(--borde-punteado);
}

/* Computadora: las dos tarjetas lado a lado, sin divisor */
@media (min-width: 840px) {
	.acceso--doble { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.acceso__divisor { display: none; }
}

.acceso__tarjeta,
.cuenta__panel--acceso .woocommerce-ResetPassword {
	padding: 40px;
	background: var(--blanco);
	border: var(--borde-grueso);
	border-radius: var(--forma-c);
	box-shadow: var(--sombra-tarjeta);
}

.acceso__tarjeta + .acceso__tarjeta { border-radius: var(--forma-d); }

.acceso__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 22px;
}

.checkout .acceso__form { margin-top: 0; }

.acceso__enviar .btn-primario { width: 100%; }

.acceso__nota { font-size: 16px; }

/* Recuperar / restablecer contraseña */
.cuenta__panel--acceso .woocommerce-ResetPassword {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 560px;
	margin: 40px auto 0;
	text-align: left;
}

/* -------------------------------------------------------------------------
 * Mi cuenta
 * ---------------------------------------------------------------------- */
.cuenta__panel:not(.cuenta__panel--acceso) > .woocommerce {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	margin-top: 40px;
}

.cuenta__panel > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* Menú de pestañas */
.menu-cuenta {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 110px);
	padding: 14px;
	background: var(--blanco);
	border: var(--borde-grueso);
	border-radius: 36px;
}

.menu-cuenta__lista {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-cuenta__enlace {
	display: block;
	padding: 12px 20px;
	text-decoration: none;
	border: var(--grosor) solid transparent;
	border-radius: var(--pastilla);
	transition: background var(--rapido);
}

.menu-cuenta__enlace:hover {
	color: var(--tinta);
	background: var(--crema);
}

.menu-cuenta__item.is-active .menu-cuenta__enlace {
	background: var(--rosa);
	border-color: var(--tinta);
}

/* Cerrar sesión, separado del resto */
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: var(--borde-punteado);
}

/* Contenido de cada pestaña: sin cápsula, directo sobre el fondo */
.woocommerce-MyAccount-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.woocommerce-MyAccount-content > * { margin-block: 0; }

.woocommerce-MyAccount-content mark {
	padding: 0 6px;
	font-weight: 700;
	background: var(--crema);
	border-radius: 6px;
}

/* Datos de facturación: tarjeta de dirección */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.woocommerce-Address {
	padding: 24px;
	background: var(--crema);
	border: var(--borde);
	border-radius: 32px;
}

.woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.woocommerce-Address-title h2 { font-size: 19px; }

/* Formularios de Mi cuenta */
.compra .woocommerce-EditAccountForm fieldset {
	margin: 8px 0 0;
	padding: 24px 0 0;
	border: 0;
	border-top: var(--borde-punteado);
}

.compra legend {
	grid-column: 1 / -1;
	padding: 0;
	font-size: 24px;
}

.woocommerce-address-fields > p:last-child,
.woocommerce-EditAccountForm > p:last-of-type { margin-top: 8px; }

/* Mis compras: la paginación */
.woocommerce-pagination {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.cuenta__panel:not(.cuenta__panel--acceso) > .woocommerce { grid-template-columns: 1fr; }

	/* El menú pasa a una fila de pastillas que se desliza */
	.menu-cuenta {
		position: static;
		padding: 10px;
		border-radius: var(--pastilla);
	}

	.menu-cuenta__lista {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.menu-cuenta__enlace { white-space: nowrap; }

	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0 0 0 8px;
		padding: 0 0 0 8px;
		border-top: 0;
		border-left: var(--borde-punteado);
	}
}

@media (max-width: 767px) {
	.compra__wrapper { padding-block: 40px 80px; }

	.carrito,
	.acceso__tarjeta,
	.cuenta__panel--acceso .woocommerce-ResetPassword {
		padding: 28px 20px;
		border-radius: 36px;
	}

	.carrito__titulo,
	.resumen__titulo,
	.acceso__titulo,
	.cuenta__saludo { font-size: 23px; }

	/* La línea pasa a dos filas: foto y datos arriba, acciones debajo */
	.linea {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 14px;
	}

	.linea__media,
	.linea__foto {
		width: 64px;
		height: 64px;
	}

	.linea__acciones {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 12px 0 0;
		border-left: 0;
		border-top: var(--borde-punteado);
	}

	.linea__quitar { order: 3; }

	.resumen { padding: 20px; }
	.resumen__cifra { font-size: 26px; }

	.compra .graphica-col-2,
	.compra .form-row-first,
	.compra .form-row-last { grid-column: span 6; }

	/* Tablas: cada fila como tarjeta apilada */
	.compra table.shop_table_responsive thead { display: none; }

	.compra table.shop_table_responsive tr {
		display: block;
		padding: 10px 0;
		border-bottom: 1px solid var(--linea-suave);
	}

	.compra table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 6px 0;
		border: 0;
	}

	.compra table.shop_table_responsive td::before {
		content: attr(data-title);
		font-weight: 700;
	}
}