.elementor-kit-76{--e-global-color-primary:#F2A1A1;--e-global-color-secondary:#6FA3A0;--e-global-color-text:#1F4267;--e-global-color-accent:#D9CFE8;--e-global-color-d330983:#FFF6F2;--e-global-color-748ad33:#FFEAEA;--e-global-color-e472d1e:#EAF4F3;--e-global-color-7ad3c7e:#FFF2CC;--e-global-color-a177460:#F1ECF7;--e-global-color-9a54cb6:#FFFFFF;--e-global-color-dd8709c:#FFF7E6;--e-global-color-a7d9d21:#D4F5DC;--e-global-color-bc37a88:#FFE0CB;--e-global-color-8da51d0:#FAD6E6;--e-global-color-610f2c1:#D7EDFF;--e-global-color-20dcf14:#E2F0CB;--e-global-color-f9886f3:#FDFCF9;--e-global-color-6979ffa:#FFFDF4;--e-global-color-025fb72:#F9F6F0;--e-global-color-1c87613:#F7E1D7;--e-global-color-ca21487:#262626;--e-global-color-207471f:#B7E1FF;--e-global-color-cff560d:#ECF7FF;--e-global-color-f019ec3:#F5F5F5;--e-global-color-25dad76:#75BFEA;--e-global-color-e661e71:#FFF8B5;--e-global-color-168baca:#CDE6F9;--e-global-color-ad72079:#FFF7E6;--e-global-color-14972ae:#CDE6F9;--e-global-color-669d23b:#D4F5DC;--e-global-color-27264aa:#F7E1D7;--e-global-color-428ae11:#FFFCF3;--e-global-color-720d443:#FFFDF7;--e-global-color-6c7e8e3:#FFFEF9;--e-global-color-68f52ff:#FCF4E6;--e-global-color-613e97d:#CADFC5;--e-global-color-ef536bc:#F1FCFF;--e-global-color-2707fb5:#FFFAF4;--e-global-color-fa4b120:#E783B3;--e-global-color-b21cdea:#608EB2;--e-global-color-e3b9d00:#538BB7;--e-global-color-d06ca22:#7EBCEB;--e-global-color-f0e4878:#76A3C6;--e-global-color-7cfd9ae:#9FCE9B;--e-global-color-aeb25a8:#F1FCFF;--e-global-color-adc86b1:#F8FCFF;--e-global-color-2bb26cc:#FFFFFF;--e-global-color-8cebb8c:#F39AC0;--e-global-color-cb62638:#76A3C6;--e-global-color-f11e434:#BEBEFF;--e-global-color-bd195c4:#A0F0FF;--e-global-color-b152a84:#8CDCA0;--e-global-color-aef4df8:#CFE9FB;--e-global-typography-primary-font-family:"Fredoka";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Fredoka";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Nunito";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Nunito";--e-global-typography-accent-font-weight:600;--e-global-typography-903de1d-font-family:"Nunito";--e-global-typography-903de1d-font-size:20px;--e-global-typography-903de1d-font-weight:700;--e-global-typography-903de1d-font-style:normal;--e-global-typography-b7c3b63-font-family:"Nunito";--e-global-typography-b7c3b63-font-size:11px;--e-global-typography-b7c3b63-line-height:10px;color:var( --e-global-color-text );font-family:"Nunito", Sans-serif;font-size:1rem;font-weight:400;line-height:1.4lh;background-color:var( --e-global-color-cff560d );}.elementor-kit-76 p{margin-block-end:0.9em;}.elementor-kit-76 a{color:var( --e-global-color-primary );font-family:"Nunito", Sans-serif;font-weight:600;text-decoration:none;}.elementor-kit-76 a:hover{color:var( --e-global-color-primary );text-decoration:none;}.elementor-kit-76 h1{color:var( --e-global-color-text );font-family:"Fredoka", Sans-serif;font-size:3.2rem;font-weight:600;line-height:1.2lh;}.elementor-kit-76 h2{color:var( --e-global-color-text );font-family:"Fredoka", Sans-serif;font-size:2.2rem;font-weight:500;line-height:1.6lh;}.elementor-kit-76 h3{color:var( --e-global-color-text );font-family:"Nunito", Sans-serif;font-size:1.4rem;font-weight:700;line-height:1.3lh;}.elementor-kit-76 h4{color:var( --e-global-color-text );font-family:"Nunito", Sans-serif;font-size:1.1rem;font-weight:600;font-style:normal;line-height:1.35lh;}.elementor-kit-76 h5{color:var( --e-global-color-text );font-family:"Nunito", Sans-serif;font-size:1rem;font-weight:600;line-height:1.4lh;}.elementor-kit-76 h6{font-family:"Nunito", Sans-serif;font-size:0.9rem;font-weight:500;line-height:1.45lh;}.elementor-kit-76 button,.elementor-kit-76 input[type="button"],.elementor-kit-76 input[type="submit"],.elementor-kit-76 .elementor-button{color:var( --e-global-color-9a54cb6 );background-color:var( --e-global-color-primary );box-shadow:1px 1px 10px 0px rgba(0, 0, 0, 0.1);border-style:none;border-radius:30px 30px 30px 30px;}.elementor-kit-76 button:hover,.elementor-kit-76 button:focus,.elementor-kit-76 input[type="button"]:hover,.elementor-kit-76 input[type="button"]:focus,.elementor-kit-76 input[type="submit"]:hover,.elementor-kit-76 input[type="submit"]:focus,.elementor-kit-76 .elementor-button:hover,.elementor-kit-76 .elementor-button:focus{color:#FFFFFF;border-style:none;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-76 e-page-transition{background-color:#FFBC7D;}@media(max-width:1366px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:940px;}.e-con{--container-max-width:940px;}}@media(max-width:1024px){.elementor-kit-76 h1{font-size:2.6rem;}.elementor-kit-76 h2{font-size:1.9rem;}.elementor-kit-76 h3{font-size:1.3rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:700px;}.e-con{--container-max-width:700px;--container-default-padding-top:10px;--container-default-padding-right:24px;--container-default-padding-bottom:10px;--container-default-padding-left:24px;}}@media(max-width:767px){.elementor-kit-76{font-size:0.95rem;}.elementor-kit-76 h1{font-size:2.1rem;}.elementor-kit-76 h2{font-size:1.6rem;line-height:1.1lh;}.elementor-kit-76 h3{font-size:1.2rem;}.elementor-kit-76 h4{font-size:1.05rem;}.elementor-kit-76 h5{font-size:0.95rem;line-height:1.4lh;}.elementor-kit-76 h6{font-size:0.85rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:20px;--container-default-padding-bottom:0px;--container-default-padding-left:20px;}}/* Start custom CSS *//*PAKET RABBATT MOTOR*/

.klure-package-label-visible {
  display: inline-block;
  margin-right: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #f28f9d;
}

/* Organisera denna kod när du har tid */

/*Gömmer en extra knapp som är dubblerad för plugginet WPC prodict bundles*/
.woosb-wrap + form.cart {
  display: none !important;
}


/* =================
step lägger in en rund circel på sektionen för så enkelt är det 1, 2, 3
================ */
.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #f28c8c;
  color: white;
  border-radius: 50%;
  font-weight: bold;
}

