/* ========================================
   Header Flat Design Override
   Remove rounded corners from header to match navigation
   Match background color to bottom navigation (bg-light)
   ======================================== */

/* Target all header cards - remove rounded corners and glassmorphism */
body>.card:first-of-type,
.card:has(.bi-cart3) {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    background: #f8f9fa !important;
    /* bg-light color */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    /* Bottom shadow like navigation */
}

/* Ensure header stays flat even with glassmorphism */
.card .bi-cart3 {
    /* This selector helps identify header cards */
}

/* Alternative: target by position */
body>div:first-child>.card {
    border-radius: 0 !important;
    background: #f8f9fa !important;
    margin-bottom: 0 !important;
}

/* Make sure glassmorphism doesn't override */
.card[style*="gradient"] {
    border-radius: 0 !important;
    background: #f8f9fa !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin-bottom: 0 !important;
}