/* =========================================================
   GUZMAN — GLOBAL SITE SHELL
   HEADER + FOOTER
   ========================================================= */

:root {
    --guz-shell: 1320px;

    --guz-header-bg:
        rgba(20,20,19,.98);

    --guz-footer-bg:
        #141515;

    --guz-panel:
        #292826;

    --guz-text:
        #efede8;

    --guz-text-soft:
        #c1bdb6;

    --guz-muted:
        #918c84;

    --guz-gold:
        #c09a4f;

    --guz-gold-light:
        #d0ae68;

    --guz-gold-dark:
        #795a2d;

    --guz-line:
        rgba(192,154,79,.34);

    --guz-line-soft:
        rgba(255,255,255,.075);
}


/* =========================================================
   GLOBAL SHELL
   ========================================================= */

.guz-shell {
    width:
        min(
            var(--guz-shell),
            calc(100% - 72px)
        );

    margin-inline:
        auto;

    min-width:
        0;
}


/* =========================================================
   SVG
   ========================================================= */

.guz-svg-sprite {
    position:
        absolute;

    width:
        0;

    height:
        0;

    overflow:
        hidden;
}


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

.guz-site-header {
    position:
        relative;

    z-index:
        1000;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    background:
        var(--guz-header-bg);

    border-bottom:
        1px solid
        rgba(192,154,79,.42);

    box-shadow:
        0 8px 28px
        rgba(0,0,0,.14);
}


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

.guz-header-inner {
    min-height:
        66px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        20px;
}


/* =========================================================
   BRAND
   ========================================================= */

.guz-brand {
    display:
        inline-flex;

    align-items:
        center;

    width:
        max-content;

    text-decoration:
        none;
}

.guz-brand__name {
    color:
        var(--guz-gold-light);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        29px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        .09em;
}


/* =========================================================
   MAIN NAV
   ========================================================= */

.guz-main-nav {
    min-width:
        0;

    height:
        66px;

    display:
        flex;

    align-items:
        stretch;

    justify-content:
        center;

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

.guz-nav-link,
.guz-nav-catalog__button {
    position:
        relative;

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    border:
        0;

    padding:
        0;

    background:
        transparent;

    color:
        #d3d0c9;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        .02em;

    text-transform:
        uppercase;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        color .18s ease;
}

.guz-nav-link::after,
.guz-nav-catalog__button::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    right:
        50%;

    bottom:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            var(--guz-gold-dark),
            var(--guz-gold),
            var(--guz-gold-light)
        );

    transition:
        left .18s ease,
        right .18s ease;
}

.guz-nav-link:hover,
.guz-nav-catalog__button:hover {
    color:
        var(--guz-gold-light);
}

.guz-nav-link:hover::after,
.guz-nav-catalog__button:hover::after {
    left:
        0;

    right:
        0;
}




/* =========================================================
   CATALOG DROP DOWN
   ========================================================= */

.guz-nav-catalog {
    position:
        relative;

    display:
        flex;
}

.guz-catalog-menu {
    position:
        absolute;

    top:
        calc(100% + 1px);

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        min(620px, 90vw);

    padding:
        24px;

    display:
        grid;

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

    gap:
        30px;

    border:
        1px solid
        rgba(192,154,79,.30);

    border-top:
        2px solid
        var(--guz-gold);

    border-radius:
        0 0 14px 14px;

    background:
        #171817;

    box-shadow:
        0 24px 55px
        rgba(0,0,0,.42);
}

.guz-catalog-menu[hidden] {
    display:
        none;
}

.guz-catalog-menu__column {
    display:
        grid;

    align-content:
        start;

    gap:
        8px;
}

.guz-catalog-menu__title {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--guz-gold-light);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;
}

.guz-catalog-menu a {
    padding:
        7px 0;

    color:
        #bdb8b0;

    font-size:
        13px;

    line-height:
        1.4;

    text-decoration:
        none;
}

.guz-catalog-menu a:hover {
    color:
        var(--guz-gold-light);
}


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

