/*
Theme Name: Soulmusik Modernist
Theme URI: https://tienda.soulmusikrecords.com.ar
Template: soulmusik
Author: SoulMusik Records
Description: Child theme de Soulmusik. Estetica alineada con Klamp (proyecto hermano de SoulMusik): fondo crema calido, tarjetas blancas redondeadas, bordes finos, acento bermellon y tipografia Barlow. No modifica la logica de WooCommerce.
Version: 2.0.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: soulmusik-modernist
*/

/* ==========================================================================
   1. TOKENS — tomados del tema claro de Klamp (web-hostinger/publico/assets)
   ========================================================================== */
:root {
	/* Superficies */
	--iron: #f6f4f0;      /* fondo de pagina */
	--forge: #ffffff;     /* tarjetas */
	--forge-2: #f1eee8;   /* relleno sutil */
	--steel: #e3ded5;     /* borde fino */
	--steel-2: #d2ccc1;   /* borde marcado */

	/* Tinta */
	--chalk: #17161a;
	--gray: #6e6862;
	--gray-2: #9a948c;

	/* Acentos */
	--rust: #c9421a;
	--rust-hi: #e4562a;
	--rust-dim: #c9421a14;
	--amber: #b57900;
	--amber-dim: #b579001a;
	--green: #2f855a;

	/* Sombras suaves */
	--sombra: 0 10px 30px #1e19141a;
	--sombra-sm: 0 1px 4px #1e191412;

	/* Radios */
	--r: 14px;
	--r-sm: 10px;
	--r-xs: 8px;
	--r-pill: 999px;

	/* Tipografia */
	--display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
	--texto: "Barlow", -apple-system, system-ui, sans-serif;

	/* Layout */
	--velo: #f6f4f0e0;
	--max: 1180px;
	--pad-x: clamp(16px, 4vw, 28px);

	/* Alias que consume el theme padre */
	--bg: var(--iron);
	--surface: var(--forge);
	--ink: var(--chalk);
	--ink-soft: var(--gray);
	--muted: var(--gray);
	--line: var(--steel);
	--coral: var(--rust);
	--grad: var(--rust);
	--radius: var(--r);
	--shadow: var(--sombra-sm);
	--shadow-lift: var(--sombra);
	--font-head: var(--display);
	--font-body: var(--texto);

	--sp-1: 8px;
	--sp-2: 16px;
	--sp-3: 24px;
	--sp-4: 32px;
	--sp-5: 48px;
	--sp-6: 64px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
	background: var(--iron);
	color: var(--chalk);
	font-family: var(--texto);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* El padre deja manchas borrosas de color en el hero */
.hero::before, .hero::after { display: none !important; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

:focus-visible {
	outline: 2px solid var(--rust);
	outline-offset: 2px;
}

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

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	font-weight: 700;
	color: var(--chalk);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 var(--sp-2);
	text-wrap: balance;
}

/* Rotulo chico en bermellon, la firma de Klamp */
.sm-eyebrow,
.sm-kicker {
	display: block;
	font-family: var(--display);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--rust);
	margin-bottom: var(--sp-1);
}

.sm-meta {
	font-family: var(--display);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gray);
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container,
.sm-wrap {
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin-inline: auto;
}

.sm-seccion { padding: clamp(40px, 6vw, 72px) 0; }
.sm-seccion--tono { background: var(--forge); border-block: 1px solid var(--steel); }

.sm-seccion__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
	margin-bottom: var(--sp-4);
}
.sm-seccion__head h2 {
	font-size: clamp(24px, 3.2vw, 36px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0;
}

/* Botones: pastilla bermellon con sombra suave */
.sm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--texto);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
	background: var(--rust);
	border: 1px solid var(--rust);
	border-radius: var(--r-pill);
	padding: 12px 24px;
	box-shadow: var(--sombra-sm);
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s, transform 60ms, box-shadow .15s;
}
.sm-btn:hover { background: var(--rust-hi); border-color: var(--rust-hi); color: #fff; }
.sm-btn:active { transform: translateY(1px); }

.sm-btn--linea {
	background: transparent;
	color: var(--chalk);
	border-color: var(--steel-2);
	box-shadow: none;
}
.sm-btn--linea:hover { background: var(--forge-2); border-color: var(--gray-2); color: var(--chalk); }

/* Tags pastilla */
.sm-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--texto);
	font-size: .71rem;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--gray);
	background: none;
	border: 1px solid var(--steel-2);
	border-radius: var(--r-pill);
	padding: 3px 10px;
	white-space: nowrap;
}
.sm-tag--rust { color: var(--rust); border-color: #c9421a73; background: var(--rust-dim); }
.sm-tag--amber { color: var(--amber); border-color: #b5790073; background: var(--amber-dim); }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	margin: 0;
	background: var(--velo);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--steel);
}

.sm-bar {
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	min-height: 62px;
}

/* Segunda fila con las categorias, como la barra de un marketplace */
.sm-bar--nav {
	min-height: 0;
	padding-bottom: 8px;
	justify-content: flex-start;
}
.sm-bar--nav .main-nav { justify-content: flex-start; }

.sm-marca { display: flex; align-items: center; gap: 10px; flex: none; }
.site-logo img { height: 26px; width: auto; display: block; }

.sm-badge {
	font-family: var(--display);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gray-2);
	padding-left: 10px;
	border-left: 1px solid var(--steel-2);
	white-space: nowrap;
}

.main-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }

/* ---- Buscador ---- */
.sm-buscador {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	align-items: center;
	background: var(--forge);
	border: 1px solid var(--steel-2);
	border-radius: var(--r-pill);
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.sm-buscador:focus-within { border-color: var(--rust); box-shadow: 0 0 0 3px var(--rust-dim); }
.sm-buscador input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--texto);
	font-size: .92rem;
	color: var(--chalk);
	padding: 10px 6px 10px 18px;
	appearance: none;
}
.sm-buscador input[type="search"]:focus { outline: none; }
.sm-buscador input::placeholder { color: var(--gray-2); }
.sm-buscador button {
	flex: none;
	border: 0;
	background: transparent;
	color: var(--gray);
	cursor: pointer;
	padding: 8px 16px 8px 8px;
	display: grid;
	place-items: center;
	transition: color .15s;
}
.sm-buscador button:hover { color: var(--rust); }
.sm-buscador svg { width: 18px; height: 18px; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.header-actions { display: flex; align-items: center; gap: var(--sp-1); flex: none; }

.sm-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--rust);
	color: #fff;
	font-family: var(--texto);
	font-size: .85rem;
	font-weight: 600;
	border: 1px solid var(--rust);
	border-radius: var(--r-pill);
	padding: 9px 18px;
	box-shadow: var(--sombra-sm);
	transition: background .15s, border-color .15s;
}
.sm-cta:hover { background: var(--rust-hi); border-color: var(--rust-hi); color: #fff; }
.sm-cta svg { width: 15px; height: 15px; flex: none; }

.cart-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	border: 1px solid var(--steel-2);
	border-radius: var(--r-pill);
	color: var(--chalk);
	font-family: var(--texto);
	font-size: .85rem;
	font-weight: 600;
	padding: 8px 15px;
	box-shadow: none;
	transition: border-color .15s, background .15s;
}
.cart-pill:hover { border-color: var(--rust); background: var(--rust-dim); color: var(--chalk); transform: none; box-shadow: none; }
.cart-pill svg { width: 16px; height: 16px; }
.cart-pill .count {
	background: var(--rust);
	color: #fff;
	border-radius: var(--r-pill);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
	padding: 3px 7px;
}

