/* ============================================================
 * Shelly Store — frontend.css
 * Override layer over theme.json. Tokens mirror design-style.md.
 * ========================================================== */

/* Light display weights (200-399) come from Manrope's variable font. 400 and 700 stay on
   the static files declared in theme.json, so existing text does not change. OFL licence. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 399; font-display: swap; src: url('fonts/manrope-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 399; font-display: swap; src: url('fonts/manrope-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Same variable file for the medium, semibold and extrabold weights (shelly.com uses 500 and 600). */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 401 699; font-display: swap; src: url('fonts/manrope-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 401 699; font-display: swap; src: url('fonts/manrope-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 701 800; font-display: swap; src: url('fonts/manrope-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 701 800; font-display: swap; src: url('fonts/manrope-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------
 * Shelly brand palette. Values are the named tokens published in
 * shelly.com's own stylesheets. Use these, not new hex values.
 *   Blue on a light surface as TEXT  -> --shelly-blue-dark (AA contrast)
 *   Solid fill carrying white text   -> --shelly-blue-medium, or -dark for small text
 *   Icons, borders, glows, gradients -> --shelly-blue
 * ---------------------------------------------------------- */
:root {
	--shelly-blue: #4594D1;
	--shelly-blue-medium: #2481C7;
	--shelly-blue-dark: #0361A7;
	--shelly-blue-xdark: #004B83;
	--shelly-blue-deep: #003C82;
	--shelly-blue-light: #9CDBF6;
	--shelly-blue-tint: #F0F4F7;
	--shelly-gradient-blue: linear-gradient(90deg, #4594D1, #003C82);
	--shelly-red: #D1223E;
	--shelly-green: #11BA4B;
	--shelly-orange: #EC9127;
	--shelly-black: #121519;
	--shelly-night: #0B1419;
	--shelly-ink: #070808;
	--shelly-grey-dark: #656669;
	--shelly-grey: #888B8D;
	--shelly-grey-light: #D2D9DE;
	--shelly-grey-tint: #ECF1F5;
	--shelly-tile: #F2F5F8;
	--shelly-white: #FDFDFD;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
	--shelly-gutter: 26px;
	--shelly-gutter-mobile: 12px;
	--shelly-page-max: 1600px;
	--shelly-content-max: 1200px;
	--shelly-pad-x: 48px;
	--shelly-pad-x-mobile: 24px;
	--shelly-hairline: rgba(18,18,18,0.05);
	--shelly-hairline-strong: rgba(18,18,18,0.1);
	--shelly-hairline-heavy: rgba(18,18,18,0.55);
	--shelly-transition: 180ms ease;
	--shelly-header-h: 80px;
	--shelly-header-h-mobile: 60px;
	--shelly-announcement-h: 0px;

	/* Radius scale — flat/square look to mirror shelly.com (was 8/12/16/24px) */
	--shelly-radius-sm: 0;   /* badges, chips, tags */
	--shelly-radius-md: 0;   /* buttons, inputs, small cards */
	--shelly-radius-lg: 0;   /* product / feature / summary cards */
	--shelly-radius-xl: 0;   /* hero media, big feature blocks */
	--shelly-radius-pill: 9999px; /* KEEP — swatches, circular dots, pills */
}

/* ---------- Resets ---------- */
html, body {
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: #121212;
	background: #FFFFFF;
	margin: 0;
}
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--shelly-transition); }
a:hover { color: #2481C7; }
ul, ol { margin: 0; padding: 0; }
.wp-block-heading { font-weight: 400; }
.wp-block-heading:is(h4, h5, h6) { font-weight: 700; }

/* Zero radius on EVERYTHING by default */
.wp-block-button__link,
.wp-block-search__button,
.wp-block-search__input,
.woocommerce button,
.woocommerce a.button,
.woocommerce input[type="submit"],
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.wc-block-components-button,
.wc-block-components-text-input input,
.wc-block-components-select__container,
input, textarea, select {
	border-radius: var(--shelly-radius-md) !important;
}

/* ============================================================
 * Announcement bar — brand gradient with icon-led messages
 * ========================================================== */
/* Slim strip matching shelly.com's blue gradient announcement bar:
   centered rotating message + region/currency selector pinned right. */
.shelly-announcement {
	background: linear-gradient(90deg, #4594D1 0%, #003C82 100%);
	color: #FDFDFD;
	font: 400 13px/1.3 'Manrope', sans-serif;
	padding: 7px var(--shelly-pad-x) 8px;
	letter-spacing: 0.01em;
	position: relative;
	/* overflow visible + above the sticky header (z-index:100) so the
	   relocated region selector's dropdown isn't clipped or hidden. */
	overflow: visible;
	z-index: 200;
	border-radius: 0;
}
.shelly-announcement__inner {
	position: relative;
	z-index: 1;
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr minmax(0, 720px) 1fr;
	align-items: center;
	gap: 16px;
}
.shelly-announcement__spacer { min-width: 0; }
/* Rotating message: stacked, only .is-active shown, JS cycles them */
.shelly-announcement__slider {
	position: relative;
	height: 18px;
	justify-self: center;
	width: 100%;
	max-width: 720px;
	overflow: hidden;
}
.shelly-announcement__msg {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--shelly-transition), transform var(--shelly-transition), visibility 0s linear var(--shelly-transition);
}
.shelly-announcement__msg.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--shelly-transition), transform var(--shelly-transition), visibility 0s;
}
.shelly-announcement__msg strong { font-weight: 700; }
/* Region / currency selector (right) */
.shelly-announcement__region {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 24px;
	padding: 0 4px;
	background: transparent;
	border: 0;
	color: inherit;
	font: 600 12.5px/1 'Manrope', sans-serif;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: opacity var(--shelly-transition);
}
.shelly-announcement__region:hover { opacity: 0.82; }
.shelly-announcement__flag { font-size: 15px; line-height: 1; }
.shelly-announcement__region-caret { display: inline-flex; opacity: 0.75; }
.shelly-announcement__region-caret svg { display: block; }

/* Relocated shelly-mena country selector, sitting in the right slot.
   position:relative is kept (from the plugin) so its absolute dropdown
   anchors here; we only restyle the trigger to shelly's minimal
   white-on-blue look. The dropdown panel stays white (plugin default). */
.shelly-announcement .shelly-mena-header-selector {
	justify-self: end;
	position: relative;
	height: auto;
	margin: 0;
	z-index: 1;
}
.shelly-announcement .shelly-mena-header-selector__trigger {
	background: transparent;
	border: 0;
	border-radius: 0;
	height: 24px;
	padding: 0 2px;
	gap: 8px;
	color: #FDFDFD;
	font: 600 12.5px/1 'Manrope', sans-serif;
	box-shadow: none;
	transition: opacity var(--shelly-transition);
}
.shelly-announcement .shelly-mena-header-selector__trigger:hover {
	background: transparent;
	border: 0;
	box-shadow: none;
	opacity: 0.82;
}
.shelly-announcement .shelly-mena-header-selector__flag { font-size: 15px; }
.shelly-announcement .shelly-mena-header-selector__name {
	font-weight: 600;
	color: rgba(253, 253, 253, 0.85);
	max-width: 120px;
}
.shelly-announcement .shelly-mena-header-selector__currency {
	font-weight: 700;
	color: #FDFDFD;
}
.shelly-announcement .shelly-mena-header-selector__caret { color: rgba(253, 253, 253, 0.8); }
/* Dropdown opens downward from the bar; keep it left-anchored and clear
   of the sticky header (announcement bar already sits at z-index:200). */
.shelly-announcement .shelly-mena-header-selector__dropdown {
	left: auto;
	right: 0;
}

@media (max-width: 989px) {
	.shelly-announcement { padding: 7px var(--shelly-pad-x-mobile) 8px; font-size: 12px; }
	.shelly-announcement__inner { grid-template-columns: 1fr auto; }
	.shelly-announcement__spacer { display: none; }
	.shelly-announcement__slider { justify-self: start; text-align: left; }
	.shelly-announcement__msg { justify-content: flex-start; text-align: left; }
}
@media (max-width: 639px) {
	.shelly-announcement__region-label { display: none; }
	.shelly-announcement__msg { font-size: 11.5px; }
}

/* ============================================================
 * Header — frosted sticky bar with 3-column grid
 * Grid layout gives the nav a true viewport center: the logo
 * and utils columns both take minmax(0, 1fr) so they balance
 * around the auto-sized nav in the middle column.
 * Every utility item is forced to a uniform 40px height and
 * WP block wrappers are reset to display: inline-flex so their
 * default margins can't throw off vertical alignment.
 * ========================================================== */
.shelly-header {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-bottom: 1px solid rgba(18, 21, 25, 0.08);
	position: sticky;
	top: 0;
	z-index: 100;
	border-radius: 0;
}
.shelly-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	min-height: var(--shelly-header-h);
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}

/* ---------- Lead: hamburger + logo group (grid col 1, pinned left) ---------- */
.shelly-header__lead {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
/* Hamburger — hidden on desktop, shown at the mobile breakpoint */
.shelly-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 0 9px;
	background: transparent;
	border: 0;
	cursor: pointer;
	border-radius: 0;
}
.shelly-header__burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: #121519;
	border-radius: 2px;
	transition: transform var(--shelly-transition), opacity var(--shelly-transition);
}
.shelly-header__logo-group {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.shelly-header__logo {
	display: inline-flex;
	align-items: center;
	height: 46px;
	color: inherit;
	text-decoration: none;
}
.shelly-header__logo-img {
	display: block;
	height: 46px;
	width: auto;
	max-width: 210px;
	object-fit: contain;
	transition: transform var(--shelly-transition);
}
.shelly-header__logo:hover .shelly-header__logo-img {
	transform: translateY(-1px);
}

/* ---------- Nav (grid col 2, centered) ---------- */
.shelly-header__nav {
	justify-self: center;
	display: flex;
	align-items: center;
	height: 100%;
}

/* ---------- Utilities (grid col 3, pinned right) — bare shelly.com icons ---------- */
.shelly-header__utils {
	justify-self: end;
	display: flex !important;
	align-items: center;
	gap: 16px;
	height: 40px;
}
.shelly-header__utils > * {
	display: inline-flex !important;
	align-items: center;
	height: 40px;
	margin: 0 !important;
}

/* Search — collapses to a bare magnifier, expands on focus/hover (shelly-style) */
.shelly-header__search { display: inline-flex !important; align-items: center; height: 40px; }
.shelly-header__utils .wp-block-search {
	margin: 0 !important;
	padding: 0 !important;
	height: 40px;
}
.shelly-header__utils .wp-block-search .wp-block-search__inside-wrapper {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: hidden;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: row-reverse;
	align-items: center;
	gap: 4px;
	transition: none;
}
.shelly-header__utils .wp-block-search__input {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1.4px solid transparent !important;
	height: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
	font: 400 13px/1 'Manrope', sans-serif !important;
	color: #121519 !important;
	box-shadow: none !important;
	width: 0;
	min-width: 0;
	opacity: 0;
	flex: 0 1 auto;
	transition: width var(--shelly-transition), opacity var(--shelly-transition), border-color var(--shelly-transition);
}
.shelly-header__search:hover .wp-block-search__input,
.shelly-header__utils .wp-block-search__inside-wrapper:focus-within .wp-block-search__input {
	width: 190px;
	min-width: 190px;
	opacity: 1;
	border-bottom-color: rgba(18, 21, 25, 0.25) !important;
	padding: 0 2px !important;
}
.shelly-header__utils .wp-block-search__input::placeholder { color: #656669; }
.shelly-header__utils .wp-block-search__button {
	background: transparent !important;
	color: #121519 !important;
	border: 0 !important;
	border-radius: 0 !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	cursor: pointer;
	transition: color var(--shelly-transition);
}
.shelly-header__utils .wp-block-search__button:hover { color: #0361A7 !important; }
.shelly-header__utils .wp-block-search__button svg { width: 18px; height: 18px; fill: currentColor; }

/* Account + wishlist — bare outline icons */
.shelly-header__icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	color: #121519;
	text-decoration: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: color var(--shelly-transition), transform var(--shelly-transition);
}
.shelly-header__icon:hover { color: #0361A7; transform: translateY(-1px); }
.shelly-header__icon svg { display: block; }

/* Mini-cart — bare icon with blue count bubble */
.shelly-header__utils .wp-block-woocommerce-mini-cart,
.shelly-header__utils .wc-block-mini-cart {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	height: 40px !important;
}
.shelly-header__utils .wc-block-mini-cart__button,
.shelly-header__utils .wp-block-woocommerce-mini-cart .wp-block-woocommerce-mini-cart__button {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: #121519 !important;
	flex: 0 0 40px;
	position: relative;
	cursor: pointer;
	transition: color var(--shelly-transition), transform var(--shelly-transition) !important;
}
.shelly-header__utils .wc-block-mini-cart__button:hover {
	background: transparent !important;
	color: #0361A7 !important;
	transform: translateY(-1px);
}
.shelly-header__utils .wc-block-mini-cart__button svg {
	width: 20px;
	height: 20px;
}
.shelly-header__utils .wc-block-mini-cart__badge,
.shelly-header__utils .wc-block-mini-cart__quantity-badge {
	background: #0361A7 !important;
	color: #FFFFFF !important;
	border: 2px solid #FFFFFF !important;
	border-radius: var(--shelly-radius-pill) !important;
	font: 700 10px/1 'Manrope', sans-serif !important;
	min-width: 18px;
	height: 18px;
	position: absolute;
	top: -3px;
	right: -3px;
}

/* Hide the login block — we render a custom icon-link instead */
.shelly-header__utils .wp-block-loginout { display: none !important; }

/* Country selector injected by shelly-mena next to .shelly-header__logo */
.shelly-header__logo-group > *:not(.shelly-header__logo) {
	display: inline-flex;
	align-items: center;
}

/* Persistent "Shop Products" CTA: the direct lane for people who already know what they need */
.shelly-header__shop {
	padding: 0 20px;
	font: 700 14px/1 'Manrope', sans-serif;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: #FFFFFF !important;
	background: #121212;
	border: 1px solid #121212;
	transition: background var(--shelly-transition), border-color var(--shelly-transition);
}
.shelly-header__shop:hover,
.shelly-header__shop:focus-visible { background: #2481C7; border-color: #4594D1; }

/* Responsive shrinks */
@media (max-width: 1199px) {
	.shelly-header__inner { gap: 16px; }
	.shelly-header__utils { gap: 10px; }
	.shelly-header__shop { padding: 0 14px; font-size: 13px; }
	.shelly-header__search:hover .wp-block-search__input,
	.shelly-header__utils .wp-block-search__inside-wrapper:focus-within .wp-block-search__input {
		width: 150px; min-width: 150px;
	}
}
@media (max-width: 989px) {
	.shelly-header__inner {
		grid-template-columns: auto 1fr auto;
		gap: 12px;
		min-height: var(--shelly-header-h-mobile);
		padding: 0 var(--shelly-pad-x-mobile);
	}
	.shelly-header__lead { justify-self: start; }
	.shelly-header__burger { display: flex; }
	.shelly-header__logo-group { justify-self: start; }
	.shelly-header__nav { display: none; }
	.shelly-header__utils .wp-block-search { display: none; }
	.shelly-header__search { display: none !important; }
	/* Account + wishlist move to the drawer so the Shop CTA always fits */
	.shelly-header__icon--secondary { display: none !important; }
	.shelly-header__shop { height: 36px !important; padding: 0 14px; font-size: 13px; }
}

/* ============================================================
 * Footer — deep navy gradient with newsletter + payments
 * ========================================================== */
.shelly-footer {
	position: relative;
	background:
		radial-gradient(ellipse 50% 40% at 15% 0%, rgba(69, 148, 209, 0.18) 0%, rgba(69, 148, 209, 0) 70%),
		radial-gradient(ellipse 60% 50% at 90% 100%, rgba(69, 148, 209, 0.2) 0%, rgba(69, 148, 209, 0) 70%),
		linear-gradient(180deg, #070808 0%, #0B1419 50%, #0B1419 100%);
	color: #C7CED8;
	padding: 100px 0 0;
	border-top: 1px solid rgba(69, 148, 209, 0.1);
	overflow: hidden;
	border-radius: 0;
}
.shelly-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(135deg, transparent 0 80px, rgba(255,255,255,0.015) 80px 81px);
	pointer-events: none;
}
.shelly-footer__glow {
	position: absolute;
	top: -120px;
	right: -120px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(69, 148, 209, 0.16) 0%, rgba(69, 148, 209, 0) 60%);
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
}
.shelly-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x) 80px;
	display: grid;
	grid-template-columns: minmax(320px, 1.3fr) 3fr;
	gap: 80px;
}

/* Brand column */
.shelly-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.shelly-footer__logo {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	width: max-content;
	padding: 16px 20px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: var(--shelly-radius-lg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
	transition: transform var(--shelly-transition), box-shadow var(--shelly-transition);
}
.shelly-footer__logo:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}
.shelly-footer__logo-img {
	display: block;
	height: 56px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
}
.shelly-footer__blurb {
	font: 400 14px/1.7 'Manrope', sans-serif;
	color: #C7CED8;
	max-width: 40ch;
	margin: 0;
}

/* Newsletter signup */
.shelly-footer__newsletter {
	padding: 24px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(69, 148, 209, 0.18);
	border-radius: var(--shelly-radius-lg);
	backdrop-filter: blur(6px);
}
.shelly-footer__newsletter-label {
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 12px;
}
.shelly-footer__newsletter-form {
	display: flex;
	gap: 0;
	margin-bottom: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--shelly-radius-pill);
	overflow: hidden;
	padding: 4px 4px 4px 16px;
	align-items: center;
	transition: border-color var(--shelly-transition);
}
.shelly-footer__newsletter-form:focus-within { border-color: rgba(69, 148, 209, 0.6); }
.shelly-footer__newsletter-form input {
	flex: 1 1 auto;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	color: #FDFDFD !important;
	height: 36px !important;
	padding: 0 !important;
	font: 400 14px/1 'Manrope', sans-serif !important;
	min-width: 0;
}
.shelly-footer__newsletter-form input::placeholder { color: #929292; }
.shelly-footer__newsletter-form button {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%);
	border: none;
	color: #FFFFFF;
	font: 700 16px/1 'Manrope', sans-serif;
	border-radius: var(--shelly-radius-pill);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--shelly-transition);
}
.shelly-footer__newsletter-form button:hover { transform: translateX(2px); }
.shelly-footer__newsletter-note {
	font: 400 12px/1.4 'Manrope', sans-serif;
	color: #929292;
	margin: 0;
}

/* Social icons */
.shelly-footer__social {
	display: flex;
	gap: 10px;
}
.shelly-footer__social a {
	width: 40px;
	height: 40px;
	border-radius: var(--shelly-radius-pill);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #C7CED8;
	font: 700 13px/1 'Manrope', sans-serif;
	text-decoration: none;
	transition: background var(--shelly-transition), border-color var(--shelly-transition), color var(--shelly-transition), transform var(--shelly-transition);
}
.shelly-footer__social a:hover {
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%);
	border-color: transparent;
	color: #FFFFFF;
	transform: translateY(-2px);
}

/* Link columns */
.shelly-footer__cols {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 48px;
}
.shelly-footer__col h4 {
	font: 700 12px/1.4 'Manrope', sans-serif;
	color: #FDFDFD;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(69, 148, 209, 0.2);
	position: relative;
}
.shelly-footer__col h4::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 24px;
	height: 1px;
	background: linear-gradient(90deg, #4594D1 0%, #4594D1 100%);
}
.shelly-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.shelly-footer__col li {
	font: 400 14px/1.4 'Manrope', sans-serif;
	color: #C7CED8;
}
.shelly-footer__col a {
	color: #C7CED8;
	text-decoration: none;
	transition: color var(--shelly-transition), padding-left var(--shelly-transition);
	display: inline-block;
}
.shelly-footer__col a:hover {
	color: #4594D1;
	padding-left: 6px;
}

/* Bottom bar */
.shelly-footer__bottom {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.2);
}
.shelly-footer__bottom-inner {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 28px var(--shelly-pad-x);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	align-items: center;
	font: 400 12px/1.4 'Manrope', sans-serif;
	color: #929292;
}
.shelly-footer__copyright { margin: 0; text-align: center; }
.shelly-footer__powered { margin: 0; text-align: center; }
.shelly-footer__powered a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, 0.25); }
.shelly-footer__powered a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }
.shelly-footer__payments {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.shelly-footer__payments span {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--shelly-radius-sm);
	font: 700 10px/1 'Manrope', sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #C7CED8;
	transition: background var(--shelly-transition), border-color var(--shelly-transition);
}
.shelly-footer__payments span:hover {
	background: rgba(69, 148, 209, 0.12);
	border-color: rgba(69, 148, 209, 0.4);
}

