/* ==========================================================================
   Lettertypes (zelf gehost in /fonts)
   ========================================================================== */

@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/playfair-display-sc-latin-ext-400.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/playfair-display-sc-latin-400.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Quicksand Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/fonts/quicksand-latin-ext.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Quicksand Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/fonts/quicksand-latin.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/fonts/playfair-display-latin-ext.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/fonts/playfair-display-latin.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Steff's D. Team — globale stijlen
   Waarden zijn 1-op-1 overgenomen uit de Elementor-kit van de oude site.
   ========================================================================== */

:root {
  /* Kleuren */
  --cream: #faf3e4;
  --charcoal: #2b2b2b;
  --black: #000000;
  --gold: #bfa05a;
  --grey: #666666;
  --white: #ffffff;
  --sand: #d9d2c4;

  /* Lettertypes */
  --font-display: 'Playfair Display SC', serif;
  --font-body: 'Quicksand Variable', 'Quicksand', sans-serif;
  /* Op de oude site laadde "Playfair" nooit (kapotte staging-URL), dus bezoekers zagen
     het standaard schreefloze lettertype. Dat nemen we zo over. Wil je het bedoelde
     lettertype? Zet dit op 'Playfair Variable', serif (het pakket is al geïnstalleerd). */
  --font-accent: sans-serif;
  --font-serif: 'Playfair Display Variable', 'Playfair Display', serif;

  /* Vloeiende lettergroottes (zelfde clamp-waarden als in Elementor) */
  --fs-title: clamp(1.5rem, -2.9854rem + 9.3567vw, 4.5rem);
  --fs-subtitle: clamp(1.25rem, 0.1287rem + 2.3392vw, 2rem);
  --fs-body: clamp(0.875rem, 0.6881rem + 0.3899vw, 1rem);
  --fs-accent: clamp(0.875rem, 0.3143rem + 1.1696vw, 1.25rem);
  --fs-lead: clamp(1.2rem, 0.6881rem + 0.3899vw, 1.5rem);
  --fs-serif: clamp(1.25rem, 1.0428rem + 0.884vw, 1.75rem);

  --container: 1280px;
  --header-height: 61px;
}

/* ---------- Basis ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 400;
  line-height: inherit;
}

h1,
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
}

p {
  margin-block: 0 0.9rem;
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
  vertical-align: middle;
}

a {
  color: var(--gold);
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: var(--sand);
}

strong,
b {
  font-weight: bolder;
}

ul {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout-hulpjes ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

@media (max-width: 1024px) {
  :root {
    --container: 1024px;
  }
}

@media (max-width: 767px) {
  :root {
    --container: 767px;
  }
}

/* Typografische rollen */
.title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
}

.subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  font-weight: 400;
}

.accent {
  font-family: var(--font-accent);
  font-size: var(--fs-accent);
  font-weight: 400;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
}

/* Hero-titels van de subpagina's */
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--black);
  text-align: center;
}

@media (max-width: 1024px) {
  .page-title {
    font-size: 52px;
  }
}

@media (max-width: 767px) {
  .page-title {
    font-size: 48px;
  }
}

/* ---------- Knoppen ---------- */

.button {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid var(--charcoal);
  border-radius: 99px;
  background-color: var(--charcoal);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.button:hover,
.button:focus-visible {
  background-color: transparent;
  color: var(--charcoal);
}

/* Lichte knop met grijze rand (bv. "Over ons") */
.button--light {
  background-color: var(--cream);
  border-color: var(--grey);
  color: var(--black);
}

.button--light:hover,
.button--light:focus-visible {
  background-color: var(--charcoal);
  color: var(--cream);
}

/* ---------- Entree-animaties (zoals Elementor) ---------- */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* Alleen verbergen als JavaScript actief is, zodat inhoud altijd zichtbaar blijft */
.js [data-animate]:not(.is-animated) {
  visibility: hidden;
}

.is-animated {
  animation-duration: 1.25s;
  animation-name: var(--animation);
}

.is-animated[data-speed='slow'] {
  animation-duration: 2s;
}

/* Parallax bij scrollen (zoals Elementor Motion Effects) */
[data-parallax] {
  transition: transform 1s cubic-bezier(0, 0.33, 0.07, 1.03);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-animate]:not(.is-animated) {
    visibility: visible;
  }

  .is-animated {
    animation: none;
  }

  [data-parallax] {
    transform: none !important;
    transition: none;
  }
}

