/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --terra:       #cc644c;
  --terra-h:     #b8573f;
  --terra-l:     #e07860;
  --rose:        #c19287;
  --cream:       #ffdcd4;
  --cream-bg:    #fdf8f6;
  --dark:        #2a1f1c;
  --text:        #3d2e2a;
  --muted:       #8a7370;
  --grey:        #b5b5b5;
  --white:       #ffffff;
  --nav-h:       60px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --shadow-sm:   0 2px 12px rgba(42,31,28,.08);
  --shadow-md:   0 8px 30px rgba(42,31,28,.12);
  --shadow-lg:   0 20px 60px rgba(42,31,28,.18);
  --ease-out:    cubic-bezier(.22,1,.36,1);
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Poppins',sans-serif;
  font-weight:300;
  background:var(--cream-bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, textarea { font-family:inherit; }
a { text-decoration:none; }

/* ═══════════════════════════════════════
   PAGE SYSTEM
═══════════════════════════════════════ */
.page { display:none; }
.page.active { display:block; animation:pageIn .4s var(--ease-out) both; }
@keyframes pageIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:none; }
}

/* ═══════════════════════════════════════
   RESPONSIVE LAYOUT
═══════════════════════════════════════ */
.wrap {
  max-width:100%;
  margin:0 auto;
  background:var(--cream-bg);
  min-height:100vh;
  position:relative;
}

/* Tablet: 600px+ — widen content, 2-col grids stay */
@media (min-width:600px) {
  .wrap { max-width:680px; }
  .hero { height:340px; }
  .welcome { padding:56px 60px; }
  .welcome .sec-title { font-size:36px; }
  .cat-scroll { padding:16px 40px 8px; gap:16px; }
  .cat-card { flex:0 0 130px; height:150px; }
  .section { padding:52px 40px; }
  .product-grid { grid-template-columns:repeat(3,1fr); gap:18px; }
  .kh-teaser { padding:56px 60px; }
  .kh-teaser .sec-title { font-size:32px; }
  .gc-hero { padding:56px 60px; }
  .ig-section { padding:52px 40px; }
  .ig-grid { grid-template-columns:repeat(6,1fr); }
  .lb-grid { gap:12px; }
  .footer { padding:48px 40px 32px; }
  .page-top { padding:16px 40px; }
  .shop-search { margin:18px 40px; }
  .filter-row { padding:0 40px 6px; }
  .shop-meta { padding:14px 40px 8px; }
  .amt-grid { margin:14px 40px; }
  .gc-form { padding:0 40px 28px; }
  .gc-checks { padding:0 40px 30px; }
  .pd-info { padding:4px 40px 36px; }
  .pd-thumbs { padding:14px 40px; }
  .kh-q-head { padding:32px 40px 0; }
  .kh-q-head + div { padding:0 40px; }
  .stone-result { margin:16px 40px; }
  .code-box { margin:0 40px 16px; }
  .hanger-section { margin:0 40px 22px; }
}

/* Desktop: 900px+ — side-by-side layout */
@media (min-width:900px) {
  :root { --nav-h:70px; }

  /* Nav expands with desktop links */
  .nav { padding:0 48px; }
  .nav-logo svg { height:26px; }
  .nav-desktop-links {
    display:flex !important;
    gap:32px;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .nav-desktop-links a {
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text);
    transition:color .2s;
    text-decoration:none;
  }
  .nav-desktop-links a:hover { color:var(--terra); }
  .hamburger { display:none; }

  /* Main wrap goes full desktop */
  .wrap { max-width:1200px; }

  /* Hero becomes full bleed banner */
  .hero { height:480px; max-width:100%; }
  .play-ring { width:68px; height:68px; }

  /* Welcome: two-col */
  .welcome {
    display:grid; grid-template-columns:1fr 1fr;
    gap:0; padding:80px 80px; text-align:left;
    align-items:center;
  }
  .welcome-text { padding-right:40px; }
  .welcome .sec-title { font-size:42px; }
  .welcome .sec-body { margin-bottom:28px; }
  .welcome-img {
    display:flex !important;
    height:360px; border-radius:var(--radius-lg);
    background:linear-gradient(135deg,#d4c8b8,#bfb0a0);
    align-items:center; justify-content:center;
    font-size:80px; opacity:.7;
  }

  /* Categories: all in one row */
  .cat-section { padding:52px 0 0; }
  .cat-section .eyebrow { padding:0 80px; }
  .cat-scroll { padding:16px 80px 8px; }
  .cat-card { flex:0 0 150px; height:170px; }
  .cat-icon { font-size:30px; }

  /* Keuzehulp teaser: wider */
  .kh-teaser { padding:80px 80px; }
  .kh-teaser .sec-title { font-size:36px; }
  .kh-steps { justify-content:flex-start; gap:0; }

  /* Products: 4-col */
  .section { padding:64px 80px; }
  .product-grid { grid-template-columns:repeat(4,1fr); gap:20px; }

  /* Hanger section */
  .hanger-section { margin:0 80px 28px; }

  /* GC hero: two-col */
  .gc-hero {
    display:grid; grid-template-columns:1fr 1fr;
    align-items:center; gap:0; padding:80px;
    text-align:left;
  }
  .gc-hero-inner { flex-direction:row; }
  .gc-hero-text { order:1; flex:1; }
  .gc-hero-inner .gc-card-vis { order:0; margin:0 60px 0 0; width:260px; flex-shrink:0; }
  .gc-hero::before, .gc-hero::after { display:none; }

  /* Lookbook: different grid */
  .lb-grid { grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
  .lb-card.lb-full { grid-column:span 2; aspect-ratio:4/3; }

  /* Instagram: 6 col */
  .ig-section { padding:64px 80px; text-align:left; }
  .ig-grid { grid-template-columns:repeat(6,1fr); gap:6px; }

  /* Contact: two-col */
  .contact-wrap {
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:60px; align-items:flex-start;
  }

  /* Footer */
  .footer { padding:64px 80px 36px; }
  .footer-inner {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:40px; align-items:flex-start;
  }
  .footer-links { flex-direction:column; gap:10px; margin-bottom:0; }
  .footer-bottom-row {
    margin-top:32px;
    padding-top:20px;
    border-top:1px solid rgba(255,220,212,.08);
    display:flex; justify-content:space-between; align-items:center;
  }

  /* Shop page */
  .shop-search { margin:24px 80px 0; }
  .filter-row { padding:0 80px 6px; }
  .shop-meta { padding:14px 80px 8px; }
  .shop-grid-wrap { padding:4px 72px 12px; }
  .product-grid.shop-grid { grid-template-columns:repeat(4,1fr); }

  /* Product detail: two-col */
  .pd-layout {
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:0; align-items:flex-start;
    padding:40px 80px;
  }
  .pd-left { position:sticky; top:calc(var(--nav-h) + 60px); }
  .pd-main-img { border-radius:var(--radius-lg); }
  .pd-info { padding:0 0 0 48px; }
  .pd-thumbs { padding:14px 0; }

  /* Keuzehulp */
  .kh-intro-hero { padding:80px 80px 60px; }
  .kh-q-head { padding:40px 80px 0; }
  .kh-q-head + div { padding:0 80px; }
  .stone-result { margin:20px 80px; }
  .code-box { margin:0 80px 20px; }
  .kh-steps { gap:0; }
  .kh-intro-content {
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:32px; padding:32px 80px;
    align-items:flex-start;
  }

  /* Giftcard */
  .gc-card-big { margin:28px 80px; }
  .amt-grid { margin:14px 80px; }
  .gc-form { padding:0 80px 28px; }
  .gc-checks { padding:0 80px 36px; }

  /* Cart page */
  .cart-layout {
    display:grid !important;
    grid-template-columns:1fr 380px;
    gap:40px; padding:40px 80px;
    align-items:flex-start;
  }
  .page-top { padding:16px 80px; }
}

/* Large desktop: 1400px+ */
@media (min-width:1400px) {
  .wrap { max-width:1440px; }
  .section { padding:80px 120px; }
  .welcome { padding:100px 120px; }
  .kh-teaser { padding:100px 120px; }
  .gc-hero { padding:100px 120px; }
  .ig-section { padding:80px 120px; }
  .footer { padding:80px 120px 48px; }
  .shop-search { margin:28px 120px 0; }
  .filter-row { padding:0 120px 6px; }
  .shop-meta { padding:16px 120px 8px; }
  .shop-grid-wrap { padding:4px 112px 12px; }
  .pd-layout { padding:48px 120px; }
  .kh-q-head { padding:48px 120px 0; }
  .kh-q-head + div { padding:0 120px; }
  .kh-intro-content { padding:36px 120px; }
  .stone-result { margin:20px 120px; }
  .code-box { margin:0 120px 20px; }
  .gc-card-big { margin:32px 120px; }
  .amt-grid { margin:14px 120px; }
  .gc-form { padding:0 120px 32px; }
  .gc-checks { padding:0 120px 40px; }
  .cart-layout { padding:48px 120px; }
  .page-top { padding:16px 120px; }
  .cat-section .eyebrow { padding:0 120px; }
  .cat-scroll { padding:16px 120px 8px; }
  .hanger-section { margin:0 120px 28px; }
}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.nav {
  position:sticky;
  top:0;
  z-index:100;
  height:var(--nav-h);
  background:rgba(253,248,246,.95);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(193,146,135,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}
.nav-logo {
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
  transition:opacity .2s;
  flex-shrink:0;
}
.nav-logo:hover { opacity:.72; }
.nav-logo svg { height:22px; width:auto; fill:var(--dark); display:block; }
.nav-logo-sub {
  font-size:7.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--rose);
  line-height:1;
}
.nav-actions {
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-btn {
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--dark);
  transition:color .2s, transform .2s;
}
.nav-btn:hover { color:var(--terra); transform:scale(1.1); }
.nav-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.hamburger { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span {
  display:block; width:20px; height:1.5px;
  background:var(--dark); border-radius:2px;
  transition:background .2s, transform .3s, opacity .3s;
}
.hamburger:hover span { background:var(--terra); }

/* ═══════════════════════════════════════
   FULL-SCREEN OVERLAYS
═══════════════════════════════════════ */
/* Menu */
.menu-overlay {
  position:fixed; inset:0; z-index:200;
  background:var(--dark);
  transform:translateX(100%);
  transition:transform .42s var(--ease-out);
  display:flex; flex-direction:column;
  padding:24px 32px 40px;
}
.menu-overlay.open { transform:none; }
.menu-top {
  display:flex; justify-content:space-between;
  align-items:center; margin-bottom:40px;
}
.menu-logo svg { height:20px; fill:var(--white); }
.menu-close {
  background:none; border:none; cursor:pointer;
  font-size:24px; color:rgba(255,220,212,.5);
  transition:color .2s, transform .25s;
  line-height:1;
}
.menu-close:hover { color:var(--white); transform:rotate(90deg); }
.menu-nav { list-style:none; flex:1; }
.menu-nav li { border-bottom:1px solid rgba(255,220,212,.08); }
.menu-nav li a {
  display:block; padding:18px 0;
  font-size:22px; font-weight:500;
  color:rgba(255,220,212,.82);
  letter-spacing:.02em;
  transition:color .2s, transform .2s, padding-left .2s;
}
.menu-nav li a:hover { color:var(--white); padding-left:8px; }
.menu-foot { font-size:11px; color:rgba(255,220,212,.28); letter-spacing:.08em; }

/* Search */
.search-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(42,31,28,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex; flex-direction:column;
  align-items:center; padding-top:100px;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.search-overlay.open { opacity:1; pointer-events:all; }
.search-close {
  position:absolute; top:20px; right:22px;
  background:none; border:none; cursor:pointer;
  font-size:22px; color:rgba(255,220,212,.45);
  transition:color .2s, transform .25s; line-height:1;
}
.search-close:hover { color:var(--white); transform:rotate(90deg); }
.search-field {
  width:calc(100% - 40px); max-width:400px;
  padding:16px 20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(193,146,135,.35);
  border-radius:var(--radius-md);
  font-size:16px; color:var(--white);
  outline:none;
  transition:border-color .25s;
}
.search-field::placeholder { color:rgba(255,220,212,.35); }
.search-field:focus { border-color:var(--terra); }
.search-hint { font-size:11px; color:rgba(255,220,212,.3); margin-top:16px; letter-spacing:.1em; }
.search-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding:0 20px; justify-content:center; }
.search-chip {
  padding:7px 16px;
  border:1px solid rgba(193,146,135,.3);
  border-radius:20px; font-size:11px;
  color:rgba(255,220,212,.6); cursor:pointer;
  transition:border-color .2s, color .2s;
}
.search-chip:hover { border-color:var(--terra); color:var(--terra-l); }

/* Toast */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(90px);
  background:var(--dark); color:var(--white);
  padding:12px 22px; border-radius:30px;
  font-size:13px; white-space:nowrap;
  z-index:300; pointer-events:none;
  transition:transform .38s var(--ease-out);
  box-shadow:var(--shadow-md);
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════ */
.sr {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.sr.sr-delay-1 { transition-delay:.1s; }
.sr.sr-delay-2 { transition-delay:.2s; }
.sr.sr-delay-3 { transition-delay:.3s; }
.sr.visible { opacity:1; transform:none; }

/* ═══════════════════════════════════════
   TYPOGRAPHY UTILITIES
═══════════════════════════════════════ */
.eyebrow {
  font-size:9px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--rose);
  display:block; margin-bottom:8px;
}
.sec-title {
  font-size:24px; font-weight:500;
  color:var(--dark); line-height:1.25;
  margin-bottom:8px;
}
.sec-body {
  font-size:13px; color:var(--muted);
  line-height:1.85;
}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 28px; border-radius:3px;
  font-size:10px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  cursor:pointer; transition:background .25s, color .25s, transform .2s, box-shadow .25s;
}
.btn-outline {
  border:1.5px solid var(--terra); color:var(--terra);
  background:transparent;
}
.btn-outline:hover {
  background:var(--terra); color:var(--white);
  transform:translateY(-2px); box-shadow:0 6px 20px rgba(204,100,76,.25);
}
.btn-fill {
  background:var(--terra); color:var(--white); border:none;
}
.btn-fill:hover {
  background:var(--terra-h);
  transform:translateY(-2px); box-shadow:0 8px 24px rgba(204,100,76,.32);
}
.btn-fill:active { transform:translateY(0); box-shadow:none; }
.btn-white {
  background:var(--white); color:var(--terra); border:none;
}
.btn-white:hover { background:var(--cream); transform:translateY(-1px); }
.btn-full { width:100%; }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  background:#1c1210;
  height:260px; position:relative;
  overflow:hidden; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.hero-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 70% 30%, rgba(204,100,76,.28) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 20% 80%, rgba(193,146,135,.14) 0%, transparent 55%);
  transition:opacity .5s;
}
.hero:hover .hero-glow { opacity:1.5; }
.hero-center { position:relative; z-index:2; text-align:center; }
.play-ring {
  width:56px; height:56px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.42);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.hero:hover .play-ring {
  border-color:var(--terra-l);
  transform:scale(1.1);
  box-shadow:0 0 0 12px rgba(204,100,76,.1);
}
.play-arrow {
  width:0; height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:17px solid rgba(255,255,255,.8);
  margin-left:5px;
  transition:border-left-color .3s;
}
.hero:hover .play-arrow { border-left-color:var(--white); }
.hero-label {
  font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
  transition:color .3s;
}
.hero:hover .hero-label { color:rgba(255,220,212,.6); }

