/* Sitto - Comparison Product. Defaults only: the widget's style controls override every value. */
.sitto-cmp {
	--cmp-per: 3;
	--cmp-gap: 20px;
	--cmp-peek: 0px;
	--cmp-pad-x: 28px;
	--cmp-speed: 300ms;
	--cmp-lift: -6px;
	--cmp-float: -8px;
	--cmp-ink: #181d27;
	--cmp-text: #414651;
	--cmp-muted: #717680;
	--cmp-line: #e9eaeb;
	--cmp-soft: #F5F6F8;
	--cmp-accent: #FFC20F;
	--cmp-accent-soft: #FFF4D4;
	position: relative;
	width: 100%;
	font-family: Inter, sans-serif;
}

/* ------------------------------------------------------------------ Track */
.sitto-cmp__viewport { position: relative; }

.sitto-cmp__track {
	--peek: 0px;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(6, auto);
	grid-auto-columns: calc((100% - (var(--cmp-per) - 1) * var(--cmp-gap) - var(--peek)) / var(--cmp-per));
	column-gap: var(--cmp-gap);
	justify-content: center;
	justify-content: safe center;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* room for the hover lift and shadow inside the scroll box */
	padding: 14px 2px 34px;
	margin: -14px -2px -34px;
	outline: none;
}
.sitto-cmp__track::-webkit-scrollbar { display: none; }
.sitto-cmp__track:focus-visible { box-shadow: inset 0 0 0 2px var(--cmp-accent); border-radius: 12px; }
.sitto-cmp.has-overflow .sitto-cmp__track { --peek: var(--cmp-peek); justify-content: start; cursor: grab; }
.sitto-cmp.is-dragging .sitto-cmp__track { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.sitto-cmp.is-dragging .sitto-cmp__card { pointer-events: none; }

/* ------------------------------------------------------------------- Card */
.sitto-cmp__card {
	grid-row: span 6;
	display: grid;
	grid-template-rows: subgrid;
	row-gap: 0;
	min-width: 0;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--cmp-line);
	border-radius: 20px;
	overflow: hidden;
	transition: transform var(--cmp-speed) cubic-bezier(.2, .7, .2, 1), box-shadow var(--cmp-speed) ease,
		border-color var(--cmp-speed) ease, background-color var(--cmp-speed) ease;
}
.sitto-cmp__card:hover,
.sitto-cmp__card:focus-within {
	transform: translateY(var(--cmp-lift));
	border-color: #FFC20F;
	box-shadow: 0 22px 44px -22px rgba(24, 29, 39, .28);
}
.sitto-cmp__card.is-featured {
	border-color: var(--cmp-accent);
	box-shadow: 0 0 0 1px var(--cmp-accent);
}
.sitto-cmp__card.is-featured:hover,
.sitto-cmp__card.is-featured:focus-within {
	box-shadow: 0 0 0 1px var(--cmp-accent), 0 22px 44px -22px rgba(24, 29, 39, .28);
}

/* ------------------------------------------------------------------ Media */
.sitto-cmp__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 230px;
	padding: 24px;
	background: var(--cmp-soft);
	isolation: isolate;
}
/* soft floor shadow under the device: shrinks while the device floats up */
.sitto-cmp__media::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 18px;
	width: 46%;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(24, 29, 39, .18), rgba(24, 29, 39, 0));
	transform: translateX(-50%);
	transition: transform var(--cmp-speed) ease, opacity var(--cmp-speed) ease;
	z-index: -1;
}
.sitto-cmp__img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 180px;
	height: auto;
	object-fit: contain;
	transition: transform calc(var(--cmp-speed) * 1.4) cubic-bezier(.2, .7, .2, 1);
}
.sitto-cmp__card:hover .sitto-cmp__img,
.sitto-cmp__card:focus-within .sitto-cmp__img { transform: translateY(var(--cmp-float)) scale(1.03); }
.sitto-cmp__card:hover .sitto-cmp__media::after,
.sitto-cmp__card:focus-within .sitto-cmp__media::after { transform: translateX(-50%) scale(.82); opacity: .7; }

.sitto-cmp__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--cmp-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.01em;
}

