/* ============================================================
   Syner — estilos del tema (v1.0.0)
   Tokens en style.css. Breakpoints: <768 móvil · 768–1024 tablet · >1024 desktop
   ============================================================ */

/* ====== SCROLLBAR ====== */
html { scrollbar-color: var(--s-petrol) var(--s-bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--s-bg); }
::-webkit-scrollbar-thumb { background: var(--s-petrol); border-radius: 6px; border: 2px solid var(--s-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--s-dark); }

/* ====== NAV ====== */
.s-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	height: var(--s-nav-h);
	background: var(--s-dark);
	transition: height var(--s-transition), box-shadow var(--s-transition);
}
.admin-bar .s-nav { top: 32px; }
/* html body: gana a global-styles-inline-css de WP core (body{padding:0}),
   que se imprime después de esta hoja */
html body { padding-top: var(--s-nav-h); }

.s-nav__inner {
	max-width: var(--s-container);
	margin-inline: auto;
	padding-inline: 24px;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 32px;
}
.s-nav.is-compact { height: var(--s-nav-h-compact); box-shadow: 0 2px 16px rgba(0, 0, 0, .35); }

.s-nav__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
}
.s-nav__brand img { height: 32px; width: auto; }
.s-nav__brand span {
	font-weight: 700;
	font-size: 20px;
	color: #fff;
	letter-spacing: .01em;
}

.s-nav__menu {
	display: flex;
	align-items: center;
	gap: 28px;
}
.s-nav__menu a {
	color: rgba(255, 255, 255, .85);
	font-size: 15px;
	font-weight: 400;
	padding: 6px 2px;
	position: relative;
	transition: color var(--s-transition);
}
.s-nav__menu a:hover { color: #fff; }
.s-nav__menu .current-menu-item > a,
.s-nav__menu .current_page_item > a,
.s-nav__menu a.is-active {
	color: #fff;
	font-weight: 500;
}
.s-nav__menu .current-menu-item > a::after,
.s-nav__menu .current_page_item > a::after,
.s-nav__menu a.is-active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 3px;
	border-radius: 2px;
	background: var(--s-amber);
}

.s-nav__icons {
	display: flex;
	align-items: center;
	gap: 6px;
}
.s-nav__icons a,
.s-nav__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 6px;
	color: rgba(255, 255, 255, .7);
	font-size: 21px;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color var(--s-transition), background var(--s-transition);
}
.s-nav__icons a:hover,
.s-nav__burger:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.s-nav__cart { position: relative; }
.s-nav__cart-count {
	position: absolute;
	top: 2px; right: 0;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--s-amber);
	color: var(--s-dark);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}
.s-nav__burger { display: none; }

/* Panel móvil slide-in */
.s-nav__panel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(320px, 85vw);
	background: var(--s-dark);
	z-index: 1100;
	padding: 72px 28px 28px;
	transform: translateX(100%);
	transition: transform .3s ease;
	overflow-y: auto;
}
.s-nav__panel.is-open { transform: translateX(0); }
.s-nav__panel .s-nav__menu {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.s-nav__panel .s-nav__menu a {
	display: block;
	font-size: 18px;
	padding: 12px 0;
	width: 100%;
}
.s-nav__panel-close {
	position: absolute;
	top: 16px; right: 16px;
	width: 40px; height: 40px;
	background: none; border: 0;
	color: rgba(255, 255, 255, .7);
	font-size: 24px;
	cursor: pointer;
}
.s-nav__overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 42, 63, .55);
	z-index: 1050;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.s-nav__overlay.is-visible { opacity: 1; pointer-events: auto; }

/* Buscador — panel desplegable bajo el nav (hijo de .s-nav, position:absolute
   top:100% para heredar automáticamente el offset del banner de entorno y el
   alto compacto sin duplicar la lógica JS de nav.js). */
/* Texto en vez de icono (consistente con "Inicio"/"Tienda"/... del resto del nav) —
   no encaja en la caja fija de 38x38 de .s-nav__icons a/.s-nav__burger, estilo propio. */
.s-nav__search-toggle {
	-webkit-appearance: none; appearance: none;
	background: none; border: 0; cursor: pointer;
	display: inline-flex; align-items: center;
	height: 38px; padding: 0 12px;
	border-radius: 6px;
	color: rgba(255, 255, 255, .85);
	font-size: 15px; font-weight: 400;
	white-space: nowrap;
	transition: color var(--s-transition), background var(--s-transition);
}
.s-nav__search-toggle:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.s-nav__search-panel {
	position: absolute;
	top: 100%; left: 0; right: 0;
	background: var(--s-dark);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .25s ease, opacity .2s ease;
}
.s-nav__search-panel.is-open { max-height: 120px; opacity: 1; }
.s-nav__search-form {
	max-width: var(--s-container);
	margin-inline: auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.s-nav__search-form-icon { color: rgba(255, 255, 255, .5); font-size: 20px; }
.s-nav__search-input {
	flex: 1;
	height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: 15px;
}
.s-nav__search-input::placeholder { color: rgba(255, 255, 255, .5); }
.s-nav__search-input:focus { outline: none; border-color: var(--s-amber); background: rgba(255, 255, 255, .1); }
.s-nav__search-submit {
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 6px;
	background: var(--s-amber);
	color: #0F2A3F;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
}
.s-nav__search-submit:hover { filter: brightness(1.05); }
@media (max-width: 767px) {
	.s-nav__search-form { padding: 12px 16px; }
	.s-nav__search-submit { padding: 0 14px; }
}

@media (max-width: 767px) {
	.s-nav__inner { gap: 12px; padding-inline: 16px; }
	.s-nav__menu--desktop { display: none; }
	.s-nav__burger { display: inline-flex; }
	.s-nav__brand img { height: 28px; }
	.s-nav__brand span { font-size: 18px; }
}

/* ====== HERO ====== */
.s-hero {
	position: relative;
	min-height: calc(100vh - var(--s-nav-h));
	background: var(--s-dark);
	color: #fff;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.s-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 40%) minmax(0, 60%);
	align-items: center;
	width: 100%;
}
.s-hero__canvas-wrap {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 60%;
	z-index: 1;
	/* Clip suave: la esfera se difumina hacia el dark navy en los bordes,
	   sin corte abrupto, y se mantiene completa en cualquier resolución. */
	-webkit-mask-image: radial-gradient(ellipse 78% 80% at 58% 50%, #000 52%, transparent 88%);
	        mask-image: radial-gradient(ellipse 78% 80% at 58% 50%, #000 52%, transparent 88%);
}
.s-hero__canvas-wrap canvas { width: 100% !important; height: 100% !important; }

.s-hero__eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--s-blue);
	margin-bottom: 18px;
}
.s-hero__title {
	font-size: clamp(34px, 4.2vw, 56px);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 20px;
	color: #fff;
}
.s-hero__sub {
	font-size: 18px;
	font-weight: 300;
	/* EXPLÍCITO a propósito: sin esta línea se hereda `line-height: 1rem` de
	   `.elementor-kit-18`, que gana a `body { line-height: 1.6 }` por especificidad. A 18px de
	   fuente eso da una caja de línea de 16px (ratio 0.89) y las líneas SE SOLAPAN 6px en
	   cuanto el texto pasa de una: medido en home (2 líneas), /servicios/ (2) e
	   /instaladores/ (4). Misma fuga del kit de Elementor que el bug v1.3.2 del dashboard de
	   Mi cuenta — aquí, sobre el subtítulo de los heroes. */
	line-height: 1.6;
	color: rgba(255, 255, 255, .75);
	max-width: 46ch;
	margin-bottom: 32px;
}
.s-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.s-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 3;
	color: rgba(255, 255, 255, .6);
	font-size: 26px;
	animation: s-bounce 2s infinite;
	transition: opacity .4s ease;
}
.s-hero__scroll.is-hidden { opacity: 0; pointer-events: none; }
@keyframes s-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(8px); }
}

/* Fallback móvil: sin WebGL, gradiente radial con glow azul y ámbar */
@media (max-width: 767px) {
	.s-hero {
		min-height: calc(90vh - var(--s-nav-h));
		text-align: center;
		background:
			radial-gradient(ellipse 70% 45% at 75% 22%, rgba(139, 200, 232, .28), transparent 65%),
			radial-gradient(ellipse 60% 40% at 22% 78%, rgba(245, 168, 0, .20), transparent 60%),
			var(--s-dark);
	}
	.s-hero__inner { grid-template-columns: 1fr; padding-top: 16px; }
	.s-hero__canvas-wrap { display: none; }
	.s-hero__ctas { justify-content: center; }
	.s-hero__sub { margin-inline: auto; }
	/* Instaladores: la card sube al tercio superior, sin aire muerto encima. */
	.s-hero--installers {
		min-height: calc(58vh - var(--s-nav-h));
		align-items: flex-start;
		padding-top: 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.s-hero__scroll { animation: none; }
}

/* ====== HERO SPLIT (home v1.1.1) — mitad dark + mitad foto con canvas fotones ====== */
.s-hero--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	padding: 0;
}
.s-hero__panel {
	display: flex;
	align-items: center;
	padding: 64px clamp(24px, 5vw, 72px);
}
.s-hero__panel-inner { max-width: 560px; }

.s-hero__media {
	position: relative;
	overflow: hidden;
}
.s-hero__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
/* Overlay (valores del handoff Claude Design): funde con la mitad dark (izq→dcha)
   + velo que oscurece la foto para que los fotones del canvas sean legibles. */
.s-hero__photo-grad {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		/* Fundido del borde vertical: navy sólido → transparente en los primeros
		   80px, para difuminar la separación entre las dos mitades del hero. */
		linear-gradient(to right, rgba(15, 42, 63, 1) 0, rgba(15, 42, 63, 0) 80px),
		linear-gradient(to right, rgba(15, 42, 63, .78), rgba(15, 42, 63, .14) 64%),
		linear-gradient(to bottom, rgba(15, 42, 63, .50), rgba(15, 42, 63, .10) 52%, rgba(15, 42, 63, .34));
}

