/* =====================================================
   FYRVERKERI OUTLET
   KOMPLETT CSS – NOVEMBER 2026
   ===================================================== */


/* 1. KASSA OCH INKÖPSLISTA */

.tws-checkout--forms,
.opc-checkout--shortcuts,
.tws-checkout--select-delivery-wrapper,
.tws-checkout--select-payment-wrapper,
.tws-checkout--complete-heading,
.tws-checkout--pay-center {
  display: none !important;
}

.slot--article-description .tws-article-description--text-container {
  max-height: 600px;
}

.tws-opc-cart--cart-heading {
  font-size: 0 !important;
}

.tws-opc-cart--cart-heading::after {
  content: "Min inköpslista";
  font-size: 24px;
  font-weight: bold;
}


/* 2. DÖLJ ORDERGRÄNSER */

.tws-article-buy-button-with-modal--minimal-order-messages,
.tws-checkout--minimal-order-message,
.tws-opc--minimal-order-message,
.tws-opc-cart--minimal-order-message {
  display: none !important;
}


/* 3. MÖRK GRUNDDESIGN */

.tws-content-box,
.tws-container--content,
.slot--main-content {
  background-color: #1D2025;
  color: #F5F5F5;
}

.tws-content-box {
  border-radius: 12px;
}

.bountiful--body .bountiful--body-wrapper
.bountiful--main .bountiful--main-wrapper {
  background: #1D2025 !important;
  color: #F5F5F5;
}

.bountiful--main-wrapper {
  border-radius: 12px !important;
}


/* 4. VÄNSTERMENY */

.slot--sidebar .tws-content-box,
.slot--sidebar .tws-container--content {
  background-color: #25282D;
  color: #F5F5F5;
}

.slot--sidebar h2,
.slot--sidebar h3,
.slot--sidebar a {
  color: #F5F5F5;
}

.bountiful--sidebar .tws-vertical-menu-light,
.bountiful--sidebar .tws-container--tws-vertical-menu-light,
.bountiful--sidebar .tws-vertical-menu-light-root-level {
  background: #25282D !important;
  color: #fff !important;
}

.bountiful--sidebar .tws-vertical-menu-light {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid #34383F !important;
}

.bountiful--sidebar .tws-vertical-menu-light--title {
  background: #25282D !important;
  color: #fff !important;
  padding: 17px 18px 17px 15px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .6px;
  border-left: 4px solid #FFE000 !important;
  border-bottom: 1px solid #3B3F45 !important;
}

.bountiful--sidebar .tws-vertical-menu-light a,
.bountiful--sidebar .tws-vertical-menu-light li {
  background: #25282D !important;
  color: #E8E9EC !important;
  border-color: #393D43 !important;
}

.bountiful--sidebar .tws-vertical-menu-light a {
  text-decoration: none !important;
  border-radius: 7px;
  transition: color .2s ease, background-color .2s ease;
}

.bountiful--sidebar .tws-vertical-menu-light a:hover {
  background: #30343A !important;
  color: #FFE000 !important;
}

.bountiful--sidebar .bountiful--component-container {
  border-radius: 12px;
}


/* 5. SENASTE PRODUKTER I VÄNSTERSPALTEN */

.bountiful--sidebar .tws-container--tws-articles-two {
  background: #25282D !important;
  color: #fff !important;
  border: 1px solid #34383F !important;
  border-radius: 14px !important;
  overflow: hidden;
  padding: 0 12px 14px !important;
}

.bountiful--sidebar .tws-articles-two,
.bountiful--sidebar .tws-articles-two-type-list,
.bountiful--sidebar .tws-articles-two .tws-list--list,
.bountiful--sidebar .tws-articles-two--list {
  background: #25282D !important;
  color: #fff !important;
}

.bountiful--sidebar .tws-articles-two--heading {
  background: #25282D !important;
  color: #fff !important;
  border-left: 4px solid #FFE000 !important;
  padding-left: 15px !important;
}

.bountiful--sidebar .tws-articles-two--heading h2,
.bountiful--sidebar .tws-articles-two--heading
.tws-util-heading--heading {
  background: #25282D !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .6px;
  padding: 17px 5px !important;
  margin: 0 !important;
}

.bountiful--sidebar
.tws-container--tws-articles-two
.tws-articles-two--article,
.bountiful--sidebar
.tws-container--tws-articles-two
.tws-articles-two--article-wrapper,
.bountiful--sidebar .tws-articles-two--list > * {
  background: #30343A !important;
  color: #fff !important;
  border-color: #41464E !important;
}

.bountiful--sidebar .tws-articles-two--list a {
  display: block;
  background: #30343A !important;
  border: 1px solid #444950 !important;
  border-radius: 8px !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: border-color .2s ease, background-color .2s ease !important;
}

