:root {
    --silver-gradient: linear-gradient(
        166deg,
        rgba(150, 150, 150, 1) 0%,
        rgba(224, 222, 222, 1) 100%
    );
    --gold-gradient: linear-gradient(541deg, #e4b440 0%, #cfa031 100%);
}
.product-card {
    border: 2px solid transparent;
    background: none;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image: linear-gradient(white, white), var(--silver-gradient);
}
.sales {
    background-image: linear-gradient(white, white), var(--gold-gradient);
}
.sale-badge {
    background: var(--gold-gradient);
}
.sale-price {
    color: #cfa031;
}
.add-to-cart-btn {
    background: var(--silver-gradient);
}
.sales-add-to-cart-btn {
    background: var(--gold-gradient);
    color: black;
}
.notAvailable {
    border-color: black !important;
}
.sold-out-btn {
    background: black !important;
    color: white;
}
.sold-out-overlay {
    background: var(--silver-gradient);
}
.watches-page .path {
    color: black;
}
.watches-page .search-input {
    border: 2px solid transparent;
    background: none;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image: linear-gradient(white, white), var(--silver-gradient);
}
.watches-page .search-btn {
    background: var(--silver-gradient);
}
.watches-page .search-icon {
    content: url("/img/black-search.svg");
    filter: none;
}

.watches-page .logo-mobile img {
    content: url("/img/watches-logo.png");
}
.watches-page .cart-quantity {
    background: #cfa031;
}
.watches-page .burger img {
    content: url("/img/black-burger.svg");
}
.watches-page .navbar {
    background-color: #cfa031;
}
.watches-page footer {
    background-color: #cfa031;
}
.watches-page .poweredBy {
    background-color: #cfa031 !important;
}
/* Fix for color dots not showing below images */
.color-dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 10px 0 4px; /* Add small spacing top and bottom */
    position: relative;
    z-index: 5;
}

.product-card .card-image {
    overflow: visible !important; /* allow dots to appear below the image */
}

.color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #bdbdbd;
    cursor: pointer;
    transition: transform 0.2s ease, border 0.2s ease;
}

.color-dot:hover {
    transform: scale(1.1);
}

.color-dot.active-dot {
    border: 2px solid #2a2670;
}
.watches-page marquee {
    color: rgba(150, 150, 150, 1);
}
/* Slider area */
.watch-slider {
    width: 100%;
    height: 250px; /* match your .card-image height */
    overflow: hidden; /* hide overflow, no native scrollbar */
    position: relative;
}
.watch-track {
    display: flex;
    height: 100%;
    transition: transform 280ms ease; /* smooth but snappy */
    will-change: transform;
}
.watch-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Dots */
.color-dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 4px;
}
.color-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #bdbdbd;
    cursor: pointer;
    transition: transform 0.15s ease, border 0.15s ease;
}
.color-dot:hover {
    transform: scale(1.08);
}
.color-dot.active-dot {
    border-color: #2a2670;
}

/* Ensure card text has space (avoid overlap) */
.card-details {
    margin-top: 4px;
}

@media (max-width: 768px) {
    .watches-page .navbar {
        background-color: white;
    }
    .watches-page .cart-quantity {
        background-color: white;
        box-shadow: 0 0 0 2px black;
        color: black;
    }
    .watches-page .icon {
        content: url("/img/black-cart.svg");
    }
    .watches-page footer {
        background-color: rgba(150, 150, 150, 1);
    }
    .watches-page .poweredBy {
        background-color: rgba(150, 150, 150, 1) !important;
    }
    .color-dots-container {
        margin: 20px 0 4px;
    }
}