/* OmniViz Studio store. Brand Style Guide v1.0: dark navy, teal accent, Cormorant Garamond titles,
   Inter text, pill buttons in small caps, cards with a teal accent bar. Shared by every store page. */
:root {
  --bg:#0D1B2A; --bg-mid:#182233; --card:#1E2B3C; --alt:#243245;
  --line:rgba(255,255,255,0.07); --line2:rgba(255,255,255,0.13);
  --teal:#0D9488; --teal2:#14B8A6; --glow:rgba(13,148,136,0.15); --dim:rgba(13,148,136,0.08);
  --white:#fff; --ink:#D8E8F0; --muted:#8BAABB; --faint:#6B7F90; --err:#F0A28A;
  --serif:'Cormorant Garamond', Georgia, serif; --sans:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace; --ease:cubic-bezier(0.25,1,0.5,1);
  color-scheme: dark;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--bg); }
body { margin:0; color:var(--ink); font:15px/1.65 var(--sans); -webkit-font-smoothing:antialiased; min-height:100vh;
  background:
    radial-gradient(ellipse 80% 420px at 50% -60px, var(--glow), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 40px), var(--bg);
  background-attachment:fixed; }
a { color:var(--teal2); }
:focus-visible { outline:2px solid var(--teal2); outline-offset:3px; }

.bar { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; height:68px;
  padding:0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  background:rgba(13,27,42,0.88); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); }
.bar img { height:30px; display:block; }
.bar .home { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.bar .home:hover { color:var(--white); }

main { max-width:1080px; margin:0 auto; padding:56px max(20px, env(safe-area-inset-right)) 90px max(20px, env(safe-area-inset-left)); }
main.narrow { max-width:720px; }
.eyebrow { font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--teal2); margin:0 0 14px; }
h1 { font:300 clamp(38px, 6.5vw, 64px)/1.03 var(--serif); color:var(--white); margin:0 0 16px; text-wrap:balance; }
h1 em { font-style:italic; color:var(--teal2); }
h2 { font:400 clamp(28px, 4vw, 38px)/1.1 var(--serif); color:var(--white); margin:64px 0 10px; }
h3 { font:500 28px/1.1 var(--serif); color:var(--white); margin:0; }
.sub { color:var(--muted); max-width:60ch; margin:0 0 30px; font-size:16px; }
.hint { color:var(--faint); font-size:13px; }
kbd { font:11px var(--mono); border:1px solid var(--line2); border-bottom-width:2px; border-radius:4px; padding:1px 5px; color:var(--ink); }
code { font:13px var(--mono); color:var(--teal2); }

/* buttons */
button, .btn { font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; border-radius:999px; padding:15px 28px;
  cursor:pointer; border:1px solid var(--teal); background:var(--teal); color:var(--white); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:all .35s var(--ease); }
button:hover:not(:disabled), .btn:hover { background:var(--teal2); border-color:var(--teal2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(13,148,136,.35); }
button.ghost { background:transparent; color:var(--ink); border-color:var(--line2); }
button.ghost:hover:not(:disabled) { background:transparent; color:var(--teal2); border-color:var(--teal2); box-shadow:none; }
button.small { padding:10px 18px; }
button:disabled { opacity:.55; cursor:progress; transform:none; }
.ghostlink { color:var(--muted); font-size:13px; margin-left:14px; }

/* cards */
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 26px; margin:0 0 14px;
  box-shadow:0 4px 20px rgba(0,0,0,.3); }
.card::before { content:""; position:absolute; top:0; left:26px; width:40px; height:3px; background:var(--teal); border-radius:0 0 2px 2px; }
.lbl { display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.key { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:4px 0 8px; }
.key code { font-size:20px; color:var(--white); background:var(--bg); border:1px solid var(--line2); border-radius:10px; padding:10px 14px; letter-spacing:.04em; }
.steps { margin:0; padding-left:20px; } .steps li { margin:6px 0; }

/* products */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.product { display:flex; flex-direction:column; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:26px 24px 22px; position:relative; transition:transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.product::before { content:""; position:absolute; top:0; left:24px; width:40px; height:3px; background:var(--teal); border-radius:0 0 2px 2px; }
.product:hover { transform:translateY(-4px); border-color:rgba(13,148,136,.3); box-shadow:0 20px 56px rgba(0,0,0,.5); }
.product .tag { color:var(--muted); font-size:14px; min-height:3.2em; }
.product .price { font:400 34px/1 var(--serif); color:var(--teal2); }
.product .price small { font:500 11px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-left:6px; }
.product ul { list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--ink); flex:1; }
.product li { padding:6px 0 6px 22px; position:relative; border-top:1px solid var(--line); }
.product li::before { content:"✓"; position:absolute; left:0; color:var(--teal2); font-weight:600; }
.product .meta { font-size:12px; color:var(--faint); }
.product.best { border-color:rgba(13,148,136,.4); }
.product .badge { position:absolute; top:18px; right:18px; font:600 9.5px var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal2); border:1px solid var(--teal); background:var(--dim); border-radius:999px; padding:5px 10px; }

