/* ============================================================
 * Direction C · Casa — a friendly guide to your own home
 * Rounded, bright, encouraging. Manrope 800 display, pills, tinted panels in
 * Shelly's own tints, and an illustrated house you can tap.
 * Scoped to body.shelly-design-c. See docs/design-directions.md.
 * ========================================================== */
.shelly-design-c {
	--c-ink: #121519; --c-grey: #656669; --c-white: #FDFDFD;
	--c-blue: #2481C7; --c-blue-dark: #0361A7; --c-deep: #003C82; --c-sky: #9CDBF6;
	--c-tint: #F0F4F7; --c-sun: #FFEFCC; --c-peach: #FCEEDE; --c-mint: #D0FFF0; --c-ice: #DDF1FB;
	--c-green: #11BA4B;
	--c-grad: linear-gradient(135deg, #2481C7 0%, #003C82 100%);
	--c-gutter: clamp(12px, 2vw, 28px);
	--c-shadow: 0 2px 6px rgba(0, 60, 130, 0.06), 0 18px 40px -18px rgba(0, 60, 130, 0.28);
	--c-shadow-lift: 0 4px 10px rgba(0, 60, 130, 0.08), 0 30px 60px -22px rgba(0, 60, 130, 0.4);
	/* Re-round the whole site while this direction is on. */
	--shelly-radius-sm: 10px; --shelly-radius-md: 16px; --shelly-radius-lg: 24px; --shelly-radius-xl: 32px;
}

/* ---------- Type system ---------- */
.shelly-design-c .vc-pill,
.shelly-design-c.home main .shelly-eyebrow:not(.shelly-builder__badge) { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0 0 18px; padding: 8px 15px; font: 700 13px/1.2 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; border-radius: 999px; color: var(--c-blue-dark); background: var(--c-tint); }
.shelly-design-c .vc-hero .vc-pill { color: var(--c-white); background: rgba(253, 253, 253, 0.16); }
.shelly-design-c .vc-hero .vc-pill--sun { color: var(--c-ink); background: var(--c-sun); }
.shelly-design-c .vc-hero .vc-pill--mint { color: var(--c-ink); background: var(--c-mint); }
.shelly-design-c.home :is(.shelly-benefits__title, .shelly-journey__title, .shelly-carousel__title, .shelly-prolane__title, .shelly-categories__title, .shelly-apppromo__title, .shelly-xp__title, .shelly-ecosystem__head h2, .shelly-how__head h2, main > .wp-block-group.alignfull > .wp-block-group > h2.wp-block-heading) { font-weight: 800 !important; letter-spacing: -0.02em !important; font-size: clamp(32px, 3.6vw, 52px) !important; line-height: 1.08 !important; text-wrap: balance; }
.shelly-design-c.home main { font-size: 17px; }

/* ---------- Buttons: pills ---------- */
.shelly-design-c .vc-btn,
.shelly-design-c.home .shelly-btn,
.shelly-design-c .shelly-header__shop { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; font: 700 16px/1 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; border-radius: 999px; color: #FFFFFF !important; background: var(--c-grad); border: 0; box-shadow: 0 10px 24px -10px rgba(0, 60, 130, 0.7); transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease; }
.shelly-design-c .vc-btn:hover,
.shelly-design-c.home .shelly-btn:hover,
.shelly-design-c .shelly-header__shop:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 30px -12px rgba(0, 60, 130, 0.8); color: #FFFFFF !important; background: var(--c-grad); }
.shelly-design-c .vc-btn--white,
.shelly-design-c.home .shelly-btn--light { color: var(--c-deep) !important; background: var(--c-white); box-shadow: 0 10px 24px -10px rgba(0, 20, 50, 0.6); }
.shelly-design-c .vc-btn--white:hover,
.shelly-design-c.home .shelly-btn--light:hover { color: var(--c-deep) !important; background: #FFFFFF; filter: none; }
.shelly-design-c .vc-btn--glass { color: var(--c-white) !important; background: rgba(253, 253, 253, 0.16); box-shadow: none; }
.shelly-design-c .vc-btn--glass:hover { background: rgba(253, 253, 253, 0.26); filter: none; box-shadow: none; }
.shelly-design-c.home .shelly-btn--outline,
.shelly-design-c.home .shelly-btn--ghost { color: var(--c-ink) !important; background: var(--c-white); box-shadow: inset 0 0 0 1.5px rgba(18, 21, 25, 0.18); }
.shelly-design-c.home .shelly-btn--outline:hover,
.shelly-design-c.home .shelly-btn--ghost:hover { color: var(--c-blue-dark) !important; background: var(--c-white); box-shadow: inset 0 0 0 1.5px var(--c-blue-dark); filter: none; }
.shelly-design-c.home .shelly-btn--sm { min-height: 42px; padding: 0 20px; font-size: 14px; }

/* ---------- Header: a floating rounded bar ---------- */
.shelly-design-c .shelly-header { top: 10px; margin: 10px var(--c-gutter) 0; border-radius: 28px; border: 1px solid rgba(18, 21, 25, 0.06); background: rgba(253, 253, 253, 0.94); box-shadow: var(--c-shadow); }
.shelly-design-c .shelly-header__inner { padding-inline: clamp(16px, 1.8vw, 28px); gap: 16px; }
.shelly-design-c .shelly-nav .shelly-nav__link { font-weight: 600; border-radius: 999px; }
.shelly-design-c .shelly-nav .shelly-nav__item:hover > .shelly-nav__link,
.shelly-design-c .shelly-nav .shelly-nav__item:focus-within > .shelly-nav__link { color: var(--c-blue-dark); }
.shelly-design-c .shelly-header__shop { min-height: 42px; height: 42px; padding: 0 20px; font-size: 14.5px; }
.shelly-design-c .shelly-nav .shelly-nav__panel { border-radius: 24px; border: 1px solid rgba(18, 21, 25, 0.06); box-shadow: var(--c-shadow-lift); overflow: hidden; }
.shelly-design-c .shelly-nav__badge { border-radius: 999px; background: var(--c-grad); }

/* ============================================================
 * Hero: an inset rounded panel with a house you can tap
 * ========================================================== */
.shelly-design-c .vc-hero { background: var(--c-white); color: var(--c-white); padding: 14px var(--c-gutter) 0; overflow: visible; }
.shelly-design-c .vc-hero .shelly-hs__inner { position: relative; max-width: 1640px; margin-inline: auto; padding: 0; border-radius: 36px; overflow: hidden; background: radial-gradient(60% 90% at 88% 8%, rgba(156, 219, 246, 0.55) 0%, rgba(156, 219, 246, 0) 60%), linear-gradient(105deg, #003C82 0%, #0361A7 46%, #2481C7 100%); }
.shelly-design-c .vc-hero :focus-visible { outline: 3px solid var(--c-sun); outline-offset: 3px; }
.shelly-design-c .vc-hero .shelly-hs__panel { background: none; }
.shelly-design-c .vc-hero .shelly-hs__panel::before { content: none; }
.shelly-design-c .vc-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; min-height: 640px; padding: 40px clamp(28px, 4.4vw, 72px) 104px; }
.shelly-design-c .vc-hero__title { margin: 0 0 18px; font: 800 clamp(38px, 4.1vw, 62px)/1.05 'Manrope', sans-serif; letter-spacing: -0.025em; color: var(--c-white); text-wrap: balance; }
.shelly-design-c .vc-hero__lead { margin: 0 0 24px; max-width: 52ch; font: 400 17px/1.65 'Manrope', sans-serif; color: rgba(253, 253, 253, 0.86); }
.shelly-design-c .vc-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* The question card (discovery engine, restyled) */
.shelly-design-c .vc-card { min-height: 0; padding: 22px 24px 18px; border-radius: 28px; background: var(--c-white); color: var(--c-ink); box-shadow: 0 30px 60px -24px rgba(0, 20, 60, 0.6); }
.shelly-design-c .vc-card .shelly-discover__head { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px dashed rgba(18, 21, 25, 0.16); }
.shelly-design-c .vc-card .shelly-discover__kicker { font: 700 13px/1.3 'Manrope', sans-serif; letter-spacing: 0 !important; text-transform: none !important; color: var(--c-blue-dark); }
.shelly-design-c .vc-card .shelly-discover__steps { gap: 6px; }
.shelly-design-c .vc-card .shelly-discover__steps li { padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--c-tint); font-size: 12px; font-weight: 700; color: var(--c-grey); }
.shelly-design-c .vc-card .shelly-discover__steps li span { border-radius: 999px; border: 0; background: var(--c-white); }
.shelly-design-c .vc-card .shelly-discover__steps li.is-current { background: var(--c-ice); color: var(--c-blue-dark); }
.shelly-design-c .vc-card .shelly-discover__steps li.is-current span { background: var(--c-blue-dark); color: #FFFFFF; }
.shelly-design-c .vc-card .shelly-discover__q { margin: 0 0 14px; font: 800 23px/1.2 'Manrope', sans-serif; letter-spacing: -0.015em; color: var(--c-ink); }
.shelly-design-c .vc-card .shelly-discover__q--result { font-size: 20px; margin-bottom: 6px; }
.shelly-design-c .vc-card .shelly-discover__goals { gap: 6px; padding: 6px; border-radius: 999px; background: var(--c-tint); flex: 0 0 auto; }
.shelly-design-c .vc-card .shelly-discover__goal { min-height: 60px; flex-direction: row; align-items: center; justify-content: center; gap: 12px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
.shelly-design-c .vc-card .shelly-discover__goal:hover,
.shelly-design-c .vc-card .shelly-discover__goal:focus-visible { background: var(--c-white); box-shadow: var(--c-shadow); transform: none; }
.shelly-design-c .vc-card .shelly-discover__goal-icon { width: 40px; height: 40px; margin: 0; border-radius: 999px; color: #FFFFFF; background: var(--c-grad); }
.shelly-design-c .vc-card .shelly-discover__goal[data-goal="monitor"] .shelly-discover__goal-icon,
.shelly-design-c .vc-card .shelly-discover__goal:nth-child(2) .shelly-discover__goal-icon { background: var(--c-green); }
.shelly-design-c .vc-card .shelly-discover__goal-label { font: 800 18px/1 'Manrope', sans-serif; color: var(--c-ink); }
.shelly-design-c .vc-card .shelly-discover__goal-list { display: none; }
.shelly-design-c .vc-card .shelly-discover__areas { gap: 8px; }
.shelly-design-c .vc-card .shelly-discover__area { min-height: 50px; padding: 8px 16px 8px 8px; border: 0; border-radius: 999px; background: var(--c-tint); transition: background 160ms ease, transform 160ms ease; }
.shelly-design-c .vc-card .shelly-discover__area:hover,
.shelly-design-c .vc-card .shelly-discover__area:focus-visible { background: var(--c-ice); transform: translateY(-1px); }
.shelly-design-c .vc-card .shelly-discover__area-icon { width: 34px; height: 34px; border-radius: 999px; background: var(--c-white); color: var(--c-blue-dark); }
.shelly-design-c .vc-card .shelly-discover__area-label { font-weight: 700; }
.shelly-design-c .vc-card .shelly-discover__pick { border: 0; border-radius: 20px; background: var(--c-tint); }
.shelly-design-c .vc-card .shelly-discover__thumb { border-radius: 14px; overflow: hidden; }
.shelly-design-c .vc-card .shelly-discover__tag { align-self: flex-start; padding: 4px 9px; border-radius: 999px; font: 700 11.5px/1.2 'Manrope', sans-serif; letter-spacing: 0 !important; text-transform: none !important; color: var(--c-ink); background: var(--c-sun); }
.shelly-design-c .vc-card .shelly-discover__later-title { font: 700 12.5px/1.2 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; }
.shelly-design-c .vc-card .shelly-discover__later-item .shelly-discover__thumb { border-radius: 10px; }
.shelly-design-c .vc-card .shelly-discover__note { border: 0; border-radius: 16px; background: var(--c-mint); color: var(--c-ink); }
.shelly-design-c .vc-card .shelly-discover__back,
.shelly-design-c .vc-card .shelly-discover__reset { padding: 6px 12px; border-radius: 999px; background: var(--c-tint); }
.shelly-design-c .vc-card__hint { display: none; align-items: center; gap: 8px; margin: 14px 0 0; font: 700 13.5px/1.3 'Manrope', sans-serif; color: var(--c-blue-dark); }
.shelly-design-c .vc-card[data-step="goal"] .vc-card__hint { display: flex; }
.shelly-design-c .vc-card .shelly-discover__foot { margin-top: 14px; border-top: 1px dashed rgba(18, 21, 25, 0.16); }

/* The house */
.shelly-design-c .vc-house { min-width: 0; }
.shelly-design-c .vc-house__art { position: relative; max-width: 640px; margin-inline: auto; }
.shelly-design-c .vc-house__art svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 20, 60, 0.35)); }
.shelly-design-c .vc-spot { position: absolute; z-index: 1; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 999px; color: var(--c-ink); transition: opacity 240ms ease; }
.shelly-design-c .vc-spot__dot { position: relative; width: 24px; height: 24px; border-radius: 999px; background: var(--c-white); box-shadow: inset 0 0 0 7px var(--c-white), inset 0 0 0 24px var(--spot, var(--c-blue-dark)), 0 4px 12px rgba(0, 20, 60, 0.45); transition: transform 200ms ease, box-shadow 200ms ease; }
.shelly-design-c .vc-spot--monitor { --spot: var(--c-green); }
.shelly-design-c .vc-spot__dot::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; border: 2px solid var(--c-white); opacity: 0; animation: vc-pulse 2.6s ease-out infinite; }
.shelly-design-c .vc-spot:nth-of-type(2n) .vc-spot__dot::after { animation-delay: 0.9s; }
.shelly-design-c .vc-spot:nth-of-type(3n) .vc-spot__dot::after { animation-delay: 1.7s; }
@keyframes vc-pulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
.shelly-design-c .vc-spot__label { position: absolute; left: 50%; bottom: calc(100% - 2px); transform: translate(-50%, 6px); padding: 7px 12px; border-radius: 999px; white-space: nowrap; font: 700 13px/1 'Manrope', sans-serif; color: var(--c-ink); background: var(--c-white); box-shadow: 0 8px 20px -6px rgba(0, 20, 60, 0.55); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.shelly-design-c .vc-spot--left .vc-spot__label { left: auto; right: 0; transform: translate(0, 6px); }
.shelly-design-c .vc-spot--right .vc-spot__label { left: 0; transform: translate(0, 6px); }
.shelly-design-c .vc-spot:hover,
.shelly-design-c .vc-spot:focus-visible,
.shelly-design-c .vc-spot.is-active { z-index: 3; }
.shelly-design-c .vc-spot:hover .vc-spot__label,
.shelly-design-c .vc-spot:focus-visible .vc-spot__label,
.shelly-design-c .vc-spot.is-active .vc-spot__label { opacity: 1; transform: translate(-50%, 0); }
.shelly-design-c .vc-spot--left:hover .vc-spot__label,
.shelly-design-c .vc-spot--left:focus-visible .vc-spot__label,
.shelly-design-c .vc-spot--left.is-active .vc-spot__label,
.shelly-design-c .vc-spot--right:hover .vc-spot__label,
.shelly-design-c .vc-spot--right:focus-visible .vc-spot__label,
.shelly-design-c .vc-spot--right.is-active .vc-spot__label { transform: translate(0, 0); }
.shelly-design-c .vc-spot:hover .vc-spot__dot,
.shelly-design-c .vc-spot:focus-visible .vc-spot__dot { transform: scale(1.18); }
.shelly-design-c .vc-spot.is-active .vc-spot__dot { transform: scale(1.3); box-shadow: inset 0 0 0 4px var(--c-white), inset 0 0 0 24px var(--spot, var(--c-blue-dark)), 0 0 0 6px rgba(253, 253, 253, 0.35), 0 4px 12px rgba(0, 20, 60, 0.45); }
.shelly-design-c .vc-house[data-goal="control"] .vc-spot--monitor:not(.is-active),
.shelly-design-c .vc-house[data-goal="monitor"] .vc-spot--control:not(.is-active) { opacity: 0.28; }
.shelly-design-c .vc-house[data-goal="control"] .vc-spot--monitor .vc-spot__dot::after,
.shelly-design-c .vc-house[data-goal="monitor"] .vc-spot--control .vc-spot__dot::after { animation: none; }
.shelly-design-c .vc-house__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 18px 0 0; font: 700 13px/1.2 'Manrope', sans-serif; color: rgba(253, 253, 253, 0.9); }
.shelly-design-c .vc-key { display: inline-flex; align-items: center; gap: 8px; }
.shelly-design-c .vc-key { --spot: var(--c-blue-dark); }
.shelly-design-c .vc-key::before { content: ""; width: 18px; height: 18px; border-radius: 999px; background: var(--c-white); box-shadow: inset 0 0 0 5px var(--c-white), inset 0 0 0 18px var(--spot); }
.shelly-design-c .vc-key--monitor { --spot: var(--c-green); }

/* Campaign set + retrofit card */
.shelly-design-c .vc-set { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 560px; justify-self: end; width: 100%; }
.shelly-design-c .vc-set li a { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 18px; padding: 12px; border-radius: 26px; color: var(--c-ink); background: var(--c-white); box-shadow: 0 20px 40px -20px rgba(0, 20, 60, 0.55); transition: transform 200ms ease; }
.shelly-design-c .vc-set li:nth-child(2) a { margin-left: 36px; }
.shelly-design-c .vc-set li a:hover { transform: translateY(-3px); }
.shelly-design-c .vc-set__media { display: block; border-radius: 18px; overflow: hidden; background: #F2F5F8; }
.shelly-design-c .vc-set__media img { display: block; width: 96px; height: 96px; object-fit: contain; mix-blend-mode: multiply; }
.shelly-design-c .vc-set__text { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.shelly-design-c .vc-set__role { padding: 4px 10px; border-radius: 999px; font: 700 12px/1.2 'Manrope', sans-serif; background: var(--c-sun); }
.shelly-design-c .vc-set__name { font: 800 17px/1.25 'Manrope', sans-serif; }
.shelly-design-c .vc-set__price { font: 600 15px/1 'Manrope', sans-serif; color: var(--c-grey); }
.shelly-design-c .vc-retro { padding: 14px; border-radius: 30px; background: var(--c-white); box-shadow: 0 30px 60px -24px rgba(0, 20, 60, 0.6); }
.shelly-design-c .vc-retro__figure { border-radius: 20px; overflow: hidden; }
.shelly-design-c .vc-retro__figure svg { display: block; width: 100%; height: auto; box-shadow: none; }
.shelly-design-c .vc-retro__steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; }
.shelly-design-c .vc-retro__steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 999px; font: 700 13.5px/1.2 'Manrope', sans-serif; color: var(--c-ink); background: var(--c-tint); }
.shelly-design-c .vc-retro__steps li span { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; color: #FFFFFF; background: var(--c-grad); font-size: 13px; }

/* Controls: pill tabs + round arrows */
.shelly-design-c .vc-hero .shelly-hs__controls { position: absolute; left: clamp(28px, 4.4vw, 72px); right: clamp(28px, 4.4vw, 72px); bottom: 30px; max-width: none; padding: 0; align-items: center; }
.shelly-design-c .vc-hero .shelly-hs__controls::before { content: none; }
.shelly-design-c .vc-hero .shelly-hs__tabs { gap: 8px; }
.shelly-design-c .vc-hero .shelly-hs__tab { padding: 11px 18px; border: 0; border-radius: 999px; font: 700 14px/1 'Manrope', sans-serif; color: var(--c-white); background: rgba(253, 253, 253, 0.16); transition: background 200ms ease; }
.shelly-design-c .vc-hero .shelly-hs__tab:hover { background: rgba(253, 253, 253, 0.28); }
.shelly-design-c .vc-hero .shelly-hs__tab.is-active { color: var(--c-deep); background: var(--c-white); }
.shelly-design-c .vc-hero .shelly-hs__arrows { padding: 0; }
.shelly-design-c .vc-hero .shelly-hs__arrow { width: 46px; height: 46px; border: 0; border-radius: 999px; background: rgba(253, 253, 253, 0.16); }
.shelly-design-c .vc-hero .shelly-hs__arrow:hover { color: var(--c-deep); background: var(--c-white); }

/* ============================================================
 * Sections
 * ========================================================== */
.shelly-design-c.home main > section { border: 0; }

/* Metrics: four tinted tiles */
.shelly-design-c.home .shelly-metrics { background: var(--c-white); color: var(--c-ink); padding: 28px 0 0; }
.shelly-design-c.home .shelly-metrics__inner { gap: 16px; }
.shelly-design-c.home .shelly-metrics__item { padding: 28px 28px 26px; border: 0; border-radius: 28px; background: var(--c-tint); text-align: left; }
.shelly-design-c.home .shelly-metrics__item:nth-child(2) { background: var(--c-sun); }
.shelly-design-c.home .shelly-metrics__item:nth-child(3) { background: var(--c-peach); }
.shelly-design-c.home .shelly-metrics__item:nth-child(4) { background: var(--c-mint); }
.shelly-design-c.home .shelly-metrics__value { font: 800 clamp(36px, 3.6vw, 52px)/1 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--c-ink); }
.shelly-design-c.home .shelly-metrics__value-sub { color: var(--c-blue-dark); }
.shelly-design-c.home .shelly-metrics__label { margin-top: 10px; font: 700 14px/1.35 'Manrope', sans-serif; letter-spacing: 0 !important; text-transform: none !important; color: rgba(18, 21, 25, 0.72); }

/* Benefits: each card in its own Shelly tint */
.shelly-design-c.home .shelly-benefits { background: var(--c-white); padding: 104px 0 96px; }
.shelly-design-c.home .shelly-benefits__grid { gap: 18px; border: 0; background: none; }
.shelly-design-c.home .shelly-benefits__card { padding: 26px 24px 22px; border: 0; border-radius: 30px; background: var(--c-ice); box-shadow: none; transition: transform 240ms ease, box-shadow 240ms ease; }
.shelly-design-c.home .shelly-benefits__card:nth-child(2) { background: var(--c-sun); }
.shelly-design-c.home .shelly-benefits__card:nth-child(3) { background: var(--c-mint); }
.shelly-design-c.home .shelly-benefits__card:nth-child(4) { background: var(--c-peach); }
.shelly-design-c.home .shelly-benefits__card:hover { transform: translateY(-6px); box-shadow: var(--c-shadow-lift); }
.shelly-design-c.home .shelly-benefits__icon { width: 58px; height: 58px; border-radius: 999px; background: var(--c-white); color: var(--c-blue-dark); margin-bottom: 22px; box-shadow: 0 8px 18px -8px rgba(0, 60, 130, 0.35); }
.shelly-design-c.home .shelly-benefits__label { font: 800 22px/1.18 'Manrope', sans-serif; letter-spacing: -0.015em; }
.shelly-design-c.home .shelly-benefits__copy { color: rgba(18, 21, 25, 0.74); }
.shelly-design-c.home .shelly-benefits__first { padding: 10px; border: 0; border-radius: 18px; background: rgba(253, 253, 253, 0.8); }
.shelly-design-c.home .shelly-benefits__first img { border-radius: 12px; }
.shelly-design-c.home .shelly-benefits__links { border-top: 0; }

/* Journey: three rounded steps on a dotted path */
.shelly-design-c.home .shelly-journey { width: auto; margin: 0 var(--c-gutter); padding: 96px 0; border-radius: 40px; background: var(--c-tint); color: var(--c-ink); }
.shelly-design-c.home .shelly-journey__title { color: var(--c-ink); }
.shelly-design-c.home .shelly-journey__lead { color: var(--c-grey); }
.shelly-design-c.home .shelly-journey__steps { position: relative; gap: 20px; }
.shelly-design-c.home .shelly-journey__steps::before { content: ""; position: absolute; left: 60px; right: 60px; top: 56px; border-top: 3px dotted var(--c-blue); opacity: 0.55; }
.shelly-design-c.home .shelly-journey__step { position: relative; padding: 26px 26px 28px; border: 0; border-radius: 30px; background: var(--c-white); box-shadow: var(--c-shadow); }
.shelly-design-c.home .shelly-journey__step::before { content: none; }
.shelly-design-c.home .shelly-journey__num { position: relative; width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 999px; font: 800 24px/1 'Manrope', sans-serif; letter-spacing: 0; color: #FFFFFF; background: var(--c-grad); box-shadow: 0 0 0 8px var(--c-white); }
.shelly-design-c.home .shelly-journey__step h3 { font: 800 23px/1.2 'Manrope', sans-serif; letter-spacing: -0.015em; color: var(--c-ink); }
.shelly-design-c.home .shelly-journey__step p { color: var(--c-grey); }
.shelly-design-c.home .shelly-journey__from { display: inline-block; padding: 5px 12px; border-radius: 999px; color: var(--c-ink); background: var(--c-sun); font-weight: 700; }
.shelly-design-c.home .shelly-journey__link { color: var(--c-blue-dark); font-weight: 700; border-color: transparent; }
.shelly-design-c.home .shelly-journey__link:hover { border-color: currentColor; }

/* Popular first devices: rounded cards */
.shelly-design-c.home .shelly-carousel { background: var(--c-white); }
.shelly-design-c.home .shelly-carousel .wc-block-product,
.shelly-design-c.home .shelly-carousel li.product { padding: 12px 12px 18px !important; border: 0; border-radius: 28px; background: var(--c-white); box-shadow: var(--c-shadow); overflow: hidden; transition: transform 240ms ease, box-shadow 240ms ease; }
.shelly-design-c.home .shelly-carousel .wc-block-product:hover,
.shelly-design-c.home .shelly-carousel li.product:hover { transform: translateY(-6px); box-shadow: var(--c-shadow-lift); }
.shelly-design-c.home .shelly-carousel .wc-block-components-product-image { margin: 0 0 16px; border-radius: 20px; overflow: hidden; background: #F2F5F8; }
.shelly-design-c.home .shelly-carousel img { margin: 0 !important; padding: 22px; background: transparent !important; mix-blend-mode: multiply; }
.shelly-design-c.home .shelly-carousel .wp-block-post-title { margin: 0 8px 6px !important; font-weight: 800 !important; }
.shelly-design-c.home .shelly-carousel .wp-block-woocommerce-product-price { margin: 0 8px 14px !important; font-weight: 600 !important; color: var(--c-grey); }
.shelly-design-c.home .shelly-carousel .wc-block-components-product-button { margin: auto 8px 0 !important; width: auto !important; }
.shelly-design-c.home .shelly-carousel .wc-block-components-product-button .wp-block-button__link { width: 100%; min-height: 44px; font: 700 14.5px/1 'Manrope', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #FFFFFF !important; background: var(--c-grad) !important; border: 0 !important; border-radius: 999px !important; }
.shelly-design-c.home .shelly-carousel__arrow { border-radius: 999px !important; }
.shelly-design-c.home .shelly-carousel :is(.wp-block-group, ul, .shelly-carousel__track) { padding-bottom: 34px; margin-bottom: -34px; }

/* Experience Centre: a rounded dark card */
.shelly-design-c.home .shelly-xp { width: auto; margin: 24px var(--c-gutter); min-height: min(76vh, 700px); border-radius: 40px; }
.shelly-design-c.home .shelly-xp__eyebrow { padding: 7px 14px 7px 7px; border-radius: 999px; font: 700 13px/1 'Manrope', sans-serif; letter-spacing: 0 !important; text-transform: none !important; color: var(--c-white); background: rgba(253, 253, 253, 0.14); }
.shelly-design-c.home .shelly-xp__eyebrow span { padding: 5px 9px; border-radius: 999px; }
.shelly-design-c.home .shelly-xp__lead { font-size: 17px; }
.shelly-design-c.home .shelly-xp .shelly-btn { min-height: 60px; padding: 0 36px; font-size: 17px; }
.shelly-design-c.home .shelly-xp__facts strong { font-weight: 800; }

/* Catalog + pro lane */
.shelly-design-c.home .shelly-categories { background: var(--c-white); }
.shelly-design-c.home .shelly-categories__featured { border-radius: 36px; overflow: hidden; }
.shelly-design-c.home .shelly-categories__tile { border-radius: 26px !important; overflow: hidden; border: 0 !important; box-shadow: var(--c-shadow); }
.shelly-design-c.home .shelly-categories__tile-media { border-radius: 18px; overflow: hidden; }
.shelly-design-c.home .shelly-prolane { width: auto; margin: 24px var(--c-gutter); padding: 84px 0; border-radius: 40px; background: var(--c-ink); }
.shelly-design-c.home .shelly-prolane .shelly-eyebrow { color: var(--c-white) !important; background: rgba(253, 253, 253, 0.12) !important; }
.shelly-design-c.home .shelly-prolane__group-title { font: 700 13px/1.3 'Manrope', sans-serif; letter-spacing: 0 !important; text-transform: none !important; color: rgba(253, 253, 253, 0.66); }
.shelly-design-c.home .shelly-prolane__group a { padding: 10px 16px; border: 0; border-radius: 999px; font-weight: 700; background: rgba(253, 253, 253, 0.1); }
.shelly-design-c.home .shelly-prolane__group a:hover { color: var(--c-ink); background: var(--c-white); }
.shelly-design-c.home .shelly-prolane .shelly-btn--ghost,
.shelly-design-c.home .shelly-prolane .shelly-btn--outline { color: var(--c-white) !important; background: rgba(253, 253, 253, 0.12); box-shadow: none; }
.shelly-design-c.home .shelly-prolane .shelly-btn--ghost:hover,
.shelly-design-c.home .shelly-prolane .shelly-btn--outline:hover { color: var(--c-ink) !important; background: var(--c-white); }

.shelly-design-c.home .shelly-apppromo,
.shelly-design-c.home .shelly-ecosystem,
.shelly-design-c.home .shelly-how { background: var(--c-white); }
.shelly-design-c.home .shelly-ecosystem__tile { border-radius: 22px; }
.shelly-design-c.home .shelly-apppromo__media { border-radius: 36px; overflow: hidden; }
.shelly-design-c.home .shelly-apppromo__feature { border-radius: 24px; border: 0; background: var(--c-tint); }
.shelly-design-c.home .shelly-apppromo__feature:nth-child(2) { background: var(--c-sun); }
.shelly-design-c.home .shelly-apppromo__feature:nth-child(3) { background: var(--c-mint); }
.shelly-design-c.home .shelly-apppromo__feature:nth-child(4) { background: var(--c-peach); }
.shelly-design-c.home .shelly-how__number { border-radius: 999px; }

/* A day with Shelly: the flat Experience Centre for Casa */
.shelly-design-c.home .vc-day { background: var(--c-white); padding: 96px 0; scroll-margin-top: calc(var(--shelly-header-h) + 20px); }
.shelly-design-c.home .vc-day__inner { max-width: var(--shelly-page-max); margin-inline: auto; padding: 0 var(--shelly-pad-x); }
.shelly-design-c.home .vc-day__head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.shelly-design-c.home .vc-day__title { margin: 0 0 14px; font: 800 clamp(32px, 3.8vw, 54px)/1.06 'Manrope', sans-serif; letter-spacing: -0.02em; color: var(--c-ink); text-wrap: balance; }
.shelly-design-c.home .vc-day__lead { margin: 0; font: 400 17px/1.6 'Manrope', sans-serif; color: var(--c-grey); }
.shelly-design-c.home .vc-day__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.shelly-design-c.home .vc-day__list::before { content: ""; position: absolute; left: 12%; right: 12%; top: 34px; border-top: 3px dotted var(--c-blue); opacity: 0.5; }
.shelly-design-c.home .vc-moment { position: relative; padding: 24px 22px 22px; border-radius: 30px; background: var(--c-tint); }
.shelly-design-c.home .vc-moment--sun { background: var(--c-sun); }
.shelly-design-c.home .vc-moment--peach { background: var(--c-peach); }
.shelly-design-c.home .vc-moment--mint { background: var(--c-mint); }
.shelly-design-c.home .vc-moment__time { display: inline-block; margin: 0 0 18px; padding: 8px 14px; border-radius: 999px; font: 800 14px/1 'Manrope', sans-serif; color: #FFFFFF; background: var(--c-grad); box-shadow: 0 0 0 6px var(--c-white); font-variant-numeric: tabular-nums; }
.shelly-design-c.home .vc-moment__title { margin: 0 0 8px; font: 800 24px/1.15 'Manrope', sans-serif; letter-spacing: -0.015em; color: var(--c-ink); }
.shelly-design-c.home .vc-moment__copy { margin: 0 0 18px; font: 400 15px/1.55 'Manrope', sans-serif; color: rgba(18, 21, 25, 0.74); }
.shelly-design-c.home .vc-moment__devices { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.shelly-design-c.home .vc-moment__devices a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px; font: 700 13px/1.2 'Manrope', sans-serif; color: var(--c-ink); background: rgba(253, 253, 253, 0.85); box-shadow: var(--c-shadow); transition: transform 160ms ease; }
.shelly-design-c.home .vc-moment__devices a:hover { transform: translateY(-2px); color: var(--c-blue-dark); }
.shelly-design-c.home .vc-moment__ico { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; color: #FFFFFF; background: var(--c-grad); }
.shelly-design-c.home .vc-day__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 40px 0 0; }
.shelly-design-c .vc-btn--outline { color: var(--c-ink) !important; background: var(--c-white); box-shadow: inset 0 0 0 1.5px rgba(18, 21, 25, 0.18); }
.shelly-design-c .vc-btn--outline:hover { color: var(--c-blue-dark) !important; background: var(--c-white); box-shadow: inset 0 0 0 1.5px var(--c-blue-dark); filter: none; }
@media (max-width: 1199px) { .shelly-design-c.home .vc-day__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shelly-design-c.home .vc-day__list::before { content: none; } }
@media (max-width: 989px) { .shelly-design-c.home .vc-day { padding: 64px 0; } .shelly-design-c.home .vc-day__inner { padding: 0 var(--shelly-pad-x-mobile); } }
@media (max-width: 639px) { .shelly-design-c.home .vc-day__list { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.shelly-design-c .vc-spot__dot::after { animation: none; opacity: 0.5; transform: none; }
	.shelly-design-c .vc-btn, .shelly-design-c.home .shelly-btn, .shelly-design-c.home .shelly-benefits__card, .shelly-design-c.home .shelly-carousel .wc-block-product { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.shelly-design-c .vc-grid { gap: 36px; }
	.shelly-design-c .vc-set li:nth-child(2) a { margin-left: 0; }
}
@media (max-width: 989px) {
	.shelly-design-c .shelly-header { top: 8px; margin-top: 8px; border-radius: 22px; }
	.shelly-design-c .vc-hero { padding-top: 10px; }
	.shelly-design-c .vc-hero .shelly-hs__inner { border-radius: 28px; }
	.shelly-design-c .vc-grid { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding: 32px 18px 104px; }
	.shelly-design-c .vc-hero__title { font-size: clamp(34px, 9.4vw, 48px); }
	.shelly-design-c .vc-hero__lead { font-size: 16px; margin-bottom: 22px; }
	.shelly-design-c .vc-card { padding: 18px 16px 14px; border-radius: 24px; }
	.shelly-design-c .vc-card .shelly-discover__goal { padding: 8px 10px; gap: 8px; }
	.shelly-design-c .vc-card .shelly-discover__goal-icon { width: 34px; height: 34px; }
	.shelly-design-c .vc-card__hint svg { transform: rotate(90deg); }
	.shelly-design-c .vc-spot__label { font-size: 12px; padding: 6px 10px; }
	.shelly-design-c .vc-set { justify-self: stretch; max-width: none; }
	.shelly-design-c .vc-set li a { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; border-radius: 22px; }
	.shelly-design-c .vc-set__media img { width: 76px; height: 76px; }
	.shelly-design-c .vc-retro__steps { grid-template-columns: 1fr; }
	.shelly-design-c .vc-hero .shelly-hs__controls { left: 18px; right: 18px; bottom: 22px; }
	.shelly-design-c .vc-hero .shelly-hs__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.shelly-design-c .vc-hero .shelly-hs__tab { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
	.shelly-design-c.home .shelly-metrics__inner { gap: 10px; }
	.shelly-design-c.home .shelly-metrics__item { padding: 20px 18px; border-radius: 22px; }
	.shelly-design-c.home .shelly-benefits { padding: 64px 0; }
	.shelly-design-c.home .shelly-journey { padding: 64px 0; border-radius: 30px; }
	.shelly-design-c.home .shelly-journey__steps::before { content: none; }
	.shelly-design-c.home .shelly-xp,
	.shelly-design-c.home .shelly-prolane { border-radius: 30px; }
}

/* ============================================================
 * Homepage in the shelly.com structure (theme 1.9.2): the shared sections
 * (sections.css) in Casa's look. A friendly guide: rounded panels inset
 * from the edges, Manrope 800, pill buttons and labels, Shelly's tints
 * (sun, peach, mint, ice) and soft blue shadows.
 * ========================================================== */
.shelly-design-c.vs-home {
	--v-w-title: 800;
	--v-r-xs: 12px; --v-r-sm: 16px; --v-r: 24px; --v-r-lg: 32px; --v-r-pill: 999px;
	--s-blue: #2481C7; --s-mid: #0361A7; --s-deep: #003C82; --s-chip: #DDF1FB;
	--s-grad: linear-gradient(135deg, #2481C7 0%, #003C82 100%);
	--s-navy: linear-gradient(135deg, #0361A7 0%, #003C82 100%);
}
/* Labels are pills; headings are warm and heavy */
.shelly-design-c.vs-home .vs-eyebrow { display: inline-flex; width: auto; padding: 8px 15px; font: 700 13px/1.2 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; color: #0361A7; background: #DDF1FB; border-radius: 999px; }
.shelly-design-c.vs-home .vs-dark .vs-eyebrow { color: #FDFDFD; background: rgba(253, 253, 253, 0.16); }
.shelly-design-c.vs-home .vs-h2 { font-weight: 800; letter-spacing: -0.02em; }
.shelly-design-c.vs-home .vs-statement { font-weight: 800; letter-spacing: -0.03em; }
/* Buttons: pills that lift */
.shelly-design-c.vs-home :is(.vs-btn, .sc-slide__btn, .sc-app .vs-btn) { border-radius: 999px !important; background: linear-gradient(135deg, #2481C7 0%, #003C82 100%) !important; box-shadow: 0 12px 26px -12px rgba(0, 60, 130, 0.7); transition: transform 200ms ease, filter 200ms ease; }
.shelly-design-c.vs-home :is(.vs-btn, .sc-slide__btn):hover { transform: translateY(-2px); }
.shelly-design-c.vs-home .vs-btn.vs-btn--outline { background: #FDFDFD !important; color: #121519 !important; border: 0 !important; box-shadow: inset 0 0 0 1.5px rgba(18, 21, 25, 0.18); }
.shelly-design-c.vs-home .sc-slide__btn.sc-slide__btn--ghost { background: rgba(253, 253, 253, 0.16) !important; border: 0 !important; box-shadow: none; }
/* Hero: an inset rounded panel */
.shelly-design-c.vs-home .sc-slider { width: auto; max-width: none; margin: 12px var(--c-gutter) 0 !important; border-radius: 40px; overflow: hidden; isolation: isolate; }
.shelly-design-c.vs-home .sc-slide__title { font-weight: 800 !important; letter-spacing: -0.02em; }
.shelly-design-c.vs-home .sc-slide__eyebrow { display: inline-block; padding: 7px 13px; color: #121519; background: #FFEFCC; border-radius: 999px; letter-spacing: 0; text-transform: none; font-size: 13px; }
/* Stat tiles in Shelly's tints */
.shelly-design-c.vs-home .vs-metrics__grid { gap: 12px; }
.shelly-design-c.vs-home .vs-metrics__tile { background: #DDF1FB; box-shadow: none; }
.shelly-design-c.vs-home .vs-metrics__tile:nth-child(2) { background: #FFEFCC; }
.shelly-design-c.vs-home .vs-metrics__tile:nth-child(3) { background: #D0FFF0; }
.shelly-design-c.vs-home .vs-metrics__tile:nth-child(4) { background: #FCEEDE; }
.shelly-design-c.vs-home .vs-metrics__value, .shelly-design-c.vs-home .vs-metrics__unit { font-weight: 800; color: #003C82; }
.shelly-design-c.vs-home .vs-metrics__tile--link { background: linear-gradient(135deg, #2481C7 0%, #003C82 100%); box-shadow: 0 18px 40px -18px rgba(0, 60, 130, 0.6); }
/* Products: tinted wells, cards that lift */
.shelly-design-c.vs-home .vs-pill { background: #F0F4F7; border-color: transparent; font-weight: 700; }
.shelly-design-c.vs-home .vs-pill.is-active { background: #0361A7; color: #FDFDFD; border-color: #0361A7; }
.shelly-design-c.vs-home .vs-card { padding: 10px 10px 16px; background: #FDFDFD; border-radius: 28px; box-shadow: 0 2px 6px rgba(0, 60, 130, 0.06), 0 18px 40px -18px rgba(0, 60, 130, 0.28); transition: transform 240ms ease, box-shadow 240ms ease; }
.shelly-design-c.vs-home .vs-card:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(0, 60, 130, 0.08), 0 30px 60px -22px rgba(0, 60, 130, 0.4); }
.shelly-design-c.vs-home .vs-card__media { background: #DDF1FB; }
.shelly-design-c.vs-home .vs-card:nth-child(4n+2) .vs-card__media { background: #FFEFCC; }
.shelly-design-c.vs-home .vs-card:nth-child(4n+3) .vs-card__media { background: #D0FFF0; }
.shelly-design-c.vs-home .vs-card:nth-child(4n+4) .vs-card__media { background: #FCEEDE; }
.shelly-design-c.vs-home .vs-card__name, .shelly-design-c.vs-home .vs-card__price, .shelly-design-c.vs-home .vs-card__pills { padding-inline: 6px; }
.shelly-design-c.vs-home .vs-card__name { font-weight: 800; }
.shelly-design-c.vs-home .vs-rail { padding-block: 8px 30px; }
/* Film */
.shelly-design-c.vs-home .sc-video__frame { border-radius: 40px; box-shadow: 0 30px 60px -30px rgba(0, 60, 130, 0.5); }
/* App + features: features in a rounded sun panel */
.shelly-design-c.vs-home .sc-app__title { font-weight: 800; }
.shelly-design-c.vs-home .sc-app__img { border-radius: 32px; }
.shelly-design-c.vs-home .sc-features { width: auto; max-width: none; margin: 0 var(--c-gutter) !important; border-radius: 40px; background: linear-gradient(135deg, #FFEFCC 0%, #FCEEDE 100%); }
.shelly-design-c.vs-home .sc-feature { padding: 22px; background: rgba(253, 253, 253, 0.7); border-radius: 24px; }
.shelly-design-c.vs-home .sc-feature h3 { font-weight: 800; }
/* Solutions: an inset rounded blue band */
.shelly-design-c.vs-home .vs-solutions { width: auto; max-width: none; margin: 24px var(--c-gutter) !important; border-radius: 40px; }
.shelly-design-c.vs-home .vs-solution { border-radius: 28px; }
.shelly-design-c.vs-home .vs-solution__body h3 { font-weight: 800; }
/* Journey + compatibility */
.shelly-design-c.vs-home .sc-journey__card { border-radius: 32px; box-shadow: 0 18px 40px -18px rgba(0, 60, 130, 0.45); }
.shelly-design-c.vs-home .sc-journey__title { font-weight: 800; }
.shelly-design-c.vs-home .vs-compat__band { border-radius: 40px; }
.shelly-design-c.vs-home .vs-compat__copy .vs-h2 { font-weight: 800 !important; }
.shelly-design-c.vs-home .vs-compat__tiles li { border-radius: 16px; box-shadow: 0 8px 20px -10px rgba(0, 20, 50, 0.6); }
@media (max-width: 989px) {
	.shelly-design-c.vs-home .sc-slider { border-radius: 28px; }
	.shelly-design-c.vs-home .sc-features, .shelly-design-c.vs-home .vs-solutions { border-radius: 28px; }
}