/* =========================================================
   صفحه محصولات — گرید اینستاگرامی + پاپ‌آپ گالری
   ========================================================= */

:root {
    /* منحنی فنری: کمی فراجهش در پایان حرکت، حس زنده‌تر از ease معمول */
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --smooth: cubic-bezier(.22, 1, .36, 1);
}

.pp-body { padding-top: 34px; }
.pp-wrap { position: relative; z-index: 1; width: 100%; max-width: 900px; margin-inline: auto; }

/* ---------------- سربرگ ---------------- */
.pp-head {
    text-align: center;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s var(--smooth), transform .55s var(--smooth);
}
.pp-head.in { opacity: 1; transform: none; }

.pp-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 20px; padding: 7px 14px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: .78rem; font-weight: 700;
    transition: color .2s, border-color .2s, transform .25s var(--smooth);
}
.pp-back:hover {
    color: var(--dc-1);
    border-color: color-mix(in srgb, var(--dc-1) 40%, var(--border));
    transform: translateX(4px);
}
.pp-back-icon { transform: rotate(-90deg); }

.pp-owner { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.pp-avatar {
    width: 50px; height: 50px; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: var(--surface-2);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 2px var(--dc-1);
    color: var(--dc-1);
}
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-owner-text { display: flex; flex-direction: column; text-align: start; }
.pp-owner-text strong { font-size: .95rem; }
.pp-owner-text small { font-size: .77rem; color: var(--text-soft); }

.pp-title { font-size: 1.7rem; margin-bottom: 6px; }
.pp-sub { color: var(--text-soft); font-size: .86rem; }

/* ---------------- گرید ---------------- */
.pp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 18px;
}

.pp-tile {
    display: flex; flex-direction: column;
    padding: 0; overflow: hidden;
    text-align: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font-family: inherit;

    /* حالت اولیه ورود؛ تاخیر پلکانی از روی --i که PHP روی هر کاشی می‌گذارد */
    opacity: 0;
    transform: translateY(26px) scale(.96);
    transition:
        opacity .5s var(--smooth) calc(var(--i, 0) * 55ms),
        transform .55s var(--spring) calc(var(--i, 0) * 55ms),
        box-shadow .3s var(--smooth),
        border-color .3s;
}
.pp-tile.in { opacity: 1; transform: none; }

.pp-tile:hover {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--dc-1) 18%, transparent);
    border-color: color-mix(in srgb, var(--dc-1) 45%, var(--border));
}
/* بعد از ورود، تاخیر پلکانی نباید روی هاور هم اعمال شود */
.pp-tile.in { transition-delay: 0s; }
.pp-tile.in:hover { transform: translateY(-6px); }
.pp-tile.in:active { transform: translateY(-2px) scale(.99); }

.pp-tile-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--dc-1) 16%, var(--surface)),
        color-mix(in srgb, var(--dc-2) 16%, var(--surface)));
}
.pp-tile-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--smooth);
}
.pp-tile:hover .pp-tile-media img { transform: scale(1.07); }

.pp-tile-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dc-1); opacity: .5; }

/* نشان چندعکسی، مثل آیکن پست چندتایی اینستاگرام */
.pp-tile-multi {
    position: absolute; top: 10px; inset-inline-end: 10px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .72rem; font-weight: 700;
    backdrop-filter: blur(6px);
}

/* پرده‌ای که با هاور بالا می‌آید */
.pp-tile-veil {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--dc-2) 70%, transparent));
    opacity: 0;
    transition: opacity .3s var(--smooth);
}
.pp-tile:hover .pp-tile-veil { opacity: 1; }

.pp-tile-veil-in {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .92);
    color: var(--text);
    font-size: .8rem; font-weight: 700;
    transform: translateY(10px);
    transition: transform .35s var(--spring);
}
.pp-tile:hover .pp-tile-veil-in { transform: none; }

.pp-tile-body { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px 16px; }
.pp-tile-title {
    font-size: .92rem; font-weight: 700; line-height: 1.6; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.pp-tile-price { font-size: .85rem; font-weight: 800; color: var(--dc-1); }

/* =========================================================
   پاپ‌آپ
   ========================================================= */
body.is-modal-open { overflow: hidden; }

.pm {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
}
.pm[hidden] { display: none; }

.pm-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 20, 22, .62);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .28s var(--smooth);
}
.pm.is-open .pm-backdrop { opacity: 1; }

.pm-box {
    position: relative; z-index: 1;
    width: min(460px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .3);

    opacity: 0;
    transform: translateY(24px) scale(.94);
    transition: opacity .3s var(--smooth), transform .42s var(--spring);
}
.pm.is-open .pm-box { opacity: 1; transform: none; }

