/* 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 */
}

/* ---- 1.0.14 load stability (Tyson, 2026-10-29; retail-port/PENDING-NEXT-ALL-STORES-2.md items 4, 5, 5b, 9, 10, 11) ----
   ALL THREE stores. Mocked cold on live CA 1.0.13 with a layout-shift observer: cart desktop 0.97 -> 0, cart 1280 -> 0,
   cart phone -> 0.002; product page phone 0.095 -> 0 (kit and seat cover); search /shop/ desktop 0.13 -> 0, phone
   0.13 -> 0.04; brand + category desktop 0.07-0.10 -> 0. skdaHoldOff is the 1.0.13 keyframe (same stylesheet). */

/* item 9: Searchspring empties the search heading and refills it ~50ms later ("Search Results" -> "" -> "Search
   results for ..."); for a frame it had no height and the page jumped 48px up and back. A zero-width space keeps
   one line box while it is empty. */
h1.page-heading:empty::before { content: "\200b"; }

/* item 10: listings float the filter column (#faceted-search-container) left of the grid. While Searchspring has
   not filled it, it is 0px tall, so the floated grid sat in its place and then slid 261px right. 1px of height
   is enough for the grid to start beside it. */
@media (min-width: 801px) {
    #faceted-search-container.page-sidebar { min-height: 1px; }
}

/* item 11: on Searchspring listings the footer stays hidden until the results are in (body.ss__loaded), so a
   short result list never pulls it up past the 100vh the empty mount reserves (1.0.13). */
html:has(#searchspring-content) body:not(.ss__loaded) footer.footer {
    visibility: hidden;
    animation: skdaHoldOff 0s 3s forwards;
}

/* items 4 / 5 / 5b: Searchspring's recommendations carousel (cart, product page) paints for a frame as an unstyled
   list ~6,000px tall, then collapses to the carousel (352px at 1920, 283 at 1280, 277 on a phone). It, what
   follows it (the reviews widget on a product page) and the footer stay hidden until skda-stability-1014.js adds
   html.skda-recs-ready (carousel settled, or 2.5s after load when nothing renders). Shown at their final size,
   nothing visible moves. */
html:not(.skda-recs-ready):has(script[type="searchspring/personalized-recommendations"]) :is(div[searchspring-recommend],
    script[type="searchspring/personalized-recommendations"] ~ *, footer.footer) {
    visibility: hidden;
    animation: skdaHoldOff 0s 6s forwards;
}

/* ---- 1.0.15 Searchspring colour filter (Tyson, 2026-11-02; carried from the AU theme's _body.scss) ----
   Palette swatches with no colour mapped in Searchspring. Only AU's old theme had these two, so EU, CA and B2B
   showed them uncoloured. */
.ss__palette__block--neon-yellow .ss__palette__color {
    background-color: #f3ff00;
}

.ss__palette__block--flo .ss__palette__color {
    background-color: #c8d62b;
}

/* ---- AU 1.0.16 (Tyson, 2026-11-03; AU-MIGRATION-COMPARISON.md sections 12 + 13) ----
   AU's menu is wider than EU/CA's, and Wholesale/Team accounts also get Trade & Wholesale. Measured on the preview with
   that item showing: the row met the search box below ~1600px.
   <=1700px the search box is an icon that opens on focus. Closed, the input is stretched clear over the icon, so a
   click lands in it with no script (1.0.17: without that it sat outside the 34px box and the icon took the click). */
@media (min-width: 801px) and (max-width: 1700px) {
    header.header nav.navUser .navUser-item:has(> #skda-nav-search-pill) {
        position: relative; flex: 0 0 34px; width: 34px; height: 34px; align-self: center;
    }
    #skda-nav-search-pill {
        position: absolute !important; right: 0; top: 0; z-index: 5; overflow: hidden;
        width: 34px; height: 34px !important; padding: 0 8px !important;
    }
    #skda-nav-search-pill:not(:focus-within) input[name=search_query] {
        position: absolute !important; left: 0; top: 0; width: 100% !important; height: 100% !important;
        margin: 0 !important; padding: 0 !important; cursor: pointer; opacity: 0;
    }
    #skda-nav-search-pill:focus-within { width: 260px; overflow: visible; background: #1d1d1f; }
}
/* tighter links below the large screens; two-line labels on tablets, the only way all 7 fit there */
@media (min-width: 801px) and (max-width: 1439px) {
    #menu.navPages-container .navPages-list:not(.navPages-list--user) { gap: 0; }
    #menu.navPages-container .navPages-item > a.navPages-action {
        padding-left: clamp(4px, calc(1.4vw - 8.5px), 13px) !important;
        padding-right: clamp(4px, calc(1.4vw - 8.5px), 13px) !important;
    }
}
@media (min-width: 801px) and (max-width: 1100px) {
    #menu.navPages-container .navPages-item > a.navPages-action {
        white-space: normal !important; max-width: 88px; line-height: 1.15; text-align: center;
        padding-top: 6px !important; padding-bottom: 6px !important;
    }
}

