@import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=satoshi@400,500,700&display=swap');

/* APPLE CLEAN THEME - STRICT LIGHT MODE */
:root {
    /* Core Palette - Light */
    --bg-primary: #F5F5F7;
    --bg-card: #FFFFFF;
    --text-primary: #1D1D1F;
    --text-secondary: #86868B;
    --accent-blue: #0071E3;
    --border-light: #D2D2D7;

    /* Functional Colors */
    --success: #34C759;
    --warning: #FF9F0A;
    --error: #FF3B30;

    /* Glassmorphism */
    --glass-nav: rgba(255, 255, 255, 1);
    --glass-border: rgba(0, 0, 0, 0.05);
    --backdrop-blur: blur(20px);

    /* Shadows */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Cards & Containers */
.glass-panel,
.card,
.order-summary-card,
.checkout-tip {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: none !important;
}

/* Navigation */
.header-main {
    background: #FFFFFF !important;
    backdrop-filter: var(--backdrop-blur);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.auth-trigger {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

.auth-trigger span {
    color: var(--text-primary) !important;
}

.header-actions .fa-user {
    color: var(--text-primary) !important;
}

/* Inputs */
input,
select,
textarea,
.form-input {
    background: #FFFFFF !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
}

.pl-with-icon {
    padding-left: 48px !important;
}

.cart-drawer {
    background: #FFFFFF !important;
}

/* FIX MOBILE FILTER OVERLAY Z-INDEX */
#filter-overlay {
    z-index: var(--z-popover);
}

/* FIX MOBILE ADMIN SIDEBAR */
@media (max-width: 768px) {
    .admin-container .sidebar {
        position: fixed !important;
        bottom: 0 !important;
        width: 100% !important;
        z-index: var(--z-modal) !important;
    }
}

/* === EMERGENCY DRAWER FIXES === */
/* 1. Force White Background */
#cart-drawer,
.cart-drawer {
    background-color: #FFFFFF !important;
    z-index: var(--z-toast) !important;
}

/* 2. Shrink Images to Thumbnails */
.cart-item img {
    width: 80px !important;
    height: 80px !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

.cart-item {
    display: flex !important;
    gap: 15px !important;
    align-items: flex-start !important;
}

/* === OVERLAY SAFETY LAYER (OPERATION UNBLOCK) === */
#filter-overlay,
.mobile-menu-overlay,
.cart-overlay,
.qv-overlay,
.search-modal {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    z-index: 900 !important;
    /* Base layer for overlays */
}

/* Restore overlays ONLY when active or open */
#filter-overlay.active,
#filter-overlay.open,
.mobile-menu-overlay.active,
.mobile-menu-overlay.open,
.cart-overlay.active,
.cart-overlay.open,
.search-overlay.active,
.search-overlay.open,
.qv-overlay.active,
.qv-overlay.open,
.search-modal.active,
.search-modal.open {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* Z-Index Priority Ladder */
#filter-overlay.active,
#filter-overlay.open,
.mobile-menu-overlay.active,
.mobile-menu-overlay.open,
.cart-overlay.active,
.cart-overlay.open,
.search-overlay.active,
.search-overlay.open,
.qv-overlay.active,
.qv-overlay.open {
    z-index: 2000 !important;
}

#filter-sidebar.active,
.mobile-menu-drawer.active,
.cart-drawer.active,
.search-drawer.active,
.qv-modal.active {
    z-index: 3000 !important;
}

.search-modal.active {
    z-index: 10000 !important;
    /* Search always topmost */
}

/* Ensure Sidebar is ON TOP of Overlay */
#filter-sidebar {
    z-index: var(--z-base) !important;
}

/* Fix: Cart overlay must cover filter sidebar on desktop */
.cart-overlay.active {
    z-index: var(--z-popover) !important;
}

/* === OPERATION GLASS & FLIP: 3D Card Architecture === */
.product-card {
    perspective: 1000px;
    background: transparent !important;
    height: 420px;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

.product-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.card-front {
    background: var(--bg-card, #fff);
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.card-back {
    background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

.card-back .ai-desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-height: 200px;
    overflow: hidden;
}

.card-back .btn-details {
    background: linear-gradient(135deg, #d4af37 0%, #b8942e 100%);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-back .btn-details:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

/* --- OPERATION PREMIUM UI --- */

/* 1. Global Typography Upgrade */
body {
    font-family: 'Satoshi', sans-serif !important;
}

h1,
h2,
h3,
h4,
.logo-text {
    font-family: 'Clash Display', sans-serif !important;
    letter-spacing: 0.5px;
}

/* 2. The Premium Card (Edge-to-Edge) */
.product-card {
    border: none !important;
    background: rgba(255, 255, 255, 0.7) !important;
    /* Glass */
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05) !important;
    /* Soft Shadow */
    border-radius: 20px !important;
    /* Softer Corners */
    overflow: hidden;
    /* Ensures image stays inside */
}

/* Make Image Edge-to-Edge */
.card-front .image-container {
    width: 100%;
    height: 60% !important;
    /* Dedicate 60% to image */
    padding: 1.5rem !important;
    /* Internal breathing room */
    background: linear-gradient(180deg, #fff 0%, #f5f5f7 100%);
}

.card-info {
    padding: 1.2rem !important;
}

.card-info h3 {
    font-size: 1.1rem !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.price {
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 700 !important;
    color: transparent !important;
    background: linear-gradient(135deg, #b8942e 0%, #e0c45c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 1.25rem !important;
}

/* 3. The "Fleshy" Button (Gradient & Glow) */
.btn-primary,
.btn-apple,
#add-product-btn {
    background: linear-gradient(135deg, #111 0%, #333 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    /* Pill Shape */
    padding: 12px 30px !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3) !important;
    /* Depth */
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-primary:hover {
    transform: scale(1.05) !important;
}

/* Gold Accent Button */
.btn-accent,
.btn-details {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important;
    color: #111 !important;
    box-shadow: 0 10px 20px -5px rgba(255, 215, 0, 0.4) !important;
}


/* --- OPERATION PREMIUM UNIFORMITY (v2) --- */

/* 1. IMPORT PREMIUM FONTS */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=satoshi@400,500,700&display=swap');

/* 2. THE CARD CONTAINER (Glass & Uniformity) */
.product-card {
    background: rgba(255, 255, 255, 0.85) !important;
    /* Cleaner white */
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    height: 460px !important;
    /* STRICT FIXED HEIGHT */
    overflow: hidden;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
}

.product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    /* Gold hint */
}

/* 3. THE IMAGE STUDIO (Framed & Centered) */
.card-front .image-container {
    height: 55% !important;
    /* Top 55% is image */
    width: 100%;
    background: radial-gradient(circle at center, #ffffff 0%, #f1f2f4 100%) !important;
    /* Studio Lighting BG */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem !important;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.card-front img {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15));
    /* Premium Device Shadow */
    transition: transform 0.5s ease;
}

.product-card:hover img {
    transform: scale(1.08);
}

/* 4. THE CONTENT ZONE (Clean & Aligned) */
.card-front .card-info {
    padding: 1.5rem !important;
    height: 45% !important;
    display: flex;
    flex-direction: column;

    @media (max-width: 768px) {
        .card-front .card-info {
            padding: 1rem !important;
            opacity: 1 !important;
            /* Always visible on mobile */
        }

        .product-card .btn-add-cart,
        .product-card .btn-details {
            opacity: 1 !important;
            /* Always show buttons */
            transform: translateY(0) !important;
        }
    }

    /* Pushes Price to bottom */
    background: #fff !important;
}

/* 5. TEXT CLAMPING (The "No-Mess" Rule) */
.card-info h3 {
    font-family: 'Clash Display', sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    letter-spacing: 0.02em;

    /* Limit to exactly 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem !important;
    height: 3em;
    /* Enforce visual stability */
}

/* 6. PRICE & ACTION */
.price {
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.35rem !important;
    color: #111 !important;
    margin-top: auto !important;
    /* Force to bottom */
}

/* --- OPERATION SOFT MERGE (Reference Design - CSS Only) --- */

/* 1. Global Background (Soft Blue-Grey for Contrast) */
body {
    background-color: #F8FAFC !important;
}

/* 2. The Card Container (Deep Curves) */
.product-card {
    border: none !important;
    background: transparent !important;
    /* Let inner parts handle color */
    border-radius: 32px !important;
    /* The "Sophie" Curve */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08) !important;
    height: 480px !important;
}

/* 3. The Front Face (Two-Tone Look) */
.card-front {
    border-radius: 32px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
    /* Clips the inner backgrounds */
}

/* 4. Top Half: The "Studio" Background */
.card-front .image-container {
    height: 55% !important;
    background: #F1F5F9 !important;
    /* Soft Grey-Blue (Like Reference) */
    border-bottom: none !important;
    border-radius: 32px 32px 0 0 !important;
    /* Round Top Corners Only */
    padding: 2rem !important;
}

.card-front img {
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.12));
    /* Deep Device Shadow */
    transform: scale(0.95);
    transition: transform 0.5s ease;
}

.product-card:hover img {
    transform: scale(1.05) rotate(-2deg);
}

/* 5. Bottom Half: Clean White Info */
.card-front .card-info {
    height: 45% !important;
    background: #FFFFFF !important;
    padding: 1.8rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Center Text like Reference */
    text-align: center;
}

/* 6. Typography (Clash Display) */
.card-info h3 {
    font-family: 'Clash Display', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3;
}

/* 7. The "Verified" Badge (CSS Trick - No HTML Change) */
.card-info h3::after {
    content: "✓";
    display: inline-block;
    margin-left: 8px;
    width: 18px;
    height: 18px;
    background: #22C55E;
    /* Green Badge */
    color: white;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
}

/* 8. Price Pill (Mimics the "Follow" button) */
.price {
    display: inline-block;
    margin-top: 1rem !important;
    background: #F8FAFC;
    color: #0F172A !important;
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 700 !important;
    padding: 10px 24px;
    border-radius: 50px;
    /* Pill Shape */
    font-size: 1.1rem !important;
    border: 1px solid #E2E8F0;
}

/* --- OPERATION ULTRA RETAIL (Reference Design) --- */

/* 1. Card Container (Clean & Crisp) */
.product-card {
    border-radius: 20px !important;
    /* Tighter corners */
    background: #FFFFFF !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    height: 480px !important;
}

/* 2. Image Area (Studio Background) */
.card-front .image-container {
    height: 55% !important;
    /* Professional gradient */
    background: radial-gradient(circle at center, #FFFFFF 40%, #F3F4F6 100%) !important;
    border-radius: 20px 20px 0 0 !important;
    position: relative;
    padding: 1.5rem !important;
}

/* 3. The "HOT SALE" Badge (Red Pill) */
.card-front .image-container::after {
    content: "HOT SALE";
    position: absolute;
    top: 15px;
    right: 15px;
    background: #D32F2F;
    /* Reference Red */
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(211, 47, 47, 0.3);
    z-index: 10;
}

/* 4. Content Area (Left Aligned) */
.card-front .card-info {
    height: 45% !important;
    padding: 1.5rem !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    /* LEFT ALIGNMENT */
    justify-content: space-between;
    text-align: left !important;
}

/* 5. Typography (Bold & Industrial) */
.card-info h3 {
    font-family: 'Satoshi', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

/* REMOVE the previous Green Checkmark */
.card-info h3::after {
    content: none !important;
}

/* 6. Price (Large & Bold - Reference Style) */
.price {
    background: transparent !important;
    /* Remove Pill Background */
    border: none !important;
    padding: 0 !important;
    margin-top: auto !important;

    font-family: 'Satoshi', sans-serif !important;
    font-size: 1.8rem !important;
    /* BIG PRICE */
    font-weight: 800 !important;
    color: #000000 !important;
    letter-spacing: -0.5px;
}

.price::before {
    content: "From ";
    font-size: 0.8rem;
    color: #888;
    font-weight: 500;
    display: block;
    margin-bottom: -5px;
}

/* 7. Hover Interaction */
.product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* 8. MOBILE REFINEMENTS (Safe Scaling) */
@media (max-width: 768px) {
    .card-front .card-info {
        padding: 1rem !important;
    }

    .card-info h3 {
        font-size: 1.1rem !important;
        /* Scaled down from 1.3rem */
        line-height: 1.2;
    }

    .price {
        font-size: 1.4rem !important;
        /* Scaled down from 1.8rem */
        letter-spacing: -0.2px;
    }

    .price::before {
        font-size: 0.7rem;
        /* Tiny secondary text */
        margin-bottom: -2px;
    }

    .meta-tag {
        font-size: 0.65rem !important;
        margin-bottom: 2px !important;
    }
}