.sm-skip {
	position: absolute;
	left: -9999px;
	background: var(--chalk);
	color: #fff;
	border-radius: var(--r-xs);
	font-size: 13px;
	padding: 10px 16px;
	z-index: 200;
}
.sm-skip:focus { left: 12px; top: 12px; }

/* ==========================================================================
   6. NAV — enlaces y desplegables
   ========================================================================== */
.sm-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2px;
}
/* `.main-nav > ul.sm-menu` y no `.sm-menu`: el padre agrego un bloque de mega
   menu (2026-09-02) con `.main-nav > ul > li { position: static }`, que le
   ganaba en especificidad y hacia que los desplegables se abrieran pegados al
   borde izquierdo de la pantalla en vez de debajo de su categoria. */
.main-nav > ul.sm-menu > li { position: relative; display: flex; align-items: center; }

.sm-menu > li > a {
	font-family: var(--texto);
	font-size: .88rem;
	font-weight: 500;
	color: var(--gray);
	padding: 8px 12px;
	border-radius: var(--r-pill);
	white-space: nowrap;
	transition: color .15s, background .15s;
}
.sm-menu > li > a:hover,
.sm-menu > li.abierto > a { color: var(--chalk); background: var(--forge-2); }

/* El area de click era de 20x28: demasiado chica para apuntarle. */
.sm-sub-toggle {
	appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	width: 30px;
	height: 36px;
	padding: 0;
	margin-left: -6px;
	position: relative;
	border-radius: var(--r-pill);
	transition: background .12s;
}
.sm-sub-toggle:hover { background: var(--forge-2); }
.sm-sub-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--gray);
	border-bottom: 1.5px solid var(--gray);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s;
}
.sm-has-sub.abierto .sm-sub-toggle::after { transform: translateY(1px) rotate(-135deg); }

/* El padre declara `.main-nav ul { display:flex }` con mas especificidad, asi
   que el panel se cualifica con .main-nav para poder ocultarlo. */
.main-nav .sm-sub {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 70;
	min-width: 250px;
	max-height: 70vh;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 6px;
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r-sm);
	box-shadow: var(--sombra);
}
.main-nav .sm-has-sub.abierto > .sm-sub { display: block; }

/* En desktop tambien abre al pasar el mouse: tener que apuntarle al chevron
   para ver una categoria es lo que se sentia raro. El puente invisible evita
   que el panel se cierre al cruzar el hueco de 6px entre el item y el panel. */
@media (hover: hover) and (min-width: 901px) {
	.main-nav .sm-has-sub:hover > .sm-sub,
	.main-nav .sm-has-sub:focus-within > .sm-sub { display: block; }
	.main-nav .sm-has-sub.sm-sin-hover:hover > .sm-sub { display: none; }

	.main-nav .sm-has-sub::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 8px;
	}
}

/* Si el desplegable no entra a la derecha, se alinea al borde del item. */
.main-nav .sm-has-sub.sm-sub--derecha > .sm-sub { left: auto; right: 0; }
.main-nav .sm-sub li { display: block; width: 100%; }
.main-nav .sm-sub a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	font-size: .86rem;
	font-weight: 500;
	color: var(--chalk);
	padding: 9px 12px;
	border-radius: var(--r-xs);
	transition: background .12s;
}
.main-nav .sm-sub a:hover { background: var(--forge-2); color: var(--rust); }
.main-nav .sm-sub .n { font-size: .72rem; color: var(--gray-2); }

.sm-burger {
	display: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--steel-2);
	border-radius: var(--r-pill);
	cursor: pointer;
	width: 40px;
	height: 40px;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.sm-burger span { display: block; width: 16px; height: 1.5px; background: var(--chalk); border-radius: 2px; }

/* ==========================================================================
   7. HERO — centrado, como la portada de Klamp
   ========================================================================== */
.sm-hero {
	text-align: center;
	padding: clamp(44px, 7vw, 84px) 0 clamp(32px, 4vw, 48px);
	background:
		radial-gradient(80% 120% at 50% -10%, #c9421a0f 0%, transparent 60%),
		var(--iron);
}

.sm-hero__texto {
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
}

.sm-hero .sm-eyebrow { margin-bottom: 0; }

.sm-hero h1 {
	font-size: clamp(34px, 5.6vw, 62px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0;
	max-width: 16ch;
}
.sm-hero h1 em { font-style: normal; color: var(--rust); }

.sm-lead {
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.6;
	color: var(--gray);
	max-width: 62ch;
	margin: 0;
}

.sm-hero__acciones { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; }

/* Fila de metricas */
.sm-metricas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--sp-3);
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin: var(--sp-4) auto 0;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--steel);
}
.sm-metrica { text-align: center; }
.sm-metrica dt {
	font-family: var(--display);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 700;
	color: var(--rust);
	line-height: 1;
}
.sm-metrica dd {
	margin: 6px 0 0;
	font-family: var(--display);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gray);
}

/* Franja de garantias */
.sm-franja {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-2);
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin-inline: auto;
}
.sm-franja > div {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r);
	padding: 16px 18px;
	font-size: .92rem;
	font-weight: 600;
}
.sm-franja .sm-num {
	font-family: var(--display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--rust);
	background: var(--rust-dim);
	border-radius: var(--r-pill);
	padding: 4px 9px;
	flex: none;
}

/* ==========================================================================
   8. GRILLA Y TARJETA DE PRODUCTO
   ========================================================================== */
.woo-main { padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 7vw, 80px); }

.woo-main > h1.page-title,
.woocommerce-products-header,
.woo-main > .woocommerce-notices-wrapper,
.woo-main > .term-description,
.woocommerce-breadcrumb,
.woo-main .woocommerce-result-count,
.woo-main .woocommerce-ordering,
.woo-main nav.woocommerce-pagination,
.sm-filtros,
ul.products {
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin-inline: auto;
}

.woo-main > h1.page-title,
.woocommerce-products-header h1 {
	font-size: clamp(26px, 3.6vw, 40px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: var(--sp-2);
}

ul.products,
ul.products.sm-grid {
	display: grid !important;
	gap: var(--sp-2) !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	background: none;
	border: 0;
	padding: 0;
	list-style: none;
	margin-top: var(--sp-3);
}

ul.products li.product,
li.product.sm-card,
.woocommerce ul.products li.product {
	background: var(--forge) !important;
	border: 1px solid var(--steel) !important;
	border-radius: var(--r) !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-align: left !important;
	box-shadow: none !important;
	transition: border-color .18s, transform .18s, box-shadow .18s;
}
ul.products li.product:hover {
	border-color: var(--rust) !important;
	box-shadow: var(--sombra) !important;
	transform: translateY(-3px);
}

.sm-card__img {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--forge-2);
	overflow: hidden;
	border-bottom: 1px solid var(--steel);
}
.sm-card__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--sp-2);
	margin: 0;
	border: 0;
	box-sizing: border-box;
	mix-blend-mode: multiply;
	transition: transform .25s;
}
ul.products li.product:hover .sm-card__img img { transform: scale(1.03); }

