/**
 * Theme Name:	Theme — Shop styles (WooCommerce)
 * Description:	Estilos especificos de WooCommerce. Se cargan SOLO en paginas de
 *				WooCommerce (shop, single-product, cart, checkout, my-account)
 *				via wp_enqueue_style condicional en
 *				assets/plugins/woocommerce-settings.php.
 *
 * @package WP Pro Theme
 */


/* ######################################################################  WOOCOMMERCE  ###################################################################### */

main:has(.woocommerce) {background-color: var(--surface-light-color-2);}
wc-order-attribution-inputs {display: none;}


/* ············································ NOTICES Y GENERAL SHOP ············································ */


/* notices-wrapper: bloque estandar de noticias woocommerce. */
/* NoticeGroup: bloque AJAX que el JS de WC inyecta dentro de <form class="checkout">. */
.woocommerce-notices-wrapper,
.woocommerce-NoticeGroup,
.woocommerce-NoticeGroup > [role="alert"] {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.woocommerce-notices-wrapper:empty,
.woocommerce-notices-wrapper:not(:has(.woocommerce-error, .woocommerce-message, .woocommerce-info)),
.woocommerce-NoticeGroup:empty,
.woocommerce-NoticeGroup:not(:has(.woocommerce-error, .woocommerce-message, .woocommerce-info)) {
	display: none;
}

/* Clases estándar de WooCommerce. */
/* Añadir display:none a los mensajes que no se quieran mostrar */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	padding: 12px 16px;
	border-radius: var(--form-field-border-radius);
	background-color: var(--notice-surface);
	border: 1px solid var(--notice-border);
	list-style: none;
	margin: 0;
}
.woocommerce-error {
	--notice-surface: #FEF2F2;
	--notice-border: #FECACA;
	--notice-accent: #B91C1C;
	--notice-strong: #7F1D1D;
}
.woocommerce-message {
	--notice-surface: #ECFDF5;
	--notice-border: #A7F3D0;
	--notice-accent: #047857;
	--notice-strong: #064E3B;
}
.woocommerce-info {
	--notice-surface: #EFF6FF;
	--notice-border: #BFDBFE;
	--notice-accent: #1D4ED8;
	--notice-strong: #1E3A8A;
}
.woocommerce-error > li,
.woocommerce-error > p,
.woocommerce-message > p,
.woocommerce-info > p {
	color: var(--notice-accent);
}
.woocommerce-error strong,
.woocommerce-message strong,
.woocommerce-info strong {
	color: var(--notice-strong);
}
.woocommerce-error > li + li {
	margin-top: 6px;
}
/* WC añade tabindex="-1" + .focus() al notice tras inyectarlo (lectores de pantalla
   anuncian el mensaje). El outline del navegador aparece como borde negro y, segun
   la heuristica del browser, a veces :focus-visible matchea tambien para focos
   programaticos. Quitamos el outline de raiz en todos los elementos que WC
   focusea en este flujo: el wrapper, los NoticeGroup, los notices estandar y
   cualquier elemento con role="alert" dentro del wrapper. */
.woocommerce-notices-wrapper:focus,
.woocommerce-notices-wrapper [role="alert"]:focus,
.woocommerce-NoticeGroup:focus,
.woocommerce-NoticeGroup [role="alert"]:focus,
.woocommerce-error:focus,
.woocommerce-message:focus,
.woocommerce-info:focus {
	outline: none;
}


/* ──────── BlockUI: feedback de loading durante AJAX de WooCommerce ────────
   WC usa el plugin jQuery.blockUI ($.block()) para overlay sobre form.checkout,
   form.checkout_coupon, form.woocommerce-cart-form, .woocommerce-checkout-review-order,
   .finish-shipping-methods, .woocommerce-checkout-payment, etc. durante cada AJAX
   (update_order_review, apply_coupon, place_order…). WC pasa `message: null`, asi
   que sin CSS propio el overlay queda transparente y no hay feedback visual.
   Estilo: overlay frosted (blur + tinte) y spinner SVG-friendly centrado en brand. */
.blockUI.blockOverlay {
	position: absolute !important;
	inset: 0;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.55) !important;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-radius: inherit;
	cursor: wait;
	opacity: 1 !important;
	transition: opacity var(--transition-resize, 0.2s) ease;
}
.blockUI.blockOverlay::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 5px solid #D9D9D9;
	border-top-color: transparent;
	border-radius: 50%;
	animation: wpro-block-spin 0.7s linear infinite;
}
@keyframes wpro-block-spin {
	to { transform: rotate(360deg); }
}
/* Mensaje de blockUI: aunque WC pasa message:null, algun plugin podria activarlo.
   Lo neutralizamos para que no muestre el spinner GIF nativo encima del nuestro. */
