/* =========================================================
   BETY'S ELEC
   HEADER GLOBAL — NUEVO DISEÑO
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --header-black:
        #050505;

    --header-black-soft:
        #090909;

    --header-gold:
        #F2B82D;

    --header-gold-light:
        #FFD76A;

    --header-white:
        #F5F5F5;

    --header-gray:
        #A8A8A8;

    --header-border:
        rgba(242, 184, 45, .22);

}

/* =========================================================
   BETY'S ELEC
   TOPBAR SUPERIOR
========================================================= */

.topbar {
    width: 100%;
    height: 38px;

    background: transparent;

    border-bottom: 0;

    position: relative;

    z-index: 1100;

    box-sizing: border-box;
}


.topbar-container {

    width:
        min(
            calc(100% - 40px),
            1280px
        );

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    box-sizing: border-box;
}


.topbar-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #eeeeee;

    font-size: 11px;

    font-weight: 400;

    line-height: 1;

    white-space: nowrap;

}


.topbar-item a {

    color: inherit;

    text-decoration: none;

    transition:
        color .2s ease;

}


.topbar-item a:hover {

    color:
        #F2B82D;

}


.topbar-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color:
        #F2B82D;

    font-size: 13px;

    line-height: 1;

}

/* =========================================================
   HEADER PRINCIPAL
========================================================= */

.main-header {

    width: 100%;

    background: transparent;


    color:
        var(--header-white);

    position: relative;

    z-index: 1000;

}


/* =========================================================
   CABECERA SUPERIOR
========================================================= */

.header-main {

    width: 100%;

    border-bottom: 0;

}


.header-main-container {

    width:
        min(
            calc(100% - 40px),
            1280px
        );

    min-height:
        88px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        max-content
        max-content
        minmax(180px, 1fr)
        max-content;

    align-items:
        center;

    gap:
        clamp(16px, 2.4vw, 30px);
}


/* =========================================================
   LOGO
========================================================= */

.header-brand {

    min-width: 0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    width:
        fit-content;

    text-decoration:
        none;

    color:
        inherit;

}


.header-brand-logo {

    width:
        58px;

    height:
        58px;

    object-fit:
        contain;

    display:
        block;

}


.header-brand-name {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;

}


.header-brand-name strong {

    color:
        #ffffff;

    font-size:
        22px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.header-brand-name span {

    margin-top:
        6px;

    color:
        var(--header-gold);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        4px;

}


/* =========================================================
   BUSCADOR
========================================================= */

.header-search {

    min-width: 0;

    position:
        relative;

    width:
        100%;

    max-width:
        520px;

    justify-self:
        center;

}


.header-search-input {

    width:
        100%;

    height:
        48px;

    padding:
        0 55px
        0 20px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .18
        );

    border-radius:
        26px;

    outline:
        none;

    background:
        #101010;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.header-search-input::placeholder {

    color:
        #8d8d8d;

}


.header-search-input:focus {

    border-color:
        rgba(
            242,
            184,
            45,
            .65
        );

    box-shadow:
        0 0 0 3px
        rgba(
            242,
            184,
            45,
            .08
        );

}


.header-search-button {

    position:
        absolute;

    top:
        50%;

    right:
        8px;

    width:
        38px;

    height:
        38px;

    transform:
        translateY(-50%);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    background:
        transparent;

    color:
        var(--header-gold);

    cursor:
        pointer;

}


