/* Förslag 4: Stjärnkartan. Planetariet och stjärnatlasen: djupblå himmel, isofoter, gradnät,
   tunna tekniska etiketter, och knappar som planetariepultens bakbelysta tangenter. */
@font-face { font-family: "Jost"; src: url(fonts/Jost-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; src: url(fonts/Jost-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bayer"; src: url(fonts/DidactGothic-greek.woff2) format("woff2"); font-display: swap; unicode-range: U+03B1-03C1, U+03C3-03C9; }
@font-face { font-family: "Geist Mono"; src: url(fonts/GeistMono-wght.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DSEG7"; src: url(fonts/DSEG7Classic-Bold.woff2) format("woff2"); font-display: block; }

:root {
  --sky: #03060d; --deep: #060c1a; --plate: #070e1e;
  --ink: #f2ede1; --ink2: #b8c2d8; --ink3: #8592ae; --ink4: #5f6c89;
  --rule: rgba(176, 194, 230, .26); --rule2: rgba(176, 194, 230, .14);
  --amber: #ffc561; --cool: #e8eeff;
  --t-tshirt: #ecc861; --t-hoodie: #f2a25c; --t-longsleeve: #e9705f; --t-jacket: #74c79a; --t-hat: #6fc7cf; --t-accessories: #cfd8ee; --t-wallart: #ac9ce6;
  --f: "Jost", "Bayer", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --head: 64px; --mw: clamp(300px, 25vw, 372px); --sheet: min(41vh, 330px); --edge: 30px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--sky); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--sky); color: var(--ink); font: 400 16px/1.5 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body[data-layout="sky"] { overflow: hidden; height: 100vh; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(184, 194, 216, .55); }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }
img { max-width: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 24px; top: -60px; z-index: 100; background: var(--amber); color: #201300; padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 12px; }
.lnk { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(184, 194, 216, .55); }
.lnk:hover { text-decoration-color: currentColor; }
.mw-probe { position: fixed; left: 0; bottom: 0; width: var(--mw); height: var(--sheet); visibility: hidden; pointer-events: none; }

/* ---------- himlen ---------- */
#sky, #chart { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; display: block; }
#sky { z-index: 0; }
#chart { z-index: 30; pointer-events: none; }
body[data-layout="page"] #sky { filter: brightness(.42) saturate(.85) blur(2.5px); }
body[data-layout="page"] #chart { opacity: .55; }
body.no-sky #sky { display: none; }
body.no-sky { background: radial-gradient(120% 80% at 70% 20%, #0c1a35 0%, #060c1a 45%, var(--sky) 80%) fixed; }
.hot { position: fixed; inset: 0; z-index: 2; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; }
.hot.dragging { cursor: grabbing; }
.hot[hidden] { display: none; }
body[data-view="product"] .hot { cursor: default; }
.hot .hs { position: absolute; left: 0; top: 0; width: 100px; height: 100px; transform-origin: 0 0; display: block; outline: none; -webkit-user-drag: none; touch-action: none; }
.hot .hs[hidden] { display: none; }
.hot .hl { border-radius: 50%; }
.hot .hp { cursor: pointer; border-radius: 50%; }
.hot .lm { position: absolute; left: 0; top: 0; pointer-events: none; background: var(--ink);
  -webkit-mask: var(--logo) var(--mp, 0 0) / var(--ms, 100% 100%) no-repeat; mask: var(--logo) var(--mp, 0 0) / var(--ms, 100% 100%) no-repeat;
  opacity: 0; transition: opacity .16s linear; }
.hot .lm.on { opacity: var(--lb, 1); }
.hot .nm { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; font: 500 12.5px/1 var(--f); letter-spacing: .03em; color: var(--ink2);
  text-shadow: 0 0 4px var(--sky), 0 0 10px var(--sky); }
.hot .nm.off { display: none; }
.ret { position: absolute; left: 0; top: 0; pointer-events: none; border: 1px solid rgba(242, 237, 225, .82); border-radius: 50%; }
.ret::before { content: ""; position: absolute; inset: -9px; background:
  linear-gradient(var(--ink), var(--ink)) 50% 0 / 1px 8px no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 100% / 1px 8px no-repeat,
  linear-gradient(var(--ink), var(--ink)) 0 50% / 8px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 50% / 8px 1px no-repeat; }
.ret.wide { border-color: rgba(242, 237, 225, .5); }
.ret[hidden], .tag[hidden] { display: none; }
.tag { position: absolute; left: 0; top: 0; pointer-events: none; display: grid; gap: 2px; padding-left: 22px; white-space: nowrap;
  text-shadow: 0 0 3px var(--sky), 0 0 9px var(--sky), 0 0 16px var(--sky); }
.tag::before { content: ""; position: absolute; left: 0; top: 10px; width: 16px; height: 1px; background: rgba(242, 237, 225, .8); transform: rotate(-35deg); transform-origin: 0 0; }
.tag.left { padding: 0 22px 0 0; text-align: right; translate: -100% 0; }
.tag.left::before { left: auto; right: 0; transform: rotate(35deg); transform-origin: 100% 0; }
.tg-b { font: 500 16px/1.15 var(--f); color: var(--ink); }
.tg-t { font: 400 14px/1.2 var(--f); color: var(--ink2); }
.tg-p { font: 500 13px/1.3 var(--mono); color: var(--amber); }

/* ---------- huvudet ---------- */
.top { position: fixed; left: 0; right: 0; top: 0; height: var(--head); z-index: 25; display: flex; align-items: center; gap: 22px; padding: 0 calc(var(--edge) + 4px) 0 var(--edge);
  background: linear-gradient(var(--sky) 0%, rgba(3, 6, 13, .86) 58%, rgba(3, 6, 13, 0) 100%); }
.brand { display: block; padding: 6px 0; flex: none; }
.brand-l { display: block; width: 118px; height: 29px; background: var(--ink);
  -webkit-mask: url(logos/iomerch.svg) 0 50% / contain no-repeat; mask: url(logos/iomerch.svg) 0 50% / contain no-repeat; }
.mode { display: flex; gap: 6px; flex: none; }
.search { position: relative; margin-left: auto; flex: 0 1 280px; min-width: 150px; }
.search input { width: 100%; height: 38px; padding: 6px 2px 4px 28px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink); font: 400 15px var(--f); outline: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='9' cy='9' r='5.6' fill='none' stroke='%23b8c2d8' stroke-width='1.4'/%3E%3Cpath d='M9 1v3M9 14v3M1 9h3M14 9h3' stroke='%23b8c2d8' stroke-width='1.2'/%3E%3C/svg%3E") 2px 50% / 18px no-repeat; }
.search input::placeholder { color: var(--ink3); }
.search input:focus { border-bottom-color: var(--amber); }
.search input::-webkit-search-cancel-button { filter: invert(.8); }
.results { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, 92vw); padding: 12px 14px 10px; background: rgba(5, 10, 22, .97); box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--rule2); z-index: 5; }
.results ul { list-style: none; margin: 4px 0 6px; padding: 0; }
.results li a { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 4px 2px; text-decoration: none; color: var(--ink); }
.results li a:hover .r-t, .results li a:focus .r-t { text-decoration: underline; }
.results .disc { width: 44px; }
.r-n { margin: 0; font: 400 12px var(--mono); color: var(--ink3); }
.r-t { font-size: 14.5px; }
.r-p { font: 400 12.5px var(--mono); color: var(--ink2); }
.results p:last-child { margin: 4px 0 0; font-size: 14px; }
.s-tog { display: none; }
.links { display: flex; gap: 18px; font-size: 14.5px; color: var(--ink2); }
.links a { text-decoration: none; }
.links a:hover { text-decoration: underline; }
.acct { position: relative; }
.acct-n { position: absolute; right: 0; top: calc(100% + 8px); white-space: nowrap; font: 400 12px var(--mono); color: var(--ink2); background: var(--deep); padding: 6px 9px; box-shadow: inset 0 0 0 1px var(--rule2); z-index: 5; }
.foot .acct-n { right: auto; left: 0; }
.cartlink { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 15px var(--f); flex: none; }
.cartlink:hover { text-decoration: underline; }
/* räkneverket: sjusegment i ett mörkt fönster, som pultens displayer */
.cart-n { position: relative; display: inline-block; min-width: 2.6em; padding: 5px 6px 4px; text-align: right; font: 400 14px/1 "DSEG7", var(--mono); color: var(--amber);
  background: linear-gradient(#090500, #120a02); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 197, 97, .12); text-shadow: 0 0 6px rgba(255, 170, 60, .45); }
.cart-n::before { content: "88"; position: absolute; right: 6px; top: 5px; color: rgba(255, 197, 97, .08); text-shadow: none; }
.cartlink.bump .cart-n { animation: tick .5s steps(2) 1; }
@keyframes tick { 50% { color: #fff3d6; } }

/* ---------- pulttangenter ---------- */
.key { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border: 0; border-radius: 3px; cursor: pointer;
  font: 600 13px/1 var(--f); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: #c9d2e6;
  background: radial-gradient(130% 100% at 50% 0%, #2b3346 0%, #1a2030 55%, #121724 100%);
  box-shadow: 0 0 0 2px #04070e, 0 0 0 3px rgba(150, 166, 204, .2), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .45), 0 3px 0 1px #04070e, 0 6px 12px rgba(0, 0, 0, .55);
  transition: transform .05s, box-shadow .05s; -webkit-tap-highlight-color: transparent; user-select: none; }
.key:active, input:active + .key { transform: translateY(2px); box-shadow: 0 0 0 2px #04070e, 0 0 0 3px rgba(150, 166, 204, .2), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 1px #04070e, 0 2px 5px rgba(0, 0, 0, .5); }
/* tänd vit tangent: valt alternativ */
.key[aria-pressed="true"], input:checked + .key { color: #1d2638; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  background: radial-gradient(120% 130% at 50% 40%, #ffffff 0%, #e9efff 42%, #b9c6e6 92%);
  box-shadow: 0 0 0 2px #04070e, 0 0 0 3px rgba(150, 166, 204, .25), inset 0 1px 0 #fff, inset 0 -3px 5px rgba(60, 80, 130, .35), 0 3px 0 1px #04070e, 0 0 18px rgba(200, 215, 255, .2); }
/* bärnstensfärgad huvudtangent */
.key-main { min-height: 56px; padding: 0 34px; font-size: 16px; letter-spacing: .09em; color: #3b2300; text-shadow: 0 1px 0 rgba(255, 240, 200, .55);
  background: radial-gradient(120% 140% at 50% 36%, #fff4d2 0%, #ffd884 34%, #f3ad3e 72%, #c9811b 100%);
  box-shadow: 0 0 0 3px #04070e, 0 0 0 4px rgba(176, 150, 100, .35), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -4px 8px rgba(150, 70, 0, .35), 0 4px 0 2px #04070e, 0 0 26px rgba(255, 180, 80, .18), 0 10px 20px rgba(0, 0, 0, .5); }
.key-main:active { box-shadow: 0 0 0 3px #04070e, 0 0 0 4px rgba(176, 150, 100, .35), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 6px rgba(150, 70, 0, .4), 0 1px 0 2px #04070e, 0 0 18px rgba(255, 180, 80, .14); }
.key-main[disabled] { filter: saturate(.2) brightness(.55); cursor: not-allowed; }
.k-m { min-height: 32px; padding: 0 12px; font-size: 12px; }
body.no-sky .mode { display: none; }

/* ---------- marginalen (kartans anteckningar) ---------- */
.margin { position: fixed; left: 0; top: var(--head); bottom: 0; width: var(--mw); z-index: 10; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #26314a transparent;
  padding: 14px 26px 30px var(--edge); background: linear-gradient(90deg, rgba(3, 6, 13, .97) 0%, rgba(3, 6, 13, .94) 70%, rgba(3, 6, 13, 0) 100%); }
.margin[hidden] { display: none; }
.m-in { max-width: 300px; }
.big { margin: 0 0 14px; font: 800 clamp(38px, 3.9vw, 62px)/.92 var(--f); text-transform: uppercase; letter-spacing: .004em; color: var(--ink); outline: none; padding-top: .06em; }
.lede { margin: 0 0 20px; color: var(--ink2); font-size: 16px; }
.up { margin: 0 0 12px; font-size: 14px; color: var(--ink2); }
.index { display: grid; margin: 0 0 18px; }
.ix { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 4px 0; font: 500 17px/1.3 var(--f); color: var(--ink2); text-decoration: none; }
.ix:hover, .ix:focus-visible { color: var(--ink); text-decoration: underline; }
.ix[aria-current] { color: var(--ink); }
.ix-all { color: var(--ink); margin-bottom: 4px; }
.ix-c, .lg-c { font: 400 11.5px var(--mono); color: var(--ink4); }
.ix-l { display: none; }
.welcome { font-size: 14px; line-height: 1.55; color: var(--ink3); margin: 0 0 12px; }
.hint { font-size: 13.5px; color: var(--ink3); margin: 0 0 18px; }
body[data-layout="page"] .sky-only { display: none; }
.legend { display: grid; margin: 4px 0 22px; }
.legend a { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 4px; padding: 5px 0; font: 500 16.5px/1.25 var(--f); color: var(--ink2); text-decoration: none; }
.legend a:hover, .legend a:focus-visible { color: var(--ink); text-decoration: underline; }
.legend a[aria-current] { color: var(--ink); }
.legend a[aria-current] span:nth-child(2) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; text-decoration-color: var(--amber); }
.sym { width: 19px; height: 19px; color: var(--ink3); }
.sym-tshirt { color: var(--t-tshirt); } .sym-hoodie { color: var(--t-hoodie); } .sym-longsleeve { color: var(--t-longsleeve); } .sym-jacket { color: var(--t-jacket); }
.sym-hat { color: var(--t-hat); } .sym-accessories { color: var(--t-accessories); } .sym-wallart { color: var(--t-wallart); } .sym-all { color: var(--ink2); }
.legend a:not([aria-current]) .sym { opacity: .72; }
.step { display: grid; gap: 6px; margin: 0 0 22px; font-size: 14.5px; color: var(--ink2); }
.foot { margin-top: 26px; font-size: 12.5px; line-height: 1.5; color: var(--ink3); }
.foot p { margin: 0 0 8px; }
.foot .contact { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink2); }
.foot .gpsr { font-size: 10.5px; line-height: 1.5; color: var(--ink4); max-width: 46ch; }

/* ---------- produkt ---------- */
.product .plate { margin: 0; }
.p-box { position: absolute; inset: 0; }
.pimg { position: absolute; display: block; opacity: 0; transition: opacity .38s ease; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(calc(var(--lx, 0) * 2.2px) calc(var(--ly, -1) * 2.2px) 1.2px rgba(255, 244, 226, .42)); }
.pimg.in { opacity: 1; }
.p-halo { position: absolute; inset: -30%; border-radius: 50%; display: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo, #fff4e8) 30%, transparent) 0%, color-mix(in srgb, var(--halo, #fff4e8) 10%, transparent) 50%, transparent 100%); }
.p-h { font-size: clamp(32px, 2.7vw, 46px); }
.cat { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 16px; font: 400 12px/1.4 var(--mono); color: var(--ink3); }
.cat .by { font-family: var(--f); font-size: 14px; color: var(--ink2); }
.price { margin: 0; font: 600 26px/1 var(--f); }
.buy fieldset { border: 0; margin: 20px 0 0; padding: 0; min-width: 0; }
.buy legend { padding: 0; margin-bottom: 10px; font-size: 14.5px; color: var(--ink2); }
.buy legend .cn { color: var(--ink); margin-left: 6px; }
.sws { display: flex; flex-wrap: wrap; gap: 10px 10px; }
.sw, .sz, .pm { position: relative; cursor: pointer; }
.sw input, .sz input, .pm input, .ship-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
/* färgerna som pultens tangenter, samma form som storlekarna: plan färg så att den syns som den är */
.dot { position: relative; display: block; width: 48px; height: 40px; border-radius: 3px; background: var(--c);
  box-shadow: 0 0 0 2px #04070e, 0 0 0 3px rgba(150, 166, 204, .28), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 3px 0 1px #04070e, 0 6px 12px rgba(0, 0, 0, .55);
  transition: transform .05s, box-shadow .05s; }
.sw:active .dot { transform: translateY(2px); box-shadow: 0 0 0 2px #04070e, 0 0 0 3px rgba(150, 166, 204, .28), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 0 1px #04070e, 0 2px 5px rgba(0, 0, 0, .5); }
/* vald färg: vit ring runt tangenten, som den tända tangenten bland storlekarna */
.sw input:checked + .dot { box-shadow: 0 0 0 2px #04070e, 0 0 0 4px var(--ink), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 3px 0 3px #04070e, 0 0 18px rgba(200, 215, 255, .25); }
.sw input:focus-visible + .dot, .sz input:focus-visible + .key, .pm input:focus-visible + .key, .ship-opt input:focus-visible ~ .so-t { outline: 2px solid var(--amber); outline-offset: 4px; }
.kz { display: flex; flex-wrap: wrap; gap: 10px 10px; }
.k-s { min-width: 48px; min-height: 40px; padding: 0 10px; font-size: 13px; letter-spacing: .04em; }
.sz.na .key { opacity: .32; text-decoration: line-through; cursor: not-allowed; }
.need-size .sizes legend { color: #ffc3ad; }
.act { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.act-p { display: none; font: 600 20px var(--f); }
.status { min-height: 1.5em; margin: 14px 0 0; font-size: 14.5px; color: var(--ink2); }
.status.warn { color: #ffbfa8; } .status.ok { color: #c4ead0; }
.made { margin: 2px 0 0; font-size: 13.5px; color: var(--ink3); max-width: 44ch; }
.desc { margin-top: 22px; font-size: 15px; color: var(--ink2); }
.desc p { margin: 0 0 10px; }
.facts { margin: 4px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink3); }
.facts li { margin-bottom: 4px; }
.another, .more { margin-top: 30px; }
.another h2, .more h2, .co-sum h2 { margin: 0 0 4px; font: 800 21px/1.1 var(--f); text-transform: uppercase; letter-spacing: .01em; }
.ano-l { margin: 0 0 12px; font-size: 14px; color: var(--ink3); }
.ano { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
/* små kartblad: en logga på sitt eget gradnät */
.ano a { position: relative; display: grid; place-items: center; height: 62px; text-decoration: none;
  background: linear-gradient(rgba(150, 170, 215, .07) 1px, transparent 1px) 0 0 / 100% 15px, linear-gradient(90deg, rgba(150, 170, 215, .07) 1px, transparent 1px) 0 0 / 20px 100%, radial-gradient(90% 120% at 50% 50%, #0c1a35, #060c1a); }
/* kartblad med passmärken i hörnen i stället för ram */
.ano a::after, .logo-tile::after, .ix-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4; --m: var(--ink2);
  background: linear-gradient(var(--m), var(--m)) 0 0 / 9px 1px no-repeat, linear-gradient(var(--m), var(--m)) 0 0 / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 9px 1px no-repeat, linear-gradient(var(--m), var(--m)) 100% 0 / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 9px 1px no-repeat, linear-gradient(var(--m), var(--m)) 0 100% / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 9px 1px no-repeat, linear-gradient(var(--m), var(--m)) 100% 100% / 1px 9px no-repeat; }
.ano a:hover::after, .ano a:focus-visible::after, .logo-tile:hover::after, .logo-tile:focus-visible::after, .ix-tile:hover::after, .ix-tile[aria-current]::after { opacity: 1; --m: var(--ink); }
.ix-tile::after { display: none; }
.ano-m { display: block; width: 78%; height: 62%; background: var(--ink2); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.ano a:hover .ano-m, .ano a:focus-visible .ano-m { background: var(--ink); }
.minis { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.minis a { display: grid; gap: 2px; text-decoration: none; color: var(--ink2); font-size: 13px; }
.minis .c-p { font: 400 11.5px var(--mono); color: var(--ink3); }
.minis a:hover .c-t { text-decoration: underline; }

/* lysande skivor: produktens eget ljus i listor och varukorg */
.disc { position: relative; display: block; aspect-ratio: 1; overflow: visible; }
.disc::before { content: ""; position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(225, 233, 255, .26), rgba(160, 182, 230, .1) 58%, rgba(160, 182, 230, 0)); }
.disc .cimg { position: absolute; filter: drop-shadow(0 -1.6px 1px rgba(240, 244, 255, .35)); }

/* ---------- sky layout: product as a plate pinned to the sky + panel ---------- */
body[data-layout="sky"] main { position: static; }
body[data-layout="sky"] .product .plate { position: fixed; left: var(--px); top: var(--py); width: var(--ps); height: var(--ps); z-index: 12; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
body[data-layout="sky"] .product .plate.on { opacity: 1; }
body[data-layout="sky"] .summary { position: fixed; right: 0; top: var(--head); bottom: 0; width: min(480px, max(380px, 36vw)); z-index: 15; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #26314a transparent;
  padding: 10px calc(var(--edge) + 8px) 90px 34px; background: linear-gradient(90deg, rgba(3, 6, 13, 0) 0, rgba(3, 6, 13, .9) 46px, rgba(3, 6, 13, .95) 100%); }
body[data-layout="sky"] .summary .s-in { max-width: 400px; }
body[data-layout="sky"] .summary { animation: panel-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateX(48px); } }
body[data-layout="sky"] .margin { animation: margin-in .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes margin-in { from { opacity: 0; transform: translateX(-24px); } }

/* ---------- page layout (list, product page, checkout) ---------- */
body[data-layout="page"] main { overflow-x: clip; }
body[data-layout="page"] .top { background: linear-gradient(var(--sky) 0, var(--sky) 72%, rgba(3, 6, 13, 0) 100%); }
body[data-layout="page"] main { position: relative; z-index: 5; margin-left: var(--mw); padding: calc(var(--head) + 12px) calc(var(--edge) + 18px) 80px 12px; min-height: 100vh; }
body[data-layout="page"][data-view="product"] main, body[data-layout="page"][data-view="checkout"] main { margin-left: 0; padding-left: calc(var(--edge) + 6px); }
body[data-layout="page"] .margin { background: linear-gradient(90deg, rgba(3, 6, 13, .96) 0%, rgba(3, 6, 13, .92) 75%, rgba(3, 6, 13, 0) 100%); }
.catalogue { max-width: 1280px; }
.catalogue > .foot { display: none; margin-top: 40px; }
.qnote { margin: 4px 0 18px; color: var(--ink2); font-size: 14.5px; }
.empty { color: var(--ink3); }
.cards { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 22px 18px; }
.card a { display: grid; gap: 3px; text-decoration: none; color: var(--ink); }
.card .disc { margin-bottom: 6px; }
.c-t { font-size: 15.5px; line-height: 1.25; }
.c-p { font: 400 13px var(--mono); color: var(--ink2); }
.card a:hover .c-t, .card a:focus-visible .c-t { text-decoration: underline; }
.card a:hover .disc::after, .minis a:hover .disc::after, .results a:hover .disc::after { content: ""; position: absolute; inset: 3%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 237, 225, .55); }
.group { margin-bottom: 18px; }
.g-h { margin: 0 0 14px; font: 600 15px var(--f); color: var(--ink2); }
.g-h a { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.g-h a:hover span { text-decoration: underline; }
.g-l { display: block; width: 120px; height: 34px; background: var(--ink); -webkit-mask: var(--logo) 0 50% / contain no-repeat; mask: var(--logo) 0 50% / contain no-repeat; }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.logo-tile { position: relative; display: grid; grid-template-rows: 1fr auto auto; gap: 2px; padding: 0 0 12px; aspect-ratio: 16 / 11; text-decoration: none; color: var(--ink);
  background: linear-gradient(rgba(150, 170, 215, .06) 1px, transparent 1px) 0 0 / 100% 22px, linear-gradient(90deg, rgba(150, 170, 215, .06) 1px, transparent 1px) 0 0 / 28px 100%, radial-gradient(70% 90% at 50% 42%, #10224a 0%, #08112a 55%, #050a17 100%); }
.lt-l { display: block; margin: 14% 14% 6%; background: var(--ink); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.lt-n, .lt-c { padding: 0 14px; }
.lt-n { font: 500 16px/1.2 var(--f); }
.lt-c { font: 400 11.5px var(--mono); color: var(--ink3); }
.logo-tile:hover .lt-n, .logo-tile:focus-visible .lt-n { text-decoration: underline; }
body[data-layout="page"] .product { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 44px; max-width: 1240px; margin: 0 auto; align-items: start; }
body[data-layout="page"] .product .plate { position: sticky; top: calc(var(--head) + 18px); aspect-ratio: 1; width: 100%; max-height: calc(100vh - var(--head) - 40px); max-width: calc(100vh - var(--head) - 40px); justify-self: center; }
body[data-layout="page"] .p-halo { display: block; }
body[data-layout="page"] .summary { padding-top: 10px; }

/* ---------- varukorgen ---------- */
.drawer { position: fixed; inset: 0; z-index: 40; background: rgba(1, 3, 8, 0); transition: background .3s; }
.drawer.open { background: rgba(1, 3, 8, .6); }
.drawer[hidden] { display: none; }
.d-in { position: absolute; right: 0; top: 0; bottom: 0; width: min(450px, 100vw); overflow-y: auto; padding: 22px 34px 90px 30px; transform: translateX(102%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  background: linear-gradient(rgba(150, 170, 215, .045) 1px, transparent 1px) 0 0 / 100% 32px, radial-gradient(120% 60% at 100% 0%, #0d1b3a 0%, #070e1e 55%, #050a16 100%);
  box-shadow: -30px 0 60px rgba(0, 0, 0, .5), inset 1px 0 0 var(--rule2); }
.drawer.open .d-in { transform: none; }
.d-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.d-head h2 { margin: 0; font: 800 34px/1 var(--f); text-transform: uppercase; outline: none; }
.d-close { font-size: 15px; color: var(--ink2); }
.lines { list-style: none; margin: 0 0 18px; padding: 0; }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: start; padding: 12px 0; box-shadow: 0 1px 0 var(--rule2); }
.l-img { width: 76px; }
.l-t { display: grid; gap: 2px; font-size: 15px; }
.l-t a { text-decoration: none; } .l-t a:hover { text-decoration: underline; }
.l-o { font-size: 13.5px; color: var(--ink3); }
.l-p { font: 500 14px var(--mono); padding-top: 2px; }
.qty { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.k-q { min-width: 32px; min-height: 30px; padding: 0; font-size: 16px; letter-spacing: 0; }
.qty output { min-width: 1.6em; text-align: center; font: 500 15px var(--mono); }
.rm { margin-left: 8px; font-size: 13.5px; color: var(--ink3); }
.sum .sub, .co-sum .sub { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 16px; }
.sum .sub span:last-child, .co-sum .sub span:last-child { font-family: var(--mono); font-size: 15px; }
.ship { margin: 0 0 20px; font-size: 14px; color: var(--ink3); }
.sum .key-main { width: 100%; }
.lines.small .line { grid-template-columns: 54px 1fr auto; }
.lines.small .l-img { width: 54px; }

/* ---------- kassan ---------- */
.checkout { max-width: 1120px; margin: 0 auto; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 54px; align-items: start; }
.co-form fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.checkout .big { margin-bottom: 26px; }
.co-form legend { padding: 0; margin-bottom: 10px; font: 800 20px/1.1 var(--f); text-transform: uppercase; }
.fld { margin: 0 0 12px; display: grid; gap: 4px; }
.fld label { font-size: 13.5px; color: var(--ink2); }
.opt { color: var(--ink4); }
.fld input, .fld select { width: 100%; height: 46px; padding: 8px 12px; border: 0; border-radius: 0; border-bottom: 1px solid rgba(176, 194, 230, .38); background: rgba(9, 16, 34, .82); color: var(--ink); font: 400 16px var(--f); outline: none; }
.fld select { appearance: none; background: rgba(9, 16, 34, .82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b8c2d8' stroke-width='1.4'/%3E%3C/svg%3E") right 14px center / 12px no-repeat; }
.fld input:focus, .fld select:focus { border-bottom-color: var(--amber); background-color: rgba(14, 24, 48, .9); }
.fld input[aria-invalid="true"] { border-bottom-color: #ff9b80; }
.err { font-size: 13px; color: #ffbfa8; }
.err[hidden] { display: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ship-opt { position: relative; display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center; padding: 14px 14px; background: rgba(9, 16, 34, .82); cursor: pointer; }
.ship-opt::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f4fff6, #7fe0a2 45%, #2f8a52); box-shadow: 0 0 10px rgba(127, 224, 162, .45), 0 0 0 2px #04070e; }
.so-p { font: 400 13px var(--mono); color: var(--ink3); }
.note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink3); }
.pays { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.k-p { min-height: 46px; padding: 0 18px; font-size: 13px; }
.card-f[hidden] { display: none; }
.place { margin-top: 8px; }
.place .key-main { min-width: 240px; }
.done { padding: 20px 22px; background: radial-gradient(120% 140% at 0% 0%, rgba(255, 197, 97, .14), rgba(255, 197, 97, .03) 60%), rgba(9, 16, 34, .9); box-shadow: inset 3px 0 0 var(--amber); outline: none; }
.done[hidden] { display: none; }
.done p { margin: 0 0 8px; }
.done-h { font: 800 22px/1.1 var(--f); text-transform: uppercase; }
.co-sum { position: sticky; top: calc(var(--head) + 18px); padding: 22px 24px; background: linear-gradient(rgba(150, 170, 215, .045) 1px, transparent 1px) 0 0 / 100% 32px, rgba(7, 14, 30, .9); box-shadow: inset 0 0 0 1px var(--rule2); }
.co-sum h2 { margin-bottom: 10px; }
.co-sum .tot { margin-top: 10px; padding-top: 10px; box-shadow: 0 -1px 0 var(--rule); font-weight: 600; }
.checkout .foot { margin-top: 60px; max-width: 640px; }

/* ---------- mobil ---------- */
@media (max-width: 759px) {
  :root { --head: 56px; --edge: 16px; }
  body[data-view="design"], body[data-view="all"], body[data-view="type"] { --sheet: min(35vh, 290px); }
  .top { gap: 10px; padding: 0 14px 0 16px; }
  .brand-l { width: 84px; height: 22px; }
  .mode { gap: 5px; margin-left: auto; }
  .k-m { min-height: 30px; padding: 0 9px; font-size: 11px; }
  .links { display: none; }
  .s-tog { display: block; font-size: 14px; color: var(--ink2); padding: 8px 2px; }
  .search { display: none; position: fixed; left: 0; right: 0; top: var(--head); margin: 0; padding: 8px 16px 12px; background: var(--sky); flex: none; box-shadow: 0 24px 40px rgba(0, 0, 0, .6); }
  body.searching .search { display: block; }
  .results { position: static; width: auto; margin-top: 8px; padding: 8px 0; background: none; box-shadow: none; }
  .cartlink { gap: 6px; font-size: 14px; }
  .cart-n { font-size: 12px; }

  /* marginalen blir ett ark nertill */
  body[data-layout="sky"] .margin { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--sheet); padding: 26px 16px 72px;
    background: linear-gradient(rgba(3, 6, 13, 0) 0, rgba(3, 6, 13, .9) 22px, var(--sky) 58px); }
  body[data-layout="page"] .margin { position: relative; top: auto; width: auto; padding: calc(var(--head) + 8px) 16px 4px; background: none; }
  .m-in { max-width: none; }
  .big { font-size: 38px; margin-bottom: 8px; }
  .lede { font-size: 15px; margin-bottom: 14px; }
  .index { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 16px; padding: 2px 16px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .index::-webkit-scrollbar { display: none; }
  .ix { flex: none; width: 112px; height: 72px; display: grid; grid-template-rows: 1fr auto; grid-template-columns: 1fr; align-items: stretch; gap: 4px; padding: 9px 9px 6px; scroll-snap-align: start; font-size: 11px; text-align: center;
    position: relative; background: radial-gradient(80% 90% at 50% 40%, #0f1f43, #070e20); }
  .ix-tile::after { display: block; }
  .ix-l { display: block; grid-row: 1; background: var(--ink); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
  .ix-n { grid-row: 2; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink2); }
  .ix-c { display: none; }

  .legend { display: flex; gap: 6px 18px; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px 4px; scrollbar-width: none; }
  .legend::-webkit-scrollbar { display: none; }
  .legend a { flex: none; grid-template-columns: 22px auto auto; font-size: 15px; padding: 6px 0; }
  .step { grid-template-columns: 1fr 1fr; font-size: 13.5px; }
  .step a:last-child { text-align: right; }
  .welcome { font-size: 13.5px; }

  body[data-layout="sky"] .margin, body[data-layout="sky"] .summary { animation-name: sheet-in; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(36px); } }
  body[data-layout="sky"][data-view="product"] main { position: fixed; inset: 0; z-index: 15; overflow-y: auto; overscroll-behavior: contain; }
  body[data-layout="sky"] .summary { position: relative; top: auto; right: auto; bottom: auto; width: auto; overflow: visible; margin-top: calc(var(--py) + var(--ps) - var(--head) + 4px);
    padding: 40px 16px 150px; background: linear-gradient(rgba(3, 6, 13, 0) 0, rgba(3, 6, 13, .94) 40px, var(--sky) 90px); min-height: 100vh; }
  body[data-layout="sky"][data-view="product"] main .product { padding-top: var(--head); }
  /* köpraden: kompakt, och hörnet nere till höger lämnas fritt */
  .act { position: sticky; bottom: 0; z-index: 3; margin: 20px -16px 0; padding: 14px 16px 12px; background: linear-gradient(rgba(3, 6, 13, 0), var(--sky) 14px); }
  .act .key-main { width: calc(100% - 214px); min-width: 150px; min-height: 52px; padding: 0 12px; font-size: 14px; letter-spacing: .06em; }
  .p-h { font-size: 30px; }
  .minis { grid-template-columns: repeat(3, 1fr); }

  body[data-layout="page"] main { margin-left: 0; padding: 4px 16px 80px; }
  body[data-layout="page"] .margin .foot, body[data-layout="page"][data-view="home"] .margin .index { display: none; }
  .catalogue > .foot { display: block; }
  body[data-layout="page"][data-view="product"] main, body[data-layout="page"][data-view="checkout"] main { padding: calc(var(--head) + 8px) 16px 80px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .logos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lt-n { font-size: 14px; } .lt-n, .lt-c { padding: 0 10px; }
  body[data-layout="page"] .product { grid-template-columns: 1fr; gap: 12px; }
  body[data-layout="page"] .product .plate { position: relative; top: 0; width: min(100%, 420px); }
  .co-grid { grid-template-columns: 1fr; gap: 28px; }
  .co-sum { position: static; order: -1; }
  .d-in { padding: 18px 18px 90px; }
  .two { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- bara listan: startsidans index i marginalen behövs inte bredvid loggrutorna ---------- */
body[data-layout="page"][data-view="home"] .margin .index { display: none; }

/* ---------- varan på en vit ruta: friläggningens kant försvinner och svarta plagg syns ---------- */
.disc::before { inset: 0; border-radius: 0; background: #fff; transition: background .15s; }
.disc .cimg { filter: none; }
.card a:hover .disc::after, .minis a:hover .disc::after, .results a:hover .disc::after { display: none; }
.card a:hover .disc::before, .minis a:hover .disc::before, .results a:hover .disc::before { background: #eef1f7; }
.product .plate .p-box { background: #fff; }
.pimg { filter: none; }
.p-halo { display: none !important; }

@media (max-width: 759px) { .s-tog { margin-left: auto; } }

/* ================================================================ WooCommerce-temat */
/* kassa, konto och vanliga sidor i <main> (assets/woo.css gör resten) */
body[data-layout="page"][data-view="account"] main, body[data-layout="page"][data-view="page"] main { margin-left: 0; padding-left: calc(var(--edge) + 6px); }
.iom-page { max-width: 1120px; margin: 0 auto; padding-top: 6px;
  --w-ink: var(--ink); --w-dim: var(--ink2); --w-line: rgba(176, 194, 230, .26); --w-field: rgba(9, 16, 34, .86); --w-field-ink: var(--ink);
  --w-focus: var(--amber); --w-accent: #f3ad3e; --w-accent-ink: #3b2300; --w-panel: rgba(7, 14, 30, .9);
  --w-err: #ffbfa8; --w-ok: #c4ead0; --w-font: var(--f); --w-head: 800 30px/1 var(--f); --w-radius: 3px; --w-gap: 16px; }
.iom-page h1, .iom-page h3, .iom-page .iom-page-h { text-transform: uppercase; letter-spacing: .004em; }
.iom-page .woocommerce-billing-fields h3, .iom-page #order_review_heading { font: 800 20px/1.1 var(--f); }
.iom-page #place_order, .iom-page .button.alt { letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
  background: radial-gradient(120% 140% at 50% 36%, #fff4d2 0%, #ffd884 34%, #f3ad3e 72%, #c9811b 100%); color: #3b2300;
  box-shadow: 0 0 0 3px #04070e, 0 0 0 4px rgba(176, 150, 100, .35), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -4px 8px rgba(150, 70, 0, .35); }
.iom-ssr { opacity: .55; padding: 90px 30px; }
.iom-ssr ul { list-style: none; padding: 0; columns: 3; }
.iom-ssr img { width: 240px; height: auto; background: #fff; }

/* inloggad: WordPress adminrad (32 px, 46 px i mobil) överst; fasta delar flyttas ner */
body.admin-bar { --ab: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --ab: 46px; } }
body.admin-bar .top { top: var(--ab); }
body.admin-bar .margin { top: calc(var(--head) + var(--ab)); }
body.admin-bar #sky, body.admin-bar #chart { top: var(--ab); height: calc(100vh - var(--ab)); }
body.admin-bar .d-in { top: var(--ab); }