/* Shared salon components: page hero, section heads, sliders, cards, gallery, modals, booking block */

/* Page hero */
.page-hero { padding: var(--space-lg) 0 var(--space-md); }
.page-hero__title { max-width: 18ch; margin-bottom: var(--space-md); }
.page-hero__lead { max-width: 60ch; color: var(--color-text-soft); font-size: var(--fs-18); }
@media (min-width: 900px) { .page-hero { padding: var(--space-xl) 0 var(--space-lg); } }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-14); color: var(--color-text-soft); margin-bottom: var(--space-lg); }
.breadcrumb a { color: var(--color-text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }

.section-head { max-width: 680px; margin-bottom: var(--space-lg); }
.section-head__title { margin-bottom: var(--space-md); }
.section-head__text { color: var(--color-text-soft); }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.section-head--row .section-head__title { margin-bottom: 0; }
.section-link { margin-top: var(--space-lg); }
.center-block { text-align: center; }
.center-block .eyebrow { justify-content: center; }
.center-block .eyebrow::before { display: none; }
.center-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: var(--space-lg); }
.prose h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); }
.prose h3 { margin-top: var(--space-lg); }

/* Slider: scroll-snap on mobile, grid on desktop */
.slider { position: relative; }
.slider__track {
  list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__item { scroll-snap-align: start; }
.slider__controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.slider__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line); background: transparent; color: var(--color-primary); cursor: pointer; font-size: var(--fs-18); }
.slider__btn:hover { border-color: var(--color-primary); }
@media (min-width: 768px) {
  .slider__track { grid-auto-columns: calc((100% - 32px) / 3); }
}
@media (min-width: 1100px) {
  .behandelingen-slider .slider__track { grid-auto-columns: calc((100% - 48px) / 4); }
  .team-slider .slider__track { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; gap: 24px; }
  .team-slider .slider__controls { display: none; }
}

/* Treatment card */
.treatment-card {
  display: flex; flex-direction: column; height: 100%; width: 100%;
  text-align: left; text-decoration: none; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.treatment-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--color-bg-warm); }
.treatment-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--transition); }
.treatment-card:hover .treatment-card__media img { transform: scale(1.04); }
.treatment-card__body { display: grid; gap: 4px; padding-top: 16px; }
.treatment-card__num { font-family: var(--font-heading); font-style: italic; color: var(--color-accent); font-size: var(--fs-16); }
.treatment-card__name { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: 1.15; color: var(--color-primary); }
.treatment-card__text { color: var(--color-text-soft); font-size: var(--fs-16); }
.treatment-card__price { font-size: var(--fs-14); color: var(--color-accent); letter-spacing: 0.02em; margin-top: 4px; }
.slider__item { display: flex; flex-direction: column; }
.slider__item > .treatment-card { flex: 1; }
.treatment-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-line); }
.treatment-card__book { position: relative; display: inline-flex; align-items: center; padding: 5px 14px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-dark); font-size: var(--fs-14); font-weight: 500; line-height: 1.4; text-decoration: none; transition: background var(--transition); }
.treatment-card__book::before, .treatment-card__more::before { content: ""; position: absolute; inset: -8px -4px; } /* keep a 44px tap target */
.treatment-card__book:hover { background: var(--color-accent); }
.treatment-card__more { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; background: none; border: 0; font: inherit; font-size: var(--fs-14); line-height: 1.4; color: var(--color-text-soft); text-decoration: none; cursor: pointer; transition: color var(--transition); }
.treatment-card__more::after { content: "\2192"; transition: transform var(--transition); }
.treatment-card__more:hover { color: var(--color-primary); }
.treatment-card__more:hover::after { transform: translateX(3px); }

/* Team card */
.team-card__media { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--color-bg-warm); margin-bottom: 16px; }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-card__name { font-size: var(--fs-h3); margin-bottom: 2px; }
.team-card__role { font-size: var(--fs-14); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.team-card__role span { text-transform: none; letter-spacing: 0; color: var(--color-text-soft); }
.team-card__bio { margin-top: 10px; color: var(--color-text-soft); font-size: var(--fs-16); }

/* About block (home + team page) */
.about__grid { display: grid; gap: var(--space-lg); align-items: center; }
.about__media { position: relative; display: grid; grid-template-columns: 1fr 0.8fr; gap: 16px; align-items: end; }
.about__media img { width: 100%; border-radius: var(--radius); object-fit: cover; }
.about__img-a { aspect-ratio: 3 / 4; }
.about__img-b { aspect-ratio: 3 / 4; margin-bottom: 40px; }
.about__media--single { display: block; }
.about__media--single img { aspect-ratio: 4 / 5; }
.about__sig { font-family: var(--font-heading); font-size: var(--fs-20); margin: var(--space-lg) 0 var(--space-md); }
.about__sig span { font-family: var(--font-script); font-size: 2.6rem; color: var(--color-accent); margin-left: 8px; }
@media (min-width: 900px) { .about__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }

.check-list { list-style: none; padding: 0; margin: var(--space-md) 0 var(--space-lg); display: grid; gap: 10px; }
.check-list li { display: flex; gap: 12px; align-items: baseline; }
.check-list li::before { content: ""; flex: 0 0 18px; height: 1px; background: var(--color-accent); transform: translateY(-5px); }

/* Menu list (price rows, used in modal + price list) */
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.menu-list__name { font-weight: 500; }
.menu-list__dots { border-bottom: 1px dotted rgba(46, 33, 27, 0.35); transform: translateY(-4px); min-width: 16px; }
.menu-list__price { font-weight: 400; color: var(--color-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-list__desc { grid-column: 1 / -1; font-size: var(--fs-14); color: var(--color-text-soft); font-style: italic; margin-top: -4px; }
.menu-list--compact .menu-list__row { padding: 10px 0; font-size: var(--fs-16); }

/* Modal */
.modal { border: 0; padding: 0; width: 100%; max-width: 600px; max-height: 100dvh; margin: auto; background: var(--color-bg); color: var(--color-text); border-radius: var(--radius); }
.modal::backdrop { background: rgba(46, 33, 27, 0.6); backdrop-filter: blur(3px); }
.modal__inner { position: relative; }
.modal__media { aspect-ratio: 16 / 10; overflow: hidden; }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: 24px; }
.modal__title { font-size: var(--fs-h2); }
.modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--color-bg); color: var(--color-primary); font-size: 1.6rem; cursor: pointer; z-index: 2; }
@media (max-width: 599px) { .modal { max-width: 100%; height: 100dvh; border-radius: 0; } }

/* Gallery + lightbox */
.gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gallery__item.is-hidden { display: none; }
.gallery__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--color-bg-warm); cursor: zoom-in; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.gallery__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--transition), opacity var(--transition); }
.gallery__btn:hover img { transform: scale(1.04); }
.gallery--preview { grid-auto-flow: column; grid-auto-columns: 70%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
.gallery--preview::-webkit-scrollbar { display: none; }
.gallery--preview .gallery__item { scroll-snap-align: start; }
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gallery--preview { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; }
}
@media (min-width: 1100px) { .gallery:not(.gallery--preview) { grid-template-columns: repeat(4, 1fr); } }

.lightbox { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(28, 20, 16, 0.96); color: var(--color-on-dark); }
.lightbox[open] { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: 12px; padding: 56px 0; }
.lightbox__img { max-height: 80dvh; width: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius); }
.lightbox__caption { font-size: var(--fs-14); color: var(--color-on-dark-soft); text-align: center; }
.lightbox__nav, .lightbox__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line-dark); background: transparent; color: var(--color-on-dark); font-size: 1.2rem; cursor: pointer; justify-self: center; }
.lightbox__close { position: absolute; top: 14px; right: 14px; font-size: 1.6rem; }

/* Booking block */
.booking-block { background: var(--color-primary); color: var(--color-on-dark-soft); overflow: hidden; }
.booking-block__inner { display: grid; gap: var(--space-lg); align-items: center; }
.booking-block__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.booking-block__title { color: var(--color-on-dark); }
.booking-block__title em { color: var(--color-accent-light); }
.booking-block__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--space-lg) 0 var(--space-md); }
.booking-block__note { font-size: var(--fs-14); }
@media (min-width: 900px) {
  .booking-block__inner { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-xl); }
  .booking-block__media img { aspect-ratio: 4 / 5; }
}

