/* --- Styling für WooCommerce Blocks (Gutenberg) --- */


/* === Layout Reset & Desktop Standard === */
/* Wir nutzen "html body", um spezifischer zu sein als jedes Theme-CSS */
html body .wc-block-product-template,
html body .wp-block-product-collection {
    display: grid; /* Erzwingt Grid, tötet Flexbox */
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten Desktop */
    grid-gap: 25px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* === Tablet (max-width: 900px) === */
@media only screen and (max-width: 900px) {
    html body .wc-block-product-template,
    html body .wp-block-product-collection {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
    }
}

/* === Mobile (max-width: 500px) === */
@media only screen and (max-width: 600px) {
    html body .wc-block-product-template,
    html body .wp-block-product-collection {
        /* Hier erzwingen wir 1 Spalte */
        grid-template-columns: 100% !important; 
        display: grid;
    }
}

/* === Force Grid auf der Produktseite === */

/* 1. Den Container reparieren */
/* Wir nutzen ".single-product", um sicher nur diese Seite zu treffen */
body.single-product .wc-block-product-template, 
body.single-product .wp-block-product-collection {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 Spalten erzwingen */
    grid-gap: 25px !important;
    margin-right: 0 !important; /* Fix für oft falschen Außenabstand */
}

/* 2. Die Produkte (Kinder) resetten */
/* Das ist der entscheidende Teil: Wir müssen die Flex-Breite (z.B. 20%) töten */
body.single-product .wc-block-product-template .wc-block-product,
body.single-product .wp-block-product-collection .wc-block-product {
    width: auto !important;       /* Breite automatisch an Grid anpassen */
    max-width: 100% !important;   /* Kein Überlaufen */
    flex: none !important;        /* Flex-Verhalten deaktivieren */
    margin-bottom: 0 !important;  /* Grid regelt den Abstand, nicht Margin */
}

/* === Responsive Anpassung für Produktseite === */
@media only screen and (max-width: 900px) {
    body.single-product .wc-block-product-template, 
    body.single-product .wp-block-product-collection {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media only screen and (max-width: 600px) {
    body.single-product .wc-block-product-template, 
    body.single-product .wp-block-product-collection {
        grid-template-columns: 1fr !important;
    }
}


/* 1. Die Produkt-Karte (Der Container) */
/* Im HTML identifiziert als: li mit Klasse "wc-block-product" */
.wc-block-product-template .wc-block-product {
    background-color: #1e1a10ed; /* Dein dunkles Grau */
    border: 1px solid #333;
    border-radius: 20px;       /* Runde Ecken für die Karte */
    padding: 20px;             /* Innenabstand */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	justify-self: stretch;
}

.wc-block-product-template .wc-block-product:hover {
    transform: translateY(0px);
    border-color: #ffa500;     /* Dein Orange als Rahmen beim Hover */
    box-shadow: 0 10px 30px rgba(0,0,0,1);
}

.wc-block-product-template .wc-block-product:active {
	transform: scale(.975)
}

/* 2. Produkt-Titel */
/* Im HTML: h2 mit Klasse "wp-block-post-title" und Link darin */
.wc-block-product-template .wc-block-product .wp-block-post-title a {
    color: #e8e3d4 !important; /* Dein Off-White */
    text-decoration: none;
    font-weight: 700;
}

/* 3. Preis */
/* Im HTML: div mit Klasse "wc-block-components-product-price" */
.wc-block-product-template .wc-block-product .wc-block-components-product-price,
.wc-block-product-template .wc-block-product .wc-block-components-product-price span {
    color: #ffa500 !important; /* Dein Orange */
    font-weight: bold;
}

/* Sale-Preis (falls durchgestrichener Preis sichtbar ist) */
.wc-block-product-template .wc-block-product .wc-block-components-product-price del {
    color: #cfcabe !important; /* Dein Beige für alte Preise */
    opacity: 0.7;
}

/* 4. Der Button */
/* Im HTML: button mit Klasse "wc-block-components-product-button__button" */
.wc-block-product-template .wc-block-product .wc-block-components-product-button__button {
    background-color: #ffa500 !important; /* Hintergrund Orange */
    color: #15120b !important;            /* Text Schwarz */
    border-radius: 6px;
    font-weight: 700;
    border: none;
    padding: 10px 20px;
}

/* Button Hover */
.wc-block-product-template .wc-block-product .wc-block-components-product-button__button:hover {
    background-color: #da9e2f !important; /* Dunkleres Orange */
    color: #fff !important;
}

/* 5. Bild-Radius (Optional, um sicherzugehen) */
/* Im HTML hat das Bild bereits inline-styles, aber das hier erzwingt es sauber */
.wc-block-product-template .wc-block-product .wc-block-components-product-image {
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 15px; /* Abstand zum Titel */
}

.wc-block-product-template .wc-block-product .wc-block-components-product-sale-badge {
   background-color: #ffa500;
   border-radius: 10px;
   color: #15120b;
}


@media only screen and (hover:hover) {
		/* Hover-Effekt für die Karte */
	.wc-block-product-template .wc-block-product:hover {
		transform: translateY(-5px);
		border-color: #ffa500;     /* Dein Orange als Rahmen beim Hover */
		box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	}

		.wc-block-product-template .wc-block-product:active {
		transform: scale(.975)
	}


}