/* SwiftServe global contained-page appearance. */
body.ss-page-appearance {
    background: var(--sspa-page-bg, #f3f5f8) !important;
    color: var(--sspa-text, #17202a);
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body.ss-page-appearance main.site-main,
body.ss-page-appearance #primary > main,
body.ss-page-appearance #main.site-main,
body.ss-page-appearance .content-area > main,
body.ss-page-appearance .woocommerce-page main#main,
body.ss-page-appearance .woocommerce-page .site-main {
    box-sizing: border-box !important;
    width: min(var(--sspa-width, 1280px), calc(100% - 36px)) !important;
    max-width: var(--sspa-width, 1280px) !important;
    min-width: 0 !important;
    float: none !important;
    margin: var(--sspa-margin-top, 34px) auto var(--sspa-margin-bottom, 90px) !important;
    padding: var(--sspa-padding, 38px) !important;
    background: var(--sspa-card-bg, #fff) !important;
    border: 1px solid var(--sspa-border, #e7ebf1) !important;
    border-radius: var(--sspa-radius, 30px) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, var(--sspa-shadow-alpha, .16)) !important;
    color: var(--sspa-text, #17202a) !important;
    overflow: visible;
}
/*
 * Compatibility override is intentionally limited to the selected main
 * element. Theme classes such as .container, .col-full and .content-area can
 * also be used by headers, sliders and page builders; resetting those shared
 * wrappers breaks their sizing.
 */
body.ss-page-force-override.ss-page-appearance main.site-main,
body.ss-page-force-override.ss-page-appearance #main.site-main {
    clear: both !important;
    min-width: 0 !important;
}
body.ss-page-appearance main.site-main > article,
body.ss-page-appearance #main.site-main > article,
body.ss-page-appearance .site-main > .woocommerce,
body.ss-page-appearance main.site-main > .woocommerce {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.ss-page-appearance .entry-content,
body.ss-page-appearance .woocommerce { color: var(--sspa-text, #17202a); }
body.ss-page-appearance a:not(.button):not(.ss-pro-action) { color: var(--sspa-link, #ff7a00); }
body.ss-page-appearance main.site-main img,
body.ss-page-appearance main.site-main video,
body.ss-page-appearance main.site-main iframe,
body.ss-page-appearance main.site-main table,
body.ss-page-appearance #main.site-main img,
body.ss-page-appearance #main.site-main video,
body.ss-page-appearance #main.site-main iframe,
body.ss-page-appearance #main.site-main table { max-width: 100%; }
body.ss-page-appearance main.site-main table,
body.ss-page-appearance #main.site-main table { border-color: var(--sspa-border, #e7ebf1); }
body.ss-page-appearance main.site-main input,
body.ss-page-appearance main.site-main select,
body.ss-page-appearance main.site-main textarea,
body.ss-page-appearance main.site-main button,
body.ss-page-appearance #main.site-main input,
body.ss-page-appearance #main.site-main select,
body.ss-page-appearance #main.site-main textarea,
body.ss-page-appearance #main.site-main button {
    box-sizing: border-box;
    max-width: 100%;
}
body.ss-page-hide-title .entry-header > .entry-title,
body.ss-page-hide-title main > .page-header,
body.ss-page-hide-title main > .woocommerce-products-header { display: none !important; }
/* Never double-wrap the plugin's full marketplace renderer. */
body.ss-page-appearance main.site-main:has(> .ss-shop-wrap),
body.ss-page-appearance #main.site-main:has(> .ss-shop-wrap) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
@media (max-width: 900px) {
    body.ss-page-appearance main.site-main,
    body.ss-page-appearance #primary > main,
    body.ss-page-appearance #main.site-main,
    body.ss-page-appearance .content-area > main,
    body.ss-page-appearance .woocommerce-page main#main,
    body.ss-page-appearance .woocommerce-page .site-main {
        width: min(100% - 20px, var(--sspa-width, 1280px)) !important;
        margin-top: 20px !important;
        margin-bottom: 110px !important;
        padding: var(--sspa-mobile-padding, 18px) !important;
        border-radius: min(var(--sspa-radius, 30px), 24px) !important;
    }

    body.ss-page-appearance main.site-main,
    body.ss-page-appearance #main.site-main {
        overflow-wrap: anywhere;
    }

    body.ss-page-appearance main.site-main .woocommerce,
    body.ss-page-appearance #main.site-main .woocommerce {
        width: 100%;
        min-width: 0;
    }

    body.ss-page-appearance main.site-main .woocommerce form .form-row,
    body.ss-page-appearance #main.site-main .woocommerce form .form-row,
    body.ss-page-appearance main.site-main .woocommerce .col2-set .col-1,
    body.ss-page-appearance main.site-main .woocommerce .col2-set .col-2,
    body.ss-page-appearance #main.site-main .woocommerce .col2-set .col-1,
    body.ss-page-appearance #main.site-main .woocommerce .col2-set .col-2 {
        float: none;
        width: 100%;
        min-width: 0;
    }

    body.ss-page-appearance main.site-main .woocommerce table.shop_table,
    body.ss-page-appearance #main.site-main .woocommerce table.shop_table {
        display: block;
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.ss-page-appearance main.site-main .woocommerce ul.products,
    body.ss-page-appearance #main.site-main .woocommerce ul.products {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body.ss-page-appearance main.site-main .woocommerce ul.products::before,
    body.ss-page-appearance main.site-main .woocommerce ul.products::after,
    body.ss-page-appearance #main.site-main .woocommerce ul.products::before,
    body.ss-page-appearance #main.site-main .woocommerce ul.products::after {
        display: none;
    }

    body.ss-page-appearance main.site-main .woocommerce ul.products li.product,
    body.ss-page-appearance #main.site-main .woocommerce ul.products li.product {
        float: none;
        width: auto;
        min-width: 0;
        margin: 0;
    }

    body.ss-page-appearance main.site-main input,
    body.ss-page-appearance main.site-main select,
    body.ss-page-appearance main.site-main textarea,
    body.ss-page-appearance #main.site-main input,
    body.ss-page-appearance #main.site-main select,
    body.ss-page-appearance #main.site-main textarea {
        font-size: 16px !important;
    }

    body.ss-page-appearance main.site-main button,
    body.ss-page-appearance main.site-main .button,
    body.ss-page-appearance #main.site-main button,
    body.ss-page-appearance #main.site-main .button {
        min-height: 44px;
        white-space: normal;
        touch-action: manipulation;
    }
}
@media (max-width: 520px) {
    body.ss-page-appearance main.site-main,
    body.ss-page-appearance #primary > main,
    body.ss-page-appearance #main.site-main,
    body.ss-page-appearance .content-area > main,
    body.ss-page-appearance .woocommerce-page main#main,
    body.ss-page-appearance .woocommerce-page .site-main {
        width: calc(100% - max(16px, env(safe-area-inset-left) + env(safe-area-inset-right))) !important;
        margin-top: 12px !important;
        margin-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
        padding-top: var(--sspa-mobile-padding, 18px) !important;
        padding-right: max(var(--sspa-mobile-padding, 18px), env(safe-area-inset-right)) !important;
        padding-bottom: var(--sspa-mobile-padding, 18px) !important;
        padding-left: max(var(--sspa-mobile-padding, 18px), env(safe-area-inset-left)) !important;
        border-radius: min(var(--sspa-radius, 30px), 20px) !important;
        box-shadow: 0 12px 32px rgba(15, 23, 42, calc(var(--sspa-shadow-alpha, .16) * .75)) !important;
    }

    body.ss-page-appearance main.site-main .woocommerce ul.products,
    body.ss-page-appearance #main.site-main .woocommerce ul.products {
        gap: 10px;
    }

    body.ss-page-appearance main.site-main .woocommerce ul.products li.product .button,
    body.ss-page-appearance #main.site-main .woocommerce ul.products li.product .button {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        padding-inline: 8px;
    }
}

@media (max-width: 360px) {
    body.ss-page-appearance main.site-main .woocommerce ul.products,
    body.ss-page-appearance #main.site-main .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
    body.ss-page-appearance main.site-main,
    body.ss-page-appearance #primary > main,
    body.ss-page-appearance #main.site-main,
    body.ss-page-appearance .content-area > main,
    body.ss-page-appearance .woocommerce-page main#main,
    body.ss-page-appearance .woocommerce-page .site-main {
        margin-top: 10px !important;
        margin-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ss-page-appearance *,
    body.ss-page-appearance *::before,
    body.ss-page-appearance *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}