.elementor-281 .elementor-element.elementor-element-1b549a8{--spacer-size:20px;}.elementor-widget-text-editor{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-281 .elementor-element.elementor-element-1ff5037{--spacer-size:20px;}/* Start custom CSS for text-editor, class: .elementor-element-694c3c4b *//* Default: Logged-out state, WooCommerce container is 35% wide */
.woocommerce {
    margin: 0 auto;
    width: 100%; /* Default width when logged out */
}

/* Styles for My Account page when user is logged in */
.woocommerce-MyAccount {
    width: 100% !important; /* Ensure full width when logged in */
    max-width: none; /* Remove any max-width restrictions */
}

/* Ensure the account layout is responsive and aligned correctly for logged-in users */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    display: inline-block;
    vertical-align: top;
}

/* Adjust the width of the navigation and content when logged in */
.woocommerce-MyAccount-navigation {
    width: 20%; /* Set width for the navigation menu */
}

.woocommerce-MyAccount-content {
    width: 70%; /* Set width for the account content */
    margin-left: 20px; /* Add spacing between navigation and content */
}

/* Fix padding or margin issues that Elementor might introduce */
.elementor .woocommerce-MyAccount-content {
    padding: 0 !important;
    margin: 10px !important;
    background: none;
    width: 70%;
}

/* Mobile responsiveness for logged-in state */
@media(max-width: 768px) {
    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-content {
        width: 100%;
        display: block; /* Stack the elements vertically */
        margin-left: 0;
    }

    .woocommerce {
        width: 100%; /* Make it 100% for mobile devices */
    }
}

/* Ensure elements align properly in all states */
.woocommerce-MyAccount-navigation {
    margin-bottom: 20px; /* Adjust margin for spacing */
}

/* To ensure no conflicts with Elementor */
.elementor .woocommerce-MyAccount-navigation,
.elementor .woocommerce-MyAccount-content {
    width: auto; /* Reset width for Elementor */
}

/* Add specific styles for when the user is logged out */
body:not(.logged-in) .woocommerce {
    
    width: 65%; /* Enforce the width for logged-out users */
}

body:not(.logged-in) .woocommerce h2{
    text-align: center;
}

body:not(.logged-in) #customer_login > div.u-column1.col-1 > form > p:nth-child(3) > button, #customer_login > div.u-column2.col-2 > form > p:nth-child(5) > button{
    background-color: #9970bc;
}

body:not(.logged-in) #customer_login > div.u-column1.col-1 > form > p:nth-child(3) > button:hover, #customer_login > div.u-column2.col-2 > form > p:nth-child(5) > button:hover{
    background-color: #faa432;
}

body:not(.logged-in) #customer_login > div.u-column2.col-2 > form{
    text-align: justify;
}

body > main > div > section > div > div > div > div.elementor-element.elementor-element-694c3c4b.elementor-widget.elementor-widget-text-editor > div > div > div > p{
    text-align: center;
}

.woocommerce-EditAccountForm{
    border: 2px solid;
    padding: 20px;
    border-radius: 5px;
    background: #e9e9e9;
}
body > main > div > section > div > div > div > div.elementor-element.elementor-element-694c3c4b.elementor-widget.elementor-widget-text-editor > div > div > div > form > p:nth-child(9){
    text-align: center;
}

.woocommerce-Button {
    color: #fff;
    margin: 10px;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: #9970bc;
    border: 0px solid;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Signika';
}

.woocommerce-Button:hover {
    background-color: #faa432;
}

body > main > div > section > div > div > div > div.elementor-element.elementor-element-694c3c4b.elementor-widget.elementor-widget-text-editor > div > div > div > tabl{
    width: 900px;
    text-align: center;
}/* End custom CSS */