/* Canvas de efecto "fotones / matrix" sobre la foto (lo dibuja home-hero.js) */
.s-hero__fx {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

@media (max-width: 767px) {
	.s-hero--split { grid-template-columns: 1fr; min-height: auto; }
	.s-hero__panel { padding: 48px 24px 36px; text-align: center; }
	.s-hero__panel-inner { margin-inline: auto; }
	.s-hero--split .s-hero__ctas { justify-content: center; }
	.s-hero--split .s-hero__sub { margin-inline: auto; }
	.s-hero__media { height: 200px; }
	.s-hero__photo { inset: 0; }      /* sin parallax en móvil → no hace falta margen */
	.s-hero__fx { display: none; }    /* canvas desactivado en móvil → solo foto banda */
	.s-hero--split .s-hero__scroll { display: none; }
}

/* ====== SECCIONES HOME ====== */
.s-section { padding: 64px 0; }
/* Productos destacados y valores sobre --s-bg; la alternancia de tono con
   las bandas blancas (marcas) hace de separación sutil, sin línea dura. */
.s-section--featured { background: var(--s-bg); }
.s-section--featured + .s-values { box-shadow: inset 0 1px 0 rgba(15, 42, 63, .05); }
.s-section__title {
	font-size: clamp(24px, 2.6vw, 34px);
	text-align: center;
	margin-bottom: 12px;
}
.s-section__lead {
	text-align: center;
	color: var(--s-muted);
	max-width: 60ch;
	margin: 0 auto 44px;
}

/* Marcas (carrusel de logos de fabricantes — CPT syner_fabricante) */
.s-brands { background: #fff; padding: 44px 0; border-block: 1px solid var(--s-gray); }
.s-brands__track {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px 48px;
}
.s-brands__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.s-brands__item img {
	max-height: 40px;
	max-width: 170px;
	width: auto;
	height: auto;
	opacity: .7;
	transition: opacity .2s ease;
}
.s-brands__item:hover img { opacity: 1; }
/* Equilibrio de masa visual: los wordmarks tienen ratios muy distintos
   (HANERSUN ~12:1, INVT ~2.4:1). Se acota el ancho por fabricante (data-brand)
   para que ninguno domine la fila. */
.s-brands__item[data-brand="maxhub"]    img { max-width: 150px; }
.s-brands__item[data-brand="hanersun"]  img { max-width: 180px; }
/* INVT es compacto (ratio ~2.4:1): se le baja la altura para igualar la del
   wordmark de MAXHUB (~22px), que va acotado por ancho. */
.s-brands__item[data-brand="invt"]      img { max-height: 22px; }
/* Hua Power es SVG con solo viewBox (sin width/height intrínsecos): se le fija
   una altura explícita para que el <img> lo dimensione (si no, colapsa a 0). */
.s-brands__item[data-brand="hua-power"] img { height: 36px; max-width: none; }

/* Recolor del logo según el fondo del carrusel (los PNG son monocromos vía filtro):
   --dark = banda oscura → logos en blanco · --light = banda clara → logos en negro */
.s-brands--dark { background: var(--s-dark); border-color: rgba(255, 255, 255, .10); }
.s-brands--dark .s-brands__item img { filter: brightness(0) invert(1); }
.s-brands--light { background: #fff; }
.s-brands--light .s-brands__item img { filter: brightness(0); }

/* Fallback wordmark (fabricante sin logo asignado) */
.s-brands__wordmark {
	font-weight: 700;
	font-size: 22px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--s-muted);
	opacity: .7;
}
.s-brands--dark .s-brands__wordmark { color: rgba(255, 255, 255, .7); }

@media (max-width: 767px) {
	/* En móvil el marquee CSS se descomponía: pasamos a grid estático 2×2
	   centrado, manteniendo los max-height/max-width por fabricante. */
	.s-brands__track {
		display: grid;
		grid-template-columns: repeat(2, auto);
		justify-content: center;
		justify-items: center;
		align-items: center;
		gap: 26px 36px;
		width: auto;
		animation: none;
	}
	.s-brands--scroll { overflow: visible; }
	.s-brands--scroll .s-brands__track { animation: none; width: auto; }
	/* el set duplicado (solo para el scroll infinito) sobra en el grid */
	.s-brands--scroll .s-brands__item[aria-hidden="true"] { display: none; }
}

/* Grid destacados (4 en desktop, 2 en móvil) */
.s-featured-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 1024px) { .s-featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .s-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Propuesta de valor — items en cards blancas sobre --s-bg para dar
   estructura y eliminar la sensación de vacío. */
.s-values { background: var(--s-bg); }
.s-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.s-values__item {
	text-align: center;
	padding: 36px 28px;
	background: #fff;
	border: 1px solid var(--s-gray);
	border-radius: var(--s-radius);
	transition: box-shadow var(--s-transition), transform var(--s-transition);
}
.s-values__item:hover { box-shadow: var(--s-shadow-hover); transform: translateY(-2px); }
.s-values__item i {
	font-size: 30px;
	color: var(--s-petrol);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: rgba(21, 94, 128, .08);
	margin-bottom: 18px;
}
.s-values__item h3 { font-size: 19px; margin-bottom: 8px; }
.s-values__item p { color: var(--s-muted); font-size: 15px; }
@media (max-width: 767px) {
	.s-values__grid { grid-template-columns: 1fr; gap: 12px; }
}

/* CTA final */
.s-cta-banner {
	background: var(--s-dark);
	color: #fff;
	border-radius: 14px;
	padding: 52px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.s-cta-banner h2 { font-size: clamp(22px, 2.4vw, 30px); color: #fff; }
.s-cta-banner p { color: rgba(255, 255, 255, .65); margin-top: 6px; }
@media (max-width: 767px) {
	.s-cta-banner { padding: 36px 24px; text-align: center; justify-content: center; }
}

/* ====== CARD DE PRODUCTO (sistema congelado) ====== */
.s-card {
	background: #fff;
	border: 1px solid var(--s-gray);
	border-radius: var(--s-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--s-transition), transform var(--s-transition);
}
.s-card:hover { box-shadow: var(--s-shadow-hover); transform: translateY(-2px); }

.s-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	min-height: 180px;
	background: #fff;
	overflow: hidden;
}
.s-card__media img {
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 14px;
	transition: transform .35s ease;
}
.s-card:hover .s-card__media img { transform: scale(1.04); }

/* E11·T8: badge de stock sobre la imagen de la tarjeta del listado. */
.s-card__stock {
	position: absolute;
	top: 10px; left: 10px;
	z-index: 2;
	padding: 3px 9px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.4;
	color: #fff;
}
.s-card__stock--out { background: #b23b3b; }
.s-card__stock--low { background: #b8860b; }

.s-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
}
.s-card__cat {
	color: var(--s-petrol);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.s-card__name {
	font-weight: 500;
	font-size: 13px;
	line-height: 1.45;
	color: var(--s-dark);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.45em);
	margin: 0;
}
.s-card__name a { color: inherit; }
.s-card__price {
	font-weight: 700;
	font-size: 22px;
	color: var(--s-dark);
}
.s-card__price .woocommerce-Price-currencySymbol { font-size: .8em; }
/* "Login para ver el precio" (whols-pro a invitados): de-enfatizado, no domina como un precio */
.s-card__price a { font-size: 13px; font-weight: 700; font-style: italic; color: var(--s-muted); }
.s-card__price a:hover { color: var(--s-petrol); }
/* Nota de descuento por volumen — la pinta el mu-plugin `syner-precio-instalador.php` DENTRO de
   `.s-card__price` / `.s-pdp__price`, así que sin resetear peso y tamaño heredaría el 22 px negrita
   del titular y competiría con él, que es exactamente el problema que esta nota viene a corregir:
   el precio de 1 unidad manda, el volumen es una condición de compra. Va en su propia línea. */
.s-price-volumen {
	display: block;
	margin-top: 4px;
	font-family: var(--s-font);
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.35;
	letter-spacing: .01em;
	color: var(--s-petrol);
}
.s-card__consult {
	font-style: italic;
	color: var(--s-muted);
	font-size: 14px;
}
.s-card__actions {
	margin-top: auto;
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.s-card__add,
.s-card__ask {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-weight: 500;
	font-size: 13px;
	padding: 11px 10px;
	border-radius: 6px;
	border: 0;
	cursor: pointer;
	transition: background var(--s-transition);
}
.s-card__add { background: var(--s-petrol); color: #fff; }
.s-card__add:hover { background: #1a729b; color: #fff; }
.s-card__add i { font-size: 17px; }
.s-card__ask { background: var(--s-amber); color: var(--s-dark); }
.s-card__ask:hover { background: #ffb91f; color: var(--s-dark); }
.s-card__info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	border-radius: 6px;
	border: 1px solid var(--s-gray);
	color: var(--s-muted);
	font-size: 19px;
	transition: color var(--s-transition), border-color var(--s-transition);
}
.s-card__info:hover { color: var(--s-petrol); border-color: var(--s-petrol); }

/* ====== TIENDA (archive) ====== */
.s-shop { padding: 0 0 72px; background: var(--s-bg); }

/* Banda dark con título + pills (rompe la entrada en blanco). Compacta: el
   título queda cerca del nav (poco padding-top). */
.s-shop__hero {
	background: var(--s-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 18px 0 24px;
}
/* Separador fino --s-bg entre la banda dark y el grid */
.s-shop__hairline { height: 1px; background: var(--s-bg); }
.s-shop__body { padding-top: 36px; }

/* Título + recuento en líneas propias (recuento debajo, en azul) */
.s-shop__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
}
.s-shop__title { font-size: clamp(26px, 3vw, 36px); color: #fff; }
.s-shop__count { color: var(--s-blue); font-weight: 300; font-size: 14px; }

.s-shop__layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}
.s-shop__main { padding-left: 8px; }
.s-shop__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 1024px) {
	.s-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pills de filtro rápido — viven en la banda dark, centradas */
.s-shop__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
}
.s-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: transparent;
	color: rgba(255, 255, 255, .85);
	font-size: 14px;
	font-weight: 500;
	transition: background var(--s-transition), color var(--s-transition), border-color var(--s-transition);
}
.s-pill:hover { border-color: #fff; color: #fff; }
.s-pill.is-active {
	background: var(--s-amber);
	border-color: var(--s-amber);
	color: var(--s-dark);
}

/* Sidebar filtros — jerarquía visual padre / subcategoría */
.s-filters {
	position: sticky;
	top: calc(var(--s-nav-h) + 16px);
	/* align-self flex-start: sin esto el item flex se estira a la altura de la
	   columna y el sticky queda "clavado" hasta el final del listado. */
	align-self: flex-start;
	max-height: calc(100vh - var(--s-nav-h) - 32px);
	overflow-y: auto;
	background: var(--s-bg);
	border-right: .5px solid var(--s-gray);
	padding-right: 18px;
}
.s-filters__group h4 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--s-dark);
	margin-bottom: 14px;
}
.s-filters__list { margin: 0; }
/* Categorías padre (nivel 1) */
.s-filters__list > li {
	border-bottom: 1px solid var(--s-gray);
	padding-bottom: 6px;
	margin-bottom: 6px;
}
.s-filters__list > li:last-child { border-bottom: 0; }
.s-filters__list > li > a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--s-dark);
	padding: 6px 8px;
	border-radius: 6px;
	transition: background var(--s-transition), color var(--s-transition);
}
.s-filters__list > li > a:hover { color: var(--s-petrol); }
/* Subcategorías (nivel 2+) */
.s-filters__list .children {
	margin-top: 4px;
	padding-left: 16px;
}
.s-filters__list .children a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	position: relative;
	font-size: 12px;
	font-weight: 400;
	color: var(--s-muted);
	padding: 4px 8px 4px 14px;
	border-radius: 6px;
	transition: background var(--s-transition), color var(--s-transition);
}
.s-filters__list .children a::before {
	content: "";
	position: absolute;
	left: 2px; top: 50%;
	width: 4px; height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--s-blue);
}
.s-filters__list .children a:hover { color: var(--s-petrol); }
/* Recuento de productos */
/* Recuento a la derecha del nombre, misma línea y mismo tamaño (color atenuado) */
.s-filters__list .s-cat-count { font-size: inherit; font-weight: inherit; color: var(--s-muted); flex-shrink: 0; }
/* Categoría activa */
.s-filters__list .current-cat > a,
.s-filters__list .current-cat-parent > a {
	background: rgba(21, 94, 128, .08);
	color: var(--s-petrol);
	font-weight: 500;
	border-left: 3px solid var(--s-amber);
	padding-left: 9px;
}

