/* =========================================================
   AIDIN TOY - RTL PRODUCTS CAROUSEL
========================================================= */

.aidin-latest-products {

    --aidin-red: #ef394e;

    --aidin-text: #222;

    --aidin-muted: #777;

    --aidin-border: #e6e6e6;

    --aidin-card-border: #e9e9e9;

    --aidin-gap: 12px;

    width: 100%;

    direction: rtl;

    font-family: inherit;

    position: relative;

    overflow: visible;

}

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

.aidin-latest-products *,
.aidin-latest-products *::before,
.aidin-latest-products *::after {

    box-sizing: border-box;

}

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

.aidin-products-head {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 13px;

}

.aidin-products-title-wrap {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.aidin-products-title-wrap h2 {

    margin: 0;

    padding: 0;

    color: var(--aidin-text);

    font-size: 21px;

    line-height: 1.5;

    font-weight: 800;

}

.aidin-products-title-wrap span {

    color: var(--aidin-muted);

    font-size: 12px;

    line-height: 1.5;

}

/* =========================================================
   ALL PRODUCTS
========================================================= */

.aidin-products-all {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 8px 13px;

    border: 1px solid #ededed;

    border-radius: 9px;

    background: #fafafa;

    color: #555;

    text-decoration: none !important;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;

}

.aidin-products-all:hover {

    background: #f4f4f4;

    color: #222;

    border-color: #e5e5e5;

}

.aidin-all-arrow {

    font-size: 16px;

    line-height: 1;

}

/* =========================================================
   MAIN BOX
========================================================= */

.aidin-products-box {

    position: relative;

    width: 100%;

    padding: 17px 18px;

    background: #fff;

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

    border-radius: 16px;

    box-shadow:
        0 6px 24px rgba(0,0,0,.055);

}

/* =========================================================
   CAROUSEL
========================================================= */

.aidin-products-carousel {

    position: relative;

    width: 100%;

}

/* =========================================================
   VIEWPORT
========================================================= */

.aidin-products-viewport {

    position: relative;

    width: 100%;

    overflow: hidden;

    touch-action: pan-y;

    user-select: none;

    -webkit-user-select: none;

}

/* =========================================================
   TRACK

   نکته اصلی RTL:

   right: 0
   direction: rtl
   flex-direction: row

   اولین محصول بعد از Cloneها
   دقیقاً سمت راست قرار می‌گیرد.
========================================================= */

.aidin-products-track {

    position: absolute;

    top: 0;

    right: 0;

    display: flex;

    flex-direction: row;

    direction: rtl;

    align-items: stretch;

    gap: var(--aidin-gap);

    width: max-content;

    will-change: transform;

    transition:
        transform .42s cubic-bezier(
            .22,
            .61,
            .36,
            1
        );

}

/* بدون انیمیشن برای Loop Reset */

.aidin-products-track.no-transition {

    transition: none !important;

}

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

.aidin-product-card {

    flex: 0 0 auto;

    min-width: 0;

    height: auto;

    display: flex;

    flex-direction: column;

    direction: rtl;

    color: #333;

    background: #fff;

    border: 1px solid var(--aidin-card-border);

    border-radius: 12px;

    overflow: hidden;

    text-decoration: none !important;

    box-shadow:
        0 2px 8px rgba(0,0,0,.025);

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

}

/* HOVER DESKTOP */

@media (hover:hover) {

    .aidin-product-card:hover {

        border-color: #dedede;

        box-shadow:
            0 9px 23px rgba(0,0,0,.075);

        transform: translateY(-2px);

    }

}

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

.aidin-product-image {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #fff;

}

/*
 * هیچ padding داخلی از طرف CSS ندارد.
 */

.aidin-product-image img {

    display: block;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    border: 0;

    object-fit: contain;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;

    transition:
        transform .28s ease;

}

@media (hover:hover) {

    .aidin-product-card:hover
    .aidin-product-image img {

        transform: scale(1.025);

    }

}

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

.aidin-product-content {

    width: 100%;

    min-height: 105px;

    padding:
        9px
        10px
        11px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 7px;

    text-align: right;

}

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

.aidin-product-title {

    margin: 0;

    padding: 0;

    color: #333;

    font-size: 12px;

    line-height: 1.8;

    font-weight: 500;

    min-height: 43px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

}

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

.aidin-product-price {

    margin-top: auto;

    display: flex;

    align-items: baseline;

    justify-content: flex-start;

    gap: 4px;

    color: var(--aidin-red);

    font-size: 15px;

    line-height: 1.5;

    font-weight: 800;

    white-space: nowrap;

}

.aidin-product-price-unit {

    color: var(--aidin-red);

    font-size: 9px;

    line-height: 1;

    font-weight: 500;

}

/* SALE PRICE */
.aidin-product-price.has-sale {
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 6px;
}

.aidin-product-price-regular {
    color: #ef394e !important;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: currentColor;
    opacity: .82;
}

.aidin-product-price-sale {
    color: var(--aidin-red) !important;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 900;
}

/* =========================================================
   ARROWS
========================================================= */

.aidin-arrow {

    position: absolute;

    top: 50%;

    z-index: 30;

    width: 38px;

    height: 38px;

    margin: -19px 0 0;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #dedede !important;

    border-radius: 50% !important;

    background: #fff !important;

    color: #333 !important;

    box-shadow:
        0 5px 16px rgba(0,0,0,.11);

    cursor: pointer;

    appearance: none !important;

    -webkit-appearance: none !important;

    outline: none !important;

    line-height: 0 !important;

    font-size: 0 !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;

}

/*
 * فلش سمت راست:
 *
 * آیکون >
 * عملکرد = محصول قبلی / جدیدتر
 */

.aidin-arrow-right {

    right: -6px;

}

/*
 * فلش سمت چپ:
 *
 * آیکون <
 * عملکرد = محصول بعدی / قدیمی‌تر
 */

.aidin-arrow-left {

    left: -6px;

}

/* =========================================================
   CHEVRON ICONS
========================================================= */

.aidin-chevron {

    display: block !important;

    width: 9px !important;

    height: 9px !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 0 !important;

    border-top: 2px solid #333 !important;

    border-right: 2px solid #333 !important;

    background: transparent !important;

}

/*
 * >
 */

.aidin-chevron-right {

    transform: rotate(45deg);

    margin-right: -3px !important;

}

/*
 * <
 */

.aidin-chevron-left {

    transform: rotate(-135deg);

    margin-left: -3px !important;

}

/* HOVER */

@media (hover:hover) {

    .aidin-arrow:hover {

        background: #f7f7f7 !important;

        border-color: #d7d7d7 !important;

        box-shadow:
            0 7px 18px rgba(0,0,0,.13);

    }

}

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

.aidin-products-loading {

    width: 100%;

    display: flex;

    gap: 12px;

}

.aidin-products-loading span {

    flex: 1;

    height: 270px;

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #f6f6f6 25%,
            #ededed 50%,
            #f6f6f6 75%
        );

    background-size: 200% 100%;

    animation:
        aidin-products-loading-animation
        1.15s
        infinite;

}

