/* ==========================================================================
   Theme Name: Aspera Audio - PS Audio Benelux
   Description: Gecentraliseerde high-end stijlen voor psaudio.nl. 
                Geoptimiseerd voor contrast, typografie, witruimte en SEO-balans.
   Version: 2.8
   2026 Aspera Audio. Alle rechten voorbehouden.
   ========================================================================== */

/* ==========================================================================
   1. ALGEMENE BODY, CONTRAST & LUXE LEESBAARHEID (Zacht voor de ogen)
   ========================================================================== */
body {
  --bs-body-color: #333333 !important;      /* Afgezwakt naar elegant charcoal antraciet */
  --bs-body-font-weight: 400 !important;
  
  font-family: "Inter", Roboto, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #333333 !important;                /* Geen hard diepzwart meer */
  background-color: #ffffff !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Verzacht alle lopende paragrafen, lijsten en secundaire teksten naar hifi-antraciet */
p, li, span, .text-secondary, p.text-secondary {
  font-weight: 400 !important;
  color: #333333 !important;                /* Comfortabel en rustig contrast */
}

/* ==========================================================================
   2. RECHTTREKKEN VAN DE KOPPEN (Slank en comfortabel contrast)
   ========================================================================== */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: "Inter", sans-serif !important;
  color: #111111 !important;                /* Alleen de koppen behouden hun krachtige focus */
  letter-spacing: -0.01em !important;
}

/* BEHOUD ULTRA-SLANKE LOOK: Zorgt dat specifieke lichte klassen 
   en de grote catalogustitels vederlicht en fijn blijven */
.fw-light, .fw-200, .fw-300, .product-title {
  font-weight: 200 !important;             /* Altijd elegant en verfijnd slank */
  letter-spacing: -0.02em !important;
}

/* Specifieke grootte voor de producttitels boven de pagina's */
.product-title {
  font-size: 3.5rem !important;
}

/* DE TUSSENTEKST FIX: Grote introductieteksten en product-subtitles */
.product-subtitle, p.product-subtitle {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: #444444 !important;                /* Extra zacht, zijdeachtig grijs voor de grote intro-blokken */
}

.product-subtitle strong {
  font-weight: 700 !important;
  color: #111111 !important;
}

/* HOMEPAGE ASSYMETRIE: Alleen op de specifieke homepagina dwingen we 
   the titels af naar een solide en krachtige dikte */
.homepage h1, .homepage .display-4, .homepage h2, .homepage .display-5 {
  font-weight: 700 !important;             /* Alleen krachtig op de index-pagina's */
  letter-spacing: -0.02em !important;
}

/* De kleine subkoppen in de kaarten van de collecties minder zwaar maken */
.product-card h2, 
.premium-product-card-4 h2, 
.premium-product-card-4 h3 {
  font-weight: 400 !important;             /* Hersteld naar elegant slank */
  color: #111111 !important;               
  letter-spacing: 0.02em !important;       /* Subtiele ademruimte tussen de letters */
}

/* ==========================================================================
   TOPLINIE INDICATOR (Moderner, Luchtiger & Goud - Maximale Balans)
   ========================================================================== */
.col-lg-8 p.text-uppercase.text-gold,
.col-lg-8 p.text-gold[class*="text-uppercase"],
p.text-gold.text-uppercase {
  color: #dfb76c !important;
  font-weight: 400 !important;             /* Stabiele boekdikte voor optimale leesbaarheid */
  letter-spacing: 0.16em !important;       /* Royale, luchtige ruimte tussen de letters */
  font-size: 0.92rem !important;           /* Perfecte upgrade voor een luxere uitstraling */
  margin-bottom: 1.4rem !important;        /* Iets meer afstand tot de grote H1 titel */
}

/* ==========================================================================
   3. UNIVERSELE NAVIGATIEBALK & WITRUIMTE FIX
   ========================================================================== */
main {
  margin-top: 60px !important;
}

