form.cgkit-swatch-form table.variations {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

form.cgkit-swatch-form table.variations tbody,
form.cgkit-swatch-form table.variations tr,
form.cgkit-swatch-form table.variations td.value {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
}

form.cgkit-swatch-form table.variations tr {
    table-layout: fixed;
}

form.cgkit-swatch-form .cgkit-as-wrap-plp,
form.cgkit-swatch-form .cgkit-as-wrap-plp fieldset.cgkit-attribute-swatches-wrap {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
}

form.cgkit-swatch-form .cgkit-as-wrap-plp fieldset.cgkit-attribute-swatches-wrap {
    position: relative;
}

form.cgkit-swatch-form .cgkit-as-wrap-plp
ul.cgkit-attribute-swatches[data-attribute="attribute_pa_colour"] {
    display: flex;
    flex-wrap: nowrap;
    /* Centre short rows; keep overflowing rows accessible from the first swatch. */
    justify-content: flex-start;
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Neutralize CommerceKit's centred-list offset on a full-width mobile rail. */
    margin: 0;
    padding-block: 3px;
    scrollbar-width: none;
}

form.cgkit-swatch-form .cgkit-as-wrap-plp
ul.cgkit-attribute-swatches[data-attribute="attribute_pa_colour"]::-webkit-scrollbar {
    display: none;
}

form.cgkit-swatch-form .cgkit-as-wrap-plp
ul.cgkit-attribute-swatches[data-attribute="attribute_pa_colour"] > li {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

form.cgkit-swatch-form .cgkit-as-wrap-plp
ul.cgkit-attribute-swatches[data-attribute="attribute_pa_colour"]
> li.cgkit-attribute-swatch[data-cgkit-tooltip]::before,
form.cgkit-swatch-form .cgkit-as-wrap-plp
ul.cgkit-attribute-swatches[data-attribute="attribute_pa_colour"]
> li.cgkit-attribute-swatch[data-cgkit-tooltip]::after {
    display: none !important;
}

form.cgkit-swatch-form .cgkit-as-wrap-plp .pronto-loop-swatches__previous,
form.cgkit-swatch-form .cgkit-as-wrap-plp .pronto-loop-swatches__next {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 28px;
    min-width: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #555;
    cursor: pointer;
}

/* Keep control boxes stable when leaving either scroll endpoint. */
body form.cgkit-swatch-form .cgkit-as-wrap-plp
.pronto-loop-swatches__previous[hidden],
body form.cgkit-swatch-form .cgkit-as-wrap-plp
.pronto-loop-swatches__next[hidden] {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

form.cgkit-swatch-form .cgkit-as-wrap-plp .pronto-loop-swatches__previous {
    left: 0;
    background: linear-gradient(to left, transparent, #fff 45%);
}

form.cgkit-swatch-form .cgkit-as-wrap-plp .pronto-loop-swatches__next {
    right: 0;
    background: linear-gradient(to right, transparent, #fff 45%);
}

form.cgkit-swatch-form .cgkit-as-wrap-plp .pronto-loop-swatches__previous::before,
form.cgkit-swatch-form .cgkit-as-wrap-plp .pronto-loop-swatches__next::before {
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: '';
}

form.cgkit-swatch-form .cgkit-as-wrap-plp .pronto-loop-swatches__previous::before {
    transform: rotate(-135deg);
}

form.cgkit-swatch-form .cgkit-as-wrap-plp .pronto-loop-swatches__next::before {
    transform: rotate(45deg);
}

form.cgkit-swatch-form .cgkit-as-wrap-plp .pronto-loop-swatches__previous:focus-visible,
form.cgkit-swatch-form .cgkit-as-wrap-plp .pronto-loop-swatches__next:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}