/* the Gorgias chat bubble sits at z-index 2147483636, over the phone menu and the order form's footer */
body.sk-cfg-open #chat-button, body.has-activeNavPages #chat-button { display: none !important; }

/* Afterpay line: skda-afterpay-au.js puts it under the price (desktop card) or above Order Now */
.skda-afterpay { font-size: var(--sk-fs-small); line-height: 1.3; color: var(--sk-ink-2); margin: 6px 0 0; }
.skda-afterpay .afterpay-paragraph { margin: 0; }
.skda-afterpay a { margin: 0 !important; color: inherit; }
.skda-afterpay img { vertical-align: middle; height: 18px; width: auto; }
.skda-afterpay--btn { text-align: center; margin: 0 0 10px; }
/* 1.0.17 (Tyson): closer to the price, clear of the grey boxes. 6px under the price (the amount's margin-bottom is 18px),
   16px above the boxes (collapses with .skda-a-svc's 2px) */
.skda-afterpay:not(.skda-afterpay--btn) { margin: -12px 0 16px; }

/* ==== 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; }
}

/* ==== 1.2.0 order form (Tyson, 2026-11-04) - retail-port/PENDING-NEXT-ALL-STORES-2.md items 18 + 21, ALL stores.
   Classes are set by assets/js/skda-order-form-120.js (same rules as the approved mocks in retail-port/mocks/, in their
   run order; the stacked :not(#sk-nN) only lift specificity past the theme's own !important rules). ==== */

/* --- 18.1 aftermarket plastics: No / Yes, box only on Yes --- */
#sk-amp-q { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
#sk-amp-q > .form-label--alternate { grid-column: 1 / -1; }
#sk-amp-q > input.form-radio { position: absolute; opacity: 0; pointer-events: none; }
#sk-amp-q > label.form-label:not(.form-label--alternate) { width: auto; margin-right: 0; justify-content: center; }
#sk-amp-q + .form-field { margin-top: -17px !important; }
#sk-amp-q + .form-field > label.form-label { font-size: var(--sk-fs-small, 14px) !important; }
@media (min-width: 801px) {
  #sk-amp-q + .form-field { margin-top: -48px !important; }
  #sk-amp-q + .form-field > label.form-label { font-size: var(--sk-fs-body, 16px) !important; }
}

