/* =========================================================
   LOGIN PAKISTAN - DYNAMIC SHOP
========================================================= */

.lp-dynamic-shop,
.lp-dynamic-shop * {
    box-sizing: border-box;
}


.lp-dynamic-shop {

    --lp-green: #0b4b31;
    --lp-green-dark: #073a27;
    --lp-gold: #d3a243;

    --lp-text: #252925;
    --lp-muted: #717771;

    --lp-border: #e5ded3;
    --lp-soft: #fdfbf7;

    width: 100%;

    padding:
        0 24px 32px;

    font-family:
        "Poppins",
        sans-serif;
}


.lp-shop-shell {

    width: 100%;

    max-width: 1380px;

    margin: 0 auto;
}



/* =========================================================
   LAYOUT
========================================================= */

.lp-shop-layout {

    display: grid;

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

    gap: 24px;

    align-items: start;
}



/* =========================================================
   SIDEBAR
========================================================= */

.lp-shop-sidebar {

    position: sticky;

    top: 20px;

    overflow: hidden;

    border:
        1px solid var(--lp-border);

    border-radius: 13px;

    background:
        #fffdf9;
}


.lp-sidebar-mobile-head {

    display: none;
}



/* =========================================================
   FILTER SECTIONS
========================================================= */

.lp-filter-section {

    padding:
        0 18px;

    border-bottom:
        1px solid #eee9e1;
}


.lp-filter-title {

    width: 100%;

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 0;

    padding: 0;

    border: 0 !important;

    outline: 0;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        var(--lp-green);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.7px;

    cursor: pointer;
}


.lp-filter-title>span:first-child {

    position: relative;

    padding-bottom: 5px;
}


.lp-filter-title>span:first-child::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 46px;

    height: 1px;

    background:
        var(--lp-green);
}


.lp-filter-title>span:last-child {

    font-size: 16px;

    transition:
        transform 0.2s ease;
}


.lp-filter-section:not(.active) .lp-filter-title>span:last-child {

    transform:
        rotate(180deg);
}


.lp-filter-content {

    padding:
        0 0 18px;
}


.lp-filter-section:not(.active) .lp-filter-content {

    display: none;
}



/* =========================================================
   ALL CATEGORY
========================================================= */

.lp-all-category {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin:
        0 0 5px;

    padding:
        6px 0;

    border: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        #303530;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 12px;

    font-weight: 500;

    text-align: left;

    cursor: pointer;
}


.lp-all-category.active {

    color:
        var(--lp-green);

    font-weight: 600;
}


.lp-all-category span {

    color:
        #888d88;

    font-size: 10px;
}



/* =========================================================
   CHECKBOX
========================================================= */

.lp-filter-check {

    min-height: 32px;

    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;
}


.lp-filter-check input {

    width: 1px;

    height: 1px;

    position: absolute;

    overflow: hidden;

    opacity: 0;

    clip-path:
        inset(50%);

    pointer-events: none;
}


.lp-checkbox-ui {

    width: 15px;

    height: 15px;

    flex: 0 0 15px;

    position: relative;

    border:
        1px solid #bfc4bf;

    border-radius: 2px;

    background:
        #ffffff;
}


.lp-filter-check input:checked+.lp-checkbox-ui {

    border-color:
        var(--lp-green);

    background:
        var(--lp-green);
}


.lp-filter-check input:checked+.lp-checkbox-ui::after {

    content: "✓";

    position: absolute;

    top: 50%;

    left: 50%;

    color: #fff;

    font-size: 10px;

    font-weight: 700;

    transform:
        translate(-50%, -50%);
}


.lp-check-label {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5px;

    color:
        #424742;

    font-size: 12px;
}


.lp-check-label small {

    color:
        #8c918c;

    font-size: 10px;
}



/* =========================================================
   VIEW ALL CATEGORIES
========================================================= */

.lp-shop-view-all-categories {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eef1ee;
    color: var(--lp-green);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.lp-shop-view-all-categories:hover {
    opacity: 0.8;
    color: var(--lp-green);
    text-decoration: none;
}



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

.lp-shop-price-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 4px;
}

.lp-shop-price-field {
    min-width: 0;
}

