/* ==========================================================================
   WooCommerce My Account
   ========================================================================== */


/* ==========================================================================
   01 - Layout
   ========================================================================== */

/* Legacy float clearfix */

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {

    display: none;
    content: none;

}

/* Main layout */

.woocommerce-account .woocommerce {

    display: flex;
    gap: var(--wc-space-xl);

    align-items: flex-start;

}

.woocommerce-account .woocommerce-MyAccount-navigation {

    flex: 0 0 240px;

}

.woocommerce-account .woocommerce-MyAccount-content {

    flex: 1;
    min-width: 0;

}


/* ==========================================================================
   02 - Compatibility Fixes
   ========================================================================== */



/* ==========================================================================
   03 - Navigation
   ========================================================================== */
/* Navigation list */

.woocommerce-account .woocommerce-MyAccount-navigation ul {

    display: flex;
    flex-direction: column;
    gap: var(--wc-space-xs);

    margin: 0;
    padding: 0;

    list-style: none;

}

/* Navigation links */

.woocommerce-account .woocommerce-MyAccount-navigation a {

    display: flex;
    align-items: center;

    padding:
        var(--wc-space-sm)
        var(--wc-space-md);

    border-radius: var(--wc-radius-md);

    color: var(--wc-color-text);

    text-decoration: none;

    transition:
        background-color var(--wc-transition),
        color var(--wc-transition);

}

/* Hover */

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {

    background: var(--wc-color-surface-secondary);

}

/* Active */

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {

    background: var(--wc-color-primary);

    color: var(--wc-color-on-primary);

}


/* ==========================================================================
   04 - Responsive
   ========================================================================== */

@media (max-width: 768px) {
    
    .woocommerce-account .woocommerce-MyAccount-navigation a {

    justify-content: center;

}

    .woocommerce-account .woocommerce {

        flex-direction: column;

    }

    .woocommerce-account .woocommerce-MyAccount-navigation {

        flex: unset;
        width: 100%;

    }

}