@keyframes aidin-products-loading-animation {

    0% {

        background-position:
            200% 0;

    }

    100% {

        background-position:
            -200% 0;

    }

}

/* =========================================================
   ERROR
========================================================= */

.aidin-products-error {

    display: none;

    padding: 25px 15px;

    text-align: center;

    color: #888;

    font-size: 13px;

}

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

@media (max-width: 767px) {

    /* HEADER */

    .aidin-products-head {

        gap: 8px;

        margin-bottom: 10px;

    }

    .aidin-products-title-wrap {

        min-width: 0;

    }

    .aidin-products-title-wrap h2 {

        font-size: 17px;

        line-height: 1.5;

    }

    .aidin-products-title-wrap span {

        font-size: 9px;

    }

    .aidin-products-all {

        padding:
            7px
            9px;

        font-size: 9px;

        gap: 5px;

    }

    .aidin-all-arrow {

        font-size: 13px;

    }

    /* MAIN BOX */

    .aidin-products-box {

        padding:
            10px;

        border-radius: 13px;

        box-shadow:
            0 4px 18px rgba(0,0,0,.055);

    }

    /* GAP */

    .aidin-products-track {

        --aidin-gap: 8px;

        gap: 8px;

    }

    /* CARD */

    .aidin-product-card {

        border-radius: 10px;

    }

    /* IMAGE */

    .aidin-product-image {

        aspect-ratio: 1 / 1;

    }

    .aidin-product-image img {

        padding: 0;

        object-fit: contain;

    }

    /* CONTENT */

    .aidin-product-content {

        min-height: 112px;

        padding:
            7px
            7px
            9px;

        gap: 5px;

    }

    /*
     * روی موبایل تا 4 خط
     * تا عنوان‌ها کمتر بریده شوند.
     */

    .aidin-product-title {

        min-height: 68px;

        font-size: 9.5px;

        line-height: 1.72;

        -webkit-line-clamp: 4;

    }

    /* PRICE */

    .aidin-product-price {

        font-size: 10.5px;

        gap: 3px;

        color: var(--aidin-red);

    }

    .aidin-product-price-unit {

        font-size: 7.5px;

        color: var(--aidin-red);

    }

    .aidin-product-price-regular {
        font-size: 8px;
    }

    .aidin-product-price-sale {
        font-size: 10.5px;
    }

    /*
     * موبایل هیچ فلشی ندارد.
     */

    .aidin-arrow {

        display: none !important;

    }

    /* LOADING */

    .aidin-products-loading {

        gap: 8px;

    }

    .aidin-products-loading span {

        height: 205px;

        border-radius: 10px;

    }

}

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

@media (max-width: 390px) {

    .aidin-products-box {

        padding: 8px;

    }

    .aidin-products-track {

        gap: 7px;

    }

    .aidin-product-content {

        min-height: 108px;

        padding:
            7px
            6px
            8px;

    }

    .aidin-product-title {

        font-size: 8.7px;

        line-height: 1.72;

        min-height: 65px;

    }

    .aidin-product-price {

        font-size: 9.5px;

    }

    .aidin-product-price-unit {

        font-size: 7px;

    }

}


/* Product-page Model 1 sliders keep their configured slot width and use +6px price text. */
.aidin-latest-products[data-ea-fixed-slots="1"] .aidin-product-price { font-size: 21px !important; }
.aidin-latest-products[data-ea-fixed-slots="1"] .aidin-product-price-sale { font-size: 21px !important; }
.aidin-latest-products[data-ea-fixed-slots="1"] .aidin-product-price-regular { font-size: 17px !important; }
.aidin-latest-products[data-ea-fixed-slots="1"] .aidin-product-price-unit { font-size: 11px !important; }
@media (max-width: 767px) {
    .aidin-latest-products[data-ea-fixed-slots="1"] .aidin-product-price { font-size: 16.5px !important; }
    .aidin-latest-products[data-ea-fixed-slots="1"] .aidin-product-price-sale { font-size: 16.5px !important; }
    .aidin-latest-products[data-ea-fixed-slots="1"] .aidin-product-price-regular { font-size: 14px !important; }
    .aidin-latest-products[data-ea-fixed-slots="1"] .aidin-product-price-unit { font-size: 9.5px !important; }
}
