html {
    margin-top: 0 !important;
    overflow-x: hidden;
}
/* .wp-block-group {
    overflow-x: hidden;
} */

/* Nav & Header Styles */

.hide-desktop {
    display: none !important;
}
.btn {
    background: transparent;
    color: #132360;
    transition: all 0.2s ease-in-out;
    border-radius: 50px;
    &:hover {
        background: #132360;
        color: white;
        transition: all 0.2s ease-in-out;
        border-radius: 50px;
    }
}
.blurme {
    backdrop-filter: blur(5px);
    background: RGBA(255,255,255,0.85) !important;

    transition: all 0.75s ease-in-out;
}
.header-custom {
    border: none;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    position: fixed;
    height: 60px!important;
    z-index: 100;
}
.header-custom__inner {
    border-bottom: 1px solid rgb(0,0,0,0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

}
.hidden-menu {
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    margin-block-start: 0 !important;
    left: 0;
    transform: translateX(100%);
    transition: transform 250ms ease-in-out;
    & .keipa-logo-white {
        position: absolute;
        bottom: 0;
        z-index: -1;
    }
    & .hidden-menu-inner {
        & .mobile-menu_top {
            border-bottom: 1px solid rgb(0,0,0,0.2);
            width: 80%;
            padding: 20px !important;
            margin: 20px auto !important;
        }
        & .mobile-menu_bottom {
            width: 70%;
            padding-top: 10% !important;
            margin: auto !important;
            z-index: 100;
        }
    }
    & .nav-mobile {
        flex-direction: column;
    }
}
span.wc-block-mini-cart__badge {
    border: 1px solid #132360;
    background: transparent !important;
    position: static;
    margin: 0;
    display: unset;
    padding: 0;
    font-size: var(--wp--preset--font-size--medium-large);
    line-height: 1.5;
    width: 40px;
    transform: none;
    height: 40px;
    border-radius: 20px;
    color: #132360;
    font-weight: 500;
    &:empty {
        opacity: 1;
        &:before{
            content: '0';
        }
    }
}
.wc-block-mini-cart__icon{ display: none;}

.woocommerce-banner {
    padding-top: 85px !important;
}

.cart-button button > span {
    gap: 10px;
    &:before {
        content: 'Cart';
        display: block;
        font-weight: 400;
        align-self: center;
        font-size: var(--wp--preset--font-size--medium-large);
    }
}

/* Styles for homepage hero */

.hero-banner {
    border-radius: 0 0 0 40%;
    margin-block-start: 0;
    background-image: url(../images/backgrounds/header2.svg?);
    background-repeat: no-repeat;
    & > div {
        padding-top: 100px;
        width: 60%;
    }
    
}
.hero-image {
    & img{
        position: absolute;
        right: -10%;
        top: 11vh;
        width: auto;
        height: auto;
        max-height: 80vh;
        max-width: 55vw;
    }
}

.hero-btns {
    position: absolute;
    height: 55vw;
    max-height: 80vh;
    max-width: 776px;
    right: -10%;
    top: 11vh;
    z-index: 1;
    & .btn-spring {
        position: absolute;
        top: 25%;
        right: 57%;
    }
    & .btn-hydr8 {
        position: absolute;
        top: 79%;
        right: 81%;
    }
    & div {
        background: white;
        width: 25px;
        height: 25px;
        border-radius: 25px;
        &:after {
            content: '';
            position: absolute;
            top: -10px;
            bottom: -10px;
            right: -10px;
            left: -10px;
            border: 1px solid white;
            border-radius: 25px;
        }
        & a {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 100;
        }
    }
    @media only screen and (min-width:767px) {
        display: none;
    }
}
.woocommerce-Tabs-panel h2 {
    display: none;
}

/* Add to cart button styling site wide */

.add_to_cart_pill {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 175px;
    margin: auto;
    & .quantity {
        margin: 0 !important;
        width: 50%;
        position: relative;
        &:before {
            content: '-';
            position: absolute;
            top: 0;
            left: 10%;
            font-size: 40px;
            height: 100%;
            line-height: 80%;
            cursor: pointer;
            
        }
        &:after {
            height: 100%;
            content: '+';
            position: absolute;
            top: 0;
            right: 10%;
            font-size: 40px;
            line-height: 80%;
            cursor: pointer;
        }
    }

    & input {
        border-radius: 25px 0 0 25px;
        border: none;
        font-size: 15px;
        text-align: center;
        width: 100% !important;
        padding: 0 !important;
        height: 100%;
        line-height: 2.5rem;
        background: #FBFBFB;
        color: var(--wp--preset--color--base) !important;
        & div {
            flex-direction: column-reverse;
        }
    }
    & button {
        border-radius: 0 25px 25px 0;
        border: none;
        width: 50%;
        line-height: 2.5rem;
        background: #FBFBFB;
        border-left: 1px solid rgb(0,0,0,0.15);
        color: var(--wp--preset--color--base) !important;
        transition: all 0.2s ease-in;
        &:hover {
            background: var(--wp--preset--color--base);
            color: #FBFBFB !important;
            transition: all 0.1s ease-in-outs;
        }
    }
}
.fix-height {
    & .add_to_cart_pill {
        height: 2.5rem;
        & .quantity {
            & input {
                height: 100%;
                width: 100%;
            }
        }
    }
}

/* Styles for Springwater page */
.springwater-hero-banner {
    min-height: 70vh;
}
.springwater-hero-img {
    position: absolute;
    top: calc(var(--wp--preset--spacing--90) * -1);
    right: 0;
    & img {
        position: absolute;
        top: 0;
        right: 0;
        height: 100vh;
        width: auto;
        max-width: unset !important;
        transform: translateX(20%);
    }
}
.titled-before {
    & .wp-block-post {
        margin: auto;
    }
    & .product-details {
        position: relative;
        & .wc-block-grid__product-image {
            position: absolute;
            top: 0;
            left: 0;
            width: calc(var(--wp--preset--spacing--90) * 1.5);
            rotate: 15deg;
            transform-origin: center center;
            transform: translateX(-40%) translateY(-20%);
        }
    }
}
.side-bar-parent {
    position: relative;
    & .side-bar:before {
        content: "";
        height: 93.5%;
        width: 7.5px;
        top: 30px;
        left: -6rem;
        background: #6E7CAE;
        position: absolute;
    }
    & p {
        position: relative;
    }
    &  p:before {
        height: 20px;
        width: 20px;
        content: "";
        background: #6E7CAE;
        border-radius: 50%;
        position: absolute;
        left: -5.97rem;
        top: 40%;
        transform: translateX(-33%);
    }
}

/* Style for Hydr8 page  */

.hydr8-single-listing li:nth-of-type(even) {
    & .is-layout-flex {
        flex-direction: row-reverse;
    }
}
.hero {
    position: relative;
    z-index: 1;
    & .hero-background {
        position: absolute;
        right: calc(-1 * (var(--wp--style--global--wide-size) - var(--wp--style--global--content-size)) / 2);
        top: 0;
        & img {
            width: 80%;
            float: right;
        }
    }
    & .lure-copy {
        width: 45%;
    }
}

/* CSS for Homepage big bottle */

.main-slider {
    position: relative;
    z-index: -1;
}

.dynamic-bottle-content { 
    align-self: flex-start;
    & .bottle-meta {
        display: none;
    }
}
.homepagebigbottle {
    position: relative;
    overflow: hidden;
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.keipa-bottle .wc-block-grid__product-image {
    rotate: 15deg;
    text-align: right;
}
.big-bottle-content {
    position: relative;
    background-image: url(../images/backgrounds/homepage-bigbottle.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom 10% left;
    & > * {
        flex: 2 2 auto;
    }
    & .big-bottle {
        height: 100%;
        max-width: 75%;
        display: flex;
        align-items: center;
        & img {
            width: auto;
            height: 85%
        }

    }
}
.bottle-picker {
    height: 20%;
    & .products-block-post-template {
        height: 50%;
        & .wp-block-post {
            & .keipa-bottle {
                height: 100%;
                & .wc-block-components-product-image {
                    height: 100%;
                    max-height: 150px;
                    & img {
                        object-fit: contain !important;
                        height: 100%;
                    }
                }
            }
        }
    }
}
.product-card-parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.stacked-links p a{
    text-decoration: none !important;
    color: var(--wp--preset--color--base) !important; 
}
.gform_required_legend {
    display: none !important;
}
.gform-field-label {
    color: #000;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
}
.gfield--type-phone p, .gfield--type-email p, .gfield--type-textarea p {
    display: none;
}
.gfield--type-name label {
    display: none !important;
}
#gform_wrapper_3 {
    padding-top: 15px;
    & .gform_title {
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 0.4px;
    }
    & p {
        display: none;
    }
    & input {
        border-radius: 8px;
        border: 1px solid var(--Varley-Blue, #29357A);
        background: transparent;
        width: 100%;
        padding: 15px;
        &::placeholder {
            font-weight: 400;
            color: var(--Varley-Blue, #29357A);
        }
    }
    & .gform_footer {
        & p {
            display: none;
        }
        & br {
            display: none;
        }
        & .gform_button {
            width: min-content;
            border: none;
            border-radius: 50px;
            background: white;
            transition: all 0.2s ease-in;
            padding: 10px 20px;
            &:hover {
                background: var(--Varley-Blue, #29357A);
                color: white;
                transition: all 0.1s ease-in-out;
            }
        }
    }
}
.keipa-cool {
    display: flex;
}
.keipa-cool-form {
    align-self: center;
    width: 27%;
    padding-right: 5rem !important;
}


/* CSS for contact form */
.contact-form {
    overflow: hidden;
    background: linear-gradient( rgba(110, 175, 214, 0.5) 0%, transparent 50%);
    border-bottom-right-radius: 30%;
    & .gform_heading {
        font-size: 3rem;
        & .gform_title {
            font-weight:600;
            margin-block-end: 0 !important;
        }
    }
    & .contact-dots {
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.5;
    }
    & .gform_description {
        font-size: 1.25rem;
        margin-block-end: 0 !important;
        margin-block-start: 0 !important;

    }
    & input, textarea {
        padding: 15px !important;
        border: 1px solid var(--Varley-Blue, #29357A) !important;
        font-size: 1rem !important;
        color: #212529;
        &:focus, &:focus-visible {
            border: 2px solid var(--Varley-Blue, #29357A) !important;
        }
        &::placeholder {
            font-family: 'DarkerGrotesque';
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
            color: #212529;
        }
    }
    & .gform_body {
        & .ginput_container--name {
            gap: 1rem;
            & p {
                height: min-content;
                flex-grow: 1;
                margin: 0;
                & br {
                    display: none;
                }
                & span input {
                    background: transparent;
                }
            }
        }

    }
    .gform_wrapper.gravity-theme * {
        border-radius: 10px;
        background: transparent;
    }
    .gform_wrapper {
        width: 75%;
    }
    & .gfield--type-radio {
        & legend {
            display: none !important;
        }
        & .gfield_radio {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
        }
    }
    & .gchoice {
        display: flex;
        
        & .gfield-choice-input {
            opacity: 0;
            order: 1;
            width: 0px;
            height: 0px;
            overflow:hidden;
            visibility: hidden;
            position: absolute;
        }
        & input[type="radio"]:checked + label {
            background: #132360;
            color: white !important;
        }
        & label {
            color: var(--neutral-900, #212529) !important;
            font-size: 16px !important;
            font-style: normal;
            font-weight: 400 !important;
            border: 1px solid #132360;
            border-radius: 25px !important;
            padding: 10px 20px;
            transition: all 0.2s ease-in-out;
            max-width: unset !important;
            &:hover {
                background: #132360;
                color: white !important;
                transition: all 0.2s ease-in-out;
            }
        }
    }
    & .gfield_description {
        padding-bottom: 0 !important
    }
    & .gform_button {
        border-radius: 50px !important;
        border: none !important;
        padding: 15px 50px !important;
        background: #F2F2F2 !important;
        transition: all 0.2s ease-in;
        &:hover {
            background: #132360 !important;
            color: #F2F2F2 !important;
            transition: all 0.1s ease-in-out;
        }
    }
    & .gform_footer {
        max-height: 100px;
    }
}

/* All CSS for different Page Backgrounds */

.keipa-cool {
    background-image:  url(../images/backgrounds/desktop-hydr8.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: calc(100vw / 2.36);
}

.products-background {
    overflow: hidden;
    background-image: url(../images/backgrounds/productsbg.png);
    background-size: 70vw;
    background-repeat: no-repeat;
    background-position: top left ;

    & .products-listing-background {
        background-image: url(../images/backgrounds/bluefooter.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom;
    }
}

.springwater-background {
    overflow: hidden;
    background-image: url(../images/backgrounds/Sprinwater-Banner-blue-gradient-and-dots.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.community-page {
    overflow: hidden;
    background-image: url(../images/backgrounds/Supporting-the-community-gradient-and-dots-scaled-e1699836803681.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;

}
.coming-soon {
    background-image: url(../images/backgrounds/productsbg.jpg);
    background-size: cover;
}
.about-page {
    background-image: url(../images/backgrounds/aboutbg.jpg);
    background-size: cover;
    background-position: bottom;
}


/* Fixing Margin-top on all pages */

.about-hero, .contact-form, .wp-block-heading, .wc-block-store-notices, .hero, .wp-block-group {
    margin-block-start: 0 !important;
}

/* Footer Styles Site Wide */

ul li {
    list-style: none;
}
.keipa-footer {
    scale: 1.5;
}
.footer-links a {
    text-decoration: none;
    color: #132360
}

/* Add to Cart button custom styling */

input.input-text::-webkit-inner-spin-button {
    margin: 0;
    order: -1;
    display: none;
}

.woocommerce-product-gallery__trigger {
    display: none;
}

.chop-left-corner {
    position: relative;
    overflow: hidden;
}
/* -- PRODUCT PAGES -- */
.wp-block-woocommerce-related-products, .products-block-post-template {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.description_tab {
    color: #132360;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.description_tab.active {
    border: none;
    font-weight: 700;
    &:before, &:after {
        display: none;
    }
}
.woocommerce div.product .woocommerce-tabs ul.tabs:before {
    display: none;
}

/* MINI CART */

.wc-block-mini-cart__template-part {
    & .wp-block-woocommerce-filled-mini-cart-contents-block {
        padding: 1rem;
    }
    & .wc-block-cart-items__row {
        & .wc-block-components-product-name {
            font-size: 1.125rem;
        }
        & .wc-block-components-product-metadata {
            font-size: 1rem;
            display: none;
        }
        & .wc-block-cart-item__quantity {
            & .wc-block-components-quantity-selector {
                background: #F3F4F7;
                border:none;
                border-radius: 50vw;
                color: #132360;
                font-weight: 600;
                overflow: hidden;
                &:after {
                    display: none;
                }
                & button {
                    color: #132360;
                    background-color: transparent;
                    opacity: 1;
                    transition: all 0.3s ease;
                    border-radius: 0;
                    &:hover, &:focus {
                        background-color: #132360;
                        color: #ffffff;
                    }
                }
            }
        }
    }
    & a {
        color: #132360;
        font-weight: 700;
        text-decoration: none;
    }
    & .wc-block-mini-cart__footer-actions {
        & a {
            border-radius: 50vw;
            font-size: 1rem;
            transition: all 0.3s ease;
            font-weight: 600;
        }
        & .wp-block-woocommerce-mini-cart-cart-button-block {
            color: #132360;
            background-color: #F3F4F7;
            border: none;
            
            &:hover {
                background-color: #132360;
                color: #ffffff;
            }
        }
        & .wp-block-woocommerce-mini-cart-checkout-button-block {
            background-color: #132360;
            color: #ffffff;
            
            &:hover {
                border: 1px solid #132360;
                color: #132360;
                background-color: #ffffff;
            }
        }
    }
    & .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
        font-size: 1rem;
    }
}