/* Badge de tipo */
.sm-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	font-family: var(--texto);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--rust);
	background: #fff;
	border: 1px solid #c9421a5c;
	border-radius: var(--r-pill);
	padding: 3px 10px;
	max-width: calc(100% - 20px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

span.onsale {
	position: absolute;
	top: 10px;
	right: 10px;
	left: auto;
	margin: 0;
	z-index: 3;
	background: var(--rust);
	color: #fff;
	border: 0;
	border-radius: var(--r-pill);
	font-family: var(--texto);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 4px 11px;
	line-height: 1.3;
	min-height: 0;
	min-width: 0;
}

.sm-card__body {
	padding: 15px 16px 17px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
	min-width: 0;
}

.sm-card__kicker {
	font-family: var(--display);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gray-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--chalk);
	margin: 0;
	padding: 0;
	min-height: 0;
}

ul.products li.product .price {
	font-family: var(--texto) !important;
	font-size: 1rem;
	font-weight: 700;
	color: var(--chalk) !important;
	margin: auto 0 0 !important;
	padding-top: 8px;
}
ul.products li.product .price del { color: var(--gray-2); opacity: 1; font-size: .85rem; font-weight: 500; }
ul.products li.product .price ins { text-decoration: none; color: var(--rust); }

ul.products li.product .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 0;
	margin: 12px 16px 16px !important;
	background: var(--rust) !important;
	color: #fff !important;
	border: 1px solid var(--rust) !important;
	border-radius: var(--r-pill) !important;
	font-family: var(--texto) !important;
	font-weight: 600 !important;
	font-size: .85rem !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	padding: 9px 18px !important;
	box-shadow: var(--sombra-sm) !important;
	transition: background .15s, border-color .15s !important;
}
ul.products li.product .button::after { content: none; }
ul.products li.product .button:hover {
	background: var(--rust-hi) !important;
	border-color: var(--rust-hi) !important;
	color: #fff !important;
	transform: none !important;
}

/* "Leer mas" es la accion secundaria (producto sin stock): va en contorno.
   El relleno solido queda para "Agregar al carrito", que es la accion real. */
ul.products li.product a.button:not(.add_to_cart_button) {
	background: transparent !important;
	color: var(--chalk) !important;
	border-color: var(--steel-2) !important;
	box-shadow: none !important;
}
ul.products li.product a.button:not(.add_to_cart_button):hover {
	background: var(--forge-2) !important;
	border-color: var(--gray-2) !important;
	color: var(--chalk) !important;
}
ul.products li.product .added_to_cart { display: none; }

/* El clearfix de Woo se vuelve un item mas del grid y deja una celda vacia. */
ul.products::before, ul.products::after { content: none !important; display: none !important; }

/* Ordenamiento, resultados y paginacion */
.woocommerce-result-count {
	font-family: var(--display);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gray);
}
.woocommerce-ordering select,
.sm-filtros select,
.sm-filtros input[type="number"] {
	border: 1px solid var(--steel-2);
	border-radius: var(--r-pill);
	background: var(--forge);
	font-family: var(--texto);
	font-size: .88rem;
	color: var(--chalk);
	padding: 9px 16px;
}

nav.woocommerce-pagination { margin-top: var(--sp-4); }
nav.woocommerce-pagination ul { border: 0; display: flex; gap: 6px; justify-content: center; }
nav.woocommerce-pagination ul li { border: 0; }
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
	border: 1px solid var(--steel-2);
	border-radius: var(--r-pill);
	background: var(--forge);
	font-family: var(--texto);
	font-size: .88rem;
	font-weight: 600;
	min-width: 38px;
	padding: 9px 14px;
}
nav.woocommerce-pagination ul li span.current { background: var(--rust); color: #fff; border-color: var(--rust); }

.woocommerce-breadcrumb {
	font-size: .82rem;
	color: var(--gray);
	margin-bottom: var(--sp-2);
}
.woocommerce-breadcrumb a { color: var(--gray); }
.woocommerce-breadcrumb a:hover { color: var(--rust); }

/* ==========================================================================
   9. CATEGORIAS Y MARCAS
   ========================================================================== */
.sm-grid--cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: var(--sp-2);
}
.sm-cat {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 62px;
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r);
	padding: 16px 18px;
	min-width: 0;
	transition: border-color .18s, transform .18s, box-shadow .18s;
}
.sm-cat:hover {
	border-color: var(--rust);
	box-shadow: var(--sombra);
	transform: translateY(-2px);
}
.sm-cat .sm-num {
	font-family: var(--display);
	font-size: .7rem;
	font-weight: 700;
	color: var(--rust);
	background: var(--rust-dim);
	border-radius: var(--r-pill);
	padding: 4px 9px;
	flex: none;
}
.sm-cat__nombre {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--chalk);
}
.sm-cat__n {
	margin-left: auto;
	padding-left: 10px;
	font-size: .76rem;
	color: var(--gray-2);
	flex: none;
}

/* Marcas: nube de pastillas, como los tipos de servicio de Klamp */
.sm-grid--marcas { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-marca-cell {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--texto);
	font-size: .86rem;
	font-weight: 600;
	color: var(--chalk);
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r-pill);
	padding: 8px 16px;
	transition: border-color .15s, background .15s, color .15s;
}
.sm-marca-cell:hover { border-color: var(--rust); color: var(--rust); background: var(--rust-dim); }
.sm-marca-cell .n { font-size: .72rem; color: var(--gray-2); }
.sm-marca-cell:hover .n { color: var(--rust); }

/* ==========================================================================
   10. FILTROS
   ========================================================================== */
.sm-filtros {
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r);
	margin-bottom: var(--sp-3);
	overflow: hidden;
}
.sm-filtros__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	padding: 12px 18px;
	border-bottom: 1px solid var(--steel);
	background: var(--forge-2);
}
.sm-filtros__head h2 {
	font-family: var(--display);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gray);
	margin: 0;
}
.sm-filtros__reset { font-size: .8rem; font-weight: 600; color: var(--rust); }
.sm-filtros__reset:hover { text-decoration: underline; }

.sm-filtros__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--sp-2);
	padding: 18px;
}
.sm-filtros label {
	display: block;
	font-family: var(--display);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gray);
	margin-bottom: 6px;
}
.sm-filtros select,
.sm-filtros input[type="number"] { width: 100%; appearance: none; }
.sm-filtros select:focus,
.sm-filtros input[type="number"]:focus { outline: 2px solid var(--rust); outline-offset: 1px; border-color: var(--rust); }
.sm-filtros__precio { display: flex; gap: 6px; align-items: center; }
/* En el rail (236px) los inputs quedan muy angostos y el placeholder se corta:
   se les baja el padding lateral y se dejan encoger. */
.sm-filtros__precio input[type="number"] {
	min-width: 0;
	flex: 1 1 0;
	padding-inline: 10px;
	text-align: center;
}
.sm-filtros__precio span { flex: none; color: var(--gray-2); }
.sm-filtros__acciones { padding: 0 18px 18px; display: flex; gap: 8px; }
.sm-filtros button[type="submit"] {
	background: var(--rust);
	color: #fff;
	border: 1px solid var(--rust);
	border-radius: var(--r-pill);
	font-family: var(--texto);
	font-size: .88rem;
	font-weight: 600;
	padding: 10px 22px;
	cursor: pointer;
	box-shadow: var(--sombra-sm);
	transition: background .15s;
}
.sm-filtros button[type="submit"]:hover { background: var(--rust-hi); }