.lp-shop-price-label {
    display: block;
    margin-bottom: 6px;
    color: #636a64;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lp-shop-price-box {
    min-height: 39px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #dcdedb;
    border-radius: 6px;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.lp-shop-price-box:focus-within {
    border-color: var(--lp-green);
}

.lp-shop-currency {
    padding-left: 9px;
    color: #727873;
    font-size: 11px;
    font-weight: 500;
    user-select: none;
}

.lp-price-input {
    width: 100%;
    min-width: 0;
    height: 37px;
    padding: 7px;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #333833;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
}

.lp-price-input::-webkit-inner-spin-button,
.lp-price-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.lp-price-input[type="number"] {
    -moz-appearance: textfield;
}



/* =========================================================
   CLEAR
========================================================= */

.lp-clear-filters {

    width:
        calc(100% - 36px);

    min-height: 38px;

    margin:
        16px 18px;

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

    border-radius: 5px;

    background:
        #fff !important;

    box-shadow:
        none !important;

    color:
        var(--lp-green);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.6px;

    cursor: pointer;
}


.lp-clear-filters:hover {

    background:
        var(--lp-green) !important;

    color: #fff;
}



/* =========================================================
   RESULTS
========================================================= */

.lp-shop-results {

    min-width: 0;
}



/* =========================================================
   TOOLBAR
========================================================= */

.lp-shop-toolbar {

    min-height: 53px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 13px;
}


.lp-shop-result-count {

    color:
        #3e443e;

    font-size: 13px;

    font-weight: 500;
}


.lp-shop-toolbar-actions {

    display: flex;

    align-items: center;

    gap: 14px;
}


.lp-shop-sort {

    min-width: 225px;

    height: 42px;

    padding:
        0 38px 0 14px;

    border:
        1px solid #dcdedb;

    border-radius: 7px;

    outline: 0;

    background:
        #fff;

    color:
        #3b403b;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 12px;

    cursor: pointer;
}



/* =========================================================
   VIEW BUTTONS
========================================================= */

.lp-view-toggle {

    height: 42px;

    display: flex;

    overflow: hidden;

    border:
        1px solid #dcdedb;

    border-radius: 7px;
}


.lp-view-toggle button {

    width: 48px;

    height: 100%;

    margin: 0;

    padding: 0;

    border: 0 !important;

    background:
        #fff !important;

    box-shadow:
        none !important;

    color:
        #6b716b;

    font-size: 19px;

    cursor: pointer;
}


.lp-view-toggle button+button {

    border-left:
        1px solid #e1e2e0 !important;
}


.lp-view-toggle button.active {

    background:
        #f1f5f1 !important;

    color:
        var(--lp-green);
}



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

.lp-shop-products-grid {

    display: grid;

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

    gap: 18px;
}



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

.lp-shop-product-card {

    overflow: hidden;

    border:
        1px solid var(--lp-border);

    border-radius: 9px;

    background: #fff;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, .035);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.lp-shop-product-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(211, 162, 67, .6);

    box-shadow:
        0 8px 22px rgba(11, 75, 49, .07);
}



/* IMAGE */

.lp-shop-product-image {

    width: 100%;

    height: 205px;

    position: relative;

    overflow: hidden;

    display: block;

    background:
        #f6efe3;
}


.lp-shop-product-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .3s ease;
}


.lp-shop-product-card:hover .lp-shop-product-image img {

    transform:
        scale(1.035);
}



/* BADGE */

.lp-shop-product-badge {

    position: absolute;

    top: 9px;

    left: 9px;

    z-index: 2;

    padding:
        5px 9px;

    border-radius: 4px;

    background:
        var(--lp-green);

    color: #fff;

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .35px;
}



/* CONTENT */

.lp-shop-product-content {

    padding: 12px;
}


.lp-shop-product-title {

    min-height: 42px;

    display: block;

    margin:
        0 0 7px;

    color:
        #242824;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.3;

    text-decoration: none;
}


.lp-shop-product-title:hover {

    color:
        var(--lp-green);
}



/* RATING */

.lp-shop-product-rating {

    min-height: 20px;

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 7px;
}


.lp-shop-stars {

    color:
        #e5a625;

    font-size: 13px;

    line-height: 1;

    letter-spacing: -1px;
}


.lp-shop-review-count {

    color:
        #8b8b8b;

    font-size: 11px;
}



/* PRICE */

