/* PrecisionSyn simple Apple-inspired header + product page layout Safe CSS-only override. No JavaScript and no shop-menu template changes. */ /* ----------------------------- Header: full-width, lighter typography ----------------------------- */ @media (min-width: 801px) { header.header, header.header .logo-user-section.container, header.header .header-logo, header.header div#menu-wrapper, header.header div#menu, header.header .navPages-wider, header.header div#menu .navPages { max-width: none !important; width: 100% !important; box-sizing: border-box !important; } header.header .logo-user-section.container, header.header div#menu, header.header .navPages-wider { padding-left: 36px !important; padding-right: 36px !important; } header.header .logo-user-section.container { padding-top: 6px !important; padding-bottom: 6px !important; } header.header .navPages-action, header.header .navUser-action, header.header .burger-menu, header.header .container-header, header.header .navPages-item, header.header .navPages-list a.navPages-action, header.header #menu .navPages-action, header.header #menu.fixed .navPages-list a.navPages-action { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: #1d1d1f !important; } header.header .navPages-action { padding-top: 12px !important; padding-bottom: 12px !important; } header.header #menu .navPages-list a.navPages-action { padding-left: 14px !important; padding-right: 14px !important; } header.header li.navPages-item.navPages-item-page.container-header.btn { height: 44px !important; align-items: center !important; } header.header .mega-menu-icon { width: 16px !important; height: 16px !important; } header.header .nav-minus-logo, header.header .nav-right, header.header #menu div.nav-right { width: auto !important; max-width: none !important; } header.header #menu .navPages-list { float: none !important; } } /* PSC header v37: cover both resize directions after the theme sticky script changes modes. */ @media (min-width: 601px) and (max-width: 800px) { header.header .navUser-item.quicksearch, header.header .navUser-action--quickSearch, header.header [data-search="quickSearch"] { display: none !important; } header.header .logo-user-section.container, header.header .logo-user-section.container.fixed, header.header .logo-user-section.container.fixed-again { display: grid !important; grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) !important; align-items: center !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; margin: 0 !important; padding: 10px 18px !important; overflow: visible !important; } header.header .logo-user-section.container.fixed, header.header .logo-user-section.container.fixed-again, body.fixed-nav header.header .logo-user-section.container { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1220 !important; background: rgba(255, 255, 255, 0.97) !important; border: 0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.mobile, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop { position: static !important; display: block !important; flex: 0 1 240px !important; width: 240px !important; min-width: 180px !important; max-width: 240px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 8px 0 auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .quickSearch-mobileToggle { display: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .container, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-fieldset, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-field { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-input { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 42px !important; min-height: 42px !important; padding: 8px 42px 8px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #f5f5f7 !important; color: #1d1d1f !important; font-size: 14px !important; line-height: 1.2 !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 12px !important; left: auto !important; z-index: 2 !important; display: flex !important; width: 20px !important; height: 20px !important; margin: 0 !important; transform: translateY(-50%) !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper, body.fixed-nav header.header #menu-wrapper { position: fixed !important; top: 72px !important; right: 0 !important; left: 0 !important; z-index: 1210 !important; display: flex !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid #d2d2d7 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important; transform: none !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu, body.fixed-nav header.header #menu-wrapper #menu, body.fixed-nav header.header #menu { position: static !important; top: auto !important; right: auto !important; left: auto !important; display: flex !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } header.header #menu .navPages, header.header #menu .navPages-wider, header.header #menu .nav-minus-logo, header.header #menu .nav-right-fixed, header.header #menu .nav-right, header.header #menu .navPages-list.nav-page-list.one, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 18px !important; overflow: visible !important; white-space: normal !important; transform: none !important; } header.header #menu .navPages-action, header.header #menu .navPages-action.sideNavTopLevel, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 32px !important; padding: 0 7px !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; } } /* PSC header v42: fixed parent header for dynamic mode and corrected compact search placement. */ html body.fixed-nav header.header.header-logo--left, html body header.header.header-logo--left:has(.logo-user-section.container.fixed), html body header.header.header-logo--left:has(.logo-user-section.container.fixed-again) { position: fixed !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: 0 !important; z-index: 1220 !important; display: grid !important; grid-template-rows: auto auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; background: #fff !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } html body.fixed-nav header.header.header-logo--left .logo-user-section.container, html body header.header.header-logo--left:has(.logo-user-section.container.fixed) .logo-user-section.container, html body header.header.header-logo--left:has(.logo-user-section.container.fixed-again) .logo-user-section.container, html body.fixed-nav header.header.header-logo--left #menu-wrapper, html body header.header.header-logo--left:has(.logo-user-section.container.fixed) #menu-wrapper, html body header.header.header-logo--left:has(.logo-user-section.container.fixed-again) #menu-wrapper { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } html body.fixed-nav header.header.header-logo--left #menu, html body header.header.header-logo--left:has(.logo-user-section.container.fixed) #menu, html body header.header.header-logo--left:has(.logo-user-section.container.fixed-again) #menu { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow: visible !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } @media (min-width: 520px) and (max-width: 800px) { header.header .logo-user-section.container > nav.navUser .navUser-section--alt > .dropdown--quickSearch, header.header .logo-user-section.container > nav.navUser .navUser-section--alt > .dropdown--quickSearch.mobile, header.header .logo-user-section.container > nav.navUser .navUser-section--alt > .dropdown--quickSearch.desktop { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block !important; flex: 0 1 220px !important; width: clamp(160px, 36vw, 220px) !important; min-width: 160px !important; max-width: 220px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 auto 0 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } header.header .logo-user-section.container > nav.navUser .navUser-section--alt { justify-content: flex-end !important; } header.header .dropdown--quickSearch .container, header.header .dropdown--quickSearch .form, header.header .dropdown--quickSearch .form-fieldset, header.header .dropdown--quickSearch .form-field { left: auto !important; right: auto !important; max-width: 100% !important; overflow: hidden !important; } } /* PSC header v38: final resize-safe override after earlier header patches. */ @media (min-width: 601px) and (max-width: 800px) { header.header .navUser-item.quicksearch, header.header .navUser-action--quickSearch, header.header [data-search="quickSearch"] { display: none !important; } header.header .logo-user-section.container, header.header .logo-user-section.container.fixed, header.header .logo-user-section.container.fixed-again { display: grid !important; grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) !important; align-items: center !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; margin: 0 !important; padding: 10px 18px !important; overflow: visible !important; } header.header .logo-user-section.container.fixed, header.header .logo-user-section.container.fixed-again, body.fixed-nav header.header .logo-user-section.container { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1220 !important; background: rgba(255, 255, 255, 0.97) !important; border: 0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.mobile, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop { position: static !important; display: block !important; flex: 0 1 240px !important; width: 240px !important; min-width: 180px !important; max-width: 240px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 8px 0 auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .quickSearch-mobileToggle { display: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .container, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-fieldset, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-field { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-input { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 42px !important; min-height: 42px !important; padding: 8px 42px 8px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #f5f5f7 !important; color: #1d1d1f !important; font-size: 14px !important; line-height: 1.2 !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 12px !important; left: auto !important; z-index: 2 !important; display: flex !important; width: 20px !important; height: 20px !important; margin: 0 !important; transform: translateY(-50%) !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper, body.fixed-nav header.header #menu-wrapper { position: fixed !important; top: 72px !important; right: 0 !important; left: 0 !important; z-index: 1210 !important; display: flex !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid #d2d2d7 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important; transform: none !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu, body.fixed-nav header.header #menu-wrapper #menu, body.fixed-nav header.header #menu { position: static !important; top: auto !important; right: auto !important; left: auto !important; display: flex !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } header.header #menu .navPages, header.header #menu .navPages-wider, header.header #menu .nav-minus-logo, header.header #menu .nav-right-fixed, header.header #menu .nav-right, header.header #menu .navPages-list.nav-page-list.one, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 18px !important; overflow: visible !important; white-space: normal !important; transform: none !important; } header.header #menu .navPages-action, header.header #menu .navPages-action.sideNavTopLevel, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 32px !important; padding: 0 7px !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; } } @media (min-width: 801px) { body:not(.fixed-nav) header.header .logo-user-section.container.fixed, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1220 !important; width: 100% !important; max-width: 100% !important; visibility: visible !important; opacity: 1 !important; background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; transform: none !important; } body:not(.fixed-nav) header.header .logo-user-section.container.fixed ~ #menu-wrapper, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again ~ #menu-wrapper { position: fixed !important; top: 120px !important; right: 0 !important; left: 0 !important; z-index: 1210 !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid #d2d2d7 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important; transform: none !important; } body:not(.fixed-nav) header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } } @media (min-width: 801px) { body:not(.fixed-nav) header.header .logo-user-section.container.fixed, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1220 !important; width: 100% !important; max-width: 100% !important; visibility: visible !important; opacity: 1 !important; background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; transform: none !important; } body:not(.fixed-nav) header.header .logo-user-section.container.fixed ~ #menu-wrapper, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again ~ #menu-wrapper { position: fixed !important; top: 120px !important; right: 0 !important; left: 0 !important; z-index: 1210 !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid #d2d2d7 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important; transform: none !important; } body:not(.fixed-nav) header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } } /* PSC header v36: make narrow desktop sticky behavior resize-safe. */ @media (min-width: 601px) and (max-width: 800px) { body.fixed-nav header.header, header.header { position: sticky !important; top: 0 !important; z-index: 1200 !important; display: grid !important; grid-template-rows: auto auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid #d2d2d7 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important; } header.header .mobileMenu-toggle, header.header .navUser-item.quicksearch, header.header .navUser-action--quickSearch, header.header [data-search="quickSearch"] { display: none !important; } body.fixed-nav header.header .logo-user-section.container, header.header .logo-user-section.container, header.header .logo-user-section.container.fixed, header.header .logo-user-section.container.fixed-again { position: relative !important; top: auto !important; right: auto !important; left: auto !important; z-index: auto !important; display: grid !important; grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) !important; align-items: center !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 72px !important; max-height: none !important; margin: 0 !important; padding: 10px 18px !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } header.header .header-logo, header.header .header-logo a, header.header .header-logo-image-container { display: flex !important; align-items: center !important; width: auto !important; max-width: 180px !important; height: auto !important; margin: 0 !important; padding: 0 !important; } header.header .header-logo-image, header.header .header-logo-image-unknown-size { width: auto !important; max-width: 150px !important; max-height: 52px !important; object-fit: contain !important; } header.header .logo-user-section.container > nav.navUser, header.header .logo-user-section.container > nav.navUser .navUser-section--alt { position: static !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; } header.header .logo-user-section.container > nav.navUser .navUser-section--alt { gap: 10px !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.mobile, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop { position: static !important; display: block !important; flex: 0 1 240px !important; width: 240px !important; min-width: 180px !important; max-width: 240px !important; height: 42px !important; min-height: 42px !important; margin: 0 8px 0 auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .quickSearch-mobileToggle { display: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .container, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-fieldset, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-field { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-input { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 42px !important; min-height: 42px !important; padding: 8px 42px 8px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #f5f5f7 !important; color: #1d1d1f !important; font-size: 14px !important; line-height: 1.2 !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 12px !important; left: auto !important; z-index: 2 !important; display: flex !important; width: 20px !important; height: 20px !important; margin: 0 !important; transform: translateY(-50%) !important; } body.fixed-nav header.header #menu-wrapper, header.header #menu-wrapper, header.header #menu-wrapper.fixed, header.header #menu-wrapper.fixed-again, body.fixed-nav header.header #menu, header.header #menu, header.header #menu.fixed, header.header #menu.fixed-again, header.header #menu.navPages-container { position: static !important; top: auto !important; right: auto !important; left: auto !important; z-index: auto !important; display: flex !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } header.header #menu .navPages, header.header #menu .navPages-wider, header.header #menu .nav-minus-logo, header.header #menu .nav-right-fixed, header.header #menu .nav-right, header.header #menu .navPages-list.nav-page-list.one, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 18px !important; overflow: visible !important; white-space: normal !important; transform: none !important; } header.header #menu .mega-cat-nav, header.header #menu .mega-cat-dropdown { display: none !important; } header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } header.header #menu .navPages-action, header.header #menu .navPages-action.sideNavTopLevel, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 32px !important; padding: 0 7px !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; } } /* Dynamic sticky header v14: remove old helper artifacts that could stack on cart. */ @media (min-width: 801px) { header.header #menu .psc-sticky-utility-row, header.header #menu .psc-sticky-logo, .psc-header-spacer { display: none !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } } /* ----------------------------- Product page: Apple-like large image layout ----------------------------- */ body.product { background: #fff !important; } body.product .body > .container { max-width: 1640px !important; width: calc(100% - 48px) !important; padding-left: 0 !important; padding-right: 0 !important; } body.product .breadcrumbs { margin-top: 34px !important; margin-bottom: 28px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: -0.01em !important; } @media (min-width: 1024px) { body.product .productView { display: grid !important; grid-template-columns: minmax(0, 1fr) 400px !important; grid-template-areas: "media summary" "media purchase" !important; column-gap: 48px !important; align-items: start !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 0 !important; } body.product .productView > section.productView-images { grid-area: media !important; float: none !important; clear: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 0 !important; } body.product .productView > section.productView-details:first-of-type { grid-area: summary !important; } body.product .productView > section.productView-details:last-of-type { grid-area: purchase !important; } body.product .productView > section.productView-details { float: none !important; clear: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 22px !important; } body.product .productView-image { background: #f5f5f7 !important; border-radius: 18px !important; min-height: 650px !important; padding: 48px !important; width: 100% !important; box-sizing: border-box !important; } body.product .productView-img-container { height: 580px !important; max-width: none !important; width: 100% !important; margin: 0 auto !important; padding-bottom: 0 !important; } body.product .productView-img-container::after { content: none !important; display: none !important; padding-bottom: 0 !important; } body.product .productView-img-container img, body.product .productView-img-container .productView-image--default { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; margin: auto !important; } body.product .productView-thumbnails { display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin: 18px 0 0 !important; } body.product .productView-thumbnail { float: none !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; } body.product .productView-thumbnail-link { height: 58px !important; max-width: 58px !important; width: 58px !important; border: 1px solid #e5e5e7 !important; border-radius: 10px !important; background: #f5f5f7 !important; padding: 6px !important; box-sizing: border-box !important; } body.product .productView-thumbnail-link.is-active, body.product .productView-thumbnail-link:hover { border-color: #86868b !important; } body.product .productView-product { border-bottom: none !important; padding-bottom: 0 !important; } body.product .productView-title { margin: 4px 0 10px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important; font-size: 34px !important; line-height: 1.08 !important; font-weight: 600 !important; letter-spacing: -0.03em !important; color: #1d1d1f !important; } body.product .productView-brand, body.product .productView-brand a, body.product .productView-rating, body.product .productView-info, body.product .productView-options, body.product .productView-reviewLink, body.product .productView-reviewLink a { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; } body.product .productView-brand { margin-bottom: 12px !important; font-size: 15px !important; font-weight: 400 !important; color: #6e6e73 !important; } body.product .productView-price { margin-top: 14px !important; margin-bottom: 22px !important; } body.product .productView-price, body.product .productView-price .price, body.product .productView-price .price-section { font-size: 22px !important; line-height: 1.2 !important; font-weight: 600 !important; color: #1d1d1f !important; } body.product .productView-info { border-top: 1px solid #e5e5e7 !important; padding-top: 18px !important; margin-top: 10px !important; font-size: 14px !important; line-height: 1.45 !important; color: #1d1d1f !important; } body.product .productView-info-name { font-weight: 600 !important; color: #1d1d1f !important; } body.product .productView-info-value { color: #1d1d1f !important; } body.product .productView-options { text-align: left !important; border-top: 1px solid #e5e5e7 !important; padding-top: 22px !important; margin-bottom: 18px !important; } body.product .productView-options .form-label, body.product .productView-options p { font-size: 14px !important; line-height: 1.45 !important; color: #1d1d1f !important; } body.product .productView-options .form-action { margin-top: 18px !important; } body.product .productView-options .button, body.product .productView-options .button--primary { border-radius: 999px !important; min-width: 220px !important; padding: 13px 24px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } body.product .productView-details .socialLinks { margin-top: 18px !important; } } @media (min-width: 1400px) { body.product .body > .container { width: calc(100% - 80px) !important; } body.product .productView { grid-template-columns: minmax(0, 1fr) 430px !important; column-gap: 56px !important; } body.product .productView-image { min-height: 740px !important; padding: 56px !important; } body.product .productView-img-container { height: 650px !important; } } @media (max-width: 1023px) { body.product .body > .container { width: calc(100% - 32px) !important; } body.product .productView { margin-left: 0 !important; margin-right: 0 !important; } body.product .productView-images, body.product .productView-details { padding-left: 0 !important; padding-right: 0 !important; } body.product .productView-image { background: #f5f5f7 !important; border-radius: 16px !important; padding: 24px !important; } body.product .productView-title { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } } /* ----------------------------- Cart page: Apple-inspired bag layout ----------------------------- */ [data-cart] { max-width: 980px !important; margin: 0 auto !important; padding: 0 24px 72px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; color: #1d1d1f !important; } [data-cart] .breadcrumbs { display: none !important; } [data-cart] .cartAppleTitle { margin: 48px auto 10px !important; max-width: 760px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important; font-size: 40px !important; line-height: 1.1 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: none !important; color: #1d1d1f !important; } [data-cart] .cartAppleSubtitle { margin: 0 auto 28px !important; font-size: 17px !important; line-height: 1.45 !important; text-align: center !important; color: #1d1d1f !important; } [data-cart] .cartAppleHeroActions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; max-width: 580px !important; margin: 0 auto 54px !important; } [data-cart] .cartAppleHeroActions .button, [data-cart] .cart-actions .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; width: 100% !important; border-radius: 10px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; } [data-cart] .cartAppleWalletButtons, [data-cart] .cartAppleWalletButtons > *, [data-cart] .cartAppleWalletButtons .CheckoutButton { width: 100% !important; margin: 0 !important; } [data-cart] .cartAppleCheckoutButton, [data-cart] .cart-actions .button--primary { background: #0071e3 !important; border-color: #0071e3 !important; color: #fff !important; } [data-cart] .cartAppleCheckoutButton:hover, [data-cart] .cart-actions .button--primary:hover { background: #0077ed !important; border-color: #0077ed !important; } [data-cart] .cartAppleHeroActions .cartAppleCheckoutButton:only-child { grid-column: 1 / -1 !important; justify-self: center !important; max-width: 290px !important; } [data-cart] [data-cart-content] { border-top: 1px solid #d2d2d7 !important; } [data-cart] .cart { display: block !important; width: 100% !important; margin: 0 !important; border-collapse: collapse !important; } [data-cart] .cart-header { display: none !important; } [data-cart] .cart-list { display: block !important; border-top: 0 !important; } [data-cart] .cart-item { display: grid !important; grid-template-columns: 180px minmax(0, 1fr) 116px minmax(132px, max-content) !important; gap: 40px !important; align-items: start !important; width: 100% !important; padding: 46px 0 !important; border-bottom: 1px solid #d2d2d7 !important; clear: none !important; } [data-cart] .cart-item::before, [data-cart] .cart-item::after { content: none !important; display: none !important; } [data-cart] .cart-item-block { display: block !important; float: none !important; clear: none !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; } [data-cart] .cart-item-figure { display: flex !important; align-items: center !important; justify-content: center !important; width: 180px !important; height: 180px !important; padding: 16px !important; overflow: hidden !important; background: #f5f5f7 !important; border-radius: 14px !important; position: relative !important; } [data-cart] .cart-item-figure::after { content: none !important; display: none !important; padding-bottom: 0 !important; } [data-cart] .cart-item-image, [data-cart] .cart-item-fixed-image, [data-cart] .cart-item-figure img { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; margin: 0 auto !important; object-fit: contain !important; } [data-cart] .cart-item-title { min-width: 0 !important; padding-top: 2px !important; } [data-cart] .cart-item-brand { margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 400 !important; color: #6e6e73 !important; } [data-cart] .cart-item-name { margin: 0 0 12px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important; font-size: 22px !important; line-height: 1.18 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #1d1d1f !important; } [data-cart] .cart-item-name__label { color: #1d1d1f !important; text-decoration: none !important; } [data-cart] .cart-item-title p, [data-cart] .definitionList, [data-cart] .definitionList-key, [data-cart] .definitionList-value, [data-cart] .cart-item-options { font-size: 15px !important; line-height: 1.45 !important; color: #1d1d1f !important; } [data-cart] .cart-item > .cart-item-info:nth-child(3) { display: none !important; } [data-cart] .cart-item-label { display: none !important; } [data-cart] .cart-item-quantity { text-align: center !important; } [data-cart] .cart-item-quantity .form-increment { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 112px !important; height: 42px !important; margin: 0 !important; overflow: hidden !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #fff !important; } [data-cart] .cart-item-quantity .button--icon { width: 34px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } [data-cart] .cart-item-quantity .icon { width: 18px !important; height: 18px !important; } [data-cart] .cart-item-qty-input { width: 34px !important; min-width: 34px !important; height: 40px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; text-align: center !important; font-size: 16px !important; font-weight: 600 !important; color: #1d1d1f !important; background: transparent !important; } [data-cart] .cart-item > .cart-item-info:last-child { text-align: right !important; } [data-cart] .cart-item-value { padding-left: 0 !important; font-size: 20px !important; line-height: 1.2 !important; font-weight: 600 !important; color: #1d1d1f !important; } [data-cart] .cart-remove { display: inline-flex !important; align-items: center !important; justify-content: center !important; float: none !important; width: 24px !important; height: 24px !important; margin: 20px 0 0 auto !important; padding: 5px !important; border: 0 !important; border-radius: 50% !important; background: #f5f5f7 !important; } [data-cart] [data-cart-coupons], [data-cart] [data-cart-totals], [data-cart] .cart-actions { max-width: 520px !important; margin-left: auto !important; } [data-cart] [data-cart-totals] { margin-top: 38px !important; } [data-cart] .cart-totals { float: none !important; clear: none !important; width: 100% !important; margin: 0 !important; text-align: left !important; } [data-cart] .cart-total { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 24px !important; width: 100% !important; border: 0 !important; } [data-cart] .cart-total + .cart-total { border-top: 0 !important; } [data-cart] .cart-total-label, [data-cart] .cart-total-value { float: none !important; width: auto !important; padding: 7px 0 !important; text-align: left !important; font-size: 17px !important; line-height: 1.35 !important; color: #1d1d1f !important; } [data-cart] .cart-total-value { text-align: right !important; white-space: nowrap !important; } [data-cart] .cart-total-with-savings, [data-cart] .cart-totals > .cart-total:last-child { margin-top: 12px !important; padding-top: 14px !important; border-top: 1px solid #d2d2d7 !important; } [data-cart] .cart-total-grandTotal, [data-cart] .cart-total-grandTotal span, [data-cart] .cart-total-amount { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important; font-size: 26px !important; line-height: 1.15 !important; font-weight: 600 !important; color: #1d1d1f !important; } [data-cart] .cart-actions { display: grid !important; gap: 10px !important; margin-top: 28px !important; clear: none !important; } [data-cart] .cart-actions .button { float: none !important; margin: 0 !important; } [data-cart] .checkoutMultiple { float: none !important; text-align: center !important; color: #06c !important; } [data-cart] .cartAppleRecommendations { margin: 78px calc(50% - 50vw) 0 !important; padding: 64px 24px 72px !important; border-top: 1px solid #d2d2d7 !important; background: #fff !important; } [data-cart] .cartAppleRecommendations h2 { margin: 0 0 34px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important; font-size: 32px !important; line-height: 1.15 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-align: center !important; color: #1d1d1f !important; } [data-cart] .cartAppleRecommendations .productGrid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 42px !important; max-width: 980px !important; margin: 0 auto !important; padding: 0 !important; } [data-cart] .cartAppleRecommendations .product { width: auto !important; padding: 0 !important; list-style: none !important; } @media (max-width: 800px) { [data-cart] { width: calc(100% - 32px) !important; padding: 0 0 48px !important; } [data-cart] .cartAppleTitle { margin-top: 32px !important; font-size: 32px !important; } [data-cart] .cartAppleSubtitle { font-size: 15px !important; } [data-cart] .cartAppleHeroActions { grid-template-columns: 1fr !important; max-width: 100% !important; margin-bottom: 34px !important; } [data-cart] .cart-item { grid-template-columns: 96px minmax(0, 1fr) max-content !important; column-gap: 14px !important; row-gap: 12px !important; padding: 28px 0 !important; } [data-cart] .cart-item-figure { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 96px !important; height: 96px !important; padding: 10px !important; border-radius: 12px !important; } [data-cart] .cart-item-title { grid-column: 2 !important; grid-row: 1 !important; } [data-cart] .cart-item-name { margin-bottom: 8px !important; font-size: 17px !important; line-height: 1.25 !important; } [data-cart] .cart-item-brand, [data-cart] .cart-item-title p, [data-cart] .definitionList, [data-cart] .definitionList-key, [data-cart] .definitionList-value, [data-cart] .cart-item-options { font-size: 13px !important; } [data-cart] .cart-item-quantity { grid-column: 2 / 4 !important; grid-row: 2 !important; justify-self: start !important; text-align: left !important; } [data-cart] .cart-item-quantity .form-increment { width: 104px !important; height: 38px !important; } [data-cart] .cart-item-quantity .button--icon, [data-cart] .cart-item-qty-input { height: 36px !important; } [data-cart] .cart-item > .cart-item-info:last-child { grid-column: 3 !important; grid-row: 1 !important; min-width: 76px !important; } [data-cart] .cart-item-value { font-size: 16px !important; } [data-cart] .cart-remove { margin-top: 12px !important; } [data-cart] [data-cart-coupons], [data-cart] [data-cart-totals], [data-cart] .cart-actions { max-width: 100% !important; } [data-cart] .cart-total-label, [data-cart] .cart-total-value { font-size: 15px !important; } [data-cart] .cart-total-grandTotal, [data-cart] .cart-total-grandTotal span, [data-cart] .cart-total-amount { font-size: 22px !important; } [data-cart] .cartAppleRecommendations { margin-top: 52px !important; padding: 44px 0 52px !important; } [data-cart] .cartAppleRecommendations h2 { font-size: 28px !important; } [data-cart] .cartAppleRecommendations .productGrid { grid-template-columns: 1fr !important; gap: 24px !important; } } /* Verified cart layout pass: tighter rows, aligned totals, and shoppable recommendations. */ [data-cart] { max-width: 1064px !important; margin-right: auto !important; margin-left: auto !important; padding-right: 24px !important; padding-left: 24px !important; } [data-cart] .cartAppleHeroActions { max-width: 320px !important; margin: 0 auto 48px !important; } [data-cart] .cartAppleHeroActions .button { width: 100% !important; max-width: 320px !important; } [data-cart] [data-cart-content] { border-top: 1px solid #d2d2d7 !important; } [data-cart] .cart { display: block !important; width: 100% !important; margin: 0 !important; border-collapse: collapse !important; } [data-cart] .cart-header { display: none !important; } [data-cart] .cart-list { display: block !important; width: 100% !important; } [data-cart] .cart-item { display: grid !important; grid-template-columns: 168px minmax(320px, 1fr) 112px minmax(124px, max-content) !important; column-gap: 34px !important; row-gap: 12px !important; align-items: center !important; width: 100% !important; padding: 36px 0 !important; border-bottom: 1px solid #d2d2d7 !important; } [data-cart] .cart-item::before, [data-cart] .cart-item::after { content: none !important; display: none !important; } [data-cart] .cart-item-block { display: block !important; float: none !important; clear: none !important; width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; } [data-cart] .cart-item-figure { display: flex !important; align-items: center !important; justify-content: center !important; width: 168px !important; height: 168px !important; padding: 18px !important; overflow: hidden !important; border-radius: 12px !important; background: #f5f5f7 !important; } [data-cart] .cart-item-image, [data-cart] .cart-item-fixed-image, [data-cart] .cart-item-figure img { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; margin: 0 !important; object-fit: contain !important; } [data-cart] .cart-item-title { align-self: center !important; min-width: 0 !important; } [data-cart] .cart-item-brand { margin: 0 0 8px !important; color: #515154 !important; font-size: 15px !important; line-height: 1.35 !important; } [data-cart] .cart-item-name { margin: 0 0 10px !important; color: #1d1d1f !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } [data-cart] .cart-item-name__label { color: #1d1d1f !important; text-decoration: none !important; } [data-cart] .cart-item-title p, [data-cart] .definitionList, [data-cart] .definitionList-key, [data-cart] .definitionList-value, [data-cart] .cart-item-options { margin-top: 0 !important; color: #515154 !important; font-size: 15px !important; line-height: 1.45 !important; } [data-cart] .cart-item > .cart-item-info:nth-child(3), [data-cart] .cart-item-label { display: none !important; } [data-cart] .cart-item-quantity { justify-self: center !important; align-self: center !important; text-align: center !important; } [data-cart] .cart-item-quantity .form-increment { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 112px !important; height: 42px !important; margin: 0 !important; overflow: hidden !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #fff !important; } [data-cart] .cart-item-quantity .button--icon { width: 34px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } [data-cart] .cart-item-quantity .icon { width: 18px !important; height: 18px !important; } [data-cart] .cart-item-qty-input { width: 34px !important; min-width: 34px !important; height: 40px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; color: #1d1d1f !important; background: transparent !important; font-size: 16px !important; font-weight: 600 !important; text-align: center !important; } [data-cart] .cart-item > .cart-item-info:last-child { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 16px !important; align-self: center !important; text-align: right !important; } [data-cart] .cart-item-value { padding-left: 0 !important; color: #1d1d1f !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; } [data-cart] .cart-remove { display: inline-flex !important; flex: 0 0 24px !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 5px !important; border: 0 !important; border-radius: 50% !important; background: #f5f5f7 !important; } [data-cart] [data-cart-coupons], [data-cart] [data-cart-totals], [data-cart] .cart-actions { width: 100% !important; max-width: 480px !important; margin-right: 0 !important; margin-left: auto !important; } [data-cart] [data-cart-coupons] { margin-top: 0 !important; padding-top: 0 !important; } [data-cart] .cart-coupons { padding: 0 0 16px !important; border-bottom: 1px solid #d2d2d7 !important; } [data-cart] .cart-coupon-trigger { text-align: left !important; } [data-cart] .cart-totals { display: block !important; float: none !important; clear: none !important; width: 100% !important; margin: 0 !important; } [data-cart] .cart-total { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: baseline !important; gap: 20px !important; width: 100% !important; border: 0 !important; } [data-cart] .cart-total-label, [data-cart] .cart-total-value { float: none !important; width: auto !important; padding: 7px 0 !important; color: #1d1d1f !important; font-size: 16px !important; line-height: 1.35 !important; text-align: left !important; } [data-cart] .cart-total-value { justify-self: end !important; text-align: right !important; white-space: nowrap !important; } [data-cart] .cart-total-with-savings, [data-cart] .cart-totals > .cart-total:last-child { margin-top: 14px !important; padding-top: 16px !important; border-top: 1px solid #d2d2d7 !important; } [data-cart] .cart-total-grandTotal, [data-cart] .cart-total-grandTotal span, [data-cart] .cart-total-amount { color: #1d1d1f !important; font-size: 26px !important; font-weight: 600 !important; line-height: 1.15 !important; } [data-cart] .cart-actions { display: grid !important; gap: 10px !important; margin-top: 24px !important; } [data-cart] .cart-actions .button { float: none !important; margin: 0 !important; } [data-cart] .cartAppleRecommendations { margin: 76px calc(50% - 50vw) 0 !important; padding: 58px 24px 72px !important; border-top: 1px solid #d2d2d7 !important; background: #f5f5f7 !important; } [data-cart] .cartAppleRecommendations h2 { margin: 0 0 30px !important; color: #1d1d1f !important; font-size: 32px !important; font-weight: 600 !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-align: center !important; } [data-cart] .cartAppleRecommendationGrid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px !important; max-width: 1064px !important; margin: 0 auto !important; padding: 0 !important; } [data-cart] .cartAppleRecommendationItem { width: auto !important; min-width: 0 !important; padding: 0 !important; list-style: none !important; } [data-cart] .cartAppleRecommendations .card { display: flex !important; height: 100% !important; min-width: 0 !important; flex-direction: column !important; padding: 18px !important; border: 1px solid #e5e5e7 !important; border-radius: 8px !important; background: #fff !important; } [data-cart] .cartAppleRecommendations .card-figure { margin: 0 0 16px !important; } [data-cart] .cartAppleRecommendations .card-img-container { display: flex !important; max-width: none !important; aspect-ratio: 1 / 1 !important; align-items: center !important; justify-content: center !important; padding: 14px !important; border-radius: 8px !important; background: #f5f5f7 !important; } [data-cart] .cartAppleRecommendations .card-img-container::after { content: none !important; } [data-cart] .cartAppleRecommendations .card-image { position: static !important; width: 100% !important; height: 100% !important; object-fit: contain !important; } [data-cart] .cartAppleRecommendations .card-body { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; padding: 0 !important; text-align: left !important; } [data-cart] .cartAppleRecommendations .card-title { margin: 0 0 10px !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; } [data-cart] .cartAppleRecommendations .card-title a { color: #1d1d1f !important; text-decoration: none !important; } [data-cart] .cartAppleRecommendations .card-text { margin-bottom: 18px !important; color: #1d1d1f !important; font-size: 15px !important; line-height: 1.35 !important; } [data-cart] .cartAppleRecommendations .card-figcaption.desktop { display: none !important; } [data-cart] .cartAppleRecommendations .card-figcaption.mobile { display: block !important; margin: auto 0 0 !important; opacity: 1 !important; pointer-events: auto !important; } [data-cart] .cartAppleRecommendations .card-figcaption-body { display: block !important; transform: none !important; } [data-cart] .cartAppleRecommendations .card-figcaption-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 42px !important; margin: 0 !important; border-radius: 8px !important; background: #0071e3 !important; border-color: #0071e3 !important; color: #fff !important; font-size: 15px !important; font-weight: 400 !important; text-transform: none !important; } @media (max-width: 980px) { [data-cart] .cart-item { grid-template-columns: 128px minmax(0, 1fr) 112px minmax(112px, max-content) !important; column-gap: 22px !important; } [data-cart] .cart-item-figure { width: 128px !important; height: 128px !important; padding: 14px !important; } [data-cart] .cartAppleRecommendationGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 720px) { [data-cart] { padding-right: 18px !important; padding-left: 18px !important; } [data-cart] .cart-item { grid-template-columns: 96px minmax(0, 1fr) max-content !important; column-gap: 16px !important; align-items: start !important; padding: 28px 0 !important; } [data-cart] .cart-item-figure { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 96px !important; height: 96px !important; padding: 10px !important; } [data-cart] .cart-item-title { grid-column: 2 / 4 !important; grid-row: 1 !important; align-self: start !important; } [data-cart] .cart-item-quantity { grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; } [data-cart] .cart-item > .cart-item-info:last-child { grid-column: 3 !important; grid-row: 2 !important; gap: 10px !important; } [data-cart] [data-cart-coupons], [data-cart] [data-cart-totals], [data-cart] .cart-actions { max-width: 100% !important; } [data-cart] .cartAppleRecommendations { margin-right: -18px !important; margin-left: -18px !important; padding-right: 18px !important; padding-left: 18px !important; } } @media (max-width: 540px) { [data-cart] .cart-item { grid-template-columns: 86px minmax(0, 1fr) !important; } [data-cart] .cart-item-title, [data-cart] .cart-item-quantity, [data-cart] .cart-item > .cart-item-info:last-child { grid-column: 2 !important; } [data-cart] .cart-item > .cart-item-info:last-child { grid-row: 3 !important; justify-content: flex-start !important; } [data-cart] .cartAppleRecommendationGrid { grid-template-columns: 1fr !important; } } /* Final cart repair: keep totals on one row and center quantity arrows inside the pill. */ [data-cart] [data-cart-totals] { width: 100% !important; max-width: 480px !important; margin: 22px 0 0 auto !important; padding: 0 !important; } [data-cart] [data-cart-totals] .cart-totals, [data-cart] [data-cart-totals] .cart-total-enhanced { display: block !important; float: none !important; clear: both !important; width: 100% !important; max-width: 480px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } [data-cart] [data-cart-totals] .cart-total, [data-cart] [data-cart-totals] .cart-total-enhanced .cart-total { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; grid-auto-flow: row !important; align-items: baseline !important; column-gap: 22px !important; row-gap: 0 !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important; } [data-cart] [data-cart-totals] .cart-total > .cart-total-label, [data-cart] [data-cart-totals] .cart-total-enhanced .cart-total > .cart-total-label { display: block !important; float: none !important; grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 7px 0 !important; text-align: left !important; white-space: normal !important; } [data-cart] [data-cart-totals] .cart-total > .cart-total-value, [data-cart] [data-cart-totals] .cart-total-enhanced .cart-total > .cart-total-value { display: block !important; float: none !important; grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 7px 0 !important; text-align: right !important; white-space: nowrap !important; } [data-cart] [data-cart-totals] .cart-total-with-savings, [data-cart] [data-cart-totals] .cart-totals > .cart-total:last-child { margin-top: 14px !important; padding-top: 16px !important; border-top: 1px solid #d2d2d7 !important; } [data-cart] [data-cart-totals] .cart-total-grandTotal, [data-cart] [data-cart-totals] .cart-total-grandTotal span, [data-cart] [data-cart-totals] .cart-total-amount { display: block !important; font-size: 26px !important; font-weight: 600 !important; line-height: 1.15 !important; text-align: right !important; } [data-cart] .cart-item-quantity .form-increment { display: grid !important; grid-template-columns: 36px 40px 36px !important; align-items: center !important; justify-content: center !important; justify-items: center !important; width: 112px !important; height: 42px !important; min-width: 112px !important; min-height: 42px !important; overflow: hidden !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #fff !important; } [data-cart] .cart-item-quantity .button--icon { display: flex !important; position: static !important; align-items: center !important; justify-content: center !important; width: 36px !important; min-width: 36px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; line-height: 1 !important; } [data-cart] .cart-item-quantity .icon, [data-cart] .cart-item-quantity .button--icon svg { display: block !important; position: static !important; width: 16px !important; min-width: 16px !important; height: 16px !important; min-height: 16px !important; margin: 0 !important; transform: none !important; } [data-cart] .cart-item-qty-input { display: block !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 40px !important; text-align: center !important; } /* Header conversion: keep existing logo/search/account/cart links, but place them in one sticky bar. */ @media (min-width: 801px) { header.header { position: sticky !important; top: 0 !important; z-index: 1000 !important; display: grid !important; grid-template-rows: auto auto !important; width: 100% !important; border-bottom: 1px solid #d2d2d7 !important; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important; backdrop-filter: saturate(180%) blur(16px) !important; } header.header .mobileMenu-toggle { display: none !important; } header.header .logo-user-section.container { display: grid !important; grid-template-columns: 180px minmax(0, 1fr) !important; align-items: center !important; gap: 24px !important; width: 100% !important; max-width: 1440px !important; min-height: 74px !important; margin: 0 auto !important; padding: 10px 28px !important; } header.header .header-logo { grid-column: 1 !important; display: flex !important; align-items: center !important; width: auto !important; max-width: 180px !important; height: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } header.header .header-logo a, header.header .header-logo-image-container { display: flex !important; align-items: center !important; width: auto !important; max-width: 180px !important; height: auto !important; } header.header .header-logo-image, header.header .header-logo-image-unknown-size { display: block !important; width: auto !important; max-width: 150px !important; max-height: 54px !important; object-fit: contain !important; } header.header .navUser { grid-column: 2 !important; position: static !important; display: flex !important; justify-content: flex-end !important; width: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; } header.header .navUser-section, header.header .navUser-section--alt, header.header .user-icons { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 14px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } header.header .dropdown--quickSearch.desktop { position: static !important; display: block !important; flex: 0 1 360px !important; width: 360px !important; max-width: 38vw !important; height: auto !important; margin: 0 8px 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } header.header .dropdown--quickSearch .container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } header.header .dropdown--quickSearch .form { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; } header.header .dropdown--quickSearch .form-fieldset, header.header .dropdown--quickSearch .form-field { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } header.header .dropdown--quickSearch .form-input { width: 100% !important; height: 36px !important; min-height: 36px !important; padding: 8px 38px 8px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #f5f5f7 !important; box-shadow: none !important; color: #1d1d1f !important; font-size: 14px !important; } header.header .dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 10px !important; width: 22px !important; height: 22px !important; margin: 0 !important; transform: translateY(-50%) !important; } header.header .dropdown--quickSearch .form-prefixPostfix-button--postfix { position: absolute !important; inset: 0 !important; width: 22px !important; height: 22px !important; min-height: 22px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: transparent !important; } header.header .navUser-item, header.header .navUser-action, header.header .navUser-item--compare { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; color: #1d1d1f !important; text-decoration: none !important; } header.header .header-icon, header.header .navUser-action svg { width: 21px !important; height: 21px !important; fill: currentColor !important; stroke: currentColor !important; } header.header .countPill { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 16px !important; height: 16px !important; margin: -12px 0 0 -6px !important; padding: 0 4px !important; border-radius: 999px !important; background: #e53935 !important; color: #fff !important; font-size: 10px !important; line-height: 16px !important; } header.header #menu-wrapper { position: static !important; width: 100% !important; max-width: none !important; border-top: 1px solid #e5e5e7 !important; background: #fff !important; } header.header div#menu { position: static !important; width: 100% !important; max-width: 1440px !important; min-height: 44px !important; margin: 0 auto !important; padding: 0 28px !important; background: transparent !important; box-shadow: none !important; } header.header .navPages-wider, header.header .nav-minus-logo, header.header .nav-right-fixed, header.header .nav-right, header.header .navPages-list { display: flex !important; align-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } header.header .navPages-list { gap: 4px !important; overflow-x: auto !important; scrollbar-width: none !important; } header.header .navPages-list::-webkit-scrollbar { display: none !important; } header.header .navPages-item { flex: 0 0 auto !important; } header.header .navPages-action { display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding: 0 12px !important; white-space: nowrap !important; } } @media (max-width: 800px) { header.header { position: sticky !important; top: 0 !important; z-index: 1000 !important; background: #fff !important; border-bottom: 1px solid #d2d2d7 !important; } } /* Coupon form: align with subtotal and prevent the apply button from clipping. */ [data-cart] [data-cart-coupons] { width: 100% !important; max-width: 480px !important; margin: 0 0 0 auto !important; padding: 0 !important; } [data-cart] .cart-coupons { width: 100% !important; margin: 0 !important; padding: 0 0 14px !important; overflow: visible !important; border-bottom: 1px solid #d2d2d7 !important; } [data-cart] .cart-coupon-trigger { width: 100% !important; margin: 0 !important; text-align: left !important; } [data-cart] .cart-coupon-link { display: inline-flex !important; align-items: center !important; min-height: 28px !important; color: #ff3b30 !important; text-decoration: none !important; } [data-cart] .cart-form.coupon-code-form, [data-cart] .coupon-code-form { width: 100% !important; max-width: 100% !important; margin: 8px 0 0 !important; overflow: visible !important; } [data-cart] .coupon-code-form .coupon-form { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(82px, max-content) !important; gap: 8px !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } [data-cart] .coupon-code-form .form-input { width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; padding: 8px 12px !important; box-sizing: border-box !important; } [data-cart] .coupon-code-form .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 82px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; white-space: nowrap !important; } /* Generated recommendation cards used when the platform does not provide suggested_products. */ [data-cart] .cartAppleRecommendationsFallback[hidden] { display: none !important; } [data-cart] .cartAppleRecommendationsFallback { display: flex !important; justify-content: center !important; } [data-cart] .cartAppleRecommendationGenerated { display: flex !important; height: 100% !important; min-width: 0 !important; flex-direction: column !important; padding: 18px !important; border: 1px solid #e5e5e7 !important; border-radius: 8px !important; background: #fff !important; } [data-cart] .cartAppleRecommendationGenerated-imageLink { display: flex !important; aspect-ratio: 1 / 1 !important; align-items: center !important; justify-content: center !important; margin-bottom: 16px !important; padding: 14px !important; border-radius: 8px !important; background: #f5f5f7 !important; } [data-cart] .cartAppleRecommendationGenerated-image { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; } [data-cart] .cartAppleRecommendationGenerated-title { margin: 0 0 10px !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; } [data-cart] .cartAppleRecommendationGenerated-title a { color: #1d1d1f !important; text-decoration: none !important; } [data-cart] .cartAppleRecommendationGenerated-price { margin: 0 0 18px !important; color: #1d1d1f !important; font-size: 15px !important; line-height: 1.35 !important; } [data-cart] .cartAppleRecommendationGenerated-button { width: 100% !important; min-height: 42px !important; margin-top: auto !important; border-radius: 8px !important; text-transform: none !important; } /* Final header polish: keep the real links/forms, remove menu artifacts, and make the sticky header feel unified. */ @media (min-width: 801px) { header.header ul, header.header li { list-style: none !important; } header.header a { text-decoration: none !important; } header.header .logo-user-section.container { min-height: 74px !important; } header.header .header-logo, header.header .header-logo a { display: flex !important; align-items: center !important; min-width: 156px !important; } header.header .header-logo img { display: block !important; max-width: 148px !important; max-height: 58px !important; width: auto !important; height: auto !important; object-fit: contain !important; } header.header .navUser-section--alt { justify-content: flex-end !important; gap: 12px !important; } header.header .user-icons { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } header.header .dropdown--quickSearch.desktop { flex: 0 1 360px !important; margin-left: auto !important; margin-right: 8px !important; } header.header .navUser-item--cart .navUser-action, header.header .navUser-item--account .navUser-action, header.header .navUser-item--compare, header.header .gift-certificates .navUser-action { border-radius: 999px !important; transition: background-color 0.16s ease !important; } header.header .navUser-item--cart .navUser-action:hover, header.header .navUser-item--account .navUser-action:hover, header.header .navUser-item--compare:hover, header.header .gift-certificates .navUser-action:hover { background: #f5f5f7 !important; } header.header #menu .navPages-list, header.header #menu .nav-page-list, header.header .navPages-list.nav-page-list.two { gap: 6px !important; list-style: none !important; } header.header #menu .navPages-action { min-height: 44px !important; border-radius: 999px !important; line-height: 1 !important; transition: background-color 0.16s ease !important; } header.header #menu .navPages-action:hover { background: #f5f5f7 !important; } } @media (max-width: 800px) { header.header a { text-decoration: none !important; } header.header ul, header.header li { list-style: none !important; } header.header .dropdown--quickSearch.psc-mobile-search-open { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 100% !important; right: 12px !important; left: 12px !important; z-index: 1300 !important; width: auto !important; max-width: none !important; padding: 10px 0 !important; border-bottom: 1px solid #d2d2d7 !important; background: #fff !important; transform: none !important; } header.header .dropdown--quickSearch.psc-mobile-search-open .container, header.header .dropdown--quickSearch.psc-mobile-search-open .form, header.header .dropdown--quickSearch.psc-mobile-search-open .form-fieldset, header.header .dropdown--quickSearch.psc-mobile-search-open .form-field { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } header.header .dropdown--quickSearch.psc-mobile-search-open .form-input { width: 100% !important; min-height: 40px !important; padding: 8px 42px 8px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #f5f5f7 !important; } } /* Header cleanup: one working search bar, account, and cart only. */ @media (min-width: 801px) { header.header .dropdown--quickSearch .quickSearch-mobileToggle, header.header .navUser-item.quicksearch, header.header .navUser-action--quickSearch, header.header [data-search="quickSearch"], header.header [data-compare-nav], header.header .navUser-item--compare, header.header .gift-certificates, header.header .currency-menu { display: none !important; } header.header .dropdown--quickSearch.desktop { flex: 0 1 360px !important; width: 360px !important; max-width: 38vw !important; margin-left: auto !important; margin-right: 14px !important; } header.header .dropdown--quickSearch .container, header.header .dropdown--quickSearch .form, header.header .dropdown--quickSearch .form-fieldset, header.header .dropdown--quickSearch .form-field { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } header.header .dropdown--quickSearch .form-input { display: block !important; width: 100% !important; min-width: 0 !important; padding-right: 44px !important; padding-left: 16px !important; } header.header .dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 12px !important; left: auto !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; } header.header .dropdown--quickSearch .search-icon.submit svg, header.header .dropdown--quickSearch .search-icon.submit .header-icon { display: block !important; width: 18px !important; height: 18px !important; pointer-events: none !important; } header.header .dropdown--quickSearch .form-prefixPostfix-button--postfix { position: absolute !important; inset: 0 !important; z-index: 3 !important; width: 22px !important; height: 22px !important; min-height: 22px !important; margin: 0 !important; opacity: 0 !important; cursor: pointer !important; } header.header .user-icons { gap: 12px !important; } header.header .navUser-item--account { order: 10 !important; } header.header .navUser-item--cart { order: 20 !important; } } /* Desktop dynamic header: let the storefront scroll script activate the fixed menu box. */ @media (min-width: 801px) { body.fixed-nav header.header { position: relative !important; top: auto !important; } body.fixed-nav header.header #menu-wrapper.fixed, body.fixed-nav header.header #menu-wrapper.fixed-again, header.header #menu-wrapper.fixed.fixed-again { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1100 !important; width: 100% !important; min-height: 58px !important; height: auto !important; border-top: 0 !important; border-bottom: 1px solid #d2d2d7 !important; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08) !important; backdrop-filter: saturate(180%) blur(16px) !important; } body.fixed-nav header.header #menu.fixed, body.fixed-nav header.header #menu.fixed-again, header.header #menu.fixed.fixed-again { position: relative !important; top: 0 !important; display: flex !important; align-items: center !important; width: 100% !important; max-width: 1440px !important; min-height: 58px !important; height: auto !important; margin: 0 auto !important; padding: 0 28px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body.fixed-nav header.header #menu .navPages-wider { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; width: 100% !important; min-height: 58px !important; padding: 0 !important; } body.fixed-nav header.header #menu .nav-minus-logo { display: flex !important; flex: 1 1 auto !important; align-items: center !important; gap: 18px !important; width: 100% !important; min-width: 0 !important; } body.fixed-nav header.header #menu li.navPages-item.sticky-object.logo { display: flex !important; flex: 0 0 auto !important; align-items: center !important; margin: 0 12px 0 0 !important; } body.fixed-nav header.header #menu li.navPages-item.sticky-object.logo a { display: flex !important; align-items: center !important; min-height: 42px !important; } body.fixed-nav header.header #menu .sticky-object.logo img, body.fixed-nav header.header #menu .sticky-object.logo .header-logo-image { display: block !important; max-width: 112px !important; max-height: 42px !important; width: auto !important; height: auto !important; object-fit: contain !important; } body.fixed-nav header.header #menu .mega-cat-nav { display: flex !important; flex: 0 0 auto !important; align-items: center !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } body.fixed-nav header.header #menu .nav-right-fixed, body.fixed-nav header.header #menu .nav-right { display: flex !important; } body.fixed-nav header.header #menu nav.navUser { position: static !important; display: flex !important; flex: 1 1 auto !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; min-width: 0 !important; margin: 0 0 0 auto !important; padding: 0 !important; transform: none !important; } body.fixed-nav header.header #menu .navUser-section--alt { display: flex !important; flex: 1 1 auto !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; width: auto !important; min-width: 0 !important; } body.fixed-nav header.header #menu .dropdown--quickSearch.desktop { display: block !important; flex: 0 1 340px !important; width: 340px !important; max-width: 34vw !important; margin: 0 12px 0 auto !important; } body.fixed-nav header.header #menu .user-icons { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; } body.fixed-nav header.header #menu .mega-cat-dropdown { top: 58px !important; } } /* Desktop sticky fallback: used when the storefront preview misses the original fixed-menu script. */ @media (min-width: 801px) { header.header.psc-desktop-sticky { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1200 !important; width: 100% !important; border-bottom: 1px solid #d2d2d7 !important; background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important; backdrop-filter: saturate(180%) blur(16px) !important; } header.header.psc-desktop-sticky .logo-user-section.container { min-height: 66px !important; padding-top: 6px !important; padding-bottom: 6px !important; } header.header.psc-desktop-sticky #menu-wrapper { position: static !important; top: auto !important; width: 100% !important; border-top: 1px solid #e5e5e7 !important; box-shadow: none !important; } header.header.psc-desktop-sticky #menu { position: static !important; top: auto !important; min-height: 44px !important; height: auto !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } header.header.psc-desktop-sticky .navUser { position: static !important; display: flex !important; transform: none !important; } } /* Hide carousel controls when there is only one real slide. */ .psc-single-slide-carousel .slick-dots, .psc-single-slide-carousel .slick-arrow, .slick-dots.psc-single-dot-list, .slick-dots.psc-single-dot-list li, .slick-dots.psc-single-dot-list button { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Final desktop sticky enforcement: either the old theme class or the new helper pins the header. */ @media (min-width: 801px) { body.fixed-nav header.header, body.psc-desktop-sticky-active header.header, header.header.psc-desktop-sticky { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1200 !important; width: 100% !important; border-bottom: 1px solid #d2d2d7 !important; background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important; backdrop-filter: saturate(180%) blur(16px) !important; } body.fixed-nav header.header #menu-wrapper, body.psc-desktop-sticky-active header.header #menu-wrapper, header.header.psc-desktop-sticky #menu-wrapper { position: static !important; top: auto !important; width: 100% !important; } .psc-header-spacer { display: none !important; } body.psc-desktop-sticky-active .psc-header-spacer { display: block !important; } } /* Sticky desktop row: keep page links visible between Menu and search/cart/account. */ @media (min-width: 801px) { body.fixed-nav header.header #menu .nav-minus-logo, body.psc-desktop-sticky-active header.header #menu .nav-minus-logo, header.header.psc-desktop-sticky #menu .nav-minus-logo { display: flex !important; align-items: center !important; gap: 18px !important; width: 100% !important; min-width: 0 !important; } body.fixed-nav header.header #menu .mega-cat-nav, body.psc-desktop-sticky-active header.header #menu .mega-cat-nav, header.header.psc-desktop-sticky #menu .mega-cat-nav { order: 1 !important; flex: 0 0 auto !important; } body.fixed-nav header.header #menu .nav-right-fixed, body.psc-desktop-sticky-active header.header #menu .nav-right-fixed, header.header.psc-desktop-sticky #menu .nav-right-fixed { order: 2 !important; display: flex !important; flex: 1 1 auto !important; align-items: center !important; min-width: 0 !important; width: auto !important; max-width: none !important; overflow: hidden !important; } body.fixed-nav header.header #menu .nav-right, body.psc-desktop-sticky-active header.header #menu .nav-right, header.header.psc-desktop-sticky #menu .nav-right { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; overflow: hidden !important; } body.fixed-nav header.header #menu .navPages-list, body.fixed-nav header.header #menu .nav-page-list, body.psc-desktop-sticky-active header.header #menu .navPages-list, body.psc-desktop-sticky-active header.header #menu .nav-page-list, header.header.psc-desktop-sticky #menu .navPages-list, header.header.psc-desktop-sticky #menu .nav-page-list { display: flex !important; flex: 1 1 auto !important; align-items: center !important; gap: 4px !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; scrollbar-width: none !important; } body.fixed-nav header.header #menu .navPages-list::-webkit-scrollbar, body.psc-desktop-sticky-active header.header #menu .navPages-list::-webkit-scrollbar, header.header.psc-desktop-sticky #menu .navPages-list::-webkit-scrollbar { display: none !important; } body.fixed-nav header.header #menu .navPages-item, body.psc-desktop-sticky-active header.header #menu .navPages-item, header.header.psc-desktop-sticky #menu .navPages-item { flex: 0 0 auto !important; } body.fixed-nav header.header #menu nav.navUser, body.psc-desktop-sticky-active header.header #menu nav.navUser, header.header.psc-desktop-sticky #menu nav.navUser { order: 3 !important; flex: 0 0 auto !important; margin-left: auto !important; } } /* Sticky desktop polish: reserve logo space and vertically center utility icons. */ @media (min-width: 801px) { body.fixed-nav header.header .logo-user-section.container, body.psc-desktop-sticky-active header.header .logo-user-section.container, header.header.psc-desktop-sticky .logo-user-section.container { display: grid !important; grid-template-columns: 126px minmax(0, 1fr) auto !important; align-items: center !important; min-height: 58px !important; padding: 0 28px !important; } body.fixed-nav header.header .header-logo, body.psc-desktop-sticky-active header.header .header-logo, header.header.psc-desktop-sticky .header-logo { grid-column: 1 !important; justify-self: start !important; min-width: 0 !important; width: 112px !important; margin: 0 !important; } body.fixed-nav header.header .header-logo img, body.psc-desktop-sticky-active header.header .header-logo img, header.header.psc-desktop-sticky .header-logo img, body.fixed-nav header.header .header-logo-image, body.psc-desktop-sticky-active header.header .header-logo-image, header.header.psc-desktop-sticky .header-logo-image { max-width: 96px !important; max-height: 44px !important; } body.fixed-nav header.header #menu, body.psc-desktop-sticky-active header.header #menu, header.header.psc-desktop-sticky #menu { padding-left: 154px !important; padding-right: 28px !important; } body.fixed-nav header.header #menu .navPages-wider, body.psc-desktop-sticky-active header.header #menu .navPages-wider, header.header.psc-desktop-sticky #menu .navPages-wider { min-height: 48px !important; } body.fixed-nav header.header #menu .mega-cat-nav, body.psc-desktop-sticky-active header.header #menu .mega-cat-nav, header.header.psc-desktop-sticky #menu .mega-cat-nav { margin-left: 0 !important; } body.fixed-nav header.header #menu .dropdown--quickSearch.desktop, body.psc-desktop-sticky-active header.header #menu .dropdown--quickSearch.desktop, header.header.psc-desktop-sticky #menu .dropdown--quickSearch.desktop { align-self: center !important; width: 360px !important; max-width: 28vw !important; margin: 0 12px 0 auto !important; } body.fixed-nav header.header #menu .user-icons, body.psc-desktop-sticky-active header.header #menu .user-icons, header.header.psc-desktop-sticky #menu .user-icons, body.fixed-nav header.header #menu .navUser-item, body.psc-desktop-sticky-active header.header #menu .navUser-item, header.header.psc-desktop-sticky #menu .navUser-item, body.fixed-nav header.header #menu .navUser-action, body.psc-desktop-sticky-active header.header #menu .navUser-action, header.header.psc-desktop-sticky #menu .navUser-action { align-items: center !important; align-self: center !important; height: 38px !important; } body.fixed-nav header.header #menu .countPill, body.psc-desktop-sticky-active header.header #menu .countPill, header.header.psc-desktop-sticky #menu .countPill { align-self: flex-start !important; margin-top: 0 !important; } } /* Final sticky header layout: keep search/account/cart above the long page-link row. */ @media (min-width: 801px) { body.psc-desktop-sticky-active header.header .logo-user-section.container, header.header.psc-desktop-sticky .logo-user-section.container { display: grid !important; grid-template-columns: 126px minmax(0, 1fr) !important; column-gap: 24px !important; align-items: center !important; width: 100% !important; max-width: 1440px !important; min-height: 58px !important; margin: 0 auto !important; padding: 6px 28px !important; } body.psc-desktop-sticky-active header.header .logo-user-section.container > .header-logo, header.header.psc-desktop-sticky .logo-user-section.container > .header-logo { grid-column: 1 !important; align-self: center !important; justify-self: start !important; width: 112px !important; margin: 0 !important; transform: none !important; } body.psc-desktop-sticky-active header.header .logo-user-section.container > nav.navUser, header.header.psc-desktop-sticky .logo-user-section.container > nav.navUser { grid-column: 2 !important; position: static !important; display: flex !important; align-items: center !important; justify-self: end !important; width: 100% !important; max-width: 720px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } body.psc-desktop-sticky-active header.header .logo-user-section.container > nav.navUser .navUser-section--alt, header.header.psc-desktop-sticky .logo-user-section.container > nav.navUser .navUser-section--alt { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 14px !important; width: 100% !important; margin: 0 !important; } body.psc-desktop-sticky-active header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop, header.header.psc-desktop-sticky .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop { position: static !important; display: block !important; flex: 0 1 360px !important; width: 360px !important; max-width: 28vw !important; max-width: 100% !important; margin: 0 !important; transform: none !important; } body.psc-desktop-sticky-active header.header .logo-user-section.container > nav.navUser .user-icons, header.header.psc-desktop-sticky .logo-user-section.container > nav.navUser .user-icons { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: auto !important; margin: 0 !important; } body.psc-desktop-sticky-active header.header .logo-user-section.container > nav.navUser .navUser-item, body.psc-desktop-sticky-active header.header .logo-user-section.container > nav.navUser .navUser-action, header.header.psc-desktop-sticky .logo-user-section.container > nav.navUser .navUser-item, header.header.psc-desktop-sticky .logo-user-section.container > nav.navUser .navUser-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; } body.psc-desktop-sticky-active header.header #menu, header.header.psc-desktop-sticky #menu { width: 100% !important; max-width: 1440px !important; min-height: 46px !important; margin: 0 auto !important; padding: 0 28px !important; } body.psc-desktop-sticky-active header.header #menu .navPages-wider, body.psc-desktop-sticky-active header.header #menu .nav-minus-logo, header.header.psc-desktop-sticky #menu .navPages-wider, header.header.psc-desktop-sticky #menu .nav-minus-logo { min-height: 46px !important; width: 100% !important; } body.psc-desktop-sticky-active header.header #menu .nav-right-fixed, body.psc-desktop-sticky-active header.header #menu .nav-right, header.header.psc-desktop-sticky #menu .nav-right-fixed, header.header.psc-desktop-sticky #menu .nav-right { flex: 1 1 auto !important; width: auto !important; max-width: none !important; overflow: visible !important; } body.psc-desktop-sticky-active header.header #menu .navPages-list, body.psc-desktop-sticky-active header.header #menu .nav-page-list, header.header.psc-desktop-sticky #menu .navPages-list, header.header.psc-desktop-sticky #menu .nav-page-list { justify-content: flex-start !important; gap: 2px !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; } body.psc-desktop-sticky-active header.header #menu .navPages-action, header.header.psc-desktop-sticky #menu .navPages-action { padding-right: 10px !important; padding-left: 10px !important; font-size: 13px !important; line-height: 1.2 !important; } body.psc-desktop-sticky-active header.header #menu .nav-minus-logo > nav.navUser, header.header.psc-desktop-sticky #menu .nav-minus-logo > nav.navUser { display: none !important; } } @media (min-width: 801px) and (max-width: 1180px) { body.psc-desktop-sticky-active header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop, header.header.psc-desktop-sticky .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop { width: 300px !important; max-width: 30vw !important; } body.psc-desktop-sticky-active header.header #menu .navPages-action, header.header.psc-desktop-sticky #menu .navPages-action { padding-right: 7px !important; padding-left: 7px !important; font-size: 12px !important; } } /* Storefront sticky script fallback: build the fixed menu as utility row + full link row. */ @media (min-width: 801px) { body.fixed-nav header.header .logo-user-section.container { min-height: 0 !important; height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; visibility: hidden !important; } body.fixed-nav header.header #menu-wrapper.fixed, body.fixed-nav header.header #menu-wrapper.fixed-again, header.header #menu-wrapper.fixed.fixed-again { min-height: 110px !important; overflow: visible !important; } body.fixed-nav header.header #menu.fixed.psc-sticky-menu, body.fixed-nav header.header #menu.fixed-again.psc-sticky-menu, header.header #menu.fixed.fixed-again.psc-sticky-menu, header.header #menu.psc-sticky-menu { display: block !important; width: 100% !important; max-width: none !important; min-height: 110px !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row { display: grid !important; grid-template-columns: 150px minmax(0, 1fr) !important; column-gap: 24px !important; align-items: center !important; width: 100% !important; max-width: 1440px !important; min-height: 58px !important; margin: 0 auto !important; padding: 6px 28px !important; border-bottom: 1px solid #e5e5e7 !important; } body.fixed-nav header.header #menu.psc-sticky-menu .psc-sticky-logo, header.header #menu.psc-sticky-menu .psc-sticky-logo { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 150px !important; min-width: 0 !important; height: 46px !important; } body.fixed-nav header.header #menu.psc-sticky-menu .psc-sticky-logo .header-logo, body.fixed-nav header.header #menu.psc-sticky-menu .psc-sticky-logo a, header.header #menu.psc-sticky-menu .psc-sticky-logo .header-logo, header.header #menu.psc-sticky-menu .psc-sticky-logo a { display: flex !important; align-items: center !important; justify-content: flex-start !important; min-width: 0 !important; width: auto !important; height: 46px !important; margin: 0 !important; } body.fixed-nav header.header #menu.psc-sticky-menu .psc-sticky-logo img, body.fixed-nav header.header #menu.psc-sticky-menu .psc-sticky-logo .header-logo-image, body.fixed-nav header.header #menu.psc-sticky-menu .psc-sticky-logo .header-logo-image-unknown-size, header.header #menu.psc-sticky-menu .psc-sticky-logo img, header.header #menu.psc-sticky-menu .psc-sticky-logo .header-logo-image, header.header #menu.psc-sticky-menu .psc-sticky-logo .header-logo-image-unknown-size { display: block !important; max-width: 118px !important; max-height: 42px !important; width: auto !important; height: auto !important; object-fit: contain !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row > nav.navUser, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row > nav.navUser { grid-column: 2 !important; position: static !important; display: flex !important; align-items: center !important; justify-self: end !important; width: 100% !important; max-width: 720px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row > nav.navUser .navUser-section--alt, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row > nav.navUser .navUser-section--alt { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch.desktop, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch.desktop { position: static !important; display: block !important; flex: 0 1 360px !important; width: 360px !important; max-width: 28vw !important; margin: 0 12px 0 auto !important; padding: 0 !important; transform: none !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .container, body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .form, body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .form-fieldset, body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .form-field, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .container, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .form, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .form-fieldset, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .form-field { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .form, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .form { position: relative !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .search-icon.submit, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 12px !important; left: auto !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; transform: translateY(-50%) !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .form-prefixPostfix-button--postfix, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .dropdown--quickSearch .form-prefixPostfix-button--postfix { position: absolute !important; inset: 0 !important; z-index: 3 !important; width: 22px !important; height: 22px !important; min-height: 22px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; opacity: 0 !important; color: transparent !important; cursor: pointer !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .user-icons, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row .user-icons { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: auto !important; margin: 0 !important; padding: 0 !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .navPages-wider, header.header #menu.psc-sticky-menu > .navPages-wider { display: flex !important; align-items: center !important; width: 100% !important; max-width: 1440px !important; min-height: 52px !important; margin: 0 auto !important; padding: 0 28px !important; overflow: visible !important; } body.fixed-nav header.header #menu.psc-sticky-menu .nav-minus-logo, header.header #menu.psc-sticky-menu .nav-minus-logo { display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; min-height: 52px !important; } body.fixed-nav header.header #menu.psc-sticky-menu .mega-cat-nav, header.header #menu.psc-sticky-menu .mega-cat-nav { flex: 0 0 auto !important; min-width: 0 !important; } body.fixed-nav header.header #menu.psc-sticky-menu .nav-right-fixed, body.fixed-nav header.header #menu.psc-sticky-menu .nav-right, header.header #menu.psc-sticky-menu .nav-right-fixed, header.header #menu.psc-sticky-menu .nav-right { display: flex !important; flex: 1 1 auto !important; align-items: center !important; width: auto !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; } body.fixed-nav header.header #menu.psc-sticky-menu .navPages-list, body.fixed-nav header.header #menu.psc-sticky-menu .nav-page-list, body.fixed-nav header.header #menu.psc-sticky-menu .nav-page-list.two.hidden, header.header #menu.psc-sticky-menu .navPages-list, header.header #menu.psc-sticky-menu .nav-page-list, header.header #menu.psc-sticky-menu .nav-page-list.two.hidden { display: flex !important; align-items: center !important; gap: 2px !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; white-space: nowrap !important; } body.fixed-nav header.header #menu.psc-sticky-menu .navPages-list.nav-page-list.one, header.header #menu.psc-sticky-menu .navPages-list.nav-page-list.one { flex: 1 1 auto !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } body.fixed-nav header.header #menu.psc-sticky-menu .navPages-list.nav-page-list.one::-webkit-scrollbar, header.header #menu.psc-sticky-menu .navPages-list.nav-page-list.one::-webkit-scrollbar { display: none !important; } body.fixed-nav header.header #menu.psc-sticky-menu .navPages-item, header.header #menu.psc-sticky-menu .navPages-item { flex: 0 0 auto !important; min-width: 0 !important; } body.fixed-nav header.header #menu.psc-sticky-menu .navPages-action, header.header #menu.psc-sticky-menu .navPages-action { display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding-right: 9px !important; padding-left: 9px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; } } /* CSS-only safety net for one-slide Slick carousels, even if the JS runs late. */ .slick-dots:has(> li:first-child:last-child), .slick-dots > li:first-child:last-child, .slick-dots > li:first-child:last-child button { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Dynamic sticky header v13: compact search so it cannot cover the navigation links. */ @media (min-width: 801px) { body.fixed-nav header.header #menu.fixed, body.fixed-nav header.header #menu.fixed-again, header.header #menu.fixed.fixed-again { display: flex !important; align-items: center !important; width: 100% !important; max-width: none !important; min-height: 58px !important; height: 58px !important; padding: 0 36px !important; overflow: visible !important; } body.fixed-nav header.header #menu.fixed .navPages-wider, body.fixed-nav header.header #menu.fixed-again .navPages-wider, header.header #menu.fixed.fixed-again .navPages-wider { display: flex !important; align-items: center !important; width: 100% !important; max-width: none !important; min-height: 58px !important; height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body.fixed-nav header.header #menu.fixed .nav-minus-logo, body.fixed-nav header.header #menu.fixed-again .nav-minus-logo, header.header #menu.fixed.fixed-again .nav-minus-logo { display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; height: 58px !important; overflow: visible !important; } body.fixed-nav header.header #menu.fixed .mega-cat-nav, body.fixed-nav header.header #menu.fixed-again .mega-cat-nav, header.header #menu.fixed.fixed-again .mega-cat-nav { flex: 0 0 auto !important; min-width: 0 !important; } body.fixed-nav header.header #menu.fixed .nav-right-fixed, body.fixed-nav header.header #menu.fixed .nav-right, body.fixed-nav header.header #menu.fixed-again .nav-right-fixed, body.fixed-nav header.header #menu.fixed-again .nav-right, header.header #menu.fixed.fixed-again .nav-right-fixed, header.header #menu.fixed.fixed-again .nav-right { display: flex !important; flex: 1 1 auto !important; align-items: center !important; width: auto !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; } body.fixed-nav header.header #menu.fixed .navPages-list, body.fixed-nav header.header #menu.fixed .nav-page-list, body.fixed-nav header.header #menu.fixed .nav-page-list.two.hidden, body.fixed-nav header.header #menu.fixed-again .navPages-list, body.fixed-nav header.header #menu.fixed-again .nav-page-list, body.fixed-nav header.header #menu.fixed-again .nav-page-list.two.hidden, header.header #menu.fixed.fixed-again .navPages-list, header.header #menu.fixed.fixed-again .nav-page-list, header.header #menu.fixed.fixed-again .nav-page-list.two.hidden { display: flex !important; flex: 0 1 auto !important; align-items: center !important; gap: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; white-space: nowrap !important; } body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one { flex: 1 1 auto !important; } body.fixed-nav header.header #menu.fixed .navPages-item, body.fixed-nav header.header #menu.fixed-again .navPages-item, header.header #menu.fixed.fixed-again .navPages-item { flex: 0 0 auto !important; } body.fixed-nav header.header #menu.fixed .navPages-action, body.fixed-nav header.header #menu.fixed-again .navPages-action, header.header #menu.fixed.fixed-again .navPages-action { display: inline-flex !important; align-items: center !important; min-height: 58px !important; padding-right: 8px !important; padding-left: 8px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; } body.fixed-nav header.header #menu.fixed nav.navUser, body.fixed-nav header.header #menu.fixed-again nav.navUser, header.header #menu.fixed.fixed-again nav.navUser { position: static !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; width: auto !important; min-width: 0 !important; margin: 0 0 0 auto !important; padding: 0 !important; transform: none !important; } body.fixed-nav header.header #menu.fixed nav.navUser .navUser-section--alt, body.fixed-nav header.header #menu.fixed-again nav.navUser .navUser-section--alt, header.header #menu.fixed.fixed-again nav.navUser .navUser-section--alt { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop { position: relative !important; display: block !important; flex: 0 0 44px !important; width: 44px !important; max-width: 44px !important; height: 38px !important; margin: 0 2px 0 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .container, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .form, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .form-fieldset, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .form-field, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .container, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .form, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-fieldset, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-field, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .container, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .form, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-fieldset, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-field { display: block !important; width: 44px !important; max-width: 44px !important; min-width: 0 !important; height: 38px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .form, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .form, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .form { position: relative !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .form-input, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-input, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-input { width: 44px !important; min-width: 44px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: transparent !important; caret-color: transparent !important; box-shadow: none !important; cursor: pointer !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .form-input::placeholder, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-input::placeholder, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-input::placeholder { color: transparent !important; opacity: 0 !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .search-icon.submit, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .search-icon.submit, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .search-icon.submit { position: absolute !important; top: 50% !important; right: 9px !important; left: auto !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; transform: translateY(-50%) !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within { position: absolute !important; top: 64px !important; right: 84px !important; z-index: 1500 !important; width: 360px !important; max-width: calc(100vw - 120px) !important; height: auto !important; padding: 10px !important; border: 1px solid #d2d2d7 !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14) !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .container, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .form, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .form-fieldset, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .form-field, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .container, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-fieldset, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-field, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .container, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-fieldset, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-field { width: 100% !important; max-width: none !important; height: auto !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .form-input, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-input, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-input { width: 100% !important; min-width: 0 !important; padding: 8px 42px 8px 14px !important; border: 1px solid #d2d2d7 !important; background: #f5f5f7 !important; color: #1d1d1f !important; caret-color: auto !important; cursor: text !important; } } /* Dynamic sticky header v15: expand search inline, not as a floating pop-out card. */ @media (min-width: 801px) { body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within { position: relative !important; top: auto !important; right: auto !important; left: auto !important; z-index: auto !important; flex: 0 0 260px !important; width: 260px !important; max-width: 24vw !important; height: 38px !important; margin: 0 8px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .container, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .form, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .form-fieldset, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .form-field, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .container, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-fieldset, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-field, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .container, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-fieldset, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-field { width: 100% !important; max-width: none !important; height: 38px !important; margin: 0 !important; padding: 0 !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .form-input, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-input, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-input { width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; padding: 8px 42px 8px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #f5f5f7 !important; color: #1d1d1f !important; caret-color: auto !important; box-shadow: none !important; cursor: text !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within .form-input::placeholder, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-input::placeholder, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within .form-input::placeholder { color: #6e6e73 !important; opacity: 1 !important; } } @media (min-width: 801px) and (max-width: 1300px) { body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop:focus-within, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop:focus-within { flex-basis: 220px !important; width: 220px !important; max-width: 22vw !important; } } /* Product page quantity v15: undo broad button styling and use a compact stepper. */ body.product .productView-options .form-field--increments { margin: 18px 0 0 !important; } body.product .productView-options .form-field--increments .form-label { display: block !important; margin: 0 0 10px !important; font-weight: 600 !important; } body.product .productView-options .form-increment { display: inline-grid !important; grid-template-columns: 42px 54px 42px !important; align-items: center !important; width: 138px !important; min-width: 138px !important; height: 42px !important; overflow: hidden !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important; } body.product .productView-options .form-increment .button.button--icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #1d1d1f !important; line-height: 1 !important; } body.product .productView-options .form-increment .button.button--icon[data-action="dec"] { order: 1 !important; } body.product .productView-options .form-increment .form-input--incrementTotal { order: 2 !important; width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-right: 1px solid #e5e5e7 !important; border-left: 1px solid #e5e5e7 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; color: #1d1d1f !important; font-size: 16px !important; font-weight: 600 !important; line-height: 40px !important; text-align: center !important; } body.product .productView-options .form-increment .button.button--icon[data-action="inc"] { order: 3 !important; } body.product .productView-options .form-increment .button.button--icon .icon, body.product .productView-options .form-increment .button.button--icon svg { display: none !important; } body.product .productView-options .form-increment .button.button--icon::before { display: block !important; font-size: 22px !important; font-weight: 500 !important; line-height: 1 !important; } body.product .productView-options .form-increment .button.button--icon[data-action="dec"]::before { content: "-" !important; } body.product .productView-options .form-increment .button.button--icon[data-action="inc"]::before { content: "+" !important; } /* Header logo v17: make the brand readable while preserving the current header layout. */ @media (min-width: 801px) { header.header .logo-user-section.container { grid-template-columns: 220px minmax(0, 1fr) !important; min-height: 88px !important; } header.header .header-logo, header.header .header-logo a, header.header .header-logo-image-container { justify-content: flex-start !important; width: 220px !important; max-width: 220px !important; min-width: 0 !important; } header.header .header-logo img, header.header .header-logo-image, header.header .header-logo-image-unknown-size { max-width: 180px !important; max-height: 70px !important; width: auto !important; height: auto !important; object-fit: contain !important; } body.psc-desktop-sticky-active header.header .logo-user-section.container, header.header.psc-desktop-sticky .logo-user-section.container { grid-template-columns: 170px minmax(0, 1fr) !important; min-height: 68px !important; } body.psc-desktop-sticky-active header.header .logo-user-section.container > .header-logo, header.header.psc-desktop-sticky .logo-user-section.container > .header-logo { width: 156px !important; max-width: 156px !important; } body.psc-desktop-sticky-active header.header .header-logo img, body.psc-desktop-sticky-active header.header .header-logo-image, body.psc-desktop-sticky-active header.header .header-logo-image-unknown-size, header.header.psc-desktop-sticky .header-logo img, header.header.psc-desktop-sticky .header-logo-image, header.header.psc-desktop-sticky .header-logo-image-unknown-size { max-width: 140px !important; max-height: 54px !important; } body.fixed-nav header.header #menu.psc-sticky-menu > .psc-sticky-utility-row, header.header #menu.psc-sticky-menu > .psc-sticky-utility-row { grid-template-columns: 184px minmax(0, 1fr) !important; min-height: 68px !important; } body.fixed-nav header.header #menu.psc-sticky-menu .psc-sticky-logo, header.header #menu.psc-sticky-menu .psc-sticky-logo { width: 184px !important; height: 54px !important; } body.fixed-nav header.header #menu.psc-sticky-menu .psc-sticky-logo img, body.fixed-nav header.header #menu.psc-sticky-menu .psc-sticky-logo .header-logo-image, body.fixed-nav header.header #menu.psc-sticky-menu .psc-sticky-logo .header-logo-image-unknown-size, header.header #menu.psc-sticky-menu .psc-sticky-logo img, header.header #menu.psc-sticky-menu .psc-sticky-logo .header-logo-image, header.header #menu.psc-sticky-menu .psc-sticky-logo .header-logo-image-unknown-size { max-width: 150px !important; max-height: 52px !important; } } /* v22 hard-stop: hide hero carousel controls so a single-image hero never shows dots/arrows. */ .heroCarousel .slick-dots, .heroCarousel .slick-arrow { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Add-to-cart modal v24e: isolate preview modal from product page styling and soften boxy borders. */ body.product #previewModal.modal { border: 0 !important; border-radius: 22px !important; overflow: hidden !important; background: #ffffff !important; box-shadow: 0 28px 72px rgba(0, 0, 0, 0.22) !important; } body.product #previewModal .modal-header { border-bottom: 0 !important; padding: 22px 54px 18px !important; } body.product #previewModal .modal-header-title { margin: 0 !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important; font-size: 26px !important; line-height: 1.12 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; text-align: center !important; color: #1d1d1f !important; } body.product #previewModal .modal-close { top: 14px !important; right: 14px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; color: #6e6e73 !important; background: #f5f5f7 !important; line-height: 34px !important; } body.product #previewModal .modal-body { border-top: 0 !important; padding: 0 18px 18px !important; } body.product #previewModal .previewCart { display: flex !important; flex-direction: row-reverse !important; align-items: stretch !important; gap: 18px !important; } body.product #previewModal .previewCart .productView { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 22px !important; border-radius: 18px !important; background: #fafafc !important; } body.product #previewModal .previewCart .productView-image { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; width: 100% !important; margin: 0 0 16px !important; padding: 0 !important; border-radius: 16px !important; background: transparent !important; } body.product #previewModal .previewCart .productView-img-container { position: relative !important; width: 100% !important; height: 360px !important; max-width: 100% !important; margin: 0 auto !important; padding: 16px !important; border-radius: 16px !important; background: #f3f3f5 !important; box-sizing: border-box !important; } body.product #previewModal .previewCart .productView-img-container::after { content: none !important; display: none !important; } body.product #previewModal .previewCart .productView-image--cart { position: absolute !important; top: 16px !important; right: 16px !important; bottom: 16px !important; left: 16px !important; width: calc(100% - 32px) !important; height: calc(100% - 32px) !important; max-width: none !important; max-height: none !important; margin: auto !important; object-fit: contain !important; } body.product #previewModal .previewCart .productView-details { margin: 0 !important; padding: 0 !important; } body.product #previewModal .previewCart .productView-title { margin: 0 0 8px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important; font-size: 28px !important; line-height: 1.12 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: #1d1d1f !important; } body.product #previewModal .previewCart .productView-brand { margin: 0 0 8px !important; font-size: 16px !important; line-height: 1.45 !important; color: #6e6e73 !important; } body.product #previewModal .previewCart .productView-price { margin: 0 !important; font-size: 24px !important; line-height: 1.25 !important; font-weight: 600 !important; color: #1d1d1f !important; } body.product #previewModal .previewCartCheckout { width: 320px !important; min-width: 280px !important; margin: 0 !important; padding: 18px !important; border: 0 !important; border-radius: 18px !important; background: #f7f7f8 !important; text-align: center !important; } body.product #previewModal .previewCartCheckout-subtotal { margin: 14px 0 18px !important; color: #1d1d1f !important; } body.product #previewModal .previewCartCheckout-price { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important; font-size: 28px !important; line-height: 1.2 !important; font-weight: 600 !important; color: #1d1d1f !important; } body.product #previewModal .previewCartCheckout .button { border-radius: 999px !important; border-width: 0 !important; min-height: 44px !important; padding: 11px 16px !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; } body.product #previewModal .previewCartCheckout .button.button--primary { background: #0071e3 !important; color: #ffffff !important; } body.product #previewModal .previewCartCheckout .button:not(.button--primary) { background: #e8e8ed !important; color: #1d1d1f !important; } @media (max-width: 800px) { body.product #previewModal .modal-header { padding: 18px 48px 14px !important; } body.product #previewModal .modal-header-title { font-size: 25px !important; } body.product #previewModal .modal-body { padding: 0 12px 12px !important; } body.product #previewModal .previewCart { display: block !important; } body.product #previewModal .previewCart .productView { padding: 14px !important; margin-bottom: 12px !important; } body.product #previewModal .previewCart .productView-img-container { height: 210px !important; padding: 10px !important; } body.product #previewModal .previewCartCheckout { width: 100% !important; min-width: 0 !important; padding: 14px !important; } } /* Home floating-page overlay pilot (v24f). */ .psc-floating-page-overlay { position: fixed; inset: 0; z-index: 200000; display: none; } .psc-floating-page-overlay.is-open { display: block; } .psc-floating-page-backdrop { position: absolute; inset: 0; background: rgba(15, 17, 22, 0.4); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } .psc-floating-page-panel { position: relative; z-index: 1; width: 92vw; max-width: 1200px; height: 86vh; max-height: 860px; margin: 6vh auto 0; border-radius: 18px; overflow: hidden; background: #ffffff; box-shadow: 0 20px 56px rgba(0, 0, 0, 0.3); } .psc-floating-page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px 10px 10px 20px; border-bottom: 1px solid #e5e5e7; background: #ffffff; } .psc-floating-page-title { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; font-size: 20px; line-height: 1.2; font-weight: 600; color: #1d1d1f; } .psc-floating-page-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f5f5f7; color: #3a3a3c; font-size: 30px; line-height: 1; cursor: pointer; } .psc-floating-page-close:hover { background: #ececef; } .psc-floating-page-frame-wrap { position: relative; width: 100%; height: calc(100% - 58px); background: #ffffff; } .psc-floating-page-frame { width: 100%; height: 100%; border: 0; background: #ffffff; } body.psc-floating-page-open { overflow: hidden; } @media (max-width: 800px) { .psc-floating-page-panel { width: 100vw; height: 100vh; margin: 0; border-radius: 0; } .psc-floating-page-header { padding-left: 14px; } .psc-floating-page-title { font-size: 17px; } } /* Desktop header containment v29: keep static and sticky header rows inside the viewport. */ @media (min-width: 801px) { header.header, header.header .logo-user-section.container, header.header #menu-wrapper, header.header #menu, header.header #menu.navPages-container { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } header.header .logo-user-section.container { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) !important; padding-right: 28px !important; padding-left: 28px !important; } header.header .logo-user-section.container > .header-logo, header.header .logo-user-section.container > nav.navUser, header.header .logo-user-section.container > nav.navUser .navUser-section--alt { max-width: 100% !important; min-width: 0 !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop { flex: 1 1 260px !important; width: auto !important; min-width: 160px !important; max-width: 360px !important; } header.header .logo-user-section.container > nav.navUser .user-icons { flex: 0 0 auto !important; } header.header #menu .navPages-wider, header.header #menu .nav-minus-logo, header.header #menu .nav-right-fixed, header.header #menu .nav-right { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; } header.header #menu .navPages-wider { width: 100% !important; padding-right: 28px !important; padding-left: 28px !important; overflow: visible !important; } header.header #menu .nav-minus-logo { width: 100% !important; } header.header #menu .mega-cat-nav { flex: 0 0 auto !important; min-width: 0 !important; } header.header #menu .nav-right-fixed, header.header #menu .nav-right { flex: 1 1 auto !important; width: auto !important; overflow: hidden !important; } header.header #menu .navPages-list.nav-page-list.one, header.header #menu .navPages-list.nav-page-list.two { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } header.header #menu .navPages-list.nav-page-list.one::-webkit-scrollbar, header.header #menu .navPages-list.nav-page-list.two::-webkit-scrollbar { display: none !important; } header.header #menu .navPages-list .navPages-item { flex: 0 0 auto !important; } header.header #menu .navPages-list .navPages-action { white-space: nowrap !important; } } /* Sticky header overlap guard: keep utilities in their own flex slot. */ @media (min-width: 801px) { body.fixed-nav header.header #menu.fixed, body.fixed-nav header.header #menu.fixed-again, header.header #menu.fixed.fixed-again { max-width: 100% !important; padding-right: 36px !important; padding-left: 36px !important; overflow: visible !important; } body.fixed-nav header.header #menu.fixed .navPages-wider, body.fixed-nav header.header #menu.fixed-again .navPages-wider, header.header #menu.fixed.fixed-again .navPages-wider { padding-right: 0 !important; padding-left: 0 !important; } body.fixed-nav header.header #menu.fixed .nav-minus-logo, body.fixed-nav header.header #menu.fixed-again .nav-minus-logo, header.header #menu.fixed.fixed-again .nav-minus-logo { gap: 14px !important; overflow: visible !important; } body.fixed-nav header.header #menu.fixed .nav-right-fixed, body.fixed-nav header.header #menu.fixed .nav-right, body.fixed-nav header.header #menu.fixed-again .nav-right-fixed, body.fixed-nav header.header #menu.fixed-again .nav-right, header.header #menu.fixed.fixed-again .nav-right-fixed, header.header #menu.fixed.fixed-again .nav-right { overflow: hidden !important; } body.fixed-nav header.header #menu.fixed nav.navUser, body.fixed-nav header.header #menu.fixed-again nav.navUser, header.header #menu.fixed.fixed-again nav.navUser { flex: 0 0 auto !important; width: auto !important; min-width: 136px !important; margin-left: 0 !important; } body.fixed-nav header.header #menu.fixed nav.navUser .navUser-section--alt, body.fixed-nav header.header #menu.fixed-again nav.navUser .navUser-section--alt, header.header #menu.fixed.fixed-again nav.navUser .navUser-section--alt { gap: 10px !important; width: auto !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop { right: auto !important; left: auto !important; flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; margin-right: 0 !important; } body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one, body.fixed-nav header.header #menu.fixed .nav-page-list.two.hidden, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one, body.fixed-nav header.header #menu.fixed-again .nav-page-list.two.hidden, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one, header.header #menu.fixed.fixed-again .nav-page-list.two.hidden { max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one::-webkit-scrollbar, body.fixed-nav header.header #menu.fixed .nav-page-list.two.hidden::-webkit-scrollbar, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one::-webkit-scrollbar, body.fixed-nav header.header #menu.fixed-again .nav-page-list.two.hidden::-webkit-scrollbar, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one::-webkit-scrollbar, header.header #menu.fixed.fixed-again .nav-page-list.two.hidden::-webkit-scrollbar { display: none !important; } } @media (min-width: 801px) and (max-width: 1180px) { header.header .logo-user-section.container { grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop { max-width: 300px !important; } header.header .logo-user-section.container, header.header #menu .navPages-wider { padding-right: 18px !important; padding-left: 18px !important; } body.fixed-nav header.header #menu.fixed, body.fixed-nav header.header #menu.fixed-again, header.header #menu.fixed.fixed-again { padding-right: 18px !important; padding-left: 18px !important; } header.header #menu .navPages-list .navPages-action { padding-right: 7px !important; padding-left: 7px !important; font-size: 12px !important; } } /* Desktop header reflow v30: wrap the full top-level menu instead of clipping links. */ @media (min-width: 801px) and (max-width: 1399px) { header.header #menu-wrapper, header.header #menu, header.header #menu.navPages-container, header.header #menu .navPages-wider, header.header #menu .nav-minus-logo, header.header #menu .nav-right-fixed, header.header #menu .nav-right, header.header #menu .navPages-list.nav-page-list.one { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } header.header #menu .navPages-wider, header.header #menu .nav-minus-logo { width: 100% !important; max-width: 100% !important; } header.header #menu .nav-minus-logo { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; column-gap: 0 !important; row-gap: 0 !important; } header.header #menu .mega-cat-nav { order: 1 !important; flex: 0 0 auto !important; align-self: flex-start !important; } header.header #menu .nav-right-fixed, header.header #menu .nav-right { order: 2 !important; display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; } header.header #menu .navPages-list.nav-page-list.one { display: flex !important; flex: 1 1 auto !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; scrollbar-width: auto !important; } header.header #menu .navPages-list.nav-page-list.two.hidden { display: none !important; } header.header #menu .navPages-list.nav-page-list.one > .navPages-item { flex: 0 0 auto !important; } header.header #menu .navPages-list.nav-page-list.one > .navPages-item > .navPages-action { display: inline-flex !important; align-items: center !important; min-height: 34px !important; padding-right: 7px !important; padding-left: 7px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; } } @media (min-width: 801px) and (max-width: 1399px) { body.fixed-nav header.header #menu.fixed, body.fixed-nav header.header #menu.fixed-again, header.header #menu.fixed.fixed-again { align-items: flex-start !important; height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 6px !important; overflow: visible !important; } body.fixed-nav header.header #menu.fixed .navPages-wider, body.fixed-nav header.header #menu.fixed-again .navPages-wider, header.header #menu.fixed.fixed-again .navPages-wider, body.fixed-nav header.header #menu.fixed .nav-minus-logo, body.fixed-nav header.header #menu.fixed-again .nav-minus-logo, header.header #menu.fixed.fixed-again .nav-minus-logo { height: auto !important; min-height: 0 !important; align-items: flex-start !important; } body.fixed-nav header.header #menu.fixed nav.navUser, body.fixed-nav header.header #menu.fixed-again nav.navUser, header.header #menu.fixed.fixed-again nav.navUser { order: 2 !important; flex: 0 0 auto !important; width: auto !important; min-width: 136px !important; margin-left: auto !important; align-self: flex-start !important; } body.fixed-nav header.header #menu.fixed .nav-right-fixed, body.fixed-nav header.header #menu.fixed .nav-right, body.fixed-nav header.header #menu.fixed-again .nav-right-fixed, body.fixed-nav header.header #menu.fixed-again .nav-right, header.header #menu.fixed.fixed-again .nav-right-fixed, header.header #menu.fixed.fixed-again .nav-right { order: 3 !important; flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one { justify-content: center !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one > .navPages-item > .navPages-action, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one > .navPages-item > .navPages-action, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one > .navPages-item > .navPages-action { min-height: 32px !important; } } /* Desktop header reflow v31: the live top-level links sit inside the nested nav list. */ @media (min-width: 801px) and (max-width: 1399px) { header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; white-space: normal !important; } header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item { flex: 0 0 auto !important; } header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action { display: inline-flex !important; align-items: center !important; min-height: 34px !important; padding-right: 7px !important; padding-left: 7px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; } } @media (min-width: 801px) and (max-width: 1399px) { body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { justify-content: center !important; } body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action { min-height: 32px !important; } } /* Desktop header reflow v32: size the sticky wrapped rows to their visible content. */ @media (min-width: 801px) and (max-width: 1399px) { body.fixed-nav header.header #menu-wrapper, body.fixed-nav header.header #menu.fixed, body.fixed-nav header.header #menu.fixed-again, header.header #menu.fixed.fixed-again { height: 115px !important; min-height: 115px !important; max-height: none !important; } body.fixed-nav header.header #menu.fixed .navPages-wider, body.fixed-nav header.header #menu.fixed-again .navPages-wider, header.header #menu.fixed.fixed-again .navPages-wider, body.fixed-nav header.header #menu.fixed .nav-minus-logo, body.fixed-nav header.header #menu.fixed-again .nav-minus-logo, header.header #menu.fixed.fixed-again .nav-minus-logo { height: 109px !important; min-height: 109px !important; max-height: none !important; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; } body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one, body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { height: 64px !important; min-height: 64px !important; max-height: none !important; } body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item, body.fixed-nav header.header #menu.fixed .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item, body.fixed-nav header.header #menu.fixed-again .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item, header.header #menu.fixed.fixed-again .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list { height: 32px !important; min-height: 32px !important; max-height: 32px !important; } } /* Desktop header reflow v33: keep sticky search expanded and recover narrow desktop links. */ @media (min-width: 981px) { body.fixed-nav header.header #menu.fixed nav.navUser, body.fixed-nav header.header #menu.fixed-again nav.navUser, header.header #menu.fixed.fixed-again nav.navUser { flex: 0 0 400px !important; width: 400px !important; min-width: 400px !important; margin-left: auto !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop { flex: 0 0 300px !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; } } @media (min-width: 801px) and (max-width: 980px) { body.fixed-nav header.header #menu.fixed nav.navUser, body.fixed-nav header.header #menu.fixed-again nav.navUser, header.header #menu.fixed.fixed-again nav.navUser { flex: 0 0 340px !important; width: 340px !important; min-width: 340px !important; margin-left: auto !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop { flex: 0 0 240px !important; width: 240px !important; min-width: 240px !important; max-width: 240px !important; } } @media (min-width: 801px) { body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .container, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .form, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .form-fieldset, body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .form-field, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .container, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .form, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-fieldset, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-field, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .container, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .form, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-fieldset, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-field { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; } } @media (min-width: 601px) and (max-width: 800px) { header.header { position: sticky !important; top: 0 !important; z-index: 1000 !important; display: grid !important; grid-template-rows: auto auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: rgba(255, 255, 255, 0.96) !important; } header.header .mobileMenu-toggle, header.header #menu .mega-cat-nav, header.header #menu .mega-cat-dropdown { display: none !important; } header.header .logo-user-section.container { display: grid !important; grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) !important; align-items: center !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 72px !important; padding: 10px 18px !important; overflow: visible !important; } header.header .header-logo, header.header .header-logo a, header.header .header-logo-image-container { display: flex !important; align-items: center !important; width: auto !important; max-width: 180px !important; height: auto !important; margin: 0 !important; padding: 0 !important; } header.header .header-logo-image, header.header .header-logo-image-unknown-size { width: auto !important; max-width: 150px !important; max-height: 52px !important; object-fit: contain !important; } header.header .logo-user-section.container > nav.navUser { position: static !important; display: flex !important; justify-content: flex-end !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; } header.header .logo-user-section.container > nav.navUser .navUser-section--alt { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop { position: static !important; display: block !important; flex: 0 1 240px !important; width: 240px !important; min-width: 180px !important; max-width: 240px !important; height: auto !important; margin: 0 6px 0 auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop .quickSearch-mobileToggle { display: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop .container, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop .form, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop .form-fieldset, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop .form-field { position: static !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } header.header #menu-wrapper, header.header #menu, header.header #menu.navPages-container, header.header #menu .navPages, header.header #menu .navPages-wider, header.header #menu .nav-minus-logo, header.header #menu .nav-right-fixed, header.header #menu .nav-right, header.header #menu .navPages-list.nav-page-list.one, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; } header.header #menu .navPages-wider { padding-right: 18px !important; padding-left: 18px !important; } header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list { display: block !important; flex: 0 0 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; } header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 32px !important; padding: 0 7px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; } } /* Desktop header reflow v34: expand the actual sticky search input, not just its shell. */ @media (min-width: 801px) { body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .form-input, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-input, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .form-input { display: block !important; width: 100% !important; min-width: 100% !important; max-width: none !important; height: 38px !important; min-height: 38px !important; padding-right: 42px !important; padding-left: 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #f5f5f7 !important; color: #1d1d1f !important; font-size: 14px !important; } body.fixed-nav header.header #menu.fixed nav.navUser .dropdown--quickSearch.desktop .search-icon.submit, body.fixed-nav header.header #menu.fixed-again nav.navUser .dropdown--quickSearch.desktop .search-icon.submit, header.header #menu.fixed.fixed-again nav.navUser .dropdown--quickSearch.desktop .search-icon.submit { position: absolute !important; top: 50% !important; right: 12px !important; left: auto !important; z-index: 2 !important; width: 20px !important; height: 20px !important; margin: 0 !important; transform: translateY(-50%) !important; } } /* PSC header v35: keep the narrow desktop sticky nav with the fixed utility row. */ @media (min-width: 601px) and (max-width: 800px) { header.header #menu-wrapper, header.header #menu, header.header #menu.navPages-container, header.header #menu .navPages, header.header #menu .navPages-wider, header.header #menu .nav-minus-logo, header.header #menu .nav-right-fixed, header.header #menu .nav-right, header.header #menu .navPages-list.nav-page-list.one, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } header.header .logo-user-section.container.fixed, header.header .logo-user-section.container.fixed-again { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1220 !important; width: 100% !important; max-width: 100% !important; background: rgba(255, 255, 255, 0.97) !important; border-bottom: 0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper { position: fixed !important; top: 85px !important; right: 0 !important; left: 0 !important; z-index: 1210 !important; display: flex !important; justify-content: center !important; height: auto !important; min-height: 96px !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid #d2d2d7 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important; transform: none !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu, header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu.navPages-container, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu.navPages-container { position: static !important; top: auto !important; right: auto !important; left: auto !important; display: flex !important; width: 100% !important; height: auto !important; min-height: 96px !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu .navPages-wider, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu .navPages-wider, header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu .nav-minus-logo, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu .nav-minus-logo, header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu .nav-right-fixed, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu .nav-right-fixed, header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu .nav-right, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu .nav-right { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 96px !important; max-height: none !important; margin: 0 !important; padding: 0 18px !important; overflow: visible !important; transform: none !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu .navPages-list.nav-page-list.one, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu .navPages-list.nav-page-list.one, header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 96px !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; white-space: normal !important; } header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; } header.header #menu .navPages-action, header.header #menu .navPages-action.sideNavTopLevel, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 32px !important; padding: 0 7px !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; } } /* PSC header v39: final resize-safe override after earlier header patches. */ @media (min-width: 601px) and (max-width: 800px) { header.header .navUser-item.quicksearch, header.header .navUser-action--quickSearch, header.header [data-search="quickSearch"] { display: none !important; } header.header .logo-user-section.container, header.header .logo-user-section.container.fixed, header.header .logo-user-section.container.fixed-again { display: grid !important; grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) !important; align-items: center !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; margin: 0 !important; padding: 10px 18px !important; overflow: visible !important; } header.header .logo-user-section.container.fixed, header.header .logo-user-section.container.fixed-again, body.fixed-nav header.header .logo-user-section.container { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1220 !important; background: rgba(255, 255, 255, 0.97) !important; border: 0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.mobile, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop { position: static !important; display: block !important; flex: 0 1 240px !important; width: 240px !important; min-width: 180px !important; max-width: 240px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 8px 0 auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .quickSearch-mobileToggle { display: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .container, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-fieldset, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-field { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .form-input { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 42px !important; min-height: 42px !important; padding: 8px 42px 8px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #f5f5f7 !important; color: #1d1d1f !important; font-size: 14px !important; line-height: 1.2 !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 12px !important; left: auto !important; z-index: 2 !important; display: flex !important; width: 20px !important; height: 20px !important; margin: 0 !important; transform: translateY(-50%) !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper, body.fixed-nav header.header #menu-wrapper { position: fixed !important; top: 72px !important; right: 0 !important; left: 0 !important; z-index: 1210 !important; display: flex !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid #d2d2d7 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important; transform: none !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu, body.fixed-nav header.header #menu-wrapper #menu, body.fixed-nav header.header #menu { position: static !important; top: auto !important; right: auto !important; left: auto !important; display: flex !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } header.header #menu .navPages, header.header #menu .navPages-wider, header.header #menu .nav-minus-logo, header.header #menu .nav-right-fixed, header.header #menu .nav-right, header.header #menu .navPages-list.nav-page-list.one, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 18px !important; overflow: visible !important; white-space: normal !important; transform: none !important; } header.header #menu .navPages-action, header.header #menu .navPages-action.sideNavTopLevel, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 32px !important; padding: 0 7px !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; } } @media (min-width: 801px) { body:not(.fixed-nav) header.header .logo-user-section.container.fixed, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1220 !important; width: 100% !important; max-width: 100% !important; visibility: visible !important; opacity: 1 !important; background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; transform: none !important; } body:not(.fixed-nav) header.header .logo-user-section.container.fixed ~ #menu-wrapper, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again ~ #menu-wrapper { position: fixed !important; top: 120px !important; right: 0 !important; left: 0 !important; z-index: 1210 !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid #d2d2d7 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important; transform: none !important; } body:not(.fixed-nav) header.header .logo-user-section.container.fixed ~ #menu-wrapper #menu, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again ~ #menu-wrapper #menu { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } } /* PSC header v40: lock fixed resize fallbacks to top and keep the search icon inside the input. */ @media (min-width: 601px) and (max-width: 800px) { header.header .dropdown--quickSearch .container, header.header .dropdown--quickSearch .form, header.header .dropdown--quickSearch .form-fieldset, header.header .dropdown--quickSearch .form-field { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } header.header .dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 12px !important; bottom: auto !important; left: auto !important; z-index: 2 !important; display: flex !important; width: 20px !important; height: 20px !important; margin: 0 !important; transform: translateY(-50%) !important; } header.header .logo-user-section.container.fixed, header.header .logo-user-section.container.fixed-again, body.fixed-nav header.header .logo-user-section.container { top: 0 !important; bottom: auto !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; } header.header .logo-user-section.container.fixed ~ #menu-wrapper, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper, body.fixed-nav header.header #menu-wrapper { top: 72px !important; bottom: auto !important; } } @media (min-width: 801px) { body:not(.fixed-nav) header.header .logo-user-section.container.fixed, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again { top: 0 !important; bottom: auto !important; } body:not(.fixed-nav) header.header .logo-user-section.container.fixed ~ #menu-wrapper, body:not(.fixed-nav) header.header .logo-user-section.container.fixed-again ~ #menu-wrapper { top: 120px !important; bottom: auto !important; } } /* PSC header v41: keep dynamic header rows inside one sticky responsive block. */ header.header:has(.logo-user-section.container.fixed), header.header:has(.logo-user-section.container.fixed-again), body.fixed-nav header.header { position: sticky !important; top: 0 !important; right: auto !important; bottom: auto !important; left: auto !important; z-index: 1220 !important; display: grid !important; grid-template-rows: auto auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; background: #fff !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } header.header:has(.logo-user-section.container.fixed) .logo-user-section.container.fixed, header.header:has(.logo-user-section.container.fixed-again) .logo-user-section.container.fixed-again, body.fixed-nav header.header .logo-user-section.container, header.header:has(.logo-user-section.container.fixed) #menu-wrapper, header.header:has(.logo-user-section.container.fixed-again) #menu-wrapper, body.fixed-nav header.header #menu-wrapper { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } header.header:has(.logo-user-section.container.fixed) #menu, header.header:has(.logo-user-section.container.fixed-again) #menu, body.fixed-nav header.header #menu { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow: visible !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } @media (min-width: 520px) and (max-width: 800px) { header.header, header.header .logo-user-section.container, header.header #menu-wrapper { background: #fff !important; } header.header .logo-user-section.container, header.header .logo-user-section.container.fixed, header.header .logo-user-section.container.fixed-again { display: grid !important; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) !important; align-items: center !important; gap: 12px !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; padding: 10px 16px !important; } header.header .logo-user-section.container > nav.navUser, header.header .logo-user-section.container > nav.navUser .navUser-section--alt { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 14px !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; } header.header .navUser-item.quicksearch, header.header .navUser-action--quickSearch, header.header [data-search="quickSearch"], header.header .dropdown--quickSearch .quickSearch-mobileToggle { display: none !important; } header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.mobile, header.header .logo-user-section.container > nav.navUser .dropdown--quickSearch.desktop { position: relative !important; display: block !important; flex: 1 1 180px !important; width: clamp(160px, 36vw, 220px) !important; min-width: 160px !important; max-width: 220px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } header.header .dropdown--quickSearch .container, header.header .dropdown--quickSearch .form, header.header .dropdown--quickSearch .form-fieldset, header.header .dropdown--quickSearch .form-field { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 0 !important; border-radius: 999px !important; box-shadow: none !important; overflow: hidden !important; background: transparent !important; } header.header .dropdown--quickSearch .container::before, header.header .dropdown--quickSearch .container::after, header.header .dropdown--quickSearch .form::before, header.header .dropdown--quickSearch .form::after, header.header .dropdown--quickSearch .form-field::before, header.header .dropdown--quickSearch .form-field::after { display: none !important; content: none !important; } header.header .dropdown--quickSearch .form-input { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 8px 42px 8px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; box-shadow: none !important; outline-offset: 0 !important; background: #f5f5f7 !important; color: #1d1d1f !important; font-size: 14px !important; line-height: 1.2 !important; } header.header .dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 12px !important; bottom: auto !important; left: auto !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; transform: translateY(-50%) !important; } header.header .dropdown--quickSearch .search-icon.submit svg, header.header .dropdown--quickSearch .search-icon.submit .header-icon { position: static !important; display: block !important; width: 20px !important; height: 20px !important; margin: 0 !important; transform: none !important; } header.header #menu-wrapper, header.header .logo-user-section.container.fixed ~ #menu-wrapper, header.header .logo-user-section.container.fixed-again ~ #menu-wrapper, body.fixed-nav header.header #menu-wrapper { display: flex !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; overflow: visible !important; border-bottom: 1px solid #d2d2d7 !important; box-shadow: none !important; } header.header #menu .navPages, header.header #menu .navPages-wider, header.header #menu .nav-minus-logo, header.header #menu .nav-right-fixed, header.header #menu .nav-right, header.header #menu .navPages-list.nav-page-list.one, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 4px 14px 8px !important; overflow: visible !important; white-space: normal !important; } header.header #menu .navPages-action, header.header #menu .navPages-action.sideNavTopLevel, header.header #menu .navPages-list.nav-page-list.one > .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list > .navPages-action { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 32px !important; padding: 0 7px !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; } } /* PSC header v42b: final override after v41. */ html body.fixed-nav header.header.header-logo--left, html body header.header.header-logo--left:has(.logo-user-section.container.fixed), html body header.header.header-logo--left:has(.logo-user-section.container.fixed-again) { position: fixed !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: 0 !important; z-index: 1220 !important; display: grid !important; grid-template-rows: auto auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; background: #fff !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } html body.fixed-nav header.header.header-logo--left .logo-user-section.container, html body header.header.header-logo--left:has(.logo-user-section.container.fixed) .logo-user-section.container, html body header.header.header-logo--left:has(.logo-user-section.container.fixed-again) .logo-user-section.container, html body.fixed-nav header.header.header-logo--left #menu-wrapper, html body header.header.header-logo--left:has(.logo-user-section.container.fixed) #menu-wrapper, html body header.header.header-logo--left:has(.logo-user-section.container.fixed-again) #menu-wrapper { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } html body.fixed-nav header.header.header-logo--left #menu, html body header.header.header-logo--left:has(.logo-user-section.container.fixed) #menu, html body header.header.header-logo--left:has(.logo-user-section.container.fixed-again) #menu { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow: visible !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } @media (min-width: 520px) and (max-width: 800px) { header.header .logo-user-section.container > nav.navUser .navUser-section--alt > .dropdown--quickSearch, header.header .logo-user-section.container > nav.navUser .navUser-section--alt > .dropdown--quickSearch.mobile, header.header .logo-user-section.container > nav.navUser .navUser-section--alt > .dropdown--quickSearch.desktop { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block !important; flex: 0 1 220px !important; width: clamp(160px, 36vw, 220px) !important; min-width: 160px !important; max-width: 220px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 auto 0 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } header.header .logo-user-section.container > nav.navUser .navUser-section--alt { justify-content: flex-end !important; } header.header .dropdown--quickSearch .container, header.header .dropdown--quickSearch .form, header.header .dropdown--quickSearch .form-fieldset, header.header .dropdown--quickSearch .form-field { left: auto !important; right: auto !important; max-width: 100% !important; overflow: hidden !important; } } /* PSC header v43: prevent the 520-600 range from mixing mobile and compact desktop header rules. */ @media (min-width: 520px) and (max-width: 600px) { html body header.header.header-logo--left { position: sticky !important; top: 0 !important; display: grid !important; grid-template-rows: auto auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; background: #fff !important; } html body.fixed-nav header.header.header-logo--left, html body header.header.header-logo--left:has(.logo-user-section.container.fixed), html body header.header.header-logo--left:has(.logo-user-section.container.fixed-again) { position: fixed !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: 0 !important; } html body header.header.header-logo--left .mobileMenu-toggle { display: none !important; } html body header.header.header-logo--left .logo-user-section.container, html body header.header.header-logo--left .logo-user-section.container.fixed, html body header.header.header-logo--left .logo-user-section.container.fixed-again { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: grid !important; grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; margin: 0 !important; padding: 10px 16px !important; overflow: visible !important; background: #fff !important; transform: none !important; } html body header.header.header-logo--left .header-logo, html body header.header.header-logo--left .header-logo--left { position: static !important; display: flex !important; align-items: center !important; width: auto !important; max-width: 140px !important; height: 52px !important; min-height: 0 !important; margin: 0 !important; overflow: visible !important; } html body header.header.header-logo--left .header-logo-image { position: static !important; width: auto !important; max-width: 96px !important; height: auto !important; max-height: 52px !important; transform: none !important; } html body header.header.header-logo--left .logo-user-section.container > nav.navUser { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; max-width: 100% !important; height: 42px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } html body header.header.header-logo--left .logo-user-section.container > nav.navUser .navUser-section--alt { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; height: 42px !important; margin: 0 !important; padding: 0 !important; } html body header.header.header-logo--left .logo-user-section.container > nav.navUser .navUser-section--alt > .dropdown--quickSearch, html body header.header.header-logo--left .logo-user-section.container > nav.navUser .navUser-section--alt > .dropdown--quickSearch.mobile, html body header.header.header-logo--left .logo-user-section.container > nav.navUser .navUser-section--alt > .dropdown--quickSearch.desktop { position: static !important; flex: 1 1 170px !important; width: clamp(155px, 34vw, 190px) !important; min-width: 155px !important; max-width: 190px !important; margin: 0 auto 0 0 !important; } html body header.header.header-logo--left #menu-wrapper { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; background: #fff !important; border-bottom: 1px solid #d2d2d7 !important; } html body header.header.header-logo--left #menu { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; transform: none !important; visibility: visible !important; } } /* PSC header v44: restore compact shopping controls without reopening the off-canvas menu. */ @media (min-width: 520px) and (max-width: 800px) { html body header.header.header-logo--left #menu .mega-cat-nav { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; order: 0 !important; } html body header.header.header-logo--left #menu .navPages-item-page.container-header.btn, html body header.header.header-logo--left #menu .navPages-item-page.container-header.btn > .navPages-action { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 6px !important; padding: 0 7px !important; overflow: visible !important; color: #1d1d1f !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu .navPages-item-page.container-header.btn .burger-menu:not(.fixed) { display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; margin: 0 !important; color: inherit !important; font: inherit !important; visibility: visible !important; } html body header.header.header-logo--left #menu .navPages-item-page.container-header.btn .burger-menu:not(.fixed)::before { content: "\2630" !important; display: inline-block !important; margin-right: 5px !important; font-size: 14px !important; line-height: 1 !important; } html body header.header.header-logo--left #menu .navPages-item-page.container-header.btn .burger-menu.fixed { display: none !important; } html body header.header.header-logo--left #menu .mega-cat-dropdown, html body header.header.header-logo--left #menu .mega-cat-dropdown .inner, html body header.header.header-logo--left #menu .mega-cat-dropdown #page-wrapper, html body header.header.header-logo--left #menu .mega-cat-dropdown .category-list, html body header.header.header-logo--left #menu .mega-cat-dropdown .mega-nav, html body header.header.header-logo--left #menu .mega-cat-dropdown .fader { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu .mega-cat-dropdown .category-list > p, html body header.header.header-logo--left #menu .mega-cat-dropdown .navPages-action.previous, html body header.header.header-logo--left #menu .mega-cat-dropdown .navPages-action.next, html body header.header.header-logo--left #menu .mega-cat-dropdown .navPages-item.top-level.categories { display: none !important; } html body header.header.header-logo--left #menu .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]) { position: static !important; display: inline-flex !important; align-items: center !important; width: auto !important; height: 32px !important; min-height: 32px !important; margin: 0 6px !important; padding: 0 !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; } html body header.header.header-logo--left #menu .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]) .mobile, html body header.header.header-logo--left #menu .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]) a[href*="/shop-all/"] { position: static !important; display: inline-flex !important; align-items: center !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 7px !important; overflow: visible !important; color: #1d1d1f !important; font-family: inherit !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu .nav-right-fixed { order: 1 !important; } } /* PSC header v45: compact desktop keeps product navigation visible instead of off-canvas. */ @media (min-width: 520px) and (max-width: 800px) { html body header.header.header-logo--left .logo-user-section.container, html body header.header.header-logo--left .logo-user-section.container.fixed, html body header.header.header-logo--left .logo-user-section.container.fixed-again { align-items: center !important; min-height: 78px !important; height: 78px !important; max-height: 78px !important; padding: 12px 16px !important; overflow: visible !important; } html body header.header.header-logo--left .header-logo > a { position: static !important; display: flex !important; align-items: center !important; width: 100% !important; max-width: 140px !important; height: 54px !important; min-height: 0 !important; margin: 0 !important; overflow: visible !important; transform: none !important; } html body header.header.header-logo--left .logo-user-section.container > nav.navUser, html body header.header.header-logo--left .logo-user-section.container > nav.navUser .navUser-section--alt { align-items: center !important; min-height: 42px !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav { position: static !important; display: flex !important; flex: 0 0 100% !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; order: 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 8px !important; overflow: visible !important; background: #fff !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav > .navPages-item.navPages-item-page.container-header.btn { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 6px !important; padding: 0 !important; overflow: visible !important; list-style: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav > .navPages-item.navPages-item-page.container-header.btn > .navPages-action, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .burger-menu:not(.fixed) { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 7px !important; overflow: visible !important; color: #1d1d1f !important; font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .burger-menu:not(.fixed)::before { content: "\2630" !important; display: inline-block !important; margin-right: 5px !important; font-size: 14px !important; line-height: 1 !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .burger-menu.fixed { display: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown { position: static !important; display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .inner, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown #page-wrapper, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .category-list, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .mega-nav, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .fader { position: static !important; display: contents !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .category-list > p, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .navPages-action.previous, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .navPages-action.next, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .navPages-item.top-level.categories { display: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]) { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 6px !important; padding: 0 !important; overflow: visible !important; list-style: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]) .mobile, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]) a[href*="/shop-all/"] { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 7px !important; overflow: visible !important; color: #1d1d1f !important; font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .nav-right-fixed { order: 1 !important; } } /* PSC header v46: keep compact category panel closed while surfacing only Shop All. */ @media (min-width: 520px) and (max-width: 800px) { html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown { position: static !important; display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown * { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; visibility: hidden !important; opacity: 0 !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .inner, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown #page-wrapper, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .category-list, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .mega-nav, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .fader { position: static !important; display: contents !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]), html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]) .mobile, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]) a[href*="/shop-all/"] { position: static !important; display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 78px !important; max-width: none !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 6px !important; padding: 0 7px !important; overflow: visible !important; color: #1d1d1f !important; font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; list-style: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } } /* PSC header v47: place Shop All beside Shop in the compact product row. */ @media (min-width: 520px) and (max-width: 800px) { html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav > nav.navPages { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 6px !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav > nav.navPages > .clear { display: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav > nav.navPages > .mega-cat-dropdown { margin: 0 !important; } } /* PSC header v48: avoid duplicate compact Shop menu icons. */ @media (min-width: 520px) and (max-width: 800px) { html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .burger-menu:not(.fixed)::before { content: none !important; display: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-menu-icon.open { position: static !important; display: inline-block !important; width: 16px !important; height: 16px !important; margin: 0 5px 0 0 !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-menu-icon.close { display: none !important; } } /* PSC header v49: Shop opens the compact product menu; Shop All stays inside that menu. */ @media (min-width: 520px) and (max-width: 800px) { html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav { position: relative !important; justify-content: center !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav > nav.navPages { position: absolute !important; top: 32px !important; right: auto !important; bottom: auto !important; left: 50% !important; z-index: 1245 !important; display: none !important; width: 232px !important; min-width: 232px !important; max-width: calc(100vw - 28px) !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: translateX(-50%) !important; visibility: hidden !important; opacity: 0 !important; } html body header.header.header-logo--left.active-mega-cat-nav #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active > nav.navPages, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active > nav.navPages { display: block !important; visibility: visible !important; opacity: 1 !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav .mega-cat-dropdown { display: none !important; visibility: hidden !important; opacity: 0 !important; } html body header.header.header-logo--left.active-mega-cat-nav #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown { position: static !important; display: block !important; width: 232px !important; min-width: 232px !important; max-width: calc(100vw - 28px) !important; height: auto !important; min-height: 0 !important; max-height: 520px !important; margin: 6px 0 0 !important; padding: 18px 12px 20px !important; overflow: auto !important; background: #fff !important; border: 1px solid #e3e3e3 !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14) !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .inner, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .ten.fifteen, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .category-list, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .pagination-container, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .brands { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .sticky-navpages, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .clear, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .sidenav, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .desktop { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; opacity: 0 !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .category-list > p, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .container-header.mobile { display: block !important; width: auto !important; height: auto !important; margin: 0 0 18px !important; padding: 0 !important; color: #111 !important; font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; visibility: visible !important; opacity: 1 !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .navPages-item.top-level.categories, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .brands .navPages-item.mobile { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 0 18px !important; padding: 0 !important; overflow: visible !important; list-style: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .mobile, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .navPages-item.top-level.categories .mobile, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .navPages-action, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .brands .navPages-action { position: static !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; color: #111 !important; font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; white-space: normal !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .pagination-container { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 18px !important; margin: 2px 0 30px !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .pagination-container *, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .navPages-action.previous, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .navPages-action.next { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; color: #111 !important; font-size: 16px !important; visibility: visible !important; opacity: 1 !important; } html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .brands { margin-top: 0 !important; } } /* PSC header v50: left-align Shop All inside the opened compact menu. */ @media (min-width: 520px) and (max-width: 800px) { html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]), html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]) .mobile, html body header.header.header-logo--left #menu.navPages-container .navPages-wider.desktop .nav-minus-logo .mega-cat-nav.active .mega-cat-dropdown .navPages-item.top-level.categories:has(a[href*="/shop-all/"]) a[href*="/shop-all/"] { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 0 18px !important; padding: 0 !important; overflow: visible !important; color: #111 !important; font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; white-space: normal !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } } /* PSC header v51: remove the dark desktop backdrop when the Shop menu is open. */ @media (min-width: 520px) { body > #mask, #mask { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; overflow: hidden !important; background: transparent !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* PSC header v52: suppress the Shop-menu mask in every resized header state. */ html body:has(header.header .mega-cat-nav.active) > #mask, html body:has(header.header.active-mega-cat-nav) > #mask, html body:has(header.header #menu .container-header.btn.active) > #mask, html body:has(header.header .mega-cat-nav.active) #mask, html body:has(header.header.active-mega-cat-nav) #mask, html body:has(header.header #menu .container-header.btn.active) #mask { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; overflow: hidden !important; background: transparent !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* PSC header v53: keep sticky search visible while preserving the compact link row. */ @media (min-width: 801px) { html body.fixed-nav header.header.header-logo--left #quickSearch.dropdown--quickSearch, html body.fixed-nav header.header.header-logo--left .dropdown--quickSearch.desktop, html body header.header.header-logo--left #menu.fixed #quickSearch.dropdown--quickSearch, html body header.header.header-logo--left #menu.fixed-again #quickSearch.dropdown--quickSearch { display: block !important; visibility: visible !important; opacity: 1 !important; flex: 0 1 360px !important; width: 360px !important; max-width: 28vw !important; min-width: 180px !important; height: 36px !important; min-height: 36px !important; margin: 0 12px 0 auto !important; overflow: visible !important; pointer-events: auto !important; } html body.fixed-nav header.header.header-logo--left #quickSearch.dropdown--quickSearch .form, html body.fixed-nav header.header.header-logo--left #quickSearch.dropdown--quickSearch .form-field, html body.fixed-nav header.header.header-logo--left #quickSearch.dropdown--quickSearch .form-fieldset, html body.fixed-nav header.header.header-logo--left #quickSearch.dropdown--quickSearch .container { display: block !important; width: 100% !important; max-width: none !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; } html body.fixed-nav header.header.header-logo--left #quickSearch.dropdown--quickSearch .form-input { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 36px !important; min-height: 36px !important; padding: 7px 42px 7px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #f5f5f7 !important; color: #1d1d1f !important; caret-color: auto !important; box-shadow: none !important; } html body.fixed-nav header.header.header-logo--left #quickSearch.dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 11px !important; left: auto !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; color: #1d1d1f !important; visibility: visible !important; opacity: 1 !important; transform: translateY(-50%) !important; pointer-events: auto !important; } } @media (min-width: 801px) and (max-width: 1120px) { html body.fixed-nav header.header.header-logo--left #quickSearch.dropdown--quickSearch, html body.fixed-nav header.header.header-logo--left .dropdown--quickSearch.desktop { flex-basis: 260px !important; width: 260px !important; max-width: 26vw !important; } } /* PSC header v54: simplified Apple/OpenAI-inspired desktop navigation. */ @media (min-width: 801px) { html body:not(.psc-floating-page-frame).fixed-nav { padding-top: 58px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left, html body:not(.psc-floating-page-frame).fixed-nav header.header.header-logo--left { position: sticky !important; top: 0 !important; right: auto !important; left: auto !important; z-index: 1220 !important; display: block !important; width: 100% !important; max-width: none !important; min-height: 58px !important; height: 58px !important; max-height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: rgba(255, 255, 255, 0.94) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: none !important; backdrop-filter: saturate(180%) blur(18px) !important; -webkit-backdrop-filter: saturate(180%) blur(18px) !important; transform: none !important; } html body:not(.psc-floating-page-frame).fixed-nav header.header.header-logo--left { position: fixed !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .mobileMenu-toggle { display: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed-again { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: none !important; min-height: 58px !important; height: 58px !important; max-height: 58px !important; margin: 0 !important; padding: 0 28px !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo, html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo--left { position: relative !important; z-index: 2 !important; display: flex !important; flex: 0 0 132px !important; align-items: center !important; width: 132px !important; max-width: 132px !important; min-height: 58px !important; height: 58px !important; margin: 0 !important; overflow: visible !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo a, html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo-image-container { display: flex !important; align-items: center !important; width: auto !important; max-width: 132px !important; height: 58px !important; margin: 0 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo-image { display: block !important; width: auto !important; max-width: 112px !important; height: auto !important; max-height: 36px !important; margin: 0 !important; object-fit: contain !important; transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu-wrapper { position: absolute !important; top: 0 !important; right: 338px !important; bottom: auto !important; left: 150px !important; z-index: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: none !important; min-height: 58px !important; height: 58px !important; max-height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu.fixed, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu.fixed-again, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu.fixed.fixed-again { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; min-height: 58px !important; height: 58px !important; max-height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-wider, html body:not(.psc-floating-page-frame) header.header.header-logo--left .nav-minus-logo, html body:not(.psc-floating-page-frame) header.header.header-logo--left .nav-right-fixed, html body:not(.psc-floating-page-frame) header.header.header-logo--left .nav-right { position: static !important; display: flex !important; align-items: center !important; width: 100% !important; max-width: none !important; min-height: 58px !important; height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .nav-minus-logo { justify-content: center !important; gap: 18px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-nav { position: relative !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; min-height: 58px !important; height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .container-header.btn, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .container-header.btn > .navPages-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; white-space: nowrap !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-menu-icon.open { display: inline-block !important; width: 15px !important; height: 15px !important; margin: 0 7px 0 0 !important; color: #1d1d1f !important; transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-menu-icon.close { display: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .burger-menu, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .burger-menu.fixed { display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; margin: 0 !important; color: #1d1d1f !important; font: inherit !important; visibility: visible !important; opacity: 1 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .burger-menu.fixed { display: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-list, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-list.nav-page-list, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-list.nav-page-list.one, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-list.nav-page-list.two { position: static !important; display: flex !important; flex: 0 1 auto !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(12px, 1.45vw, 22px) !important; width: auto !important; max-width: 100% !important; min-height: 58px !important; height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; list-style: none !important; float: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-item, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-item-page, html body:not(.psc-floating-page-frame) header.header.header-logo--left .nav-page-list { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; width: auto !important; min-width: 0 !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; list-style: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-action, html body:not(.psc-floating-page-frame) header.header.header-logo--left .burger-menu { color: #1d1d1f !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action { display: inline-flex !important; align-items: center !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; opacity: 0.88 !important; transition: opacity 160ms ease, color 160ms ease !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action:hover, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-action:hover { color: #000 !important; opacity: 1 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/peptide-reconstitution-calculator/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/coa-transparency/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/weight-loss-research-papers/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/how-to-read-a-coa/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/shipping-returns/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/terms-conditions/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/contact-us/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/about-precision-synthetics-canada/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/blog/"] { font-size: 0 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/peptide-reconstitution-calculator/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/coa-transparency/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/weight-loss-research-papers/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/how-to-read-a-coa/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/shipping-returns/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/terms-conditions/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/contact-us/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/about-precision-synthetics-canada/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/blog/"]::after { display: inline-flex !important; align-items: center !important; color: inherit !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/peptide-reconstitution-calculator/"]::after { content: "Calculator" !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/coa-transparency/"]::after { content: "COAs" !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/weight-loss-research-papers/"]::after { content: "Research" !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/how-to-read-a-coa/"]::after { content: "COA Guide" !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/shipping-returns/"]::after { content: "Shipping" !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/terms-conditions/"]::after { content: "Terms" !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/contact-us/"]::after { content: "Contact" !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/about-precision-synthetics-canada/"]::after { content: "About" !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/blog/"]::after { content: "Resources" !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container > nav.navUser { position: relative !important; z-index: 2 !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; max-width: none !important; min-height: 58px !important; height: 58px !important; margin: 0 0 0 auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-section--alt { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 13px !important; min-height: 58px !important; height: 58px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .user-icons { display: flex !important; align-items: center !important; gap: 13px !important; height: 58px !important; margin: 0 !important; padding: 0 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-item, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-section--alt > a.navUser-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 58px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-icon, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-action svg { width: 19px !important; height: 19px !important; color: #1d1d1f !important; fill: currentColor !important; stroke: currentColor !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .countPill { position: absolute !important; top: 11px !important; right: -7px !important; min-width: 15px !important; height: 15px !important; padding: 0 4px !important; border-radius: 999px !important; font-size: 10px !important; line-height: 15px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch, html body:not(.psc-floating-page-frame).fixed-nav header.header.header-logo--left #quickSearch.dropdown--quickSearch { position: relative !important; display: block !important; flex: 0 1 210px !important; width: 210px !important; min-width: 150px !important; max-width: 22vw !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .dropdown--quickSearch .quickSearch-mobileToggle { display: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch .container, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch .form, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch .form-fieldset, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch .form-field { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch .form-input { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 7px 36px 7px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 999px !important; background: #f5f5f7 !important; color: #1d1d1f !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 18px !important; letter-spacing: 0 !important; box-shadow: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch .form-input::placeholder { color: #6e6e73 !important; font-style: normal !important; opacity: 1 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch .search-icon.submit { position: absolute !important; top: 50% !important; right: 10px !important; left: auto !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; color: #1d1d1f !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: translateY(-50%) !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch .search-icon.submit .button { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: transparent !important; font-size: 0 !important; box-shadow: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch .search-icon.submit svg { width: 18px !important; height: 18px !important; pointer-events: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-nav > nav.navPages { position: absolute !important; top: 48px !important; left: 0 !important; z-index: 1245 !important; display: none !important; width: 230px !important; min-width: 230px !important; max-width: calc(100vw - 32px) !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; visibility: hidden !important; opacity: 0 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left.active-mega-cat-nav #menu .mega-cat-nav.active > nav.navPages, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-nav.active > nav.navPages { display: block !important; visibility: visible !important; opacity: 1 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown { position: static !important; display: none !important; width: 230px !important; min-width: 230px !important; max-width: calc(100vw - 32px) !important; max-height: 70vh !important; margin: 0 !important; padding: 16px 14px !important; overflow: auto !important; background: #fff !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 10px !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14) !important; transform: none !important; visibility: hidden !important; opacity: 0 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left.active-mega-cat-nav #menu .mega-cat-nav.active .mega-cat-dropdown, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-nav.active .mega-cat-dropdown { display: block !important; visibility: visible !important; opacity: 1 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .inner, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown #page-wrapper, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .category-list, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .brands { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .sticky-navpages, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .clear, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .sidenav, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .pagination-container, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .desktop { display: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .container-header.mobile, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .navPages-item.top-level.categories, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .brands .navPages-item.mobile { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 14px !important; padding: 0 !important; list-style: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .container-header.mobile { margin-bottom: 12px !important; color: #6e6e73 !important; font-size: 11px !important; text-transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .mobile, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .mobile .navPages-action, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .mega-cat-dropdown .brands .navPages-action { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #1d1d1f !important; font-size: 13px !important; line-height: 1.35 !important; text-align: left !important; white-space: normal !important; } html body:not(.psc-floating-page-frame) #mask, html body:not(.psc-floating-page-frame) body > #mask { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html body:not(.psc-floating-page-frame) .below_nav_container, html body:not(.psc-floating-page-frame) .below_nav_clear { margin-top: 0 !important; } } @media (min-width: 1121px) { html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu-wrapper { right: 328px !important; } } @media (min-width: 801px) and (max-width: 1120px) { html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed-again { padding: 0 22px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu-wrapper { right: 282px !important; left: 138px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch { flex-basis: 170px !important; width: 170px !important; max-width: 19vw !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/how-to-read-a-coa/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/terms-conditions/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/contact-us/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/about-precision-synthetics-canada/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/blog/"] { display: none !important; } } @media (min-width: 801px) and (max-width: 920px) { html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed-again { padding: 0 16px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo, html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo--left { flex-basis: 112px !important; width: 112px !important; max-width: 112px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo-image { max-width: 92px !important; max-height: 32px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu-wrapper { right: 244px !important; left: 116px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch { flex-basis: 142px !important; width: 142px !important; min-width: 130px !important; max-width: 142px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-list, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-list.nav-page-list, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-list.nav-page-list.one, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-list.nav-page-list.two { gap: 12px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-action[href*="/weight-loss-research-papers/"] { display: none !important; } } /* PSC header v55: final single-row desktop simplification. */ @media (min-width: 801px) { html body:not(.psc-floating-page-frame) .below_nav_container, html body:not(.psc-floating-page-frame) .below_nav_clear { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu-wrapper { top: 0 !important; right: 348px !important; left: 150px !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; overflow: hidden !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .nav-minus-logo, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .nav-right-fixed, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .nav-right, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-list.nav-page-list.one, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-list.nav-page-list.two { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 18px !important; width: auto !important; max-width: 100% !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-list.nav-page-list.two > .navPages-item, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-list.nav-page-list.two > .navPages-item > .nav-page-list { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; width: auto !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-list.nav-page-list.two .clear { display: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/how-to-read-a-coa/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/terms-conditions/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/contact-us/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/blog/"] { display: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/peptide-reconstitution-calculator/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/coa-transparency/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/weight-loss-research-papers/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/shipping-returns/"], html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/about-precision-synthetics-canada/"] { color: transparent !important; font-size: 0 !important; line-height: 0 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/peptide-reconstitution-calculator/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/coa-transparency/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/weight-loss-research-papers/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/shipping-returns/"]::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/about-precision-synthetics-canada/"]::after { display: inline-flex !important; align-items: center !important; color: #1d1d1f !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; } } @media (min-width: 801px) and (max-width: 1120px) { html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu .navPages-action[href*="/about-precision-synthetics-canada/"] { display: none !important; } } /* PSC header v56: one fixed desktop header, no moving legacy menu row. */ @media (min-width: 801px) { html body:not(.psc-floating-page-frame) { padding-top: 58px !important; } html body:not(.psc-floating-page-frame) > .banners[data-banner-location="top"], html body:not(.psc-floating-page-frame) .below_nav_container, html body:not(.psc-floating-page-frame) .below_nav_clear { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:not(.psc-floating-page-frame) .body, html body:not(.psc-floating-page-frame) main.body { margin-top: 0 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left, html body:not(.psc-floating-page-frame).fixed-nav header.header.header-logo--left { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 10050 !important; display: block !important; width: 100% !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: rgba(255, 255, 255, 0.94) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: none !important; transform: none !important; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } html body:not(.psc-floating-page-frame) header.header.header-logo--left > .clear { display: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .mobileMenu-toggle, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu-wrapper, html body:not(.psc-floating-page-frame) header.header.header-logo--left #menu, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navPages-container { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed-again, html body:not(.psc-floating-page-frame).fixed-nav header.header.header-logo--left .logo-user-section.container { position: relative !important; top: auto !important; right: auto !important; left: auto !important; z-index: 2 !important; display: grid !important; grid-template-columns: 116px minmax(0, 1fr) 330px !important; align-items: center !important; column-gap: 20px !important; width: 100% !important; max-width: none !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; margin: 0 !important; padding: 0 28px !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo, html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo--left { grid-column: 1 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 116px !important; max-width: 116px !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; text-align: left !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo a, html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo-image-container { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 58px !important; margin: 0 !important; padding: 0 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo img, html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo-image { display: block !important; width: auto !important; max-width: 104px !important; max-height: 38px !important; margin: 0 !important; object-fit: contain !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .psc-desktop-nav { grid-column: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 22px !important; min-width: 0 !important; width: 100% !important; height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .psc-desktop-nav a { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; height: 58px !important; margin: 0 !important; padding: 0 !important; color: #1d1d1f !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .psc-desktop-nav a:hover { color: #000 !important; text-decoration: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container > nav.navUser { grid-column: 3 !important; position: static !important; top: auto !important; right: auto !important; left: auto !important; z-index: 3 !important; display: block !important; width: 100% !important; min-width: 0 !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-section, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-section--alt { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; width: 100% !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: visible !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-item--storecredit, html body:not(.psc-floating-page-frame) header.header.header-logo--left .currency-menu, html body:not(.psc-floating-page-frame) header.header.header-logo--left .gift-certificates, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-item--compare, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-item.quicksearch, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-action--quickSearch, html body:not(.psc-floating-page-frame) header.header.header-logo--left [data-search="quickSearch"] { display: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch, html body:not(.psc-floating-page-frame) header.header.header-logo--left .dropdown--quickSearch.desktop { position: relative !important; top: auto !important; right: auto !important; left: auto !important; z-index: 1 !important; display: block !important; flex: 0 0 214px !important; width: 214px !important; min-width: 0 !important; max-width: 214px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .quickSearch-mobileToggle { display: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .container, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form-fieldset, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form-field { position: relative !important; display: block !important; width: 100% !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .container::before, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .container::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form::before, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form::after, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form-field::before, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form-field::after { display: none !important; content: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form-input { display: block !important; width: 100% !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 42px 0 16px !important; color: #1d1d1f !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; font-size: 14px !important; font-style: normal !important; line-height: 34px !important; background: rgba(245, 245, 247, 0.82) !important; border: 1px solid rgba(0, 0, 0, 0.18) !important; border-radius: 999px !important; box-shadow: none !important; outline: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form-input::placeholder { color: #6e6e73 !important; font-style: normal !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .search-icon.submit { position: absolute !important; top: 0 !important; right: 4px !important; bottom: auto !important; left: auto !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; color: #1d1d1f !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .search-icon.submit .button, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form-prefixPostfix-button--postfix { position: absolute !important; inset: 0 !important; z-index: 3 !important; width: 34px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; cursor: pointer !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .search-icon.submit svg, html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .search-icon.submit .header-icon { position: static !important; display: block !important; width: 17px !important; height: 17px !important; margin: 0 !important; color: #1d1d1f !important; fill: currentColor !important; transform: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .user-icons { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; width: auto !important; height: 58px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-item, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-action { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; color: #1d1d1f !important; background: transparent !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; text-decoration: none !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-action:hover { background: #f5f5f7 !important; color: #000 !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-action svg, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-action .header-icon { width: 18px !important; height: 18px !important; margin: 0 !important; color: currentColor !important; fill: currentColor !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .countPill { position: absolute !important; top: -3px !important; right: -3px !important; min-width: 16px !important; height: 16px !important; padding: 0 4px !important; font-size: 10px !important; line-height: 16px !important; } html body:not(.psc-floating-page-frame) #shopnav-dim-page, html body:not(.psc-floating-page-frame) #mask { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } @media (min-width: 801px) and (max-width: 1120px) { html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed-again { grid-template-columns: 106px minmax(0, 1fr) 282px !important; column-gap: 16px !important; padding: 0 20px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo, html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo--left { width: 106px !important; max-width: 106px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo img, html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo-image { max-width: 96px !important; max-height: 36px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .psc-desktop-nav { gap: 16px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch, html body:not(.psc-floating-page-frame) header.header.header-logo--left .dropdown--quickSearch.desktop { flex-basis: 174px !important; width: 174px !important; max-width: 174px !important; } } @media (min-width: 801px) and (max-width: 920px) { html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed, html body:not(.psc-floating-page-frame) header.header.header-logo--left .logo-user-section.container.fixed-again { grid-template-columns: 90px minmax(0, 1fr) 216px !important; column-gap: 12px !important; padding: 0 12px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo, html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo--left { width: 90px !important; max-width: 90px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo img, html body:not(.psc-floating-page-frame) header.header.header-logo--left .header-logo-image { max-width: 82px !important; max-height: 32px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .psc-desktop-nav { gap: 11px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .psc-desktop-nav a { font-size: 11px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch.dropdown--quickSearch, html body:not(.psc-floating-page-frame) header.header.header-logo--left .dropdown--quickSearch.desktop { flex-basis: 136px !important; width: 136px !important; max-width: 136px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left #quickSearch .form-input { padding-left: 13px !important; padding-right: 36px !important; font-size: 13px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-section--alt { gap: 8px !important; } html body:not(.psc-floating-page-frame) header.header.header-logo--left .user-icons { gap: 7px !important; } } @media (max-width: 800px) { header.header.header-logo--left .psc-desktop-nav { display: none !important; } } @media (min-width: 801px) { html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-section--alt > .navUser-action.navUser-item--compare, html body:not(.psc-floating-page-frame) header.header.header-logo--left .navUser-section--alt > a[data-compare-nav], html body:not(.psc-floating-page-frame) header.header.header-logo--left .user-icons > .navUser-action.navUser-item--compare, html body:not(.psc-floating-page-frame) header.header.header-logo--left .user-icons > a[data-compare-nav], html body:not(.psc-floating-page-frame) header.header.header-logo--left .countPill--alt.compare { display: none !important; width: 0 !important; min-width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } }