/* SKDA retail storefront fixes (build_retail.py). Rules that only the retail channels need. */

/* ---- info ticker: no black bars (Tyson, 2026-10-12) ----
   The retail channels' ticker widget sits in a Page Builder section with a BLACK background and
   10px/5px padding (data-sub-layout-container). Under the old white header that read as part of
   the strip; above the new dark nav it showed as black bars above and below the #2b2b2b ticker.
   B2B's ticker section has neither. Flattened here so no widget has to be edited. */
.global-top-banner-desktop [data-sub-layout-container],
.global-top-banner-mobile [data-sub-layout-container] {
    padding: 0 !important;
    background-color: transparent !important;
}

/* ---- PDP bar price at the title's size, desktop (Tyson, 2026-10-12) ----
   B2B's bar carries price + RRP + "You save", so a 16px price reads fine there; on retail the
   price usually stands alone and looked small next to the 20px title. At the same size the two
   share a baseline under .sk-bar-main's flex-end, so pdp-drawer.css's 4px lift (and the -4px it
   needed under "You save") are undone. Measured: title and price both 99.86-123.36px. */
@media (min-width: 801px) {
    .sk-bar-price b { font-size: var(--sk-fs-title); }
    .sk-bar-main > .sk-bar-price { margin-bottom: 0; }
    .sk-bar-sub > .sk-bar-right { margin-top: 0; }
}

/* ---- desktop mega-menu (1.0.6, Tyson 2026-10-13, tuned live in his tab) ----
   Glass: black 85% + 12px blur behind the panel only (nav-invert.css paints 90%, no blur).
   Padding 42 top / 60 bottom (was 21 / 32). The slot is the positioning frame for columns 2 and 3,
   which skda-nav-redesign.js moves out of column 1 so a scrolling column cannot clip them. */
@media (min-width: 801px) {
    html header.header #skda-mega-panel {
        background-color: rgba(0, 0, 0, .85) !important;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    #skda-mega-panel .skda-mega-slot { padding: 42px 0 60px !important; position: relative !important; }
    /* a column taller than the space it has scrolls: thin grey bar + a fade where there is more */
    #skda-mega-panel ul.skda-col-scroll {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(128, 128, 128, .6) transparent;
    }
    #skda-mega-panel ul.skda-col-scroll::-webkit-scrollbar { width: 6px; }
    #skda-mega-panel ul.skda-col-scroll::-webkit-scrollbar-track { background: transparent; }
    #skda-mega-panel ul.skda-col-scroll::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .6); border-radius: 3px; }
    #skda-mega-panel ul.skda-col-scroll.skda-more-below {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
    }
    #skda-mega-panel ul.skda-col-scroll.skda-more-above {
        -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 64px), transparent);
        mask-image: linear-gradient(to top, #000 calc(100% - 64px), transparent);
    }
    #skda-mega-panel ul.skda-col-scroll.skda-more-above.skda-more-below {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 64px), transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    }
}

/* ---- phone/tablet hamburger menu: the same glass (1.0.6, Tyson 2026-10-13) ----
   mobile-nav.css paints it 90% black with !important, hence the doubled id. */
@media (max-width: 800px) {
    html body #menu#menu.navPages-container {
        background-color: rgba(0, 0, 0, .85) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        backdrop-filter: blur(12px) !important;
    }
}

/* ---- PDP photo viewer (1.0.6, Tyson 2026-10-13) - behaviour in skda-retail-fixes.js ---- */
.productView-images .skda-zoomwrap { cursor: zoom-in; }
#skda-lb { position: fixed; inset: 0; z-index: 100000; cursor: zoom-out; }
#skda-lb .lb-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .75); opacity: 0; transition: opacity 340ms ease; }
#skda-lb.on .lb-bg { opacity: 1; }
#skda-lb img {
    position: absolute; left: 0; top: 0; display: block;
    max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); width: auto; height: auto;
    transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none;
}
#skda-lb .lb-ui { opacity: 0; transition: opacity 340ms ease; }
#skda-lb.on .lb-ui { opacity: 1; }
#skda-lb button {
    position: absolute; z-index: 2; border: 0; background: rgba(255, 255, 255, .12); color: #fff;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font: 300 26px/1 Roboto, sans-serif;
}
#skda-lb button:hover { background: rgba(255, 255, 255, .24); }
#skda-lb .lb-x { top: 20px; right: 20px; }
#skda-lb .lb-prev { left: 24px; top: 50%; margin-top: -24px; }
#skda-lb .lb-next { right: 24px; top: 50%; margin-top: -24px; }
#skda-lb .lb-n { position: absolute; z-index: 2; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .7); font: 400 13px/1 Roboto, sans-serif; }