/* ==========================================================================
   Paginatransitie
   ========================================================================== */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--charcoal);
  transition:
    opacity 0.5s,
    visibility 0.5s;
}

.page-transition img {
  width: 20%;
}

.page-transition.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.page-transition.is-leaving {
  opacity: 1;
  visibility: visible;
}

/* Zonder JavaScript nooit een overlay tonen */
html:not(.js) .page-transition {
  display: none;
}

@media (max-width: 767px) {
  .page-transition img {
    width: 54%;
  }
}

/* ==========================================================================
   Header en mobiel menu
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 999;
  padding-block: 8px;
}

.header-inner {
  display: flex;
  align-items: center;
  min-height: 45px;
}

.header-brand {
  flex: 0 1 20%;
  min-width: 0;
}

.brand-link {
  font-family: var(--font-body);
  font-size: var(--fs-subtitle);
  color: var(--black);
}

.header-nav {
  flex: 0 1 100%;
  min-width: 0;
}

.header-nav ul {
  display: flex;
  justify-content: center;
  padding: 0;
  list-style: none;
}

.header-contact {
  flex: 0 1 20%;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.nav-link {
  display: block;
  padding: 13px 20px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: normal;
  color: var(--black);
  transition:
    transform 0.3s,
    color 0.3s;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  color: var(--gold);
}

.nav-link:hover,
.nav-link:focus-visible {
  transform: translateY(-8px);
}

/* ---------- Hamburger + volledig scherm menu (tablet & mobiel) ---------- */

.menu-toggle,
.mobile-menu {
  display: none;
}

@media (max-width: 1024px) {
  .site-header {
    padding-block: 0;
  }

  .header-inner {
    justify-content: space-between;
    min-height: 61px;
    padding-inline: 24px;
  }

  .header-nav,
  .header-contact {
    display: none;
  }

  .menu-toggle {
    position: relative;
    z-index: 101;
    display: block;
    align-self: flex-end;
    width: 24px;
    height: 38px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .hamburger {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
  }

  .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--charcoal);
    transform-origin: 50% 50%;
    transition:
      all 0.1s 0.2s ease,
      transform 0.2s ease;
  }

  .hamburger span:nth-child(2) {
    transform: translate(0, 6px);
  }

  .hamburger span:nth-child(3) {
    transform: translate(0, 12px);
  }

  .menu-toggle[aria-expanded='true'] .hamburger span {
    background: var(--white);
    transition:
      all 0.1s ease,
      transform 0.1s 0.2s ease;
  }

  .menu-toggle[aria-expanded='true'] .hamburger span:first-child {
    opacity: 0;
  }

  .menu-toggle[aria-expanded='true'] .hamburger span:nth-child(2) {
    transform: translate(0, 6px) rotate(45deg);
  }

  .menu-toggle[aria-expanded='true'] .hamburger span:nth-child(3) {
    transform: translate(0, 4px) rotate(-45deg);
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.2s,
      visibility 0s 0.2s;
  }

  .mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s;
  }

  .mobile-menu-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 100vh;
    padding: 48px 16px;
    background-color: var(--charcoal);
  }

  .mobile-menu-logo {
    width: 33px;
    margin-bottom: 12px;
  }

  .mobile-menu-divider {
    width: 80%;
    margin: 15px auto;
    border: 0;
    border-top: 1px solid var(--sand);
  }

  .mobile-menu nav ul {
    padding: 0;
    list-style: none;
    text-align: center;
  }

  .mobile-menu nav li + li {
    margin-top: 16px;
  }

  .mobile-menu nav a {
    display: block;
    padding: 13px 20px;
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: 20px;
    color: var(--white);
    transition: color 0.3s;
  }

  .mobile-menu nav a:hover,
  .mobile-menu nav a:focus-visible,
  .mobile-menu nav a.is-active {
    color: var(--gold);
  }
}

@media (max-width: 767px) {
  .header-inner {
    padding-inline: 16px;
  }

  .menu-toggle {
    margin-bottom: 8px;
  }

  .mobile-menu-divider {
    width: 70%;
    margin-block: 12px;
  }

  .mobile-menu nav a {
    font-size: 34px;
  }
}

/* ==========================================================================
   Sociale iconen
   ========================================================================== */

/* Standaard: zoals in het mobiele menu (32px icoon, 16px rand) */
.social {
  --icon-size: 32px;
  --icon-padding: 16px;
  --icon-gap: 4px;
  display: flex;
  gap: var(--icon-gap);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: flex;
  padding: var(--icon-padding);
  color: var(--cream);
  transition: color 0.3s;
}

.social svg {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: currentColor;
}

.social a:hover,
.social a:focus-visible {
  color: var(--gold);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--charcoal);
  color: var(--cream);
}

/* Boven/onder: 5% en 3% van de binnenbreedte, zoals op de oude site */
.footer-main {
  padding: 4.5vw 5% 2.7vw;
}

@media (min-width: 1440px) {
  .footer-main {
    padding-block: 64px 38px;
  }
}

.footer-grid {
  display: flex;
}

.footer-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.footer-logo img {
  width: 65px;
}

.footer-heading {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  color: var(--cream);
}

.footer-list {
  padding: 0;
  list-style: none;
}

.footer-list li + li {
  margin-top: 8px;
}

.footer-nav li + li {
  margin-top: 6px;
}

.footer-nav a {
  display: block;
  line-height: normal;
}

.footer-list a {
  color: var(--cream);
  transition: color 0.3s;
}

.footer-list a:hover,
.footer-list a:focus-visible,
.footer-list a.is-active {
  color: var(--gold);
}

.footer-col .footer-social {
  --icon-size: 28px;
  --icon-padding: 4px;
  --icon-gap: 8px;
  justify-content: flex-start;
}

.footer-award {
  margin-top: 16px;
  color: var(--cream);
}

.footer-badge {
  width: 29px;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding-bottom: 12px;
}

.footer-bottom hr {
  width: 100%;
  margin: 0;
  padding-block: 2px;
  border: 0;
  background: linear-gradient(var(--sand), var(--sand)) center / 100% 1px no-repeat;
}

.footer-legal {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.footer-legal p {
  margin: 0;
  color: var(--sand);
  text-align: center;
}

.footer-legal a {
  color: var(--sand);
}

.footer-legal a:hover {
  color: var(--gold);
}

@media (max-width: 1024px) {
  .footer-grid {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
  }

  .footer-col {
    flex: 0 1 25%;
  }

  .footer-logo {
    flex-basis: 100%;
    align-items: center;
  }

  .footer-logo img {
    width: 25px;
  }

  .footer-col .footer-social {
    --icon-size: 24px;
  }

  .footer-badge {
    width: 25%;
  }
}

@media (max-width: 767px) {
  .footer-main {
    padding: 24px 16px 8px;
  }

  .footer-grid {
    flex-direction: column;
  }

  .footer-col {
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .footer-logo img {
    width: 30px;
  }

  .footer-badge {
    width: 49px;
  }

  .footer-col .footer-social {
    --icon-padding: 8px;
    --icon-gap: 4px;
    justify-content: center;
  }

  .footer-bottom {
    align-items: flex-start;
    gap: 8px;
    padding: 5%;
  }

  .footer-legal {
    width: 100%;
    gap: 12px;
  }
}

/* ==========================================================================
   Hero met tekst (Pers, Looks, Contact, Privacy)
   ========================================================================== */

.text-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--min-height);
  margin-top: calc(var(--header-height) * -1);
}

.text-hero-inner {
  display: flex;
  flex-direction: column;
}

.text-hero-text {
  align-self: center;
  width: var(--text-width);
  padding-top: 16px;
  text-align: center;
}

@media (max-width: 1024px) {
  .text-hero-text {
    width: var(--text-width-tablet);
  }
}

@media (max-width: 767px) {
  .text-hero-inner {
    padding-inline: 16px;
  }

  .text-hero-text {
    width: var(--text-width-mobile);
    padding-top: 8px;
  }
}

/* ==========================================================================
   Hero met foto (Over ons, Producten)
   ========================================================================== */

