/**
 * AFS Responsive Guard
 * Conservative site-wide responsive fixes for Themify Ultra / WooCommerce.
 * Does not replace header, builder, WooCommerce or checkout templates.
 */

/* ---------- Global safety ---------- */
html {
    max-width: 100%;
    overflow-x: clip;
}

body.afs-responsive-guard {
    max-width: 100%;
    overflow-x: clip;
}

body.afs-responsive-guard *,
body.afs-responsive-guard *::before,
body.afs-responsive-guard *::after {
    box-sizing: border-box;
}

body.afs-responsive-guard img,
body.afs-responsive-guard video,
body.afs-responsive-guard iframe,
body.afs-responsive-guard svg,
body.afs-responsive-guard canvas {
    max-width: 100%;
}

body.afs-responsive-guard img,
body.afs-responsive-guard video {
    height: auto;
}

body.afs-responsive-guard input,
body.afs-responsive-guard select,
body.afs-responsive-guard textarea,
body.afs-responsive-guard button {
    max-width: 100%;
}

/* Flex/Grid children must be allowed to shrink.
   This fixes a very common cause of "text disappears / layout runs away". */
body.afs-responsive-guard .themify_builder_content,
body.afs-responsive-guard .module_row,
body.afs-responsive-guard .row_inner,
body.afs-responsive-guard .tb-column,
body.afs-responsive-guard .tb-column-inner,
body.afs-responsive-guard .module,
body.afs-responsive-guard .module_column,
body.afs-responsive-guard #pagewrap,
body.afs-responsive-guard #body,
body.afs-responsive-guard #content,
body.afs-responsive-guard #main-nav,
body.afs-responsive-guard #header {
    min-width: 0;
}

/* Prevent custom Builder modules from forcing the page wider than viewport. */
body.afs-responsive-guard .themify_builder_content,
body.afs-responsive-guard .module_row,
body.afs-responsive-guard .row_inner,
body.afs-responsive-guard .module,
body.afs-responsive-guard .tb-column {
    max-width: 100%;
}

body.afs-responsive-guard .module-text,
body.afs-responsive-guard .module-text p,
body.afs-responsive-guard .module-text h1,
body.afs-responsive-guard .module-text h2,
body.afs-responsive-guard .module-text h3,
body.afs-responsive-guard .module-text h4,
body.afs-responsive-guard .module-text h5,
body.afs-responsive-guard .module-text h6,
body.afs-responsive-guard .woocommerce,
body.afs-responsive-guard .woocommerce p,
body.afs-responsive-guard .woocommerce li,
body.afs-responsive-guard .woocommerce td,
body.afs-responsive-guard .woocommerce th {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ---------- 1366px laptops / small desktop ---------- */
@media (max-width: 1366px) and (min-width: 1025px) {
    body.afs-responsive-guard .pagewidth {
        width: auto !important;
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    body.afs-responsive-guard #headerwrap .pagewidth {
        max-width: 1320px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body.afs-responsive-guard #site-logo {
        min-width: 0 !important;
        max-width: 190px !important;
        margin-right: 14px !important;
    }

    body.afs-responsive-guard #site-logo img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
    }

    body.afs-responsive-guard #main-nav {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
        max-width: 100%;
    }

    body.afs-responsive-guard #main-nav > li {
        min-width: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.afs-responsive-guard #main-nav > li > a {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: clamp(12px, 0.93vw, 14px) !important;
        line-height: 1.25 !important;
        white-space: nowrap;
    }

    body.afs-responsive-guard .themify_builder_content .row_inner {
        padding-left: clamp(16px, 2vw, 28px);
        padding-right: clamp(16px, 2vw, 28px);
    }

    body.afs-responsive-guard h1 {
        font-size: clamp(32px, 4vw, 52px);
        line-height: 1.08;
    }

    body.afs-responsive-guard h2 {
        font-size: clamp(26px, 3vw, 40px);
        line-height: 1.12;
    }

    body.afs-responsive-guard h3 {
        font-size: clamp(21px, 2vw, 30px);
        line-height: 1.18;
    }
}

/* ---------- Tablet landscape / compact laptop ---------- */
@media (max-width: 1200px) {
    body.afs-responsive-guard .pagewidth {
        width: auto !important;
        max-width: none !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    body.afs-responsive-guard #headerwrap,
    body.afs-responsive-guard #header {
        max-width: 100%;
    }

    body.afs-responsive-guard .themify_builder_content .row_inner {
        max-width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }

    body.afs-responsive-guard .woocommerce table,
    body.afs-responsive-guard .woocommerce form,
    body.afs-responsive-guard .woocommerce .cart_totals,
    body.afs-responsive-guard .woocommerce-checkout-review-order {
        max-width: 100%;
    }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 1024px) {
    body.afs-responsive-guard .pagewidth {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    body.afs-responsive-guard .themify_builder_content .row_inner {
        padding-left: 18px;
        padding-right: 18px;
    }

    body.afs-responsive-guard .module,
    body.afs-responsive-guard .tb-column,
    body.afs-responsive-guard .module_column {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.afs-responsive-guard .mobile_menu_active #main-nav,
    body.afs-responsive-guard.mobile_menu_active #main-nav,
    body.afs-responsive-guard #main-nav.mobile-menu {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.afs-responsive-guard h1 {
        font-size: clamp(30px, 5vw, 46px);
    }

    body.afs-responsive-guard h2 {
        font-size: clamp(25px, 4vw, 36px);
    }

    body.afs-responsive-guard h3 {
        font-size: clamp(20px, 3vw, 28px);
    }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
    body.afs-responsive-guard .pagewidth {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.afs-responsive-guard .themify_builder_content .row_inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.afs-responsive-guard .woocommerce input.input-text,
    body.afs-responsive-guard .woocommerce textarea,
    body.afs-responsive-guard .woocommerce select,
    body.afs-responsive-guard .woocommerce button.button,
    body.afs-responsive-guard .woocommerce a.button {
        max-width: 100%;
    }

    body.afs-responsive-guard h1 {
        font-size: clamp(28px, 8vw, 40px);
    }

    body.afs-responsive-guard h2 {
        font-size: clamp(24px, 7vw, 34px);
    }

    body.afs-responsive-guard h3 {
        font-size: clamp(20px, 6vw, 28px);
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 420px) {
    body.afs-responsive-guard .pagewidth,
    body.afs-responsive-guard .themify_builder_content .row_inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}