/* grid-simple.css - Optimized Fluid Version */

/* 1. Base Card & Media Area (Square Look) */
.st-product-grid-simple .st-product-card,
.st-product-grid-simple .product-thumb-area {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important; /* Luxury look: sharp corners */
}

.st-product-grid-simple .st-product-card {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. Default Hover Effects */
.st-product-grid-simple .st-product-card:hover {
    transform: translateY(-5px); 
}

.st-product-grid-simple .st-product-card:hover .product-thumb-area img {
    transform: scale(1.08); 
}

/* 3. Disable Overlay Total */
.st-product-grid-simple .product-card-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 4. Content Area (Center Aligned) */
.st-product-grid-simple .product-card-content {
    display: grid !important;
    grid-template-columns: 100%;
    row-gap: var(--p-content-gap, 4px) !important;
    padding: 10px 5px !important;
    text-align: center !important;
    justify-items: center;
}

/* 5. Typography */
.st-product-grid-simple .product-card-title {
    display: block !important;
    width: 100%;
    font-size: var(--p-card-title-size, 0.95rem) !important;
    font-weight: 600;
    color: var(--primary-color, #333333);
    margin: 0 0 8px 0 !important;
    line-height: var(--p-card-title-line-height, 1.4);
    transition: color 0.3s ease;

    /* Logic Ellipsis */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    /* Menjaga Kesejajaran */
    min-height: calc(var(--p-card-title-size) * var(--p-card-title-line-height));
}

.st-product-grid-simple .product-card-price {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: 6px;
    width: 100%;
}

.st-product-grid-simple .price-actual {
    font-size: var(--p-price-actual-size, 0.9rem) !important;
    font-weight: 700;
    color: var(--accent-color);
}

/* ============================================================
   6. Grid Responsiveness (FIXED FLUID LOGIC)
   ============================================================ */

/* Mobile & Tablet Default (2 Columns) */
.st-product-grid-simple .st-product-main-grid {
    display: grid;
    /* Konsisten 2 Kolom untuk Mobile & Tablet (iPad Pro/Mini) */
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}

/* Desktop Only (Fluid) */
@media (min-width: 1025px) {
    .st-product-grid-simple .st-product-main-grid {
        /* Menggunakan auto-fill agar kartu tidak melebar berlebihan di monitor lebar */
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }
}

/* Disable Hover Lift di Mobile untuk UX yang lebih halus saat Scroll */
@media (max-width: 576px) {
    .st-product-grid-simple .st-product-card:hover {
        transform: none !important;
    }
}

/* ============================================================
   VARIANT: STATIC MODE
   ============================================================ */
.st-product-grid-static .st-product-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.st-product-grid-static .st-product-card:hover .product-thumb-area img {
    transform: scale(1.1) !important; 
}

.st-product-grid-static .st-product-card:hover .product-card-title {
    color: var(--primary-color);
}