/* Stegflödet för produkter med mått och val (konfig.js). BYGGD av tools/gor-konfig-css.py ur f220-ny.css
   (provsidan); ändra där och kör skriptet, eller lägg egna regler sist i skriptet. */
/* Stegen: lika breda delar med ett streck överst */
.tabs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tabs button{width:100%;min-height:44px;display:flex;flex-direction:column;gap:9px;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:600 13px Poppins,Arial,sans-serif;color:var(--muted)}
.tabs button:before{content:"";display:block;height:4px;border-radius:2px;background:#e3e5e8}
.tabs button b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tabs button[aria-current]{color:var(--navy)}
.tabs button[aria-current]:before{background:var(--accent)}
.tabs button.ok{color:var(--navy)}
.tabs button.ok:before{background:var(--navy)}
.tabs button.ok b:before{content:"";display:inline-block;width:9px;height:5px;margin:0 6px 0 1px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(-45deg)}
#sendPart>.q:first-child{border-top:1px solid #ecece8}
.tabs button.bad{color:#b3261e}
.tabs button.bad:before{background:#b3261e}
.tabs button:hover b{color:var(--navy)}
.step{outline:0;padding-top:26px}
.step-head{margin-bottom:4px}
.step-head h2{font-size:26px;letter-spacing:-.04em}

/* En fråga */
.q{padding:22px 0;border-bottom:1px solid #ecece8}
#qs>.q:last-child,.grp>.q:last-child{border-bottom:0}
.q-lab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:28px;margin-bottom:12px}
.q-lab b{font-size:16px;font-weight:600;color:var(--ink)}
.q-lab small{font-size:13px;color:var(--muted)}
.q-lab .cur{margin-left:auto;color:var(--navy);font-weight:600}
.more{position:relative;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--navy);background:#fff;color:var(--navy);font:700 12px/1 Georgia,serif;font-style:italic;cursor:pointer;padding:0}
.more:after{content:"";position:absolute;inset:-11px}
.more[aria-expanded=true]{background:var(--navy);color:#fff}
.q-info{margin:-2px 0 14px;padding:12px 14px;border-radius:12px;background:var(--paper);font-size:14px;line-height:1.5;color:#3f4652}
.q-help{margin:10px 0 0;font-size:13px;color:var(--muted)}
.q-err{margin:10px 0 0;font-size:13px;color:#b3261e;font-weight:600}
.q-err:empty{display:none}
.q.bad .q-lab b{color:#b3261e}
.q-note{padding:16px 0;font-size:14px;color:#3f4652}
.q-note p{margin:4px 0}
.q-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.q-row .q-lab{margin:0}

/* Mått: ett tydligt fält med enhet, och ett reglage under */
/* Mått: ett vanligt fält (som kontaktfälten), enheten direkt efter siffran, och vad som går bredvid */
.numrow{display:flex;align-items:center;gap:14px}
.range-txt{font-size:14px;color:var(--muted)}
.num{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 12px;border:1px solid #b9bec5;border-radius:10px;background:#fff;cursor:text}
.num input{width:4.4ch;border:0;padding:0;font:600 17px/1 Poppins,Arial,sans-serif;color:var(--ink);background:none;font-variant-numeric:tabular-nums}
.num span{font-size:15px}
.num input:focus{outline:0}
.num:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px #25355126}
.num span{font-size:16px;font-weight:500;color:var(--muted)}
.facts2{list-style:none;margin:0 0 16px;padding:14px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-top:1px solid #ecece8;border-bottom:1px solid #ecece8}
.facts2 li{display:flex;flex-direction:column;gap:2px;min-width:0}
.facts2 small{font-size:13px;color:var(--muted)}
.facts2 b{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.cf-head .p-kind:before{display:none}
.pdesc{margin:0 0 26px}
#sendPart .how{margin:16px 0 6px}
.pdesc .pd-root{margin:0!important;max-width:none!important}
.pdesc .pd-spec-value{white-space:normal!important}
#sendPart .after{margin-top:14px}
.num.small{width:auto;height:auto;padding:0;border:0;background:none;cursor:default}
.num.small output{font:700 26px/1.1 Poppins,Arial,sans-serif;color:var(--navy);letter-spacing:-.03em}
.q.bad .num{border-color:#b3261e}
.slide{width:100%;margin:18px 0 6px;accent-color:var(--navy);height:28px;cursor:pointer}
.ends{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}

/* Val */
.chip,.fab,.card2,.row{position:relative;cursor:pointer}
.chip input,.fab input,.card2 input,.row input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chips,.seg{display:flex;flex-wrap:wrap;gap:8px}
.chip>span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid #b9bec5;border-radius:99px;background:#fff;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;transition:border-color .14s,background-color .14s}
.chip>span em{font-style:normal;font-weight:500;color:var(--muted);font-size:13px}
.chip.has-img>span{padding-left:5px}
.chip img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:420px}
.seg .chip>span{width:100%;justify-content:center;border-radius:12px;font-variant-numeric:tabular-nums}
.chip:hover>span{border-color:var(--navy)}
.chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.chip input:checked+span em{color:#ffffffc8}
:is(.chip,.fab,.card2,.row) input:focus-visible+span{outline:3px solid #25355166;outline-offset:2px}

/* Filter ovanför vävarna: liten rubrik, tätt mot listan, ingen linje emellan */
.q-filter{padding:16px 0 4px;border-bottom:0}
.q-filter .q-lab{min-height:0;margin-bottom:8px}
.q-filter .q-lab b{font-size:13px;font-weight:600;color:var(--muted)}
.q-filter+.q{padding-top:14px}
/* Vävgrupper: flikar med namn och antal */
.cat{position:relative;cursor:pointer}
.cat input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cats{display:flex;flex-wrap:wrap;gap:6px}
.cat>span{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:99px;background:#f1f2f4;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background-color .14s}
.cat small{font-size:12px;font-weight:600;color:var(--muted)}
.cat:hover>span{background:#e6e8eb}
.cat input:checked+span{background:var(--navy);color:#fff}
.cat input:checked+span small{color:#ffffffb3}
.cat input:focus-visible+span{outline:3px solid #25355166;outline-offset:2px}
.chips.small .chip>span{min-height:40px;padding:0 14px;font-size:13px}
.chips.small .chip.has-img>span{padding-left:4px}
.chips.small .chip img{width:30px;height:30px}
.find{width:100%;min-height:46px;border:1px solid #b9bec5;border-radius:12px;padding:0 16px 0 42px;margin-bottom:14px;font:500 15px Poppins,Arial,sans-serif;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%235b6370' stroke-width='2'/%3E%3Cpath d='M15.5 15.5L20 20' stroke='%235b6370' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 14px center/18px no-repeat}
.find:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px #25355126}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:14px 10px}
.swatches.scrolly{max-height:440px;overflow:auto;padding:4px 4px 12px;margin:-4px;overscroll-behavior:contain}
.fab>span{display:flex;flex-direction:column;gap:6px}
/* Vävens bild är ett litet markisfoto: visa bara vävens ovansida, inzoomad */
.fab .crop{display:block;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#f1f1ef;box-shadow:0 0 0 1px #00000014}
.fab img{width:100%;height:100%;object-fit:cover;transform:scale(3.4);transform-origin:50% 21%}
.fab b{font-size:13px;font-weight:500;color:var(--ink);line-height:1.2;text-align:center}
.fab input:checked+span .crop{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy)}
.fab input:checked+span b{color:var(--navy);font-weight:700}
.swatches .none{grid-column:1/-1;font-size:14px;color:var(--muted);margin:4px 0}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cards.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card2>span{display:flex;flex-direction:column;gap:3px;height:100%;padding:8px 8px 12px;border:1px solid #d5d8dc;border-radius:16px;background:#fff;transition:border-color .14s}
.card2 img,.card2 i{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:10px;background:#f4f4f2;margin-bottom:8px;mix-blend-mode:multiply}
.card2 b{font-size:15px;font-weight:600;line-height:1.25;color:var(--ink);padding:0 4px}
.card2 em{font-style:normal;font-size:14px;font-weight:600;color:var(--navy);padding:0 4px}
.card2 small{font-size:13px;line-height:1.4;color:var(--muted);padding:2px 4px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card2:hover>span{border-color:var(--navy)}
.card2 input:checked+span{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.card2 input:checked+span:after{content:"";position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 0 0 2px #fff}

.rows{display:grid;gap:8px}
.row>span{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 14px 8px 8px;border:1px solid #d5d8dc;border-radius:14px;background:#fff}
.row img,.row>span>i:first-child{flex:0 0 48px;width:48px;height:48px;border-radius:10px;object-fit:contain;background:#f4f4f2;mix-blend-mode:multiply}
.row>span>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row b{font-size:14px;font-weight:600;line-height:1.3}
.row small{font-size:13px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row em{font-style:normal;font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap}
.row .tick{flex:0 0 24px;height:24px;border-radius:7px;border:1.5px solid #9aa0a8;background:#fff}
.row:hover>span{border-color:var(--navy)}
.row input:checked+span{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.row input:checked+span .tick{background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--navy)}

/* Grupper i ett steg (Bandreglage, Automatik …): en rubrik, inga lådor */
.grp{border-top:1px solid #ecece8;padding:20px 0 0;margin-top:0} /* <section>: sajt.css ger alla section 84 px luft */
.grp>h3{font-size:18px;letter-spacing:-.02em;color:var(--navy)}
.grp>.q:first-of-type{padding-top:14px}
.extra{margin-top:12px;border-top:1px solid #ecece8}
.extra summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:60px}
.extra summary::-webkit-details-marker{display:none}
.extra summary b{font-size:16px;font-weight:600;color:var(--navy)}
.extra summary small{font-size:13px;color:var(--muted)}
.extra summary:after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg) translateY(-3px)}
.extra[open] summary:after{transform:rotate(225deg) translateY(-3px)}

/* Sista steget */
.qty{display:inline-flex;align-items:center;border:1px solid #b9bec5;border-radius:99px;overflow:hidden;flex:0 0 auto}
.qty button{width:46px;height:46px;border:0;background:#fff;font-size:20px;color:var(--navy);cursor:pointer}
.qty input{width:40px;height:46px;border:0;text-align:center;font:700 17px Poppins,Arial,sans-serif;color:var(--navy)}
/* Kontaktfälten: egen klass (.ff), eftersom Shopify-temat ger .field display:flex och en egen ram */
#sendPart .ff{display:block;margin-top:12px;min-width:0}
#sendPart .ff label{display:block;margin-bottom:6px;font-size:13px;color:var(--muted)}
#sendPart .ff :is(input,textarea){display:block;width:100%;min-height:48px;border:1px solid #b9bec5;border-radius:10px;background:#fff;padding:0 14px;font:500 16px Poppins,Arial,sans-serif;color:var(--ink);box-shadow:none;margin:0}
#sendPart .ff textarea{padding:12px 14px;min-height:90px;resize:vertical}
#sendPart .ff :is(input,textarea):focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px #25355126}
#sendPart .ff input[aria-invalid=true]{border-color:#b3261e}
#sendPart .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
#sendPart .two{margin-top:0}
#sendPart .sum{margin-top:22px;background:#fff;padding:20px}
#sendPart .sum h3{font-size:18px;margin-bottom:4px}
#sendPart .how{margin:16px 0 6px}
.check{font-size:14px}
.sum-rows .sg{display:block;padding:14px 0;border-bottom:1px solid #ecece8}
.sg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.sg-h b{font-size:14px;color:var(--navy)}
.sg dl{margin:0;display:grid;gap:6px}
.sg dl>div{display:flex;justify-content:space-between;gap:16px;font-size:14px}
.sg dt{color:var(--muted)}
.sg dd{margin:0;text-align:right;font-weight:500;color:var(--ink)}
.sg dd em{font-style:normal;color:var(--navy);font-weight:600;margin-left:8px;white-space:nowrap}
.sum-rows .sg-p{border-bottom:0;padding-bottom:0}
.sg-p dd{font-variant-numeric:tabular-nums}
/* Spara länk och PDF */
.keep{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.kbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:1px solid #b9bec5;border-radius:99px;background:#fff;color:var(--navy);font:600 14px Poppins,Arial,sans-serif;cursor:pointer}
.kbtn:hover{border-color:var(--navy)}
.kbtn[disabled]{opacity:.6;cursor:default}
.kbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.keep-msg{margin:10px 0 0;font-size:13px;color:var(--muted)}
.linkbox{width:100%;margin-top:6px;min-height:40px;border:1px solid #b9bec5;border-radius:8px;padding:0 10px;font:13px Poppins,Arial,sans-serif}
.saved{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#fbefe6;color:#7a3b12;font-size:14px}
.saved.ok{background:#eef1f6;color:var(--navy);font-weight:600}
.edit{min-height:32px;border:0;background:none;padding:0;font:600 13px Poppins,Arial,sans-serif;color:var(--navy);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Prisraden: alltid synlig längst ner */
.bar{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:14px;margin-top:24px;padding:14px 0 calc(14px + env(safe-area-inset-bottom));background:#fffffff5;border-top:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bar .back{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;border-radius:99px;border:1px solid #b9bec5;background:#fff;color:var(--navy);font:600 14px Poppins,Arial,sans-serif;cursor:pointer}
.bar .back:hover{border-color:var(--navy)}
.bar-p{flex:1;min-width:0;display:flex;flex-direction:column}
.bar-p strong{font-size:24px;line-height:1.1;color:var(--navy);letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-p small{font-size:13px;color:var(--muted);white-space:nowrap}
.bar .next{min-height:52px;padding:0 26px;border-radius:99px;white-space:nowrap}
.bar .next:active,.bar .back:active,.chip:active>span,.card2:active>span{transform:scale(.98)}
.bar .next[disabled]{opacity:.6;cursor:default}
.btn.orange:hover{background:#ffa526}


/* Lång rullista (t.ex. 95 vävar) */
.pick{width:100%;min-height:48px;border:1px solid #b9bec5;border-radius:10px;background:#fff;padding:0 14px;font:500 15px Poppins,Arial,sans-serif;color:var(--ink)}
.pick:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px #25355126}
.q.bad .pick{border-color:#b3261e}
/* Produktsidan: stegflödet i högra spalten, Bra att veta under */
.kf{margin-top:8px}
.kf .tabs{margin-top:4px}
.kf .bar{background:#fafaf8f5}
.bra{padding-top:24px}
.bra .info{margin-top:6px}
/* Fler än fem steg (rullgardinerna har sju): på mobil sveps flikarna i stället för att namnen kapas */
@media(max-width:560px){
  .tabs.many{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(78px,max-content);overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .tabs.many::-webkit-scrollbar{display:none}
  .tabs.many button b{overflow:visible}
}
@media(max-width:560px){
  .tabs{gap:4px}
  .tabs button{font-size:12px;gap:8px}
  .tabs button.ok b:before{display:none}
  .step{padding-top:22px}
  .step-head h2{font-size:23px}
  .swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
  .swatches.scrolly{max-height:360px}
  .fab b{font-size:12px}
  .chips.strip{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
  .chips.strip::-webkit-scrollbar{display:none}
  .chips.strip .chip{flex:none}
  /* Mobil: flikarna på en rad som går att svepa */
  .cats{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:none}
  .cards.n3 b{font-size:14px}
  .cards.n3>label>span{padding:6px 6px 10px}
  .cards.n3 input:checked+span:after{top:10px;right:10px}
  .bar{margin:24px -16px 0;padding-left:16px;padding-right:16px;gap:10px}
  .bar .back{width:48px;padding:0;justify-content:center;font-size:18px}
  .bar .back .t{display:none}
  .bar .next{padding:0 20px;font-size:15px}
  .bar-p strong{font-size:21px}
  #sendPart .sum{padding:16px}
}
@media(prefers-reduced-motion:reduce){.bar .next:active,.bar .back:active,.chip:active>span,.card2:active>span{transform:none}}