/*
 * WhatsPedidos Tiendas — Escaparate (rediseño 20.1.0)
 *
 * Hoja reescrita para el diseño aprobado: banner con barra flotante, logo
 * circular centrado, píldoras de horario y dirección, barra de categorías que
 * se fija al hacer scroll y una fila por categoría con tarjetas de producto.
 *
 * Todo va anclado a `.wpt-store` para que el escaparate incrustado con el
 * shortcode no contamine el tema del sitio. Al final se conservan intactos los
 * estilos de las pantallas de acceso (.wpt-login-*), que cargan esta misma
 * hoja.
 */

.wpt-store {
	--wpt-primary: #16a34a;
	--wpt-secondary: #12121a;
	--wpt-accent: #ffb020;
	--wpt-radius: 16px;

	/*
	 * TOKENS DERIVADOS — NUEVO 20.8.0.
	 *
	 * Antes sólo existían los cuatro de arriba, y la hoja apenas los usaba:
	 * `--wpt-accent` no aparecía NI UNA VEZ en 39 KB de CSS y `--wpt-radius`
	 * sólo una. El resto eran 118 colores escritos a mano. Por eso cambiar los
	 * colores en Apariencia "no hacía nada": se guardaban bien y se inyectaban
	 * bien, pero casi ningún elemento los leía.
	 *
	 * Los tonos claro y oscuro se calculan con color-mix() a partir del color
	 * que elija la tienda, así no hay que pedirle seis colores al usuario para
	 * que los estados de hover y los fondos suaves queden coherentes.
	 */
	--wpt-primary-dark: color-mix(in srgb, var(--wpt-primary) 82%, #000);
	--wpt-primary-soft: color-mix(in srgb, var(--wpt-primary) 12%, #fff);
	--wpt-on-primary: #fff;
	--wpt-accent-soft: color-mix(in srgb, var(--wpt-accent) 18%, #fff);

	/* Redondeos proporcionales al que elija la tienda. */
	--wpt-radius-sm: calc(var(--wpt-radius) * .5);
	--wpt-radius-lg: calc(var(--wpt-radius) * 1.4);
	--wpt-radius-btn: var(--wpt-radius);

	/*
	 * Los sobrescriben las variantes del Constructor.
	 *
	 * 22.9.210 — OJO: definir una variable NO basta. Tiene que haber alguien
	 * que la LEA con `var(...)`, o la opción del Constructor no hace nada en
	 * la tienda. Aquí estaban definidas pero sin lector: `.wpt-products` usaba
	 * 18px fijos, `.wpt-product-card` no leía ni el borde ni la sombra, y
	 * `.wpt-cta` llevaba 12px fijos. Resultado: «Tarjeta de producto» y «Forma
	 * de los botones» se veían en la vista previa del panel (que sí las lee,
	 * ver builder.css) pero NO cambiaban nada en la tienda. Los lectores están
	 * justo debajo, en cada regla.
	 */
	--wpt-card-shadow: var(--wpt-shadow);
	--wpt-card-border: 1px solid var(--wpt-line);
	--wpt-gap: 18px;
	--wpt-hover-lift: -3px;
	--wpt-hover-scale: 1;

	--wpt-ink: #17171b;
	--wpt-muted: #7c7c88;
	--wpt-line: #eceae6;
	--wpt-bg: #faf9f7;
	--wpt-surface: #ffffff;
	--wpt-shadow: 0 1px 3px rgba(20, 20, 30, .06), 0 8px 24px rgba(20, 20, 30, .04);

	font-family: var(--wpt-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	color: var(--wpt-ink);
	background: var(--wpt-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	position: relative;
	/*
	 * OJO: aquí NO puede ir `overflow-x: hidden`. Un antepasado con overflow
	 * distinto de `visible` crea un contenedor de desplazamiento y anula
	 * `position: sticky` en sus descendientes: la barra de categorías dejaba de
	 * fijarse aunque el JS le pusiera la clase .is-stuck. `clip` recorta sin
	 * crear ese contenedor.
	 */
	overflow-x: clip;
}

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

.wpt-store img { max-width: 100%; }
.wpt-store button { font: inherit; }

body.wpt-body { margin: 0; background: #faf9f7; }

.wpt-i { display: block; flex: none; }

/* ------------------------------------------------------------------ Banner */

.wpt-hero {
	position: relative;
	min-height: 275px;
	background: linear-gradient(135deg, #2b2b36, #4a4a5a);
	background-size: cover;
	background-position: center;
}

.wpt-hero.has-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 45%);
	pointer-events: none;
}

.wpt-topbar {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 3;
	display: flex;
	align-items: center;
	padding: 18px 22px;
	gap: 12px;
}

.wpt-topbar__spacer { flex: 1; }

.wpt-searchbox {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 530px;
	margin: 0 auto;
	padding: 0 18px;
	height: 46px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
	color: var(--wpt-muted);
}

.wpt-searchbox input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 14px;
	color: var(--wpt-ink);
}

.wpt-searchbox input::placeholder { color: #9a9aa4; }

.wpt-topbar__actions {
	position: absolute;
	right: 22px;
	top: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpt-round {
	position: relative;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 20, 28, .45);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background .15s ease, transform .15s ease;
}

.wpt-round:hover { background: rgba(20, 20, 28, .68); transform: translateY(-1px); }
.wpt-round .wpt-i { width: 17px; height: 17px; }

.wpt-round__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wpt-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.wpt-round__count[hidden] { display: none; }

/* ----------------------------------------------------------------- Portada */

.wpt-profile {
	position: relative;
	z-index: 2;
	margin-top: -62px;
	padding: 0 20px 24px;
	text-align: center;
}

.wpt-profile__logo {
	width: 124px;
	height: 124px;
	margin: 0 auto 14px;
	border: 5px solid #fff;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 26px rgba(0, 0, 0, .12);
	overflow: hidden;
	display: grid;
	place-items: center;
}

.wpt-profile__logo img { width: 100%; height: 100%; object-fit: cover; }
.wpt-profile__logo span { font-size: 42px; font-weight: 800; color: var(--wpt-muted); }

.wpt-profile__name {
	margin: 0;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.wpt-profile__desc {
	margin: 6px 0 0;
	font-size: 14.5px;
	color: var(--wpt-muted);
}

.wpt-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.wpt-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 15px;
	border: 1px solid var(--wpt-line);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	color: #4b4b57;
}

.wpt-chip .wpt-i { width: 15px; height: 15px; color: var(--wpt-muted); }

/* ------------------------------------------------- Barra de categorías fija */

.wpt-catbar__sentinel { height: 1px; }

.wpt-catbar {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 40;
	padding: 6px 0 10px;
	background: #faf9f7;
	transition: box-shadow .18s ease, background .18s ease;
}

body.admin-bar .wpt-catbar { top: 32px; }

.wpt-catbar.is-stuck {
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 20px rgba(20, 20, 30, .07);
}

.wpt-catbar__scroll {
	display: flex;
	justify-content: center;
	gap: 8px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 6px 16px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.wpt-catbar__scroll::-webkit-scrollbar { display: none; }

.wpt-cat {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 92px;
	padding: 8px 6px 9px;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: var(--wpt-muted);
	cursor: pointer;
	transition: background .16s ease, box-shadow .16s ease, color .16s ease;
}

.wpt-cat__img {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 18px;
	background: #efeeea;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(20, 20, 30, .07);
}

.wpt-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpt-cat__img .wpt-i { width: 22px; height: 22px; color: var(--wpt-muted); }

.wpt-cat__label {
	max-width: 100%;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wpt-cat:hover { color: var(--wpt-ink); }

.wpt-cat.is-active {
	background: #fff;
	box-shadow: 0 4px 16px rgba(20, 20, 30, .10);
	color: var(--wpt-ink);
}

.wpt-cat.is-active .wpt-cat__label { font-weight: 700; }

/* --------------------------------------------------------------- Secciones */

.wpt-sections { padding-bottom: 34px; }

.wpt-section {
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 20px 6px;
	scroll-margin-top: 120px;
}

.wpt-section[hidden] { display: none; }

/*
 * 22.9.228 — LA CABECERA DE LA SECCIÓN.
 *
 * Hasta ahora no tenía NINGUNA regla propia: era un bloque con el h2 y el p uno
 * debajo del otro, y no se podía ajustar nada (ni la colocación, ni el
 * subtítulo, ni el adorno del título). Se le da una base previsible —columna,
 * alineada a la izquierda— para que las 50 colocaciones del Constructor partan
 * de algo estable. Visualmente es lo mismo que había.
 */
.wpt-section__head {
	display: flex;
	flex-direction: column;
	position: relative;
}

.wpt-section__title {
	position: relative;
	margin: 0;
	padding-left: 15px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
}

/*
 * El `::before` es la barra de color; el `::after` estaba libre y es el que
 * usan los adornos que necesitan una segunda marca (corchetes, comillas,
 * esquinas, punto final…). Vacío y sin tamaño no se ve.
 */
.wpt-section__title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 21px;
	margin-top: -10px;
	border-radius: 3px;
	background: var(--wpt-secondary);
}

.wpt-section__title::after {
	content: '';
	position: absolute;
}

/*
 * ⚠️ 22.9.230 — AQUÍ HABÍA UNA REGLA QUE MATABA LAS ENTRADAS.
 *
 * Estaba puesto:
 *
 *     @media (prefers-reduced-motion: reduce) {
 *         .wpt-section__head { animation: none !important; }
 *     }
 *
 * y era un error: quien tuviera las animaciones desactivadas en su sistema no
 * veía NINGUNA entrada, porque el JS además no aplicaba el estado de partida y
 * no había nada que animar. El efecto desaparecía por completo — dos veces
 * reportado como «no funciona».
 *
 * Es el mismo criterio que ya sigue «Al aparecer en pantalla» de las tarjetas
 * de producto (`entrance_fx`), que nunca lo ha mirado: el dueño de la tienda ha
 * elegido el efecto a propósito y la preferencia del visitante no debe
 * borrarlo. Los avisos del carrito y los efectos de las redes SÍ se siguen
 * apagando: esos son decorativos y no los ha pedido nadie.
 */

.wpt-section__desc {
	margin: 4px 0 0;
	padding-left: 15px;
	font-size: 12.5px;
	color: var(--wpt-muted);
}

.wpt-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	gap: var(--wpt-gap);
	margin-top: var(--wpt-gap);
}

/* -------------------------------------------------------- Tarjeta producto */

.wpt-product-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: var(--wpt-card-border);
	border-radius: var(--wpt-radius);
	box-shadow: var(--wpt-card-shadow);
	overflow: hidden;
	transition: transform .16s ease, box-shadow .16s ease;
	min-width: 0;
}

.wpt-product-card[hidden] { display: none; }

.wpt-product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(20, 20, 30, .10);
}

.wpt-product-card__media {
	position: relative;
	padding: 10px 10px 0;
}

.wpt-product-card__media img,
.wpt-product-card__noimg {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	background: #f1f0ec;
}

.wpt-tag {
	position: absolute;
	top: 18px;
	left: 18px;
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
}

.wpt-tag--off { background: var(--wpt-secondary); color: #fff; }

.wpt-tag--soldout {
	left: auto;
	right: 18px;
	background: rgba(255, 255, 255, .95);
	color: var(--wpt-secondary);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
}

.wpt-product-card__add {
	position: absolute;
	right: 18px;
	bottom: 8px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wpt-primary);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .16s ease, transform .16s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.wpt-product-card:hover .wpt-product-card__add,
.wpt-product-card__add:focus { opacity: 1; transform: translateY(0); }

@media (hover: none) {
	.wpt-product-card__add { opacity: 1; transform: none; }
}

.wpt-product-card.is-soldout .wpt-product-card__media img { filter: grayscale(1); opacity: .7; }

.wpt-product-card__content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 12px 14px 16px;
	min-width: 0;
}

.wpt-product-card__title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wpt-product-card__excerpt {
	margin: 5px 0 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--wpt-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wpt-product-card__price {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin-top: auto;
	padding-top: 14px;
}

.wpt-price { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

.wpt-price--old {
	font-size: 12.5px;
	color: var(--wpt-muted);
	text-decoration: line-through;
}

/* -------------------------------------------------------- Estados y avisos */

.wpt-empty,
.wpt-noresults {
	max-width: 1180px;
	margin: 0 auto;
	padding: 48px 20px;
	text-align: center;
	color: var(--wpt-muted);
	font-size: 14px;
}

.wpt-noresults[hidden] { display: none; }

/* --------------------------------------------------------------------- Pie */

.wpt-footer {
	padding: 26px 20px 34px;
	border-top: 1px solid var(--wpt-line);
	text-align: center;
	background: #fff;
}

.wpt-footer__made { margin: 0; font-size: 13px; color: var(--wpt-muted); }
.wpt-footer__made strong { color: var(--wpt-ink); }

.wpt-footer__manage {
	display: inline-block;
	margin-top: 12px;
	padding: 8px 16px;
	border-radius: 10px;
	background: var(--wpt-secondary);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}

/* ------------------------------------------------------- Botones flotantes */

.wpt-float {
	position: fixed;
	right: 18px;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .20);
	transition: transform .15s ease;
}

.wpt-float:hover { transform: scale(1.05); }
.wpt-float--wa { bottom: 22px; background: #25d366; }

.wpt-float__count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--wpt-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.wpt-float__count[hidden] { display: none; }

/* ----------------------------------------------------------------- Carrito */

.wpt-cart { position: fixed; inset: 0; z-index: 200; }
.wpt-cart[hidden] { display: none; }
.wpt-cart__backdrop { position: absolute; inset: 0; background: rgba(12, 12, 18, .45); }

.wpt-cart__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(400px, 100%);
	height: 100%;
	background: #fff;
	box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
}

.wpt-cart__panel > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--wpt-line);
	font-size: 16px;
}

.wpt-cart__panel > header button {
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--wpt-muted);
}

.wpt-cart__items { flex: 1; overflow-y: auto; padding: 12px 20px; }




.wpt-cart__empty { color: var(--wpt-muted); font-size: 14px; text-align: center; padding: 32px 0; }

.wpt-cart__panel > footer { padding: 16px 20px 22px; border-top: 1px solid var(--wpt-line); }



.wpt-cta {
	display: inline-block;
	padding: 13px 20px;
	border-radius: var(--wpt-radius-btn);
	background: var(--wpt-primary);
	color: #fff;
	font-weight: 700;
	font-size: 14.5px;
	text-align: center;
	text-decoration: none;
}

.wpt-cta--block { display: block; width: 100%; }

.wpt-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 300;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--wpt-secondary);
	color: #fff;
	font-size: 13.5px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.wpt-toast[hidden] { display: none; }

/* ------------------------------------------------------------------- Móvil */

@media (max-width: 900px) {
	.wpt-products { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
	.wpt-section { padding: 18px 14px 4px; }
	.wpt-catbar__scroll { justify-content: flex-start; padding: 6px 12px; }
}

@media (max-width: 640px) {
	.wpt-hero { min-height: 190px; }
	.wpt-topbar { flex-direction: column; align-items: stretch; padding: 14px 14px 0; gap: 10px; }
	.wpt-topbar__actions { position: static; justify-content: flex-end; }
	.wpt-searchbox { height: 42px; max-width: none; }
	.wpt-profile { margin-top: -48px; }
	.wpt-profile__logo { width: 96px; height: 96px; }
	.wpt-profile__name { font-size: 24px; }
	.wpt-chip { font-size: 12px; padding: 6px 12px; }
	.wpt-section__title { font-size: 19px; }
	.wpt-cat { width: 80px; }
	.wpt-cat__img { width: 54px; height: 54px; border-radius: 16px; }
	.wpt-product-card__title { font-size: 13.5px; }
	.wpt-price { font-size: 17px; }
}

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

/* ==========================================================================
 * Pantallas de acceso — v22.9.78 AUDITORÍA RESPONSIVE LOGIN/REGISTRO
 * Repara overflow horizontal y formulario cortado en PC/tablet/móvil.
 * Principios: min-height:100dvh, width:100%+max-width, min-width:0,
 * box-sizing:border-box, sin 100vw, sin height:100vh fijo, scroll vertical.
 * Aislado a .wpt-login-container — sin reglas globales body/input/button.
 * ========================================================================== */

.wpt-login-container {
	/* ocupa viewport sin provocar scroll horizontal; permite scroll vertical */
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	background: radial-gradient(circle at top left, #f0fdf4 0%, #dcfce7 100%);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 100vh; /* fallback */
}
@supports (min-height: 100dvh) {
	.wpt-login-container { min-height: 100dvh; }
}
@supports (min-height: 100svh) {
	.wpt-login-container { min-height: 100svh; }
}
.wpt-login-container *, .wpt-login-container *::before, .wpt-login-container *::after {
	box-sizing: border-box;
	max-width: 100%;
}
.wpt-login-split {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: min(100%, 1000px);
	max-width: 1000px;
	min-width: 0;
	margin: auto; /* centra vertical cuando cabe; permite scroll cuando no */
	background: #fff;
	border-radius: 40px;
	overflow: hidden;
	overflow-wrap: anywhere;
	box-shadow: 0 40px 100px -20px rgba(10, 61, 46, 0.15);
	min-height: min(560px, auto);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-sizing: border-box;
}
.wpt-login-sidebar {
	flex: 1 1 420px;
	min-width: 0;
	max-width: 100%;
	background: #0a3d2e;
	color: #fff;
	padding: 60px 50px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}
.wpt-login-sidebar::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: radial-gradient(circle at top right, rgba(18, 183, 106, 0.15) 0%, transparent 70%);
	pointer-events: none;
}
.wpt-login-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 60px;
	position: relative;
	z-index: 2;
	min-width: 0;
}
.wpt-login-brand span {
	font-weight: 800;
	font-size: 20px;
	color: #12b76a;
	letter-spacing: -0.02em;
	word-break: break-word;
}
.wpt-login-logo {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	background: #12b76a;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0a3d2e;
	box-shadow: 0 4px 12px rgba(18, 183, 106, 0.3);
}
.wpt-login-sidebar__content {
	position: relative;
	z-index: 2;
	min-width: 0;
	max-width: 100%;
}
.wpt-login-sidebar h2 {
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 800;
	margin: 0 0 16px;
	line-height: 1.1;
	color: #fff;
	letter-spacing: -0.04em;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.wpt-login-sidebar p {
	opacity: 0.8;
	font-size: clamp(14px, 1.6vw, 18px);
	line-height: 1.6;
	margin: 0;
	max-width: 100%;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.wpt-login-sidebar__footer {
	padding-top: 40px;
	opacity: 0.4;
	font-size: 14px;
	position: relative;
	z-index: 2;
	word-break: break-word;
}

.wpt-login-main {
	flex: 1.15 1 480px;
	min-width: 0;
	max-width: 100%;
	padding: 56px 48px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	background: #ffffff;
	box-sizing: border-box;
	overflow-y: visible;
	overflow-x: hidden;
}
.wpt-login-form {
	width: 100%;
	max-width: 400px;
	min-width: 0;
	box-sizing: border-box;
}
.wpt-login-form h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin: 0 0 8px; color: #14203e; letter-spacing: -0.03em; word-break: break-word; overflow-wrap: anywhere; }
.wpt-login-subtitle { color: #64748b; margin: 0 0 32px; font-size: clamp(13px, 1.8vw, 16px); line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; }

.wpt-login-field { margin-bottom: 20px; min-width: 0; max-width: 100%; }
.wpt-login-field-header {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	min-width: 0;
}
.wpt-login-field label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: #14203e;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.wpt-login-field input,
.wpt-login-field select,
.wpt-login-field textarea {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 14px 16px;
	border-radius: 14px;
	border: 2px solid #f1f5f9;
	background: #f8fafc;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	color: #14203e;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	overflow-wrap: anywhere;
}
.wpt-login-field input:focus,
.wpt-login-field select:focus,
.wpt-login-field textarea:focus {
	border-color: #12b76a;
	outline: none;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.1);
}
.wpt-login-field input::placeholder { color: #94a3b8; }

.wpt-forgot-link {
	color: #64748b;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: color 0.2s;
	white-space: nowrap;
}
.wpt-forgot-link:hover { color: #12b76a; }

.wpt-login-submit { margin-top: 28px; min-width: 0; }
.wpt-login-submit .wpt-btn { max-width: 100%; min-width: 0; word-break: break-word; }
.wpt-btn--primary {
	background: #14203e;
	color: #fff;
	border: none;
	padding: 15px 24px;
	border-radius: 14px;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}
.wpt-btn--primary:hover {
	background: #0a3d2e;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(10, 61, 46, 0.2);
}
.wpt-btn--primary:active { transform: none; }
.wpt-btn--block { width: 100%; justify-content: center; }

.wpt-login-footer {
	margin-top: 28px;
	text-align: center;
	padding-top: 20px;
	color: #64748b;
	font-size: 14px;
	border-top: 1px solid #f1f5f9;
	word-break: break-word;
	overflow-wrap: anywhere;
	min-width: 0;
}
.wpt-register-link {
	color: #14203e;
	font-weight: 800;
	text-decoration: none;
	margin-left: 4px;
	word-break: break-word;
}
.wpt-register-link:hover { color: #12b76a; }
.wpt-login-alert { padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; word-break: break-word; overflow-wrap: anywhere; box-sizing: border-box; max-width: 100%; }
.wpt-login-alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.wpt-login-alert--success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.wpt-help { color: #64748b; font-size: 12.5px; line-height: 1.6; word-break: break-word; overflow-wrap: anywhere; }
.wpt-help code { font-size: 11.5px; word-break: break-all; background: #f1f5f9; padding: 2px 6px; border-radius: 6px; }

/* — slug card + phone wrap: ahora en CSS (antes inline en PHP) — */
.wpt-reg-slug-card{margin-top:10px;border:1px solid #e5e7eb;border-radius:12px;background:#f9fafb;overflow:hidden;transition:border-color .2s, box-shadow .2s;box-sizing:border-box;min-width:0;max-width:100%;}
.wpt-reg-slug-card.is-ok{border-color:#10b981;background:#ecfdf5;}
.wpt-reg-slug-card.is-bad{border-color:#f87171;background:#fef2f2;}
.wpt-reg-slug-card.is-checking{border-color:#93c5fd;background:#eff6ff;}
.wpt-reg-slug-card__header{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 14px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6b7280;background:rgba(255,255,255,.6);border-bottom:1px solid #e5e7eb;min-width:0;box-sizing:border-box;}
.wpt-reg-slug-card__url{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:12px 14px;font-size:13px;color:#374151;word-break:break-all;overflow-wrap:anywhere;min-width:0;max-width:100%;box-sizing:border-box;}
.wpt-reg-slug-card__base{color:#9ca3af;white-space:normal;word-break:break-all;overflow-wrap:anywhere;min-width:0;flex:1 1 120px;font-size:12.5px;}
.wpt-reg-slug-card__slug{padding:3px 8px;border-radius:6px;background:#fff;border:1px solid #e5e7eb;font-family:ui-monospace, SFMono-Regular, monospace;font-weight:600;color:#111827;min-width:60px;max-width:100%;text-align:center;word-break:break-all;overflow-wrap:anywhere;box-sizing:border-box;}
.wpt-reg-slug-card.is-ok .wpt-reg-slug-card__slug{border-color:#10b981;color:#065f46;background:#fff;}
.wpt-reg-slug-card.is-bad .wpt-reg-slug-card__slug{border-color:#f87171;color:#991b1b;}
.wpt-reg-slug-card__icon{margin-left:auto;flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.wpt-reg-slug-card__icon .dot{width:10px;height:10px;border-radius:50%;background:#d1d5db;}
.wpt-reg-slug-card.is-ok .dot{background:#10b981;}
.wpt-reg-slug-card.is-bad .dot{background:#ef4444;}
.wpt-reg-slug-card.is-checking .dot{animation:wpt-pulse 1s infinite;}
@keyframes wpt-pulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
.wpt-reg-slug-card .wpt-slug-state{margin:0;padding:8px 14px;font-size:12.5px;font-weight:500;border-top:1px solid #e5e7eb;background:rgba(255,255,255,.7);word-break:break-word;overflow-wrap:anywhere;min-width:0;box-sizing:border-box;}
.wpt-reg-slug-card .wpt-slug-state.is-ok{color:#065f46;}
.wpt-reg-slug-card .wpt-slug-state.is-bad{color:#991b1b;}
.wpt-reg-slug-card .wpt-slug-state.is-checking{color:#1e40af;}
.wpt-reg-slug-card .wpt-slug-state.is-idle{color:#6b7280;}

.wpt-phone-wrap{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;min-width:0;max-width:100%;box-sizing:border-box;}
.wpt-phone-wrap__cc{flex:0 1 150px;min-width:110px;max-width:46%;position:relative;box-sizing:border-box;}
.wpt-phone-wrap__cc select{width:100%;max-width:100%;min-width:0;height:100%;min-height:48px;appearance:none;-webkit-appearance:none;padding:10px 28px 10px 12px;border:2px solid #f1f5f9;background:#f8fafc;border-radius:14px;font-size:14px;line-height:1.4;cursor:pointer;box-sizing:border-box;color:#14203e;}
.wpt-phone-wrap__cc::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:#64748b;pointer-events:none;}
.wpt-phone-wrap__cc select:focus{outline:none;border-color:#12b76a;background:#fff;box-shadow:0 0 0 4px rgba(18,183,106,.1);}
.wpt-phone-wrap__num{flex:1 1 180px;min-width:140px;max-width:100%;box-sizing:border-box;min-width:0;}
.wpt-phone-wrap__num input{width:100%;max-width:100%;min-width:0;box-sizing:border-box;}

/* TABLET 768–1024: reduce sidebar proporcionalmente, mantiene split */
@media (max-width: 1024px) and (min-width: 901px) {
	.wpt-login-split { width: min(100%, 860px); max-width: 860px; }
	.wpt-login-sidebar { flex: 0 1 340px; padding: 40px 32px; }
	.wpt-login-sidebar h2 { font-size: 30px; }
	.wpt-login-sidebar p { font-size: 15px; }
	.wpt-login-main { flex: 1 1 420px; padding: 40px 32px; }
	.wpt-login-form { max-width: 380px; }
}

/* TABLET estrecha: si no cabe split, colapsa a una columna */
@media (max-width: 900px) {
	.wpt-login-container { align-items: flex-start; padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px)) 12px; }
	.wpt-login-split { flex-direction: column; width: min(100%, 480px); max-width: 480px; border-radius: 28px; min-height: auto; }
	.wpt-login-sidebar { display: none !important; }
	.wpt-login-main { padding: 36px 28px; align-items: flex-start; justify-content: flex-start; min-height: auto; }
	.wpt-login-form { max-width: 100%; }
}

/* MÓVIL: formulario ocupa 100%, sin sidebar, padding cómodo + safe-areas */
@media (max-width: 480px) {
	.wpt-login-container { padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
	.wpt-login-split { width: 100%; max-width: 100%; border-radius: 22px; margin: 0; }
	.wpt-login-main { padding: 28px 18px; }
	.wpt-login-form h1 { font-size: 24px; }
	.wpt-login-subtitle { margin-bottom: 24px; }
	.wpt-login-field { margin-bottom: 16px; }
	.wpt-login-field input,
	.wpt-login-field select,
	.wpt-login-field textarea { padding: 13px 14px; font-size: 16px; border-radius: 12px; }
	.wpt-btn--primary { padding: 14px 18px; font-size: 15px; }
	.wpt-phone-wrap { gap: 10px; }
	.wpt-phone-wrap__cc { flex: 1 1 100%; max-width: 100%; min-width: 0; }
	.wpt-phone-wrap__num { flex: 1 1 100%; min-width: 0; }
	.wpt-reg-slug-card__url { padding: 10px 12px; }
	.wpt-reg-slug-card__header { padding: 8px 12px; }
}
@media (max-width: 360px) {
	.wpt-login-main { padding: 24px 14px; }
	.wpt-login-form h1 { font-size: 22px; }
}


/* ==========================================================================
 * 20.2.0 — Píldoras de categoría, ventana de producto, aviso de pedido y
 * checkout. Estas reglas van al final a propósito: redefinen algunas de las
 * de arriba (la barra de categorías pasa de tarjeta vertical a píldora).
 * ========================================================================== */

/* ------------------------------------------- Barra de categorías: píldoras */

.wpt-catbar__scroll { gap: 12px; padding: 10px 16px; }

.wpt-cat {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: auto;
	max-width: 260px;
	padding: 7px 18px 7px 8px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 20, 30, .06), 0 6px 16px rgba(20, 20, 30, .05);
	color: #8e8e9a;
}

.wpt-cat__img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	box-shadow: none;
	background: #f1f0ec;
}

.wpt-cat__img .wpt-i { width: 16px; height: 16px; }

.wpt-cat__label { font-size: 14px; font-weight: 600; }

.wpt-cat:hover { color: var(--wpt-ink); box-shadow: 0 2px 4px rgba(20, 20, 30, .08), 0 10px 22px rgba(20, 20, 30, .08); }

.wpt-cat.is-active {
	color: var(--wpt-ink);
	box-shadow: 0 1px 2px rgba(20, 20, 30, .08), 0 8px 20px rgba(20, 20, 30, .10);
}

.wpt-cat.is-active .wpt-cat__label { font-weight: 700; }

.wpt-catbar.is-stuck { background: rgba(250, 249, 247, .92); }

/* ------------------------------------------------ Tarjeta: abre la ventana */

.wpt-product-card { cursor: pointer; }
.wpt-product-card:focus-visible { outline: 2px solid var(--wpt-primary); outline-offset: 3px; }

/* --------------------------------------------------- Ventana de producto */

.wpt-modal { position: fixed; inset: 0; z-index: 240; }
.wpt-modal[hidden] { display: none; }
.wpt-modal__backdrop { position: absolute; inset: 0; background: rgba(12, 12, 18, .55); }

.wpt-modal__panel {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto;
	width: min(1080px, calc(100% - 32px));
	max-height: min(760px, calc(100% - 32px));
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.wpt-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 4;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--wpt-secondary);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.wpt-modal__media { grid-row: 1 / span 2; padding: 22px; background: #fff; display: flex; align-items: center; }

.wpt-gal { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: #f1f0ec; }
.wpt-gal__track { display: flex; transition: transform .28s ease; }

.wpt-gal__slide { flex: 0 0 100%; }
.wpt-gal__slide img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.wpt-gal__slide--empty { aspect-ratio: 1 / 1; }

.wpt-gal__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 20, 28, .55);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.wpt-gal__nav[hidden] { display: none; }
.wpt-gal__nav--prev { left: 10px; }
.wpt-gal__nav--next { right: 10px; }

.wpt-gal__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.wpt-gal__dot { width: 18px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.wpt-gal__dot.is-active { background: #fff; width: 26px; }

.wpt-tag--offer { top: 16px; left: 16px; background: var(--wpt-secondary); color: #fff; display: inline-flex; align-items: center; gap: 5px; }
.wpt-tag--offer[hidden] { display: none; }

.wpt-modal__body { padding: 30px 30px 10px; overflow-y: auto; }
.wpt-modal__title { margin: 0 0 12px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

.wpt-modal__prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.wpt-modal__price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.wpt-modal__old { font-size: 15px; color: var(--wpt-muted); text-decoration: line-through; }
.wpt-modal__old[hidden], .wpt-modal__save[hidden], .wpt-modal__desc[hidden] { display: none; }

.wpt-modal__save {
	padding: 4px 9px;
	border-radius: 6px;
	background: #e7f7ee;
	color: var(--wpt-primary-dark);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

.wpt-modal__desc {
	margin-top: 18px;
	padding: 18px 20px;
	border-radius: 14px;
	background: #f6f5f3;
	font-size: 15px;
	line-height: 1.55;
	color: #3c3c46;
}

.wpt-vargroup { margin-top: 20px; }
.wpt-vargroup__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--wpt-muted); }
.wpt-req { font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: #fdece9; color: #c0392b; letter-spacing: .02em; }

.wpt-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	margin-bottom: 8px;
	border: 1px solid var(--wpt-line);
	border-radius: 12px;
	cursor: pointer;
	font-size: 14.5px;
}

.wpt-opt:has(input:checked) { border-color: var(--wpt-secondary); background: #f4f6fb; }
.wpt-opt__label { flex: 1; }
.wpt-opt__price { color: var(--wpt-muted); font-size: 13px; }

/* NUEVO 22.3.0 — variaciones de tipo Color: pastilla visual + nombre. */
.wpt-opt--color .wpt-swatch-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .15);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
	flex-shrink: 0;
}
.wpt-vargroup--color .wpt-opt { padding: 8px 12px; }

.wpt-modal__notes { margin-top: 22px; }
.wpt-modal__notes label { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .06em; color: var(--wpt-muted); }

.wpt-modal__notes textarea,
.wpt-checkout textarea,
.wpt-checkout input[type="text"],
.wpt-checkout input[type="tel"],
.wpt-checkout select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--wpt-line);
	border-radius: 12px;
	background: #fbfbfa;
	font: inherit;
	font-size: 14.5px;
	color: var(--wpt-ink);
	outline: 0;
}

.wpt-modal__notes textarea:focus,
.wpt-checkout textarea:focus,
.wpt-checkout input:focus,
.wpt-checkout select:focus { border-color: var(--wpt-secondary); background: #fff; }

.wpt-modal__related { margin-top: 26px; }
.wpt-modal__related[hidden] { display: none; }
.wpt-modal__related h3 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.wpt-modal__related-track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.wpt-modal__related-track::-webkit-scrollbar { display: none; }

.wpt-rel {
	flex: 0 0 132px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--wpt-line);
	border-radius: 14px;
	background: #fff;
	text-align: left;
	cursor: pointer;
}

.wpt-rel__img { display: block; border-radius: 10px; overflow: hidden; background: #f1f0ec; }
.wpt-rel__img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.wpt-rel__name { font-size: 12.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wpt-rel__price { font-size: 13px; font-weight: 800; }

.wpt-modal__foot {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 30px 22px;
	border-top: 1px solid var(--wpt-line);
	background: #fff;
}

.wpt-qty {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	border: 1px solid var(--wpt-line);
	border-radius: 999px;
	background: #fbfbfa;
}

.wpt-qty button { border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--wpt-ink); }
.wpt-qty span { min-width: 18px; text-align: center; font-weight: 700; }
.wpt-qty--sm { gap: 10px; padding: 4px 10px; margin-top: 6px; }
.wpt-qty--sm button { font-size: 15px; }

.wpt-cta--dark { flex: 1; background: var(--wpt-secondary); border: 0; cursor: pointer; border-radius: var(--wpt-radius-btn); padding: 15px 22px; }
.wpt-cta--wa { display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; cursor: pointer; }

/* --------------------------------------------------- Aviso flotante */

.wpt-orderbar {
	position: fixed;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 120;
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--wpt-secondary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
	animation: wpt-pop .22s ease;
}

.wpt-orderbar[hidden] { display: none; }
.wpt-orderbar__left { display: flex; align-items: center; gap: 10px; }
.wpt-orderbar__total { font-weight: 800; }

/*
 * 22.9.276 — MODO CATÁLOGO: SIN CARRITO.
 *
 * El servidor ya NO pinta el carrito cuando la tienda es sólo escaparate
 * (botón de la cabecera, barra flotante, panel de checkout, pie de la ficha y
 * botón «añadir» de la tarjeta). Esta regla es DEFENSA EN PROFUNDIDAD: si
 * quedara un resto —una página cacheada, una plantilla de tema que copia el
 * marcado—, se esconde. La tienda se ve; no se pide.
 */
.wpt-store--catalog .wpt-round--cart,
.wpt-store--catalog .wpt-orderbar,
.wpt-store--catalog .wpt-cart,
.wpt-store--catalog .wpt-product-card__add,
.wpt-store--catalog .wpt-modal__foot,
.wpt-store--catalog .wpt-modal__notes { display: none !important; }

@keyframes wpt-pop {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

/* ------------------------------------------------ Carrito con checkout */

.wpt-cart__panel { width: min(486px, 100%); }
.wpt-cart__panel > header { padding: 20px 22px; }
.wpt-cart__panel > header strong { font-size: 19px; font-weight: 800; }


.wpt-cart__scroll { flex: 1; overflow-y: auto; background: #f7f7f6; padding: 16px; }
.wpt-cart__items { display: flex; flex-direction: column; gap: 10px; }

.wpt-citem {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(20, 20, 30, .05);
}

.wpt-citem__img { flex: none; width: 62px; height: 62px; border-radius: 10px; overflow: hidden; background: #f1f0ec; }
.wpt-citem__img img { width: 100%; height: 100%; object-fit: cover; }
.wpt-citem__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpt-citem__body strong { font-size: 14.5px; font-weight: 700; }
.wpt-citem__body small { font-size: 12px; color: var(--wpt-muted); }
.wpt-citem__vars { color: #4b4b57 !important; }
.wpt-citem__note { font-style: italic; }
.wpt-citem__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.wpt-citem__right b { font-size: 15px; font-weight: 800; }
.wpt-citem__del { border: 0; background: transparent; cursor: pointer; font-size: 15px; opacity: .75; }

.wpt-checkout { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.wpt-checkout[hidden] { display: none; }

.wpt-block { padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(20, 20, 30, .05); }
.wpt-block[hidden] { display: none; }
.wpt-block h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.wpt-lbl { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 600; }
.wpt-lbl:first-child { margin-top: 0; }

.wpt-phone { display: flex; gap: 8px; }
.wpt-phone select { flex: 0 0 132px; }

.wpt-choice {
	display: block;
	position: relative;
	padding: 14px 16px 14px 44px;
	margin-bottom: 8px;
	border: 1px solid var(--wpt-line);
	border-radius: 12px;
	cursor: pointer;
	background: #fff;
}

.wpt-choice input { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
.wpt-choice.is-active { border-color: var(--wpt-secondary); background: #f4f6fb; }
.wpt-choice__name { font-size: 14.5px; font-weight: 600; }
.wpt-choice small { display: block; margin-top: 2px; font-size: 12px; color: var(--wpt-muted); }

.wpt-coupon { display: flex; gap: 8px; }
.wpt-coupon input { flex: 1; text-transform: uppercase; }

.wpt-btn-ghost {
	flex: none;
	padding: 12px 18px;
	border: 1px solid var(--wpt-line);
	border-radius: 12px;
	background: #fbfbfa;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	color: var(--wpt-muted);
}

.wpt-coupon__msg { margin: 8px 0 0; font-size: 12.5px; }
.wpt-coupon__msg[hidden] { display: none; }
.wpt-coupon__msg.is-ok { color: var(--wpt-primary-dark); }
.wpt-coupon__msg.is-bad { color: #c0392b; }

.wpt-totals { margin-bottom: 14px; font-size: 14px; }
.wpt-totals > div { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; color: var(--wpt-muted); }
.wpt-totals > div[hidden] { display: none; }
.wpt-totals__grand { margin-top: 6px; color: var(--wpt-ink) !important; font-size: 16px; }
.wpt-totals__grand strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

.wpt-cta--wa { background: #22c55e; border-radius: 999px; padding: 15px 20px; }

/* ------------------------------------------------------------- Móvil */

@media (max-width: 900px) {
	.wpt-modal__panel {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
		width: calc(100% - 20px);
		max-height: calc(100% - 20px);
	}
	.wpt-modal__media { grid-row: 1; padding: 14px 14px 0; }
	.wpt-modal__body { padding: 18px 18px 8px; }
	.wpt-modal__foot { grid-column: 1; padding: 12px 16px 16px; }
	.wpt-modal__title { font-size: 21px; }
	.wpt-modal__price { font-size: 24px; }
	.wpt-cat { max-width: 200px; padding: 6px 14px 6px 6px; }
	.wpt-cat__img { width: 30px; height: 30px; }
	.wpt-cat__label { font-size: 13px; }
	.wpt-orderbar { width: calc(100% - 28px); justify-content: space-between; }
}

/*
 * Ajuste 20.2.0: la columna de la imagen ocupa toda la altura de la ventana,
 * como en la maqueta, en vez de dejar franjas blancas arriba y abajo.
 */
@media (min-width: 901px) {
	.wpt-modal__media { align-items: stretch; padding: 18px; }
	.wpt-modal__media .wpt-gal { height: 100%; }
	.wpt-modal__media .wpt-gal__track { height: 100%; }
	.wpt-modal__media .wpt-gal__slide { display: flex; }
	.wpt-modal__media .wpt-gal__slide img { height: 100%; aspect-ratio: auto; }
}

/* ==========================================================================
 * 20.4.0 — Arreglos de detalle reportados: relacionados invisibles, X de
 * cerrar descuadrada, carrito sin botón de eliminar y checkout más claro.
 * ========================================================================== */

/*
 * Blindaje: el tema ya no carga en la tienda, pero si alguno cuela estilos se
 * fuerza aquí la tipografía.
 *
 * OJO: aquí NO puede ir `color` para los botones. `.wpt-store button` tiene más
 * especificidad (0,1,1) que `.wpt-cta` (0,1,0), así que pintaba de color tinta
 * el texto de los botones oscuros: "Añadir al pedido" quedaba negro sobre negro
 * y el icono de cerrar desaparecía dentro de su círculo.
 */
.wpt-store button,
.wpt-store input,
.wpt-store select,
.wpt-store textarea { font-family: inherit; }

.wpt-store input,
.wpt-store select,
.wpt-store textarea { color: var(--wpt-ink); }

/* ------------------------------------------------- También te puede interesar */

.wpt-modal__related h3 { color: var(--wpt-ink); }

.wpt-modal__related-track { gap: 14px; padding: 4px 2px 10px; }

.wpt-rel {
	flex: 0 0 150px;
	gap: 8px;
	padding: 10px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--wpt-line);
	box-shadow: 0 1px 2px rgba(20, 20, 30, .04);
	color: var(--wpt-ink) !important;
	transition: transform .15s ease, box-shadow .15s ease;
}

.wpt-rel:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 20, 30, .10); }
.wpt-rel__img { border-radius: 12px; }
.wpt-rel__name { color: var(--wpt-ink) !important; font-size: 13px; min-height: 2.4em; }
.wpt-rel__price { color: var(--wpt-ink) !important; font-size: 14px; font-weight: 800; }

/* ---------------------------------------------------------- Botones de cerrar */

.wpt-modal__close,
.wpt-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	min-width: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	line-height: 0;
	cursor: pointer;
	flex: none;
	box-sizing: border-box;
}

.wpt-modal__close { background: var(--wpt-secondary); color: #fff; }
.wpt-modal__close:hover { background: #33333f; }

.wpt-iconbtn { background: #f1f2f5; color: #4b4b57; }
.wpt-iconbtn:hover { background: #e5e6ea; color: var(--wpt-ink); }

/* ------------------------------------------------------------- Carrito nuevo */

.wpt-cart__panel > header {
	align-items: center;
	padding: 18px 20px;
	gap: 12px;
}

.wpt-cart__panel > header > div { display: flex; align-items: baseline; gap: 12px; }
.wpt-cart__panel > header strong { font-size: 19px; font-weight: 800; }

.wpt-cart__clear {
	border: 0;
	background: none;
	padding: 0;
	font-size: 12.5px;
	color: var(--wpt-muted);
	cursor: pointer;
	text-decoration: underline;
}

.wpt-cart__clear[hidden] { display: none; }
.wpt-cart__clear:hover { color: #d14343; }

.wpt-citem {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 10px;
	padding: 12px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(20, 20, 30, .05);
}

.wpt-citem__img { grid-row: span 2; width: 62px; height: 62px; align-self: start; }
.wpt-citem__body { grid-column: 2; }
.wpt-citem__body strong { font-size: 14.5px; line-height: 1.25; }

.wpt-citem__del {
	grid-column: 3;
	justify-self: end;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: #fdeceb;
	color: #b3261e;
	cursor: pointer;
	line-height: 0;
}

.wpt-citem__del:hover { background: #f9d7d5; }

.wpt-citem .wpt-qty--sm { grid-column: 2; justify-self: start; margin: 0; }
.wpt-citem__total { grid-column: 3; justify-self: end; font-size: 15px; font-weight: 800; }

.wpt-qty--sm { padding: 5px 12px; gap: 12px; border-radius: 999px; }
.wpt-qty--sm button { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; }

/* ------------------------------------------------------------ Checkout claro */

.wpt-block h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 15.5px;
	font-weight: 800;
}

.wpt-block h3::before {
	content: counter(wpt-step);
	counter-increment: wpt-step;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wpt-secondary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.wpt-checkout { counter-reset: wpt-step; }
.wpt-block:last-child h3::before { content: none; }

.wpt-choice { transition: border-color .15s ease, background .15s ease; }
.wpt-choice:hover { border-color: #c9ccd6; }

.wpt-cart__panel > footer {
	box-shadow: 0 -6px 20px rgba(20, 20, 30, .06);
	background: #fff;
}

.wpt-cta--wa { font-size: 15px; padding: 16px 20px; }
.wpt-cta--wa:disabled { opacity: .6; cursor: progress; }

/*
 * 22.9.271 — POR QUÉ EL BOTÓN ESTÁ DESACTIVADO.
 *
 * El aviso lo escribe el JS con el texto del servidor (incluye cuándo se
 * vuelve a abrir). Sin estilo quedaría pegado al botón y parecería parte del
 * mismo; se le da su propio aire de nota, en el mismo tono que el chip
 * «Cerrado» del perfil.
 */
.wpt-closed-note {
	margin: 10px 0 0;
	padding: 9px 12px;
	border-radius: 10px;
	background: #fdeceb;
	color: #b3261e;
	font-size: 13px;
	line-height: 1.45;
	text-align: center;
}

.wpt-closed-note[hidden] { display: none; }

/* En móvil el panel ocupa toda la pantalla y el pie queda a mano. */
@media (max-width: 640px) {
	.wpt-cart__panel { width: 100%; border-radius: 0; }
	.wpt-citem { grid-template-columns: 54px minmax(0, 1fr) auto; }
	.wpt-citem__img { width: 54px; height: 54px; }
	.wpt-block { padding: 14px; }
}

/*
 * Especificidad: `.wpt-store button { font: inherit }` (0,1,1) ganaba a
 * `.wpt-cart__clear` (0,1,0) y el enlace "Vaciar" salía con el tamaño del
 * título. Se sube la especificidad de los botones de texto del carrito.
 */
.wpt-cart__panel .wpt-cart__clear { font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.wpt-cart__panel .wpt-citem__body strong { font-size: 14.5px; }
.wpt-cart__panel .wpt-citem__body small { font-size: 12px; }
.wpt-cart__panel .wpt-qty--sm button { font-size: 15px; }
.wpt-modal__foot .wpt-qty button { font-size: 18px; }


/* ==========================================================================
 * LAS VARIANTES DEL CONSTRUCTOR YA NO VIVEN AQUI — 22.0.0
 *
 * Hasta la 21.0.0 este archivo llevaba el CSS de todas las variantes. Con 616
 * variantes eso serian mas de 100 KB que descargarian TODAS las tiendas para
 * usar una sola combinacion.
 *
 * Ahora cada tienda emite en linea unicamente las declaraciones de lo que
 * eligio (ServicesStore_Design::css_for), unos cientos de bytes. Lo que queda
 * en esta hoja es la base y los valores de fabrica.
 * ========================================================================== */

/* --------------------------------------------------------- Sobre la tienda */

.wpt-about {
	max-width: 760px;
	margin: 0 auto 26px;
	padding: 18px 22px;
	background: var(--wpt-surface);
	border: 1px solid var(--wpt-line);
	border-radius: var(--wpt-radius);
	text-align: center;
	line-height: 1.65;
	color: var(--wpt-muted);
}

.wpt-about h2 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--wpt-ink);
}

.wpt-about p { margin: 0; }
.wpt-about p + p { margin-top: 10px; }

/* ------------------------------------------------ Banners entre categorías */

/*
 * REESCRITO 22.1.0 — cada banner lleva su propio ancho, así que la fila es
 * flexible en vez de una rejilla de N columnas fijas. Dos «mitad» seguidos
 * hacen una fila de dos; tres «tercio», una de tres.
 */
.wpt-midbanner {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 auto 26px;
	max-width: 1180px;
	padding: 0 16px;
}

.wpt-midbanner:empty { display: none; }

.wpt-midbanner__item {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--wpt-radius);
	background: var(--wpt-line);
	flex: 1 1 100%;
	/*
	 * 22.9.224 — la transición vive en la base, no en cada receta: así los 49
	 * efectos de «Al pasar por encima» sólo tienen que declarar el estado
	 * final. Sin esto, cada efecto necesitaría repetir la transición y el que
	 * se olvidara daría un salto seco.
	 */
	transition: transform .35s ease, box-shadow .35s ease, border-radius .35s ease,
		border-color .35s ease, outline-color .35s ease, opacity .35s ease;
}

/*
 * 22.9.224 — DOS PSEUDOELEMENTOS, DOS TRABAJOS.
 *
 * `::before` es la veladura («Veladura de la foto») y `::after` son los
 * barridos y destellos de los efectos. Si los dos grupos usaran el mismo
 * pseudoelemento se pisarían el `background` y ganaría el último que se
 * emitiera: elegir una veladura habría borrado el barrido y al revés.
 *
 * La geometría va aquí para que las recetas sólo declaren el color o la
 * transformación.
 */
.wpt-midbanner__item::before,
.wpt-midbanner__item::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wpt-midbanner__item::before { z-index: 1; }

.wpt-midbanner__item::after {
	z-index: 2;
	transition: transform .45s ease, opacity .35s ease;
}

/*
 * El reparto lo decide PHP (Banners::rows): cada .wpt-midbanner es UNA fila
 * que ya suma como mucho doce doceavos. Aqui solo se traduce cada ancho a su
 * fraccion, descontando el hueco entre banners.
 *
 * 22.9.224 — seis anchos (12 / 8 / 6 / 4 / 3 / 2 doceavos) en vez de tres.
 */
.wpt-midbanner__item.is-full      { flex: 1 1 100%;                 aspect-ratio: 16 / 5; }
.wpt-midbanner__item.is-twothirds { flex: 1 1 calc(66.666% - 4px);  aspect-ratio: 11 / 5; }
.wpt-midbanner__item.is-half      { flex: 1 1 calc(50% - 6px);      aspect-ratio: 8 / 5; }
.wpt-midbanner__item.is-third     { flex: 1 1 calc(33.333% - 8px);  aspect-ratio: 6 / 5; }
.wpt-midbanner__item.is-quarter   { flex: 1 1 calc(25% - 9px);      aspect-ratio: 5 / 4; }
.wpt-midbanner__item.is-sixth     { flex: 1 1 calc(16.666% - 10px); aspect-ratio: 1 / 1; }

/*
 * Una fila incompleta —dos tercios sueltos, por ejemplo— se estira para
 * ocupar el ancho en vez de dejar un hueco a la derecha, que se lee como si
 * faltara algo por cargar.
 *
 * 22.9.224 — SÓLO EN ESCRITORIO, y esto arregla un fallo que llevaba ahí desde
 * la 22.1.0: `.wpt-midbanner[data-count="2"] .wpt-midbanner__item` tiene
 * especificidad (0,3,0) y GANABA a la regla de apilar de móvil, que es (0,2,0).
 * Resultado: en un teléfono de 390 px, una fila de dos banners se quedaba en
 * dos columnas de 173 px en vez de apilarse — justo lo que el comentario de
 * abajo dice que hay que evitar. En móvil todo se apila; el estirón de la fila
 * incompleta sólo tiene sentido cuando hay ancho de sobra.
 */
@media (min-width: 641px) {
	.wpt-midbanner[data-count="1"] .wpt-midbanner__item { flex-basis: 100%; }
	.wpt-midbanner[data-count="2"] .wpt-midbanner__item { flex-basis: calc(50% - 6px); }
}

.wpt-midbanner__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease, filter .45s ease;
}

@media (max-width: 640px) {
	/*
	 * En móvil se apilan siempre: tres tiras de 110 px son ilegibles.
	 * 22.9.224 — también los anchos nuevos (dos tercios, cuarto y sexto).
	 */
	.wpt-midbanner__item.is-twothirds,
	.wpt-midbanner__item.is-half,
	.wpt-midbanner__item.is-third,
	.wpt-midbanner__item.is-quarter,
	.wpt-midbanner__item.is-sixth {
		flex-basis: 100%;
		aspect-ratio: 16 / 7;
	}
}

/* ============================================== CARRUSEL DE PRODUCTOS
 *
 * NUEVO 22.1.0. Los modos carrusel se arrastran con el dedo desde el
 * principio, pero con ratón no hay forma cómoda de desplazarse en horizontal.
 * Estas flechas las añade storefront.js SÓLO cuando hace falta —hay desborde y
 * hay puntero fino—, así que en móvil no estorban.
 * ================================================================== */

.wpt-carousel {
	position: relative;
}

.wpt-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wpt-surface);
	color: var(--wpt-ink);
	cursor: pointer;
	box-shadow: 0 3px 14px rgba(20, 20, 30, .2);
	opacity: 0;
	transition: opacity .18s ease, background .15s ease;
}

.wpt-carousel:hover .wpt-carousel__arrow,
.wpt-carousel__arrow:focus-visible { opacity: 1; }

.wpt-carousel__arrow[disabled] { opacity: 0 !important; pointer-events: none; }
.wpt-carousel__arrow--prev { left: -6px; }
.wpt-carousel__arrow--next { right: -6px; }

/*
 * Degradados en los bordes: sin ellos, una fila cortada parece que se acaba
 * ahí y nadie intenta desplazarla.
 */
.wpt-carousel::before,
.wpt-carousel::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 10px;
	width: 42px;
	pointer-events: none;
	z-index: 4;
	opacity: 0;
	transition: opacity .2s ease;
}

.wpt-carousel::before {
	left: 0;
	background: linear-gradient(90deg, var(--wpt-bg), transparent);
}

.wpt-carousel::after {
	right: 0;
	background: linear-gradient(270deg, var(--wpt-bg), transparent);
}

.wpt-carousel.can-prev::before,
.wpt-carousel.can-next::after { opacity: 1; }

@media (hover: none) {
	/* Con el dedo no hacen falta flechas ni pistas. */
	.wpt-carousel__arrow { display: none; }
	.wpt-carousel::before,
	.wpt-carousel::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wpt-carousel__arrow,
	.wpt-carousel::before,
	.wpt-carousel::after { transition: none; }
}

/* ================================================ RENDIMIENTO
 *
 * NUEVO 22.1.0.
 *
 * `content-visibility: auto` le dice al navegador que no calcule ni pinte las
 * secciones que aún no se ven. En un catálogo de veinte categorías eso evita
 * maquetar cientos de tarjetas antes del primer pintado.
 *
 * `contain-intrinsic-size` es imprescindible acompañándolo: sin una altura
 * estimada, la barra de scroll cambia de tamaño mientras se baja y la página
 * "salta". El valor es una media generosa de una sección con dos filas.
 * ============================================================== */

.wpt-section {
	content-visibility: auto;
	contain-intrinsic-size: auto 640px;
}

/*
 * La PRIMERA sección no se difiere: es la que se ve al entrar, y aplicarle
 * content-visibility retrasaría justo lo que el visitante está mirando.
 */
.wpt-sections > .wpt-section:first-of-type {
	content-visibility: visible;
	contain-intrinsic-size: none;
}

/* Lo mismo para el modal y el carrito: sólo existen al abrirse. */
.wpt-modal,
.wpt-cart {
	content-visibility: auto;
	contain-intrinsic-size: auto 0;
}

/* === CATALOG RESPONSIVE MASTER 22.9.95 — anti-overflow + price fix === */
.wpt-store { overflow-x: clip; }
.wpt-products { min-width: 0; }
.wpt-product-card__title,
.wpt-product-card__excerpt,
.wpt-product-card__price,
.wpt-price { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
@media (max-width: 640px) {
	.wpt-product-card__price { font-size: 15px; }
	.wpt-price { font-size: 16px; }
	.wpt-product-card__title { font-size: 13px; }
}
@media (max-width: 360px) {
	.wpt-product-card__price { font-size: 14px; }
	.wpt-price { font-size: 15px; }
}


/* ==========================================================================
   22.9.182 — BARRA DE CATEGORÍAS: fija de verdad, categoría activa y contraste
   --------------------------------------------------------------------------
   Bloque ADITIVO. No modifica ninguna regla anterior.
   ========================================================================== */

/* ---------- La sección se para DEBAJO de la barra, no detrás ------------- */
/* Antes era un `scroll-margin-top: 120px` fijo que no coincidía con la altura
   real de la barra (cambia entre escritorio y móvil, y según haya barra de
   administración de WordPress). El JS publica la altura medida en
   `--wpt-catbar-h`, así que al pulsar una categoría el título de la sección
   queda visible y no tapado por la barra. */
.wpt-store .wpt-section {
	scroll-margin-top: calc(var(--wpt-catbar-h, 108px) + 14px);
}

/* ---------- Respaldo 1: navegador sin `position: sticky` ----------------- */
@supports not ((position: sticky) or (position: -webkit-sticky)) {
	.wpt-catbar.is-stuck {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 6px 20px rgba(20, 20, 30, .07);
	}
	body.admin-bar .wpt-catbar.is-stuck { top: 32px; }
}

/* ---------- Respaldo 2: un antepasado del tema anula el sticky ----------- */
/* Causa habitual de "la barra no se queda fija": el tema envuelve el
   contenido en un contenedor con `overflow`, lo que crea un contenedor de
   desplazamiento y desactiva `position: sticky` en sus descendientes. El JS
   lo detecta midiendo y añade `.is-fixed`; el hueco lo reserva el placeholder
   para que la página no dé un salto. `left` y `width` los fija el JS al ancho
   real del escaparate (por si la tienda va incrustada en una columna). */
.wpt-catbar.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 45;
	background: #fff;
	box-shadow: 0 6px 20px rgba(20, 20, 30, .07);
}

body.admin-bar .wpt-catbar.is-fixed { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .wpt-catbar.is-fixed { top: 46px; }
}

.wpt-catbar__ph { display: block; }
.wpt-catbar__ph[hidden] { display: none !important; }

/* ---------- Efecto claro de "estás en esta categoría" ------------------- */
/* Antes la píldora activa sólo cambiaba la sombra: en la práctica costaba
   ver cuál estaba seleccionada. Ahora se distingue por color de marca (el
   mismo que elija la tienda en Apariencia), con anillo en la miniatura y
   etiqueta en color. */
.wpt-cat.is-active {
	background: #fff;
	color: var(--wpt-ink);
	box-shadow: 0 1px 2px rgba(20, 20, 30, .08), 0 8px 20px rgba(20, 20, 30, .12);
}

.wpt-cat.is-active .wpt-cat__img {
	box-shadow:
		0 0 0 2px var(--wpt-primary),
		0 6px 16px color-mix(in srgb, var(--wpt-primary) 32%, transparent);
}

.wpt-cat.is-active .wpt-cat__label {
	color: var(--wpt-primary-dark, var(--wpt-primary));
	font-weight: 800;
}

.wpt-cat { transition: background .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease; }
.wpt-cat.is-active { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
	.wpt-cat { transition: none; }
	.wpt-cat.is-active { transform: none; }
}


/* ==========================================================================
   22.9.183 — VENTANA DE PRODUCTO: experiencia y responsive (móvil/tablet/PC)
   --------------------------------------------------------------------------
   Bloque ADITIVO. No modifica ninguna regla anterior.
   ========================================================================== */

/* ---------- La foto del producto ya no se recorta ------------------------ */
/* `object-fit: cover` dentro de una columna estrecha y alta recortaba los
   lados de las fotos (en PC la columna mide ~540×700, muy vertical). Un
   producto recortado no se puede valorar bien. Con `contain` se ve ENTERO
   sobre el fondo neutro del marco, que ya existía para esto. */
.wpt-gal__slide img { object-fit: contain; }

@media (min-width: 901px) {
	.wpt-modal__media .wpt-gal__slide img { object-fit: contain; }
}

/* ---------- Aire en el cuerpo y sin arrastrar el scroll de la página ----- */
/* Antes el relleno inferior era de 10px: la fila de "También te puede
   interesar" quedaba pegada al pie y parecía cortada. */
.wpt-modal__body {
	padding: 30px 30px 22px;
	overscroll-behavior: contain;
	scroll-padding-bottom: 18px;
}

/* Nombres de producto largos (suelen ir en mayúsculas) no deben desbordar. */
.wpt-modal__title { overflow-wrap: anywhere; }

/* ---------- Relacionados: deslizamiento con imán ------------------------- */
.wpt-modal__related-track {
	scroll-snap-type: x proximity;
	scroll-padding-inline: 2px;
	overscroll-behavior-x: contain;
}
.wpt-rel { scroll-snap-align: start; }

/* ---------- Controles táctiles: la X y las flechas crecen ---------------- */
.wpt-modal__close {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
}
.wpt-gal__nav { width: 40px; height: 40px; }

/* El botón principal puede encogerse sin desbordar el pie. */
.wpt-cta--dark { min-width: 0; }

/* ==========================================================================
   TABLET (901–1200px): dos columnas, pero con aire
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1200px) {
	.wpt-modal__panel {
		width: min(940px, calc(100% - 24px));
		max-height: min(700px, calc(100% - 24px));
	}
	.wpt-modal__media { padding: 16px; }
	.wpt-modal__body { padding: 24px 22px 18px; }
	.wpt-modal__foot { padding: 14px 22px 18px; }
	.wpt-modal__title { font-size: 23px; }
	.wpt-modal__price { font-size: 26px; }
	.wpt-rel { flex: 0 0 140px; }
}

/* ==========================================================================
   MÓVIL GRANDE / TABLET PEQUEÑA (601–900px): una columna con imagen acotada
   ========================================================================== */
@media (min-width: 601px) and (max-width: 900px) {
	.wpt-gal { height: min(38vh, 320px); }
	.wpt-gal__track,
	.wpt-gal__slide,
	.wpt-gal__slide img { height: 100%; }
	.wpt-gal__slide img { aspect-ratio: auto; }
	.wpt-modal__body { padding: 20px 20px 20px; }
}

/* ==========================================================================
   MÓVIL (≤600px): pantalla completa, tipo aplicación
   --------------------------------------------------------------------------
   En un teléfono la tarjeta centrada desperdiciaba margen y obligaba a un
   doble desplazamiento incómodo. A pantalla completa se gana espacio para la
   foto, el detalle y los relacionados, y el pie queda siempre visible.
   ========================================================================== */
@media (max-width: 600px) {
	.wpt-modal__panel {
		inset: 0;
		transform: none;
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
	}

	/* La foto va a sangre, sin marco. */
	.wpt-modal__media { padding: 0; }
	.wpt-gal { border-radius: 0; height: min(42vh, 340px); }
	.wpt-gal__track,
	.wpt-gal__slide,
	.wpt-gal__slide img { height: 100%; }
	.wpt-gal__slide img { aspect-ratio: auto; }

	.wpt-modal__body { padding: 18px 16px 20px; }
	.wpt-modal__title { font-size: 20px; margin-bottom: 10px; }
	.wpt-modal__price { font-size: 25px; }
	.wpt-modal__desc { margin-top: 14px; padding: 14px 16px; font-size: 14.5px; }
	.wpt-modal__notes { margin-top: 18px; }
	.wpt-modal__related { margin-top: 20px; }
	.wpt-modal__related h3 { font-size: 17px; }
	.wpt-modal__related-track { gap: 10px; }
	.wpt-rel { flex: 0 0 132px; }

	/* Pie: siempre visible y respetando la zona segura del iPhone. */
	.wpt-modal__foot {
		padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
		gap: 10px;
	}
	.wpt-qty { padding: 8px 12px; gap: 12px; }
	.wpt-qty button { font-size: 19px; }
	.wpt-cta--dark { padding: 14px 16px; font-size: 14.5px; }

	/* La X queda sobre la foto: un poco más cerca del borde. */
	.wpt-modal__close { top: 10px; right: 10px; }

	/* Los relacionados se pueden deslizar de lado: pista con la tarjeta
	   siguiente asomando y punto de anclaje. */
	.wpt-modal__related-track { padding-right: 16px; }
}

/* En pantallas muy estrechas el pie se apila para que nada se aplaste. */
@media (max-width: 380px) {
	.wpt-modal__foot { flex-wrap: wrap; }
	.wpt-modal__foot .wpt-qty { flex: 0 0 auto; }
	.wpt-cta--dark { flex: 1 1 100%; }
}


/* ==========================================================================
   22.9.184 — PIE DE LA FICHA DE PRODUCTO: botón proporcionado
   --------------------------------------------------------------------------
   El botón era una sola cadena larga que en móvil partía en dos líneas por
   accidente y quedaba enorme. Ahora etiqueta e importe son elementos propios:
   apilados y compactos en móvil, en una línea en escritorio. Bloque ADITIVO.
   ========================================================================== */

.wpt-cta--dark {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	line-height: 1.2;
}

/* La etiqueta puede encogerse; el importe nunca se parte ni se recorta. */
.wpt-cta__label {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wpt-cta__sep { opacity: .55; }
.wpt-cta__amount {
	white-space: nowrap;
	font-weight: 800;
	letter-spacing: -.01em;
}

/* El pie se separa del contenido que hace scroll por encima. */
.wpt-modal__foot { box-shadow: 0 -6px 18px rgba(20, 20, 30, .05); }

@media (max-width: 600px) {
	/*
	 * En móvil el botón vuelve a UNA línea, pero con la etiqueta y el importe
	 * ya separados: el problema no era que el texto fuera largo, sino que al
	 * ser una sola cadena no podía encogerse con criterio y partía por donde
	 * caía. Ahora la etiqueta puede recortarse con puntos suspensivos y el
	 * importe nunca se parte. Altura resultante ≈ 46 px (antes ≈ 72 px).
	 */
	.wpt-cta--dark {
		flex-direction: row;
		gap: 7px;
		padding: 14px 14px;
		border-radius: 999px;
	}
	.wpt-cta__sep { display: none; }
	.wpt-cta__label { font-size: 14px; font-weight: 600; opacity: .95; }
	.wpt-cta__amount { font-size: 15px; }

	/* Pie más ligero: antes se comía ~150 px de la pantalla. */
	.wpt-modal__foot {
		padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
		gap: 10px;
	}

	/* El contador de cantidad, más compacto. */
	.wpt-qty { padding: 6px 10px; gap: 10px; }
	.wpt-qty button { font-size: 18px; }
}

/* ==========================================================================
   PULIDO — la ficha se ve más cuidada al abrir un producto
   ========================================================================== */

/* La nota del pedido no necesita ocupar media pantalla en móvil. */
@media (max-width: 600px) {
	.wpt-modal__notes textarea { min-height: 64px; }
}

/* Los relacionados: tarjeta con relieve al pasar por encima. */
.wpt-rel {
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.wpt-rel:hover {
	/* Esta hoja usa --wpt-line (no --wpt-border): se aclara un punto más. */
	border-color: #dedad2;
	box-shadow: 0 2px 6px rgba(20, 20, 30, .06), 0 10px 24px rgba(20, 20, 30, .08);
	transform: translateY(-2px);
}
.wpt-rel__name { color: var(--wpt-ink); }

@media (prefers-reduced-motion: reduce) {
	.wpt-rel { transition: none; }
	.wpt-rel:hover { transform: none; }
}


/* ==========================================================================
   22.9.185 — CHECKOUT: diseño, UX/DX y responsive
   --------------------------------------------------------------------------
   Bloque ADITIVO. No modifica ninguna regla anterior ni toca el JS: todos los
   ganchos (data-wpt-co-*, data-wpt-ship, data-wpt-pay, data-wpt-cart-*) siguen
   intactos.
   ========================================================================== */

/* ------------------------------------------------ Cabecera del pedido ---- */
/* "Tu pedido" y "Vaciar" estaban pegados uno al lado del otro. Ahora el enlace
   tiene su propio espacio y se lee como un botón secundario, no como parte del
   título. */
.wpt-cart__panel > header > div {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.wpt-cart__panel > header > div > strong { white-space: nowrap; }

.wpt-cart__panel .wpt-cart__clear {
	flex: none;
	padding: 5px 12px;
	border: 1px solid #e6e3dd;
	border-radius: 999px;
	background: #fbfbfa;
	color: var(--wpt-muted);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.wpt-cart__panel .wpt-cart__clear:hover {
	background: #fdeceb;
	border-color: #f5c6c2;
	color: #b3261e;
}

/* ------------------------------------------- Campos con altura táctil ---- */
/* Todos los campos del checkout comparten altura mínima para que la fila se
   vea alineada y el dedo acierte. */
.wpt-checkout input[type="text"],
.wpt-checkout input[type="tel"],
.wpt-checkout select,
.wpt-checkout textarea {
	min-height: 48px;
	border-radius: 12px;
}
.wpt-checkout textarea { min-height: 76px; padding-top: 12px; }

/* ------------------------------------- WhatsApp: el país ya no se corta --- */
/*
 * El campo usaba `.wpt-phone` con el select a 132 px FIJOS, así que
 * "Colombia +57" no cabía y salía truncado ("Colombia +5"). Además el select
 * no tenía la misma altura ni el mismo borde que el número, y la flecha era la
 * del sistema. Aquí se le da ancho suficiente (hasta el 48 % de la fila),
 * flecha propia y altura homogénea. Sin tocar el marcado.
 */
.wpt-phone {
	display: flex;
	gap: 8px;
	align-items: stretch;
	min-width: 0;
}
.wpt-phone select {
	flex: 0 1 auto;
	width: auto;
	min-width: 124px;
	max-width: 48%;
	min-height: 48px;
	padding: 12px 32px 12px 14px;
	border: 1px solid var(--wpt-line);
	border-radius: 12px;
	background-color: #fbfbfa;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7c88' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 12px 12px;
	color: var(--wpt-ink);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.2;
	/* Si un indicativo muy largo no cupiera, se recorta con puntos
	   suspensivos en vez de cortarse a mitad de carácter. */
	text-overflow: ellipsis;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.wpt-phone input { flex: 1 1 auto; min-width: 0; }

/* -------------------------------------- Tarjetas de opción (envío/pago) -- */
/* El borde era de 1 px casi invisible y el área táctil, justa. Ahora la
   tarjeta entera es un objetivo cómodo y la seleccionada se distingue por
   borde, fondo y un anillo interior. */
.wpt-choice {
	min-height: 54px;
	padding: 15px 16px 15px 46px;
	border: 1.5px solid #e6e3dd;
	border-radius: 14px;
	background: #fff;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.wpt-choice:hover { border-color: #c9ccd6; }
.wpt-choice input {
	width: 19px;
	height: 19px;
	accent-color: var(--wpt-secondary);
	cursor: pointer;
}
.wpt-choice.is-active {
	border-color: var(--wpt-secondary);
	background: #f4f6fb;
	box-shadow: 0 0 0 1px var(--wpt-secondary) inset;
}
.wpt-choice__name { font-size: 15px; font-weight: 600; }

/* ------------------------------------------------------- Totales -------- */
/* Se añade una línea divisoria antes del total: antes los tres importes
   quedaban apilados sin jerarquía visual. */
.wpt-totals { font-size: 14.5px; }
.wpt-totals > div { padding: 4px 0; }
.wpt-totals__grand {
	margin-top: 10px;
	padding-top: 12px !important;
	border-top: 1px solid var(--wpt-line);
	font-size: 16px;
}
.wpt-totals__grand strong { font-size: 27px; }

/* --------------------------------------------- Pie: zona segura del iPhone */
/* El botón verde quedaba pegado al borde inferior y, en un iPhone con barra de
   gestos, parte del relleno caía bajo la barra del sistema. */
.wpt-cart__panel > footer {
	padding: 16px 20px calc(22px + env(safe-area-inset-bottom, 0px));
}

.wpt-cta--wa {
	min-height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-size: 15.5px;
	font-weight: 700;
}

/* --------------------------------------------------- Tarjeta del artículo */
.wpt-citem__del { width: 34px; height: 34px; border-radius: 10px; }
.wpt-citem__total { font-size: 15.5px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
	/*
	 * iOS hace ZOOM automático al enfocar un campo con tipografía menor de
	 * 16 px, y eso descuadra el panel entero. Se sube a 16 px sólo en móvil.
	 */
	.wpt-checkout input[type="text"],
	.wpt-checkout input[type="tel"],
	.wpt-checkout select,
	.wpt-checkout textarea { font-size: 16px; }

	.wpt-phone select { font-size: 15.5px; min-width: 130px; max-width: 50%; }

	.wpt-block { padding: 15px; }
	.wpt-block h3 { font-size: 15.5px; }
	.wpt-choice { padding: 14px 14px 14px 44px; }
	.wpt-choice__name { font-size: 14.5px; }
	.wpt-totals__grand strong { font-size: 24px; }
	.wpt-cart__panel > footer { padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
	.wpt-cta--wa { min-height: 52px; font-size: 15px; }
}

/* En pantallas muy estrechas el país y el número se apilan: así ninguno se
   corta aunque el indicativo sea largo ("Rep. Dominicana +809"). */
@media (max-width: 380px) {
	.wpt-phone { flex-wrap: wrap; }
	.wpt-phone select { flex: 1 1 100%; max-width: 100%; width: 100%; }
	.wpt-phone input { flex: 1 1 100%; }
	.wpt-cart__panel > header > div { gap: 8px; }
	.wpt-cart__panel .wpt-cart__clear { padding: 4px 10px; font-size: 12px; }
}


/* ==========================================================================
   22.9.186 — ESCAPARATE: visibilidad, rendimiento, accesibilidad y pulido
   --------------------------------------------------------------------------
   Bloque ADITIVO. No modifica ninguna regla anterior.
   ========================================================================== */

/* ------------- Portada como imagen real (antes era un fondo CSS) --------- */
/* Como `background-image` no se podía cargar en diferido ni adaptar al ancho:
   era la imagen más pesada de la página y se bajaba entera también en móvil. */
.wpt-hero__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El velo oscuro tiene que ir POR ENCIMA de la foto. */
.wpt-hero.has-image::after { z-index: 1; }

/* ------------- La foto de la tarjeta ya no se recorta -------------------- */
/* Igual que se hizo en la ficha: `cover` cortaba los lados de las fotos
   verticales, así que lo que veías en el catálogo no era lo que veías al
   abrir el producto. */
.wpt-product-card__media img { object-fit: contain; }

/* ------------- Píldora de abierto / cerrado ------------------------------ */
.wpt-chip--state {
	font-weight: 700;
	border-color: transparent;
}
.wpt-chip--state.is-open { background: #e8f7ee; color: #166534; }
.wpt-chip--state.is-closed { background: #fdeceb; color: #b3261e; }

.wpt-chip__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}
.wpt-chip--state.is-open .wpt-chip__dot { background: #16a34a; }
.wpt-chip--state.is-closed .wpt-chip__dot { background: #dc2626; }

/* ------------- Pie con contacto ----------------------------------------- */
.wpt-footer__contact {
	max-width: 460px;
	margin: 0 auto 18px;
}

.wpt-footer__title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--wpt-ink);
}

.wpt-footer__line {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 13.5px;
	color: var(--wpt-muted);
}
.wpt-footer__line a { color: inherit; text-decoration: none; }
.wpt-footer__line a:hover { text-decoration: underline; }

.wpt-footer__ic { display: inline-flex; }
.wpt-footer__ic .wpt-i { width: 16px; height: 16px; }
.wpt-footer__muted { font-size: 12.5px; }

/* ---------------------------------------------------------------------------
 * 22.9.270 — HORARIO PLEGABLE EN EL PIE.
 *
 * El cliente quiere saber «¿abren el sábado?» sin que un panel le tape la
 * tienda. Se usa <details>: plegado por defecto, sin JS, sin ventanas
 * emergentes. Cerrado ocupa una línea; abierto, la semana entera.
 * Todo cuelga de `.wpt-hours` para no tocar ningún otro bloque del pie.
 * ------------------------------------------------------------------------- */
.wpt-hours {
	max-width: 340px;
	margin: 2px auto 10px;
	text-align: left;
	border: 1px solid var(--wpt-line, rgba(15, 23, 42, .1));
	border-radius: 12px;
	background: rgba(15, 23, 42, .02);
	overflow: hidden;
}

.wpt-hours__summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 34px 10px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wpt-ink);
	cursor: pointer;
	list-style: none;
}
.wpt-hours__summary::-webkit-details-marker { display: none; }
.wpt-hours__summary:focus-visible { outline: 2px solid var(--wpt-primary, #2563eb); outline-offset: -2px; }

.wpt-hours__ic { display: inline-flex; color: var(--wpt-muted); }
.wpt-hours__ic .wpt-i { width: 16px; height: 16px; }

.wpt-hours__label { flex: 0 1 auto; }

.wpt-hours__meta {
	margin-left: auto;
	font-weight: 500;
	font-size: 11.5px;
	color: var(--wpt-muted);
	white-space: nowrap;
}

/* La flecha gira al abrir; se dibuja con bordes para no cargar iconos. */
.wpt-hours__chev {
	position: absolute;
	right: 12px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-right: 1.6px solid var(--wpt-muted);
	border-bottom: 1.6px solid var(--wpt-muted);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.wpt-hours[open] .wpt-hours__chev { transform: rotate(-135deg); }

.wpt-hours__list {
	margin: 0;
	padding: 4px 12px 10px;
	list-style: none;
	border-top: 1px solid var(--wpt-line, rgba(15, 23, 42, .08));
}

.wpt-hours__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 4px;
	font-size: 12.5px;
	color: var(--wpt-ink);
	border-radius: 6px;
}
.wpt-hours__row + .wpt-hours__row { border-top: 1px dashed rgba(15, 23, 42, .06); }

.wpt-hours__day { color: var(--wpt-muted); }

.wpt-hours__val { font-variant-numeric: tabular-nums; }

/* El día de HOY se resalta sin gritar. */
.wpt-hours__row.is-today { background: rgba(37, 99, 235, .06); }
.wpt-hours__row.is-today .wpt-hours__day { color: var(--wpt-ink); font-weight: 600; }

/* Los días cerrados se apagan. */
.wpt-hours__row.is-closed .wpt-hours__val { color: var(--wpt-muted); }

@media (prefers-reduced-motion: reduce) {
	.wpt-hours__chev { transition: none; }
}


.wpt-footer__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	max-width: 320px;
	margin: 4px auto 0;
}

.wpt-footer__socials {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

/*
 * 22.9.233 — LOS BOTONES DE REDES DEL PIE.
 *
 * La base de `.wpt-round` sólo transiciona el fondo y el transform, porque está
 * pensada para los botones flotantes. Los del pie llevan forma, tamaño, borde,
 * color y efectos propios (50 opciones), así que necesitan su propia transición
 * o los cambios de sombra, borde y color saltarían de golpe.
 */
.wpt-footer__socials .wpt-round {
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease,
		color .2s ease, border-color .2s ease, opacity .2s ease;
}

.wpt-footer__loyalty {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 10px 16px;
	border: 1px solid var(--wpt-line);
	border-radius: 999px;
	background: #fff;
	color: var(--wpt-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.wpt-footer__loyalty:hover { background: #f4f4f2; }

.wpt-footer__loyalty-note {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--wpt-muted);
}

/* ------------- Aviso de búsqueda (cuántos + limpiar) --------------------- */
.wpt-searchinfo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px 20px 0;
}
.wpt-searchinfo[hidden] { display: none; }

.wpt-searchinfo__text {
	min-width: 0;
	font-size: 13.5px;
	color: var(--wpt-muted);
	overflow-wrap: anywhere;
}

.wpt-searchinfo__clear {
	flex: none;
	padding: 7px 14px;
	border: 1px solid var(--wpt-line);
	border-radius: 999px;
	background: #fff;
	color: var(--wpt-ink);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.wpt-searchinfo__clear:hover { background: #f4f4f2; }

/* ------------- Aviso de últimas unidades en la ficha --------------------- */
.wpt-modal__stock {
	display: inline-flex;
	align-items: center;
	margin: 10px 0 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fdf3e3;
	color: #8a5a00;
	font-size: 12.5px;
	font-weight: 700;
}
.wpt-modal__stock[hidden] { display: none; }

/* ------------- Volver arriba -------------------------------------------- */
.wpt-float--top {
	bottom: 150px;
	background: var(--wpt-secondary);
	color: #fff;
}
.wpt-float--top[hidden] { display: none; }

/* Con la barra de pedido a la vista, los flotantes suben: en móvil la barra
   ocupa casi todo el ancho y antes se comía el botón de WhatsApp. */
.wpt-store.has-orderbar .wpt-float--wa { bottom: 96px; }
.wpt-store.has-orderbar .wpt-float--top { bottom: 224px; }

@media (max-width: 640px) {
	.wpt-searchinfo { padding: 10px 14px 0; }
	.wpt-footer__contact { margin-bottom: 14px; }
	.wpt-footer__line { font-size: 13px; }
	.wpt-float--top { bottom: 138px; }
	.wpt-store.has-orderbar .wpt-float--wa { bottom: 92px; }
	.wpt-store.has-orderbar .wpt-float--top { bottom: 220px; }
}


/* ==========================================================================
   22.9.186 (2) — MODAL DE PUNTOS Y FIDELIZACIÓN DEL CHECKOUT
   --------------------------------------------------------------------------
   Estos bloques tenían 43 atributos `style="..."` repartidos entre el modal de
   puntos y la sección de fidelización del checkout. Además de ensuciar el
   HTML, impedían que el Constructor de tienda pudiera tematizarlos.
   Ahora todo vive aquí, en clases.
   ========================================================================== */

/* ---------------------------------------------- Modal "Tus puntos" ------- */
/* El `display` lo sigue controlando loyalty.js escribiendo `style.display`,
   que siempre gana a esta hoja: por eso el contrato con el JS no cambia. */
.wpt-loyalty {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
}
.wpt-loyalty[hidden] { display: none; }

.wpt-loyalty__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .6);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.wpt-loyalty__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 92%;
	max-width: 520px;
	max-height: 90vh;
	margin: 4vh auto;
	overflow: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.wpt-loyalty__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px;
	background: #fff;
	border-bottom: 1px solid var(--wpt-line);
	border-radius: 16px 16px 0 0;
}

.wpt-loyalty__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--wpt-ink);
}

.wpt-loyalty__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--wpt-line);
	border-radius: 50%;
	background: #fff;
	color: var(--wpt-ink);
	cursor: pointer;
	line-height: 0;
}
.wpt-loyalty__close:hover { background: #f4f4f2; }

.wpt-loyalty__body { padding: 16px; }

.wpt-loyalty__lead {
	margin: 0 0 8px;
	font-size: 14px;
	color: #475569;
}
.wpt-loyalty__help {
	margin: 0 0 12px;
	font-size: 12px;
	color: var(--wpt-muted);
}

.wpt-loyalty__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wpt-ink);
}

.wpt-loyalty__phone {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

.wpt-loyalty__cc,
.wpt-loyalty__input {
	min-height: 46px;
	padding: 12px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--wpt-ink);
}
.wpt-loyalty__cc { flex: 0 1 auto; min-width: 140px; max-width: 60%; cursor: pointer; }
.wpt-loyalty__input { flex: 1 1 auto; min-width: 0; }

.wpt-loyalty__note {
	margin: 6px 0 0;
	font-size: 11.5px;
	color: var(--wpt-muted);
}

.wpt-loyalty__submit {
	width: 100%;
	margin-top: 12px;
	padding: 13px;
	border: 0;
	border-radius: 999px;
	background: var(--wpt-secondary);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
}

.wpt-loyalty__msg { margin-top: 8px; font-size: 13px; }

.wpt-loyalty__result { display: none; margin-top: 12px; }
.wpt-loyalty__rewards { margin-top: 12px; }

.wpt-loyalty__box {
	margin-top: 16px;
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}
.wpt-loyalty__box-title { font-size: 13px; color: var(--wpt-ink); }
.wpt-loyalty__steps {
	margin: 6px 0 0;
	padding-left: 18px;
	font-size: 12px;
	line-height: 1.6;
	color: #475569;
}

/* --------------------------------- Fidelización dentro del checkout ------ */
.wpt-loy-co__initial p { margin: 0 0 4px; color: #475569; font-size: 13px; }
.wpt-loy-co__initial p + p { font-size: 12px; color: var(--wpt-muted); }

.wpt-loy-co__balance { display: none; }

.wpt-loy-co__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
	font-size: 13px;
	color: #475569;
}

.wpt-loy-co__badge {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--wpt-secondary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.wpt-loy-co__earn {
	display: none;
	margin-top: 8px;
	padding: 8px;
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 10px;
	font-size: 13px;
}

.wpt-loy-co__progress { display: none; margin-top: 8px; }
.wpt-loy-co__small { font-size: 12px; color: #475569; }

.wpt-loy-co__track {
	height: 8px;
	margin: 4px 0;
	background: #e2e8f0;
	border-radius: 999px;
	overflow: hidden;
}
.wpt-loy-co__bar {
	height: 8px;
	width: 0%;
	background: linear-gradient(90deg, #16a34a, #22c55e);
}

.wpt-loy-co__unlocked {
	display: none;
	margin-top: 8px;
	padding: 10px;
	background: #ecfdf5;
	border: 1px solid #86efac;
	border-radius: 10px;
	text-align: center;
}
.wpt-loy-co__unlocked-title { font-weight: 800; }

.wpt-loy-co__use {
	margin-top: 6px;
	padding: 8px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--wpt-secondary);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.wpt-loy-co__rewards { display: none; margin-top: 10px; }
.wpt-loy-co__label {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #475569;
}
.wpt-loy-co__select,
.wpt-loy-co__input {
	width: 100%;
	margin-top: 4px;
	padding: 8px;
	border: 1px solid var(--wpt-line);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	color: var(--wpt-ink);
	background: #fff;
}
.wpt-loy-co__input { text-transform: uppercase; }
.wpt-loy-co__msg { margin-top: 6px; font-size: 12px; }

/* ------------------------------------------------- Aviso sin JavaScript -- */
.wpt-noscript {
	margin: 0;
	padding: 14px 20px;
	background: #fdf3e3;
	border-bottom: 1px solid #f2d9a8;
	color: #8a5a00;
	font-size: 13.5px;
	text-align: center;
}

@media (max-width: 640px) {
	.wpt-loyalty__dialog { width: 94%; max-height: 92vh; margin: 3vh auto; }
	/* 22.9.198: aquí había `flex: 0 0 124px`, que es lo que cortaba el texto
	   del país en el móvil ("🇲🇽 México +52" no cabe en 124 px). Se deja que
	   el select mida lo que necesite hasta el 60 % de la fila. */
	.wpt-loyalty__cc { flex: 0 1 auto; min-width: 128px; max-width: 60%; }
}


/* ==========================================================================
   22.9.187 — CARRITO: pie y cabecera compactos, más sitio para los productos
   --------------------------------------------------------------------------
   En un móvil el pie (subtotal + envío + total + botón) se comía casi un
   cuarto de la pantalla y dejaba ver apenas dos productos y medio. Se aprieta
   la cabecera, las tarjetas y el pie. Bloque ADITIVO.
   ========================================================================== */

/* --------------------------------- Cabecera más angosta ------------------ */
/* Antes: 18px de relleno arriba y abajo, título de 19px y una X de 36px. */
.wpt-cart__panel > header { padding: 14px 18px; }
.wpt-cart__panel > header strong { font-size: 16.5px; }
.wpt-cart__panel .wpt-iconbtn { width: 32px; height: 32px; min-width: 32px; }

/* --------------------------------- Tarjetas más compactas ---------------- */
.wpt-citem {
	padding: 10px;
	gap: 10px;
	border-radius: 12px;
}
.wpt-citem__img { width: 56px; height: 56px; }
.wpt-cart__panel .wpt-citem__body strong { font-size: 14px; line-height: 1.2; }
.wpt-citem .wpt-qty--sm { padding: 4px 10px; gap: 10px; }
.wpt-citem__total { font-size: 15px; }
.wpt-citem__del { width: 30px; height: 30px; }

/* --------------------------------- Totales y pie más contenidos ---------- */
.wpt-cart__panel > footer {
	padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
}

.wpt-totals { margin-bottom: 12px; font-size: 13.5px; }
.wpt-totals > div { padding: 2px 0; }
.wpt-totals__grand {
	margin-top: 8px;
	padding-top: 10px !important;
	font-size: 15px;
}
.wpt-totals__grand strong { font-size: 22px; }

.wpt-cta--wa {
	min-height: 48px;
	padding: 12px 18px;
	font-size: 15px;
}

/* ==========================================================================
   MÓVIL (≤640px): los totales pasan a UNA línea
   --------------------------------------------------------------------------
   Apilados ocupaban ~90px solo ellos. En una línea —subtotal y envío pequeños
   a la izquierda, el total destacado a la derecha— caben de sobra y se ganan
   ~60px de alto, que es casi media tarjeta de producto más.
   ========================================================================== */
@media (max-width: 640px) {
	/* Cabecera */
	.wpt-cart__panel > header { padding: 11px 14px; }
	.wpt-cart__panel > header strong { font-size: 16px; }

	/* Tarjetas */
	.wpt-citem { padding: 9px; gap: 9px; }
	.wpt-citem__img { width: 50px; height: 50px; }
	.wpt-cart__panel .wpt-citem__body strong { font-size: 13.5px; }
	.wpt-citem__total { font-size: 14.5px; }

	/* Totales en una línea */
	.wpt-totals {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 2px 12px;
		margin-bottom: 10px;
		font-size: 12.5px;
	}
	.wpt-totals > div {
		display: inline-flex;
		align-items: baseline;
		gap: 5px;
		padding: 0;
	}
	.wpt-totals__grand {
		margin: 0 0 0 auto;
		padding: 0 !important;
		border-top: 0;
		font-size: 12.5px;
	}
	.wpt-totals__grand strong { font-size: 20px; }

	/* Pie y botón */
	.wpt-cart__panel > footer {
		padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
	}
	.wpt-cta--wa {
		min-height: 46px;
		padding: 11px 16px;
		font-size: 14.5px;
	}
}

/* Tablet en vertical (641–900px): la misma línea, un poco más holgada. */
@media (min-width: 641px) and (max-width: 900px) {
	.wpt-totals {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 2px 16px;
		margin-bottom: 12px;
		font-size: 13.5px;
	}
	.wpt-totals > div {
		display: inline-flex;
		align-items: baseline;
		gap: 6px;
		padding: 0;
	}
	.wpt-totals__grand {
		margin: 0 0 0 auto;
		padding: 0 !important;
		border-top: 0;
		font-size: 13.5px;
	}
	.wpt-totals__grand strong { font-size: 22px; }
}


/* ==========================================================================
   22.9.188 — BARRA SUPERIOR: buscador más pequeño y carrito al lado
   --------------------------------------------------------------------------
   En móvil la barra se apilaba en dos filas: el buscador ocupaba todo el
   ancho y los botones caían debajo, así que el carrito quedaba lejos y la
   barra se comía casi 100 px de portada. Bloque ADITIVO.
   ========================================================================== */

@media (max-width: 640px) {
	/* Una sola fila: buscador que se adapta + carrito pegado a él. */
	.wpt-topbar {
		flex-direction: row;
		align-items: center;
		gap: 10px;
		padding: 12px 14px 0;
	}

	/* El buscador deja de ser un bloque a todo lo ancho: ocupa lo que sobre
	   y baja de 46 a 38 px de alto. */
	.wpt-searchbox {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		height: 38px;
		margin: 0;
		padding: 0 14px;
		gap: 8px;
	}
	.wpt-searchbox input { font-size: 13.5px; }
	.wpt-searchbox .wpt-i { width: 16px; height: 16px; }

	.wpt-topbar__actions {
		position: static;
		top: auto;
		right: auto;
		flex: none;
		gap: 8px;
	}

	/*
	 * Las redes sociales se ocultan AQUÍ, no en el pie: desde la 22.9.186 ya
	 * aparecen al final de la página. En la barra superior le robaban el sitio
	 * al buscador y empujaban el carrito a una segunda fila.
	 */
	.wpt-topbar__actions .wpt-round:not(.wpt-round--cart) { display: none; }
}

/* ==========================================================================
   El carrito late cuando tiene productos
   --------------------------------------------------------------------------
   Antes el botón se veía igual con el carrito vacío que con tres productos
   dentro, y era fácil olvidarse del pedido a medias. Ahora late con el color
   de la tienda. Se respeta `prefers-reduced-motion`.
   ========================================================================== */

.wpt-round--cart.has-items {
	background: var(--wpt-primary);
	color: var(--wpt-on-primary, #fff);
	animation: wpt-cart-pulse 1.9s ease-in-out infinite;
}

.wpt-round--cart.has-items:hover { background: var(--wpt-primary-dark, var(--wpt-primary)); }

.wpt-round--cart.has-items .wpt-round__count {
	animation: wpt-cart-badge 1.9s ease-in-out infinite;
}

@keyframes wpt-cart-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wpt-primary) 55%, transparent); }
	70%  { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes wpt-cart-badge {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
	.wpt-round--cart.has-items,
	.wpt-round--cart.has-items .wpt-round__count { animation: none; }
	/* Sin animación el aviso sigue: color de la tienda y un aro fijo. */
	.wpt-round--cart.has-items {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpt-primary) 35%, transparent);
	}
}


/* ==========================================================================
   22.9.195 — REFERENCIA (ETIQUETA) DEL PRODUCTO EN LA TARJETA
   --------------------------------------------------------------------------
   El SKU es el código que se imprime en la etiqueta con el código de barras.
   Antes sólo se veía en el panel: el cliente no podía comprobar que el
   producto que tiene delante es el mismo de la etiqueta. Se puede ocultar
   desde Apariencia → "Ocultar etiquetas en los productos".
   ========================================================================== */

.wpt-product-card__ref {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 4px 0 0;
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--wpt-muted);
	letter-spacing: .01em;
	min-width: 0;
}

/* El código va más marcado que la palabra "Ref": es el dato que se compara. */
.wpt-product-card__ref span {
	min-width: 0;
	font-weight: 700;
	color: var(--wpt-ink);
	overflow-wrap: anywhere;
	word-break: break-word;
}

@media (max-width: 640px) {
	.wpt-product-card__ref { font-size: 11px; }
}


/* 22.9.195 — referencia (etiqueta) dentro de la ficha del producto. */
.wpt-modal__ref {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: #f2f1ee;
	color: var(--wpt-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	overflow-wrap: anywhere;
}
.wpt-modal__ref[hidden] { display: none; }

@media (max-width: 600px) {
	.wpt-modal__ref { font-size: 11.5px; }
}


/* ==========================================================================
   22.9.196 — REFERENCIA Y STOCK EN UNA SOLA LÍNEA (ficha del producto)
   --------------------------------------------------------------------------
   Antes: título, pastilla de referencia, precio grande y otra pastilla debajo.
   Cuatro bloques para tres datos. Ahora la referencia y el aviso de últimas
   unidades comparten una fila pequeña justo debajo del precio.
   ========================================================================== */

.wpt-modal__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 10px 0 0;
}

/* Sin referencia ni aviso, la fila no ocupa nada. */
.wpt-modal__meta:empty { display: none; }

/* Los dos van pequeños y con el mismo aspecto: son datos de apoyo. */
.wpt-modal__meta .wpt-modal__ref,
.wpt-modal__meta .wpt-modal__stock {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .01em;
	overflow-wrap: anywhere;
}

.wpt-modal__meta .wpt-modal__ref {
	background: #f2f1ee;
	color: var(--wpt-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.wpt-modal__meta .wpt-modal__stock {
	background: #fdf3e3;
	color: #8a5a00;
	font-weight: 700;
}

@media (max-width: 600px) {
	.wpt-modal__meta { margin-top: 8px; gap: 5px 6px; }
	.wpt-modal__meta .wpt-modal__ref,
	.wpt-modal__meta .wpt-modal__stock { font-size: 11px; padding: 3px 8px; }
}


/* ==========================================================================
   22.9.196 — "SOBRE LA TIENDA": el texto salía enorme
   --------------------------------------------------------------------------
   El bloque no fijaba tamaño de letra, así que heredaba el del tema. En una
   descripción larga (varios párrafos con listas) el resultado era un muro de
   texto de ~22 px centrado, que ocupa media pantalla y se lee fatal.
   ========================================================================== */

.wpt-about {
	max-width: 720px;
	padding: 20px 24px;
	font-size: 14.5px;
	line-height: 1.62;
	/* El texto largo alineado al centro es difícil de seguir: cada línea
	   empieza en un punto distinto. Se alinea a la izquierda y sólo el título
	   queda centrado. */
	text-align: left;
}

.wpt-about h2 {
	text-align: center;
	margin: 0 0 10px;
	font-size: 15px;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--wpt-muted);
}

.wpt-about p { margin: 0; }
.wpt-about p + p { margin-top: 9px; }
.wpt-about ul,
.wpt-about ol { margin: 9px 0 0; padding-left: 20px; }
.wpt-about li + li { margin-top: 4px; }
.wpt-about strong { color: var(--wpt-ink); }

@media (max-width: 640px) {
	.wpt-about { padding: 16px 16px; font-size: 14px; }
}


/* ==========================================================================
   22.9.196 — REDES SOCIALES EN LA TIENDA
   --------------------------------------------------------------------------
   Se configuran desde el Constructor (pestaña "Redes") y se pintan debajo de
   "Sobre la tienda" o, si no hay descripción, debajo del subtítulo de la
   portada.

   Aquí va la forma BASE (círculo blanco con borde). Las variantes de forma
   (`social_style`) y de efecto (`social_fx`) las emite el Constructor como CSS
   propio de cada tienda, así que esta hoja sólo necesita que se vean bien por
   defecto.
   ========================================================================== */

.wpt-socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 720px;
	margin: 0 auto 26px;
	padding: 0 20px;
}

/* Cuando van dentro de la portada, debajo del subtítulo, no llevan margen
   inferior: los chips de arriba ya separan. */
.wpt-profile .wpt-socials { margin: 14px auto 0; }

.wpt-socials__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid var(--wpt-line);
	background: var(--wpt-surface, #fff);
	color: var(--wpt-ink);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease,
		color .18s ease, border-color .18s ease;
}

.wpt-socials__item .wpt-i { width: 20px; height: 20px; }

.wpt-socials__item:focus-visible {
	outline: 2px solid var(--wpt-primary);
	outline-offset: 2px;
}

/* El nombre sólo se ve en el estilo "Icono y nombre". */
.wpt-socials__label {
	display: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* ==========================================================================
   22.9.200 — SOPORTE DE LOS ESTILOS Y EFECTOS NUEVOS
   --------------------------------------------------------------------------
   Las formas nuevas (30 en total) las emite el Constructor como CSS propio de
   cada tienda. Aquí van sólo los apoyos que necesitan TODAS las tiendas para
   no romperse: el apilado del eje, el contexto de las transformaciones 3D y
   que ningún estilo grande desborde en móvil.
   ========================================================================== */

/* Las formas que se salen del círculo (zoom, pop, rodar, voltear) necesitan
   su propio contexto de apilado o se montan unas sobre otras al pasar por
   encima. */
.wpt-socials__item {
	position: relative;
	transform-origin: center center;
}

/* El efecto "Se voltea" gira sobre el eje Y: sin perspectiva el giro se ve
   plano, como un ancho que se encoge. Se declara aquí para todas las tiendas
   porque el CSS que emite el Constructor es sólo transform. */
.wpt-socials--fx-flip .wpt-socials__item { perspective: 320px; }

/* El efecto "Da una vuelta" rota 360º: sin forzar el redondeo, el icono se
   mueve medio píxel al acabar. `will-change` avisa al navegador. */
.wpt-socials--fx-spin .wpt-socials__item:hover { will-change: transform; }

/* Formas con el texto visible (chip, píldora, tile, icono y nombre): el nombre
   ya no cabe en una línea si la tira es estrecha, así que se recorta antes de
   desbordar. */
.wpt-socials--labeled .wpt-socials__item,
.wpt-socials--chip .wpt-socials__item,
.wpt-socials--pill .wpt-socials__item {
	max-width: 100%;
}

.wpt-socials--labeled .wpt-socials__label { overflow: hidden; text-overflow: ellipsis; }

/* El estilo "Insignia" lleva el aro blanco fuera del borde: necesita margen
   para que no lo corte la tira. */
.wpt-socials--badge { padding-top: 3px; padding-bottom: 3px; }

/* El estilo "Grande" (56 px) con nueve redes cabe a 3–4 por fila; en móvil se
   reduce para no dejar una tira de una sola columna. */
@media (max-width: 640px) {
	.wpt-socials--big .wpt-socials__item { width: 48px; height: 48px; }
	.wpt-socials--big .wpt-socials__item .wpt-i { width: 22px; height: 22px; }
	/* El efecto "Se acerca" (1.28×) con iconos de 48 no debe tocar el borde
	   de la pantalla. Se declara en todas para que no quede cortado. */
	.wpt-socials__item:hover { max-width: none; }
}

/* Ningún efecto debe taparse con el vecino ni salirse de la tira. */
.wpt-socials__item:hover { z-index: 2; }

/* ==========================================================================
   22.9.199 — LAS REDES DE GRUPO LLEVAN UN DISTINTIVO
   --------------------------------------------------------------------------
   Un grupo de WhatsApp y una cuenta de WhatsApp comparten icono. Si la tira
   los pinta igual, el cliente no sabe cuál es cuál y acaba escribiendo al
   número por error. El distintivo "+" sobre el icono resuelve justo eso: se
   ve el logo de siempre (reconocible) y una marca pequeña que dice "aquí
   entra más gente".
   ========================================================================== */

.wpt-socials__item.is-group {
	position: relative;
}

.wpt-socials__plus {
	position: absolute;
	top: -4px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--wpt-primary, #1f9d55);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 0 0 2px var(--wpt-surface, #fff);
	pointer-events: none;
}

/* Con el estilo "Sin fondo" el item no tiene caja: el globito se pega al
   icono en vez de a la esquina del botón, que ya no existe. */
.wpt-socials--minimal .wpt-socials__plus {
	top: -2px;
	right: -2px;
	width: 14px;
	height: 14px;
	font-size: 10px;
	box-shadow: 0 0 0 2px var(--wpt-bg, #fff);
}

/* Al pasar por encima, el globito sale un poco para acompañar el efecto. */
.wpt-socials__item.is-group:hover .wpt-socials__plus {
	transform: scale(1.12);
}

/* Con el nombre visible el "+" se coloca al lado del texto, no encima del
   icono: solapado quedaría sobre la primera letra del nombre.

   `flex: none` es imprescindible: al pasar a `position: static` el globito
   entra en el flujo del flex y, con el nombre al lado, se encogía hasta 7 px
   (menos que su propio texto y se recortaba). Con la base fija se queda
   redondo. */
.wpt-socials--labeled .wpt-socials__plus {
	position: static;
	order: 3;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	font-size: 10px;
	box-shadow: none;
	background: var(--wpt-muted, #6b7280);
}

/*
 * Colores de marca de la tira de redes.
 *
 * El Constructor emite estos colores como CSS propio de cada tienda cuando se
 * elige el estilo "Color de cada red" (`brand`). Aquí se cubren los otros
 * estilos, para que cada red se reconozca aunque el dueño no haya tocado nada.
 *
 * Criterio: al pasar por encima el botón se rellena con el color de la marca y
 * el icono se pone blanco. Así se identifica de un vistazo sin que una tira de
 * ocho redes parezca un semáforo en reposo.
 *
 * 22.9.199 — ANTES sólo existían los colores de `brand` (el CSS de la tienda),
 * así que en el estilo por defecto TODAS las redes se veían igual de grises.
 * Se completan las nueve para que la tira sea coherente: si Telegram se tiñe,
 * Facebook también.
 *
 * El estilo `brand` pinta el botón entero de la marca y no necesita esto; su
 * CSS va aparte y con más especificidad, así que no le afecta.
 */
.wpt-socials__item--facebook:hover {
	background: #1877f2;
	border-color: #1877f2;
	color: #fff;
}

.wpt-socials__item--instagram:hover {
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
	border-color: #dc2743;
	color: #fff;
}

.wpt-socials__item--tiktok:hover {
	background: #010101;
	border-color: #010101;
	color: #fff;
}

.wpt-socials__item--youtube:hover {
	background: #ff0000;
	border-color: #ff0000;
	color: #fff;
}

.wpt-socials__item--telegram:hover,
.wpt-socials__item--telegram_group:hover {
	background: #229ed9;
	border-color: #229ed9;
	color: #fff;
}

.wpt-socials__item--whatsapp:hover {
	background: #25d366;
	border-color: #25d366;
	color: #fff;
}

.wpt-socials__item--whatsapp_group:hover {
	background: #25d366;
	border-color: #25d366;
	color: #fff;
}

.wpt-socials__item--google_maps:hover {
	background: #34a853;
	border-color: #34a853;
	color: #fff;
}

/* En reposo, el icono de la marca nueva va teñido para reconocerlo sin pasar
   el ratón: es justo lo que pidió el usuario ("que se vea obvio"). */
.wpt-socials__item--telegram,
.wpt-socials__item--telegram_group {
	color: #229ed9;
}

.wpt-socials__item--whatsapp_group {
	color: #25d366;
}

/*
 * Excepciones por estilo:
 * - `brand`: el botón ya es del color de la marca y el icono va en blanco.
 * - `outline`: impone su propio color de tinta; sólo se tiñe el borde.
 */
.wpt-socials--brand .wpt-socials__item--telegram,
.wpt-socials--brand .wpt-socials__item--telegram_group,
.wpt-socials--brand .wpt-socials__item--whatsapp_group {
	color: #fff;
}

.wpt-socials--outline .wpt-socials__item--telegram,
.wpt-socials--outline .wpt-socials__item--telegram_group,
.wpt-socials--outline .wpt-socials__item--whatsapp_group {
	color: inherit;
}

.wpt-socials--outline .wpt-socials__item--telegram:hover,
.wpt-socials--outline .wpt-socials__item--telegram_group:hover {
	background: transparent;
	border-color: #229ed9;
	color: #229ed9;
}

.wpt-socials--outline .wpt-socials__item--whatsapp_group:hover {
	background: transparent;
	border-color: #25d366;
	color: #25d366;
}

/* La insignia del grupo usa el color de su red para que combine. */
.wpt-socials__item--telegram .wpt-socials__plus,
.wpt-socials__item--telegram_group .wpt-socials__plus {
	background: #229ed9;
}

.wpt-socials__item--whatsapp_group .wpt-socials__plus {
	background: #25d366;
}

/* Con el nombre visible el globito va en gris para no competir con el texto. */
.wpt-socials--labeled .wpt-socials__item--telegram .wpt-socials__plus,
.wpt-socials--labeled .wpt-socials__item--telegram_group .wpt-socials__plus,
.wpt-socials--labeled .wpt-socials__item--whatsapp_group .wpt-socials__plus {
	background: var(--wpt-muted, #6b7280);
}

@media (max-width: 640px) {
	.wpt-socials { gap: 8px; margin-bottom: 20px; padding: 0 16px; }
	.wpt-socials__item { width: 40px; height: 40px; }
	.wpt-socials__item .wpt-i { width: 19px; height: 19px; }
	/* Con muchas redes y nombres largos, la tira se estrecha antes que
	   desbordar. */
	.wpt-socials--labeled { gap: 6px; }
	.wpt-socials--labeled .wpt-socials__item { padding: 0 13px 0 10px; }
	.wpt-socials--labeled .wpt-socials__label { font-size: 12px; }
	/* El globito se achica en móvil para no comerse el icono de 19 px. */
	.wpt-socials__plus { width: 15px; height: 15px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.wpt-socials__item { transition: none; }
	.wpt-socials__item:hover { transform: none; animation: none; }
	.wpt-socials__item.is-group:hover .wpt-socials__plus { transform: none; }
}


/* ==========================================================================
   22.9.197 — MODAL "TUS PUNTOS": país, explicación plegable y responsive
   ========================================================================== */

/* ---------------- El select del país ya no se corta ---------------------- */
/* Medía 150 px fijos y el texto "🇲🇽 México +52" no cabía: salía cortado y la
   flecha del sistema se montaba encima. Ahora se ajusta a su contenido (hasta
   el 60 % de la fila), con flecha propia y recorte con puntos suspensivos para
   los indicativos más largos. */
.wpt-loyalty__phone {
	display: flex;
	gap: 8px;
	align-items: stretch;
	min-width: 0;
}

.wpt-loyalty__cc {
	flex: 0 1 auto;
	/*
	 * 22.9.198 — AQUÍ ESTABA EL CORTE DE VERDAD.
	 *
	 * `flex-basis: auto` + `width: auto` NO bastan en un <select>: Safari y
	 * los navegadores basados en WebKit le dan un ancho propio por defecto y
	 * se ignoran el `width` y el `flex-basis`, así que el select se quedaba
	 * en un tamaño fijo y "🇲🇽 México +52" salía cortado. La solución es
	 * pedirle el tamaño intrínseco explícitamente con `fit-content`, que sí
	 * respeta el ancho real del texto de la opción seleccionada.
	 */
	width: fit-content;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	min-width: 128px;
	max-width: 60%;
	min-height: 48px;
	padding: 12px 34px 12px 14px;
	border: 1px solid var(--wpt-line);
	border-radius: 12px;
	background-color: #fbfbfa;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7c88' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 12px 12px;
	color: var(--wpt-ink);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.2;
	/* El texto largo se recorta con puntos suspensivos en vez de desbordar.
	   `text-overflow` sólo funciona en un <select> si el ancho es definido;
	   por eso ahora se combina con `fit-content` + `max-width`. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	appearance: none;
	-webkit-appearance: none;
	text-indent: 0;
	cursor: pointer;
}

.wpt-loyalty__cc:focus {
	outline: 0;
	border-color: var(--wpt-primary);
	background-color: #fff;
}

.wpt-loyalty__input { flex: 1 1 auto; min-width: 0; }

/* ---------------- La explicación, plegada -------------------------------- */
/* La lista de seis pasos ocupaba media ventana y empujaba el botón hacia
   arriba. Ahora es un desplegable: el modal es corto, la acción se ve de
   inmediato, y el detalle está a un toque. */
.wpt-loyalty__box {
	margin-top: 14px;
	padding: 0;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
}

.wpt-loyalty__box-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--wpt-ink);
	cursor: pointer;
	list-style: none;
}

/* La flecha del sistema no se puede estilar: se quita. */
.wpt-loyalty__box-title::-webkit-details-marker { display: none; }
.wpt-loyalty__box-title::marker { content: ''; }

.wpt-loyalty__box-title:hover { background: #f1f5f9; }

.wpt-loyalty__chev {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .5;
	transition: transform .18s ease;
}

.wpt-loyalty__box[open] .wpt-loyalty__chev {
	transform: rotate(-135deg);
	margin-top: 3px;
}

.wpt-loyalty__box .wpt-loyalty__steps {
	margin: 0;
	padding: 0 16px 2px 32px;
	font-size: 12.5px;
	line-height: 1.6;
	color: #475569;
}

.wpt-loyalty__box .wpt-loyalty__note {
	margin: 0;
	padding: 8px 16px 14px;
}

/* ---------------- Aviso de país detectado -------------------------------- */
/* 22.9.198 — El sistema ya adivinaba el país, pero lo hacía en silencio: si
   acertaba el usuario no sabía por qué, y si fallaba creía que el selector
   estaba roto. Este renglón lo explica y recuerda que se puede cambiar. */
.wpt-loyalty__detect {
	margin: 6px 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: #64748b;
}

.wpt-loyalty__detect[hidden] { display: none; }

/* Una pizca de color para que se lea como información y no como error. */
.wpt-loyalty__detect::before {
	content: '📍';
	margin-right: 4px;
}

/* ---------------- Botón y espaciado -------------------------------------- */
.wpt-loyalty__submit { min-height: 50px; }

.wpt-loyalty__lead { margin-bottom: 6px; }

/* ---------------- Responsive --------------------------------------------- */
@media (max-width: 640px) {
	.wpt-loyalty__dialog {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		margin: 0;
		border-radius: 0;
	}

	.wpt-loyalty__head {
		padding: 14px 16px;
		border-radius: 0;
	}

	.wpt-loyalty__body { padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
	.wpt-loyalty__title { font-size: 17px; }
	.wpt-loyalty__lead { font-size: 13.5px; }
	.wpt-loyalty__help { margin-bottom: 10px; }
	.wpt-loyalty__submit { min-height: 48px; font-size: 14.5px; }
}

/* En pantallas muy estrechas, país y número se apilan para que el indicativo
   largo ("Rep. Dominicana +809") quepa entero. */
@media (max-width: 400px) {
	.wpt-loyalty__phone { flex-wrap: wrap; }
	.wpt-loyalty__cc { flex: 1 1 100%; max-width: 100%; }
	.wpt-loyalty__input { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.wpt-loyalty__chev { transition: none; }
}

/* ==========================================================================
 * 22.9.279 — ALTA DE TIENDA EN MÓVIL: LA TARJETA YA NO SE CORTA + DISEÑO
 * ========================================================================== */

/*
 * ⚠️ EL DEFECTO QUE ARREGLA ESTO.
 *
 * `.wpt-login-main` lleva `flex: 1.15 1 480px`. En escritorio el split es una
 * FILA, así que ese `480px` es el ANCHO de la columna del formulario. Pero en
 * móvil el split pasa a COLUMNA: `flex-basis` se aplica entonces a la ALTURA, y
 * el formulario quedaba clavado en 480px de alto mientras su contenido medía
 * ~924px. El `overflow: hidden` del split recortaba el resto: el email, la
 * contraseña, el WhatsApp y EL BOTÓN DE ENVIAR desaparecían de la pantalla.
 *
 * Medido en Chrome a 390x844 ANTES del arreglo: tarjeta 482px, contenido 924px,
 * botón de enviar en y=714 (fuera de la tarjeta, que terminaba en y=490).
 *
 * Son DOS piezas, y hacen falta las dos:
 *
 *   1. `flex: 0 0 auto` — el alto lo pone el contenido, no un basis de fila.
 *   2. `overflow: visible` — el original traía `overflow-x: hidden`, que
 *      convierte el panel en CONTENEDOR DE SCROLL. Y en un contenedor de scroll
 *      el «tamaño mínimo automático» de un elemento flex vale CERO, así que el
 *      panel se dejaba encoger hasta los 480px del basis y el resto se perdía.
 *      Con `visible` recupera su mínimo por contenido y no puede encogerse.
 */
@media (max-width: 900px) {
	.wpt-login-main {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: stretch;
		min-height: auto;
		overflow: visible;
	}
}

/* --------------------------------------------------------------------------
 * Marca compacta en móvil.
 *
 * En móvil la barra lateral —la única que lleva el logo y el nombre— se oculta,
 * así que la pantalla salía SIN marca: parecía un formulario suelto. Aquí se
 * repite en pequeño encima del formulario. En escritorio no se pinta.
 * ------------------------------------------------------------------------ */
.wpt-login-mobilebrand { display: none; }

@media (max-width: 900px) {
	.wpt-login-mobilebrand {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 18px;
	}
	.wpt-login-mobilebrand .wpt-login-logo {
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
		border-radius: 10px;
	}
	.wpt-login-mobilebrand span {
		font-weight: 800;
		font-size: 16px;
		letter-spacing: -.02em;
		color: #0a3d2e;
	}
}

/* --------------------------------------------------------------------------
 * La ficha del enlace, ordenada.
 *
 * El anfitrión (`https://…/tienda/`) y el slug iban sueltos en una fila que
 * envolvía a mitad de palabra («whatspedidos.co» / «m/tienda/»). Ahora el
 * anfitrión es un bloque que se trunca con puntos suspensivos y el slug tiene
 * su propio sitio.
 * ------------------------------------------------------------------------ */
.wpt-reg-slug-card__host {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 0 1 auto;
}
.wpt-reg-slug-card__hint {
	margin-left: auto;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 11px;
	opacity: .7;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.wpt-reg-slug-card__url {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 10px;
	}
	.wpt-reg-slug-card__host { flex: 1 1 100%; min-width: 0; }
	.wpt-reg-slug-card__base {
		flex: 1 1 auto;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 12.5px;
	}
	.wpt-reg-slug-card__slug {
		flex: 1 1 auto;
		min-width: 0;
		text-align: left;
	}
	.wpt-reg-slug-card__icon { margin-left: auto; }
	/* El estado ya lo dice la línea de abajo: aquí sobra. */
	.wpt-reg-slug-card__hint { display: none; }
}

/* --------------------------------------------------------------------------
 * Remate del formulario: responde a la última duda («¿me van a cobrar?»).
 * ------------------------------------------------------------------------ */
.wpt-reg-trust {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #64748b;
}
.wpt-reg-trust svg { flex: 0 0 15px; color: #12b76a; }

@media (max-width: 480px) {
	.wpt-login-main { padding: 24px 18px 28px; }
	.wpt-login-form h1 { font-size: 23px; }
	.wpt-login-subtitle { margin-bottom: 20px; }
	.wpt-login-submit { margin-top: 22px; }
	.wpt-reg-trust { font-size: 12px; align-items: flex-start; }
	.wpt-reg-trust svg { margin-top: 2px; }
}

/* ==========================================================================
 * 22.9.280 — CIERRE DEL ALTA, CÓDIGO DE PAÍS Y TABLET
 * ========================================================================== */

/*
 * «Volver al login» deja de ser un enlace de texto centrado —que no se
 * distinguía de un párrafo— y pasa a ser un BOTÓN secundario: mismo alto y
 * mismo radio que el botón principal, con su icono de flecha.
 */
.wpt-reg-back {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
	padding: 13px 18px;
	border: 2px solid #e8edf3;
	border-radius: 14px;
	background: #fff;
	color: #14203e;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color .2s, background .2s, color .2s;
}
.wpt-reg-back:hover { border-color: #cbd5e1; background: #f8fafc; color: #14203e; }
.wpt-reg-back svg { flex: 0 0 16px; }
.wpt-reg-back span { min-width: 0; overflow-wrap: anywhere; }

/* El pie deja de centrar un párrafo suelto. */
.wpt-login-footer { margin-top: 22px; }

/* --------------------------------------------------------------------------
 * 22.9.281 — LA LÍNEA «PAÍS DETECTADO» SE QUITÓ.
 *
 * Sobraba: el propio desplegable ya enseña el país y su código («🇨🇴 +57
 * Colombia») porque las opciones se pintan en PHP y la detectada sale
 * seleccionada. Una línea de texto repitiendo lo mismo sólo añadía ruido.
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
 * TABLET (641–900px).
 *
 * Aquí la barra lateral se oculta (no cabe el diseño partido), pero la tarjeta
 * se quedaba en 480px en mitad de una pantalla de 768: mucho aire y una tarjeta
 * que parecía de móvil. Se le da el ancho que pide una tablet.
 * ------------------------------------------------------------------------ */
@media (min-width: 641px) and (max-width: 900px) {
	.wpt-login-split { width: min(100%, 560px); max-width: 560px; }
	.wpt-login-main { padding: 40px 44px; }
	.wpt-login-form { max-width: 100%; }
}

@media (max-width: 480px) {
	.wpt-reg-back { padding: 12px 16px; font-size: 13.5px; }
}

/* ==========================================================================
 * 22.9.282 — EL LOGO DE LA CABECERA EN LAS PANTALLAS DE ACCESO + LOGIN
 * ========================================================================== */

/*
 * EL LOGO CONFIGURADO.
 *
 * El administrador sube su logo en Configuración Global → Hero y ese logo sale
 * en la cabecera de la landing y en la barra lateral del panel; las pantallas de
 * acceso, en cambio, pintaban un SVG FIJO: el dueño veía su logo en su web y
 * OTRO distinto al entrar a su tienda.
 *
 * Ahora las tres pantallas —entrar, crear tienda y recuperar contraseña— usan el
 * MISMO logo (`brand_mark()`), con el SVG del plugin de respaldo. Se pinta igual
 * que en la cabecera de la landing: sin fondo ni sombra, la imagen contenida.
 */
.wpt-login-logo--img {
	background: transparent;
	box-shadow: none;
	padding: 0;
	border-radius: 10px;
}
.wpt-login-logo--img img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}
/*
 * Con logo, la caja deja de ser un CUADRADO de 42px: un logotipo ancho (una
 * palabra, por ejemplo) saldría diminuto metido en un cuadro. Pasa a tener
 * altura fija y ancho flexible, con un tope para que no se coma el titular.
 */
.wpt-login-sidebar .wpt-login-logo--img {
	width: auto;
	min-width: 42px;
	max-width: 170px;
	flex: 0 0 auto;
}
.wpt-login-mobilebrand .wpt-login-logo--img {
	width: auto;
	min-width: 34px;
	max-width: 130px;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
 * Los motivos para entrar (barra lateral del login).
 *
 * La barra lateral era un titular y una frase: quedaba muy vacía al lado de un
 * formulario con campos. Tres razones cortas la llenan sin ruido y dan confianza
 * justo antes de escribir la contraseña.
 * ------------------------------------------------------------------------ */
.wpt-login-perks {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 100%;
	min-width: 0;
}
.wpt-login-perks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .9);
	word-break: break-word;
	overflow-wrap: anywhere;
	min-width: 0;
}
.wpt-login-perks svg {
	flex: 0 0 16px;
	margin-top: 2px;
	color: #12b76a;
}
.wpt-login-perks span { min-width: 0; }

/* En tablet la barra lateral es más estrecha: se aprieta un poco. */
@media (max-width: 1024px) and (min-width: 901px) {
	.wpt-login-perks { margin-top: 22px; gap: 12px; }
	.wpt-login-perks li { font-size: 13.5px; }
}

/* --------------------------------------------------------------------------
 * El botón principal, en el verde de la marca.
 *
 * En `storefront.css` estaba en azul marino (#14203e). Ese botón SÓLO lo usan
 * las pantallas de acceso —el panel y la landing lo sobrescriben a verde—, así
 * que el usuario veía un botón de otro color justo en la pantalla por la que
 * entra todos los días. Pasa al verde de la marca y gana el anillo de foco.
 * ------------------------------------------------------------------------ */
.wpt-btn--primary {
	background: #12b76a;
	box-shadow: 0 8px 20px rgba(18, 183, 106, .24);
}
.wpt-btn--primary:hover {
	background: #0ea15c;
	box-shadow: 0 10px 24px rgba(18, 183, 106, .3);
}
.wpt-btn--primary:focus-visible {
	outline: 3px solid rgba(18, 183, 106, .35);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 22.9.300 — ACEPTACIÓN DE POLÍTICAS EN EL REGISTRO.
 *
 * Casilla obligatoria justo encima del botón de alta. La checkbox nativa se
 * esconde y se sustituye por una caja verde personalizada que se rellena al
 * marcar —queda alineada con el resto del formulario y el lector de pantalla
 * sigue anunciando el control como «checkbox» (es lo que dice `for`/`id`).
 * ------------------------------------------------------------------------ */
.wpt-reg-legal {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 18px 0 6px;
	padding: 12px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
	font-size: 13px;
	line-height: 1.5;
	color: #475569;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}
.wpt-reg-legal:hover { border-color: #cbd5e1; background: #f1f5f9; }
.wpt-reg-legal:focus-within {
	border-color: #12b76a;
	box-shadow: 0 0 0 3px rgba(18, 183, 106, .15);
}
.wpt-reg-legal input[type="checkbox"] {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.wpt-reg-legal__box {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px; height: 20px;
	margin-top: 1px;
	border: 1.5px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	color: #fff;
	transition: background .15s, border-color .15s;
}
.wpt-reg-legal input[type="checkbox"]:checked + .wpt-reg-legal__box {
	background: #12b76a;
	border-color: #12b76a;
}
.wpt-reg-legal input[type="checkbox"]:checked + .wpt-reg-legal__box::after {
	content: "";
	width: 11px; height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
}
.wpt-reg-legal input[type="checkbox"]:focus-visible + .wpt-reg-legal__box {
	outline: 2px solid #12b76a;
	outline-offset: 2px;
}
.wpt-reg-legal__text { min-width: 0; }
.wpt-reg-legal__text a {
	color: #0f766e;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wpt-reg-legal__text a:hover { color: #0b5d57; }
.wpt-reg-legal.is-error {
	border-color: #ef4444;
	background: #fef2f2;
}
@media (max-width: 480px) {
	.wpt-reg-legal { font-size: 12.5px; padding: 11px 12px; }
}

/* --------------------------------------------------------------------------
 * El pie de la barra lateral, abajo del todo.
 *
 * Con los motivos añadidos, el «© WhatsPedidos» quedaba pegado a la lista y la
 * barra parecía cortada a media altura.
 * ------------------------------------------------------------------------ */
.wpt-login-sidebar__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.wpt-login-sidebar__footer { margin-top: auto; }