/* Shared styles for modern product cards and category controls; loaded once per page. */
.modern-shop {
        font-family: 'Inter', sans-serif;
    }

    .hero-bg {
        width: 100%;
        object-fit: cover;
        z-index: 1;
    }

    .category-overlay {
        position: relative;
        z-index: 10;
    }

    .category-card {
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    }

    .nav-arrows .btn {
        transition: background 0.2s;
    }

    .nav-arrows .btn:hover {
        background: #f8f9fa;
    }

    .pill-filters .filter-pill {
        transition: background 0.2s, color 0.2s, padding 0.2s;
    }

    .pill-filters .filter-pill:hover:not(.active) {
        background-color: #f8f9fa;
    }

    .modern-product-card {
        border: 1px solid #f1f3f5;
        border-radius: 16px;
        transition: transform 0.2s, box-shadow 0.2s;
        background: #fff;
    }

    .modern-product-card:hover {
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
        transform: translateY(-4px);
    }

    .status-badge {
        top: 12px;
        left: 12px;
        z-index: 2;
        font-weight: 600;
        letter-spacing: 0.5px;
        font-size: 11px;
    }

    .btn-add-cart {
        background-color: #ef4444;
        border-color: #ef4444;
        transition: background-color 0.2s, transform 0.1s;
    }

    .btn-add-cart:hover {
        background-color: #dc2626;
        border-color: #dc2626;
        transform: scale(1.02);
    }