/* Base Resets & Typography */
body {
    background-color: #FAFAFA;
    color: #1A1A1A;
    -webkit-font-smoothing: antialiased;
}

/* Smooth Scrolling */
html { scroll-behavior: smooth; }

/* Custom Scrollbar for elegance */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F9F9F9; }
::-webkit-scrollbar-thumb { background: #CCCCCC; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #999999; }



/* Custom Checkbox Styling for Filter */
.custom-checkbox input:checked + div {
    background-color: #1A1A1A;
    border-color: #1A1A1A;
}
.custom-checkbox input:checked + div svg {
    display: block;
}

/* Product Card Hover Effects */
.product-card .img-container img {
    transition: transform 0.7s ease;
}
.product-card:hover .img-container img {
    transform: scale(1.05);
}
.add-to-cart-btn {
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease;
}
.product-card:hover .add-to-cart-btn {
    transform: translateY(0);
    opacity: 1;
}

/* Infinite Carousel CSS */
.carousel-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
}
.carousel-container::before {
    left: 0;
    background: linear-gradient(to right, #FAFAFA 0%, transparent 100%);
}
.carousel-container::after {
    right: 0;
    background: linear-gradient(to left, #FAFAFA 0%, transparent 100%);
}
.carousel-track {
    display: inline-flex;
    animation: scroll 35s linear infinite;
}
.carousel-track:hover {
    animation-play-state: paused;
}
.carousel-item {
    width: 280px;
    flex-shrink: 0;
    margin-right: 2rem;
    white-space: normal;
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-280px * 6 - 2rem * 6)); } /* Adjust based on item count */
}

/* Hide Element Utility */
.hidden-safely { display: none !important; }