/* --- 18.2 / 18.3 Design Proof + Laminate --- */
@media (max-width: 800px) {
  .sk-of-lam { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
  .sk-of-lam > .form-label--alternate { grid-column: 1 / -1; }
  .sk-of-lam > input.form-radio { position: absolute; opacity: 0; pointer-events: none; }
  .sk-of-lam > input.form-radio + label.form-label { width: auto !important; margin: 0 !important; flex-direction: column;
      justify-content: center; align-items: center; text-align: center; gap: 2px; padding: 8px 6px !important;
      min-height: 64px; font-size: 13px !important; line-height: 1.2; }
  .sk-of-lam > input.form-radio + label.form-label .sk-price { display: block; margin: 0 !important; font-size: var(--sk-fs-caption, 12px) !important; }
  .sk-of-dp > input.form-radio + label.form-label { font-size: var(--sk-fs-small, 14px) !important; line-height: 1.3;
      padding-top: 11px !important; padding-bottom: 11px !important; }
  .sk-of-dp .sk-pg-note { font-size: 13px !important; line-height: 1.4; }
}
@media (min-width: 801px) {
  .sk-of-lam { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
  .sk-of-lam > .form-label--alternate { grid-column: 1 / -1; }
  .sk-of-lam > input.form-radio { position: absolute; opacity: 0; pointer-events: none; }
  .sk-of-lam > input.form-radio + label.form-label { width: auto !important; margin: 0 !important; flex-direction: column;
      justify-content: center; align-items: center; text-align: center; gap: 4px; padding: 12px 10px !important;
      min-height: 88px; line-height: 1.25; }
  .sk-of-lam > input.form-radio + label.form-label .sk-price { display: block; margin: 0 !important; }
}

/* --- 18.2 phone type: nothing at 11px (replaces pdp-drawer.css "smaller type") --- */
@media (max-width: 800px) {
  html .sk-pg input.form-radio + label.form-label,
  html .sk-pg input.form-checkbox + label.form-label,
  html .sk-pg.sk-addons input.form-radio + label.form-label { font-size: var(--sk-fs-small, 14px) !important; line-height: 1.3; }
  html .sk-pg-note, html .sk-q .mobile-infotip { font-size: 13px !important; line-height: 1.4; }
  html .sk-slide .sk-name, html .sk-pg label .sk-name { font-size: 13px !important; }
  html .sk-sum-row, html .sk-sum-row dt, html .sk-sum-row dd, html .sk-sum-price span { font-size: 13px !important; }
  html .sk-price, html .sk-slide .sk-price, html .sk-pg label .sk-price { font-size: var(--sk-fs-caption, 12px) !important; }
  html .sk-pg-eyebrow { font-size: var(--sk-fs-caption, 12px) !important; }
  html .sk-q .form-label--alternate a, html .sk-q .form-label--alternate button { font-size: var(--sk-fs-caption, 12px) !important; }
  html .skpick-font .n { font-size: var(--sk-fs-caption, 12px) !important; }
  html #skviz .skviz-ft { font-size: var(--sk-fs-caption, 12px) !important; }
}

/* --- 18.3 desktop: option buttons as one row of tiles, 88px --- */
@media (min-width: 801px) {
  .sk-of-row { display: grid !important; grid-template-columns: repeat(var(--sk-n, 2), minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; align-items: stretch; }
  .sk-of-row > :not(input):not(label.form-label:not(.form-label--alternate)) { grid-column: 1 / -1; }
  .sk-of-row > input.form-radio { position: absolute; opacity: 0; pointer-events: none; }
  .sk-of-row > input.form-radio + label.form-label { width: auto !important; margin: 0 !important; flex-direction: column;
      justify-content: center; align-items: center; text-align: center; gap: 4px; padding: 12px 14px !important;
      min-height: 88px; height: auto !important; line-height: 1.25; }
  .sk-of-row > input.form-radio + label.form-label .sk-price { display: block; margin: 0 !important; }
  #sk-amp-q + .form-field { margin-top: -36px !important; }
  html body .sk-pg > .sk-q ~ .sk-q:not(#sk-amp-q + .form-field) { margin-top: 14px !important; }
}

/* --- 18.1 number group (Number on Graphics, Number Style, colours, preview) --- */
@media (min-width: 801px) {
  html body .sk-pg.sk-viz-pg > .sk-q.skviz-styleq:not(#sk-none), html body .sk-pg.sk-viz-pg > .sk-q.skviz-colq:not(#sk-none),
  html body .sk-pg.sk-viz-pg.sk-multi > #skviz { margin-top: -30px !important; }
}
@media (max-width: 800px) {
  html body .sk-pg.sk-viz-pg > .sk-q.skviz-styleq:not(#sk-none), html body .sk-pg.sk-viz-pg > .sk-q.skviz-colq:not(#sk-none),
  html body .sk-pg.sk-viz-pg.sk-multi > #skviz { margin-top: -12px !important; }
}

/* --- 18.1 Number Style: Same as Product Image / Customise --- */
#sk-ns-q { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
#sk-ns-q > .form-label--alternate { grid-column: 1 / -1; }
#sk-ns-q > input.form-radio { position: absolute; opacity: 0; pointer-events: none; }
#sk-ns-q > label.form-label:not(.form-label--alternate) { width: auto; margin-right: 0; justify-content: center; }
#sk-ns-q ~ .skviz-styleq .skpick-font.same { display: none !important; }
html body .sk-pg.sk-viz-pg > #sk-ns-q + .sk-q.skviz-styleq:not(#sk-none) > label.form-label--alternate { font-size: var(--sk-fs-small, 14px) !important; }
@media (max-width: 800px) {
  html body .sk-pg.sk-viz-pg > #sk-ns-q.sk-q:not(#sk-none) { margin-top: -12px !important; }
  html body .sk-pg.sk-viz-pg > #sk-ns-q + .sk-q.skviz-styleq:not(#sk-none) { margin-top: -12px !important; }
  html body .sk-pg.sk-viz-pg > #sk-ns-q > label.form-label:not(.form-label--alternate) { font-size: var(--sk-fs-small, 14px) !important; margin-bottom: 0 !important; }
}
@media (min-width: 801px) {
  #sk-ns-q > label.form-label:not(.form-label--alternate) { margin: 0 !important; min-height: 88px; height: auto !important; }
  html body .sk-pg.sk-viz-pg > #sk-ns-q.sk-q:not(#sk-none) { margin-top: -30px !important; }
  html body .sk-pg.sk-viz-pg > #sk-ns-q + .sk-q.skviz-styleq:not(#sk-none) { margin-top: -36px !important; }
  html body .sk-pg.sk-viz-pg > #sk-ns-q + .sk-q.skviz-styleq:not(#sk-none) > label.form-label--alternate { font-size: var(--sk-fs-body, 16px) !important; }
}

/* --- 18.2 number-step headings = the other questions (17 phone / 24 desktop); Number Style 14 / 16 --- */
@media (max-width: 800px) { html body .sk-pg.sk-viz-pg > .sk-q:not(#sk-ns-q + .skviz-styleq) > label.form-label--alternate { font-size: 17px !important; } }
@media (min-width: 801px) { html body .sk-pg.sk-viz-pg > .sk-q:not(#sk-ns-q + .skviz-styleq) > label.form-label--alternate { font-size: var(--sk-fs-heading, 24px) !important; } }
html body .sk-pg.sk-viz-pg > #sk-ns-q.sk-q:not(#sk-none) > label.form-label--alternate { font-size: var(--sk-fs-small, 14px) !important; }
@media (min-width: 801px) {
  html body .sk-pg.sk-viz-pg > #sk-ns-q.sk-q:not(#sk-none) > label.form-label--alternate { font-size: var(--sk-fs-body, 16px) !important; }
}

/* --- 18.4 spacing system: one value per gap --- */
html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2) > label.form-label--alternate,
html body .sk-cfg-drawer .sk-pg > #sk-amp-q + .form-field:not(#sk-n1):not(#sk-n2) > label.form-label { margin-bottom: var(--sk-head-gap) !important; }
html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2) > input + label.form-label { margin: 0 0 var(--sk-opt-gap) 0 !important; }
html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2) > label.form-label:last-of-type:not(.form-label--alternate) { margin-bottom: 0 !important; }
html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2):is(#sk-amp-q, #sk-ns-q, .sk-of-lam) > input + label.form-label { margin-bottom: 0 !important; }
html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2):is(#sk-amp-q, #sk-ns-q, .sk-of-lam) { column-gap: var(--sk-opt-gap) !important; row-gap: 0 !important; }
@media (min-width: 801px) {
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2) > input + label.form-label { margin-bottom: 0 !important; }
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2) { column-gap: var(--sk-opt-gap) !important; row-gap: 0 !important; }
}
html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2) > .skring { margin-top: 0 !important; }
@media (max-width: 800px) { html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2) > .skring { margin-bottom: 14px !important; } }
html body .sk-cfg-drawer .sk-pg > .skviz-colq:not(#sk-n1):not(#sk-n2) > select.skpick-hide { position: absolute !important; }
html body .sk-cfg-drawer .sk-pg > .skviz-colq:not(#sk-n1):not(#sk-n2) > .skpick { margin-top: 0 !important; }
html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2) ~ .sk-q { margin-top: var(--sk-q-extra) !important; }
html body .sk-cfg-drawer .sk-pg > :is(#sk-amp-q + .form-field, #sk-ns-q, #sk-ns-q + .skviz-styleq, .skviz-colq, #skviz):not(#sk-n1):not(#sk-n2) { margin-top: var(--sk-follow) !important; }
.sk-cfg-drawer { --sk-head-gap: 8px; --sk-opt-gap: 8px; --sk-q-extra: 0px; --sk-follow: -12px; }
@media (min-width: 801px) {
  .sk-cfg-drawer { --sk-head-gap: 14px; --sk-opt-gap: 12px; --sk-q-extra: 14px; --sk-follow: -34px; }
  html body .sk-cfg-drawer .options > .sk-pg ~ .sk-pg:not(#sk-n1):not(#sk-n2) { padding-top: calc(64px - 25px) !important; }
  html body .sk-cfg-drawer .sk-pg > .customize-logos:not(#sk-n1):not(#sk-n2) { margin-top: var(--sk-follow) !important; }
  html body .sk-cfg-drawer .sk-pg > .customize-logos:not(#sk-n1):not(#sk-n2) > .form-field + .form-field { margin-top: 16px !important; margin-bottom: 0 !important; }
  html body .sk-cfg-drawer .sk-pg > .customize-logos:not(#sk-n1):not(#sk-n2) > .form-field:last-child { margin-bottom: 0 !important; }
  html body .sk-cfg-drawer .sk-pg > .customize-logos:not(#sk-n1):not(#sk-n2) > .form-field > .form-label--alternate { margin-bottom: var(--sk-head-gap) !important; }
  html body .sk-cfg-drawer .sk-pg > .customize-logos:not(#sk-n1):not(#sk-n2) .form-option-wrapper > label.form-label { margin-bottom: 0 !important; }
}

/* --- 18.3 phone tiles (2 -> 2, 3 -> 3, 4 -> 2x2), 92px; an option's own message under the row (both widths) --- */
html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3) > input + label.form-label > small { display: none !important; }
html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3) > .sk-row-msg { grid-column: 1 / -1; margin: var(--sk-opt-gap) 0 0;
    font-size: 13px; line-height: 1.4; color: var(--sk-ink-2, #6e6e73); }
@media (max-width: 800px) {
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3) { display: grid !important;
      grid-template-columns: repeat(var(--sk-pn, 2), minmax(0, 1fr)); column-gap: 8px !important; row-gap: 8px !important; }
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3) > :not(input):not(label.form-label:not(.form-label--alternate)) { grid-column: 1 / -1; }
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3) > label.form-label--alternate { margin-bottom: 0 !important; }
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3) > .sk-row-msg { margin-top: 0; }
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3) > input.form-radio { position: absolute; opacity: 0; pointer-events: none; }
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3) > input.form-radio + label.form-label { width: auto !important; margin: 0 !important;
      flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 6px;
      padding: 7px 8px !important; min-height: 92px; height: auto !important; line-height: 1.25; }
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3) > input.form-radio + label.form-label .sk-price { display: block; margin: 0 !important; }
}

/* --- 18.3 / 18.5 phone: Mini Front Number Plate 56px tiles; bigger fork-wrap ring --- */
@media (max-width: 800px) {
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row.sk-of-mini:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) > input.form-radio + label.form-label { min-height: 56px; gap: 4px; }
  html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4):has(> .skring.pic) { overflow-x: clip; }
  html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) > .skring.pic { width: 150%; margin-left: -25% !important; margin-right: 0 !important; height: 184px;
      -webkit-mask-image: linear-gradient(90deg, transparent 16.7%, #000 23%, #000 77%, transparent 83.3%);
              mask-image: linear-gradient(90deg, transparent 16.7%, #000 23%, #000 77%, transparent 83.3%); }
  html body .sk-cfg-drawer .skring.pic .skring-f:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) { height: 172px; padding: 5px 5px 7px; gap: 4px; }
  html body .sk-cfg-drawer .skring.pic .skring-n:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) { font-size: 12px; line-height: 1.2; max-height: 29px; }
  html body .sk-cfg-drawer .skring.pic .skring-p:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) { font-size: 12px; }
  html body .sk-cfg-drawer .skring.pic .skring-pic em:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) { font-size: 12px; }
}

