/* =============================================================
   Carousel Product — carousel.css  v2.1.0
   Activar con la clase "wpc-carousel" en el bloque.
   Para carruseles individuales: "wpc-carousel wpc--nombre"
   ============================================================= */

/* ── 1. SHELL (raiz del carrusel construida por JS) ────────── */
.wpc-shell {
	--wpc-arrow-size: 44px;
	--wpc-arrow-bg: #ffffff;
	--wpc-arrow-color: #1a1a2e;
	--wpc-arrow-bg-hover: #1a1a2e;
	--wpc-arrow-color-hover: #ffffff;
	--wpc-dot-inactive: #d0d0d8;
	--wpc-dot-active: #1a1a2e;
	--wpc-transition: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: visible;
}

/* ── 2. INNER (contiene el track; tiene el overflow:hidden) ── */
.wpc-inner {
	position: relative;
	width: 100%;
}

/* ── 3. TRACK WRAPPER ─────────────────────────────────────── */
.wpc-track-wrapper {
	overflow: hidden;
	width: 100%;
}

/* ── 4. TRACK (la lista de productos) ─────────────────────── */
.wpc-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	transition: transform var(--wpc-transition);
	will-change: transform;
	/* Reset total: padding, margin y gap forzados a 0.
	   El espaciado entre slides se maneja via margin-right en JS
	   para evitar interaccion con pseudo-elementos ::before
	   generados por WooCommerce o el tema. */
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	gap: 0 !important;
	column-gap: 0 !important;
}

/* ── 5. CADA SLIDE ────────────────────────────────────────── */
.wpc-track > * {
	flex: 0 0 auto !important;
	/* border-box: el padding del tema queda DENTRO del ancho calculado
	   por JS, evitando el offset visual antes del primer producto. */
	box-sizing: border-box !important;
	min-width: 0;
}

/* ── 6. FLECHAS ───────────────────────────────────────────── */
.wpc-arrow {
	position: absolute;
	top: 0; bottom: 0; margin: auto;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wpc-arrow-size);
	height: var(--wpc-arrow-size);
	border-radius: 50%;
	border: 2px solid #e4e4ec;
	background: var(--wpc-arrow-bg);
	color: var(--wpc-arrow-color);
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0,0,0,.10);
	transition: background var(--wpc-transition), color var(--wpc-transition),
		border-color var(--wpc-transition), box-shadow var(--wpc-transition), transform .15s ease;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.wpc-arrow:hover,
.wpc-arrow:focus-visible {
	background: var(--wpc-arrow-bg-hover);
	color: var(--wpc-arrow-color-hover);
	border-color: var(--wpc-arrow-bg-hover);
	box-shadow: 0 4px 20px rgba(26,26,46,.22);
}
.wpc-arrow:active { transform: scale(0.93); }
.wpc-arrow--prev { left: 8px; }
.wpc-arrow--next { right: 8px; }
.wpc-arrow[disabled],
.wpc-arrow[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.wpc-arrow svg {
	width: 20px; height: 20px;
	display: block; flex-shrink: 0;
	fill: none; stroke: currentColor;
	stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── 7. DOTS ──────────────────────────────────────────────── */
.wpc-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	flex-wrap: wrap;
}
.wpc-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--wpc-dot-inactive);
	border: none; padding: 0;
	cursor: pointer;
	transition: background var(--wpc-transition), width var(--wpc-transition), border-radius var(--wpc-transition);
	flex-shrink: 0;
}
.wpc-dot.is-active { background: var(--wpc-dot-active); width: 26px; border-radius: 5px; }

/* ── 8. BARRA DE PROGRESO ─────────────────────────────────── */
.wpc-progress {
	height: 2px; background: #e4e4ec;
	border-radius: 1px; margin-top: 12px; overflow: hidden;
}
.wpc-progress-bar {
	height: 100%; background: var(--wpc-dot-active);
	border-radius: 1px; width: 0%;
}

/* ── 9. PSEUDO-ELEMENTOS DE WOOCOMMERCE ──────────────────── */
/* WooCommerce inyecta ::before y ::after en ul.products para
   el clearfix. En flexbox actuan como items invisibles y generan
   un gap antes del primer producto. Los neutralizamos. */
.wpc-shell ul.products::before,
.wpc-shell ul.products::after,
.wpc-shell .wc-block-grid__products::before,
.wpc-shell .wc-block-grid__products::after {
	display: none !important;
	content: none !important;
}

/* ── 10. COMPATIBILIDAD WC/DIVI ────────────────────────────── */
.wpc-shell .wc-block-grid__products,
.wpc-shell ul.wp-block-post-template,
.wpc-shell .wc-block-product-template,
.wpc-shell ul.products,
.wpc-shell .et_pb_shop .products,
.wpc-shell .et-block-products__list {
	display: flex !important;
	flex-wrap: nowrap !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.wpc-shell .wc-block-grid__product,
.wpc-shell li.wp-block-post,
.wpc-shell .wc-block-product-template > *,
.wpc-shell ul.products > li,
.wpc-shell .et_pb_shop .products > li,
.wpc-shell .et-block-products__item {
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
.wpc-shell [class*="columns-"] {
	--wc-block-product-grid-columns: unset !important;
}

/* ── 10. RESPONSIVO ───────────────────────────────────────── */
@media (max-width: 1024px) { .wpc-shell { --wpc-arrow-size: 38px; } }
@media (max-width: 767px)  { .wpc-shell { --wpc-arrow-size: 34px; } }

/* ── 11. ACCESIBILIDAD ────────────────────────────────────── */
.wpc-arrow:focus-visible,
.wpc-dot:focus-visible {
	outline: 2px solid var(--wpc-dot-active);
	outline-offset: 3px;
}

/* ── 12. ANTI-FOUC ────────────────────────────────────────── */
.wpc-shell:not(.wpc-ready) .wpc-arrow,
.wpc-shell:not(.wpc-ready) .wpc-dots,
.wpc-shell:not(.wpc-ready) .wpc-progress {
	display: none;
}