.blockUI.blockMsg {display: none !important;}


/* Badge de estado del producto compartido entre finish y cart (ej: backorder) */
.shop-status {display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-note-size); color: var(--font-note-color-surface-light); width: fit-content;}
.shop-status::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor;}
.shop-status-backorder {color: #D08700;}


/* ············································ FINISH ············································ */

/* El h4 "Additional information" del panel hace de cabecera del textarea
   order_comments — ocultamos su <label> propio para no duplicar. */
.finish-form label[for="order_comments"] {display: none !important;}


.screen-reader-text {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}

/* ········ finish-login (global/form-login.php) — form login en modal ········ */
/* WC default: form-login.php imprime un toggle .woocommerce-form-login-toggle
   (notice "¿Ya eres cliente? Haz click aquí para acceder") siempre visible + el
   form .woocommerce-form-login.login oculto con style="display:none". El click
   sobre .showlogin alterna $('form.login').slideToggle() inline.
   En la maqueta el toggle queda como notice ("¿Eres ya cliente? Inicia sesión.")
   y el form vive dentro de .finish-login-modal — el click sobre .showlogin abre
   el modal (overlay + dialog centrado). */
/* Toggle estilizado como un notice (padding/borde/radius) pero con paleta
   ambar propia, sin usar las clases .woocommerce-error/.message/.info. */
.finish-login-toggle {
	width: 100%;
	padding: 12px 16px;
	border-radius: var(--form-field-border-radius);
	background-color: #FFFBEB;
	border: 1px solid #FDE68A;
}
.finish-login-toggle > p {color: #B45309; margin: 0;}
.finish-login-toggle #showlogin {color: #78350F; font-family: var(--font-p-bold-family);}

.finish-login-modal {position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto;}
.finish-login-modal[hidden] {display: none;}
.finish-login-modal__backdrop {position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); cursor: pointer;}
.finish-login-modal__inner {position: relative; width: 100%; max-width: 500px; margin: auto;}
.finish-login-modal__inner .finish-login {position: relative; background-color: var(--surface-light-color-1); box-shadow: inset 0px 0px 0px 1px var(--form-border-color-surface-light), 0px 0px 20px 0px rgba(0,0,0,0.25);}
.finish-login__header {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.finish-login-modal__close {flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background-color: transparent; border: 0; border-radius: 50%; cursor: pointer; padding: 0; transition: background-color var(--transition-interactive) ease;}
.finish-login-modal__close:hover {background-color: var(--surface-light-color-2);}
.finish-login-modal__close svg {width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round;}

.finish-login__row {display: flex; flex-direction: column; gap: 10px; align-items: flex-start; justify-content: space-between;}
.finish-login__lost {color: var(--font-note-color-surface-light); font-size: var(--font-note-size);}
.finish-login__submit button {width: 100%; min-width: unset;}

@media (min-width: 600px) {
	.finish-login__row {flex-direction: row; align-items: center;}
}

/* Anchor del form-coupon (vive fuera del <form name="checkout">). No tiene contenido
   visible; el UI (input + botón) está en review-order asociado vía form="…". */
.finish-coupon-form {display: none;}

/* ········ finish-form layout ········ */
/* .finish-order-review-container va ahora fusionada con #order_review .panel .spacing-flow
   en un unico div — el espaciado vertical de sus hijos lo gestiona .spacing-flow, no flex+gap. */
.finish-form {width: 100%; display: flex; flex-direction: column-reverse; gap: 30px;}
.finish-form-data-container {width: 100%; display: flex; flex-direction: column; gap: 30px;}
.finish-order-review-container {width: 100%;}
/* col2-set agrupa los paneles de billing/shipping/notes/envío/pago dentro del data-container.
   En WC default es un wrapper 2-col; aquí lo usamos como stack vertical con gap entre paneles. */
.col2-set {display: flex; flex-direction: column; gap: 30px;}

/* Cabecera con checkbox del panel de envío (form-shipping.php) */
.finish-shipping-fields > h4.container-checkbox {gap: 12px;}
.finish-shipping-fields > h4.container-checkbox > span {font: inherit; color: inherit;}

/* ········ review-order: lista de productos ········ */
.finish-products {list-style: none; display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; padding-right: 6px; border-top: 1px solid var(--form-border-color-surface-light); border-bottom: 1px solid var(--form-border-color-surface-light); scrollbar-width: thin; scrollbar-color: var(--form-border-color-surface-light) transparent;}
.finish-products::-webkit-scrollbar {width: 6px;}
.finish-products::-webkit-scrollbar-track {background: transparent;}
.finish-products::-webkit-scrollbar-thumb {background: var(--form-border-color-surface-light); border-radius: 3px;}
.finish-products::-webkit-scrollbar-thumb:hover {background: var(--font-note-color-surface-light);}
.finish-products > li {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--form-border-color-surface-light);
	align-items: center;
}
.finish-products > li:last-child {border-bottom: unset;}

.finish-product__media {width: 56px; height: 56px; display: block; overflow: hidden; border-radius: var(--form-field-border-radius); background-color: var(--surface-light-color-2);}
.finish-product__media img {width: 100%; height: 100%; display: block; object-fit: cover;}
.finish-product__info {min-width: 0; display: flex; flex-direction: column; gap: 3px;}
.finish-product__title {font-family: var(--font-p-bold-family); color: var(--font-h4-color-surface-light); line-height: 1.25; word-break: break-word;}
.finish-product__title .finish-product__quantity {color: var(--font-note-color-surface-light); margin-left: 4px; font-family: var(--font-p-family);}
.finish-product__variant {font-size: var(--font-note-size); color: var(--font-note-color-surface-light);}
.finish-product__total {white-space: nowrap; font-family: var(--font-p-bold-family); align-self: center; text-align: right;}
.finish-product__total del {color: var(--font-note-color-surface-light); text-decoration: line-through; display: block; font-family: var(--font-p-family); font-size: var(--font-note-size);}
.finish-product__total ins {text-decoration: none; color: var(--brand-color);}

/* ········ review-order: totales — margin-top lo gestiona .spacing-flow ········ */
.finish-totals {width: 100%; display: flex; flex-direction: column;}
.finish-totals > div {display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px solid var(--form-border-color-surface-light);}
.finish-totals > div:last-child {border-bottom: unset;}
.finish-totals > div > p:last-child {white-space: nowrap; text-align: right;}
.finish-totals .finish-discount p:last-child {display: flex; align-items: center; gap: 8px;}
.finish-totals .finish-discount span {color: var(--brand-color); font-family: var(--font-p-bold-family);}
.finish-totals .finish-discount a {font-size: var(--font-note-size); color: var(--font-note-color-surface-light);}
.finish-totals .finish-order-total {padding-top: 18px; padding-bottom: 0;}
.finish-totals .finish-order-total p strong {font-family: var(--font-h4-family); font-size: var(--font-h4-size); color: var(--font-h4-color-surface-light);}
.finish-totals .finish-order-total p:last-child strong {color: var(--brand-color);}

/* Cupón siempre visible, primer item del resumen */
.finish-coupon {display: flex; flex-direction: column;}
.finish-coupon-row {display: flex; flex-direction: column; gap: 10px;}
.finish-coupon-row > * {width: 100%; min-width: unset;}

/* ········ Panel de métodos de envío (cart-shipping.php) ········ */
.finish-shipping-methods-list {list-style: none; display: flex; flex-direction: column; gap: 10px;}
.finish-shipping-methods-list > li {
	padding: 12px 14px;
	background-color: var(--surface-light-color-2);
	border-radius: var(--form-field-border-radius);
	border: 1px solid var(--form-border-color-surface-light);
	transition: border-color var(--transition-interactive) ease, box-shadow var(--transition-interactive) ease;
}
.finish-shipping-methods-list > li:has(input[type="radio"]:checked) {
	border-color: var(--brand-color);
	box-shadow: 0 0 0 1px var(--brand-color);
}
.finish-shipping-methods-list .container-radio {width: 100%;}
.finish-shipping-methods-list label.radio {width: 100%; gap: 10px; cursor: pointer;}
.finish-shipping-methods-list label.radio p {color: var(--font-textbold-color-surface-light); flex: 1;}

.ppcp-messages {display: none !important;}

/* ········ Métodos de pago (payment.php + payment-method.php) ········ */
.finish-form-payment {width: 100%;}
.finish-payment-methods {list-style: none; display: flex; flex-direction: column; gap: 10px;}

/* Estado alternativo: sin métodos de pago disponibles. La <li> no es un método,
   solo contiene un .woocommerce-info, así que neutralizamos los estilos de tarjeta. */
.finish-payment-methods--empty > li {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	list-style: none;
}
.finish-payment-method {
	display: block;
	width: 100%;
	padding: 14px 16px;
	background-color: var(--surface-light-color-2);
	border-radius: var(--form-field-border-radius);
	border: 1px solid var(--form-border-color-surface-light);
	transition: border-color var(--transition-interactive) ease, box-shadow var(--transition-interactive) ease;
}
.finish-payment-method:has(> .finish-payment-method__head > input[type="radio"]:checked) {
	border-color: var(--brand-color);
	box-shadow: 0 0 0 1px var(--brand-color);
}

.finish-payment-method__head {display: flex; align-items: center; gap: 10px; cursor: pointer; width: 100%;}
.finish-payment-method__head input[type="radio"] {accent-color: var(--brand-color); width: 18px; height: 18px; cursor: pointer; flex-shrink: 0;}
.finish-payment-method__head span {font-family: var(--font-p-bold-family); color: var(--font-textbold-color-surface-light); display: flex; gap: 10px; align-items: center;}

.finish-payment-method__box {
	background-color: var(--surface-light-color-1);
	padding: 12px 14px;
	margin-top: 12px;
	border-radius: var(--form-field-border-radius);
	border: 1px solid var(--form-border-color-surface-light);
}
.finish-payment-method__box > p {color: var(--font-note-color-surface-light); font-size: var(--font-note-size);}

/* Errores del gateway dentro del .payment_box (Stripe, PayPal, Redsys…) */
.finish-payment-method__box > .woocommerce-error,
.finish-payment-method__box > .woocommerce-message,
.finish-payment-method__box > .woocommerce-info {
	margin-bottom: 12px;
	padding: 10px 12px;
}
.finish-payment-method__box > .woocommerce-error > li,
.finish-payment-method__box > .woocommerce-error > p,
.finish-payment-method__box > .woocommerce-message > p,
.finish-payment-method__box > .woocommerce-info > p {
	font-size: var(--font-note-size);
	line-height: 1.4;
}

/* terms — Los links "Terms and conditions" y "Privacy policy" los genera WC. */
.finish-terms a.woocommerce-terms-and-conditions-link:hover,
.finish-terms a.woocommerce-privacy-policy-link:hover {text-decoration: underline;}
.light-section .finish-terms a.woocommerce-terms-and-conditions-link,
.light-section .finish-terms a.woocommerce-privacy-policy-link {font-family: var(--font-p-bold-family); color: var(--font-textbold-color-surface-light);}
.dark-section .finish-terms a.woocommerce-terms-and-conditions-link,
.dark-section .finish-terms a.woocommerce-privacy-policy-link {font-family: var(--font-p-bold-family); color: var(--font-textbold-color-surface-dark);}

/* place order */
.finish-form-payment .place-order button {width: 100%; min-width: unset;}

@media (min-width: 600px) {
	.finish-coupon-row {flex-direction: row;}
}

@media (min-width: 950px) {
	/* Grid 2 columnas: data-container (con NoticeGroups dentro) a la izquierda, payment-container sticky a la derecha. */
	.finish-form {display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; align-items: start;}
	.finish-order-review-container {position: sticky; top: calc(var(--container-padding) + var(--menu-height));}
	.finish-products {max-height: 380px;}
}


/* ············································ Cart ············································ */
/* Todas las clases de esta sección llevan prefijo .cart- para evitar colisión con .finish-* */

.cart-container, .cart-products {width: 100%; display: flex; flex-direction: column; gap: 30px;}

.cart-product-container {display: flex; flex-direction: column;}

.cart-item {display: grid; grid-template-columns: auto 1fr auto; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--form-border-color-surface-light);}
.cart-item:first-of-type {padding-top: 0;}
.cart-item:last-of-type {padding-bottom: 0; border-bottom: unset;}
.cart-product-container:has(.cart-coupon-update .cart-coupon:not(.hidden)) .cart-item:last-of-type, .cart-product-container:has(.cart-coupon-update .cart-update:not(.hidden)) .cart-item:last-of-type {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--form-border-color-surface-light);
}

