/* EigenMuur webshop — design tokens uit design_handoff_eigenmuur_webshop/README.md
   Navy #49576E · Crème #E7D1B9 · Crème-licht #F7F1E6 · Oudroze #D99C9B ·
   Groengrijs #8C9D97 · Tekst-secundair #6b7690 · Border #eee9df
   Koppen: Lora 500/600 · UI: Nunito Sans 400/600/700/800 · Hoekige beeldtegels, 8px knoppen */

:root {
    --navy: #49576E;
    --navy-hover: #3a465b;
    --creme: #E7D1B9;
    --creme-hover: #dfc3a2;
    --creme-light: #F7F1E6;
    --rose: #D99C9B;
    --rose-hover: #c98887;
    /* v3 (B14): metatekst van #8C9D97 naar #61726C, 2,84:1 werd 5,08:1 op wit. */
    --sage: #61726C;
    --text-2: #6b7690;
    --border: #eee9df;
    --border-input: #e2ddd2;
    --footer-text: #c6cddb;
    /* v3 (B14): een actiekleur voor de primaire koopknoppen, los van navy. */
    --action: #BB4F4D;
    --action-hover: #A4403E;
    --warn: #b4534f;
    --ok: #4d6b58;
    --saved-bg: #FBF1F0;
    --saved-border: #F3DBDA;
}

