(confirmed via a live curl of this exact page - the generic page.tpl's "card card-block" classes seen in the theme's own template file are NOT what actually ends up on a CMS page; cms/page.tpl overrides the block with a different class list). The visible border/padding come from custom.css's "#main .tv-sub-pages-inner-content{border:1px solid rgba(0,0,0,.07);padding:30px}" - an ID+class selector (specificity 1,1,0). Never overridden by editing the theme (forbidden), but safe to reset here since this file loads only on this one page (isCalculatorPage() gate). This is the CSS-side counterpart to hookOverrideLayoutTemplate() (§11.22), which already removes the theme's left/right columns on this same page for the same reason: more width for the calculator, a cleaner edge-to-edge layout on mobile. Matching specificity via #content's own "tv-sub-pages-inner-content" class (also 1,1,0) plus !important, rather than relying on stylesheet load order to win a specificity tie - the same narrow, documented !important usage already applied elsewhere in this file to reliably beat the theme's own generic rules (e.g. the ul/li overrides from §11.23). overflow: the theme's actually carries id="cms" on this page (confirmed via live curl - it's a body-level id/class set by the CMS controller, not visible in the theme's own template source), and custom.css separately has "#cms .tv-sub-pages-inner-content{overflow:hidden}" - which lands on this exact #content element too. overflow:hidden on ANY ancestor is a well-known way to break position:sticky entirely for every descendant (the classic CSS gotcha), which is exactly why .ge-ipc-summary's sticky sidebar (§11.24) never actually stuck during scroll despite its own CSS being correct - reset back to visible here for the same reason/scope as border/padding above. */ #content.tv-sub-pages-inner-content { border: none !important; padding: 0 !important; overflow: visible !important; } .ge-ipc-root { --ge-ipc-gap: 16px; --ge-ipc-radius: 10px; --ge-ipc-border: #dcdfe3; --ge-ipc-text: #1c1f24; --ge-ipc-muted: #6b7280; --ge-ipc-primary: #1c8a4c; --ge-ipc-primary-dark: #156e3d; --ge-ipc-primary-contrast: #ffffff; --ge-ipc-danger: #c0392b; --ge-ipc-bg-subtle: #f6f7f8; --ge-ipc-sticky-top: 20px; /* Step 1 "hero" palette (§11.23 of CLAUDE.md) - deliberately its own set of tokens, matching the approved reference design exactly, rather than reusing --ge-ipc-primary above: that variable is shared by Steps 2-4, which are not part of this redesign and must keep their current look untouched. */ --ge-ipc-hero-green: #1e9e33; --ge-ipc-hero-green-dark: #188029; --ge-ipc-hero-green-pale: #e8f3ea; --ge-ipc-hero-ink: #1a1a1a; --ge-ipc-hero-gray: #555555; --ge-ipc-hero-line: #e4e6e4; --ge-ipc-hero-radius: 14px; box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 24px 16px 48px; font-family: inherit; color: var(--ge-ipc-text); font-size: 16px; line-height: 1.5; } /* Step 2 (§11.24, revised for 100%-fidelity) has its own, wider reference container (1432px) than Step 1's (1180px, §11.23) - the two mockups were authored as separate standalone pages with different widths, and each step keeps the exact width its own reference specifies rather than forcing one shared value. Scoped with :has() (already used elsewhere in this file, e.g. .ge-ipc-group-card:has(...)) so Steps 1/3/4 are never affected - only active while Step 2's panel is the visible one. */ .ge-ipc-root:has(> [data-ge-ipc-step="2"].ge-ipc-step--active) { max-width: 1432px; padding-top: 40px; padding-bottom: 64px; } /* Step 4 (§request 2026-08-10, 100%-copy of the user's own reference) also specifies a 1432px container - same width as step 2's own reference, different reference file, kept as its own rule rather than merged with the selector above so each step's width stays traceable to its own mockup. */ .ge-ipc-root:has(> [data-ge-ipc-step="4"].ge-ipc-step--active) { max-width: 1432px; padding-top: 40px; padding-bottom: 64px; } .ge-ipc-root *, .ge-ipc-root *::before, .ge-ipc-root *::after { box-sizing: border-box; } .ge-ipc-root [hidden] { display: none !important; } .ge-ipc-root img { max-width: 100%; height: auto; display: block; } /* Visible, non-removed focus states everywhere inside the module (§10, §27) */ .ge-ipc-root a:focus-visible, .ge-ipc-root button:focus-visible, .ge-ipc-root input:focus-visible, .ge-ipc-root select:focus-visible, .ge-ipc-root [tabindex]:focus-visible { outline: 3px solid #1c8a4c; outline-offset: 2px; } /* ---------- Step label + stepper (100% copy of the approved reference, §11.23) ---------- */ .ge-ipc-step-label { text-align: center; font-size: 1rem; color: var(--ge-ipc-hero-gray); margin: 0 0 18px; } /* Back button shares this row with the stepper (moved here from its previous spot above each step-2 group panel - the reference design always kept it "at stepper level" via absolute positioning; grid keeps that same visual relationship while staying safe for our shared, multi-step header, unlike absolute positioning would be). Two empty 1fr columns flank the auto-sized stepper so it stays perfectly centered regardless of whether/how wide the back button is - the back button's own column simply goes unused space when the button is hidden (step 1). */ .ge-ipc-stepper-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0 0 32px; } /* Reference's own .backbtn is position:absolute against .wrap (left:0;top:34px), floating beside its own step-label/stepper - same visual relationship as here, just via grid placement instead of absolute coordinates (safe regardless of which of the 4 steps is showing, since this row is shared across all of them). Hidden on step 1 (nothing to go back to); shown/hidden and re-targeted by front.js. */ .ge-ipc-backbtn { grid-column: 1; justify-self: start; appearance: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px 0 12px; border: 1px solid var(--ge-ipc-hero-line); border-radius: 21px; background: #fff; font-size: 15px; font-weight: 700; color: var(--ge-ipc-hero-gray); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, color 0.15s; } .ge-ipc-backbtn:hover { border-color: var(--ge-ipc-hero-green); box-shadow: 0 2px 10px rgba(30, 158, 51, 0.15); color: var(--ge-ipc-hero-green); } .ge-ipc-backbtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* !important on margin/padding: the theme's own ".cms-description ol, .cms-description ul" rule (class+element, specificity 0,1,1) outranks a plain ".ge-ipc-stepper" class selector (0,1,0) on this page, adding an unwanted margin-bottom under the stepper - same class of theme leak, same fix already used above for .ge-ipc-group-card__feats. */ .ge-ipc-stepper { grid-column: 2; display: flex; align-items: center; justify-content: center; list-style: none !important; margin: 0 !important; padding: 0 !important; } /* !important: the theme's ".cms-description ol li, .cms-description ul li" (specificity 0,1,2) also carries its own padding-bottom/font-size/line-height/color, which would otherwise outrank this plain class and add unwanted space under the stepper - same leak, same fix as .ge-ipc-stepper above. */ .ge-ipc-stepper__item { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; } .ge-ipc-stepper__index { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 17px; font-size: 0.9rem; font-weight: 700; border: 2px solid var(--ge-ipc-hero-line); color: #9aa09a; background: #fff; flex: none; cursor: pointer; } .ge-ipc-stepper__index:disabled { cursor: not-allowed; } .ge-ipc-stepper__item--active .ge-ipc-stepper__index { background: var(--ge-ipc-hero-green); border-color: var(--ge-ipc-hero-green); color: #fff; } .ge-ipc-stepper__bar { width: 98px; height: 2px; background: var(--ge-ipc-hero-line); } .ge-ipc-stepper__item--active .ge-ipc-stepper__bar { background: var(--ge-ipc-hero-green); } /* ---------- Titles / shared ---------- */ .ge-ipc-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 16px; } .ge-ipc-title--small { font-size: 1.1rem; margin-bottom: 12px; } .ge-ipc-field-error { color: var(--ge-ipc-danger); font-size: 0.85rem; margin: 8px 0 0; } /* ---------- Buttons ---------- */ .ge-ipc-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .ge-ipc-btn { appearance: none; border: 1px solid var(--ge-ipc-border); background: #fff; color: var(--ge-ipc-text); border-radius: var(--ge-ipc-radius); padding: 12px 22px; font-size: 1rem; font-weight: 600; cursor: pointer; min-height: 44px; line-height: 1.2; } .ge-ipc-btn:hover { background: var(--ge-ipc-bg-subtle); } .ge-ipc-btn--primary { background: var(--ge-ipc-primary); border-color: var(--ge-ipc-primary); color: var(--ge-ipc-primary-contrast); } .ge-ipc-btn--primary:hover { filter: brightness(0.95); } .ge-ipc-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Step 1: hero title + group cards (100% copy of the approved reference design, §11.23 of CLAUDE.md - literal colors/spacing from that design, not the --ge-ipc-primary tokens Steps 2-4 use) ---------- */ .ge-ipc-hero-title { text-align: center; font-size: 3.25rem; font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; margin: 0 0 18px; color: var(--ge-ipc-hero-ink); } .ge-ipc-hero-sub { text-align: center; font-size: 1.2rem; color: var(--ge-ipc-hero-gray); margin: 0; margin-bottom: 30px !important; } .ge-ipc-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 24px; } .ge-ipc-group-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ge-ipc-hero-line); border-radius: var(--ge-ipc-hero-radius); background: #fff; padding: 28px 28px 26px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .ge-ipc-group-card:hover { border-color: var(--ge-ipc-hero-green); box-shadow: 0 8px 28px rgba(30, 158, 51, 0.12); transform: translateY(-3px); } .ge-ipc-group-card__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ge-ipc-group-card:has(.ge-ipc-group-card__input:checked), .ge-ipc-group-card--selected { border-color: var(--ge-ipc-hero-green); box-shadow: 0 0 0 2px var(--ge-ipc-hero-green), 0 8px 28px rgba(30, 158, 51, 0.12); } .ge-ipc-group-card--disabled { cursor: not-allowed; opacity: 0.55; } .ge-ipc-group-card--disabled:hover { border-color: var(--ge-ipc-hero-line); box-shadow: none; transform: none; } /* The radio input itself is visually hidden (see .ge-ipc-group-card__input below) to match the reference design exactly (no visible circle widget) - keyboard focus must still be visible somewhere, so it's redirected onto the card itself. */ .ge-ipc-group-card:has(.ge-ipc-group-card__input:focus-visible) { outline: 3px solid var(--ge-ipc-hero-green); outline-offset: 2px; } .ge-ipc-group-card__visual { position: relative; height: 210px; margin-bottom: 22px; } .ge-ipc-group-card__blob { position: absolute; left: 34px; top: 8px; width: 194px; height: 194px; border-radius: 50%; background: var(--ge-ipc-hero-green-pale); } /* width/height (not max-width/max-height) + !important: the earlier, more general `.ge-ipc-root img { max-width:100%; height:auto }` rule above has HIGHER specificity than this one (class+tag compound selector beats a single class), so it was silently winning and stretching this image to the visual container's full width instead of the 230x230 box the reference design specifies (`style="width:230px;height:230px; object-fit:contain"` in the reference's own tag). */ .ge-ipc-group-card__image { position: relative; display: block; width: 230px !important; height: 230px !important; margin: 6px auto 0; object-fit: contain; } .ge-ipc-group-card__badge { position: absolute; left: 13px; top: 13px; width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--ge-ipc-hero-green); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ge-ipc-group-card__badge img { width: 50px; height: 50px; object-fit: contain; } .ge-ipc-group-card__name { text-align: center; font-size: 1.75rem; font-weight: 700; line-height: 1.2; min-height: 74px; display: flex; align-items: center; justify-content: center; color: var(--ge-ipc-hero-ink); } .ge-ipc-group-card__rule { width: 56px; height: 3px; background: var(--ge-ipc-hero-green); border-radius: 2px; margin: 0 auto 22px; } /* margin-top:auto (not flex:1) pushes this block to the bottom of the card's flex column WITHOUT stretching the block itself taller than its own content - flex:1 on .feats directly (the previous approach) let the

