/* Start custom CSS for shortcode, class: .elementor-element-3f277ee *//* =========================================================
   ARTSHOP - MI CUENTA PREMIUM
   WooCommerce + Astra + Elementor

   Color principal: #F0BA1F
   Desktop + Tablet + Mobile
   ========================================================= */


/* =========================================================
   1. ÁREA GENERAL
   ========================================================= */

body.woocommerce-account {
    background: #f6f6f6 !important;
}


body.woocommerce-account .woocommerce {
    width: 100% !important;
    max-width: 1180px !important;

    margin: 0 auto !important;
    padding: 48px 24px 70px !important;

    display: flex !important;
    align-items: flex-start !important;

    gap: 24px !important;

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


/* =========================================================
   2. MENÚ LATERAL - DESKTOP
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-navigation {

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

    float: none !important;

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


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

    width: 100% !important;

    list-style: none !important;

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

    background: #111111 !important;

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

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .10) !important;
}


body.woocommerce-account
.woocommerce-MyAccount-navigation li {

    width: 100% !important;

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

    border: 0 !important;
}


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

    display: flex !important;
    align-items: center !important;

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

    padding: 0 14px !important;

    border-radius: 8px !important;

    color: #d4d4d4 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    transition:
        background .18s ease,
        color .18s ease !important;
}


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

    background: rgba(255, 255, 255, .07) !important;

    color: #ffffff !important;
}


/* =========================================================
   3. ITEM ACTIVO
   ========================================================= */

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

    background: #F0BA1F !important;

    color: #111111 !important;

    font-weight: 700 !important;
}


/* =========================================================
   4. CERRAR SESIÓN
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-navigation-link--customer-logout {

    margin-top: 10px !important;
    padding-top: 10px !important;

    border-top:
        1px solid rgba(255, 255, 255, .10) !important;
}


/* =========================================================
   5. OCULTAR DESCARGAS
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-navigation-link--downloads {

    display: none !important;
}


/* =========================================================
   6. PANEL DERECHO
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content {

    width: calc(100% - 274px) !important;

    flex: 1 1 auto !important;

    float: none !important;

    min-width: 0 !important;
    min-height: 330px !important;

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

    background: #ffffff !important;

    border: 1px solid #e8e8e8 !important;
    border-radius: 15px !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .05) !important;
}


/* =========================================================
   7. TEXTO
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content p {

    width: 100% !important;
    max-width: 780px !important;

    margin: 0 0 16px !important;

    color: #555555 !important;

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

    line-height: 1.7 !important;
}


body.woocommerce-account
.woocommerce-MyAccount-content strong {

    color: #111111 !important;

    font-weight: 700 !important;
}


body.woocommerce-account
.woocommerce-MyAccount-content a {

    color: #b88700 !important;

    font-weight: 600 !important;

    text-decoration: none !important;
}


body.woocommerce-account
.woocommerce-MyAccount-content a:hover {

    color: #111111 !important;
}


/* =========================================================
   8. TÍTULOS
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content h2,

body.woocommerce-account
.woocommerce-MyAccount-content h3 {

    margin: 0 0 22px !important;

    color: #111111 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}


/* =========================================================
   9. BOTONES
   ========================================================= */

body.woocommerce-account
.woocommerce-button,

body.woocommerce-account
.woocommerce-MyAccount-content .button,

body.woocommerce-account
.woocommerce-MyAccount-content button.button {

    min-height: 40px !important;

    padding: 10px 17px !important;

    background: #F0BA1F !important;

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

    color: #111111 !important;

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

    box-shadow: none !important;
}


body.woocommerce-account
.woocommerce-button:hover,

body.woocommerce-account
.woocommerce-MyAccount-content .button:hover,

body.woocommerce-account
.woocommerce-MyAccount-content button.button:hover {

    background: #111111 !important;

    color: #ffffff !important;
}


