/* SKDA B2B - PDP title bar and "Configure Order" drawer.  Added 2026-09-18 (1.11.16).

   Everything here is inert off a product page: the bar, drawer and page classes are only
   ever added by skda-pdp-configurator.js, which returns immediately unless the product
   options form is present.

   --sk-cfg-z is set by the script from BigCommerce's #modal z-index so "See Examples"
   still opens on top of the drawer; the fallback below matches the B2B portal's 1005. */

/* --- title bar --- */
.skda-bar-on .skda-pdp-sticky { display: none !important; }
.skda-bar-on .productView-brand { display: none !important; }
.sk-bar {
    position: sticky; top: var(--sk-hdr, 56px); z-index: 19;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .1); color: var(--sk-ink);
}
.sk-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; box-sizing: border-box; }
.sk-bar-main { height: 42px; align-items: flex-end; }
.sk-bar-title {
    font-size: var(--sk-fs-title); line-height: 1.2; font-weight: 500; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.sk-bar-price { flex: none; font-size: var(--sk-fs-small); line-height: 1.2; white-space: nowrap; }
.sk-bar-price b { font-weight: 700; font-size: var(--sk-fs-body); }
.sk-bar-price s { color: var(--sk-ink-2); margin-left: 8px; font-size: var(--sk-fs-small); }
.sk-bar-sub { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; height: 32px; padding-top: 3px; }
.sk-bar-brand { white-space: nowrap; text-decoration: none; }
.sk-bar-info { display: flex; font-size: var(--sk-fs-caption); color: var(--sk-ink); }
.sk-bar-info span { padding: 0 14px; border-left: 1px solid var(--sk-line); white-space: nowrap; }
.sk-bar-info span:first-child { border-left: 0; padding-left: 0; }
.sk-bar-info span:last-child { padding-right: 0; }
.sk-bar-info em { font-style: normal; font-weight: 500; }
.sk-bar-right { display: flex; align-items: flex-start; justify-content: flex-end; }
.sk-bar-save { font-size: var(--sk-fs-small); font-weight: 500; white-space: nowrap; }
.sk-bar-save:empty { display: none; }
/* The sticky image column starts below the bar, or the bar crops the top of the image. */
.skda-bar-on .productView-images { top: calc(var(--sk-hdr, 56px) + var(--sk-bar-h, 74px) + 24px) !important; }
/* Description permanently open and aligned to the image column - the script removes the
   leftover margin, these rules kill the collapsed state and its fade. */
.skda-bar-on .productView-description .show-more-link { display: none !important; }
.skda-bar-on .productView-description .show-more-content {
    display: block !important; max-height: none !important; height: auto !important;
    overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important;
}
.skda-bar-on .productView-description .show-more-content::before,
.skda-bar-on .productView-description .show-more-content::after { display: none !important; }

/* --- the drawer shell --- */
html.sk-cfg-lock { overflow: hidden !important; scrollbar-gutter: stable; }
.sk-cfg-btn {
    display: block; width: 100%; height: 52px; margin: 28px 0 0; border: 0; border-radius: 12px;
    background: var(--sk-blue); color: var(--sk-white); font-family: inherit; font-size: var(--sk-fs-body); font-weight: 500;
    letter-spacing: -.01em; cursor: pointer; transition: background .2s;
}
.sk-cfg-btn:hover { background: var(--sk-blue-hover); }
.sk-cfg-btn:focus-visible { outline: 3px solid rgba(0, 113, 227, .4); outline-offset: 3px; }
.sk-cfg-drawer {
    position: fixed !important; top: var(--sk-cfg-top, 0px) !important; right: var(--sk-cfg-right, 0px) !important;
    bottom: 0 !important; left: var(--sk-cfg-left, 60vw) !important; width: auto !important; max-width: none !important;
    height: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
    z-index: var(--sk-cfg-z, 1000) !important;
    display: flex !important; flex-direction: column;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-left: 1px solid rgba(0, 0, 0, .1); box-shadow: -20px 0 60px rgba(0, 0, 0, .08);
    transform: translateX(100%); visibility: hidden;
    transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s .5s;
}
/* The header, and the mega menu that lives inside it, sit above the open drawer. */
.sk-cfg-open header.header { z-index: calc(var(--sk-cfg-z, 1000) + 1) !important; }
.sk-cfg-open .sk-cfg-drawer {
    transform: none; visibility: visible;
    transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}
/* No slide until the first open (2.1.9).  The script turns this panel into the drawer after
   the page has painted, and the closed-state transition then played on page load - the
   form was seen sliding away as if it had just been closed. */
.sk-cfg-drawer.sk-cfg-still { transition: none !important; }
.sk-cfg-drawer > :not(.sk-cfg-head):not(.productView-options):not(.sk-cfg-foot):not(.sk-cfg-grab) { display: none !important; }
.sk-cfg-grab { display: none; }
.sk-cfg-scrim {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--sk-cfg-top, 0px);
    z-index: calc(var(--sk-cfg-z, 1000) - 1); background: rgba(0, 0, 0, .10);
    opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s;
}
.sk-cfg-open .sk-cfg-scrim { opacity: 1; visibility: visible; transition: opacity .4s; }
/* DESKTOP GLASS FORM (Tyson, 2026-09-22, theme 2.1.8 - desktop only; the phone/tablet
   sheet has its own rules in the (max-width: 800px) block below).  Previewed live and
   tuned by eye; values are his.
   - Rises from the bottom like the phone sheet (it used to slide in from the right), with
     the same timing: open .5s ease-out, close .3s ease-in.  Closed, it parks 80px past its
     own height so the rim and shadow can't peek up from the bottom edge.
   - Ends at the right edge of the 1920px page (--sk-cfg-right, set with --sk-cfg-left by
     setLeft() in skda-pdp-configurator.js), not at the screen edge.
   - Glass: the phone sheet's frosted fill and rounded top corners.  The phone's white rim
     vanished against the white desktop page, so the edge here is a 2.5px bevel whose
     gradient catches the light top-left and greys down the sides (::before, masked to a
     ring) plus a thin inner highlight (::after).  The shadow is a third of the phone's -
     Tyson: the phone strength was "too prominent" at this size. */
