/* ==========================================================================
 * La Abacería de la Sal · Shop — hoja principal
 *
 * Tokens del sistema (paper / ink / mostaza / tomate),
 * tipografías Cormorant + Work Sans + Caveat + JetBrains Mono.
 *
 * Estructura del archivo:
 *   1. Tokens y reset
 *   2. Utilidades editoriales (eyebrow, tags, botones)
 *   3. Nav + mobile menu
 *   4. Footer
 *   5. Hero / shop landing
 *   6. Grid de productos + card editorial
 *   7. Ficha producto (single)
 *   8. Carrito
 *   9. Checkout
 *  10. Páginas WP (page.php, single.php, 404)
 *  11. Responsive (≤ 1023, ≤ 720, ≤ 480)
 * ========================================================================== */

/* 1. Tokens y reset
   -------------------------------------------------------------------------- */
:root {
	--paper: #F2EADA;
	--paper-deep: #E8DEC8;
	--paper-soft: #EFE5D2;
	--ink: #1C1815;
	--ink-soft: #3E352C;
	--ink-mute: #776B5A;
	--ink-faded: #D9CFBE;
	--mustard: #D9A43A;
	--mustard-deep: #B07D1E;
	--tomato: #C73A2A;
	--tomato-deep: #9B2A1E;

	--pad-x: clamp(20px, 5.5vw, 64px);
	--maxw: 1440px;

	--font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	--font-sans:  'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono:  'JetBrains Mono', 'IBM Plex Mono', monospace;
	--font-hand:  'Caveat', 'Kalam', cursive;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-serif);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 400; margin: 0; letter-spacing: -0.01em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.aba-skip-link {
	position: absolute; top: -100px; left: 16px; padding: 10px 14px;
	background: var(--ink); color: var(--paper); z-index: 999;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.aba-skip-link:focus { top: 16px; }

.aba-page { background: var(--paper); }

/* 2. Utilidades editoriales
   -------------------------------------------------------------------------- */
.aba-eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tomato);
}
.aba-eyebrow--mustard { color: var(--mustard-deep); }
.aba-eyebrow--ink     { color: var(--ink-soft); }

.aba-tag {
	display: inline-block;
	padding: 5px 10px;
	background: var(--tomato);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
}
.aba-tag--mustard { background: var(--mustard); color: var(--ink); }
.aba-tag--ink     { background: var(--ink); color: var(--paper); }

.aba-btn-solid,
.aba-btn-outline,
.aba-btn-mustard {
	display: inline-block;
	padding: 16px 28px;
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border: 1.5px solid var(--ink);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	text-align: center;
}
.aba-btn-solid { background: var(--ink); color: var(--paper); }
.aba-btn-solid:hover { background: var(--tomato); border-color: var(--tomato); }
.aba-btn-outline { color: var(--ink); }
.aba-btn-outline:hover { background: var(--ink); color: var(--paper); }
.aba-btn-mustard { background: var(--mustard); color: var(--ink); border-color: var(--mustard); font-weight: 600; padding: 18px 32px; }
.aba-btn-mustard:hover { background: var(--mustard-deep); color: var(--paper); border-color: var(--mustard-deep); }

/* Sección estándar */
.aba-section { padding: 60px var(--pad-x); }
.aba-section--tight { padding: 32px var(--pad-x); }
.aba-section--deep  { background: var(--paper-deep); border-top: 1px solid rgba(28,24,21,0.12); border-bottom: 1px solid rgba(28,24,21,0.12); }

.aba-crumbs {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	text-transform: uppercase;
	padding: 18px var(--pad-x);
	max-width: var(--maxw);
	margin: 0 auto;
}
.aba-crumbs a { color: var(--ink-mute); transition: color 0.15s; }
.aba-crumbs a:hover { color: var(--ink); }
.aba-crumbs .is-current { color: var(--ink); }

/* 3. Nav
   -------------------------------------------------------------------------- */
.aba-nav {
	background: var(--paper);
	border-bottom: 1px solid rgba(28,24,21,0.12);
	position: sticky;
	top: 0;
	z-index: 50;
}
.aba-nav__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
	padding: 14px var(--pad-x);
	max-width: var(--maxw);
	margin: 0 auto;
}
.aba-nav__burger {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	margin-left: -8px;
}
.aba-nav__burger span {
	width: 22px; height: 1.5px; background: var(--ink); display: block;
	transition: transform 0.2s, opacity 0.2s;
}
.aba-nav__burger span:last-child { width: 14px; }
.aba-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.aba-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.aba-nav__burger[aria-expanded="true"] span:nth-child(3) { width: 22px; transform: translateY(-5.5px) rotate(-45deg); }

.aba-nav__brand a, .aba-nav__brand .custom-logo-link { display: inline-flex; align-items: center; gap: 14px; }
/* Tamaño igualado a la web corporativa (~240px de ancho).
   Ratio del PNG ≈ 1500×632 ≈ 2.37:1, así que con 240 de ancho
   el alto natural es ~101px. */
.aba-nav__brand img, .aba-logo img {
	height: auto;
	width: auto;
	max-width: 240px;
	max-height: 100px;
	object-fit: contain;
}
.aba-logo__sub {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-mute);
	padding-left: 12px;
	border-left: 1px solid rgba(28,24,21,0.25);
	display: none; /* La marca ya identifica la tienda — sublabel oculta por defecto */
}

.aba-nav__menu { justify-self: center; display: flex; align-items: center; gap: 32px; }
.aba-nav__list {
	display: flex; gap: 32px; margin: 0; padding: 0; list-style: none;
	font-family: var(--font-sans); font-size: 13px;
	letter-spacing: 0.18em; text-transform: uppercase;
}
.aba-nav__list a {
	color: var(--ink-mute);
	padding-bottom: 4px;
	border-bottom: 1.5px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}
.aba-nav__list a:hover,
.aba-nav__list .current-menu-item > a,
.aba-nav__list .current_page_item > a {
	color: var(--ink);
	border-bottom-color: var(--tomato);
}

/* Puente a la web del restaurante: vive en el menú, pero como botón, para que
   se lea como "me voy a otro sitio" y no como una sección más de la tienda. */
.aba-nav__ext {
	flex: none;
	padding: 9px 16px;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	font-family: var(--font-sans); font-size: 12px;
	letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
	color: var(--ink);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.aba-nav__ext:hover {
	background: var(--tomato); border-color: var(--tomato); color: var(--paper);
}

.aba-nav__tools {
	display: flex; align-items: center; gap: 22px;
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
}
.aba-nav__tool {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--ink-soft); transition: color 0.15s;
}
.aba-nav__tool:hover { color: var(--ink); }
.aba-ico { stroke: currentColor; }
.aba-nav__cart {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	background: var(--ink); color: var(--paper);
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.18em; text-transform: uppercase;
	transition: background 0.15s;
}
.aba-nav__cart:hover { background: var(--tomato); }

/* Mobile menu (overlay) */
.aba-mobile {
	position: fixed; inset: 0; background: var(--paper); z-index: 100;
	display: flex; flex-direction: column;
	transform: translateX(-100%); transition: transform 0.25s;
}
.aba-mobile[hidden] { display: none; }
.aba-mobile.is-open { transform: none; }
.aba-mobile__head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 22px var(--pad-x); border-bottom: 1px solid rgba(28,24,21,0.12);
}
.aba-mobile__close {
	width: 32px; height: 32px; position: relative;
}
.aba-mobile__close span {
	position: absolute; top: 50%; left: 4px; right: 4px; height: 1.5px;
	background: var(--ink);
}
.aba-mobile__close span:first-child { transform: rotate(45deg); }
.aba-mobile__close span:last-child { transform: rotate(-45deg); }
.aba-mobile__nav { padding: 28px var(--pad-x); display: flex; flex-direction: column; gap: 6px; }
.aba-mobile__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.aba-mobile__list a {
	display: block; padding: 14px 0;
	font-family: var(--font-serif); font-size: 26px; font-style: italic;
	border-bottom: 1px solid rgba(28,24,21,0.12);
}
.aba-mobile__ext {
	margin-top: 22px;
	padding: 15px 22px;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	font-family: var(--font-sans); font-size: 13px;
	letter-spacing: 0.16em; text-transform: uppercase;
	text-align: center;
	display: block;
}
.aba-mobile__cta {
	margin-top: 18px;
	padding: 16px 22px;
	background: var(--ink); color: var(--paper);
	font-family: var(--font-sans); font-size: 13px;
	letter-spacing: 0.2em; text-transform: uppercase;
	display: inline-block;
}

