/* --- Product Card Redesign (Luxury Theme) --- */

:root {
    /* استفاده از متغیرهای هماهنگ با auth-redesign */
    --card-bg-product: #FFFFFF;
    --text-main: #6e6e6e;
    --text-muted: #64748B;
    --accent-gold: #C5A059;
    --accent-gold-hover: #B08D4C;
    --danger-red: #EF4444;
    --success-green: #10B981;
    
    --radius-card: 20px;
    --radius-btn: 12px;
    --shadow-soft: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 20px 40px -12px rgba(197, 160, 89, 0.15);
}

/* --- Grid Container --- */
#product-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* چیدمان خودکار و هوشمند */
    gap: 30px;
    padding: 30px;
    max-width: 1600px;
    margin: 0 auto;
}

/* --- Card Base --- */
.product-card {
    background: var(--card-bg-product);
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* افکت هاور روی کل کارت */
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(197, 160, 89, 0.3); /* خط طلایی کمرنگ دور کارت */
}

/* --- Image Section --- */
.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* عکس مربعی استاندارد */
    overflow: hidden;
    background: #f8f8f8; /* لودینگ پلیس‌هولدر */
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.08); /* زوم نرم عکس */
}

/* --- Stock Status Badge --- */
.stock-status {
    position: absolute;
    top: 12px;
    left: 12px; /* انتقال به چپ برای استانداردتر شدن */
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 30px;
    z-index: 5;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    letter-spacing: 0.5px;
}

.stock-status.in-stock {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--success-green);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.stock-status.out-of-stock {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--danger-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
    opacity: 0.9;
}

/* --- Product Info --- */
.product-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* پر کردن فضای خالی */
    gap: 8px;
    text-align: right; /* راست‌چین برای فارسی */
}

.category {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 2px;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.5;
    
    /* محدود کردن به 2 خط */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent-gold);
    margin-top: auto; /* چسبیدن به پایین بخش اینفو */
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-price::after {
    content: 'تومان';
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* --- Actions (Button) --- */
.product-actions {
    padding: 0 20px 20px 20px;
    margin-top: auto;
}

.product-actions .add-to-cart {
    width: 100%;
    border: none;
    background: var(--text-main); /* دکمه مشکی شیک */
    color: white;
    padding: 12px;
    border-radius: var(--radius-btn);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.product-actions .add-to-cart::before {
    content: '';
    display: inline-block;
    width: 22px;  /* کمی بزرگتر برای دیده شدن جزئیات */
    height: 22px;
    
    /* رنگ آیکون از رنگ متن پیروی می‌کند (سفید در حالت عادی، مشکی/طلایی در هاور) */
    background-color: currentColor;
    
    /* SVG شما تبدیل شده به کد CSS */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 18C8.32843 18 9 18.6716 9 19.5C9 20.3284 8.32843 21 7.5 21C6.67157 21 6 20.3284 6 19.5C6 18.6716 6.67157 18 7.5 18Z' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M16.5 18.0001C17.3284 18.0001 18 18.6716 18 19.5001C18 20.3285 17.3284 21.0001 16.5 21.0001C15.6716 21.0001 15 20.3285 15 19.5001C15 18.6716 15.6716 18.0001 16.5 18.0001Z' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M13 13V11M13 11V9M13 11H15M13 11H11' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2 3L2.26121 3.09184C3.5628 3.54945 4.2136 3.77826 4.58584 4.32298C4.95808 4.86771 4.95808 5.59126 4.95808 7.03836V9.76C4.95808 12.7016 5.02132 13.6723 5.88772 14.5862C6.75412 15.5 8.14857 15.5 10.9375 15.5H12M16.2404 15.5C17.8014 15.5 18.5819 15.5 19.1336 15.0504C19.6853 14.6008 19.8429 13.8364 20.158 12.3075L20.6578 9.88275C21.0049 8.14369 21.1784 7.27417 20.7345 6.69708C20.2906 6.12 18.7738 6.12 17.0888 6.12H11.0235M4.95808 6.12H7' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 18C8.32843 18 9 18.6716 9 19.5C9 20.3284 8.32843 21 7.5 21C6.67157 21 6 20.3284 6 19.5C6 18.6716 6.67157 18 7.5 18Z' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M16.5 18.0001C17.3284 18.0001 18 18.6716 18 19.5001C18 20.3285 17.3284 21.0001 16.5 21.0001C15.6716 21.0001 15 20.3285 15 19.5001C15 18.6716 15.6716 18.0001 16.5 18.0001Z' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M13 13V11M13 11V9M13 11H15M13 11H11' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2 3L2.26121 3.09184C3.5628 3.54945 4.2136 3.77826 4.58584 4.32298C4.95808 4.86771 4.95808 5.59126 4.95808 7.03836V9.76C4.95808 12.7016 5.02132 13.6723 5.88772 14.5862C6.75412 15.5 8.14857 15.5 10.9375 15.5H12M16.2404 15.5C17.8014 15.5 18.5819 15.5 19.1336 15.0504C19.6853 14.6008 19.8429 13.8364 20.158 12.3075L20.6578 9.88275C21.0049 8.14369 21.1784 7.27417 20.7345 6.69708C20.2906 6.12 18.7738 6.12 17.0888 6.12H11.0235M4.95808 6.12H7' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}


.product-actions .add-to-cart:hover:not(:disabled) {
    background: var(--accent-gold); /* تغییر به طلایی در هاور */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4);
}

.product-actions .add-to-cart:active:not(:disabled) {
    transform: translateY(0);
}

.product-actions .add-to-cart:disabled {
    background: #E2E8F0;
    color: #94A3B8;
    cursor: not-allowed;
}

/* --- Responsive Adjustments --- */

@media (max-width: 1200px) {
    #product-list-grid {
        gap: 20px;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    #product-list-grid {
        /* در تبلت 2 ستونه شود */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }
    
    .product-title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    #product-list-grid {
        /* در موبایل هم 2 ستونه بماند اما فشرده */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .product-card {
        border-radius: 16px;
    }

    .product-info {
        padding: 12px;
    }

    .product-title {
        font-size: 0.9rem;
        height: 2.7em; /* ارتفاع ثابت برای نظم */
    }

    .category {
        font-size: 0.7rem;
    }

    .product-price {
        font-size: 1rem;
        padding-top: 5px;
    }

    .product-actions {
        padding: 0 10px 12px 10px;
    }

    .product-actions .add-to-cart {
        padding: 8px;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .stock-status {
        top: 8px;
        left: 8px;
        padding: 4px 8px;
        font-size: 0.65rem;
    }
}