/* SKDA B2B - inverted navigation. Added 2026-09-07 (theme 1.10.0). Nav bar white -> black; info strip black -> white and moved under the bar; mega menu and the mobile slide-out panel follow the bar; the utility dropdowns (account, cart, quick search, Searchspring autocomplete) deliberately stay light. WHY SO MANY !important RULES. Almost every value here is overriding a hard-coded colour in the theme's own nav CSS, most of which is already !important. Where a rule looks over-specified, the comment above it says which rule it had to outrank. The behavioural half lives in assets/js/skda-nav-invert.js: tagging the light panels, painting icons whose colour cannot be reached from CSS, moving the info strip, and the desktop search sheet. */ /* --- the bar itself --- */ header.header { background: var(--sk-ink) !important; border-bottom-color: var(--sk-ink) !important; } header.header, header.header * { color: var(--sk-white) !important; } header.header a, header.header a:hover, header.header a:focus { color: var(--sk-white) !important; } /* The logo, cart and trademark marks are black PNGs; flip them so they survive on black. A real white asset would be better than filtering a raster, but this keeps the change to CSS. */ header.header img#skda-cart-img, header.header img.header-logo-image, header.header img#skda-nav-logo { filter: invert(1) !important; } header.header [data-skda-pill] { background: transparent !important; border-color: rgba(255,255,255,.45) !important; } header.header input { background: transparent !important; color: var(--sk-white) !important; } header.header input::placeholder { color: rgba(255,255,255,.6) !important; } header.header .countPill { color: var(--sk-ink) !important; } /* SKDA: the cart count sat on stencilColor(navUser-indicator-backgroundColor), a dark grey, carrying near-black text -- unreadable on the inverted nav. White circle, black number. Covers the mobile-nav variant too, which only ever restated the colour. */ header.header .countPill.cart-quantity { background-color: var(--sk-white) !important; color: var(--sk-ink) !important; } /* --- dropdowns that stay light (account, cart, quick search, autocomplete) --- */ header.header [data-skda-panel], header.header [data-skda-panel] * { color: var(--sk-ink) !important; } /* SKDA 2026-09-21 (2.1.1): the rule above paints EVERY descendant of a header panel ink, including the label of a primary button - which left "Check out now" in the cart dropdown with dark text on the blue fill. Buttons keep their own colours. */ header.header [data-skda-panel] .button--primary, header.header [data-skda-panel] .button--primary * { color: var(--sk-white) !important; } header.header .ss__autocomplete, header.header .ss__autocomplete *, header.header #quickSearch, header.header #quickSearch *, header.header #cart-preview-dropdown, header.header #cart-preview-dropdown *, header.header #skda-account-dropdown, header.header #skda-account-dropdown *, header.header .dropdown-menu, header.header .dropdown-menu * { color: var(--sk-ink) !important; } /* `header.header a:hover` above is (0,2,2) and outranks the panel restore at (0,2,1), so links inside the white dropdowns - "See N results for …" among them - turn white on white and vanish under the cursor. Naming the panel puts this at (0,3,2). */ header.header .ss__autocomplete a:hover, header.header .ss__autocomplete a:hover *, header.header #quickSearch a:hover, header.header #quickSearch a:hover *, header.header #cart-preview-dropdown a:hover, header.header #cart-preview-dropdown a:hover *, header.header #skda-account-dropdown a:hover, header.header #skda-account-dropdown a:hover *, header.header .dropdown-menu a:hover, header.header .dropdown-menu a:hover * { color: var(--sk-ink-2) !important; } /* SKDA 2026-09-21 (2.1.2): primary buttons inside the light dropdowns keep white text. The two restores above name the panel by ID (#cart-preview-dropdown ... * = 1,1,1, and a:hover = 1,2,2), which outranks ANY class-only exception - 2.1.1's `[data-skda-panel] .button--primary` (0,3,1) lost to it and "Check out now" stayed dark. Naming the ID here too puts these at (1,2,1) / (1,3,2). */ header.header #cart-preview-dropdown .button--primary, header.header #cart-preview-dropdown .button--primary *, header.header #cart-preview-dropdown a.button--primary:hover, header.header #cart-preview-dropdown a.button--primary:hover *, header.header #skda-account-dropdown .button--primary, header.header #skda-account-dropdown .button--primary *, header.header #skda-account-dropdown a.button--primary:hover, header.header #skda-account-dropdown a.button--primary:hover * { color: var(--sk-white) !important; } header.header .ss__autocomplete img, header.header #quickSearch img, header.header #cart-preview-dropdown img, header.header #skda-account-dropdown img, header.header .dropdown-menu img { filter: none !important; } header.header .ss__autocomplete { background: var(--sk-white) !important; } /* --- info strip --- */ /* Trim it by 10%. The height is not set directly: it comes from .skda-text-banner__inner's 5px vertical padding around an 18.75px line, 28.75px total. 1.44px off each side lands at ~25.9px with the type size untouched. */ .skda-text-banner__inner { padding-top: 3.56px !important; padding-bottom: 3.56px !important; } /* The strip sits under the bar (moved there in JS, since it is a body child that precedes the header). Keep it low so the search sheet paints over it. */ /* 1.11.7: the strip is back ABOVE the bar (skda-nav-invert.js moveStrip() now inserts it before header.header), so on desktop it stacks just under the sticky header (z 500) as it scrolls behind it. The Searchspring sheet is fixed at z 9500, so 499 never covers it. */ .global-top-banner-desktop, .global-top-banner-mobile { position: relative !important; z-index: 499 !important; } /* --- mega menu --- */ header.header #skda-mega-panel, header.header .navPage-subMenu, header.header .navPage-childList, header.header .navPage-childList-second-level { background: var(--sk-ink) !important; } header.header #skda-mega-panel, header.header #skda-mega-panel *, header.header .navPage-subMenu, header.header .navPage-subMenu *, header.header .navPage-childList, header.header .navPage-childList *, header.header .navPage-childList-second-level, header.header .navPage-childList-second-level * { color: var(--sk-white) !important; } header.header #skda-mega-panel a:hover, header.header .navPage-subMenu a:hover, header.header .navPage-childList a:hover, header.header .navPage-childList-second-level a:hover { color: var(--sk-ink-2) !important; } /* Item dividers are 1px #f5f5f5 / #e5e5e5 - invisible on the stock light panel, near-white rules on black. Colour only, so no geometry moves. */ header.header #skda-mega-panel *, header.header .navPage-subMenu *, header.header .navPage-childList *, header.header .navPage-childList-second-level * { border-color: rgba(255,255,255,.14) !important; } header.header #skda-mega-panel { border-bottom: 1px solid rgba(255,255,255,.15) !important; } /* The theme pins the nested lists white with header.header > .navPage-subMenu ul.navPage-childList { background:var(--sk-white) !important } which is (0,3,2) and outranks a plain .navPage-childList rule at (0,2,1) - so levels two and three stayed white while their text went white with the panel. Routing through #skda-mega-panel adds an ID and takes it outright. */ header.header #skda-mega-panel ul.navPage-childList, header.header #skda-mega-panel ul.navPage-childList-second-level, header.header > .navPage-subMenu ul.navPage-childList, header.header > .navPage-subMenu ul.navPage-childList-second-level { background: var(--sk-ink) !important; border-color: rgba(255,255,255,.14) !important; } header.header #skda-mega-panel ul.navPage-childList *, header.header #skda-mega-panel ul.navPage-childList-second-level * { color: var(--sk-white) !important; } header.header #skda-mega-panel ul.navPage-childList a:hover, header.header #skda-mega-panel ul.navPage-childList-second-level a:hover { color: var(--sk-ink-2) !important; } /* Chevrons are carrying the theme's near-black fill - displayed, just invisible on black. currentColor makes them follow their link. */ header.header #skda-mega-panel .navPages-action-moreIcon svg, header.header #skda-mega-panel .navPages-action-moreIcon svg *, header.header > .navPage-subMenu .navPages-action-moreIcon svg, header.header > .navPage-subMenu .navPages-action-moreIcon svg * { stroke: currentColor !important; fill: currentColor !important; } /* Opening a stacked item marks it .skda-child-active, which the theme paints white - white-on-white on a black panel as soon as the cursor leaves. A subtle lift is the dark-panel equivalent of that selected chip. */ header.header #skda-mega-panel a.skda-child-active, header.header > .navPage-subMenu a.skda-child-active { background: rgba(255,255,255,.10) !important; } header.header #skda-mega-panel a.skda-child-active, header.header #skda-mega-panel a.skda-child-active * { color: var(--sk-white) !important; } header.header #skda-mega-panel a.skda-child-active:hover, header.header #skda-mega-panel a.skda-child-active:hover * { color: var(--sk-ink-2) !important; } /* The deepest level takes a WHITE hover background from the theme's compiled CSS. That file is served cross-origin, so the rule cannot be found by enumerating stylesheets from the page - only its computed effect shows up. Same lift as the open item. */ header.header #skda-mega-panel a.navPages-action:hover, header.header #skda-mega-panel a.navPage-childList-action:hover, header.header > .navPage-subMenu a.navPages-action:hover, header.header > .navPage-subMenu a.navPage-childList-action:hover { background: rgba(255,255,255,.10) !important; } /* --- Shop by Bike pill --- */ header.header #skda-sbb2-nav .sbb2-navbtn { background: var(--sk-white) !important; border-color: var(--sk-white) !important; } header.header #skda-sbb2-nav .sbb2-navbtn, header.header #skda-sbb2-nav .sbb2-navbtn * { color: var(--sk-ink) !important; } header.header #skda-sbb2-nav .sbb2-navbtn:hover, header.header #skda-sbb2-nav .sbb2-navbtn:focus { background: transparent !important; border-color: var(--sk-white) !important; } header.header #skda-sbb2-nav .sbb2-navbtn:hover, header.header #skda-sbb2-nav .sbb2-navbtn:hover * { color: var(--sk-white) !important; } header.header #skda-sbb2-nav .sbb2-navbtn svg { stroke: currentColor !important; fill: none !important; } /* ================================================================================== MOBILE (<= 800px) - the same rules again, one class heavier. The mobile nav (theme 1.9.0) ships its own styling scoped under html.skda-mnav, e.g. @media (max-width:800px) { .skda-mnav header.header { background:var(--sk-white) !important } } That is (0,1,1) against a bare header.header (0,0,1). Both are !important, so the class wins and everything above is ignored below 800px unless it is re-stated with the same prefix. Generated, not hand-written - keep it in sync with the block above. ================================================================================== */ html.skda-mnav header.header { background: var(--sk-ink) !important; border-bottom-color: var(--sk-ink) !important; } html.skda-mnav header.header, html.skda-mnav header.header * { color: var(--sk-white) !important; } html.skda-mnav header.header a, html.skda-mnav header.header a:hover, html.skda-mnav header.header a:focus { color: var(--sk-white) !important; } html.skda-mnav header.header img#skda-cart-img, html.skda-mnav header.header img.header-logo-image, html.skda-mnav header.header img#skda-nav-logo { filter: invert(1) !important; } html.skda-mnav header.header [data-skda-pill] { background: transparent !important; border-color: rgba(255,255,255,.45) !important; } html.skda-mnav header.header input { background: transparent !important; color: var(--sk-white) !important; } html.skda-mnav header.header input::placeholder { color: rgba(255,255,255,.6) !important; } html.skda-mnav header.header .countPill { color: var(--sk-ink) !important; } html.skda-mnav header.header [data-skda-panel], html.skda-mnav header.header [data-skda-panel] * { color: var(--sk-ink) !important; } html.skda-mnav header.header [data-skda-panel] .button--primary, html.skda-mnav header.header [data-skda-panel] .button--primary * { color: var(--sk-white) !important; } html.skda-mnav header.header .ss__autocomplete, html.skda-mnav header.header .ss__autocomplete *, html.skda-mnav header.header #quickSearch, html.skda-mnav header.header #quickSearch *, html.skda-mnav header.header #cart-preview-dropdown, html.skda-mnav header.header #cart-preview-dropdown *, html.skda-mnav header.header #skda-account-dropdown, html.skda-mnav header.header #skda-account-dropdown *, html.skda-mnav header.header .dropdown-menu, html.skda-mnav header.header .dropdown-menu * { color: var(--sk-ink) !important; } html.skda-mnav header.header .ss__autocomplete a:hover, html.skda-mnav header.header .ss__autocomplete a:hover *, html.skda-mnav header.header #quickSearch a:hover, html.skda-mnav header.header #quickSearch a:hover *, html.skda-mnav header.header #cart-preview-dropdown a:hover, html.skda-mnav header.header #cart-preview-dropdown a:hover *, html.skda-mnav header.header #skda-account-dropdown a:hover, html.skda-mnav header.header #skda-account-dropdown a:hover *, html.skda-mnav header.header .dropdown-menu a:hover, html.skda-mnav header.header .dropdown-menu a:hover * { color: var(--sk-ink-2) !important; } html.skda-mnav header.header #cart-preview-dropdown .button--primary, html.skda-mnav header.header #cart-preview-dropdown .button--primary *, html.skda-mnav header.header #cart-preview-dropdown a.button--primary:hover, html.skda-mnav header.header #cart-preview-dropdown a.button--primary:hover *, html.skda-mnav header.header #skda-account-dropdown .button--primary, html.skda-mnav header.header #skda-account-dropdown .button--primary *, html.skda-mnav header.header #skda-account-dropdown a.button--primary:hover, html.skda-mnav header.header #skda-account-dropdown a.button--primary:hover * { color: var(--sk-white) !important; } html.skda-mnav header.header .ss__autocomplete img, html.skda-mnav header.header #quickSearch img, html.skda-mnav header.header #cart-preview-dropdown img, html.skda-mnav header.header #skda-account-dropdown img, html.skda-mnav header.header .dropdown-menu img { filter: none !important; } html.skda-mnav header.header .ss__autocomplete { background: var(--sk-white) !important; } html.skda-mnav header.header #skda-mega-panel, html.skda-mnav header.header .navPage-subMenu, html.skda-mnav header.header .navPage-childList, html.skda-mnav header.header .navPage-childList-second-level { background: var(--sk-ink) !important; } html.skda-mnav header.header #skda-mega-panel, html.skda-mnav header.header #skda-mega-panel *, html.skda-mnav header.header .navPage-subMenu, html.skda-mnav header.header .navPage-subMenu *, html.skda-mnav header.header .navPage-childList, html.skda-mnav header.header .navPage-childList *, html.skda-mnav header.header .navPage-childList-second-level, html.skda-mnav header.header .navPage-childList-second-level * { color: var(--sk-white) !important; } html.skda-mnav header.header #skda-mega-panel a:hover, html.skda-mnav header.header .navPage-subMenu a:hover, html.skda-mnav header.header .navPage-childList a:hover, html.skda-mnav header.header .navPage-childList-second-level a:hover { color: var(--sk-ink-2) !important; } html.skda-mnav header.header #skda-mega-panel *, html.skda-mnav header.header .navPage-subMenu *, html.skda-mnav header.header .navPage-childList *, html.skda-mnav header.header .navPage-childList-second-level * { border-color: rgba(255,255,255,.14) !important; } html.skda-mnav header.header #skda-mega-panel { border-bottom: 1px solid rgba(255,255,255,.15) !important; } html.skda-mnav header.header #skda-mega-panel ul.navPage-childList-second-level, html.skda-mnav header.header > .navPage-subMenu ul.navPage-childList, html.skda-mnav header.header > .navPage-subMenu ul.navPage-childList-second-level { background: var(--sk-ink) !important; border-color: rgba(255,255,255,.14) !important; } html.skda-mnav header.header #skda-mega-panel ul.navPage-childList *, html.skda-mnav header.header #skda-mega-panel ul.navPage-childList-second-level * { color: var(--sk-white) !important; } html.skda-mnav header.header #skda-mega-panel ul.navPage-childList a:hover, html.skda-mnav header.header #skda-mega-panel ul.navPage-childList-second-level a:hover { color: var(--sk-ink-2) !important; } html.skda-mnav header.header #skda-mega-panel .navPages-action-moreIcon svg, html.skda-mnav header.header #skda-mega-panel .navPages-action-moreIcon svg *, html.skda-mnav header.header > .navPage-subMenu .navPages-action-moreIcon svg, html.skda-mnav header.header > .navPage-subMenu .navPages-action-moreIcon svg * { stroke: currentColor !important; fill: currentColor !important; } html.skda-mnav header.header #skda-mega-panel a.skda-child-active, html.skda-mnav header.header > .navPage-subMenu a.skda-child-active { background: rgba(255,255,255,.10) !important; } html.skda-mnav header.header #skda-mega-panel a.skda-child-active, html.skda-mnav header.header #skda-mega-panel a.skda-child-active * { color: var(--sk-white) !important; } html.skda-mnav header.header #skda-mega-panel a.skda-child-active:hover, html.skda-mnav header.header #skda-mega-panel a.skda-child-active:hover * { color: var(--sk-ink-2) !important; } html.skda-mnav header.header #skda-mega-panel a.navPages-action:hover, html.skda-mnav header.header #skda-mega-panel a.navPage-childList-action:hover, html.skda-mnav header.header > .navPage-subMenu a.navPages-action:hover, html.skda-mnav header.header > .navPage-subMenu a.navPage-childList-action:hover { background: rgba(255,255,255,.10) !important; } html.skda-mnav header.header #skda-sbb2-nav .sbb2-navbtn { background: var(--sk-white) !important; border-color: var(--sk-white) !important; } html.skda-mnav header.header #skda-sbb2-nav .sbb2-navbtn, html.skda-mnav header.header #skda-sbb2-nav .sbb2-navbtn * { color: var(--sk-ink) !important; } html.skda-mnav header.header #skda-sbb2-nav .sbb2-navbtn:hover, html.skda-mnav header.header #skda-sbb2-nav .sbb2-navbtn:focus { background: transparent !important; border-color: var(--sk-white) !important; } html.skda-mnav header.header #skda-sbb2-nav .sbb2-navbtn:hover, html.skda-mnav header.header #skda-sbb2-nav .sbb2-navbtn:hover * { color: var(--sk-white) !important; } html.skda-mnav header.header #skda-sbb2-nav .sbb2-navbtn svg { stroke: currentColor !important; fill: none !important; } /* ================================================================================== MOBILE (<= 800px) - the mobile nav's own pieces ================================================================================== */ /* The hamburger is three black bars: a span plus its ::before/::after. Invisible on a black bar, and pseudo-elements cannot be set from JS, so this needs a selector heavy enough to beat the mobile nav's two-class rules. */ html.skda-mnav header.header span.mobileMenu-toggleIcon, html.skda-mnav header.header span.mobileMenu-toggleIcon::before, html.skda-mnav header.header span.mobileMenu-toggleIcon::after { background-color: var(--sk-white) !important; } /* The slide-out panel is white with black text in stock form; with the bar inverted it has to come too, or it opens white-on-white. */ html.skda-mnav header.header #menu.navPages-container, html.skda-mnav header.header nav.navPages, html.skda-mnav header.header ul.navPages-list, html.skda-mnav header.header .navPages-list > li { background: var(--sk-ink) !important; } html.skda-mnav header.header #menu.navPages-container, html.skda-mnav header.header #menu.navPages-container * { color: var(--sk-white) !important; } html.skda-mnav header.header #menu.navPages-container * { border-color: rgba(255,255,255,.14) !important; } /* That panel rule ties with the pill rule on specificity and comes later, so it repaints the pill's text white on its own white fill. Re-assert through #menu for two IDs. */ html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn, html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn * { color: var(--sk-ink) !important; } html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn { background: var(--sk-white) !important; border-color: var(--sk-white) !important; } /* Chevrons: the mobile nav pins them at opacity .5 hard against the panel edge, which on black reads as a smudge. Full opacity and the same 14px inset the labels use. */ html.skda-mnav header.header #menu.navPages-container .navPages-action .navPages-action-moreIcon { opacity: 1 !important; right: 14px !important; } /* Chevron colour lives in CSS, not in the JS icon pass: painting them inline would freeze them white while the label greys on hover, and would also make them depend on the pass having reached them - if it ever skips one it falls back to the nav's near-black #111 and vanishes until hovered. */ html.skda-mnav header.header #menu.navPages-container .navPages-action-moreIcon svg, html.skda-mnav header.header #menu.navPages-container .navPages-action-moreIcon svg * { stroke: currentColor !important; fill: currentColor !important; } /* The nav's own hover colour is outranked by the panel text rule above, so hover did nothing once inverted. Re-state it at matching weight. */ html.skda-mnav header.header #menu.navPages-container a.navPages-action:not(.sbb2-navbtn):hover, html.skda-mnav header.header #menu.navPages-container a.navPages-action:not(.sbb2-navbtn):hover *, html.skda-mnav header.header #menu.navPages-container .navPage-subMenu-action:hover, html.skda-mnav header.header #menu.navPages-container .navPage-subMenu-action:hover *, html.skda-mnav header.header #menu.navPages-container .navPage-childList-action:hover, html.skda-mnav header.header #menu.navPages-container .navPage-childList-action:hover * { color: var(--sk-ink-2) !important; } /* ================================================================================== DESKTOP (>= 801px) - Searchspring autocomplete as a right-hand sheet ================================================================================== */ @media (min-width: 801px) { .ss__autocomplete { position: fixed !important; top: var(--skda-ac-top, 85px) !important; /* set from JS: the bar's bottom edge */ right: 0 !important; left: auto !important; bottom: 0 !important; width: min(900px, 92vw) !important; max-width: none !important; max-height: none !important; background: var(--sk-white) !important; /* fixed positioning loses the inherited fill */ /* THE PANEL ITSELF NEVER SCROLLS. Each column scrolls inside its own box instead. When the whole sheet scrolled, a long result set put a ~15px scrollbar on the panel's right edge and a short one took it away again - so every keystroke that changed the result count shunted the grey suggestions column sideways. That is the "it resizes ever so slightly as you type" report. */ overflow: hidden !important; z-index: 9500 !important; box-shadow: -18px 0 44px rgba(0,0,0,.22) !important; /* No entry keyframes. Snap REUSES this element between searches, so an animation tied to element creation plays once per page load and never again. Both directions run off the .skda-ac-out class on instead - see openSheet()/closeSheet() in skda-nav-invert.js. */ transition: transform .28s cubic-bezier(.22, .61, .36, 1) !important; align-items: stretch !important; /* Without this the panel wraps: the content column cannot shrink past its tiles, so the terms list is pushed onto its own row above the results. */ flex-wrap: nowrap !important; } html.skda-ac-out .ss__autocomplete { transform: translateX(100%) !important; } /* suggestions on the right, results on the left */ /* WIDTH IS NAILED DOWN, not merely asked for. `flex: 0 0 200px` sets the basis but leaves min-width at its `auto` default, which resolves to the column's MIN-CONTENT width - so a single long unbreakable suggestion ("aftermarket-graphics-kit") made the column wider than 200px, and it snapped back on the next query that had no such term. An explicit min/max is what actually pins it; break-word stops a long term forcing the issue in the first place. */ .ss__autocomplete .ss__autocomplete__terms { flex: 0 0 200px !important; width: 200px !important; min-width: 200px !important; max-width: 200px !important; box-sizing: border-box !important; overflow-wrap: break-word !important; word-break: break-word !important; overflow-y: auto !important; overflow-x: hidden !important; background: var(--sk-surface) !important; order: 2 !important; } /* A full-height flex COLUMN. This is what stops the "See N results" link wandering: the results box below takes all the leftover height, so whatever follows it is pushed to the bottom of the sheet and stays there no matter how many results come back. Previously the link sat immediately under the grid and moved up and down the panel on every query. */ .ss__autocomplete .ss__autocomplete__content { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; background: var(--sk-white) !important; order: 1 !important; padding-left: 6px !important; padding-right: 0 !important; } /* The growing part. min-height:0 is required or a flex item refuses to shrink below its content and scrolls the page instead of itself. scrollbar-gutter keeps the tiles from shifting when this box's own scrollbar comes and goes. */ .ss__autocomplete .ss__autocomplete__content__results { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: stable !important; } /* Everything else in the column keeps its natural height - the title above the grid, the "See N results" link below it. Without this they would be stretched or squashed by the flex context they now sit in. */ .ss__autocomplete .ss__autocomplete__content > .ss__autocomplete__title, .ss__autocomplete .ss__autocomplete__content > a, .ss__autocomplete .ss__autocomplete__content > div:not(.ss__autocomplete__content__results) { flex: 0 0 auto !important; } /* two up, not three - the tiles absorb the freed width so the images grow. Six results, so the grid is always a 2 x 3 block of identical cards. */ .ss__autocomplete .ss__results-grid { flex-wrap: wrap !important; margin-left: 0 !important; margin-right: 0 !important; align-items: flex-start !important; } .ss__autocomplete article.ss__result { flex: 0 0 50% !important; max-width: 50% !important; box-sizing: border-box !important; } /* EVERY CARD IS THE SAME SIZE, whatever comes back. There were two things making them breathe: 1. the image box was `height: auto`, so its height came from each product photo's own aspect ratio - a tall shot and a wide shot in the same row gave two different card heights, and the row grew to the tallest of them; 2. product names wrap to one line or two, which moved the price and everything below it. A fixed image box with object-fit: contain fixes the first without cropping anyone's photo - the picture is letterboxed inside a constant frame rather than setting the frame. Reserving two lines for the title fixes the second. Change --skda-ac-img if the block wants to be taller or shorter; nothing else needs touching. */ /* THE REAL MARKUP IS FOUR DEEP, and the image is absolutely positioned: div.ss__result__image-wrapper > a > div.ss__image > img(position:absolute) .ss__image is Snap's padding-bottom aspect-ratio box - it has no in-flow content at all, because its only child is taken out of flow. So every element in that chain has to be told to fill the fixed box explicitly. Anything that lets one of them size to its content collapses the lot: an earlier attempt centred the image with flex, which blockified the as a flex item, shrank it to its (zero) content, and the image resolved its 100% against 0 and rendered at 0x0 - a correct src painting nothing. Hence display:block the whole way down, height:100% at each level, and padding:0 to kill the aspect-ratio hack now that the height is fixed. .ss__image keeps position:relative so it stays the image's containing block. */ .ss__autocomplete .ss__result__image-wrapper { display: block !important; position: relative !important; width: 100% !important; height: var(--skda-ac-img, 180px) !important; overflow: hidden !important; } .ss__autocomplete .ss__result__image-wrapper > a, .ss__autocomplete .ss__result__image-wrapper .ss__image { display: block !important; position: relative !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; } .ss__autocomplete .ss__result__image-wrapper img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; } /* Two lines, always - clamped so a long name cannot spill, and reserved so a short one still occupies the same height. */ .ss__autocomplete .ss__result__details__title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 2.6em !important; } /* Snap draws a 20px white spacer as .ss__autocomplete__content__results::after with a hard-coded width:740px. The column is 700px here, so it hung 40px past the edge at z-index 2 - a white bite out of the suggestions column above the "See N results" link. Tie it to the column instead of a fixed width. */ .ss__autocomplete .ss__autocomplete__content__results::after { width: 100% !important; max-width: 100% !important; } /* "PRODUCT SUGGESTIONS" sat flush against the column edge while the images sat 10px in (the tiles' own padding); give the heading the same inset so they share one edge. */ .ss__autocomplete .ss__autocomplete__title { padding-left: 10px !important; } /* close button. Hiding the CONTAINER rather than the panel: Snap renders into .ss__autocomplete--target, which carries its own fill and border, so hiding only the inner panel leaves that collapsed to a sliver down the page. */ html.skda-ac-hidden .ss__autocomplete--target { display: none !important; } #skda-ac-close { position: absolute; top: 12px; right: 12px; z-index: 30; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; color: var(--sk-ink) !important; opacity: .55; transition: opacity .15s, background .15s; } #skda-ac-close:hover { opacity: 1; background: rgba(0,0,0,.06); } #skda-ac-close:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 2px; } #skda-ac-close svg { width: 15px; height: 15px; stroke: var(--sk-ink) !important; stroke-width: 2; fill: none !important; } } @media (min-width: 801px) { /* Shop by Bike pill, 20% shorter: 43px -> ~34.4px. Its height is not set directly - a 17px icon plus 12px of vertical padding and 1px borders makes 43. Type size and horizontal padding are untouched. TWO IDs DELIBERATELY. The nav redesign sets this with #menu.navPages-container .navPages-item > a.navPages-action { padding: … !important } which is (1,3,1) and beat the (1,2,1) selector this shipped with in 1.10.2, so the pill stayed 43px. Going through #menu as well wins outright. Desktop only - on mobile the pill is a full-width block with its own sizing. */ header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn { padding-top: 7.7px !important; padding-bottom: 7.7px !important; } /* --- translucent mega menu (Tyson, 8 Sep) -------------------------------- 90% black wash so the page reads through the open nav dropdown. A BACKGROUND alpha, not opacity: opacity would fade the menu TEXT to 90% too and come out muddy - this way the type stays fully crisp. The alpha goes on the OUTER panel only. The column lists inside it carry their own black (see the ul.navPage-childList rule above), and leaving that in place would stack two washes to 1-(0.1*0.1) = 99% wherever a column sits over the panel - a patchy menu with opaque stripes. One wash, columns transparent. `ul.` is load-bearing: the column rule is `#skda-mega-panel ul.navPage-childList` at (1,2,2), so a bare class selector loses to it and the column stays black. */ header.header #skda-mega-panel { background-color: rgba(0,0,0,.9) !important; } header.header #skda-mega-panel ul.navPage-childList, header.header #skda-mega-panel ul.navPage-childList-second-level, header.header #skda-mega-panel .navPage-subMenu-list, header.header #skda-mega-panel .skda-mega-slot { background-color: transparent !important; } /* The open row ships at col+21px, which is 10px MORE than the 11px column gap (--skda-off = col + 11px), so its highlight TUCKS under the next column. That was deliberate and correct while the columns were opaque - the tuck hid the seam and the highlight read as one piece with the next panel. With a single translucent wash there is nothing to hide under: the band shows through, and where it crosses the next column's own .10 highlight the two stack to .20 and read as overlapping selections. col+11px runs into the gap and stops dead on the next column's left edge instead. Measured: highlight right edge and column left edge both land on the same pixel. If the menu ever goes back to opaque columns, put 21px back with it. */ header.header #skda-mega-panel a.skda-child-active, header.header > .navPage-subMenu a.skda-child-active { width: calc(var(--skda-col) + 11px) !important; } } @media (max-width: 800px) { /* 2.2.3 (Tyson, 2026-09-22): the strip and the bar are moved by the BROWSER. The strip sits in the page flow and scrolls away with the finger; the bar is sticky, rides up behind it and locks at the top. Until 2.2.2 both were position:fixed and skda-nav-redesign.js slid the bar over the strip from scroll events - iOS delivers those in bursts, so the strip vanished in steps, and a fixed strip could not join the overscroll bounce at the top (the bar bounced, the strip did not). In the flow, both bounce with the page and settle together. `body` in the bar's selector outranks the mobile nav's own position:fixed. */ html.skda-mnav body header.header { position: sticky !important; top: 0 !important; } html.skda-mnav .global-top-banner-mobile { position: relative !important; top: auto !important; z-index: 21 !important; } html.skda-mnav .global-top-banner-desktop { position: static !important; top: auto !important; } /* Nothing is out of flow any more, so nothing to reserve (was bar + strip, 83px). */ html.skda-mnav body { padding-top: 0 !important; } html.skda-mnav div.body { margin-top: 0 !important; } /* Search sheet: tiles out to the edges of the card. The mobile nav sets .skda-search-grid { padding: 16px 16px 28px } and the autocomplete content adds 20px on top, so the tiles sat 36px in on each side. */ html.skda-mnav .ss__autocomplete .ss__autocomplete__content { padding-left: 8px !important; padding-right: 8px !important; } html.skda-mnav .skda-search-grid { padding-left: 8px !important; padding-right: 8px !important; } /* nav.navUser is absolute with left:0 / right:0, so it spans the FULL header width. It is a direct child of header at z-index 6 while the logo sits inside .header-logo-container at z-index 1 - so the EMPTY left half of navUser paints over the logo and swallows the tap, and the logo never navigated home on a phone. Its own children occupy only the right-hand ~176px, so making the nav itself transparent to pointers hands the left side back without moving a single box. */ html.skda-mnav header.header nav.navUser { pointer-events: none !important; } html.skda-mnav header.header nav.navUser > * { pointer-events: auto !important; } /* .actionBar (Sort by / Filters) is sticky at a hard-coded top:80px - a figure that matched the OLD mobile header: 57px bar plus a 26px FIXED info strip. The strip now scrolls away with the page, so the bar parked 23px too low with product art showing above it, and its white only spanned the 443px content column, so the art showed through both 21px gutters as well. Flush to the bar, and full-bleed. 1.5rem is .container's own $container-padding: spacing("single"), which only changes at breakpoint("large") - far outside this block. Deliberately NOT calc(50% - 50vw): 100vw includes a classic scrollbar, which overhangs by its width and puts a horizontal scrollbar on the whole page in a narrow desktop window. */ /* 1.11.9 (Tyson, 15 Sep): no white strip - the two controls float on their own white fills with a drop shadow, centred, parked 7px under the nav (the same 7px as the gap between them). --skda-mnav-nav-bottom is the nav's live bottom edge (skda-mobile-nav.js), which moves as the ticker above the bar slides away. The Filters button's own ~7px margin-left overflowed its column and put the pair 6px off centre, so the spacing now lives on the row as a gap. */ html.skda-mnav .actionBar { top: calc(var(--skda-mnav-nav-bottom, 57px) + 7px) !important; margin-left: -1.5rem !important; margin-right: -1.5rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; margin-bottom: 4% !important; background: transparent !important; box-shadow: none !important; } html.skda-mnav .actionBar .ss__toolbar__inner { justify-content: center !important; gap: 7px !important; } html.skda-mnav .actionBar .ss__slideout__button { margin-left: 0 !important; } html.skda-mnav .actionBar .ss__dropdown__button, html.skda-mnav .actionBar .ss__slideout__button { background-color: var(--sk-white) !important; box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; } }