/* ============================================================
 * Direction B · Blueprint — the datasheet as a design language
 * White paper, visible rules and grid, Manrope 700 display, monospace labels,
 * numbered sections, no cards and no shadows. Action colour is #0361A7.
 * Scoped to body.shelly-design-b. See docs/design-directions.md.
 * ========================================================== */
.shelly-design-b {
	--b-ink: #121519; --b-paper: #FDFDFD; --b-paper-2: #F9F9F9; --b-tint: #F0F4F7; --b-tile: #F2F5F8;
	--b-rule: rgba(18, 21, 25, 0.14); --b-rule-strong: #121519; --b-grey: #656669;
	--b-blue: #0361A7; --b-blue-line: #4594D1; --b-deep: #003C82;
	--b-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	--b-grid: linear-gradient(rgba(3, 97, 167, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(3, 97, 167, 0.055) 1px, transparent 1px);
}

/* ---------- Type system ---------- */
.shelly-design-b .vb-mono { font-family: var(--b-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.shelly-design-b .vb-label { margin: 0 0 22px; color: var(--b-grey); }
.shelly-design-b .vb-label b { color: var(--b-blue); font-weight: 700; }
.shelly-design-b.home main { counter-reset: vb 1; font-variant-numeric: tabular-nums; }
.shelly-design-b.home main .shelly-eyebrow { display: block; margin: 0 0 20px; font: 500 11px/1.4 var(--b-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--b-grey); }
.shelly-design-b.home main .shelly-eyebrow:not(.shelly-builder__badge)::before { counter-increment: vb; content: counter(vb, decimal-leading-zero) " / "; color: var(--b-blue); font-weight: 700; }
.shelly-design-b.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: 700 !important; letter-spacing: -0.03em !important; font-size: clamp(32px, 3.8vw, 54px) !important; line-height: 1.04 !important; text-wrap: balance; }

/* ---------- Buttons: square, solid blue-dark ---------- */
.shelly-design-b .vb-btn,
.shelly-design-b.home .shelly-btn,
.shelly-design-b .shelly-header__shop { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; font: 700 15px/1 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; border-radius: 0; color: #FFFFFF !important; background: var(--b-blue); border: 1px solid var(--b-blue); box-shadow: none; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; }
.shelly-design-b .vb-btn:hover,
.shelly-design-b.home .shelly-btn:hover,
.shelly-design-b .shelly-header__shop:hover { background: var(--b-deep); border-color: var(--b-deep); color: #FFFFFF !important; transform: none; }
.shelly-design-b.home .shelly-btn--outline,
.shelly-design-b.home .shelly-btn--ghost { color: var(--b-ink) !important; background: transparent; border-color: var(--b-ink); }
.shelly-design-b.home .shelly-btn--outline:hover,
.shelly-design-b.home .shelly-btn--ghost:hover { color: #FFFFFF !important; background: var(--b-ink); border-color: var(--b-ink); }
.shelly-design-b.home .shelly-btn--sm { min-height: 40px; padding: 0 16px; font-size: 13px; }
.shelly-design-b .vb-link { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font: 700 15px/1.2 'Manrope', sans-serif; color: var(--b-ink); background: linear-gradient(var(--b-blue), var(--b-blue)) 0 100% / 0 2px no-repeat; transition: background-size 240ms ease, color 160ms ease; }
.shelly-design-b .vb-link:hover { color: var(--b-blue); background-size: 100% 2px; }
.shelly-design-b .vb-link svg { transition: transform 200ms ease; }
.shelly-design-b .vb-link:hover svg { transform: translateX(4px); }

/* ---------- Header: white, ruled ---------- */
.shelly-design-b .shelly-announcement { background: var(--b-ink); }
.shelly-design-b .shelly-announcement__msg { font-family: var(--b-mono); font-size: 12px; letter-spacing: 0.02em; }
.shelly-design-b .shelly-header { background: var(--b-paper); border-bottom: 1px solid var(--b-rule-strong); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.shelly-design-b .shelly-nav .shelly-nav__link { position: relative; font-weight: 600; color: var(--b-ink); }
.shelly-design-b .shelly-nav .shelly-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--b-blue); transform: scaleX(0); transform-origin: left; transition: transform 200ms ease; }
.shelly-design-b .shelly-nav .shelly-nav__item:hover > .shelly-nav__link::after,
.shelly-design-b .shelly-nav .shelly-nav__item:focus-within > .shelly-nav__link::after,
.shelly-design-b .shelly-nav .shelly-nav__link[aria-current]::after { transform: scaleX(1); }
.shelly-design-b .shelly-nav .shelly-nav__item:hover > .shelly-nav__link { color: var(--b-blue); }
.shelly-design-b .shelly-header__shop { min-height: 40px; height: 40px; padding: 0 18px; font-size: 13.5px; }
.shelly-design-b .shelly-nav .shelly-nav__panel { background: var(--b-paper); border: 1px solid var(--b-rule-strong); border-top: 0; box-shadow: none; }
.shelly-design-b .shelly-nav .shelly-nav__col-title { font: 500 11px/1.4 var(--b-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--b-grey); border-color: var(--b-rule); }
.shelly-design-b .shelly-nav__badge { background: var(--b-blue); border-radius: 0; }

/* ============================================================
 * Hero: the question is the headline
 * ========================================================== */
.shelly-design-b .vb-hero { background: var(--b-paper) var(--b-grid); background-size: 40px 40px; color: var(--b-ink); border-bottom: 2px solid var(--b-rule-strong); }
.shelly-design-b .vb-hero .shelly-hs__inner { max-width: var(--shelly-page-max); margin-inline: auto; padding: 0 var(--shelly-pad-x); }
.shelly-design-b .vb-hero :focus-visible { outline: 2px solid var(--b-blue); outline-offset: 3px; }

/* Document tabs on top */
.shelly-design-b .vb-hero .shelly-hs__controls { position: relative; inset: auto; max-width: none; padding: 0; margin: 0; align-items: flex-end; border-bottom: 1px solid var(--b-rule-strong); }
.shelly-design-b .vb-hero .shelly-hs__controls::before { content: none; }
.shelly-design-b .vb-hero .shelly-hs__tabs { gap: 0; margin-bottom: -1px; padding-top: 18px; }
.shelly-design-b .vb-hero .shelly-hs__tab { padding: 14px 22px 14px; font: 600 13.5px/1 'Manrope', sans-serif; color: var(--b-grey); background: transparent; border: 1px solid transparent; border-top: 2px solid transparent; border-bottom: 0; gap: 10px; transition: none; }
.shelly-design-b .vb-hero .shelly-hs__tab span { font: 700 11px/1 var(--b-mono); letter-spacing: 0.06em; color: var(--b-grey); }
.shelly-design-b .vb-hero .shelly-hs__tab:hover { color: var(--b-ink); }
.shelly-design-b .vb-hero .shelly-hs__tab.is-active { color: var(--b-ink); background: var(--b-paper); border-color: var(--b-rule-strong); border-top: 2px solid var(--b-blue); }
.shelly-design-b .vb-hero .shelly-hs__tab.is-active span { color: var(--b-blue); }
.shelly-design-b .vb-hero .shelly-hs__arrows { padding: 0 0 8px; gap: 6px; }
.shelly-design-b .vb-hero__sheet { color: var(--b-grey); margin-right: 8px; }
.shelly-design-b .vb-hero .shelly-hs__arrow { width: 36px; height: 36px; color: var(--b-ink); background: var(--b-paper); border: 1px solid var(--b-rule-strong); }
.shelly-design-b .vb-hero .shelly-hs__arrow:hover { color: #FFFFFF; background: var(--b-ink); border-color: var(--b-ink); }

/* Panels */
.shelly-design-b .vb-hero .shelly-hs__panel { background: none; }
.shelly-design-b .vb-hero .shelly-hs__panel::before { content: none; }
.shelly-design-b .vb-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); min-height: 640px; }
.shelly-design-b .vb-grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.shelly-design-b .vb-grid__main { padding: 48px 56px 56px 0; min-width: 0; }
.shelly-design-b .vb-grid__side,
.shelly-design-b .vb-grid > .vb-figure { padding: 48px 0 56px 40px; border-left: 1px solid var(--b-rule-strong); min-width: 0; margin: 0; }
.shelly-design-b .vb-hero__q { margin: 0 0 40px; font: 700 clamp(44px, 5.8vw, 84px)/0.98 'Manrope', sans-serif; letter-spacing: -0.035em; color: var(--b-ink); text-wrap: balance; max-width: 13ch; }
.shelly-design-b .vb-hero__title { margin: 0 0 22px; font: 700 clamp(36px, 4.2vw, 60px)/1.02 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--b-ink); text-wrap: balance; }
.shelly-design-b .vb-hero__lead { margin: 0 0 30px; max-width: 54ch; font: 400 17px/1.6 'Manrope', sans-serif; color: var(--b-grey); }
.shelly-design-b .vb-side__title { margin: 0 0 14px; font: 700 26px/1.12 'Manrope', sans-serif; letter-spacing: -0.02em; color: var(--b-ink); }
.shelly-design-b .vb-side__lead { margin: 0 0 24px; font: 400 15.5px/1.6 'Manrope', sans-serif; color: var(--b-grey); }
.shelly-design-b .vb-side__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.shelly-design-b .vb-figure { margin: 0; }
.shelly-design-b .vb-figure--side { margin-top: 36px; }
.shelly-design-b .vb-figure svg { display: block; width: 100%; height: auto; border: 1px solid var(--b-blue); box-shadow: none; filter: none; }
.shelly-design-b .vb-figure figcaption { display: flex; gap: 12px; margin-top: 10px; color: var(--b-grey); }
.shelly-design-b .vb-figure figcaption b { color: var(--b-blue); font-weight: 700; white-space: nowrap; }

/* The index (discovery engine, restyled) */
.shelly-design-b .vb-index { min-height: 0; padding: 0; background: none; box-shadow: none; color: var(--b-ink); }
.shelly-design-b .vb-index .shelly-discover__head { padding: 0 0 12px; margin: 0; border-bottom: 2px solid var(--b-rule-strong); }
.shelly-design-b .vb-index .shelly-discover__kicker { font: 500 11px/1.4 var(--b-mono); letter-spacing: 0.08em; color: var(--b-grey); }
.shelly-design-b .vb-index .shelly-discover__steps li { font: 500 11px/1 var(--b-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--b-grey); }
.shelly-design-b .vb-index .shelly-discover__steps li span { border-radius: 0; }
.shelly-design-b .vb-index .shelly-discover__steps li.is-current { color: var(--b-blue); }
.shelly-design-b .vb-index[data-step="goal"] .shelly-discover__q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shelly-design-b .vb-index .shelly-discover__q { margin: 22px 0 16px; font: 700 26px/1.15 'Manrope', sans-serif; letter-spacing: -0.02em; color: var(--b-ink); }
.shelly-design-b .vb-index .shelly-discover__q--result { font-size: 24px; margin-bottom: 8px; }
.shelly-design-b .vb-index .shelly-discover__goals { display: block; counter-reset: vbgoal; }
.shelly-design-b .vb-index .shelly-discover__goal { counter-increment: vbgoal; position: relative; width: 100%; min-height: 0; display: grid; grid-template-columns: 44px minmax(150px, 220px) minmax(0, 1fr) 28px; align-items: center; gap: 0 20px; padding: 26px 8px 26px 0; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--b-rule-strong); border-radius: 0; transition: background 160ms ease, padding 200ms ease; }
.shelly-design-b .vb-index .shelly-discover__goal::before { content: counter(vbgoal, upper-alpha); font: 700 12px/1 var(--b-mono); color: var(--b-blue); padding-left: 8px; }
.shelly-design-b .vb-index .shelly-discover__goal::after { content: "→"; font: 400 24px/1 'Manrope', sans-serif; color: var(--b-ink); justify-self: end; transition: transform 200ms ease, color 160ms ease; }
.shelly-design-b .vb-index .shelly-discover__goal:hover,
.shelly-design-b .vb-index .shelly-discover__goal:focus-visible { background: var(--b-tint); transform: none; border-color: var(--b-rule-strong); }
.shelly-design-b .vb-index .shelly-discover__goal:hover::after { transform: translateX(6px); color: var(--b-blue); }
.shelly-design-b .vb-index .shelly-discover__goal-icon { display: none; }
.shelly-design-b .vb-index .shelly-discover__goal-label { font: 700 clamp(28px, 3vw, 40px)/1 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--b-ink); }
.shelly-design-b .vb-index .shelly-discover__goal-list { display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 11.5px/1.5 var(--b-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--b-grey); }
.shelly-design-b .vb-index .shelly-discover__goal-list span:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--b-blue-line); }
.shelly-design-b .vb-index .shelly-discover__nav { margin: 16px 0 0; }
.shelly-design-b .vb-index .shelly-discover__back,
.shelly-design-b .vb-index .shelly-discover__reset { font: 500 11px/1 var(--b-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.shelly-design-b .vb-index .shelly-discover__areas { gap: 0; border-top: 1px solid var(--b-rule-strong); border-left: 1px solid var(--b-rule); counter-reset: vbarea; }
.shelly-design-b .vb-index .shelly-discover__area { counter-increment: vbarea; min-height: 62px; padding: 12px 16px; background: transparent; border: 0; border-right: 1px solid var(--b-rule); border-bottom: 1px solid var(--b-rule); border-radius: 0; }
.shelly-design-b .vb-index .shelly-discover__area::before { content: counter(vbarea, decimal-leading-zero); font: 700 11px/1 var(--b-mono); color: var(--b-blue); margin-right: 4px; }
.shelly-design-b .vb-index .shelly-discover__area:hover,
.shelly-design-b .vb-index .shelly-discover__area:focus-visible { background: var(--b-tint); border-color: var(--b-rule); }
.shelly-design-b .vb-index .shelly-discover__area-icon { color: var(--b-blue-line); }
.shelly-design-b .vb-index .shelly-discover__area-label { font-weight: 700; font-size: 15.5px; }
.shelly-design-b .vb-index .shelly-discover__pick { background: var(--b-paper); border: 1px solid var(--b-rule-strong); border-radius: 0; box-shadow: none; }
.shelly-design-b .vb-index .shelly-discover__thumb { background: var(--b-tile); }
.shelly-design-b .vb-index .shelly-discover__tag,
.shelly-design-b .vb-index .shelly-discover__later-title { font: 700 10.5px/1.3 var(--b-mono); letter-spacing: 0.08em; }
.shelly-design-b .vb-index .shelly-discover__later-item { border-color: var(--b-rule); }
.shelly-design-b .vb-index .shelly-discover__note { border-radius: 0; background: var(--b-tint); border-color: var(--b-blue); }
.shelly-design-b .vb-index .shelly-discover__foot { margin-top: 22px; padding-top: 0; border: 0; font-size: 14.5px; color: var(--b-grey); }
.shelly-design-b .vb-index .shelly-discover__foot a { color: var(--b-blue); }

/* Campaign as a bill of materials */
.shelly-design-b .vb-bom { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--b-rule-strong); }
.shelly-design-b .vb-bom li { border-bottom: 1px solid var(--b-rule); }
.shelly-design-b .vb-bom li a { display: grid; grid-template-columns: 28px 76px minmax(0, 1fr) auto; align-items: center; gap: 0 18px; padding: 14px 8px 14px 0; color: var(--b-ink); transition: background 160ms ease; }
.shelly-design-b .vb-bom li a:hover { background: var(--b-tint); }
.shelly-design-b .vb-bom__n { color: var(--b-blue); font-weight: 700; padding-left: 8px; }
.shelly-design-b .vb-bom__media { display: block; background: var(--b-tile); }
.shelly-design-b .vb-bom__media img { display: block; width: 76px; height: 76px; object-fit: contain; mix-blend-mode: multiply; }
.shelly-design-b .vb-bom__text { display: grid; gap: 5px; min-width: 0; }
.shelly-design-b .vb-bom__role { color: var(--b-grey); font-size: 10.5px; }
.shelly-design-b .vb-bom__name { font: 700 16px/1.25 'Manrope', sans-serif; }
.shelly-design-b .vb-bom__price { font: 600 15px/1 'Manrope', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shelly-design-b .vb-bom__total { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 8px 18px 8px; border-bottom: 2px solid var(--b-rule-strong) !important; }
.shelly-design-b .vb-bom__total .vb-bom__price { font-size: 22px; font-weight: 700; }

/* Retrofit steps */
.shelly-design-b .vb-how { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--b-rule-strong); }
.shelly-design-b .vb-how li { display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--b-rule); font: 400 16px/1.5 'Manrope', sans-serif; color: var(--b-grey); }
.shelly-design-b .vb-how li .vb-mono { color: var(--b-blue); font-weight: 700; padding-top: 4px; }
.shelly-design-b .vb-how li strong { color: var(--b-ink); }

