/* Capripio's Youngla Product Card — frontend styles.
 *
 * Specificity strategy:
 * - Every rule is scoped under the widget root `.cyla-carousel` so it beats
 *   theme element / single-class selectors, while staying BELOW Elementor's
 *   control CSS (scoped under `.elementor-element-{id}`, ~3 classes) so all
 *   the widget's style controls still override these defaults.
 * - `!important` is used ONLY on structural resets that have no matching
 *   control (link/button/list resets, box-sizing) so a theme's global resets
 *   can never break the layout. Colours, borders, radius, padding, typography,
 *   sizes, etc. are left free so the Elementor controls win.
 */

/* Root -------------------------------------------------------------------- */
.cyla-carousel {
	--cyla-per-view: 4;
	--cyla-gap: 16px;
	--cyla-speed: 620ms;
	--cyla-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--cyla-stagger: 55ms;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.cyla-carousel *,
.cyla-carousel *::before,
.cyla-carousel *::after {
	box-sizing: border-box;
}

.cyla-carousel .cyla-viewport {
	overflow: hidden;
	width: 100%;
}

.cyla-carousel .cyla-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: var(--cyla-gap);
	will-change: transform;
	transition: transform var(--cyla-speed) var(--cyla-ease);
	touch-action: pan-y;
}
.cyla-carousel .cyla-track.is-dragging {
	transition: none;
	cursor: grabbing;
}

/* Card sizing driven by "cards visible" variable (fractional = peek). */
.cyla-carousel .cyla-card {
	position: relative;
	flex: 0 0 calc((100% - (var(--cyla-gap) * (var(--cyla-per-view) - 1))) / var(--cyla-per-view));
	max-width: calc((100% - (var(--cyla-gap) * (var(--cyla-per-view) - 1))) / var(--cyla-per-view));
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
	transition: transform var(--cyla-speed) var(--cyla-ease),
		opacity var(--cyla-speed) var(--cyla-ease),
		filter var(--cyla-speed) var(--cyla-ease),
		box-shadow 0.25s ease;
	background-clip: padding-box;
}

/* Stretched link covers the whole card except swatches. */
.cyla-carousel .cyla-card__link {
	position: absolute !important;
	inset: 0;
	z-index: 1;
	display: block !important;
	text-indent: -9999px;
	overflow: hidden;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
	background: none !important;
}
.cyla-carousel .cyla-card__link:hover,
.cyla-carousel .cyla-card__link:focus {
	text-decoration: none !important;
}

/* Media ------------------------------------------------------------------ */
.cyla-carousel .cyla-media {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
	background: #f2f2f2;
}

.cyla-carousel.cyla-ratio-1-1 .cyla-media { aspect-ratio: 1 / 1; }
.cyla-carousel.cyla-ratio-4-5 .cyla-media { aspect-ratio: 4 / 5; }
.cyla-carousel.cyla-ratio-3-4 .cyla-media { aspect-ratio: 3 / 4; }
.cyla-carousel.cyla-ratio-2-3 .cyla-media { aspect-ratio: 2 / 3; }
.cyla-carousel.cyla-ratio-9-16 .cyla-media { aspect-ratio: 9 / 16; }
.cyla-carousel.cyla-ratio-auto .cyla-media { aspect-ratio: auto; }

.cyla-carousel .cyla-img {
	display: block !important;
	width: 100%;
	height: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	object-fit: cover;
	vertical-align: top;
	transition: transform 0.5s ease, opacity 0.35s ease;
}
.cyla-carousel.cyla-ratio-auto .cyla-img { height: auto; }

/* Hover: zoom */
.cyla-carousel.cyla-imghover-zoom .cyla-card:hover .cyla-img {
	transform: scale(1.05);
}

.cyla-carousel .cyla-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	margin: 0;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	color: #fff;
	background: #c0392b;
	border-radius: 3px;
}

/* Meta ------------------------------------------------------------------- */
.cyla-carousel .cyla-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding-top: 12px;
}

.cyla-carousel .cyla-title {
	position: relative;
	z-index: 0;
	margin: 0;
	padding: 0;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.cyla-carousel .cyla-price {
	margin: 0;
	padding: 0;
	color: #888;
	font-size: 0.95em;
	line-height: 1.3;
}
.cyla-carousel .cyla-price del { opacity: 0.7; margin-right: 6px; }
.cyla-carousel .cyla-price ins { text-decoration: none; color: #c0392b; }

/* Swatches --------------------------------------------------------------- */
.cyla-carousel .cyla-colors {
	position: relative;
	z-index: 2; /* sit above the stretched link so hover works */
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none !important;
	align-items: center;
}

.cyla-carousel .cyla-swatch {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	box-sizing: border-box;
	cursor: pointer;
	background-clip: padding-box;
	flex: 0 0 auto;
}

.cyla-carousel .cyla-swatch.is-soldout {
	position: relative;
	opacity: 0.85;
}
.cyla-carousel .cyla-swatch.is-soldout::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 0.8px),
		rgba(120, 120, 120, 0.9) calc(50% - 0.8px),
		rgba(120, 120, 120, 0.9) calc(50% + 0.8px),
		transparent calc(50% + 0.8px)
	);
}

