/* ==================================================
   BACKPACKINGLIGHT.SE
   NORDIC THEME - CSS
   Version 1.1 - Oktober 2026
   ================================================== */


/* ==================================================
   1. TYPOGRAFI
   ================================================== */

html,
body,
p,
div,
li {
  font-family: "Gill Sans", Helvetica, Arial, sans-serif;
}


/* ==================================================
   2. TOPPMENY & INLOGGNING
   ================================================== */

.nordic--top-bar,
.nordic--top-bar div,
.nordic--top-bar li,
.tws-login--my-pages-text,
.tws-login--login-text {
  font-size: 11px !important;
}


/* ==================================================
   3. PRODUKTBILDER
   ================================================== */

/* Vit bakgrund och luft runt förstoringar */
.fancybox-image {
  padding: 20px !important;
  background: #fff !important;
  box-sizing: border-box;
}


/* ==================================================
   4. LÅNGA TEXTER
   ================================================== */

/* Två kolumner på större skärmar */
.longtexts {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  column-gap: 32px;
}

/* En kolumn på surfplatta och mobil */
@media only screen and (max-width: 900px) {
  .longtexts {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}


/* ==================================================
   5. PRODUKTBESKRIVNINGAR
   ================================================== */

/* Visa hela produktbeskrivningen */
.slot--article-description
.tws-article-description--text-container {
  max-height: initial;
}

/* Dölj knappen "Visa mer" */
.tws-article-description--show-more > button {
  display: none;
}


/* ==================================================
   6. PRODUKTVARIANTER
   ================================================== */

/*
   Befintlig inställning behålls.
   Ändra inte utan att först kontrollera
   hur era storlekar och färgval fungerar.
*/

.tws-article-choices--variant-controls {
  display: none !important;
}


/* ==================================================
   7. RESPONSIVA TABELLER
   ================================================== */

/*
   Den tidigare globala mobilregeln för
   tr och td är borttagen.

   Den kunde förstöra tabeller med fler
   än två kolumner.

   För nya tabeller används klassen:
   .bpl-table-scroll
*/

.bpl-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.bpl-table-scroll table {
  width: 100%;
  border-collapse: collapse;
}

.bpl-table-scroll th,
.bpl-table-scroll td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e5e9e4;
}

/* Gör breda tabeller möjliga att scrolla */
@media only screen and (max-width: 600px) {
  .bpl-table-scroll table {
    min-width: 520px;
  }
}


/* ==================================================
   8. SIDFOT
   ================================================== */

/* Dölj Textalk/Abicart-text i sidfoten */
.container.nordic--footer--made-by {
  display: none;
}


/* ==================================================
   9. DELNINGSFUNKTION
   ================================================== */

@media only screen and (max-width: 320px) {
  .slot--article-share iframe {
    height: 155px;
  }
}


/* ==================================================
   10. STORA RUBRIKER
   ================================================== */

.hugecaps {
  font-size: 50px;
  line-height: 50px;
  color: #444;
  font-weight: bold;
}

/* Befintlig klass behålls */
.punchline {
}


/* ==================================================
   11. BLOGG
   ================================================== */

/* Ta bort skugga från bloggens huvudbehållare */
body.blog .nordic--main-wrapper {
  box-shadow: none !important;
}

/* Centrera rubriker för senaste blogginläggen */
.nordic--start-page .senaste-blogginlaggen h2 {
  text-align: center;
}

/* Anpassa bilder i bloggens förhandsvisningar */
.nordic--start-page .senaste-blogginlaggen img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
  max-height: 200px;
}


/* ==================================================
   12. BPL PRODUKTDESIGN - GRUNDREGLER
   ================================================== */

/*
   För kommande produktbeskrivningar
   med BPL:s nya HTML-design.
*/

