/* =========================================================
   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;

	position: relative;
	width: 100%;
	margin: 0 0 40px;
	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;
}

/* 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;
	z-index: 1;
}

.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, por lo que
	   el blanco desaparece y se ve el fondo de la tarjeta. */
	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;
}

/* ---- 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-edge: 16px;  /* separación del borde izquierdo de la pantalla */
	}
	/* Separación por la izquierda + espacio final para que la última tarjeta respire */
	.ccw-track {
		padding-left: var(--ccw-edge);
		margin-left: calc(-1 * var(--ccw-edge));
		scroll-padding-left: var(--ccw-edge);
	}
	.ccw-track::after {
		content: "";
		flex: 0 0 var(--ccw-edge);
	}
	/* Recalcula el ancho de cada tarjeta descontando la separación izquierda,
	   así se ven realmente 2,5 tarjetas y no 1,5 */
	.ccw-card {
		flex: 0 0 calc((100% - var(--ccw-edge) - (var(--ccw-cols) - 1) * var(--ccw-gap)) / var(--ccw-cols));
	}
	/* 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; }
}