/* =========================================================
   OGRZEWAJ24 - DWA OSOBNE TOPBARY
========================================================= */

.z24-desktop-topbar {
    display: block;
}

.z24-mobile-topbar-shortcode {
    display: none;
}


/* =========================================================
   DESKTOP TOPBAR
========================================================= */

.z24-topbar {
    position: relative;

    width: 100%;

    background:
        linear-gradient(
            90deg,
            #061a63 0%,
            #072578 50%,
            #061a63 100%
        );

    color: #ffffff;

    font-family:
        Inter,
        Arial,
        sans-serif;

    z-index: 10000;
}


.z24-topbar-inner {
    width: 100%;
    max-width: 1500px;

    min-height: 48px;

    margin: 0 auto;
    padding: 0 28px;

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

    gap: 24px;

    box-sizing: border-box;
}


.z24-top-left,
.z24-top-right {
    display: flex;
    align-items: center;
}


.z24-top-left {
    gap: 18px;
}


.z24-top-right {
    gap: 10px;

    margin-left: auto;
}


/* =========================================================
   DESKTOP - ELEMENTY LEWEJ STRONY
========================================================= */

.z24-top-item {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color:
        rgba(
            255,
            255,
            255,
            .95
        ) !important;

    text-decoration:
        none !important;

    font-size: 12px;
    font-weight: 650;

    white-space: nowrap;
}


.z24-top-item svg {
    width: 15px;
    height: 15px;

    flex-shrink: 0;

    fill: none;

    stroke: #28c6ff;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.z24-top-item:hover {
    color: #ffffff !important;
}


.z24-divider {
    width: 1px;
    height: 24px;

    margin: 0 2px;

    background:
        rgba(
            255,
            255,
            255,
            .15
        );
}


/* =========================================================
   DESKTOP - KOSZYK
========================================================= */

.z24-header-cart-wrap {
    position: relative;

    display: inline-flex;
    align-items: center;
}


.z24-header-cart {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 38px;

    padding: 5px 10px;

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            .06
        );

    color: #ffffff !important;

    text-decoration:
        none !important;

    box-sizing: border-box;

    transition:
        background .18s ease;
}


.z24-header-cart:hover,
.z24-header-cart-wrap.is-open
.z24-header-cart {

    background:
        rgba(
            255,
            255,
            255,
            .12
        );
}


.z24-header-cart__icon {
    position: relative;

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


.z24-header-cart__icon > svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: #28c6ff;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.z24-header-cart__count {
    position: absolute;

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

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

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    border: 2px solid #071d69;
    border-radius: 999px;

    background: #ffffff;
    color: #6049c9;

    font-size: 8px;
    font-weight: 800;

    box-sizing: border-box;
}


.z24-header-cart__label {
    font-size: 12px;
    font-weight: 700;
}


.z24-header-cart__arrow {
    display: flex;

    margin-left: 1px;

    color:
        rgba(
            255,
            255,
            255,
            .70
        );

    transition:
        transform .18s ease;
}


.z24-header-cart__arrow svg {
    width: 13px;
    height: 13px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
}


.z24-header-cart-wrap.is-open
.z24-header-cart__arrow {

    transform: rotate(
        180deg
    );
}


/* =========================================================
   DESKTOP - KONTO
========================================================= */

.z24-header-account-wrap {
    position: relative;

    display: inline-flex;
    align-items: center;
}


.z24-header-account {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 38px;

    padding: 4px 9px 4px 5px;

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            .06
        );

    color: #ffffff !important;

    text-decoration:
        none !important;

    box-sizing: border-box;

    transition:
        background .18s ease;
}


.z24-header-account:hover,
.z24-header-account-wrap.is-open
.z24-header-account {

    background:
        rgba(
            255,
            255,
            255,
            .12
        );
}


.z24-header-account__user-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    border-radius: 9px;

    background: #ffffff;
    color: #6550cf;
}


.z24-header-account__user-icon svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.z24-header-account__text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}


.z24-header-account__text small {
    margin-bottom: 2px;

    color:
        rgba(
            255,
            255,
            255,
            .63
        );

    font-size: 8px;
    font-weight: 650;
}


.z24-header-account__text strong {
    color: #ffffff;

    font-size: 11px;
    font-weight: 750;
}


