/**
 * Archivo multimedia de product_brand destacado.
 * Asset separado y condicional para no afectar otros archives.
 */

.wapu-archive {
	padding-top: 0;
}

.wapu-featured-brand-slider {
	position: relative;
	isolation: isolate;
	width: 100vw;
	max-width: none;
	height: min(calc(100vh - 76px), 90vh);
	height: min(var(--wapu-featured-brand-slider-height, calc(100svh - 76px)), 90svh);
	min-width: 0;
	margin: 0 calc(50% - 50vw);
	overflow: hidden;
	background: #111;
	box-sizing: border-box;
}

.wapu-featured-brand-slider__viewport {
	width: 100%;
	height: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y pinch-zoom;
}

.wapu-featured-brand-slider__viewport::-webkit-scrollbar {
	display: none;
}

.wapu-featured-brand-slider__viewport:focus-visible {
	outline: 3px solid var(--ds-action);
	outline-offset: -3px;
}

.wapu-featured-brand-slider__track {
	display: flex;
	width: 100%;
	height: 100%;
	min-width: 0;
}

.wapu-featured-brand-slider__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
	background: #111;
}

.wapu-featured-brand-slider .wapu-featured-brand-slider__media {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.wapu-archive__toolbar {
	padding-top: clamp(24px, 3vw, 40px);
}

.wapu-featured-brand-slider__pagination {
	position: absolute;
	left: 50%;
	bottom: max(var(--ds-s-2), env(safe-area-inset-bottom));
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 2px 6px;
	border-radius: var(--ds-r-pill);
	background: rgba(17, 17, 17, .42);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transform: translateX(-50%);
}

.wapu-featured-brand-slider__dot {
	position: relative;
	width: 28px;
	height: 28px;
	min-width: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--ds-r-pill);
	background: transparent;
	cursor: pointer;
}

.wapu-featured-brand-slider__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: var(--ds-r-pill);
	background: rgba(255, 255, 255, .56);
	transform: translate(-50%, -50%);
	transition: width var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}

.wapu-featured-brand-slider__dot[aria-current="true"]::before {
	width: 20px;
	background: #fff;
}

.wapu-featured-brand-slider__dot:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Logo de la marca como título del toolbar (sustituye al texto). */
.wapu-archive__title--logo {
	display: flex;
	align-items: center;
	min-height: clamp(52px, 7.5vw, 96px);
}

/* Doble clase para ganarle al height:auto global de WooCommerce
   (.woocommerce-page img), igual que el fix del slider en v4.6.8. */
.wapu-archive__title--logo .wapu-archive__title-logo {
	display: block;
	width: auto;
	height: clamp(48px, 7vw, 88px);
	max-width: min(420px, 78vw);
	object-fit: contain;
	object-position: left center;
}

/* ─── Hero comprable del producto destacado ────────────────────────
   Media a la izquierda (video de portada o imagen del producto) y a la
   derecha eyebrow "Producto destacado", título, descripción, precio y
   agregar al carrito. Fondo blanco y escala contenida para distinguirse
   de la banda gris de ofertas. */
.wapu-featured-brand-product {
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(var(--ds-s-3), 3vw, var(--ds-s-5));
	width: 100%;
	max-width: 920px;
	margin: 0 auto clamp(var(--ds-s-3), 3vw, var(--ds-s-5));
	padding: var(--ds-s-2) var(--ds-s-3);
	background: var(--ds-surface);
	border-radius: var(--ds-r-lg);
	box-sizing: border-box;
}

.wapu-featured-brand-product__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ds-r-lg);
	aspect-ratio: 4 / 3;
	max-height: 380px;
	background: var(--ds-surface-2);
}

/* Doble selector para ganarle al height:auto global de WooCommerce. */
.wapu-featured-brand-product__media .wapu-featured-brand-product__image,
.wapu-featured-brand-product__media .wapu-featured-brand-product__video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.wapu-featured-brand-product__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ds-s-2);
	min-width: 0;
	padding-right: clamp(0px, 2vw, var(--ds-s-4));
}

.wapu-featured-brand-product__eyebrow {
	margin: 0;
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-caption-2);
	font-weight: var(--ds-fw-semibold);
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--co-accent, var(--ds-action));
}

.wapu-featured-brand-product__title {
	margin: 0;
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-title-3);
	font-weight: var(--ds-fw-semibold);
	line-height: 1.2;
	color: var(--ds-ink);
}

.wapu-featured-brand-product__title a {
	color: inherit;
	text-decoration: none;
}

.wapu-featured-brand-product__desc {
	margin: 0;
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-subhead);
	line-height: 1.5;
	color: var(--ds-ink-2);
}

.wapu-featured-brand-product__price .wapu-price__current {
	font-size: var(--ds-fs-headline);
	font-weight: var(--ds-fw-semibold);
	color: var(--ds-ink);
}

.wapu-featured-brand-product__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--ds-s-1);
	background-color: var(--co-accent, var(--ds-action)) !important;
	color: var(--ds-action-ink, var(--ds-surface)) !important;
}

@media (max-width: 768px) {
	.wapu-featured-brand-product {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ds-s-2);
		margin-bottom: var(--ds-s-5);
		padding: var(--ds-s-2);
	}

	.wapu-featured-brand-product__info {
		padding-right: 0;
	}

	.wapu-featured-brand-product__cta {
		align-self: stretch;
		justify-content: center;
	}
}

/* Banda gris flat: separa las ofertas del catálogo normal. */
.wapu-featured-brand-offers {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto clamp(var(--ds-s-5), 5vw, var(--ds-s-7));
	padding: var(--ds-s-3);
	background: var(--ds-surface-2);
	border-radius: var(--ds-r-lg);
	box-sizing: border-box;
}

/* Header compacto, mismo patrón que .wapu-cart-recommendations__header. */
.wapu-featured-brand-offers__header {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 16px;
}

.wapu-featured-brand-offers__eyebrow {
	margin: 0;
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-caption-2);
	font-weight: var(--ds-fw-semibold);
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ws-primary, var(--wp-primary, #be185d));
}

.wapu-featured-brand-offers__title {
	margin: 0;
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-title-3);
	font-weight: var(--ds-fw-semibold);
	line-height: 1.2;
	color: var(--ds-ink);
}

/* Carrusel horizontal de una sola fila (mismo patrón que las
   recomendaciones del carrito): con muchas ofertas no crece el scroll
   vertical, se desliza en horizontal con snap. */
.wapu-featured-brand-offers .wapu-featured-brand-offers__grid {
	display: flex;
	max-width: none;
	margin: 0;
	gap: var(--ds-s-2);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.wapu-featured-brand-offers .wapu-featured-brand-offers__grid::-webkit-scrollbar {
	display: none;
}

.wapu-featured-brand-offers .wapu-featured-brand-offers__grid > * {
	flex: 0 0 clamp(210px, 21vw, 290px);
	min-width: 0;
	scroll-snap-align: start;
}

@media (max-width: 768px) {
	.wapu-featured-brand-slider__pagination {
		bottom: max(var(--ds-s-1), env(safe-area-inset-bottom));
	}

	.wapu-featured-brand-offers {
		margin-bottom: var(--ds-s-5);
		padding: var(--ds-s-2);
	}

	.wapu-featured-brand-offers__header {
		margin-bottom: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wapu-featured-brand-slider__viewport {
		scroll-behavior: auto;
	}

	.wapu-featured-brand-slider__dot::before {
		transition: none;
	}
}