/* =============================================================================
   LAYOUT
   Structural containers, page wrappers, footer layout, section scaffolding
   Source: customiser.css
============================================================================= */

@media (max-width: 992px) {
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column {

    margin-bottom: 30px!important;
}
}

.gform-theme--foundation .gfield .ginput_password.large, .gform-theme--foundation .gfield input.large, .gform-theme--foundation .gfield select.large {
   
    border: 0!important;
}

.page-id-3 h2.wp-block-heading {
    text-align: left;
    font-size: 1.3em!important;
}


.page-id-3 h3.wp-block-heading {
    text-align: left;
    font-family: 'lato';
    font-size: 1.2em;
}

.page-id-3 header .h2, header h2 {
    margin-top: 50px;
}

.page-id-3724 h2.wp-block-heading {
    text-align: left;
    font-size: 1.3em!important;
}

.page-id-3724 h3.wp-block-heading {
    text-align: left;
    font-family: 'lato';
    font-size: 1.2em;
}


.page-id-3724 header .h2, header h2 {
    margin-top: 50px;
}



li#mega-menu-3198-0-0 li a {
    background: transparent!important;
    color: #666;
    font-family: inherit;
    font-size: 16px!important;
    text-transform: none;
    text-decoration: none;
    font-weight: 600;
    text-align: left;
    margin: 0!important;
    padding: 0!important;
    vertical-align: top;
    display: block;
    border: 0;
}

li#mega-menu-3719-0-0 li a {
    background: transparent!important;
    color: #666;
    font-family: inherit;
    font-size: 16px!important;
    text-transform: none;
    text-decoration: none;
    font-weight: 600;
    text-align: left;
    margin: 0!important;
    padding: 0!important;
    vertical-align: top;
    display: block;
    border: 0;
}

li#mega-menu-3549-0-0 li a {
    background: transparent!important;
    color: #666;
    font-family: inherit;
    font-size: 16px!important;
    text-transform: none;
    text-decoration: none;
    font-weight: 600;
    text-align: left;
    margin: 0!important;
    padding: 0!important;
    vertical-align: top;
    display: block;
    border: 0;
}

/* --- Bootstrap container override --------------------------------------- */

/* !important-flag: Limits all Bootstrap containers to 85% max-width site-wide.
   Consider replacing with a custom container class to avoid affecting plugin output.
   Reverts to 100% on mobile so content is not squeezed on small screens. */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 85%;
}

@media (max-width: 767px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 100%;
    }
}

/* --- Prevent horizontal scroll site-wide --------------------------------- */

body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* --- Page-level wrappers ------------------------------------------------- */

.page-template-full-width-php main#primary {
    margin-top: 0px;
}

.page-id-7 main#primary {
    margin: 0 auto;
    max-width: 90%;
}

/* --- Footer layout ------------------------------------------------------- */

footer.mt-auto.border-top {
    background: #294141;
    border-top: 0!important; /* !important-flag */
}

a.logo {
    width: 20%;
    display: inline-block;
    float: left;
}

.footer-menu {
    width: 60%;
    display: inline-block;
}

ul#menu-footer-menu {
    padding: 0;
}

.footer-social {
    clear: both;
}

.footer-widgets-area {
    width: 100%;
}

/* --- Newsletter / Subscribe & Save (footer.php — shown on all pages) ----- */
/* Moved here from home.css so these render on inner pages too. */

.news-letter {
    background: url(/wp-content/uploads/2025/12/footer-grass2.png);
    background-position: bottom;
    background-repeat: no-repeat;
    min-height: 400px;
    background-size: contain;
    margin-top: -120px;
    z-index: 0;
}

.news-box {
    background: #DBE4A9;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 3px 3px 11px #b5b5b5;
    /* display:flex removed — Bootstrap .row handles columns */
}

.news-box .form{
    z-index: 1;
}

.news-box h2 {
    text-align: left;
    color: #284143;
}

.news-box h3 {
    text-align: left;
    font-size: 1.4em;
    font-weight: 700!important;
    font-family: 'lato';
    color: #284143;
}

.news-box p {
    font-family: 'Caveat';
    font-size: 1.5em!important;
    font-weight: bold;
    color: #284143;
}

/* Gravity forms newsletter (Form 1) */
input#input_1_1 {
    background: #ffffff5e;
    border: none;
}

input#input_1_2_3 {
    background: #ffffff5e;
    border: none;
}

div#gform_fields_1 {
    row-gap: 10px!important;
}

input#gform_submit_button_1 {
    background-color: #284241;
    border-radius: 50px;
    width: 100%;
    margin-left: 0;
}

/* Subscribe & Save (shop/category pages) */
.sub-save {
    background: url(/wp-content/uploads/2026/01/subscribe-save.png) center no-repeat;
    min-height: 428px;
    text-align: center;
    align-content: center;
    margin-bottom: 300px;
    margin-top: 82px;
    background-size: contain;
}

p.text-white.sml {
    font-size: 1rem;
    font-style: italic;
}

.sub-save h2 { font-size: 2.2em; }

.sub-save h3 {
    color: #fff;
    font-size: 2.4em;
    margin: 10px;
}

.sub-save p {
    font-size: 1.2em;
    margin-top: 10px;
    padding: 0 15px;
}

@media(max-width: 1199px){
    .sub-save {
        background: url(/wp-content/uploads/2025/11/Vector-1.png) center no-repeat;
        background-size: cover;
        min-height: unset;
        padding: 20px 0;
    }
}

a.ss-btn {
    width: 200px;
    margin: 0 auto;
    background: #492774;
    color: #fff;
    padding: 10px;
    border-radius: 20px;
    text-decoration: none;
}

/* !important-flag: Overrides Bootstrap .py-5 utility globally — may affect
   unintended elements. Consider scoping to footer. */
.py-5 {
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
}

/* --- mt-auto override ---------------------------------------------------- */

/* Adds breathing-room side margins to non-footer mt-auto elements (e.g. WC blocks).
   Excluded from footer so it renders full-width.
   Removed on mobile so content uses full width. */
.mt-auto:not(footer) {
    margin: 0 12%;
}

@media (max-width: 767px) {
    .mt-auto:not(footer) {
        margin: 0;
    }
}

/* --- Two-column layout helpers (pre-Bootstrap) --------------------------- */
/* These custom column classes are legacy. Migrate to Bootstrap .col-lg-6 / .row
   when refactoring home.php and footer.php. */

.col-1-2.spotlight {
    width: 47%;
    margin-right: 5%;
    display: inline-block;
}

.col-1-2.spotlight2 {
    width: 47%;
    display: inline-block;
}

.col-1-2.txt {
    width: 52%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 100px;
}

.col-1-2.form {
    width: 48%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

.col-1-1.spotlight {
    max-width: 80%;
    margin: 0 auto;
    margin-top: 30px;
}

/* --- White divider strip ------------------------------------------------- */

.white-div {
    height: 35px;
    background: url(/wp-content/uploads/2025/11/white-line.png);
    margin-top: -60px;
    padding-top: 90px;
    background-size: cover;
    z-index: 10;
    position: relative;
}

.single-product .white-div {
    display: block;
    float: left;
    width: 100%;
    margin-top: -65px;
}

/* --- Green decorative divider -------------------------------------------- */

.green-div {
    background-image: url(/wp-content/uploads/2025/11/green-divider.png);
    background-position: top;
    background-repeat: no-repeat;
    min-height: 150px;
    background-size: cover;
}

/* --- Bunny icons decorative strip ---------------------------------------- */

.bunny-icons {
    display: block;
    float: left;
    width: 100%;
    background: url(/wp-content/uploads/2026/02/find-us-1.png);
    height: 300px;
    background-repeat: no-repeat;
    background-size: contain;
    clear: both!important;
    margin-bottom: -220px;
    z-index: 100;
    position: relative;
}

.bunny-container {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.cleaning-bunny {
    width: 300px;
    height: auto;
    display: block;
    background: transparent;
}

/* --- Shared underline decorators ---------------------------------------- */

.green-uline {
    background: url(/wp-content/uploads/2025/11/green-underline.png) center;
    width: 100%;
    height: 32px;
    background-repeat: no-repeat;
}

.white-uline {
    background: url(/wp-content/uploads/2025/11/white-underline.png) center;
    height: 60px;
    background-repeat: no-repeat;
}

.single-product .white-uline {
    background: url(/wp-content/uploads/2025/11/white-underline.png) center;
    height: 24px;
    background-repeat: no-repeat;
}

/* --- li reset ------------------------------------------------------------ */

/* FLAGGED: These bare `li` rules are too broad and will break navigation menus.
   The two definitions conflict: one sets display:inline/none, the other block/disc.
   The last one (block/disc) is kept active below. Both should be scoped to
   specific containers rather than a bare `li` selector. */
li {
    list-style-type: disc;
    display: block;
}

/* --- Mobile overrides ---------------------------------------------------- */

@media (max-width: 767px) {
    .news-box {
        margin: 16px !important;
        padding: 24px !important;
        border-radius: 16px !important;
    }

    .news-box .txt {
        padding-right: 0 !important;
    }

    /* Prevent GF inputs/button overflowing the box on narrow screens */
    .news-box input,
    .news-box .gform_footer,
    .news-box .gform_button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/*
*********************************
MEDIA QUERIES
*********************************
*/

@media (max-width: 991px) {

    body:not(.archive.tax-product_cat) .news-letter {
        margin-top: -300px;
    }

    .footer-menu {
        width: 100%;
        margin-top: 20px;
    }

    #aboutusfooter a.logo{
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }

}

@media (min-width: 992px) and (max-width: 1799px) {

    body:not(.archive.tax-product_cat) .news-letter {
        margin-top: -200px;
    }

}