* { box-sizing: border-box; }
body { margin: 0; background: #eceae5; font-family: 'Nunito Sans', sans-serif; color: var(--navy); }
/* Site-shell: max-breedte i.p.v. full-width browser (verzoek 2026-07-21) */
.shop-shell { max-width: 1440px; margin: 0 auto; background: #fff; box-shadow: 0 0 48px rgba(73,87,110,.10); min-height: 100vh; display: flex; flex-direction: column; }
.shop-shell > footer { margin-top: auto; }
a { color: var(--navy); text-decoration: none; transition: color .2s; }
a:hover { color: var(--rose); }
img { max-width: 100%; }
.serif { font-family: Lora, serif; font-weight: 500; }

/* Topbar + header */
.shop-topbar { background: var(--creme); color: var(--navy); font-size: 13px; font-weight: 700; text-align: center; padding: 8px; }
.shop-header { display: flex; align-items: center; gap: 40px; padding: 20px 56px; border-bottom: 1px solid var(--border); }
.shop-header img.logo { height: 46px; }
.shop-nav { display: flex; gap: 32px; font-weight: 700; font-size: 15px; margin-left: auto; align-items: center; }
.shop-nav a.muted { color: var(--sage); font-weight: 600; }
.shop-icons { display: flex; gap: 16px; align-items: center; }
.shop-icon-link, .shop-cart-link { display: inline-flex; align-items: center; color: var(--navy); }
.shop-cart-link { position: relative; }
.shop-cart-badge { position: absolute; top: -7px; right: -10px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 6px; line-height: 1.4; }
.shop-burger { display: none; font-size: 22px; padding: 8px; background: none; border: none; color: var(--navy); cursor: pointer; }

/* Sections */
.shop-section { padding: 72px 56px; }
.shop-section.tight { padding: 48px 56px; }
.shop-section.creme { background: var(--creme-light); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 12px; }
.section-head h2 { font-family: Lora, serif; font-weight: 500; font-size: 36px; margin: 0; }
.link-accent { font-weight: 800; border-bottom: 2px solid var(--creme); padding-bottom: 2px; }

/* Hero */
.shop-hero { background: var(--navy); color: #fff; display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.shop-hero .copy { padding: 88px 56px; display: flex; flex-direction: column; justify-content: center; }
.shop-hero .kicker { font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--creme); text-transform: uppercase; margin-bottom: 16px; }
.shop-hero h1 { font-family: Lora, serif; font-weight: 500; font-size: 58px; line-height: 1.08; margin: 0 0 20px; }
.shop-hero p { font-size: 18px; line-height: 1.6; margin: 0 0 32px; color: var(--footer-text); max-width: 44ch; }
.shop-hero .img { min-height: 540px; background: var(--creme-light); display: flex; align-items: center; justify-content: center; padding: 48px; }
.shop-hero .img img { max-width: 100%; max-height: 460px; width: auto; height: auto; box-shadow: 0 18px 40px rgba(73,87,110,.28); }

/* Buttons */
.btn { display: inline-block; font-weight: 800; font-size: 16px; padding: 16px 32px; border-radius: 8px; text-align: center; cursor: pointer; border: none; transition: background .2s, color .2s; }
.btn-accent { background: var(--creme); color: var(--navy); }
.btn-accent:hover { background: var(--creme-hover); color: var(--navy); }
.btn-primary { background: var(--navy); color: #fff; }
/* Precies een element per scherm in de actiekleur: de koopknop. */
.btn-action { background: var(--action); color: #fff; }
.btn-action:hover { background: var(--action-hover); color: #fff; }
.btn-primary:hover { background: var(--navy-hover); color: #fff; }
.btn-ghost-light { border: 2px solid rgba(255,255,255,.5); color: #fff; background: transparent; padding: 14px 30px; }
.btn-ghost-light:hover { color: #fff; border-color: #fff; }
.btn-outline { border: 2px solid var(--navy); color: var(--navy); background: transparent; padding: 10px 22px; font-size: 14px; }

/* Werk-cards */
.works-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.work-card { display: block; color: var(--navy); }
/* Artwork volledig en in verhouding tonen (geen cover-crop), als kunst aan de muur */
.work-card .img { height: 300px; background: var(--creme-light); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden; padding: 26px; }
.work-card .img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 12px 28px rgba(73,87,110,.22); }
.work-card .title { font-family: Lora, serif; font-size: 19px; font-weight: 600; margin-bottom: 2px; }
.work-card .sub { font-size: 14px; color: var(--sage); margin-bottom: 6px; }
.work-card .price { font-size: 15px; font-weight: 800; }

/* Collectie-tegels */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tile { display: flex; height: 200px; background: var(--creme-light); background-size: cover; background-position: center; align-items: flex-end; padding: 16px; color: var(--navy); }
.tile span { font-weight: 800; background: #fff; padding: 6px 14px; font-size: 14px; }
.tile.small { height: 130px; }
.tile.small span { font-size: 13px; padding: 5px 12px; }

/* Chips / pills */
.chip { background: var(--creme-light); font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 999px; color: var(--navy); display: inline-block; }
.badge { font: 800 11px 'Nunito Sans', sans-serif; border-radius: 4px; padding: 2px 7px; letter-spacing: .06em; }
.badge.outline { color: var(--rose); border: 1.5px solid var(--rose); }
.badge.fill { color: #fff; background: var(--rose); padding: 3px 8px; }

/* Kamer + kleur band (homepage) */
.discover-band { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.room-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.room-tiles .tile { height: 130px; }
.room-tiles .tile span { font-size: 13px; padding: 5px 12px; }
.color-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.color-tiles a { height: 76px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.color-tiles a.all { border: 2px dashed var(--border-input); color: var(--sage); text-shadow: none; }
.color-tiles a.light { color: var(--navy); text-shadow: none; }

/* Eigen-foto bandje */
.upload-band { margin: 0 56px 72px; border: 1px solid var(--border); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.upload-band p { margin: 0; font-size: 15px; color: var(--text-2); }
.upload-band strong { color: var(--navy); }
.upload-band .btn-outline { border-width: 2.5px; padding: 13px 26px; font-size: 15px; }
.shop-footer .footer-logo { height: 56px; margin-bottom: 20px; }
.shop-footer .cols { padding-top: 12px; }

/* USP-blokken */
/* Lijst Rob stap 2: USP's ruimer, kop een maat groter. */
.usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; }
.usp-grid > div { border: 1px solid var(--border); padding: 36px 32px; }
.usp-grid .t { font-weight: 800; font-size: 19px; margin-bottom: 8px; }
.usp-grid .s { font-size: 14px; color: var(--text-2); }

/* Footer */
.shop-footer { background: var(--navy); padding: 56px; color: var(--footer-text); }
.shop-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.shop-footer strong { color: #fff; font-size: 15px; }
.shop-footer a { color: var(--footer-text); }
.shop-footer a:hover { color: #fff; }
.shop-footer .col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.shop-footer .bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 24px; font-size: 13px; display: flex; justify-content: space-between; }
.footer-newsletter { border-top: 1px solid rgba(255,255,255,.15); padding: 24px 0; margin-bottom: 16px; }
.footer-newsletter strong { color: #fff; font-size: 15px; display: block; margin-bottom: 10px; }
.nl-form { display: flex; gap: 8px; max-width: 420px; }
.nl-form input { flex: 1; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; padding: 11px 14px; font: inherit; min-width: 0; }
.nl-form input::placeholder { color: rgba(255,255,255,.45); }
.nl-form button { background: var(--creme); color: var(--navy); border: none; font: 800 13.5px 'Nunito Sans', sans-serif; padding: 11px 20px; border-radius: 8px; cursor: pointer; min-height: 44px; }
.nl-form button:hover { background: var(--creme-hover); }
.nl-done { color: #b8d4c2; font-size: 14px; margin: 0; }
.nl-error { color: #e8b4b2; font-size: 13px; margin: 8px 0 0; }
.nl-note { font-size: 12.5px; color: var(--footer-text); margin: 8px 0 0; }
/* Welkomstflow (18-09-2026): hetzelfde formulier als blok (lege winkelwagen) en als pop-up (productpagina). */
.nl-inline { margin: 32px auto 0; max-width: 480px; text-align: left; background: var(--navy); color: #fff; padding: 22px 24px; border-radius: 12px; }
.nl-inline strong { color: #fff; font-size: 15px; display: block; margin-bottom: 10px; }
.nl-popup { position: fixed; right: 20px; bottom: 96px; z-index: 60; width: min(360px, calc(100vw - 40px)); background: var(--navy); color: #fff; padding: 22px 24px; border-radius: 12px; box-shadow: 0 12px 36px rgba(43,52,68,.28); }
.nl-popup strong { color: #fff; display: block; margin: 0 24px 6px 0; font-size: 16px; }
.nl-popup .nl-sub { font-size: 13.5px; color: var(--footer-text); margin: 0 0 12px; line-height: 1.5; }
.nl-popup .nl-form { max-width: none; flex-direction: column; }
.nl-popup-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.nl-code { font: 800 22px 'Nunito Sans', sans-serif; letter-spacing: .08em; color: var(--navy); margin: 8px 0 20px; }
@media (max-width: 900px) { .nl-popup { left: 12px; right: 12px; bottom: 80px; width: auto; } }

/* Productpagina */
.product-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; padding: 28px 56px 64px; align-items: start; }
.breadcrumbs { padding: 20px 56px 0; font-size: 13px; color: var(--sage); }
.breadcrumbs a { color: var(--sage); }
.gallery-main { background: var(--creme-light); padding: 48px; display: flex; align-items: center; justify-content: center; min-height: 480px; }
.gallery-main .art { max-width: 100%; max-height: 520px; box-shadow: 0 18px 40px rgba(73,87,110,.28); transition: all .3s; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 12px; }
.gallery-thumbs button { aspect-ratio: 1; padding: 0; border: 1px solid var(--border); background: var(--creme-light); cursor: pointer; overflow: hidden; }
.gallery-thumbs button.active { border: 2px solid var(--navy); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attribution { font-size: 12px; color: var(--sage); margin-top: 14px; }
.attribution a { color: var(--sage); text-decoration: underline; }

.config-kicker { font-size: 13px; font-weight: 700; color: var(--sage); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.config h1 { font-family: Lora, serif; font-weight: 500; font-size: 38px; line-height: 1.15; margin: 0 0 6px; }
.config .desc { font-size: 15px; line-height: 1.65; color: var(--text-2); margin: 0 0 28px; max-width: 52ch; }
.config .step { font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.mat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.mat-tile { border: 1px solid var(--border-input); padding: 12px 14px; cursor: pointer; background: #fff; text-align: left; font-family: inherit; color: var(--navy); transition: border-color .2s; }
.mat-tile:hover { border-color: var(--navy); }
.mat-tile.active { border: 2px solid var(--navy); background: var(--creme-light); padding: 11px 13px; }
.mat-tile .name { font-weight: 700; font-size: 13.5px; }
.mat-tile .sub { font-size: 12px; color: var(--sage); margin-top: 3px; }
.size-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.size-pill { border: 1px solid var(--border-input); background: #fff; color: var(--navy); font-weight: 700; font-size: 14px; padding: 10px 18px; cursor: pointer; font-family: inherit; transition: all .2s; }
.size-pill:hover { border-color: var(--navy); }
.size-pill.active { border: 2px solid var(--navy); background: var(--navy); color: #fff; padding: 9px 17px; }
.size-pill.warn .warn-dot { color: #b98a3c; font-size: 12px; }
.size-pill.warn.active .warn-dot { color: var(--creme); }
.dpi-warning { border: 1px solid #e6d3ae; background: #fdf8ee; color: #7a6435; font-size: 13.5px; line-height: 1.5; padding: 12px 16px; margin: -12px 0 20px; }
.dpi-warning strong { color: #7a6435; }
.price-block { background: var(--creme-light); padding: 22px 28px; margin-bottom: 16px; }
.price-block .row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.price-block .sel { font-size: 14px; color: var(--text-2); }
.price-block .price { font-family: Lora, serif; font-size: 34px; font-weight: 600; }
.price-block .note { font-size: 13px; color: var(--sage); text-align: right; }
.usp-list { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--text-2); margin-bottom: 30px; }
.usp-list strong { color: var(--navy); }
.room-box { border: 1px solid var(--border); padding: 22px 26px; }
.room-box .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.room-box .head .t { font-weight: 800; font-size: 15px; }
.room-box .head .s { font-size: 11.5px; color: var(--sage); }
.swatch { width: 26px; height: 26px; border-radius: 50%; display: inline-block; border: 1px solid rgba(73,87,110,.15); }
.specs { background: var(--creme-light); padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.specs h2 { font-family: Lora, serif; font-weight: 500; font-size: 26px; margin: 0 0 16px; }
.specs .kv { font-size: 14.5px; color: var(--text-2); display: grid; grid-template-columns: auto 1fr; gap: 9px 28px; }
.specs .kv strong { color: var(--navy); }

/* Collectiepagina */
.collection-hero { padding: 48px 56px 8px; }
.collection-hero h1 { font-family: Lora, serif; font-weight: 500; font-size: 44px; margin: 0 0 10px; }
.collection-hero p { font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 64ch; margin: 0; }
.count-note { font-size: 14px; color: var(--sage); }

/* Paginatie (Laravel default links krijgen basisstijl). De Tailwind-view
   levert reuzen-SVG's zonder Tailwind: hard begrenzen, overal in de shop. */
.shop-pagination { padding: 0 56px 64px; }
.shop-pagination nav { font-size: 14px; }
nav[role="navigation"] svg { width: 20px; height: 20px; }
nav[role="navigation"] { font-size: 14px; }
nav[role="navigation"] a, nav[role="navigation"] span[aria-current] > span { padding: 6px 12px; }
nav[role="navigation"] p { margin: 0; }

/* Mobiel */
@media (max-width: 900px) {
    .shop-header { padding: 14px 18px; gap: 14px; }
    .shop-header img.logo { height: 36px; }
    .shop-nav { display: none; }
    .shop-nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 18px; gap: 16px; border-bottom: 1px solid var(--border); z-index: 40; }
    .shop-burger { display: block; }
    .shop-section, .shop-section.tight { padding: 40px 18px; }
    .section-head h2 { font-size: 26px; }
    .shop-hero { grid-template-columns: 1fr; }
    .shop-hero .copy { padding: 44px 24px; }
    .shop-hero h1 { font-size: 34px; }
    .shop-hero .img { min-height: 220px; }
    .works-grid { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
    .work-card .img { height: 150px; }
    .work-card .title { font-size: 15px; }
    .tile-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .discover-band { grid-template-columns: 1fr; gap: 40px; }
    .color-tiles a { height: 56px; font-size: 12px; }
    .upload-band { margin: 0 18px 40px; padding: 20px; }
    .usp-grid { grid-template-columns: 1fr; }
    .shop-footer { padding: 32px 18px; }
    .shop-footer .cols { grid-template-columns: 1fr; gap: 24px; }
    .product-layout { grid-template-columns: 1fr; gap: 24px; padding: 0 18px 40px; }
    .breadcrumbs { padding: 14px 18px 0; }
    .gallery-main { padding: 28px; min-height: 0; }
    .config h1 { font-size: 26px; }
    .mat-grid { grid-template-columns: 1fr 1fr; }
    .specs { grid-template-columns: 1fr; padding: 36px 18px; gap: 32px; }
    .collection-hero { padding: 32px 18px 4px; }
    .collection-hero h1 { font-size: 30px; }
    .shop-pagination { padding: 0 18px 40px; }
}

/* Taalwissel in de header */
.shop-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; border: 1px solid var(--border-input); border-radius: 6px; font: 800 12.5px 'Nunito Sans', sans-serif; color: var(--navy); padding: 2px 8px; }
.shop-lang:hover { border-color: var(--navy); color: var(--navy); }


/* ===== v3 (Fase 6): header, kaart, overlay ===== */
[x-cloak] { display: none !important; }
.shop-topbar .short { display: none; }
.shop-header img.logo { height: 52px; }
.shop-nav a.mobile-only, .shop-icons .mobile-only { display: none; }
.shop-search-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 250px; border: 2px solid #ece8df; border-radius: 999px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--sage); background: #faf7f0; }
.shop-search-pill:hover { border-color: var(--navy); color: var(--navy); }
/* Placeholder nooit op twee regels (DE-tekst is langer dan NL). */
.shop-search-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shop-search-pill svg { flex: none; }
.shop-heart-link { position: relative; }
.shop-header.minimal { justify-content: flex-start; gap: 20px; }
.shop-header.minimal .shop-minimal-title { font-family: Lora, serif; font-size: 20px; font-weight: 500; margin: 0; }
.shop-header.minimal .shop-secure { display: inline-flex; align-items: center; gap: 6px; }
.shop-header.minimal .shop-secure { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--sage); }
.shop-header.minimal .shop-back { font-size: 20px; }
.shop-footer.slim { display: flex; justify-content: space-between; padding: 24px 56px; font-size: 13px; }
.footer-legal { margin: 14px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--footer-text); max-width: 40ch; }

/* Kaart v3: beeld 260, badge linksboven, hartje rechtsboven, maker, rating, palet */
.works-grid { gap: 32px 28px; }
.work-card { position: relative; }
.work-card .img { display: flex; height: 260px; margin-bottom: 12px; position: relative; }
.work-card .title { display: block; font-size: 18px; line-height: 1.25; }
.work-card .sub { font-size: 13.5px; }
.wc-badge { position: absolute; top: 10px; left: 10px; font: 800 10px 'Nunito Sans', sans-serif; text-transform: uppercase; letter-spacing: .08em; padding: 4px 8px; border-radius: 4px; color: #fff; background: var(--navy); box-shadow: none; }
.wc-badge.nieuw { background: var(--rose); }
.wc-match { position: absolute; left: 10px; bottom: 10px; background: #fff; font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 4px; color: var(--navy); }
.wc-heart { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 6px rgba(73,87,110,.15); padding: 0; z-index: 2; }
.wc-heart:hover, .wc-heart.on { color: var(--rose); }
.wc-rating { font-size: 12.5px; color: var(--sage); margin-bottom: 4px; }
.wc-rating .star { color: #c9a05e; }
.wc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wc-foot .price { font-size: 14.5px; font-weight: 800; }
.wc-foot .price.muted { color: var(--sage); font-weight: 600; }
.wc-dots { display: inline-flex; gap: 4px; }
.wc-dots i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(73,87,110,.12); }

/* Zoek-overlay */
.search-overlay { position: fixed; inset: 0; background: rgba(73,87,110,.45); z-index: 100; padding: 48px 56px; overflow-y: auto; }
.search-panel { background: #fff; max-width: 1100px; margin: 0 auto; padding: 28px 32px 32px; box-shadow: 0 18px 50px rgba(73,87,110,.28); }
.search-row { display: flex; align-items: center; gap: 16px; border-bottom: 3px solid var(--navy); padding-bottom: 12px; }
.search-input { flex: 1; border: none; outline: none; font-family: Lora, serif; font-size: 22px; color: var(--navy); background: transparent; min-width: 0; }
.search-input::placeholder { color: var(--sage); }
.search-close { border: 1px solid var(--border-input); background: #fff; border-radius: 999px; padding: 8px 16px; font: 700 13px 'Nunito Sans', sans-serif; color: var(--navy); cursor: pointer; }
.search-clear { border: none; background: none; font: 700 13px 'Nunito Sans', sans-serif; color: var(--sage); cursor: pointer; }
.search-groups { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; padding-top: 24px; }
.search-groups .lbl, .search-empty .lbl { font: 800 12px 'Nunito Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); margin-bottom: 12px; }
.search-hit { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--navy); }
.search-hit .thumb { width: 72px; height: 72px; background: var(--creme-light); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.search-hit .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.search-hit .t { font-family: Lora, serif; font-size: 16.5px; font-weight: 600; }
.search-hit .s { font-size: 13px; color: var(--sage); }
.search-hit .p { font-size: 14px; font-weight: 800; }
.search-side-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--navy); }
.search-side-item .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--creme-light); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.search-side-item .t { font-weight: 700; font-size: 14.5px; }
.search-side-item .s { font-size: 12.5px; color: var(--sage); }
.search-all { display: inline-block; margin-top: 14px; font-weight: 800; border-bottom: 2px solid var(--creme); }
.search-empty { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 32px; padding-top: 24px; }
.search-empty a.item, .search-empty button.item { display: block; font-size: 14.5px; font-weight: 600; color: var(--navy); padding: 6px 0; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; }
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.search-chips a { background: var(--creme-light); font-weight: 700; font-size: 13px; padding: 8px 18px; border-radius: 999px; color: var(--navy); }
.search-recent-empty { font-size: 13.5px; color: var(--text-2); font-style: italic; margin: 0; line-height: 1.5; }
/* Zoek met een foto van je kamer (Zoeken.dc.html): rij onder de sfeerchips */
.search-photo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.search-photo label { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.search-photo .ico { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--navy); }
.search-photo .txt { display: flex; flex-direction: column; min-width: 0; }
.search-photo .txt strong { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.search-photo .txt span { font-size: 13px; color: var(--text-2); }
.search-photo label:hover .txt strong { text-decoration: underline; }
.search-photo .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Bezig-paneel: de gekozen foto in het midden, voortgangsbalk eronder, wisselende stap */
.search-scan { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 10px 0 22px; }
.search-scan-frame { position: relative; width: 340px; max-width: 100%; height: 250px; border-radius: 14px; overflow: hidden; background: var(--creme-light); box-shadow: 0 14px 40px rgba(73, 87, 110, .22); }
.search-scan-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-scan-line { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #fff; box-shadow: 0 0 18px 6px rgba(255, 255, 255, .8); animation: search-scan 1.8s ease-in-out infinite; }
@keyframes search-scan { 0% { top: 0; } 50% { top: calc(100% - 3px); } 100% { top: 0; } }
.search-scan-progress { position: relative; width: 260px; max-width: 80%; height: 6px; border-radius: 999px; background: var(--creme); overflow: hidden; }
.search-scan-progress span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 999px; background: var(--navy); animation: search-progress 1.4s ease-in-out infinite; }
@keyframes search-progress { 0% { left: -40%; } 60% { left: 100%; } 100% { left: 100%; } }
.search-scan-text { display: flex; flex-direction: column; gap: 6px; }
.search-scan-text strong { font-family: Lora, serif; font-size: 22px; font-weight: 500; color: var(--navy); }
.search-scan-text span { font-size: 14px; color: var(--text-2); animation: search-pulse 1.1s ease-in-out infinite; }
@keyframes search-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (max-width: 900px) {
    .search-scan-frame { width: 100%; height: 210px; }
    .search-scan-text strong { font-size: 19px; }
}
.search-none { padding-top: 24px; }
.search-none .t { font-family: Lora, serif; font-size: 22px; margin: 0 0 8px; }
.search-none .s { font-size: 14.5px; color: var(--text-2); margin: 0 0 16px; }

/* Filterbalk: mobiele toggle */
.cl-mobile-toggle { display: none; }
.cl-filterbar-inner { display: contents; }

@media (max-width: 900px) {
    .shop-topbar { font-size: 11px; padding: 6px; }
    .shop-topbar .full { display: none; }
    .shop-topbar .short { display: inline; }
    .shop-header img.logo { height: 38px; }
    .shop-search-pill { display: none; }
    .shop-nav a.mobile-only, .shop-icons .mobile-only { display: inline-flex; }
    .shop-lang { display: none; }
    .shop-icons { gap: 12px; margin-left: auto; }
    .shop-header.minimal { gap: 12px; }
    .shop-header.minimal .shop-minimal-title { font-size: 16px; }
    /* Copyright en juridische links onder elkaar, anders breekt het jaartal af. */
    .shop-footer .bottom { flex-direction: column; gap: 10px; }
    .shop-footer.slim { padding: 20px 18px; flex-direction: column; gap: 8px; }
    .works-grid { gap: 20px 14px; }
    .work-card .img { height: 170px; }
    .work-card .title { font-size: 15px; }
    .wc-rating, .wc-dots { display: none; }
    .search-overlay { padding: 0; }
    .search-panel { max-width: none; min-height: 100vh; padding: 16px 18px 32px; }
    .search-input { font-size: 16px; }
    .search-groups, .search-empty { grid-template-columns: 1fr; gap: 24px; padding-top: 18px; }
    .search-hit { grid-template-columns: 56px 1fr auto; }
    .search-hit .thumb { width: 56px; height: 56px; }
    .cl-mobile-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-input); background: #fff; border-radius: 999px; padding: 10px 18px; font: 700 13.5px 'Nunito Sans', sans-serif; color: var(--navy); min-height: 44px; }
    .cl-filterbar-inner { display: none; width: 100%; }
    .cl-filterbar-inner.open { display: flex; flex-direction: column; gap: 12px; }
}

/* Paginering v3 */
.shop-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shop-pager .pg { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--border-input); border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--navy); }
.shop-pager a.pg:hover { border-color: var(--navy); color: var(--navy); }
.shop-pager .pg.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.shop-pager .pg.disabled { color: var(--border-input); }
.shop-pager .pg-dots { border: none; min-width: 24px; padding: 0; }
.shop-pager .pg-info { margin-left: auto; font-size: 13px; color: var(--sage); }
@media (max-width: 900px) {
    .shop-pager { gap: 4px; }
    .shop-pager .pg { min-width: 36px; height: 36px; padding: 0 8px; font-size: 13.5px; }
    .shop-pager .pg-dots { min-width: 20px; }
    .shop-pager .pg-far { display: none; }
    .shop-pager .pg-info { width: 100%; margin-left: 0; margin-top: 8px; }
}

/* Lijst 2 (17-09-2026): belregel in de footer (D7) en de kaarttitel op een regel. */
.footer-phone:empty { display: none; }
.footer-phone .shop-phone-line a { color: #fff; font-weight: 700; }
.footer-phone .shop-phone-line em { font-style: normal; opacity: .8; }
.work-card .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lijst 2, item 11 (17-09-2026): "Toon meer" in plaats van paginanummers, en de kaart "Help me kiezen". */
.shop-more { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding-top: 8px; }
.shop-more .more-info { width: 100%; text-align: center; font-size: 13.5px; color: var(--sage); }
.shop-more .more-btn { min-height: 48px; padding: 0 32px; }
.shop-more .more-btn.loading { opacity: .6; pointer-events: none; }
.shop-more .more-prev { font-size: 13.5px; color: var(--sage); }
.help-card { display: block; }
.help-card .img { background: var(--navy); color: #fff; }
.help-card .help-card-mark { font-family: Lora, serif; font-size: 64px; font-weight: 600; line-height: 1; }
.help-card .help-card-cta { display: block; font-size: 14px; font-weight: 800; color: var(--navy); margin-top: 6px; }

/* Lijst 2, D16 (17-09-2026): kamerbeeld op hover van de werk-kaart (cards.js laadt het pas bij de eerste hover). */
.work-card .img .wc-hover { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; opacity: 0; transition: opacity .25s ease; pointer-events: none; box-shadow: none; }
@media (hover: hover) {
    .work-card.has-hover:hover .img .wc-hover, .work-card.has-hover:focus-within .img .wc-hover { opacity: 1; }
}
/* Lijst 2, item 13: bestsellers-pagina. */
.bs-intro { max-width: 720px; margin: 0 0 22px; font-size: 15.5px; line-height: 1.55; color: var(--navy); }
.bs-intro a { font-weight: 800; }

/* ===== Lijst 2 fase C (19-09-2026): home-hero op een echte kamerfoto, kamer kiezen, klantfoto's, makers ===== */
.shop-hero .img.scene { padding: 0; background: var(--navy); }
.hero-frame { position: relative; width: 100%; background-size: 100% 100%; background-repeat: no-repeat; }
.hero-art { position: absolute; transform: translate(-50%, -50%); display: block; box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.hero-art img { display: block; width: 100%; height: auto; }
.hero-label { position: absolute; left: 20px; bottom: 20px; background: #fff; color: var(--navy); padding: 10px 14px; border-radius: 8px; display: flex; flex-direction: column; gap: 2px; max-width: 60%; box-shadow: 0 8px 20px rgba(0,0,0,.18); text-decoration: none; }
.hero-label strong { font-family: Lora, serif; font-weight: 600; font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-label span { font-size: 12.5px; color: var(--text-2); }
.hero-label:hover strong { color: var(--rose); }
.room-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 56px; background: var(--creme-light); border-bottom: 1px solid var(--border); }
.room-pick .kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); margin-bottom: 10px; }
.room-pick h2 { font-size: 32px; margin: 0 0 10px; }
.room-pick p { font-size: 16px; line-height: 1.6; color: var(--text-2); margin: 0; max-width: 46ch; }
.room-pick-form { display: flex; flex-direction: column; gap: 12px; }
.room-pick-drop { display: flex; align-items: center; gap: 16px; background: #fff; border: 2px dashed var(--creme); border-radius: 12px; padding: 18px 22px; cursor: pointer; transition: border-color .15s; }
.room-pick-drop:hover { border-color: var(--navy); }
.room-pick-drop .ico { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--creme-light); display: inline-flex; align-items: center; justify-content: center; color: var(--navy); }
.room-pick-drop .txt { display: flex; flex-direction: column; }
.room-pick-drop .txt strong { font-size: 16px; color: var(--navy); }
.room-pick-drop .txt span { font-size: 13px; color: var(--text-2); }
.room-pick-alt { font-size: 14px; font-weight: 700; color: var(--sage); }
.room-pick-alt:hover { color: var(--navy); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.customer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.customer-grid figure { margin: 0; }
.customer-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 6px; }
.customer-grid figcaption { font-size: 13px; color: var(--sage); margin-top: 8px; }
.makers-band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 72px 56px; background: var(--navy); color: #fff; }
.makers-band .kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--creme); margin-bottom: 12px; }
.makers-band h2 { font-size: 34px; margin: 0 0 14px; color: #fff; }
.makers-band p { font-size: 16px; line-height: 1.7; color: var(--footer-text); margin: 0 0 22px; max-width: 46ch; }
.makers-band img { display: block; width: 100%; height: auto; border-radius: 6px; }
.makers-band .placeholder-note { font-size: 12px; color: var(--footer-text); margin-top: 10px; }
.makers-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.makers-chips a { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.makers-chips a span { font-weight: 400; color: var(--footer-text); margin-left: 6px; }
.makers-chips a:hover { background: rgba(255,255,255,.16); }
.makers-ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.makers-ctas .btn-primary { background: var(--creme); color: var(--navy); }
.makers-ctas .btn-primary:hover { background: var(--creme-hover); color: var(--navy); }
.makers-ctas .link-accent { color: var(--creme); }
@media (max-width: 900px) {
    .shop-hero .img.scene { min-height: 0; }
    .hero-label { left: 12px; bottom: 12px; max-width: 75%; }
    .room-pick { grid-template-columns: 1fr; gap: 22px; padding: 32px 18px; }
    .room-pick h2 { font-size: 26px; }
    .customer-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .makers-band { grid-template-columns: 1fr; gap: 24px; padding: 40px 18px; }
    .makers-band h2 { font-size: 26px; }
}

/* Kleurkaarten op de home (19-09-2026): werk op een zachte tint, tintstreep, naam. */
.color-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.color-card { display: flex; flex-direction: column; color: var(--navy); }
.color-card .field { display: flex; align-items: center; justify-content: center; height: 118px; padding: 12px; border-radius: 6px 6px 0 0; }
.color-card .field img { max-width: 78%; max-height: 92px; width: auto; height: auto; box-shadow: 0 10px 22px rgba(0,0,0,.22); transition: transform .2s; }
.color-card:hover .field img { transform: translateY(-3px); }
.color-card .strip { display: flex; height: 5px; overflow: hidden; }
.color-card .strip i { flex: 1; display: block; }
.color-card .name { font-size: 13px; font-weight: 800; padding: 8px 2px 0; }
.color-card:hover .name { color: var(--rose); }
@media (max-width: 900px) {
    .color-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .color-card .field { height: 96px; }
    .color-card .field img { max-height: 74px; }
}

/* ===== Home, ronde Rob 21-09-2026 ===== */
/* Hero: de kamerfoto vult het hele vlak. Het navy kwam boven en onder de foto door, omdat de
   tekstkolom hoger is dan de foto. De foto houdt zijn verhouding (het werk hangt op procenten
   van de foto) en wordt zo groot dat hij het vlak dekt; wat oversteekt valt links en rechts weg. */
@media (min-width: 901px) {
    .shop-hero .img.scene { position: relative; overflow: hidden; container-type: size; }
    .shop-hero .img.scene .hero-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100cqw, calc(100cqh * var(--w) / var(--h))); }
}
/* Nu geliefd: het werk groter in het vlak, de ruimte boven en onder gehalveerd (26 naar 13). */
.home-loved .work-card .img { padding: 13px 26px; }
/* Shop per kamer: twintig procent meer hoogte (130 naar 156). */
.room-tiles .tile { height: 156px; }
/* Hero-label rechts onderin (Rob 21-09-2026, was links); hangt aan het vlak, niet aan de foto die iets oversteekt. */
.shop-hero .img.scene { position: relative; }
.hero-label { left: auto; right: 20px; }
/* "Liever je eigen foto" in de cremekleur, zodat het blok met de drie beloftes erboven wit blijft. */
/* Over de volle breedte, tot tegen de footer (Rob 21-09-2026): geen kader met marge meer. */
.upload-band { background: var(--creme-light); border: none; margin: 0; padding: 36px 56px; }
@media (max-width: 900px) { .upload-band { margin: 0; padding: 28px 18px; } }
/* Blijf op de hoogte: breder en gecentreerd. */
.footer-newsletter { text-align: center; padding: 36px 0 32px; }
.footer-newsletter strong { font-size: 18px; margin-bottom: 14px; }
.footer-newsletter .nl-form { max-width: 640px; margin: 0 auto; }
.footer-newsletter .nl-form input { padding: 14px 16px; }
.footer-newsletter .nl-form button { padding: 14px 28px; }

/* ===== Kunstwerken-ronde Rob 21-09-2026 ===== */
/* Het rooster liep rechts uit beeld en de kolommen waren ongelijk breed: een titel op een regel
   (nowrap) en een liggend beeld drukten hun kolom open, want 1fr is minimaal zo breed als zijn
   inhoud. minmax(0, 1fr) plus min-width 0 houdt de vier kolommen gelijk. Geldt voor elk rooster. */
.works-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work-card { min-width: 0; }
/* display: block: op de tussenkaarten zijn dit spans, en op een inline element doet overflow niets (de pagina liep op de telefoon 13 px uit beeld). */
.work-card .sub, .work-card .help-card-cta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tussenkaarten: eigen foto, kamer, kleur (de keuzehulp is de bestaande help-card). */
.promo-card .img { color: #fff; }
.promo-eigen-foto .img { background: var(--rose); }
.promo-kamer .img { background: var(--sage); }
.promo-bestsellers .img { background: var(--creme); color: var(--navy); }
/* align-items: stretch is nodig: het vlak erft van de kaart 'center', en dan zijn de kleurvakjes nul hoog (leeg vlak, 21-09-2026). */
.promo-kleur .img { background: var(--creme-light); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); align-items: stretch; justify-items: stretch; }
.promo-kleur .img i { display: block; }

/* Betaalmethoden als logo plus naam (shop/partials/payment-methods, Rob 23-09-2026) */
.paym-list { display: flex; flex-wrap: wrap; gap: 8px; }
.paym-list.center { justify-content: center; }
.paym-item { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px; background: #fff; border: 1px solid #e6e1d6; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--navy); }
.paym-item img { width: auto; display: block; border-radius: 4px; }

/* Botval (FormGuard, 24-09-2026): honeypotveld buiten beeld, niet display:none (sommige bots slaan verborgen velden over). */
.fg-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }