/* Skuggea: stilmallen. Uppbyggnaden följer glasea.se sektion för sektion; alla färger, typsnitt och mått kommer
   från tokens.css. Lägg aldrig en färg direkt här, lägg den i tokens.css.
   Där Glasea har foto (hjälten, produktkorten, filosofins bild) har Skuggea en enfärgad yta i fotots bakgrundston
   med en tunn linjeteckning; byts mot foto, se LÄS-MIG.md. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body, input, button, select, textarea { font-family: var(--font); }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--vit); }
.hopp { position: absolute; left: -9999px; }
.hopp:focus { left: 12px; top: 40px; z-index: 60; background: var(--vit); color: var(--ink); padding: 8px 12px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Topprad och sidhuvud: ligger över hjälten, vit text */
.topprad { position: absolute; top: 0; width: 100%; z-index: 51; height: var(--topprad-hojd); display: flex; align-items: center; justify-content: center; }
.topprad span { font-size: var(--etikett); font-weight: 400; letter-spacing: .02em; color: var(--vit-75); text-align: center; padding: 0 16px; }
.nav { position: absolute; top: var(--topprad-hojd); width: 100%; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding: 0 var(--sidmarg); height: var(--nav-hojd); color: var(--vit); }
.nav .vanster { display: flex; align-items: center; justify-content: flex-start; gap: 32px; min-width: 0; }
.nav .hoger { display: flex; align-items: center; justify-content: flex-end; gap: 32px; min-width: 0; }
.meny-knapp { background: none; border: 0; width: 40px; height: 40px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; color: inherit; }
.meny-knapp span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: .2s; }
.meny-knapp[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.meny-knapp[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.meny-knapp[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.logga { font-size: var(--logga); font-weight: 800; letter-spacing: var(--logga-ls); text-transform: uppercase; justify-self: center; padding-left: var(--logga-ls); text-decoration: none; color: inherit; }
.nav .hoger a { font-size: var(--liten); font-weight: 500; letter-spacing: .01em; white-space: nowrap; padding: 4px 0; text-decoration: none; }
.meny { display: none; position: absolute; top: var(--nav-hojd); left: var(--sidmarg); min-width: 260px; background: var(--bg); color: var(--ink); padding: 24px 32px; flex-direction: column; gap: 14px; }
.meny.oppen { display: flex; }
.meny a { font-size: var(--liten); font-weight: 500; letter-spacing: .01em; text-decoration: none; }
.meny a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Undersidorna: samma sidhuvud på ljus botten */
.ljus { position: relative; background: var(--bg); }
.ljus .topprad, .ljus .nav { position: relative; top: 0; }
.ljus .topprad span { color: var(--dim); }
.ljus .nav { color: var(--ink); border-bottom: 1px solid var(--linje); }
.ljus .meny { background: var(--sand); }

/* Hjälten: Glasea har ett bildspel med foton över en mörk yta. Här är ytan kvar och fotot är en linjeteckning. */
.hjalte { position: relative; width: 100%; height: var(--hjalte-hojd); min-height: 760px; max-height: 960px; overflow: hidden; background: var(--hjalte); color: var(--vit); }
.hjalte .teckning { position: absolute; top: 50%; right: 9%; width: min(44vw, 620px); transform: translateY(-50%); fill: none; stroke: var(--vit-35); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1); }
.hjalte .inne { position: relative; z-index: 10; max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 var(--sidmarg) 120px; display: flex; flex-direction: column; justify-content: center; }
.hjalte .texter { display: grid; }
.hjalte .text { grid-area: 1 / 1; max-width: 680px; opacity: 0; visibility: hidden; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1), visibility 1.2s; }
.hjalte .aktiv { opacity: 1; visibility: visible; }
.hjalte .ogon { font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--vit-65); margin-bottom: 20px; }
.hjalte h1, .hjalte .h1 { font-size: var(--h1); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; color: var(--vit); margin-bottom: 20px; }
.hjalte .ingress { font-size: var(--ingress); line-height: 1.65; color: var(--vit-80); margin-bottom: 32px; max-width: 540px; }
.knappar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.knapp-vit { background: var(--vit); color: var(--ink); padding: 16px 32px; font-size: var(--liten); font-weight: 500; letter-spacing: .01em; text-decoration: none; transition: background .25s; }
.knapp-kontur { background: transparent; color: var(--vit); border: 1px solid var(--vit-45); padding: 15px 28px; font-size: var(--liten); font-weight: 400; letter-spacing: .01em; text-decoration: none; transition: border-color .25s, background .25s; }
.knapp-kontur:hover { border-color: var(--vit); }
.knapp-lank { color: var(--vit-70); font-size: var(--liten); font-weight: 400; padding: 8px 4px; text-decoration: underline; text-decoration-color: var(--vit-35); text-underline-offset: 4px; transition: color .2s; }
.knapp-lank:hover { color: var(--vit); }
.hjalte .smatt { font-size: .75rem; color: var(--vit-50); margin-top: 28px; }
.pil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 52px; height: 52px; border-radius: 50%; background: var(--vit-12); border: 1px solid var(--vit-25); color: var(--vit); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: .2s; }
.pil.fore { left: 32px; }
.pil.nasta { right: 32px; }
.flikar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; padding: 20px var(--sidmarg) 24px; }
.flikar .rad { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.flikar button { background: none; border: 0; padding: 8px 0; cursor: pointer; text-align: left; position: relative; color: var(--vit-55); }
.flikar .stapel { display: block; height: 3px; width: 100%; background: var(--vit-20); margin-bottom: 10px; border-radius: 2px; overflow: hidden; position: relative; }
.flikar .stapel i { display: block; height: 100%; width: 0; background: var(--vit-90); }
.flikar .namn, .flikar .nr { font-size: var(--liten); font-weight: 400; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.flikar .nr { display: none; }
.flikar [aria-current="true"] { color: var(--vit); }
.flikar [aria-current="true"] .namn, .flikar [aria-current="true"] .nr { font-weight: 500; }
.flikar [aria-current="true"] .stapel i { animation: slideProgress 6500ms linear infinite; }
@keyframes slideProgress { 0% { width: 0%; } 100% { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .flikar [aria-current="true"] .stapel i { animation: none; width: 100%; }
  .hjalte .text, .hjalte .teckning { transition: none; }
}

/* Sortimentet */
.sortiment { padding: var(--sektion) var(--sidmarg); background: var(--sand); }
.sortiment .inne { max-width: var(--max); margin: 0 auto; }
.sek-huvud { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 80px; flex-wrap: wrap; }
.sek-huvud h2 { font-size: var(--h2-sektion); font-weight: 800; letter-spacing: -.02em; }
.sek-huvud p { font-size: var(--etikett); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); max-width: 260px; line-height: 1.8; }
.galler { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--galler-gap); }
.s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; }
.kort { display: block; width: 100%; min-width: 0; height: var(--kort-lag); position: relative; overflow: hidden; text-align: left; color: var(--ink); background: var(--kort); text-decoration: none; }
.kort.hog { height: var(--kort-hog); }
.kort .teckning { position: absolute; left: 50%; top: 42%; width: min(62%, 440px); transform: translate(-50%, -50%); fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: transform .7s ease; }
.kort:hover .teckning { transform: translate(-50%, -50%) scale(1.05); }
.kort .etikett { position: absolute; bottom: 48px; left: 48px; right: 40px; }
.nr-tagg { display: inline-block; padding: 5px 12px; margin-bottom: 16px; background: var(--ink); color: var(--vit); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.kort h3 { font-size: var(--h3-kort); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.cat-bar { width: 0; height: 3px; background: var(--ink); transition: width .5s ease; margin-top: 16px; }
.kort:hover .cat-bar { width: 96px; }
.annat { min-height: var(--kort-lag); padding: 48px; background: var(--kort2); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.annat .ogon { font-size: var(--etikett); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 24px; }
.annat h3 { font-size: var(--h3-kort); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 24px; }
.annat p:not(.ogon) { font-size: 16px; line-height: 1.7; color: var(--text3); max-width: 340px; margin-bottom: 32px; }
.knapp-mork { display: inline-block; padding: 16px 24px; background: var(--ink); color: var(--vit); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .04em; border: 0; cursor: pointer; }

/* Filosofin */
.filosofi { padding: var(--sektion-stor) var(--sidmarg); background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.filosofi .inne { max-width: var(--max); width: 100%; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.bildruta { position: relative; }
.bildruta .yta { padding-bottom: 133%; background: var(--kort); position: relative; overflow: hidden; }
.bildruta .teckning { position: absolute; inset: 12% 14%; width: 72%; height: 76%; fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: 1.25; stroke-linecap: round; }
.svart-ruta { position: absolute; bottom: -48px; right: -48px; width: 256px; height: 256px; background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 32px; z-index: 10; }
.svart-ruta p { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: var(--vit); line-height: 1.15; text-align: center; }
.ogon-litet { font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 24px; }
.filosofi h2 { font-size: var(--h2-filosofi); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; line-height: 1.1; margin-bottom: 40px; }
.punkter { display: flex; flex-direction: column; gap: 32px; }
.punkter h4 { font-size: var(--liten); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.punkter h4::before { content: ""; width: 8px; height: 8px; background: var(--ink); flex-shrink: 0; display: inline-block; }
.punkter p { font-size: var(--bryd); line-height: 1.7; color: var(--text2); padding-left: 20px; border-left: 2px solid var(--linje); }
.knapp-gra { display: inline-block; margin-top: 64px; padding: 20px 48px; background: var(--kort); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: background .2s; }
.knapp-gra:hover { background: var(--kort2); }

/* Börja med dina mått */
.matt { padding: 0 var(--sidmarg) var(--sektion); margin-top: 64px; }
.matt .ruta { background: var(--ink); padding: 88px 96px; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.matt .text { max-width: 620px; min-width: 0; }
.matt .ogon { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vit-50); margin-bottom: 20px; }
.matt h2 { font-size: var(--h2-matt); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: var(--vit); line-height: 1.12; margin-bottom: 20px; }
.matt p:not(.ogon) { font-size: var(--ingress); line-height: 1.7; color: var(--vit-78); }
.knapp-pill { flex-shrink: 0; max-width: 100%; padding: 20px min(44px, 6vw); background: var(--vit); color: var(--ink); border-radius: var(--radie-pill); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: transform .3s; }
.knapp-pill:hover { transform: translateY(-2px); }

/* Om Skuggea */
.om { padding: var(--sektion) var(--sidmarg); background: var(--vit); }
.om .inne { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.om .ogon-litet { margin-bottom: 16px; }
.om h2 { font-size: var(--h2-om); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 24px; }
.stycken { font-size: 15px; line-height: 1.8; color: var(--text2); display: flex; flex-direction: column; gap: 16px; }
.rutor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rutor > div { background: var(--sand); padding: 32px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.rutor .stor { font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.rutor .liten { font-size: 12px; color: var(--dim); letter-spacing: .05em; }
.rutor a { text-decoration: none; }

/* Länkraden och sidfoten */
.lankrad { display: flex; flex-wrap: wrap; gap: 20px; padding: 28px 24px; background: var(--sand); font-size: 13px; }
.lankrad a { color: var(--text2); }
.sidfot { background: var(--sand); width: 100%; padding-top: 24px; }
.sidfot .inne { display: flex; justify-content: space-between; align-items: center; padding: 64px var(--sidmarg); flex-wrap: wrap; gap: 32px; }
.fot-logga { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 8px; }
.fot-copy { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.fot-smatt { font-size: .6rem; color: var(--dim2); letter-spacing: .04em; }
.fot-smatt + .fot-smatt { margin-top: 2px; }
.fot-smatt a { color: inherit; }
.fot-lankar { display: flex; gap: 48px; flex-wrap: wrap; }
.fot-lankar a { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); text-decoration: none; transition: color .2s; }
.fot-lankar a:hover { color: var(--ink); }

/* Undersidor: kontakt, integritet och 404 */
.sida { padding: 96px var(--sidmarg) var(--sektion); }
.sida .inne { max-width: var(--max); margin: 0 auto; }
.sida h1 { font-size: var(--h2-sektion); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; line-height: 1.08; margin-bottom: 24px; }
.sida .ingress { font-size: var(--ingress); line-height: 1.65; color: var(--text2); max-width: 640px; }
.sida-galler { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--galler-gap); margin-top: 64px; }
.formular { grid-column: span 7; background: var(--vit); padding: 48px; display: flex; flex-direction: column; gap: 20px; }
.formular label, .formular legend { display: block; font-size: var(--etikett); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.formular input, .formular select, .formular textarea { display: block; width: 100%; margin-top: 8px; background: var(--bg); border: 1px solid var(--linje); border-radius: 0; color: var(--ink); padding: 14px 16px; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--ink); background: var(--vit); }
.formular textarea { min-height: 140px; resize: vertical; }
.formular fieldset { border: 0; display: flex; flex-direction: column; gap: 20px; }
.formular legend { margin-bottom: 4px; color: var(--dim); }
.rad2, .rad3 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rad3 { grid-template-columns: 1fr 1fr 1fr; }
.formular .knapp-mork { align-self: flex-start; }
.hjalp { font-size: 12px; color: var(--dim); letter-spacing: .05em; line-height: 1.6; }
.sida .annat { grid-column: span 5; min-height: 0; justify-content: flex-start; }
.annat .mail { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.prosa { max-width: 760px; }
.prosa h2 { font-size: var(--liten); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 48px 0 12px; display: flex; align-items: center; gap: 12px; }
.prosa h2::before { content: ""; width: 8px; height: 8px; background: var(--ink); flex-shrink: 0; }
.prosa p, .prosa ul { font-size: var(--bryd); line-height: 1.7; color: var(--text2); padding-left: 20px; border-left: 2px solid var(--linje); }
.prosa p + p { margin-top: 12px; }
.prosa ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.prosa a { color: var(--ink); text-underline-offset: 3px; }
.fel { text-align: center; }
.fel .ingress { margin: 0 auto 40px; }

/* Mobil och smal padda (Glasea byter till samma uppställning under 768 px) */
@media (max-width: 900px) {
  .filosofi .inne, .om .inne { grid-template-columns: 1fr; gap: 64px; }
  .bildruta { margin-right: 48px; }
  .formular, .sida .annat { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  :root { --sidmarg: 20px; }
  .nav { gap: 12px; }
  .nav .vanster, .nav .hoger { gap: 12px; }
  .meny { left: 0; right: 0; min-width: 0; }
  .pil { display: none; }
  .hjalte .teckning { display: none; }
  .flikar .namn { display: none; }
  .flikar .nr { display: block; }
  .flikar .rad { gap: 12px; }
  .sortiment, .om { padding-top: 96px; padding-bottom: 96px; }
  .sek-huvud { margin-bottom: 40px; }
  .s4, .s5, .s7, .s8 { grid-column: 1 / -1; }
  .kort, .kort.hog { height: 420px; }
  .kort .etikett { left: 24px; right: 24px; bottom: 32px; }
  .annat { padding: 48px 24px; min-height: 0; }
  .kort h3, .annat h3 { font-size: 28px; }
  .filosofi { padding-top: 96px; padding-bottom: 128px; }
  .svart-ruta { width: 180px; height: 180px; right: -48px; bottom: -40px; padding: 24px; }
  .svart-ruta p { font-size: 1.125rem; }
  .knapp-gra { margin-top: 48px; padding: 18px 32px; }
  .matt .ruta { padding: 56px 24px; }
  .rutor { gap: 12px; }
  .rutor > div { padding: 24px 12px; }
  .rutor .stor { font-size: 28px; }
  .sidfot .inne { padding: 48px 24px; align-items: flex-start; flex-direction: column; }
  .fot-lankar { gap: 16px 32px; }
  .sida { padding-top: 64px; padding-bottom: 96px; }
  .formular { padding: 28px 20px; }
  .rad2, .rad3 { grid-template-columns: 1fr; }
}
.prosa .ingress { padding-left: 0; border-left: 0; }