/*
 Theme Name: Twenty Twenty-Five Child
 Template: twentytwentyfive
*/

/* =========================
   START Hide elements in specific viewports
   ========================= */

@media (max-width: 782px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 782px) {
  .hide-desktop {
    display: none !important;
  }
}
/* =========================
   END Hide elements in specific viewports
   ========================= */



/* =========================================================
   Woo Blocks Product Filters – Drawer UX (mobile)
   - Desktop: filters in sidebar (inline)
   - Mobile: drawer + sticky button
   Breakpoint: <=781px = drawer, >=782px = sidebar
   ========================================================= */

/* Base */
.wp-block-woocommerce-product-filters {
  position: relative;
}

/* =========================
   DESKTOP (>= 782px)
   Sidebar zichtbaar, dus:
   - geen sticky knop
   - geen off-canvas gedrag nodig
   ========================= */
@media (min-width: 782px) {
  /* Verberg de "Filter producten" knop op desktop (sidebar is er al) */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__open-overlay {
    display: none;
  }

  /* Zorg dat eventuele overlay styling geen layout/kleuren beïnvloedt */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay {
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    z-index: auto;
  }

  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-wrapper {
    position: static;
    inset: auto;
    background: transparent;
  }

  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-dialog {
    position: static;
    top: auto;
    right: auto;
    height: auto;
    width: auto;
    transform: none;
    transition: none;
    box-shadow: none;
    background: transparent;
    display: block;
  }

  /* Header/footer (Sluiten/Toepassen) zijn voor drawer; op desktop niet nodig */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-header,
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-footer {
    display: none;
  }

  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-content {
    padding: 0;
    overflow: visible;
  }

  /* extra safety: geen rare achtergrond */
  .wp-block-woocommerce-product-filters.is-overlay-opened {
    background: transparent !important;
  }

  body.wc-filters-open {
    overflow: auto;
  }
}

/* =========================
   MOBILE (<= 781px)
   Drawer + sticky knop
   ========================= */
@media (max-width: 781px) {
  /* Open button sticky onderin */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__open-overlay {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 999998;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);

    background: #fff;
    color: #111;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  }

  /* Overlay basis */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;

    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  /* Backdrop */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-wrapper {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
  }

  /* Drawer pane */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-dialog {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(420px, 100vw);
    background: #fff;
    display: flex;
    flex-direction: column;

    transform: translateX(100%);
    transition: transform 220ms ease;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.25);
  }

  /* Header/footer */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-header,
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-footer {
    padding: 16px;
    border-bottom: 1px solid #eee;
  }

  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-footer {
    border-bottom: 0;
    border-top: 1px solid #eee;
  }

  /* Content scrollt */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-content {
    padding: 16px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
  }

  /* Open state */
  .wp-block-woocommerce-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .wp-block-woocommerce-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
    transform: translateX(0);
  }

  /* Body lock */
  body.wc-filters-open {
    overflow: hidden;
  }

  /* Geen rare donkere achtergrond op de block zelf */
  .wp-block-woocommerce-product-filters.is-overlay-opened {
    background: transparent !important;
  }

  /* Zorg dat content niet achter sticky button valt */
  main,
  .wp-site-blocks {
    padding-bottom: 86px;
  }

  /* Betere hitbox */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__close-overlay,
  .wp-block-woocommerce-product-filters .wc-block-product-filters__apply {
    min-height: 44px;
  }
}

/* Extra small: pane full width */
@media (max-width: 420px) {
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-dialog {
    width: 100vw;
  }
}

/* Fix: Apply ("Toepassen") altijd zichtbaar in drawer-mode */
@media (max-width: 781px) {
  /* Footer altijd onderin zichtbaar */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 2;
  }

  /* Content krijgt ruimte zodat laatste filters niet onder footer verdwijnen */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-content {
    padding-bottom: 96px;
  }
}
@media (max-width: 781px) {
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}
/* FORCE: "Toepassen" footer altijd zichtbaar in drawer-mode */
@media (max-width: 781px) {
  /* Zorg dat dialog echt een flex-kolom is */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-dialog {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
  }

  /* Cruciaal: laat de scroll-area krimpen binnen flex (anders slokt content alles op) */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-bottom: 96px !important; /* ruimte zodat je niet onder de footer scrolt */
  }

  /* En nu: footer hard zichtbaar maken */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__overlay-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: #fff !important;

    border-top: 1px solid #eee !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* =========================
   END MOBILE FILTER DRAWER
   ========================= */