.pm-close {
    position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--text);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    transition: transform .25s var(--spring), background-color .2s;
}
.pm-close:hover { transform: rotate(90deg); background: #fff; }

/* ---------------- گالری ---------------- */
.pm-gallery {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, var(--dc-1), var(--dc-2));
}
.pm.no-media .pm-gallery { aspect-ratio: auto; height: 7px; }

.pm-track {
    display: flex;
    height: 100%;
    /*
     * ریل عمداً LTR است، حتی داخل صفحه RTL.
     * با row-reverse در بستر RTL، جهت چیدمان و علامت translateX با هم نمی‌خواندند
     * و اسلاید عوض نمی‌شد. اینجا اسلاید i همیشه در translateX(-i*100%) است.
     */
    direction: ltr;
    transition: transform .45s var(--smooth);
    will-change: transform;
}
.pm-slide { flex: 0 0 100%; height: 100%; }
.pm-slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

.pm-nav {
    position: absolute; top: 50%; z-index: 2;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--text);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    transform: translateY(-50%);
    transition: opacity .2s, background-color .2s, transform .25s var(--spring);
}
.pm-nav:hover:not(:disabled) { background: #fff; }
.pm-nav:disabled { opacity: 0; pointer-events: none; }
.pm-nav[hidden] { display: none; }

/* مختصات فیزیکی: چون خود گالری LTR رفتار می‌کند، فلش‌ها هم باید ثابت بمانند */
.pm-prev { left: 10px; }
.pm-next { right: 10px; }
.pm-prev svg { transform: rotate(90deg); }
.pm-next svg { transform: rotate(-90deg); }

.pm-counter {
    /* مختصات فیزیکی: با direction:ltr، inset-inline-end هم وارونه می‌شد و روی دکمه بستن می‌افتاد */
    position: absolute; top: 12px; left: 12px; z-index: 2;
    /* «1 / 10» باید همین‌طور خوانده شود، نه برعکس‌شده در بستر RTL */
    direction: ltr;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .74rem; font-weight: 700;
    backdrop-filter: blur(6px);
}
.pm-counter[hidden] { display: none; }

.pm-dots {
    position: absolute; bottom: 12px; inset-inline: 0; z-index: 2;
    display: flex; justify-content: center; gap: 6px;
    /* هم‌جهت با خود ریل: نقطه اول سمت چپ، تا پیشروی نقطه‌ها با حرکت اسلایدها بخواند */
    direction: ltr;
}
.pm-dot {
    width: 7px; height: 7px; padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: width .35s var(--spring), background-color .3s;
}
.pm-dot.is-active { width: 20px; border-radius: 4px; background: #fff; }

/* ---------------- متن ---------------- */
.pm-body { padding: 20px 22px 24px; }
.pm-title { font-size: 1.2rem; margin-bottom: 10px; }
.pm-desc { color: var(--text-soft); font-size: .88rem; line-height: 2.05; margin-bottom: 18px; }
.pm-desc[hidden] { display: none; }

.pm-price-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 13px 16px; margin-bottom: 16px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.pm-price-label { font-size: .78rem; color: var(--text-faint); }
.pm-price { font-size: 1.1rem; color: var(--dc-1); font-family: var(--font-heading); }

.pm-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--dc-1), var(--dc-2));
    color: #fff; font-weight: 700; font-size: .93rem;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset,
                0 8px 20px color-mix(in srgb, var(--dc-1) 32%, transparent);
    transition: transform .25s var(--spring), filter .2s;
}
.pm-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.pm-cta:active { transform: translateY(0); }
.pm-cta[hidden] { display: none; }

/* ---------------- ریسپانسیو ---------------- */
@media (max-width: 560px) {
    .pp-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .pp-title { font-size: 1.35rem; }
    .pp-tile { border-radius: 16px; }
    .pp-tile-title { font-size: .82rem; }
    .pp-tile-price { font-size: .78rem; }
    .pm { padding: 0; align-items: flex-end; }
    .pm-box { width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; }
    /* روی موبایل پاپ‌آپ مثل شیت از پایین بالا می‌آید */
    .pm-box { transform: translateY(100%); }
    .pm.is-open .pm-box { transform: none; }
}

/* احترام به تنظیم «کاهش حرکت» سیستم */
@media (prefers-reduced-motion: reduce) {
    .pp-tile,
    .pp-head,
    .pm-box,
    .pm-backdrop { transition-duration: .01ms !important; transition-delay: 0s !important; }
    .pp-tile { transform: none !important; }
    .pp-tile-media img { transition: none; }
    .pm-track { transition-duration: .01ms; }
    .pm-close:hover { transform: none; }
}