.s-shop__filter-toggle { display: none; }

@media (max-width: 767px) {
	.s-shop__layout { grid-template-columns: 1fr; gap: 0; }
	.s-shop__main { padding-left: 0; }
	.s-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	/* En móvil filtran las pills: se ocultan el sidebar y su botón drawer. */
	.s-shop__filter-toggle { display: none; }
	.s-filters { display: none; }
	/* Las pills hacen scroll horizontal si no caben, sin romper el layout. */
	.s-shop__pills {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-inline: -16px;
		padding-inline: 16px;
	}
	.s-shop__pills::-webkit-scrollbar { display: none; }
	.s-pill { flex: 0 0 auto; }
}

/* Paginación minimalista */
.s-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 44px;
}
.s-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 6px;
	color: var(--s-muted);
	font-size: 14px;
	font-weight: 500;
	transition: background var(--s-transition), color var(--s-transition);
}
.s-pagination .page-numbers:hover { background: var(--s-gray); color: var(--s-dark); }
.s-pagination .page-numbers.current { background: var(--s-dark); color: #fff; }
.s-pagination .prev, .s-pagination .next { font-size: 18px; }

/* ====== PÁGINA GENÉRICA / INSTALADORES ====== */
.s-page { padding: 56px 0 80px; }
.s-page__title { font-size: clamp(28px, 3vw, 40px); margin-bottom: 24px; }
.s-page__content { max-width: 800px; }
.s-page__content > * + * { margin-top: 1em; }

.s-installers-hero {
	background: var(--s-dark);
	color: #fff;
	border-radius: 14px;
	padding: 64px 48px;
	text-align: center;
	margin-bottom: 40px;
}
.s-installers-hero .s-hero__eyebrow { margin-bottom: 12px; }
.s-installers-hero h1 { color: #fff; font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 14px; }
.s-installers-hero p { color: rgba(255, 255, 255, .7); max-width: 56ch; margin: 0 auto 28px; }
@media (max-width: 767px) { .s-installers-hero { padding: 44px 22px; } }

/* ====== FOOTER ====== */
.s-footer {
	background: var(--s-dark);
	color: rgba(255, 255, 255, .55);
	padding: 48px 0;
	margin-top: 64px;
	font-size: 14px;
}
.s-footer a { color: rgba(255, 255, 255, .55); transition: color var(--s-transition); }
.s-footer a:hover { color: #fff; }
.s-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
	gap: 36px;
	padding-bottom: 36px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.s-footer__brand img { height: 36px; margin-bottom: 14px; }
.s-footer__brand p { max-width: 30ch; }
.s-footer h3, .s-footer h4 {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.s-footer ul li { margin-bottom: 8px; }
.s-footer address { font-style: normal; line-height: 1.8; }
.s-footer__bottom {
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 22px;
	font-size: 13px;
}
.s-footer__legal { display: flex; gap: 20px; }
@media (max-width: 767px) {
	.s-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
	.s-footer__bottom { justify-content: center; text-align: center; }
}
@media (max-width: 479px) {
	.s-footer__grid { grid-template-columns: 1fr; }
}

/* ====== HERO INSTALADORES — split 40/60 con card CTA (col izq) ====== */
/* Foto sutil de fondo (energía) detrás de la esfera, muy tenue sobre el dark. */
.s-hero--installers::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url('../energia.jpg') center / cover no-repeat;
	opacity: .08;
}
/* Card frosted con contraste alto para destacar sobre la esfera. */
.s-installers-card {
	position: relative;
	z-index: 2;
	background: rgba(15, 42, 63, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(139, 200, 232, 0.3);
	border-radius: 16px;
	padding: 44px 40px;
}
@media (max-width: 767px) {
	.s-installers-card {
		padding: 36px 24px;
		text-align: center;
		background: rgba(15, 42, 63, 0.6);
	}
	.s-installers-card .s-hero__ctas { justify-content: center; margin-bottom: 24px; }
	.s-installers-card .s-hero__sub  { margin-inline: auto; }
	/* La foto de fondo se ve más en móvil (en desktop es muy sutil) */
	.s-hero--installers::before { opacity: .18; }
	/* El chevron sale de la card: la sección apila card + chevron en columna */
	.s-hero--installers { flex-direction: column; align-items: center; }
	.s-hero--installers .s-hero__scroll {
		position: static;
		transform: none;
		margin: 18px auto 0;
		animation: none;
	}
}

/* ====== CARRUSEL DE MARCAS — scroll automático, seamless y escalable ======
   brands-marquee.js calcula cuántas copias del set hacen falta para cubrir
   ≥2x el ancho visible y fija --s-brands-shift (ancho real de UN set) y
   --s-brands-duration (velocidad constante, no tiempo fijo). La animación
   NO arranca hasta que la clase .is-marquee-ready confirma que ya se
   clonó y se fijaron las variables — evita mostrar un estado a medias. */
.s-brands--scroll { overflow: hidden; }
.s-brands--scroll .s-brands__track {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	gap: 0 80px;
}
.s-brands--scroll.is-marquee-ready .s-brands__track {
	animation: s-brands-scroll var(--s-brands-duration, 22s) linear infinite;
}
/* Los logos que cruzan el borde visible se difuminan en vez de cortarse en seco.
   Solo en desktop: en móvil el marquee pasa a grid estático (ver breakpoint arriba),
   no hay scroll que difuminar y el mask recortaría visualmente el grid. */
@media (min-width: 768px) {
	.s-brands--scroll {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	}
}
@keyframes s-brands-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--s-brands-shift, 0px))); }
}
@media (prefers-reduced-motion: reduce) {
	.s-brands--scroll .s-brands__track { animation: none; }
}

/* ====== HERO SERVICIOS — gradient mesh + parallax ====== */
.s-svc-hero {
	position: relative;
	min-height: calc(100vh - var(--s-nav-h));
	background: var(--s-dark);
	color: #fff;
	display: flex;
	align-items: center;
	overflow: hidden;
}
/* Foto sutil del técnico instalando, fundida con el dark navy (tras el mesh). */
.s-svc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url('../hero-foto.jpg') center / cover no-repeat;
	opacity: .12;
}
.s-svc-hero__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	will-change: transform;
}
.s-svc-hero__layer--1 {
	background: radial-gradient(ellipse 65% 55% at 15% 55%, rgba(21, 94, 128, .65), transparent 65%);
	animation: s-mesh-1 18s ease-in-out infinite;
}
.s-svc-hero__layer--2 {
	background: radial-gradient(ellipse 50% 45% at 78% 28%, rgba(139, 200, 232, .3), transparent 60%);
	animation: s-mesh-2 24s ease-in-out infinite;
}
.s-svc-hero__layer--3 {
	background: radial-gradient(ellipse 42% 38% at 60% 80%, rgba(245, 168, 0, .26), transparent 55%);
	animation: s-mesh-3 20s ease-in-out infinite;
}
@keyframes s-mesh-1 {
	0%,  100% { transform: translate(0, 0)     scale(1);    }
	33%       { transform: translate(8%, -6%)  scale(1.08); }
	66%       { transform: translate(-5%, 10%) scale(0.95); }
}
@keyframes s-mesh-2 {
	0%,  100% { transform: translate(0, 0)     scale(1);    }
	40%       { transform: translate(-10%, 8%) scale(1.12); }
	70%       { transform: translate(6%, -4%)  scale(0.92); }
}
@keyframes s-mesh-3 {
	0%,  100% { transform: translate(0, 0)      scale(1);    }
	50%       { transform: translate(12%, -8%)  scale(1.10); }
}
.s-svc-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 680px;
	padding: 80px 0;
}
/* Segundo párrafo del hero de servicios: el posicionamiento («no solo vendemos…»).
   Un punto más pequeño y algo más apagado que el subtítulo A PROPÓSITO: si los dos
   fueran iguales serían dos párrafos compitiendo y la jerarquía se perdería.
   Queda h1 > subtítulo > este. El margen del subtítulo se recorta aquí (32→16px)
   para que los dos se lean como un bloque y no como dos ideas sueltas. */
