/* =========================================================
   Carrusel de Categorías para WooCommerce
   Diseño basado en las capturas (escritorio + móvil).
   ========================================================= */

.ccw-carousel {
	--ccw-gap: 24px;
	--ccw-cols: 4.5;
	--ccw-card-bg: #f2f2f2;
	--ccw-text: #1a1a1a;
	--ccw-radius: 10px;
	--ccw-button-bg: #111111;
	--ccw-button-text: #ffffff;
	--ccw-success: #16a34a;
	--ccw-side-gap: 26px; /* separación respecto al borde izquierdo de la pantalla (escritorio) */

	position: relative;
	width: 100%;
	margin: 0 0 40px;
	padding-left: var(--ccw-side-gap);
	box-sizing: border-box;
	font-family: inherit;
	color: var(--ccw-text);
}

.ccw-carousel *,
.ccw-carousel *::before,
.ccw-carousel *::after {
	box-sizing: border-box;
}

/* ---- Título ---- */
.ccw-heading {
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	color: var(--ccw-text);
}

/* ---- Viewport + pista ---- */
.ccw-viewport {
	position: relative;
}

.ccw-track {
	display: flex;
	gap: var(--ccw-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;         /* Firefox */
	padding-bottom: 4px;
}
.ccw-track::-webkit-scrollbar {
	display: none;                 /* Chrome / Safari */
}

/* Cada tarjeta ocupa una fracción del ancho según columnas visibles */
.ccw-card {
	flex: 0 0 calc((100% - (var(--ccw-cols) - 1) * var(--ccw-gap)) / var(--ccw-cols));
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* ---- Zona de imagen (caja gris) ---- */
.ccw-card__media {
	position: relative;
	display: block;
	background: var(--ccw-card-bg);
	border-radius: var(--ccw-radius);
	/* Tarjetas más alargadas (antes 3 / 4) */
	aspect-ratio: 3 / 4.6;
	overflow: hidden;
	text-decoration: none;
	/* Aísla el contexto de mezcla a esta tarjeta: así "mix-blend-mode" de la
	   imagen (más abajo) se combina siempre con ESTE fondo gris, sin
	   depender de lo que haya alrededor en el resto de la página. */
	isolation: isolate;
}

/* Enlace que envuelve la imagen (ocupa toda la caja) */
.ccw-card__img-link {
	position: absolute !important;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	/* Importante: SIN z-index aquí. Un z-index en este enlace crearía su
	   propio contexto de apilamiento y "encerraría" el mix-blend-mode de
	   la imagen dentro de él, impidiendo que se mezcle con el fondo gris
	   de .ccw-card__media (el bug que hacía que el fondo blanco no
	   desapareciera). Al no llevar z-index, el enlace sigue pintándose
	   por encima del fondo gris (va después en el HTML) y por debajo de
	   la insignia/corazón (que sí tienen z-index: 2).
	*/
}

.ccw-card__media .ccw-card__img,
.ccw-card__media img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain;
	padding: 14%;
	margin: 0 !important;
	transition: transform 0.35s ease;
	/* Funde el fondo blanco de las fotos con el color de la tarjeta.
	   Con "multiply", cualquier zona blanca (255,255,255) de la foto
	   toma exactamente el color del fondo de la tarjeta (var(--ccw-card-bg)
	   en .ccw-card__media, aislado con "isolation: isolate" más arriba),
	   por lo que el blanco desaparece y se ve el fondo de la tarjeta.
	   Funciona mejor cuanto más puro sea el blanco de la foto original;
	   fondos "casi blancos" (grises muy claros) pueden dejar un ligero
	   velo, ya que esto es una mezcla de color en CSS, no un recorte
	   real del fondo de la foto. */
	mix-blend-mode: multiply;
	background-color: transparent;
	isolation: auto;
}

/* Evita que una imagen sin cargar deje un recuadro fantasma */
.ccw-card__media img[src=""],
.ccw-card__media img:not([src]) {
	display: none;
}

.ccw-card:hover .ccw-card__media img {
	transform: scale(1.03);
}

/* ---- Etiqueta "Nuevo" ---- */
.ccw-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: #ffffff;
	color: #111111;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 6px;
}

/* ---- Corazón ---- */
.ccw-wishlist {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: #333333;
	cursor: pointer;
	border-radius: 50%;
	transition: color 0.2s ease, background 0.2s ease;
}
.ccw-wishlist:hover {
	color: #111111;
	background: rgba(255, 255, 255, 0.6);
}
.ccw-wishlist svg {
	display: block;
	width: 22px;
	height: 22px;
	overflow: visible;
}
.ccw-wishlist.is-active {
	color: #e11d48;
}
.ccw-wishlist.is-active svg path {
	fill: currentColor;
	stroke: currentColor;
}

/* ---- Título + precio ---- */
.ccw-card__title {
	display: block;
	margin: 16px 0 6px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 400;
	color: var(--ccw-text);
	text-decoration: none;
}
.ccw-card__title:hover {
	text-decoration: underline;
}

.ccw-card__price {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ccw-text);
}
.ccw-card__price del {
	font-weight: 500;
	opacity: 0.5;
	margin-right: 8px;
}
.ccw-card__price ins {
	text-decoration: none;
}

/* ---- Botón "Añadir a la cesta" ---- */
.ccw-add {
	position: relative;
	overflow: hidden;
	margin-top: 16px;
	width: 100%;
	min-height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 6px;
	background: var(--ccw-button-bg);
	color: var(--ccw-button-text);
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.2s ease;
}
.ccw-add:hover {
	opacity: 0.92;
}

