/* ============================================================
   1. Ta bort luft mellan block på startsidan
   Detta minimerar avstånd (padding/marginal) runt varje komponent.
============================================================ */
.emporium.startpage .emporium--start-page .emporium--component-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 1 !important; /* Liten botten-padding behålls */
}

/* ============================================================
   2. Ta bort luft inuti varje komponent på startsidan
   Detta gör komponenternas inre delar mer kompakta.
============================================================ */
.emporium.startpage .emporium--component-container > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 1 !important;
}

/* ============================================================
   3. Specifik rensning för banners och slideshows
   Tar bort luft runt banners och begränsar höjden på slides.
============================================================ */
.emporium.startpage .emporium--banner,
.emporium.startpage .emporium--banner .emporium--banner-inner {
  margin: 0 !important;
  padding: 0 !important;
}

.slide {
  max-height: 300px !important; /* Begränsar bannerns höjd */
  overflow: hidden;             /* Beskär överskjutande bild */
}

/* ============================================================
   4. Rensa luft i textkomponenten på startsidan
============================================================ */
.emporium.startpage .emporium--text {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   5. Ta bort luft mellan komponentcontainers som ligger direkt efter varandra
============================================================ */
.emporium.startpage .emporium--component-container + .emporium--component-container {
  margin-top: 0 !important;
}

/* ============================================================
   6. Justera luft över FÖRSTA blocket på startsidan
   Bra för finjustering av startside-layout.
============================================================ */
.emporium.startpage .emporium--start-page .emporium--component-container:first-of-type {
  margin-top: 5px !important; /* Kan ändras till negativa värden vid behov */
  padding-top: 0 !important;
}



/* ============================================================
   8. Dölj delningsknappar och popup på produktsidor
============================================================ */
div.tws-article-social {
  display: none !important;
}

/* ============================================================
   9. Minska avstånd på special-/produkt-sidor
   Drar upp och ner innehållet för en kompaktare layout.
============================================================ */
.customPageItem.customPageHtml {
  margin-top: -30px !important;
  margin-bottom: -30px !important;
  padding-top: 0 !important;
}

/* ============================================================
   10. Styling av login-ikon
============================================================ */
.login-icon i, 
.login-icon svg {
  font-size: 24px;
  color: #000; /* Svart färg */
  cursor: pointer;
}

/* ============================================================
   11. Korta av långa produktnamn i produktlistan
   Visar "..." när texten inte får plats.
============================================================ */
.product-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   12. Ta bort jämförpris / "ordinarie pris"-visning på produktsidor
   OBS: Originalet var felaktigt skrivet. Detta är den korrekta versionen.
============================================================ */
.tws-article-price--compare-at-price {
  display: none !important;
}

/* ============================================================
   Stor text sidda plotterpapper
============================================================ */
.big-title {
  font-size: 42px;
  font-weight: 700;
  color: #0033a0;
  text-align: center;
  margin-bottom: 20px;
}