/* PAGINATOP VERFIJNING: Geeft de introductiesectie op desktops extra ademruimte onder de navbar */
@media (min-width: 992px) {
  .product-page main,
  .dacs-page main,
  .powerplants-page main {
    margin-top: 100px !important;          /* Royale 100px voor rust bovenaan */
  }
}

.navbar {
  background: rgba(252, 252, 252, 0.80) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s ease !important;
}

.nav-link {
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: #555555 !important;
  letter-spacing: 0.12em !important;
  transition: color 0.25s ease !important;
  position: relative !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.nav-link:hover, 
.nav-link.active {
  color: #111111 !important;
}

.nav-link.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background-color: #c5a059 !important;
}

@media (max-width: 768px) {
  main {
    margin-top: 75px !important;
  }
}

/* ==========================================================================
   4. PRODUCT CATALOGUS GRIDS & BRONNEN
   ========================================================================== */
.premium-product-card-4 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 35px 20px !important;
  background-color: #ffffff;
  border: 1px solid #dfb76c; 
  border-radius: 0px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-product-card-4:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(223, 183, 108, 0.18);
  border-color: #c5a059;
}

.product-img-container-4 {
  overflow: hidden;
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
  width: 100%;
}

.product-img-container-4 img,
.product-img-wrapper img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.premium-product-card-4:hover .product-img-container-4 img,
.premium-product-card-4:hover .product-img-wrapper img {
  transform: scale(1.03);
}

.premium-product-card-4 p.text-secondary {
  font-size: 0.88rem;
  line-height: 1.5;
  font-weight: 300;
}

/* ==========================================================================
   FEATURE-BOX KOPPEN VERFIJNING (Optimale Leesbaarheid & Goud)
   ========================================================================== */
.feature-box h5,
.feature-box h5.text-gold,
.feature-box h5[class*="text-gold"] {
  color: #dfb76c !important;
  font-weight: 400 !important;             /* Stabiele, duidelijke boekdikte */
  letter-spacing: 0.08em !important;       /* Subtiele, elegante ruimte tussen de letters */
  text-transform: uppercase !important;    /* Strakke, symmetrische hifi-look */
  font-size: 0.9rem !important;            /* Perfect gedoseerde grootte */
  margin-bottom: 1.2rem !important;        /* Comfortabele afstand tot de onderliggende tekst */
}

/* ==========================================================================
   5. CONTACTPAGINA & JURIDISCHE SUPPORT
   ========================================================================== */
.contact-us-wrap {
  padding-top: 40px !important;
}

.border-gold { 
  border-left-color: #dfb76c !important; 
}

.bg-light-gray { 
  background-color: #f8f9fa !important; 
}

.bedrijfsgegevens {
  background-color: #fcfcfc;
  padding: 2rem;
  border-radius: 0px !important;
  border-left: 4px solid #dfb76c;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
  .contact-us-wrap {
    padding-top: 20px !important;
  }
}

/* ==========================================================================
   6. UNIVERSELE HIFI-DESIGN KNOPPEN (Goud, Grijs & Outline varianten)
   ========================================================================== */

