.elementor-kit-7{--e-global-color-primary:#1B263B;--e-global-color-secondary:#2D6A4F;--e-global-color-text:#0A0A0A;--e-global-color-accent:#FFB703;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1410px;}.e-con{--container-max-width:1410px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Force a 2-column grid for the price blocks */
.variable-items-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 12px !important; /* Space between blocks */
    max-width: 450px !important; /* Adjust this to fit your sidebar width */
}

/* Make each block large and professional */
.variable-item {
    width: 100% !important;
    height: 60px !important; /* Makes the blocks tall like Compassion */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d1d1d1 !important;
    border-radius: 8px !important; /* Rounded corners */
    background-color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

/* Style for the 'selected' block */
.variable-item.selected {
    border: 2px solid #0056b3 !important; /* Change color to your brand blue */
    color: #0056b3 !important;
}
/* Hide the 'In Stock' message and the 'Clear' selection link */
.woocommerce-variation-availability, 
.reset_variations {
    display: none !important;
}
/* Force the internal variation container to fill the sidebar */
.single_variation_wrap, 
.woocommerce-variation-add-to-cart,
.variations_button {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Make the button fill 100% of that container */
button.single_add_to_cart_button.button {
    width: 100% !important;
    padding: 18px 0 !important;
    font-weight: bold !important;
    font-size: 18px !important;
    text-transform: uppercase;
}
/* 1. Force the prices into a justified 2-column grid */
.variable-items-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 15px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* 2. Stretch each button to fill its half of the grid */
.variable-item {
    width: 100% !important;
    height: 60px !important; /* Make them taller like in your ideal screenshot */
    margin: 0 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

/* 3. Also stretch the Add to Cart button to match */
button.single_add_to_cart_button.button {
    width: 100% !important;
    padding: 18px 0 !important;
    font-size: 18px !important;
}
/* Force the WooCommerce image container to fill the left column */
.woocommerce-product-gallery, 
.woocommerce-product-gallery--with-images, 
.woocommerce-product-gallery__wrapper {
    width: 100% !important;
    margin: 0 !important;
}

/* Ensure the image itself scales to fit the container */
.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important; /* Matches your rounded look */
}

/* Hide the 'Zoom' magnifying glass icon if it's cluttering the corner */
.woocommerce-product-gallery__trigger {
    display: none !important;
}/* End custom CSS */