@media (max-width: 1199px) {
	.shelly-footer__inner { grid-template-columns: 1fr; gap: 48px; padding-bottom: 64px; }
	.shelly-footer__cols { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (max-width: 989px) {
	.shelly-footer { padding-top: 64px; }
	.shelly-footer__inner { padding: 0 var(--shelly-pad-x-mobile) 48px; }
	.shelly-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
	.shelly-footer__glow { width: 400px; height: 400px; top: -80px; right: -80px; }
	.shelly-footer__bottom-inner {
		padding: 24px var(--shelly-pad-x-mobile);
	}
}
@media (max-width: 539px) {
	.shelly-footer__cols { grid-template-columns: 1fr; }
}

/* ---------- Hero sections ---------- */
.shelly-hero {
	position: relative;
	min-height: 560px;
	padding: 120px var(--shelly-pad-x);
	display: flex;
	align-items: center;
	background: #F3F3F3;
}
.shelly-hero--brand-blue { background: #2481C7; color: #FDFDFD; }
.shelly-hero--brand-blue * { color: inherit; }
.shelly-hero--black { background: #121212; color: #FDFDFD; }
.shelly-hero--black * { color: inherit; }
.shelly-hero__inner { max-width: var(--shelly-page-max); margin-inline: auto; width: 100%; }
.shelly-hero__eyebrow {
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 16px;
	display: block;
}
.shelly-hero--brand-blue .shelly-hero__eyebrow,
.shelly-hero--black .shelly-hero__eyebrow { color: #FDFDFD; }
.shelly-hero__title {
	font: 400 62px/1.1 'Manrope', sans-serif;
	margin: 0 0 24px;
	max-width: 16ch;
}
.shelly-hero__lead {
	font: 400 18px/1.6 'Manrope', sans-serif;
	margin: 0 0 32px;
	max-width: 56ch;
}
.shelly-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.shelly-hero--split { padding: 80px var(--shelly-pad-x); min-height: 480px; }
.shelly-hero--split .shelly-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.shelly-hero--split img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 989px) {
	.shelly-hero { padding: 64px var(--shelly-pad-x-mobile); min-height: 0; }
	.shelly-hero__title { font-size: 40px; }
	.shelly-hero--split .shelly-hero__inner { grid-template-columns: 1fr; }
}

/* ---------- Trust bar (icons row) ---------- */
.shelly-trustbar {
	border-top: 1px solid rgba(18,18,18,0.08);
	border-bottom: 1px solid rgba(18,18,18,0.08);
	background: #FFFFFF;
	padding: 32px var(--shelly-pad-x);
}
.shelly-trustbar__grid {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.shelly-trustbar__item {
	display: flex;
	align-items: center;
	gap: 16px;
}
.shelly-trustbar__item strong {
	display: block;
	font: 700 14px/1.3 'Manrope', sans-serif;
	color: #121212;
	margin-bottom: 2px;
}
.shelly-trustbar__item span {
	display: block;
	font: 400 13px/1.4 'Manrope', sans-serif;
	color: #656669;
}
.shelly-trustbar__icon {
	width: 40px;
	height: 40px;
	border: 1px solid #121212;
	border-radius: var(--shelly-radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 16px/1 'Manrope', sans-serif;
	flex: 0 0 auto;
}
@media (max-width: 989px) { .shelly-trustbar__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 749px) { .shelly-trustbar__grid { grid-template-columns: 1fr; } }

/* ---------- Category section (section-level wrapper only) ---------- */
.shelly-categories {
	position: relative;
	padding: 120px 0;
	background:
		radial-gradient(ellipse 55% 45% at 12% 5%, rgba(69, 148, 209, 0.12) 0%, rgba(69, 148, 209, 0) 65%),
		radial-gradient(ellipse 50% 50% at 92% 95%, rgba(69, 148, 209, 0.12) 0%, rgba(69, 148, 209, 0) 65%),
		linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 60%, #F0F4F7 100%);
	border-top: 1px solid rgba(69, 148, 209, 0.08);
	border-bottom: 1px solid rgba(69, 148, 209, 0.08);
	overflow: hidden;
}
.shelly-categories__glow {
	position: absolute;
	top: -180px;
	left: -120px;
	width: 640px;
	height: 640px;
	background: radial-gradient(circle, rgba(69, 148, 209, 0.18) 0%, rgba(69, 148, 209, 0) 60%);
	filter: blur(80px);
	pointer-events: none;
	z-index: 0;
}
.shelly-categories__inner {
	position: relative;
	z-index: 1;
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}

/* ---------- Product cards: equal height + bottom-aligned buttons ----------
 * Uniform card sizing: each card is a flex column that stretches to the
 * tallest row height, title reserves two lines, price reserves one line,
 * and the Add to Cart button is pinned to the bottom via margin-top: auto.
 * ---------------------------------------------------------------------- */

.woocommerce ul.products,
.wc-block-grid__products,
.wp-block-woocommerce-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--shelly-gutter) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: stretch !important;
}
@media (max-width: 1199px) { .woocommerce ul.products, .wc-block-grid__products, .wp-block-woocommerce-product-template { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 989px)  { .woocommerce ul.products, .wc-block-grid__products, .wp-block-woocommerce-product-template { grid-template-columns: repeat(2, 1fr) !important; gap: var(--shelly-gutter-mobile) !important; } }

/* Card shell — classic Woo + Woo Blocks product-template */
.woocommerce ul.products li.product,
.wp-block-woocommerce-product-template .wc-block-product,
.wp-block-woocommerce-product-template .wp-block-post,
.wp-block-woocommerce-product-template > li {
	background: #FFFFFF;
	border: 1px solid rgba(69, 148, 209, 0.08);
	border-radius: var(--shelly-radius-lg);
	padding: 20px 20px 24px !important;
	text-align: left;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	list-style: none;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	min-height: 0;
	position: relative;
	transition: border-color var(--shelly-transition), box-shadow var(--shelly-transition), transform var(--shelly-transition);
	box-shadow: 0 2px 16px rgba(69, 148, 209, 0.04);
}
.woocommerce ul.products li.product:hover,
.wp-block-woocommerce-product-template .wc-block-product:hover,
.wp-block-woocommerce-product-template .wp-block-post:hover,
.wp-block-woocommerce-product-template > li:hover {
	border-color: rgba(69, 148, 209, 0.3);
	box-shadow: 0 16px 48px rgba(69, 148, 209, 0.14), 0 4px 16px rgba(69, 148, 209, 0.08);
	transform: translateY(-3px);
}
.woocommerce ul.products li.product a,
.wp-block-woocommerce-product-template a { color: #121212; }

/* Image — fixed 1:1 aspect, contain fit, sits at top */
.woocommerce ul.products li.product img,
.wp-block-woocommerce-product-template img,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img {
	border-radius: var(--shelly-radius-md) !important;
	margin: 0 0 16px !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #FFFFFF;
	width: 100% !important;
	height: auto !important;
	transition: opacity var(--shelly-transition);
}
.woocommerce ul.products li.product:hover img,
.wp-block-woocommerce-product-template .wc-block-product:hover img { opacity: 0.9; }

/* Title — reserves 2 lines so short titles don't collapse the layout */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wp-block-woocommerce-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wc-block-components-product-title {
	font: 400 16px/1.4 'Manrope', sans-serif !important;
	color: #121212 !important;
	padding: 0 !important;
	margin: 0 0 8px !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(16px * 1.4 * 2);
}
.wp-block-woocommerce-product-template .wp-block-post-title a,
.wp-block-woocommerce-product-template .wc-block-components-product-title a { color: #121212; }

/* Price — reserves one line */
.woocommerce ul.products li.product .price,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-template .wc-block-components-product-price {
	font: 700 17px/1.4 'Manrope', sans-serif !important;
	color: #121212 !important;
	margin: 0 0 16px !important;
	min-height: calc(17px * 1.4);
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.woocommerce ul.products li.product .price del,
.wp-block-woocommerce-product-template .wc-block-components-product-price del { color: #929292; font-weight: 400; font-size: 14px; }
.woocommerce ul.products li.product .price ins,
.wp-block-woocommerce-product-template .wc-block-components-product-price ins { text-decoration: none; color: #D1223E; }

/* Rating — optional, sits above the button */
.wp-block-woocommerce-product-template .wc-block-components-product-rating {
	margin: 0 0 12px !important;
	min-height: 20px;
}

/* Button row pushed to the bottom of the card */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button,
.wp-block-woocommerce-product-template .wp-block-button {
	display: block !important;
	width: 100% !important;
	margin: auto 0 0 !important;
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button .wp-block-button__link,
.wp-block-woocommerce-product-template .wp-block-button .wp-block-button__link,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	padding: 14px 20px !important;
	font: 700 13px/1 'Manrope', sans-serif !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}

/* Sale badge sits absolutely over the image area */
.woocommerce ul.products li.product,
.wp-block-woocommerce-product-template > li { position: relative; }
.woocommerce span.onsale {
	background: #D1223E;
	color: #FFFFFF;
	border-radius: var(--shelly-radius-pill);
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 8px;
	min-height: auto;
	min-width: auto;
	left: 8px;
	top: 8px;
	margin: 0;
}

/* ---------- Buttons (everywhere) ---------- */
.wp-block-button__link,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce input[type="submit"],
.wc-block-components-button.wc-block-components-button--variant-contained {
	background: #121212 !important;
	color: #FFFFFF !important;
	border: 1px solid #121212 !important;
	padding: 16px 32px !important;
	font: 700 15px/1 'Manrope', sans-serif !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	transition: background var(--shelly-transition), color var(--shelly-transition) !important;
	box-shadow: none !important;
	border-radius: var(--shelly-radius-md) !important;
}
.wp-block-button__link:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.wc-block-components-button.wc-block-components-button--variant-contained:hover {
	background: #FFFFFF !important;
	color: #121212 !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button {
	background: #121212 !important;
	color: #FFFFFF !important;
	border-color: #121212 !important;
}
.is-style-shelly-outline > .wp-block-button__link,
.wp-block-button.is-style-shelly-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: #121212 !important;
	border: 1px solid #121212 !important;
}
.is-style-shelly-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-shelly-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #121212 !important;
	color: #FFFFFF !important;
}
.is-style-shelly-inverse > .wp-block-button__link,
.wp-block-button.is-style-shelly-inverse .wp-block-button__link {
	background: #FFFFFF !important;
	color: #121212 !important;
	border: 1px solid #FFFFFF !important;
}
.is-style-shelly-inverse > .wp-block-button__link:hover,
.wp-block-button.is-style-shelly-inverse .wp-block-button__link:hover {
	background: transparent !important;
	color: #FFFFFF !important;
}

/* ---------- Inputs ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	background: #FFFFFF;
	border: 1px solid rgba(18, 18, 18, 0.55);
	color: #121212;
	font: 400 16px/1 'Manrope', sans-serif;
	padding: 0 16px;
	height: 48px;
	border-radius: var(--shelly-radius-md);
}
textarea { height: auto; padding: 12px 16px; min-height: 120px; }
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: #121212;
	box-shadow: inset 0 0 0 1px #121212;
}
.wp-block-search__input { border: 1px solid #121212 !important; height: 48px !important; padding: 0 16px !important; }
.wp-block-search__button { background: #121212 !important; color: #FFFFFF !important; border: 1px solid #121212 !important; padding: 0 24px !important; height: 48px !important; }

/* ============================================================
 * Product single page — full-bleed hero + spec card grid.
 * Two sections only: .shelly-pdp-hero (gallery + summary) and
 * .shelly-pdp-specs (parsed-category card grid). Utilizes the
 * entire 1600px canvas with decorative watermark typography.
 * ========================================================== */

.shelly-product { padding: 0; }

/* ---------- Hero: full-bleed top section ---------- */
.shelly-pdp-hero {
	position: relative;
	background: linear-gradient(180deg, #F3F3F3 0%, #FAFAFA 65%, #FFFFFF 100%);
	padding: 0 0 120px;
	overflow: hidden;
	border-bottom: 1px solid rgba(18,18,18,0.05);
}
.shelly-pdp-hero__watermark {
	position: absolute;
	top: 24px;
	right: -24px;
	font: 700 260px/0.85 'Manrope', sans-serif;
	color: rgba(18,18,18,0.025);
	letter-spacing: -0.05em;
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
}
.shelly-pdp-hero__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
	position: relative;
	z-index: 1;
}
.shelly-pdp-hero__breadcrumbs.wc-block-breadcrumbs,
.shelly-pdp-hero .wc-block-breadcrumbs {
	padding: 32px 0 32px;
	font: 400 13px/1 'Manrope', sans-serif;
	color: #656669;
	max-width: none;
	margin: 0;
}
.shelly-pdp-hero .wc-block-breadcrumbs a { color: #656669; }
.shelly-pdp-hero .wc-block-breadcrumbs a:hover { color: #121212; }

.shelly-pdp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 58%) minmax(0, 42%);
	gap: 80px;
	align-items: start;
	padding: 32px 0 0;
}

/* Hero gallery card */
.shelly-pdp-hero__gallery {
	position: sticky;
	top: calc(var(--shelly-header-h) + var(--shelly-announcement-h) + 24px);
	background: #FFFFFF;
	border: 1px solid rgba(18,18,18,0.06);
	padding: 48px;
	margin: 0 !important;
	box-shadow: 0 1px 0 rgba(18,18,18,0.03);
}
.shelly-pdp-hero__gallery-tag {
	position: absolute;
	top: 24px;
	left: 24px;
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #121212;
	z-index: 2;
	pointer-events: none;
}
.shelly-pdp-hero__gallery-tag span {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid #121212;
	background: #FFFFFF;
}
.shelly-pdp-hero__gallery .wc-block-components-product-image-gallery,
.shelly-pdp-hero__gallery .woocommerce-product-gallery {
	background: transparent;
	border: none;
	padding: 0;
}
.shelly-pdp-hero__gallery img,
.shelly-pdp-hero__gallery .wp-post-image {
	border-radius: var(--shelly-radius-md) !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
	background: transparent;
}
.shelly-pdp-hero__gallery .flex-control-thumbs {
	display: flex !important;
	gap: 12px;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.shelly-pdp-hero__gallery .flex-control-thumbs li {
	flex: 0 0 88px;
	width: 88px !important;
	margin: 0 !important;
}
.shelly-pdp-hero__gallery .flex-control-thumbs img {
	border: 1px solid rgba(18,18,18,0.08);
	padding: 6px;
	background: #FFFFFF;
	transition: border-color var(--shelly-transition);
	cursor: pointer;
}
.shelly-pdp-hero__gallery .flex-control-thumbs img:hover,
.shelly-pdp-hero__gallery .flex-control-thumbs img.flex-active { border-color: #121212; }

/* Hero summary column */
.shelly-pdp-hero__summary {
	margin: 0 !important;
	padding: 16px 0 0 !important;
	display: flex;
	flex-direction: column;
}

.shelly-pdp-summary__eyebrow-row {
	border-bottom: 1px solid rgba(18,18,18,0.08);
	padding-bottom: 14px;
	margin-bottom: 20px !important;
	align-items: center;
	flex-wrap: wrap !important;
	gap: 8px !important;
	row-gap: 4px !important;
}
.shelly-pdp-summary__eyebrow-row .shelly-eyebrow {
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4594D1;
}
.shelly-pdp-summary__eyebrow-row .wc-block-components-product-sku {
	font: 400 12px/1 'Manrope', sans-serif !important;
	color: #929292 !important;
	letter-spacing: 0.04em;
}

.shelly-pdp-summary__title.wp-block-post-title {
	font: 400 56px/1.05 'Manrope', sans-serif !important;
	color: #121212;
	margin: 16px 0 16px !important;
	letter-spacing: -0.01em;
}

.shelly-pdp-summary__price,
.shelly-pdp-summary__price.wc-block-components-product-price,
.shelly-pdp-hero__summary .wc-block-components-product-price {
	font: 700 40px/1.2 'Manrope', sans-serif !important;
	color: #121212 !important;
	margin: 8px 0 20px !important;
	display: block;
	letter-spacing: -0.01em;
}
.shelly-pdp-hero__summary .wc-block-components-product-price del {
	color: #929292 !important;
	font-weight: 400 !important;
	font-size: 24px !important;
	margin-right: 12px;
}
.shelly-pdp-hero__summary .wc-block-components-product-price ins {
	text-decoration: none !important;
	color: #D1223E !important;
}

.shelly-pdp-warranty {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 1px solid #121212;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #121212;
	background: #FFFFFF;
	margin: 0 0 24px;
}
.shelly-pdp-warranty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: #4594D1;
	color: #FFFFFF;
	font: 700 13px/1 'Manrope', sans-serif;
}

.shelly-pdp-summary__excerpt {
	font: 400 16px/1.6 'Manrope', sans-serif !important;
	color: #3A3F4B !important;
	margin: 0 0 24px !important;
	padding: 0;
	border: none;
	max-width: 560px;
}

.shelly-pdp-stock {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 700 12px/1 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #11BA4B;
	margin: 0 0 20px;
	padding: 10px 16px;
	background: rgba(22, 163, 74, 0.08);
	border: 1px solid rgba(22, 163, 74, 0.2);
}
.shelly-pdp-stock__dot {
	width: 8px;
	height: 8px;
	background: #11BA4B;
	border-radius: 50%;
	display: inline-block;
	animation: shelly-pulse 2s ease-in-out infinite;
}
@keyframes shelly-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
	.shelly-pdp-stock__dot { animation: none; }
}

/* Buy box */
.shelly-pdp-buy {
	margin: 0 0 16px !important;
	padding: 32px;
	background: #FFFFFF;
	border: 1px solid rgba(18,18,18,0.08);
	box-shadow: 0 1px 0 rgba(18,18,18,0.03);
}
.shelly-pdp-buy > * { margin: 0; }
.shelly-pdp-buy form.cart,
.shelly-pdp-buy .wp-block-woocommerce-add-to-cart-form form.cart,
.shelly-pdp-buy .wp-block-woocommerce-add-to-cart-form .variations_button {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	grid-template-columns: none !important;
	grid-auto-flow: unset !important;
	width: 100% !important;
	align-items: stretch !important;
}
.shelly-pdp-buy table.variations {
	border: none !important;
	margin: 0 !important;
	width: 100%;
}
.shelly-pdp-buy table.variations td,
.shelly-pdp-buy table.variations th {
	padding: 8px 0 !important;
	border: none !important;
	background: transparent !important;
}
.shelly-pdp-buy table.variations label {
	font: 700 12px/1.4 'Manrope', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.shelly-pdp-buy .reset_variations {
	font: 400 12px/1 'Manrope', sans-serif;
	color: #929292;
	display: inline-block;
	margin-top: 8px;
}
.shelly-pdp-buy .woocommerce-variation-price {
	font: 700 20px/1.3 'Manrope', sans-serif;
	margin: 8px 0 !important;
}
.shelly-pdp-buy .woocommerce-variation-availability {
	font: 400 13px/1.4 'Manrope', sans-serif;
	color: #11BA4B;
	margin: 0 0 8px !important;
}
.shelly-pdp-buy div.quantity,
.shelly-pdp-buy .wqpmb_quantity,
.shelly-pdp-buy .qib-button-wrapper {
	display: inline-flex !important;
	align-items: stretch !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-height: 60px;
	background: #FFFFFF;
	border: 1px solid #121212;
	padding: 0 !important;
	margin: 0 !important;
	grid-column: auto !important;
	order: 1 !important;
	align-self: flex-start;
}
.shelly-pdp-buy div.quantity input.qty,
.shelly-pdp-buy .wqpmb_quantity input.qty {
	height: 60px !important;
	width: 72px !important;
	text-align: center !important;
	border: none !important;
	background: transparent !important;
	color: #121212 !important;
	font: 700 18px/1 'Manrope', sans-serif !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	min-width: 0 !important;
	-moz-appearance: textfield !important;
}
.shelly-pdp-buy div.quantity input.qty::-webkit-inner-spin-button,
.shelly-pdp-buy div.quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.shelly-pdp-buy .wqpmb_button,
.shelly-pdp-buy .qib-button {
	width: 48px !important;
	height: 60px !important;
	background: #FFFFFF !important;
	border: none !important;
	border-left: 1px solid rgba(18,18,18,0.1) !important;
	color: #121212 !important;
	font: 400 22px/1 'Manrope', sans-serif !important;
	cursor: pointer;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--shelly-transition);
}
.shelly-pdp-buy .wqpmb_button:first-child,
.shelly-pdp-buy .qib-button-minus {
	border-left: none !important;
	border-right: 1px solid rgba(18,18,18,0.1) !important;
	order: -1;
}
.shelly-pdp-buy .wqpmb_button:hover,
.shelly-pdp-buy .qib-button:hover { background: #121212 !important; color: #FFFFFF !important; }
.shelly-pdp-buy .single_add_to_cart_button,
.shelly-pdp-buy button.single_add_to_cart_button {
	grid-column: unset !important;
	justify-self: stretch !important;
	display: block !important;
	width: 100% !important;
	min-height: 60px !important;
	padding: 20px 32px !important;
	background: #121212 !important;
	color: #FFFFFF !important;
	border: 1px solid #121212 !important;
	border-radius: var(--shelly-radius-md) !important;
	font: 700 15px/1 'Manrope', sans-serif !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	box-shadow: none !important;
	transition: background var(--shelly-transition), color var(--shelly-transition) !important;
	order: 2 !important;
	position: relative;
}
.shelly-pdp-buy .single_add_to_cart_button:hover { background: #FFFFFF !important; color: #121212 !important; }
.shelly-pdp-buy .stock {
	font: 700 12px/1 'Manrope', sans-serif;
	color: #11BA4B;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 !important;
	order: 0;
}
.shelly-pdp-buy .stock.out-of-stock { color: #D1223E; }
.shelly-pdp-buy .wp-block-woocommerce-add-to-cart-form,
.shelly-pdp-buy .wp-block-woocommerce-add-to-cart-form > * + * {
	margin: 0 !important;
	padding: 0 !important;
}

/* Secondary button + feature list + trust mini */
.shelly-pdp-secondary { margin: 0 0 32px !important; }
.shelly-pdp-secondary .wp-block-button__link {
	width: 100%;
	text-align: center;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.08em;
}

.shelly-pdp-features__list {
	list-style: none;
	padding: 28px 0;
	margin: 0 0 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 32px;
	border-top: 1px solid rgba(18,18,18,0.08);
	border-bottom: 1px solid rgba(18,18,18,0.08);
}
.shelly-pdp-features__list li {
	font: 400 14px/1.5 'Manrope', sans-serif;
	color: #121212;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.shelly-pdp-features__list li span[aria-hidden="true"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: #4594D1;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 11px/1 'Manrope', sans-serif;
	margin-top: 2px;
}

.shelly-pdp-trustmini {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	border: none;
}
.shelly-pdp-trustmini > div {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.shelly-pdp-trustmini > div > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.shelly-pdp-trustmini__icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border: 1px solid #121212;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 400 16px/1 'Manrope', sans-serif;
	color: #121212;
}
.shelly-pdp-trustmini strong {
	font: 700 13px/1.3 'Manrope', sans-serif;
	color: #121212;
}
.shelly-pdp-trustmini span:not(.shelly-pdp-trustmini__icon) {
	font: 400 12px/1.4 'Manrope', sans-serif;
	color: #656669;
}

/* ---------- Specs: full-bleed card grid ---------- */
.shelly-pdp-specs {
	position: relative;
	background: #FAFAFA;
	padding: 120px 0;
	overflow: hidden;
	border-top: 1px solid rgba(18,18,18,0.05);
}
.shelly-pdp-specs__watermark {
	position: absolute;
	bottom: -60px;
	left: -24px;
	font: 700 320px/0.85 'Manrope', sans-serif;
	color: rgba(18,18,18,0.025);
	letter-spacing: -0.05em;
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
}
.shelly-pdp-specs__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
	position: relative;
	z-index: 1;
}
.shelly-pdp-specs__head {
	max-width: 720px;
	margin-bottom: 64px;
}
.shelly-pdp-specs__head .shelly-eyebrow {
	display: block;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 12px;
}
.shelly-pdp-specs__head h2 {
	font: 400 56px/1.05 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}
.shelly-pdp-specs__lead {
	font: 400 17px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0;
	max-width: 56ch;
}
.shelly-pdp-specs__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--shelly-gutter);
}
.shelly-pdp-specs__card {
	background: #FFFFFF;
	border: 1px solid rgba(18,18,18,0.06);
	padding: 40px;
	display: flex;
	flex-direction: column;
	transition: border-color var(--shelly-transition), transform var(--shelly-transition);
	position: relative;
}
.shelly-pdp-specs__card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 3px;
	background: #121212;
	transition: width var(--shelly-transition), background var(--shelly-transition);
}
.shelly-pdp-specs__card:hover { border-color: #121212; }
.shelly-pdp-specs__card:hover::before { width: 100%; background: #4594D1; }
.shelly-pdp-specs__card-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(18,18,18,0.08);
}
.shelly-pdp-specs__number {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	color: #4594D1;
	flex: 0 0 auto;
}
.shelly-pdp-specs__card-head h3 {
	font: 400 26px/1.2 'Manrope', sans-serif;
	margin: 0;
	color: #121212;
	letter-spacing: -0.005em;
}
.shelly-pdp-specs__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.shelly-pdp-specs__list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(18,18,18,0.04);
	align-items: baseline;
}
.shelly-pdp-specs__list li:first-child { padding-top: 0; }
.shelly-pdp-specs__list li:last-child { border-bottom: none; padding-bottom: 0; }
.shelly-pdp-specs__label {
	font: 400 13px/1.5 'Manrope', sans-serif;
	color: #656669;
}
.shelly-pdp-specs__value {
	font: 700 13px/1.5 'Manrope', sans-serif;
	color: #121212;
	text-align: right;
	word-break: break-word;
}

/* ---------- Mobile ---------- */
@media (max-width: 989px) {
	.shelly-pdp-hero { padding: 0 0 64px; }
	.shelly-pdp-hero__watermark { font-size: 120px; top: 16px; right: -16px; }
	.shelly-pdp-hero__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-pdp-hero__breadcrumbs.wc-block-breadcrumbs,
	.shelly-pdp-hero .wc-block-breadcrumbs { padding: 20px 0 16px; }
	.shelly-pdp-hero__grid { grid-template-columns: 1fr; gap: 32px; padding: 16px 0 0; }
	.shelly-pdp-hero__gallery { position: static; padding: 24px; }
	.shelly-pdp-hero__gallery .flex-control-thumbs li { flex: 0 0 64px; width: 64px !important; }
	.shelly-pdp-hero__summary { padding: 0 !important; }
	.shelly-pdp-summary__title.wp-block-post-title { font-size: 36px !important; }
	.shelly-pdp-summary__price { font-size: 28px !important; }
	.shelly-pdp-features__list { grid-template-columns: 1fr; }
	.shelly-pdp-trustmini { grid-template-columns: 1fr; gap: 12px; }

	.shelly-pdp-specs { padding: 64px 0; }
	.shelly-pdp-specs__watermark { font-size: 160px; }
	.shelly-pdp-specs__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-pdp-specs__head { margin-bottom: 40px; }
	.shelly-pdp-specs__head h2 { font-size: 36px; }
	.shelly-pdp-specs__grid { grid-template-columns: 1fr; }
	.shelly-pdp-specs__card { padding: 28px; }
	.shelly-pdp-specs__card-head h3 { font-size: 22px; }
}

/* Legacy classic Woo overrides — only fire if the old .product wrapper shows up.
   Also excluded: .wp-block-group, because WC's block-theme path emits an OUTER
   `<div class="wp-block-group woocommerce product …">` around <main>, and the
   2-column grid below is wrong for that wrapper (it produces empty whitespace
   in the second column). This rule is only meaningful for the truly classic
   single-product template, not the block-theme one. */
body:not(.woocommerce-uses-block-theme) .woocommerce div.product:not(.wp-block-woocommerce-single-product):not(.shelly-product):not(.wp-block-group) {
	display: grid;
	grid-template-columns: 56% 1fr;
	gap: 64px;
	max-width: 1280px;
	margin-inline: auto;
	padding: 32px var(--shelly-pad-x) 80px;
}
.woocommerce div.product .images,
.woocommerce div.product .summary {
	margin: 0 !important;
	float: none !important;
	width: auto !important;
	padding: 0;
}
.woocommerce div.product .product_title {
	font: 400 40px/1.15 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 12px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font: 700 28px/1.3 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 24px;
}

/* Variation swatches — pill shape is the ONE exception (§16) */
.woo-variation-swatches .variable-items-wrapper .variable-item {
	border-radius: 40px !important;
	border: 1px solid #121212 !important;
	min-height: 44px;
	min-width: 44px;
	background: #FFFFFF !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item.selected {
	background: #121212 !important;
	color: #FFFFFF !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:hover {
	background: #F3F3F3 !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item.selected:hover {
	background: #121212 !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid rgba(18,18,18,0.1);
	padding: 0;
	margin: 48px 0 24px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: none !important;
	border-radius: var(--shelly-radius-md) !important;
	padding: 0 !important;
	margin: 0 32px 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font: 700 14px/1 'Manrope', sans-serif;
	padding: 16px 0;
	color: #929292;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: #121212;
	border-bottom: 2px solid #121212;
}
.woocommerce div.product .woocommerce-tabs .panel {
	padding: 24px 0;
	font: 400 16px/1.6 'Manrope', sans-serif;
}

/* Related products heading */
.woocommerce section.related > h2,
.woocommerce section.up-sells > h2 {
	font: 400 30px/1.2 'Manrope', sans-serif;
	margin: 80px 0 32px;
	padding: 0 var(--shelly-pad-x);
	max-width: var(--shelly-page-max);
	margin-left: auto;
	margin-right: auto;
}
.woocommerce section.related,
.woocommerce section.up-sells {
	padding: 0 var(--shelly-pad-x) 120px;
	max-width: var(--shelly-page-max);
	margin-inline: auto;
}

/* Trust bullets on PDP (outside of Woo) */
.shelly-pdp-trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(18,18,18,0.1);
}
.shelly-pdp-trust div {
	font: 400 13px/1.5 'Manrope', sans-serif;
	color: #121212;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.shelly-pdp-trust strong { font-weight: 700; }

/* Compatibility row */
.shelly-compat-row {
	padding: 48px var(--shelly-pad-x);
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	text-align: center;
}
.shelly-compat-row h3 {
	font: 700 12px/1.4 'Manrope', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #929292;
	margin: 0 0 24px;
}
.shelly-compat-row ul {
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 48px;
	flex-wrap: wrap;
	padding: 0;
}
.shelly-compat-row li {
	font: 700 15px/1 'Manrope', sans-serif;
	color: #121212;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid rgba(18,18,18,0.1);
}

@media (max-width: 989px) {
	.woocommerce section.related, .woocommerce section.up-sells { padding: 0 var(--shelly-pad-x-mobile) 64px; }
}

/* ---------- Cart / checkout / account ---------- */
.woocommerce table.shop_table {
	border: 1px solid rgba(18,18,18,0.1);
	border-radius: var(--shelly-radius-md);
	font: 400 14px/1.6 'Manrope', sans-serif;
}
.woocommerce table.shop_table th {
	font: 700 13px/1.4 'Manrope', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #121212;
	background: #F3F3F3;
	padding: 16px;
}
.woocommerce table.shop_table td { padding: 16px; border-top: 1px solid rgba(18,18,18,0.05); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	background: #F3F3F3;
	padding: 32px;
}
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce-error {
	background: #F3F3F3;
	border-top: 2px solid #121212;
	border-radius: var(--shelly-radius-md);
	color: #121212;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(18,18,18,0.1);
}
.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid rgba(18,18,18,0.05);
}
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 14px 16px;
	font: 400 14px/1 'Manrope', sans-serif;
}
.woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 700;
	background: #F3F3F3;
}

/* Payment method row — keep HyperPay logo visible */
.payment_method_hyperpay img,
.wc_payment_method img { max-height: 32px; width: auto; margin-left: 8px; display: inline-block; }
.woocommerce ul.payment_methods {
	padding: 0 !important;
	border: 1px solid rgba(18,18,18,0.1);
}
.woocommerce ul.payment_methods li {
	padding: 16px 20px !important;
	border-bottom: 1px solid rgba(18,18,18,0.05);
	list-style: none;
}
.woocommerce ul.payment_methods li:last-child { border-bottom: none; }

/* ---------- Feature grid / cards ---------- */
.shelly-features {
	padding: 120px var(--shelly-pad-x);
}
.shelly-features > * {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
}
.shelly-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--shelly-gutter);
	margin-top: 48px;
}
.shelly-features__item {
	text-align: left;
	padding: 32px;
	background: #FFFFFF;
	border: 1px solid rgba(18,18,18,0.05);
	transition: border-color var(--shelly-transition);
}
.shelly-features__item:hover { border-color: #121212; }
.shelly-features__item__icon {
	width: 48px;
	height: 48px;
	border: 1px solid #121212;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 20px/1 'Manrope', sans-serif;
	margin-bottom: 24px;
}
.shelly-features__item h3 {
	font: 400 24px/1.25 'Manrope', sans-serif;
	margin: 0 0 8px;
}
.shelly-features__item p {
	font: 400 16px/1.6 'Manrope', sans-serif;
	color: #121212;
	margin: 0;
}
@media (max-width: 989px) { .shelly-features__grid { grid-template-columns: 1fr; } .shelly-features { padding: 64px var(--shelly-pad-x-mobile); } }

/* ---------- Feature split (image + text) ---------- */
.shelly-split {
	padding: 120px var(--shelly-pad-x);
}
.shelly-split > * {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
}
.shelly-split__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	margin-bottom: 80px;
}
.shelly-split__row:last-child { margin-bottom: 0; }
.shelly-split__row--reverse > :first-child { order: 2; }
.shelly-split__content h2 {
	font: 400 40px/1.15 'Manrope', sans-serif;
	margin: 16px 0 16px;
}
.shelly-split__content p {
	font: 400 18px/1.6 'Manrope', sans-serif;
	margin: 0 0 24px;
}
.shelly-split__image {
	background: #F3F3F3;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}
@media (max-width: 989px) {
	.shelly-split { padding: 64px var(--shelly-pad-x-mobile); }
	.shelly-split__row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
	.shelly-split__row--reverse > :first-child { order: 0; }
	.shelly-split__content h2 { font-size: 30px; }
}

/* ---------- CTA band ---------- */
.shelly-cta {
	position: relative;
	background:
		radial-gradient(ellipse 50% 60% at 20% 100%, rgba(69, 148, 209, 0.3) 0%, rgba(69, 148, 209, 0) 60%),
		radial-gradient(ellipse 50% 60% at 80% 0%, rgba(69, 148, 209, 0.2) 0%, rgba(69, 148, 209, 0) 60%),
		linear-gradient(135deg, #004B83 0%, #4594D1 100%);
	color: #FFFFFF;
	padding: 100px var(--shelly-pad-x);
	text-align: center;
	overflow: hidden;
}
.shelly-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(135deg, transparent 0 60px, rgba(255, 255, 255, 0.02) 60px 61px);
	pointer-events: none;
}
.shelly-cta > * { position: relative; z-index: 1; }
.shelly-cta--brand-blue { background: #2481C7; }
.shelly-cta h2 {
	color: #FFFFFF;
	font: 400 40px/1.2 'Manrope', sans-serif;
	margin: 0 0 16px;
}
.shelly-cta p {
	color: #C7CED8;
	font: 400 18px/1.6 'Manrope', sans-serif;
	margin: 0 auto 32px;
	max-width: 48ch;
}
.shelly-cta--brand-blue p { color: #FDFDFD; }
.shelly-cta .wp-block-button__link {
	background: #FFFFFF !important;
	color: #121212 !important;
	border-color: #FFFFFF !important;
}
.shelly-cta .wp-block-button__link:hover {
	background: transparent !important;
	color: #FFFFFF !important;
}

/* ---------- Newsletter strip ---------- */
.shelly-newsletter {
	background: #F3F3F3;
	padding: 80px var(--shelly-pad-x);
	text-align: center;
}
.shelly-newsletter__inner { max-width: 800px; margin-inline: auto; }
.shelly-newsletter h2 {
	font: 400 30px/1.2 'Manrope', sans-serif;
	margin: 0 0 8px;
}
.shelly-newsletter p {
	font: 400 16px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0 0 24px;
}
.shelly-newsletter form {
	display: flex;
	gap: 0;
	max-width: 480px;
	margin-inline: auto;
}
.shelly-newsletter input[type="email"] { flex: 1 1 auto; height: 48px; }
.shelly-newsletter button { flex: 0 0 auto; }

/* ---------- Testimonial grid ---------- */
.shelly-testimonials {
	padding: 120px var(--shelly-pad-x);
}
.shelly-testimonials > * {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
}
.shelly-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--shelly-gutter);
	margin-top: 48px;
}
.shelly-testimonials__item {
	padding: 32px;
	border: 1px solid rgba(18,18,18,0.05);
	background: #FFFFFF;
}
.shelly-testimonials__item p {
	font: 400 16px/1.6 'Manrope', sans-serif;
	margin: 0 0 24px;
}
.shelly-testimonials__author {
	display: flex;
	align-items: center;
	gap: 12px;
}
.shelly-testimonials__author strong {
	font: 700 14px/1.3 'Manrope', sans-serif;
	display: block;
}
.shelly-testimonials__author span {
	font: 400 13px/1.3 'Manrope', sans-serif;
	color: #929292;
}
.shelly-testimonials__stars {
	color: #4594D1;
	font: 700 14px/1 'Manrope', sans-serif;
	letter-spacing: 2px;
	margin-bottom: 16px;
}
@media (max-width: 989px) {
	.shelly-testimonials__grid { grid-template-columns: 1fr; }
	.shelly-testimonials { padding: 64px var(--shelly-pad-x-mobile); }
}

/* ---------- FAQ accordion (details/summary based) ---------- */
.shelly-faq {
	padding: 120px var(--shelly-pad-x);
	max-width: 900px;
	margin-inline: auto;
}
.shelly-faq h2 {
	font: 400 40px/1.15 'Manrope', sans-serif;
	margin: 0 0 48px;
	text-align: center;
}
.shelly-faq details {
	border-bottom: 1px solid rgba(18,18,18,0.1);
	padding: 24px 0;
}
.shelly-faq details:first-of-type { border-top: 1px solid rgba(18,18,18,0.1); }
.shelly-faq summary {
	font: 700 18px/1.4 'Manrope', sans-serif;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
}
.shelly-faq summary::-webkit-details-marker { display: none; }
.shelly-faq summary::after {
	content: '+';
	font-weight: 400;
	font-size: 28px;
	color: #121212;
	transition: transform var(--shelly-transition);
}
.shelly-faq details[open] summary::after { content: '−'; }
.shelly-faq details p {
	font: 400 16px/1.6 'Manrope', sans-serif;
	color: #121212;
	margin: 16px 0 0;
}
@media (max-width: 989px) { .shelly-faq { padding: 64px var(--shelly-pad-x-mobile); } }

/* ---------- Breadcrumbs ---------- */
.shelly-breadcrumbs {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 24px var(--shelly-pad-x);
	font: 400 13px/1 'Manrope', sans-serif;
	color: #929292;
}
.shelly-breadcrumbs a { color: #929292; }
.shelly-breadcrumbs a:hover { color: #121212; }
.shelly-breadcrumbs .separator { margin: 0 8px; }
@media (max-width: 989px) { .shelly-breadcrumbs { padding: 16px var(--shelly-pad-x-mobile); } }

/* ---------- Shop sidebar (archive filters) ---------- */
.shelly-shop {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x) 120px;
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 48px;
}
.shelly-shop__sidebar h4 {
	font: 700 13px/1.4 'Manrope', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 32px 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(18,18,18,0.1);
}
.shelly-shop__sidebar h4:first-child { margin-top: 0; }
.shelly-shop__sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.shelly-shop__sidebar li { font: 400 14px/1.4 'Manrope', sans-serif; }
.shelly-shop__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	gap: 16px;
	flex-wrap: wrap;
}
.shelly-shop__count { font: 400 14px/1 'Manrope', sans-serif; color: #929292; }
@media (max-width: 989px) {
	.shelly-shop { grid-template-columns: 1fr; padding: 0 var(--shelly-pad-x-mobile) 64px; gap: 32px; }
}

/* ---------- Utilities / containers ---------- */
.shelly-container { max-width: var(--shelly-page-max); margin-inline: auto; padding-inline: var(--shelly-pad-x); }
.shelly-narrow { max-width: var(--shelly-content-max); margin-inline: auto; padding-inline: var(--shelly-pad-x); }
@media (max-width: 749px) { .shelly-container, .shelly-narrow { padding-inline: var(--shelly-pad-x-mobile); } }

.shelly-eyebrow {
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4594D1;
}
/* Full-bleed: parents have no horizontal padding (root padding is 0).
   Avoid 100vw + calc(50% - 50vw) — on iOS Safari the URL bar / scrollbar
   reserve makes 100vw differ from 100% by a few px, which shifts the
   section past the viewport edge and clips content on the left. */
.alignfull { width: 100%; max-width: 100%; margin-inline: 0; }
.alignwide { max-width: var(--shelly-page-max); margin-inline: auto; }

.wp-element-button { border-radius: var(--shelly-radius-md) !important; }

/* Group card style (selectable in editor) */
.wp-block-group.is-style-shelly-card {
	padding: 32px;
	border: 1px solid rgba(18,18,18,0.05);
	background: #FFFFFF;
	transition: border-color var(--shelly-transition);
}
.wp-block-group.is-style-shelly-card:hover { border-color: #121212; }
.wp-block-group.is-style-shelly-section-alt {
	background: #F3F3F3;
	padding: 80px var(--shelly-pad-x);
}

/* Kill pagination radius */
.wp-block-query-pagination .page-numbers {
	border: 1px solid rgba(18,18,18,0.1);
	padding: 8px 14px;
	font: 700 14px/1 'Manrope', sans-serif;
}
.wp-block-query-pagination .page-numbers.current { background: #121212; color: #FFFFFF; border-color: #121212; }

/* Scroll-reveal — IntersectionObserver-driven fade + rise */
.shelly-reveal {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition: opacity 600ms ease, transform 600ms ease;
	will-change: opacity, transform;
}
.shelly-reveal--in {
	opacity: 1;
	transform: none;
}
.shelly-no-motion .shelly-reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.shelly-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.wp-block-button__link, .woocommerce button.button, .woocommerce a.button, a { transition: none !important; }
}

/* ============================================================
 * Home page redesign — modern e-commerce layout.
 * Sections: home-hero · stats-band · (category-grid) · how-it-works
 * · flagship-showcase · ecosystem · (use-cases) · (testimonials)
 * · (cta-band) · (newsletter-strip)
 * ========================================================== */

/* ---------- Home hero ---------- */
.shelly-home-hero {
	position: relative;
	background:
		linear-gradient(90deg,
			rgba(240, 244, 247, 0.97) 0%,
			rgba(240, 244, 247, 0.96) 42%,
			rgba(240, 244, 247, 0.65) 65%,
			rgba(240, 244, 247, 0.30) 85%,
			rgba(240, 244, 247, 0.15) 100%),
		linear-gradient(180deg, rgba(240, 244, 247, 0.4) 0%, rgba(255, 255, 255, 0.5) 100%),
		url('/wp-content/uploads/HP-Use-Case-Smart-Lights-Automation.jpg') right center / auto 110% no-repeat;
	background-color: #F0F4F7;
	padding: 0 0 120px;
	overflow: hidden;
	border-bottom: 1px solid rgba(69, 148, 209, 0.08);
}
.shelly-home-hero::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(69, 148, 209, 0.24) 50%, transparent 100%);
	z-index: 2;
	pointer-events: none;
}
.shelly-home-hero__watermark { display: none; }
.shelly-home-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}
.shelly-home-hero__grid {
	display: grid;
	grid-template-columns: 55% 45%;
	gap: 80px;
	align-items: center;
	padding: 100px 0 0;
}
.shelly-home-hero__copy { max-width: 640px; }
.shelly-home-hero__copy .shelly-eyebrow {
	display: block;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 16px;
}
.shelly-home-hero__title {
	font: 400 62px/1.05 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 24px;
	letter-spacing: -0.01em;
	max-width: 14ch;
}
.shelly-home-hero__lead {
	font: 400 18px/1.6 'Manrope', sans-serif;
	color: #3A3F4B;
	margin: 0 0 32px;
	max-width: 52ch;
}
.shelly-home-hero__ctas {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.shelly-home-hero__ctas .wp-block-button:first-child .wp-block-button__link {
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%) !important;
	color: #FFFFFF !important;
	border: 1px solid transparent !important;
	box-shadow: 0 8px 24px rgba(69, 148, 209, 0.25) !important;
	transition: transform var(--shelly-transition), box-shadow var(--shelly-transition), background var(--shelly-transition) !important;
}
.shelly-home-hero__ctas .wp-block-button:first-child .wp-block-button__link:hover {
	background: linear-gradient(135deg, #004B83 0%, #4594D1 100%) !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(69, 148, 209, 0.35) !important;
}
.shelly-home-hero__ctas .wp-block-button.is-style-shelly-outline .wp-block-button__link {
	border-color: #4594D1 !important;
	color: #0361A7 !important;
}
.shelly-home-hero__ctas .wp-block-button.is-style-shelly-outline .wp-block-button__link:hover {
	background: #2481C7 !important;
	color: #FFFFFF !important;
	border-color: #4594D1 !important;
}
.shelly-home-hero__bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.shelly-home-hero__bullets li {
	font: 400 14px/1.5 'Manrope', sans-serif;
	color: #121212;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.shelly-home-hero__bullets li span[aria-hidden="true"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: #4594D1;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 11px/1 'Manrope', sans-serif;
	margin-top: 2px;
}

.shelly-home-hero__media {
	position: relative;
	background:
		radial-gradient(circle at 50% 60%, rgba(69, 148, 209, 0.12) 0%, rgba(69, 148, 209, 0) 60%),
		rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	padding: 48px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 30px 80px rgba(69, 148, 209, 0.12), 0 8px 24px rgba(69, 148, 209, 0.06);
}
.shelly-home-hero__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	width: auto;
	height: auto;
	position: relative;
	z-index: 1;
}
.shelly-home-hero__stock {
	position: absolute;
	top: 24px;
	right: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #FFFFFF;
	border: 1px solid rgba(18,18,18,0.1);
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #11BA4B;
	z-index: 2;
}
.shelly-home-hero__stock-dot {
	width: 8px;
	height: 8px;
	background: #11BA4B;
	border-radius: 50%;
	display: inline-block;
	animation: shelly-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.shelly-home-hero__stock-dot { animation: none; }
}

/* ---------- Stats band ---------- */
/* ---------- Animated divider band ---------- */
.shelly-divider-band {
	position: relative;
	height: 120px;
	background:
		radial-gradient(ellipse 70% 90% at 50% 100%, rgba(69, 148, 209, 0.28) 0%, rgba(69, 148, 209, 0) 60%),
		linear-gradient(135deg, #0B1419 0%, #004B83 45%, #4594D1 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

/* Floating mesh orbs */
.shelly-divider-band__orbs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	filter: blur(40px);
}
.shelly-divider-band__orb {
	position: absolute;
	border-radius: 50%;
	opacity: 0.6;
}
.shelly-divider-band__orb--a {
	left: 8%;
	top: -30%;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, #4594D1 0%, rgba(69, 148, 209, 0) 70%);
	animation: shelly-divider-drift 14s ease-in-out infinite;
}
.shelly-divider-band__orb--b {
	right: 15%;
	bottom: -40%;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle, #4594D1 0%, rgba(69, 148, 209, 0) 70%);
	animation: shelly-divider-drift 18s ease-in-out infinite reverse;
	animation-delay: -4s;
}
.shelly-divider-band__orb--c {
	left: 45%;
	top: -20%;
	width: 160px;
	height: 160px;
	background: radial-gradient(circle, #9CDBF6 0%, rgba(96, 165, 250, 0) 70%);
	animation: shelly-divider-drift 22s ease-in-out infinite;
	animation-delay: -9s;
}
@keyframes shelly-divider-drift {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(30px, -10px) scale(1.15); }
	66%      { transform: translate(-20px, 12px) scale(0.9); }
}

/* Horizontal scanning line */
.shelly-divider-band__scan {
	position: absolute;
	top: 0;
	left: -100%;
	width: 40%;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(69, 148, 209, 0.6) 40%, #4594D1 50%, rgba(69, 148, 209, 0.6) 60%, transparent 100%);
	animation: shelly-divider-scan 6s linear infinite;
	pointer-events: none;
}
@keyframes shelly-divider-scan {
	0%   { left: -40%; top: 30%; }
	50%  { left: 100%; top: 70%; }
	50.01% { left: -40%; top: 60%; }
	100% { left: 100%; top: 40%; }
}

/* Pulsing network nodes */
.shelly-divider-band__nodes {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.shelly-divider-band__nodes span {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(69, 148, 209, 0.5);
	box-shadow: 0 0 8px rgba(69, 148, 209, 0.4);
	animation: shelly-divider-pulse 3s ease-in-out infinite;
}
.shelly-divider-band__nodes span:nth-child(1)  { left:  5%; top: 30%; animation-delay: -0.2s; }
.shelly-divider-band__nodes span:nth-child(2)  { left: 12%; top: 65%; animation-delay: -1.4s; }
.shelly-divider-band__nodes span:nth-child(3)  { left: 20%; top: 40%; animation-delay: -0.8s; }
.shelly-divider-band__nodes span:nth-child(4)  { left: 28%; top: 75%; animation-delay: -2.1s; }
.shelly-divider-band__nodes span:nth-child(5)  { left: 36%; top: 25%; animation-delay: -0.5s; }
.shelly-divider-band__nodes span:nth-child(6)  { left: 44%; top: 55%; animation-delay: -1.8s; }
.shelly-divider-band__nodes span:nth-child(7)  { left: 52%; top: 35%; animation-delay: -1.0s; }
.shelly-divider-band__nodes span:nth-child(8)  { left: 60%; top: 70%; animation-delay: -2.5s; }
.shelly-divider-band__nodes span:nth-child(9)  { left: 68%; top: 45%; animation-delay: -0.3s; }
.shelly-divider-band__nodes span:nth-child(10) { left: 76%; top: 60%; animation-delay: -1.6s; }
.shelly-divider-band__nodes span:nth-child(11) { left: 84%; top: 30%; animation-delay: -2.2s; }
.shelly-divider-band__nodes span:nth-child(12) { left: 90%; top: 70%; animation-delay: -0.7s; }
.shelly-divider-band__nodes span:nth-child(13) { left: 16%; top: 20%; animation-delay: -1.2s; }
.shelly-divider-band__nodes span:nth-child(14) { left: 55%; top: 80%; animation-delay: -2.8s; }
.shelly-divider-band__nodes span:nth-child(15) { left: 95%; top: 50%; animation-delay: -0.9s; }
@keyframes shelly-divider-pulse {
	0%, 100% { transform: scale(1);   opacity: 0.4; box-shadow: 0 0 6px rgba(69, 148, 209, 0.3); }
	50%      { transform: scale(1.8); opacity: 1;   box-shadow: 0 0 16px rgba(69, 148, 209, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
	.shelly-divider-band__orb,
	.shelly-divider-band__scan,
	.shelly-divider-band__nodes span { animation: none; }
}

/* ---------- How it works ---------- */
.shelly-how {
	background: #FAFAFA;
	padding: 120px 0;
}
.shelly-how__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}
.shelly-how__head {
	max-width: 720px;
	margin-bottom: 80px;
}
.shelly-how__head .shelly-eyebrow {
	display: block;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 12px;
}
.shelly-how__head h2 {
	font: 400 48px/1.1 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}
.shelly-how__lead {
	font: 400 17px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0;
	max-width: 52ch;
}
.shelly-how__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
}
.shelly-how__step {
	background: #FFFFFF;
	border: 1px solid rgba(69, 148, 209, 0.08);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	transition: border-color var(--shelly-transition), box-shadow var(--shelly-transition), transform var(--shelly-transition);
	position: relative;
	box-shadow: 0 4px 24px rgba(69, 148, 209, 0.06);
}
.shelly-how__step:hover {
	border-color: rgba(69, 148, 209, 0.4);
	box-shadow: 0 20px 60px rgba(69, 148, 209, 0.15), 0 8px 24px rgba(69, 148, 209, 0.08);
	transform: translateY(-4px);
}
.shelly-how__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	margin: 0 0 28px;
	border: 1px solid rgba(69, 148, 209, 0.08);
}
.shelly-how__number {
	font: 400 120px/0.85 'Manrope', sans-serif;
	background: linear-gradient(135deg, #004B83 0%, #4594D1 40%, #4594D1 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: -0.04em;
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(69, 148, 209, 0.12);
}
.shelly-how__step h3 {
	font: 400 28px/1.2 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 12px;
	letter-spacing: -0.005em;
}
.shelly-how__step p {
	font: 400 15px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0 0 24px;
	flex: 1 1 auto;
}
.shelly-how__link {
	font: 700 13px/1 'Manrope', sans-serif;
	color: #121212;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 1px solid #121212;
	align-self: flex-start;
}
.shelly-how__link:hover { color: #4594D1; border-color: #4594D1; }

/* ---------- Flagship showcase ---------- */
.shelly-flagship {
	background:
		radial-gradient(ellipse 70% 80% at 20% 30%, rgba(69, 148, 209, 0.22) 0%, rgba(69, 148, 209, 0) 60%),
		radial-gradient(ellipse 60% 70% at 90% 80%, rgba(69, 148, 209, 0.25) 0%, rgba(69, 148, 209, 0) 65%),
		linear-gradient(135deg, #070808 0%, #004B83 50%, #0E4E96 100%);
	color: #FDFDFD;
	padding: 140px 0;
	position: relative;
	overflow: hidden;
}
.shelly-flagship::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(135deg, transparent 0 60px, rgba(255, 255, 255, 0.015) 60px 61px);
	pointer-events: none;
}
.shelly-flagship__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
	display: grid;
	grid-template-columns: 45% 55%;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.shelly-flagship__media {
	position: relative;
	background:
		radial-gradient(circle at 50% 55%, rgba(69, 148, 209, 0.25) 0%, rgba(69, 148, 209, 0) 60%),
		rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 56px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	box-shadow: 0 40px 100px rgba(7, 8, 8, 0.6), 0 12px 32px rgba(69, 148, 209, 0.12);
}
.shelly-flagship__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 20px 50px rgba(69, 148, 209, 0.35)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
	position: relative;
	z-index: 1;
}
.shelly-flagship__copy .shelly-eyebrow {
	display: block;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 16px;
}
.shelly-flagship__copy h2 {
	font: 400 56px/1.05 'Manrope', sans-serif;
	color: #FDFDFD;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
	max-width: 14ch;
}
.shelly-flagship__lead {
	font: 400 17px/1.6 'Manrope', sans-serif;
	color: #C7CED8;
	margin: 0 0 40px;
	max-width: 52ch;
}
.shelly-flagship__features {
	list-style: none;
	padding: 0 0 40px;
	margin: 0 0 40px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.shelly-flagship__features li {
	display: grid;
	grid-template-columns: 28px 140px 1fr;
	gap: 16px;
	font: 400 15px/1.5 'Manrope', sans-serif;
	color: #C7CED8;
	align-items: baseline;
}
.shelly-flagship__features li span[aria-hidden="true"] {
	width: 22px;
	height: 22px;
	background: #4594D1;
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 700 12px/1 'Manrope', sans-serif;
	align-self: center;
}
.shelly-flagship__features strong {
	font: 700 15px/1.3 'Manrope', sans-serif;
	color: #FDFDFD;
}

/* ---------- Ecosystem band ---------- */
.shelly-ecosystem {
	position: relative;
	background:
		radial-gradient(ellipse 60% 70% at 80% 20%, rgba(69, 148, 209, 0.18) 0%, rgba(69, 148, 209, 0) 60%),
		radial-gradient(ellipse 50% 60% at 10% 90%, rgba(69, 148, 209, 0.22) 0%, rgba(69, 148, 209, 0) 65%),
		linear-gradient(180deg, #070808 0%, #0B1419 50%, #0B1419 100%);
	color: #FDFDFD;
	padding: 140px 0;
	border-top: 1px solid rgba(69, 148, 209, 0.1);
	overflow: hidden;
}
.shelly-ecosystem::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, transparent 0 80px, rgba(255, 255, 255, 0.015) 80px 81px);
	pointer-events: none;
}
.shelly-ecosystem__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
	position: relative;
	z-index: 1;
}
.shelly-ecosystem__head {
	max-width: 720px;
	margin-bottom: 64px;
}
.shelly-ecosystem__head .shelly-eyebrow {
	display: block;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 12px;
}
.shelly-ecosystem__head h2 {
	font: 400 48px/1.1 'Manrope', sans-serif;
	color: #FDFDFD;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}
.shelly-ecosystem__head p {
	font: 400 16px/1.6 'Manrope', sans-serif;
	color: #C7CED8;
	margin: 0;
	max-width: 62ch;
}
.shelly-ecosystem__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--shelly-gutter);
}
.shelly-ecosystem__tile {
	background:
		radial-gradient(ellipse 100% 100% at 100% 0%, rgba(69, 148, 209, 0.1) 0%, rgba(69, 148, 209, 0) 60%),
		rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 40px;
	position: relative;
	transition: border-color var(--shelly-transition), transform var(--shelly-transition), background var(--shelly-transition), box-shadow var(--shelly-transition);
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(4px);
}
.shelly-ecosystem__tile:hover {
	border-color: rgba(69, 148, 209, 0.5);
	background:
		radial-gradient(ellipse 100% 100% at 100% 0%, rgba(69, 148, 209, 0.2) 0%, rgba(69, 148, 209, 0) 60%),
		rgba(255, 255, 255, 0.05);
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(69, 148, 209, 0.2);
}
.shelly-ecosystem__tile-label {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 20px;
}
.shelly-ecosystem__tile h3 {
	font: 400 24px/1.25 'Manrope', sans-serif;
	color: #FDFDFD;
	margin: 0 0 12px;
	letter-spacing: -0.005em;
}
.shelly-ecosystem__tile p {
	font: 400 14px/1.55 'Manrope', sans-serif;
	color: #929292;
	margin: 0 0 24px;
	flex: 1 1 auto;
}
.shelly-ecosystem__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255,255,255,0.3);
	font: 400 16px/1 'Manrope', sans-serif;
	color: #FDFDFD;
	transition: background var(--shelly-transition), color var(--shelly-transition), border-color var(--shelly-transition);
	align-self: flex-start;
}
.shelly-ecosystem__tile:hover .shelly-ecosystem__arrow {
	background: #4594D1;
	border-color: #4594D1;
	color: #FDFDFD;
}

