/* Wrapper for the carousel to handle positioning of arrows */
.product .dm-carousel-wrapper {
    position: relative;
    width: 100%;
    padding: 10px 25px 0 25px;
    /* Top padding + space for arrows */
    box-sizing: border-box;
}

/* The scrollable container */
.product .dm-colors {
    display: flex;
    flex-wrap: nowrap;
    /* Prevent wrapping */
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 5px;
    align-items: center;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    justify-content: flex-start;
    /* Align items to start */
    margin: 0 !important;
    /* Override original margin */
    width: 100%;
}

/* Hide scrollbar for Chrome/Safari/Opera */
.product .dm-colors::-webkit-scrollbar {
    display: none;
}

/* Individual variant items */
.dm-colors>* {
    flex: 0 0 auto;
    /* Don't shrink or grow */
    margin: 0 !important;
    /* clear margins to use gap */
}

/* Navigation Arrows */
.dm-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Centered vertically exactly */
    width: 30px;
    /* Sized for touch target but visible icon */
    height: 30px;
    cursor: pointer;
    background-color: transparent;
    /* No background */
    border: none;
    /* No border */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-size: 24px;
    /* Larger chevron */
    color: #4a90e2;
    /* Modern bright blue, similar to typical e-commerce actions. User can adjust. */
    user-select: none;
    transition: all 0.2s ease;
    opacity: 0.7;
    /* Slight transparency when idle */
}

.dm-arrow:hover {
    background-color: transparent;
    /* Ensure no bg on hover */
    color: #2a70c2;
    /* Darker blue on hover */
    opacity: 1;
}

.dm-arrow-left {
    left: 0;
}

.dm-arrow-right {
    right: 0;
}

/* Keep existing styles for inner elements */
.product .dm-colors .yes-before::before {
    background-image: none !important;
}

.product .widget-parameter-wrapper {
    display: none;
}

.dm-colors input,
.dm-colors label span:not(.advanced-parameter-inner) {
    display: none !important;
}

.dm-colors .dm-and-more {
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    width: 60px;
    /* Restored original size */
    height: 60px;
    min-width: 60px;
}

.advanced-parameter-inner {
    padding: 2.5px !important;
    /* Restored padding */
    width: 60px;
    /* Restored original size */
    border-radius: 0;
    height: 60px;
}

.dm-advanced-parameter>span:before,
.dm-advanced-parameter>span:after {
    display: none !important;
}

.advanced-parameter {
    width: 60px;
    /* Restored original size */
    height: 60px;
}

.pseudolink {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.dm-colors .advanced-parameter-inner {
    position: relative;
}