/* 4. Footer
   -------------------------------------------------------------------------- */
.aba-footer { background: var(--ink); color: var(--paper); }
.aba-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--pad-x) 32px; }
.aba-footer__cols {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px;
}
.aba-footer__logo { max-width: 220px; filter: invert(1) brightness(1.6); margin-bottom: 18px; }
.aba-footer__claim {
	font-family: var(--font-serif); font-style: italic;
	font-size: 16px; line-height: 1.5; color: var(--ink-faded); max-width: 280px;
}
.aba-footer__title {
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--mustard); margin-bottom: 14px;
}
.aba-footer__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 8px;
	font-family: var(--font-serif); font-size: 15px; color: var(--ink-faded);
}
.aba-footer__list a { transition: color 0.15s; }
.aba-footer__list a:hover { color: var(--mustard); }
.aba-footer__bar {
	border-top: 1px solid rgba(242,234,218,0.14);
	padding-top: 20px;
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.18em; text-transform: uppercase; color: #8A8070;
}

/* 5. Hero shop
   -------------------------------------------------------------------------- */
.aba-hero {
	display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px;
	align-items: end;
	padding: 70px var(--pad-x) 60px;
	border-bottom: 1px solid rgba(28,24,21,0.12);
	max-width: var(--maxw);
	margin: 0 auto;
}
.aba-hero__title {
	font-size: clamp(48px, 7vw, 88px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0;
}
.aba-hero__title em { font-style: italic; color: var(--tomato); }
.aba-hero__hand {
	font-family: var(--font-hand);
	font-size: clamp(22px, 2.4vw, 28px);
	margin-top: 28px;
	color: var(--ink-soft);
	line-height: 1.2;
	max-width: 460px;
}
.aba-hero__media {
	position: relative;
	display: flex;
	align-items: flex-end;
}
/* La caja toma la proporción de la foto (3:2), así la imagen no se recorta.
   min-height evita que en columnas estrechas la caja quede más baja que la
   cita, que va anclada al fondo. */
.aba-hero__media--has-img {
	aspect-ratio: 3 / 2;
	min-height: 360px;
}
.aba-hero__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.aba-hero__quote {
	position: relative;
	z-index: 1;
	width: 100%;
	background: var(--mustard);
	padding: 18px 28px;
	font-size: 18px;
	line-height: 1.45;
}
/* Con imagen, la cita se pega al borde inferior pase lo que pase con el
   alto de la caja o el reflow del texto. */
.aba-hero__media--has-img .aba-hero__quote {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
}
/* La cita va en una sola línea: si no cabe (móvil, títulos largos), que
   reduzca un punto antes de partirse, para que la franja siga siendo fina. */
.aba-hero__quote-text {
	margin: 0;
	font-style: italic;
	font-size: clamp(15px, 1.35vw, 18px);
}
.aba-hero__quote-cite {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	margin-top: 8px;
	text-transform: uppercase;
}

/* 6. Grid de productos + card editorial
   -------------------------------------------------------------------------- */
.aba-section__title {
	font-size: clamp(32px, 4vw, 40px);
	margin: 0 0 40px;
	font-weight: 400;
	text-align: center;
}
.aba-section__title em { font-style: italic; }

.aba-products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	max-width: var(--maxw);
	margin: 0 auto;
}

/* Tarjeta — flex column para que el foot (precio + Añadir) quede siempre
   al fondo y todas las tarjetas de una fila tengan la misma altura. El
   grid de .aba-products ya estira cada celda al alto máximo de la fila;
   con height: 100% la card lo aprovecha. */
.aba-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.aba-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--paper-deep);
}
.aba-card__media img {
	width: 100%; height: 100%; object-fit: contain;
	transition: transform 0.4s ease;
}
.aba-card:hover .aba-card__media img { transform: scale(1.03); }
.aba-card__media--placeholder::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(28,24,21,0.06) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(28,24,21,0.08) 0%, transparent 50%);
}
.aba-card__media-num {
	position: absolute; top: 12px; right: 12px;
	font-family: var(--font-serif); font-style: italic;
	font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); opacity: 0.5;
}
.aba-card__badge { position: absolute; top: 12px; left: 12px; }

.aba-card__body {
	padding: 16px 0 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.aba-card__cat {
	font-family: var(--font-mono);
	font-size: 10px; letter-spacing: 0.2em;
	color: var(--ink-mute); text-transform: uppercase;
}
.aba-card__title {
	font-family: var(--font-serif);
	font-size: 26px;
	margin: 6px 0 0;
	line-height: 1.1;
	color: var(--ink);
}
.aba-card__title a { color: inherit; }
.aba-card__subtitle {
	font-family: var(--font-serif); font-style: italic;
	font-size: 15px; color: var(--ink-soft); margin-top: 4px;
}
.aba-card__foot {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-top: auto; padding-top: 14px;
	border-top: 1px solid rgba(28,24,21,0.12);
}
.aba-card__price {
	font-family: var(--font-serif);
	font-size: 22px; font-weight: 500;
}
.aba-card__price del { color: var(--ink-mute); margin-right: 8px; font-weight: 400; }
.aba-card__price ins { text-decoration: none; }
.aba-card__cta {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1.5px solid var(--tomato);
	padding-bottom: 2px;
	transition: color 0.15s, border-color 0.15s, opacity 0.15s;
	position: relative;
}
.aba-card__cta:hover { color: var(--tomato); }
.aba-card__cta.loading {
	opacity: 0.55; pointer-events: none;
	color: var(--ink-mute); border-bottom-color: var(--ink-mute);
}
.aba-card__cta.loading::after {
	content: ''; display: inline-block;
	width: 10px; height: 10px; margin-left: 8px;
	border: 1.5px solid currentColor; border-top-color: transparent;
	border-radius: 50%;
	animation: aba-spin 0.7s linear infinite;
	vertical-align: middle;
}
@keyframes aba-spin { to { transform: rotate(360deg); } }
.aba-card__cta.added { color: var(--tomato); border-bottom-color: var(--tomato); }
.aba-card__cta.added::before { content: '✓ '; }

/* Link "Ver carrito" que WC inyecta tras añadir vía AJAX.
   Va como hermano del botón dentro de .aba-card__foot — lo
   estilamos como un mini-link discreto debajo. */
.aba-card__foot { position: relative; flex-wrap: wrap; row-gap: 8px; }
.added_to_cart.wc-forward {
	flex-basis: 100%; order: 99;
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--tomato);
	padding-top: 6px;
	border-top: 1px dashed rgba(28,24,21,0.15);
	margin-top: 6px;
}
.added_to_cart.wc-forward:hover { color: var(--tomato-deep); }

/* 7. Ficha de producto
   -------------------------------------------------------------------------- */
.aba-product {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	padding: 20px var(--pad-x) 60px;
	max-width: var(--maxw);
	margin: 0 auto;
}
.aba-product__gallery { position: relative; }
.aba-product__main {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--paper-deep);
	overflow: hidden;
}
.aba-product__main img { width: 100%; height: 100%; object-fit: contain; }
.aba-product__badge { position: absolute; top: 18px; left: 18px; }
.aba-product__thumbs {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 12px; margin-top: 12px;
}
.aba-product__thumb {
	aspect-ratio: 3 / 2;
	border: 2px solid transparent;
	background: var(--paper-deep);
	cursor: pointer;
	overflow: hidden;
}
.aba-product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.aba-product__thumb.is-active { border-color: var(--tomato); }

.aba-product__info { padding-top: 8px; }
.aba-product__eyebrow {
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.25em; color: var(--tomato);
	text-transform: uppercase;
}
.aba-product__title {
	font-family: var(--font-serif);
	font-size: clamp(40px, 5vw, 64px);
	line-height: 0.95;
	margin: 16px 0 0;
	font-weight: 400;
	letter-spacing: -0.015em;
}
.aba-product__title em { font-style: italic; color: var(--tomato); }
.aba-product__lead {
	font-family: var(--font-serif);
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.4; font-style: italic;
	color: var(--ink-soft);
	margin-top: 18px; max-width: 480px;
}

.aba-product__price-row {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(28,24,21,0.16);
}
.aba-product__price {
	font-family: var(--font-serif);
	font-size: 48px; font-weight: 500; line-height: 1;
	color: var(--ink);
}
.aba-product__price .woocommerce-Price-currencySymbol { font-size: 24px; }
.aba-product__price del { color: var(--ink-mute); margin-right: 12px; font-weight: 400; }
.aba-product__price ins { text-decoration: none; }
.aba-product__price-note {
	font-family: var(--font-mono);
	font-size: 11px; letter-spacing: 0.18em;
	color: var(--ink-mute); margin-top: 4px; text-transform: uppercase;
}