/* ==========================================================================
   11. FICHA DE PRODUCTO
   ========================================================================== */
.woocommerce div.product {
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin-inline: auto;
	padding: 0;
}
.woocommerce div.product div.images { width: 50%; }
.woocommerce div.product div.summary { width: 46%; }

@media (min-width: 821px) {
	/* La galeria es alta y el resumen corto: sin esto media ficha queda vacia. */
	.woocommerce div.product div.summary { position: sticky; top: 86px; align-self: start; }
}

.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images img {
	border: 1px solid var(--steel);
	border-radius: var(--r);
	background: var(--forge);
}
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; margin-top: 10px; padding: 0; }
.woocommerce div.product div.images .flex-control-thumbs li { list-style: none; width: 68px; }
.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: var(--r-sm);
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s, border-color .15s;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; border-color: var(--rust); }

.woocommerce div.product .product_title {
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-transform: none;
	margin-bottom: var(--sp-1);
}

.woocommerce div.product p.price {
	font-family: var(--texto) !important;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--chalk);
	border: 0;
	padding: 0;
	margin: 0 0 var(--sp-2);
}
.woocommerce div.product p.price del { color: var(--gray-2); font-size: 1.1rem; font-weight: 500; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--rust); }

.woocommerce div.product .stock {
	display: inline-flex;
	align-items: center;
	font-family: var(--texto);
	font-size: .76rem;
	font-weight: 600;
	color: var(--green);
	background: #2f855a14;
	border: 1px solid #2f855a5c;
	border-radius: var(--r-pill);
	padding: 4px 12px;
	margin-bottom: var(--sp-2);
}
.woocommerce div.product .stock.out-of-stock { color: var(--rust); background: var(--rust-dim); border-color: #c9421a5c; }

.woocommerce div.product form.cart div.quantity .qty {
	border: 1px solid var(--steel-2);
	border-radius: var(--r-pill);
	background: var(--forge);
	font-family: var(--texto);
	font-size: 1rem;
	padding: 11px 8px 11px 16px;
	width: 84px;
}

/* Botones generales de WooCommerce. El padre los pinta con gradiente usando
   !important, asi que hay que ganarle en el mismo terreno. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
button[name="add-to-cart"],
.single_add_to_cart_button {
	background: var(--rust) !important;
	color: #fff !important;
	border: 1px solid var(--rust) !important;
	border-radius: var(--r-pill) !important;
	font-family: var(--texto) !important;
	font-weight: 600 !important;
	font-size: .95rem !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	padding: 13px 26px !important;
	box-shadow: var(--sombra-sm) !important;
	transition: background .15s, border-color .15s !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover {
	background: var(--rust-hi) !important;
	border-color: var(--rust-hi) !important;
	color: #fff !important;
	transform: none !important;
}
.woocommerce .button.disabled, .woocommerce .button:disabled { opacity: .45; }

/* WhatsApp directo */
.sm-wsp-producto {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 10px;
	padding: 13px 22px;
	background: transparent;
	color: var(--chalk);
	border: 1px solid var(--steel-2);
	border-radius: var(--r-pill);
	font-family: var(--texto);
	font-size: .95rem;
	font-weight: 600;
	transition: border-color .15s, background .15s, color .15s;
}
.sm-wsp-producto:hover { border-color: var(--green); background: #2f855a14; color: var(--green); }
.sm-wsp-producto svg { width: 17px; height: 17px; flex: none; }

/* Tabla de specs */
.sm-specs {
	width: 100%;
	border: 1px solid var(--steel);
	border-radius: var(--r);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: var(--sp-3) 0 0;
	background: var(--forge);
}
.sm-specs caption {
	font-family: var(--display);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 16px;
	background: var(--forge-2);
	border-bottom: 1px solid var(--steel);
	color: var(--gray);
}
.sm-specs th, .sm-specs td {
	padding: 11px 16px;
	font-size: .88rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--steel);
}
.sm-specs tr:last-child th, .sm-specs tr:last-child td { border-bottom: 0; }
.sm-specs th { width: 38%; font-weight: 600; color: var(--gray); }
.sm-specs td { color: var(--chalk); }

.woocommerce div.product .product_meta {
	margin-top: var(--sp-3);
	padding-top: var(--sp-2);
	border-top: 1px solid var(--steel);
	font-size: .8rem;
	color: var(--gray);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}
.woocommerce div.product .product_meta a { color: var(--rust); }

/* Pestanas */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--sp-5); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 6px;
	margin: 0 0 var(--sp-2);
	padding: 0;
	border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none !important; content: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0; padding: 0; background: transparent; border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	font-family: var(--texto);
	font-size: .88rem;
	font-weight: 600;
	color: var(--gray);
	padding: 9px 18px;
	border: 1px solid var(--steel-2);
	border-radius: var(--r-pill);
	transition: background .15s, color .15s, border-color .15s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	background: var(--rust);
	color: #fff;
	border-color: var(--rust);
}
.woocommerce div.product .woocommerce-tabs .panel {
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r);
	padding: var(--sp-3);
	margin: 0;
}

.woocommerce div.product .related,
.woocommerce div.product .upsells { margin-top: var(--sp-5); }
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	font-size: clamp(20px, 2.4vw, 28px);
	text-transform: uppercase;
	margin-bottom: var(--sp-2);
}

/* Avisos */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--forge);
	border: 1px solid var(--steel);
	border-top: 1px solid var(--steel) !important;
	border-radius: var(--r);
	box-shadow: var(--sombra-sm);
	color: var(--chalk);
	font-size: .92rem;
}
.woocommerce-message::before { color: var(--green); }
.woocommerce-info::before, .woocommerce-error::before { color: var(--rust); }

/* ==========================================================================
   12. CARRITO Y CHECKOUT — bloques de WooCommerce
   Estas paginas son wp:woocommerce/cart y wp:woocommerce/checkout, asi que se
   estilan por CSS sobre .wc-block-*. No se toca ningun gateway.
   ========================================================================== */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { font-family: var(--texto); }

.wc-block-components-title,
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-checkout h1,
.wc-block-components-checkout-step__title {
	font-family: var(--display) !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	color: var(--chalk) !important;
	text-transform: none;
}

.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r);
	padding: var(--sp-3);
}

.wc-block-cart-items__row { border-bottom: 1px solid var(--steel); }
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border: 1px solid var(--steel);
	border-radius: var(--r-sm);
}

.wc-block-components-product-name {
	font-family: var(--display) !important;
	font-weight: 700;
	font-size: .98rem;
	color: var(--chalk) !important;
	text-transform: none;
}

.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
	font-family: var(--texto) !important;
	font-weight: 700;
	color: var(--chalk) !important;
}
.wc-block-components-totals-item { font-size: .92rem; }
.wc-block-components-totals-footer-item { border-top: 1px solid var(--steel); padding-top: var(--sp-2); font-size: 1.05rem; }

