/*
Theme Name: Kadence Child - InlineSix
Theme URI: https://inlinesixparts.nl
Description: Lightweight custom child theme for InlineSix Parts built on Kadence.
Author: InlineSix Parts
Template: kadence
Version: 1.0.7
*/

/* Custom CSS tweaks for InlineSix Parts */
:root {
    --global-palette1: #e22b2b; /* Sporty Red Accent */
    --global-palette2: #c41e1e;
    --global-palette3: #111827; /* Dark Headings */
    --global-palette4: #374151; /* Body Text */
    --global-palette5: #374151; /* Replaced with palette4 across the board */
    --global-palette6: #374151; /* Replaced with palette4 across the board */
    --global-palette7: #ffffff; /* White */
    --global-palette8: #ffffff; /* Lighter / Card Background */
    --global-palette9: #ffffff; /* White */
}

/* Tax badge in cart/checkout */
.tax-marge-label {
    display: block;
    color: #6b7280;
    font-size: 0.85em;
    margin-top: 2px;
}

/* ==========================================================================
   Checkout Payment Methods & Terms Styling
   ========================================================================== */

#payment ul.wc_payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5rem 0 !important;
}

#payment ul.wc_payment_methods li.wc_payment_method {
    margin-bottom: 10px !important;
    list-style: none !important;
}

/* Base style for payment option label */
#payment ul.wc_payment_methods li.wc_payment_method > label {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1.5px solid #e5e7eb !important;
    border-left: 5px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

#payment ul.wc_payment_methods li.wc_payment_method > label:hover {
    border-color: #cbd5e1 !important;
    border-left-color: var(--global-palette4, #374151) !important;
    background: #f9fafb !important;
}

/* Active / Checked State */
#payment ul.wc_payment_methods li.wc_payment_method input[type="radio"]:first-child:checked + label {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #e22b2b !important;
    border-left: 5px solid #e22b2b !important;
    box-shadow: 0 3px 10px rgba(226, 43, 43, 0.12) !important;
}

/* Radio button icon */
#payment ul.wc_payment_methods li.wc_payment_method > label:before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border-radius: 50% !important;
    border: 2px solid var(--global-palette4, #374151) !important;
    background: #ffffff !important;
    margin-right: 14px !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease-in-out !important;
}

#payment ul.wc_payment_methods li.wc_payment_method input[type="radio"]:first-child:checked + label:before {
    background: #e22b2b !important;
    border-color: #e22b2b !important;
    box-shadow: inset 0 0 0 3px #ffffff !important;
}

/* Gateway Logos */
#payment ul.wc_payment_methods li.wc_payment_method > label img,
#payment ul.wc_payment_methods li.wc_payment_method > label .mollie-gateway-icon {
    max-height: 28px !important;
    max-width: 85px !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    vertical-align: middle !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* Payment box (instructions / dropdowns if expanded) */
.woocommerce-checkout #payment div.payment_box {
    background: #f9fafb !important;
    color: #374151 !important;
    border: 1.5px solid #e5e7eb !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 14px 18px !important;
    margin-top: -4px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

.woocommerce-checkout #payment div.payment_box p {
    margin: 0 !important;
    color: #374151 !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

/* Terms and Conditions Scrollbox */
.woocommerce-terms-and-conditions {
    background: #f9fafb !important;
    color: #374151 !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.woocommerce-terms-and-conditions p,
.woocommerce-terms-and-conditions strong {
    color: #1f2937 !important;
    font-style: normal !important;
}

.woocommerce-privacy-policy-text p {
    color: #374151 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
}

/* ==========================================================================
   Single Product Gallery: Height protection & initial state
   ========================================================================== */

/* Prevent Kadence or any script from locking gallery into an extreme inline height */
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce-page div.product div.images.woocommerce-product-gallery {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Hide stacked non-first images until Flexslider initializes */
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
    display: none !important;
}

.woocommerce div.product div.images .flex-viewport .woocommerce-product-gallery__image:nth-child(n+2) {
    display: block !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    display: block !important;
}

.woocommerce div.product div.images .flex-viewport {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* ==========================================================================
   Single Product Layout: Modern balanced 2-column layout (No hardcoded widths)
   ========================================================================== */

/* Desktop & Tablet: Balanced fluid 2-column grid */
@media screen and (min-width: 769px) {
    .woocommerce.single-product div.product,
    .woocommerce-page.single-product div.product {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 3rem !important;
        row-gap: 2.5rem !important;
        align-items: start !important;
    }

    .woocommerce.single-product div.product::before,
    .woocommerce.single-product div.product::after,
    .woocommerce-page.single-product div.product::before,
    .woocommerce-page.single-product div.product::after {
        display: none !important;
    }

    .woocommerce.single-product div.product div.images,
    .woocommerce-page.single-product div.product div.images {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    .woocommerce.single-product div.product div.summary,
    .woocommerce-page.single-product div.product div.summary {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .woocommerce.single-product div.product .woocommerce-tabs,
    .woocommerce.single-product div.product .related.products,
    .woocommerce.single-product div.product .upsells.products {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin-top: 2rem !important;
    }
}

/* Mobile: Clean stacked layout */
@media screen and (max-width: 768px) {
    .woocommerce.single-product div.product,
    .woocommerce-page.single-product div.product {
        display: block !important;
    }

    .woocommerce.single-product div.product::before,
    .woocommerce.single-product div.product::after,
    .woocommerce-page.single-product div.product::before,
    .woocommerce-page.single-product div.product::after {
        display: none !important;
    }

    .woocommerce.single-product div.product div.images,
    .woocommerce-page.single-product div.product div.images {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
        padding: 0 !important;
        clear: both !important;
        height: auto !important;
    }

    .woocommerce.single-product div.product div.summary,
    .woocommerce-page.single-product div.product div.summary {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    .woocommerce.single-product div.product .woocommerce-tabs,
    .woocommerce.single-product div.product .related.products,
    .woocommerce.single-product div.product .upsells.products {
        width: 100% !important;
        margin-top: 1.5rem !important;
        clear: both !important;
    }
}

/* ==========================================================================
   Thumbnails Strip: Flush horizontal row
   ========================================================================== */

.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    transform: none !important;
    left: 0 !important;
    position: static !important;
    max-width: 100% !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 64px !important;
    height: 64px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 2px solid #e5e7eb !important;
    cursor: pointer !important;
    padding: 0 !important;
    background: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    flex: 0 0 64px !important;
    display: inline-flex !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    opacity: 0.65 !important;
    transition: opacity 0.2s ease !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li:hover img {
    opacity: 1 !important;
}

.woocommerce div.product div.images .flex-control-thumbs li:hover,
.woocommerce div.product div.images .flex-control-thumbs li:has(img.flex-active) {
    border-color: #e22b2b !important;
}