/*
 * MARBLELIFE Sitewide Style & Mobile Fixes
 * v1.2.0
 * Performance-first: CSS only, except for a tiny footer script that disables
 * the legacy cloned sticky header on mobile.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: clip;
    }

    /* The screenshot shows the main boxed site wrapper ending early on the
       right. Force the theme's primary wrappers to use the full viewport. */
    #full-header,
    #full-header > #header.boxed,
    #header.boxed,
    #wrapper.boxed,
    #wrapper,
    #wrapper > #container,
    #wrapper > #container.boxed,
    #wrapper > #container.products-loop,
    #container.boxed,
    #footer,
    #footer > .boxed {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
    }

    /* Keep normal content columns from retaining desktop widths. */
    #content,
    #content.main-side,
    .main-side,
    .main-sidebar,
    #sidebar,
    .site-main,
    .woocommerce,
    .woocommerce-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        clear: both;
    }

    /* SiteOrigin calculates negative margins for stretched rows. Inside the
       old boxed theme those calculations can leave the mobile canvas narrow
       or create horizontal overflow. On phones, the parent is already full
       width, so keep stretched rows inside that parent. */
    .siteorigin-panels-stretch,
    .panel-row-style.siteorigin-panels-stretch,
    [data-stretch-type="full"],
    [data-stretch-type="full-stretched"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .panel-layout,
    .panel-grid,
    .panel-grid-cell,
    .panel-row-style,
    .so-panel,
    .panel-widget-style {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* The legacy theme clones #float-header and positions the clone using
       desktop measurements. The companion PHP footer fix also stops its
       10ms timer; this CSS ensures no clone can flash on mobile. */
    #float-header.cloned,
    .cloned#float-header {
        display: none !important;
    }

    #float-header.original,
    #float-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #mega-menu-wrap-corp-header-menu,
    #mega-menu-wrap-new-header-menu,
    #mega-menu-wrap-header-menu,
    .mega-menu-wrap,
    .mega-menu-toggle,
    .max-mega-menu {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Top utility menu and long text should wrap instead of widening the page. */
    #full-header .menu-top-menu-container,
    #full-header .menu-top-menu-container ul,
    #full-header .menu-top-menu-container li,
    #full-header .menu-top-menu-container a,
    #footer,
    #footer p,
    #footer a,
    .product_meta,
    .woocommerce-product-details__short-description {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    #full-header .menu-top-menu-container ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Forms and embedded content are frequent overflow sources on this site. */
    form,
    fieldset,
    table,
    iframe,
    embed,
    object,
    input,
    select,
    textarea,
    .wp_autosearch_form_wrapper,
    .woocommerce-product-gallery,
    .woocommerce-product-gallery__wrapper {
        max-width: 100% !important;
    }

    table {
        width: 100%;
    }

    /* Footer SiteOrigin rows should never determine viewport width. */
    #footer .panel-layout,
    #footer .panel-grid,
    #footer .panel-row-style,
    #footer .panel-grid-cell,
    #footer .so-panel,
    #footer .textwidget {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Final safeguard only after fixing the actual wide elements above. */
    #page,
    #wrapper,
    #container,
    #full-header,
    #footer {
        overflow-x: clip;
    }
}


/* ================================================================
 * v1.2.0 MOBILE HEADER REFINEMENT
 * These rules are intentionally mobile-only and do not alter desktop.
 * ================================================================ */
@media (max-width: 900px) {
    /* Reduce the oversized utility-link area while preserving every link. */
    #full-header .menu-top-menu-container {
        padding: 6px 12px 8px !important;
    }

    #full-header .menu-top-menu-container ul {
        align-items: center;
        gap: 2px 0;
        margin: 0 !important;
        padding: 0 !important;
    }

    #full-header .menu-top-menu-container li {
        line-height: 1.25 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #full-header .menu-top-menu-container a {
        display: block;
        font-size: 12px !important;
        line-height: 1.3 !important;
        padding: 5px 7px !important;
    }

    /* Keep the brand strong without letting the logo consume most of the
       first screen on a phone. */
    #full-header img[alt="Marblelife Products Logo"] {
        display: block !important;
        width: min(82vw, 350px) !important;
        max-width: 82vw !important;
        height: auto !important;
        margin: 10px auto 8px !important;
    }

    /* Compact the telephone/consultation block shown directly beneath the
       logo. The icon and number remain large enough to tap and read. */
    #full-header .consult_us {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 5px 14px 10px !important;
    }

    #full-header .consult_us > a,
    #full-header .consult_us h3 {
        float: none !important;
        margin: 0 !important;
    }

    #full-header .consult_us h3 {
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    #full-header .consult_us h3 > span {
        font-size: 13px !important;
        line-height: 1.15 !important;
    }

    #full-header .consult_us .custom_number {
        display: inline-block !important;
        font-size: 25px !important;
        line-height: 1.05 !important;
        margin-top: 2px !important;
        white-space: nowrap;
    }

    #full-header .consult_us .ml_icon,
    #full-header .consult_us .ml_icon_consult {
        transform: scale(.82);
        transform-origin: center center;
    }

    /* Reduce the vertical footprint of the two Max Mega Menu mobile bars. */
    #mega-menu-wrap-corp-header-menu .mega-menu-toggle,
    #mega-menu-wrap-new-header-menu .mega-menu-toggle,
    #mega-menu-wrap-header-menu .mega-menu-toggle {
        min-height: 48px !important;
        height: 48px !important;
    }

    #mega-menu-wrap-corp-header-menu .mega-menu-toggle .mega-toggle-blocks-center,
    #mega-menu-wrap-new-header-menu .mega-menu-toggle .mega-toggle-blocks-center,
    #mega-menu-wrap-header-menu .mega-menu-toggle .mega-toggle-blocks-center {
        height: 48px !important;
        align-items: center !important;
    }

    #mega-menu-wrap-corp-header-menu .mega-toggle-label,
    #mega-menu-wrap-new-header-menu .mega-toggle-label,
    #mega-menu-wrap-header-menu .mega-toggle-label {
        font-size: 15px !important;
        line-height: 1.15 !important;
    }

    /* Reduce accidental whitespace between header SiteOrigin rows. */
    #full-header .panel-grid,
    #full-header .panel-row-style,
    #full-header .panel-grid-cell,
    #full-header .so-panel,
    #full-header .panel-widget-style {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ============================================================
     * COMPACT BRAVOWP FLOATING CART
     * The plugin prints most styles inline, therefore !important is
     * deliberate here so mobile presentation can safely override them.
     * ============================================================ */
    #bravowp-woo-floatingcart {
        left: 8px !important;
        right: 8px !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        border-radius: 9px !important;
        overflow: hidden !important;
        box-shadow: 0 6px 22px rgba(0,0,0,.22) !important;
    }

    #bravowp-woo-floatingcart-titlepane {
        min-height: 42px !important;
        padding: 8px 42px 8px 12px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    #bravowp-woo-floatingcart-titlepane > div {
        display: inline-block !important;
        margin: 0 0 0 8px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        vertical-align: baseline !important;
    }

    #bravowp-woo-floatingcart-titlepane-upicon,
    #bravowp-woo-floatingcart-titlepane-downicon {
        width: 14px !important;
        height: 14px !important;
        right: 12px !important;
        top: 50% !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
    }

    #bravowp-woo-floatingcart-bodypane {
        max-width: 100% !important;
        max-height: min(62vh, 480px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    #bravowp-woo-floatingcart-bodypane > div {
        max-width: 100% !important;
    }

    #bravowp-woo-floatingcart-bodypane a {
        box-sizing: border-box !important;
    }

    #bravowp-woo-floatingcart-footerpane {
        height: 4px !important;
    }

    /* Leave room at the bottom of mobile pages so the compact cart does not
       cover the final line of content or footer controls. */
    body {
        padding-bottom: 58px !important;
    }
}

