and loads its own stylesheet (all rules `!important`) *after* this file, in the . Omega prefixes ~all rules with `.os-index`, which TIES a `.os-page-container` prefix — and ties go to Omega (later in source order). So every selector here is scoped under the `#MainContent` **id**: an id outweighs any number of Omega classes, guaranteeing these overrides win. Tokens: blue #1F47AA · yellow #F0D100 · sale pink #EC008C · grey #595959 / #BBBBBB · radius 5px. Font inherits the theme (Inter). ========================================================================= */ /* ---- Hide the theme's native search UI once Omega has taken over ---------- Guarded by :has() so the native search page and predictive results remain available if Omega ever fails to render. Omega's own autocomplete uses `.omega__autocomplete`, so it is intentionally left visible. */ #MainContent:has(.os-page-container) [data-section-type="search-template"] > .search-page, #MainContent:has(.os-page-container) [data-section-type="search-template"] > .search-results-list, body:has(#MainContent .os-page-container) .search-bar__results, body.omega-search-active .search-bar__results{ display: none !important; } /* ---- Re-map Omega's design tokens + container ---------------------------- */ #MainContent .os-page-container{ --os-blue: #1F47AA !important; --os-ink: #000000 !important; --os-ink-light: #595959 !important; --os-sales-badge-color: #EC008C !important; --os-border-color: #EAEAEA !important; max-width: 1360px !important; margin: 0 auto !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; font-family: inherit !important; color: #000 !important; } #MainContent .os-page-container *{ font-family: inherit !important; } #MainContent .os-page-container .os-index-products::after{ content:""; display:block; clear:both; } /* ========================================================================= 1. Heading ========================================================================= */ #MainContent .os-page-container .omega-search-h1{ margin: 20px 0 24px !important; font-size: 38px !important; line-height: 1.15 !important; font-weight: 600 !important; letter-spacing: 1.15px !important; text-transform: uppercase !important; color: #000 !important; } /* ========================================================================= 2. Header row — pills + search box + yellow divider ========================================================================= */ .os-index .os-e.os-header:before, .os-index .os-e.os-header:after { display: none !important; } #MainContent .os-page-container .os-header{ display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; padding: 0 0 16px !important; margin: 0 0 24px !important; border-bottom: 3px solid #F0D100 !important; } #MainContent .os-page-container .os-tabs{ flex: 0 1 auto !important; } #MainContent .os-page-container .os-indices{ display: flex !important; width: auto !important; margin: 0 !important; gap: 16px !important; } #MainContent .os-page-container .os-indices li{ margin: 0 !important; } #MainContent .os-page-container .os-indices li:only-child{ visibility: visible !important; } #MainContent .os-page-container .os-indices li a{ border-radius: 50px !important; padding: 8px 16px 6px !important; border: 1px solid transparent !important; font-size: 16px !important; font-weight: 400 !important; color: #595959 !important; gap: 8px !important; } #MainContent .os-page-container .os-indices li a span{ font-size: 16px !important; font-weight: 400 !important; color: #595959 !important; margin: 0 !important; } #MainContent .os-page-container .os-indices li.os-active a, #MainContent .os-page-container .os-indices li a:hover{ background: #1F47AA !important; border-color: #1F47AA !important; color: #fff !important; } #MainContent .os-page-container .os-indices li.os-active a span, #MainContent .os-page-container .os-indices li a:hover span{ color: #fff !important; } #MainContent .os-page-container .os-search-box{ width: 358px !important; max-width: 40% !important; min-width: 220px !important; margin: 0 !important; flex: 0 1 358px !important; } #MainContent .os-page-container .os-search-box input{ height: 38px !important; min-height: 38px !important; line-height: 36px !important; border: 1px solid #BBBBBB !important; border-radius: 0 !important; font-size: 14px !important; color: #000 !important; } #MainContent .os-page-container .os-search-box input::placeholder{ color: #BBBBBB !important; } #MainContent .os-page-container .os-search-box:after{ top: 9px !important; } /* ========================================================================= 3. Toolbar — item count + sort (grid/list toggle hidden) ========================================================================= */ #MainContent .os-page-container .os-toolbar.os-top{ margin: 0 0 24px !important; padding: 0 !important; min-height: 0 !important; display: flex !important; align-items: center !important; } #MainContent .os-page-container .os-toolbar-amount{ font-size: 16px !important; color: #000 !important; } #MainContent .os-page-container .os-toolbar-mode{ display: none !important; } #MainContent .os-page-container .os-toolbar-sort{ margin-left: auto !important; } #MainContent .os-page-container .os-toolbar-sort .os-select-toggle{ flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; border: 1px solid #BFBFBF !important; border-radius: 2px !important; padding: 7px 40px 7px 14px !important; min-width: 185px !important; color: #000 !important; line-height: 1.25 !important; font-size: 0 !important; /* collapses the text node -> correct height */ gap: 2px !important; } #MainContent .os-page-container .os-toolbar-sort .os-select-toggle:before{ content: "Sort by" !important; font-size: 12px !important; line-height: 1.4 !important; color: #000 !important; opacity: .6 !important; } #MainContent .os-page-container .os-toolbar-sort .os-select-filter-option{ font-size: 16px !important; color: #000 !important; } #MainContent .os-page-container .os-toolbar-sort .os-select-caret{ position: absolute !important; right: 14px !important; top: 16px !important; margin: 0 !important; } /* ========================================================================= 4. Layout — sidebar + content (Omega uses #os-sidebar / .os-content ids) ========================================================================= */ #MainContent .os-page-container #os-sidebar{ width: 250px !important; padding-right: 0 !important; float: left !important; } #MainContent #os-content.os-content, #MainContent .os-page-container #os-content.os-content{ width: calc(100% - 298px) !important; float: right !important; } /* ========================================================================= 5. Sidebar filters ========================================================================= */ #MainContent .os-page-container .os-filter{ border-top: none !important; padding: 0 0 36px !important; } #MainContent .os-page-container .os-filter > .os-title > div{ font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; letter-spacing: .3px !important; text-transform: uppercase !important; color: #000 !important; justify-content: space-between !important; } #MainContent .os-page-container .os-filter > .os-title > div:before{ display: none !important; } #MainContent .os-page-container .os-filter > .os-title > div::after{ content: "" !important; display: inline-block !important; flex: 0 0 auto !important; width: 9px !important; height: 9px !important; margin: 0 2px 4px 8px !important; border-right: 2px solid #1a1a1a !important; border-bottom: 2px solid #1a1a1a !important; transform: rotate(45deg) !important; transition: transform .2s ease !important; pointer-events: none !important; } #MainContent .os-page-container .os-filter._expanded > .os-title > div::after{ transform: rotate(-135deg) !important; } #MainContent .os-page-container .os-filter > .os-title > div a{ text-transform: none !important; } #MainContent .os-page-container .os-filter .os-buckets{ margin-top: 12px !important; max-height: 236px !important; overflow-y: auto !important; scrollbar-width: thin !important; } #MainContent .os-page-container .os-filter .os-buckets .os-filter-bucket{ padding-bottom: 4px !important; } #MainContent .os-page-container .os-filter .os-buckets .os-filter-bucket .bucket{ font-size: 16px !important; line-height: 24px !important; text-transform: none !important; color: #595959 !important; padding: 2px 0 !important; white-space: normal !important; } #MainContent .os-page-container .os-filter .os-buckets .os-filter-bucket .bucket .os-count{ font-size: 16px !important; letter-spacing: 0 !important; color: #595959 !important; padding: 0 !important; margin-left: 8px !important; } #MainContent .os-page-container .os-filter .os-buckets .os-filter-bucket:hover .bucket, #MainContent .os-page-container .os-filter .os-buckets .os-filter-bucket:hover .bucket .os-count{ color: #1F47AA !important; } #MainContent .os-page-container .os-filter .os-buckets .os-filter-bucket._checked .bucket, #MainContent .os-page-container .os-filter .os-buckets .os-filter-bucket._checked .bucket .os-count{ color: #000 !important; font-weight: 600 !important; } /* checkbox */ #MainContent .os-page-container .os-checkbox{ width: 20px !important; height: 20px !important; min-width: 20px !important; margin-right: 12px !important; border-radius: 3px !important; background: #BBBBBB !important; } #MainContent .os-page-container .os-checkbox .os-checkbox{ margin: 0 !important; } #MainContent .os-page-container .os-checkbox.checked{ background: #1F47AA !important; } #MainContent .os-page-container .os-checkbox.checked:after{ content: '' !important; height: 7px !important; left: 5px !important; position: absolute !important; top: 7px !important; background: url(data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3.77693 6.96373L0.0380228 3.39724C-0.0126743 3.34888 -0.0126743 3.27634 0.0380228 3.22798L1.11534 2.20035C1.16603 2.15199 1.24208 2.15199 1.29278 2.20035L3.86565 4.65458L8.70722 0.0362694C8.75792 -0.0120898 8.83397 -0.0120898 8.88466 0.0362694L9.96198 1.0639C10.0127 1.11226 10.0127 1.1848 9.96198 1.23316L3.95437 6.96373C3.90368 7.01209 3.82763 7.01209 3.77693 6.96373Z' fill='white'/%3E %3C/svg%3E) !important; width: 10px !important; } /* colour swatches */ #MainContent .os-page-container .os-filter:not(._expanded) > .os-buckets.os-buckets__color{ display: none !important; } #MainContent .os-page-container .os-filter._expanded > .os-buckets.os-buckets__color{ display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 8px 0 !important; } #MainContent .os-page-container .os-buckets__color .os-filter-bucket{ width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } #MainContent .os-page-container .os-buckets__color .os-filter-bucket .bucket{ display: flex !important; justify-content: center !important; padding: 0 !important; } #MainContent .os-page-container .os-buckets__color .os-filter-bucket > div > div{ width: 28px !important; height: 28px !important; border-radius: 50% !important; box-shadow: none !important; border: 1px solid rgba(0,0,0,.15) !important; } #MainContent .os-page-container .os-buckets__color .os-filter-bucket:hover > div > div:before, #MainContent .os-page-container .os-buckets__color .os-filter-bucket._checked > div > div:before{ width: 34px !important; height: 34px !important; left: -4px !important; top: -4px !important; border-color: #1F47AA !important; } /* price slider */ #MainContent .os-page-container .os-slider-target{ height: 5px !important; background: #BBBBBB !important; border-radius: 100px !important; margin: 34px 8px 18px 8px !important; } #MainContent .os-page-container .os-slider-connect{ height: 5px !important; background: #1F47AA !important; } #MainContent .os-page-container .os-slider-handle{ width: 17px !important; height: 17px !important; top: -6px !important; background: #fff !important; border: 1px solid #BBBBBB !important; box-shadow: none !important; } #MainContent .os-page-container .os-slider-tooltip{ color: #000 !important; font-weight: 400 !important; } /* ========================================================================= 6. Product cards Grid column count remains controlled by Omega. Cards use Figma's 297.5px image width while the first and last cards align with the toolbar edges. ========================================================================= */ @media (min-width: 991px){ #MainContent .os-page-container .os-list-products.os-mode-grid{ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } #MainContent .os-page-container .os-list-products.os-mode-grid > li{ box-sizing: border-box !important; width: 100% !important; max-width: 297.5px !important; } #MainContent .os-page-container .os-list-products.os-mode-grid > li:nth-child(3n + 1){ justify-self: start !important; } #MainContent .os-page-container .os-list-products.os-mode-grid > li:nth-child(3n + 2){ justify-self: center !important; } #MainContent .os-page-container .os-list-products.os-mode-grid > li:nth-child(3n){ justify-self: end !important; } #MainContent .os-page-container .os-mode-grid .os-hit-products{ box-sizing: border-box !important; width: 100% !important; max-width: none !important; padding: 0 0 30px !important; } #MainContent .os-page-container .os-mode-grid .os-hit-products .os-image-wrap, #MainContent .os-page-container .os-mode-grid .os-hit-products .os-image{ display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; } #MainContent .os-page-container .os-mode-grid .os-hit-products .os-image{ margin: 0 0 8px !important; } #MainContent .os-page-container .os-mode-grid .os-hit-products .os-image .os-helper{ display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; } #MainContent .os-page-container .os-mode-grid .os-hit-products .os-image .os-helper > img.os-e{ display: block !important; width: 100% !important; min-width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; } } /* title */ #MainContent .os-page-container .os-mode-grid .os-hit-products .os-name{ font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #000 !important; text-align: center !important; margin: 0 0 2px !important; } #MainContent .os-page-container .os-hit-products:hover .os-name{ text-decoration: none !important; } #MainContent .os-page-container .omega__highlight{ background: transparent !important; color: inherit !important; font-weight: inherit !important; padding: 0 !important; } /* price */ #MainContent .os-page-container .os-mode-grid .os-hit-products .os-price{ font-size: 20px !important; line-height: 24px !important; font-weight: 400 !important; color: #000 !important; text-align: center !important; margin-top: 2px !important; } #MainContent .os-page-container .os-hit-products .os-price:has(s){ color: #EC008C !important; } #MainContent .os-page-container .os-hit-products .os-price s{ color: #000 !important; opacity: .5 !important; font-size: 16px !important; font-weight: 400 !important; margin-left: 8px !important; } /* SALE badge → over image top-right */ #MainContent .os-page-container .os-hit-products .os-product-tag{ top: 14px !important; right: 14px !important; left: auto !important; background: #EC008C !important; border-radius: 5px !important; padding: 4px 12px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1px !important; line-height: 20px !important; z-index: 2 !important; } /* quick-buy button */ #MainContent .os-page-container .os-mode-grid .os-hit-products .os-btn-buy{ background: #F0D100 !important; color: #000 !important; border: none !important; border-radius: 5px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 11px 16px !important; width: 100% !important; cursor: pointer !important; box-shadow: 0 0 0 1px rgba(0,0,0,.25) !important; } #MainContent .os-page-container .os-mode-grid .os-hit-products .os-btn-buy:hover{ background: #e6c800 !important; } /* JS relocates the button into an image overlay (revealed on hover, desktop) */ #MainContent .os-page-container .os-mode-grid .os-hit-products .os-image-wrap{ position: relative !important; } #MainContent .os-page-container .os-mode-grid .os-hit-products .os-image-wrap .os-buy-container{ position: absolute !important; left: 10px !important; right: 10px !important; bottom: 10px !important; margin: 0 !important; opacity: 0 !important; transform: translateY(6px) !important; transition: opacity .2s ease, transform .2s ease !important; pointer-events: none !important; } #MainContent .os-page-container .os-mode-grid .os-hit-products:hover .os-image-wrap .os-buy-container{ opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } /* fallback if not relocated */ #MainContent .os-page-container .os-mode-grid .os-hit-products .os-buy-container{ margin-top: 12px !important; } /* ========================================================================= 7. Pagination ========================================================================= */ #MainContent .os-page-container .os-toolbar.os-bottom{ margin-top: 24px !important; padding-top: 24px !important; border-top: 1px solid #EAEAEA !important; } #MainContent .os-page-container .os-pagination > li a{ border: none !important; background: none !important; color: #000 !important; font-size: 16px !important; padding: 2px 6px !important; margin: 0 8px !important; border-radius: 0 !important; } #MainContent .os-page-container .os-pagination > li:hover a{ background: none !important; text-decoration: underline !important; } #MainContent .os-page-container .os-pagination > li.os-active a{ background: none !important; border: none !important; color: #000 !important; font-weight: 600 !important; text-decoration: underline !important; } /* ========================================================================= 8. Mobile — off-canvas "Filter & Sort" slide-out (chrome injected by JS) ========================================================================= */ #MainContent .os-page-container .os-mobile-filter-btn{ display: none; } #MainContent .os-page-container .os-filters-backdrop{ display: none; } /* desktop: make sure injected mobile chrome never shows */ @media (min-width: 991px){ #MainContent .os-page-container .os-panel-head, #MainContent .os-page-container .os-panel-apply, #MainContent .os-page-container .os-mobile-filter-btn, #MainContent .os-page-container .os-filters-backdrop{ display: none !important; } } @media (max-width: 990px){ #MainContent #os-content.os-content, #MainContent .os-page-container #os-content.os-content{ width: 100% !important; float: none !important; } /* Keep every colour swatch visible. The grid uses at most eight columns, then drops columns as the available mobile width gets narrower. */ #MainContent .os-page-container .os-filter._expanded:has(> .os-buckets.os-buckets__color){ height: auto !important; max-height: none !important; overflow: visible !important; } #MainContent .os-page-container .os-filter._expanded > .os-buckets.os-buckets__color{ grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)) !important; width: 100% !important; max-width: 288px !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 4px 2px 10px !important; gap: 10px 0 !important; overflow: visible !important; box-sizing: border-box !important; } #MainContent .os-page-container .os-buckets__color .os-filter-bucket, #MainContent .os-page-container .os-buckets__color .os-filter-bucket .bucket{ overflow: visible !important; } /* header wraps: pills on the first row, search box full-width below */ #MainContent .os-page-container .os-header{ flex-wrap: wrap !important; padding: 16px !important; } #MainContent .os-page-container .os-tabs{ flex: 1 1 auto !important; } #MainContent .os-page-container .os-search-box{ flex: 1 1 100% !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } /* grid columns left to Omega's defaults (reverted per request) */ /* toolbar: item count then a full-width Filter & Sort button */ #MainContent .os-page-container .os-toolbar.os-top{ flex-wrap: wrap !important; padding: 16px !important; } #MainContent .os-page-container .os-toolbar-sort{ display: none !important; } #MainContent .os-page-container .os-mobile-filter-btn{ display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 18px 0 6px !important; /* small breathing room around it */ padding: 13px 16px !important; background: #fff !important; color: #1a1a1a !important; border: 1px solid #333 !important; /* dark, not pink */ border-radius: 3px !important; box-shadow: none !important; outline: 0 !important; -webkit-appearance: none !important; appearance: none !important; font-size: 15px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .5px !important; text-align: center !important; cursor: pointer !important; } #MainContent .os-page-container .os-mobile-filter-btn:focus-visible{ outline: 2px solid #1F47AA !important; outline-offset: 2px !important; } /* mobile: quick-buy stays visible (no hover on touch) */ #MainContent .os-page-container .os-mode-grid .os-hit-products .os-image-wrap .os-buy-container{ opacity: 1 !important; transform: none !important; pointer-events: auto !important; } /* sidebar → full-width slide-out panel, offset below the sticky header */ #MainContent .os-page-container #os-sidebar{ position: fixed !important; top: var(--os-header-h, 0px) !important; right: 0 !important; left: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; z-index: 2147483000 !important; background: #fff !important; box-shadow: -4px 0 24px rgba(0,0,0,.18) !important; transform: translateX(100%); transition: transform .28s ease !important; overflow-y: auto !important; padding: 0 20px 96px !important; margin: 0 !important; display: block !important; } #MainContent .os-page-container.os-filters-open #os-sidebar{ transform: translateX(0); } #MainContent .os-page-container.os-filters-open .os-filters-backdrop{ display: block !important; position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.4) !important; z-index: 2147482000 !important; } /* panel header: X on the left, "Filter by" centred (per design) */ #MainContent .os-page-container .os-panel-head{ display: flex !important; align-items: center !important; justify-content: center !important; position: sticky !important; top: 0 !important; background: #fff !important; padding: 18px 0 14px !important; margin-bottom: 4px !important; border-bottom: 1px solid #EAEAEA !important; z-index: 2 !important; } #MainContent .os-page-container .os-panel-head .os-panel-title{ font-size: 18px !important; font-weight: 600 !important; } #MainContent .os-page-container .os-panel-close{ position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 34px !important; height: 34px !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer !important; font-size: 28px !important; line-height: 1 !important; color: #1a1a1a !important; } #MainContent .os-page-container .os-panel-close:focus-visible{ outline: 2px solid #1F47AA !important; outline-offset: 2px !important; } #MainContent .os-page-container .os-panel-apply{ position: fixed !important; bottom: 15px !important; right: 0 !important; left: 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; padding: 14px 20px !important; background: #1F47AA !important; color: #fff !important; border: none !important; font-size: 16px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .5px !important; cursor: pointer !important; z-index: 2147483001 !important; transform: translateX(100%); transition: transform .28s ease !important; } #MainContent .os-page-container.os-filters-open .os-panel-apply{ transform: translateX(0); } /* filters full-width inside the panel */ #MainContent .os-page-container #os-sidebar .os-filter{ padding: 20px 0 !important; border-top: 1px solid #EAEAEA !important; } #MainContent .os-page-container #os-sidebar .os-filter:first-of-type{ border-top: none !important; } #MainContent .os-page-container #os-sidebar .os-filter .os-buckets{ max-height: none !important; } }