:root {
    --ncc-blue: #00008B; /* Dark Blue */
    --ncc-red: #D32F2F;  /* Deep Red */
    --ncc-khaki: #F0E68C; /* Khaki/Goldish */
    --ncc-bg: #f8f9fa;
}

body {
    background-color: var(--ncc-bg);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- Color Utilities --- */
.bg-ncc-blue { background-color: var(--ncc-blue) !important; }
.bg-ncc-red { background-color: var(--ncc-red) !important; }
.text-ncc-blue { color: var(--ncc-blue) !important; }
.text-ncc-red { color: var(--ncc-red) !important; }
.text-ncc-khaki { color: var(--ncc-khaki) !important; }

/* --- Button Definitions --- */
.btn-ncc-blue {
    background-color: var(--ncc-blue);
    border-color: var(--ncc-blue);
    color: white;
}
.btn-ncc-blue:hover {
    background-color: #000060;
    border-color: #000060;
    color: white;
}

.btn-ncc-red {
    background-color: var(--ncc-red);
    border-color: var(--ncc-red);
    color: green;
    
}

/* The Fix: Khaki button with dark text for clear visibility against blue header */
.btn-ncc-khaki {
    background-color: var(--ncc-khaki) !important;
    border-color: var(--ncc-khaki) !important;
    color: #212529 !important; /* Dark text */
    font-weight: 600;
}
.btn-ncc-khaki:hover {
    background-color: #e6da7a !important;
    border-color: #e6da7a !important;
    color: #000 !important;
}

/* --- Search Bar Styling --- */
.search-wrapper {
    background: #fff;
    border-radius: 50px;
    padding: 2px 2px 2px 15px;
    display: flex;
    align-items: center;
    border: 1px solid var(--ncc-khaki);
    transition: all 0.3s ease;
}
.search-wrapper:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(240, 230, 140, 0.25);
}
.search-wrapper .form-control {
    border: none !important;
    box-shadow: none !important;
    padding-left: 0;
}
.search-wrapper .btn-search {
    border-radius: 50px;
    padding: 8px 20px;
}

/* --- Product Card --- */
.product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    border-radius: 12px;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
.product-img-wrapper {
    height: 250px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-img-wrapper img {
    max-height: 100%;
    width: auto;
}