.lp-shop-product-price {

    min-height: 20px;

    margin-bottom: 10px;

    color:
        #252a26;

    font-size: 14px;

    font-weight: 600;
}


.lp-shop-product-price del {

    margin-right: 5px;

    color:
        #999;

    font-weight: 400;
}


.lp-shop-product-price ins {

    color:
        var(--lp-green);

    text-decoration: none;
}



/* ADD TO CART */

.lp-shop-add-cart {

    width: 100%;

    min-height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        8px 10px;

    border:
        1px solid #cfc8be;

    border-radius: 4px;

    background: #fff;

    color:
        var(--lp-green);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .7px;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.lp-shop-add-cart:hover {

    border-color:
        var(--lp-green);

    background:
        var(--lp-green);

    color: #fff;
}



/* =========================================================
   LIST VIEW
========================================================= */

.lp-shop-products-grid.is-list {

    grid-template-columns: 1fr;
}


.lp-shop-products-grid.is-list .lp-shop-product-card {

    display: grid;

    grid-template-columns:
        235px 1fr;
}


.lp-shop-products-grid.is-list .lp-shop-product-image {

    height: 100%;

    min-height: 190px;
}


.lp-shop-products-grid.is-list .lp-shop-product-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 20px;
}


.lp-shop-products-grid.is-list .lp-shop-product-title {

    min-height: auto;

    font-size: 17px;
}


.lp-shop-products-grid.is-list .lp-shop-add-cart {

    max-width: 190px;
}



/* =========================================================
   LOADING
========================================================= */

.lp-shop-results.loading {

    position: relative;

    opacity: .55;

    pointer-events: none;
}


.lp-shop-results.loading::after {

    content: "";

    width: 31px;

    height: 31px;

    position: absolute;

    top: 120px;

    left: 50%;

    z-index: 10;

    border:
        3px solid #d7ded9;

    border-top-color:
        var(--lp-green);

    border-radius: 50%;

    animation:
        lpShopSpin .7s linear infinite;
}


@keyframes lpShopSpin {

    to {
        transform:
            rotate(360deg);
    }
}



/* =========================================================
   NO PRODUCTS
========================================================= */

.lp-shop-no-products {

    grid-column:
        1 / -1;

    padding:
        65px 20px;

    border:
        1px solid var(--lp-border);

    border-radius: 10px;

    background:
        #fffdf9;

    text-align: center;
}


.lp-shop-no-products h3 {

    margin:
        0 0 7px;

    color:
        var(--lp-green);

    font-size: 21px;
}


.lp-shop-no-products p {

    margin: 0;

    color:
        var(--lp-muted);

    font-size: 13px;
}



/* =========================================================
   PAGINATION
========================================================= */

.lp-pagination-wrap {

    margin-top: 24px;
}


.lp-shop-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;
}


.lp-shop-pagination button {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding: 0;

    border:
        1px solid #dcdedb !important;

    border-radius: 50%;

    background:
        #fff !important;

    box-shadow:
        none !important;

    color:
        #313731;

    font-size: 13px;

    cursor: pointer;
}


.lp-shop-pagination button:hover,

.lp-shop-pagination button.active {

    border-color:
        var(--lp-green) !important;

    background:
        var(--lp-green) !important;

    color: #fff;
}



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

.lp-mobile-filter-button {

    display: none;
}


.lp-filter-overlay {

    display: none;
}


body.lp-filter-open {

    overflow: hidden;
}



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

