/* ============================================================
   NO-designtillägg enligt implementationsguide 2026-09-13
   Avsnitt 1–2 + 12.2: tokens, typografi, sektionsrubriker,
   knappar, bildrundning, labels, header, drawer.
   Läses efter style.css och skriver över basen – inga texter.
   ============================================================ */
@font-face{font-family:"Cormorant";src:url("/assets/fonts/cormorant.woff2") format("woff2");font-display:swap;font-weight:300 700}

:root{
  --ink:#1c1c1c;--text:#333;--muted:#6b6b6b;--line:#d9d4cf;--line-dark:#1c1c1c;
  --beige:#ede9e6;--beige-2:#e7e0da;--sand:#f5f2ef;--off:#f8f8f8;--white:#fff;
  --color-accent-brown:#4b3b34;--brown:var(--color-accent-brown);
  --accent:#cc3366;--green:#476f44;--sale:#c22323;
  --page:1320px;--gut:clamp(16px,3vw,40px);--sect:clamp(40px,6vw,88px);
  --r-pill:999px;--r-s:6px;
  --product-image-radius:14px;--product-image-radius-sm:8px;
  --section-rule-width:1px;--section-rule-color:#1c1c1c;--section-rule-len:60%;
  --section-gap:26px;--section-sub-gap:12px;--section-before:26px;--section-after:26px;
  --font-sans:"Assistant","Helvetica Neue",Arial,sans-serif;
  --font-display:"Cormorant",Georgia,"Times New Roman",serif; /* Rubriker och sidtitlar (som SE) – Assistant används för priser, produktnamn och brödtext */
  --sans:var(--font-sans);--f:var(--font-sans);
  --sh:0 14px 40px -24px rgba(0,0,0,.28);
  --blue:#1c1c1c;--indigo:#1c1c1c;--navy:#1c1c1c;--softlilac:#f5f2ef;--border:rgba(0,0,0,.12);--r-l:14px;--r-m:10px;
}
@media(max-width:640px){:root{--product-image-radius:10px;--product-image-radius-sm:6px;--section-rule-len:55%;--section-gap:24px;--section-before:20px;--section-after:20px}}