.s-svc-hero .s-hero__sub { margin-bottom: 16px; }
.s-svc-hero__pitch {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.65;
	color: rgba(255, 255, 255, .68);
	max-width: 62ch;
	margin-bottom: 32px;
}
@media (max-width: 767px) {
	.s-svc-hero {
		min-height: calc(60vh - var(--s-nav-h));
		align-items: flex-start;
		text-align: center;
	}
	/* `container` y `s-svc-hero__inner` son EL MISMO elemento (<div class="container
	   s-svc-hero__inner">), así que un `padding` de tres valores aquí PISA los 16px laterales
	   que aporta `.container` y todo el texto del hero (eyebrow, h1, subtítulo, pitch) queda
	   pegado al borde de la pantalla. Se declaran por separado: el bloque vertical es propio
	   de este hero, el lateral es el del contenedor y se repite explícito para no perderlo.
	   En ≥768px no hace falta: ahí el elemento va a `max-width:680px` con `margin:auto`, así
	   que nunca se acerca al borde y el ancho validado en escritorio no se toca. */
	.s-svc-hero__inner { padding-block: 28px 36px; padding-inline: 16px; }
	.s-svc-hero .s-hero__ctas { justify-content: center; }
	.s-svc-hero .s-hero__sub  { margin-inline: auto; }
	/* En móvil este hero centra el texto: el párrafo de posicionamiento se centra igual
	   que el subtítulo, o quedaría descolgado a la izquierda entre dos bloques centrados. */
	.s-svc-hero__pitch { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.s-svc-hero__layer { animation: none; }
}

/* ====== SERVICIOS — cards de servicio ====== */
.s-services { background: #fff; }
.s-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.s-service-card {
	background: #fff;
	border: 1px solid var(--s-gray);
	border-radius: var(--s-radius);
	padding: 36px 28px;
	transition: box-shadow var(--s-transition), transform var(--s-transition);
}
.s-service-card:hover { box-shadow: var(--s-shadow-hover); transform: translateY(-2px); }
.s-service-card i {
	font-size: 28px;
	color: var(--s-petrol);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px; height: 60px;
	border-radius: 12px;
	background: rgba(21, 94, 128, .08);
	margin-bottom: 20px;
}
.s-service-card h3 { font-size: 16px; font-weight: 500; margin-bottom: 10px; color: var(--s-dark); }
.s-service-card p { font-size: 14px; color: var(--s-muted); line-height: 1.6; }
@media (max-width: 767px) {
	.s-services__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Tarjetas de la página /servicios/ ──────────────────────────────────────────────────
   Sufijo `--page` porque `.s-services__grid` / `.s-service-card` SIN sufijo son OTRO
   componente: el bloque «Servicios para tu instalación» de la ficha de producto
   (woocommerce/single-product.php). Compartían nombre de clase, y como el de la ficha se
   declara más abajo en este mismo fichero, GANABA: esta página se estaba pintando con los
   valores de la ficha (padding 18px en vez de 36/28, rejilla auto-fill en vez de 3 columnas)
   sin que nadie lo hubiera decidido, y cualquier retoque del CSS de la ficha cambiaba esta
   página sin avisar.

   ⚠️ Los valores de AQUÍ son los que hoy se ven y se validaron con la cuarta card —4 columnas
   de 296px en escritorio, 2×2 en móvil—, NO los del bloque de arriba. Ese bloque se deja
   intacto porque sus reglas `transition`, `:hover`, `i`, `h3` y `p` siguen alcanzando a las
   tarjetas de la ficha; sus otras propiedades quedan muertas y se podrían podar aparte. */
.s-services__grid--page {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.s-service-card--page {
	display: flex;
	flex-direction: column;
	/* `flex-start`, NO `space-between`: la rejilla estira las 4 tarjetas a la misma altura y
	   `space-between` repartía el sobrante ENTRE los hijos, así que cada tarjeta separaba
	   icono/título/texto de forma distinta según lo largo que fuera su párrafo y los títulos
	   quedaban a alturas distintas (medido: y=1581/1570/1581/1581). Con `flex-start` el
	   contenido se apila desde arriba con el mismo gap en las cuatro y el sobrante queda al
	   final, así que los títulos arrancan a la misma altura. El espaciado interno no cambia:
	   siguen los 18px de padding y los 14px de gap. */
	justify-content: flex-start;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--s-gray);
	border-radius: var(--s-radius);
	padding: 18px;
	transition: box-shadow var(--s-transition), transform var(--s-transition);
}
.s-service-card--page:hover { box-shadow: var(--s-shadow-hover); transform: translateY(-2px); }
.s-service-card--page i {
	font-size: 28px;
	color: var(--s-petrol);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px; height: 60px;
	border-radius: 12px;
	background: rgba(21, 94, 128, .08);
	margin-bottom: 20px;
}
.s-service-card--page h3 { font-size: 16px; font-weight: 500; margin-bottom: 10px; color: var(--s-dark); }
.s-service-card--page p  { font-size: 14px; color: var(--s-muted); line-height: 1.6; }
@media (max-width: 767px) {
	.s-services__grid--page { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* Mini-hero dark de página (texto centrado, sin foto) — rompe la entrada en
   blanco antes de un bloque de contenido claro (contacto, etc.). */
.s-page-hero {
	background: var(--s-dark);
	color: #fff;
	min-height: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 28px 0;
}
.s-page-hero .s-hero__eyebrow { margin-bottom: 8px; }
.s-page-hero h1 { color: #fff; font-size: clamp(30px, 3.4vw, 44px); }

/* ====== CONTACTO ====== */
.s-contact { padding: 48px 0 80px; background: var(--s-bg); }
.s-contact__layout {
	display: grid;
	grid-template-columns: minmax(0, 60%) minmax(0, 40%);
	gap: 40px;
	align-items: start;
}

/* Formulario en card blanca con sombra suave (contrasta con el fondo --s-bg) */
.s-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--s-gray);
	border-radius: 12px;
	padding: 32px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.s-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.s-form__field { display: flex; flex-direction: column; gap: 6px; }
.s-form__field > span { font-size: 13px; font-weight: 500; color: var(--s-dark); }
.s-form__field em { color: var(--s-amber); font-style: normal; }
.s-form input,
.s-form textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--s-gray);
	border-radius: var(--s-radius);
	padding: 12px 14px;
	font-size: 15px;
	color: var(--s-dark);
	transition: border-color var(--s-transition), box-shadow var(--s-transition);
}
.s-form input:focus,
.s-form textarea:focus {
	outline: 0;
	border-color: var(--s-petrol);
	box-shadow: 0 0 0 3px rgba(21, 94, 128, .12);
}
.s-form textarea { resize: vertical; }
.s-form__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--s-muted);
	line-height: 1.5;
}
.s-form__check input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--s-petrol); }
.s-form__check em { color: var(--s-amber); font-style: normal; }
.s-form__submit { align-self: flex-start; margin-top: 4px; }
.s-form__notice {
	border-radius: var(--s-radius);
	padding: 14px 16px;
	font-size: 14px;
	border-left: 4px solid var(--s-petrol);
	background: #fff;
	box-shadow: var(--s-shadow);
}
.s-form__notice--ok  { border-left-color: #2e9e5b; color: var(--s-dark); }
.s-form__notice--err { border-left-color: #c0392b; color: var(--s-dark); }

/* Aside: card de datos + mapa */
.s-contact__aside { position: sticky; top: calc(var(--s-nav-h) + 24px); display: flex; flex-direction: column; gap: 20px; }
.s-contact__card {
	background: var(--s-dark);
	color: #fff;
	border-radius: 14px;
	padding: 32px 28px;
}
.s-contact__card h2 { color: #fff; font-size: 18px; margin-bottom: 20px; }
.s-contact__list { display: flex; flex-direction: column; gap: 18px; }
.s-contact__list li { display: flex; align-items: flex-start; gap: 14px; color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1.5; }
.s-contact__list i { color: var(--s-amber); font-size: 20px; flex: 0 0 auto; margin-top: 1px; }
.s-contact__list a { color: rgba(255, 255, 255, .85); transition: color var(--s-transition); }
.s-contact__list a:hover { color: #fff; }
.s-contact__map { border-radius: 14px; overflow: hidden; box-shadow: var(--s-shadow); line-height: 0; }

@media (max-width: 900px) {
	.s-contact__layout { grid-template-columns: 1fr; gap: 28px; }
	.s-contact__aside { position: static; }
}
@media (max-width: 767px) {
	.s-form__row { grid-template-columns: 1fr; }
	.s-page-hero { min-height: 140px; padding: 24px 0; }
}

/* ====== MI CUENTA / CARRITO: ancho completo dentro de index.php ====== */
body.woocommerce-account .s-page__content,
body.woocommerce-cart .s-page__content,
body.woocommerce-checkout .s-page__content { max-width: none; }
body.woocommerce-account .s-page,
body.woocommerce-cart .s-page { padding: 40px 0 80px; }

/* ====== MI CUENTA — layout + sidebar dark navy ====== */
/* Solo logueado: el grid 2-col es para nav+content. Deslogueado (form-login)
   el .woocommerce queda en bloque para que .s-login ocupe el ancho completo. */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}
.s-account-nav { background: var(--s-dark); border-radius: 14px; padding: 16px 12px; }
.s-account-nav ul { margin: 0; padding: 0; list-style: none; }
.s-account-nav li { margin: 0; list-style: none; }
.s-account-nav li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 8px;
	color: rgba(255, 255, 255, .7);
	font-size: 15px;
	font-weight: 400;
	border-left: 3px solid transparent;
	transition: background var(--s-transition), color var(--s-transition);
}
.s-account-nav li a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.s-account-nav li a i { font-size: 20px; width: 22px; text-align: center; flex: 0 0 auto; }
.s-account-nav li.is-active a {
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-weight: 500;
	border-left-color: var(--s-amber);
}
/* WooCommerce core pone float+width% en nav y content: lo neutralizamos y
   forzamos ambos a la fila 1 del grid (si no, content cae a una 2ª fila). */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
	float: none; width: auto; margin: 0;
	grid-column: 1; grid-row: 1;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
	float: none; width: auto; min-width: 0;
	grid-column: 2; grid-row: 1;
}
/* El contenido del dashboard (lo pinta WC, no nuestro template) heredaba
   font-family Montserrat (fuga del kit Elementor/WooLentor) y line-height:16px
   (texto apelmazado). Forzamos la tipografía del tema con interlineado correcto. */
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content li,
.woocommerce-MyAccount-content td,
.woocommerce-MyAccount-content address {
	font-family: var(--s-font);
	font-size: 15px;
	line-height: 1.7;
	color: var(--s-dark);
}
.woocommerce-MyAccount-content p { margin-bottom: 1em; }
.woocommerce-MyAccount-content a:not(.button) { color: var(--s-petrol); }
@media (max-width: 767px) {
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; gap: 20px; }
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 1; grid-row: auto;
	}
}

/* ====== LOGIN / REGISTRO (mi-cuenta deslogueado) ====== */
/* El mini-hero hace de cabecera; ocultamos el título de página duplicado
   "Mi cuenta" SOLO en la vista deslogueada (logueado sí lo conserva). */
body.woocommerce-account:not(.logged-in) .s-page__title { display: none; }
/* Fondo --s-bg detrás de las cards blancas para que destaquen */
body.woocommerce-account:not(.logged-in) .s-page { background: var(--s-bg); }
.s-login { max-width: 920px; margin: 0 auto; }
/* Mini hero dark (220px) con logo + eyebrow + H1 */
.s-login__hero {
	max-width: 920px;
	margin: 0 auto 32px;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 28px;
	background: var(--s-dark);
	color: #fff;
	border-radius: 14px;
}
.s-login__logo { width: 48px; height: 48px; object-fit: contain; margin-bottom: 16px; }
.s-login__hero .s-hero__eyebrow { margin-bottom: 10px; }
.s-login__hero h1 { color: #fff; font-size: clamp(24px, 3vw, 32px); }
/* Texto de privacidad del registro (lo emite WooCommerce) al estilo del sistema */
.s-login .woocommerce-privacy-policy-text,
.s-login .woocommerce-privacy-policy-text p {
	font-size: 12px;
	font-weight: 300;
	color: var(--s-muted);
	line-height: 1.5;
}
.s-login .woocommerce-privacy-policy-text { margin: 4px 0 18px; }
.s-login .woocommerce-privacy-policy-text a { color: var(--s-petrol); }
.s-login__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}
.s-login__grid--single { grid-template-columns: minmax(0, 480px); justify-content: center; }
/* Las columnas de WC traen las clases col-1/col-2, que en el grid-12 del tema
   valen grid-column: span N. Las neutralizamos para que cada una ocupe 1 track. */
.s-login__grid > .s-login__col { grid-column: auto; }
.s-login__col {
	background: #fff;
	border: 1px solid var(--s-gray);
	border-radius: 12px;
	padding: 32px;
	box-shadow: 0 4px 24px rgba(15, 42, 63, .10);
}
/* WooCommerce pinta un borde/padding por defecto en form.login/form.register;
   sobra dentro de nuestra card (doble borde). */
.s-login form.login,
.s-login form.register { border: 0; padding: 0; margin: 0; }
/* Inputs con icono Tabler a la izquierda.
   Icono e input comparten la MISMA celda de grid (fila 1): así el icono se
   centra respecto a esa fila (la del input), no respecto a .s-login__inwrap
   entero — cuando WC añade el medidor de fuerza/hint como hermanos después
   del input, caen en filas implícitas siguientes sin afectar a la altura de
   la fila 1, así que el icono ya no se desplaza hacia abajo. (Antes usaba
   position:absolute + top:50% del wrapper completo, que sí crecía con el
   medidor). El botón del ojito de WC ya se ancla correctamente a
   .password-input (no al wrapper), por eso no necesita este cambio. */
