@charset "UTF-8";

/**
 * Theme Name:     Hufschuh
 * Theme URI:      https://www.matthiasriedl.de 
 * Description:    Child theme.
 * Author:         Matthias Riedl
 * Author URI:     https://www.matthiasriedl.de 
 * Template:       hufschuh-main
 * Version:        0.3.1
 */

/* ==========================================================================
   Option B: Transparent Sticky Header Customization
   ========================================================================== */

/* Transparent Header at the top (not scrolled) */
#top #header:not(.header-scrolled) {
    background-color: transparent !important;
    border-bottom: none !important;
}

#top #header:not(.header-scrolled) .header_bg {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* Hide the active menu item accent line when transparent at top */
#top #header:not(.header-scrolled) .avia-menu-fx {
    display: none !important;
}

/* Scrolled Sticky Header (Solid White) */
#top #header.header-scrolled {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#top #header.header-scrolled .header_bg {
    background-color: #ffffff !important;
    opacity: 1 !important;
}

/* Smooth transitions for header changes */
#header, .header_bg {
    transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Ensure the main page content starts at the very top under the transparent header ONLY on the homepage */
.home #main {
    padding-top: 0 !important;
}

/* Hide Elementor duplicate header container if it contains logo/nav-menu widgets (on all pages) */
.elementor > .e-con:first-of-type:has(.elementor-widget-theme-site-logo),
.elementor > .e-con:first-of-type:has(.elementor-widget-nav-menu) {
    display: none !important;
}

/* ==========================================================================
   Header Layout & Overlap/Social Icon Fix
   ========================================================================== */

/* Burger Menu Breakpoint: Open earlier (below 1200px) */
@media only screen and (max-width: 1200px) {
    /* Hide standard menu items */
    #top #header .av-main-nav > li:not(.menu-item-avia-special) {
        display: none !important;
    }
    
    /* Show burger menu button */
    #top #header .av-main-nav > li.av-burger-menu-main {
        display: block !important;
    }
}

/* Desktop layout rules (1201px and above) */
@media only screen and (min-width: 1201px) {
    /* 1. Reset inner-container to use flexbox */
    #header .inner-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
    }

    /* 2. Position the logo relative instead of absolute */
    #top .logo {
        position: relative !important;
        float: none !important;
        max-width: 180px !important; /* Scale logo down to 180px */
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    #top .logo a, 
    #top .logo img {
        max-width: 100% !important;
        height: auto !important;
        max-height: 80px !important;
    }
    
    #top #header.header-scrolled .logo a, 
    #top #header.header-scrolled .logo img {
        max-height: 50px !important; /* Scale down logo further when header scrolls/shrinks */
    }

    /* 3. Make the main menu wrapper a flex container */
    #top #header .main_menu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-grow: 1 !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
    }

    /* 4. Reset menu items to align horizontally */
    #top #header .avia-menu {
        display: block !important;
        float: none !important;
    }

    #top #header .av-main-nav {
        display: flex !important;
        align-items: center !important;
    }

    #top #header .av-main-nav > li > a {
        padding: 0 12px !important; /* Tighten up item spacing */
        /* Let Enfold handle line-height dynamically so sticky shrink transition is smooth */
    }

    /* 5. Align shopping cart icon */
    #top #header #menu-item-shop {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        float: none !important;
        border: none !important;
        margin: 0 10px !important;
    }
    
    #top #header #menu-item-shop a {
        /* Let Enfold handle line-height dynamically so sticky shrink transition is smooth */
    }

    /* 6. Align social bookmarks */
    #top #header .social_bookmarks {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        float: none !important;
        margin: 0 0 0 10px !important;
        padding: 0 !important;
        height: auto !important;
        top: auto !important;
        right: auto !important;
    }

    #top #header .social_bookmarks li {
        float: none !important;
        display: block !important;
        border: none !important;
        margin: 0 2px !important;
    }

    #top #header .social_bookmarks li a {
        line-height: 30px !important;
        height: 30px !important;
        width: 30px !important;
        text-align: center !important;
        display: block !important;
        color: #5e5e5e !important;
    }
}

/* ==========================================================================
   Premium WooCommerce Product Page Styling (Option B)
   ========================================================================== */

/* 1. Style Elementor fallback columns as a beautiful grid table in product description */
#tab-description .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
    background-color: #dbdbdb !important; /* Border/grid line color */
    border: 1px solid #dbdbdb !important;
    max-width: 600px !important;
    margin: 30px auto !important;
    padding: 0 !important;
}

/* Individual cells */
#tab-description .e-con-inner > .e-con {
    background-color: #ffffff !important;
    padding: 12px 15px !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Headers (First 3 cells: Grösse, Breite, Länge) */
#tab-description .e-con-inner > .e-con:nth-child(-n+3) {
    background-color: #f7f7f7 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

/* Style the text inside cells */
#tab-description .e-con-inner .elementor-heading-title {
    margin: 0 !important;
    font-size: 14px !important;
    color: #333333 !important;
    font-weight: inherit !important;
}

