/* Accessoirewinkel (/accessoires), populaire accessoires op de homepage en accessoires bij een toestel.
   BELREUS-stijl: wit en lichtblauw, donkerblauwe tekst, blauwe accenten, oranje knoppen. */
.ac-top { background: linear-gradient(180deg, var(--tint-blue) 0%, var(--white) 100%); border-bottom: 1px solid var(--line-blue); padding: var(--sp-5) 0 var(--sp-4); }
.ac-kicker { margin: 0 0 4px; color: var(--blue); font-family: var(--font-heading); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ac-top h1 { margin: 0 0 6px; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); }
.ac-lead { max-width: 70ch; margin: 0 0 var(--sp-4); color: var(--ink); }
.ac-cats { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.ac-cats a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius-full); color: var(--navy); font-size: var(--fs-meta); font-weight: var(--fw-semibold); transition: border-color .15s, background-color .15s; }
.ac-cats a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.ac-cats a[aria-current] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.ac-cats svg { flex: none; color: var(--blue); }
.ac-cats a[aria-current] svg { color: var(--white); }
.ac-cats small { padding: 0 7px; border-radius: var(--radius-full); background: var(--tint-blue); color: var(--blue); font-size: .72rem; font-weight: 700; }
.ac-cats a[aria-current] small { background: rgba(255, 255, 255, .2); color: var(--white); }

.ac-shop { background: var(--tint); padding: var(--sp-5) 0 var(--sp-7); }
.ac-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.ac-filter { position: sticky; top: 16px; background: var(--white); border: 1px solid var(--line-blue); border-radius: 18px; }
.ac-filter > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 13px var(--sp-4); color: var(--navy); font-weight: 700; cursor: pointer; list-style: none; }
.ac-filter > summary::-webkit-details-marker { display: none; }
.ac-filter > summary svg { color: var(--blue); }
.ac-filter[open] > summary { border-bottom: 1px solid var(--line); }
.pp-filter-n { padding: 1px 8px; border-radius: var(--radius-full); background: var(--blue); color: var(--white); font-size: .75rem; }
.ac-form { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.ac-form .field input, .ac-form .field select { height: 42px; background-color: var(--white); }
.ac-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-3); }
.ac-form-actions .btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
.ac-note { margin: 0; padding: 0 var(--sp-4) var(--sp-4); color: var(--muted); font-size: .75rem; }
.ac-results { min-width: 0; }
.ac-results > .result-count { margin: 0 0 var(--sp-3); }
.ac-disclosure { margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--fs-meta); }

/* Productkaarten */
.ac-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.ac-card { display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 1px solid var(--line-blue); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(11, 31, 66, .04), 0 6px 18px rgba(11, 31, 66, .05); transition: box-shadow .2s, transform .2s, border-color .2s; }
.ac-card:hover { border-color: #b4cbf2; box-shadow: 0 2px 4px rgba(11, 31, 66, .05), 0 16px 36px rgba(11, 31, 66, .10); transform: translateY(-2px); }
.ac-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 14px; background: var(--white); border-bottom: 1px solid var(--line); }
.ac-media img { width: 100%; height: 100%; object-fit: contain; }
.ac-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 14px; background: linear-gradient(135deg, var(--tint-blue) 0%, #f5f8fe 100%); color: var(--blue); }
.ac-badge { position: absolute; top: 10px; left: 10px; padding: 2px 9px; border-radius: var(--radius-full); background: #e8590c; color: var(--white); font-size: .75rem; font-weight: 800; }
.ac-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 12px 14px 14px; }
.ac-brand { margin: 0; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ac-name { margin: 0; color: var(--navy); font-size: .9rem; font-weight: var(--fw-semibold); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ac-fit { display: flex; gap: 5px; margin: 0; color: var(--ink); font-size: .75rem; line-height: 1.35; }
.ac-fit svg { flex: none; margin-top: 2px; color: #0f7a52; }
.ac-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: auto 0 0; padding-top: 4px; }
.ac-price strong { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.ac-price span { color: var(--muted); font-size: .8rem; text-decoration: line-through; }
.ac-stock { display: flex; align-items: center; gap: 4px; margin: 0; color: #0b6b38; font-size: .75rem; font-weight: var(--fw-semibold); }
.ac-stock-unknown { color: var(--muted); font-weight: 500; }
.ac-card .btn-deal { margin-top: 6px; min-height: 42px; font-size: var(--fs-meta); justify-content: center; box-shadow: 0 4px 12px rgba(245, 90, 13, .2); }

/* Homepage: directe ingangen en populaire accessoires */
.home-entries { margin-top: var(--sp-5); }
.home-entries ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; }
.home-entries a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--white); border: 1px solid var(--line-blue); border-radius: 18px; color: var(--navy); box-shadow: 0 1px 2px rgba(11, 31, 66, .04), 0 6px 18px rgba(11, 31, 66, .05); transition: box-shadow .2s, transform .2s, border-color .2s; }
.home-entries a:hover { text-decoration: none; border-color: var(--blue); transform: translateY(-2px); }
.home-entries .he-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #1a62f2 0%, #12306e 100%); color: var(--white); }
.home-entries strong { display: block; font-family: var(--font-heading); font-size: 1.0625rem; }
.home-entries small { display: block; color: var(--muted); font-size: var(--fs-meta); }
.home-entries .he-arrow { color: var(--blue); }
.ac-home { margin-top: var(--sp-6); margin-bottom: var(--sp-5); }
.ac-home .ac-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ac-home-cats { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; }
.ac-home-cats a { display: inline-flex; padding: 6px 12px; border: 1px solid var(--line-blue); border-radius: var(--radius-full); background: var(--white); color: var(--navy); font-size: var(--fs-meta); font-weight: var(--fw-semibold); }
.ac-home-cats a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.ac-device .ac-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199px) {
    .ac-grid, .ac-home .ac-grid, .ac-device .ac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .ac-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
    .ac-filter { position: static; }
    .ac-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ac-form .field:first-child, .ac-form-actions { grid-column: 1 / -1; }
    .ac-form-actions .btn { flex: 0 0 auto; }
    .home-entries ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .ac-grid, .ac-home .ac-grid, .ac-device .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ac-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
    .ac-cats a { white-space: nowrap; }
    .ac-body { padding: 10px 11px 12px; }
    .ac-price strong { font-size: 1.1875rem; }
    .ac-form { grid-template-columns: minmax(0, 1fr); }
    .ac-form-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 359px) {
    .ac-grid, .ac-home .ac-grid, .ac-device .ac-grid { grid-template-columns: minmax(0, 1fr); }
}