@media (max-width: 767px) { .step{
      font-weight: normal;
      font-size:11px;
  width: 20px;
  height: 20px;}
}


/*Denna används på containers för att dom ska kyrmpa och passa innehållet- lägg under klure-container*/
.fit-width {
  width: fit-content;
  max-width: 100%;
}


/*Fixa denna preload class och lägg på element som laddar segt tex accordion icons, kopplas till javascript tror jag
.klure-preload{
  opacity: 0;
  transition: opacity 0.2s ease-out;
}*/


/* ============================================================
   Produkt kort
   klassen klure-product-loop-card är satt på loopen som kallar efter loopen. och klure-product-card är satt på den andra containern i produkt loopen. denna är nu kopplad till template product loop 003
============================================================ */

.klure-product-loop-card .elementor-loop-container * {
  min-width: 0;
}

.klure-product-card{
  position: relative;
  width: 100%;
  /*aspect-ratio: 3 / 4.2;*/
  aspect-ratio: auto;
  background: #fff;
min-height: 480px;
}
.klure-product-card > * {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.klure-product-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  overflow: hidden;
}

/* Mobil puts */
@media (max-width: 767px){
    
  /* Gör kortet lite mer "stående" på mobil så allt får plats */
  .klure-product-card {
    aspect-ratio: auto ;
    min-height: 320px;
  }    
    
  /* Bildhöjd: använd clamp så den blir lagom oavsett mobil */
  .klure-product-card img{
    height: clamp( 365px, 38vw, 240px);
  }

}

  /* Släpp den låsta höjden på mobil */
/*Dubbel?
@media (max-width: 767px){
  .klure-product-card{
    aspect-ratio: auto;
  }
}
*/

@media (max-width: 767px) {

  .klure-product-card {
    aspect-ratio: auto;
    min-height: unset;
  }

  .klure-product-card img {
    height: clamp(220px, 55vw, 290px);
  }

}



/* ============================================================
/*Header space from top 
============================================================ */
.klure-top {
  padding-top: var(--header-offset, 20px);
}

@media (max-width: 1024px) {
  .klure-top {
    --header-offset: 10px;
  }
}

@media (max-width: 767px) {
  .klure-top {
    --header-offset: 0px;
  }
}




/* ============================================================
   GLOBALA FIXAR OCH ALLMÄNNA INSTÄLLNINGAR
   Säker scroll på mobil, inga horisontella buggar,
   och ingen zoom för inputfält i iOS.
============================================================ */

/* Mobil scroll fix + förhindra sidledsbounce */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* ============================================================
   SCROLL-BETEENDE
   Viktigt: Tillåt pull-to-refresh, men minska oönskad sidledsbounce.
============================================================ */

/* Default, låt browsern sköta refresh och normal scroll */
html, body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: auto;
}

/* Mobil, hindra sidledsbounce men låt vertical refresh fungera */
@media (max-width: 768px) {
  html, body {
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
  }
}



footer, .site-footer {
    position: relative !important;
    z-index: 1 !important;
}

.h1-hero h1,
h1.h1-hero {
  font-size: 3.2rem;
  line-height: 1.15;
}

@media (max-width: 1400px) {
  .h1-hero h1,
  h1.h1-hero {
    font-size: 2.6rem;
  }
}

@media (max-width: 1024px) {
  .h1-hero h1,
  h1.h1-hero {
    font-size: 2rem;
  }
}

@media (max-width: 767px) {
  .h1-hero h1,
  h1.h1-hero {
    font-size: 2.1rem!important;
  }
}


.elementor-lightbox,
.elementor-lightbox-modal {
    position: fixed !important;
    z-index: 999999 !important;
}

.elementor-lightbox-image {
    max-height: 100vh !important;
    object-fit: contain !important;
}

.klure-auto-width{width:auto;}


/* iOS input zoom fix */
input, textarea, select {
  font-size: 16px !important;
}

/* Begränsa vilka element som får special-scrollbars */
body, .klure-gallery-thumbs {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.3) transparent;
}

