/* Sitto - Product Slider */
.sitto-ps {
	--ps-per-view: 4;
	--ps-gap: 24px;
	--ps-radius: 24px;
	--ps-card-bg: #F5F6F8;
	--ps-shade: #0B0D12;
	--ps-title: #FFFFFF;
	--ps-desc: rgba(255, 255, 255, 0.82);
	--ps-yellow: #FFC20F;
	position: relative;
}
.sitto-ps__nav { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 20px; }
.sitto-ps__arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border-radius: 50%;
	border: 1px solid #E9EAEB; background: #FFFFFF; color: #181D27; cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease, border-color .2s ease;
}
.sitto-ps__arrow svg { width: 20px; height: 20px; }
.sitto-ps__arrow:hover:not(:disabled) { background: var(--ps-yellow); border-color: var(--ps-yellow); }
.sitto-ps__arrow:disabled { opacity: .35; cursor: default; }
.sitto-ps__arrow:focus-visible { outline: 2px solid #0070D6; outline-offset: 2px; }

.sitto-ps__track {
	display: flex; gap: var(--ps-gap);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
	padding-bottom: 4px;
}
.sitto-ps__track::-webkit-scrollbar { display: none; }

.sitto-ps__card {
	position: relative; flex: 0 0 calc((100% - (var(--ps-per-view) - 1) * var(--ps-gap)) / var(--ps-per-view));
	aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--ps-radius);
	background: var(--ps-card-bg); scroll-snap-align: start; isolation: isolate; outline: none;
}
.sitto-ps__card:focus-visible { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0070D6; }
.sitto-ps__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.sitto-ps__shade {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(11, 13, 18, 0) 40%, rgba(11, 13, 18, .78) 100%);
	transition: background-color .45s ease;
}
.sitto-ps__body {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 24px; display: flex; flex-direction: column;
}
.sitto-ps .sitto-ps__title {
	margin: 0; color: var(--ps-title) !important; font-size: 22px !important; font-weight: 600 !important;
	line-height: 1.3 !important; letter-spacing: -0.2px !important;
}
/* Hidden part: grid rows trick so the title glides up as the description opens */
.sitto-ps__reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1); }
.sitto-ps__reveal-inner { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.sitto-ps .sitto-ps__desc { margin: 10px 0 0; color: var(--ps-desc) !important; font-size: 15px !important; line-height: 1.55 !important; }
.sitto-ps__cta {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 18px;
	border-radius: 999px; background: var(--ps-yellow); color: #181D27 !important; font-size: 15px; font-weight: 600;
	text-decoration: none; width: fit-content; transition: background-color .2s ease;
}
.sitto-ps__cta svg { width: 18px; height: 18px; }
.sitto-ps__cta:hover { background: #E6AC00; }
.sitto-ps__soon {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 16px;
	border-radius: 999px; background: #FFF4D4; color: #181D27; font-size: 14px; font-weight: 600; width: fit-content;
}
.sitto-ps__soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ps-yellow); }

.sitto-ps__card:hover .sitto-ps__reveal,
.sitto-ps__card:focus-within .sitto-ps__reveal { grid-template-rows: 1fr; }
.sitto-ps__card:hover .sitto-ps__reveal-inner,
.sitto-ps__card:focus-within .sitto-ps__reveal-inner { opacity: 1; transform: none; }
.sitto-ps__card:hover .sitto-ps__shade,
.sitto-ps__card:focus-within .sitto-ps__shade { background-color: rgba(11, 13, 18, .5); }
.sitto-ps__card:hover .sitto-ps__img,
.sitto-ps__card:focus-within .sitto-ps__img { transform: scale(1.05); }