/* ---------- Mobile ---------- */
@media (max-width: 989px) {
	.shelly-home-hero { padding: 0 0 64px; background-size: cover; background-position: center; }
	.shelly-home-hero__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-home-hero__grid { grid-template-columns: 1fr; gap: 40px; padding: 48px 0 0; }
	.shelly-home-hero__copy { max-width: 100%; }
	.shelly-home-hero__title { font-size: 40px; }
	.shelly-home-hero__lead { font-size: 16px; }
	.shelly-home-hero__media { padding: 24px; }

	.shelly-divider-band { height: 80px; }

	.shelly-how { padding: 64px 0; }
	.shelly-how__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-how__head { margin-bottom: 48px; }
	.shelly-how__head h2 { font-size: 32px; }
	.shelly-how__grid { grid-template-columns: 1fr; gap: 24px; }
	.shelly-how__step { padding: 32px 28px; }
	.shelly-how__number { font-size: 80px; }
	.shelly-how__step h3 { font-size: 24px; }

	.shelly-flagship { padding: 64px 0; }
	.shelly-flagship__inner { grid-template-columns: 1fr; gap: 40px; padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-flagship__media { padding: 24px; }
	.shelly-flagship__copy h2 { font-size: 36px; }
	.shelly-flagship__features li { grid-template-columns: 22px 1fr; gap: 12px; }
	.shelly-flagship__features li strong { grid-column: 2; }
	.shelly-flagship__features li:last-of-type:not(:has(strong)) { grid-template-columns: 22px 1fr; }

	.shelly-ecosystem { padding: 64px 0; }
	.shelly-ecosystem__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-ecosystem__head { margin-bottom: 40px; }
	.shelly-ecosystem__head h2 { font-size: 32px; }
	.shelly-ecosystem__grid { grid-template-columns: 1fr; }
	.shelly-ecosystem__tile { padding: 28px; }
}

/* ============================================================
 * Rounded corners — site-wide overrides.
 * Applies the radius scale to every card / surface / chip /
 * input so nothing renders as a sharp square.
 * ========================================================== */

/* Large cards (main surface radius) */
.shelly-features__item,
.shelly-testimonials__item,
.shelly-home-hero__media,
.shelly-how__step,
.shelly-flagship__media,
.shelly-ecosystem__tile,
.shelly-pdp-specs__card,
.shelly-pdp-hero__gallery,
.shelly-pdp-hero__gallery .wc-block-components-product-image-gallery,
.shelly-pdp-hero__gallery .woocommerce-product-gallery,
.shelly-pdp-buy,
.shelly-pdp-specs__table,
.shelly-pdp-support__image,
.shelly-pdp-repeat-buy__inner,
.shelly-shop__sidebar,
.is-style-shelly-card,
.wp-block-group.is-style-shelly-card {
	border-radius: var(--shelly-radius-lg);
}

/* Extra-large radius for hero / flagship media and the home hero gallery thumbs */
.shelly-home-hero__media {
	border-radius: var(--shelly-radius-xl);
}
.shelly-home-hero__media img,
.shelly-flagship__media img {
	border-radius: var(--shelly-radius-md);
}

/* Medium radius for images everywhere */
.wp-block-image img,
.wp-block-post-featured-image img,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product img,
.shelly-pdp-hero__gallery img,
.shelly-pdp-hero__gallery .wp-post-image,
.shelly-pdp-hero__gallery .flex-control-thumbs img {
	border-radius: var(--shelly-radius-md) !important;
}

/* Buttons and their variants */
.wp-block-button__link,
.wp-block-button .wp-block-button__link,
.wp-element-button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce input[type="submit"],
.wc-block-components-button,
.wc-block-components-button.wc-block-components-button--variant-contained,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.shelly-pdp-buy .single_add_to_cart_button,
.shelly-pdp-buy button.single_add_to_cart_button,
.shelly-how__link,
.shelly-pdp-app__btn,
.shelly-pdp-app__buttons .shelly-pdp-app__btn {
	border-radius: var(--shelly-radius-md) !important;
}

/* Small round chips / badges / pills */
.shelly-pdp-warranty,
.shelly-pdp-stock,
.shelly-eyebrow.shelly-pill,
.shelly-home-hero__stock,
.shelly-how__number,
.shelly-ecosystem__tile-label,
.shelly-pdp-summary__eyebrow-row,
.shelly-features__item__icon,
.shelly-pdp-trustmini__icon,
.shelly-pdp-features__list li span[aria-hidden="true"],
.shelly-home-hero__bullets li span[aria-hidden="true"],
.shelly-flagship__features li span[aria-hidden="true"],
.shelly-pdp-warranty__icon,
.wc-block-components-product-badge {
	border-radius: var(--shelly-radius-sm);
}

/* Circular / pill surfaces that should stay round */
.shelly-home-hero__stock-dot,
.shelly-pdp-stock__dot,
.shelly-ecosystem__arrow,
.shelly-trustbar__icon,
.wp-block-woocommerce-mini-cart__quantity-badge,
.shelly-header__utils .cart-count {
	border-radius: var(--shelly-radius-pill);
}

/* Forms / inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wp-block-search__input,
.wp-block-search__button,
.wp-block-search__inside-wrapper {
	border-radius: var(--shelly-radius-md) !important;
}

/* Tables, notices, sidebars, cart/checkout panels */
.woocommerce table.shop_table,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce-error,
.woocommerce ul.payment_methods,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review,
.woocommerce-MyAccount-navigation ul {
	border-radius: var(--shelly-radius-lg) !important;
	overflow: hidden;
}

/* Header search */
.shelly-header__utils .wp-block-search__inside-wrapper {
	border-radius: var(--shelly-radius-pill) !important;
	overflow: hidden;
}

/* Variation swatches (already pill-shaped, keep them) */
.woo-variation-swatches .variable-items-wrapper .variable-item {
	border-radius: var(--shelly-radius-pill) !important;
}

/* Quantity stepper wrappers */
.shelly-pdp-buy div.quantity,
.shelly-pdp-buy .wqpmb_quantity,
.shelly-pdp-buy .qib-button-wrapper {
	border-radius: var(--shelly-radius-md) !important;
	overflow: hidden;
}

/* Ecosystem tile hover still looks rounded */
.shelly-ecosystem__tile { overflow: hidden; }

/* Shop filter price slider handles */
.wc-block-price-filter__range-input-wrapper,
.wc-block-price-filter__range-input-progress { border-radius: var(--shelly-radius-pill) !important; }

/* Product gallery container */
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder {
	border-radius: var(--shelly-radius-md);
	overflow: hidden;
}

/* ============================================================
 * Home page v2 — trusted-by + bento categories + hero depth
 * ========================================================== */

/* ---------- Trusted-by logos strip ---------- */
.shelly-trusted {
	background: #FFFFFF;
	padding: 56px var(--shelly-pad-x);
	border-bottom: 1px solid rgba(69, 148, 209, 0.08);
	position: relative;
}
.shelly-trusted::before,
.shelly-trusted::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	pointer-events: none;
	z-index: 2;
}
.shelly-trusted::before { left: 0; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); }
.shelly-trusted::after { right: 0; background: linear-gradient(-90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); }
.shelly-trusted__inner {
	max-width: 1600px;
	margin-inline: auto;
}
.shelly-trusted__label {
	text-align: center;
	font: 700 11px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #929292;
	margin: 0 0 32px;
}
.shelly-trusted__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 32px;
	align-items: center;
}
.shelly-trusted__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px 24px;
	font: 700 15px/1 'Manrope', sans-serif;
	color: #656669;
	border-right: 1px solid rgba(69, 148, 209, 0.08);
	transition: color var(--shelly-transition), opacity var(--shelly-transition);
	letter-spacing: -0.005em;
}
.shelly-trusted__grid > .shelly-trusted__mark:last-child { border-right: none; }
.shelly-trusted__mark:hover { color: #121212; }
.shelly-trusted__logo {
	width: 26px;
	height: 26px;
	object-fit: contain;
	flex: 0 0 auto;
	display: block;
	transition: transform var(--shelly-transition);
}
.shelly-trusted__mark:hover .shelly-trusted__logo { transform: scale(1.08); }
@media (max-width: 1199px) {
	.shelly-trusted__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.shelly-trusted__mark { padding: 16px; font-size: 15px; }
	.shelly-trusted__mark:nth-child(3n) { border-right: none; }
	.shelly-trusted__mark:nth-child(-n+3) { border-bottom: 1px solid rgba(69, 148, 209, 0.08); padding-bottom: 20px; }
	.shelly-trusted__mark:nth-child(n+4) { padding-top: 20px; }
}
@media (max-width: 639px) {
	.shelly-trusted { padding: 40px var(--shelly-pad-x-mobile); }
	.shelly-trusted__grid { grid-template-columns: repeat(2, 1fr); }
	.shelly-trusted__mark:nth-child(even) { border-right: none; }
	.shelly-trusted__mark:nth-child(odd) { border-right: 1px solid rgba(69, 148, 209, 0.08); }
	.shelly-trusted__mark:nth-child(-n+4) { border-bottom: 1px solid rgba(69, 148, 209, 0.08); }
}

/* ---------- Category header (eyebrow, h2, lead, all-link) ---------- */
.shelly-categories__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 40px;
	margin-bottom: 56px;
}
.shelly-categories__header-copy { max-width: 640px; }
.shelly-categories__header .shelly-eyebrow {
	display: block;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 14px;
}
.shelly-categories__title {
	font: 400 48px/1.1 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}