/* --------------------------------------------------------- Title / desc */
.sitto-cmp__head { padding: 24px var(--cmp-pad-x) 18px; }
.sitto-cmp .sitto-cmp__title {
	margin: 0 0 6px;
	color: var(--cmp-ink);
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.02em;
	text-transform: none;
}
.sitto-cmp .sitto-cmp__desc {
	margin: 0;
	color: var(--cmp-text);
	font-size: 14px;
	line-height: 1.55;
}

/* ----------------------------------------------------------------- Prices */
.sitto-cmp__prices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	align-items: start;
	gap: 12px 20px;
	margin: 0 var(--cmp-pad-x);
	padding: 16px 0;
	border-top: 1px solid var(--cmp-line);
	border-bottom: 1px solid var(--cmp-line);
}
.sitto-cmp__price { display: flex; flex-direction: column; gap: 4px; }
.sitto-cmp__price-label {
	color: var(--cmp-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.sitto-cmp__price-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 5px; }
.sitto-cmp__price-amount {
	color: var(--cmp-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
}
.sitto-cmp__price + .sitto-cmp__price .sitto-cmp__price-amount { font-size: 16px; font-weight: 600; }
.sitto-cmp__price-note { color: var(--cmp-muted); font-size: 12px; line-height: 1.3; }

/* ------------------------------------------------------------------ Specs */
.sitto-cmp__specs { padding: 18px var(--cmp-pad-x) 6px; }
.sitto-cmp .sitto-cmp__label {
	margin: 0 0 10px;
	color: #535862;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.sitto-cmp__spec-list,
.sitto-cmp__box-list { list-style: none; margin: 0; padding: 0; }
.sitto-cmp__spec-list { display: grid; gap: 2px; }
.sitto-cmp__spec {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 -8px;
	padding: 5px 8px;
	border-radius: 8px;
	color: var(--cmp-text);
	font-size: 14px;
	line-height: 1.45;
	transition: background-color 200ms ease;
}
.sitto-cmp__spec strong { color: var(--cmp-ink); font-weight: 600; }
.sitto-cmp__spec.is-row-hover { background-color: var(--cmp-accent-soft); }
.sitto-cmp__check {
	flex: 0 0 18px;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--cmp-accent);
	color: var(--cmp-ink);
}
.sitto-cmp__check svg { width: 11px; height: 11px; }

/* --------------------------------------------------------------- In the box */
.sitto-cmp__box { padding: 14px var(--cmp-pad-x) 0; }
.sitto-cmp__box-inner { padding: 16px 18px; border-radius: 14px; background: var(--cmp-soft); }
.sitto-cmp__box-list { display: grid; gap: 8px; }
.sitto-cmp__box-item {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--cmp-text);
	font-size: 13.5px;
	line-height: 1.4;
}
.sitto-cmp__box-item svg { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 2px; color: #181D27; }

/* ---------------------------------------------------------------- Buttons */
.sitto-cmp__actions {
	display: grid;
	align-content: end;
	gap: 10px;
	padding: 24px var(--cmp-pad-x) var(--cmp-pad-x);
}
.sitto-cmp .sitto-cmp__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 20px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--cmp-speed) ease, color var(--cmp-speed) ease, border-color var(--cmp-speed) ease,
		transform 150ms ease;
}
.sitto-cmp .sitto-cmp__btn svg { flex: 0 0 14px; width: 14px; height: 14px; transition: transform var(--cmp-speed) cubic-bezier(.2, .7, .2, 1); }
.sitto-cmp .sitto-cmp__btn:hover svg,
.sitto-cmp .sitto-cmp__btn:focus-visible svg { transform: translateX(4px); }
.sitto-cmp .sitto-cmp__btn:active { transform: scale(.98); }
.sitto-cmp .sitto-cmp__btn:focus-visible { outline: 2px solid var(--cmp-ink); outline-offset: 2px; }

.sitto-cmp .sitto-cmp__btn--primary { background-color: var(--cmp-accent); color: var(--cmp-ink); }
.sitto-cmp .sitto-cmp__btn--primary:hover { background-color: #E6AC00; color: var(--cmp-ink); }
/* light sweep across the primary button on hover */
.sitto-cmp .sitto-cmp__btn--primary::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 50%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
	transform: skewX(-18deg);
	pointer-events: none;
}
.sitto-cmp .sitto-cmp__btn--primary:hover::before { animation: sittoCmpShine 700ms ease; }

