/* ss-header: headerns utseende som ren CSS i sidhuvudet, så att sökruta, logga och flaggor är rätt från
   första sidritningen. Ersätter ss-header.js (bokmärkets inline-stilar och polling), som gav ett synligt
   hopp från Askås original till den nya designen. Laddas före övriga ss-filer via ss_release_head.tt. */
@keyframes aiBtnSweep {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.cm {
  margin-top: 0 !important;
}
/* Mobil/surfplatta: headerns innerbredd som när main.css/ace.css laddats (sent); annars smalnar sökrutan av efteråt. */
@media screen and (max-width: 64rem) {
  .header > .wrap {
    max-width: calc(100vw - 1em) !important;
  }
}
/* Mobilheaderns faktiska höjd: promobar 30 px + header 98 px (sökraden 40 px + 2 px gradientram). */
@media screen and (max-width: 64rem) {
  body:not(:has(.Kassan)) .dummy-header {
    height: 128px !important;
  }
}
@media only screen and (min-width: 46.91rem) {
  .iconbadge.bestItest {
    width: 4.5rem;
    height: 4.5rem;
  }
}
@media only screen and (min-width: 64.01rem) {
  .iconbadge.bestItest {
    width: 6rem;
    height: 6rem;
  }
}

/* Sökrutan: rundad gradientram, vit fältyta och lila sökknapp. Alla bredder. */
#search-wrapper {
  padding: 2px !important;
  border: none !important;
  border-radius: 28px !important;
  background: linear-gradient(to right, #ff005c, #960044) !important;
}
#search-wrapper form {
  background: #fff !important;
  border: none !important;
  border-radius: 26px !important;
  overflow: hidden !important;
}
#search-wrapper .LSS_Container {
  position: relative;
  height: 48px !important;
  background: transparent !important;
  border: none !important;
}
#search-wrapper .LSS_Input {
  background: transparent !important;
  border: none !important;
}
#search-input {
  height: 48px !important;
  font-size: 16px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}
/* Platshållartexten (från Basen via ss-content.js) visas först när rätt text är satt, så att Askås standardtext inte
   syns och byts. Utan skript visas standardtexten efter 2,5 s (animationen sätter färgen). */
@property --ss-ph {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@keyframes ss-ph-reveal {
  to {
    --ss-ph: #888;
  }
}
#search-input {
  --ss-ph: transparent;
  animation: ss-ph-reveal 0s 2.5s forwards;
}
#search-input[data-ss-ph] {
  --ss-ph: #888;
  animation: none;
}
#search-input::placeholder {
  color: var(--ss-ph) !important;
  opacity: 1 !important;
}
/* Sökknappen själv bär färg och ikon i alla bredder. Selektorn slår ATM-taggens #search-wrapper input[type="submit"]
   {background:transparent!important}; temats dekor .LSS_Input::after (45×40 px) döljs så att inget halvstort block syns. */
#search-wrapper .LSS_Input::after {
  display: none !important;
}
#search-wrapper input.Sokknapp[type="submit"],
#search-wrapper .Sokknapp {
  -webkit-appearance: none;
  appearance: none;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 6;
  box-sizing: border-box !important;
  width: 48px !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer;
  background: #960044
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
    center/20px 20px no-repeat !important;
}
/* Lägre sökrad när skärmen är låg (högst 800 px synlig höjd, t.ex. laptops 1366×768 och 1440×900) och alltid i
   mobil/surfplatta: 44 px i stället för 52. Fråga Smartis-knappen (ATM-taggens .sg-ai-pill) skalas i samma proportion. */
@media (max-width: 64rem), (max-height: 800px) {
  #search-wrapper .LSS_Container,
  #search-input {
    height: 40px !important;
  }
  #search-wrapper .sg-ai-pill {
    min-height: 30px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 12px !important;
    gap: 6px;
  }
  #search-wrapper .sg-ai-pill img {
    width: 14px !important;
    height: 14px !important;
    padding: 2px !important;
  }
}

/* Loggans bredd är känd innan bilden laddats (viewBox 392 × 55,9), så sökrutan flyttar sig inte när den kommer. */
.header .logo img {
  aspect-ratio: 392/55.9;
}

