/* ===========================================
   Carousel — Blossom Carousel (Snapping)
   Tope de Flama y Más

   Exactamente el patrón de la doc:
   https://www.blossom-carousel.com/docs/examples/basic/snap

   .carousel {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: 200px;
     gap: 1rem;
     scroll-snap-type: inline mandatory;
   }
   .slide {
     width: 100%;
     scroll-snap-align: center;
   }
   =========================================== */

.tdf-blossom-wrap {
	margin: 2rem 0;
}

/* El carousel: patrón exacto de la doc */
.tdf-blossom-carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 240px;
	gap: 1rem;
	scroll-snap-type: inline mandatory;
}

/* Slide wrapper: hijo directo de blossom-carousel.
   Blossom le aplica display:inline-block — no importa porque
   es solo un wrapper, la .tdf-card adentro tiene su propio display:flex. */
.tdf-blossom-slide {
	width: 240px;
	scroll-snap-align: center;
}

/* La card: ocupa todo el slide, conserva su display:flex */
.tdf-blossom-slide > .tdf-card {
	width: 100%;
	height: 100%;
}

/* Ocultar flechas del slider interno (hay flechas del carousel afuera) */
.tdf-blossom-carousel .tdf-arrow {
	display: none !important;
}

/* Nav — botones debajo, a la derecha */
.tdf-blossom-nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.tdf-blossom-arrow {
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 0;
	background: #CC1939;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.tdf-blossom-arrow:hover {
	background: #fdf0f2;
	color: #CC1939;
}

.tdf-blossom-arrow svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Mobile: sin botones, badge de transferencia truncada */
@media (max-width: 600px) {
	.tdf-blossom-carousel {
		grid-auto-columns: 78vw;
	}

	.tdf-blossom-slide {
		width: 78vw;
	}

	.tdf-blossom-nav {
		display: none;
	}

	/* Truncar "con transferencia" → "con transf." */
	.tdf-blossom-carousel .tdf-badge--tr {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* ===========================================
   Carousel estilo MercadoLibre — [tdf_carousel_ml]
   Tope de Flama y Más

   Namespace propio (.tdfml-*) para convivir con los carruseles viejos
   sin pisarles ni una regla. Paleta de marca, radio 0 en todo.
   =========================================== */

.tdfml-wrap {
	margin: 2rem 0;
}

.tdfml-carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 240px;
	gap: 1rem;
	scroll-snap-type: inline mandatory;
}

.tdfml-slide {
	width: 240px;
	scroll-snap-align: center;
}

/* Variante rankeada: el slide es el ancla del número grande, que va FUERA de
   .tdfml-card porque la tarjeta tiene overflow:hidden y lo cortaría.
   El estilo del número lo aporta tdf_rank_badge_assets(), compartido con el
   carrusel viejo — acá solo se prepara el contenedor. */
.tdfml-slide--ranked {
	position: relative;
}

/* El número tipo Netflix va arriba a la izquierda en las tarjetas nuevas.
   El contenedor original alinea al pie (align-items:flex-end), que es donde
   también vive el ícono de variantes y por eso se pisaban. Acá se lo alinea
   arriba y se reinicia el desplazamiento vertical.
   El override es SOLO para .tdfml-slide--ranked, con especificidad (0,2,0)
   por encima de la regla original (0,1,0): el carrusel viejo no se toca. */
.tdfml-slide--ranked .tdf-rank-anchor {
	align-items: flex-start;
}

/* El número queda DENTRO del área de la imagen, sin desplazamiento negativo
   hacia arriba. Motivo: <blossom-carousel> es el contenedor de scroll y
   recorta todo lo que sobresalga por el borde superior, así que un --rank-y
   negativo se veía cortado. Hacia la izquierda sí puede sobresalir porque el
   recorte horizontal cae fuera de la tarjeta visible. */
.tdfml-slide--ranked .tdf-rank-badge {
	--rank-y: 4px;
}

@media (max-width: 1024px) {
	.tdfml-slide--ranked .tdf-rank-badge { --rank-y: 4px; }
}

@media (max-width: 600px) {
	.tdfml-slide--ranked .tdf-rank-badge { --rank-y: 3px; }
}

.tdfml-card {
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid #ececec;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.15s;
}

/* Sombra al hover solo donde hay puntero de verdad: en táctiles el :hover se
   queda pegado después de tocar y la tarjeta quedaría sombreada para siempre. */
@media (hover: hover) {
	.tdfml-card:hover {
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
	}
}

/* ---------- Galería de la tarjeta ---------- */

/* .tdf-oferta-dia-badge es absoluto respecto de su contenedor posicionado.
   Acá ese contenedor es la galería, que ya es position:relative. Se reutiliza
   la clase del flash sale viejo para heredar su estilo tal cual. */
.tdfml-gal {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background: #fff;
}

.tdfml-gal__track {
	display: flex;
	height: 100%;
	transition: transform 0.25s ease;
}

.tdfml-gal__item {
	flex: 0 0 100%;
	height: 100%;
}

.tdfml-gal__item a,
.tdfml-gal__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tdfml-gal__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.9);
	color: #1a1a1a;
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s;
	z-index: 3;
	padding: 0;
}