/* ==================================================================== RETAIL-EU 1.0.7
   EU only (Tyson, 2026-10-16) - every value below was tuned live in his EU tab; the full notes are
   in retail-port/PENDING-EU-1.0.7.md (item numbers in the headings). Appended to retail.css by
   scripts/skda_patches_107_eu.py, after the 1.0.6 rules it overrides. */

/* ---- 1/2. desktop nav bar 70px, 64px on shorter screens; logo 36px ----
   desktop-nav.css itself now says 70px (the build edits it); the short-screen step lives here.
   Shorter = 1920x1080 and below once the browser bars are off (same query as item 5). */
@media (min-width: 801px) and (max-height: 1000px) {
    html body header.header { height: 64px !important; min-height: 64px !important; }
}
/* the account dropdown's top edge lands on the bar's bottom edge: the 22px account item is
   centred, so (bar - 22) / 2 below it - 24px at 70, 21px at 64 (17px was the 56px bar's) */
@media (min-width: 801px) {
    html body #skda-account-dropdown { top: calc(100% + 24px); }
}
@media (min-width: 801px) and (max-height: 1000px) {
    html body #skda-account-dropdown { top: calc(100% + 21px); }
}

/* ---- 3. info ticker 34px on desktop (was 40.1px) ----
   On EU desktop the DESKTOP banner region is empty, so the mobile region's .skda-text-banner shows
   at every width. !important throughout: the widget's own rules and inline styles win otherwise. */
