/* ==========================================================================
   Team8 – global.css  (EFFEKT-LAGER)
   --------------------------------------------------------------------------
   Här ligger BARA det Bricks inte kan uttrycka som en inställning:
   pseudo-element, gradient, blur/filter, keyframes, alpha-skuggor och
   hover som styr BARNEN i ett kort.

   Allt annat – typografi, färger, spacing, layout, ramar, radie, samt
   hover/transition på elementet SJÄLVT – ligger som native settings på
   t8-klasserna i Bricks. Lägg inget här som Bricks redan gör.
   ========================================================================== */

/* clip, inte hidden: hidden gör body till scrollbehållare och då fungerar
   ingen position:sticky (klistrad header/ankarmeny). clip döljer sidledsspill
   på samma sätt utan den bieffekten. (team8 2026-09-22) */
html, body { overflow-x: clip; }

/* Ankarlänkar (t.ex. #telefoni på Affärsområden): landa under den klibbiga
   headern (84px) i stället för bakom den. Ingen Bricks-inställning för html. */
html { scroll-padding-top:100px; scroll-behavior:smooth; }

::selection      { background:#F24162; color:#fff; }
::-moz-selection { background:#F24162; color:#fff; }

/* ---- Eyebrow: strecket före texten (pseudo-element) ----------------------
   background:currentColor – strecket ärver textens färg och kan därför aldrig
   avvika från den. Tidigare fanns en egen regel för den ljusa varianten, och
   då kunde streck och text hamna i olika rosa när modifierarklassen förlorade
   mot basklassen på texten men vann på pseudot.

   margin-right ersätter column-gap: Bricks skriver inte ut gap på
   text-element, så luften mot texten måste sitta på strecket självt.      */
.t8-eyebrow-row::before {
  content:""; width:30px; height:2px; background:currentColor;
  flex:0 0 auto; margin-right:12px;
}

/* ---- Affärsområdes-puff: hover färgar om BARNEN -------------------------
   OBS klassen upprepad i selektorn nedan – avsiktlig härdning, inte en fix.
   Bricks skriver ut globala klasser som `.t8-catcard.brxe-div` (0,2,0). En
   vanlig `.t8-catcard:hover` är också (0,2,0), så vem som vinner background
   och border-color avgörs av källordning. Det fungerar idag, men är skört.
   `.t8-catcard.t8-catcard:hover` ger (0,3,0) och vinner oavsett ordning –
   utan !important. Barn-reglerna behöver inget sådant: de är redan (0,3,0). */
.t8-catico { box-shadow:0 2px 7px rgba(3,23,33,.09); }
.t8-catcard.t8-catcard:hover { background:#25323A; border-color:#25323A; transform:translateY(-6px); box-shadow:0 22px 44px rgba(3,23,33,.22); }
.t8-catcard:hover .t8-catico { background:rgba(255,255,255,.1); color:#fff; box-shadow:none; }
.t8-catcard:hover h3 { color:#fff; }
.t8-catcard:hover .t8-small { color:rgba(255,255,255,.65); }
.t8-catcard:hover .t8-arrowbtn { background:#F24162; border-color:#F24162; color:#fff; transform:translateX(3px); }

/* ---- Kort (case/nyheter): mjuk skugga + lyft (alpha) -------------------- */
.t8-card { box-shadow:0 1px 3px rgba(3,23,33,.05); }
/* Blur 20 (inte 36): skuggan når då ~10px i sidled och ryms i sliderns
   klippyta, som bara har 9–11px slack innan grannkortet syns. Vertikalt
   finns gott om plats tack vare sliderns padding. */
.t8-card:hover { transform:translateY(-4px); box-shadow:0 12px 20px rgba(3,23,33,.14); }

/* ---- Megameny & dropdown: alpha-skugga ---------------------------------- */
.t8-mega, .t8-dropdown-panel { box-shadow:0 24px 40px rgba(3,23,33,.28); }

/* ---- Öppen megameny färgar nav-länken (Bricks sätter .brx-open) --------- */
.brxe-dropdown.brx-open .brx-submenu-toggle,
.brxe-dropdown.brx-open .t8-nav-link { color:#F24162; }

/* ---- Mobilpanelen: dragspelsraderna ------------------------------------
   Dropdown-schemat har ingen padding-, ram- eller öppen-färg-kontroll för
   knappraden (.brx-submenu-toggle). Linjen ligger under KNAPPRADEN, inte under
   hela dropdownen, så att den hamnar mellan rubrik och underlänkar när raden
   är öppen – som i designen.
   Pilens färg sätts här och INTE som iconColor på elementet: elementets
   #brxe-id-regel skulle annars slå ut den rosa öppna färgen.              */
.t8-drawer-nav .brx-submenu-toggle{
  justify-content:space-between; padding:16px 12px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.t8-drawer-nav .brx-submenu-toggle button{ color:rgba(255,255,255,.45); }
.t8-drawer-nav .brx-submenu-toggle button[aria-expanded="true"]{ color:#F24162; }

/* ---- Sökknappens SVG-ikon följer iconTypography -------------------------
   Sök-elementet har ingen storlekskontroll för ikonen, och SVG:erna ur
   Team8-setet har fast width/height 24. Storleken STÄLLS IN i Bricks
   (sökelementets iconTypography → font-size); 1em gör att ikonen följer den.
   Vanliga ikon-element behöver inte detta – de har _width/_height.          */
.brxe-search button svg { width:1em; height:1em; }

/* ---- Hero-spotlight: radial-gradient + blur + fade ---------------------- */
.t8-hero-glow{
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,65,98,.32), rgba(242,65,98,0) 68%);
  filter:blur(6px);
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
}
.t8-hero:hover .t8-hero-glow { opacity:1; }

/* ---- Roterande hero-ord --------------------------------------------------
   .t8-role sitter inuti H1:ans HTML (inte på ett eget Bricks-element), och
   Bricks genererar bara CSS för klasser som sitter på renderade element –
   därför bor den här i stället för i klassregistret.                        */
.t8-role { color:#F24162; display:inline-block; }

@keyframes t8-role-in{
  from{ opacity:0; transform:translateY(14px); filter:blur(6px); }
  to  { opacity:1; transform:translateY(0);    filter:blur(0);   }
}
.t8-role.is-in { animation:t8-role-in .5s cubic-bezier(.2,.7,.2,1); }

/* ---- Partnerlogotyper: gråskala ----------------------------------------- */
.t8-partner-row { filter:grayscale(1); opacity:.72; }

/* ---- JetEngine-listing som carousel: runda pilar ------------------------
   Pilarna är JetEngines egen markup, inte Bricks-element, så de kan bara nås
   härifrån. Gäller ALLA listing-carouseller på sajten.

   ENBART formen. Storlek och placering ägs av elementets egna inställningar
   (Arrow box size, position-fälten) – rör dem inte härifrån. Sätt varken
   margin-top eller transform: JetEngine använder margin-top för att centrera
   pilen och transform:scaleX(-1) för att vända nästa-pilen, så en egen
   transform slår ut vändningen och flyttar bara den ena pilen.

   svg i procent gör att ikonen följer med när Arrow box size ändras.       */
.jet-listing-grid__slider-icon{
  border-radius:50%;
  align-items:center; justify-content:center;
  transition:background-color .2s ease;
}
.jet-listing-grid__slider-icon svg{ width:55%; height:55%; }
.jet-listing-grid__slider-icon:hover{ background:#F24162; }

/* ---- JetEngine-listing: prickar (pagination) ----------------------------
   Två buggar i JetEngines swiper-implementation:

   1. Aktiv prick blir Swipers blå default. Elementets "Color active" skriver
      aldrig ut `--swiper-pagination-color`, och regeln lyder
      `background: var(--swiper-pagination-color, var(--swiper-theme-color))`.
      Vi sätter variabeln i stället för att överskriva regeln – då fungerar
      elementets övriga färgfält som vanligt.

   2. Prickarna hamnar en halv bredd åt vänster. Swiper sätter
      `left:50% + translateX(-50%)` för ett absolutpositionerat element, men
      JetEngine gör wrappern `position:static`. Då ignoreras `left` medan
      transformen blir kvar. Wrappern är redan flex + center, så det räcker
      att nolla transformen.                                                */
.jet-listing-grid { --swiper-pagination-color:#F24162; }
.jet-engine-swiper-pagination-wrapper { transform:none; }

/* ---- JetEngine-listing: luft runt slidern -------------------------------
   Swiper kräver overflow:hidden på .swiper för att dölja intilliggande
   slides – och klipper då även kortens hover-skugga.

   OBS specificiteten: JetEngine sätter margin/padding på slidern med en
   selektor i stil med `.jet-listing-grid .jet-listing-grid__slider.swiper-lib`
   (0,3,0). En vanlig `.jet-listing-grid__slider` (0,1,0) gör INGENTING –
   den dubblerade klassen nedan ger (0,4,0) och vinner.

   Bara VERTIKAL padding. Horisontellt går det inte: mätt på sidan är luckan
   mellan korten 20px, vilket ger 11px slack åt vänster och 9px åt höger
   innan grannkortet syns i klippytan. Breddar man mer tittar nästa kort
   fram i stället för att skuggan syns. Skuggan är i stället nedtonad så
   den ryms (se .t8-card:hover ovan).                                       */
.jet-listing-grid .jet-listing-grid__slider.swiper-lib.swiper-lib{
  padding-top:28px;
  padding-bottom:44px;
}

/* Prickarna: eget avstånd upp, så de aldrig ligger an mot korten. */
.jet-engine-swiper-pagination-wrapper{ margin-top:4px; }

/* ---- Bricks-knappar (theme style-varianter): mjuk hover ----------------- */
.brxe-button { transition:filter .15s ease; }
.brxe-button:hover { filter:brightness(.94); }

/* ---- Klickbara kort: pekare --------------------------------------------- */
/* Bara frågeraderna – i korten är det pilcirkeln som är länken, inte kortet. */
.t8-qrow { cursor:pointer; }

/* ---- Respektera "minska rörelse" ---------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  .t8-catcard:hover, .t8-card:hover, .t8-catcard:hover .t8-arrowbtn { transform:none; }
  .t8-role.is-in { animation:none; }
}

/* ==========================================================================
   FORMULÄR (Gravity Forms)
   --------------------------------------------------------------------------
   GF ritar sin egen HTML som Bricks inte kommer åt. Gäller alla formulär på
   sajten: kontaktformulären per affärsområde, Prestos beställning och Tele2 på
   Instalco. Ändra typsnitt eller färg här, inte på sidorna.
   ========================================================================== */
.gform_wrapper { font-family:Manrope, sans-serif; }
.gform_wrapper .gform_required_legend { display:none; }

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
  font-size:13px; font-weight:700; line-height:1.4; color:#25323A; margin:0 0 6px;
}
.gform_wrapper .gfield_description,
.gform_wrapper .gfield_consent_label,
.gform_wrapper .ginput_counter { font-size:13px; line-height:1.5; color:#60696F; }
.gform_wrapper .gfield_consent_label a,
.gform_wrapper .gfield_description a { color:#F24162; }
.gform_wrapper .gfield_required { color:#F24162; }

.gform_wrapper .gform_fields { row-gap:16px; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
  width:100%; font-family:Manrope, sans-serif; font-size:15px; line-height:1.4;
  color:#25323A; background:#fff; border:1px solid #E3E8EA; border-radius:10px;
  padding:13px 14px; transition:border-color .2s ease, box-shadow .2s ease;
}
.gform_wrapper textarea { min-height:112px; resize:vertical; }
.gform_wrapper ::placeholder { color:#9AA3A9; }
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline:none; border-color:#F24162; box-shadow:0 0 0 3px rgba(242,65,98,.12);
}
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] { accent-color:#F24162; width:17px; height:17px; }
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label { font-size:14px; color:#60696F; }

/* Samtycke: kryssrutan i liv med texten i stället för på egen rad. */
.gform_wrapper .ginput_container_consent {
  display:flex; align-items:flex-start; gap:10px;
}
.gform_wrapper .ginput_container_consent input[type="checkbox"] { margin-top:2px; flex-shrink:0; }
.gform_wrapper .gfield_consent_label { font-size:12px; line-height:1.5; }

/* reCAPTCHA tar mycket plats i en smal spalt. */
.gform_wrapper .ginput_recaptcha { transform:scale(.88); transform-origin:left top; }

.gform_wrapper .gform_footer { margin:22px 0 0; padding:0; }
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:Manrope, sans-serif; font-size:15px; font-weight:700; line-height:1;
  color:#fff; background:#F24162; border:0; border-radius:10px; padding:15px 26px;
  cursor:pointer; transition:background-color .2s ease;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover { background:#F76181; }
.gform_wrapper .gform_button:focus-visible { outline:2px solid #25323A; outline-offset:2px; }
.gform_wrapper .gform_previous_button {
  background:transparent; color:#25323A; border:1px solid #E3E8EA; border-radius:10px;
  padding:14px 24px; font-family:Manrope, sans-serif; font-weight:700;
}

.gform_wrapper .gform_validation_errors { border-radius:10px; }
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select { border-color:#F24162; }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  font-size:13px; color:#F24162; background:none; border:0; padding:4px 0 0;
}
.gform_confirmation_message { font-family:Manrope, sans-serif; font-size:16px; line-height:1.6; color:#25323A; }

/* Formulär på mörk botten: sätt klassen t8-form--ljus på sektionen. */
.t8-form--ljus .gform_wrapper .gfield_label,
.t8-form--ljus .gform_wrapper .gfield_description,
.t8-form--ljus .gform_wrapper .gfield_consent_label { color:#fff; }
.t8-form--ljus .gform_wrapper input,
.t8-form--ljus .gform_wrapper textarea,
.t8-form--ljus .gform_wrapper select {
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.25); color:#fff;
}
.t8-form--ljus .gform_wrapper ::placeholder { color:rgba(255,255,255,.55); }

/* ==========================================================================
   ARTIKELTEXT (inlägg)
   Klassen t8-artikel ligger på innehållselementet i singelmallen. Rubrikerna
   kommer från redaktionen och kan inte sättas per element i Bricks.
   ========================================================================== */
.t8-artikel h2 { font-family:Manrope, sans-serif; font-weight:800; font-size:26px; line-height:1.25; margin:44px 0 10px; }
.t8-artikel h3 { font-family:Manrope, sans-serif; font-weight:800; font-size:20px; line-height:1.3; margin:32px 0 8px; }
.t8-artikel h4 { font-family:Manrope, sans-serif; font-weight:700; font-size:17px; line-height:1.35; margin:26px 0 6px; }
.t8-artikel > *:first-child { margin-top:0; }
.t8-artikel p { margin:0 0 18px; }
.t8-artikel ul, .t8-artikel ol { margin:0 0 18px; padding-left:20px; }
.t8-artikel li { margin:0 0 6px; }
.t8-artikel img, .t8-artikel iframe { border-radius:16px; }
.t8-artikel figure { margin:26px 0; }

/* ==========================================================================
   FOKUS PÅ FILTER OCH DRAGSPEL
   Webbläsarens ram vid klick bort, rosa ram för den som tabbar.
   ========================================================================== */
.brxe-filter-checkbox *:focus,
.brxe-filter-radio *:focus,
.brxe-filter-select *:focus,
.brxe-accordion-nested .accordion-title-wrapper:focus { outline:none; box-shadow:none; }

.brxe-filter-checkbox *:focus-visible,
.brxe-filter-radio *:focus-visible,
.brxe-filter-select *:focus-visible { outline:2px solid #F24162; outline-offset:2px; }

.brxe-accordion-nested .accordion-title-wrapper { cursor:pointer; }
.brxe-accordion-nested .accordion-title-wrapper:focus-visible {
  outline:2px solid #F24162; outline-offset:2px; border-radius:6px;
}

/* Popup med kontaktkort ---------------------------------------------------
   Bricks egen .brx-popup-content är en vit ruta med 30 px padding och raka
   hörn, så det rundade kortet försvann i vitt mot vitt (dev 2026-10-01).
   Gör wrappern osynlig och centrera kortet i den. Gäller bara våra popuper. */
.brx-popup-content:has(.t8-popup-card) {
  background:transparent; max-width:none;
  display:flex; justify-content:center; align-items:flex-start;
  /* Luft runt kortet och scroll i wrappern när fönstret är lägre än
     formuläret, annars klipps kortet av i kanterna (Jenny 2026-10-06). */
  padding:24px 16px; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.45) transparent;
}
.brx-popup-content:has(.t8-popup-card)::-webkit-scrollbar { width:8px; }
.brx-popup-content:has(.t8-popup-card)::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.45); border-radius:8px;
}
.brx-popup-content:has(.t8-popup-card)::-webkit-scrollbar-track { background:transparent; }

/* Tabeller (TablePress) ----------------------------------------------------
   Utseendet ligger här i stället för i pluginet, så att alla tabeller ser
   likadana ut och följer Team8:s typsnitt och färger. TablePress skriver
   själv ut #tablepress-<id>, tr.row-N och td.column-N, så enskilda rader och
   kolumner går att nå utan egna klasser.
   Specificiteten är medvetet högre än pluginets egna regler. */
.t8-tabell {
  border:1px solid #E3E8EA; border-radius:18px; overflow:hidden; background:#fff;
  margin:0;
  /* Bredden måste låsas till föräldern. I en flex-container (Bricks
     container) blir ramen annars lika bred som tabellen, och den breda
     tabellen sticker ut utanför skärmen i stället för att scrolla inuti
     ramen (mätt på m8com-sidan på dev 2026-10-06: 1031 px i en 375 px
     container). */
  width:100%; max-width:100%; min-width:0;
}
table.tablepress {
  width:100%; border-collapse:collapse; border:0; margin:0;
  font-family:Manrope, system-ui, sans-serif; font-size:15px; line-height:1.5; color:#25323A;
}
table.tablepress > thead > tr > th,
table.tablepress > thead > tr > td {
  background:#25323A; color:#fff; text-align:left; vertical-align:middle;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:11px 16px; border:0;
}
table.tablepress > tbody > tr > td {
  padding:11px 16px; border:0; border-top:1px solid #E3E8EA; vertical-align:middle;
}
table.tablepress > tbody > tr:first-child > td { border-top:0; }
/* Ingen zebra. Hovringen är mörkt t8-dark på 5 procent, alltså en neutral
   grå ton ur paletten och varken blågrey eller rosa (Jenny 2026-10-06). */
table.tablepress > tbody > tr:hover > td { background:rgba(37,50,58,.05); }
/* Första kolumnen är radrubrik i nästan alla tabeller. */
table.tablepress > tbody > tr > td.column-1 { font-weight:600; }
table.tablepress a { color:#F24162; }

/* Tecknen i cellerna. Skriptet läser vad som står och byter ut det:
   ✓ blir en fylld rosa cirkel med bock (ingår), + en rosa ring med plus
   (tillval mot en kostnad) och - ett grått streck (ingår inte). Fyllt mot
   ihåligt gör att de går att skilja åt även utan färgseende
   (Jenny 2026-10-27). */
.t8-tab-ja, .t8-tab-tillval {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; line-height:1;
}
.t8-tab-ja { background:#F24162; color:#fff; }
.t8-tab-tillval { border:1.5px solid #F24162; color:#F24162; }
.t8-tab-ja svg, .t8-tab-tillval svg { width:13px; height:13px; display:block; }
.t8-tab-nej { color:#AEB8BE; font-size:20px; line-height:1; }

/* Frågetecknet som öppnar extra info. Knapp, inte en span: den ska gå att
   nå med tangentbord och att trycka på med fingret. */
.t8-tab-info {
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; margin-left:7px; padding:0; vertical-align:1px;
  background:#fff; border:1px solid #AEB8BE; border-radius:50%;
  font-family:Manrope, system-ui, sans-serif; font-size:11px; font-weight:700;
  color:#60696F; cursor:pointer; transition:border-color .15s ease, color .15s ease;
}
.t8-tab-info::before { content:"?"; }
.t8-tab-info:hover, .t8-tab-info[aria-expanded="true"] { border-color:#F24162; color:#F24162; }
.t8-tab-info--stilla { cursor:default; margin-left:0; }
.t8-tab-ruta {
  position:fixed; z-index:120; max-width:260px;
  background:#25323A; color:#fff; border-radius:12px; padding:12px 14px;
  font-family:Manrope, system-ui, sans-serif; font-size:13px; line-height:1.5; font-weight:400;
  text-align:left; box-shadow:0 12px 30px rgba(37,50,58,.22);
  opacity:0; visibility:hidden; transition:opacity .15s ease;
}
.t8-tab-ruta--syns { opacity:1; visibility:visible; }

/* Gamla tabeller som fortfarande har Font Awesome i cellerna. */
table.tablepress .fa-check, table.tablepress .fa-plus { color:#F24162; }
table.tablepress .fa-times, table.tablepress .fa-minus { color:#AEB8BE; }
table.tablepress .fa-question-circle { color:#8A949B; }
/* Allt utom första kolumnen centreras: bockar, priser och korta värden ligger
   under sin rubrik. Radrubrikerna i kolumn 1 står kvar till vänster
   (Jenny 2026-10-06). */
table.tablepress > thead > tr > th:not(.column-1),
table.tablepress > thead > tr > td:not(.column-1),
table.tablepress > tbody > tr > td:not(.column-1) { text-align:center; }

/* TablePress 3 kör tabellen genom DataTables, som lägger en egen wrapper med
   5 px padding runt tabellen. Det syntes som en vit kant innanför ramen
   ovanför den mörka rubrikraden (Jenny 2026-10-06). */
.t8-tabell .dt-container { margin:0; }
.t8-tabell .dt-layout-cell { padding:0; }

/* Beskrivningarna i jämförelsetabellerna ligger som .info-box i samma cell som
   funktionsnamnet och gör raderna tre gånger så höga. Skriptet flyttar texten
   till frågetecknets tooltip, och här döljs rutan. M8Com-tabellerna blev
   38-43 procent lägre (mätt på dev 2026-10-06). */
.t8-tabell .info-box { display:none; }
.t8-tabell table.tablepress .fa-question-circle { cursor:help; margin-left:6px; }

/* Breda tabeller: tätare rader, och sidledsscroll med låst första kolumn. */
.t8-tabell--bred table.tablepress { font-size:14px; line-height:1.35; }
.t8-tabell--bred table.tablepress > thead > tr > th,
.t8-tabell--bred table.tablepress > thead > tr > td { padding:10px 14px; }
.t8-tabell--bred table.tablepress > tbody > tr > td { padding:9px 14px; }
.t8-tabell--bred { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.t8-tabell--bred table.tablepress { min-width:760px; }
.t8-tabell--bred table.tablepress > thead > tr > th.column-1,
.t8-tabell--bred table.tablepress > thead > tr > td.column-1,
.t8-tabell--bred table.tablepress > tbody > tr > td.column-1 {
  position:sticky; left:0; z-index:1; box-shadow:1px 0 0 #E3E8EA;
}
.t8-tabell--bred table.tablepress > tbody > tr > td.column-1 { background:#fff; }
/* Den låsta kolumnen måste ha samma hovring, annars bryts raden på mitten. */
.t8-tabell--bred table.tablepress > tbody > tr:hover > td.column-1 { background:#F3F4F5; }
.t8-tabell--bred table.tablepress > thead > tr > th.column-1,
.t8-tabell--bred table.tablepress > thead > tr > td.column-1 { background:#25323A; }

@media (max-width:700px) {
  /* Smala tabeller blir kort: en rad per kort, etiketten från rubrikraden
     till vänster och värdet till höger. */
  .t8-tabell--kort table.tablepress,
  .t8-tabell--kort table.tablepress > tbody,
  .t8-tabell--kort table.tablepress > tbody > tr,
  .t8-tabell--kort table.tablepress > tbody > tr > td { display:block; width:auto; }
  .t8-tabell--kort table.tablepress > thead { display:none; }
  .t8-tabell--kort table.tablepress > tbody > tr { padding:14px 0; border-top:1px solid #E3E8EA; }
  .t8-tabell--kort table.tablepress > tbody > tr:first-child { border-top:0; }
  .t8-tabell--kort table.tablepress > tbody > tr > td {
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    border:0; padding:5px 18px; text-align:right;
  }
  .t8-tabell--kort table.tablepress > tbody > tr > td::before {
    content:attr(data-etikett); flex:0 0 auto; text-align:left;
    font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#60696F;
  }
  .t8-tabell--kort table.tablepress > tbody > tr > td.column-1 {
    display:block; text-align:left; font-size:16px; font-weight:700; padding-bottom:8px;
  }
  .t8-tabell--kort table.tablepress > tbody > tr > td.column-1::before { content:none; }
  .t8-tabell--bred table.tablepress { font-size:14px; }
  .t8-tabell--bred table.tablepress > tbody > tr > td,
  .t8-tabell--bred table.tablepress > thead > tr > th { padding:12px 14px; }
}

/* Stegen på tjänstesidorna numreras av en CSS-räknare. Repeatern har inget
   nummerfält, och numren ska ändå följa ordningen man drar raderna i. */
.t8-steg-lista { counter-reset: t8steg; }
.t8-steg-lista .jet-listing-grid__item { counter-increment: t8steg; }
/* Siffran ritas av räknaren, inte av ett element: ett textelement utan text
   renderas inte av Bricks, så den tomma spannen föll bort (mätt 2026-10-13). */
.t8-steg-lista .t8-steg::before {
  content: counter(t8steg);
  font-family:'Paytone One', system-ui, sans-serif; font-weight:400;
  font-size:40px; line-height:1; color:#F24162;
}

/* Tjänstesidornas listningssektioner (funktioner, steg, tabeller, frågor)
   försvinner när repeatern är tom. Villkor på fältet duger inte: ett tomt
   repeaterfält har ändå ett värde i databasen, så rubrikerna står kvar
   (sett på dev 2026-10-06). Här avgör i stället om listningen gav några rader. */
.t8-sek-listning:not(:has(.jet-listing-grid__item)) { display:none; }
/* Samma sak för brödtexten: tjänster som bara använder fälten ska inte få en
   tom sektion med 72 px luft. */
.t8-sek-innehall:not(:has(.t8-artikel > *)) { display:none; }

/* Punktlistor i funktionskorten får rosa bockar i stället för punkter, så att
   nivåkort som Grund och Avancerad kan skrivas som vanlig lista i fältet. */
.t8-kort-text ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.t8-kort-text ul li { position:relative; padding-left:26px; }
.t8-kort-text ul li::before {
  content:"\ec67"; font-family:'team8'; color:#F24162;
  position:absolute; left:0; top:1px; font-size:16px; line-height:1.4;
}
.t8-kort-text p:last-child { margin-bottom:0; }

/* Modifierklasser som förlorar mot sin basklass -------------------------------
   Bricks skriver ut globala klasser i den ordning de ligger i stilhanteraren,
   inte i den ordning de står på elementet, och vid inklistring kan en klass
   dessutom hamna dubbelt. Då vinner .t8-body över .t8-body--light fast båda
   har samma specificitet, och ingressen blir grå på mörk bakgrund
   (sett på tjänstesidan på dev 2026-10-06).
   Här får modifierarna en klass till i selektorn och vinner därmed alltid. */
.brxe-text-basic.t8-body.t8-body--light { color:rgba(255,255,255,.72); }
.brxe-text-basic.t8-body.t8-body--on-pink { color:rgba(255,255,255,.9); }
.brxe-text-basic.t8-small.t8-small--light { color:rgba(255,255,255,.8); }
.brxe-text-basic.t8-small.t8-small--muted { color:rgba(255,255,255,.65); }
.brxe-heading.t8-h2--sm.t8-heading-light,
.brxe-heading.t8-heading-light { color:#fff; }

/* Listningar på tjänstesidorna centreras när raden inte är full, så att två
   kort i en tre-kolumnsgrid hamnar mitt på sidan i stället för till vänster
   (Jenny 2026-10-06). Full rad påverkas inte. */
.t8-sek-listning .jet-listing-grid__items { justify-content:center; }

/* Avsnitt utan bild tar hela bredden i stället för att lämna en tom spalt. */
.t8-sek-listning .t8-split:not(:has(img)) { grid-template-columns:1fr; }

/* Hovereffekter ---------------------------------------------------------------
   Diskreta och bara där det finns en pekare, så att inget fastnar i
   hovertillstånd på pekSkärm. Alla går på 200 ms. */
@media (hover: hover) {
  .t8-quote-card, .t8-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .t8-quote-card:hover, .t8-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(37,50,58,.10);
    border-color: #D5DDE1;
  }
  /* Ikonbrickan i korten får lite mer liv när kortet hovras. */
  .t8-quote-card .t8-ico-tile, .t8-card .t8-ico-tile { transition: transform .2s ease; }
  .t8-quote-card:hover .t8-ico-tile, .t8-card:hover .t8-ico-tile { transform: scale(1.06); }

  /* Bilderna i avsnitten zoomar något inom sin rundade ram. */
  .t8-sek-listning .t8-split img {
    transition: transform .3s ease;
    will-change: transform;
  }
  .t8-sek-listning .t8-split:hover img { transform: scale(1.015); }

  /* Dragspelens rubrikrad. */
  .brxe-accordion .accordion-title-wrapper,
  .brxe-accordion .accordion-title { transition: background-color .2s ease; }
  .brxe-accordion .accordion-title-wrapper:hover,
  .brxe-accordion .accordion-title:hover { background: rgba(37,50,58,.04); }

  /* Pill-länkar och pilar flyttar sig en gnutta. */
  .t8-link-arrow { transition: color .2s ease, transform .2s ease; display:inline-block; }
  .t8-link-arrow:hover { transform: translateX(3px); }
}

/* Frågepanelen: frågorna ligger tvärt på varandra med en hårfin linje mellan,
   som på partnersidorna. Listningens radavstånd nollas, och sista frågan
   tappar sin linje. */
.t8-faq-panel .jet-listing-grid__items { row-gap:0; }
.t8-faq-panel .jet-listing-grid__item:last-child .accordion-title-wrapper { border-bottom:0; }

/* Mobil: avsnittens bild hamnar alltid efter texten -----------------------------
   I en spalt vill man läsa rubrik och text först, oavsett vilken sida bilden
   ligger på i desktopvyn (Jenny 2026-10-06). */
@media (max-width: 991px) {
  .t8-sek-listning .t8-split img { order:2 !important; }
}

/* Mobil: formulärrutan får mindre padding, fälten blir för smala annars. */
@media (max-width: 767px) {
  .gform_wrapper.gravity-theme .gfield { margin-bottom:12px; }
  .brxe-shortcode .gform_wrapper { font-size:15px; }
}

/* Rutnätens barn ska kunna krympa. Utan min-width:0 låter grid ett långt ord
   bredda sin spalt, och då blir två lika spalter plötsligt 187 och 146 px. */
.t8-grid-3 > *, .t8-split > *, .jet-listing-grid__item { min-width:0; }

/* Prisväxlare månad/år -----------------------------------------------------
   Knapparna sätter eller tar bort klassen t8-ar på sektionen med en Bricks-
   interaktion. Här avgörs bara vilket pris som syns och vilken knapp som ser
   vald ut, så växlaren behöver ingen egen JS (Jenny 2026-10-08). */
.t8-paket .t8-pris--ar { display:none; }
.t8-paket.t8-ar .t8-pris--man { display:none; }
.t8-paket.t8-ar .t8-pris--ar { display:flex; }

.t8-pris-chip {
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 18px; border:1px solid #E3E8EA; border-radius:100px;
  font-family:Manrope, system-ui, sans-serif; font-size:14px; font-weight:700;
  color:#25323A; background:#fff; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.t8-pris-chip:focus-visible { outline:2px solid #F24162; outline-offset:2px; }
.t8-paket .t8-pris-chip--man,
.t8-paket.t8-ar .t8-pris-chip--ar { background:#25323A; border-color:#25323A; color:#fff; }
.t8-paket.t8-ar .t8-pris-chip--man { background:#fff; border-color:#E3E8EA; color:#25323A; }

/* TablePress med DataTables påslået ------------------------------------------
   Sökrutan, radväljaren, sidnumreringen och sorteringspilarna hör inte hemma i
   en pristabell, och DataTables blåa markering av sorterad kolumn ligger
   utanför paletten (Jennys pakettabell 2026-10-08). Dölj chromet här, men
   stäng helst av DataTables på själva tabellen: annars visas bara tio rader. */
.t8-tabell .dt-length,
.t8-tabell .dt-search,
.t8-tabell .dt-info,
.t8-tabell .dt-paging,
.t8-tabell .dataTables_length,
.t8-tabell .dataTables_filter,
.t8-tabell .dataTables_info,
.t8-tabell .dataTables_paginate { display:none; }
.t8-tabell table.dataTable > thead > tr > th { background:#25323A; }
.t8-tabell table.dataTable > thead > tr > th.dt-ordering-asc,
.t8-tabell table.dataTable > thead > tr > th.dt-ordering-desc,
.t8-tabell table.dataTable > thead > tr > th.sorting_asc,
.t8-tabell table.dataTable > thead > tr > th.sorting_desc { background:#25323A; }
.t8-tabell table.dataTable > thead > tr > th span.dt-column-order,
.t8-tabell table.dataTable > thead > tr > th::before,
.t8-tabell table.dataTable > thead > tr > th::after { display:none !important; }
.t8-tabell table.dataTable > tbody > tr > td.sorting_1 { background:inherit; }
/* Redigera-länken under tabellen syns bara för inloggade, men den ska inte
   ligga mitt i designen. */
.t8-tabell .tablepress caption { padding-top:8px; font-size:12px; }

/* IT-sidan: chips, taggar och länkkort -----------------------------------
   Klasserna kommer från design_handoff_it (8 oktober 2026). De är generella
   nog att återanvändas på de andra affärsområdessidorna. */

/* Pill-länk: „→ Licenshantering” och raden „Mer från IT”. */
.t8-chip-link {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid #E3E8EA; border-radius:100px;
  font-family:Manrope, system-ui, sans-serif; font-size:12.5px; font-weight:700;
  color:#60696F; text-decoration:none; white-space:nowrap;
  transition:border-color .2s ease, color .2s ease;
}
.t8-chip-link:hover { border-color:#F24162; color:#F24162; }

/* Prischips på den rosa supportpuffen. */
.t8-chip-pris {
  display:inline-flex; align-items:center;
  padding:7px 14px; border-radius:100px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
  font-family:Manrope, system-ui, sans-serif; font-size:13px; font-weight:700; color:#fff;
  white-space:nowrap;
}

/* Liten tagg uppe till höger i hårdvarukorten. */
.t8-chip-tagg {
  display:inline-flex; align-items:center; padding:5px 11px; border-radius:100px;
  background:#fff; border:1px solid #E3E8EA;
  font-family:Manrope, system-ui, sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#60696F; white-space:nowrap;
}
.t8-chip-tagg--ljus {
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.85);
}

/* Vit knapp på rosa botten. */
.t8-knapp-vit {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:10px; background:#fff;
  font-family:Manrope, system-ui, sans-serif; font-size:15px; font-weight:700; color:#F24162;
  transition:transform .2s ease;
}

/* Hela kort som är länkar: ingen understrykning, och ett litet lyft. */
.t8-lyft, .t8-tjanstekort { text-decoration:none; color:inherit; }
@media (hover: hover) {
  .t8-lyft { transition:transform .25s ease, box-shadow .25s ease; }
  .t8-lyft:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(37,50,58,.14); }
  .t8-tjanstekort { transition:background-color .25s ease; }
  .t8-tjanstekort:hover { background:#e3e8eb; }
  .t8-lyft:hover .t8-knapp-vit { transform:translateX(3px); }
}

/* Teamslidern: pilarnas placering ställs i sliderns egna inställningar
   (prevArrowTop/Right och nextArrowTop/Right). Här bara den avstängda pilen. */
.t8-teamkort .splide__arrow:disabled { opacity:.35; }

/* Tjänstemallen -------------------------------------------------------------
   Byggd efter design_handoff_tjanstemall (8 oktober 2026). */

/* Innehållsförteckningen „På sidan”. Bricks bygger den med tocbot, som
   skriver en <ol class="toc-list">, inte en <ul>. */
.t8-pa-sidan .brxe-post-toc .toc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.t8-pa-sidan .brxe-post-toc a {
  display:block; padding-left:14px; border-left:2px solid #E3E8EA;
  font-family:Manrope, system-ui, sans-serif; font-size:14px; line-height:1.4;
  color:#60696F; text-decoration:none; transition:color .2s ease, border-color .2s ease;
}
.t8-pa-sidan .brxe-post-toc a:hover,
.t8-pa-sidan .brxe-post-toc .is-active-link { color:#F24162; border-left-color:#F24162; }
/* Färre än tre rubriker: dölj förteckningen och låt texten ta bredden.
   Villkoret väntar på .toc-list, alltså på att listan har byggts. Bricks
   hoppar nämligen över en förteckning som inte syns och sätter en
   IntersectionObserver på den i stället – och en display:none-ruta blir
   aldrig synlig, så en regel som döljer före bygget låser den tom för
   alltid (mätt på dev 2026-10-09). */
.t8-pa-sidan:has(.toc-list):not(:has(li:nth-child(3))) { display:none; }
/* ... och låt texten ta bredden när förteckningen är dold. Spaltbredden
   står som inställning på elementet, alltså i en id-regel som ingen
   klassregel kan vinna över. Därför spänner texten över båda spalterna i
   stället för att rutnätet skrivs om. Ett :has() får inte ligga inuti ett
   annat :has(): då blir hela selektorn ogiltig och raden gör ingenting,
   vilket den gjorde fram till nu (mätt på M8Com, dev 2026-10-23). */
@media (min-width: 992px) {
  .t8-sek-innehall .t8-split:has(> .t8-pa-sidan .toc-list):not(:has(> .t8-pa-sidan .toc-list > li:nth-child(3))) > *:not(.t8-pa-sidan) { grid-column:1 / -1; }
}

/* Stegen: linje över varje steg, rosa på det första. Siffran kommer ur
   räknaren som redan finns på t8-steg-lista. */
.t8-steg { border-top:1px solid rgba(255,255,255,.2); }
/* Stegen fyller bredden oavsett om de är 1 eller 5. JetEngine ger varje kort
   en fast andel av bredden (fyra kolumner = 25 %), så tre steg lämnade en
   tom fjärdedel till höger. Auto-fit i stället, som handoffen anger. */
/* Klassen upprepas i selektorerna: JetEngine sätter bredd och gap i regler
   med högre specificitet, och vi vill inte ha !important. */
.t8-steg-lista.t8-steg-lista .jet-listing-grid__items {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:24px;
}
.t8-steg-lista.t8-steg-lista .jet-listing-grid__items > .jet-listing-grid__item { width:auto; max-width:none; }
.t8-steg-lista .jet-listing-grid__item:first-child .t8-steg { border-top-color:#F24162; }

/* FAQ: vit rad, rosa plus som vrids 45 grader när raden är öppen. */
.t8-faq .brxe-accordion-nested { background:transparent; }
/* Raderna ligger på vit botten sedan FAQ-sektionen blev vit, och behöver
   därför en ram för att synas. */
.t8-faq .t8-faq-rad { border:1px solid #E3E8EA; }

/* Avståndet mellan frågorna ligger på raden (10 px), inte i listningen.
   JetEngines eget radavstånd läggs annars ovanpå och ger 30 px. */
.t8-faq.t8-faq .jet-listing-grid__items { row-gap:0; }
.t8-faq .accordion-title-wrapper svg,
.t8-faq .accordion-title-wrapper i { transition:transform .2s ease; }
.t8-faq .brx-open > .accordion-title-wrapper svg,
.t8-faq .brx-open > .accordion-title-wrapper i,
.t8-faq .accordion-title-wrapper[aria-expanded="true"] svg,
.t8-faq .accordion-title-wrapper[aria-expanded="true"] i { transform:rotate(45deg); }

/* Tabellens första rad är prisraden: fet text. Ingen rosa ton, den såg ut
   som en varning (Jenny 2026-10-27). */
.t8-tabell table.tablepress > tbody > tr:first-child > td { font-weight:700; }
.t8-tabell table.tablepress > tbody > tr:first-child > td.column-1 { font-weight:800; }
/* Tomma celler visar ett grått streck i stället för ingenting. */
.t8-tabell table.tablepress > tbody > tr > td:empty::after { content:"–"; color:#b9c1c6; }
/* Rubrikrad mitt i tabellen: bara första cellen har text, som
   "Månadsprenumeration" och "Årsprenumeration" i Microsoft 365-tabellen.
   Ljusgrått band (t8-border) och fet text, utan streck i de tomma cellerna
   (Jenny 2026-10-27). */
.t8-tabell table.tablepress > tbody > tr:not(:has(> td:not(.column-1):not(:empty))) > td { background:#E3E8EA; font-weight:800; }
.t8-tabell table.tablepress > tbody > tr:not(:has(> td:not(.column-1):not(:empty))) > td:empty::after { content:none; }
.t8-tabell--bred table.tablepress > tbody > tr:not(:has(> td:not(.column-1):not(:empty))) > td.column-1 { background:#E3E8EA; }
/* Grupprader får också en klass av skriptet, för webbläsare utan :has(). */
.t8-tabell table.tablepress > tbody > tr.t8-tab-grupp > td { background:#E3E8EA; font-weight:800; }
.t8-tabell table.tablepress > tbody > tr.t8-tab-grupp > td:empty::after { content:none; }
.t8-tabell--bred table.tablepress > tbody > tr.t8-tab-grupp > td.column-1 { background:#E3E8EA; }

/* Markerad kolumn: den vi oftast rekommenderar. Stjärna sist i rubrikcellen
   i TablePress sätter den, texten efter stjärnan blir bandet. */
.t8-tabell table.tablepress > thead > tr > th.t8-kol-vald { background:#F24162; }
.t8-tabell table.tablepress > tbody > tr > td.t8-kol-vald { background:#FDECEF; }
.t8-tabell table.tablepress > tbody > tr:hover > td.t8-kol-vald { background:#FBDDE3; }
.t8-tab-band {
  display:block; margin-top:4px;
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}

/* Rubrikraden som följer med vid scroll. Remsan ligger under den klistrade
   menyn (z-index 100) och klonar tabellens rubrikrad, eftersom en
   sidledsscrollande behållare låser position:sticky till sig själv. */
.t8-tab-fast {
  position:fixed; z-index:90; overflow:hidden; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .15s ease;
  box-shadow:0 6px 16px rgba(37,50,58,.12);
}
.t8-tab-fast--syns { opacity:1; visibility:visible; }
.t8-tab-fast table { table-layout:fixed; margin:0; }
/* Grupprubriken under den fasta rubrikraden, samma band som i tabellen. */
.t8-tab-fast-grupp {
  background:#E3E8EA; color:#25323A;
  font-family:Manrope, system-ui, sans-serif; font-size:14px; font-weight:800; line-height:1.35;
  padding:9px 14px;
}

/* Mobil: välj två kolumner att jämföra i stället för att scrolla i sidled. */
.t8-tab-valj { display:none; margin:0 0 14px; }
.t8-tab-valj--syns { display:block; }
.t8-tab-valj-text {
  margin:0 0 8px; font-family:Manrope, system-ui, sans-serif;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#60696F;
}
.t8-tab-valj-knapp {
  display:inline-block; margin:0 6px 6px 0; padding:7px 12px;
  background:#fff; border:1px solid #E3E8EA; border-radius:999px;
  font-family:Manrope, system-ui, sans-serif; font-size:12px; font-weight:700;
  line-height:1.2; color:#60696F; cursor:pointer;
}
.t8-tab-valj--pa { background:#25323A; border-color:#25323A; color:#fff; }
.t8-tabell--jamfor { overflow-x:visible; }
.t8-tabell--jamfor table.tablepress { min-width:0; }
.t8-tabell table.tablepress .t8-tab-dold { display:none; }

/* Teckenförklaring under tabellen. */
.t8-tab-forklaring {
  display:flex; flex-wrap:wrap; gap:10px 22px; margin:14px 0 0;
  font-family:Manrope, system-ui, sans-serif; font-size:13px; color:#60696F;
}
.t8-tab-forklaring-del { display:inline-flex; align-items:center; gap:8px; }