/* =========================================
   Product grid – automatisch kolommen
   ========================================= */

.wp-block-woocommerce-product-collection ul.wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  align-items: stretch;
}

/* Zorg dat kaarten niet smaller worden dan bedoeld */
.wp-block-woocommerce-product-template > li {
  min-width: 300px;
}

/* Optioneel: iets meer lucht op grote schermen */
@media (min-width: 1400px) {
  .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    gap: 20px;
  }
}
.wp-block-woocommerce-product-template > li {
  display: flex;
  flex-direction: column;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image {
  aspect-ratio: 4 / 2.3;
  object-fit: contain;
}
/* 1) Forceer grid op de UL van Woo blocks */
ul.wc-block-product-template,
ul.wc-block-product-template__responsive {
  display: grid !important;
  gap: 24px !important;

  /* Desktop: maximaal 3 kolommen */
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
}

/* 2) Tussenformaten: 2 kolommen */
@media (max-width: 1100px) {
  ul.wc-block-product-template,
  ul.wc-block-product-template__responsive {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 3) Mobiel: 1 kolom */
@media (max-width: 700px) {
  ul.wc-block-product-template,
  ul.wc-block-product-template__responsive {
    grid-template-columns: 1fr !important;
  }
}

/* 4) Kaart-breedte “niet mega breed”: geef de INHOUD een max-width */
ul.wc-block-product-template > li.wc-block-product > .wp-block-group,
ul.wc-block-product-template__responsive > li.wc-block-product > .wp-block-group {
  width: 100%;
  max-width: 360px;  /* <-- hier tunen (320-420 vaak mooi) */
  margin-left: auto;
  margin-right: auto;
}
/* 0) Belangrijk voor grids: laat children krimpen zodat tekst kan wrappen */
ul.wc-block-product-template > li.wc-block-product,
ul.wc-block-product-template__responsive > li.wc-block-product,
ul.wc-block-product-template > li.wc-block-product > *,
ul.wc-block-product-template__responsive > li.wc-block-product > * {
  min-width: 0 !important;
}

/* 1) Forceer dat titels netjes wrappen en nooit over de kolom heen gaan */
ul.wc-block-product-template li.wc-block-product .wp-block-post-title,
ul.wc-block-product-template__responsive li.wc-block-product .wp-block-post-title,
ul.wc-block-product-template li.wc-block-product .wp-block-post-title a,
ul.wc-block-product-template__responsive li.wc-block-product .wp-block-post-title a {
  display: block;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;   /* agressief wrappen indien nodig */
  word-break: break-word;    /* fallback */
  hyphens: auto;
}

/* 2) Extra veiligheid: niks mag buiten z’n kaart “lekken” */
ul.wc-block-product-template li.wc-block-product,
ul.wc-block-product-template__responsive li.wc-block-product {
  overflow: hidden;
}
/* Titel: max 3 regels met ellipsis + vaste hoogte (geen trappetje) */
ul.wc-block-product-template li.wc-block-product .wp-block-post-title,
ul.wc-block-product-template__responsive li.wc-block-product .wp-block-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1.35;
  min-height: calc(1.35em * 3); /* reserveer altijd 3 regels */
}

/* Link moet meewerken */
ul.wc-block-product-template li.wc-block-product .wp-block-post-title a,
ul.wc-block-product-template__responsive li.wc-block-product .wp-block-post-title a {
  display: block;
}

/* 1) Grid zonder gaps (zodat borders elkaar raken en 1 lijn vormen) */
ul.wc-block-product-template,
ul.wc-block-product-template__responsive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  column-gap: 0 !important;
  row-gap: 0 !important;

  /* compenseer de card-padding zodat het geheel niet “ingekrompen” lijkt */
  margin-left: -12px;
  margin-right: -12px;
}

