/* Layout: smalle balk met zoekveld en winkelwagen, hero met sfeerillustratie, productraster, winkelwagen als zijpaneel. */
:root {
  --bg: #F3F6F4; --surface: #FFFFFF; --fg: #15271E; --muted: #526659; --line: #D6E1DA;
  --pine: #1B4A37; --pine-fg: #F3F6F4; --accent: #B0233B; --accent-fg: #FFFFFF; --gold: #A5761F; --ok: #1F7A4A;
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1914; --surface: #172620; --fg: #E8F0EB; --muted: #A3B7AB; --line: #2A3D33;
    --pine: #0A2A1D; --pine-fg: #E8F0EB; --accent: #E4586F; --accent-fg: #160608; --gold: #D9A94B; --ok: #62C58F; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1914; --surface: #172620; --fg: #E8F0EB; --muted: #A3B7AB; --line: #2A3D33;
  --pine: #0A2A1D; --pine-fg: #E8F0EB; --accent: #E4586F; --accent-fg: #160608; --gold: #D9A94B; --ok: #62C58F; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.5; margin: 0; padding-block: 0 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wrap { max-width: 1180px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

.demo { background: #F4C95D; color: #2A2110; font-size: .85rem; text-align: center; padding: 6px 16px; font-weight: 500; }
.top { background: var(--pine); color: var(--pine-fg); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
.bar { display: flex; align-items: center; gap: 14px 22px; padding-block: 12px; flex-wrap: wrap; }
.logo { font-family: var(--font-display); font-size: 1.5rem; white-space: nowrap; }
.logo b { font-weight: inherit; color: #F08A9B; }
.search { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--surface); color: var(--fg); border-radius: 999px; padding: 4px 16px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; outline: none; }
.search:focus-within { outline: 3px solid var(--gold); }
.cartbtn { position: relative; background: transparent; border: 1px solid rgba(255,255,255,.4); color: var(--pine-fg); border-radius: 999px; padding: 8px 16px; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.cartbtn .n { background: var(--accent); color: var(--accent-fg); border-radius: 999px; min-width: 22px; height: 22px; display: grid; place-items: center; font-size: .78rem; padding-inline: 6px; font-variant-numeric: tabular-nums; }
.nav { display: flex; gap: 18px; font-weight: 600; font-size: .95rem; }
.nav a { color: var(--pine-fg); text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.note { font-size: .78rem; color: var(--muted); font-weight: 400; }
.steps { counter-reset: s; }
.steps h3::before { counter-increment: s; content: counter(s); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-family: var(--font-body); font-size: .9rem; font-weight: 700; margin-right: 10px; vertical-align: 2px; }
.about { padding-block: 32px 8px; display: grid; gap: 10px; max-width: 46rem; }
.about h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0; }
.about p { margin: 0; color: var(--muted); }
.sfeer { margin: 0; position: relative; height: clamp(260px, 50vw, 600px); overflow: hidden; background: #1a120a; }
.sfeer img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.themebtn { background: transparent; border: 0; color: var(--pine-fg); text-decoration: underline; font-size: .85rem; padding: 6px; }

.hero { position: relative; overflow: hidden; background: #0E2A3F; color: #F3F6F4; isolation: isolate; }
.hero svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,22,34,.92) 0%, rgba(8,22,34,.6) 45%, rgba(8,22,34,0) 78%); }
.hero-in { padding-block: 64px 130px; display: grid; gap: 14px; max-width: 34rem; }
.hero .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: #F4C95D; margin: 0; }
.hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 5.5vw, 3.5rem); line-height: 1.08; margin: 0; text-wrap: balance; }
.hero p { margin: 0; color: #CFE0D7; }
.btn { display: inline-block; background: var(--accent); color: var(--accent-fg); border: 2px solid var(--accent); border-radius: 8px; padding: 11px 20px; font-weight: 600; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn.sm { padding: 8px 14px; font-size: .9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 700px) { .hero::after { background: linear-gradient(180deg, rgba(8,22,34,.9) 0%, rgba(8,22,34,.6) 60%, rgba(8,22,34,.1) 100%); } .hero-in { padding-block: 40px 190px; } }
@media (prefers-reduced-motion: no-preference) { .snow { animation: fall 14s linear infinite; } }
@keyframes fall { from { transform: translateY(0); } to { transform: translateY(420px); } }

/* Homepage: collage met sfeerfoto's */
.hero { background: linear-gradient(160deg, #0B2A1E 0%, #12392B 60%, #1B4A37 100%); }
.hero::after { display: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; padding-block: 40px; }
.hero-grid .hero-in { padding-block: 0; max-width: 34rem; }
.collage { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 1.15 / 1; min-width: 0; }
.collage figure { margin: 0; overflow: hidden; border-radius: 12px; background: #111; min-width: 0; }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage .c1 { grid-row: 1 / 3; }
@media (max-width: 760px) { .hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: 28px; gap: 24px; } .hero-grid .hero-in { padding-block: 0; } .collage { aspect-ratio: 1.25 / 1; } }

.usps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 20px; padding-block: 14px; font-size: .9rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.usps span { display: flex; gap: 8px; align-items: center; }
.usps b { color: var(--ok); }

.shop { padding-block: 28px 20px; }
.shophead { display: flex; align-items: end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.shophead h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-weight: 500; font-size: .9rem; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tools select { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.count { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 20px 0 0; padding: 0; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 400px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.card .view { all: unset; display: flex; flex-direction: column; cursor: pointer; flex: 1; min-width: 0; }
.card .view:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.photo { position: relative; aspect-ratio: 1; overflow: hidden; background: #fff; }
.photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.badge { position: absolute; top: 8px; left: 8px; background: var(--accent); color: var(--accent-fg); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 4px; }
.info { padding: 12px 14px 4px; display: grid; gap: 2px; }
.cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.price { padding: 4px 14px 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price s { color: var(--muted); font-weight: 400; margin-right: 6px; }
.add { margin: 0 12px 12px; }
.empty { text-align: center; color: var(--muted); padding: 48px 0; }

.promo { background: var(--pine); color: var(--pine-fg); }
.promo .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; padding-block: 36px; }
.promo h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin: 0 0 6px; }
.promo p { margin: 0; color: #BFD6C9; }

footer { padding-block: 28px; color: var(--muted); font-size: .9rem; display: grid; gap: 6px; }
footer strong { color: var(--fg); }

/* Zijpanelen en dialogen */
.veil { position: fixed; inset: 0; background: rgba(6, 16, 11, .6); z-index: 30; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface); z-index: 31; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: -8px 0 30px rgba(0,0,0,.25); }
.dhead { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dhead h2 { font-family: var(--font-display); font-weight: 400; margin: 0; font-size: 1.35rem; }
.x { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
.dbody { flex: 1; overflow: auto; padding: 8px 20px; }
.dfoot { border-top: 1px solid var(--line); padding: 16px 20px; display: grid; gap: 8px; }
.line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.line .photo { aspect-ratio: 1; border-radius: 8px; }
.line .t { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; }
.qty button { background: none; border: 0; width: 32px; height: 32px; font-size: 1.1rem; }
.qty span { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.lp { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.rm { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: .8rem; padding: 0; display: block; margin-top: 4px; margin-left: auto; }
.sum { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.sum.big { font-weight: 700; font-size: 1.15rem; }
.free { font-size: .85rem; color: var(--muted); }
.bar-free { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar-free i { display: block; height: 100%; background: var(--ok); }

.modal { position: fixed; z-index: 31; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(780px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; background: var(--surface); border-radius: 14px; }
.pd { display: grid; grid-template-columns: 1.1fr 1fr; }
@media (max-width: 640px) { .pd { grid-template-columns: minmax(0, 1fr); } }
.pd .photo { aspect-ratio: 1; min-height: 0; }
.gal { min-width: 0; }
.thumbs { display: flex; gap: 8px; padding: 8px; background: #fff; }
.th { width: 64px; height: 64px; padding: 0; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd .body { padding: 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.pd h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; margin: 0; }
.pd p { margin: 0; color: var(--muted); }
.bigprice { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bigprice s { color: var(--muted); font-weight: 400; font-size: 1rem; margin-right: 6px; }

form.co { display: grid; gap: 12px; }
.f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 420px) { .f2 { grid-template-columns: minmax(0, 1fr); } }
.fld { display: grid; gap: 4px; min-width: 0; }
.fld label { font-size: .78rem; font-weight: 600; color: var(--muted); }
.fld input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; width: 100%; }
.fld input[aria-invalid="true"] { border-color: var(--accent); }
.err { color: var(--accent); font-size: .8rem; min-height: 1em; }
.pay { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.pay legend { font-size: .78rem; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 4px; }
.pay label { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.pay input { accent-color: var(--accent); }
.done { padding: 28px 22px; display: grid; gap: 12px; text-align: center; justify-items: center; }
.done h2 { font-family: var(--font-display); font-weight: 400; margin: 0; }
.done .ok { width: 56px; height: 56px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 1.8rem; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--pine); color: var(--pine-fg); padding: 10px 16px; border-radius: 8px; z-index: 40; font-size: .9rem; max-width: calc(100% - 32px); }

/* Informatiepagina's */
.logo a { color: inherit; text-decoration: none; }
.page { padding-block: 36px 24px; }
.page > * { max-width: 46rem; }
.page h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.15; margin: 0 0 8px; }
.page .lead { color: var(--muted); margin: 0 0 24px; }
.page h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin: 28px 0 8px; }
.page p, .page li { color: var(--fg); }
.page ul { padding-left: 1.2em; }
.page a { color: var(--accent); }
.card-info { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; display: grid; gap: 6px; }
.card-info dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; }
.card-info dt { color: var(--muted); font-weight: 600; }
.card-info dd { margin: 0; overflow-wrap: anywhere; }
.flinks { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.flinks a { color: var(--muted); }

/* Koopgidsen */
.gidsen { padding-block: 32px 8px; }
.gidsen h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 6px; }
.gidsen > p { color: var(--muted); margin: 0 0 18px; }
.ggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 800px) { .ggrid { grid-template-columns: minmax(0, 1fr); } }
.gcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.gcard a { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.gcard img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #fff; display: block; }
.gcard .gb { padding: 14px 16px 18px; display: grid; gap: 6px; }
.gcard .gk { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); font-weight: 700; }
.gcard h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.25; margin: 0; }
.gcard p { margin: 0; color: var(--muted); font-size: .92rem; }
.gcard a:hover h3 { text-decoration: underline; }
.gids article { max-width: 46rem; }
.crumbs { font-size: .85rem; color: var(--muted); margin: 0 0 12px; }
.crumbs a { color: var(--muted); }
.ghero { margin: 0 0 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ghero img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.gids h2 { margin-top: 32px; }
.gids li { margin-bottom: 6px; }
.gpicks { list-style: none; padding: 0 !important; margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 520px) { .gpicks { grid-template-columns: minmax(0, 1fr); } }
.gp { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 0 !important; }
.gp img { width: 88px; height: 88px; object-fit: contain; background: #fff; border-radius: 6px; }
.gp div { display: grid; gap: 4px; min-width: 0; }
.gp strong { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.gp span { color: var(--muted); font-size: .9rem; }
.gp .btn { justify-self: start; color: var(--accent-fg); text-decoration: none; }
.gcta { margin: 32px 0 16px; background: var(--pine); color: var(--pine-fg); border-radius: 12px; padding: 20px 22px; display: grid; gap: 12px; justify-items: start; }
.gcta p { margin: 0; color: var(--pine-fg) !important; }
.gcta .btn { color: var(--accent-fg); text-decoration: none; }
.page .note { font-size: .85rem; color: var(--muted); }