/* استایل های پایه Placeholder */
.kiwiai-related-products-ajax-placeholder {
    /* margin: 40px 0; */ /* قبلا اینلاین بود، اینجا منتقل کنید */
    /* padding: 20px; */
    /* border: 1px dashed #ddd; */
    position: relative; /* برای موقعیت دهی لودینگ */
    overflow: hidden; /* برای پنهان کردن محتوای قبل از لود کامل */
    min-height: 250px; /* برای جلوگیری از پرش محتوا */
    box-sizing: border-box; /* برای جلوگیری از مشکلات padding/border در محاسبات اندازه */
}

.kiwiai-related-products-ajax-placeholder .related-products-title {
    /* استایل عنوان */
    /* margin-bottom: 20px; */ /* قبلا اینلاین بود */
    text-align: right;
    color: #333; /* رنگ عنوان */
    font-size: 1.5em;
}

.kiwiai-related-products-ajax-placeholder .loading-indicator {
    /* استایل لودینگ ایندیکیتور */
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #666;
    /* می توانید انیمیشن لودینگ اضافه کنید */
}

/* استایل های محصولات تکی و کانتینر اسلایدر */
/* کانتینری که Slick Slider روی آن اعمال می شود، توسط AJAX داخل .kiwiai-related-products-slider-container قرار می گیرد */
.kiwiai-related-products-slider-container .product-slider {
    /* استایل های کانتینر Slick Slider اگر نیاز باشد */
}

.kiwiai-related-products-slider-container .related-product-item {
    /* استایل های آیتم تکی اسلایدر */
    padding: 10px; /* فضای بین آیتم ها */
    text-align: center;
    box-sizing: border-box; /* مهم برای جلوگیری از مشکلات در پهنا با padding */
}

.kiwiai-related-products-slider-container .product-box-inner {
     border: 1px solid #eee; /* مثال: کادر دور محصول */
     padding: 15px;
     border-radius: 5px;
     background-color: #fff;
     height: 100%; /* اطمینان از ارتفاع یکسان در ردیف (فلکس باکس در والد کمک می کند) */
     display: flex; /* استفاده از فلکس باکس برای کنترل چیدمان داخلی */
     flex-direction: column;
     justify-content: space-between; /* توزیع فضای عمودی بین محتوا */
     transition: box-shadow 0.3s ease; /* افکت هاور */
}

.kiwiai-related-products-slider-container .product-box-inner:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* مثال: سایه در هاور */
}


.kiwiai-related-products-slider-container .product-box-inner .info-product {
    /* استایل های بخش اطلاعات محصول */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1; /* اجازه رشد به این بخش برای اشغال فضای عمودی */
}

.kiwiai-related-products-slider-container .product-box-inner .info-product a {
    text-decoration: none;
    color: inherit;
    display: flex; /* برای چیدمان تصویر و عنوان */
    flex-direction: column;
    align-items: center;
    width: 100%; /* لینک تمام عرض را بگیرد */
}

.kiwiai-related-products-slider-container .product-box-inner .info-product img {
    max-width:100% !important; /* تصویر از کانتینر خارج نشود */
    height: auto; /* حفظ نسبت تصویر */
    margin-bottom: 10px;
}

.kiwiai-related-products-slider-container .product-box-inner h3 {
    font-size: .75rem !important;
    margin-top: 0;
    margin-bottom: 10px;
    min-height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: normal !important;
    text-align: center !important;
}

.kiwiai-related-products-slider-container .product-box-inner .detail {
    margin-top: auto; /* این بخش را به پایین ترین قسمت کانتینر info-product هل می دهد */
}

.kiwiai-related-products-slider-container .product-box-inner .detail .price {
    font-size: .75rem;
    display: flex;
    flex-direction: column;
}

/* استایل برچسب ها (حراج، گارانتی) */
.kiwiai-related-products-slider-container .product-label {
    display: inline-block;
    padding: 3px 8px;
    margin-bottom: 10px;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 3px;
    position: absolute; /* برای قرار دادن در گوشه آیتم */
    top: 5px;
    left: 5px; /* یا right برای rtl */
    z-index: 2; /* بالاتر از تصویر */
}
/* اگر سایت RTL است، position right را برای برچسب ها تنظیم کنید */
html[dir="rtl"] .kiwiai-related-products-slider-container .product-label {
    left: auto;
    right: 5px;
}

/* استایل های Slick Slider (دکمه ها، نقاط و ...) */
/* اینها معمولا توسط فایل slick-theme.css ارائه می شوند، اما می توانید آنها را اینجا override کنید */
/* مثال: */
.kiwiai-related-products-slider-container .slick-prev,
.kiwiai-related-products-slider-container .slick-next {
    /* استایل دکمه های قبل/بعد */
    font-size: 0; /* مخفی کردن متن پیش فرض دکمه */
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 1; /* بالاتر از محصولات قرار گیرند */
}

.kiwiai-related-products-slider-container .slick-prev:before,
.kiwiai-related-products-slider-container .slick-next:before {
    font-family: "slick"; /* فونت آیکون Slick */
    font-size: 20px;
    line-height: 1;
    color: #333; /* رنگ آیکون */
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.kiwiai-related-products-slider-container .slick-prev {
    left: -25px; /* موقعیت دکمه چپ */
}
.kiwiai-related-products-slider-container .slick-next {
    right: -25px; /* موقعیت دکمه راست */
}

/* در حالت RTL، موقعیت دکمه ها برعکس می شود */
html[dir="rtl"] .kiwiai-related-products-slider-container .slick-prev {
    left: auto;
    right: -25px;
}
html[dir="rtl"] .kiwiai-related-products-slider-container .slick-next {
    right: auto;
    left: -25px;
}


/* استایل نقاط ناوبری */
.kiwiai-related-products-slider-container .slick-dots {
    position: absolute;
    bottom: -25px; /* فاصله از پایین اسلایدر */
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.kiwiai-related-products-slider-container .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.kiwiai-related-products-slider-container .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.kiwiai-related-products-slider-container .slick-dots li button:before {
     font-family: "slick";
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: "•"; /* کاراکتر نقطه */
    text-align: center;
    opacity: 0.25;
    color: black; /* رنگ نقطه */
     -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.kiwiai-related-products-slider-container .slick-dots li.slick-active button:before {
    color: black; /* رنگ نقطه فعال */
    opacity: 0.75;
}

/* استایل واکنش گرا برای دکمه های ناوبری در صفحه نمایش کوچکتر */
@media (max-width: 768px) {
    .kiwiai-related-products-slider-container .slick-prev,
    .kiwiai-related-products-slider-container .slick-next {
        /* می توانید دکمه ها را در این رزولوشن پنهان کنید */
        display: none !important;
    }
}