/* 2) Spacing IN de cards + de scheidingslijn */
ul.wc-block-product-template > li.wc-block-product,
ul.wc-block-product-template__responsive > li.wc-block-product {
  box-sizing: border-box;

  /* dit *is* je “gap” tussen kaarten */
  padding: 16px 12px 24px;

  /* dit wordt de doorlopende lijn per rij */
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* 3) Zorg dat bestaande card borders/shadows niet storen */
li.wc-block-product .wp-block-group {
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================
   END Product grid – automatisch kolommen
   ========================================= */

/* =========================
   HERO: media + USPs + cards
   ========================= */

/* 1) HERO container */
.home-hero{
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
}

/* 2) Media (Cover) op vaste hoogte */
.home-hero__media.wp-block-cover{
  min-height: 320px;          /* <- jouw “ongeveer 200px” */
  height: 220px;              /* (soms beter dan alleen min-height) */
  overflow: hidden;
}

/* 3) USP band padding (de content in de cover) */
.home-hero__media.wp-block-cover .wp-block-cover__inner-container{
  padding-top: 24px;          /* 20–30px */
  padding-bottom: 24px;
}

/* 4) WP’s standaard flow margin killen (anders schuift alles omlaag) */
.home-hero__media :where(.is-layout-flow) > *{
  margin-block-start: 0;
}

/* 5) Cards direct onder de hero, en iets laten uitsteken */
.home-hero__card-row{
  margin-top: -210px !important;   /* cards “direct onder” */
  position: relative;
  z-index: 3;
}

/* 6) Opvangruimte zodat de volgende sectie niet tegen de cards botst */
.home-after-hero{
  padding-top: 24px;          /* gelijk aan translateY */
}

/* 7) Mobiel: USP’s weg (heb jij al), cards niet uitsteken */
@media (max-width: 781px){
  .home-hero__media.wp-block-cover{
    height: 180px;
    min-height: 180px;
  }
  .home-hero__card-row{
    transform: none;
    mar
  }
  .home-after-hero{
    padding-top: 0;
  }
}
.home-hero__usp-row > .wp-block-column{
  flex: 0 1 220px;
  text-align: center;
}

/* Icon styling */
.home-hero__usp-icon{
  color: #fff;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.home-hero__usp-icon svg{
  width: 36px;
  height: 36px;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  position: relative;
  padding-top: 32px;
}

/* Forceer allebei op rij 1 zodat overlap wél gebeurt */
.hero-grid__title,
.hero-grid__media {
  grid-row: 1;
}

.hero-grid__title {
  grid-column: 1 / span 6;
  z-index: 2;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.17);
}

.hero-grid__media {
  grid-column: 5 / span 8;
  z-index: 1;
}

.hero-grid__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid__title,
  .hero-grid__media {
    grid-column: 1 / -1;
    grid-row: auto; /* overlap uit op mobiel */
  }

  .hero-grid__title {
    margin-bottom: 1.5rem;
  }
}
.hero-grid__media {
  grid-column: 5 / span 8;
  z-index: 1;

  aspect-ratio: 16 / 8; /* of 3 / 2 als je ‘m nog lager wilt */
  overflow: hidden;
  border-radius: 16px;
}

.hero-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-grid__title,
  .hero-grid__media {
    grid-column: 1 / -1;
    grid-row: auto;        /* <-- belangrijk: overlap uit */
  }
}

@media (max-width: 768px) {
  .hero-wrapper {
    background: var(--wp--preset--color--contrast);
    padding: 1.25rem;
    border-radius: 0 0 16px 16px;
  }

  .hero-grid__title {
    border-radius: 16px;
    margin: 0;              /* geen extra losse ruimte */
  }

  .hero-grid__media {
    margin-top: 1rem;
    border-radius: 16px;
  }
}