/* ============================================================
 * Sections: every one opens with a full-strength rule
 * ========================================================== */
.shelly-design-b.home main > section { border-top: 2px solid var(--b-rule-strong); box-shadow: none; }
.shelly-design-b.home main > section.vb-hero { border-top: 0; }

/* Metrics: ruled four-cell strip */
.shelly-design-b.home .shelly-metrics { background: var(--b-paper); color: var(--b-ink); padding: 0; border-top: 0; }
.shelly-design-b.home .shelly-metrics__inner { gap: 0; }
.shelly-design-b.home .shelly-metrics__item { padding: 34px 28px; border: 0; border-right: 1px solid var(--b-rule-strong); text-align: left; }
.shelly-design-b.home .shelly-metrics__item:first-child { padding-left: 0; }
.shelly-design-b.home .shelly-metrics__item:last-child { border-right: 0; }
.shelly-design-b.home .shelly-metrics__value { font: 700 clamp(36px, 3.6vw, 52px)/1 'Manrope', sans-serif; letter-spacing: -0.035em; color: var(--b-ink); }
.shelly-design-b.home .shelly-metrics__value-sub { color: var(--b-blue); }
.shelly-design-b.home .shelly-metrics__label { margin-top: 10px; font: 500 11px/1.4 var(--b-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--b-grey); }

/* Benefits: four ruled columns */
.shelly-design-b.home .shelly-benefits { background: var(--b-paper); padding: 96px 0; }
.shelly-design-b.home .shelly-benefits__grid { gap: 0; border-top: 2px solid var(--b-rule-strong); border-bottom: 1px solid var(--b-rule-strong); counter-reset: vbben; }
.shelly-design-b.home .shelly-benefits__card { counter-increment: vbben; position: relative; padding: 28px 26px 26px; background: transparent; border: 0; border-right: 1px solid var(--b-rule); border-radius: 0; box-shadow: none; transition: background 160ms ease; }
.shelly-design-b.home .shelly-benefits__card:first-child { padding-left: 0; }
.shelly-design-b.home .shelly-benefits__card:first-child:hover { box-shadow: -26px 0 0 var(--b-tint); }
.shelly-design-b.home .shelly-benefits__card:last-child { border-right: 0; }
.shelly-design-b.home .shelly-benefits__card:hover { transform: none; background: var(--b-tint); }
.shelly-design-b.home .shelly-benefits__card::before { content: "02." counter(vbben); display: block; margin-bottom: 26px; font: 700 11px/1 var(--b-mono); letter-spacing: 0.06em; color: var(--b-blue); }
.shelly-design-b.home .shelly-benefits__icon { position: absolute; top: 20px; right: 22px; width: auto; height: auto; background: none; color: var(--b-blue-line); margin: 0; }
.shelly-design-b.home .shelly-benefits__icon svg { width: 26px; height: 26px; stroke-width: 1.4; }
.shelly-design-b.home .shelly-benefits__label { font: 700 22px/1.15 'Manrope', sans-serif; letter-spacing: -0.02em; }
.shelly-design-b.home .shelly-benefits__first { border-radius: 0; background: transparent; border-top: 1px solid var(--b-rule); }
.shelly-design-b.home .shelly-benefits__more { font-weight: 700; }

