/* =========================================================
   ECHTLEDERJACKEN
   Premium WooCommerce My Account
   account.css
   ========================================================= */


/* ---------------------------------------------------------
   PAGE FOUNDATION
   --------------------------------------------------------- */

body.woocommerce-account
.entry-title,
body.woocommerce-account
.page-header {
    display: none;
}


body.woocommerce-account
.site-main,
body.woocommerce-account
#main {
    width: 100% !important;
    max-width: none !important;

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


body.woocommerce-account
.woocommerce {
    width: 100%;
    max-width: none;

    margin: 0;
}


.premium-account,
.premium-account-auth {
    position: relative;

    left: 50%;

    width: 100vw;
    max-width: none;

    margin-left: -50vw;

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

    overflow-x: clip;
}


/* ---------------------------------------------------------
   ACCOUNT HEADER
   --------------------------------------------------------- */

.premium-account__header {
    border-bottom:
        1px solid var(--color-border);
}


.premium-account__header-inner {
    width: 100%;
    max-width: 1560px;

    margin-inline: auto;

    padding:
        clamp(3rem, 5vw, 5.5rem)
        clamp(2rem, 4.5vw, 5rem)
        clamp(2.75rem, 4vw, 4.25rem);
}


.premium-account__heading-row {
    display: grid;

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

    gap:
        clamp(3rem, 6vw, 7rem);

    align-items: end;
}


.premium-account__title {
    margin:
        0
        0
        1rem;

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        clamp(3rem, 5vw, 5.4rem);

    font-weight: 400;

    line-height: 0.96;

    letter-spacing:
        -0.05em;
}


.premium-account__intro {
    max-width: 760px;

    margin: 0;

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

    font-size:
        0.96rem;

    line-height: 1.75;
}


.premium-account__shop-link {
    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    padding-bottom:
        0.4rem;

    border-bottom:
        1px solid var(--color-border);

    color:
        var(--color-primary);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.075em;

    text-decoration: none;

    text-transform: uppercase;
}


.premium-account__shop-link
span {
    color:
        var(--color-accent-gold);

    transition:
        transform var(--transition-fast);
}


.premium-account__shop-link:hover
span {
    transform:
        translateX(4px);
}


/* ---------------------------------------------------------
   ACCOUNT LAYOUT
   --------------------------------------------------------- */

.premium-account__layout {
    display: grid;

    grid-template-columns:
        260px
        minmax(0, 1fr);

    gap:
        clamp(3.5rem, 5vw, 6rem);

    width: 100%;
    max-width: 1560px;

    margin-inline: auto;

    padding:
        clamp(3rem, 5vw, 5rem)
        clamp(2rem, 4.5vw, 5rem)
        clamp(6rem, 8vw, 8rem);
}


