/* Sterrenkaart (sjabloon alp-sterrenkaart). Zelfde ontwerpsysteem als de portrettools (huisportret.css). Alles binnen .alp-sk;
   thema- en Woo-regels voor koppen, alinea's, lijsten, knoppen en velden worden per element overstemd.
   Geen SVG-filters, blend-modes of backdrop-filter (Safari-tekenfout, zie CLAUDE.md). */
.alp-sk{
--papier-0:#FFFFFF;--papier-50:#F9F7F2;--papier-100:#F4F1E8;--papier-200:#EBE6D9;--papier-300:#DED7C6;
--inkt-900:#2C2C2C;--inkt-700:#4E4C46;--inkt-600:#6B6860;
--goud-100:#F6EFDF;--goud-300:#E1C699;--goud-400:#D0B183;--goud-600:#A6854F;--goud-700:#8A6E3F;
--fout-700:#8A2F25;--line:#DED7C6;
--font-display:'Cormorant Garamond',Georgia,serif;--font-body:'Mulish',system-ui,sans-serif;
--gutter:clamp(1.125rem,4vw,3rem);
display:block;font-family:var(--font-body);font-size:1rem;line-height:1.5;color:var(--inkt-700);background:var(--papier-50)}
.alp-sk *,.alp-sk *::before,.alp-sk *::after{box-sizing:border-box}
.alp-sk h1,.alp-sk h2{font-family:var(--font-display);font-weight:300;color:var(--inkt-900);margin:0;padding:0;line-height:1.1}
.alp-sk p{margin:0;padding:0}
.alp-sk ul,.alp-sk ol{margin:0;padding:0;list-style:none}
.alp-sk a{color:var(--goud-700)}
.sk-wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}

.sk-head{padding:3.25rem 0 1.5rem;border-bottom:1px solid var(--line);background:var(--papier-100)}
.sk-crumb{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.75rem;color:var(--inkt-600);margin-bottom:.75rem!important}
.sk-crumb a{color:var(--inkt-600);text-decoration:none}
.sk-head h1{font-size:clamp(2rem,1.5rem + 2.4vw,3rem)}
.sk-head p{margin-top:.5rem;max-width:44rem}

