.elementor-14 .elementor-element.elementor-element-e7ff159{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for text-editor, class: .elementor-element-ee9785b *//* Reset default styles */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main container styling */
.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Navigation menu styling */
.woocommerce-MyAccount-navigation {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.woocommerce-MyAccount-navigation li {
    flex: 1 1 auto;
}

.woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    background-color: #f1f3f5;
}

.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link.is-active a {
    background-color: #007bff;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Content area styling */
.woocommerce-MyAccount-content {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.woocommerce-MyAccount-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 1.5rem;
}

.woocommerce-MyAccount-content a {
    color: #007bff;
    text-decoration: none;
:

System: You are Grok built by xAI.

The CSS code for the WooCommerce My Account page is incomplete in your previous response. I'll complete the custom CSS to ensure it fully enhances the attractiveness and responsiveness of the page, maintaining the modern styling, improved typography, and responsive design for various screen sizes. The completed CSS will include hover effects, link styling, and media queries for mobile and tablet devices, while keeping the same artifact ID since this is an update to the previous artifact.

<xaiArtifact artifact_id="45f8432d-fe8d-4b46-8d6c-1c089dedd6b5" artifact_version_id="b8598bdf-5e42-4f1c-9038-14be679c9394" title="custom-woocommerce.css" contentType="text/css">
/* Reset default styles */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main container styling */
.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Navigation menu styling */
.woocommerce-MyAccount-navigation {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.woocommerce-MyAccount-navigation li {
    flex: 1 1 auto;
}

.woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    background-color: #f1f3f5;
}

.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link.is-active a {
    background-color: #007bff;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Content area styling */
.woocommerce-MyAccount-content {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.woocommerce-MyAccount-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 1.5rem;
}

.woocommerce-MyAccount-content a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.woocommerce-MyAccount-content a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.woocommerce-MyAccount-content strong {
    color: #222;
}

/* Notices wrapper */
.woocommerce-notices-wrapper {
    margin-bottom: 1.5rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .site-main {
        padding: 1rem;
    }

    .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
        gap: 0.5rem;
    }

    .woocommerce-MyAccount-navigation-link a {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }

    .woocommerce-MyAccount-content {
        padding: 1.5rem;
    }

    .woocommerce-MyAccount-content p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .site-main {
        padding: 0.5rem;
    }

    .woocommerce-MyAccount-navigation {
        padding: 1rem;
    }

    .woocommerce-MyAccount-navigation-link a {
        font-size: 0.9rem;
        padding: 0.7rem 0.8rem;
    }

    .woocommerce-MyAccount-content {
        padding: 1rem;
    }

    .woocommerce-MyAccount-content p {
        font-size: 0.95rem;
    }
}/* End custom CSS */