/**
 * Kreovix Checkout Upsells — Frontend
 * Minimal, spacious, token-driven. Dark mode via CSS variables.
 */

.kreovix-cu {
	--kcu-ease: cubic-bezier(0.22, 1, 0.36, 1);
	font-family: var(--kcu-font, inherit);
	color: var(--kcu-text, #111);
	background: var(--kcu-bg, transparent);
	margin: 1.75rem 0;
	padding: 0;
}

.kreovix-cu__header {
	margin-bottom: 1.25rem;
}

.kreovix-cu__title {
	margin: 0;
	padding: 0;
	font-size: var(--kcu-heading-size, 22px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--kcu-title, var(--kcu-text));
}

.kreovix-cu__subtitle {
	margin: 0.35rem 0 0;
	color: var(--kcu-muted, #6b7280);
	font-size: 0.95rem;
	line-height: 1.45;
}

.kreovix-cu__description {
	margin: 0.5rem 0 0;
	color: var(--kcu-muted, #6b7280);
	font-size: 0.9rem;
	line-height: 1.5;
}

.kreovix-cu__description p {
	margin: 0;
}

.kreovix-cu__viewport {
	position: relative;
}

.kreovix-cu__track {
	display: grid;
	grid-template-columns: repeat(var(--kcu-cols-mobile, 1), minmax(0, 1fr));
	gap: var(--kcu-gap, 16px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kreovix-cu__slide {
	min-width: 0;
}

/* Animations */
.kreovix-cu--anim-fade .kreovix-cu__slide {
	animation: kcu-fade 0.5s var(--kcu-ease) both;
	animation-delay: calc(var(--kcu-i, 0) * 60ms);
}

.kreovix-cu--anim-slide .kreovix-cu__slide {
	animation: kcu-slide 0.55s var(--kcu-ease) both;
	animation-delay: calc(var(--kcu-i, 0) * 60ms);
}

.kreovix-cu--anim-scale .kreovix-cu__slide {
	animation: kcu-scale 0.5s var(--kcu-ease) both;
	animation-delay: calc(var(--kcu-i, 0) * 60ms);
}

@keyframes kcu-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes kcu-slide {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes kcu-scale {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.kreovix-cu--anim-fade .kreovix-cu__slide,
	.kreovix-cu--anim-slide .kreovix-cu__slide,
	.kreovix-cu--anim-scale .kreovix-cu__slide {
		animation: none;
	}
}

/* Card */
.kreovix-cu-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: var(--kcu-card-min-height, 0);
	background: var(--kcu-card-bg, #fff);
	border: 1px solid var(--kcu-card-border, #e5e7eb);
	border-radius: var(--kcu-card-radius, 12px);
	box-shadow: var(--kcu-card-shadow, none);
	padding: var(--kcu-card-padding, 16px);
	overflow: hidden;
	transition: transform 0.25s var(--kcu-ease), box-shadow 0.25s var(--kcu-ease), border-color 0.25s var(--kcu-ease);
}

.kreovix-cu-card:hover,
.kreovix-cu-card:focus-within {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--kcu-card-border, #e5e7eb) 60%, var(--kcu-primary, #111));
}

.kreovix-cu-card__media {
	position: relative;
	margin: calc(var(--kcu-card-padding, 16px) * -1);
	margin-bottom: 0.85rem;
	overflow: hidden;
	border-radius: var(--kcu-card-radius, 12px) var(--kcu-card-radius, 12px) 0 0;
	aspect-ratio: var(--kcu-image-ratio, 1/1);
	background: color-mix(in srgb, var(--kcu-card-border, #e5e7eb) 35%, transparent);
}

.kreovix-cu-card__media-frame {
	display: block;
	height: 100%;
	pointer-events: none;
}

.kreovix-cu-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.35s var(--kcu-ease), transform 0.45s var(--kcu-ease);
}

.kreovix-cu-card__image--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.kreovix-cu-card--has-hover:hover .kreovix-cu-card__image:not(.kreovix-cu-card__image--hover),
.kreovix-cu-card--has-hover:focus-within .kreovix-cu-card__image:not(.kreovix-cu-card__image--hover) {
	opacity: 0;
}

.kreovix-cu-card--has-hover:hover .kreovix-cu-card__image--hover,
.kreovix-cu-card--has-hover:focus-within .kreovix-cu-card__image--hover {
	opacity: 1;
	transform: scale(1.03);
}

.kreovix-cu-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 2;
}

.kreovix-cu-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.5rem;
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.2;
}

.kreovix-cu-badge--sale {
	background: var(--kcu-badge-sale-bg, #b91c1c);
	color: var(--kcu-badge-sale-text, #fff);
}

.kreovix-cu-badge--new {
	background: var(--kcu-badge-new-bg, #111);
	color: var(--kcu-badge-new-text, #fff);
}

.kreovix-cu-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.45rem;
	min-width: 0;
}

.kreovix-cu-card__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--kcu-title, var(--kcu-text));
}

.kreovix-cu-card__sku,
.kreovix-cu-card__excerpt,
.kreovix-cu-card__stock {
	margin: 0;
	color: var(--kcu-muted, #6b7280);
	font-size: 0.8rem;
	line-height: 1.4;
}

.kreovix-cu-card__price {
	color: var(--kcu-price, var(--kcu-text));
	font-weight: 600;
	font-size: 0.95rem;
}

.kreovix-cu-card__price.is-on-sale del {
	color: var(--kcu-muted);
	font-weight: 400;
	margin-right: 0.35rem;
}

.kreovix-cu-card__price.is-on-sale ins {
	color: var(--kcu-sale, #b91c1c);
	text-decoration: none;
}

.kreovix-cu-card__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.65rem;
}

.kreovix-cu-card__notice {
	margin: 0.5rem 0 0;
	padding: 0.45rem 0.6rem;
	border-radius: 8px;
	font-size: 0.78rem;
	line-height: 1.35;
}

.kreovix-cu-card__notice[data-type="error"] {
	background: #fef2f2;
	color: #991b1b;
}

.kreovix-cu-card__notice[data-type="success"] {
	background: #f0fdf4;
	color: #166534;
}

.kreovix-cu-card__notice[hidden] {
	display: none;
}

.kreovix-cu-card__qty input {
	width: 3.25rem;
	height: 2.35rem;
	border: 1px solid var(--kcu-card-border, #e5e7eb);
	border-radius: 8px;
	text-align: center;
	background: transparent;
	color: inherit;
}

.kreovix-cu-add {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.35rem;
	padding: 0 1rem;
	border: 0;
	border-radius: 8px;
	background: var(--kcu-btn-bg, #111);
	color: var(--kcu-btn-text, #fff);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: background 0.2s var(--kcu-ease), transform 0.2s var(--kcu-ease), opacity 0.2s var(--kcu-ease);
	flex: 1;
}

.kreovix-cu-add:hover,
.kreovix-cu-add:focus-visible {
	background: var(--kcu-btn-hover, #333);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

a.kreovix-cu-add--link {
	text-decoration: none;
	box-sizing: border-box;
	text-align: center;
}

/* WooCommerce / themes inject <a class="added_to_cart wc-forward"> — never show it in upsells. */
.kreovix-cu a.added_to_cart,
.kreovix-cu a.wc-forward,
.kreovix-cu-card a.added_to_cart,
.kreovix-cu-card a.wc-forward,
.kreovix-cu-card__actions a.added_to_cart,
.kreovix-cu-card__actions .added_to_cart.wc-forward {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
	position: absolute !important;
	clip: rect(0, 0, 0, 0) !important;
}

.kreovix-cu-add:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcu-btn-bg, #111) 30%, transparent);
}

.kreovix-cu-add:disabled,
.kreovix-cu-add.is-locked,
.kreovix-cu-add[data-locked='1'] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.kreovix-cu-add.is-loading,
.kreovix-cu-add.is-success {
	pointer-events: none;
}

.kreovix-cu-add__loader,
.kreovix-cu-add__success {
	display: none;
	width: 1rem;
	height: 1rem;
}

.kreovix-cu-add.is-loading .kreovix-cu-add__label,
.kreovix-cu-add.is-success .kreovix-cu-add__label {
	opacity: 0.85;
}

.kreovix-cu-add.is-loading .kreovix-cu-add__loader {
	display: inline-block;
	border: 2px solid color-mix(in srgb, var(--kcu-btn-text, #fff) 35%, transparent);
	border-top-color: var(--kcu-btn-text, #fff);
	border-radius: 50%;
	animation: kcu-spin 0.7s linear infinite;
}

.kreovix-cu-add.is-success .kreovix-cu-add__success {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@keyframes kcu-spin {
	to { transform: rotate(360deg); }
}

/* Slider / carousel */
.kreovix-cu--slider .kreovix-cu__track,
.kreovix-cu--carousel .kreovix-cu__track {
	display: flex;
	gap: var(--kcu-gap, 16px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
}

.kreovix-cu--slider .kreovix-cu__track::-webkit-scrollbar,
.kreovix-cu--carousel .kreovix-cu__track::-webkit-scrollbar {
	display: none;
}

.kreovix-cu--slider .kreovix-cu__slide,
.kreovix-cu--carousel .kreovix-cu__slide {
	flex: 0 0 calc((100% - (var(--kcu-gap, 16px) * (var(--kcu-cols-mobile, 1) - 1))) / var(--kcu-cols-mobile, 1));
	scroll-snap-align: start;
}

.kreovix-cu__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--kcu-card-border, #e5e7eb);
	border-radius: 999px;
	background: var(--kcu-card-bg, #fff);
	color: var(--kcu-text, #111);
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transition: background 0.2s var(--kcu-ease), opacity 0.2s var(--kcu-ease);
}

.kreovix-cu__nav:hover,
.kreovix-cu__nav:focus-visible {
	background: var(--kcu-primary, #111);
	color: #fff;
	outline: 2px solid var(--kcu-primary, #111);
	outline-offset: 2px;
}

.kreovix-cu__nav--prev { left: -0.35rem; }
.kreovix-cu__nav--next { right: -0.35rem; }

.kreovix-cu__nav[disabled] {
	opacity: 0.35;
	pointer-events: none;
}

.kreovix-cu__dots {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 0.9rem;
}

.kreovix-cu__dot {
	width: 0.45rem;
	height: 0.45rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--kcu-muted, #6b7280) 45%, transparent);
	cursor: pointer;
	transition: width 0.2s var(--kcu-ease), background 0.2s var(--kcu-ease);
}

.kreovix-cu__dot:focus-visible {
	outline: 2px solid var(--kcu-primary, #111);
	outline-offset: 3px;
}

.kreovix-cu__dot.is-active {
	width: 1.1rem;
	background: var(--kcu-primary, #111);
}

.kreovix-cu:focus-visible {
	outline: 2px solid var(--kcu-primary, #111);
	outline-offset: 4px;
}

/* Visually hidden helper (themes without WooCommerce screen-reader-text) */
.kreovix-cu .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Responsive columns */
@media (min-width: 600px) {
	.kreovix-cu--grid .kreovix-cu__track {
		grid-template-columns: repeat(var(--kcu-cols-tablet, 2), minmax(0, 1fr));
	}

	.kreovix-cu--slider .kreovix-cu__slide,
	.kreovix-cu--carousel .kreovix-cu__slide {
		flex-basis: calc((100% - (var(--kcu-gap, 16px) * (var(--kcu-cols-tablet, 2) - 1))) / var(--kcu-cols-tablet, 2));
	}
}

@media (min-width: 1024px) {
	.kreovix-cu--grid .kreovix-cu__track {
		grid-template-columns: repeat(var(--kcu-cols-desktop, 4), minmax(0, 1fr));
	}

	.kreovix-cu--slider .kreovix-cu__slide,
	.kreovix-cu--carousel .kreovix-cu__slide {
		flex-basis: calc((100% - (var(--kcu-gap, 16px) * (var(--kcu-cols-desktop, 4) - 1))) / var(--kcu-cols-desktop, 4));
	}
}

/* Checkout order review density */
.woocommerce-checkout .kreovix-cu {
	clear: both;
}