.tdfml-card:hover .tdfml-gal__arrow {
	opacity: 1;
}

.tdfml-gal__arrow--prev { left: 0; }
.tdfml-gal__arrow--next { right: 0; }

.tdfml-gal__dots {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 4px;
	z-index: 3;
}

.tdfml-gal__dot {
	width: 6px;
	height: 6px;
	background: #d0d0d0;
	display: block;
}

.tdfml-gal__dot.is-on {
	background: #CC1939;
}

/* Ícono de colores: abajo a la izquierda, solo en variables */
.tdfml-colors {
	position: absolute;
	left: 8px;
	bottom: 8px;
	/* Mismo alto que .tdfml-quick para que los dos extremos de la fila
	   inferior de la imagen queden alineados. */
	min-width: 34px;
	height: 34px;
	background: #fff;
	border: 1px solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0 7px;
	z-index: 3;
	/* Antes era none. Ahora recibe el hover para poder mostrar el tooltip;
	   el cursor sigue siendo el normal porque no es cliqueable. */
	pointer-events: auto;
	cursor: default;
}

.tdfml-colors__num {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: #1a1a1a;
}

.tdfml-colors__ring {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: conic-gradient(#e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935);
}

/* Vista rápida: abajo a la derecha, sobre la imagen. Ocupa el lugar que
   tenía el botón rojo de carrito, que se mudó a la fila de acciones. Va en
   blanco a propósito: es una acción de mirar, no de comprar, y no tiene que
   competir visualmente con "Comprar ahora". */
.tdfml-quick {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 34px;
	height: 34px;
	border: 1px solid #e0e0e0;
	border-radius: 0;
	background: #fff;
	color: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 4;
	transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.tdfml-quick:hover {
	background: #CC1939;
	border-color: #CC1939;
	color: #fff;
}

.tdfml-quick:active { transform: scale(0.94); }

.tdfml-quick .dashicons {
	font-size: 19px;
	width: 19px;
	height: 19px;
	line-height: 19px;
	display: block;
}

/* ---------- Tooltip compartido (ojito y contador de variantes) ----------
   Solo en dispositivos con puntero real: en táctil el :hover se queda pegado
   después de tocar y el cartel no se va más. */

@media (hover: hover) and (pointer: fine) {

	/* .tdfml-card y .tdfml-gal tienen overflow:hidden, así que un tooltip
	   centrado sobre un botón pegado al borde se corta. Por eso cada uno se
	   ancla al lado en el que vive y crece hacia adentro de la tarjeta:
	   los de la derecha alineados a la derecha, el de la izquierda a la
	   izquierda. Ninguno se sale nunca del recuadro. */
	.tdfml-quick[data-tip]::after,
	.tdfml-colors[data-tip]::after,
	.tdfml-cart[data-tip]::after {
		content: attr(data-tip);
		position: absolute;
		bottom: calc(100% + 6px);
		background: #1a1a1a;
		color: #fff;
		font-family: 'Open Sans', sans-serif;
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0;
		text-transform: none;
		white-space: nowrap;
		padding: 5px 8px;
		border-radius: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.12s;
		pointer-events: none;
		z-index: 6;
	}

	/* Pegados al borde derecho de la tarjeta: crecen hacia la izquierda. */
	.tdfml-quick[data-tip]::after,
	.tdfml-cart[data-tip]::after {
		right: 0;
		left: auto;
	}

	/* Pegado al borde izquierdo: crece hacia la derecha. */
	.tdfml-colors[data-tip]::after {
		left: 0;
		right: auto;
	}

	.tdfml-quick:hover[data-tip]::after,
	.tdfml-colors:hover[data-tip]::after,
	.tdfml-cart:hover[data-tip]::after {
		opacity: 1;
		visibility: visible;
	}
}

/* ---------- Info de la tarjeta ---------- */

.tdfml-info {
	padding: 7px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

/* ---------- Precio final por transferencia ---------- */

.tdfml-transfer {
	font-size: 11.5px;
	line-height: 1.3;
	color: #0a5c3a;
	background-color: #13ff0021;
	padding: 3px 5px;
	font-style: italic;
	border: solid 1px #0f7d001f;
}

.tdfml-transfer strong {
	font-size: 12.5px;
	font-weight: 700;
}

/* ---------- Pie de la tarjeta ----------
   El margin-top:auto vive acá, en el contenedor, y no en la fila de botones.
   Si estuviera en los dos, el espacio libre se repartiría entre ambos y el
   label de transferencia flotaría a distinta altura en cada tarjeta. Puesto
   en el padre, el bloque entero baja junto y queda alineado de tarjeta a
   tarjeta, tenga el producto precio tachado y % OFF o no. */

.tdfml-pie {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
}

/* ---------- Fila de acciones: Comprar ahora | carrito ---------- */

.tdfml-acciones {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.tdfml-buy {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 8px;
	border: none;
	border-radius: 0;
	background: #CC1939;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	/* Se declaran explícitos porque el producto simple usa <a> y el variable
	   usa <button>: el tema le aplica uppercase a los botones pero no a los
	   enlaces, y quedaban dos estilos distintos en la misma fila. */
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: background 0.15s, transform 0.1s;
}

.tdfml-buy:hover,
.tdfml-buy:focus {
	background: #a81430;
	color: #fff;
	text-decoration: none;
}

.tdfml-buy:active { transform: scale(0.98); }

.tdfml-cart {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #CC1939;
	border-radius: 0;
	background: #fff;
	color: #CC1939;
	cursor: pointer;
	/* Ancla del "+" absoluto y del tooltip. */
	position: relative;
	transition: background 0.15s, color 0.15s, transform 0.1s;
}

.tdfml-cart:hover {
	background: #CC1939;
	color: #fff;
}

.tdfml-cart:active { transform: scale(0.94); }

.tdfml-cart__icon {
	width: 17px;
	height: 17px;
	display: block;
	/* Compensa el asa del changuito para que se vea centrado. */
	margin-left: -3px;
}

/* Tilde de confirmación: ocupa el lugar del changuito durante 1,6 s.
   Al vivir dentro del mismo botón de 36px, no empuja nada. */
.tdfml-cart__check {
	width: 18px;
	height: 18px;
	display: none;
}

.tdfml-cart.is-ok .tdfml-cart__icon,
.tdfml-cart.is-ok .tdfml-cart__plus {
	display: none;
}

.tdfml-cart.is-ok .tdfml-cart__check {
	display: block;
}

.tdfml-cart__plus {
	position: absolute;
	top: 3px;
	right: 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* ---------- Spinner de "agregando" ----------
   Compartido por el botón de la tarjeta y el de la modal. Se dibuja con un
   borde al que se le hace transparente un lado: al girar, ese hueco da la
   sensación de movimiento. `currentColor` hace que tome solo el rojo del
   botón en reposo y el blanco cuando está en hover, sin reglas extra.
   Es el único círculo del sistema; el resto sigue siendo todo a 0 de radio. */

.tdfml-spin {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: tdfml-girar 0.6s linear infinite;
}

@keyframes tdfml-girar {
	to { transform: rotate(360deg); }
}

/* Con movimiento reducido activado, late en vez de girar. */
@media (prefers-reduced-motion: reduce) {
	.tdfml-spin {
		animation: tdfml-latir 1s ease-in-out infinite;
		border-top-color: currentColor;
		opacity: 0.5;
	}
	@keyframes tdfml-latir {
		50% { opacity: 1; }
	}
}

/* Mientras carga se esconde el changuito y aparece el círculo. El botón
   mantiene sus 36px, así que la fila no se mueve en ningún momento. */
.tdfml-cart.is-cargando .tdfml-cart__icon,
.tdfml-cart.is-cargando .tdfml-cart__plus,
.tdfml-m-add.is-cargando .tdfml-m-add__icon {
	display: none;
}

.tdfml-cart.is-cargando .tdfml-spin,
.tdfml-m-add.is-cargando .tdfml-spin {
	display: block;
}

.tdfml-cart.is-cargando {
	cursor: wait;
}

.tdfml-cart.is-ok {
	background: #2e7d32;
	border-color: #2e7d32;
	color: #fff;
}

/* Red de contención: WooCommerce, y algún plugin que también escuche
   added_to_cart, insertan un enlace "Ver carrito" al lado del botón que
   rompe la grilla. El JS lo borra; esto lo cubre si alguno lo agrega tarde. */
.tdfml-pie .added_to_cart,
.tdfml-acciones .added_to_cart,
.tdfml-card .added_to_cart {
	display: none !important;
}


.tdfml-title {
	font-size: 14px;
	font-weight: 700;
	color: #cc1939;
	font-family: 'Unbounded', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

.tdfml-title:hover { text-decoration: underline; }

/* Notificador de stock: usa las clases .tdf-stock de siempre, así que el
   estilo lo hereda del CSS ya existente. Acá solo se ajusta el espaciado. */
.tdfml-stock {
	line-height: 1;
	margin-bottom: 2px;
}

.tdfml-cat {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Precio en tres líneas: tachado / precio + OFF / envío. */
.tdfml-price-linea {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.tdfml-off {
	background: #e8f5e9;
	color: #2e7d32;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 5px;
	white-space: nowrap;
}

.tdfml-regular {
	font-size: 12px;
	color: #8c8c8c;
}

.tdfml-price {
	font-size: 16px;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.1;
}

.tdfml-regular {
	display: block;
}

.tdfml-envio {
	font-size: 12px;
	font-weight: 600;
	color: #2e7d32;
}


/* ---------- Navegación del carrusel ---------- */

.tdfml-nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.tdfml-nav__arrow {
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 0;
	background: #CC1939;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.tdfml-nav__arrow:hover {
	background: #fdf0f2;
	color: #CC1939;
}

.tdfml-nav__arrow svg {
	width: 18px;
	height: 18px;
	display: block;
}


/* ---------- Modal ---------- */

body.tdfml-sin-scroll { overflow: hidden; }

/* El botón flotante de WhatsApp (Simple Chat Button) usa z-index 999999999,
   así que la modal tiene que ir por encima de eso o el ícono verde se le
   monta arriba. */
.tdfml-modal {
	position: fixed;
	inset: 0;
	z-index: 2000000000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tdfml-modal[hidden] { display: none; }

.tdfml-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.tdfml-modal__box {
	position: relative;
	background: #fff;
	width: min(520px, 94vw);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	z-index: 1;
}

.tdfml-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #ececec;
	flex-shrink: 0;
}

.tdfml-modal__head-txt {
	font-family: 'Unbounded', Arial, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	color: #1a1a1a;
}

.tdfml-modal__close {
	border: none;
	background: none;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	color: #1a1a1a;
	padding: 4px;
}

.tdfml-modal__body {
	overflow-y: auto;
	padding: 0 16px 16px;
}

.tdfml-modal__cargando {
	padding: 40px 0;
	text-align: center;
	color: #8c8c8c;
	font-size: 14px;
}

/* Galería de la modal */
.tdfml-m-gal {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	max-height: 300px;
	overflow: hidden;
	margin-bottom: 0;
}

.tdfml-m-gal__track {
	display: flex;
	height: 100%;
	transition: transform 0.25s ease;
}

/* 70% de ancho para que asomen la anterior y la siguiente un 15% de cada
   lado. Si se cambia este valor hay que cambiar también posicionar() en el
   JS, que usa los mismos números para centrar la foto actual. */
.tdfml-m-gal__item {
	flex: 0 0 70%;
	height: 100%;
	padding: 0 8px;
	box-sizing: border-box;
}

/* Las que asoman van atenuadas, para que la vista no compita con la actual. */
.tdfml-m-gal__item img {
	opacity: 0.45;
	transition: opacity 0.2s;
}

.tdfml-m-gal__item.is-actual img {
	opacity: 1;
}

.tdfml-m-gal__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.tdfml-m-gal__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.92);
	color: #1a1a1a;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	padding: 0;
}

.tdfml-m-gal__arrow--prev { left: 0; }
.tdfml-m-gal__arrow--next { right: 0; }

/* Info de la modal */
/* ---------------------------------------------------------------------------
   Los <p> de la modal pelean contra el tema:
       .entry-content p { margin-bottom: 1.6em }   ← especificidad (0,2,0)
   Nuestras reglas de una sola clase pierden, y aparecen huecos enormes bajo
   el título, bajo "Modelo:" y bajo los avisos. Se sube la especificidad con
   .tdfml-modal__body por delante Y se marca !important en los márgenes, para
   que tampoco dependa del orden en que carguen las hojas de estilo.
   --------------------------------------------------------------------------- */

.tdfml-modal__body .tdfml-m-title {
	font-size: 15px;
	font-weight: 700;
	color: #cc1939;
	font-family: 'Unbounded', sans-serif;
	text-transform: uppercase;
	line-height: 1.35;
	margin: 10px 0 0 !important;
}

.tdfml-modal__body .tdfml-m-attr__label {
	margin: 0 0 6px !important;
}

.tdfml-modal__body .tdfml-m-aviso {
	margin: 0 0 10px !important;
}

.tdfml-modal__body .tdfml-m-desc p {
	margin: 0 0 4px !important;
}

.tdfml-modal__body .tdfml-m-desc p:last-child {
	margin-bottom: 0 !important;
}

.tdfml-m-vermas {
	color: #1b4f9c;
	text-decoration: none;
	font-size: 13px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	text-transform: none;
	white-space: nowrap;
}

.tdfml-m-vermas:hover { text-decoration: underline; }

.tdfml-m-precio-wrap {
	margin-bottom: 10px;
}

.tdfml-m-precio-linea {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.tdfml-m-regular {
	display: block;
	font-size: 13px;
	color: #8c8c8c;
	line-height: 1.2;
}

.tdfml-m-precio {
	font-size: 27px;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.1;
}

.tdfml-m-off {
	background: #e8f5e9;
	color: #2e7d32;
	font-size: 12px;
	font-weight: 700;
	padding: 2px 6px;
}


.tdfml-envio--modal { margin-bottom: 12px; }

.tdfml-m-attr { margin-bottom: 12px; }

.tdfml-m-attr__label {
	font-size: 13px;
	font-weight: 600;
	color: #1a1a1a;
}

.tdfml-m-attr__sel {
	font-weight: 400;
	color: #555;
}

.tdfml-m-desc {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: #555;
	margin: 0 0 8px;
}

.tdfml-m-desc[hidden] { display: none; }

.tdfml-m-desc p { margin: 0 0 4px; }
.tdfml-m-desc p:last-child { margin-bottom: 0; }

/* Fila de swatches: una sola línea que se desliza. Si hay más opciones de las
   que entran, la última queda cortada a propósito — es la señal visual de que
   se puede seguir hacia la derecha. */
.tdfml-m-attr__row {
	position: relative;
}

.tdfml-m-attr__ops {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 2px 0;
}

.tdfml-m-attr__ops::-webkit-scrollbar { display: none; }

.tdfml-m-attr__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 44px;
	border: 1px solid #e0e0e0;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.96);
	color: #1a1a1a;
	font-size: 17px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 2;
}

.tdfml-m-attr__nav[hidden] { display: none; }
.tdfml-m-attr__nav--prev { left: 0; }
.tdfml-m-attr__nav--next { right: 0; }

/* Cuando hay flechas, la fila deja aire a los costados para que no tapen
   el primer ni el último swatch. */
.tdfml-m-attr__row:has(.tdfml-m-attr__nav:not([hidden])) .tdfml-m-attr__ops {
	padding-left: 28px;
	padding-right: 28px;
}

.tdfml-m-attr__nav:hover { border-color: #CC1939; color: #CC1939; }

.tdfml-m-op {
	border: 1px solid #d0d0d0;
	border-radius: 0;
	background: #fff;
	color: #1a1a1a;
	font-size: 13px;
	padding: 7px 13px;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

/* Swatch con miniatura: solo la foto, sin nombre. El nombre de la opción
   elegida se muestra al lado de la etiqueta del atributo. */
.tdfml-m-op--foto {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	padding: 3px;
	overflow: hidden;
}

.tdfml-m-op--foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Las opciones sin foto quedan como chip de texto, en la misma fila. */
.tdfml-m-op:not(.tdfml-m-op--foto) {
	flex: 0 0 auto;
	white-space: nowrap;
}

.tdfml-m-op:hover:not(:disabled) { border-color: #1a1a1a; }

.tdfml-m-op:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* El foco del navegador queda pegado después de hacer clic y algunos temas
   le pintan fondo propio al botón enfocado (por eso se veía un bloque rojo
   sin texto). Se neutraliza y se marca la selección solo con el borde. */
.tdfml-m-op:focus,
.tdfml-m-op:focus-visible {
	outline: none;
	background: #fff;
	color: #1a1a1a;
}

.tdfml-m-op.is-sel,
.tdfml-m-op.is-sel:focus {
	border-color: #CC1939;
	border-width: 2px;
	background: #fff;
	color: #CC1939;
	font-weight: 600;
}

/* El borde pasa de 1px a 2px al seleccionar; se descuenta del padding para
   que el swatch no cambie de tamaño ni empuje a los de al lado. */
.tdfml-m-op--foto.is-sel {
	padding: 2px;
}

.tdfml-m-aviso {
	font-size: 13px;
	color: #CC1939;
}

.tdfml-m-acciones {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

/* Las acciones de la modal replican a las de la tarjeta: "Comprar ahora"
   ancho y el carrito como ícono al lado. Antes el botón ancho era el de
   agregar (.tdfml-m-add) y el ícono era un enlace al carrito (.tdfml-m-cart);
   se renombraron para que cada clase diga lo que el botón hace. */

.tdfml-m-buy {
	flex: 1;
	border: none;
	border-radius: 0;
	background: #CC1939;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 13px 16px;
	cursor: pointer;
	transition: background 0.15s;
}

.tdfml-m-buy:hover:not(:disabled) { background: #a81430; }

.tdfml-m-buy:disabled {
	background: #e0e0e0;
	color: #9e9e9e;
	cursor: not-allowed;
}

.tdfml-m-buy.is-cargando {
	background: #a81430;
	color: #fff;
	cursor: wait;
	opacity: 1;
}

.tdfml-m-add {
	width: 50px;
	border: 1px solid #CC1939;
	border-radius: 0;
	background: #fff;
	color: #CC1939;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tdfml-m-add:hover:not(:disabled) {
	background: #CC1939;
	color: #fff;
}

.tdfml-m-add:disabled {
	border-color: #e0e0e0;
	background: #fff;
	color: #c4c4c4;
	cursor: not-allowed;
}

.tdfml-m-add.is-cargando {
	cursor: wait;
}

.tdfml-m-add.is-cargando .tdfml-spin {
	width: 18px;
	height: 18px;
}

/* Mismo tilde de confirmación que en la tarjeta. */
.tdfml-m-add__icon { width: 20px; height: 20px; display: block; }

.tdfml-m-add__check { width: 21px; height: 21px; display: none; }

.tdfml-m-add.is-ok {
	background: #2e7d32;
	border-color: #2e7d32;
	color: #fff;
}

.tdfml-m-add.is-ok .tdfml-m-add__icon { display: none; }

.tdfml-m-add.is-ok .tdfml-m-add__check { display: block; }

/* ---------- Dispositivos sin hover (táctiles) ---------- */

/* Las flechas de la galería aparecían solo con :hover. En una tablet no hay
   hover, así que quedaban invisibles y sin manera de saber que hay más fotos.
   Acá se muestran siempre y con menos opacidad, para no tapar la imagen. */
@media (hover: none) {
	.tdfml-gal__arrow {
		opacity: 0.65;
		background: rgba(255, 255, 255, 0.8);
	}

	/* El :hover se queda "pegado" después de tocar en pantallas táctiles. */
	.tdfml-card:hover .tdfml-gal__arrow { opacity: 0.65; }
	.tdfml-title:hover { text-decoration: none; }
	.tdfml-quick:hover {
		background: #fff;
		border-color: #e0e0e0;
		color: #1a1a1a;
	}
	.tdfml-cart:hover {
		background: #fff;
		color: #CC1939;
	}
	.tdfml-buy:hover { background: #CC1939; }
	.tdfml-m-op:hover:not(:disabled) { border-color: #d0d0d0; }
	.tdfml-m-op.is-sel:hover { border-color: #CC1939; }
}

/* ---------- Tablet ---------- */

@media (min-width: 601px) and (max-width: 1024px) {
	.tdfml-carousel { grid-auto-columns: 30vw; }
	.tdfml-slide { width: 30vw; }

	.tdfml-modal__box { width: min(520px, 90vw); }
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
	.tdfml-carousel { grid-auto-columns: 47vw; }
	.tdfml-slide { width: 47vw; }
	.tdfml-nav { display: none; }

	.tdfml-gal__arrow { display: none; }
	.tdfml-title { font-size: 12px; }
	.tdfml-price { font-size: 14px; }
	.tdfml-info { padding: 8px 9px 12px; }

	.tdfml-transfer { font-size: 10.5px; }
	.tdfml-transfer strong { font-size: 11.5px; }

	.tdfml-pie { gap: 5px; padding-top: 7px; }
	.tdfml-acciones { gap: 5px; }
	.tdfml-buy { height: 34px; font-size: 11.5px; }
	.tdfml-cart { width: 34px; height: 34px; }

	.tdfml-modal__box {
		width: 100vw;
		max-height: 92vh;
		align-self: flex-end;
	}

	/* Zócalo fijo: el bloque de acciones queda pegado abajo mientras el resto
	   de la modal scrollea, así "Agregar al carrito" siempre está a mano. */
	.tdfml-m-acciones {
		position: sticky;
		bottom: 0;
		background: #fff;
		padding: 10px 0 2px;
		margin-top: 4px;
		box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.25);
		z-index: 3;
	}

	.tdfml-modal__body { padding-bottom: 4px; }
}

/* ===========================================
   Grilla estilo MercadoLibre — [tdf_productos_ml]

   Misma estructura que la grilla vieja (.tdf-grid): 5 columnas en desktop,
   3 en tablet, 2 en mobile. Solo cambia el diseño de cada tarjeta.
   =========================================== */

.tdfml-gridwrap {
	margin: 1rem 0;
}

.tdfml-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.tdfml-contador {
	font-size: 12.5px;
	color: #777;
	font-weight: 500;
}

.tdfml-orden-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tdfml-toolbar-label {
	font-size: 12.5px;
	color: #777;
	white-space: nowrap;
}

.tdfml-orden-select {
	font-size: 13px;
	padding: 6px 10px;
	border: 1px solid #d0d0d0;
	border-radius: 0;
	background: #fff;
	color: #1a1a1a;
	max-width: 220px;
}

.tdfml-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	align-items: stretch;
	transition: opacity 0.2s;
}

.tdfml-grid.is-loading {
	opacity: 0.35;
	pointer-events: none;
}

/* La tarjeta se estira a la celda de la grilla. */
.tdfml-grid > .tdfml-card {
	width: 100%;
	height: 100%;
}

.tdfml-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.tdfml-more-btn {
	border: 1px solid #CC1939;
	border-radius: 0;
	background: #fff;
	color: #CC1939;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 30px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.tdfml-more-btn:hover:not(:disabled) {
	background: #CC1939;
	color: #fff;
}

.tdfml-more-btn:disabled {
	opacity: 0.55;
	cursor: wait;
}

@media (max-width: 1024px) {
	.tdfml-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
	.tdfml-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.tdfml-toolbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.tdfml-orden-group { width: 100%; }
	.tdfml-orden-select { flex: 1; max-width: none; }
}

/* ===========================================
   Flash Sale del día — [tdf_ofertas_dia_ml]
   =========================================== */

/* El flash sale es un CARRUSEL, no una grilla. Con seis productos, una
   grilla de seis deja las tarjetas muy angostas y una de cuatro deja dos
   huérfanas abajo. Deslizando entran cuatro cómodas y las otras dos quedan
   a un gesto.

   A diferencia de los carruseles del home (ancho fijo de 240px), acá las
   tarjetas se calculan como fracción del contenedor para que entren
   exactamente cuatro, descontando los gaps. */
/* El mini contador (.tdf-mini-flash) se posiciona absoluto respecto de su
   contenedor; acá ese contenedor es .tdfml-gal, que ya es position:relative.
   El estilo lo aporta tdf_grid_assets(), no se redefine nada. */

.tdfml-carousel--flash {
	grid-auto-columns: calc((100% - 3rem) / 4);
}

.tdfml-carousel--flash .tdfml-slide {
	width: 100%;
}

@media (max-width: 1024px) {
	.tdfml-carousel--flash { grid-auto-columns: calc((100% - 2rem) / 3); }
}

@media (max-width: 600px) {
	/* En mobile se deja asomar la siguiente: es la señal de que hay más. */
	.tdfml-carousel--flash { grid-auto-columns: 60vw; }
}

.tdfml-flashwrap {
	margin: 2rem 0;
}

.tdfml-flash-titulo {
	font-family: 'Unbounded', sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: #1a1a1a;
	margin: 0 0 4px;
}

.tdfml-flash-loading {
	font-size: 13px;
	color: #8c8c8c;
	padding: 20px 0;
}


@media (max-width: 600px) {
	.tdfml-flash-titulo { font-size: 16px; }
}

/* ---------- Badges de pago ----------
   Se usa el componente compartido .tdf-badges / .tdf-badge (definido en
   tdf_grid_assets), sin redefinir colores, tipografía ni tamaños. Acá solo
   se resuelve la ubicación dentro de la tarjeta nueva. */

.tdfml-info .tdf-badges {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
	padding-top: 6px;
}

.tdfml-info .tdf-badge,
.tdfml-modal__body .tdf-badge {
	padding: 5px 5px;
}

.tdfml-m-badges {
	margin-bottom: 12px;
}

.tdfml-modal__body .tdf-badges {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-bottom: 12px;
}

/* ===========================================
   Catálogo con filtros — [tdf_catalogo_ml]
   =========================================== */

/* Áreas explícitas para poder reubicar el buscador según el ancho sin tocar
   el HTML: en desktop va arriba de los filtros (columna izquierda), y en
   mobile queda entre "Ordenar por" y los productos, siempre visible aunque
   el panel de filtros esté cerrado. Por eso el buscador y la toolbar son
   hijos directos del wrap y no viven dentro del aside ni de .tdfml-catmain. */
.tdfml-catwrap {
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-areas:
		"buscar  toolbar"
		"filtros main";
	gap: 16px 24px;
	align-items: start;
	margin: 1rem 0;
}

.tdfml-buscarbox { grid-area: buscar; }
.tdfml-filtros   { grid-area: filtros; }
.tdfml-toolbar   { grid-area: toolbar; }
.tdfml-catmain   { grid-area: main; }
.tdfml-filtros-toggle { grid-area: toggle; }

.tdfml-filtros-toggle {
	display: none;
	border: 1px solid #d0d0d0;
	border-radius: 0;
	background: #fff;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 16px;
	cursor: pointer;
}

.tdfml-filtros {
	border: 1px solid #ececec;
	background: #fff;
	padding: 14px;
	position: sticky;
	top: 20px;
}

.tdfml-filtro {
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid #ececec;
}

.tdfml-filtro:last-of-type {
	border-bottom: none;
	margin-bottom: 8px;
}

.tdfml-filtro__titulo {
	font-family: 'Unbounded', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #1a1a1a;
	margin: 0 0 10px !important;
}

/* ---------- Buscador ---------- */

.tdfml-buscarbox {
	border: 1px solid #ececec;
	background: #fff;
	padding: 14px;
}

.tdfml-buscar {
	position: relative;
}

.tdfml-buscar__campo {
	width: 100%;
	border: 1px solid #d0d0d0;
	border-radius: 0;
	background: #fff;
	font-size: 13px;
	padding: 8px 28px 8px 8px;
	color: #1a1a1a;
}

.tdfml-buscar__campo:focus {
	outline: none;
	border-color: #CC1939;
}

.tdfml-buscar__spinner {
	position: absolute;
	right: 8px;
	top: 50%;
	width: 13px;
	height: 13px;
	margin-top: -7px;
	border: 2px solid #e0e0e0;
	border-top-color: #CC1939;
	border-radius: 50%;
	animation: tdfml-girar 0.7s linear infinite;
}

.tdfml-buscar__spinner[hidden] { display: none; }

@keyframes tdfml-girar {
	to { transform: rotate(360deg); }
}

/* ---------- Precio ---------- */

.tdfml-precio {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.tdfml-precio input {
	width: 100%;
	min-width: 0;
	border: 1px solid #d0d0d0;
	border-radius: 0;
	background: #fff;
	font-size: 13px;
	padding: 7px 8px;
	color: #1a1a1a;
}

.tdfml-precio__sep {
	color: #8c8c8c;
	flex-shrink: 0;
}

.tdfml-precio__aplicar {
	width: 100%;
	border: 1px solid #CC1939;
	border-radius: 0;
	background: #fff;
	color: #CC1939;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 10px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.tdfml-precio__aplicar:hover {
	background: #CC1939;
	color: #fff;
}

/* ---------- Categorías ---------- */

.tdfml-facetas__buscar {
	width: 100%;
	border: 1px solid #d0d0d0;
	border-radius: 0;
	background: #fff;
	font-size: 13px;
	padding: 7px 8px;
	margin-bottom: 8px;
	color: #1a1a1a;
}

.tdfml-facetas {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 280px;
	overflow-y: auto;
}

.tdfml-faceta {
	margin: 0;
	padding: 0;
}

.tdfml-faceta label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: #1a1a1a;
	padding: 4px 0;
	cursor: pointer;
	margin: 0;
}

.tdfml-faceta input {
	margin: 0;
	flex-shrink: 0;
}

.tdfml-faceta__nombre {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tdfml-faceta__n {
	color: #8c8c8c;
	font-size: 12px;
	flex-shrink: 0;
}

/* Categoría sin resultados con los filtros actuales: se atenúa pero no se
   oculta, para que la lista no salte con cada cambio. */
.tdfml-faceta.is-vacia {
	opacity: 0.4;
}

.tdfml-reset {
	width: 100%;
	border: none;
	border-radius: 0;
	background: none;
	color: #CC1939;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 0;
	cursor: pointer;
	text-align: left;
}

.tdfml-reset:hover { text-decoration: underline; }

/* ---------- Resultados ---------- */

.tdfml-catmain .tdfml-grid {
	grid-template-columns: repeat(4, 1fr);
}

.tdfml-vacio {
	font-size: 14px;
	color: #8c8c8c;
	padding: 30px 0;
	text-align: center;
}

.tdfml-vacio[hidden] { display: none; }

@media (max-width: 1024px) {
	.tdfml-catmain .tdfml-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	/* Los filtros pasan a ser un panel que se abre con el botón: en pantallas
	   angostas una columna lateral fija dejaría las tarjetas ilegibles.
	   El buscador NO entra en ese panel: queda suelto entre "Ordenar por" y
	   los productos, siempre a la vista. */
	.tdfml-catwrap {
		grid-template-columns: 1fr;
		grid-template-areas:
			"toggle"
			"filtros"
			"toolbar"
			"buscar"
			"main";
		gap: 12px;
	}

	.tdfml-filtros-toggle { display: block; }

	.tdfml-filtros {
		display: none;
		position: static;
	}

	.tdfml-catwrap.filtros-abiertos .tdfml-filtros { display: block; }

	/* Sin marco propio: en mobile queda como un campo más de la página.
	   NO es sticky de forma permanente: al tocar el campo, el JS scrollea la
	   página una sola vez para que el buscador quede justo debajo del menú
	   fijo, así el usuario ve el primer resultado sin que el teclado se lo
	   tape — pero después scrollea con la página como cualquier elemento. */
	.tdfml-buscarbox {
		border: none;
		padding: 0;
	}

	.tdfml-buscar__campo {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

@media (max-width: 600px) {
	.tdfml-catmain .tdfml-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}