/* ss-help: samlad kundhjälp – serviceingång i header/mobilmeny, sidfotslänkar (P6.4).
   Header-triggern och mobilradens mått speglar Mina favoriter (ss-shopping.css) rakt av, så
   Hjälp ser ut och beter sig som sin granne i stället för att sticka ut (Sebastians korr
   2026-09-24). */
/* Korr 7 (2026-09-24): height/line-height sätts INTE här längre för desktop-läget – ett
   hårdkodat 44px gjorde att ikonen (header-R centrerar barnen, align-items:center) hamnade
   ~5–6px högre än de 33px höga grannarna (#kundvagn/.country-icon, uppmätt live 1440 px).
   (Ersatt i Korr 8 nedan: höjden kopieras inte längre från varukorgen – grannen som ska matchas
   är profilikonen, och knappen byggs nu likadant som den i stället.) */
/* Korr 8 (2026-09-25, uppmätt i headless Chrome mot live-sidan 1440 px, se
   verktyg/hjalp/matning-2026-09-25.md): knappen byggs nu som profilikonens .loginmypage – ett
   block (flex-barn) med ärvd typografi från header-R (15px/33px), utan egen padding, höjd eller
   marginal. Ikonen (<i>) får profilikonens typsnitt/storlek/vikt (kopieras i ss-help.js) och
   svg:n sänks lika mycket som ikonfontens nedstapel (6,25 % av em, selection.json "baseline":
   6.25) så att den täcker exakt samma em-ruta som profilglyfen. Då blir radboxen – höjd 37 px,
   mitt och baslinje – identisk med profilens av sig själv. Temats generella button-regel
   (main-min.css: height/line-height calc(1em*2.5), padding 0 1em, font-weight 800) nollas här. */