@media (max-width: 1050px) {

    .lp-shop-products-grid {

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


    .lp-shop-product-image {

        height: 220px;
    }
}



/* =========================================================
   MOBILE FILTER DRAWER
========================================================= */

@media (max-width: 800px) {

    .lp-dynamic-shop {

        padding:
            0 16px 25px;
    }


    .lp-shop-layout {

        display: block;
    }


    .lp-mobile-filter-button {

        min-height: 42px;

        display: inline-flex;

        align-items: center;

        gap: 8px;

        margin-bottom: 13px;

        padding:
            9px 15px;

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

        border-radius: 6px;

        background:
            #fff !important;

        color:
            var(--lp-green);

        font-size: 12px;

        font-weight: 600;

        cursor: pointer;
    }


    .lp-shop-sidebar {

        width:
            min(86vw, 340px);

        height: 100dvh;

        position: fixed;

        top: 0;

        left: 0;

        z-index: 10002;

        overflow-y: auto;

        border-radius: 0;

        transform:
            translateX(-102%);

        transition:
            transform .3s ease;
    }


    .lp-shop-sidebar.open {

        transform:
            translateX(0);
    }


    .lp-sidebar-mobile-head {

        min-height: 65px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding:
            0 18px;

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

        color:
            var(--lp-green);
    }


    .lp-sidebar-mobile-head strong {

        font-size: 17px;
    }


    .lp-sidebar-close {
        width: 35px;
        height: 35px;
        border: 1px solid var(--lp-border) !important;
        border-radius: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff !important;
        color: var(--lp-green);
        font-size: 27px;
        cursor: pointer;
    }


    .lp-filter-overlay {

        position: fixed;

        inset: 0;

        z-index: 10001;

        display: block;

        background:
            rgba(6, 60, 40, .32);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .3s ease,
            visibility .3s ease;
    }


    .lp-filter-overlay.active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }


    .lp-shop-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .lp-shop-toolbar-actions {

        width: 100%;
    }


    .lp-shop-sort {

        flex: 1;

        min-width: 0;
    }
}



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

@media (max-width: 550px) {

    .lp-dynamic-shop {

        padding:
            0 12px 22px;
    }


    .lp-shop-result-count {

        font-size: 12px;
    }


    .lp-shop-products-grid {

        grid-template-columns:
            1fr;

        gap: 13px;
    }


    .lp-shop-product-image {

        height: 245px;
    }


    .lp-view-toggle {

        display: none;
    }


    .lp-shop-products-grid.is-list {

        grid-template-columns:
            1fr;
    }


    .lp-shop-products-grid.is-list .lp-shop-product-card {

        display: block;
    }


    .lp-shop-products-grid.is-list .lp-shop-product-image {

        height: 245px;
    }
}

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

/* =========================================================
   FILTER TITLE - HOVER FIX
========================================================= */

.lp-filter-title,
.lp-filter-title:hover,
.lp-filter-title:focus,
.lp-filter-title:focus-visible,
.lp-filter-title:active {

    background: transparent !important;

    color: var(--lp-green) !important;

    border: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;
}


.lp-filter-title span,
.lp-filter-title:hover span,
.lp-filter-title:focus span,
.lp-filter-title:active span {

    color: var(--lp-green) !important;

    opacity: 1 !important;

    visibility: visible !important;
}



/* =========================================================
   SMOOTH FILTER ACCORDION
========================================================= */

/*
   Important:
   Old CSS uses display:none.
   We override that so height animation can work.
*/

.lp-filter-content {

    display: block !important;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    padding-bottom: 0;

    transition:
        max-height 0.32s ease,
        opacity 0.22s ease,
        padding-bottom 0.32s ease;
}


.lp-filter-section.active .lp-filter-content {

    opacity: 1;

    padding-bottom: 18px;
}


.lp-filter-section:not(.active) .lp-filter-content {

    display: block !important;

    opacity: 0;

    padding-bottom: 0;
}



/* Accordion arrow */

.lp-filter-title>span:last-child {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition:
        transform 0.3s ease !important;
}


.lp-filter-section.active .lp-filter-title>span:last-child {

    transform: rotate(0deg);
}


.lp-filter-section:not(.active) .lp-filter-title>span:last-child {

    transform: rotate(180deg);
}

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



/* ============================================================================ */
/* =========================================================
   PRODUCT GRID - 4 COLUMNS
========================================================= */

.lp-shop-products-grid {

    display: grid;

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

    gap: 14px;
}



/* =========================================================
   PRODUCT CARD
   MATCH HOME BEST SELLERS
========================================================= */

.lp-shop-product-card {

    min-width: 0;

    overflow: hidden;

    border:
        1px solid #e5ded3;

    border-radius: 8px;

    background: #ffffff;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.035);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


.lp-shop-product-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(211,
            162,
            67,
            0.6);

    box-shadow:
        0 8px 20px rgba(11,
            75,
            49,
            0.07);
}



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

.lp-shop-product-image {

    width: 100%;

    height: 165px;

    position: relative;

    overflow: hidden;

    display: block;

    background: #f7f0e5;
}


.lp-shop-product-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.3s ease;
}


.lp-shop-product-card:hover .lp-shop-product-image img {

    transform:
        scale(1.035);
}