/* ═══════════════════════════════════════
   WELCOME SECTION
═══════════════════════════════════════ */
.welcome {
  background:var(--cream);
  padding:42px 28px;
  text-align:center;
}
.welcome .sec-title { font-size:28px; }

/* ═══════════════════════════════════════
   CATEGORY STRIP
═══════════════════════════════════════ */
.cat-section { padding:28px 0 0; }
.cat-section .eyebrow { padding:0 22px; display:block; }
.cat-scroll {
  display:flex; gap:12px;
  overflow-x:auto; padding:14px 22px 6px;
  scrollbar-width:none;
}
.cat-scroll::-webkit-scrollbar { display:none; }
.cat-card {
  flex:0 0 108px; height:128px;
  border-radius:var(--radius-lg);
  background:var(--cream);
  border:1px solid rgba(193,146,135,.2);
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding:0 10px 14px;
  cursor:pointer; overflow:hidden; position:relative;
  transition:transform .28s var(--ease-out), box-shadow .28s, border-color .28s;
}
.cat-card::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 25%, var(--cc,var(--terra)) 0%, transparent 68%);
  opacity:.12;
  transition:opacity .3s;
}
.cat-card:hover {
  transform:translateY(-6px);
  box-shadow:0 14px 32px rgba(204,100,76,.14);
  border-color:rgba(193,146,135,.45);
}
.cat-card:hover::before { opacity:.24; }
.cat-icon {
  font-size:26px; margin-bottom:8px;
  position:relative; z-index:1;
  transition:transform .28s;
}
.cat-card:hover .cat-icon { transform:scale(1.18) translateY(-2px); }
.cat-name {
  font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dark);
  position:relative; z-index:1; text-align:center;
}

/* ═══════════════════════════════════════
   KEUZEHULP TEASER
═══════════════════════════════════════ */
.kh-teaser {
  background:var(--dark);
  padding:44px 24px;
  text-align:center;
  position:relative; overflow:hidden;
}
.kh-teaser::before {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 75% 20%, rgba(204,100,76,.2) 0%, transparent 60%);
}
.kh-teaser .eyebrow { color:var(--terra-l); }
.kh-teaser .sec-title { color:var(--white); font-size:26px; margin-bottom:10px; }
.kh-teaser .sec-body { color:rgba(255,220,212,.62); margin-bottom:28px; }
.kh-steps {
  display:flex; align-items:flex-start; justify-content:center;
  gap:0; margin-bottom:30px; position:relative; z-index:1;
}
.kh-step { text-align:center; width:88px; }
.kh-num {
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(204,100,76,.4);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 8px; font-size:12px; color:var(--terra-l);
  transition:background .25s, border-color .25s, transform .25s;
}
.kh-step:hover .kh-num {
  background:var(--terra); border-color:var(--terra);
  color:var(--white); transform:scale(1.12);
}
.kh-step-txt { font-size:10px; color:rgba(255,220,212,.55); line-height:1.4; }
.kh-arr { align-self:flex-start; margin-top:10px; color:rgba(204,100,76,.3); font-size:18px; }

/* ═══════════════════════════════════════
   PRODUCT GRID
═══════════════════════════════════════ */
.product-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}
.prod-card {
  background:var(--white);
  border-radius:var(--radius-md);
  border:1px solid rgba(193,146,135,.18);
  overflow:hidden; cursor:pointer;
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.prod-card:hover {
  transform:translateY(-7px);
  box-shadow:0 18px 42px rgba(193,146,135,.22);
}
.prod-img {
  width:100%; aspect-ratio:3/4;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.prod-img-icon {
  font-size:44px; opacity:.52;
  transition:transform .42s var(--ease-out);
}
.prod-photo {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease-out);
}
.prod-card:hover .prod-photo { transform:scale(1.06); }
.prod-card:hover .prod-img-icon { transform:scale(1.12); }
.prod-tag {
  position:absolute; top:8px; left:8px;
  background:var(--terra); color:var(--white);
  font-size:8px; letter-spacing:.14em; padding:3px 9px;
  border-radius:3px; text-transform:uppercase;
}
.prod-tag.sale { background:#a33030; }
.prod-heart {
  position:absolute; top:8px; right:8px;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.88); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--rose);
  opacity:0; transition:opacity .22s, transform .22s;
}
.prod-card:hover .prod-heart { opacity:1; }
.prod-heart:hover { transform:scale(1.22); color:var(--terra); }
.prod-info { padding:12px 12px 14px; }
.prod-name { font-size:12px; color:var(--dark); margin-bottom:4px; line-height:1.4; }
.prod-price { font-size:14px; color:var(--terra); font-weight:500; }

/* ═══════════════════════════════════════
   GIFTCARD SECTION
═══════════════════════════════════════ */
.gc-hero {
  background:var(--terra);
  padding:44px 24px; text-align:center;
  position:relative; overflow:hidden;
}
.gc-hero::before {
  content:'';
  position:absolute; top:-80px; right:-80px;
  width:240px; height:240px; border-radius:50%;
  background:rgba(255,255,255,.07);
}
.gc-hero::after {
  content:'';
  position:absolute; bottom:-60px; left:-50px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.05);
}
.gc-hero .sec-title { color:var(--white); }
.gc-hero .sec-body { color:rgba(255,220,212,.8); margin-bottom:26px; }
.gc-card-vis {
  width:200px; margin:0 auto 26px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px; padding:22px;
  position:relative; z-index:1;
  cursor:pointer;
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.gc-card-vis:hover {
  transform:translateY(-4px) rotate(.8deg);
  box-shadow:0 16px 40px rgba(0,0,0,.2);
}
.gc-card-amount { font-size:30px; font-weight:500; color:var(--white); }
.gc-card-sub { font-size:9px; letter-spacing:.22em; color:rgba(255,220,212,.65); text-transform:uppercase; margin-top:4px; }

/* ═══════════════════════════════════════
   LOOKBOOK
═══════════════════════════════════════ */
.lb-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px; margin-top:18px;
}
.lb-card {
  border-radius:var(--radius-md);
  background:var(--cream);
  border:1px solid rgba(193,146,135,.18);
  overflow:hidden; position:relative;
  cursor:pointer;
  transition:transform .3s var(--ease-out);
}
.lb-card:hover { transform:scale(1.02); }
.lb-card.lb-full { grid-column:span 2; aspect-ratio:16/7; }
.lb-card:not(.lb-full) { aspect-ratio:3/4; }
.lb-icon {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:26px; opacity:.35;
  transition:transform .3s;
}
.lb-card:hover .lb-icon { transform:translate(-50%,-50%) scale(1.22); }
.lb-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:16px 14px 12px;
  background:linear-gradient(transparent, rgba(26,18,16,.58));
}
.lb-overlay p { font-size:12px; color:var(--white); letter-spacing:.04em; }

/* ═══════════════════════════════════════
   INSTAGRAM
═══════════════════════════════════════ */
.ig-section { background:var(--white); padding:38px 22px; text-align:center; }
.ig-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:4px; margin-top:18px;
}
.ig-tile {
  aspect-ratio:1; background:var(--cream);
  border-radius:4px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; position:relative; overflow:hidden;
  transition:transform .25s;
}
.ig-tile:hover { transform:scale(1.03); }
.ig-tile::after {
  content:'♡';
  position:absolute; inset:0;
  background:rgba(204,100,76,.76); color:var(--white);
  font-size:24px; display:flex;
  align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s;
}
.ig-tile:hover::after { opacity:1; }
.ig-handle { font-size:13px; color:var(--rose); margin-top:16px; letter-spacing:.05em; }

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
.contact-form {
  display:flex; flex-direction:column;
  gap:12px; margin-top:22px;
}
.form-field {
  background:var(--white);
  border:1px solid rgba(193,146,135,.3);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  font-size:13px; color:var(--dark); outline:none;
  transition:border-color .25s, box-shadow .25s;
  width:100%;
}
.form-field:focus {
  border-color:var(--terra);
  box-shadow:0 0 0 3px rgba(204,100,76,.1);
}
.form-field::placeholder { color:var(--grey); }
textarea.form-field { min-height:96px; resize:none; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
  background:var(--dark);
  padding:38px 22px 28px;
  color:rgba(255,220,212,.5);
}
.footer-logo svg { height:20px; fill:var(--white); margin-bottom:2px; }
.footer-sub {
  font-size:8px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rose);
  margin-bottom:24px;
}
.footer-links { display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:28px; }
.footer-link {
  font-size:11px; color:rgba(255,220,212,.55);
  letter-spacing:.07em; cursor:pointer;
  transition:color .2s;
}
.footer-link:hover { color:var(--terra-l); }
.footer-divider {
  border:none; border-top:1px solid rgba(255,220,212,.08);
  margin-bottom:16px;
}
.footer-copy { font-size:10px; color:rgba(255,220,212,.24); letter-spacing:.04em; }