.wc-block-components-quantity-selector {
	border: 1px solid var(--steel-2) !important;
	border-radius: var(--r-pill) !important;
	background: var(--forge);
	overflow: hidden;
}
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button {
	font-family: var(--texto) !important;
	color: var(--chalk) !important;
	background: transparent;
	border: 0;
}
.wc-block-components-quantity-selector__button:hover { background: var(--forge-2); }

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select__select {
	border: 1px solid var(--steel-2) !important;
	border-radius: var(--r-sm) !important;
	background: var(--forge) !important;
	font-family: var(--texto) !important;
	font-size: .95rem !important;
	padding: 12px 14px !important;
	color: var(--chalk) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus {
	outline: 2px solid var(--rust) !important;
	outline-offset: 1px;
	border-color: var(--rust) !important;
	box-shadow: none !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__description,
.wc-blocks-components-select__label { font-family: var(--texto) !important; color: var(--gray) !important; }

/* Metodos de pago — solo presentacion, sin tocar la logica del gateway */
.wc-block-components-radio-control__option {
	border: 1px solid var(--steel);
	border-radius: var(--r-sm);
	padding: 14px 16px 14px 44px;
	margin-bottom: 8px;
	background: var(--forge);
	transition: border-color .15s, background .15s;
}
.wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--rust);
	background: var(--rust-dim);
}
.wc-block-components-radio-control__label { font-weight: 600; color: var(--chalk); }

.wc-block-components-checkout-step { border-bottom: 1px solid var(--steel); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); }

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button {
	background: var(--rust) !important;
	color: #fff !important;
	border: 1px solid var(--rust) !important;
	border-radius: var(--r-pill) !important;
	font-family: var(--texto) !important;
	font-weight: 600 !important;
	font-size: .98rem !important;
	text-transform: none !important;
	padding: 14px 26px !important;
	box-shadow: var(--sombra-sm) !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:hover { background: var(--rust-hi) !important; border-color: var(--rust-hi) !important; }

/* Resumen del pedido: sin grilla explicita la columna del medio queda angosta */
.wc-block-components-order-summary-item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: var(--sp-2);
	align-items: start;
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--steel);
}
.wc-block-components-order-summary-item:last-child { border-bottom: 0; }
.wc-block-components-order-summary-item__image { grid-column: 1; width: 48px; margin: 0; }
.wc-block-components-order-summary-item__description { grid-column: 2; min-width: 0; }
.wc-block-components-order-summary-item__total-price { grid-column: 3; text-align: right; white-space: nowrap; }
.wc-block-components-order-summary-item .wc-block-components-product-name { display: block; font-size: .9rem; margin: 0 0 4px; }
/* La descripcion larga del producto satura el resumen */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description { display: none; }
.wc-block-components-order-summary-item__individual-prices { font-size: .82rem; color: var(--gray); }
.wc-block-components-order-summary-item__quantity {
	border: 1px solid var(--steel-2);
	background: var(--forge);
	color: var(--chalk);
	border-radius: var(--r-pill);
	font-size: .7rem;
	font-weight: 700;
}

/* Tabla clasica, por si alguna vista la usa */
.woocommerce table.shop_table {
	border: 1px solid var(--steel);
	border-radius: var(--r);
	background: var(--forge);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--steel) !important; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--steel-2);
	border-radius: var(--r-sm);
	background: var(--forge);
	font-family: var(--texto);
	font-size: .95rem;
	padding: 12px 14px;
}
#payment { background: var(--forge) !important; border: 1px solid var(--steel); border-radius: var(--r); }
#payment div.payment_box { background: var(--forge-2) !important; border-radius: var(--r-sm); }
#payment div.payment_box::before { display: none; }

/* ==========================================================================
   13. PAGINAS SIMPLES
   ========================================================================== */
.page-plain { padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 7vw, 80px); }
.page-plain .entry {
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r);
	padding: clamp(22px, 4vw, 44px);
	box-shadow: none !important;
}
.page-plain .entry > h1 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: var(--sp-3); }

/* ==========================================================================
   14. BANDA DE CIERRE Y FOOTER
   ========================================================================== */
.sm-cierre {
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin: 0 auto clamp(40px, 6vw, 72px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--sp-2);
}
.sm-cierre__cta,
.sm-cierre__datos {
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r);
	padding: clamp(22px, 3vw, 32px);
}
.sm-cierre__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sm-cierre__cta h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0; }
.sm-cierre__cta p { margin: 0; color: var(--gray); font-size: .95rem; }
.sm-cierre__cta .sm-btn { margin-top: 6px; }

.sm-cierre__datos dl { margin: 0; }
.sm-dato {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2);
	padding: 11px 0;
	border-bottom: 1px solid var(--steel);
}
.sm-dato:last-child { border-bottom: 0; }
.sm-dato dt { font-weight: 600; font-size: .9rem; }
.sm-dato dd { margin: 0; color: var(--gray); font-size: .9rem; text-align: right; }