.cart-item__media {width: 80px; height: 80px; display: block; overflow: hidden; border-radius: var(--form-field-border-radius);}
.cart-item__media img {width: 100%; height: 100%; display: block; object-fit: cover;}
.cart-item__info {min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px;}
.cart-item__title {font-family: var(--font-h4-family); font-size: var(--font-h4-size); color: var(--font-h4-color-surface-light); line-height: 1.25;}
.cart-item__variant {font-size: var(--font-note-size); color: var(--font-note-color-surface-light);}
.cart-item__unit {font-size: var(--font-note-size); color: var(--font-text-color-surface-light);}
.cart-item del {color: var(--font-note-color-surface-light); text-decoration: line-through; margin-right: 6px;}
.cart-item ins {text-decoration: none; color: var(--brand-color); font-weight: 500;}
.cart-item__info .number {max-width: fit-content;}
.cart-item__aside {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 12px;}
.cart-item__remove {background: none; border: 0; padding: 8px; border-radius: 50%; background-color: var(--surface-light-color-2); color: var(--font-note-color-surface-light); line-height: 0; cursor: pointer; transition: color var(--transition-interactive) ease;}
.cart-item__remove svg {stroke: currentColor; display: block;}
.cart-item__remove:hover {color: var(--form-border-color-focus);}
.cart-item__price {white-space: nowrap; font-weight: 500; height: var(--form-field-height-sm); align-items: center; display: flex;}