/* ═══════════════════════════════════════
   SECTION PADDING UTIL
═══════════════════════════════════════ */
.section { padding:38px 22px; }

/* ═══════════════════════════════════════
   HANGER PICKER
═══════════════════════════════════════ */
.hanger-section {
  background:var(--cream); margin:0 12px;
  border-radius:var(--radius-lg); padding:28px 20px;
}
.hanger-preview {
  width:96px; height:96px; border-radius:50%;
  background:var(--white);
  border:1.5px solid rgba(193,146,135,.28);
  display:flex; align-items:center; justify-content:center;
  font-size:42px; margin:14px auto 8px;
  transition:transform .3s var(--ease-out);
}
.hanger-strip {
  display:flex; gap:10px; overflow-x:auto;
  padding:6px 0 2px; scrollbar-width:none;
}
.hanger-strip::-webkit-scrollbar { display:none; }
.hanger-item {
  flex:0 0 68px; height:84px; border-radius:40px;
  background:var(--white);
  border:1.5px solid rgba(193,146,135,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; cursor:pointer;
  transition:border-color .22s, transform .22s, box-shadow .22s;
}
.hanger-item:hover { transform:scale(1.08); border-color:var(--rose); }
.hanger-item.active {
  border-color:var(--terra); border-width:2px;
  box-shadow:0 4px 16px rgba(204,100,76,.2);
}
.hanger-label { text-align:center; font-size:11px; color:var(--rose); letter-spacing:.1em; margin-top:4px; }

/* ═══════════════════════════════════════
   PAGE TOP NAV (inner pages)
═══════════════════════════════════════ */
.page-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 20px; background:var(--white);
  border-bottom:1px solid rgba(193,146,135,.14);
  position:sticky; top:var(--nav-h); z-index:50;
}
.back-btn {
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--rose); cursor:pointer;
  transition:color .2s, transform .2s;
}
.back-btn:hover { color:var(--terra); transform:translateX(-3px); }
.page-top-title { font-size:14px; font-weight:500; color:var(--dark); }

/* ═══════════════════════════════════════
   SHOP PAGE
═══════════════════════════════════════ */
.shop-search {
  display:flex; align-items:center; gap:10px;
  background:var(--white);
  border:1px solid rgba(193,146,135,.25);
  border-radius:24px; padding:11px 18px;
  margin:16px 20px;
  transition:box-shadow .25s, border-color .25s;
}
.shop-search:focus-within {
  box-shadow:0 0 0 3px rgba(204,100,76,.1);
  border-color:var(--terra);
}
.shop-search svg { width:16px; height:16px; flex-shrink:0; stroke:var(--grey); fill:none; stroke-width:1.5; stroke-linecap:round; }
.shop-search input { border:none; outline:none; font-size:13px; color:var(--dark); width:100%; background:transparent; }
.filter-row {
  display:flex; gap:8px; overflow-x:auto;
  padding:0 20px 4px; scrollbar-width:none;
}
.filter-row::-webkit-scrollbar { display:none; }
.chip {
  flex-shrink:0; padding:7px 16px; border-radius:20px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(193,146,135,.3); color:var(--text);
  cursor:pointer; white-space:nowrap;
  transition:background .22s, border-color .22s, color .22s;
}
.chip:hover { border-color:var(--terra); color:var(--terra); }
.chip.active { background:var(--terra); border-color:var(--terra); color:var(--white); }
.shop-meta {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px 6px; font-size:11px; color:var(--grey);
}
.sort-btn { color:var(--terra); font-weight:500; cursor:pointer; transition:opacity .2s; }
.sort-btn:hover { opacity:.7; }

/* ═══════════════════════════════════════
   PRODUCT DETAIL
═══════════════════════════════════════ */
.pd-main-img {
  width:100%; aspect-ratio:3/4;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; cursor:zoom-in;
}
.pd-main-icon {
  font-size:80px; opacity:.44;
  transition:transform .5s var(--ease-out);
}
.pd-main-img:hover .pd-main-icon { transform:scale(1.1); }
.ar-badge {
  position:absolute; bottom:14px; right:14px;
  background:rgba(26,18,16,.82); backdrop-filter:blur(6px);
  border-radius:var(--radius-sm); padding:9px 14px;
  text-align:center; cursor:pointer;
  transition:background .25s, transform .22s;
}
.ar-badge:hover { background:var(--terra); transform:scale(1.05); }
.ar-badge p { font-size:9px; color:rgba(255,220,212,.8); letter-spacing:.1em; text-transform:uppercase; line-height:1.6; }
.pd-thumbs {
  display:flex; gap:8px; padding:12px 20px;
}
.pd-thumb {
  width:62px; height:62px; border-radius:var(--radius-sm);
  background:var(--cream);
  border:1.5px solid transparent;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; cursor:pointer;
  transition:border-color .22s, transform .22s;
}
.pd-thumb:hover { transform:scale(1.06); border-color:rgba(193,146,135,.4); }
.pd-thumb.active { border-color:var(--terra); }
.pd-info { padding:4px 20px 30px; }
.pd-title { font-size:22px; font-weight:500; color:var(--dark); margin-bottom:8px; line-height:1.25; }
.pd-price { font-size:22px; color:var(--terra); font-weight:500; margin-bottom:8px; }
.pd-stars { font-size:12px; color:var(--rose); margin-bottom:20px; }
.pd-label { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:5px; }
.pd-value { font-size:13px; color:var(--dark); margin-bottom:18px; line-height:1.65; }
.sizes { display:flex; gap:8px; margin-bottom:20px; }
.size-btn {
  width:44px; height:44px; border-radius:var(--radius-sm);
  border:1px solid rgba(193,146,135,.3);
  font-size:13px; color:var(--dark); background:var(--white);
  cursor:pointer; transition:border-color .2s, background .2s, color .2s, transform .2s;
}
.size-btn:hover { border-color:var(--terra); color:var(--terra); transform:scale(1.06); }
.size-btn.active { background:var(--terra); border-color:var(--terra); color:var(--white); }
.add-cart {
  width:100%; padding:16px; border-radius:var(--radius-sm);
  background:var(--terra); color:var(--white);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:400; cursor:pointer; border:none;
  transition:background .25s, transform .2s, box-shadow .25s;
  margin-bottom:14px;
}
.add-cart:hover {
  background:var(--terra-h); transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(204,100,76,.3);
}
.add-cart:active { transform:none; box-shadow:none; }
.stone-card {
  background:var(--cream-bg);
  border:1px solid rgba(193,146,135,.22);
  border-radius:var(--radius-md); padding:16px;
  margin-bottom:16px; display:flex; gap:14px;
}
.stone-dot {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
}

/* ═══════════════════════════════════════
   KEUZEHULP
═══════════════════════════════════════ */
.kh-progress { height:4px; background:rgba(181,181,181,.22); }
.kh-fill { height:100%; background:var(--terra); transition:width .55s var(--ease-out); }
.kh-screen { display:none; }
.kh-screen.kh-active { display:block; animation:pageIn .38s var(--ease-out) both; }

.kh-intro-hero {
  background:var(--dark); padding:56px 28px 40px;
  text-align:center; position:relative; overflow:hidden;
}
.kh-intro-hero::before {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 30%, rgba(204,100,76,.2) 0%, transparent 60%);
}
.kh-pulse {
  width:96px; height:96px; border-radius:50%;
  border:1px solid rgba(204,100,76,.35);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px; position:relative; z-index:1;
  animation:kh-pulse 2.8s ease-in-out infinite;
}
@keyframes kh-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(204,100,76,.25); }
  50%      { box-shadow:0 0 0 16px rgba(204,100,76,0); }
}
.kh-intro-hero h1 { font-size:28px; font-weight:500; color:var(--white); line-height:1.2; margin-bottom:10px; position:relative; z-index:1; }
.kh-intro-hero p { font-size:13px; color:rgba(255,220,212,.6); position:relative; z-index:1; }

.kh-step-row {
  display:flex; align-items:center; gap:14px;
  background:var(--white); border-radius:var(--radius-md); padding:16px;
  margin-bottom:12px; border:1px solid rgba(193,146,135,.18);
  transition:transform .22s, box-shadow .22s;
}
.kh-step-row:hover { transform:translateX(4px); box-shadow:var(--shadow-sm); }
.kh-step-badge {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--terra); background:rgba(204,100,76,.07);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--terra);
}
.kh-step-label { font-size:14px; font-weight:500; color:var(--dark); margin-bottom:2px; }
.kh-step-desc { font-size:11px; color:var(--muted); }

.kh-q-head { padding:26px 22px 0; }
.kh-q-head h2 { font-size:24px; font-weight:500; color:var(--dark); margin-bottom:6px; }
.kh-q-head p { font-size:13px; color:var(--muted); margin-bottom:22px; }

.opt-card {
  display:flex; align-items:center; gap:14px;
  background:var(--white); border-radius:var(--radius-md); padding:18px;
  margin-bottom:12px; border:1.5px solid rgba(193,146,135,.2);
  cursor:pointer; transition:border-color .22s, transform .22s, background .22s;
}
.opt-card:hover { border-color:var(--terra); transform:translateX(4px); }
.opt-card.selected { border-color:var(--terra); background:rgba(204,100,76,.04); }
.opt-check {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  border:1.5px solid rgba(193,146,135,.4);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
  font-size:11px; color:transparent;
}
.opt-card.selected .opt-check { background:var(--terra); border-color:var(--terra); color:var(--white); }
.opt-h { font-size:14px; font-weight:500; color:var(--dark); margin-bottom:2px; }
.opt-p { font-size:11px; color:var(--muted); }

.toggle-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.tog-card {
  background:var(--white); border-radius:var(--radius-md); padding:20px 14px;
  text-align:center; border:1.5px solid rgba(193,146,135,.2);
  cursor:pointer; transition:border-color .22s, background .22s;
}
.tog-card:hover { border-color:var(--terra); }
.tog-card.selected { border-color:var(--terra); background:rgba(204,100,76,.04); }
.tog-card h4 { font-size:15px; font-weight:500; color:var(--dark); margin-bottom:4px; }
.tog-card p { font-size:11px; color:var(--muted); }

.color-row { display:flex; gap:16px; margin:12px 0 22px; }
.color-item { text-align:center; cursor:pointer; }
.color-swatch {
  width:44px; height:44px; border-radius:50%;
  margin:0 auto 6px; border:2.5px solid transparent;
  transition:transform .22s, border-color .22s;
}
.color-item:hover .color-swatch { transform:scale(1.1); }
.color-item.selected .color-swatch { border-color:var(--terra); }
.color-item span { font-size:10px; color:var(--muted); }
.color-item.selected span { color:var(--terra); font-weight:500; }

.result-banner {
  background:var(--dark); padding:40px 24px 28px;
  text-align:center; position:relative; overflow:hidden;
}
.result-banner::before {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(204,100,76,.28) 0%, transparent 60%);
}
.result-pill {
  display:inline-block; padding:6px 18px; border-radius:20px;
  background:rgba(204,100,76,.2); border:1px solid rgba(204,100,76,.4);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra-l); margin-bottom:16px; position:relative; z-index:1;
}
.result-banner h2 { font-size:24px; font-weight:500; color:var(--white); margin-bottom:8px; position:relative; z-index:1; }
.result-banner p { font-size:12px; color:rgba(255,220,212,.55); position:relative; z-index:1; }

