/* ==========================================================================
   MY ACCOUNT: Banner Principal
   ========================================================================== */

.hs-myaccount-banner {
    /* EL TRUCO "BREAKOUT" para estirarse de lado a lado */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -40px; /* Anula el padding superior del page.php */
    
    height: 200px;
    background-image: url('../../img/banner-account.webp'); /* <-- Tu imagen webp */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

/* Este contenedor interno mantiene el texto alineado con el resto de la web */
.hs-myaccount-banner-inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

.hs-myaccount-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500; /* Medium */
    font-size: 40px;
    color: #FFFFFF;
    margin: 0;
    text-transform: uppercase;
}

/* =========================================
   MOBILE VIEW (< 1024px)
   ========================================= */
@media (max-width: 1023px) {
    .hs-myaccount-banner {
        height: 150px;
    }
    
    .hs-myaccount-banner-inner {
        padding: 0 20px;
    }

    .hs-myaccount-title {
        font-size: 32px;
    }
}