@media (min-width: 600px) {
	.cart-item {gap: 24px; padding: 28px 0;}
	.cart-item__media {width: 100px; height: 100px;}
}


.cart-coupon-update {display: flex; flex-direction: column; gap: 20px;}
.cart-coupon-update > div:first-child {padding-top: 20px;}
@media (min-width: 600px) {
	.cart-coupon-update > div:first-child {padding-top: 30px;}
}
.cart-coupon {display: flex; flex-direction: column; justify-content: space-between; gap: 15px;}
.cart-coupon > *, .cart-update > * {width: 100%;}
@media (min-width: 600px) {
	.cart-coupon {flex-direction: row;}
}


.cart-cross-container > div {display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 15px;}
.cart-cross-product {display: flex; flex-direction: column; gap: 15px; padding: 15px;}
.cart-cross-product > a > div {width: 100%; aspect-ratio: 1 / 1;}
.cart-cross-product > a > div img {width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--form-field-border-radius);}
.cart-cross-product p {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cart-cross-product a, .cart-cross-product button {width: 100%;}


/* Cart totals review */
.cart-totals-container {width: 100%; display: flex; flex-direction: column;}
.cart-totals-container > div {display: flex; justify-content: space-between; padding: 15px 0px; border-bottom: 1px solid var(--form-border-color-surface-light);}
.cart-totals-container > div:last-child {border-bottom: unset;}
.cart-totals-container > div > p > a:hover {color: var(--form-border-color-focus); text-decoration: underline;}

/* Cart proceed to checkout */
.cart-proceed-to-checkout {display: flex; flex-direction: column; gap: 15px;}

/* Cart shipping review */
.cart-shipping {flex-direction: column; gap: 7px;}
.cart-shipping > div {display: flex; justify-content: space-between; gap: 15px;}
.cart-shipping > div ul {min-width: fit-content; display: flex; flex-direction: column; gap: 10px;}
.cart-shipping > div ul > li {display: flex; justify-content: flex-end;}
.cart-shipping > form > div {margin-top: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm);}
.cart-shipping > form input, .cart-shipping > form select, .cart-shipping > form button {width: 100%;}
.cart-shipping > form span {display: none;}


