.elementor-20 .elementor-element.elementor-element-397c7741{--display:flex;}/* Start custom CSS *//* =========================================================
   F/STOP LOJA — MINHA CONTA
   Classe aplicada ao widget: fstop-account-page
   ========================================================= */

.fstop-account-page {
    --fstop-account-black: #171719;
    --fstop-account-text: #242428;
    --fstop-account-muted: #6f6f77;
    --fstop-account-border: #e2e2e7;
    --fstop-account-surface: #ffffff;
    --fstop-account-soft: #f7f7f9;

    --fstop-account-gradient: linear-gradient(
        90deg,
        #f8d93d 0%,
        #ff9a2e 17%,
        #ff503f 33%,
        #e83e82 49%,
        #914fd0 65%,
        #3f70d8 82%,
        #52b85a 100%
    );

    width: 100%;

    color: var(--fstop-account-text);

    font-family: "Inter", sans-serif;
}


/* Box sizing restrito à página */

.fstop-account-page *,
.fstop-account-page *::before,
.fstop-account-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   1. ESTRUTURA PRINCIPAL — DESKTOP
   ========================================================= */

body.logged-in
.fstop-account-page
.woocommerce {
    display: grid !important;

    grid-template-columns:
        minmax(270px, 290px)
        minmax(0, 1fr) !important;

    grid-template-areas:
        "account-sidebar account-content" !important;

    align-items: start !important;

    gap: 32px !important;

    width: 100% !important;
}


/* Avisos do WooCommerce ocupam toda a largura */

body.logged-in
.fstop-account-page
.woocommerce
> .woocommerce-notices-wrapper,

body.logged-in
.fstop-account-page
.woocommerce
> .woocommerce-message,

body.logged-in
.fstop-account-page
.woocommerce
> .woocommerce-error,

body.logged-in
.fstop-account-page
.woocommerce
> .woocommerce-info {
    grid-column: 1 / -1 !important;

    width: 100% !important;
}


/* Wrapper real da área lateral do XStore */

body.logged-in
.fstop-account-page
.woocommerce
> .woocommerce-MyAccount-navigation-wrapper {
    grid-area: account-sidebar !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Conteúdo principal */

body.logged-in
.fstop-account-page
.woocommerce
> .woocommerce-MyAccount-content {
    grid-area: account-content !important;

    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
}


/* =========================================================
   2. CARTÃO DO USUÁRIO
   ========================================================= */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.MyAccount-user-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 24px 18px 22px !important;

    color: var(--fstop-account-muted) !important;

    background: var(--fstop-account-surface) !important;

    border: 1px solid var(--fstop-account-border) !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;

    text-align: center !important;

    overflow: hidden;
}


/* Avatar */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.MyAccount-user-info
img.avatar {
    display: block !important;

    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;

    margin: 0 auto 16px !important;

    object-fit: cover;

    background: #eeeeef;

    border-radius: 50% !important;

    box-shadow:
        0 0 0 4px #ffffff,
        0 0 0 5px #d8d8dd;
}


/* Wrapper dos dados do usuário */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.MyAccount-user-info
> div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
}


/* Nome e dados exibidos */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.MyAccount-user-info
.MyAccount-user-name,

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.MyAccount-user-info
> div
> div,

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.MyAccount-user-info
a {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    color: var(--fstop-account-text) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;

    text-align: center !important;
    text-decoration: none !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;
}


/* Segundo dado em tom mais discreto */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.MyAccount-user-info
> div
> div:not(.MyAccount-user-name) {
    margin-top: 2px !important;

    color: #74747c !important;

    font-size: 12px !important;
}


/* Remove parágrafos vazios do tema */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.MyAccount-user-info
p:empty {
    display: none !important;
}


/* =========================================================
   3. NAVEGAÇÃO LATERAL
   ========================================================= */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.woocommerce-MyAccount-navigation {
    display: block !important;

    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 10px 14px 16px !important;

    background: var(--fstop-account-surface) !important;

    border: 1px solid var(--fstop-account-border) !important;
    border-top: 1px solid #ededf0 !important;
    border-radius: 0 0 16px 16px !important;

    box-shadow:
        0 14px 34px rgba(17, 17, 19, 0.05);
}