/* 2. Hide duplicate social links and elements in product description */
#tab-description .elementor-widget-social-icons,
#tab-description .elementor-widget-text-editor:first-of-type,
#tab-description a[href*="facebook.com"],
#tab-description a[href*="instagram.com"] {
    display: none !important;
}

/* 3. Style recommendation block in description (buttons instead of bullet list) */
#tab-description .elementor-widget-text-editor {
    text-align: center !important;
    margin: 35px 0 20px 0 !important;
    font-size: 15px !important;
}

#tab-description .elementor-widget-text-editor p {
    font-weight: 600 !important;
    color: #333333 !important;
    margin-bottom: 15px !important;
}

#tab-description .elementor-widget-text-editor ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 15px 0 0 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
}

#tab-description .elementor-widget-text-editor li {
    margin: 0 !important;
    padding: 0 !important;
}

#tab-description .elementor-widget-text-editor a {
    display: inline-block !important;
    padding: 12px 24px !important;
    background-color: #ffffff !important;
    border: 1px solid #d3d3d3 !important;
    color: #555555 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease-in-out !important;
}

#tab-description .elementor-widget-text-editor a:hover {
    background-color: #719430 !important; /* Theme green hover color */
    color: #ffffff !important;
    border-color: #719430 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(113, 148, 48, 0.2);
}

/* 4. WooCommerce variation selection dropdowns */
#top .single-product .variations select {
    border: 1px solid #dbdbdb !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    outline: none !important;
    background-color: #fafafa !important;
    font-size: 14px !important;
    min-width: 220px !important;
    max-width: 100% !important;
    height: auto !important;
}

/* 5. Quantity selector and Add to Cart button alignment */
#top .single-product .quantity {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 15px !important;
}

#top .single-product .quantity input.qty {
    height: 44px !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    width: 60px !important;
    text-align: center !important;
}

#top .single-product .single_add_to_cart_button {
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 35px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    background-color: #719430 !important; /* Theme green */
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(113, 148, 48, 0.15);
    transition: all 0.2s ease-in-out !important;
}

#top .single-product .single_add_to_cart_button:hover {
    background-color: #5c7925 !important;
    box-shadow: 0 4px 10px rgba(113, 148, 48, 0.3);
}

/* 6. Product page gallery thumbnails */
#top .single-product .product .thumbnails a {
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid #e2e2e2 !important;
    transition: all 0.2s ease-in-out !important;
}

#top .single-product .product .thumbnails a:hover {
    border-color: #719430 !important;
    opacity: 0.9 !important;
}

/* 7. Style WooCommerce tabs horizontally */
#top div.product .woocommerce-tabs ul.tabs {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 40px 0 -1px 0 !important;
    border-bottom: 1px solid #dbdbdb !important;
    background: transparent !important;
}

#top div.product .woocommerce-tabs ul.tabs li {
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
    border: 1px solid #dbdbdb !important;
    border-bottom: none !important;
    background-color: #f9f9f9 !important;
    border-radius: 4px 4px 0 0 !important;
    transition: all 0.2s ease-in-out !important;
    float: none !important;
}

#top div.product .woocommerce-tabs ul.tabs li.active {
    background-color: #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
    position: relative !important;
    z-index: 2 !important;
}

#top div.product .woocommerce-tabs ul.tabs li a {
    display: block !important;
    padding: 12px 24px !important;
    color: #666666 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    border: none !important;
    background: transparent !important;
}

#top div.product .woocommerce-tabs ul.tabs li.active a {
    color: #719430 !important; /* Theme green for active tab */
}

#top div.product .woocommerce-tabs .panel {
    border: 1px solid #dbdbdb !important;
    padding: 30px !important;
    background-color: #ffffff !important;
    border-radius: 0 4px 4px 4px !important;
    margin-top: 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

/* ==========================================================================
   Premium WooCommerce Cart Page Styling
   ========================================================================== */

/* 1. Cart Table general refinements */
#top.woocommerce-cart .shop_table.cart {
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    border-collapse: separate !important;
}

#top.woocommerce-cart .shop_table.cart th {
    background-color: #fcfcfc !important;
    border-bottom: 1px solid #e2e2e2 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    padding: 15px 20px !important;
    color: #444444 !important;
}

#top.woocommerce-cart .shop_table.cart td {
    padding: 20px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#top.woocommerce-cart .shop_table.cart tr:last-child td {
    border-bottom: none !important;
}

/* Cart Product Thumbnail */
#top.woocommerce-cart .shop_table.cart .product-thumbnail img {
    border-radius: 6px !important;
    border: 1px solid #e8e8e8 !important;
    max-width: 80px !important;
    height: auto !important;
    transition: all 0.2s ease-in-out !important;
}

#top.woocommerce-cart .shop_table.cart .product-thumbnail img:hover {
    border-color: #719430 !important;
    transform: scale(1.03);
}

/* Cart Product Name and Details */
#top.woocommerce-cart .shop_table.cart .product-name a {
    font-weight: 600 !important;
    color: #333333 !important;
    font-size: 16px !important;
    text-decoration: none !important;
}