.bountiful--sidebar .tws-articles-two--list a:hover {
  background: #353A42 !important;
  border-color: #FFE000 !important;
}

.bountiful--sidebar .tws-container--tws-articles-two a,
.bountiful--sidebar .tws-container--tws-articles-two span,
.bountiful--sidebar .tws-container--tws-articles-two p,
.bountiful--sidebar .tws-articles-two--list span,
.bountiful--sidebar .tws-articles-two--list p,
.bountiful--sidebar .tws-articles-two--list strong {
  color: #fff !important;
}


/* 6. GULA STARTSIDEKNAPPAR */

.bountiful--main-wrapper a[href*="/sv/produkter.html"],
.bountiful--main-wrapper a[href*="/sv/hitta-butik.html"] {
  border-radius: 12px !important;
  transition: transform .2s ease,
              box-shadow .2s ease,
              filter .2s ease !important;
}

.bountiful--main-wrapper a[href*="/sv/produkter.html"]:hover,
.bountiful--main-wrapper a[href*="/sv/hitta-butik.html"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  filter: brightness(1.07);
}

.bountiful--main-wrapper [style*="border-radius"] {
  transition: transform .2s ease, box-shadow .2s ease;
}

.bountiful--main-wrapper
.slot--start-page > div:has(a[href*="/sv/produkter.html"]):has(a[href*="/sv/hitta-butik.html"]) {
  margin-bottom: 0 !important;
}

.bountiful--main-wrapper
.slot--start-page > div:has(a[href*="/sv/produkter.html"]):has(a[href*="/sv/hitta-butik.html"]) + div {
  margin-top: -25px !important;
}


/* 7. PRODUKTKORT */

.bountiful--main .tws-article-list--article {
  background: #25282D !important;
  border: 1px solid #41464E !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.bountiful--main .tws-article-list--article-name,
.bountiful--main .tws-article-list--article-name a {
  color: #fff !important;
  font-weight: 700 !important;
}

.bountiful--main .tws-article-list--article-price,
.bountiful--main .tws-article-list--article-price * {
  color: #FFE000 !important;
  font-weight: 800 !important;
}

.bountiful--main .tws-article-list--article:hover {
  border-color: #FFE000 !important;
}


/* 8. TOPPMENY */

.bountiful--header nav a {
  color: #fff !important;
}

.bountiful--header nav a:hover,
.bountiful--header nav a:focus,
.bountiful--header nav a[aria-current="page"],
.bountiful--header nav .active > a,
.bountiful--header nav .selected > a,
.bountiful--header .bountiful--top-menu a:hover,
.bountiful--header .bountiful--top-menu a:focus,
.bountiful--header .bountiful--top-menu .active > a,
.bountiful--header .bountiful--top-menu a.active {
  background: #FFE000 !important;
  color: #111 !important;
}

.bountiful--header nav a:hover *,
.bountiful--header nav a:focus *,
.bountiful--header nav .active > a *,
.bountiful--header nav .selected > a * {
  color: #111 !important;
}


/* 9. INKÖPSLISTA I SIDHUVUDET */

.bountiful--header .tws-mini-cart--title,
.slot--header-cart .tws-mini-cart--header-cart-text {
  font-size: 0 !important;
}

.bountiful--header .tws-mini-cart--title::after,
.slot--header-cart .tws-mini-cart--header-cart-text::after {
  content: "Min inköpslista";
  font-size: 15px !important;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}


/* 10. POPUP – PRODUKT TILLAGD */

#tws-article-buy-button-with-modal--dialog.modal-title {
  font-size: 0 !important;
}

#tws-article-buy-button-with-modal--dialog.modal-title::after {
  content: "Produkten tillagd i inköpslistan!";
  font-size: 20px;
  font-weight: 700;
  color: #111;
}

.tws-article-buy-button-with-modal--keep-shopping,
.tws-article-buy-button-with-modal--to-checkout {
  font-size: 0 !important;
}

.tws-article-buy-button-with-modal--keep-shopping::after {
  content: "Fortsätt utforska";
  font-size: 16px;
  font-weight: 500;
  color: #111;
}

.tws-article-buy-button-with-modal--to-checkout::after {
  content: "Visa min inköpslista";
  font-size: 16px;
  font-weight: 600;
  color: #111;
}


/* =====================================================
   11. MOBILANPASSNING – ENDAST UNDER 768 PX
   ===================================================== */

