:root {
    --blue: #113CA5;
    --blue-dark: #C1DEFE;
    --indigo: #2D3AB8;
    --light-blue: #C7D1FF;
    --peach: #FFB07C;
    --orange: #FF6A2B;
    --ink: #222222;
    --offwhite: #F7F9FF;
    --soft: #E4E9FF;
}

/* Typography */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;600;700;900&display=swap');

:root {
    --title-font: "PP Formula Black", "Bebas Neue", system-ui, sans-serif;
    --body-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

html, body {
    font-family: var(--body-font);
    color: var(--ink);
    background: white;
}

.brand-title {
    font-family: var(--title-font);
    letter-spacing: 0.5px;
}

.btn-brand {
    background: var(--blue);
    border: none;
    color: white;
    font-weight: 700;
    border-radius: 14px;
    padding: .7rem 1.1rem;
    transition: transform .15s ease, filter .15s ease;
}

    .btn-brand:hover {
        filter: brightness(0.95);
        transform: translateY(-1px);
    }

.badge-pill {
    border-radius: 999px;
    padding: .5rem .9rem;
    background: var(--soft);
    color: var(--blue-dark);
    font-weight: 600;
}

.navbar-brand img {
    height: 40px;
}

/* Hero */
.hero {
    background: linear-gradient(180deg, var(--blue) 0%, var(--indigo) 100%);
    color: white;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

    .hero .display-3 {
        font-family: var(--title-font);
        font-weight: 900;
        line-height: .95;
    }

.search-bar {
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    overflow: hidden;
}

    .search-bar .form-control {
        border: none;
        padding: 1rem 1.1rem;
    }

    .search-bar .btn {
        border-radius: 0;
    }

/* Cards */
.card-product {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .2s ease;
}

    .card-product:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(0,0,0,.12);
    }

    .card-product .badge-cat {
        position: absolute;
        top: 12px;
        left: 12px;
        background: rgba(255,255,255,.9);
        color: var(--blue-dark);
        padding: .35rem .6rem;
        border-radius: 999px;
        font-weight: 700;
        font-size: .8rem;
    }

.price {
    color: var(--orange);
    font-weight: 800;
}

/* Sidebar filters */
.filter-group h6 {
    font-weight: 800;
}

.form-check-input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}

/* Footer */
.footer {
    background: #113CA5;
    color: #fff;
}

    .footer a {
        color: #fff;
        opacity: .9;
    }

        .footer a:hover {
            opacity: 1;
        }

.rounded-2xl {
    border-radius: 1rem;
}

.shadow-soft {
    box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

/* Accessible focus */
:focus-visible {
    outline: 3px solid var(--light-blue);
    outline-offset: 2px;
}