/* =========================================================
   10. CAMPOS
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content label,

body.woocommerce-account
#customer_login label {

    display: block !important;

    margin-bottom: 6px !important;

    color: #333333 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
}


body.woocommerce-account input.input-text,
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="password"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account select,
body.woocommerce-account textarea {

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

    padding: 10px 13px !important;

    background: #f7f7f7 !important;

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

    color: #111111 !important;

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

    outline: none !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}


body.woocommerce-account input:focus,
body.woocommerce-account select:focus,
body.woocommerce-account textarea:focus {

    background: #ffffff !important;

    border-color: #F0BA1F !important;

    box-shadow:
        0 0 0 3px rgba(240, 186, 31, .13) !important;
}


/* =========================================================
   11. TABLA DE PEDIDOS
   ========================================================= */

body.woocommerce-account
table.shop_table {

    width: 100% !important;

    border: 0 !important;

    border-collapse: separate !important;
    border-spacing: 0 7px !important;

    background: transparent !important;
}


body.woocommerce-account
table.shop_table th {

    padding: 8px 12px !important;

    background: transparent !important;

    border: 0 !important;

    color: #999999 !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
}


body.woocommerce-account
table.shop_table tbody tr {

    background: #f7f7f7 !important;
}


body.woocommerce-account
table.shop_table td {

    padding: 14px 12px !important;

    border: 0 !important;

    color: #333333 !important;

    font-size: 12px !important;
}


/* =========================================================
   12. LOGIN / REGISTRO
   ========================================================= */

body.woocommerce-account:not(.logged-in)
.woocommerce {

    display: block !important;
}


body.woocommerce-account
#customer_login {

    width: 100% !important;

    display: grid !important;

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

    gap: 22px !important;
}


body.woocommerce-account
#customer_login .u-column1,

body.woocommerce-account
#customer_login .u-column2 {

    width: 100% !important;

    float: none !important;

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

    background: #ffffff !important;

    border: 1px solid #e8e8e8 !important;
    border-radius: 15px !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .05) !important;
}


body.woocommerce-account
#customer_login h2 {

    position: relative !important;

    margin: 0 0 25px !important;
    padding-bottom: 13px !important;

    color: #111111 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}


body.woocommerce-account
#customer_login h2::after {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    bottom: 0 !important;

    width: 42px !important;
    height: 3px !important;

    background: #F0BA1F !important;

    border-radius: 20px !important;
}


/* =========================================================
   13. ELEMENTOS DE NAVEGACIÓN MÓVIL
   EN DESKTOP NO EXISTEN VISUALMENTE
   ========================================================= */

.artshop-account-next,
.artshop-account-scroll-fade {

    display: none !important;
}


