body.design{background:var(--linen)}
.d-yta{display:grid;grid-template-rows:40svh auto;min-height:100svh;padding-top:64px}
.d-scen{position:sticky;top:64px;z-index:3;height:40svh;overflow:hidden;background:#dad7d0;box-shadow:0 10px 24px -14px rgba(0,0,0,.35)}
.d-scen .f-canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.d-panel{position:relative;z-index:2;background:var(--linen);padding:28px var(--kant) calc(48px + env(safe-area-inset-bottom));display:grid;gap:30px;align-content:start;}
.d-over{font-family:"Lateral";text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--sage)}
.d-panel h1{font-size:clamp(28px,4.4vw,48px);margin-top:-18px}
.d-ingress{max-width:30em;margin-top:-14px}
.d-grupp{display:grid;gap:12px}
.d-grupp,.d-val button,.d-summa{scroll-margin-top:calc(64px + 40svh + 16px)}
.d-grupp h2{font-size:15px;letter-spacing:.04em}
.d-val{display:flex;flex-wrap:wrap;gap:8px}
.d-val button{min-height:44px;min-width:44px;padding:0 16px;border:1px solid rgba(52,49,48,.25);background:transparent;color:var(--graphite);font:inherit;font-size:15px;border-radius:3px;cursor:pointer;transition:background .25s cubic-bezier(.16,1,.3,1),color .25s,border-color .25s,transform .2s cubic-bezier(.16,1,.3,1)}
.d-val button:hover{border-color:var(--graphite)}
.d-val button:active{transform:scale(.97)}
.d-val button[aria-checked="true"]{background:var(--graphite);color:var(--linen);border-color:var(--graphite)}
.d-val button:focus-visible{outline:2px solid var(--graphite);outline-offset:2px}

.d-kort{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.d-val.d-kort button{display:grid;gap:0;padding:0;min-height:0;overflow:hidden;background:#c5c3b7;text-align:left}
.d-kort img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.d-kort span{display:block;padding:11px 12px 12px;background:var(--linen);font-size:15px;min-height:44px;box-sizing:border-box}
.d-val.d-kort button[aria-checked="true"]{background:#c5c3b7;color:var(--graphite);box-shadow:0 0 0 2px var(--graphite)}
.d-val.d-kort button[aria-checked="true"] span{background:var(--graphite);color:var(--linen)}
@media (hover:hover){.d-kort button:hover img{transform:scale(1.03)}}

.d-tyg{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
.d-val.d-tyg button{width:100%;aspect-ratio:1;min-width:44px;min-height:44px;padding:0;border-radius:50%;overflow:hidden;background:var(--prov);border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.d-tyg img{display:block;width:100%;height:100%;object-fit:cover}
.d-val.d-tyg button[aria-checked="true"]{background:var(--prov);box-shadow:0 0 0 2px var(--linen),0 0 0 4px var(--graphite)}
.d-tygnamn{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:17px;min-height:1.5em}
.d-tygnr{font-size:14px;color:var(--sage)}
.d-not{font-size:15px;color:var(--sage);max-width:30em;min-height:1.5em}
.d-summa{display:grid;gap:14px;padding-top:24px;border-top:1px solid rgba(52,49,48,.15)}
.d-summa [data-summa]{font-size:clamp(18px,1.6vw,22px);line-height:1.4;max-width:28em}
.d-summa .knapp{justify-self:start}
body.design .topp{color:var(--graphite)}

@media (min-width:900px){
  .d-yta{grid-template-columns:1.25fr .75fr;grid-template-rows:none;padding-top:0}
  .d-scen{top:0;height:100svh;box-shadow:none}
  .d-grupp,.d-val button,.d-summa{scroll-margin-top:96px}
  .d-panel{margin-top:0;border-radius:0;box-shadow:none;padding-top:120px;min-height:100svh}
}
@media (prefers-reduced-motion:reduce){.d-val button{transition:none}}

.d-del{display:grid;gap:8px}
.d-del[hidden]{display:none}
.d-etikett{font-size:14px;color:var(--sage)}
.d-knappar button{display:inline-flex;align-items:center;gap:10px}
.d-knappar svg{fill:currentColor;flex:none}