/**
 * The My Account navigation: a row of chips on a phone, a side list from 48em.
 *
 * WooCommerce prints .woocommerce-MyAccount-navigation as a plain list and
 * Motta writes no phone rules for it whatsoever -- six links at 38px apart,
 * under the theme's avatar card, so every account page opened on roughly a
 * screen of navigation before a word of content.
 *
 * It was a checkbox drawer behind a button in the green title bar. The
 * storefront look these pages wear now (owner, 2026-10-02; the theme's
 * assets/flow.css) has no bar to put a button in -- the title is plain ink
 * words on the cream ground -- and wants the links where they can be seen: one
 * line of chips that scrolls sideways, the chip every redesigned page uses for
 * a short pick-one.
 *
 * THE DRAWER IS RETIRED, NOT REMOVED. Its three parts are still printed, by
 * Tapper_Tea_Dokan_Customize_Dokan_Customer_Dashboard::account_menu_drawer()
 * and ::account_title_menu_button(), and are switched off here at every width.
 *
 * THE COLUMN. From 48em .motta-myaccount__wrapper is 232px wide with 32px to
 * its right, and the theme's flow.css sizes .woocommerce-MyAccount-content as
 * calc(100% - 232px - 32px) to sit beside it. Those two numbers live in both
 * files; change them together. The content column itself is the theme's: this
 * sheet sets nothing on it.
 *
 * THE TOKENS (--tc-*) are declared on body.tt-flow by the theme. Each is read
 * with its literal fallback, so the navigation is right without the carrier.
 *
 * The existing pattern, body.woocommerce-account …, outranks Motta's
 * .woocommerce-account … by one element. The link rules carry one class more
 * (.woocommerce, the shortcode's own wrapper), because flow.css colours every
 * link in the page at (0,3,2) and its hover at (0,4,2).
 *
 * @package Tapper_Tea_Dokan_Customize
 */

/* ---------------------------------------------------- the drawer's old parts
 *
 * display:none, on every width. That takes the checkbox and both labels out
 * of the tab order and the accessibility tree together, so nothing focusable
 * and invisible is left behind -- which is what clipping the checkbox, as the
 * drawer did, would now leave.
 * ------------------------------------------------------------------------ */

.tt-account-menu-btn,
.tt-account-scrim,
#tt-account-menu,
body.woocommerce-account .tt-account-menu-btn,
body.woocommerce-account .tt-account-scrim,
body.woocommerce-account #tt-account-menu {
    display: none;
}

/* --------------------------------------------------------- at every width */

/*
 * Motta: a bordered box, 23.246% wide, floated, 23px of padding. Here it is
 * only where the navigation stands; it has no surface of its own.
 */
body.woocommerce-account .motta-myaccount__wrapper {
    float: none;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* WooCommerce's layout sheet, where it loads, floats this at 30%. */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    font-family: var(--tc-home-display, var(--mt-font__main, "Outfit", Arial, sans-serif));
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Motta: 38px under each link. */
body.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    padding: 0;
}

/* Motta's icon in front of each link: a chip and a list row are words alone. */
body.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
    content: none;
}

/*
 * Motta: margin-left -1px and a 2px left border that turns dark on the active
 * and the hovered link, at (0,3,2).
 */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:hover {
    margin-left: 0;
    border-left: 0;
    color: var(--tc-ink, #121111);
    text-decoration: none;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:focus-visible {
    outline: 2px solid var(--tc-green, #29594B);
    outline-offset: 2px;
}

/* ----------------------------------------------------- a phone: the chip row */

@media (max-width: 47.99em) {

    /* The avatar and "Hello!": a screen of chrome before the page, on a phone. */
    body.woocommerce-account .motta-myaccount__wrapper .motta-myaccount {
        display: none;
    }

    /*
     * Out to the screen's edges whatever the page's gutter is, so a chip
     * slides off the glass rather than into a margin. Motta's .site clips its
     * overflow, so 100vw cannot give the page a sideways scroll.
     */
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    /*
     * One line, scrolled by a thumb. The padding is the room a chip's shadow
     * and its focus outline need: this box clips whatever leaves it.
     */
    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 4px 16px 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation li {
        flex: none;
    }

    /* The chip. Motta: display block, padding 1px 19px 1px 54px, 16px/500 grey. */
    body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a,
    body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:hover {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 6px 14px;
        border: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
        border-radius: 999px;
        background-color: #FFFFFF;
        color: var(--tc-ink, #121111);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        white-space: nowrap;
        box-shadow: var(--tc-shadow-chip, 0 1px 2px rgba(18, 17, 17, 0.06), 0 2px 6px rgba(18, 17, 17, 0.08));
    }

    /* The page being read. */
    body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a,
    body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a:hover {
        border-color: var(--tc-green, #29594B);
        background-color: var(--tc-green-soft, #E4EEE9);
        color: var(--tc-green-dark, #1F463B);
        box-shadow: var(--tc-shadow-chip-on, inset 0 0 0 1px #29594B, 0 2px 6px rgba(41, 89, 75, 0.18));
    }
}

/* ------------------------------------------------- from 48em: the side list */

@media (min-width: 48em) {

    /* 232px and 32px: flow.css's content column is sized from these two. */
    body.woocommerce-account .motta-myaccount__wrapper {
        float: left;
        width: 232px;
        margin: 0 32px 0 0;
    }

    /*
     * Who is signed in, as a plain line over the list. Motta: 24px of padding
     * and a rule under it, 23px in from the box this no longer has.
     */
    body.woocommerce-account .motta-myaccount__wrapper .motta-myaccount {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 12px;
        padding: 0;
        border: 0;
    }

    body.woocommerce-account .motta-myaccount__wrapper .motta-myaccount img {
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 999px;
    }

    body.woocommerce-account .motta-myaccount__wrapper .motta-myaccount__user {
        min-width: 0;
        margin: 0;
    }

    /* "Hello!" -- Motta sets it at 24px over a 14px name; the name is the fact. */
    body.woocommerce-account .motta-myaccount__wrapper .motta-myaccount__user .text {
        margin: 0;
        color: var(--tc-muted, #6B6660);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.35;
    }

    body.woocommerce-account .motta-myaccount__wrapper .motta-myaccount__user .name {
        color: var(--tc-ink, #121111);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    /* The list is a row card: white, on a ring rather than a border. */
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        padding: 8px;
        border-radius: var(--tc-radius-sm, 14px);
        background-color: #FFFFFF;
        box-shadow: inset 0 0 0 1px rgba(18, 17, 17, 0.13), 0 2px 8px rgba(18, 17, 17, 0.05);
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
    }

    /* A row. Motta: display block, padding 1px 19px 1px 54px, 16px/500 grey. */
    body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a,
    body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:hover {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 12px;
        border-radius: 10px;
        color: var(--tc-ink, #121111);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
    }

    body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:hover {
        background-color: var(--tc-band, #F5EFE3);
    }

    /* The page being read. */
    body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a,
    body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a:hover {
        background-color: var(--tc-green-soft, #E4EEE9);
        color: var(--tc-green-dark, #1F463B);
        font-weight: 600;
    }
}