.stone-result {
  display:flex; align-items:flex-start; gap:14px;
  background:var(--white); border-radius:var(--radius-md); padding:18px;
  margin:16px 22px;
  border:1px solid rgba(193,146,135,.2);
}
.stone-circle {
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#9b7bce,#7b59ae);
}
.stone-tags { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.stone-tag {
  font-size:9px; padding:3px 10px; border-radius:10px;
  background:rgba(204,100,76,.1); color:var(--terra);
  border:1px solid rgba(204,100,76,.22);
}
.code-box {
  background:var(--white); border-radius:var(--radius-md);
  padding:20px 22px; margin:0 22px 16px;
  border:1.5px solid rgba(204,100,76,.22);
  transition:box-shadow .25s;
}
.code-box:hover { box-shadow:0 4px 20px rgba(204,100,76,.12); }
.code-lbl { font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--grey); margin-bottom:4px; }
.code-val { font-size:20px; font-weight:500; color:var(--terra); letter-spacing:.08em; }
.code-desc { font-size:11px; color:var(--muted); margin-top:4px; }

/* ═══════════════════════════════════════
   GIFTCARD PAGE
═══════════════════════════════════════ */
.gc-card-big {
  background:linear-gradient(135deg, var(--terra) 0%, var(--terra-h) 100%);
  border-radius:16px; margin:20px 22px; padding:28px 26px;
  box-shadow:0 14px 42px rgba(204,100,76,.38);
  cursor:pointer;
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.gc-card-big:hover { transform:translateY(-4px) rotate(.4deg); box-shadow:0 22px 54px rgba(204,100,76,.42); }
.gc-brand { font-size:13px; font-weight:500; color:rgba(255,255,255,.9); letter-spacing:.18em; margin-bottom:2px; }
.gc-brand-sub { font-size:9px; color:rgba(255,220,212,.55); letter-spacing:.2em; text-transform:uppercase; margin-bottom:22px; }
.gc-big-amt { font-size:40px; font-weight:500; color:var(--white); }
.gc-code-hint { font-size:10px; color:rgba(255,220,212,.42); margin-top:14px; letter-spacing:.12em; }

.amt-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 22px; }
.amt-btn {
  padding:14px 0; text-align:center; border-radius:var(--radius-sm);
  background:var(--white); border:1px solid rgba(193,146,135,.22);
  font-size:13px; font-weight:500; cursor:pointer;
  transition:border-color .22s, color .22s, background .22s, transform .22s;
}
.amt-btn:hover { border-color:var(--terra); color:var(--terra); transform:scale(1.04); }
.amt-btn.active { background:var(--terra); border-color:var(--terra); color:var(--white); }

.gc-form { padding:0 22px 22px; display:flex; flex-direction:column; gap:12px; }
.gc-checks { padding:0 22px 30px; }
.gc-check {
  font-size:12px; color:var(--muted); margin-bottom:8px;
  padding-left:4px;
}
.gc-check::before { content:'✓  '; color:var(--terra); }

/* ═══════════════════════════════════════
   WITRUIMTE CONSISTENTIE
═══════════════════════════════════════ */
.section { padding:44px 22px; }
.cat-section { padding:36px 0 0; }
.kh-teaser  { padding:44px 24px; }
.gc-hero    { padding:44px 24px; }
.ig-section { padding:44px 22px; }

@media (min-width:600px) {
  .section    { padding:52px 40px; }
  .kh-teaser  { padding:52px 60px; }
  .gc-hero    { padding:52px 60px; }
  .ig-section { padding:52px 40px; }
}
@media (min-width:900px) {
  .section    { padding:64px 80px; }
  .kh-teaser  { padding:72px 80px; }
  .gc-hero    { padding:72px 80px; }
  .ig-section { padding:64px 80px; }
}
@media (min-width:1400px) {
  .section    { padding:80px 120px; }
  .kh-teaser  { padding:90px 120px; }
  .gc-hero    { padding:90px 120px; }
  .ig-section { padding:80px 120px; }
}




/* ═══════════════════════════════════════
   CONFIGURATOR PAGE
═══════════════════════════════════════ */
.cfg-stone-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:16px;
}
@media (min-width:500px) { .cfg-stone-grid { grid-template-columns:repeat(6,1fr); } }
@media (min-width:900px) { .cfg-stone-grid { grid-template-columns:repeat(6,1fr); } }

.cfg-stone-btn {
  background:var(--white);
  border:1.5px solid rgba(193,146,135,.2);
  border-radius:var(--radius-md);
  padding:10px 5px 8px;
  cursor:pointer;
  text-align:center;
  transition:border-color .2s, transform .2s, box-shadow .2s;
  font-family:inherit;
}
.cfg-stone-btn:hover {
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  border-color:rgba(193,146,135,.5);
}
.cfg-stone-btn.active {
  border-width:2px;
  box-shadow:0 4px 14px rgba(0,0,0,.1);
}
.cfg-stone-swatch {
  width:26px; height:26px; border-radius:50%;
  margin:0 auto 5px; display:block;
}
.cfg-stone-name  { font-size:9px;  color:var(--dark);  display:block; line-height:1.3; font-weight:500; }
.cfg-stone-month { font-size:8px;  color:var(--muted); display:block; letter-spacing:.03em; }

.cfg-meaning-inline {
  display:flex; gap:14px; align-items:flex-start;
  background:var(--white);
  border-radius:var(--radius-md);
  border:1px solid rgba(193,146,135,.2);
  padding:16px; margin-bottom:4px;
  animation:pageIn .3s var(--ease-out) both;
}
.cfg-meaning-swatch {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
}
.cfg-meaning-stone {
  font-size:14px; font-weight:500; color:var(--dark); margin-bottom:4px;
}
.cfg-meaning-txt  { font-size:12px; color:var(--muted); line-height:1.65; }

.cfg-row2 {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.cfg-block {
  background:var(--white);
  border-radius:var(--radius-md);
  padding:14px;
  border:1px solid rgba(193,146,135,.18);
}
.cfg-step-label {
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rose); display:block; margin-bottom:10px;
}
.cfg-opt-row { display:flex; gap:7px; flex-wrap:wrap; }
.cfg-opt-btn {
  border:1px solid rgba(193,146,135,.3);
  border-radius:20px; padding:5px 13px;
  font-size:11px; background:var(--white);
  cursor:pointer; color:var(--text); font-family:inherit;
  transition:border-color .2s, color .2s, background .2s;
}
.cfg-opt-btn:hover  { border-color:var(--terra); color:var(--terra); }
.cfg-opt-btn.active { background:var(--terra); border-color:var(--terra); color:var(--white); }