/* Touch screens have no hover: show the details */
@media (hover: none) {
	.sitto-ps__reveal { grid-template-rows: 1fr; }
	.sitto-ps__reveal-inner { opacity: 1; transform: none; }
	.sitto-ps__shade { background-color: rgba(11, 13, 18, .45); }
}
@media (max-width: 767px) {
	.sitto-ps__body { padding: 20px; }
	.sitto-ps .sitto-ps__title { font-size: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.sitto-ps__reveal, .sitto-ps__reveal-inner, .sitto-ps__img, .sitto-ps__track { transition: none; scroll-behavior: auto; }
}

/* Theme button styles must not leak into the arrows */
.sitto-ps .sitto-ps__arrow,
.sitto-ps .sitto-ps__arrow:focus {
	all: unset;
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid #E9EAEB; background: #FFFFFF; color: #181D27; cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease, border-color .2s ease;
}
.sitto-ps .sitto-ps__arrow svg { width: 20px; height: 20px; display: block; }
.sitto-ps .sitto-ps__arrow:hover:not(:disabled) { background: #FFC20F; border-color: #FFC20F; }
.sitto-ps .sitto-ps__arrow:disabled { opacity: .35; cursor: default; }
.sitto-ps .sitto-ps__arrow:focus-visible { outline: 2px solid #0070D6; outline-offset: 2px; }
@media (max-width: 767px) {
	.sitto-ps__reveal { grid-template-rows: 1fr; }
	.sitto-ps__reveal-inner { opacity: 1; transform: none; }
	.sitto-ps__shade { background-color: rgba(11, 13, 18, .45); }
	.sitto-ps .sitto-ps__desc { font-size: 14px !important; }
}

/* The widget always takes the full row and grows with its cards (a row container measured it too short on mobile) */
.e-con > .elementor-widget-sitto_product_slider,
.elementor-widget-sitto_product_slider { width: 100%; min-width: 0; height: auto !important; align-self: stretch; flex: 0 0 auto; }

/* Grid layout: image above title + text, no card background; CTA card fills the rest of the last row */
.sitto-ps--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px var(--ps-gap);
}
.sitto-ps-g__card { display: flex; flex-direction: column; min-width: 0; }
.sitto-ps-g__media {
	aspect-ratio: 4 / 3;
	margin-bottom: 24px;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sitto-ps-g__media img { width: 78%; height: 78%; object-fit: contain; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.sitto-ps-g__card.has-link:hover .sitto-ps-g__media img { transform: scale(1.03); }
.sitto-ps-g__title { margin: 0 0 10px; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #181D27; }
.sitto-ps-g__title a { color: inherit; text-decoration: none; }
.sitto-ps-g__arrow { display: inline-block; width: 20px; height: 20px; margin-left: 8px; vertical-align: -3px; white-space: nowrap; transition: transform 0.3s ease; }
.sitto-ps-g__arrow svg { width: 100%; height: 100%; }
.sitto-ps-g__card.has-link:hover .sitto-ps-g__arrow { transform: translateX(4px); }
.sitto-ps-g__card.has-link:hover .sitto-ps-g__title a { color: #181D27; }
.sitto-ps-g__soon { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #FFF4D4; color: #181D27; font-size: 12px; font-weight: 600; vertical-align: middle; letter-spacing: 0; }
.sitto-ps-g__desc { margin: 0; color: #535862; font-size: 16px; line-height: 1.55; }
.sitto-ps-g__cta {
	grid-column: span var(--ps-cta-span, 1); /* fills the rest of the last row, so every row has 3 columns */
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 36px;
	border-radius: 20px;
	background: #0B0D12;
	color: #FFFFFF;
}
.sitto-ps-g__cta-title { margin: 0 0 16px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #FFFFFF; }
.sitto-ps-g__cta-desc { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.sitto-ps-g__cta-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	font-size: 16px;
	border-radius: 999px;
	background: var(--ps-yellow);
	color: #0B0D12;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
}
.sitto-ps-g__cta-btn svg { width: 18px; height: 18px; }
@media (max-width: 1024px) {
	.sitto-ps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sitto-ps-g__cta { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.sitto-ps--grid { grid-template-columns: 1fr; gap: 40px; }
	.sitto-ps-g__title { font-size: 20px; }
	.sitto-ps-g__cta { padding: 28px; }
}

/* CTA card: icon on top, text + button at the bottom; standard card hover */
.sitto-ps-g__cta {
	position: relative;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.sitto-ps-g__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(24, 29, 39, 0.08);
}
.sitto-ps-g__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(255, 194, 15, 0.14);
	color: var(--ps-yellow);
	font-size: 28px;
	transition: background 0.35s ease, color 0.35s ease;
}
.sitto-ps-g__cta:hover .sitto-ps-g__cta-icon { background: var(--ps-yellow); color: #0B0D12; }
.sitto-ps-g__cta-bottom { display: flex; flex-direction: column; gap: 24px; }

/* CTA icon: larger, no background */
.sitto-ps-g__cta-icon,
.sitto-ps-g__cta:hover .sitto-ps-g__cta-icon {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--ps-yellow);
	font-size: clamp(88px, 8vw, 120px);
	line-height: 1;
}
.sitto-ps-g__cta-icon i { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

/* CTA icon: medium size, 50% opacity; full opacity + small lift on card hover */
.sitto-ps-g__cta-icon,
.sitto-ps-g__cta:hover .sitto-ps-g__cta-icon {
	font-size: clamp(64px, 5.5vw, 80px);
}
.sitto-ps-g__cta-icon i {
	display: inline-block;
	opacity: 0.5;
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sitto-ps-g__cta:hover .sitto-ps-g__cta-icon i {
	opacity: 1;
	transform: translateY(-3px) scale(1.05);
}

/* CTA card: warm background by default (dark text), dark on hover (light text); icon at the left */
.sitto-ps-g__cta {
	background: var(--sitto-section-warm, #F8F7F4);
	color: #181D27;
	transition: background 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.sitto-ps-g__cta:hover { background: #0B0D12; color: #FFFFFF; }
.sitto-ps-g__cta-icon,
.sitto-ps-g__cta:hover .sitto-ps-g__cta-icon {
	align-self: flex-start;
	justify-content: flex-start;
}
.sitto-ps-g__cta-title { color: #181D27; transition: color 0.35s ease; }
.sitto-ps-g__cta-desc { color: #535862; transition: color 0.35s ease; }
.sitto-ps-g__cta:hover .sitto-ps-g__cta-title { color: #FFFFFF; }
.sitto-ps-g__cta:hover .sitto-ps-g__cta-desc { color: rgba(255, 255, 255, 0.72); }

/* Product cards (grid): warm border appears on hover */
.sitto-ps-g__card {
	padding: 16px;
	border: 4px solid transparent;
	border-radius: 24px;
	transition: border-color 0.35s ease;
}
.sitto-ps-g__card:hover { border-color: var(--sitto-section-warm, #F8F7F4); }

/* boxed variant (Self-Service Terminal setup): soft grey photo backdrop */
.sitto-ps--boxed .sitto-ps-g__media { background: #F4F3F4; }
.sitto-ps--boxed .sitto-ps-g__media img { mix-blend-mode: multiply; }
/* kiosk studio photo (4:3, grey backdrop baked in): fill the 4:3 media box edge to edge */
.sitto-ps-g__media img[src*="sitto-self-service-kiosk-terminal"] { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }