/* ALGEMENE VARIABELEN & BASIS */
:root { 
    --blue: #123F60; 
    --orange: #F28C0B; 
    --red: #e11d48; 
    --green: #16a34a; 
    --gray-bg: #f8fafc; 
    --border: #e2e8f0;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background: var(--gray-bg); 
    margin: 0; 
    color: var(--blue); 
    line-height: 1.5;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* 1. NAVIGATIE & HEADER (GEBRUIKT OP BEIDE PAGINA'S) */
.header, .nav { 
    background: var(--blue); 
    padding: 15px 0; 
    border-bottom: 4px solid var(--orange); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}

.header-main { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 15px; 
}

.nav-wrapper { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.logo-area, .nav-left { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    text-decoration: none; 
}

.main-logo, .nav-logo { height: 40px; width: auto; }

.brand-name, .nav-brand { 
    color: white; 
    font-size: 22px; 
    font-weight: 900; 
    text-transform: uppercase; 
}

.back-link-new { 
    color: white; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 14px; 
    background: rgba(255,255,255,0.1); 
    padding: 8px 16px; 
    border-radius: 6px; 
    transition: 0.2s;
}

.back-link-new:hover { background: var(--orange); }

/* 2. OVERZICHTSPAGINA: ZOEKBALK & FILTERS */
.search-box { 
    display: flex; 
    background: white; 
    border-radius: 8px; 
    overflow: hidden; 
    flex-grow: 1; 
    border: 1px solid var(--border); 
}

.search-box input { border: none; padding: 10px 15px; width: 100%; outline: none; }
.search-box button { background: var(--orange); border: none; color: white; padding: 0 20px; cursor: pointer; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.filters select { padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); background: white; font-weight: 600; color: var(--blue); }
.filters a { text-decoration: none; color: white; font-size: 13px; font-weight: 700; padding: 8px 15px; border-radius: 6px; background: rgba(255,255,255,0.1); }
.filters a.active { background: var(--orange); }
.btn-reset { background: #64748b !important; }

/* 3. PRODUCT CARDS (INDEX) */
#resultsContainer.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 30px 0; }

.card { 
    background: white; 
    border-radius: 12px; 
    border: 1px solid var(--border); 
    text-decoration: none; 
    color: inherit; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    transition: 0.2s; 
    position: relative; 
}

.card:hover { 
    border-color: var(--orange); 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(18, 63, 96, 0.1); 
}

.card-body { padding: 20px; flex-grow: 1; }
.merk-label { font-size: 11px; font-weight: 800; color: var(--orange); text-transform: uppercase; }
.model-label { font-size: 19px; font-weight: 900; margin: 5px 0; color: var(--blue); }
.cat-label { font-size: 12px; color: #64748b; background: #f1f5f9; padding: 2px 8px; border-radius: 4px; display: inline-block; }

.badge-actie { 
    position: absolute; top: 15px; right: 15px; 
    background: var(--red); color: white; 
    padding: 4px 10px; border-radius: 6px; 
    font-size: 10px; font-weight: 900; 
    box-shadow: 0 2px 4px rgba(225, 29, 72, 0.2); 
}

.price-tag { 
    background: #f8fafc; 
    padding: 15px 20px; 
    border-top: 1px solid var(--border); 
    display: flex; 
    flex-wrap: wrap; 
    align-items: baseline; 
    gap: 8px; 
}

.van { text-decoration: line-through; color: #94a3b8; font-weight: 600; font-size: 13px; }
.voor { font-size: 22px; font-weight: 900; color: var(--blue); }

/* 4. DETAIL PAGINA HERO SECTIE */
.product-hero { 
    background: white; 
    border-radius: 16px; 
    padding: 40px; 
    border: 1px solid var(--border); 
    margin-top: 30px; 
    display: grid; 
    grid-template-columns: 1fr 340px; 
    gap: 40px; 
    align-items: start; 
}

.product-title { font-size: 38px; font-weight: 900; color: var(--blue); margin-bottom: 15px; text-transform: uppercase; }
.brand-badge { background: var(--blue); color: white; padding: 5px 15px; border-radius: 4px; font-size: 14px; font-weight: 800; }
.specs-brief { display: flex; gap: 15px; margin-top: 20px; color: #64748b; font-size: 13px; }
.spec-item i { color: var(--orange); margin-right: 5px; }

/* PRIJS EN SERVICE KAARTEN (RECHTS) */
.price-card { border: 2px solid #22c55e; border-radius: 12px; padding: 20px; background: white; }
.price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.price-value { font-weight: 800; font-size: 24px; }
.price-value.promo { color: #22c55e; }
.price-value.discount { color: #22c55e; background: #f0fdf4; padding: 2px 8px; border-radius: 4px; font-size: 16px; }

.service-card { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 15px 20px; margin-top: 15px; display: flex; align-items: center; gap: 15px; }
.service-icon { color: var(--orange); font-size: 20px; }

/* 5. WINKELVOORRAAD & UPGRADED FILTERS */
.stock-section { margin-top: 30px; background: white; border-radius: 16px; padding: 30px; border: 1px solid var(--border); }

.stock-filters { 
    display: flex; gap: 30px; margin: 30px 0; padding: 25px; 
    background: #f1f5f9; border-radius: 12px; border-left: 5px solid var(--orange); 
}

.filter-group label { 
    display: block; font-size: 12px; font-weight: 800; 
    text-transform: uppercase; color: var(--blue); 
    margin-bottom: 8px; letter-spacing: 1px; 
}

.filter-group select { 
    padding: 12px 20px; border-radius: 8px; border: 2px solid var(--border); 
    min-width: 220px; font-weight: 700; color: var(--blue); 
    appearance: none; 
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23123F60' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 15px center; 
    cursor: pointer; transition: 0.2s; 
}

.stock-tile { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 20px; border-bottom: 1px solid var(--border); 
    border-left: 4px solid transparent; transition: 0.2s; 
}

.stock-tile:hover { border-left-color: var(--orange); background: #fafbfc; }

.store-name strong { color: var(--blue); font-size: 18px; }

.spec-pill { 
    background: white; border: 1px solid var(--border); 
    padding: 4px 12px; border-radius: 20px; 
    font-size: 12px; font-weight: 700; color: var(--blue); 
}
.spec-pill strong { color: var(--orange); }

/* ACTIE KNOPPEN */
.stock-actions { display: flex; gap: 10px; }
.btn-action { padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.btn-action.call { background: #e2e8f0; color: var(--blue); }
.btn-action.mail { background: var(--orange); color: white; box-shadow: 0 4px 10px rgba(242, 140, 11, 0.3); }

/* 6. RESPONSIVE DESIGN */
@media (max-width: 850px) {
    .product-hero { grid-template-columns: 1fr; padding: 20px; }
    .stock-filters { flex-direction: column; gap: 15px; }
    .stock-tile { flex-direction: column; align-items: flex-start; gap: 15px; }
    .stock-actions { width: 100%; }
}