.image-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 110vh;
  margin-top: calc(var(--header-height) * -1);
}

.image-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
}

.image-hero-photo {
  text-align: center;
}

.image-hero-photo img {
  width: var(--image-width);
}

.image-hero-text {
  align-self: center;
  width: 30%;
  padding-top: 8px;
  text-align: center;
}

@media (max-width: 1024px) {
  .image-hero-photo img {
    width: 50%;
  }

  .image-hero-text {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .image-hero {
    min-height: 100vh;
  }

  .image-hero-inner {
    margin-top: calc(var(--header-height) * -1);
    padding-bottom: 0;
  }

  .image-hero-photo img {
    width: 70%;
  }

  .image-hero-text {
    width: 90%;
  }
}

/* ==========================================================================
   Accordeon
   ========================================================================== */

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

.accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--sand);
  color: #1f2124;
  cursor: pointer;
  list-style: none;
}

.accordion-title::-webkit-details-marker {
  display: none;
}

.accordion-question {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--black);
}

.accordion-icon svg {
  display: block;
  width: auto;
  height: 15px;
  fill: currentColor;
}

.accordion-item .icon-open,
.accordion-item[open]:not(.is-closing) .icon-closed {
  display: none;
}

.accordion-item[open]:not(.is-closing) .icon-open {
  display: block;
}

.accordion-content {
  overflow: hidden;
}

.accordion-answer {
  padding-top: 12px;
  color: var(--grey);
}

/* ==========================================================================
   Masonry-galerij en lightbox
   ========================================================================== */

/* ---------- Masonry ---------- */

.masonry {
  --columns: 4;
  --gap: 16px;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gap);
  align-items: start;
  width: 100%;
}

/* Met JavaScript: absolute posities per kolom */
.masonry.is-ready {
  position: relative;
  display: block;
}

.masonry.is-ready .masonry-item {
  position: absolute;
  top: 0;
  left: 0;
}

.masonry-item {
  position: relative;
  display: block;
  overflow: hidden;
}

.masonry-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.masonry-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.8s;
}

.masonry-item:hover .masonry-overlay,
.masonry-item:focus-visible .masonry-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 1024px) {
  .masonry {
    --columns: 3;
    --gap: 12px;
  }
}

@media (max-width: 767px) {
  .masonry {
    --columns: 2;
    --gap: 8px;
  }
}

/* ---------- Lightbox ---------- */

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.8);
  color: var(--white);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 15px;
}

.lightbox-actions {
  display: flex;
  gap: 4px;
}

.lightbox button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.lightbox button:hover {
  color: var(--white);
}

.lightbox-header svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.lightbox-nav {
  z-index: 1;
  height: 100%;
  width: 10%;
}

.lightbox-nav svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}

