/* Keep the outer content edge consistent across every Hstock page. */
body.client-template-hstock .hstock-shell,
body.client-template-hstock .hstock-blog-shell,
body.client-template-hstock .hstock-blog-detail-shell,
body.client-template-hstock .hs-product-container,
body.client-template-hstock .hs-orders-container,
body.client-template-hstock .hstock-profile-shell,
body.client-template-hstock .hstock-policy-shell,
body.client-template-hstock .sim-catalog-shell,
body.client-template-hstock .sim-orders-shell,
body.client-template-hstock .sim-order-shell,
body.client-template-hstock .api-doc-container,
body.client-template-hstock .api-doc-hub-container,
body.client-template-hstock .djn-doc-shell,
body.client-template-hstock .djn-client-shell,
body.client-template-hstock .hstock-footer-v2-shell,
body.client-template-hstock .inner-section > .container,
body.client-template-hstock .inner-section.profile-part > .container,
body.client-template-hstock .inner-section.single-banner > .container,
body.client-template-hstock .inner-section.contact-part > .container,
body.client-template-hstock .luxe-recharge-page > .container,
body.client-template-hstock .market-catalog-page .container,
body.client-template-hstock .market-detail-page > .container,
body.client-template-hstock .market-store-page > .market-store-products.container,
body.client-template-hstock .market-store-page > .market-store-reviews.container,
body.client-template-hstock .market-store-page > .market-store-policy.container {
    width: min(var(--hs-shell), calc(100% - 32px));
    max-width: var(--hs-shell);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* The article grid keeps a readable sidebar; only its outer page edge expands. */
body.client-template-hstock .hstock-blog-detail-layout {
    min-width: 0;
}

@media (max-width: 800px) {
    body.client-template-hstock .hstock-shell,
    body.client-template-hstock .hstock-blog-shell,
    body.client-template-hstock .hstock-blog-detail-shell,
    body.client-template-hstock .hs-product-container,
    body.client-template-hstock .hs-orders-container,
    body.client-template-hstock .hstock-profile-shell,
    body.client-template-hstock .hstock-policy-shell,
    body.client-template-hstock .sim-catalog-shell,
    body.client-template-hstock .sim-orders-shell,
    body.client-template-hstock .sim-order-shell,
    body.client-template-hstock .api-doc-container,
    body.client-template-hstock .api-doc-hub-container,
    body.client-template-hstock .djn-doc-shell,
    body.client-template-hstock .djn-client-shell,
    body.client-template-hstock .hstock-footer-v2-shell,
    body.client-template-hstock .inner-section > .container,
    body.client-template-hstock .inner-section.profile-part > .container,
    body.client-template-hstock .inner-section.single-banner > .container,
    body.client-template-hstock .inner-section.contact-part > .container,
    body.client-template-hstock .luxe-recharge-page > .container,
    body.client-template-hstock .market-catalog-page .container,
    body.client-template-hstock .market-detail-page > .container,
    body.client-template-hstock .market-store-page > .market-store-products.container,
    body.client-template-hstock .market-store-page > .market-store-reviews.container,
    body.client-template-hstock .market-store-page > .market-store-policy.container {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }

    /* These pages already provide their own horizontal padding on the page wrapper. */
    body.client-template-hstock .djn-client-page > .djn-client-shell,
    body.client-template-hstock .api-doc-hub-page > .api-doc-hub-container,
    body.client-template-hstock .api-doc-hub-page > .api-doc-container,
    body.client-template-hstock .djn-doc-page > .djn-doc-shell,
    body.client-template-hstock .djn-doc-page > .api-doc-container {
        width: 100%;
        max-width: 100%;
    }
}

/* The same wrappers sit inside padded API pages on wider screens too. */
body.client-template-hstock .djn-client-page > .djn-client-shell,
body.client-template-hstock .api-doc-hub-page > .api-doc-hub-container,
body.client-template-hstock .api-doc-hub-page > .api-doc-container,
body.client-template-hstock .djn-doc-page > .djn-doc-shell,
body.client-template-hstock .djn-doc-page > .api-doc-container {
    width: min(var(--hs-shell), 100%);
    max-width: var(--hs-shell);
}

/* The approved Hstock order demos use a wider 1380px content edge. These
 * page-specific overrides must come after the shared container rules above,
 * otherwise the global --hs-shell value makes the live pages narrower than
 * the approved layout. */
body.client-template-hstock .hs-orders-page > .hs-orders-container,
body.client-template-hstock .hs-order-detail-modern > .hs-order-detail-shell {
    width: min(1380px, calc(100% - 32px));
    max-width: 1380px;
}

@media (max-width: 800px) {
    body.client-template-hstock .hs-orders-page > .hs-orders-container,
    body.client-template-hstock .hs-order-detail-modern > .hs-order-detail-shell {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
}