@media (min-width: 950px) {
	.cart-container {flex-direction: row; align-items: flex-start;}
	.cart-products {flex: 1; width: unset;}
	.cart-totals {width: 380px; position: sticky; top: calc(var(--container-padding) + var(--menu-height));}
	.cart-coupon-update {flex-direction: row; justify-content: space-between;}
	.cart-coupon-update > div {padding-top: 30px;}
	.cart-coupon > *, .cart-update > * {width: unset;}
	.cart-cross-container > div {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}
}


/* ············································ Cart Empty ············································ */

.cart-empty {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	padding: 40px 20px;
}
.cart-empty__icon {
	position: relative;
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--surface-light-color-2);
	color: var(--font-h4-color-surface-light);
}
.cart-empty__icon svg {width: 48px; height: 48px; fill: currentColor;}
.cart-empty__badge {
	position: absolute;
	top: 6px;
	right: 6px;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background-color: var(--brand-color);
	color: #fff;
	font-size: var(--font-note-size);
	font-weight: 600;
	line-height: 1;
}
.cart-empty__text {max-width: 460px;}
.cart-empty__text .note {color: var(--font-note-color-surface-light);}
.cart-empty__actions {display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px;}
.cart-empty__actions .btn {width: 100%;}


@media (min-width: 600px) {
	.cart-empty {padding: 60px 30px; gap: 28px;}
	.cart-empty__icon {width: 130px; height: 130px;}
	.cart-empty__icon svg {width: 58px; height: 58px;}
	.cart-empty__actions {flex-direction: row; justify-content: center; max-width: unset; width: auto;}
	.cart-empty__actions .btn {width: auto;}
}




/* ############################################################### WOO · MY ACCOUNT ############################################################### */


/* ········································ LAYOUT (2 columnas) ········································ */

.account-layout {display: flex; flex-direction: column; gap: var(--space-md);}

@media (min-width: 950px) {
	.account-layout {display: grid; grid-template-columns: 240px 1fr; align-items: start; gap: var(--space-md);}
}
@media (min-width: 1450px) {
	.account-layout {grid-template-columns: 280px 1fr;}
}

.account-sidebar {position: relative;}
@media (min-width: 950px) {
	.account-sidebar {position: sticky; top: calc(var(--menu-height, 80px) + var(--space-md));}
}

.account-content {min-width: 0;}


/* ········································ NAV LATERAL ········································ */

.account-nav-list {display: flex; flex-direction: column; gap: 4px;}