.lightbox-figure {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

.lightbox-image {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
}

@media (max-width: 767px) {
  .lightbox-nav {
    position: absolute;
    top: 50%;
    height: auto;
    width: auto;
    transform: translateY(-50%);
  }

  .lightbox-prev {
    left: 0;
  }

  .lightbox-next {
    right: 0;
  }
}

/* ==========================================================================
   Contactformulier
   ========================================================================== */

.contact-form {
  display: flex;
  flex-wrap: wrap;
  width: calc(min(1101px, 100%) + 12px);
  margin-inline: -6px;
}

.field {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  margin-bottom: 12px;
  padding-inline: 6px;
}

.field--half {
  flex-basis: 50%;
}

.contact-form label {
  padding-bottom: 8px;
  color: var(--black);
}

.contact-form label.required::after {
  content: '*';
  margin-left: 3px;
  color: #ff0000;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 47px;
  padding: 6px 16px;
  border: 1px solid #bbb5a8;
  border-radius: 4px;
  background-color: var(--sand);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.15;
  accent-color: var(--gold);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 0;
}

.contact-form textarea {
  resize: vertical;
}

.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field--submit {
  align-items: center;
}

.submit {
  padding: 10px 48px;
  border: 0;
  border-radius: 99px;
  background-color: var(--charcoal);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.submit:hover,
.submit:focus-visible {
  background-color: var(--sand);
  color: var(--black);
}

.submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.form-message {
  flex-basis: 100%;
  margin: 12px 6px 0;
  text-align: center;
}

.form-message[data-type='success'] {
  color: #5cb85c;
}

.form-message[data-type='error'] {
  color: #d9534f;
}

@media (max-width: 767px) {
  .field--half {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   Pagina: home
   ========================================================================== */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  margin-top: calc(var(--header-height) * -1);
}

/* Logo als zacht herhalend patroon op de achtergrond */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/media/Logo_KapsalonSteff-e1770387327636.png') center / contain repeat-x;
  opacity: 0.05;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-title {
  align-self: center;
  width: 50%;
  margin-top: var(--header-height);
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--white);
  text-align: center;
  mix-blend-mode: difference;
}

.hero-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-image {
  text-align: center;
}

.hero-image img {
  width: 27%;
  filter: brightness(101%) contrast(77%) saturate(102%);
}

.hero-text {
  align-self: center;
  width: 30%;
  margin-top: 16px;
  text-align: center;
}

@media (min-width: 1025px) {
  .hero::before {
    background-attachment: fixed;
  }
}

@media (max-width: 1024px) {
  .hero-title {
    margin-top: 0;
  }

  .hero-image img {
    width: 40%;
  }

  .hero-text {
    width: 35%;
  }
}

@media (max-width: 767px) {
  .hero-inner {
    padding-inline: 16px;
  }

  .hero-title {
    width: 100%;
    font-size: 39px;
  }

  .hero-image img {
    width: 75%;
  }

  .hero-text {
    width: 75%;
  }
}

/* ---------- Collages (salon & team) ---------- */

.collage {
  display: flex;
}

/* Elke kolom is een verticale flexbox; de foto staat horizontaal gecentreerd */
.collage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.collage-item--left {
  flex: 0 1 40%;
  z-index: 1;
  margin-right: -100px;
}

.collage-item--center {
  flex: 0 1 100%;
}

.collage-item--right {
  flex: 0 1 40%;
  margin-left: -200px;
}

/* ---------- Salon ---------- */

.salon {
  min-height: 140vh;
  background-color: var(--charcoal);
}

.collage--salon {
  min-height: 90vh;
}

.collage--salon .collage-item {
  justify-content: center;
}

.collage--salon .collage-item--center img {
  width: 100%;
}

.collage--salon .collage-item--left {
  margin-top: 200px;
}

.collage--salon .collage-item--right {
  margin-top: 300px;
}

.salon-intro {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.salon-intro > p {
  align-self: center;
  width: 90%;
  color: var(--white);
  text-align: center;
}

.brands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 32px 0 48px;
  list-style: none;
}

.brands li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brands a {
  display: flex;
  justify-content: center;
}

.brands img {
  width: 50%;
  max-width: 30vw;
  filter: brightness(103%) contrast(0%) saturate(100%);
}

.brands img.contain {
  height: 15vh;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .salon {
    min-height: 0;
    padding-inline: 16px;
  }

  .collage--salon {
    min-height: 65vh;
  }

  .collage--salon .collage-item--left {
    margin-top: 150px;
  }

  .collage--salon .collage-item--right {
    margin-top: 100px;
  }
}

@media (max-width: 767px) {
  .collage {
    flex-wrap: wrap;
  }

  .collage-item {
    flex: 0 1 100%;
    margin: 0;
  }

  .collage-item--center {
    display: none;
  }

  .collage--salon {
    min-height: 0;
  }

  .collage--salon .collage-item--left {
    margin: 48px 0 -150px;
    align-items: flex-start;
  }

  .collage--salon .collage-item--left img {
    width: 55%;
  }

  .collage--salon .collage-item--right {
    align-items: flex-end;
    margin-top: 0;
  }

  .collage--salon .collage-item--right img {
    width: 50%;
  }

  .salon-intro {
    margin-top: 32px;
  }

  .salon-intro > p {
    width: 100%;
    text-align: justify;
  }

  .brands {
    gap: 0;
    padding: 0;
  }

  .brands li:nth-child(1) img {
    width: 60%;
    max-width: 60%;
  }

  .brands li:nth-child(2) img {
    width: 80%;
    max-width: 80%;
  }

  .brands li:nth-child(3) img {
    width: 40%;
    max-width: 40%;
  }

  .brands li:nth-child(4) img {
    width: 70%;
    max-width: 70%;
  }
}

/* ---------- Diensten ---------- */

.services {
  display: flex;
  gap: 32px;
  min-height: 55vh;
  margin-block: 100px;
}

.service {
  position: relative;
  display: flex;
  flex: 0 1 25%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  background: var(--image) var(--position) / cover no-repeat;
}

.service::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(198deg, #66666626 50%, var(--charcoal) 78%);
  opacity: 0.94;
}

.service-title,
.service-text {
  position: relative;
  color: var(--white);
}

.service-title {
  margin-left: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
}

.service-text {
  margin: 0 6px 30.4px 16px;
}

@media (max-width: 1024px) {
  .services {
    gap: 12px;
    min-height: 35vh;
    padding-inline: 16px;
  }

  .service-title {
    margin-left: 8px;
  }

  .service-text {
    margin: 0 8px 22.4px 8px;
  }
}

@media (max-width: 767px) {
  .services {
    flex-wrap: wrap;
    gap: 16px;
    margin-block: 48px 0;
  }

  .service {
    flex-basis: 100%;
    min-height: 30vh;
  }
}

/* ---------- Wie we zijn ---------- */

.about {
  display: flex;
  justify-content: center;
  padding-top: 64px;
}

.about-inner {
  display: flex;
  flex: 0 1 80%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.about-text {
  width: 90%;
  text-align: center;
}

.about-button {
  position: relative;
  z-index: 10;
}

@media (max-width: 1024px) {
  .about {
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .about {
    padding: 48px 16px 0;
  }

  .about-inner {
    flex-basis: 100%;
    align-items: flex-start;
    gap: 8px;
  }

  .about-inner h2 {
    margin-bottom: 4px;
  }

  .about-text {
    width: 100%;
    text-align: justify;
  }

  .about-button {
    padding: 8px 24px;
  }
}

/* ---------- Team ---------- */

.team {
  margin-top: -42px;
}

.collage--team {
  align-items: flex-start;
  min-height: 90vh;
}

.collage--team .collage-item--center img {
  margin-top: 150px;
}

.collage--team .collage-item--right {
  margin-top: 50px;
}

@media (max-width: 1024px) {
  .team {
    margin-top: 0;
    padding-inline: 16px;
  }

  .collage--team {
    min-height: 65vh;
  }
}

@media (max-width: 767px) {
  .team {
    padding-bottom: 32px;
  }

  .collage--team {
    min-height: 0;
  }

  /* Zoals op de oude site: de linkerfoto zweeft over de rechter en telt niet mee voor de hoogte */
  .collage--team {
    position: relative;
  }

  .collage--team .collage-item--left {
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    align-items: flex-start;
  }

  .collage--team .collage-item--left img {
    width: 50%;
  }

  .collage--team .collage-item--right {
    z-index: 1;
    align-items: flex-end;
    margin-top: 0;
  }

  .collage--team .collage-item--right img {
    width: 52.5%;
  }
}

/* ==========================================================================
   Pagina: over ons
   ========================================================================== */

/* ---------- Het verhaal ---------- */

.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0 60px;
  background-color: var(--charcoal);
}

.story-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 85%;
  padding-bottom: 48px;
}

.story-logo {
  width: 2%;
}

.story-heading h2 {
  color: var(--white);
  text-align: center;
}

.story-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.story-badge {
  text-align: center;
}

.story-badge img {
  width: 98px;
}

.story-text {
  width: 80%;
  color: var(--white);
  text-align: center;
}

@media (max-width: 1024px) {
  .story {
    padding: 32px 16px;
  }

  .story-heading {
    padding-bottom: 24px;
  }

  .story-logo {
    width: 4%;
  }

  .story-body {
    gap: 24px;
  }

  .story-photo {
    margin-bottom: 12px;
  }

  .story-text {
    width: 90%;
    text-align: justify;
  }
}

@media (max-width: 767px) {
  .story-heading {
    gap: 16px;
    width: 100%;
    padding-bottom: 16px;
  }

  /* Op mobiel krimpt het logo mee met zijn eigen breedte (10% van 167px) */
  .story-logo {
    width: 17px;
  }

  .story-body {
    gap: 16px;
  }

  .story-photo {
    margin-bottom: 0;
    padding-bottom: 8px;
  }

  .story-badge img {
    width: 69px;
  }

  .story-text {
    width: 100%;
  }
}

/* ---------- Veelgestelde vragen ---------- */

.faq {
  margin: 80px 0 60px;
}

.faq-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
  margin-inline: auto;
}

.faq-title {
  text-align: center;
}

@media (max-width: 1024px) {
  .faq {
    margin: 48px 0 32px;
    padding-inline: 16px;
  }

  .faq-inner {
    align-items: center;
  }

  .faq-inner .accordion {
    width: 85%;
  }
}

@media (max-width: 767px) {
  .faq {
    margin-block: 32px;
  }

  .faq-inner {
    gap: 16px;
  }

  .faq-inner .accordion {
    width: 100%;
  }
}

/* ==========================================================================
   Pagina: producten
   ========================================================================== */

/* ---------- Boekje ---------- */

.booklet {
  padding: 80px 32px 60px;
  background-color: var(--charcoal);
}

.booklet-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.booklet h2 {
  color: var(--white);
}

.booklet p {
  width: 70%;
  color: var(--white);
  text-align: center;
}

.booklet-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background-color: var(--cream);
  color: var(--black);
}

