/* BrandTienda Engine — estilos mínimos de slots (presupuesto: <8KB).
   El theme BrandTienda los sobreescribe; esto es el fallback para themes ajenos. */

.brandtienda-slot {
	margin: 1rem 0;
}

.brandtienda-slot--checkout_bump {
	border: 1px dashed currentColor;
	border-radius: 6px;
	padding: .75rem 1rem;
}

.brandtienda-slot--archive_card {
	margin: .25rem 0;
	font-size: .85em;
}

/* Urgencia */
.brandtienda-urgency {
	margin: .5rem 0;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #c0392b);
}

.brandtienda-urgency--low_stock_badge {
	font-size: .8em;
	margin: .15rem 0;
}

.brandtienda-urgency--countdown {
	color: inherit;
}

.brandtienda-urgency--countdown .brandtienda-countdown-timer {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* Envío gratis */
.brandtienda-freeship {
	margin: 1rem 0;
}

.brandtienda-freeship__text {
	margin: 0 0 .35rem;
	font-size: .9em;
}

.brandtienda-freeship__text--done {
	font-weight: 600;
	color: var(--wp--preset--color--primary, #0e7a5f);
}

.brandtienda-freeship__track {
	height: 8px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .08);
	overflow: hidden;
}

.brandtienda-freeship__fill {
	height: 100%;
	border-radius: 4px;
	background: var(--wp--preset--color--primary, #0e7a5f);
	transition: width .4s ease;
}

.brandtienda-freeship-note {
	margin: .5rem 0;
	font-size: .85em;
	opacity: .8;
}

/* Upsell / cross-sell */
.brandtienda-upsell {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.brandtienda-upsell__title {
	margin: 1rem 0 .25rem;
	font-size: 1.1em;
}

.brandtienda-upsell__item {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	position: relative;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--line, rgba(0, 0, 0, .1));
	border-radius: 12px;
	padding: .7rem;
	transition: transform .18s ease, box-shadow .18s ease;
}

.brandtienda-upsell__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--wp--preset--color--contrast, #000) 14%, transparent);
}

.brandtienda-upsell__item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: auto;
	border-radius: 8px;
}

.brandtienda-upsell__name {
	display: block;
	font-size: .9em;
	line-height: 1.3;
	font-weight: 600;
}

.brandtienda-upsell__item > a:first-child {
	text-decoration: none;
	color: inherit;
}

.brandtienda-upsell__price {
	font-weight: 700;
	font-size: .95em;
	color: var(--wp--preset--color--primary, inherit);
}

.brandtienda-upsell__add {
	font-size: .85em;
	text-align: center;
	margin-top: auto;
}

/* Order bump */
.brandtienda-bump {
	margin: .75rem 0;
}

.brandtienda-bump__label {
	display: flex;
	gap: .5rem;
	/* Centrado y no baseline: con la foto al lado, alinear por línea de base
	   deja el checkbox flotando arriba de todo. */
	align-items: center;
	cursor: pointer;
}

.brandtienda-bump__foto {
	flex: 0 0 auto;
	inline-size: 56px;
	block-size: 56px;
	object-fit: cover;
	border-radius: 0;
	background: rgba(0, 0, 0, .04);
}

.brandtienda-bump__text {
	min-inline-size: 0;
}

/* Envío gratis: barra de progreso en el carrito de bloques */
.brandtienda-freeship {
	margin: .75rem 0 1rem;
}

.brandtienda-freeship__texto {
	margin: 0 0 .4rem;
	font-size: .875rem;
	font-weight: 600;
}

.brandtienda-freeship__riel {
	block-size: 8px;
	background: rgba(0, 0, 0, .08);
	overflow: hidden;
}

