:root {
    --primary-red: #dc143c;
    --primary-dark: #8b0000;
    --deep-red: #800000;
    --light-red: #ffe4e1;
    --hover-red: #b22222;
    --text-dark: #212529;
    --border-color: #dee2e6;
    --muted-text: #6c757d;
    --success-green: #28a745;
    --error-red: #dc3545;
    --warning-orange: #ffc107;
}


/* carousel */
.modern-carousel {
    max-width: 900px;
    margin: 2.5rem auto 2rem auto; /* Add top margin here */
}
.carousel-inner {
    border-radius: 1.5rem;
    overflow: hidden;
}
.carousel-item img {
    height: 220px;         /* Reduce this value for a shorter slideshow */
    object-fit: cover;
    width: 100%;
}
.carousel-caption {
    background: rgba(0,0,0,0.45);
    border-radius: 0.75rem;
    padding: 1.2rem 2rem;
    left: 10%;
    right: 10%;
    bottom: 2rem;
}
.carousel-caption h5, .carousel-caption p {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #e91e63;
    border-radius: 50%;
    padding: 0.7rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
    .carousel-item img {
        height: 180px;
    }
    .carousel-caption {
        padding: 0.7rem 1rem;
        font-size: 0.95rem;
    }
}



#featured{
    margin-top: 2rem;
}

#featured .pagination{
    align-items: center;
    display: flex;
    justify-content: center;
}

#featured .row h3{
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

#featured p{
    margin-bottom: 0;
}

#featured .ads{
    color: goldenrod;
    margin-bottom: 0;
}

/* Product card compact layout */
#featured .row {
    justify-content: center;
}

/* Featured product cards: matching shop.css flexible approach */
#featured .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem;
    padding-bottom: 1rem;
    scroll-behavior: smooth;
}

#featured .product {
    cursor: pointer;
    text-align: left;
    min-width: 240px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 0;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
    padding: 1rem 0.75rem;
}

#featured .product:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

#featured .product .img-fluid {
    margin-bottom: 0.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto; 
    transition: transform 0.2s ease;
    border-radius: 10px;
}

#featured .product h3 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

/* Price and discount container - side by side */
#featured .product .price-discount-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
    gap: 0.5rem;
}

/* Price styling */
#featured .product .price-container {
    flex: 1;
    text-align: left;
}

#featured .product .price-container .current-price {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.current-price .currency {
    font-size: 0.75em;
    font-weight: normal;
    margin-right: 1px;
}

#featured .product .price-container .original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9rem;
    margin-left: 0.25rem;
}

.original-price .currency {
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: normal;
    margin-right: 1px;
}

/* Discount sticker */
#featured .product .discount-sticker {
    background-color: #ff4444;
    color: white;
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: bold;
}

/* Rating and sold info container */
#featured .product .rating-sold-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

/* Rating styling */
#featured .product .rating-info {
    flex: 1;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

#featured .product .rating-info i {
    font-size: 0.8rem;
}

#featured .product .rating-info .rating-text {
    font-size: 0.75rem;
    color: #666;
}

/* Sold count in middle */
#featured .product .sold-info {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    margin-bottom: 0;
}

/* Premium quality on right */
#featured .product .quality-info {
    flex: 1;
    text-align: right;
    font-size: 0.75rem;
    margin-bottom: 0;
}

/* Total sold styling */
#featured .product .total-sold {
    text-align: left;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Button container */
#featured .product .button-container {
    margin-top: 0.5rem;
}

#featured .product .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    width: 100%;
}

/* seller card section */
.seller-shops {
    background-color: #f8f9fa;
    padding: 40px 0;
}

.seller-shop-card {
    transition: all 0.3s ease;
    background: white;
    height: 100%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.seller-shop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: #007bff;
}

.seller-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.seller-shop-logo {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #e9ecef;
}

.seller-logo-placeholder {
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.store-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-stats-mini small {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 2px;
}

.store-stats-mini i {
    width: 12px;
    margin-right: 4px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .seller-shop-card {
        min-height: 180px;
    }
    
    .seller-shop-logo, .seller-logo-placeholder {
        width: 50px;
        height: 50px;
    }
    
    .store-name {
        font-size: 14px;
        min-height: 35px;
    }
    
    .seller-logo-placeholder i {
        font-size: 20px;
    }
}


/* Watches section - same flexible approach */
#watches .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem;
    padding-bottom: 1rem;
    scroll-behavior: smooth;
}

#watches .product {
    cursor: pointer;
    text-align: left;
    min-width: 240px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 0;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
    padding: 1rem 0.75rem;
}

#watches .product:hover {
    transform: scale(1.02);
}

#watches .product .img-fluid {
    margin-bottom: 0.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.2s ease;
    border-radius: 10px;
}

#watches .product .button-container {
    margin-top: 0.5rem;
}

#watches .product .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    width: 100%;
}

/* Bags section - same flexible approach */
#bags .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem;
    padding-bottom: 1rem;
    scroll-behavior: smooth;
}

#bags .product {
    cursor: pointer;
    text-align: left;
    min-width: 240px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 0;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
    padding: 1rem 0.75rem;
}

#bags .product:hover {
    transform: scale(1.02);
}

#bags .product .img-fluid {
    margin-bottom: 0.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.2s ease;
    border-radius: 10px;
}

#bags .product .button-container {
    margin-top: 0.5rem;
}

#bags .product .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    width: 100%;
}

/* Make brand section scroll horizontally and prevent wrapping */
.brand .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem;
    padding-bottom: 1rem;
    scroll-behavior: smooth;
}

.brand-item {
    min-width: 180px;
    max-width: 220px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Mobile adjustments for Featured, Watches, and Bags sections */
@media (max-width: 600px) {
    /* Fix container padding to prevent first item from being cut off */
    /* Reset the section itself */
    #featured {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    #watches,
    #bags {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Target the exact row structure */
    #featured .row.mx-auto.container-fluid,
    #watches .row.mx-auto.container-fluid,
    #bags .row.mx-auto.container-fluid {
        gap: 0.6rem;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Target just the .row class inside sections */
    #featured .row,
    #watches .row,
    #bags .row {
        gap: 0.6rem;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: flex-start !important; /* Override center alignment */
    }
    
    /* Override any container behavior */
    #featured .container,
    #featured .container-fluid,
    #watches .container-fluid,
    #bags .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    /* Make cards wider so only 2 fit at a time */
    #featured .product,
    #watches .product,
    #bags .product {
        min-width: 47%;
        max-width: 47%;
        min-height: 280px; /* Give cards a minimum height */
        height: auto; /* Allow to grow if needed */
        padding: 0.7rem 0.5rem;
        display: flex;
        flex-direction: column;
    }
    
    /* Adjust image height - Make it bigger */
    #featured .product .img-fluid,
    #watches .product .img-fluid,
    #bags .product .img-fluid {
        max-width: 100%;
        height: auto; 
        margin-bottom: 0.4rem;
    }
    
    /* Adjust product name */
    #featured .product h3,
    #watches .product h3,
    #bags .product h3 {
        font-size: 0.85rem;
        min-height: auto;
        max-height: none;
        margin-bottom: 0.3rem;
    }
    
    /* Remove auto margin on button container to eliminate gap */
    #featured .product .button-container,
    #watches .product .button-container,
    #bags .product .button-container {
        margin-top: 0.4rem; /* Fixed small margin instead of auto */
    }
    
    /* Adjust button size */
    #featured .product .btn,
    #watches .product .btn,
    #bags .product .btn {
        font-size: 0.7rem;
        padding: 0.35rem 0.6rem;
    }
    
    /* Adjust price/discount container */
    #featured .product .price-discount-container,
    #watches .product .price-discount-container,
    #bags .product .price-discount-container {
        margin-bottom: 0.25rem;
    }
    
    /* Adjust rating/sold container */
    #featured .product .rating-sold-container,
    #watches .product .rating-sold-container,
    #bags .product .rating-sold-container {
        margin-bottom: 0.25rem;
    }
    
    /* Smaller price text */
    #featured .product .price-container .current-price,
    #watches .product .price-container .current-price,
    #bags .product .price-container .current-price {
        font-size: 0.95rem;
    }
    
    #featured .product .price-container .original-price,
    #watches .product .price-container .original-price,
    #bags .product .price-container .original-price {
        font-size: 0.75rem;
    }
    
    /* Reduce spacing around section headers and content */
    #featured .container.text-center,
    #watches .container.text-center,
    #bags .container.text-center,
    .seller-shops .container.text-center {
        margin-top: 1rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Reduce section header sizes */
    #featured .container h3,
    #watches .container h3,
    #bags .container h3,
    .seller-shops .container h3 {
        font-size: 1.3rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Reduce paragraph spacing */
    #featured .container p,
    #watches .container p,
    #bags .container p,
    .seller-shops .container p {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Reduce hr line margins */
    #featured .container hr,
    #watches .container hr,
    #bags .container hr,
    .seller-shops .container hr {
        margin-top: 0.3rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Reduce section spacing */
    #featured,
    #watches,
    #bags {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .seller-shops {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Reduce banner section spacing if present */
    .banner {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .banner h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.5rem !important;
        color: #c21010;
    }
    
}