.wclc-wrap { margin: 2em 0; }
.wclc-title { text-align: center; margin: 0 0 .6em; }

.wclc {
	--wclc-pv: 3;
	--wclc-gap: 48px;
	--wclc-card-w: 210px;
	--wclc-fs: 13px;
	--wclc-scale: 1.3;
	--wclc-speed: 600ms;
	--wclc-ease: ease-in-out;
	--wclc-ratio: 4/3;
	--wclc-fit: cover;
	--wclc-accent: #5fb5ba;
	--wclc-accent-text: #fff;
	position: relative;
	font-size: var(--wclc-fs);
	line-height: 1.3;
}

.wclc-stage { position: relative; }

/* Cursor de arrastre */
.wclc-viewport { cursor: grab; }
.wclc--nodrag .wclc-viewport { cursor: auto; }
.wclc.is-dragging,
.wclc.is-dragging * { cursor: grabbing !important; }

/* El viewport se centra y recorta; su ancho lo calcula el JS (n tarjetas + huecos) */
.wclc-viewport {
	box-sizing: border-box;
	overflow: hidden;
	max-width: 100%;
	margin: 0 auto;
	padding: var(--wclc-vpad, 36px) var(--wclc-hpad, 0px);
}

.wclc-track {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--wclc-gap);
	transition: transform var(--wclc-speed) var(--wclc-ease);
	will-change: transform;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.wclc-slide {
	position: relative;
	flex: 0 0 var(--wclc-card-w);
	width: var(--wclc-card-w);
	min-width: 0;
	transition: transform var(--wclc-speed) var(--wclc-ease), opacity var(--wclc-speed) var(--wclc-ease);
}

/* ---- Tarjeta ---- */
.wclc-card { background: #fff; border-radius: 3px; overflow: hidden; }
.wclc--shadow .wclc-card { box-shadow: 0 8px 30px rgba(0, 0, 0, .08); }

.wclc-img { position: relative; display: block; overflow: hidden; background: #fff; line-height: 0; }
.wclc-img img { display: block; width: 100%; height: auto; margin: 0; max-width: 100%; -webkit-user-drag: none; }
/* Zoom de la foto al pasar el ratón: solo crece la imagen, el marco (.wclc-img) la recorta */
.wclc-img img { transition: transform .45s cubic-bezier(.22, 1, .36, 1); transform-origin: center center; }
@media (hover: hover) {
	.wclc:not(.is-dragging) .wclc-card:hover .wclc-img img { transform: scale(var(--wclc-hz, 1.1)); }
}
.wclc:not(.wclc--ratio-auto) .wclc-img { aspect-ratio: var(--wclc-ratio); }
.wclc:not(.wclc--ratio-auto) .wclc-img img { height: 100%; object-fit: var(--wclc-fit); }

.wclc-badge { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; font-size: .85em; font-weight: 600; line-height: 1.4; background: var(--wclc-accent); color: var(--wclc-accent-text); }
.wclc-badge--sale { background: #d63638; color: #fff; }
.wclc-badge--new + .wclc-badge--sale,
.wclc-badge--sale + .wclc-badge--new { top: 34px; }

.wclc-body { padding: .9em 1em 1.1em; text-align: left; }

.wclc .wclc-name { margin: 0 0 .3em; padding: 0; font-size: 1em; font-weight: 500; line-height: 1.25; text-transform: none; letter-spacing: 0; color: #3f3f3f; transition: color var(--wclc-speed) var(--wclc-ease); }
.wclc .wclc-name a { color: inherit; text-decoration: none; }

.wclc .wclc-price { margin: 0; font-size: 1.25em; font-weight: 700; line-height: 1.2; color: #3f3f3f; transition: color var(--wclc-speed) var(--wclc-ease); }
.wclc .wclc-price del { opacity: .55; font-weight: 400; font-size: .85em; }
.wclc .wclc-price ins { text-decoration: none; background: transparent; }

.wclc-cart { margin-top: .85em; }
.wclc .wclc-cart a.button,
.wclc .wclc-cart button.button {
	display: inline-block;
	margin: 0;
	padding: .5em .95em;
	background: var(--wclc-accent);
	color: var(--wclc-accent-text);
	border: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: .8em;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	cursor: pointer;
	transition: opacity .25s ease, filter .2s ease;
}
.wclc .wclc-cart a.button:hover,
.wclc .wclc-cart button.button:hover { background: var(--wclc-accent); color: var(--wclc-accent-text); filter: brightness(.93); }
.wclc .wclc-cart .added_to_cart { display: block; margin-top: .5em; font-size: .85em; }

/* ---- Producto central destacado (lo activa el JS con .is-hl) ---- */
.wclc.is-hl .wclc-slide:not(.is-center) .wclc-cart a.button,
.wclc.is-hl .wclc-slide:not(.is-center) .wclc-cart button.button { opacity: .75; }

/* ---- Flechas ---- */
.wclc-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--wclc-accent); color: var(--wclc-accent-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2); cursor: pointer; transition: opacity .2s, transform .2s;
}
.wclc-arrow:hover { transform: translateY(-50%) scale(1.08); }
.wclc-arrow:disabled { opacity: .25; cursor: default; transform: translateY(-50%); }
.wclc-prev { left: 0; }
.wclc-next { right: 0; }

/* ---- Puntos ---- */
.wclc-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wclc-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .18); cursor: pointer; transition: background .2s, transform .2s; }
.wclc-dot.is-active { background: var(--wclc-accent); transform: scale(1.3); }

.wclc.is-static .wclc-arrow,
.wclc.is-static .wclc-dots { display: none; }

/* ---- Efectos (solo cuando JS ya inicializó el carrusel) ---- */

/* Fundido: el track se desvanece, salta y reaparece */
.wclc--fade.is-ready .wclc-track { transition: opacity calc(var(--wclc-speed) / 2) var(--wclc-ease); }
.wclc--fade.is-ready .wclc-track.is-fading { opacity: 0; }

/* Zoom: los visibles a tamaño completo, el resto encogido */
.wclc--zoom.is-ready .wclc-slide { transform: scale(.85); opacity: .5; }
.wclc--zoom.is-ready .wclc-slide.is-visible { transform: scale(1); opacity: 1; }

/* Cascada: los productos suben y aparecen uno tras otro */
.wclc--cascade.is-ready .wclc-slide { opacity: 0; transform: translateY(28px); transition-delay: 0ms; }
.wclc--cascade.is-ready .wclc-slide.is-visible { opacity: 1; transform: none; transition-delay: var(--wclc-d, 0ms); }

/* Mientras se arrastra, los vecinos deben verse con normalidad */
.wclc--zoom.is-ready.is-dragging .wclc-slide { transform: scale(1); opacity: 1; }
.wclc--cascade.is-ready.is-dragging .wclc-slide { opacity: 1; transform: none; transition-delay: 0ms; }

/* El central destacado va después para ganar a los efectos anteriores */
.wclc.is-hl .wclc-slide.is-center { transform: scale(var(--wclc-scale)); z-index: 3; opacity: 1; }
.wclc.is-hl .wclc-slide.is-center .wclc-name,
.wclc.is-hl .wclc-slide.is-center .wclc-price { color: #010101; }

/* ---- Móvil ---- */
@media (max-width: 599px) {
	.wclc-arrow { width: 32px; height: 32px; opacity: .92; }
	.wclc-prev { left: 2px; }
	.wclc-next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.wclc-track, .wclc-slide, .wclc-arrow, .wclc-dot, .wclc-name, .wclc-price { transition: none !important; }
}