/* =========================
   PAGE HEADER
========================= */

.page-header{
    background:linear-gradient(
    rgba(15,23,42,.8),
    rgba(15,23,42,.8)),
    url('img/products-banner.jpg');

    background-size:cover;
    background-position:center;

    color:white;
    text-align:center;

    padding:70px 15px;
	margin-bottom: 30px;s
}

.page-header h1{
    font-size:3rem;
    margin-bottom:10px;
}

:root {
    --card-gap: 20px;
    --slide-speed: 25s; 
}

.best-selling-slider {
    padding: 60px 0;
    width: 100%;
    max-width: 1200px; /* Constrains it to match your site layout grid */
    margin: 0 auto;    /* Centers the entire section horizontally */
    overflow: hidden;  /* Completely hides overflowing cards */
    font-family: sans-serif;
}

.slider-container {
    width: 100%;
    position: relative;
    padding: 0 15px;   /* Prevents cards from hitting screen edges on mobile */
    box-sizing: border-box;
}

.slider-track-container {
    display: flex;
    width: 100%;
    overflow: hidden;  /* Cuts off cards outside the active viewport boundary */
}

.slider-track {
    display: flex;
    gap: var(--card-gap);
    padding: 10px 0;
    margin: 0;
    list-style: none;
    will-change: transform; /* Boosts rendering performance during loop animation */
    animation: scrollContinuous var(--slide-speed) linear infinite;
}

/* Rest of your product-card and button CSS remains exactly the same */


/* Pause the scrolling animation immediately when hovered */
.slider-track-container:hover .slider-track {
    animation-play-state: paused;
}

/* Product Cards Responsive Sizing */
.product-card {
    flex: 0 0 280px; /* Base mobile width */
    box-sizing: border-box;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 15px;
}

.product-name {
    font-size: 1.1rem;
    margin: 10px 0;
    color: #444;
}

.product-price {
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}

.view-details-btn {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
	text-decoration: none;
}

.view-details-btn:hover {
    background-color: #007bff;
}

/* Keyframe logic using CSS variable injected by JS */
@keyframes scrollContinuous {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--scroll-distance));
    }
}

/* Responsive card width adjustments */
@media (min-width: 768px) {
    .product-card {
        flex: 0 0 300px; 
    }
}