/* ============================================================
   AŞK — Mi Cuenta / Login / Recuperar contraseña
   Restyle a la marca del área WooCommerce: mi-cuenta, login,
   registro, recuperar contraseña. NO hay template overrides;
   solo CSS encima de los selectores core de WooCommerce.

   Tokens: --ask-black #000 · --ask-white #fff ·
           --ask-off-white #F4F2EE · --ask-camel #B89968 ·
           --ask-gray #888581 · --ask-gray-line #E5E2DC
           Fuentes: --ask-font-sans / --ask-font-serif
   ============================================================ */

/* ============================================================
   0. RESET LOCAL & VARIABLES
   ============================================================ */
.woocommerce-account,
.woocommerce-page.woocommerce-account {
	background: var(--ask-off-white, #F4F2EE);
	font-family: var(--ask-font-sans, 'Neue Montreal', 'Helvetica Neue', system-ui, sans-serif);
	color: var(--ask-black, #000);
	-webkit-font-smoothing: antialiased;
}

/* Elimina el fondo blanco por defecto que Elementor/Hello puede poner */
.woocommerce-account .e-con,
.woocommerce-account .elementor-widget-container {
	background: transparent !important;
}

/* ============================================================
   1. LAYOUT GENERAL — columna sidebar + contenido
   ============================================================ */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
	font-family: var(--ask-font-sans, 'Neue Montreal', 'Helvetica Neue', system-ui, sans-serif);
}

/* Contenedor principal del área de mi cuenta */
.woocommerce-account .woocommerce {
	max-width: 1320px;
	margin: 0 auto;
	padding: 48px 40px 80px;
}

/* Layout de 2 columnas SOLO con sesión iniciada (panel: menú + contenido).
   Sin sesión (formulario de login/registro) NO debe usar el grid, o los
   campos se encogen a cuadritos. */
.logged-in.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 48px;
	align-items: start;
}

/* Colocación explícita: el wrapper de notificaciones (primer hijo de .woocommerce)
   ocupaba la 1ª celda y empujaba el menú a la col 2 y el contenido a otra fila.
   Forzamos: notificaciones a ancho completo, menú col 1, contenido col 2.
   width:100% + float:none anulan los width 30%/65% por defecto de WooCommerce. */
.logged-in.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; width: 100%; float: none; }
.logged-in.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; width: 100%; float: none; }

/* ============================================================
   2. SIDEBAR (navegación lateral)
   ============================================================ */