.ss-header-help {
  display: block !important;
  background: none !important;
  color: var(--base-color1, #141414) !important;
  padding: 0 !important;
  margin: 0;
  width: auto !important;
  height: auto !important;
  min-height: 0;
  border: 0 !important;
  border-radius: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
  text-align: left;
  flex: 0 0 auto;
}
/* Korr 5 (2026-09-24): ljusare hover som grannarna – knappen bär klassen "hoveropacity"
   (satt i ss-help.js), samma klass som profilikonen/varukorgen redan använder i main-min.css
   (transition + opacity:.7 vid hover). Ingen egen transition/hover-färg behövs här längre.
   :focus-visible läggs till separat eftersom temats hoveropacity-regel bara täcker :hover. */
.ss-header-help:focus-visible {
  opacity: 0.7;
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.ss-header-help i {
  font-size: 18px;
  visibility: visible !important;
}
.ss-header-help svg {
  overflow: visible;
}
/* Ikon-only i header-R på desktop (som Mina favoriter) – texten syns bara i mobilmenyn. */
.ss-help-label {
  display: none;
  font-size: 14px;
  white-space: nowrap;
}
/* Korr 6 (2026-09-24): samma horisontella avstånd överallt som Mina favoriter faktiskt använder
   – .ss-header-favorites har fast margin-left:12px (ss-shopping.css), inte den uppmätta
   padd-md-L-paddingen från Korr 5 (som gav ett annat, större värde och synligt olika avstånd i
   header-R, se Sebastians skärmdump). Landväljaren (.country-icon) får margin-right:12px
   OVILLKORLIGT – den enda källan till gapet mellan land och Hjälp, så "Norge"/"Sverige" aldrig
   ligger dikt an mot profilikonen även på de marknader där hjälpikonen saknas. Hjälpikonen får
   bara margin-right (mot profilen) – margin-left hade dubblat gapet mot landväljarens egen
   margin-right, eftersom flexbox inte slår ihop marginaler som block gör. (Värdet 12px ersatt
   i Korr 8 nedan.) */
/* Korr 8 (2026-09-25): uppmätt bläckavstånd (Sebastians skärmdump, samma i mätningen) var
   land→Hjälp 21,5 px, Hjälp→profil 28 px, profil→favorit 19 px – knappens egen padding 0 8px
   låg ovanpå marginalerna. Paddingen är borta (se basregeln ovan) och avståndet sätts som EN
   marginal per mellanrum: landväljarens margin-right och hjälpknappens margin-right (ingen
   margin-left – flexbox slår inte ihop marginaler, så det hade dubblat gapet). Värdet är det
   som ger samma SYNLIGA avstånd som grannparet profil→favorit: favoriternas margin-left 12px +
   padding-left 8px = 20 px box, men hjärtglyfens sidoluft gör bläckavståndet 19 px. Med 19 px
   här blir alla tre 19–19,5 px uppmätt (20 px gav 20,5/20/19). */
@media (min-width: 64.01rem) {
  .header-R > .country-icon {
    margin-right: 19px;
  }
  .header-R > .ss-header-help {
    margin-right: 19px;
  }
}
/* Korr 4 (2026-09-24): desktop-ordningen i header-R ska bli land → Hjälp → profil → varukorg.
   .header-R har klassen "flexbox" (display:flex, se main-min.css) så ordningen styrs med CSS
   order i stället för att flytta noder i DOM:en – det rör inte landväljarens egen popup.
   Övriga barn (.loginmypage, .ss-header-favorites, #kundvagn) saknar egen order (initialvärde 0)
   och hamnar därför kvar efter i sin befintliga inbördes ordning. */
@media (min-width: 64.01rem) {
  .header-R > .country-icon {
    order: -2;
  }
  .header-R > .ss-header-help {
    order: -1;
  }
}
@media (min-width: 64.01rem) {
  .header-R > .ss-header-help i {
    display: inline !important;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--ss-help-icon-size, 18px) !important;
    font-family: var(--ss-help-icon-font, inherit) !important;
    font-weight: var(--ss-help-icon-weight, inherit) !important;
    line-height: inherit !important;
  }
  .header-R > .ss-header-help svg {
    display: inline;
    vertical-align: -0.0625em;
  }
}

@media (max-width: 64rem) {
  /* Radhöjd/padding hårdkodade lägre än menyradens (~53px) så Hjälp och service tar mindre
    plats och matchar Mina favoriter (Sebastians korr 2026-09-24) – --ss-help-menu-row-height
    används inte längre för höjden, bara pad-x kvar som indrag mot kategoriraderna. */
  #main-menu .ss-menu-help > .ss-header-help {
    display: flex !important;
    align-items: center;
    gap: 8px;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    line-height: 1.4 !important;
    padding: 8px var(--ss-help-menu-pad, 24px) !important;
    text-align: left;
    font: inherit !important;
  }
  #main-menu .ss-help-label {
    display: inline !important;
    padding: 0 !important;
    opacity: 1 !important;
    color: inherit !important;
    font-size: 14px !important;
  }
  #main-menu .ss-menu-help i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: static !important;
    top: auto !important;
    width: 24px !important;
    height: 1em !important;
    flex: 0 0 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    border-radius: 50%;
    background: none;
    font-size: 18px !important;
  }
  #main-menu .ss-menu-help i::before {
    position: static !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #main-menu .ss-menu-help .ss-help-label {
    flex: 0 1 auto !important;
    text-align: left !important;
    margin: 0 !important;
  }
}

/* Panelinnehåll (samma sidopanel-mekanik som varukorg/favoriter, se createDrawer i ss-shopping.js). */
.ss-help-drawer-body {
  padding: 0.5rem 0;
}
.ss-help-intro {
  margin: 0 0 1rem;
  font-size: 15px;
  line-height: 1.65;
}
/* Korr 7 (2026-09-24): dragspel i stället för raka länkar (Sebastians korr) – posterna vecklas ut
   i sidopanelen, för bort inte längre besökaren från sidan man var på.
   Korr 8 (2026-09-25): raderna är exakt som mobilmenyns kategorirader i temat (main-min.css):
   typsnitt/vikt ".main-menu-wrap .lvl1>a{font-family:BrownLLWeb-Bold;font-weight:900}",
   storlek ".main-menu.menu ul li.lvl1{font-size:18px}", radhöjd body 1.65, luft
   ".main-menu.menu ul li a{padding:1em}", avdelare ".main-menu.menu ul li{border-bottom:1px solid
   var(--border-color1)}" kant till kant (listan bryter ut ur panelens 1rem-padding som menyn går
   ut till canvasens kant), och pilens ruta ".main-menu.menu .arrow{width:54px;padding:1em;
   padding-top:1.3em;padding-bottom:.7em}". Ingen färg- eller bakgrundsändring vid hover/fokus
   (mobilmenyn har ingen) – temats generella "button:hover{background:var(--cta-background2)}"
   nollas uttryckligen. Tangentbordsfokus får temats egen fokusring (main-min.css:
   "body:not(.using-mouse) *:focus{outline:2px solid #a56add}"). */