.shelly-categories__lead {
	font: 400 16px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0;
	max-width: 58ch;
}
.shelly-categories__all {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	background: #FFFFFF;
	border: 1px solid rgba(69, 148, 209, 0.18);
	color: #0361A7;
	font: 700 13px/1 'Manrope', sans-serif;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: var(--shelly-radius-pill);
	box-shadow: 0 6px 20px rgba(69, 148, 209, 0.1);
	transition: all var(--shelly-transition);
	white-space: nowrap;
}
.shelly-categories__all:hover {
	border-color: transparent;
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(69, 148, 209, 0.22);
}
.shelly-categories__all-arrow {
	display: inline-block;
	transition: transform var(--shelly-transition);
}
.shelly-categories__all:hover .shelly-categories__all-arrow {
	transform: translateX(4px);
}

/* ---------- Featured category (dark hero card) ---------- */
.shelly-categories__featured {
	position: relative;
	display: grid;
	grid-template-columns: 45% 55%;
	align-items: stretch;
	min-height: 440px;
	margin-bottom: 40px;
	background:
		radial-gradient(ellipse 60% 80% at 20% 100%, rgba(69, 148, 209, 0.25) 0%, rgba(69, 148, 209, 0) 60%),
		linear-gradient(135deg, #0B1419 0%, #004B83 50%, #4594D1 100%);
	color: #FDFDFD;
	text-decoration: none;
	border-radius: var(--shelly-radius-xl);
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 30px 80px rgba(11, 20, 25, 0.25), 0 8px 24px rgba(69, 148, 209, 0.18);
	transition: transform var(--shelly-transition), box-shadow var(--shelly-transition);
}
.shelly-categories__featured:hover {
	transform: translateY(-4px);
	color: #FDFDFD;
	box-shadow: 0 40px 100px rgba(11, 20, 25, 0.35), 0 12px 32px rgba(69, 148, 209, 0.28);
}
.shelly-categories__featured-mesh {
	position: absolute;
	inset: -10%;
	pointer-events: none;
	z-index: 0;
	filter: blur(60px);
}
.shelly-categories__featured-mesh span {
	position: absolute;
	border-radius: 50%;
	opacity: 0.55;
}
.shelly-categories__featured-mesh span:nth-child(1) {
	top: -10%;
	left: -10%;
	width: 60%;
	height: 60%;
	background: radial-gradient(circle, #4594D1 0%, rgba(69,148,209,0) 70%);
}
.shelly-categories__featured-mesh span:nth-child(2) {
	bottom: -20%;
	right: -10%;
	width: 70%;
	height: 70%;
	background: radial-gradient(circle, #4594D1 0%, rgba(69,148,209,0) 70%);
}
.shelly-categories__featured-mesh span:nth-child(3) {
	top: 30%;
	right: 20%;
	width: 40%;
	height: 40%;
	background: radial-gradient(circle, #9CDBF6 0%, rgba(96,165,250,0) 70%);
}

.shelly-categories__featured-media {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
}
.shelly-categories__featured-ring,
.shelly-categories__featured-ring--b {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	transform: translate(-50%, -50%);
}
.shelly-categories__featured-ring {
	width: 360px;
	height: 360px;
}
.shelly-categories__featured-ring--b {
	width: 240px;
	height: 240px;
	border-color: rgba(255, 255, 255, 0.25);
	background: radial-gradient(circle, rgba(69, 148, 209, 0.15) 0%, rgba(69, 148, 209, 0) 70%);
}
.shelly-categories__featured-media img {
	position: relative;
	z-index: 2;
	max-width: 70%;
	max-height: 320px;
	object-fit: contain;
	filter: drop-shadow(0 24px 40px rgba(11, 20, 25, 0.5));
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.shelly-categories__featured:hover .shelly-categories__featured-media img {
	transform: scale(1.06) translateY(-4px);
}

.shelly-categories__featured-copy {
	position: relative;
	z-index: 1;
	padding: 56px 64px 56px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}
.shelly-categories__featured-tags {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.shelly-categories__featured-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #FDFDFD;
	border-radius: var(--shelly-radius-pill);
	backdrop-filter: blur(6px);
}
.shelly-categories__featured-tag.is-dot::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22C55E;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.shelly-categories__featured-title {
	font: 400 48px/1.05 'Manrope', sans-serif;
	color: #FDFDFD;
	margin: 0;
	letter-spacing: -0.012em;
	max-width: 12ch;
}
.shelly-categories__featured-desc {
	font: 400 16px/1.6 'Manrope', sans-serif;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
	max-width: 52ch;
}
.shelly-categories__featured-feats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px 20px;
}
.shelly-categories__featured-feats li {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);
}
.shelly-categories__featured-feats li span { color: #9CDBF6; font-size: 10px; }
.shelly-categories__featured-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 24px 16px 28px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--shelly-radius-pill);
	font: 700 13px/1 'Manrope', sans-serif;
	color: #FDFDFD;
	letter-spacing: 0.02em;
	transition: all var(--shelly-transition);
	align-self: flex-start;
	backdrop-filter: blur(8px);
	margin-top: 8px;
}
.shelly-categories__featured-cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #FFFFFF;
	color: #0361A7;
	font: 700 16px/1 'Manrope', sans-serif;
	transition: transform var(--shelly-transition);
}
.shelly-categories__featured:hover .shelly-categories__featured-cta {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: #0361A7;
}
.shelly-categories__featured:hover .shelly-categories__featured-cta-arrow {
	background: #2481C7;
	color: #FFFFFF;
	transform: translateX(4px);
}

/* ---------- Tile grid (3×2) ---------- */
.shelly-categories__tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.shelly-categories__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	color: #121212;
	text-decoration: none;
	border: 1px solid rgba(69, 148, 209, 0.08);
	border-radius: var(--shelly-radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(69, 148, 209, 0.06);
	transition: transform var(--shelly-transition), box-shadow var(--shelly-transition), border-color var(--shelly-transition);
	isolation: isolate;
}
.shelly-categories__tile:hover {
	transform: translateY(-4px);
	border-color: rgba(69, 148, 209, 0.45);
	box-shadow: 0 24px 60px rgba(69, 148, 209, 0.18), 0 8px 20px rgba(69, 148, 209, 0.08);
	color: #121212;
}
.shelly-categories__tile-media {
	position: relative;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(ellipse 65% 55% at 50% 55%, rgba(69, 148, 209, 0.2) 0%, rgba(69, 148, 209, 0) 70%),
		linear-gradient(160deg, #F9F9F9 0%, #F0F4F7 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(69, 148, 209, 0.08);
}
.shelly-categories__tile-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}
.shelly-categories__tile-index {
	position: absolute;
	top: 16px;
	left: 18px;
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	color: #4594D1;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(69, 148, 209, 0.12);
	border-radius: var(--shelly-radius-pill);
	backdrop-filter: blur(6px);
	z-index: 2;
}
.shelly-categories__tile-media img {
	position: relative;
	z-index: 1;
	max-width: 65%;
	max-height: 72%;
	object-fit: contain;
	filter: drop-shadow(0 12px 24px rgba(69, 148, 209, 0.18));
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.shelly-categories__tile:hover .shelly-categories__tile-media img {
	transform: scale(1.08) translateY(-4px);
}
.shelly-categories__tile-body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}
.shelly-categories__tile-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.shelly-categories__tile-eyebrow {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4594D1;
}
.shelly-categories__tile-count {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.04em;
	color: #929292;
}
.shelly-categories__tile-title {
	font: 400 22px/1.2 'Manrope', sans-serif;
	color: #121212;
	margin: 0;
	letter-spacing: -0.005em;
}
.shelly-categories__tile-desc {
	font: 400 13px/1.55 'Manrope', sans-serif;
	color: #656669;
	margin: 0;
	flex: 1 1 auto;
}
.shelly-categories__tile-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(69, 148, 209, 0.06);
	color: #0361A7;
	border: 1px solid rgba(69, 148, 209, 0.14);
	font: 700 16px/1 'Manrope', sans-serif;
	margin-top: 8px;
	align-self: flex-start;
	transition: all var(--shelly-transition);
}
.shelly-categories__tile:hover .shelly-categories__tile-arrow {
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%);
	color: #FFFFFF;
	border-color: transparent;
	transform: translateX(4px);
	box-shadow: 0 10px 24px rgba(69, 148, 209, 0.28);
}

@media (max-width: 1199px) {
	.shelly-categories__tile-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.shelly-categories__featured { grid-template-columns: 42% 58%; min-height: 400px; }
	.shelly-categories__featured-title { font-size: 40px; }
	.shelly-categories__featured-copy { padding: 44px 48px 44px 24px; }
}
@media (max-width: 989px) {
	.shelly-categories { padding: 80px 0; }
	.shelly-categories__header {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 40px;
	}
	.shelly-categories__all { justify-self: start; }
	.shelly-categories__title { font-size: 36px; }
	.shelly-categories__featured {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.shelly-categories__featured-media { padding: 40px 24px 0; min-height: 300px; }
	.shelly-categories__featured-copy { padding: 32px 32px 40px; }
	.shelly-categories__featured-title { font-size: 34px; }
	.shelly-categories__tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 539px) {
	.shelly-categories__tile-grid { grid-template-columns: 1fr; }
	.shelly-categories__featured-feats { grid-template-columns: 1fr; }
	.shelly-categories__featured-media { min-height: 240px; }
	.shelly-categories__featured-title { font-size: 28px; }
	.shelly-categories__featured-ring { width: 260px; height: 260px; }
	.shelly-categories__featured-ring--b { width: 180px; height: 180px; }
}

/* ---------- Hero trusted-by strip (bottom edge of hero) ---------- */
.shelly-home-hero__trusted {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 0 0;
	margin-top: 48px;
	border-top: 1px solid rgba(69, 148, 209, 0.1);
}
.shelly-home-hero__trusted-label {
	font: 700 10px/1 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #929292;
	white-space: nowrap;
	flex: 0 0 auto;
}
.shelly-home-hero__trusted-logos {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.shelly-home-hero__trusted-logos img {
	height: 22px;
	width: auto;
	opacity: 0.45;
	filter: grayscale(100%);
	transition: all 220ms ease;
}
.shelly-home-hero__trusted-logos img:hover {
	opacity: 1;
	filter: grayscale(0%);
}
@media (max-width: 989px) {
	.shelly-home-hero__trusted { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; }
	.shelly-home-hero__trusted-logos { gap: 16px; }
	.shelly-home-hero__trusted-logos img { height: 18px; }
}

/* ---------- Flagship — ecosystem compat strip ---------- */
.shelly-flagship__compat {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	text-align: center;
}
.shelly-flagship__compat-label {
	font: 400 14px/1.5 'Manrope', sans-serif;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 24px;
}
.shelly-flagship__compat-logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}
.shelly-flagship__compat-logos span {
	font: 700 13px/1 'Manrope', sans-serif;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.45);
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--shelly-radius-pill);
	transition: all 220ms ease;
}
.shelly-flagship__compat-logos span:hover {
	color: #FDFDFD;
	border-color: rgba(69, 148, 209, 0.5);
	background: rgba(69, 148, 209, 0.12);
}
@media (max-width: 749px) {
	.shelly-flagship__compat-logos { gap: 12px; }
	.shelly-flagship__compat-logos span { font-size: 11px; padding: 8px 12px; }
}

