/* Kundläget. Mobil först: på telefon ligger bilden överst och knapparna längst ned. */

body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.btn-lg{padding:13px 22px;font-size:16px;border-radius:10px}

/* Översta raden */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;max-width:1280px;margin:0 auto}
.brandrow{display:flex;align-items:center;gap:10px}
.brand{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:14px;color:var(--acc)}
.sep{width:1px;height:22px;background:var(--line)}
.toplogo{width:130px}
.foot{padding-bottom:110px}
@media(min-width:900px){.toplogo{width:170px}.foot{padding-bottom:28px}}
.prod{font-weight:600;font-size:14px}

.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700;color:var(--acc);margin:0 0 8px}
.lead{color:var(--mut);margin:6px 0 16px;font-size:15.5px}
.callout{background:var(--acc-soft);color:var(--ink);border-radius:var(--r-sm);padding:12px 14px;font-size:14.5px;margin:12px 0}
.callout.small{font-size:13.5px;padding:10px 12px}
.field{margin-top:16px}
.field>label{margin-top:0}

/* ===== Start ===== */
.intro{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:8px 16px 40px;max-width:1280px;margin:0 auto}
.hero h1{font-size:30px;line-height:1.15;letter-spacing:-.02em}
.howto{list-style:none;counter-reset:s;padding:0;margin:18px 0;display:grid;gap:8px}
.howto li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;column-gap:10px;align-items:center}
.howto li::before{content:counter(s);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:13px}
.howto b{font-size:15px}
.howto span{font-size:13px;color:var(--mut)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}
.hero-side .fig{padding:18px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.facts>div>b{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.facts ul{margin:6px 0 0;padding-left:18px;font-size:14px}
.facts li{margin:3px 0}
.facts.small ul{font-size:13px}

/* ===== Designern ===== */
.wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:0 0 96px;max-width:1280px;margin:0 auto}
.preview{position:sticky;top:0;z-index:4;background:var(--bg);padding:6px 16px 8px;border-bottom:1px solid var(--line)}
.pv-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.pv-bar .seg button{padding:5px 12px}
.fig.pv{display:block;width:100%;border:0;cursor:zoom-in;padding:6px}
.fig.pv svg{max-height:34vh;margin:0 auto}
.pv-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.pool{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut)}
.pool i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.18);display:inline-block}
.pool i.free{background:transparent;border:1.5px dashed var(--mut)}
.pricetag{font-weight:600;font-size:14px}

.panel{margin:0 16px;padding:18px 16px}
.panel h2{font-size:22px;letter-spacing:-.015em}
.panel h3{font-size:16px;margin:22px 0 4px}

/* Stegindikator */
.stepper{display:flex;gap:4px;overflow-x:auto;margin:-4px -4px 14px;padding:4px;scrollbar-width:none}
.stepper::-webkit-scrollbar{display:none}
.stepper button{flex:none;border:0;background:transparent;color:var(--mut);font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:999px;display:flex;align-items:center;gap:6px}
.stepper button i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--line);color:var(--ink)}
.stepper button.done i{background:var(--acc);color:var(--acc-ink)}
.stepper button[aria-current="step"]{background:var(--acc-soft);color:var(--ink)}
.stepper button[aria-current="step"] i{background:var(--acc);color:var(--acc-ink)}
.stepper button:disabled{cursor:default;opacity:.6}

/* Stickteknik: stora kort med bild */
.techlist{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.techlist button{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);padding:0;overflow:hidden}
.techlist button[aria-pressed="true"]{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.techlist img{width:100%;aspect-ratio:495/597;object-fit:cover;display:block;background:var(--stage)}
.techlist .t{padding:8px 9px 10px;display:flex;flex-direction:column;gap:2px}
.techlist b{font-size:16px;display:flex;flex-direction:column;align-items:flex-start;position:relative;padding-right:22px}
.techlist b::after{content:"";position:absolute;right:0;top:2px;width:16px;height:16px;border-radius:50%;border:2px solid var(--line)}
.techlist button[aria-pressed="true"] b::after{border-color:var(--acc);background:radial-gradient(circle,var(--acc) 0 45%,transparent 50%)}
.techlist span{font-size:12.5px;color:var(--mut);line-height:1.35;margin-top:4px}
.techlist b small{font-size:12px;font-weight:500;color:var(--mut);line-height:1.3}
@media(max-width:520px){.techlist span{display:none}.techlist b{font-size:14.5px}}
.techlist button{position:relative}
.zoomhint{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;font-size:16px;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:zoom-in}
.zoomall{margin:-6px 0 8px;padding-left:0;color:var(--acc)}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;max-height:100%}
.lb-fig img{max-height:calc(100vh - 170px);max-width:100%;object-fit:contain;background:transparent}
.lb-fig figcaption{color:#ddd;font-size:14px;text-align:center;max-width:560px}

/* Färgrutor lite större på kundsidan */
.chips{gap:10px}
.chips button{width:38px;height:38px}

.seg.wide{display:flex}
.seg.wide button{flex:1;padding:9px 10px}
.cuffseg button{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.cuffseg button small{font-size:11px;font-weight:500;opacity:.75}

.fonts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fonts button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:10px 8px;font-size:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fonts button[aria-pressed="true"]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}

.free{font-size:13.5px;color:var(--mut);margin:12px 0 0}
.free.box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;color:var(--ink)}

