/* ==========================================================================
   Hollywood International Tailor — Khaosan Road, Bangkok
   Sales-first presentation site. Single stylesheet, no build step.
   ========================================================================== */

:root {
    --ink: #14120f;
    --ink-soft: #1d1a16;
    --ink-line: #2f2b24;
    --paper: #f6f2ea;
    --paper-2: #ffffff;
    --paper-line: #e2d9c8;
    --muted: #a49a8d;
    --muted-dark: #5d554a;
    --brass: #cfa64f;
    /* Darkened from #9e7a2c: that only reached 3.57:1 on the paper background,
       under the 4.5:1 needed for the delivery times and the reviews link. */
    --brass-deep: #856421;
    --wa: #25d366;
    --wa-ink: #07301a;

    --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --sans: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --gutter: clamp(1.25rem, 5vw, 5rem);
    --measure: 62ch;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 5.5rem;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Kept on <html>, not <body>: overflow on <body> clips the fixed header. */
    overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 300;
    letter-spacing: 0.01em;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0;
}

p {
    margin: 0 0 1.2em;
    max-width: var(--measure);
}

/* --------------------------------------------------------------- helpers */

.wrap {
    width: 100%;
    max-width: 1220px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--brass);
    font-weight: 400;
    margin: 0 0 1.2rem;
}

.section {
    padding-block: clamp(4rem, 9vw, 7.5rem);
    position: relative;
    scroll-margin-top: var(--header-h);
}

.section--paper {
    background: var(--paper);
    color: var(--ink);
}

.section--paper .eyebrow {
    color: var(--brass-deep);
}

.section h2 {
    font-size: clamp(2.1rem, 5vw, 3.5rem);
}

.lede {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    line-height: 1.4;
    color: var(--paper);
}

.section--paper .lede {
    color: var(--muted-dark);
}

.section-head {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem 3rem;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head__note {
    margin: 0;
    color: var(--muted-dark);
    font-size: 0.98rem;
}

/* reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------- "to be confirmed" placeholder
   `.tbc` markeert alles wat de klant nog moet bevestigen. De gestippelde
   onderstreping en de Nederlandse tooltips zijn er op 02-10 uit gehaald samen
   met de conceptbalk: zonder die balk lijkt een stippellijn een fout, en een
   Engelstalige bezoeker heeft niets aan Nederlandse uitleg.

   De class blijft staan als interne markering — `grep tbc index.html` geeft
   nog steeds de volledige lijst aannames. Styling weer aanzetten? Zet de twee
   regels hieronder terug. */

.tbc {
    /* bewust leeg: zie toelichting hierboven */
}

.tbc-mark {
    display: inline-grid;
    place-items: center;
    width: 1.05em;
    height: 1.05em;
    margin-left: 0.4em;
    border-radius: 50%;
    background: var(--brass);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.62em;
    font-weight: 500;
    vertical-align: middle;
    cursor: help;
}

/* ------------------------------------------------------------------- nav */

.nav-shell {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
}

.draft-bar {
    background: var(--brass);
    color: var(--ink);
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    padding: 0.5rem 1rem;
}

.draft-bar__key {
    border-bottom: 2px dotted var(--ink);
}

.nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem var(--gutter);
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
        padding 0.4s var(--ease);
    border-bottom: 1px solid transparent;
}

.nav.is-stuck {
    background: rgba(20, 18, 15, 0.94);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom-color: var(--ink-line);
    padding-block: 0.7rem;
}

.nav__mark {
    font-family: var(--serif);
    font-size: 1.02rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--paper);
}

.nav__mark span {
    color: var(--brass);
}

/* The full name does not fit on a phone next to the menu button, so break it
   over two lines and tighten it rather than letting it push the button off. */
@media (max-width: 620px) {
    .nav__mark {
        white-space: normal;
        font-size: 0.86rem;
        letter-spacing: 0.14em;
        line-height: 1.25;
        max-width: 11ch;
    }

    .nav__mark span {
        display: block;
    }
}