(flex-column's default justify-content:flex-start keeps items at the top of a stretched box). §request 2026-09-18: the "go" chevron that used to sit absolutely-positioned in this wrap's bottom-right corner is gone, so the two properties that existed only to serve it (position:relative as its containing block, padding-right:34px reserving its gutter) and the align-self:flex-start that kept this box unstretched for its anchoring are all dropped - the list now spans the card's full inner width like .name/.rule above it. */ .ge-ipc-group-card__feats-wrap { margin-top: auto; } /* !important below: the active theme's own stylesheets carry many bare/ancestor-qualified `ul`/`li` rules (confirmed in themes/v1_elechouse_112/assets/css/*.css) that can outrank these plain class selectors on specificity depending on their own ancestor chain - these properties are pinned so this module's list styling never depends on winning that race. */ .ge-ipc-group-card__feats { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; } .ge-ipc-group-card__feats li { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; padding-bottom: 0 !important; font-size: 1.05rem; color: var(--ge-ipc-hero-ink); } .ge-ipc-group-card__feat-text { line-height: 20px !important; } .ge-ipc-group-card__check { width: 22px; height: 22px; border-radius: 50%; background: var(--ge-ipc-hero-green); flex: none; display: flex; align-items: center; justify-content: center; } .ge-ipc-group-card__check svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-group-card__unavailable-notice { text-align: center; color: var(--ge-ipc-hero-gray); font-size: 0.9rem; margin: 0 0 16px; } /* ---------- Step 2 layout (§11.24, revised for 100%-fidelity - .ge-ipc-layout and everything under it is exclusively used by step2-devices.tpl, never Steps 1/3/4, so every pixel value below can safely match the reference exactly) ---------- */ .ge-ipc-layout { display: grid; grid-template-columns: 1fr 350px; gap: 28px; align-items: start; } .ge-ipc-devices-column { min-width: 0; border: 1px solid var(--ge-ipc-border); border-radius: 12px; background: #fff; padding: 26px; } .ge-ipc-devices-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .ge-ipc-devices-header .ge-ipc-title { margin-bottom: 0; font-size: 19px; font-weight: 700; } /* Reference's .reset is a borderless, background-less text+icon control (not a "real" button with chrome) - confirmed by reading the reference CSS directly (".reset{border:none;background:none;...padding:4px}"), a real mismatch against the bordered/filled button this used to be styled as. */ .ge-ipc-reset-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: var(--ge-ipc-muted); padding: 4px; font-size: 14px; font-weight: 400; cursor: pointer; white-space: nowrap; } .ge-ipc-reset-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-reset-btn:hover { color: #b3261e; } /* ---------- Device search (§11.24 - icon + clear button, always shown) ---------- */ .ge-ipc-device-search { position: relative; margin-bottom: 12px; } .ge-ipc-device-search__icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--ge-ipc-muted); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; } .ge-ipc-device-search .ge-ipc-input { height: 42px; min-height: 42px; border-radius: 10px; padding-left: 40px; padding-right: 36px; font-size: 15px; } .ge-ipc-device-search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: none; background: none; font-size: 16px; color: var(--ge-ipc-muted); cursor: pointer; } .ge-ipc-device-search__clear:hover { color: var(--ge-ipc-text); } .ge-ipc-device-search__empty { text-align: center; color: var(--ge-ipc-muted); font-size: 0.9rem; margin: 0 0 16px; padding: 16px 0; } .ge-ipc-device-search__reset-btn { appearance: none; margin-top: 8px; border: 1px solid var(--ge-ipc-primary); color: var(--ge-ipc-primary); background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .ge-ipc-device-search__reset-btn:hover { background: var(--ge-ipc-bg-subtle); } /* ---------- Category filter pills (§11.24, new) ---------- */ .ge-ipc-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; transition: opacity 0.15s; } .ge-ipc-cats--dimmed { opacity: 0.55; } .ge-ipc-cat-btn { appearance: none; white-space: nowrap; border: 1px solid var(--ge-ipc-border); background: #fff; border-radius: 20px; padding: 8px 15px; font-size: 14px; color: var(--ge-ipc-text); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .ge-ipc-cat-btn:hover { border-color: var(--ge-ipc-primary); color: var(--ge-ipc-primary); } /* Hovering an already-active pill must stay readable (white text on green) and give its own feedback (a darker green), not fall back to the default hover rule above, which would otherwise put green text on a green background. */ .ge-ipc-cat-btn--active:hover { background: var(--ge-ipc-primary-dark); border-color: var(--ge-ipc-primary-dark); color: var(--ge-ipc-primary-contrast); } .ge-ipc-cat-btn--active { background: var(--ge-ipc-primary); border-color: var(--ge-ipc-primary); color: var(--ge-ipc-primary-contrast); font-weight: 700; } .ge-ipc-cat-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ge-ipc-primary); color: #fff; font-size: 11px; font-weight: 700; margin-left: 6px; padding: 0 5px; } .ge-ipc-cat-btn--active .ge-ipc-cat-count { background: #fff; color: var(--ge-ipc-primary); } /* ---------- Device category accordion, mobile-only (§request 2026-08-11, 100%-copy of the user's own reference "Krok 2A - Standalone mobile.html"). Hidden by default (not the `hidden` attribute - that's forced !important everywhere in this file, see the global `.ge-ipc-root [hidden]` rule near the top - a plain class lets the @media(max-width:480px) block below switch it on instead), built entirely from the already-rendered .ge-ipc-cats pills by front.js (see buildDeviceAccordion()), so category order/labels/ids are defined in exactly one place. ---------- */ .ge-ipc-device-accordion { display: none; } .ge-ipc-acc-sec { margin-top: 10px; } .ge-ipc-acc-sec:first-child { margin-top: 0; } .ge-ipc-acc-head { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--ge-ipc-border); background: #fff; color: var(--ge-ipc-text); border-radius: 24px; padding: 13px 16px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } /* Deliberately its OWN rule, not combined with --force below: only an actually OPEN section gets the filled-green header - a section whose panel is merely force-shown by an active search must keep its normal (closed-looking) header. */ .ge-ipc-acc-sec--open > .ge-ipc-acc-head { background: var(--ge-ipc-primary); border-color: var(--ge-ipc-primary); color: var(--ge-ipc-primary-contrast); } .ge-ipc-acc-head__label { display: inline-flex; align-items: center; } .ge-ipc-acc-head svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; flex: none; } .ge-ipc-acc-sec--open > .ge-ipc-acc-head svg { transform: rotate(180deg); } .ge-ipc-acc-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ge-ipc-primary); color: #fff; font-size: 11px; font-weight: 700; margin-left: 8px; padding: 0 5px; } .ge-ipc-acc-sec--open > .ge-ipc-acc-head .ge-ipc-acc-cnt { background: #fff; color: var(--ge-ipc-primary); } /* Expand/collapse transition (§request 2026-08-11): max-height (not display:none) so the open/close can animate; the actual pixel target is set by front.js via syncAccPanelHeight() (panel.scrollHeight), since a fixed guess would either clip a long device list or make a short one "snap" open almost instantly - see that function's comment. overflow:hidden clips the 0-height collapsed state, padding stays unconditional (also clipped to 0 by max-height while collapsed). */ .ge-ipc-acc-panel { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px 0 4px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; } /* Panel VISIBILITY (open OR force) is intentionally a separate rule from the header coloring above - a --force-only section shows its panel without turning green. */ .ge-ipc-acc-sec--open > .ge-ipc-acc-panel, .ge-ipc-acc-sec--force > .ge-ipc-acc-panel { opacity: 1; } .ge-ipc-devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } /* ---------- Device card (§11.24 - 100% reference layout: tick + icon/pic + name + qty, then full-width power field and time field rows) ---------- */ .ge-ipc-device-card { position: relative; display: grid; grid-template-columns: 102px 1fr 1fr; gap: 7px; border: 1px solid var(--ge-ipc-border); border-radius: 12px; padding: 11px 12px; background: #fff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .ge-ipc-device-card--active { border-color: var(--ge-ipc-primary); } .ge-ipc-device-card__tick { position: absolute; left: 9px; top: 9px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ge-ipc-border); background: #fff; display: flex; align-items: center; justify-content: center; } .ge-ipc-device-card--active .ge-ipc-device-card__tick { background: var(--ge-ipc-primary); border-color: var(--ge-ipc-primary); } .ge-ipc-device-card__tick svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .ge-ipc-device-card--active .ge-ipc-device-card__tick svg { opacity: 1; } .ge-ipc-device-card__pic { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; } .ge-ipc-device-card__pic svg { width: 54px; height: 54px; stroke: var(--ge-ipc-hero-ink); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-device-card__image { width: 54px; height: 54px; object-fit: contain; border-radius: 6px; background: var(--ge-ipc-bg-subtle); } .ge-ipc-device-card__name { grid-column: 2 / -1; font-size: 14px; font-weight: 700; line-height: 1.2; align-self: end; padding-bottom: 2px; } .ge-ipc-device-card__qty { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--ge-ipc-border); border-radius: 8px; height: 30px; padding: 0 2px; } .ge-ipc-qty-btn { appearance: none; border: none; background: none; width: 24px; height: 24px; font-size: 16px; line-height: 1; cursor: pointer; color: var(--ge-ipc-text); } .ge-ipc-qty-btn:hover:not(:disabled) { color: var(--ge-ipc-primary); } .ge-ipc-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; } .ge-ipc-qty-input { width: 50px; height: 24px; text-align: center; border: none; background: none; font-size: 14px; font-weight: 700; padding: 0; } /* ---------- Power field + custom-value entry (§11.24, new) ---------- */ .ge-ipc-power-field, .ge-ipc-time-field { grid-column: 1 / -1; display: grid; grid-template-columns: 102px 1fr 1fr; align-items: center; gap: 7px; } .ge-ipc-field-label { color: var(--ge-ipc-muted); font-size: 12px; } .ge-ipc-select, .ge-ipc-input { border: 1px solid var(--ge-ipc-border); border-radius: 8px; padding: 6px 10px; font-size: 14px; font-weight: 700; min-height: 30px; width: 100%; background: #fff; color: var(--ge-ipc-text); } .ge-ipc-power-field .ge-ipc-select { grid-column: 2 / -1; height: 30px; } .ge-ipc-select:disabled, .ge-ipc-input:disabled { background: var(--ge-ipc-bg-subtle); color: var(--ge-ipc-muted); opacity: 0.6; } .ge-ipc-power-edit { grid-column: 2 / -1; display: flex; gap: 6px; align-items: center; } .ge-ipc-power-edit__input { width: 0; flex: 1; height: 30px; border: 1px solid var(--ge-ipc-border); border-radius: 8px; font-size: 14px; font-weight: 700; padding: 0 10px; color: var(--ge-ipc-text); } .ge-ipc-power-edit__ok, .ge-ipc-power-edit__cancel { flex: none; width: 30px; height: 30px; border: none; border-radius: 8px; cursor: pointer; } .ge-ipc-power-edit__ok { background: var(--ge-ipc-primary); display: flex; align-items: center; justify-content: center; } .ge-ipc-power-edit__ok:hover { background: var(--ge-ipc-hero-green-dark); } .ge-ipc-power-edit__ok svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-power-edit__cancel { background: none; font-size: 18px; color: var(--ge-ipc-muted); } .ge-ipc-power-edit__cancel:hover { color: var(--ge-ipc-text); } /* ---------- Runtime stepper (§11.24, replaces the old preset-button row) ---------- */ .ge-ipc-time-stepper { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--ge-ipc-border); border-radius: 8px; height: 30px; padding: 0 2px; font-size: 14px; font-weight: 700; min-width: 0; } .ge-ipc-time-stepper button { width: 24px; height: 24px; border: none; background: none; font-size: 16px; cursor: pointer; color: var(--ge-ipc-text); } .ge-ipc-time-stepper button:hover:not(:disabled) { color: var(--ge-ipc-primary); } .ge-ipc-time-stepper button:disabled { opacity: 0.4; cursor: not-allowed; } .ge-ipc-time-value { flex: 1; text-align: center; } /* Reference dims ALL of .ctrl/.pw/.tm to the same opacity (.45) when the card is not selected - the quantity +/- block was missing from this rule entirely (it only looked inert because its buttons were JS-disabled, with no visual cue to match), a real, confirmed gap. */ .ge-ipc-device-card:not(.ge-ipc-device-card--active) .ge-ipc-device-card__qty, .ge-ipc-device-card:not(.ge-ipc-device-card--active) .ge-ipc-power-field, .ge-ipc-device-card:not(.ge-ipc-device-card--active) .ge-ipc-time-field { opacity: 0.45; pointer-events: none; } /* Subtotal (left) and Remove (right) share one row instead of stacking on two - a shorter card, requested by the user (2026-08-08). Kept as a flex row rather than trying to make two separate grid items share a row (fragile with CSS Grid's auto-placement) - both texts are short in every supported language (max ~9 chars for "Remove"'s translation), so this comfortably fits even at the narrowest single-column card width. */ .ge-ipc-device-card__footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 1.1em; } .ge-ipc-device-card__subtotal { font-size: 0.8rem; color: var(--ge-ipc-muted); } .ge-ipc-device-card__remove { flex: none; appearance: none; border: none; background: none; color: var(--ge-ipc-danger); font-size: 0.8rem; cursor: pointer; padding: 4px 0; text-decoration: underline; white-space: nowrap; } /* ---------- Use-case chips (§11.24 - optional multi-select, replaces the old required single-select purpose radio cards) ---------- */ .ge-ipc-usecase { margin: 24px 0 0; } .ge-ipc-usecase .ge-ipc-title--small { margin-bottom: 14px; } .ge-ipc-chips { display: flex; gap: 12px; flex-wrap: wrap; } .ge-ipc-chip { appearance: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ge-ipc-border); border-radius: 22px; padding: 10px 20px; font-size: 15px; background: #fff; cursor: pointer; color: var(--ge-ipc-text); transition: border-color 0.15s, color 0.15s; } .ge-ipc-chip:hover { border-color: var(--ge-ipc-primary); } .ge-ipc-chip--selected { border-color: var(--ge-ipc-primary); color: var(--ge-ipc-primary); font-weight: 700; } .ge-ipc-chip__check { display: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ge-ipc-primary); align-items: center; justify-content: center; } .ge-ipc-chip--selected .ge-ipc-chip__check { display: inline-flex; } .ge-ipc-chip__check svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Sticky summary (§11.24 - 100% reference layout: label/name/photo, stat rows, info tooltip, prominent "Next" button + hint) ---------- */ .ge-ipc-summary { position: sticky; top: var(--ge-ipc-sticky-top); border: 1px solid var(--ge-ipc-border); border-radius: var(--ge-ipc-hero-radius); padding: 24px; background: #fff; text-align: center; } .ge-ipc-summary__label { font-size: 14px; color: var(--ge-ipc-muted); margin: 0 0 4px; } .ge-ipc-summary__name { font-size: 22px; font-weight: 700; margin: 0 0 10px; } .ge-ipc-summary__pic { position: relative; height: 210px; display: flex; align-items: center; justify-content: center; margin: 0 0 10px; } .ge-ipc-summary__pic img { width: 210px; height: 210px; object-fit: contain; } .ge-ipc-summary__stat { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--ge-ipc-border); text-align: left; } .ge-ipc-summary__stat-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--ge-ipc-hero-green-pale); flex: none; display: flex; align-items: center; justify-content: center; } .ge-ipc-summary__stat-icon svg { width: 20px; height: 20px; stroke: var(--ge-ipc-primary); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-summary__stat-text { flex: 1; min-width: 0; } .ge-ipc-summary__stat-label { font-size: 0.78rem; color: var(--ge-ipc-muted); } .ge-ipc-summary__stat-value { font-size: 18px; font-weight: 700; } .ge-ipc-summary__stat-value--green { color: var(--ge-ipc-primary); line-height: 1.35; font-size: 0.95rem; } .ge-ipc-summary__stat--optional { align-items: flex-start; } .ge-ipc-info { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ge-ipc-border); color: var(--ge-ipc-muted); font-size: 0.7rem; display: flex; align-items: center; justify-content: center; flex: none; cursor: help; } .ge-ipc-info:hover { border-color: var(--ge-ipc-primary); color: var(--ge-ipc-primary); } .ge-ipc-info::after { content: attr(data-tip); position: absolute; right: -6px; bottom: 130%; width: 220px; background: #2a2d2a; color: #fff; font-size: 0.78rem; line-height: 1.45; text-align: left; padding: 10px 12px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 5; } .ge-ipc-info::before { content: ''; position: absolute; right: 1px; bottom: calc(130% - 5px); border: 6px solid transparent; border-top-color: #2a2d2a; border-bottom: none; opacity: 0; transition: opacity 0.15s; } .ge-ipc-info:hover::after, .ge-ipc-info:hover::before, .ge-ipc-info--show::after, .ge-ipc-info--show::before { opacity: 1; } .ge-ipc-weiter-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--ge-ipc-primary); color: var(--ge-ipc-primary-contrast); border: none; border-radius: 8px; font-size: 19px; font-weight: 700; padding: 16px 0; cursor: pointer; margin-top: 14px; transition: background 0.15s; } .ge-ipc-weiter-btn:hover:not(:disabled) { background: var(--ge-ipc-hero-green-dark); } .ge-ipc-weiter-btn:disabled { background: #c9cdc9; cursor: not-allowed; } .ge-ipc-weiter-btn svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-summary__hint { display: none; font-size: 0.78rem; color: var(--ge-ipc-muted); text-align: center; margin: 8px 0 0; } .ge-ipc-weiter-btn:disabled ~ .ge-ipc-summary__hint { display: block; } /* ---------- Mobile bottom bar + sheet (§11.24, new - duplicates the sticky sidebar for narrow viewports; hidden above the 768px breakpoint where the sidebar itself is sticky) ---------- */ /* z-index is deliberately very high (not just "above our own stuff") - the ge_generatorretellchat module injects a third-party chat widget (Retell's own script, sitewide, not gated to this page) that renders bottom-right with its own z-index we don't control and can't inspect from here (external script/possible shadow DOM). On mobile it was swallowing taps meant for this button even though it's positioned bottom-LEFT and the two shouldn't visually overlap - Retell's own interactive hit area is apparently wider than its visible bubble. Since both are position:fixed, they compete in the same top-level stacking context regardless of DOM order, so outranking whatever z-index Retell uses is the only reliable fix available from our side without touching that other module (§request 2026-08-10). .ge-ipc-sheet-backdrop/.ge-ipc-sheet below get the same treatment, same reason. */ .ge-ipc-mobile-bar { display: none; position: fixed; left: 16px; bottom: 14px; z-index: 2147483000; } .ge-ipc-mobile-bar--visible { display: block; } .ge-ipc-mobile-bar__btn { display: flex; align-items: center; gap: 10px; background: var(--ge-ipc-primary); color: var(--ge-ipc-primary-contrast); border: none; border-radius: 999px; padding: 14px 20px; font-size: 0.95rem; font-weight: 700; box-shadow: 0 6px 24px rgba(30, 158, 51, 0.4); cursor: pointer; } .ge-ipc-mobile-bar__btn:active { background: var(--ge-ipc-hero-green-dark); } .ge-ipc-mobile-bar__btn svg { width: 20px; height: 20px; flex: none; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(20, 25, 20, 0.42); z-index: 2147483003; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .ge-ipc-sheet-backdrop--show { opacity: 1; pointer-events: auto; } .ge-ipc-sheet { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483005; background: #fff; border-radius: var(--ge-ipc-hero-radius) var(--ge-ipc-hero-radius) 0 0; box-shadow: 0 -10px 44px rgba(0, 0, 0, 0.2); padding: 6px 20px 20px; max-height: 88vh; overflow: auto; text-align: center; transform: translateY(105%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.33, 1); } .ge-ipc-sheet--open { transform: none; } .ge-ipc-sheet__grabber { display: block; width: 44px; height: 4px; border-radius: 2px; background: #dfe3df; margin: 8px auto 10px; } .ge-ipc-sheet__close { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border: none; background: var(--ge-ipc-bg-subtle); border-radius: 50%; font-size: 16px; line-height: 1; color: var(--ge-ipc-muted); cursor: pointer; } .ge-ipc-sheet__pic { display: flex; justify-content: center; margin: 6px 0 2px; } .ge-ipc-sheet__pic img { width: 140px; height: 140px; object-fit: contain; } .ge-ipc-sheet .ge-ipc-weiter-btn { margin-top: 16px; } /* ---------- Крок 2Б (balcony_solar, §2026-08-12) - 100%-copy of the user's own reference mockup (Instructions/Krok 2B - Standalone.html), translated into this file's existing --ge-ipc-hero-* tokens (its reference visual language - flat bordered cards, pill buttons - is closer to Steps 1/3 than to Step 2A's own --ge-ipc-primary* chrome). The postal-code/city field from the reference was removed entirely (decorative only there, never fed its own calc()) - nothing here corresponds to it. ---------- */ .ge-ipc-solar-column { min-width: 0; display: flex; flex-direction: column; gap: 16px; } .ge-ipc-panel { border: 1px solid var(--ge-ipc-hero-line); border-radius: var(--ge-ipc-hero-radius); background: #fff; padding: 22px 26px; } .ge-ipc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .ge-ipc-panel-head .ge-ipc-title--small { font-size: 16px; margin-bottom: 0; } .ge-ipc-panel > .ge-ipc-title--small { font-size: 16px; margin-bottom: 14px; } .ge-ipc-location__field { display: flex; align-items: center; gap: 10px; max-width: 320px; height: 48px; padding: 0 14px; border: 1px solid var(--ge-ipc-hero-line); border-radius: 9px; background: #fff; cursor: text; transition: border-color .15s ease, box-shadow .15s ease; } .ge-ipc-location__field:focus-within { border-color: var(--ge-ipc-hero-green); box-shadow: 0 0 0 3px var(--ge-ipc-hero-green-pale); } .ge-ipc-location__icon { display: flex; flex: none; color: var(--ge-ipc-hero-green); } .ge-ipc-location__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-location__input { flex: 1; min-width: 0; border: none; background: transparent; font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: .06em; color: var(--ge-ipc-hero-ink); } .ge-ipc-location__input:focus { outline: none; } .ge-ipc-location__input::placeholder { font-weight: 400; letter-spacing: 0; color: #9a9d9a; } .ge-ipc-location__status { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--ge-ipc-hero-gray); } .ge-ipc-location[data-state="found"] .ge-ipc-location__status { color: var(--ge-ipc-hero-green-dark); font-weight: 600; } .ge-ipc-location__source { margin: 6px 0 0; font-size: 11px; color: #8a8d8a; } /* §11.93: the field accepts German postcodes and towns only - said at a glance by a small country chip inside the field, before anything is typed. */ .ge-ipc-location__country { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 7px; border: 1px solid var(--ge-ipc-hero-line); border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ge-ipc-hero-gray); background: #f7f8f7; } .ge-ipc-location__flag { display: block; width: 14px; height: 10px; border-radius: 2px; background: linear-gradient(to bottom, #000 0 33.4%, #dd0000 33.4% 66.7%, #ffce00 66.7% 100%); } /* §11.92: autocomplete list under the postcode field. */ .ge-ipc-location__combo { position: relative; max-width: 420px; } .ge-ipc-location__combo .ge-ipc-location__field { max-width: none; } .ge-ipc-location__list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; margin: 0; padding: 6px; list-style: none; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid var(--ge-ipc-hero-line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .12); } .ge-ipc-location__opt, .ge-ipc-location__empty { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 7px; font-size: 15px; line-height: 1.3; color: var(--ge-ipc-hero-ink); } .ge-ipc-location__opt { cursor: pointer; } .ge-ipc-location__opt--active { background: var(--ge-ipc-hero-green-pale); } .ge-ipc-location__empty { color: var(--ge-ipc-hero-gray); cursor: default; } .ge-ipc-location__pc { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ge-ipc-hero-gray); } .ge-ipc-location__place { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ge-ipc-location__opt strong { font-weight: 700; color: var(--ge-ipc-hero-green-dark); } .ge-ipc-location__state { flex: none; font-size: 12px; font-weight: 600; color: #8a8d8a; } @media (max-width: 640px) { .ge-ipc-location__field, .ge-ipc-location__combo { max-width: none; } } .ge-ipc-solar-opts { display: flex; gap: 12px; flex-wrap: wrap; } .ge-ipc-opt-btn { appearance: none; display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--ge-ipc-hero-line); border-radius: 10px; background: #fff; padding: 11px 18px; font-size: 15px; font-family: inherit; color: var(--ge-ipc-hero-ink); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s; } .ge-ipc-opt-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* Admin-uploaded custom icon (§request 2026-08-12) - same 22x22 footprint as the fixed SVG icon above so a button's layout never shifts depending on which one it renders; object-fit:contain keeps an uneven custom image (non-square SVG, odd-aspect PNG) from stretching or overflowing that footprint. */ .ge-ipc-opt-btn img { width: 22px; height: 22px; object-fit: contain; flex: none; } .ge-ipc-opt-btn:hover { border-color: var(--ge-ipc-hero-green); } .ge-ipc-opt-btn--active { border-color: var(--ge-ipc-hero-green); background: var(--ge-ipc-hero-green-pale); color: var(--ge-ipc-hero-green-dark); font-weight: 700; box-shadow: 0 0 0 1px var(--ge-ipc-hero-green); } .ge-ipc-opt-btn--sm { padding: 9px 14px; font-size: 14px; white-space: nowrap; } /* Native range input, shared by the shading and consumption sliders - same translated-to-our-tokens styling for both, one definition. */ .ge-ipc-range { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--ge-ipc-hero-line); outline: none; cursor: pointer; margin: 10px 0; } .ge-ipc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ge-ipc-hero-green); border: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; } .ge-ipc-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ge-ipc-hero-green); border: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; } .ge-ipc-range::-moz-range-track { height: 8px; border-radius: 4px; background: transparent; } .ge-ipc-shading-ticks { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ge-ipc-hero-gray); margin-top: 6px; } .ge-ipc-shading-ticks [data-ge-ipc-shading-tick] { cursor: pointer; } .ge-ipc-shading-tick--active { color: var(--ge-ipc-hero-green); font-weight: 700; } .ge-ipc-consumption-row { display: flex; align-items: center; gap: 16px; } /* §request 2026-08-13: the slider and its tick labels are wrapped together in .ge-ipc-consumption-slider-wrap (a sibling of .ge-ipc-consumption-box within the row) instead of the ticks living as a separate element after the row - this is what lets the ticks naturally take the exact same flex-grown width as the slider (no magic-number margin-right needed to exclude the box's column, see the old comment removed below) AND, on mobile, what makes column-stacking the row put the ticks directly under the slider before the box, with zero extra reordering CSS: the wrap is one flex item, its own internal block layout (range, then ticks) is unaffected by the row's own flex-direction. */ .ge-ipc-consumption-slider-wrap { flex: 1; min-width: 0; } .ge-ipc-consumption-slider-wrap .ge-ipc-range { margin: 0; } .ge-ipc-consumption-box { display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--ge-ipc-hero-line); border-radius: 9px; height: 44px; padding: 0 12px; flex: none; width: 240px; } .ge-ipc-consumption-box--sm { width: auto; height: 44px; } .ge-ipc-consumption-box__input { width: 92px; border: none; font-family: inherit; font-size: 16px; font-weight: 700; text-align: center; color: var(--ge-ipc-hero-ink); background: transparent; } .ge-ipc-consumption-box__input:focus { outline: none; } .ge-ipc-consumption-box__unit { font-size: 13px; color: var(--ge-ipc-hero-gray); white-space: nowrap; } /* §request 2026-08-13: +/- step buttons flanking every .ge-ipc-consumption-box number field, for anyone who'd rather tap than type on a touch screen (front.js's bindNumberSteppers reads each input's own min/max/step, so these work identically for the 500-20000-step-100 consumption field, the 0-50-step-0.01 price field and the 0-20000-step-100 EV/heat-pump fields without any per-field CSS). Round, not square, to read as "control", not part of the typed number itself - the same visual idea as this file's other round icon buttons (.ge-ipc-parrow, .ge-ipc-sheet__close). */ .ge-ipc-consumption-box__step { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; border: none; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; color: var(--ge-ipc-hero-green); } .ge-ipc-consumption-box__step:hover { background: rgba(30, 158, 51, 0.1); } /* Absolute-positioning tick system (100%-copy of the reference's #consTicks) - each is a clickable value (see front.js bindConsumptionSlider) with its own ::before as the small gray vertical bar the user asked for: a precision indicator sitting just above the number, directly under the slider track, so the exact tick position is easy to spot. No margin-right hack needed to stay under just the slider (not the number box too) - it lives inside .ge-ipc-consumption-slider-wrap now, so it's naturally exactly as wide as the slider itself, on every screen size. */ .ge-ipc-consumption-ticks { position: relative; display: block; height: 26px; margin-top: 6px; } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick] { position: absolute; top: 8px; transform: translateX(-50%); font-size: 13.5px; color: var(--ge-ipc-hero-gray); white-space: nowrap; cursor: pointer; } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:hover { color: var(--ge-ipc-hero-green); } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: -8px; width: 2px; height: 6px; background: #c9cdc9; border-radius: 1px; } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:first-child { left: 0; transform: none; } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:first-child::before { left: 1px; transform: none; } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:nth-child(2) { left: 20%; } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:nth-child(3) { left: 40%; } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:nth-child(4) { left: 60%; } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:nth-child(5) { left: 80%; } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:last-child { left: auto; right: 0; transform: none; } .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:last-child::before { left: auto; right: 14px; transform: none; } /* §request 2026-08-13: on the narrowest phones all 6 tick labels (1 000 ... 6 000+) no longer fit without crowding into each other - user picked "fewer ticks: min/middle/ max only" over the alternatives (min/max only, abbreviated "1k...6k+", or a staggered two-row zig-zag). Hiding 3 of the 6 elements via nth-child leaves the remaining first/3rd/last exactly where they already were (nth-child counts ALL children regardless of visibility, so no repositioning math needed) - 1 000 (0%), 3 000 (40%, close enough to the range's true midpoint of 3 500 that a dedicated 4th value wasn't worth the extra markup/positioning-rule complexity) and 6 000+ (100%). The 3 hidden ticks stay fully in the DOM and clickable again above this breakpoint - this is a display-only change, not a data change. */ @media (max-width: 480px) { .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:nth-child(2), .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:nth-child(4), .ge-ipc-consumption-ticks [data-ge-ipc-consumption-tick]:nth-child(5) { display: none; } } .ge-ipc-linkbtn { appearance: none; background: none; border: none; color: var(--ge-ipc-hero-green); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 14px; padding: 0; text-decoration: underline; text-underline-offset: 3px; } .ge-ipc-linkbtn:hover { color: var(--ge-ipc-hero-green-dark); } .ge-ipc-consumption-chips { margin-top: 12px; } /* ---------- "Refine the calculation" (
/
, no JS needed to open/close - same technique already used for step 3's "How is this calculated?" in an earlier iteration, §11.18) ---------- */ .ge-ipc-advanced { padding: 0; overflow: hidden; } .ge-ipc-advanced__head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ge-ipc-hero-ink); padding: 22px 26px; cursor: pointer; list-style: none; } .ge-ipc-advanced__head::-webkit-details-marker { display: none; } .ge-ipc-advanced__head svg { width: 18px; height: 18px; stroke: var(--ge-ipc-hero-gray); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; flex: none; } .ge-ipc-advanced[open] .ge-ipc-advanced__head svg { transform: rotate(180deg); } .ge-ipc-advanced__body { padding: 2px 26px 22px; display: flex; flex-direction: column; gap: 18px; } .ge-ipc-advanced__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .ge-ipc-advanced__label { flex: 1; min-width: 180px; } .ge-ipc-advanced__label b { display: block; font-size: 15px; margin-bottom: 3px; } .ge-ipc-advanced__hint { font-size: 13px; color: var(--ge-ipc-hero-gray); line-height: 1.35; } .ge-ipc-advanced__control { display: flex; align-items: center; gap: 12px; } .ge-ipc-toggle { appearance: none; width: 46px; height: 26px; border-radius: 13px; background: #d0d5d0; border: none; position: relative; cursor: pointer; flex: none; padding: 0; transition: background 0.15s; } .ge-ipc-toggle::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.15s; } .ge-ipc-toggle--on { background: var(--ge-ipc-hero-green); } .ge-ipc-toggle--on::after { left: 23px; } .ge-ipc-summary__disclaimer { font-size: 12.5px; color: var(--ge-ipc-hero-gray); line-height: 1.5; margin-top: 14px; text-align: left; } @media (max-width: 640px) { .ge-ipc-panel { padding: 16px; } .ge-ipc-advanced { /* §request 2026-08-14: the outer .ge-ipc-panel.ge-ipc-advanced element carries the block's only padding on mobile now - overrides its own base padding:0 (line ~2024, needed on desktop so head/body can pad independently). */ padding: 16px; } .ge-ipc-advanced__head, .ge-ipc-advanced__body { /* Children padding removed - the parent's 16px above is the block's only padding, so it no longer accumulates through both children on top of it. */ padding: 0; } /* §request 2026-08-13: was flex-wrap, but the row almost never actually wrapped on real phone widths - a flex item with flex:1/basis:0 (the slider) is measured at size 0 for the wrap decision, so it and the 190px number box kept sharing one line, squeezing the slider into a thin, hard-to-drag strip. Deterministic column stack instead - and since the slider+ticks now share one wrapper element (.ge-ipc-consumption-slider-wrap, §2026-08-13), stacking the row simply puts that whole wrapper (slider on top, ticks right under it - its own internal layout is unaffected by the row's direction) first, then the number box below: slider → numbers → kWh field, exactly the order requested, with no reordering trick needed. align-self:stretch on the wrap overrides the row's own align-items:center (which centers the narrower number box) so the wrap - and the full-width slider inside it - still spans the row's whole width. */ .ge-ipc-consumption-row { flex-direction: column; align-items: center; gap: 14px; } .ge-ipc-consumption-slider-wrap { align-self: stretch; } .ge-ipc-consumption-box { width: 100%; max-width: 240px; } .ge-ipc-solar-opts { gap: 8px; } .ge-ipc-opt-btn { padding: 10px 13px; font-size: 14px; } .ge-ipc-consumption-ticks { font-size: 12px; } .ge-ipc-advanced__label { margin-top: 10px; } .ge-ipc-consumption-box__input { width: 70px; } } /* ---------- Крок 2C (inverter_generator, §request 2026-08-14) - 100%-fidelity port of the user's own reference mockup's CSS (Instructions/Krok 2C - Standalone.html), translated into this file's existing --ge-ipc-hero-* tokens (an exact match: the mockup's own :root --green/--dark/--pale/--ink/--gray/--line/--radius values are byte-identical to the tokens already defined for Кроки 1/3 above) and ge-ipc-*-prefixed class names (§4.5 of CLAUDE.md) - every selector below corresponds 1:1 to one of the mockup's own (.ucards/.ucard/.vgrid/.vitem/.duo/.volt/.split/.fcards/.fcard/.side/ .srow/.info/.hint/.reset), not an approximation built from this file's older, differently-styled Крок 2A/2Б components. Reuses .ge-ipc-solar-column (layout only)/ .ge-ipc-panel/.ge-ipc-weiter-btn/.ge-ipc-reset-btn/.ge-ipc-info(generic tooltip mechanism, already wired in front.js)/.ge-ipc-layout (1fr 350px, already an exact match for the mockup's own .layout) unchanged from earlier sections. ---------- */ .ge-ipc-ucards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .ge-ipc-ucard { position: relative; border: 1px solid var(--ge-ipc-hero-line); border-radius: 12px; background: #fff; padding: 18px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: inherit; font-size: 15px; color: var(--ge-ipc-hero-ink); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .ge-ipc-ucard svg, .ge-ipc-ucard img { width: 38px; height: 38px; object-fit: contain; flex: none; } .ge-ipc-ucard svg { stroke: var(--ge-ipc-hero-ink); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-ucard:hover { border-color: var(--ge-ipc-hero-green); } .ge-ipc-ucard--on { border-color: var(--ge-ipc-hero-green); box-shadow: 0 0 0 1px var(--ge-ipc-hero-green); color: var(--ge-ipc-hero-green-dark); font-weight: 700; } .ge-ipc-ucard--on svg { stroke: var(--ge-ipc-hero-green); } .ge-ipc-ucard__mk { position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--ge-ipc-hero-green); display: none; align-items: center; justify-content: center; } .ge-ipc-ucard__mk svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; } .ge-ipc-ucard--on .ge-ipc-ucard__mk { display: flex; } .ge-ipc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ge-ipc-volt { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--ge-ipc-hero-line); border-radius: 12px; padding: 18px 10px; background: #fff; font-family: inherit; font-size: 17px; font-weight: 700; color: var(--ge-ipc-hero-ink); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .ge-ipc-volt svg, .ge-ipc-volt img { width: 30px; height: 30px; object-fit: contain; flex: none; } .ge-ipc-volt svg { stroke: var(--ge-ipc-hero-ink); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-volt:hover { border-color: var(--ge-ipc-hero-green); } .ge-ipc-volt--on { border-color: var(--ge-ipc-hero-green); box-shadow: 0 0 0 1px var(--ge-ipc-hero-green); color: var(--ge-ipc-hero-green-dark); } .ge-ipc-volt--on svg { stroke: var(--ge-ipc-hero-green); } .ge-ipc-volt__mk { /* §request 2026-08-14: byte-identical to .ge-ipc-ucard__mk (Application) below - that badge was confirmed to look right, so this one is now copied from it instead of tuned separately (the earlier 10px/9px/2.5 attempt is gone). */ position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--ge-ipc-hero-green); display: none; align-items: center; justify-content: center; } .ge-ipc-volt__mk svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; } .ge-ipc-volt--on .ge-ipc-volt__mk { display: flex; } .ge-ipc-gsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } /* §request 2026-09-21: an option panel whose list has only ONE active option is rendered hidden (it would ask a question with a single possible answer) - see step2-generator.tpl. When that happens to one half of this 2-column row, the surviving panel must take the whole width instead of leaving an empty column beside it. */ .ge-ipc-gsplit:has(> .ge-ipc-panel[hidden]) { grid-template-columns: 1fr; } .ge-ipc-gsplit .ge-ipc-panel { margin-bottom: 0; } .ge-ipc-fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .ge-ipc-fcard { position: relative; border: 1px solid var(--ge-ipc-hero-line); border-radius: 12px; background: #fff; padding: 16px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: inherit; font-size: 14.5px; color: var(--ge-ipc-hero-ink); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .ge-ipc-fcard svg, .ge-ipc-fcard img { width: 32px; height: 32px; object-fit: contain; flex: none; } .ge-ipc-fcard svg { stroke: var(--ge-ipc-hero-ink); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-fcard:hover { border-color: var(--ge-ipc-hero-green); } .ge-ipc-fcard--on { border-color: var(--ge-ipc-hero-green); box-shadow: 0 0 0 1px var(--ge-ipc-hero-green); color: var(--ge-ipc-hero-green-dark); font-weight: 700; } .ge-ipc-fcard--on svg { stroke: var(--ge-ipc-hero-green); } .ge-ipc-fcard__mk { position: absolute; right: 7px; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--ge-ipc-hero-green); display: none; align-items: center; justify-content: center; } .ge-ipc-fcard__mk svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; } .ge-ipc-fcard--on .ge-ipc-fcard__mk { display: flex; } .ge-ipc-fcard__ats { font-size: 13px; font-weight: 700; border: 1.5px solid currentColor; border-radius: 6px; padding: 5px 8px; line-height: 1; } /* §request 2026-08-19: "Start type" cards made more compact - scoped to this one panel (attribute selector on its own grid container) rather than .ge-ipc-fcard itself, so "Fuel" (the other user of the shared .ge-ipc-fcard/.ge-ipc-fcards classes, still paired half-width with "Voltage" since §11.73) stays at its own, unchanged size. 4 columns (not 3) so all 4 active options (Електро/Ручний/Ручний-електро/Ручний-електро-авто) fit in a single row now that this panel is full-width. */ .ge-ipc-fcards[data-ge-ipc-start-type-opts] { grid-template-columns: repeat(4, 1fr); gap: 10px; } .ge-ipc-fcards[data-ge-ipc-start-type-opts] .ge-ipc-fcard { padding: 12px 6px 10px; gap: 6px; font-size: 13px; } .ge-ipc-fcards[data-ge-ipc-start-type-opts] .ge-ipc-fcard svg, .ge-ipc-fcards[data-ge-ipc-start-type-opts] .ge-ipc-fcard img { width: 24px; height: 24px; } .ge-ipc-gen-sidecol { text-align: center; } .ge-ipc-gside { border: 1px solid var(--ge-ipc-hero-line); border-radius: var(--ge-ipc-hero-radius); padding: 26px 24px; text-align: center; } .ge-ipc-gside__pwrap { position: relative; display: flex; justify-content: center; margin-bottom: 12px; } .ge-ipc-gside__pwrap img { width: 240px; height: 210px; object-fit: contain; } .ge-ipc-gside__badge { position: absolute; left: 0; top: 2px; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--ge-ipc-hero-green); background: #fff; display: flex; align-items: center; justify-content: center; } .ge-ipc-gside__badge svg { width: 26px; height: 26px; stroke: var(--ge-ipc-hero-green); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-srow { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--ge-ipc-hero-line); text-align: left; } .ge-ipc-srow__ic { width: 40px; height: 40px; border-radius: 50%; background: var(--ge-ipc-hero-green-pale); display: flex; align-items: center; justify-content: center; grid-row: 1 / 3; } .ge-ipc-srow__ic svg { width: 20px; height: 20px; stroke: var(--ge-ipc-hero-green); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-srow__k { font-size: 13.5px; color: var(--ge-ipc-hero-gray); line-height: 1.3; grid-column: 2; align-self: end; } .ge-ipc-srow__v { font-size: 17px; font-weight: 700; color: var(--ge-ipc-hero-green); line-height: 1.3; grid-column: 2; grid-row: 2; align-self: start; margin-top: 2px; } .ge-ipc-srow__hint2 { font-size: 12.5px; color: var(--ge-ipc-hero-gray); grid-column: 2; grid-row: 3; line-height: 1.35; margin-top: 2px; } .ge-ipc-srow .ge-ipc-info { grid-column: 3; grid-row: 1 / 3; } .ge-ipc-gside .ge-ipc-info::after { width: 235px; } .ge-ipc-gen-hint { display: none; font-size: 13px; color: var(--ge-ipc-hero-gray); text-align: center; margin-top: 8px; } .ge-ipc-weiter-btn:disabled ~ .ge-ipc-gen-hint { display: block; } .ge-ipc-gen-reset { gap: 7px; font-size: 14.5px; font-weight: 700; margin-top: 16px; } @media (max-width: 1200px) { .ge-ipc-ucards { grid-template-columns: repeat(2, 1fr); } .ge-ipc-gsplit { grid-template-columns: 1fr; } } @media (max-width: 640px) { /* §request 2026-08-14: was 1 column - the buttons themselves (18px 10px padding, 17px text, 30px icon) were wide enough on their own to force a single column; shrinking the button's own sizing below keeps "230 V"/"400 V" on 2 per row instead. */ .ge-ipc-duo { gap: 8px; } .ge-ipc-volt { gap: 8px; padding: 12px 8px; font-size: 14px; } .ge-ipc-volt svg, .ge-ipc-volt img { width: 22px; height: 22px; } /* §request 2026-08-19: 4 columns is too tight on narrow phones - 2 per row instead, same compact card sizing kept from the desktop rule above. */ .ge-ipc-fcards[data-ge-ipc-start-type-opts] { grid-template-columns: repeat(2, 1fr); } } /* ---------- Loader ---------- */ .ge-ipc-loader { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--ge-ipc-muted); font-size: 0.9rem; } /* ---------- Step 3: results (§request 2026-08-10, 100%-copy of the user's own reference - .ge-ipc-hero-title/.ge-ipc-hero-sub above are reused as-is for the h1/sub here, same as step 1/2 already do, since the reference's own values (52px/19px) match those tokens almost exactly). Pagination/stepper intentionally NOT copied from the reference - already handled by the shared header (§11.26). The reference's own left-column category recap was dropped on 2026-08-10 (own request, not the reference). Same-day follow-up request: all 6 tiles (power/capacity/photo/purpose/solar/done-card) now sit in ONE flat 3-per-row grid, in that exact DOM order, so every tile gets equal width AND height (default grid `align-items: stretch`, no explicit min-height needed to force a match - the tallest tile in a row sets the row height, the rest stretch to it). .ge-ipc-scard is the shared box (border/radius/sizing) for every tile including the photo and the done-card, which used to be their own differently-sized boxes in a separate right column; .ge-ipc-scard--photo/.ge-ipc-done-card are modifiers on top of it, not standalone boxes anymore. ---------- */ .ge-ipc-layout3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ge-ipc-scard { border: 1px solid var(--ge-ipc-hero-line); border-radius: var(--ge-ipc-hero-radius); padding: 22px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .ge-ipc-scard__icon { width: 54px; height: 54px; border-radius: 50%; background: var(--ge-ipc-hero-green-pale); display: flex; align-items: center; justify-content: center; flex: none; } .ge-ipc-scard__icon svg { width: 26px; height: 26px; stroke: var(--ge-ipc-hero-green); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-scard__label { font-size: 14px; color: var(--ge-ipc-hero-gray); } .ge-ipc-scard__value { font-size: 26px; font-weight: 700; line-height: 1.2; text-wrap: balance; } .ge-ipc-scard__value--green { color: var(--ge-ipc-hero-green); } .ge-ipc-scard__value--small { font-size: 15px; line-height: 1.5; font-weight: 700; } .ge-ipc-scard--uses { padding-left: 10px; padding-right: 10px; } .ge-ipc-scard.ge-ipc-scard--photo { padding: 14px; } .ge-ipc-scard--photo img { display: block; max-width: 100%; max-height: 150px; object-fit: contain; } /* Same shared .ge-ipc-scard box as every other tile (border/radius/equal grid sizing), but its own content is icon+heading+text side by side, not the centered icon/label/ value stack the other 5 tiles use - hence the compound selector to win over the .ge-ipc-scard defaults regardless of source order, and smaller type than before (§request 2026-08-10: was sized for its own half-width column, now shares a 1/3 tile with 5 other tiles). */ .ge-ipc-scard.ge-ipc-done-card { display: grid; grid-template-columns: 26px 1fr; align-items: start; text-align: left; gap: 10px; } .ge-ipc-done-card__chk { width: 26px; height: 26px; border-radius: 50%; background: var(--ge-ipc-hero-green); display: flex; align-items: center; justify-content: center; flex: none; } .ge-ipc-done-card__chk svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-done-card b { display: block; font-size: 15.5px; margin-bottom: 3px; } .ge-ipc-done-card p { font-size: 11px; color: var(--ge-ipc-hero-gray); line-height: 1.4; } /* balcony_solar's own result-set (§request 2026-08-13): 6 real stat tiles (vs power_station's 4) + photo + done-card = 8 tiles - too many for the shared 3-per-row grid above without an awkward incomplete last row, and the photo/done-card ended up scattered across different columns instead of stacked together. Scoped to this one result-set via its own data-attribute - power_station's 3-per-row grid and full-size tiles above are untouched (still the reference this was asked to look "similarly good" to, not something to change). calculator.tpl's DOM order for this result-set was reordered so the photo card is now 4th (recommended power/module count/expected yield/PHOTO) and the done-card stays 8th (autonomy/savings/battery/DONE-CARD) - with 4 columns that puts photo and done-card each in the last column of their own row, stacked one above the other, purely through natural grid flow (no explicit grid-column placement needed). */ .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; align-items: stretch; gap: 18px; } /* Denser tiles than power_station's (smaller icon/padding/type) - a pure density adjustment for having 6 stat tiles instead of 4, not a different visual language: same border/radius/colors as .ge-ipc-scard everywhere else. min-height (§request 2026-08-13, "щоб сітка була рівною і всі блоки однакові") is the actual fix for a jagged-looking grid: grid's default align-items:stretch only equalizes height WITHIN a single row (each row is sized by its own tallest cell), so row 1 (power/modules/ yield/photo) and row 2 (autonomy/savings/battery/done-card) could still end up different heights from EACH OTHER if their content happened to wrap differently - this shared min-height, applied to the same .ge-ipc-scard class every one of the 8 tiles (including --photo/.ge-ipc-done-card) already carries, forces both rows to the same floor height regardless of content, so the whole grid reads as uniform. */ .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-scard { padding: 20px 14px; gap: 10px; min-height: 172px; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-scard__icon { width: 48px; height: 48px; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-scard__icon svg { width: 22px; height: 22px; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-scard__label { font-size: 13.5px; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-scard__value { font-size: 22px; } /* §request 2026-09-21: a qualifying line under a stat's value - used for the useful-power share under the expected yield it explains. Deliberately NOT a ninth tile: the balcony grid is tuned to exactly 8 tiles in 4 columns (§11.54), and this figure qualifies the yield rather than standing beside it as an independent metric. */ .ge-ipc-scard__sub { font-size: 12px; line-height: 1.35; color: var(--ge-ipc-hero-gray); margin-top: 4px; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-scard__value--small { font-size: 14px; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-scard--photo img { max-height: 128px; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-done-card { align-content: center; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-done-card__chk { width: 24px; height: 24px; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-done-card__chk svg { width: 12px; height: 12px; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-done-card b { font-size: 15px; } .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] .ge-ipc-done-card p { font-size: 11.5px; } /* 4 narrow columns get cramped sooner than power_station's 3 wider ones, so this result-set collapses to 2 columns at a wider breakpoint than the shared 900px rule below (which still fires too once the viewport is under 900px - same 2-column value, no conflict, just redundant). */ @media (max-width: 1100px) { .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] { grid-template-columns: repeat(2, 1fr); } } /* The attribute-selector rule above outranks the shared, unscoped 640px rule further down (higher specificity always wins regardless of source order), so without this override balcony_solar would stay frozen at 2 columns instead of also collapsing to a single column on mobile like power_station does - this restates that collapse for this result-set specifically. Photo/done-card are pushed after the 6 real stat tiles (mirrors power_station's own mobile reorder further down, just expressed as `order` on stable classes instead of `nth-child` since this result-set's DOM order differs from that one). */ @media (max-width: 640px) { .ge-ipc-layout3[data-ge-ipc-result-set="balcony_solar"] { grid-template-columns: 1fr; } [data-ge-ipc-result-set="balcony_solar"] .ge-ipc-scard--photo { order: 1; } [data-ge-ipc-result-set="balcony_solar"] .ge-ipc-done-card { order: 2; } } .ge-ipc-cta { display: flex; flex-direction: column; align-items: center; margin-top: 44px; } .ge-ipc-cta-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--ge-ipc-hero-green); color: #fff; border: none; border-radius: 8px; font-size: 19px; font-weight: 700; font-family: inherit; padding: 16px; cursor: pointer; transition: background 0.15s; } .ge-ipc-cta-btn:hover { background: var(--ge-ipc-hero-green-dark); } .ge-ipc-cta-btn svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* Step 3's 6-tile grid collapses 3 -> 2 -> 1 per row, distinct from step 1/2's own breakpoints since .ge-ipc-layout3 is exclusive to step 3. */ @media (max-width: 900px) { .ge-ipc-layout3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ge-ipc-layout3 { grid-template-columns: 1fr; } /* Single-column mobile stacking reorders the 4 stat tiles (power/capacity/ purpose/solar) before the photo and "Ваші дані повні" tiles (§request 2026-08-10, mobile only - desktop/tablet keep the power/capacity/photo | purpose/solar/done-card row order unchanged). Targeted by DOM position (nth-child), not a new class, since the 6 tiles always render in this same fixed order. Power/capacity need no explicit `order` - they already sit first via the default order:0 plus their DOM position. §fix 2026-08-13: this MUST be scoped to power_station specifically (.ge-ipc-layout3[data-ge-ipc-result-set="power_station"], not the bare .ge-ipc-layout3 it originally was) - both result-sets share that base class, so the unscoped version was also matching balcony_solar's 8-tile grid below at the exact same specificity (0,2,0) as that result-set's own .ge-ipc-scard--photo/ .ge-ipc-done-card order rules, and being LATER in the file it silently won, scrambling that grid's mobile order (yield tile pushed to order:5, photo pinned to order:3 instead of the intended 1, "Розрахунок готовий" never separately targeted here at all since balcony_solar's done-card is its 8th child, past this rule's nth-child(6) ceiling - not the "photo second-to-last, done-card last" result the balcony_solar-scoped rules further below were actually trying for). */ .ge-ipc-layout3[data-ge-ipc-result-set="power_station"] > :nth-child(3) { order: 5; } .ge-ipc-layout3[data-ge-ipc-result-set="power_station"] > :nth-child(4) { order: 3; } .ge-ipc-layout3[data-ge-ipc-result-set="power_station"] > :nth-child(5) { order: 4; } .ge-ipc-layout3[data-ge-ipc-result-set="power_station"] > :nth-child(6) { order: 6; } .ge-ipc-cta-btn { width: 100%; } } /* ---------- Step 4: matching products (§request 2026-08-10, 100%-copy of the user's own reference - .ge-ipc-hero-title/.ge-ipc-hero-sub above are reused as-is for the h1/ sub here, same as steps 1/3 already do). Pagination/stepper intentionally NOT copied from the reference - already handled by the shared header (§11.26). Own custom card (.ge-ipc-pcard) replaces the theme's generic product-grid-view.tpl partial, since the reference needs a spec table the generic partial can't produce - price/image/URL/ availability data still comes from the same official ProductListingPresenter, only the markup around it is new. ---------- */ /* Fallback-match notice (§request 2026-08-11): shown only when ProductMatcher had to widen the search past the exact power range/purpose/solar filters to avoid an empty Step 4 - amber/informational, not red, since this is an honest heads-up, not an error. */ .ge-ipc-fallback-notice { display: flex; align-items: flex-start; gap: 12px; max-width: 720px; margin: 0 auto 28px; padding: 14px 18px; border: 1px solid #f5cf87; border-radius: var(--ge-ipc-hero-radius); background: #fffaf0; color: #7a5215; } .ge-ipc-fallback-notice__ic { flex: none; width: 22px; height: 22px; margin-top: 1px; } .ge-ipc-fallback-notice__ic svg { width: 100%; height: 100%; stroke: #b7791f; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-fallback-notice p { margin: 0; font-size: 14px; line-height: 1.5; } .ge-ipc-needbar { display: flex; justify-content: center; margin-bottom: 36px; } .ge-ipc-needbar-in { display: flex; align-items: center; gap: 34px; border: 1px solid var(--ge-ipc-hero-line); border-radius: var(--ge-ipc-hero-radius); padding: 18px 34px; } .ge-ipc-need { display: flex; align-items: center; gap: 12px; } .ge-ipc-need__ic { width: 44px; height: 44px; border-radius: 50%; background: var(--ge-ipc-hero-green-pale); display: flex; align-items: center; justify-content: center; flex: none; } .ge-ipc-need__ic svg { width: 22px; height: 22px; stroke: var(--ge-ipc-hero-green); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-need__k { font-size: 14px; color: var(--ge-ipc-hero-gray); } .ge-ipc-need__v { font-size: 19px; font-weight: 700; } .ge-ipc-needsep { width: 1px; height: 40px; background: var(--ge-ipc-hero-line); } .ge-ipc-sortbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 16px; } .ge-ipc-sortbar label { font-size: 14px; color: var(--ge-ipc-hero-gray); } .ge-ipc-sortbar select { height: 40px; border: 1px solid var(--ge-ipc-hero-line); border-radius: 9px; font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--ge-ipc-hero-ink); padding: 0 34px 0 12px; appearance: none; -webkit-appearance: none; background: #fff url('data:image/svg+xml;utf8,') no-repeat right 12px center; cursor: pointer; } .ge-ipc-sortbar select:focus { outline: none; border-color: var(--ge-ipc-hero-green); } .ge-ipc-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .ge-ipc-pcard { border: 1px solid var(--ge-ipc-hero-line); border-radius: var(--ge-ipc-hero-radius); padding: 15px; display: flex; flex-direction: column; background: #fff; } .ge-ipc-pcard__img { height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } /* The photo is now wrapped in a link to the product page (§request 2026-08-10) - display:contents keeps the invisible to the flex layout above, so the inside is still the effective flex item and stays centered exactly as before. */ .ge-ipc-pcard__img a { display: contents; } /* Scoped under .ge-ipc-pcard (2 classes) for the same reason as .ge-ipc-pcard__name/ __out above: the theme's `.cms-description img{display:block}` (custom.css, class + type) ties in specificity with a lone `.ge-ipc-pcard__img img` (also class + type), leaving the outcome dependent on load order. */ .ge-ipc-pcard .ge-ipc-pcard__img img { max-width: 100%; max-height: 220px; object-fit: contain; } /* Scoped under .ge-ipc-pcard (2 classes) rather than the bare .ge-ipc-pcard__name (1 class) so this beats the theme's own `.cms-description h2{font-size:3.5em; padding-bottom:0.8em}` (custom.css, 1 class + 1 type = higher specificity than a lone class) - confirmed as the actual cause of the oversized/uncolored name, not a hypothetical risk (same class of leak as the img/#content overrides already fixed elsewhere in this file). Explicit color, not inherited, for the same reason. */ /* Clamped to 2 lines (§request 2026-08-13: names ranged from 1 to 4 lines, making sibling cards in the same grid row wildly different heights) - min-height reserves that same 2-line box even for a short 1-line name, so every card's name area is identical regardless of actual text length, not just capped on the long end. 39px = 2 x (15px font-size x 1.3 line-height), with line-height set explicitly here since nothing upstream already pins it and the clamp math needs a known value to reserve against - line-clamp is included un-prefixed alongside the -webkit- form for forward compatibility, without changing the browsers this already worked in. */ .ge-ipc-pcard .ge-ipc-pcard__name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ge-ipc-hero-ink); text-align: center; margin-bottom: 14px; padding-bottom: 0; min-height: 39px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Same specificity tie risk as .ge-ipc-pcard__out above: `.ge-ipc-pcard__name a` (class + type) only ties with the theme's `.cms-description a{color:#e73e24}` (also class + type), leaving the outcome dependent on stylesheet load order - scoped one class further in to win outright instead of gambling on that order. */ .ge-ipc-pcard .ge-ipc-pcard__name a { color: inherit; text-decoration: none; } .ge-ipc-pcard__name a:hover { color: var(--ge-ipc-hero-green); } .ge-ipc-pcard__price { text-align: center; font-size: 19px; font-weight: 700; margin: -6px 0 10px; } .ge-ipc-pcard__stock { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ge-ipc-hero-green); font-size: 14px; font-weight: 700; margin-bottom: 12px; } .ge-ipc-pcard__stock svg { width: 15px; height: 15px; stroke: var(--ge-ipc-hero-green); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-pcard__stock--out { color: var(--ge-ipc-danger); } .ge-ipc-pcard__specs { border-top: 1px solid var(--ge-ipc-hero-line); margin-bottom: 16px; } .ge-ipc-pcard__spec { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 2px; border-bottom: 1px solid var(--ge-ipc-hero-line); font-size: 11px; } .ge-ipc-pcard__spec-k { color: var(--ge-ipc-hero-gray); } .ge-ipc-pcard__spec-v { font-weight: 700; text-align: right; } /* Scoped under .ge-ipc-pcard for the same reason as .ge-ipc-pcard__name above: the theme's `.cms-description a{color:#e73e24}` (custom.css, class+type) otherwise beats this rule's resting-state color (a lone class) - the :hover variant below already escapes it on its own, since a pseudo-class bumps specificity past the theme rule, which is exactly why only the resting state looked wrong. */ /* margin-top:auto moved here from .ge-ipc-pcard__cart below (§request 2026-08-13) - it belongs on whichever element is FIRST of the two bottom buttons, so any leftover flex space (from the grid row's default align-items:stretch matching this card's height to a taller sibling) collects above both buttons as one gap, keeping "Перейти до товару" and "Додати до кошика" flush against each other - previously it sat on .ge-ipc-pcard__cart only, which pushed the gap between the two buttons instead. */ .ge-ipc-pcard .ge-ipc-pcard__out { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1.5px solid var(--ge-ipc-hero-green); color: var(--ge-ipc-hero-green); background: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; padding: 8px 0; margin-top: auto; margin-bottom: 10px; text-decoration: none; transition: background 0.15s; } .ge-ipc-pcard__out:hover { background: var(--ge-ipc-hero-green-pale); color: var(--ge-ipc-hero-green-dark); } .ge-ipc-pcard__out svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-pcard__cart button { appearance: none; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--ge-ipc-hero-green); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; font-family: inherit; padding: 10px 0; cursor: pointer; transition: background 0.15s; } .ge-ipc-pcard__cart button:hover { background: var(--ge-ipc-hero-green-dark); } .ge-ipc-pcard__cart button:disabled { opacity: 0.5; cursor: not-allowed; } .ge-ipc-pcard__cart button svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-pcard__error { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ge-ipc-danger); } .ge-ipc-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; } .ge-ipc-parrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ge-ipc-hero-line); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .ge-ipc-parrow svg { width: 18px; height: 18px; stroke: var(--ge-ipc-hero-ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ge-ipc-parrow:hover { border-color: var(--ge-ipc-hero-green); box-shadow: 0 2px 10px rgba(30, 158, 51, 0.15); } .ge-ipc-parrow:hover svg { stroke: var(--ge-ipc-hero-green); } .ge-ipc-parrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; } .ge-ipc-pdots { display: flex; gap: 10px; } .ge-ipc-pdot { min-width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ge-ipc-hero-line); background: #fff; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ge-ipc-hero-ink); cursor: pointer; padding: 0; transition: border-color 0.15s, background 0.15s, color 0.15s; } .ge-ipc-pdot:hover { border-color: var(--ge-ipc-hero-green); color: var(--ge-ipc-hero-green); } .ge-ipc-pdot--on { background: var(--ge-ipc-hero-green); border-color: var(--ge-ipc-hero-green); color: #fff; } /* §request 2026-08-13: gap between the main station/panel block's own pager and the bracket block right below it on step 4 (balcony_solar groups; order swapped §request 2026-08-13 - stations first, brackets second). The sibling combinator applies only while the bracket container is actually visible, so power_station groups (where it stays [hidden]) get no extra gap. Deliberately padding-top, not margin-top: the bracket container's first child (.ge-ipc-hero-title, the "Mounting options for your..." heading) has margin-top:0, and a plain block container with no border/padding lets its own top margin collapse straight through into that child's - padding can never collapse, so this is the one way to guarantee the gap actually renders instead of depending on collapse behavior. */ [data-ge-ipc-products-container] + [data-ge-ipc-bracket-products-container]:not([hidden]) { padding-top: 56px; } .ge-ipc-no-results { margin-top: 8px; padding: 20px; border: 1px solid var(--ge-ipc-hero-line); border-radius: var(--ge-ipc-hero-radius); background: var(--ge-ipc-bg-subtle); } .ge-ipc-no-results__reassurance { color: var(--ge-ipc-muted); font-size: 0.9rem; margin: 8px 0 0; } .ge-ipc-no-results__detail { color: var(--ge-ipc-muted); font-size: 0.9rem; margin: 8px 0 16px; } @media (max-width: 1240px) { .ge-ipc-products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1120px) { .ge-ipc-products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px) { .ge-ipc-needbar-in { flex-direction: column; gap: 14px; align-items: flex-start; } .ge-ipc-needsep { display: none; } } @media (max-width: 700px) { .ge-ipc-products { grid-template-columns: 1fr; } } .ge-ipc-loader__spinner { width: 18px; height: 18px; border: 2px solid var(--ge-ipc-border); border-top-color: var(--ge-ipc-primary); border-radius: 50%; animation: ge-ipc-spin 0.8s linear infinite; } @keyframes ge-ipc-spin { to { transform: rotate(360deg); } } /* ========================================================================== Responsive breakpoints - checked at 1440 / 1024 / 768 / 390 / 320 (§27) ========================================================================== */ /* Desktop: the mobile bottom bar/sheet only ever make sense below the 768px breakpoint where the sidebar itself stops being sticky (below) - force them hidden above it regardless of any JS-toggled state, the same defensive override the reference design applies at its own breakpoint. */ @media (min-width: 769px) { .ge-ipc-mobile-bar, .ge-ipc-sheet, .ge-ipc-sheet-backdrop { display: none !important; } } /* Step 2 device grid: 3 columns is the reference's own default (>1300px); this is its own dedicated breakpoint, at the reference's exact value, rather than reusing any of Step 1's breakpoints below (.ge-ipc-devices is exclusive to Step 2). */ @media (max-width: 1300px) { .ge-ipc-devices { grid-template-columns: repeat(2, 1fr); } } /* Step 2 layout: the sidebar can't safely stay beside the devices column once the viewport is too narrow to fit both comfortably - the reference's own breakpoint (980px) is wider than Step 1's 920px one below because Step 2's container is itself wider (1432px vs 1180px, see the :has() rule near the top of this file) - using Step 1's narrower breakpoint here would leave the sidebar squeezed into too little space before it actually stacks. */ @media (max-width: 980px) { .ge-ipc-layout { grid-template-columns: 1fr; } .ge-ipc-summary { position: static; max-height: none; order: 2; } .ge-ipc-devices-column { display: flex; flex-direction: column; } .ge-ipc-actions { order: 3; } } /* Step 1 cards: collapse to a single column at the exact breakpoint used by the approved reference design (920px) - a dedicated rule rather than reusing the 768px "Tablet" block below, so the two don't fight over the same selector at different widths. */ @media (max-width: 920px) { .ge-ipc-groups { grid-template-columns: 1fr; } .ge-ipc-hero-title { font-size: 2.25rem; } .ge-ipc-stepper__bar { width: 56px; } } /* Step 2 device grid, second step down to a single column - the reference's own exact breakpoint (640px), narrower than the 768px "Tablet" block below since that block's own rules (moved above into the 980px block) used to force this early. */ @media (max-width: 640px) { .ge-ipc-devices { grid-template-columns: 1fr; } .ge-ipc-devices-column { padding: 16px; } .ge-ipc-chips { gap: 8px; } .ge-ipc-chip { padding: 9px 14px; font-size: 14px; } } /* Mobile */ @media (max-width: 480px) { .ge-ipc-root { padding: 16px 12px 32px; font-size: 15px; } .ge-ipc-cats { display: none; } .ge-ipc-device-accordion { display: block; } /* Scoped with :has() (same pattern already used elsewhere in this file, e.g. the step-4 :has(> [data-ge-ipc-step="4"]...) width rule) rather than hiding .ge-ipc-devices unconditionally: a group with zero device categories renders neither .ge-ipc-cats nor an accordion at all (category is optional, §11.24) - such a group must keep showing its plain flat grid on mobile too, exactly as it already does today, not go blank. */ /* Both wrappers listed because step 2C (Генератор, §request 2026-09-18) reuses the very same device-card block inside its own .ge-ipc-gen-devices panel rather than step 2A's .ge-ipc-devices-column. */ .ge-ipc-devices-column:has([data-ge-ipc-device-accordion] .ge-ipc-acc-sec) .ge-ipc-devices, .ge-ipc-gen-devices:has([data-ge-ipc-device-accordion] .ge-ipc-acc-sec) .ge-ipc-devices { display: none; } /* Mobile back button: icon only, no "Back" label (§request 2026-08-09) - the header row is narrow here, and the arrow alone is a well-understood pattern. */ .ge-ipc-backbtn { width: 34px; height: 34px; padding: 0; gap: 0; justify-content: center; } .ge-ipc-backbtn span { display: none; } /* Shorter connector bars between the stepper's numbers on phones - the desktop width (98px/56px) left too little room for the back button next to it and made the whole row too wide for narrow screens (§request 2026-08-09). */ .ge-ipc-stepper__bar { width: 24px; } .ge-ipc-hero-title { font-size: 1.75rem; } .ge-ipc-hero-sub { font-size: 1rem; margin-bottom: 28px; } .ge-ipc-group-card { padding: 20px 20px 20px; } .ge-ipc-group-card__visual { height: 150px; margin-bottom: 16px; } .ge-ipc-group-card__blob { width: 140px; height: 140px; left: 12px; top: 4px; } .ge-ipc-group-card__image { width: 160px !important; height: 140px !important; } .ge-ipc-group-card__name { font-size: 1.35rem; min-height: 0; margin-bottom: 8px; } .ge-ipc-devices-header { flex-direction: column; align-items: flex-start; gap: 8px; } .ge-ipc-actions { flex-direction: column; } .ge-ipc-actions .ge-ipc-btn { width: 100%; } .ge-ipc-device-card { padding: 7px 7px 7px 12px; gap: 2px; } .ge-ipc-power-field, .ge-ipc-time-field { gap: 0px; } /* Step 2 device cards, mobile-only minimize/expand (§request 2026-08-10): the grid itself (icon column width, icon size, name/qty position - qty stays under the name exactly like on desktop) is untouched here on purpose - only runtime/power/subtotal collapse away, everything else keeps the exact layout it already has. Deliberately reuses the SAME .ge-ipc-device-card--active class the existing click-to-select JS already toggles (a click on the card is already what activates it), rather than a new independent JS-driven state: selecting a device IS expanding its card, deselecting IS collapsing it back - "what's visible" and "what's chosen" can never drift apart because they're the same state, and zero JS changes were needed for this. */ .ge-ipc-power-field, .ge-ipc-time-field, .ge-ipc-device-card__footer { transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease; } /* Same selector shape as the always-on opacity-dim rule earlier in this file (`.ge-ipc-device-card:not(.ge-ipc-device-card--active) .ge-ipc-power-field` etc.) so specificity ties and this, being later in the file, wins - a full collapse here, not just a dim. min-height:0 overrides __footer's own min-height:1.1em, which would otherwise stop it collapsing past that floor. */ .ge-ipc-device-card:not(.ge-ipc-device-card--active) .ge-ipc-power-field, .ge-ipc-device-card:not(.ge-ipc-device-card--active) .ge-ipc-time-field, .ge-ipc-device-card:not(.ge-ipc-device-card--active) .ge-ipc-device-card__footer { max-height: 0; min-height: 0; opacity: 0; margin-top: 0 !important; overflow: hidden; } .ge-ipc-device-card--active .ge-ipc-power-field, .ge-ipc-device-card--active .ge-ipc-time-field { max-height: 64px; opacity: 1; margin-top: 8px; } .ge-ipc-device-card--active .ge-ipc-device-card__footer { max-height: 40px; opacity: 1; margin-top: 6px; } } /* Small mobile */ @media (max-width: 340px) { .ge-ipc-stepper__bar { width: 16px; } .ge-ipc-group-card__badge { width: 50px; height: 50px; } .ge-ipc-group-card__badge img { width: 40px; height: 40px; } }