/* checkout */
.checkout { max-width:640px; margin:28px auto 0; }
.field { margin:0 0 16px; }
.field label { display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 7px; }
input[type=text], input[type=email], select, textarea { width:100%; font:inherit; color:var(--white); background:var(--bg); border:1px solid var(--line2);
  border-radius:10px; padding:12px 14px; transition:border-color .25s, box-shadow .25s; }
#streetLines .street + .street { margin-top:10px; }
.addline { all:unset; cursor:pointer; display:inline-block; margin:8px 0 0; font-size:12px; color:var(--teal2); }
.addline:hover { text-decoration:underline; }
.fromcountry { margin-top:10px; color:var(--muted) !important; cursor:default; }
.fromcountry:focus { border-color:var(--line2) !important; box-shadow:none !important; }
.row2 { display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:10px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 4px var(--dim); }
.check { display:flex; gap:12px; align-items:flex-start; margin:12px 0; font-size:14px; cursor:pointer; }
.check input { appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin:2px 0 0; border:1.5px solid var(--faint);
  border-radius:6px; display:grid; place-items:center; cursor:pointer; }
.check input:checked { background:var(--teal); border-color:var(--teal2); }
.check input:checked::after { content:"✓"; color:var(--white); font:700 12px/1 var(--sans); }
.summary { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 0; margin:0 0 18px;
  border-bottom:1px solid var(--line2); }
.summary b { font:500 26px var(--serif); color:var(--white); } .summary span { font:400 30px var(--serif); color:var(--teal2); }
.pay { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.msg { min-height:1.5em; margin:14px 0 0; font-size:14px; color:var(--muted); }
.msg.err { color:var(--err); }
.notice { border:1px solid var(--teal); background:var(--dim); border-radius:12px; padding:12px 16px; font-size:14px; margin:0 0 20px; }

.terms h2 { font-size:26px; margin:34px 0 8px; } .terms p, .terms li { color:var(--ink); }
footer { margin-top:70px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:8px 24px; color:var(--faint); font-size:12px; }
footer a { color:var(--muted); }

@media (max-width:620px) { main { padding-top:36px; } .card, .product { padding:22px 18px; } .card::before, .product::before { left:18px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* ── licence key: the one thing the buyer must not miss ── */
.item .itemhead { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:0 0 14px; }
.keybox { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:6px 0 12px; padding:18px 20px; border-radius:14px;
  background:linear-gradient(135deg, rgba(13,148,136,.22), rgba(20,184,166,.08)); border:1.5px solid var(--teal2);
  animation:keyglow 2.6s ease-in-out infinite; }
.keybox code { flex:1 1 auto; font:600 clamp(20px, 4.2vw, 30px)/1.2 var(--mono); color:var(--white); letter-spacing:.06em;
  text-shadow:0 0 18px rgba(20,184,166,.55); word-break:break-all; background:none; border:0; padding:0; }
.keybox .copy { background:var(--teal2); border-color:var(--teal2); color:var(--bg); padding:14px 24px; }
.keybox .copy.done { background:var(--white); border-color:var(--white); }
@keyframes keyglow { 0%,100% { box-shadow:0 0 0 0 rgba(20,184,166,.0), 0 0 22px rgba(20,184,166,.18); }
                     50% { box-shadow:0 0 0 4px rgba(20,184,166,.12), 0 0 44px rgba(20,184,166,.38); } }
.dlleft { margin-left:12px; }

/* ── basket ── */
.product .actions { display:flex; gap:8px; flex-wrap:wrap; }
.product .actions button { flex:1 1 auto; justify-content:center; }
.product.inbasket { border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) inset; }
.basketbar { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; align-items:center; justify-content:center; gap:18px;
  padding:14px max(20px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background:rgba(24,34,51,.96); backdrop-filter:blur(16px); border-top:1px solid var(--teal); box-shadow:0 -10px 40px rgba(0,0,0,.45); }
.basketbar .count { font-size:14px; color:var(--ink); } .basketbar .total { font:400 28px var(--serif); color:var(--teal2); }
.lines { margin:0 0 6px; }
.line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.line b { font:500 22px var(--serif); color:var(--white); } .line .lp { font:400 22px var(--serif); color:var(--teal2); margin-left:auto; }
.line .rm { background:none; border:1px solid var(--line2); color:var(--muted); padding:7px 12px; font-size:10px; }
.line .rm:hover:not(:disabled) { color:var(--err); border-color:var(--err); background:none; box-shadow:none; transform:none; }
.basketnote { color:var(--teal2); font-size:13px; margin:10px 0 0; }
body.hasbar main { padding-bottom:140px; }
@media (prefers-reduced-motion:reduce) { .keybox { animation:none; box-shadow:0 0 30px rgba(20,184,166,.3); } }

/* VAT: the business section at checkout and the VAT line under the total */
.vatline{margin:-4px 0 16px;text-align:right}
.biz{margin:4px 0 18px;border:1px solid var(--line2);border-radius:10px;padding:12px 14px}
.biz .bizhead{margin:0 0 12px;font-size:13px;color:var(--teal2)}
#vatMsg.err{color:var(--err)}