.nav__links {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2.2vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__links a {
    text-decoration: none;
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    padding-block: 0.4rem;
    border-bottom: 1px solid transparent;
    transition: color 0.25s, border-color 0.25s;
}

.nav__links a:hover,
.nav__links a:focus-visible {
    color: var(--brass);
    border-bottom-color: var(--brass);
}

.nav__cta {
    border: 1px solid var(--brass) !important;
    color: var(--brass) !important;
    padding: 0.5rem 1rem !important;
}

.nav__cta:hover,
.nav__cta:focus-visible {
    background: var(--brass);
    color: var(--ink) !important;
}

.nav__toggle {
    display: none;
    background: none;
    border: 1px solid var(--ink-line);
    color: var(--paper);
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.55rem 1rem;
    /* 44px is the minimum comfortable tap target. */
    min-height: 44px;
    cursor: pointer;
}

@media (max-width: 940px) {
    .nav__toggle {
        display: block;
    }

    .nav__links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem var(--gutter) 1.5rem;
        background: var(--ink-soft);
        border-bottom: 1px solid var(--ink-line);
        z-index: 99;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
            visibility 0s linear 0.3s;
    }

    .nav__links.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }

    .nav__links li {
        border-top: 1px solid var(--ink-line);
    }

    .nav__links a {
        display: block;
        padding: 0.95rem 0;
        font-size: 0.86rem;
    }

    .nav__cta {
        margin-top: 0.9rem;
        text-align: center;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}


/* ----------------------------------------------------------------- hero */

.hero {
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    position: relative;
    isolation: isolate;
    padding-block: 9rem 3.5rem;
    overflow: hidden;
}

.hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    z-index: -2;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(20, 18, 15, 0.82) 0%, rgba(20, 18, 15, 0.45) 35%, rgba(20, 18, 15, 0.94) 88%),
        linear-gradient(90deg, rgba(20, 18, 15, 0.8) 0%, transparent 65%);
}

.hero__inner {
    width: 100%;
}

.hero h1 {
    font-size: clamp(2.7rem, 7.5vw, 5.6rem);
    margin: 0 0 1.3rem;
    text-wrap: balance;
}

.hero h1 em {
    font-style: italic;
    color: var(--brass);
}

.hero__sub {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: #ddd5c8;
    max-width: 44ch;
    margin-bottom: 1.8rem;
}

/* ----------------------------------------------------------------- chips */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid rgba(246, 242, 234, 0.25);
    border-radius: 999px;
    font-size: 0.86rem;
    background: rgba(20, 18, 15, 0.45);
    backdrop-filter: blur(6px);
}

.chip strong {
    font-weight: 500;
    color: var(--brass);
}

.chip--accent {
    border-color: var(--brass);
}

.chip__stars {
    color: var(--brass);
    letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------- buttons */

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 1.9rem;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--brass);
    color: var(--ink);
    background: var(--brass);
    transition: background 0.3s var(--ease), color 0.3s var(--ease),
        border-color 0.3s var(--ease), transform 0.2s var(--ease);
    cursor: pointer;
    font-family: inherit;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px);
}

.btn svg {
    width: 19px;
    height: 19px;
    flex: none;
}

.btn--wa {
    background: var(--wa);
    border-color: var(--wa);
    color: var(--wa-ink);
}

.btn--ghost {
    background: transparent;
    color: var(--paper);
    border-color: rgba(246, 242, 234, 0.35);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    border-color: var(--brass);
    color: var(--brass);
}

.section--paper .btn--ghost {
    color: var(--ink);
    border-color: #cbc1ae;
}

.section--paper .btn--ghost:hover {
    color: var(--brass-deep);
    border-color: var(--brass-deep);
}

/* ----------------------------------------------------------- trust strip */

.trust {
    background: var(--ink-soft);
    border-block: 1px solid var(--ink-line);
    padding-block: clamp(2rem, 4vw, 3rem);
}

.trust__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.8rem 2.5rem;
}

.trust__item strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--brass);
    margin-bottom: 0.3rem;
}

.trust__item span {
    font-size: 0.92rem;
    color: var(--muted);
}

/* --------------------------------------------------------------- prices */

.price-grid {
    display: grid;
    /* Vier kaarten: auto-fit laat er op een breed scherm drie staan en één
       alleen op de tweede rij. Vast op vier, of netjes twee bij twee. */
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1150px) {
    .price-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .price-grid {
        grid-template-columns: 1fr;
    }
}

.product {
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -24px rgba(20, 18, 15, 0.5);
}

.product__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-line);
}

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

