/* Vindbaarheid (webshop v2, Fase 3): beeldmaker, materialen, keuzehulp, partner. */

/* Beeldmaker en partner: profiel in de navy hero (.cl-hero uit collections.css) */
.mk-hero .config-kicker, .pt-hero .config-kicker { color: var(--footer-text); }
.mk-bio { max-width: 60ch; color: var(--footer-text); line-height: 1.6; margin: 8px 0 0; }
.mk-quote { font-family: Lora, serif; font-style: italic; font-size: 20px; line-height: 1.5; margin: 16px 0 0; padding-left: 16px; border-left: 3px solid var(--creme); max-width: 60ch; color: #fff; }
.mk-series { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.mk-series .chip { background: rgba(255,255,255,.12); color: #fff; }
.mk-series .chip:hover { background: rgba(255,255,255,.22); color: #fff; }
.mk-series .chip.active { background: var(--creme); color: var(--navy); }

/* Materiaalvergelijk (B17) */
.mat-table-wrap { overflow-x: auto; }
.mat-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mat-table th { text-align: left; font: 800 11px 'Nunito Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.mat-table td { padding: 14px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-2); }
.mat-table td:first-child a { color: var(--navy); }
.mat-table td:nth-child(2) { white-space: nowrap; }
.mat-table tr.highlight td { background: var(--creme-light); }
.mat-decide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0; }
.mat-decide-card { border: 1px solid var(--border); padding: 20px 22px; }
.mat-decide-card strong { display: block; font-family: Lora, serif; font-weight: 600; font-size: 19px; margin: 6px 0 8px; }
.mat-decide-card p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.mat-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 36px; }
.mat-facts div { border: 1px solid var(--border); padding: 14px 16px; }
.mat-facts span { display: block; font: 800 11px 'Nunito Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); margin-bottom: 4px; }
.mat-single h2 { font-family: Lora, serif; font-weight: 500; font-size: 26px; margin: 0 0 4px; }
.mat-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 14px 0 40px; }
.mat-size { border: 1px solid var(--border-input); padding: 12px 14px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mat-size strong, .mat-size span { white-space: nowrap; }
.mat-size.unpriced { border-style: dashed; color: var(--sage); }
/* De tweede heroknop (vergelijken) op de navy hero: anders navy op navy. */
.mat-hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); }
.mat-hero .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }

/* keuzehulp (Lijst Rob, stap 3 t/m 6): gecentreerd, breed, tegels als links,
   vier streepjes als voortgang, resultaat in vier staande kaarten. */
/* width 100%: de shop-shell is een flex-kolom en dan krimpt "margin: 0 auto" de wrap tot de inhoud. */
.kh-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 72px 24px 104px; text-align: center; }
.kh-wrap .config-kicker { margin-bottom: 10px; }
.kh-wrap h1 { font-family: Lora, serif; font-weight: 500; font-size: 46px; line-height: 1.1; margin: 0 0 12px; }
.kh-intro { color: var(--text-2); font-size: 17px; line-height: 1.5; margin: 0; }
.kh-bars { display: flex; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 40px 0 44px; }
.kh-bars li { width: 48px; height: 5px; border-radius: 3px; background: var(--creme); }
.kh-bars li.on { background: var(--navy); }
.kh-q { font-family: Lora, serif; font-weight: 500; font-size: 32px; line-height: 1.2; margin: 0 0 10px; }
.kh-q-sub { color: var(--text-2); font-size: 15.5px; margin: 0; }
/* minmax(0, 1fr): een lange naam op een regel mag de kolom niet breder duwen. */
.kh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.kh-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 150px; padding: 34px 20px; border: 1px solid var(--border-input); color: var(--navy); font-weight: 800; font-size: 16px; line-height: 1.3; transition: border-color .2s, background .2s, box-shadow .2s; }
.kh-tile:hover, .kh-tile:focus-visible { color: var(--navy); border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.kh-tile.on { color: var(--navy); border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--creme-light); }
.kh-tile svg { display: block; flex: none; }
.kh-gift-bar { display: flex; align-items: center; gap: 20px; margin-top: 20px; padding: 24px 30px; border: 2px dashed var(--border-input); color: var(--navy); text-align: left; transition: border-color .2s, background .2s; }
.kh-gift-bar:hover, .kh-gift-bar:focus-visible { color: var(--navy); border-color: var(--navy); }
.kh-gift-bar.on, .kh-gift-bar:active { border: 3px solid var(--navy); background: var(--creme-light); padding: 23px 29px; }
.kh-gift-bar svg { flex: none; }
.kh-gift-text { display: block; }
.kh-gift-text strong { display: block; font-size: 17px; margin-bottom: 2px; }
.kh-gift-text span { display: block; font-size: 14.5px; font-weight: 400; color: var(--text-2); }
/* Kleur: bolletjes links, naam op een regel. */
.kh-color { flex-direction: row; justify-content: flex-start; gap: 18px; min-height: 0; padding: 30px 26px; white-space: nowrap; }
.kh-dots { display: inline-flex; flex: none; }
.kh-dots i { display: inline-block; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; }
.kh-dots i:first-child { margin-left: 0; }
/* Stijl: foto boven, naam en subregel eronder. */
.kh-style { align-items: stretch; gap: 0; min-height: 0; padding: 0; text-align: left; overflow: hidden; }
.kh-style .kh-img { display: block; aspect-ratio: 2 / 1; background: var(--creme-light); overflow: hidden; }
.kh-style .kh-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kh-name { display: block; padding: 16px 20px 18px; }
.kh-name strong { display: block; font-size: 16px; }
.kh-name span { display: block; font-size: 13.5px; font-weight: 400; color: var(--text-2); margin-top: 2px; }
.kh-prev { display: inline-block; margin-top: 36px; font-weight: 800; font-size: 14.5px; }
/* Resultaat */
.kh-summary { color: var(--text-2); font-size: 15.5px; margin: 0 0 36px; }
.kh-summary a { font-weight: 800; color: var(--navy); border-bottom: 2px solid var(--creme); padding-bottom: 1px; }
.kh-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; text-align: left; }
.kh-card { display: block; min-width: 0; color: var(--navy); }
.kh-card:hover { color: var(--navy); }
.kh-card .kh-img { display: block; position: relative; aspect-ratio: 3 / 4; background: var(--creme-light); overflow: hidden; margin-bottom: 12px; }
.kh-card .kh-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kh-card .kh-title { display: block; font-family: Lora, serif; font-size: 18px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-card .kh-rating { display: block; font-size: 13px; color: var(--sage); margin-top: 3px; }
.kh-card .kh-rating .star { color: #c9a05e; }
.kh-card .kh-price { display: block; font-size: 14.5px; font-weight: 800; margin-top: 6px; }
.kh-card .kh-price.muted { color: var(--sage); font-weight: 600; }
.kh-assure { display: flex; align-items: center; gap: 18px; margin-top: 36px; padding: 22px 28px; background: var(--creme-light); text-align: left; }
.kh-assure svg { flex: none; }
.kh-assure p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.kh-assure strong { color: var(--navy); }
.kh-cta { margin-top: 40px; }
.kh-empty { padding: 32px 0 8px; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.kh-empty p { margin: 0 0 18px; }

/* Partner (B16) */
.pt-portrait { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; }
.pt-disclosure { margin: 32px 56px 0; padding: 14px 18px; border: 1px solid var(--border); background: var(--creme-light); font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.pt-note { font-family: Lora, serif; font-style: italic; font-size: 14px; color: var(--text-2); margin: 8px 0 0; line-height: 1.5; }

/* Tekstpagina uit de admin */
.textpage-updated { font-size: 12.5px; color: var(--sage); margin: -6px 0 18px; }
.textpage-html p, .textpage-html li { line-height: 1.65; }

@media (max-width: 900px) {
    .mat-table thead { display: none; }
    .mat-table tr { display: block; border: 1px solid var(--border); margin-bottom: 12px; }
    .mat-table td { display: flex; gap: 12px; padding: 8px 12px; border: none; }
    .mat-table td::before { content: attr(data-label); flex: none; width: 110px; font: 800 10.5px 'Nunito Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); }
    .mat-decide { grid-template-columns: 1fr; }
    /* Twee tegels naast elkaar; maat boven prijs zodat niets afbreekt. */
    .mat-sizes { grid-template-columns: 1fr 1fr; }
    .mat-size { flex-direction: column; gap: 2px; padding: 10px 12px; }
    /* Keuzehulp mobiel: tegels en resultaat in twee kolommen. */
    .kh-wrap { padding: 40px 18px 64px; }
    .kh-wrap h1 { font-size: 32px; }
    .kh-q { font-size: 24px; }
    .kh-bars { margin: 28px 0 32px; }
    .kh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
    .kh-tile { min-height: 120px; padding: 22px 12px; font-size: 14px; gap: 10px; }
    .kh-tile svg { width: 32px; height: 32px; }
    .kh-color { flex-direction: column; gap: 10px; padding: 18px 10px; white-space: normal; }
    .kh-dots i { width: 26px; height: 26px; margin-left: -8px; }
    .kh-gift-bar { padding: 18px; gap: 14px; }
    .kh-gift-bar.on, .kh-gift-bar:active { padding: 17px; }
    .kh-name { padding: 12px 14px 14px; }
    .kh-name strong { font-size: 14.5px; }
    .kh-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
    .kh-card .kh-title { font-size: 15px; }
    .kh-assure { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
    .pt-disclosure { margin: 20px 18px 0; }
    .mk-quote { font-size: 17px; }
}


/* Beeldmakers-overzicht (v3-nav) */
.mk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.mk-card { display: block; color: var(--navy); text-align: center; }
.mk-portrait { width: 120px; height: 120px; border-radius: 50%; background: var(--creme-light) center/cover no-repeat; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-family: Lora, serif; font-size: 40px; font-weight: 600; color: var(--sage); }
.mk-name { font-family: Lora, serif; font-size: 19px; font-weight: 600; }
.mk-meta { font-size: 13.5px; color: var(--sage); margin-top: 2px; }
.mk-count { font-size: 13px; font-weight: 700; margin-top: 6px; }
@media (max-width: 900px) { .mk-grid { grid-template-columns: 1fr 1fr; gap: 20px 14px; } .mk-portrait { width: 88px; height: 88px; font-size: 30px; } }

/* Voorbeeldbeelden per materiaal (Lijst Rob 2, 17-09-2026): AI-referenties met watermerk tot de fotoshoot. */
.mat-h2 { font-family: Lora, serif; font-weight: 500; font-size: 26px; margin: 40px 0 4px; }
.mat-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; }
.mat-photos figure { margin: 0; }
.mat-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mat-photos figcaption { font: 700 11px 'Nunito Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); margin-top: 8px; }
.mat-photo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 12px 0 8px; }
.mat-photo-cards a { display: block; color: var(--navy); }
.mat-photo-cards img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 8px; }
.mat-photo-cards strong { display: block; font-size: 15px; }
.mk-photo { margin: 0 0 8px; }
.mk-photo img { display: block; width: 100%; height: auto; }
.placeholder-note { font-size: 12px; color: var(--sage); margin: 6px 0 28px; }
@media (max-width: 700px) {
    .mat-photos { gap: 8px; }
    .mat-photo-cards { grid-template-columns: 1fr 1fr; }
}

/* ===== Lijst 2 fase C (19-09-2026): materialenpagina, kiezer en een blok per materiaal ===== */
.mat-picker { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 56px; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
.mat-picker-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); margin-right: 6px; }
.mat-picker a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border-input); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--navy); background: #fff; }
.mat-picker a span { font-weight: 600; color: var(--sage); font-size: 12.5px; }
.mat-picker a:hover { border-color: var(--navy); }
.mat-block { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; padding: 56px 0; border-top: 1px solid var(--border); scroll-margin-top: 70px; }
.mat-block:first-of-type { border-top: none; }
.mat-block-main { position: relative; background: var(--creme-light); border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; }
.mat-block-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-block-count { position: absolute; right: 12px; bottom: 12px; background: rgba(73,87,110,.85); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.mat-block-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.mat-block-thumbs button { width: 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; }
.mat-block-thumbs button.active { border-color: var(--navy); }
.mat-block-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-block-nophoto { aspect-ratio: 4 / 3; background: var(--creme-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--sage); font-size: 14px; padding: 24px; text-align: center; }
.mat-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mat-block-head h2 { font-family: Lora, serif; font-weight: 500; font-size: 32px; margin: 0; display: flex; align-items: center; gap: 10px; }
.mat-block-price { font-size: 14px; color: var(--sage); }
.mat-block-price strong { font-family: Lora, serif; font-size: 22px; color: var(--navy); }
.mat-block-lead { font-size: 16px; line-height: 1.6; color: var(--text-2); margin: 10px 0 16px; }
.mat-block-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.mat-block-facts span { display: inline-flex; flex-direction: column; background: var(--creme-light); padding: 8px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.mat-block-facts em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
.mat-block-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.mat-block-cols h3 { font-size: 14px; font-weight: 800; margin: 0 0 4px; color: var(--navy); }
.mat-block-cols p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 0; }
.mat-block-note { margin: 18px 0 0; padding: 12px 14px; background: var(--saved-bg); border: 1px solid var(--saved-border); border-radius: 6px; font-size: 14px; line-height: 1.55; color: var(--navy); }
.mat-block-specs { margin-top: 14px; }
.mat-block-specs summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--sage); }
.mat-block-specs dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 10px 0 0; font-size: 14px; }
.mat-block-specs dt { color: var(--sage); }
.mat-block-specs dd { margin: 0; color: var(--navy); }
.mat-block-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.soon-signup { margin-top: 18px; }
.soon-signup p { font-size: 14px; color: var(--text-2); margin: 0 0 10px; }
@media (max-width: 900px) {
    .mat-picker { padding: 10px 14px; overflow-x: auto; flex-wrap: nowrap; }
    .mat-picker-label { display: none; }
    .mat-picker a { white-space: nowrap; }
    .mat-block { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
    .mat-block-cols { grid-template-columns: 1fr; }
    .mat-block-head h2 { font-size: 26px; }
}