/* ==========================================================
   MAKAN CHOOB
   CATEGORY / PRODUCT LISTING
   ========================================================== */

:root {
    --mc-green: #789b68;
    --mc-green-dark: #628653;
    --mc-green-soft: #edf3e9;

    --mc-brown: #765638;
    --mc-brown-dark: #63472f;

    --mc-cream: #faf7f2;
    --mc-card: #ffffff;

    --mc-beige: #ead8c1;
    --mc-beige-light: #f4ebe0;

    --mc-border: #e3d9cc;
    --mc-border-light: #eee7de;

    --mc-text: #504940;
    --mc-muted: #968b80;

    --mc-radius: 18px;
}


/* ==========================================================
   RESET
   ========================================================== */

.search {
    direction: rtl;
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    padding: 25px 20px 70px;

    display: flex;
    align-items: flex-start;

    gap: 25px;

    background: transparent;

    color: var(--mc-text);
}

.search *,
.search *::before,
.search *::after {
    box-sizing: border-box;
}


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

.search .o-page__content {
    width: auto;
    flex: 1;
    min-width: 0;

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


/* ==========================================================
   BREADCRUMB
   ========================================================== */

.search .c-breadcrumb {
    display: flex;
    align-items: center;

    gap: 8px;

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

    min-height: 25px;

    background: transparent;

    list-style: none;
}

.search .c-breadcrumb li {
    color: #aaa198;

    font-size: 11px;

    list-style: none;
}

.search .c-breadcrumb li:last-child {
    color: var(--mc-brown);
    font-weight: 600;
}


/* ==========================================================
   CATEGORY HERO
   ========================================================== */

.mc-category-hero {
    width: 100%;

    min-height: 245px;

    position: relative;

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

    margin-bottom: 30px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f4eadf 0%,
            #fbf7f1 48%,
            #edf2e9 100%
        );

    border: 1px solid #e8ded1;

    border-radius: 25px;

    box-shadow:
        0 8px 30px rgba(89, 70, 50, .055);
}


/* decorative pattern */

.mc-category-hero__pattern {
    position: absolute;

    inset: 0;

    opacity: .45;

    background-image:
        radial-gradient(
            rgba(118, 86, 56, .14) 1px,
            transparent 1px
        );

    background-size: 13px 13px;

    mask-image:
        linear-gradient(
            to left,
            transparent,
            black 35%,
            transparent 75%
        );
}


/* content */

.mc-category-hero__content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 650px;

    padding: 35px 25px;

    text-align: center;
}


/* eyebrow */

.mc-category-hero__eyebrow {
    margin-bottom: 10px;
}

.mc-category-hero__eyebrow span {
    color: var(--mc-green);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 6px;

    direction: ltr;
}


/* title */

.mc-category-hero h1 {
    margin: 0;

    color: var(--mc-brown);

    font-size: 34px;

    font-weight: 700;

    line-height: 1.5;
}


/* decorative line */

.mc-category-hero__line {
    display: flex;

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

    width: 100%;

    margin: 8px 0 12px;
}

.mc-category-hero__line::before,
.mc-category-hero__line::after {
    content: "";

    width: 35px;

    height: 1px;

    background: #d2c1ad;
}

.mc-category-hero__line i {
    display: block;

    width: 7px;
    height: 7px;

    margin: 0 8px;

    background: var(--mc-green);

    border-radius: 50%;
}


/* description */

.mc-category-hero p {
    max-width: 520px;

    margin: 0 auto;

    color: #82776c;

    font-size: 12px;

    line-height: 2.1;
}


/* meta */

.mc-category-hero__meta {
    display: flex;

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

    gap: 14px;

    margin-top: 18px;

    color: #9b9187;

    font-size: 10px;
}

.mc-category-hero__meta strong {
    color: var(--mc-brown);

    font-weight: 700;
}

