/* home.css - استایل اختصاصی صفحه اول */
body {
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  direction: rtl;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin: 40px 0;
  color: #333;
}







/* Container for the slider */
.category-slider-container {
    position: relative;
    padding: 40px 0;
}

/* Wrapper to hide overflow. Note: This wrapper is set to LTR to allow the JS to work correctly. */
.category-slider-container {
    position: relative;
    padding: 40px 0;
    width: 100%; /* اطمینان از پر کردن عرض والد */
}

.category-list-wrapper {
    overflow: hidden;
    direction: ltr;
    width: 100%; /* محدود کردن به عرض والد */
}

.category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    transition: transform 0.5s ease-in-out;
    direction: ltr;
}

.category-item {
    flex-shrink: 0;
    width: calc((100% / 10) - 13.5px); /* برای دسکتاپ */
}

/* Vase-like image container */
.category-image-wrapper {
    width: 110px;
    height: 130px;
    border-radius: 40% 40% 60% 60% / 80% 80% 20% 20%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #f7f7f7;
}

.category-image-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-name {
    margin-top: 10px;
    font-weight: bold;
    font-size: 1em;
    color: #333;
    white-space: normal;
}

/* Slider controls (hidden on desktop) */
.slider-controls {
    display: none;
}

.slider-btn {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5em;
    cursor: pointer;
    transition: background-color 0.3s;
    line-height: 40px;
    text-align: center;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .category-item {
        width: calc((100% / 3) - 10px); /* برای موبایل */
    }
    .slider-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        z-index: 10;
        padding: 0 10px;
    }
}










/* استایل برای کانتینر محصولات */
.products {
    display: flex;
    flex-wrap: wrap; /* برای اینکه آیتم‌ها به ردیف بعدی برن */
    gap: 20px; /* فاصله بین محصولات */
    justify-content: center; /* محصولات در مرکز قرار می‌گیرند */
    padding: 20px;
}

/* استایل برای هر آیتم محصول */
.product {
    flex: 1 1 calc(25% - 20px); /* برای نمایش 4 محصول در هر ردیف */
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    text-align: center;
    overflow: hidden;
}

/* افکت شناور شدن روی محصول */
.product:hover {
    transform: translateY(-5px);
}

/* استایل لینک درون محصول */
.product a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* استایل تصویر محصول */
.product img {
    max-width: 100%;
    height: auto;
    border-radius: 15px 15px 0 0;
    object-fit: cover;
}

/* استایل عنوان و قیمت */
.product-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    padding: 10px;
}

.product-price {
    font-size: 1.1em;
    color: #008000; /* رنگ سبز برای قیمت */
    font-weight: bold;
    padding: 0 10px 10px;
}

/* استایل برای دکمه "مشاهده بیشتر" */
.load-more {
    text-align: center;
    margin-top: 20px;
}

#loadMoreBtn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

#loadMoreBtn:hover {
    background-color: #0056b3;
}

/* برای تبلت: دو محصول در هر ردیف */
@media (max-width: 768px) {
    .product {
        flex: 1 1 calc(50% - 20px);
    }
}

/* برای موبایل: یک محصول در هر ردیف */
@media (max-width: 480px) {
    .product {
        flex: 1 1 100%;
    }
}












/* کانتینر اصلی با حداکثر عرض ۱۲۰۰ پیکسل و گرید */
.product-grid-final-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; /* 20% | 60% | 20% */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    direction: rtl;
}

/* استایل عمومی برای تمامی آیتم‌های محصول */
.product-grid-item {
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none; /* برای حذف زیرخط لینک */
    color: inherit;
}

.product-grid-item--tall {
    grid-column: 1 / 2;
    height: 600px;
}

.product-grid-item--wide {
    grid-column: 2 / 3;
    height: 600px;
}

.product-grid-item--square {
    height: 290px;
}

.product-grid-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* لایه گرادیان برای دید بهتر نوشته‌ها */
.product-grid-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    z-index: 1;
}

.product-details {
    z-index: 2;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    padding: 20px;
    text-align: center;
}

.product-details h3, .product-price-final {
    font-size: 1.2em;
    font-weight: bold;
    color: #fff; /* عنوان هم سفید میشه */
}

.product-details h3 {
    margin-top: 0; /* برای حذف فاصله اضافی بالای عنوان */
}

/* ریسپانسیو برای موبایل (چیدمان 2 تایی) */
@media (max-width: 768px) {
    .product-grid-final-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* دو ستون با اندازه مساوی */
        gap: 15px;
    }

    .product-grid-item {
        height: 250px;
        grid-column: span 1 !important; /* مهم: برای نادیده گرفتن استایل‌های دسکتاپ */
    }

    /* کانتینر استک در موبایل به گرید دو ستونه تبدیل میشه */
    .product-grid-stack {
        grid-column: span 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .product-grid-item--wide, .product-grid-item--tall {
        /* این دو آیتم هم در حالت موبایل به گرید دو ستونه اضافه میشن */
        grid-column: span 1 !important;
    }
}


.product-grid-item {
    /* ... (کدهای قبلی) ... */
    position: relative;
}

.product-image-final {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* برای اینکه تصویر کل کانتینر رو پر کنه */
    z-index: 1;
}