/* ==========================================================================
   NYZLOCKS PREMIUM MOBILE-FIRST STYLES
   Philosophy: Designed for mobile, enhanced for desktop.
   ========================================================================== */

:root {
    /* Fluid / Responsive Typography */
    /* Hero Title */
    --fs-hero: 34px;
    --lh-hero: 1.1;
    
    /* Section Title */
    --fs-section: 28px;
    --lh-section: 1.2;
    
    /* Body */
    --fs-body: 16px;
    --lh-body: 1.6;

    /* Spacing */
    --space-inline: 20px;
    --space-section: 70px 0;
    --space-gap: 24px;

    /* Touch Targets */
    --touch-min: 48px;
}

@media (min-width: 768px) {
    :root {
        --fs-hero: 52px;
        --fs-section: 36px;
    }
}

@media (min-width: 1024px) {
    :root {
        --fs-hero: 72px;
        --fs-section: 48px;
        --fs-body: 18px;
        --space-section: 100px 0;
    }
}

/* ==========================================================================
   GLOBAL RESETS & HELPERS
   ========================================================================== */

/* Ensure comfortable reading */
body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Premium Button Overrides */
.btn-primary, .btn-secondary, button, .button, input[type="submit"], a.btn-primary {
    min-height: var(--touch-min) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 24px;
    padding-right: 24px;
}

/* On mobile, buttons should be large and centered */
@media (max-width: 767px) {
    .btn-mobile-full {
        width: 100% !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
    }
}

/* Images should never overflow */
img.responsive-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Form Inputs */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select {
    min-height: 52px;
    font-size: 16px; /* Prevents iOS auto-zoom */
    padding: 12px 16px;
    background-color: var(--surface);
    color: var(--black);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

/* Card Styling (Premium) */
.premium-card {
    background: var(--surface);
    color: var(--black);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

/* ── 1. Hero Section ── */
/* Force Image -> Text vertical stacking on mobile */
@media (max-width: 991px) {
    .hero-grid {
        display: flex !important;
        flex-direction: column-reverse !important; /* Visual on top, copy on bottom */
        gap: 32px !important;
        padding: 40px 0 60px !important;
        text-align: center !important;
        min-height: auto !important;
    }
    
    .hero-copy {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center everything */
    }

    .hero-heading {
        font-size: var(--fs-hero) !important;
        line-height: var(--lh-hero) !important;
    }

    .hero-desc {
        font-size: var(--fs-body) !important;
        margin: 16px auto 32px !important;
        max-width: 90% !important;
    }

    /* Large, 48px centered CTA */
    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 16px !important;
        align-items: center !important;
    }

    .hero-actions a {
        width: 100% !important;
        max-width: 320px !important;
        min-height: var(--touch-min) !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    
    .hero-visual {
        width: 100% !important;
        height: 350px !important;
        max-width: 100% !important;
    }
    
    .hero-model-viewer {
        height: 350px !important;
    }
    
    .hero-stats {
        margin-top: 40px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
}

/* ── 2. Product & Collection Grids (Mobile Swipe Carousels) ── */
@media (max-width: 991px) {
    /* Convert grids to horizontal scroll */
    .custom-grid, 
    .hp-product-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        gap: 16px !important;
        padding-bottom: 24px !important;
        padding-inline: 24px !important;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    
    .custom-grid::-webkit-scrollbar,
    .hp-product-grid::-webkit-scrollbar {
        display: none;
    }

    /* Size the cards for horizontal scroll */
    .custom-card, 
    .hp-product-card {
        flex: 0 0 85% !important; /* Shows part of the next card to hint at scroll */
        scroll-snap-align: center;
        min-width: 260px;
    }
    
    /* Ensure the cards look premium */
    .custom-card {
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    }
    
    .hp-product-card {
        border-radius: 12px !important;
        background: #fff;
    }
}

/* ── 5. Features & FAQ ── */
@media (max-width: 991px) {
    .hp-faq-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .hp-faq-question {
        padding: 16px !important;
        min-height: var(--touch-min) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}
/* ── 3. Testimonials & Reviews ── */
@media (max-width: 991px) {
    .hp-reviews-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        gap: 16px !important;
        padding-bottom: 24px !important;
        padding-inline: 24px !important;
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    
    .hp-reviews-grid::-webkit-scrollbar {
        display: none;
    }

    .hp-review-card {
        flex: 0 0 85% !important;
        scroll-snap-align: center;
        min-width: 280px;
        border-radius: 16px !important;
    }
}

/* ── 4. Combo Section ── */
@media (max-width: 991px) {
    .combo-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        padding: 32px 0 !important;
    }
    
    .combo-info-left,
    .combo-visual-right,
    .combo-promo-middle {
        width: 100% !important;
        padding: 0 !important;
        text-align: center;
    }
    
    .combo-checklist {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .combo-headline {
        font-size: 32px !important;
        line-height: 1.1 !important;
    }
}

/* ── 6. Footer ── */
@media (max-width: 991px) {
    .pf-footer {
        text-align: left;
        padding-top: 40px !important;
    }
    
    .pf-top {
        padding-bottom: 32px !important;
    }
    
    .pf-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    
    .pf-col {
        text-align: left;
        align-items: flex-start;
    }

    .pf-col-brand {
        margin-bottom: 8px;
    }
    
    .pf-social {
        justify-content: flex-start !important;
        gap: 16px !important;
        margin-top: 16px !important;
    }
    
    .pf-social-link {
        width: var(--touch-min) !important;
        height: var(--touch-min) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 50%;
    }
    
    .pf-contact-items {
        align-items: flex-start !important;
    }
    
    .pf-badges {
        justify-content: flex-start !important;
        margin-top: 24px !important;
    }
    
    .pf-bottom-inner {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: flex-start !important;
        text-align: left;
        padding: 20px 0 !important;
    }
}

/* ── 7. How It Works (Timeline) GSAP Fix ── */
@media (max-width: 991px) {
    .timeline-container,
    .timeline-panel,
    .feature-block {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;
    }
}