/* KRM Prints – Bestelmodule (stappen op de productpagina). Gebruikt de kleuren en lettertypes van het thema. */
.bm{ --bm-h:620px; display:grid; gap:14px; margin-top:8px; color:var(--text); }
.bm *{ box-sizing:border-box; }
.bm .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.bm-off{ padding:18px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); }
.bm-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.bm-top h1{ margin:2px 0 0; font-size:clamp(30px, 3vw, 42px); line-height:1.05; }
.bm-pk{ margin:0; padding:7px 12px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent-ink); font-size:13.5px; font-weight:600; }
.bm-pkw{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.bm-pkw .pk-stock{ height:30px; padding:0 10px; font-size:13px; }

/* stappen: een lijntje per stap met nummer en naam */
.bm-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--steps, 7), minmax(0,1fr)); gap:10px; }
.bm-steps button{ width:100%; display:flex; align-items:baseline; gap:8px; padding:8px 2px 2px; border:0; border-top:3px solid var(--border); background:none; color:var(--muted); font:600 13.5px/1.2 var(--sans); text-align:left; cursor:pointer; }
.bm-steps b{ font:600 19px/1 var(--serif); }
.bm-steps .on button{ border-color:var(--accent); color:var(--text); }
.bm-steps .ok button{ border-color:var(--text); color:var(--text); }
.bm-steps button:hover span{ text-decoration:underline; text-underline-offset:3px; }

/* kader: links het voorbeeld (2/5), rechts de keuzes (3/5); bij elke stap even hoog */
.bm-frame{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:24px; min-height:var(--bm-h); padding:18px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.bm-prev{ position:relative; min-width:0; border-radius:var(--r-lg); background:var(--workspace); overflow:hidden; display:grid; }
.bm-stage{ display:grid; place-items:center; padding:28px 24px 46px; min-height:0; }
.bm-scene{ width:100%; display:grid; place-items:center; }
.bm-row{ display:flex; align-items:flex-end; justify-content:center; gap:4%; }
.bm-cap{ position:absolute; left:12px; right:12px; bottom:12px; margin:0; text-align:center; font-size:12.5px; color:var(--muted); }
.bm-fliplink{ position:absolute; left:50%; transform:translateX(-50%); bottom:34px; }

.bm-album{ position:relative; flex:none; aspect-ratio:var(--ar, 1); max-width:100%; border-radius:2px 4px 4px 2px; overflow:hidden;
  box-shadow:inset 10px 0 12px -8px rgba(0,0,0,.35), inset -1px 0 0 rgba(255,255,255,.14), var(--shadow-obj); }
.bm-album::after{ content:""; position:absolute; top:0; bottom:0; left:6%; width:1px; background:rgba(0,0,0,.16); box-shadow:1px 0 0 rgba(255,255,255,.12); pointer-events:none; }
.bm-album.is-booklet{ box-shadow:inset 6px 0 8px -6px rgba(0,0,0,.3), 0 10px 18px -8px rgba(20,27,45,.35); }
.bm-print{ position:absolute; left:0; top:0; transform-origin:0 0; white-space:nowrap; pointer-events:none; line-height:1.12; z-index:2; }
.bm-print-in{ display:inline-block; }
.bm-print-in span{ display:block; }
.bm-print-in .l2{ letter-spacing:.06em; }
.bm-print-in.is-sample{ opacity:.55; }
.bm-print-in.is-img img{ display:block; width:12em; height:auto; }
.bm-print-in.is-ph{ display:grid; place-items:center; width:12em; height:5em; border:.08em dashed currentColor; border-radius:.2em; font:600 .8em/1.2 var(--sans); opacity:.8; }
.bm-plate{ position:absolute; inset:0; margin:auto; height:62%; max-width:62%; aspect-ratio:1; z-index:1; }
.bm-plate--acryl{ border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.55); }
.bm-plate--acryl::after{ content:""; position:absolute; inset:0; border-radius:3px; background:linear-gradient(135deg, rgba(255,255,255,.34), transparent 42%); pointer-events:none; }
.bm-plate--metal{ padding:3.5%; border-radius:2px; background:linear-gradient(135deg, #eceef0, #a7acb3 55%, #d7dade); box-shadow:0 2px 8px rgba(0,0,0,.4); }
.bm-plate-in{ width:100%; height:100%; display:grid; place-items:center; background-color:rgba(255,255,255,.16); background-size:cover; background-position:50% 50%; background-repeat:no-repeat; color:rgba(255,255,255,.8); font:600 12px var(--sans); border-radius:2px; touch-action:none; }
.bm-plate-in[style*="url"]{ cursor:grab; }
.bm-cp-full{ position:absolute; inset:0; display:grid; place-items:center; background:repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 10px, transparent 10px 20px); background-size:cover; background-position:center; color:var(--text-2); font:600 13px var(--sans); }
.bm-cp-full[style*="url"]{ background-repeat:no-repeat; }
.bm-cp-full.is-wrap{ background-size:auto 100%; background-position:right center; }
.bm-cp-full.is-glans::after{ content:""; position:absolute; inset:0; background:linear-gradient(140deg, rgba(255,255,255,.28), transparent 38%); }

.bm-box{ position:relative; flex:none; aspect-ratio:var(--ar, 1); max-width:100%; border-radius:3px; box-shadow:var(--shadow-obj), inset 0 -10px 0 rgba(0,0,0,.12); }
.bm-box-lid{ position:absolute; inset:6% 6% 16% 6%; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.12); }
.bm-box::after{ content:""; position:absolute; left:0; right:0; bottom:13%; height:1px; background:rgba(255,255,255,.2); }