.product__body {
    padding: 1.5rem 1.5rem 1.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.product h3 {
    font-size: 1.6rem;
}

.product__price {
    margin: 0;
    font-size: 1.05rem;
    color: var(--muted-dark);
}

.product__price span {
    font-family: var(--serif);
    font-size: 1.85rem;
    color: var(--ink);
    font-weight: 500;
}

/* Prijs op aanvraag: geen groot serif-bedrag, wel een directe vraag. Drie van
   de vier bedragen zijn nog niet door de winkel bevestigd, en een verzonnen
   getal op een vindbare pagina is een belofte die je later niet waar kunt maken. */

.product__price--ask a {
    font-family: var(--sans);
    font-size: 0.92rem;
    color: var(--brass-deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(133, 100, 33, 0.45);
    padding-bottom: 1px;
}

.product__price--ask a:hover {
    border-bottom-color: var(--brass-deep);
}

.product__desc {
    margin: 0;
    font-size: 0.94rem;
    color: var(--muted-dark);
    flex: 1;
}

.product__time {
    margin: 0;
    padding-top: 0.9rem;
    border-top: 1px solid #ece5d8;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-deep);
}

.price-cta {
    margin-top: 2.8rem;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
}

.price-cta p {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    max-width: 30ch;
}

/* ---------------------------------------------------------------- speed */

.speed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}

.steps {
    list-style: none;
    margin: 2.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.6rem;
}

.steps li {
    padding-top: 1.3rem;
    border-top: 1px solid var(--ink-line);
}

.steps__when {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 0.45rem;
}

.steps strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 0.35rem;
}

.steps p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted);
}

.speed__media {
    margin: 0;
}

.speed__media img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--ink-line);
}

.speed__media figcaption {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}

/* --------------------------------------------------------------- reviews */

.reviews__title {
    max-width: 20ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rating-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2.2rem;
    border-bottom: 1px solid var(--paper-line);
    margin-bottom: 2.6rem;
}

.rating-score {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.rating-score .num {
    font-family: var(--serif);
    font-size: clamp(3.6rem, 9vw, 5.6rem);
    line-height: 0.85;
    color: var(--ink);
}

.stars {
    color: var(--brass-deep);
    font-size: 1.15rem;
    letter-spacing: 0.14em;
}

.rating-score .count {
    font-size: 0.88rem;
    color: var(--muted-dark);
    margin-top: 0.3rem;
}

.keyword-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.keyword-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--muted-dark);
    background: var(--paper-2);
}

.keyword-chips span {
    color: var(--brass-deep);
    font-weight: 500;
}

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

.review {
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    padding: clamp(1.5rem, 3vw, 2.1rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review__stars {
    color: var(--brass-deep);
    letter-spacing: 0.14em;
}

.review blockquote {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.45;
    color: #2a251f;
    flex: 1;
}

.review__by {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid #ece5d8;
}

.review__avatar {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--ink);
    color: var(--brass);
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: 1rem;
}

.review__name {
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--ink);
}

.review__when {
    font-size: 0.79rem;
    color: #7c7266;
}

.review-note {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--muted-dark);
}

.review-note a {
    color: var(--brass-deep);
}

/* ---------------------------------------------------------------- direct */

.direct {
    background: var(--ink-soft);
    border-block: 1px solid var(--ink-line);
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

.direct__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(2.2rem, 5vw, 4.5rem);
    align-items: center;
}

.direct__media {
    margin: 0;
}

.direct__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--ink-line);
}

.direct h2 {
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    margin-bottom: 1.2rem;
}

.direct p {
    color: var(--muted);
}

/* ------------------------------------------------------------------- faq */

.faq h2 {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    max-width: 18ch;
}

.faq__list {
    border-top: 1px solid var(--paper-line);
}

.faq details {
    border-bottom: 1px solid var(--paper-line);
}

.faq summary {
    cursor: pointer;
    list-style: none;
    padding: 1.3rem 2.5rem 1.3rem 0;
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    position: relative;
    transition: color 0.25s;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary:hover {
    color: var(--brass-deep);
}

.faq summary::after {
    content: "+";
    position: absolute;
    right: 0.2rem;
    top: 50%;
    translate: 0 -50%;
    font-family: var(--sans);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--brass-deep);
    transition: rotate 0.3s var(--ease);
}

.faq details[open] summary::after {
    rotate: 45deg;
}

.faq details p {
    margin: 0 0 1.5rem;
    color: var(--muted-dark);
    max-width: 58ch;
}

/* ----------------------------------------------------------------- visit */

.visit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}

.visit__intro {
    color: var(--muted);
    margin-top: 1.2rem;
}

.info-list {
    list-style: none;
    margin: 2.2rem 0;
    padding: 0;
    display: grid;
    gap: 1.4rem;
}

.info-list li {
    padding-top: 1.2rem;
    border-top: 1px solid var(--ink-line);
}

.info-list .label {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 0.4rem;
}

.info-list .value {
    font-family: var(--serif);
    font-size: 1.22rem;
    line-height: 1.4;
}

.info-list .value a {
    text-decoration: none;
    border-bottom: 1px solid rgba(207, 166, 79, 0.4);
}

.info-list .value a:hover {
    border-bottom-color: var(--brass);
}

.map-frame {
    border: 1px solid var(--ink-line);
    aspect-ratio: 4 / 5;
    position: relative;
    overflow: hidden;
    background: var(--ink-soft);
}

.map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) invert(0.92) contrast(0.86);
}

/* ---------------------------------------------------------------- footer */

.footer {
    border-top: 1px solid var(--ink-line);
    padding-block: 2.4rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
}

.footer a {
    color: var(--muted);
    text-decoration: none;
}

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

/* ========================================================== vergroting
   Donkere overlay, foto zo groot als het scherm toelaat, pijlen opzij.
   Geen bibliotheek: dit is twintig regels CSS en twintig regels JS. */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 2rem);
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(12, 11, 9, 0.94);
    backdrop-filter: blur(4px);
    animation: lightbox-in 0.25s var(--ease);
}

.lightbox[hidden] {
    display: none;
}

@keyframes lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox__figure {
    margin: 0;
    max-width: min(900px, 100%);
    text-align: center;
}

.lightbox__img {
    max-width: 100%;
    max-height: 78svh;
    margin: 0 auto;
    object-fit: contain;
    border: 1px solid var(--ink-line);
}

.lightbox__caption {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--muted);
}

.lightbox__close,
.lightbox__nav {
    border: 1px solid var(--ink-line);
    background: rgba(29, 26, 22, 0.8);
    color: var(--paper);
    cursor: pointer;
    line-height: 1;
    min-width: 46px;
    min-height: 46px;
    font-size: 1.6rem;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover {
    border-color: var(--brass);
    background: rgba(29, 26, 22, 0.95);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
}

.lightbox__close {
    position: absolute;
    top: clamp(0.75rem, 3vw, 1.5rem);
    right: clamp(0.75rem, 3vw, 1.5rem);
    font-size: 1.9rem;
}

/* Achtergrond niet meescrollen zolang de vergroting open staat. */
body.has-lightbox {
    overflow: hidden;
}

@media (max-width: 620px) {
    /* Op een telefoon is er geen ruimte naast de foto; pijlen onderaan. */
    .lightbox {
        flex-wrap: wrap;
        align-content: center;
    }

    .lightbox__figure {
        order: -1;
        flex-basis: 100%;
    }

    .lightbox__nav {
        flex: 1;
        max-width: 42%;
    }
}

/* ------------------------------------------------- zwevende balk op mobiel
   Op de telefoon is dit de belangrijkste knop van de site: wie halverwege de
   pagina besluit te appen, moet dat kunnen zonder terug te scrollen.

   Hij zweeft (marge rondom, afgeronde hoek, schaduw) in plaats van vastgeplakt
   aan de onderrand: zo blijft zichtbaar dat er pagina onder doorloopt, en op een
   iPhone botst hij niet met de home-indicator — vandaar de safe-area-inset.

   Hij verschijnt pas voorbij de hero. Daar staan de knoppen al groot in beeld;
   een balk eroverheen zou alleen de eigen hero-knop afdekken. */

.sticky-cta {
    display: none;
    position: fixed;
    inset: auto 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    gap: 0.5rem;
    transform: translateY(calc(100% + 1.5rem));
    opacity: 0;
    transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
    pointer-events: none;
}

.sticky-cta.is-visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.sticky-cta a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 54px;
    padding: 0.9rem 0.8rem;
    border-radius: 3px;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.75);
}

.sticky-cta svg {
    width: 18px;
    height: 18px;
}

.sticky-cta__wa {
    background: var(--wa);
    color: var(--wa-ink);
    flex: 2.2 !important;
}

.sticky-cta__call {
    background: rgba(29, 26, 22, 0.92);
    color: var(--paper);
    border: 1px solid var(--ink-line);
    backdrop-filter: blur(6px);
}

@media (max-width: 760px) {
    .sticky-cta {
        display: flex;
    }

    /* Houd de balk van de laatste regel van de pagina af. */
    .footer {
        padding-bottom: 6.5rem;
    }
}

/* ========================================================== prijsomrekening
   De baht is het bedrag; de eigen valuta van de bezoeker staat er klein en
   duidelijk benaderend achter. */

/* `.price .price__approx` en niet `.price__approx`: `.product__price span`
   staat hierboven en is specifieker, dus anders wint het grote serif-bedrag
   ook voor de omrekening. */
.price .price__approx {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--muted-dark);
}

/* Op de prijskaart onder het bedrag, niet erachter: daar is het de tweede regel
   van een prijs, geen bijzin. */
.product__price .price__approx {
    display: block;
    margin-top: 0.1rem;
}

.hero .price .price__approx,
.section:not(.section--paper) .price .price__approx {
    color: var(--muted);
}

.fx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-size: 0.85rem;
}

/* display:flex wint van het hidden-attribuut, dus expliciet terugzetten. */
.fx[hidden] {
    display: none;
}

