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

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 — apply rounded corners everywhere */
	--shelly-radius-sm: 8px;   /* badges, chips, tags */
	--shelly-radius-md: 12px;  /* buttons, inputs, small cards */
	--shelly-radius-lg: 16px;  /* product / feature / summary cards */
	--shelly-radius-xl: 24px;  /* hero media, big feature blocks */
	--shelly-radius-pill: 9999px; /* swatches, circular dots */
}

/* ---------- 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
 * ========================================================== */
.shelly-announcement {
	background:
		radial-gradient(ellipse 60% 120% at 85% 50%, rgba(69, 148, 209, 0.28) 0%, rgba(69, 148, 209, 0) 70%),
		linear-gradient(135deg, #0D1440 0%, #172351 40%, #334FB4 100%);
	color: #FDFDFD;
	font: 400 13px/1 'Manrope', sans-serif;
	min-height: var(--shelly-announcement-h);
	padding: 8px var(--shelly-pad-x);
	letter-spacing: 0.02em;
	position: relative;
	overflow: hidden;
	border-radius: 0;
}
.shelly-announcement::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(135deg, transparent 0 40px, rgba(255,255,255,0.02) 40px 41px);
	pointer-events: none;
}
.shelly-announcement__inner {
	position: relative;
	z-index: 1;
	max-width: var(--shelly-page-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}
.shelly-announcement__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.shelly-announcement__item strong { font-weight: 700; }
.shelly-announcement__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--shelly-radius-pill);
	background: rgba(69, 148, 209, 0.25);
	border: 1px solid rgba(69, 148, 209, 0.5);
	font: 700 12px/1 'Manrope', sans-serif;
	color: #FDFDFD;
}
@media (max-width: 989px) {
	.shelly-announcement__inner { gap: 24px; font-size: 12px; }
	.shelly-announcement__item:nth-child(3) { display: none; }
}
@media (max-width: 639px) {
	.shelly-announcement__inner { gap: 16px; }
	.shelly-announcement__item:nth-child(2) { display: none; }
}

/* ============================================================
 * 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.82);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border-bottom: 1px solid rgba(51, 79, 180, 0.1);
	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);
}

/* ---------- Logo + country selector group (grid col 1, pinned left) ---------- */
.shelly-header__logo-group {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 0;
}
.shelly-header__logo {
	display: inline-flex;
	align-items: center;
	height: 48px;
	color: inherit;
	text-decoration: none;
}
.shelly-header__logo-img {
	display: block;
	height: 48px;
	width: auto;
	max-width: 220px;
	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: 40px;
}
.shelly-header__nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
	height: 100%;
}
.shelly-header__nav li { display: flex; align-items: center; }
.shelly-header__nav a {
	display: inline-flex;
	align-items: center;
	height: 36px;
	font: 500 14px/1 'Manrope', sans-serif;
	color: #121212;
	padding: 0 14px;
	border-radius: var(--shelly-radius-md);
	white-space: nowrap;
	transition: background var(--shelly-transition), color var(--shelly-transition);
	text-decoration: none;
}
.shelly-header__nav a:hover {
	background: rgba(51, 79, 180, 0.08);
	color: #334FB4;
}
.shelly-header__nav .current-menu-item > a,
.shelly-header__nav a[aria-current="page"] {
	background: linear-gradient(135deg, rgba(51, 79, 180, 0.12) 0%, rgba(69, 148, 209, 0.12) 100%);
	color: #334FB4;
}
@media (max-width: 1439px) {
	.shelly-header__nav ul { gap: 2px; }
	.shelly-header__nav a { padding: 0 10px; font-size: 13px; }
}
@media (max-width: 1199px) {
	.shelly-header__nav a { padding: 0 8px; font-size: 12.5px; }
}

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

