/* =========================================================
   HEAVENLY SENT - MOBILE OVERRIDE
   Loads after the main stylesheet because of the zzzz filename.
   Desktop is untouched.
   ========================================================= */

@media screen and (max-width: 750px) {

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

    #mainWrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
    }

    /* Old Zen Cart table layout -> stacked mobile layout */
    #contentMainWrapper,
    #contentMainWrapper > tbody,
    #contentMainWrapper > tbody > tr,
    #contentMainWrapper > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #contentMainWrapper {
        margin-top: 0 !important;
    }

    #columnCenter,
    #contentColumnMain,
    .centerColumn,
    #indexDefault,
    #indexProductList {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Left column is not useful on a phone */
    #navColumnOne {
        display: none !important;
    }

    /* Right/ad column goes underneath */
    #navColumnTwo {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 15px !important;
        box-sizing: border-box !important;
    }

    #navColumnTwoWrapper,
    #navColumnTwo .rightBoxContainer,
    #navColumnTwo .rightBoxContent {
        width: 100% !important;
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #navColumnTwo img,
    .rightBoxContent img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Header/logo */
    #logoWrapper {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 16px 15px !important;
        box-sizing: border-box !important;
    }

    #logo {
        position: static !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #logo img,
    .heavenly-new-logo {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* Navigation */
    #navMainWrapper {
        display: block !important;
        width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    #navMain {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navMain ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 10px !important;
        float: none !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 7px 0 !important;
        box-sizing: border-box !important;
    }

    #navMain ul li {
        display: block !important;
        width: 100% !important;
    }

    #navMain ul li a {
        display: block !important;
        width: 100% !important;
        padding: 8px 3px !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* Homepage hero */
    .hs-hero,
    .hs-hero-content,
    .hs-hero-text,
    .hs-hero-image {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .hs-hero-content {
        display: block !important;
        min-height: 0 !important;
    }

    .hs-hero-text {
        display: block !important;
        padding: 32px 20px !important;
    }

    .hs-hero-text h1 {
        font-size: 32px !important;
        line-height: 1.08 !important;
    }

    .hs-hero-text p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .hs-hero-image {
        display: block !important;
        min-height: 0 !important;
    }

    .hs-hero-photo {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 270px !important;
        object-fit: cover !important;
    }

    /* Homepage category cards */
    .hs-categories {
        width: 100% !important;
        max-width: 100% !important;
        padding: 40px 14px !important;
        box-sizing: border-box !important;
    }

    .hs-category-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .hs-category-grid .hs-category-card {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Product pages/listings */
    #indexProductList {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #indexProductList #productListing table.tabTable,
    #indexProductList #productListing table.tabTable > tbody {
        width: 100% !important;
        max-width: 100% !important;
    }

    #indexProductList #productListing table.tabTable > tbody {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    #indexProductList #productListing tr.productListing-odd,
    #indexProductList #productListing tr.productListing-even {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    #indexProductList #productListing .listingProductImage,
    #productListing .centerBoxContentsProducts img,
    #productListing .centerBoxContentsNew img {
        max-width: 100% !important;
        height: auto !important;
    }

    #navBreadCrumb,
    .navSplitPagesResult,
    .navSplitPagesLinks,
    #productsListingTopNumber,
    #productsListingBottomNumber,
    #productsListingListingTopLinks {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .navSplitPagesLinks {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Footer */
    #navSupp,
    #siteinfoLegal {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
}

@media screen and (max-width: 430px) {
    .hs-hero-text h1 {
        font-size: 29px !important;
    }

    .hs-hero-buttons a {
        width: 100% !important;
        margin-right: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}