/* =========================================================
   BADGE
========================================================= */

.lp-shop-product-badge {

    position: absolute;

    top: 9px;

    left: 9px;

    z-index: 3;

    padding:
        5px 9px;

    border-radius: 4px;

    background:
        var(--lp-green);

    color: #ffffff;

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        0.35px;
}



/* =========================================================
   CONTENT
========================================================= */

.lp-shop-product-content {

    padding:
        11px 12px 12px;
}



/* =========================================================
   TITLE
========================================================= */

.lp-shop-product-title {

    min-height: 39px;

    display: -webkit-box;

    overflow: hidden;

    margin:
        0 0 6px;

    color: #252925;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.35;

    text-decoration: none;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;
}


.lp-shop-product-title:hover {

    color:
        var(--lp-green);
}



/* =========================================================
   RATING
========================================================= */

.lp-shop-product-rating {

    min-height: 18px;

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 6px;
}


.lp-shop-stars {

    color: #e5a625;

    font-size: 13px;

    line-height: 1;

    letter-spacing:
        -1px;
}


.lp-shop-review-count {

    color: #8b8b8b;

    font-size: 11px;

    line-height: 1;
}



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

.lp-shop-product-price {

    min-height: 20px;

    margin-bottom: 9px;

    color: #252a26;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;
}



/* =========================================================
   ADD TO CART
========================================================= */

