/* 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}
/* Långa val (t.ex. M440 "Avståndshållare Standard 34–120 mm (ställbar) +1 156 kr") fick sidan att rulla i sidled
   (2026-11-04): får bara brytas när de inte ryms. Rullande rader (.strip) påverkas inte. */
.chips:not(.strip) .chip{max-width:100%}
.chips:not(.strip) .chip>span{max-width:100%;box-sizing:border-box;white-space:normal;flex-wrap:wrap;row-gap:0;padding-block:6px;line-height:1.3}
.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}
/* Färgrutor (kantband) */
.farger{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px 8px;max-width:620px}
.fg{position:relative;cursor:pointer}
.fg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.fg>span{display:flex;flex-direction:column;align-items:center;gap:4px}
.fg i{display:block;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px #0003;transition:box-shadow .14s}
.fg b{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.fg:hover i{box-shadow:inset 0 0 0 1px #0003,0 0 0 2px #fff,0 0 0 3px #b9bec5}
.fg input:checked+span i{box-shadow:inset 0 0 0 1px #0003,0 0 0 2px #fff,0 0 0 4px var(--navy)}
.fg input:checked+span b{color:var(--ink)}
.fg input:focus-visible+span i{outline:3px solid #25355166;outline-offset:5px}
: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 em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted);text-align:center;margin-top:-4px}
.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;left: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}
/* Läs mer under en avkortad text (2026-11-01). Bocken på valt kort står till vänster, förstoringsglaset till höger. */
.mer{align-self:flex-start;border:0;background:none;padding:2px 4px;min-height:28px;font:600 13px Poppins,Arial,sans-serif;color:var(--navy);text-decoration:underline;text-underline-offset:3px;cursor:pointer;position:relative;z-index:1}
.mer:hover{text-decoration-thickness:2px}
.mer:focus-visible{outline:3px solid #25355166;outline-offset:1px;border-radius:4px}
.mer[hidden]{display:none}
.row .mer{padding:0;min-height:24px}
.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 */
#qs .grp,#qs .grp:hover{border:0;border-top:1px solid #ecece8;border-radius:0;background:none;box-shadow:none;transform:none;overflow:visible;transition:none} /* sajt.css .grp = kategorikort */
.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}
/* Spara-raden under steget (alla steg, när det finns ett pris), 2026-11-01 */
.keepbox{margin-top:22px;padding-top:18px;border-top:1px solid #ecece8}
.keepbox .kb-h{margin:0;font-size:14px;font-weight:600;color:var(--navy)}
.keepbox .keep{grid-template-columns:1fr 1fr;margin-top:10px}
/* Mängdrabatt vid Antal */
.mangd{margin:8px 0 0;font-size:13px;color:var(--muted)}
.mangd b{color:var(--navy);font-weight:600}
/* Fönstrets mått i måttsteget */
.fw{margin-top:18px;border:1px solid #ecece8;border-radius:12px;background:#fff}
.fw-top{padding:0 0 22px;border-bottom:1px solid #ecece8}.fw-top .fw{margin-top:0}
.fw summary{cursor:pointer;padding:14px 16px;font-weight:600;font-size:14px;color:var(--navy);list-style:none}
.fw summary::-webkit-details-marker{display:none}
.fw summary:after{content:'+';float:right;font-weight:500}
.fw[open] summary:after{content:'−'}
.fw-in{padding:0 16px 16px}
.fw-in .q-help{margin:0 0 12px}
.fw-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fw-row .num{flex:1 1 120px}
.fw-row .num input{min-width:0}
.fw-row .num input::placeholder{font-size:14px;font-weight:500}
.fw-row .kbtn{padding:0 18px}
.fw-ut{margin:10px 0 0;font-size:14px;color:var(--ink)}
.fw-ut:empty{display:none}
.mg-lank{margin-top:14px}
.mg-lank a{color:var(--navy)}
/* Tygprover under vävarna */
.prov-rad{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 0;font-size:13px;color:var(--muted)}
.prov-rad .prov-b{min-height:40px;padding:0 16px;text-decoration:none}
.prov-rad .lank{border:0;background:none;padding:0;font:inherit;color:var(--navy);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lb-prov{padding:0 16px;margin-right:8px}
.lb-prov[aria-pressed=true]{border-color:var(--navy)}
.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}
/* Priset låg dikt mot prisradens kant (Simon 2026-11-01): luft på sidorna och rundade övre hörn, så att raden blir en
   egen yta. Rundad runt om och svävar en bit ovanför skärmkanten, annars såg den avklippt ut när den inte låg mot
   kanten (Simon 2026-11-02). På mobil går raden kant till kant (media-regeln längre ner). */
.kf .bar{bottom:16px;padding-left:20px;padding-right:12px;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 24px #1f2a3d14}
.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,.kf .bar{margin:24px -16px 0;padding-left:16px;padding-right:16px;gap:10px;bottom:0;border-width:1px 0 0;border-radius:0;box-shadow:none}
  .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}}
/* Val som inte går just nu (2026-11-03, t.ex. motor under 575 mm): grått, streckad ram, ingen inmatning, skälet under */
.card2.off,.row.off,.chip.off{cursor:default}
.card2.off>span,.row.off>span,.chip.off>span{border-style:dashed;border-color:#cfd3d8;background:#fafaf8}
.card2.off b,.row.off b,.chip.off>span,.card2.off em,.row.off em,.chip.off em{color:var(--muted)}
.card2.off img,.row.off img{opacity:.45;filter:grayscale(1)}
.card2.off:hover>span,.row.off:hover>span,.chip.off:hover>span{border-color:#cfd3d8}
.why{display:block;font-size:12px;line-height:1.35;font-weight:500;color:#7a3b12;padding:2px 4px 0}
.row.off .why,.chip.off .why{padding:0}
.row.off .tick{display:none}
.chip.off>span{flex-direction:column;align-items:flex-start;gap:0;padding:8px 14px;white-space:normal;font-weight:600}
/* Kort utan bild: texten mitt i kortet i stället för en tom grå ruta */
.card2.noimg>span{justify-content:center;min-height:120px}
.card2.noimg b{font-size:16px}
/* Vävens färg i ord under numret */
.fab .fcol{display:block;font-size:11px;line-height:1.2;color:var(--muted);text-align:center;margin-top:-3px}
.fab .fcol:empty{display:none}
/* Vald väv i produktbilden: vävprovet, numret och färgen; tryck visar den stort */
.pic-val{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border:0;border-radius:14px;background:#fffffff2;box-shadow:0 4px 16px #0000001f;font:inherit;text-align:left;cursor:pointer;max-width:calc(100% - 24px)}
.pic-val .crop{display:block;width:44px;height:44px;border-radius:10px;overflow:hidden;background:#f1f1ef;flex:none}
.photo .pic-val img{width:100%;height:100%;object-fit:cover;transform:scale(3.4);transform-origin:50% 21%;mix-blend-mode:normal;transition:none}
.pic-val span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.pic-val small{font-size:11px;color:var(--muted);white-space:nowrap}
.pic-val b{font-size:14px;color:var(--navy);white-space:nowrap}
.pic-val:hover{box-shadow:0 4px 18px #00000038}
.pic-val:focus-visible{outline:3px solid #25355166;outline-offset:2px}
/* Väv med tillägg: etikett i hörnet av provet ("+3 %" eller "+500 kr"), så att den syns direkt i rutnätet (2026-11-03) */
.fab .ptag{position:absolute;left:6px;bottom:6px;padding:3px 7px;border-radius:99px;background:var(--navy);color:#fff;font:600 11px/1.2 Poppins,Arial,sans-serif;font-style:normal;white-space:nowrap;box-shadow:0 1px 3px #0000002e;pointer-events:none}
@media(max-width:600px){.fab .ptag{left:4px;bottom:4px;padding:2px 6px;font-size:10px}}
/* Utförandena med pris (Duette & Plissé, 19 st, 2026-11-03): två i bredd (.cards), långa ord avstavas */
.cards.utf b{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.cards.utf .zoom{transform:scale(.8);transform-origin:top right}