@media (max-width: 480px) {
    #full-header .menu-top-menu-container a {
        font-size: 11px !important;
        padding: 4px 5px !important;
    }

    #full-header img[alt="Marblelife Products Logo"] {
        width: min(84vw, 320px) !important;
        max-width: 84vw !important;
    }

    #full-header .consult_us .custom_number {
        font-size: 22px !important;
    }

    #mega-menu-wrap-corp-header-menu .mega-toggle-label,
    #mega-menu-wrap-new-header-menu .mega-toggle-label,
    #mega-menu-wrap-header-menu .mega-toggle-label {
        font-size: 14px !important;
    }

    #bravowp-woo-floatingcart-titlepane {
        font-size: 12px !important;
        padding-left: 10px !important;
    }

    #bravowp-woo-floatingcart-titlepane > div {
        margin-left: 6px !important;
        font-size: 11px !important;
    }
}

/* ================================================================
 * v1.2.0 SITEWIDE VISUAL POLISH
 * Product listings, content rhythm, cart/checkout and footer.
 * CSS-only so the confirmed performance improvements are preserved.
 * ================================================================ */

:root {
    --ml-site-blue: #087dc1;
    --ml-site-blue-dark: #075f94;
    --ml-site-green: #2f641f;
    --ml-site-green-bright: #76b82a;
    --ml-site-ink: #25302a;
    --ml-site-muted: #68736d;
    --ml-site-line: #dfe5e1;
    --ml-site-soft: #f6f8f7;
    --ml-site-card: #ffffff;
    --ml-site-radius: 8px;
    --ml-site-shadow: 0 3px 14px rgba(28, 42, 34, .07);
}