/* --- 18.5 ring photos never native-drag; grab cursor on a mouse --- */
.skring img { -webkit-user-drag: none; user-drag: none; }
@media (hover: hover) and (pointer: fine) {
  .skring, .skring .skring-f { cursor: grab !important; }
  .skring.sk-grabbing, .skring.sk-grabbing .skring-f { cursor: grabbing !important; }
}

/* --- 18.3 prices on their own bottom row; picked tiles never move --- */
html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) > input.form-radio + label.form-label:not(.form-label--alternate):has(> .sk-price) {
    display: grid !important; grid-template-rows: 1fr auto; align-items: center; justify-items: center; row-gap: 4px; }
html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) > input.form-radio + label.form-label:not(.form-label--alternate) > .sk-price {
    grid-row: 2; display: block; margin: 0 !important; }
@media (max-width: 800px) {
  html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) > input.form-radio + label.form-label:not(.form-label--alternate):has(> .sk-price) { row-gap: 6px; }
  html body .sk-cfg-drawer .sk-pg > .sk-q.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) > input.form-radio:checked + label.form-label:not(.form-label--alternate) { padding: 6px 7px !important; }
}
@media (min-width: 801px) {
  html body .sk-cfg-drawer .sk-pg > .sk-q:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) > input.form-radio:checked + label.form-label:not(.form-label--alternate) { padding: 11px 13px !important; }
}