.mc-category-hero__meta b {
    display: block;

    width: 4px;
    height: 4px;

    background: var(--mc-green);

    border-radius: 50%;
}


/* decorations */

.mc-category-hero__decor {
    position: absolute;

    z-index: 1;
}

.mc-decor-right {
    right: 40px;
    bottom: 20px;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.mc-decor-right span {
    display: block;

    width: 45px;
    height: 1px;

    background: #d7c5b1;
}

.mc-decor-right span:nth-child(2) {
    width: 30px;
}

.mc-decor-right span:nth-child(3) {
    width: 15px;
}


/* ==========================================================
   LISTING
   ========================================================== */

.search .c-listing {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


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

.mc-products-toolbar {
    width: 100%;

    display: flex;

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

    gap: 20px;

    margin-bottom: 20px;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--mc-border-light);
}


/* count */

.mc-products-count {
    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--mc-muted);

    font-size: 11px;

    white-space: nowrap;
}

.mc-products-count strong {
    color: var(--mc-brown);

    font-weight: 700;
}

.mc-products-count__dot {
    width: 7px;
    height: 7px;

    display: block;

    background: var(--mc-green);

    border-radius: 50%;
}


/* sort */

.mc-sort {
    display: flex;

    align-items: center;

    gap: 10px;
}

.mc-sort__label {
    color: #8c8278;

    font-size: 10px;

    white-space: nowrap;
}

.mc-sort__items {
    display: flex;

    align-items: center;

    gap: 6px;
}

.mc-sort__items a {
    display: flex;

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

    min-height: 32px;

    padding: 5px 13px;

    border: 1px solid transparent;

    border-radius: 30px;

    color: #81766b;

    font-size: 10px;

    text-decoration: none;

    white-space: nowrap;

    transition: all .2s ease;
}

.mc-sort__items a:hover {
    background: var(--mc-green-soft);

    color: var(--mc-green-dark);
}

.mc-sort__items a.active {
    background: var(--mc-green);

    color: #fff;

    box-shadow: 0 5px 13px rgba(120, 155, 104, .18);
}


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

.search .c-listing__items {
    width: 100%;

    display: grid !important;

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

    gap: 18px;

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

    list-style: none;
}

.search .c-listing__items > li {
    width: 100% !important;

    min-width: 0;

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

    list-style: none;

    flex: none !important;
}


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

.search .c-listing__items .c-product-box {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    padding: 9px !important;

    margin: 0 !important;

    background: var(--mc-card);

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

    border-radius: var(--mc-radius);

    overflow: hidden;

    box-shadow: none !important;

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

.search .c-listing__items .c-product-box:hover {
    transform: translateY(-6px);

    border-color: #b7c9aa !important;

    box-shadow:
        0 15px 35px rgba(80, 63, 44, .13) !important;
}


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

.search .c-product-box__img,
.search .c-promotion-box__image {
    width: 100% !important;

    height: 230px !important;

    position: relative;

    display: block;

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

    background: #f4f0ea;

    border-radius: 13px;

    overflow: hidden;

    text-decoration: none;
}

.search .c-product-box__img::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: 13px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.35);
}

.search .c-product-box__img img,
.search .c-promotion-box__image img {
    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    display: block;

    object-fit: contain;

    object-position: center;

    padding: 8px;

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1);
}

.search .c-product-box:hover .c-product-box__img img {
    transform: scale(1.055);
}


/* ==========================================================
   QUICK ACTION
   ========================================================== */

.search .c-product-box::after {
    content: "\f004";

    position: absolute;

    top: 20px;
    left: 20px;

    z-index: 4;

    width: 30px;
    height: 30px;

    display: flex;

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

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

    border: 1px solid rgba(118,86,56,.08);

    border-radius: 50%;

    color: #a39382;

    font-family: FontAwesome;

    font-size: 12px;

    opacity: 0;

    transform: translateY(5px);

    transition: all .25s ease;
}