/* Göm standard-scrollbar i WebKit */
.klure-gallery-thumbs::-webkit-scrollbar {
  display: none;
}

/* Lightbox ska inte påverkas av våra scrollbars */
.elementor-lightbox * {
  scrollbar-width: auto !important;
  scrollbar-color: auto !important;
}

/* Ta bort hover-zoom på WooCommerce default gallery */
.woocommerce-product-gallery .woocommerce-product-gallery__image:hover img {
  transform: none !important;
}


/* ============================================================
   KLURE PRODUKTGALLERI – HUVUDVISNING OCH SLIDER
============================================================ */

/* Wrapper */
.klure-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
         box-shadow: 3px 3px 10px rgba(0,0,0,0.08);

  border-radius: 16px;
}

/* Området med huvudbilden */
.klure-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: inherit;
}

/* Spår för slides */
.klure-gallery-track {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translateX(0);
    will-change: transform;
}

/* Enskild slide */
.klure-slide {
    flex: 0 0 100%;
    height: 100%;
  overflow: hidden;
}

/* Huvudbilder */
.klure-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
}

/* Lightbox-bildfix */
.elementor-lightbox .elementor-lightbox-image {
    max-width: 100% !important;
    max-height: 100vh !important;
    object-fit: contain !important;
}


/* Låt sidan scrolla vertikalt, men undvik att mobilen försöker tolka horisontella gester som sidscroll */
.klure-gallery-main {
  touch-action: pan-y;
}

/* Minska "rubber band" och oönskad scroll chaining på iOS/Android */
/*19jan .klure-gallery-main,
.klure-gallery-thumbs {
  overscroll-behavior: contain;
}
*/
/* På huvudbilden vill vi inte blocka browserns "pull-to-refresh" */
.klure-gallery-main {
  overscroll-behavior: auto;
}

/* Thumbnails får gärna ha contain så sidan inte drar iväg när listan tar slut */
/*.klure-gallery-thumbs {
  overscroll-behavior: contain;
}
*/





/* ============================================================
   KLURE PRODUKTGALLERI – THUMBNAILS
============================================================ */
.klure-gallery-thumbs {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-115%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  width: 170px;
  max-width: 170px;
  max-height: 100%;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 12px;
  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.klure-thumb {
  flex: 0 0 auto;
  border: none;
  padding: 0;
  margin: 0;
  width: 150px;
  height: 150px;
  border-radius: 16px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.klure-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* ============================================================
   MOBILANPASSNING FÖR GALLERI
============================================================ */

@media (max-width: 700px) {

    .klure-gallery-thumbs {
        left: 50%;
        top: auto;
        bottom: 0.8rem;
        transform: translateX(-50%);
        flex-direction: row;
        width: 90%;
        max-width: 90%;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0.8rem;
        max-height: none;
        
    }

    .klure-thumb {
        width: 80px;
        height: 80px;
        border-radius: 14px;
    }
}




/* ============================================================
   LAPTOP: thumbs under kortet, horisontellt
   PREV: Ca 701px – 1200px  
   Nytt: 701px - 1500px
============================================================ */
@media (min-width: 701px) and (max-width: 1500px) {

    .klure-gallery-thumbs {
        left: 50%;
        top: auto;
        bottom: 0.8rem;
        transform: translateX(-50%);
        flex-direction: row;
        width: 90%;
        max-width: 90%;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0.8rem;
        max-height: none;
        
    }

    .klure-thumb {
        width: 80px;
        height: 80px;
        border-radius: 14px;
    }
}



/* ============================================================
   EXTRA GLOBALA BETEENDEN
============================================================ */

/* Mjuk scroll och mindre "bounce" på iOS utan att ändra overflow-x */

/*
html, body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}*/

/* Ta bort störande hover-transform på mobil */
@media (max-width: 768px) {
  .elementor-button:hover,
  .elementor-cta__button:hover,
  .klure-container:hover {
    transform: none !important;
  }
}

/*Denna tar bort onödig spacing efter paragrafer*/
.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   ALLMÄNNA KLURE-CONTAINRAR OCH SKUGGOR
============================================================ */

/* Grundboxar med rundade hörn och lätt skugga */
.klure-container,
.elementor-widget-call-to-action {
  box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.08);
  border-radius: 16px;
  overflow: hidden;
}

/* Färgvariant, styrs via global Elementor-färg */
.klure-color-container {
  background-color: var(--e-global-color-ad72079);
}

/* Lite starkare skugga vid hover */
.klure-container-hover:hover {
  box-shadow: 3px 3px 10px 1px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

/* Skugga för kort och sektioner */
.klure-shadow {
  box-shadow: 0px 9px 24px 3px rgba(0,0,0,0.1);
}

.klure-shadow_2 {
  box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.08);
}

.klure-shadow_3 {
  box-shadow: 3px 3px 10px 3px rgba(0,0,0,0.15);
}

/* Skugga på text, bra för rubriker på ljus bakgrund */
.klure-shadow_text {
  text-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

/* Extra padding-box du kan återanvända */
.klure-padding {
  padding: 30px;
}

/* Tvingar text i vissa kolumner att vara vänsterjusterad */
.klure-left p {
  text-align: left !important;
}

.klure-effect:hover {
      transform: translateY(-0.1rem);
}

/* ============================================================
   BILDCONTAINERS OCH KARUSELLKORT
============================================================ */

/* Bildkort med ram, skugga och 3:4-format, används för produktbilder */
.klure-img {
  border: 5% solid #fff;
  box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
  border-radius: 16px;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 420px;
  height: auto;
  perspective: 1000px;
  position: relative;
  padding: 20%;
  justify-content: center !important;
  min-height: 100px;
}

.klure-img:hover {
  box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
}

/* Bilder i enklare karuseller */
.klure-carousel-img {
  height: 200px;
  width: 100%;
  object-fit: contain;
}

/* Kort i karusell, håller 3:4 och låter skugga synas utanför */
.klure-carusel-card {
  perspective: 1000px;
  width: min(90vw, 280px);
  aspect-ratio: 3 / 4;
  margin: auto;
  padding: 10px;
  overflow: visible !important;
}

/* Mobilanpassning av karusellkorten */
@media (max-width: 768px) {
  .klure-carusel-card {
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 10px;
    margin: auto;
  }
}


/* ============================================================
   TYPOGRAFIHJÄLPARE FÖR PRIS OCH TEXT
============================================================ */

/* Standardtext, följer globalt texttypsnitt */
.klure-text-p {
  font-family: var(--e-global-typography-text-font-family);
  font-weight: var(--e-global-typography-text-font-weight);
}

/* Bold text, t ex pris eller kort titel */
.klure-text-B {
  font-family: var(--e-global-typography-primary-font-family);
  font-weight: var(--e-global-typography-primary-font-weight);
  font-size: 18px;
}


/* ============================================================
   UNIVERSAL KLURE CARD-CONTAINER (.klure-card)
============================================================ */

/* Själva kortet, håller alltid 3:4 och har skugga */
.klure-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
}

/* Barn till kortet får inte spränga ytan */
.klure-card > * {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  /*padding: 0;*/
}

/* Bild i kortet fyller hela ytan */
.klure-card img,
.klure-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobiljustering, ingen extra padding på kortet */
@media (max-width: 768px) {
  .klure-card {
    padding: 0;
  }
}


/* ============================================================
   FLIP CARDS (VÄNDBARA KORT)
============================================================ */

/* Container som sätter storlek och 3D-perspektiv */
.card-container {
  width: 250px;
  height: 320px;
  perspective: 1000px;
  margin: 0 auto;
}

/* Själva kortet, roteras vid .is-flipped */
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  cursor: pointer;
}