.bm-open{ position:relative; width:94%; max-width:100%; aspect-ratio:var(--ar, 2); padding:1.6%; border-radius:4px; box-shadow:var(--shadow-obj); }
.bm-sheet{ display:grid; grid-template-columns:1fr 1fr; width:100%; height:100%; }
.bm-page{ position:relative; background:#FBFAF6; display:grid; place-items:center; color:var(--muted); font:600 12px var(--sans); }
.bm-page.l{ box-shadow:inset -18px 0 18px -14px rgba(0,0,0,.32); }
.bm-page.r{ box-shadow:inset 18px 0 18px -14px rgba(0,0,0,.32); }
.bm-page.is-img{ background-size:200% 100%; background-repeat:no-repeat; }
.bm-page.l.is-img{ background-position:left center; }
.bm-page.r.is-img{ background-position:right center; }
.bm-ph{ position:absolute; border-radius:1px; background:linear-gradient(140deg, var(--photo-a), var(--photo-e)); }
.bm-ph.a{ inset:9%; }
.bm-page.two .bm-ph.b{ inset:9% 52% 9% 9%; background:linear-gradient(150deg, var(--photo-c), var(--photo-e)); }
.bm-page.two .bm-ph.c{ inset:9% 9% 9% 52%; background:linear-gradient(150deg, var(--photo-b), var(--photo-d)); }
.bm-photos{ width:94%; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; }
.bm-photos i{ aspect-ratio:1; border-radius:2px; background-size:cover; background-position:center; background-color:var(--surface-3); }
.bm-photos i.more{ display:grid; place-items:center; font:600 12px var(--sans); font-style:normal; color:var(--muted); }
.bm-photos-empty{ width:86%; aspect-ratio:3/2; display:grid; place-items:center; border:1.5px dashed var(--border-strong); border-radius:var(--r-lg); color:var(--muted); font-size:13px; text-align:center; padding:12px; }

/* rechts: de keuzes */
.bm-panel{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; }
.bm-body{ display:grid; gap:13px; align-content:start; min-height:0; }
.bm-msg{ margin:0 auto 0 0; flex:1 1 auto; min-width:0; max-width:520px; padding:8px 12px; border-radius:var(--r-sm); background:#FDECEA; color:var(--danger); font-size:13px; line-height:1.35; }
.bm-bar.has-msg .bm-price{ display:none; }
.bm .bm-in.is-missing, .bm .bm-up.is-missing{ border-color:var(--danger); box-shadow:0 0 0 1px var(--danger); }
.bm .bm-up.is-missing{ border-style:solid; }
.bm .bm-f.is-missing{ border-radius:var(--r-sm); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--danger); }
.bm-bar{ margin-top:auto; display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--border); }
.bm-price{ margin-right:auto; display:grid; justify-items:start; }
.bm-price .bm-link{ font-size:12px; }
.bm-pop{ position:absolute; right:0; bottom:74px; z-index:5; width:min(380px, 100%); display:grid; gap:2px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-lg); font-size:13px; }
.bm-pop .bm-h{ margin-bottom:4px; }
.bm-pl{ display:flex; justify-content:space-between; gap:12px; padding:2px 0; }
.bm-pl.tot{ margin-top:4px; padding-top:6px; border-top:1px solid var(--border); font-weight:700; }
.bm-price small{ font:600 11px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.bm-price b{ font:600 26px/1.1 var(--serif); font-variant-numeric:lining-nums tabular-nums; }
.bm-login{ font-weight:600; color:var(--accent); }
.bm-bar .btn{ min-height:46px; }
.bm-f{ display:grid; gap:8px; }
.bm-h{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.bm-h b{ font-size:13.5px; font-weight:700; }
.bm-h span{ font-size:12.5px; color:var(--muted); text-align:right; }
.bm-h span b{ color:var(--text); }
.bm-help{ font-size:12.5px; color:var(--muted); }
.bm-in{ width:100%; min-height:42px; padding:9px 12px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--text); font:15px/1.3 var(--sans); }
textarea.bm-in{ min-height:0; resize:vertical; }
.bm-in:focus{ outline:2px solid var(--focus); outline-offset:1px; }
.bm-sel{ position:relative; }
.bm-sel select{ appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer; }
.bm-sel::after{ content:""; position:absolute; right:14px; top:50%; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.bm-btns{ display:grid; grid-template-columns:repeat(var(--cols, 2), minmax(0,1fr)); gap:8px; }
.bm-btns button{ display:grid; gap:1px; justify-items:center; align-content:center; min-height:44px; padding:7px 8px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--text); font:500 14px/1.25 var(--sans); text-align:center; cursor:pointer; }
.bm-btns button small{ font-size:11.5px; font-weight:400; color:var(--muted); }
.bm-btns button[aria-pressed="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft); font-weight:700; }
.bm-btns button:disabled{ opacity:.45; cursor:not-allowed; }
.bm-sw{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:7px; }
.bm-sw button{ position:relative; aspect-ratio:1; padding:0; border:0; border-radius:var(--r-sm); background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); cursor:pointer; }
.bm-sw button[aria-pressed="true"]{ outline:2px solid var(--accent); outline-offset:2px; }
.bm-sw.has-labels{ grid-template-columns:repeat(8, minmax(0,1fr)); row-gap:36px; margin-bottom:30px; }
.bm-sw.has-labels small{ position:absolute; top:calc(100% + 4px); left:-4px; right:-4px; font:500 10.5px/1.2 var(--sans); color:var(--muted); text-align:center; }
.bm-dash{ padding:12px; border:1.5px dashed var(--camel); border-radius:var(--r-lg); }
.bm-up{ display:flex; align-items:center; gap:12px; padding:10px 14px; border:1.5px dashed var(--accent); border-radius:var(--r-lg); background:var(--surface-2); cursor:pointer; }
.bm-up:hover, .bm-up.is-over{ background:var(--accent-soft); }
.bm-up:focus-within{ outline:2px solid var(--focus); outline-offset:2px; }
.bm-up-ic{ font-size:22px; color:var(--accent); line-height:1; }
.bm-up-t{ display:grid; min-width:0; }
.bm-up-t b{ font-size:14.5px; }
.bm-up-t small{ font-size:12px; color:var(--muted); }
.bm-up-ok{ margin-left:auto; font-size:13px; font-weight:600; color:var(--success); text-align:right; overflow-wrap:anywhere; max-width:45%; }
.bm-err{ color:var(--danger); font-style:normal; }
.bm-info{ margin:0; padding:10px 12px; border-radius:var(--r-sm); background:var(--surface-2); color:var(--text-2); font-size:13.5px; }
.bm-info ul{ margin:4px 0 0; padding-left:18px; }
.bm-ok{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:10px 12px; border-radius:var(--r-sm); background:var(--success-soft); color:var(--success); font-size:13.5px; }
.bm-ok span{ color:var(--text-2); }
.bm-ok .bm-link{ margin-left:auto; }
.bm-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--r-sm); }
.bm-stats > div{ padding:8px 12px; border-right:1px solid var(--border); font-size:14.5px; }
.bm-stats > div:last-child{ border-right:0; }
.bm-stats small{ display:block; font:700 10.5px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.bm-checks{ display:grid; gap:4px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--r-sm); font-size:13px; }
.bm-checks .ok{ color:var(--success); }
.bm-checks .warn{ color:var(--danger); }
.bm-flipbtn{ min-height:42px; border:1.5px solid var(--text); border-radius:var(--r-sm); background:none; color:var(--text); font:600 14.5px var(--sans); cursor:pointer; }
.bm-flipbtn:hover{ background:var(--surface-3); }
.bm-rng{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; font-size:12px; color:var(--muted); }
.bm-rng input{ width:100%; accent-color:var(--accent); }
.bm-calc{ display:grid; border:1px solid var(--border); border-radius:var(--r-sm); font-size:13px; }
.bm-calc > div{ display:flex; justify-content:space-between; gap:10px; padding:5px 12px; border-top:1px solid var(--border); }
.bm-calc > div:first-child{ border-top:0; }
.bm-calc .pf{ color:var(--success); background:var(--success-soft); }
.bm-prog{ height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
.bm-prog i{ display:block; height:100%; background:var(--accent); transition:width .3s; }
.bm-check{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--text-2); cursor:pointer; }
.bm-check input{ accent-color:var(--accent); width:16px; height:16px; }
.bm-two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.bm-three{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.1fr); gap:10px; }
.bm-three > div, .bm-two > div, .bm-own > div{ display:grid; gap:8px; align-content:start; min-width:0; }
.bm-own{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:10px; align-items:end; }
.bm-col{ display:grid; gap:12px; align-content:start; }
.bm-fk{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:10px; }
.bm-fk > div{ display:grid; gap:8px; align-content:start; min-width:0; }
/* keuzelijst met uitleg (techniek) */
.bm-dd{ position:relative; }
.bm-dd-btn, .bm-dd-list button{ width:100%; display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--text); font:15px/1.3 var(--sans); text-align:left; cursor:pointer; }
.bm-dd-btn{ position:relative; padding-right:40px; }
.bm-dd-btn::after{ content:""; position:absolute; right:15px; top:50%; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); }
.bm-dd-btn[aria-expanded="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.bm-dd-btn[aria-expanded="true"]::after{ transform:translateY(-30%) rotate(-135deg); }
.bm-dd.is-one .bm-dd-btn{ padding-right:12px; cursor:default; opacity:1; }
.bm-dd.is-one .bm-dd-btn::after{ display:none; }
.bm-dd-btn:focus-visible, .bm-dd-list button:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.bm-dd-t{ display:grid; gap:2px; min-width:0; margin-right:auto; }
.bm-dd-t b{ font-size:14.5px; font-weight:600; }
.bm-dd-t small{ font-size:12.5px; line-height:1.35; color:var(--muted); }
.bm-dd em{ flex:none; font-style:normal; font-size:13px; font-weight:600; color:var(--accent); }
.bm-dd-list{ position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:6; display:grid; gap:2px; padding:6px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-lg); }
.bm-dd-list button{ border-color:transparent; }
.bm-dd-list button:hover{ background:var(--surface-2); }
.bm-dd-list button[aria-selected="true"]{ border-color:var(--accent); background:var(--accent-soft); }
.bm-pos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:5px; padding:6px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2); }
.bm-pos button{ position:relative; height:30px; padding:0; border:1.5px solid var(--border); border-radius:3px; background:var(--surface); cursor:pointer; }
.bm-pos button i{ position:absolute; width:14px; height:6px; border-radius:1px; background:var(--border-strong); transform:translate(-50%, -50%); }
.bm-pos button[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.bm-pos button[aria-pressed="true"] i{ background:var(--accent); }
.bm-x{ display:grid; grid-template-columns:22px minmax(0,1fr) minmax(0,200px) auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-lg); }
.bm-x.is-off{ opacity:.55; }
.bm-x-t{ display:grid; min-width:0; }
.bm-x-t b{ font-size:15px; }
.bm-x-t small{ font-size:12px; color:var(--muted); }
.bm-cb input{ width:20px; height:20px; margin:0; accent-color:var(--accent); cursor:pointer; }
.bm-cb span{ display:none; }
.bm-qty{ display:inline-flex; align-items:stretch; border:1px solid var(--border-strong); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); }
.bm-qty button{ width:32px; min-height:38px; border:0; background:none; color:var(--text); font-size:17px; cursor:pointer; }
.bm-qty button:disabled{ opacity:.4; cursor:not-allowed; }
.bm-qty b{ min-width:34px; display:grid; place-items:center; border-inline:1px solid var(--border-strong); font-weight:600; font-variant-numeric:tabular-nums; }
.bm-qty-main button{ min-height:46px; width:36px; }
.bm-qty-main b{ min-width:40px; }
.bm-sum{ margin:0; display:grid; border:1px solid var(--border); border-radius:var(--r-sm); }
.bm-sum > div{ display:grid; grid-template-columns:104px minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:5px 12px; border-top:1px solid var(--border); }
.bm-sum > div:first-child{ border-top:0; }
.bm-sum dt{ font-size:13px; color:var(--muted); }
.bm-sum dd{ margin:0; font-size:13.5px; overflow-wrap:anywhere; }
.bm-lines{ font-size:13px; }
.bm-lines summary{ cursor:pointer; color:var(--muted); }
.bm-lines > div{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.bm-note{ margin:0; padding:9px 12px; border-radius:var(--r-sm); background:var(--surface-2); color:var(--text-2); font-size:13px; }
.bm-link{ padding:0; border:0; background:none; color:var(--accent); font:500 12.5px var(--sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.bm-spin{ display:inline-block; width:11px; height:11px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:bm-spin .8s linear infinite; vertical-align:-1px; }
@keyframes bm-spin{ to{ transform:rotate(360deg); } }

/* flipbook (popup) */
.bm-noscroll{ overflow:hidden; }
.bm-fb{ position:fixed; inset:0; z-index:10000; }
.fb-shade{ position:absolute; inset:0; background:rgba(12,17,30,.78); }
.fb-win{ position:absolute; inset:3vh 3vw; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:12px; color:#F7F3EC; }
.fb-top{ display:flex; align-items:center; gap:14px; font:600 15px var(--sans); }
.fb-cnt{ color:#C9CFDA; font-weight:500; }
.fb-x{ margin-left:auto; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:18px; cursor:pointer; }
.fb-stage{ display:grid; place-items:center; min-height:0; perspective:2400px; }
.fb-book{ position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(94vw, calc((94vh - 160px) * var(--ar))); aspect-ratio:var(--ar); max-height:100%; transform-style:preserve-3d; }
.fb-half{ position:relative; cursor:pointer; }
.fb-face{ position:absolute; inset:0; background:#FBFAF6; background-size:cover; }
.fb-half.l .fb-face, .fb-leaf.back .fb-leaf-f .fb-face, .fb-leaf.fwd .fb-leaf-b .fb-face{ box-shadow:inset -22px 0 22px -16px rgba(0,0,0,.35); }
.fb-half.r .fb-face, .fb-leaf.fwd .fb-leaf-f .fb-face, .fb-leaf.back .fb-leaf-b .fb-face{ box-shadow:inset 22px 0 22px -16px rgba(0,0,0,.35); }
.fb-img{ background-size:200% 100%; background-repeat:no-repeat; display:grid; place-items:center; color:var(--muted); }
.fb-img.l{ background-position:left center; }
.fb-img.r{ background-position:right center; }
.fb-cover{ background:none; box-shadow:none !important; display:grid; }
.fb-cover .bm-album{ width:100% !important; height:100%; }
.fb-back{ border-radius:4px 2px 2px 4px; }
.fb-leaf{ position:absolute; top:0; bottom:0; width:50%; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.3,.1,.25,1); z-index:3; }
.fb-leaf.fwd{ left:50%; transform-origin:left center; }
.fb-leaf.back{ left:0; transform-origin:right center; }
.fb-leaf.fwd.go{ transform:rotateY(-180deg); }
.fb-leaf.back.go{ transform:rotateY(180deg); }
.fb-leaf-f, .fb-leaf-b{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.fb-leaf-b{ transform:rotateY(180deg); }
.fb-nav{ display:flex; justify-content:center; gap:12px; }
.fb-nav .btn-ghost{ color:#F7F3EC; border-color:rgba(255,255,255,.4); }

/* telefoon en tablet: alles onder elkaar, geen vaste hoogte */
@media (max-width:980px){
  .bm-frame{ grid-template-columns:minmax(0,1fr); min-height:0; padding:12px; gap:16px; }
  .bm-prev{ aspect-ratio:5/4; }
  .bm-steps{ display:flex; overflow-x:auto; gap:8px; padding-bottom:4px; scrollbar-width:thin; }
  .bm-steps li{ flex:0 0 auto; min-width:104px; }
  .bm-sw{ grid-template-columns:repeat(8, minmax(0,1fr)); }
  .bm-sw.has-labels{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .bm-bar{ flex-wrap:wrap; }
  .bm-bar .btn-accent{ flex:1 1 auto; }
}
@media (max-width:560px){
  .bm-three, .bm-two, .bm-own, .bm-fk{ grid-template-columns:minmax(0,1fr); }
  .bm-btns{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bm-sw{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .bm-x{ grid-template-columns:22px minmax(0,1fr); }
  .bm-x .bm-sel, .bm-x .bm-qty{ grid-column:2; }
  .bm-sum > div{ grid-template-columns:minmax(0,1fr) auto; }
  .bm-sum dt{ grid-column:1 / -1; }
  .fb-win{ inset:2vh 2vw; }
}
@media (prefers-reduced-motion:reduce){ .fb-leaf{ transition:none; } .bm-spin{ animation:none; } }

/* Mijn account: ontwerp later aanleveren */
.bm-al{ margin:28px 0; padding:20px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.bm-al h2{ margin:0 0 4px; }
.bm-al-lead{ margin:0 0 14px; color:var(--muted); font-size:14px; }
.bm-al-item{ display:grid; gap:10px; padding:14px 0; border-top:1px solid var(--border); }
.bm-al-h{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px; }
.bm-al-h span{ color:var(--muted); font-size:13.5px; }
.bm-al-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; align-items:center; padding:12px 14px; border-radius:var(--r-lg); background:var(--surface-2); }
.bm-al-row.is-ok{ background:transparent; padding:2px 14px; }
.bm-al-t{ display:grid; gap:2px; }
.bm-al-t small{ color:var(--muted); font-size:13px; }
.bm-al-a{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.bm-al-file{ cursor:pointer; }
.bm-al-st{ grid-column:1 / -1; display:grid; gap:6px; }
.bm-al-st.is-err small{ color:var(--danger); }
.bm-al-st.is-ok small{ color:var(--text-2); }
.bm-al-done{ margin:0; color:var(--text-2); }
@media (max-width: 640px){ .bm-al-row{ grid-template-columns:minmax(0,1fr); } .bm-al-a{ justify-content:flex-start; } }


/* Album delen met de klant */
.fb-share{ margin-left:auto; padding:8px 14px; font-size:14px; }
.fb-share + .fb-x{ margin-left:0; }
.bm-sh{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:rgba(12,17,30,.55); padding:12px; }
.bm-sh-box{ background:#fff; color:var(--ink, #1F2A44); border-radius:6px; padding:18px; width:min(560px, 100%); max-height:100%; overflow:auto; display:grid; gap:10px; font:15px/1.5 var(--sans); text-align:left; }
.bm-sh-head{ display:flex; align-items:center; gap:10px; font:600 22px var(--serif, Georgia, serif); }
.bm-sh-head .fb-x{ background:#F1EEE8; color:#1F2A44; margin-left:auto; }
.bm-sh-box label{ display:grid; gap:4px; font-weight:500; }
.bm-sh-box label.bm-check{ display:flex; gap:8px; align-items:flex-start; font-weight:400; }
.bm-sh-box input:not([type=checkbox]), .bm-sh-box textarea{ font:inherit; padding:8px 10px; border:1px solid #E1DACF; border-radius:4px; width:100%; background:#fff; color:inherit; }
.bm-sh-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bm-sh-note{ margin:0; color:#5B6274; font-size:14px; }
.bm-sh-status{ margin:0; min-height:1.5em; font-weight:600; color:#9A5B2E; }
.bm-sh-link{ display:flex; gap:8px; }
.bm-sh-link input{ flex:1; min-width:0; }
.bm-sh-btns{ display:flex; justify-content:flex-end; }
.bm-share .bm-sh{ display:none; }
@media (max-width:560px){ .bm-sh-two{ grid-template-columns:1fr; } .fb-share{ padding:6px 10px; } }