/* Desktop: logga vänster, sökruta i mitten, ikoner höger. CSS-ordning gäller även om Askås levererar
   headermallen med sökrutan före loggan, så headern ser likadan ut från första ritningen. */
@media (min-width: 64.01rem) {
  .header > .wrap > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .header > .wrap > .row > .header-L {
    display: none !important;
  }
  /* Loggans slutliga storlek direkt (samma som ss-nav.css ger efter klassen ss-logo-sized, som sätts först när
    bilden laddats): bredden följer höjden, inte kolumnens bredd. */
  .header > .wrap > .row > .logo {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
  }
  .header > .wrap > .row > .logo a {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: calc(
      1.1 * 7.01 * clamp(34px, calc(34px + (100vw - 1025px) * 11 / 375), 45px)
    ) !important;
  }
  .header > .wrap > .row > .logo img {
    width: auto !important;
    max-width: none !important;
    transform-origin: left center;
  }

  /* Logga och ikoner får samma fasta bredd: loggans färdiga bredd (ss-nav.css skalar höjden 34–45 px,
    bredden är 1,1 × 7,01 × höjden + kolumnens luft). Hjärtat, antalet i varukorgen och loggans
    storleksanpassning kommer efter första ritningen men ändrar då inte sökrutans plats eller bredd,
    och sökrutan hamnar exakt mitt på sidan. Längre innehåll (t.ex. andra språk) får växa (min-width). */
  /* Samma maxbredd som ace.css ger när den laddats (sent, i sidfoten); annars växer headern 2em efteråt. */
  .header > .wrap {
    max-width: 1620px !important;
  }
  .header > .wrap > .row {
    --ss-side: calc(
      7.711 * clamp(34px, calc(34px + (100vw - 1025px) * 11 / 375), 45px) + 28px
    );
  }
  .header > .wrap > .row > .logo {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: var(--ss-side) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  .header > .wrap > .row > .sokrutan {
    order: 2 !important;
    display: flex !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: clamp(8px, 1.5vw, 24px) !important;
    padding-right: clamp(8px, 1.5vw, 24px) !important;
  }
  .header > .wrap > .row > .sokrutan .sokrutanWrap {
    position: relative !important;
    width: var(--ss-search-width, 100%) !important;
    max-width: 800px !important;
  }
  .header > .wrap > .row > .sokrutan #search-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
  }
  .header > .wrap > .row > .sokrutan #suggest-area {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 5px !important;
  }
  .header > .wrap > .row > .header-R {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: var(--ss-side) !important;
    min-width: max-content !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  .header > .wrap > .row > .header-R > * {
    flex-shrink: 0 !important;
  }
}

/* Språkflaggan i header och mobilmeny: Askås skriver språkkoden med versaler (data-lang="SV") medan temats
   regler använder gemener. "i" gör matchningen skiftlägesokänslig. Sökvägen följer temat filen ligger i. */
.country-icon[data-lang="sv" i] i,
.country-icon[data-lang="se" i] i {
  background-image: url(../bilder/flags/se.svg);
}
.country-icon[data-lang="en" i] i {
  background-image: url(../bilder/flags/eu.svg);
}
.country-icon[data-lang="no" i] i,
.country-icon[data-lang="nb" i] i {
  background-image: url(../bilder/flags/no.svg);
}
.country-icon[data-lang="dk" i] i,
.country-icon[data-lang="da" i] i {
  background-image: url(../bilder/flags/dk.svg);
}
.country-icon[data-lang="fi" i] i {
  background-image: url(../bilder/flags/fi.svg);
}

/* Desktop med låg skärm (högst 800 px synlig höjd): hela headern blir 8 px lägre tillsammans med sökraden.
   Headerraden 84 → 76 px (kompakt 74 → 66), menyn börjar vid 121 px i stället för 129 (flyttas fortfarande upp
   10 px i kompakt läge) och platshållaren under headern 183 → 175 px. */
@media screen and (min-width: 64.01rem) and (max-height: 800px) {
  #header .header {
    height: 76px !important;
  }
  .header-unstick #header .header {
    height: 66px !important;
  }
  #main-menu {
    top: 121px !important;
  }
  body:not(:has(.Kassan)) .dummy-header {
    height: 175px !important;
  }
}