/* =========================================================
   کارت محصول (صفحه محصولات + نوار محصولات روی کارت)
   الهام از کارت‌های فروشگاهی مینیمال: قاب عکس نرم، برچسب، قلب، نقطه‌های اسلاید،
   قیمت رنگی و دکمه تیره «سفارش». انیمیشن‌ها نرم و با prefers-reduced-motion خاموش.
   ========================================================= */
.prd-grid > * { max-width: 100%; }
.prd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 18px; margin: 18px 0 30px; perspective: 1200px; }

.prd-card {
    --prd-accent: var(--dc-1, var(--primary));
    position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 26px; padding: 9px 9px 14px;
    box-shadow: 0 1px 2px rgba(16, 40, 46, .04), 0 10px 30px -14px rgba(16, 40, 46, .18);
    opacity: 0; transform: translateY(26px) scale(.97);
    transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
    transition-delay: calc(min(var(--i, 0), 8) * 70ms);
    transform-style: preserve-3d; will-change: transform;
}
.prd-card.in { opacity: 1; transform: none; }
.prd-card.is-tilting { transition: transform .12s ease-out, box-shadow .35s ease; transition-delay: 0s; }
.prd-card:hover { box-shadow: 0 1px 2px rgba(16, 40, 46, .05), 0 22px 44px -18px color-mix(in srgb, var(--prd-accent) 45%, rgba(16, 40, 46, .35)); }

/* درخشش ملایم که با موس جابه‌جا می‌شود */
.prd-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .45), transparent 45%);
    transition: opacity .3s;
}
.prd-card.is-tilting::after { opacity: 1; }