.booklet-button svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.booklet-button:hover,
.booklet-button:focus-visible {
  background-color: var(--sand);
  color: var(--black);
}

@media (max-width: 767px) {
  .booklet {
    padding: 32px 16px;
  }

  .booklet h2 {
    text-align: center;
  }
}

/* ---------- Twee huizen ---------- */

.houses {
  padding: 80px 32px 160px;
}

.houses-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.houses-title {
  flex-basis: 100%;
  padding-bottom: 32px;
}

.house {
  display: flex;
  flex: 0 1 45%;
  flex-direction: column;
  gap: 2px;
  border-left: 4px solid var(--gold);
}

.house > * {
  margin-left: 12px;
}

.house-name {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1;
}

.house-focus {
  color: var(--gold);
}

.house-text {
  margin-top: 8px;
}

@media (max-width: 767px) {
  .houses {
    padding: 32px 16px;
  }

  .house {
    flex-basis: 100%;
  }

  .house + .house {
    margin-top: 16px;
  }
}

/* ---------- Productfoto's ---------- */

.product-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.product-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.8s;
}

.product-photo:hover .product-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 1024px) {
  .product-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .product-gallery {
    gap: 4px;
    min-height: 35vh;
    padding-bottom: 32px;
  }
}

/* ==========================================================================
   Pagina: looks
   ========================================================================== */

