/* ==========================================================================
   Product Listing v2 — گرید محصولات، فیلتر مدرن، اسکرول بی‌نهایت
   ========================================================================== */

:root {
    --plp-radius: 14px;
    --plp-radius-sm: 10px;
    --plp-shadow: 0 2px 10px rgba(20, 20, 30, 0.06);
    --plp-shadow-hover: 0 10px 24px rgba(20, 20, 30, 0.12);
    --plp-brand: #ee6403;
    --plp-brand-dark: #059669;
    --plp-border: #ebeaea;
    --plp-bg-soft: #fafafa;
    --plp-text-muted: #8a8a8a;
    --plp-drawer-width: min(86vw, 360px);
}

/* ---------------- Toolbox ---------------- */
.toolbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--plp-border);
    border-radius: var(--plp-radius-sm);
    padding: 10px 16px;
    margin-bottom: 16px;
}

.toolbox-sort .toolbox-item {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    transition: background .2s, color .2s;
}

    .toolbox-sort .toolbox-item.active,
    .toolbox-sort .toolbox-item:hover {
        background: var(--plp-brand);
        color: #fff;
    }

/* ---------------- Sidebar / Filter widgets ---------------- */
.widget-main {
    background-color: var(--plp-bg-soft);
    padding: 14px;
    border-radius: var(--plp-radius);
    border: 1px solid var(--plp-border);
    max-height: none;
}

.filter-box {
    background-color: #fff;
    padding: 4px 10px;
    border: 1px solid var(--plp-border);
    border-radius: var(--plp-radius-sm);
    margin-bottom: 10px;
}

    .filter-box .widget-title a {
        display: block;
        padding: 10px 2px;
        font-weight: 600;
        font-size: 14px;
        color: #222;
    }

.product-item label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    padding: 4px 0;
}

/* ---------------- Product Grid ---------------- */
.plp-grid {
    row-gap: 18px;
}

.plp-col {
    padding-left: 7px;
    padding-right: 7px;
    margin-bottom: 4px;
}

.plp-card {
    background: #fff;
    border-radius: var(--plp-radius);
    box-shadow: var(--plp-shadow);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
    opacity: 0;
    animation: plpFadeIn .4s ease forwards;
}

@keyframes plpFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.plp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--plp-shadow-hover);
}

.plp-card .product-media {
    position: relative;
    background: #f7f7f7;
}

.plp-card .product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 10px;
    background-color: #ecede8;
}

.plp-card .product-body {
    padding: 10px 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.plp-card .product-title-height {
    font-size: 13px;
    line-height: 1.5;
    min-height: 2.6em;
    margin: 4px 0;
}

.plp-card .product-price {
    margin-top: auto;
    font-weight: 700;
}

.plp-card .new-price {
    color: var(--plp-brand-dark);
    font-size: 14px;
}

.plp-card .old-price {
    color: #b7b7b7;
    text-decoration: line-through;
    font-size: 12px;
    margin-inline-start: 6px;
}

.plp-card .btn-cart-disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* 2 columns on phones (default), 3 on tablets(md), 4 on desktop(lg+) — via col-6 / col-md-4 / col-lg-3 set in markup */
@media (max-width: 380px) {
    .plp-card .product-title-height {
        font-size: 12px;
    }

    .plp-card .new-price {
        font-size: 12.5px;
    }
}

/* ---------------- Skeleton loading cards ---------------- */
.plp-skeleton-card {
    background: #fff;
    border-radius: var(--plp-radius);
    box-shadow: var(--plp-shadow);
    overflow: hidden;
    height: 100%;
}

.plp-skeleton-img,
.plp-skeleton-line {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%;
    animation: plpShimmer 1.4s ease infinite;
}

.plp-skeleton-img {
    aspect-ratio: 1/1;
    width: 100%;
}

.plp-skeleton-line {
    height: 12px;
    margin: 10px 12px;
    border-radius: 6px;
}

    .plp-skeleton-line.short {
        width: 50%;
    }

@keyframes plpShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* ---------------- Modern spinners (initial load + load-more) ---------------- */
.modern-spinner {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

    .modern-spinner span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--plp-brand);
        animation: plpBounce 1s infinite ease-in-out both;
    }

        .modern-spinner span:nth-child(1) {
            animation-delay: -0.24s;
        }

        .modern-spinner span:nth-child(2) {
            animation-delay: -0.12s;
        }

@keyframes plpBounce {
    0%, 80%, 100% {
        transform: scale(0.4);
        opacity: .5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.load-more-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 0 8px;
    color: var(--plp-text-muted);
    font-size: 13px;
}

.end-of-list-message {
    text-align: center;
    color: var(--plp-text-muted);
    font-size: 13px;
    padding: 20px 0 6px;
}

.plp-sentinel {
    height: 1px;
}

/* ---------------- Off-canvas filter (mobile / tablet) ---------------- */
.plp-filter-fab {
    display: none;
}

.plp-filter-close,
.plp-apply-filters {
    display: none;
}

@media (max-width: 991px) {
    .plp-filter-fab {
        display: flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        bottom: 20px;
        inset-inline-end: 18px;
        z-index: 1050;
        background: var(--plp-brand);
        color: #fff;
        border: none;
        padding: 10px 29px;
        border-radius: 999px;
        box-shadow: 0 8px 20px rgb(16 185 129 / 52%);
        font-size: 20px;
    }

    .plp-filter-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1049;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }

        .plp-filter-backdrop.show {
            opacity: 1;
            pointer-events: auto;
        }

    .plp-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100dvh;
        width: var(--plp-drawer-width);
        max-width: 100vw;
        background: #fff;
        z-index: 1050;
        transform: translateX(100%);
        transition: transform .3s ease;
        overflow-y: auto;
        padding: 16px 16px 90px;
        box-shadow: -6px 0 24px rgba(0,0,0,.15);
    }

        .plp-sidebar.open {
            transform: translateX(0);
        }

    .plp-filter-close {
        display: block;
        margin-inline-start: auto;
        margin-bottom: 8px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--plp-border);
        background: #fff;
        font-size: 18px;
        line-height: 1;
    }

    .plp-apply-filters {
        display: block;
        position: fixed;
        bottom: 0;
        right: 0;
        width: var(--plp-drawer-width);
        max-width: 100vw;
        z-index: 1051;
        background: var(--plp-brand);
        color: #fff;
        border: none;
        padding: 14px;
        font-size: 14px;
        font-weight: 600;
        transform: translateX(100%);
        transition: transform .3s ease;
    }

        .plp-apply-filters.open {
            transform: translateX(0);
        }

    body.plp-drawer-open {
        overflow: hidden;
    }
}

@media (min-width: 992px) {
    .plp-sidebar {
        position: static;
    }
}