/* Reviews placeholder */
.reviews-placeholder { border: 1px dashed var(--color-accent-light); border-radius: var(--radius); padding: var(--space-lg); text-align: center; background: var(--color-bg); }
.reviews-placeholder__quote { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-h3); color: var(--color-primary); }
.reviews-placeholder__note { font-size: var(--fs-14); color: var(--color-text-soft); margin-top: 8px; }

/* Location + map */
.location__grid { display: grid; gap: var(--space-lg); }
.location__address { font-style: normal; margin: var(--space-md) 0; line-height: 1.8; }
.location__address a { color: var(--color-primary); }
.location__sub { font-size: var(--fs-20); margin-top: var(--space-lg); }
.map iframe { width: 100%; height: 340px; border: 0; border-radius: var(--radius); filter: grayscale(0.6) sepia(0.15); }
.map--wide iframe { border-radius: 0; height: 380px; display: block; }
@media (min-width: 900px) { .location__grid { grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--space-xl); } .map iframe { height: 440px; } }

.hours { display: grid; gap: 4px; font-size: var(--fs-16); }
.hours__row { display: flex; justify-content: space-between; gap: 16px; max-width: 320px; }
.hours dt { font-weight: 500; }
.hours--pending { font-style: italic; color: var(--color-text-soft); max-width: 36ch; }

/* Tabs (shared) */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs--center { justify-content: flex-start; margin-bottom: var(--space-lg); }
@media (min-width: 768px) { .tabs--center { justify-content: center; } }
.tabs__tab { flex: 0 0 auto; min-height: 44px; padding: 8px 18px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: transparent; color: var(--color-primary); font: inherit; font-size: var(--fs-16); cursor: pointer; transition: all var(--transition); }
.tabs__tab:hover { border-color: var(--color-primary); }
.tabs__tab.is-active { background: var(--color-primary); color: var(--color-on-dark); border-color: var(--color-primary); }

/* Contact page */
.contact__grid { display: grid; gap: var(--space-xl); }
.contact__heading { font-size: var(--fs-h3); }
.contact__line { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--color-line); margin: 0; }
.contact__line + .contact__line { margin-top: 0; }
.contact__line span { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-soft); }
.contact__line a { color: var(--color-primary); }
.contact__cta { margin-top: var(--space-lg); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1.2fr; } }

.thanks { padding-block: var(--space-xl); }
.thanks .btn { margin-top: var(--space-lg); }

.about__stamp {
  position: absolute; top: -18px; left: 8px; z-index: 2;
  font-family: var(--font-script); font-size: 2.2rem; color: var(--color-accent);
  background: var(--color-bg-alt); padding: 0 14px; border-radius: var(--radius-pill);
  transform: rotate(-6deg);
}

.reviews-widget { min-height: 220px; }

/* Meet the team (team page) */
.meet__monogram { width: 110px; height: auto; margin-bottom: var(--space-md); opacity: 0.9; }
.meet__sub { font-size: var(--fs-20); margin: var(--space-md) 0; color: var(--color-accent); }
.meet__closing { font-family: var(--font-heading); font-size: var(--fs-20); font-weight: 500; color: var(--color-primary); margin-top: var(--space-lg); }

/* Team page: one profile per member, photo and story side by side, alternating */
.team-profiles { display: grid; gap: clamp(48px, 7vw, 96px); }
.team-profile { display: grid; gap: 24px; align-items: center; }
.team-profile__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--color-bg-warm); max-width: 440px; }
.team-profile__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-profile__role { font-size: var(--fs-14); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px; }
.team-profile__role span { text-transform: none; letter-spacing: 0; color: var(--color-text-soft); }
.team-profile__name { margin-bottom: 16px; }
.team-profile__body p + p { margin-top: 12px; }
.team-profile__body { max-width: 560px; }
@media (min-width: 768px) {
  .team-profile { grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); }
  .team-profile:nth-child(even) .team-profile__media { order: 2; justify-self: end; }
}
.team-card__more { display: inline-flex; gap: 6px; margin-top: 12px; font-size: var(--fs-14); }
.team-profile { scroll-margin-top: 100px; }