/* /julgava-bestall: order page for Julgåva till företag (2026-11-08).
   Step 1 our form (org.nr -> VIES autofill), step 2 Stripe embedded checkout (card / Klarna).
   Same design tokens as /julgavor. Scoped to .okg so it can sit in a Webflow Code Embed.
   Webflow site has global .form/.logo/.price classes: none are used here. */
.okg{
  --ground:#f3eee6; --card:#fff; --line:#e4dccf; --ink:#1e2318; --muted:#62675a; --olive:#3d4230;
  --green:#1a3300; --yellow:#ffe95c; --pale:#e6f3d8; --err:#a3261b;
  --f-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --f-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;color-scheme:light;min-height:100vh;padding:0 0 48px
}
.okg *{box-sizing:border-box}
.okg p{margin:0}
.okg h1,.okg h2{font-family:var(--f-display);color:var(--green);margin:0;letter-spacing:-.015em;text-wrap:balance}
.okg h1{font-size:clamp(2rem,7vw,2.6rem);line-height:1.08;font-weight:500}
.okg h2{font-size:1.25rem;line-height:1.3;font-weight:600;color:var(--ink)}
.okg a{color:var(--green)}
.okg :focus-visible{outline:3px solid #2fa84f;outline-offset:2px;border-radius:6px}
.okg .g-wrap{max-width:640px;margin:0 auto;padding:0 16px}
.okg .g-top{display:flex;justify-content:center;padding:16px 0 4px}
.okg .g-top a{display:block;line-height:0;color:var(--green);font-family:var(--f-display);font-size:24px;font-weight:600;text-decoration:none;line-height:1}
.okg .g-back{display:inline-block;margin:10px 0 6px;font-size:15px;color:var(--muted)}
.okg .g-lead{margin-top:10px;color:var(--olive)}
.okg .g-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 18px;margin-top:18px}
.okg .g-card h2{margin-bottom:12px}
.okg .g-sum{display:flex;gap:14px;align-items:center}
.okg .g-sum img{width:84px;height:84px;border-radius:10px;object-fit:cover;background:#e9dccb;flex:0 0 84px}
.okg .g-sum b{font-family:var(--f-display);font-size:19px;font-weight:600;display:block}
.okg .g-sum span{font-size:15px;color:var(--muted)}
.okg .g-qty{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid #ece4d6}
.okg .g-qty-c{display:flex;align-items:center;gap:12px}
.okg .g-qty button{width:42px;height:42px;border:1px solid #d9d3c8;border-radius:50%;background:#fff;font:inherit;font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.okg .g-qty input{width:64px;height:42px;text-align:center;font:600 18px var(--f-body);border:1px solid #d9d3c8;border-radius:10px;background:#fff;color:var(--ink);-moz-appearance:textfield}
.okg .g-qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.okg .g-tot{display:flex;justify-content:space-between;margin-top:12px;font-size:16px;color:var(--muted)}
.okg .g-tot b{font-family:var(--f-display);font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.okg .g-vat{margin-top:4px;font-size:14px;color:var(--muted);text-align:right}
.okg .g-f{display:block;margin-top:12px}
.okg .g-f > span{display:block;font-size:15px;font-weight:500;margin-bottom:5px}
.okg .g-f small{font-weight:400;color:var(--muted)}
.okg .g-f input,.okg .g-org input{display:block;width:100%;height:50px;padding:0 14px;font:400 17px var(--f-body);color:var(--ink);background:#fff;border:1px solid #cfc7b8;border-radius:10px}
.okg .g-f input[aria-invalid="true"],.okg .g-org input[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.okg .g-row{display:grid;grid-template-columns:1fr;gap:0 12px}
@media (min-width:520px){ .okg .g-row{grid-template-columns:150px 1fr} }
.okg .g-org{display:flex;gap:10px}
.okg .g-org input{flex:1;min-width:0;width:auto}
.okg .g-btn2{flex:0 0 auto;height:50px;padding:0 16px;border:2px solid var(--green);border-radius:99rem;background:#fff;color:var(--green);font:500 16px var(--f-display);cursor:pointer}
.okg .g-btn2:disabled{opacity:.6;cursor:wait}
.okg .g-note{margin-top:8px;font-size:15px;line-height:1.4}
.okg .g-note.ok{color:#2b5a10}
.okg .g-note.warn{color:var(--olive)}
.okg .g-chk{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:16px;cursor:pointer}
.okg .g-chk input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--green);flex:0 0 22px}
.okg .g-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:59px;margin-top:20px;padding:16px;border:0;border-radius:99rem;background:var(--green);color:var(--yellow);font:500 18px/1.3 var(--f-display);cursor:pointer}
.okg .g-go:hover{background:#244600}
.okg .g-go:disabled{opacity:.7;cursor:wait}
.okg .g-err{margin-top:12px;padding:12px 14px;border-radius:10px;background:#fbeae7;color:var(--err);font-size:15px}
.okg .g-trust{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:15px;color:var(--olive)}
.okg .g-trust span::before{content:"✓ ";color:#2b5a10;font-weight:600}
.okg .g-recap{font-size:15px;line-height:1.45;color:var(--olive)}
.okg .g-recap b{color:var(--ink)}
.okg .g-edit{margin-top:8px;background:none;border:0;padding:0;font:500 15px var(--f-body);color:var(--green);text-decoration:underline;cursor:pointer}
.okg .g-load{display:flex;align-items:center;justify-content:center;min-height:220px;color:var(--muted)}
.okg #okg-mount{margin-top:4px}
.okg [hidden]{display:none!important}