/**
 * MOBILE CARDS FIX - PRODUCTION
 * Single source of truth for mobile card layout
 * This file MUST be loaded LAST to override all conflicts
 */

/* =============================================
   MOBILE CARDS - 100% WIDTH, 1 PER LINE
   ============================================= */

@media (max-width: 767px) {

    /* Force single column grid */
    .product-grid,
    .promo-grid,
    .grid-3,
    .grid-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 !important;
    }

    /* Cards - Full Width */
    .product-card,
    .promo-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Card Images */
    .product-image,
    .promo-img,
    .product-img {
        width: 100% !important;
        height: 220px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    /* Card Info */
    .product-info,
    .promo-info {
        padding: 16px !important;
        flex: 1 !important;
    }

    /* Product Title */
    .product-title,
    .product-info h3,
    .promo-info h3 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }

    /* Prices */
    .product-price,
    .price {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin: 12px 0 !important;
    }

    /* Buttons - Touch Optimized */
    .product-card .btn,
    .promo-card .btn,
    .product-cta,
    .promo-btn,
    .add-to-cart-btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: auto !important;
    }

    /* Product Actions Container */
    .product-actions,
    .actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 12px !important;
    }
}

/* =============================================
   HERO VIDEO - iOS & Android Compatible
   ============================================= */

.hero-slider {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: #000;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 1 !important;
    z-index: 1;
}

/* iOS Safari specific video fixes */
@supports (-webkit-touch-callout: none) {
    .hero-video {
        -webkit-transform: translate(-50%, -50%) translateZ(0);
        transform: translate(-50%, -50%) translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* Mobile Hero */
@media (max-width: 767px) {
    .hero-slider {
        height: 60vh;
        min-height: 400px;
    }
}

/* =============================================
   DARK MODE - PREMIUM CARDS
   ============================================= */

[data-theme="dark"] .product-card,
[data-theme="dark"] .promo-card {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-premium) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .promo-card:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 15px var(--accent-glow) !important;
}

[data-theme="dark"] .product-image,
[data-theme="dark"] .promo-img,
[data-theme="dark"] .product-img {
    background: #000000 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

[data-theme="dark"] .product-title,
[data-theme="dark"] .product-info h3,
[data-theme="dark"] .promo-info h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .product-category,
[data-theme="dark"] .category {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .product-price,
[data-theme="dark"] .price {
    color: var(--accent-primary) !important;
}

[data-theme="dark"] .btn,
[data-theme="dark"] .product-cta,
[data-theme="dark"] .promo-btn,
[data-theme="dark"] .add-to-cart-btn {
    background: linear-gradient(135deg, #d4af6a 0%, #c5a059 100%) !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(212, 175, 106, 0.3) !important;
}

/* =============================================
   TOUCH INTERACTIONS
   ============================================= */

@media (max-width: 767px) {

    /* Active state feedback */
    .product-card:active,
    .promo-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    /* Button active states */
    .btn:active,
    .product-cta:active,
    .promo-btn:active,
    .add-to-cart-btn:active {
        transform: scale(0.96) !important;
    }
}

/* =============================================
   SECTION SPACING - MOBILE
   ============================================= */

@media (max-width: 767px) {
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .section-header {
        margin-bottom: 1.5rem !important;
    }

    .section-header h2 {
        font-size: 1.75rem !important;
    }
}