@media (max-width: 767px) {

  .bountiful--main-wrapper {
    border-radius: 8px !important;
  }

  .bountiful--main-wrapper a[href*="/sv/produkter.html"],
  .bountiful--main-wrapper a[href*="/sv/hitta-butik.html"] {
    border-radius: 9px !important;
  }

  /* KATEGORIER: TVÅ KORT PER RAD */

  #fo-kategoritabell {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important;
    border-spacing: 0 !important;
  }

  #fo-kategoritabell tbody {
    display: block !important;
    width: 100% !important;
  }

  #fo-kategoritabell tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  #fo-kategoritabell td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 9px !important;
    box-sizing: border-box !important;
  }

  #fo-kategoritabell td > a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* PRODUKTBILDER */

  #fo-kategoritabell td img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 115px !important;
    object-fit: contain !important;
  }

  /* KATEGORINAMN – ENDAST VANLIGA PRODUKTKORT */

  #fo-kategoritabell td > a > img + div {
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-height: 65px !important;
    padding: 12px 2px 6px !important;
    overflow-wrap: anywhere !important;
  }

  /* GULA KNAPPAR */

  #fo-kategoritabell td > a > div:last-child {
    font-size: 11px !important;
    line-height: 1.3 !important;
    padding: 12px 3px !important;
    overflow-wrap: anywhere !important;
  }

  /* ===========================================
     KAMPANJ 2026 – MOBIL
     =========================================== */

  /* GULA KAMPANJYTAN */

  #fo-kategoritabell a[href="/sv/kampanj-2022/"] > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 115px !important;
    min-height: 115px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* INRE BEHÅLLARE */

  #fo-kategoritabell a[href="/sv/kampanj-2022/"] > div:first-child > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* FYRVERKERIOUTLET */

  #fo-kategoritabell a[href="/sv/kampanj-2022/"]
  > div:first-child > div > div:first-child {
    font-size: 8px !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* KAMPANJ 2026 */

  #fo-kategoritabell a[href="/sv/kampanj-2022/"]
  > div:first-child > div > div:nth-child(2) {
    font-size: 17px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* FYNDPRISER */

  #fo-kategoritabell a[href="/sv/kampanj-2022/"]
  > div:first-child > div > div:last-child {
    font-size: 9px !important;
    line-height: 1.1 !important;
    padding: 4px 7px !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* KAMPANJKORTETS KATEGORINAMN */

  #fo-kategoritabell a[href="/sv/kampanj-2022/"] > div:nth-child(2) {
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-height: 65px !important;
    padding: 12px 2px 6px !important;
    overflow-wrap: anywhere !important;
  }

  /* SIDANS HUVUDRUBRIK */

  .bountiful--main-wrapper h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

}

/* SLUT PÅ CSS */


/* FIX – STORA GULA KNAPPAR PÅ STARTSIDAN, MOBIL */
@media (max-width: 767px) {

  /* Båda knapparna får plats i sina kolumner */
  .bountiful--main-wrapper a[href*="/sv/produkter.html"],
  .bountiful--main-wrapper a[href*="/sv/hitta-butik.html"] {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center !important;
  }

  /* Anpassa all text inuti knapparna */
  .bountiful--main-wrapper a[href*="/sv/produkter.html"] *,
  .bountiful--main-wrapper a[href*="/sv/hitta-butik.html"] * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  /* Gör huvudrubrikerna mindre */
  .bountiful--main-wrapper a[href*="/sv/produkter.html"] > div:first-child,
  .bountiful--main-wrapper a[href*="/sv/hitta-butik.html"] > div:first-child {
    font-size: clamp(19px, 5vw, 30px) !important;
    line-height: 1.15 !important;
  }

}


/* MINDRE RUBRIK PÅ GULA PRODUKTER-KNAPPEN – MOBIL */
@media (max-width: 767px) {

  .bountiful--main-wrapper a[href*="/sv/produkter.html"] > div:first-child {
    font-size: 22px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

}


/* SLUTLIG FIX – PRODUKTER-KNAPPEN PÅ MOBIL */
@media (max-width: 767px) {

  .bountiful--main-wrapper
  a[href*="/sv/produkter.html"] {
    overflow: visible !important;
  }

  .bountiful--main-wrapper
  a[href*="/sv/produkter.html"] span:first-child {
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    max-width: none !important;
  }

}


/* TEST – TVINGA MINDRE TEXT I DE TVÅ GULA KNAPPARNA */
@media (max-width: 767px) {

  a[href*="/sv/produkter.html"] > span:first-child,
  a[href*="/sv/hitta-butik.html"] > span:first-child {
    font-size: 14px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

}


/* PRODUKTPOLICY – MOBIL OCH DATOR */

#fo-policy-banner .fo-policy-desktop {
  display: block !important;
}

#fo-policy-banner .fo-policy-mobile {
  display: none !important;
}

@media (max-width: 767px) {

  #fo-policy-banner .fo-policy-desktop {
    display: none !important;
  }

  #fo-policy-banner .fo-policy-mobile {
    display: block !important;
  }

}