/* ---------- قاب عکس ---------- */
.prd-media {
    position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1 / .86;
    background: color-mix(in srgb, var(--prd-accent) 7%, #eef1f2);
    isolation: isolate;
}
.prd-track {
    display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; overscroll-behavior-x: contain; cursor: zoom-in; outline: none; color: inherit;
}
.prd-track::-webkit-scrollbar { display: none; }
.prd-track:focus-visible { box-shadow: inset 0 0 0 3px var(--prd-accent); }
.prd-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; position: relative; display: grid; place-items: center; overflow: hidden; }
.prd-slide img {
    width: 100%; height: 100%; object-fit: cover; user-select: none;
    transform: scale(1.001); transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .5s; opacity: 1;
}
.prd-card:hover .prd-slide img { transform: scale(1.06); }
.prd-empty { color: color-mix(in srgb, var(--prd-accent) 55%, #9aa8ab); }
.prd-empty svg { width: 54px; height: 54px; opacity: .7; }

/* بارگذاری: نوار نور روی قاب تا عکس برسد */
.prd-slide.is-loading img { opacity: 0; }
.prd-slide.is-loading::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
    background-size: 220% 100%; animation: prd-shimmer 1.3s linear infinite;
}
@keyframes prd-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* برچسب */
.prd-badge {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #1d2b2f;
    background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    animation: prd-badge-in .7s .25s both cubic-bezier(.2, 1.4, .4, 1);
}
.prd-badge-offer { background: #fdecec; color: #c53030; }
.prd-badge-new { background: color-mix(in srgb, var(--prd-accent) 16%, #fff); color: color-mix(in srgb, var(--prd-accent) 85%, #000); }
.prd-badge-limited { background: #fff4e5; color: #b45309; }
@keyframes prd-badge-in { from { opacity: 0; transform: translateY(-6px) scale(.85); } }

/* قلب */
.prd-like {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px; height: 36px; min-width: 36px; padding: 0 9px;
    border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; color: #475a5f;
    background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08); transition: transform .2s;
}
.prd-like:hover { transform: scale(1.08); }
.prd-like svg { width: 18px; height: 18px; fill: none; stroke: #e5484d; stroke-width: 2; transition: fill .2s, transform .3s; }
.prd-like.is-liked svg { fill: #e5484d; }
.prd-like.pop svg { animation: prd-heart .55s cubic-bezier(.2, 1.6, .4, 1); }
.prd-like-n:empty { display: none; }
@keyframes prd-heart { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 60% { transform: scale(.88); } 100% { transform: scale(1); } }
.prd-burst { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #e5484d; pointer-events: none; animation: prd-burst .6s ease-out forwards; }
@keyframes prd-burst { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--bx), var(--by)) scale(.3); } }

/* نقطه‌های اسلاید */
.prd-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 5px; padding: 4px 6px; border-radius: 99px; background: rgba(255, 255, 255, .5); backdrop-filter: blur(6px); }
.prd-dots i { width: 6px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--prd-accent) 30%, #fff); transition: width .35s cubic-bezier(.2, .8, .2, 1), background .35s; }
.prd-dots i.is-on { width: 18px; background: var(--prd-accent); }

/* ---------- متن و پایین کارت ---------- */
.prd-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 6px 0; flex: 1; }
.prd-title { margin: 0; font-size: 1rem; line-height: 1.6; font-weight: 800; color: var(--text); cursor: pointer;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prd-desc { margin: 0; font-size: .82rem; color: var(--text-soft); line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.prd-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; min-width: 0; }
.prd-price { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.prd-price small { font-size: .74rem; color: var(--text-faint); }
.prd-price strong { font-size: 1.12rem; font-weight: 900; color: var(--prd-accent); white-space: nowrap; }
.prd-price strong span { font-size: .72rem; font-weight: 600; }
.prd-price strong.prd-ask { font-size: .9rem; }
.prd-price del { font-size: .76rem; color: var(--text-faint); }

.prd-buy {
    position: relative; overflow: hidden; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
    font: inherit; font-size: .88rem; font-weight: 700; color: #fff; background: #262a2b;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); transition: transform .25s, background .25s, box-shadow .25s;
}
.prd-buy:hover { transform: translateY(-2px); background: #111; box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .55); }
.prd-buy:active { transform: translateY(0) scale(.97); }
.prd-buy svg { transition: transform .3s; }
.prd-buy:hover svg { transform: translateX(-3px) rotate(-8deg); }
.prd-buy-whatsapp:hover { background: #128c4a; }
.prd-buy-telegram:hover { background: #1b86c4; }
.prd-buy-ghost { color: var(--text); background: var(--surface-2); box-shadow: none; }
.prd-buy-ghost:hover { background: var(--primary-soft); }
.prd-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: prd-ripple .6s ease-out forwards; pointer-events: none; }
@keyframes prd-ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- نوار محصولات روی کارت عمومی ---------- */
.prd-strip { margin: 18px 0 6px; }
.prd-strip-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 10px; }
.prd-strip-head h2 { margin: 0; font-size: 1rem; }
.prd-strip-head a { font-size: .84rem; font-weight: 700; color: var(--dc-1, var(--primary)); text-decoration: none; }
.prd-strip-row {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin: 0 -4px;
    scrollbar-width: none; overscroll-behavior-x: contain;
}
.prd-strip-row::-webkit-scrollbar { display: none; }
.prd-card.is-compact { flex: 0 0 196px; scroll-snap-align: start; border-radius: 22px; padding: 7px 7px 12px; }
.prd-card.is-compact .prd-media { border-radius: 17px; aspect-ratio: 1 / .9; }
.prd-card.is-compact .prd-track { cursor: pointer; }
.prd-card.is-compact .prd-title { font-size: .88rem; -webkit-line-clamp: 1; }
.prd-card.is-compact .prd-body { padding: 10px 4px 0; gap: 2px; }
.prd-card.is-compact .prd-price strong { font-size: .95rem; }
.prd-card.is-compact .prd-buy { height: 36px; padding: 0 13px; font-size: .8rem; }
.prd-card.is-compact .prd-like { height: 32px; min-width: 32px; }
.prd-more {
    flex: 0 0 120px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border-radius: 22px; border: 2px dashed color-mix(in srgb, var(--dc-1, var(--primary)) 40%, var(--border));
    color: var(--dc-1, var(--primary)); font-weight: 700; font-size: .84rem; text-decoration: none; text-align: center;
}
.prd-more span { font-size: 1.4rem; font-weight: 900; }

@media (max-width: 560px) {
    .prd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .prd-card { border-radius: 20px; padding: 6px 6px 10px; }
    .prd-media { border-radius: 15px; }
    .prd-body { padding: 8px 3px 0; }
    .prd-title { font-size: .86rem; }
    .prd-desc { display: none; }
    .prd-foot { flex-direction: column; align-items: stretch; gap: 8px; }
    .prd-buy { height: 38px; padding: 0 10px; font-size: .8rem; }
    .prd-price strong { font-size: .98rem; }
    .prd-like { height: 30px; min-width: 30px; padding: 0 7px; top: 7px; left: 7px; }
    .prd-badge { top: 8px; right: 8px; font-size: .66rem; padding: 4px 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .prd-card, .prd-card.in { transition: none; opacity: 1; transform: none; }
    .prd-slide img, .prd-badge, .prd-like svg, .prd-buy, .prd-buy svg { transition: none; animation: none; }
    .prd-card:hover .prd-slide img { transform: none; }
    .prd-slide.is-loading::before { animation: none; }
}
.prd-strip { width: 100%; max-width: 420px; min-width: 0; }