.cfg-preview {
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid rgba(193,146,135,.2);
  padding:18px;
  display:flex; gap:18px; align-items:flex-start;
}
.cfg-svg-wrap {
  flex-shrink:0; width:110px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.cfg-photo-placeholder {
  width:100%; aspect-ratio:1;
  background:var(--cream);
  border-radius:var(--radius-md);
  border:1px dashed rgba(193,146,135,.4);
  display:flex; align-items:center; justify-content:center; padding:8px;
}
.cfg-info    { flex:1; min-width:0; }
.cfg-title   { font-size:15px; font-weight:500; color:var(--dark); margin-bottom:3px; }
.cfg-subtitle{ font-size:12px; color:var(--muted); margin-bottom:10px; line-height:1.5; }
.cfg-tags    { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.cfg-tag     { font-size:9px; padding:3px 10px; border-radius:10px; border:1px solid rgba(193,146,135,.3); color:var(--muted); }
.cfg-price   { font-size:20px; font-weight:500; color:var(--terra); }
/* ═══════════════════════════════════════
   OVER ONS PAGINA
═══════════════════════════════════════ */
.over-ons-teaser { transition:background .2s; }
.over-ons-teaser:hover { background:#f5ede8; }

.ons-photo-wrap {
  padding:28px 22px 0;
}
.ons-photo-placeholder {
  width:100%;
  aspect-ratio:3/4;
  max-height:420px;
  background:var(--cream);
  border-radius:var(--radius-lg);
  border:2px dashed rgba(193,146,135,.35);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  transition:border-color .2s;
}
.ons-photo-icon  { font-size:48px; opacity:.4; }
.ons-photo {
  width:100%;
  max-height:560px;
  object-fit:cover;
  object-position:center 35%;
  border-radius:var(--radius-lg);
  display:block;
  box-shadow:0 16px 44px rgba(42,31,28,.14);
}
.ons-photo-label { font-size:13px; font-weight:500; color:var(--muted); }
.ons-photo-hint  { font-size:11px; color:var(--grey); line-height:1.6; }
.ons-photo-hint code {
  background:rgba(193,146,135,.12);
  border-radius:4px;
  padding:2px 6px;
  font-size:10px;
  color:var(--terra);
}

.ons-content {
  padding:32px 22px 48px;
}
.ons-title {
  font-size:28px;
  font-weight:500;
  color:var(--dark);
  line-height:1.2;
  margin:6px 0 24px;
}
.ons-placeholder-block {
  background:var(--cream);
  border-radius:var(--radius-md);
  border:1.5px dashed rgba(193,146,135,.3);
  padding:20px;
  margin-bottom:14px;
  text-align:center;
}
.ons-placeholder-txt {
  font-size:12px;
  color:var(--grey);
  line-height:1.8;
}
.ons-body {
  font-size:15px;
  color:var(--text);
  line-height:1.85;
  margin-bottom:18px;
  max-width:560px;
}
.ons-contact-row {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:28px;
}
.ons-contact-btn {
  display:block;
  padding:13px 18px;
  border-radius:var(--radius-md);
  border:1px solid rgba(193,146,135,.3);
  font-size:13px;
  color:var(--text);
  text-decoration:none;
  text-align:center;
  transition:background .2s, border-color .2s;
}
.ons-contact-btn:hover {
  background:var(--cream);
  border-color:var(--terra);
}

@media (min-width:600px) {
  .ons-photo-wrap  { padding:36px 40px 0; }
  .ons-content     { padding:36px 40px 60px; }
  .ons-title       { font-size:34px; }
  .ons-contact-row { flex-direction:row; }
  .ons-contact-btn { flex:1; }
  .ons-photo-placeholder { max-height:500px; }
}
@media (min-width:900px) {
  .ons-photo-wrap  { padding:44px 80px 0; }
  .ons-content     { padding:44px 80px 80px; }
  .ons-title       { font-size:40px; }
}
@media (min-width:1400px) {
  .ons-photo-wrap  { padding:52px 120px 0; }
  .ons-content     { padding:52px 120px 100px; }
}

/* ═══════════════════════════════════════
   DESKTOP CENTRERING — content max-width
   Alle homepage-secties houden content
   gecentreerd op brede schermen.
═══════════════════════════════════════ */
@media (min-width:900px) {
  /* Generieke section: al gecovered door wrap max-width */

  /* Categorieën */
  .cat-section .eyebrow,
  .cat-section .sec-title {
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    display:block;
  }
  .cat-scroll {
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
  }

  /* Stel Samen teaser */
  .ss-teaser-inner {
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    border-radius:var(--radius-lg);
  }

  /* Over Ons teaser (.section) — al via wrap, maar tekst links-uitgelijnd,
     dit brengt het in lijn met andere secties */
  .over-ons-teaser {
    max-width:100%;
  }
  .over-ons-teaser .sec-title,
  .over-ons-teaser .sec-body,
  .over-ons-teaser .eyebrow,
  .over-ons-teaser .btn {
    max-width:680px;
  }

  /* Cadeaubon gc-hero: inner content centreren */
  .gc-hero-inner {
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:60px;
  }

  /* ig-section */
  .ig-section .ig-grid,
  .ig-section .ig-handle,
  .ig-section .sec-title,
  .ig-section .eyebrow {
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (min-width:1400px) {
  .ss-teaser-inner { max-width:1440px; }
  .gc-hero-inner   { max-width:1440px; }
  .cat-scroll      { max-width:1800px; }
}


/* ═══════════════════════════════════════════════════════
   HUISSTIJL TOKENS — turquoise, terracotta, off-white, goud
═══════════════════════════════════════════════════════ */
:root {
  --turq:    #3abab4;
  --turq-l:  #6dcdc8;
  --turq-d:  #2a8a85;
}

/* ═══════════════════════════════════════════════════════
   NAV — transparant, logo midden, links/rechts split
═══════════════════════════════════════════════════════ */
.nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 24px;
  height:76px;
  transition:background .35s, backdrop-filter .35s, box-shadow .35s;
}
/* Nav standaard = terracotta achtergrond, witte tekst */
.nav {
  background:var(--terra);
}
.nav .nav-logo svg path { fill:white; }
.nav .nav-logo-sub { color:rgba(255,255,255,.7); }
.nav .nav-link { color:white; }
.nav .nav-btn svg { stroke:white; fill:none; }
.nav .nav-lang-btn { color:white; }

/* Transparant = alleen op homepage bovenaan */
.nav-transparent {
  background:transparent;
}
.nav.nav-scrolled {
  background:var(--terra);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.nav.nav-scrolled .nav-logo svg path { fill:white; }
.nav.nav-scrolled .nav-logo-sub { color:rgba(255,255,255,.7); }
.nav.nav-scrolled .nav-link { color:white; }
.nav.nav-scrolled .nav-btn svg { stroke:white; fill:none; }
.nav.nav-scrolled .nav-lang-btn { color:white; }
.nav .nav-link:hover { color:rgba(255,255,255,.7); }

.nav-left, .nav-right {
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-right { justify-content:flex-end; }

.nav-link {
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:white;
  text-decoration:none;
  padding:8px 12px;
  border-radius:3px;
  transition:color .2s, background .2s;
  white-space:nowrap;
}
.nav-link:hover { color:var(--terra-l); }
.nav .nav-link:hover { color:rgba(255,255,255,.7); }

/* Collectie-dropdown */
.nav-drop { position:relative; display:flex; align-items:center; }
.nav-drop-btn {
  font-family:inherit;
  display:flex; align-items:center; gap:5px;
}
.nav-drop-caret { font-size:9px; transition:transform .2s; opacity:.8; }
.nav-drop:hover .nav-drop-caret { transform:rotate(180deg); }
.nav-drop-menu {
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:180px;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:0 12px 32px rgba(42,31,28,.16);
  padding:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:200;
}
.nav-drop:hover .nav-drop-menu {
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-drop-menu a {
  display:block;
  padding:10px 14px;
  font-size:13px;
  color:var(--text);
  border-radius:var(--radius-sm);
  letter-spacing:.02em;
  transition:background .15s, color .15s;
}
.nav-drop-menu a:hover { background:var(--cream-bg); color:var(--terra); }

.nav-logo {
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
  padding:8px 16px;
}
.nav-logo svg {
  height:36px;
  width:auto;
  transition:height .2s;
}
.nav-logo svg path { fill:white; transition:fill .35s; }
.nav.nav-scrolled .nav-logo svg { height:30px; }
.nav-logo-sub {
  font-size:7px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-top:2px;
  transition:color .35s;
}
.nav.nav-scrolled .nav-logo-sub { color:rgba(255,255,255,.7); }

.nav-btn {
  background:transparent;
  border:none;
  cursor:pointer;
  padding:8px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}
.nav-btn:hover { background:rgba(255,255,255,.1); }
.nav.nav-scrolled .nav-btn:hover { background:rgba(255,255,255,.12); }
.nav-btn svg {
  width:18px; height:18px;
  fill:none; stroke:white; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .35s;
}
.nav.nav-scrolled .nav-btn svg { stroke:white; }

/* Taalwissel */
.nav-lang { position:relative; }
.nav-lang-btn {
  background:transparent;
  border:none;
  cursor:pointer;
  font-size:10px;
  letter-spacing:.1em;
  color:white;
  padding:6px 8px;
  border-radius:3px;
  display:flex; align-items:center; gap:4px;
  transition:color .2s;
}
.nav.nav-scrolled .nav-lang-btn { color:white; }
.nav-lang-drop {
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  background:white;
  border-radius:var(--radius-md);
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  overflow:hidden;
  min-width:140px;
  z-index:100;
}
.nav-lang-drop button {
  display:block; width:100%;
  background:none; border:none;
  padding:10px 14px;
  font-size:12px; text-align:left;
  cursor:pointer; color:var(--dark);
  transition:background .15s;
}
.nav-lang-drop button:hover { background:var(--cream); }

/* Mobile nav — just logo + icons */
/* Hamburger button — alleen mobile */
.nav-hamburger {
  display:none;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:8px;
  width:36px;
  height:36px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.nav-hamburger span {
  display:block;
  width:20px;
  height:2px;
  background:white;
  transition:background .3s, transform .3s, opacity .3s;
}
.nav.nav-scrolled .nav-hamburger span { background:white; }

@media (max-width:899px) {
  .nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
  }
  /* Verberg de tekstlinks en taalknop op mobiel */
  .nav-left, .nav-right .nav-link, .nav-right .nav-lang {
    display:none !important;
  }
  /* Logo altijd exact in het midden, los van wat er links/rechts staat */
  .nav-logo {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    padding:6px;
  }
  .nav-logo svg { height:32px; }
  .nav.nav-scrolled .nav-logo svg { height:28px; }
  .nav-logo-sub { font-size:6px; }
  /* Mandje, zoek en hamburger blijven rechts */
  .nav-right {
    margin-left:auto;
    justify-content:flex-end;
    gap:2px;
  }
  .nav-hamburger {
    display:flex !important;
  }
}

/* ═══════════════════════════════════════════════════════
   HERO FULL — 100vh met transparante nav erop
═══════════════════════════════════════════════════════ */
.hero-full {
  position:relative;
  height:100vh;
  min-height:500px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-top:-76px; /* slide under fixed nav */
}
.hero-full-bg {
  position:absolute; inset:0;
  background-color:var(--terra);
  background-size:cover;
  background-position:32% 30%;
  background-repeat:no-repeat;
}
.hero-full-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(58,31,22,.18) 0%, rgba(120,48,33,.34) 70%, rgba(204,100,76,.42) 100%),
    linear-gradient(115deg, rgba(204,100,76,.20) 0%, transparent 55%);
  mix-blend-mode:multiply;
}
.hero-full-content {
  position:relative; z-index:2;
  text-align:center;
  padding:0 24px;
}
.hero-full-title {
  font-size:clamp(36px, 8vw, 80px);
  font-weight:300;
  color:white;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 28px;
}
.hero-scroll-indicator {
  position:absolute;
  bottom:74px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer;
  color:rgba(255,255,255,.7);
  animation:scrollBounce 2.2s ease-in-out infinite;
}
.hero-scroll-label { font-size:10px; letter-spacing:.22em; text-transform:uppercase; }
.hero-scroll-arrow svg { stroke:rgba(255,255,255,.7); }
@keyframes scrollBounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(8px); }
}

/* ═══════════════════════════════════════════════════════
   CARROUSEL — horizontale auto-scroll loop
═══════════════════════════════════════════════════════ */
.home-carousel-wrap {
  overflow:hidden;
  padding-bottom:32px;
  background:var(--white);
}
.home-carousel-header {
  padding:28px 22px 0;
}
.carousel-track-wrap {
  overflow:hidden;
  position:relative;
}
.carousel-track {
  display:flex;
  gap:14px;
  padding:16px 22px 8px;
  animation:carouselScroll 32s linear infinite;
  width:max-content;
}
.carousel-track:hover { animation-play-state:paused; }
@keyframes carouselScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.carousel-item {
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer;
  transition:transform .2s;
}
.carousel-item:hover { transform:translateY(-6px); }
.ci-img {
  width:150px; aspect-ratio:3/4;
  border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  background:var(--cream);
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  transition:box-shadow .2s;
}
.ci-img img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.ci-img span { font-size:40px !important; }
.carousel-item:hover .ci-img { box-shadow:0 10px 28px rgba(0,0,0,.15); }
.carousel-item span {
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
}
@media (min-width:600px) { .ci-img { width:160px; } }
@media (min-width:900px) { .ci-img { width:180px; } }

/* ═══════════════════════════════════════════════════════
   CADEAUBON — bankpas stijl
═══════════════════════════════════════════════════════ */
.gc-page-hero {
  text-align:center;
  padding:36px 24px 8px;
}
.gc-page-hero .eyebrow { color:var(--terra); display:block; margin-bottom:10px; }
.gc-page-title {
  font-size:clamp(34px, 9vw, 56px);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--dark);
  margin-bottom:14px;
}
.gc-page-sub {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  max-width:440px;
  margin:0 auto;
}
@media (min-width:600px) { .gc-page-hero { padding:48px 40px 8px; } }

.gc-card-stage {
  display:flex; flex-direction:column; align-items:center;
  padding:32px 22px 24px;
  gap:16px;
}
.gc-bankpas {
  width:300px; height:188px;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
  animation:pasFloat 4s ease-in-out infinite;
}
@keyframes pasFloat {
  0%,100% { transform:translateY(0) rotateY(0deg); }
  50%      { transform:translateY(-8px) rotateY(0deg); }
}
.gc-bankpas.flipped { animation:none; transform:rotateY(180deg); }
.gc-pas-front, .gc-pas-back {
  position:absolute; inset:0;
  border-radius:16px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  padding:24px;
  overflow:hidden;
}
.gc-pas-front {
  background:linear-gradient(135deg, var(--terra) 0%, #8B3520 60%, #2a1810 100%);
  box-shadow:0 20px 48px rgba(204,100,76,.4);
}
.gc-pas-back {
  background:linear-gradient(135deg, #2a1810 0%, var(--terra) 100%);
  transform:rotateY(180deg);
  box-shadow:0 20px 48px rgba(204,100,76,.4);
}
/* Decoratief element op de pas */
.gc-pas-front::before {
  content:'';
  position:absolute;
  top:-40px; right:-40px;
  width:180px; height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
}
.gc-pas-front::after {
  content:'';
  position:absolute;
  bottom:-60px; left:20px;
  width:200px; height:200px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
}
.gc-pas-chip {
  width:36px; height:28px;
  background:linear-gradient(135deg,#e8c860,#c8a032);
  border-radius:5px;
  margin-bottom:16px;
  position:relative; z-index:1;
}
.gc-pas-logo {
  font-size:22px; font-weight:500;
  color:white; letter-spacing:.1em;
  position:absolute; top:24px; right:24px;
  z-index:1;
}
.gc-pas-sub {
  font-size:7px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  position:absolute; top:50px; right:24px;
  z-index:1;
}
.gc-pas-name {
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  position:absolute; bottom:38px; left:24px;
  z-index:1;
}
.gc-pas-amount {
  font-size:28px; font-weight:300;
  color:white;
  position:absolute; bottom:56px; left:24px;
  z-index:1;
}
.gc-pas-code {
  font-size:8px; letter-spacing:.22em;
  color:rgba(255,255,255,.4);
  position:absolute; bottom:18px; left:24px;
  z-index:1;
}
.gc-pas-stripe {
  position:absolute; top:36px; left:0; right:0;
  height:40px;
  background:rgba(0,0,0,.35);
}
.gc-pas-msg {
  position:absolute; top:96px; left:20px; right:20px;
  font-size:11px; line-height:1.6;
  color:rgba(255,255,255,.75);
  font-style:italic;
}
.gc-pas-back-logo {
  position:absolute; bottom:16px; left:0; right:0;
  text-align:center;
  font-size:8px; letter-spacing:.2em;
  color:rgba(255,255,255,.35);
  text-transform:uppercase;
}
.gc-flip-btn {
  background:none; border:1px solid rgba(193,146,135,.3);
  border-radius:20px; padding:6px 16px;
  font-size:11px; cursor:pointer;
  color:var(--muted); font-family:inherit;
  transition:border-color .2s, color .2s;
}
.gc-flip-btn:hover { border-color:var(--terra); color:var(--terra); }
.gc-deliver-opts { padding:0 22px; display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.gc-deliver-opt {
  display:flex; align-items:center; gap:14px;
  border:1.5px solid rgba(193,146,135,.25);
  border-radius:var(--radius-md); padding:14px 16px;
  cursor:pointer; transition:border-color .2s, background .2s;
}
.gc-deliver-opt:hover { border-color:var(--terra); background:var(--cream); }
.gc-deliver-opt.selected { border-color:var(--terra); background:var(--cream); }
.gc-deliver-icon { font-size:22px; }
.gc-deliver-title { font-size:13px; font-weight:500; color:var(--dark); }
.gc-deliver-sub   { font-size:11px; color:var(--muted); margin-top:2px; }
.gc-physical-fields { animation:pageIn .3s var(--ease-out); }
@media (min-width:600px) { .gc-bankpas { width:360px; height:226px; } }

/* ═══════════════════════════════════════════════════════
   KEUZEHULP — nieuwe vraagstijlen
═══════════════════════════════════════════════════════ */
.kh-single.selected, .kh-multi.selected {
  background:var(--cream);
  border-color:var(--terra);
}
.kh-style-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:4px;
}
.kh-style-btn {
  border:1.5px solid rgba(193,146,135,.25);
  border-radius:var(--radius-md); padding:12px;
  font-size:12px; text-align:center;
  cursor:pointer; color:var(--dark);
  transition:border-color .2s, background .2s;
  font-family:inherit;
  background:var(--white);
}
.kh-style-btn:hover { border-color:var(--terra); background:var(--cream); }
.kh-style-btn.selected { border-color:var(--terra); background:var(--cream); font-weight:500; }
.kh-color.selected .color-swatch { outline:3px solid var(--terra); outline-offset:2px; }

/* Result banner met foto */
.result-banner-img {
  position:relative;
  height:200px;
  background:linear-gradient(135deg,var(--terra),#2a1810);
  display:flex; align-items:flex-end;
  padding:24px;
}
.result-banner-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent);
}
.result-banner-text { position:relative; z-index:1; }
.result-banner-text h2 { color:white; font-size:24px; margin-bottom:4px; }
.result-banner-text p  { color:rgba(255,255,255,.7); font-size:12px; }

/* ═══════════════════════════════════════════════════════
   FOOTER — terracotta achtergrond, witte letters
═══════════════════════════════════════════════════════ */
.footer {
  background:var(--terra) !important;
}
.footer * { color:rgba(255,255,255,.9) !important; }
.footer .footer-sub,
.footer .footer-copy { color:rgba(255,255,255,.6) !important; }
.footer hr,
.footer .footer-divider { border-color:rgba(255,255,255,.15) !important; }
.footer-link { cursor:pointer; transition:color .2s !important; }
.footer-link:hover { color:white !important; text-decoration:underline; }
.footer-bottom-row { border-top-color:rgba(255,255,255,.15) !important; }

/* Wrap: pad voor fixed nav */
#page-home .wrap { padding-top:0; }
.wrap { padding-top:76px; }
#page-home .hero-full { margin-top:-76px; padding-top:0; }

/* ═══════════════════════════════════════
   BANKPAS ACHTERKANT — verbeterd
═══════════════════════════════════════ */
.gc-pas-back-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 24px;
}
.gc-pas-back-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gc-pas-back-sub {
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.gc-pas-back-code {
  background: rgba(0,0,0,.2);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 8px;
}
.gc-pas-back-code-label {
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 4px;
}
.gc-pas-back-code-val {
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.85);
  font-family: monospace;
}
/* Verberg de stripe op de achterkant — cleaner */
.gc-pas-back .gc-pas-stripe {
  display: none;
}

/* ═══════════════════════════════════════
   CARROUSEL — meer ruimte rondom + zachte overlap op hero
═══════════════════════════════════════ */
.home-carousel-wrap {
  padding-top: 40px;
  padding-bottom: 48px;
  margin-top: -44px;
  position: relative;
  z-index: 3;
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -16px 36px rgba(42,31,28,.10);
}
.carousel-track {
  padding: 20px 22px 16px;
}

/* ═══════════════════════════════════════
   CONFIGURATOR — single-page stijl
═══════════════════════════════════════ */
.cfg-section {
  padding: 28px 22px 48px;
}
@media (min-width:600px) { .cfg-section { padding: 36px 40px 60px; } }
@media (min-width:900px) { .cfg-section { padding: 44px 80px 80px; } }
@media (min-width:1400px) { .cfg-section { padding: 52px 120px 100px; } }

/* ═══════════════════════════════════════
   BANKPAS — logo fix voorkant, achterkant clean
═══════════════════════════════════════ */
.gc-pas-logo-wrap {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 2;
}
/* Verberg de oude tekst-logo elementen (vervangen door SVG) */
.gc-pas-logo, .gc-pas-sub { display: none; }

/* Verberg voorkant-elementen op de achterkant volledig */
.gc-pas-back .gc-pas-name,
.gc-pas-back .gc-pas-amount,
.gc-pas-back .gc-pas-code,
.gc-pas-back .gc-pas-logo-wrap,
.gc-pas-back .gc-pas-deco { display: none; }

/* Achterkant: code vak bovenin ipv midden */
.gc-pas-back-content {
  justify-content: flex-start;
  gap: 16px;
  padding-top: 24px;
}
.gc-pas-back-code {
  margin: 0;
}

/* Instagram handle als link */
a.ig-handle {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--terra);
  text-decoration: none;
  margin-top: 10px;
  padding: 8px 18px;
  border: 1px solid rgba(193,146,135,.3);
  border-radius: 20px;
  transition: background .2s, border-color .2s, color .2s;
}
a.ig-handle:hover {
  background: var(--cream);
  border-color: var(--terra);
  color: var(--terra);
}


/* ═══════════════════════════════════════
   MOBILE: GEEN WITTE RANDEN
═══════════════════════════════════════ */
@media (max-width:599px) {
  body { overflow-x:hidden; }
  .wrap { padding-left:0; padding-right:0; }
  .hero-full { width:100%; }
}

/* ═══════════════════════════════════════
   KEUZEHULP RESULTAAT — lichte versie
═══════════════════════════════════════ */
.kh-result-hero {
  text-align:center;
  padding:48px 24px 32px;
  background:linear-gradient(180deg, #fdf8f4 0%, var(--cream) 100%);
  position:relative;
  overflow:hidden;
}
.kh-result-hero::before,
.kh-result-hero::after {
  content:'';
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.kh-result-hero::before {
  width:200px; height:200px;
  top:-100px; left:-50px;
  background:radial-gradient(circle, rgba(204,100,76,.12), transparent 70%);
}
.kh-result-hero::after {
  width:240px; height:240px;
  bottom:-120px; right:-60px;
  background:radial-gradient(circle, rgba(193,146,135,.15), transparent 70%);
}
.kh-result-sparkle {
  font-size:32px;
  color:var(--terra);
  animation:sparkleSpin 4s ease-in-out infinite;
  margin-bottom:14px;
  position:relative; z-index:1;
}
@keyframes sparkleSpin {
  0%,100% { transform:rotate(0) scale(1); opacity:.85; }
  50%      { transform:rotate(180deg) scale(1.2); opacity:1; }
}
.kh-result-title {
  font-size:32px;
  font-weight:300;
  color:var(--dark);
  line-height:1.15;
  letter-spacing:-.01em;
  margin-bottom:12px;
  position:relative; z-index:1;
}
.kh-result-title em {
  font-style:normal;
  color:var(--terra);
  font-weight:400;
}
.kh-result-sub {
  font-size:13px;
  color:var(--muted);
  position:relative; z-index:1;
}

.kh-result-stone-card {
  display:flex;
  align-items:center;
  gap:18px;
  margin:24px 22px;
  padding:22px;
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid rgba(193,146,135,.2);
  box-shadow:0 6px 24px rgba(0,0,0,.04);
}
.kh-result-stone-visual {
  position:relative;
  width:70px; height:70px;
  flex-shrink:0;
}
.kh-result-stone-glow {
  position:absolute; inset:-8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(155,123,206,.4), transparent 70%);
  animation:stoneGlow 3s ease-in-out infinite;
}
@keyframes stoneGlow {
  0%,100% { transform:scale(1); opacity:.6; }
  50%      { transform:scale(1.1); opacity:.9; }
}
.kh-result-stone-dot {
  position:absolute; inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #c2b8d8, #7B59AE);
  box-shadow:inset -6px -8px 12px rgba(0,0,0,.2),
             inset 4px 4px 8px rgba(255,255,255,.4);
}
.kh-result-stone-info h3 {
  font-size:22px;
  font-weight:500;
  color:var(--dark);
  margin:4px 0 8px;
}
.kh-result-stone-txt {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin-top:10px;
}

.kh-result-cta-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 22px;
  margin-bottom:20px;
}
.kh-result-cta {
  background:var(--white);
  border:1px solid rgba(193,146,135,.25);
  border-radius:var(--radius-md);
  padding:18px 14px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.kh-result-cta:hover {
  border-color:var(--terra);
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(204,100,76,.12);
}
.kh-result-cta--ar {
  background:linear-gradient(135deg, var(--terra) 0%, #b34d3a 100%);
  border-color:transparent;
}
.kh-result-cta--ar .kh-result-cta-title,
.kh-result-cta--ar .kh-result-cta-sub {
  color:white;
}
.kh-result-cta--ar .kh-result-cta-sub { color:rgba(255,255,255,.75); }
.kh-result-cta-icon { font-size:24px; margin-bottom:8px; }
.kh-result-cta-title { font-size:13px; font-weight:500; color:var(--dark); margin-bottom:3px; }
.kh-result-cta-sub   { font-size:10px; color:var(--muted); letter-spacing:.05em; }

.kh-code-box {
  margin:0 22px 20px;
  padding:18px 22px;
  background:linear-gradient(135deg, var(--cream) 0%, #f7eee5 100%);
  border:1px dashed rgba(204,100,76,.35);
  border-radius:var(--radius-md);
  text-align:center;
}
.kh-code-val {
  font-family:monospace;
  font-size:18px;
  letter-spacing:.18em;
  color:var(--terra);
  font-weight:500;
  margin:6px 0 4px;
}
.kh-code-desc {
  font-size:10px;
  color:var(--muted);
  letter-spacing:.05em;
}

/* ═══════════════════════════════════════
   INSTAGRAM TEGELS — clickable links
═══════════════════════════════════════ */
.ig-tile {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1;
  background:linear-gradient(135deg, var(--cream) 0%, #f0e4d8 100%);
  border-radius:var(--radius-md);
  cursor:pointer;
  text-decoration:none;
  overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.ig-tile-emoji {
  font-size:32px;
  transition:transform .3s;
}
.ig-tile-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(204,100,76,.85), rgba(155,123,206,.7));
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .25s;
}
.ig-tile-icon {
  font-size:24px;
  color:white;
  font-weight:300;
}
.ig-tile:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.ig-tile:hover .ig-tile-overlay { opacity:1; }
.ig-tile:hover .ig-tile-emoji { transform:scale(1.15); }

/* Menu taal */
.menu-lang {
  display:flex;
  gap:8px;
  justify-content:center;
  padding:16px 24px;
  border-top:1px solid rgba(204,100,76,.15);
  margin-top:auto;
}
.menu-lang-btn {
  background:transparent;
  border:1px solid rgba(204,100,76,.3);
  border-radius:20px;
  padding:8px 16px;
  font-size:11px;
  color:var(--terra-l);
  cursor:pointer;
  font-family:inherit;
  transition:background .2s, color .2s;
}
.menu-lang-btn:hover {
  background:var(--terra);
  color:white;
}

/* ═══════════════════════════════════════
   ZACHTER KLEURPALET — minder zwart
═══════════════════════════════════════ */
.gc-pas-front {
  background:linear-gradient(135deg, var(--terra) 0%, #b34d3a 50%, #8a3a2a 100%) !important;
}
.gc-pas-back {
  background:linear-gradient(135deg, #b34d3a 0%, var(--terra) 100%) !important;
}
/* hero overlay already set above */

/* ═══════════════════════════════════════
   NAV FADE — zachte onderkant gradient
═══════════════════════════════════════ */
.nav.nav-scrolled {
  box-shadow:none !important;
}
.nav::after {
  content:'';
  position:absolute;
  bottom:-16px;
  left:0;
  right:0;
  height:16px;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s;
}
..nav::after {
  background:linear-gradient(to bottom, var(--terra), transparent);
  opacity:1;
}
.nav-transparent::after {
  opacity:0;
}

/* ═══════════════════════════════════════
   MOBILE FIXES — positionering en spacing
═══════════════════════════════════════ */
@media (max-width:599px) {
  /* Full-width content */
  body { overflow-x:hidden; }
  
  /* Hero-tekst beter gepositioneerd */
  .hero-full-title { font-size:36px; }
  .hero-full-content { padding:0 20px; }
  
  /* Carrousel items duidelijk zichtbaar op mobile */
  .ci-img { width:132px; aspect-ratio:3/4; height:auto; }
  .ci-img span { font-size:38px !important; }
  .carousel-track { gap:14px; padding:16px 16px 10px; }
  
  /* Keuzehulp vragen beter op mobile */
  .kh-q-head { padding:28px 20px 16px; }
  .kh-q-head h2 { font-size:24px; }
  
  /* Configurator stenen grid 3 kolommen op kleine schermen */
  .cfg-stone-grid { grid-template-columns:repeat(3,1fr); gap:6px; }
  .cfg-stone-btn { padding:8px 4px 6px; }
  .cfg-stone-name { font-size:8px; }
  
  /* Preview beter op mobile */
  .cfg-preview { flex-direction:column; align-items:center; text-align:center; }
  .cfg-svg-wrap { width:100%; max-width:140px; }
  .cfg-info { width:100%; }
  
  /* Cadeaubon bankpas op mobile iets kleiner */
  .gc-bankpas { width:280px; height:176px; }
  .gc-pas-front, .gc-pas-back { padding:18px; }
  .gc-pas-amount { font-size:22px; }
  .gc-pas-name { font-size:11px; }
  
  /* KH resultaat op mobile */
  .kh-result-title { font-size:26px; }
  .kh-result-cta-grid { grid-template-columns:1fr; }
  
  /* Opt-cards spacing */
  .opt-card { padding:14px 16px; }
  
  /* Scroll indicator positie */
  .hero-scroll-indicator { bottom:60px; }
  
  /* KH color row: wrapping */
  .color-row { gap:8px; }
  .color-swatch { width:38px; height:38px; }
  
  /* Section padding op mobile */
  .section { padding:32px 18px; }
  .kh-teaser { padding:32px 18px; }
  
  /* Footer leesbaarheid */
  .footer { padding:32px 18px; }
}

/* Tablet fixes */
@media (min-width:600px) and (max-width:899px) {
  .cfg-stone-grid { grid-template-columns:repeat(4,1fr); }
  .hero-full-title { font-size:48px; }
  .gc-bankpas { width:320px; height:200px; }
}

/* ═══════════════════════════════════════
   GENERAL POLISH
═══════════════════════════════════════ */
/* Smooth scroll voor de hele pagina */
html { scroll-behavior:smooth; }

/* Color row layout fix */
.color-row {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.color-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:pointer;
}
.color-swatch {
  width:44px;
  height:44px;
  border-radius:50%;
  border:2px solid transparent;
  transition:border-color .2s, transform .2s, outline .2s;
}
.color-item:hover .color-swatch {
  transform:scale(1.08);
}
.color-lbl {
  font-size:9px;
  color:var(--muted);
  letter-spacing:.05em;
  text-align:center;
}

/* Opt-card (keuzehulp antwoorden) layout */
.opt-card {
  display:flex;
  align-items:center;
  gap:14px;
  border:1.5px solid rgba(193,146,135,.25);
  border-radius:var(--radius-md);
  padding:16px 18px;
  margin-bottom:10px;
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .15s;
  background:var(--white);
}
.opt-card:hover {
  border-color:var(--terra);
  background:var(--cream);
}
.opt-card.selected {
  border-color:var(--terra);
  background:var(--cream);
}
.opt-check {
  width:28px;
  height:28px;
  border-radius:50%;
  border:1.5px solid rgba(193,146,135,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:transparent;
  transition:all .2s;
  flex-shrink:0;
}
.opt-card.selected .opt-check {
  background:var(--terra);
  border-color:var(--terra);
  color:white;
}
.opt-h {
  font-size:14px;
  font-weight:500;
  color:var(--dark);
}
.opt-sub {
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

/* Stone tags in KH result */
.stone-tags {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.stone-tag {
  font-size:9px;
  padding:3px 10px;
  border-radius:10px;
  border:1px solid rgba(193,146,135,.3);
  color:var(--muted);
}

/* Result pill badge */
.result-pill {
  display:inline-block;
  padding:4px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.15);
  color:white;
  font-size:10px;
  letter-spacing:.1em;
  margin-bottom:10px;
}

/* GC form */
.gc-form { padding:0 22px; margin-bottom:16px; }
.amt-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:0 22px 14px;
}
.amt-btn {
  padding:14px 8px;
  text-align:center;
  border:1.5px solid rgba(193,146,135,.3);
  border-radius:var(--radius-md);
  font-size:14px;
  font-weight:500;
  color:var(--dark);
  cursor:pointer;
  background:var(--white);
  font-family:inherit;
  transition:all .2s;
}
.amt-btn:hover { border-color:var(--terra); color:var(--terra); }
.amt-btn.active {
  background:var(--terra);
  border-color:var(--terra);
  color:white;
}

/* Form fields */
.form-field {
  width:100%;
  padding:14px 16px;
  border:1.5px solid rgba(193,146,135,.25);
  border-radius:var(--radius-md);
  font-size:13px;
  font-family:inherit;
  color:var(--dark);
  background:var(--white);
  margin-bottom:10px;
  transition:border-color .2s;
  box-sizing:border-box;
  -webkit-appearance:none;
}
.form-field:focus {
  outline:none;
  border-color:var(--terra);
}
.form-field::placeholder { color:var(--grey); }

/* GC checks */
.gc-checks {
  padding:0 22px 32px;
}
.gc-check {
  font-size:12px;
  color:var(--muted);
  line-height:2;
}
.gc-check::before { content:'✓  '; color:var(--terra); }

/* Button full-width helper */
.btn-full { width:100%; display:block; text-align:center; }

/* ═══════════════════════════════════════════════════════
   BIRTHSTONES TEASER — homepage
═══════════════════════════════════════════════════════ */
.bs-teaser {
  cursor:pointer;
  padding:12px 16px;
  background:var(--cream-bg);
}
.bs-teaser-inner {
  display:flex;
  align-items:center;
  gap:40px;
  padding:56px 28px;
  background:linear-gradient(135deg, #fdf8f4 0%, #f5ede8 50%, #fdf8f4 100%);
  justify-content:center;
  transition:background .3s;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(42,31,28,.05);
}
.bs-teaser:hover .bs-teaser-inner {
  background:linear-gradient(135deg, #f5ede8 0%, #efe4da 50%, #f5ede8 100%);
}
.bs-stones-ring {
  position:relative;
  width:140px;
  height:140px;
  flex-shrink:0;
}
.bs-dot {
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--c);
  top:calc(50% + 54px * sin(calc(var(--d) * 30deg - 90deg)) - 11px);
  left:calc(50% + 54px * cos(calc(var(--d) * 30deg - 90deg)) - 11px);
  box-shadow:0 2px 8px rgba(0,0,0,.15), inset 0 2px 4px rgba(255,255,255,.3);
  transition:transform .4s cubic-bezier(.2,.8,.3,1.2);
}
.bs-teaser:hover .bs-dot {
  transform:scale(1.15);
}
.bs-center-text {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:28px;
  font-weight:300;
  color:var(--terra);
  letter-spacing:-.02em;
}
.bs-text {
  max-width:340px;
}
.bs-title {
  font-size:28px;
  font-weight:400;
  color:var(--dark);
  line-height:1.2;
  margin:6px 0 12px;
  letter-spacing:-.01em;
}
.bs-body {
  font-size:13px;
  color:var(--muted);
  line-height:1.75;
  margin-bottom:22px;
}

@media (max-width:599px) {
  .bs-teaser-inner {
    flex-direction:column;
    text-align:center;
    padding:44px 24px;
    gap:24px;
  }
  .bs-stones-ring { width:120px; height:120px; }
  .bs-dot { width:18px; height:18px;
    top:calc(50% + 44px * sin(calc(var(--d) * 30deg - 90deg)) - 9px);
    left:calc(50% + 44px * cos(calc(var(--d) * 30deg - 90deg)) - 9px);
  }
  .bs-center-text { font-size:22px; }
  .bs-title { font-size:24px; }
}
@media (min-width:900px) {
  .bs-teaser-inner { padding:72px 80px; gap:60px; }
  .bs-stones-ring { width:170px; height:170px; }
  .bs-dot { width:26px; height:26px;
    top:calc(50% + 66px * sin(calc(var(--d) * 30deg - 90deg)) - 13px);
    left:calc(50% + 66px * cos(calc(var(--d) * 30deg - 90deg)) - 13px);
  }
  .bs-title { font-size:34px; }
}

/* ═══════════════════════════════════════════════════════
   CADEAUBON TEASER — homepage
═══════════════════════════════════════════════════════ */
.gc-teaser {
  cursor:pointer;
  padding:12px 16px;
  background:var(--cream-bg);
}
.gc-teaser-inner {
  display:flex;
  align-items:center;
  gap:44px;
  padding:56px 28px;
  background:linear-gradient(135deg, #2a1810 0%, var(--terra) 60%, #b34d3a 100%);
  justify-content:center;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(42,31,28,.16);
}
.gc-mini-card {
  position:relative;
  width:200px;
  height:125px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 100%);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  padding:16px 20px;
  flex-shrink:0;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.gc-teaser:hover .gc-mini-card {
  transform:translateY(-6px) rotateZ(-2deg);
}
.gc-mini-shine {
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
  top:-40px;
  right:-30px;
}
.gc-mini-logo {
  font-size:16px;
  font-weight:500;
  color:white;
  letter-spacing:.1em;
  position:relative;
  z-index:1;
}
.gc-mini-amt {
  font-size:32px;
  font-weight:300;
  color:white;
  margin-top:12px;
  position:relative;
  z-index:1;
}
.gc-mini-label {
  font-size:8px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-top:4px;
  position:relative;
  z-index:1;
}
.gc-teaser-title {
  font-size:28px;
  font-weight:400;
  color:white;
  line-height:1.2;
  margin:6px 0 12px;
}
.gc-teaser-body {
  font-size:13px;
  color:rgba(255,220,212,.6);
  line-height:1.75;
  margin-bottom:22px;
}

@media (max-width:599px) {
  .gc-teaser-inner {
    flex-direction:column;
    text-align:center;
    padding:44px 24px;
    gap:28px;
  }
  .gc-mini-card { width:180px; height:113px; }
  .gc-teaser-title { font-size:24px; }
}
@media (min-width:900px) {
  .gc-teaser-inner { padding:72px 80px; gap:60px; }
  .gc-mini-card { width:240px; height:150px; padding:22px 26px; }
  .gc-mini-logo { font-size:18px; }
  .gc-mini-amt { font-size:38px; }
  .gc-teaser-title { font-size:34px; }
}

/* ═══════════════════════════════════════════════════════
   KEUZEHULP TEASER — visueel upgrade
═══════════════════════════════════════════════════════ */
.kh-teaser {
  background:var(--cream-bg) !important;
  position:relative;
  overflow:hidden;
}
.kh-teaser::before {
  content:'';
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(204,100,76,.10), transparent 70%);
  top:-140px;
  right:-90px;
  pointer-events:none;
}
/* Lichte variant: donkere tekst op warme achtergrond */
.kh-teaser .eyebrow { color:var(--terra); }
.kh-teaser .sec-title { color:var(--dark); }
.kh-teaser .sec-body { color:var(--muted); }
.kh-teaser .kh-step-txt { color:var(--muted); }
.kh-teaser .kh-num { border-color:rgba(204,100,76,.45); color:var(--terra); }
.kh-teaser .kh-arr { color:rgba(204,100,76,.4); }
.kh-teaser .btn-outline { border-color:rgba(204,100,76,.5) !important; color:var(--terra) !important; }
.kh-teaser .btn-outline:hover { background:var(--terra); color:#fff !important; }

/* ═══════════════════════════════════════════════════════
   INSTAGRAM — cleaner
═══════════════════════════════════════════════════════ */
.ig-section {
  background:var(--white) !important;
  text-align:center;
}
.ig-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:4px;
  max-width:600px;
  margin:16px auto 0;
}
@media (min-width:600px) {
  .ig-grid { grid-template-columns:repeat(6, 1fr); max-width:800px; }
}

/* ═══════════════════════════════════════════════════════
   CONTACT — verfijnd
═══════════════════════════════════════════════════════ */
.section:has(.contact-wrap) {
  background:var(--cream-bg);
}
.contact-form {
  margin-top:20px;
}

/* ═══════════════════════════════════════════════════════
   FRAUD WARNING POPUP
═══════════════════════════════════════════════════════ */
.fraud-overlay {
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:fadeIn .3s ease-out;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fraud-popup {
  background:white;
  border-radius:16px;
  padding:36px 28px 28px;
  max-width:460px;
  width:100%;
  text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,.25);
  animation:popIn .35s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes popIn { from { opacity:0; transform:scale(.9) translateY(20px); } to { opacity:1; transform:none; } }
.fraud-icon {
  font-size:42px;
  margin-bottom:14px;
}
.fraud-title {
  font-size:18px;
  font-weight:600;
  color:var(--dark);
  margin-bottom:14px;
  line-height:1.3;
}
.fraud-text {
  font-size:13px;
  color:var(--muted);
  line-height:1.75;
  margin-bottom:12px;
}
.fraud-text strong {
  color:var(--dark);
  font-weight:600;
}
.fraud-btn {
  display:inline-block;
  margin-top:10px;
  padding:14px 36px;
  background:var(--terra);
  color:white;
  border:none;
  border-radius:var(--radius-md);
  font-size:13px;
  font-family:inherit;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s, transform .15s;
}
.fraud-btn:hover {
  background:#a04030;
  transform:translateY(-1px);
}
.fraud-btn:active {
  transform:translateY(0);
}

/* ═══════════════════════════════════════════════════════
   IN ONTWIKKELING BALK
═══════════════════════════════════════════════════════ */
.dev-banner {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:9999;
  background:var(--dark);
  color:rgba(255,255,255,.85);
  font-size:11px;
  letter-spacing:.05em;
  padding:10px 44px 10px 16px;
  text-align:center;
  line-height:1.5;
}
.dev-banner strong {
  color:white;
}
.dev-close {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:rgba(255,255,255,.5);
  font-size:16px;
  cursor:pointer;
  padding:4px 8px;
  transition:color .2s;
}
.dev-close:hover {
  color:white;
}

/* ═══════════════════════════════════════════════════════
   MELDINGEN (eerlijk: functie nog in opbouw)
═══════════════════════════════════════════════════════ */
.notice {
  display:flex; gap:10px; align-items:flex-start;
  background:#fbf1ec;
  border:1px solid rgba(204,100,76,.22);
  border-radius:var(--radius-md);
  padding:14px 16px;
  margin-bottom:16px;
}
.notice-icon { font-size:15px; line-height:1.5; flex-shrink:0; }
.notice p { font-size:12.5px; line-height:1.65; color:#7a5c54; margin:0; }

/* ═══════════════════════════════════════════════════════
   KEUZEHULP RESULTAAT — advies, onderbouwing & alternatieven
═══════════════════════════════════════════════════════ */
.kh-result-advice {
  font-size:13px; font-weight:600; color:var(--terra);
  margin:2px 0 10px;
}
.kh-reasoning {
  margin:0 22px 24px;
  background:var(--cream-bg);
  border-radius:var(--radius-lg);
  padding:18px 20px;
}
.kh-reasoning p { font-size:13.5px; line-height:1.75; color:var(--text); margin:0; }
.kh-reasoning .kh-trad {
  margin-top:10px; font-size:12.5px; color:var(--muted); font-style:italic;
}
.kh-alts { margin:0 22px 28px; }
.kh-alts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kh-alt-card {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:16px 8px; border-radius:var(--radius-md);
  background:#fff; border:1px solid rgba(42,31,28,.08);
  cursor:pointer; transition:box-shadow .2s, transform .2s; text-align:center;
}
.kh-alt-card:hover { box-shadow:0 8px 22px rgba(42,31,28,.10); transform:translateY(-2px); }
.kh-alt-dot {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
}
.kh-alt-name { font-size:12px; font-weight:600; color:var(--text); line-height:1.2; }
.kh-alt-tone { font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.kh-disclaimer {
  margin:0 22px 8px; font-size:12px; line-height:1.7; color:var(--muted);
  text-align:center;
}
@media (min-width:640px){
  .kh-disclaimer { max-width:520px; margin-left:auto; margin-right:auto; }
}

/* ═══════════════════════════════════════════════════════
   PRODUCTFOTO op detailpagina
═══════════════════════════════════════════════════════ */
.pd-main-photo {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:var(--radius-lg);
}

/* ═══════════════════════════════════════════════════════
   SHOPGRID — nettere kolommen op desktop
   (gerichte id-override; wint van eerdere volgorde)
═══════════════════════════════════════════════════════ */
#shopGrid { grid-template-columns:1fr 1fr; gap:14px; }
@media (min-width:700px)  { #shopGrid { grid-template-columns:repeat(3,1fr); gap:18px; } }
@media (min-width:1000px) { #shopGrid { grid-template-columns:repeat(4,1fr); gap:20px; } }

/* ═══════════════════════════════════════════════════════
   INSTAGRAM — officiële post-embeds (responsive raster)
═══════════════════════════════════════════════════════ */
.ig-embeds {
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  max-width:540px;
  margin:24px auto 0;
}
.ig-embeds .instagram-media {
  min-width:0 !important;
  width:100% !important;
  margin:0 auto !important;
}
@media (min-width:760px) {
  .ig-embeds { grid-template-columns:1fr 1fr; max-width:1080px; gap:24px; }
}
@media (min-width:1100px) {
  .ig-embeds { grid-template-columns:1fr 1fr 1fr; max-width:1080px; }
}

/* ═══════════════════════════════════════════════════════
   INSTAGRAM — eigen gallerij in de huisstijl
═══════════════════════════════════════════════════════ */
.ig-gallery {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  max-width:1000px;
  margin:28px auto 0;
}
@media (min-width:760px) {
  .ig-gallery { grid-template-columns:repeat(3,1fr); gap:16px; }
}
.ig-card {
  position:relative;
  display:block;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--cream);
  box-shadow:0 8px 24px rgba(42,31,28,.08);
}
.ig-card img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .6s var(--ease-out);
}
.ig-card:hover img { transform:scale(1.06); }
.ig-card-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  padding:14px; text-align:center;
  color:#fff;
  background:linear-gradient(to top, rgba(140,52,36,.62), rgba(140,52,36,.14));
  opacity:0;
  transition:opacity .35s var(--ease-out);
}
.ig-card:hover .ig-card-overlay { opacity:1; }
.ig-card-overlay::before {
  content:'';
  width:32px; height:32px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.1' fill='white' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ig-card-cta {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
}
/* Lege staat: nette tegel in de huisstijl zolang de foto er nog niet is */
.ig-card--empty img { display:none; }
.ig-card--empty {
  background:linear-gradient(135deg, #fdf8f4, #f3e7e1);
}
.ig-card--empty .ig-card-overlay {
  opacity:1; background:none; color:var(--terra);
}
.ig-card--empty .ig-card-overlay::before {
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cc644c' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.1' fill='%23cc644c' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Volg-knop */
.ig-follow {
  display:inline-block;
  margin:28px auto 0;
  padding:13px 30px;
  border:1.5px solid rgba(204,100,76,.5);
  border-radius:100px;
  color:var(--terra);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  text-decoration:none;
  transition:background .25s, color .25s;
}
.ig-follow:hover { background:var(--terra); color:#fff; }

/* ═══════════════════════════════════════════════════════
   JURIDISCHE PAGINA'S — privacy & voorwaarden
═══════════════════════════════════════════════════════ */
.legal {
  padding:28px 22px 56px;
  max-width:680px;
  margin:0 auto;
}
.legal-title {
  font-size:28px; font-weight:500;
  color:var(--dark); line-height:1.2;
  margin:6px 0 12px;
}
.legal-intro {
  font-size:15px; color:var(--text);
  line-height:1.85; margin-bottom:8px;
}
.legal-updated {
  font-size:12px; color:var(--muted);
  margin-bottom:24px;
}
.legal-h {
  font-size:16px; font-weight:600;
  color:var(--dark);
  margin:28px 0 8px;
}
.legal-p {
  font-size:14.5px; color:var(--text);
  line-height:1.85; margin-bottom:12px;
}
.legal-fill {
  background:rgba(204,100,76,.12);
  color:var(--terra);
  padding:1px 7px; border-radius:5px;
  font-size:13.5px;
}
@media (min-width:600px) { .legal { padding:36px 40px 64px; } }
@media (min-width:900px) { .legal { padding:44px 0 72px; } }

/* Footer: klikbare juridische links */
.footer-legal { cursor:pointer; transition:color .2s; }
.footer-legal:hover { color:var(--cream); text-decoration:underline; }

/* ═══════════════════════════════════════════════════════
   BEZOEK ONS — kaart, openingstijden, route
═══════════════════════════════════════════════════════ */
.visit-wrap {
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  max-width:1000px;
}
@media (min-width:820px) {
  .visit-wrap { grid-template-columns:1.25fr 1fr; align-items:stretch; }
}
.visit-map {
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(42,31,28,.10);
  background:var(--cream);
  min-height:280px;
}
.visit-map iframe {
  width:100%; height:100%; min-height:280px;
  border:0; display:block;
}
.visit-info {
  background:#fff;
  border:1px solid rgba(42,31,28,.07);
  border-radius:var(--radius-lg);
  padding:26px 26px 28px;
  box-shadow:0 8px 24px rgba(42,31,28,.06);
  display:flex; flex-direction:column; gap:18px;
  align-items:flex-start;
}
.visit-address {
  font-size:16px; font-weight:500; color:var(--dark); line-height:1.5;
}
.visit-hours { width:100%; }
.visit-hours-row {
  display:flex; justify-content:space-between;
  font-size:13.5px; color:var(--text);
  padding:6px 0;
  border-bottom:1px solid rgba(193,146,135,.14);
}
.visit-hours-row:last-child { border-bottom:none; }
.visit-hours-row span:first-child { color:var(--muted); }