/* ---------- Product carousel (bestsellers) ---------- */
.shelly-carousel {
	padding: 100px 0 120px;
	background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%);
	border-top: 1px solid rgba(69, 148, 209, 0.06);
}
.shelly-carousel__inner {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}
.shelly-carousel__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.shelly-carousel__header .shelly-eyebrow {
	display: block;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 10px;
}
.shelly-carousel__title {
	font: 400 40px/1.15 'Manrope', sans-serif;
	color: #121212;
	margin: 0;
	letter-spacing: -0.01em;
}
.shelly-carousel__controls {
	display: flex;
	align-items: center;
	gap: 10px;
}
.shelly-carousel__arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(69, 148, 209, 0.18);
	background: #FFFFFF;
	color: #0361A7;
	font: 700 18px/1 'Manrope', sans-serif;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--shelly-transition);
	box-shadow: 0 4px 12px rgba(69, 148, 209, 0.08);
}
.shelly-carousel__arrow:hover {
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%);
	color: #FFFFFF;
	border-color: transparent;
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(69, 148, 209, 0.22);
}
.shelly-carousel__all {
	font: 700 13px/1 'Manrope', sans-serif;
	color: #0361A7;
	text-decoration: none;
	transition: color var(--shelly-transition);
	white-space: nowrap;
	margin-left: 6px;
}
.shelly-carousel__all:hover { color: #4594D1; }

/* Force product grid into a single horizontal scrolling row */
.shelly-carousel__track-wrap {
	overflow: hidden;
	margin: 0 calc(-1 * var(--shelly-pad-x));
	padding: 0 var(--shelly-pad-x);
}
.shelly-carousel__track-wrap .wc-block-product-template,
.shelly-carousel__track-wrap .wp-block-post-template,
.shelly-carousel__track-wrap .wc-block-grid {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 24px !important;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}
.shelly-carousel__track-wrap .wc-block-product-template > *,
.shelly-carousel__track-wrap .wp-block-post-template > *,
.shelly-carousel__track-wrap .wc-block-grid > * {
	flex: 0 0 calc((100% - 72px) / 3.5) !important;
	max-width: calc((100% - 72px) / 3.5) !important;
	scroll-snap-align: start;
}
/* Hide the default scrollbar but keep scroll functional */
.shelly-carousel__track-wrap .wc-block-product-template::-webkit-scrollbar,
.shelly-carousel__track-wrap .wp-block-post-template::-webkit-scrollbar {
	height: 0;
	display: none;
}

@media (max-width: 989px) {
	.shelly-carousel { padding: 64px 0 80px; }
	.shelly-carousel__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-carousel__title { font-size: 30px; }
	.shelly-carousel__track-wrap {
		margin: 0 calc(-1 * var(--shelly-pad-x-mobile));
		padding: 0 var(--shelly-pad-x-mobile);
	}
	.shelly-carousel__track-wrap .wc-block-product-template > *,
	.shelly-carousel__track-wrap .wp-block-post-template > *,
	.shelly-carousel__track-wrap .wc-block-grid > * {
		flex: 0 0 calc((100% - 24px) / 1.5) !important;
		max-width: calc((100% - 24px) / 1.5) !important;
	}
	.shelly-carousel__arrow { width: 38px; height: 38px; font-size: 16px; }
}

/* ---------- Use-case cards (visual with photo backgrounds) ---------- */
.shelly-usecases {
	padding: 120px 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%);
}
.shelly-usecases__inner {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}
.shelly-usecases__header {
	text-align: center;
	margin-bottom: 48px;
}
.shelly-usecases__header .shelly-eyebrow {
	display: block;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 12px;
}
.shelly-usecases__title {
	font: 400 40px/1.15 'Manrope', sans-serif;
	color: #121212;
	margin: 0;
	letter-spacing: -0.01em;
}
.shelly-usecases__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.shelly-usecases__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 420px;
	border-radius: var(--shelly-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: #FDFDFD;
	isolation: isolate;
	border: 1px solid rgba(69, 148, 209, 0.08);
	box-shadow: 0 4px 18px rgba(69, 148, 209, 0.06);
	transition: transform var(--shelly-transition), box-shadow var(--shelly-transition);
}
.shelly-usecases__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 60px rgba(11, 20, 25, 0.2), 0 8px 20px rgba(69, 148, 209, 0.1);
	color: #FDFDFD;
}
.shelly-usecases__card-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.shelly-usecases__card:hover .shelly-usecases__card-media {
	transform: scale(1.06);
}
.shelly-usecases__card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 20, 25, 0) 20%, rgba(11, 20, 25, 0.85) 70%, rgba(11, 20, 25, 0.95) 100%);
	z-index: 1;
	pointer-events: none;
}
.shelly-usecases__card-body {
	position: relative;
	z-index: 2;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.shelly-usecases__card-eyebrow {
	font: 700 10px/1 'Manrope', sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4594D1;
}
.shelly-usecases__card-title {
	font: 400 26px/1.2 'Manrope', sans-serif;
	color: #FDFDFD;
	margin: 0;
	letter-spacing: -0.005em;
}
.shelly-usecases__card-desc {
	font: 400 14px/1.55 'Manrope', sans-serif;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}
.shelly-usecases__card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 13px/1 'Manrope', sans-serif;
	color: #FDFDFD;
	margin-top: 8px;
	transition: gap var(--shelly-transition);
}
.shelly-usecases__card:hover .shelly-usecases__card-link { gap: 14px; }

@media (max-width: 989px) {
	.shelly-usecases { padding: 80px 0; }
	.shelly-usecases__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-usecases__grid { grid-template-columns: 1fr; }
	.shelly-usecases__card { min-height: 340px; }
	.shelly-usecases__title { font-size: 30px; }
}

