/* ===================================================================
   UNIVERSAL PRODUCTS — Status, Badge & Availability Styles
   In Stock · Out of Stock · Coming Soon · New · Special Deal
   =================================================================== */

/* ===================================================================
   1. PRODUCT STATUS PILL (top-right of card meta row)
   =================================================================== */

.product-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-accent);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.22rem 0.6rem;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}

/* In Stock — green */
.status-in-stock {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10B981;
}

/* Out of Stock — red */
.status-out-of-stock {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

/* Coming Soon — amber/gold */
.status-coming-soon {
    background: rgba(197, 155, 81, 0.12);
    border: 1px solid rgba(197, 155, 81, 0.4);
    color: var(--foundry-brass);
    animation: pulsePill 2.5s ease-in-out infinite;
}

@keyframes pulsePill {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}

/* ===================================================================
   2. BADGE VARIANTS (top-left of card image)
   =================================================================== */

.product-badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-accent);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.28rem 0.7rem;
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    line-height: 1;
}

/* New — electric blue */
.badge-new {
    background: rgba(59, 130, 246, 0.85);
    color: #fff;
    border: 1px solid rgba(99, 160, 255, 0.5);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Special Deal — fire orange */
.badge-special-deal {
    background: linear-gradient(135deg, #F97316, #EF4444);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
    animation: fireGlow 2s ease-in-out infinite;
}

@keyframes fireGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4); }
    50%       { box-shadow: 0 4px 22px rgba(249, 115, 22, 0.65); }
}

/* Best Seller — gold */
.badge-best-seller {
    background: var(--brass-gradient);
    color: var(--espresso-dark);
    border: none;
    box-shadow: 0 4px 12px rgba(197, 155, 81, 0.4);
}

/* Luxury Partner — deep purple */
.badge-luxury {
    background: linear-gradient(135deg, #7C3AED, #4F46E5);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

/* Featured — teal */
.badge-featured {
    background: linear-gradient(135deg, #0D9488, #0891B2);
    color: #fff;
    border: none;
}

/* Default fallback */
.badge-default {
    background: rgba(14, 11, 8, 0.75);
    color: var(--foundry-brass);
    border: 1px solid rgba(197, 155, 81, 0.35);
}

/* ===================================================================
   3. STATUS OVERLAY on image (Out of Stock / Coming Soon)
   =================================================================== */

.card-status-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 3;
    border-radius: 0;
}

.card-status-overlay i {
    font-size: 1.6rem;
    opacity: 0.9;
}

/* Out of Stock overlay — red tint */
.overlay-oos {
    background: rgba(14, 11, 8, 0.62);
    color: #FC8181;
    border: 2px solid rgba(239, 68, 68, 0.35);
}

/* Coming Soon overlay — amber tint */
.overlay-coming-soon {
    background: rgba(14, 11, 8, 0.62);
    color: var(--foundry-brass);
    border: 2px solid rgba(197, 155, 81, 0.35);
}

/* ===================================================================
   4. CARD STATES — Out of Stock / Coming Soon card-level
   =================================================================== */

/* Image dimmed when unavailable */
.img-unavailable {
    filter: grayscale(60%) brightness(0.75) !important;
    pointer-events: none;
}

/* Out of Stock card — reduce overall brightness */
.card-out-of-stock {
    opacity: 0.82;
}

.card-out-of-stock:hover {
    transform: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    cursor: not-allowed;
}

/* Coming Soon card — slight shimmer */
.card-coming-soon {
    border-color: rgba(197, 155, 81, 0.25) !important;
}

.card-coming-soon:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(197,155,81,0.25) !important;
}

/* ===================================================================
   5. CTA BUTTON VARIANTS
   =================================================================== */

/* Disabled (Out of Stock) */
.btn-wa-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #FC8181;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 1rem;
    border-radius: 9999px;
    cursor: not-allowed;
    pointer-events: none;
    white-space: nowrap;
}

/* Notify Me (Coming Soon) */
.btn-wa-notify {
    background: rgba(197, 155, 81, 0.12) !important;
    border: 1px solid rgba(197, 155, 81, 0.4) !important;
    color: var(--foundry-brass) !important;
    font-family: var(--font-body) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.55rem 1rem !important;
    border-radius: 9999px !important;
    white-space: nowrap;
    transition: all 0.3s ease !important;
}

.btn-wa-notify:hover {
    background: rgba(197, 155, 81, 0.22) !important;
    box-shadow: 0 4px 16px rgba(197, 155, 81, 0.25) !important;
}

/* ===================================================================
   6. FILTER BAR — show/hide by status
   =================================================================== */

/* Used when a status filter tab is added */
[data-status="Out of Stock"] { order: 10; }
[data-status="Coming Soon"]  { order: 5;  }
[data-status="In Stock"]     { order: 0;  }