/**
 * Koryfi Side Cart
 *
 * Todos los valores se leen de una variable CSS con su valor por defecto, de
 * modo que un tema puede retematizar el panel entero declarando las variables
 * (por ejemplo en :root) sin tocar este archivo.
 *
 * No se usa !important en ninguna regla.
 */

/* -------------------------------------------------------------------------
 * Reset acotado
 * ---------------------------------------------------------------------- */

.kcart,
.kcart *,
.kcart *::before,
.kcart *::after,
.kcart-toggle,
.kcart-toggle * {
	box-sizing: border-box;
}

.kcart__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kcart__icon {
	display: block;
	width: var(--kcart-icon-size, 1.25rem);
	height: var(--kcart-icon-size, 1.25rem);
	fill: none;
	stroke: currentColor;
	stroke-width: var(--kcart-icon-stroke, 1.6);
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Contenedor y capa
 * ---------------------------------------------------------------------- */

.kcart {
	position: fixed;
	inset: 0;
	z-index: var(--kcart-z, 99999);
	visibility: hidden;
	pointer-events: none;
	font-family: var(--kcart-font, inherit);
	font-size: var(--kcart-font-size, 0.9375rem);
	line-height: var(--kcart-line-height, 1.45);
	color: var(--kcart-ink, #1a1d23);
	transition: visibility 0s linear var(--kcart-duration, 240ms);
}

.kcart.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.kcart__overlay {
	position: absolute;
	inset: 0;
	background: var(--kcart-overlay, rgba(16, 20, 28, 0.44));
	opacity: 0;
	transition: opacity var(--kcart-duration, 240ms) var(--kcart-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

.kcart.is-open .kcart__overlay {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Panel
 * ---------------------------------------------------------------------- */

.kcart__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: var(--kcart-width, min(26rem, 94vw));
	max-width: 100%;
	background: var(--kcart-bg, #fff);
	color: var(--kcart-ink, #1a1d23);
	box-shadow: var(--kcart-shadow, 0 24px 64px -20px rgba(20, 28, 40, 0.26));
	border-start-start-radius: var(--kcart-radius, 0);
	border-end-start-radius: var(--kcart-radius, 0);
	transform: translateX(100%);
	transition: transform var(--kcart-duration, 240ms) var(--kcart-ease, cubic-bezier(0.32, 0.72, 0, 1));
	overscroll-behavior: contain;
}

.kcart--left .kcart__panel {
	inset-inline-end: auto;
	inset-inline-start: 0;
	transform: translateX(-100%);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: var(--kcart-radius, 0);
	border-end-end-radius: var(--kcart-radius, 0);
}

.kcart.is-open .kcart__panel {
	transform: translateX(0);
}

.kcart__panel:focus {
	outline: none;
}

.kcart :focus-visible {
	outline: var(--kcart-focus-width, 2px) solid var(--kcart-focus, currentColor);
	outline-offset: var(--kcart-focus-offset, 2px);
	border-radius: var(--kcart-focus-radius, 4px);
}

/* -------------------------------------------------------------------------
 * Cabecera
 * ---------------------------------------------------------------------- */

.kcart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kcart-gap, 0.875rem);
	padding: var(--kcart-space, 1.25rem);
	border-bottom: 1px solid var(--kcart-line, #ebedf1);
}

.kcart__title {
	margin: 0;
	font-size: var(--kcart-title-size, 1.0625rem);
	font-weight: var(--kcart-title-weight, 600);
	line-height: 1.25;
	letter-spacing: var(--kcart-title-tracking, -0.01em);
	color: var(--kcart-ink, #1a1d23);
}

.kcart__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--kcart-tap, 2.75rem);
	min-height: var(--kcart-tap, 2.75rem);
	margin-inline-end: calc(var(--kcart-tap, 2.75rem) / -4);
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--kcart-control-radius, 0.5rem);
	color: var(--kcart-ink-soft, #5b6270);
	cursor: pointer;
	transition: background-color var(--kcart-duration, 240ms) ease, color var(--kcart-duration, 240ms) ease;
}

.kcart__close:hover {
	background: var(--kcart-hover, #f3f4f7);
	color: var(--kcart-ink, #1a1d23);
}

/* -------------------------------------------------------------------------
 * Medidor de envío gratis
 * ---------------------------------------------------------------------- */

.kcart__meter {
	padding: var(--kcart-space, 1.25rem);
	padding-block-end: calc(var(--kcart-space, 1.25rem) * 0.8);
	border-bottom: 1px solid var(--kcart-line, #ebedf1);
}

.kcart__meter-text {
	margin: 0 0 0.5rem;
	font-size: var(--kcart-meter-font-size, 0.875rem);
	color: var(--kcart-ink-soft, #5b6270);
}

.kcart__meter.is-achieved .kcart__meter-text {
	color: var(--kcart-success, #17795a);
	font-weight: var(--kcart-meter-done-weight, 600);
}

.kcart__meter-track {
	height: var(--kcart-meter-height, 0.375rem);
	border-radius: var(--kcart-meter-radius, 999px);
	background: var(--kcart-meter-track, #eceef2);
	overflow: hidden;
}

.kcart__meter-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--kcart-meter-fill, #2f6fed);
	transition: width var(--kcart-duration, 240ms) var(--kcart-ease, cubic-bezier(0.32, 0.72, 0, 1)),
		background-color var(--kcart-duration, 240ms) ease;
}

.kcart__meter.is-achieved .kcart__meter-fill {
	background: var(--kcart-success, #17795a);
}

/* -------------------------------------------------------------------------
 * Cuerpo
 * ---------------------------------------------------------------------- */

.kcart__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.kcart__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	margin: 0;
	padding: calc(var(--kcart-space, 1.25rem) * 2) var(--kcart-space, 1.25rem);
	color: var(--kcart-ink-soft, #5b6270);
	font-size: 0.875rem;
}

.kcart__loading[hidden] {
	display: none;
}

.kcart__spinner {
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--kcart-line, #ebedf1);
	border-top-color: var(--kcart-ink-soft, #5b6270);
	border-radius: 50%;
	animation: kcart-spin var(--kcart-spin-duration, 800ms) linear infinite;
}

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

.kcart__lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kcart__empty {
	padding: calc(var(--kcart-space, 1.25rem) * 2) var(--kcart-space, 1.25rem);
	text-align: center;
}

.kcart__empty-text {
	margin: 0 0 var(--kcart-space, 1.25rem);
	color: var(--kcart-ink-soft, #5b6270);
}

.kcart__notices:empty {
	display: none;
}

.kcart__notice {
	margin: 0 var(--kcart-space, 1.25rem) var(--kcart-space, 1.25rem);
	padding: 0.75rem 0.875rem;
	border-radius: var(--kcart-control-radius, 0.5rem);
	background: var(--kcart-danger-bg, #fdf0ee);
	color: var(--kcart-danger, #a3352a);
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
 * Línea de producto
 * ---------------------------------------------------------------------- */

.kcart__line {
	display: grid;
	grid-template-columns: var(--kcart-thumb, 4.5rem) minmax(0, 1fr) auto;
	gap: var(--kcart-gap, 0.875rem);
	padding: var(--kcart-space, 1.25rem);
	border-bottom: 1px solid var(--kcart-line, #ebedf1);
	transition: opacity var(--kcart-duration, 240ms) ease;
}

.kcart__line.is-busy {
	opacity: var(--kcart-busy-opacity, 0.55);
}

.kcart__thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--kcart-thumb-radius, 0.5rem);
	background: var(--kcart-thumb-bg, #f5f6f8);
	aspect-ratio: 1 / 1;
}

.kcart__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

.kcart__details {
	min-width: 0;
}

.kcart__name {
	margin: 0 0 0.125rem;
	font-size: var(--kcart-name-size, 0.9375rem);
	font-weight: var(--kcart-name-weight, 500);
	overflow-wrap: anywhere;
}

.kcart__name a {
	color: var(--kcart-ink, #1a1d23);
	text-decoration: none;
}

.kcart__name a:hover {
	text-decoration: underline;
}

.kcart__variation,
.kcart__unit {
	margin: 0 0 0.125rem;
	font-size: var(--kcart-meta-size, 0.8125rem);
	color: var(--kcart-ink-soft, #5b6270);
	overflow-wrap: anywhere;
}

.kcart__qty {
	display: inline-flex;
	align-items: center;
	margin-top: 0.5rem;
	border: 1px solid var(--kcart-line, #ebedf1);
	border-radius: var(--kcart-control-radius, 0.5rem);
	background: var(--kcart-control-bg, transparent);
}

.kcart__qty[hidden] {
	display: none;
}

.kcart__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--kcart-tap, 2.75rem);
	min-height: var(--kcart-tap, 2.75rem);
	padding: 0;
	background: none;
	border: 0;
	border-radius: inherit;
	color: var(--kcart-ink, #1a1d23);
	cursor: pointer;
	transition: background-color var(--kcart-duration, 240ms) ease;
}

.kcart__qty-btn:hover:not(:disabled) {
	background: var(--kcart-hover, #f3f4f7);
}

.kcart__qty-btn:disabled {
	color: var(--kcart-muted, #9aa1ae);
	cursor: default;
}

.kcart__qty-input {
	/* 2.75rem = 44px: el campo también es un objetivo táctil. */
	width: var(--kcart-qty-width, 2.75rem);
	min-height: var(--kcart-tap, 2.75rem);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.kcart__qty-input::-webkit-outer-spin-button,
.kcart__qty-input::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

.kcart__line-end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem;
}

.kcart__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--kcart-tap, 2.75rem);
	min-height: var(--kcart-tap, 2.75rem);
	margin: -0.5rem -0.5rem 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--kcart-control-radius, 0.5rem);
	color: var(--kcart-muted, #9aa1ae);
	cursor: pointer;
	transition: color var(--kcart-duration, 240ms) ease, background-color var(--kcart-duration, 240ms) ease;
}

.kcart__remove:hover {
	background: var(--kcart-hover, #f3f4f7);
	color: var(--kcart-danger, #a3352a);
}

.kcart__line-total {
	margin: 0;
	font-size: var(--kcart-total-size, 0.9375rem);
	font-weight: var(--kcart-total-weight, 600);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Avisos con acción (deshacer)
 * ---------------------------------------------------------------------- */

.kcart__toasts {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0 var(--kcart-space, 1.25rem);
}

.kcart__toasts:empty {
	display: none;
}

.kcart__toast {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding: 0.625rem 0.75rem 0.625rem 0.875rem;
	border-radius: var(--kcart-control-radius, 0.5rem);
	background: var(--kcart-toast-bg, #1f242e);
	color: var(--kcart-toast-ink, #f6f7f9);
	font-size: 0.875rem;
	animation: kcart-toast-in var(--kcart-duration, 240ms) var(--kcart-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

.kcart__toast--error {
	background: var(--kcart-danger, #a3352a);
}

.kcart__toast-text {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.kcart__toast-action {
	flex: 0 0 auto;
	min-height: var(--kcart-tap, 2.75rem);
	padding: 0 0.75rem;
	background: none;
	border: 0;
	border-radius: var(--kcart-control-radius, 0.5rem);
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.kcart__toast-action[hidden] {
	display: none;
}

@keyframes kcart-toast-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

/* -------------------------------------------------------------------------
 * Pie
 * ---------------------------------------------------------------------- */

.kcart__footer {
	flex: 0 0 auto;
	padding: var(--kcart-space, 1.25rem);
	border-top: 1px solid var(--kcart-line, #ebedf1);
	background: var(--kcart-footer-bg, transparent);
}

.kcart__footer[hidden] {
	display: none;
}

.kcart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	font-size: var(--kcart-subtotal-size, 1rem);
	font-weight: 600;
}

.kcart__subtotal-value {
	font-variant-numeric: tabular-nums;
}

.kcart__note {
	margin: 0.25rem 0 0;
	font-size: var(--kcart-meta-size, 0.8125rem);
	color: var(--kcart-ink-soft, #5b6270);
	font-weight: 400;
}

.kcart__button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--kcart-cta-height, 3rem);
	margin-top: var(--kcart-space, 1.25rem);
	padding: 0.5rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--kcart-cta-radius, 0.5rem);
	background: var(--kcart-accent, #1a1d23);
	color: var(--kcart-accent-ink, #fff);
	font-size: var(--kcart-cta-size, 0.9375rem);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--kcart-duration, 240ms) ease, opacity var(--kcart-duration, 240ms) ease;
}

.kcart__button:hover {
	background: var(--kcart-accent-hover, #313640);
	color: var(--kcart-accent-ink, #fff);
}

.kcart__button--ghost {
	background: var(--kcart-ghost-bg, transparent);
	border-color: var(--kcart-line, #ebedf1);
	color: var(--kcart-ink, #1a1d23);
}

.kcart__button--ghost:hover {
	background: var(--kcart-hover, #f3f4f7);
	color: var(--kcart-ink, #1a1d23);
}

.kcart__link {
	display: block;
	min-height: var(--kcart-tap, 2.75rem);
	margin-top: 0.25rem;
	padding: 0.75rem;
	color: var(--kcart-ink-soft, #5b6270);
	font-size: var(--kcart-meta-size, 0.8125rem);
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kcart__link:hover {
	color: var(--kcart-ink, #1a1d23);
}

/* -------------------------------------------------------------------------
 * Botón que abre el carrito
 * ---------------------------------------------------------------------- */

.kcart-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: var(--kcart-tap, 2.75rem);
	min-height: var(--kcart-tap, 2.75rem);
	padding: 0 0.5rem;
	background: var(--kcart-toggle-bg, transparent);
	border: 0;
	border-radius: var(--kcart-control-radius, 0.5rem);
	color: var(--kcart-toggle-ink, inherit);
	font: inherit;
	cursor: pointer;
}

.kcart-toggle__icon {
	width: var(--kcart-toggle-icon, 1.375rem);
	height: var(--kcart-toggle-icon, 1.375rem);
	fill: none;
	stroke: currentColor;
	stroke-width: var(--kcart-icon-stroke, 1.6);
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.kcart-toggle__count {
	position: absolute;
	top: var(--kcart-badge-top, 0.25rem);
	inset-inline-end: var(--kcart-badge-end, 0.125rem);
	min-width: 1.125rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--kcart-badge-bg, #2f6fed);
	color: var(--kcart-badge-ink, #fff);
	font-size: var(--kcart-badge-size, 0.6875rem);
	font-weight: 700;
	line-height: 1.125rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.kcart-toggle__count[hidden] {
	display: none;
}

.kcart-toggle--floating {
	position: fixed;
	inset-block-end: var(--kcart-floating-offset, 1.25rem);
	inset-inline-end: var(--kcart-floating-offset, 1.25rem);
	z-index: calc(var(--kcart-z, 99999) - 1);
	width: var(--kcart-floating-size, 3.25rem);
	height: var(--kcart-floating-size, 3.25rem);
	border-radius: 999px;
	background: var(--kcart-accent, #1a1d23);
	color: var(--kcart-accent-ink, #fff);
	box-shadow: var(--kcart-floating-shadow, 0 12px 28px -10px rgba(20, 28, 40, 0.5));
}

.kcart--left ~ .kcart-toggle--floating,
.kcart-toggle--floating.kcart-toggle--left {
	inset-inline-end: auto;
	inset-inline-start: var(--kcart-floating-offset, 1.25rem);
}

/* -------------------------------------------------------------------------
 * Bloqueo del scroll de fondo
 * ---------------------------------------------------------------------- */

.kcart-locked {
	overflow: hidden;
	padding-inline-end: var(--kcart-scrollbar, 0px);
}

/* -------------------------------------------------------------------------
 * Movimiento reducido
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kcart {
		--kcart-duration: 0.01ms;
	}

	.kcart__toast {
		animation: none;
	}

	.kcart__spinner {
		animation: none;
		border-top-color: var(--kcart-line, #ebedf1);
	}
}

/* -------------------------------------------------------------------------
 * Pantallas muy estrechas
 * ---------------------------------------------------------------------- */

@media (max-width: 22.5em) {
	.kcart {
		--kcart-space: 0.875rem;
		--kcart-gap: 0.625rem;
		--kcart-thumb: 3.5rem;
		--kcart-font-size: 0.875rem;
	}
}