/* --- 18.6 phone step 4 (Change / Customize = Yes): two views --- */
@media (max-width: 800px) {
  .sk-cfg-drawer .sk-pg.sk-of-lpg > .sk-of-snap2 { scroll-snap-align: start !important; scroll-margin-top: 20px; }
  .sk-cfg-drawer .sk-pg.sk-of-lpg > :not(.sk-of-snap2) { scroll-snap-align: none !important; }
}

/* --- 18.1 Change / Customize request box text sizes --- */
html body .sk-cfg-drawer .sk-pg > .customize-logos .form-label--alternate.sk-of-lhead:not(#sk-n1):not(#sk-n2):not(#sk-n3) { font-size: var(--sk-fs-small, 14px) !important; }
html body .sk-cfg-drawer .sk-pg > .customize-logos .form-label--alternate.sk-of-lhead:not(#sk-n1):not(#sk-n2):not(#sk-n3) > small { font-size: inherit !important; }
@media (min-width: 801px) {
  html body .sk-cfg-drawer .sk-pg > .customize-logos .form-label--alternate.sk-of-lhead:not(#sk-n1):not(#sk-n2):not(#sk-n3) { font-size: var(--sk-fs-body, 16px) !important; }
  html body .sk-cfg-drawer .sk-pg > .customize-logos .form-label--alternate.sk-of-lemail:not(#sk-n1):not(#sk-n2):not(#sk-n3),
  html body .sk-cfg-drawer .sk-pg > .customize-logos .form-label--alternate.sk-of-lemail:not(#sk-n1):not(#sk-n2):not(#sk-n3) > small { font-size: var(--sk-fs-small, 14px) !important; line-height: 1.45 !important; }
}

/* --- 21 progress bar: whole 20% steps (the number itself is set in update()); red answer boxes on a missed
   required question; no "Please answer..." line; desktop footer without "Step N of M" (Tyson: one scrolling form) --- */
.sk-cfg-fill { transition: width .5s ease !important; }
html body .sk-cfg-drawer .sk-q.sk-of-req:not(#sk-n1):not(#sk-n2) input + label.form-label,
html body .sk-cfg-drawer .sk-q.sk-of-req:not(#sk-n1):not(#sk-n2) select,
html body .sk-cfg-drawer .sk-q.sk-of-req:not(#sk-n1):not(#sk-n2) input[type=text],
html body .sk-cfg-drawer .sk-q.sk-of-req:not(#sk-n1):not(#sk-n2) input[type=number],
html body .sk-cfg-drawer .sk-q.sk-of-req:not(#sk-n1):not(#sk-n2) textarea {
    border-color: var(--sk-red, #e30000) !important; box-shadow: inset 0 0 0 1px var(--sk-red, #e30000) !important; }
.sk-pg-err { display: none !important; }
@media (min-width: 801px) {
  .sk-cfg-foot .sk-cfg-step { display: none !important; }
  .sk-cfg-foot .sk-cfg-foot-row { justify-content: flex-end; }
}

/* --- 20 Shop by Bike prefill note under Bike Year --- */
.sk-sbb-note { margin-top: 8px; font-size: var(--sk-fs-small, 14px); line-height: 1.4; color: var(--sk-ink-2, #6e6e73); }
.sk-sbb-change { all: unset; cursor: pointer; color: var(--sk-blue, #0071e3); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 800px) { .sk-sbb-note { font-size: 12px; margin-top: 6px; } }

/* ==== RETAIL-AU 1.2.0 ONLY: Afterpay under the order form's Review total (assets/js/skda-afterpay-review-120.js).
   retail-port/PENDING-NEXT-ALL-STORES-2.md item 19. ==== */
.sk-review .sk-sum-ap { display: block; margin: 0 0 16px; font-size: var(--sk-fs-small, 14px); line-height: 1.4; color: var(--sk-ink-2, #6e6e73); }
.sk-review .sk-sum-price:has(+ .sk-sum-ap) { margin-bottom: 8px !important; }
.sk-review .sk-sum-ap strong { font-weight: 700; color: var(--sk-ink, #1d1d1f); }
.sk-review .sk-sum-ap-logo { display: inline-block; vertical-align: -4px; }
.sk-review .sk-sum-ap-logo img { display: block; height: 18px; width: auto; }
.sk-review .sk-sum-ap-more { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
@media (max-width: 800px) {
  .sk-review .sk-sum-ap { font-size: 12px; }
  .sk-review .sk-sum-price:has(+ .sk-sum-ap) { margin-bottom: 6px !important; }
  .sk-review .sk-sum-ap-logo { vertical-align: -3px; }
  .sk-review .sk-sum-ap-logo img { height: 15px; }
  .productView .skda-afterpay { display: none !important; }
  #afterpay-popup-inner { width: min(597px, calc(100vw - 32px)); }
  #afterpay-popup-inner img { height: auto !important; }
}

/* ==== 1.2.1 (Tyson, 2026-11-04) - ALL FOUR MSF stores. retail-port/PENDING-NEXT-ALL-STORES-2.md items 22, 23, 24. ==== */

/* item 22: aftermarket plastics No / Yes "look comically small" - 18px phone, 20px desktop (tile heights unchanged) */
html body .sk-cfg-drawer .sk-pg > #sk-amp-q.sk-q:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) > input + label.form-label { font-size: 18px !important; }
@media (min-width: 801px) {
  html body .sk-cfg-drawer .sk-pg > #sk-amp-q.sk-q:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) > input + label.form-label { font-size: 20px !important; }
}

/* item 23: Review step - Add to Cart straight under the total / Afterpay line, the order summary list after it.
   .sk-sum becomes display:contents so its children and the button can be re-ordered; the DOM is unchanged, so the
   configurator's update() still finds `dl` and `.sk-sum-price b` inside .sk-sum. EU / CA / B2B have no Afterpay line,
   so the button sits straight under the total. */
html body .sk-review > .sk-sum { display: contents !important; }
html body .sk-review > .sk-sum > .sk-pg-eyebrow { order: 1; }
html body .sk-review > .sk-sum > .sk-review-title { order: 2; }
html body .sk-review > .sk-sum > .sk-sum-price { order: 3; }
html body .sk-review > .sk-sum > .sk-sum-ap { order: 4; }
html body .sk-review > .productAttributes-message { order: 5; }
html body .sk-review > .add-to-cart-buttons { order: 6; }
html body .sk-review > .sk-sum > dl { order: 7; }
@media (max-width: 800px) {
  /* the button's end snap moves to the summary list so the bottom of the step stays reachable */
  html body .sk-review > .add-to-cart-buttons { margin: 0 0 24px !important; scroll-snap-align: none !important; }
  html body .sk-review > .sk-sum > dl { scroll-snap-align: end; }
  /* phones: eyebrow, "Your order.", total, Afterpay line and Add to Cart pin at their own resting offsets
     (skda-order-form-121.js measures them) while the summary scrolls up behind an OPAQUE backdrop. */
  html body .sk-review.sk-rev-pin::before {
    content: ''; order: 0; position: sticky; top: 0; z-index: 1; flex: none; display: block;
    height: var(--sk-revhead); margin: -24px -20px calc(24px - var(--sk-revhead));
    background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
  }
  html body .sk-review.sk-rev-pin [data-sk-stick] { position: sticky; z-index: 2; }
}
@media (min-width: 801px) {
  /* the step's row-gap 50px (a theme !important rule) only ever sat between .sk-sum and the button; with .sk-sum
     flattened it would land between every line - 0, and the items keep their own margins */
  html body .sk-cfg-drawer form .sk-pg.sk-review.add-to-cart-wrapper { row-gap: 0 !important; }
  html body .sk-review > .add-to-cart-buttons { margin: 0 0 32px !important; }
}

/* item 24: fork wraps - no plain cards before the picture carousel. The configurator marks the question
   .sk-tiles-wait while it fetches the pictures and prices (at most 8s), then builds the carousel / ring. The space
   the ring will take is held so nothing below jumps; a still placeholder (no shimmer - limit motion).
   1.2.2: FIVE id-boosts - the 18.3 price-row rule (4 ids + :has(> .sk-price)) beat four and showed each card again as
   its price landed (live AU 1.2.1, 2026-11-04). Placeholder height follows the desktop ring: face = 24% of the
   question's width (skda-pdp-configurator.js sizes()), ring = 1.5 faces + 14px -> padding-bottom 36% + 14px.
   Measured: 1280 190/186, 1600 210/210, 2560 316/317 (placeholder / ring); phone ring is a fixed 184px. */
html body .sk-cfg-drawer .sk-q.sk-tiles-wait:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4):not(#sk-n5) > input.form-radio,
html body .sk-cfg-drawer .sk-q.sk-tiles-wait:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4):not(#sk-n5) > input.form-radio + label,
html body .sk-cfg-drawer .sk-q.sk-tiles-wait:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4):not(#sk-n5) > ul { display: none !important; }
html body .sk-cfg-drawer .sk-q.sk-tiles-wait::after {
  content: ''; display: block; grid-column: 1 / -1; box-sizing: content-box; height: 14px; padding-bottom: 36%; margin-top: 0;
  border-radius: 12px; background: rgba(0, 0, 0, .04);
}
@media (max-width: 800px) {
  html body .sk-cfg-drawer .sk-q.sk-tiles-wait::after { height: 184px; padding-bottom: 0; margin: 0 0 22px; }
}

/* ==== 1.2.2 (Tyson, 2026-11-05) - ALL FOUR MSF stores. retail-port/PENDING-NEXT-ALL-STORES-2.md item 25. ==== */
/* item 25: "Scrolling to the bottom of the order form on desktop makes the form bounce". Below ~1500px wide the
   drawer is under 520px, so the phone layout (paged, scroll-snap MANDATORY) runs on a desktop screen - but 1.2.1 only
   moved the Review step's end snap from Add to Cart to the summary list under @media (max-width: 800px). In between,
   the snap stayed on the button, now mid-step, and every scroll to the bottom was pulled back up to it. The swap
   follows the same container query as the paged layout. */
@container skcfg (max-width: 520px) {
  html body .sk-review > .add-to-cart-buttons { scroll-snap-align: none !important; }
  html body .sk-review > .sk-sum > dl { scroll-snap-align: end; }
}

/* ==== 1.2.3 (Tyson, 2026-11-05) - ALL FOUR MSF stores. retail-port/PENDING-NEXT-ALL-STORES-2.md item 31. ==== */
/* item 31: "Why is the spacing so weird on those options" (CAMEL Cyan T7, desktop). A step holding ONE question is the
   question itself (.sk-q.sk-pg) and, as a picture/pick row, a grid (.sk-of-row). The desktop drawer's 50px row-gap
   between questions (an !important .sk-pg rule) then landed INSIDE that grid - and the theme's .form-field clearfix
   ::before / ::after became two empty grid rows - so the heading sat 89px below the step top (others 39) and 62-72px
   above its answers (others 14). The nested-question rules that zero this only match .sk-pg > .sk-q. Desktop drawer
   only: in the paged (phone / laptop-width) layout these steps are not a grid and space like the rest. */
@container skcfg (min-width: 521px) {
  html body .sk-cfg-drawer .sk-q.sk-pg.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) { row-gap: 0 !important; }
  html body .sk-cfg-drawer .sk-q.sk-pg.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4)::before,
  html body .sk-cfg-drawer .sk-q.sk-pg.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4)::after { content: none !important; display: none !important; }
  html body .sk-cfg-drawer .sk-q.sk-pg.sk-of-row:not(#sk-n1):not(#sk-n2):not(#sk-n3):not(#sk-n4) > label.form-label--alternate { margin-bottom: 14px !important; }
}

/* ==== 1.2.4 (Tyson, 2026-11-05) - ALL FOUR MSF stores. retail-port/PENDING-NEXT-ALL-STORES-2.md item 36. ==== */
/* "the blue border should stay on each element that has been filled out already": a text box / dropdown with an answer
   (.sk-filled, skda-order-form-120.js textBoxes()) keeps the focus blue. Border colour + 1px inset shadow = the focused
   2px look without the padding change, so the text never moves. Not while focused (the focus rule draws it then) and
   the red missed-required rule (two id boosts) still wins. */
html body .sk-cfg-drawer .sk-pg .sk-filled:not(:focus):not(#sk-n1) {
    border-color: var(--sk-blue, #0071e3) !important; box-shadow: inset 0 0 0 1px var(--sk-blue, #0071e3) !important; }