/* =========================================================
   HELP BUILD — MOBILE WIDTH FIX
   Clean version
   ========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

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

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


/* =========================================================
   WORDPRESS — PREVENT OUTER PAGE FROM HORIZONTAL SCROLLING
   ========================================================= */

.wp-site-blocks,
main,
.wp-block-post-content,
.entry-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}


/* =========================================================
   HOME PAGE
   Preserve the working 28px WordPress mobile correction
   ========================================================= */

@media (max-width: 640px) {

    #hb-page {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: -28px !important;
        margin-right: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        overflow-x: hidden !important;
    }

    #hb-page .hb-container {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================
   CHAIN LINK CALCULATOR
   Entire page locked horizontally
   ========================================================= */

@media (max-width: 640px) {

    #hb-chain-v19 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;

        transform: none !important;
        overflow-x: hidden !important;
    }

    #hb-chain-v19 .hbv19-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        overflow-x: hidden !important;
    }

    /*
     Prevent calculator children from forcing
     the page wider than the viewport.
    */

    #hb-chain-v19 *,
    #hb-chain-v19 *::before,
    #hb-chain-v19 *::after {
        max-width: 100%;
        box-sizing: border-box;
    }

    #hb-chain-v19 input,
    #hb-chain-v19 select,
    #hb-chain-v19 textarea,
    #hb-chain-v19 button {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* =====================================================
       BILL OF MATERIALS
       May scroll internally if its table needs more room
       ===================================================== */

    #hb-chain-v19 #bom {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }


    /* =====================================================
       SHOP DRAWING
       This is the ONLY intentionally wide area
       ===================================================== */

    #hb-chain-v19 .hb-shop-stage {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /*
     Override the general max-width rule above specifically
     for the drawing so the drawing itself can remain wide.
    */

    #hb-chain-v19 .hb-shop-stage svg {
        width: 760px !important;
        max-width: none !important;
        min-width: 760px !important;
    }
}