/* =========================================================
header, barra de anuncio y navegación
========================================================= */


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

.header {
    width: 100%;
    background-color: var(--color-white);
}


/* =========================================================
BARRA DE ANUNCIO
========================================================= */

.adbar {
    width: 100%;
    padding: 8px 20px;

    background-color: var(--color-white);
    color: var(--color-dark);

    text-align: center;
    overflow: hidden;
}

.adbar p {

    margin:0;

    padding-left:100%;

    white-space:nowrap;

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

    font-size:.75rem;

    letter-spacing:2px;

    text-transform:uppercase;

    animation:marquee 30s linear infinite;
}

@keyframes marquee{

    from{

        transform:translateX(0);

    }


    to{

        transform:translateX(-100%);

    }

}

/* =========================================================
NAVBAR
========================================================= */

.navbar {
    width: 100%;
    background-color: var(--color-backnav);

}


/* Contenedor principal */

.nav-items-container {
    width: min(90%, var(--max-width));
    height: 70px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* =========================================================
NAV LEFT / NAV RIGHT
========================================================= */

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}


/* =========================================================
BOTONES DEL NAV
========================================================= */

.nav-left button,
.nav-right button {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    background: transparent;

    color: var(--color-letter);

    font-size: 18px;

    transition: var(--transition);
}


/* Hover */

.nav-left button:hover,
.nav-right button:hover {
    opacity: 0.7;
}


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

.nav-logo {
    color: var(--color-letter);

    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;

    transition: var(--transition);
}


.nav-logo:hover {
    opacity: 0.8;
}


/* =========================================================
MENU CELULAR
========================================================= */

.mobile-nav {
    display: none;

    width: 100%;

    background-color: #E9E5DB;
}


.mobile-nav-list {
    display: flex;
    flex-direction: column;

    padding: 20px;
    gap: 20px;

    text-align: center;
}


.mobile-nav-list a {
    color: var(--color-letter);

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;

    transition: var(--transition);
}


.mobile-nav-list a:hover {
    opacity: 0.7;
}


/* =========================================================
ESTADO ABIERTO DEL MENÚ
========================================================= */

.mobile-nav.active {
    display: block;
}


/* =========================================================
   CART
========================================================= */

.cart-button {
    position: relative;

    display: flex;

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

    color: var(--color-letter);

    text-decoration: none;

    cursor: pointer;
}


.cart-button i {
    font-size: 1.1rem;

    transition: color 0.3s ease;
}


.cart-button:hover i {
    opacity: 0.7;
}


/* Contador */

.cart-count-badge {

    position: absolute;

    top: -9px;
    right: -10px;

    min-width: 18px;
    height: 18px;

    display: flex;

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

    padding: 2px 5px;

    border-radius: 50%;

    background-color: var(--color-white);
    
    color: #3b2c1d;

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

    font-size: 0.65rem;

    line-height: 1;

}

/* =========================================================
   RUFFIANA — BUSCADOR
========================================================= */

.nav-left {
    position: relative;
}


/* CONTENEDOR */

.ruffiana-search-container {

    display: flex;

    align-items: center;

    position: absolute;

    left: 38px;

    top: 50%;

    transform:
        translateY(-50%)
        scaleX(0);

    transform-origin: left center;

    opacity: 0;

    pointer-events: none;

    width: 0;

    overflow: hidden;

    transition:
        width 0.3s ease,
        opacity 0.2s ease,
        transform 0.3s ease;

}


/* ABIERTO */

.ruffiana-search-container.active {

    width: 260px;

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(-50%)
        scaleX(1);

}


/* INPUT */

.ruffiana-search-input {

    width: 100%;

    height: 38px;

    border: none;

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

    background: transparent;

    outline: none;

    padding:
        0 35px 0 8px;

    font-family:
        Montserrat,
        sans-serif;

    font-size: 13px;

    color:#1f1a1a;;

}


/* PLACEHOLDER */

.ruffiana-search-input::placeholder {

    color: #000000;

    letter-spacing:
        0.5px;

}


/* QUITAR LA "X" NATIVA DEL INPUT SEARCH */

.ruffiana-search-input::-webkit-search-cancel-button {

    -webkit-appearance: none;

    appearance: none;

    display: none;

}


/* CRUZ PRINCIPAL */

.ruffiana-search-close {

    position: absolute;

    right: 5px;

    top: 50%;

    transform:
        translateY(-50%);

    border: none;

    background: transparent;

    padding: 5px;

    cursor: pointer;

    font-size: 22px;

    line-height: 1;

    color:
        var(--dark);

    font-family:
        Arial,
        sans-serif;

}


/* LUPA OCULTA MIENTRAS BUSCA */

.search-button.search-hidden {

    opacity: 0;

    pointer-events: none;

}


.home .nav-logo {
    display: none;
}