.bpl-product {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.bpl-product *,
.bpl-product *::before,
.bpl-product *::after {
  box-sizing: border-box;
}

.bpl-product img {
  max-width: 100%;
  height: auto;
}

.bpl-product h2,
.bpl-product h3,
.bpl-product h4 {
  line-height: 1.35;
}

.bpl-product p {
  margin-top: 0;
}

.bpl-product table {
  width: 100%;
  border-collapse: collapse;
}

.bpl-product td,
.bpl-product th {
  overflow-wrap: break-word;
}


/* ==================================================
   SLUT - BPL NORDIC CSS v1.1
   ================================================== */

/* ==========================================
   BPL NORDIC 1.2 – PRODUKTSIDA
   Kompakta specifikationer och USP
   ========================================== */

/* KÖPARGUMENT / USP */

body.article .slot--unique-selling-points {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

body.article .slot--unique-selling-points ul {
  margin-top: 0;
  margin-bottom: 0;
}

body.article .slot--unique-selling-points li {
  line-height: 1.35;
  margin-bottom: 3px;
}

/* MOBIL */

@media (max-width: 600px) {

  body.article .slot--unique-selling-points {
    margin-top: 10px !important;
  }
}

/* BPL NORDIC 2.0 — full-width technical specifications */
.nordic--article > .bpl-specifications{clear:both;width:100%;min-width:0;box-sizing:border-box;margin:28px 0 32px;color:#222}
.nordic--article > .bpl-specifications[hidden]{display:none!important}
.bpl-specifications__heading{margin:0 0 14px;padding:0 0 10px;font-size:21px;line-height:1.3;font-weight:600;color:#202020;border-bottom:1px solid #ddd}
.bpl-specifications__heading::before{content:'';display:inline-block;width:4px;height:18px;margin-right:10px;background:#e67e23;vertical-align:-2px}
.bpl-specifications .slot--article-attributes{width:100%;margin:0!important;padding:0!important}
.bpl-specifications .tws-article-attributes{width:100%;min-width:0}
.bpl-specifications .tws-article-attributes ul{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;list-style:none;padding:0;margin:0;border:0;border-radius:0}
.bpl-specifications .tws-article-attributes li{display:grid!important;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:start;gap:12px;min-width:0;margin:0!important;padding:9px 12px!important;border:0;border-bottom:1px solid #e8e8e8;background:#f7f7f7;font-size:14px!important;line-height:1.45!important}
.bpl-specifications .tws-article-attributes li:nth-child(4n+3),.bpl-specifications .tws-article-attributes li:nth-child(4n+4){background:#fff}
.bpl-specifications .tws-article-attribute-title{font-weight:600;color:#333;font-size:inherit!important;overflow-wrap:anywhere}
.bpl-specifications .tws-article-attribute-value{min-width:0;font-weight:400;color:#444;font-size:inherit!important;overflow-wrap:anywhere}
@media(max-width:767px){
 .nordic--article > .bpl-specifications{margin:22px 0 26px}
 .bpl-specifications__heading{font-size:19px}
 .bpl-specifications .tws-article-attributes ul{grid-template-columns:minmax(0,1fr)}
 .bpl-specifications .tws-article-attributes li{padding:9px 10px!important;font-size:13px!important;gap:10px;background:#fff}
 .bpl-specifications .tws-article-attributes li:nth-child(odd){background:#f7f7f7}
 .bpl-specifications .tws-article-attributes li:nth-child(even){background:#fff}
}

/* BPL Kakwa: compact editorial start, Test ny design only */
.nordic--article-bottom:has(.bpl-kakwa-editorial){margin-top:20px!important}
.slot--article-description:has(.bpl-kakwa-editorial){padding:20px 0!important}
.tws-article-description:has(.bpl-kakwa-editorial) > .tws-article-description--heading,
.tws-article-description:has(.bpl-kakwa-editorial) > .tws-article-description--article-number{display:none!important}
.bpl-kakwa-editorial section{scroll-margin-top:20px}

/* BPL category filters – Test ny design – 2026-10-21 */
@media(min-width:992px){
 .nordic--article-group .tws-article-filter{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
 .nordic--article-group .tws-article-filter>div{min-width:0}
 .nordic--article-group .tws-article-filter--filter-control-container.above-list{display:flex;flex-direction:column;gap:8px;margin:0}
 .nordic--article-group .above-list .tws-article-filter--dropdown{width:100%;margin:0}
 .nordic--article-group .above-list .filter-select-name{width:100%;min-height:42px;text-align:left;padding:10px 12px;border:1px solid #ddd;border-radius:3px;background:#fff;color:#222;font-weight:600}
 .nordic--article-group .above-list .tws-article-filter--filter-with-select-wrapper,
 .nordic--article-group .above-list .tws-article-filter--filter-with-price-wrapper{position:static;width:100%;max-width:100%;box-shadow:none}
 .nordic--article-group .above-list .filter-select-wrapper{max-height:none;overflow:visible}
 .nordic--article-group .tws-article-filter--active-filters-wrapper{display:block;margin-top:14px}
 .nordic--article-group .tws-article-filter--active-filters-text{float:none;width:100%;margin:0 0 6px}
 .nordic--article-group .tws-article-filter--active-filters-wrapper>div{float:none;width:100%}
 .nordic--article-group .above-list .filter-select-options-container{max-height:300px;overflow-y:auto}
 .nordic--article-group .tws-list-controls{float:right!important;margin:0 0 14px}
}
.nordic--article-group .tws-article-filter .filter-select-name:focus-visible,
.nordic--article-group .tws-article-filter button:focus-visible{outline:2px solid #e87919;outline-offset:2px}
/* End BPL category filters */


/* BPL compact header and two-row menu fix — 2026-10-30 */
@media (min-width:768px){
  .nordic--header-wrapper.clearfix{padding-top:24px!important;padding-bottom:12px!important}
.slot--header-logo .tws-logo--container{max-width:340px!important;margin-left:auto;margin-right:auto}
nav.tws-top-menu .nav.navbar-nav > li > a{font-size:13px!important;padding-left:6px!important;padding-right:2px!important}
  nav.tws-top-menu{position:relative!important}
nav.tws-top-menu .container-fluid,nav.tws-top-menu .navbar-collapse,nav.tws-top-menu .nav.navbar-nav{position:static!important}
  nav.tws-top-menu .bpl-nav-panel{top:100%!important}
}

@media (min-width:768px){nav.tws-top-menu .nav.navbar-nav > li[data-bpl-nav] > a{font-size:13px!important}}


/* BPL kategorikort */

.bpl-category-nav{font-family:"Gill Sans",Arial,sans-serif;max-width:1200px;margin:0 auto;color:#222;background:#fff;padding:22px 0 16px;box-sizing:border-box}
.bpl-category-nav *{box-sizing:border-box}
.bpl-category-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bpl-category-card{display:block;color:#222;text-decoration:none;min-width:0;border-bottom:2px solid #e8e3de;padding-bottom:12px;transition:border-color .15s}
.bpl-category-image{display:block;aspect-ratio:1.12;overflow:hidden;background:#eeeae6}
.bpl-category-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.bpl-category-label{display:flex;justify-content:space-between;align-items:center;gap:6px;padding-top:12px;font-size:16px;font-weight:600;line-height:1.3}
.bpl-category-label>span{font-size:17px;color:#a64c0c;font-weight:400}
.bpl-category-card:hover{border-bottom-color:#dd700c;color:#9b4309}
.bpl-category-card:hover img{transform:scale(1.025)}
.bpl-category-card:focus-visible{outline:3px solid #d66b13;outline-offset:5px}
@media(max-width:850px){.bpl-category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.bpl-category-nav{max-width:650px}}
@media(max-width:520px){.bpl-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.bpl-category-nav{padding-top:14px}.bpl-category-image{aspect-ratio:1.12}.bpl-category-label{font-size:16px}}
@media(prefers-reduced-motion:reduce){.bpl-category-card,.bpl-category-image img{transition:none}}