/* ==========================================================
   CLENO — FINAL STICKY ADD TO CART
   Header / menu se vůbec neupravují
   ========================================================== */


/* ==========================================================
   ROOT
   ========================================================== */

.cleno-sticky-atc {
    --green: #32CB00;
    --green-hover: #2DB800;

    --text: #20222A;

    --stock: #218A4C;
    --stock-bg: #EDF8F1;
    --stock-border: #DCEFE3;

    position: fixed !important;

    top: auto !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    background: #FFFFFF !important;

    border: 1px solid #E3E9ED !important;

    font-family: inherit !important;

    z-index: 700 !important;

    -webkit-font-smoothing: antialiased;


    /* Defaultně schovaná */
    display: block !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transform: translateY(12px) !important;

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


.cleno-sticky-atc *,
.cleno-sticky-atc *::before,
.cleno-sticky-atc *::after {
    box-sizing: border-box !important;
}


/*
 * Původní obsah Pobo schováme.
 */
.cleno-pobo-original {
    display: none !important;
}


/*
 * Zobrazí se až po přejetí
 * původního tlačítka Přidat do košíku.
 */
body.cleno-sticky-visible
.cleno-sticky-atc {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform: translateY(0) !important;
}


/* ==========================================================
   UI
   ========================================================== */

.cleno-sticky-ui {
    display: grid !important;

    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;
}


/* ==========================================================
   PRODUCT
   ========================================================== */

.cleno-sticky-product {
    display: flex !important;

    align-items: center !important;

    min-width: 0 !important;
}


.cleno-sticky-image {
    flex: 0 0 auto !important;

    object-fit: contain !important;

    background: #FFFFFF !important;

    border: 1px solid #E7ECEF !important;

    border-radius: 12px !important;
}


.cleno-sticky-title {
    min-width: 0 !important;

    color: var(--text) !important;

    font-weight: 650 !important;

    letter-spacing: -.015em !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* ==========================================================
   PRICE
   ========================================================== */

.cleno-sticky-price-block {
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    white-space: nowrap !important;
}


.cleno-sticky-price {
    color: #17191F !important;

    font-weight: 750 !important;

    letter-spacing: -.025em !important;
}


/* ==========================================================
   STOCK
   ========================================================== */

.cleno-sticky-stock {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: fit-content !important;

    background: var(--stock-bg) !important;

    border:
        1px solid
        var(--stock-border) !important;

    border-radius: 999px !important;

    color: var(--stock) !important;

    font-weight: 700 !important;

    white-space: nowrap !important;
}


.cleno-sticky-stock::before {
    content: "";

    display: block !important;

    width: 6px !important;

    height: 6px !important;

    margin-right: 5px !important;

    border-radius: 50% !important;

    background: currentColor !important;
}


.cleno-sticky-stock[data-state="warning"] {
    color: #C78200 !important;

    background: #FFF8E8 !important;

    border-color: #F2E2B9 !important;
}


.cleno-sticky-stock[data-state="no"] {
    color: #CC3F3F !important;

    background: #FFF0F0 !important;

    border-color: #F4D4D4 !important;
}


/* ==========================================================
   QUANTITY
   ========================================================== */

.cleno-sticky-qty {
    display: grid !important;

    overflow: hidden !important;

    background: #FFFFFF !important;

    border: 1px solid #DCE3E8 !important;

    box-shadow:
        0 2px 7px
        rgba(28,43,55,.05) !important;
}


.cleno-sticky-qty-btn {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 0 !important;

    background: #FFFFFF !important;

    color: #252A31 !important;

    font-family: inherit !important;

    cursor: pointer !important;
}


.cleno-sticky-qty-btn:hover {
    background: #F4F7F9 !important;
}


.cleno-sticky-qty-input {
    padding: 0 !important;

    margin: 0 !important;

    border: 0 !important;

    border-left:
        1px solid #EDF0F2 !important;

    border-right:
        1px solid #EDF0F2 !important;

    border-radius: 0 !important;

    outline: 0 !important;

    background: #FFFFFF !important;

    color: #17191F !important;

    font-family: inherit !important;

    font-weight: 700 !important;

    text-align: center !important;

    appearance: textfield !important;

    -moz-appearance: textfield !important;
}


.cleno-sticky-qty-input::-webkit-inner-spin-button,
.cleno-sticky-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;

    margin: 0 !important;
}


/* ==========================================================
   CTA
   ========================================================== */

.cleno-sticky-cta {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    margin: 0 !important;

    border: 0 !important;

    background: var(--green) !important;

    color: #FFFFFF !important;

    font-family: inherit !important;

    font-weight: 750 !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    cursor: pointer !important;

    box-shadow:
        0 4px 12px
        rgba(50,203,0,.18) !important;

    transition:
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}


.cleno-sticky-cta:hover {
    background: var(--green-hover) !important;

    box-shadow:
        0 6px 16px
        rgba(50,203,0,.24) !important;

    transform: translateY(-1px);
}


.cleno-sticky-cart-icon {
    fill: none !important;

    stroke: currentColor !important;

    stroke-width: 1.9 !important;

    stroke-linecap: round !important;

    stroke-linejoin: round !important;
}


.cleno-cta-mobile {
    display: none !important;
}


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

@media (min-width: 1101px) {

    .cleno-sticky-atc {

        /*
         * Vlevo normální odsazení.
         * Vpravo necháváme prostor pro chat.
         */
        left: 18px !important;

        right: 110px !important;

        bottom: 16px !important;

        width: auto !important;

        min-height: 82px !important;

        padding: 10px 18px !important;

        border-radius: 18px !important;

        box-shadow:
            0 14px 38px
            rgba(25,39,51,.14) !important;
    }


    .cleno-sticky-ui {
        min-height: 60px !important;

        grid-template-columns:
            minmax(0,1fr)
            120px
            108px
            210px !important;

        column-gap: 34px !important;
    }


    .cleno-sticky-product {
        gap: 28px !important;
    }


    .cleno-sticky-image {
        width: 62px !important;

        height: 62px !important;

        flex-basis: 62px !important;

        padding: 5px !important;
    }


    .cleno-sticky-title {
        font-size: 16px !important;

        line-height: 1.35 !important;

        white-space: nowrap !important;
    }


    .cleno-sticky-price {
        font-size: 21px !important;

        line-height: 1.05 !important;
    }


    .cleno-sticky-stock {
        margin-top: 7px !important;

        padding: 4px 9px !important;

        font-size: 10.5px !important;

        line-height: 1 !important;
    }


    .cleno-sticky-qty {
        grid-template-columns:
            34px 40px 34px !important;

        width: 108px !important;

        height: 48px !important;

        border-radius: 12px !important;
    }


    .cleno-sticky-qty-btn {
        width: 34px !important;

        height: 46px !important;

        font-size: 19px !important;
    }


    .cleno-sticky-qty-input {
        width: 40px !important;

        height: 46px !important;

        line-height: 46px !important;

        font-size: 14px !important;
    }


    .cleno-sticky-cta {
        width: 210px !important;

        height: 48px !important;

        padding: 0 16px !important;

        gap: 8px !important;

        border-radius: 13px !important;

        font-size: 12.5px !important;
    }


    .cleno-sticky-cart-icon {
        width: 16px !important;

        height: 16px !important;

        flex: 0 0 16px !important;
    }

}


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

@media (min-width: 768px) and (max-width: 1100px) {

    .cleno-sticky-atc {
        left: 12px !important;

        right: 92px !important;

        bottom: 12px !important;

        width: auto !important;

        min-height: 72px !important;

        padding: 9px 12px !important;

        border-radius: 16px !important;

        box-shadow:
            0 12px 32px
            rgba(25,39,51,.14) !important;
    }


    .cleno-sticky-ui {
        grid-template-columns:
            minmax(0,1fr)
            96px
            96px
            170px !important;

        column-gap: 16px !important;
    }


    .cleno-sticky-product {
        gap: 16px !important;
    }


    .cleno-sticky-image {
        width: 52px !important;

        height: 52px !important;

        padding: 4px !important;
    }


    .cleno-sticky-title {
        font-size: 14px !important;

        white-space: nowrap !important;
    }


    .cleno-sticky-price {
        font-size: 18px !important;
    }


    .cleno-sticky-stock {
        margin-top: 5px !important;

        padding: 3px 7px !important;

        font-size: 9px !important;
    }


    .cleno-sticky-qty {
        grid-template-columns:
            30px 36px 30px !important;

        width: 96px !important;

        height: 44px !important;

        border-radius: 11px !important;
    }


    .cleno-sticky-qty-btn {
        width: 30px !important;

        height: 42px !important;

        font-size: 17px !important;
    }


    .cleno-sticky-qty-input {
        width: 36px !important;

        height: 42px !important;

        line-height: 42px !important;

        font-size: 13px !important;
    }


    .cleno-sticky-cta {
        height: 44px !important;

        border-radius: 11px !important;

        gap: 7px !important;

        font-size: 11px !important;
    }


    .cleno-sticky-cart-icon {
        width: 15px !important;

        height: 15px !important;
    }

}


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

@media (max-width: 767px) {

    .cleno-sticky-atc {

        /*
         * Zleva malý odstup.
         */
        left: 8px !important;


        /*
         * Prostor pro chatovací bublinu.
         */
        right: 78px !important;


        /*
         * Posun výš,
         * aby byla lišta výškově zároveň s chatem.
         */
        bottom:
            calc(
                20px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            ) !important;


        width: auto !important;

        min-height: 60px !important;

        padding: 7px !important;

        border-radius: 14px !important;


        /*
         * MOBILE:
         * karta nemá žádný stín.
         */
        box-shadow: none !important;

        backdrop-filter: none !important;

        -webkit-backdrop-filter: none !important;
    }


    .cleno-sticky-ui {
        grid-template-columns:
            76px
            74px
            minmax(0,1fr) !important;

        column-gap: 9px !important;
    }


    /*
     * Obrázek + název na mobilu nepotřebujeme.
     */
    .cleno-sticky-product {
        display: none !important;
    }


    .cleno-sticky-price-block {
        align-items: flex-end !important;

        text-align: right !important;
    }


    .cleno-sticky-price {
        font-size: 17px !important;

        line-height: 1 !important;
    }


    .cleno-sticky-stock {
        margin-top: 5px !important;

        padding: 3px 6px !important;

        font-size: 8.5px !important;

        line-height: 1 !important;
    }


    .cleno-sticky-stock::before {
        width: 5px !important;

        height: 5px !important;

        margin-right: 4px !important;
    }


    .cleno-sticky-qty {
        grid-template-columns:
            22px 30px 22px !important;

        width: 74px !important;

        height: 44px !important;

        border-radius: 11px !important;
    }


    .cleno-sticky-qty-btn {
        width: 22px !important;

        height: 42px !important;

        font-size: 16px !important;
    }


    .cleno-sticky-qty-input {
        width: 30px !important;

        height: 42px !important;

        line-height: 42px !important;

        font-size: 13px !important;
    }


    .cleno-sticky-cta {
        height: 44px !important;

        padding: 0 8px !important;

        border-radius: 11px !important;

        font-size: 12px !important;

        gap: 0 !important;
    }


    /*
     * Mobilní CTA bez ikonky,
     * ať máme víc místa.
     */
    .cleno-sticky-cart-icon,
    .cleno-cta-desktop {
        display: none !important;
    }


    .cleno-cta-mobile {
        display: inline !important;
    }

}


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

@media (max-width: 374px) {

    .cleno-sticky-atc {
        left: 6px !important;

        right: 68px !important;

        bottom:
            calc(
                18px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            ) !important;

        padding: 6px !important;

        box-shadow: none !important;
    }


    .cleno-sticky-ui {
        grid-template-columns:
            66px
            66px
            minmax(0,1fr) !important;

        column-gap: 6px !important;
    }


    .cleno-sticky-price {
        font-size: 15px !important;
    }


    .cleno-sticky-stock {
        font-size: 7.5px !important;
    }


    .cleno-sticky-qty {
        grid-template-columns:
            19px 28px 19px !important;

        width: 66px !important;
    }


    .cleno-sticky-qty-btn {
        width: 19px !important;

        font-size: 14px !important;
    }


    .cleno-sticky-qty-input {
        width: 28px !important;
    }


    .cleno-sticky-cta {
        padding: 0 4px !important;

        font-size: 10.5px !important;
    }

}