/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.1.1770327793
Updated: 2026-02-05 21:42:57

*/

/*
Theme Name: GeneratePress Child
Template: generatepress
*/

/*
Theme Name: GeneratePress Child
Template: generatepress
*/

/* =========================================
   VARIABLES
========================================= */

/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Version: 3.6.1
*/

/* =========================================================
   0) VARIABLES
========================================================= */
:root{
  --bg: #fbfaf8;
  --panel: #f6f3ee;
  --text: #111111;
  --muted: #6e6e6e;
  --gold: #b89b5e;

  --border: rgba(0,0,0,.08);
  --radius: 24px;

  --shadow-soft: 0 18px 55px rgba(0,0,0,.08);
  --shadow-strong: 0 30px 90px rgba(0,0,0,.12);
}

/* =========================================================
   1) BASE
========================================================= */
html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--text);
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
  color: var(--text);
  text-decoration: none;
  transition: color .25s ease;
}
a:hover{ color: var(--gold); }

.entry-content p{
  font-size: 18px;
  line-height: 1.75;
  color: var(--muted);
}

/* content width */
.inside-header,
.site-content,
.inside-footer-widgets,
.site-info{
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================================================
   2) HEADER – PREMIUM STICKY
========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(251,250,248,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.inside-header{
  padding: 22px 20px;
}

.main-title a{
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
}

/* nav */
.main-navigation a{
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 10px;
  position: relative;
}

/* underline hover */
.main-navigation a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:2px;
  height:2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .25s ease;
}
.main-navigation a:hover::after{
  transform: scaleX(1);
}

/* =========================================================
   3) HERO (Group class: hero-section)
========================================================= */
.hero-section{
  background: var(--panel);
  padding: 150px 20px;
  text-align: center;
}

.hero-section h1{
  font-size: 48px;
  margin: 0 0 22px;
  letter-spacing: -0.4px;
}

.hero-section p{
  max-width: 650px;
  margin: 0 auto 38px;
}

/* buttons */
.wp-block-button__link{
  background: var(--text);
  color:#fff;
  border-radius: 999px;
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform .3s ease, background .3s ease;
}
.wp-block-button__link:hover{
  background: var(--gold);
  transform: translateY(-3px);
}

/* =========================================================
   4) COLLECTIE (kolom class: collection-card)
   Tip: geef de hele Collectie Group class "collection-section"
========================================================= */

/* columns spacing (geen :has, zodat alles consistent blijft) */
.wp-block-columns{
  column-gap: 28px;
  row-gap: 28px;
}

/* collectie section spacing fix */
.collection-section{
  padding-bottom: 60px !important;
  margin-bottom: 0 !important;
}
.collection-section .wp-block-columns{
  margin-bottom: 0 !important;
}

/* card */
.wp-block-column.collection-card{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.09);
  background:#fff;
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* hover */
.wp-block-column.collection-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(184,155,94,.40);
}

/* figure wrapper */
.wp-block-column.collection-card figure{
  margin:0 !important;
  position: relative;
}
.wp-block-column.collection-card figure a{
  display:block;
}

/* image */
.wp-block-column.collection-card img{
  width:100%;
  height:340px;
  object-fit:cover;
  display:block;
  transition: transform .5s ease;
}
.wp-block-column.collection-card:hover img{
  transform: scale(1.06);
}

/* overlay gradient */
.wp-block-column.collection-card figure::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.60), rgba(0,0,0,.15), rgba(0,0,0,0));
  pointer-events:none;
}

/* title inside image */
.wp-block-column.collection-card .wp-block-heading{
  position:absolute;
  bottom:22px;
  left:22px;
  right:22px;
  margin:0 !important;
  color:#fff !important;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:15px;
  font-weight:600;
  z-index:5;
}
.wp-block-column.collection-card .wp-block-heading::after{
  content:"";
  display:block;
  width:46px;
  height:2px;
  margin-top:10px;
  background: var(--gold);
  border-radius:999px;
}

/* =========================================================
   5) WHY SECTION (Group class: why-section)
   Fix: background full width, content boxed
========================================================= */
.why-section{
  background: var(--panel);
  padding: 90px 0 80px;
  margin-top: 0 !important;
}

/* inner container = dezelfde breedte als site */
.why-section > .wp-block-group__inner-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* title (pak de eerste h2 in de section) */
.why-section .wp-block-group__inner-container > .wp-block-heading:first-of-type{
  font-size: 40px;
  margin: 0 0 34px !important;
  letter-spacing: -0.3px;
  position: relative;
}
.why-section .wp-block-group__inner-container > .wp-block-heading:first-of-type::after{
  content:"";
  display:block;
  width:70px;
  height:2px;
  background: var(--gold);
  margin-top:18px;
  border-radius:999px;
  opacity:.95;
}