.brandtienda-freeship__avance {
	display: block;
	block-size: 100%;
	background: var(--wp--preset--color--primary, #F000E0);
	transition: width .25s ease-out;
}

.brandtienda-freeship.is-logrado .brandtienda-freeship__avance {
	background: var(--wp--preset--color--accent, #00F010);
}

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

/* Cross-sell del carrito */
.brandtienda-xsell {
	margin: 1.5rem 0 0;
	padding-block-start: 1rem;
	border-block-start: 1px solid rgba(0, 0, 0, .1);
}

.brandtienda-xsell__titulo {
	margin: 0 0 .75rem;
	font-size: 1rem;
}

.brandtienda-xsell__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .75rem;
}

.brandtienda-xsell__item {
	display: flex;
	gap: .75rem;
	align-items: center;
}

.brandtienda-xsell__foto {
	flex: 0 0 auto;
	inline-size: 64px;
	block-size: 64px;
	object-fit: cover;
	background: rgba(0, 0, 0, .04);
}

.brandtienda-xsell__datos {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-inline-size: 0;
	flex: 1 1 auto;
}

.brandtienda-xsell__nombre {
	font-weight: 600;
	text-decoration: none;
}

.brandtienda-xsell__btn {
	flex: 0 0 auto;
	padding: .5rem 1rem;
	border: 1px solid currentColor;
	background: none;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.brandtienda-xsell__btn[disabled] {
	opacity: .5;
	cursor: default;
}

/* Social proof (reseña destacada) */
.brandtienda-proof {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
	margin: 1rem 0;
	padding: 1rem;
	border-radius: 8px;
	background: rgba(0, 0, 0, .03);
}

.brandtienda-proof__img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 8px;
}

.brandtienda-proof__quote {
	flex: 1;
	min-width: 200px;
	margin: 0;
	font-style: italic;
}

.brandtienda-proof__meta {
	width: 100%;
	font-size: .85em;
	opacity: .8;
}

/* Fotos en reseñas */
.brandtienda-review-photos {
	display: flex;
	gap: .5rem;
	margin-top: .5rem;
}

.brandtienda-review-photos img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 6px;
}

/* Wishlist */
.brandtienda-wl {
	background: none;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 50%;
	width: 2.25rem;
	height: 2.25rem;
	line-height: 1;
	cursor: pointer;
	color: rgba(0, 0, 0, .35);
	font-size: 1.1rem;
	transition: color .2s ease, border-color .2s ease;
}

