/* Target color attribute containers by common patterns */
[id*="Attribute"][id*="_container"]:has(.attributecolorlist),
.attribute-color-container,
.color-attribute-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

    /* Adjust the container for the color selection interface */
    [id*="Attribute"][id*="_container"]:has(.attributecolorlist) .attr-value,
    .attribute-color-container .attr-value,
    .color-attribute-container .attr-value {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Make the filter section wider */
    [id*="Attribute"][id*="_container"]:has(.attributecolorlist) .filter,
    .attribute-color-container .filter,
    .color-attribute-container .filter {
        width: 25% !important;
        max-width: 25% !important;
    }


@media (prefers-reduced-motion: no-preference) {
    @media (prefers-reduced-motion: no-preference) {
        @media (max-width: 1440px) {
            [id*="Attribute"][id*="_container"]:has(.attributecolorlist) .color, .attribute-color-container .color, .color-attribute-container .color {
                flex: 0 0 calc(14.285% - 10px) !important;
                padding: 2px 2px 2px;
            }
        }
    }
}

.productboxselected {
    border: 3px solid #008000 !important;
}

.icon-label {
    margin-right: 40px;
    margin-top: -16px;
    font-size: 15px !important;
    color: white !important;
    padding: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    border-radius: 5px;
    background: #008000;
}

.attributecolorlist {
    display: flex;
    flex-flow: row wrap;
    position: relative;
    width: 100%;
}

    .attributecolorlist .color {
        margin-right: 5px;
        padding: 0 !important;
        text-transform: uppercase;
    }

        .attributecolorlist .color .productbox {
            position: relative;
            min-width: 126px;
            border: 1px solid #a8a8a8;
            padding: 5px;
            line-height: 1.5;
            font-size: 10px;
            max-width: 117px;
            border-radius: 5px;
        }

            .attributecolorlist .color .productbox .option {
                color: #007ba4;
            }

            .attributecolorlist .color .productbox .zoomimage {
                display: none;
                position: absolute;
                max-width: 600px;
            }

                .attributecolorlist .color .productbox .zoomimage img {
                }

            .attributecolorlist .color .productbox .tooltip-container {
                display: none;
                width: 300px;
            }

            .attributecolorlist .color .productbox .tooltip-body img {
                width: 300px;
            }

            .attributecolorlist .color .productbox img {
            }

            .attributecolorlist .color .productbox:hover .tooltip-container {
                visibility: visible;
                display: block;
                margin-right: -83px;
                margin-top: 5px;
                z-index: 999;
                top: 118%;
                right: 79px;
            }

                .attributecolorlist .color .productbox:hover .tooltip-container:before {
                    margin-right: -207px;
                    border-bottom: 7px solid lightgray;
                }

                .attributecolorlist .color .productbox:hover .tooltip-container:after {
                    margin-right: -206px;
                }

        .attributecolorlist .color .selectbutton {
            border: 1px solid #a8a8a8;
            padding: 5px;
            margin-top: 2px;
            font-size: 12px;
            color: #007ba4;
            font-weight: bold;
            cursor: pointer;
            float: right;
            width: 49%;
        }

            .attributecolorlist .color .selectbutton .icon {
                color: #666666;
                padding-right: 15px
            }

        .attributecolorlist .color .productbox:hover {
            border-color: #008000;
            border: 2px solid #008000;
        }

        .attributecolorlist .color .selected-value {
            border-color: #008000;
            border: 2px solid #008000;
        }


        .attributecolorlist .color .cartbutton {
            padding: 5px;
            margin-top: 2px;
            font-size: 12px;
            color: #007ba4;
            font-weight: bold;
            cursor: pointer;
        }

            .attributecolorlist .color .cartbutton .icon {
                color: #666666;
                padding-right: 5px;
                font-size: 14px !important;
            }


.ColorInfo {
    color: rgb(182, 182, 182) !important;
    font-size: 10px !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.colorAttributeBox {
    padding: 0 !important;
    display: flex;
    align-items: flex-start;
    margin-left: -20px;
}


.filter {
    flex: 1;
    padding: 20px;
}

.attributecolorsandorder {

    flex: 2;
}




.filtertitle {
    font-size: 14px !important;
    padding: 0 !important;
  
}

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

    .filter-controls select,
    .filter-controls input[type="text"] {
        flex: 1;
        min-width: 180px;
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: var(--border-radius);
        font-size: 0.95rem;
        transition: var(--transition);
    }

        .filter-controls select:focus,
        .filter-controls input[type="text"]:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.2);
        }


