/**
 * Theme Name: Figro Shop
 * Template: storefront
 */

 @font-face {
    font-family: "devil breeze";
    src: url('/wp-content/uploads/devil_breeze_medium-webfont.efcad4e306abff51eece.woff')
}

.theme-storefront a:focus,
.theme-storefront button:focus,
.theme-storefront input:focus {
	outline: none;
}

.woocommerce-cart a {
	color: #000;
}

.primary-navigation .nav-menu .current-menu-item {
	text-decoration: underline;
   color: #146a7a;
}

.site-header .site-title a {
	color: #146a7a;
	font-family: "devil breeze";
	font-size: 42px;
	text-shadow: 2px 2px 1px #000;
   letter-spacing: 3px;
}

.site-header .site-title a:hover { 
	text-shadow: 3px 3px 1px #000;
}

.site-footer .site-info  {
	font-family: "devil breeze";
	padding: 1em 0;
}

.site-footer .site-info a,
.site-footer .site-info span {
	display: none;
}

.site-footer .footer-widgets {
	padding-top: 0;
}

.site-footer .footer-widgets .widget_block {
	margin: 1em;
}

@media (min-width: 768px) { 
	.site-footer .footer-widgets .widget_block { 
		margin: 0;
	}

}


.storefront-handheld-footer-bar ul li.my-account>a::before,
.storefront-handheld-footer-bar ul li.search>a::before,
.storefront-handheld-footer-bar ul li.cart>a::before  { 
	color: #146a7a;
}


.home .site-main .figro-logo {
	font-family: "devil breeze";
	color: #146a7a;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: width 0.8s ease;
}

.home .site-main a.figro-logo:hover { 
  	border-bottom: 1px solid #146a7a;
	transition: 0.8s ease;

}

.home .emoji-icon {
	display: inline;
	width: 26px;
	height: 26px;
	vertical-align: middle;
	
}

.site-header {
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 1em;
}

@media (min-width: 768px) {
	.storefront-primary-navigation {
		background-color: #f0f0f0b8;
	}
}

.site-header-cart .cart-contents { 
	padding: 0.5em 1em;
}

.main-navigation ul.menu>li>a, 
.main-navigation ul.nav-menu>li>a { 
	padding: 0.5em 1em;
	font-weight: 600;
}
/*
.storefront-woocommerce-brands ul {
	display: flex;
	align-items: center;
   flex-wrap: nowrap;
   flex-direction: column;
   list-style: none;
}

.storefront-woocommerce-brands ul li {
	margin-right: 15px;
}

@media (min-width: 768px) { 
	.storefront-woocommerce-brands ul {
	   flex-direction: row;
	}
}*/


@media (max-width: 767px) {
	.left-sidebar .col-full {
		display: grid;
	}
	
	.left-sidebar .content-area {
		order: 1;
	}
}


.storefront-product-categories .woocommerce ul.products li.product h2 {
	min-height: 0;
}


/*
========================================================
--------------------------------------------------------
======================================================== 
*/

/* Produktkarte */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    transition: 0.2s ease;
    height: 100%;
}

/* Hover */
.woocommerce ul.products li.product:hover {
    /*transform: translateY(-4px);*/
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

/* Link-Bereich als Flex */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-decoration: none;
    color: inherit;
}

/* Produktbild */
.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin-bottom: 12px;
}

/* Titel */
.woocommerce ul.products li.product h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px 0;
    min-height: 48px; /* sorgt für gleichmäßige Optik */

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

/* SALE Badge */
.woocommerce ul.products li.product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #e60023;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Preisbereich */
.woocommerce ul.products li.product .price {
    color: #000;
    margin-top: auto;
    font-size: 18px;
    line-height: 1.5;
}

.woocommerce ul.products li.product .price del {
    color: #888;
    font-size: 14px;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: 700;
    color: #ff0000;
}

/* MwSt + Pfand */
.woocommerce ul.products li.product .woocommerce-price-suffix {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    min-height: 35px;
}

/* Button */
.woocommerce ul.products li.product .button {
    margin-top: 14px;
    padding: 10px;
    font-size: 14px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 3px 3px 0px #146a7a;
}


.woocommerce ul.products li.product .button:hover { 
	 /*border: 1px solid #146a7a;*/
	 box-shadow: 2px 2px 1px #146a7a inset;
}

/* Wichtig: Karte relative für Badge */
.woocommerce ul.products li.product {
    position: relative;
}

/* Mobile: 2 Produkte pro Reihe (Flex Layout) */
@media (max-width: 768px) {

  .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
  }

  .woocommerce ul.products li.product {
    width: 48%;
    margin: 1%; 
  }

  /*.woocommerce ul.products li.product h2 {
    min-height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }*/

}


/*
====================
--------------------
====================
*/



.icon-blocks {
  display: flex;
  gap: 20px; /* Abstand zwischen den Blöcken */
  justify-content: center; /* Zentriert die Blöcke horizontal */
  flex-wrap: wrap; /* Zeilenumbruch bei kleineren Bildschirmen */
  margin: 40px 0;
}

.icon-block {
  background: #f9f9f9; /* leichter Hintergrund */
  border-radius: 12px; /* abgerundete Ecken */
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* moderner Schatten */
  transition: transform 0.3s, box-shadow 0.3s; /* Hover-Animation */
}

.icon-block img {
  width: 60px; /* Größe des Icons */
  height: 60px;
  /*margin-bottom: 10px;*/
}

.icon-block span {
  font-weight: 600;
  font-size: 16px;
  display: block;
}

.icon-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/*
========================
Marken auf Startseite
========================
*/



/* Grundstruktur */
.brand-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Standard: 4 Spalten */
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Einzelne Listenelemente */
.brand-thumbnails li {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    margin-right: 15px;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover-Effekt */
.brand-thumbnails li:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Link innerhalb des Listenelements */
.brand-thumbnails li a {
    display: block;
    width: 100%;
    text-align: center;
}

/* Bilder */
.brand-thumbnails li img.brand-thumbnail {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Optional: kleiner Zoom auf Hover nur für das Bild */
.brand-thumbnails li:hover img.brand-thumbnail {
    transform: scale(1.05);
}

/* Responsive Anpassungen */

/* Tablets */
@media (max-width: 1024px) {
    .brand-thumbnails {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

/* Smartphones / kleine Geräte: immer 2 nebeneinander */
@media (max-width: 768px) {
    .brand-thumbnails {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Sehr kleine Smartphones */
@media (max-width: 480px) {
    .brand-thumbnails {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}




/* =============================
Grundlegende Stile für den Footer 
============================== */

.site-footer {
    background: linear-gradient(to bottom, #146a7a 0%, #1ab1aa 100%); /* Vertikaler Verlauf von #146a7a zu #1ab1aa */
    color: #ecf0f1; /* Helle Schriftfarbe für gute Leserlichkeit */
    padding: 20px 20px; /* Abstände innen */
    font-family: 'Arial', sans-serif; /* Schriftart */
}

.site-footer .footer-widgets h3 a{
    color: #000;
}


.site-footer .site-info { 
    text-align: center;
    margin-bottom: 70px;
}


@media (min-width: 768px) { 
    .site-footer .site-info { 
        text-align: left;
        margin-bottom: 0px;
    }
}