/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
Version: 1.0.0
Tags: block-template
Text Domain: twentytwentyfive-child
*/

/* Product Detail Page - Don't show sale badge as it doesn't look nice over the picture */
.woocommerce span.onsale {
	display: none;
}

/* Shop Grid - Show custom Sales Badge */
.wc-block-components-product-sale-badge {
    background-color: #f5b684;
    color: #f1eee9;
    border-radius: 32px;
    border: 1px solid #f1eee9;
    min-height: auto;
    min-width: auto;
	
	/* Prevent the badge from ever being wider than the product */
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* to change the text we need a hack with ::after, hide text here */
    font-size: 0;
    line-height: 0;
    padding: 0;
}

/* Add our custom text back in */
.wc-block-components-product-sale-badge::after {
    content: 'SALE';
	
	font-size: clamp(0.75rem, 2vw, 1.5rem);
    line-height: 1;
    display: block;
    padding: 0.2em 0.6em;
}

/* Reposition the Badge */
.wc-block-components-product-image .wc-block-components-product-sale-badge--align-right {
    top: 10px;
    left: 10px;
}

/* Create a SoldOut Badge */
/* Shop Grid: Target the block-based product wrappers */
.wc-block-product.outofstock {
    position: relative;
}

/* Create the badge using a "Pseudo-element" */
.wc-block-product.outofstock::before {
    content: "AUF BESTELLUNG";
	
	font-size: clamp(0.75rem, 2vw, 1.5rem);
    line-height: 1;
    display: block;
    padding: 0.2em 0.6em;

    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20; /* Higher than the image */

    background-color: #5F5F5F;
    color: #f1eee9;
    border-radius: 32px;
    border: 1px solid #f1eee9;
    min-height: auto;
    min-width: auto;
	
	/* Prevent the badge from ever being wider than the product */
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Custom Button in Product Description Page */
.bestellung-btn {
    display: inline-block;
    background-color: var(--wp--preset--color--contrast, #111);
    color: var(--wp--preset--color--base, #fff) !important;
    padding: 12px 24px;
    border-radius: 8px; /* Change to 0 for square, 50px for pill */
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.1s ease, opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

.bestellung-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    text-decoration: none;
}

.bestellung-btn:active {
    transform: translateY(0);
}