.lp-shop-add-cart {

    width: 100%;

    min-height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        8px 10px;

    border:
        1px solid #cfc8be;

    border-radius: 4px;

    background: #ffffff;

    color:
        var(--lp-green);

    font-family:
        "Poppins",
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        0.7px;

    text-align: center;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.lp-shop-add-cart:hover {

    border-color:
        var(--lp-green);

    background:
        var(--lp-green);

    color:
        #ffffff;
}



/* =========================================================
   RESPONSIVE PRODUCT GRID
========================================================= */

@media (max-width: 1150px) {

    .lp-shop-products-grid:not(.is-list) {

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

}


@media (max-width: 900px) {

    .lp-shop-products-grid:not(.is-list) {

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


    .lp-shop-product-image {

        height: 180px;
    }

}


@media (max-width: 550px) {

    .lp-shop-products-grid:not(.is-list) {

        grid-template-columns:
            1fr;
    }


    .lp-shop-product-image {

        height: 245px;
    }

}

/* =========================================================
   SHOP CARD - IMAGE ACTIONS
   Only new functionality. Existing card dimensions untouched.
========================================================= */

.lp-shop-product-image {
    position: relative;
}


/* Keep current product image dimensions */

.lp-shop-product-image-link {
    width: 100%;
    height: 100%;

    display: block;

    overflow: hidden;

    text-decoration: none;
}


.lp-shop-product-image-link img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}



/* =========================================================
   CENTER EYE ICON
========================================================= */

.lp-shop-product-eye {

    width: 44px;
    height: 44px;

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 8;

    display: flex;

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

    transform:
        translate(
            -50%,
            -42%
        )
        scale(0.88);

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    color:
        var(--lp-green);

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            0.12
        );

    opacity: 0;

    visibility: hidden;

    text-decoration: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease,
        background 0.2s ease,
        color 0.2s ease;
}


.lp-shop-product-eye svg {

    width: 21px;
    height: 21px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.lp-shop-product-card:hover
.lp-shop-product-eye,

.lp-shop-product-eye:focus-visible {

    opacity: 1;

    visibility: visible;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1);
}


.lp-shop-product-eye:hover {

    background:
        var(--lp-green);

    color:
        #ffffff;
}



/* =========================================================
   HEART / FAVORITE BUTTON
========================================================= */

.lp-shop-favorite-button {

    width: 36px;
    height: 36px;

    position: absolute;

    top: 9px;
    right: 9px;

    z-index: 10;

    display: flex;

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

    margin: 0 !important;
    padding: 0 !important;

    border:
        1px solid
        rgba(
            11,
            75,
            49,
            0.15
        ) !important;

    border-radius:
        50% !important;

    outline:
        0 !important;

    background:
        rgba(
            255,
            255,
            255,
            0.95
        ) !important;

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            0.07
        ) !important;

    color:
        var(--lp-green) !important;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.lp-shop-favorite-button:hover {

    transform:
        scale(1.07);

    background:
        #ffffff !important;

    color:
        var(--lp-green) !important;
}


.lp-shop-favorite-button svg {

    width: 18px;
    height: 18px;

    fill:
        transparent;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        fill 0.2s ease,
        transform 0.2s ease;
}



/* =========================================================
   FAVORITE HEART - ACTIVE
   Only heart becomes red.
   Button design stays unchanged.
========================================================= */

.lp-shop-favorite-button.active {

    background:
        rgba(
            255,
            255,
            255,
            0.95
        ) !important;

    color:
        #d83b3b !important;
}


.lp-shop-favorite-button.active svg {

    fill:
        #d83b3b !important;

    stroke:
        #d83b3b !important;
}


.lp-shop-favorite-button.active:hover {

    background:
        #ffffff !important;

    color:
        #c72f2f !important;
}


.lp-shop-favorite-button.active:hover svg {

    fill:
        #c72f2f !important;

    stroke:
        #c72f2f !important;
}


.lp-shop-favorite-button.active:hover {

    background:
        var(--lp-green-dark) !important;

    color:
        #ffffff !important;
}


.lp-shop-favorite-button:disabled {

    opacity: 0.55;

    cursor:
        wait;
}



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

   Keep exactly same existing button design.
========================================================= */

.lp-shop-view-cart {

    text-decoration:
        none;
}



/* =========================================================
   FAVORITES PAGE
========================================================= */

.lp-favorites-page {

    width: 100%;

    padding:
        34px 24px 45px;

    background:
        #ffffff;

    font-family:
        "Poppins",
        sans-serif;
}


.lp-favorites-heading {

    margin-bottom:
        24px;

    text-align:
        center;
}


.lp-favorites-heading h1 {

    margin:
        0 0 6px;

    color:
        var(--lp-green);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        38px;

    font-weight:
        600;
}


.lp-favorites-heading p {

    margin: 0;

    color:
        #687069;

    font-size:
        13px;
}



/* EMPTY */

.lp-favorites-empty,
.lp-favorites-login {

    max-width: 560px;

    margin:
        25px auto;

    padding:
        55px 25px;

    text-align:
        center;

    border:
        1px solid #e7dfd4;

    border-radius:
        12px;

    background:
        #fffaf2;
}


.lp-favorites-empty-heart {

    width: 48px;
    height: 48px;

    display: flex;

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

    margin:
        0 auto 12px;

    color:
        var(--lp-green);
}


.lp-favorites-empty-heart svg {

    width: 100%;
    height: 100%;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.4;
}


.lp-favorites-empty h2,
.lp-favorites-login h1 {

    margin:
        0 0 8px;

    color:
        var(--lp-green);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        27px;
}


.lp-favorites-empty p,
.lp-favorites-login p {

    margin:
        0 0 18px;

    color:
        #687069;

    font-size:
        12px;
}


.lp-favorites-empty > a,
.lp-favorites-login-button {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        9px 20px;

    border-radius:
        5px;

    background:
        var(--lp-green);

    color:
        #ffffff !important;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        0.5px;

    text-decoration:
        none;
}



/* =========================================================
   TOUCH DEVICE
========================================================= */

@media (
    hover: none
) {

    .lp-shop-product-eye {

        width: 38px;
        height: 38px;

        opacity: 1;

        visibility: visible;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1);
    }

}



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

@media (
    max-width: 600px
) {

    .lp-favorites-page {

        padding:
            25px 12px 35px;
    }


    .lp-favorites-heading h1 {

        font-size:
            31px;
    }


    .lp-shop-favorite-button {

        width: 34px;
        height: 34px;
    }

}


/* =========================================================
   LOGIN PAKISTAN - MY FAVORITES PAGE
   Scoped only to .lp-favorites-page
========================================================= */

.lp-favorites-page,
.lp-favorites-page * {
    box-sizing: border-box;
}


.lp-favorites-page {

    --lp-fav-green: #0b4b31;
    --lp-fav-green-dark: #073a27;
    --lp-fav-gold: #d3a243;

    --lp-fav-cream: #fffaf2;
    --lp-fav-cream-soft: #fbf5ea;

    --lp-fav-text: #282d29;
    --lp-fav-muted: #687069;
    --lp-fav-border: #e7dfd4;

    width: 100%;

    margin: 0;

    padding:
        22px 24px 52px;

    background:
        #ffffff;

    font-family:
        "Poppins",
        sans-serif;
}