/* Journey: ruled timeline with ticks */
.shelly-design-b.home .shelly-journey { background: var(--b-paper-2) var(--b-grid); background-size: 40px 40px; color: var(--b-ink); padding: 96px 0; }
.shelly-design-b.home .shelly-journey__title { color: var(--b-ink); }
.shelly-design-b.home .shelly-journey__lead { color: var(--b-grey); }
.shelly-design-b.home .shelly-journey__steps { gap: 0; border-top: 2px solid var(--b-rule-strong); }
.shelly-design-b.home .shelly-journey__step { position: relative; padding: 30px 32px 0 0; border-top: 0; background: none; }
.shelly-design-b.home .shelly-journey__step + .shelly-journey__step { padding-left: 32px; border-left: 1px solid var(--b-rule); }
.shelly-design-b.home .shelly-journey__step::before { content: ""; position: absolute; top: -2px; left: 0; width: 2px; height: 16px; background: var(--b-blue); box-shadow: none; }
.shelly-design-b.home .shelly-journey__step + .shelly-journey__step::before { left: -1px; }
.shelly-design-b.home .shelly-journey__num { font: 700 12px/1 var(--b-mono); letter-spacing: 0.06em; color: var(--b-blue); margin-bottom: 18px; }
.shelly-design-b.home .shelly-journey__num::before { content: "STEP 0"; }
.shelly-design-b.home .shelly-journey__step h3 { font: 700 24px/1.15 'Manrope', sans-serif; letter-spacing: -0.02em; color: var(--b-ink); }
.shelly-design-b.home .shelly-journey__step p { color: var(--b-grey); }
.shelly-design-b.home .shelly-journey__from { color: var(--b-ink); font-weight: 700; }
.shelly-design-b.home .shelly-journey__link { color: var(--b-blue); border-color: currentColor; font-weight: 700; }