.premium-account__navigation-column,
.premium-account__content {
    min-width: 0;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.premium-account-nav {
    position: sticky;

    top: 145px;

    float: none !important;

    width: 100% !important;

    margin: 0 !important;
}


.premium-account-nav__heading {
    padding:
        0
        0
        0.9rem;

    border-bottom:
        1px solid var(--color-primary);
}


.premium-account-nav__heading
span {
    color:
        var(--color-primary);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.premium-account-nav
ul {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


.premium-account-nav
li {
    margin: 0 !important;
    padding: 0 !important;

    border-bottom:
        1px solid var(--color-border);
}


.premium-account-nav
li
a {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto;

    gap:
        0.65rem;

    align-items: center;

    min-height: 54px;

    padding:
        0.85rem
        0;

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

    font-size:
        0.67rem;

    font-weight:
        600;

    letter-spacing:
        0.035em;

    text-decoration: none;

    transition:
        color var(--transition-fast);
}


.premium-account-nav
li.is-active
a,
.premium-account-nav
li
a:hover {
    color:
        var(--color-primary);
}


.premium-account-nav__number {
    color:
        var(--color-accent-gold);

    font-family:
        var(--font-display);

    font-size:
        0.7rem;

    font-style:
        italic;
}


.premium-account-nav__arrow {
    color:
        var(--color-accent-gold);

    opacity:
        0;

    transform:
        translateX(-4px);

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}


.premium-account-nav
li.is-active
.premium-account-nav__arrow,
.premium-account-nav
li
a:hover
.premium-account-nav__arrow {
    opacity:
        1;

    transform:
        translateX(0);
}


/* Logout */

.premium-account-nav
.woocommerce-MyAccount-navigation-link--customer-logout
a {
    color:
        var(--color-accent-red-dark);
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.premium-account__content {
    float: none !important;

    width: 100% !important;

    margin: 0 !important;

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

    font-size:
        0.92rem;

    line-height:
        1.7;
}


.premium-account__content
> *:first-child {
    margin-top:
        0;
}


.premium-account-section-eyebrow {
    display: block;

    margin-bottom:
        0.65rem;

    color:
        var(--color-accent-gold);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.premium-account__content
h2 {
    color:
        var(--color-primary);

    font-size:
        clamp(2.2rem, 3.4vw, 3.7rem);

    line-height:
        1;
}


.premium-account__content
h3 {
    color:
        var(--color-primary);

    font-size:
        clamp(1.35rem, 2vw, 1.8rem);
}


/* ---------------------------------------------------------
   DASHBOARD
   --------------------------------------------------------- */

.premium-account-dashboard__welcome {
    max-width:
        760px;

    margin-bottom:
        2.5rem;
}


.premium-account-dashboard__welcome
h2 {
    margin:
        0
        0
        1rem;
}


.premium-account-dashboard__welcome
p {
    max-width:
        680px;

    margin: 0;
}


.premium-account-dashboard__cards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        1rem;
}


.premium-account-card {
    position: relative;

    display: grid;

    grid-template-columns:
        32px
        minmax(0, 1fr)
        auto;

    gap:
        0.8rem;

    align-items: start;

    min-height:
        220px;

    padding:
        1.5rem;

    background-color:
        var(--color-background-alt);

    border:
        1px solid var(--color-border);

    color:
        var(--color-primary);

    text-decoration: none;

    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


.premium-account-card:hover {
    border-color:
        var(--color-accent-gold);

    transform:
        translateY(-2px);
}


.premium-account-card__number {
    color:
        var(--color-accent-gold);

    font-family:
        var(--font-display);

    font-size:
        0.76rem;

    font-style:
        italic;
}


.premium-account-card__meta {
    display: block;

    margin-bottom:
        0.8rem;

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

    font-size:
        0.54rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.premium-account-card
h3 {
    margin:
        0
        0
        0.7rem;

    font-family:
        var(--font-display);

    font-size:
        1.55rem;

    font-weight:
        400;

    line-height:
        1.05;
}


.premium-account-card
p {
    margin: 0;

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

    font-size:
        0.76rem;

    line-height:
        1.55;
}


.premium-account-card__arrow {
    color:
        var(--color-accent-gold);

    font-size:
        1rem;

    transition:
        transform var(--transition-fast);
}


.premium-account-card:hover
.premium-account-card__arrow {
    transform:
        translateX(4px);
}


/* ---------------------------------------------------------
   GENERAL ACCOUNT TABLES
   --------------------------------------------------------- */

.premium-account__content
table.shop_table {
    width: 100% !important;

    margin:
        0
        0
        2rem !important;

    border:
        0 !important;

    border-collapse:
        collapse !important;

    background:
        transparent !important;
}


.premium-account__content
table.shop_table
thead {
    border-bottom:
        1px solid var(--color-primary);
}


.premium-account__content
table.shop_table
th {
    padding:
        0.8rem
        0.7rem !important;

    background:
        transparent !important;

    border:
        0 !important;

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

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-align:
        left;

    text-transform:
        uppercase;
}


.premium-account__content
table.shop_table
td {
    padding:
        1rem
        0.7rem !important;

    background:
        transparent !important;

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

    color:
        var(--color-primary);

    font-size:
        0.76rem;
}


.premium-account__content
table.shop_table
a {
    color:
        var(--color-primary);
}


/* ---------------------------------------------------------
   ORDER STATUS / ACTION BUTTONS
   --------------------------------------------------------- */

.premium-account__content
.woocommerce-orders-table
.woocommerce-button,
.premium-account__content
.woocommerce-orders-table
.button,
.premium-account__content
.woocommerce-MyAccount-downloads-file,
.premium-account__content
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height:
        40px;

    padding:
        0.65rem
        0.85rem !important;

    background-color:
        transparent !important;

    border:
        1px solid var(--color-primary) !important;

    border-radius:
        var(--radius-small) !important;

    box-shadow:
        none !important;

    color:
        var(--color-primary) !important;

    font-size:
        0.58rem !important;

    font-weight:
        700 !important;

    letter-spacing:
        0.065em;

    text-decoration:
        none !important;

    text-transform:
        uppercase;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}


.premium-account__content
.button:hover {
    background-color:
        var(--color-primary) !important;

    color:
        var(--color-secondary) !important;
}


/* ---------------------------------------------------------
   ADDRESSES
   --------------------------------------------------------- */

.premium-account__content
.woocommerce-Addresses {
    display: grid !important;

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

    gap:
        1rem;

    margin-top:
        1.5rem;
}


.premium-account__content
.woocommerce-Address {
    float: none !important;

    width: 100% !important;

    padding:
        1.5rem;

    background-color:
        var(--color-background-alt);

    border:
        1px solid var(--color-border);
}


.premium-account__content
.woocommerce-Address
title,
.premium-account__content
.woocommerce-Address-title {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        1rem;

    margin-bottom:
        1rem;
}


.premium-account__content
.woocommerce-Address-title
h2,
.premium-account__content
.woocommerce-Address
h2 {
    margin: 0;

    font-size:
        1.65rem;
}


.premium-account__content
.woocommerce-Address-title
.edit,
.premium-account__content
.woocommerce-Address
.edit {
    float: none !important;

    color:
        var(--color-primary);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.06em;

    text-decoration-color:
        var(--color-accent-gold);

    text-transform:
        uppercase;
}


.premium-account__content
address {
    color:
        var(--color-text-muted);

    font-style:
        normal;

    line-height:
        1.75;
}


/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */

.premium-account__content
form {
    max-width:
        900px;
}


.premium-account__content
.form-row {
    float: none !important;

    width: 100% !important;

    margin:
        0
        0
        1rem !important;

    padding: 0 !important;
}


.premium-account__content
.form-row-first,
.premium-account__content
.form-row-last {
    display: inline-block;

    width:
        calc(50% - 0.55rem) !important;

    vertical-align:
        top;
}


.premium-account__content
.form-row-first {
    margin-right:
        1rem !important;
}


.premium-account__content
label {
    display: block;

    margin-bottom:
        0.45rem;

    color:
        var(--color-primary);

    font-size:
        0.59rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.premium-account__content
.input-text,
.premium-account__content
select,
.premium-account__content
.select2-selection--single {
    width: 100% !important;

    min-height:
        50px;

    padding:
        0.75rem
        0.85rem !important;

    background-color:
        var(--color-secondary) !important;

    border:
        1px solid var(--color-border) !important;

    border-radius:
        var(--radius-small) !important;

    box-shadow:
        none !important;

    color:
        var(--color-primary) !important;

    font-size:
        0.82rem;
}


.premium-account__content
.input-text:focus,
.premium-account__content
select:focus,
.premium-account__content
.select2-selection--single:focus {
    border-color:
        var(--color-accent-gold) !important;

    outline: 0;
}


.premium-account__content
fieldset {
    margin:
        2.5rem
        0
        1.5rem;

    padding:
        1.5rem;

    border:
        1px solid var(--color-border);
}


.premium-account__content
fieldset
legend {
    padding:
        0
        0.5rem;

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        1.45rem;
}


/* ---------------------------------------------------------
   VIEW ORDER
   --------------------------------------------------------- */

.premium-account__content
.woocommerce-order-details,
.premium-account__content
.woocommerce-customer-details {
    margin-top:
        2rem;
}


.premium-account__content
.woocommerce-order-details__title,
.premium-account__content
.woocommerce-column__title {
    margin-bottom:
        1.25rem;

    font-size:
        clamp(1.8rem, 2.8vw, 2.6rem);
}


/* ---------------------------------------------------------
   LOGIN / REGISTER PAGE
   --------------------------------------------------------- */

.premium-account-auth__inner {
    width: 100%;
    max-width:
        1240px;

    margin-inline:
        auto;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(1.5rem, 4vw, 5rem)
        clamp(6rem, 9vw, 9rem);
}


.premium-account-auth__header {
    max-width:
        760px;

    margin-bottom:
        clamp(3rem, 5vw, 5rem);
}


.premium-account-auth__header
h1 {
    margin:
        0
        0
        1rem;

    font-size:
        clamp(3rem, 5vw, 5rem);

    line-height:
        0.98;
}


.premium-account-auth__header
p {
    max-width:
        620px;

    margin: 0;

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

    line-height:
        1.75;
}


.premium-account-auth__grid {
    display: grid;

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

    gap:
        clamp(2rem, 4vw, 4rem);
}


.premium-account-auth__grid.login-only {
    grid-template-columns:
        minmax(0, 620px);
}


.premium-account-auth__panel {
    padding:
        clamp(1.75rem, 3vw, 2.5rem);

    background-color:
        var(--color-background-alt);

    border:
        1px solid var(--color-border);
}


.premium-account-auth__panel
h2 {
    margin:
        0
        0
        1.75rem;

    font-size:
        clamp(2rem, 3vw, 3rem);

    line-height:
        1;
}


.premium-account-auth__panel-intro {
    margin:
        -0.75rem
        0
        1.75rem;

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

    font-size:
        0.82rem;

    line-height:
        1.65;
}


.premium-account-form
.form-row {
    float: none !important;

    width: 100% !important;

    margin:
        0
        0
        1rem !important;

    padding: 0 !important;
}


.premium-account-form
label {
    display: block;

    margin-bottom:
        0.45rem;

    color:
        var(--color-primary);

    font-size:
        0.59rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.premium-account-form
.input-text {
    width: 100% !important;

    min-height:
        50px;

    padding:
        0.75rem
        0.85rem !important;

    background-color:
        var(--color-secondary) !important;

    border:
        1px solid var(--color-border) !important;

    border-radius:
        var(--radius-small) !important;

    color:
        var(--color-primary);

    font-size:
        0.82rem;
}


.premium-account-form
.input-text:focus {
    border-color:
        var(--color-accent-gold) !important;

    outline:
        0;
}


.premium-account-form__utility {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        1rem;

    margin:
        0.3rem
        0
        1.25rem;
}


.premium-account-form__utility
label {
    display: flex;

    align-items: center;

    gap:
        0.45rem;

    margin: 0;

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

    font-size:
        0.68rem;

    font-weight:
        500;

    letter-spacing: 0;

    text-transform: none;
}


.premium-account-form
input[type="checkbox"] {
    accent-color:
        var(--color-primary);
}


.premium-account-form__lost-password {
    color:
        var(--color-primary);

    font-size:
        0.66rem;

    text-decoration-color:
        var(--color-accent-gold);

    text-underline-offset:
        0.18em;
}


.premium-account-form__submit {
    width: 100%;

    min-height:
        50px;

    background-color:
        var(--color-primary) !important;

    border:
        1px solid var(--color-primary) !important;

    color:
        var(--color-secondary) !important;
}


.premium-account-form__submit:hover {
    background-color:
        var(--color-accent-gold) !important;

    border-color:
        var(--color-accent-gold) !important;

    color:
        var(--color-primary) !important;
}


.premium-account-form__hint {
    color:
        var(--color-text-muted);

    font-size:
        0.75rem;

    line-height:
        1.6;
}


/* ---------------------------------------------------------
   PAGINATION
   --------------------------------------------------------- */

.premium-account__content
.woocommerce-pagination {
    display: flex;

    gap:
        0.5rem;

    margin-top:
        1.5rem;
}


.premium-account__content
.woocommerce-pagination
.button {
    margin-right:
        0.5rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .premium-account__layout {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }


    .premium-account-nav {
        position:
            static;

        width:
            100%;
    }


    .premium-account-nav__heading {
        display:
            none;
    }


    .premium-account-nav
    ul {
        display: flex;

        gap:
            0.5rem;

        padding-bottom:
            0.5rem !important;

        overflow-x:
            auto;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }


    .premium-account-nav
    ul::-webkit-scrollbar {
        display:
            none;
    }


    .premium-account-nav
    li {
        flex:
            0 0
            auto;

        border:
            1px solid var(--color-border);
    }


    .premium-account-nav
    li
    a {
        display: flex;

        gap:
            0.45rem;

        min-height:
            42px;

        padding:
            0.65rem
            0.75rem;

        white-space:
            nowrap;
    }


    .premium-account-nav__arrow {
        display:
            none;
    }


    .premium-account-nav
    li.is-active {
        border-color:
            var(--color-primary);
    }


    .premium-account-dashboard__cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .premium-account,
    .premium-account-auth {
        left:
            auto;

        width:
            100%;

        margin-left:
            0;
    }


    .premium-account__header-inner {
        padding:
            2.75rem
            1.25rem
            2.25rem;
    }


    .premium-account__heading-row {
        grid-template-columns:
            1fr;

        gap:
            1.5rem;
    }


    .premium-account__title {
        font-size:
            clamp(2.8rem, 12vw, 4.4rem);
    }


    .premium-account__layout {
        padding:
            2rem
            1.25rem
            5rem;

        gap:
            2rem;
    }


    .premium-account-dashboard__cards {
        grid-template-columns:
            1fr;
    }


    .premium-account-card {
        min-height:
            0;
    }


    /* Account tables as readable cards */

    .premium-account__content
    table.shop_table,
    .premium-account__content
    table.shop_table
    tbody {
        display:
            block !important;

        width:
            100% !important;
    }


    .premium-account__content
    table.shop_table
    thead {
        display:
            none !important;
    }


    .premium-account__content
    table.shop_table
    tr {
        display:
            block;

        margin-bottom:
            1rem;

        padding:
            1rem;

        background-color:
            var(--color-background-alt);

        border:
            1px solid var(--color-border);
    }


    .premium-account__content
    table.shop_table
    td {
        display:
            flex !important;

        align-items:
            baseline;
        justify-content:
            space-between;

        gap:
            1rem;

        width:
            100% !important;

        padding:
            0.55rem
            0 !important;

        border-bottom:
            1px solid var(--color-border) !important;

        text-align:
            right !important;
    }


    .premium-account__content
    table.shop_table
    td:last-child {
        border-bottom:
            0 !important;
    }


    .premium-account__content
    table.shop_table
    td::before {
        color:
            var(--color-text-muted);

        font-size:
            0.54rem;

        font-weight:
            700;

        letter-spacing:
            0.07em;

        text-transform:
            uppercase;
    }


    .premium-account__content
    .woocommerce-Addresses {
        grid-template-columns:
            1fr !important;
    }


    .premium-account__content
    .form-row-first,
    .premium-account__content
    .form-row-last {
        display:
            block;

        width:
            100% !important;

        margin-right:
            0 !important;
    }


    .premium-account-auth__inner {
        padding:
            3.5rem
            1.25rem
            5rem;
    }


    .premium-account-auth__grid {
        grid-template-columns:
            1fr;
    }


    .premium-account-form__utility {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .premium-account-card,
    .premium-account-card__arrow,
    .premium-account__shop-link
    span {
        transition:
            none !important;
    }


    .premium-account-card:hover,
    .premium-account-card:hover
    .premium-account-card__arrow,
    .premium-account__shop-link:hover
    span {
        transform:
            none !important;
    }

}