/*
 * Liquid Glass — Plantilla de página Tienda (curada)
 * (page-templates/template-tienda.php)
 *
 * OJO: esta es la página de VITRINA curada, distinta de "Tienda-Store" (la
 * tienda de WooCommerce real, con el catálogo paginado completo — esa NO
 * usa esta hoja, usa product-cards.css + los hooks de functions.php).
 *
 * Depende de: liquid-glass.css, page-templates-base.css, patterns.css.
 * Breakpoints: móvil ≤544px, tablet ≤976px.
 */

/*
 * --- Carrusel de ofertas/promociones (2026-07) ---
 * PANTALLA COMPLETA a propósito: el truco "left:50%/margin-left:-50vw" saca
 * el carrusel del ancho máximo de ".dp-container" (1180px) y lo estira a
 * los 100vw del viewport, sin importar en qué contenedor esté anidado.
 * 4 imágenes visibles en desktop, 1 en móvil, formato 4:5. El avance
 * automático cada 1.5s lo maneja assets/js/promo-carousel.js (se detiene
 * solo si el visitante interactúa a mano, para no pelear con su gesto).
 */
.dp-promo-carousel {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.dp-promo-carousel::-webkit-scrollbar {
	display: none;
}

.dp-promo-slide {
	flex: 0 0 calc(25% - 6px);
	aspect-ratio: 4 / 5;
	scroll-snap-align: start;
	overflow: hidden;
}

.dp-promo-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder "foto pendiente" dentro del carrusel de ofertas: mismo formato 4:5 */
.dp-photo-pending--promo {
	flex: 0 0 calc(25% - 6px);
	aspect-ratio: 4 / 5;
	scroll-snap-align: start;
	border-radius: 0;
}

@media (max-width: 544px) {
	.dp-promo-slide,
	.dp-photo-pending--promo {
		flex: 0 0 100%;
	}
}