/*
Theme Name: Hello Biz Child
Theme URI: https://github.com/elementor/hello-biz-child/
Description: Hello Biz Child is a child theme of Hello Biz, created by Elementor team
Author: Elementor Team
Template: hello-biz
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Version: 1.0.0
Stable tag: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-biz-child
Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready, style-variations
*/

/* Add your custom styles here */

/* WooCommerce My Account Tabs */
.woocommerce-MyAccount-navigation {
    background: #b89c7a; /* Match your header/nav color */
    border-radius: 6px 6px 0 0;
    border: none;
    margin-bottom: 0;
}
.woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0.5rem 1.5rem;
    list-style: none;
}
.woocommerce-MyAccount-navigation li {
    margin: 0;
}
.woocommerce-MyAccount-navigation-link {
    color: #fff;
    font-family: inherit;
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    border-radius: 4px 4px 0 0;
    transition: background 0.2s;
}
.woocommerce-MyAccount-navigation-link.is-active,
.woocommerce-MyAccount-navigation-link:hover {
    background: #fff;
    color: #b89c7a;
}

/* WooCommerce Notices/Message Box */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: #f8f6f3;
    border-left: 4px solid #b89c7a;
    color: #333;
    border-radius: 4px;
    font-family: inherit;
}

/* WooCommerce Button */
.woocommerce-button,
.button,
input[type="submit"].woocommerce-button {
    background: #b89c7a;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    transition: background 0.2s;
}
.woocommerce-button:hover,
.button:hover,
input[type="submit"].woocommerce-button:hover {
    background: #a18463;
    color: #fff;
}

/* Style the WooCommerce info message box */
.woocommerce-MyAccount-content-wrapper .woocommerce-info {
    background: #f8f6f3 !important; /* Light beige background */
    border-left: 4px solid #b89c7a !important; /* Accent border */
    color: #333 !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    box-shadow: none !important;
    margin: 1.5rem 0 !important;
    padding: 1rem 1.5rem !important;
}

/* Style the WooCommerce button inside the info box */
.woocommerce-MyAccount-content-wrapper .woocommerce-info .woocommerce-Button,
.woocommerce-MyAccount-content-wrapper .woocommerce-info .button {
    background: #b89c7a !important; /* Match your theme color */
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    padding: 0.5rem 1.5rem !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    transition: background 0.2s;
    margin-left: 1rem;
    display: inline-block;
}

.woocommerce-MyAccount-content-wrapper .woocommerce-info .woocommerce-Button:hover,
.woocommerce-MyAccount-content-wrapper .woocommerce-info .button:hover {
    background: #a18463 !important;
    color: #fff !important;
}

div.woocommerce-MyAccount-content-wrapper div.woocommerce-info {
    background: #f8f6f3 !important;
    border-left: 4px solid #b89c7a !important;
    color: #333 !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    margin: 1.5rem 0 !important;
    padding: 1rem 1.5rem !important;
}

div.woocommerce-MyAccount-content-wrapper div.woocommerce-info a.woocommerce-Button,
div.woocommerce-MyAccount-content-wrapper div.woocommerce-info a.button {
    background: #b89c7a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    padding: 0.5rem 1.5rem !important;
    font-size: 1rem !important;
    margin-left: 1rem;
    display: inline-block;
    box-shadow: none !important;
    transition: background 0.2s;
}

/* =============================================
   Single Product — Custom variations block
   (rendered by ge-variations.js, replaces the WC table)
   ============================================= */

/* Shared row spacing — keep Größe and Menge labels the same fixed
   width so the field borders below them line up perfectly.          */
:root {
    --ge-label-width: 90px;
    --ge-row-gap: 16px;
}

.ge-variations {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ge-variation {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ge-row-gap);
    width: 100%;
}

.ge-variation-label {
    flex: 0 0 var(--ge-label-width);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #666666;
    text-align: left;
}

.ge-variation .ge-select-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* "Menge:" inline with the quantity input, button on its own line.
   High specificity + !important to beat the Elementor widget's own
   CSS that lays the qty + button out as a row. Both the qty row and
   the button stretch full width so they align with the Größe row.   */
body .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

body .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder .quantity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--ge-row-gap) !important;
    margin: 0 !important;
    width: 100% !important;
}

body .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder .quantity::before {
    content: "Menge:";
    flex: 0 0 var(--ge-label-width);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #666666;
}

/* Quantity input — visually identical to .ge-select-trigger.        */
body .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder .quantity input.qty {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 12px 16px !important;
    border: 1px solid #c8b89a !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.08em !important;
    color: #2a2a2a !important;
    line-height: 1.2 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    height: auto !important;
}

