/* 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:.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:-.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:.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:.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}