.looks {
  padding-top: 80px;
  background-color: var(--charcoal);
}

.looks-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.looks-button {
  position: relative;
  z-index: 10;
  margin: 32px 0;
  border-color: var(--grey);
  background-color: var(--sand);
  color: var(--black);
}

.looks-button:hover,
.looks-button:focus-visible {
  background-color: var(--charcoal);
  color: var(--cream);
}

@media (max-width: 1024px) {
  .looks {
    padding: 48px 16px 0;
  }
}

@media (max-width: 767px) {
  .looks {
    padding-top: 32px;
  }

  .looks-button {
    margin: 44px 0 16px;
  }
}

/* ==========================================================================
   Pagina: pers
   ========================================================================== */

.press {
  padding-top: 32px;
  background-color: var(--charcoal);
}

.press--first {
  padding-top: 80px;
}

.press-row {
  display: flex;
  justify-content: center;
}

.press-card {
  position: relative;
  display: flex;
  flex: 0 1 30%;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  overflow: hidden;
}

/* Donkere gloed bij hover */
.press-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #424242;
  opacity: 0;
  transition: opacity 0.3s;
}

.press-card:hover::before,
.press-card:focus-visible::before {
  opacity: 0.5;
}

.press-card > * {
  position: relative;
}

.press-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.press-date {
  line-height: 1.25;
  color: var(--cream);
}

.press-title {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  color: var(--cream);
}