/* Klass som vänder kortet */
.card.is-flipped {
  transform: rotateY(180deg);
}

/* En sida av kortet, fram eller bak */
.card-side {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  font-weight: inherit;
  font-family: inherit;
  font-size: 24px;
}

/* Framsida och baksida delar grundlayout */
.card-front,
.card-back {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff6e1;
  font-size: 24px;
}

/* Extra wrapper för att centrera bild inuti kortet */
.img-wrapper {
  width: 65%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Bild direkt på framsidan */
.card-front img {
  width: 85%;
  height: auto;
  max-height: 85%;
  object-fit: contain;
}

/* Baksidan roteras 180 grader */
.card-back {
  transform: rotateY(180deg);
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}


/* ============================================================
   PRODUKTKORT OVERLAY-LÄNK
============================================================ */

/* Gör hela kortet klickbart över sitt innehåll */
.klure-overlay-link {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: block;
}

/* Se till att knappar och produktlänkar ligger över overlay */
.add_to_cart_button,
.woocommerce-loop-product__link {
  position: relative;
  z-index: 10;
}


/* ============================================================
   PRODUKT-SLIDER FADE-IN VID INIT
============================================================ */

/* Göm slider tills Swiper är redo, minskar "flash" */
.klure-product-slider .swiper,
.klure-product-slider .elementor-swiper {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* När Swiper är initierad visas slider */
.klure-product-slider .swiper.swiper-initialized,
.klure-product-slider .elementor-swiper.swiper-initialized {
  opacity: 1;
}



/* ============================================================
   ELEMENTOR KNAPPAR OCH IKONKNAPPAR
============================================================ */
/* =====================================
   BUTTON BASE, gäller alla knappar
===================================== */

.elementor-button {
  border-radius: 999px;
  background-color: var(--e-global-color-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.15);
  transition: transform .12s ease, background-color .2s ease, border-color .2s ease;
}

/* Hover, samma för alla */
.elementor-button:hover {
  transform: translateY(-0.5px);
  background-color: color-mix(
    in srgb,
    var(--e-global-color-primary) 98%,
    black
  )!important;
  border-color: color-mix(
    in srgb,
    var(--e-global-color-primary) 98%,
    black
  )!important;
}

/* =====================================
   SECONDARY BUTTON, outline
===================================== */

.btn-secondary .elementor-button {
      padding: 13px 28px; /* matchar primary visuellt */
  border-radius: 999px;
  background-color: transparent;
  color: var(--e-global-color-secondary);
  border: 2px solid var(--e-global-color-secondary)!important;
  box-shadow: none;
}

/* Hover, exakt samma rörelse och mörkning */
.btn-secondary .elementor-button:hover {
  transform: translateY(-0.5px);
  background-color: color-mix(
    in srgb,
    var(--e-global-color-secondary) 8%,
    transparent
  )!important;
  border-color: color-mix(
    in srgb,
    var(--e-global-color-secondary) 95%,
    black
  )!important;
  color: var(--e-global-color-secondary)!important;
}

/* =====================================
   CTA Button
===================================== */


/* CTA får samma inställningar som secondary btn"*/
.elementor-cta__button {
  padding: 13px 28px; /* matchar primary visuellt */
  border-radius: 999px!important;
  background-color: transparent!important;
  color: var(--e-global-color-secondary)!important;
  border: 2px solid var(--e-global-color-secondary)!important;
  box-shadow: none;
    text-decoration: none !important;
}


/* copy av secondary btn och elementor btn*/

.elementor-cta__button:hover ,
.elementor-cta__button:active{
  transform: translateY(-0.5px);
  background-color: color-mix(
    in srgb,
    var(--e-global-color-secondary) 8%,
    transparent
  )!important;
  border-color: color-mix(
    in srgb,
    var(--e-global-color-secondary) 95%,
    black
  )!important;
  color: var(--e-global-color-secondary)!important;
}


/* Standardknapp, rund pillform med skugga */
/*Inactive 16 Jan
.elementor-button {
  padding: 15px 30px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(239,124,167,0.25) !important;
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
}*/

/* Hover-effekt på standardknappen */
/*Inactive 16 Jan
.elementor-button:hover {
  background: var(--brand-dark, #F390BA);
  transform: translateY(-1px);
}*/

/* Outline-variant, transparent bakgrund med ram  */
/*Inactive 16 Jan
.elementor-button.outline {
  background: transparent;
  color: var(--ink, #F390BA);
  border: 2px solid var(--ink, #F390BA);
  box-shadow: none !important;
}
*/

/* Ta bort understrykning på knappar */
/*Inactive 16 Jan
.elementor-button,
.elementor-button:visited,
.elementor-button:hover {
  text-decoration: none !important;
}*/

/* CTA-knapp får lite extra lyft vid hover */  
/*Inactive 16 Jan
.elementor-cta__button:hover {
  background: var(--brand-dark, #F390BA) !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}
*/

/* Old cta button ersatt med secondary btn-secondary
Ny version av ovan "CTA-knapp får lite extra lyft vid hover"
.elementor-cta__button {
  padding: 13px 28px; 
  border-radius: 999px;
  background-color: transparent;
  color: var(--e-global-color-secondary);
  border: 2px solid var(--e-global-color-secondary)!important;
  box-shadow: none;
} */

/* Old cta button ersatt med secondary btn-secondary
 Hover, exakt samma rörelse och mörkning 
.elementor-cta__button:hover {
  transform: translateY(-1px);
  background-color: color-mix(
    in srgb,
    var(--e-global-color-secondary) 10%,
    transparent
  );
  border-color: color-mix(
    in srgb,
    var(--e-global-color-secondary) 90%,
    black
  );
  color: var(--e-global-color-secondary);
}
*/

/* =====================================
   Woocommerce standard knappar
===================================== */

/* Klure buttons, WooCommerce */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: 999px;
  background-color: var(--e-global-color-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.15);
  transition: transform .12s ease, background-color .2s ease, border-color .2s ease;
}

/* Hover, active, focus-visible */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:focus-visible {
  transform: translateY(-0.5px);
  background-color: color-mix(
    in srgb,
    var(--e-global-color-primary) 98%,
    black
  );
  border-color: color-mix(
    in srgb,
    var(--e-global-color-primary) 98%,
    black
  );
}




.elementor-menu-cart__toggle_button {
  background: transparent!important;
  box-shadow: none !important;
}

.elementor-menu-cart__toggle_button:active, 
.elementor-menu-cart__toggle_button:hover,
.elementor-menu-cart__toggle_button:focus,
.elementor-menu-cart__toggle_button:focus-visible {
  background: transparent!important;
  border-color: transparent!important;
  outline: none !important;
}



/* Centrerar ikoner i Elementor */
.elementor-icon-wrapper {
  display: flex !important;
}

/* Ikonknapp, helt rund, transparent bakgrund */
.circle-button {
  border-radius: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Variant med skugga, t ex för flytande knappar */
.circle-button.shadow {
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Hover-effekt på runda ikonknappar */
.circle-button:hover {
  transform: translateY(-10px);
}

/* Markerar aktiv menyknapp */
.circle-button.current-menu-item {
  background: var(--e-global-color-primary);
  color: #fff;
}



/* ============================================================
   ELEMENTOR CTA widget loop 
============================================================ */

/* CTA vänds reverse varannan bild när man lägger till klassen klure-reverse-even-cta Ändrar både desktop tablet och mobil*/

div[data-elementor-type="loop-item"]:nth-child(even) .klure-reverse-even-cta .elementor-cta {
  flex-direction: row;
}

/* CTA Bara desktop CTA vänds reverse varannan bild när man lägger till klassen klure-reverse-even-cta Ändrar bara desktop, kan användas istället för den ovan bara ändra och aktivera*/
/*@media (min-width: 768px) {
div[data-elementor-type="loop-item"]:nth-child(even) .klure-reverse-even-cta .elementor-cta {
    flex-direction: row;}} */

div[data-elementor-type="loop-item"]:nth-child(odd) .klure-cta-oddcolor {
  flex-direction: row !important;
  /*CTA Background odd custom css global settings*/
  background-color:var(--e-global-color-adc86b1);
}

div[data-elementor-type="loop-item"]:nth-child(even) .klure-cta-oddcolor {
  flex-direction: row !important;
  /*CTA Background even custom css global settings*/
  background-color:var(--e-global-color-2bb26cc);
}


/* ============================================================
   FORMULÄR OCH INPUTS
============================================================ */

/* Grundradius på inputs med klure-input */
.klure-input {
  border-radius: 16px;
}

/* Extra klass för att ge inputs radius även där Elementor strular */
.klure-input-radius {
  border-radius: 12px !important;
}

/* Fullbredds-element, t ex knapp eller input */
.klure-full-width {
  display: block;
  width: 100%;
}

/* Labelstil för formulär, konsekvent typografi */
.form-label {
  display: block;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  padding-left: 0.4rem;
  color: var(--e-global-color-secondary);
  font-family: var(--e-global-typography-secondary-font-family);
  font-weight: 400;
}

/* Göm ikon framför formulärmeddelanden i Elementor */
.elementor-message:before {
  display: none;
}

/* Spinner i knappen vid loading-state */
.loading-spinner {
  border: 3px solid #fff;
  border-top: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* Animation för spinnern */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Disabled-style på knapp när den "laddar" */
.submit-btn.loading {
  opacity: 0.8;
  pointer-events: none;
}


/* ============================================================
   RATINGSTJÄRNOR
============================================================ */

.rating-area {
  text-align: center;
  margin: 1rem 0;
}

.rating-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 4px;
}

.rating-stars input {
  display: none;
}

.rating-stars label {
  font-size: 30px;
  color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Färg vid hover och vald stjärna */
.rating-stars input:checked ~ label,
.rating-stars label:hover,
.rating-stars label:hover ~ label {
  color: var(--e-global-color-secondary);
}

/* Mindre stjärnor på väldigt små mobiler */
@media (max-width: 480px) {
  .rating-stars label {
    font-size: 24px;
  }
}


/* ============================================================
   SIDVAGN, MINICART OCH KORG-TEXTER
============================================================ */

/* Titel högst upp i Elementor minicart */
.elementor-menu-cart__products::before {
  content: "Din varukorg";
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  padding: 0 0px;
  text-align: left;
}

/* Egen text när korgen är tom */
.woocommerce-mini-cart__empty-message::before {
  content: "Din Klure-korg är tom just nu.";
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 10px;
}

/* Dölj originaltexten genom att sätta fontstorleken till 0 */
.woocommerce-mini-cart__empty-message {
  font-size: 0;
}

/* Extra rubrikklass om du vill placera titel manuellt någonstans */
.klure-cart-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin: 15px 20px;
}

/* Rundade knappar i sidovagnen (xoo-wsc) */
.xoo-wsc-btn {
  border-radius: 16px !important;
}


/* ============================================================
   QR-KNAPP – VISAS ENDAST FÖR QR-BESÖKARE
============================================================ */

/* Dölj QR-knappen som standard */
.qr-button {
  display: none;
}

/* Visa QR-knappen endast om användaren har besökt QR-sidan */
body.has-visited-qr .qr-button {
  display: inline-block;
}


/* ============================================================
   EMAILFORM – INLINE KNAPP INUTI INPUT
============================================================ */

/* Wrapper måste vara position: relative för att kunna absolut-positionera knappen */
.klure-email-inline .elementor-form-fields-wrapper {
  position: relative;
}

/* Placera submit-knappen inne i högra delen av inputfältet */
.klure-email-inline .elementor-field-group.elementor-field-type-submit {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  margin: 0;

  /* Viktigt, låt inputfältet gå att klicka */
  pointer-events: none;

  /* Behåll layout, men låt inte denna blockera input */
  display: flex;
  align-items: center;
}

/* Själva knappen ska däremot vara klickbar */
#klure-inline-btn.elementor-button {
  pointer-events: auto;
}

/* För inline-knappen vill vi ofta undvika hover-studs */
#klure-inline-btn.elementor-button:hover {
  box-shadow: none;
  transform: none;
}


/* ============================================================
   KLURE GLOBAL SECTION SPACING
   Use: outer = .klure-parent, inner = .klure-inner
============================================================ */

/* Outer section wrapper, vertical rhythm + safe side padding */
.klure-parent {
  padding-top: 88px;
  padding-bottom: 88px;
  padding-left: 0;
  padding-right: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  .klure-parent {
    padding-top: 72px;
    padding-bottom: 72px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .klure-parent {
    padding-top: 56px;
    padding-bottom: 56px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Inner content wrapper, never add side padding */
.klure-inner {
  /*padding-left: 10px;
  padding-right: 10px;*/
  padding-top:10px;
  padding-bottom:10px;
}

/* Safety, avoid accidental extra padding from nested sections 
.klure-parent .klure-inner .klure-inner {
  padding-left: 0;
  padding-right: 0;
} */





/* ============================================================
   Woocommerce custom quantity button
============================================================ */


/* Wrapper för hela quantity-fältet */
.woocommerce .quantity {
    display: flex;
    align-items: center;
    border: 1px solid #d9d9d9;
    border-radius: 40px;
    padding: 6px 8px;
    width: fit-content;
    background: #fff;
}

/* Minus-knappen */
.woocommerce .quantity .minus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background: transparent;
    border: none;
    color: #555;
    cursor: pointer;
    line-height: 1;
    font-size: 20px;

}



/* Input-fältet (antalet) */
.woocommerce .quantity .qty {
    background: #fff;
    border: none;
    color: #555;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50 percent;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Plus-knappen, rund form till höger */
.woocommerce .quantity .plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background: transparent;
    border: none;
    color: #555;
    cursor: pointer;
    line-height: 1;
    font-size: 20px;
}

/* Hover för plus-knappen med Klures primärfärg */
.woocommerce .quantity .plus:hover,
.woocommerce .quantity .minus:hover {
    background: var(--e-global-color-primary);
    color: #fff;
}




/* =========================================
SKAPAR EN SNYGG TABLE FÖR ACCORDIION FÖR ADDITIONAL PRODUKT Information
endast table för prodult info inte för accordion

   KLURE, Additional Information, shop_attributes
   Gör varje attributrad till ett eget "kort"
========================================= */

/* Nolla tabellens klassiska borders, men bara för shop_attributes */

.woocommerce table.shop_attributes,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  border: 0 !important;
}

/* Varje attributrad som ett eget block */
.woocommerce table.shop_attributes tr {
  display: block;
  padding: 1rem;
  border-radius: 16px;
  margin-bottom: 0;
  border-bottom: 6px solid rgba(0,0,0,0.08);
}

/* Rubriken, t.ex. Ålder */
.woocommerce table.shop_attributes th {
  display: block;
  font-weight: 600;
  font-size: 1.2rem;
  padding: 0;
  text-align: left;
  margin-bottom: 0;
}

/* Värdet, t.ex. 4–7 år */
.woocommerce table.shop_attributes td {
  display: block;
  padding: 0;
    /*background: rgba(0,0,0,0.02);*/
}


/*Mitt konto woocomerce*/
.woocommerce-MyAccount-navigation *{  color: var(--e-global-color-text)!important;}


/* ===============================
   KLURE – Accordion styling
================================ */


.klure-hover-shadow .e-n-accordion-item-title:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/*Snygg effekt när man klickar på accordion hoppar den till*/
.e-n-accordion-item-title:active {
      transform: translateY(-0.05rem);
}

/*.klure-accordion .e-n-accordion-item-title:hover {
transform: translateY(-0.05rem);
    
} */














/* =========================================
Filter taxonomy 
========================================= */

/* Selected icon
.klure-filter-banner .e-filter .e-filter-item[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--e-global-color-primary);
}
*/


/*=========================================
Filter banner badge from top
=========================================*/

.klure-filter-banner .e-filter .e-filter-item{
  display: inline-flex;
  align-items: center;
  padding: 40px 8px 6px; /* top | left-right | bottom */
  border-radius: 0 0 12px 12px;
  min-width: 60px;
     background: color-mix(
    in srgb,
    var(--e-global-color-accent) 100%,
    #fff
  );
      color:var(--e-global-color-text);
        box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

/* secondary filter not in use 
.klure-filter-banner-type .e-filter .e-filter-item {  padding: 20px 8px 6px;
     background: color-mix(
    in srgb,
    var(--e-global-color-accent) 60%,
    #fff
  );    
} */




/* Hover, men bara om den inte redan är aktiv */
.klure-filter-banner .e-filter .e-filter-item[aria-pressed="false"]:hover {   background: color-mix(
    in srgb,
    var(--e-global-color-primary) 100%,
    #fff
  );
  color: #fff;
          box-shadow:0 6px 10px rgba(0,0,0,0.3);
}


/*Selected */
.klure-filter-banner .e-filter .e-filter-item[aria-pressed="true"] {
  background: color-mix(
    in srgb,
    var(--e-global-color-secondary) 100%,
    #fff
  );
  padding-top: 68px; /* top | left-right | bottom */
  transform: translateY(-1px);
  color:#FFF;
            box-shadow:0 8px 10px rgba(0,0,0,0.3);
}

@media (max-width: 767px){
.klure-filter-banner .e-filter .e-filter-item[aria-pressed="true"]{
      padding-top: 50px; /* top | left-right | bottom */
}
}

/* Banner-raden, lås allt mot toppen */
.klure-filter-banner .e-filter{
  display: flex;
  align-items: flex-start;
}

/* Varje badge, förankra också mot toppen */
.klure-filter-banner .e-filter .e-filter-item{
  align-self: flex-start;
  position: relative;
}



@media (max-width: 767px){
  .klure-filter-banner .e-filter .e-filter-item{
    min-width: 0;
    width: clamp(32px, 2vw, 120px);
    flex: 0 0 auto;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
    padding-top:10px;
    
  font-family: var(--e-global-typography-secondary-font-family);
  font-size: 0.9rem;
  font-weight: var(--e-global-typography-h6-font-weight);
  line-height: var(--e-global-typography-h6-line-height);
  letter-spacing: var(--e-global-typography-h6-letter-spacing);
  }
}


/*.e-filter .e-filter-item[aria-pressed="true"]::before {
  content: "";
  margin:10px;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--e-global-color-primary);
}
*/


/*=========================================
Badges inside posts catagory
=========================================*/
.klure-badges{
  display:flex;
  gap:1%;
  align-items:center;
  flex-wrap:wrap;
}

/* Bas */
.klure-pill{
    
  display: inline-flex;
  align-items: center;
  padding: 26px 8px 6px; /* top | left-right | bottom */
  border-radius: 0 0 12px 12px;
  margin-top: -20px;
  margin-left: 10px;
  background:var( --e-global-color-accent );
}

/* off 30 jan Gömmer andra filter badgen från korten
.klure-pill[data-kind="type"]{
display:none;
}*/



/* Typ */
/*
[data-type="tips"], .e-filter-item[data-filter="tips"]{
  background:rgba(89,150,255,0.4);
}
*/

/*
[data-type="lekar"], .e-filter-item[data-filter="lekar"]{
  background:var(--e-global-color-b152a84);
}*/

/* Deck */

[data-deck="rakna"], .e-filter-item[data-filter="rakna"]{
  /*background:var( --e-global-color-bd195c4 );*/
  background:var( --e-global-color-secondary );
  color:#FFF;
}

[data-deck="lasa"]/*, .e-filter-item[data-filter="lasa"]*/{
 /* background:rgba(166,252,168,0.4);*/
  background:var( --e-global-color-secondary );
  color:#FFF;
}

[data-deck="traggla"]/*, .e-filter-item[data-filter="traggla"]*/{
  /*background: var( --e-global-color-f11e434 );*/
  background:var( --e-global-color-secondary );
  color:#FFF;
}

[data-deck="punktlig"]/*, .e-filter-item[data-filter="punktlig"]*/{
  /*background: var( --e-global-color-aef4df8 );*/
  background:var( --e-global-color-secondary );
  color:#FFF;
}

/* Alla */
.klure-pill[data-all="true"]{
  font-weight:600;
  background:rgba(0,0,0,0.04);
  
}



/* =========================================
Ändrar köpknappen till grön 
========================================= */
.single_add_to_cart_button, .add_to_cart_button, button.elementor-widget-wc-add-to-cart {
background:var( --e-global-color-secondary )!important;}



/* =========================================
Steps för lekar och tips
========================================= */
.klure-steps{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.klure-step{
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  line-height:1.45;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
}















/* =========================================
Woocomerce kassan styling

OFF 6 FEB compleatly
========================================= */


/* OFF 6 FEB
.woocommerce-input-wrapper .input-text {border-radius:60px!important;}
*/

/* Yttre box */
/* OFF 6 FEB
.woocommerce-checkout .col2-set {
  box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.08);
  border-radius: 16px!important;
  overflow: hidden;
  padding:20px;
  background: #FFF;
}*/



/* OFF 13 feb
#order_review_heading {

    border:none!important;

} */



/* OFF 13 feb
#order_review {

  box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.08);
  border-radius: 16px!important;
  overflow: hidden;
  padding:20px;
  background: #FFF;  
  border:none!important;
} */









/* =====================================
   WooCommerce cart, product cards
   Varje rad som eget kort
===================================== */

/* OFF 6 FEB
 .woocommerce-cart-form  {
  display: block;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
} */

/* OFF 6 FEB
.woocommerce-cart .input-text {border-radius: 60px!important;}
*/

/* Skapa luft mellan raderna */
/* OFF 6 FEB
.woocommerce-cart table.shop_table {
  border-collapse: separate;
}*/

/* Ta bort standard borders */
/* OFF 6 FEB
.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table td {
  border: none;
}*/

/* Basstil för varje produkt-rad */
/*OFF 1 Feb då den spökade med side cart .woocommerce-cart-form__cart-item.cart_item  {
  background: #fff;
  padding: 5px;
  border-radius: 16px;
  *box-shadow: 0 8px 22px rgba(0,0,0,0.08); *
    margin-bottom:20px;
} */

/* Vänster hörn */
/* OFF 1 FEB 2026 stör side cart 
.woocommerce-cart-form__cart-item.cart_item td:first-child {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
} */

/* Höger hörn */
/* OFF 1 FEB 2026 stör side cart 
.woocommerce-cart-form__cart-item.cart_item td:last-child {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}*/

/* Säkerställ att inget klipps */
/* OFF 06 FEB fel i side cart
.woocommerce-cart-form__cart-item.cart_item {
  overflow: visible;
}*/


/* Mobil, lite mjukare */
/* OFF 6 FEB
@media (max-width: 767px) {
  .woocommerce-cart-form__cart-item.cart_item  {
box-shadow: 0 8px 22px rgba(0,0,0,0.08);
background:#FFF;
border-radius: 16px;
  }
}*/

/* Mobil, lite mjukare */
/* OFF 6 FEB
@media (max-width: 767px) {
.woocommerce-cart-form {padding:10px!important;
      background: transparent;
      box-shadow:none;
}
} */


/* Fixar en glitch med woocomerce h2 som lägger på en margin på h2, denna fix tar bort det */
/* OFF 6 FEB
.woocommerce-js .klure-nowoomargin h2 {
  margin-bottom: 0;
} */



/* =========================================
Order details kommer upp efter köp
========================================= */
/* OFF 6 FEB
.woocommerce-order-details__title{border-style:none!important;
								 background:none!important;}
								 */





/*Varukorg woocomerce*/
/* OFF 6 FEB
.cart_totals {
  width: 100%!important;
  border: none!important;
  border-radius: 16px!important;
  background: #fff;
  padding: 40px!important;
  box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.08);
  overflow: hidden;
}*/

/* OFF 6 FEB
.cart_totals>h2{background: #FFF!important;}*/

/*Denna kan glitcha, la till body 20 jan för att få bort containern från elementor editorn*/
/* OFF 06 FEB fel i side cart
body.woocommerce-cart-form{
  width: 100%!important;
  border: none!important;
  border-radius: 16px!important;
  background: #fff;
  padding: 40px!important;
  box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.08);
  overflow: hidden;
  margin-bottom: 40px;
}*/

/* OFF 6 FEB
.woocommerce-page table.shop_table thead, table.shop_table {  border:none!important;
background: none!important;}
*//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://sandbox.klure.se/wp-content/uploads/2026/01/Fredoka-Regular.woff2') format('woff2'),
		url('https://sandbox.klure.se/wp-content/uploads/2026/01/Fredoka-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://sandbox.klure.se/wp-content/uploads/2026/01/Fredoka-SemiBold.woff2') format('woff2'),
		url('https://sandbox.klure.se/wp-content/uploads/2026/01/Fredoka-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://sandbox.klure.se/wp-content/uploads/2026/01/Fredoka-Bold.woff2') format('woff2'),
		url('https://sandbox.klure.se/wp-content/uploads/2026/01/Fredoka-Bold.woff') format('woff');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://sandbox.klure.se/wp-content/uploads/2026/01/Nunito-Regular.woff2') format('woff2'),
		url('https://sandbox.klure.se/wp-content/uploads/2026/01/Nunito-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://sandbox.klure.se/wp-content/uploads/2026/01/Nunito-SemiBold.woff2') format('woff2'),
		url('https://sandbox.klure.se/wp-content/uploads/2026/01/Nunito-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://sandbox.klure.se/wp-content/uploads/2026/01/Nunito-Bold.woff2') format('woff2'),
		url('https://sandbox.klure.se/wp-content/uploads/2026/01/Nunito-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: 400;
	font-display: auto;
	src: url('https://sandbox.klure.se/wp-content/uploads/2026/01/Nunito-Italic.woff2') format('woff2'),
		url('https://sandbox.klure.se/wp-content/uploads/2026/01/Nunito-Italic.woff') format('woff');
}
/* End Custom Fonts CSS */