#top.woocommerce-cart .shop_table.cart .product-name a:hover {
    color: #719430 !important;
}

/* Cart item CPO/variation data styling */
#top.woocommerce-cart .shop_table.cart .product-name dl.variation {
    font-size: 12px !important;
    color: #777777 !important;
    margin-top: 5px !important;
    border-left: 2px solid #e2e2e2 !important;
    padding-left: 10px !important;
}

#top.woocommerce-cart .shop_table.cart .product-name dl.variation dt {
    font-weight: 600 !important;
    display: inline-block !important;
    margin-right: 5px !important;
}

#top.woocommerce-cart .shop_table.cart .product-name dl.variation dd {
    display: inline-block !important;
    margin: 0 15px 0 0 !important;
}

/* Remove button */
#top.woocommerce-cart .shop_table.cart .product-remove a.remove {
    font-size: 22px !important;
    color: #ccc !important;
    transition: color 0.2s ease-in-out !important;
    text-align: center !important;
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 24px !important;
    border-radius: 50% !important;
}

#top.woocommerce-cart .shop_table.cart .product-remove a.remove:hover {
    color: #d11a2a !important;
    background-color: #fdf2f2 !important;
}

/* Quantity input in cart */
#top.woocommerce-cart .shop_table.cart .quantity input.qty {
    height: 38px !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 4px !important;
    width: 55px !important;
    text-align: center !important;
    font-weight: 600 !important;
}

/* Coupon & Update Cart actions row */
#top.woocommerce-cart .shop_table.cart td.actions {
    background-color: #fafafa !important;
    padding: 15px 20px !important;
}

#top.woocommerce-cart .shop_table.cart td.actions .coupon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#top.woocommerce-cart .shop_table.cart td.actions input#coupon_code {
    height: 38px !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 4px !important;
    padding: 0 12px !important;
    width: 150px !important;
    background-color: #ffffff !important;
}

#top.woocommerce-cart .shop_table.cart td.actions .button {
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 20px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    border: 1px solid #cccccc !important;
    background-color: #ffffff !important;
    color: #555555 !important;
    transition: all 0.2s ease-in-out !important;
}

#top.woocommerce-cart .shop_table.cart td.actions .button:hover {
    background-color: #f3f3f3 !important;
    border-color: #b5b5b5 !important;
}

#top.woocommerce-cart .shop_table.cart td.actions .button[name="update_cart"] {
    background-color: #719430 !important;
    border-color: #719430 !important;
    color: #ffffff !important;
}

#top.woocommerce-cart .shop_table.cart td.actions .button[name="update_cart"]:hover {
    background-color: #5c7925 !important;
    border-color: #5c7925 !important;
}

/* 2. Cart Totals (Warenkorb-Summen) card styling */
#top.woocommerce-cart .cart-collaterals {
    margin-top: 40px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

#top.woocommerce-cart .cart-collaterals .cart_totals {
    width: 45% !important;
    min-width: 320px !important;
    background-color: #fcfcfc !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    padding: 30px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

#top.woocommerce-cart .cart-collaterals .cart_totals h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #719430 !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    color: #333333 !important;
    letter-spacing: 0.5px !important;
}

#top.woocommerce-cart .cart-collaterals .cart_totals table {
    width: 100% !important;
    margin-bottom: 25px !important;
    border-collapse: collapse !important;
}

#top.woocommerce-cart .cart-collaterals .cart_totals table tr th,
#top.woocommerce-cart .cart-collaterals .cart_totals table tr td {
    padding: 15px 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    vertical-align: top !important;
    background: transparent !important;
}

#top.woocommerce-cart .cart-collaterals .cart_totals table tr th {
    font-weight: 600 !important;
    color: #666666 !important;
    width: 35% !important;
}

#top.woocommerce-cart .cart-collaterals .cart_totals table tr td {
    text-align: right !important;
    color: #333333 !important;
}

#top.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total th,
#top.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total td {
    border-bottom: none !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333333 !important;
}

#top.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total td {
    color: #719430 !important;
}

/* Shipping calculator styles */
#top.woocommerce-cart .shipping-calculator-button {
    color: #719430 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

#top.woocommerce-cart .shipping-calculator-form select,
#top.woocommerce-cart .shipping-calculator-form input {
    width: 100% !important;
    margin-bottom: 10px !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    height: auto !important;
    font-size: 13px !important;
    background-color: #ffffff !important;
}

#top.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
    background-color: #666666 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 8px 15px !important;
    border-radius: 4px !important;
    width: 100% !important;
    transition: background-color 0.2s ease-in-out !important;
}

#top.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"]:hover {
    background-color: #444444 !important;
}

/* Proceed to Checkout Button */
#top.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    background-color: #719430 !important; /* Theme green */
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(113, 148, 48, 0.2) !important;
    transition: all 0.2s ease-in-out !important;
}

#top.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #5c7925 !important;
    box-shadow: 0 6px 15px rgba(113, 148, 48, 0.35) !important;
    transform: translateY(-1px);
}