.s-login__inwrap { position: relative; display: grid; grid-template-columns: 1fr; }
.s-login__inwrap i {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	justify-self: start;
	margin-left: 14px;
	font-size: 18px;
	color: var(--s-muted);
	pointer-events: none;
	z-index: 2;   /* sobre el wrapper .password-input que WC añade al campo de contraseña */
}
/* Especificidad extra (.s-login …) para ganar al shorthand `padding:0 14px` de
   la regla base de inputs, que va después en el fichero y reseteaba el left. */
.s-login .s-login__inwrap input.input-text { padding-left: 44px; }
/* WC envuelve el password en .password-input: que ocupe el ancho y no tape el
   icono, y que comparta la fila 1 del grid con él (mismo motivo que arriba). */
.s-login__inwrap .password-input,
.s-login__inwrap > input { display: block; width: 100%; grid-column: 1; grid-row: 1; }
/* Medidor de fuerza y sugerencia: WC los añade sin margen propio (quedan
   pegados al input) — se les da aire acorde al resto del formulario. */
.s-login__inwrap .woocommerce-password-strength { margin-top: 10px; }
.s-login__inwrap .woocommerce-password-hint { margin-top: 6px; }
/* Neutralizar el fondo amarillo del autocompletar del navegador */
.s-login input:-webkit-autofill,
.s-login input:-webkit-autofill:hover,
.s-login input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 30px #fff inset;
	box-shadow: 0 0 0 30px #fff inset;
	-webkit-text-fill-color: var(--s-dark);
}
.s-login__col h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--s-dark);
	margin-bottom: 20px;
}
.s-login .form-row,
.s-login .woocommerce-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.s-login label { font-size: 13px; font-weight: 500; color: var(--s-dark); }
.s-login .required { color: var(--s-amber); }
.s-login input.input-text,
.s-login input[type="text"],
.s-login input[type="email"],
.s-login input[type="password"] {
	width: 100%;
	height: 44px;
	font-family: var(--s-font);
	font-weight: 400;
	font-size: 14px;
	color: var(--s-dark);
	background: #fff;
	border: 1px solid var(--s-gray);
	border-radius: 6px;
	padding: 0 14px;
	transition: border-color var(--s-transition), box-shadow var(--s-transition);
}
.s-login input.input-text:focus,
.s-login input[type="text"]:focus,
.s-login input[type="email"]:focus,
.s-login input[type="password"]:focus {
	outline: 0;
	border-color: var(--s-petrol);
	box-shadow: 0 0 0 3px rgba(21, 94, 128, .12);
}
/* "Recuérdame" en línea, no como campo apilado */
.s-login .woocommerce-form-login__rememberme {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	color: var(--s-muted);
}
.s-login .woocommerce-form-login__rememberme input { width: 18px; height: 18px; accent-color: var(--s-petrol); }

/* Botones a ancho completo, Roboto 700; especificidad alta para ganar a WC */
.s-login .s-login__submit {
	display: block;
	width: 100%;
	font-family: var(--s-font);
	font-weight: 700;
	font-size: 15px;
	padding: 13px 18px;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	background: var(--s-petrol) !important;
	color: #fff !important;
	transition: background var(--s-transition), transform var(--s-transition);
}
.s-login .s-login__submit:hover { background: #1a729b !important; transform: translateY(-1px); }
.s-login .s-login__submit--register {
	background: var(--s-amber) !important;
	color: var(--s-dark) !important;
}
.s-login .s-login__submit--register:hover { background: #ffb91f !important; }

.s-login .lost_password { margin-top: 14px; font-size: 13px; }
.s-login .lost_password a { color: var(--s-petrol); }

@media (max-width: 767px) {
	.s-login__grid { grid-template-columns: 1fr; }
}

/* ====== CARRITO VACÍO ====== */
.s-cart-empty {
	text-align: center;
	padding: 32px 0 64px;
}
.s-cart-empty i {
	display: block;
	font-size: 48px;
	color: var(--s-muted);
	margin-bottom: 16px;
}
.s-cart-empty__msg {
	font-size: 18px;
	color: var(--s-muted);
	margin-bottom: 24px;
}
/* Por si algún aviso WC residual trae su icono ::before flotante */
.cart-empty.woocommerce-info::before { display: none; }

/* ====== CARRITO ====== */
.s-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 32px;
	align-items: start;
}
.s-cart .woocommerce-cart-form { min-width: 0; }
.s-cart table.cart {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--s-gray);
	border-radius: var(--s-radius);
	overflow: hidden;
	background: #fff;
}
.s-cart table.cart thead th {
	background: var(--s-dark);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 16px;
}
.s-cart table.cart tbody td {
	padding: 16px;
	border-top: 1px solid var(--s-gray);
	vertical-align: middle;
}
.s-cart table.cart tbody tr.cart_item:nth-child(even) { background: var(--s-bg); }
.s-cart .product-thumbnail img { width: 64px; height: 64px; object-fit: contain; }
.s-cart .product-name a { color: var(--s-dark); font-weight: 500; }
.s-cart .product-name a:hover { color: var(--s-petrol); }
.s-cart .product-remove .remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--s-gray); color: var(--s-muted) !important;
	font-size: 18px; line-height: 1; text-decoration: none;
	transition: background var(--s-transition), color var(--s-transition);
}
.s-cart .product-remove .remove:hover { background: #c0392b; color: #fff !important; }

/* Botones cantidad − / + */
.s-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--s-gray);
	border-radius: 8px;
	overflow: hidden;
}
.s-cart .quantity input.qty {
	width: 48px;
	border: 0;
	text-align: center;
	font-weight: 500;
	color: var(--s-dark);
	padding: 8px 4px;
	-moz-appearance: textfield;
}
.s-cart .quantity input.qty::-webkit-outer-spin-button,
.s-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.s-cart .quantity button.plus,
.s-cart .quantity button.minus {
	width: 36px; height: 38px;
	border: 0;
	background: #fff;
	color: var(--s-petrol);
	font-size: 18px;
	cursor: pointer;
	transition: background var(--s-transition);
}
.s-cart .quantity button.plus:hover,
.s-cart .quantity button.minus:hover { background: var(--s-gray); }

/* Fila de acciones */
.s-cart td.actions { background: var(--s-bg); }
.s-cart td.actions .coupon { display: inline-flex; gap: 8px; }
.s-cart td.actions input#coupon_code {
	border: 1px solid var(--s-gray); border-radius: 6px; padding: 10px 12px;
}
.s-cart td.actions .button {
	background: var(--s-petrol); color: #fff;
	border: 0; border-radius: 6px; padding: 11px 18px;
	font-weight: 500; font-size: 14px; cursor: pointer;
	transition: background var(--s-transition);
}
.s-cart td.actions .button:hover { background: #1a729b; }
.s-cart td.actions button[name="update_cart"] { float: right; }

/* Resumen del pedido (card dark) */
.s-cart .cart-collaterals { width: 100%; float: none; }
.s-cart .cart_totals {
	background: var(--s-dark);
	color: #fff;
	border-radius: 14px;
	padding: 28px 26px;
	width: 100% !important;
	float: none !important;
	position: sticky;
	top: calc(var(--s-nav-h) + 24px);
}
.s-cart .cart_totals h2 { color: #fff; font-size: 18px; margin-bottom: 18px; }
.s-cart .cart_totals table { width: 100%; border-collapse: collapse; }
.s-cart .cart_totals th,
.s-cart .cart_totals td {
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	text-align: left;
}
.s-cart .cart_totals th { font-weight: 500; }
.s-cart .cart_totals td { text-align: right; }
.s-cart .cart_totals tr.order-total th { color: #fff; font-size: 16px; }
.s-cart .cart_totals tr.order-total td,
.s-cart .cart_totals tr.order-total .amount {
	color: var(--s-amber);
	font-size: 24px;
	font-weight: 700;
}
.s-cart .cart_totals tr.order-total th,
.s-cart .cart_totals tr.order-total td { border-bottom: 0; }
.s-cart .cart_totals .woocommerce-shipping-destination {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-top: 4px;
}
.s-cart .cart_totals .woocommerce-shipping-destination a.s-cart__change-address {
	color: var(--s-amber);
	text-decoration: underline;
	font-weight: 500;
	white-space: nowrap;
}
.s-cart .cart_totals .woocommerce-shipping-destination a.s-cart__change-address:hover { color: #fff; }
.s-cart .wc-proceed-to-checkout { padding-top: 20px; }
/* Especificidad alta + !important: WooCommerce pinta .button.alt en su púrpura
   (#7f54b3) con un selector que incluye el elemento 'a'; lo forzamos a ámbar. */
body.woocommerce-cart .s-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--s-amber) !important;
	color: var(--s-dark) !important;
	font-weight: 700;
	font-size: 16px;
	padding: 15px;
	border-radius: var(--s-radius);
	border: 0;
	transition: background var(--s-transition), transform var(--s-transition);
}
body.woocommerce-cart .s-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #ffb91f !important; transform: translateY(-1px); }

@media (max-width: 900px) {
	.s-cart { grid-template-columns: 1fr; }
	.s-cart .cart_totals { position: static; }
}
@media (max-width: 600px) {
	.s-cart table.cart thead { display: none; }
	.s-cart table.cart tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 0; }
	.s-cart table.cart tbody tr.cart_item { display: block; border-top: 1px solid var(--s-gray); padding: 8px 0; }
	.s-cart table.cart tbody td::before { content: attr(data-title); font-weight: 600; color: var(--s-dark); }
	.s-cart .product-remove, .s-cart .product-thumbnail { justify-content: flex-end; }
}

/* ====== Avisos WooCommerce mínimos ====== */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	position: relative;
	background: #fff;
	border-left: 4px solid var(--s-petrol);
	border-radius: 6px;
	box-shadow: var(--s-shadow);
	padding: 14px 18px;
	margin: 0 0 20px;
	list-style: none;
	color: var(--s-dark);
	font-size: 14px;
	line-height: 1.5;
}
.woocommerce-message li, .woocommerce-info li, .woocommerce-error li { list-style: none; margin: 0; padding: 0; }
/* WC pinta un ::before con su fuente de iconos, que el tema no carga → salía como
   caja "tofu" montada sobre el texto. Se oculta: el borde izquierdo de color ya
   indica el estado (rojo=error, verde=ok, petrol=info). */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; display: none; }