/* ---------- Global content rhythm ---------- */
#wrapper {
    color: var(--ml-site-ink);
}

#wrapper h1,
#wrapper h2,
#wrapper h3,
#wrapper h4 {
    color: var(--ml-site-ink);
    line-height: 1.2;
}

#wrapper p,
#wrapper li,
#wrapper td,
#wrapper th,
#wrapper label {
    line-height: 1.55;
}

#wrapper p {
    margin-top: 0;
    margin-bottom: 1em;
}

#wrapper input[type="text"],
#wrapper input[type="email"],
#wrapper input[type="tel"],
#wrapper input[type="password"],
#wrapper input[type="number"],
#wrapper select,
#wrapper textarea {
    border: 1px solid #cfd8d2;
    border-radius: 5px;
    background: #fff;
    min-height: 42px;
    padding: 9px 11px;
    box-shadow: none;
}

#wrapper textarea {
    min-height: 120px;
}

#wrapper .button,
#wrapper button.button,
#wrapper input.button,
#wrapper .woocommerce a.button,
#wrapper .woocommerce button.button,
#wrapper .woocommerce input.button {
    border: 0;
    border-radius: 5px;
    background: var(--ml-site-blue);
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    min-height: 42px;
    padding: 11px 16px;
    text-decoration: none;
    transition: background-color .16s ease, box-shadow .16s ease;
}

#wrapper .button:hover,
#wrapper button.button:hover,
#wrapper input.button:hover,
#wrapper .woocommerce a.button:hover,
#wrapper .woocommerce button.button:hover,
#wrapper .woocommerce input.button:hover {
    background: var(--ml-site-blue-dark);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ---------- Product result/card grids ---------- */
.products-loop > #content,
.up-sells .products-loop > #content,
.related .products-loop > #content,
.cross-sells .products-loop > #content {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.products-loop > #content > .clear,
.up-sells .products-loop > #content > .clear,
.related .products-loop > #content > .clear,
.cross-sells .products-loop > #content > .clear {
    display: none !important;
}

