/* White Fox · accesos rápidos de la cuenta con la sesión iniciada.
   Escritorio: "Hola, nombre" y un menú que se abre al pasar el mouse sobre el ícono.
   Celular: bloque de cuenta fijo al pie del menú lateral. Con la sesión cerrada no se usa nada de esto. */

/* ---------- Ítems compartidos (escritorio y celular) ---------- */
.wf-acc__item,
.wf-acc__more,
.wf-acc__out {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    font-family: 'PT Serif', serif;
}
.wf-acc__item { gap: 14px; font-size: 15px; font-weight: 400; }
.wf-acc__item svg { flex: none; color: #B3956A; }
.wf-acc__more { gap: 8px; font-size: 14px; font-weight: 400; }
.wf-acc__more svg { flex: none; }
.wf-acc__out { font-size: 14px; font-weight: 400; }

/* ---------- Escritorio ---------- */
@media (min-width: 992px) {
    /* Con la sesión iniciada la columna derecha no se parte en dos renglones:
       los tres íconos quedan en una sola fila, alineados a la derecha. */
    #header .header-6 .wf-nav-right--in { overflow: visible; }
    #header .header-6 .wf-nav-right--in .tv-contact-account-cart-wrapper {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap;
    }
    #header .header-6 .wf-account-link--in { position: relative; }
    #header .header-6 .wf-account-link--in .tv-myaccount-btn { gap: 8px; }

    /* El nombre aparece solo si hay lugar; en pantallas angostas queda el ícono. */
    #header .header-6 .wf-account-link__name {
        display: none;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #000;
        font-family: 'PT Serif', serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1;
        text-transform: none;
    }

    #header .header-6 .wf-account-menu {
        display: none;
        position: absolute;
        top: calc(100% - 20px);
        right: -14px;
        z-index: 30;
        width: 264px;
        text-align: left;
    }
    #header .header-6 .wf-account-link--in:hover .wf-account-menu,
    #header .header-6 .wf-account-link--in:focus-within .wf-account-menu { display: block; }

    #header .header-6 .wf-account-menu__panel {
        position: relative;
        padding: 8px 0;
        background: #fff;
        border: 1px solid rgba(30, 42, 58, .12);
        box-shadow: 0 14px 36px rgba(30, 42, 58, .14);
    }
    #header .header-6 .wf-account-menu__panel::before {
        content: "";
        position: absolute;
        top: -7px;
        right: 34px;
        width: 12px;
        height: 12px;
        background: #fff;
        border-top: 1px solid rgba(30, 42, 58, .12);
        border-left: 1px solid rgba(30, 42, 58, .12);
        transform: rotate(45deg);
    }
    #header .header-6 .wf-account-menu__email {
        margin: 0;
        padding: 12px 22px;
        border-bottom: 1px solid rgba(30, 42, 58, .1);
        color: rgba(30, 42, 58, .62);
        font-family: 'PT Serif', serif;
        font-size: 13px;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #header .header-6 .wf-account-menu a { padding: 0 22px; }
    #header .header-6 .wf-account-menu a.wf-acc__item { min-height: 48px; color: #1E2A3A; }
    #header .header-6 .wf-account-menu a.wf-acc__item:hover,
    #header .header-6 .wf-account-menu a.wf-acc__item:focus-visible { background: #F9F4F0; color: #1E2A3A; }
    #header .header-6 .wf-account-menu a.wf-acc__more { color: #8A6F47; }
    #header .header-6 .wf-account-menu a.wf-acc__more:hover,
    #header .header-6 .wf-account-menu a.wf-acc__more:focus-visible { color: #1E2A3A; }
    #header .header-6 .wf-account-menu a.wf-acc__out {
        margin-top: 6px;
        border-top: 1px solid rgba(30, 42, 58, .1);
        color: rgba(30, 42, 58, .68);
    }
    #header .header-6 .wf-account-menu a.wf-acc__out:hover,
    #header .header-6 .wf-account-menu a.wf-acc__out:focus-visible { color: #1E2A3A; }
}
@media (min-width: 1400px) {
    #header .header-6 .wf-account-link__name { display: inline-block; }
}

/* ---------- Celular: menú lateral ---------- */
/* El panel pasa a columna: las categorías arriba y la cuenta pegada al pie.
   Arriba se baja el aire para que "Looks" quede más cerca del borde. */
#tvcms-mobile-view-header.mobile-header-2 .wf-mobile-drawer-layer .tvmobile-slidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding-top: 6px;
}
#tvcms-mobile-view-header.mobile-header-2 .wf-mobile-drawer-layer .tvmobile-slidebar > * { flex-shrink: 0; }
#tvcms-mobile-view-header.mobile-header-2 .wf-mobile-drawer-layer .tvmobile-dropdown-close { height: 40px; }

/* Categorías: filas más compactas. Se ajustan solas si mañana hay más. */
#tvcms-mobile-view-header.mobile-header-2 .wf-mobile-drawer-layer #tvmobile-megamenu .menu-content > li > a {
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 1.3;
}

/* Bloque de cuenta: fondo crema, pegado a las categorías (sin hueco) y estirado hasta el pie del panel.
   Las reglas llevan "a.wf-acc__…" para ganarle a las del tema, que ponen los enlaces en bloque. */
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in {
    flex: 1 1 auto;
    margin: 16px -15px -15px;
    padding: 14px 20px 20px;
    background: #F9F4F0;
    border-top: 1px solid rgba(30, 42, 58, .1);
}
#header .wf-mobile-drawer-layer .wf-mobile-account-links__hello {
    margin: 0 0 2px;
    padding: 0;
    color: #1E2A3A;
    font-family: 'PT Serif', serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a.wf-acc__item,
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a.wf-acc__more,
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a.wf-acc__out {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0;
    line-height: 1.2;
}
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a.wf-acc__item { gap: 16px; color: #1E2A3A; font-size: 15px; }
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a.wf-acc__item svg,
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a.wf-acc__more svg { display: block; flex: none; }
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a.wf-acc__item span,
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a.wf-acc__more span { display: block; }
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a.wf-acc__more { gap: 8px; color: #8A6F47; font-size: 14px; }
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a.wf-acc__out {
    margin-top: 4px;
    border-top: 1px solid rgba(30, 42, 58, .1);
    color: rgba(30, 42, 58, .68);
    font-size: 14px;
}
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a:hover,
#header .wf-mobile-drawer-layer .wf-mobile-account-links--in a:focus-visible { color: #B3956A; }

/* Bloques vacíos del panel (contacto, idioma, moneda): sin contenido no ocupan lugar ni dibujan líneas. */
#tvcms-mobile-view-header.mobile-header-2 .wf-mobile-drawer-layer .tvmobile-slidebar .tvcmsmobile-contact:not(:has(*)),
#tvcms-mobile-view-header.mobile-header-2 .wf-mobile-drawer-layer .tvmobile-slidebar #tvmobile-lang:not(:has(*)),
#tvcms-mobile-view-header.mobile-header-2 .wf-mobile-drawer-layer .tvmobile-slidebar #tvmobile-curr:not(:has(*)) { display: none; }