/* Grid Visual Styles — استایل‌های بصری گرید
 * کلاس روت: .hpb-grid--style-{slug}
 * کارت‌ها: .hpb-card | .hamta-product-card | .hpb-product-loop.product-card
 */

/* ============================================================
   MODERN CARD - کارت مدرن با سایه نرم
============================================================ */
.hpb-grid--style-modern-card .hpb-card,
.hpb-grid--style-modern-card .hamta-product-card,
.hpb-grid--style-modern-card .hpb-product-loop.product-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hpb-grid--style-modern-card .hpb-card:hover,
.hpb-grid--style-modern-card .hamta-product-card:hover,
.hpb-grid--style-modern-card .hpb-product-loop.product-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13);
    transform: translateY(-4px);
}

.hpb-grid--style-modern-card .hpb-card__image img,
.hpb-grid--style-modern-card .hamta-product-card img,
.hpb-grid--style-modern-card .hpb-product-loop.product-card img {
    transition: transform 0.35s ease;
}

.hpb-grid--style-modern-card .hpb-card:hover .hpb-card__image img,
.hpb-grid--style-modern-card .hamta-product-card:hover img,
.hpb-grid--style-modern-card .hpb-product-loop.product-card:hover img {
    transform: scale(1.05);
}

/* ============================================================
   MINIMAL FLAT - حداقل فلت بدون سایه
============================================================ */
.hpb-grid--style-minimal-flat .hpb-card,
.hpb-grid--style-minimal-flat .hamta-product-card,
.hpb-grid--style-minimal-flat .hpb-product-loop.product-card {
    background: #f9fafb;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hpb-grid--style-minimal-flat .hpb-card:hover,
.hpb-grid--style-minimal-flat .hamta-product-card:hover,
.hpb-grid--style-minimal-flat .hpb-product-loop.product-card:hover {
    background: #fff;
    border-color: #ced4da;
}

.hpb-grid--style-minimal-flat .hpb-card__image img,
.hpb-grid--style-minimal-flat .hamta-product-card img,
.hpb-grid--style-minimal-flat .hpb-product-loop.product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   DARK ELEGANT - تیره الگان
============================================================ */
.hpb-grid--style-dark-elegant .hpb-card,
.hpb-grid--style-dark-elegant .hamta-product-card,
.hpb-grid--style-dark-elegant .hpb-product-loop.product-card {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    color: #e2e8f0;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hpb-grid--style-dark-elegant .hpb-card:hover,
.hpb-grid--style-dark-elegant .hamta-product-card:hover,
.hpb-grid--style-dark-elegant .hpb-product-loop.product-card:hover {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

.hpb-grid--style-dark-elegant .hpb-card__title a,
.hpb-grid--style-dark-elegant .hpb-card__caption {
    color: #cbd5e1;
}

.hpb-grid--style-dark-elegant .hpb-card__image img,
.hpb-grid--style-dark-elegant .hamta-product-card img,
.hpb-grid--style-dark-elegant .hpb-product-loop.product-card img {
    opacity: 0.72;
    transition: opacity 0.3s ease;
}

.hpb-grid--style-dark-elegant .hpb-card:hover .hpb-card__image img,
.hpb-grid--style-dark-elegant .hamta-product-card:hover img,
.hpb-grid--style-dark-elegant .hpb-product-loop.product-card:hover img {
    opacity: 0.92;
}

/* ============================================================
   GLASSMORPHISM - شیشه‌ای
============================================================ */
.hpb-grid--style-glassmorphism .hpb-card,
.hpb-grid--style-glassmorphism .hamta-product-card,
.hpb-grid--style-glassmorphism .hpb-product-loop.product-card {
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
    overflow: hidden;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.hpb-grid--style-glassmorphism .hpb-card:hover,
.hpb-grid--style-glassmorphism .hamta-product-card:hover,
.hpb-grid--style-glassmorphism .hpb-product-loop.product-card:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 14px 40px rgba(31, 38, 135, 0.18);
    transform: translateY(-3px);
}

/* ============================================================
   VIBRANT GRADIENT - رنگین چرخه‌ای
============================================================ */
.hpb-grid--style-vibrant-gradient .hpb-card,
.hpb-grid--style-vibrant-gradient .hamta-product-card,
.hpb-grid--style-vibrant-gradient .hpb-product-loop.product-card {
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s ease;
}

.hpb-grid--style-vibrant-gradient .hpb-grid__item:nth-child(3n+1) .hpb-card,
.hpb-grid--style-vibrant-gradient .hpb-grid__item:nth-child(3n+1) .hamta-product-card,
.hpb-grid--style-vibrant-gradient .hpb-grid__item:nth-child(3n+1) .hpb-product-loop.product-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.38);
}

.hpb-grid--style-vibrant-gradient .hpb-grid__item:nth-child(3n+2) .hpb-card,
.hpb-grid--style-vibrant-gradient .hpb-grid__item:nth-child(3n+2) .hamta-product-card,
.hpb-grid--style-vibrant-gradient .hpb-grid__item:nth-child(3n+2) .hpb-product-loop.product-card {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 20px rgba(240, 149, 251, 0.38);
}

.hpb-grid--style-vibrant-gradient .hpb-grid__item:nth-child(3n+3) .hpb-card,
.hpb-grid--style-vibrant-gradient .hpb-grid__item:nth-child(3n+3) .hamta-product-card,
.hpb-grid--style-vibrant-gradient .hpb-grid__item:nth-child(3n+3) .hpb-product-loop.product-card {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 4px 20px rgba(79, 172, 254, 0.38);
}

.hpb-grid--style-vibrant-gradient .hpb-card:hover,
.hpb-grid--style-vibrant-gradient .hamta-product-card:hover,
.hpb-grid--style-vibrant-gradient .hpb-product-loop.product-card:hover {
    transform: scale(1.03);
}

.hpb-grid--style-vibrant-gradient .hpb-card__image,
.hpb-grid--style-vibrant-gradient .hamta-product-card .product-image {
    opacity: 0.82;
}

/* ============================================================
   BORDER ACCENT - حاشیه رنگی
============================================================ */
.hpb-grid--style-border-accent .hpb-card,
.hpb-grid--style-border-accent .hamta-product-card,
.hpb-grid--style-border-accent .hpb-product-loop.product-card {
    background: #fff;
    border-radius: 8px;
    border-inline-start: 4px solid var(--hpb-accent, #667eea);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hpb-grid--style-border-accent .hpb-card:hover,
.hpb-grid--style-border-accent .hamta-product-card:hover,
.hpb-grid--style-border-accent .hpb-product-loop.product-card:hover {
    transform: translateX(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   RESPONSIVE OVERRIDES
============================================================ */
@media (max-width: 768px) {
    .hpb-grid--style-modern-card .hpb-card:hover,
    .hpb-grid--style-modern-card .hamta-product-card:hover,
    .hpb-grid--style-modern-card .hpb-product-loop.product-card:hover {
        transform: translateY(-2px);
    }

    .hpb-grid--style-dark-elegant .hpb-card:hover,
    .hpb-grid--style-dark-elegant .hamta-product-card:hover,
    .hpb-grid--style-dark-elegant .hpb-product-loop.product-card:hover {
        transform: none;
    }

    .hpb-grid--style-vibrant-gradient .hpb-card:hover,
    .hpb-grid--style-vibrant-gradient .hamta-product-card:hover,
    .hpb-grid--style-vibrant-gradient .hpb-product-loop.product-card:hover {
        transform: scale(1.01);
    }

    .hpb-grid--style-border-accent .hpb-card:hover,
    .hpb-grid--style-border-accent .hamta-product-card:hover,
    .hpb-grid--style-border-accent .hpb-product-loop.product-card:hover {
        transform: translateX(-1px);
    }
}