.site-footer {
	background: var(--forge);
	color: var(--chalk);
	border-top: 1px solid var(--steel);
	margin-top: 0;
	padding: 0;
}
.sm-footer__cols {
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin-inline: auto;
	display: grid;
	/* minmax(0,...) + overflow-wrap: sin esto el mail largo del footer no puede
	   partirse, estira la columna y saca la grilla del contenedor. */
	grid-template-columns: 1.5fr minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-4);
	padding: clamp(32px, 4vw, 52px) 0;
}
.sm-footer__marca { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.site-footer img.footer-logo { height: 26px; width: auto; margin: 0; }
.sm-footer__tag { font-size: .9rem; color: var(--gray); max-width: 40ch; line-height: 1.55; }

.site-footer h4 {
	font-family: var(--display);
	color: var(--gray);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin: 0 0 12px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 8px; }
.site-footer ul a { color: var(--chalk); font-size: .92rem; overflow-wrap: break-word; }
.site-footer ul a:hover { color: var(--rust); }
.site-footer ul li.is-muted { color: var(--gray); font-size: .92rem; }

.sm-footer__legal {
	border-top: 1px solid var(--steel);
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin-inline: auto;
	padding: 16px 0;
	display: flex;
	justify-content: space-between;
	gap: var(--sp-2);
	flex-wrap: wrap;
	font-size: .8rem;
	color: var(--gray);
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
	.sm-bar { flex-wrap: wrap; padding-block: 10px; }
	.sm-marca { order: 1; }
	/* El burger va en la misma fila que el carrito y el CTA, no debajo. */
	.header-actions { order: 2; margin-left: auto; }
	.sm-burger { display: flex; order: 3; margin-left: 6px; }
	.main-nav {
		order: 5;
		flex-basis: 100%;
		display: none;
		border-top: 1px solid var(--steel);
		margin-top: 10px;
		padding-top: 10px;
		max-height: 70vh;
		overflow-y: auto;
	}
	.sm-nav-abierto .main-nav { display: block; }
	.sm-menu { flex-direction: column; align-items: stretch; }
	.sm-menu > li { flex-wrap: wrap; justify-content: space-between; }
	.sm-menu > li > a { flex: 1 1 auto; padding: 11px 12px; font-size: .95rem; }
	.sm-sub-toggle { width: 42px; height: 42px; margin: 0; }
	.main-nav .sm-sub {
		position: static;
		width: 100%;
		flex-basis: 100%;
		border: 0;
		box-shadow: none;
		background: var(--forge-2);
		border-radius: var(--r-sm);
		max-height: none;
		margin-bottom: 6px;
	}
	.sm-cta span { display: none; }
	.sm-cta { padding: 9px 12px; }
	.cart-pill__txt { display: none; }
	/* El badge "Tienda" hace que la fila no entre por unos pocos px y empuja
	   el burger a una segunda linea. */
	.sm-badge { display: none; }
	.sm-bar { gap: var(--sp-1); }
	.site-logo img { height: 22px; }
}

@media (max-width: 820px) {
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary { width: 100%; }
	.woocommerce div.product div.summary { margin-top: var(--sp-3); }
}

@media (max-width: 700px) {
	/* Dos columnas siempre: a una sola el home se vuelve interminable. */
	ul.products, ul.products.sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
	.sm-card__body { padding: 12px 12px 14px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product .woocommerce-loop-product__title { font-size: .86rem; line-height: 18px; height: 36px; padding: 0; }
	ul.products li.product .price { font-size: .92rem; }
	ul.products li.product .button { margin: 10px 12px 12px !important; padding: 8px 14px !important; font-size: .8rem !important; }
	.sm-grid--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.sm-cat { padding: 13px 14px; gap: 9px; }
	.sm-cat__nombre { font-size: .9rem; }
	.sm-hero h1 { max-width: none; }
	.sm-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
	.sm-footer__marca { grid-column: 1 / -1; }
	.sm-footer__legal { flex-direction: column; gap: 6px; }
	.sm-filtros__grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
	.sm-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   16. LAYOUT DE LISTADO — rail de filtros + resultados
   ========================================================================== */
.sm-listado__grid {
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: var(--sp-3);
	align-items: start;
}

.sm-rail { position: sticky; top: 118px; }
.sm-rail__toggle { display: none; }

/* Dentro del listado, el contenido ya vive en la grilla: se anula el ancho
   propio que cada pieza usa cuando la pagina es de una sola columna. */
.sm-listado .sm-listado__grid .woo-main > *,
.sm-resultados > *,
.sm-resultados ul.products,
.sm-resultados .woocommerce-result-count,
.sm-resultados .woocommerce-ordering,
.sm-resultados nav.woocommerce-pagination,
.sm-resultados h1.page-title,
.sm-resultados .woocommerce-breadcrumb {
	width: auto;
	margin-inline: 0;
}

.sm-resultados h1.page-title,
.sm-resultados .woocommerce-products-header h1 { margin-bottom: 4px; }

/* Barra de orden y conteo */
.sm-resultados .woocommerce-result-count,
.sm-resultados .woocommerce-ordering {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 var(--sp-2);
}
.sm-resultados .woocommerce-ordering { float: right; }

.sm-resultados ul.products {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr));
	margin-top: var(--sp-2);
	clear: both;
}

/* Filtros en columna */
.sm-filtros { margin-bottom: 0; }
.sm-filtros__grupo { padding: 14px 16px; border-bottom: 1px solid var(--steel); }
.sm-filtros__grupo:last-of-type { border-bottom: 0; }
.sm-filtros__grupo select,
.sm-filtros__grupo input[type="number"] { width: 100%; }
.sm-filtros__acciones { padding: 14px 16px; border-top: 1px solid var(--steel); }
.sm-filtros__acciones button { width: 100%; }

.sm-check { display: flex !important; align-items: center; gap: 9px; cursor: pointer; margin: 0 !important; }
.sm-check input { width: 16px; height: 16px; accent-color: var(--rust); flex: none; }
.sm-check span {
	font-family: var(--texto);
	font-size: .88rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--chalk);
}

/* ==========================================================================
   17. DENSIDAD DE TARJETA — el precio es el heroe
   ========================================================================== */
.sm-card__body { gap: 3px; padding: 12px 14px 14px; }

/* El titulo va SIEMPRE a dos lineas exactas.
   El `-webkit-line-clamp` solo no alcanzaba: como el titulo es hijo de un
   contenedor flex, el navegador "blockifica" el `display:-webkit-box` a
   `flow-root`, el clamp deja de aplicar y el `overflow:hidden` terminaba
   cortando una tercera linea por la mitad. El max-height en multiplos exactos
   de line-height garantiza el corte limpio aunque el clamp no aplique, y el
   min-height empareja la altura de todas las tarjetas. */
/* El selector lleva `.woocommerce` adelante para ganarle a la regla de
   WooCommerce core `.woocommerce ul.products li.product .woocommerce-loop-product__title`,
   que aplica `padding: .5em 0` y `font-size: 1em`. Con box-sizing:border-box
   esos 16px de padding se comian una linea entera del alto fijado. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-size: .92rem;
	font-weight: 500;
	color: var(--chalk);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* line-height y alto en px: con `em` el calculo se hace sobre el font-size
	   del elemento y no daba exacto dos cajas de linea, asi que la segunda
	   quedaba cortada por la mitad. En px la cuenta cierra siempre. */
	line-height: 20px;
	height: 40px;
}

.sm-card__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

ul.products li.product .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 1.32rem !important;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 !important;
	padding: 0;
}
ul.products li.product .price del {
	order: -1;
	flex-basis: 100%;
	font-size: .8rem;
	font-weight: 400;
	color: var(--gray-2);
	text-decoration: line-through;
}
ul.products li.product .price ins { color: var(--chalk); text-decoration: none; }

.sm-off {
	font-family: var(--texto);
	font-size: .82rem;
	font-weight: 700;
	color: var(--green);
	white-space: nowrap;
}

.sm-disp {
	font-family: var(--texto);
	font-size: .78rem;
	font-weight: 600;
	margin-top: 4px;
}
.sm-disp--ok { color: var(--green); }
.sm-disp--ultimos { color: var(--rust); }
.sm-disp--agotado { color: var(--gray-2); }

ul.products li.product .button {
	margin: 10px 14px 14px !important;
	padding: 8px 16px !important;
	font-size: .84rem !important;
}

/* ==========================================================================
   18. FICHA — buy box lateral
   ========================================================================== */
.sm-buybox {
	border: 1px solid var(--steel);
	border-radius: var(--r);
	background: var(--forge);
	padding: 18px;
	box-shadow: var(--sombra-sm);
}
.sm-buybox .sm-off { font-size: .95rem; }

.sm-pagos {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--steel);
	font-size: .84rem;
	color: var(--gray);
	line-height: 1.5;
}
.sm-pagos strong { color: var(--chalk); font-weight: 600; }
.sm-pagos ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.sm-pagos li { display: flex; align-items: center; gap: 7px; }
.sm-pagos svg { width: 15px; height: 15px; color: var(--green); flex: none; }

/* ==========================================================================
   19. RESPONSIVE DEL LISTADO
   ========================================================================== */
@media (max-width: 1000px) {
	.sm-listado__grid { grid-template-columns: 1fr; }
	.sm-rail { position: static; }
	.sm-rail__toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: var(--forge);
		border: 1px solid var(--steel-2);
		border-radius: var(--r-pill);
		font-family: var(--texto);
		font-size: .9rem;
		font-weight: 600;
		color: var(--chalk);
		padding: 10px 18px;
		cursor: pointer;
		margin-bottom: var(--sp-2);
	}
	.sm-rail__toggle svg { width: 17px; height: 17px; }
	.sm-rail__body { display: none; margin-bottom: var(--sp-2); }
	.sm-rail.abierto .sm-rail__body { display: block; }
}

