/* Fix double page titles and hero image */

/* Hide the default WordPress page titles */
.woocommerce-cart .site-content > .entry-header,
.woocommerce-checkout .site-content > .entry-header,
.woocommerce-cart h1.entry-title:first-of-type,
.woocommerce-checkout h1.entry-title:first-of-type,
.woocommerce-cart .page-header,
.woocommerce-checkout .page-header,
.woocommerce-cart .ast-single-post-title,
.woocommerce-checkout .ast-single-post-title {
    display: block !important; /* was: display: none !important; */
}

/* Fix hero image display */
.eftg-cart-header,
.eftg-checkout-header {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                url('https://eatfromthegarden.com/wp-content/uploads/2024/12/title-page-6.jpg') center center no-repeat !important;
    background-size: cover !important;
    padding: 60px 0 !important;
    text-align: center !important;
    margin: 0 0 60px 0 !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* Ensure hero text is visible */
.eftg-cart-header h1,
.eftg-checkout-header h1 {
    color: white !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Remove any padding/margin from parent containers that might be causing issues */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ensure proper spacing after header */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    margin-top: 0 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .eftg-cart-header,
    .eftg-checkout-header {
        padding: 80px 20px !important;
    }
    
    .eftg-cart-header h1,
    .eftg-checkout-header h1 {
        font-size: 32px !important;
    }
}

/* Additional fixes for common themes */
.page-title,
.ast-archive-description,
.woocommerce-cart .ast-archive-description,
.woocommerce-checkout .ast-archive-description {
    display: block !important; /* was: display: none !important; */
}

/* Override Elementor excessive padding on cart/checkout hero sections */
.elementor-element-54c82a18 {
    --padding-top: 60px !important;
    --padding-bottom: 60px !important;
}

@media(max-width:1024px) {
    .elementor-element-54c82a18 {
        --padding-top: 50px !important;
        --padding-bottom: 50px !important;
    }
}

/* Make cart and checkout pages full width */
body.woocommerce-cart .site-main,
body.woocommerce-cart .content-area,
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout .woocommerce-checkout {
    max-width: 100% !important;
    width: 100% !important;
}

/* Add some padding for better readability */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-checkout form.checkout {
    padding: 0 40px !important;
}

/* For very wide screens, optionally limit to a reasonable max width */
@media (min-width: 1920px) {
    body.woocommerce-cart .woocommerce-cart-form,
    body.woocommerce-cart .cart-collaterals,
    body.woocommerce-checkout form.checkout {
        max-width: 1600px !important;
        margin: 0 auto !important;
    }
}

/* Mobile responsive padding */
@media (max-width: 768px) {
    body.woocommerce-cart .woocommerce-cart-form,
    body.woocommerce-cart .cart-collaterals,
    body.woocommerce-checkout form.checkout {
        padding: 0 20px !important;
    }
}

/* Ensure Elementor containers are also full width */
body.woocommerce-cart .elementor-section,
body.woocommerce-cart .e-con,
body.woocommerce-checkout .elementor-section,
body.woocommerce-checkout .e-con {
    max-width: 100% !important;
}

/* Fix any inner containers */
/*body.woocommerce-cart .e-con-inner,
body.woocommerce-checkout .e-con-inner {
    max-width: 100% !important;
}
 */

/* Fix checkout form to be column layout */
form[name="checkout"],
form.checkout,
form.woocommerce-checkout {
    display: flex !important;
    flex-direction: column !important;
}

/* Override ALL max-width: 1200px on woocommerce divs
.woocommerce,
div.woocommerce,
.woocommerce-page,
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
    max-width: 100% !important;
    width: 100% !important;
} */

/* Force override any lingering 1200px constraints */
body.woocommerce-cart *[style*="max-width: 1200px"],
body.woocommerce-checkout *[style*="max-width: 1200px"],
body.woocommerce-cart .woocommerce[style*="max-width: 1200px"],
body.woocommerce-checkout .woocommerce[style*="max-width: 1200px"] {
    max-width: 100% !important;
}


/* CRITICAL: Remove ANY inline max-width styles */
body.woocommerce-cart .woocommerce[style],
body.woocommerce-checkout .woocommerce[style] {
    max-width: 100% !important;
}

/* Ensure proper checkout form layout */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
}


/* Mobile-optimized checkout styles */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.woocommerce-checkout #order_review {
    flex: 0 0 380px;
    background: #f8f9fa;
    border-radius: 8px;
    height: fit-content;
    position: sticky;
    top: 100px;
    padding: 0 !important;
    border: none !important;
}

.woocommerce-checkout #payment {
    background: white;
    border: none;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    padding: 0 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    body.woocommerce-checkout form.checkout.woocommerce-checkout {
        flex-direction: column !important;
    }
    
    .woocommerce-checkout #order_review {
        flex: 0 0 100%;
        position: static;
        margin-top: 20px;
    }
    
    .woocommerce-checkout #payment {
        padding: 15px !important;
    }
    
    /* Make payment form inputs full width on mobile */
    .woocommerce-checkout .wc-block-components-text-input input,
    .woocommerce-checkout .wc-block-card-elements-wrapper input {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Hide duplicate payment method title */
.woocommerce-checkout #payment .payment_methods li label[for="payment_method_stripe"] {
    display: none;
}

/* Or if using block checkout, hide the duplicate */
.wc-block-components-payment-method-label:not(:first-of-type) {
    display: none;
}


/* Hide duplicate Stripe payment method - keep only one */
/* COMMENTED OUT - was hiding payment options
.woocommerce-checkout #payment .payment_methods li.payment_method_stripe {
    display: block !important; /* was: display: none !important; */
}

/* Or if you prefer to hide stripe_cc instead, use this: */
/* .woocommerce-checkout #payment .payment_methods li.payment_method_stripe_cc {
    display: block !important; /* was: display: none !important; */
} */

/* Fix payment method radio button alignment */
.woocommerce-checkout #payment .payment_methods li {
    margin-bottom: 10px;
}

/* Ensure payment box styling is consistent */
.woocommerce-checkout #payment .payment_box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px !important;
    margin-top: 10px;
}


/* Alternative: Just rename the duplicate to make it clearer */
.woocommerce-checkout #payment .payment_methods li.payment_method_stripe label {
    font-size: 0;
}
.woocommerce-checkout #payment .payment_methods li.payment_method_stripe label:after {
    content: "Pay with Stripe";
    font-size: 16px;
}


/* Remove the rules that were hiding payment methods */
.woocommerce-checkout #payment .payment_methods li.payment_method_stripe {
    display: list-item !important; /* Was hidden, now showing */
}

.woocommerce-checkout #payment .payment_methods li label[for="payment_method_stripe"] {
    display: inline-block !important; /* Was hidden, now showing */
}

/* If you want to hide just the duplicate, target more specifically */
/* Only hide if BOTH stripe methods are present */
.payment_method_stripe:has(+ .payment_method_stripe_cc) {
    /* Optionally hide the first one if both exist */
    /* display: none !important; */
}