/* ==========================================================================
   Café #01 Modern – WooCommerce / Germanized
   Ergänzt die WooCommerce-Standardstyles (bleiben aktiv), nur optische Anpassung.
   ========================================================================== */

.shop-main { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) var(--space-section); }
.woocommerce-products-header__title { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.breadcrumb { margin-bottom: 1.5rem; font-size: var(--fs-xs); color: var(--c-muted); }
.breadcrumb a { color: var(--c-muted); text-decoration: none; }
.breadcrumb .sep { margin: 0 .5rem; opacity: .5; }

/* ---------- Produkt-Grid ---------- */
.woocommerce ul.products {
	display: grid !important; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, .75rem + 1.2vw, 2rem);
	margin: 0 !important; padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
@media (min-width: 900px) { .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); } .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); } }

.woocommerce ul.products li.product {
	position: relative; width: auto !important; float: none !important; margin: 0 !important;
	display: flex; flex-direction: column; padding: .75rem .75rem 1.25rem;
	background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.woocommerce ul.products li.product a { text-decoration: none; }
.woocommerce ul.products li.product a img {
	margin: 0 0 1rem !important; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius-lg) - 8px); background: var(--c-sand);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 .5rem !important; font-family: var(--f-head); font-size: clamp(.95rem, .9rem + .3vw, 1.1rem) !important; font-weight: 500;
	line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; color: var(--c-espresso);
}
.woocommerce ul.products li.product .price {
	padding: 0 .5rem; margin: .25rem 0 .1rem !important; color: var(--c-espresso) !important; font-size: 1.1rem !important; font-weight: 700;
}
.woocommerce ul.products li.product .price del { color: var(--c-muted); font-weight: 400; opacity: 1; margin-right: .35rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--c-caramel); }

/* Germanized-Pflichtangaben (MwSt., Versand, Grundpreis) */
.woocommerce ul.products li.product .wc-gzd-additional-info,
.woocommerce ul.products li.product .price-unit,
.woocommerce ul.products li.product .wc-gzd-additional-info a,
.wc-gzd-additional-info, .price-unit { font-size: .75rem !important; color: var(--c-muted); }
.woocommerce ul.products li.product .wc-gzd-additional-info,
.woocommerce ul.products li.product .price-unit { padding: 0 .5rem; margin: 0 0 .25rem; }

.woocommerce ul.products li.product .button {
	margin: auto .5rem 0 !important; padding-top: .9rem;
}

/* Variation Swatches im Loop */
.woocommerce ul.products li.product .variable-items-wrapper { padding: 0 .5rem; margin-bottom: .5rem; }

/* ---------- Badges ---------- */
/* Badge */
.woocommerce span.onsale {
	position: absolute; z-index: 2; top: 1.25rem !important; left: 1.25rem !important; right: auto !important; width: auto; min-width: 0; min-height: 0; padding: .35rem .8rem;
	font: 600 .75rem/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase;
	background: var(--c-caramel); color: #fff; border-radius: 999px;
}

/* ---------- Buttons ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .wc-block-components-button:not(.is-link) {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75em 1.4em;
	font-family: var(--f-head); font-size: .9rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
	color: #fff; background: var(--c-gold); border: 0; border-radius: 999px; transition: background .25s, transform .25s var(--ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce .wc-block-components-button:not(.is-link):hover { color: #fff; background: var(--c-espresso); transform: translateY(-2px); }
.woocommerce a.added_to_cart { display: block; margin: .5rem .5rem 0; font-size: var(--fs-xs); }
.woocommerce button.button:disabled, .woocommerce button.button.disabled { background: var(--c-muted); }

/* ---------- Toolbar ---------- */
.woocommerce .woocommerce-result-count { color: var(--c-muted); font-size: var(--fs-sm); }
.woocommerce .woocommerce-ordering select { min-height: 44px; width: auto; }

/* ---------- Einzelprodukt ---------- */
.woocommerce div.product { margin-top: 1rem; }
.woocommerce div.product div.images img { border-radius: var(--radius-lg); }
.woocommerce div.product .product_title { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--c-espresso); font-size: 1.6rem; font-weight: 700; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--c-caramel); }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.5rem 0; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart .variations { margin-bottom: 1rem; }
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { padding: .35rem 0; }
.woocommerce .quantity .qty { width: 5rem; min-height: 48px; border-radius: 999px; text-align: center; }
.woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: .75rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--c-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0; padding: 0 1rem 0 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); padding: .75rem 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--c-espresso); box-shadow: inset 0 -2px 0 var(--c-gold); }
.related.products > h2, .upsells.products > h2 { font-size: var(--fs-h3); margin: 3rem 0 1.5rem; }

/* ---------- Hinweise ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
	border: 0 !important; border-left: 4px solid var(--c-gold) !important; border-radius: var(--radius); background: var(--c-cream) !important; color: var(--c-espresso);
}
.woocommerce-error { border-left-color: #b3261e !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--c-caramel) !important; }

/* ---------- Warenkorb / Kasse ---------- */
.woocommerce table.shop_table { border-radius: var(--radius); border-color: var(--c-line); overflow: hidden; }
.woocommerce table.shop_table th { font-family: var(--f-head); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--c-espresso); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout-review-order {
	padding: 1.5rem; background: var(--c-cream); border-radius: var(--radius-lg);
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border-radius: 12px; }
.woocommerce-checkout #payment { background: #fff !important; border-radius: var(--radius); }
#place_order { width: 100%; min-height: 56px; font-size: 1rem; }

/* Germanized Checkboxen (AGB/Widerruf) gut lesbar */
.wc-gzd-checkbox-placeholder, .woocommerce-gzd-legal-checkbox-text { font-size: var(--fs-sm); }

/* Mein Konto */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .25rem; }
.woocommerce-MyAccount-navigation a { display: block; padding: .7rem 1rem; border-radius: 10px; text-decoration: none; color: var(--c-espresso); }
.woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--c-cream); }

/* Startseite: Shop-Teaser auf Creme-Hintergrund */
.shop-teaser .woocommerce { margin: 0; }

/* ---------- Produktkarten zentriert + Varianten ---------- */
.woocommerce ul.products li.product { text-align: center; align-items: stretch; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0 .5rem !important; min-height: 2.6em; }
.woocommerce ul.products li.product .price { display: block; padding: 0; margin: .35rem 0 .15rem !important; font-size: 1.25rem !important; }
.woocommerce ul.products li.product .price.is-swap { animation: c01PriceSwap .35s var(--ease); }
@keyframes c01PriceSwap { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.woocommerce ul.products li.product .wc-gzd-additional-info,
.woocommerce ul.products li.product .price-unit { padding: 0; text-align: center; }
.woocommerce ul.products li.product .button { align-self: center; width: calc(100% - 1rem); margin: auto .5rem 0 !important; }
.woocommerce ul.products li.product a.added_to_cart { text-align: center; }

.c01-variants { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .65rem 0 .25rem; padding: 0 .5rem; }
.c01-variant {
	min-width: 64px; height: 36px; padding: 0 .9rem;
	font: 600 .85rem/1 var(--f-body); color: var(--c-espresso);
	background: #fff; border: 1.5px solid var(--c-line); border-radius: 999px; cursor: pointer;
	transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease);
}
.c01-variant:hover { border-color: var(--c-gold); transform: translateY(-1px); }
.c01-variant.is-active { color: #fff; background: var(--c-espresso); border-color: var(--c-espresso); }
.c01-variant:focus-visible { outline: 2px solid var(--c-caramel); outline-offset: 2px; }