.header-search-button svg {

    width:
        21px;

    height:
        21px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   ACCIONES
========================================================= */

.header-actions {

    min-width: 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        25px;

}


.header-action {

    min-width:
        58px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    color:
        #eeeeee;

    text-decoration:
        none;

    font-size:
        11px;

    white-space:
        nowrap;

    transition:
        color .2s ease;

}


.header-action:hover {

    color:
        var(--header-gold);

}


/* =========================================================
   ICONOS DE ACCIONES
========================================================= */

.header-action > svg {

    width:
        25px;

    height:
        25px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.header-account-image-wrapper {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            242,
            184,
            45,
            .8
        );

    border-radius:
        50%;

    overflow:
        hidden;

}


.header-account-default {

    width:
        24px;

    height:
        24px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.header-account-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.header-account-image[hidden] {

    display:
        none;

}


/* =========================================================
   CARRITO
========================================================= */

.header-cart-icon-wrapper {

    position:
        relative;

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.header-cart-icon-wrapper svg {

    width:
        27px;

    height:
        27px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.header-cart-count {

    position:
        absolute;

    top:
        -5px;

    right:
        -8px;

    min-width:
        18px;

    height:
        18px;

    padding:
        0 4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-sizing:
        border-box;

    border-radius:
        50%;

    background:
        var(--header-gold);

    color:
        #050505;

    font-size:
        10px;

    font-weight:
        800;

}


/* =========================================================
   MENÚ DESPLEGABLE
========================================================= */

.header-menu-wrapper {

    position:
        relative;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    flex-shrink:
        0;

}

.header-menu-button {

    height:
        52px;

    padding:
        0 8px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border:
        none;

    background:
        transparent;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        600;

    cursor:
        pointer;

}


.header-menu-button svg {

    width:
        21px;

    height:
        21px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

}


.header-menu-button:hover {

    color:
        #F2B82D;

}


.header-menu-arrow {

    color:
        #F2B82D;

    font-size:
        15px;

    transition:
        transform .2s ease;

}


.header-menu-button[aria-expanded="true"]
.header-menu-arrow {

    transform:
        rotate(180deg);

}


/* =========================================================
   DESPLEGABLE
========================================================= */

.header-menu-dropdown {

    position:
        absolute;

    top:
        calc(100% + 1px);

    left:
        0;

    width:
        270px;

    padding:
        12px;

    background:
        #080808;

    border:
        1px solid
        rgba(
            242,
            184,
            45,
            .35
        );

    border-top:
        2px solid
        #F2B82D;

    border-radius:
        0 0 8px 8px;

    box-shadow:
        0 18px 45px
        rgba(
            0,
            0,
            0,
            .55
        );

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-8px);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

    z-index:
        2000;

}


.header-menu-dropdown.open {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


/* =========================================================
   SECCIONES
========================================================= */

.header-menu-section {

    padding:
        6px 0;

}


.header-menu-section
+ .header-menu-section {

    margin-top:
        8px;

    padding-top:
        10px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}


.header-menu-section-title {

    display:
        block;

    padding:
        5px 10px 8px;

    color:
        #8d8d8d;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

}


/* =========================================================
   ENLACES DEL MENÚ
========================================================= */

.header-menu-link {

    min-height:
        42px;

    padding:
        0 10px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border-radius:
        5px;

    color:
        #eeeeee;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        500;

    transition:
        background .18s ease,
        color .18s ease,
        padding-left .18s ease;

}


.header-menu-link:hover {

    background:
        rgba(
            242,
            184,
            45,
            .08
        );

    color:
        #F2B82D;

    padding-left:
        14px;

}


.header-menu-link-icon {

    width:
        25px;

    height:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    color:
        #F2B82D;

}


.header-menu-link-icon svg {

    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.45;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.header-menu-offer {

    color:
        #F2B82D;

}


/* =========================================================
   MÓVIL
========================================================= */
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1100px) {

    .header-main-container {

        grid-template-columns:
            max-content
            max-content
            minmax(180px, 1fr)
            max-content;

        gap:
            15px;

    }


    .header-actions {

        gap:
            14px;

    }

}

@media (max-width: 900px) {

    .header-main-container {

        width:
            calc(100% - 30px);

        min-height:
            126px;

        grid-template-columns:
            auto
            1fr
            auto;

        grid-template-rows:
            58px
            52px;

        gap:
            8px 12px;

    }


    .header-menu-wrapper {

        grid-column:
            1;

        grid-row:
            1;

        height:
            52px;

    }


    .header-brand {

        grid-column:
            2;

        grid-row:
            1;

    }


    .header-search {

        grid-column:
            1 / -1;

        grid-row:
            2;

        max-width:
            none;

    }


    .header-actions {

        grid-column:
            3;

        grid-row:
            1;

        gap:
            12px;

    }


    .header-brand-name {

        display:
            none;

    }

        .header-menu-button {

        padding:
            0 18px 0 8px;

    }

    .topbar-container {
        width: calc(100% - 30px);
        gap: 15px;
    }

    .topbar-item {
        font-size: 10px;
    }

}

@media (max-width: 600px) {

        .header-main-container {
        width: calc(100% - 16px);
        min-height: 116px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 6px;
    }

    .header-menu-button {

        height:
            44px;

        padding:
            0 10px;

        font-size:
            11px;

    }


    .header-menu-button svg {

        width:
            19px;

        height:
            19px;

    }


    .header-menu-arrow {

        font-size:
            13px;

    }


    .header-brand-logo {

        width:
            50px;

        height:
            50px;

    }


    .header-actions {

        gap:
            7px;

    }


    .header-action {

        min-width:
            42px;

        font-size:
            9px;

    }

        .header-menu-dropdown {

        position: fixed;
        top: 34px;
        left: 10px;
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 44px);
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    

            border-radius:
            16px;

        border-top:
            1px solid
            rgba(
                242,
                184,
                45,
                .35
            );

        box-shadow:
            0 20px 50px
            rgba(
                0,
                0,
                0,
                .65
            );

    }


    .header-menu-wrapper {
        min-width: 0;
    }

    .header-menu-button {
        padding: 0 6px;
        gap: 7px;
        font-size: 10px;
    }

    .header-menu-button svg {
        width: 18px;
        height: 18px;
    }

    .header-menu-arrow {
        font-size: 12px;
    }

    .header-brand {
        justify-self: center;
        min-width: 0;
    }

    .header-brand-logo {
        width: 46px;
        height: 46px;
    }

    .header-actions {
        gap: 4px;
        min-width: 0;
    }

    .header-action {
        min-width: 36px;
        font-size: 8px;
        gap: 3px;
    }

    .header-action > svg {
        width: 21px;
        height: 21px;
    }

    .header-account-image-wrapper {
        width: 30px;
        height: 30px;
    }

    .header-account-default {
        width: 21px;
        height: 21px;
    }

    .header-cart-icon-wrapper {
        width: 26px;
        height: 26px;
    }

    .header-cart-icon-wrapper svg {
        width: 24px;
        height: 24px;
    }

    .header-cart-count {
        top: -4px;
        right: -6px;
    }

    .header-search {
        width: 100%;
    }

    .header-search-input {
        height: 44px;
        padding-left: 16px;
        padding-right: 48px;
        font-size: 13px;
    }

    .header-search-button {
        right: 5px;
        width: 34px;
        height: 34px;
    }

    .topbar {
        height: 34px;
    }

    .topbar-container {
        width: calc(100% - 20px);
        justify-content: center;
    }

    .topbar-item {
        display: none;
    }

    .topbar-item:first-child {
        display: flex;
        font-size: 10px;
    }

}

/* Todos los destinos del menú siguen accesibles en ventanas pequeñas. */
.header-menu-dropdown { max-height: min(72vh, 680px); overflow-y: auto; overscroll-behavior: contain; }