.ss-help-links {
  list-style: none;
  margin: 0 -1rem 1.5rem;
  padding: 0;
}
.ss-help-item {
  margin: 0;
  border-bottom: 1px solid var(--border-color1, #fbf0e4);
}
.ss-help-item-heading {
  margin: 0;
  font: inherit;
}
.ss-help-item-toggle,
.ss-help-item-toggle:hover,
.ss-help-item-toggle:focus,
.ss-help-item-toggle:active {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  color: var(--base-color1, #141414) !important;
  opacity: 1;
  font-family: "BrownLLWeb-Bold", fallback, sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: initial;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ss-help-item-toggle > span {
  flex: 1 1 auto;
  padding: 1em;
}
.ss-help-item-toggle:focus-visible {
  outline: 2px solid #a56add;
  outline-offset: -2px;
}
/* Pilrutan har radens brödtypsnitt (i temat ärver .arrow li:ns poppinsregular 400, inte länkens
   BrownLLWeb-Bold) – annars hamnar pilens baslinje 2 px lägre än i menyn (uppmätt). */
.ss-help-item-arrow {
  flex: 0 0 54px;
  width: 54px;
  box-sizing: border-box;
  padding: 1em;
  padding-top: 1.3em;
  padding-bottom: 0.7em;
  text-align: center;
  font-style: normal;
  font-family: "poppinsregular", sans-serif;
  font-weight: 400;
}
/* Pilen: temats grundvinkel 45° (pekar höger) och 135° när posten är öppen (pekar nedåt), samma
   regler som "#main-menu li>.arrow .icon" / "#main-menu li.active>.arrow .icon". Fyllningen
   lämnas som i temat (ingen fill-regel). Rotationen animeras med samma tid och kurva som höjden. */
.ss-help-item-arrow .icon {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  transition: transform 200ms ease-in-out;
}
.ss-help-item-toggle[aria-expanded="true"] .ss-help-item-arrow .icon {
  transform: rotate(135deg);
}
/* Höjdanimation: grid-template-rows 0fr ↔ 1fr, 200 ms ease-in-out (temats kurva, samma som
   .hoveropacity och .lvl3-wrapper a i main-min.css). hidden-attributet ligger kvar för
   semantiken men panelen hålls som grid; visibility:hidden (fördröjd till efter
   stängningsanimationen) tar bort innehållet ur tabbordning och skärmläsare när posten är stängd. */
.ss-help-item-panel {
  display: grid;
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 200ms ease-in-out,
    visibility 0s linear 0s;
}
.ss-help-item-panel[hidden] {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 200ms ease-in-out,
    visibility 0s linear 200ms;
}
.ss-help-item-panel-inner {
  min-height: 0;
  overflow: hidden;
}
.ss-help-item-panel p {
  margin: 0;
  padding: 0 18px 10px;
  font-size: 15px;
  line-height: 1.65;
}
.ss-help-item-more {
  display: inline-block;
  margin: 0 18px 18px;
  color: var(--theme-color1, #ff005c);
  text-decoration: underline;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.65;
}
/* Butikskorten (ss-store-contacts, ss-shopping.css) saknar egen sidoluft – bara .ss-help-item-panel
   p ovan ger 18px, så adressen (en <p>) hamnade indragen mot sina egna syskon (h3/telefonlänk),
   som stod kvar i kant. Ger hela blocket samma 18px som resten av panelen och nollar toppgapet
   (24px+16px i ss-shopping.css) som bara är till för att skilja från föregående innehåll i
   Lagersaldo-panelen – här är butikerna det enda innehållet i sin egen rad. */
.ss-help-item-panel .ss-store-contacts {
  margin-top: 0;
  padding: 0 18px 10px;
}
.ss-help-item-panel .ss-store-contacts p {
  padding: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ss-help-item-panel,
  .ss-help-item-panel[hidden],
  .ss-help-item-arrow .icon {
    transition: none;
  }
}
.ss-help-contact {
  margin: 0 0 1.5rem;
  padding: 0;
}
.ss-help-contact p {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.65;
}
.ss-help-contact a {
  color: inherit;
  text-decoration: underline;
}
/* "Alla vanliga frågor": samma rosa knapp som tidigare men utan egen hover-färg (Korr 8). */
.ss-help-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--theme-color1, #ff005c);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  box-sizing: border-box;
}

/* Editorial line breaks are preserved in published help copy. */
.ss-help-intro,
.ss-help-item-panel-inner > p {
  white-space: pre-line;
}