/* ss-nav: huvudmenyn på desktop är alltid en rad (Priority+, r48 runda 9). Mer öppnar temats
   egen megamenypanel. "Allt inom"-regeln (Poppins medium) är borttagen på Sebastians korr
   2026-09-25 – temats stil gäller. Logiken och mätningen beskrivs i script/ss-nav.js. Allt som
   rör Mer-knappen gäller bara ≥ 64.01rem (temats desktopbrytpunkt); mobil/tablet-menyn (canvas-left) påverkas inte.

   Före första mätningen (klassen ss-nav-ready saknas) hålls listan redan på en rad utan
   radbrytning, med överskottet avklippt åt höger (safe center), så headern inte först ritas med
   två rader och sedan hoppar ihop. Skulle ss-nav.js inte köra alls släpper animationen
   ss-nav-fallback greppet efter 4 s och temats vanliga radbrytning gäller igen – inga knappar
   blir då permanent oåtkomliga. OBS: temat laddar den här filen asynkront i sidfoten
   (media="print" + onload), så för ett helt flimmerfritt första sidritande behöver samma
   förregel även ligga i den inlinade kritiska CSS:en i head (se rapporten för r48 runda 9). */
@keyframes ss-nav-fallback {
  to {
    flex-wrap: wrap;
    overflow: visible;
    justify-content: center;
  }
}
@media (min-width: 64.01rem) {
  #main-menu .main-menu-wrap > ul:not(.ss-nav-ready) {
    flex-wrap: nowrap;
    justify-content: safe center;
    overflow: hidden;
    animation: ss-nav-fallback 0s 4s forwards;
  }
  #main-menu .main-menu-wrap > ul.ss-nav-ready {
    flex-wrap: nowrap;
    justify-content: safe center;
  }
  #main-menu .main-menu-wrap > ul > li {
    flex-shrink: 0;
  }
  #main-menu .main-menu-wrap > ul > li.ss-nav-overflow {
    display: none !important;
  }

  /* Mer-knappen: syns bara när något ligger i den (och tillfälligt under mätningen). Ingen egen
    position – då räknas temats megamenypanel (position:absolute; left:0; right:0) mot hela
    menyraden, precis som för kategorierna. */
  #main-menu .main-menu-wrap > ul > li.ss-nav-more {
    display: none;
  }
  #main-menu .main-menu-wrap > ul > li.ss-nav-more.ss-nav-more--active,
  #main-menu .main-menu-wrap > ul.ss-nav-measuring > li.ss-nav-more {
    display: block;
  }
  /* Grundvärden = temats .main-menu-wrap .lvl1 > a; ss-nav.js skriver över dem med grannknappens
    uppmätta värden så att Mer alltid följer temat (t.ex. padding 0.6em → 1em vid 1620 px). */
  #main-menu .ss-nav-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0 0.6em;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    font-family: "BrownLLWeb-Bold", fallback, sans-serif;
    font-weight: 900;
    font-size: 15px;
    line-height: 50px;
    color: var(--base-color1, #141414);
    -webkit-font-smoothing: initial;
    -moz-osx-font-smoothing: initial;
  }
  /* Samma rosa markeringslinje som temats öppna kategorier (.lvl1.delayedHover > a::after). */
  #main-menu .ss-nav-more-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.2em;
    background-color: var(--cta-background2, #ff005c);
    opacity: 0;
  }
  #main-menu .ss-nav-more.delayedHover > .ss-nav-more-btn::after {
    opacity: 1;
  }
  #main-menu .ss-nav-more-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }
  /* Temats pil (Rebusikon_Pil pekar snett uppåt höger). Utgår från dragspelsradernas pil i hjälppanelen
    (rotate45): stängd = 90° (pekar ned-höger ↘), öppen/hovrad = 135° (pekar rakt ned ↓). Korr
    2026-09-25 – tidigare nedåt/uppåt, sedan 45° (som med den här ikonen pekar rakt åt höger). */
  #main-menu .ss-nav-more-icon {
    display: inline-block !important;
    flex: 0 0 auto;
    width: 0.55em;
    height: 0.55em;
    fill: currentColor;
    transform: rotate(90deg);
    transition: transform 200ms ease-in-out;
  }
  #main-menu .ss-nav-more.delayedHover .ss-nav-more-icon {
    transform: rotate(135deg);
  }
}
@media (min-width: 64.01rem) and (prefers-reduced-motion: reduce) {
  #main-menu .ss-nav-more-icon {
    transition: none;
  }
}
@media (min-width: 64.01rem) {
  /* Panelen är temats egen megameny (li.lvl1.have_children.delayedHover > ul.child-ul, rutnät med
    fem kolumner). Två avvikelser: varje överflyttad kategori får en egen kolumn (temats
    nth-child-regler lägger annars upp till åtta lvl2 under varandra i första kolumnen, eftersom
    kategorierna i temat är enradiga), och underkategorierna (lvl3) visas direkt i stället för
    att fällas ut med pilen. */
  #main-menu .ss-nav-more > ul.ss-nav-more-list > li.ss-nav-more-group {
    grid-column: auto;
    grid-row: auto;
  }
  #main-menu .ss-nav-more > ul.ss-nav-more-list > li.ss-nav-more-group > ul {
    display: block;
    width: 100%;
  }
  #main-menu .ss-nav-more-heading > a {
    cursor: default;
    text-decoration: none !important;
  }
  /* Korr 2026-09-25: panelens höjd följer innehållet. Temats kategoripaneler har en fast
    min-height:calc(330px + 2.5rem) (main.css, .main-menu-wrap li.lvl1.have_children > ul) så att
    rader och menypuffar (280 px höga bilder) linjerar – Mer har inga puffar och bara några rader,
    så bara Mer-panelen släpps. Temats padding (4.8rem upptill för rubriken, 2.5rem nedtill) står kvar. */
  #main-menu .main-menu-wrap li.ss-nav-more > ul.ss-nav-more-list {
    min-height: 0;
  }
  /* Temats mörka bakgrund (i.arrow::after, top:330px) börjar i stället vid Mer-panelens nederkant;
    ss-nav.js mäter och sätter --ss-nav-shade-top när panelen öppnas. */
  #main-menu .main-menu-wrap li.ss-nav-more > .arrow::after {
    top: var(--ss-nav-shade-top, 330px);
  }
}
/* Temats kritiska CSS reserverar två menyrader mellan 64.01rem och 1284px
   (.dummy-header{height:233px}, i övrigt 183px). När ss-nav.js har lagt menyn på en rad
   ska platshållaren ha samma höjd som vid en rad, annars blir det ett tomt band under menyn. */