.search .c-product-box:hover::after {
    opacity: 1;

    transform: translateY(0);
}


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

.search .c-listing__items .c-product-box__content {
    width: 100%;

    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 11px 4px 0 !important;

    margin: 0 !important;

    line-height: 1.8;
}


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

.search .c-product-box__content .title {
    width: 100%;

    min-height: 47px;

    display: block;

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

    color: var(--mc-text) !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    line-height: 1.9 !important;

    text-decoration: none;

    overflow: hidden;

    transition: color .2s ease;
}

.search .c-product-box__content .title:hover {
    color: var(--mc-green-dark) !important;
}


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

.mc-price-box {
    margin-top: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5px;

    padding-top: 8px;
}

.mc-price-box__main {
    color: var(--mc-brown);

    font-size: 13px;

    font-weight: 800;
}

.mc-price-box__old {
    color: #b2aaa2;

    font-size: 9px;

    text-decoration: line-through;
}


/* fallback for current price html */

.search .c-product-box__content .price {
    width: 100%;

    margin-top: auto !important;

    padding-top: 7px;

    color: var(--mc-brown) !important;

    font-size: 20px !important;

    font-weight: 800 !important;

    text-align: right !important;
}


/* ==========================================================
   SELLER
   ========================================================== */

.search .c-product-box__tags {
    width: 100%;

    min-height: 27px;

    display: flex !important;

    align-items: center;

    margin: 8px 0 0 !important;

    padding: 7px 4px 0 !important;

    border-top: 1px solid var(--mc-border-light) !important;

    visibility: visible !important;
}

.search .c-product__seller-details {
    width: 100%;

    display: block;

    color: #a1988e;

    font-size: 8px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
    
    text-align: center;
}

.search .c-product__seller-details b {
    color: var(--mc-green-dark);

    font-weight: 500;
}


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

.search .c-promotion__badge {
    position: absolute;

    top: 19px;
    right: 19px;

    z-index: 10;

    display: flex;

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

    padding: 5px 10px;

    min-height: 23px;

    background: var(--mc-green);

    color: #fff;

    border-radius: 20px;

    font-size: 8px;

    line-height: 1;

    box-shadow:
        0 5px 14px rgba(70,80,50,.13);
}

.search .c-promotion__badge--incredible-offer {
    background: var(--mc-brown);
}


/* ==========================================================
   OUT OF STOCK
   ========================================================== */

.search .c-promotion-box__cover--out-of-stock {
    position: absolute;

    inset: 0;

    z-index: 20;

    display: flex;

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

    background: rgba(250,247,242,.7);

    backdrop-filter: blur(3px);
}

.search .c-promotion-box__cover-text {
    padding: 7px 18px;

    background: var(--mc-brown);

    color: #fff;

    border-radius: 30px;

    font-size: 10px;

    font-weight: 500;
}


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