/* Popular first devices: flat ruled cells */
.shelly-design-b.home .shelly-carousel { background: var(--b-paper); }
.shelly-design-b.home .shelly-carousel .wc-block-product,
.shelly-design-b.home .shelly-carousel li.product { padding: 0 0 18px !important; background: transparent; border: 0; border-top: 2px solid var(--b-rule-strong); border-radius: 0; box-shadow: none; }
.shelly-design-b.home .shelly-carousel .wc-block-product:hover,
.shelly-design-b.home .shelly-carousel li.product:hover { transform: none; box-shadow: none; }
.shelly-design-b.home .shelly-carousel .wc-block-components-product-image { margin: 0 0 16px; background: var(--b-tile); }
.shelly-design-b.home .shelly-carousel img { margin: 0 !important; padding: 22px; background: transparent !important; mix-blend-mode: multiply; }
.shelly-design-b.home .shelly-carousel .wp-block-post-title { margin: 0 0 6px !important; font-weight: 700 !important; }
.shelly-design-b.home .shelly-carousel .wp-block-woocommerce-product-price { margin: 0 0 14px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.shelly-design-b.home .shelly-carousel .wc-block-components-product-button { margin: auto 0 0 !important; width: auto !important; }
.shelly-design-b.home .shelly-carousel .wc-block-components-product-button .wp-block-button__link { width: 100%; min-height: 42px; font: 700 13.5px/1 'Manrope', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--b-ink) !important; background: transparent !important; border: 1px solid var(--b-ink) !important; border-radius: 0 !important; }
.shelly-design-b.home .shelly-carousel .wc-block-product:hover .wp-block-button__link { color: #FFFFFF !important; background: var(--b-blue) !important; border-color: var(--b-blue) !important; }
.shelly-design-b.home .shelly-carousel__arrow { border-radius: 0 !important; border: 1px solid var(--b-rule-strong) !important; box-shadow: none !important; background: var(--b-paper) !important; }

/* Pro lane: the one deep-blue band */
.shelly-design-b.home .shelly-prolane { background: var(--b-deep) linear-gradient(rgba(253, 253, 253, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(253, 253, 253, 0.05) 1px, transparent 1px); background: linear-gradient(rgba(253, 253, 253, 0.05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(253, 253, 253, 0.05) 1px, transparent 1px) 0 0 / 40px 40px, var(--b-deep); padding: 88px 0; }
.shelly-design-b.home .shelly-prolane .shelly-eyebrow { color: rgba(253, 253, 253, 0.7) !important; }
.shelly-design-b.home .shelly-prolane .shelly-eyebrow::before { color: #9CDBF6 !important; }
.shelly-design-b.home .shelly-prolane__group-title { font: 500 11px/1.4 var(--b-mono); letter-spacing: 0.08em; color: rgba(253, 253, 253, 0.7); }
.shelly-design-b.home .shelly-prolane__group a { border-radius: 0; border-color: rgba(253, 253, 253, 0.4); font: 500 12.5px/1 var(--b-mono); letter-spacing: 0.02em; }
.shelly-design-b.home .shelly-prolane__group a:hover { background: #FDFDFD; color: var(--b-deep); border-color: #FDFDFD; }
.shelly-design-b.home .shelly-prolane .shelly-btn { background: #FDFDFD; border-color: #FDFDFD; color: var(--b-deep) !important; }
.shelly-design-b.home .shelly-prolane .shelly-btn:hover { background: #9CDBF6; border-color: #9CDBF6; color: var(--b-deep) !important; }
.shelly-design-b.home .shelly-prolane .shelly-btn--ghost,
.shelly-design-b.home .shelly-prolane .shelly-btn--outline { background: transparent; color: #FDFDFD !important; border-color: rgba(253, 253, 253, 0.6); }
.shelly-design-b.home .shelly-prolane .shelly-btn--ghost:hover,
.shelly-design-b.home .shelly-prolane .shelly-btn--outline:hover { background: #FDFDFD; color: var(--b-deep) !important; }

/* Catalog tiles */
.shelly-design-b.home .shelly-categories { background: var(--b-paper); }
.shelly-design-b.home .shelly-categories [class*="__tile"] { border-radius: 0 !important; box-shadow: none !important; }
.shelly-design-b.home .shelly-categories__glow,
.shelly-design-b.home .shelly-categories__featured-ring,
.shelly-design-b.home .shelly-categories__featured-mesh { display: none; }
.shelly-design-b.home .shelly-categories__featured { background: var(--b-deep); border-radius: 0; box-shadow: none; }
.shelly-design-b.home .shelly-categories__all,
.shelly-design-b.home .shelly-categories__featured-cta,
.shelly-design-b.home .shelly-categories__featured-tag,
.shelly-design-b.home .shelly-categories__featured-cta-arrow,
.shelly-design-b.home .shelly-categories__all-arrow { border-radius: 0 !important; box-shadow: none !important; }
.shelly-design-b.home .shelly-categories__all { border: 1px solid var(--b-ink); background: transparent; color: var(--b-ink); }
.shelly-design-b.home .shelly-categories__featured-tag,
.shelly-design-b.home .shelly-categories__tile-eyebrow,
.shelly-design-b.home .shelly-categories__tile-index,
.shelly-design-b.home .shelly-categories__tile-count { font-family: var(--b-mono); }
.shelly-design-b.home .shelly-categories__tile { border: 0 !important; border-top: 2px solid var(--b-rule-strong) !important; background: transparent !important; }
.shelly-design-b.home .shelly-categories__tile:hover { transform: none !important; background: var(--b-tint) !important; }

/* FIG. 2: the Experience Centre as a framed still */
.shelly-design-b.home .shelly-xp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 56px; align-items: center; min-height: 0; max-width: none; padding: 96px max(var(--shelly-pad-x), calc((100vw - var(--shelly-page-max)) / 2 + var(--shelly-pad-x))); background: var(--b-paper-2); color: var(--b-ink); }
.shelly-design-b.home .shelly-xp__veil { display: none; }
.shelly-design-b.home .shelly-xp .sx--preview { position: relative; inset: auto; order: 2; width: 100%; height: auto; aspect-ratio: 16 / 10; border: 1px solid var(--b-rule-strong); outline: 1px solid var(--b-rule-strong); outline-offset: 8px; background-size: cover; background-position: center; }
.shelly-design-b.home .shelly-xp__inner { order: 1; padding: 0; max-width: none; }
.shelly-design-b.home .shelly-xp__eyebrow { font: 500 11px/1.4 var(--b-mono); letter-spacing: 0.08em; color: var(--b-grey); }
.shelly-design-b.home .shelly-xp__eyebrow span { background: var(--b-blue); color: #FFFFFF; }
.shelly-design-b.home .shelly-xp__eyebrow::after { content: "· FIG. 2"; color: var(--b-blue); font-weight: 700; }
.shelly-design-b.home .shelly-xp__title { color: var(--b-ink); margin-bottom: 18px; }
.shelly-design-b.home .shelly-xp__lead { color: var(--b-grey); font-size: 16.5px; }
.shelly-design-b.home .shelly-xp__link { color: var(--b-ink); border-color: var(--b-ink); }
.shelly-design-b.home .shelly-xp__link:hover { color: var(--b-blue); }
.shelly-design-b.home .shelly-xp__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; border-top: 1px solid var(--b-rule-strong); margin-top: 40px; }
.shelly-design-b.home .shelly-xp__facts li { font: 500 11px/1.5 var(--b-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--b-grey); }
.shelly-design-b.home .shelly-xp__facts strong { font: 700 30px/1.1 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--b-ink); text-transform: none; }
.shelly-design-b.home .shelly-xp :focus-visible { outline-color: var(--b-blue); }

.shelly-design-b.home .shelly-apppromo,
.shelly-design-b.home .shelly-ecosystem { background: var(--b-paper); }
.shelly-design-b.home .shelly-how { background: var(--b-paper-2); }
.shelly-design-b.home .shelly-how__number { font-family: var(--b-mono); border-radius: 0; }
.shelly-design-b.home .shelly-ecosystem__tile { border-radius: 0; box-shadow: none; }

/* FIG. 2 as a floor plan: the flat Experience Centre for Blueprint */
.shelly-design-b.home .vb-plan { background: var(--b-paper-2); padding: 96px max(var(--shelly-pad-x), calc((100vw - var(--shelly-page-max)) / 2 + var(--shelly-pad-x))); scroll-margin-top: var(--shelly-header-h); }
.shelly-design-b.home .vb-plan__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 56px; align-items: start; }
.shelly-design-b.home .vb-plan__figure svg { border: 1px solid var(--b-rule-strong); outline: 1px solid var(--b-rule-strong); outline-offset: 8px; background: var(--b-tint); }
.shelly-design-b.home .vb-plan__figure { position: sticky; top: calc(var(--shelly-header-h) + 24px); margin-top: 8px; }
.shelly-design-b.home .vb-plan__figure figcaption { margin-top: 18px; }
.shelly-design-b.home .vb-plan__pin { cursor: default; }
.shelly-design-b.home .vb-plan__title { margin: 0 0 14px; font: 700 clamp(30px, 3.4vw, 46px)/1.04 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--b-ink); }
.shelly-design-b.home .vb-plan__lead { margin: 0 0 24px; font: 400 16px/1.6 'Manrope', sans-serif; color: var(--b-grey); }
.shelly-design-b.home .vb-plan__table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--b-rule-strong); margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.shelly-design-b.home .vb-plan__table th { text-align: left; padding: 10px 8px 10px 0; color: var(--b-grey); font-weight: 500; border-bottom: 1px solid var(--b-rule-strong); }
.shelly-design-b.home .vb-plan__table td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--b-rule); font: 400 14.5px/1.35 'Manrope', sans-serif; color: var(--b-ink); vertical-align: top; }
.shelly-design-b.home .vb-plan__table td a { font-weight: 700; color: var(--b-ink); background: linear-gradient(var(--b-blue), var(--b-blue)) 0 100% / 0 2px no-repeat; transition: background-size 200ms ease, color 160ms ease; }
.shelly-design-b.home .vb-plan__table td a:hover { color: var(--b-blue); background-size: 100% 2px; }
.shelly-design-b.home .vb-plan__room td { padding-top: 16px; padding-bottom: 6px; color: var(--b-blue); font-weight: 700; border-bottom: 1px solid var(--b-rule-strong); }
.shelly-design-b.home .vb-plan__n { color: var(--b-blue); font-weight: 700; width: 34px; }
.shelly-design-b.home .vb-plan__part { color: var(--b-grey); }
.shelly-design-b.home .vb-plan__r { text-align: right; padding-right: 0 !important; white-space: nowrap; }
.shelly-design-b.home .vb-plan__price { font-weight: 600; }
@media (max-width: 989px) {
	.shelly-design-b.home .vb-plan { padding: 64px var(--shelly-pad-x-mobile); }
	.shelly-design-b.home .vb-plan__inner { grid-template-columns: 1fr; gap: 40px; }
	.shelly-design-b.home .vb-plan__figure { position: static; }
	.shelly-design-b.home .vb-plan__part { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.shelly-design-b .vb-grid__main { padding-right: 40px; }
	.shelly-design-b .vb-grid__side,
	.shelly-design-b .vb-grid > .vb-figure { padding-left: 32px; }
	.shelly-design-b .vb-index .shelly-discover__goal { grid-template-columns: 36px minmax(0, 1fr) 28px; }
	.shelly-design-b .vb-index .shelly-discover__goal-list { grid-column: 2 / 3; margin-top: 10px; }
	.shelly-design-b .vb-index .shelly-discover__goal::after { grid-row: 1; grid-column: 3; }
}
@media (max-width: 989px) {
	.shelly-design-b .vb-hero .shelly-hs__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-design-b .vb-grid,
	.shelly-design-b .vb-grid--even { grid-template-columns: 1fr; min-height: 0; }
	.shelly-design-b .vb-grid__main { padding: 32px 0 36px; }
	.shelly-design-b .vb-grid__side,
	.shelly-design-b .vb-grid > .vb-figure { padding: 32px 0 44px; border-left: 0; border-top: 1px solid var(--b-rule-strong); }
	.shelly-design-b .vb-hero__q { margin-bottom: 28px; font-size: clamp(38px, 10.5vw, 56px); }
	.shelly-design-b .vb-hero .shelly-hs__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 12px; }
	.shelly-design-b .vb-hero .shelly-hs__tab { padding: 12px 14px; font-size: 12.5px; white-space: nowrap; }
	.shelly-design-b .vb-hero .shelly-hs__tab span { display: inline; }
	.shelly-design-b .vb-hero .shelly-hs__arrows { display: none; }
	.shelly-design-b .vb-index .shelly-discover__goal { padding: 20px 4px 20px 0; }
	.shelly-design-b.home .shelly-metrics__item { padding: 24px 16px; border-bottom: 1px solid var(--b-rule); }
	.shelly-design-b.home .shelly-metrics__item:nth-child(2n) { border-right: 0; }
	.shelly-design-b.home .shelly-metrics__item:nth-child(2n+1) { padding-left: 0; }
	.shelly-design-b.home .shelly-benefits,
	.shelly-design-b.home .shelly-journey { padding: 64px 0; }
	.shelly-design-b.home .shelly-benefits__card,
	.shelly-design-b.home .shelly-benefits__card:first-child { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--b-rule); }
	.shelly-design-b.home .shelly-benefits__card:first-child:hover { box-shadow: none; }
	.shelly-design-b.home .shelly-benefits__icon { right: 0; }
	.shelly-design-b.home .shelly-journey__step,
	.shelly-design-b.home .shelly-journey__step + .shelly-journey__step { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--b-rule); }
	.shelly-design-b.home .shelly-journey__step + .shelly-journey__step::before { display: none; }
	.shelly-design-b.home .shelly-xp { grid-template-columns: 1fr; gap: 40px; padding: 64px var(--shelly-pad-x-mobile); }
	.shelly-design-b.home .shelly-xp .sx--preview { order: 1; outline-offset: 5px; }
	.shelly-design-b.home .shelly-xp__inner { order: 2; }
}

