/* =========================================================
   ZEKEROPWEG — STABILITY LAYER (DEFINITIEF)
   Doel: layout, gedrag en consistentie
   GEEN kleuren, GEEN branding, GEEN luxe
========================================================= */


/* =========================================================
   1) NAVIGATIE — ÉÉN BRON VAN WAARHEID
========================================================= */

.header,
.main-nav,
.brand-logo{
  display:none !important;
}

/* Desktop */
@media (min-width: 901px){
  .zop-nav{ display:flex !important; }
  .menu-toggle{ display:none !important; }
}

/* Mobile */
@media (max-width: 900px){
  .zop-nav{ display:none !important; }
  .menu-toggle{
    display:block !important;
    font-size:1.5rem;
    margin-left:auto;
  }
}


/* =========================================================
   2) BUTTONS — STRUCTUUR (GEEN KLEUR)
========================================================= */

.btn-primary,
.btn-secondary,
.btn-package,
.card-cta,
.pricing-cta,
.package-card a{
  min-width:260px !important;
  min-height:58px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:999px !important;

  font-size:.82rem !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;

  white-space:normal !important;
  line-height:1.32 !important;
  text-align:center !important;
}

/* Lange teksten mogen nooit afkappen */
.btn-primary span,
.btn-secondary span{
  display:inline-block;
  max-width:100%;
}


/* =========================================================
   3) SECTIE-SPACING — ACCUCHECK MODEL
========================================================= */

.services-section{
  padding-top:80px !important;
  padding-bottom:80px !important;
}

@media (max-width: 768px){
  .services-section{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }
}


/* =========================================================
   4) CARDS — STRUCTUUR & ADEM
========================================================= */

.service-card{
  padding:28px 26px 26px !important;
}

.service-grid{
  gap:22px !important;
}


/* =========================================================
   5) HERO — AFSTAND & FLOW
========================================================= */

.hero-actions{
  margin-top:30px !important;
  gap:14px !important;
}

@media (max-width: 768px){
  .hero-content{
    padding:0 18px !important;
  }

  .hero-actions{
    gap:14px;
  }
}


/* =========================================================
   6) FOOTER — GRID CONSISTENTIE
========================================================= */

.footer-grid{
  grid-template-columns:1.1fr 1fr 1fr !important;
}

@media (max-width: 900px){
  .footer-grid{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   7) GEEN HOVER-SPRONGEN (STABILITEIT)
========================================================= */

.pricing-card,
.service-card,
.package{
  transform:none !important;
}

.pricing-card:hover,
.service-card:hover,
.package:hover{
  transform:none !important;
}


/* =========================================================
   8) MOBILE — ÉÉN KOLOM, ALTIJD
========================================================= */

@media (max-width: 900px){

  /* Alle grids onder elkaar */
  .service-grid,
  .pricing-grid,
  .packages-grid,
  .premium-grid,
  .usp-premium,
  .testimonial-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  /* Kaarten altijd volle breedte */
  .service-card,
  .pricing-card,
  .package-card,
  .premium-card,
  .usp-item,
  .testimonial-card,
  .package{
    width:100% !important;
    max-width:100% !important;
  }

  /* Featured mag niet zweven */
  .pricing-featured,
  .package--premium,
  .package-card.featured{
    transform:none !important;
    margin-top:0 !important;
  }
}


/* =========================================================
   9) AANKOOPADVIES — MOBILE LOCK
========================================================= */

@media (max-width: 900px){

  body.page-aankoopadvies .service-grid,
  body.page-aankoopadvies .pricing-grid,
  body.page-aankoopadvies .packages-grid{
    grid-template-columns:1fr !important;
  }

  body.page-aankoopadvies .service-card,
  body.page-aankoopadvies .pricing-card,
  body.page-aankoopadvies .package{
    width:100% !important;
    max-width:100% !important;
  }
}

/* =========================================================
   PAKKETTEN — STRUCTURELE LAYOUT
========================================================= */

.packages-section{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px){
  .packages-section{
    grid-template-columns: 1fr !important;
    gap: 22px;
  }
}

@media (max-width: 900px){
  .package-card.featured{
    order: -1;
  }
}

/* =========================================================
   10) FINAL CTA — STRUCTURE ONLY
========================================================= */

.services-section .final-cta,
.services-section .final-cta-card{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}