/* ========================================================================
   Ganjeh Kala — Canonical Layout System
   One Theme Options value controls all theme-level boxed page wrappers.
   ======================================================================== */

:root {
    /* Do not redeclare --gk-site-width or --gk-page-gutter here. They are
       emitted from Theme Options at runtime. This alias only supplies a safe
       fallback when the token layer is unavailable. */
    --gk-layout-width: var(
        --gk-container-width,
        min(
            var(--gk-site-width, 1200px),
            calc(100% - (var(--gk-page-gutter, 24px) * 2))
        )
    );
    --wp--style--global--content-size: var(--gk-site-width, 1200px);
    --wp--style--global--wide-size: var(--gk-site-width, 1200px);
}

/* Reusable canonical wrapper for theme templates. */
.gk-site-container,
.gk-container,
.site-main.container,
.gk-home.container,
.gk-template > .container,
.gk-template .gk-container,
.gk-mega__inner.container,
.gk-footer > .container {
    box-sizing: border-box;
    width: var(--gk-layout-width) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

/* Home, account, compare, FAQ and the boxed product archive. */
.gk-home,
.gk-account-page.gkma .gkma-layout,
.gk-compare-header > .container,
.gk-compare-table-container,
.gk-compare-empty > .container,
.gk-faq-container,
.gk-archive__inner:not(.gk-archive__inner--fluid) {
    box-sizing: border-box;
    width: var(--gk-layout-width) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

/* The native single-product wrapper. Elementor full-width theme templates are
   not constrained; only a direct WooCommerce product child is targeted. */
body.single-product #main.site-main > .product,
body.single-product #primary.site-main > .product,
body.single-product .site-main > .product.type-product {
    box-sizing: border-box;
    width: var(--gk-layout-width) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

/* Cart, checkout, order-pay, thank-you and other WooCommerce shortcode pages. */
body.woocommerce-cart .site-main > .woocommerce,
body.woocommerce-cart > .woocommerce,
body.woocommerce-checkout .site-main > .woocommerce,
body.woocommerce-checkout > .woocommerce,
body.woocommerce-order-pay .site-main > .woocommerce,
body.woocommerce-order-received .site-main > .woocommerce,
body.woocommerce-order-received > .woocommerce,
body.gk-cart-modern .woocommerce,
body.gk-checkout-layout .woocommerce,
body.woocommerce-order-received .woocommerce,
body.woocommerce-page:not(.woocommerce-account):not(.woocommerce-cart):not(.woocommerce-checkout):not(.single-product) .site-main > .woocommerce {
    box-sizing: border-box;
    width: var(--gk-layout-width) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

/* WooCommerce block cart/checkout. */
body .wp-block-woocommerce-cart,
body .wp-block-woocommerce-checkout,
body .wc-block-cart,
body .wc-block-checkout {
    box-sizing: border-box;
    width: var(--gk-layout-width) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

/* WordPress constrained blocks. alignfull remains viewport-wide by design. */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body .wp-site-blocks > .alignwide {
    max-width: var(--gk-site-width, 1200px);
}

/* Elementor boxed layouts. Explicit full-width sections remain full width. */
body .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--gk-site-width, 1200px) !important;
}
body .e-con {
    --container-max-width: var(--gk-site-width, 1200px) !important;
}
body .e-con.e-con-boxed > .e-con-inner {
    max-width: var(--gk-site-width, 1200px) !important;
}

/* ------------------------------------------------------------------------
   Global synchronization mode
   Module-specific width controls remain available when synchronization is off.
   ------------------------------------------------------------------------ */
body.gk-site-width-synced {
    --gk-blog-container: var(--gk-site-width, 1200px) !important;
    --gk-error-container: var(--gk-site-width, 1200px) !important;
}

body.gk-site-width-synced .gk-header__inner {
    box-sizing: border-box;
    width: var(--gk-layout-width) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

body.gk-site-width-synced .gk-footer-container {
    box-sizing: border-box;
    width: var(--gk-layout-width) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

body.gk-site-width-synced .gk-blog-container,
body.gk-site-width-synced .gk-blog-breadcrumb {
    box-sizing: border-box;
    width: var(--gk-layout-width) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

body.gk-site-width-synced .gk-error-container {
    box-sizing: border-box;
    width: var(--gk-layout-width) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

/* The fluid shop archive is intentionally wider, but still respects the
   configured viewport gutter. */
.gk-archive__inner--fluid {
    width: min(1760px, calc(100% - (var(--gk-page-gutter, 24px) * 2))) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

/* Mobile gutters are capped to preserve usable content width. Runtime tokens
   still control desktop/tablet spacing. */
@media (max-width: 767px) {
    :root {
        --gk-layout-width: min(
            var(--gk-site-width, 1200px),
            calc(100% - (min(var(--gk-page-gutter, 24px), 16px) * 2))
        );
    }
}

@media (max-width: 420px) {
    :root {
        --gk-layout-width: min(
            var(--gk-site-width, 1200px),
            calc(100% - (min(var(--gk-page-gutter, 24px), 12px) * 2))
        );
    }
}