@media (min-width: 801px) {
    .sk-cfg-drawer {
        border: 1px solid transparent; border-bottom: 0;
        border-radius: 20px 20px 0 0;
        background: rgba(255, 255, 255, .72);
        box-shadow:
            inset 0 14px 22px -14px rgba(255, 255, 255, .95),
            inset 0 0 28px rgba(255, 255, 255, .35),
            0 0 0 .5px rgba(0, 0, 0, .14),
            0 -1px 4px rgba(0, 0, 0, .05),
            0 -8px 32px rgba(0, 0, 0, .08);
        transform: translateY(calc(100% + 80px));
        transition: transform .3s cubic-bezier(.4, 0, 1, 1), visibility 0s .3s;
    }
    .sk-cfg-open .sk-cfg-drawer {
        transform: none;
        transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s;
    }
    .sk-cfg-drawer::before {
        content: ''; position: absolute; inset: -1px -1px 0; z-index: 5; pointer-events: none;
        border-radius: 20px 20px 0 0; padding: 2.5px 2.5px 0;
        background: linear-gradient(160deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .55) 18%,
            rgba(190, 190, 200, .55) 45%, rgba(255, 255, 255, .35) 70%, rgba(175, 175, 185, .5) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
    }
    .sk-cfg-drawer::after {
        content: ''; position: absolute; inset: 2px 2px 0; z-index: 5; pointer-events: none;
        border-radius: 18px 18px 0 0;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 1px 0 0 rgba(255, 255, 255, .5), inset -1px 0 0 rgba(0, 0, 0, .04);
    }
    /* Slim scrollbar with no track; the track starts 22px down so the bar clears the
       rounded top-right corner (the system bar cut straight through it). */
    .sk-cfg-drawer .productView-options::-webkit-scrollbar { width: 10px; }
    .sk-cfg-drawer .productView-options::-webkit-scrollbar-track { background: transparent; margin: 22px 0 8px; }
    .sk-cfg-drawer .productView-options::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .22); background-clip: padding-box;
        border: 3px solid transparent; border-radius: 10px;
    }
    .sk-cfg-drawer .productView-options::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .38); }
}
.sk-cfg-head { position: absolute; top: 14px; right: 16px; z-index: 2; }
.sk-cfg-close {
    display: block; width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: rgba(0, 0, 0, .06); font-size: var(--sk-fs-title); line-height: 36px; padding: 0;
    cursor: pointer; color: var(--sk-ink);
}
.sk-cfg-close:hover { background: rgba(0, 0, 0, .1); }
.sk-cfg-drawer .productView-options {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scroll-snap-type: y mandatory; scroll-behavior: smooth;
    margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important;
}
.sk-cfg-drawer form[data-cart-item-add] { display: block !important; margin: 0 !important; padding: 0 !important; }
/* The theme's conditional .hide wrappers (matching-bar, customize-logos) are NOT
   display:none, so .sk-pg's display:flex would win and draw an EMPTY page. Hide them
   outright: the page then drops out of the step count and returns when the theme unhides it. */
.sk-cfg-drawer .options > h5,
.sk-cfg-drawer .form-field--stock,
.sk-cfg-drawer .options > .hide,
.sk-cfg-drawer .sk-multi > .hide { display: none !important; }

/* --- one question per page --- */
.sk-pg {
    box-sizing: border-box; min-height: var(--pg-h, 80vh);
    margin: 0 !important; padding: 48px 56px !important; border: 0 !important;
    display: flex !important; flex-direction: column; justify-content: center;
    scroll-snap-align: start; scroll-snap-stop: always;
    width: auto !important; max-width: none !important; float: none !important;
}
.sk-q:not(.sk-pg) { margin: 0 !important; padding: 0 !important; border: 0 !important; width: auto !important; float: none !important; }
/* Multi-question pages FILL the drawer (Tyson, 2026-09-18). The first question sits under
   the eyebrow; the rest of the height is shared equally between the gaps before each later
   question and before "Next". Auto margins, NOT justify-content: auto margins collapse to
   zero when a page outgrows the drawer, so it just stacks from the top - centring or
   space-evenly would push the first question above the scrollport. row-gap is the floor. */
.sk-pg.sk-multi { justify-content: flex-start; row-gap: 28px; }
/* 30px from "Step N of N" to the first question (Tyson, 2026-09-22): 2px + the 28px row-gap
   here, 30px outright on single-question pages (no row-gap).  The review page keeps its own. */
.sk-pg.sk-multi > .sk-pg-eyebrow { margin-bottom: 2px; }
.sk-pg:not(.sk-multi):not(.sk-review) > .sk-pg-eyebrow { margin-bottom: 30px; }
.sk-pg.sk-multi > :not(.sk-pg-eyebrow) { margin-top: auto !important; margin-bottom: 0 !important; }
.sk-pg.sk-multi > .sk-pg-eyebrow + * { margin-top: 0 !important; }
/* A confirmation belongs to the add-on above it - keep it attached rather than spaced out. */
.sk-pg.sk-multi > .sk-q[data-product-attribute="input-checkbox"] { margin-top: 0 !important; }
/* Three or more questions start a little higher. */
.sk-pg.sk-stack { padding-top: 40px !important; }
.sk-pg-eyebrow { font-size: var(--sk-fs-small); font-weight: 500; letter-spacing: .01em; color: var(--sk-ink-2); margin: 0 0 10px; text-transform: none; }
/* One size for every option header, matching "Bike Model". The per-page rules below set
   spacing only - this is the only place a header size is declared. */
.sk-q .form-label--alternate,
.sk-review-title {
    display: block !important; font-size: var(--sk-fs-heading) !important; line-height: 1.15 !important;
    font-weight: 500 !important; letter-spacing: -.015em; color: var(--sk-ink) !important;
    text-transform: none !important; margin: 0 0 22px !important; padding: 0 !important;
}
/* The Review page title names the page, not an option, so it keeps the larger size. */
.sk-review-title { font-size: var(--sk-fs-display) !important; }
.sk-pg.sk-multi .sk-q .form-label--alternate { margin-bottom: 14px !important; }
.sk-q .form-label--alternate small { display: none !important; }
.sk-pg-note { display: block; font-size: var(--sk-fs-small); line-height: 1.45; font-weight: 400; letter-spacing: 0; color: var(--sk-ink-2); margin-top: 10px; }
.sk-q .form-label--alternate button,
.sk-q .form-label--alternate a {
    display: inline-block; vertical-align: middle; margin-left: 6px;
    font-size: var(--sk-fs-small) !important; font-weight: 400 !important; letter-spacing: 0;
    color: var(--sk-blue) !important; background: none !important; border: 0 !important;
    padding: 0 !important; text-transform: none !important; text-decoration: none; height: auto !important;
}
.sk-pg.sk-ack .sk-q .form-label--alternate { line-height: 1.35 !important; }

/* --- option cards --- */
.sk-pg input.form-radio,
.sk-pg input.form-checkbox { position: absolute !important; opacity: 0 !important; pointer-events: none; }
.sk-pg input.form-radio + label.form-label,
.sk-pg input.form-checkbox + label.form-label {
    position: relative; display: flex !important; align-items: center; justify-content: space-between;
    gap: 16px; box-sizing: border-box; width: 100%; min-height: 64px;
    margin: 0 0 12px !important; padding: 16px 20px !important;
    border: 1px solid var(--sk-line); border-radius: 12px; background: rgba(255, 255, 255, .7);
    font-size: var(--sk-fs-body) !important; line-height: 1.3; font-weight: 500; color: var(--sk-ink);
    cursor: pointer; text-transform: none !important; transition: border-color .15s;
}
/* The theme draws its own radio/check marks on these pseudo-elements. */
.sk-pg input.form-radio + label.form-label::before,
.sk-pg input.form-radio + label.form-label::after,
.sk-pg input.form-checkbox + label.form-label::before,
.sk-pg input.form-checkbox + label.form-label::after { display: none !important; }
.sk-pg input.form-checkbox:checked + label.form-label::after {
    content: '\2713' !important; display: block !important; position: static !important;
    width: auto !important; height: auto !important; background: none !important;
    border: 0 !important; transform: none !important; opacity: 1 !important;
    color: var(--sk-blue); font-size: var(--sk-fs-title); line-height: 1;
}
.sk-pg input.form-radio + label.form-label:hover,
.sk-pg input.form-checkbox + label.form-label:hover { border-color: var(--sk-ink); }
.sk-pg input.form-radio:checked + label.form-label,
.sk-pg input.form-checkbox:checked + label.form-label { border: 2px solid var(--sk-blue); padding: 15px 19px !important; }
.sk-pg input.form-radio:focus-visible + label.form-label,
.sk-pg input.form-checkbox:focus-visible + label.form-label { outline: 3px solid rgba(0, 113, 227, .35); outline-offset: 2px; }
.sk-price { flex: none; font-size: var(--sk-fs-small); font-weight: 400; color: var(--sk-ink); white-space: nowrap; }
.sk-price.zero { color: var(--sk-ink-2); }
.sk-pg .form-select,
.sk-pg .form-input {
    width: 100% !important; max-width: none !important; height: 60px !important;
    padding: 0 20px !important; border: 1px solid var(--sk-line) !important; border-radius: 12px !important;
    font-size: var(--sk-fs-body) !important; background-color: rgba(255, 255, 255, .85) !important;
    box-shadow: none !important; color: var(--sk-ink);
}
.sk-pg .form-select:focus,
.sk-pg .form-input:focus { border: 2px solid var(--sk-blue) !important; padding: 0 19px !important; outline: 0; }
/* Chevron: theme pins it 7px from the TOP at 18px; centre it and size it up (all widths). */
.sk-pg .form-select { background-position: right 16px center !important; background-size: 22px auto !important; padding-right: 48px !important; }
.sk-pg-next {
    align-self: flex-start; margin-top: 20px; border: 0; background: none; color: var(--sk-blue);
    font-family: inherit; font-size: var(--sk-fs-body); padding: 8px 0; cursor: pointer;
}
.sk-pg-next::after { content: ' \2193'; }
.sk-pg-next:hover { text-decoration: underline; }
.sk-pg.sk-missing .sk-pg-eyebrow { color: var(--sk-red); }
.sk-pg-err { color: var(--sk-red); font-size: var(--sk-fs-small); margin-top: 12px; }