/* Search block — reset WP block wrapper to inline-flex at 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: rgba(51, 79, 180, 0.06) !important;
	border: 1px solid rgba(51, 79, 180, 0.1) !important;
	border-radius: var(--shelly-radius-pill) !important;
	overflow: hidden;
	height: 40px !important;
	padding: 0 4px 0 18px !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	gap: 0;
	transition: border-color var(--shelly-transition), background var(--shelly-transition);
}
.shelly-header__utils .wp-block-search__inside-wrapper:focus-within {
	background: #FFFFFF !important;
	border-color: rgba(51, 79, 180, 0.4) !important;
}
.shelly-header__utils .wp-block-search__input {
	background: transparent !important;
	border: none !important;
	height: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	font: 400 13px/1 'Manrope', sans-serif !important;
	color: #121212 !important;
	box-shadow: none !important;
	min-width: 160px;
	flex: 1 1 auto;
}
.shelly-header__utils .wp-block-search__input::placeholder { color: #6B7280; }
.shelly-header__utils .wp-block-search__button {
	background: linear-gradient(135deg, #334FB4 0%, #4594D1 100%) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: var(--shelly-radius-pill) !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
}
.shelly-header__utils .wp-block-search__button svg { width: 16px; height: 16px; }

/* Account icon (custom <a>) */
.shelly-header__icon-link {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: var(--shelly-radius-pill);
	background: rgba(51, 79, 180, 0.06);
	border: 1px solid rgba(51, 79, 180, 0.1);
	color: #121212;
	font: 700 14px/1 'Manrope', sans-serif;
	text-decoration: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: background var(--shelly-transition), border-color var(--shelly-transition);
}
.shelly-header__icon-link:hover {
	background: rgba(51, 79, 180, 0.12);
	border-color: rgba(51, 79, 180, 0.3);
}

/* Mini-cart block — reset wrapper and size the button to 40x40 */
.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: rgba(51, 79, 180, 0.06) !important;
	border: 1px solid rgba(51, 79, 180, 0.1) !important;
	border-radius: var(--shelly-radius-pill) !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: #121212 !important;
	flex: 0 0 40px;
	position: relative;
	transition: background var(--shelly-transition) !important;
}
.shelly-header__utils .wc-block-mini-cart__button:hover {
	background: rgba(51, 79, 180, 0.12) !important;
}
.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: linear-gradient(135deg, #334FB4 0%, #4594D1 100%) !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: -4px;
	right: -4px;
}

/* Contact CTA pill — uniform 40px height to match the other utils */
.shelly-header__cta {
	flex: 0 0 auto;
	height: 40px;
	padding: 0 22px;
	border-radius: var(--shelly-radius-pill);
	background: linear-gradient(135deg, #334FB4 0%, #4594D1 100%);
	color: #FFFFFF;
	font: 700 13px/1 'Manrope', sans-serif;
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(51, 79, 180, 0.25);
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	transition: transform var(--shelly-transition), box-shadow var(--shelly-transition), background var(--shelly-transition);
}
.shelly-header__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(51, 79, 180, 0.35);
	color: #FFFFFF;
}
.shelly-header__cta span { font-weight: 700; }

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

/* Responsive shrinks */
@media (max-width: 1199px) {
	.shelly-header__inner { gap: 16px; }
	.shelly-header__utils { gap: 8px; }
	.shelly-header__utils .wp-block-search__input { min-width: 110px; }
	.shelly-header__cta { padding: 0 16px; font-size: 12px; }
}
@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__nav { display: none; }
	.shelly-header__utils .wp-block-search { display: none; }
	.shelly-header__logo-text span { display: none; }
	.shelly-header__cta { padding: 0 14px; }
	.shelly-header__cta span[aria-hidden="true"] { display: none; }
}