.search .o-page__aside {
    width: 235px;

    min-width: 235px;

    flex: 0 0 235px;

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

.search .c-listing-sidebar {
    position: sticky;

    top: 20px;

    width: 100%;
}


/* sidebar boxes */

.search .c-listing-sidebar .c-box {
    width: 100%;

    margin: 0 0 13px;

    background: #fff;

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

    border-radius: 17px;

    box-shadow: none;

    overflow: hidden;
}


/* sidebar header */

.search .c-box__header {
    position: relative;

    margin: 0 !important;

    padding: 14px 17px;

    color: var(--mc-brown);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.7;

    border-bottom: 1px solid var(--mc-border-light);
}

.search .c-box__header::before {
    content: "";

    position: absolute;

    right: 0;
    top: 13px;

    width: 3px;
    height: 18px;

    background: var(--mc-green);

    border-radius: 3px;
}


/* sidebar content */

.search .c-box__content {
    padding: 13px;
}


/* search */

.search .c-box__content input {
    width: 100%;

    height: 40px;

    padding: 7px 36px 7px 11px;

    background: #faf8f4;

    border: 1px solid #e8e0d7;

    border-radius: 10px;

    color: var(--mc-text);

    font-size: 10px;

    outline: none;
}

.search .c-box__content input:focus {
    background: #fff;

    border-color: #b8c9ad;
}

.search .c-box__content:before {
    right: 25px;

    bottom: 24px;

    color: var(--mc-green);

    font-size: 13px;
}


/* ==========================================================
   EMPTY
   ========================================================== */

.search .c-listing-not-found {
    padding: 60px 25px;

    background: #fff;

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

    border-radius: 20px;

    text-align: center;
}

.search .c-listing-not-found p {
    color: var(--mc-muted);

    font-size: 12px;

    line-height: 2.2;
}


/* ==========================================================
   CATEGORY DESCRIPTION
   ========================================================== */

.cart-empty {
    width: calc(100% - 40px);

    max-width: 1280px;

    margin: 0 auto 60px;

    padding: 30px 35px;

    background: var(--mc-beige-light);

    border: 1px solid #e8dccc;

    border-radius: 22px;

    color: #766b60;

    font-size: 12px;

    line-height: 2.3;
}


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

@media (max-width: 1200px) {

    .search .c-listing__items {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .search .c-product-box__img {
        height: 210px !important;
    }
}


@media (max-width: 1000px) {

    .search {
        padding-left: 15px;
        padding-right: 15px;
    }

    .search .o-page__aside {
        width: 200px;

        min-width: 200px;

        flex-basis: 200px;
    }

    .search .c-listing__items {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 13px;
    }

    .search .c-product-box__img {
        height: 190px !important;
    }
}


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

@media (max-width: 768px) {

    .search {
        display: block;

        width: 100%;

        padding: 15px 10px 45px;

        margin: 0;
    }

    .search .o-page__aside {
        display: none !important;
    }


    /* hero */

    .mc-category-hero {
        min-height: 205px;

        margin-bottom: 20px;

        border-radius: 19px;
    }

    .mc-category-hero__content {
        padding: 28px 20px;
    }

    .mc-category-hero h1 {
        font-size: 23px;
    }

    .mc-category-hero p {
        font-size: 10px;

        line-height: 2;
    }

    .mc-category-hero__meta {
        margin-top: 13px;

        font-size: 9px;
    }

    .mc-category-hero__eyebrow span {
        font-size: 7px;

        letter-spacing: 4px;
    }

    .mc-decor-right {
        right: 18px;
        bottom: 15px;
    }


    /* toolbar */

    .mc-products-toolbar {
        display: block;

        padding-bottom: 12px;

        margin-bottom: 13px;
    }

    .mc-products-count {
        margin-bottom: 9px;
    }

    .mc-sort {
        width: 100%;

        display: block;

        overflow: hidden;
    }

    .mc-sort__label {
        display: none;
    }

    .mc-sort__items {
        width: max-content;

        display: flex;

        gap: 5px;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .mc-sort__items::-webkit-scrollbar {
        display: none;
    }

    .mc-sort__items a {
        min-height: 30px;

        padding: 4px 11px;

        font-size: 9px;
    }


    /* grid */

    .search .c-listing__items {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;
    }


    /* card */

    .search .c-listing__items .c-product-box {
        padding: 6px !important;

        border-radius: 13px;
    }


    /* image */

    .search .c-product-box__img,
    .search .c-promotion-box__image {
        height: 155px !important;

        border-radius: 9px;
    }

    .search .c-product-box__img img,
    .search .c-promotion-box__image img {
        padding: 5px;
    }


    /* content */

    .search .c-listing__items .c-product-box__content {
        padding: 7px 2px 0 !important;
    }

    .search .c-product-box__content .title {
        min-height: 42px;

        font-size: 10px !important;

        line-height: 1.8 !important;
    }

    .search .c-product-box__content .price {
        font-size: 11px !important;
    }


    /* hide seller */

    .search .c-product-box__tags {
        display: none !important;
    }


    /* badge */

    .search .c-promotion__badge {
        top: 10px;
        right: 10px;

        min-height: 19px;

        padding: 3px 7px;

        font-size: 7px;
    }


    /* heart */

    .search .c-product-box::after {
        width: 27px;
        height: 27px;

        top: 10px;
        left: 10px;

        font-size: 10px;

        opacity: 1;

        transform: none;
    }


    /* description */

    .cart-empty {
        width: calc(100% - 20px);

        padding: 20px;

        border-radius: 17px;

        font-size: 10px;
    }
}
 

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

@media (max-width: 380px) {

    .search {
        padding-left: 8px;
        padding-right: 8px;
    }

    .search .c-listing__items {
        gap: 7px;
    }

    .search .c-product-box__img,
    .search .c-promotion-box__image {
        height: 140px !important;
    }

    .search .c-product-box__content .title {
        font-size: 9px !important;
    }

    .search .c-product-box__content .price {
        font-size: 10px !important;
    }
}


.mc-product-price {
    width: 100%;
    margin-top: auto;
    text-align: left;
}

.mc-product-price .price {
    margin-top: 0 !important;
}



/* ==========================================================
   PRODUCT IMAGE - FULL BLEED
   ========================================================== */

.search .c-listing__items .c-product-box {
    padding: 0 !important;
    overflow: hidden;
}

/* تصویر کاملاً چسبیده به کارت */
.search .c-product-box__img,
.search .c-promotion-box__image {
    width: 100% !important;
    height: 245px !important;

    display: block;

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

    background: #f4f0ea;

    border-radius: 17px 17px 0 0;

    overflow: hidden;

    position: relative;
}

/* خود عکس */
.search .c-product-box__img img,
.search .c-promotion-box__image img {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    display: block;

    /*
     * contain باعث فضای خالی می‌شد
     * cover تصویر را کاملاً پر می‌کند
     */
    object-fit: cover;
    object-position: center;

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

    transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

/* زوم هنگام Hover */
.search .c-product-box:hover
.c-product-box__img img {
    transform: scale(1.04);
} 



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

.mc-stock-badge {
    position: absolute;

    right: 12px;
    bottom: 12px;

    z-index: 8;

    display: inline-flex;

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

    gap: 5px;

    min-height: 27px;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    /*backdrop-filter: blur(8px);*/

    /*-webkit-backdrop-filter: blur(8px);*/

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

.mc-stock-badge i {
    font-size: 9px;
}


/* موجود */

.mc-stock-badge--available {
    background: rgba(120, 155, 104, .52);

    color: #fff;

    border: 1px solid rgba(255,255,255,.3);
}


/* ناموجود */

.mc-stock-badge--unavailable {
    background: rgba(118, 86, 56, .9);

    color: #fff;

    border: 1px solid rgba(255,255,255,.3);
}



.search .c-promotion__badge {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 10;

    display: inline-flex;

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

    min-height: 25px;

    padding: 5px 10px;

    background: var(--mc-green);

    color: #fff;

    border-radius: 20px;

    font-size: 8px;

    line-height: 1;

    box-shadow:
        0 4px 12px rgba(70,80,50,.15);
}



@media (max-width: 768px) {

    .search .c-product-box__img,
    .search .c-promotion-box__image {
        height: 165px !important;

        border-radius: 11px 11px 0 0;
    }

    .mc-stock-badge {
        right: 8px;
        bottom: 8px;

        min-height: 23px;

        padding: 4px 8px;

        font-size: 8px;
    }

    .mc-stock-badge i {
        font-size: 8px;
    }

    .search .c-promotion__badge {
        top: 8px;
        right: 8px;

        min-height: 21px;

        padding: 4px 8px;

        font-size: 7px;
    }
}