/* --- progress footer --- */
.sk-cfg-foot { flex: none; padding: 14px 56px 18px; border-top: 1px solid rgba(0, 0, 0, .08); }
.sk-cfg-foot-row { display: flex; justify-content: space-between; font-size: var(--sk-fs-small); color: var(--sk-ink-2); margin-bottom: 8px; }
.sk-cfg-foot-row b { color: var(--sk-ink); font-weight: 500; }
.sk-cfg-track { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.sk-cfg-fill { height: 100%; width: 0; background: var(--sk-blue); border-radius: 3px; transition: width .35s; }

/* --- review page --- */
.sk-review { display: flex !important; }
.sk-review .add-to-cart-buttons { display: block !important; width: 100% !important; max-width: none !important; float: none !important; }
.sk-review .form-action { display: block !important; width: 100% !important; margin: 0 !important; }
.sk-review #form-action-addToCart {
    display: block !important; width: 100% !important; max-width: none !important; height: 56px !important;
    border-radius: 12px !important; background: var(--sk-blue) !important; border-color: var(--sk-blue) !important;
    color: var(--sk-white) !important; font-size: var(--sk-fs-body) !important; font-weight: 500 !important;
    text-transform: none !important; margin: 0 0 12px !important;
}
/* The B2B buttons are <div class="b2b-add-to-list button"> themselves, with no inner
   <button>. Shape and type are ALSO set inline by the script because the portal's own
   styles outrank a stylesheet !important; colours are deliberately left to the portal. */
.sk-review .add-to-cart-buttons > .b2b-add-to-list,
.sk-review .add-to-cart-buttons > .b2b-add-to-quote {
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-sizing: border-box !important; width: 100% !important; max-width: none !important;
    height: 56px !important; min-height: 56px !important; padding: 0 16px !important;
    margin: 0 0 12px !important; border-radius: 12px !important; font-family: inherit !important;
    font-size: var(--sk-fs-body) !important; font-weight: 500 !important; line-height: 1.2 !important;
    letter-spacing: normal !important; text-transform: none !important; cursor: pointer;
}
.sk-sum-price { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.sk-sum-price b { font-size: var(--sk-fs-heading); font-weight: 700; }
.sk-sum-price span { font-size: var(--sk-fs-small); font-weight: 500; }
.sk-sum dl { margin: 0 0 24px; border-top: 1px solid rgba(0, 0, 0, .1); }
.sk-sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); font-size: var(--sk-fs-small); }
.sk-sum-row dt { color: var(--sk-ink-2); margin: 0; font-weight: 400; }
.sk-sum-row dd { margin: 0; text-align: right; font-weight: 500; color: var(--sk-ink); }
.sk-sum-row.sk-sum-miss dd { color: var(--sk-red); }

/* --- add-ons page: several questions share one screen, so everything tightens --- */
.sk-pg.sk-addons { justify-content: flex-start; padding-top: 40px !important; }
/* A confirmation sits under its add-on's cards; the page's row-gap separates it and the
   tint marks it as a note about that add-on. */
.sk-pg.sk-addons .sk-q[data-product-attribute="input-checkbox"] {
    margin-top: 0 !important; padding: 16px 18px !important; border-radius: 12px; background: rgba(0, 0, 0, .035);
}
.sk-pg.sk-addons .sk-q[data-product-attribute="input-checkbox"] .form-label--alternate {
    font-weight: 500 !important; line-height: 1.45 !important; margin: 0 0 10px !important;
}
.sk-pg.sk-addons .sk-q[data-product-attribute="input-checkbox"] input.form-checkbox + label.form-label {
    min-height: 42px !important; margin: 0 !important; background: var(--sk-white);
}
.sk-pg.sk-addons .sk-q .form-label--alternate { margin: 0 0 14px !important; }
.sk-pg.sk-addons input.form-radio + label.form-label {
    min-height: 48px !important; margin: 0 0 10px !important; padding: 11px 16px !important;
    font-size: var(--sk-fs-small) !important; border-radius: 10px;
}
.sk-pg.sk-addons input.form-radio:checked + label.form-label { padding: 10px 15px !important; }

/* --- image tiles --- */
/* Compact tiles on the add-ons and fork-wrap pages: a full-width 240px/3:4 tile reads as
   too big beside the cards. The cards on those pages stay full size. */
.sk-pg.sk-addons .sk-carousel,
.sk-pg.sk-wraps .sk-carousel { grid-auto-columns: 186px; }
.sk-pg.sk-addons .sk-thumb,
.sk-pg.sk-wraps .sk-thumb { aspect-ratio: 1 / 1; font-size: var(--sk-fs-caption); }
.sk-pg.sk-addons .sk-slide .sk-name,
.sk-pg.sk-wraps .sk-slide .sk-name { font-size: var(--sk-fs-small); line-height: 1.2; }
.sk-pg.sk-addons .sk-slide .sk-price,
.sk-pg.sk-wraps .sk-slide .sk-price { font-size: var(--sk-fs-small); }
.sk-pg.sk-addons .sk-slide input.form-radio + label.form-label,
.sk-pg.sk-wraps .sk-slide input.form-radio + label.form-label {
    margin: 0 5px !important; padding: 8px !important; gap: 6px; border-radius: 12px;
}
.sk-pg.sk-addons .sk-slide input.form-radio:checked + label.form-label,
.sk-pg.sk-wraps .sk-slide input.form-radio:checked + label.form-label { padding: 7px !important; }
.sk-pg.sk-addons .sk-carousel::scroll-marker-group,
.sk-pg.sk-wraps .sk-carousel::scroll-marker-group { padding-block-start: 10px; }
.sk-pg.sk-addons .sk-slide::scroll-marker,
.sk-pg.sk-wraps .sk-slide::scroll-marker { height: 7px; }
.sk-pg.sk-car-q .form-label--alternate { margin-bottom: 12px !important; }
/* 2-3 choices: a plain row, no scrolling, arrows or dots. Capped because two tiles
   sharing the full drawer width produced 359x479 monsters. */
.sk-carousel.sk-tilerow {
    grid-auto-columns: minmax(0, 200px); justify-content: start; overflow: visible;
    scroll-marker-group: none; -webkit-mask-image: none; mask-image: none;
    gap: 12px; padding-inline: 0;
}
.sk-carousel.sk-tilerow .sk-thumb { aspect-ratio: 1 / 1; }
/* Scroll-snap is deliberately OFF: it dragged each arrow landing to the nearest tile,
   which made one click creep and the next jump. The script animates the strip itself. */
