/* ==========================================================================
   Layout "Noodverlichting": a standalone B2B look (installers, building managers), on top of the classic
   stylesheet (shop.css) whose tokens it replaces. White and light grey, anthracite text, signal green (as on an
   emergency exit sign) for actions, square corners, dense technical information, no decoration.
   Own templates in resources/views/themes/noodverlichting (header, menu, footer, home, product page, cards);
   cart, checkout and account come from resources/views/shop, styled here.
   ========================================================================== */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/magica/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/magica/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/magica/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/magica/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  /* The classic tokens, B2B values. */
  --night: #1f2a30;
  --night-2: #1f2a30;
  --primary: #00843d;
  --primary-dark: #006830;
  --primary-soft: #e7f4ec;
  --accent: #00843d;
  --accent-dark: #006830;
  --text: #1f2a30;
  --muted: #5b6870;
  --border: #d9e0e3;
  --bg: #f4f6f7;
  --card: #ffffff;
  --danger: #b3261e;
  --radius: 4px;
  --shadow: none;
  --shadow-lg: 0 10px 28px rgba(31, 42, 48, .12);
  --font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Names used by the Noodverlichting templates. */
  --plum: #1f2a30;
  --plum-2: #34444d;
  --rose: #00843d;
  --rose-dark: #006830;
  --rose-soft: #e7f4ec;
  --line: #d9e0e3;
  --line-soft: #e8edef;
  --paper: #ffffff;
}

