/* ============================================================
 * Shelly Store — home.css (front page only)
 * Hero slider + guided discovery, benefit cards, journey, pro lane.
 * Uses the tokens defined in frontend.css. Flat corners throughout.
 * ========================================================== */

/* ---------- Shared: buttons + inline icons ---------- */
.shelly-ico { display: inline-block; vertical-align: middle; flex: none; }

.shelly-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 28px;
	font: 700 15px/1 'Manrope', sans-serif;
	color: #FFFFFF;
	background: #121212;
	border: 1px solid #121212;
	border-radius: 0;
	text-align: center;
	cursor: pointer;
	transition: background var(--shelly-transition), color var(--shelly-transition), border-color var(--shelly-transition);
}
.shelly-btn:hover,
.shelly-btn:focus-visible { background: #2481C7; border-color: #4594D1; color: #FFFFFF; }
.shelly-btn--outline { background: transparent; color: #121212; }
.shelly-btn--outline:hover,
.shelly-btn--outline:focus-visible { background: #121212; border-color: #121212; color: #FFFFFF; }
.shelly-btn--light { background: #FFFFFF; border-color: #FFFFFF; color: #121212; }
.shelly-btn--light:hover,
.shelly-btn--light:focus-visible { background: #4594D1; border-color: #4594D1; color: #FFFFFF; }
.shelly-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; }
.shelly-btn--ghost:hover,
.shelly-btn--ghost:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: #121212; }
.shelly-btn--sm { min-height: 40px; padding: 0 18px; font-size: 13.5px; }

.shelly-hs :focus-visible,
.shelly-benefits :focus-visible,
.shelly-journey :focus-visible,
.shelly-prolane :focus-visible { outline: 2px solid #4594D1; outline-offset: 2px; }

/* The hero sits flush under the sticky header: cancel the block gap on <main>. */
body.home .wp-site-blocks > main { margin-block-start: 0; }
body.home .wp-site-blocks > main > .alignfull { margin-block-start: 0; }

/* ============================================================
 * Hero: full-bleed banner slider (shelly.com style)
 * Each panel paints its own edge-to-edge background; content is held
 * to the page width and the manual controls sit inside the banner.
 * ========================================================== */
.shelly-hs {
	position: relative;
	overflow: hidden;
	background: #004B83;
	color: #FDFDFD;
	scroll-margin-top: var(--shelly-header-h);
}
.shelly-hs__inner { max-width: none; margin: 0; padding: 0; }

/* All panels share one grid cell, so the banner keeps a constant height. */
.shelly-hs__panels { display: grid; }
.shelly-hs__panel {
	--shelly-hs-bg: url('img/home/hero-desktop.jpg');
	grid-area: 1 / 1;
	min-width: 0;
	position: relative;
	background: #004B83 var(--shelly-hs-bg) center / cover no-repeat;
	opacity: 0;
	visibility: hidden;
	transition: opacity 420ms ease, visibility 0s linear 420ms;
}
.shelly-hs__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.shelly-hs__panel--discover::before { background: linear-gradient(90deg, rgba(0, 60, 130, 0.35) 0%, rgba(0, 60, 130, 0) 55%); }
.shelly-hs__panel--campaign::before { background: linear-gradient(90deg, rgba(7, 8, 8, 0.92) 0%, rgba(13, 17, 21, 0.78) 100%); }
.shelly-hs__panel--retrofit::before { background: linear-gradient(90deg, rgba(18, 21, 25, 0.82) 0%, rgba(0, 75, 131, 0.6) 100%); }
.shelly-hs__panel.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }

.shelly-hs__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 72px;
	align-items: center;
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 64px var(--shelly-pad-x) 128px;
	min-height: 720px;
	transform: translateX(18px);
	transition: transform 420ms ease;
}
.shelly-hs__panel.is-active .shelly-hs__grid { transform: none; }

.shelly-hs__copy .shelly-eyebrow { display: block; margin: 0 0 18px; color: #9CDBF6; }
.shelly-hs__title {
	font: 400 clamp(38px, 4.6vw, 64px)/1.05 'Manrope', sans-serif;
	letter-spacing: -0.02em;
	color: #FDFDFD;
	margin: 0 0 22px;
	text-wrap: balance;
}
.shelly-hs__lead {
	font: 400 18px/1.6 'Manrope', sans-serif;
	color: rgba(253, 253, 253, 0.86);
	margin: 0 0 32px;
	max-width: 54ch;
}
.shelly-hs__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.shelly-hs__textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 15px/1.2 'Manrope', sans-serif;
	color: #FDFDFD;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}
.shelly-hs__textlink:hover { color: #9CDBF6; }
.shelly-hs__bullets {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 36px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid rgba(253, 253, 253, 0.25);
}
.shelly-hs__bullets li {
	position: relative;
	padding-left: 24px;
	font: 600 14px/1.4 'Manrope', sans-serif;
	color: #FDFDFD;
}
.shelly-hs__bullets li::before {
	content: "";
	position: absolute;
	left: 0; top: 2px;
	width: 15px; height: 15px;
	background: #FDFDFD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M3.5 7.8l2.6 2.6 5.4-5.6' fill='none' stroke='%23334FB4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.shelly-hs__how {
	list-style: none;
	counter-reset: how;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	gap: 12px;
}
.shelly-hs__how li {
	counter-increment: how;
	position: relative;
	padding-left: 40px;
	font: 400 15px/1.5 'Manrope', sans-serif;
	color: rgba(253, 253, 253, 0.8);
}
.shelly-hs__how li strong { color: #FDFDFD; font-weight: 700; }
.shelly-hs__how li::before {
	content: counter(how);
	position: absolute;
	left: 0; top: -2px;
	width: 26px; height: 26px;
	display: grid;
	place-items: center;
	font: 700 12px/1 'Manrope', sans-serif;
	color: #FDFDFD;
	border: 1px solid rgba(253, 253, 253, 0.7);
}
/* Focus rings must stay visible on the dark banner. */
.shelly-hs__copy :focus-visible,
.shelly-hs__controls :focus-visible { outline-color: #FDFDFD; }

/* ---------- Manual controls (overlaid at the foot of the banner) ---------- */
.shelly-hs__controls {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}
.shelly-hs__controls::before {
	content: "";
	position: absolute;
	left: var(--shelly-pad-x); right: var(--shelly-pad-x); top: 0;
	border-top: 1px solid rgba(253, 253, 253, 0.28);
}
.shelly-hs__tabs { position: relative; display: flex; flex-wrap: wrap; gap: 0 40px; }
.shelly-hs__tab {
	appearance: none;
	background: none;
	border: 0;
	border-top: 2px solid transparent;
	border-radius: 0;
	padding: 20px 0 22px;
	font: 600 14px/1.2 'Manrope', sans-serif;
	color: rgba(253, 253, 253, 0.62);
	cursor: pointer;
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	transition: color var(--shelly-transition), border-color var(--shelly-transition);
}
.shelly-hs__tab span { font: 700 12px/1 'Manrope', sans-serif; letter-spacing: 0.06em; color: rgba(253, 253, 253, 0.45); transition: color var(--shelly-transition); }
.shelly-hs__tab:hover { color: #FDFDFD; }
.shelly-hs__tab.is-active { color: #FDFDFD; border-top-color: #FDFDFD; }
.shelly-hs__tab.is-active span { color: #9CDBF6; }
.shelly-hs__arrows { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.shelly-hs__arrow {
	appearance: none;
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	background: rgba(253, 253, 253, 0.08);
	border: 1px solid rgba(253, 253, 253, 0.45);
	border-radius: 0;
	color: #FDFDFD;
	cursor: pointer;
	transition: background var(--shelly-transition), color var(--shelly-transition), border-color var(--shelly-transition);
}
.shelly-hs__arrow:hover { background: #FDFDFD; border-color: #FDFDFD; color: #121212; }

/* ============================================================
 * Discovery widget (hero panel 1)
 * ========================================================== */
.shelly-discover {
	display: flex;
	flex-direction: column;
	min-height: 520px;
	background: #FFFFFF;
	border: 0;
	color: #121212;
	box-shadow: 0 40px 80px -30px rgba(7, 8, 8, 0.6);
	padding: 28px 28px 20px;
}
.shelly-discover__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding-bottom: 18px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--shelly-hairline-strong);
}
.shelly-discover__kicker {
	margin: 0;
	font: 700 12px/1.3 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0361A7;
}
.shelly-discover__steps { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.shelly-discover__steps li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 12px/1 'Manrope', sans-serif;
	color: #BFBFBF;
}
.shelly-discover__steps li span {
	width: 18px; height: 18px;
	display: grid;
	place-items: center;
	font: 700 10.5px/1 'Manrope', sans-serif;
	border: 1px solid currentColor;
}
.shelly-discover__steps li.is-done { color: #121212; }
.shelly-discover__steps li.is-current { color: #0361A7; }
.shelly-discover__steps li.is-current span { background: #0361A7; border-color: #0361A7; color: #FFFFFF; }

.shelly-discover__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.shelly-discover__q {
	font: 400 26px/1.2 'Manrope', sans-serif;
	letter-spacing: -0.01em;
	color: #121212;
	margin: 0 0 20px;
	outline: none;
	text-wrap: balance;
}
.shelly-discover__q--result { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }

.shelly-discover__goals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1 1 auto; }
.shelly-discover__goal {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 8px;
	min-height: 200px;
	padding: 22px;
	text-align: left;
	background: #FAFAFA;
	border: 1px solid var(--shelly-hairline-strong);
	border-radius: 0;
	cursor: pointer;
	transition: background var(--shelly-transition), border-color var(--shelly-transition), transform var(--shelly-transition);
}
.shelly-discover__goal:hover,
.shelly-discover__goal:focus-visible { background: #F0F4F7; border-color: #4594D1; transform: translateY(-2px); }
.shelly-discover__goal-icon {
	width: 48px; height: 48px;
	display: grid;
	place-items: center;
	margin-bottom: auto;
	color: #FFFFFF;
	background: #2481C7;
}
.shelly-discover__goal-label { font: 700 22px/1.1 'Manrope', sans-serif; color: #121212; }
.shelly-discover__goal-list { display: grid; gap: 3px; font: 400 13.5px/1.45 'Manrope', sans-serif; color: #656669; }

.shelly-discover__nav { display: flex; align-items: center; justify-content: space-between; margin: -6px 0 14px; }
.shelly-discover__back,
.shelly-discover__reset {
	appearance: none;
	background: none;
	border: 0;
	padding: 6px 0;
	font: 700 13px/1 'Manrope', sans-serif;
	color: #656669;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.shelly-discover__back:hover,
.shelly-discover__reset:hover { color: #0361A7; }
.shelly-discover__back-ico svg { width: 15px; height: 15px; display: block; }

.shelly-discover__areas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shelly-discover__area {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 62px;
	padding: 12px 14px;
	text-align: left;
	background: #FFFFFF;
	border: 1px solid var(--shelly-hairline-strong);
	border-radius: 0;
	cursor: pointer;
	transition: background var(--shelly-transition), border-color var(--shelly-transition);
}
.shelly-discover__area:hover,
.shelly-discover__area:focus-visible { background: #F0F4F7; border-color: #4594D1; }
.shelly-discover__area-icon { color: #0361A7; display: grid; place-items: center; flex: none; }
.shelly-discover__area-label { font: 700 14.5px/1.25 'Manrope', sans-serif; color: #121212; }

.shelly-discover__how { font: 400 14px/1.55 'Manrope', sans-serif; color: #656669; margin: 0 0 16px; }
.shelly-discover__pick {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 14px;
	background: #F0F4F7;
	border: 1px solid #4594D1;
}
.shelly-discover__thumb { display: block; background: #FFFFFF; }
.shelly-discover__thumb img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.shelly-discover__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shelly-discover__tag { font: 700 10.5px/1 'Manrope', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #0361A7; }
.shelly-discover__name { font: 700 15px/1.3 'Manrope', sans-serif; color: #121212; }
.shelly-discover__price { font: 600 14px/1.2 'Manrope', sans-serif; color: #121212; }
.shelly-discover__actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.shelly-discover__view { font: 700 13px/1 'Manrope', sans-serif; color: #121212; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.shelly-discover__later { margin-top: 14px; }
.shelly-discover__later-title { margin: 0 0 6px; font: 700 10.5px/1 'Manrope', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #656669; }
.shelly-discover__later-item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 8px 0;
	border-top: 1px solid var(--shelly-hairline-strong);
}
.shelly-discover__later-item .shelly-discover__thumb { background: #F3F3F3; }
.shelly-discover__later-item .shelly-discover__info { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.shelly-discover__later-item .shelly-discover__name { font-size: 14px; font-weight: 600; }
.shelly-discover__later-item .shelly-discover__price { font-size: 13px; color: #656669; white-space: nowrap; }

.shelly-discover__note {
	margin: 12px 0 0;
	padding: 8px 12px;
	font: 400 12.5px/1.5 'Manrope', sans-serif;
	color: #656669;
	border-left: 2px solid #4594D1;
	background: #FAFAFA;
}
.shelly-discover__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 16px; }
.shelly-discover__planner { font: 700 13px/1.3 'Manrope', sans-serif; color: #0361A7; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.shelly-discover__foot {
	margin: 20px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--shelly-hairline-strong);
	font: 400 13px/1.4 'Manrope', sans-serif;
	color: #656669;
}
.shelly-discover__foot a { font-weight: 700; color: #121212; border-bottom: 1px solid currentColor; margin-left: 4px; }
.shelly-discover__fallback { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 0; padding: 0; }
.shelly-discover__fallback a { display: block; padding: 12px 14px; border: 1px solid var(--shelly-hairline-strong); font: 700 14px/1.2 'Manrope', sans-serif; }

/* ---------- Campaign set (hero panel 2) ---------- */
.shelly-hs-set { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; }
.shelly-hs-set__item a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 14px;
	background: #FFFFFF;
	border: 1px solid transparent;
	color: #121212;
	box-shadow: 0 30px 60px -30px rgba(7, 8, 8, 0.6);
	transition: border-color var(--shelly-transition), transform var(--shelly-transition);
}
.shelly-hs-set__item a:hover { border-color: #4594D1; transform: translateY(-3px); color: #121212; }
.shelly-hs-set__media { display: block; background: #F3F3F3; margin-bottom: 8px; }
.shelly-hs-set__media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.shelly-hs-set__role { font: 700 10.5px/1.3 'Manrope', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #0361A7; }
.shelly-hs-set__name { font: 700 15px/1.3 'Manrope', sans-serif; }
.shelly-hs-set__price { font: 600 14px/1.2 'Manrope', sans-serif; color: #656669; margin-top: auto; }

/* ---------- Retrofit illustration (hero panel 3) ---------- */
.shelly-retrofit { display: block; width: 100%; height: auto; box-shadow: 0 40px 80px -30px rgba(7, 8, 8, 0.6); }
.shelly-hs__panel.is-active .shelly-retrofit__module { animation: shelly-rf-module 8s ease-in-out infinite; }
.shelly-hs__panel.is-active .shelly-retrofit__plate { animation: shelly-rf-plate 8s ease-in-out infinite; }
.shelly-hs__panel.is-active .shelly-retrofit__waves path { animation: shelly-rf-wave 8s ease-in-out infinite; }
.shelly-hs__panel.is-active .shelly-retrofit__waves path:nth-child(2) { animation-delay: 0.18s; }
.shelly-hs__panel.is-active .shelly-retrofit__waves path:nth-child(3) { animation-delay: 0.36s; }
.shelly-hs__panel.is-active .shelly-retrofit__knob { animation: shelly-rf-knob 8s ease-in-out infinite; }
.shelly-hs__panel.is-active .shelly-retrofit__track { animation: shelly-rf-track 8s ease-in-out infinite; }
.shelly-hs__panel.is-active .shelly-retrofit__bulb { animation: shelly-rf-bulb 8s ease-in-out infinite; }
.shelly-hs__panel.is-active .shelly-retrofit__glow { animation: shelly-rf-glow 8s ease-in-out infinite; }
.shelly-retrofit__waves path { opacity: 0; }

@keyframes shelly-rf-module { 0%, 8% { transform: translateX(150px); } 30%, 100% { transform: translateX(0); } }
@keyframes shelly-rf-plate  { 0%, 30% { opacity: 0.18; } 42%, 92% { opacity: 1; } 100% { opacity: 0.18; } }
@keyframes shelly-rf-wave   { 0%, 46% { opacity: 0; } 56%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shelly-rf-knob   { 0%, 62% { transform: translateX(0); } 68%, 92% { transform: translateX(40px); } 100% { transform: translateX(0); } }
@keyframes shelly-rf-track  { 0%, 62% { fill: #BFBFBF; } 68%, 92% { fill: #4594D1; } 100% { fill: #BFBFBF; } }
@keyframes shelly-rf-bulb   { 0%, 66% { fill: #BFBFBF; } 72%, 92% { fill: #EC9127; } 100% { fill: #BFBFBF; } }
@keyframes shelly-rf-glow   { 0%, 66% { opacity: 0; } 72%, 92% { opacity: 0.45; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.shelly-hs__panel { transition: none; }
	.shelly-hs__grid { transition: none; transform: none; }
	.shelly-hs__panel.is-active [class^="shelly-retrofit__"],
	.shelly-hs__panel.is-active .shelly-retrofit__waves path { animation: none; }
	.shelly-retrofit__plate { opacity: 0.3; }
	.shelly-retrofit__waves path { opacity: 1; }
	.shelly-retrofit__knob { transform: translateX(40px); }
	.shelly-retrofit__track { fill: #4594D1; }
	.shelly-retrofit__bulb { fill: #EC9127; }
	.shelly-retrofit__glow { opacity: 0.45; }
	.shelly-discover__goal, .shelly-hs-set__item a, .shelly-benefits__card { transition: none; }
}

/* ============================================================
 * Benefit cards
 * ========================================================== */
.shelly-benefits { background: #FAFAFA; padding: 96px 0; border-top: 1px solid var(--shelly-hairline); scroll-margin-top: var(--shelly-header-h); }
.shelly-benefits__inner,
.shelly-journey__inner,
.shelly-prolane__inner { max-width: var(--shelly-page-max); margin-inline: auto; padding: 0 var(--shelly-pad-x); }
.shelly-benefits__head,
.shelly-journey__head { max-width: 760px; margin-bottom: 48px; }
.shelly-benefits__head .shelly-eyebrow,
.shelly-journey__head .shelly-eyebrow { display: block; margin: 0 0 12px; }
.shelly-benefits__title,
.shelly-journey__title {
	font: 400 clamp(32px, 4vw, 48px)/1.1 'Manrope', sans-serif;
	letter-spacing: -0.01em;
	color: #121212;
	margin: 0;
	text-wrap: balance;
}
.shelly-benefits__grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--shelly-gutter); margin: 0; padding: 0; }
.shelly-benefits__card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: #FFFFFF;
	border: 1px solid var(--shelly-hairline-strong);
	transition: border-color var(--shelly-transition), transform var(--shelly-transition);
}
.shelly-benefits__card:hover { border-color: #4594D1; transform: translateY(-3px); }
.shelly-benefits__icon { width: 56px; height: 56px; display: grid; place-items: center; color: #0361A7; background: #F0F4F7; margin-bottom: 24px; }
.shelly-benefits__label { font: 700 21px/1.25 'Manrope', sans-serif; margin: 0 0 10px; color: #121212; }
.shelly-benefits__label a { color: inherit; }
.shelly-benefits__label a:hover { color: #0361A7; }
.shelly-benefits__copy { font: 400 15px/1.6 'Manrope', sans-serif; color: #656669; margin: 0 0 24px; }
.shelly-benefits__first {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin-top: auto;
	padding: 14px 0;
	border-top: 1px solid var(--shelly-hairline-strong);
	font: 600 13.5px/1.4 'Manrope', sans-serif;
	color: #121212;
}
.shelly-benefits__first img { width: 56px; height: 56px; object-fit: contain; background: #F3F3F3; }
.shelly-benefits__first small { display: block; font: 700 10.5px/1.4 'Manrope', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #656669; }
.shelly-benefits__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0; padding-top: 14px; border-top: 1px solid var(--shelly-hairline-strong); }
.shelly-benefits__more { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 'Manrope', sans-serif; color: #121212; }
.shelly-benefits__help { font: 700 13px/1 'Manrope', sans-serif; color: #0361A7; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ============================================================
 * Journey: start with one, grow room by room
 * ========================================================== */
.shelly-journey { background: #FFFFFF; padding: 96px 0; border-top: 1px solid var(--shelly-hairline); scroll-margin-top: var(--shelly-header-h); }
.shelly-journey__lead { font: 400 17px/1.6 'Manrope', sans-serif; color: #656669; margin: 16px 0 0; max-width: 60ch; }
.shelly-journey__steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--shelly-gutter); margin: 0; padding: 0; }
.shelly-journey__step { position: relative; padding: 28px 28px 0 0; border-top: 1px solid var(--shelly-hairline-strong); }
.shelly-journey__step::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; background: #2481C7; }
.shelly-journey__step:nth-child(1)::before { width: 33%; }
.shelly-journey__step:nth-child(2)::before { width: 66%; }
.shelly-journey__step:nth-child(3)::before { width: 100%; }
.shelly-journey__num { display: block; font: 400 44px/1 'Manrope', sans-serif; letter-spacing: -0.02em; color: #0361A7; margin-bottom: 20px; }
.shelly-journey__step h3 { font: 700 22px/1.25 'Manrope', sans-serif; color: #121212; margin: 0 0 10px; }
.shelly-journey__step p { font: 400 15px/1.6 'Manrope', sans-serif; color: #656669; margin: 0 0 20px; max-width: 42ch; }
.shelly-journey__from { display: block; margin-top: 6px; font-weight: 700; color: #121212; }
.shelly-journey__link { display: inline-flex; align-items: center; gap: 8px; font: 700 14.5px/1 'Manrope', sans-serif; color: #121212; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.shelly-journey__link:hover { color: #0361A7; }

/* ============================================================
 * Pro lane
 * ========================================================== */
.shelly-prolane { background: #121519; color: #FDFDFD; padding: 80px 0; scroll-margin-top: var(--shelly-header-h); }
.shelly-prolane__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.shelly-prolane .shelly-eyebrow { display: block; margin: 0 0 14px; }
.shelly-prolane__title { font: 400 clamp(28px, 3.2vw, 42px)/1.12 'Manrope', sans-serif; letter-spacing: -0.01em; color: #FDFDFD; margin: 0 0 28px; text-wrap: balance; }
.shelly-prolane__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.shelly-prolane__filters { display: grid; gap: 26px; }
.shelly-prolane__group-title { margin: 0 0 12px; font: 700 12px/1.3 'Manrope', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #929292; }
.shelly-prolane__group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.shelly-prolane__group a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	font: 600 14px/1 'Manrope', sans-serif;
	color: #FDFDFD;
	border: 1px solid rgba(255, 255, 255, 0.22);
	transition: background var(--shelly-transition), color var(--shelly-transition), border-color var(--shelly-transition);
}
.shelly-prolane__group a:hover,
.shelly-prolane__group a:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: #121212; }

/* ============================================================
 * Product-type tiles: product photos, five across on wide screens
 * ========================================================== */
@media (min-width: 1200px) {
	.shelly-categories__tile-grid { grid-template-columns: repeat(5, 1fr); }
}
.shelly-categories__tile-media { aspect-ratio: 1; background: #F3F3F3; }
.shelly-categories__tile-media::after { content: none; }
.shelly-categories__tile-media img { max-width: 74%; max-height: 74%; filter: none; mix-blend-mode: multiply; }

/* ============================================================
 * Responsive
 * ========================================================== */
@media (max-width: 1199px) {
	.shelly-hs__grid { gap: 48px; }
	.shelly-benefits__grid { grid-template-columns: repeat(2, 1fr); }
	.shelly-prolane__inner { gap: 48px; }
}
@media (max-width: 989px) {
	.shelly-hs { scroll-margin-top: var(--shelly-header-h-mobile); }
	.shelly-benefits__inner,
	.shelly-journey__inner,
	.shelly-prolane__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-hs__panel { --shelly-hs-bg: url('img/home/hero-mobile.jpg'); }
	.shelly-hs__grid { grid-template-columns: 1fr; gap: 32px; padding: 44px var(--shelly-pad-x-mobile) 96px; min-height: 0; align-items: start; }
	.shelly-hs__controls { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-hs__controls::before { left: var(--shelly-pad-x-mobile); right: var(--shelly-pad-x-mobile); }
	.shelly-hs__lead { font-size: 16.5px; margin-bottom: 26px; }
	/* On small screens the discovery widget is the priority: drop the bullets so it starts higher. */
	.shelly-hs__bullets { display: none; }
	.shelly-discover { min-height: 0; padding: 22px 20px 16px; }
	.shelly-discover__goal { min-height: 168px; }
	.shelly-hs__tabs { gap: 0 24px; }
	.shelly-hs__tab { padding: 16px 0 18px; font-size: 13px; }
	.shelly-benefits, .shelly-journey { padding: 64px 0; }
	.shelly-prolane { padding: 56px 0; }
	.shelly-benefits__head, .shelly-journey__head { margin-bottom: 32px; }
	.shelly-journey__steps { grid-template-columns: 1fr; gap: 36px; }
	.shelly-journey__step { padding-right: 0; }
	.shelly-prolane__inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 639px) {
	.shelly-hs__title { font-size: clamp(32px, 9vw, 40px); }
	.shelly-hs__ctas .shelly-btn { width: 100%; }
	.shelly-discover__head { flex-direction: column; align-items: flex-start; }
	.shelly-discover__q { font-size: 22px; }
	.shelly-discover__q--result { font-size: 19px; }
	.shelly-discover__goals { gap: 10px; }
	.shelly-discover__goal { min-height: 150px; padding: 16px; }
	.shelly-discover__goal-label { font-size: 19px; }
	.shelly-discover__areas { grid-template-columns: 1fr; }
	.shelly-discover__pick { grid-template-columns: 64px minmax(0, 1fr); }
	.shelly-discover__actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 16px; }
	.shelly-hs-set { grid-template-columns: 1fr; }
	.shelly-hs-set__item a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px 14px; align-items: center; }
	.shelly-hs-set__media { grid-row: 1 / span 3; margin: 0; }
	.shelly-hs-set__price { margin: 0; }
	.shelly-hs__tab span { display: none; }
	.shelly-hs__arrows { display: none; }
	.shelly-benefits__grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Experience Centre teaser: cinematic band, 3D home behind the copy
 * ========================================================== */
.shelly-xp { position: relative; overflow: hidden; min-height: min(86vh, 820px); display: flex; align-items: center; background: #003C82 linear-gradient(90deg, #003C82 0%, #0361A7 50%, #2481C7 100%); color: #FDFDFD; isolation: isolate; scroll-margin-top: var(--shelly-header-h); }
.shelly-xp > * { margin-block: 0; }
.shelly-xp__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 48, 110, 0.92) 0%, rgba(0, 60, 130, 0.72) 34%, rgba(0, 60, 130, 0.1) 68%, rgba(0, 60, 130, 0) 100%), linear-gradient(180deg, rgba(0, 40, 96, 0.35) 0%, rgba(0, 40, 96, 0) 22%, rgba(0, 40, 96, 0) 78%, rgba(0, 40, 96, 0.45) 100%); }
.shelly-xp__inner { position: relative; z-index: 2; width: 100%; max-width: var(--shelly-page-max); margin-inline: auto; padding: 96px var(--shelly-pad-x); }
.shelly-xp__inner > * { max-width: 560px; }
.shelly-xp__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 700 11.5px/1 'Manrope', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(253, 253, 253, 0.72); }
.shelly-xp__eyebrow span { padding: 5px 8px; letter-spacing: 0.08em; color: #003C82; background: #FDFDFD; }
.shelly-xp__title { font: 200 clamp(40px, 5.4vw, 76px)/1.02 'Manrope', sans-serif; letter-spacing: -0.035em; color: #FDFDFD; margin: 0 0 24px; text-wrap: balance; }
.shelly-xp__lead { font: 400 17.5px/1.65 'Manrope', sans-serif; color: rgba(253, 253, 253, 0.74); margin: 0 0 36px; }
.shelly-xp__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.shelly-xp__link { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.2 'Manrope', sans-serif; color: #FDFDFD; border-bottom: 1px solid rgba(253, 253, 253, 0.5); padding-bottom: 4px; }
.shelly-xp__link:hover { color: #9CDBF6; border-color: currentColor; }
.shelly-xp__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 56px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(253, 253, 253, 0.16); max-width: 640px; }
.shelly-xp__facts li { font: 400 13.5px/1.4 'Manrope', sans-serif; color: rgba(253, 253, 253, 0.6); }
.shelly-xp__facts strong { display: block; font: 300 30px/1.1 'Manrope', sans-serif; letter-spacing: -0.02em; color: #FDFDFD; margin-bottom: 4px; }
.shelly-xp :focus-visible { outline: 2px solid #FDFDFD; outline-offset: 3px; }
@media (max-width: 989px) {
	.shelly-xp { min-height: 0; }
	.shelly-xp__inner { padding: 72px var(--shelly-pad-x-mobile); }
	.shelly-xp__veil { background: linear-gradient(180deg, rgba(0, 48, 110, 0.9) 0%, rgba(0, 60, 130, 0.7) 60%, rgba(0, 48, 110, 0.9) 100%); }
	.shelly-xp__facts { margin-top: 40px; gap: 14px 28px; }
	.shelly-xp__ctas .shelly-btn { width: 100%; }
}

/* ============================================================
 * Room by room: the flat Experience Centre (3D switched off)
 * ========================================================== */
.shelly-rooms { background: #F9F9F9; padding: 104px 0; scroll-margin-top: var(--shelly-header-h); }
.shelly-rooms__inner { max-width: var(--shelly-page-max); margin-inline: auto; padding: 0 var(--shelly-pad-x); }
.shelly-rooms__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 40px; }
.shelly-rooms__head > div { max-width: 720px; }
.shelly-rooms__title { margin: 0 0 14px; font: 700 clamp(30px, 3.6vw, 48px)/1.08 'Manrope', sans-serif; letter-spacing: -0.025em; color: #121519; text-wrap: balance; }
.shelly-rooms__lead { margin: 0; font: 400 17px/1.6 'Manrope', sans-serif; color: #656669; }
.shelly-rooms__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shelly-rooms__room { background: #FFFFFF; border: 1px solid var(--shelly-hairline-strong); padding: 24px 24px 12px; }
.shelly-rooms__room-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--shelly-hairline-strong); font: 700 19px/1.2 'Manrope', sans-serif; color: #121519; }
.shelly-rooms__room-title span { font: 700 12px/1 'Manrope', sans-serif; color: #0361A7; }
.shelly-rooms__list { list-style: none; margin: 0; padding: 0; }
.shelly-rooms__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--shelly-hairline); }
.shelly-rooms__item:last-child { border-bottom: 0; }
.shelly-rooms__icon { width: 36px; height: 36px; display: grid; place-items: center; background: #F0F4F7; color: #0361A7; }
.shelly-rooms__text strong { display: block; font: 700 15.5px/1.3 'Manrope', sans-serif; color: #121519; margin-bottom: 4px; }
.shelly-rooms__text p { margin: 0 0 10px; font: 400 14px/1.5 'Manrope', sans-serif; color: #656669; }
.shelly-rooms__product { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1.3 'Manrope', sans-serif; color: #0361A7; }
.shelly-rooms__product img { width: 32px; height: 32px; object-fit: contain; background: #F2F5F8; }
.shelly-rooms__product:hover span { text-decoration: underline; }
@media (max-width: 1199px) { .shelly-rooms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 989px) {
	.shelly-rooms { padding: 64px 0; }
	.shelly-rooms__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-rooms__head { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
}
@media (max-width: 639px) { .shelly-rooms__grid { grid-template-columns: 1fr; } }