.sk-carousel {
    position: relative; margin: 4px 0 0; padding-block: 4px 0; padding-inline: 6px;
    display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 0; align-items: stretch;
    anchor-name: --skcar; overflow-x: auto; scroll-snap-type: none;
    overscroll-behavior-x: contain; scrollbar-width: none; scroll-marker-group: after;
}
@supports not selector(::scroll-marker-group) {
    .sk-carousel { gap: 12px; }
}
.sk-carousel::-webkit-scrollbar { display: none; }
.sk-carousel::scroll-marker-group {
    position: absolute; position-anchor: --skcar; display: flex; align-items: center;
    justify-content: center; gap: 7px; padding-block-start: 14px;
    top: anchor(bottom); left: anchor(left); right: anchor(right);
}
.sk-slide { position: relative; container-type: scroll-state; }
/* Soft edges, on whichever side actually has a tile running off it - the script toggles
   these classes. A fixed band on both sides dulled fully visible end tiles and washed out
   the blue selected border. Never set mask-image:none elsewhere; it swallows this. */
.sk-carousel {
    --sk-fl: 0px; --sk-fr: 0px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--sk-ink) var(--sk-fl), var(--sk-ink) calc(100% - var(--sk-fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, var(--sk-ink) var(--sk-fl), var(--sk-ink) calc(100% - var(--sk-fr)), transparent 100%);
}
.sk-carousel.sk-fade-l { --sk-fl: 50px; }
.sk-carousel.sk-fade-r { --sk-fr: 50px; }
.sk-slide.sk-start { scroll-initial-target: nearest; }
.sk-slide::scroll-marker {
    content: ' '; height: 8px; aspect-ratio: 1; background: var(--sk-ink); border-radius: 50%;
    opacity: .25; scale: .75; transition: 150ms ease-in-out;
}
.sk-slide::scroll-marker:target-current { opacity: 1; scale: 1; }
.sk-slide::scroll-marker:where(:hover, :focus-visible) { opacity: .6; }
/* Real buttons, not ::scroll-button: the browser's arrows move by an amount we cannot set. */
.sk-carousel::scroll-button(*) { display: none; }
.sk-nav {
    position: absolute; position-anchor: --skcar; width: 36px; aspect-ratio: 1; border: 0;
    border-radius: 50%; background: rgba(0, 0, 0, .06); color: var(--sk-ink); display: grid;
    place-content: center; font-size: var(--sk-fs-small); cursor: pointer; transition: 150ms ease-in-out;
    top: anchor(center); translate: 0 -50%; z-index: 2;
}
.sk-nav.prev { left: calc(anchor(left) - 44px); }
.sk-nav.next { right: calc(anchor(right) - 44px); }
.sk-nav:not(:disabled):where(:hover, :focus-visible) { background: rgba(0, 0, 0, .12); }
.sk-nav:disabled { opacity: .25; cursor: default; }
.sk-pg .sk-slide input.form-radio + label.form-label {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 8px;
    min-height: 0 !important; margin: 0 6px !important; padding: 10px !important;
    border-radius: 14px; text-align: center; font-size: var(--sk-fs-small) !important;
    transition: border-color .15s, opacity .3s, scale .3s;
}
.sk-pg .sk-slide input.form-radio:checked + label.form-label { padding: 9px !important; }
.sk-thumb {
    display: grid; place-content: center; width: 100%; aspect-ratio: 3 / 4; border-radius: 10px;
    overflow: hidden; background: var(--sk-surface); color: var(--sk-ink-2); font-size: var(--sk-fs-caption); letter-spacing: .02em;
}
.sk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sk-slide .sk-name { font-weight: 500; line-height: 1.25; }
.sk-slide .sk-price { align-self: center; font-size: var(--sk-fs-small); font-weight: 400; }
/* Every tile stays full colour until a real option is picked, then the unpicked ones step
   back. Dimming by scroll position instead faded whichever tile was off-centre, chosen or not. */
.sk-carousel .sk-slide label.form-label { opacity: 1; scale: 1; height: 100%; }
.sk-carousel:has(input.form-radio:checked):not(:has(.sk-none input.form-radio:checked)) .sk-slide:not(:has(input.form-radio:checked)) label.form-label {
    opacity: .5; scale: .96;
}