.brandtienda-wl:hover,
.brandtienda-wl.is-active {
	color: var(--wp--preset--color--accent, #c0392b);
	border-color: var(--wp--preset--color--accent, #c0392b);
}

/* Back-in-stock */
.brandtienda-bis {
	margin: 1rem 0;
	padding: 1rem;
	border-radius: 8px;
	background: rgba(0, 0, 0, .03);
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	align-items: center;
}

.brandtienda-bis__text {
	width: 100%;
	margin: 0;
	font-weight: 600;
}

.brandtienda-bis input[type="email"] {
	flex: 1;
	min-width: 180px;
}

.brandtienda-bis__done {
	width: 100%;
	margin: 0;
	color: var(--wp--preset--color--primary, #0e7a5f);
	font-weight: 600;
}

/* Checkout focus: menos distracciones (el theme puede afinar más). */
.brandtienda-checkout-focus .wp-block-navigation,
.brandtienda-checkout-focus .widget-area {
	display: none;
}

/* ============================================================
   Estructura elegida en BT Diseño (body classes de Designer).
   Variantes de hero (home), grilla y tarjetas de producto.
   ============================================================ */

/* --- Hero centrado --- */
.btd-hero--center .bt-hero {
	text-align: center;
}
.btd-hero--center .bt-hero .wp-block-buttons {
	justify-content: center;
}

/* --- Hero dividido: texto + panel decorativo con la paleta --- */
@media (min-width: 782px) {
	.btd-hero--split .bt-hero {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		/* row-gap 0: los hijos traen sus propios márgenes; con gap vertical
		   las filas del span del panel suman espacio muerto bajo el CTA. */
		gap: 0 var(--wp--preset--spacing--50, 2rem);
		align-items: center;
		text-align: left;
	}
	.btd-hero--split .bt-hero::after {
		content: '';
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: stretch;
		min-height: 240px;
		border-radius: 16px;
		background:
			radial-gradient(ellipse 70% 60% at 70% 25%, color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent), transparent),
			linear-gradient(150deg, color-mix(in srgb, var(--wp--preset--color--primary) 88%, var(--wp--preset--color--base)) 0%, var(--wp--preset--color--primary) 100%);
		box-shadow: 0 18px 44px color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	}
	.btd-hero--split .bt-hero > * {
		grid-column: 1;
	}
}

/* --- Hero Compacta (clase interna `banner`): franja de portada de BT Diseño.
   «Banner» de verdad es otro sistema (BT Promos, .bt-hero-promo) — esta hoja
   apunta a `.bt-hero`, el layout `simple` del bloque Portada, y no lo toca.

   Relleno = primary-btn y tinta = primary-ink (#FFF): el primario crudo no
   garantiza AA con blanco encima. El extremo del degradado usa accent-btn
   (también aplanado a AA): mezclar DOS rellenos seguros mantiene el contraste
   en toda la franja; mezclar con el acento crudo no. */
.btd-hero--banner .bt-hero {
	background: linear-gradient(105deg, var(--wp--preset--color--primary-btn) 0%, color-mix(in srgb, var(--wp--preset--color--primary-btn) 70%, var(--wp--preset--color--accent-btn)) 100%);
	border-radius: 16px;
	/* padding-top/bottom vienen INLINE en el markup del bloque (spacing-70/60):
	   solo un !important de hoja les gana. Sin esto la Compacta no es compacta.
	   Es el único !important que queda en esta variante. */
	padding: var(--wp--preset--spacing--50, 2rem) var(--wp--preset--spacing--50, 2rem) !important;
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
}
/* Sin !important: 0,2,1 ya le gana al `.bt-hero h1` del theme. El <p> del
   bloque trae color INLINE —lo neutraliza la redefinición de la var muted en
   el scope del copy, dos reglas más abajo—, no este selector. */
.btd-hero--banner .bt-hero :is(h1, p) {
	color: var(--wp--preset--color--primary-ink);
}
/* El párrafo del bloque trae `style="color:var(--wp--preset--color--muted)"`.
   Redefinir la variable en el copy lo vuelve tinta blanca SIN pelear contra el
   inline; la franja de destacados (fuera del copy) conserva su muted. */
.btd-hero--banner .bt-hero .bt-hero__copy {
	--wp--preset--color--muted: var(--wp--preset--color--primary-ink);
}
.btd-hero--banner .bt-hero .bt-hero__eyebrow {
	color: var(--wp--preset--color--primary-ink);
	opacity: .8;
}
.btd-hero--banner .bt-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.btd-hero--banner .bt-hero .is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

/* Grilla de productos: la FUENTE es Designer::grid_css() — un <style> en
   wp_head con especificidad que empatara/supera a theme.css y gana por orden
   de carga. Sin reglas acá: el viejo bloque `.btd-grid--3/4` perdía
   especificidad contra theme.css en el home y nunca alcanzaba al loop
   clásico de la tienda. */

/* --- Tarjetas de producto: flotantes / delineadas / planas --- */
.btd-cards--elevated .wc-block-product-template .wc-block-product {
	border: 0;
	border-radius: 12px;
	box-shadow: 0 3px 14px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	transition: transform .18s ease, box-shadow .18s ease;
}
.btd-cards--elevated .wc-block-product-template .wc-block-product:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
}
.btd-cards--outlined .wc-block-product-template .wc-block-product {
	border: 1px solid var(--wp--preset--color--line, color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent));
	border-radius: 10px;
	box-shadow: none;
}
.btd-cards--flat .wc-block-product-template .wc-block-product {
	border: 0;
	box-shadow: none;
	background: transparent;
}

