/* LAIMUT Core — Sticky product/archive shopping UI */
   11. STICKY SHOPPING UI
   ========================================================= */

/**
 * =========================================================
 * LAIMUT - LAZY STICKY PRODUCT ACTION PANEL
 * Version: 3.0.1
 * =========================================================
 *
 * - UI mounted only after meaningful scroll.
 * - Hidden again near top.
 * - Product: 5 actions.
 * - Category / Brand: 4 actions.
 * - "Đã xem" được normalize để giống hệt
 *   Menu / Giỏ hàng / Liên hệ.
 */


/* =========================================================
   PAGE OFFSET - ONLY WHILE PANEL IS VISIBLE
   ========================================================= */

body.lm-sticky-panel-visible {
    padding-bottom:
        calc(
            74px
            + env(safe-area-inset-bottom)
        );
}


/* =========================================================
   PANEL
   ========================================================= */

.lm-product-sticky-panel {
    position:
        fixed;

    z-index:
        9999;

    right:
        0;

    bottom:
        0;

    left:
        0;

    width:
        100%;

    visibility:
        hidden;

    opacity:
        0;

    transform:
        translateY(
            calc(100% + 12px)
        );

    pointer-events:
        none;

    padding-bottom:
        env(safe-area-inset-bottom);

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

    background:
        #fff;

    box-shadow:
        0 -2px 12px
        rgba(0, 0, 0, .045);

    transition:
        transform .2s ease,
        opacity .18s ease,
        visibility 0s linear .2s;
}


.lm-product-sticky-panel.is-visible {
    visibility:
        visible;

    opacity:
        1;

    transform:
        translateY(0);

    pointer-events:
        auto;

    transition-delay:
        0s;
}


/* =========================================================
   PANEL GRID
   ========================================================= */

.lm-product-sticky-panel__inner {
    display:
        grid;

    align-items:
        center;

    width:
        100%;

    max-width:
        680px;

    margin:
        0 auto;

    padding:
        5px 4px;
}


/* Product = 5 actions */

.lm-product-sticky-panel--product
.lm-product-sticky-panel__inner {
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );
}


/* Category / Brand = 4 actions */