.woocommerce-error { border-left-color: #c0392b; }
.woocommerce-message { border-left-color: #2e8b57; }

/* ====== Compat móvil: desbordamiento horizontal ======
   El banner de cookies (Complianz) es position:fixed con ancho de escritorio
   (~513px) y no se adapta → inflaba el viewport móvil a 513px y la página "se
   iba por la derecha" (afecta a toda la web en la 1ª visita, se notó en tienda).
   Guard `overflow-x:hidden` en móvil: clava el viewport al ancho del dispositivo
   sin romper nada (en móvil el tema no usa position:sticky — sidebar oculto y
   aside estático). Además se hace el banner full-width con botones apilados para
   que siga siendo usable dentro de pantalla. */
@media (max-width: 767px) {
	html, body { overflow-x: hidden; }
	.cmplz-cookiebanner.banner-1 {
		width: auto !important;
		max-width: none !important;
		left: 0 !important;
		right: 0 !important;
	}
	.cmplz-cookiebanner .cmplz-buttons { flex-wrap: wrap !important; }
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 1 1 100% !important; width: 100% !important; }
}

/* ====== FICHA DE PRODUCTO (PDP) ====== */
.s-pdp { padding: 28px 0 80px; background: var(--s-bg); }
.s-pdp__grid {
	display: grid;
	grid-template-columns: 55% 45%;
	gap: 48px;
	align-items: start;
}

/* Galería */
.s-gallery__main {
	position: relative;
	background: #fff;
	border: 1px solid var(--s-gray);
	border-radius: 12px;
	overflow: hidden;
	/* 1/1: las fotos de producto son cuadradas/verticales; con 4/3 (apaisado) la
	   imagen cuadrada se salía en alto y se recortaba pese al contain. */
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* max/auto (en vez de width/height:100%) garantiza que la imagen SIEMPRE entra
   completa dentro del marco, deje franjas de aire si la proporción no coincide;
   nunca recorta ningún borde del producto. */
.s-gallery__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-sizing: border-box; padding: 24px; transition: transform .3s ease; }
.s-gallery__main:hover .s-gallery__img { transform: scale(1.08); }   /* zoom suave al hover */
.s-gallery__placeholder { font-size: 64px; color: var(--s-gray); }
.s-gallery__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, .9); border: 1px solid var(--s-gray);
	color: var(--s-dark); font-size: 20px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease, color .2s ease;
}
.s-gallery__nav:hover { background: #fff; color: var(--s-petrol); }
.s-gallery__nav--prev { left: 12px; }
.s-gallery__nav--next { right: 12px; }
.s-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.s-gallery__thumb {
	width: 72px; height: 72px; padding: 4px;
	background: #fff; border: 1px solid var(--s-gray); border-radius: 8px;
	cursor: pointer; overflow: hidden; flex: 0 0 auto;
}
.s-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.s-gallery__thumb.is-active { border-color: var(--s-petrol); box-shadow: 0 0 0 2px rgba(21, 94, 128, .15); }

/* Acordeón (specs + descripción) */
.s-accordion { margin-top: 32px; border-top: 1px solid var(--s-gray); }
.s-accordion__item { border-bottom: 1px solid var(--s-gray); }
.s-accordion__item > summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 4px; font-weight: 700; font-size: 16px; color: var(--s-dark);
}
.s-accordion__item > summary::-webkit-details-marker { display: none; }
.s-accordion__item > summary i { transition: transform .25s ease; color: var(--s-muted); }
.s-accordion__item[open] > summary i { transform: rotate(180deg); }
.s-accordion__body { padding: 0 4px 22px; color: var(--s-muted); font-weight: 300; font-size: 15px; line-height: 1.7; }
.s-accordion__body table { width: 100%; border-collapse: collapse; }
.s-accordion__body th, .s-accordion__body td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--s-gray); font-size: 14px; }
.s-accordion__body th { color: var(--s-dark); font-weight: 500; width: 40%; }