.woocommerce-MyAccount-navigation {
	position: sticky;
	top: 120px;
	background: var(--ask-white, #fff);
	border: 1px solid var(--ask-gray-line, #E5E2DC);
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	border-left: 2px solid transparent;
	transition: background 200ms ease, border-color 200ms ease;
}

.woocommerce-MyAccount-navigation ul li:hover {
	background: var(--ask-off-white, #F4F2EE);
}

.woocommerce-MyAccount-navigation ul li.is-active,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active {
	border-left-color: var(--ask-camel, #B89968);
	background: var(--ask-off-white, #F4F2EE);
}

.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 13px 24px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ask-black, #000);
	text-decoration: none;
	line-height: 1.4;
	transition: color 200ms ease;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
	font-weight: 700;
	color: var(--ask-black, #000);
}

.woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--ask-black, #000);
}

/* ============================================================
   3. CONTENIDO PRINCIPAL
   ============================================================ */
.woocommerce-MyAccount-content {
	background: transparent;
}

/* Encabezado de sección */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--ask-font-sans, 'Neue Montreal', 'Helvetica Neue', system-ui, sans-serif);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ask-gray-line, #E5E2DC);
}

.woocommerce-MyAccount-content p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ask-gray, #888581);
	margin-bottom: 16px;
}

.woocommerce-MyAccount-content p a {
	color: var(--ask-black, #000);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}

.woocommerce-MyAccount-content p a:hover {
	color: var(--ask-camel, #B89968);
}

/* Mensaje del dashboard (bienvenida) */
.woocommerce-account .woocommerce-Message,
.woocommerce-account .woocommerce-info {
	background: var(--ask-white, #fff);
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	border-top: 3px solid var(--ask-camel, #B89968);
	color: var(--ask-black, #000);
	padding: 20px 24px;
	font-size: 13px;
	margin-bottom: 24px;
}

.woocommerce-account .woocommerce-Message::before,
.woocommerce-account .woocommerce-info::before {
	/* El ícono es una webfont de WooCommerce que no carga → salía un cuadrito
	   roto. Lo ocultamos; el borde superior camel ya es el acento de marca. */
	content: none;
}

/* Errores */
.woocommerce-account .woocommerce-error {
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	border-top: 3px solid #D97742;
	background: var(--ask-white, #fff);
	padding: 20px 24px;
	list-style: none;
	margin-bottom: 24px;
	font-size: 13px;
}

/* ============================================================
   4. TABLA DE PEDIDOS
   ============================================================ */
.woocommerce-orders-table,
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ask-white, #fff);
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	font-size: 13px;
}

.woocommerce-orders-table thead th,
.woocommerce-account table.shop_table thead th {
	background: var(--ask-off-white, #F4F2EE);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ask-gray, #888581);
	padding: 14px 18px;
	border-bottom: 1px solid var(--ask-gray-line, #E5E2DC);
	text-align: left;
}

.woocommerce-orders-table tbody td,
.woocommerce-account table.shop_table tbody td {
	padding: 16px 18px;
	border-bottom: 1px solid var(--ask-gray-line, #E5E2DC);
	vertical-align: middle;
	color: var(--ask-black, #000);
}

.woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account table.shop_table tbody tr:last-child td {
	border-bottom: none;
}

.woocommerce-orders-table tbody tr:hover td,
.woocommerce-account table.shop_table tbody tr:hover td {
	background: var(--ask-off-white, #F4F2EE);
}

/* Número de pedido */
.woocommerce-orders-table__cell-order-number a,
.woocommerce-account table.shop_table .order-number a {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ask-black, #000);
	text-decoration: none;
}

.woocommerce-orders-table__cell-order-number a:hover,
.woocommerce-account table.shop_table .order-number a:hover {
	color: var(--ask-camel, #B89968);
}

/* Badge de estado del pedido */
.woocommerce-orders-table__cell-order-status mark,
.woocommerce-orders-table .order-status mark,
mark.order-status {
	background: transparent;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 5px 10px;
}

mark.order-status.status-completed,
.woocommerce-orders-table .order-status.status-completed mark {
	background: rgba(45, 168, 102, 0.12);
	color: #2DA866;
}

mark.order-status.status-processing,
.woocommerce-orders-table .order-status.status-processing mark {
	background: rgba(184, 153, 104, 0.15);
	color: var(--ask-camel, #B89968);
}

mark.order-status.status-on-hold,
.woocommerce-orders-table .order-status.status-on-hold mark {
	background: var(--ask-off-white, #F4F2EE);
	color: var(--ask-black, #000);
}

mark.order-status.status-cancelled,
mark.order-status.status-failed,
.woocommerce-orders-table .order-status.status-cancelled mark,
.woocommerce-orders-table .order-status.status-failed mark {
	background: rgba(217, 119, 66, 0.12);
	color: #D97742;
}

mark.order-status.status-pending,
.woocommerce-orders-table .order-status.status-pending mark {
	background: var(--ask-off-white, #F4F2EE);
	color: var(--ask-gray, #888581);
}

/* Acciones de la tabla */
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account table .button {
	background: transparent;
	color: var(--ask-black, #000);
	border: 1px solid var(--ask-black, #000);
	padding: 7px 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	transition: background 220ms ease, color 220ms ease;
}

.woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-account table .button:hover {
	background: var(--ask-black, #000);
	color: var(--ask-white, #fff);
}

/* ============================================================
   5. SECCIÓN DE DIRECCIONES
   ============================================================ */
.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}

.woocommerce-Address {
	background: var(--ask-white, #fff);
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	padding: 28px;
}

/* Las columnas de dirección traen width:47% + float por defecto de WooCommerce,
   que dentro del grid las dejaba en ~180px (cards diminutas y el título
   encimándose con el enlace "Editar"). Forzar a llenar la celda del grid. */
.woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-Addresses > .col-1,
.woocommerce-MyAccount-content .woocommerce-Addresses > .col-2 {
	width: 100%;
	float: none;
	margin: 0;
}
/* Colocación explícita en el grid: facturación (col-1) izquierda, envío
   (col-2) derecha, misma fila — si no, quedaban escalonadas en diagonal. */
.woocommerce-MyAccount-content .woocommerce-Addresses > .col-1 { grid-column: 1; grid-row: 1; }
.woocommerce-MyAccount-content .woocommerce-Addresses > .col-2 { grid-column: 2; grid-row: 1; }

.woocommerce-Address-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ask-gray-line, #E5E2DC);
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	border: none;
}

.woocommerce-Address-title a {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ask-gray, #888581);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 200ms ease, border-color 200ms ease;
}

.woocommerce-Address-title a:hover {
	color: var(--ask-black, #000);
	border-bottom-color: var(--ask-black, #000);
}

address {
	font-style: normal;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ask-gray, #888581);
}

address p {
	color: var(--ask-gray, #888581);
	margin-bottom: 4px;
}

/* ============================================================
   6. FORMULARIOS DE CUENTA — campos compartidos
   ============================================================ */
.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce form p {
	margin-bottom: 18px;
}

.woocommerce-account .woocommerce form label,
.woocommerce-account label {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ask-gray, #888581);
	margin-bottom: 6px;
}

.woocommerce-account .woocommerce form input[type="text"],
.woocommerce-account .woocommerce form input[type="email"],
.woocommerce-account .woocommerce form input[type="password"],
.woocommerce-account .woocommerce form input[type="tel"],
.woocommerce-account .woocommerce form select,
.woocommerce-account .woocommerce form textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	background: var(--ask-white, #fff);
	font-family: var(--ask-font-sans, 'Neue Montreal', 'Helvetica Neue', system-ui, sans-serif);
	font-size: 14px;
	color: var(--ask-black, #000);
	outline: none;
	border-radius: 0;
	-webkit-appearance: none;
	transition: border-color 220ms ease;
}

.woocommerce-account .woocommerce form input:focus,
.woocommerce-account .woocommerce form select:focus,
.woocommerce-account .woocommerce form textarea:focus {
	border-color: var(--ask-black, #000);
	box-shadow: none;
}

/* Campos requeridos: asterisco en camel */
.woocommerce-account .required,
.woocommerce-account .woocommerce-required {
	color: var(--ask-camel, #B89968);
}

/* Subtítulos de sección del formulario */
.woocommerce-account .woocommerce fieldset legend,
.woocommerce-account .woocommerce h3 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ask-gray-line, #E5E2DC);
}

/* ============================================================
   7. BOTONES DE CUENTA — .woocommerce-Button y .button
   ============================================================ */
.woocommerce-account .button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account input[type="submit"],
.woocommerce-account button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--ask-black, #000);
	color: var(--ask-white, #fff);
	border: none;
	padding: 16px 28px;
	font-family: var(--ask-font-sans, 'Neue Montreal', 'Helvetica Neue', system-ui, sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border-radius: 0;
	transition: background 280ms ease;
}

.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account input[type="submit"]:hover,
.woocommerce-account button[type="submit"]:hover {
	background: var(--ask-camel, #B89968);
	color: var(--ask-white, #fff);
}

/* Botón secundario / outline */
.woocommerce-account .button.alt,
.woocommerce-account .woocommerce-Button--next,
.woocommerce-account .woocommerce-Button--previous {
	background: transparent;
	color: var(--ask-black, #000);
	border: 1px solid var(--ask-black, #000);
}

.woocommerce-account .button.alt:hover,
.woocommerce-account .woocommerce-Button--next:hover,
.woocommerce-account .woocommerce-Button--previous:hover {
	background: var(--ask-black, #000);
	color: var(--ask-white, #fff);
}

/* ============================================================
   8. FORMULARIO LOGIN — form.woocommerce-form-login
   ============================================================ */
.woocommerce-form-login,
.woocommerce-page .woocommerce form.login {
	background: var(--ask-white, #fff);
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	padding: 40px;
	max-width: 480px;
	margin: 0 auto;
}

.woocommerce-form-login .woocommerce-form__label-for-checkbox,
.woocommerce-page .woocommerce form.login .woocommerce-form__label-for-checkbox {
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ask-black, #000);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.woocommerce-form-login .lost_password a {
	font-size: 12px;
	color: var(--ask-gray, #888581);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-form-login .lost_password a:hover {
	color: var(--ask-black, #000);
}

/* Tabs de login/registro */
.woocommerce-page .woocommerce > .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	max-width: 960px;
	margin: 0 auto;
}

.woocommerce-page .woocommerce > .col2-set .col-1,
.woocommerce-page .woocommerce > .col2-set .col-2 {
	background: var(--ask-white, #fff);
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	padding: 36px;
	/* WC les pone width:48% + float, que dentro del grid las encoge a la mitad. */
	width: 100%;
	float: none;
}

/* En el layout de 2 columnas, la "caja" es la columna: el formulario interno
   NO lleva su propio borde/padding/fondo (evita la doble caja que encogía los campos). */
.woocommerce-account .col2-set .woocommerce-form-login,
.woocommerce-account .col2-set .woocommerce-form-register {
	border: 0;
	padding: 0;
	margin: 0;
	max-width: none;
	background: transparent;
}

/* Colocación explícita de las columnas (Acceder / Registrarse) en la misma fila,
   col 1 y col 2. Evita que un nodo extra del grid las deje en diagonal. */
.woocommerce-page .woocommerce > .col2-set .col-1 { grid-column: 1; grid-row: 1; }
.woocommerce-page .woocommerce > .col2-set .col-2 { grid-column: 2; grid-row: 1; }

/* ============================================================
   9. FORMULARIO REGISTRO — form.woocommerce-form-register
   ============================================================ */
.woocommerce-form-register,
.woocommerce-page .woocommerce form.register {
	background: var(--ask-white, #fff);
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	padding: 40px;
}

/* ============================================================
   10. RECUPERAR CONTRASEÑA — form.woocommerce-ResetPassword
       + .lost_reset_password
   ============================================================ */
.woocommerce-ResetPassword,
.lost_reset_password {
	background: var(--ask-white, #fff);
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	padding: 40px;
	max-width: 480px;
	margin: 0 auto;
}

.woocommerce-ResetPassword p,
.lost_reset_password p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ask-gray, #888581);
	margin-bottom: 20px;
}

/* Encabezado de la página de recuperación */
.woocommerce-account .entry-title {
	font-family: var(--ask-font-sans, 'Neue Montreal', 'Helvetica Neue', system-ui, sans-serif);
	font-size: clamp(36px, 6vw, 72px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

/* ============================================================
   11. PÁGINA MI-CUENTA — Dashboard welcome + breadcrumb
   ============================================================ */
/* El título de página ("MI CUENTA") es redundante en esta área → se oculta. */
.woocommerce-account .page-header,
.woocommerce-account .entry-title {
	display: none;
}

/* Título de secciones dentro del contenido */
.woocommerce-MyAccount-content .woocommerce-column__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

/* ============================================================
   12. ORDEN DE DETALLES (página de detalle de pedido)
   ============================================================ */
.woocommerce-order-details,
.woocommerce-customer-details {
	background: var(--ask-white, #fff);
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	padding: 28px;
	margin-bottom: 24px;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ask-gray-line, #E5E2DC);
}

/* Totales del pedido */
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot th {
	font-size: 13px;
	padding: 12px 18px;
	border-top: 1px solid var(--ask-gray-line, #E5E2DC);
}

.woocommerce-table--order-details tfoot tr.order-total td,
.woocommerce-table--order-details tfoot tr.order-total th {
	font-weight: 700;
	font-size: 15px;
}

/* ============================================================
   13. CHECKBOX — accent camel
   ============================================================ */
.woocommerce-account input[type="checkbox"] {
	accent-color: var(--ask-black, #000);
	width: 15px;
	height: 15px;
}

/* ============================================================
   14. AVATARES — inicial en camel
   ============================================================ */
.woocommerce-account .avatar {
	border-radius: 50%;
	border: 2px solid var(--ask-camel, #B89968);
}

/* ============================================================
   15. MOBILE-FIRST — Responsive
   ============================================================ */
@media (max-width: 980px) {
	.woocommerce-account .woocommerce {
		padding: 24px 16px 60px;
	}
	/* Panel logueado: 1 columna en móvil (más específico que .logged-in...). */
	.logged-in.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.logged-in.woocommerce-account .woocommerce-MyAccount-navigation,
	.logged-in.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
	}

	.woocommerce-MyAccount-navigation {
		position: static;
	}

	.woocommerce-MyAccount-content .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	.woocommerce-page .woocommerce > .col2-set {
		grid-template-columns: 1fr;
	}
	/* Resetea la colocación explícita para que las columnas apilen en móvil. */
	.woocommerce-page .woocommerce > .col2-set .col-1,
	.woocommerce-page .woocommerce > .col2-set .col-2 {
		grid-column: 1;
		grid-row: auto;
	}

	.woocommerce-form-login,
	.woocommerce-form-register,
	.woocommerce-ResetPassword,
	.lost_reset_password {
		padding: 28px 20px;
	}

	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table tbody tr {
		display: block;
		border-bottom: 2px solid var(--ask-gray-line, #E5E2DC);
		padding: 16px 0;
	}

	.woocommerce-orders-table tbody td {
		display: block;
		border-bottom: none;
		padding: 4px 0;
	}

	.woocommerce-orders-table tbody td::before {
		content: attr(data-title) ": ";
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--ask-gray, #888581);
		margin-right: 6px;
	}
}

@media (max-width: 600px) {
	.woocommerce-page .woocommerce > .col2-set .col-1,
	.woocommerce-page .woocommerce > .col2-set .col-2 {
		padding: 24px 16px;
	}
}

/* ============================================================
   16. ESCRITORIO PERSONALIZADO (panel con accesos rápidos)
   ============================================================ */
.ask-acc-dash__hi {
	font-size: 22px;
	font-weight: 500;
	color: var(--ask-black, #000) !important;
	margin-bottom: 4px !important;
}
.ask-acc-dash__sub {
	font-size: 14px;
	color: var(--ask-gray, #888581) !important;
	margin-bottom: 24px !important;
}
.ask-acc-dash__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-bottom: 28px;
}
.ask-acc-tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--ask-white, #fff);
	border: 1px solid var(--ask-gray-line, #E5E2DC);
	border-left: 2px solid var(--ask-camel, #B89968);
	padding: 22px 20px;
	text-decoration: none !important;
	transition: transform 220ms ease, border-color 220ms ease;
}
.ask-acc-tile:hover {
	transform: translateY(-2px);
	border-left-color: var(--ask-black, #000);
}
.ask-acc-tile__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ask-black, #000);
}
.ask-acc-tile__meta {
	font-size: 12px;
	color: var(--ask-gray, #888581);
}
.ask-acc-dash__btn {
	display: inline-block;
	background: var(--ask-black, #000);
	color: var(--ask-white, #fff) !important;
	padding: 14px 26px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background 260ms ease;
}
.ask-acc-dash__btn:hover { background: var(--ask-camel, #B89968); }

/* Cupones */
.ask-acc-coupons__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ask-acc-coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	background: var(--ask-white, #fff);
	border: 1px dashed var(--ask-camel, #B89968);
	padding: 18px 20px;
}
.ask-acc-coupon__code {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ask-camel, #B89968);
}
.ask-acc-coupon__val { font-size: 13px; font-weight: 600; color: var(--ask-black, #000); }
.ask-acc-coupon__exp { font-size: 12px; color: var(--ask-gray, #888581); margin-left: auto; }
.ask-acc-empty { font-size: 14px; color: var(--ask-gray, #888581); }

@media (max-width: 600px) {
	.ask-acc-dash__grid { grid-template-columns: 1fr; }
}