.sitto-cmp .sitto-cmp__btn--secondary { background-color: transparent; border-color: var(--cmp-ink); color: var(--cmp-ink); }
.sitto-cmp .sitto-cmp__btn--secondary:hover { background-color: var(--cmp-ink); color: #fff; }

/* ------------------------------------------------------------- Navigation */
.sitto-cmp__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.sitto-cmp__nav[hidden] { display: none !important; }
.sitto-cmp .sitto-cmp__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--cmp-line);
	border-radius: 50%;
	background: #fff;
	color: var(--cmp-ink);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease, transform 150ms ease;
}
.sitto-cmp .sitto-cmp__arrow svg { width: 18px; height: 18px; }
.sitto-cmp .sitto-cmp__arrow:not(:disabled):hover { background: var(--cmp-ink); border-color: var(--cmp-ink); color: #fff; }
.sitto-cmp .sitto-cmp__arrow:not(:disabled):active { transform: scale(.94); }
.sitto-cmp .sitto-cmp__arrow:disabled { opacity: .35; cursor: default; }
.sitto-cmp .sitto-cmp__arrow:focus-visible { outline: 2px solid var(--cmp-accent); outline-offset: 2px; }

.sitto-cmp__dots { display: flex; align-items: center; gap: 8px; }
.sitto-cmp .sitto-cmp__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: #d5d7da;
	cursor: pointer;
	transition: width 300ms cubic-bezier(.2, .7, .2, 1), background-color 200ms ease;
}
.sitto-cmp .sitto-cmp__dot.is-active { width: 28px; }
/* fill of the active dot; while autoplaying it doubles as the countdown */
.sitto-cmp .sitto-cmp__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--cmp-ink);
	transform: scaleX(0);
	transform-origin: left center;
}
.sitto-cmp .sitto-cmp__dot.is-active::after { transform: scaleX(1); }
.sitto-cmp.is-autoplaying .sitto-cmp__dot.is-active::after { animation: sittoCmpProgress var(--cmp-delay, 5s) linear both; }
.sitto-cmp .sitto-cmp__dot:focus-visible { outline: 2px solid var(--cmp-accent); outline-offset: 3px; }

/* --------------------------------------------------------------- Entrance */
.sitto-cmp--entrance.is-js .sitto-cmp__card { opacity: 0; translate: 0 26px; }
.sitto-cmp--entrance.is-js .sitto-cmp__card.is-in {
	animation: sittoCmpIn 700ms cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--i, 0) * 90ms);
}
.sitto-cmp--entrance.is-js .sitto-cmp__card:not(.is-in) .sitto-cmp__check { scale: 0; }
.sitto-cmp--entrance.is-js .sitto-cmp__card.is-in .sitto-cmp__check {
	animation: sittoCmpPop 450ms cubic-bezier(.3, 1.6, .5, 1) both;
	animation-delay: calc(var(--i, 0) * 90ms + 380ms + var(--r, 0) * 70ms);
}

@keyframes sittoCmpIn { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes sittoCmpPop { from { scale: 0; } to { scale: 1; } }
@keyframes sittoCmpShine { from { left: -60%; } to { left: 130%; } }
@keyframes sittoCmpProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
	.sitto-cmp { --cmp-per: 2; }
}
@media (max-width: 767px) {
	.sitto-cmp { --cmp-per: 1; --cmp-peek: 44px; --cmp-pad-x: 20px; --cmp-gap: 14px; }
	.sitto-cmp__media { height: 200px; }
	.sitto-cmp__img { max-height: 156px; }
}

@media (prefers-reduced-motion: reduce) {
	.sitto-cmp *,
	.sitto-cmp *::before,
	.sitto-cmp *::after { animation: none !important; transition: none !important; }
	.sitto-cmp--entrance.is-js .sitto-cmp__card { opacity: 1; translate: none; }
	.sitto-cmp--entrance.is-js .sitto-cmp__card .sitto-cmp__check { scale: 1; }
	.sitto-cmp__card:hover,
	.sitto-cmp__card:focus-within { transform: none; }
}