p {color: #000;}

#wrapper {background: #fff;}
#footer {background: #f6f6f6;}
.product-price {font-size: 2rem;}

#category #left-column {width: 100%;}
#category #content-wrapper {width: 100%;}

#js-product-list  .col-xl-4 {    width: 25%;  }


.btn-primary:hover, .btn-primary:hover:active, .btn-primary:focus {
  background-color: #FFCC00; color:#000000;
}

.product-information .product-description ul li {color:#000000;}

.product-variants-item span.control-label {
  display: inline-block !important;
  background-color: #FFCC00;
  border-radius: 10px;
  margin: 10px 0;
  padding: 10px 15px;
  max-width: 400px;
}


       .bee {
            position: absolute;
            width: 100px; /* Größe der Biene */
            height: 100px;
            background-image: url('https://www.kora-onlineshop.at/themes/classic/images/bee.gif');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            left: -100px;  /* Startposition links außerhalb des Bildschirms */
            bottom: -100px; /* Startet unten außerhalb des Bildschirms */
            transform: scaleX(-1); /* Biene horizontal spiegeln */
            animation: fly 6s linear infinite, buzz 0.2s ease-in-out infinite;
        }

        @keyframes fly {
            0% {
                left: -100px;
                bottom: -100px;
                transform: scaleX(-1) rotate(20deg);
            }
            25% {
                left: 25%;
                bottom: 30%;
                transform: scaleX(-1) rotate(15deg);
            }
            50% {
                left: 50%;
                bottom: 60%;
                transform: scaleX(-1) rotate(10deg);
            }
            75% {
                left: 75%;
                bottom: 80%;
                transform: scaleX(-1) rotate(5deg);
            }
            100% {
                left: 110%;
                bottom: 100%;
                transform: scaleX(-1) rotate(0deg);
            }
        }

        @keyframes buzz {
            0%, 100% {
                transform: scaleX(-1) translateY(-2px) rotate(1deg);
            }
            50% {
                transform: scaleX(-1) translateY(2px) rotate(-1deg);
            }
        }


@media (max-width: 767px) 
{
ul.sf-colors-container .color-popup__container ul.colors {
  grid-template-columns: repeat(6, 1fr);

}
	
	.nav-tabs .nav-link {
		font-size: 0.9rem;}
	
#js-product-list  .col-xl-4 {    width: 50%;  }
}



#category #search_filters_brands {display: none;}
#category #search_filters_suppliers {display: none;}

ul.sf-colors-container .color-popup a.popup-close {
  position: absolute;
  right: 10px;
  top: 5px;
  display: block;
  width: 30px;
  height: 30px;
}
ul.sf-colors-container .color-popup .popup-close .icon {
  width: 100%;
  height: 100%;
  position: relative;
}
ul.sf-colors-container .color-popup .popup-close .icon .inner, ul.sf-colors-container .color-popup .popup-close .icon .inner::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: #000;
  top: 50%;
}
ul.sf-colors-container .color-popup .popup-close .icon .inner {
  transform: translateY(-50%) rotate(45deg);
}
ul.sf-colors-container .color-popup .popup-close .icon .inner::before {
  transform: translateY(-50%) rotate(-90deg);
}
ul.sf-colors-container .color-popup__container ul.colors {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 5px;
}
ul.sf-colors-container .color-popup__container ul.colors li > a {
  display: block;
  text-align: center;
  color: #000;
  border: 2px solid transparent;
  padding: 3px;
}


ul.sf-colors-container {
  list-style-type: none;
  display: flex;
}

ul.sf-colors-container > li > a {
    display: inline-block;
    background: #ccc;
    padding: 3px 10px;
    border-radius: 5px;
    color: #000;
    border: 1px solid transparent;
}
ul.sf-colors-container > li.has-selected > a {
    background: #f1ff87;
    border-color: #ccc;
}




ul.sf-colors-container .color-popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  overflow-y: auto; /* Scrollbar hinzufügen */
  background: rgba(0, 0, 0, 0.1);
}

ul.sf-colors-container .color-popup__container {
  position: fixed;
  left: 50%;
  top: 100px;
  background: #fff;
  width: calc(100vw - 80px);
  max-height: 80vh; /* Begrenzung für Scrollen */
  overflow-y: auto; /* Scrollbar aktivieren */
  transform: translateX(-50%);
  border-radius: 10px;
  padding: 15px;
}

ul.sf-colors-container .color-popup__container ul.colors {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 Spalten für Desktop */
  grid-gap: 10px;
  padding: 10px;
}

/* Farb-Items */
ul.sf-colors-container .color-popup__container ul.colors li > a {
  display: block;
  text-align: center;
  color: #000;
  border: 2px solid transparent;
  padding: 5px;
  background: #f9f9f9;
  border-radius: 5px;
  transition: border-color 0.3s ease-in-out;
}

ul.sf-colors-container .color-popup__container ul.colors li:hover > a {
  border-color: #efefef;
}

ul.sf-colors-container .color-popup__container ul.colors li.selected > a {
  border-color: #b3b3b3;
}

/* Vorschau-Farbfelder */
ul.sf-colors-container .color-popup__container ul.colors .preview {
  width: 100%;
  height: 80px;
  background-size: cover;
  border-radius: 5px;
}

.elementor-product-miniature .elementor-badge-new  {
  background: #FFCC00;
}

.product-beschreibung-vorschau { font-size: 0.8rem; border-top: 1px solid #c7c7c7; margin-top: 6px;}
.product-beschreibung-vorschau ul {padding-left: 8px; }
.product-beschreibung-vorschau ul li {}
.product-miniature .product-title a {color:#000;}


/* Mobile-Optimierung */
@media (max-width: 767px) {
  ul.sf-colors-container .color-popup__container ul.colors {
    grid-template-columns: repeat(2, 1fr); /* 4 Spalten für kleinere Bildschirme */
  }
	
	  ul.sf-colors-container .color-popup__container .colors {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
    width: 100%;
  }
	
	ul.sf-colors-container .color-popup__container .inner {max-width: 100%;}
	
	.product-cover {

  max-width: 70%;
  margin: 0 auto;
}
	
	
}