/* =========================================================
   14. MÓVIL
   ========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       ESTRUCTURA
       ===================================================== */

    body.woocommerce-account
    .woocommerce {

        display: block !important;

        padding: 20px 10px 42px !important;
    }


    /* =====================================================
       NAVEGACIÓN
       ===================================================== */

    body.woocommerce-account
    .woocommerce-MyAccount-navigation {

        position: relative !important;

        z-index: 10 !important;

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

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

        overflow: visible !important;
    }


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

        position: relative !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;

        gap: 5px !important;

        margin: 0 !important;

        /*
         48px extra para que la flecha
         no tape el último elemento visible.
        */
        padding:
            7px
            48px
            7px
            7px !important;

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

        background: #111111 !important;

        border-radius: 10px !important;

        scrollbar-width: none !important;

        -ms-overflow-style: none !important;

        -webkit-overflow-scrolling: touch !important;

        scroll-behavior: smooth !important;

        /*
         Al soltar el dedo,
         se acomoda al item.
        */
        scroll-snap-type: x mandatory !important;

        scroll-padding-left: 7px !important;
        scroll-padding-right: 48px !important;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-navigation
    ul::-webkit-scrollbar {

        display: none !important;

        width: 0 !important;
        height: 0 !important;
    }


    /* =====================================================
       ITEMS MÓVILES
       ===================================================== */

    body.woocommerce-account
    .woocommerce-MyAccount-navigation li {

        flex: 0 0 auto !important;

        width: auto !important;

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

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }


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

        width: auto !important;

        min-height: 38px !important;

        padding: 0 12px !important;

        border-radius: 7px !important;

        font-size: 10px !important;

        white-space: nowrap !important;
    }


    /* Cerrar sesión deja de necesitar separación */

    body.woocommerce-account
    .woocommerce-MyAccount-navigation-link--customer-logout {

        margin-top: 0 !important;
        padding-top: 0 !important;

        border-top: 0 !important;
    }


    /* =====================================================
       IMPORTANTE:
       ELIMINAR DEFINITIVAMENTE PSEUDO-FLECHAS VIEJAS
       ===================================================== */

    body.woocommerce-account
    .woocommerce-MyAccount-navigation::before,

    body.woocommerce-account
    .woocommerce-MyAccount-navigation::after {

        content: none !important;

        display: none !important;
    }


    /* =====================================================
       DEGRADADO REAL
       GENERADO POR JS
       ===================================================== */

    body.woocommerce-account
    .artshop-account-scroll-fade {

        position: absolute !important;

        z-index: 20 !important;

        top: 0 !important;
        right: 0 !important;

        display: block !important;

        width: 62px !important;
        height: 100% !important;

        pointer-events: none !important;

        background:
            linear-gradient(
                90deg,
                rgba(17, 17, 17, 0) 0%,
                rgba(17, 17, 17, .72) 35%,
                #111111 78%
            ) !important;

        border-radius:
            0 10px 10px 0 !important;
    }


    /* =====================================================
       FLECHA REAL
       ===================================================== */

    body.woocommerce-account
    .artshop-account-next {

        position: absolute !important;

        z-index: 40 !important;

        top: 50% !important;
        right: 7px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
        min-height: 30px !important;

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

        transform:
            translateY(-50%) !important;

        background: #F0BA1F !important;

        border: 0 !important;
        outline: 0 !important;

        border-radius: 50% !important;

        color: #111111 !important;

        font-family: Arial, sans-serif !important;

        font-size: 23px !important;
        font-weight: 400 !important;

        line-height: 28px !important;

        text-align: center !important;

        cursor: pointer !important;

        box-shadow:
            0 2px 8px rgba(0, 0, 0, .30) !important;

        appearance: none !important;
        -webkit-appearance: none !important;

        transition:
            transform .15s ease,
            background .15s ease !important;
    }


    body.woocommerce-account
    .artshop-account-next:hover {

        background: #F0BA1F !important;

        color: #111111 !important;
    }


    body.woocommerce-account
    .artshop-account-next:active {

        transform:
            translateY(-50%)
            scale(.90) !important;
    }


    /* =====================================================
       PANEL DE CONTENIDO
       ===================================================== */

    body.woocommerce-account
    .woocommerce-MyAccount-content {

        width: 100% !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 21px 15px !important;

        border-radius: 10px !important;
    }


    body.woocommerce-account
    .woocommerce-MyAccount-content p {

        font-size: 12px !important;

        line-height: 1.65 !important;
    }


    /* =====================================================
       LOGIN / REGISTRO
       ===================================================== */

    body.woocommerce-account
    #customer_login {

        display: block !important;
    }


    body.woocommerce-account
    #customer_login .u-column1,

    body.woocommerce-account
    #customer_login .u-column2 {

        padding: 22px 16px !important;

        margin-bottom: 14px !important;

        border-radius: 10px !important;
    }

}

body.woocommerce-account .woocommerce-button, body.woocommerce-account .woocommerce-MyAccount-content .button, body.woocommerce-account .woocommerce-MyAccount-content button.button {
    padding: 15px 17px !important;
}/* End custom CSS */