.elementor-918 .elementor-element.elementor-element-805b8e2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-918 .elementor-element.elementor-element-ecd35ca > .elementor-widget-container{padding:20px 0px 20px 0px;}.elementor-918 .elementor-element.elementor-element-ecd35ca.elementor-element{--align-self:center;}.elementor-918 .elementor-element.elementor-element-ecd35ca .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:50px;font-weight:600;}.elementor-918 .elementor-element.elementor-element-6660049 > .elementor-widget-container{padding:30px 0px 0px 0px;}@media(min-width:768px){.elementor-918 .elementor-element.elementor-element-805b8e2{--content-width:900px;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}/* Start custom CSS for shortcode, class: .elementor-element-6660049 */@media (max-width: 767px) {
    /* 1. Force the wrapper to stack vertically instead of columns */
    .checkout-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Ensure the form content takes up 100% width */
    .checkout-steps-content {
        width: 100% !important;
        order: 1; /* Keeps form under the title */
    }

    /* 3. Fix the Order Summary container */
    .order-summary-container {
        width: 100% !important;
        margin-top: 20px !important;
        order: 2; /* Forces it to the bottom */
    }

    /* 4. Fix any floating or fixed widths on the summary box */
    .order-summary {
        width: 100% !important;
        float: none !important;
    }
}

/*product listing*/
@media (max-width: 767px) {
    /* 1. Target the main container to allow wrapping */
    .product-list {
        display: flex !important;
        flex-wrap: wrap !important; /* This is the "magic" line */
        justify-content: center !important; 
        gap: 10px !important; /* Space between the items */
        padding: 10px !important;
    }

    /* 2. Target the individual item containers */
    .product-list > div {
        /* calc(50% - 10px) accounts for the gap so they fit perfectly */
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        margin-bottom: 15px !important;
        box-sizing: border-box !important;
    }

    /* 3. Adjust internal text/pricing so it doesn't overlap */
    .product-list h4, 
    .product-list .price {
        font-size: 0.9rem !important; /* Slightly smaller text for mobile */
        text-align: center;
    }
    
    /* 4. Fix the "Add to Cart" button size */
    .product-list .button {
        width: 100% !important;
        padding: 8px 5px !important;
        font-size: 12px !important;
    }
}

/*order summary first then item*/
@media (max-width: 767px) {
    /* 1. Ensure the main container is set to flex-column */
    .checkout-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Move Order Summary to the TOP */
    .order-summary-container {
        order: -1 !important; /* Negative value pulls it to the start */
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* 3. Ensure the Item List/Form stays below the summary */
    .checkout-steps-content {
        order: 1 !important;
        width: 100% !important;
    }

    /* 4. Make sure the cards stay 2-in-a-row inside their section */
    .product-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
    }

    .product-list > div {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
}

/*personal info responsive*/
@media (max-width: 767px) {
    /* 1. Force the main container to 1 column */
    .personal-info-wrapper .accordion-content,
    .personal-info-wrapper div[style*="display: grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    /* 2. CRITICAL: Force the child rows to span the full width */
    .personal-info-wrapper .accordion-content .form-row {
        grid-column: 1 / -1 !important; /* Forces it to span from start to end */
        width: 100% !important;
        display: block !important;
    }

    /* 3. Ensure labels and inputs aren't floating */
    .personal-info-wrapper .form-row div,
    .personal-info-wrapper .form-row input {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    
    /* 4. Fix the Phone Input container if it's narrow */
    .iti.iti--allow-dropdown {
        width: 100% !important;
    }
}

/* remove next button */
/* Target only the 'Next' button inside the product header area */
.product-list-container.active > button.button.add-iv-done {
    display: none !important;
}

/* Alternative .elementor-918 .elementor-element.elementor-element-6660049 if the one above is too strict */
.service-header + .service-content button.add-iv-done {
    display: none !important;
}
/* Add coupon */
/* Force the coupon section to be visible */
.woocommerce-form-coupon-toggle, 
.checkout_coupon.woocommerce-form-coupon,
.promo-code-section {
    display: block !important;
}

/* Optional: Style the link so it stands out */
.woocommerce-info {
    border-top-color: #00bcd4 !important; /* Matches your Viva Wellness blue */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-805b8e2 */button.button {
    color: #fff;
    border: none;
}
input[type=datetime-local] {
    padding: 5px;
    width: 100%;
}
.ap-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px !important;
}
.woocommerce-shipping-fields {
    display: none;
}
.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table{
    font-size: 18px;
}
dl.variation {
    font-size: 20px !important;
    width: 200px;
    padding: 10px
}
table.shop_table.woocommerce-checkout-review-order-table {
    border-collapse: collapse;
}
thead {
    border: solid 1px #000;
}
tbody {
    border: solid 1px #000;
}
tfoot {
    border: solid 1px #000;
}
th.product-name {
    color: #00b7c7 !important;
    font-size: 26px;
    padding: 10px !important;
}
th.product-total {
    color: #00b7c7 !important;
    font-size: 26px;
    padding: 10px 0 !important;
}
dl.variation p {
    font-family: Roboto, sans-serif;
    color: #00b7c7;
    font-weight: 500;
}
td.product-total {
    align-content: center;
    color: #00b7c7 !important;
}
th {
    padding: 12px !important;
}
h3#payment_heading {
    font-size: 26px;
    padding-top: 30px;
}
h3#order_review_heading {
    font-size: 26px;
}
span.woocommerce-Price-amount.amount {
    color: #00b7c7;
}
tr.woocommerce-shipping-totals.shipping {
    display: none;
}/* End custom CSS */