/* ===========================================================================
   AL BURAQ — Modern product-card design system.
   Loaded after the page styles so it upgrades every product listing
   (category, search, related products) in one place. Pure CSS, no AI.
   =========================================================================== */

.st-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.st-product {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-darker) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1),
                border-color .35s ease, box-shadow .35s ease;
}

.st-product:hover {
    transform: translateY(-8px);
    border-color: rgba(196, 143, 30, 0.45);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(196, 143, 30, 0.25);
}

/* Show the WHOLE product (no cropping) on a clean white stage. */
.st-product-media {
    position: relative;
    height: 240px;
    padding: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
}

.st-product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.st-product:hover .st-product-media img { transform: scale(1.05); }

/* Placeholder icon (no image) */
.st-product-media i { color: #c9a64a !important; }

/* MOQ badge */
.st-min {
    position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
    padding: 0.32rem 0.72rem; font-size: 0.68rem; font-weight: 800;
    letter-spacing: .02em; color: #1a1407;
    background: var(--gold-gradient, linear-gradient(135deg, #e7c768, #c48f1e));
    border-radius: 999px; box-shadow: 0 4px 10px rgba(196, 143, 30, 0.35);
}
[dir="rtl"] .st-min { left: auto; right: 0.85rem; }

/* Quick-view */
.st-quick {
    position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    color: #1f2937; background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0; transform: translateY(-4px) scale(.9); transition: all .3s ease;
}
[dir="rtl"] .st-quick { right: auto; left: 0.85rem; }
.st-product:hover .st-quick { opacity: 1; transform: translateY(0) scale(1); }
.st-quick:hover { background: var(--gold-gradient); color: #1a1407; }

.st-product-body {
    display: flex; flex-direction: column; flex: 1;
    padding: 1.15rem 1.15rem 1.25rem;
}

.st-product-title {
    font-size: 0.96rem; font-weight: 600; line-height: 1.45;
    color: var(--text-primary); margin-bottom: 0.85rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.7em; transition: color .2s ease;
}
.st-product-title:hover { color: var(--gold-light, #e7c768); }

.st-price-row {
    display: flex; align-items: baseline; gap: 0.4rem;
    margin-bottom: 1rem; padding-top: 0.15rem;
}
.st-price {
    font-family: var(--font-heading, inherit);
    font-size: 1.4rem; font-weight: 800;
    color: var(--gold-light, #e7c768); line-height: 1;
}
.st-unit { color: var(--text-muted); font-size: 0.78rem; }

.st-product-actions { display: flex; gap: 0.5rem; margin-top: auto; }
.st-product-actions .btn {
    min-height: 44px; border-radius: 12px; font-weight: 700;
}

@media (max-width: 1024px) { .st-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .st-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .st-product-media { height: 185px; padding: 0.9rem; }
    .st-product-body { padding: 0.9rem; }
    .st-price { font-size: 1.2rem; }
}
@media (max-width: 380px) { .st-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; } }