.lm-product-sticky-panel--archive
.lm-product-sticky-panel__inner {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


/* =========================================================
   ACTION ITEMS
   ========================================================= */

.lm-product-sticky-panel
.lm-product-sticky-panel__item {
    appearance:
        none;

    -webkit-appearance:
        none;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        3px;

    min-width:
        0;

    min-height:
        56px;

    margin:
        0;

    padding:
        5px 2px;

    border:
        0;

    border-radius:
        6px;

    background:
        transparent;

    box-shadow:
        none;

    color:
        #444;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.15;

    letter-spacing:
        0;

    text-align:
        center;

    text-decoration:
        none;

    text-transform:
        none;

    cursor:
        pointer;

    -webkit-tap-highlight-color:
        transparent;

    touch-action:
        manipulation;

    transition:
        color .15s ease,
        background-color .15s ease,
        transform .12s ease;
}


/* =========================================================
   ACTION STATES
   ========================================================= */

.lm-product-sticky-panel
.lm-product-sticky-panel__item:hover,
.lm-product-sticky-panel
.lm-product-sticky-panel__item:focus-visible {
    border-radius:
        6px;

    background:
        #f8f8f7;

    color:
        #111;

    text-decoration:
        none;
}


.lm-product-sticky-panel
.lm-product-sticky-panel__item:active {
    border-radius:
        6px;

    transform:
        scale(.98);
}


/* =========================================================
   RECENTLY VIEWED BUTTON NORMALIZATION
   =========================================================
 *
 * Menu / Giỏ hàng / Liên hệ dùng <a>.
 * Đã xem dùng <button>.
 *
 * Flatsome có thể áp style riêng cho button,
 * nên normalize riêng nhưng giữ đúng visual
 * của các action thường.
 */

.lm-product-sticky-panel
button.lm-product-sticky-panel__item[data-lm-action="recently-viewed"] {
    appearance:
        none;

    -webkit-appearance:
        none;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        3px;

    min-width:
        0;

    min-height:
        56px;

    margin:
        0;

    padding:
        5px 2px;

    border:
        0 !important;

    border-radius:
        6px !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        #444 !important;

    font:
        inherit !important;

    font-size:
        11px !important;

    font-weight:
        500 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        0 !important;

    text-align:
        center;

    text-decoration:
        none;

    text-transform:
        none !important;

    cursor:
        pointer;

    -webkit-tap-highlight-color:
        transparent;

    touch-action:
        manipulation;
}


.lm-product-sticky-panel
button.lm-product-sticky-panel__item[data-lm-action="recently-viewed"]:hover,
.lm-product-sticky-panel
button.lm-product-sticky-panel__item[data-lm-action="recently-viewed"]:focus-visible {
    border:
        0 !important;

    border-radius:
        6px !important;

    background:
        #f8f8f7 !important;

    box-shadow:
        none !important;

    color:
        #111 !important;

    text-decoration:
        none;
}


.lm-product-sticky-panel
button.lm-product-sticky-panel__item[data-lm-action="recently-viewed"]:active {
    border:
        0 !important;

    border-radius:
        6px !important;

    background:
        #f8f8f7 !important;

    box-shadow:
        none !important;

    color:
        #111 !important;

    transform:
        scale(.98);
}


/* Normalize riêng label "Đã xem" */

.lm-product-sticky-panel
button.lm-product-sticky-panel__item[data-lm-action="recently-viewed"]
.lm-product-sticky-panel__label {
    display:
        block;

    max-width:
        100%;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    color:
        inherit;

    font:
        inherit;

    font-size:
        inherit;

    font-weight:
        inherit;

    line-height:
        inherit;

    letter-spacing:
        inherit;

    text-align:
        center;

    text-transform:
        none;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* =========================================================
   ICON
   ========================================================= */

.lm-product-sticky-panel__icon {
    display:
        block;

    flex:
        0 0 20px;

    width:
        20px;

    height:
        20px;
}


.lm-product-sticky-panel__icon svg {
    display:
        block;

    width:
        100%;

    height:
        100%;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.55;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   LABEL
   ========================================================= */

.lm-product-sticky-panel__label {
    display:
        block;

    max-width:
        100%;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* =========================================================
   PRIMARY CTA - THÊM
   ========================================================= */

button.lm-product-sticky-panel__item.lm-product-sticky-panel__add {
    align-self:
        center;

    min-height:
        48px;

    margin:
        4px 7px;

    padding:
        5px 4px;

    border:
        0;

    border-radius:
        12px !important;

    background:
        #8b2d26;

    color:
        #fff;

    font-weight:
        600;

    letter-spacing:
        0;

    text-transform:
        none;

    box-shadow:
        none;
}


button.lm-product-sticky-panel__item.lm-product-sticky-panel__add:hover,
button.lm-product-sticky-panel__item.lm-product-sticky-panel__add:focus-visible {
    border-radius:
        12px !important;

    background:
        #802923;

    color:
        #fff;

    box-shadow:
        none;
}


button.lm-product-sticky-panel__item.lm-product-sticky-panel__add:active {
    border-radius:
        12px !important;

    background:
        #76251f;

    color:
        #fff;

    box-shadow:
        none;

    transform:
        scale(.98);
}


/* =========================================================
   MOBILE + TABLET
   <= 849px
   ========================================================= */

@media (max-width: 849px) {

    .lm-product-sticky-panel__inner {
        padding:
            5px
            3px
            4px;
    }


    .lm-product-sticky-panel
    .lm-product-sticky-panel__item {
        min-height:
            56px;

        font-size:
            10.75px;
    }


    /*
     * Button "Đã xem":
     * match đúng typography responsive
     * của các action <a>.
     */
    .lm-product-sticky-panel
    button.lm-product-sticky-panel__item[data-lm-action="recently-viewed"] {
        min-height:
            56px;

        font-size:
            10.75px !important;
    }


    .lm-product-sticky-panel__icon {
        width:
            20px;

        height:
            20px;

        flex-basis:
            20px;
    }


    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add {
        min-height:
            48px;

        margin:
            4px
            6px;
    }
}


/* =========================================================
   MOBILE
   <= 549px
   ========================================================= */

@media (max-width: 549px) {

    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add,
    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add:hover,
    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add:focus-visible,
    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add:active {
        border-radius:
            12px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   <= 374px
   ========================================================= */

@media (max-width: 374px) {

    .lm-product-sticky-panel__inner {
        padding-right:
            1px;

        padding-left:
            1px;
    }


    .lm-product-sticky-panel
    .lm-product-sticky-panel__item {
        gap:
            2px;

        padding-right:
            1px;

        padding-left:
            1px;

        font-size:
            10px;
    }


    /*
     * Normalize "Đã xem"
     * giống action thường.
     */
    .lm-product-sticky-panel
    button.lm-product-sticky-panel__item[data-lm-action="recently-viewed"] {
        gap:
            2px;

        padding-right:
            1px;

        padding-left:
            1px;

        font-size:
            10px !important;
    }


    .lm-product-sticky-panel__icon {
        width:
            19px;

        height:
            19px;

        flex-basis:
            19px;
    }


    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add {
        margin-right:
            4px;

        margin-left:
            4px;
    }
}


/* =========================================================
   TABLET + DESKTOP CTA
   >= 550px
   ========================================================= */

@media (min-width: 550px) {

    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add,
    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add:hover,
    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add:focus-visible,
    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add:active {
        border-radius:
            999px !important;
    }
}


/* =========================================================
   DESKTOP PANEL
   >= 850px
   ========================================================= */

@media (min-width: 850px) {

    body.lm-sticky-panel-visible {
        padding-bottom:
            90px;
    }


    .lm-product-sticky-panel {
        right:
            auto;

        bottom:
            18px;

        left:
            50%;

        overflow:
            hidden;

        padding-bottom:
            0;

        border:
            1px solid
            rgba(0, 0, 0, .075);

        border-radius:
            12px;

        box-shadow:
            0 6px 24px
            rgba(0, 0, 0, .075);

        transform:
            translate(
                -50%,
                calc(100% + 32px)
            );
    }


    .lm-product-sticky-panel.is-visible {
        transform:
            translate(
                -50%,
                0
            );
    }


    /*
     * Product:
     * 5 actions.
     */
    .lm-product-sticky-panel--product {
        width:
            min(
                660px,
                calc(100% - 40px)
            );
    }


    /*
     * Brand / Category:
     * 4 actions.
     */
    .lm-product-sticky-panel--archive {
        width:
            min(
                540px,
                calc(100% - 40px)
            );
    }


    .lm-product-sticky-panel__inner {
        padding:
            5px;
    }


    .lm-product-sticky-panel
    .lm-product-sticky-panel__item {
        min-height:
            58px;

        font-size:
            11.25px;
    }


    /*
     * "Đã xem" desktop:
     * cùng thông số với các action <a>.
     */
    .lm-product-sticky-panel
    button.lm-product-sticky-panel__item[data-lm-action="recently-viewed"] {
        min-height:
            58px;

        font-size:
            11.25px !important;
    }


    button.lm-product-sticky-panel__item.lm-product-sticky-panel__add {
        min-height:
            50px;

        margin:
            4px
            8px;
    }
}

/**
 * =========================================================
 * LAIMUT - RECENTLY VIEWED DRAWER
 * Version: 2.0.1
 * =========================================================
 *
 * Same drawer on:
 * - Product
 * - Product category
 * - Product brand
 *
 * Direction:
 * - Menu native Flatsome: LEFT.
 * - Recently Viewed: RIGHT.
 */


/* =========================================================
   SCROLL LOCK
   ========================================================= */

body.lm-recent-drawer-open {
    overflow:
        hidden;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.lm-recent-drawer-backdrop {
    position:
        fixed;

    z-index:
        10020;

    inset:
        0;

    visibility:
        hidden;

    opacity:
        0;

    background:
        rgba(17, 17, 17, .34);

    transition:
        opacity .2s ease,
        visibility 0s linear .2s;
}


.lm-recent-drawer-backdrop.is-open {
    visibility:
        visible;

    opacity:
        1;

    transition-delay:
        0s;
}


/* =========================================================
   DRAWER - RIGHT SIDE
   ========================================================= */

.lm-recent-drawer {
    position:
        fixed;

    z-index:
        10021;

    top:
        0;

    right:
        0;

    bottom:
        0;

    width:
        min(
            440px,
            calc(100vw - 24px)
        );

    height:
        100vh;

    height:
        100dvh;

    visibility:
        hidden;

    overflow:
        hidden;

    transform:
        translateX(100%);

    background:
        #fff;

    box-shadow:
        -12px 0 34px
        rgba(0, 0, 0, .12);

    transition:
        transform .24s ease,
        visibility 0s linear .24s;
}


.lm-recent-drawer.is-open {
    visibility:
        visible;

    transform:
        translateX(0);

    transition-delay:
        0s;
}


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

.lm-recent-drawer__header {
    position:
        sticky;

    z-index:
        2;

    top:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    min-height:
        66px;

    padding:
        14px
        18px;

    border-bottom:
        1px solid
        #ece9e5;

    background:
        #fff;
}


.lm-recent-drawer__title {
    margin:
        0;

    color:
        #171717;

    font-size:
        20px;

    font-weight:
        600;

    line-height:
        1.3;

    letter-spacing:
        0;

    text-transform:
        none;
}


/* =========================================================
   DRAWER CLOSE BUTTON
   ========================================================= */

.lm-recent-drawer__close {
    appearance:
        none;

    -webkit-appearance:
        none;

    display:
        inline-flex;

    flex:
        0 0 40px;

    align-items:
        center;

    justify-content:
        center;

    width:
        40px;

    height:
        40px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        transparent;

    box-shadow:
        none;

    color:
        #333;

    cursor:
        pointer;
}


.lm-recent-drawer__close:hover,
.lm-recent-drawer__close:focus-visible {
    background:
        #f7f6f4;

    color:
        #111;
}


.lm-recent-drawer__close svg {
    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;
}


/* =========================================================
   DRAWER BODY
   ========================================================= */

.lm-recent-drawer__body {
    height:
        calc(100% - 66px);

    overflow-x:
        hidden;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    padding:
        18px;

    -webkit-overflow-scrolling:
        touch;
}


.lm-recent-drawer__state {
    margin:
        18px 0;

    color:
        #666;

    font-size:
        14px;

    line-height:
        1.6;

    text-align:
        center;
}


/* =========================================================
   DRAWER PRODUCT GRID
   ========================================================= */

.lm-recent-drawer__products {
    width:
        100%;
}


.lm-recent-drawer__products
.products {
    display:
        grid !important;

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

    gap:
        20px
        12px;

    width:
        100%;

    margin:
        0 !important;
}


.lm-recent-drawer__products
.products > * {
    width:
        100% !important;

    max-width:
        100% !important;

    flex:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.lm-recent-drawer__products
.box-text {
    padding-right:
        2px;

    padding-left:
        2px;
}


/* =========================================================
   MOBILE DRAWER
   <= 549px
   ========================================================= */

@media (max-width: 549px) {

    .lm-recent-drawer {
        width:
            min(
                420px,
                calc(100vw - 16px)
            );
    }


    .lm-recent-drawer__header {
        min-height:
            62px;

        padding:
            12px
            14px;
    }


    .lm-recent-drawer__title {
        font-size:
            19px;
    }


    .lm-recent-drawer__body {
        height:
            calc(100% - 62px);

        padding:
            14px;
    }


    .lm-recent-drawer__products
    .products {
        gap:
            18px
            10px;
    }
}


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

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

    .lm-product-sticky-panel,
    .lm-product-sticky-panel
    .lm-product-sticky-panel__item,
    .lm-recent-drawer,
    .lm-recent-drawer-backdrop {
        transition:
            none;
    }
}

/* =========================================================