/* ---------- Typografi (1.2) ---------- */
body{font-family:var(--font-sans);color:var(--text)}
/* Rubriker/titlar på undersidor: display-fonten (Cormorant) */
h1,h2,h3.sec-h,.sec-head h1,.sec-head h2,.sec-head h3,.pg-info h1,.fdh-hero-tx h1{font-family:var(--font-display);font-weight:300}
/* Produktnamn, priser, knappar, navigation och brödtext: Assistant */
.btn,button,input,select,textarea,.pc-name,.pc-type,.foot-col h3,.drawer-head h2,.sg-head h2,.pg-acc summary,.disc-card b{font-family:var(--font-sans)}
.price,.pc-price,.gc-price,.drawer-total{font-family:var(--font-sans)}
/* ---------- Storleks-/variantcirklar i produktkort (startsida, inspirasjon m.fl.) ---------- */
.szc-sizes{display:flex;gap:8px;justify-content:center;margin:10px 0 4px;flex-wrap:wrap}
.szc-s{width:34px;height:34px;border-radius:50%;border:1px solid var(--ink);background:#fff;color:var(--ink);font:600 11px var(--font-sans);cursor:pointer;padding:0}
.szc-s.on{background:var(--ink);color:#fff}
.szc-s.is-out{border-style:dashed;color:var(--muted);border-color:#cfc9c2}
.szc-s.is-out.on{background:var(--muted);border-color:var(--muted);color:#fff}
.szc-s:disabled{opacity:.3;cursor:default}
.szc-t{width:34px;height:34px;border:0;background:none;cursor:pointer;padding:0;position:relative}
.szc-t img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid transparent;outline:1px solid rgba(0,0,0,.18)}
.szc-t.on img{border-color:var(--ink);outline:0}
.szc-t.is-out img{opacity:.5}
.szc-t span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.szc-t:disabled{opacity:.35;cursor:default}
.szc .btn{margin-top:6px}
.szc .btn[disabled]{background:#fff;color:var(--muted);border:1px solid #cfc9c2;cursor:default}
.price .sale,b.sale{color:var(--sale)}

/* Kalibrering (1.2): dra ned knappar, kortnamn, priser, etiketter */
.btn{font-size:13px}
.btn-sm{font-size:12px}
.pc-name{font-size:14px}
.pc-price{font-size:14px}

/* ---------- Sektionsrubrik (1.3): linje → rubrik → (sub) → linje ---------- */
.sec-head{display:grid;justify-items:center;margin-bottom:var(--section-gap)}
.sec-head .sec-line{display:block;height:0;width:var(--section-rule-len);border-top:var(--section-rule-width) solid var(--section-rule-color);background:none;opacity:1;transform:none;box-shadow:none;border-radius:0;padding:0}
.sec-head .sec-line-a{justify-self:start;margin-bottom:var(--section-before)}
.sec-head .sec-line-b{justify-self:end;margin-top:var(--section-after)}
.sec-head h1,.sec-head h2{margin:0;text-align:center}
.sec-head .sec-sub{margin:var(--section-sub-gap) 0 0;order:4}

/* ---------- Knappar (1.7) ---------- */
.btn{border-radius:var(--r-pill);letter-spacing:.05em}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{border:1px solid var(--ink);background:transparent;color:var(--ink)}
.pc .btn,.gc-item .btn,.btn-cta{text-transform:uppercase;font-weight:600}

/* ---------- Produktbildsrundning via tokens (1.4) ---------- */
.pc-img,.gc-thumb,.pg-main,.size-card img,.search-suggest img,.disc-card img,.cat-banner img{border-radius:var(--product-image-radius);overflow:hidden}
.pc-img{position:relative;display:block}
.pc-img img{border-radius:inherit}
.pg-thumb,.drawer-items img,.pg-bundle img{border-radius:var(--product-image-radius-sm);overflow:hidden}

/* ---------- Label (1.6) + slutsålt-overlay (1.5) ---------- */
.pc-badge{position:absolute;left:0;top:var(--product-image-radius);bottom:auto;right:auto;background:var(--beige);color:var(--ink);font:600 12px var(--font-sans);text-transform:uppercase;letter-spacing:.06em;padding:9px 14px;border-radius:0 6px 6px 0;max-width:82%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;z-index:2}
.pc-badge.pc-out{background:#fff}
@media(max-width:640px){.pc-badge{font-size:11px;padding:7px 11px}}
.pc-img.is-out::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.45);border-radius:inherit;pointer-events:none;z-index:1}
.pc-img.is-out img{opacity:1}

/* ---------- Header (2.1–2.2) ---------- */
.site-head{background:#fcfcfc}
.head-in{display:grid;grid-template-columns:1fr auto auto;align-items:center;min-height:62px;padding:8px 2%;max-width:1600px;margin:0 auto;gap:0}
.head-nav{display:flex;gap:40px;max-width:860px}
.head-nav>a,.head-nav .nav-dd>a{font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.site-head .logo{position:static;transform:none;margin:0 18px 0 auto;justify-self:end}
.site-head .logo img{width:112px;height:auto}
.head-tools{display:flex;gap:18px;align-items:center}
.head-tools .icon-btn{width:34px;height:34px;display:grid;place-items:center}
@media(min-width:861px){.site-head .menu-btn{display:none}}
@media(max-width:860px){
  .head-in{grid-template-columns:1fr auto 1fr;padding:0 22px}
  .head-nav{display:none}
  .site-head .menu-btn{justify-self:start}
  .site-head .logo{justify-self:center;margin:0}
  .site-head .logo img{width:120px}
  .head-tools{justify-self:end}
}

/* ---------- Størrelsesguide-dialog: centrerad, kompakt ---------- */
dialog.sg-dialog{position:fixed;inset:0;margin:auto;width:min(680px,92vw);height:fit-content;max-height:min(84vh,720px);overflow:auto;border:0;border-radius:14px;padding:24px 28px 28px;box-shadow:0 30px 80px -30px rgba(0,0,0,.45);transform:none;z-index:1000}
dialog.sg-dialog:not([open]){display:none}
dialog.sg-dialog::backdrop{background:rgba(20,16,12,.45)}
dialog.sg-dialog .sg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
dialog.sg-dialog .sg-head h2{margin:0;font-size:20px;letter-spacing:.1em;text-transform:uppercase}
dialog.sg-dialog .sg-intro{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0 0 14px;max-width:none}
dialog.sg-dialog .sg-table{width:100%;min-width:0;border-collapse:collapse;font-size:15px}
dialog.sg-dialog .sg-table th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:6px 8px;border-bottom:1px solid var(--ink)}
dialog.sg-dialog .sg-table td{padding:10px 8px;border-bottom:1px solid #e7e2dc;vertical-align:middle;overflow-wrap:break-word}
dialog.sg-dialog{overflow-x:hidden}
dialog.sg-dialog .sg-table{table-layout:fixed;width:100%}
dialog.sg-dialog .sg-table th:nth-child(1),dialog.sg-dialog .sg-table td:nth-child(1){width:29%}
dialog.sg-dialog .sg-table th:nth-child(2),dialog.sg-dialog .sg-table td:nth-child(2){width:16%}
dialog.sg-dialog p{max-width:none}
dialog.sg-dialog .sg-note{margin-top:14px;font-size:14px;color:var(--muted)}
.sg-trow{display:flex;align-items:center;gap:8px}
.sg-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:0 0 40px}
@media(max-width:640px){.sg-thumb{width:32px;height:32px;flex-basis:32px}}
@media(max-width:640px){dialog.sg-dialog{width:94vw;padding:18px 14px 20px;max-height:88vh}dialog.sg-dialog .sg-table{font-size:13px;min-width:0}dialog.sg-dialog .sg-intro{font-size:14px}dialog.sg-dialog .sg-table th,dialog.sg-dialog .sg-table td{padding-left:4px;padding-right:6px}}

/* ---------- Trust-rad med ikoner ---------- */
.trust-row .tr-ic{display:block;margin:0 auto 8px;color:var(--brown);opacity:.85}

/* ---------- Kassan: Assistant genomgående (bra siffror) + clean form ---------- */
.ko,.ko *{font-family:var(--font-sans)}
.ko h1,.ko h2,.ko h3,.ko legend{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:14px;color:var(--ink)}
.ko input[type=text],.ko input[type=email],.ko input[type=tel],.ko input[type=number],.ko select,.ko textarea{border:1px solid #d8d2ca;border-radius:10px;padding:12px 14px;font-size:15px;background:#fff;width:100%;box-sizing:border-box}
.ko input:focus,.ko select:focus,.ko textarea:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
.ko label{font-size:13px;color:var(--muted)}
.ko .btn,.ko button[type=submit]{border-radius:999px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;min-height:50px}
.ko-row img{border-radius:8px}
.ko,.ko .price,.ko b,.ko strong,.ko td{font-variant-numeric:tabular-nums}
.ko .drawer-disc,.ko .ko-disc{color:var(--ink);font-size:13.5px}
.ko-chev{font-size:11px;margin-left:4px;display:inline-block}
.ko-trust{list-style:none;padding:14px 0 0;margin:12px 0 0;border-top:1px solid #e7e2dc;font-size:13px;color:var(--muted);display:grid;gap:6px}
.ko-trust li::before{content:"✓ ";color:var(--ink)}

/* ---------- Meny: flyout-undernivå med pil åt höger ---------- */
.nav-sub{position:relative}
.nav-sub>a{display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap}
.nav-sub-panel{display:none;position:absolute;left:100%;top:-8px;background:#fff;border:1px solid #eee;border-radius:10px;box-shadow:0 18px 40px -22px rgba(0,0,0,.3);padding:8px;min-width:190px;z-index:5}
.nav-sub:hover>.nav-sub-panel,.nav-sub:focus-within>.nav-sub-panel{display:block}
.nav-sub-panel a{display:block;padding:8px 10px;white-space:nowrap}
/* Mobilmeny: samma nivåtrappa som SE – nivå 2 i gemener, nivå 3 indragen med linje */
.mnav-sub .mnav-group2>summary{text-transform:none;letter-spacing:.02em;font-size:16px;padding:9px 0;border-bottom:0}
.mnav-sub .mnav-group2{border-bottom:1px solid var(--sand)}
.mnav-sub2{padding:2px 0 8px 14px;border-left:1px solid var(--line);margin-left:2px}
.mnav-sub2 a{font-size:15px;padding:8px 0}
/* Nästlade grupper: +/- styrs av gruppens EGEN öppen-status (inte förälderns) */
.mnav-nested>summary .mnav-plus{position:relative;width:14px;height:14px;display:inline-block;flex:0 0 auto}
.mnav-nested>summary .mnav-plus::before,.mnav-nested>summary .mnav-plus::after{content:"";position:absolute;background:currentColor;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .2s;display:block}
.mnav-nested>summary .mnav-plus::before{width:11px;height:1.5px}
.mnav-nested>summary .mnav-plus::after{width:1.5px;height:11px}
.mnav-nested[open]>summary .mnav-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.mnav-group[open] .mnav-nested:not([open])>summary .mnav-plus::after{display:block}

/* ---------- Erbjudandestrip + drawer (12.2) ---------- */
.offer-strip{background:var(--beige);text-align:center;font-family:var(--font-sans)}
.offer-strip a{display:block;padding:10px 16px;text-decoration:none;color:inherit}
.offer-strip b{letter-spacing:.06em}
.offer-strip span{display:block;font-size:13px;opacity:.75;margin-top:2px}
.drawer-4for3{margin:10px 0 0;padding:9px 12px;background:var(--sand);border-radius:8px;font-size:12.5px;text-align:center;line-height:1.4}
.drawer-items img{border-radius:8px}
.drawer-discounts>*{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:3px 0;color:var(--ink)}
.drawer-total{display:flex;justify-content:space-between;font-size:15px;font-weight:600;margin-top:8px}
.drawer-save{display:flex;justify-content:space-between;font-size:13px;color:var(--sale)}
.drawer-trust{text-align:center;font-size:12px;color:var(--muted);margin-top:10px}
/* ---------- Kundeomtaler på produktsidan (som leonieitems.com) ---------- */
.pgr-head{font-family:var(--font-display);font-size:clamp(19px,1.8vw,24px);font-weight:300;margin:0 0 18px;color:var(--ink)}
.pgr-head span{font-family:var(--font-sans);font-size:14px;color:var(--muted)}
.pgr-list{display:block}
.pgr{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.pgr:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.pgr .stars{display:inline-flex;margin:0 0 10px}
.pgr-body{font-size:16px;line-height:1.6;margin:0 0 12px;color:var(--ink)}
.pgr-by{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin:0 0 2px;color:var(--ink)}
.pgr-variant{font-size:13.5px;color:var(--muted);margin:0}
.pgr-more{margin:18px 0 6px}
@media(max-width:640px){.pgr-body{font-size:15px}}

/* 4 for 3: den gratis enheten – originalpriset överstruket, beloppet i grönt */
.ci-free,.ko-free{color:var(--green);font-weight:600}
.ci-label s,.ci-line s,.ko-row s{color:var(--muted);text-decoration-thickness:.5px;margin-right:6px;font-weight:400}
.ko-free-note,.ci-gift{color:var(--green)}
.ko-row .ko-free-note{font-size:12px}
/* Rabatterad rad: ordinariepriset diskret överstruket på egen rad, nya priset under */
.ko-summary .ko-row>span{text-align:right;line-height:1.35}
.ko-row s,.ko-total s{display:block;margin-right:0;font-size:12.5px;font-weight:400;color:var(--muted);text-decoration-thickness:.5px}
.ko-now{display:block;font-weight:700}
.ko-total s{font-size:13px}
.ko-total b{display:block;font-weight:800}
.ci-now{font-weight:700}
.ci-line s,.ci-label s{display:block;margin-right:0;font-size:12px}
.ship-meter-text{font-size:12.5px;margin:0 0 5px}
.ship-meter-bar{height:4px;border-radius:999px;background:#eee5dd;overflow:hidden}
.ship-meter-bar span{display:block;height:100%;background:var(--ink);border-radius:999px;transition:width .35s ease}
.drawer .ship-meter-bar{background:#e8e2da !important;background-image:none !important}
.drawer .ship-meter-bar span{background:var(--ink) !important;background-image:none !important}
.drawer .ship-meter.meter-done .ship-meter-bar{display:none}
.drawer .ship-meter.meter-done .ship-meter-text{color:var(--ink)}
.drawer .ship-meter.meter-done .ship-meter-text::before{content:"✓ ";font-weight:600}
.f43-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.f43-rings{display:inline-flex;gap:6px}
.f43-ring{width:22px;height:22px;border:1px solid #b7b0a6;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;line-height:1;color:var(--ink);font-style:normal}
.f43-ring.on::before{content:"✓"}
.four3-meter{margin-bottom:10px}
.ci-trash{color:var(--muted);background:none;border:0;cursor:pointer;padding:4px;display:inline-flex;text-decoration:none}
.ci-trash:hover{color:var(--ink)}
.drawer-meters{margin-top:12px}
.save-line{color:var(--ink);font-weight:500}
.drawer-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
@media(max-width:640px){.drawer-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}

/* ---------- PDP (8.2–8.3) ---------- */
/* Hela köpkolumnen vänsterställd (som SE): produktnamn, stjärnor, pris och allt därunder i samma vänsterkant */
.pg-info{text-align:left;justify-items:stretch;gap:12px}
.pg-info>*{justify-self:stretch}
.pg-info h1{text-align:left;font-family:var(--font-display);font-size:clamp(24px,2.4vw,32px)}
.pg-sub{text-align:left;margin-top:-4px}
.pg-rating{justify-content:flex-start;align-self:start}
.pg-price,.pg-info .price{text-align:left}
.pg-info .pg-h,.pg-sel .pg-h{text-align:left}
.pg-sel,.pg-buybox,.pg-why,.pg-acc,.pg-bundle{margin-left:0;margin-right:0;text-align:left}
.pg-trust{justify-content:flex-start;text-align:left}
.pg-low,.pg-out,.pg-freeship{text-align:left}
/* B2C: ingen antalsväljare – KJØP NÅ tar hela bredden. Inputen ligger kvar dold så JS läser antal = 1. */
.pg-buy .qty{display:none}
.pg-buy [data-atc]{width:100%}
.size-opt{border-radius:var(--r-pill);font-family:var(--font-sans)}
.size-opt b{text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.size-opt.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.size-opt:not(.on):hover{background:var(--sand);border-color:var(--ink)}
.size-opt.is-out{border:1px solid #cfc9c2;opacity:.45}
.pg-sel{gap:12px}
@media(max-width:767px){
  .size-row{display:flex;flex-wrap:nowrap;gap:6px}
  .size-row .size-opt{flex:1;min-height:46px;padding:4px 2px}
  .size-row .size-opt b{font-size:11px}
  .size-row .size-opt small{font-size:10.5px}
}
.stickybar{--sticky-safe:max(env(safe-area-inset-bottom),20px);padding-bottom:calc(24px + var(--sticky-safe))}

/* ---------- PDP: dragspel + Oppdag mer + kategorikort ---------- */
.pg-acc{border-top:1px solid #e3ddd6;margin-top:28px}
.pg-acc-i{border-bottom:1px solid #e3ddd6}
.pg-acc-i summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 0;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.pg-acc-i summary::-webkit-details-marker{display:none}
.pg-acc-i summary::after{content:"+";font-size:20px;font-weight:300;line-height:1}
.pg-acc-i[open] summary::after{content:"–"}
.pg-acc-b{padding:0 0 20px}
.pg-details{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14.5px}
.pg-details b{font-weight:600}
.disc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1040px;margin:0 auto}
.disc-card{display:block;text-decoration:none;color:inherit;text-align:center}
.disc-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;margin-bottom:10px;border-radius:var(--product-image-radius)}
.disc-card b{font-family:var(--font-sans);font-weight:400;display:block;letter-spacing:.1em;text-transform:uppercase;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-card span{display:inline-block;margin-top:4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.disc-sec{margin-top:34px}
@media(max-width:767px){.disc-grid{grid-template-columns:1fr 1fr;gap:12px}.disc-card b{font-size:12.5px;letter-spacing:.06em}.disc-card span{font-size:10px}}

/* ---------- PDP: färgcirklar med matt/glans + fullbredds köpknappar ---------- */
.color-row{display:flex;flex-wrap:wrap;gap:8px}
.color-opt{width:30px;height:30px;border-radius:50%;overflow:hidden;position:relative;border:2px solid transparent;outline:1px solid rgba(0,0,0,.18);flex:0 0 30px;padding:0;display:block}
.color-opt img{width:100%;height:100%;object-fit:cover;transform:scale(2.6);border-radius:0;display:block}
.color-opt span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.color-opt.on{border-color:var(--ink);outline:0}
/* Färgplutt ritad med färgkod i stället för produktbild – matt = platt, blank = med glansdager */
.color-opt.is-sw{background:#fff;display:grid;place-items:center}
.color-opt.is-sw .sw-dot{position:static;width:100%;height:100%;clip:auto;overflow:visible;border-radius:50%;display:block;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.color-opt.is-sw.is-gloss .sw-dot{background:
  radial-gradient(circle at 33% 27%, rgba(255,255,255,.92) 0 9%, rgba(255,255,255,.34) 24%, rgba(255,255,255,0) 52%),
  linear-gradient(145deg, rgba(255,255,255,.22), rgba(0,0,0,.16)),
  var(--sw)}
/* Tvåfärgad plutt för mönstrade produkter (Signature collection, La Rosette) */
.color-opt.is-sw.is-duo .sw-dot{background:linear-gradient(135deg,var(--sw) 0 50%,var(--sw2,var(--sw)) 50% 100%)}
/* Mönstrade pluttar: sköldpaddsmönster (blobs) och små prickar (dots) */
.color-opt.is-sw.is-blobs .sw-dot{background:
  radial-gradient(circle at 26% 22%, var(--sw2) 0 13%, transparent 14%),
  radial-gradient(circle at 58% 16%, var(--sw2) 0 10%, transparent 11%),
  radial-gradient(circle at 80% 34%, var(--sw2) 0 12%, transparent 13%),
  radial-gradient(circle at 42% 44%, var(--sw2) 0 14%, transparent 15%),
  radial-gradient(circle at 70% 62%, var(--sw2) 0 11%, transparent 12%),
  radial-gradient(circle at 20% 58%, var(--sw2) 0 12%, transparent 13%),
  radial-gradient(circle at 46% 80%, var(--sw2) 0 10%, transparent 11%),
  radial-gradient(circle at 80% 80%, var(--sw2) 0 8%, transparent 9%),
  var(--sw)}
.color-opt.is-sw.is-dots .sw-dot{background:
  radial-gradient(circle at 32% 30%, var(--sw2) 0 11%, transparent 12%),
  radial-gradient(circle at 66% 28%, var(--sw2) 0 9%, transparent 10%),
  radial-gradient(circle at 48% 58%, var(--sw2) 0 10%, transparent 11%),
  radial-gradient(circle at 74% 66%, var(--sw2) 0 8%, transparent 9%),
  radial-gradient(circle at 24% 68%, var(--sw2) 0 8%, transparent 9%),
  var(--sw)}
.color-opt.is-sw.is-duo.is-gloss .sw-dot{background:
  radial-gradient(circle at 33% 27%, rgba(255,255,255,.85) 0 8%, rgba(255,255,255,.28) 22%, rgba(255,255,255,0) 50%),
  linear-gradient(135deg,var(--sw) 0 50%,var(--sw2,var(--sw)) 50% 100%)}
.color-opt.is-sw:hover{outline-color:rgba(0,0,0,.45)}
@media(max-width:640px){.color-row{gap:7px}.color-opt{width:28px;height:28px;flex:0 0 28px}}
.color-opt.is-sw.is-out{opacity:.5}
.color-opt.is-sw.is-out::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:#000;transform:rotate(45deg);z-index:1}
.sw-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.color-opt:not(.on):hover{outline-color:var(--ink)}
.color-opt.is-gloss::after{content:"";position:absolute;top:13%;left:15%;width:36%;height:27%;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.08));border-radius:50%;filter:blur(1px);pointer-events:none;z-index:1}
.color-opt.is-out::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 46%,rgba(110,110,110,.85) 48%,rgba(110,110,110,.85) 52%,transparent 54%);z-index:2}
.pg-buy{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:stretch}
.pg-buy [data-atc]{flex:1 1 46%;min-height:50px;width:auto}
.pg-buy [class*="vipps"],.pg-buy [data-vipps]{flex:1 1 46%;min-height:50px;width:auto;max-height:50px;display:flex;align-items:center;justify-content:center;padding:0 14px;box-sizing:border-box;overflow:hidden}
.pg-buy [class*="vipps"] img,.pg-buy [data-vipps] img,.pg-buy [class*="vipps"] svg{height:22px !important;width:auto !important;max-width:140px}
.pg-sel-cur{font-size:13px;color:var(--muted)}
.pg-h-colors{text-transform:none;letter-spacing:.02em;font-size:14px;font-weight:400}
.pg-low{color:var(--sale);font-weight:500}
.pg-why{margin-top:18px}
.pg-why [data-excerpt] h1,.pg-why [data-excerpt] h2,.pg-why [data-excerpt] h3,.pg-why [data-excerpt] .pg-h{display:none}
.pg-why ul{padding-left:18px;margin:0;text-align:left}
.pg-why li{font-size:14px;line-height:1.55;color:var(--text);text-align:left}
.pg-acc{margin-top:22px;width:100%;max-width:none;display:block}
.pg-acc details.pg-acc-i{display:block;width:100%;margin:0}
.pg-acc .pg-acc-i summary{width:100%;box-sizing:border-box;text-align:left;font-family:var(--font-sans);font-weight:400}
.pg-acc-b{padding:2px 0 18px}
.pg-acc-b,.pg-acc-b p,.pg-acc-b li,.pg-acc-b .prose,.pg-acc-b .prose p{text-align:left !important;font-size:15px;line-height:1.6;color:#2b2b2b;max-width:none;margin-left:0;margin-right:0}
.pg-acc-b .prose p{margin:0 0 10px}
.pg-acc-b .prose{padding:0}
.pg-acc-i summary{font-size:12.5px;color:var(--ink)}
.pg-details{font-size:14px}
.size-fit{display:none}
.size-opt{border:1px solid #cfc9c2}
@media(max-width:767px){.pg-buy{flex-direction:column}.pg-buy [data-atc],.pg-buy [class*="vipps"],.pg-buy [data-vipps]{flex:1 1 auto;width:100%}}

/* ---------- Recensioner (9): inga kort, guldstjärnor, namn versalt grått ---------- */
.q{background:none;border:0;box-shadow:none;border-radius:0;border-bottom:1px solid #e3e3e3;padding:12px 0}
.q p{font-size:15px}
.q footer b{text-transform:uppercase;color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.04em}
.stars i.on{background:#d4a017;border-color:#d4a017;color:#d4a017}

/* ============================================================
   POST PURCHASE – /order-success
   Tack-block + erbjudanderutnät + nedräkning + sticky summa.
   Isolerade klasser (.oks / .op) så inget annat på sajten rörs.
   ============================================================ */
.order-success-page .site-head{position:static}
.oks{max-width:720px;margin:0 auto;padding:clamp(28px,5vw,56px) var(--gut) 0;text-align:center}
.oks-check{display:inline-flex;color:var(--green);margin-bottom:10px}
.oks h1{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,4.4vw,40px);margin:0 0 10px;letter-spacing:.01em}
.oks-line{margin:2px 0;font-size:15px;color:var(--text)}
.oks-line strong{font-weight:600}

.op{margin:clamp(26px,4vw,44px) 0 0;padding-bottom:110px}
.op-in{max-width:1040px;margin:0 auto;padding:clamp(24px,3.5vw,36px) var(--gut) 0;border-top:1px solid var(--line)}
.op-head{text-align:center;max-width:620px;margin:0 auto clamp(20px,3vw,30px)}
.op-eyebrow{margin:0 0 6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);font-weight:600}
.op-head h2{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,3.6vw,34px);margin:0 0 8px}
.op-sub{margin:0;font-size:14.5px;color:var(--muted)}
.op-timer{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 16px;border-radius:var(--r-pill);background:var(--beige);font-size:13px;letter-spacing:.02em}
.op-timer b{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:var(--ink)}

.op-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,22px)}
@media(max-width:900px){.op-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.op-grid{grid-template-columns:repeat(2,1fr);gap:12px}}

.op-card{display:flex;flex-direction:column;text-align:center}
.op-img{position:relative;border-radius:var(--product-image-radius);overflow:hidden;background:var(--sand)}
.op-img img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.op-badge{position:absolute;top:8px;left:8px;z-index:2;background:var(--sale);color:#fff;font:600 11px/1 var(--font-sans);letter-spacing:.04em;padding:6px 9px;border-radius:var(--r-pill)}
.op-body{padding:10px 2px 0;display:flex;flex-direction:column;flex:1}
.op-name{font:400 14px/1.35 var(--font-sans);margin:0 0 4px;color:var(--ink)}
.op-price{margin:0 0 8px;font-size:14px}
.op-price b{font-weight:700;color:var(--sale)}
.op-price s{margin-left:7px;color:var(--muted);font-weight:400}
.op-low{display:block;font-size:11.5px;color:var(--brown);margin:-4px 0 8px}
.op-actions{margin-top:auto}
/* Exakt samma höjd som antalsväljaren så knapparna ligger i linje över hela raden */
.op-add{width:100%;height:34px;display:flex;align-items:center;justify-content:center;padding:0 14px}
.op-card.is-on .op-img{outline:2px solid var(--ink);outline-offset:2px}

/* Antalsväljare: samma yta som knappen, dyker upp först när produkten är tillagd */
.op-qty{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;height:34px;padding:0 4px;border:1px solid var(--ink);border-radius:var(--r-pill);background:var(--ink)}
.op-q{width:30px;height:30px;flex:0 0 30px;border:0;border-radius:50%;background:transparent;color:#fff;font:400 19px/1 var(--font-sans);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.op-q:hover{background:rgba(255,255,255,.16)}
.op-q:disabled{opacity:.32;cursor:default;background:transparent}
.op-qn{flex:1 1 auto;text-align:center;color:#fff;font:600 13px/1 var(--font-sans);font-variant-numeric:tabular-nums}
@media(max-width:400px){.op-qty,.op-add{height:32px}.op-q{width:28px;flex:0 0 28px;font-size:18px}}

/* Sammanfattning på bekräftelsesidan */
.oks-cta{margin-top:26px}
.ops{max-width:440px;margin:28px auto 0;text-align:left;border:1px solid var(--line);border-radius:var(--r-l);padding:18px 18px 16px}
.ops-h{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.ops-list{list-style:none;margin:0;padding:0}
.ops-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #efece9}
.ops-row img{border-radius:var(--product-image-radius-sm);object-fit:cover;background:var(--sand);flex:0 0 56px}
.ops-name{flex:1 1 auto;font-size:14px;line-height:1.35;color:var(--ink)}
.ops-name small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.ops-line{font-size:14px;font-weight:600;white-space:nowrap}
.ops-sum{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;font-size:14px}
.ops-sum b{font-size:16px}
.ops-ship{padding-top:4px;color:var(--muted)}
.ops-ship b{font-size:14px;font-weight:600;color:var(--green)}
.ops-note{margin:12px 0 0;font-size:13px;color:var(--muted);line-height:1.45}

.op-err{max-width:620px;margin:18px auto 0;text-align:center;color:var(--sale);font-size:14px}
.op-skip{text-align:center;margin:26px 0 0;font-size:13.5px}
.op-skip a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

.op-expired{max-width:560px;margin:0 auto;text-align:center;padding:10px 0 20px}
.op-expired h2{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,3.2vw,30px);margin:0 0 10px}
.op-expired p{color:var(--text);font-size:15px;margin:0 0 18px}

.op-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px -22px rgba(0,0,0,.45);padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom))}
.op-bar-in{max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.op-bar-sum{display:flex;flex-direction:column;line-height:1.3}
.op-bar-sum span{font-size:12.5px;color:var(--muted)}
.op-bar-sum b{font-size:17px;font-weight:700}
.op-pay{background:var(--ink);color:#fff;border:0;white-space:nowrap}
@media(max-width:560px){
  .op-bar-in{flex-direction:column;align-items:stretch;gap:8px}
  .op-bar-sum{flex-direction:row;justify-content:space-between;align-items:baseline}
  .op-pay{width:100%}
  .op{padding-bottom:150px}
}

/* ---------- Minikorgen: förslag som tar kunden till nästa förmån ---------- */
.cart-sugg{margin:0 0 14px;padding:14px 0 0;border-top:1px solid var(--line)}
.cart-sugg[hidden]{display:none}
.cart-sugg-head{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cart-sugg-card{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;
  padding:10px;background:var(--sand);border-radius:12px}
.cart-sugg-thumb{display:block;width:56px;height:56px;line-height:0;border-radius:8px;overflow:hidden;background:var(--beige)}
.cart-sugg-thumb img{width:56px;height:56px;object-fit:cover;display:block}
.cart-sugg-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.cart-sugg-name{font-size:15px;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-sugg-name:hover,.cart-sugg-name:focus-visible{text-decoration:underline;text-underline-offset:2px}
.cart-sugg-why{font-size:12.5px;color:var(--muted);line-height:1.35}
.cart-sugg-add{font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 16px;border:0;border-radius:var(--r-pill);background:var(--ink);color:#fff;cursor:pointer;white-space:nowrap;
  transition:opacity .15s ease}
.cart-sugg-add:hover{opacity:.85}
.cart-sugg-add:disabled{opacity:.5;cursor:default}
@media(max-width:400px){
  .cart-sugg-card{grid-template-columns:48px 1fr;row-gap:10px}
  .cart-sugg-thumb,.cart-sugg-thumb img{width:48px;height:48px}
  .cart-sugg-add{grid-column:1/-1;width:100%}
}

/* Förtydligande under 4 for 3-baren. */
.f43-note{margin:5px 0 0;font-size:11.5px;color:var(--muted);letter-spacing:.01em}

/* ---------- Minikorgen: bild och namn länkar till produktsidan ---------- */
/* Länken runt bilden måste bete sig som bilden gjorde i .ci-rutnätet. */
.ci>.ci-link{display:block;width:62px;height:62px;line-height:0}
.ci-name .ci-link{color:inherit;text-decoration:none}
.ci-name .ci-link:hover,.ci-name .ci-link:focus-visible{text-decoration:underline;text-underline-offset:2px}
.ci>.ci-link img{transition:opacity .15s ease}
.ci>.ci-link:hover img{opacity:.85}

/* ---------- Kassan: bildvisning för produkterna i ordersammanfattningen ---------- */
/* Miniatyren är en knapp. Ingen ikon – förstoringsglaset är muspekaren (cursor:zoom-in). */
.ko-thumb{display:block;padding:0;border:0;background:none;cursor:zoom-in;line-height:0;border-radius:8px}
.ko-thumb img{display:block;border-radius:8px;transition:opacity .15s ease}
.ko-thumb:hover img,.ko-thumb:focus-visible img{opacity:.82}
.ko-thumb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

body.kz-open{overflow:hidden}
.kz{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.kz[hidden]{display:none}
.kz-backdrop{position:absolute;inset:0;background:rgba(28,28,28,.55);backdrop-filter:blur(2px)}
.kz-card{position:relative;width:min(420px,100%);max-height:calc(100dvh - 40px);overflow:hidden;background:#fff;border-radius:16px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);display:flex;flex-direction:column;animation:kz-in .18s ease-out}
@keyframes kz-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.kz-card{animation:none}.kz-track{transition:none}}
.kz-x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:999px;border:0;background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px -6px rgba(0,0,0,.45)}
.kz-x:hover{background:var(--sand)}
.kz-stage{position:relative;overflow:hidden;background:var(--sand)}
.kz-track{display:flex;transition:transform .28s cubic-bezier(.4,0,.2,1);will-change:transform}
.kz-slide{flex:0 0 100%;aspect-ratio:1/1}
.kz-slide img{width:100%;height:100%;object-fit:cover;display:block}
.kz-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:999px;border:0;background:rgba(255,255,255,.9);
  color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 12px -5px rgba(0,0,0,.45)}
.kz-nav[hidden]{display:none}
.kz-nav:hover{background:#fff}
.kz-prev{left:10px}
.kz-next{right:10px}
/* Sveptipset gäller bara pekskärmar – på mus/tangentbord finns pilarna i stället.
   Mörk toning bakom texten så den är läsbar även på ljusa produktbilder. */
.kz-hint{display:none}
@media(hover:none){
  .kz-hint{position:absolute;left:0;right:0;bottom:0;display:block;padding:26px 12px 10px;text-align:center;
    color:#fff;font-size:12.5px;letter-spacing:.02em;pointer-events:none;
    background:linear-gradient(to top,rgba(20,18,16,.55),rgba(20,18,16,0))}
  .kz-hint[hidden]{display:none}
}
.kz-dots{display:flex;justify-content:center;gap:7px;padding:12px 0 2px;background:#fff}
.kz-dots[hidden]{display:none}
.kz-dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background .15s ease}
.kz-dot.on{background:var(--ink)}
.kz-title{margin:0;padding:12px 20px 18px;background:#fff;font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
@media(max-width:560px){
  .kz{padding:12px}
  .kz-card{width:100%}
  .kz-nav{display:none}
}