/* =========================================
   FLORYD – SAMLAD CSS
   Abicart / Fabrikk
   November 2026
========================================= */


/* =========================================
   1. GRUNDLAGGANDE DESIGN
========================================= */

/* Ta bort streck i mobilmenyn */
@media only screen and (max-width: 600px) {
  .tws-top-menu .navbar-nav li {
    border-bottom: 0;
  }

  .tws-top-menu--xs-toggle,
  .btn-default:active:focus {
    border: 0;
  }
}

/* Ta bort fokusram runt logotyp */
.slot--logo a,
.slot--logo a:active,
.slot--logo a:focus {
  outline: none;
}

/* Meny och undermenyer */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: transparent;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: #fff;
}

.tws-top-menu li a:hover,
.tws-top-menu li a:active {
  color: pink !important;
}

ul.dropdown-menu {
  border-radius: 10px;
}

/* Knappar */
.btn-primary {
  border-bottom: none;
}

/* Dolj Textalk-text */
.col-sm-12.powered-textalk {
  display: none !important;
}

/* Produktbilder */
.tws-article-list--list
.tws-list--type-grid
.tws-article-list--product-image {
  border: none;
}

/* Mellanrum mellan produkter */
.tws-article-list--list
.tws-list--type-grid
.tws-list--grid-item {
  margin-bottom: 50px;
}

/* Nyhetsbrev */
.tws-newsletter-subscribe--subscribe-button {
  border-bottom: 1px solid black !important;
}


/* =========================================
   2. MOBILMENY – BEFINTLIG FUNKTION
========================================= */

.mobile-menu {
  background: #323a41;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  text-align: right;
  padding-top: 60px;
  transition: .3s;
  overflow: hidden;
  font-family: Verdana, sans-serif;
}

.mobile-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 30px;
}

.mobile-menu ul li a {
  display: block;
  padding-right: 15px;
  color: #F49B27;
  text-decoration: none;
}

.mobile-menu.open {
  width: 90%;
}

.mobile-menu-btn {
  display: inline-block;
  position: fixed;
  top: 0;
  right: 10px;
  cursor: pointer;
  font-size: 30px;
  color: #F49B27;
  z-index: 99;
}

.mobile-menu-btn:after {
  content: "\f0c9";
  font-family: FontAwesome;
  transition: 1s;
}

.mobile-menu-btn.open:after {
  content: "\f00d";
}

.top-logo-mobile {
  position: absolute;
  top: 10px;
  left: 10px;
  opacity: 0;
  transition: .8s .3s;
}

.open .top-logo-mobile {
  opacity: 1;
}


/* =========================================
   3. SOKIKON BREDVID HJARTA
========================================= */

/* Befintlig flyttad sokknapp */
@media (min-width: 992px) {
  .floryd-header-search {
    display: flex;
    align-items: center;
    margin-right: 12px;
  }

  .floryd-header-search
  .tws-mega-menu--search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 5px !important;
    color: #333 !important;
    cursor: pointer;
  }

  .floryd-header-search
  .tws-mega-menu--search-button span {
    display: none !important;
  }

  .floryd-header-search .fa-search {
    font-size: 19px;
  }

  /* Dolj eventuell ursprunglig sokknapp */
  .tws-mega-menu--buttons >
  .tws-mega-menu--search-button {
    display: none !important;
  }
}

/* Separat sokikon skapad med JavaScript */
.fabrikk--header-right .floryd-search-icon {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 5px !important;
  margin: 0 8px 0 0 !important;
  color: #333 !important;
  font-size: 20px !important;
  cursor: pointer;
}

.fabrikk--header-right
.floryd-search-icon:focus-visible {
  outline: 2px solid #333 !important;
  outline-offset: 3px;
}

/*
  OBS: Mobilens stora sokruta ar inte
  dold har. Vi behover verifiera hur
  den oppnas innan vi doljer den.
*/





/* =========================================
   5. MELLANRUM – STARTSIDAN DATOR
========================================= */

@media (min-width: 992px) {

  .fabrikk--start-page
  .fabrikk--component-container > div {
    margin-bottom: 0 !important;
  }

  .fabrikk--start-page
  .fabrikk--component-container >
  div[class*=" 4-"] {
    margin-bottom: revert !important;
  }
}


/* =========================================
   6. MELLANRUM – DATOR OCH SURFPLATTA
========================================= */

@media (min-width: 768px) {

  .fabrikk--start-page .bild-p-floryd-mugg,
  .fabrikk--start-page .retro-nyheter-frn-floryd,
  .fabrikk--start-page .mumin-karleksgva,
  .fabrikk--start-page .te,
  .fabrikk--start-page .mumin-kalendrar,
  .fabrikk--start-page .produkter-ljuslyktor,
  .fabrikk--start-page .beskrivning-floryd-mumin {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* =========================================
   7. MELLANRUM – MOBIL
========================================= */

@media (max-width: 767px) {

  .fabrikk--start-page .bild-p-floryd-mugg,
  .fabrikk--start-page .retro-nyheter-frn-floryd,
  .fabrikk--start-page .mumin-jul,
  .fabrikk--start-page .mumin-karleksgva,
  .fabrikk--start-page .mumin-kalendrar,
  .fabrikk--start-page .mumin-ljus-lyktor,
  .fabrikk--start-page .produkter-ljuslyktor,
  .fabrikk--start-page .nyckelringar,
  .fabrikk--start-page .floryd-mode-karusell,
  .fabrikk--start-page .tws-container--tws-instagram,
  .fabrikk--start-page .our-story-instagram,
  .fabrikk--start-page .tws-container--tws-newsletter-subscribe,
  .fabrikk--start-page .about,
  .fabrikk--start-page .beskrivning-floryd-mumin {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* =========================================
   8. PRODUKTKNAPPAR – MOBIL
========================================= */

@media (max-width: 480px) {

  .tws-article-list--buy-button
  .btn-primary .ladda-label {
    font-size: 11px !important;
    letter-spacing: 0;
    padding: 0 !important;
  }

  .tws-list--type-carousel
  .tws-article-list--buy-button
  .btn-primary .ladda-label {
    font-size: 10px !important;
  }
}

/* =========================================
   SLUT – FLORYD CSS
========================================= */

/* FLORYD – sökfält som öppnas vid klick på mobil */

@media screen and (max-width: 991px) {

  /* Dölj stora sökrutan från början */
  .tws-mega-menu--search-bar {
    display: none !important;
  }

  /* Visa sökrutan när sökikonen aktiveras */
  body.floryd-search-open
  .tws-mega-menu--search-bar {
    display: block !important;
  }

}

/* Fet text i alla skyltfönster */
.tws-content-box--cell,
.tws-content-box--cell * {
  font-weight: 900 !important;
  -webkit-text-stroke: 0.3px currentColor;
}

/* Luft mellan texten och skyltfönstrets kanter */
.tws-content-box--cell {
  padding: 15px 20px !important;
  box-sizing: border-box;
}