.products-loop > #content > .product,
.up-sells .products-loop > #content > .product,
.related .products-loop > #content > .product,
.cross-sells .products-loop > #content > .product {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100%;
    margin: 0 !important;
    padding: 14px !important;
    background: var(--ml-site-card);
    border: 1px solid var(--ml-site-line);
    border-radius: var(--ml-site-radius);
    box-shadow: var(--ml-site-shadow);
    display: flex;
    flex-direction: column;
}

.products-loop > #content > .product .img-con,
.up-sells .products-loop > #content > .product .img-con,
.related .products-loop > #content > .product .img-con,
.cross-sells .products-loop > #content > .product .img-con {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    margin: 0 0 10px;
    padding: 8px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.products-loop > #content > .product .img-con img,
.up-sells .products-loop > #content > .product .img-con img,
.related .products-loop > #content > .product .img-con img,
.cross-sells .products-loop > #content > .product .img-con img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    max-height: 190px !important;
    margin: 0 auto !important;
    object-fit: contain;
}

.products-loop > #content > .product .entry-title,
.up-sells .products-loop > #content > .product .entry-title,
.related .products-loop > #content > .product .entry-title,
.cross-sells .products-loop > #content > .product .entry-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin: 3px 0 7px !important;
}

.products-loop > #content > .product .entry-title a,
.up-sells .products-loop > #content > .product .entry-title a,
.related .products-loop > #content > .product .entry-title a,
.cross-sells .products-loop > #content > .product .entry-title a {
    color: var(--ml-site-ink);
    text-decoration: none;
}

.products-loop > #content > .product .stars,
.up-sells .products-loop > #content > .product .stars,
.related .products-loop > #content > .product .stars,
.cross-sells .products-loop > #content > .product .stars {
    color: #e8a81f;
    font-size: 14px;
    line-height: 1;
    min-height: 16px;
    margin: 1px 0 7px;
}

.products-loop > #content > .product .price,
.up-sells .products-loop > #content > .product .price,
.related .products-loop > #content > .product .price,
.cross-sells .products-loop > #content > .product .price {
    color: var(--ml-site-green);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px;
}

.products-loop > #content > .product form.cart,
.up-sells .products-loop > #content > .product form.cart,
.related .products-loop > #content > .product form.cart,
.cross-sells .products-loop > #content > .product form.cart {
    margin-top: auto;
}

.products-loop > #content > .product .variations,
.up-sells .products-loop > #content > .product .variations,
.related .products-loop > #content > .product .variations,
.cross-sells .products-loop > #content > .product .variations {
    width: 100%;
    margin: 0 0 8px;
}

.products-loop > #content > .product .variations td,
.up-sells .products-loop > #content > .product .variations td,
.related .products-loop > #content > .product .variations td,
.cross-sells .products-loop > #content > .product .variations td {
    display: block;
    width: 100%;
    padding: 0 0 5px;
}

.products-loop > #content > .product select,
.up-sells .products-loop > #content > .product select,
.related .products-loop > #content > .product select,
.cross-sells .products-loop > #content > .product select,
.products-loop > #content > .product .quantity-dropdown,
.up-sells .products-loop > #content > .product .quantity-dropdown,
.related .products-loop > #content > .product .quantity-dropdown,
.cross-sells .products-loop > #content > .product .quantity-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px;
    padding: 7px 9px !important;
}

.products-loop > #content > .product .cart-btn,
.up-sells .products-loop > #content > .product .cart-btn,
.related .products-loop > #content > .product .cart-btn,
.cross-sells .products-loop > #content > .product .cart-btn {
    margin-top: 8px;
}

.products-loop > #content > .product .cart-btn .button,
.up-sells .products-loop > #content > .product .cart-btn .button,
.related .products-loop > #content > .product .cart-btn .button,
.cross-sells .products-loop > #content > .product .cart-btn .button {
    display: block;
    width: 100%;
    text-align: center;
}