@media screen and (min-width: 64.01rem) and (max-width: 1284px) {
  #main-menu:has(.main-menu-wrap > ul.ss-nav-ready) ~ .dummy-header {
    height: 183px;
  }
}
/* Korr 2026-09-25: loggan vid låg desktopupplösning. Temats kritiska CSS ger loggan fast höjd
   45px (.logo img, ca 316 px bred), vilket mellan desktopbrytpunkten och ~1400 px trängde ihop
   sökfältet och klippte "Varukorg" i högerkanten (uppmätt 1025 px: högerdelen slutade på 1092 px).
   Höjden skalas linjärt från 26px (ca 182 px bred) vid 1025 px till temats 45px vid 1400 px;
   bredden följer bildens proportioner. Vid utskrollad (kompakt) header gäller temats 35px som tak. */
@media screen and (min-width: 64.01rem) and (max-width: 1399.98px) {
  #header .header .logo img {
    height: clamp(34px, calc(34px + (100vw - 1025px) * 11 / 375), 45px);
  }
  .header-unstick #header .header .logo img {
    height: min(
      35px,
      clamp(34px, calc(34px + (100vw - 1025px) * 11 / 375), 45px)
    );
  }
}
/* Mer finns aldrig i mobil/tablet-menyn. */
@media (max-width: 64rem) {
  #main-menu li.ss-nav-more {
    display: none !important;
  }
}

/* Fast plats för loggan, även när sticky-headern animerar bildens höjd.
   Bildens proportion sätts en gång vid load; allt storleksarbete sker i CSS. */
@media screen and (min-width: 64.01rem) {
  /* Menyn börjar vid 129px och flyttas upp 10px i kompakt läge. Sök-/loggraden
    börjar vid 45px och måste fylla hela sträckan, oavsett loggans bildhöjd. */
  /* Höjden och menyn animeras i olika renderingslager. Vid snabb riktningsväxling kan
    en bildruta skilja dem åt. Låt samma bakgrund täcka hela deras 10px rörelse,
    utan scrolllyssnare, layoutändring eller klickyta ovanpå menyn. */
  #header .header {
    height: 84px;
    display: flex;
    align-items: center;
    transition: height 500ms ease-in-out;
    box-shadow: 0 11px 0 var(--base-background2, #fffaf5);
  }
  #header .header > .wrap {
    width: 100%;
  }
  .header-unstick #header .header {
    height: 74px;
  }
  #header .header .logo.ss-logo-sized {
    display: flex;
    align-items: center;
    text-align: left;
    flex: 0 0 auto;
    max-width: none;
    width: auto;
  }
  #header .header .logo.ss-logo-sized a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: calc(
      1.1 * var(--ss-logo-ratio) *
        clamp(34px, calc(34px + (100vw - 1025px) * 11 / 375), 45px)
    );
  }
  #header .header .logo.ss-logo-sized img {
    width: auto;
    max-width: none;
    transform-origin: left center;
  }
}

/* Smal desktop: sökfältet får krympa inom raden, varukorgen behåller hela sitt antal. */
@media (min-width: 64.01rem) {
  #header .sokrutan {
    min-width: 0;
    box-sizing: border-box;
  }
  #header .header-R {
    flex-shrink: 0;
    box-sizing: border-box;
  }
  #header #kundvagn {
    white-space: nowrap;
  }
}

@media (min-width: 64.01rem) and (max-width: 90rem) {
  #header .sokrutan,
  #header .sokrutanWrap,
  #header #search-wrapper {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #header .sokrutan {
    flex: 1 1 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #header .header-R {
    padding-left: 0 !important;
  }
}

@media (min-width: 90.01rem) {
  #header .sokrutanWrap {
    transform: translateX(var(--ss-search-offset, 0px));
  }
}

/* Behåll sökutrymme i smal desktop. Flaggan och varukorgens antal är kvar. */
@media (min-width: 64.01rem) and (max-width: 80rem) {
  #header .country-icon > .text {
    display: none !important;
  }
  #header .sokrutan {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

#main-menu li[hidden] {
  display: none !important;
}
#main-menu .ss-extra-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}