/* Mobile-First Optimization for Facebook Traffic (98% Mobile) */
@media screen and (max-width: 768px) {

    /* 1. Typography Optimization */
    body {
        font-size: 16px !important;
        /* Base size for readability */
        line-height: 1.5 !important;
    }

    h1,
    .h1-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    h3 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    p {
        margin-bottom: 15px !important;
    }

    /* 2. Layout & Spacing */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .section {
        padding: 30px 0 !important;
        /* Reduced vertical padding */
    }

    /* 3. Header Fixes */
    .pro-main-header {
        padding: 10px 0 !important;
    }

    .pro-logo {
        font-size: 18px !important;
    }

    .pro-cta-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    .pro-top-bar span {
        font-size: 11px !important;
        /* Fit text on one line if possible */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 4. Hero/Product Gallery */
    .woocommerce-product-gallery {
        margin-bottom: 20px !important;
    }

    .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
    }

    /* 5. Zig-Zag Layout Mobile Stack */
    .feature-row,
    .feature-row.reverse {
        flex-direction: column !important;
        gap: 20px !important;
        margin-bottom: 40px !important;
        text-align: center !important;
    }

    .feature-img img {
        margin: 0 auto !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    /* 6. Comparison Table Scroll */
    .pro-comparison-section {
        padding: 30px 0 !important;
    }

    .vs-table {
        font-size: 13px !important;
    }

    .vs-table th,
    .vs-table td {
        padding: 10px 5px !important;
    }

    .vs-check,
    .vs-cross {
        font-size: 16px !important;
    }

    /* 7. How It Works Steps */
    .steps-container {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .step-item {
        display: flex;
        /* Horizontal flex for steps on mobile looks better */
        align-items: center;
        text-align: left;
        gap: 15px;
        background: #fff;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .step-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    .step-item:after {
        display: none !important;
        /* Hide arrows on mobile */
    }

    /* 8. Form Mobile Optimization */
    #terra-wrapper {
        padding: 20px 15px !important;
        margin: 10px auto !important;
        border-radius: 8px !important;
    }

    #terra-wrapper .price {
        width: 100px !important;
        height: 100px !important;
        right: 10px !important;
        bottom: -10px !important;
    }

    #terra-wrapper .price .al-cost {
        font-size: 20px !important;
    }

    #terra-wrapper .al-form input,
    #terra-wrapper .al-form select {
        height: 48px !important;
        /* Touch target size */
        font-size: 16px !important;
        /* Prevent iOS zoom */
    }

    #terra-wrapper .terra-btn {
        padding: 15px !important;
        font-size: 18px !important;
    }

    /* 9. Specs & Package */
    .pro-card {
        padding: 20px !important;
    }

    .pro-specs-list li {
        font-size: 14px !important;
    }

    .pro-package-grid {
        grid-template-columns: 1fr 1fr !important;
        /* Keep 2 cols, icons are small enough */
        gap: 10px !important;
    }

    .pro-package-item {
        padding: 10px !important;
    }

    .pro-package-item img {
        height: 45px !important;
    }

    /* 10. FAQ Accordions */
    .faq-details summary {
        padding: 15px !important;
        font-size: 15px !important;
    }

    /* 11. General Element Full Width */
    img,
    video,
    iframe {
        max-width: 100% !important;
        height: auto !important;
    }
}