.sk-tool{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);padding-top:2rem;padding-bottom:3rem;align-items:start}
.sk-preview{position:sticky;top:6.5rem}
.sk-wall{background:linear-gradient(180deg,#efe9de,#e6dfd1);border-radius:5px;padding:clamp(1.25rem,4vw,3rem) clamp(1rem,3vw,2.5rem);display:flex;justify-content:center}
.sk-art{width:100%;transition:max-width .24s cubic-bezier(.22,.61,.36,1)}
.sk-frame{background:#fbfaf6;box-shadow:0 14px 34px rgba(60,45,25,.22),0 2px 6px rgba(60,45,25,.14)}
.sk-art--lijst .sk-frame,.sk-art--lijst-pp .sk-frame{padding:2.2%;background:#1d1d1d;box-shadow:inset 0 0 0 1px #000,0 16px 34px rgba(40,30,20,.28),0 3px 7px rgba(40,30,20,.2)}
.sk-mat{background:#fbfaf6}
.sk-art--lijst-pp .sk-mat{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.sk-art--lijst-pp .sk-sheet{box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.sk-sheet{aspect-ratio:210/297;background:#fbfaf6;position:relative}
.sk-sheet svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sk-sheet{cursor:zoom-in}
.sk-under{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:.9rem}
.alp-sk .sk-zoombtn{gap:.4rem;padding:.45rem .9rem!important;font-size:.8125rem!important}
.sk-under .sk-note{margin-top:0!important}
.sk-zoom{width:min(1100px,96vw);height:min(92vh,1200px);max-width:none;max-height:none;padding:0;border:0;border-radius:5px;background:var(--papier-50,#F9F7F2);color:#2C2C2C;font-family:'Mulish',system-ui,sans-serif}
.sk-zoom[open]{display:flex;flex-direction:column}
.sk-zoom::backdrop{background:rgba(25,22,18,.72)}
.sk-zoom__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .9rem;border-bottom:1px solid #DED7C6;font-size:.875rem;font-weight:600}
.sk-zoom__levels{display:flex;gap:.35rem}
.sk-zoom button{font:inherit;font-size:.8125rem;font-weight:600;border:1px solid #DED7C6;background:#fff;color:#2C2C2C;border-radius:3px;padding:.35rem .7rem;cursor:pointer;margin:0;box-shadow:none;line-height:1.2}
.sk-zoom button[aria-pressed=true]{border-color:#2C2C2C;box-shadow:inset 0 0 0 1px #2C2C2C}
.sk-zoom .sk-zoom__close{font-size:1.4rem;line-height:1;padding:.15rem .6rem}
.sk-zoom__box{flex:1;overflow:auto;background:linear-gradient(180deg,#efe9de,#e6dfd1);cursor:grab;outline:none;-webkit-overflow-scrolling:touch}
.sk-zoom__box.is-drag{cursor:grabbing;user-select:none}
.sk-zoom__sheet{aspect-ratio:210/297;background:#fbfaf6;margin:24px auto;box-shadow:0 10px 30px rgba(60,45,25,.25);position:relative}
.sk-zoom__sheet svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sk-zoom__hint{font-size:.75rem;color:#6B6860;padding:.5rem .9rem;margin:0}
.sk-loading{padding:2rem;text-align:center;color:var(--inkt-600)}
.sk-note{font-size:.8125rem;color:var(--inkt-600);margin-top:.75rem!important;text-align:center}

.sk-panel{display:flex;flex-direction:column;gap:1rem}
.sk-step{border:1px solid var(--line)!important;border-radius:5px;background:var(--papier-0);padding:1.1rem 1.25rem 1.25rem!important;margin:0!important;min-width:0;display:flex;flex-direction:column;gap:.75rem}
.sk-step legend{font-family:var(--font-display);font-size:1.375rem;color:var(--inkt-900);padding:0 .35rem!important;margin-left:-.35rem;display:flex;align-items:center;gap:.5rem}
.sk-step legend span{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--goud-100);color:var(--goud-700);font-family:var(--font-body);font-size:.8125rem;font-weight:600}
.alp-sk label{display:flex;flex-direction:column;gap:.3rem;font-size:.875rem;color:var(--inkt-900);font-weight:500;margin:0}
.alp-sk label small{font-weight:400;color:var(--inkt-600)}
.alp-sk input[type=text],.alp-sk input[type=date],.alp-sk input[type=time],.alp-sk select{font:inherit!important;font-size:1rem!important;font-weight:400!important;color:var(--inkt-900)!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:3px!important;padding:.6rem .7rem!important;width:100%!important;height:auto!important;box-shadow:none!important;margin:0!important}
.alp-sk input:focus,.alp-sk select:focus{outline:2px solid var(--goud-400)!important;outline-offset:1px}
.sk-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;align-items:end}
.sk-search{display:flex;gap:.5rem}
.sk-search input{flex:1}
.sk-hint,.sk-sub{font-size:.8125rem;color:var(--inkt-600)}
.sk-sub{color:var(--inkt-900);font-weight:500;font-size:.875rem}
.sk-results{display:flex;flex-direction:column;gap:.25rem}
.sk-results[hidden]{display:none}
.sk-results button{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;padding:.5rem .7rem;border:1px solid var(--line);border-radius:3px;font-size:.875rem;color:var(--inkt-900);background:var(--papier-50)}
.sk-results button:hover,.sk-results button:focus-visible{border-color:var(--goud-400);background:var(--goud-100)}
.sk-checks{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
.alp-sk label.sk-check{flex-direction:row;align-items:center;gap:.5rem;font-weight:400}
.alp-sk .sk-check input{width:1.05rem;height:1.05rem;margin:0;accent-color:var(--goud-700)}
.sk-check--inline{padding-bottom:.65rem}
.sk-ideas{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:-.25rem}
.sk-ideas button{all:unset;cursor:pointer;font-size:.75rem;color:var(--goud-700);border:1px solid var(--goud-300);border-radius:999px;padding:.2rem .65rem}
.sk-ideas button:hover,.sk-ideas button:focus-visible{background:var(--goud-100)}
.sk-skies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem .5rem}
.alp-sk label.sk-sky{align-items:center;text-align:center;font-size:.6875rem;font-weight:400;line-height:1.25;cursor:pointer;gap:.35rem;color:var(--inkt-700)}
.sk-sky input,.sk-seg input,.sk-finish input{position:absolute;opacity:0;pointer-events:none}
.sk-sky img{width:100%;max-width:56px;aspect-ratio:1;object-fit:fill;border-radius:50%;outline:2px solid transparent;outline-offset:3px}
.sk-sky input:checked+img{outline-color:var(--inkt-900)}
.sk-sky input:focus-visible+img{outline-color:var(--goud-400)}
.sk-seg{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.sk-finish{display:flex;flex-direction:column;gap:.4rem}
.alp-sk .sk-seg label,.alp-sk .sk-finish label{position:relative;flex-direction:row;align-items:baseline;justify-content:space-between;gap:.5rem;border:1px solid var(--line);border-radius:3px;padding:.6rem .8rem;cursor:pointer;font-weight:500}
.sk-seg label em,.sk-finish label em{font-style:normal;font-weight:400;font-size:.8125rem;color:var(--inkt-600);text-align:right}
.alp-sk .sk-seg label:has(input:checked),.alp-sk .sk-finish label:has(input:checked){border-color:var(--inkt-900);box-shadow:inset 0 0 0 1px var(--inkt-900);background:var(--papier-50)}
.alp-sk .sk-seg label:has(input:focus-visible),.alp-sk .sk-finish label:has(input:focus-visible){outline:2px solid var(--goud-400)}
.sk-buy{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:.25rem}
.sk-price span{display:block;font-size:.75rem;color:var(--inkt-600)}
.sk-price b{font-family:var(--font-display);font-size:1.75rem;font-weight:500;color:var(--inkt-900);font-variant-numeric:lining-nums}
.alp-sk .sk-btn{display:inline-flex;align-items:center;justify-content:center;font:inherit!important;font-weight:600!important;font-size:.9375rem!important;line-height:1.2!important;color:var(--inkt-900)!important;background:var(--goud-300)!important;border:1px solid var(--goud-300)!important;border-radius:3px!important;padding:.85rem 1.5rem!important;cursor:pointer;text-decoration:none;box-shadow:none!important;margin:0!important}
.alp-sk .sk-btn:hover{background:var(--goud-400)!important;border-color:var(--goud-400)!important}
.alp-sk .sk-btn[disabled]{opacity:.6;cursor:wait}
.alp-sk .sk-btn--line{background:transparent!important;border-color:var(--inkt-900)!important;padding:.6rem 1rem!important}
.sk-status{font-size:.875rem;min-height:1.3em}
.sk-status.is-error{color:var(--fout-700)}

.sk-help{border-top:1px solid var(--line);background:var(--papier-100);padding:2.5rem 0}
.sk-help h2{font-size:1.75rem;margin-bottom:1rem}
.sk-help ul{display:flex;flex-wrap:wrap;gap:.5rem 2rem}
.sk-help a{text-decoration:none;font-weight:500}

@media (max-width:960px){
.sk-tool{grid-template-columns:minmax(0,1fr)}
.sk-preview{position:static}
.sk-skies{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:480px){
.sk-row{grid-template-columns:1fr}
.sk-check--inline{padding-bottom:0}
.sk-buy{flex-direction:column;align-items:stretch}
.sk-buy .sk-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.sk-art{transition:none}}