/* ===================================================================
   UNIVERSAL PRODUCTS — Premium Product Card Typography & Layout
   Clean, legible, luxury — Outfit + Space Grotesk design system
   Loads LAST so it wins all specificity battles
   =================================================================== */

/* 1. CARD SHELL */
.product-card {
    background: #1E1710 !important;
    border: 1px solid rgba(197, 155, 81, 0.2) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease !important;
    will-change: transform;
}
.product-card:hover {
    transform: translateY(-6px) scale(1.005) !important;
    border-color: rgba(197,155,81,0.5) !important;
    box-shadow: 0 20px 55px rgba(0,0,0,0.65), 0 0 0 1px rgba(197,155,81,0.35), 0 0 30px rgba(197,155,81,0.12) !important;
}

/* 2. IMAGE AREA */
.product-card .product-media {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1152 / 841 !important;
    height: auto !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #161009 0%, #241C14 100%) !important;
    flex-shrink: 0 !important;
}
.product-card .product-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: none !important;
    display: block !important;
    transform: none !important;
}
.product-card:hover .product-media img { transform: none !important; }
.product-card .product-media::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, transparent 50%, rgba(14,10,6,0.55) 100%) !important;
    pointer-events: none !important;
}

/* 3. CARD BODY */
.product-card .product-body {
    padding: 1.15rem 1.3rem 1.25rem !important;
    background: #1E1710 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
}

/* 4. META ROW */
.product-card .product-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    margin-bottom: 0.55rem !important;
    min-width: 0 !important;
}
.product-card .product-brand {
    font-family: 'Space Grotesk', 'DM Mono', monospace !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #C59B51 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 58% !important;
}

/* 5. PRODUCT TITLE — Outfit 700, highly legible */
.product-card .product-title,
.product-card h3.product-title,
.product-card h3 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem) !important;
    font-weight: 700 !important;
    color: #F5F0E8 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 0.6rem 0 !important;
    text-shadow: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.25s ease !important;
}
.product-card:hover .product-title,
.product-card:hover h3.product-title,
.product-card:hover h3 { color: #E8D4A8 !important; }

/* 6. SPECS ROW */
.product-card .product-specs {
    font-family: 'Space Grotesk', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    color: #C4B79E !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(197,155,81,0.14) !important;
    padding: 0.42rem 0.75rem !important;
    border-radius: 7px !important;
    margin-bottom: 0.6rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    line-height: 1.3 !important;
}
.product-card .product-specs i { color: #C59B51 !important; font-size: 0.78rem !important; flex-shrink: 0 !important; }
.product-card .product-specs span { color: #C4B79E !important; }

/* 7. OFFER TAG */
.product-card .product-offer-tag {
    font-family: 'Space Grotesk', monospace !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #E2B96E !important;
    background: rgba(197,155,81,0.1) !important;
    border: 1px solid rgba(197,155,81,0.25) !important;
    padding: 0.38rem 0.72rem !important;
    border-radius: 7px !important;
    margin-bottom: 0.65rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}
.product-card .product-offer-tag i,
.product-card .product-offer-tag span { color: #E2B96E !important; }

/* 8. FOOTER */
.product-card .product-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
    padding-top: 0.85rem !important;
    border-top: 1px solid rgba(197,155,81,0.12) !important;
    margin-top: auto !important;
    flex-wrap: wrap !important;
}
.product-card .product-price-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.12rem !important;
    min-width: 0 !important;
}

/* SELLING PRICE — Outfit 800, big, white */
.product-card .price-selling {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(1.15rem, 2.5vw, 1.45rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.025em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* MRP CROSSED OUT */
.product-card .price-mrp {
    font-family: 'Space Grotesk', monospace !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    color: #7A6E5F !important;
    text-decoration: line-through !important;
    text-decoration-color: rgba(122,110,95,0.6) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* PRICE ROW */
.product-card .price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.45rem !important;
    flex-wrap: nowrap !important;
    margin-bottom: 0.1rem !important;
}

/* % OFF PILL */
.product-card .price-off-pill {
    font-family: 'Space Grotesk', monospace !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #10B981, #059669) !important;
    padding: 0.18rem 0.5rem !important;
    border-radius: 9999px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    align-self: center !important;
}

/* SAVINGS */
.product-card .price-savings {
    font-family: 'Space Grotesk', monospace !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: #34D399 !important;
    margin-top: 0.1rem !important;
}

/* PRICE ON REQUEST / COMING SOON */
.product-card .price-on-request-pill {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #D9B36E !important;
    background: rgba(197,155,81,0.1) !important;
    border: 1px solid rgba(197,155,81,0.35) !important;
    padding: 0.38rem 0.78rem !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    white-space: nowrap !important;
}

/* 9. WHATSAPP / CTA BUTTON */
.product-card .btn-wa-sm {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #FFFFFF !important;
    background: #132E27 !important;
    border: 1px solid rgba(197,155,81,0.35) !important;
    padding: 0.58rem 1.1rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}
.product-card .btn-wa-sm i { font-size: 0.95rem !important; color: #25D366 !important; flex-shrink: 0 !important; }
.product-card .btn-wa-sm:hover { background: #1C4238 !important; border-color: #C59B51 !important; transform: translateY(-2px) !important; box-shadow: 0 5px 18px rgba(0,0,0,0.4) !important; color: #FFFFFF !important; }
.product-card .btn-wa-disabled { background: rgba(239,68,68,0.08) !important; border-color: rgba(239,68,68,0.3) !important; color: #F87171 !important; cursor: not-allowed !important; opacity: 0.75 !important; pointer-events: none !important; }
.product-card .btn-wa-notify { background: rgba(197,155,81,0.1) !important; border-color: rgba(197,155,81,0.45) !important; color: #D9B36E !important; }
.product-card .btn-wa-notify i { color: #D9B36E !important; }
.product-card .btn-wa-notify:hover { background: rgba(197,155,81,0.2) !important; color: #F7E7CE !important; }

/* 10. BADGES */
.product-card .product-badge {
    font-family: 'Space Grotesk', monospace !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.28rem 0.72rem !important;
    border-radius: 9999px !important;
    backdrop-filter: blur(8px) !important;
    position: absolute !important;
    top: 0.85rem !important;
    left: 0.85rem !important;
    z-index: 4 !important;
    color: #D9B36E !important;
    background: rgba(14,10,6,0.82) !important;
    border: 1px solid rgba(197,155,81,0.45) !important;
}
.product-card .discount-badge {
    font-family: 'Space Grotesk', monospace !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    position: absolute !important;
    top: 0.85rem !important;
    right: 0.85rem !important;
    z-index: 4 !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #10B981, #059669) !important;
    padding: 0.28rem 0.72rem !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 12px rgba(16,185,129,0.4) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}
.product-card .photo-count-badge {
    font-family: 'Space Grotesk', monospace !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    position: absolute !important;
    bottom: 0.85rem !important;
    left: 0.85rem !important;
    z-index: 4 !important;
    color: #FFFFFF !important;
    background: rgba(14,10,6,0.8) !important;
    backdrop-filter: blur(6px) !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
}
.product-card .quick-view-badge {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    position: absolute !important;
    bottom: 0.85rem !important;
    right: 0.85rem !important;
    z-index: 4 !important;
    color: #17120E !important;
    background: rgba(197,155,81,0.95) !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 9999px !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity 0.28s ease, transform 0.28s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    white-space: nowrap !important;
}
.product-card:hover .quick-view-badge { opacity: 1 !important; transform: translateY(0) !important; }

/* 11. STATUS PILL */
.product-card .product-status-pill {
    font-family: 'Space Grotesk', monospace !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 0.22rem 0.6rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* 12. OOS / COMING SOON OVERLAYS */
.product-card.card-out-of-stock .product-body { opacity: 0.75; }
.product-card .img-unavailable { filter: grayscale(60%) opacity(0.65) !important; }
.product-card .card-status-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem; z-index: 3; pointer-events: none;
}
.product-card .overlay-oos { background: rgba(14,10,6,0.55); }
.product-card .overlay-oos i, .product-card .overlay-oos span { font-family: 'Outfit', sans-serif !important; color: #EF4444 !important; font-size: 1.1rem; font-weight: 700; }
.product-card .overlay-coming-soon { background: rgba(14,10,6,0.45); }
.product-card .overlay-coming-soon i, .product-card .overlay-coming-soon span { font-family: 'Outfit', sans-serif !important; color: #F59E0B !important; font-size: 1rem; font-weight: 700; }

/* 13. MOBILE < 480px */
@media (max-width: 479px) {
    .product-card .product-body { padding: 0.9rem 1rem 1rem !important; }
    .product-card .product-title, .product-card h3.product-title, .product-card h3 { font-size: 0.95rem !important; }
    .product-card .product-brand { font-size: 0.6rem !important; }
    .product-card .price-selling { font-size: 1.15rem !important; }
    .product-card .price-mrp { font-size: 0.75rem !important; }
    .product-card .btn-wa-sm { font-size: 0.72rem !important; padding: 0.5rem 0.9rem !important; }
    .product-card .product-specs { font-size: 0.68rem !important; }
}

/* 14. SMALL TABLETS 480px-767px */
@media (min-width: 480px) and (max-width: 767px) {
    .product-card .product-title, .product-card h3.product-title { font-size: 1rem !important; }
    .product-card .price-selling { font-size: 1.25rem !important; }
}

/* 15. PRODUCT GRID */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; align-items: stretch; }
@media (max-width: 479px) { .product-grid { grid-template-columns: 1fr !important; gap: 1.1rem; padding: 0 0.25rem; } }
@media (min-width: 480px) and (max-width: 767px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } }
@media (min-width: 768px) and (max-width: 1023px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }
@media (min-width: 1440px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 1.8rem; } }