.aba-product__attrs { margin-top: 28px; }
.aba-product__attr-label {
	font-family: var(--font-mono);
	font-size: 11px; letter-spacing: 0.22em;
	text-transform: uppercase; color: var(--ink-soft);
	margin-bottom: 12px;
}
.aba-product__variations { /* table de woo escondida — usamos chips */
	border: 0;
}
.aba-product__variations table.variations { width: 100%; border-collapse: collapse; }
.aba-product__variations table.variations tr { display: block; margin-bottom: 14px; }
.aba-product__variations table.variations td.label { display: block; padding: 0 0 8px; }
.aba-product__variations table.variations td.label label {
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
.aba-product__variations table.variations td.value { display: block; padding: 0; }
.aba-product__variations select {
	font-family: var(--font-serif); font-size: 16px;
	padding: 12px 18px;
	background: var(--paper);
	border: 1px solid rgba(28,24,21,0.25);
	min-width: 200px;
}
.aba-product__reset-vars {
	display: inline-block; margin-top: 10px;
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ink-mute);
}

.aba-product__purchase { margin-top: 28px; }
/* El grid qty + botón va en el propio form, no en el wrapper.
   El wrapper sólo tiene 1 hijo (el form de Woo), por eso si pusiéramos
   grid aquí dejaría una columna vacía. */
.aba-product__purchase .aba-add-to-cart,
.aba-product__purchase form.cart {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: stretch;
}
.aba-product__purchase .aba-qty { align-self: stretch; }
.aba-qty {
	display: inline-flex; align-items: center; gap: 16px;
	border: 1.5px solid var(--ink); padding: 14px 20px;
	font-family: var(--font-serif); font-size: 18px;
	background: var(--paper);
}
.aba-qty button { color: var(--ink-mute); font-size: 22px; line-height: 1; padding: 0 4px; }
.aba-qty button:hover { color: var(--ink); }
.aba-qty input {
	width: 32px; text-align: center;
	background: transparent; border: 0; font: inherit; color: inherit;
	-moz-appearance: textfield;
}
.aba-qty input::-webkit-outer-spin-button,
.aba-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Botón "Añadir a la cesta" en la ficha.
   Woo le pone clases .button.alt que pinta su CSS por defecto en morado con
   alta especificidad (.woocommerce-page button.button.alt = 0,3,1). Como
   nuestros selectores no llegan a esa especificidad sin ensuciar el código,
   forzamos las propiedades visuales clave con !important. Es la forma más
   limpia de ganarle a un plugin de terceros sin escalada de especificidad. */
.aba-product__cta,
.woocommerce .aba-product__cta,
.woocommerce-page .aba-product__cta,
button.aba-product__cta {
	padding: 16px 28px !important;
	background: var(--ink) !important;
	color: var(--paper) !important;
	font-family: var(--font-sans) !important;
	font-size: 13px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	font-weight: 400 !important;
	border: 1.5px solid var(--ink) !important;
	border-radius: 0 !important;
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	width: 100%;
	text-shadow: none !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	line-height: 1.2;
}
.aba-product__cta:hover,
.woocommerce .aba-product__cta:hover,
button.aba-product__cta:hover {
	background: var(--tomato) !important;
	border-color: var(--tomato) !important;
	color: var(--paper) !important;
}
.aba-product__cta:disabled { opacity: 0.5; cursor: not-allowed; }

.aba-product__reassure {
	margin-top: 24px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft);
	list-style: none; padding: 0;
}
.aba-product__reassure li { list-style: none; }
.aba-product__note {
	font-family: var(--font-hand);
	font-size: 24px; color: var(--tomato);
	margin-top: 32px; line-height: 1.2; max-width: 420px;
}

/* Bloque editorial */
.aba-prod-editorial {
	display: grid; grid-template-columns: 240px 1fr; gap: 48px;
	grid-auto-columns: 280px;
	padding: 80px var(--pad-x);
	background: var(--paper-deep);
	border-top: 1px solid rgba(28,24,21,0.12);
	border-bottom: 1px solid rgba(28,24,21,0.12);
}
.aba-prod-editorial__side { font-family: var(--font-serif); }
.aba-prod-editorial__side h4 {
	font-size: 28px; font-style: italic; margin: 10px 0 0; line-height: 1.1;
}
.aba-prod-editorial__side small {
	font-family: var(--font-sans); font-size: 12px;
	letter-spacing: 0.15em; text-transform: uppercase;
	margin-top: 10px; display: block; color: var(--ink-soft);
}
.aba-prod-editorial__body {
	font-family: var(--font-serif);
	font-size: 19px; line-height: 1.65; color: var(--ink);
}
.aba-prod-editorial__body > p:first-child {
	font-size: 26px; line-height: 1.4; font-style: italic;
	margin: 0 0 24px;
}
.aba-prod-editorial__body > p:first-child::first-letter {
	font-size: 84px; float: left; line-height: 0.8;
	margin: 6px 12px 0 0;
	color: var(--tomato); font-weight: 400;
}
.aba-prod-editorial__body blockquote {
	margin: 32px 0 0; padding: 20px 0 20px 28px;
	border-left: 3px solid var(--tomato);
	font-family: var(--font-serif); font-size: 28px;
	font-style: italic; line-height: 1.25;
}
.aba-prod-editorial__aside p {
	font-family: var(--font-hand);
	font-size: 22px; color: var(--ink-soft); margin-top: 14px; line-height: 1.3;
}

/* Tabla atributos */
.aba-prod-attrs {
	padding: 70px var(--pad-x);
	max-width: var(--maxw);
	margin: 0 auto;
}
.aba-prod-attrs h3 { font-size: 36px; font-weight: 400; margin: 0 0 32px; }
.aba-prod-attrs h3 em { font-style: italic; }
.aba-prod-attrs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.aba-prod-attrs__row {
	display: grid; grid-template-columns: 180px 1fr;
	padding: 18px 0;
	border-bottom: 1px solid rgba(28,24,21,0.1);
	align-items: baseline;
}
.aba-prod-attrs__row--right { padding-left: 32px; }
.aba-prod-attrs__row--left  { padding-right: 32px; border-right: 1px solid rgba(28,24,21,0.1); }
.aba-prod-attrs__k {
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
}
.aba-prod-attrs__v { font-family: var(--font-serif); font-size: 19px; }

/* Relacionados */
.aba-related { padding: 30px var(--pad-x) 80px; max-width: var(--maxw); margin: 0 auto; }
.aba-related h3 { font-size: 36px; font-weight: 400; margin: 0 0 28px; }
.aba-related h3 em { font-style: italic; }

/* CTA flotante (móvil ficha) */
.aba-sticky-cta { display: none; }

/* 8. Carrito
   -------------------------------------------------------------------------- */
.aba-cart-hero { padding: 60px var(--pad-x) 30px; max-width: var(--maxw); margin: 0 auto; }
.aba-cart-hero h1 {
	font-family: var(--font-serif);
	font-size: clamp(48px, 7vw, 80px);
	font-weight: 400; line-height: 0.95;
	letter-spacing: -0.02em; margin: 14px 0 0;
}
.aba-cart-hero h1 em { font-style: italic; color: var(--tomato); }
.aba-cart-hero__hand {
	font-family: var(--font-hand);
	font-size: 26px; color: var(--ink-soft);
	margin-top: 14px; max-width: 480px;
}

.aba-cart {
	display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px;
	padding: 20px var(--pad-x) 80px;
	max-width: var(--maxw); margin: 0 auto;
	align-items: start;
}
/* El form .aba-cart tiene 3 hijos directos: items, main-actions (cupón) y
   summary. Sin colocación explícita, el grid auto-flow los reparte mal
   (cupón sube a la columna 2). Forzamos: items en fila 1 col 1, coupon
   en fila 2 col 1, summary en col 2 cubriendo ambas filas.
   IMPORTANTE: span 2 (no span 99) — al usar span 99 el grid crea 99 filas
   implícitas y aunque vacías el row-gap entre ellas suma ~4750px. */
.aba-cart > .aba-cart__items       { grid-column: 1; grid-row: 1; }
.aba-cart > .aba-cart__main-actions { grid-column: 1; grid-row: 2; }
.aba-cart > .aba-cart__summary     { grid-column: 2; grid-row: 1 / span 2; }
.aba-cart__head {
	display: grid; grid-template-columns: 120px 1fr 140px 120px 24px;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1.5px solid var(--ink);
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute);
}
.aba-cart__head .col-price { text-align: right; }
.aba-cart__row {
	display: grid;
	grid-template-columns: 120px 1fr 140px 120px 24px;
	grid-template-areas: "media info qty price remove";
	gap: 16px;
	padding: 22px 0;
	border-bottom: 1px solid rgba(28,24,21,0.12);
	align-items: center;
}
.aba-cart__row > .aba-cart__media   { grid-area: media; }
.aba-cart__row > .aba-cart__info    { grid-area: info; }
.aba-cart__row > .aba-cart__qty-cell { grid-area: qty; }
.aba-cart__row > .aba-cart__line-price { grid-area: price; }
.aba-cart__row > .aba-cart__remove  { grid-area: remove; }
.aba-cart__media {
	width: 120px; aspect-ratio: 3 / 2;
	overflow: hidden; background: var(--paper-deep);
}
.aba-cart__media img { width: 100%; height: 100%; object-fit: contain; }
.aba-cart__name a {
	font-family: var(--font-serif); font-size: 24px;
	line-height: 1.1; color: var(--ink);
}
.aba-cart__cat {
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.2em; color: var(--ink-mute); text-transform: uppercase;
}
.aba-cart__variation {
	font-family: var(--font-serif); font-style: italic;
	font-size: 15px; color: var(--ink-soft); margin-top: 2px;
	/* Si el cliente mete una descripción larga en short_description, la
	   recortamos a 2 líneas para que no engorde la fila del carrito. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 2.8em;
}
.aba-cart__line-price {
	font-family: var(--font-serif); font-size: 22px;
	text-align: right; font-weight: 500;
}
.aba-cart__remove {
	font-family: var(--font-mono); font-size: 18px;
	color: var(--ink-mute); text-align: center;
	transition: color 0.15s;
}
.aba-cart__remove:hover { color: var(--tomato); }

/* (Limpieza) Los antiguos .aba-cart__body / __inline-foot / --desk se
   sustituyeron por una sola fila con grid-template-areas. Ya no hace
   falta ocultar duplicados. */

/* Botón "Tramitar pedido" de Woo dentro del summary.
   Las clases del CSS por defecto de Woo (.button.alt) le ponen morado
   con alta especificidad; por eso anteponemos .woocommerce. */
.wc-proceed-to-checkout { margin-top: 0; padding: 0; }
.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout .button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.button.alt,
a.checkout-button.button.alt {
	display: block; width: 100%;
	padding: 16px 22px;
	background: var(--ink); color: var(--paper);
	font-family: var(--font-sans); font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.2em; text-transform: uppercase;
	text-align: center;
	text-shadow: none;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	transition: background 0.15s, border-color 0.15s;
}
.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.button.alt:hover {
	background: var(--tomato); border-color: var(--tomato); color: var(--paper);
}

.aba-cart__coupon {
	margin-top: 32px; padding: 20px 24px;
	background: var(--paper-deep);
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap;
}
.aba-cart__coupon-label {
	font-family: var(--font-hand); font-size: 22px; color: var(--ink-soft);
}
.aba-cart__coupon-form { display: flex; gap: 8px; }
.aba-cart__coupon-form input {
	padding: 10px 14px; background: var(--paper);
	border: 1px solid rgba(28,24,21,0.25);
	font-family: var(--font-mono); font-size: 12px;
	letter-spacing: 0.15em; text-transform: uppercase;
	width: 180px;
}
.aba-cart__coupon-form button {
	padding: 10px 18px; background: var(--ink); color: var(--paper);
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.2em; text-transform: uppercase;
	transition: background 0.15s;
}
.aba-cart__coupon-form button:hover { background: var(--tomato); }

.aba-cart__summary {
	background: var(--paper-deep);
	padding: 32px 28px;
	border: 1px solid rgba(28,24,21,0.12);
	position: sticky; top: 100px;
}
.aba-cart__summary h3 {
	font-family: var(--font-serif); font-size: 32px;
	font-weight: 400; margin: 10px 0 20px; line-height: 1;
}
.aba-cart__summary h3 em { font-style: italic; }
.aba-cart__totals { display: block; }
.aba-cart__totals-row {
	display: flex; justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid rgba(28,24,21,0.12);
	font-family: var(--font-serif); font-size: 18px;
}
.aba-cart__totals-row span:first-child { color: var(--ink-soft); }
.aba-cart__totals-total {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 20px 0 24px;
}
.aba-cart__totals-total .lbl {
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
.aba-cart__totals-total .amt {
	font-family: var(--font-serif); font-size: 40px; font-weight: 500;
}
.aba-cart__cta {
	padding: 16px 22px; background: var(--ink); color: var(--paper);
	font-family: var(--font-sans); font-size: 13px;
	letter-spacing: 0.2em; text-transform: uppercase;
	text-align: center; display: block;
	border: 1.5px solid var(--ink);
	transition: background 0.15s;
}
.aba-cart__cta:hover { background: var(--tomato); border-color: var(--tomato); }
.aba-cart__continue {
	margin-top: 14px; padding: 12px 16px;
	border: 1px solid rgba(28,24,21,0.25);
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.18em; text-transform: uppercase;
	text-align: center; display: block; color: var(--ink-soft);
	transition: color 0.15s, border-color 0.15s;
}
.aba-cart__continue:hover { color: var(--ink); border-color: var(--ink); }
.aba-cart__reassure {
	margin-top: 22px; padding-top: 18px;
	border-top: 1px dashed rgba(28,24,21,0.2);
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ink-soft); line-height: 1.8;
}

/* Carrito vacío */
.aba-cart-empty {
	padding: 80px var(--pad-x) 100px;
	text-align: center;
	max-width: 600px; margin: 0 auto;
}
.aba-cart-empty h2 {
	font-family: var(--font-serif);
	font-size: 56px; font-weight: 400; line-height: 1; margin: 14px 0 16px;
}
.aba-cart-empty h2 em { font-style: italic; color: var(--tomato); }
.aba-cart-empty p {
	font-family: var(--font-hand);
	font-size: 22px; color: var(--ink-soft); margin: 0 0 32px;
}

/* 9. Checkout
   -------------------------------------------------------------------------- */
.aba-checkout-nav {
	display: flex; justify-content: space-between; align-items: center;
	padding: 22px var(--pad-x);
	border-bottom: 1px solid rgba(28,24,21,0.12);
	background: var(--paper);
}
.aba-checkout-nav__seal {
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.22em; color: var(--ink-soft); text-transform: uppercase;
}

/* Cupón en checkout — toggle + form
   El toggle viene como .woocommerce-info y el form como .checkout_coupon.
   Por defecto Woo los pone como un alert azul + form flotando feo. Lo
   convertimos en una mini caja editorial sutil arriba del hero. */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	max-width: var(--maxw);
	margin: 18px auto 0;
	padding: 0 var(--pad-x);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
	padding: 12px 16px;
	background: transparent;
	border: 1px dashed rgba(28, 24, 21, 0.2);
	border-left: 1px dashed rgba(28, 24, 21, 0.2);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 15px;
	color: var(--ink-soft);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
	font-family: var(--font-mono);
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tomato);
	text-decoration: none;
	border-bottom: 1.5px solid var(--tomato);
	padding-bottom: 2px;
	margin-left: auto;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:hover {
	color: var(--tomato-deep);
	border-bottom-color: var(--tomato-deep);
}

form.checkout_coupon.woocommerce-form-coupon {
	max-width: var(--maxw);
	margin: 12px auto 0;
	padding: 18px var(--pad-x);
	background: var(--paper-soft);
	border-top: 1px solid rgba(28, 24, 21, 0.12);
	border-bottom: 1px solid rgba(28, 24, 21, 0.12);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: center;
}
form.checkout_coupon.woocommerce-form-coupon .form-row {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
form.checkout_coupon.woocommerce-form-coupon .form-row-first { grid-column: 1; }
form.checkout_coupon.woocommerce-form-coupon .form-row-last  { grid-column: 2; }
form.checkout_coupon.woocommerce-form-coupon input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	background: var(--paper);
	border: 1px solid rgba(28, 24, 21, 0.3);
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
}
form.checkout_coupon.woocommerce-form-coupon input[type="text"]::placeholder {
	color: var(--ink-mute);
	letter-spacing: 0.18em;
}
form.checkout_coupon.woocommerce-form-coupon button[type="submit"],
form.checkout_coupon.woocommerce-form-coupon button.button {
	padding: 12px 22px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 400;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	text-shadow: none;
	transition: background 0.15s, border-color 0.15s;
	cursor: pointer;
}
form.checkout_coupon.woocommerce-form-coupon button[type="submit"]:hover {
	background: var(--tomato);
	border-color: var(--tomato);
	color: var(--paper);
}
form.checkout_coupon.woocommerce-form-coupon .clear { display: none; }

.aba-checkout-hero { padding: 60px var(--pad-x) 30px; max-width: var(--maxw); margin: 0 auto; }
.aba-checkout-hero h1 {
	font-family: var(--font-serif);
	font-size: clamp(48px, 6vw, 76px);
	font-weight: 400; margin: 12px 0 0; line-height: 0.95;
}
.aba-checkout-hero h1 em { font-style: italic; color: var(--tomato); }

.aba-checkout {
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
	padding: 20px var(--pad-x) 80px;
	max-width: var(--maxw); margin: 0 auto;
	align-items: start;
}

.aba-formblock {
	border: 1px solid rgba(28,24,21,0.12);
	background: var(--paper-soft);
	margin-bottom: 18px;
}
.aba-formblock__head {
	padding: 16px 24px;
	border-bottom: 1px solid rgba(28,24,21,0.12);
	display: flex; align-items: baseline; gap: 16px;
}
.aba-formblock__num {
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.25em; color: var(--tomato);
}
.aba-formblock__title {
	font-family: var(--font-serif); font-size: 24px; font-style: italic;
}
.aba-formblock__body { padding: 20px 24px; }

/* form rows */
.aba-checkout p.form-row {
	margin: 0 0 12px;
	display: block;
}
.aba-checkout .form-row label {
	display: block;
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.22em; color: var(--ink-mute);
	text-transform: uppercase; margin-bottom: 6px;
}
.aba-checkout .form-row .required { color: var(--tomato); font-family: var(--font-serif); }
.aba-checkout .form-row .optional { color: var(--ink-mute); font-family: var(--font-serif); }
.aba-checkout input[type="text"],
.aba-checkout input[type="email"],
.aba-checkout input[type="tel"],
.aba-checkout input[type="password"],
.aba-checkout input[type="number"],
.aba-checkout textarea,
.aba-checkout select {
	width: 100%;
	padding: 12px 14px;
	background: var(--paper);
	border: 1px solid rgba(28,24,21,0.3);
	font-family: var(--font-serif); font-size: 16px; color: var(--ink);
}
.aba-checkout textarea { resize: vertical; min-height: 80px; }
.aba-checkout input::placeholder,
.aba-checkout textarea::placeholder { color: var(--ink-mute); font-style: italic; }
.aba-checkout .form-row-first { width: calc(50% - 6px); float: left; margin-right: 12px; }
.aba-checkout .form-row-last  { width: calc(50% - 6px); float: left; }
.aba-checkout .form-row-wide  { clear: both; }
.aba-checkout .woocommerce-input-wrapper { display: block; width: 100%; }
.aba-checkout .select2-container .select2-selection--single {
	height: auto; padding: 6px 4px;
	background: var(--paper);
	border: 1px solid rgba(28,24,21,0.3);
	font-family: var(--font-serif); font-size: 16px;
}
.aba-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--ink); line-height: 1.4;
}

/* Shipping/payment options */
.aba-shipping-list,
.aba-payment-list { list-style: none; padding: 0; margin: 0; }
.aba-shipping-row,
.aba-payment-row {
	display: flex; align-items: center; gap: 16px;
	padding: 16px 18px;
	border: 1px solid rgba(28,24,21,0.25);
	background: transparent;
	margin-bottom: 10px;
	cursor: pointer;
}
.aba-shipping-row.is-active,
.aba-payment-row.is-active {
	border: 1.5px solid var(--ink);
	background: var(--paper);
}
.aba-radio {
	width: 18px; height: 18px; border-radius: 50%;
	border: 1.5px solid var(--ink);
	position: relative; flex-shrink: 0;
}
.aba-shipping-row.is-active .aba-radio::after,
.aba-payment-row.is-active .aba-radio::after {
	content: ''; position: absolute; inset: 3px;
	background: var(--tomato); border-radius: 50%;
}
.aba-shipping-row__main,
.aba-payment-row__main { flex: 1; }
.aba-shipping-row__label,
.aba-payment-row__label {
	font-family: var(--font-serif); font-size: 18px;
}
.aba-shipping-row__desc,
.aba-payment-row__desc {
	font-family: var(--font-serif); font-style: italic;
	font-size: 14px; color: var(--ink-soft);
}
.aba-shipping-row__price {
	font-family: var(--font-serif); font-size: 18px;
}
.aba-payment-row__icons { display: flex; gap: 6px; }
.aba-card-badge {
	padding: 4px 8px;
	border: 1px solid rgba(28,24,21,0.25);
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.1em; color: var(--ink-soft);
}

/* Bloque "place order" */
.aba-checkout__terms {
	display: flex; gap: 12px; align-items: flex-start;
	font-family: var(--font-serif); font-size: 15px;
	color: var(--ink-soft); line-height: 1.45; margin-top: 24px;
}
.aba-checkout__terms input[type="checkbox"] {
	width: 18px; height: 18px;
	border: 1.5px solid var(--ink); margin-top: 2px;
	appearance: none; flex-shrink: 0;
	background: var(--paper); cursor: pointer;
}
.aba-checkout__terms input[type="checkbox"]:checked {
	background: var(--ink);
}
.aba-checkout__terms input[type="checkbox"]:checked::after {
	content: '✓'; color: var(--paper); font-size: 13px;
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
}
.aba-place-order,
.woocommerce-checkout .aba-place-order,
.woocommerce-checkout button#place_order,
button#place_order.button.alt {
	margin-top: 24px;
	padding: 20px 28px;
	background: var(--ink); color: var(--paper);
	font-family: var(--font-sans); font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.22em; text-transform: uppercase;
	text-align: center; display: flex; align-items: center;
	justify-content: space-between; gap: 16px;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	text-shadow: none;
	width: 100%;
	transition: background 0.15s, border-color 0.15s;
}
.aba-place-order:hover,
.woocommerce-checkout .aba-place-order:hover,
.woocommerce-checkout button#place_order:hover { background: var(--tomato); border-color: var(--tomato); color: var(--paper); }
.aba-place-order__total {
	font-family: var(--font-serif); font-size: 22px;
	letter-spacing: 0; font-weight: 500; text-transform: none;
}

/* Resumen pedido (sticky) */
.aba-order-review { position: sticky; top: 24px; }
.aba-order-review__inner {
	background: var(--paper-deep);
	border: 1px solid rgba(28,24,21,0.12);
	padding: 28px 24px;
}
.aba-order-review__title {
	font-family: var(--font-serif);
	font-size: 28px; font-weight: 400;
	margin: 8px 0 18px; line-height: 1;
}
.aba-order-review__title em { font-style: italic; }
.aba-order-review__items { list-style: none; padding: 0; margin: 0; }
.aba-order-review__item {
	display: grid; grid-template-columns: 60px 1fr auto;
	gap: 14px; padding: 14px 0;
	border-bottom: 1px solid rgba(28,24,21,0.1);
	align-items: center;
}
.aba-order-review__media {
	width: 60px; aspect-ratio: 3 / 2;
	background: var(--paper); overflow: hidden;
}
.aba-order-review__media img { width: 100%; height: 100%; object-fit: contain; }
/* Qty inline en el nombre (× N), más legible que un badge encima del thumb */
.aba-order-review__qty {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--tomato);
	margin-right: 6px;
	font-weight: 600;
}
.aba-order-review__name {
	font-family: var(--font-serif); font-size: 16px; line-height: 1.1;
}
.aba-order-review__variation {
	font-family: var(--font-serif); font-size: 13px;
	font-style: italic; color: var(--ink-soft); margin-top: 2px;
}
.aba-order-review__price { font-family: var(--font-serif); font-size: 16px; }
.aba-order-review__totals { margin-top: 16px; }
.aba-order-review__row {
	display: flex; justify-content: space-between;
	padding: 8px 0;
	font-family: var(--font-serif); font-size: 16px; color: var(--ink-soft);
}
.aba-order-review__total {
	margin-top: 14px; padding-top: 16px;
	border-top: 1.5px solid var(--ink);
	display: flex; justify-content: space-between; align-items: baseline;
}
.aba-order-review__total .lbl {
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.22em; text-transform: uppercase;
}
.aba-order-review__total .amt {
	font-family: var(--font-serif); font-size: 36px; font-weight: 500;
}
.aba-order-review__quote {
	margin-top: 14px; padding: 14px 18px;
	background: var(--mustard);
	font-family: var(--font-serif); font-style: italic;
	font-size: 16px; line-height: 1.4; color: var(--ink);
}

/* 9.5 Mi cuenta (shortcode [woocommerce_my_account])
   --------------------------------------------------------------------------
   El shortcode genera: <div class="woocommerce"> → <nav class="woocommerce-MyAccount-navigation"> + <div class="woocommerce-MyAccount-content">.
   No tocamos su HTML; restilamos por clases. */

.woocommerce-account .aba-main--wc .woocommerce {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 56px;
	padding: 20px var(--pad-x) 80px;
	max-width: var(--maxw);
	margin: 0 auto;
	align-items: start;
}

/* Woo por defecto les mete float izquierda/derecha; el grid no puede
   colocarlos como hijos directos si están flotando. Anulamos floats. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	max-width: none !important;
}
/* Woo añade un clearfix con ::before/::after { content: ' '; display: table }
   al wrapper .woocommerce. En un grid container esos pseudo-elementos
   cuentan como hijos implícitos del grid y descolocan el layout (nav cae
   en col 2, content en col 1 fila 2). Los neutralizamos. */
.woocommerce-account .aba-main--wc .woocommerce::before,
.woocommerce-account .aba-main--wc .woocommerce::after {
	content: none !important;
	display: none !important;
}

/* Sidebar */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	border-top: 1.5px solid var(--ink);
}
.woocommerce-MyAccount-navigation-link {
	list-style: none;
	border-bottom: 1px solid rgba(28,24,21,0.12);
}
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 14px 0;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-soft);
	transition: color 0.15s, padding 0.15s;
}
.woocommerce-MyAccount-navigation-link a:hover {
	color: var(--ink);
	padding-left: 6px;
}
.woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--tomato);
	font-weight: 600;
}
.woocommerce-MyAccount-navigation-link.is-active a::before {
	content: '— ';
	color: var(--tomato);
}

/* Content */
.woocommerce-MyAccount-content {
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.65;
	color: var(--ink);
}
.woocommerce-MyAccount-content > p { margin: 0 0 18px; }
.woocommerce-MyAccount-content > p:first-child {
	font-size: 22px; font-style: italic; color: var(--ink-soft);
	border-bottom: 1px solid rgba(28,24,21,0.12); padding-bottom: 20px; margin-bottom: 24px;
}
.woocommerce-MyAccount-content a {
	color: var(--tomato);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-MyAccount-content a:hover { color: var(--tomato-deep); }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: 400;
	margin: 32px 0 16px;
	letter-spacing: -0.01em;
}

/* Tablas (pedidos, descargas, direcciones) */
.woocommerce-MyAccount-content table,
.woocommerce-MyAccount-content .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-serif);
	font-size: 15px;
	margin-bottom: 28px;
}
.woocommerce-MyAccount-content table th {
	text-align: left;
	padding: 14px 8px;
	border-bottom: 1.5px solid var(--ink);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.woocommerce-MyAccount-content table td {
	padding: 18px 8px;
	border-bottom: 1px solid rgba(28,24,21,0.12);
	vertical-align: middle;
}
.woocommerce-MyAccount-content table .button {
	display: inline-block;
	padding: 8px 14px;
	background: var(--ink); color: var(--paper);
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.18em; text-transform: uppercase;
	border: 1.5px solid var(--ink); border-radius: 0;
	margin-right: 6px;
	text-decoration: none;
}
.woocommerce-MyAccount-content table .button:hover {
	background: var(--tomato); border-color: var(--tomato);
}

/* Direcciones (cards)
   Woo aplica .col2-set y .col-1 / .col-2 con float: left + width %, lo que
   saca las cards del grid normal y deja cada una a 50% (240px) con
   layouts raros. Anulamos floats y width forzados. También el clearfix
   de Woo en .u-columns (::before/::after table) crea hijos del grid
   extra → lo neutralizamos como en my-account. */
.woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.woocommerce-Addresses::before,
.woocommerce-Addresses::after {
	content: none !important;
	display: none !important;
}
.woocommerce-Address {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	background: var(--paper-deep);
	padding: 24px;
	border: 1px solid rgba(28,24,21,0.12);
}
.woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 14px;
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-size: 24px;
	margin: 0;
	font-style: italic;
	line-height: 1.05;
}
.woocommerce-Address-title .edit {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tomato);
	text-decoration: none;
	border-bottom: 1.5px solid var(--tomato);
	padding-bottom: 2px;
	align-self: flex-start;
}
.woocommerce-Address-title .edit:hover {
	color: var(--tomato-deep);
	border-bottom-color: var(--tomato-deep);
}
.woocommerce-Address address {
	font-family: var(--font-serif); font-style: normal; font-size: 16px;
	line-height: 1.55; color: var(--ink-soft);
}

/* Formularios (editar dirección, detalles, login/registro) */
.woocommerce-MyAccount-content .woocommerce-form,
.woocommerce-MyAccount-content form {
	max-width: 560px;
}
.woocommerce-MyAccount-content form .form-row,
.woocommerce-MyAccount-content form p { margin-bottom: 14px; }
.woocommerce-MyAccount-content label,
.woocommerce-MyAccount-content .woocommerce-form-row label {
	display: block;
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--ink-mute); margin-bottom: 6px;
}
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content textarea,
.woocommerce-MyAccount-content select {
	width: 100%;
	padding: 12px 14px;
	background: var(--paper);
	border: 1px solid rgba(28,24,21,0.3);
	font-family: var(--font-serif); font-size: 16px; color: var(--ink);
}
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .button {
	display: inline-block;
	padding: 14px 22px;
	background: var(--ink); color: var(--paper);
	font-family: var(--font-sans); font-size: 13px;
	letter-spacing: 0.2em; text-transform: uppercase;
	font-weight: 400;
	border: 1.5px solid var(--ink); border-radius: 0;
	text-shadow: none;
	transition: background 0.15s, border-color 0.15s;
	cursor: pointer;
	text-decoration: none;
}
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .button:hover {
	background: var(--tomato); border-color: var(--tomato); color: var(--paper);
}

/* Login + registro (cuando no está logueado) */
.woocommerce-account:not(.logged-in) .aba-main--wc .woocommerce .woocommerce-MyAccount-navigation { display: none; }
.woocommerce-account:not(.logged-in) .aba-main--wc .woocommerce {
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	max-width: 960px;
}
.woocommerce-account:not(.logged-in) .woocommerce > h2,
.u-columns h2 {
	font-family: var(--font-serif); font-size: 32px; font-weight: 400; margin: 0 0 18px;
}
.woocommerce-account:not(.logged-in) .woocommerce > h2 em { font-style: italic; }

@media (max-width: 1023px) {
	.woocommerce-account .aba-main--wc .woocommerce {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 12px var(--pad-x) 60px;
	}
	.woocommerce-Addresses { grid-template-columns: 1fr; }
	.woocommerce-account:not(.logged-in) .aba-main--wc .woocommerce {
		grid-template-columns: 1fr;
	}
}

/* 9.6 Drawer del carrito (mini-cart lateral)
   --------------------------------------------------------------------------
   Se muestra al añadir un producto al carrito. Su contenido vive en un
   .widget_shopping_cart_content que WC refresca vía fragment AJAX (ver
   functions.php). */

.aba-drawer-backdrop {
	position: fixed; inset: 0;
	background: rgba(28, 24, 21, 0.45);
	z-index: 200;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.aba-drawer-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.aba-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(440px, 100vw);
	background: var(--paper);
	z-index: 201;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex; flex-direction: column;
	box-shadow: -10px 0 40px rgba(28, 24, 21, 0.18);
	overflow: hidden;
}
.aba-drawer.is-open {
	transform: translateX(0);
}
.aba-drawer[aria-hidden="true"]:not(.is-open) {
	visibility: hidden;
}
.aba-drawer.is-open { visibility: visible; }

.aba-drawer__head {
	display: flex; justify-content: space-between; align-items: flex-start;
	padding: 28px 28px 18px;
	border-bottom: 1px solid rgba(28, 24, 21, 0.12);
	gap: 16px;
}
.aba-drawer__title {
	font-family: var(--font-serif);
	font-size: 32px; font-weight: 400; line-height: 1.05;
	margin: 6px 0 0;
	letter-spacing: -0.01em;
}
.aba-drawer__title em { font-style: italic; color: var(--tomato); }

.aba-drawer__close {
	width: 36px; height: 36px;
	position: relative;
	border: 1px solid rgba(28, 24, 21, 0.2);
	border-radius: 50%;
	flex-shrink: 0;
	transition: border-color 0.15s, background 0.15s;
}
.aba-drawer__close:hover { border-color: var(--ink); background: var(--ink); }
.aba-drawer__close:hover span { background: var(--paper); }
.aba-drawer__close span {
	position: absolute; top: 50%; left: 8px; right: 8px; height: 1.5px;
	background: var(--ink);
	transition: background 0.15s;
}
.aba-drawer__close span:first-child { transform: rotate(45deg); }
.aba-drawer__close span:last-child  { transform: rotate(-45deg); }

.aba-drawer .widget_shopping_cart_content {
	flex: 1; min-height: 0;
	display: flex; flex-direction: column;
}
.aba-drawer .aba-mini-cart {
	flex: 1; min-height: 0;
	display: flex; flex-direction: column;
}

.aba-mini-cart__list {
	list-style: none; padding: 0; margin: 0;
	overflow-y: auto;
	flex: 1;
	padding: 8px 28px;
}
.aba-mini-cart__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(28, 24, 21, 0.1);
	align-items: center;
}
.aba-mini-cart__item:last-child { border-bottom: 0; }
.aba-mini-cart__thumb {
	display: block; width: 64px; aspect-ratio: 3 / 2;
	background: var(--paper-deep); overflow: hidden;
}
.aba-mini-cart__thumb img { width: 100%; height: 100%; object-fit: contain; }
.aba-mini-cart__name {
	font-family: var(--font-serif); font-size: 16px;
	line-height: 1.2; color: var(--ink); display: block;
	margin-bottom: 4px;
}
.aba-mini-cart__name:hover { color: var(--tomato); }
.aba-mini-cart__meta {
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.18em; color: var(--ink-mute); text-transform: uppercase;
}
.aba-mini-cart__remove {
	font-family: var(--font-mono); font-size: 18px;
	color: var(--ink-mute);
	width: 28px; height: 28px;
	display: flex; align-items: center; justify-content: center;
	transition: color 0.15s;
}
.aba-mini-cart__remove:hover { color: var(--tomato); }

.aba-mini-cart__totals {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 18px 28px;
	background: var(--paper-deep);
	border-top: 1px solid rgba(28, 24, 21, 0.12);
	font-family: var(--font-serif);
}
.aba-mini-cart__totals > span:first-child {
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--ink-soft);
}
.aba-mini-cart__totals > span:last-child {
	font-size: 24px; font-weight: 500;
}
.aba-mini-cart__totals .woocommerce-Price-amount { font-size: 24px; font-weight: 500; }

.aba-mini-cart__buttons {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
	padding: 16px 28px 24px;
	background: var(--paper);
	border-top: 1px solid rgba(28, 24, 21, 0.08);
}
.aba-mini-cart__buttons .aba-btn-outline,
.aba-mini-cart__buttons .aba-btn-solid {
	padding: 14px 16px;
	font-size: 11px;
	letter-spacing: 0.18em;
}

.aba-mini-cart__empty {
	padding: 40px 28px;
	font-family: var(--font-hand);
	font-size: 22px; color: var(--ink-soft); text-align: center;
}

@media (max-width: 480px) {
	.aba-drawer__head { padding: 20px 22px 14px; }
	.aba-drawer__title { font-size: 24px; }
	.aba-mini-cart__list { padding: 4px 22px; }
	.aba-mini-cart__totals,
	.aba-mini-cart__buttons { padding-left: 22px; padding-right: 22px; }
}

/* Bloquear scroll del body cuando el drawer está abierto */
body.aba-drawer-open { overflow: hidden; }

/* 10. Páginas estándar
   -------------------------------------------------------------------------- */
.aba-page-shell { max-width: 800px; margin: 0 auto; padding: 80px var(--pad-x); }
.aba-page-shell h1 {
	font-family: var(--font-serif); font-size: clamp(40px, 5vw, 64px);
	font-weight: 400; line-height: 1; margin: 12px 0 24px; letter-spacing: -0.015em;
}
.aba-page-shell h1 em { font-style: italic; color: var(--tomato); }
.aba-page-shell p, .aba-page-shell li {
	font-family: var(--font-serif); font-size: 19px; line-height: 1.7; color: var(--ink-soft);
}
.aba-page-shell h2 { font-size: 32px; margin: 40px 0 12px; }
.aba-page-shell h3 { font-size: 24px; margin: 28px 0 8px; }
.aba-page-shell a { color: var(--tomato); text-decoration: underline; text-underline-offset: 3px; }

/* Contenido legal (privacidad, aviso legal, cookies). El HTML viene con
   secciones numeradas, tablas de cookies y una ficha <dl> del responsable. */
.aba-page-shell__body > section { margin: 0 0 48px; }
.aba-page-shell h2 > span,
.aba-page-shell h3 > span {
	font-family: var(--font-mono); font-size: 0.55em; color: var(--tomato);
	margin-right: 10px; vertical-align: middle;
}
.aba-page-shell ul, .aba-page-shell ol { padding-left: 24px; margin: 12px 0; }
.aba-page-shell li { margin-bottom: 8px; }
.aba-page-shell strong { color: var(--ink); font-weight: 600; }
.aba-page-shell code {
	font-family: var(--font-mono); font-size: 0.88em;
	background: var(--paper-deep); padding: 2px 6px; border-radius: 3px;
}

/* Ficha del responsable */
.aba-page-shell dl { margin: 0; }
.aba-page-shell dl > div {
	display: grid; grid-template-columns: 200px 1fr; gap: 12px;
	padding: 12px 0; border-top: 1px solid var(--ink-faded);
}
.aba-page-shell dt {
	font-family: var(--font-sans); font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute);
	align-self: center;
}
.aba-page-shell dd {
	margin: 0; font-family: var(--font-serif); font-size: 19px; color: var(--ink-soft);
}

/* Tablas de cookies — con scroll propio en móvil, sin romper la página */
.aba-page-shell table {
	width: 100%; border-collapse: collapse; margin: 20px 0;
	font-family: var(--font-sans); font-size: 15px;
}
.aba-page-shell table th {
	text-align: left; padding: 12px; background: var(--paper-deep);
	font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute);
}
.aba-page-shell table td {
	padding: 12px; border-top: 1px solid var(--ink-faded);
	color: var(--ink-soft); vertical-align: top;
}

@media (max-width: 700px) {
	.aba-page-shell dl > div { grid-template-columns: 1fr; gap: 4px; }
	.aba-page-shell table { display: block; overflow-x: auto; }
}

.aba-404 { text-align: center; padding: 100px var(--pad-x); }
.aba-404 h1 { font-size: clamp(60px, 10vw, 120px); margin: 0; }
.aba-404 p { font-family: var(--font-hand); font-size: 28px; color: var(--ink-soft); margin: 18px 0 32px; }

/* WooCommerce messages */
.woocommerce-notices-wrapper { padding: 0 var(--pad-x); max-width: var(--maxw); margin: 0 auto; }
/* Dentro de Mi cuenta el wrapper ya va dentro de la columna de contenido:
   sin el gutter de pagina, para que el aviso quede alineado con el formulario. */
.woocommerce-MyAccount-content .woocommerce-notices-wrapper { padding: 0; max-width: none; margin: 0; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	position: relative;
	padding: 16px 22px;
	margin: 18px 0;
	/* Reseteo de los border-top/right/bottom azules que Woo añade en su CSS.
	   Solo nos queda el border-left editorial. */
	border: 0;
	border-left: 3px solid var(--tomato);
	background: var(--paper-soft);
	font-family: var(--font-serif); font-size: 16px;
	list-style: none;
}
/* El CSS por defecto de Woo pinta un check (icon font) en ::before con
   position: absolute, que se solapa con el texto si dejamos poco padding.
   Lo neutralizamos para mantener nuestro estilo editorial limpio. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none !important; display: none !important; }
.woocommerce-error { border-left-color: var(--tomato-deep); background: rgba(199,58,42,0.06); color: var(--tomato-deep); }
.woocommerce-message { border-left-color: var(--mustard-deep); }
.woocommerce-info { border-left-color: var(--ink-soft); }
/* Botón dentro de avisos Woo (vacío de pedidos, descargas, info varios).
   Sube especificidad + !important para neutralizar el .wp-element-button
   y .woocommerce-Button de Woo. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-info a.woocommerce-Button,
.woocommerce-info a.button,
a.woocommerce-Button.button {
	margin-left: 14px;
	padding: 10px 18px !important;
	background: var(--ink) !important;
	color: var(--paper) !important;
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	font-weight: 400 !important;
	border: 1.5px solid var(--ink) !important;
	border-radius: 0 !important;
	text-shadow: none !important;
	text-decoration: none !important;
	display: inline-block;
	transition: background 0.15s, border-color 0.15s;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover,
a.woocommerce-Button.button:hover {
	background: var(--tomato) !important;
	border-color: var(--tomato) !important;
	color: var(--paper) !important;
}

/* 11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.aba-products { grid-template-columns: repeat(3, 1fr); }
	.aba-prod-editorial { grid-template-columns: 1fr 1.4fr; }
	.aba-prod-editorial__aside { display: none; }
}

@media (max-width: 1023px) {
	.aba-nav__inner { grid-template-columns: auto 1fr auto; padding: 10px var(--pad-x); }
	.aba-nav__burger { display: flex; }
	.aba-nav__menu { display: none; }
	.aba-nav__brand { justify-self: center; }
	.aba-nav__brand img, .aba-logo img { max-width: 180px; max-height: 76px; }
	.aba-logo__sub { display: none; }
	.aba-nav__tools { gap: 12px; }
	.aba-nav__tool-label { display: none; }
	.aba-nav__tool--hide-mobile { display: none; }
	.aba-nav__cart { padding: 6px 12px; }

	.aba-hero { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--pad-x); }
	.aba-product { grid-template-columns: 1fr; gap: 28px; padding: 8px var(--pad-x) 40px; }
	.aba-prod-editorial { grid-template-columns: 1fr; gap: 24px; padding: 50px var(--pad-x); }
	.aba-prod-attrs__grid { grid-template-columns: 1fr; }
	.aba-prod-attrs__row--left { padding-right: 0; border-right: 0; }
	.aba-prod-attrs__row--right { padding-left: 0; }

	.aba-cart { grid-template-columns: 1fr; gap: 28px; padding: 16px var(--pad-x) 110px; }
	.aba-cart > .aba-cart__items,
	.aba-cart > .aba-cart__main-actions,
	.aba-cart > .aba-cart__summary { grid-column: 1; grid-row: auto; }
	.aba-cart__summary { position: static; }
	.aba-cart__head { display: none; }
	/* Layout móvil: imagen a la izquierda (2 filas), arriba derecha el nombre
	   y la × ; abajo derecha qty + precio en flex horizontal. */
	.aba-cart__row {
		grid-template-columns: 84px 1fr auto;
		grid-template-rows: auto auto;
		grid-template-areas:
			"media info  remove"
			"media qty   price";
		gap: 12px;
		align-items: start;
	}
	.aba-cart__row > .aba-cart__media   { width: 84px; }
	.aba-cart__row > .aba-cart__qty-cell { align-self: center; justify-self: start; }
	.aba-cart__row > .aba-cart__line-price { align-self: center; justify-self: end; font-size: 18px; }
	.aba-cart__row > .aba-cart__remove  { font-size: 18px; }

	.aba-checkout { grid-template-columns: 1fr; gap: 24px; padding: 16px var(--pad-x) 100px; }
	.aba-order-review { position: static; order: -1; }

	.aba-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
	.aba-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
	.aba-products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.aba-card__title { font-size: 18px; }
	.aba-card__subtitle { font-size: 13px; }
	.aba-card__price { font-size: 18px; }
	.aba-card__cta {
		width: 36px; height: 36px; border-bottom: 0;
		background: var(--ink); color: var(--paper);
		font-size: 0;
		display: inline-flex; align-items: center; justify-content: center;
		padding-bottom: 0;
		transition: background 0.15s;
	}
	.aba-card__cta::after {
		content: '+'; font-size: 22px; font-family: var(--font-serif);
		line-height: 1;
	}
	.aba-card__cta:hover { background: var(--tomato); }
	.aba-card__cta.loading { background: var(--ink-mute); }
	.aba-card__cta.loading::after { content: ''; }
	.aba-card__cta.loading::before {
		content: ''; display: block;
		width: 12px; height: 12px;
		border: 1.5px solid var(--paper); border-top-color: transparent;
		border-radius: 50%;
		animation: aba-spin 0.7s linear infinite;
	}
	.aba-card__cta.added { background: var(--tomato); }
	.aba-card__cta.added::after { content: '✓'; font-size: 16px; }
	.aba-card__cta.added::before { content: none; }

	.aba-section { padding: 36px var(--pad-x); }

	.aba-hero { padding: 32px var(--pad-x) 28px; }
	.aba-hero__media { display: none; }
	.aba-hero__strap {
		margin-top: 22px;
		padding: 14px 16px;
		background: var(--mustard);
		font-family: var(--font-mono); font-size: 10px;
		letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
	}

	.aba-product__title { font-size: 44px; }
	.aba-product__price { font-size: 36px; }
	.aba-product__note { font-size: 20px; }

	/* CTA flotante */
	.aba-sticky-cta {
		display: grid;
		position: fixed; bottom: 0; left: 0; right: 0;
		padding: 12px var(--pad-x);
		background: var(--paper);
		border-top: 1px solid rgba(28,24,21,0.16);
		grid-template-columns: auto 1fr; gap: 10px;
		z-index: 60;
	}
	.aba-sticky-cta .aba-qty { padding: 10px 14px; }
	.body--has-sticky { padding-bottom: 80px; }

	.aba-cart-hero h1 { font-size: 50px; }
	.aba-cart__coupon { flex-direction: column; align-items: stretch; }
	.aba-cart__coupon-form input { flex: 1; }

	.aba-checkout-hero h1 { font-size: 44px; }
	.aba-formblock__title { font-size: 19px; }
	.aba-checkout .form-row-first,
	.aba-checkout .form-row-last { width: 100%; float: none; margin-right: 0; }
}

@media (max-width: 480px) {
	.aba-products { grid-template-columns: 1fr; }
	.aba-footer__cols { grid-template-columns: 1fr; }
	.aba-footer__bar { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}


/* --- Acceder / Registrarse (Mi cuenta sin sesion) ---------------------------
   Sin sesion no hay navegacion de cuenta, asi que la rejilla de dos columnas
   de Mi cuenta dejaba el wrapper de avisos ocupando la primera columna y
   empujaba el bloque de login hacia la derecha. Ademas el formulario venia
   sin estilar, con los defaults de WooCommerce. */
.woocommerce-account .aba-main--wc .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .aba-main--wc .woocommerce > #customer_login { grid-column: 1 / -1; }

/* Los clearfix ::before/::after de .col2-set se cuelan como items de la rejilla. */
#customer_login::before,
#customer_login::after { content: none !important; display: none !important; }

#customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	max-width: 920px;
	margin: 0 auto;
	align-items: stretch;
}
#customer_login .col-1,
#customer_login .col-2 { float: none; width: auto; display: flex; flex-direction: column; }

#customer_login h2 { font-family: var(--font-serif); font-size: 30px; font-style: italic; margin: 0 0 18px; }

#customer_login form.login,
#customer_login form.register {
	border: 1px solid rgba(28, 24, 21, .12);
	background: var(--paper-soft);
	padding: 28px;
	margin: 0;
	flex: 1;
}
#customer_login .form-row { margin: 0 0 18px; }
#customer_login label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .22em;
	color: var(--ink-mute);
	text-transform: uppercase;
	margin-bottom: 6px;
}
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	background: var(--paper);
	border: 1px solid rgba(28, 24, 21, .3);
	font-family: var(--font-serif);
	font-size: 16px;
	color: var(--ink);
}
#customer_login .password-input { display: block; position: relative; }
#customer_login .show-password-input { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
#customer_login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-soft);
}
#customer_login .woocommerce-form-login__rememberme input { width: auto; margin: 0; }
#customer_login .button {
	display: block;
	width: 100%;
	padding: 16px 28px;
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	background: var(--ink);
	color: var(--paper);
	border: 1.5px solid var(--ink);
	cursor: pointer;
	transition: background .2s, border-color .2s;
}
#customer_login .button:hover { background: var(--tomato); border-color: var(--tomato); }
#customer_login .woocommerce-LostPassword { margin: 14px 0 0; font-family: var(--font-sans); font-size: 13px; }
#customer_login form.register > p,
#customer_login .woocommerce-privacy-policy-text p {
	font-family: var(--font-serif);
	font-size: 15px;
	color: var(--ink-soft);
	margin: 0 0 18px;
}

@media (max-width: 720px) {
	#customer_login { grid-template-columns: 1fr; gap: 28px; }
}