@media (max-width: 800px) {
    .sk-bar-main { height: 36px; }
    .sk-bar-title { font-size: var(--sk-fs-small); }
    .sk-bar-price b { font-size: var(--sk-fs-small); }
    .sk-bar-price s,
    .sk-bar-info { display: none; }
    /* bottom space = the 18px above the title (Tyson, 2026-09-18) */
    .sk-bar-sub { height: auto; min-height: 26px; padding-bottom: 14px; grid-template-columns: 1fr auto; }
    .sk-cfg-drawer { left: 0 !important; width: auto !important; }
    /* Bottom sheet: rises from the bottom, drag down to close (script: BOTTOM SHEET). */
    /* GLASS SHEET (Tyson, 2026-09-21, theme 2.1.6 - phone/tablet only).  Previewed live
       and tuned by eye; values are his.
       - Sits one title-bar height BELOW the title bar (--sk-glass-gap is measured by the
         photo-zoom script in skda-pdp-configurator.js on every open), flush with the
         screen sides and bottom, rounded top corners only.
       - "Thickness": a solid 2px white rim along the top with a softer band under it,
         2.5px side rims, a bloom just under the top edge and a faint inner glow; outside,
         a hairline plus a contact shadow and a wide soft shadow lift it off the page.
       - Closed, it parks 80px further down than its own height so the rim and shadow
         can't peek up from the bottom edge.
       - Open 0.5s ease-out, close 0.3s ease-in: dismissing is quicker than summoning.
         These are plain (non-!important) rules on purpose: `.sk-dragging .sk-cfg-drawer
         { transition: none !important }` below must keep winning while a finger drags
         the sheet, or the sheet trails behind the finger. */
    .sk-cfg-drawer {
        transform: translateY(calc(100% + 80px));
        margin: var(--sk-glass-gap, 78px) 0 0 !important;
        border: 1px solid rgba(255, 255, 255, .85); border-bottom: 0;
        border-radius: 20px 20px 0 0;
        background: rgba(255, 255, 255, .72);
        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 1),
            inset 0 3.5px 0 rgba(255, 255, 255, .55),
            inset 2.5px 0 0 rgba(255, 255, 255, .75),
            inset -2.5px 0 0 rgba(255, 255, 255, .75),
            inset 0 14px 22px -14px rgba(255, 255, 255, .95),
            inset 0 0 28px rgba(255, 255, 255, .35),
            0 0 0 .75px rgba(0, 0, 0, .22),
            0 -2px 6px rgba(0, 0, 0, .1),
            0 -16px 48px rgba(0, 0, 0, .24);
        transition: transform .3s cubic-bezier(.4, 0, 1, 1), visibility 0s .3s;
    }
    .sk-cfg-open .sk-cfg-drawer {
        transform: none;
        transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s;
    }
    .sk-cfg-scrim { transition: opacity .3s cubic-bezier(.4, 0, 1, 1), visibility 0s .3s; }
    .sk-cfg-open .sk-cfg-scrim { transition: opacity .5s cubic-bezier(.32, .72, 0, 1); }
    /* 2.1.8 (Tyson, 2026-09-22): no dimming behind the sheet - the photo in the gap shows at
       full brightness.  The scrim stays (clear) so a tap above the sheet still closes it. */
    .sk-cfg-scrim { background: transparent; }
    /* The blue Configure Order button showed heavily through the glass: it fades out while
       the sheet is open and back in once the sheet is on its way down.  Opacity, not
       display, so the page doesn't reflow under the sheet. */
    .sk-cfg-btn { transition: background .2s, opacity .3s ease .15s; }
    .sk-cfg-open .sk-cfg-btn { opacity: 0; transition: opacity .2s ease; }
    /* Title bar frosted to match the sheet (same fill, blur and rim). */
    .sk-bar {
        background: rgba(255, 255, 255, .72);
        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 1),
            inset 0 3.5px 0 rgba(255, 255, 255, .55),
            inset 0 -2px 0 rgba(255, 255, 255, .75),
            inset 0 14px 22px -14px rgba(255, 255, 255, .95),
            inset 0 0 28px rgba(255, 255, 255, .35),
            0 .75px 0 rgba(0, 0, 0, .22),
            0 6px 20px rgba(0, 0, 0, .1);
    }
    /* Product photo layer (script: PHOTO ZOOM in skda-pdp-configurator.js - since 2.1.8 it
       moves the photo without zooming it).  Under
       the title bar (z 19) so the bar frosts it, over the page (and under the scrim).
       Its bottom 24px fade out; the script keeps that fade just BELOW the page photo, so
       the close lands on a fully sharp photo and the fade line never sweeps the screen. */
    #sk-zoom {
        position: fixed; left: 0; right: 0; z-index: 18; overflow: hidden;
        pointer-events: none; visibility: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    }
    #sk-zoom img { position: absolute; max-width: none; display: block; }
    /* Order form footer (2.1.7): progress bar and "N% complete" on ONE line (61px -> 47px).
       The label is sized for "100% complete" (83px at 12px bold, measured) with tabular
       digits, so the bar never shrinks as the percentage grows - re-measure if the footer
       font changes. */
    .sk-cfg-foot { display: flex !important; align-items: center !important; gap: 12px !important; }
    .sk-cfg-foot .sk-cfg-track { flex: 1 1 auto !important; order: 0 !important; margin: 0 !important; }
    .sk-cfg-foot .sk-cfg-foot-row { order: 1 !important; flex: none !important; margin: 0 !important; }
    .sk-cfg-foot .sk-cfg-pct { display: inline-block !important; min-width: 83px !important; text-align: right !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; }
    .sk-dragging .sk-cfg-drawer, .sk-dragging .sk-cfg-scrim { transition: none !important; }
    .sk-cfg-grab { display: block; position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 2; }
    .sk-cfg-grab::before {
        content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px;
        margin-left: -18px; border-radius: 3px; background: rgba(0, 0, 0, .22);
    }
    .sk-cfg-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
    .sk-cfg-head { display: none; }  /* sheet closes by swipe or scrim tap */
    .sk-pg { padding: 32px 20px !important; }
    .sk-cfg-foot { padding: 12px 20px 16px; }
    .sk-cfg-btn { margin: 20px 0 24px; }
    /* Full-bleed main image: cancels the .container gutter, a fixed 1.5rem below "large". */
    .productView-images .productView-image {
        width: auto !important; max-width: none !important;
        margin-left: -1.5rem !important; margin-right: -1.5rem !important;
    }
    /* Thumbnails: gap between tiles = gap to the screen edge (1.5rem); corners match .sk-cfg-btn. */
    .productView-thumbnails { margin-left: 0 !important; margin-right: 0 !important; }
    .productView-thumbnail { width: auto !important; padding: 5px 0 !important; margin-right: 1.5rem !important; }
    .productView-thumbnail:last-child { margin-right: 0 !important; }
    .productView-thumbnail-link { width: 75px !important; border-radius: 12px !important; overflow: hidden; }
    .productView-thumbnail-link img { border-radius: 10px; }
    .sk-q .form-label--alternate,
    .sk-review-title { font-size: var(--sk-fs-heading) !important; }
}

/* Compact drawer, keyed to the DRAWER's width, not the screen's: phones and tablets
   (drawer ~465px) get it, desktop (>=~555px drawer) keeps the sizes above.
   Page grouping is unchanged - this only resizes. --sk-s scales every text size at once
   (Tyson, 2026-09-18: 85%). Spacing: tight WITHIN a question, 34px BETWEEN questions. */
.sk-cfg-drawer { container: skcfg / inline-size; --sk-s: .85; }
@container skcfg (max-width: 520px) {
    .sk-pg { padding: 24px 20px !important; }
    .sk-pg.sk-stack, .sk-pg.sk-addons { padding-top: 24px !important; }
    .sk-pg.sk-multi { row-gap: 34px; }
    .sk-pg.sk-multi > .sk-pg-eyebrow { margin-bottom: -28px; }
    .sk-pg-eyebrow { font-size: var(--sk-fs-caption); margin-bottom: 6px; }
    .sk-q .form-label--alternate,
    .sk-pg.sk-multi .sk-q .form-label--alternate,
    .sk-pg.sk-car-q .form-label--alternate { font-size: var(--sk-fs-title) !important; line-height: 1.2 !important; margin-bottom: 7px !important; }
    .sk-review-title { font-size: var(--sk-fs-title) !important; margin-bottom: 14px !important; }
    .sk-pg-note { font-size: var(--sk-fs-caption); line-height: 1.4; margin-top: 3px; }
    /* the theme's own phone info-tip carries a 21px bottom margin */
    .sk-q .mobile-infotip { margin: 0 0 7px !important; font-size: var(--sk-fs-caption) !important; line-height: 1.4 !important; }
    .sk-q .form-label--alternate button,
    .sk-q .form-label--alternate a { font-size: var(--sk-fs-caption) !important; }
    .sk-pg input.form-radio + label.form-label,
    .sk-pg input.form-checkbox + label.form-label,
    .sk-pg.sk-addons input.form-radio + label.form-label { min-height: 48px; margin-bottom: 5px !important; padding: 11px 16px !important; font-size: var(--sk-fs-caption) !important; }
    .sk-pg input.form-radio:checked + label.form-label,
    .sk-pg input.form-checkbox:checked + label.form-label,
    .sk-pg.sk-addons input.form-radio:checked + label.form-label { padding: 10px 15px !important; }
    .sk-price { font-size: var(--sk-fs-caption); }
    /* never under 16px: iOS zooms the page into any smaller input on focus */
    .sk-pg .form-select, .sk-pg .form-input { height: 48px !important; font-size: var(--sk-fs-body) !important; padding: 0 16px !important; }
    .sk-pg .form-select:focus, .sk-pg .form-input:focus { padding: 0 15px !important; }
    .sk-pg-next { margin-top: 10px; font-size: var(--sk-fs-small); }
    /* ~2.4 tiles visible so the clipped one says "swipe"; the arrows sit outside the
       strip and would be off-screen here. */
    .sk-carousel, .sk-pg.sk-addons .sk-carousel, .sk-pg.sk-wraps .sk-carousel { grid-auto-columns: calc((100% - 12px) / 2.4); padding-inline: 0; }
    .sk-nav { display: none; }
    .sk-pg .sk-slide input.form-radio + label.form-label,
    .sk-pg.sk-addons .sk-slide input.form-radio + label.form-label,
    .sk-pg.sk-wraps .sk-slide input.form-radio + label.form-label { margin: 0 4px !important; padding: 6px !important; gap: 4px; font-size: var(--sk-fs-caption) !important; }
    .sk-pg .sk-slide input.form-radio:checked + label.form-label,
    .sk-pg.sk-addons .sk-slide input.form-radio:checked + label.form-label,
    .sk-pg.sk-wraps .sk-slide input.form-radio:checked + label.form-label { padding: 5px !important; }
    .sk-slide .sk-name, .sk-slide .sk-price { font-size: var(--sk-fs-caption); }
    .sk-carousel.sk-tilerow { grid-auto-columns: minmax(0, 1fr); }
    .sk-sum-price b { font-size: var(--sk-fs-title); }
    .sk-sum-price span, .sk-sum-row { font-size: var(--sk-fs-caption); }
    .sk-cfg-foot { padding: 12px 20px 16px; }
    .sk-cfg-foot-row { font-size: var(--sk-fs-caption); }
    .sk-cfg-head { top: 10px; right: 12px; }
    /* ONE LONG FORM here (Tyson, 2026-09-18): no pages, no snap, no Next links, no step
       labels - the script also skips its wheel/keyboard paging and auto-advance. Sections
       are spaced exactly like questions (34px). */
    .productView-options { scroll-snap-type: none !important; scroll-behavior: smooth; }
    .sk-pg { min-height: 0 !important; justify-content: flex-start !important; padding: 17px 20px !important; }
    .sk-pg.sk-stack, .sk-pg.sk-addons { padding-top: 17px !important; }
    .sk-cfg-drawer form[data-cart-item-add] { padding-top: 20px !important; }
    .sk-review { padding-bottom: 32px !important; }
    .sk-pg-eyebrow, .sk-pg-next { display: none !important; }
    .sk-review .sk-pg-eyebrow { display: block !important; }
    .sk-pg.sk-multi > :not(.sk-pg-eyebrow) { margin-top: 0 !important; }
    .sk-pg .form-input::placeholder { font-size: var(--sk-fs-small); }
    .sk-cfg-step { display: none; }
    .sk-cfg-foot-row { justify-content: flex-end; }
    .sk-carousel, .sk-pg.sk-addons .sk-carousel, .sk-pg.sk-wraps .sk-carousel { grid-auto-columns: calc((100% - 12px) / 3.3); }
    .sk-price, .sk-slide .sk-price { font-size: var(--sk-fs-small); }
}
/* after every padding shorthand above: a focused dropdown keeps room for its chevron */
.sk-pg .form-select:focus { padding-right: 47px !important; }
        