@media (min-width: 801px) {
    html body .global-top-banner-mobile .skda-text-banner__inner { padding: 0 10px !important; height: 34px !important; box-sizing: border-box; }
    html body .global-top-banner-mobile .skda-text-banner__viewport,
    html body .global-top-banner-mobile .skda-text-banner__track { height: 34px !important; }
    html body .global-top-banner-mobile .skda-text-banner__track { align-items: center !important; }
    html body .global-top-banner-mobile .skda-text-banner__slide { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* ---- 5. tighter mega-menu ----
   All desktop heights: 25% less space above the first option and below the last (1.0.6: 42/60).
   Shorter screens: rows 42px (link padding 8/13, was 12/18) and the text a point smaller
   (13px/20px, was 14/21) - Graphics & Stickers column 1 546px, the whole dropdown 623px. */
@media (min-width: 801px) {
    #skda-mega-panel .skda-mega-slot { padding-top: 32px !important; padding-bottom: 45px !important; }
}
@media (min-width: 801px) and (max-height: 1000px) {
    #skda-mega-panel .skda-mega-slot li > a {
        padding-top: 8px !important; padding-bottom: 13px !important;
        font-size: 13px !important; line-height: 20px !important;
    }
}

/* ---- 6. no motorbike icon on the Shop by Bike button (desktop bar AND phone menu) ----
   One element at every width; its markup comes from the shared widget, so hidden here. The phone
   menu forces it back with a two-id !important rule (mobile-nav.css ~312) - three ids beat it. */
a.sbb2-navbtn > svg,
html body #skda-sbb2-nav#skda-sbb2-nav#skda-sbb2-nav a.sbb2-navbtn > svg { display: none !important; }

/* ---- 4. desktop product page = layout A (>= 1261px, the large-screen gallery) ----
   html.skda-pdpA is set by skda-retail-107.js once it has built the card; phones and tablets
   keep today's page. S1 = photo column, S2 = buy card. */
.skda-a-head, .skda-a-reveal, #skda-dr-head, .skda-a-sl { display: none; }
@media (min-width: 1261px) {
    html.skda-pdpA { scrollbar-gutter: stable; }
    html.skda-pdpA .skda-a-head, html.skda-pdpA .skda-a-reveal { display: block; }
    html.skda-pdpA .productView-description, html.skda-pdpA .sk-bar { display: none !important; }
    html.skda-pdpA .productView { justify-content: flex-start !important; }
    html.skda-pdpA .productView > .productView-section:first-child {
        flex: 0 0 68% !important; max-width: 68% !important; margin-left: 0 !important;
        transition: flex-basis .5s cubic-bezier(.32, .72, 0, 1), max-width .5s cubic-bezier(.32, .72, 0, 1) !important;
    }
    html.skda-pdpA .productView > .productView-section:nth-child(2) {
        flex: 0 0 32% !important; max-width: 32% !important; align-self: flex-start; margin-left: auto !important;
    }
    html.skda-pdpA .productView-details.product-data { padding-top: 0 !important; }
    /* order form open: the photo column narrows to 40px clear of the form, the section keeps its
       closed height (or the footer peeks in under the shorter photo) */
    html.skda-pdpA body.sk-cfg-open .productView > .productView-section:first-child {
        flex-basis: var(--skda-a-open-w, 60%) !important; max-width: var(--skda-a-open-w, 60%) !important;
    }
    html.skda-pdpA body.sk-cfg-open .productView { min-height: var(--skda-a-pv-h, 0px) !important; }

    /* the card */
    .skda-a-head { font-family: Roboto, sans-serif; margin-bottom: 26px; }
    .skda-a-bc { margin: 0 0 36px; font: 400 12px/1.4 Roboto, sans-serif; }
    .skda-a-bc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 4px; }
    .skda-a-bc li, .skda-a-bc a { color: #a1a1a6; text-decoration: none; }
    .skda-a-bc li + li::before { content: "/"; margin: 0 6px; color: #d2d2d7; }
    .skda-a-bc a:hover { color: #6e6e73; text-decoration: underline; }
    .skda-a-brand { font-size: 14px; color: #6e6e73; margin-bottom: 6px; }
    .skda-a-brand:empty { display: none; }
    .skda-a-title { font-family: Roboto, sans-serif; font-size: 30px; line-height: 1.2; font-weight: 600; color: #1d1d1f; margin: 0 0 12px; text-transform: none; letter-spacing: -.01em; }
    .skda-a-amount { font-size: 24px; font-weight: 500; color: #1d1d1f; margin-bottom: 18px; }
    .skda-a-svc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; margin: 2px 0; }
    .skda-a-svc-card { background: #f8f8f8; border-radius: 4px; padding: 15px; color: #010101; }
    .skda-a-svc-t { font-size: 12px; font-weight: 700; line-height: 14.4px; margin-bottom: 6px; }
    .skda-a-svc-x { font-size: 12px; line-height: 14.4px; }

    /* Configure Order: original wording + flat blue, with the "sliders" icon */
    html.skda-pdpA .sk-cfg-btn {
        margin-top: 0 !important; display: flex !important; align-items: center; justify-content: center; gap: 10px;
        background-color: #0071e3 !important; transition: background-color .2s, transform .15s !important;
    }
    html.skda-pdpA .sk-cfg-btn:hover { background-color: #0077ed !important; }
    html.skda-pdpA .sk-cfg-btn:active { transform: scale(.97); }
    html.skda-pdpA .sk-cfg-btn .skda-a-sl { display: block; width: 20px; height: 20px; flex: none; overflow: visible; }
    .skda-a-sl line { stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
    .skda-a-sl circle { fill: #0071e3; stroke: #fff; stroke-width: 1.8; transition: transform .45s cubic-bezier(.32, .72, 0, 1), fill .2s; }
    html.skda-pdpA .sk-cfg-btn:hover .skda-a-sl circle { fill: #0077ed; }
    html.skda-pdpA .sk-cfg-btn:hover .skda-a-sl .n1 { transform: translateX(8px); }
    html.skda-pdpA .sk-cfg-btn:hover .skda-a-sl .n2 { transform: translateX(-8px); }
    html.skda-pdpA .sk-cfg-btn:hover .skda-a-sl .n3 { transform: translateX(5px); }

    /* order form: title + live price locked at the top. The drawer hides any child it does not
       know with an !important rule - the id outranks it. */
    html.skda-pdpA .sk-cfg-drawer > #skda-dr-head#skda-dr-head {
        display: flex !important; align-items: baseline; justify-content: space-between; gap: 20px;
        flex: none; padding: 22px 72px 18px 56px; border-bottom: 1px solid rgba(0, 0, 0, .08); font-family: Roboto, sans-serif;
    }
    .skda-dr-title { flex: 1 1 auto; min-width: 0; font-size: 23px; line-height: 1.2; font-weight: 600; color: #1d1d1f; letter-spacing: -.01em; }
    .skda-dr-amount { flex: none; white-space: nowrap; font-size: 24px; font-weight: 600; color: #1d1d1f; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

    /* photo: the loupe replaces hover zoom-in (the photo stays still; click still opens the viewer) */
    html.skda-pdpA .productView-images .skda-zoomwrap > img { transform: none !important; }
    html.skda-pdpA .productView-images .skda-zoomwrap.skda-loupe-on { cursor: none; }
}
/* "Product description": one hide/reveal row - the buy card on desktop (>= 1261px), in place of
   the description on phones (skda-retail-107.js moves the one element) */
.skda-a-reveal { margin: 24px 0 20px; border-top: 1px solid #d2d2d7; border-bottom: 1px solid #d2d2d7; font-family: Roboto, sans-serif; }
.skda-a-reveal-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 2px;
    border: 0; background: none; cursor: pointer; font: 500 16px Roboto, sans-serif; color: #1d1d1f;
}
.skda-a-reveal-btn i { position: relative; width: 14px; height: 14px; flex: none; }
.skda-a-reveal-btn i::before, .skda-a-reveal-btn i::after {
    content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px;
    background: #1d1d1f; transition: transform .3s ease;
}
.skda-a-reveal-btn i::after { transform: rotate(90deg); }
.skda-a-reveal.open .skda-a-reveal-btn i::after { transform: rotate(0deg); }
.skda-a-reveal-body { height: 0; overflow: hidden; transition: height .35s ease; }
.skda-a-reveal.open .skda-a-reveal-body {
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .25) transparent;
}
.skda-a-reveal-inner { padding: 0 2px 22px; font-size: 14px; line-height: 1.6; color: #424245; }
.skda-a-reveal-inner h4 { margin: 14px 0 4px; font-size: 14px; font-weight: 600; color: #1d1d1f; text-transform: none; letter-spacing: 0; }
.skda-a-reveal-inner h4:first-child { margin-top: 0; }
.skda-a-reveal-inner p { margin: 0; }

/* ---- 4b. phone product page (<= 800px; Tyson, 2026-10-16) ----
   Breadcrumbs above the photo on ONE line (the trail is long), opened scrolled to the end so the
   nearest category shows, swipe for the rest, a fade where there is more. The description is the
   same "+" reveal (15px body here, no height cap - the page scrolls). Thumbnails -> Configure Order
   -> service cards -> Product description an even 24px apart; the white (invisible) SKU line under
   the cards keeps its markup but no longer takes 42px of space. */
.skda-m-bc { display: none; }
@media (max-width: 800px) {
    html.skda-pdpA .skda-a-reveal { display: block; margin: 24px 0 8px !important; }
    html.skda-pdpA .productView-description { display: none !important; }
    .skda-a-reveal-inner { font-size: 15px; }
    .skda-a-reveal-inner h4 { margin-top: 16px; font-size: 15px; }
    .skda-m-bc { display: block; position: relative; margin: 0; padding: 14px 0 12px; font: 400 12px/1.4 Roboto, sans-serif; }
    .skda-m-bc ol { list-style: none; margin: 0; padding: 0 24px; display: flex; white-space: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .skda-m-bc ol::-webkit-scrollbar { display: none; }
    .skda-m-bc li, .skda-m-bc a { color: #a1a1a6; text-decoration: none; flex: none; }
    .skda-m-bc li + li::before { content: "/"; margin: 0 6px; color: #d2d2d7; }
    .skda-m-bc.fade-l::before, .skda-m-bc.fade-r::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none; z-index: 1; }
    .skda-m-bc.fade-l::before { left: 0; background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)); }
    .skda-m-bc.fade-r::after { right: 0; background: linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)); }
    html.skda-pdpA body .productView-images { margin-bottom: 0 !important; }
    html.skda-pdpA body dl.productView-info { margin-top: 0 !important; margin-bottom: 0 !important; }
    html.skda-pdpA body .productView-info .sk-cfg-btn { margin: 24px 0 !important; }
    html.skda-pdpA body .productView-info .skda-twoColSection { margin-bottom: 0 !important; }
    html.skda-pdpA body .productView-section .productView-details.product-data { margin-bottom: 0 !important; }
    html.skda-pdpA body dl.productView-info > dt.productView-info-name,
    html.skda-pdpA body dl.productView-info > dd.productView-info-value {
        position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
        clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important;
    }
}

#skda-loupe {
    position: fixed; z-index: 60; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 18px;
    pointer-events: none; background-color: #fff; background-repeat: no-repeat; border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 12px 32px rgba(0, 0, 0, .25);
    opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s;
}
#skda-loupe.on { opacity: 1; transform: scale(1); }
#skda-target {
    position: fixed; z-index: 59; width: 136px; height: 136px; margin: -68px 0 0 -68px; border-radius: 8px;
    pointer-events: none; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .15);
    opacity: 0; transition: opacity .15s;
}
#skda-target.on { opacity: 1; }

/* ---- 7. phone photo viewer (<= 800px): tap the photo, pinch to zoom ----
   Behaviour in skda-retail-107.js; the stock press-and-hold zoom never shows on phones. */
@media (max-width: 800px) {
    .productView-image .easyzoom-flyout { display: none !important; }
    .productView-image, .productView-image a { cursor: pointer; -webkit-touch-callout: none; }
}
#skda-mlb { position: fixed; inset: 0; z-index: 100000; touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; }
#skda-mlb .m-bg { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 340ms ease; }
#skda-mlb.on .m-bg { opacity: .94; }
#skda-mlb img { position: absolute; left: 0; top: 0; display: block; max-width: none; transform-origin: 0 0; -webkit-user-drag: none; pointer-events: none; }
#skda-mlb .m-ui { opacity: 0; transition: opacity 340ms ease; }
#skda-mlb.on .m-ui { opacity: 1; }
#skda-mlb.zoomed .m-bar { opacity: 0; pointer-events: none; }
#skda-mlb button {
    position: absolute; z-index: 2; border: 0; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#skda-mlb button:active { background: rgba(255, 255, 255, .28); }
#skda-mlb button svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#skda-mlb .m-x { top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; }
#skda-mlb .m-bar {
    position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    display: flex; align-items: center; gap: 14px; transition: opacity .2s ease;
}
#skda-mlb .m-bar button { position: static; width: 36px; height: 36px; }
#skda-mlb .m-bar button svg { width: 16px; height: 16px; }
#skda-mlb .m-n { min-width: 44px; text-align: center; color: rgba(255, 255, 255, .8); font: 500 13px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; }

/* "See Examples" button + popup in the order form (Tyson, 2026-10-22; retail-port/PENDING-NEXT-ALL-STORES.md item 3).
   ALL THREE stores. Behaviour in skda-see-examples.js. Built from retail-port/prototypes/see-examples-popup-mock-2026-10-22.js.
   The button selector is doubled + !important: the order form's label rules override plain ones. */
html body .productView-options label.form-label a.skda-see-ex.skda-see-ex { display: inline-flex !important; align-items: center !important; gap: 6px !important; vertical-align: middle !important; margin: -3px 0 0 10px !important; padding: 5px 12px 5px 10px !important; border-radius: 999px !important; background: rgba(0,113,227,.08) !important; color: #0071e3 !important; font: 500 13px/1.2 Roboto, sans-serif !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; transition: background-color .15s !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html body .productView-options label.form-label a.skda-see-ex.skda-see-ex:hover { background: rgba(0,113,227,.16) !important; }
html body .productView-options label.form-label a.skda-see-ex.skda-see-ex:active { background: rgba(0,113,227,.22) !important; }
html body .productView-options label.form-label a.skda-see-ex.skda-see-ex:focus-visible { outline: 2px solid #0071e3 !important; outline-offset: 2px !important; }
html body .productView-options label.form-label a.skda-see-ex.skda-see-ex svg { width: 14px !important; height: 14px !important; flex: none !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; }
html body .productView-options label.form-label a.skda-see-ex.skda-see-ex svg * { fill: none !important; stroke: currentColor !important; }
@media (max-width: 800px) { html body .productView-options label.form-label a.skda-see-ex.skda-see-ex { display: flex !important; width: max-content !important; margin: 8px 0 2px !important; } }
#skda-info { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; font-family: Roboto, sans-serif; }
#skda-info.on { opacity: 1; }
#skda-info .i-card { position: relative; width: 100%; max-width: 760px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 18px; padding: 34px 40px 36px; box-shadow: 0 24px 60px rgba(0,0,0,.25); transform: scale(.97); transition: transform .2s ease; }
#skda-info.on .i-card { transform: none; }
#skda-info h3 { margin: 0 48px 18px 0; font: 600 23px/1.2 Roboto, sans-serif; color: #1d1d1f; letter-spacing: -.01em; text-transform: none; }
#skda-info h4 { margin: 22px 0 6px; font: 600 16px/1.3 Roboto, sans-serif; color: #1d1d1f; text-transform: none; letter-spacing: 0; }
#skda-info p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #424245; }
#skda-info img { display: block; width: 100%; height: auto; border-radius: 10px; margin: 10px 0 4px; }
#skda-info .i-x { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f5f5f7; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#skda-info .i-x:hover { background: #e8e8ed; }
#skda-info .i-x svg { width: 16px; height: 16px; stroke: #1d1d1f; stroke-width: 2; fill: none; stroke-linecap: round; }
#skda-info .i-done { display: block; width: 100%; height: 48px; margin: 26px 0 0; border: 0; border-radius: 12px; background: #0071e3; color: #fff; font: 500 16px Roboto, sans-serif; cursor: pointer; }
#skda-info .i-done:hover { background: #0077ed; }
@media (min-width: 801px) { #skda-info .i-card { max-width: 1080px; padding: 38px 48px 40px; } #skda-info img { width: auto; max-width: 100%; max-height: calc(100vh - 250px); object-fit: contain; margin-left: auto; margin-right: auto; } #skda-info .i-card.i-imgonly { width: auto; } }
@media (min-width: 601px) and (max-width: 800px) { #skda-info img { width: auto; max-width: 100%; object-fit: contain; margin-left: auto; margin-right: auto; } #skda-info .i-card.i-imgonly { width: auto; } }
@media (max-width: 800px) { #skda-info { padding: 12px; align-items: flex-end; } #skda-info .i-card { padding: 26px 22px calc(26px + env(safe-area-inset-bottom)); max-height: 88vh; } #skda-info h3 { font-size: 20px; } }

/* ==================================================================== 1.0.12 load stability (Tyson, 2026-10-26)
   ALL THREE stores (EU/CA RETAIL 1.0.12, B2B 2.7.4). Approved in his tab on live CA (mock with/without, measured).

   1. NAV: the header's contents stay invisible until the nav scripts have finished building it - logo link, Shop by
      Bike pill, account icon painted white (nav-invert) on desktop; html.skda-mnav on phones - then fade in once
      (.2s). The black bar itself shows straight away. Without this the raw Cornerstone header showed and was rebuilt
      (~200 DOM changes, then icon colours, then the pill). Safety net: shown after 3s whatever happens. The closed
      mega-menu panel is left out (it has its own open/close). An animation, not a transition, so the nav's own
      transitions (scroll arrows etc.) are never overridden. */
@media (min-width: 801px) {
    header.header:not(:has(#skda-nav-logo-link)) > :not(#skda-mega-panel),
    header.header:not(:has(#skda-sbb2-nav)) > :not(#skda-mega-panel),
    header.header:not(:has(#skda-account-icon svg[style*="255, 255, 255"])) > :not(#skda-mega-panel) {
        opacity: 0;
        animation: skdaNavFallback 0s 3s forwards;
    }
    header.header:has(#skda-nav-logo-link):has(#skda-sbb2-nav):has(#skda-account-icon svg[style*="255, 255, 255"]) > :not(#skda-mega-panel) {
        animation: skdaNavIn .2s ease;
    }
}
@media (max-width: 800px) {
    html:not(.skda-mnav) header.header > * { opacity: 0; animation: skdaNavFallback 0s 3s forwards; }
    html.skda-mnav header.header > * { animation: skdaNavIn .2s ease; }
}
@keyframes skdaNavFallback { to { opacity: 1; } }
@keyframes skdaNavIn { from { opacity: 0; } to { opacity: 1; } }

/* 2. SHOP BY BIKE BAND: the homepage widget holds an empty <div id="skda-shop-by-bike"> that widget2.js fills ~0.5-1s
      after first paint (then grows 16px more), pushing the partners banner down. Reserve the FINAL height per width
      (measured on live CA + B2B 2026-10-26; the band is 234px at >= 900px on both). */
#skda-shop-by-bike { min-height: 446px; }
@media (min-width: 481px) { #skda-shop-by-bike { min-height: 427px; } }
@media (min-width: 601px) { #skda-shop-by-bike { min-height: 252px; } }
@media (min-width: 801px) { #skda-shop-by-bike { min-height: 254px; } }
@media (min-width: 900px) { #skda-shop-by-bike { min-height: 234px; } }

/* ---- 1.0.13 page shift on first load (Tyson, 2026-10-27; retail-port/PENDING-NEXT-ALL-STORES-2.md items 1-3) ----
   ALL THREE stores (EU / CA RETAIL 1.0.13, B2B 2.7.5). Mocked in his CA tabs, measured with a layout-shift observer:
   product page phone 1.02 -> 0, desktop 1.12 -> 0.001; phone home 0.17 -> 0.03; category banner 0.87 -> 0.002.
   The SKDA scripts are `defer`, so the browser paints the page before the configurator adds the title bar and
   skda-retail-107.js builds layout A / the phone breadcrumbs. These rules give the first paint the space those
   take, and hold the parts they rearrange hidden (visibility, no motion) until they are done.
   Product pages are recognised by BigCommerce's head meta (present before anything paints - a :has(form) test
   matched too late, the page paints before the form is parsed). html.skda-no-bar = the configurator found no
   order form (skda-pdp-configurator.js, 1.0.13), so no bar is coming. Every hold and reservation also lets go
   on its own after 3-4s in case a script never runs. */

/* phone home: the old quick-category list painted (275px) and then hid once skda-mobile-nav.js ran */
.navPages-list--quickNav { display: none !important; }

/* category / search: the footer sat half-way up until Searchspring filled its mount */
#searchspring-content:empty { min-height: 100vh; }

@keyframes skdaResvOff { to { margin-bottom: 0; padding-top: 0; } }
@keyframes skdaHoldOff { to { visibility: visible; } }

/* the title bar's space, as the header's margin. NOT on div.body: desktop-nav.css forces its margin-top to 0
   !important, and space reserved INSIDE .body still scores (.body's own box moves when the bar arrives) */
@media (max-width: 1260px) {
    html:has(meta[property="og:type"][content="product"]):not(.skda-no-bar) body:not(.skda-bar-on) > header.header {
        margin-bottom: 75px;
        animation: skdaResvOff 0s 4s forwards;
    }
}
@media (max-width: 800px) {
    html:has(meta[property="og:type"][content="product"]):not(.skda-no-bar) body:not(.skda-bar-on) > header.header {
        margin-bottom: 78px;
    }
    /* the phone breadcrumbs (43px). Padding on .productView's parent: a margin on .productView collapses into
       the header's and you get the larger of the two, not both */
    html:has(meta[property="og:type"][content="product"]):not(.skda-no-bar) div:has(> .productView):not(:has(> .skda-m-bc)) {
        padding-top: 43px;
        animation: skdaResvOff 0s 4s forwards;
    }
}

/* phones + tablets: the details column (title/price go into the bar, the options into the drawer, the description
   opens) and everything under it, held until layout A is built. The photo and the bar show from the first paint. */
@media (max-width: 1260px) {
    html:has(meta[property="og:type"][content="product"]):not(.skda-no-bar):not(.skda-pdpA) :is(.productView > .productView-section + .productView-section,
        .productView ~ *, div:has(> .productView) ~ *, #ReviewsWidget, footer.footer) {
        visibility: hidden;
        animation: skdaHoldOff 0s 3s forwards;
    }
}

/* desktop: the page under the header held until layout A replaces the old layout (the bar is never shown - layout A
   hides it), then what sits under the photos held until the gallery stack is built (it grows the column ~150px) */
@media (min-width: 1261px) {
    html:has(meta[property="og:type"][content="product"]):not(.skda-no-bar):not(.skda-pdpA) div.body,
    html:has(meta[property="og:type"][content="product"]):not(.skda-no-bar):not(.skda-pdpA) .sk-bar {
        visibility: hidden;
        animation: skdaHoldOff 0s 3s forwards;
    }
    html:has(meta[property="og:type"][content="product"]):not(:has(.skda-stack)) :is(#ReviewsWidget, .productView ~ *, div:has(> .productView) ~ *, footer.footer) {
        visibility: hidden;
        animation: skdaHoldOff 0s 3s forwards;
    }
}

/* item 1: phone licensed badge sat over the breadcrumbs. From 801px the sticky photo column anchors it (and the
   gallery moves it into the photo); on phones the column is static, so the badge anchored to a box that starts at
   the breadcrumbs. top: auto !important beats pdp-drawer.css's desktop sticky offset
   (.skda-bar-on .productView-images { top: ... !important }, 0,2,0), which would push the photos down 159px. */
@media (max-width: 800px) {
    .productView .productView-images.productView-images { position: relative; top: auto !important; }
}

/* item 3: category description banners (a <picture> with no width/height) reserve their height from the file name
   of the <source> that is showing. Covers new banners too while they keep the -1080x1350 / -2500x1000 naming.
   767/768 = the banners' own media queries. */
@media (max-width: 767px) {
    picture:has(> source[srcset*="-1080x1350."]) > img { aspect-ratio: 1080 / 1350; }
    picture:has(> source[srcset*="infographic-banner-mobile."]) > img { aspect-ratio: 1000 / 1290; }   /* The Vault */
}
@media (min-width: 768px) {
    picture:has(> source[srcset*="-2500x1000."]) > img { aspect-ratio: 2500 / 1000; }
    picture:has(> source[srcset*="infographic-banner-desktop."]) > img { aspect-ratio: 2500 / 833; }   /* The Vault */
}

/* ==== SWATCH ROW (CA, from its live SWATCH-ROW-1.0.4, Tyson 2026-10-19) ====
   Colour swatches showed ONLY the last colour after a reload: the list is a Slick carousel
   (data-slick on .swatch-slider) and when Slick initialises before the column has its width it
   sizes every slide 0px, so all the swatches pile up on one spot. Lists of 8 or fewer
   (.swatch-without-slider-desktop, never scrolling above 550px) ignore Slick's measurements there
   and sit in a normal wrapping row; phones keep the carousel. Same rules as au-theme/build_au_swatch.py. */
@media (min-width: 551px) {
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-list { overflow: visible; }
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-track {
        display: flex !important; flex-wrap: wrap; width: auto !important; transform: none !important;
    }
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-track::before,
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-track::after { display: none; }
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-slide { float: none; width: auto !important; }
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-cloned,
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-arrow { display: none !important; }
}