/* id="real-product-page-centering-fix" */ #devicePage .device-filter-chip, #devicePage .device-filter-chip:hover, #devicePage .device-filter-chip:focus, #devicePage .device-filter-chip:focus-visible, #devicePage .device-filter-chip:active { outline: none !important; outline-width: 0 !important; outline-offset: 0 !important; -webkit-tap-highlight-color: transparent !important; -webkit-focus-ring-color: transparent !important; } #devicePage .device-filter-chip::-moz-focus-inner { border: 0 !important; } #devicePage .device-filter-chip.active, #devicePage .device-filter-chip.active:hover, #devicePage .device-filter-chip.active:focus, #devicePage .device-filter-chip.active:focus-visible, #devicePage .device-filter-chip.active:active { background: #0b0c0e !important; background-image: none !important; color: #ffffff !important; border: 1px solid #0b0c0e !important; outline: none !important; box-shadow: 0 13px 28px rgba(11, 12, 14, 0.15) !important; -webkit-box-shadow: 0 13px 28px rgba(11, 12, 14, 0.15) !important; text-shadow: none !important; transform: translateY(0) scale(1) !important; } #devicePage .device-filter-chip.active::before, #devicePage .device-filter-chip.active::after { display: none !important; opacity: 0 !important; box-shadow: none !important; border: none !important; } #devicePage .device-store-grid.real-soft-center-active { animation: realProductGridSoftSettle 1.35s cubic-bezier(0.16, 1, 0.3, 1) both !important; transform-origin: center top !important; } @keyframes realProductGridSoftSettle { 0% { opacity: 0.96; transform: translateY(12px) scale(0.995); filter: blur(7px); } 55% { opacity: 1; filter: blur(1.2px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* id="product-page-initial-centered-no-flicker" */ body.device-route-mode #devicePage .device-filter-chip, body.device-route-mode #devicePage .device-filter-chip:hover, body.device-route-mode #devicePage .device-filter-chip:focus, body.device-route-mode #devicePage .device-filter-chip:focus-visible, body.device-route-mode #devicePage .device-filter-chip:active { outline: 0 !important; outline-offset: 0 !important; -webkit-tap-highlight-color: transparent !important; -webkit-focus-ring-color: transparent !important; } body.device-route-mode #devicePage .device-filter-chip.active, body.device-route-mode #devicePage .device-filter-chip.active:hover, body.device-route-mode #devicePage .device-filter-chip.active:focus, body.device-route-mode #devicePage .device-filter-chip.active:focus-visible, body.device-route-mode #devicePage .device-filter-chip.active:active { background: #0b0c0e !important; background-image: none !important; color: #ffffff !important; border-color: #0b0c0e !important; outline: 0 !important; box-shadow: 0 11px 24px rgba(11, 12, 14, 0.14) !important; -webkit-box-shadow: 0 11px 24px rgba(11, 12, 14, 0.14) !important; text-shadow: none !important; transform: none !important; } body.device-route-mode #devicePage .device-filter-chip.active::before, body.device-route-mode #devicePage .device-filter-chip.active::after { content: none !important; display: none !important; opacity: 0 !important; box-shadow: none !important; border: 0 !important; } body.device-route-mode .device-page-shell, body.device-route-mode #devicePage.active .device-filter-row, body.device-route-mode #devicePage.active .device-store-grid, body.device-route-mode #devicePage.active .store-product-card, body.device-route-mode #devicePage .device-store-grid.is-changing, body.device-route-mode #devicePage .device-store-grid.is-leaving, body.device-route-mode #devicePage .device-store-grid.is-soft-centered, body.device-route-mode #devicePage .device-store-grid.product-open-soft-settle, body.device-route-mode #devicePage .device-store-grid.real-soft-center-active { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } body.device-route-mode #devicePage .store-product-card { animation: none !important; opacity: 1 !important; filter: none !important; } body.device-route-mode #devicePage .device-store-grid { transition: none !important; } body.device-route-mode #devicePage .store-product-card:hover, body.device-route-mode #devicePage .store-product-card.is-selected { transition: background 0.42s ease, border-color 0.42s ease, box-shadow 0.42s ease, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.device-route-mode #devicePage .device-page-shell { padding-top: 8px !important; } body.device-route-mode #devicePage .device-page-topbar { min-height: 46px !important; padding: 6px 0 4px !important; } body.device-route-mode #devicePage .device-page-hero { padding-top: 6px !important; padding-bottom: 6px !important; } body.device-route-mode #devicePage .device-page-title { font-size: clamp(33px, 4.4vw, 50px) !important; } body.device-route-mode #devicePage .device-page-subtitle { margin: 7px 0 7px !important; } body.device-route-mode #devicePage .device-filter-row { margin-bottom: 8px !important; } /* final mobile contact optimization: aligned phone card + minimal phone options */ .phone-choice-head, .phone-choice-footnote { display: none !important; } .phone-choice-overlay.active { background: rgba(var(--dark-rgb), 0.46) !important; backdrop-filter: blur(26px) saturate(1.12) !important; -webkit-backdrop-filter: blur(26px) saturate(1.12) !important; } .phone-choice-sheet { width: min(326px, calc(100vw - 42px)) !important; padding: 54px 14px 14px !important; border-radius: 30px !important; background: radial-gradient(circle at 18% 0%, rgba(255,255,255,0.98), transparent 46%), linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247,247,245,0.88)) !important; border: 1px solid rgba(255,255,255,0.82) !important; box-shadow: 0 42px 118px rgba(0,0,0,0.32), 0 16px 42px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -1px 0 rgba(var(--dark-rgb),0.030) !important; } .phone-choice-close { top: 12px !important; right: 12px !important; width: 34px !important; height: 34px !important; background: rgba(255,255,255,0.66) !important; border-color: rgba(var(--dark-rgb), 0.060) !important; color: rgba(var(--dark-rgb), 0.42) !important; box-shadow: 0 10px 24px rgba(var(--dark-rgb), 0.060), inset 0 1px 0 rgba(255,255,255,0.88) !important; } .phone-choice-actions { display: grid !important; gap: 9px !important; padding: 0 !important; } .phone-choice-action, .phone-choice-action.copied { min-height: 54px !important; border-radius: 999px !important; border: 1px solid rgba(var(--dark-rgb), 0.064) !important; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.98), transparent 58%), linear-gradient(180deg, rgba(255,255,255,0.82), rgba(247,247,245,0.74)) !important; color: rgba(var(--dark-rgb), 0.84) !important; font-size: 14px !important; font-weight: 920 !important; letter-spacing: -0.012em !important; box-shadow: 0 12px 28px rgba(var(--dark-rgb), 0.054), inset 0 1px 0 rgba(255,255,255,0.94), inset 0 -1px 0 rgba(var(--dark-rgb), 0.018) !important; } .phone-choice-action:hover, .phone-choice-action:focus-visible { background: var(--dark) !important; border-color: var(--dark) !important; color: #ffffff !important; transform: translateY(-1.5px) scale(1.002) !important; box-shadow: 0 20px 46px rgba(var(--dark-rgb), 0.18) !important; } @media (max-width: 620px) { .contact-modal { max-width: min(390px, calc(100vw - 28px)) !important; } .contact-card-list { gap: 12px !important; } .contact-card-item, .phone-contact-card { min-height: 92px !important; border-radius: 28px !important; } .contact-card-item:not(.phone-contact-card) { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) !important; align-items: center !important; gap: 0 !important; padding: 14px !important; } .contact-card-item:not(.phone-contact-card) > .contact-icon { grid-column: 1 !important; } .contact-card-item:not(.phone-contact-card) > div:not(.contact-icon) { grid-column: 2 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; } .phone-main { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) !important; align-items: center !important; gap: 0 !important; padding: 14px !important; width: 100% !important; } .phone-main > .contact-icon { grid-column: 1 !important; } .phone-content { grid-column: 2 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; text-align: left !important; } .contact-card-item .contact-icon, .phone-contact-card .contact-icon { width: 58px !important; height: 58px !important; min-width: 58px !important; border-radius: 21px !important; } .phone-contact-card .contact-label, .contact-card-item .contact-label { display: block !important; width: 100% !important; text-align: left !important; font-size: 11px !important; line-height: 1 !important; letter-spacing: 0.13em !important; margin: 0 0 6px !important; } .contact-value, .phone-number-button { display: block !important; width: auto !important; max-width: 100% !important; text-align: left !important; justify-content: flex-start !important; align-items: flex-start !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: rgba(var(--dark-rgb), 0.94) !important; font-size: 17px !important; line-height: 1.18 !important; font-weight: 900 !important; letter-spacing: -0.028em !important; transform: none !important; } .phone-number-button:hover { transform: none !important; opacity: 0.86 !important; } .phone-choice-sheet { width: min(320px, calc(100vw - 44px)) !important; padding: 52px 13px 13px !important; border-radius: 29px !important; } .phone-choice-action, .phone-choice-action.copied { min-height: 52px !important; font-size: 13.5px !important; } } @media (max-width: 390px) { .contact-value, .phone-number-button { font-size: 16px !important; } .contact-card-item:not(.phone-contact-card), .phone-main { grid-template-columns: 68px minmax(0, 1fr) !important; } .contact-card-item .contact-icon, .phone-contact-card .contact-icon { width: 54px !important; height: 54px !important; min-width: 54px !important; } } /* FINAL FIX: product photos are centered and stable, no hover-flying/crooked crop */ .store-product-photo.has-product-image, body.device-route-mode .store-product-photo.has-product-image { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: radial-gradient(circle at 50% 8%, rgba(255,255,255,1), transparent 50%), linear-gradient(145deg, #ffffff 0%, #f3f4f5 100%) !important; } .store-product-photo.has-product-image::before, body.device-route-mode .store-product-photo.has-product-image::before { display: none !important; content: none !important; } .store-product-photo.has-product-image .store-product-image, body.device-route-mode .store-product-photo.has-product-image .store-product-image, .store-product-card[data-product-id] .store-product-image, body.device-route-mode .store-product-card[data-product-id] .store-product-image { position: absolute !important; inset: auto !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; z-index: 1 !important; width: calc(100% - 18px) !important; height: calc(100% - 18px) !important; max-width: calc(100% - 18px) !important; max-height: calc(100% - 18px) !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: block !important; object-fit: contain !important; object-position: center center !important; transform-origin: center center !important; transform: translate3d(-50%, -50%, 0) scale(1) !important; opacity: 0 !important; filter: none !important; mix-blend-mode: normal !important; pointer-events: none !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; will-change: opacity !important; transition: opacity 0.42s ease !important; } .store-product-photo.has-product-image .store-product-image.is-active, body.device-route-mode .store-product-photo.has-product-image .store-product-image.is-active, .store-product-card[data-product-id] .store-product-image.is-active, body.device-route-mode .store-product-card[data-product-id] .store-product-image.is-active { opacity: 1 !important; transform: translate3d(-50%, -50%, 0) scale(1) !important; filter: none !important; mix-blend-mode: normal !important; } .store-product-card:hover .store-product-image, .store-product-card:focus-within .store-product-image, .store-product-card:hover .store-product-image.primary.has-secondary, .store-product-card:focus-within .store-product-image.primary.has-secondary, .store-product-card:hover .store-product-image.secondary, .store-product-card:focus-within .store-product-image.secondary, body.device-route-mode .store-product-card:hover .store-product-image, body.device-route-mode .store-product-card:focus-within .store-product-image, body.device-route-mode .store-product-card:hover .store-product-image.primary.has-secondary, body.device-route-mode .store-product-card:focus-within .store-product-image.primary.has-secondary, body.device-route-mode .store-product-card:hover .store-product-image.secondary, body.device-route-mode .store-product-card:focus-within .store-product-image.secondary { transform: translate3d(-50%, -50%, 0) scale(1) !important; filter: none !important; mix-blend-mode: normal !important; } .store-product-card:hover .store-product-image.is-active, .store-product-card:focus-within .store-product-image.is-active, body.device-route-mode .store-product-card:hover .store-product-image.is-active, body.device-route-mode .store-product-card:focus-within .store-product-image.is-active { opacity: 1 !important; transform: translate3d(-50%, -50%, 0) scale(1) !important; filter: none !important; mix-blend-mode: normal !important; } .store-product-photo.has-product-image .store-product-device-icon, body.device-route-mode .store-product-photo.has-product-image .store-product-device-icon { opacity: 0 !important; transform: scale(0.92) !important; } .store-product-photo.has-product-image.image-error .store-product-device-icon, body.device-route-mode .store-product-photo.has-product-image.image-error .store-product-device-icon { opacity: 1 !important; transform: scale(1) !important; } .store-product-photo.has-product-image.image-error .store-product-image, body.device-route-mode .store-product-photo.has-product-image.image-error .store-product-image { display: none !important; } .store-product-carousel-button { z-index: 9 !important; } @media (max-width: 640px) { .store-product-photo.has-product-image .store-product-image, body.device-route-mode .store-product-photo.has-product-image .store-product-image, .store-product-card[data-product-id] .store-product-image, body.device-route-mode .store-product-card[data-product-id] .store-product-image { width: calc(100% - 12px) !important; height: calc(100% - 12px) !important; max-width: calc(100% - 12px) !important; max-height: calc(100% - 12px) !important; } } /* Responsive refinements */ /* final mobile quick-estimate polish: smooth form reveal without jumpy height/scroll */ #contact, #estimateBox, #estimateFormShell, #estimateFormPanel, #estimateFormPanel .estimate-form-panel-inner, #estimateForm { overflow-anchor: none; } @media (max-width: 760px) { .estimate-form-shell { scroll-margin-top: 86px !important; } .estimate-form-panel { display: block !important; grid-template-rows: none !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; transform: translate3d(0, 24px, 0) scale(0.982) !important; filter: blur(14px) !important; transform-origin: top center !important; will-change: max-height, opacity, transform, filter !important; transition: max-height 1.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.84s ease, transform 1.18s cubic-bezier(0.16, 1, 0.3, 1), filter 0.96s ease !important; } .estimate-form-panel.open { max-height: 1480px !important; opacity: 1 !important; pointer-events: auto !important; transform: translate3d(0, 0, 0) scale(1) !important; filter: blur(0) !important; } .estimate-form-panel-inner { display: block !important; min-height: 0 !important; overflow: hidden !important; border-radius: 30px !important; } .estimate-form-panel.open .estimate-form-panel-inner { overflow: visible !important; } .estimate-form-panel.open .estimate-form { transform: translate3d(0, 0, 0) scale(1) !important; } .estimate-form-panel.open .estimate-form:hover, .estimate-form-panel.open .estimate-form:focus-within { transform: translate3d(0, -1px, 0) scale(1.001) !important; } .estimate-form-panel.open .form-field, .estimate-form-panel.open .form-submit, .estimate-form-panel.open .form-note { animation: mobileEstimateFieldIn 0.96s cubic-bezier(0.16, 1, 0.3, 1) both !important; } .estimate-form-panel.open .form-field:nth-child(1) { animation-delay: 0.08s !important; } .estimate-form-panel.open .form-field:nth-child(2) { animation-delay: 0.11s !important; } .estimate-form-panel.open .form-field:nth-child(3) { animation-delay: 0.14s !important; } .estimate-form-panel.open .form-field:nth-child(4) { animation-delay: 0.17s !important; } .estimate-form-panel.open .form-field:nth-child(5) { animation-delay: 0.20s !important; } .estimate-form-panel.open .form-field:nth-child(6) { animation-delay: 0.23s !important; } .estimate-form-panel.open .form-field:nth-child(7) { animation-delay: 0.26s !important; } .estimate-form-panel.open .form-submit { animation-delay: 0.31s !important; } .estimate-form-panel.open .form-note { animation-delay: 0.35s !important; } @keyframes mobileEstimateFieldIn { 0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.992); filter: blur(9px); } 72% { opacity: 1; filter: blur(0.7px); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } } body.mobile-estimate-form-opening, body.mobile-estimate-form-opening * { scroll-behavior: auto !important; } } /* final add-device breadcrumb navigation override */ .device-page-topbar, body.device-route-mode .device-page-topbar { position: relative !important; top: auto !important; z-index: 12 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 0 14px !important; background: transparent !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .device-page-back, body.device-route-mode .device-page-back { appearance: none !important; -webkit-appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #111111 !important; opacity: 0.74 !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; cursor: pointer !important; text-decoration: none !important; text-underline-offset: 5px !important; transform: none !important; filter: none !important; transition: opacity 0.26s ease, color 0.26s ease, text-decoration-color 0.26s ease !important; } .device-page-back:hover, .device-page-back:focus-visible, body.device-route-mode .device-page-back:hover, body.device-route-mode .device-page-back:focus-visible { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #111111 !important; opacity: 1 !important; transform: none !important; text-decoration: underline !important; outline: none !important; } .device-page-back:active, body.device-route-mode .device-page-back:active { opacity: 0.62 !important; transform: none !important; background: transparent !important; box-shadow: none !important; } .device-page-hero, body.device-route-mode .device-page-hero { padding-top: 0 !important; margin-top: 0 !important; } @media (max-width: 640px) { .device-page-topbar, body.device-route-mode .device-page-topbar { padding: 0 0 12px !important; } .device-page-back, body.device-route-mode .device-page-back { font-size: 14px !important; font-weight: 700 !important; } } /* final override: full-width centered filter panel + hero-style title reveal */ @keyframes deviceTitleFloatInPremium { 0% { opacity: 0; filter: blur(16px); transform: translateX(-7%) translateY(22px) skewX(-4deg); } 58% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); transform: translateX(0) translateY(0) skewX(0); } } @keyframes deviceSubtitleFloatInPremium { 0% { opacity: 0; filter: blur(10px); transform: translateY(16px); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } } #devicePage.active .device-page-title, body.device-route-mode #devicePage.active .device-page-title, .device-page-title.device-title-reveal-run { animation: deviceTitleFloatInPremium 1.14s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both !important; will-change: opacity, transform, filter !important; transform-origin: left center !important; } #devicePage.active .device-page-subtitle, body.device-route-mode #devicePage.active .device-page-subtitle, .device-page-subtitle.device-subtitle-reveal-run { animation: deviceSubtitleFloatInPremium 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both !important; will-change: opacity, transform, filter !important; } .device-page-shell, body.device-route-mode .device-page-shell { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; } .device-page-hero, body.device-route-mode .device-page-hero { padding-bottom: 18px !important; } .device-filter-row, body.device-route-mode .device-filter-row { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 10px !important; margin-bottom: 18px !important; padding: 16px max(22px, calc((100vw - 1180px) / 2 + 22px)) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: clamp(10px, 1.2vw, 16px) !important; overflow-x: auto !important; background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.96), transparent 40%), radial-gradient(circle at 78% 100%, rgba(255, 255, 255, 0.70), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(247, 247, 245, 0.68)) !important; border-top: 1px solid rgba(var(--dark-rgb), 0.035) !important; border-bottom: 1px solid rgba(var(--dark-rgb), 0.055) !important; box-shadow: 0 22px 54px rgba(var(--dark-rgb), 0.052), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(var(--dark-rgb), 0.022) !important; backdrop-filter: blur(26px) saturate(1.14) !important; -webkit-backdrop-filter: blur(26px) saturate(1.14) !important; scroll-padding-left: max(22px, calc((100vw - 1180px) / 2 + 22px)) !important; scrollbar-width: none !important; isolation: isolate !important; } .device-filter-row::-webkit-scrollbar, body.device-route-mode .device-filter-row::-webkit-scrollbar { display: none !important; } .device-filter-row::before, body.device-route-mode .device-filter-row::before { content: "" !important; position: absolute !important; left: max(18px, calc((100vw - 1180px) / 2 + 18px)) !important; right: max(18px, calc((100vw - 1180px) / 2 + 18px)) !important; top: 8px !important; bottom: 8px !important; z-index: -1 !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.20)) !important; border: 1px solid rgba(var(--dark-rgb), 0.045) !important; box-shadow: 0 14px 34px rgba(var(--dark-rgb), 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 -1px 0 rgba(var(--dark-rgb), 0.018) !important; pointer-events: none !important; } .device-filter-chip, body.device-route-mode .device-filter-chip { min-width: clamp(74px, 7.2vw, 118px) !important; min-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 19px !important; border-radius: 999px !important; border: 1px solid rgba(var(--dark-rgb), 0.062) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 248, 246, 0.70)) !important; color: rgba(var(--dark-rgb), 0.62) !important; font-size: 14px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: -0.018em !important; text-align: center !important; outline: 0 !important; box-shadow: 0 8px 18px rgba(var(--dark-rgb), 0.032), inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(var(--dark-rgb), 0.016) !important; transform: translateY(0) scale(1) !important; transition: color 0.32s ease, background 0.42s ease, border-color 0.42s ease, box-shadow 0.42s ease, transform 0.54s cubic-bezier(0.16, 1, 0.3, 1) !important; -webkit-tap-highlight-color: transparent !important; } .device-filter-chip:hover, body.device-route-mode .device-filter-chip:hover { color: var(--dark) !important; background: linear-gradient(180deg, #ffffff, rgba(250, 250, 248, 0.92)) !important; border-color: rgba(var(--dark-rgb), 0.11) !important; box-shadow: 0 13px 26px rgba(var(--dark-rgb), 0.064), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(var(--dark-rgb), 0.018) !important; transform: translateY(-1px) scale(1.004) !important; outline: 0 !important; } .device-filter-chip.active, body.device-route-mode .device-filter-chip.active { color: #ffffff !important; background: linear-gradient(180deg, #121316, #07080a) !important; border-color: transparent !important; outline: 0 !important; box-shadow: 0 16px 34px rgba(var(--dark-rgb), 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important; } .device-filter-chip:focus, .device-filter-chip:focus-visible, .device-filter-chip.active:focus, .device-filter-chip.active:focus-visible, body.device-route-mode .device-filter-chip:focus, body.device-route-mode .device-filter-chip:focus-visible, body.device-route-mode .device-filter-chip.active:focus, body.device-route-mode .device-filter-chip.active:focus-visible { outline: none !important; box-shadow: 0 16px 34px rgba(var(--dark-rgb), 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important; } @media (max-width: 760px) { .device-filter-row, body.device-route-mode .device-filter-row { justify-content: flex-start !important; gap: 9px !important; padding: 13px 16px !important; scroll-padding-left: 16px !important; } .device-filter-row::before, body.device-route-mode .device-filter-row::before { left: 12px !important; right: 12px !important; top: 7px !important; bottom: 7px !important; } .device-filter-chip, body.device-route-mode .device-filter-chip { min-width: auto !important; min-height: 39px !important; padding: 11px 16px !important; font-size: 13px !important; flex: 0 0 auto !important; } } /* id="final-storefront-product-page-position-and-title-reveal" */ /* final add-device page composition: open immediately like a compact storefront, no forced scroll */ body.device-route-mode { overflow: auto !important; } body.device-route-mode #devicePage { background: radial-gradient(circle at 75% 8%, rgba(var(--dark-rgb), 0.030), transparent 34%), radial-gradient(circle at 14% 88%, rgba(var(--dark-rgb), 0.022), transparent 36%), var(--bg) !important; overflow-y: auto !important; scroll-behavior: auto !important; } body.device-route-mode #devicePage .device-page-shell { width: 100% !important; max-width: 1480px !important; margin: 0 auto !important; padding: clamp(34px, 4.2vh, 48px) clamp(28px, 4vw, 54px) calc(132px + env(safe-area-inset-bottom)) !important; opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } body.device-route-mode #devicePage .device-page-topbar, body.device-route-mode #devicePage .device-page-hero, body.device-route-mode #devicePage .device-store, body.device-route-mode #devicePage .device-store-grid { width: 100% !important; max-width: 1480px !important; margin-left: auto !important; margin-right: auto !important; } body.device-route-mode #devicePage .device-page-topbar { position: relative !important; top: auto !important; min-height: 22px !important; padding: 0 0 24px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; justify-content: flex-start !important; } body.device-route-mode #devicePage .device-page-back { appearance: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; border-radius: 0 !important; color: rgba(var(--dark-rgb), 0.76) !important; font-size: 15px !important; font-weight: 740 !important; line-height: 1.2 !important; letter-spacing: -0.018em !important; opacity: 0.78 !important; text-decoration: none !important; cursor: pointer !important; transform: none !important; transition: opacity 0.28s ease, color 0.28s ease, text-decoration-color 0.28s ease !important; } body.device-route-mode #devicePage .device-page-back:hover, body.device-route-mode #devicePage .device-page-back:focus-visible { opacity: 1 !important; color: rgba(var(--dark-rgb), 0.96) !important; text-decoration: underline !important; text-underline-offset: 4px !important; outline: none !important; } body.device-route-mode #devicePage .device-page-hero { display: block !important; padding: 0 0 26px !important; margin: 0 !important; } body.device-route-mode #devicePage .device-page-title { margin: 0 !important; max-width: 1240px !important; color: var(--text) !important; font-size: clamp(48px, 5.3vw, 76px) !important; line-height: 0.94 !important; letter-spacing: -0.073em !important; font-weight: 950 !important; overflow: visible !important; transform-origin: left center !important; } body.device-route-mode #devicePage .device-title-line { display: block !important; overflow: hidden !important; padding: 0.035em 0 0.055em !important; } body.device-route-mode #devicePage .device-title-line > span { display: inline-block !important; opacity: 0; filter: blur(16px); transform: translateX(-16%) translateY(22px) skewX(-5deg); animation: deviceHeroLineFromLeftFinal 1.16s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards; will-change: opacity, transform, filter; } body.device-route-mode #devicePage .device-page-title::after { content: ""; position: absolute; left: -4%; top: 52%; width: 108%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--dark-rgb), 0.10), rgba(var(--dark-rgb), 0.24), rgba(var(--dark-rgb), 0.10), transparent); opacity: 0; transform: translateX(-24%) scaleX(0.34); transform-origin: center; animation: deviceHeroScanFinal 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.58s forwards; pointer-events: none; } @keyframes deviceHeroLineFromLeftFinal { 0% { opacity: 0; filter: blur(16px); transform: translateX(-16%) translateY(22px) skewX(-5deg); } 60% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); transform: translateX(0) translateY(0) skewX(0); } } @keyframes deviceHeroScanFinal { 0% { opacity: 0; transform: translateX(-24%) scaleX(0.34); } 30% { opacity: 0.42; } 100% { opacity: 0; transform: translateX(22%) scaleX(1); } } body.device-route-mode #devicePage .device-page-subtitle { max-width: 860px !important; margin: 12px 0 0 !important; padding: 0 !important; color: rgba(var(--dark-rgb), 0.58) !important; font-size: clamp(16px, 1.35vw, 19px) !important; line-height: 1.45 !important; font-weight: 620 !important; letter-spacing: -0.018em !important; opacity: 0; filter: blur(8px); transform: translateY(16px); animation: deviceSubtitleFloatFinal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.62s forwards !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } @keyframes deviceSubtitleFloatFinal { to { opacity: 1; filter: blur(0); transform: translateY(0); } } body.device-route-mode #devicePage .device-filter-row { position: relative !important; top: auto !important; width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 10px !important; margin-bottom: 22px !important; padding: 17px max(24px, calc((100vw - 1480px) / 2 + 24px)) !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: clamp(12px, 1.35vw, 20px) !important; overflow-x: auto !important; scroll-padding-left: max(24px, calc((100vw - 1480px) / 2 + 24px)) !important; background: radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.94), transparent 40%), linear-gradient(180deg, rgba(255,255,255,0.74), rgba(247,247,245,0.64)) !important; border-top: 1px solid rgba(var(--dark-rgb), 0.034) !important; border-bottom: 1px solid rgba(var(--dark-rgb), 0.052) !important; box-shadow: 0 24px 60px rgba(var(--dark-rgb), 0.052), inset 0 1px 0 rgba(255,255,255,0.90), inset 0 -1px 0 rgba(var(--dark-rgb),0.020) !important; backdrop-filter: blur(26px) saturate(1.12) !important; -webkit-backdrop-filter: blur(26px) saturate(1.12) !important; scrollbar-width: none !important; isolation: isolate !important; opacity: 0; transform: translateY(14px); filter: blur(10px); animation: devicePanelRevealFinal 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.76s forwards !important; } body.device-route-mode #devicePage .device-filter-row::-webkit-scrollbar { display: none !important; } body.device-route-mode #devicePage .device-filter-row::before { content: "" !important; position: absolute !important; left: max(18px, calc((100vw - 1480px) / 2 + 18px)) !important; right: max(18px, calc((100vw - 1480px) / 2 + 18px)) !important; top: 8px !important; bottom: 8px !important; z-index: -1 !important; border-radius: 999px !important; border: 1px solid rgba(var(--dark-rgb), 0.042) !important; background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.22)) !important; box-shadow: 0 14px 34px rgba(var(--dark-rgb), 0.034), inset 0 1px 0 rgba(255,255,255,0.86), inset 0 -1px 0 rgba(var(--dark-rgb),0.018) !important; pointer-events: none !important; } @keyframes devicePanelRevealFinal { to { opacity: 1; transform: translateY(0); filter: blur(0); } } body.device-route-mode #devicePage .device-filter-chip { min-width: clamp(96px, 7.2vw, 126px) !important; min-height: 48px !important; padding: 14px 21px !important; font-size: 15px !important; font-weight: 850 !important; border-radius: 999px !important; border: 1px solid rgba(var(--dark-rgb), 0.058) !important; background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(248,248,246,0.70)) !important; color: rgba(var(--dark-rgb),0.62) !important; outline: 0 !important; box-shadow: 0 9px 20px rgba(var(--dark-rgb),0.034), inset 0 1px 0 rgba(255,255,255,0.94), inset 0 -1px 0 rgba(var(--dark-rgb),0.016) !important; transform: none !important; } body.device-route-mode #devicePage .device-filter-chip.active, body.device-route-mode #devicePage .device-filter-chip.active:hover, body.device-route-mode #devicePage .device-filter-chip.active:focus, body.device-route-mode #devicePage .device-filter-chip.active:focus-visible, body.device-route-mode #devicePage .device-filter-chip.active:active { background: #0b0c0e !important; background-image: none !important; color: #ffffff !important; border-color: #0b0c0e !important; outline: 0 !important; box-shadow: 0 17px 36px rgba(11,12,14,0.17), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.22) !important; transform: none !important; } body.device-route-mode #devicePage .device-filter-chip.active::before, body.device-route-mode #devicePage .device-filter-chip.active::after { content: none !important; display: none !important; } body.device-route-mode #devicePage .device-store-grid { width: 100% !important; max-width: 1160px !important; margin-left: auto !important; margin-right: auto !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 340px)) !important; justify-content: center !important; align-items: stretch !important; gap: clamp(18px, 2vw, 28px) !important; padding: 0 !important; opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; } body.device-route-mode #devicePage .store-product-card { width: 100% !important; max-width: 340px !important; min-height: 438px !important; border-radius: 28px !important; opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: background 0.42s ease, border-color 0.42s ease, box-shadow 0.42s ease, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.device-route-mode #devicePage .store-product-card:hover, body.device-route-mode #devicePage .store-product-card.is-selected { transform: translateY(-2px) scale(1.0015) !important; } body.device-route-mode #devicePage .store-product-photo, body.device-route-mode #devicePage .store-product-photo.has-product-image { height: 148px !important; min-height: 148px !important; margin: 14px 14px 0 !important; border-radius: 22px !important; } body.device-route-mode #devicePage .store-product-content { padding: 18px 22px 20px !important; gap: 8px !important; } body.device-route-mode #devicePage .store-product-name { font-size: 21px !important; line-height: 1.02 !important; } body.device-route-mode #devicePage .store-product-type { min-height: 32px !important; font-size: 14px !important; line-height: 1.32 !important; } body.device-route-mode #devicePage .store-product-price { font-size: 13.4px !important; margin-top: 4px !important; } body.device-route-mode #devicePage .store-product-badge { min-height: 24px !important; padding: 6px 9px !important; font-size: 10.3px !important; max-width: 118px !important; } body.device-route-mode #devicePage .store-product-actions { margin-top: 16px !important; } body.device-route-mode #devicePage .store-product-add, body.device-route-mode #devicePage .store-product-added { min-height: 48px !important; font-size: 14px !important; } @media (min-width: 1280px) { body.device-route-mode #devicePage .device-store-grid { grid-template-columns: repeat(auto-fit, minmax(315px, 350px)) !important; max-width: 1160px !important; } body.device-route-mode #devicePage .store-product-card { max-width: 350px !important; } } @media (max-width: 760px) { body.device-route-mode #devicePage .device-page-shell { max-width: none !important; padding: 22px 14px calc(156px + env(safe-area-inset-bottom)) !important; } body.device-route-mode #devicePage .device-page-topbar { padding-bottom: 16px !important; } body.device-route-mode #devicePage .device-page-back { font-size: 14px !important; } body.device-route-mode #devicePage .device-page-hero { padding-bottom: 18px !important; } body.device-route-mode #devicePage .device-page-title { font-size: clamp(34px, 11vw, 48px) !important; line-height: 0.94 !important; max-width: 100% !important; } body.device-route-mode #devicePage .device-page-subtitle { font-size: 14px !important; line-height: 1.42 !important; margin-top: 9px !important; } body.device-route-mode #devicePage .device-filter-row { justify-content: flex-start !important; gap: 10px !important; margin-top: 4px !important; margin-bottom: 16px !important; padding: 14px 16px !important; scroll-padding-left: 16px !important; } body.device-route-mode #devicePage .device-filter-row::before { left: 12px !important; right: 12px !important; top: 7px !important; bottom: 7px !important; } body.device-route-mode #devicePage .device-filter-chip { min-width: auto !important; min-height: 40px !important; padding: 11px 17px !important; font-size: 13px !important; flex: 0 0 auto !important; } body.device-route-mode #devicePage .device-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 100% !important; gap: 10px !important; } body.device-route-mode #devicePage .store-product-card { max-width: none !important; min-height: 308px !important; border-radius: 22px !important; } body.device-route-mode #devicePage .store-product-photo, body.device-route-mode #devicePage .store-product-photo.has-product-image { height: 94px !important; min-height: 94px !important; margin: 7px 7px 0 !important; border-radius: 16px !important; } body.device-route-mode #devicePage .store-product-content { padding: 10px 10px 12px !important; gap: 4px !important; } body.device-route-mode #devicePage .store-product-name { font-size: 15.2px !important; line-height: 1.04 !important; } body.device-route-mode #devicePage .store-product-type { min-height: 30px !important; font-size: 11.2px !important; } body.device-route-mode #devicePage .store-product-price { font-size: 11.6px !important; margin-top: 2px !important; } body.device-route-mode #devicePage .store-product-badge { min-height: 19px !important; padding: 4px 5px !important; font-size: 8.4px !important; max-width: 78px !important; } body.device-route-mode #devicePage .store-product-actions { margin-top: 8px !important; } body.device-route-mode #devicePage .store-product-add, body.device-route-mode #devicePage .store-product-added { min-height: 36px !important; font-size: 11.6px !important; } } @media (max-width: 420px) { body.device-route-mode #devicePage .device-store-grid { grid-template-columns: 1fr !important; max-width: 330px !important; } body.device-route-mode #devicePage .store-product-card { min-height: 390px !important; } body.device-route-mode #devicePage .store-product-photo, body.device-route-mode #devicePage .store-product-photo.has-product-image { height: 132px !important; min-height: 132px !important; } body.device-route-mode #devicePage .store-product-name { font-size: 19px !important; } body.device-route-mode #devicePage .store-product-type { font-size: 13px !important; } body.device-route-mode #devicePage .store-product-add, body.device-route-mode #devicePage .store-product-added { min-height: 44px !important; font-size: 13px !important; } } /* id="final-apple-mini-storefront-cards" */ /* apple mini storefront cards — compact premium product shelf */ body.device-route-mode #devicePage .device-page-shell { max-width: 1180px !important; padding-top: 14px !important; } body.device-route-mode #devicePage .device-filter-row { max-width: 960px !important; justify-content: center !important; gap: 10px !important; margin: 0 auto 18px !important; padding: 10px 0 12px !important; border-bottom: 1px solid rgba(var(--dark-rgb), 0.035) !important; box-shadow: 0 14px 28px rgba(var(--dark-rgb), 0.024) !important; } body.device-route-mode #devicePage .device-filter-chip { min-height: 36px !important; padding: 9px 18px !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 850 !important; background: rgba(255, 255, 255, 0.64) !important; border-color: rgba(var(--dark-rgb), 0.070) !important; color: rgba(var(--dark-rgb), 0.58) !important; box-shadow: 0 7px 18px rgba(var(--dark-rgb), 0.030), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; transform: translate3d(0, 0, 0) !important; transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.32s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.device-route-mode #devicePage .device-filter-chip:not(.active):hover { background: rgba(255, 255, 255, 0.92) !important; color: rgba(var(--dark-rgb), 0.86) !important; transform: translate3d(0, -1px, 0) !important; box-shadow: 0 12px 26px rgba(var(--dark-rgb), 0.055), inset 0 1px 0 rgba(255, 255, 255, 1) !important; } body.device-route-mode #devicePage .device-filter-chip.active, body.device-route-mode #devicePage .device-filter-chip.active:hover, body.device-route-mode #devicePage .device-filter-chip.active:focus, body.device-route-mode #devicePage .device-filter-chip.active:focus-visible, body.device-route-mode #devicePage .device-filter-chip.active:active { background: #0b0c0e !important; color: #ffffff !important; border-color: #0b0c0e !important; box-shadow: 0 14px 30px rgba(11, 12, 14, 0.145), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transform: translate3d(0, 0, 0) !important; } body.device-route-mode #devicePage .device-store-grid { width: 100% !important; max-width: 980px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(196px, 226px)) !important; justify-content: center !important; align-items: stretch !important; gap: 14px !important; padding: 0 0 12px !important; opacity: 1 !important; transform-origin: center top !important; transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), filter 0.30s ease !important; animation: miniStoreGridIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both !important; } body.device-route-mode #devicePage .device-store-grid.is-leaving { opacity: 0 !important; transform: translate3d(0, 8px, 0) scale(0.994) !important; filter: blur(8px) !important; pointer-events: none !important; } body.device-route-mode #devicePage .device-store-grid.is-changing, body.device-route-mode #devicePage .device-store-grid.product-open-soft-settle, body.device-route-mode #devicePage .device-store-grid.real-soft-center-active, body.device-route-mode #devicePage .device-store-grid.is-soft-centered { animation: miniStoreGridIn 0.64s cubic-bezier(0.16, 1, 0.3, 1) both !important; } @keyframes miniStoreGridIn { 0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.992); filter: blur(10px); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } } body.device-route-mode #devicePage .store-product-card { width: 100% !important; max-width: 226px !important; min-height: 278px !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; border-radius: 22px !important; border: 1px solid rgba(var(--dark-rgb), 0.070) !important; background: radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 1), transparent 46%), linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 250, 248, 0.82)) !important; box-shadow: 0 10px 26px rgba(var(--dark-rgb), 0.046), 0 1px 0 rgba(255, 255, 255, 0.98) inset, inset 0 -1px 0 rgba(var(--dark-rgb), 0.018) !important; overflow: hidden !important; opacity: 1 !important; filter: none !important; transform: translate3d(0, 0, 0) scale(1) !important; animation: miniStoreCardIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both !important; transition: background 0.40s ease, border-color 0.40s ease, box-shadow 0.40s ease, transform 0.50s cubic-bezier(0.16, 1, 0.3, 1), filter 0.30s ease !important; } body.device-route-mode #devicePage .store-product-card:nth-child(1) { animation-delay: 0.03s !important; } body.device-route-mode #devicePage .store-product-card:nth-child(2) { animation-delay: 0.07s !important; } body.device-route-mode #devicePage .store-product-card:nth-child(3) { animation-delay: 0.11s !important; } body.device-route-mode #devicePage .store-product-card:nth-child(4) { animation-delay: 0.15s !important; } body.device-route-mode #devicePage .store-product-card:nth-child(5) { animation-delay: 0.19s !important; } body.device-route-mode #devicePage .store-product-card:nth-child(6) { animation-delay: 0.23s !important; } @keyframes miniStoreCardIn { 0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.976); filter: blur(12px); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } } body.device-route-mode #devicePage .store-product-card::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.54), transparent 36%, transparent 76%, rgba(var(--dark-rgb), 0.012)) !important; opacity: 0.62 !important; } body.device-route-mode #devicePage .store-product-card:hover { border-color: rgba(var(--dark-rgb), 0.125) !important; box-shadow: 0 16px 38px rgba(var(--dark-rgb), 0.070), 0 1px 0 rgba(255, 255, 255, 1) inset, inset 0 -1px 0 rgba(var(--dark-rgb), 0.020) !important; transform: translate3d(0, -3px, 0) scale(1.006) !important; } body.device-route-mode #devicePage .store-product-card.is-selected { border-color: rgba(var(--dark-rgb), 0.18) !important; box-shadow: 0 14px 34px rgba(var(--dark-rgb), 0.072), 0 0 0 1px rgba(var(--dark-rgb), 0.040), 0 1px 0 rgba(255, 255, 255, 1) inset, inset 0 -1px 0 rgba(var(--dark-rgb), 0.020) !important; transform: translate3d(0, 0, 0) scale(1) !important; } body.device-route-mode #devicePage .store-product-photo, body.device-route-mode #devicePage .store-product-photo.has-product-image { height: 88px !important; min-height: 88px !important; margin: 9px 9px 0 !important; border-radius: 17px !important; border-color: rgba(var(--dark-rgb), 0.048) !important; background: radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 1), transparent 50%), linear-gradient(145deg, #ffffff 0%, #f2f3f4 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(var(--dark-rgb), 0.020), 0 7px 18px rgba(var(--dark-rgb), 0.030) !important; } body.device-route-mode #devicePage .store-product-photo::before, body.device-route-mode #devicePage .store-product-photo.has-product-image::before { width: 54px !important; height: 54px !important; border-radius: 18px !important; display: none !important; content: none !important; } body.device-route-mode #devicePage .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id] .store-product-image { position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; inset: auto !important; width: 126% !important; height: auto !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: center center !important; padding: 0 !important; opacity: 0 !important; mix-blend-mode: multiply !important; pointer-events: none !important; transform: translate3d(-50%, -50%, 0) scale(0.986) !important; filter: saturate(1.08) contrast(1.045) brightness(1.014) blur(3px) !important; transition: opacity 0.52s ease, transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), filter 0.52s ease !important; } body.device-route-mode #devicePage .store-product-image.is-active, body.device-route-mode #devicePage .store-product-card[data-product-id] .store-product-image.is-active { opacity: 1 !important; transform: translate3d(-50%, -50%, 0) scale(1.08) !important; filter: saturate(1.1) contrast(1.05) brightness(1.016) blur(0) !important; } body.device-route-mode #devicePage .store-product-card:hover .store-product-image.is-active, body.device-route-mode #devicePage .store-product-card:focus-within .store-product-image.is-active { opacity: 1 !important; transform: translate3d(-50%, -50%, 0) scale(1.12) !important; filter: saturate(1.12) contrast(1.055) brightness(1.02) blur(0) !important; } body.device-route-mode #devicePage .store-product-card[data-product-id*="doorbell"] .store-product-image.is-active, body.device-route-mode #devicePage .store-product-card[data-product-id*="thermostat"] .store-product-image.is-active { transform: translate3d(-50%, -50%, 0) scale(1.18) !important; } body.device-route-mode #devicePage .store-product-card[data-product-id*="cam"] .store-product-image.is-active, body.device-route-mode #devicePage .store-product-card[data-product-id*="camera"] .store-product-image.is-active { transform: translate3d(-50%, -50%, 0) scale(1.22) !important; } body.device-route-mode #devicePage .store-product-carousel-button { right: 7px !important; width: 26px !important; height: 26px !important; font-size: 18px !important; background: rgba(255, 255, 255, 0.54) !important; opacity: 0.52 !important; box-shadow: 0 8px 18px rgba(var(--dark-rgb), 0.060) !important; } body.device-route-mode #devicePage .store-product-card:hover .store-product-carousel-button { opacity: 0.92 !important; } body.device-route-mode #devicePage .store-product-content { display: grid !important; grid-template-rows: auto auto auto auto 1fr !important; gap: 4px !important; padding: 11px 13px 13px !important; } body.device-route-mode #devicePage .store-product-name { margin: 0 !important; font-size: 16.2px !important; line-height: 1.05 !important; letter-spacing: -0.045em !important; font-weight: 900 !important; color: rgba(var(--dark-rgb), 0.98) !important; } body.device-route-mode #devicePage .store-product-type { min-height: 27px !important; margin: 0 !important; font-size: 11.2px !important; line-height: 1.28 !important; font-weight: 650 !important; letter-spacing: -0.012em !important; color: rgba(var(--dark-rgb), 0.54) !important; } body.device-route-mode #devicePage .store-product-price { margin-top: 3px !important; font-size: 12.1px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: -0.015em !important; color: rgba(var(--dark-rgb), 0.82) !important; } body.device-route-mode #devicePage .store-product-badges { gap: 4px !important; min-height: 18px !important; margin-top: 1px !important; overflow: hidden !important; } body.device-route-mode #devicePage .store-product-badge { min-height: 18px !important; max-width: 74px !important; padding: 4px 6px !important; border-radius: 999px !important; font-size: 8.2px !important; font-weight: 800 !important; color: rgba(var(--dark-rgb), 0.52) !important; background: rgba(var(--dark-rgb), 0.024) !important; border-color: rgba(var(--dark-rgb), 0.050) !important; } body.device-route-mode #devicePage .store-product-selected-mark { top: 8px !important; right: 8px !important; min-height: 22px !important; padding: 5px 8px !important; font-size: 9px !important; background: rgba(255, 255, 255, 0.82) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body.device-route-mode #devicePage .store-product-actions, body.device-route-mode #devicePage .store-product-selected-controls { width: 100% !important; min-height: 0 !important; margin-top: 9px !important; display: flex !important; align-items: flex-end !important; } body.device-route-mode #devicePage .store-product-actions > *, body.device-route-mode #devicePage .store-product-selected-controls > * { width: 100% !important; } body.device-route-mode #devicePage .store-product-add, body.device-route-mode #devicePage .store-product-added { width: 100% !important; min-height: 33px !important; border-radius: 999px !important; padding: 9px 12px !important; border: 1px solid rgba(var(--dark-rgb), 0.090) !important; background: rgba(255, 255, 255, 0.68) !important; color: rgba(var(--dark-rgb), 0.88) !important; font-size: 11.5px !important; font-weight: 850 !important; letter-spacing: -0.010em !important; box-shadow: 0 7px 16px rgba(var(--dark-rgb), 0.040), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; transform: translate3d(0, 0, 0) scale(1) !important; } body.device-route-mode #devicePage .store-product-add:hover, body.device-route-mode #devicePage .store-product-added:hover { background: #0b0c0e !important; border-color: #0b0c0e !important; color: #ffffff !important; box-shadow: 0 12px 26px rgba(11, 12, 14, 0.14) !important; transform: translate3d(0, -1px, 0) scale(1.006) !important; } body.device-route-mode #devicePage .store-product-card.is-selected .store-product-added { background: #0b0c0e !important; color: #ffffff !important; border-color: #0b0c0e !important; } body.device-route-mode #devicePage .store-product-selected-controls { display: grid !important; gap: 6px !important; animation: miniSelectedControlsIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both !important; } @keyframes miniSelectedControlsIn { from { opacity: 0; transform: translateY(5px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } body.device-route-mode #devicePage .store-product-stepper { min-height: 32px !important; grid-template-columns: 29px 1fr 29px !important; gap: 4px !important; padding: 3px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.78) !important; border-color: rgba(var(--dark-rgb), 0.070) !important; box-shadow: 0 7px 16px rgba(var(--dark-rgb), 0.034), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; } body.device-route-mode #devicePage .store-product-stepper button { width: 29px !important; height: 26px !important; border-radius: 999px !important; font-size: 13px !important; box-shadow: none !important; } body.device-route-mode #devicePage .store-product-stepper span { font-size: 11px !important; font-weight: 850 !important; } @media (min-width: 1180px) { body.device-route-mode #devicePage .device-store-grid { grid-template-columns: repeat(auto-fit, minmax(205px, 232px)) !important; max-width: 1020px !important; gap: 15px !important; } body.device-route-mode #devicePage .store-product-card { max-width: 232px !important; } } @media (max-width: 760px) { body.device-route-mode #devicePage .device-page-shell { padding: 14px 12px calc(148px + env(safe-area-inset-bottom)) !important; } body.device-route-mode #devicePage .device-page-hero { padding-bottom: 10px !important; } body.device-route-mode #devicePage .device-filter-row { justify-content: flex-start !important; margin: 0 -12px 12px !important; padding: 9px 12px 11px !important; overflow-x: auto !important; } body.device-route-mode #devicePage .device-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 100% !important; gap: 9px !important; justify-content: stretch !important; } body.device-route-mode #devicePage .store-product-card { max-width: none !important; min-height: 246px !important; border-radius: 19px !important; } body.device-route-mode #devicePage .store-product-photo, body.device-route-mode #devicePage .store-product-photo.has-product-image { height: 78px !important; min-height: 78px !important; margin: 7px 7px 0 !important; border-radius: 15px !important; } body.device-route-mode #devicePage .store-product-content { padding: 9px 9px 10px !important; gap: 3px !important; } body.device-route-mode #devicePage .store-product-name { font-size: 14px !important; line-height: 1.05 !important; } body.device-route-mode #devicePage .store-product-type { min-height: 25px !important; font-size: 10.4px !important; } body.device-route-mode #devicePage .store-product-price { font-size: 11px !important; margin-top: 2px !important; } body.device-route-mode #devicePage .store-product-badges { min-height: 17px !important; } body.device-route-mode #devicePage .store-product-badge { min-height: 17px !important; padding: 3px 5px !important; font-size: 7.8px !important; max-width: 66px !important; } body.device-route-mode #devicePage .store-product-actions, body.device-route-mode #devicePage .store-product-selected-controls { margin-top: 7px !important; } body.device-route-mode #devicePage .store-product-add, body.device-route-mode #devicePage .store-product-added { min-height: 31px !important; padding: 8px 10px !important; font-size: 10.8px !important; } body.device-route-mode #devicePage .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id] .store-product-image { width: 132% !important; } } @media (max-width: 340px) { body.device-route-mode #devicePage .device-store-grid { grid-template-columns: 1fr !important; max-width: 250px !important; } } @media (prefers-reduced-motion: reduce) { body.device-route-mode #devicePage .device-store-grid, body.device-route-mode #devicePage .store-product-card, body.device-route-mode #devicePage .store-product-selected-controls { animation: none !important; transition: none !important; filter: none !important; } } /* id="final-device-filter-single-line" */ /* final add-device filter panel — single Apple hairline, no white-on-white dock */ #devicePage .device-filter-row, body.device-route-mode #devicePage .device-filter-row, body.device-route-mode .device-filter-row { position: sticky !important; top: 50px !important; z-index: 40 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 980px !important; margin: 0 auto 18px !important; padding: 8px 0 12px !important; gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid rgba(var(--dark-rgb), 0.085) !important; background: rgba(247, 247, 245, 0.86) !important; box-shadow: none !important; backdrop-filter: blur(18px) saturate(1.08) !important; -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; transform: translate3d(0, 0, 0) !important; } #devicePage .device-filter-row::-webkit-scrollbar, body.device-route-mode #devicePage .device-filter-row::-webkit-scrollbar, body.device-route-mode .device-filter-row::-webkit-scrollbar { display: none !important; } #devicePage .device-filter-row::before, #devicePage .device-filter-row::after, body.device-route-mode #devicePage .device-filter-row::before, body.device-route-mode #devicePage .device-filter-row::after, body.device-route-mode .device-filter-row::before, body.device-route-mode .device-filter-row::after { display: none !important; content: none !important; } #devicePage .device-filter-chip, body.device-route-mode #devicePage .device-filter-chip, body.device-route-mode .device-filter-chip { position: relative !important; z-index: 1 !important; min-height: 38px !important; padding: 10px 22px !important; border-radius: 999px !important; border: 1px solid transparent !important; background: transparent !important; color: rgba(var(--dark-rgb), 0.58) !important; box-shadow: none !important; font-size: 13px !important; font-weight: 780 !important; line-height: 1 !important; letter-spacing: -0.018em !important; outline: none !important; transform: translate3d(0, 0, 0) scale(1) !important; transition: color 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.32s ease, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important; -webkit-tap-highlight-color: transparent !important; } #devicePage .device-filter-chip:not(.active):hover, #devicePage .device-filter-chip:not(.active):focus-visible, body.device-route-mode #devicePage .device-filter-chip:not(.active):hover, body.device-route-mode #devicePage .device-filter-chip:not(.active):focus-visible, body.device-route-mode .device-filter-chip:not(.active):hover, body.device-route-mode .device-filter-chip:not(.active):focus-visible { background: rgba(255, 255, 255, 0.56) !important; border-color: rgba(var(--dark-rgb), 0.055) !important; color: rgba(var(--dark-rgb), 0.86) !important; box-shadow: 0 8px 18px rgba(var(--dark-rgb), 0.030) !important; transform: translate3d(0, -1px, 0) scale(1.002) !important; } #devicePage .device-filter-chip.active, #devicePage .device-filter-chip.active:hover, #devicePage .device-filter-chip.active:focus, #devicePage .device-filter-chip.active:focus-visible, #devicePage .device-filter-chip.active:active, body.device-route-mode #devicePage .device-filter-chip.active, body.device-route-mode #devicePage .device-filter-chip.active:hover, body.device-route-mode #devicePage .device-filter-chip.active:focus, body.device-route-mode #devicePage .device-filter-chip.active:focus-visible, body.device-route-mode #devicePage .device-filter-chip.active:active, body.device-route-mode .device-filter-chip.active, body.device-route-mode .device-filter-chip.active:hover, body.device-route-mode .device-filter-chip.active:focus, body.device-route-mode .device-filter-chip.active:focus-visible, body.device-route-mode .device-filter-chip.active:active { background: #0b0c0e !important; color: #ffffff !important; border-color: #0b0c0e !important; box-shadow: 0 10px 24px rgba(11, 12, 14, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transform: translate3d(0, 0, 0) scale(1) !important; } #devicePage .device-filter-chip::before, #devicePage .device-filter-chip::after, body.device-route-mode #devicePage .device-filter-chip::before, body.device-route-mode #devicePage .device-filter-chip::after, body.device-route-mode .device-filter-chip::before, body.device-route-mode .device-filter-chip::after { display: none !important; content: none !important; } @media (max-width: 760px) { #devicePage .device-filter-row, body.device-route-mode #devicePage .device-filter-row, body.device-route-mode .device-filter-row { top: 48px !important; justify-content: flex-start !important; max-width: calc(100vw - 24px) !important; margin: 0 auto 14px !important; padding: 7px 0 10px !important; gap: 8px !important; } #devicePage .device-filter-chip, body.device-route-mode #devicePage .device-filter-chip, body.device-route-mode .device-filter-chip { min-height: 35px !important; padding: 9px 16px !important; font-size: 12.5px !important; flex: 0 0 auto !important; } } @media (max-width: 420px) { #devicePage .device-filter-row, body.device-route-mode #devicePage .device-filter-row, body.device-route-mode .device-filter-row { max-width: calc(100vw - 20px) !important; } } /* final checkout button polish — compact premium button, not a heavy floating pill */ :root { --checkout-graphite: #2a2c30; --checkout-graphite-hover: #202226; --checkout-graphite-soft: rgba(42, 44, 48, 0.14); } #deviceBottomBag .device-bottom-bag-actions { align-items: center !important; } #deviceContinueButton.device-continue-button, #deviceContinueButton { width: auto !important; min-width: 168px !important; min-height: 41px !important; height: 41px !important; padding: 0 18px !important; border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; background: linear-gradient(180deg, rgba(60, 62, 67, 0.96), rgba(39, 41, 45, 0.98)) !important; color: rgba(255, 255, 255, 0.96) !important; font-size: 12.5px !important; font-weight: 880 !important; letter-spacing: -0.012em !important; line-height: 1 !important; text-transform: lowercase !important; box-shadow: 0 10px 22px rgba(var(--dark-rgb), 0.115), 0 2px 6px rgba(var(--dark-rgb), 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important; transform: translate3d(0, 0, 0) scale(1) !important; will-change: transform, box-shadow, background; } #deviceContinueButton.device-continue-button::before, #deviceContinueButton::before { content: ""; position: absolute; inset: 1px; border-radius: 15px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 48%), radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 56%); opacity: 0.82; } #deviceContinueButton.device-continue-button:hover:not(:disabled), #deviceContinueButton:hover:not(:disabled) { background: linear-gradient(180deg, rgba(53, 55, 60, 0.98), rgba(31, 33, 37, 1)) !important; border-color: rgba(255, 255, 255, 0.16) !important; transform: translate3d(0, -1px, 0) scale(1.001) !important; box-shadow: 0 13px 26px rgba(var(--dark-rgb), 0.14), 0 3px 8px rgba(var(--dark-rgb), 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important; } #deviceContinueButton.device-continue-button:active:not(:disabled), #deviceContinueButton:active:not(:disabled) { transform: translate3d(0, 0, 0) scale(0.992) !important; box-shadow: 0 7px 15px rgba(var(--dark-rgb), 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important; } #deviceContinueButton.device-continue-button:disabled, #deviceContinueButton:disabled { opacity: 0.40 !important; cursor: not-allowed !important; transform: none !important; box-shadow: 0 4px 10px rgba(var(--dark-rgb), 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } @media (min-width: 761px) { #deviceBottomBag.device-bottom-bag { right: 30px !important; width: min(448px, calc(100vw - 60px)) !important; padding: 12px 14px 12px 17px !important; gap: 13px !important; } #deviceBottomBag .device-bottom-bag-actions { gap: 9px !important; padding-right: 2px !important; } #deviceBottomBag .device-bag-clear { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; } } @media (max-width: 760px) { #deviceBottomBag.device-bottom-bag { padding: 13px 14px calc(14px + env(safe-area-inset-bottom)) !important; } #deviceBottomBag .device-bottom-bag-actions { grid-template-columns: 44px minmax(0, 1fr) !important; gap: 9px !important; } #deviceContinueButton.device-continue-button, #deviceContinueButton { width: 100% !important; min-width: 0 !important; min-height: 43px !important; height: 43px !important; border-radius: 16px !important; font-size: 12.8px !important; } } /* final override — make continue button the same deep black as added */ #deviceContinueButton.device-continue-button, #deviceContinueButton, #devicePage #deviceContinueButton.device-continue-button, body.device-route-mode #deviceContinueButton.device-continue-button { background: var(--dark) !important; border-color: var(--dark) !important; color: #ffffff !important; box-shadow: 0 16px 34px rgba(var(--dark-rgb), 0.17), inset 0 1px 0 rgba(255,255,255,0.10) !important; } #deviceContinueButton.device-continue-button::before, #deviceContinueButton::before, #devicePage #deviceContinueButton.device-continue-button::before, body.device-route-mode #deviceContinueButton.device-continue-button::before { display: none !important; content: none !important; opacity: 0 !important; } #deviceContinueButton.device-continue-button:hover:not(:disabled), #deviceContinueButton:hover:not(:disabled), #devicePage #deviceContinueButton.device-continue-button:hover:not(:disabled), body.device-route-mode #deviceContinueButton.device-continue-button:hover:not(:disabled) { background: var(--dark-hover) !important; border-color: var(--dark-hover) !important; color: #ffffff !important; box-shadow: 0 20px 42px rgba(var(--dark-rgb), 0.21) !important; } /* id="final-minimal-phone-choice-sheet" */ /* final override — minimal phone popup without the strict white frame */ .phone-choice-overlay.active { background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.18), transparent 34%), rgba(var(--dark-rgb), 0.48) !important; backdrop-filter: blur(28px) saturate(1.14) !important; -webkit-backdrop-filter: blur(28px) saturate(1.14) !important; } .phone-choice-sheet { width: min(394px, calc(100vw - 40px)) !important; border: 0 !important; border-color: transparent !important; border-radius: 34px !important; background: radial-gradient(circle at 18% 0%, rgba(255,255,255,0.92), transparent 42%), radial-gradient(circle at 88% 100%, rgba(var(--dark-rgb),0.045), transparent 44%), linear-gradient(180deg, rgba(255,255,255,0.84), rgba(246,246,244,0.74)) !important; backdrop-filter: blur(30px) saturate(1.18) !important; -webkit-backdrop-filter: blur(30px) saturate(1.18) !important; box-shadow: 0 42px 120px rgba(0,0,0,0.30), 0 14px 38px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.72), inset 0 -1px 0 rgba(var(--dark-rgb),0.030) !important; } .phone-choice-sheet::before { inset: 0 !important; border-radius: inherit !important; background: linear-gradient(135deg, rgba(255,255,255,0.42), transparent 38%, transparent 74%, rgba(var(--dark-rgb),0.020)) !important; opacity: 0.54 !important; } .phone-choice-close { top: 18px !important; right: 18px !important; width: 38px !important; height: 38px !important; border: 0 !important; background: rgba(255,255,255,0.44) !important; color: rgba(var(--dark-rgb),0.44) !important; box-shadow: 0 10px 22px rgba(var(--dark-rgb),0.055), inset 0 1px 0 rgba(255,255,255,0.60) !important; } .phone-choice-close:hover, .phone-choice-close:focus-visible { background: rgba(var(--dark-rgb),0.86) !important; color: #ffffff !important; transform: rotate(90deg) scale(1.035) !important; box-shadow: 0 16px 32px rgba(var(--dark-rgb),0.18) !important; outline: none !important; } .phone-choice-head { padding: 32px 28px 16px !important; gap: 7px !important; } .phone-choice-actions { gap: 10px !important; padding: 0 20px 20px !important; } .phone-choice-action { min-height: 54px !important; border: 0 !important; border-radius: 22px !important; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.92), transparent 58%), linear-gradient(180deg, rgba(255,255,255,0.62), rgba(247,247,245,0.48)) !important; color: rgba(var(--dark-rgb),0.84) !important; box-shadow: 0 12px 28px rgba(var(--dark-rgb),0.052), inset 0 1px 0 rgba(255,255,255,0.72), inset 0 -1px 0 rgba(var(--dark-rgb),0.018) !important; } .phone-choice-action:hover, .phone-choice-action:focus-visible { background: var(--dark) !important; color: #ffffff !important; transform: translateY(-1px) scale(1.002) !important; box-shadow: 0 18px 40px rgba(var(--dark-rgb),0.18) !important; } .phone-choice-action.copied, .phone-action.copied { border: 0 !important; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.92), transparent 58%), linear-gradient(180deg, rgba(255,255,255,0.62), rgba(247,247,245,0.48)) !important; color: rgba(var(--dark-rgb),0.82) !important; box-shadow: 0 12px 28px rgba(var(--dark-rgb),0.052), inset 0 1px 0 rgba(255,255,255,0.72), inset 0 -1px 0 rgba(var(--dark-rgb),0.018) !important; } .phone-choice-footnote { padding: 0 28px 24px !important; color: rgba(var(--dark-rgb),0.34) !important; } @media (max-width: 620px) { .phone-choice-overlay { padding: 18px !important; } .phone-choice-sheet { width: min(356px, calc(100vw - 36px)) !important; border-radius: 31px !important; } .phone-choice-close { top: 14px !important; right: 14px !important; width: 36px !important; height: 36px !important; } .phone-choice-head { padding: 30px 22px 16px !important; } .phone-choice-actions { padding: 0 15px 16px !important; gap: 9px !important; } .phone-choice-action { min-height: 52px !important; border-radius: 21px !important; } } /* id="final-frameless-phone-choice-popup-copied" */ /* final override — truly frameless minimal phone popup + clean copied state */ .phone-choice-overlay.active { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.16), transparent 36%), rgba(var(--dark-rgb), 0.50) !important; backdrop-filter: blur(30px) saturate(1.12) !important; -webkit-backdrop-filter: blur(30px) saturate(1.12) !important; } .phone-choice-sheet, .phone-choice-overlay.active .phone-choice-sheet { width: min(386px, calc(100vw - 40px)) !important; padding: 58px 18px 18px !important; border: 0 !important; outline: 0 !important; border-color: transparent !important; border-radius: 34px !important; background: radial-gradient(circle at 16% 0%, rgba(255,255,255,0.72), transparent 42%), radial-gradient(circle at 84% 100%, rgba(0,0,0,0.055), transparent 46%), linear-gradient(180deg, rgba(255,255,255,0.66), rgba(244,244,242,0.56)) !important; backdrop-filter: blur(34px) saturate(1.18) !important; -webkit-backdrop-filter: blur(34px) saturate(1.18) !important; box-shadow: 0 44px 118px rgba(0,0,0,0.31), 0 18px 42px rgba(0,0,0,0.16) !important; } .phone-choice-sheet::before, .phone-choice-sheet::after { display: none !important; content: none !important; opacity: 0 !important; } .phone-choice-close { top: 18px !important; right: 18px !important; width: 38px !important; height: 38px !important; border: 0 !important; outline: 0 !important; background: rgba(255,255,255,0.34) !important; color: rgba(var(--dark-rgb),0.46) !important; box-shadow: 0 10px 22px rgba(var(--dark-rgb),0.050) !important; backdrop-filter: blur(20px) saturate(1.1) !important; -webkit-backdrop-filter: blur(20px) saturate(1.1) !important; } .phone-choice-close:hover, .phone-choice-close:focus-visible { background: rgba(var(--dark-rgb),0.86) !important; color: #ffffff !important; transform: rotate(90deg) scale(1.035) !important; box-shadow: 0 16px 32px rgba(var(--dark-rgb),0.18) !important; } .phone-choice-head, .phone-choice-footnote { display: none !important; } .phone-choice-actions { display: grid !important; gap: 10px !important; padding: 0 !important; } .phone-choice-action, .phone-choice-action.copied, .phone-action.copied { min-height: 54px !important; border: 0 !important; outline: 0 !important; border-radius: 22px !important; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.70), transparent 58%), linear-gradient(180deg, rgba(255,255,255,0.46), rgba(247,247,245,0.34)) !important; color: rgba(var(--dark-rgb),0.84) !important; font-size: 14px !important; font-weight: 920 !important; letter-spacing: -0.012em !important; box-shadow: 0 12px 26px rgba(var(--dark-rgb),0.048) !important; backdrop-filter: blur(18px) saturate(1.08) !important; -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; transition: background 0.34s ease, color 0.34s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.34s ease, opacity 0.34s ease !important; } .phone-choice-action:hover, .phone-choice-action:focus-visible { background: var(--dark) !important; color: #ffffff !important; transform: translateY(-1px) scale(1.002) !important; box-shadow: 0 18px 40px rgba(var(--dark-rgb),0.18) !important; } #copyPhoneSheetButton.copied, #copyPhoneButton.copied, .phone-choice-action.copied, .phone-action.copied { background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.16), transparent 58%), linear-gradient(180deg, rgba(15,16,18,0.96), rgba(8,9,10,0.96)) !important; color: #ffffff !important; box-shadow: 0 18px 38px rgba(var(--dark-rgb),0.20), 0 6px 14px rgba(var(--dark-rgb),0.10) !important; transform: translateY(-1px) scale(1.002) !important; } #copyPhoneSheetButton.copied::after, #copyPhoneButton.copied::after { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; border-radius: 999px; color: #ffffff; font-size: 13px; font-weight: 900; line-height: 1; } @media (max-width: 620px) { .phone-choice-overlay { padding: 18px !important; } .phone-choice-sheet, .phone-choice-overlay.active .phone-choice-sheet { width: min(356px, calc(100vw - 36px)) !important; padding: 54px 14px 14px !important; border-radius: 31px !important; } .phone-choice-close { top: 14px !important; right: 14px !important; width: 36px !important; height: 36px !important; } .phone-choice-action, .phone-choice-action.copied { min-height: 52px !important; border-radius: 21px !important; font-size: 13.5px !important; } } /* id="final-no-frame-phone-popup-no-check" */ /* final hard override — no outer frame/card at all, only floating minimal actions */ .phone-choice-overlay.active { background: radial-gradient(circle at 50% 36%, rgba(255,255,255,0.18), transparent 34%), rgba(var(--dark-rgb), 0.52) !important; backdrop-filter: blur(32px) saturate(1.14) !important; -webkit-backdrop-filter: blur(32px) saturate(1.14) !important; } .phone-choice-sheet, .phone-choice-overlay.active .phone-choice-sheet { width: min(382px, calc(100vw - 50px)) !important; padding: 58px 0 0 !important; margin: 0 !important; overflow: visible !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .phone-choice-sheet::before, .phone-choice-sheet::after { display: none !important; content: none !important; background: none !important; box-shadow: none !important; border: 0 !important; opacity: 0 !important; } .phone-choice-close { top: 0 !important; right: 0 !important; width: 38px !important; height: 38px !important; border: 0 !important; outline: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,0.34) !important; color: rgba(var(--dark-rgb), 0.48) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.11) !important; backdrop-filter: blur(18px) saturate(1.12) !important; -webkit-backdrop-filter: blur(18px) saturate(1.12) !important; } .phone-choice-close:hover, .phone-choice-close:focus-visible { background: rgba(9,10,12,0.88) !important; color: #ffffff !important; transform: rotate(90deg) scale(1.035) !important; box-shadow: 0 18px 38px rgba(0,0,0,0.22) !important; } .phone-choice-head, .phone-choice-footnote { display: none !important; } .phone-choice-actions { display: grid !important; gap: 12px !important; padding: 0 !important; } .phone-choice-action, .phone-choice-action.copied, .phone-action.copied { min-height: 54px !important; border: 0 !important; outline: 0 !important; border-radius: 26px !important; background: rgba(255,255,255,0.76) !important; color: rgba(var(--dark-rgb),0.86) !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: -0.012em !important; box-shadow: 0 18px 46px rgba(0,0,0,0.13) !important; backdrop-filter: blur(22px) saturate(1.12) !important; -webkit-backdrop-filter: blur(22px) saturate(1.12) !important; transform: translateY(0) scale(1) !important; transition: background 0.34s ease, color 0.34s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.34s ease, opacity 0.34s ease !important; } .phone-choice-action:hover, .phone-choice-action:focus-visible { background: #07080a !important; color: #ffffff !important; transform: translateY(-1px) scale(1.002) !important; box-shadow: 0 22px 50px rgba(0,0,0,0.24) !important; } #copyPhoneSheetButton.copied, #copyPhoneButton.copied, .phone-choice-action.copied, .phone-action.copied { background: #050607 !important; color: #ffffff !important; border: 0 !important; outline: 0 !important; box-shadow: 0 22px 50px rgba(0,0,0,0.25) !important; transform: translateY(-1px) scale(1.002) !important; animation: copiedMinimalPulse 0.42s cubic-bezier(0.16, 1, 0.3, 1) 1 !important; } #copyPhoneSheetButton.copied::before, #copyPhoneSheetButton.copied::after, #copyPhoneButton.copied::before, #copyPhoneButton.copied::after, .phone-choice-action.copied::before, .phone-choice-action.copied::after, .phone-action.copied::before, .phone-action.copied::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; opacity: 0 !important; } @keyframes copiedMinimalPulse { 0% { transform: translateY(0) scale(0.986); opacity: 0.88; } 100% { transform: translateY(-1px) scale(1.002); opacity: 1; } } @media (max-width: 620px) { .phone-choice-overlay { padding: 18px !important; } .phone-choice-sheet, .phone-choice-overlay.active .phone-choice-sheet { width: min(356px, calc(100vw - 36px)) !important; padding: 54px 0 0 !important; border-radius: 0 !important; } .phone-choice-close { width: 36px !important; height: 36px !important; } .phone-choice-actions { gap: 10px !important; } .phone-choice-action, .phone-choice-action.copied { min-height: 52px !important; border-radius: 25px !important; font-size: 13.5px !important; } } /* final override — perfectly centered product photos, no crooked crop */ body.device-route-mode #devicePage .store-product-photo, body.device-route-mode #devicePage .store-product-photo.has-product-image, #devicePage .store-product-photo.has-product-image { position: relative !important; display: grid !important; place-items: center !important; overflow: hidden !important; height: 132px !important; min-height: 132px !important; margin: 10px 10px 0 !important; border-radius: 20px !important; background: radial-gradient(circle at 50% 6%, rgba(255,255,255,1), transparent 48%), linear-gradient(145deg, rgba(255,255,255,0.98), rgba(242,244,245,0.78)) !important; } body.device-route-mode #devicePage .store-product-photo.has-product-image::before, #devicePage .store-product-photo.has-product-image::before { content: none !important; display: none !important; } body.device-route-mode #devicePage .store-product-image, #devicePage .store-product-image { position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; padding: 12px 20px !important; object-fit: contain !important; object-position: center center !important; opacity: 0 !important; pointer-events: none !important; transform: scale(0.985) !important; transform-origin: center center !important; filter: saturate(1.04) contrast(1.018) brightness(1.01) blur(3px) !important; mix-blend-mode: multiply !important; transition: opacity 0.58s ease, transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), filter 0.58s ease !important; backface-visibility: hidden !important; } body.device-route-mode #devicePage .store-product-image.is-active, #devicePage .store-product-image.is-active { opacity: 1 !important; transform: scale(1) !important; filter: saturate(1.055) contrast(1.025) brightness(1.012) blur(0) !important; } body.device-route-mode #devicePage .store-product-card:hover .store-product-image.is-active, body.device-route-mode #devicePage .store-product-card:focus-within .store-product-image.is-active, #devicePage .store-product-card:hover .store-product-image.is-active, #devicePage .store-product-card:focus-within .store-product-image.is-active { opacity: 1 !important; transform: scale(1.018) !important; filter: saturate(1.07) contrast(1.03) brightness(1.014) blur(0) !important; } body.device-route-mode #devicePage .store-product-card:hover .store-product-image:not(.is-active), body.device-route-mode #devicePage .store-product-card:focus-within .store-product-image:not(.is-active), #devicePage .store-product-card:hover .store-product-image:not(.is-active), #devicePage .store-product-card:focus-within .store-product-image:not(.is-active) { opacity: 0 !important; transform: scale(0.985) !important; filter: saturate(1.04) contrast(1.018) brightness(1.01) blur(3px) !important; } body.device-route-mode #devicePage .store-product-card[data-product-id] .store-product-image, #devicePage .store-product-card[data-product-id] .store-product-image { padding: 12px 20px !important; } body.device-route-mode #devicePage .store-product-card[data-product-id="google-nest-cam-indoor"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="nest-cam-indoor-wired"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="ring-indoor-cam-2nd-gen"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="ring-spotlight-cam"] .store-product-image, #devicePage .store-product-card[data-product-id="google-nest-cam-indoor"] .store-product-image, #devicePage .store-product-card[data-product-id="nest-cam-indoor-wired"] .store-product-image, #devicePage .store-product-card[data-product-id="ring-indoor-cam-2nd-gen"] .store-product-image, #devicePage .store-product-card[data-product-id="ring-spotlight-cam"] .store-product-image { padding: 10px 18px !important; } @media (max-width: 760px) { body.device-route-mode #devicePage .store-product-photo, body.device-route-mode #devicePage .store-product-photo.has-product-image, #devicePage .store-product-photo.has-product-image { height: 88px !important; min-height: 88px !important; margin: 8px 8px 0 !important; border-radius: 16px !important; } body.device-route-mode #devicePage .store-product-image, #devicePage .store-product-image { padding: 8px 12px !important; } } @media (max-width: 430px) { body.device-route-mode #devicePage .store-product-photo, body.device-route-mode #devicePage .store-product-photo.has-product-image, #devicePage .store-product-photo.has-product-image { height: 122px !important; min-height: 122px !important; margin: 12px 14px 0 !important; border-radius: 19px !important; } body.device-route-mode #devicePage .store-product-image, #devicePage .store-product-image { padding: 10px 16px !important; } } /* id="final-lowercase-tabs-rounded-logo-no-services-underline" */ /* browser/header logo: rounded edges, no sharp square feeling */ .logo-mark, img.logo-mark, .nav .logo-mark, .logo:hover .logo-mark, .logo:focus-visible .logo-mark, .logo:active .logo-mark { border-radius: 9px !important; overflow: hidden !important; clip-path: inset(0 round 9px) !important; background: #ffffff !important; object-fit: cover !important; box-shadow: none !important; } /* services back button: no underline anywhere, only smooth contrast change */ .device-page-back, #devicePage .device-page-back, body.device-route-mode .device-page-back, body.device-route-mode #devicePage .device-page-back, .device-page-back:link, .device-page-back:visited, #devicePage .device-page-back:link, #devicePage .device-page-back:visited { appearance: none !important; -webkit-appearance: none !important; background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; outline: 0 !important; text-decoration: none !important; text-decoration-line: none !important; -webkit-text-decoration-line: none !important; text-decoration-thickness: 0 !important; text-underline-offset: 0 !important; color: rgba(17, 17, 17, 0.72) !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: color 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; } .device-page-back::before, .device-page-back::after, #devicePage .device-page-back::before, #devicePage .device-page-back::after, body.device-route-mode .device-page-back::before, body.device-route-mode .device-page-back::after, body.device-route-mode #devicePage .device-page-back::before, body.device-route-mode #devicePage .device-page-back::after { content: none !important; display: none !important; opacity: 0 !important; width: 0 !important; height: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .device-page-back:hover, .device-page-back:focus, .device-page-back:focus-visible, #devicePage .device-page-back:hover, #devicePage .device-page-back:focus, #devicePage .device-page-back:focus-visible, body.device-route-mode .device-page-back:hover, body.device-route-mode .device-page-back:focus, body.device-route-mode .device-page-back:focus-visible, body.device-route-mode #devicePage .device-page-back:hover, body.device-route-mode #devicePage .device-page-back:focus, body.device-route-mode #devicePage .device-page-back:focus-visible { background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; outline: 0 !important; text-decoration: none !important; text-decoration-line: none !important; -webkit-text-decoration-line: none !important; color: rgba(17, 17, 17, 0.98) !important; opacity: 1 !important; transform: none !important; } .device-page-back:active, #devicePage .device-page-back:active, body.device-route-mode .device-page-back:active, body.device-route-mode #devicePage .device-page-back:active { text-decoration: none !important; text-decoration-line: none !important; color: rgba(17, 17, 17, 0.55) !important; transform: none !important; } /* absolute final fix: product images are pinned static, centered, and never move on hover */ .store-product-photo.has-product-image, body.device-route-mode .store-product-photo.has-product-image, body.device-route-mode #devicePage .store-product-photo.has-product-image { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; isolation: isolate !important; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,1), transparent 48%), linear-gradient(145deg, rgba(255,255,255,0.98), rgba(243,244,245,0.78)) !important; } .store-product-photo.has-product-image::before, body.device-route-mode .store-product-photo.has-product-image::before, body.device-route-mode #devicePage .store-product-photo.has-product-image::before { display: none !important; content: none !important; opacity: 0 !important; } .store-product-image, body.device-route-mode .store-product-image, body.device-route-mode #devicePage .store-product-image { position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; padding: 10px 16px !important; object-fit: contain !important; object-position: center center !important; pointer-events: none !important; opacity: 0 !important; transform: none !important; transform-origin: center center !important; translate: none !important; scale: none !important; rotate: none !important; filter: saturate(1.035) contrast(1.018) brightness(1.01) blur(4px) !important; mix-blend-mode: multiply !important; backface-visibility: hidden !important; will-change: opacity, filter !important; transition: opacity 0.42s ease, filter 0.42s ease !important; } .store-product-image.is-active, body.device-route-mode .store-product-image.is-active, body.device-route-mode #devicePage .store-product-image.is-active, .store-product-card:hover .store-product-image.is-active, .store-product-card:focus-within .store-product-image.is-active, body.device-route-mode .store-product-card:hover .store-product-image.is-active, body.device-route-mode .store-product-card:focus-within .store-product-image.is-active, body.device-route-mode #devicePage .store-product-card:hover .store-product-image.is-active, body.device-route-mode #devicePage .store-product-card:focus-within .store-product-image.is-active { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: saturate(1.055) contrast(1.025) brightness(1.012) blur(0) !important; } .store-product-image:not(.is-active), body.device-route-mode .store-product-image:not(.is-active), body.device-route-mode #devicePage .store-product-image:not(.is-active), .store-product-card:hover .store-product-image:not(.is-active), .store-product-card:focus-within .store-product-image:not(.is-active), body.device-route-mode .store-product-card:hover .store-product-image:not(.is-active), body.device-route-mode .store-product-card:focus-within .store-product-image:not(.is-active), body.device-route-mode #devicePage .store-product-card:hover .store-product-image:not(.is-active), body.device-route-mode #devicePage .store-product-card:focus-within .store-product-image:not(.is-active) { opacity: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: saturate(1.03) contrast(1.01) brightness(1.01) blur(4px) !important; } .store-product-card[data-product-id="google-nest-cam-indoor"] .store-product-image, .store-product-card[data-product-id="nest-cam-indoor-wired"] .store-product-image, .store-product-card[data-product-id="ring-indoor-cam-2nd-gen"] .store-product-image, .store-product-card[data-product-id="ring-spotlight-cam"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="google-nest-cam-indoor"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="nest-cam-indoor-wired"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="ring-indoor-cam-2nd-gen"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="ring-spotlight-cam"] .store-product-image { padding: 6px 12px !important; } .store-product-card[data-product-id="eero-6-mesh-wifi-2-pack"] .store-product-image, .store-product-card[data-product-id="eero-6-mesh-wifi-3-pack"] .store-product-image, .store-product-card[data-product-id="eero-6-wifi-router"] .store-product-image, .store-product-card[data-product-id="tplink-wireless-access-point"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="eero-6-mesh-wifi-2-pack"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="eero-6-mesh-wifi-3-pack"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="eero-6-wifi-router"] .store-product-image, body.device-route-mode #devicePage .store-product-card[data-product-id="tplink-wireless-access-point"] .store-product-image { padding: 8px 14px !important; } @media (max-width: 640px) { .store-product-image, body.device-route-mode .store-product-image, body.device-route-mode #devicePage .store-product-image { padding: 8px 12px !important; } } /* id="emergency-fast-no-lag-static-photos-title" */ /* emergency performance: remove accidental click-blocking overlays */ .product-page-transition:not(.active), #productPageTransition:not(.active) { pointer-events: none !important; } /* product photos: fixed, static, centered — no hover movement, no JS needed */ html body #devicePage .device-product-card.store-product-card .store-product-photo.has-product-image, html body #devicePage .device-product-card.store-product-card:hover .store-product-photo.has-product-image, html body #devicePage .device-product-card.store-product-card:focus-within .store-product-photo.has-product-image, html body.device-route-mode #devicePage .device-product-card.store-product-card .store-product-photo.has-product-image, html body.device-route-mode #devicePage .device-product-card.store-product-card:hover .store-product-photo.has-product-image, html body.device-route-mode #devicePage .device-product-card.store-product-card:focus-within .store-product-photo.has-product-image { position: relative !important; overflow: hidden !important; display: block !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; } html body #devicePage .device-product-card.store-product-card .store-product-photo.has-product-image > img.store-product-image, html body #devicePage .device-product-card.store-product-card:hover .store-product-photo.has-product-image > img.store-product-image, html body #devicePage .device-product-card.store-product-card:focus-within .store-product-photo.has-product-image > img.store-product-image, html body.device-route-mode #devicePage .device-product-card.store-product-card .store-product-photo.has-product-image > img.store-product-image, html body.device-route-mode #devicePage .device-product-card.store-product-card:hover .store-product-photo.has-product-image > img.store-product-image, html body.device-route-mode #devicePage .device-product-card.store-product-card:focus-within .store-product-photo.has-product-image > img.store-product-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 10px 16px !important; object-fit: contain !important; object-position: center center !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; pointer-events: none !important; } html body #devicePage .device-product-card.store-product-card .store-product-photo.has-product-image > img.store-product-image.is-active, html body #devicePage .device-product-card.store-product-card:hover .store-product-photo.has-product-image > img.store-product-image.is-active, html body.device-route-mode #devicePage .device-product-card.store-product-card .store-product-photo.has-product-image > img.store-product-image.is-active, html body.device-route-mode #devicePage .device-product-card.store-product-card:hover .store-product-photo.has-product-image > img.store-product-image.is-active { opacity: 1 !important; } html body #devicePage .device-product-card.store-product-card .store-product-photo.has-product-image > img.store-product-image:not(.is-active), html body #devicePage .device-product-card.store-product-card:hover .store-product-photo.has-product-image > img.store-product-image:not(.is-active), html body.device-route-mode #devicePage .device-product-card.store-product-card .store-product-photo.has-product-image > img.store-product-image:not(.is-active), html body.device-route-mode #devicePage .device-product-card.store-product-card:hover .store-product-photo.has-product-image > img.store-product-image:not(.is-active) { opacity: 0 !important; } /* split title: smooth, compositor-only, no observers */ html body #devicePage .device-page-title { overflow: visible !important; } html body #devicePage .device-page-title-line { display: inline-block !important; opacity: 0; filter: blur(10px); will-change: transform, opacity, filter; } html body #devicePage .device-page-title-line--left { transform: translate3d(-64px, 16px, 0) scale(0.985); } html body #devicePage .device-page-title-line--right { transform: translate3d(64px, 16px, 0) scale(0.985); } html body #devicePage .device-page-title.is-animated .device-page-title-line--left { animation: emergencyTitleFromLeft 920ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards; } html body #devicePage .device-page-title.is-animated .device-page-title-line--right { animation: emergencyTitleFromRight 980ms cubic-bezier(0.16, 1, 0.3, 1) 160ms forwards; } @keyframes emergencyTitleFromLeft { to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } } @keyframes emergencyTitleFromRight { to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { html body #devicePage .device-page-title-line { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; will-change: auto !important; } } /* id="instant-assist-final-text-layout-fix" */ /* final text layout: match clean left-aligned screenshot */ html body #devicePage .device-page-shell, html body.device-route-mode #devicePage .device-page-shell { max-width: none !important; width: 100% !important; margin: 0 !important; padding: clamp(38px, 4.4vw, 72px) clamp(32px, 5vw, 90px) calc(150px + env(safe-area-inset-bottom)) !important; } html body #devicePage .device-page-topbar, html body.device-route-mode #devicePage .device-page-topbar { position: relative !important; top: auto !important; z-index: 5 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 clamp(22px, 2.1vw, 34px) !important; padding: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; } html body #devicePage .device-page-kicker, html body.device-route-mode #devicePage .device-page-kicker { display: none !important; } html body #devicePage .device-page-back, html body.device-route-mode #devicePage .device-page-back { margin: 0 !important; padding: 0 !important; font-size: clamp(17px, 1.22vw, 24px) !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: -0.035em !important; color: rgba(var(--dark-rgb), 0.58) !important; text-decoration: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; transition: color 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; } html body #devicePage .device-page-back:hover, html body #devicePage .device-page-back:focus-visible, html body.device-route-mode #devicePage .device-page-back:hover, html body.device-route-mode #devicePage .device-page-back:focus-visible { color: rgba(var(--dark-rgb), 0.96) !important; text-decoration: none !important; outline: none !important; } html body #devicePage .device-page-back::before, html body #devicePage .device-page-back::after, html body.device-route-mode #devicePage .device-page-back::before, html body.device-route-mode #devicePage .device-page-back::after { display: none !important; content: none !important; } html body #devicePage .device-page-hero, html body.device-route-mode #devicePage .device-page-hero { display: block !important; grid-template-columns: none !important; align-items: start !important; gap: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 0 clamp(30px, 3.2vw, 48px) !important; } html body #devicePage .device-page-hero > div:first-child, html body.device-route-mode #devicePage .device-page-hero > div:first-child { width: 100% !important; max-width: none !important; } html body #devicePage .device-page-title, html body.device-route-mode #devicePage .device-page-title { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font-size: clamp(44px, 6.05vw, 108px) !important; line-height: 0.93 !important; font-weight: 950 !important; letter-spacing: -0.078em !important; color: var(--text) !important; text-align: left !important; white-space: normal !important; overflow: visible !important; perspective: none !important; } html body #devicePage .device-page-title-line, html body.device-route-mode #devicePage .device-page-title-line { display: inline-block !important; opacity: 0; filter: blur(10px); will-change: transform, opacity, filter; text-wrap: normal !important; white-space: nowrap !important; } html body #devicePage .device-page-title-line--left, html body.device-route-mode #devicePage .device-page-title-line--left { margin-right: 0.15em !important; transform: translate3d(-72px, 18px, 0) scale(0.985); } html body #devicePage .device-page-title-line--right, html body.device-route-mode #devicePage .device-page-title-line--right { transform: translate3d(72px, 18px, 0) scale(0.985); } html body #devicePage .device-page-title.is-animated .device-page-title-line--left, html body.device-route-mode #devicePage .device-page-title.is-animated .device-page-title-line--left { animation: cleanDeviceTitleLeft 980ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards !important; } html body #devicePage .device-page-title.is-animated .device-page-title-line--right, html body.device-route-mode #devicePage .device-page-title.is-animated .device-page-title-line--right { animation: cleanDeviceTitleRight 1040ms cubic-bezier(0.16, 1, 0.3, 1) 170ms forwards !important; } @keyframes cleanDeviceTitleLeft { 0% { opacity: 0; filter: blur(10px); transform: translate3d(-72px, 18px, 0) scale(0.985); } 62% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } } @keyframes cleanDeviceTitleRight { 0% { opacity: 0; filter: blur(10px); transform: translate3d(72px, 18px, 0) scale(0.985); } 62% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } } html body #devicePage .device-page-subtitle, html body.device-route-mode #devicePage .device-page-subtitle { display: block !important; width: 100% !important; max-width: none !important; margin: clamp(10px, 0.9vw, 16px) 0 0 !important; padding: 0 !important; color: rgba(var(--dark-rgb), 0.56) !important; font-size: clamp(17px, 1.25vw, 24px) !important; line-height: 1.32 !important; font-weight: 760 !important; letter-spacing: -0.035em !important; text-align: left !important; } html body #devicePage .device-page-subtitle span, html body.device-route-mode #devicePage .device-page-subtitle span { display: inline !important; } html body #devicePage .device-page-service-pill, html body.device-route-mode #devicePage .device-page-service-pill { display: none !important; } html body #devicePage .device-store, html body.device-route-mode #devicePage .device-store { margin-top: 0 !important; } @media (max-width: 760px) { html body #devicePage .device-page-shell, html body.device-route-mode #devicePage .device-page-shell { padding: 28px 20px calc(140px + env(safe-area-inset-bottom)) !important; } html body #devicePage .device-page-topbar, html body.device-route-mode #devicePage .device-page-topbar { margin-bottom: 20px !important; } html body #devicePage .device-page-title, html body.device-route-mode #devicePage .device-page-title { font-size: clamp(42px, 14vw, 64px) !important; line-height: 0.94 !important; } } @media (prefers-reduced-motion: reduce) { html body #devicePage .device-page-title-line, html body.device-route-mode #devicePage .device-page-title-line { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; will-change: auto !important; } } /* id="instant-assist-requested-device-title-and-estimate-scroll" */ /* requested final adjustment: smaller add-devices title + smoother estimate handoff */ html body #devicePage .device-page-title, html body.device-route-mode #devicePage .device-page-title { font-size: clamp(24px, 2.6vw, 42px) !important; line-height: 1.04 !important; letter-spacing: -0.052em !important; font-weight: 900 !important; } html body #devicePage .device-page-title-line, html body.device-route-mode #devicePage .device-page-title-line { white-space: nowrap !important; } @media (max-width: 760px) { html body #devicePage .device-page-title, html body.device-route-mode #devicePage .device-page-title { font-size: clamp(27px, 8.4vw, 40px) !important; line-height: 1.02 !important; } } .service-request-button.is-scrolling-estimate, .estimate-scroll.is-scrolling-estimate, #deviceContinueButton.is-scrolling-estimate { transform: translateY(-1px) scale(0.992) !important; filter: brightness(1.025) !important; pointer-events: none !important; } /* id="instant-assist-final-requested-polish" */ /* final requested polish: premium add-devices title + working estimate scroll/button states */ html body #devicePage .device-page-hero, html body.device-route-mode #devicePage .device-page-hero { align-items: end !important; padding: clamp(30px, 5vw, 58px) 0 clamp(22px, 3vw, 34px) !important; } html body #devicePage .device-page-title, html body.device-route-mode #devicePage .device-page-title { position: relative !important; display: block !important; max-width: 980px !important; margin: 0 !important; padding: 0 !important; color: var(--text) !important; font-size: clamp(46px, 7.6vw, 82px) !important; line-height: 0.92 !important; letter-spacing: -0.075em !important; font-weight: 950 !important; text-align: left !important; overflow: visible !important; text-wrap: balance !important; font-family: var(--apple-font) !important; } html body #devicePage .device-page-title::after, html body.device-route-mode #devicePage .device-page-title::after { content: "" !important; position: absolute !important; left: -4% !important; top: 51% !important; width: 108% !important; height: 1px !important; border-radius: 999px !important; background: linear-gradient( 90deg, transparent, rgba(var(--dark-rgb), 0.10), rgba(var(--dark-rgb), 0.28), rgba(var(--dark-rgb), 0.10), transparent ) !important; opacity: 0 !important; pointer-events: none !important; transform: translateX(-22%) scaleX(0.35) !important; } html body #devicePage .device-page-title.is-animated::after, html body.device-route-mode #devicePage .device-page-title.is-animated::after { animation: finalDeviceTitleScan 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.52s forwards !important; } html body #devicePage .device-page-title-line, html body.device-route-mode #devicePage .device-page-title-line { display: block !important; width: fit-content !important; max-width: 100% !important; opacity: 0 !important; filter: blur(18px) !important; will-change: transform, opacity, filter !important; white-space: normal !important; text-wrap: balance !important; transform-origin: center left !important; } html body #devicePage .device-page-title-line--left, html body.device-route-mode #devicePage .device-page-title-line--left { margin: 0 !important; transform: translate3d(-12%, 24px, 0) skewX(-5deg) scale(0.985) !important; } html body #devicePage .device-page-title-line--right, html body.device-route-mode #devicePage .device-page-title-line--right { margin: 0 !important; transform: translate3d(10%, 24px, 0) skewX(5deg) scale(0.985) !important; } html body #devicePage .device-page-title.is-animated .device-page-title-line--left, html body.device-route-mode #devicePage .device-page-title.is-animated .device-page-title-line--left { animation: finalDeviceTitleLeft 1.08s cubic-bezier(0.16, 1, 0.3, 1) 0.08s forwards !important; } html body #devicePage .device-page-title.is-animated .device-page-title-line--right, html body.device-route-mode #devicePage .device-page-title.is-animated .device-page-title-line--right { animation: finalDeviceTitleRight 1.12s cubic-bezier(0.16, 1, 0.3, 1) 0.20s forwards !important; } @keyframes finalDeviceTitleLeft { 0% { opacity: 0; filter: blur(18px); transform: translate3d(-12%, 24px, 0) skewX(-5deg) scale(0.985); } 58% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) skewX(0) scale(1); } } @keyframes finalDeviceTitleRight { 0% { opacity: 0; filter: blur(18px); transform: translate3d(10%, 24px, 0) skewX(5deg) scale(0.985); } 58% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) skewX(0) scale(1); } } @keyframes finalDeviceTitleScan { 0% { opacity: 0; transform: translateX(-22%) scaleX(0.35); } 32% { opacity: 0.52; } 100% { opacity: 0; transform: translateX(20%) scaleX(1); } } .service-request-button.is-scrolling-estimate, .estimate-scroll.is-scrolling-estimate, .nav-cta.is-scrolling-estimate { pointer-events: none !important; transform: translateY(-1px) scale(0.992) !important; filter: brightness(1.025) !important; } .service-add-device-button.is-opening-add-device { pointer-events: none !important; transform: translateY(-1px) scale(0.992) !important; filter: brightness(1.025) !important; } .service-add-device-button.is-opening-add-device::after { left: 126% !important; opacity: 0.62 !important; } #productPageTransition.product-page-transition, .product-page-transition { transition: opacity 0.64s ease, visibility 0.64s ease, backdrop-filter 0.64s ease !important; } #productPageTransition.product-page-transition.active .product-page-transition-card, .product-page-transition.active .product-page-transition-card { animation: finalLoaderCardBreath 1.2s cubic-bezier(0.16, 1, 0.3, 1) both !important; } @keyframes finalLoaderCardBreath { 0% { opacity: 0; transform: translateY(20px) scale(0.97); filter: blur(14px); } 62% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @media (max-width: 760px) { html body #devicePage .device-page-hero, html body.device-route-mode #devicePage .device-page-hero { padding: 30px 0 24px !important; } html body #devicePage .device-page-title, html body.device-route-mode #devicePage .device-page-title { font-size: clamp(44px, 14vw, 66px) !important; line-height: 0.94 !important; letter-spacing: -0.072em !important; } html body #devicePage .device-page-title-line, html body.device-route-mode #devicePage .device-page-title-line { width: 100% !important; } } @media (prefers-reduced-motion: reduce) { html body #devicePage .device-page-title::after, html body.device-route-mode #devicePage .device-page-title::after, html body #devicePage .device-page-title-line, html body.device-route-mode #devicePage .device-page-title-line, #productPageTransition.product-page-transition.active .product-page-transition-card, .product-page-transition.active .product-page-transition-card { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; } } /* id="instant-assist-final-visible-add-devices-heading" */ /* final fix: visible premium add-devices heading, safe over all previous overrides */ html body #devicePage .device-page-hero, html body.device-route-mode #devicePage .device-page-hero { display: block !important; padding: clamp(24px, 3.4vw, 44px) 0 clamp(18px, 2.2vw, 30px) !important; margin: 0 !important; } html body #devicePage .device-page-title, html body.device-route-mode #devicePage .device-page-title { position: relative !important; display: block !important; width: min(100%, 960px) !important; max-width: 960px !important; margin: 0 !important; padding: 0 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; background: transparent !important; font-family: var(--apple-font) !important; font-size: clamp(44px, 5.6vw, 88px) !important; line-height: 0.92 !important; letter-spacing: -0.078em !important; font-weight: 950 !important; text-align: left !important; white-space: normal !important; overflow: visible !important; transform: none !important; filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; } html body #devicePage .device-page-title::after, html body.device-route-mode #devicePage .device-page-title::after { content: "" !important; position: absolute !important; left: -4% !important; top: 51% !important; width: 108% !important; height: 1px !important; border-radius: 999px !important; background: linear-gradient(90deg, transparent, rgba(var(--dark-rgb), 0.10), rgba(var(--dark-rgb), 0.24), rgba(var(--dark-rgb), 0.10), transparent) !important; opacity: 0 !important; pointer-events: none !important; transform: translateX(-20%) scaleX(0.35) !important; } html body #devicePage.active .device-page-title::after, html body.device-route-mode #devicePage.active .device-page-title::after { animation: visibleAddDevicesScan 1.28s cubic-bezier(0.16, 1, 0.3, 1) 0.46s forwards !important; } html body #devicePage .device-page-title-line, html body.device-route-mode #devicePage .device-page-title-line { display: block !important; width: fit-content !important; max-width: 100% !important; margin: 0 !important; padding: 0.018em 0 !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: transparent !important; opacity: 1 !important; filter: none !important; transform: none !important; white-space: normal !important; text-wrap: balance !important; overflow: visible !important; } html body #devicePage .device-page-title-line--right, html body.device-route-mode #devicePage .device-page-title-line--right { color: rgba(var(--dark-rgb), 0.78) !important; -webkit-text-fill-color: rgba(var(--dark-rgb), 0.78) !important; } html body #devicePage .device-page-title-word, html body.device-route-mode #devicePage .device-page-title-word { display: inline-block !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: transparent !important; opacity: 0; filter: blur(14px); will-change: transform, opacity, filter; } html body #devicePage.active .device-page-title-line--left .device-page-title-word, html body.device-route-mode #devicePage.active .device-page-title-line--left .device-page-title-word { animation: visibleAddDevicesLeft 1.02s cubic-bezier(0.16, 1, 0.3, 1) 0.06s forwards !important; } html body #devicePage.active .device-page-title-line--right .device-page-title-word, html body.device-route-mode #devicePage.active .device-page-title-line--right .device-page-title-word { animation: visibleAddDevicesRight 1.08s cubic-bezier(0.16, 1, 0.3, 1) 0.17s forwards !important; } html body #devicePage .device-page-subtitle, html body.device-route-mode #devicePage .device-page-subtitle { max-width: 780px !important; margin: clamp(10px, 1vw, 16px) 0 0 !important; color: rgba(var(--dark-rgb), 0.56) !important; font-size: clamp(16px, 1.2vw, 21px) !important; line-height: 1.36 !important; font-weight: 720 !important; letter-spacing: -0.03em !important; } @keyframes visibleAddDevicesLeft { 0% { opacity: 0; filter: blur(14px); transform: translate3d(-56px, 18px, 0) skewX(-4deg) scale(0.985); } 62% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) skewX(0) scale(1); } } @keyframes visibleAddDevicesRight { 0% { opacity: 0; filter: blur(14px); transform: translate3d(56px, 18px, 0) skewX(4deg) scale(0.985); } 62% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) skewX(0) scale(1); } } @keyframes visibleAddDevicesScan { 0% { opacity: 0; transform: translateX(-20%) scaleX(0.35); } 32% { opacity: 0.42; } 100% { opacity: 0; transform: translateX(18%) scaleX(1); } } @media (max-width: 760px) { html body #devicePage .device-page-hero, html body.device-route-mode #devicePage .device-page-hero { padding: 22px 0 20px !important; } html body #devicePage .device-page-title, html body.device-route-mode #devicePage .device-page-title { width: 100% !important; max-width: 100% !important; font-size: clamp(40px, 12vw, 62px) !important; line-height: 0.94 !important; letter-spacing: -0.072em !important; } } @media (prefers-reduced-motion: reduce) { html body #devicePage .device-page-title-word, html body.device-route-mode #devicePage .device-page-title-word { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; will-change: auto !important; } } /* id="instant-assist-desktop-centered-title-and-no-bag-icon-final" */ /* final desktop composition fix: centered add-devices hero, less empty desktop space, no square icon in continue dock */ #deviceBottomBag .device-bottom-bag-copy, body.device-route-mode #deviceBottomBag .device-bottom-bag-copy, #devicePage #deviceBottomBag .device-bottom-bag-copy { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; padding-left: 0 !important; } #deviceBottomBag .device-bottom-bag-copy::before, #deviceBottomBag .device-bottom-bag-copy::after, body.device-route-mode #deviceBottomBag .device-bottom-bag-copy::before, body.device-route-mode #deviceBottomBag .device-bottom-bag-copy::after, #devicePage #deviceBottomBag .device-bottom-bag-copy::before, #devicePage #deviceBottomBag .device-bottom-bag-copy::after { content: none !important; display: none !important; } #deviceBottomBag .device-bottom-bag-count, #deviceBottomBag .device-bottom-bag-preview, body.device-route-mode #deviceBottomBag .device-bottom-bag-count, body.device-route-mode #deviceBottomBag .device-bottom-bag-preview, #devicePage #deviceBottomBag .device-bottom-bag-count, #devicePage #deviceBottomBag .device-bottom-bag-preview { grid-column: 1 !important; } @media (min-width: 761px) { html body.device-route-mode #devicePage .device-page-shell, html body #devicePage .device-page-shell { max-width: 1180px !important; padding-top: clamp(18px, 2.6vh, 32px) !important; padding-left: clamp(24px, 3vw, 44px) !important; padding-right: clamp(24px, 3vw, 44px) !important; } html body.device-route-mode #devicePage .device-page-topbar, html body #devicePage .device-page-topbar { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; padding-bottom: clamp(18px, 2.6vw, 34px) !important; } html body.device-route-mode #devicePage .device-page-hero, html body #devicePage .device-page-hero { width: min(100%, 980px) !important; max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; padding: clamp(4px, 0.8vw, 12px) 0 clamp(16px, 1.8vw, 24px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } html body.device-route-mode #devicePage .device-page-hero > div:first-child, html body #devicePage .device-page-hero > div:first-child { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } html body.device-route-mode #devicePage .device-page-title, html body #devicePage .device-page-title { width: min(100%, 900px) !important; max-width: 900px !important; margin: 0 auto !important; text-align: center !important; font-size: clamp(54px, 4.85vw, 78px) !important; line-height: 0.925 !important; letter-spacing: -0.078em !important; transform-origin: center center !important; } html body.device-route-mode #devicePage .device-page-title-line, html body #devicePage .device-page-title-line { width: 100% !important; max-width: 100% !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } html body.device-route-mode #devicePage .device-page-title-line--right, html body #devicePage .device-page-title-line--right { color: rgba(var(--dark-rgb), 0.76) !important; -webkit-text-fill-color: rgba(var(--dark-rgb), 0.76) !important; } html body.device-route-mode #devicePage .device-page-title::after, html body #devicePage .device-page-title::after { left: 6% !important; width: 88% !important; } html body.device-route-mode #devicePage .device-page-subtitle, html body #devicePage .device-page-subtitle { width: min(100%, 740px) !important; max-width: 740px !important; margin: clamp(10px, 0.9vw, 14px) auto 0 !important; text-align: center !important; font-size: clamp(16px, 1.15vw, 19px) !important; line-height: 1.4 !important; letter-spacing: -0.025em !important; } html body.device-route-mode #devicePage .device-store, html body #devicePage .device-store { margin-top: 0 !important; } html body.device-route-mode #devicePage .device-filter-row, html body #devicePage .device-filter-row { width: min(100%, 960px) !important; max-width: 960px !important; margin: 2px auto 18px !important; padding: 10px 0 12px !important; justify-content: center !important; } html body.device-route-mode #devicePage .device-store-grid, html body #devicePage .device-store-grid { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; } } /* id="instant-assist-desktop-one-line-add-devices-title-final" */ /* requested: desktop only — keep add devices / to your service on one elegant line; mobile stays unchanged */ @media (min-width: 761px) { html body.device-route-mode #devicePage .device-page-hero, html body #devicePage .device-page-hero { width: min(100%, 1180px) !important; max-width: 1180px !important; padding-top: clamp(6px, 0.9vw, 14px) !important; padding-bottom: clamp(16px, 1.7vw, 24px) !important; } html body.device-route-mode #devicePage .device-page-title, html body #devicePage .device-page-title { width: min(100%, 1180px) !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; white-space: nowrap !important; font-size: clamp(48px, 4.15vw, 76px) !important; line-height: 0.98 !important; letter-spacing: -0.079em !important; } html body.device-route-mode #devicePage .device-page-title-line, html body #devicePage .device-page-title-line { display: inline-block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: inherit !important; white-space: nowrap !important; vertical-align: baseline !important; } html body.device-route-mode #devicePage .device-page-title-line--left, html body #devicePage .device-page-title-line--left { margin-right: 0.13em !important; } html body.device-route-mode #devicePage .device-page-title-line--right, html body #devicePage .device-page-title-line--right { color: rgba(var(--dark-rgb), 0.76) !important; -webkit-text-fill-color: rgba(var(--dark-rgb), 0.76) !important; } html body.device-route-mode #devicePage .device-page-subtitle, html body #devicePage .device-page-subtitle { margin-top: clamp(12px, 1vw, 16px) !important; } } /* id="instant-assist-soft-phone-panel-final" */ /* final requested tweak — softer phone action panel + smoother action switching */ .phone-choice-overlay.active { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.20), transparent 36%), rgba(var(--dark-rgb), 0.44) !important; backdrop-filter: blur(28px) saturate(1.10) !important; -webkit-backdrop-filter: blur(28px) saturate(1.10) !important; } .phone-choice-sheet, .phone-choice-overlay.active .phone-choice-sheet { width: min(382px, calc(100vw - 50px)) !important; padding: 58px 0 0 !important; margin: 0 !important; overflow: visible !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .phone-choice-close { background: rgba(255,255,255,0.40) !important; color: rgba(var(--dark-rgb), 0.46) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.095), inset 0 1px 0 rgba(255,255,255,0.36) !important; transition: background 0.54s cubic-bezier(0.16, 1, 0.3, 1), color 0.54s ease, transform 0.64s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.54s ease !important; } .phone-choice-close:hover, .phone-choice-close:focus-visible { background: rgba(255,255,255,0.62) !important; color: rgba(var(--dark-rgb), 0.72) !important; transform: rotate(90deg) scale(1.025) !important; box-shadow: 0 16px 34px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.44) !important; } .phone-choice-actions { gap: 12px !important; } .phone-choice-action, .phone-choice-action.copied, .phone-action.copied { min-height: 54px !important; border: 1px solid rgba(255,255,255,0.24) !important; border-radius: 26px !important; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.58), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.64), rgba(247,247,245,0.50)) !important; color: rgba(var(--dark-rgb), 0.76) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.095), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(var(--dark-rgb),0.018) !important; backdrop-filter: blur(24px) saturate(1.10) !important; -webkit-backdrop-filter: blur(24px) saturate(1.10) !important; transform: translateY(0) scale(1) !important; filter: brightness(1) saturate(1) !important; opacity: 1 !important; transition: background 0.62s cubic-bezier(0.16, 1, 0.3, 1), color 0.54s ease, border-color 0.54s ease, transform 0.68s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.62s ease, filter 0.62s ease, opacity 0.54s ease !important; } .phone-choice-actions:hover .phone-choice-action:not(:hover):not(:focus-visible):not(.copied) { opacity: 0.82 !important; transform: translateY(0) scale(0.992) !important; filter: brightness(0.985) saturate(0.96) !important; box-shadow: 0 10px 26px rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.34) !important; } .phone-choice-action:hover, .phone-choice-action:focus-visible { background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.72), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,248,246,0.66)) !important; color: rgba(var(--dark-rgb), 0.90) !important; border-color: rgba(255,255,255,0.38) !important; transform: translateY(-1px) scale(1.004) !important; box-shadow: 0 18px 42px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255,255,255,0.50), inset 0 -1px 0 rgba(var(--dark-rgb),0.014) !important; outline: none !important; filter: brightness(1.018) saturate(1.02) !important; opacity: 1 !important; } .phone-choice-action:active { transform: translateY(0) scale(0.992) !important; transition-duration: 0.18s !important; } #copyPhoneSheetButton.copied, #copyPhoneButton.copied, .phone-choice-action.copied, .phone-action.copied { background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.76), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.78), rgba(244,244,242,0.62)) !important; color: rgba(var(--dark-rgb), 0.88) !important; border-color: rgba(255,255,255,0.40) !important; box-shadow: 0 18px 42px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.50) !important; transform: translateY(-1px) scale(1.002) !important; animation: copiedSoftGlow 0.72s cubic-bezier(0.16, 1, 0.3, 1) 1 !important; } @keyframes copiedSoftGlow { 0% { transform: translateY(0) scale(0.99); filter: brightness(0.98); } 55% { transform: translateY(-1px) scale(1.006); filter: brightness(1.035); } 100% { transform: translateY(-1px) scale(1.002); filter: brightness(1); } } @media (max-width: 620px) { .phone-choice-overlay.active { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.18), transparent 36%), rgba(var(--dark-rgb), 0.43) !important; backdrop-filter: blur(26px) saturate(1.08) !important; -webkit-backdrop-filter: blur(26px) saturate(1.08) !important; } .phone-choice-actions { gap: 10px !important; } .phone-choice-action, .phone-choice-action.copied { min-height: 52px !important; border-radius: 25px !important; } } /* id="final-technical-stability-pass" */ /* technical stability pass only: no layout, color, logic or content changes */ .hero-card, .service-card, .quick-link, .btn, .nav-cta, .service-action, .contact-modal, .contact-card-item, .phone-choice-sheet, .phone-choice-action, .estimate-box, .estimate-form, .estimate-form-toggle, .store-product-card, .store-product-photo, .store-product-image, .device-filter-chip, .device-continue-button, .device-cart-card, .device-product-card, .device-product-add, .device-product-stepper, .photo-preview-item { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; } .store-product-image, .photo-preview-item img, .logo-mark { image-rendering: auto; } @supports (content-visibility: auto) { #why, #process, footer { content-visibility: auto; contain-intrinsic-size: auto 640px; } } /* Responsive refinements */ /* final tiny patch: smoother submit hover fill only */ .form-submit { position: relative; isolation: isolate; overflow: hidden; background: #ffffff !important; color: var(--dark) !important; will-change: transform, box-shadow, color; -webkit-tap-highlight-color: transparent; transition: color 0.42s ease, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.48s ease, filter 0.48s ease !important; } .form-submit::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.10), transparent 52%), linear-gradient(180deg, #17191d 0%, #0b0c0e 100%); opacity: 0; transform: scale(1.015); transition: opacity 0.46s ease, transform 0.56s cubic-bezier(0.16, 1, 0.3, 1); } .form-submit:hover, .form-submit:focus-visible { color: #ffffff !important; background: #ffffff !important; transform: translate3d(0, -1px, 0) scale(1.002) !important; box-shadow: 0 28px 58px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important; outline: none; } .form-submit:hover::before, .form-submit:focus-visible::before { opacity: 1; transform: scale(1); } .form-submit:active { transform: translate3d(0, 0, 0) scale(0.997) !important; transition-duration: 0.18s !important; } .estimate-form.is-sending .form-submit::before, .form-submit:disabled::before { opacity: 0 !important; } .estimate-form.is-sending .form-submit, .form-submit:disabled { color: var(--dark) !important; background: #ffffff !important; transform: scale(0.998) !important; } /* id="instant-assist-mobile-estimate-and-actions" */ @media (max-width: 760px) { #estimateBox .contact-actions { align-items: center !important; } #estimateBox .text-button { width: min(100%, 330px) !important; min-height: 54px !important; padding: 14px 21px !important; gap: 8px !important; border-radius: 21px !important; } #estimateBox .text-label { font-size: 13px !important; } #estimateBox .text-number { font-size: 16px !important; } #estimateBox .estimate-form-toggle { width: min(100%, 300px) !important; min-height: 46px !important; padding: 11px 17px !important; border-radius: 18px !important; font-size: 12.5px !important; } #estimateBox .form-submit { display: flex !important; width: min(100%, 250px) !important; min-height: 48px !important; margin: 18px auto 0 !important; padding: 12px 20px !important; border-radius: 18px !important; } .phone-choice-sheet, .phone-choice-overlay.active .phone-choice-sheet { width: min(310px, calc(100vw - 64px)) !important; padding-top: 52px !important; } .phone-choice-actions { gap: 8px !important; padding: 0 !important; } .phone-choice-action, .phone-choice-action.copied { width: 100% !important; min-height: 46px !important; padding: 11px 18px !important; border-radius: 18px !important; font-size: 13px !important; box-shadow: 0 10px 24px rgba(0,0,0,0.085), inset 0 1px 0 rgba(255,255,255,0.42) !important; } .phone-choice-close { top: 4px !important; right: 4px !important; width: 36px !important; height: 36px !important; } } @media (max-width: 390px) { #estimateBox .text-button { width: min(100%, 300px) !important; } #estimateBox .estimate-form-toggle { width: min(100%, 274px) !important; } .phone-choice-sheet, .phone-choice-overlay.active .phone-choice-sheet { width: min(292px, calc(100vw - 52px)) !important; } } /* id="instant-assist-refined-device-dock-and-mobile-form" */ #deviceBottomBag.device-bottom-bag, body.device-route-mode #deviceBottomBag.device-bottom-bag, #devicePage #deviceBottomBag.device-bottom-bag { width: min(590px, calc(100vw - 36px)) !important; min-height: 74px !important; gap: 14px !important; padding: 11px 12px 11px 18px !important; border-radius: 25px !important; border-color: rgba(11, 12, 14, 0.065) !important; background: radial-gradient(circle at 18% -20%, rgba(255,255,255,0.98), transparent 52%), linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,248,246,0.72)) !important; box-shadow: 0 22px 58px rgba(11,12,14,0.105), 0 7px 20px rgba(11,12,14,0.052), inset 0 1px 0 rgba(255,255,255,0.94), inset 0 -1px 0 rgba(11,12,14,0.022) !important; } #deviceBottomBag .device-bottom-bag-copy, body.device-route-mode #deviceBottomBag .device-bottom-bag-copy, #devicePage #deviceBottomBag .device-bottom-bag-copy { row-gap: 3px !important; } #deviceBottomBag .device-bottom-bag-count, body.device-route-mode #deviceBottomBag .device-bottom-bag-count, #devicePage #deviceBottomBag .device-bottom-bag-count { font-size: 14px !important; letter-spacing: -0.026em !important; } #deviceBottomBag .device-bottom-bag-preview, body.device-route-mode #deviceBottomBag .device-bottom-bag-preview, #devicePage #deviceBottomBag .device-bottom-bag-preview { max-width: 300px !important; font-size: 11.5px !important; color: rgba(11,12,14,0.46) !important; } #deviceBottomBag .device-bottom-bag-actions, body.device-route-mode #deviceBottomBag .device-bottom-bag-actions, #devicePage #deviceBottomBag .device-bottom-bag-actions { display: flex !important; justify-content: flex-end !important; gap: 7px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #deviceContinueButton.device-continue-button, body.device-route-mode #deviceContinueButton.device-continue-button, #devicePage #deviceContinueButton.device-continue-button, #deviceContinueButton { width: auto !important; min-width: 166px !important; max-width: 210px !important; height: 42px !important; min-height: 42px !important; padding: 0 18px !important; border-radius: 16px !important; font-size: 12.25px !important; letter-spacing: -0.012em !important; background: linear-gradient(180deg, #1a1b1e, #0b0c0e) !important; box-shadow: 0 12px 27px rgba(11,12,14,0.18), inset 0 1px 0 rgba(255,255,255,0.15) !important; } #deviceBottomBag .device-bag-clear, body.device-route-mode #deviceBottomBag .device-bag-clear, #devicePage #deviceBottomBag .device-bag-clear { order: 2 !important; width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; border-radius: 16px !important; background: rgba(255,255,255,0.58) !important; color: rgba(11,12,14,0.42) !important; box-shadow: 0 8px 18px rgba(11,12,14,0.045), inset 0 1px 0 rgba(255,255,255,0.92) !important; } #deviceBottomBag .device-bag-clear::after, body.device-route-mode #deviceBottomBag .device-bag-clear::after, #devicePage #deviceBottomBag .device-bag-clear::after { content: "\00d7" !important; font-size: 20px !important; font-weight: 420 !important; opacity: 0.72 !important; } @media (max-width: 760px) { #deviceBottomBag.device-bottom-bag, body.device-route-mode #deviceBottomBag.device-bottom-bag, #devicePage #deviceBottomBag.device-bottom-bag { left: 12px !important; right: 12px !important; width: auto !important; gap: 10px !important; padding: 13px !important; border-radius: 25px !important; } #deviceBottomBag .device-bottom-bag-copy, body.device-route-mode #deviceBottomBag .device-bottom-bag-copy, #devicePage #deviceBottomBag .device-bottom-bag-copy { min-height: 41px !important; padding: 1px 4px 0 !important; } #deviceBottomBag .device-bottom-bag-count, body.device-route-mode #deviceBottomBag .device-bottom-bag-count, #devicePage #deviceBottomBag .device-bottom-bag-count { font-size: 16px !important; line-height: 1.08 !important; } #deviceBottomBag .device-bottom-bag-preview, body.device-route-mode #deviceBottomBag .device-bottom-bag-preview, #devicePage #deviceBottomBag .device-bottom-bag-preview { max-width: 100% !important; font-size: 12px !important; } #deviceBottomBag .device-bottom-bag-actions, body.device-route-mode #deviceBottomBag .device-bottom-bag-actions, #devicePage #deviceBottomBag .device-bottom-bag-actions { width: 100% !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; } #deviceContinueButton.device-continue-button, body.device-route-mode #deviceContinueButton.device-continue-button, #devicePage #deviceContinueButton.device-continue-button, #deviceContinueButton { width: min(100%, 232px) !important; min-width: 0 !important; max-width: 232px !important; height: 46px !important; min-height: 46px !important; padding: 0 18px !important; border-radius: 17px !important; font-size: 12.5px !important; } #deviceBottomBag .device-bag-clear, body.device-route-mode #deviceBottomBag .device-bag-clear, #devicePage #deviceBottomBag .device-bag-clear { width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; border-radius: 17px !important; } #estimateBox .estimate-form-panel-inner { border-radius: 25px !important; } #estimateBox .estimate-form { padding: 17px 14px 16px !important; border-radius: 24px !important; } #estimateBox .selected-device-note { gap: 10px !important; padding: 11px 12px !important; border-radius: 18px !important; } #estimateBox .selected-device-note-icon { width: 32px !important; min-width: 32px !important; height: 32px !important; border-radius: 12px !important; } #estimateBox .selected-device-note-label { font-size: 9px !important; letter-spacing: 0.13em !important; } #estimateBox .selected-device-note-value { font-size: 13px !important; line-height: 1.2 !important; } #estimateBox .form-grid { gap: 13px 10px !important; } #estimateBox .form-field input, #estimateBox .form-field textarea, #estimateBox .service-select-trigger { border-radius: 17px !important; } #estimateBox .form-field input, #estimateBox .service-select-trigger { min-height: 52px !important; } #estimateBox .form-field textarea { min-height: 102px !important; } #estimateBox .file-upload-label { min-height: 76px !important; border-radius: 17px !important; } } @media (max-width: 390px) { #deviceContinueButton.device-continue-button, body.device-route-mode #deviceContinueButton.device-continue-button, #devicePage #deviceContinueButton.device-continue-button, #deviceContinueButton { width: min(100%, 220px) !important; max-width: 220px !important; } } /* id="instant-assist-stable-continue-hover" */ #deviceBottomBag.device-bottom-bag.active:hover, body.device-route-mode #deviceBottomBag.device-bottom-bag.active:hover, #devicePage #deviceBottomBag.device-bottom-bag.active:hover { transform: translate3d(-50%, 0, 0) scale(1) !important; } #deviceContinueButton.device-continue-button, body.device-route-mode #deviceContinueButton.device-continue-button, #devicePage #deviceContinueButton.device-continue-button, #deviceContinueButton { position: relative !important; isolation: isolate !important; overflow: hidden !important; background: linear-gradient(180deg, #1a1b1e, #0b0c0e) !important; transform: translate3d(0, 0, 0) scale(1) !important; will-change: transform, box-shadow, filter !important; transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.62s ease, box-shadow 0.72s cubic-bezier(0.16, 1, 0.3, 1), filter 0.66s ease, background 0.66s ease !important; } #deviceContinueButton.device-continue-button::before, body.device-route-mode #deviceContinueButton.device-continue-button::before, #devicePage #deviceContinueButton.device-continue-button::before, #deviceContinueButton::before { content: none !important; display: none !important; opacity: 0 !important; } #deviceContinueButton.device-continue-button:hover:not(:disabled), body.device-route-mode #deviceContinueButton.device-continue-button:hover:not(:disabled), #devicePage #deviceContinueButton.device-continue-button:hover:not(:disabled), #deviceContinueButton:hover:not(:disabled), #deviceContinueButton.device-continue-button:focus-visible, body.device-route-mode #deviceContinueButton.device-continue-button:focus-visible, #devicePage #deviceContinueButton.device-continue-button:focus-visible, #deviceContinueButton:focus-visible { background: linear-gradient(180deg, #151619, #08090a) !important; border-color: rgba(255,255,255,0.13) !important; transform: translate3d(0, -2px, 0) scale(1) !important; filter: brightness(0.965) !important; box-shadow: 0 18px 34px rgba(11,12,14,0.205), 0 5px 12px rgba(11,12,14,0.095), inset 0 1px 0 rgba(255,255,255,0.10) !important; outline: none !important; } #deviceContinueButton.device-continue-button:hover:not(:disabled)::before, body.device-route-mode #deviceContinueButton.device-continue-button:hover:not(:disabled)::before, #devicePage #deviceContinueButton.device-continue-button:hover:not(:disabled)::before, #deviceContinueButton:hover:not(:disabled)::before, #deviceContinueButton.device-continue-button:focus-visible::before, body.device-route-mode #deviceContinueButton.device-continue-button:focus-visible::before, #devicePage #deviceContinueButton.device-continue-button:focus-visible::before, #deviceContinueButton:focus-visible::before { display: none !important; opacity: 0 !important; } @media (max-width: 760px) { #deviceBottomBag.device-bottom-bag.active:hover, body.device-route-mode #deviceBottomBag.device-bottom-bag.active:hover, #devicePage #deviceBottomBag.device-bottom-bag.active:hover { transform: translate3d(0, 0, 0) scale(1) !important; } } @media (prefers-reduced-motion: reduce) { #deviceContinueButton.device-continue-button, #deviceContinueButton.device-continue-button::before { transition: none !important; } } /* id="instant-assist-perfect-mobile-device-dock" */ @media (max-width: 760px) { #deviceBottomBag.device-bottom-bag, body.device-route-mode #deviceBottomBag.device-bottom-bag, #devicePage #deviceBottomBag.device-bottom-bag { left: 12px !important; right: 12px !important; width: auto !important; min-height: 0 !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 9px !important; padding: 10px !important; border-radius: 22px !important; box-shadow: 0 20px 52px rgba(11,12,14,0.105), 0 6px 18px rgba(11,12,14,0.045), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(11,12,14,0.020) !important; } #deviceBottomBag .device-bottom-bag-copy, body.device-route-mode #deviceBottomBag .device-bottom-bag-copy, #devicePage #deviceBottomBag .device-bottom-bag-copy { width: 100% !important; min-width: 0 !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 0 0 0 3px !important; text-align: left !important; } #deviceBottomBag .device-bottom-bag-count, body.device-route-mode #deviceBottomBag .device-bottom-bag-count, #devicePage #deviceBottomBag .device-bottom-bag-count { display: block !important; width: 100% !important; color: rgba(11,12,14,0.94) !important; font-size: 13.5px !important; line-height: 1.08 !important; letter-spacing: -0.028em !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #deviceBottomBag .device-bottom-bag-preview, body.device-route-mode #deviceBottomBag .device-bottom-bag-preview, #devicePage #deviceBottomBag .device-bottom-bag-preview { display: block !important; width: 100% !important; max-width: 100% !important; color: rgba(11,12,14,0.47) !important; font-size: 10.75px !important; line-height: 1.16 !important; letter-spacing: -0.012em !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #deviceBottomBag .device-bottom-bag-actions, body.device-route-mode #deviceBottomBag .device-bottom-bag-actions, #devicePage #deviceBottomBag .device-bottom-bag-actions { width: auto !important; min-height: 40px !important; position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 auto !important; padding: 0 !important; } #deviceContinueButton.device-continue-button, body.device-route-mode #deviceContinueButton.device-continue-button, #devicePage #deviceContinueButton.device-continue-button, #deviceContinueButton { flex: 0 0 auto !important; width: clamp(142px, 38vw, 190px) !important; min-width: 0 !important; max-width: 190px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 12px !important; border-radius: 14px !important; font-size: 11.25px !important; line-height: 1 !important; } #deviceBottomBag .device-bag-clear, body.device-route-mode #deviceBottomBag .device-bag-clear, #devicePage #deviceBottomBag .device-bag-clear { position: static !important; flex: none !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 14px !important; } #deviceBottomBag .device-bag-clear::after, body.device-route-mode #deviceBottomBag .device-bag-clear::after, #devicePage #deviceBottomBag .device-bag-clear::after { font-size: 17px !important; opacity: 0.56 !important; } } @media (max-width: 420px) { #deviceBottomBag.device-bottom-bag, body.device-route-mode #deviceBottomBag.device-bottom-bag, #devicePage #deviceBottomBag.device-bottom-bag { left: 10px !important; right: 10px !important; gap: 7px !important; padding: 9px !important; border-radius: 21px !important; } #deviceBottomBag .device-bottom-bag-copy, body.device-route-mode #deviceBottomBag .device-bottom-bag-copy, #devicePage #deviceBottomBag .device-bottom-bag-copy { padding: 0 !important; } #deviceBottomBag .device-bottom-bag-count, body.device-route-mode #deviceBottomBag .device-bottom-bag-count, #devicePage #deviceBottomBag .device-bottom-bag-count { font-size: 13px !important; } #deviceBottomBag .device-bottom-bag-preview, body.device-route-mode #deviceBottomBag .device-bottom-bag-preview, #devicePage #deviceBottomBag .device-bottom-bag-preview { font-size: 10px !important; } #deviceContinueButton.device-continue-button, body.device-route-mode #deviceContinueButton.device-continue-button, #devicePage #deviceContinueButton.device-continue-button, #deviceContinueButton { width: clamp(136px, 37vw, 154px) !important; max-width: 154px !important; padding-left: 9px !important; padding-right: 9px !important; font-size: 10.75px !important; } } @media (max-width: 350px) { #deviceBottomBag.device-bottom-bag, body.device-route-mode #deviceBottomBag.device-bottom-bag, #devicePage #deviceBottomBag.device-bottom-bag { gap: 6px !important; padding: 8px !important; } #deviceContinueButton.device-continue-button, body.device-route-mode #deviceContinueButton.device-continue-button, #devicePage #deviceContinueButton.device-continue-button, #deviceContinueButton { width: 130px !important; font-size: 10.25px !important; } #deviceBottomBag .device-bag-clear, body.device-route-mode #deviceBottomBag .device-bag-clear, #devicePage #deviceBottomBag .device-bag-clear { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; } } /* id="instant-assist-form-performance-and-motion-final" */ #contact, #estimateBox, #estimateFormShell, #estimateFormPanel, #estimateFormPanel .estimate-form-panel-inner, #estimateForm { overflow-anchor: none !important; } #estimateFormPanel.estimate-form-panel { display: grid !important; grid-template-rows: 0fr !important; max-height: none !important; overflow: visible !important; opacity: 0 !important; pointer-events: none !important; transform: translate3d(0, 12px, 0) !important; filter: none !important; transform-origin: top center !important; will-change: grid-template-rows, opacity, transform !important; transition: grid-template-rows 0.72s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.40s ease, transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateFormPanel.estimate-form-panel.open { grid-template-rows: 1fr !important; max-height: none !important; opacity: 1 !important; pointer-events: auto !important; transform: translate3d(0, 0, 0) !important; filter: none !important; } #estimateFormPanel .estimate-form-panel-inner, #estimateFormPanel.open .estimate-form-panel-inner { min-height: 0 !important; overflow: hidden !important; transform: translateZ(0) !important; } #estimateFormPanel.open.is-settled .estimate-form-panel-inner { overflow: visible !important; } #estimateFormPanel .estimate-form, #estimateFormPanel.open .estimate-form, #estimateFormPanel.open .estimate-form:hover, #estimateFormPanel.open .estimate-form:focus-within, body.estimate-handoff-mode #estimateFormPanel.open .estimate-form, body.estimate-direct-landing #estimateFormPanel.open .estimate-form { transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; transition: border-color 0.34s ease, box-shadow 0.42s ease, background-color 0.34s ease !important; } #estimateFormPanel.open .form-field, #estimateFormPanel.open .form-submit, #estimateFormPanel.open .form-note { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } #estimateFormToggle.estimate-form-toggle, #estimateFormToggle.estimate-form-toggle:hover, #estimateFormToggle.estimate-form-toggle.open, #estimateFormToggle.estimate-form-toggle.is-pressing { transform: none !important; filter: none !important; will-change: auto !important; transition: background-color 0.32s ease, border-color 0.32s ease, color 0.32s ease, box-shadow 0.38s ease !important; } #estimateForm .form-field input, #estimateForm .form-field textarea, #estimateForm .service-select-trigger, #estimateForm .service-add-button, #estimateForm .file-upload-label { transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; transition: background-color 0.26s ease, border-color 0.26s ease, color 0.26s ease, box-shadow 0.30s ease !important; } #estimateForm .form-field input:hover, #estimateForm .form-field input:focus, #estimateForm .form-field textarea:hover, #estimateForm .form-field textarea:focus, #estimateForm .service-select-trigger:hover, #estimateForm .service-select-trigger:focus-visible, #estimateForm .service-add-button:hover, #estimateForm .service-add-button:focus-visible, #estimateForm .file-upload-label:hover, #estimateForm .file-upload-label:focus-within { transform: none !important; filter: none !important; } #estimateForm .form-field.name-center-focus input { animation: none !important; } #estimateForm .selected-device-note, #estimateForm .selected-device-note.active { transform: none !important; filter: none !important; transition: max-height 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.30s ease, padding 0.48s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.30s ease, background-color 0.30s ease, box-shadow 0.34s ease !important; } #estimateForm .selected-device-note:not(.active) { min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border-width: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; } #estimateForm .selected-device-note.active { max-height: 132px !important; opacity: 1 !important; overflow: hidden !important; } #estimateForm .service-select-menu { transform: translate3d(0, 8px, 0) !important; filter: none !important; clip-path: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: max-height, opacity, transform !important; transition: max-height 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), padding 0.42s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.28s ease, border-color 0.28s ease !important; } #estimateForm .service-select-menu.open { transform: translate3d(0, 0, 0) !important; filter: none !important; clip-path: none !important; } #estimateForm .service-select-menu .service-option, #estimateForm .service-select-menu.open .service-option { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: background-color 0.22s ease, color 0.22s ease !important; } #estimateForm .photo-preview-grid, #estimateForm .photo-preview-grid.active { transform: none !important; filter: none !important; transition: max-height 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, padding-top 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateForm .photo-preview-item, #estimateForm .photo-preview-more { filter: none !important; animation-duration: 0.32s !important; } @media (max-width: 760px) { #estimateFormPanel.estimate-form-panel { transform: translate3d(0, 9px, 0) !important; transition: grid-template-rows 0.62s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease, transform 0.62s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateFormPanel.estimate-form-panel.open { transform: translate3d(0, 0, 0) !important; } #estimateForm { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } @media (prefers-reduced-motion: reduce) { #estimateFormPanel.estimate-form-panel, #estimateFormPanel .estimate-form, #estimateFormToggle.estimate-form-toggle, #estimateForm *, #estimateForm *::before, #estimateForm *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* id="instant-assist-form-premium-comfort-final" */ #estimateFormPanel.estimate-form-panel { transform: translate3d(0, 15px, 0) scale(0.995) !important; transition: grid-template-rows 0.86s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.48s ease, transform 0.88s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateFormPanel.estimate-form-panel.open { transform: translate3d(0, 0, 0) scale(1) !important; } #estimateFormPanel .estimate-form { opacity: 0.88 !important; transform: translate3d(0, 9px, 0) scale(0.994) !important; transform-origin: top center !important; box-shadow: 0 24px 58px rgba(0,0,0,0.24), 0 9px 22px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.070), inset 0 -1px 0 rgba(0,0,0,0.22) !important; transition: opacity 0.58s ease, transform 0.92s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.40s ease, box-shadow 0.58s ease, background-color 0.40s ease !important; } #estimateFormPanel.open .estimate-form, #estimateFormPanel.open .estimate-form:hover, #estimateFormPanel.open .estimate-form:focus-within, body.estimate-handoff-mode #estimateFormPanel.open .estimate-form, body.estimate-direct-landing #estimateFormPanel.open .estimate-form { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; box-shadow: 0 34px 76px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.078), inset 0 -1px 0 rgba(0,0,0,0.24) !important; } #estimateFormPanel.open.is-settled .estimate-form:focus-within { border-color: rgba(255,255,255,0.092) !important; box-shadow: 0 38px 82px rgba(0,0,0,0.315), 0 16px 32px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255,255,255,0.088), inset 0 -1px 0 rgba(0,0,0,0.25) !important; } #estimateFormToggle.estimate-form-toggle { transition: background-color 0.38s ease, border-color 0.38s ease, color 0.38s ease, box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateFormToggle.estimate-form-toggle.open { border-color: rgba(255,255,255,0.105) !important; box-shadow: 0 18px 38px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.080), inset 0 -1px 0 rgba(0,0,0,0.17) !important; } #estimateForm .form-field input:focus, #estimateForm .form-field textarea:focus, #estimateForm .service-select-trigger:focus-visible, #estimateForm .file-upload-label:focus-within { border-color: rgba(255,255,255,0.15) !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.022), 0 13px 28px rgba(0,0,0,0.105), inset 0 1px 0 rgba(255,255,255,0.080), inset 0 -1px 0 rgba(0,0,0,0.18) !important; } @media (max-width: 760px) { #estimateFormPanel.estimate-form-panel { transform: translate3d(0, 12px, 0) scale(0.996) !important; transition: grid-template-rows 0.76s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s ease, transform 0.78s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateFormPanel.estimate-form-panel.open { transform: translate3d(0, 0, 0) scale(1) !important; } #estimateFormPanel .estimate-form { transform: translate3d(0, 7px, 0) scale(0.996) !important; box-shadow: 0 24px 54px rgba(0,0,0,0.26), 0 9px 22px rgba(0,0,0,0.105), inset 0 1px 0 rgba(255,255,255,0.070), inset 0 -1px 0 rgba(0,0,0,0.22) !important; } #estimateFormPanel.open .estimate-form, #estimateFormPanel.open .estimate-form:hover, #estimateFormPanel.open .estimate-form:focus-within, body.estimate-handoff-mode #estimateFormPanel.open .estimate-form, body.estimate-direct-landing #estimateFormPanel.open .estimate-form { transform: translate3d(0, 0, 0) scale(1) !important; box-shadow: 0 30px 68px rgba(0,0,0,0.29), 0 12px 26px rgba(0,0,0,0.115), inset 0 1px 0 rgba(255,255,255,0.078), inset 0 -1px 0 rgba(0,0,0,0.23) !important; } } /* id="instant-assist-mobile-swipe-submit-final" */ .estimate-swipe-submit { display: none; --swipe-progress: 0; --swipe-x: 0px; --swipe-label-opacity: 1; } @media (max-width: 760px) { #estimateBox #estimateSubmitButton { display: none !important; } #estimateBox .estimate-swipe-submit { display: block; width: min(100%, 310px); margin: 22px auto 0; -webkit-tap-highlight-color: transparent; } #estimateBox .estimate-swipe-track { position: relative; height: 60px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; background: rgba(255,255,255,0.045); box-shadow: 0 15px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.055), inset 0 -1px 0 rgba(0,0,0,0.24); touch-action: pan-y; transition: border-color 0.42s ease, background-color 0.42s ease, box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1), transform 0.48s cubic-bezier(0.16, 1, 0.3, 1); } #estimateBox .estimate-swipe-track::before { content: ""; position: absolute; inset: 6px; border-radius: 16px; background: rgba(255,255,255,0.075); opacity: 0.72; transform: scaleX(var(--swipe-progress)); transform-origin: left center; transition: transform 0.66s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease; pointer-events: none; } #estimateBox .estimate-swipe-label { position: absolute; inset: 0 15px 0 65px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.74); font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: -0.015em; text-align: center; white-space: nowrap; opacity: var(--swipe-label-opacity); pointer-events: none; transition: color 0.34s ease, opacity 0.34s ease, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1); } #estimateBox .estimate-swipe-handle { position: absolute; z-index: 2; top: 6px; left: 6px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 16px; color: #111316; background: #f4f4f2; box-shadow: 0 8px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.92); transform: translate3d(var(--swipe-x), 0, 0); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform 0.66s cubic-bezier(0.16, 1, 0.3, 1), color 0.34s ease, background-color 0.34s ease, box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1); } #estimateBox .estimate-swipe-handle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1); } #estimateBox .estimate-swipe-submit.is-dragging .estimate-swipe-track::before, #estimateBox .estimate-swipe-submit.is-dragging .estimate-swipe-label, #estimateBox .estimate-swipe-submit.is-dragging .estimate-swipe-handle { transition: none; } #estimateBox .estimate-swipe-submit.is-dragging .estimate-swipe-track { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); } #estimateBox .estimate-swipe-submit.is-dragging .estimate-swipe-handle { cursor: grabbing; box-shadow: 0 12px 26px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.94); } #estimateBox .estimate-swipe-submit.is-ready .estimate-swipe-track, #estimateBox .estimate-swipe-submit.is-complete .estimate-swipe-track { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.07); box-shadow: 0 18px 38px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.075), inset 0 -1px 0 rgba(0,0,0,0.24); } #estimateBox .estimate-swipe-submit.is-ready .estimate-swipe-label, #estimateBox .estimate-swipe-submit.is-complete .estimate-swipe-label, #estimateBox .estimate-swipe-submit.is-sending .estimate-swipe-label { color: rgba(255,255,255,0.94); } #estimateBox .estimate-swipe-submit.is-ready .estimate-swipe-handle svg, #estimateBox .estimate-swipe-submit.is-complete .estimate-swipe-handle svg { transform: translate3d(2px, 0, 0); } #estimateBox .estimate-swipe-submit.is-error .estimate-swipe-track { border-color: rgba(255,255,255,0.16); } #estimateBox .estimate-swipe-submit.is-error .estimate-swipe-label { color: rgba(255,255,255,0.82); } #estimateBox .estimate-swipe-submit.is-sending .estimate-swipe-handle { cursor: wait; opacity: 0.88; } } @media (max-width: 370px) { #estimateBox .estimate-swipe-label { left: 60px; right: 8px; font-size: 11.5px; letter-spacing: -0.035em; } } @media (prefers-reduced-motion: reduce) { #estimateBox .estimate-swipe-track, #estimateBox .estimate-swipe-track::before, #estimateBox .estimate-swipe-label, #estimateBox .estimate-swipe-handle, #estimateBox .estimate-swipe-handle svg { transition-duration: 0.01ms !important; } } /* id="popular-services-touch-feedback" */ @media (hover: none) and (pointer: coarse) { .hero-card .quick-link { -webkit-tap-highlight-color: transparent; transition: background-color 0.30s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.30s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1), color 0.26s ease; } .hero-card .quick-link:hover { background-color: #f6f6f6; border-color: transparent; transform: none; box-shadow: none; } .hero-card .quick-link.is-touch-feedback { background-color: #ffffff; border-color: rgba(var(--dark-rgb), 0.085); color: var(--dark); transform: scale(0.992); box-shadow: 0 8px 20px rgba(var(--dark-rgb), 0.055), inset 0 1px 0 rgba(255,255,255,0.94), inset 0 -1px 0 rgba(var(--dark-rgb),0.025); transition: background-color 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s ease; } } /* id="property-care-plans-styles" */ .care-plans-link { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin: 0; -webkit-tap-highlight-color: transparent; } .care-plans-link:hover, .care-plans-link:focus-visible { transform: translateY(-1px); outline: none; } .property-care-plans { position: relative; overflow: hidden; } .property-care-plans .container { min-width: 0; } .care-plans-heading { max-width: none; margin-bottom: 26px; } .care-plans-divider { display: block; width: min(170px, 22vw); height: 2px; margin: 0 auto 22px; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, rgba(var(--dark-rgb), 0.08) 14%, rgba(var(--dark-rgb), 0.38) 46%, rgba(var(--dark-rgb), 0.52) 50%, rgba(var(--dark-rgb), 0.38) 54%, rgba(var(--dark-rgb), 0.08) 86%, transparent 100% ); } .care-plans-heading .section-subtitle { max-width: 800px; margin-bottom: 12px; } .care-plans-intro { max-width: 790px; margin: 0; color: rgba(var(--dark-rgb), 0.76); font-size: 15px; font-weight: 650; line-height: 1.65; letter-spacing: -0.012em; } .care-plans-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; } .care-plan-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 22px; border: 1px solid rgba(var(--dark-rgb), 0.085); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(242,243,243,0.86)); box-shadow: 0 16px 40px rgba(var(--dark-rgb), 0.055), inset 0 1px 0 rgba(255,255,255,0.92); transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.38s ease, box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1); } .care-plan-card:hover { transform: translateY(-3px); border-color: rgba(var(--dark-rgb), 0.13); box-shadow: 0 24px 54px rgba(var(--dark-rgb), 0.085), inset 0 1px 0 rgba(255,255,255,0.95); } .care-plan-featured { border-color: rgba(var(--dark-rgb), 0.19); background: linear-gradient(145deg, rgba(255,255,255,0.99), rgba(237,238,239,0.94)); box-shadow: 0 22px 52px rgba(var(--dark-rgb), 0.09), inset 0 1px 0 rgba(255,255,255,0.98); } .care-plan-top h3, .care-plan-detail h3 { margin: 0; color: var(--dark); font-size: 22px; font-weight: 950; line-height: 1.05; letter-spacing: -0.045em; } .care-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: 18px; color: var(--dark); } .care-plan-price strong { font-size: 38px; line-height: 0.95; letter-spacing: -0.07em; font-weight: 950; } .care-plan-price span { color: rgba(var(--dark-rgb), 0.52); font-size: 12px; font-weight: 800; } .care-plan-price .care-plan-from { flex-basis: auto; margin: 0 2px 0 0; color: rgba(var(--dark-rgb), 0.50); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } .care-plan-top p { min-height: 66px; margin: 15px 0 0; color: rgba(var(--dark-rgb), 0.61); font-size: 13px; font-weight: 650; line-height: 1.55; } .care-plan-top .care-plan-frequency { display: flex; align-items: baseline; gap: 8px; } .care-plan-top .care-plan-best-for { min-height: 0; margin-top: 12px; color: rgba(var(--dark-rgb), 0.58); font-size: 11px; font-weight: 700; line-height: 1.45; } .care-plan-top .care-plan-frequency { min-height: 0; margin-top: 9px; } .care-plan-frequency strong { color: var(--dark); font-size: 16px; font-weight: 950; letter-spacing: -0.035em; } .care-plan-frequency span { color: rgba(var(--dark-rgb), 0.57); font-size: 11px; font-weight: 750; } .care-plan-includes { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(var(--dark-rgb), 0.075); } .care-plan-terms { margin-top: 22px; } @media (min-width: 921px) { .care-plan-top { display: grid; grid-template-rows: 25px 54px 46px 30px; row-gap: 0; } .care-plan-top h3 { min-width: 0; padding-right: 0; } .care-plan-price { position: relative; min-height: 54px; margin-top: 0; align-content: center; } .care-plan-top p { min-height: 0; margin-top: 0; align-self: start; } .care-plan-top .care-plan-best-for { align-self: center; margin-top: 0; } .care-plan-top .care-plan-frequency { margin-top: 0; } .care-plan-includes { margin-top: 8px; } } .care-plan-includes > span { display: block; margin-bottom: 12px; color: rgba(var(--dark-rgb), 0.46); font-size: 9px; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; } .care-plan-includes ul, .care-plan-detail ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .care-plan-includes li, .care-plan-detail li { position: relative; padding-left: 15px; color: rgba(var(--dark-rgb), 0.73); font-size: 11.5px; font-weight: 680; line-height: 1.45; } .care-plan-includes li::before, .care-plan-detail li::before { content: ""; position: absolute; top: 0.58em; left: 1px; width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--dark-rgb), 0.50); } .care-plan-footer { display: flex; flex-direction: column; margin-top: auto; padding-top: 22px; } .care-plan-note { min-height: 39px; margin: 0 0 13px; color: rgba(var(--dark-rgb), 0.48); font-size: 9.5px; font-weight: 700; line-height: 1.5; } .care-plan-request { width: 100%; min-height: 46px; padding: 12px 16px; border: 1px solid var(--dark); border-radius: 16px; background: var(--dark); color: #ffffff; font-size: 12px; font-weight: 950; cursor: pointer; -webkit-tap-highlight-color: transparent; will-change: transform, background-color, box-shadow; transition: background-color 0.46s ease, color 0.38s ease, transform 0.52s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.52s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.42s ease, filter 0.42s ease; } .care-plan-request:hover, .care-plan-request:focus-visible { background: #17191d; color: #ffffff; border-color: #17191d; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(var(--dark-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.08); outline: none; } .care-plan-request:active, .care-plan-request.is-pressing { background: #1b1d21; border-color: #1b1d21; transform: translateY(0) scale(0.994); box-shadow: 0 8px 18px rgba(var(--dark-rgb), 0.13), inset 0 1px 0 rgba(255,255,255,0.065); transition-duration: 0.24s; } .care-plan-details-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; } .care-plan-detail { min-width: 0; padding: 20px 22px; border: 1px solid rgba(var(--dark-rgb), 0.075); border-radius: 22px; background: rgba(255,255,255,0.58); box-shadow: inset 0 1px 0 rgba(255,255,255,0.70); } .care-plan-detail h3 { margin-bottom: 16px; font-size: 17px; } .care-plan-detail ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 18px; row-gap: 8px; } .care-plans-disclaimer { max-width: 900px; margin: 16px auto 0; color: rgba(var(--dark-rgb), 0.43); font-size: 9.5px; font-weight: 700; line-height: 1.55; text-align: center; } @media (max-width: 920px) { .care-plans-grid { grid-template-columns: 1fr; } .care-plan-top p, .care-plan-note { min-height: 0; } } @media (max-width: 760px) { .care-plans-link { margin: 0; width: 100%; } .care-plans-heading { margin-bottom: 22px; } .care-plans-divider { width: 112px; margin-bottom: 17px; } .care-plans-intro { font-size: 13px; } .care-plans-grid { gap: 12px; } .care-plan-card { padding: 20px; border-radius: 24px; } .care-plan-card:hover { transform: none; } .care-plan-top h3 { font-size: 21px; } .care-plan-price strong { font-size: 36px; } .care-plan-details-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; } .care-plan-detail { padding: 19px 20px; border-radius: 20px; } .care-plan-detail ul { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } .care-plan-request:hover { background: var(--dark); color: #ffffff; border-color: var(--dark); transform: none; box-shadow: none; } .care-plan-request:active, .care-plan-request.is-pressing { transform: scale(0.994); background: #1b1d21; border-color: #1b1d21; box-shadow: 0 8px 18px rgba(var(--dark-rgb), 0.13); } } @media (prefers-reduced-motion: reduce) { .care-plans-link, .care-plan-card, .care-plan-request { transition-duration: 0.01ms !important; } } /* id="instant-assist-final-detail-polish" */ html body #devicePage .device-page-shell, html body.device-route-mode #devicePage .device-page-shell { width: min(100%, 1180px) !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } html body #devicePage .device-store, html body.device-route-mode #devicePage .device-store, html body #devicePage .device-store-grid, html body.device-route-mode #devicePage .device-store-grid { min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; } html body #devicePage .device-page-title-line--right, html body.device-route-mode #devicePage .device-page-title-line--right, html body #devicePage .device-page-title-line--right .device-page-title-word, html body.device-route-mode #devicePage .device-page-title-line--right .device-page-title-word, html body #devicePage .device-service-word, html body.device-route-mode #devicePage .device-service-word { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } .hero-y-fix { font: inherit; font-style: normal; } @media (min-width: 761px) { .hero-title-line--descenders { padding-bottom: 0.1em; margin-bottom: -0.075em; } .hero-y-fix { display: inline-block; transform: none; } html body #devicePage .device-service-word, html body.device-route-mode #devicePage .device-service-word { display: inline; letter-spacing: -0.045em; } } #estimateBox #estimateSubmitButton.form-submit { background: #ffffff !important; color: var(--dark) !important; border-color: rgba(var(--dark-rgb), 0.08) !important; transition: background-color 0.42s ease, border-color 0.42s ease, color 0.42s ease, transform 0.52s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.52s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateBox #estimateSubmitButton.form-submit::before { background: linear-gradient( 180deg, rgba(var(--dark-rgb), 0.015), rgba(var(--dark-rgb), 0.055) ) !important; transform: scale(1) !important; transition: opacity 0.44s ease !important; } #estimateBox #estimateSubmitButton.form-submit:hover, #estimateBox #estimateSubmitButton.form-submit:focus-visible { background: #ffffff !important; color: var(--dark) !important; border-color: rgba(var(--dark-rgb), 0.13) !important; transform: translate3d(0, -2px, 0) scale(1.002) !important; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(var(--dark-rgb), 0.045) !important; } #estimateBox #estimateSubmitButton.form-submit:hover::before, #estimateBox #estimateSubmitButton.form-submit:focus-visible::before { opacity: 1 !important; } #estimateBox #estimateSubmitButton.form-submit:active { background: #ffffff !important; color: var(--dark) !important; transform: translate3d(0, 0, 0) scale(0.994) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(var(--dark-rgb), 0.055) !important; } #instagramFloatingCard .instagram-close { right: 7px; width: 40px; height: 40px; opacity: 0; touch-action: manipulation; transition: opacity 0.24s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.30s ease, color 0.30s ease, border-color 0.30s ease, box-shadow 0.34s ease !important; transition-delay: 0s !important; } #instagramFloatingCard.active .instagram-close { opacity: 0.82; transform: translateY(-50%) scale(1); transition-delay: 0s !important; } #instagramFloatingCard.active .instagram-close:hover, #instagramFloatingCard.active .instagram-close:focus-visible { opacity: 1; transform: translateY(-50%) rotate(45deg) scale(1.045); background: rgba(var(--dark-rgb), 0.92) !important; color: #ffffff !important; border-color: rgba(var(--dark-rgb), 0.92) !important; box-shadow: 0 10px 24px rgba(var(--dark-rgb), 0.18), 0 0 0 5px rgba(var(--dark-rgb), 0.045) !important; outline: none; } #instagramFloatingCard.hiding { opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 12px, 0) scale(0.988); filter: blur(8px); transition: opacity 0.46s ease, visibility 0.46s ease, transform 0.58s cubic-bezier(0.16, 1, 0.3, 1), filter 0.48s ease !important; } #estimateForm .form-field { position: relative; } #estimateForm #jobDescriptionField[hidden], #estimateForm #jobPhotosField[hidden] { display: none !important; } #estimateForm .service-menu-confirm { position: sticky; bottom: 0; z-index: 3; display: block; width: min(100%, 118px); min-height: 38px; margin: 8px auto 2px; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, 0.105); border-radius: 999px; background: rgba(255, 255, 255, 0.075); color: rgba(255, 255, 255, 0.88); font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: -0.01em; cursor: pointer; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.075); -webkit-tap-highlight-color: transparent; transition: background-color 0.34s ease, border-color 0.34s ease, color 0.34s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1); } #estimateForm .service-menu-confirm:hover, #estimateForm .service-menu-confirm:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.16); color: #ffffff; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10); outline: none; } #estimateForm .service-menu-confirm:active { transform: translateY(0) scale(0.975); background: rgba(255, 255, 255, 0.095); transition-duration: 0.16s; } #estimateForm .care-plan-field-status { position: absolute; top: 0; right: 0; display: none; max-width: 68%; color: rgba(255, 255, 255, 0.43); font-size: 8px; font-weight: 800; line-height: 1.2; letter-spacing: 0.035em; text-align: right; text-transform: lowercase; } #estimateForm.care-plan-mode .care-plan-locked .care-plan-field-status { display: block; } #estimateForm.care-plan-mode .care-plan-locked .service-select, #estimateForm.care-plan-mode .care-plan-locked textarea, #estimateForm.care-plan-mode .care-plan-locked .file-upload-label { pointer-events: none; user-select: none; } #estimateForm.care-plan-mode .care-plan-locked .service-select-trigger, #estimateForm.care-plan-mode .care-plan-locked .service-add-button, #estimateForm.care-plan-mode .care-plan-locked textarea, #estimateForm.care-plan-mode .care-plan-locked .file-upload-label { opacity: 0.52; background: rgba(255, 255, 255, 0.025) !important; border-color: rgba(255, 255, 255, 0.055) !important; color: rgba(255, 255, 255, 0.48) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 -1px 0 rgba(0, 0, 0, 0.14) !important; cursor: default; } #estimateForm.care-plan-mode .care-plan-locked textarea { -webkit-text-fill-color: rgba(255, 255, 255, 0.42); resize: none; } #estimateForm.care-plan-mode .care-plan-locked .service-pill button { display: none; } #estimateForm.care-plan-mode #serviceAddButton, #estimateForm.care-plan-mode #servicePills { display: none; } #estimateForm.care-plan-mode #serviceSelectMain { grid-template-columns: minmax(0, 1fr) !important; } #estimateForm.care-plan-mode .care-plan-locked .service-select-menu { display: none; } #estimateForm.care-plan-mode .form-note { color: rgba(255, 255, 255, 0.58); } @media (max-width: 420px) { #estimateForm .care-plan-field-status { max-width: 62%; font-size: 7.5px; } } @media (prefers-reduced-motion: reduce) { #instagramFloatingCard, #instagramFloatingCard .instagram-close, #estimateBox #estimateSubmitButton.form-submit { transition-duration: 0.01ms !important; } } /* id="instant-assist-mobile-form-stability-final" */ @media (max-width: 760px) { html, body { width: 100%; max-width: 100%; overflow-x: clip !important; overscroll-behavior-x: none; } /* Smooth mobile motion without expensive blur effects. */ #estimateFormPanel.estimate-form-panel { transform: translate3d(0, 12px, 0) scale(0.997) !important; filter: none !important; will-change: grid-template-rows, opacity, transform !important; transition: grid-template-rows 0.78s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.46s ease, transform 0.82s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateFormPanel.estimate-form-panel.open { transform: translate3d(0, 0, 0) scale(1) !important; } #estimateFormPanel .estimate-form-panel-inner, #estimateFormPanel.open .estimate-form-panel-inner { transform: translateZ(0) !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #estimateFormPanel .estimate-form { opacity: 0.9 !important; transform: translate3d(0, 8px, 0) scale(0.997) !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: opacity, transform !important; transition: opacity 0.52s ease, transform 0.78s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.38s ease, background-color 0.38s ease, box-shadow 0.58s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateFormPanel.open .estimate-form, #estimateFormPanel.open .estimate-form:hover, #estimateFormPanel.open .estimate-form:focus-within, body.estimate-handoff-mode #estimateFormPanel.open .estimate-form, body.estimate-direct-landing #estimateFormPanel.open .estimate-form { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #estimateFormPanel .estimate-form, #estimateFormPanel.open .estimate-form, #estimateFormPanel.open .estimate-form:hover, #estimateFormPanel.open .estimate-form:focus-within { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important; } #estimateForm .form-field input, #estimateForm .form-field textarea, #estimateForm .service-select-trigger, #estimateForm .service-add-button, #estimateForm .file-upload-label { transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; transition: background-color 0.34s ease, border-color 0.34s ease, color 0.34s ease, box-shadow 0.44s cubic-bezier(0.16, 1, 0.3, 1), transform 0.44s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* iOS zooms the page when a focused form control is smaller than 16px. */ #estimateForm .form-field input:not([type="file"]), #estimateForm .form-field textarea { font-size: 16px !important; } #estimateForm .form-field input:focus, #estimateForm .form-field textarea:focus, #estimateForm .service-select-trigger:focus-visible, #estimateForm .file-upload-label:focus-within { transform: translate3d(0, -1px, 0) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.025), 0 10px 22px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; } #estimateForm .selected-device-note, #estimateForm .selected-device-note.active, #estimateForm .photo-preview-grid, #estimateForm .photo-preview-grid.active { transform: none !important; filter: none !important; will-change: auto !important; transition: max-height 0.58s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.36s ease, padding 0.58s cubic-bezier(0.16, 1, 0.3, 1), padding-top 0.58s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.34s ease, background-color 0.34s ease !important; } #estimateForm .photo-preview-item, #estimateForm .photo-preview-more { filter: none !important; animation-duration: 0.52s !important; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateForm .service-select-menu { transform: translate3d(0, 10px, 0) scale(0.995) !important; filter: none !important; clip-path: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; will-change: max-height, opacity, transform !important; transition: max-height 0.62s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.40s ease, transform 0.62s cubic-bezier(0.16, 1, 0.3, 1), padding 0.58s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.36s ease, background-color 0.36s ease !important; } #estimateForm .service-select-menu.open { transform: translate3d(0, 0, 0) scale(1) !important; } #estimateForm .service-select-menu .service-option, #estimateForm .service-select-menu.open .service-option { animation: none !important; transform: none !important; filter: none !important; transition: color 0.30s ease, background-color 0.30s ease, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* A separate action row prevents OK from sitting on top of the last service. */ #estimateForm .service-menu-confirm { position: static !important; z-index: auto !important; width: calc(100% - 8px) !important; min-height: 46px !important; margin: 14px 4px 3px !important; padding: 12px 18px !important; border: 1px solid rgba(255, 255, 255, 0.86) !important; border-radius: 15px !important; background: #f2f2f0 !important; color: #111315 !important; font-size: 13px !important; letter-spacing: 0.08em !important; text-transform: uppercase; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; transform: translate3d(0, 0, 0) scale(1) !important; transition: background-color 0.34s ease, color 0.34s ease, border-color 0.34s ease, box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateForm .service-menu-confirm:hover, #estimateForm .service-menu-confirm:focus-visible, #estimateForm .service-menu-confirm:active { background: #ffffff !important; color: #090a0b !important; transform: translate3d(0, -1px, 0) scale(1.006) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; } #estimateForm .service-menu-confirm:active { transform: translate3d(0, 0, 0) scale(0.985) !important; transition-duration: 0.16s !important; } /* Center the copy against the whole track, not the remaining space. */ #estimateBox .estimate-swipe-label, #estimateBox .estimate-swipe-submit.is-ready .estimate-swipe-label, #estimateBox .estimate-swipe-submit.is-complete .estimate-swipe-label, #estimateBox .estimate-swipe-submit.is-sending .estimate-swipe-label { inset: 0 !important; padding: 0 62px !important; transform: none !important; will-change: auto !important; transition: color 0.34s ease, opacity 0.34s ease, transform 0.46s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateBox .estimate-swipe-track { contain: paint; height: 64px !important; border-radius: 23px !important; border-color: rgba(255, 255, 255, 0.13) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.035)) !important; box-shadow: 0 13px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.065), inset 0 -1px 0 rgba(0, 0, 0, 0.26) !important; transform: none !important; will-change: auto !important; transition: border-color 0.38s ease, background-color 0.38s ease, box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateBox .estimate-swipe-track::before { inset: 6px !important; border-radius: 17px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.13)) !important; will-change: transform; transition: transform 0.58s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease !important; } #estimateBox .estimate-swipe-handle { top: 6px !important; left: 6px !important; width: 52px !important; height: 52px !important; border-radius: 17px !important; touch-action: none !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 9px 20px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important; will-change: transform; transition: transform 0.58s cubic-bezier(0.16, 1, 0.3, 1), color 0.34s ease, background-color 0.34s ease, box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateBox .estimate-swipe-submit.is-dragging .estimate-swipe-track::before, #estimateBox .estimate-swipe-submit.is-dragging .estimate-swipe-label, #estimateBox .estimate-swipe-submit.is-dragging .estimate-swipe-handle { transition: none !important; } #estimateBox .estimate-swipe-submit.is-dragging .estimate-swipe-handle { box-shadow: 0 11px 24px rgba(0, 0, 0, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; } #estimateBox .estimate-swipe-submit.is-ready .estimate-swipe-track, #estimateBox .estimate-swipe-submit.is-complete .estimate-swipe-track { border-color: rgba(255, 255, 255, 0.21) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.048)) !important; } #estimateFormToggle, #estimateForm button:not(.estimate-swipe-handle), #estimateForm .file-upload-label { -webkit-tap-highlight-color: transparent; } #estimateFormToggle { transition: color 0.38s ease, background-color 0.38s ease, border-color 0.38s ease, box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1), transform 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important; } #estimateFormToggle:active, #estimateForm .service-add-button:active, #estimateForm .service-option:active, #estimateForm .file-upload-label:active, #estimateForm .service-pill button:active { transform: translate3d(0, 0, 0) scale(0.982) !important; transition-duration: 0.14s !important; } #estimateForm .service-option:active { background: rgba(255, 255, 255, 0.075) !important; } .estimate-success-overlay, .estimate-success-overlay.active { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: opacity 0.58s ease, visibility 0.58s ease, background-color 0.58s ease !important; } .estimate-success-card { filter: none !important; transform: translate3d(0, 18px, 0) scale(0.975) !important; transition: opacity 0.54s ease, transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) !important; } .estimate-success-overlay.active .estimate-success-card { filter: none !important; transform: translate3d(0, 0, 0) scale(1) !important; } } @media (max-width: 370px) { #estimateBox .estimate-swipe-label { inset: 0 !important; padding: 0 56px !important; } } /* id="instant-assist-instagram-packages-spacing-final" */ body.packages-ticker-visible #instagramFloatingCard { left: auto !important; right: var(--instagram-packages-right, 24px) !important; width: min(390px, calc(100vw - 32px)) !important; max-width: min(390px, calc(100vw - 32px)) !important; box-sizing: border-box !important; bottom: calc(var(--popular-installs-safe-space) + 6px) !important; } body.packages-ticker-visible #instagramFloatingCard.active { transform: translate3d(0, 0, 0) scale(1) !important; } body.packages-ticker-visible #instagramFloatingCard.active:hover { transform: translate3d(0, -2px, 0) scale(1.006) !important; } @media (max-width: 900px) { body.packages-ticker-visible #instagramFloatingCard { right: var(--instagram-packages-right, 7px) !important; width: min(374px, calc(var(--instagram-packages-width, 100vw) - 2px)) !important; max-width: min(374px, calc(var(--instagram-packages-width, 100vw) - 2px)) !important; bottom: calc(var(--popular-installs-safe-space) + 10px) !important; } body.packages-ticker-visible #instagramFloatingCard.active, body.packages-ticker-visible #instagramFloatingCard.active:hover { transform: translate3d(0, 0, 0) scale(1) !important; } } /* id="instant-assist-camera-filter-groups-final" */ #devicePage .device-filter-row.is-grouped, body.device-route-mode #devicePage .device-filter-row.is-grouped, body.device-route-mode .device-filter-row.is-grouped { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; white-space: normal !important; scroll-snap-type: none !important; } #devicePage .device-filter-row.is-grouped::before, #devicePage .device-filter-row.is-grouped::after, body.device-route-mode #devicePage .device-filter-row.is-grouped::before, body.device-route-mode #devicePage .device-filter-row.is-grouped::after, body.device-route-mode .device-filter-row.is-grouped::before, body.device-route-mode .device-filter-row.is-grouped::after { display: none !important; content: none !important; } #devicePage .device-filter-group, body.device-route-mode #devicePage .device-filter-group, body.device-route-mode .device-filter-group { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; scroll-snap-align: none !important; } #devicePage .device-filter-group[data-filter-group-id="power-connection"], body.device-route-mode #devicePage .device-filter-group[data-filter-group-id="power-connection"], body.device-route-mode .device-filter-group[data-filter-group-id="power-connection"] { max-height: 0 !important; margin-top: -8px !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; transform: translate3d(0, -10px, 0) scale(0.975) !important; transform-origin: left top !important; transition: max-height 0.92s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.92s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.72s ease, transform 0.96s cubic-bezier(0.16, 1, 0.3, 1) !important; } #devicePage .device-filter-group[data-filter-group-id="power-connection"].is-available, body.device-route-mode #devicePage .device-filter-group[data-filter-group-id="power-connection"].is-available, body.device-route-mode .device-filter-group[data-filter-group-id="power-connection"].is-available { max-height: 64px !important; margin-top: 0 !important; opacity: 1 !important; pointer-events: auto !important; transform: translate3d(0, 0, 0) scale(1) !important; } #devicePage .device-filter-group + .device-filter-group, body.device-route-mode #devicePage .device-filter-group + .device-filter-group, body.device-route-mode .device-filter-group + .device-filter-group { padding-left: 0 !important; border-left: 0 !important; } #devicePage .device-filter-group-label, body.device-route-mode #devicePage .device-filter-group-label, body.device-route-mode .device-filter-group-label { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } #devicePage .device-filter-options, body.device-route-mode #devicePage .device-filter-options, body.device-route-mode .device-filter-options { display: flex !important; align-items: center !important; gap: 6px !important; width: 100% !important; flex: 0 0 auto !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } #devicePage .device-filter-options[data-filter-group-id="power-connection"], body.device-route-mode #devicePage .device-filter-options[data-filter-group-id="power-connection"], body.device-route-mode .device-filter-options[data-filter-group-id="power-connection"] { gap: 4px !important; opacity: 1 !important; transform: translate3d(0, -1px, 0) scale(0.955) !important; transform-origin: left center !important; } #devicePage .device-filter-option-divider, body.device-route-mode #devicePage .device-filter-option-divider, body.device-route-mode .device-filter-option-divider { display: inline-flex !important; align-self: center !important; flex: 0 0 auto !important; width: 1px !important; height: 22px !important; margin: 0 12px 0 14px !important; border-radius: 999px !important; background: rgba(17, 17, 17, 0.135) !important; } #devicePage .device-filter-options::-webkit-scrollbar, body.device-route-mode #devicePage .device-filter-options::-webkit-scrollbar, body.device-route-mode .device-filter-options::-webkit-scrollbar { display: none !important; } #devicePage .device-filter-row.is-grouped .device-filter-chip, body.device-route-mode #devicePage .device-filter-row.is-grouped .device-filter-chip, body.device-route-mode .device-filter-row.is-grouped .device-filter-chip { flex: 0 0 auto !important; transition: color 0.34s ease, background-color 0.38s ease, border-color 0.38s ease, box-shadow 0.42s ease, opacity 0.32s ease, transform 0.46s cubic-bezier(0.16, 1, 0.3, 1) !important; } #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip, body.device-route-mode #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip, body.device-route-mode .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip { min-height: 40px !important; padding: 0 18px !important; font-size: 14px !important; font-weight: 650 !important; letter-spacing: -0.015em !important; color: rgba(17, 17, 17, 0.82) !important; box-shadow: none !important; } #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip:hover, #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip:focus-visible, body.device-route-mode #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip:hover, body.device-route-mode #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip:focus-visible, body.device-route-mode .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip:hover, body.device-route-mode .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip:focus-visible { color: rgba(17, 17, 17, 0.94) !important; } #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip.is-disabled, #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip:disabled, body.device-route-mode #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip.is-disabled, body.device-route-mode #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip:disabled, body.device-route-mode .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip.is-disabled, body.device-route-mode .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip:disabled { color: rgba(17, 17, 17, 0.28) !important; opacity: 0.42 !important; cursor: default !important; pointer-events: none !important; transform: none !important; box-shadow: none !important; } #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip.active, body.device-route-mode #devicePage .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip.active, body.device-route-mode .device-filter-options[data-filter-group-id="power-connection"] .device-filter-chip.active { background: #0b0c0e !important; border-color: #0b0c0e !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 14px 30px rgba(17, 17, 17, 0.13) !important; } #devicePage .device-store-grid, body.device-route-mode #devicePage .device-store-grid { transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), filter 0.32s ease, min-height 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important; } @media (max-width: 760px) { #devicePage .device-filter-row.is-grouped, body.device-route-mode #devicePage .device-filter-row.is-grouped, body.device-route-mode .device-filter-row.is-grouped { gap: 10px !important; padding-inline: 8px !important; } #devicePage .device-filter-group, body.device-route-mode #devicePage .device-filter-group, body.device-route-mode .device-filter-group { gap: 6px !important; } #devicePage .device-filter-group + .device-filter-group, body.device-route-mode #devicePage .device-filter-group + .device-filter-group, body.device-route-mode .device-filter-group + .device-filter-group { padding-left: 0 !important; } #devicePage .device-filter-group-label, body.device-route-mode #devicePage .device-filter-group-label, body.device-route-mode .device-filter-group-label { font-size: 9px !important; letter-spacing: 0.13em !important; } }