.fx label {
    color: var(--muted-dark);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.fx__select {
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: 0;
    padding: 0.35rem 0.5rem;
    min-height: 44px;
    cursor: pointer;
}

.fx__select:focus-visible {
    outline: 2px solid var(--brass-deep);
    outline-offset: 2px;
}

.fx__note {
    flex-basis: 100%;
    color: var(--muted-dark);
    font-style: italic;
    font-size: 0.8rem;
}

/* =============================================================== cloth
   Vierentwintig stalen, van dichtbij gefotografeerd uit de boeken in de winkel.
   Als hele boekpagina zagen ze eruit als een kiekje; als vierkant zie je het
   weefsel, en dat is waar iemand een stof op kiest. Aantikken vergroot. */

.cloth-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.cloth-grid li {
    margin: 0;
}

.swatch {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
    position: relative;
}

.swatch img {
    width: 100%;
    /* `height: auto` is nodig: de picker-tegels hebben een height-attribuut voor
       de layout-stabiliteit, en zolang hoogte én breedte vastliggen wordt
       aspect-ratio genegeerd. */
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.swatch::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    transition: border-color 0.3s var(--ease);
}

.swatch:hover img,
.swatch:focus-visible img {
    transform: scale(1.12);
}

.swatch:hover::after,
.swatch:focus-visible::after {
    border-color: var(--brass);
}

.swatch:focus-visible {
    outline: 2px solid var(--brass-deep);
    outline-offset: 2px;
}

.cloth-note {
    margin: clamp(1.4rem, 3vw, 2rem) 0 0;
    max-width: var(--measure);
    font-size: 0.9rem;
    font-style: italic;
    color: var(--muted-dark);
}

@media (max-width: 900px) {
    .cloth-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Stoffenpagina: zelfde tegels, maar met de code eronder. */

.cloth-grid--labelled {
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(0.8rem, 2vw, 1.4rem);
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.cloth-code {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--muted-dark);
}

.cloth-book {
    margin: clamp(1.6rem, 4vw, 2.6rem) 0 1.1rem;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
}

.cloth-more {
    margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.cloth-back {
    margin: clamp(2rem, 5vw, 3rem) 0 0;
    font-size: 0.9rem;
}

.cloth-back a {
    text-decoration: none;
    border-bottom: 1px solid rgba(133, 100, 33, 0.4);
}

@media (max-width: 900px) {
    .cloth-grid--labelled {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 620px) {
    .cloth-grid--labelled {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Binnenpagina's beginnen met een sectie in plaats van met de hero, en de
   kopbalk staat vast bovenin — zonder deze ruimte schuift de eerste regel
   eronder. De hero heeft dit niet nodig: die loopt er bewust onderdoor. */

main > .section:first-child {
    padding-top: calc(var(--header-h) + clamp(1.5rem, 5vw, 3.5rem));
}

/* ====================================================== stof uitproberen
   Telefoon eerst: het pak boven, de stalen eronder, de WhatsApp-knop binnen
   duimbereik. Op een breed scherm staat het pak links en blijft het staan
   terwijl je door de stalen scrolt. */

.tryon {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.tryon__stage {
    margin: 0;
    background: var(--ink-soft);
    border: 1px solid var(--ink-line);
    overflow: hidden;
}

.tryon__stage canvas,
.tryon__stage img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}

.tryon__stage canvas.is-ready {
    opacity: 1;
}

.tryon__stage noscript img {
    opacity: 1;
}

.tryon__chosen {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.tryon__chosen strong {
    color: var(--brass);
    font-weight: 500;
}

.cloth-grid--pick {
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 1.4rem;
}

.swatch--pick {
    cursor: pointer;
}

.swatch--pick.is-chosen::after {
    border: 2px solid var(--brass);
}

.swatch--pick.is-chosen img {
    transform: scale(1.1);
}

.tryon__note {
    margin: 1.2rem 0 0;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--muted);
}

.tryon__links {
    margin: 1.4rem 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.tryon__links a {
    text-decoration: none;
    border-bottom: 1px solid rgba(207, 166, 79, 0.4);
}

@media (min-width: 900px) {
    .tryon {
        grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
        align-items: start;
    }

    .tryon__stage {
        position: sticky;
        top: calc(var(--header-h) + 1rem);
    }
}

@media (max-width: 620px) {
    .cloth-grid--pick {
        grid-template-columns: repeat(6, 1fr);
    }

    /* De knop moet onder de stalen staan, niet erboven: je kiest eerst. */
    .tryon__panel .btn--wa {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================================ work */

/* De sectiekop staat ook op de donkere secties; --muted-dark zakt daar weg. */
.section:not(.section--paper) .section-head__note {
    color: var(--muted);
}

.work-grid {
    display: grid;
    /* Vast aantal kolommen, geen auto-fit: acht foto's moeten in volle rijen
       vallen, anders eindigt de sectie met een rafelige halve regel. */
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.8rem, 2vw, 1.4rem);
}

@media (max-width: 900px) {
    .work-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.work-grid figure {
    margin: 0;
}

.zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
    position: relative;
}

.work-grid img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--ink-line);
    transition: transform 0.6s var(--ease);
}

.zoom:hover img,
.zoom:focus-visible img {
    transform: scale(1.06);
}

.zoom::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    transition: border-color 0.3s var(--ease);
}

.zoom:hover::after,
.zoom:focus-visible::after {
    border-color: var(--brass);
}

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

.work-clips {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: clamp(1.8rem, 4vw, 2.8rem);
}

.clip {
    margin: 0;
    width: min(240px, 44vw);
}

.clip__frame {
    position: relative;
}

.clip__video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border: 1px solid var(--ink-line);
    background: var(--ink-soft);
}

.clip__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: rgba(20, 18, 15, 0.3);
    color: var(--paper);
    cursor: pointer;
    transition: background 0.3s var(--ease), opacity 0.3s var(--ease);
}

.clip__play svg {
    width: 54px;
    height: 54px;
    border: 1px solid rgba(246, 242, 234, 0.6);
    border-radius: 50%;
    padding: 0.9rem;
    background: rgba(20, 18, 15, 0.45);
}

.clip__play:hover {
    background: rgba(20, 18, 15, 0.15);
}

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

/* Tijdens het afspelen blijft de knop bestaan (hij pauzeert), maar hij mag
   het beeld niet in de weg zitten. */
.clip.is-playing .clip__play {
    background: transparent;
    opacity: 0;
}

.clip.is-playing .clip__play:focus-visible,
.clip.is-playing .clip__frame:hover .clip__play {
    opacity: 1;
    background: rgba(20, 18, 15, 0.2);
}

.clip figcaption {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--muted);
}

/* =========================================================== phone tuning
   Deliberately the LAST block in the file: media queries add no specificity,
   so these have to come after the rules they override. */

@media (max-width: 620px) {
    .eyebrow,
    .draft-bar,
    .info-list .label,
    .steps__when,
    .product__time {
        font-size: 0.78rem;
        letter-spacing: 0.16em;
    }

    .nav__toggle {
        font-size: 0.78rem;
    }

    .trust__item span,
    .steps p,
    .review__when,
    .product__desc {
        font-size: 0.95rem;
    }

    /* auto-fit zou hier naar eén kolom vallen; twee naast elkaar leest beter
       en houdt de sectie scrollbaar in plaats van eindeloos. */
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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