.cyla-carousel .cyla-swatch-more {
	font-size: 11px;
	line-height: 1;
	color: #999;
	align-self: center;
}

/* Navigation arrows ------------------------------------------------------ */
.cyla-carousel .cyla-nav {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.cyla-carousel .cyla-arrow {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0 !important;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #111;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease,
		box-shadow 0.25s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	transform: translateZ(0);
}
.cyla-carousel .cyla-arrow svg {
	width: 18px;
	height: 18px;
	display: block;
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cyla-carousel .cyla-arrow:hover {
	background: #111;
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.cyla-carousel .cyla-prev:hover svg { transform: translateX(-2px); }
.cyla-carousel .cyla-next:hover svg { transform: translateX(2px); }
.cyla-carousel .cyla-arrow:active { transform: scale(0.92); }
.cyla-carousel .cyla-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.cyla-carousel .cyla-arrow[disabled] {
	cursor: default;
	opacity: 0.4;
	transform: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.cyla-carousel .cyla-arrow[disabled]:hover { background: #fff; color: #111; }

/* Arrow positions */
.cyla-carousel.cyla-arrows-bottom-right .cyla-nav { justify-content: flex-end; }
.cyla-carousel.cyla-arrows-bottom-center .cyla-nav { justify-content: center; }
.cyla-carousel.cyla-arrows-bottom-left .cyla-nav { justify-content: flex-start; }

.cyla-carousel.cyla-arrows-top-right { padding-top: 60px; }
.cyla-carousel.cyla-arrows-top-right .cyla-nav {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 0;
	justify-content: flex-end;
}

.cyla-carousel.cyla-arrows-sides .cyla-nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin-top: 0;
	transform: translateY(-50%);
	justify-content: space-between;
	pointer-events: none;
	z-index: 5;
}
.cyla-carousel.cyla-arrows-sides .cyla-arrow { pointer-events: auto; }
.cyla-carousel.cyla-arrows-sides .cyla-prev { margin-left: -8px; }
.cyla-carousel.cyla-arrows-sides .cyla-next { margin-right: -8px; }

/* Dots ------------------------------------------------------------------- */
.cyla-carousel .cyla-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none !important;
}
.cyla-carousel .cyla-dot {
	width: 8px;
	height: 8px;
	margin: 0;
	border-radius: 50%;
	border: 0;
	padding: 0 !important;
	background: #c9c9c9;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.cyla-carousel .cyla-dot.is-active { background: #111; transform: scale(1.15); }

/* Motion styles ---------------------------------------------------------- */
/* Secondary per-card animation that plays while the track is sliding.
 * `.is-moving` is toggled by JS at the start of every move and removed when
 * the track's transform transition ends. `--cyla-i` is the card's offset from
 * the first visible card, giving a left-to-right cascade. */

@keyframes cyla-stagger-in {
	0%   { opacity: 0.45; transform: translateY(9px) scale(0.985); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cyla-zoom-in {
	0%   { opacity: 0.25; transform: scale(0.9); }
	100% { opacity: 1; transform: scale(1); }
}

.cyla-carousel.cyla-motion-stagger.is-moving .cyla-card {
	animation: cyla-stagger-in var(--cyla-speed) var(--cyla-ease) both;
	animation-delay: calc(var(--cyla-i, 0) * var(--cyla-stagger));
}

.cyla-carousel.cyla-motion-zoomin.is-moving .cyla-card {
	animation: cyla-zoom-in var(--cyla-speed) var(--cyla-ease) both;
	animation-delay: calc(var(--cyla-i, 0) * var(--cyla-stagger));
}

/* Center focus: cards grow/brighten as they approach the viewport centre.
 * `--cyla-focus` (0..1) is set per card by JS on every move and during drag. */
.cyla-carousel.cyla-motion-focus .cyla-card {
	transform: scale(calc(0.86 + (0.14 * var(--cyla-focus, 1))));
	opacity: calc(0.5 + (0.5 * var(--cyla-focus, 1)));
}
.cyla-carousel.cyla-motion-focus .cyla-track {
	padding-block: 6px;
}

/* Editor empty state ----------------------------------------------------- */
.cyla-carousel .cyla-empty,
.cyla-empty {
	padding: 24px;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	color: #64748b;
	text-align: center;
	font-size: 14px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cyla-carousel .cyla-track,
	.cyla-carousel .cyla-img,
	.cyla-carousel .cyla-card,
	.cyla-carousel .cyla-arrow { transition: none !important; }
	.cyla-carousel.cyla-motion-stagger.is-moving .cyla-card,
	.cyla-carousel.cyla-motion-zoomin.is-moving .cyla-card { animation: none !important; }
	.cyla-carousel.cyla-motion-focus .cyla-card { transform: none !important; opacity: 1 !important; }
}