/* Overzicht / Prikbord layout */
body {
    background: #f7f8fb;
}

.container.py-4,
.container.py-5 {
    max-width: 1320px;
}

/* Top nav buttons */
.btn.btn-light.border.rounded-pill {
    background: #fff;
    border-color: #e2e6ea;
    color: #1f2937;
    transition: all .18s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.btn.btn-light.border.rounded-pill:hover {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(13,110,253,.16);
}

/* Toppers */
.category-card,
.ad-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    background: #fff;
}

.category-card:hover,
.ad-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08) !important;
}

.card.rounded-4 {
    border-radius: 16px !important;
}

.card-img-top {
    width: 100%;
}

/* Toppers title */
h1.h3,
h2.h4 {
    color: #111827;
    font-weight: 700;
}

/* Price */
.text-success.fw-bold,
.text-success {
    color: #2f9e44 !important;
}

/* Category grid */
.category-card .card-body {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.category-card i {
    color: #0d6efd;
    opacity: .9;
}

/* Search / hero panel */
.bg-light.rounded-4,
.p-4.p-md-5.bg-light.rounded-4 {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #e9ecef;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

/* Info cards */
.card.border.rounded-4.shadow-sm {
    background: #fff;
}

.card.border.rounded-4.shadow-sm:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}

/* Utility */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .btn.btn-light.border.rounded-pill {
        width: 100%;
        justify-content: center;
    }

    .d-flex.flex-wrap.gap-2.mb-4 {
        gap: .5rem !important;
    }
}

.prikbord-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.prikbord-sidebar {
    position: sticky;
    top: 1rem;
    align-self: start;
}

.prikbord-main {
    min-width: 0;
}

.prikbord-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e6e9ef;
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.panel-head {
    padding: 1rem 1rem .75rem;
    border-bottom: 1px solid #e6e9ef;
}

.panel-body {
    padding: 1rem;
}

.section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #111827;
}

.section-subtitle {
    color: #6b7280;
    font-size: .92rem;
    margin-top: .2rem;
}

.sidebar-links {
    display: grid;
    gap: .65rem;
}

.sidebar-links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .95rem 1rem;
    border-radius: 16px;
    text-decoration: none;
    color: #18212f;
    background: #fff;
    border: 1px solid #e6e9ef;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.sidebar-links a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #0d6efd 0%, #2f9e44 100%);
    opacity: 0;
    transition: opacity .18s ease;
}

.sidebar-links a:hover {
    transform: translateX(4px);
    border-color: rgba(13, 110, 253, .22);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .09);
}

.sidebar-links a:hover::before {
    opacity: 1;
}

.sidebar-links i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0d6efd;
    flex: 0 0 22px;
}

.sidebar-links span {
    font-weight: 600;
    line-height: 1.2;
}

.sidebar-links a:hover span {
    color: #0b5ed7;
}

@media (max-width: 1199.98px) {
    .prikbord-shell {
        grid-template-columns: 1fr;
    }

    .prikbord-sidebar {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .panel-body {
        padding: .85rem;
    }

    .sidebar-links a {
        padding: .85rem .95rem;
        border-radius: 14px;
    }
}