/* =================================
   RECOMMENDED PRODUCTS
================================= */

.recommended-section {
    width: calc(100% - 40px);
    max-width: 1450px;
    margin: 35px auto 45px;
}


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

.recommended-header {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}


.recommended-title {
    display: flex;
    align-items: center;
    gap: 12px;
}


    .recommended-title span {
        color: var(--green-dark);
        font-size: 22px;
        font-weight: 800;
    }


.title-line {
    width: 38px;
    height: 4px;
    background: var(--green);
    border-radius: 10px;
}


/* =================================
   MORE BUTTON
================================= */

.more-products {
    margin-right: auto;
    height: 36px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 30px;
    border: 1px solid var(--green-dark);
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 700;
    transition: .25s ease;
}


    .more-products span {
        font-size: 15px;
        transition: .25s ease;
    }


    .more-products:hover {
        background: var(--green-dark);
        color: white;
    }


        .more-products:hover span {
            transform: translateX(-3px);
        }


/* =================================
   SLIDER
================================= */

.products-slider {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    direction: rtl;
    padding: 5px 2px 12px;
}


    .products-slider::-webkit-scrollbar {
        display: none;
    }


/* =================================
   PRODUCTS ROW
================================= */

.products-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    width: max-content;
}


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

.product-card {
    width: 245px;
    min-width: 245px;
    height: 345px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(40,70,55,.045);
    transition: .3s ease;
}


    .product-card:hover {
        border-color: rgba(72,168,120,.35);
        box-shadow: 0 12px 30px rgba(40,70,55,.10);
        transform: translateY(-4px);
    }


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

.product-image {
    width: 100%;
    height: 220px;
    border-radius: 14px;
    background: #f7f9f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 12px;
        display: block;
        transition: transform .35s ease;
    }


.product-card:hover
.product-image img {
    transform: scale(1.05);
}


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

.product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 15px 5px 4px;
}


    .product-info h3 {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.8;
        color: var(--text);
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }


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

.product-price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
}


    .product-price strong {
        font-size: 17px;
        font-weight: 800;
        color: #202622;
    }


    .product-price span {
        font-size: 11px;
        color: var(--text-soft);
    }


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

@media (max-width: 900px) {

    .recommended-section {
        width: calc(100% - 30px);
    }


    .product-card {
        width: 220px;
        min-width: 220px;
        height: 320px;
    }


    .product-image {
        height: 200px;
    }
}


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

@media (max-width: 600px) {

    .recommended-section {
        width: calc(100% - 16px);
        margin: 25px auto 35px;
    }


    .recommended-header {
        margin-bottom: 14px;
    }


    .recommended-title span {
        font-size: 19px;
    }


    .title-line {
        width: 28px;
        height: 3px;
    }


    .more-products {
        height: 34px;
        padding: 0 13px;
        font-size: 11px;
    }


    .products-slider {
        margin-left: -8px;
        margin-right: -8px;
        padding-right: 8px;
        padding-left: 22px;
    }


    .products-track {
        gap: 10px;
    }


    .product-card {
        width: 175px;
        min-width: 175px;
        height: 275px;
        padding: 9px;
        border-radius: 15px;
    }


    .product-image {
        height: 165px;
        border-radius: 11px;
    }


        .product-image img {
            padding: 8px;
        }


    .product-info {
        padding: 10px 3px 3px;
    }


        .product-info h3 {
            font-size: 12px;
            line-height: 1.7;
        }


    .product-price strong {
        font-size: 14px;
    }


    .product-price span {
        font-size: 9px;
    }
}




.products-slider {
    cursor: grab;
    user-select: none;
}

    .products-slider.dragging {
        cursor: grabbing;
    }

        .products-slider.dragging .product-card {
            pointer-events: none;
        }




/*************************************************************************/

/* =================================
   COMPONENTS SECTION
================================= */

.components-section {
    width: calc(100% - 40px);
    max-width: 1450px;
    margin: 35px auto 50px;
}


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

.components-header {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}


.components-title {
    display: flex;
    align-items: center;
    gap: 12px;
}


    .components-title span {
        color: var(--green-dark);
        font-size: 22px;
        font-weight: 800;
    }


    .components-title .title-line {
        width: 38px;
        height: 4px;
        border-radius: 10px;
        background: var(--green);
    }


.components-more {
    margin-right: auto;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--green-dark);
    background: var(--green-light);
    color: var(--green-dark);
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    transition: .25s;
}


    .components-more:hover {
        background: var(--green-dark);
        color: white;
    }


    .components-more span {
        font-size: 15px;
        transition: .25s;
    }


    .components-more:hover span {
        transform: translateX(-3px);
    }


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

.components-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 14px;
}


/* =================================
   COMPONENT CARD
================================= */

.component-card {
    min-width: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(40,70,55,.045);
    transition: .25s ease;
}


    .component-card:hover {
        border-color: rgba(72,168,120,.38);
        box-shadow: 0 9px 24px rgba(40,70,55,.10);
        transform: translateY(-3px);
    }


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

.component-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #f7f9f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


    .component-image img {
        width: 78%;
        height: 78%;
        object-fit: contain;
        display: block;
        transition: transform .3s ease;
    }


.component-card:hover
.component-image img {
    transform: scale(1.08);
}


/* =================================
   NAME
================================= */

.component-name {
    margin-top: 10px;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


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

.component-price {
    margin-top: 6px;
    color: #202622;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}


    .component-price span {
        color: var(--text-soft);
        font-size: 9px;
        font-weight: normal;
    }


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

@media (max-width: 1100px) {

    .components-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}


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

@media (max-width: 800px) {

    .components-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
}


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

@media (max-width: 600px) {

    .components-section {
        width: calc(100% - 16px);
        margin: 25px auto 35px;
    }


    .components-title span {
        font-size: 18px;
    }


    .components-title .title-line {
        width: 25px;
        height: 3px;
    }


    .components-more {
        height: 33px;
        padding: 0 12px;
        font-size: 11px;
    }


    .components-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }


    .component-card {
        padding: 6px;
        border-radius: 12px;
    }


    .component-image {
        border-radius: 9px;
    }


        .component-image img {
            width: 72%;
            height: 72%;
        }


    .component-name {
        margin-top: 7px;
        font-size: 10px;
    }


    .component-price {
        margin-top: 4px;
        font-size: 10px;
    }


        .component-price span {
            font-size: 8px;
        }
}

/* بج وضعیت در کارت محصول (روی تصویر) */
.product-image {
    position: relative;
}

.product-condition-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2px;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* بج وضعیت در صفحه جزئیات (کنار دسته‌بندی) */
.product-condition-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 14px;
}

/* رنگ‌های مشترک */
.condition-new {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.condition-stock {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

/**********************************************************************************/