/* ============================= */
/* ALGEMEEN / BASE STYLING       */
/* ============================= */

/* --- Root variables --- */
:root {
    --bg: #f5f3f0; /* Off-White hoofdkleur */
	--bg-section: #FCFCFB; /* Off-White Ultra */
    --bg-dark: #0A0A0A; /* Zwarte secties */
    --accent: #C9A66B; /* Champagne Gold */
    --accent-dark: #B89660; /* Donkerder goud voor hover */
    --muted: #1F1F1F; /* Neutrale tekstkleur */
    --text-dark: #333333; /* Algemene tekst */
    --card: #FFFFFF; /* Kaart achtergrond */
    --leem: #DDD2C1; /* Leem kleur */
    --leem-light: #E8E3DA; /* Leem Light voor prompt-boxen / text-boxen */
    --radius: 12px; /* Ronde hoeken */
}

/* Playfair Display – Regular (400) */
@font-face {
    font-family: "Playfair Display";
    src: url("fonts/playfair/PlayfairDisplay-Regular.woff2") format("woff2"),
         url("fonts/playfair/PlayfairDisplay-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Playfair Display – Medium (500) */
@font-face {
    font-family: "Playfair Display";
    src: url("fonts/playfair/PlayfairDisplay-Medium.woff2") format("woff2"),
         url("fonts/playfair/PlayfairDisplay-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Playfair Display – SemiBold (600) */
@font-face {
    font-family: "Playfair Display";
    src: url("fonts/playfair/PlayfairDisplay-SemiBold.woff2") format("woff2"),
         url("fonts/playfair/PlayfairDisplay-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Playfair Display – Bold (700) */
@font-face {
    font-family: "Playfair Display";
    src: url("fonts/playfair/PlayfairDisplay-Bold.woff2") format("woff2"),
         url("fonts/playfair/PlayfairDisplay-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Montserrat – Regular (400) */
@font-face {
    font-family: "Montserrat";
    src: url("fonts/montserrat/Montserrat-Regular.woff2") format("woff2"),
         url("fonts/montserrat/Montserrat-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Montserrat – Medium (500) */
@font-face {
    font-family: "Montserrat";
    src: url("fonts/montserrat/Montserrat-Medium.woff2") format("woff2"),
         url("fonts/montserrat/Montserrat-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Montserrat – SemiBold (600) */
@font-face {
    font-family: "Montserrat";
    src: url("fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2"),
         url("fonts/montserrat/Montserrat-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Montserrat – Bold (700) */
@font-face {
    font-family: "Montserrat";
    src: url("fonts/montserrat/Montserrat-Bold.woff2") format("woff2"),
         url("fonts/montserrat/Montserrat-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html{
  scroll-behavior: smooth;
}

body {
    font-family: "Montserrat", Arial, sans-serif;
    margin:0;
    padding:0;
    background: var(--bg);
    color: var(--text-dark);
    line-height:1.6;
}
a { text-decoration:none; color:inherit; }
h1,h2,h3 { color: var(--text-dark); margin:0.3em 0; }
h1 { font-size:2.8em; font-family:"Playfair Display", serif; font-weight:600; }
h2 { font-size:2em; font-family:"Playfair Display", serif; }
h3 { font-size:1.6em; font-family:"Playfair Display", serif; }
p { margin: 0.5em 0; }
ul { padding-left:40px; margin:1em 0; }

/* ============================= */
/* HEADER / FOOTER               */
/* ============================= */
header.header {
	background: var(--bg-section);
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
	flex-wrap: wrap;
}
header.header h2 { margin:0; font-size:1.8em; }
footer {
    text-align:center;
    padding:30px 20px;
    font-size:0.9em;
    color:#777;
    margin-top:50px;
}
.header .monogram {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}
.header .monogram img {
    width: 50px
}
.header .logo {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.header .logo img {
    width: 250px
}
.header .lang-flags {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ============================= */
/* PREMIUM BUTTONS               */
/* ============================= */
.button, .hero .button, .form-button {
    display: inline-block;
    white-space: nowrap;
	margin-top: 1.25rem;
    margin-bottom: 0;
    padding: 12px 12px;
    background: var(--accent);
    color: var(--bg-dark);
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 8px 22px rgba(0,0,0,0.20);
}
.button:hover, .hero .button:hover, .form-button:hover {
    background: var(--accent-dark);
	color: var(--bg-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}
.hero .button {
    font-size: 17px;
    padding: 15px 32px;
}

.actions {
    display: flex;
    justify-content: space-between; /* eerste links, tweede rechts */
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.actions .button {
    text-align: center;      /* tekst gecentreerd */
    white-space: nowrap;     /* voorkom dat tekst breekt */
}

/* Remove small button */
.remove-btn {
    background: #e59a88;
    color: #fff;
    border: none;
    font-weight: 500;
    padding: 8px 12px;
    border-radius:6px;
    cursor:pointer;
}
.remove-btn:hover {
    background: #d88270;
}

/* ============================= */
/* HERO SECTIE                   */
/* ============================= */
.hero-stage{
  background: var(--bg);
  padding: 24px 0 40px;  /* ruimte rondom stage */
}

.hero-stage-inner{
  max-width: 1200px;     /* match met rest van je layout */
  margin: 0 auto;
  padding: 0 24px;

  position: relative;
  border-radius: 18px;   /* optioneel, mag 0 als je strak wil */
  overflow: hidden;      /* overlay blijft netjes binnen stage */
}

/* Houd de stage altijd 16:9 zoals je Canva export (1600x900) */
.hero-stage-inner::before{
  content:"";
  display:block;
  padding-top: 56.25%;   /* 9/16 = 56.25% */
}

/* De hero compositie zelf */
.hero-stage-img{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;   /* ✅ hele Canva-compositie zichtbaar */
  background: var(--leem-light); /* vult eventuele randen op */
}

/* Overlay tekstblok links */
.hero-overlay{
  position:absolute;
  z-index:2;

  /* Dit zijn de “Canva-achtige” ankers.
     Je kunt deze 2 waarden als enige finetunen. */
  left: 6%;
  top: 16%;

  width: 60%;
  max-width: 700px;
  color: #2B2B2B;
}

/* Zorg dat woorden netjes breken op smalle schermen */
.hero-overlay, .hero-overlay *{
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* TITEL: schaal écht mee op mobiel */
.hero-overlay h1{
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 5.2vw, 3.6rem); /* <-- mobiel kleiner */
  line-height: 1.06;
  margin: 0 0 12px 0;
  text-align: left;
  /*text-wrap: balance; /* moderne browsers: mooiere regels */
  hyphens:none;
}

/* SUBTITLE */
.hero-overlay h2{
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 3.2vw, 1.6rem); /* <-- mobiel kleiner */
  line-height: 1.35;
  margin: 0 0 16px 0;
  color: rgba(43,43,43,0.85);
  text-align: left;
  max-width: 48ch;
}

/* CTA + micro */
.hero-actions{ margin: 0 0 10px 0; }
.hero-cta{ display:inline-flex; margin: 0 0 10px 0; }

/* CTA en micro compacter op mobiel */
.hero-micro{
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.9rem, 2.6vw, 0.95rem);
  line-height: 1.35;
  color: #6A6A6A;
  margin: 10px 0 0 0;
  text-align: left;
}

.hero-text{
  font-family:'Montserrat', sans-serif;
  font-size: clamp(0.98rem, 2.9vw, 1.02rem);
  line-height: 1.5;
  color: rgba(43,43,43,0.85);
  margin: 12px 0 0 0;
  max-width: 54ch;
  text-align:left;
}

/* Alleen weergeven op mobiel */
.hero-text-mobile-section{
  padding: 56px 0 64px;
  background: var(--bg);
  
  display: none;
}

.hero-text-mobile-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================
   Fallback
========================= */
.shop-fallback-note {
    max-width: 720px;
    margin: 20px auto 10px;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(0,0,0,0.03);
    text-align: center;
}

.shop-fallback-note p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* =========================
   DOWNLOAD PAGE (premium styling)
   Uses existing HTML/classes, no layout changes required
========================= */

/* Hero */
.hero{
  max-width: 1100px;
  margin: 26px auto 0;
  padding: 28px 24px;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid rgba(43,43,43,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.hero h2{
  margin: 0 0 10px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.0rem;
  color: rgba(43,43,43,0.95);
}

.hero .text{
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.0rem;
  line-height: 1.55;
  color: rgba(43,43,43,0.75);
}

/* Container spacing */
.container{
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 0 24px;
}

/* Main card wrapper (replaces old section-important feel) */
.section-important{
  background: #FFFFFF;
  border: 1px solid rgba(43,43,43,0.08);
  border-radius: 22px;
  padding: 22px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  text-align: left; /* important: remove centered feel */
}

/* Invoice box */
.invoice-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(245,243,240,0.55);
  border: 1px solid rgba(43,43,43,0.08);
  margin-bottom: 16px;
}

.invoice-info{
  display:flex;
  align-items: center;
  gap: 12px;
}

.invoice-info strong{
  display:block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: rgba(43,43,43,0.92);
}

.invoice-info span{
  display:block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  color: rgba(43,43,43,0.72);
}

/* Downloads list */
.downloads-list h3{
  margin: 6px 0 8px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.55rem;
  color: rgba(43,43,43,0.95);
}

.downloads-list p{
  margin: 0 0 14px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.55;
  color: rgba(43,43,43,0.75);
}

/* Groups */
.download-groups{
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.download-group{
  border-radius: 18px;
  background: rgba(245,243,240,0.35);
  border: 1px solid rgba(43,43,43,0.08);
  overflow: hidden;
}

.download-group-header{
  padding: 14px 14px;
  background: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(43,43,43,0.08);
}

.product-name{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: rgba(43,43,43,0.92);
}

/* Items list */
.download-items{
  list-style: none;
  margin: 0;
  padding: 0;
}

.download-item{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid rgba(43,43,43,0.08);
}

.download-item:first-child{
  border-top: none;
}

/* Left side file row */
.file-left{
  display:flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.file-name{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: rgba(43,43,43,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}

/* File type badge */
.file-type{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(43,43,43,0.10);
  background: rgba(43,43,43,0.06);
  color: rgba(43,43,43,0.82);
  white-space: nowrap;
}

/* Icon placeholder (keeps your existing span.file-icon) */
.file-icon{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(43,43,43,0.08);
  display:inline-block;
}

/* Type-specific accents (badge + icon tint) */
.is-pdf .file-type{ background: rgba(201,166,107,0.24); border-color: rgba(201,166,107,0.45); }
.is-zip .file-type{ background: rgba(43,43,43,0.06); border-color: rgba(43,43,43,0.12); }
.is-word .file-type{ background: rgba(201,166,107,0.18); border-color: rgba(201,166,107,0.35); }
.is-excel .file-type{ background: rgba(201,166,107,0.18); border-color: rgba(201,166,107,0.35); }
.is-md .file-type{ background: rgba(43,43,43,0.05); border-color: rgba(43,43,43,0.10); }

/* Buttons: align with your premium button styling */
.download-btn,
.download-all-btn{
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 14px;
}

/* Notes */
.download-note{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(43,43,43,0.08);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  color: rgba(43,43,43,0.70);
}

/* Download all */
.download-all{
  margin-top: 14px;
}

/* =========================
   VALUE
========================= */

.value-section{
  padding: 56px 0 64px;
  background: var(--bg);
}

.value-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.value-block h3{
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0 0 18px 0;
  color: #2B2B2B;
}

.value-list{
  margin: 0;
  padding-left: 18px;
}

.value-list li{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(43,43,43,0.85);
  margin-bottom: 10px;
}

/* =========================
   Shared section styles
========================= */

.section-title{
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.12;
  color: #2B2B2B;
  margin: 0 0 14px 0;
  text-align: left;
}

.section-lead{
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(43,43,43,0.85);
  margin: 0 0 26px 0;
  max-width: 70ch;
}

/* =========================
   WHY
========================= */

.why-section{
  padding: 64px 0 68px;
  background: var(--bg);
}

.why-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.why-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.why-card{
  background: #FFFFFF;
  border: 1px solid rgba(201,166,107,0.35);
  border-radius: 18px;
  padding: 20px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}

.why-card h3{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 8px 0;
  color: #2B2B2B;
}

.why-card p{
  font-family: 'Montserrat', sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
  color: rgba(43,43,43,0.85);
}

/* =========================
   PROOF
========================= */

.proof-section{
  padding: 64px 0 68px;
  background: #F5F3F0; /* iets contrast, nog steeds beige */
}

.proof-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.proof-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.proof-card{
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(43,43,43,0.08);
  border-radius: 18px;
  padding: 20px 18px;
}

.proof-card h3{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 8px 0;
  color: #2B2B2B;
}

.proof-card p{
  font-family: 'Montserrat', sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
  color: rgba(43,43,43,0.85);
}

.proof-note{
  margin: 18px 0 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  color: rgba(43,43,43,0.75);
}

/* =========================
   CTA
========================= */

.cta-section{
  padding: 70px 0 78px;
  background: var(--bg);
}

.cta-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.cta-box{
  background: #FFFFFF;
  border: 1px solid rgba(201,166,107,0.45);
  border-radius: 22px;
  padding: 28px 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.cta-box h2{
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.0rem;
  line-height: 1.15;
  margin: 0 0 10px 0;
  color: #2B2B2B;
}

.cta-box p{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 18px 0;
  color: rgba(43,43,43,0.85);
  max-width: 70ch;
}

.cta-actions{
  margin: 0 0 10px 0;
}

.cta-micro{
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  color: #6A6A6A;
}

.cta-button{ display:inline-flex; margin: 0 0 10px 0; }

/* =========================
   FAQ
========================= */

.faq-section{
  padding: 64px 0 72px;
  background: var(--bg);
}

.faq-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.faq-list{
  margin-top: 24px;
}

/* Item */
.faq-item{
  border-bottom: 1px solid rgba(43,43,43,0.12);
  padding: 14px 0;
}

/* Vraag */
.faq-question{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #2B2B2B;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}

/* Verwijder standaard marker */
.faq-question::-webkit-details-marker{
  display: none;
}

/* + / − icoon */
.faq-question::after{
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  color: #B89660;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after{
  content: '−';
}

/* Antwoord */
.faq-answer{
  padding-top: 10px;
}

.faq-answer p{
  font-family: 'Montserrat', sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(43,43,43,0.85);
  margin: 0;
}

/* =========================
   CHECKOUT – premium style
========================= */

.checkout-section{
  padding: 70px 0 78px;
  background: var(--bg);
}

.checkout-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.checkout-head{
  margin-bottom: 22px;
}

.checkout-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  align-items: start;
}

.checkout-panel{
  background: #FFFFFF;
  border: 1px solid rgba(43,43,43,0.08);
  border-radius: 22px;
  padding: 18px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

/* Package cards */
.package-choice-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.package-choice{
  display: block;
  border: 1px solid rgba(201,166,107,0.35);
  border-radius: 18px;
  padding: 16px 14px;
  cursor: pointer;
  background: rgba(245,243,240,0.35);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position: relative;
}

.package-choice:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  border-color: rgba(201,166,107,0.55);
}

.package-choice input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.package-choice.is-selected{
  border-color: rgba(201,166,107,0.85);
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.package-choice.is-selected .package-choice-cta{
  background: rgba(201,166,107,0.35);
  border-color: rgba(201,166,107,0.85);
  font-weight: 700;
}

.package-choice-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.package-choice-title{
  font-family:'Montserrat', sans-serif;
  font-weight: 700;
  color:#2B2B2B;
  font-size: 1.05rem;
}

.package-badge{
  font-family:'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color:#2B2B2B;
  background: rgba(201,166,107,0.25);
  border: 1px solid rgba(201,166,107,0.45);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.package-choice-features{
  margin: 0 0 12px 0;
  padding-left: 18px;
  color: rgba(43,43,43,0.85);
}

.package-choice-features li{
  font-family:'Montserrat', sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 6px 0;
}

.package-choice-bottom{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.package-choice-price{
  font-family:'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color:#2B2B2B;
}

.package-choice-cta{
  font-family:'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color:#2B2B2B;
  background: rgba(43,43,43,0.06);
  border: 1px solid rgba(43,43,43,0.10);
  padding: 8px 10px;
  border-radius: 12px;
}

.package-cover {
  text-align: center;
  margin-bottom: 12px;
}

.package-cover img {
  max-height: 130px;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* Form */
.checkout-panel-form .form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checkout-panel-form .form-row input{
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(43,43,43,0.14);
  border-radius: 14px;
  padding: 12px 12px;
  font-family:'Montserrat', sans-serif;
  font-size: 0.95rem;
  outline: none;
  background: #FFF;
}

.checkout-panel-form input{
  margin: 0 !important;
}

.checkout-panel-form .form-row input:focus{
  border-color: rgba(201,166,107,0.85);
  box-shadow: 0 0 0 4px rgba(201,166,107,0.18);
}

.checkout-disclaimer{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  margin: 12px 0 14px;
  text-align:left;
}

.checkout-disclaimer input{
  margin-top: 4px;
}

.checkout-button{
  width: 100%;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 16px;
}

.checkout-button:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

.checkout-micro{
  margin: 10px 0 0;
  font-family:'Montserrat', sans-serif;
  font-size: 0.88rem;
  color: rgba(43,43,43,0.70);
  text-align: left;
}

/* =========================
   Checkout trust (icons + note)
========================= */

.checkout-trustbar{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(43,43,43,0.08);
}

.payment-icons.payment-icons-compact{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
}

.payment-icons.payment-icons-compact img{
  height: 22px;
  width: auto;
  opacity: 0.9;
  filter: grayscale(0.2);
}

.checkout-trust-note{
  margin: 10px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  line-height: 1.35;
  color: rgba(43,43,43,0.72);
}

/* ============================= */
/* SALES HUB (sales.php)         */
/* ============================= */

.sales-toolbar {
  margin: 10px 0 18px 0;
}

.sales-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-section);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.sales-filter-label {
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
}

.sales-filter-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chip {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--text-dark);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}

.chip:hover {
  transform: translateY(-1px);
}

.chip.active {
  background: var(--accent);
  color: #000;
}

/* Grid */
.sales-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Card */
.sales-card {
  background: var(--bg-section);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

.sales-image-wrap {
  position: relative;
}

.sales-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  background: #fff;
}

/* Badges */
.sales-badges {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  border: 1px solid rgba(0,0,0,0.12);
  backdrop-filter: blur(6px);
}

.badge-popular {
  background: rgba(201, 166, 107, 0.92);
  color: #000;
}

.badge-recommended {
  background: rgba(245, 243, 240, 0.92);
  color: var(--text-dark);
  border: 1px solid var(--accent);
}

/* Prijs prominent */
.sales-price-overlay {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255,255,255,0.12);
}

.sales-body {
  padding: 18px;
}

.sales-title {
  margin: 0 0 8px 0;
}

.sales-desc {
  margin: 0 0 14px 0;
  color: var(--muted);
  line-height: 1.5;
}

.sales-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Secondary button (subtiel maar duidelijk) */
.button.secondary {
  background: transparent;
  color: var(--text-dark);
  border: 1px solid var(--accent);
}

/* Extra prijs in tekst */
.sales-price-text {
  margin-left: auto;
  font-weight: 900;
  color: var(--text-dark);
}

.sales-price-text .currency {
  font-weight: 700;
  opacity: 0.75;
}

/* Floating cart */
.cart-floating {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--text-dark);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.cart-floating .count {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  font-weight: 900;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  bottom: 88px;
  background: var(--text-dark);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 1400;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================
   CART (premium styling)
========================= */

.cart-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(43,43,43,0.08);
  background: #fff;
}

.cart-table thead th{
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: rgba(43,43,43,0.80);
  padding: 14px 14px;
  background: rgba(245,243,240,0.55);
  border-bottom: 1px solid rgba(43,43,43,0.08);
}

.cart-table td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(43,43,43,0.08);
  font-family: 'Montserrat', sans-serif;
  color: rgba(43,43,43,0.92);
  vertical-align: middle;
}

.cart-table tbody tr:last-child td{
  border-bottom: none;
}

.cart-product{
  font-weight: 700;
}

.cart-price{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-action{
  white-space: nowrap;
}

.qty-input{
  width: 86px;
  max-width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(43,43,43,0.12);
  background: rgba(255,255,255,0.95);
  font-family: 'Montserrat', sans-serif;
}

/* Summary */
.cart-summary{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.cart-total{
  background: rgba(245,243,240,0.55);
  border: 1px solid rgba(43,43,43,0.08);
  border-radius: 18px;
  padding: 12px 14px;
  font-family: 'Montserrat', sans-serif;
  color: rgba(43,43,43,0.85);
  font-weight: 700;
}

.cart-total span{
  font-weight: 800;
  color: rgba(43,43,43,0.95);
}

/* Divider */
.cart-divider{
  margin: 18px 0;
  height: 1px;
  background: rgba(43,43,43,0.08);
}

/* Checkout block */
.cart-checkout{
  text-align: left;
}

.cart-h3{
  margin: 0 0 8px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: rgba(43,43,43,0.95);
}

.cart-note{
  margin: 0 0 12px 0;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.55;
  color: rgba(43,43,43,0.72);
}

.cart-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 10px;
  margin-top: 10px;
}

.cart-form-row input{
  width: 90%;
  min-width: 0;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(43,43,43,0.12);
  font-family: 'Montserrat', sans-serif;
}

/* Terms */
.cart-terms{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: 'Montserrat', sans-serif;
  color: rgba(43,43,43,0.72);
  font-size: 0.92rem;
  line-height: 1.35;
}

.cart-terms input{
  margin-top: 2px;
}

/* Buttons row */
.cart-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.cart-actions .button{
  border-radius: 14px;
  padding: 12px 16px;
}

/* Reuse your existing trust styles */
.payment-icons.payment-icons-compact{
  margin-top: 14px;
}

/* ============================= */
/* IMAGES & CARDS                */
/* ============================= */
.section-image {
    background: var(--leem-light);
    padding: 40px 20px;
    border-radius: var(--radius);
    margin: 30px 0;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-block {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.image-block img {
    display: block;
    max-width: 100%;
    height: auto;
	box-shadow: 0 18px 30px rgba(0,0,0,0.25),
        0 0 0 2px rgba(201,166,107,0.35);
    border-radius: var(--radius);
}
.payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.payment-icons img { max-width: 80px; height:auto; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
}
.card:hover { transform: translateY(-4px); box-shadow:0 12px 35px rgba(0,0,0,0.2);}
.card-body { padding: 1rem; display:flex; flex-direction:column; justify-content:space-between; gap:0.75rem; flex:1; height:100%; }
.card-title { font-weight:700; margin:0; color: var(--text-dark);}
.card-desc { color: var(--muted); font-size:0.95rem; line-height:1.4; overflow:hidden; }
.card-desc.expanded { overflow:visible; }

.gallery {
    display: flex;
    flex-direction: column;
}

.main-img {
    width: 100%;
    max-height: 500px;        /* hogere max zodat grote afbeeldingen goed tot hun recht komen */
    height: auto;             /* laat hoogte automatisch aanpassen */
    object-fit: contain;      /* volledige afbeelding zichtbaar zonder bijsnijden */
    background: #f4efe5;
}

.thumbs {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem;
    overflow-x: auto;
}

.thumbs img {
    width: 40px;              /* groter, verhoudingsgewijs */
    height: auto;             /* hoogte automatisch */
    object-fit: contain;      /* voorkomt dat thumbnails worden afgesneden */
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
}

.thumbs img:hover, .thumbs img.active {
    transform: scale(1.05);
    border-color: var(--accent-dark);
}

.price {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.90rem;
	/*margin-top: 0.5rem;*/
	text-align: right;
}

.toggle-desc {
    font-size: 0.85rem; /* kleiner dan standaard tekst */
    color: #0f172a;     /* eventueel accentkleur */
    cursor: pointer;    /* laat zien dat het klikbaar is */
    user-select: none;  /* voorkomt selectie bij klikken */
}

/* ============================= */
/* PRICING BUY SECTION           */
/* ============================= */
.pricing-buy {
    text-align: center;
}

.pricing-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.package-card {
    width: 240px;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
}

.package-card h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.package-card .price {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.package-card .features {
    text-align: left;
    padding-left: 18px;
    margin: 0 0 14px 0;
    flex-grow: 1;
}

.package-card .features li {
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.package-card .buy-btn {
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
}

/* ============================= */
/* PROMPT/CONTENT BOXES           */
/* ============================= */
.prompt-box { background: var(--leem-light); padding: 16px; border-radius: var(--radius); margin:12px 0; font-family: 'Montserrat', sans-serif; }

/* ============================= */
/* TABLES / WINKELWAGEN          */
/* ============================= */
table { width:100%; border-collapse: collapse; margin-top:1rem; font-size:14px;}
thead { background: var(--leem); }
thead th { text-align:left; font-weight:600; padding:10px 8px; border-bottom:1px solid #ddd; }
tbody tr { text-align:left; border-bottom:1px solid #eee; }
tbody tr:last-child { border-bottom:none; }
td { padding:10px 8px; vertical-align:middle; }
td:first-child { font-weight:500; }
td.price { white-space: nowrap; font-weight:500; }

/*.qty-input {
    width: 35px;
    padding: 4px 6px;
    font-size: 14px;
	border:1px solid #ccc; 
	border-radius:6px; 
}*/

/* ============================= */
/* DISCLAIMER                    */
/* ============================= */
.disclaimer {
    display: flex;
    align-items: flex-start;        /* multiline blijft netjes */
    justify-content: center;        /* centreert de inhoud horizontaal */
    gap: 0.5rem;

    margin-top: 0.75rem;
    margin-left: auto;
    margin-right: auto;

    max-width: 520px;               /* mooie leesbreedte */
    width: 100%;

    font-size: 0.875rem;            /* ±14px */
    line-height: 1.5;
    color: #555;

    text-align: left;               /* tekst blijft leesbaar */
}

.disclaimer input {
    margin-top: 0.2em;              /* checkbox optisch uitlijnen */
    flex-shrink: 0;                 /* checkbox krimpt niet */
}

.disclaimer span {
    display: block;
    max-width: 100%;
}

/* ============================= */
/* LEGAL PAGES (disclaimer/privacy) */
/* ============================= */

.legal-page .section,
.legal-page .section p,
.legal-page .section h3,
.legal-page .section ul,
.legal-page .section ol,
.legal-page .section li,
.legal-page details,
.legal-page details p,
.legal-page details ul,
.legal-page details li {
  text-align: left !important;
}

/* nette bullets */
.legal-page .section ul,
.legal-page .section ol,
.legal-page details ul,
.legal-page details ol {
  padding-left: 22px !important;
  margin: 12px 0 !important;
  list-style-position: outside !important;
  display: block !important; /* mocht er flex op staan */
}

.legal-page .section li,
.legal-page details li {
  display: list-item !important; /* reset als li ooit flex/block kreeg */
  margin: 6px 0 !important;
}

/* =========================
   THEMES (Sales hub /shop)
========================= */

section.themes.container{
  max-width: 1100px;
  margin: 22px auto 10px;
  padding: 0 24px;
}

section.themes.container > h2{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 2.0rem;
  line-height: 1.15;
  margin: 0 0 10px 0;
}

section.themes.container .themes-intro{
  max-width: 72ch;
  margin: 0 0 14px 0;
}

section.themes.container .themes-intro p{
  margin: 0 0 10px 0;
  color: rgba(43,43,43,0.72);
  line-height: 1.65;
}

/* GRID */
section.themes.container > .themes-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  align-items: stretch;
}

/* CARD */
section.themes.container > .themes-grid > a.theme-card{
  display: flex;
  flex-direction: column;
  gap: 8px;

  padding: 18px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(43,43,43,0.10);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

section.themes.container > .themes-grid > a.theme-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
  border-color: rgba(201,166,107,0.55);
}

section.themes.container a.theme-card h3{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.30rem;
  line-height: 1.15;
}

section.themes.container a.theme-card p{
  margin: 0;
  color: rgba(43,43,43,0.72);
  line-height: 1.6;
}

/* CTA knop (kleiner, jij wilde kleiner) */
section.themes.container a.theme-card .theme-cta{
  margin-top: auto;
  align-self: flex-start;

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

  padding: 7px 11px;
  border-radius: 12px;
  font-size: 0.90rem;
  line-height: 1.1;

  background: rgba(201,166,107,0.92);
  color: #000;
  font-weight: 800;

  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  text-decoration: none;
}

/* Series callout */
section.themes.container .about-callout, section.about-callout-mobile .about-callout {
  margin-top: 16px;
  padding: 18px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(201,166,107,0.35);
  background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(0,0,0,0.04);
}

section.themes.container .about-callout h2, section.about-callout-mobile .about-callout h2 {
  margin: 0 0 10px 0;
}

section.about-callout-mobile {
	display: none; 
}

/* Responsive */
@media (max-width: 980px){
  /*section.themes.container > .themes-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));*/
}
/*@media (max-width: 520px){
  section.themes.container > .themes-grid{
    grid-template-columns: 1fr;
  }
}*/

/* =========================
   HERO TEXT SYSTEM (auto lead/body/micro)
   Works with your existing HTML: .hero > .title > .text > p
========================= */

/* Base paragraph style */
.hero .title .text p{
  margin: 0 0 12px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(43,43,43,0.76);
}

/* 1st paragraph = LEAD */
.hero .title .text p:first-of-type{
  font-size: 1.0rem;
  line-height: 1.75;
  color: rgba(43,43,43,0.72);
}

/* Middle paragraphs = BODY (default already) */
.hero .title .text p:not(:first-of-type):not(:last-of-type){
  font-size: 0.95rem;
  color: rgba(43,43,43,0.78);
}

/* Last paragraph = MICRO */
.hero .title .text p:last-of-type{
  margin-top: 14px;
  padding-top: 12px;
  /*border-top: 1px solid rgba(43,43,43,0.10);*/

  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(43,43,43,0.62);
}

/* If there is only ONE paragraph, treat it as lead (and avoid micro border) */
.hero .title .text p:only-of-type{
  border-top: none;
  padding-top: 0;
  margin-top: 0;

  font-size: 1.08rem;
  line-height: 1.75;
  color: rgba(43,43,43,0.72);
}

/* Links in hero text: premium underline */
.hero .title .text a{
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(201,166,107,0.45);
  padding-bottom: 1px;
}
.hero .title .text a:hover{
  border-bottom-color: rgba(201,166,107,0.75);
}

/* Mobile polish */
@media (max-width: 768px){
  .hero{
    margin: 18px auto 12px;
    padding: 0 16px;
  }

  .hero .title{
    padding: 20px 16px;
    border-radius: 18px;
  }

  .hero .title h1{
    font-size: clamp(1.65rem, 6.0vw, 2.1rem);
    line-height: 1.12;
    margin-bottom: 10px;
  }

  .hero .title .text p{
    font-size: 0.98rem;
    margin-bottom: 10px;
  }

  .hero .title .text p:first-of-type{
    font-size: 1.02rem;
  }

  .hero .title .text p:last-of-type{
    font-size: 0.90rem;
  }
  
  section.themes.container{
    display: none;
  }
  .sales-toolbar {
	display: none; 
  }
}

.text-mobile { display: none; }

.about-mini{
  max-width: 72ch;
  margin: 40px auto 0;
  padding: 24px;
  font-size: 0.95rem;
  color: rgba(43,43,43,0.7);
  text-align: center;
}

.about-contact{
  margin-top: 10px;
  font-weight: 600;
}




/* =============================
   SALES HUB GRID polish
   ============================= */

.sales-desc{
  color: var(--text-soft);
}

/* Zorg dat buttons op hub er strak uitzien in rows */
.sales-actions .button{
  margin-top: 0;
}

/* =============================
   CHECKOUT disclaimer alignment
   (jouw .disclaimer centreert; checkout wil links)
   ============================= */

.checkout-disclaimer{
  justify-content: flex-start; /* override jouw .disclaimer justify-content:center */
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* =============================
   RESPONSIVE: hub intro + themes
   ============================= */

@media (max-width: 768px){
  .hero{
    padding: 22px 18px;
  }

  .hero .text p{
    font-size: 1.0rem;
    margin-bottom: 10px;
  }

  .themes{
    margin-top: 12px;
  }

  .theme-card{
    padding: 16px 14px;
  }

  .theme-card h3{
    font-size: 1.25rem;
  }
}

/* HUB HERO: minder zwaar, meer landing feel */
body .hero{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 10px 24px 0;
}

body .hero .title{
  background: #FFFFFF;
  /*border: 1px solid rgba(43,43,43,0.08);*/
  border-radius: 22px;
  /*box-shadow: 0 12px 30px rgba(0,0,0,0.06);*/
  padding: 26px 24px;
}

body .hero .title h1{
  margin-bottom: 12px;
}

/* Hub intro: betere paragrafen */
body .hero .text p{
  margin: 0 0 14px 0;
  padding-left: 0;
  border-left: 0;
}

body .hero .text p + p{
  margin-top: 10px;
}

/* Themes gelijk trekken met cards */
.theme-card{
  padding: 18px 16px;
}

.theme-card h3{
  font-size: 1.30rem;
}

.theme-cta{
  border-bottom-color: rgba(201,166,107,0.65);
}

/* SALES cards: consistent beeld */
.sales-img{
  height: 300px;
  object-fit: cover;
}

/* Body spacing */
.sales-body{
  padding: 18px 18px 20px;
}

.sales-title{
  font-size: 1.45rem;
}

.sales-desc{
  min-height: 3.2em; /* voorkomt springende knoppen */
}

/* Buttons */
.sales-actions .button{
  padding: 12px 14px;
  border-radius: 14px;
}

@media (max-width: 768px){
  .sales-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .sales-actions .button{
    width: 100%;
    margin: 0;
  }
  .sales-img{
    height: auto;
  }
}

/* Toolbar als 1 premium component */
.sales-toolbar{
  margin: 16px 0 20px;
}

.sales-toolbar-row{
  gap: 12px;
}

.sales-search{
  border-radius: 14px;
  border: 1px solid rgba(43,43,43,0.12);
  background: rgba(255,255,255,0.95);
}

.sales-filter-chips .chip{
  padding: 10px 14px;
}

footer{
  margin-top: 60px;
  padding: 34px 18px;
  color: rgba(43,43,43,0.60);
}
footer a{
  font-weight: 600;
}

/* =========================
   HERO — 1100 frame + 900 inner (HARD OVERRIDE)
   Zet dit ALS LAATSTE in style.css
========================= */

/* 1100px outer hero */
body .hero{
  max-width: 1200px !important;
  margin: 18px auto 0 !important;
  padding: 0 24px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center;
}

/* 1100px white panel dat de content centreert */
body .hero > .title{
  width: 100% !important;
  max-width: 1100px !important; 
  margin: 0 auto !important;

  background: var(--leem-light) !important;
  /*border: 1px solid rgba(43,43,43,0.08) !important;*/
  border-radius: 22px !important;
  /*box-shadow: 0 12px 30px rgba(0,0,0,0.06) !important;*/

  padding: 22px 24px !important;

  /* centering mechaniek */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;   /* ✅ centreert de inner kolom */
}

/* 900px inner kolom: gecentreerd, tekst links */
body .hero > .title > h1,
body .hero > .title > .text{
  width: 100% !important;
  max-width: 1000px !important;      /* ✅ jouw “statement” kolom */
  margin: 0 auto !important;
  text-align: left !important;
}

/* Reset browser defaults op H1 + hou hem binnen de 900 kolom */
body .hero > .title > h1{
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  font-size: 2.0rem;
}

/* Als je ergens anders 72ch op .text had staan: kill die */
body .hero > .title > .text{
  max-width: 1000px !important;
}

/* Micro-lijntje boven de tekst */
body .hero > .title > .text{
  position: relative !important;
  padding-top: 12px !important;
}
body .hero > .title > .text::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  /*width: 46px !important;
  height: 1px !important;*/
  background: rgba(43,43,43,0.18) !important;
}

/* Mobile: geen horizontaal scrollen */
@media (max-width: 768px){
  body .hero{ padding: 0 18px !important; }
  body .hero > .title{ padding: 18px 16px !important; }
  body .hero > .title > h1,
  body .hero > .title > .text{ max-width: 100% !important; }
}

/* ============================= */
/* RESPONSIVE                     */
/* ============================= */
@media(max-width:900px){
    .step { width:45%; }
	h2 { font-size:1.6em; }
	h3 { font-size:1.4em; }
	.why-grid, .proof-grid{
    grid-template-columns: 1fr;
	}
	.section-title{ font-size: 1.75rem; }
	.cta-box h2{ font-size: 1.6rem; }
	.checkout-grid{
	grid-template-columns: 1fr;
	}

	.checkout-panel-form .form-row{
	grid-template-columns: 1fr;
	}

}
@media (max-width: 768px) {
    .section, .urgent, .pricing-buy { padding:1.5rem 1.25rem; flex-direction:column; align-items:center; } 
	.header .monogram {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
	}
	.header .monogram img {
		width: 30px
	}
	.header .logo {
		flex: 1;
		display: flex;
		justify-content: center;
		gap: 10px;
	}
	.header .logo img {
		width: 150px
	}
	
	.hero-stage{
		padding-bottom: 20px;
	}
    /* Zorg dat de stage blijft clippen (hoeken) en overlay binnen blijft */
	.hero-stage-inner{
	overflow: visible;
	}

	/* Belangrijk: overlay blijft ABSOLUTE (dus geen springen naar beneden) */
	.hero-overlay{
	position: absolute !important;
	z-index: 2;

	/* Dit zijn je mobile ankers: pas ze evt 1x aan */
	left: 6% !important;
	top: 8% !important;
	width: 100% !important;
	max-width: 360px !important;

	padding: 0;
	margin: 0;
	}

	/* Typografie: echt klein op telefoon */
	.hero-overlay h1{
	font-size: 1.6rem;
	line-height: 1;
	margin: 0 0 6px 0;
	max-width: 20ch;
	}

	.hero-overlay h2{
	font-size: 0.88rem;
	line-height: 1.35;
	margin: 0 0 10px 0;
	max-width: 23ch;
	}

	/* CTA compacter */
	.hero-cta{
	font-size: 0.8rem;
	padding: 8px 12px;
	margin: 0 0 6px 0;
	}

	/* Micro echt micro */
	.hero-micro{
	font-size: 0.72rem;
	line-height: 1.25;
	margin: 0;
	max-width: 23ch;
	}

	/* Niet tonen op mobile */
	.hero-text{
	display: none;
	}
	
	/* Hero-text section op mobile, zichtbaar */
	.hero-text-mobile-section{
		display: contents;
	}
	
	.hero-text-mobile-inner{
		
	}
	
	.hero-text-mobile{
	font-size: 0.95rem;
	line-height: 1.35;
	margin-top: 10px;
	}
	
	/* CTA: forceer compact + tekst blijft netjes in de knop */
	.hero-overlay a.button.primary.hero-cta{
	font-size: 0.7rem !important;
	font-weight: 600 !important;

	padding: 8px 12px !important;
	line-height: 1.1 !important;

	height: auto !important;
	min-height: 0 !important;

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

	white-space: normal !important;   /* <-- voorkomt dat tekst "weg" lijkt */
	text-align: center !important;
	border-radius: 12px !important;
	}

	/* Als je button globally een vaste width heeft */
	.hero-overlay .hero-cta{
	width: auto !important;
	max-width: 220px;                 /* <-- houd hem klein */
	}

	/* Micro: maak hem zichtbaar en leesbaar */
	.hero-overlay .hero-micro{
	display: block !important;
	font-size: 0.74rem !important;
	line-height: 1.25 !important;
	margin-top: 6px !important;

	color: #4A4A4A !important;        /* donkerder dan #6A6A6A */
	opacity: 1 !important;
	}

	/* Als micro per ongeluk wordt verborgen door CSS */
	.hero-overlay .hero-micro *{
	opacity: 1 !important;
	visibility: visible !important;
	}

	/* Optioneel: micro iets beter leesbaar op lichte achtergrond */
	.hero-overlay .hero-micro{
	text-shadow: 0 1px 0 rgba(255,255,255,0.6);
	}
	
	/* Stage iets hoger zodat titel+CTA+micro passen */
	.hero-stage-inner::before{
	padding-top: 72%; /* was ~62–64%. 72% geeft veel meer ruimte */
	}
	
	.hero{
    margin-top: 18px;
    padding: 22px 16px;
	}
	
	.hero h1{
	font-size: 1.9rem;
	}

	.hero h2{
	font-size: 1.6rem;
	}
	
	.hero{
    width: 100%;
    max-width: 100%;
    padding: 0 14px;        /* minder padding */
    box-sizing: border-box;
    }

    .hero .title{
    width: 100%;
    max-width: 100%;
    padding: 18px 14px;
    box-sizing: border-box;
    }
	
	.text-desktop { display: none; }
    .text-mobile { display: block; }
	section.about-callout-mobile { 
	  display: block; 
	  text-align: left;
	  max-width: 1100px;
	  margin: 18px auto 0;
	  padding: 0 24px;
	} 
	
	section.sales-toolbar {
		display: none;
	}

	.section-important{
	padding: 18px 14px;
	}

	.invoice-box{
	flex-direction: column;
	align-items: stretch;
	}

	.download-item{
	flex-direction: column;
	align-items: stretch;
	}

	.file-name{
	max-width: 100%;
	}

	.download-btn{
	width: 100%;
	justify-content: center;
	}

	.download-all-btn{
	width: 100%;
	justify-content: center;
	}
	
	.value-section{
    padding: 40px 0 48px;
	}

	.value-inner{
	grid-template-columns: 1fr;
	gap: 36px;
	}

	.value-block h3{
	font-size: 1.45rem;
	margin-bottom: 14px;
	}

	.value-list li{
	font-size: 0.95rem;
	}
	
	.package-choice-price{
	font-size: 1.05rem;
	}
	
	.faq-section{
	padding: 48px 0 56px;
	}

	.faq-question{
	font-size: 0.95rem;
	}

	.faq-answer p{
	font-size: 0.92rem;
	}
	
	.sales-filter {
    flex-direction: column;
    align-items: flex-start;
    }

    .sales-filter-chips {
    justify-content: flex-start;
    }

    .sales-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    }
	
	.sales-price-overlay {
	font-size: 0.9rem;
	padding: 5px 6px;
	}

    .sales-img {
    height: auto;
    }

    .sales-actions {
    gap: 8px;
    }

    .sales-price-text {
    margin-left: 0;
    width: 100%;
	display: none;
    }

    .cart-floating {
    left: 14px;
    right: 14px;
    bottom: 14px;
    justify-content: space-between;
    }
	
	.cart-form-row{
    grid-template-columns: 1fr;
	}

	.cart-table,
	.cart-table thead,
	.cart-table tbody,
	.cart-table th,
	.cart-table td,
	.cart-table tr{
	display: block;
	/*width: 100%;*/
	}

	.cart-table thead{
	display: none;
	}

	.cart-table tr{
	border-bottom: 1px solid rgba(43,43,43,0.08);
	padding: 12px 12px;
	}

	.cart-table td{
	border: none;
	padding: 10px 0;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	}

	.cart-table td::before{
	content: attr(data-label);
	font-weight: 700;
	color: rgba(43,43,43,0.70);
	}

	.qty-input{
	width: 35px;
	}

	.cart-summary{
	justify-content: stretch;
	}

	.cart-total{
	width: 100%;
	display: flex;
	justify-content: space-between;
	}

	.cart-actions .button{
	width: 100%;
	justify-content: center;
	}
	
	
    .section > div, .urgent > div, .pricing-buy > div { flex-direction: column; align-items:center; gap:10px; width:100%; }
    .section-image { padding:20px 15px; }
    .image-block img { margin:1.5rem auto; }
    .steps {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;      /* center de items horizontaal */
        width: 100%;
        padding: 0;               /* verwijder extra padding */
        box-sizing: border-box;
        margin: 0 auto;           /* center de container */
    }
	
	.button, a.button {
        max-width: 100%;
        width: auto;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 12px 15px;
        margin: 6px auto;
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
        box-sizing: border-box;
    }

    .compare-table { display:block !important; width:100%; overflow-x:auto !important; white-space:nowrap; }
    .compare-table thead, .compare-table tbody, .compare-table tr { display:table; width:100%; table-layout:fixed; }
    .compare-table th, .compare-table td { white-space:normal; word-break:break-word; padding:10px 8px; font-size:14px; }
	table {
        font-size: 14px;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        margin-top: 0.5rem;
    }
    thead { display: none; }
    tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 6px;
        padding: 10px 0;
    }
    tbody td {
        padding: 4px 0;
    }
    
    .total { font-size: 15px; text-align: right; }
    .form-row { flex-direction: column; gap:12px; width:100%; }
    .form-row input { width:90% !important; padding:12px 10px; font-size:1rem; border:1px solid var(--leem); border-radius: var(--radius); }
    .form-row label { font-size:0.9rem; color: var(--text-dark);}
    .form-row button { width:100%; padding:14px 0; font-size:1rem; margin-top:8px; border-radius: var(--radius); }
	.form-button { max-width:260px; width:90% }
    .downloads-list li { flex-direction: column; align-items:flex-start; gap:0.3rem; }
}

/* ============================= */
/* @media max-width 600px        */
/* ============================= */
@media(max-width:600px){
    .step { width:100%; }
}

/* ============================= */
/* @media max-width 520px        */
/* ============================= */
@media (max-width: 520px){
  .checkout-panel-form .form-row{
    grid-template-columns: 1fr;
  }
  .payment-icons.payment-icons-compact img{
    height: 20px;
  }
  .checkout-trust-note{
    font-size: 0.85rem;
  }
}