/* Relleno verde de carga */
.ccw-add__fill {
	position: absolute;
	inset: 0;
	transform: translateX(-101%);
	background: var(--ccw-success);
	z-index: 1;
}
.ccw-add__label,
.ccw-add__spinner,
.ccw-add__check {
	position: relative;
	z-index: 2;
}

/* Spinner (oculto por defecto) */
.ccw-add__spinner {
	display: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.45);
	border-top-color: #ffffff;
	animation: ccw-spin 0.7s linear infinite;
}
.ccw-add__check {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #ffffff;
}
.ccw-add__done-text {
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
}

/* Estado: cargando */
.ccw-add.is-loading {
	cursor: default;
	pointer-events: none;
}
.ccw-add.is-loading .ccw-add__label {
	opacity: 0;
}
.ccw-add.is-loading .ccw-add__spinner {
	display: inline-block;
}
.ccw-add.is-loading .ccw-add__fill {
	animation: ccw-fill 0.9s ease forwards;
}

/* Estado: añadido */
.ccw-add.is-done {
	background: var(--ccw-success);
	pointer-events: none;
}
.ccw-add.is-done .ccw-add__fill {
	transform: translateX(0);
}
.ccw-add.is-done .ccw-add__label,
.ccw-add.is-done .ccw-add__spinner {
	display: none;
}
.ccw-add.is-done .ccw-add__check {
	display: inline-flex;
	animation: ccw-pop 0.3s ease;
}

@keyframes ccw-spin {
	to { transform: rotate(360deg); }
}
@keyframes ccw-fill {
	from { transform: translateX(-101%); }
	to   { transform: translateX(0); }
}
@keyframes ccw-pop {
	0%   { transform: scale(0.4); }
	60%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}

/* En escritorio el botón aparece al pasar el ratón (como en la captura) */
@media (min-width: 782px) {
	.ccw-add {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
	.ccw-card:hover .ccw-add,
	.ccw-card:focus-within .ccw-add {
		opacity: 1;
		transform: translateY(0);
	}
	/* Mientras carga o tras añadir, siempre visible aunque salga el ratón */
	.ccw-add.is-loading,
	.ccw-add.is-done {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---- Flechas de navegación ---- */
.ccw-nav {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e5e5e5;
	border-radius: 50%;
	background: #ffffff;
	color: #111111;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	transition: background 0.2s ease, opacity 0.2s ease;
}
.ccw-nav:hover {
	background: #f5f5f5;
}
.ccw-nav[hidden] {
	display: none;
}
.ccw-nav--prev {
	left: -10px;
}
.ccw-nav--next {
	right: -10px;
}

/* =========================================================
   Carrusel de CATEGORÍAS (imágenes redondas)
   ========================================================= */

/* En este modo las tarjetas son más estrechas por defecto,
   así caben más círculos visibles a la vez. */
.ccw-carousel--categories {
	--ccw-cols: 6;
}

.ccw-cat-card {
	flex: 0 0 calc((100% - (var(--ccw-cols) - 1) * var(--ccw-gap)) / var(--ccw-cols));
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	text-decoration: none;
	color: var(--ccw-text);
	cursor: pointer;
}

.ccw-cat-card__img {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ccw-card-bg);
	isolation: isolate;
}

.ccw-cat-card__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.ccw-cat-card:hover .ccw-cat-card__img img,
.ccw-cat-card:focus-visible .ccw-cat-card__img img {
	transform: scale(1.06);
}

.ccw-cat-card:focus-visible .ccw-cat-card__img {
	outline: 2px solid #111111;
	outline-offset: 3px;
}

.ccw-cat-card__label {
	display: block;
	margin-top: 12px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: var(--ccw-text);
}

.ccw-cat-card:hover .ccw-cat-card__label {
	text-decoration: underline;
}

/* ---- Responsive / móvil (como la 2ª captura) ---- */
@media (max-width: 1024px) {
	.ccw-carousel { --ccw-cols: 3.5; }
}
@media (max-width: 781px) {
	.ccw-carousel {
		--ccw-cols: 2.5;   /* 2 tarjetas completas y media asomando */
		--ccw-gap: 14px;
		--ccw-side-gap: 16px; /* separación respecto al borde izquierdo de la pantalla (móvil) */
	}
	/* Pequeño respiro al final de la pista para que la última tarjeta
	   tampoco quede pegada al borde derecho de la pantalla. */
	.ccw-track::after {
		content: "";
		flex: 0 0 var(--ccw-side-gap);
	}
	/* El ancho de cada tarjeta ya no necesita descontar el borde izquierdo:
	   ahora ese hueco lo aporta el padding-left de .ccw-carousel (ver
	   arriba), no un padding dentro de la propia pista, así que se usa
	   la misma fórmula base de .ccw-card sin ajustes adicionales. */
	/* Refuerza el fundido del fondo blanco de las imágenes con el gris de la tarjeta */
	.ccw-card__media .ccw-card__img,
	.ccw-card__media img {
		mix-blend-mode: multiply;
	}
	.ccw-card__title { font-size: 17px; }
	.ccw-card__price { font-size: 20px; }
	.ccw-nav { display: none; } /* en móvil se navega deslizando */
}
@media (max-width: 480px) {
	.ccw-carousel { --ccw-cols: 2.5; }
	.ccw-heading { margin-bottom: 18px; }
}

/* ---- Categorías: overrides responsive (deben ir después de los generales
   para ganar con la misma especificidad) ---- */
@media (max-width: 1024px) {
	.ccw-carousel--categories { --ccw-cols: 4.5; }
}
@media (max-width: 781px) {
	.ccw-carousel--categories { --ccw-cols: 3.2; }
	.ccw-cat-card__label { font-size: 14px; margin-top: 10px; }
}
@media (max-width: 480px) {
	.ccw-carousel--categories { --ccw-cols: 2.6; }
}