/* =========================================================
   MAIN WIDTH
========================================================= */

.lp-favorites-page
.lp-shop-shell {

    width: 100%;

    max-width: 1380px;

    margin:
        0 auto;
}



/* =========================================================
   FAVORITES HERO / HEADING
========================================================= */

.lp-favorites-heading {

    min-height: 205px;

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin:
        0 0 30px;

    padding:
        35px 25px;

    border:
        1px solid
        rgba(
            211,
            162,
            67,
            0.2
        );

    border-radius:
        16px;

    background:
        linear-gradient(
            120deg,
            #fffaf2 0%,
            #f8edda 100%
        );

    text-align:
        center;
}



/* Decorative circles */

.lp-favorites-heading::before {

    content: "";

    width: 260px;

    height: 260px;

    position: absolute;

    top: -135px;

    right: -35px;

    border:
        1px solid
        rgba(
            211,
            162,
            67,
            0.13
        );

    border-radius:
        50%;
}


.lp-favorites-heading::after {

    content: "♡";

    position: absolute;

    right: 9%;

    bottom: -13px;

    color:
        rgba(
            211,
            162,
            67,
            0.16
        );

    font-family:
        Georgia,
        serif;

    font-size:
        118px;

    line-height: 1;

    pointer-events:
        none;
}



/* =========================================================
   HEADING TITLE
========================================================= */

.lp-favorites-heading h1 {

    position: relative;

    z-index: 2;

    margin:
        0 0 8px;

    color:
        var(--lp-fav-green-dark);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            38px,
            4vw,
            54px
        );

    font-weight:
        600;

    line-height:
        1.08;

    letter-spacing:
        -0.8px;
}



/* Gold decorative line */

.lp-favorites-heading h1::after {

    content: "";

    width: 58px;

    height: 2px;

    display: block;

    margin:
        12px auto 0;

    border-radius:
        20px;

    background:
        var(--lp-fav-gold);
}



.lp-favorites-heading p {

    max-width: 540px;

    position: relative;

    z-index: 2;

    margin: 0;

    color:
        var(--lp-fav-muted);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.6;
}



/* =========================================================
   FAVORITES PRODUCT GRID
========================================================= */

.lp-favorites-page
.lp-favorites-grid {

    width: 100%;

    display: grid;

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

    gap:
        18px;

    align-items:
        stretch;
}



/*
 * Keep the same shop card design.
 * Only ensure equal card heights on Favorites page.
 */

.lp-favorites-page
.lp-shop-product-card {

    height: 100%;
}


.lp-favorites-page
.lp-shop-product-content {

    display: flex;

    flex-direction: column;

    height: calc(
        100% - 165px
    );
}


.lp-favorites-page
.lp-shop-add-cart {

    margin-top: auto;
}



/* =========================================================
   HEART BUTTON ON FAVORITES
========================================================= */

.lp-favorites-page
.lp-shop-favorite-button {

    width: 38px;

    height: 38px;

    top: 10px;

    right: 10px;

    border-color:
        rgba(
            11,
            75,
            49,
            0.18
        ) !important;

    background:
        var(--lp-fav-green) !important;

    color:
        #ffffff !important;
}


.lp-favorites-page
.lp-shop-favorite-button svg {

    width: 18px;

    height: 18px;

    fill:
        currentColor;
}


.lp-favorites-page
.lp-shop-favorite-button:hover {

    transform:
        scale(1.07);

    background:
        var(--lp-fav-green-dark) !important;

    color:
        #ffffff !important;
}



/* =========================================================
   EYE BUTTON
========================================================= */

.lp-favorites-page
.lp-shop-product-eye {

    border:
        1px solid
        rgba(
            11,
            75,
            49,
            0.08
        );

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    color:
        var(--lp-fav-green);
}


.lp-favorites-page
.lp-shop-product-eye:hover {

    background:
        var(--lp-fav-green);

    color:
        #ffffff;
}



/* =========================================================
   EMPTY FAVORITES STATE
========================================================= */

.lp-favorites-empty {

    max-width:
        650px;

    min-height:
        360px;

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    margin:
        20px auto 0;

    padding:
        52px 35px;

    border:
        1px solid
        var(--lp-fav-border);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #fbf3e5 100%
        );

    text-align:
        center;
}