.account-nav-link {
	display: block;
	padding: 12px 16px;
	border-radius: 8px;
	text-decoration: none;
	font-size: var(--font-text-size);
	border-left: 2px solid transparent;
	transition:
		background-color var(--transition-interactive) ease,
		color var(--transition-interactive) ease,
		border-color var(--transition-interactive) ease,
		padding-left var(--transition-interactive) ease;
}

.light-section .account-nav-link {color: var(--font-text-color-surface-light);}
.light-section .account-nav-link:hover {background-color: var(--surface-light-color-2); color: var(--font-textbold-color-surface-light);}
.light-section .account-nav-link.is-active {background-color: var(--surface-light-color-2); color: var(--font-h4-color-surface-light); font-family: var(--font-p-bold-family); border-left-color: var(--brand-color); padding-left: 16px;}

.dark-section .account-nav-link {color: var(--font-text-color-surface-dark);}
.dark-section .account-nav-link:hover {background-color: var(--surface-dark-color-1); color: var(--font-textbold-color-surface-dark);}
.dark-section .account-nav-link.is-active {background-color: var(--surface-dark-color-1); color: var(--font-h4-color-surface-dark); font-family: var(--font-p-bold-family); border-left-color: var(--brand-color);}


/* ········································ EYEBROWS & HEADERS ········································ */

.account-eyebrow {
	font-size: var(--font-note-size);
	font-family: var(--font-p-bold-family);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.6;
}
.account-eyebrow a {color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition-interactive) ease;}
.account-eyebrow a:hover {border-bottom-color: currentColor;}

.account-greeting-lead,
.account-view-lead {max-width: 60ch;}


/* ········································ DASHBOARD · SHORTCUTS ········································ */

.account-shortcuts {display: grid; grid-template-columns: 1fr; gap: var(--space-md);}
@media (min-width: 600px) {
	.account-shortcuts {grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 1450px) {
	.account-shortcuts {grid-template-columns: repeat(3, 1fr);}
}

.account-shortcut {display: flex; flex-direction: column; text-decoration: none; height: 100%;}
.account-shortcut > * {margin: 0;}
.account-shortcut > * + * {margin-top: var(--space-sm);}

.account-shortcut-eyebrow {font-family: var(--font-p-bold-family); font-size: var(--font-note-size); opacity: 0.4; letter-spacing: 0.05em;}
.account-shortcut-cta {margin-top: auto !important; padding-top: var(--space-sm); font-family: var(--font-p-bold-family); color: var(--brand-color);}


/* ········································ STATUS BADGES ········································ */

.status-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: var(--font-note-size);
	font-family: var(--font-p-bold-family);
	white-space: nowrap;
	letter-spacing: 0.02em;
}
.status-badge.is-completed {background-color: rgba(46, 160, 67, 0.14); color: rgb(30, 110, 50);}
.status-badge.is-processing {background-color: rgba(0, 122, 255, 0.14); color: rgb(0, 80, 180);}
.status-badge.is-on-hold   {background-color: rgba(255, 165, 0, 0.16); color: rgb(170, 95, 0);}
.status-badge.is-cancelled {background-color: rgba(120, 120, 120, 0.18); color: rgb(85, 85, 85);}


/* ········································ ORDERS · FILTERS (chips) ········································ */

.orders-filters {width: 100%; overflow-x: auto;}
.orders-filters-list {display: flex; gap: 8px; flex-wrap: nowrap;}

.orders-filter {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: var(--font-note-size);
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color var(--transition-interactive) ease, color var(--transition-interactive) ease, border-color var(--transition-interactive) ease;
}
.light-section .orders-filter {color: var(--font-text-color-surface-light); border-color: var(--form-border-color-surface-light);}
.light-section .orders-filter:hover {background-color: var(--surface-light-color-1);}
.light-section .orders-filter.is-active {background-color: var(--btn-primary-surface-color); color: var(--btn-primary-text-color); border-color: transparent;}
.orders-filter span {opacity: 0.6;}


/* ········································ TABLES (orders, downloads, payment-methods) ········································ */

.orders-table-wrapper,
.downloads-table-wrapper,
.payment-methods-table-wrapper {padding: 0; overflow: hidden;}

.orders-table,
.downloads-table,
.payment-methods-table {width: 100%; border-collapse: collapse; font-size: var(--font-text-size);}

.orders-table thead th,
.downloads-table thead th,
.payment-methods-table thead th {
	text-align: left;
	font-family: var(--font-p-bold-family);
	font-size: var(--font-note-size);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 16px 20px;
	background-color: rgba(0, 0, 0, 0.02);
}
.light-section .orders-table thead th,
.light-section .downloads-table thead th,
.light-section .payment-methods-table thead th {border-bottom: 1px solid var(--form-border-color-surface-light);}

