/* Scoped Swiper.js Container */
.color-grid-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-width: 1058px; /* Maximum width for the grid slider */
    margin: 0 auto; /* Center align the grid */
}

.swiper-wrapper {
    display: flex;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Prevent collapse during initialization */
.swiper-container {
    min-height: 200px; /* Fallback height for grid layout */
    opacity: 0; /* Hide container until Swiper is ready */
    transition: opacity 0.3s ease; /* Smooth appearance */
}

.swiper-container.swiper-initialized {
    opacity: 1; /* Reveal after initialization */
}


/* Scoped Color Grid */
.color-grid {
    display: grid;
    grid-template-columns: repeat(8, calc((100% - (7 * var(--horizontal-gap, 5px))) / 8)); /* Dynamically calculate column width */
    gap: var(--horizontal-gap, 5px) var(--vertical-gap, 5px); /* Configurable gap */
    justify-content: center;
    max-width: 958px; /* Ensure grid respects the slider's max width */
    margin: 0 auto;
}

/* Grid Item */
.grid-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1; /* Maintain square shape */
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Overlay Text */
.color-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Swiper Navigation */
.swiper-button-next,
.swiper-button-prev {
    color: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    font-size: 24px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-button-prev {
    left: -60px; /* Move further outside the grid */
}

.swiper-button-next {
    right: -60px; /* Move further outside the grid */
}

/* Swiper Pagination */
.swiper-pagination {
    margin-top: 15px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }

    .swiper-button-prev {
        left: -40px;
    }

    .swiper-button-next {
        right: -40px;
    }

    .color-grid {
        grid-template-columns: repeat(4, calc((100% - (3 * var(--horizontal-gap, 5px))) / 4)); /* Adjust to 4 columns for smaller screens */
    }
}