/* Heart */

.lp-favorites-empty-heart {

    width: 74px;

    height: 74px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto 18px;

    border-radius:
        50%;

    background:
        #edf5f0;

    color:
        var(--lp-fav-green);
}


.lp-favorites-empty-heart svg {

    width: 37px;

    height: 37px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



/* Empty title */

.lp-favorites-empty h2 {

    margin:
        0 0 9px;

    color:
        var(--lp-fav-green-dark);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        30px;

    font-weight:
        600;

    line-height:
        1.15;
}



/* Empty description */

.lp-favorites-empty p {

    max-width:
        400px;

    margin:
        0 0 21px;

    color:
        var(--lp-fav-muted);

    font-size:
        12px;

    line-height:
        1.65;
}



/* Explore products */

.lp-favorites-empty > a {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        10px 24px;

    border:
        1px solid
        var(--lp-fav-green);

    border-radius:
        6px;

    background:
        var(--lp-fav-green);

    color:
        #ffffff !important;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        10.5px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.7px;

    text-decoration:
        none;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.lp-favorites-empty > a:hover {

    transform:
        translateY(-1px);

    background:
        var(--lp-fav-green-dark);

    box-shadow:
        0 6px 14px
        rgba(
            11,
            75,
            49,
            0.12
        );
}



/* =========================================================
   LOGGED OUT STATE
========================================================= */

.lp-favorites-login {

    max-width:
        650px;

    min-height:
        350px;

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    margin:
        15px auto;

    padding:
        55px 35px;

    border:
        1px solid
        var(--lp-fav-border);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #fbf3e5 100%
        );

    text-align:
        center;
}


.lp-favorites-login::before {

    content: "♡";

    width: 72px;

    height: 72px;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        17px;

    border-radius:
        50%;

    background:
        #edf5f0;

    color:
        var(--lp-fav-green);

    font-family:
        Georgia,
        serif;

    font-size:
        41px;

    line-height:
        1;
}


.lp-favorites-login h1 {

    margin:
        0 0 8px;

    color:
        var(--lp-fav-green-dark);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        31px;

    font-weight:
        600;
}


.lp-favorites-login p {

    max-width:
        400px;

    margin:
        0 0 20px;

    color:
        var(--lp-fav-muted);

    font-size:
        12px;

    line-height:
        1.6;
}



/* Sign in */

.lp-favorites-login-button {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        10px 25px;

    border-radius:
        6px;

    background:
        var(--lp-fav-green);

    color:
        #ffffff !important;

    font-size:
        10.5px;

    font-weight:
        600;

    letter-spacing:
        0.7px;

    text-decoration:
        none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.lp-favorites-login-button:hover {

    transform:
        translateY(-1px);

    background:
        var(--lp-fav-green-dark);
}



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

@media (
    max-width: 1100px
) {

    .lp-favorites-page
    .lp-favorites-grid {

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

}



@media (
    max-width: 850px
) {

    .lp-favorites-page {

        padding:
            18px 16px 42px;
    }


    .lp-favorites-heading {

        min-height:
            185px;

        margin-bottom:
            24px;
    }


    .lp-favorites-page
    .lp-favorites-grid {

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

}



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

@media (
    max-width: 550px
) {

    .lp-favorites-page {

        padding:
            12px 12px 32px;
    }


    .lp-favorites-heading {

        min-height:
            165px;

        padding:
            28px 18px;

        border-radius:
            11px;
    }


    .lp-favorites-heading h1 {

        font-size:
            33px;
    }


    .lp-favorites-heading p {

        font-size:
            11.5px;
    }


    .lp-favorites-heading::after {

        right: -5px;

        font-size:
            85px;
    }


    .lp-favorites-page
    .lp-favorites-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    /*
     * Product image slightly larger on
     * single-column mobile favorites.
     */

    .lp-favorites-page
    .lp-shop-product-image {

        height:
            260px;
    }


    .lp-favorites-page
    .lp-shop-product-content {

        height:
            auto;
    }


    .lp-favorites-empty,
    .lp-favorites-login {

        min-height:
            310px;

        padding:
            42px 22px;
    }


    .lp-favorites-empty h2,
    .lp-favorites-login h1 {

        font-size:
            27px;
    }

}