.orders-table tbody tr,
.downloads-table tbody tr,
.payment-methods-table tbody tr {transition: background-color var(--transition-interactive) ease;}
.light-section .orders-table tbody tr,
.light-section .downloads-table tbody tr,
.light-section .payment-methods-table tbody tr {border-bottom: 1px solid var(--form-border-color-surface-light);}
.orders-table tbody tr:last-child,
.downloads-table tbody tr:last-child,
.payment-methods-table tbody tr:last-child {border-bottom: none !important;}

.orders-table tbody th,
.orders-table tbody td,
.downloads-table tbody th,
.downloads-table tbody td,
.payment-methods-table tbody th,
.payment-methods-table tbody td {
	padding: 18px 20px;
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
.orders-table tbody th a,
.downloads-table tbody th a {text-decoration: none; color: inherit; font-family: var(--font-p-bold-family);}

.orders-table-meta,
.downloads-table-meta {display: block; font-size: var(--font-note-size); opacity: 0.6; margin-top: 2px;}

.orders-table-actions,
.downloads-table-actions,
.payment-methods-actions {display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;}
.orders-table-actions-col,
.downloads-table-actions-col,
.payment-methods-actions-col {text-align: right; width: 1px; white-space: nowrap;}

/* Tablas en mobile: stack vertical */
@media (max-width: 699px) {
	.orders-table thead,
	.downloads-table thead,
	.payment-methods-table thead {display: none;}
	.orders-table tr,
	.downloads-table tr,
	.payment-methods-table tr {display: block; padding: 16px 20px;}
	.orders-table tbody th,
	.orders-table tbody td,
	.downloads-table tbody th,
	.downloads-table tbody td,
	.payment-methods-table tbody th,
	.payment-methods-table tbody td {display: block; padding: 4px 0;}
	.orders-table-actions,
	.downloads-table-actions,
	.payment-methods-actions {margin-top: 12px; justify-content: flex-start;}
}


/* ········································ PAGINATION ········································ */

.orders-pagination {display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap;}
.orders-pagination-info {font-size: var(--font-note-size); opacity: 0.7;}


/* ········································ VIEW ORDER · HEADER ········································ */

.order-summary {display: flex; flex-direction: column; gap: var(--space-md);}
@media (min-width: 700px) {
	.order-summary {flex-direction: row; justify-content: space-between; align-items: flex-end;}
}
.order-summary-actions {display: flex; gap: 8px; flex-wrap: wrap;}
.order-summary-meta {font-size: var(--font-text-size); opacity: 0.85;}


/* ········································ PANEL HEADER (común a varias vistas) ········································ */

.panel-header {display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap;}
.panel-header h3,
.panel-header h4 {margin: 0;}
.panel-header-meta {font-size: var(--font-note-size); opacity: 0.6;}
.panel-header-link {font-size: var(--font-note-size); font-family: var(--font-p-bold-family); text-decoration: none; color: var(--brand-color);}


/* ········································ ORDER · ITEMS ········································ */

.order-items-list {display: flex; flex-direction: column;}

.order-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	align-items: center;
}
.light-section .order-item {border-bottom: 1px solid var(--form-border-color-surface-light);}
.dark-section  .order-item {border-bottom: 1px solid var(--form-border-color-surface-dark);}
.order-item:last-child {border-bottom: none !important; padding-bottom: 0;}

.order-item-media {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	background-color: var(--surface-light-color-2);
	background-image: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.10));
}
.dark-section .order-item-media {background-color: var(--surface-dark-color-1); background-image: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10));}

.order-item-body > * {margin: 0;}
.order-item-body h4 {font-size: var(--font-text-size); font-family: var(--font-p-bold-family);}
.order-item-body h4 a {text-decoration: none; color: inherit;}
.order-item-meta,
.order-item-qty {font-size: var(--font-note-size); opacity: 0.65; margin-top: 2px;}

.order-item-price {font-family: var(--font-p-bold-family); white-space: nowrap; font-size: var(--font-text-size);}

.order-items-actions {margin-top: var(--space-md) !important; display: flex; justify-content: flex-end;}


/* ········································ ORDER · TOTALS + PAYMENT (aside grid) ········································ */

.order-aside-grid {display: grid; grid-template-columns: 1fr; gap: var(--space-md);}
@media (min-width: 700px) {
	.order-aside-grid {grid-template-columns: 1fr 1fr;}
}

.order-totals-list {display: flex; flex-direction: column; gap: 10px;}
.order-totals-list > div {display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); font-size: var(--font-text-size);}
.order-totals-list dt {opacity: 0.7;}
.order-totals-list dd {text-align: right;}

.order-totals-grand {padding-top: 12px; margin-top: 6px;}
.light-section .order-totals-grand {border-top: 1px solid var(--form-border-color-surface-light);}
.dark-section  .order-totals-grand {border-top: 1px solid var(--form-border-color-surface-dark);}
.order-totals-grand dt,
.order-totals-grand dd {font-family: var(--font-p-bold-family); font-size: var(--font-h4-size); opacity: 1;}