/* Lista vertical */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.woocommerce-MyAccount-navigation
ul {
    display: flex !important;
    flex-direction: column !important;

    gap: 6px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* Itens */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.woocommerce-MyAccount-navigation
li {
    display: block !important;

    flex: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    list-style: none !important;
}


/*
 * Downloads precisa vir depois da regra genérica dos itens
 * e com a mesma estrutura de seletores.
 */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.woocommerce-MyAccount-navigation
li.woocommerce-MyAccount-navigation-link--downloads {
    display: none !important;
}


/* Links do menu */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.woocommerce-MyAccount-navigation
li > a {
    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    width: 100% !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 11px 13px !important;

    color: #3f3f45 !important;

    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(#e1e1e6, #e1e1e6) border-box !important;

    border: 1px solid transparent !important;
    border-radius: 10px !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    transition:
        color 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease !important;
}


/* Ícones */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.woocommerce-MyAccount-navigation
li > a i,

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.woocommerce-MyAccount-navigation
li > a svg {
    flex: 0 0 auto !important;

    width: 18px !important;
    min-width: 18px !important;

    color: currentColor !important;
    fill: currentColor !important;
}


/* =========================================================
   4. ITEM ATIVO
   Borda gradiente mais perceptível
   ========================================================= */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.woocommerce-MyAccount-navigation
li.is-active > a {
    color: #ffffff !important;

    background:
        linear-gradient(
            var(--fstop-account-black),
            var(--fstop-account-black)
        ) padding-box,
        var(--fstop-account-gradient) border-box !important;

    /*
     * 2px somente no item preto selecionado.
     * Os demais continuam com 1px.
     */
    border: 2px solid transparent !important;
    border-radius: 11px !important;

    font-weight: 600 !important;

    box-shadow:
        0 8px 21px rgba(17, 17, 19, 0.15),
        0 0 15px rgba(145, 79, 208, 0.055);
}


/* Hover dos itens brancos */

@media (hover: hover) and (pointer: fine) {

    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation
    li:not(.is-active) > a:hover {
        color: var(--fstop-account-black) !important;

        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            var(--fstop-account-gradient) border-box !important;

        border-color: transparent !important;

        box-shadow:
            0 8px 19px rgba(17, 17, 19, 0.08);

        transform: translateX(2px);
    }


    /*
     * O ativo permanece estável no hover,
     * sem alterar sua espessura.
     */

    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation
    li.is-active > a:hover {
        color: #ffffff !important;

        background:
            linear-gradient(#111113, #111113) padding-box,
            var(--fstop-account-gradient) border-box !important;

        border: 2px solid transparent !important;

        box-shadow:
            0 9px 23px rgba(17, 17, 19, 0.17),
            0 0 17px rgba(145, 79, 208, 0.065);

        transform: translateX(1px);
    }
}


/* Foco por teclado */

.fstop-account-page
.woocommerce-MyAccount-navigation-wrapper
.woocommerce-MyAccount-navigation
li > a:focus-visible {
    outline: 2px solid rgba(63, 112, 216, 0.48) !important;
    outline-offset: 3px !important;
}


/* =========================================================
   5. CONTEÚDO PRINCIPAL
   Apenas o recipiente ao redor
   ========================================================= */

.fstop-account-page
.woocommerce-MyAccount-content {
    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 30px 32px 34px !important;

    background: var(--fstop-account-surface) !important;

    border: 1px solid var(--fstop-account-border) !important;
    border-radius: 16px !important;

    box-shadow:
        0 14px 38px rgba(17, 17, 19, 0.045);
}


/*
 * Somente títulos que sejam filhos diretos do conteúdo.
 * Isso impede alterações nos títulos dos produtos e do carrossel.
 */

.fstop-account-page
.woocommerce-MyAccount-content
> h1,

.fstop-account-page
.woocommerce-MyAccount-content
> h2,

.fstop-account-page
.woocommerce-MyAccount-content
> h3,

.fstop-account-page
.woocommerce-MyAccount-content
> h4 {
    color: var(--fstop-account-black) !important;

    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;

    text-transform: none !important;
}


.fstop-account-page
.woocommerce-MyAccount-content
> h2 {
    margin-top: 0 !important;

    font-size: 25px !important;
    line-height: 1.28 !important;
}


/*
 * Somente os textos diretos da área da conta.
 * Não alcança parágrafos usados pelo XStore dentro dos produtos.
 */

.fstop-account-page
.woocommerce-MyAccount-content
> p {
    color: #55555d !important;

    font-size: 15px !important;
    line-height: 1.65 !important;
}


.fstop-account-page
.woocommerce-MyAccount-content
> p
> a {
    color: var(--fstop-account-black) !important;

    text-decoration-color: rgba(23, 23, 25, 0.35) !important;
    text-underline-offset: 3px;
}


/* =========================================================
   6. BOTÕES DO PAINEL INICIAL
   Seletores exclusivos — não alcançam os produtos
   ========================================================= */

.fstop-account-page
.MyAccount-dashboard-buttons
a,

.fstop-account-page
.account-dashboard-buttons
a,

.fstop-account-page
.my-account-dashboard-buttons
a {
    position: relative;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    min-height: 48px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            var(--fstop-account-black),
            var(--fstop-account-black)
        ) padding-box,
        linear-gradient(
            var(--fstop-account-black),
            var(--fstop-account-black)
        ) border-box !important;

    border: 1px solid transparent !important;
    border-radius: 10px !important;

    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;

    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;

    transition:
        background 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease !important;
}


@media (hover: hover) and (pointer: fine) {

    .fstop-account-page
    .MyAccount-dashboard-buttons
    a:hover,

    .fstop-account-page
    .account-dashboard-buttons
    a:hover,

    .fstop-account-page
    .my-account-dashboard-buttons
    a:hover {
        color: #ffffff !important;

        background:
            linear-gradient(#111113, #111113) padding-box,
            var(--fstop-account-gradient) border-box !important;

        box-shadow:
            0 9px 22px rgba(17, 17, 19, 0.14);

        transform: translateY(-1px);
    }
}


/* =========================================================
   7. FORMULÁRIOS DA CONTA
   Exclui formulários de compra dos produtos
   ========================================================= */

.fstop-account-page
.woocommerce-MyAccount-content
form:not(.cart)
input[type="text"],

.fstop-account-page
.woocommerce-MyAccount-content
form:not(.cart)
input[type="email"],

.fstop-account-page
.woocommerce-MyAccount-content
form:not(.cart)
input[type="tel"],

.fstop-account-page
.woocommerce-MyAccount-content
form:not(.cart)
input[type="password"],

.fstop-account-page
.woocommerce-MyAccount-content
form:not(.cart)
select,

.fstop-account-page
.woocommerce-MyAccount-content
form:not(.cart)
textarea {
    width: 100% !important;

    min-height: 46px !important;

    padding: 11px 14px !important;

    color: var(--fstop-account-text) !important;

    background: #ffffff !important;

    border: 1px solid #dcdce2 !important;
    border-radius: 10px !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


.fstop-account-page
.woocommerce-MyAccount-content
form:not(.cart)
textarea {
    min-height: 120px !important;

    resize: vertical;
}


.fstop-account-page
.woocommerce-MyAccount-content
form:not(.cart)
input:focus,

.fstop-account-page
.woocommerce-MyAccount-content
form:not(.cart)
select:focus,

.fstop-account-page
.woocommerce-MyAccount-content
form:not(.cart)
textarea:focus {
    border-color: #8d8d96 !important;

    outline: 0 !important;

    box-shadow:
        0 0 0 3px rgba(63, 112, 216, 0.10) !important;
}


/* =========================================================
   8. TABELAS DA ÁREA DA CONTA
   ========================================================= */

.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table,

.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-table--order-details,

.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-table--customer-details {
    width: 100% !important;

    overflow: hidden;

    background: #ffffff !important;

    border: 1px solid var(--fstop-account-border) !important;
    border-radius: 12px !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;
}


.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table
th,

.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table
td,

.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-table--order-details
th,

.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-table--order-details
td,

.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-table--customer-details
th,

.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-table--customer-details
td {
    padding: 14px 16px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--fstop-account-border) !important;

    font-size: 14px !important;
    line-height: 1.45 !important;
}


.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table
th,

.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-table--order-details
th,

.fstop-account-page
.woocommerce-MyAccount-content
table.woocommerce-table--customer-details
th {
    color: var(--fstop-account-black) !important;

    background: var(--fstop-account-soft) !important;

    font-weight: 700 !important;
}


/* =========================================================
   9. ENDEREÇOS
   ========================================================= */

.fstop-account-page
.woocommerce-MyAccount-content
.woocommerce-Addresses {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 18px !important;
}


.fstop-account-page
.woocommerce-MyAccount-content
.woocommerce-Address {
    width: 100% !important;

    padding: 20px !important;

    background: var(--fstop-account-soft) !important;

    border: 1px solid var(--fstop-account-border) !important;
    border-radius: 14px !important;
}


.fstop-account-page
.woocommerce-MyAccount-content
.woocommerce-Address
address {
    margin: 12px 0 0 !important;

    color: #56565e !important;

    font-size: 14px !important;
    line-height: 1.65 !important;
}


/* =========================================================
   10. TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    body.logged-in
    .fstop-account-page
    .woocommerce {
        grid-template-columns:
            minmax(225px, 245px)
            minmax(0, 1fr) !important;

        grid-template-areas:
            "account-sidebar account-content" !important;

        gap: 22px !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .MyAccount-user-info {
        padding:
            20px
            14px
            18px !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .MyAccount-user-info
    img.avatar {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation {
        padding:
            8px
            10px
            14px !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation
    li > a {
        min-height: 43px !important;

        padding:
            10px
            10px !important;

        font-size: 13px !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-content {
        padding:
            24px
            22px
            28px !important;
    }
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    body.logged-in
    .fstop-account-page
    .woocommerce {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-template-areas:
            "account-sidebar"
            "account-content" !important;

        gap: 14px !important;

        width: 100% !important;
    }


    body.logged-in
    .fstop-account-page
    .woocommerce
    > .woocommerce-MyAccount-navigation-wrapper {
        display: flex !important;
        flex-direction: column !important;

        gap: 12px !important;

        width: 100% !important;
    }


    /* Perfil independente no mobile */

    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .MyAccount-user-info {
        padding:
            16px
            14px !important;

        border: 1px solid var(--fstop-account-border) !important;
        border-radius: 14px !important;

        box-shadow: none !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .MyAccount-user-info
    img.avatar {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;

        margin-bottom: 11px !important;
    }


    /*
     * Menu horizontal rolável.
     * O conteúdo dos produtos não é alterado.
     */

    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation {
        width: 100% !important;

        padding: 0 !important;

        overflow: hidden !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation
    ul {
        display: flex !important;
        flex-direction: row !important;

        gap: 8px !important;

        width: 100% !important;

        margin: 0 !important;
        padding:
            0
            0
            7px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x proximity;
        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation
    ul::-webkit-scrollbar {
        display: none;
    }


    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation
    li {
        flex: 0 0 auto !important;

        width: auto !important;

        scroll-snap-align: start;
    }


    /*
     * Mantém Downloads oculto também depois da regra
     * que redefine todos os itens do menu no mobile.
     */

    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation
    li.woocommerce-MyAccount-navigation-link--downloads {
        display: none !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation
    li > a {
        width: auto !important;
        min-height: 42px !important;

        padding:
            10px
            14px !important;

        border-radius: 999px !important;

        font-size: 13px !important;

        white-space: nowrap !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-navigation-wrapper
    .woocommerce-MyAccount-navigation
    li.is-active > a {
        border: 2px solid transparent !important;
    }


    /* Conteúdo */

    .fstop-account-page
    .woocommerce-MyAccount-content {
        width: 100% !important;

        padding:
            20px
            15px
            28px !important;

        border-radius: 14px !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-content
    > h2 {
        font-size: 21px !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-content
    > p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }


    /* Botões superiores do painel em uma coluna */

    .fstop-account-page
    .MyAccount-dashboard-buttons,

    .fstop-account-page
    .account-dashboard-buttons,

    .fstop-account-page
    .my-account-dashboard-buttons {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 8px !important;
    }


    .fstop-account-page
    .MyAccount-dashboard-buttons
    a,

    .fstop-account-page
    .account-dashboard-buttons
    a,

    .fstop-account-page
    .my-account-dashboard-buttons
    a {
        width: 100% !important;

        min-height: 44px !important;

        font-size: 13px !important;
    }


    .fstop-account-page
    .woocommerce-MyAccount-content
    .woocommerce-Addresses {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    /* Espaço para a barra móvel fixa do XStore */

    .fstop-account-page {
        padding-bottom: 74px;
    }
}/* End custom CSS */