body .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder .single_add_to_cart_button {
    margin-left: 0 !important;
    width: auto !important;
    align-self: flex-start !important;
    padding: 15px 30px !important;
    border-radius: 0 !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

body .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder .single_add_to_cart_button:hover,
body .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder .single_add_to_cart_button:focus {
    border-radius: 40px !important;
}

/* Same hover treatment for the WC shop-loop / related-products /
   archive add-to-cart buttons.                                       */
.woocommerce a.button.add_to_cart_button,
.woocommerce-page a.button.add_to_cart_button,
.elementor-widget a.button.add_to_cart_button {
    padding: 15px 30px !important;
    border-radius: 0 !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:focus,
.woocommerce-page a.button.add_to_cart_button:hover,
.woocommerce-page a.button.add_to_cart_button:focus,
.elementor-widget a.button.add_to_cart_button:hover,
.elementor-widget a.button.add_to_cart_button:focus {
    border-radius: 40px !important;
}

/* Same hover treatment for the cart "Weiter zur Kasse" button.      */
.woocommerce a.checkout-button,
.woocommerce-page a.checkout-button {
    padding: 15px 30px !important;
    border-radius: 0 !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.woocommerce a.checkout-button:hover,
.woocommerce a.checkout-button:focus,
.woocommerce-page a.checkout-button:hover,
.woocommerce-page a.checkout-button:focus {
    border-radius: 40px !important;
}

/* Same hover treatment for the checkout "Zahlungspflichtig bestellen"
   place-order button.                                                */
.woocommerce #place_order,
.woocommerce-page #place_order {
    padding: 15px 30px !important;
    border-radius: 0 !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.woocommerce #place_order:hover,
.woocommerce #place_order:focus,
.woocommerce-page #place_order:hover,
.woocommerce-page #place_order:focus {
    border-radius: 40px !important;
}

/* =============================================
   Single Product — single_variation_wrap stacking order
   ============================================= */

/* Stack: price/availability → Größe → Menge + add-to-cart.          */
.elementor-add-to-cart .single_variation_wrap {
    display: flex;
    flex-direction: column;
}

/* === PRICING FONT — both price elements are real <h2> tags so they
   inherit the theme's heading typography. Tweak this block to add or
   override anything (color, letter-spacing, custom size, etc). === */
.elementor-add-to-cart .single_variation_wrap h2.ge-price-range,
.elementor-add-to-cart .single_variation_wrap h2.ge-current-price {
    order: 0;
    margin: 0 0 12px;
    font-weight: normal;
    color: #666666;
}

/* Hide WC's default variation block — we render the price ourselves
   as <h2> via ge-variations.js.                                     */
.elementor-add-to-cart .single_variation_wrap .woocommerce-variation.single_variation {
    display: none !important;
}

.elementor-add-to-cart .single_variation_wrap .ge-variations {
    order: 2;
    margin-bottom: 16px;
}

.elementor-add-to-cart .single_variation_wrap .woocommerce-variation-add-to-cart {
    order: 3;
}

.elementor-add-to-cart .woocommerce-variation-availability,
.elementor-add-to-cart .stock,
.elementor-widget-woocommerce-product-stock {
    display: none !important;
}

/* =============================================
   Toast — WooCommerce notice on product pages
   ============================================= */

.ge-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    pointer-events: none;
}

.ge-toast {
    background: #fff;
    border: 1px solid #c8b89a;
    border-left: 3px solid #c8b89a;
    padding: 14px 18px;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #2a2a2a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
    animation: ge-toast-show 5s ease forwards;
}

.ge-toast--error {
    border-left-color: #b00020;
}

/* Hide WC's inline "Warenkorb anzeigen" button — the toast is meant
   to be a quiet confirmation, not a CTA.                            */
.ge-toast .button.wc-forward,
.ge-toast a.button {
    display: none;
}

@keyframes ge-toast-show {
    0%   { opacity: 0; transform: translateX(20px); }
    8%   { opacity: 1; transform: translateX(0); }
    85%  { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(20px); }
}

/* =============================================
   Single Product — Custom dropdown (built by ge-variations.js)
   ============================================= */

/* Hide the native <select>; the JS replaces it with .ge-select-*.   */
.elementor-add-to-cart .variations td.value select {
    display: none !important;
}

.ge-select-wrapper {
    position: relative;
    width: 100%;
}

.ge-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid #c8b89a;
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: #2a2a2a;
    transition: border-color 0.2s ease;
    user-select: none;
}

.ge-select-trigger:hover,
.ge-select-trigger.open {
    border-color: #2a2a2a;
}

.ge-select-arrow {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #c8b89a;
    border-bottom: 1.5px solid #c8b89a;
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.ge-select-trigger.open .ge-select-arrow {
    transform: rotate(-135deg);
    margin-top: 4px;
    border-color: #2a2a2a;
}

.ge-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #2a2a2a;
    border-top: none;
    z-index: 9999;
    display: none;
}

.ge-select-dropdown.open {
    display: block;
}

.ge-select-option {
    padding: 11px 16px;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: #2a2a2a;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ge-select-option:hover {
    background: #f8f4ef;
}

.ge-select-option.selected {
    color: #c8b89a;
    font-weight: 600;
}

/* WC reset link */
.elementor-add-to-cart .reset_variations {
    display: inline-block !important;
    margin-top: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: #aaa !important;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.elementor-add-to-cart .reset_variations:hover {
    color: #2a2a2a !important;
}

.elementor-add-to-cart .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}