/* ------------------------------------------------------------- reviews.io star nugget
   2.3.1 (Tyson, 2026-09-23): match the Configure Order button - same width, same corners.
   placeNugget() puts the widget inside .productView-details on desktop so it shares the
   button's content box; its own side padding is dropped so the card fills that box instead
   of sitting 26px wider. !important throughout because reviews.io ships its own stylesheet
   (assets.reviews.io) plus a <style> block inside the widget, and those set the 5px radius
   and the padding we are overriding. */
.productView-details .reviews-io-nuggets-widget {
    float: none !important;
    clear: both !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.reviews-io-nuggets-widget .NuggetsWidget__inner {
    border-radius: 12px !important;
}

/* ------------------------------------------------------------------ NUMBER VISUALISER
   2.4.0 (Tyson, 2026-09-23/24; designed live as an injected mock - see the NUMBER VISUALISER
   block at the end of skda-pdp-configurator.js). Everything is scoped to the page that holds
   Number on Graphics / Number Style / both colours (.sk-viz-pg) or to the pickers and preview
   the script builds there. Two layouts, keyed like the rest of this file to the DRAWER's
   width (the skcfg container), not the screen's:
   - wider than 520px: font tiles + swatch rows, Step 3 tightened to fit one drawer page;
   - 520px and under (phones, tablets): Number Style dropdown, colour scrubber bars, the
     theme's own page padding and 34px question gap. */

/* Step 3 sizes: ~15-20% smaller than the theme's so the options breathe (Tyson,
   2026-09-24: "feels a bit cramped"). Kept at the end of the file: these tie on specificity
   with the theme's label/input rules and must win. */
.sk-pg.sk-viz-pg .form-field .form-label { font-size: 19px !important; line-height: 1.15 !important; margin-bottom: 9px !important; }
.sk-pg.sk-viz-pg .form-field .form-input { height: 46px !important; min-height: 0 !important; font-size: 15px !important; padding: 0 16px !important; }
.sk-pg.sk-viz-pg .form-field .form-input:focus { padding: 0 15px !important; }
@container skcfg (min-width: 521px) {
    /* gap 12 -> 20 and padding 30 -> 22 (Tyson, 2026-09-24): the whole step on one page */
    .sk-pg.sk-viz-pg { padding: 22px 56px !important; row-gap: 20px !important; }
}
@container skcfg (max-width: 520px) {
    /* never under 16px here: iOS zooms the page into any smaller input on focus */
    .sk-pg.sk-viz-pg .form-field .form-input { font-size: var(--sk-fs-body) !important; }
}
/* "Same as Product Image" style hides both colour questions and the preview. */
.sk-viz-pg .skviz-off { display: none !important; }

/* The real <select>s stay in the form, invisible - the pickers write to them. */
.sk-pg .form-select.skpick-hide, .skpick-hide {
    position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
    padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important;
}
/* :where() = zero weight, or this reset outranks the swatch sizes and collapses them to 0px */
:where(.skpick, .skpick-fonts, .skring) button { all: unset; box-sizing: border-box; cursor: pointer; }
:where(.skpick, .skpick-fonts, .skring) button:focus-visible { outline: 2px solid var(--sk-blue); outline-offset: 2px; }

/* --- Number Style tiles: 3 rows of 4, 34px, name left / digits right (Tyson, 2026-09-24).
   The canvas size MUST match TILE_W / TILE_H in the script, or every tile stretches. */
.skpick-fonts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@container skcfg (min-width: 521px) and (max-width: 760px) {
    /* smaller desktop screens: four across overflows under ~760px of drawer */
    .skpick-fonts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container skcfg (min-width: 521px) and (max-width: 620px) {
    /* ...and under ~620px three need the room: narrower side padding (a long name ellipsises
       before anything overflows) */
    .sk-pg.sk-viz-pg { padding-left: 32px !important; padding-right: 32px !important; }
}
.skpick-font {
    height: 34px; padding: 0 10px; border: 1px solid var(--sk-line); border-radius: 8px; background: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    transition: border-color .12s, box-shadow .12s;
}
.skpick-font:hover { border-color: var(--sk-ink-3); }
.skpick-font canvas { display: block; flex: none; width: 72px; height: 24px; }
.skpick-font .n {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 500 11px/1 var(--sk-font, Roboto); letter-spacing: .02em; color: var(--sk-ink-2);
}
.skpick-font[aria-checked=true] { border-color: var(--sk-blue); box-shadow: 0 0 0 1px var(--sk-blue) inset; }
.skpick-font[aria-checked=true] .n { color: var(--sk-blue); }
/* "Same as Product Image": centred, and black unless picked */
.skpick-font.same { justify-content: center; }
.skpick-font.same:not([aria-checked=true]) .n { color: var(--sk-ink); }

/* --- colour swatches: one row of 22px circles */
.skpick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.skpick-sw {
    width: 22px; height: 22px; border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .14) inset; transition: transform .12s;
}
.skpick-sw:hover { transform: scale(1.12); }
.skpick-sw[aria-checked=true] { box-shadow: 0 0 0 1px rgba(0, 0, 0, .14) inset, 0 0 0 2px #fff, 0 0 0 4px var(--sk-blue); }
/* Outline Only colours: a ring on the chosen background (the script fills it) */
.skpick-sw.ol { border: 4px solid var(--ol); }
/* the White Outline ring vanished on the white page - same thin outline as a white plate */
.skpick-sw.wo { box-shadow: 0 0 0 1px #c7c7cc; }
.skpick-sw.wo[aria-checked=true] { box-shadow: 0 0 0 1px #c7c7cc, 0 0 0 3px #fff, 0 0 0 5px var(--sk-blue); }

/* --- the preview card */
#skviz .skviz-card { border: 1px solid #e5e5ea; border-radius: 12px; overflow: hidden; background: #fff; }
#skviz svg { display: block; width: 100%; height: 168px; }
#skviz .skviz-cap { font: 500 11px/1 var(--sk-font, Roboto); fill: #a1a1a6; letter-spacing: .05em; text-transform: uppercase; }
#skviz .skviz-ft { margin: 0; padding: 8px 14px; border-top: 1px solid #f0f0f2; font: italic 400 11.5px/1.4 var(--sk-font, Roboto); color: var(--sk-ink-2); }
/* a white plate keeps its shape on the white card */
#skviz .skviz-ol { fill: none; stroke: #c7c7cc; stroke-width: 1; vector-effect: non-scaling-stroke; visibility: hidden; }
#skviz.white-plate .skviz-ol { visibility: visible; }
/* a "Same as Shown" colour: plate outlines only (visibility, so the card keeps its height) */
#skviz.as-photo svg * { visibility: hidden !important; }
#skviz.as-photo svg .skviz-ol { visibility: visible !important; }

/* --- warnings under Number on Graphics (red = .b2b-quote-global-error's). Desktop: laid
   into the question gap so showing one never changes the page height. */
.skviz-numbox { position: relative; }
.skviz-numnote {
    position: absolute; left: 2px; top: 100%; margin: 2px 0 0; white-space: nowrap;
    font: 400 11.5px/1.15 var(--sk-font, Roboto); color: #d32f2f;
}
.skviz-numnote span { display: block; }
.skviz-numnote span[hidden] { display: none; }

/* --- COMPACT DRAWER (phones, tablets) */
@container skcfg (max-width: 520px) {
    /* --- the three pickers are CAROUSELS here (2.5.0, Tyson 2026-09-25): the Number Style
       dropdown and the two colour scrubber bars this file used to draw are gone. The tile
       grid and the swatch rows above are desktop's, so they hide. */
    .skpick-fonts, .sk-viz-pg .skpick { display: none !important; }
    /* the fork wraps use the same carousel, so the theme's tile strip goes with them */
    .sk-pg.sk-wraps .sk-carousel, .sk-pg.sk-wraps .sk-nav { display: none !important; }
    .skring {
        position: relative; height: 74px; margin: -6px 0 0;
        perspective: 900px; perspective-origin: 50% 50%;
        touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    }
    .skring:focus-visible { outline: 2px solid var(--sk-blue); outline-offset: 2px; border-radius: 14px; }
    .skring-f {
        position: absolute; left: 50%; top: 50%; width: var(--skring-w); height: 62px;
        box-sizing: border-box; padding: 4px 5px 6px; transform-origin: 50% 50%; will-change: transform;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        border: 1px solid var(--sk-line); border-radius: 11px; background: #fff; cursor: pointer;
    }
    .skring-f canvas { display: block; }
    .skring-n {
        font: 500 9px/1 var(--sk-font, Roboto); letter-spacing: .02em; color: var(--sk-ink-2);
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .skring-f.same .skring-n { font-size: 10px; color: var(--sk-ink); white-space: normal; text-align: center; line-height: 1.25; }
    .skring-f.on { border-color: var(--sk-blue); box-shadow: 0 0 0 1px var(--sk-blue) inset, 0 4px 14px rgba(0, 0, 0, .1); }
    .skring-f.on .skring-n, .skring-f.on .skring-p { color: var(--sk-blue); }
    /* colours: a chip where the digits go, in a shorter face - a colour needs less room than
       four digits, and Step 3 has two of these to fit alongside the plates */
    .skring.col { height: 58px; }
    .skring.col .skring-f { height: 46px; padding: 4px 5px 5px; }
    .skring-chip {
        display: block; box-sizing: border-box; width: 100%; height: 21px; border-radius: 6px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .14) inset;
    }
    .skring-chip.ol { border: 4px solid var(--ol); }        /* "Outline Only", on the background colour */
    .skring-chip.wo { box-shadow: 0 0 0 1px #c7c7cc; }      /* white on white needs an edge */
    /* fork wraps: a square product photo, the name on up to two lines, the price */
    .skring.pic { height: 152px; }
    .skring.pic .skring-f { height: 140px; padding: 5px 5px 6px; justify-content: flex-start; gap: 2px; }
    .skring.pic .skring-n { white-space: normal; text-align: center; line-height: 1.15; max-height: 21px; overflow: hidden; }
    .skring-pic {
        display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1;
        overflow: hidden; border-radius: 7px; background: var(--sk-surface);
    }
    .skring-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .skring-pic em {
        font: 500 9px/1.2 var(--sk-font, Roboto); font-style: normal; color: var(--sk-ink-3);
        text-align: center; padding: 0 4px;
    }
    .skring-p { font: 400 9px/1 var(--sk-font, Roboto); color: var(--sk-ink-2); }

    /* preview full width, no dead band; captions readable at ~0.6x */
    #skviz svg { height: auto; aspect-ratio: 640 / 210; }
    #skviz .skviz-cap { font-size: 16px; }
    #skviz .skviz-ft { font-size: 11px; padding: 7px 12px; }
    /* the warnings wrap on a phone, so they take real space here */
    .skviz-numnote { position: static; white-space: normal; margin: 6px 0 0 2px; }
}

/* Desktop keeps the tile grid, the swatch rows and the theme's tile strip. */
@container skcfg (min-width: 521px) {
    .skring { display: none; }
}

/* ------------------------------------------------------ THE PHONE FORM IS PAGED (2.5.0)
   Tyson, 2026-09-25. The compact drawer had been ONE LONG FORM since 2026-09-18; these rules
   undo that block (it is earlier in this stylesheet, so equal weight later wins) and give
   phones the desktop behaviour: a screenful per page, a scroll in either direction turning
   the page, the eyebrows and the step counter back. The script above adds what CSS cannot
   work out - which pages are taller than the sheet, and the padding on Step 3. */
@container skcfg (max-width: 520px) {
    /* MANDATORY, not proximity: proximity only pulls when a scroll ENDS near a page edge
       (~120px of a 669px sheet), so a scroll that stopped mid-page stayed there and the form
       parked between two questions. What makes mandatory safe is the end-of-page snap point
       on every page taller than the sheet, below. */
    .sk-cfg-drawer .productView-options { scroll-snap-type: y mandatory !important; }
    /* no 15px desktop scrollbar down the side of a phone layout - the step counter and the
       progress bar are the position indicator */
    .sk-cfg-drawer .productView-options { scrollbar-width: none; -ms-overflow-style: none; }
    .sk-cfg-drawer .productView-options::-webkit-scrollbar { width: 0; height: 0; display: none; }
    .sk-pg { min-height: var(--pg-h, 80vh) !important; justify-content: center !important; padding: 24px 20px !important; }
    .sk-pg.sk-stack, .sk-pg.sk-addons { padding-top: 24px !important; }
    .sk-cfg-drawer form[data-cart-item-add] { padding-top: 0 !important; }
    /* Questions BUNCH AT THE TOP, 22px apart (Tyson): desktop shares a page's spare height
       out with auto margins, which left Step 1's three questions ~100px apart on a phone.
       row-gap is the flex gap, so it also sets eyebrow -> first heading: -2px of margin under
       the eyebrow trims that to 20px (it was 6px in the long form). */
    .sk-pg.sk-multi { justify-content: flex-start !important; row-gap: 22px !important; }
    .sk-pg.sk-multi > :not(.sk-pg-eyebrow) { margin-top: 0 !important; }
    .sk-pg.sk-multi > .sk-pg-eyebrow { margin-bottom: -2px !important; }
    .sk-pg:not(.sk-multi):not(.sk-review) > .sk-pg-eyebrow { margin-bottom: 20px !important; }
    .sk-pg-eyebrow { display: block !important; }
    .sk-cfg-step { display: inline !important; }
    .sk-cfg-foot-row { justify-content: space-between !important; }
    /* No "Next" link on a phone (Tyson): scrolling turns the page. HIDDEN, not removed - the
       "Please answer this question to continue." error is inserted in front of it. */
    .sk-pg-next { display: none !important; }
    /* A page taller than the sheet also snaps with its bottom at the bottom of the sheet, so
       nothing is out of reach; over ~1.8 sheets it needs points in between as well. Both
       classes come from the script. */
    .sk-pg.sk-tall > .sk-endsnap { scroll-snap-align: end; }
    .sk-pg.sk-tall2 > * { scroll-snap-align: start; }
    /* 3px out of the three gaps from Number Style down to the plates (Tyson, 2026-09-25) -
       the rings read as one block, so they sit closer than the questions above them. The
       class is added by the script; :has() would do it but is newer than this theme's floor. */
    .sk-pg.sk-viz-pg.sk-multi > .skviz-colq,
    .sk-pg.sk-viz-pg.sk-multi > #skviz { margin-top: -3px !important; }
    /* Step 3 snaps at NUMBER STYLE too (Tyson, 2026-09-25): from there the style, both
       colours and both plates are one view - the number and the name scroll off above. */
    .sk-pg.sk-viz-pg.sk-tall .skviz-styleq { scroll-snap-align: start; scroll-margin-top: 12px; }

    /* --- smaller type (Tyson, 2026-09-25) */
    .sk-q .form-label--alternate,
    .sk-pg.sk-multi .sk-q .form-label--alternate,
    .sk-pg.sk-car-q .form-label--alternate,
    .sk-review-title { font-size: 17px !important; }
    .sk-pg.sk-viz-pg .form-field .form-label { font-size: 16px !important; }
    .sk-pg-eyebrow { font-size: 11px !important; }
    .sk-pg input.form-radio + label.form-label,
    .sk-pg input.form-checkbox + label.form-label,
    .sk-pg.sk-addons input.form-radio + label.form-label { font-size: 11px !important; min-height: 44px; }
    .sk-pg-note, .sk-q .mobile-infotip, .sk-q .form-label--alternate button,
    .sk-q .form-label--alternate a { font-size: 11px !important; }
    .sk-price, .sk-slide .sk-name, .sk-slide .sk-price { font-size: 11px !important; }
    .sk-sum-row, .sk-sum-price span { font-size: 11px !important; }
    /* The inputs and dropdowns STAY at 16px: iOS zooms the page into anything smaller when it
       takes focus. Their boxes shrink instead. */
    .sk-pg .form-select, .sk-pg .form-input { height: 44px !important; }
    .sk-pg.sk-viz-pg .form-field .form-input { height: 44px !important; }
}
/* The white column down the right of the page while the drawer is open: pdp-drawer.css locks
   the page with `scrollbar-gutter: stable`, holding the width the page scrollbar used to take
   so the page behind cannot jump sideways. Real on desktop; on a phone the scrollbar is an
   overlay that takes no width, so the gutter is just an empty white strip. */
@media (pointer: coarse), (max-width: 800px) {
    html.sk-cfg-lock { scrollbar-gutter: auto !important; }
}

/* ---------------------------------------------------------------- gallery (2.6.3)
   ONE large image with the thumbnail row locked beneath it, and a 6-column thumbnail grid
   on phones/tablets.  These lived in _productView.scss in 2.6.2 but the compiled theme.css
   served none of them, so they are plain CSS here (this file loads after theme.css).

   .skda-stack--locked is set by skda-pdp-gallery.js on every product with more than one
   image.  The wrapper's aspect-ratio is the TALLEST image's, so the box never changes size;
   the <img> fills it absolutely and object-fit:contain centres a wider proof inside it.
   !important on the img because theme.css's :only-child rules (written for a single-image
   product: fit-to-viewport height, centred, shrink-wrapped) match a one-child stack and
   carry more specificity. */
.productView-images .skda-stack--locked > .skda-zoomwrap {
    margin: 0;
    max-width: none;
    position: relative;
    width: 100%;
}
.productView-images .skda-stack--locked > .skda-zoomwrap > img {
    height: 100% !important;
    inset: 0;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain;
    position: absolute;
    width: 100% !important;
}
/* the row sits directly under the box, flush left (theme.css centres it for the
   shrink-wrapped single image) */
.productView-images:has(.skda-stack--locked) .skda-thumbs {
    justify-content: flex-start !important;
    margin-top: 14px;
}

/* Below 1261px the stock strip shows (the stack is large screens only).  It floated 81px
   items three to a row; this is a 6-column grid - up to six across, then wrap.  The strip's
   clearfix ::before/::after would otherwise become grid items and push the first thumbnail
   one column right. */
@media (max-width: 1260px) {
    .productView-images .productView-thumbnails {
        display: grid !important;
        gap: 8px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        margin: 12px 0 0 !important;
        padding: 0 !important;
    }
    .productView-images .productView-thumbnails::before,
    .productView-images .productView-thumbnails::after {
        content: none !important;
        display: none !important;
    }
    /* theme.css sizes and spaces these items with rules that outrank plain ones
       (float, an 81px width, a 24px right margin on all but the last) */
    .productView-images .productView-thumbnails .productView-thumbnail {
        float: none !important;
        margin: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }
    .productView-images .productView-thumbnails .productView-thumbnail-link {
        aspect-ratio: 1 / 1;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.14);
        border-radius: 8px;
        box-sizing: border-box;
        display: block !important;
        height: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: hidden;
        padding: 3px;
        width: 100% !important;
    }
    .productView-images .productView-thumbnails .productView-thumbnail-link img {
        display: block !important;
        height: 100% !important;
        object-fit: contain;
        width: 100% !important;
    }
}

/* ------------------------------------------------------- trade quantity box (2.6.4)
   .sk-qty also carries .sk-q so its "Quantity" heading takes every existing question-header
   rule (size, weight, spacing, the phone sizes). On a multi-question page it is a direct
   child and gets the same auto top margin as the other questions; on a single-question page
   it sits inside that question, 28px below it (the multi-page row-gap). */
.sk-pg:not(.sk-multi) > .sk-qty { margin-top: 28px !important; }
.sk-qty-box {
    display: inline-flex; align-items: stretch; height: 60px;
    border: 1px solid #d2d2d7; border-radius: 12px; background: rgba(255, 255, 255, .85);
    overflow: hidden;
}
.sk-qty-box button {
    width: 56px; border: 0; background: transparent; padding: 0; margin: 0;
    font: 400 24px/1 Roboto, Arial, sans-serif; color: #1d1d1f; cursor: pointer;
}
.sk-qty-box button:hover { background: rgba(0, 0, 0, .04); }
.sk-qty-box button:disabled { color: #c7c7cc; cursor: default; background: transparent; }
.sk-qty-box input {
    width: 84px; height: auto; border: 0; border-left: 1px solid #d2d2d7; border-right: 1px solid #d2d2d7;
    border-radius: 0; background: transparent; padding: 0; margin: 0; box-shadow: none;
    text-align: center; font: 500 18px Roboto, Arial, sans-serif; color: #1d1d1f;
}
.sk-qty-box input:focus { outline: none; box-shadow: inset 0 0 0 2px #0071e3; }