/* Exempelbild på märkningen */
.markex{margin:14px 0 0;display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:8px}
.markimg{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;cursor:zoom-in;background:var(--stage)}
.markimg img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 55%;display:block}
.markex figcaption{font-size:13px;color:var(--mut);padding:0 4px 4px}
.markex figcaption b{display:block;color:var(--ink);font-size:14px}

/* Uppladdning */
.drop{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;border:1.5px dashed var(--line);border-radius:var(--r);padding:18px;margin-top:14px;cursor:pointer;background:var(--surface-2);color:var(--ink)}
.drop:hover{border-color:var(--acc)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop b{font-size:15px;color:var(--acc)}
.drop span{font-size:12.5px;color:var(--mut)}
input[type=range]{padding:0;border:0;accent-color:var(--acc);background:transparent}

/* Pris */
.summary{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.summary dt{color:var(--mut)}
.summary dd{margin:0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.summary i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.18);display:inline-block}
.qty{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qty input{width:110px}
.qty .seg button{padding:5px 10px}
.price{margin-top:14px;padding:14px;border-radius:var(--r-sm);background:var(--acc-soft)}
.price .big{font-size:26px;font-weight:800;letter-spacing:-.02em}
.price .mut{display:block}
.eta{margin:10px 0 0;font-size:14px}
.eta b{color:var(--acc)}
.tiers{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
.tiers th,.tiers td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.tiers th{color:var(--mut);font-weight:600}
.tiers tr.on td{font-weight:700;color:var(--acc)}

/* Navigering: fast längst ned på telefon */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-between;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.nav .btn{flex:1;padding:12px}
.nav .btn-primary{flex:2}

/* ===== Resultat ===== */
.result{padding:0 16px 40px;max-width:900px;margin:0 auto}
.resultcard{padding:22px 18px;text-align:center}
.resultcard h1{font-size:28px;letter-spacing:-.02em}
.rimg{display:block;width:100%;border:0;padding:0;background:var(--stage);border-radius:var(--r);overflow:hidden;cursor:zoom-in}
.rimg img{width:100%;display:block}
.disclaimer{font-size:13px;color:var(--warn);background:var(--warn-bg);border-radius:var(--r-sm);padding:8px 12px;margin:10px 0}
.rprice{font-size:15px;margin:8px 0 16px}
.ractions{display:flex;flex-direction:column;gap:8px;align-items:stretch;max-width:380px;margin:0 auto}
.rdone{margin-top:12px;padding:16px;border-radius:var(--r);background:var(--acc-soft)}
.rdone h2{font-size:20px;margin-bottom:6px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.share{margin:18px auto 0;max-width:520px;text-align:left;font-size:13.5px;color:var(--mut)}
.sharerow{display:flex;gap:8px;margin-top:6px}
.sharerow input{font-size:13px}
#rStatus{min-height:1.2em}
#rStatus.busy::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid var(--acc);border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Förstoring ===== */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(15,15,17,.92);display:flex;flex-direction:column;color:#fff}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px calc(10px);flex-wrap:wrap}
.lb-bar .seg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.lb-bar .seg button{color:#ccc}
.lb-bar .seg button[aria-pressed="true"]{background:#fff;color:#111}
.lb-tools{display:flex;gap:6px}
.lb-tools .btn{min-width:42px}
.lb-stage{flex:1;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center;cursor:grab}
.lb-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:0 0;padding:12px}
.lb-inner svg,.lb-inner img{max-width:100%;max-height:100%;background:#e7e5e0;border-radius:12px}
.lb-hint{text-align:center;font-size:12px;color:#aaa;margin:6px 0 calc(10px + env(safe-area-inset-bottom))}

/* ===== Större skärmar ===== */
@media(min-width:900px){
  .top{padding:18px 28px}
  .intro{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;padding:20px 28px 60px;align-items:center}
  .hero h1{font-size:42px}
  .wrap{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;padding:0 28px 40px;align-items:start}
  .preview{top:16px;border:0;padding:0;background:transparent}
  .fig.pv{padding:18px}
  .fig.pv svg{max-height:62vh}
  .panel{margin:0;padding:24px}
  .nav{position:static;padding:16px 0 0;margin-top:22px;background:none;backdrop-filter:none;border-top:1px solid var(--line)}
  .nav .btn{flex:none;padding:10px 18px}
  .resultcard{padding:32px}
  .ractions{flex-direction:row;justify-content:center;max-width:none}
}