.z24-header-account__arrow {
    display: flex;

    color:
        rgba(
            255,
            255,
            255,
            .70
        );

    transition:
        transform .18s ease;
}


.z24-header-account__arrow svg {
    width: 13px;
    height: 13px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
}


.z24-header-account-wrap.is-open
.z24-header-account__arrow {

    transform: rotate(
        180deg
    );
}


/* =========================================================
   DROPDOWNY - WSPÓLNE
========================================================= */

.z24-header-cart-dropdown,
.z24-header-account-dropdown {

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


.z24-header-cart-dropdown--floating,
.z24-header-account-dropdown--floating {

    position: fixed !important;

    margin: 0 !important;

    background: #ffffff !important;

    border:
        1px solid
        #e7e9ef !important;

    box-shadow:
        0 22px 60px
        rgba(
            10,
            24,
            60,
            .18
        ) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform:
        translateY(
            7px
        ) !important;

    pointer-events:
        none !important;

    z-index:
        2147483647 !important;

    box-sizing:
        border-box !important;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease !important;
}


.z24-header-cart-dropdown--floating {
    width: 360px !important;

    padding: 10px !important;

    border-radius:
        16px !important;
}


.z24-header-account-dropdown--floating {
    width: 310px !important;

    padding: 10px !important;

    border-radius:
        16px !important;
}


.z24-header-cart-dropdown--floating.is-open,
.z24-header-account-dropdown--floating.is-open {

    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateY(
            0
        ) !important;

    pointer-events:
        auto !important;
}


/* =========================================================
   MINI KOSZYK
========================================================= */

.z24-header-cart-dropdown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 11px 11px 14px;

    border-bottom:
        1px solid
        #eef0f4;
}


.z24-header-cart-dropdown__head strong {
    color: #102a75;

    font-size: 14px;
    font-weight: 800;
}


