/* =========================================================
   Cocomo's Hairfashion — one-pager
   ========================================================= */

:root {
    --black:      #0b0b0b;
    --ink:        #1a1a1a;
    --body:       #5a5a5a;
    --gold:       #c79a6b;
    --gold-dark:  #bd8f5f;
    --gold-soft:  #cba876;
    --red:        #e12228;
    --line:       #d9d9d9;
    --white:      #ffffff;
    --max:        1200px;
    --font:       'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--body);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Shared bits ---------- */
.eyebrow {
    text-transform: uppercase;
    letter-spacing: .32em;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-soft);
    margin-bottom: 14px;
}
.eyebrow--light { color: var(--white); opacity: .9; }

.section { padding: 90px 0; }

.section__title {
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.5px;
    line-height: 1.05;
    text-transform: uppercase;
}
.section__head { margin-bottom: 60px; }
.section__head--center { text-align: center; }

.lead { margin: 22px 0 30px; max-width: 460px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 40px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .22s ease;
    white-space: nowrap;
}
.btn--gold {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

.btn--outline {
    background: transparent;
    color: var(--gold-dark);
    border-color: var(--gold);
}
.btn--outline:hover { background: var(--gold); color: #fff; }

.btn--ghost {
    background: rgba(0,0,0,.35);
    color: #fff;
    border-color: rgba(255,255,255,.65);
}
.btn--ghost:hover { background: rgba(0,0,0,.55); }

.btn--lg { padding: 17px 34px; font-size: 16px; }

/* ---------- Top bar ---------- */
.topbar {
    background: var(--black);
    color: #efefef;
    font-size: 14.5px;
}
.topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    gap: 20px;
}
.topbar__contact { display: flex; gap: 28px; }
.topbar__item { display: inline-flex; align-items: center; gap: 10px; }
.topbar__item .ico { color: var(--gold); font-size: 12px; }
.topbar__nav { display: flex; gap: 26px; }
.topbar__nav a { transition: color .2s; }
.topbar__nav a:hover { color: var(--gold); }

/* ---------- Header ---------- */
.header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    gap: 24px;
}
.logo {
    font-weight: 800;
    font-size: 30px;
    color: var(--red);
    letter-spacing: -1px;
    position: relative;
}
.logo span { color: var(--red); }
.mainnav { display: flex; gap: 30px; }
.mainnav a {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--ink);
    transition: color .2s;
}
.mainnav a:hover { color: var(--gold); }
.header__actions { display: flex; gap: 14px; }
.header__burger {
    display: none;
    background: none;
    border: 0;
    font-size: 26px;
    color: var(--ink);
    cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 490px;
    display: flex;
    align-items: center;
    background: url('../images/banner.jpg') center/cover no-repeat;
    color: #fff;
}
.hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.1) 100%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__title {
    font-size: clamp(38px, 5.2vw, 64px);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: -1px;
    margin-bottom: 30px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Behandelingen ---------- */
.pricegrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 60px;
}
.pricerow {
    display: flex;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 2px dashed var(--line);
}
.pricegrid .pricerow:nth-last-child(-n+3) { border-bottom: 0; }
.pricerow__label {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .01em;
    font-size: 15.5px;
}
.pricerow__dots { flex: 1; }
.pricerow__price {
    font-weight: 500;
    color: var(--ink);
    font-size: 17px;
    white-space: nowrap;
}

.behandelingen__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 60px;
}
.behandelingen__cta-text { max-width: 620px; }
.behandelingen__cta-text h3 {
    font-size: clamp(24px, 3vw, 32px);
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 800;
    margin-bottom: 12px;
}

/* ---------- Gallery / slider ---------- */
.gallery { background: #fff; }
.slider {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 60px;
}
.slider__track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox */
    padding-bottom: 4px;
}
.slider__track::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

.slide {
    flex: 0 0 auto;
    width: clamp(260px, 32%, 460px);
    height: 420px;
    scroll-snap-align: center;
    overflow: hidden;
    margin: 0;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;                  /* true to scale, never stretched */
    display: block;
}

.slider__arrow {
    position: absolute;
    top: 210px;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 0;
    background: var(--gold);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transition: background .2s;
}
.slider__arrow:hover { background: var(--gold-dark); }
.slider__arrow--prev { left: 6px; }
.slider__arrow--next { right: 6px; }

.slider__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.slider__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 0;
    background: #d9d9d9;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.slider__dot.is-active { background: var(--gold); transform: scale(1.25); }

/* ---------- Specialismen ---------- */
.specialismen__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    align-items: start;
}
.accordion__item {
    border-bottom: 2px dashed var(--line);
}
.accordion__head {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 0;
    font-family: var(--font);
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink);
    letter-spacing: .02em;
}
.accordion__icon {
    position: relative;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid #c9c9c9;
    flex: none;
}
.accordion__icon::before,
.accordion__icon::after {
    content: '';
    position: absolute;
    background: #7a7a7a;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.accordion__icon::before { width: 11px; height: 1.5px; }
.accordion__icon::after  { width: 1.5px; height: 11px; transition: opacity .2s; }
.accordion__item.is-open .accordion__icon::after { opacity: 0; }

.accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.accordion__item.is-open .accordion__body { max-height: 400px; }
.accordion__body p { padding: 0 0 28px; max-width: 640px; }

/* ---------- Over ons ----------
   Clean team photo on the right; a flat white text card overlaps its
   left edge, exactly like the one-pager design. */
.over-ons { padding: 70px 0; }
.over-ons__wrap { position: relative; }
.over-ons__media {
    width: calc(63% + (100vw - var(--max)) / 2);
    margin-left: auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.over-ons__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.over-ons__card {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 47%;
    background: #fff;
    padding: 54px 60px 54px 0;
    z-index: 2;
}
.over-ons__card p { margin-bottom: 28px; }

/* ---------- Contact ----------
   Clean storefront photo on the right; a flat white panel (contact
   info + opening hours) overlaps its left edge, as in the design. */
.contact { padding: 70px 0; }
.contact__wrap { position: relative; }
.contact__media {
    width: calc(56% + (100vw - var(--max)) / 2);
    margin-left: auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.contact__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.contact__panel {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 62%;
    background: #fff;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 40px 40px 40px 0;
    z-index: 2;
}

/* ---------- Abonnementen ---------- */
.abonnementen__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;
}
.abonnementen__image {
    height: 360px;
    background-size: cover;
    background-position: center;
    margin: 28px 0;
}
.abonnementen__left p { margin-bottom: 18px; }

.subrow { padding: 18px 0; border-bottom: 2px dashed var(--line); }
.subrow:last-child { border-bottom: 0; }
.subrow__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}
.subrow__label {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink);
    font-size: 16px;
    min-width: 0;
}
.subrow__price { font-weight: 600; color: var(--ink); font-size: 17px; white-space: nowrap; }
.subrow__note { font-size: 14px; color: #8a8a8a; }

/* ---------- Contact (inside overlay card) ---------- */
.contact__info .section__title { font-size: clamp(26px, 3vw, 40px); }
.contact__block { margin: 14px 0 18px; color: var(--ink); font-size: 15px; }
.contact__block strong { display: inline-block; margin-bottom: 6px; }
.contact__meta { margin-bottom: 22px; font-size: 15px; }
.contact__meta > div { display: flex; gap: 12px; margin-bottom: 5px; }
.contact__meta dt { font-weight: 700; color: var(--ink); min-width: 48px; }
.contact__meta dd { min-width: 0; overflow-wrap: anywhere; }
.contact__hours h3 {
    text-transform: uppercase;
    font-weight: 800;
    color: var(--ink);
    font-size: 20px;
    margin-bottom: 16px;
}
.hours { border-collapse: collapse; width: 100%; }
.hours td { padding: 5px 0; font-size: 15px; }
.hours__day { color: var(--ink); padding-right: 24px; }
.hours .is-today td { color: var(--gold-dark); font-weight: 600; }

/* ---------- Copyright ---------- */
.copyright {
    background: var(--black);
    color: #d6d6d6;
    font-size: 14.5px;
}
.copyright__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 66px;
    gap: 20px;
}
.copyright__left { display: flex; align-items: center; gap: 16px; }
.copyright__sep { opacity: .4; }
.copyright__right { display: flex; gap: 28px; }
.copyright__right a:hover { color: var(--gold); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
    .topbar__contact { flex-direction: column; gap: 4px; }
    .topbar__inner { min-height: 0; padding: 10px 24px; flex-wrap: wrap; }
    .topbar__nav { gap: 20px; font-size: 13px; }

    .mainnav {
        display: none;
        position: absolute;
        top: 78px; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        gap: 0;
        padding: 10px 24px 20px;
        box-shadow: 0 12px 20px rgba(0,0,0,.08);
    }
    .mainnav.is-open { display: flex; }
    .mainnav a { padding: 12px 0; }
    .header__actions .btn--outline { display: none; }
    .header__burger { display: block; }

    .pricegrid { grid-template-columns: 1fr; gap: 0; }
    .pricegrid .pricerow { border-bottom: 2px dashed var(--line); }
    .pricegrid .pricerow:last-child { border-bottom: 0; }

    .behandelingen__cta { flex-direction: column; align-items: flex-start; }

    .specialismen__grid,
    .abonnementen__grid { grid-template-columns: 1fr; gap: 40px; }

    /* Overlay sections stack: full photo on top, real text card below */
    .over-ons, .contact { padding: 40px 0; }
    .over-ons__media, .contact__media { width: 100%; aspect-ratio: 16 / 10; }
    .over-ons__card, .contact__panel {
        position: static;
        transform: none;
        width: 100%;
        padding: 30px 0 0;
    }
    .contact__panel { grid-template-columns: 1fr 1fr; gap: 24px 30px; }

    .slider { padding: 0 20px; }
    .slide { width: 78%; height: 340px; }
    .slider__arrow { top: 170px; }
}

@media (max-width: 560px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .section { padding: 60px 0; }
    .copyright__inner { flex-direction: column; text-align: center; }
    .hero { min-height: 420px; }
    .topbar__inner { padding: 8px 16px; align-items: center; text-align: center; }
    .topbar__contact,
    .topbar__nav { width: 100%; }
    .topbar__contact { align-items: center; }
    .topbar__nav { flex-wrap: wrap; gap: 4px 16px; }
    .topbar__nav { justify-content: center; }
    .header__inner { min-height: 68px; gap: 12px; }
    .logo { font-size: 26px; }
    .header__actions { flex: 1; justify-content: flex-end; }
    .header__actions .btn--gold { padding: 10px 14px; font-size: 13px; }
    .header__burger { font-size: 24px; }
    .mainnav { top: 68px; }
    .hero__inner,
    .behandelingen__cta,
    .specialismen__intro,
    .over-ons__card,
    .abonnementen__left,
    .contact__hours { text-align: center; }
    .hero__title { font-size: clamp(34px, 10vw, 46px); }
    .hero__actions { gap: 10px; justify-content: center; }
    .hero__actions .btn { padding: 11px 16px; font-size: 14px; }
    .section__head { margin-bottom: 40px; }
    .lead { margin-left: auto; margin-right: auto; }
    .behandelingen__cta { align-items: center; }
    .accordion__head { justify-content: center; gap: 12px; text-align: center; }
    .accordion__body p { margin-left: auto; margin-right: auto; }
    .slider { padding: 0 16px; }
    .slide { width: calc(100vw - 48px); height: 280px; }
    .slider__arrow { top: 140px; width: 40px; height: 40px; }
    .contact__panel { grid-template-columns: 1fr; gap: 20px; }
    .contact__info { text-align: center; }
    .contact__meta { width: min(100%, 270px); margin-left: auto; margin-right: auto; text-align: left; }
    .contact__meta > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
    .hours { margin-left: auto; margin-right: auto; max-width: 260px; text-align: left; }
    .subrow__top { flex-wrap: wrap; }
}