.guz-header-actions {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        12px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.guz-header-search {
    position:
        relative;

    flex:
        1 1 auto;

    min-width:
        0;
}

.guz-header-search__form {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}

.guz-header-search__input {
    min-width:
        0;

    width:
        100%;

    height:
        36px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(192,154,79,.30);

    border-radius:
        7px;

    outline:
        none;

    background:
        #1a1a19;

    color:
        #e0ddd7;

    font-family:
        inherit;

    font-size:
        12px;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.guz-header-search__input::placeholder {
    color:
        #77736d;
}

.guz-header-search__input:focus {
    border-color:
        rgba(208,174,104,.68);

    background:
        #1d1d1b;

    box-shadow:
        0 0 0 3px
        rgba(192,154,79,.07);
}


/* =========================================================
   SEARCH BUTTON
   ========================================================= */

.guz-header-icon {
    flex:
        0 0 auto;

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #d0ccc5;

    cursor:
        pointer;
}

.guz-header-icon svg {
    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


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

.guz-profile-link,
.guz-cart-link {
    position:
        relative;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    color:
        #d0ccc5;

    font-size:
        12px;

    text-decoration:
        none;
}

.guz-profile-link svg,
.guz-cart-link svg {
    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.guz-profile-link:hover,
.guz-cart-link:hover {
    color:
        var(--guz-gold-light);
}


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

.guz-cart-count {
    position:
        absolute;

    top:
        -8px;

    right:
        -8px;

    width:
        17px;

    height:
        17px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(188,162,112,.34);

    border-radius:
        50%;

    background:
        #62533d;

    color:
        #f0ece4;

    font-size:
        8px;

    font-weight:
        600;
}


/* =========================================================
   LIVE SEARCH
   ========================================================= */

.guz-live-search {
    position:
        absolute;

    top:
        calc(100% + 9px);

    left:
        0;

    right:
        0;

    z-index:
        1200;

    overflow:
        hidden;

    border:
        1px solid
        rgba(192,154,79,.28);

    border-radius:
        10px;

    background:
        #191a19;

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

.guz-live-search[hidden] {
    display:
        none;
}

.guz-live-search-item {
    display:
        grid;

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

    align-items:
        center;

    gap:
        10px;

    padding:
        9px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.guz-live-search-item:last-child {
    border-bottom:
        0;
}

.guz-live-search-item img {
    width:
        46px;

    height:
        46px;

    object-fit:
        cover;

    border-radius:
        5px;
}

.guz-live-search-title {
    color:
        #dedad3;

    font-size:
        11px;

    line-height:
        1.35;

    text-decoration:
        none;
}

.guz-live-search-price {
    color:
        var(--guz-gold-light);

    font-size:
        11px;

    white-space:
        nowrap;
}

.guz-live-search-empty {
    padding:
        15px;

    color:
        var(--guz-muted);

    font-size:
        11px;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.guz-menu-toggle {
    display:
        none;

    width:
        42px;

    height:
        42px;

    padding:
        8px;

    border:
        0;

    background:
        transparent;

    cursor:
        pointer;
}

.guz-menu-toggle span {
    display:
        block;

    width:
        24px;

    height:
        2px;

    margin:
        5px auto;

    background:
        #e4e5e3;
}

.guz-mobile-links {
    display:
        none;
}


/* =========================================================
   FOOTER
   ========================================================= */

.guz-site-footer {
    padding:
        34px 0 18px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    border-top:
        1px solid
        rgba(192,154,79,.22);

    background:
        var(--guz-footer-bg);
}

.guz-footer-grid {
    display:
        grid;

    grid-template-columns:
        minmax(210px,1.45fr)
        repeat(4,minmax(120px,1fr));

    align-items:
        start;

    gap:
        28px;
}

/* =========================================================
   FOOTER — BRAND
   ========================================================= */

.guz-footer-brand__logo {
    margin-bottom: 16px;
}


/* ЛОГО GUZMAN ТОЛЬКО В ПОДВАЛЕ */

.guz-site-footer .guz-brand__name {
    color: #d0ae68;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 38px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .10em;
}


/* ТЕКСТ ПОД ЛОГОТИПОМ */

.guz-footer-brand > p {
    max-width: 280px;

    margin: 13px 0 0;

    color: #918c84;

    font-size: 13px;

    line-height: 1.65;
}

.guz-footer-grid h3 {
    margin:
        0 0 11px;

    color:
        var(--guz-gold-light);

    font-size:
        13px;

    font-weight:
        600;

    text-transform:
        uppercase;
}

.guz-footer-grid a,
.guz-footer-grid span {
    display:
        block;

    margin:
        6px 0;

    color:
        #969189;

    font-size:
        12px;

    line-height:
        1.5;

    text-decoration:
        none;
}

.guz-footer-grid a:hover {
    color:
        var(--guz-gold-light);
}


/* =========================================================
   SOCIALS
   ========================================================= */

.guz-socials {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        14px;
}

.guz-socials a {
    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    margin:
        0;

    border:
        1px solid
        rgba(192,154,79,.32);

    border-radius:
        50%;

    color:
        #dfdbd4;

    font-size:
        9px;
}

.guz-socials a:hover {
    border-color:
        rgba(208,174,104,.68);

    color:
        var(--guz-gold-light);

    background:
        rgba(192,154,79,.06);
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.guz-footer-bottom {
    margin-top:
        28px;

    padding-top:
        14px;

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

    text-align:
        center;
}

.guz-footer-bottom span {
    color:
        #706c66;

    font-size:
        11px;
}


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

@media (max-width: 1180px) {

    .guz-shell {
        width:
            calc(100% - 46px);
    }

    .guz-header-inner {
        grid-template-columns:
            150px
            minmax(0,1fr)
            280px;

        gap:
            15px;
    }

    .guz-main-nav {
        gap:
            15px;
    }

    .guz-nav-link,
    .guz-nav-catalog__button {
        font-size:
            10px;
    }

    .guz-profile-link span {
        display:
            none;
    }

    .guz-footer-grid {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


/* =========================================================
   MOBILE / TABLET 900
   ========================================================= */

@media (max-width: 900px) {

    .guz-shell {
        width:
            calc(100% - 30px);
    }


    /* HEADER */

    .guz-header-inner {
        min-height:
            68px;

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

        gap:
            0 12px;

        padding:
            9px 0;
    }


    .guz-brand {
        grid-column:
            1;

        grid-row:
            1;
    }


    .guz-menu-toggle {
        grid-column:
            2;

        grid-row:
            1;

        display:
            block;
    }


    /* SEARCH / ICONS */

    .guz-header-actions {
        grid-column:
            1 / -1;

        grid-row:
            2;

        width:
            100%;

        padding-top:
            8px;
    }

    .guz-header-search {
        flex:
            1 1 auto;
    }

    .guz-profile-link span {
        display:
            none;
    }


    /* MAIN NAV HIDDEN */

    .guz-main-nav {
        display:
            none;
    }


    /* OPEN */

    .guz-site-header.is-open
    .guz-main-nav {
        position:
            absolute;

        top:
            100%;

        left:
            0;

        right:
            0;

        z-index:
            1100;

        height:
            auto;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            14px 20px 20px;

        background:
            #151616;

        border-bottom:
            1px solid
            rgba(192,154,79,.38);

        box-shadow:
            0 20px 42px
            rgba(0,0,0,.42);
    }


    .guz-site-header.is-open
    .guz-nav-link,
    .guz-site-header.is-open
    .guz-nav-catalog__button {
        min-height:
            44px;

        width:
            100%;

        justify-content:
            space-between;

        font-size:
            12px;
    }


    .guz-site-header.is-open
    .guz-nav-link::after,
    .guz-site-header.is-open
    .guz-nav-catalog__button::after {
        display:
            none;
    }


    /* CATALOG MOBILE */

    .guz-nav-catalog {
        display:
            block;
    }

    .guz-catalog-menu {
        position:
            static;

        width:
            100%;

        transform:
            none;

        margin:
            0 0 8px;

        padding:
            14px;

        grid-template-columns:
            1fr;

        gap:
            18px;

        border:
            1px solid
            rgba(192,154,79,.20);

        border-radius:
            9px;

        background:
            #1b1c1b;

        box-shadow:
            none;
    }


    /* MOBILE LINKS */

    .guz-site-header.is-open
    .guz-mobile-links {
        display:
            grid;

        margin-top:
            10px;

        padding-top:
            10px;

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

    .guz-mobile-links a {
        min-height:
            42px;

        display:
            flex;

        align-items:
            center;

        color:
            var(--guz-gold-light);

        font-size:
            11px;

        text-decoration:
            none;
    }


    /* FOOTER */

    .guz-footer-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            30px 22px;
    }

}


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

@media (max-width: 560px) {

    .guz-brand__name {
        font-size:
            27px;
    }

.guz-site-footer .guz-brand__name {
    font-size: 34px;
}



    .guz-header-search__input {
        height:
            38px;
    }

    .guz-header-icon {
        width:
            38px;

        height:
            38px;
    }

}


/* =========================================================
   SMALL MOBILE 470
   ========================================================= */

@media (max-width: 470px) {

    .guz-shell {
        width:
            calc(100% - 24px);
    }

    .guz-header-actions {
        gap:
            8px;
    }

    .guz-profile-link {
        display:
            none;
    }

    .guz-footer-grid {
        grid-template-columns:
            1fr;

        gap:
            27px;
    }

    .guz-footer-bottom {
        text-align:
            left;
    }

}


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

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

    .guz-site-header *,
    .guz-site-footer * {
        transition:
            none !important;
    }

}






/* =========================================================
   HEADER — ВЫРАВНИВАНИЕ МЕНЮ И ПОИСКА ПО ОДНОЙ ЛИНИИ
   ========================================================= */

@media (min-width: 901px) {

    .guz-header-inner {
        min-height: 66px;
        height: 66px;
        align-items: center;
    }

    .guz-main-nav {
        height: 66px;
        align-items: center;
    }

    .guz-nav-link,
    .guz-nav-catalog__button {
        height: 66px;
        display: flex;
        align-items: center;
    }

    .guz-header-actions {
        height: 66px;
        display: flex;
        align-items: center;
        align-self: center;
        margin: 0;
        padding: 0;
    }

    .guz-header-search {
        display: flex;
        align-items: center;
        height: 66px;
        margin: 0;
        padding: 0;
    }

    .guz-header-search__form {
        display: flex;
        align-items: center;
        height: 66px;
        margin: 0;
        padding: 0;
    }

    .guz-header-search__input {
        margin: 0;
    }

    .guz-header-icon,
    .guz-profile-link,
    .guz-cart-link {
        align-self: center;
        margin: 0;
    }

}