/* ---------- Cart and checkout ---------- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table,
.woocommerce-checkout-review-order-table {
    border: 1px solid var(--ml-site-line) !important;
    border-radius: var(--ml-site-radius) !important;
    background: #fff;
    box-shadow: var(--ml-site-shadow);
    overflow: hidden;
}

.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th,
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td {
    padding: 13px 12px !important;
    border-color: #edf0ee !important;
    vertical-align: middle;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
    background: #fff;
    border: 1px solid var(--ml-site-line);
    border-radius: var(--ml-site-radius);
    box-shadow: var(--ml-site-shadow);
    padding: 18px;
}

.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
    margin: 0 0 14px;
    font-size: 21px;
}

.woocommerce-cart .coupon,
.woocommerce-checkout .form-row {
    max-width: 100%;
}

.woocommerce-cart .coupon input.input-text {
    min-width: 180px;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
    background: #fff;
    border: 1px solid var(--ml-site-line);
    border-radius: var(--ml-site-radius);
    box-shadow: var(--ml-site-shadow);
    padding: 18px;
    margin-bottom: 18px;
}

.woocommerce-checkout .form-row label {
    font-weight: 700;
    margin-bottom: 5px;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection {
    width: 100%;
    min-height: 44px;
}

.woocommerce #payment,
.woocommerce-checkout #payment {
    background: #f7f9f8;
    border-radius: 6px;
}

/* ---------- Footer modernization ---------- */
#footer {
    background: #f4f7f9;
    color: #33413a;
}

#footer > .boxed {
    max-width: 100% !important;
}

/* Newsletter / truck row. The theme currently uses a negative margin on the
   truck widget; neutralize it so the row has predictable spacing. */
#footer #pg-w685f19292c88e-0 > .panel-row-style,
#footer #pg-w685f19292c88e-0.panel-no-style {
    background: var(--ml-site-blue);
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px clamp(18px, 4vw, 48px) !important;
    border-radius: 0 !important;
}

#footer #panel-w685f19292c88e-0-1-0,
#footer #panel-w685f19292c88e-0-1-0 > .panel-widget-style {
    margin: 0 !important;
    padding: 0 !important;
}

#footer #pg-w685f19292c88e-0 h3,
#footer #pg-w685f19292c88e-0 p {
    color: #fff !important;
}

#footer #pg-w685f19292c88e-0 h3 {
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.15;
    margin: 0 0 6px;
}

#footer #pg-w685f19292c88e-0 p {
    margin: 0 0 10px;
}

#footer #gform_wrapper_2,
#footer #gform_2 {
    margin: 0 !important;
}

#footer #gform_2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

#footer #gform_2 .gform-body,
#footer #gform_2 .gform_footer {
    margin: 0 !important;
    padding: 0 !important;
}

#footer #gform_2 input[type="email"] {
    width: 100% !important;
    min-height: 44px;
    border: 0;
    border-radius: 5px;
    padding: 10px 12px;
}

#footer #gform_2 .gform_button {
    min-height: 44px !important;
    margin: 0 !important;
    background: #fff !important;
    color: var(--ml-site-blue-dark) !important;
    border-radius: 5px !important;
    padding: 10px 18px !important;
    font-weight: 800 !important;
}

#footer #pgc-w685f19292c88e-0-1 img {
    display: block;
    width: min(100%, 460px) !important;
    margin: 0 auto !important;
}

/* Main footer navigation row. */
#footer #pg-w685f19292c88e-1 > .panel-row-style,
#footer #pg-w685f19292c88e-1.panel-no-style {
    max-width: 1180px;
    margin: 0 auto !important;
    padding: 34px 20px 26px !important;
    gap: 24px;
    align-items: flex-start;
}

#footer #pg-w685f19292c88e-1 .widget-title {
    color: #1d2a23;
    font-size: 15px;
    line-height: 1.25;
    margin: 0 0 10px;
}