.order-payment-method {display: flex; align-items: center; gap: 10px;}
.order-payment-status {font-size: var(--font-note-size); opacity: 0.7;}

.payment-method-brand {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 6px;
	background-color: var(--surface-light-color-2);
	font-family: var(--font-p-bold-family);
	font-size: var(--font-note-size);
	letter-spacing: 0.04em;
}
.dark-section .payment-method-brand {background-color: var(--surface-dark-color-1);}
.payment-method-number {font-family: monospace; letter-spacing: 0.08em; font-size: var(--font-text-size);}


/* ········································ ADDRESSES GRID + CARD ········································ */

.address-grid {display: grid; grid-template-columns: 1fr; gap: var(--space-md);}
@media (min-width: 700px) {
	.address-grid {grid-template-columns: 1fr 1fr;}
}

.address-card-body {font-style: normal; line-height: 1.7; font-size: var(--font-text-size);}
.address-card-body a {text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition-interactive) ease;}
.address-card-body a:hover {border-bottom-color: currentColor;}
.address-card-actions {margin-top: var(--space-sm); display: flex; gap: 8px; flex-wrap: wrap;}


/* ········································ ORDER · NOTES (timeline) ········································ */

.order-notes-list {display: flex; flex-direction: column; gap: var(--space-md); padding-left: 4px;}

.order-note {position: relative; padding-left: 22px;}
.light-section .order-note {border-left: 2px solid var(--form-border-color-surface-light);}
.dark-section  .order-note {border-left: 2px solid var(--form-border-color-surface-dark);}
.order-note::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--brand-color);
}
.order-note-date {display: block; font-size: var(--font-note-size); opacity: 0.6; margin-bottom: 4px;}
.order-note p {margin: 0;}


/* ········································ FORMS (edit-address, edit-account) ········································ */

.form-fieldset {border: none; padding: 0; margin: 0;}
.form-fieldset legend {font-family: var(--font-h4-family); font-size: var(--font-h4-size); padding: 0; margin-bottom: var(--space-sm);}
.form-fieldset-hint {font-size: var(--font-note-size); opacity: 0.7; margin-top: 0 !important; margin-bottom: var(--space-sm) !important;}

.form-row-2cols {display: grid; grid-template-columns: 1fr; gap: var(--space-sm);}
@media (min-width: 700px) {
	.form-row-2cols {grid-template-columns: 1fr 1fr; gap: var(--space-md);}
}

.form-field {display: flex; flex-direction: column; gap: 6px;}
.form-field label {font-family: var(--font-p-bold-family); font-size: var(--font-note-size);}
.form-label-optional {font-family: var(--font-p-family); opacity: 0.55; font-weight: normal;}
.form-field-hint {font-size: var(--font-note-size); opacity: 0.65; margin-top: 0 !important;}

.form-actions {display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: var(--space-md);}


/* ········································ PAYMENT METHODS GRID ········································ */

.payment-methods-grid {display: grid; grid-template-columns: 1fr; gap: var(--space-md); padding: 0;}
@media (min-width: 700px) {
	.payment-methods-grid {grid-template-columns: 1fr 1fr;}
}

.payment-method-card {display: flex; flex-direction: column;}
.payment-method-header {display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);}

.payment-method-badge {font-size: var(--font-note-size); padding: 3px 10px; border-radius: 999px; font-family: var(--font-p-bold-family);}
.payment-method-badge.is-default {background-color: var(--brand-color); color: #fff;}

.payment-method-meta {display: flex; gap: var(--space-md); margin-top: 0;}
.payment-method-meta > div {display: flex; flex-direction: column; gap: 2px;}
.payment-method-meta dt {font-size: var(--font-note-size); opacity: 0.55;}
.payment-method-meta dd {font-family: var(--font-p-bold-family); font-size: var(--font-text-size);}

.payment-method-actions {margin-top: auto !important; padding-top: var(--space-sm); display: flex; gap: 8px; flex-wrap: wrap;}

.payment-method-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	min-height: 220px;
	box-shadow: inset 0 0 0 2px var(--form-border-color-surface-light) !important;
	background-color: transparent !important;
}
.dark-section .payment-method-add {box-shadow: inset 0 0 0 2px var(--form-border-color-surface-dark) !important;}

.payment-method-add-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background-color: var(--brand-color);
	color: #fff;
	font-family: var(--font-h1-family);
	font-size: 32px;
	line-height: 1;
}
.payment-method-add-title {font-family: var(--font-h4-family); font-size: var(--font-h4-size);}
.payment-method-add-hint {font-size: var(--font-note-size); opacity: 0.7; max-width: 28ch;}