/* Presentkort (2026-11-06, sk_77): kortet (gk.js) på /presentkort och /ditt-presentkort. Den enda bilden är kortet:
   ett fönster där en persienn dras upp och visar beloppet. Resten av sidorna är vanlig text och formulär. */
/* Omgjort 2026-11-06 (Simon: "ser lite ai-gjort ut"): en färg, inget tonat, ingen platta runt beloppet, ingen slogan.
   Kortet ska kännas tryckt: liten rubrik PRESENTKORT, hälsningen som vanlig text, och ett fönster med spröjs, karm och
   fönsterbräda där beloppet står som ren text bakom persiennen. */
.gk{--gk:#253551;--gkt:#fff;position:relative;aspect-ratio:1.6/1;width:100%;border-radius:10px;overflow:hidden;
  background:var(--gk);color:var(--gkt);box-shadow:0 12px 30px #25355126;
  display:grid;grid-template-columns:minmax(0,1fr) 40%;gap:6%;padding:6.5% 7% 6%;container-type:inline-size;font-family:Poppins,Arial,sans-serif}
.gk[data-d=jul]{--gk:#1f4a39}
.gk[data-d=tack]{--gk:#8a4a35}
.gk[data-d=enkel]{--gk:#2A2829}
.gk[data-d=fodelsedag]{--gk:#5a3e6b}
.gk[data-d=sommar]{--gk:#2f6a88}
.gk[data-d=pask]{--gk:#7a5d22}
.gk[data-d=krya]{--gk:#43655f}
.gk[data-d=brollop]{--gk:#6b4454}
.gk-l{display:flex;flex-direction:column;min-width:0}
.gk-k{font-size:2.2cqi;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.gk-h{font-size:6.2cqi;line-height:1.1;letter-spacing:-.025em;font-weight:600;margin-top:auto;color:#fff}
.gk-to{font-size:3.1cqi;margin-top:2.2cqi;line-height:1.4}
.gk-msg{font-size:2.7cqi;margin-top:1.4cqi;opacity:.82;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gk-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:3cqi;margin-top:3.5cqi;padding-top:2.4cqi;border-top:1px solid #ffffff38}
.gk-logo{width:34%;max-width:140px;opacity:.95}
.gk-sm{font-size:2.1cqi;opacity:.65;letter-spacing:.04em}
/* Fönstret: karm, två gånger två rutor med spröjs, fönsterbräda och persiennen med stegband. */
.gk-win{position:relative;align-self:stretch;margin-bottom:3%;background:#f3f1ec;padding:4.5% 4.5% 4%;box-shadow:inset 0 0 0 1px #00000014,0 1px 0 #ffffff40}
.gk-win::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-3.2cqi;height:2.2cqi;background:#e6e3dc;box-shadow:0 2px 4px #00000030}
.gk-view{position:relative;height:100%;overflow:hidden;background:#dde6ec;box-shadow:inset 0 0 0 1px #00000012;
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--navy)}
.gk-view::before,.gk-view::after{content:"";position:absolute;background:#f3f1ec;pointer-events:none;z-index:1}
.gk-view::before{top:0;bottom:0;left:calc(50% - 1.3%);width:2.6%}
.gk-view::after{left:0;right:0;top:calc(58% - 1.3%);height:2.6%}
.gk-sc{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s .5s}
.gk.up .gk-sc{opacity:1}
.gk-amt{position:relative;font-size:8cqi;font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:-6%;z-index:1}
.gk-amt small{display:none}
.gk-slats{position:absolute;inset:0;z-index:2;transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.6,.05,.25,1);
  background:repeating-linear-gradient(180deg,#f4f2ec 0,#f4f2ec calc(var(--s,8%) - 3px),#d2cfc6 calc(var(--s,8%) - 3px),#e2dfd6 var(--s,8%));
  border-bottom:5px solid #d9d6cd;box-shadow:0 3px 3px -1px #00000033}
.gk-slats::before,.gk-slats::after{content:"";position:absolute;top:0;bottom:0;width:1.5%;background:#d7d3c9;opacity:.8}
.gk-slats::before{left:22%}.gk-slats::after{right:22%}
.gk-cord{position:absolute;z-index:3;top:0;right:7%;width:2px;height:66%;background:#a8a498;transition:height 1.1s cubic-bezier(.6,.05,.25,1)}
.gk-cord::after{content:"";position:absolute;bottom:-7px;left:-3px;width:8px;height:11px;border-radius:2px 2px 4px 4px;background:#8d897f}
.gk.up .gk-slats{transform:scaleY(.1)}
.gk.up .gk-cord{height:24%}
html.calm .gk-slats,html.calm .gk-cord{transition:none}
@media (prefers-reduced-motion:reduce){.gk-slats,.gk-cord{transition:none}}
.gk-hint{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 0}

/* Köpsidan */
.pk-head{padding-bottom:8px}
.pk-head h1{font-size:clamp(30px,4.4vw,48px);line-height:1.08}
.pk-head .lead{max-width:640px;color:var(--muted);margin:14px 0 0;font-size:17px}
.pk{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start;padding:28px 0 64px}
.pk-prev{position:sticky;top:calc(var(--topH) + 24px)}
.pk-form h2{font-size:17px;margin:0 0 12px}
.pk-step{border:0;border-top:1px solid var(--line);margin:0;padding:22px 0 8px}
.pk-step:first-of-type{border-top:0;padding-top:0}
.pk-step legend{font-weight:700;color:var(--navy);font-size:16px;padding:0;margin-bottom:12px;float:left;width:100%}
.pk-step legend+*{clear:both}
.pk-amts{display:flex;flex-wrap:wrap;gap:8px}
.pk-chip{min-height:46px;padding:0 18px;border-radius:99px;border:1px solid #c9cdd2;background:#fff;font:600 15px Poppins,Arial,sans-serif;color:var(--ink);cursor:pointer}
.pk-chip:hover{border-color:var(--navy)}
.pk-chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.pk-own{display:flex;align-items:center;gap:8px;margin-top:10px}
.pk-own input{width:140px}
.pk-own span{font-size:13px;color:var(--muted)}
.pk-des{display:flex;flex-wrap:wrap;gap:8px}
.pk-des .pk-chip{display:inline-flex;align-items:center;gap:8px}
.pk-des .pk-chip i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #0000002a}
.pk-des .pk-chip[aria-pressed=true] i{box-shadow:0 0 0 2px #fff}
.pk-step .field+.field,.pk-step .two+.field,.pk-step .field+.two{margin-top:12px}
.pk-title{margin-top:12px}
.pk-count{float:right;font-size:12px;color:var(--muted);margin-top:5px}
.pk-send{width:100%;margin-top:6px}
.pk-err{color:#b3261e;font-size:13px;margin:8px 0 0}
.pk-how{border-top:1px solid var(--line);padding:40px 0 72px}
.pk-how .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px}
.pk-how h2{font-size:24px}
.pk-how ol{margin:0;padding-left:20px;display:grid;gap:12px}
.pk-how li::marker{color:var(--navy);font-weight:700}
.pk-how p{color:var(--muted);font-size:14px;margin:14px 0 0}
.pk-how details{border-top:1px solid var(--line);padding:12px 0}
.pk-how summary{cursor:pointer;font-weight:600;color:var(--navy)}
.pk-how details p{margin:8px 0 0}
.pk-done{max-width:620px;margin:0 auto;padding:40px 0 80px;text-align:center}
.pk-done:focus{outline:0}
.pk-done #pkDoneCard{max-width:480px;margin:0 auto;text-align:left}
.pk-done h2{font-size:30px;margin:18px 0 10px}
.pk-done p{color:var(--muted)}
.pk-done ol{text-align:left;margin:22px auto;max-width:460px;display:grid;gap:8px;padding-left:20px}
.pk-done .btns{justify-content:center;margin-top:24px}
@media (max-width:900px){
  .pk{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:18px}
  .pk-prev{position:static}
  .pk-how .wrap{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:560px){.wrap.pk,.pk-head .wrap{width:calc(100% - 40px)}}

/* Mottagarens sida */
.dk{max-width:720px;margin:0 auto;padding:12px 0 72px}
.dk-h1{font-size:clamp(22px,3.4vw,30px);line-height:1.15;margin:22px 0 14px}
.dk-card{margin:8px 0 26px}
.dk-code{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.dk-code b{display:block;font-size:12px;color:var(--muted);font-weight:500}
.dk-code strong{font-size:26px;letter-spacing:.08em;color:var(--navy);font-variant-numeric:tabular-nums}
.dk-facts{display:flex;flex-wrap:wrap;gap:6px 28px;margin:16px 2px 0;font-size:14px;color:var(--muted)}
.dk-facts b{color:var(--ink)}
.dk h2{font-size:20px;margin:34px 0 10px}
.dk ol{padding-left:20px;margin:0;display:grid;gap:8px}
.dk .btns{margin-top:26px}
.dk-msg{text-align:center;padding:30px 0}
.dk-msg h1{font-size:28px;margin-bottom:10px}
.dk-msg p{color:var(--muted)}
@media print{
  body *{visibility:hidden}
  .dk-print,.dk-print *{visibility:visible}
  .dk-print{position:absolute;inset:0 0 auto;margin:0;padding:0}
  .gk{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .gk-slats,.gk-cord{display:none}
  .dk-code{margin-top:18px}
  .dk-code button{display:none}
}

/* Varukorgen: presentkortskoden */
.vk-gift{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.vk-gift summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--navy)}
.vk-gift-row{display:flex;gap:8px;margin-top:10px}
.vk-gift-row input{flex:1;min-width:0;min-height:44px;border:1px solid #c9cdd2;border-radius:9px;padding:0 12px;font:600 15px Poppins,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.vk-gift-row button{min-height:44px;padding:0 16px;border-radius:99px;border:0;background:var(--navy);color:#fff;font:700 14px Poppins,Arial,sans-serif;cursor:pointer}
.vk-gift-msg{font-size:13px;margin:8px 0 0;color:var(--muted)}
.vk-gift-msg.bad{color:#b3261e}
.vk-line.vk-gk span:last-child{color:var(--ok);font-weight:600}
.vk-gk button{border:0;background:none;padding:0;margin-left:6px;font:inherit;font-size:12px;color:var(--muted);text-decoration:underline;cursor:pointer}