/* ---------- Home hero depth pass: mesh + floating chips ---------- */
.shelly-home-hero__media { overflow: visible; }
.shelly-home-hero__mesh {
	position: absolute;
	inset: -20% -20% -20% -20%;
	pointer-events: none;
	z-index: 0;
	filter: blur(60px);
}
.shelly-home-hero__mesh span {
	position: absolute;
	border-radius: 50%;
	opacity: 0.55;
}
.shelly-home-hero__mesh-a {
	top: -10%;
	left: -10%;
	width: 70%;
	height: 70%;
	background: radial-gradient(circle, #4594D1 0%, rgba(69,148,209,0) 70%);
	animation: shelly-mesh 18s ease-in-out infinite;
}
.shelly-home-hero__mesh-b {
	bottom: -20%;
	right: -10%;
	width: 80%;
	height: 80%;
	background: radial-gradient(circle, #4594D1 0%, rgba(69,148,209,0) 70%);
	animation: shelly-mesh 22s ease-in-out infinite reverse;
	animation-delay: -6s;
}
.shelly-home-hero__mesh-c {
	top: 20%;
	right: 20%;
	width: 50%;
	height: 50%;
	background: radial-gradient(circle, #004B83 0%, rgba(0,75,131,0) 70%);
	animation: shelly-mesh 26s ease-in-out infinite;
	animation-delay: -12s;
}
@keyframes shelly-mesh {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(8%, -6%) scale(1.1); }
	66%      { transform: translate(-6%, 8%) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
	.shelly-home-hero__mesh-a,
	.shelly-home-hero__mesh-b,
	.shelly-home-hero__mesh-c { animation: none; }
}

/* ---------- Home hero brand emblem (3×3 grid) ---------- */
.shelly-home-hero__emblem {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 14px;
}
.shelly-home-hero__emblem-grid {
	position: absolute;
	inset: -8%;
	width: 116%;
	height: 116%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.8;
}
.shelly-home-hero__tile,
.shelly-home-hero__mark {
	position: relative;
	z-index: 1;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(69, 148, 209, 0.14);
	border-radius: var(--shelly-radius-md);
	box-shadow:
		0 10px 28px rgba(69, 148, 209, 0.12),
		0 2px 8px rgba(69, 148, 209, 0.06);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 8px;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
	animation: shelly-hero-float 8s ease-in-out infinite;
	will-change: transform;
}
.shelly-home-hero__tile:hover {
	transform: translateY(-4px);
	border-color: rgba(69, 148, 209, 0.55);
	box-shadow:
		0 18px 40px rgba(69, 148, 209, 0.22),
		0 4px 12px rgba(69, 148, 209, 0.1);
}
.shelly-home-hero__tile-icon {
	font-size: 28px;
	line-height: 1;
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
}
.shelly-home-hero__tile-label {
	font: 700 11px/1.2 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #121212;
	text-align: center;
}
.shelly-home-hero__tile--a { grid-column: 1; grid-row: 1; animation-delay: -0.2s; }
.shelly-home-hero__tile--b { grid-column: 2; grid-row: 1; animation-delay: -1.4s; }
.shelly-home-hero__tile--c { grid-column: 3; grid-row: 1; animation-delay: -2.6s; }
.shelly-home-hero__tile--d { grid-column: 1; grid-row: 2; animation-delay: -3.8s; }
.shelly-home-hero__tile--e { grid-column: 3; grid-row: 2; animation-delay: -5s;   }
.shelly-home-hero__tile--f { grid-column: 1; grid-row: 3; animation-delay: -6.2s; }
.shelly-home-hero__tile--g { grid-column: 2; grid-row: 3; animation-delay: -7.4s; }
.shelly-home-hero__tile--h { grid-column: 3; grid-row: 3; animation-delay: -0.8s; }

.shelly-home-hero__mark {
	grid-column: 2;
	grid-row: 2;
	background:
		radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(135deg, #0B1419 0%, #004B83 45%, #4594D1 100%);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow:
		0 24px 60px rgba(11, 20, 25, 0.35),
		0 8px 24px rgba(69, 148, 209, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	padding: 16px;
	animation-delay: -4.4s;
}
.shelly-home-hero__mark img {
	width: 100%;
	height: auto;
	max-width: 120px;
	max-height: 80%;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

@keyframes shelly-hero-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -6px, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.shelly-home-hero__tile,
	.shelly-home-hero__mark { animation: none; }
}

@media (max-width: 989px) {
	.shelly-home-hero__mesh { filter: blur(40px); }
	.shelly-home-hero__emblem { gap: 10px; }
	.shelly-home-hero__tile-icon { font-size: 22px; }
	.shelly-home-hero__tile-label { font-size: 10px; }
	.shelly-home-hero__mark img { max-width: 90px; }
}

/* ============================================================
 * Smart Home Builder — interactive configurator section
 * Shelly-branded: Manrope, blue gradient background, rounded
 * card surfaces, hairline borders, accent-blue micro-interactions.
 * ========================================================== */
.shelly-builder {
	position: relative;
	background:
		radial-gradient(ellipse 50% 40% at 10% 0%, rgba(69, 148, 209, 0.18) 0%, rgba(69, 148, 209, 0) 65%),
		radial-gradient(ellipse 50% 50% at 95% 100%, rgba(69, 148, 209, 0.15) 0%, rgba(69, 148, 209, 0) 65%),
		linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 50%, #F0F4F7 100%);
	padding: 120px 0;
	overflow: hidden;
	scroll-margin-top: var(--shelly-header-h, 80px);
	border-top: 1px solid rgba(69, 148, 209, 0.08);
	border-bottom: 1px solid rgba(69, 148, 209, 0.08);
}
.shelly-builder__glow {
	position: absolute;
	top: -160px;
	right: -120px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(69, 148, 209, 0.22) 0%, rgba(69, 148, 209, 0) 60%);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
	animation: shelly-builder-glow-drift 20s ease-in-out infinite;
}
.shelly-builder__glow--b {
	top: auto;
	bottom: -120px;
	right: auto;
	left: -100px;
	background: radial-gradient(circle, rgba(69, 148, 209, 0.18) 0%, rgba(69, 148, 209, 0) 60%);
	animation-delay: -8s;
	animation-direction: reverse;
}
@keyframes shelly-builder-glow-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(40px, -30px); }
}

/* Particle constellation background */
.shelly-builder__particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.shelly-builder__particles span {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(69, 148, 209, 0.35);
	box-shadow: 0 0 6px rgba(69, 148, 209, 0.25);
	animation: shelly-builder-particle 4s ease-in-out infinite;
}
.shelly-builder__particles span:nth-child(1)  { left:  3%; top: 15%; animation-delay: -0.1s; }
.shelly-builder__particles span:nth-child(2)  { left:  8%; top: 55%; animation-delay: -1.2s; }
.shelly-builder__particles span:nth-child(3)  { left: 14%; top: 30%; animation-delay: -0.6s; }
.shelly-builder__particles span:nth-child(4)  { left: 21%; top: 75%; animation-delay: -2.0s; }
.shelly-builder__particles span:nth-child(5)  { left: 28%; top: 20%; animation-delay: -0.4s; }
.shelly-builder__particles span:nth-child(6)  { left: 35%; top: 60%; animation-delay: -1.6s; }
.shelly-builder__particles span:nth-child(7)  { left: 42%; top: 85%; animation-delay: -0.8s; }
.shelly-builder__particles span:nth-child(8)  { left: 50%; top: 10%; animation-delay: -2.4s; }
.shelly-builder__particles span:nth-child(9)  { left: 57%; top: 45%; animation-delay: -0.3s; }
.shelly-builder__particles span:nth-child(10) { left: 64%; top: 70%; animation-delay: -1.8s; }
.shelly-builder__particles span:nth-child(11) { left: 71%; top: 25%; animation-delay: -2.2s; }
.shelly-builder__particles span:nth-child(12) { left: 78%; top: 55%; animation-delay: -0.7s; }
.shelly-builder__particles span:nth-child(13) { left: 85%; top: 40%; animation-delay: -1.4s; }
.shelly-builder__particles span:nth-child(14) { left: 91%; top: 80%; animation-delay: -2.6s; }
.shelly-builder__particles span:nth-child(15) { left: 96%; top: 15%; animation-delay: -0.9s; }
.shelly-builder__particles span:nth-child(16) { left: 18%; top: 90%; animation-delay: -1.1s; }
.shelly-builder__particles span:nth-child(17) { left: 45%; top: 35%; animation-delay: -2.8s; }
.shelly-builder__particles span:nth-child(18) { left: 68%; top: 12%; animation-delay: -0.5s; }
.shelly-builder__particles span:nth-child(19) { left: 82%; top: 68%; animation-delay: -1.9s; }
.shelly-builder__particles span:nth-child(20) { left: 55%; top: 92%; animation-delay: -3.0s; }
@keyframes shelly-builder-particle {
	0%, 100% { transform: scale(1);   opacity: 0.25; }
	50%      { transform: scale(1.6); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
	.shelly-builder__glow,
	.shelly-builder__particles span { animation: none; }
}
.shelly-builder__inner {
	position: relative;
	z-index: 1;
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}

/* Animated house illustration */
.shelly-builder__house {
	width: 80px;
	height: 68px;
	margin: 0 auto 20px;
	opacity: 0.7;
}
.shelly-builder__house svg { width: 100%; height: 100%; }

.shelly-builder__head {
	max-width: 760px;
	margin: 0 auto 56px;
	text-align: center;
}
.shelly-builder__head .shelly-eyebrow {
	display: block;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 12px;
}
.shelly-builder__head h2 {
	font: 400 48px/1.1 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}
.shelly-builder__lead {
	font: 400 17px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0 auto;
	max-width: 58ch;
}

.shelly-builder__app {
	background: #FFFFFF;
	border: 1.5px solid rgba(69, 148, 209, 0.2);
	border-radius: var(--shelly-radius-xl);
	padding: 48px;
	scroll-margin-top: calc(var(--shelly-header-h, 80px) + 16px);
	box-shadow:
		0 0 0 1px rgba(69, 148, 209, 0.04),
		0 24px 60px rgba(69, 148, 209, 0.12),
		0 4px 16px rgba(69, 148, 209, 0.06),
		0 0 80px rgba(69, 148, 209, 0.08);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
/* Subtle tech grid inside the app card */
.shelly-builder__app::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(69, 148, 209, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(69, 148, 209, 0.03) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
	pointer-events: none;
	z-index: 0;
}
.shelly-builder__app > * { position: relative; z-index: 1; }
.shelly-builder__noscript {
	text-align: center;
	color: #656669;
	font: 400 14px/1.5 'Manrope', sans-serif;
}

/* ---------- Progress bar step indicator ---------- */
.shelly-builder__steps {
	display: flex;
	align-items: stretch;
	margin-bottom: 40px;
	background: rgba(69, 148, 209, 0.05);
	border-radius: var(--shelly-radius-pill);
	overflow: hidden;
	border: 1px solid rgba(69, 148, 209, 0.08);
}
.shelly-builder__step {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 16px;
	position: relative;
	transition: background 300ms ease, color 300ms ease;
	cursor: default;
}
.shelly-builder__step-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 12px/1 'Manrope', sans-serif;
	background: rgba(69, 148, 209, 0.08);
	color: #929292;
	transition: all 300ms ease;
	flex: 0 0 auto;
}
.shelly-builder__step--active {
	background: linear-gradient(135deg, rgba(69, 148, 209, 0.1) 0%, rgba(69, 148, 209, 0.1) 100%);
}
.shelly-builder__step--active .shelly-builder__step-num {
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%);
	color: #FFFFFF;
	box-shadow: 0 4px 14px rgba(69, 148, 209, 0.3);
}
.shelly-builder__step--done {
	background: rgba(22, 163, 74, 0.06);
}
.shelly-builder__step--done .shelly-builder__step-num {
	background: #11BA4B;
	color: #FFFFFF;
}
.shelly-builder__step-label {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #929292;
}
.shelly-builder__step--active .shelly-builder__step-label { color: #0361A7; font-weight: 700; }
.shelly-builder__step--done .shelly-builder__step-label { color: #121212; }
.shelly-builder__step-link { display: none; }

/* ---------- Live preview sidebar ---------- */
.shelly-builder__live-preview {
	position: sticky;
	bottom: 0;
	margin: 32px -48px -48px;
	padding: 18px 32px;
	background: linear-gradient(135deg, rgba(69, 148, 209, 0.06) 0%, rgba(69, 148, 209, 0.06) 100%);
	border-top: 1px solid rgba(69, 148, 209, 0.1);
	border-radius: 0 0 var(--shelly-radius-xl) var(--shelly-radius-xl);
	display: flex;
	align-items: center;
	gap: 24px;
	z-index: 10;
}
.shelly-builder__live-title {
	font: 700 10px/1 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #929292;
	flex: 0 0 auto;
}
.shelly-builder__live-stats {
	display: flex;
	align-items: center;
	gap: 32px;
	flex: 1 1 auto;
}
.shelly-builder__live-stat {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.shelly-builder__live-num {
	font: 700 20px/1 'Manrope', sans-serif;
	color: #0361A7;
}
.shelly-builder__live-label {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #656669;
}
@media (max-width: 989px) {
	.shelly-builder__live-preview {
		margin: 24px -24px -24px;
		padding: 14px 20px;
		flex-wrap: wrap;
		gap: 12px;
	}
	.shelly-builder__live-stats { gap: 20px; }
	.shelly-builder__live-num { font-size: 16px; }
}

/* Step content transition */
.shelly-builder__app [class*="shelly-builder__h3"],
.shelly-builder__app .shelly-builder__home-grid,
.shelly-builder__app .shelly-builder__fp-outer,
.shelly-builder__app .shelly-builder__priorities,
.shelly-builder__app .shelly-builder__summary,
.shelly-builder__app .shelly-builder__product-list,
.shelly-builder__app .shelly-builder__think {
	animation: shelly-builder-slide-in 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes shelly-builder-slide-in {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.shelly-builder__app [class*="shelly-builder__h3"],
	.shelly-builder__app .shelly-builder__home-grid,
	.shelly-builder__app .shelly-builder__fp-outer,
	.shelly-builder__app .shelly-builder__priorities,
	.shelly-builder__app .shelly-builder__summary,
	.shelly-builder__app .shelly-builder__product-list,
	.shelly-builder__app .shelly-builder__think { animation: none; }
}

/* ---------- Section headings ---------- */
.shelly-builder__h3 {
	font: 400 28px/1.15 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 8px;
	text-align: center;
	letter-spacing: -0.005em;
}
.shelly-builder__h4 {
	font: 400 22px/1.2 'Manrope', sans-serif;
	color: #121212;
	margin: 48px 0 16px;
}
.shelly-builder__sub {
	font: 400 14px/1.5 'Manrope', sans-serif;
	color: #656669;
	margin: 0 auto 32px;
	text-align: center;
	max-width: 56ch;
}

/* ---------- Step 0: home grid ---------- */
.shelly-builder__home-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}
.shelly-builder__home-card {
	background: rgba(69, 148, 209, 0.03);
	border: 1.5px solid rgba(69, 148, 209, 0.1);
	border-radius: var(--shelly-radius-lg);
	padding: 24px 20px;
	cursor: pointer;
	text-align: left;
	transition: all var(--shelly-transition);
	font-family: 'Manrope', sans-serif;
}
.shelly-builder__home-card:hover {
	border-color: rgba(69, 148, 209, 0.5);
	background: rgba(69, 148, 209, 0.05);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(69, 148, 209, 0.1);
}
.shelly-builder__home-card.is-active {
	border-color: #4594D1;
	background: linear-gradient(135deg, rgba(69, 148, 209, 0.08) 0%, rgba(69, 148, 209, 0.08) 100%);
	box-shadow: 0 8px 24px rgba(69, 148, 209, 0.15);
}
.shelly-builder__home-icon { font-size: 36px; margin-bottom: 12px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.shelly-builder__home-label { font: 700 15px/1.3 'Manrope', sans-serif; color: #121212; margin-bottom: 4px; }
.shelly-builder__home-desc { font: 400 12px/1.5 'Manrope', sans-serif; color: #656669; }
.shelly-builder__home-count { font: 700 11px/1 'Manrope', sans-serif; color: #4594D1; margin-top: 10px; letter-spacing: 0.05em; text-transform: uppercase; }

/* ---------- Step 1: floor-plan editor ---------- */
.shelly-builder__fp-toolbar {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 14px 18px;
	margin-bottom: 16px;
	background: rgba(69, 148, 209, 0.03);
	border: 1px solid rgba(69, 148, 209, 0.1);
	border-radius: var(--shelly-radius-md);
}
.shelly-builder__fp-toolbar-label {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #929292;
	margin-right: 10px;
}
.shelly-builder__fp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #FFFFFF;
	border: 1px solid rgba(69, 148, 209, 0.14);
	border-radius: var(--shelly-radius-pill);
	padding: 7px 14px 7px 12px;
	cursor: pointer;
	color: #0361A7;
	font: 700 12px/1.3 'Manrope', sans-serif;
	transition: all var(--shelly-transition);
}
.shelly-builder__fp-chip:hover {
	border-color: #4594D1;
	background: rgba(69, 148, 209, 0.08);
	transform: translateY(-1px);
}
.shelly-builder__fp-chip span { font-size: 14px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }

.shelly-builder__fp-outer {
	position: relative;
	margin-bottom: 24px;
}
.shelly-builder__fp-canvas-wrap {
	position: relative;
	background:
		linear-gradient(135deg, rgba(69, 148, 209, 0.03) 0%, rgba(69, 148, 209, 0.04) 100%);
	border: 1px solid rgba(69, 148, 209, 0.12);
	border-radius: var(--shelly-radius-lg);
	overflow: hidden;
	box-shadow: inset 0 2px 8px rgba(69, 148, 209, 0.04);
	height: 620px;
	cursor: grab;
	touch-action: none;
}
.shelly-builder__fp-canvas-wrap.is-panning { cursor: grabbing; }
.shelly-builder__fp-canvas {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #F9F9F9;
	background-image:
		linear-gradient(rgba(69, 148, 209, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(69, 148, 209, 0.08) 1px, transparent 1px);
	background-size: 20px 20px;
	background-position: -1px -1px;
	touch-action: none;
	will-change: transform;
}

/* ---------- Zoom toolbar ---------- */
.shelly-builder__fp-zoom {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 15;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: #FFFFFF;
	border: 1px solid rgba(69, 148, 209, 0.18);
	border-radius: var(--shelly-radius-pill);
	padding: 4px;
	box-shadow: 0 6px 20px rgba(69, 148, 209, 0.18);
}
.shelly-builder__fp-zoom-btn,
.shelly-builder__fp-zoom-level {
	border: none;
	background: transparent;
	color: #0361A7;
	font: 700 14px/1 'Manrope', sans-serif;
	cursor: pointer;
	border-radius: var(--shelly-radius-pill);
	transition: all var(--shelly-transition);
}
.shelly-builder__fp-zoom-btn {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.shelly-builder__fp-zoom-btn:hover:not([disabled]) {
	background: rgba(69, 148, 209, 0.12);
}
.shelly-builder__fp-zoom-btn[disabled] {
	color: #C7CED8;
	cursor: not-allowed;
}
.shelly-builder__fp-zoom-level {
	min-width: 52px;
	height: 30px;
	padding: 0 10px;
	font-size: 12px;
	letter-spacing: 0.02em;
	color: #121212;
}
.shelly-builder__fp-zoom-level:hover {
	background: rgba(69, 148, 209, 0.12);
	color: #0361A7;
}
.shelly-builder__fp-room {
	position: absolute;
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid rgba(69, 148, 209, 0.35);
	border-radius: var(--shelly-radius-md);
	box-shadow: 0 4px 14px rgba(69, 148, 209, 0.1);
	padding: 10px 12px 12px;
	cursor: grab;
	user-select: none;
	touch-action: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
	overflow: hidden;
	min-width: 80px;
	min-height: 80px;
}
.shelly-builder__fp-room::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(69, 148, 209, 0.08) 0%, rgba(69, 148, 209, 0) 55%);
	pointer-events: none;
	border-radius: inherit;
}
.shelly-builder__fp-room:hover {
	border-color: rgba(69, 148, 209, 0.7);
	box-shadow: 0 8px 22px rgba(69, 148, 209, 0.18);
}
.shelly-builder__fp-room.is-selected {
	border-color: #4594D1;
	box-shadow: 0 0 0 3px rgba(69, 148, 209, 0.18), 0 10px 32px rgba(69, 148, 209, 0.28);
	z-index: 5;
}
.shelly-builder__fp-room.is-dragging {
	cursor: grabbing;
	opacity: 0.92;
	z-index: 10;
	box-shadow: 0 18px 42px rgba(69, 148, 209, 0.32);
	transform: scale(1.01);
	transition: none;
}
.shelly-builder__fp-room-head {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	z-index: 1;
}
.shelly-builder__fp-room-icon { font-size: 20px; line-height: 1; flex: 0 0 auto; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.shelly-builder__fp-room-label {
	flex: 1 1 auto;
	font: 700 13px/1.2 'Manrope', sans-serif;
	color: #121212;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}
.shelly-builder__fp-room-remove {
	background: rgba(255, 255, 255, 0.6);
	border: none;
	color: #929292;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--shelly-transition);
	flex: 0 0 auto;
}
.shelly-builder__fp-room-remove:hover { color: #FFFFFF; background: #D1223E; }
.shelly-builder__fp-room-meta {
	font: 700 10px/1 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4594D1;
	position: relative;
	z-index: 1;
}
.shelly-builder__fp-room-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	position: relative;
	z-index: 1;
}
.shelly-builder__fp-room-chips span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 4px;
	background: rgba(69, 148, 209, 0.1);
	border-radius: var(--shelly-radius-sm);
	font-size: 14px;
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
	line-height: 1;
}
.shelly-builder__fp-room-more {
	background: linear-gradient(135deg, #4594D1, #4594D1) !important;
	color: #FFFFFF;
	font: 700 11px/1 'Manrope', sans-serif !important;
}
.shelly-builder__fp-room-size {
	position: absolute;
	left: 12px;
	bottom: 8px;
	font: 700 9px/1 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	color: #929292;
	z-index: 1;
	pointer-events: none;
}
.shelly-builder__fp-room-handle {
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 18px;
	height: 18px;
	cursor: nwse-resize;
	background-image:
		linear-gradient(135deg, transparent 0%, transparent 45%, rgba(69, 148, 209, 0.5) 45%, rgba(69, 148, 209, 0.5) 55%, transparent 55%, transparent 70%, rgba(69, 148, 209, 0.5) 70%, rgba(69, 148, 209, 0.5) 80%, transparent 80%);
	border-bottom-right-radius: calc(var(--shelly-radius-md) - 2px);
	touch-action: none;
	z-index: 2;
}
.shelly-builder__fp-hint {
	text-align: center;
	padding: 14px 20px;
	margin-bottom: 16px;
	background: rgba(69, 148, 209, 0.06);
	border: 1px dashed rgba(69, 148, 209, 0.3);
	border-radius: var(--shelly-radius-md);
	font: 400 13px/1.5 'Manrope', sans-serif;
	color: #656669;
}
.shelly-builder__fp-hint span { color: #4594D1; margin-right: 6px; font-weight: 700; }

.shelly-builder__fp-detail {
	background: linear-gradient(135deg, rgba(69, 148, 209, 0.04) 0%, rgba(69, 148, 209, 0.04) 100%);
	border: 1.5px solid rgba(69, 148, 209, 0.4);
	border-radius: var(--shelly-radius-lg);
	padding: 24px 26px;
	margin-bottom: 24px;
	box-shadow: 0 12px 32px rgba(69, 148, 209, 0.1);
}
.shelly-builder__fp-detail-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 8px;
}
.shelly-builder__fp-detail-icon {
	font-size: 32px;
	line-height: 1;
	flex: 0 0 auto;
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.shelly-builder__fp-detail-meta { flex: 1 1 auto; }
.shelly-builder__fp-detail-label {
	font: 700 18px/1.2 'Manrope', sans-serif;
	color: #121212;
}
.shelly-builder__fp-detail-count {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4594D1;
	margin-top: 6px;
}
.shelly-builder__fp-detail-close {
	background: #FFFFFF;
	border: 1px solid rgba(69, 148, 209, 0.15);
	color: #656669;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	padding: 0;
	flex: 0 0 auto;
	transition: all var(--shelly-transition);
}
.shelly-builder__fp-detail-close:hover {
	color: #FFFFFF;
	background: #2481C7;
	border-color: transparent;
}
.shelly-builder__counters {
	display: flex;
	gap: 28px;
	padding: 18px 0;
	flex-wrap: wrap;
}
.shelly-builder__counter { display: flex; align-items: center; gap: 10px; }
.shelly-builder__counter-label {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #656669;
}
.shelly-builder__counter-btn {
	width: 30px;
	height: 30px;
	border-radius: var(--shelly-radius-md);
	border: 1px solid rgba(69, 148, 209, 0.15);
	background: #FFFFFF;
	color: #121212;
	cursor: pointer;
	font: 700 16px/1 'Manrope', sans-serif;
	transition: all var(--shelly-transition);
}
.shelly-builder__counter-btn:hover {
	background: linear-gradient(135deg, #4594D1, #4594D1);
	border-color: transparent;
	color: #FFFFFF;
}
.shelly-builder__counter-value {
	font: 700 16px/1 'Manrope', sans-serif;
	color: #121212;
	min-width: 22px;
	text-align: center;
}

.shelly-builder__features-label {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #656669;
	margin: 8px 0 12px;
}
.shelly-builder__features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
}
.shelly-builder__feature {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--shelly-radius-md);
	cursor: pointer;
	text-align: left;
	transition: all var(--shelly-transition);
	background: #FFFFFF;
	border: 1.5px solid rgba(69, 148, 209, 0.08);
	font-family: 'Manrope', sans-serif;
}
.shelly-builder__feature:hover { border-color: rgba(69, 148, 209, 0.4); }
.shelly-builder__feature.is-active {
	background: linear-gradient(135deg, rgba(69, 148, 209, 0.06) 0%, rgba(69, 148, 209, 0.06) 100%);
	border-color: #4594D1;
}
.shelly-builder__feature-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.shelly-builder__feature-meta { flex: 1 1 auto; }
.shelly-builder__feature-label { font: 700 13px/1.3 'Manrope', sans-serif; color: #121212; }
.shelly-builder__feature-desc { font: 400 11px/1.4 'Manrope', sans-serif; color: #656669; margin-top: 4px; }
.shelly-builder__feature-check {
	width: 20px;
	height: 20px;
	border-radius: var(--shelly-radius-sm);
	border: 2px solid rgba(69, 148, 209, 0.15);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font: 700 12px/1 'Manrope', sans-serif;
	color: #FFFFFF;
	transition: all var(--shelly-transition);
}
.shelly-builder__feature.is-active .shelly-builder__feature-check {
	background: linear-gradient(135deg, #4594D1, #4594D1);
	border-color: transparent;
}

/* ---------- Step 2: priorities ---------- */
.shelly-builder__priorities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	max-width: 760px;
	margin: 0 auto;
}
.shelly-builder__priority {
	position: relative;
	background: rgba(69, 148, 209, 0.03);
	border: 1.5px solid rgba(69, 148, 209, 0.1);
	border-radius: var(--shelly-radius-lg);
	padding: 28px 20px;
	text-align: center;
	cursor: pointer;
	transition: all var(--shelly-transition);
	font-family: 'Manrope', sans-serif;
}
.shelly-builder__priority:hover {
	border-color: rgba(69, 148, 209, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(69, 148, 209, 0.1);
}
.shelly-builder__priority.is-active {
	border-color: #4594D1;
	background: linear-gradient(135deg, rgba(69, 148, 209, 0.08) 0%, rgba(69, 148, 209, 0.08) 100%);
	box-shadow: 0 12px 32px rgba(69, 148, 209, 0.15);
}
.shelly-builder__priority-icon { font-size: 38px; margin-bottom: 10px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.shelly-builder__priority-label { font: 700 14px/1.3 'Manrope', sans-serif; color: #121212; }
.shelly-builder__priority-desc { font: 400 12px/1.5 'Manrope', sans-serif; color: #656669; margin-top: 8px; }
.shelly-builder__priority-check {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	border-radius: var(--shelly-radius-pill);
	background: #11BA4B;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 13px/1 'Manrope', sans-serif;
}

.shelly-builder__preview {
	background: #F9F9F9;
	border: 1px solid rgba(69, 148, 209, 0.08);
	border-radius: var(--shelly-radius-lg);
	padding: 20px 24px;
	margin-top: 28px;
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}
.shelly-builder__preview-tile { text-align: center; }
.shelly-builder__preview-num {
	font: 700 24px/1 'Manrope', sans-serif;
	background: linear-gradient(135deg, #004B83, #4594D1, #4594D1);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.shelly-builder__preview-label {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #929292;
	margin-top: 6px;
}

/* ---------- Step 3: shopping list ---------- */
.shelly-builder__summary {
	background: linear-gradient(135deg, #004B83 0%, #4594D1 100%);
	border-radius: var(--shelly-radius-xl);
	padding: 32px 36px;
	margin-bottom: 32px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	box-shadow: 0 24px 60px rgba(69, 148, 209, 0.25);
}
.shelly-builder__summary-tile { text-align: center; }
.shelly-builder__summary-num {
	font: 700 34px/1 'Manrope', sans-serif;
	color: #FFFFFF;
	letter-spacing: -0.01em;
}
.shelly-builder__summary-label {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 6px;
}

.shelly-builder__product-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.shelly-builder__product {
	background: #FFFFFF;
	border: 1px solid rgba(69, 148, 209, 0.08);
	border-radius: var(--shelly-radius-lg);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: all var(--shelly-transition);
}
.shelly-builder__product:hover {
	border-color: rgba(69, 148, 209, 0.4);
	box-shadow: 0 12px 32px rgba(69, 148, 209, 0.1);
	transform: translateY(-2px);
}
.shelly-builder__product-img {
	font-size: 28px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(69, 148, 209, 0.06), rgba(69, 148, 209, 0.06));
	border-radius: var(--shelly-radius-md);
	flex-shrink: 0;
}
.shelly-builder__product-meta { flex: 1 1 auto; min-width: 0; }
.shelly-builder__product-name {
	font: 700 15px/1.3 'Manrope', sans-serif;
	color: #121212;
	text-decoration: none;
	display: inline-block;
}
.shelly-builder__product-name:hover { color: #4594D1; }
.shelly-builder__product-name span[aria-hidden="true"] { font-weight: 400; color: #4594D1; font-size: 12px; margin-left: 2px; }
.shelly-builder__product-desc {
	font: 400 12px/1.4 'Manrope', sans-serif;
	color: #656669;
	margin-top: 4px;
}
.shelly-builder__product-rooms { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.shelly-builder__product-room {
	font: 600 10px/1 'Manrope', sans-serif;
	background: rgba(69, 148, 209, 0.08);
	color: #0361A7;
	border-radius: var(--shelly-radius-sm);
	padding: 4px 8px;
	white-space: nowrap;
}
.shelly-builder__product-price { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.shelly-builder__product-qty { font: 400 12px/1 'Manrope', sans-serif; color: #929292; }
.shelly-builder__product-unit { font: 400 12px/1 'Manrope', sans-serif; color: #656669; margin-top: 4px; }
.shelly-builder__qty-edit {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid rgba(18, 18, 18, 0.15);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}
.shelly-builder__qty-btn {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	color: #121212;
	cursor: pointer;
	font: 600 16px/1 'Manrope', sans-serif;
	min-width: 32px;
	padding: 0 8px;
	user-select: none;
	transition: background 120ms ease, color 120ms ease;
}
.shelly-builder__qty-btn:hover { background: #121212; color: #fff; }
.shelly-builder__qty-input {
	width: 56px;
	border: 0;
	border-left: 1px solid rgba(18, 18, 18, 0.1);
	border-right: 1px solid rgba(18, 18, 18, 0.1);
	background: transparent;
	text-align: center;
	font: 600 14px/1 'Manrope', sans-serif;
	color: #121212;
	padding: 6px 4px;
	-moz-appearance: textfield;
}
.shelly-builder__qty-input::-webkit-outer-spin-button,
.shelly-builder__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shelly-builder__qty-input:focus { outline: 2px solid #4594D1; outline-offset: -2px; }
.shelly-builder__qty-reset {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin-top: 2px;
	color: #0361A7;
	font: 400 11px/1.2 'Manrope', sans-serif;
	text-decoration: underline;
	cursor: pointer;
}
.shelly-builder__qty-reset:hover { color: #121212; }
.shelly-builder__product-total {
	font: 700 18px/1 'Manrope', sans-serif;
	color: #121212;
	margin-top: 6px;
	letter-spacing: -0.005em;
}

/* ---------- Breakdown by room ---------- */
.shelly-builder__breakdown {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}
.shelly-builder__break-card {
	background: #F9F9F9;
	border: 1px solid rgba(69, 148, 209, 0.08);
	border-radius: var(--shelly-radius-lg);
	padding: 18px 20px;
}
.shelly-builder__break-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(69, 148, 209, 0.08);
}
.shelly-builder__break-head > span:first-child { font: 700 14px/1.3 'Manrope', sans-serif; color: #121212; }
.shelly-builder__break-total { font: 700 13px/1 'Manrope', sans-serif; color: #4594D1; }
.shelly-builder__break-row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font: 400 12px/1.4 'Manrope', sans-serif;
	color: #656669;
}
.shelly-builder__break-qty { color: #929292; }

/* ---------- CTA row ---------- */
.shelly-builder__cta-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 36px;
	flex-wrap: wrap;
}
.shelly-builder__cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 20px 36px;
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%);
	color: #FFFFFF;
	border: none;
	border-radius: var(--shelly-radius-pill);
	font: 700 15px/1 'Manrope', sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 12px 36px rgba(69, 148, 209, 0.35);
	transition: all var(--shelly-transition);
	cursor: pointer;
}
.shelly-builder__cta-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 48px rgba(69, 148, 209, 0.45);
	color: #FFFFFF;
}
.shelly-builder__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: var(--shelly-radius-pill);
	font-size: 16px;
	line-height: 1;
}
.shelly-builder__cta-price {
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--shelly-radius-pill);
	font: 700 13px/1 'Manrope', sans-serif;
	letter-spacing: 0;
	text-transform: none;
}
.shelly-builder__cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 18px 28px;
	background: rgba(69, 148, 209, 0.04);
	color: #0361A7;
	border: 1.5px solid rgba(69, 148, 209, 0.15);
	border-radius: var(--shelly-radius-pill);
	font: 700 13px/1 'Manrope', sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	font-family: 'Manrope', sans-serif;
	transition: all var(--shelly-transition);
}
.shelly-builder__cta-secondary:hover {
	background: rgba(69, 148, 209, 0.08);
	border-color: #4594D1;
}
.shelly-builder__cta-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	font: 700 12px/1 'Manrope', sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #656669;
	text-decoration: none;
	border-radius: var(--shelly-radius-pill);
	transition: color var(--shelly-transition), background var(--shelly-transition);
}
.shelly-builder__cta-ghost:hover {
	color: #0361A7;
	background: rgba(69, 148, 209, 0.05);
}

.shelly-builder__disclaimer {
	text-align: center;
	font: 400 11px/1.5 'Manrope', sans-serif;
	color: #929292;
	margin: 20px auto 0;
	max-width: 56ch;
}

/* Draft-proposal notice — goes at the top of step 3 */
.shelly-builder__notice {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 24px;
	margin: 0 0 28px;
	background: linear-gradient(135deg, rgba(255, 159, 67, 0.08) 0%, rgba(255, 159, 67, 0.02) 100%);
	border: 1px solid rgba(255, 159, 67, 0.35);
	border-left: 4px solid #FF9F43;
	border-radius: var(--shelly-radius-lg);
}
.shelly-builder__notice-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: var(--shelly-radius-pill);
	background: #FF9F43;
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 700 16px/1 'Manrope', sans-serif;
	margin-top: 2px;
}
.shelly-builder__notice-body {
	flex: 1 1 auto;
	min-width: 0;
}
.shelly-builder__notice-body strong {
	display: block;
	font: 700 14px/1.4 'Manrope', sans-serif;
	color: #121212;
	margin-bottom: 6px;
	letter-spacing: -0.005em;
}
.shelly-builder__notice-body p {
	font: 400 13px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0;
}
.shelly-builder__notice-body a {
	color: #0361A7;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.shelly-builder__notice-body a:hover { color: #4594D1; }

@media (max-width: 749px) {
	.shelly-builder__notice {
		flex-direction: column;
		gap: 12px;
		padding: 16px 18px;
	}
	.shelly-builder__notice-icon { margin-top: 0; }
}

/* ---------- Navigation buttons ---------- */
.shelly-builder__nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 32px;
}
.shelly-builder__btn {
	padding: 14px 28px;
	border-radius: var(--shelly-radius-pill);
	font: 700 14px/1 'Manrope', sans-serif;
	letter-spacing: 0.04em;
	cursor: pointer;
	font-family: 'Manrope', sans-serif;
	transition: all var(--shelly-transition);
	border: 1.5px solid transparent;
}
.shelly-builder__btn--primary {
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%);
	color: #FFFFFF;
	border: none;
	box-shadow: 0 8px 24px rgba(69, 148, 209, 0.25);
}
.shelly-builder__btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 32px rgba(69, 148, 209, 0.35);
}
.shelly-builder__btn--ghost {
	background: rgba(69, 148, 209, 0.04);
	color: #656669;
	border-color: rgba(69, 148, 209, 0.12);
}
.shelly-builder__btn--ghost:hover {
	color: #121212;
	border-color: #4594D1;
	background: rgba(69, 148, 209, 0.08);
}

/* ---------- AI badge (eyebrow chip with pulse dot) ---------- */
.shelly-builder__badge {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 12px;
	border-radius: var(--shelly-radius-pill);
	background: linear-gradient(135deg, rgba(69, 148, 209, 0.08) 0%, rgba(69, 148, 209, 0.12) 100%);
	border: 1px solid rgba(69, 148, 209, 0.2);
	color: #0361A7;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(69, 148, 209, 0.08);
}
.shelly-builder__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4594D1;
	box-shadow: 0 0 0 0 rgba(69, 148, 209, 0.6);
	animation: shelly-builder-pulse 2s ease-in-out infinite;
	flex: 0 0 auto;
}
@keyframes shelly-builder-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(69, 148, 209, 0.6); transform: scale(1); }
	50%      { box-shadow: 0 0 0 8px rgba(69, 148, 209, 0); transform: scale(1.15); }
}

/* ---------- Trust row under the lead ---------- */
.shelly-builder__trust {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 28px;
}
.shelly-builder__trust li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #656669;
}
.shelly-builder__trust li span[aria-hidden="true"] {
	color: #4594D1;
	font-size: 10px;
}

/* ---------- App panel: subtle tech backdrop ---------- */
.shelly-builder__app {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.shelly-builder__app::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(69, 148, 209, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(69, 148, 209, 0.04) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%);
	pointer-events: none;
	z-index: 0;
}
.shelly-builder__app > * { position: relative; z-index: 1; }

/* ---------- AI thinking overlay (step 2 → 3) ---------- */
.shelly-builder__think {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 20px 24px;
	text-align: center;
	min-height: 560px;
}
.shelly-builder__think-core {
	position: relative;
	width: 180px;
	height: 180px;
	margin-bottom: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shelly-builder__think-orb {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.85) 0%, rgba(96, 165, 250, 0.6) 18%, #4594D1 42%, #4594D1 72%, #0B1419 100%);
	box-shadow:
		0 0 32px rgba(69, 148, 209, 0.7),
		0 0 72px rgba(69, 148, 209, 0.45),
		inset 0 2px 12px rgba(255, 255, 255, 0.35);
	animation: shelly-think-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	z-index: 2;
}
.shelly-builder__think-orb::after {
	content: '';
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%, rgba(255,255,255,0.25) 80%, rgba(255,255,255,0));
	animation: shelly-think-spin 3.2s linear infinite;
}
.shelly-builder__think-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 96px;
	height: 96px;
	margin: -48px 0 0 -48px;
	border-radius: 50%;
	border: 1.5px solid rgba(69, 148, 209, 0.35);
	opacity: 0;
	animation: shelly-think-ring 2.8s cubic-bezier(0.32, 0, 0.28, 1) infinite;
	z-index: 1;
}
.shelly-builder__think-ring:nth-child(1) { animation-delay: 0s; }
.shelly-builder__think-ring:nth-child(2) { animation-delay: -0.9s; }
.shelly-builder__think-ring:nth-child(3) { animation-delay: -1.8s; }
@keyframes shelly-think-ring {
	0%   { transform: scale(0.55); opacity: 0;   border-color: rgba(69, 148, 209, 0.6); }
	15%  { opacity: 0.8; }
	100% { transform: scale(2.1);  opacity: 0;   border-color: rgba(69, 148, 209, 0.1); }
}
@keyframes shelly-think-pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 32px rgba(69, 148, 209, 0.55), 0 0 72px rgba(69, 148, 209, 0.35), inset 0 2px 12px rgba(255, 255, 255, 0.35);
	}
	50% {
		transform: scale(1.08);
		box-shadow: 0 0 48px rgba(69, 148, 209, 0.9), 0 0 120px rgba(69, 148, 209, 0.55), inset 0 2px 12px rgba(255, 255, 255, 0.5);
	}
}
@keyframes shelly-think-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.shelly-builder__think-title {
	font: 400 30px/1.2 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}
.shelly-builder__think-dots::after {
	content: '...';
	display: inline-block;
	width: 0;
	overflow: hidden;
	vertical-align: bottom;
	animation: shelly-think-ellipsis 1.6s steps(4, end) infinite;
	color: #4594D1;
}
@keyframes shelly-think-ellipsis {
	0%   { width: 0; }
	100% { width: 1em; }
}
.shelly-builder__think-sub {
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 36px;
	min-height: 18px;
}
.shelly-builder__think-stages {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 420px;
	width: 100%;
	text-align: left;
}
.shelly-builder__think-stages li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: var(--shelly-radius-md);
	background: rgba(69, 148, 209, 0.03);
	border: 1px solid rgba(69, 148, 209, 0.08);
	font: 700 12px/1.3 'Manrope', sans-serif;
	letter-spacing: 0.04em;
	color: #929292;
	transition: background 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms ease;
}
.shelly-builder__think-check {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid rgba(69, 148, 209, 0.25);
	background: #FFFFFF;
	flex: 0 0 auto;
	position: relative;
	transition: all 300ms ease;
}
.shelly-builder__think-stages li.is-active {
	color: #121212;
	background: rgba(69, 148, 209, 0.1);
	border-color: rgba(69, 148, 209, 0.4);
	transform: translateX(2px);
}
.shelly-builder__think-stages li.is-active .shelly-builder__think-check {
	border-color: #4594D1;
	background: radial-gradient(circle, #4594D1 0%, #4594D1 30%, transparent 35%);
	animation: shelly-think-check-pulse 1.1s ease-in-out infinite;
}
@keyframes shelly-think-check-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(69, 148, 209, 0.55); }
	50%      { box-shadow: 0 0 0 6px rgba(69, 148, 209, 0); }
}
.shelly-builder__think-stages li.is-done { color: #121212; }
.shelly-builder__think-stages li.is-done .shelly-builder__think-check {
	border-color: #11BA4B;
	background: #11BA4B;
	animation: none;
}
.shelly-builder__think-stages li.is-done .shelly-builder__think-check::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid #FFFFFF;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.shelly-builder__think-bar {
	width: 100%;
	max-width: 420px;
	height: 4px;
	background: rgba(69, 148, 209, 0.08);
	border-radius: 4px;
	overflow: hidden;
}
.shelly-builder__think-bar > span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #4594D1 0%, #4594D1 50%, #9CDBF6 100%);
	transition: width 560ms cubic-bezier(0.65, 0, 0.35, 1);
	box-shadow: 0 0 12px rgba(69, 148, 209, 0.6);
}

@media (prefers-reduced-motion: reduce) {
	.shelly-builder__badge-dot,
	.shelly-builder__think-orb,
	.shelly-builder__think-orb::after,
	.shelly-builder__think-ring,
	.shelly-builder__think-stages li.is-active .shelly-builder__think-check,
	.shelly-builder__think-dots::after { animation: none; }
}

/* ---------- Lead-capture modal (gates PNG download) ---------- */
.shelly-builder--modal-open { overflow: hidden; }
.shelly-builder__modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(11, 20, 25, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: shelly-modal-fade 220ms ease;
}
@keyframes shelly-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.shelly-builder__modal {
	position: relative;
	background: #FFFFFF;
	border-radius: var(--shelly-radius-xl);
	max-width: 480px;
	width: 100%;
	padding: 40px 36px 32px;
	box-shadow: 0 40px 100px rgba(11, 20, 25, 0.4), 0 12px 32px rgba(69, 148, 209, 0.25);
	border: 1px solid rgba(69, 148, 209, 0.12);
	animation: shelly-modal-pop 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes shelly-modal-pop {
	from { opacity: 0; transform: translateY(20px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.shelly-builder__modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(69, 148, 209, 0.06);
	border: 1px solid rgba(69, 148, 209, 0.12);
	color: #656669;
	font: 400 20px/1 'Manrope', sans-serif;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--shelly-transition);
}
.shelly-builder__modal-close:hover {
	background: #2481C7;
	color: #FFFFFF;
	border-color: transparent;
}
.shelly-builder__modal-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%);
	color: #FFFFFF;
	font: 700 22px/1 'Manrope', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 20px;
	box-shadow: 0 12px 28px rgba(69, 148, 209, 0.3);
}
.shelly-builder__modal-title {
	font: 400 28px/1.15 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}
.shelly-builder__modal-sub {
	font: 400 14px/1.55 'Manrope', sans-serif;
	color: #656669;
	margin: 0 0 24px;
}
.shelly-builder__modal-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.shelly-builder__modal-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.shelly-builder__modal-field span {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #656669;
}
.shelly-builder__modal-field input {
	font: 400 15px/1 'Manrope', sans-serif;
	padding: 14px 16px;
	border: 1.5px solid rgba(69, 148, 209, 0.15);
	border-radius: var(--shelly-radius-md);
	background: #FFFFFF;
	color: #121212;
	transition: all var(--shelly-transition);
	font-family: 'Manrope', sans-serif;
}
.shelly-builder__modal-field input:focus {
	outline: none;
	border-color: #4594D1;
	box-shadow: 0 0 0 3px rgba(69, 148, 209, 0.18);
}
.shelly-builder__modal-error {
	margin: 0;
	padding: 10px 14px;
	background: rgba(229, 72, 77, 0.08);
	border: 1px solid rgba(229, 72, 77, 0.25);
	border-radius: var(--shelly-radius-md);
	color: #B91C1C;
	font: 700 12px/1.4 'Manrope', sans-serif;
}
.shelly-builder__modal-submit {
	margin-top: 6px;
	padding: 16px 24px;
	background: linear-gradient(135deg, #4594D1 0%, #4594D1 100%);
	color: #FFFFFF;
	border: none;
	border-radius: var(--shelly-radius-pill);
	font: 700 14px/1 'Manrope', sans-serif;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 12px 28px rgba(69, 148, 209, 0.28);
	transition: all var(--shelly-transition);
	font-family: 'Manrope', sans-serif;
}
.shelly-builder__modal-submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(69, 148, 209, 0.36);
}
.shelly-builder__modal-submit:disabled {
	opacity: 0.7;
	cursor: wait;
}
.shelly-builder__modal-fineprint {
	margin: 18px 0 0;
	font: 400 11px/1.5 'Manrope', sans-serif;
	color: #929292;
	text-align: center;
}

@media (max-width: 539px) {
	.shelly-builder__modal { padding: 32px 24px 24px; }
	.shelly-builder__modal-title { font-size: 24px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 989px) {
	.shelly-builder { padding: 64px 0; }
	.shelly-builder__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-builder__head h2 { font-size: 32px; }
	.shelly-builder__app { padding: 24px; border-radius: var(--shelly-radius-lg); }
	.shelly-builder__h3 { font-size: 22px; }
	.shelly-builder__steps { margin-bottom: 24px; flex-wrap: wrap; }
	.shelly-builder__step { padding: 10px 8px; }
	.shelly-builder__step-label { font-size: 9px; letter-spacing: 0.04em; }
	.shelly-builder__summary { grid-template-columns: 1fr 1fr; padding: 24px; }
	.shelly-builder__product { flex-wrap: wrap; }
	.shelly-builder__product-price { text-align: left; width: 100%; display: flex; justify-content: space-between; gap: 12px; }
	.shelly-builder__nav { flex-direction: column-reverse; }
	.shelly-builder__btn { width: 100%; text-align: center; }
	.shelly-builder__counters { gap: 16px; }
	.shelly-builder__fp-canvas-wrap { height: 440px; }
	.shelly-builder__fp-toolbar { padding: 12px; gap: 4px; }
	.shelly-builder__fp-toolbar-label { width: 100%; text-align: center; margin: 0 0 6px; }
	.shelly-builder__fp-chip { font-size: 11px; padding: 6px 10px 6px 8px; }
	.shelly-builder__fp-detail { padding: 18px; }
	.shelly-builder__trust { gap: 14px 20px; }
	.shelly-builder__trust li { font-size: 11px; }
	.shelly-builder__think-title { font-size: 24px; }
	.shelly-builder__think-core { width: 160px; height: 160px; margin-bottom: 28px; }
	.shelly-builder__think { padding: 32px 12px 16px; min-height: 480px; }
}

/* ============================================================
 * PDP — Works with (compatibility chip grid)
 * Mirrors the section rhythm of .shelly-pdp-specs and the
 * eyebrow + headline style of the home page hero/sections.
 * ========================================================== */
.shelly-pdp-compat {
	position: relative;
	background: #FFFFFF;
	padding: 120px 0;
	overflow: hidden;
	border-top: 1px solid rgba(18, 18, 18, 0.05);
}
.shelly-pdp-compat__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x, 48px);
	position: relative;
	z-index: 1;
}
.shelly-pdp-compat__head {
	max-width: 720px;
	margin-bottom: 56px;
}
.shelly-pdp-compat__head .shelly-eyebrow {
	display: block;
	font: 700 12px/1.4 'Manrope', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4594D1;
	margin: 0 0 12px;
}
.shelly-pdp-compat__title {
	font: 400 48px/1.1 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}
.shelly-pdp-compat__lead {
	font: 400 18px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0;
	max-width: 600px;
}
.shelly-pdp-compat__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.shelly-pdp-compat__chip {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	background: #FFFFFF;
	border: 1px solid rgba(18, 18, 18, 0.1);
	border-radius: 0;
	transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.shelly-pdp-compat__chip:hover {
	border-color: #121212;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(18, 18, 18, 0.06);
}
.shelly-pdp-compat__chip-glyph {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #0B1419, #4594D1);
	color: #FFFFFF;
	font: 700 20px/1 'Manrope', sans-serif;
	letter-spacing: 0;
}
.shelly-pdp-compat__chip-name {
	flex: 1 1 auto;
	font: 600 15px/1.2 'Manrope', sans-serif;
	color: #121212;
}
.shelly-pdp-compat__chip-tag {
	flex: 0 0 auto;
	font: 700 10px/1 'Manrope', sans-serif;
	color: #656669;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 10px;
	border: 1px solid rgba(18, 18, 18, 0.1);
}
@media (max-width: 1024px) {
	.shelly-pdp-compat { padding: 80px 0; }
	.shelly-pdp-compat__title { font-size: 36px; }
	.shelly-pdp-compat__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.shelly-pdp-compat { padding: 60px 0; }
	.shelly-pdp-compat__title { font-size: 28px; }
	.shelly-pdp-compat__head { margin-bottom: 32px; }
	.shelly-pdp-compat__grid { grid-template-columns: 1fr; gap: 10px; }
	.shelly-pdp-compat__chip { padding: 16px 18px; gap: 12px; }
	.shelly-pdp-compat__chip-glyph { width: 36px; height: 36px; font-size: 16px; }
	.shelly-pdp-compat__chip-tag { display: none; }
}

/* ============================================================
 * PDP — Related products section padding alignment
 * .shelly-carousel already styles the carousel internals;
 * this adds the right vertical breathing room on PDP.
 * ========================================================== */
.shelly-pdp-related.shelly-carousel {
	background: #FAFAFA;
	padding: 100px 0;
	border-top: 1px solid rgba(18, 18, 18, 0.05);
}
@media (max-width: 1024px) {
	.shelly-pdp-related.shelly-carousel { padding: 72px 0; }
}
@media (max-width: 600px) {
	.shelly-pdp-related.shelly-carousel { padding: 56px 0; }
}

/* ============================================================
 * PDP — Use cases section override
 * Reuses the home's .shelly-usecases pattern; reduce vertical
 * padding slightly so it nests inside the PDP rhythm.
 * ========================================================== */
.shelly-product .shelly-usecases {
	padding-top: 80px;
	padding-bottom: 80px;
	border-top: 1px solid rgba(18, 18, 18, 0.05);
}
@media (max-width: 600px) {
	.shelly-product .shelly-usecases {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/* ============================================================
 * PDP — Small-phone refinements (≤600px)
 * The 989px breakpoint already stacks the hero columns and tames
 * the watermark; this layer tightens hero padding, typography,
 * specs, quantity inputs and the variations table for real phones.
 * ========================================================== */
@media (max-width: 600px) {
	/* Hero ---------------------------------------------------- */
	.shelly-pdp-hero { padding: 0 0 40px; }
	.shelly-pdp-hero__watermark { font-size: 80px; top: 8px; right: -8px; }
	.shelly-pdp-hero__breadcrumbs.wc-block-breadcrumbs,
	.shelly-pdp-hero .wc-block-breadcrumbs { padding: 16px 0 12px; font-size: 12px; }
	.shelly-pdp-hero__grid { gap: 24px; padding: 8px 0 0; }
	.shelly-pdp-hero__gallery { padding: 16px; }
	.shelly-pdp-hero__gallery-tag { display: none; }
	.shelly-pdp-summary__title.wp-block-post-title { font-size: 28px !important; line-height: 1.15 !important; margin: 12px 0 12px !important; }
	.shelly-pdp-summary__price { font-size: 24px !important; }
	.shelly-pdp-summary__excerpt { font-size: 14px !important; }
	.shelly-pdp-summary__eyebrow-row .shelly-eyebrow,
	.shelly-pdp-summary__eyebrow-row .wc-block-components-product-sku { font-size: 11px !important; }

	/* Buy form ----------------------------------------------- */
	.shelly-pdp-buy { gap: 14px !important; }
	.shelly-pdp-buy table.variations select,
	.shelly-pdp-buy .variations select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
	.shelly-pdp-buy table.variations td,
	.shelly-pdp-buy table.variations th { display: block !important; width: 100% !important; padding: 4px 0 !important; }
	/* Smaller quantity input on phones — 48px is the touch-target sweet spot */
	.shelly-pdp-buy div.quantity input.qty,
	.shelly-pdp-buy .wqpmb_quantity input.qty { height: 48px !important; width: 60px !important; font-size: 16px !important; }
	.shelly-pdp-buy .wqpmb_button,
	.shelly-pdp-buy .qib-button { width: 40px !important; height: 48px !important; font-size: 18px !important; }
	.shelly-pdp-buy .single_add_to_cart_button,
	.shelly-pdp-buy button.single_add_to_cart_button {
		width: 100% !important;
		font-size: 14px !important;
		padding: 14px 18px !important;
	}
	.shelly-pdp-secondary { margin-bottom: 24px !important; }

	/* Warranty badge ----------------------------------------- */
	.shelly-pdp-warranty { font-size: 13px !important; padding: 8px 12px !important; }

	/* Specs section ------------------------------------------ */
	.shelly-pdp-specs { padding: 48px 0; }
	.shelly-pdp-specs__watermark { font-size: 100px; bottom: -20px; }
	.shelly-pdp-specs__head { margin-bottom: 28px; }
	.shelly-pdp-specs__head h2 { font-size: 28px; }
	.shelly-pdp-specs__lead { font-size: 14px; }
	.shelly-pdp-specs__card { padding: 20px; }
	.shelly-pdp-specs__card-head h3 { font-size: 18px; }

	/* Features list ------------------------------------------ */
	.shelly-pdp-features__list { gap: 8px; }
}

/* ============================================================
 * PDP — Add-to-cart button safety (always full-width on tablet
 * and below — prevents content from being squeezed inside an
 * inline-flex ancestor on narrow viewports).
 * ========================================================== */
@media (max-width: 989px) {
	.shelly-pdp-buy .single_add_to_cart_button,
	.shelly-pdp-buy button.single_add_to_cart_button {
		width: 100% !important;
	}
	.shelly-pdp-buy form.cart,
	.shelly-pdp-buy .wp-block-woocommerce-add-to-cart-form form.cart {
		gap: 14px !important;
	}
}

/* ============================================================
 * Global: prevent horizontal overflow caused by full-bleed
 * watermarks on very small viewports.
 * ========================================================== */
@media (max-width: 600px) {
	body { overflow-x: hidden; }
}

/* ============================================================
 * Mobile horizontal-overflow guard
 *
 * Without this, a few full-bleed tricks (carousel track-wrap
 * negative margins, watermark right:-8px, WC gallery flex
 * markup) can briefly extend layout width past 100vw on phones,
 * which iOS Safari renders as a sideways scroll — visible as a
 * portion of empty whitespace on the right and content clipped
 * on the left. overflow-x: clip on <html> (with hidden as a
 * legacy fallback) is the only reliable cross-browser fix.
 * ========================================================== */
html, body {
	overflow-x: clip;
	overflow-x: hidden; /* fallback for engines without overflow:clip */
	max-width: 100%;
}
@media (max-width: 989px) {
	body {
		position: relative;
	}
	/* Stop full-bleed carousel breakout on phones — it must stay
	   inside the viewport, otherwise iOS scrolls the page sideways. */
	.shelly-carousel__track-wrap {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Compat chip grid + use-case grid — never wider than viewport */
	.shelly-pdp-compat__inner,
	.shelly-pdp-specs__inner,
	.shelly-pdp-hero__inner,
	.shelly-usecases__inner,
	.shelly-carousel__inner {
		max-width: 100%;
		box-sizing: border-box;
	}
	/* WC product gallery — keep images clamped to container */
	.shelly-pdp-hero__gallery img,
	.shelly-pdp-hero__gallery .wp-post-image,
	.shelly-pdp-hero__gallery figure { max-width: 100%; height: auto; }
	/* Breadcrumbs may render as flex with nowrap by default — wrap them */
	.shelly-pdp-hero .wc-block-breadcrumbs {
		flex-wrap: wrap;
		white-space: normal;
		word-break: break-word;
	}
}

/* ============================================================
 * PDP — WC product gallery / FlexSlider mobile containment
 *
 * After FlexSlider initializes the gallery, it injects markup
 * with absolutely-positioned next/prev arrows and transforms
 * on the viewport / thumbs. On phones those can spill past the
 * gallery card and produce a left-clipped first thumb plus a
 * stray blue arrow chip glued to the right edge. Lock everything
 * to the gallery container width and remove transforms so the
 * gallery and thumbs stay flush.
 * ========================================================== */
@media (max-width: 989px) {
	.shelly-pdp-hero__gallery,
	.shelly-pdp-hero__gallery .woocommerce-product-gallery,
	.shelly-pdp-hero__gallery .woocommerce-product-gallery__wrapper {
		max-width: 100%;
		overflow: hidden;
	}
	.shelly-pdp-hero__gallery .flex-viewport {
		max-width: 100% !important;
		overflow: hidden !important;
	}
	.shelly-pdp-hero__gallery .flex-control-nav,
	.shelly-pdp-hero__gallery .flex-control-thumbs {
		max-width: 100% !important;
		padding: 0 !important;
		margin: 16px 0 0 !important;
		justify-content: flex-start !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		flex-wrap: nowrap !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.shelly-pdp-hero__gallery .flex-control-nav::-webkit-scrollbar,
	.shelly-pdp-hero__gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
	.shelly-pdp-hero__gallery .flex-control-thumbs li { flex: 0 0 64px; width: 64px !important; }

	/* FlexSlider direction arrows (next/prev) — absolute-positioned
	   half-circle controls. Hide on phones; users swipe instead. */
	.shelly-pdp-hero__gallery .flex-direction-nav,
	.shelly-pdp-hero__gallery .flex-direction-nav a,
	.shelly-pdp-hero__gallery .flex-prev,
	.shelly-pdp-hero__gallery .flex-next,
	.shelly-pdp-hero__gallery .flex-direction-nav .flex-prev,
	.shelly-pdp-hero__gallery .flex-direction-nav .flex-next {
		display: none !important;
	}

	/* WC's grid-mode (no flexslider) gallery — also clamp the
	   per-image floats inside the gallery card. */
	.shelly-pdp-hero__gallery .woocommerce-product-gallery--columns-4 .woocommerce-product-gallery__image:not(:first-child) {
		width: calc((100% - 24px) / 4) !important;
		margin: 0 8px 8px 0 !important;
		float: none !important;
		display: inline-block !important;
		vertical-align: top;
	}
	.shelly-pdp-hero__gallery .woocommerce-product-gallery--columns-4 .woocommerce-product-gallery__image:nth-child(4n+1):not(:first-child) {
		margin-right: 0 !important;
	}
	.shelly-pdp-hero__gallery .woocommerce-product-gallery__wrapper {
		font-size: 0; /* eliminates inline-block whitespace */
	}
	.shelly-pdp-hero__gallery .woocommerce-product-gallery__wrapper > * {
		font-size: 1rem;
	}
}

/* ============================================================
 * Final overflow / left-shift defense
 *
 * Belt-and-braces: keep <html>, <body>, <main> and the top-level
 * full-bleed sections strictly anchored at left:0 with no
 * inherited transforms or negative margins. Cures any residual
 * horizontal scroll glitch that overflow:clip alone can't catch
 * (notably WC's hidden screen-reader spans + any inline JS that
 * touches scrollLeft on iOS).
 * ========================================================== */
html { width: 100%; max-width: 100%; }
body { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
.wp-site-blocks { max-width: 100%; }

/* Prevent screen-reader-only elements from forcing horizontal overflow.
   Some WC blocks output hidden text with width: 100% inside an absolutely
   positioned container that keeps a 1px footprint — but on iOS Safari,
   when those parents lose their `overflow: hidden`, the "1px" can escape. */
.screen-reader-text,
.wp-block-search__input.screen-reader-text {
	clip: rect(1px,1px,1px,1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
}

/* ============================================================
 * Mega menu (WP-3) — desktop mega-panel navigation.
 * Pure CSS: panels open on hover AND :focus-within (keyboard).
 * Flat design (radius 0 per WP-2). Hidden <=1024px alongside the
 * rest of .shelly-header__nav (existing rule at the mobile bp).
 * ========================================================== */
.shelly-header__nav.shelly-nav { position: static; }
.shelly-nav .shelly-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}
.shelly-nav .shelly-nav__item {
	display: flex;
	align-items: center;
	position: static;
}

/* Top-level triggers (links + <button> share one look) — shelly.com semibold */
.shelly-nav .shelly-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 40px;
	font: 600 14.5px/1 'Manrope', sans-serif;
	color: #121519;
	padding: 0 13px;
	border-radius: 0;
	white-space: nowrap;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color var(--shelly-transition);
	text-decoration: none;
}
.shelly-nav .shelly-nav__item:hover > .shelly-nav__link,
.shelly-nav .shelly-nav__item:focus-within > .shelly-nav__link,
.shelly-nav .shelly-nav__link:hover,
.shelly-nav .shelly-nav__link:focus-visible {
	background: transparent;
	color: #0361A7;
}
/* Dropdown caret — small chevron, rotates when its panel is open */
.shelly-nav .shelly-nav__caret {
	display: inline-flex;
	align-items: center;
	color: #656669;
	transition: transform var(--shelly-transition), color var(--shelly-transition);
}
.shelly-nav .shelly-nav__caret svg { display: block; }
.shelly-nav .shelly-nav__item:hover > .shelly-nav__link .shelly-nav__caret,
.shelly-nav .shelly-nav__item:focus-within > .shelly-nav__link .shelly-nav__caret {
	color: #0361A7;
	transform: rotate(180deg);
}
@media (max-width: 1439px) {
	.shelly-nav .shelly-nav__list { gap: 2px; }
	.shelly-nav .shelly-nav__link { padding: 0 10px; font-size: 13.5px; }
}
@media (max-width: 1199px) {
	.shelly-nav .shelly-nav__link { padding: 0 8px; font-size: 13px; }
}

/* Mega panel — full-width dropdown box */
.shelly-nav .shelly-nav__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #FFFFFF;
	border-top: 1px solid rgba(18,18,18,.08);
	border-bottom: 1px solid rgba(18,18,18,.08);
	box-shadow: 0 24px 40px -24px rgba(18,18,18,.18);
	border-radius: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--shelly-transition), transform var(--shelly-transition), visibility 0s linear var(--shelly-transition);
	z-index: 90;
}
.shelly-nav .shelly-nav__item--mega:hover > .shelly-nav__panel,
.shelly-nav .shelly-nav__item--mega:focus-within > .shelly-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--shelly-transition), transform var(--shelly-transition), visibility 0s;
}
.shelly-nav .shelly-nav__panel-inner {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 36px var(--shelly-pad-x) 40px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 40px;
}
.shelly-nav .shelly-nav__panel--narrow .shelly-nav__panel-inner {
	grid-template-columns: repeat(2, minmax(0, 320px));
	justify-content: start;
}

/* Panel columns — override base .shelly-header__nav ul/a rules */
.shelly-header__nav.shelly-nav .shelly-nav__col { display: block; }
.shelly-header__nav.shelly-nav .shelly-nav__col-title {
	font: 700 11px/1.2 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #656669;
	margin: 0 0 14px;
}
.shelly-header__nav.shelly-nav .shelly-nav__col ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.shelly-header__nav.shelly-nav .shelly-nav__col li {
	display: block;
	margin: 0 0 2px;
}
.shelly-header__nav.shelly-nav .shelly-nav__col a {
	display: block;
	height: auto;
	font: 500 14px/1.35 'Manrope', sans-serif;
	color: #121212;
	padding: 7px 8px;
	border-radius: 0;
	background: transparent;
	white-space: normal;
}
.shelly-header__nav.shelly-nav .shelly-nav__col a:hover,
.shelly-header__nav.shelly-nav .shelly-nav__col a:focus-visible {
	background: rgba(69, 148, 209, 0.08);
	color: #0361A7;
}
.shelly-header__nav.shelly-nav .shelly-nav__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(18,18,18,.08);
}
.shelly-header__nav.shelly-nav .shelly-nav__quick a {
	display: inline-flex;
	font: 700 13px/1 'Manrope', sans-serif;
	color: #0361A7;
	padding: 0;
	background: transparent;
}
.shelly-header__nav.shelly-nav .shelly-nav__quick a:hover {
	color: #2481C7;
	background: transparent;
}

/* ============================================================
 * Mobile drawer (slide-in from left) — shelly.com mobile menu.
 * Populated by frontend-nav.js which clones the desktop nav
 * tree and turns each mega item into a tap-to-expand accordion.
 * ========================================================== */
.shelly-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
}
.shelly-drawer.is-open { visibility: visible; pointer-events: auto; }
.shelly-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(7, 8, 8, 0.5);
	opacity: 0;
	transition: opacity var(--shelly-transition);
}
.shelly-drawer.is-open .shelly-drawer__overlay { opacity: 1; }
.shelly-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: min(86vw, 380px);
	background: #FFFFFF;
	box-shadow: 0 0 40px rgba(18, 21, 25, 0.2);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.28s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.shelly-drawer.is-open .shelly-drawer__panel { transform: translateX(0); }
.shelly-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(18, 21, 25, 0.08);
	position: sticky;
	top: 0;
	background: #FFFFFF;
	z-index: 1;
}
.shelly-drawer__brand { font: 800 16px/1 'Manrope', sans-serif; color: #121519; letter-spacing: 0.01em; }
.shelly-drawer__close {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; color: #121519; cursor: pointer;
}
.shelly-drawer__nav { padding: 8px 0; flex: 1 1 auto; }
/* Drawer nav uses the cloned .shelly-nav markup, restyled vertical */
.shelly-drawer__nav .shelly-nav__list {
	display: block;
	margin: 0; padding: 0; list-style: none;
}
.shelly-drawer__nav .shelly-nav__item { display: block; border-bottom: 1px solid rgba(18, 21, 25, 0.06); }
.shelly-drawer__nav .shelly-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: auto;
	gap: 8px;
	padding: 15px 20px;
	font: 600 15px/1.2 'Manrope', sans-serif;
	color: #121519;
	background: transparent;
	border: 0;
	text-align: left;
}
.shelly-drawer__nav .shelly-nav__caret { margin-left: auto; }
.shelly-drawer__nav .shelly-nav__item.is-expanded > .shelly-nav__link .shelly-nav__caret { transform: rotate(180deg); }
/* Panels: static, collapsed by default, revealed when the item is expanded */
.shelly-drawer__nav .shelly-nav__panel {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	background: #F9F9F9;
	display: none;
}
.shelly-drawer__nav .shelly-nav__item.is-expanded > .shelly-nav__panel { display: block; }
.shelly-drawer__nav .shelly-nav__panel-inner {
	display: block;
	max-width: none;
	margin: 0;
	padding: 4px 20px 16px;
}
.shelly-drawer__nav .shelly-nav__col { display: block; margin-top: 14px; }
.shelly-drawer__nav .shelly-nav__col-title {
	font: 700 11px/1.2 'Manrope', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #656669;
	margin: 0 0 8px;
}
.shelly-drawer__nav .shelly-nav__col ul { list-style: none; margin: 0; padding: 0; }
.shelly-drawer__nav .shelly-nav__col li { margin: 0; }
.shelly-drawer__nav .shelly-nav__col a {
	display: block;
	padding: 8px 0;
	font: 500 14px/1.35 'Manrope', sans-serif;
	color: #334155;
}
.shelly-drawer__nav .shelly-nav__col a:hover { color: #0361A7; }
.shelly-drawer__nav .shelly-nav__quick { display: flex; gap: 16px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid rgba(18,21,25,.08); }
.shelly-drawer__nav .shelly-nav__quick a { font: 700 13px/1 'Manrope', sans-serif; color: #0361A7; }
.shelly-drawer__links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 20px 28px;
	border-top: 1px solid rgba(18, 21, 25, 0.08);
}
.shelly-drawer__links a {
	padding: 11px 0;
	font: 600 14.5px/1 'Manrope', sans-serif;
	color: #121519;
}
.shelly-drawer__links a:hover { color: #0361A7; }
/* Lock body scroll while the drawer is open */
html.shelly-drawer-open, html.shelly-drawer-open body { overflow: hidden; }
/* Drawer only exists on mobile; never show its box on desktop */
@media (min-width: 1180px) {
	.shelly-drawer { display: none; }
}

/* ============================================================
   HOMEPAGE (shelly.com clone) — new section patterns
   ============================================================ */

/* ---------- Metrics band ---------- */
.shelly-metrics {
	/* Shelly's deep blue: continues the hero banner and separates it from the black band below. */
	background: linear-gradient(90deg, #004B83 0%, #003C82 100%);
	color: #FDFDFD;
	padding: 72px 0;
	border-top: 1px solid rgba(156, 219, 246, 0.18);
	border-bottom: 0;
}
.shelly-metrics__inner {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--shelly-gutter);
}
.shelly-metrics__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 24px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.shelly-metrics__item:first-child { border-left: 0; padding-left: 0; }
.shelly-metrics__value {
	font: 400 clamp(40px, 5vw, 60px)/1 'Manrope', sans-serif;
	letter-spacing: -0.02em;
	color: #FDFDFD;
}
.shelly-metrics__value-sub { font-size: 0.5em; color: #4594D1; }
.shelly-metrics__label {
	font: 400 14px/1.4 'Manrope', sans-serif;
	color: #A9B2C4;
}
@media (max-width: 989px) {
	.shelly-metrics { padding: 48px 0; }
	.shelly-metrics__inner { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
	.shelly-metrics__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---------- Text banner ---------- */
.shelly-textbanner {
	background: #FFFFFF;
	padding: 120px 0;
	border-bottom: 1px solid var(--shelly-hairline);
}
.shelly-textbanner__inner {
	max-width: 1100px;
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
	text-align: center;
}
.shelly-textbanner .shelly-eyebrow { display: block; margin-bottom: 16px; }
.shelly-textbanner__title {
	font: 400 clamp(30px, 4vw, 48px)/1.15 'Manrope', sans-serif;
	letter-spacing: -0.01em;
	color: #121212;
	margin: 0 auto 32px;
	max-width: 24ch;
}
.shelly-textbanner .wp-block-buttons { justify-content: center; }
@media (max-width: 989px) { .shelly-textbanner { padding: 72px 0; } }

/* ---------- Video band ---------- */
.shelly-video {
	background: #F9F9F9;
	padding: 100px 0;
}
.shelly-video__inner {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}
.shelly-video__stage {
	position: relative;
	min-height: 560px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border: 1px solid var(--shelly-hairline-strong);
}
.shelly-video__stage::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 8, 8, 0) 40%, rgba(7, 8, 8, 0.72) 100%);
}
.shelly-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 88px;
	height: 88px;
	border-radius: var(--shelly-radius-pill);
	border: 0;
	background: rgba(255, 255, 255, 0.92);
	color: #0361A7;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--shelly-transition), background var(--shelly-transition);
	box-shadow: 0 12px 40px rgba(7, 8, 8, 0.35);
}
.shelly-video__play:hover { transform: translate(-50%, -50%) scale(1.06); background: #FFFFFF; }
.shelly-video__play-icon { font-size: 26px; margin-left: 4px; line-height: 1; }
.shelly-video__caption {
	position: relative;
	z-index: 1;
	padding: 48px;
	max-width: 640px;
}
.shelly-video__caption .shelly-eyebrow { color: #9FC6E8; display: block; margin-bottom: 12px; }
.shelly-video__title {
	font: 400 clamp(26px, 3vw, 40px)/1.2 'Manrope', sans-serif;
	color: #FDFDFD;
	margin: 0;
	letter-spacing: -0.01em;
}
@media (max-width: 989px) {
	.shelly-video { padding: 64px 0; }
	.shelly-video__stage { min-height: 420px; }
	.shelly-video__caption { padding: 28px; }
	.shelly-video__play { width: 68px; height: 68px; }
}

/* ---------- App promo ---------- */
.shelly-apppromo {
	background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%);
	padding: 120px 0;
	border-top: 1px solid rgba(69, 148, 209, 0.08);
}
.shelly-apppromo__inner {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}
.shelly-apppromo__head { max-width: 720px; margin-bottom: 56px; }
.shelly-apppromo__head .shelly-eyebrow { display: block; margin-bottom: 12px; }
.shelly-apppromo__title {
	font: 400 clamp(32px, 4vw, 48px)/1.1 'Manrope', sans-serif;
	letter-spacing: -0.01em;
	color: #121212;
	margin: 0 0 16px;
}
.shelly-apppromo__lead {
	font: 400 16px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0;
	max-width: 60ch;
}
.shelly-apppromo__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.shelly-apppromo__media {
	border: 1px solid var(--shelly-hairline-strong);
	background: #FFFFFF;
	overflow: hidden;
}
.shelly-apppromo__media img { display: block; width: 100%; height: auto; }
.shelly-apppromo__features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--shelly-gutter);
}
.shelly-apppromo__feature {
	background: #FFFFFF;
	border: 1px solid rgba(69, 148, 209, 0.08);
	padding: 28px;
	transition: border-color var(--shelly-transition), transform var(--shelly-transition), box-shadow var(--shelly-transition);
}
.shelly-apppromo__feature:hover {
	border-color: rgba(69, 148, 209, 0.3);
	transform: translateY(-3px);
	box-shadow: 0 16px 48px rgba(69, 148, 209, 0.1);
}
.shelly-apppromo__icon { width: 44px; height: 44px; margin-bottom: 18px; display: block; }
.shelly-apppromo__feature h3 {
	font: 400 19px/1.3 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 8px;
}
.shelly-apppromo__feature p {
	font: 400 14px/1.55 'Manrope', sans-serif;
	color: #656669;
	margin: 0;
}
@media (max-width: 989px) {
	.shelly-apppromo { padding: 72px 0; }
	.shelly-apppromo__body { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) { .shelly-apppromo__features { grid-template-columns: 1fr; } }

/* ---------- Solutions grid ---------- */
.shelly-solutions {
	background: #FFFFFF;
	padding: 120px 0;
	border-top: 1px solid var(--shelly-hairline);
}
.shelly-solutions__inner {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}
.shelly-solutions__head { max-width: 720px; margin-bottom: 48px; }
.shelly-solutions__head .shelly-eyebrow { display: block; margin-bottom: 12px; }
.shelly-solutions__title {
	font: 400 clamp(32px, 4vw, 48px)/1.1 'Manrope', sans-serif;
	letter-spacing: -0.01em;
	color: #121212;
	margin: 0 0 16px;
}
.shelly-solutions__lead {
	font: 400 16px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0;
	max-width: 60ch;
}
.shelly-solutions__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--shelly-gutter);
}
.shelly-solutions__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px;
	min-height: 200px;
	background:
		radial-gradient(ellipse 90% 90% at 100% 0%, rgba(69, 148, 209, 0.08) 0%, rgba(69, 148, 209, 0) 60%),
		#FFFFFF;
	border: 1px solid rgba(69, 148, 209, 0.08);
	color: #121212;
	transition: border-color var(--shelly-transition), transform var(--shelly-transition), box-shadow var(--shelly-transition);
}
.shelly-solutions__tile:hover {
	border-color: rgba(69, 148, 209, 0.3);
	transform: translateY(-4px);
	box-shadow: 0 20px 56px rgba(69, 148, 209, 0.12);
}
.shelly-solutions__icon { width: 56px; height: 56px; display: block; }
.shelly-solutions__tile-title {
	font: 400 22px/1.25 'Manrope', sans-serif;
	color: #121212;
	margin: 0;
	max-width: 16ch;
}
.shelly-solutions__tile-arrow {
	margin-top: auto;
	font-size: 20px;
	color: #0361A7;
	transition: transform var(--shelly-transition);
}
.shelly-solutions__tile:hover .shelly-solutions__tile-arrow { transform: translateX(6px); }
@media (max-width: 989px) {
	.shelly-solutions { padding: 72px 0; }
	.shelly-solutions__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .shelly-solutions__grid { grid-template-columns: 1fr; } }