/* Las mismas tres variantes para el loop CLÁSICO de la tienda
   (`ul.products li.product`, que es lo que rinde `legacy-template` en el
   archive — el bloque product-collection solo existe en el home). La tarjeta
   base del theme es PLANA (`theme.css`: sin fondo, borde ni padding), así que
   «flotante» y «delineada» suman su propio padding + fondo para que la sombra
   o el borde tengan de qué colgar; «plana» se queda como la base. El prefijo
   `.btd-cards--*` (clase del body) le gana en especificidad a la regla base
   del theme sin necesitar `!important` ni depender del orden de carga. */
.btd-cards--elevated ul.products li.product {
	padding: .85rem;
	border-radius: 12px;
	background: var(--wp--preset--color--base, #fff);
	box-shadow: 0 3px 14px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	transition: transform .18s ease, box-shadow .18s ease;
}
.btd-cards--elevated ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
}
.btd-cards--outlined ul.products li.product {
	padding: .85rem;
	border: 1px solid var(--wp--preset--color--line, color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent));
	border-radius: 10px;
}
.btd-cards--flat ul.products li.product {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Quitar un producto desde el resumen del checkout (.bt-quitar-item).

   El botón lo inyecta checkout-blocks.js por línea del resumen. Antes traía sus
   estilos inline, que le ganan a cualquier hoja sin `!important`: quedaba fuera
   del alcance de la marca y sin foco visible. El aspecto vive acá.

   ES UNA ACCIÓN DESTRUCTIVA EN MEDIO DE UNA COMPRA, así que el criterio es al
   revés que en un botón normal: discreta en reposo para no invitar al click por
   accidente, e inequívoca cuando el puntero ya está encima.
   --------------------------------------------------------------------------- */
/* El ancla del absoluto: sin esto el botón se colgaría del primer ancestro
   posicionado, que puede ser el panel entero del resumen. */
.wc-block-components-order-summary-item { position: relative; }

.bt-quitar-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 28px de área real: el glifo es chico, el blanco alrededor es lo que se
	   toca. Con el padding de antes el objetivo quedaba en unos 12px, imposible
	   de acertar con el pulgar. */
	width: 28px;
	height: 28px;
	/*
	 * Anclado al ángulo inferior derecho de la LÍNEA, no al de la descripción.
	 *
	 * Se inyecta dentro del contenedor de la descripción, que no abarca el ancho
	 * de la fila —la columna del precio se lleva el resto—, así que empujarlo con
	 * `margin-inline-start:auto` lo dejaba a media fila, flotando bajo el texto.
	 * Sacándolo del flujo se alinea con el borde real de la línea y queda en la
	 * misma vertical en todos los ítems, tengan la descripción que tengan.
	 */
	position: absolute;
	/* Separado de la esquina: pegado al borde del panel redondeado se leía como
	   un desborde y no como un control. */
	inset-inline-end: 2px;
	inset-block-end: 2px;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.bt-quitar-item:hover {
	/* Rojo de peligro, NO el de la marca: quitar del pedido tiene que leerse
	   como quitar aunque la tienda sea roja. */
	color: #b32d2e;
	border-color: currentColor;
	background: color-mix(in srgb, #b32d2e 8%, transparent);
}

/* El foco por teclado no existía: el hover se hacía con listeners de mouse. */
.bt-quitar-item:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0e7a5f);
	outline-offset: 2px;
	color: #b32d2e;
}

/* Mientras la Store API procesa la baja. */
.bt-quitar-item[disabled],
.bt-quitar-item[aria-busy="true"] {
	opacity: .45;
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.bt-quitar-item { transition: none; }
}

/* Avisos de promoción (carrito, checkout y ficha de producto).

   Dos estados con peso distinto a propósito: lo que FALTA es lo accionable
   —«sumá una más y te llevás otra gratis»— y va destacado; lo ya LOGRADO es una
   confirmación y va tranquilo. Al revés, el aviso que vende se pierde entre
   felicitaciones. */
.brandtienda-promos {
	margin: 1rem 0;
}

.brandtienda-promos__item {
	margin: 0 0 .35rem;
	font-size: .9em;
	line-height: 1.4;
}

.brandtienda-promos__item.is-falta {
	font-weight: 600;
	color: var(--wp--preset--color--primary, #0e7a5f);
}

.brandtienda-promos__item.is-logrado {
	opacity: .8;
}

/* Ficha de producto: la promo se lee antes de elegir la cantidad. */
.bt-promo-ficha {
	margin: .5rem 0 1rem;
}

.bt-promo-ficha__tag {
	display: inline-block;
	padding: .25em .7em;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #0e7a5f);
	color: #fff;
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .02em;
}

/* Mini-cart: descuentos de promo y señal de envío en el drawer.
   Colores SIEMPRE por tokens de la paleta (Brand Diseño los emite):
   nada hardcodeado de cara al cliente. */
.brandtienda-minicart__promo {
	color: var(--wp--preset--color--primary, currentColor);
	font-weight: 600;
	margin: .25em 0;
}

.brandtienda-minicart__envio {
	color: var(--wp--preset--color--muted, currentColor);
	margin: .25em 0;
	font-size: .875em;
}

/* Notificaciones de venta (toasts, abajo a la izquierda). */
.brandtienda-toast {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 9998; /* Debajo del drawer del mini-cart de Woo (9999+). */
	display: flex;
	align-items: center;
	gap: .65rem;
	max-width: min(20rem, calc(100vw - 2rem));
	padding: .6rem .75rem;
	border: 1px solid var(--wp--preset--color--line, #e5e5e5);
	border-radius: 10px;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, inherit);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
	opacity: 0;
	transform: translateY(.75rem);
	transition: opacity .3s ease, transform .3s ease;
}

.brandtienda-toast.is-visible {
	opacity: 1;
	transform: none;
}

.brandtienda-toast__foto {
	border-radius: 6px;
	flex-shrink: 0;
	object-fit: cover;
}

.brandtienda-toast__datos {
	min-width: 0;
}

.brandtienda-toast__producto {
	display: block;
	font-weight: 600;
	font-size: .9em;
	color: var(--wp--preset--color--primary, inherit);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.brandtienda-toast__meta {
	display: block;
	font-size: .8em;
	color: var(--wp--preset--color--muted, #666);
}

.brandtienda-toast__cerrar {
	flex-shrink: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted, #666);
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
	padding: .2em;
}

@media (prefers-reduced-motion: reduce) {
	.brandtienda-toast {
		transition: none;
		transform: none;
	}
}

/* Cotizador de envío por CP en la ficha. */
.brandtienda-envio {
	margin: 1rem 0;
	padding: .75rem 1rem;
	border: 1px solid var(--wp--preset--color--line, #ddd);
	border-radius: 8px;
}

.brandtienda-envio__label {
	display: block;
	font-weight: 600;
	margin-bottom: .4rem;
}

.brandtienda-envio__fila {
	display: flex;
	gap: .5rem;
}

.brandtienda-envio__cp {
	flex: 1;
	min-width: 0;
	padding: .45em .7em;
	border: 1px solid var(--wp--preset--color--line, #ccc);
	border-radius: 6px;
}

.brandtienda-envio__btn {
	/* 44px de alto mínimo: es el objetivo táctil recomendado, y este botón
	   está en la ficha de producto, que es donde se decide la compra desde el
	   celular. Antes medía 29px. */
	min-height: 44px;
	padding: .45em 1.1em;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--primary, #0e7a5f);
	color: var(--wp--preset--color--primary-ink, #fff);
	font-weight: 600;
	cursor: pointer;
}

.brandtienda-envio__cp {
	min-height: 44px;
}

.brandtienda-envio__btn:disabled {
	opacity: .6;
	cursor: wait;
}

.brandtienda-envio__resultado {
	margin: .5rem 0 0;
	font-size: .95em;
}

.brandtienda-envio__resultado:empty {
	display: none;
}