/* ============================================================
 * 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(51, 79, 180, 0.2) 0%, rgba(51, 79, 180, 0) 70%),
		linear-gradient(180deg, #0A0F2E 0%, #0D1440 50%, #121B3A 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, #334FB4 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, #334FB4 0%, #4594D1 100%);
	border-color: transparent;
	color: #FFFFFF;
	transform: translateY(-2px);
}

/* Link columns */
.shelly-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 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%, #334FB4 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(4, 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: #334FB4; 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: #6B7280;
}
.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(51, 79, 180, 0.12) 0%, rgba(51, 79, 180, 0) 65%),
		linear-gradient(180deg, #FFFFFF 0%, #F6F9FE 60%, #EDF2FB 100%);
	border-top: 1px solid rgba(51, 79, 180, 0.08);
	border-bottom: 1px solid rgba(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 0.3);
	box-shadow: 0 16px 48px rgba(51, 79, 180, 0.14), 0 4px 16px rgba(51, 79, 180, 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: #E5484D; }

/* 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: #E5484D;
	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: #6B7280;
	max-width: none;
	margin: 0;
}
.shelly-pdp-hero .wc-block-breadcrumbs a { color: #6B7280; }
.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: #E5484D !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: #16A34A;
	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: #16A34A;
	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: #16A34A;
	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: #16A34A;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 !important;
	order: 0;
}
.shelly-pdp-buy .stock.out-of-stock { color: #E5484D; }
.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: #6B7280;
}

/* ---------- 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: #6B7280;
	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: #6B7280;
}
.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, #172351 0%, #334FB4 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: #334FB4; }
.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: #6B7280;
	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(237, 242, 251, 0.97) 0%,
			rgba(237, 242, 251, 0.96) 42%,
			rgba(237, 242, 251, 0.65) 65%,
			rgba(237, 242, 251, 0.30) 85%,
			rgba(237, 242, 251, 0.15) 100%),
		linear-gradient(180deg, rgba(237, 242, 251, 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: #EDF2FB;
	padding: 0 0 120px;
	overflow: hidden;
	border-bottom: 1px solid rgba(51, 79, 180, 0.08);
}
.shelly-home-hero::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(51, 79, 180, 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, #334FB4 0%, #4594D1 100%) !important;
	color: #FFFFFF !important;
	border: 1px solid transparent !important;
	box-shadow: 0 8px 24px rgba(51, 79, 180, 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, #172351 0%, #334FB4 100%) !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(51, 79, 180, 0.35) !important;
}
.shelly-home-hero__ctas .wp-block-button.is-style-shelly-outline .wp-block-button__link {
	border-color: #334FB4 !important;
	color: #334FB4 !important;
}
.shelly-home-hero__ctas .wp-block-button.is-style-shelly-outline .wp-block-button__link:hover {
	background: #334FB4 !important;
	color: #FFFFFF !important;
	border-color: #334FB4 !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(51, 79, 180, 0.12), 0 8px 24px rgba(51, 79, 180, 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: #16A34A;
	z-index: 2;
}
.shelly-home-hero__stock-dot {
	width: 8px;
	height: 8px;
	background: #16A34A;
	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, #0D1440 0%, #172351 45%, #334FB4 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, #334FB4 0%, rgba(51, 79, 180, 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, #60A5FA 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: #6B7280;
	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(51, 79, 180, 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(51, 79, 180, 0.06);
}
.shelly-how__step:hover {
	border-color: rgba(51, 79, 180, 0.4);
	box-shadow: 0 20px 60px rgba(51, 79, 180, 0.15), 0 8px 24px rgba(51, 79, 180, 0.08);
	transform: translateY(-4px);
}
.shelly-how__number {
	font: 400 120px/0.85 'Manrope', sans-serif;
	background: linear-gradient(135deg, #172351 0%, #334FB4 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(51, 79, 180, 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: #6B7280;
	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(51, 79, 180, 0.25) 0%, rgba(51, 79, 180, 0) 65%),
		linear-gradient(135deg, #0A0F2E 0%, #172351 50%, #1E2D6A 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(10, 15, 46, 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(51, 79, 180, 0.22) 0%, rgba(51, 79, 180, 0) 65%),
		linear-gradient(180deg, #0A0F2E 0%, #0D1440 50%, #121B3A 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(51, 79, 180, 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: #6B7280;
	border-right: 1px solid rgba(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 0.08); }
	.shelly-trusted__mark:nth-child(-n+4) { border-bottom: 1px solid rgba(51, 79, 180, 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: #6B7280;
	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(51, 79, 180, 0.18);
	color: #334FB4;
	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(51, 79, 180, 0.1);
	transition: all var(--shelly-transition);
	white-space: nowrap;
}
.shelly-categories__all:hover {
	border-color: transparent;
	background: linear-gradient(135deg, #334FB4 0%, #4594D1 100%);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(51, 79, 180, 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, #0D1440 0%, #172351 50%, #334FB4 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(13, 20, 64, 0.25), 0 8px 24px rgba(51, 79, 180, 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(13, 20, 64, 0.35), 0 12px 32px rgba(51, 79, 180, 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, #334FB4 0%, rgba(51,79,180,0) 70%);
}
.shelly-categories__featured-mesh span:nth-child(3) {
	top: 30%;
	right: 20%;
	width: 40%;
	height: 40%;
	background: radial-gradient(circle, #60A5FA 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(13, 20, 64, 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: #60A5FA; 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: #334FB4;
	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: #334FB4;
}
.shelly-categories__featured:hover .shelly-categories__featured-cta-arrow {
	background: #334FB4;
	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(51, 79, 180, 0.08);
	border-radius: var(--shelly-radius-lg);
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(51, 79, 180, 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(51, 79, 180, 0.18), 0 8px 20px rgba(51, 79, 180, 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, #F6F9FE 0%, #EDF2FB 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 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: #6B7280;
	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(51, 79, 180, 0.06);
	color: #334FB4;
	border: 1px solid rgba(51, 79, 180, 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, #334FB4 0%, #4594D1 100%);
	color: #FFFFFF;
	border-color: transparent;
	transform: translateX(4px);
	box-shadow: 0 10px 24px rgba(51, 79, 180, 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(51, 79, 180, 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%, #F8FAFD 100%);
	border-top: 1px solid rgba(51, 79, 180, 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(51, 79, 180, 0.18);
	background: #FFFFFF;
	color: #334FB4;
	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(51, 79, 180, 0.08);
}
.shelly-carousel__arrow:hover {
	background: linear-gradient(135deg, #334FB4 0%, #4594D1 100%);
	color: #FFFFFF;
	border-color: transparent;
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(51, 79, 180, 0.22);
}
.shelly-carousel__all {
	font: 700 13px/1 'Manrope', sans-serif;
	color: #334FB4;
	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%, #F8FAFD 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(51, 79, 180, 0.08);
	box-shadow: 0 4px 18px rgba(51, 79, 180, 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(13, 20, 64, 0.2), 0 8px 20px rgba(51, 79, 180, 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(13, 20, 64, 0) 20%, rgba(13, 20, 64, 0.85) 70%, rgba(13, 20, 64, 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, #334FB4 0%, rgba(51,79,180,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, #172351 0%, rgba(23,35,81,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(51, 79, 180, 0.14);
	border-radius: var(--shelly-radius-md);
	box-shadow:
		0 10px 28px rgba(51, 79, 180, 0.12),
		0 2px 8px rgba(51, 79, 180, 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(51, 79, 180, 0.22),
		0 4px 12px rgba(51, 79, 180, 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, #0D1440 0%, #172351 45%, #334FB4 100%);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow:
		0 24px 60px rgba(13, 20, 64, 0.35),
		0 8px 24px rgba(51, 79, 180, 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(51, 79, 180, 0.15) 0%, rgba(51, 79, 180, 0) 65%),
		linear-gradient(180deg, #FFFFFF 0%, #F6F9FE 50%, #EDF2FB 100%);
	padding: 120px 0;
	overflow: hidden;
	scroll-margin-top: var(--shelly-header-h, 80px);
	border-top: 1px solid rgba(51, 79, 180, 0.08);
	border-bottom: 1px solid rgba(51, 79, 180, 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(51, 79, 180, 0.18) 0%, rgba(51, 79, 180, 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: #6B7280;
	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(51, 79, 180, 0.04),
		0 24px 60px rgba(51, 79, 180, 0.12),
		0 4px 16px rgba(51, 79, 180, 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(51, 79, 180, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(51, 79, 180, 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: #6B7280;
	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(51, 79, 180, 0.05);
	border-radius: var(--shelly-radius-pill);
	overflow: hidden;
	border: 1px solid rgba(51, 79, 180, 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(51, 79, 180, 0.08);
	color: #929292;
	transition: all 300ms ease;
	flex: 0 0 auto;
}
.shelly-builder__step--active {
	background: linear-gradient(135deg, rgba(51, 79, 180, 0.1) 0%, rgba(69, 148, 209, 0.1) 100%);
}
.shelly-builder__step--active .shelly-builder__step-num {
	background: linear-gradient(135deg, #334FB4 0%, #4594D1 100%);
	color: #FFFFFF;
	box-shadow: 0 4px 14px rgba(51, 79, 180, 0.3);
}
.shelly-builder__step--done {
	background: rgba(22, 163, 74, 0.06);
}
.shelly-builder__step--done .shelly-builder__step-num {
	background: #16A34A;
	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: #334FB4; 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(51, 79, 180, 0.06) 0%, rgba(69, 148, 209, 0.06) 100%);
	border-top: 1px solid rgba(51, 79, 180, 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: #334FB4;
}
.shelly-builder__live-label {
	font: 700 11px/1 'Manrope', sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6B7280;
}
@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: #6B7280;
	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(51, 79, 180, 0.03);
	border: 1.5px solid rgba(51, 79, 180, 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(51, 79, 180, 0.05);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(51, 79, 180, 0.1);
}
.shelly-builder__home-card.is-active {
	border-color: #4594D1;
	background: linear-gradient(135deg, rgba(51, 79, 180, 0.08) 0%, rgba(69, 148, 209, 0.08) 100%);
	box-shadow: 0 8px 24px rgba(51, 79, 180, 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: #6B7280; }
.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(51, 79, 180, 0.03);
	border: 1px solid rgba(51, 79, 180, 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(51, 79, 180, 0.14);
	border-radius: var(--shelly-radius-pill);
	padding: 7px 14px 7px 12px;
	cursor: pointer;
	color: #334FB4;
	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(51, 79, 180, 0.03) 0%, rgba(69, 148, 209, 0.04) 100%);
	border: 1px solid rgba(51, 79, 180, 0.12);
	border-radius: var(--shelly-radius-lg);
	overflow: hidden;
	box-shadow: inset 0 2px 8px rgba(51, 79, 180, 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: #FAFBFF;
	background-image:
		linear-gradient(rgba(51, 79, 180, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(51, 79, 180, 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(51, 79, 180, 0.18);
	border-radius: var(--shelly-radius-pill);
	padding: 4px;
	box-shadow: 0 6px 20px rgba(51, 79, 180, 0.18);
}
.shelly-builder__fp-zoom-btn,
.shelly-builder__fp-zoom-level {
	border: none;
	background: transparent;
	color: #334FB4;
	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: #334FB4;
}
.shelly-builder__fp-room {
	position: absolute;
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid rgba(51, 79, 180, 0.35);
	border-radius: var(--shelly-radius-md);
	box-shadow: 0 4px 14px rgba(51, 79, 180, 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(51, 79, 180, 0.18);
}
.shelly-builder__fp-room.is-selected {
	border-color: #334FB4;
	box-shadow: 0 0 0 3px rgba(51, 79, 180, 0.18), 0 10px 32px rgba(51, 79, 180, 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(51, 79, 180, 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: #E5484D; }
.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, #334FB4, #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(51, 79, 180, 0.5) 45%, rgba(51, 79, 180, 0.5) 55%, transparent 55%, transparent 70%, rgba(51, 79, 180, 0.5) 70%, rgba(51, 79, 180, 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: #6B7280;
}
.shelly-builder__fp-hint span { color: #4594D1; margin-right: 6px; font-weight: 700; }

.shelly-builder__fp-detail {
	background: linear-gradient(135deg, rgba(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 0.15);
	color: #6B7280;
	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: #334FB4;
	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: #6B7280;
}
.shelly-builder__counter-btn {
	width: 30px;
	height: 30px;
	border-radius: var(--shelly-radius-md);
	border: 1px solid rgba(51, 79, 180, 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, #334FB4, #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: #6B7280;
	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(51, 79, 180, 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(51, 79, 180, 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: #6B7280; margin-top: 4px; }
.shelly-builder__feature-check {
	width: 20px;
	height: 20px;
	border-radius: var(--shelly-radius-sm);
	border: 2px solid rgba(51, 79, 180, 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, #334FB4, #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(51, 79, 180, 0.03);
	border: 1.5px solid rgba(51, 79, 180, 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(51, 79, 180, 0.1);
}
.shelly-builder__priority.is-active {
	border-color: #4594D1;
	background: linear-gradient(135deg, rgba(51, 79, 180, 0.08) 0%, rgba(69, 148, 209, 0.08) 100%);
	box-shadow: 0 12px 32px rgba(51, 79, 180, 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: #6B7280; margin-top: 8px; }
.shelly-builder__priority-check {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	border-radius: var(--shelly-radius-pill);
	background: #16A34A;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 13px/1 'Manrope', sans-serif;
}

.shelly-builder__preview {
	background: #FAFBFE;
	border: 1px solid rgba(51, 79, 180, 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, #172351, #334FB4, #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, #172351 0%, #334FB4 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(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 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: #6B7280;
	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: #334FB4;
	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: #6B7280; 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 #334FB4; outline-offset: -2px; }
.shelly-builder__qty-reset {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin-top: 2px;
	color: #334FB4;
	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: #FAFBFE;
	border: 1px solid rgba(51, 79, 180, 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(51, 79, 180, 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: #6B7280;
}
.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, #334FB4 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(51, 79, 180, 0.35);
	transition: all var(--shelly-transition);
	cursor: pointer;
}
.shelly-builder__cta-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 48px rgba(51, 79, 180, 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(51, 79, 180, 0.04);
	color: #334FB4;
	border: 1.5px solid rgba(51, 79, 180, 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(51, 79, 180, 0.08);
	border-color: #334FB4;
}
.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: #6B7280;
	text-decoration: none;
	border-radius: var(--shelly-radius-pill);
	transition: color var(--shelly-transition), background var(--shelly-transition);
}
.shelly-builder__cta-ghost:hover {
	color: #334FB4;
	background: rgba(51, 79, 180, 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: #6B7280;
	margin: 0;
}
.shelly-builder__notice-body a {
	color: #334FB4;
	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, #334FB4 0%, #4594D1 100%);
	color: #FFFFFF;
	border: none;
	box-shadow: 0 8px 24px rgba(51, 79, 180, 0.25);
}
.shelly-builder__btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 32px rgba(51, 79, 180, 0.35);
}
.shelly-builder__btn--ghost {
	background: rgba(51, 79, 180, 0.04);
	color: #6B7280;
	border-color: rgba(51, 79, 180, 0.12);
}
.shelly-builder__btn--ghost:hover {
	color: #121212;
	border-color: #334FB4;
	background: rgba(51, 79, 180, 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(51, 79, 180, 0.08) 0%, rgba(69, 148, 209, 0.12) 100%);
	border: 1px solid rgba(51, 79, 180, 0.2);
	color: #334FB4;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(51, 79, 180, 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: #6B7280;
}
.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(51, 79, 180, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(51, 79, 180, 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%, #334FB4 72%, #0D1440 100%);
	box-shadow:
		0 0 32px rgba(69, 148, 209, 0.7),
		0 0 72px rgba(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 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(51, 79, 180, 0.03);
	border: 1px solid rgba(51, 79, 180, 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(51, 79, 180, 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: #16A34A;
	background: #16A34A;
	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(51, 79, 180, 0.08);
	border-radius: 4px;
	overflow: hidden;
}
.shelly-builder__think-bar > span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #334FB4 0%, #4594D1 50%, #60A5FA 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(13, 20, 64, 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(13, 20, 64, 0.4), 0 12px 32px rgba(51, 79, 180, 0.25);
	border: 1px solid rgba(51, 79, 180, 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(51, 79, 180, 0.06);
	border: 1px solid rgba(51, 79, 180, 0.12);
	color: #6B7280;
	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: #334FB4;
	color: #FFFFFF;
	border-color: transparent;
}
.shelly-builder__modal-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #334FB4 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(51, 79, 180, 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: #6B7280;
	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: #6B7280;
}
.shelly-builder__modal-field input {
	font: 400 15px/1 'Manrope', sans-serif;
	padding: 14px 16px;
	border: 1.5px solid rgba(51, 79, 180, 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, #334FB4 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(51, 79, 180, 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(51, 79, 180, 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: #6B7280;
	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, #0D1440, #334FB4);
	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: #6B7280;
	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;
}