:root { --bm-green: #2FA66A; --bm-blue: #2F7FD1; --bm-red: #D94A57; --bm-red-soft: #F7E8EB; --bm-bg: #F5F7F8; --bm-surface: #FFFFFF; --bm-text: #1E2430; --bm-muted: #667085; --bm-border: #D9E2E8; --bm-green-soft: #EAF7F0; --bm-blue-soft: #ECF4FD; } body { background: var(--bm-bg) !important; color: var(--bm-text) !important; } /* Główne akcenty - zielony i niebieski */ .btn-primary, .button-primary, .button--primary, a.btn-primary, button[type="submit"], input[type="submit"], .wizard-next, .configurator-next, .summary-next { background: linear-gradient(90deg, var(--bm-green), var(--bm-blue)) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 10px 24px rgba(47, 127, 209, 0.18) !important; } .btn-primary:hover, .button-primary:hover, .button--primary:hover, button[type="submit"]:hover, input[type="submit"]:hover { filter: brightness(0.98); } .progress-bar, .progress__bar, .wizard-progress__bar, [class*="progress"] [class*="bar"] { background: linear-gradient(90deg, var(--bm-green), var(--bm-blue)) !important; } /* Mniej czerwieni globalnie */ .eyebrow, .section-eyebrow, .kicker, .step-kicker, [class*="eyebrow"] { color: var(--bm-green) !important; } h1, h2, h3, h4 { color: var(--bm-text) !important; } /* Karty wyboru */ label, .choice-card, .option-card, .selection-card, .radio-card, .system-card, .protocol-card, .ecosystem-card, .step-card { border-color: var(--bm-border); } .choice-card:hover, .option-card:hover, .selection-card:hover, .radio-card:hover, .system-card:hover, .protocol-card:hover, .ecosystem-card:hover, .step-card:hover { border-color: var(--bm-blue) !important; } /* Zaznaczenie - więcej zieleni/niebieskiego */ .choice-card.is-selected, .option-card.is-selected, .selection-card.is-selected, .radio-card.is-selected, .system-card.is-selected, .protocol-card.is-selected, .ecosystem-card.is-selected, .step-card.is-selected, label:has(input:checked) { border-color: var(--bm-green) !important; box-shadow: 0 0 0 2px rgba(47, 166, 106, 0.10) !important; background: #fff !important; } /* Numery kroków po lewej */ .step-index.is-active, .step-number.is-active, .sidebar-step.is-active .step-bullet, [class*="step"].active [class*="bullet"] { background: linear-gradient(135deg, var(--bm-green), var(--bm-blue)) !important; color: #fff !important; border-color: transparent !important; } /* Nieaktywny / neutralny element w lekkim błękicie */ .icon-box, .option-icon, .choice-card__icon, .selection-card__icon, .system-card__icon, .protocol-card__icon, .ecosystem-card__icon, .step-card__icon { background: var(--bm-blue-soft) !important; color: var(--bm-blue) !important; border-color: rgba(47,127,209,0.18) !important; } /* Specjalny wygląd dla: Nie wiem / nie mam jeszcze systemu */ .bm-unknown-system { border-color: var(--bm-blue) !important; box-shadow: 0 0 0 2px rgba(47,127,209,0.08) !important; } .bm-unknown-system .bm-unknown-system-icon, .bm-unknown-system [class*="icon"]:first-child, .bm-unknown-system .choice-card__icon, .bm-unknown-system .selection-card__icon, .bm-unknown-system .system-card__icon { background: linear-gradient(135deg, var(--bm-blue), var(--bm-green)) !important; color: #fff !important; border-color: transparent !important; } /* Komunikacja producenta - ukrycie ikonki P */ .bm-producer-communication .bm-remove-producer-icon, .bm-producer-communication .protocol-pill__icon, .bm-producer-communication .choice-card__icon, .bm-producer-communication .step-card__icon { display: none !important; } /* Mniej czerwonego w aktywnych obramowaniach */ [style*="border-color: #e"], [style*="border: 1px solid #e"] { border-color: var(--bm-border) !important; } /* Delikatne dopasowanie sekcji hero */ .configurator-hero, .hero-card, .summary-hero, .project-hero { background: var(--bm-surface) !important; border-color: var(--bm-border) !important; } /* Red zostawiamy tylko jako akcent, ale subtelny */ .badge-danger, .tag-danger, .note-danger, .warning-soft { background: var(--bm-red-soft) !important; color: var(--bm-red) !important; border-color: rgba(217,74,87,0.18) !important; } /* UX_STAGE_3_AVAILABILITY_ALEXA */ .stock-availability { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 9px; border-radius: 9px; font-size: 11px; line-height: 1; font-weight: 700; } .stock-availability__label { display: inline-flex; align-items: center; gap: 6px; } .stock-availability__label i { display: block; width: 7px; height: 7px; border-radius: 50%; } .stock-availability--critical { background: #fff1f2; color: #b42334; } .stock-availability--critical i { background: #e11d48; } .stock-availability--warning { background: #fff8df; color: #906000; } .stock-availability--warning i { background: #e6a700; } .stock-availability--good { background: #ecf9f1; color: #177345; } .stock-availability--good i { background: #1fad69; } .stock-availability--unknown { background: #f2f5f6; color: #66737c; } .stock-availability--unknown i { background: #98a4ab; } .amazon-alexa-choice-icon { display: block; width: 44px; height: 44px; } .amazon-alexa-choice-icon circle { fill: #25a9e8; } .amazon-alexa-choice-icon path { fill: #fff; } .option-illustration--alexa { display: flex; align-items: center; justify-content: center; } /* UX_FINAL_20260903_START */ /* --------------------------------------------------------- HERO: SYSTEM + KOMUNIKACJA --------------------------------------------------------- */ .result-overview__quick-facts { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; } /* Gdyby stary element został w cache / DOM */ .result-overview__communication { display: none !important; } /* --------------------------------------------------------- AMAZON ALEXA --------------------------------------------------------- */ .smart-home-logo--alexa-choice { display: block; width: 42px !important; height: 42px !important; max-width: 42px !important; max-height: 42px !important; object-fit: contain; } /* --------------------------------------------------------- STICKY CHECKOUT --------------------------------------------------------- */ .result-sticky-checkout { position: fixed; top: 118px; right: 22px; z-index: 1000; width: 292px; box-sizing: border-box; padding: 17px; border: 1px solid #d8e2e6; border-radius: 18px; background: rgba(255, 255, 255, .97); box-shadow: 0 18px 50px rgba(28, 47, 58, .18), 0 3px 10px rgba(28, 47, 58, .06); backdrop-filter: blur(14px); } .result-sticky-checkout__heading { padding-bottom: 12px; border-bottom: 1px solid #e5eaed; } .result-sticky-checkout__heading span { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } .result-sticky-checkout__heading small { display: block; font-size: 11px; font-weight: 800; color: #64727c; } .result-sticky-checkout__heading strong { display: block; font-size: 23px; line-height: 1; white-space: nowrap; color: #202936; } .result-sticky-checkout__meta { display: flex; align-items: baseline; gap: 5px; margin: 10px 0 13px; font-size: 12px; color: #68757e; } .result-sticky-checkout__meta strong { color: #202936; } .result-sticky-checkout__cart, .result-sticky-checkout__restart { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; } .result-sticky-checkout__restart { margin-top: 8px; } .result-sticky-checkout__status, .result-sticky-checkout__warning { margin: 9px 2px 0; font-size: 10px; line-height: 1.35; color: #6b7780; } .result-sticky-checkout__warning { color: #986b00; } /* stare elementy nie mogą wrócić wizualnie */ /* Na szerokim ekranie robimy miejsce na panel */ @media (min-width: 1200px) { .project-result { box-sizing: border-box; padding-right: 330px; } } /* Tablet / mobile -> sticky panel na dole */ @media (max-width: 1199px) { .result-sticky-checkout { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; padding: 12px; border-radius: 15px; } .result-sticky-checkout__heading { padding-bottom: 7px; } .result-sticky-checkout__heading strong { font-size: 20px; } .result-sticky-checkout__meta { margin: 7px 0; } .result-sticky-checkout__cart, .result-sticky-checkout__restart { min-height: 42px; } .project-result { padding-bottom: 300px; } } /* --------------------------------------------------------- HERO MOBILE --------------------------------------------------------- */ @media (max-width: 700px) { .result-overview__quick-facts { align-items: stretch; } } /* UX_FINAL_20260903_END */ /* UX_POLISH_20260903_START */ /* ========================================================== SYSTEM + KOMUNIKACJA ========================================================== */ .result-overview__quick-facts { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .result-choice-logo { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 145px; min-height: 64px; box-sizing: border-box; padding: 9px 12px; border: 1px solid #d8e2e7; border-radius: 12px; background: rgba( 255, 255, 255, .76 ); } .result-choice-logo small { display: block; margin: 0; font-size: 9px; line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #677580; } .result-choice-logo__asset { display: flex; align-items: center; min-height: 29px; } .result-choice-logo__asset img, .result-choice-logo__asset svg { display: block; width: auto; max-width: 125px; max-height: 29px; object-fit: contain; } .result-choice-logo__asset strong { font-size: 13px; color: #26313b; } .result-choice-logo--secondary { min-width: 165px; } /* ========================================================== AVAILABILITY ========================================================== */ .stock-availability { width: fit-content; padding: 6px 10px; } .stock-availability__label { font-size: 11px; font-weight: 750; white-space: nowrap; } /* ========================================================== STICKY SUMMARY ========================================================== */ .result-sticky-checkout { /* Panel zaczyna się na wysokości głównej karty wyniku, a nie przy headerze. */ top: 205px; right: max( 28px, calc( (100vw - 1720px) / 2 + 28px ) ); width: 300px; padding: 17px 18px 16px; border-radius: 17px; border: 1px solid rgba( 62, 83, 94, .15 ); background: rgba( 255, 255, 255, .98 ); box-shadow: 0 12px 34px rgba( 31, 48, 58, .12 ), 0 2px 5px rgba( 31, 48, 58, .04 ); backdrop-filter: blur(12px); } .result-sticky-checkout__heading { padding-bottom: 11px; } .result-sticky-checkout__heading small { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; } .result-sticky-checkout__heading strong { font-size: 22px; letter-spacing: -.02em; } .result-sticky-checkout__availability { margin: 11px 0 2px; } .result-sticky-checkout__meta { margin: 9px 0 12px; } .result-sticky-checkout__cart { min-height: 48px; border-radius: 12px; } .result-sticky-checkout__restart { min-height: 44px; margin-top: 8px; border-radius: 12px; } .result-sticky-checkout__status { margin-top: 10px; padding-top: 9px; border-top: 1px solid #edf0f2; font-size: 10px; } /* Główna zawartość ma własną przestrzeń. Panel nie powinien na nią nachodzić. */ @media (min-width: 1280px) { .project-result { padding-right: 340px; } } /* Przy mniejszych ekranach nie próbujemy wciskać bocznego panelu. */ @media (max-width: 1279px) { .result-sticky-checkout { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; padding: 12px; border-radius: 15px; } .result-sticky-checkout__heading { padding-bottom: 7px; } .result-sticky-checkout__availability { margin: 7px 0 0; } .result-sticky-checkout__meta { margin: 6px 0 8px; } .project-result { padding-bottom: 300px; } } @media (max-width: 700px) { .result-choice-logo { flex: 1 1 calc(50% - 5px); min-width: 0; } } /* UX_POLISH_20260903_END */ /* UX_COMPACT_PRODUCT_CARD_20260903_START */ /* ========================================================== 1. SZERSZY STICKY ========================================================== */ @media (min-width: 1500px) { .result-sticky-checkout { /* * Pozycja zostaje prawie taka sama. * Zwiększamy przede wszystkim szerokość. */ width: 390px !important; left: min( calc(50% + 250px), calc(100vw - 418px) ) !important; right: auto !important; top: 216px !important; } } @media ( min-width: 1280px ) and ( max-width: 1499px ) { .result-sticky-checkout { width: 350px !important; left: auto !important; right: 24px !important; top: 216px !important; } } /* ========================================================== 2. CAŁA KARTA PRODUKTU ========================================================== */ .ux-full-product-card { position: relative !important; } /* ========================================================== 3. ZOBACZ PRODUKT ========================================================== */ /* * Jeżeli karta jest szeroka, zostawiamy * mały bezpieczny margines w prawym górnym * obszarze dla linku. */ @media (min-width: 850px) { .ux-full-product-card { /* * Nie zmieniamy całego paddingu karty. * Tylko pierwszy obszar ma wizualnie * wystarczająco miejsca, ponieważ CTA * jest bardzo małe. */ --ux-product-link-space: 118px; } } /* ========================================================== 4. ILOŚĆ + DOSTĘPNOŚĆ ========================================================== */ .ux-quantity-availability-row { display: inline-flex; align-items: center; gap: 12px; width: fit-content; margin-top: 4px; } .ux-quantity-availability-row .stock-availability { flex: 0 0 auto; margin: 0 !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { /* * Na telefonie nie używamy absolutnego * CTA, bo karta jest za wąska. */ .ux-quantity-availability-row { gap: 7px; } } /* UX_COMPACT_PRODUCT_CARD_20260903_END */ /* UX_HERO_PRODUCT_POLISH_20260903_START */ /* ========================================================== 1. MNIEJSZY HERO / "ZESTAW WYMAGA..." ========================================================== */ /* * Zmniejszamy tylko główny tytuł wyniku. */ /* * Opis pod nagłówkiem również trochę * ciaśniejszy. */ /* ========================================================== 2. SYSTEM + KOMUNIKACJA + ZOBACZ ZESTAW ========================================================== */ .result-overview__quick-facts { display: flex !important; align-items: stretch !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 26px !important; } .result-choice-logo { min-width: 164px !important; min-height: 72px !important; } .result-overview__actions--inline { display: flex !important; align-items: stretch !important; margin: 0 !important; } .result-overview__actions--inline .button { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 72px !important; margin: 0 !important; padding-left: 24px !important; padding-right: 24px !important; border-radius: 12px !important; white-space: nowrap; } /* ========================================================== 3. ZOBACZ PRODUKT - CZERWONY BOX ========================================================== */ /* * Link zostaje w prawym górnym rogu, * ale dajemy mu trochę więcej oddechu. */ /* ========================================================== 4. DESKTOP ========================================================== */ /* ========================================================== 5. MOBILE ========================================================== */ @media (max-width: 700px) { .result-overview__quick-facts { margin-top: 20px !important; } .result-choice-logo { flex: 1 1 calc(50% - 5px); min-width: 0 !important; } .result-overview__actions--inline { width: 100%; } .result-overview__actions--inline .button { width: 100%; min-height: 52px !important; } } /* UX_HERO_PRODUCT_POLISH_20260903_END */ /* UX_GATEWAY_PURCHASE_20260903_START */ /* ========================================================== REQUIRED GATEWAY FOOTER ========================================================== */ /* ========================================================== REQUIRED GATEWAY PURCHASE ========================================================== */ .ux-required-gateway-purchase { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-left: auto; } .ux-required-gateway-purchase small { max-width: 180px; font-size: 8px; line-height: 1.25; color: #687680; } .ux-gateway-purchase-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 132px; min-height: 34px; padding: 6px 10px; box-sizing: border-box; border: 1px solid #1fa86a; border-radius: 9px; background: #ffffff; color: #168557; font-family: inherit; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer; transition: .15s ease; } .ux-gateway-purchase-toggle span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-size: 12px; font-weight: 900; } .ux-gateway-purchase-toggle:hover { background: #effaf5; } .ux-gateway-purchase-toggle.is-selected { background: #eef9f3; border-color: #bfe2cf; color: #277450; } .ux-gateway-purchase-toggle.is-selected span { background: #28aa6c; color: #ffffff; } .ux-gateway-purchase-toggle--unavailable { border-color: #efd19c !important; background: #fff7e8 !important; color: #8c6425 !important; cursor: not-allowed !important; opacity: 1 !important; } .ux-gateway-purchase-toggle--unavailable span { background: #f5a224; color: #ffffff; } /* * Stary status nie jest już potrzebny, * bo jego funkcję przejmuje klikalny button. */ /* ========================================================== SHARED CONTROLLER BUTTON ========================================================== */ /* ========================================================== GUARANTEED SMALL HOMEY/FIBARO FALLBACK ========================================================== */ /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .ux-required-gateway-purchase { width: 100%; margin-left: 0; } .ux-gateway-purchase-toggle { width: 100%; } } /* UX_GATEWAY_PURCHASE_20260903_END */ /* UX_SHARED_CONTROLLER_CARD_FINAL_START */ /* * Zero dodatkowych fallback cards. */ /* ========================================================== ORIGINAL HOMEY / FIBARO CARD ========================================================== */ .ux-final-shared-controller-card { position: relative !important; min-height: 88px; box-sizing: border-box; padding-right: 330px !important; } /* ========================================================== RIGHT SIDE ========================================================== */ /* ========================================================== VIEW PRODUCT ========================================================== */ .ux-final-shared-controller-link { display: inline-flex !important; align-items: center; justify-content: center; min-height: 31px; box-sizing: border-box; margin: 0 !important; padding: 6px 9px !important; border: 1px solid #e4e8eb; border-radius: 8px; background: #ffffff; color: #df1831 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 800 !important; text-decoration: none !important; white-space: nowrap; } /* ========================================================== ADD ========================================================== */ .ux-final-shared-controller-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 88px; min-height: 31px; box-sizing: border-box; padding: 6px 9px; border: 1px solid #b9dfcb; border-radius: 8px; background: #ffffff; color: #168557; font-family: inherit; font-size: 9px; line-height: 1; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .ux-final-shared-controller-toggle:hover { background: #eff9f4; border-color: #7cc5a0; } .ux-final-shared-controller-toggle.is-selected { border-color: #b9dfcb; background: #eef9f3; color: #26744f; } /* * Stare przyciski nie mogą być widoczne. */ /* ========================================================== MOBILE ========================================================== */ @media (max-width: 800px) { .ux-final-shared-controller-card { padding-right: 14px !important; padding-bottom: 92px !important; } .ux-final-shared-controller-link, .ux-final-shared-controller-toggle { flex: 1 1 50%; } } /* UX_SHARED_CONTROLLER_CARD_FINAL_END */ /* UX_COMPACT_COMPAT_BADGES_START */ /* ========================================================== PRODUCT CARDS: WIDE ========================================================== */ .ux-wide-smart-home-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 9px !important; } .ux-wide-smart-home-badge { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 176px !important; width: 176px !important; min-width: 176px !important; max-width: 176px !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; box-sizing: border-box !important; margin: 0 !important; padding: 6px 10px !important; overflow: hidden !important; border-radius: 11px !important; } .ux-wide-smart-home-badge img { display: block !important; width: 150px !important; height: 50px !important; min-width: 0 !important; min-height: 0 !important; max-width: 150px !important; max-height: 50px !important; margin: 0 auto !important; object-fit: contain !important; object-position: center !important; transform: none !important; } /* ========================================================== SQUARE ========================================================== */ .ux-square-smart-home-icon { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; object-fit: contain !important; object-position: center !important; transform: none !important; } /* * Podsumowanie może być minimalnie większe. */ .result-choice-logo .ux-square-smart-home-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; } /* * Gateway protocol chip mniejszy. */ .ux-gateway-protocol-chip .ux-square-smart-home-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; } /* ========================================================== REMOVE OLD CROPPING RULES ========================================================== */ /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .ux-wide-smart-home-badge { flex-basis: 158px !important; width: 158px !important; min-width: 158px !important; max-width: 158px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; } .ux-wide-smart-home-badge img { width: 138px !important; height: 46px !important; max-width: 138px !important; max-height: 46px !important; } } /* UX_COMPACT_COMPAT_BADGES_END */ /* UX_BADGES_FINAL_SIZE_START */ /* ========================================================== FINALNY KOMPAKTOWY ROZMIAR Nie zmieniamy ?r?de? grafik ani DOM. ========================================================== */ /* * Wiersze kompatybilno?ci. */ .ux-compact-badge-row, .ux-wide-smart-home-row { gap: 8px !important; row-gap: 8px !important; } /* * Ka?dy box: * oko?o 25% mniejszy ni? obecnie. */ .ux-compact-badge-chip, .ux-wide-smart-home-badge { flex: 0 0 150px !important; width: 150px !important; min-width: 150px !important; max-width: 150px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; box-sizing: border-box !important; padding: 4px 8px !important; border-radius: 10px !important; overflow: hidden !important; } /* * WIDE grafiki maj? zachowa? pe?ny obraz. * Niczego nie cropujemy. */ .ux-compact-badge-chip img, .ux-wide-smart-home-badge img { display: block !important; width: 132px !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: 132px !important; max-height: 40px !important; margin: 0 auto !important; object-fit: contain !important; object-position: center !important; transform: none !important; } /* * Je?li jaki? stary wariant ma SVG. */ .ux-compact-badge-chip svg, .ux-wide-smart-home-badge svg { width: auto !important; height: 30px !important; max-width: 132px !important; max-height: 30px !important; } /* * Lekko zmniejszamy pionowe odst?py pomi?dzy: * DZIA?A Z * ??CZY SI? POPRZEZ */ .ux-compact-badge-row, .ux-wide-smart-home-row { margin-top: 5px !important; margin-bottom: 10px !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .ux-compact-badge-chip, .ux-wide-smart-home-badge { flex-basis: 138px !important; width: 138px !important; min-width: 138px !important; max-width: 138px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; } .ux-compact-badge-chip img, .ux-wide-smart-home-badge img { width: 120px !important; max-width: 120px !important; max-height: 38px !important; } } /* UX_BADGES_FINAL_SIZE_END */ /* UX_RESULT_HERO_REAL_START */ /* ========================================================== CAŁY HERO ========================================================== */ /* ========================================================== TYTUŁ ========================================================== */ /* opis */ /* ========================================================== MOST COHERENT BRAND ========================================================== */ /* ========================================================== QUICK FACTS ========================================================== */ .result-overview__quick-facts { display: flex !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 7px !important; margin-top: 12px !important; margin-bottom: 0 !important; } /* ========================================================== SYSTEM / KOMUNIKACJA ========================================================== */ .result-overview__quick-facts .result-choice-logo { display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 0 0 124px !important; width: 124px !important; min-width: 124px !important; max-width: 124px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; box-sizing: border-box !important; gap: 2px !important; padding: 6px 9px !important; margin: 0 !important; border-radius: 10px !important; } .result-overview__quick-facts .result-choice-logo small { margin: 0 !important; font-size: 7.5px !important; line-height: 1 !important; letter-spacing: .07em !important; } /* ========================================================== IKONY W HERO ========================================================== */ .result-overview__quick-facts .result-choice-logo__asset { display: flex !important; align-items: center !important; min-height: 25px !important; height: 25px !important; } .result-overview__quick-facts .result-choice-logo__asset img, .result-overview__quick-facts .result-choice-logo__asset svg, .result-overview__quick-facts .ux-square-smart-home-icon { display: block !important; width: auto !important; height: 25px !important; min-width: 0 !important; min-height: 0 !important; max-width: 95px !important; max-height: 25px !important; object-fit: contain !important; object-position: left center !important; } /* tekstowy fallback */ .result-overview__quick-facts .result-choice-logo__asset strong { font-size: 11px !important; line-height: 1.1 !important; } /* ========================================================== ZOBACZ ZESTAW ========================================================== */ .result-overview__quick-facts .result-overview__actions--inline { display: flex !important; flex: 0 0 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; align-items: stretch !important; margin: 0 !important; } .result-overview__quick-facts .result-overview__actions--inline .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; line-height: 1 !important; } /* ========================================================== FALLBACK PRODUCENTA ========================================================== */ .result-overview__quick-facts .result-choice-logo--secondary { flex-basis: 140px !important; width: 140px !important; min-width: 140px !important; max-width: 140px !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 760px) { .result-overview__quick-facts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; } .result-overview__quick-facts .result-choice-logo { width: 100% !important; min-width: 0 !important; max-width: none !important; flex-basis: auto !important; } .result-overview__quick-facts .result-overview__actions--inline { grid-column: 1 / -1; width: 100% !important; min-width: 0 !important; max-width: none !important; flex-basis: auto !important; } .result-overview__quick-facts .result-overview__actions--inline .button { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; } } /* UX_RESULT_HERO_REAL_END */ /* UX_PROMO_PRICE_START */ .result-price-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: max-content; } .result-price__promo-head { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .result-price__regular { color: #8c98a2 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 600 !important; text-decoration: line-through; white-space: nowrap; } .result-price__badge { display: inline-flex; align-items: center; justify-content: center; min-height: 17px; box-sizing: border-box; padding: 3px 6px; border-radius: 5px; background: rgba( 221, 24, 49, .09 ); color: #d91831 !important; font-size: 7px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: .055em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; } .result-price__current { color: #25333d; font-size: 15px; line-height: 1.05; font-weight: 850; white-space: nowrap; } .result-product-card__buy, .result-component-card__buy, .integration-card__buy { gap: 5px !important; } @media (max-width: 700px) { .result-price-stack { align-items: flex-start; } .result-price__promo-head { justify-content: flex-start; } } /* UX_PROMO_PRICE_END */ /* UX_GATEWAY_PROTOCOL_UI_START */ /* ========================================================== KOMUNIKACJA BRAMKI ========================================================== */ .result-component-card__protocols { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 7px; } /* ========================================================== CHIP ========================================================== */ .ux-gateway-protocol-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; box-sizing: border-box; padding: 4px 8px; border: 1px solid #dbe4e8; border-radius: 8px; background: #fff; } /* ========================================================== IKONA SQUARE ========================================================== */ .ux-gateway-protocol-chip__icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; overflow: hidden; } .ux-gateway-protocol-chip__icon img, .ux-gateway-protocol-chip__icon svg, .ux-gateway-protocol-chip .ux-square-smart-home-icon { display: block !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; object-fit: contain !important; object-position: center !important; } /* ========================================================== LABEL ========================================================== */ .ux-gateway-protocol-chip small { margin: 0 !important; color: #52606b !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .045em; white-space: nowrap; } /* ========================================================== FALLBACK TEKSTOWY ========================================================== */ .ux-gateway-protocol-chip--text { min-height: 25px; background: #f7f9fa; } /* ========================================================== AKCESORIA NIEBĘDĄCE BRAMKAMI ========================================================== */ .result-component-card__technical-meta { margin-top: 6px; color: #75818b; } .result-component-card__technical-meta small { font-size: 9px; } /* UX_GATEWAY_PROTOCOL_UI_END */ /* UX_STICKY_PRODUCT_THUMBNAILS_20260903_START */ .result-sticky-checkout__selection { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 5px; } .result-sticky-checkout__selection-label { font-size: 10px; font-weight: 700; color: #697781; } .result-sticky-selected-products { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; } .result-sticky-selected-products[hidden] { display: none !important; } .result-sticky-selected-products .result-sticky-selection__item { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; flex: 0 0 48px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border: 1px solid #e3e9ed; border-radius: 10px; background: #ffffff; box-shadow: 0 2px 7px rgba(31, 48, 58, .06); } .result-sticky-selected-products .result-sticky-selection__item img { display: block !important; width: 43px !important; min-width: 43px !important; max-width: 43px !important; height: 43px !important; min-height: 43px !important; max-height: 43px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } .result-sticky-selection__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 12px; font-weight: 800; color: #37505e; } .result-sticky-selection__badge { position: absolute; right: -1px; bottom: -1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #1f7ae0; color: #ffffff; font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .result-sticky-checkout__selection + .result-sticky-checkout__availability { margin-top: 8px; } /* * Homey / FIBARO: * przycisk siedzi w istniejacej sekcji zakupu. * Nie ma osobnego dolnego boxa. */ .integration-card .integration-card__buy .ux-final-shared-controller-toggle { width: auto !important; min-height: 38px; margin-top: 8px; padding: 8px 14px; border: 0; border-radius: 9px; font-size: 12px; font-weight: 750; cursor: pointer; } @media (max-width: 1279px) { .result-sticky-selected-products .result-sticky-selection__item { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; flex-basis: 44px !important; } .result-sticky-selected-products .result-sticky-selection__item img { width: 39px !important; min-width: 39px !important; max-width: 39px !important; height: 39px !important; min-height: 39px !important; max-height: 39px !important; } } /* UX_STICKY_PRODUCT_THUMBNAILS_20260903_END */ /* UX_GATEWAY_SHARED_LAYOUT_FIX_20260903_START */ /* ========================================================== REQUIRED GATEWAYS ========================================================== */ /* * Purchase toggle zawsze należy do konkretnej karty, * nigdy do całego gridu/sekcji. */ .result-component-card[data-required-gateway-sku] .result-component-card__buy { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-end !important; gap: 8px !important; } .result-component-card[data-required-gateway-sku] .ux-required-gateway-purchase { display: flex !important; width: 100%; margin: 6px 0 0 !important; align-items: stretch !important; } .result-component-card[data-required-gateway-sku] .ux-gateway-purchase-toggle { width: 100% !important; min-width: 0 !important; min-height: 36px; } /* ========================================================== HOMEY / FIBARO CARD ========================================================== */ /* * Stary final-card CSS rezerwował 330 px na absolutny box * akcji. Tego boxa już nie ma, więc resetujemy ten layout. */ .ux-final-shared-controller-card { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) 210px !important; gap: 16px !important; align-items: center !important; min-height: 0 !important; padding: 16px !important; padding-right: 16px !important; padding-bottom: 16px !important; } .ux-final-shared-controller-card .integration-card__visual { width: 72px !important; height: 72px !important; padding: 8px !important; } .ux-final-shared-controller-card > div:not( .integration-card__visual ):not( .integration-card__buy ) { min-width: 0; } .ux-final-shared-controller-card h3 { max-width: none !important; margin: 3px 0 6px !important; font-size: 17px !important; line-height: 1.15 !important; overflow-wrap: normal !important; word-break: normal !important; } .ux-final-shared-controller-card p { max-width: 520px; line-height: 1.45 !important; } .ux-final-shared-controller-card .integration-card__buy { grid-column: 3 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 8px !important; width: 100%; min-width: 0; text-align: right !important; } .ux-final-shared-controller-card .integration-card__buy .result-price-stack { align-items: flex-end !important; } .ux-final-shared-controller-card .ux-final-shared-controller-link, .ux-final-shared-controller-card .ux-final-shared-controller-toggle { width: auto !important; min-width: 112px !important; min-height: 36px !important; margin: 0 !important; box-sizing: border-box; } /* * Stare absolutne elementy nie mogą mieć wpływu na layout, * nawet gdyby zostały po HTMX swap. */ /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 800px) { .ux-final-shared-controller-card { grid-template-columns: 60px minmax(0, 1fr) !important; gap: 12px !important; padding: 14px !important; padding-right: 14px !important; padding-bottom: 14px !important; } .ux-final-shared-controller-card .integration-card__visual { width: 60px !important; height: 60px !important; } .ux-final-shared-controller-card .integration-card__buy { grid-column: 1 / -1 !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-end !important; width: 100%; } } /* UX_GATEWAY_SHARED_LAYOUT_FIX_20260903_END */ /* UX_PRODUCT_CARD_LAYOUT_V2_20260903_START */ /* ========================================================== PRODUCT CARD ========================================================== */ .result-product-card { grid-template-columns: 244px minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; } /* * Lewa kolumna: * * Kategoria * Marka * Zdjęcie * Zobacz produkt */ .result-product-card__media { display: flex; grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; min-width: 0; padding: 20px 0 20px 20px; box-sizing: border-box; } /* KATEGORIA */ .result-product-card__media .result-product-card__category { display: block; margin: 0 0 4px 2px !important; color: #59636d !important; font-size: 10px !important; font-weight: 850 !important; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } /* MARKA */ .result-product-card__media .result-product-card__meta { margin: 0 0 11px 2px !important; color: #1e2935 !important; font-size: 12px !important; font-weight: 750 !important; line-height: 1.25; } /* ZDJĘCIE */ .result-product-card__media .result-product-card__visual { position: relative; display: grid; grid-column: auto !important; grid-row: auto !important; width: 204px !important; height: 188px !important; margin: 0 !important; padding: 16px !important; place-items: center; box-sizing: border-box; overflow: hidden; background: linear-gradient( 145deg, #fafafa, #f2f4f4 ); border-radius: 16px; } .result-product-card__media .result-product-card__visual img { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* ZOBACZ PRODUKT */ .result-product-card__product-link { display: inline-flex; width: 204px; min-height: 40px; margin-top: 9px; padding: 8px 14px; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; color: #ffffff !important; background: var(--brand); border: 1px solid var(--brand); border-radius: 10px; font-size: 10px; font-weight: 850; line-height: 1; text-align: center; text-decoration: none !important; transition: transform .15s ease, filter .15s ease; } .result-product-card__product-link:hover { transform: translateY(-1px); filter: brightness(.96); } /* PRAWA CZĘŚĆ */ .result-product-card__body { grid-column: 2 !important; grid-row: 1 !important; padding: 24px 24px 15px !important; } .result-product-card__body > h3 { margin-top: 0 !important; } .result-product-card__footer { grid-column: 2 !important; grid-row: 2 !important; } /* * W prawej części zakupowej zostają już tylko: * * cena * SKU */ .result-product-card__buy > a { display: none !important; } /* ========================================================== HERO: WIDE SYSTEM / COMMUNICATION ASSETS ========================================================== */ .result-overview__quick-facts .result-choice-logo { flex: 0 0 164px !important; width: 164px !important; min-width: 164px !important; max-width: 164px !important; height: 66px !important; min-height: 66px !important; max-height: 66px !important; padding: 7px 10px !important; gap: 4px !important; } .result-overview__quick-facts .result-choice-logo small { font-size: 8px !important; } .result-overview__quick-facts .result-choice-logo__asset { display: flex !important; width: 100%; height: 36px !important; min-height: 36px !important; align-items: center !important; justify-content: flex-start !important; overflow: hidden; } .result-overview__quick-facts .result-choice-logo__asset img, .result-overview__quick-facts .result-choice-logo__asset svg { display: block !important; width: auto !important; height: 34px !important; max-width: 142px !important; max-height: 34px !important; object-fit: contain !important; object-position: left center !important; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 900px) { .result-product-card { grid-template-columns: 205px minmax(0, 1fr) !important; } .result-product-card__media { padding: 17px 0 17px 17px; } .result-product-card__media .result-product-card__visual { width: 172px !important; height: 166px !important; } .result-product-card__product-link { width: 172px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 760px) { .result-product-card { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; } .result-product-card__media { grid-column: 1 !important; grid-row: 1 !important; width: 100%; padding: 18px 18px 0; align-items: flex-start; } .result-product-card__media .result-product-card__visual { width: 168px !important; height: 160px !important; align-self: center; } .result-product-card__product-link { width: 168px; align-self: center; } .result-product-card__body { grid-column: 1 !important; grid-row: 2 !important; padding: 18px !important; } .result-product-card__footer { grid-column: 1 !important; grid-row: 3 !important; } .result-overview__quick-facts .result-choice-logo { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; flex-basis: auto !important; } .result-overview__quick-facts .result-choice-logo__asset img, .result-overview__quick-facts .result-choice-logo__asset svg { max-width: 150px !important; } } /* UX_PRODUCT_CARD_LAYOUT_V2_20260903_END */ /* UX_SHARED_CONTROLLER_SIDEBAR_CSS_20260903_START */ /* ========================================================== DESKTOP ONLY ========================================================== */ @media (min-width: 1280px) { /* * Cały prawy panel. * * Nie pokazujemy użytkownikowi technicznego scrollbara. * Jeżeli viewport jest wyjątkowo niski, panel nadal może * się przewijać kółkiem myszy. */ .result-sidebar-stack { position: fixed; z-index: 1000; top: 132px; right: 28px; display: flex; flex-direction: column; gap: 16px; width: 400px; max-height: calc(100vh - 154px); padding: 0 2px 8px; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .result-sidebar-stack::-webkit-scrollbar { display: none; width: 0; height: 0; } /* ====================================================== SUMMARY ====================================================== */ .result-sidebar-stack > .result-sticky-checkout { position: relative !important; inset: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; flex: 0 0 auto; border-radius: 20px !important; box-shadow: 0 18px 48px rgba( 29, 47, 58, .12 ) !important; } /* ====================================================== SECOND WINDOW ====================================================== */ .result-sidebar-stack > .result-integration--sidebar { position: relative !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 18px !important; box-sizing: border-box; border: 1px solid #dce4e8 !important; border-radius: 20px !important; background: #ffffff !important; box-shadow: 0 18px 48px rgba( 29, 47, 58, .10 ) !important; overflow: visible !important; } /* ====================================================== SECOND WINDOW HEADER ====================================================== */ .result-integration--sidebar .result-integration__heading { display: block !important; margin: 0 0 14px !important; padding: 0 0 13px !important; border-bottom: 1px solid #e6ebee; background: transparent !important; } .result-integration--sidebar .result-disclosure__icon { display: none !important; } .result-integration--sidebar .result-integration__heading .eyebrow { margin: 0 0 5px !important; color: #159b63 !important; font-size: 9px !important; font-weight: 900 !important; line-height: 1; letter-spacing: .09em; text-transform: uppercase; } .result-integration--sidebar .result-integration__heading h2 { margin: 0 !important; color: #202936 !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -.025em; } .result-integration--sidebar .result-integration__heading h2 + p { margin: 6px 0 0 !important; color: #68757f !important; font-size: 11px !important; line-height: 1.35 !important; } .result-integration--sidebar .disclosure-intro { display: none !important; } .result-integration--sidebar .result-integration__content { margin: 0 !important; padding: 0 !important; } .result-integration--sidebar .integration-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; margin: 0 !important; } /* ====================================================== HOMEY / FIBARO CARD ====================================================== */ .result-integration--sidebar .integration-card, .result-integration--sidebar .ux-final-shared-controller-card { display: grid !important; grid-template-columns: 66px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; gap: 11px 13px !important; min-height: 0 !important; margin: 0 !important; padding: 13px !important; box-sizing: border-box; align-items: center !important; border: 1px solid #e2e8eb !important; border-radius: 14px !important; background: #f8fafb !important; box-shadow: none !important; } .result-integration--sidebar .integration-card__visual { grid-column: 1 !important; grid-row: 1 !important; display: grid !important; width: 66px !important; height: 66px !important; margin: 0 !important; padding: 7px !important; box-sizing: border-box; place-items: center; border-radius: 12px !important; background: #ffffff !important; } .result-integration--sidebar .integration-card__visual img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .result-integration--sidebar .integration-card > div:not( .integration-card__visual ):not( .integration-card__buy ) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0; } .result-integration--sidebar .integration-card small { display: block; margin: 0 0 4px !important; font-size: 8px !important; font-weight: 850 !important; line-height: 1.1 !important; } .result-integration--sidebar .integration-card h3 { margin: 0 0 5px !important; color: #172330 !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.18 !important; overflow-wrap: normal !important; word-break: normal !important; } .result-integration--sidebar .integration-card p { margin: 0 !important; color: #69767f !important; font-size: 9px !important; line-height: 1.4 !important; } /* ====================================================== BOTTOM ROW ====================================================== */ .result-integration--sidebar .integration-card__buy { grid-column: 1 / -1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: minmax(90px, 1fr) auto auto !important; gap: 8px !important; width: 100% !important; min-width: 0; margin: 0 !important; padding: 11px 0 0 !important; align-items: center !important; border-top: 1px solid #e4eaed; text-align: left !important; } .result-integration--sidebar .integration-card__buy .result-price-stack { margin: 0 !important; align-items: flex-start !important; text-align: left !important; } .result-integration--sidebar .integration-card__buy .result-price__current { font-size: 14px !important; font-weight: 850 !important; line-height: 1 !important; white-space: nowrap; } .result-integration--sidebar .integration-card__buy > a, .result-integration--sidebar .ux-final-shared-controller-link, .result-integration--sidebar .ux-final-shared-controller-toggle { display: inline-flex !important; width: auto !important; min-width: 0 !important; min-height: 38px !important; margin: 0 !important; padding: 8px 11px !important; align-items: center !important; justify-content: center !important; box-sizing: border-box; border-radius: 10px !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap; } .result-integration--sidebar .ux-final-shared-controller-card { padding-right: 13px !important; padding-bottom: 13px !important; } } /* ========================================================== LARGE DESKTOP ========================================================== */ @media (min-width: 1500px) { .result-sidebar-stack { right: max( 32px, calc( (100vw - 1540px) / 2 ) ); width: 420px; } } /* ========================================================== 1280–1499 ========================================================== */ @media ( min-width: 1280px ) and ( max-width: 1499px ) { .result-sidebar-stack { top: 118px; right: 20px; width: 365px; gap: 12px; } .result-sidebar-stack > .result-integration--sidebar { padding: 15px !important; } .result-integration--sidebar .integration-card, .result-integration--sidebar .ux-final-shared-controller-card { grid-template-columns: 58px minmax(0, 1fr) !important; padding: 11px !important; } .result-integration--sidebar .integration-card__visual { width: 58px !important; height: 58px !important; } .result-integration--sidebar .integration-card h3 { font-size: 13px !important; } .result-integration--sidebar .integration-card__buy { grid-template-columns: minmax(82px, 1fr) auto auto !important; gap: 6px !important; } .result-integration--sidebar .integration-card__buy > a, .result-integration--sidebar .ux-final-shared-controller-link, .result-integration--sidebar .ux-final-shared-controller-toggle { padding: 7px 9px !important; font-size: 8px !important; } } /* ========================================================== TABLET + MOBILE ========================================================== */ /* * Brak desktopowego redesignu. * * JS fizycznie przywraca checkout i Homey/FIBARO * w ich oryginalne miejsca. */ @media (max-width: 1279px) { .result-sidebar-stack { display: none !important; } .ux-sidebar-anchor { display: none !important; } } /* UX_SHARED_CONTROLLER_SIDEBAR_CSS_20260903_END */ /* UX_MULTI_CONTROLLER_SIDEBAR_20260903_START */ /* ========================================================== MULTIPLE HOMEY / FIBARO CARDS DESKTOP ONLY ========================================================== */ @media (min-width: 1280px) { /* * Najważniejsze: * * stare style sekcji integracji zakładały dużą, * pojedynczą kartę i mogły zostawiać stałą wysokość. * * Sidebar musi rosnąć razem z liczbą central. */ .result-sidebar-stack > .result-integration--sidebar { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; contain: none !important; } .result-integration--sidebar .result-integration__content { display: block !important; position: relative !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* * Każda centrala zajmuje osobny wiersz. */ .result-integration--sidebar .integration-grid { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; grid-auto-rows: auto !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* * Usuwamy wszystkie potencjalne stare pozycjonowania * kart integracji. */ .result-integration--sidebar .integration-card, .result-integration--sidebar .ux-final-shared-controller-card { position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; clear: both !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* * Druga i każda kolejna karta. */ .result-integration--sidebar .integration-card + .integration-card { margin-top: 0 !important; } /* * Tekst nie może sztucznie zwiększać wysokości przez * stare desktopowe ograniczenia. */ .result-integration--sidebar .integration-card > div:not( .integration-card__visual ):not( .integration-card__buy ) { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* * Dolna część z ceną / przyciskami również jest częścią * normalnego flow karty. */ .result-integration--sidebar .integration-card__buy { position: relative !important; inset: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; } /* * Cały prawy stack może być dłuższy przy dwóch centralach. * Przewijanie zostaje dostępne, ale scrollbar niewidoczny. */ .result-sidebar-stack { overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none !important; } .result-sidebar-stack::-webkit-scrollbar { display: none !important; } } /* ========================================================== MOBILE / TABLET ========================================================== */ /* * Brak zmian. * Poniższe reguły działają wyłącznie >=1280px. */ /* UX_MULTI_CONTROLLER_SIDEBAR_20260903_END */ /* UX_SIDEBAR_CONTROLLER_NO_SHRINK_20260903_START */ @media (min-width: 1280px) { /* * KLUCZOWY FIX * * .result-sidebar-stack jest flex-column z max-height. * * Bez tego przeglądarka zmniejsza wysokość drugiego * okna, gdy Homey + FIBARO nie mieszczą się razem * z checkoutem. * * Zawartość karty się nie zmniejsza i dlatego wcześniej * wystawała poza białe tło. */ .result-sidebar-stack > #optional-integration.result-integration--sidebar { flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; align-self: stretch !important; width: 100% !important; height: auto !important; min-height: min-content !important; max-height: none !important; overflow: visible !important; } /* * Sam grid również nigdy nie uczestniczy * w ściskaniu wysokości. */ #optional-integration.result-integration--sidebar .integration-grid { height: auto !important; min-height: min-content !important; max-height: none !important; } /* * Każda karta zajmuje swoją naturalną wysokość. */ #optional-integration.result-integration--sidebar .integration-card { flex: none !important; height: auto !important; min-height: min-content !important; max-height: none !important; } /* * Jeżeli checkout + Homey + FIBARO są wyższe * niż ekran, przewija się STACK, nie same karty. */ .result-sidebar-stack { align-items: stretch !important; overflow-y: auto !important; overflow-x: hidden !important; } } /* UX_SIDEBAR_CONTROLLER_NO_SHRINK_20260903_END */ /* UX_HERO_ICONS_ONLY_20260903_START */ /* ========================================================== HERO QUICK FACTS only logos + CTA ========================================================== */ .result-overview__quick-facts { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 18px !important; flex-wrap: wrap; } /* * Usuwamy całe zewnętrzne kafelki * SYSTEM / KOMUNIKACJA. */ .result-overview__quick-facts .result-choice-logo { display: flex !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* * Nie pokazujemy już etykiet * SYSTEM / KOMUNIKACJA. */ .result-overview__quick-facts .result-choice-logo small { display: none !important; } /* * Zostaje wyłącznie właściwa grafika wide. */ .result-overview__quick-facts .result-choice-logo__asset { display: flex !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: flex-start !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .result-overview__quick-facts .result-choice-logo__asset img, .result-overview__quick-facts .result-choice-logo__asset svg { display: block !important; width: auto !important; height: 42px !important; max-width: 190px !important; max-height: 42px !important; margin: 0 !important; object-fit: contain !important; object-position: left center !important; } /* * CTA zostaje w tej samej linii. */ .result-overview__quick-facts a, .result-overview__quick-facts button { flex: 0 0 auto; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 760px) { .result-overview__quick-facts { gap: 12px !important; } .result-overview__quick-facts .result-choice-logo { width: auto !important; min-width: 0 !important; max-width: none !important; flex-basis: auto !important; } .result-overview__quick-facts .result-choice-logo__asset { height: 38px !important; min-height: 38px !important; max-height: 38px !important; } .result-overview__quick-facts .result-choice-logo__asset img, .result-overview__quick-facts .result-choice-logo__asset svg { height: 36px !important; max-width: 150px !important; max-height: 36px !important; } } /* UX_HERO_ICONS_ONLY_20260903_END */ /* UX_HERO_PURE_ICONS_20260903_START */ /* ========================================================== HERO pure ecosystem + protocol icons ========================================================== */ .result-overview__quick-facts { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 22px !important; flex-wrap: wrap; } /* * Zero kart. */ .result-overview__quick-facts .result-choice-logo { display: flex !important; flex: 0 0 auto !important; width: 50px !important; min-width: 50px !important; max-width: 50px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; gap: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* * SYSTEM / KOMUNIKACJA nadal ukryte. */ .result-overview__quick-facts .result-choice-logo small { display: none !important; } /* * Sam symbol. */ .result-overview__quick-facts .result-choice-logo__asset { display: grid !important; width: 50px !important; min-width: 50px !important; max-width: 50px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 !important; place-items: center; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .result-overview__quick-facts .result-choice-logo__asset img, .result-overview__quick-facts .result-choice-logo__asset svg { display: block !important; width: 46px !important; height: 46px !important; min-width: 0 !important; min-height: 0 !important; max-width: 46px !important; max-height: 46px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* * CTA trochę bliżej ikon. */ .result-overview__quick-facts a, .result-overview__quick-facts button { margin-left: 2px; flex: 0 0 auto; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 760px) { .result-overview__quick-facts { gap: 16px !important; } .result-overview__quick-facts .result-choice-logo, .result-overview__quick-facts .result-choice-logo__asset { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; } .result-overview__quick-facts .result-choice-logo__asset img, .result-overview__quick-facts .result-choice-logo__asset svg { width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; } } /* UX_HERO_PURE_ICONS_20260903_END */ /* UX_RESULT_TOP_MINIMAL_20260903_START */ /* ========================================================== MINIMAL TOP AREA NO HERO BOX NO WARNING BOX ========================================================== */ .result-overview__quick-facts--standalone { position: relative; display: flex !important; width: auto !important; min-height: 0 !important; margin: 26px 0 42px !important; padding: 0 !important; align-items: center !important; justify-content: flex-start !important; gap: 20px !important; flex-wrap: wrap; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* * Nie pozwalamy żadnym starym regułom hero * ponownie tworzyć wizualnego boxa. */ .result-overview__quick-facts--standalone .result-choice-logo { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* * Ikony są teraz głównym elementem tej części. */ .result-overview__quick-facts--standalone .result-choice-logo, .result-overview__quick-facts--standalone .result-choice-logo__asset { width: 52px !important; min-width: 52px !important; max-width: 52px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; } /* * Zobacz zestaw obok ikon. */ .result-overview__quick-facts--standalone .result-overview__actions { margin: 0 !important; padding: 0 !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 760px) { .result-overview__quick-facts--standalone { margin: 18px 0 28px !important; gap: 14px !important; } .result-overview__quick-facts--standalone .result-choice-logo, .result-overview__quick-facts--standalone .result-choice-logo__asset { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; } } /* UX_RESULT_TOP_MINIMAL_20260903_END */ /* UX_CHOICE_SUMMARY_BOX_20260903_START */ /* ========================================================== DESKTOP ========================================================== */ @media (min-width: 1280px) { /* * Jeden biały panel zamiast dawnego dużego hero. */ .result-choice-summary-box { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 12px 0 34px; padding: 20px 22px; box-sizing: border-box; background: #ffffff; border: 1px solid #dce5e9; border-radius: 22px; box-shadow: 0 10px 30px rgba( 26, 43, 54, .06 ); } .result-choice-summary-box__eyebrow { margin: 0; color: #159b63; font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: .10em; text-transform: uppercase; } /* * SYSTEM + KOMUNIKACJA + CTA */ .result-choice-summary-box .result-overview__quick-facts { display: flex !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important; gap: 12px !important; flex-wrap: wrap; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* * Dwa małe białe boxy. */ .result-choice-summary-box .result-choice-logo { display: flex !important; flex: 0 0 150px !important; width: 150px !important; min-width: 150px !important; max-width: 150px !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; margin: 0 !important; padding: 11px 13px !important; box-sizing: border-box; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 7px !important; background: #ffffff !important; border: 1px solid #dce5e9 !important; border-radius: 14px !important; box-shadow: 0 2px 8px rgba( 26, 43, 54, .035 ) !important; } /* * Przywracamy etykiety SYSTEM / KOMUNIKACJA. */ .result-choice-summary-box .result-choice-logo small { display: block !important; margin: 0 !important; color: #56616a !important; font-size: 8px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: .09em !important; text-transform: uppercase !important; } /* * Sam symbol systemu/protokołu. */ .result-choice-summary-box .result-choice-logo__asset { display: flex !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: flex-start !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .result-choice-summary-box .result-choice-logo__asset img, .result-choice-summary-box .result-choice-logo__asset svg { display: block !important; width: auto !important; height: 32px !important; max-width: 84px !important; max-height: 32px !important; margin: 0 !important; object-fit: contain !important; object-position: left center !important; } /* * Zobacz zestaw w tym samym rzędzie. */ .result-choice-summary-box .result-overview__actions { display: flex !important; margin: 0 !important; padding: 0 !important; align-items: stretch !important; } .result-choice-summary-box .result-overview__actions a, .result-choice-summary-box .result-overview__actions button { min-height: 76px !important; margin: 0 !important; padding: 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ========================================================== MOBILE / TABLET ========================================================== */ /* * Mobile pozostaje w dotychczasowym prostym flow. * Wrapper wizualnie nie tworzy dodatkowej karty. */ @media (max-width: 1279px) { .result-choice-summary-box { display: contents; } .result-choice-summary-box__eyebrow { display: none; } } /* UX_CHOICE_SUMMARY_BOX_20260903_END */ /* UX_CLEAN_SIDEBAR_SUMMARY_20260903_START */ /* ========================================================== STICKY SUMMARY ========================================================== */ /* * PODSUMOWANIE * * Ma wyglądać jak normalny mocny nagłówek sekcji, * a nie mały techniczny eyebrow. */ .result-sticky-checkout__heading span:first-child, .result-sticky-checkout__heading .result-sticky-checkout__eyebrow { display: block !important; margin: 0 !important; color: #202936 !important; font-size: 19px !important; font-weight: 850 !important; line-height: 1.12 !important; letter-spacing: -.025em !important; text-transform: none !important; } /* * Usuń z widoku status dostępności. * * Element zostaje w DOM, żeby nie dotykać logiki. */ .result-sticky-checkout .result-sticky-checkout__availability, .result-sticky-checkout [data-sticky-availability], .result-sticky-checkout .result-availability { display: none !important; } /* * Usuń "5 szt. w zestawie". * * JS nadal może używać tego node'a do obliczeń. */ .result-sticky-checkout .result-sticky-checkout__meta { display: none !important; } /* ========================================================== OPTIONAL CONTROLLER WINDOW ========================================================== */ /* * Usuń: * "Opcjonalna centrala dla Twojego zestawu." */ .result-integration--sidebar .result-integration__heading h2 + p { display: none !important; } /* * Po usunięciu opisu zmniejszamy trochę dół nagłówka. */ .result-integration--sidebar .result-integration__heading { margin-bottom: 14px !important; padding-bottom: 12px !important; } /* * Tytuł centrali zachowujemy czarny i mocny. */ .result-integration--sidebar .result-integration__heading h2 { color: #202936 !important; font-weight: 850 !important; } /* ========================================================== MOBILE / TABLET ========================================================== */ /* * Dostępność i licznik zestawu również są zbędne * na mniejszych ekranach. * * Nie zmieniamy natomiast układu Homey/FIBARO. */ @media (max-width: 1279px) { .result-sticky-checkout .result-sticky-checkout__meta, .result-sticky-checkout .result-sticky-checkout__availability, .result-sticky-checkout [data-sticky-availability], .result-sticky-checkout .result-availability { display: none !important; } } /* UX_CLEAN_SIDEBAR_SUMMARY_20260903_END */ /* === STICKY SUMMARY TITLE TYPOGRAPHY START === */ /* === STICKY SUMMARY TITLE TYPOGRAPHY END === */ /* Summary typography follows the integration heading at each layout breakpoint. */ .result-sticky-checkout .ux-summary-title-match-controller { display: block !important; margin: 0 0 5px !important; padding: 0 !important; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: clamp(27px, 3vw, 36px) !important; font-weight: 700 !important; font-style: normal !important; line-height: 1.12 !important; letter-spacing: -0.035em !important; color: rgb(29, 39, 51) !important; text-transform: none !important; } @media (min-width: 1280px) { .result-sticky-checkout .ux-summary-title-match-controller { font-size: 18px !important; font-weight: 850 !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; color: #202936 !important; } } /* UX_CHOICE_SUMMARY_HEADING_START */ .ux-choice-summary-heading { margin: 6px 0 18px 0 !important; padding: 0 !important; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 27px !important; line-height: 30.24px !important; font-weight: 700 !important; letter-spacing: -0.945px !important; color: rgb(29, 39, 51) !important; text-transform: none !important; } @media (max-width: 767px) { .ux-choice-summary-heading { font-size: 23px !important; line-height: 26px !important; letter-spacing: -0.6px !important; margin-bottom: 14px !important; } } /* UX_CHOICE_SUMMARY_HEADING_END */ /* UX_TOP_CHOICE_BOXES_REFRESH_START */ /* ========================================================== WYBRANE PARAMETRY - COMPACT FINAL ========================================================== */ @media (min-width: 768px) { .result-choice-summary-box .ux-choice-summary-heading { margin-bottom: 24px !important; } /* Jeden rząd: 3 parametry + CTA */ .result-choice-summary-box .result-overview__quick-facts { display: grid !important; grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(180px, 1fr) 165px !important; gap: 14px !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Trzy karty */ .result-choice-summary-box .result-overview__quick-facts > *:not(.result-overview__actions) { box-sizing: border-box !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 94px !important; min-height: 94px !important; max-height: 94px !important; margin: 0 !important; padding: 14px 16px !important; background: #ffffff !important; border: 1px solid #d4dfe7 !important; border-radius: 16px !important; box-shadow: 0 3px 10px rgba(29, 39, 51, .035) !important; overflow: hidden !important; } /* SYSTEM / KOMUNIKACJA */ .result-choice-summary-box .result-choice-logo { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; column-gap: 12px !important; row-gap: 8px !important; align-items: center !important; } /* mały label */ .result-choice-summary-box .result-overview__quick-facts small { grid-column: 1 / -1 !important; display: block !important; margin: 0 !important; color: #64707c !important; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 10px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } /* Bez boxa wokół ikony */ .result-choice-summary-box .result-choice-logo__asset { grid-column: 1 !important; grid-row: 2 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; max-width: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .result-choice-summary-box .result-choice-logo__asset img, .result-choice-summary-box .result-choice-logo__asset svg, .result-choice-summary-box .result-choice-logo .smart-home-icon { display: block !important; width: auto !important; height: 40px !important; max-width: 42px !important; max-height: 40px !important; object-fit: contain !important; } /* Google Home / Zigbee */ .result-choice-summary-box .result-choice-logo__name { grid-column: 2 !important; grid-row: 2 !important; display: block !important; align-self: center !important; margin: 0 !important; color: rgb(29, 39, 51) !important; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 15px !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -.025em !important; text-transform: none !important; } /* DODATKOWO */ .result-choice-summary-box .result-overview__quick-facts > *:not(.result-overview__actions):not(.result-choice-logo) { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 11px !important; } .result-choice-summary-box .result-overview__quick-facts > *:not(.result-overview__actions):not(.result-choice-logo) strong, .result-choice-summary-box .result-overview__quick-facts > *:not(.result-overview__actions):not(.result-choice-logo) p, .result-choice-summary-box .result-overview__quick-facts > *:not(.result-overview__actions):not(.result-choice-logo) span { margin: 0 !important; color: rgb(29, 39, 51) !important; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.02em !important; } /* CTA w tym samym rzędzie i tej samej wysokości */ .result-choice-summary-box .result-overview__actions { display: flex !important; width: 165px !important; min-width: 165px !important; height: 94px !important; margin: 0 !important; padding: 0 !important; align-items: stretch !important; } .result-choice-summary-box .result-overview__actions a, .result-choice-summary-box .result-overview__actions button { box-sizing: border-box !important; display: flex !important; width: 100% !important; height: 94px !important; min-height: 94px !important; margin: 0 !important; padding: 0 20px !important; align-items: center !important; justify-content: center !important; border-radius: 16px !important; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 15px !important; font-weight: 700 !important; white-space: nowrap !important; box-shadow: 0 10px 24px rgba(45, 146, 198, .14) !important; } } /* Przy węższym ekranie mogą być 2 kolumny. Nie pozwalamy CTA samotnie spaść pod trzy karty. */ @media (min-width: 768px) and (max-width: 1040px) { .result-choice-summary-box .result-overview__quick-facts { grid-template-columns: 1fr 1fr !important; } .result-choice-summary-box .result-overview__actions { width: 100% !important; } } /* Mobile pozostaje bez tego desktopowego redesignu. */ @media (max-width: 767px) { .result-choice-summary-box .result-choice-logo__name { display: none !important; } } /* UX_TOP_CHOICE_BOXES_REFRESH_END */ /* UX_CHOICE_FORCE_SINGLE_ROW_20260904_START */ /* * WYBRANE PARAMETRY ZESTAWU * * Desktop: * SYSTEM | KOMUNIKACJA | DODATKOWO | ZOBACZ ZESTAW * * Ten blok celowo wygrywa ze starszym breakpointem, * który przy <=1040 px przerzucał CTA do kolejnego wiersza. */ @media (min-width: 900px) { .result-choice-summary-box .result-overview__quick-facts { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 14px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* * SYSTEM * KOMUNIKACJA * DODATKOWO */ .result-choice-summary-box .result-overview__quick-facts > *:not(.result-overview__actions) { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 118px !important; min-height: 118px !important; max-height: 118px !important; margin: 0 !important; box-sizing: border-box !important; } /* * CTA * * Nie może dostać width:100% * ani flex-basis:100% ze starszych breakpointów. */ .result-choice-summary-box .result-overview__quick-facts > .result-overview__actions { flex: 0 0 170px !important; width: 170px !important; min-width: 170px !important; max-width: 170px !important; height: 118px !important; min-height: 118px !important; max-height: 118px !important; margin: 0 !important; padding: 0 !important; align-self: stretch !important; box-sizing: border-box !important; } .result-choice-summary-box .result-overview__quick-facts > .result-overview__actions a, .result-choice-summary-box .result-overview__quick-facts > .result-overview__actions button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 118px !important; max-height: 118px !important; margin: 0 !important; box-sizing: border-box !important; white-space: nowrap !important; } } /* * Dopiero na naprawdę węższym ekranie * pozwalamy elementom przejść do kolejnego wiersza. */ @media (min-width: 768px) and (max-width: 899px) { .result-choice-summary-box .result-overview__quick-facts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; } .result-choice-summary-box .result-overview__actions { width: 100% !important; min-width: 0 !important; } } /* UX_CHOICE_FORCE_SINGLE_ROW_20260904_END */ /* UX_CHOICE_DYNAMIC_LABELS_20260904_START */ /* * SYSTEM / KOMUNIKACJA * * LABEL * [ikona] Nazwa */ @media (min-width: 768px) { .result-choice-summary-box .result-choice-logo { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; column-gap: 14px !important; row-gap: 10px !important; align-items: center !important; } .result-choice-summary-box .result-choice-logo small { grid-column: 1 / -1 !important; grid-row: 1 !important; } .result-choice-summary-box .result-choice-logo__asset { grid-column: 1 !important; grid-row: 2 !important; align-self: center !important; justify-self: start !important; width: 52px !important; min-width: 52px !important; max-width: 52px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .result-choice-summary-box .result-choice-logo__asset img, .result-choice-summary-box .result-choice-logo__asset svg { display: block !important; width: auto !important; height: 48px !important; max-width: 52px !important; max-height: 48px !important; object-fit: contain !important; } /* * Google Home / Zigbee / Alexa / Z-Wave itd. */ .result-choice-summary-box .result-choice-logo__name { grid-column: 2 !important; grid-row: 2 !important; display: block !important; visibility: visible !important; opacity: 1 !important; align-self: center !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: rgb(29, 39, 51) !important; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 16px !important; line-height: 1.18 !important; font-weight: 700 !important; letter-spacing: -0.025em !important; text-transform: none !important; white-space: normal !important; } } /* * Dopiero na mobile chowamy nazwę, * żeby nie ściskać kart. */ @media (max-width: 767px) { .result-choice-summary-box .result-choice-logo__name { display: none !important; } } /* UX_CHOICE_DYNAMIC_LABELS_20260904_END */ /* UX_CHOICE_ICON_TEXT_GAP_ONLY_START */ /* * JEDYNA ZMIANA: * odstęp pomiędzy ikoną a nazwą, np. * Google Home / Zigbee. */ @media (min-width: 768px) { .result-choice-summary-box .result-choice-logo { column-gap: 16px !important; } .result-choice-summary-box .result-choice-logo__name { margin-left: 0 !important; } } /* UX_CHOICE_ICON_TEXT_GAP_ONLY_END */ /* UX_RESPONSIVE_CHOICES_20260904_START * Keep the icon slot independent of the text's flex sizing. Asset files stay intact. */ .project-wizard .option-card .option-illustration { flex: 0 0 52px !important; width: 52px !important; min-width: 52px !important; max-width: 52px !important; height: 52px !important; min-height: 52px !important; overflow: visible !important; display: flex !important; align-items: center !important; justify-content: center !important; } .project-wizard .option-card .option-illustration img, .project-wizard .option-card .option-illustration svg { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; object-fit: contain !important; object-position: center !important; transform: none !important; } .project-wizard .option-copy { min-width: 0; overflow-wrap: anywhere; } /* The label is nested inside __asset, not a sibling grid cell. */ #project-result .result-choice-summary-box { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; margin: 0 0 28px; padding: 20px; background: #fff; border: 1px solid var(--bm-border); border-radius: 20px; box-sizing: border-box; } #project-result .ux-choice-summary-heading { margin: 0 !important; } #project-result .result-overview__quick-facts { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #project-result .result-overview__quick-facts > .result-choice-logo { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; gap: 10px !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 96px !important; max-height: none !important; margin: 0 !important; padding: 14px !important; border: 1px solid var(--bm-border) !important; border-radius: 12px !important; background: #fff !important; } #project-result .result-choice-logo small { display: block !important; margin: 0 !important; font-size: 10px !important; line-height: 1.3 !important; } #project-result .result-choice-logo__asset { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 40px !important; max-height: none !important; overflow: visible !important; } #project-result .result-choice-logo__asset img, #project-result .result-choice-logo__asset svg { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; object-fit: contain !important; object-position: center !important; } #project-result .result-choice-logo__name, #project-result .result-choice-logo strong { display: block !important; flex: 1 1 auto; min-width: 0; margin: 0 !important; font-size: 15px !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: anywhere; } #project-result .result-choice-logo--secondary { grid-column: 1 / -1; } #project-result .result-overview__quick-facts > .result-overview__actions { display: flex !important; grid-column: 1 / -1; justify-content: flex-end !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; } #project-result .result-overview__actions .button { flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 46px !important; max-height: none !important; padding: 12px 24px !important; margin: 0 !important; white-space: normal !important; } .page-shell:has(> #project-result) { padding-top: 24px; } @media (min-width: 1280px) { #project-result .result-sidebar-stack, #project-result > .result-sticky-checkout { top: 100px !important; max-height: calc(100dvh - 116px) !important; } } @media (max-width: 600px) { #project-result .result-choice-summary-box { padding: 16px; } #project-result .result-overview__quick-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #project-result .result-choice-logo__asset { flex-wrap: wrap; } #project-result .result-overview__actions .button { width: 100% !important; } } /* UX_RESPONSIVE_CHOICES_20260904_END */ /* Checkout label uses the same typography as the optional integration eyebrow. */ .result-sticky-checkout .result-sticky-checkout__heading { display: block; } .result-sticky-checkout .result-sticky-checkout__eyebrow-label { margin: 0 0 5px; color: #159b63 !important; font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: .09em; text-transform: uppercase; } .result-sticky-checkout .result-sticky-checkout__title-row { display: flex !important; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; } .result-sticky-checkout__title-row .ux-summary-title-match-controller { margin-bottom: 0 !important; } .result-sticky-checkout__title-row [data-cart-total] { margin-left: auto; text-align: right; } /* Readable labels and consistent protocol/ecosystem tiles on result cards. */ #project-result .result-choice-logo small { font-size: 14px !important; line-height: 1.35 !important; } #project-result .result-sticky-checkout__eyebrow-label, #project-result .result-choice-summary-box__eyebrow, #project-result .result-integration__heading .eyebrow, #project-result .result-sticky-checkout__selection-label { font-size: 13px !important; line-height: 1.35 !important; } #project-result .result-product-card__category, #project-result .product-connectivity > div > small { font-size: 13px !important; line-height: 1.4 !important; } #project-result .result-product-card__meta { font-size: 15px !important; line-height: 1.4 !important; } #project-result .stock-availability__label { font-size: 14px !important; line-height: 1.4 !important; } #project-result .card-alternatives > summary { font-size: 15px !important; line-height: 1.4 !important; } #project-result .result-product-card__product-link { font-size: 14px !important; line-height: 1.4 !important; min-height: 44px; max-width: 100%; } #project-result .product-connectivity > div { min-width: 0; max-width: 100%; } #project-result .product-connectivity .connectivity-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } #project-result .product-connectivity .connectivity-chip--asset { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 1 150px !important; width: 150px !important; min-width: 0 !important; max-width: 100% !important; height: 48px !important; min-height: 48px !important; max-height: none !important; padding: 4px 8px !important; background: #fff !important; border: 1px solid #d7e0e4 !important; border-radius: 10px !important; box-sizing: border-box; } #project-result .product-connectivity .connectivity-chip--asset img { display: block !important; width: 132px !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 38px !important; object-fit: contain !important; } /* UX_MOBILE_CART_BAR_20260921_START */ .result-restart-footer { display: flex; justify-content: center; margin: 30px 0 10px; } .result-restart-footer .result-restart-footer__link { width: auto; min-height: 36px; margin: 0; padding: 8px 18px; border-radius: 10px; font-size: 13px; } @media (max-width: 600px) { #project-result .result-sticky-checkout { left: 7px !important; right: 7px !important; bottom: 7px !important; padding: 8px 10px !important; border-radius: 14px !important; } #project-result .result-sticky-checkout__heading { padding-bottom: 5px !important; } #project-result .result-sticky-checkout__eyebrow-label { margin: 0 0 2px !important; font-size: 9px !important; line-height: 1 !important; } #project-result .result-sticky-checkout__title-row { flex-wrap: nowrap !important; gap: 8px !important; } #project-result .result-sticky-checkout .ux-summary-title-match-controller { font-size: 19px !important; line-height: 1.05 !important; } #project-result .result-sticky-checkout__title-row [data-cart-total] { font-size: 18px !important; line-height: 1 !important; } #project-result .result-sticky-checkout__selection { gap: 0 !important; margin: 5px 0 6px !important; } #project-result .result-sticky-checkout__selection-label { display: none !important; } #project-result .result-sticky-selected-products { flex-wrap: nowrap !important; gap: 5px !important; min-height: 34px !important; max-height: 34px !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } #project-result .result-sticky-selected-products::-webkit-scrollbar { display: none; } #project-result .result-sticky-selected-products .result-sticky-selection__item { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; flex-basis: 34px !important; border-radius: 8px !important; } #project-result .result-sticky-selected-products .result-sticky-selection__item img { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } #project-result .result-sticky-selection__badge { min-width: 15px; height: 15px; padding: 0 3px; font-size: 7px; } #project-result .result-sticky-checkout__cart { min-height: 36px !important; padding: 7px 10px !important; border-radius: 10px !important; font-size: 12.5px !important; line-height: 1.15 !important; } #project-result .result-sticky-checkout__warning, #project-result .result-sticky-checkout__status { margin-top: 4px !important; padding-top: 4px !important; font-size: 9px !important; } #project-result.project-result { padding-bottom: 175px !important; } #project-result .result-restart-footer { margin: 24px 0 6px; } #project-result .result-restart-footer__link { min-height: 32px; padding: 6px 14px; font-size: 12px; } } /* UX_MOBILE_CART_BAR_20260921_END */