body { font-size: 15px; line-height: 1.5; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
::selection { background: #c9ecd7; }
.container { max-width: 1280px; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--plum); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.skip-link:focus { top: 12px; color: #fff; }
.stars, .snow { display: none; }
main { padding: 8px 0 48px; }
.page-home main { padding-top: 0; }

/* ---------- Basics: buttons, forms, panels, tables ---------- */
.btn { border-radius: var(--radius); padding: 11px 20px; font-weight: 600; box-shadow: none; }
.btn:hover { transform: none; box-shadow: none; background: var(--primary-dark); }
.btn-outline { background: #fff; color: var(--plum); border: 1px solid var(--plum); }
.btn-outline:hover { background: var(--plum); color: #fff; }
.btn-gold { background: var(--primary); color: #fff; }
.btn-consent-alt { background: var(--plum); }
input, select, textarea { border-radius: var(--radius); border-color: var(--border); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; }
label { font-weight: 600; }
.panel, table, .filters-panel { border: 1px solid var(--border); box-shadow: none; border-radius: var(--radius); }
th { background: #eef2f3; color: var(--plum); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
th, td { padding: 12px 14px; }
.alert { border-radius: var(--radius); }
.chip, .status, .badge, .suggestion.suggestion-chip { border-radius: var(--radius); }
.breadcrumbs { font-size: .84rem; color: var(--muted); margin: 18px 0 12px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--primary-dark); }
.section-head h2::after, .perks li::before { content: none; }
.perks li { padding-left: 0; }
.mega-column li a::before { content: none; }
.suggestions { border-radius: var(--radius); border: 1px solid var(--border); }
.suggestion { border-radius: var(--radius); }
.company-card { border-radius: var(--radius); border: 1px solid #b7dfc6; }
.not-found { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: none; }
.not-found-art { animation: none; }
.consent-inner { border-radius: var(--radius); }
.link-btn:hover { background: none; }

/* ---------- Header ---------- */
.nv-service { background: var(--plum); color: #d3dde1; font-size: .82rem; }
.nv-service-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.nv-service-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; }
.nv-service a { color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.nv-service a:hover { color: #7fd6a3; }
.nv-service svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nv-vat-switch { color: #d3dde1; }
.nv-vat-switch [aria-current] { color: #fff; }

.nv-header { position: relative; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.nv-header-row { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.nv-logo { flex: none; color: var(--plum); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.1; }
.nv-logo img { height: 40px; width: auto; }
.nv-search { flex: 1; max-width: none; margin: 0; }
.nv-search input { height: 46px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 52px 0 16px; background: #f7f9fa; box-shadow: none; }
.nv-search input:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px #c9ecd7; outline: none; }
.nv-search .search-btn { top: 4px; right: 4px; width: 38px; height: 38px; border-radius: var(--radius); background: var(--primary); display: flex; align-items: center; justify-content: center; }
.nv-search .search-btn svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.nv-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.nv-action { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); color: var(--plum); font-weight: 600; font-size: .9rem; }
.nv-action:hover { background: #eef2f3; color: var(--plum); }
.nv-action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nv-cart { border: 1px solid var(--plum); }
.nv-count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.nv-count[hidden] { display: none; }

.nv-header-checkout .nv-header-row { justify-content: space-between; min-height: 64px; }
.nv-back { color: var(--plum); font-weight: 600; font-size: .9rem; }
.nv-header-phone { color: var(--muted); font-size: .9rem; }

/* Product menu */
.nv-header .main-nav { background: #f7f9fa; border-top: 1px solid var(--line-soft); }
.nv-header .main-nav .container { display: block; }
.nv-header .menu { gap: 0; }
.nv-header .menu-row { height: 46px; }
.nv-header .menu-link { color: var(--plum); font-weight: 600; font-size: .92rem; padding: 6px 4px 6px 14px; }
.nv-header a.menu-link:hover, .nv-header .menu-item:hover > .menu-row .menu-link, .nv-header .menu-item.open > .menu-row .menu-link { color: var(--primary-dark); }
.nv-header .mega-toggle { color: var(--muted); }
.nv-header .menu-toggle { color: var(--plum); font-weight: 600; }
.nv-menu-specs { margin-left: auto; }
.nv-menu-extra .menu-link { color: var(--primary-dark); }
.nv-header .mega { border-radius: 0; border-top: 2px solid var(--primary); box-shadow: var(--shadow-lg); }
.nv-header .mega::before { content: none; }
.nv-header .mega-heading { color: var(--plum); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.nv-header .mega-column li a:hover { color: var(--primary-dark); }
.nv-header .mega-all { border-radius: var(--radius); background: var(--rose-soft); color: var(--primary-dark); font-weight: 600; }
.nv-header .mega-all:hover { background: var(--primary); color: #fff; }

@media (max-width: 820px) {
  .nv-hide-sm { display: none; }
  .nv-header-row { flex-wrap: wrap; gap: 8px 12px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .nv-logo { font-size: 1.05rem; flex: 1; }
  .nv-logo img { height: 34px; }
  .nv-search { order: 3; flex-basis: 100%; }
  .nv-action-label { display: none; }
  .nv-action { padding: 8px; }
  .nv-cart { border-color: var(--line); }
  .nv-menu-specs { margin-left: 0; }
  .nv-header .main-nav .container { padding-top: 0; padding-bottom: 0; }
}

/* ---------- Listing pages ---------- */
.listing { gap: 24px; }
.filters-panel legend { color: var(--plum); text-transform: uppercase; font-size: .76rem; letter-spacing: .06em; }
.check input { accent-color: var(--primary); }
.result-count { color: var(--plum); }
.grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; transition: border-color .15s; }
.card:hover { transform: none; box-shadow: none; border-color: #9fb0b7; }
.card:hover .card-image img { transform: none; }
.card-image { border-bottom: 1px solid var(--line-soft); }
.card-image img { padding: 10%; }
.card .brand { color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .08em; }
.card h3 { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.card h3 a { color: var(--plum); }
.card h3 a:hover { color: var(--primary-dark); }
.card-footer { border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: auto; min-height: 0; }
.price { color: var(--plum); font-weight: 700; font-variant-numeric: tabular-nums; }
.btn-add { background: var(--primary); color: #fff; border-radius: var(--radius); padding: 8px 12px; font-weight: 600; font-size: .82rem; }
.btn-add:hover { transform: none; background: var(--primary-dark); }
.badge-soldout, .badge-promo { border-radius: 3px; font-weight: 600; font-size: .7rem; }

/* ---------- Product page ---------- */
.nv-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; }
.nv-gallery-main { aspect-ratio: 1; border: 1px solid var(--line-soft); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: #fff; }
.nv-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.nv-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nv-thumbs button { width: 68px; height: 68px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; }
.nv-thumbs button.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.nv-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.nv-codes { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; font-size: .84rem; color: var(--muted); }
.nv-brand { color: var(--primary-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.nv-codes strong { color: var(--plum); font-variant-numeric: tabular-nums; }
.nv-buybox h1 { margin: 0 0 16px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; }
.nv-variants { margin: 0 0 18px; }
.nv-keyspecs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.nv-keyspecs div { padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nv-keyspecs div:nth-child(3n) { border-right: 0; }
.nv-keyspecs dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.nv-keyspecs dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.nv-pricebox { padding: 16px 0; border-top: 1px solid var(--line); }
.nv-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.nv-price { font-size: 2rem; font-weight: 700; color: var(--plum); font-variant-numeric: tabular-nums; }
.nv-price-label { color: var(--muted); font-size: .92rem; }
.nv-price-other { margin: 2px 0 0; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.nv-stock { margin: 0 0 14px; font-weight: 600; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; }
.nv-stock::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.nv-stock-out { color: #8a5a00; }
.nv-buy-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nv-qty { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.nv-qty button { width: 42px; border: 0; background: none; font: inherit; font-size: 1.2rem; cursor: pointer; color: var(--plum); }
.nv-qty input { width: 64px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; text-align: center; padding: 10px 4px; -moz-appearance: textfield; }
.nv-qty input::-webkit-outer-spin-button, .nv-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nv-buy-button { flex: 1; min-width: 200px; min-height: 48px; font-size: 1rem; }
.nv-restock { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #f7f9fa; }
.nv-restock-title { margin: 0 0 8px; font-weight: 600; }
.nv-restock-row { display: flex; gap: 8px; flex-wrap: wrap; }
.nv-restock-row input { flex: 1; min-width: 180px; }
.nv-restock-error { color: var(--danger); margin: 6px 0 0; }
.nv-quote { margin: 16px 0 0; padding: 12px 14px; background: var(--rose-soft); border-radius: var(--radius); font-size: .92rem; }
.nv-quote a { font-weight: 600; color: var(--primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.nv-terms { list-style: none; margin: 14px 0 0; padding: 0; font-size: .86rem; color: var(--muted); display: grid; gap: 4px; }
.nv-terms li::before { content: '✓'; color: var(--primary); font-weight: 700; margin-right: 8px; }

.nv-product-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.nv-product-info h2 { font-size: 1.15rem; margin: 0 0 12px; }
.nv-specs-table table { font-size: .9rem; }
.nv-specs-table th { width: 42%; text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 500; color: var(--muted); background: #f7f9fa; }
.nv-specs-table th, .nv-specs-table td { padding: 9px 12px; vertical-align: top; }
.nv-specs-table td { font-weight: 600; }
.nv-product-text section, .nv-downloads { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.nv-product-text .rich-text { color: var(--plum-2); }

@media (max-width: 900px) {
  .nv-product { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
  .nv-product-info { grid-template-columns: 1fr; }
  .nv-keyspecs { grid-template-columns: repeat(2, 1fr); }
  .nv-keyspecs div:nth-child(3n) { border-right: 1px solid var(--line); }
  .nv-keyspecs div:nth-child(2n) { border-right: 0; }
}

/* ---------- Cart and checkout (classic templates) ---------- */
.page-cart table { box-shadow: none; }
.checkout-login { border-radius: var(--radius); }
.vat-toggle summary { color: var(--primary-dark); }
.summary-total { font-weight: 700; }

/* ---------- Footer ---------- */
.nv-help { background: var(--rose-soft); border-top: 1px solid #b7dfc6; margin-top: 48px; }
.nv-help-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding-top: 26px; padding-bottom: 26px; }
.nv-help h2 { margin: 0 0 4px; font-size: 1.2rem; }
.nv-help p { margin: 0; color: var(--plum-2); }
.nv-help-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nv-footer { background: var(--plum); color: #c9d4d9; font-size: .9rem; }
.nv-help + .nv-footer { margin-top: 0; }
.nv-footer:not(.nv-help + .nv-footer) { margin-top: 48px; }
.nv-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding: 40px 0 28px; }
.nv-footer h2 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; }
.nv-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.nv-footer a, .nv-footer .link-btn.footer-link { color: #e3eaed; padding: 0; font: inherit; text-align: left; width: auto; }
.nv-footer a:hover, .nv-footer .link-btn.footer-link:hover { color: #7fd6a3; }
.nv-footer-logo { color: #fff; font-weight: 700; font-size: 1.2rem; display: inline-block; }
.nv-footer-logo img { height: 40px; width: auto; }
.nv-footer-brand p { margin: 10px 0; }
.nv-footer-contact { line-height: 1.8; margin: 0 0 12px; }
.nv-footer .pay-logos { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-footer .pay-logos li { background: #fff; border-radius: 3px; padding: 3px 4px; line-height: 0; }
.nv-footer .pay-logos img { width: 40px; height: 26px; object-fit: contain; }
.nv-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 16px 0 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: #aab7bd; font-size: .82rem; }
.nv-footer-bottom p { margin: 0; }
.nv-footer-bottom ul { display: flex; gap: 16px; }
.nv-footer-slim .nv-footer-bottom { border-top: 0; }
@media (max-width: 900px) {
  .nv-footer-grid { grid-template-columns: 1fr 1fr; }
  .nv-help-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nv-footer-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- Home page ---------- */
.nv-hero { margin: 0 calc(50% - 50vw); padding: 56px calc(50vw - 50%) 60px; background: var(--plum); color: #fff; }
.nv-hero h1 { color: #fff; font-size: clamp(2rem, 3.8vw, 2.9rem); margin: 6px 0 14px; }
.nv-kicker { margin: 0; color: #7fd6a3; font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.nv-lead { margin: 0 0 24px; color: #d3dde1; font-size: 1.05rem; max-width: 560px; }
.nv-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.nv-hero .btn { background: var(--rose); border-color: var(--rose); color: #fff; }
.nv-hero .btn:hover { background: var(--rose-dark); border-color: var(--rose-dark); color: #fff; }
.nv-hero .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.nv-hero .btn-outline:hover { border-color: #fff; color: #fff; }
.nv-checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; color: #d3dde1; }
.nv-checks li::before { content: '✓'; color: #7fd6a3; font-weight: 700; margin-right: 10px; }

.nv-section { margin: 56px 0; }
.nv-section h2 { font-size: 1.6rem; margin: 0 0 20px; }
.nv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.nv-tile { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--plum); font-weight: 600; }
.nv-tile:hover { border-color: var(--rose); color: var(--rose-dark); }
.nv-tile img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.nv-tile small { display: block; color: var(--muted); font-weight: 400; }

.nv-advice { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 28px 32px; background: var(--rose-soft); border: 1px solid #b7dfc6; border-radius: var(--radius); }
.nv-advice h2 { margin: 0 0 6px; font-size: 1.35rem; }
.nv-advice p { margin: 0; color: var(--plum-2); }

@media (max-width: 820px) {
  .nv-hero { padding-top: 36px; padding-bottom: 40px; }
  .nv-advice { grid-template-columns: 1fr; padding: 22px; }
}

/* ---------- Product cards: key specifications and variants ---------- */
/* A card with variants is one grid cell; only the chosen variant's card is shown. */
.nv-variant-card { display: grid; }
.nv-variant-card > [hidden] { display: none; }
.nv-card .card-body { gap: 0; padding: 14px 16px 16px; }
.nv-card .card-body > :not(.card-footer):nth-last-child(2) { margin-bottom: 10px; }
.nv-card h3 { min-height: 0; margin-bottom: 8px; }
.nv-specs { display: grid; gap: 0; margin: 0 0 10px; font-size: .8rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.nv-specs div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dotted var(--line); }
.nv-specs div:last-child { border-bottom: 0; }
.nv-specs dt { color: var(--muted); }
.nv-specs dd { margin: 0; color: var(--plum); font-weight: 600; text-align: right; }
.nv-card-variants { margin: 0 0 10px; }
.nv-card .variant-axis-name { font-size: .76rem; }
.nv-card .variant-option { min-height: 30px; padding: 3px 8px; font-size: .76rem; }
.nv-card .variant-swatch { width: 26px; height: 26px; min-height: 0; padding: 0; }
.variant-option:hover { border-color: var(--rose); color: var(--rose-dark); }
.variant-option.is-active { border-color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); color: var(--plum); }
.variant-swatch.is-active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px #fff, 0 0 0 4px var(--rose); border-color: transparent; }
.variant-option:focus-visible { outline-color: var(--rose); }

@media (max-width: 520px) {
  .nv-card .card-body { padding: 12px 12px 14px; }
  .nv-specs { font-size: .72rem; }
  .nv-specs div { gap: 6px; padding: 3px 0; }
  .nv-card .variant-option { padding: 3px 7px; }
}

/* ---------- Home: three ways in (knows the product / follows a specification / needs advice) ---------- */
.nv-hero > h1 { max-width: 760px; }
.nv-hero > .nv-lead { max-width: 640px; margin-bottom: 28px; }
.nv-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nv-path { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; color: var(--plum); border-radius: var(--radius); }
.nv-path h2 { margin: 0; font-size: 1.2rem; color: var(--plum); }
.nv-path p { margin: 0; color: var(--muted); font-size: .92rem; }
.nv-hero .nv-path .nv-path-who { color: var(--rose-dark); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nv-path form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.nv-path input, .nv-path select { flex: 1 1 140px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--plum); font: inherit; font-size: .92rem; }
.nv-path-specs select { flex-basis: 100%; }
.nv-path-specs .btn { flex: 1 1 100%; }
.nv-path-search .btn { flex: 0 0 auto; }
.nv-hero .nv-path .btn { min-height: 44px; }
.nv-hero .nv-path .btn-outline { background: #fff; color: var(--plum); border: 1px solid var(--plum); }
.nv-hero .nv-path .btn-outline:hover { background: var(--plum); color: #fff; }
.nv-path-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nv-path-links a { display: inline-block; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--plum); text-decoration: none; }
.nv-path-links a:hover { border-color: var(--rose); color: var(--rose-dark); }
.nv-path-actions { display: grid; gap: 8px; margin-top: auto; }
.nv-path-actions .btn { width: 100%; text-align: center; }
.nv-path-advice { background: var(--rose-soft); }
.nv-hero .nv-checks { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 22px; }
.nv-advice-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nv-advice .btn-outline { background: transparent; color: var(--plum); border: 1px solid var(--plum); }

@media (max-width: 980px) {
  .nv-paths { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .nv-hero > .nv-lead { margin-bottom: 20px; }
  .nv-path { padding: 16px; }
}

/* ---------- Zoek op bestek ---------- */
.spec-finder-intro h1 { margin: 6px 0 8px; }
.spec-finder-intro p { margin: 0 0 18px; color: var(--muted); max-width: 680px; }
.spec-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; align-items: end; padding: 18px; margin-bottom: 20px; }
.spec-form .field { margin: 0; }
.spec-form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 4px; }
.spec-form select { width: 100%; min-height: 44px; }
.spec-form-actions { display: flex; align-items: center; gap: 14px; }
.spec-result-count { font-weight: 600; margin: 0 0 12px; }
.spec-help { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin: 36px 0; padding: 24px; background: var(--rose-soft);
  border: 1px solid #b7dfc6; border-radius: var(--radius); }
.spec-help h2 { margin: 0 0 6px; font-size: 1.25rem; }
.spec-help p { margin: 0; color: var(--plum-2); }
.spec-help-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.spec-help .btn-outline { background: transparent; color: var(--plum); border: 1px solid var(--plum); }
@media (max-width: 820px) {
  .spec-help { grid-template-columns: 1fr; }
  .spec-form { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px; }
  .spec-form-actions { grid-column: 1 / -1; }
  .spec-form-actions .btn { flex: 1; }
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  /* Two cards side by side: compare at a glance. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card-image img { padding: 8%; }
  .nv-card .card-body { padding: 10px 10px 12px; }
  .card .brand { font-size: .62rem; }
  .card h3 { font-size: .88rem; }
  .nv-specs { font-size: .7rem; }
  .nv-specs div { gap: 4px; padding: 3px 0; }
  .nv-specs dd { white-space: nowrap; }
  .nv-card .variant-option { min-height: 28px; padding: 2px 6px; font-size: .7rem; }
  .nv-card .variant-swatch { width: 24px; height: 24px; }
  .nv-card .card-footer { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
  .nv-card .card-footer .price { font-size: 1rem; }
  .nv-card .card-footer form, .nv-card .btn-add { width: 100%; }
  .nv-card .btn-add { min-height: 40px; }
  /* Cart: four columns that fit, amounts on one line. */
  .page-cart table th, .page-cart table td { padding: 10px 8px; }
  .page-cart table td.num, .page-cart table th.num { white-space: nowrap; }
  .page-cart table td input[type=number] { width: 56px; }
  .page-cart table th { font-size: .7rem; }
  /* Product page: a smaller photo, so name, price and the order button come sooner. */
  .nv-product { padding: 12px; gap: 14px; }
  .nv-gallery-main { aspect-ratio: 4 / 3; border: 0; }
  .nv-gallery-main img { padding: 2%; }
  .nv-thumbs { flex-wrap: nowrap; overflow-x: auto; }
  .nv-thumbs button { flex: none; width: 54px; height: 54px; }
  .nv-buybox h1 { font-size: 1.35rem; margin-bottom: 12px; }
  .nv-price { font-size: 1.7rem; }
  .breadcrumbs { font-size: .78rem; }
}

/* Amounts never break over two lines (checkout summary, totals). */
.summary-line > span:last-child, .summary-total > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }