/**
 * ThemeForge Pro — responsive.css
 * Mobile-first responsive overrides + horizontal scroll kill.
 */

/* Global overflow kill */
html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

img,
video,
iframe,
svg {
    max-width: 100% !important;
    height: auto !important;
}

.tfp-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 16px !important;
}

/* ===== TABLET: 1023px ===== */
@media (max-width: 1023px) {
    .tfp-hero__inner,
    .tfp-about__inner {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .tfp-hero__content {
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    .tfp-hero__actions,
    .tfp-hero__trust {
        justify-content: center !important;
    }

    .tfp-hero__blob {
        display: none !important;
    }

    .tfp-pricing__grid {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        margin-inline: auto !important;
    }

    .tfp-plan--featured {
        transform: none !important;
    }

    .tfp-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ===== MOBILE: 767px ===== */
@media (max-width: 767px) {
    .tfp-container {
        padding-inline: 14px !important;
    }

    h1, .tfp-hero__title {
        font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    h2, .tfp-section__title {
        font-size: clamp(1.5rem, 5vw, 1.875rem) !important;
    }

    h3 {
        font-size: clamp(1.25rem, 4vw, 1.5rem) !important;
    }

    .tfp-section,
    .tfp-hero,
    .tfp-cta {
        padding-block: 3rem !important;
    }

    .tfp-hero {
        overflow: hidden !important;
    }

    .tfp-hero__actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .tfp-hero__actions .tfp-btn {
        width: 100% !important;
    }

    .tfp-hero__badge {
        position: static !important;
        margin: 1.5rem auto 0 !important;
        inset: auto !important;
        max-width: 100% !important;
    }

    .tfp-hero__figure {
        aspect-ratio: 4 / 3 !important;
        width: 100% !important;
    }

    .tfp-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .tfp-categories__grid,
    .tfp-features__grid,
    .tfp-services__grid,
    .tfp-portfolio__grid,
    .tfp-testimonials__grid,
    .tfp-pricing__grid,
    .tfp-footer__grid,
    .tfp-marketplace-grid,
    .tfp-products__grid ul.products,
    ul.products {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tfp-marketplace-card,
    ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
    }

    .tfp-marketplace-card__image,
    ul.products li.product > a:first-of-type {
        aspect-ratio: 16 / 9 !important;
    }

    .tfp-marketplace-card__title,
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.9375rem !important;
        min-height: 0 !important;
    }

    .tfp-marketplace-card__price,
    ul.products li.product .price {
        font-size: 1rem !important;
    }

    .tfp-marketplace-card__preview,
    ul.products li.product .button {
        font-size: 0.8125rem !important;
        padding: 8px 12px !important;
    }

    .tfp-marketplace-card__cart {
        width: 36px !important;
        height: 36px !important;
    }

    .tfp-about__figure {
        aspect-ratio: 1 / 1 !important;
    }

    .tfp-about__badge {
        inset-inline-end: 16px !important;
        bottom: 16px !important;
    }

    .tfp-plan {
        padding: 1.5rem 1rem !important;
    }

    .tfp-testimonial {
        padding: 1.25rem !important;
    }

    .tfp-faq__question {
        padding: 1rem !important;
        font-size: 0.9375rem !important;
    }

    .tfp-faq__answer {
        padding: 0 1rem 1rem !important;
    }

    .tfp-cta__actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .tfp-cta__actions .tfp-btn {
        width: 100% !important;
    }

    .tfp-cta__shape {
        display: none !important;
    }

    .tfp-newsletter__inner {
        grid-template-columns: 1fr !important;
    }

    .tfp-newsletter__form {
        flex-direction: column !important;
    }

    .tfp-newsletter__submit {
        width: 100% !important;
    }

    .tfp-footer__bottom-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }
}

/* ===== SMALL MOBILE: 480px ===== */
@media (max-width: 480px) {
    .tfp-container {
        padding-inline: 12px !important;
    }

    h1, .tfp-hero__title {
        font-size: 1.75rem !important;
    }

    h2, .tfp-section__title {
        font-size: 1.375rem !important;
    }

    .tfp-stats__value {
        font-size: 1.5rem !important;
    }

    .tfp-footer__grid {
        grid-template-columns: 1fr !important;
    }
}

/* Safety — no element exceeds viewport */
.tfp-main,
.tfp-front-page,
main,
section,
article,
header,
footer {
    max-width: 100% !important;
    overflow-x: clip !important;
}

.tfp-marketplace-grid > *,
.tfp-products__grid ul.products > *,
ul.products > *,
.tfp-hero__inner > *,
.tfp-about__inner > *,
.tfp-features__grid > *,
.tfp-services__grid > *,
.tfp-categories__grid > *,
.tfp-portfolio__grid > *,
.tfp-testimonials__grid > *,
.tfp-pricing__grid > *,
.tfp-stats__grid > *,
.tfp-footer__grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
}