/* columns spacing inside why */
.why-section .wp-block-columns{
  margin-top: 0 !important;
  column-gap: 55px;
  row-gap: 28px;
}

/* usp headings (jij gebruikt h2 in je kolommen) */
.why-section .wp-block-column .wp-block-heading{
  font-size: 24px;
  margin: 0 0 14px !important;
  line-height: 1.2;
}
.why-section .wp-block-column .wp-block-heading::after{
  content:"";
  display:block;
  width:56px;
  height:2px;
  background: rgba(184,155,94,.90);
  margin-top:12px;
  border-radius:999px;
}

/* usp text */
.why-section .wp-block-column p{
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 34ch;
}

/* =========================================================
   6) SPACERS (noodrem)
========================================================= */
.wp-block-spacer{
  max-height: 120px;
}

/* =========================================================
   7) FOOTER
========================================================= */
.site-info{
  text-align:center;
  padding:40px 0;
  font-size:14px;
  color:var(--muted);
  border-top:1px solid var(--border);
}

/* =========================================================
   8) RESPONSIVE
========================================================= */
@media (max-width: 900px){
  .hero-section{ padding:110px 20px; }
  .hero-section h1{ font-size:32px; }

  .wp-block-column.collection-card img{ height:240px; }

  .why-section{ padding:70px 0 60px; }
  .why-section .wp-block-group__inner-container > .wp-block-heading:first-of-type{
    font-size:30px;
  }

  .why-section .wp-block-column p{ max-width: 100%; }
}

/* =========================================
   FIX: RUIMTE TUSSEN COLLECTIE EN WHY
   (werkt met jouw classes: collection-section + why-section)
========================================= */

/* 1) Collectie group: minder ruimte onder */
.collection-section{
  padding-bottom: 40px !important;
  margin-bottom: 0 !important;
}

/* Gutenberg zet vaak margin onder columns */
.collection-section .wp-block-columns{
  margin-bottom: 0 !important;
}

/* 2) Why section: minder ruimte boven + strakke padding */
.why-section{
  margin-top: 0 !important;
  padding-top: 40px !important;
}

/* 3) Kill margins die vaak de “spacer gap” faken */
.collection-section + .why-section{
  margin-top: 0 !important;
}

/* Extra: headings in/na Collectie hebben soms huge margin */
.collection-section .wp-block-heading{
  margin-bottom: 18px !important;
}

/* Extra noodrem: als er tóch een onzichtbare spacer zit */
.collection-section .wp-block-spacer{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================
   WHY SECTION – BOTTOM SPACE FIX
========================================= */

/* minder “vloer” onderaan */
.why-section{
  padding-bottom: 45px !important;
  margin-bottom: 0 !important;
}

/* Gutenberg zet vaak extra margins op de laatste elementen */
.why-section .wp-block-columns{
  margin-bottom: 0 !important;
}

.why-section .wp-block-column:last-child{
  margin-bottom: 0 !important;
}

/* laatste paragraaf in elke kolom: geen extra margin onder */
.why-section .wp-block-column p:last-child{
  margin-bottom: 0 !important;
}

/* title ook wat strakker */
.why-section > .wp-block-group__inner-container > .wp-block-heading{
  margin-bottom: 26px !important;
}

/* footer meteen netjes aansluiten */
.site-info{
  margin-top: 0 !important;
  padding-top: 28px !important;
}

.why-section {
  background: #f3efe9;
}

.collection-section h2 {
  margin-bottom: 10px;
}

.why-section .wp-block-column .wp-block-heading {
  font-weight: 600;
}

.services-section{
  padding:40px 0;
  background:#fff;
}

.services-section h2{
  font-size:40px;
}

.services-section .wp-block-column{
  padding:0 30px;
}

.services-section h3{
  font-size:22px;
  margin-bottom:14px;
  position:relative;
}

.services-section h3::after{
  content:"";
  display:block;
  width:50px;
  height:2px;
  background:var(--gold);
  margin-top:12px;
}

.services-section p{
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  margin-bottom:20px;
}

/* ===============================
   MICRO ANIMATIONS – LUXE
=============================== */

/* Smooth transitions overall */
.wp-block-column,
.wp-block-group,
.wp-block-button__link,
.main-navigation a,
img{
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease, opacity .28s ease;
}

/* Buttons: subtle “lift” + shine */
.wp-block-button__link{
  position: relative;
  overflow: hidden;
}
.wp-block-button__link::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:40%;
  height:200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: rotate(18deg);
  opacity: 0;
}
.wp-block-button__link:hover::before{
  opacity: 1;
  left: 120%;
  transition: left .75s ease;
}

/* Services cards: hover lift + shadow */
.services-section .wp-block-column{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.services-section .wp-block-column:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,.10);
  border-color: rgba(184,155,94,.30);
}

/* Text underline animation for links in content */
.entry-content a{
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease, color .25s ease;
}
.entry-content a:hover{
  background-size: 100% 1px;
}

/* Respect people who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===============================
   SCROLL REVEAL – LUXURY BOUTIQUE
=============================== */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  filter: blur(4px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.16,1,.3,1), filter .95s ease;
  will-change: transform, opacity, filter;
}

.reveal.reveal--in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ===============================
   HOVER – LUXURY BOUTIQUE
=============================== */

/* Cards (services + andere kolommen die je als cards gebruikt) */
.services-section .wp-block-column{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: 0 12px 38px rgba(0,0,0,.06);
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1),
              border-color .35s ease;
}

.services-section .wp-block-column:hover{
  transform: translateY(-10px);
  box-shadow: 0 30px 90px rgba(0,0,0,.14);
  border-color: rgba(184,155,94,.40);
}

/* Collection cards: iets meer “lift” */
.wp-block-column.collection-card:hover{
  transform: translateY(-12px);
  box-shadow: 0 36px 110px rgba(0,0,0,.16);
}

/* Buttons: iets meer presence */
.wp-block-button__link{
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s ease;
}
.wp-block-button__link:hover{
  transform: translateY(-4px);
}

/* Subtiele gold glow on hover (premium) */
.services-section .wp-block-column:hover,
.wp-block-column.collection-card:hover{
  box-shadow:
    0 30px 90px rgba(0,0,0,.14),
    0 0 0 1px rgba(184,155,94,.18);
}

/* ===============================
   SERVICES CARDS – TITLE SPACING FIX
=============================== */

/* 1) Geef de hele card voldoende padding */
.services-section .wp-block-column{
  padding: 28px 28px 26px !important;  /* ↑ meer top ruimte */
}

/* 2) Reset margins van de heading in de card */
.services-section .wp-block-column .wp-block-heading{
  margin: 0 0 12px !important;         /* geen top margin */
  padding-top: 2px !important;         /* mini breathing room */
  line-height: 1.2 !important;
}

/* 3) Als je gold lijn via ::after doet: geef ruimte eronder */
.services-section .wp-block-column .wp-block-heading::after{
  margin-top: 12px !important;
}

/* 4) Reset de eerste paragraph margin zodat het strak blijft */
.services-section .wp-block-column p{
  margin: 0 !important;
}

/* =========================================
   VISIT SECTION (Bezoek onze winkel)
   Group class: visit-section
========================================= */

.visit-section{
  background: #fff;
  padding: 90px 0;
}

.visit-section > .wp-block-group__inner-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.visit-section .wp-block-columns{
  align-items: center;
  column-gap: 48px;
  row-gap: 28px;
}

.visit-section h2{
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.4px;
}

.visit-section h2::after{
  content:"";
  display:block;
  width:70px;
  height:2px;
  background: var(--gold);
  margin-top:16px;
  border-radius:999px;
  opacity:.95;
}

.visit-section p{
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
  max-width: 58ch;
}

/* Buttons group */
.visit-section .wp-block-buttons{
  gap: 12px;
  margin-top: 18px;
}

.visit-section .wp-block-button__link{
  border-radius: 999px;
  padding: 14px 22px;
}

/* Image card */
.visit-section .wp-block-image{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,.08);
}

.visit-section .wp-block-image img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* Subtiele hover */
.visit-section .wp-block-image{
  transition: transform .25s ease, box-shadow .25s ease;
}
.visit-section .wp-block-image:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
}

/* Responsive */
@media (max-width: 900px){
  .visit-section{ padding: 70px 0; }
  .visit-section > .wp-block-group__inner-container{ padding: 0 24px; }
  .visit-section h2{ font-size: 30px; }
  .visit-section .wp-block-image img{ height: 280px; }
}

/* =====================================
   LUXURY FADE-UP ANIMATION
===================================== */

.fade-up{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.16,1,.3,1);
}

.fade-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}