/* Profil hentet fra melums.no: svart grunn, #EB0045 som primærfarge,
     Poppins 300/500, null hjørneradius, bølgeskille mellom seksjoner.
     Bevisst enkelttema — merkevaren ER svart. */
  :root{
    color-scheme: dark;
    --bg:#000000;
    --surface:#0E0E10;
    --surface-2:#17171A;
    --line:#2A2A2F;
    --fg:#FFFFFF;
    --muted:#9B949A;      /* nøytral med svak dragning mot aksenten */
    --brand:#EB0045;
    --brand-deep:#B80036;
    --warn:#FFB020;       /* bevisst utenfor profilen: feil må ikke forveksles med "trykk her" */
    --ok:#3FBF7F;
    --step:clamp(20px, 5vw, 28px);
  }
  *{box-sizing:border-box}
  html{scrollbar-gutter:stable}
  body{
    margin:0; background:var(--bg); color:var(--fg);
    font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight:400; font-size:16px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  button, input, select{font-family:inherit; font-size:inherit; color:inherit}
  :focus-visible{outline:2px solid var(--fg); outline-offset:3px}

  /* ---- prototypebanner ---- */
  .proto{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
    background:var(--warn); color:#141414;
    font-size:12px; font-weight:500; letter-spacing:.04em;
    text-align:center; padding:7px 16px;
  }

  /* ---- topp ---- */
  .top{padding:26px 16px 0}
  .shell{max-width:560px; margin:0 auto}
  .wordmark{
    display:flex; align-items:baseline; gap:8px;
    font-weight:500; font-size:21px; letter-spacing:.01em;
  }
  .wordmark b{font-weight:500}
  .wordmark span{color:var(--brand); font-weight:500}
  .kicker{
    margin:22px 0 4px; font-size:11px; font-weight:500;
    letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  }
  h1{
    margin:0 0 4px; font-weight:500; line-height:1.18;
    font-size:clamp(28px, 7.5vw, 40px); text-wrap:balance;
  }
  .lede{margin:0; color:var(--muted); font-weight:300; max-width:44ch}

  /* ---- framdrift ---- */
  .bar{display:flex; gap:4px; margin:22px 0 0}
  .bar i{flex:1; height:3px; background:var(--line); display:block}
  .bar i.done{background:var(--brand)}
  .bar-txt{
    margin:9px 0 0; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); font-weight:500;
  }

  .wave{display:block; width:100%; height:44px; margin-top:26px}

  /* ---- innhold ---- */
  main{background:var(--surface); padding:var(--step) 16px 40px; min-height:46vh}
  fieldset{border:0; margin:0; padding:0}
  legend{padding:0}
  h2{margin:0 0 20px; font-size:19px; font-weight:500}
  .field{margin:0 0 18px}
  label.lab{display:block; font-size:13px; font-weight:500; margin:0 0 7px}
  .hint{display:block; font-size:12px; color:var(--muted); font-weight:300; margin:-3px 0 7px}
  input[type=text], input[type=tel], input[type=email]{
    width:100%; background:var(--bg); border:1px solid var(--line);
    border-radius:0; padding:13px 14px; font-weight:400;
  }
  input::placeholder{color:#5C585C; font-weight:300}
  input:focus{border-color:var(--brand); outline:none}
  input[aria-invalid=true]{border-color:var(--warn)}
  .err{display:block; color:var(--warn); font-size:12.5px; font-weight:400; margin:6px 0 0}

  /* valgknapper */
  .opts{display:flex; flex-wrap:wrap; gap:8px}
  .opt{
    background:var(--bg); border:1px solid var(--line); border-radius:0;
    padding:11px 15px; cursor:pointer; font-weight:400; font-size:14.5px;
    transition:border-color .12s, background .12s;
  }
  .opt:hover{border-color:#4A464A}
  .opt[aria-pressed=true]{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:500}
  .opts.sizes .opt{min-width:56px; text-align:center}

  /* mangler-signal: slår inn når "Legg til" trykkes uten at alt er valgt.
     Farge og etikett endrer seg uavhengig av animasjonen, så signalet
     står også for dem som har slått av bevegelse. */
  .field.needs .lab{color:var(--warn)}
  .field.needs .opt,
  .field.needs .sw{border-color:var(--warn); animation:pulse .52s ease-in-out 3}
  @keyframes pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}
    50%{box-shadow:0 0 0 3px rgba(255,176,32,.30)}
  }

  /* fargeprikker */
  .swatches{display:flex; flex-wrap:wrap; gap:8px}
  .sw{
    display:flex; align-items:center; gap:9px; cursor:pointer;
    background:var(--bg); border:1px solid var(--line); padding:9px 14px 9px 10px;
    font-size:14.5px; font-weight:400;
  }
  .sw:hover{border-color:#4A464A}
  .sw i{width:19px; height:19px; display:block; border:1px solid #3A363A; flex:none}
  .sw[aria-pressed=true]{border-color:var(--brand); background:#1C0512; font-weight:500}

  /* antall */
  .qty{display:flex; align-items:center; gap:0; width:max-content; border:1px solid var(--line)}
  .qty button{
    background:var(--bg); border:0; width:46px; height:46px; cursor:pointer;
    font-size:20px; font-weight:400; line-height:1;
  }
  .qty button:hover{background:var(--surface-2)}
  .qty output{
    min-width:54px; text-align:center; font-weight:500; font-variant-numeric:tabular-nums;
  }

  /* linjer i bestillingen */
  .lines{display:flex; flex-direction:column; gap:1px; background:var(--line); margin:0 0 22px}
  .line{
    background:var(--bg); display:grid; grid-template-columns:1fr auto auto;
    gap:12px; align-items:center; padding:14px;
  }
  .line .n{font-weight:500; font-size:14.5px}
  .line .m{color:var(--muted); font-size:12.5px; font-weight:300}
  .line .p{font-variant-numeric:tabular-nums; font-weight:500; font-size:14.5px}
  .line .x{
    background:none; border:1px solid var(--line); width:32px; height:32px;
    cursor:pointer; color:var(--muted); font-size:15px; line-height:1;
  }
  .line .x:hover{border-color:var(--warn); color:var(--warn)}

  .adder{border:1px solid var(--line); padding:18px 16px}
  .adder h3{margin:0 0 16px; font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

  /* trykknavn */
  .preview{
    margin:16px 0 0; border:1px solid var(--line); background:var(--bg);
    padding:26px 16px; text-align:center;
  }
  .preview .cap{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500}
  .preview .val{
    margin-top:12px; font-size:clamp(22px, 7vw, 32px); font-weight:600;
    letter-spacing:.09em; word-break:break-word; min-height:1.2em;
  }
  .preview .val.empty{color:#4A464A; font-weight:300; letter-spacing:.04em; font-size:16px}

  /* sum */
  .sum{border:1px solid var(--line); margin:0 0 20px}
  .sum .row{display:flex; justify-content:space-between; gap:14px; padding:12px 15px; font-size:14.5px}
  .sum .row + .row{border-top:1px solid var(--line)}
  .sum .row span:last-child{font-variant-numeric:tabular-nums}
  .sum .row.total{background:var(--bg); font-weight:600; font-size:17px}
  .sum .k{color:var(--muted); font-weight:300}

  .pay{display:flex; flex-direction:column; gap:8px}
  .pay .opt{text-align:left; display:block; width:100%}
  .pay .opt b{display:block; font-weight:500; font-size:15px}
  .pay .opt em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); font-weight:300; margin-top:2px}
  .pay .opt[aria-pressed=true] em{color:rgba(255,255,255,.82)}
  .paybox{background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--brand); padding:14px 15px}
  .paybox b{display:block; font-weight:500; font-size:15px}
  .paybox em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); font-weight:300; margin-top:3px}

  /* handlinger */
  .acts{display:flex; gap:10px; margin:28px 0 0}
  .btn{
    border:0; border-radius:0; padding:18px 30px; cursor:pointer;
    font-size:15px; font-weight:500; letter-spacing:.02em; flex:1;
  }
  .btn.pri{background:var(--brand); color:#fff}
  .btn.pri:hover{background:var(--brand-deep)}
  .btn.sec{background:transparent; color:var(--fg); border:1px solid var(--line); flex:0 0 auto; padding:18px 22px}
  .btn.sec:hover{border-color:#4A464A}
  .btn.ghost{
    background:transparent; border:1px solid var(--brand); color:var(--brand);
    padding:14px 22px; font-size:14px; width:100%; flex:none;
  }
  .btn.ghost:hover{background:#1C0512}
  .btn:disabled{opacity:.4; cursor:not-allowed}

  /* kvittering */
  .done-wrap{background:var(--brand)}
  .done-in{padding:6px 16px 48px; color:#fff}
  .done-in .tick{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; opacity:.85}
  .done-in h2{font-size:clamp(26px, 7vw, 34px); margin:10px 0 10px; font-weight:500}
  .done-in p{margin:0 0 18px; font-weight:300; max-width:46ch}
  .ordernr{
    display:inline-block; border:1px solid rgba(255,255,255,.55); padding:9px 16px;
    font-weight:600; letter-spacing:.06em; font-variant-numeric:tabular-nums; margin:0 0 24px;
  }
  .card{background:#000; color:var(--fg); padding:18px 16px; margin:0 0 16px}
  .card h3{margin:0 0 14px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500}
  .vipps-msg{
    font-family:ui-monospace, 'Cascadia Mono', Menlo, monospace;
    font-size:12.5px; line-height:1.7; color:#D6D0D6; white-space:pre-wrap; word-break:break-word;
  }
  .meta{display:flex; flex-direction:column; gap:7px; font-size:13.5px}
  .meta div{display:flex; justify-content:space-between; gap:14px}
  .meta span:first-child{color:var(--muted); font-weight:300}
  .meta span:last-child{font-weight:500; text-align:right}

  /* ---- hjelpepanel (størrelsesguide / personvern) ---- */
  .lab-row{display:flex; align-items:baseline; gap:14px; margin:0 0 7px}
  .lab-row .lab{margin:0}
  .helplink{
    background:none; border:0; padding:0; cursor:pointer; margin-left:auto;
    color:var(--brand); font-size:12.5px; font-weight:500;
    text-decoration:underline; text-underline-offset:3px;
  }
  .helplink:hover{color:#FF3D70}
  .fineprint{
    margin:18px 0 0; font-size:12.5px; font-weight:300; color:var(--muted); line-height:1.6;
  }
  .fineprint .helplink{margin:0; display:inline}

  .sheet{
    position:fixed; inset:0; z-index:80; display:flex;
    align-items:flex-end; justify-content:center; background:rgba(0,0,0,.74);
  }
  @media (min-width:640px){ .sheet{align-items:center} }
  .sheet-panel{
    background:var(--surface); border-top:3px solid var(--brand);
    width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
    padding:22px 16px calc(30px + env(safe-area-inset-bottom, 0px));
  }
  .sheet-head{display:flex; align-items:flex-start; gap:14px; margin:0 0 6px}
  .sheet-head h3{margin:0; font-size:19px; font-weight:500; flex:1}
  .sheet-close{
    background:none; border:1px solid var(--line); width:36px; height:36px; flex:none;
    cursor:pointer; font-size:17px; line-height:1; color:var(--muted);
  }
  .sheet-close:hover{border-color:var(--fg); color:var(--fg)}
  .sheet-panel p{margin:0 0 13px; font-size:14.5px; font-weight:300}
  .sheet-panel h4{
    margin:24px 0 9px; font-size:11px; letter-spacing:.15em;
    text-transform:uppercase; color:var(--muted); font-weight:500;
  }
  .sheet-panel ul{margin:0 0 13px; padding-left:19px; font-size:14.5px; font-weight:300}
  .sheet-panel li{margin:0 0 7px}
  .sheet-panel b{font-weight:500}
  .note{
    border-left:3px solid var(--warn); background:var(--bg); color:#CBC3CB;
    padding:11px 13px; font-size:12.5px; font-weight:300; margin:0 0 18px; line-height:1.6;
  }
  .tablewrap{overflow-x:auto; margin:0 0 6px}
  table{border-collapse:collapse; width:100%; min-width:404px; font-size:13.5px}
  th,td{border:1px solid var(--line); padding:9px 11px; text-align:left; font-variant-numeric:tabular-nums}
  th{background:var(--bg); font-weight:500; font-size:11.5px; letter-spacing:.05em; color:var(--muted)}
  td:first-child{font-weight:500}

  footer{padding:22px 16px 40px; color:var(--muted); font-size:12px; font-weight:300}
  footer b{font-weight:500; color:#C9C3C9}

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important}
  }

  /* ---- stengt / ukjent lenke ---- */
  .stengt{max-width:520px;margin:0 auto;padding:44px 0 0;text-align:left}
  .stengt h1{margin:0 0 12px}
  .stengt p{color:var(--muted);font-weight:300;margin:0 0 14px}

  /* ---- spørsmål når man går videre med et ulagt valg ---- */
  .spor{border-left:3px solid var(--warn); background:var(--bg); padding:15px 16px; margin:22px 0 0}
  .spor p{margin:0 0 14px; font-size:14.5px; font-weight:300; line-height:1.55}
  .spor b{font-weight:500}
  .spor .knapper{display:flex; gap:9px; flex-wrap:wrap}
  .spor button{border:0; border-radius:0; padding:13px 20px; font-size:14px; font-weight:500; cursor:pointer}
  .spor .ja{background:var(--brand); color:#fff}
  .spor .ja:hover{background:var(--brand-deep)}
  .spor .nei{background:transparent; border:1px solid var(--line); color:var(--fg)}
  .spor .nei:hover{border-color:#4A464A}

  /* ---- forhåndsvisning av trykket ----
     Trykket er tre elementer: flagg i full farge, KONT-linjen, og navnet.
     Teksten er alltid hvit, så flaten bak må være mørk. */
  .trykkvisning{display:flex; gap:16px; flex-wrap:wrap; margin:18px 0 0}
  .trykkflate{
    flex:1 1 280px; border:1px solid var(--line); background:var(--bg);
    padding:26px 18px 30px;
  }
  .trykkflate .cap{
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); font-weight:500; margin:0 0 20px; text-align:center;
  }
  .trykkflate .flagg{width:62px; height:auto; display:block; margin:0 0 12px}
  /* Størrelsene settes av skriptet ut fra de ekte målene på plagget:
     KONT-linjen er 8 cm, navnet opptil 12 cm. Her settes bare utseendet. */
  .trykkflate .kontlinje,
  .trykkflate .trykknavn{color:#fff; font-weight:600; font-size:20px}
  .trykkflate .trykknavn.tom{color:#4A464A; font-weight:300; letter-spacing:.05em}

  .plagget{
    flex:1 1 230px; border:1px solid var(--line); background:var(--bg);
    padding:18px 16px 16px; text-align:center;
  }
  .plagget p{
    margin:10px 0 0; font-size:12.5px; font-weight:300;
    color:var(--muted); line-height:1.5;
  }
  .plagget b{color:var(--fg); font-weight:500}

  /* Trykket settes i militærstensil, som på plagget.
     Stensilen er bredere enn Poppins, så sperringen strammes inn. */
  .trykkflate .kontlinje,
  .trykkflate .trykknavn{
    font-family:'Black Ops One','Poppins',system-ui,sans-serif;
    font-weight:400;
  }
  /* Flex-kolonne: linjene stables under hverandre OG krymper til
     tekstbredden. Med inline-block la de seg ved siden av hverandre. */
  .trykkflate{display:flex; flex-direction:column; align-items:center}
  .trykkflate .kontlinje,
  .trykkflate .trykknavn{letter-spacing:.04em; white-space:nowrap; line-height:1.15}
  .trykkflate .trykknavn{margin-top:.18em}
  .trykkflate .trykknavn.tom{
    font-family:'Poppins',system-ui,sans-serif; font-weight:300;
    letter-spacing:.05em; font-size:16px;
  }

  /* ---- trykket plassert på plagget ----
     Posisjonen settes fra databasen i prosent av bildet, så den kan
     justeres per plagg uten at noe må bygges om. */
  .plaggbilde{position:relative; display:block; line-height:0; max-width:300px; margin:0 auto}
  .plaggbilde img{width:100%; height:auto; display:block}
  .patch{
    position:absolute; transform:translate(-50%, -50%);
    display:flex; flex-direction:column; align-items:center; line-height:1.05;
    pointer-events:none;
  }
  .patch svg{width:46%; height:auto; display:block; margin:0 0 6%}
  .patch .pk, .patch .pn{
    color:#fff; font-family:'Black Ops One','Poppins',sans-serif; font-weight:400;
    letter-spacing:.03em; white-space:nowrap;
  }
  .patch .pn{margin-top:4%}

  /* Velgeren og plaggvisningen side om side i steg 2 */
  .velgerad{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start}
  .velgerad .adder{flex:1 1 300px}
  .velgerad .plagget{flex:1 1 220px; align-self:stretch}

  .trykkflate{overflow:hidden}

  /* ---- tekstsider: vilkår, personvern, forside ---- */
  .tekstside{max-width:620px}
  .tekstside h2{font-size:17px; font-weight:500; margin:34px 0 10px}
  .tekstside h2:first-child{margin-top:0}
  .tekstside p{margin:0 0 14px; font-weight:300; line-height:1.65}
  .tekstside ul{margin:0 0 14px; padding-left:20px; font-weight:300; line-height:1.65}
  .tekstside li{margin:0 0 6px}
  .tekstside b{font-weight:500}
  .tekstside a{color:var(--brand)}
  .tekstside .dempet{color:var(--muted); font-size:13.5px}
  .tekstside .oppdatert{margin-top:34px; padding-top:16px; border-top:1px solid var(--line)}

  table.prisliste{width:100%; border-collapse:collapse; font-size:14.5px; margin:0 0 12px}
  table.prisliste th{
    text-align:left; font-weight:500; font-size:11.5px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted); padding:8px 12px;
    border-bottom:1px solid var(--line);
  }
  table.prisliste td{padding:11px 12px; border-bottom:1px solid var(--line)}
  table.prisliste .tall{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
  table.prisliste .dempet{color:var(--muted); font-weight:300; font-size:13.5px}

  /* ---- bunntekst med firmaopplysningene Vipps krever ---- */
  footer.bunntekst{
    padding:30px 16px 46px; margin-top:34px;
    border-top:1px solid var(--line);
    color:var(--muted); font-size:13px; font-weight:300; line-height:1.7;
  }
  .bunnrad{display:flex; gap:28px; flex-wrap:wrap}
  .bunnrad > div{flex:1 1 180px}
  footer.bunntekst b{color:var(--fg); font-weight:500}
  footer.bunntekst a{color:var(--muted); text-decoration:none;
                     border-bottom:1px solid var(--line)}
  footer.bunntekst a:hover{color:var(--fg); border-bottom-color:var(--brand)}