/* Wijnkastconfigurator. Volgt de VTStudio-shell (studio.css) met een warmere eigen identiteit. */
.wine-page { --wine-bg:#0b0a08; --wine-panel:#12100d; --wine-card:#18150f; --wine-line:#30291f; --wine-line-strong:#4a3f2f; --wine-gold:#e2c48c; --wine-gold-soft:#b89c6c; --wine-text:#efe9de; --wine-muted:#b3a993; --wine-dim:#8f856f; --wine-accent:#e6c88f; background:var(--wine-bg); }
.wine-page [hidden] { display:none !important; }
.wine-page .eyebrow { color:var(--wine-gold); }
.wine-main { width:94%; max-width:1480px; margin:0 auto; padding:26px 0 0; }
.wine-back { font-size:12px; color:var(--wine-muted) !important; }
.wine-back:hover { color:var(--wine-accent) !important; }
.wine-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin:28px 0 30px; }
.wine-heading .eyebrow { font-size:10px; letter-spacing:.22em; color:var(--wine-gold); }
.wine-heading h1 { font-size:clamp(32px, 3.5vw, 52px); line-height:1.12; }
.wine-heading h1 span { color:var(--wine-gold); }
.wine-heading > p { font-size:14px; color:var(--wine-muted); text-align:right; }
.wine-page button { font-family:inherit; }
.wine-page button:disabled { opacity:.38; cursor:default; }
.wine-page select, .wine-page input[type=number], .wine-page input[type=text] { width:100%; min-height:40px; border:1px solid #3d3428; border-radius:6px; background:#1a1611; color:var(--wine-text); padding:10px; font:12px Arial, sans-serif; color-scheme:dark; }
.wine-page input[type=number] { appearance:textfield; min-width:0; }
.wine-page select { cursor:pointer; }
.wine-page :focus-visible { outline:2px solid var(--wine-accent); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.form-error { color:#f1c8a0; font-size:12px; line-height:1.5; margin-top:12px !important; min-height:1em; }
.helper-copy { font-size:11px; color:var(--wine-dim); line-height:1.6 !important; margin-top:9px !important; }
.check-field { display:flex; align-items:center; gap:10px; font-size:12px; color:#d7cdb9; margin:16px 0; cursor:pointer; line-height:1.5; }
.check-field input { accent-color:var(--wine-accent); width:17px; height:17px; flex:0 0 auto; }

/* ------------------------------------------------------------- vragenlijst */
.wine-quiz { border:1px solid var(--wine-line); border-radius:16px; background:radial-gradient(ellipse at 85% 0%, #3a2a1724, transparent 55%), var(--wine-panel); padding:clamp(22px, 3.5vw, 44px); margin-bottom:24px; }
.resume-banner { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 18px; margin-bottom:24px; border:1px solid #6d5a37; border-radius:9px; background:#241d12; font-size:12px; color:#eadcc0; }
.resume-banner > div { display:flex; gap:8px; flex-wrap:wrap; }
.resume-banner button { border:1px solid #7f6a43; border-radius:6px; background:none; color:#f0e3c7; font-size:11px; padding:9px 12px; cursor:pointer; }
.resume-banner #resume-design { background:var(--wine-gold); border-color:var(--wine-gold); color:#21190b; font-weight:600; }
.quiz-top { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.quiz-top .eyebrow { font-size:10px; color:var(--wine-gold); margin-bottom:6px !important; }
.quiz-count { font-size:12px; color:var(--wine-muted); }
.quiz-skip { background:none; border:0; border-bottom:1px solid #6b5d45; color:#d8ccb3; font-size:12px; padding:6px 0; cursor:pointer; }
.quiz-skip:hover { color:var(--wine-accent); border-color:var(--wine-accent); }
.quiz-progress { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; list-style:none; padding:0; margin:20px 0 30px; }
/* studio.css zet ol-marges op 0 (hogere specificiteit); hier de ruimte tussen stapbalk en vraag terugzetten. */
.wine-page .quiz-progress { margin:20px 0 34px; }
.quiz-progress li { height:3px; border-radius:3px; background:#2e271d; transition:background .25s; }
.quiz-progress li.done { background:var(--wine-gold-soft); }
.quiz-progress li.active { background:var(--wine-accent); }
.quiz-step { border:0; padding:0; margin:0; min-width:0; }
.quiz-step legend { float:left; width:100%; font-size:clamp(24px, 2.6vw, 34px); font-weight:750; letter-spacing:-.03em; line-height:1.15; padding:0; outline:none; }
.quiz-step legend span { color:var(--wine-gold); font-size:.55em; vertical-align:.45em; margin-right:6px; letter-spacing:0; }
.quiz-help { clear:both; color:var(--wine-muted); font-size:14px; margin:10px 0 22px !important; max-width:680px; }
.drink-options { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; }
.option-card, .choice-card, .mood-card { position:relative; display:flex; flex-direction:column; gap:6px; border:1px solid var(--wine-line-strong); border-radius:11px; background:var(--wine-card); padding:18px 16px; cursor:pointer; color:var(--wine-text); transition:border-color .2s, background .2s, transform .2s; }
.option-card:hover, .choice-card:hover, .mood-card:hover { border-color:#8b7650; }
.option-card input, .choice-card input, .mood-card input { position:absolute; top:12px; right:12px; width:16px; height:16px; accent-color:var(--wine-accent); }
.option-card:has(input:checked), .choice-card:has(input:checked), .mood-card:has(input:checked) { border-color:var(--wine-accent); background:#2a2114; box-shadow:inset 0 0 0 1px #e2c48c55; }
.option-card:has(input:focus-visible), .choice-card:has(input:focus-visible), .mood-card:has(input:focus-visible), .swatch-radio:has(input:focus-visible) { outline:2px solid var(--wine-accent); outline-offset:3px; }
.option-card svg { width:34px; height:96px; fill:#3a3227; stroke:var(--wine-gold-soft); stroke-width:1.4; margin:4px 0 10px; }
.option-card:has(input:checked) svg { fill:#4e3e24; stroke:var(--wine-gold); }
.option-card strong, .choice-card strong, .mood-card strong { font-size:15px; }
.option-card span, .choice-card span, .mood-card span:not(.mood-visual) { font-size:12px; color:var(--wine-muted); line-height:1.45; }
.choice-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; }
.choice-grid.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.inline-number, .share-slider { display:flex; align-items:center; gap:14px; margin-top:20px; font-size:13px; color:#ddd2bd; flex-wrap:wrap; }
.inline-number span { display:flex; align-items:center; gap:8px; color:var(--wine-muted); }
.inline-number input { width:110px !important; }
.share-slider { display:grid; grid-template-columns:auto 1fr; max-width:620px; }
.share-slider output { justify-self:end; color:var(--wine-gold); font-size:13px; }
.share-slider input { grid-column:1 / -1; width:100%; accent-color:var(--wine-accent); height:26px; }
.mood-options { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; }
.mood-visual { display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:56px 10px; gap:3px; border-radius:7px; overflow:hidden; margin-bottom:8px; }
.mood-visual i { display:block; background:var(--finish); }
.mood-visual i:nth-child(1) { grid-row:1 / 3; }
.mood-visual i.metal { grid-column:2 / 4; background:linear-gradient(90deg, var(--finish), #fff6 50%, var(--finish)); }
.mix-options { display:grid; gap:16px; margin-top:22px; padding:18px; border:1px dashed #5a4c35; border-radius:11px; }
.mix-group { border:0; padding:0; margin:0; min-width:0; }
.mix-group legend { font-size:12px; color:var(--wine-gold); margin-bottom:9px; letter-spacing:.06em; }
.mix-group > div { display:flex; flex-wrap:wrap; gap:8px; }
.swatch-radio { position:relative; display:flex; align-items:center; gap:7px; padding:6px 10px 6px 6px; border:1px solid #3c3326; border-radius:30px; cursor:pointer; font-size:11px; color:#d9ceb8; }
.swatch-radio input { position:absolute; opacity:0; }
.swatch-radio:has(input:checked) { border-color:var(--wine-accent); background:#2a2114; }
.swatch { width:22px; height:22px; border-radius:50%; background:var(--finish); box-shadow:inset 0 0 0 1px #fff2; }
.swatch.wood { background:repeating-linear-gradient(95deg, #ffffff10 0 2px, #2a170814 3px 4px, transparent 5px 9px), var(--finish); }
.swatch.metal { background:linear-gradient(135deg, var(--finish), #fff8 55%, var(--finish)); }
.size-options { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; }
.size-outline { display:flex; align-items:end; height:64px; margin-bottom:6px; }
.size-outline i { display:block; width:calc(var(--w, .5) * 100%); height:calc(var(--h, .8) * 100%); min-width:22px; border:1.5px solid var(--wine-gold-soft); border-radius:3px; background:repeating-linear-gradient(90deg, transparent 0 calc(33% - 1px), #b89c6c55 calc(33% - 1px) 33%); }
.size-outline.custom i { width:56%; height:76%; border-style:dashed; background:none; }
.dimension-inputs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:20px; max-width:620px; }
.dimension-inputs.two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.dimension-inputs label { color:#c9bea7; font-size:11px; }
.dimension-inputs label > span { display:flex; align-items:center; gap:6px; margin-top:6px; color:var(--wine-dim); }
.dimension-inputs input { text-align:center; }
.quiz-nav { display:flex; justify-content:space-between; gap:14px; margin-top:30px; padding-top:22px; border-top:1px solid var(--wine-line); }
.quiz-nav button { border:1px solid #4d4232; border-radius:8px; padding:14px 20px; background:none; color:#e1d6c0; font-size:13px; cursor:pointer; }
.quiz-nav .quiz-primary { background:var(--wine-accent); border-color:var(--wine-accent); color:#21190b; font-weight:700; min-width:200px; }
.quiz-nav .quiz-primary:hover { background:#f2dbab; }

/* ------------------------------------------------------------- werkruimte */
.wine-workspace { display:grid; grid-template-columns:minmax(0, 1fr) 390px; gap:24px; align-items:start; }
.wine-viewer-column { min-width:0; position:sticky; top:100px; }
.wine-stage { position:relative; height:clamp(480px, 44vw, 700px); overflow:hidden; border-radius:14px; background:#e3ddd3; isolation:isolate; color:#3b3226; }
.wine-stage canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.wine-stage canvas:active { cursor:grabbing; }
.stage-topline { position:absolute; left:22px; right:22px; top:20px; display:flex; justify-content:space-between; gap:10px; font-size:10px; color:#63584a; pointer-events:none; letter-spacing:.03em; }
.live-label { display:flex; align-items:center; gap:8px; font-size:9px; font-weight:700; letter-spacing:.16em; }
.live-label i { width:6px; height:6px; border-radius:50%; background:#c08a3e; }
.view-buttons { position:absolute; top:46px; left:18px; display:flex; gap:3px; padding:4px; border-radius:8px; background:#fffbf3b8; border:1px solid #0000000f; backdrop-filter:blur(8px); }
.view-buttons button, .stage-tools button { border:0; background:none; color:#4a3f30; border-radius:5px; padding:9px 11px; font:11px Arial, sans-serif; cursor:pointer; }
.view-buttons [aria-pressed=true] { background:#2f2617; color:#fff7e8; }
.stage-tools { position:absolute; left:18px; right:18px; bottom:16px; display:flex; gap:6px; flex-wrap:wrap; }
.stage-tools button { border:1px solid #b7aa9375; background:#fbf7efe6; backdrop-filter:blur(8px); }
.stage-tools [aria-pressed=true] { background:#efe2c4; border-color:#b49a62; }
.stage-tools #fit-view { margin-left:auto; font-size:15px; padding-block:6px; }
.measure-label, .selection-tag { position:absolute; transform:translate(-50%, -50%); pointer-events:none; white-space:nowrap; font-size:10px; }
.measure-label { background:#fffbf2e8; border:1px solid #c5b79d; border-radius:5px; padding:5px 8px; color:#54472f; }
.selection-tag { transform:translate(-50%, -120%); background:#2a2114; color:#fbf0da; border:1px solid #e2c48c; border-radius:20px; padding:5px 10px; font-weight:600; box-shadow:0 4px 18px #0003; }
.wine-loading, .wine-error { position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; background:#e3ddd3; color:#54472f; text-align:center; font-size:13px; }
.loading-mark { width:34px; height:34px; border-radius:50%; border:2px solid #c6b48d; border-top-color:#5d4a26; animation:wine-spin 1s linear infinite; }
@keyframes wine-spin { to { transform:rotate(360deg); } }
.wine-error button { background:#2f2617; color:#fff; border:0; border-radius:7px; padding:12px 16px; cursor:pointer; }
.design-metrics { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:18px 4px; border-bottom:1px solid var(--wine-line); }
.design-metrics > div { padding-left:16px; border-left:1px solid var(--wine-line); }
.design-metrics > div:first-child { padding-left:0; border:0; }
.design-metrics span { display:block; font-size:9px; letter-spacing:.13em; color:var(--wine-dim); margin-bottom:7px; }
.design-metrics strong { font-size:19px; font-weight:500; letter-spacing:-.02em; }
.design-metrics > div:last-child strong { color:var(--wine-gold); }
.map-heading { display:flex; justify-content:space-between; gap:16px; margin:16px 0 10px; font-size:11px; color:var(--wine-dim); }
.map-heading span { white-space:nowrap; }
.cabinet-map { display:flex; gap:5px; align-items:stretch; height:190px; padding:10px; border:1px solid var(--wine-line); border-radius:10px; background:#100e0b; }
.map-column { display:flex; flex-direction:column; gap:5px; min-width:42px; }
.map-sections { flex:1; display:flex; flex-direction:column; gap:3px; min-height:0; }
.map-section { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-height:22px; overflow:hidden; border:1px solid #3b3226; border-radius:4px; background:#1c1812; color:#cfc3aa; font-size:9px; line-height:1.15; cursor:pointer; padding:2px; text-align:center; }
.map-section b { font-weight:600; color:#efe5cf; font-size:10px; }
.map-section.kind-display, .map-section.kind-cubby, .map-section.kind-upright { background:#251d12; }
.map-section.kind-accessories { background:#17191a; }
.map-section.front-glass { box-shadow:inset 0 0 0 2px #e2c48c22; }
.map-section.front-door, .map-section.front-drawer { background-image:linear-gradient(135deg, #ffffff07 25%, transparent 25% 50%, #ffffff07 50% 75%, transparent 75%); background-size:8px 8px; }
.map-section[aria-pressed=true] { border-color:var(--wine-accent); background:#2e2416; color:#fbf0da; box-shadow:0 0 0 1px var(--wine-accent); }
.map-section:hover { border-color:#8b7650; }
.map-label { font-size:9px; text-align:center; color:var(--wine-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.map-label.active { color:var(--wine-accent); }
.design-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.design-actions button { border:1px solid #4a3e2c; border-radius:7px; padding:12px 15px; font-size:11px; background:#16130e; color:#e3d7bf; cursor:pointer; }
.design-actions button:first-child { background:var(--wine-gold); border-color:var(--wine-gold); color:#21190b; font-weight:600; }
.design-actions button span { margin-right:6px; }

/* ------------------------------------------------------------- paneel */
.wine-panel { background:var(--wine-panel); border:1px solid var(--wine-line); border-radius:14px; padding:22px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; }
.panel-heading .eyebrow { font-size:8px; letter-spacing:.16em; color:var(--wine-gold); margin-bottom:8px !important; }
.panel-heading h2 { font-size:26px; }
.panel-heading h2 span { color:var(--wine-gold); }
.history-buttons { display:flex; gap:4px; }
.history-buttons button { width:34px; height:34px; border:1px solid #43392b; border-radius:6px; background:none; color:#e3d7bf; font-size:19px; cursor:pointer; }
.selection-summary { display:grid; gap:8px; padding:14px; border:1px solid #e2c48c66; border-radius:9px; background:#1c170f; }
.selection-summary > div:first-child { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.selection-summary span { font-size:9px; letter-spacing:.12em; color:#c9ab70; }
.selection-summary strong { font-size:13px; font-weight:600; }
.summary-kind { display:grid; gap:3px; }
.summary-kind strong { font-size:15px; color:#fbf0da; }
.summary-kind span { font-size:11px !important; letter-spacing:0 !important; color:#d8c9a8 !important; }
.config-tabs { display:grid; grid-template-columns:repeat(4, 1fr); margin:18px 0 18px; border-bottom:1px solid var(--wine-line); }
.config-tabs button { border:0; border-bottom:2px solid transparent; background:none; padding:12px 0; color:#8b7f68; font-size:9px; cursor:pointer; }
.config-tabs button span { font-size:11px; margin-left:3px; color:#bdb19a; }
.config-tabs [aria-selected=true] { color:var(--wine-accent); border-bottom-color:var(--wine-accent); }
.config-tabs [aria-selected=true] span { color:#f3ecdf; }
.wine-panel .section-caption { font-size:9px; letter-spacing:.12em; font-weight:700; color:var(--wine-gold-soft); margin:22px 0 11px !important; }
.wine-panel .section-caption:first-child { margin-top:0 !important; }
.field-label { display:block; margin:16px 0 8px; font-size:12px; color:#ddd2bd; }
.field-label span { display:block; margin-top:4px; font-size:10px; color:var(--wine-dim); }
.single-input { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:10px 0; font-size:12px; color:#d8ccb6; }
.single-input > span { display:flex; align-items:center; gap:7px; flex:0 0 112px; color:var(--wine-dim); font-size:11px; }
.single-input input { text-align:right; }
.kind-options { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px; }
.kind-option { display:grid; gap:5px; text-align:left; border:1px solid #3e3427; border-radius:8px; background:var(--wine-card); padding:11px; color:#e7dcc6; cursor:pointer; }
.kind-option strong { font-size:11px; font-weight:600; line-height:1.3; }
.kind-option span { font-size:11px; color:var(--wine-muted); }
.kind-option em { font-style:normal; color:var(--wine-gold); margin-left:4px; }
.kind-option[aria-pressed=true] { border-color:var(--wine-accent); background:#2a2114; }
.kind-option.no-fit { opacity:.55; border-style:dashed; }
.segmented { display:grid; gap:4px; padding:3px; border:1px solid #3a3125; border-radius:8px; background:#100e0b; margin:8px 0; }
.segmented.two { grid-template-columns:repeat(2, 1fr); }
.segmented.four { grid-template-columns:repeat(4, 1fr); }
.segmented button { display:grid; gap:2px; border:0; border-radius:5px; background:none; padding:9px 4px; color:#c8bca4; font-size:11px; cursor:pointer; }
.segmented button small { font-size:9px; color:var(--wine-gold-soft); }
.segmented [aria-pressed=true] { background:#3d311d; color:#fbf0da; }
.segmented .no-fit { text-decoration:line-through; color:#8a7e69; }
.height-row { display:grid; grid-template-columns:44px 1fr 44px; gap:6px; align-items:center; }
.height-row > button, .module-actions button, .stack-actions button, .form-actions button, .dashed-button { border:1px solid #43392b; border-radius:6px; background:#1a1610; color:#ddd1ba; font-size:11px; padding:9px; cursor:pointer; }
.height-row .single-input { margin:0; }
.module-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.module-actions button { flex:1 1 auto; }
.module-actions .danger { color:#efc4a7; }
.quick-layouts { display:grid; gap:6px; }
.quick-layouts button { display:grid; gap:3px; text-align:left; border:1px dashed #5b4d36; border-radius:8px; background:#16130e; padding:11px 12px; color:#ecdfc6; cursor:pointer; }
.quick-layouts strong { font-size:12px; font-weight:600; }
.quick-layouts span { font-size:10px; color:var(--wine-dim); }
.stack-actions { display:grid; gap:8px; margin-top:18px; }
.stack-actions button:first-child { background:var(--wine-accent); border-color:var(--wine-accent); color:#21190b; font-weight:700; padding:13px; }
.answer-chips { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; }
.answer-chips li { border:1px solid #4a3f2f; border-radius:20px; padding:6px 10px; font-size:11px; color:#e5d8bd; }
.reason-list { display:grid; gap:10px; padding:0; list-style:none; counter-reset:reason; }
.reason-list li { position:relative; padding-left:28px; font-size:12px; line-height:1.55; color:#e4dac6; counter-increment:reason; }
.reason-list li::before { content:counter(reason, decimal-leading-zero); position:absolute; left:0; top:1px; font-size:9px; color:var(--wine-gold); letter-spacing:.06em; }
.empty-note { border:1px dashed #5b4d36; border-radius:9px; padding:16px; font-size:12px; color:#d8ccb6; line-height:1.6; }
.empty-note strong { display:block; margin-bottom:5px; color:#f0e6d2; }
.mood-chips { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; }
.mood-chips button { display:grid; gap:4px; text-align:left; border:1px solid #3e3427; border-radius:8px; background:var(--wine-card); color:#e2d6be; padding:8px; font-size:11px; cursor:pointer; }
.mood-chips .mood-visual { grid-template-rows:22px 6px; margin:0; }
.mood-chips [aria-pressed=true] { border-color:var(--wine-accent); }
.finish-targets { display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; margin-bottom:10px; }
.finish-targets button { display:grid; gap:3px; border:1px solid #3e3427; border-radius:6px; background:none; color:#cdbfa5; padding:8px 4px; font-size:10px; cursor:pointer; }
.finish-targets small { font-size:9px; color:var(--wine-dim); }
.finish-targets [aria-pressed=true] { border-color:#c9ab70; background:#2a2114; color:#fbf0da; }
.finish-swatches { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.finish-swatch { display:grid; gap:6px; justify-items:center; border:1px solid #3b3226; border-radius:7px; background:#15120d; color:#c8bba2; font-size:9px; padding:7px 4px; cursor:pointer; line-height:1.25; }
.finish-swatch > span { display:block; width:100%; height:34px; border-radius:4px; background:var(--finish); box-shadow:inset 0 0 0 1px #ffffff14; }
.finish-swatch.wood > span { background:repeating-linear-gradient(93deg, #ffffff0d 0 2px, #2a170812 3px 4px, transparent 5px 11px), var(--finish); }
.finish-swatch.metal > span { background:linear-gradient(120deg, var(--finish), #ffffff70 48%, var(--finish)); }
.finish-swatch.stone > span { background:linear-gradient(160deg, transparent 40%, #ffffff40 42%, transparent 46%), linear-gradient(30deg, transparent 60%, #00000025 62%, transparent 65%), var(--finish); }
.finish-swatch.leather > span { background:radial-gradient(circle at 30% 30%, #ffffff18, transparent 60%), var(--finish); }
.finish-swatch.inherit > span { background:repeating-linear-gradient(135deg, #ffffff22 0 3px, transparent 3px 7px), var(--finish); }
.finish-swatch[aria-pressed=true] { border-color:var(--wine-accent); background:#2a2114; color:#fbf0da; }
.measure-list { display:grid; gap:7px; margin:14px 0; font-size:11px; }
.measure-list div { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid #251f17; padding-bottom:7px; }
.measure-list dt { color:var(--wine-dim); }
.measure-list dd { margin:0; color:#eadfca; text-align:right; }
.capacity-list, .profile-list { list-style:none; padding:0; display:grid; gap:6px; }
.capacity-list li { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:#ded2bb; }
.capacity-list small { display:block; font-size:10px; color:var(--wine-dim); }
.capacity-list .total { border-top:1px solid var(--wine-line); padding-top:7px; color:var(--wine-gold); }
.profile-list li { display:flex; justify-content:space-between; align-items:start; gap:10px; font-size:11px; color:#d4c7ae; padding:8px 0; border-bottom:1px solid #251f17; }
.profile-list small { display:block; margin-top:3px; color:var(--wine-dim); font-size:10px; }
.profile-list strong { color:#f0e6d2; font-weight:600; }
.profile-list button { border:0; background:none; color:#e9b99a; font-size:18px; cursor:pointer; line-height:1; }
.custom-bottle { margin-top:14px; padding:14px; border:1px solid #5b4d36; border-radius:9px; background:#16130e; }
.custom-bottle .section-caption { margin-top:0 !important; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.form-actions { display:flex; gap:6px; margin-top:12px; }
.form-actions .primary-small { background:var(--wine-accent); border-color:var(--wine-accent); color:#21190b; font-weight:700; }
.dashed-button { width:100%; margin-top:12px; border-style:dashed; padding:12px; }
.reset-design { display:block; margin:22px auto 0; padding:4px; border:0; border-bottom:1px solid #5a4d38; background:none; color:#a59a83; font-size:10px; cursor:pointer; }
.wine-status { margin:22px 0 10px; padding:9px 13px; min-height:36px; border-left:2px solid var(--wine-accent); color:#eadcc0; font-size:12px; line-height:1.55; }
.wine-status.is-error { border-color:#e0a46f; color:#f3d4b4; background:#2a1d1066; }
#panel-feedback { padding:10px 12px; border:1px solid #8a5e36; border-radius:7px; background:#2a1d10; margin:0 0 14px !important; }
.wine-note { max-width:960px; font-size:11px; color:#8f856f; line-height:1.6; margin-bottom:32px !important; }
.wine-note strong { color:#cbbd9f; }
.wine-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; border-top:1px solid var(--wine-line); }
.wine-footer .brand { width:120px; }
.wine-footer p, .wine-footer > a:last-child { font-size:11px; color:var(--wine-dim); }
.wine-dialog { max-width:460px; width:calc(100% - 28px); padding:26px; border:1px solid #5b4d36; border-radius:14px; background:#16130e; color:var(--wine-text); box-shadow:0 25px 100px #0009; }
.wine-dialog::backdrop { background:#0a0805c4; backdrop-filter:blur(6px); }
.wine-dialog h2 { font-size:26px; }
.wine-dialog p { font-size:13px; color:var(--wine-muted); margin:14px 0 22px; line-height:1.6; }
.confirm-actions { display:flex; justify-content:end; gap:10px; }
.confirm-actions button { border:1px solid #6d5a37; border-radius:7px; background:none; color:#ecdfc6; padding:11px 15px; cursor:pointer; }
.confirm-actions #confirm-reset { background:var(--wine-gold); color:#21190b; font-weight:600; }

@media (max-width:1180px) {
    .wine-workspace { grid-template-columns:minmax(0, 1fr) 340px; gap:16px; }
    .wine-panel { padding:18px; }
    .drink-options, .mood-options, .size-options { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .choice-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .finish-swatches { grid-template-columns:repeat(3, 1fr); }
}
/* Tablet en telefoon: de viewer blijft bovenaan zichtbaar terwijl het paneel eronder scrolt. */
@media (max-width:900px) {
    .wine-page .site-header { position:relative; }
    .wine-heading > p { display:none; }
    .wine-workspace { grid-template-columns:1fr; }
    .wine-viewer-column { position:static; display:contents; }
    .wine-stage { position:sticky; top:0; z-index:5; height:46svh; min-height:300px; max-height:520px; border-radius:0 0 12px 12px; box-shadow:0 10px 30px #0006; order:1; }
    .design-metrics { order:2; } .map-heading { order:3; } .cabinet-map { order:4; } .design-actions { order:5; } .wine-panel { order:6; }
    .wine-workspace { display:flex; flex-direction:column; gap:0; }
    .wine-panel { margin-top:20px; }
    .cabinet-map { height:150px; }
}
@media (max-width:640px) {
    .wine-main { width:93%; padding-top:18px; }
    .wine-heading { margin:20px 0 20px; }
    .wine-heading h1 { font-size:31px; }
    .wine-quiz { padding:20px 16px; border-radius:12px; }
    .quiz-top { flex-direction:column; gap:10px; }
    .wine-page .quiz-progress { margin:16px 0 26px; }
    .quiz-help { font-size:13px; margin-bottom:16px !important; }
    .drink-options, .mood-options { grid-template-columns:1fr 1fr; gap:8px; }
    .choice-grid, .choice-grid.three, .size-options { grid-template-columns:1fr 1fr; gap:8px; }
    .option-card, .choice-card, .mood-card { padding:14px 12px; }
    .option-card svg { height:64px; margin:0 0 4px; }
    .quiz-nav { position:sticky; bottom:0; margin:22px -16px -20px; padding:14px 16px; background:var(--wine-panel); border-radius:0 0 12px 12px; }
    .quiz-nav .quiz-primary { min-width:0; flex:1; }
    .wine-stage { height:44svh; min-height:270px; margin:0 -3.5%; width:107%; border-radius:0; }
    .stage-topline { left:14px; right:14px; top:12px; font-size:9px; }
    .stage-topline #stage-capacity { display:none; }
    .view-buttons { top:32px; left:10px; }
    .view-buttons button { padding:7px 8px; font-size:10px; }
    .stage-tools { left:10px; right:10px; bottom:10px; gap:4px; }
    .stage-tools button { padding:7px 8px; font-size:10px; }
    .measure-label { font-size:9px; padding:3px 6px; }
    .design-metrics { gap:4px; padding:14px 0; }
    .design-metrics > div { padding-left:9px; }
    .design-metrics strong { font-size:15px; }
    .design-metrics span { font-size:8px; letter-spacing:.06em; }
    .map-heading span { display:none; }
    .design-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
    .design-actions button { padding:11px 4px; font-size:10px; }
    .design-actions button span { display:none; }
    .wine-panel { padding:18px 14px; }
    .config-tabs button span { display:block; margin:3px 0 0; }
    .finish-targets { grid-template-columns:repeat(2, 1fr); }
    .wine-footer p { display:none; }
    .resume-banner { flex-direction:column; align-items:start; }
}
@media (prefers-reduced-motion:reduce) {
    .wine-page * { scroll-behavior:auto !important; transition:none !important; }
    .loading-mark { animation:none; }
}

/* Menu op deze pagina in de warme wijnkastkleuren in plaats van VTStudio-groen. */
/* De filter staat op de link, zodat de logo-animatie op de afbeelding hem niet overschrijft. */
.wine-page .site-header { background:rgba(11, 10, 8, .96); border-bottom-color:var(--wine-line); }
.wine-page .site-header .brand, .wine-page .wine-footer .brand { filter:grayscale(1) sepia(.85) saturate(1.35) hue-rotate(-6deg) brightness(1.05); }
.wine-page .site-nav a:hover { color:var(--wine-gold); }
.wine-page .site-nav a[aria-current="page"]::after { background:var(--wine-gold); }
.wine-page .site-nav .nav-contact { border-color:var(--wine-gold-soft); }
.wine-page .site-header :focus-visible { outline-color:var(--wine-gold); }
.wine-page .skip-link { background:var(--wine-gold); color:#21190b !important; }

/* Eigen logo-accent voor deze beleving (gebouwd door scripts/build_logo_variants.py) */
.wine-page .site-header .brand::after { -webkit-mask-image: url("images/logo-wijnkast.png"); mask-image: url("images/logo-wijnkast.png"); }

/* Groot, zacht watermerk van het eigen logo-icoon naast de koptekst */
.wine-main { position:relative; isolation:isolate; overflow-x:clip; overflow-clip-margin:0; }
.wine-main::before { content:""; position:absolute; z-index:-1; pointer-events:none; top:6px; right:33%; width:clamp(170px, 16vw, 250px); aspect-ratio:424 / 336; background:url("images/logo-icoon-wijnkast.png") center / contain no-repeat; opacity:.08; filter:grayscale(1) sepia(.85) saturate(1.35) hue-rotate(-6deg) brightness(1.05); }
@media (max-width:550px) { .wine-main::before { width:210px; top:-6px; right:-14%; opacity:.07; } }
/* Laadscherm: het eigen logo-icoon met een kleine animatie */
.wine-page .brand-loader { display:block; width:clamp(110px, 14vw, 150px); height:auto; overflow:visible; }
.wine-page .brand-loader { filter:grayscale(1) sepia(.85) saturate(1.35) hue-rotate(-6deg) brightness(.62); }
.wine-page .bl-bottle { fill:#07f603; }
.wine-page .bl-bottle-empty { opacity:.28; }
.wine-page .bl-level { animation:bl-fill 2.2s ease-in-out infinite; }
@keyframes bl-fill { 0% { transform:translateY(270px); } 60%, 100% { transform:none; } }
@media (prefers-reduced-motion:reduce) { .wine-page .brand-loader * { animation:none !important; } }