/* PRIMAIR GOUD: Voor actiemomenten zoals de nieuwsbrief of de contactpagina */
.product-card-footer a.btn.btn-gold,
a.btn.btn-gold,
.btn-gold,
.btn-gold-action {
  background-color: #dfb76c !important;
  background: #dfb76c !important;
  color: #ffffff !important;
  border: 1px solid #dfb76c !important;
  border-radius: 4px !important;
  padding: 14px 32px !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.product-card-footer a.btn.btn-gold:hover,
a.btn.btn-gold:hover,
.btn-gold:hover,
.btn-gold-action:hover {
  background-color: #c5a059 !important;
  background: #c5a059 !important;
  border-color: #c5a059 !important;
  color: #111111 !important;
  box-shadow: 0 4px 15px rgba(223, 183, 108, 0.3) !important;
}

/* DE GRIJZE BUTTON & BREEDTE FIX: */
.btn-info-request,
a.btn-info-request,
[class*="btn-info-request"],
.powerplants-page .col-lg-8 .btn-gold,
.luidsprekers-page .col-lg-8 .btn-gold,
.dacs-page .col-lg-8 .btn-gold {
  background-color: #f5f5f5 !important;
  background: #f5f5f5 !important;
  color: #111111 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  padding: 14px 32px !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  
  /* WITRUIMTE FIX: Maakt prachtige, ademende ruimte boven de feature-boxes */
  margin-bottom: 2.5rem !important;
  
  /* BREAKER: Voorkomt dat de knop buiten het scherm breekt */
  display: inline-block !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.btn-info-request:hover,
[class*="btn-info-request"]:hover,
.powerplants-page .col-lg-8 .btn-gold:hover,
.luidsprekers-page .col-lg-8 .btn-gold:hover,
.dacs-page .col-lg-8 .btn-gold:hover {
  background-color: #eaeaea !important;
  background: #eaeaea !important;
  border-color: #cccccc !important;
  color: #111111 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Secundaire Outline knop ("Ontdek") */
.btn-outline-gold {
  background-color: transparent;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
  border-radius: 4px !important;
  padding: 12px 28px;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
  text-decoration: none;
}

.btn-outline-gold:hover {
  background-color: #c5a059 !important;
  border-color: #c5a059 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   7. HULPKLASSEN & UTILITIES
   ========================================================================== */
.text-justify { text-align: justify; }
.text-gold, .goud { color: #dfb76c !important; }
.hover-dark:hover { color: #111111 !important; }
.multiply-blend { mix-blend-mode: multiply; }
.bg-showroom { background-color: #fcfcfc; }

.tracking-widest-2 { letter-spacing: 2px; font-size: 0.75rem; }
.tracking-widest-3 { letter-spacing: 0.25em; font-size: 0.68rem; }

.max-w-700 { max-width: 700px; }
.max-w-600 { max-width: 600px; }
.max-w-520 { max-width: 520px; }

.lh-2 { line-height: 2; }

@media (max-width: 768px) {
  .product-title {
    font-size: 2.2rem;
  }
}

/* ==========================================================================
   8. CUSTOM CONTAINER & BANNER CENTRERING FIX
   ========================================================================== */
.container-custom {
  width: 100%;
  padding-right: var(--bs-gutter-x, .75rem);
  padding-left: var(--bs-gutter-x, .75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1200px) {
  .container-custom { max-width: 1140px; }
}

@media (min-width: 1400px) {
  .container-custom { max-width: 1320px; }
}

.banner-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
  margin-top: 40px;
  margin-bottom: 70px !important;   /* EXTRA WITRUIMTE FIX: Creëert lucht onder de foto */
  border: 1px solid rgba(223, 183, 108, 0.15);
}

/* ==========================================================================
   9. GEOPTIMALISEERDE COMPACTE HIFI-AFSTANDEN & AUTOMATISCH 3 OF 4 GRID
   ========================================================================== */

/* PAGINATOP VERFIJNING (Minder witruimte tussen navigatie en tekst) */
@media (min-width: 992px) {
  html body .product-page main,
  html body .dacs-page main,
  html body .powerplants-page main {
    margin-top: 70px !important;
  }
}

/* AFSTAND BOVEN DE FEATURE-BOXES */
html body section.section-spacing.pt-4,
html body section.pt-4,
html body main section.pt-4 {
  padding-top: 50px !important;
  padding-bottom: 0px !important;
}

/* UNIVERSEEL ADAPTIEF GRID (Houdt 4 blokjes gegarandeerd met 4 naast elkaar) */
@media (min-width: 992px) {
  html body section.pt-4 .row,
  html body section[class*="pt-4"] .row {
    display: flex !important;
    flex-wrap: nowrap !important;          /* VERBOD OP AFBREKEN: Dwingt ze op één lijn */
    justify-content: space-between !important;
    width: 100% !important;
  }
  
  /* Onwrikbare breedtebepaling op basis van het aantal kolommen */
  html body section.pt-4 .row > div,
  html body section[class*="pt-4"] .row > div {
    flex: 1 1 0% !important;               /* Verdeelt de beschikbare ruimte perfect evenredig */
    max-width: 100% !important;
  }
}

/* HET UNIVERSELE GOUDEN RANDJE */
html body .feature-box,
html body [class*="feature-box"],
body section .feature-box {
  border: 1px solid rgba(223, 183, 108, 0.4) !important;
  border-radius: 0px !important;
  background-color: #ffffff !important;
  padding: 35px 25px !important;           /* Iets compacter voor de 4-koloms tekst */
  height: 100% !important;
  display: block !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body .feature-box:hover {
  border-color: #c5a059 !important;
  box-shadow: 0 10px 30px rgba(223, 183, 108, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* AFSTAND RONDOM DE DISPLAY-6 TUSSENKOP */
.product-page section.pt-0,
.dacs-page section.pt-0,
main section.pt-0 {
  padding-top: 80px !important;            
}

/* Extra royale marge-onderkant voor de H2 display-kop zelf */
.product-page section.pt-0 h2.display-6,
.product-page .col-lg-9 h2.display-6,
main h2.display-6 {
  margin-bottom: 3.5rem !important;
}

/* Zorgt dat de samenvattende tekst onder de feature-boxes lichter en royaler leest */
.product-page section.pt-0 .product-subtitle,
.dacs-page section.pt-0 .product-subtitle,
.product-page .col-lg-9 .product-subtitle {
  line-height: 2 !important;
  letter-spacing: 0.03em !important;
  margin-top: 3.5rem !important;
}

/* Vaste goud-geanodiseerde hifi-omranding voor specificatiebadges v2.8 */
.product-page .spec-badge-premium {
  border: 1px solid #dfb76c !important;
  font-size: 0.72rem !important;
  font-weight: 200 !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.product-page .spec-badge-premium .spec-highlight {
  font-weight: 400 !important;
}
/* Specificatiesectie styling */
.specs-section {
  padding-top: 90px !important; /* Meer witruimte bovaan de sectie */
}

/* Subtiel gouden kader om de tabel */
.specs-table-wrapper {
  border: 1px solid rgba(223, 183, 108, 0.4); /* Subtiel goud met transparantie */
  padding: 40px; /* Binnenruimte tussen kader en tabel */
  background-color: #ffffff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Optioneel: subtiele goudglans bij hover (matcht met de productkaarten) */
.specs-table-wrapper:hover {
  border-color: #c5a059;
  box-shadow: 0 10px 30px rgba(223, 183, 108, 0.08);
}

/* Aanpassing voor de tabel binnen het kader */
.specs-table-wrapper .specs-table {
  margin-bottom: 0; /* Verwijder standaard Bootstrap marge onderaan */
}

.specs-table-wrapper .specs-table tr:last-child td {
  border-bottom: none; /* Verwijder de onderste lijn bij de laatste rij */
}

/* ==========================================================================
   CENTRALE STYLING SPECIFICATIETABELLEN ASPERA AUDIO
   ========================================================================== */

/* 1. Witruimte boven de tabelsectie tot het minimum beperkt */
section.pb-5:has(.specs-table) {
  padding-top: 20px !important; /* Verlaagd naar 20px voor een zeer strakke aansluiting */
}

/* 2. De titel links uitlijnen en omzetten naar fw-light in het zwart */
section.pb-5:has(.specs-table) h3 {
  text-align: left !important;
  font-weight: 200 !important; /* Elegant slank hifi-lettertype */
  margin-top: 0 !important;
  margin-bottom: 24px !important; /* Compacte, strakke aansluiting */
  color: #111111 !important; /* Gitzwart in plaats van goud */
}

/* 3. Subtiel gouden kader, padding en schaduw direct op de tabel */
table.specs-table {
  display: table;
  border: 1px solid rgba(223, 183, 108, 0.4) !important; /* Subtiel goud */
  border-collapse: separate !important; /* Nodig om padding aan de binnenkant te behouden */
  border-spacing: 0;
  background-color: #ffffff !important;
  padding: 40px !important; /* Ruimte tussen het gouden kader en de tekst */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 4. Correctie voor de lijnen en paddings binnen de tabel */
table.specs-table td {
  padding: 16px 0 !important;
  border-bottom: 1px solid #eeeeee !important;
}

/* Verwijder de onderste lijn bij de allerlaatste rij binnen het kader */
table.specs-table tr:last-child td {
  border-bottom: none !important;
}

/* 5. Premium hover-effect (matcht met de productkaarten op de rest van de site) */
table.specs-table:hover {
  border-color: rgba(197, 160, 89, 1) !important; /* Harder goud bij hover */
  box-shadow: 0 15px 35px rgba(223, 183, 108, 0.08) !important;
}
/* 6. Witruimte onder de bovenliggende tekstsectie volledig geminimaliseerd */
section:has(+ section.pb-5:has(.specs-table)) {
  padding-bottom: 0px !important; /* Volledig op 0px gezet om de witruimte te minimaliseren */
}

/* 7. Witruimte aan de onderkant van de tabelsectie minimaliseren */
section.pb-5:has(.specs-table) {
  padding-bottom: 20px !important; /* Verlaagt de standaard witruimte onder de tabel drastisch */
}

/* 8. Witruimte aan de bovenkant van de direct opvolgende sectie weghalen */
section.pb-5:has(.specs-table) + section {
  padding-top: 20px !important; /* Trekt de opvolgende sectie strakker omhoog */
}

/* ==========================================================================
   CENTRALE STYLING FOOTER ASPERA AUDIO (GEOPTIMALISEERD)
   ========================================================================= */

/* 1. De hoofdtitels in de footer slank, goudkleurig en extra spatiëring geven */
footer p.text-uppercase.text-dark {
  font-weight: 300 !important; /* Slanke, verfijnde uitstraling */
  letter-spacing: 0.15em !important; /* Exclusieve, open spatiëring */
  color: #dfb76c !important; /* Subtiel goud in plaats van hard zwart */
  font-size: 0.72rem !important; /* Perfecte micro-proportie */
}

/* 2. De links en gewone teksten iets kleiner, diepzwart en solide (zonder vaagheid) */
footer ul.opacity-75, /* Hef de transparantie van de complete lijst op */
footer ul li a, 
footer ul li a.text-muted, 
footer p.text-muted,
footer p.font-sm,
footer span.fst-italic {
  opacity: 1 !important; /* Dwingt de tekst naar 100% ondoorzichtigheid */
  font-weight: 300 !important; /* Fractie duidelijker (book-dikte) voor extra leesbaarheid */
  letter-spacing: 0.03em !important;
  font-size: 0.78rem !important; /* Compacte look */
  color: #111111 !important; /* Diep, solide gitzwart */
}

/* Subtiele, gecontroleerde verandering bij hover zodat de link interactief blijft */
footer ul li a:hover,
footer ul li a.text-muted:hover {
  opacity: 0.5 !important;
  color: #111111 !important;
}

/* 3. De e-mail en telefoonlink onderaan de showroom slank en donker uitlijnen */
footer a[href^="mailto:"],
footer a[href^="tel:"] {
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  font-size: 0.78rem !important;
  color: #111111 !important; /* Belangrijke contactinfo in krachtig donker */
}

/* 4. De copyright-tekst helemaal onderaan verfijnen */
footer p.font-xxs {
  font-weight: 200 !important;
  letter-spacing: 0.04em !important;
  font-size: 0.65rem !important;
  color: #555555 !important; /* Iets duidelijker antraciet */
}