/* ============================================================
 * Homepage in the shelly.com structure (theme 1.9.2): the shared sections
 * (sections.css) in Blueprint's look. The datasheet: white paper, visible
 * rules and a faint drawing grid, Manrope 700, numbered monospace labels,
 * square corners, no shadows, #0361A7 for action.
 * ========================================================== */
.shelly-design-b.vs-home {
	--v-bg: #FDFDFD; --v-text: #121519; --v-w-title: 700;
	--v-r-xs: 0; --v-r-sm: 0; --v-r: 0; --v-r-lg: 0; --v-r-pill: 0;
	--s-blue: #0361A7; --s-mid: #0361A7; --s-deep: #003C82; --s-well: #F2F5F8; --s-chip: #FDFDFD;
	--s-grad: linear-gradient(90deg, #0361A7 0%, #0361A7 100%);
	--s-navy: #121519;
}
.shelly-design-b.vs-home main { counter-reset: vbs; }
/* Labels: mono, numbered like a drawing set */
.shelly-design-b.vs-home .vs-eyebrow { font: 500 11px/1.4 var(--b-mono); letter-spacing: 0.08em; color: #656669; }
.shelly-design-b.vs-home .vs-eyebrow::before { counter-increment: vbs; content: counter(vbs, decimal-leading-zero) " / "; color: #0361A7; font-weight: 700; }
.shelly-design-b.vs-home .vs-h2 { font-weight: 700; letter-spacing: -0.02em; }
.shelly-design-b.vs-home .vs-statement { font-weight: 700; letter-spacing: -0.03em; }
.shelly-design-b.vs-home .vs-grad { background: none; color: #0361A7; -webkit-text-fill-color: #0361A7; }
/* Each band opens with a ruled line across the page */
.shelly-design-b.vs-home :is(.vs-products, .vs-why, .sc-app, .vs-solutions, .sc-journey, .vs-compat) > .vs-wrap,
.shelly-design-b.vs-home .sc-app__inner { border-top: 1px solid #121519; padding-top: 28px; }
/* Buttons: square, solid */
.shelly-design-b.vs-home :is(.vs-btn, .sc-slide__btn, .sc-app .vs-btn) { border-radius: 0 !important; background: #0361A7 !important; font: 700 15px/1 'Manrope', sans-serif !important; min-height: 50px; padding: 0 26px; box-shadow: none !important; }
.shelly-design-b.vs-home :is(.vs-btn, .sc-slide__btn):hover { background: #003C82 !important; filter: none; }
.shelly-design-b.vs-home .vs-btn.vs-btn--outline { background: transparent !important; color: #121519 !important; border: 1px solid #121519 !important; }
.shelly-design-b.vs-home .vs-btn.vs-btn--outline:hover { background: #121519 !important; color: #FDFDFD !important; }
.shelly-design-b.vs-home .sc-slide__btn.sc-slide__btn--ghost { background: transparent !important; border: 1px solid #FDFDFD !important; }
.shelly-design-b.vs-home .vs-round { border-color: #121519; color: #121519; }
/* Hero: square tabs with mono labels */
.shelly-design-b.vs-home .sc-slide__title { font-weight: 700 !important; letter-spacing: -0.02em; }
.shelly-design-b.vs-home .sc-slide__eyebrow { font-family: var(--b-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; color: #FDFDFD; }
.shelly-design-b.vs-home .sc-slider__arrow { border-radius: 0; }
.shelly-design-b.vs-home .sc-slider__dot { border-radius: 0 !important; font-family: var(--b-mono) !important; font-weight: 500 !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.06em; }
/* Stat tiles: a ruled spec table */
.shelly-design-b.vs-home .vs-metrics__grid { gap: 0; border: 1px solid #121519; }
.shelly-design-b.vs-home .vs-metrics__tile { background: #FDFDFD; border-right: 1px solid rgba(18, 21, 25, 0.14); }
.shelly-design-b.vs-home .vs-metrics__value, .shelly-design-b.vs-home .vs-metrics__unit { color: #121519; font-weight: 700; }
.shelly-design-b.vs-home .vs-metrics__label { font: 500 11px/1.4 var(--b-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #656669; }
.shelly-design-b.vs-home .vs-metrics__tile--link { background: #0361A7; color: #FDFDFD; border-right: 0; }
/* Products: datasheet cells */
.shelly-design-b.vs-home .vs-pill { font: 500 11px/1.5 var(--b-mono); letter-spacing: 0.06em; text-transform: uppercase; border-color: rgba(18, 21, 25, 0.24); }
.shelly-design-b.vs-home .vs-pill.is-active { background: #121519; color: #FDFDFD; border-color: #121519; }
.shelly-design-b.vs-home .vs-rail { gap: 0; border-left: 1px solid rgba(18, 21, 25, 0.14); }
.shelly-design-b.vs-home .vs-card { padding: 16px; border: 1px solid rgba(18, 21, 25, 0.14); border-left: 0; }
.shelly-design-b.vs-home .vs-card__media { background: var(--b-grid), #F2F5F8; background-size: 16px 16px, auto; }
.shelly-design-b.vs-home .vs-card__badge { border-radius: 0; font-family: var(--b-mono); text-transform: uppercase; font-size: 10px; }
.shelly-design-b.vs-home .vs-card__price { font-family: var(--b-mono); font-weight: 700; color: #0361A7; }
.shelly-design-b.vs-home .vs-card__pills li { background: transparent; border: 1px solid rgba(18, 21, 25, 0.2); color: #121519; font: 500 11px/1.4 var(--b-mono); }
/* Film and why: on the drawing grid */
.shelly-design-b.vs-home .vs-why { background: var(--b-grid), #FDFDFD; background-size: 24px 24px, auto; }
.shelly-design-b.vs-home .sc-video { background: var(--b-grid), #FDFDFD; background-size: 24px 24px, auto; }
.shelly-design-b.vs-home .sc-video__frame { border-radius: 0; outline: 1px solid #121519; outline-offset: 8px; }
/* App + features */
.shelly-design-b.vs-home .sc-app__title { font-weight: 700; }
.shelly-design-b.vs-home .sc-app .vs-grad { color: #0361A7; }
.shelly-design-b.vs-home .sc-features { background: #F9F9F9; border-top: 1px solid #121519; border-bottom: 1px solid #121519; }
.shelly-design-b.vs-home .sc-features__grid { gap: 0; }
.shelly-design-b.vs-home .sc-feature { padding: 4px 24px; border-left: 1px solid rgba(18, 21, 25, 0.14); }
.shelly-design-b.vs-home .sc-feature:first-child { border-left: 0; padding-left: 0; }
.shelly-design-b.vs-home .sc-feature h3 { font-weight: 700; }
/* Solutions: ink band on a light grid */
.shelly-design-b.vs-home .vs-solutions { background: linear-gradient(rgba(253, 253, 253, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(253, 253, 253, 0.05) 1px, transparent 1px), #121519; background-size: 24px 24px, 24px 24px, auto; }
.shelly-design-b.vs-home .vs-solutions > .vs-wrap { border-top-color: rgba(253, 253, 253, 0.4); }
.shelly-design-b.vs-home .vs-solutions .vs-eyebrow { color: rgba(253, 253, 253, 0.6); }
.shelly-design-b.vs-home .vs-solutions__row { gap: 1px; }
/* Journey + compatibility */
.shelly-design-b.vs-home .sc-journey__card { border-radius: 0; }
.shelly-design-b.vs-home .sc-journey__arrow { border-radius: 0; }
.shelly-design-b.vs-home .vs-compat__tiles li { border-radius: 0; border: 1px solid #121519; }
.shelly-design-b.vs-home .vs-compat__mark { border-radius: 0; background: #0361A7; }
@media (max-width: 989px) {
	.shelly-design-b.vs-home .sc-feature { border-left: 0; padding-left: 0; }
	.shelly-design-b.vs-home .vs-metrics__tile { border-bottom: 1px solid rgba(18, 21, 25, 0.14); }
}