@media (max-width: 1024px) {
  .press {
    padding: 16px 16px 32px;
  }

  .press--first {
    padding: 48px 16px 0;
  }

  .press-card {
    flex-basis: 45%;
    padding: 16px;
  }
}

@media (max-width: 767px) {
  .press {
    padding: 12px 16px 24px;
  }

  .press--first {
    padding: 32px 16px 0;
  }

  .press-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .press-card {
    flex-basis: 100%;
    padding: 8px;
  }

  /* Zoals op de oude site: enkel de eerste foto toont op mobiel in volle verhouding */
  .press--first .press-card:first-child img {
    height: auto;
  }

  .press-date {
    line-height: 1.15;
  }
}

/* ==========================================================================
   Pagina: contact (afspraak)
   ========================================================================== */

/* ---------- Afspraak maken ---------- */

.booking {
  padding: 80px 0;
  background-color: var(--charcoal);
}

.booking-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 720px;
  max-width: 80%;
  margin: 48px auto 0;
  color: var(--white);
  text-align: center;
}

.booking-inner h2 {
  color: var(--white);
}

.booking-button {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 5px;
  border-color: var(--grey);
  background-color: var(--sand);
  color: var(--black);
}

.booking-button svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.booking-button:hover,
.booking-button:focus-visible {
  background-color: var(--charcoal);
  color: var(--cream);
}

@media (max-width: 1024px) {
  .booking {
    padding-block: 48px;
  }

  .booking-inner {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .booking {
    padding: 32px 16px;
  }

  .booking-inner {
    gap: 16px;
    max-width: 100%;
  }
}

/* ---------- Openingsuren ---------- */

.opening {
  padding-bottom: 60px;
  background-color: var(--charcoal);
}

.opening-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 900px;
  margin-inline: auto;
}

.opening-photo,
.opening-hours {
  flex: 0 1 50%;
  min-width: 0;
}

.opening-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.opening-photo img {
  width: 80%;
}

.opening-hours dl {
  margin: 0;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 44px;
  font-family: var(--font-serif);
  font-size: var(--fs-serif);
  color: var(--cream);
}

.hours-row + .hours-row {
  margin-top: 37px;
  position: relative;
}

/* Scheidingslijn tussen de dagen */
.hours-row + .hours-row::before {
  content: '';
  position: absolute;
  top: -19px;
  left: 0;
  right: 0;
  border-top: 1px solid var(--grey);
}

.hours-row dd {
  margin: 0;
  text-align: right;
}

@media (max-width: 1024px) {
  .opening {
    padding: 32px 16px 48px;
  }
}

@media (max-width: 767px) {
  .opening {
    padding: 16px 16px 32px;
  }

  .opening-inner {
    flex-direction: column-reverse;
    gap: 48px;
  }

  .opening-photo,
  .opening-hours {
    flex-basis: auto;
    width: 100%;
  }

  /* 90% van een kolom die zelf 80% breed is, zoals op de oude site */
  .opening-photo img {
    width: 72%;
  }

  .opening-hours {
    display: flex;
    justify-content: center;
  }

  .opening-hours dl {
    width: 90%;
  }
}

/* ---------- Contactformulier ---------- */

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0 60px;
}

.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.contact-intro {
  width: 80%;
  text-align: center;
}

@media (max-width: 1024px) {
  .contact {
    padding: 48px 16px;
  }
}

@media (max-width: 767px) {
  .contact {
    padding-block: 32px;
  }

  .contact-inner {
    gap: 16px;
  }

  .contact-intro {
    width: 100%;
  }
}

/* ==========================================================================
   Pagina: privacy policy
   ========================================================================== */

.legal-text {
  text-align: justify;
}

.legal-text h3 {
  margin-block: 0.5rem 1rem;
  font-weight: 700;
  line-height: 1.23;
}

@media (max-width: 1024px) {
  .legal {
    padding: 0 16px 32px;
  }
}

@media (max-width: 767px) {
  .text-hero--legal .page-title {
    font-size: 42px;
  }

  .legal-text {
    text-align: start;
  }
}

/* ==========================================================================
   Pagina: 404
   ========================================================================== */

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 60vh;
  padding: 32px 16px;
  text-align: center;
}