/* ---------- Two-column journey ---------- */
.shelly-journey {
	background: #F9F9F9;
	padding: 120px 0;
	border-top: 1px solid rgba(69, 148, 209, 0.08);
}
.shelly-journey__inner {
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	padding: 0 var(--shelly-pad-x);
}
.shelly-journey__head { max-width: 760px; margin-bottom: 48px; }
.shelly-journey__head .shelly-eyebrow { display: block; margin-bottom: 12px; }
.shelly-journey__title {
	font: 400 clamp(32px, 4vw, 48px)/1.1 'Manrope', sans-serif;
	letter-spacing: -0.01em;
	color: #121212;
	margin: 0;
}
.shelly-journey__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--shelly-gutter);
}
.shelly-journey__card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid rgba(69, 148, 209, 0.08);
	color: #121212;
	overflow: hidden;
	transition: border-color var(--shelly-transition), transform var(--shelly-transition), box-shadow var(--shelly-transition);
}
.shelly-journey__card:hover {
	border-color: rgba(69, 148, 209, 0.3);
	transform: translateY(-4px);
	box-shadow: 0 24px 64px rgba(69, 148, 209, 0.14);
}
.shelly-journey__card-media {
	height: 320px;
	background-size: cover;
	background-position: center;
}
.shelly-journey__card-body { padding: 40px; }
.shelly-journey__card-title {
	font: 400 28px/1.2 'Manrope', sans-serif;
	color: #121212;
	margin: 0 0 12px;
	letter-spacing: -0.005em;
}
.shelly-journey__card-desc {
	font: 400 15px/1.6 'Manrope', sans-serif;
	color: #656669;
	margin: 0 0 20px;
}
.shelly-journey__card-link {
	font: 700 14px/1 'Manrope', sans-serif;
	color: #0361A7;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.shelly-journey__card:hover .shelly-journey__card-link span { transform: translateX(5px); }
.shelly-journey__card-link span { transition: transform var(--shelly-transition); }
@media (max-width: 989px) {
	.shelly-journey { padding: 72px 0; }
	.shelly-journey__grid { grid-template-columns: 1fr; }
	.shelly-journey__card-media { height: 240px; }
	.shelly-journey__card-body { padding: 28px; }
}

/* ============================================================
 * Header layout with the persistent Shop CTA
 * Side columns size to their content and the nav centres in the
 * space that is left, so the CTA can never sit on top of the nav.
 * Below 1180px the full nav no longer fits: switch to the drawer.
 * ========================================================== */
.shelly-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
.shelly-header__nav { justify-self: center; min-width: 0; }

/* Search takes one 40px icon slot; its field opens leftwards as an overlay
   instead of reserving 220px of empty header. */
.shelly-header__search { position: relative; width: 40px; flex: 0 0 40px; }
.shelly-header__search .wp-block-search { position: absolute; top: 0; right: 0; pointer-events: none; }
.shelly-header__search .wp-block-search__button,
.shelly-header__search:hover .wp-block-search__input,
.shelly-header__search .wp-block-search__inside-wrapper:focus-within .wp-block-search__input { pointer-events: auto; }
.shelly-header__search:hover .wp-block-search__inside-wrapper,
.shelly-header__search .wp-block-search__inside-wrapper:focus-within { background: #FFFFFF !important; }
.shelly-header__shop { margin-left: 8px !important; }

/* Mini-cart: .wc-block-mini-cart__quantity-badge is the icon WRAPPER in current
   WooCommerce; only .wc-block-mini-cart__badge is the count bubble. */
.shelly-header__utils .wc-block-mini-cart__quantity-badge {
	position: relative !important;
	top: auto; right: auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: auto; height: auto;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: inherit !important;
}
.shelly-header__utils .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge {
	position: absolute;
	top: -8px; right: -10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}
.shelly-header__utils .wc-block-mini-cart__badge:empty { display: none; }
@media (max-width: 1599px) {
	.shelly-nav .shelly-nav__list { gap: 2px; }
	.shelly-nav .shelly-nav__link { padding: 0 10px; font-size: 14px; }
	.shelly-header__utils { gap: 12px; }
}
@media (max-width: 1439px) {
	.shelly-nav .shelly-nav__link { padding: 0 8px; font-size: 13.5px; }
	.shelly-header__shop { padding: 0 14px; font-size: 13px; }
}
@media (max-width: 1279px) {
	.shelly-nav .shelly-nav__link { padding: 0 7px; font-size: 13px; }
	.shelly-header__icon--secondary { display: none !important; }
}
@media (max-width: 1179px) {
	.shelly-header__inner { grid-template-columns: auto 1fr auto; gap: 12px; }
	.shelly-header__lead { justify-self: start; }
	.shelly-header__burger { display: flex; }
	.shelly-header__nav { display: none; }
	.shelly-header__search { display: none !important; }
}

/* Experience Centre entry in the primary nav */
.shelly-nav__badge { display: inline-block; margin-left: 6px; padding: 3px 5px; font: 700 9.5px/1 'Manrope', sans-serif; letter-spacing: 0.06em; color: #FFFFFF; background: #0361A7; vertical-align: 1px; }

/* ============================================================
 * Depth layer (assets/depth.js). Cards lean towards the pointer and
 * catch a moving highlight; the hero shifts in parallax.
 * ========================================================== */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.shelly-tilt {
		position: relative;
		transform: perspective(1000px) rotateX(calc(var(--ty, 0) * -4.5deg)) rotateY(calc(var(--tx, 0) * 5.5deg)) translateZ(0);
		transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 420ms ease;
		will-change: transform;
	}
	.shelly-tilt.is-tilting { transition-duration: 90ms, 300ms; box-shadow: 0 34px 60px -34px rgba(11, 20, 25, 0.45); z-index: 2; }
	.shelly-tilt__glare {
		position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
		background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 55%);
		mix-blend-mode: soft-light; transition: opacity 300ms ease;
	}
	.shelly-tilt.is-tilting > .shelly-tilt__glare { opacity: 1; }
	/* Horizontal only: the banner art is wider than the panel, so a sideways shift never exposes an edge. */
	.shelly-hs__panel { background-position: calc(50% + var(--px, 0) * -16px) 50%; }
	.shelly-hs__side { transform: translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 6px), 0); transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1); }
}