/* Resumen (columna derecha, sticky en desktop) */
.s-pdp__summary { position: sticky; top: calc(var(--s-nav-h) + 20px); }
.s-pdp__breadcrumb { font-size: 13px; color: var(--s-muted); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.s-pdp__breadcrumb a { color: var(--s-muted); }
.s-pdp__breadcrumb a:hover { color: var(--s-petrol); }
.s-pdp__breadcrumb-current { color: var(--s-dark); }
.s-pdp__cat { display: inline-block; color: var(--s-petrol); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.s-pdp__title { font-family: var(--s-font); font-weight: 700; font-size: 28px; line-height: 1.2; color: var(--s-dark); margin-bottom: 18px; }
.s-pdp__price-block { margin-bottom: 18px; }
.s-pdp__sku {
	display: inline-flex; align-items: center; gap: 6px;
	margin: -10px 0 16px; padding: 4px 0;
	background: none; border: 0;
	font-family: var(--s-font); font-size: 13px; color: var(--s-muted);
	cursor: pointer;
	transition: color .15s ease;
}
.s-pdp__sku:hover { color: var(--s-dark); }
.s-pdp__sku i { font-size: 13px; }
.s-pdp__sku.is-copied { color: var(--s-petrol); }
.s-pdp__price { font-weight: 700; font-size: 32px; color: var(--s-dark); }
.s-pdp__price .woocommerce-Price-currencySymbol { font-size: .7em; }
.s-pdp__price a { font-size: 16px; font-weight: 700; font-style: italic; color: var(--s-muted); }   /* whols: "Login para ver el precio" */
.s-pdp__consult { font-style: italic; font-size: 18px; color: var(--s-muted); }
/* En la ficha el titular es de 32 px, así que la nota sube a 14 px para no quedar diminuta al lado
   (mismo bloque `.s-price-volumen` de la tarjeta, solo se ajusta la escala). */
.s-pdp__price .s-price-volumen { font-size: 14px; margin-top: 8px; }
.s-pdp__short { font-weight: 300; font-size: 15px; color: var(--s-muted); line-height: 1.7; margin-bottom: 24px; }
.s-pdp__short ul { padding-left: 18px; list-style: disc; }

.s-pdp__actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.s-pdp form.cart { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.s-pdp form.cart .quantity { display: flex; }
.s-pdp form.cart .quantity input.qty { width: 84px; height: 52px; text-align: center; border: 1px solid var(--s-gray); border-radius: 8px; font-size: 15px; }
.s-pdp .single_add_to_cart_button {
	width: 100%; height: 52px;
	background: var(--s-petrol) !important; color: #fff !important;
	font-family: var(--s-font); font-weight: 700; font-size: 16px;
	border: 0; border-radius: 8px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .2s ease;
}
.s-pdp .single_add_to_cart_button:hover { background: #1a729b !important; }
.s-pdp__ask {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; height: 52px;
	background: var(--s-amber); color: var(--s-dark);
	font-weight: 700; font-size: 16px; border-radius: 8px;
	transition: background .2s ease;
}
.s-pdp__ask:hover { background: #ffb91f; color: var(--s-dark); }
.s-pdp__pdf {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; height: 48px;
	background: transparent; color: var(--s-petrol);
	border: 2px solid var(--s-petrol); border-radius: 8px;
	font-weight: 500; font-size: 15px;
	transition: background .2s ease, color .2s ease;
}
.s-pdp__pdf:hover { background: var(--s-petrol); color: #fff; }

.s-pdp__badges { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--s-gray); }
.s-pdp__badges li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--s-muted); }
.s-pdp__badges i { color: var(--s-petrol); font-size: 20px; }

/* Configurador plegable "Configurar y añadir" (form con add-ons WAPF).
   Es un <details> dentro de la columna del resumen: se abre EN EL SITIO, sin salto
   de ancla a otra sección. El <summary> es el botón. [2026-08-07] */
.s-pdp__config { width: 100%; }
.s-pdp__configbtn {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; height: 52px;
	background: var(--s-petrol); color: #fff;
	font-weight: 700; font-size: 16px; border-radius: 8px;
	transition: background .2s ease;
}
.s-pdp__configbtn::-webkit-details-marker { display: none; }
.s-pdp__configbtn:hover { background: #1a729b; color: #fff; }
.s-pdp__configbtn:focus-visible { outline: 3px solid var(--s-amber); outline-offset: 2px; }
.s-pdp__configbtn i { transition: transform .25s ease; }
.s-pdp__config[open] > .s-pdp__configbtn { border-radius: 8px 8px 0 0; }
.s-pdp__config[open] > .s-pdp__configbtn i { transform: rotate(180deg); }

.s-pdp__config-body {
	border: 1px solid var(--s-gray); border-top: 0; border-radius: 0 0 8px 8px;
	padding: 18px;
}
.s-pdp__config .wapf-field-group { margin-bottom: 18px; }
/* Con un solo add-on no hay envoltorio .s-addon (pdp.js no lo crea): la etiqueta del
   propio campo hace de título, así que aquí SÍ se ve — al revés que dentro de .s-addon. */
.s-pdp__config--single .wapf-field-label label { font-weight: 700; font-size: 15px; color: var(--s-dark); }
.s-pdp__config--single .wapf-field-label { margin-bottom: 10px; }
.s-pdp__config .wapf-radio { margin-bottom: 8px; }
.s-pdp__config .wapf-input-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; }
.s-pdp__config .wapf-field-description { font-size: 13px; color: var(--s-muted); margin-top: 10px; line-height: 1.6; }

/* Disponibilidad bajo el precio (siempre visible, fuera del plegable) */
.s-pdp__stock { margin-top: 10px; }
.s-pdp__stock .stock { font-size: 14px; font-weight: 500; margin: 0; }
.s-pdp__stock .stock.in-stock { color: #1f7a4d; }
.s-pdp__stock .stock.available-on-backorder { color: #9a6400; }
.s-pdp__stock .stock.out-of-stock { color: #b3261e; }

/* Add-ons en colapsables <details> (los crea pdp.js envolviendo cada campo WAPF) */
.s-addon { border: 1px solid var(--s-gray); border-radius: 10px; background: #fff; margin-bottom: 14px; overflow: hidden; }
.s-addon__sum {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 18px; font-weight: 700; font-size: 16px; color: var(--s-dark);
}
.s-addon__sum::-webkit-details-marker { display: none; }
.s-addon__title em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--s-muted); margin-left: 6px; }
.s-addon__sum i { color: var(--s-muted); transition: transform .25s ease; flex: 0 0 auto; }
.s-addon[open] .s-addon__sum { border-bottom: 1px solid var(--s-gray); }
.s-addon[open] .s-addon__sum i { transform: rotate(180deg); }
.s-addon .wapf-field-container { padding: 18px; }
/* el título ya está en el <summary> → ocultamos la etiqueta interna del campo */
.s-addon .wapf-field-label { display: none; }

/* Totales WAPF destacados al final (fuera de los colapsables) */
.s-pdp__config .wapf-product-totals,
.s-pdp__config .wapf-totals {
	background: var(--s-bg); border: 1px solid var(--s-gray); border-radius: 10px;
	padding: 16px 18px; margin: 4px 0 18px;
}

/* Sticky footer: solo móvil */
.s-pdp__sticky { display: none; }

@media (max-width: 900px) {
	.s-pdp__grid { grid-template-columns: 1fr; gap: 28px; }
	.s-pdp__summary { position: static; }
}
@media (max-width: 767px) {
	.s-gallery__thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.s-gallery__thumbs::-webkit-scrollbar { display: none; }
	.s-pdp { padding-bottom: 96px; }   /* hueco para el sticky footer */
	.s-pdp__sticky {
		display: flex; align-items: center; justify-content: space-between; gap: 14px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
		background: #fff; border-top: 1px solid var(--s-gray);
		padding: 12px 16px; box-shadow: 0 -4px 16px rgba(15, 42, 63, .10);
		transition: transform .3s ease;
	}
	.s-pdp__sticky.is-hidden { transform: translateY(110%); }
	.s-pdp__sticky-price { font-weight: 700; font-size: 18px; color: var(--s-dark); }
	.s-pdp__sticky-price .s-pdp__consult { font-size: 14px; }
	.s-pdp__sticky-btn {
		flex: 0 0 auto; height: 46px; padding: 0 24px;
		display: inline-flex; align-items: center; background: var(--s-petrol); color: #fff;
		font-weight: 700; border-radius: 8px; white-space: nowrap;
	}
}

/* ============================================================
   Extras de ficha: Servicios + Recomendados + toast (2026-07-06)
   ============================================================ */
.s-pdp__services{background:var(--s-bg);padding:48px 0}
.s-pdp__recommended{background:#fff;padding:48px 0;border-top:1px solid var(--s-gray)}
.s-pdp__section-title{font-size:24px;font-weight:600;color:var(--s-dark);margin:0 0 6px}
.s-pdp__section-sub{font-size:14px;color:var(--s-muted);margin:0 0 24px;font-weight:300}

/* Servicios: tarjetas con su propio botón Añadir */
.s-services__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.s-service-card{display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid var(--s-gray);border-radius:var(--s-radius);padding:18px}
.s-service-card__title{font-size:15px;font-weight:600;color:var(--s-dark);margin:0 0 8px;line-height:1.35}
.s-service-card__price{font-size:18px;font-weight:700;color:var(--s-petrol)}
.s-service-card__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--s-petrol);color:#fff;text-decoration:none;font-weight:600;font-size:14px;
  padding:10px 14px;border-radius:var(--s-radius);transition:var(--s-transition)}
.s-service-card__btn:hover{background:var(--s-dark)}
.s-service-card__btn .ti{font-size:16px}

/* Recomendados: reutiliza la rejilla de la tienda */
.s-recommended__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}

/* Toast de aviso */
.s-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);
  background:var(--s-dark);color:#fff;font-family:var(--s-font);font-size:14px;font-weight:500;
  padding:12px 20px;border-radius:var(--s-radius);box-shadow:var(--s-shadow);
  opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:9999;pointer-events:none}
.s-toast.is-visible{opacity:1;transform:translate(-50%,0)}

@media(max-width:767px){
  .s-pdp__services,.s-pdp__recommended{padding:32px 0}
  .s-services__grid{grid-template-columns:1fr 1fr;gap:12px}
  .s-recommended__grid{grid-template-columns:1fr 1fr;gap:12px}
}

/* ============================================================
   Feedback UX tienda (2026-07-06): G desc, F cupón, D checkout, E stepper
   ============================================================ */

/* G — Separación entre el párrafo intro y "Características principales" en la
   descripción (generada desde PDF). Aplica a todas las fichas sin re-generar. */
.s-accordion__body h3 { margin-top: 1.5em; margin-bottom: .5em; font-size: 15px; font-weight: 600; color: var(--s-dark); }
.s-accordion__body h3:first-child { margin-top: 0; }
.s-accordion__body p { margin-bottom: 1em; }
.s-accordion__body ul { margin: 0 0 1em 1.1em; }
.s-accordion__body li { margin-bottom: .35em; }

/* Páginas legales (2026-07-06): mismo criterio de espaciado/jerarquía que
   .s-accordion__body de arriba (Descripción de producto), aplicado al widget
   de Elementor "Editor de texto" de Aviso legal/Privacidad/Términos/
   Devoluciones/Cookies. Colores en hexadecimal literal (no var(--s-*)): las
   custom properties del :root no resuelven de forma fiable dentro del scope
   de un widget de Elementor, ver nota más arriba en este fichero. */
.s-legal-page .elementor-widget-text-editor .elementor-widget-container h2,
.s-legal-page .elementor-widget-text-editor .elementor-widget-container h3,
.s-legal-page .elementor-widget-text-editor .elementor-widget-container h4 {
	margin-top: 2em; margin-bottom: .6em; font-size: 20px; font-weight: 700; line-height: 1.3; color: #0F2A3F;
}
.s-legal-page .elementor-widget-text-editor .elementor-widget-container h2:first-child,
.s-legal-page .elementor-widget-text-editor .elementor-widget-container h3:first-child,
.s-legal-page .elementor-widget-text-editor .elementor-widget-container h4:first-child { margin-top: 0; }
.s-legal-page .elementor-widget-text-editor .elementor-widget-container h5,
.s-legal-page .elementor-widget-text-editor .elementor-widget-container h6 {
	margin-top: 1.4em; margin-bottom: .4em; font-size: 16px; font-weight: 600; color: #0F2A3F;
}
.s-legal-page .elementor-widget-text-editor .elementor-widget-container p { margin-bottom: 1em; }
.s-legal-page .elementor-widget-text-editor .elementor-widget-container ul,
.s-legal-page .elementor-widget-text-editor .elementor-widget-container ol { margin: 0 0 1em 1.3em; }
.s-legal-page .elementor-widget-text-editor .elementor-widget-container li { margin-bottom: .35em; }

/* F — Campo de cupón "Código" se recortaba: ensanchar el input */
.s-cart .coupon { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.s-cart .coupon input#coupon_code,
.s-cart .coupon .input-text { min-width: 200px; width: auto; padding: 10px 14px; box-sizing: border-box; }

/* E — Stepper +/- de cantidad (carrito y ficha): layout del wrapper */
.s-cart .quantity,
.single-product .quantity,
.s-pdp .quantity { display: inline-flex; align-items: stretch; }
.s-cart .quantity input.qty,
.single-product .quantity input.qty,
.s-pdp .quantity input.qty {
	width: 52px; text-align: center; border-left: 0; border-right: 0; border-radius: 0;
	-moz-appearance: textfield;
}
.s-cart .quantity button.qty-step,
.single-product .quantity button.qty-step,
.s-pdp .quantity button.qty-step {
	width: 38px; border: 1px solid var(--s-gray); background: #fff; color: var(--s-dark);
	font-size: 18px; line-height: 1; cursor: pointer; transition: background var(--s-transition);
}
.s-cart .quantity button.qty-step:hover,
.single-product .quantity button.qty-step:hover,
.s-pdp .quantity button.qty-step:hover { background: var(--s-bg); }
.s-cart .quantity button.qty-step--minus,
.single-product .quantity button.qty-step--minus,
.s-pdp .quantity button.qty-step--minus { border-radius: var(--s-radius) 0 0 var(--s-radius); }
.s-cart .quantity button.qty-step--plus,
.single-product .quantity button.qty-step--plus,
.s-pdp .quantity button.qty-step--plus { border-radius: 0 var(--s-radius) var(--s-radius) 0; }

/* D — "Resumen del pedido" del checkout (Elementor + widget WooLentor) con la misma
   piel que el resumen del Carrito. Se usan COLORES LITERALES (no var(--s-*)) porque las
   variables del :root del tema no resuelven en el scope del widget de Elementor, y se
   prefija con la clase estable del widget (.elementor-widget-wl-checkout-order-review)
   para ganar en especificidad al CSS que inyecta Elementor. #0F2A3F=dark, #F5A800=ámbar. */
/* WooLentor fija el fondo por ID (.elementor-widget-wl-checkout-order-review #order_review
   { background:transparent!important }) — un selector con ID gana a las clases. Hay que
   igualar/superar usando el ID + body para pintar el card navy. */
body .elementor-widget-wl-checkout-order-review #order_review,
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order {
	background: #0F2A3F !important;
	color: #fff !important;
	border-radius: 14px;
	padding: 26px 24px;
}
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order > h3,
body .elementor-widget-wl-checkout-order-review .wl-checkout-title,
body .elementor-widget-wl-checkout-order-review .woolentor-checkout-review-title {
	color: #fff !important; font-size: 18px; margin-bottom: 16px;
}
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order-table th,
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order-table td {
	padding: 12px 0 !important;
	border-bottom: 1px solid rgba(255,255,255,.12) !important;
	color: rgba(255,255,255,.85) !important;
	font-size: 14px;
	background: transparent !important;
}
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order-table td { text-align: right; }
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order-table .product-name,
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order-table .amount { color: rgba(255,255,255,.9) !important; }
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order-table tr.order-total th { color: #fff !important; font-size: 16px; border-bottom: 0 !important; }
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order-table tr.order-total td,
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order-table tr.order-total .amount {
	color: #F5A800 !important; font-size: 24px; font-weight: 700; border-bottom: 0 !important;
}
body .elementor-widget-wl-checkout-order-review .woocommerce-checkout-review-order-table .product-thumbnail img { border-radius: 8px; background: #fff; max-width: 44px; }

/* ============================================================
   Checkout Fase 2 (2026-07-06): cards blancas envío + pago (T1.2)
   Colores literales (las vars --s-* no resuelven en el scope del widget Elementor).
   "Resumen del pedido" NO se toca (queda navy del encargo anterior).
   ============================================================ */
body .elementor-widget-wl-checkout-shipping-form > .elementor-widget-container,
body .elementor-widget-wl-checkout-payment-method > .elementor-widget-container {
	background: #fff;
	border: 1px solid #E8EDF0;
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: 0 2px 12px rgba(15, 42, 63, .08);
}
body .elementor-widget-wl-checkout-shipping-form,
body .elementor-widget-wl-checkout-payment-method,
body .elementor-widget-wl-checkout-shipping-form label,
body .elementor-widget-wl-checkout-payment-method label,
body .elementor-widget-wl-checkout-payment-method .wc_payment_method label { color: #0F2A3F; }
body .elementor-widget-wl-checkout-payment-method #payment,
body .elementor-widget-wl-checkout-payment-method .woocommerce-checkout-payment { background: transparent !important; }
/* NIF/CIF a fila completa y bien alineado */
body #billing_nif_field { clear: both; }

/* ============================================================
   Checkout afinado (2026-07-06): D2 contraste resumen, D3 país
   ============================================================ */

/* D2 — Texto de la card navy "Resumen del pedido" en blanco explícito (no herencia).
   Selector con ID (#order_review) para ganar a WooLentor; el Total sigue en ámbar. */
body .elementor-widget-wl-checkout-order-review #order_review,
body .elementor-widget-wl-checkout-order-review #order_review th,
body .elementor-widget-wl-checkout-order-review #order_review td,
body .elementor-widget-wl-checkout-order-review #order_review .product-name,
body .elementor-widget-wl-checkout-order-review #order_review .product-quantity,
body .elementor-widget-wl-checkout-order-review #order_review .amount,
body .elementor-widget-wl-checkout-order-review #order_review .woocommerce-Price-amount,
body .elementor-widget-wl-checkout-order-review #order_review span { color: #FFFFFF !important; }
/* etiquetas secundarias en gris muy claro */
body .elementor-widget-wl-checkout-order-review #order_review .cart-subtotal th,
body .elementor-widget-wl-checkout-order-review #order_review .shipping th,
body .elementor-widget-wl-checkout-order-review #order_review tr.tax-rate th { color: #E8EDF0 !important; }
/* el Total se mantiene en ámbar (re-afirmado por si el blanco de arriba lo pisa) */
body .elementor-widget-wl-checkout-order-review #order_review tr.order-total td,
body .elementor-widget-wl-checkout-order-review #order_review tr.order-total .amount,
body .elementor-widget-wl-checkout-order-review #order_review tr.order-total .woocommerce-Price-amount { color: #F5A800 !important; }

/* D3 — Selector de país con padding interno como el resto de inputs */
body .woocommerce-checkout #billing_country,
body .woocommerce-checkout #shipping_country,
body .elementor-widget-wl-checkout-billing-form select,
body .elementor-widget-wl-checkout-shipping-form select { padding: 10px 14px !important; height: auto !important; }
/* si el país usa select2, el texto renderizado también con padding */
body .woocommerce-checkout .select2-selection--single { height: 44px !important; }
body .woocommerce-checkout .select2-selection--single .select2-selection__rendered { padding: 8px 14px !important; line-height: 26px !important; }
body .woocommerce-checkout .select2-selection--single .select2-selection__arrow { height: 42px !important; }

/* D2 (fix) — El nombre de producto del resumen es un <a> en petrol (#155E80) sobre navy:
   ilegible. WooLentor lo renderiza como mini-cart (.woolentor-product-content), no en
   #order_review. Forzar blanco en el nombre y su fila (sin tocar el Total ámbar). */
body .elementor-widget-wl-checkout-order-review .woolentor-product-content,
body .elementor-widget-wl-checkout-order-review .woolentor-product-content a,
body .elementor-widget-wl-checkout-order-review .woolentor-product-content-top a,
body .elementor-widget-wl-checkout-order-review .woolentor-product .product-title,
body .elementor-widget-wl-checkout-order-review .woolentor-product a { color: #FFFFFF !important; }

/* D2 (fix real) — el nombre VISIBLE es un <h5 class="woolentor-product-title"> en casi
   negro (#0B1022), distinto del <a> que ya estaba en blanco. Forzarlo a blanco.
   NO se toca el stepper de cantidad (va oscuro sobre su caja blanca). */
body .elementor-widget-wl-checkout-order-review .woolentor-product-title,
body .elementor-widget-wl-checkout-order-review .woolentor-product-title a { color: #FFFFFF !important; }

/* Mensaje de error inline bajo el campo (NIF/CIF/NIE en checkout) */
.s-field-error { display: none; margin-top: 6px; color: #C0392B; font-size: 13px; line-height: 1.4; font-weight: 500; }
.s-field-row--error input,
.s-field-row--error .input-text { border-color: #C0392B !important; box-shadow: 0 0 0 2px rgba(192,57,43,.12); }

/* ====== CONFIRMACIÓN DE PEDIDO (order-received / thankyou del core) ======
   [2026-08-07] La sirve el core desde que se desactivó el widget de WooLentor, y
   el tema no tenía ni una regla para ella: los cuatro párrafos del aviso de
   transferencia salían pegados unos a otros y los datos bancarios en una línea
   suelta, con el mismo peso visual que el resto.
   🔑 TODO va acotado a `body.woocommerce-order-received`: esta pantalla y el
   checkout son LA MISMA página (#8, `body.woocommerce-checkout`), así que sin
   ese ámbito cualquier regla de aquí repintaría también el formulario de pago.
   Jerarquía buscada, de más a menos peso: ① confirmación · ② datos bancarios
   (es lo único que el cliente tiene que copiar) · ③ aviso de transferencia ·
   ④ detalles del pedido y dirección. */

body.woocommerce-order-received .s-page__content { max-width: 860px; }
body.woocommerce-order-received .woocommerce-order > * + * { margin-top: 28px; }

/* ① Confirmación */
body.woocommerce-order-received .woocommerce-thankyou-order-received {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 28px; padding: 18px 22px;
	background: #EAF6EF; border: 1px solid #BFE3CE; border-left: 4px solid #1F7A4D;
	border-radius: var(--s-radius);
	font-size: 18px; font-weight: 700; color: #14532D; line-height: 1.4;
}
body.woocommerce-order-received .woocommerce-thankyou-order-received::before {
	content: "✓";
	flex: 0 0 28px; height: 28px; border-radius: 50%;
	background: #1F7A4D; color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 16px; font-weight: 700;
}

/* 🔴 WooCommerce trae un clearfix en `ul.order_details` (`::before`/`::after` con
   `display: table`). En un contenedor grid o flex esos pseudoelementos se
   convierten en CELDAS FANTASMA: dejaban un hueco vacío delante del número de
   pedido y otro delante de «Banco». Lo hereda también `.wc-bacs-bank-details`,
   que lleva la misma clase. Verificado en pantalla antes y después. */
body.woocommerce-order-received .woocommerce-order-overview::before,
body.woocommerce-order-received .woocommerce-order-overview::after,
body.woocommerce-order-received .wc-bacs-bank-details::before,
body.woocommerce-order-received .wc-bacs-bank-details::after { content: none; display: none; }

/* Resumen (nº de pedido, fecha, correo, total, método) — rejilla, no lista */
body.woocommerce-order-received .woocommerce-order-overview {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2px; margin: 0 0 28px; padding: 0; list-style: none;
	background: var(--s-gray); border: 1px solid var(--s-gray);
	border-radius: var(--s-radius); overflow: hidden;
}
body.woocommerce-order-received .woocommerce-order-overview li {
	margin: 0; padding: 14px 18px; background: #fff; border: 0;
	font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
	color: var(--s-muted);
}
body.woocommerce-order-received .woocommerce-order-overview li strong {
	display: block; margin-top: 4px;
	font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none;
	color: var(--s-dark); word-break: break-word;
}

/* ③ Aviso de transferencia: los <p> sueltos que imprime el gateway BACS */
body.woocommerce-order-received .woocommerce-order > p {
	margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--s-dark);
}
body.woocommerce-order-received .woocommerce-order > p:last-of-type { margin-bottom: 0; }

/* ② Datos bancarios: lo que hay que copiar. Es lo que más pesa después del OK. */
body.woocommerce-order-received .woocommerce-bacs-bank-details {
	margin-top: 28px; padding: 22px 24px;
	background: #FFF8E8; border: 1px solid #F3DFAC; border-left: 4px solid var(--s-amber);
	border-radius: var(--s-radius);
}
body.woocommerce-order-received .wc-bacs-bank-details-heading {
	margin: 0 0 2px; font-size: 20px; font-weight: 700; color: var(--s-dark);
}
body.woocommerce-order-received .wc-bacs-bank-details-account-name {
	margin: 0 0 16px; font-size: 15px; font-weight: 500; color: var(--s-muted);
}
body.woocommerce-order-received .wc-bacs-bank-details {
	display: flex; flex-wrap: wrap; gap: 10px 32px;
	margin: 0; padding: 0; list-style: none;
}
body.woocommerce-order-received .wc-bacs-bank-details li {
	margin: 0; padding: 0; border: 0;
	font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
	color: var(--s-muted);
}
body.woocommerce-order-received .wc-bacs-bank-details li strong {
	display: block; margin-top: 3px;
	font-size: 17px; font-weight: 700; letter-spacing: .02em; text-transform: none;
	color: var(--s-dark);
}
/* El IBAN es el dato que se copia a mano: tipografía tabular y algo más grande. */
body.woocommerce-order-received .wc-bacs-bank-details li.iban strong {
	font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: .04em;
}

/* ④ Detalles del pedido y dirección */
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title {
	margin: 0 0 14px; font-size: 20px; font-weight: 700; color: var(--s-dark);
}
body.woocommerce-order-received .woocommerce-table--order-details {
	width: 100%; border-collapse: collapse;
	border: 1px solid var(--s-gray); border-radius: var(--s-radius); overflow: hidden;
}
body.woocommerce-order-received .woocommerce-table--order-details th,
body.woocommerce-order-received .woocommerce-table--order-details td {
	padding: 14px 18px; border-bottom: 1px solid var(--s-gray);
	font-size: 15px; text-align: left; vertical-align: top;
}
body.woocommerce-order-received .woocommerce-table--order-details thead th {
	background: var(--s-bg); font-size: 13px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; color: var(--s-muted);
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot th { font-weight: 500; color: var(--s-muted); }
body.woocommerce-order-received .woocommerce-table--order-details tfoot td { font-weight: 700; color: var(--s-dark); }
/* El total del pedido cierra la tabla: se marca. */
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; }
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:nth-last-child(2) th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:nth-last-child(2) td {
	background: var(--s-bg); font-size: 17px; color: var(--s-dark); font-weight: 700;
}
body.woocommerce-order-received .woocommerce-customer-details address {
	margin: 0; padding: 18px 20px;
	background: #fff; border: 1px solid var(--s-gray); border-radius: var(--s-radius);
	font-style: normal; font-size: 15px; line-height: 1.9; color: var(--s-dark);
}
body.woocommerce-order-received .woocommerce-customer-details--phone,
body.woocommerce-order-received .woocommerce-customer-details--email { margin: 6px 0 0; color: var(--s-muted); }

@media (max-width: 600px) {
	body.woocommerce-order-received .woocommerce-order-overview { grid-template-columns: 1fr; }
	body.woocommerce-order-received .wc-bacs-bank-details { gap: 14px; }
	body.woocommerce-order-received .wc-bacs-bank-details li.iban strong { font-size: 17px; }
}

/* Aviso bajo el botón «Realizar pedido» (los datos de pago van en la pantalla
   siguiente). Va dentro de .place-order, justo debajo del botón naranja. */
/* 🔴 `clear: both` NO es opcional: WooCommerce trae `#place_order { float: right }`
   en su propia hoja, así que sin esto el párrafo se coloca AL LADO del botón y se
   sale de la caja de pago (verificado en pantalla: aparecía en una columna estrecha
   a la derecha, fuera del recuadro). El orden en el DOM ya era correcto; lo que
   fallaba era el flujo. */
.s-checkout__aviso-pago {
	clear: both;
	display: flex; align-items: flex-start; gap: 8px;
	/* separación con `padding`, no con `margin`: la clearance del float se come el
	   margen superior y el aviso quedaba pegado al botón. */
	margin: 0; padding: 12px 0 0;
	font-size: 13px; line-height: 1.5; color: var(--s-muted); text-align: left;
}
.s-checkout__aviso-pago i { flex: 0 0 auto; font-size: 16px; color: var(--s-petrol); line-height: 1.35; }

/* Huérfano de la última página (un producto solo en su fila): se deja en su
   posición natural, columna 1, alineado con el resto de la rejilla.
   Aquí hubo una regla `.s-shop__grid > :last-child:nth-child(3n+1) { grid-column: 2 }`
   que lo centraba; se retiró el 2026-08-08 por decisión de JAE. No es un olvido:
   la alineación a la izquierda es el patrón normal de e-commerce y mantiene la
   columna izquierda continua de arriba abajo. NO volver a añadirla sin decirlo.
   El grueso del problema se resolvió con los 18 productos por página
   (`loop_shop_per_page`, múltiplo de 3): solo puede quedar huérfana la última
   página de cada listado. */