.z24-header-cart-dropdown__head span {
    color: #8e94a4;

    font-size: 10px;
    font-weight: 650;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart {

    max-height: 330px;

    margin: 0 !important;
    padding: 5px 0 !important;

    overflow-y: auto;

    list-style:
        none !important;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart-item {

    position: relative;

    min-height: 78px;

    margin: 0 !important;

    padding:
        13px
        32px
        13px
        78px !important;

    border-bottom:
        1px solid
        #f0f1f5;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart-item img {

    position: absolute;

    top: 13px;
    left: 9px;

    width: 54px !important;
    height: 54px !important;

    margin: 0 !important;
    padding: 5px;

    object-fit: contain;

    border:
        1px solid
        #edf0f5;

    border-radius: 11px;

    background: #ffffff;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart-item
> a:not(.remove) {

    display: block;

    color:
        #18285c !important;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;

    text-decoration:
        none !important;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart-item
.quantity {

    display: block;

    margin-top: 6px;

    color: #818899;

    font-size: 10px;
    font-weight: 600;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart-item
.amount {

    color: #102a75;

    font-weight: 800;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart-item
.remove {

    position:
        absolute !important;

    top: 12px !important;
    right: 4px !important;
    left: auto !important;

    display:
        flex !important;

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

    width: 24px !important;
    height: 24px !important;

    border-radius:
        7px !important;

    background:
        #faf7f8 !important;

    color:
        #a95a68 !important;

    text-decoration:
        none !important;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart__total {

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

    margin: 0 !important;

    padding:
        15px 11px !important;

    border-top:
        1px solid
        #eef0f4 !important;

    color: #737989;

    font-size: 11px;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart__total
.amount {

    color: #102a75;

    font-size: 15px;
    font-weight: 800;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart__buttons {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin: 0 !important;

    padding:
        2px 10px 10px !important;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart__buttons
.button {

    display:
        flex !important;

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

    min-height:
        42px !important;

    margin: 0 !important;

    border-radius:
        10px !important;

    font-size:
        10px !important;

    font-weight:
        750 !important;

    text-decoration:
        none !important;

    box-shadow:
        none !important;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart__buttons
.button:first-child {

    border:
        1px solid
        #e3e6ed !important;

    background:
        #ffffff !important;

    color:
        #17265b !important;
}


.z24-header-cart-dropdown
.woocommerce-mini-cart__buttons
.checkout {

    border:
        0 !important;

    background:
        #684fd1 !important;

    color:
        #ffffff !important;
}


.z24-header-cart-empty {
    padding: 28px 16px;

    text-align: center;
}


.z24-header-cart-empty__icon {
    display: flex;

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

    width: 42px;
    height: 42px;

    margin:
        0 auto 10px;

    border-radius: 12px;

    background: #f6f4fc;
    color: #6851cf;
}


.z24-header-cart-empty__icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
}


.z24-header-cart-empty strong {
    display: block;

    color: #17265b;

    font-size: 13px;
    font-weight: 800;
}


.z24-header-cart-empty p {
    margin: 5px 0 0;

    color: #8a909e;

    font-size: 10px;
}


/* =========================================================
   DROPDOWN KONTA
========================================================= */

.z24-header-account-dropdown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        10px 10px 13px;

    border-bottom:
        1px solid
        #eef0f4;
}


.z24-header-account-dropdown__head > div {
    display: flex;
    flex-direction: column;
}


.z24-header-account-dropdown__head > div span {
    color: #989cab;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .5px;
}


.z24-header-account-dropdown__head > div strong {
    margin-top: 3px;

    color: #15265d;

    font-size: 14px;
    font-weight: 800;
}


.z24-header-account-dropdown__points {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding: 7px 10px;

    border-radius: 10px;

    background: #f7f5fc;

    text-decoration:
        none !important;
}


.z24-header-account-dropdown__points span {
    color: #8e83b9;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
}


.z24-header-account-dropdown__points strong {
    margin-top: 2px;

    color: #624bc9;

    font-size: 12px;
    font-weight: 800;
}


.z24-header-account-menu {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 8px 0;
}


.z24-header-account-menu > a {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 42px;

    padding: 6px 9px;

    border-radius: 10px;

    color:
        #3b4252 !important;

    text-decoration:
        none !important;

    font-size: 12px;
    font-weight: 650;
}


.z24-header-account-menu > a:hover {
    background: #f7f7fa;

    color:
        #6048c8 !important;
}


.z24-header-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 8px;

    background: #f5f6f9;
    color: #707687;
}


.z24-header-menu-icon svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.z24-header-menu-points {
    margin-left: auto;

    color: #6750cc;

    font-size: 10px;
    font-weight: 800;
}


.z24-header-account-dropdown__footer {
    padding:
        8px 4px 3px;

    border-top:
        1px solid
        #eef0f4;
}


.z24-header-logout {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 38px;

    padding: 5px 7px;

    border-radius: 9px;

    color:
        #8d6169 !important;

    text-decoration:
        none !important;

    font-size: 11px;
    font-weight: 700;
}


.z24-header-logout span {
    display: flex;
}


.z24-header-logout svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;
}


/* =========================================================
   DESKTOP RESPONSIVE
========================================================= */

@media (max-width: 1250px) {

    .z24-hide-1250 {
        display: none;
    }

}


@media (max-width: 1100px) {

    .z24-hide-1100 {
        display: none;
    }

    .z24-top-left {
        gap: 10px;
    }

}


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

@media (max-width: 767px) {

    .z24-desktop-topbar {
        display: none !important;
    }


    .z24-mobile-topbar-shortcode {
        display: block !important;

        width: 100%;

        background:
            linear-gradient(
                90deg,
                #061a63 0%,
                #072578 100%
            );

        font-family:
            Inter,
            Arial,
            sans-serif;
    }


    .z24-mobile-topbar-inner {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        gap: 8px;

        width: 100%;
        min-height: 48px;

        padding: 6px 10px;

        box-sizing: border-box;
    }


    .z24-mobile-cart-wrap,
    .z24-mobile-account-wrap {
        display: inline-flex;
    }


    .z24-mobile-action {
        display: inline-flex;
        align-items: center;

        gap: 7px;

        min-height: 36px;

        padding: 5px 10px;

        border-radius: 10px;

        background:
            rgba(
                255,
                255,
                255,
                .08
            );

        color:
            #ffffff !important;

        text-decoration:
            none !important;

        font-size: 11px;
        font-weight: 700;

        box-sizing: border-box;
    }


    .z24-mobile-action__icon {
        position: relative;

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

        width: 25px;
        height: 25px;
    }


    .z24-mobile-action__icon svg {
        width: 17px;
        height: 17px;

        fill: none;

        stroke: #2bc8ff;
        stroke-width: 1.8;

        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .z24-mobile-action__badge {
        position: absolute;

        top: -6px;
        right: -7px;

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

        min-width: 15px;
        height: 15px;

        padding: 0 3px;

        border:
            2px solid
            #071d69;

        border-radius:
            999px;

        background: #ffffff;
        color: #6049c9;

        font-size: 8px;
        font-weight: 800;

        box-sizing: border-box;
    }

}


/* =========================================================
   NA DESKTOPIE MOBILE MA BYĆ ZAWSZE UKRYTY
========================================================= */

@media (min-width: 768px) {

    .z24-mobile-topbar-shortcode {
        display: none !important;
    }

    .z24-desktop-topbar {
        display: block !important;
    }

}


/* =========================================================
   OGRZEWAJ24 - DROPDOWNY DESKTOP FINAL
========================================================= */

@media (min-width: 768px) {

    /* =====================================================
       KOSZYK
    ===================================================== */

    .z24-header-cart-dropdown--floating {
        display: block !important;

        position: fixed !important;

        width: 360px !important;

        margin: 0 !important;
        padding: 10px !important;

        border:
            1px solid #e7e9ef !important;

        border-radius:
            16px !important;

        background:
            #ffffff !important;

        box-shadow:
            0 22px 60px
            rgba(10, 24, 60, .18) !important;

        opacity: 0 !important;

        visibility:
            hidden !important;

        transform:
            translateY(8px) !important;

        pointer-events:
            none !important;

        z-index:
            2147483647 !important;

        box-sizing:
            border-box !important;

        transition:
            opacity .18s ease,
            visibility .18s ease,
            transform .18s ease !important;
    }


    .z24-header-cart-dropdown--floating.is-open {
        opacity: 1 !important;

        visibility:
            visible !important;

        transform:
            translateY(0) !important;

        pointer-events:
            auto !important;
    }


    /* =====================================================
       KONTO
    ===================================================== */

    .z24-header-account-dropdown--floating {
        display: block !important;

        position: fixed !important;

        width: 310px !important;

        margin: 0 !important;
        padding: 10px !important;

        border:
            1px solid #e7e9ef !important;

        border-radius:
            16px !important;

        background:
            #ffffff !important;

        box-shadow:
            0 22px 60px
            rgba(10, 24, 60, .18) !important;

        opacity: 0 !important;

        visibility:
            hidden !important;

        transform:
            translateY(8px) !important;

        pointer-events:
            none !important;

        z-index:
            2147483647 !important;

        box-sizing:
            border-box !important;

        transition:
            opacity .18s ease,
            visibility .18s ease,
            transform .18s ease !important;
    }


    .z24-header-account-dropdown--floating.is-open {
        opacity: 1 !important;

        visibility:
            visible !important;

        transform:
            translateY(0) !important;

        pointer-events:
            auto !important;
    }


    /* =====================================================
       STRZAŁKI
    ===================================================== */

    .z24-header-cart-wrap.is-open
    .z24-header-cart__arrow,

    .z24-header-account-wrap.is-open
    .z24-header-account__arrow {

        transform:
            rotate(180deg) !important;
    }

}


/* =========================================================
   FIX - UKRYTE DROPDOWNY NIE MOGĄ ROZPYCHAĆ TOPBARU
========================================================= */

@media (min-width: 768px) {

    .z24-header-cart-dropdown:not(
        .z24-header-cart-dropdown--floating
    ),
    .z24-header-account-dropdown:not(
        .z24-header-account-dropdown--floating
    ) {
        position: absolute !important;

        top: calc(100% + 8px) !important;
        right: 0 !important;

        margin: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        z-index: 999999 !important;
    }


    .z24-header-cart-wrap,
    .z24-header-account-wrap {
        position: relative !important;

        height: auto !important;
        min-height: 0 !important;

        align-self: center !important;
    }


    .z24-topbar-inner {
        min-height: 48px !important;
        height: auto !important;

        align-items: center !important;
    }


    .z24-topbar {
        min-height: 48px !important;
        height: auto !important;
    }

}