.attributes .filter .filterbutton3 {
    padding: 13px 15px;
    border: 0;
    background: #008000;
    font-size: 14px;
    color: #fff;
    width: 100%;
}

.attributes .filter .filterbutton2 {
    padding: 13px 15px;
    border: 0;
    background: #ea944d;
    font-size: 14px;
    color: #fff;
    width: 100%;
}

.filterbutton2:hover,
.filterbutton3:hover {
    background-color: #0056b3;
}

.option {
    background-color: #ebf8fc !important;
    border: 1px solid #aaccd7 !important;
    color: #666 !important;
    margin-top: 5px;
}

.input {
    background-color: #ebf8fc !important;
    border: 1px solid #aaccd7 !important;
    color: #666 !important;
    margin-top: 5px;
    margin-bottom: 5px;
}

@media (max-width: 1440px) {
    [id*="Attribute"][id*="_container"]:has(.attributecolorlist) .color,
    .attribute-color-container .color,
    .color-attribute-container .color {
        flex: 0 0 calc(14.285% - 10px) !important; /* 7 items per row */
    }
}

/* Desktop */
@media (max-width: 1200px) {
    [id*="Attribute"][id*="_container"]:has(.attributecolorlist) .color,
    .attribute-color-container .color,
    .color-attribute-container .color {
        flex: 0 0 calc(16.666% - 10px) !important; /* 6 items per row */
    }
}

/* Small desktop / Tablet landscape */
@media (max-width: 992px) {
    [id*="Attribute"][id*="_container"]:has(.attributecolorlist) .color,
    .attribute-color-container .color,
    .color-attribute-container .color {
        flex: 0 0 calc(20% - 10px) !important; /* 5 items per row */
    }
}

/* Tablet */
@media (max-width: 768px) {
    [id*="Attribute"][id*="_container"]:has(.attributecolorlist) .color,
    .attribute-color-container .color,
    .color-attribute-container .color {
        flex: 0 0 calc(25% - 10px) !important; /* 4 items per row */
    }
}

/* Mobile landscape */
@media (max-width: 576px) {
    [id*="Attribute"][id*="_container"]:has(.attributecolorlist) .color,
    .attribute-color-container .color,
    .color-attribute-container .color {
        flex: 0 0 calc(33.333% - 10px) !important; /* 3 items per row */
    }
}



/* Small mobile */
@media (max-width: 360px) {
    [id*="Attribute"][id*="_container"]:has(.attributecolorlist) .color,
    .attribute-color-container .color,
    .color-attribute-container .color {
        flex: 0 0 calc(50% - 5px) !important; /* 2 items per row with less spacing */
    }
}

/* ===== FALLBACK FOR BROWSERS THAT DON'T SUPPORT :has() ===== */
/* This will target based on common class patterns as fallback */
[class*="color-attribute"],
[class*="AttributeColor"],
.attributecolorlist {
    width: 100% !important;
    max-width: 100% !important;
}

    .attributecolorlist .color {
        flex: 0 0 calc(12.5% - 10px) !important;
        margin: 5px !important;
        box-sizing: border-box !important;
    }


@media (max-width: 768px) {
    .filter-controls {
        flex-direction: column;
    }

        .filter-controls select,
        .filter-controls input[type="text"] {
            min-width: 100%;
        }

    .attributecolorlist {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 480px) {


    .filter-buttons {
        flex-direction: column;
    }

    .filterbutton3, .filterbutton2 {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 769px) {

    .attributes .filter {
        display: none;
    }

   
}