/* 3D experience switched off (inc/experience.php): hide every way in. */
.shelly-xp-off .shelly-nav__item:has(> a[href="/experience/"]),
.shelly-xp-off .shelly-nav__panel a[href="/experience/"],
.shelly-xp-off .shelly-drawer__links a[href="/experience/"],
.shelly-xp-off .shelly-drawer__nav a[href="/experience/"],
.shelly-xp-off a[href^="/experience/"].shelly-discover__planner { display: none !important; }

/* Pages framed inside the 3D store (inc/store-3d.php): no review bar, no cookie prompt noise. */
.shelly-in-store .shelly-review { display: none !important; }

/* 3D store switched off (inc/store-3d.php): its links disappear from the header and drawer. */
.shelly-store-3d-off .shelly-nav__item:has(> a[href="/store-3d/"]),
.shelly-store-3d-off .shelly-drawer__links a[href="/store-3d/"],
.shelly-store-3d-off .shelly-nav__panel a[href="/store-3d/"] { display: none !important; }

/* ============================================================
 * Smart Home Planner · 3D model (theme 1.9.0)
 * The floor plan as a CSS 3D model: rooms keep their plan coordinates,
 * the stage is tilted (--tilt) and turned (--rot), walls rise from each
 * room's edges, and labels and devices are billboards facing the viewer.
 * ========================================================== */
@property --rot { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --tilt { syntax: '<angle>'; inherits: true; initial-value: 58deg; }

.shelly-builder__fp-views { display: inline-flex; gap: 4px; margin: 0 0 14px; padding: 4px; background: #FFFFFF; border: 1px solid rgba(69, 148, 209, 0.18); border-radius: 999px; box-shadow: 0 6px 20px rgba(69, 148, 209, 0.12); }
.shelly-builder__fp-views button { padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; color: #0361A7; font: 700 13px/1 'Manrope', sans-serif; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.shelly-builder__fp-views button:hover { background: rgba(69, 148, 209, 0.1); }
.shelly-builder__fp-views button.is-active { background: linear-gradient(90deg, #4594D1 0%, #003C82 100%); color: #FFFFFF; }

.sb3d { --wall: 34px; position: relative; }
.sb3d__viewport { position: relative; height: 560px; overflow: hidden; perspective: 1900px; perspective-origin: 50% 30%; border-radius: var(--shelly-radius-lg, 16px); border: 1px solid rgba(69, 148, 209, 0.14); background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #EEF4F9 55%, #DCE8F2 100%); cursor: grab; touch-action: none; user-select: none; }
.sb3d.is-orbiting .sb3d__viewport { cursor: grabbing; }
.sb3d__stage { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), --rot 700ms cubic-bezier(0.22, 1, 0.36, 1), --tilt 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.sb3d.is-orbiting .sb3d__stage, .sb3d--readonly .sb3d__stage { transition: none; }

.sb3d__ground { position: absolute; inset: -56px; border-radius: 36px; transform: translateZ(-2px); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(233, 240, 246, 0.9) 70%, rgba(220, 232, 242, 0) 100%); }
.sb3d__ground::after { content: ""; position: absolute; inset: 56px; border-radius: 12px; background: rgba(0, 40, 90, 0.28); filter: blur(22px); transform: translate(10px, 14px); }

.sb3d__room { position: absolute; transform-style: preserve-3d; cursor: pointer; }
.sb3d__floor { position: absolute; inset: 0; background-color: #E9E4DC; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); transition: filter 200ms ease; }
.sb3d__floor::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: background 200ms ease; }
.sb3d__room:hover .sb3d__floor { filter: brightness(1.06); }
/* Floors by room type */
.sb3d__room--living_room .sb3d__floor, .sb3d__room--bedroom .sb3d__floor, .sb3d__room--office .sb3d__floor { background: repeating-linear-gradient(90deg, #D7B287 0 17px, #C9A277 17px 18px), #D7B287; }
.sb3d__room--bedroom .sb3d__floor { background: repeating-linear-gradient(90deg, #E2C4A0 0 15px, #D5B690 15px 16px), #E2C4A0; }
.sb3d__room--office .sb3d__floor { background: repeating-linear-gradient(0deg, #CFAE86 0 16px, #C19E76 16px 17px), #CFAE86; }
.sb3d__room--kitchen .sb3d__floor { background: linear-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px) 0 0 / 22px 22px, #F1EEE8; }
.sb3d__room--bathroom .sb3d__floor { background: linear-gradient(rgba(40, 90, 130, 0.12) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(40, 90, 130, 0.12) 1px, transparent 1px) 0 0 / 14px 14px, #E4EFF6; }
.sb3d__room--garage .sb3d__floor { background: radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.05), transparent 40%), #C9CDD2; }
.sb3d__room--hallway .sb3d__floor { background: linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 30px 30px, #E6DDCF; }
.sb3d__room--outdoor .sb3d__floor { background: repeating-linear-gradient(90deg, #8DBF6A 0 14px, #84B862 14px 28px), #8DBF6A; }
.sb3d__room.has-lights .sb3d__floor::after { background: radial-gradient(60% 60% at 50% 45%, rgba(255, 214, 140, 0.55), rgba(255, 214, 140, 0) 70%); }
.sb3d__room.is-selected .sb3d__floor::after { background: rgba(69, 148, 209, 0.28); box-shadow: inset 0 0 0 3px #4594D1; }

/* Walls rise from the room's four edges; the far edge carries a white cap. */
.sb3d__wall { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: linear-gradient(180deg, rgba(210, 222, 233, 0.92) 0%, rgba(248, 251, 253, 0.8) 100%); pointer-events: none; }
.sb3d__wall--n, .sb3d__wall--s { width: 100%; height: var(--wall); transform: rotateX(90deg); border-bottom: 3px solid #FFFFFF; }
.sb3d__wall--s { top: 100%; }
.sb3d__wall--w, .sb3d__wall--e { width: var(--wall); height: 100%; transform: rotateY(-90deg); border-right: 3px solid #FFFFFF; background: linear-gradient(90deg, rgba(200, 214, 227, 0.92) 0%, rgba(244, 248, 251, 0.8) 100%); }
.sb3d__wall--e { left: 100%; }
.sb3d__room.is-selected .sb3d__wall { background: linear-gradient(180deg, rgba(69, 148, 209, 0.75) 0%, rgba(156, 203, 240, 0.55) 100%); border-color: #DCEBF7; }
.sb3d__room--outdoor .sb3d__wall { height: 10px; background: linear-gradient(180deg, #A9B6A0, #C9D3C2); }
.sb3d__room--outdoor .sb3d__wall--w, .sb3d__room--outdoor .sb3d__wall--e { width: 10px; height: 100%; }

/* Billboards: undo the stage's turn and tilt so they face the viewer, keep a readable size. */
.sb3d__bb { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: translateZ(var(--z, 0px)) rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1)) scale(var(--inv, 1)) translate(-50%, -100%); }
.sb3d__anchor, .sb3d__dev { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }

.sb3d__dev-glow { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; transform: translateZ(1px); background: radial-gradient(circle, rgba(69, 148, 209, 0.6) 0%, rgba(69, 148, 209, 0) 70%); animation: sb3d-pulse 2.6s ease-in-out var(--d, 0s) infinite; pointer-events: none; }
@keyframes sb3d-pulse { 0%, 100% { opacity: 0.45; transform: translateZ(1px) scale(0.8); } 50% { opacity: 1; transform: translateZ(1px) scale(1.25); } }
.sb3d__dev-pin { --z: 3px; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -9px; font: 16px/1 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; background: #FFFFFF; border: 1.5px solid #4594D1; border-radius: 10px; box-shadow: 0 6px 14px -4px rgba(0, 40, 100, 0.45); }
.sb3d__dev-pin::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 2px; height: 8px; margin-left: -1px; background: #4594D1; border-radius: 2px; }

.sb3d__label { --z: calc(var(--wall) + 8px); display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 6px; white-space: nowrap; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(69, 148, 209, 0.25); border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(0, 40, 100, 0.45); }
.sb3d__label-icon { font: 15px/1 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.sb3d__label-text { display: grid; gap: 2px; }
.sb3d__label-text b { font: 800 12px/1.1 'Manrope', sans-serif; color: #121519; }
.sb3d__label-text small { font: 700 9px/1 'Manrope', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #4594D1; }
.sb3d__label-remove { width: 18px; height: 18px; margin-left: 2px; display: none; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #F0F4F7; color: #8A95A3; font: 400 14px/1 'Manrope', sans-serif; cursor: pointer; }
.sb3d__room:hover .sb3d__label-remove, .sb3d__room.is-selected .sb3d__label-remove { display: grid; }
.sb3d__label-remove:hover { background: #D1223E; color: #FFFFFF; }
.sb3d__room.is-selected .sb3d__label { border-color: #4594D1; box-shadow: 0 0 0 3px rgba(69, 148, 209, 0.25), 0 10px 24px -10px rgba(0, 40, 100, 0.45); }

.sb3d__controls { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 2px; padding: 4px; background: #FFFFFF; border: 1px solid rgba(69, 148, 209, 0.18); border-radius: 999px; box-shadow: 0 6px 20px rgba(69, 148, 209, 0.18); }
.sb3d__controls button { min-width: 32px; height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #0361A7; font: 700 15px/1 'Manrope', sans-serif; cursor: pointer; }
.sb3d__controls button:hover { background: rgba(69, 148, 209, 0.12); }
.sb3d__controls button:last-child { font-size: 12px; }
.sb3d__tip { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 7px 12px; font: 700 12px/1 'Manrope', sans-serif; color: #4A5563; background: rgba(255, 255, 255, 0.85); border-radius: 999px; pointer-events: none; }

.shelly-builder__model { margin: 0 0 28px; }
.shelly-builder__model .sb3d__viewport { height: 460px; }

@media (max-width: 767px) {
	/* Small screens: icon-only labels (name on the selected room) and smaller devices. */
	.sb3d__label { padding: 4px; gap: 4px; }
	.sb3d__label-text { display: none; }
	.sb3d--readonly .sb3d__label-text { display: grid; }
	.sb3d--readonly .sb3d__label-text b { display: none; }
	.sb3d__room.is-selected .sb3d__label-text { display: grid; }
	.sb3d__dev-pin { width: 22px; height: 22px; font-size: 12px; border-radius: 7px; }
	.sb3d__viewport { height: 420px; }
	.shelly-builder__model .sb3d__viewport { height: 320px; }
	.sb3d__tip { display: none; }
	.shelly-builder__fp-views button { padding: 8px 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.sb3d__stage { transition: none; }
	.sb3d__dev-glow { animation: none; }
}