@media (max-width: 900px) {
	/* Fila 1: marca + carrito/CTA + burger. Fila 2: el buscador a todo el ancho.
	   El menu de categorias se despliega desde el burger. */
	.sm-buscador { order: 4; flex-basis: 100%; margin-bottom: 10px; }
	.sm-bar--nav {
		min-height: 0;
		padding: 0 0 10px;
	}
	.sm-bar--nav .main-nav { margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (max-width: 700px) {
	.sm-resultados ul.products,
	ul.products, ul.products.sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	ul.products li.product .price { font-size: 1.1rem !important; }
	.sm-resultados .woocommerce-ordering { float: none; display: block; margin-top: 8px; }
}

/* ==========================================================================
   20. ICONOGRAFIA
   ========================================================================== */
.sm-ico { width: 18px; height: 18px; flex: none; display: block; }
/* Dentro de un boton el icono nunca crece, sin importar el contexto. */
.sm-btn .sm-ico, .sm-cta .sm-ico, .cart-pill .sm-ico, .sm-rail__toggle .sm-ico { width: 16px; height: 16px; }

/* Franja de garantias */
.sm-franja .sm-ico { width: 20px; height: 20px; color: var(--rust); }

/* Celdas de categoria */
.sm-cat__ico {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: var(--r-sm);
	background: var(--rust-dim);
	color: var(--rust);
	transition: background .15s, color .15s;
}
.sm-cat__ico .sm-ico { width: 18px; height: 18px; }
.sm-cat:hover .sm-cat__ico { background: var(--rust); color: #fff; }

/* Listas con icono (footer) */
.sm-lista-ico li { margin-bottom: 9px; }
.sm-lista-ico a,
.sm-lista-ico li.is-muted {
	display: flex;
	align-items: center;
	gap: 9px;
	line-height: 1.35;
}
.sm-lista-ico .sm-ico { width: 16px; height: 16px; color: var(--gray-2); }
.sm-lista-ico a:hover .sm-ico { color: var(--rust); }
.sm-lista-ico span { min-width: 0; overflow-wrap: break-word; }

/* Ficha de datos del cierre */
.sm-dato dt { display: flex; align-items: center; gap: 8px; }
.sm-dato dt .sm-ico { width: 16px; height: 16px; color: var(--rust); }

/* Confianza en el buy box */
.sm-confianza {
	list-style: none;
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--steel);
	display: grid;
	gap: 9px;
}
.sm-confianza li { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--gray); line-height: 1.45; }
.sm-confianza .sm-ico { width: 17px; height: 17px; color: var(--rust); margin-top: 1px; }

/* Estado vacio */
.sm-vacio {
	text-align: center;
	padding: clamp(36px, 6vw, 64px) var(--sp-3);
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r);
}
.sm-vacio > .sm-ico { width: 42px; height: 42px; color: var(--gray-2); margin: 0 auto var(--sp-2); }
.sm-vacio h2 { font-size: 1.3rem; margin-bottom: 6px; }
.sm-vacio p { color: var(--gray); margin: 0 auto var(--sp-2); max-width: 46ch; font-size: .95rem; }
.sm-vacio .sm-btn .sm-ico { width: 16px; height: 16px; color: currentColor; margin: 0; }

/* Separador del breadcrumb */
.woocommerce-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* Punto de disponibilidad */
.sm-disp { display: inline-flex; align-items: center; gap: 6px; }
.sm-disp::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* ==========================================================================
   21. MODO OSCURO
   Mismos nombres de token, valores del tema oscuro de Klamp. El atributo
   data-tema lo fija un script temprano en <head> para que no haya destello.
   ========================================================================== */
:root[data-tema="oscuro"] {
	--iron: #0b0b0c;
	--forge: #141416;
	--forge-2: #1b1b1e;
	--steel: #26262a;
	--steel-2: #34343a;

	--chalk: #f2efe8;
	--gray: #8e8a84;
	--gray-2: #5e5a55;

	--rust: #e4562a;
	--rust-hi: #ff6a3c;
	--rust-dim: #e4562a21;
	--amber: #ffb81c;
	--amber-dim: #ffb81c1f;
	--green: #4fb477;

	--sombra: 0 10px 30px #00000073;
	--sombra-sm: 0 2px 10px #0000004d;
	--velo: #0b0b0cd1;

	color-scheme: dark;
}

/* Las fotos de producto vienen con fondo blanco o negro quemado. En oscuro se
   las deja sobre una base clara para que sigan legibles; el multiply funde el
   blanco contra esa base, igual que en modo claro. */
:root[data-tema="oscuro"] .sm-card__img,
:root[data-tema="oscuro"] .sm-tile__foto,
:root[data-tema="oscuro"] .sm-slide__foto,
:root[data-tema="oscuro"] .woocommerce div.product div.images img,
:root[data-tema="oscuro"] .sm-banner__img { background: #ebe8e2; }

:root[data-tema="oscuro"] .woocommerce div.product div.images .flex-viewport { background: #ebe8e2; }

/* El logo es tinta sobre claro: en oscuro se invierte. */
:root[data-tema="oscuro"] .site-logo img,
:root[data-tema="oscuro"] .site-footer img.footer-logo { filter: invert(1) hue-rotate(180deg); }

/* Botón de tema */
.sm-tema {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	background: transparent;
	border: 1px solid var(--steel-2);
	border-radius: var(--r-pill);
	color: var(--gray);
	cursor: pointer;
	padding: 0;
	transition: color .15s, border-color .15s, background .15s;
}
.sm-tema:hover { color: var(--rust); border-color: var(--rust); background: var(--rust-dim); }
.sm-tema .sm-ico { width: 17px; height: 17px; grid-area: 1 / 1; }
.sm-tema__luna { display: none; }
:root[data-tema="oscuro"] .sm-tema__sol { display: none; }
:root[data-tema="oscuro"] .sm-tema__luna { display: block; }

/* ==========================================================================
   22. CARRUSEL DE PORTADA
   ========================================================================== */
.sm-carrusel {
	position: relative;
	background: var(--forge-2);
	border-bottom: 1px solid var(--steel);
	overflow: hidden;
}
.sm-carrusel__pista { position: relative; }

.sm-slide {
	display: none;
	width: min(var(--max), calc(100% - (var(--pad-x) * 2)));
	margin-inline: auto;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--sp-3);
	min-height: 340px;
	padding: var(--sp-4) 0;
}
.sm-slide.is-activo { display: grid; animation: sm-fade .35s ease both; }
@keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } }

.sm-slide__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }

.sm-slide__flag {
	display: inline-flex;
	align-items: center;
	background: var(--rust);
	color: #fff;
	font-family: var(--texto);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: var(--r-pill);
	padding: 5px 14px;
}
.sm-slide__flag--neutro { background: var(--chalk); color: var(--iron); }

.sm-slide h2 {
	font-size: clamp(26px, 3.6vw, 44px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 18ch;
}

.sm-slide__precio { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sm-slide__antes { font-size: 1rem; color: var(--gray-2); text-decoration: line-through; }
.sm-slide__ahora { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; color: var(--chalk); }
.sm-slide__precio .woocommerce-Price-amount { font-weight: inherit; }

.sm-slide__foto {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--forge);
	border: 1px solid var(--steel);
}
.sm-slide__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--sp-3);
	mix-blend-mode: multiply;
}

.sm-carrusel__flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r-pill);
	color: var(--chalk);
	cursor: pointer;
	box-shadow: var(--sombra-sm);
	transition: border-color .15s, color .15s;
}
.sm-carrusel__flecha:hover { border-color: var(--rust); color: var(--rust); }
.sm-carrusel__flecha--prev { left: 12px; }
.sm-carrusel__flecha--prev .sm-ico { transform: rotate(180deg); }
.sm-carrusel__flecha--next { right: 12px; }

.sm-carrusel__puntos {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	gap: 7px;
}
.sm-carrusel__puntos button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--steel-2);
	cursor: pointer;
	transition: background .15s, width .15s;
}
.sm-carrusel__puntos button[aria-selected="true"] { background: var(--rust); width: 22px; border-radius: var(--r-pill); }

/* ==========================================================================
   23. FILA DE ACCESOS
   ========================================================================== */
.sm-accesos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--sp-2);
	margin-block: var(--sp-3);
}
.sm-acceso {
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r);
	padding: 16px;
	transition: border-color .18s, transform .18s, box-shadow .18s;
}
.sm-acceso:hover { border-color: var(--rust); box-shadow: var(--sombra); transform: translateY(-2px); }
.sm-acceso__ico {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--r-sm);
	background: var(--forge-2);
	color: var(--gray);
	margin-bottom: 10px;
}
.sm-acceso__ico--rust { background: var(--rust-dim); color: var(--rust); }
.sm-acceso h3 { font-size: .98rem; font-weight: 700; margin: 0 0 3px; }
.sm-acceso p { margin: 0; font-size: .82rem; color: var(--gray); line-height: 1.4; }

/* ==========================================================================
   24. BANNERS
   ========================================================================== */
.sm-banners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--sp-2);
	margin-bottom: var(--sp-5);
}
.sm-banner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: stretch;
	gap: 0;
	min-height: 168px;
	background: var(--chalk);
	color: var(--iron);
	border-radius: var(--r);
	overflow: hidden;
	transition: transform .18s, box-shadow .18s;
}
.sm-banner:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.sm-banner--alt { background: var(--rust); color: #fff; }

.sm-banner__txt { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 20px; min-width: 0; }
.sm-banner__txt .sm-eyebrow { color: currentColor; opacity: .7; margin: 0; }
.sm-banner h3 { font-size: clamp(17px, 1.9vw, 22px); line-height: 1.15; margin: 0; color: currentColor; }
.sm-banner__link { display: inline-flex; align-items: center; gap: 5px; font-size: .86rem; font-weight: 600; margin-top: 4px; }
.sm-banner__link .sm-ico { width: 15px; height: 15px; }

/* La foto va siempre sobre base clara: el banner tiene fondo tinta o bermellon
   y el multiply contra esos fondos deja la imagen ilegible. */
.sm-banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0;
	background: #ebe8e2;
	mix-blend-mode: normal;
}

/* ==========================================================================
   25. TILES DE CATEGORIA Y MARCA (con foto, como el bloque de ML)
   ========================================================================== */
.sm-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr));
	gap: var(--sp-2);
}
.sm-tile {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	align-items: center;
	background: var(--forge);
	border: 1px solid var(--steel);
	border-radius: var(--r);
	overflow: hidden;
	transition: border-color .18s, transform .18s, box-shadow .18s;
}
.sm-tile:hover { border-color: var(--rust); box-shadow: var(--sombra); transform: translateY(-2px); }

.sm-tile__foto {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	background: var(--forge-2);
	color: var(--gray-2);
	overflow: hidden;
}
.sm-tile__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 9px;
	mix-blend-mode: multiply;
}
.sm-tile__foto .sm-ico { width: 26px; height: 26px; }

.sm-tile__nombre {
	padding: 12px 14px;
	font-family: var(--display);
	font-weight: 700;
	font-size: .96rem;
	line-height: 1.2;
	color: var(--chalk);
	min-width: 0;
}
.sm-tile__nombre small {
	display: block;
	font-family: var(--texto);
	font-weight: 500;
	font-size: .76rem;
	color: var(--gray-2);
	margin-top: 3px;
}

@media (max-width: 760px) {
	.sm-slide { grid-template-columns: 1fr; min-height: 0; gap: var(--sp-2); }
	.sm-slide__texto { order: 2; align-items: center; text-align: center; }
	.sm-slide h2 { max-width: none; }
	.sm-slide__foto { order: 1; aspect-ratio: 16 / 10; }
	.sm-carrusel__flecha { display: none; }
	.sm-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
	.sm-tile { grid-template-columns: 62px minmax(0, 1fr); }
	.sm-tile__foto { width: 62px; height: 62px; }
	.sm-tile__nombre { font-size: .86rem; padding: 10px; }
	.sm-banner { grid-template-columns: minmax(0, 1fr) 118px; min-height: 132px; }
	.sm-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   26. CORRECCIONES DE LA PASADA DE TESTEO
   ========================================================================== */

/* 1. Enlaces dentro de texto.
   El reset pone `a { color: inherit }` para que las tarjetas y el nav no se
   pinten de azul, pero eso dejaba los links de contenido ("Volver al inicio",
   "¿Olvidaste la contraseña?") indistinguibles del texto. */
.entry a:not(.sm-btn):not(.button),
.sm-vacio p a,
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button),
.woocommerce-error a:not(.button),
.woocommerce-form a,
.woocommerce-LostPassword a,
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a,
.wc-block-components-checkout-step a,
.woocommerce-form-login__rememberme + a {
	color: var(--rust);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.entry a:hover,
.woocommerce-form a:hover,
.woocommerce-LostPassword a:hover { color: var(--rust-hi); }

/* 2. Boton "mostrar contraseña" de WooCommerce.
   Viene con un sprite propio que los resets del theme rompieron: quedaba un
   bloque gris de 16x6 flotando arriba del boton de login. */
.woocommerce form .password-input,
.woocommerce-page form .password-input {
	display: block;
	position: relative;
	width: 100%;
}
.woocommerce form .password-input input { padding-right: 46px !important; }

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--gray-2);
	transition: color .15s;
	/* Ojo dibujado con el mismo trazo que el resto de la iconografia */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6862' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	text-indent: -9999px;
	overflow: hidden;
}
.woocommerce form .show-password-input::after,
.woocommerce form .show-password-input::before { content: none !important; }
.woocommerce form .show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9421a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 5.1A11 11 0 0 1 12 5c6.4 0 10 7 10 7a18 18 0 0 1-2.2 3.2M6.6 6.6A18 18 0 0 0 2 12s3.6 7 10 7a11 11 0 0 0 5.4-1.4'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

/* 3. Checkboxes y radios nativos, con el acento del sistema. */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.wc-block-components-checkbox input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--rust);
	vertical-align: middle;
	margin-right: 4px;
}
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 4px; }

/* 4. El carrito no necesita la descripcion larga del producto: satura la fila. */
.wc-block-cart-item__wrap .wc-block-components-product-metadata__description,
.wc-block-cart-items .wc-block-components-product-metadata__description { display: none; }

/* 5. Pagina 404 */
.sm-404 { text-align: center; padding: clamp(40px, 7vw, 88px) 0; }
.sm-404 > .sm-ico { width: 46px; height: 46px; color: var(--gray-2); margin: 0 auto var(--sp-2); }
.sm-404 h1 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 8px; }
.sm-404 p { color: var(--gray); max-width: 52ch; margin: 0 auto var(--sp-3); }
.sm-404__acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sm-404__buscador { max-width: 460px; margin: 0 auto var(--sp-3); }
.sm-404__buscador .sm-buscador { flex: 1 1 auto; }