.landing-banner{
    height: 40vh;
    background-color: black;

    background-image: url('../images/hero_background.jpg'); /* Make sure this path is correct! */

    /* Ensure the image covers the entire banner area without stretching */
    background-size: cover;

    /* Center the image within the banner */
    background-position: center center;

    /* Prevent the image from repeating if it's smaller than the banner */
    background-repeat: no-repeat;
}

/* Theme variables */
:root{
    --brand-primary: #0ea5e9; /* sky-500 */
    --brand-secondary: #f97316; /* orange-500 */
    --brand-dark: #0f172a; /* slate-900 */
    --brand-muted: #64748b; /* slate-500 */
    --brand-light: #f8fafc; /* slate-50 */
}

body{
    color: var(--brand-dark);
    background: var(--brand-light);
}

.navbar{
    border-bottom: 1px solid rgba(0,0,0,0.06);
    backdrop-filter: saturate(120%) blur(6px);
}

.navbar .navbar-brand{
    font-weight: 700;
    letter-spacing: .3px;
}

.btn-info{
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-info:hover{
    background-color: #0284c7;
    border-color: #0284c7;
}

.btn-secondary{
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}
.btn-secondary:hover{
    background-color: #ea580c;
    border-color: #ea580c;
}

/* Cards */
.product-card{
    transition: transform .2s ease, box-shadow .2s ease;
    border: 1px solid rgba(0,0,0,0.06);
}
.product-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(2, 132, 199, 0.1);
}

.product-img{
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: .5rem;
}

/* Footer */
.site-footer{
    border-top: 1px solid rgba(0,0,0,0.08);
    background: white;
}

/* Utilities */
.price{
    font-weight: 700;
}

.muted{
    color: var(--brand-muted);
}