#footer #pg-w685f19292c88e-1 .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer #pg-w685f19292c88e-1 .menu li {
    margin: 0 0 6px;
    padding: 0;
    line-height: 1.35;
}

#footer #pg-w685f19292c88e-1 .menu a {
    color: #526159;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
}

#footer #pg-w685f19292c88e-1 .menu a:hover,
#footer #pg-w685f19292c88e-1 .menu a:focus {
    color: var(--ml-site-blue);
    text-decoration: underline;
}

#footer #pg-w685f19292c88e-1 p {
    color: #59675f;
    font-size: 12px;
    line-height: 1.55;
}

#footer #pg-w685f19292c88e-2,
#footer #pg-w685f19292c88e-3 {
    border-top: 1px solid #dde4e0;
}

#footer #pg-w685f19292c88e-2 .panel-row-style,
#footer #pg-w685f19292c88e-3 .panel-row-style {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 12px 20px !important;
}

#footer #pg-w685f19292c88e-2 p,
#footer #pg-w685f19292c88e-3 p {
    color: #68746e;
    font-size: 11px;
    line-height: 1.45;
    margin: 0 !important;
    text-align: center;
}

/* ---------- Responsive polish ---------- */
@media (max-width: 1000px) {
    .products-loop > #content,
    .up-sells .products-loop > #content,
    .related .products-loop > #content,
    .cross-sells .products-loop > #content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #wrapper {
        font-size: 15px;
    }

    #wrapper > #container,
    #container.boxed,
    #container.products-loop {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #c-title,
    #c-title.siteorigin-panels-stretch {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #footer #pg-w685f19292c88e-0 > .panel-row-style,
    #footer #pg-w685f19292c88e-0.panel-no-style {
        flex-direction: column !important;
        gap: 18px;
        padding: 24px 18px !important;
    }

    #footer #pgc-w685f19292c88e-0-0,
    #footer #pgc-w685f19292c88e-0-1 {
        width: 100% !important;
        margin: 0 !important;
    }

    #footer #pg-w685f19292c88e-1 > .panel-row-style,
    #footer #pg-w685f19292c88e-1.panel-no-style {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px 18px !important;
        padding: 28px 18px 20px !important;
    }

    #footer #pg-w685f19292c88e-1 .panel-grid-cell {
        width: 100% !important;
        margin: 0 !important;
    }

    .woocommerce-cart .cart-collaterals .cart_totals,
    .woocommerce-checkout #order_review,
    .woocommerce-checkout .woocommerce-checkout-review-order,
    .woocommerce-checkout .woocommerce-billing-fields,
    .woocommerce-checkout .woocommerce-shipping-fields,
    .woocommerce-checkout .woocommerce-additional-fields {
        padding: 14px;
    }
}

@media (max-width: 640px) {
    .products-loop > #content,
    .up-sells .products-loop > #content,
    .related .products-loop > #content,
    .cross-sells .products-loop > #content {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .products-loop > #content > .product,
    .up-sells .products-loop > #content > .product,
    .related .products-loop > #content > .product,
    .cross-sells .products-loop > #content > .product {
        padding: 12px !important;
    }

    .products-loop > #content > .product .img-con,
    .up-sells .products-loop > #content > .product .img-con,
    .related .products-loop > #content > .product .img-con,
    .cross-sells .products-loop > #content > .product .img-con {
        min-height: 170px;
    }

    #footer #gform_2 {
        grid-template-columns: 1fr;
    }

    #footer #gform_2 .gform_button {
        width: 100% !important;
    }

    #footer #pg-w685f19292c88e-1 > .panel-row-style,
    #footer #pg-w685f19292c88e-1.panel-no-style {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    #footer #pg-w685f19292c88e-1 .widget-title {
        margin-bottom: 8px;
    }

    .woocommerce-cart .coupon input.input-text,
    .woocommerce-cart .coupon .button {
        width: 100% !important;
        margin: 0 0 8px !important;
    }
}