/*
 * Force swatch attribute options onto a single horizontal row with side-scroll.
 * Loaded directly via default_head_blocks.xml (not through LESS) so the rule
 * is guaranteed to ship even before a static-content deploy.
 */
.swatch-attribute-options {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    white-space: nowrap;
}

.swatch-attribute-options > .swatch-option,
.swatch-attribute-options > .swatch-option-link-layered {
    flex: 0 0 auto !important;
    float: none !important;
    display: inline-block !important;
}

.swatch-attribute-options::-webkit-scrollbar {
    height: 6px;
}
.swatch-attribute-options::-webkit-scrollbar-track {
    background: transparent;
}
.swatch-attribute-options::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

/* Defeat the product-list rule that forces the inner swatch-attribute
 * wrapper to width:100% — once it's full-width, we still need its
 * .swatch-attribute-options child to allow horizontal overflow. */
.product-item div[class^="swatch-opt-"] > div {
    overflow: visible;
}