/** Shopify CDN: Minification failed

Line 931:15 Unexpected "0"
Line 4269:15 Unexpected "0"

**/
:root {
    /*Defining the font for the main heading in the hero banner*/
    --main-heading-font: 'Bigger';

    /* Defining the main font sizes*/
    --body-tiny-copy: 12px;
    --body-tiny-lh: 20px;

    --footer-copy: 12px;
    --footer-lh: 20px;

    --body-small-copy: 12px;
    --body-small-lh: 20px;

    --body-mid-copy: 16px;
    --body-mid-lh: 24px;

    /* large body and mid heading size */
    --body-big-copy: 20px;
    --body-big-lh: 30px;
    --heading-mid-copy: var(--body-big-copy);
    --heading-mid-lh: var(--body-big-lh);

    --heading-copy: 28px;
    --heading-lh: 34px;

    /*Defining Padding/Margin between/in sections*/
    --spacing-y-minor: 20px;
    --spacing-y-major: calc(1.618 * var(--spacing-y-minor));
    --spacing-y-tiny: calc(var(--spacing-y-minor) / 1.618);
    --spacing-x: 30px;
    --spacing-x-tiny: calc(var(--spacing-x) * 0.5);
    --spacing-x-minor: var(--spacing-x);
    --spacing-x-major: calc(var(--spacing-x-minor) * 2);

    --button-padding: 8px;

    --mobile-image-height: 200px;

    /*Defining the main colours for the site*/

    --aligner-blue-light: #daecfb;
    --aligner-blue-bright: #02b5e3;
    --aligner-blue-standard: #4378ff;
    --aligner-blue-dark: #16263b;

    --whitening-purple: #a238ff;
    --whitening-purple-light: #f3dafb;
    --whitening-purple-bright: #8447e3;
    --misc-whitening-color: #72cdd8;

    --daily-care-green-light: #dafbf2;
    --daily-care-green-bright: #52f2e5;

    --veneer-orange-bright: #ff8c62;

    --implant-grey-light: #b5b5b5;

    --product-card-grey: #fafafa;
    --body-grey: #3b3b3b;
    --body-grey-alt: #808080;
    --body-grey-alt-alt: #fafafa;
    --product-card-desc-grey: var(--body-grey-alt);
    --slideout-grey: #707070;
    --heading-black: var(--body-grey);
    --footer-grey: #252427;
    --remove-button-grey: #9d9d9d;
    --cart-border-grey: #bababa;
    --infograph-grey: #f7f7f7;
    --body-grey-another-one: #6b6b6b;

    --primary-color: var(--whitening-purple);
    --steps-gradient: linear-gradient(to bottom, #3b3b3bff 0%, #fbf9f800 50%);

    /*Defining the default sizing for the header group*/
    --header-size: 92px;

    --mobile-height: 100vh;
    /*global.js changes this to the actual viewport size, minus the address bar on page load*/

    --mobile-breakpoint: 850px;
}

@media screen and (min-width: 850px) {
    /*Defining root variable values for desktop*/
    :root {
        /*Defining Padding/Margin between/in sections*/
        --spacing-y-minor: 20px;
        --spacing-y-major: calc(2 * var(--spacing-y-minor));
        --spacing-y-tiny: calc(0.5 * var(--spacing-y-minor));
        --spacing-x: 75px;
        --spacing-x-tiny: calc(var(--spacing-x) * 0.5);
        --spacing-x-minor: var(--spacing-x);
        --spacing-x-major: calc(var(--spacing-x-minor) * 2);

        /* Copy the mobile values for those sections that do not change  */

        --body-tiny-copy: --body-tiny-lh: 20px;

        --footer-copy: 14px;
        --footer-lh: 18px;

        --body-small-copy: 16px;
        --body-small-lh: 22px;

        --body-mid-copy: 20px;
        --body-mid-lh: 30px;

        /* large body and mid heading size */
        --body-big-copy: 24px;
        --body-big-lh: 36px;
        --heading-mid-copy: var(--body-big-copy);
        --heading-mid-lh: var(--body-big-lh);

        --mobile-footer-copy: 14px;
        --mobile-footer-lh: 18px;

        --mobile-body-tiny-copy: var(--body-tiny-copy);
        --mobile-body-tiny-lh: var(--body-tiny-lh);

        --mobile-body-small-copy: 16px;
        --mobile-body-small-lh: 22px;

        --mobile-body-mid-copy: 20px;
        --mobile-body-mid-lh: 30px;

        /* large body and mid heading size */
        --mobile-body-big-copy: 24px;
        --mobile-body-big-lh: 36px;
        --mobile-heading-mid-copy: var(--mobile-body-big-copy);
        --mobile-heading-mid-lh: var(--mobile-body-big-lh);

        --heading-copy: 38px;
        --heading-lh: 50px;

        /* Defining the main font sizes*/

        --button-padding: 13px;

        --footer-copy: 14px;
        --footer-lh: 18px;

        --body-tiny-copy: 16px;
        --body-tiny-lh: 20px;

        --body-small-copy: 17px;
        --body-small-lh: 25px;

        --body-mid-copy: 20px;
        --body-mid-lh: 26px;

        /* large body and mid heading size */
        --body-big-copy: 24px;
        --body-big-lh: 24px;

        --heading-small-copy: 27px;
        --heading-small-lh: 37px;

        --heading-mid-copy: var(--body-big-copy);
        --heading-mid-lh: var(--body-big-lh);

        --desktop-body-mid-copy: 30px;
        --desktop-body-mid-lh: 40px;
    }
}

#hubspot-messages-iframe-container {
    display: none !important;
    /* Get rid of the ugly chat icon*/
    max-height: 0px;
    max-width: 0px;
}

.klaviyo-form {
    /* Hide the ugly clayvio popups */
    display: none !important;
    max-width: 0;
    max-height: 0;
    opacity: 0;
    z-index: -1000000;
    position: absolute;
}

div#cx-chat-btn {
    /*display: none !important;*/
}

.needsclick {
    display: none !important;
    max-width: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    z-index: -1000000 !important;
    position: absolute !important;
}

/*Remove cookies popup*/
div#cb-cookie_consent {
    display: none !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -10000;
}

#hubspot-messages-iframe-container iframe {
    display: none !important;
    max-height: 0px;
    max-width: 0px;
}

/* SuisseIntl-Medium */
@font-face {
    font-family: 'SuisseInt`l';
    src: url('../../../files/SuisseIntl-Medium.ttf@v=1704971259')
        format('opentype');
    font-weight: 500;
}

/* SuisseIntl-Thin */
@font-face {
    font-family: 'SuisseInt`l';
    src: url('../../../files/SuisseIntl-Thin.otf@v=1704971258')
        format('opentype');
    font-weight: 100;
}

/* SuisseIntl-Bold */
@font-face {
    font-family: 'SuisseInt`l';
    src: url('../../../files/SuisseIntl-Bold.ttf@v=1704971258')
        format('truetype');
    font-weight: 700;
}

/* SuisseIntl-Regular */
@font-face {
    font-family: 'SuisseInt`l';
    src: url('../../../files/SuisseIntl-Regular_7f8bf387-3520-4f31-bcc9-2c0d3cbb9be2.otf@v=1707215551')
        format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Bigger';
    src: url('../../../files/BiggerDisplayFont.otf') format('opentype');
}

/*Basic Dawn theme styling, sets html and body sizing*/

*,
*::before,
*::after {
    box-sizing: inherit;
    font-family: 'SuisseInt`l';
    font-weight: 400;
    color: var(--body-grey);
}

html {
    box-sizing: border-box;
    font-size: calc(var(--font-body-scale) * 62.5%);
    height: 100%;
}

body {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100%;
    margin: 0;
    font-size: 1.5rem;
}

/*Classes to hide on mobile / hide on desktop */
@media screen and (min-width: 850px) {
    .mobile-only {
        display: none !important;
    }
}

@media screen and (max-width: 850px) {
    .desktop-only {
        display: none !important;
    }
}

/* Hides the 'Skip to content' accessibility link*/
body .skip-to-content-link {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    word-wrap: normal !important;
}

/*Proper text wrapping for firefox/safari*/
.wrap-text {
    word-wrap: break-word;
    white-space: pre-line;
}

/* Styling for universal cta */

a.cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    padding: var(--button-padding) 15px;

    background: var(--aligner-blue-standard);
    border: 1px solid var(--aligner-blue-standard);
    border-radius: 30px;

    color: white;
    text-decoration: none;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);

    transition: ease 0.5s scale;

    text-wrap: nowrap;
}

a.cta:hover {
    scale: 0.95;
}

a.cta:active {
    scale: 0.9;
}

a.cta svg {
    /*display: none;*/
}

@media screen and (min-width: 380px) {
    a.cta {
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
        padding: var(--button-padding) 20px;
    }
}

@media screen and (min-width: 400px) {
    a.cta svg {
        display: block;
    }
}

@media screen and (min-width: 850px) {
    a.cta {
        display: flex;
        align-items: center;
        padding: var(--button-padding) 30px;
        width: fit-content;
    }
}

/* End styling for universal cta*/

/*Styling for the header*/

div.placeholder {
    position: relative;
    background: var(--aligner-blue-light);
}

div.placeholder.active {
}

section.header-group {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 4;
    transition:
        top 0.75s ease,
        border 0.5s ease;
    border-bottom: 1px solid #ffffff00;
    transition:;
}

section.header-group.hidden {
    top: -100%;
}

section.header-group.menu-open {
    border-bottom: 1px solid var(--slideout-grey);
}

.announcement-bar {
    /* background: black; */
    /* background: #e43a36; */
    background: #4378ff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
}

.announcement-bar a {
    color: white;
    text-decoration: none;
    font-size:19px;
    line-height: var(--body-tiny-lh);
}

header.mobile {
    width: 100%;
    padding: 15px var(--spacing-x);
    background: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header.desktop {
    display: none;
}

svg.hamburger {
    width: 5.3vw;
    height: auto;
}

svg.hamburger * {
    transition: transform 0.5s ease;
}

svg.hamburger line#Line_1 {
    transform: translate(0px, 1px);
}

svg.hamburger line#Line_2 {
    transform: translate(0px, 10px);
}

svg.hamburger line#Line_3 {
    transform: translate(0px, 19px);
}

svg.hamburger.active line#Line_1 {
    transform: translate(2px, 2px) rotate(45deg);
}

svg.hamburger.active line#Line_2 {
    transform: translate(calc(0px + 50%), 10px) scale(0);
}

svg.hamburger.active line#Line_3 {
    transform: translate(1px, 19px) rotate(-45deg);
}

svg.hamburger * {
    stroke: var(--body-grey);
    fill: var(--body-grey);
}

a.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

section.header-group svg.sw-logo {
    stroke: var(--body-grey);
    fill: var(--body-grey);
    stroke-width: 0;
    width: 40.4vw;
    height: auto;
}

div.cart-holder {
    width: fit-content;
    position: relative;
    display: flex;
    align-items: center;
}

svg.cart {
    width: 5.8vw;
    height: auto;
}

span.cart-number {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background: var(--body-grey);
    color: white;
    width: 22px;
    height: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
}

/* Custom styling for the landing page header */

header.mobile {
    justify-content: space-between;
    padding: calc(1.5 * var(--spacing-x-tiny));
    padding: var(--spacing-y-minor) calc(1.5 * var(--spacing-x-tiny));
}

div.cart-holder {
    /*display: none;*/
}

svg.hamburger {
    display: none;
}

header a.cta {
    font-size: var(--body-tiny-copy);
    line-height: var(--body-tiny-lh);
}

/* End custom styling for the landing page header */
@media screen and (min-width: 380px) {
    header a.cta {
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
    }
}
@media screen and (min-width: 420px) {
    .announcement-bar a {
        font-size: 19px;
        line-height: var(--body-small-lh);
    }
}

@media screen and (min-width: 850px) {
    header.mobile {
        display: none;
    }

    header.desktop {
        display: flex;
        justify-content: space-between;
        /* padding: 0 var(--spacing-x-major); */
        padding: 0 var(--spacing-x-tiny);
        background: white;
        align-items: center;
    }

    header.desktop a.logo-link {
        /* margin: 0 var(--spacing-x-minor) 0 0; */
        /* margin: 0 30px 0 0; */
        margin: 0 30px 0 60px;
    }

    section.header-group svg.sw-logo {
        stroke: var(--body-grey);
        fill: var(--body-grey);
        stroke-width: 0;
        height: 2vw;
        width: auto;
    }

    section.header-group svg.sw-logo * {
        stroke: var(--body-grey);
        fill: var(--body-grey);
        stroke-width: 0;
    }

    header a.cta {
        /*padding: var(--button-padding) 40px;
        border-radius: 30px;
        border: 1px solid var(--aligner-blue-standard);
        background: var(--aligner-blue-standard);
        margin: 0 var(--spacing-x-tiny) 0 0;
        color: white;
        text-decoration: none;
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
        transition: ease 0.5s scale;*/
    }

    section.header-group svg.cart {
        height: 2.42vw;
        width: auto;
        cursor: pointer;
    }

    section.header-group span.cart-number {
        transform: translate(40%, -30%);
        width: 32px;
        font-size: 17px;
    }

    .header-navigation.desktop {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        /* justify-content: center; */
        justify-content: start;
        /* gap: var(--spacing-x-tiny); */
        gap: 20px;
        flex: 1 0 auto;
        /* padding: 0 var(--spacing-x-minor); */
        height: 100%;
    }

    .header-navigation.desktop .nav-item-primary {
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 100%;
        padding: calc(1.5 * var(--spacing-y-minor)) 0;
    }

    .header-navigation.desktop .nav-item-primary a {
        font-size: var(--body-small-copy);
        text-decoration: none;
        color: var(--body-grey);
    }

    .header-navigation.desktop .sub-menu {
        width: 0;
        position: absolute;
        background: white;
        top: 100%;
        width: max-content;
        padding: 0;
        left: 0;
    }

    .header-navigation.desktop .sub-menu.shown {
        max-width: none;
    }

    .header-navigation.desktop .sub-menu .link-container {
        padding: var(--spacing-y-minor) calc(var(--spacing-x-tiny) / 2);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-y-tiny);
        width: max-content;
        border: 1px solid var(--body-grey-alt);
    }

    .header-navigation.desktop svg.arrowhead {
        width: 15px;
        margin: 0 0 0 10px;
        transform: translate(0, 25%);
    }

    .header-navigation.desktop .info-tag {
        margin: 0 0 0 10px;
        padding: 2px 10px;
    }

    .header-navigation.desktop svg.arrowhead * {
        stroke: var(--body-grey);
        stroke-width: 1px;
    }

    /* Custom styling for the landing page header */

    .header-navigation.desktop {
        /*display: none;*/
    }

    header.desktop {
        padding: var(--spacing-y-minor) var(--spacing-x-major);
    }

    /* End custom styling for the landing page header */
}

/*End of heading styling*/

/*Hero banner Styling (hp-hero.liquid)*/

section.hero-banner {
    height: calc(var(--mobile-height) - var(--header-size));
    background: var(--aligner-blue-light);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

section.hero-banner div.upper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

section.hero-banner h1 {
    font-size: 80px;
    color: var(--heading-black);
    /* font-family: 'Roboto Condensed', sans-serif; */
    font-family: var(--main-heading-font);
    line-height: 75px;
    text-align: center;
    padding: calc(var(--spacing-y-minor) * 1.5) var(--spacing-x) calc(var(--spacing-y-minor) * 1) var(--spacing-x);
    margin: 0;
    font-weight: 400;
    text-wrap: nowrap;
    text-transform: uppercase;
}

section.hero-banner h1 span {
    font-family: var(--main-heading-font);
    font-weight: bold;
    text-transform: uppercase;
}

section.hero-banner p.description {
    display: none;
}

section.hero-banner .hero-cta {
    border: 1px solid black;
    color: black;
    border-radius: 20px;
    text-decoration: none;
    font-size: var(--body-mid-copy);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65vw;
    height: 11.3vw;
    font-weight: 400;
    max-width: 420px;
    max-height: 60px;
    transition: scale 0.5s ease;
}

section.hero-banner .hero-cta.dark {
    color: white;
    background: var(--body-grey);
    border-color: var(--body-grey);
    margin-bottom: calc(var(--spacing-y-minor) * 0.5);
}

section.hero-banner .hero-cta.light {
    color: var(--body-grey);
    background: none;
    border-color: var(--body-grey);
}

a.hero-cta:hover {
    scale: 0.95;
}

a.hero-cta:active {
    scale: 0.9;
}

img.hero-review-img {
    z-index: 1;
    padding: var(--spacing-y-minor) 0;
}

section.hero-banner picture.hero-image {
    /*position: absolute;*/
    width: 100%;
    /*Left -5% is to account for the extra 10% sizing because the image is the wrong size*/
    left: 0;
    bottom: 0;
    /*There is 20px of whitespace on the bottom of the placholder image, so transform to account for that*/
    /*transform: translate(0, 20px);*/
    overflow: hidden;
    flex: 1;
}

section.hero-banner picture.hero-image img {
    max-width: none;
    height: 100%;
    width: 100%;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

@media screen and (min-width: 850px) {
    section.hero-banner {
        flex-direction: row;
    }

    section.hero-banner div.upper {
        width: 50%;
        height: 100%;
        align-items: start;
    }

    section.hero-banner div.upper h1 {
        font-size: 100px;
        line-height: 105px;
        text-align: left;
        padding: calc(var(--spacing-y-major) * 2) var(--spacing-x) calc(var(--spacing-y-minor) * 1)
            var(--spacing-x-major);
        width: 100%;
        font-size: 150px;
        line-height: 130px;

        font-family: var(--main-heading-font);

        text-transform: uppercase;
    }

    section.hero-banner div.upper h1 span {
        font-weight: normal;
        color: #999999;
        font-family: var(--main-heading-font);
        text-transform: uppercase;
    }

    section.hero-banner p.description {
        display: block;
        margin: 0;
        padding: 0;
        padding: 0 var(--spacing-x-major);
        font-size: var(--desktop-body-mid-copy);
        line-height: var(--desktop-body-mid-lh);
        text-wrap: balance;
    }

    section.hero-banner .cta-holder {
        display: flex;
        gap: 20px;
        padding: 0 var(--spacing-x-major);
        width: 100%;
    }

    section.hero-banner div.cta-holder .hero-cta {
        border-radius: 30px;
        width: 15vw;
        margin: var(--spacing-y-major) 0 0 0;
    }

    img.hero-review-img {
        padding: var(--spacing-y-minor) var(--spacing-x-major);
    }

    section.hero-banner picture.hero-image {
        width: auto;
        height: 100%;
    }
}

/*End hero banner*/

/*begin product slider section styling (Product-carousel.liquid)*/

section.featured-products-section {
    margin: 0 0 var(--spacing-y-minor);
    /*padding: var(--spacing-y-minor) 0;*/
}

section.featured-products-section h2.title {
    text-align: left;
    margin: 0;
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    text-wrap: wrap;
    margin: 0 var(--spacing-x-minor) var(--spacing-y-tiny);
}

section.featured-products-section p.strapline {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    margin: var(--spacing-y-minor) var(--spacing-x-minor);
}

section.featured-products-section .glider {
    position: relative;
}

section.featured-products-section .glide__track {
    position: relative;
}

section.featured-products-section .product-card {
    background: var(--product-card-grey);
    /*margin: var(--spacing-y-minor) var(--spacing-x);*/
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 92%;
    max-width: 100%;
    border-radius: 20px;
    padding: var(--spacing-y-major) var(--spacing-y-minor) var(--spacing-y-tiny);
    margin-bottom: 30px;
}

section.featured-products-section .product-card {
    background: var(--product-card-grey);
    margin: var(--spacing-y-minor) var(--spacing-x);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    max-width: 100%;
    border-radius: 20px;
    padding: var(--spacing-y-major) var(--spacing-y-minor) var(--spacing-y-minor);
    margin-bottom: 30px;
}

section.featured-products-section.stacked .product-card {
    margin: var(--spacing-y-major) var(--spacing-x);
}

.glide__slides 0 vpacing-y-minor {
    text-wrap: wrap !important;
}

section.featured-products-section .product-card .img-holder {
    height: 73vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 var(--spacing-y-major);
}

section.featured-products-section .product-card img {
    margin: 0 auto;
    width: auto;
    max-width: 100%;
}

section.featured-products-section .product-card .card-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    flex: 1;
    justify-content: space-between;
    height: fit-content;
    max-height: 100%;
}

section.featured-products-section .product-card h3 {
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
    margin: 0;
    padding: 0;
    color: var(--body-grey);
    padding-bottom: var(--spacing-y-tiny);
    font-weight: 400;
    text-wrap: wrap;
    word-wrap: break-word;
    max-width: 100%;
    white-space: pre-line;
    width: 100%;
    text-align: center;
}

section.featured-products-section .product-card .review-section {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-y-tiny);
    padding-bottom: var(--spacing-y-tiny);
    text-wrap: wrap;
    flex-wrap: wrap;
}

section.featured-products-section .product-card .reviews_text {
    margin: 0;
}

section.featured-products-section .product-card .pricing {
    margin: 0;
    padding: 0;
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
    color: var(--body-grey);
    padding-bottom: var(--spacing-y-tiny);
}

section.featured-products-section .product-card .description {
    margin: 0;
    padding: 0;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: var(--body-grey-another-one);
    padding-bottom: var(--spacing-y-minor);
    text-align: left;
    text-wrap: wrap;
    word-wrap: break-word;
    /* For Firefox/Safari */
    white-space: normal;
    word-break: break-word;
    text-align: left;
    max-width: 100%;
}

section.featured-products-section div.product-card div.icons {
    display: flex;
    gap: var(--spacing-x-tiny);
    margin: 0 auto var(--spacing-y-minor);
}

section.featured-products-section div.product-card div.icons div.icon img {
    max-width: 35px;
}

section.featured-products-section div.product-card div.icons div.icon p.icon-text {
    margin: 0;
}

section.featured-products-section a.cta {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    margin: var(--spacing-y-tiny) var(--spacing-x-minor) calc(1.5 * var(--spacing-y-minor));
}

section.featured-products-section a.cta svg {
    /*position: absolute;
    right: var(--spacing-x-minor);*/
}

section.featured-products-section ajax-cart-product-form {
    width: 100%;
    margin: var(--spacing-y-tiny) 0;
}

section.featured-products-section ajax-cart-product-form button[type='submit'] {
    margin: 0;
    width: 100%;
}

section.featured-products-section .product-card .cta {
    margin: 0;
    text-decoration: none;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: white;
    background: var(--body-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 90px;
    width: 73.9vw;
    height: 11vw;
    border: 1px solid var(--body-grey);
    max-width: 100%;
    padding: var(--button-padding) var(--spacing-x-tiny);
    margin: 0 0 var(--spacing-y-tiny) 0;
    transition: scale 0.5s ease;
}

section.featured-products-section .product-card .cta.inverse {
    background: white;
    color: var(--body-grey);
}

section.featured-products-section .product-card .review-section {
}

.stars {
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

section.featured-products-section .ugc-card,
section.featured-products-section .dentist-card {
    padding: 0;
    overflow: hidden;
    margin: var(--spacing-y-minor) var(--spacing-x-minor);
    margin: var(--spacing-y-minor) calc(0.75 * var(--spacing-x-tiny));
}

section.featured-products-section .dentist-card {
    padding: 0;
    overflow: hidden;
    height: 93%;
}

section.featured-products-section .ugc-card .img-holder,
section.featured-products-section .dentist-card .img-holder {
    height: auto;
    margin: 0;
}

section.featured-products-section .ugc-card .card-content,
section.featured-products-section .dentist-card .card-content {
    padding: var(--spacing-y-minor);
}

section.featured-products-section .ugc-card h3.title {
    text-align: left;
    margin: 0 0 var(--spacing-y-tiny);
    padding: 0;
    font-size: var(--body-big-copy);
}

section.featured-products-section .ugc-card p.pricing,
section.featured-products-section .ugc-card p.description,
section.featured-products-section .ugc-card p.duration {
    font-size: var(--body-mid-copy);
    text-wrap: pretty;
}

section.featured-products-section .product-card .pricing {
    margin: 0 0 calc(0.5 * var(--spacing-y-tiny));
    padding: 0;
}

section.featured-products-section .ugc-card p.description {
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
    padding: 0;
    color: var(--body-grey);
    font-size: var(--body-mid-copy);
    border-bottom: 1px solid var(--slideout-grey);
    width: 100%;
    padding: 0 0 var(--spacing-y-tiny);
}

section.featured-products-section .ugc-card p.duration {
    margin: var(--spacing-y-tiny) 0 0;
    color: var(--body-grey);
    max-width: 100%;
    text-wrap: balance;
    font-size: var(--body-mid-copy);
}

section.featured-products-section .dentist-card p.description {
    padding: 0;
    margin: 0 0 var(--spacing-y-tiny);
}

section.featured-products-section .dentist-card p.dentist-name {
    max-width: 100%;
    text-wrap: balance;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: var(--body-grey);
    font-weight: 400;
    margin: var(--spacing-y-tiny) 0 0 0;
}

section.featured-products-section .video-ugc-card {
    padding: 0;
    overflow: hidden;
    margin: var(--spacing-y-minor) calc(0.75 * var(--spacing-x-tiny));
}

section.featured-products-section .video-ugc-card .video-holder video {
    max-width: 100%;
    aspect-ratio: 0.85/1;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

section.featured-products-section .video-ugc-card .card-content {
    padding: var(--spacing-y-tiny) var(--spacing-x-minor);
}

section.featured-products-section .video-ugc-card .card-content hr {
    width: 100%;
    margin: var(--spacing-y-tiny) 0;
}

section.featured-products-section .video-ugc-card .card-content p.title {
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
    margin: 0;
    padding: 0;
    color: var(--body-grey);
    border-bottom: 1px solid var(--slideout-grey);
    padding-bottom: var(--spacing-y-tiny);
    width: 100%;
}

section.featured-products-section .video-ugc-card .card-content p.description {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    margin: 0;
    padding: 0;
    color: var(--body-grey);
    border-bottom: 1px solid var(--slideout-grey);
    padding: var(--spacing-y-tiny) 0;
    width: 100%;
}

section.featured-products-section .video-ugc-card .card-content p.duration {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    margin: 0;
    padding: 0;
    color: var(--body-grey);
    margin: var(--spacing-y-tiny) 0;
}

section.featured-products-section .glide__arrows {
    /*margin-bottom: var(--spacing-x-minor);*/
}

section.featured-products-section .glide__arrows.tabs button.glide__arrow {
    position: absolute;
    top: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--aligner-blue-standard);
    background: var(--body-grey);
    /*backdrop-filter: blur(30px);*/
    padding: 10px;
    border-radius: 30px;
}

section.featured-products-section .glide__arrows.tabs button.glide__arrow svg {
    width: 20px;
    height: auto;
}

section.featured-products-section .glide__arrows.tabs button.glide__arrow.glide__arrow--right svg {
    transform: scale(0.65) translate(-15%, 0);
}

section.featured-products-section .glide__arrows.tabs button.glide__arrow.glide__arrow--left svg {
    transform: scale(0.65) translate(15%, 0);
}

section.featured-products-section .glide__arrows.tabs button.glide__arrow svg * {
    stroke: white;
}
section.featured-products-section .glide__arrows.tabs button.glide__arrow.glide__arrow--right {
    right: 4px;
}

section.featured-products-section .glide__arrows.tabs button.glide__arrow.glide__arrow--left {
    left: 4px;
}

section.featured-products-section .glide__arrows .slide-counter {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
}

button.glide__arrow {
    background: none;
    border: none;
}

.glide__arrows {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 850px) {
    section.featured-products-section h2.title {
        /*Added 20px to account for the carousel having unintended 'padding' of around 20px - do not know how to remove*/
        margin: 0 calc(20px + var(--spacing-x-major)) var(--spacing-y-major);
    }
    section.featured-products-section h2.title.center {
        text-align: center;
    }

    section.featured-products-section p.strapline.center {
        text-align: center;
    }

    section.featured-products-section .product-card .img-holder {
        height: 16.5vw;
    }

    section.featured-products-section .product-card {
        margin: var(--spacing-y-minor) calc(var(--spacing-x-tiny) * 0.5);
    }

    section.featured-products-section div.glider {
        margin: 0 var(--spacing-x-major);
    }

    /*section.featured-products-section .ugc-card .card-content,
    section.featured-products-section .dentist-card .card-content {
        padding: var(--spacing-y-minor) var(--spacing-x-major);
    }*/

    section.featured-products-section .product-card .cta {
        width: 100%;
        height: auto;
    }

    section.featured-products-section .product-card .pricing {
        font-size: var(--mobile-body-mid-copy);
        line-height: var(--mobile-body-mid-lh);
    }

    section.featured-products-section .product-card .description {
        text-align: left;
        font-size: var(--mobile-body-tiny-copy);
        line-height: var(--mobile-body-tiny-lh);
    }

    section.featured-products-section div.product-card div.icons {
        margin: var(--spacing-y-minor) 0;
    }

    section.featured-products-section a.cta {
        width: fit-content;
        height: auto;
        padding: var(--button-padding) var(--spacing-x-tiny);
        transition: scale 0.5s ease;
        margin: calc(var(--spacing-y-major) - 22.5px) auto var(--spacing-y-major);
    }

    section.featured-products-section.stacked div:nth-child(odd) > div.product-card {
        flex-direction: row-reverse;
    }

    section.featured-products-section.stacked div:nth-child(even) > div.product-card {
        flex-direction: row;
    }

    section.featured-products-section.stacked div.product-card {
        padding: calc(var(--spacing-y-major) * 1.5) calc(var(--spacing-x-minor) * 2);
        margin-left: 0;
        margin-right: 0;
        gap: 180px;
    }

    section.featured-products-section.stacked div.product-card .img-holder {
        height: auto;
        margin: 0;
    }

    section.featured-products-section.stacked div.product-card .img-holder img {
        width: 100%;
    }

    section.featured-products-section.stacked div.product-card div.img-holder {
        width: 60%;
    }

    section.featured-products-section.stacked div.product-card h3.title {
        text-align: left;
    }

    section.featured-products-section.stacked div.product-card .card-content {
        width: 40%;
    }

    section.featured-products-section.stacked .product-card .description {
        text-align: left;
        font-size: var(--mobile-body-mid-copy);
        line-height: var(--mobile-body-mid-lh);
    }

    section.featured-products-section.stacked a.cta {
        font-size: var(--mobile-body-mid-copy);
        width: 90%;
    }

    section.featured-products-section .product-card * {
        user-select: none;
    }

    section.featured-products-section .video-ugc-card .card-content {
        padding: var(--spacing-y-minor) var(--spacing-x-tiny) var(--spacing-y-major);
    }

    section.featured-products-section .video-ugc-card .card-content p.title {
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
    }

    section.featured-products-section .video-ugc-card .card-content p.duration,
    section.featured-products-section .video-ugc-card .card-content p.description {
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
    }

    section.featured-products-section .ugc-card .img-holder,
    section.featured-products-section .dentist-card .img-holder {
        height: auto;
    }

    section.featured-products-section .ugc-card h3.title {
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
    }

    section.featured-products-section .ugc-card p.description {
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
    }

    section.featured-products-section .ugc-card p.duration {
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
    }

    section.featured-products-section .dentist-card p.description {
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
        margin: 0;
    }

    section.featured-products-section .dentist-card p.dentist-name {
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
    }
}

/*End product slider styling*/

/* Styling for steps carousel 'steps-carousel.liquid'*/

section.steps-carousel {
    padding: var(--spacing-y-minor) 0;
}

section.steps-carousel h2.title {
    /* margin: 0 var(--spacing-x); */
    text-align: center;
    font-size: var(--heading-copy);
    font-weight: 400;
    line-height: var(--heading-lh);
    padding: 0 0 var(--spacing-y-tiny);
    margin: 0;
}

section.steps-carousel h2.description {
    margin: var(--spacing-y-minor) var(--spacing-x-major);
    text-align: left;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    padding: 0px;
}

section.steps-carousel div.steps-card:first-child {
    border-radius: 20px 0 0 20px;
}

section.steps-carousel div.steps-card:last-child {
    border-radius: 0 20px 20px 0;
}

section.steps-carousel div.steps-card:only-child {
    border-radius: 20px;
}

section.steps-carousel .steps-glider {
    border-radius: 20px;
    margin: 0 var(--spacing-x) var(--spacing-y-tiny);
    overflow: hidden;
}

section.steps-carousel div.steps-card {
    width: 100%;
    /*margin: 0 var(--spacing-y-minor);*/
    background: var(--whitening-purple-light);
    min-height: 144vw;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding: var(--spacing-y-minor) var(--spacing-y-tiny) 0;
    color: white;
    z-index: 1;
    padding: var(--spacing-y-minor) 0;
}

section.steps-carousel div.steps-card::after {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--steps-gradient);
    /* For browsers that do not support gradients */
    background: -webkit-var(--steps-gradient);
    background: -moz-var(--steps-gradient);
    background: -o-var(--steps-gradient);
    background: -ms-var(--steps-gradient);
}

section.steps-carousel div.steps-card * {
    z-index: 2;
}

section.steps-carousel div.steps-card .steps-number {
    font-size: var(--body-mid-copy);
    margin: 0;
    text-align: center;
}

section.steps-carousel div.steps-card .title {
    margin: 0;
    font-size: var(--heading-copy);
}

section.steps-carousel div.steps-card .description {
    margin: 0;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    text-align: center;
    padding: var(--spacing-y-tiny) var(--spacing-x-minor) var(--spacing-y-minor);
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
}

section.steps-carousel div.steps-card .next {
    margin: 0;
    background: none;
    border: none;
    color: white;
    font-size: var(--body-mid-copy);
    width: 50.6vw;
    height: 11.3vw;
    border-radius: 30px;
    border: 1px solid white;
    background: #3b3b3b66;
}

section.steps-carousel a.cta {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: white;
    background: var(--body-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 90px;
    width: 73.9vw;
    height: 11vw;
    border: 1px solid var(--body-grey);
    max-width: 100%;
    margin: var(--spacing-y-minor) auto 0;
}

section.steps-carousel .cta {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: white;
    background: var(--body-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 90px;
    width: 73.9vw;
    height: 11vw;
    border: 1px solid var(--body-grey);
    max-width: 100%;
}

@media screen and (min-width: 850px) {
    section.steps-carousel div.steps-card {
        height: 30vw;
        min-height: 0;
        width: 100%;
    }

    section.steps-carousel .steps-glider {
        margin: 0 var(--spacing-x-major) var(--spacing-y-tiny);
    }

    section.steps-carousel div.steps-card {
        align-items: start;
        padding: calc(var(--spacing-y-major) * 2) var(--spacing-x-major);
    }

    section.steps-carousel h2.description {
        text-align: center;
    }

    section.steps-carousel div.steps-card .description {
        padding: var(--spacing-y-tiny) 0 var(--spacing-y-minor);
        text-align: left;
    }

    section.steps-carousel div.steps-card .next {
        border-radius: 30px;
        height: auto;
        padding: var(--button-padding) 42px;
        width: fit-content;
    }

    section.steps-carousel div.steps-card {
        justify-content: center;
    }

    section.steps-carousel a.cta {
        width: fit-content;
        height: auto;
        padding: var(--button-padding) 60px;
    }
}

/* end styling for steps carousel*/

/*Styling for the featured carousel*/

.featured-carousel {
    padding: var(--spacing-y-minor) 0;
}

.featured-carousel .featured-glider {
    margin: 0 0 var(--spacing-y-minor);
}

.featured-carousel .featured-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-x);
}

.featured-carousel h2.title {
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    margin: 0 0 var(--spacing-y-minor);
    text-align: center;
}

.featured-carousel .image {
    max-width: 75%;
    margin: 0 0 var(--spacing-y-major);
}

.featured-carousel .strap {
    margin: 0;
    padding: 0;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    font-weight: 500;
    padding: 0 0 var(--spacing-y-tiny);
}

.featured-carousel .desc {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    text-wrap: balance;
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
}

@media screen and (min-width: 850px) {
    .featured-carousel {
        padding: 0;
        margin: var(--spacing-y-major) 0;
    }

    .featured-carousel .featured-glider {
        margin: 0 var(--spacing-x-major) var(--spacing-y-minor);
    }

    .featured-carousel h2.title {
        margin: 0 0 calc(1 * var(--spacing-y-major));
    }
}

/* End styling for the featured carousel*/

/* Styling for the icons-with-text.liquid section*/

section.icons-with-text {
    text-align: center;
    margin: var(--spacing-y-minor) 0;
}

section.icons-with-text h2.title {
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    margin: 0;
}

section.icons-with-text .icon {
    max-width: 11.6vw;
    margin: var(--spacing-y-major) auto 0;
}

section.icons-with-text p.text {
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
    margin: var(--spacing-y-minor) 0 0;
}

@media screen and (min-width: 850px) {
    section.icons-with-text {
        margin: var(--spacing-y-major) 0;
        padding: var(--spacing-y-major) 0;
    }

    section.icons-with-text .icon {
        max-width: 3vw;
        margin: 0 auto var(--spacing-y-minor);
    }

    section.icons-with-text .icons-holder {
        display: flex;
        justify-content: center;
        gap: var(--spacing-x-major);
        align-items: stretch;
    }

    section.icons-with-text .icon-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* End styling for the icons-with-text.liquid section*/

/* Styling for the video carousel section 'video-carousel.liquid'*/

section.video-carousel {
    text-align: center;
    padding: var(--spacing-y-minor) 0px;
}

section.video-carousel h2.title {
    margin: 0 var(--spacing-x) var(--spacing-y-minor);
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    text-wrap: balance;
}

section.video-carousel .video-card {
    display: flex;
    position: relative;
}

section.video-carousel .video-card video {
    max-width: calc(100% - var(--spacing-x) * 2);
    width: 100%;
    margin: 0 var(--spacing-x) var(--spacing-y-tiny);
    border-radius: 20px;
    aspect-ratio: 1/1;
    object-fit: contain;
}

section.video-carousel .img-card img.image {
    max-width: calc(100% - var(--spacing-x) * 2);
    width: 100%;
    margin: 0 var(--spacing-x) var(--spacing-y-tiny);
    border-radius: 20px;
    aspect-ratio: 1/1;
    object-fit: contain;
}

section.video-carousel a.cta {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: var(--body-grey);
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 90px;
    width: 73.9vw;
    height: 11vw;
    border: 1px solid var(--body-grey);
    max-width: 100%;
    margin: var(--spacing-y-minor) auto 0;
}

section.video-carousel a.cta.inverse {
    background: var(--body-grey);
    color: white;
}

@media screen and (min-width: 850px) {
    section.video-carousel {
        margin: var(--spacing-y-major) 0 0;
    }

    section.video-carousel h2.title {
        margin: 0 var(--spacing-x-major) var(--spacing-y-major);
    }

    section.video-carousel .video-card video {
        margin: 0 0 var(--spacing-y-tiny);
        max-width: none;
    }

    .video-glider {
        margin: 0 var(--spacing-x-major);
    }
}

/* End styling for the video carousel section 'video-carousel.liquid'*/

/* Styling for the logo carousel section 'logo-area.liquid'*/

section.logo-carousel {
    text-align: center;
    padding: var(--spacing-y-minor) var(--spacing-x-minor);
}

section.logo-carousel .img-card img.image {
    width: 100%;
    border-radius: 20px;
    aspect-ratio: 5/1;
    object-fit: contain;
}

section.logo-carousel svg {
    /*min-width: 100px;*/
    height: auto;
}

section.logo-carousel a.cta {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: var(--body-grey);
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 90px;
    width: 73.9vw;
    height: 11vw;
    border: 1px solid var(--body-grey);
    max-width: 100%;
    margin: var(--spacing-y-minor) auto 0;
}

section.video-carousel a.cta.inverse {
    background: var(--body-grey);
    color: white;
}

@media screen and (min-width: 850px) {
    section.logo-carousel {
        margin: 0 calc(1.5 * var(--spacing-x-major)) var(--spacing-y-major);
        display: flex;
        align-items: stretch;
        justify-content: center;
        padding: 0;
    }

    section.logo-carousel h2.title {
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
        display: flex;
        align-items: center;
        margin: 0;
        flex: 1 0 auto;
    }

    section.logo-carousel svg {
        width: 200px;
        height: auto;
        margin: 0 auto;
    }

    section.logo-carousel .img-card img.image {
        aspect-ratio: 9/1;
    }

    .logo-glider {
        /*       margin: 0 var(--spacing-x-major);*/
        max-width: 800px;
    }
}

@media screen and (min-width: 1500px) {
    section.logo-carousel h2.title {
        flex: inital;
        max-width: fit-content;
    }
}

/* End styling for the logo carousel section 'logo-area.liquid'*/

/* Styling for the Dentist Locator (dentist-locator.liquid)*/

section.dentist-locator {
    margin: var(--spacing-y-major) 0;
}

@media screen and (min-width: 850px) {
    section.dentist-locator {
        margin: var(--spacing-y-minor) var(--spacing-x-major);
        border-radius: 30px;
        overflow: hidden;
    }
}

/* End styling for the Dentist Locator (dentist-locator.liquid)*/

/*Styling for the footer (footer.liquid)*/

footer.footer {
    background: var(--footer-grey);
    color: white;
    padding: var(--spacing-y-major) 0 0;
}

footer.footer * {
    color: white;
}

footer.footer h2.title {
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    padding: var(--spacing-y-major) 0 var(--spacing-y-tiny);
    margin: 0;
    text-align: center;
}

footer.footer p.desc {
    padding: 0 var(--spacing-x);
    text-align: center;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    font-weight: 400;
    margin: 0 0 var(--spacing-y-major);
}

footer.footer div.cta-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 var(--spacing-y-minor);
}

footer.footer a.cta {
    /* color: var(--body-grey);
    text-decoration: none;
    background: white;
    padding: 10px 30px;
    border-radius: 30px;*/
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
}

footer.footer .mobile-video-holder video {
    max-width: calc(100% - var(--spacing-x-major));
    /* padding: 0 var( --spacing-x); */
    width: auto;
    margin: 0 var(--spacing-x);
    border-radius: 20px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

footer.footer .desktop-video-holder video {
    display: none;
}

footer.footer p.register-text {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    margin: 0;
    margin: 0 auto;
    text-align: center;
    padding: var(--spacing-y-minor) 0 var(--spacing-y-tiny);
    width: 75%;
}

footer.footer .register-input-holder {
    position: relative;
    margin: 0 var(--spacing-x-minor);
}

footer.footer input.register-input {
    background: white;
    border: 1px solid white;
    border-radius: 30px;
    width: 100%;
    padding: 10px 30px;
    display: block;
    font-size: var(--footer-copy);
    line-height: var(--footer-lh);
    color: var(--body-grey);
}

footer.footer input.register-input::placeholder {
    font-size: var(--footer-copy);
    line-height: var(--footer-lh);
    color: var(--body-grey);
    opacity: 0.8;
}

footer.footer div.register-input-holder svg.right-arrow {
    position: absolute;
    bottom: 0;
    right: 20px;
    top: 50%;
    transform: translate(0px, -50%);
}

footer.footer div.register-input-holder svg.right-arrow * {
    stroke: var(--body-grey);
}

footer.footer .socials {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    gap: 20px;
    padding: var(--spacing-y-minor) 0 var(--spacing-y-major);
}

footer.footer .socials svg.logo.meta {
    /*display: none;*/
}

footer .divider {
    background: #e5e5e5;
    width: 100%;
    height: 1px;
    content: ' ';
}

ul.footer-navigation * {
    color: white;
    text-decoration: none;
    list-style-type: none;
}

footer.footer svg.arrowhead {
    width: 30px;
    height: auto;
}

footer.footer svg.arrowhead * {
    stroke: white;
}

.sub-menu {
    overflow: hidden;
    transition: max-height 0.3s ease;
    height: auto;
    max-height: 0;
    margin: 0;
    padding: 0 var(--spacing-x-tiny);
}

.sub-menu.shown {
}

ul.footer-navigation {
    margin: 0 auto;
    padding: var(--spacing-y-minor) var(--spacing-x) 0;
    font-size: var(--body-mid-copy);
    line-height: 40px;
}

footer.footer svg.arrowhead {
    width: var(--body-mid-copy);
    height: auto;
    margin: 0px 0 0 20px;
    transition: 0.3s ease transform;
    transform: translate(0, 25%);
}

/*section.slideout-menu svg.arrowhead {
    position: absolute;
    right: 0;
    width: calc(var(--body-mid-copy) - 5px);
    top: var(--spacing-y-minor);
    width: 22px;
}

section.slideout-menu svg.arrowhead * {
    stroke: var(--slideout-grey);
}*/

footer.footer svg.arrowhead line {
    transition:
        transform 0.5s ease,
        stroke-width 0.5s ease;
    stroke-width: 1px;
    transform: none;
    stroke: white;
}

footer.footer svg.arrowhead.flipped line.st1 {
    /* transform: translate(25%, 20%); */
    transform: scale(1.5) translate(4%, 2%);
    stroke-width: 0.75px;
}

footer.footer svg.arrowhead.flipped line.st0 {
    /* transform: translate(-22%, 20%); */
    /* transform: rotate(5deg); */
    transform: scale(1.5) translate(-43%, 2%);
    stroke-width: 0.75px;
}

.compliance-text {
    padding: var(--spacing-y-major) var(--spacing-x-minor) var(--spacing-y-minor);
}

.copyright-notice {
    padding: 0 var(--spacing-x) var(--spacing-y-major);
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
}

@media screen and (min-width: 850px) {
    footer.footer .desktop-video-holder {
        padding: var(--spacing-y-minor) var(--spacing-x-major);
    }

    footer.footer .mobile-video-holder video {
        display: none;
    }

    footer.footer .desktop-video-holder video {
        display: block;
        width: 100%;
        border-radius: 40px;
    }

    footer.footer .register-input-holder {
        width: 45%;
        margin: 0 auto;
    }
}

/*End styling for the footer (footer.liquid)*/

/*Styling for the slide out menu (slideout-menu.liquid)*/

.overlay {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: var(--body-grey);
    opacity: 0;
    transition: opacity 0.5s ease;
    /* z-index: -99999; */
    z-index: -1;
}

.overlay.active {
    left: 0;
    opacity: 0.8;
    z-index: 2;
}

section.closed.slideout-menu {
    left: -95vw;
}

.slideout-menu {
    position: fixed;
    height: var(--mobile-height);
    width: 95vw;
    top: 0;
    left: 0;
    z-index: 20;
    transition: left 0.5s ease;
    height: calc(var(--mobile-height) - var(--header-size) + 1px);
    top: calc(var(--header-size) - 1px);
    background: white;
    padding: var(--spacing-y-major) var(--spacing-x-minor);
}
.slideout-menu.with-btn{
    height: calc(var(--mobile-height) - 94px + 1px);
    top: calc(94px - 1px);
}

section.slideout-menu li {
    text-decoration: none;
    list-style: none;
}

section.slideout-menu li.nav-item-primary {
    border-top: 1px solid var(--slideout-grey);
    padding: var(--spacing-y-tiny) 0 calc(var(--spacing-y-tiny) * 1.25);
    position: relative;
}

section.slideout-menu li a {
    text-decoration: none;
    color: var(--body-grey);
}

.info-tag {
    font-size: var(--footer-copy);
    color: white;
    padding: 6px 9px;
    border-radius: 10px;
    margin: 0 0 0 var(--spacing-x-tiny);
}

li.nav-item-secondary {
    margin: calc(var(--spacing-y-tiny)) 0;
}

section.slideout-menu svg.arrowhead {
    position: absolute;
    right: 0;
    width: calc(var(--body-mid-copy) - 5px);
    top: var(--spacing-y-minor);
    transform: translate(0, -25%);
}

section.slideout-menu svg.arrowhead * {
    stroke: var(--slideout-grey);
}

section.slideout-menu svg.arrowhead line {
    transition:
        transform 0.5s ease,
        stroke-width 0.5s ease;
    stroke-width: 1px;
    transform: none;
    stroke: var(--slideout-grey);
}

section.slideout-menu svg.arrowhead.flipped line.st1 {
    /* transform: translate(25%, 20%); */
    transform: scale(1.5) translate(4%, 2%);
    stroke-width: 0.75px;
}

section.slideout-menu svg.arrowhead.flipped line.st0 {
    /* transform: translate(-22%, 20%); */
    /* transform: rotate(5deg); */
    transform: scale(1.5) translate(-43%, 2%);
    stroke-width: 0.75px;
}

@media screen and (max-width: 850px) {
    body.fix-mobile {
        overflow: hidden;
    }

    body.fix-desktop {
        overflow: hidden;
    }
}

@media screen and (min-width: 850px) {
    body.fix-desktop {
        overflow: hidden;
        padding-right: 10px;
    }

    body.fix-mobile {
        overflow: hidden;
        padding-right: 10px;
    }

    .info-tag {
        border-radius: 5px;
    }
}

/*End styling for the slide out menu (slideout-menu.liquid)*/

/*Start miscellaneous desktop styling*/

@media screen and (max-width: 400px) {
    section.hero-banner h1 {
        font-size: 70px;
        line-height: 65px;
    }

    img.hero-review-img {
        padding: var(--spacing-y-tiny) 0;
    }
}

@media screen and (max-width: 376px) {
    section.hero-banner h1 {
        font-size: 60px;
        line-height: 54px;
    }

    img.hero-review-img {
        padding: var(--spacing-y-tiny) 0;
    }
}

/*End miscellaneous desktop styling*/

/*Styling for Product Info section (product-info.liquid)*/

section.product {
    padding: 0 0 var(--spacing-y-minor);
}

section.product div.product-carousel {
}

section.product .product-image {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 5/4;
    object-fit: cover;
}

.desktop-image-picker {
    display: none;
}

img.product-image {
}

section.product .glide__arrows {
    margin: var(--spacing-y-minor) 0 0;
}

section.product .product-info-controls {
    font-size: var(--body-mid-copy);
}

section.product .reviews {
    display: flex;
    align-items: stretch;
    color: var(--body-grey-alt);
    padding: var(--spacing-y-tiny) var(--spacing-x-minor) var(--spacing-y-minor);
}

section.product .reviews svg {
}

section.product .trustpilot-score {
    margin: 0;
    display: flex;
    align-items: center;
    height: 19px;
    font-size: var(--body-small-copy);
    margin: 0 0 0 calc(var(--spacing-x-tiny) * 0.5);
    transform: translate(0, 15%);
}

section.product h1 {
    padding: 0 var(--spacing-x-minor);
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    margin: 0;
}

section.product h2.price {
    font-size: var(--heading-small-copy);
    line-height: var(--heading-small-lh);
    padding: 0 var(--spacing-x-minor);
}

div.cta-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-y-tiny);
    margin: 0 0 var(--spacing-y-minor);
}

section.product button.cta.one {
    width: calc(100% - var(--spacing-x-minor) * 2);
    margin: 0 var(--spacing-x-minor);
    background: var(--body-grey);
    border: none;
    /* border-radius: 100px; */
    padding: var(--spacing-y-tiny) 0;
    color: white;
    font-size: var(--body-mid-copy);
}

section.product button.cta.one a {
    color: white;
    text-decoration: none;
    font-size: var(--body-mid-copy);
}

section.product button.cta.two {
    width: calc(100% - var(--spacing-x-minor) * 2);
    margin: 0 var(--spacing-x-minor);
    background: white;
    border: 1px solid var(--body-grey);
    border-radius: 100px;
    padding: var(--spacing-y-tiny) var(--spacing-x-tiny);
}

section.product button.cta.two a {
    color: var(--body-grey);
    text-decoration: none;
    font-size: var(--body-small-copy);
    display: flex;
    align-items: center;
    justify-content: center;
}

section.product button.cta.two a span {
    text-align: left;
    width: 60px;
}

p.delivery-reminder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    margin: 0 var(--spacing-x-minor);
}

section.product div.product-description {
    padding: 0 var(--spacing-x-minor);
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
}

section.product .accordion {
    margin: var(--spacing-y-minor) 0;
}

section.product .accordion {
    padding: 0 var(--spacing-x-minor);
}

section.product .accordion-button {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    padding: var(--spacing-x-tiny) var(--spacing-x-minor) var(--spacing-y-tiny) var(--spacing-y-tiny);
    border-bottom: 1px solid var(--slideout-grey);
    position: relative;
}

section.product .accordion-button svg.arrowhead {
    transition: 0.5s ease transform;
    transform: rotate(0deg) translate(0px, -25%);
    position: absolute;
    right: 0;
    width: 12px;
    top: 50%;
}

section.product .accordion-button.active svg.arrowhead {
    /*transform: rotate(-180deg) translate(0px, -25%);*/
}

section.product .accordion-button svg.arrowhead * {
    stroke: var(--body-grey-alt);
}

section.product .accordion-button svg.arrowhead line {
    transition:
        transform 0.5s ease,
        stroke-width 0.5s ease;
    stroke-width: 1px;
    transform: none;
    stroke: var(--slideout-grey);
}

section.product .accordion-button.active svg.arrowhead line.st1 {
    /* transform: translate(25%, 20%); */
    transform: scale(1.5) translate(4%, 2%);
    stroke-width: 0.75px;
}

section.product .accordion-button.active svg.arrowhead line.st0 {
    /* transform: translate(-22%, 20%); */
    /* transform: rotate(5deg); */
    transform: scale(1.5) translate(-43%, 2%);
    stroke-width: 0.75px;
}

section.product .accordion-content {
    overflow: hidden;
    transition:
        padding 0.5s ease,
        max-height 0.5s ease;
    max-height: 0;
    height: 100%;
    font-size: var(--body-small-copy) 0;
}

section.product .accordion-content.active {
}

section.product .accordion-content div.inside {
    padding: var(--spacing-y-tiny) 0;
}

section.product div.add-to-cart-section {
    display: flex;
    margin: 0 var(--spacing-x-minor);
    gap: var(--spacing-x-tiny);
}

section.product div.add-to-cart-section button#AddToCart {
    margin: 0;
}

section.product .add-to-cart-section .quantity-picker {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-x-tiny);
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    height: 100%;
}

section.product .add-to-cart-section .quantity-picker label {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
}

section.product .add-to-cart-section .quantity-picker input {
    text-align: center;
    width: 33vw;
    border: 1px solid var(--body-grey);
    border-radius: 30px;
    padding: var(--button-padding) 10px;
    height: 100%;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    user-select: none;
}

/* Hide the default number input controls */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type='number'] {
    -moz-appearance: textfield;
}

@media screen and (max-width: 420px) {
    button.cta.two a {
        display: inline;
    }
}

@media screen and (max-width: 390px) {
    section.product .trustpilot-score {
        font-size: var(--body-small-copy);
        transform: translate(0, 23%);
    }
}

@media screen and (min-width: 850px) {
    section.product {
        display: flex;
    }

    section.product .left-section,
    section.product .right-section {
        width: 50%;
    }

    section.product .left-section {
        padding: var(--spacing-y-major) var(--spacing-x-tiny);
        display: flex;
        flex-direction: column;
        align-items: center;
        max-height: calc(100vh - var(--header-size));
        justify-content: center;
        /* justify-content: flex-start; */
    }

    section.product .right-section {
        padding: var(--spacing-y-major) var(--spacing-x-minor) var(--spacing-y-major) 0px;
    }

    section.product .carousel-holder {
        height: auto;
        aspect-ratio: 5/4;
        width: 85%;
        overflow: hidden;
    }

    section.product .desktop-image-picker {
        display: flex;
        margin: var(--spacing-y-tiny) 0;
        gap: 4.3%;
        justify-content: space-between;
        width: 85%;
        flex: 1;
    }

    section.product .desktop-image-picker .image-card {
        width: 23%;
        height: 100%;
    }

    section.product .desktop-image-picker .image-card img {
        aspect-ratio: 5/4;
    }

    section.product div.product-carousel {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    section.product div.product-carousel img {
        max-height: 75%;
    }

    section.product div.product-carousel .glide__arrows {
        flex: 1;
    }

    section.product div.product-carousel .glide__arrows .slide-counter {
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
    }

    section.product div.product-carousel .glide__track {
    }

    section.product div.product-carousel .glide__track * {
        max-height: 100%;
    }

    section.product div.cta-block {
        margin: 0 0 var(--spacing-y-minor);
        padding: 0 var(--spacing-x-minor) 0;
    }

    section.product .reviews {
        padding: 0 var(--spacing-x-minor) var(--spacing-y-minor);
    }

    section.product button.cta.one {
        width: 100%;
        margin: 0;
    }

    section.product button.cta.two {
        width: 100%;
        margin: 0;
    }

    section.product input#Quantity {
        width: 100%;
    }

    section.product .quantity-picker span.plus {
        position: absolute;
        right: var(--spacing-x-tiny);
    }

    section.product .quantity-picker span.minus {
        position: absolute;
        left: var(--spacing-x-tiny);
    }

    section.product div.product-description {
        font-size: var(--mobile-body-mid-copy);
        line-height: var(--mobile-body-mid-lh);
    }

    section.product p.delivery-reminder {
        font-size: var(--mobile-body-small-copy);
        line-height: var(--mobile-body-small-lh);
    }

    section.product .accordion-button {
        font-size: var(--mobile-body-mid-copy);
        line-height: var(--mobile-body-mid-lh);
        padding: var(--spacing-y-tiny) var(--spacing-x-minor) var(--spacing-y-tiny) var(--spacing-x-tiny);
    }
}

/*End styling for Product Info section (product-info.liquid)*/

/*Styling for Product Info Aligner PDP section (product-info-aligner-info.liquid)*/

section.product.aligner-pdp {
    min-height: auto; /*calc(100vh - var(--header-size));*/
    padding: 0;
    margin: 0 0 var(--spacing-y-minor);
}

section.product.aligner-pdp .compliance-text {
    font-size: 10px;
    margin: 20px 0;
    line-height: 12px;
    color: #bbbbbb;
    text-align: left;
    padding: 0;
}

section.product.aligner-pdp div.left-section {
    display: flex;
    flex-direction: row;
    align-items: start;
    padding: 0;
    width: 100%;
}

section.product.aligner-pdp div.left-section .holder {
    max-width: 50%;
    width: auto;
    position: relative;
    border-radius: 0;
}

section.product.aligner-pdp div.left-section img {
    width: auto;
    border-radius: 0px;
    max-width: 100%;
    display: block;
}

span.label {
    position: absolute;
    left: 0;
    top: 20px;
    left: 50%;
    background: white;
    color: var(--aligner-blue-standard);
    border: 1px solid var(--aligner-blue-standard);
    padding: 8px 12px;
    border-radius: 30px;
    width: 65%;
    text-align: center;
    transform: translate(-50%, 0);
    font-size: var(--body-small-copy);
    line-height: var(--body-small-copy);
}

section.product.aligner-pdp .right-section {
    padding: var(--spacing-y-minor) var(--spacing-x-minor) 0 var(--spacing-x-minor);
    width: 100%;
}

section.product.aligner-pdp div.right-section .trustpilot-widget {
    width: fit-content;
    margin: 0 0 var(--spacing-y-minor);
}

section.product.aligner-pdp div.right-section .trustpilot-widget iframe {
    margin-left: -10px;
}

section.product.aligner-pdp .right-section h1 {
    padding: 0;
    margin: var(--spacing-y-minor) 0;
}

section.product.aligner-pdp .right-section h1.zuume {
    font-family: 'Zuume';
    font-weight: bold;
    font-size: 50px;
    line-height: 45px;
}

section.product.aligner-pdp .right-section p.product-description {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    margin: var(--spacing-y-tiny) 0;
}

section.product.aligner-pdp .right-section a.cta {
    margin: var(--spacing-y-major) 0;
    width: auto;
}

section.product.aligner-pdp .right-section a.cta svg {
    /*position: absolute;
    top: 50%;
    right: var(--spacing-x-minor);
    transform: translate(0, -50%);*/
}

section.product.aligner-pdp .right-section p.delivery-reminder {
    justify-content: start;
    margin: var(--spacing-y-minor) auto;
    gap: 10px;
    width: fit-content;
}

section.product.aligner-pdp .right-section p.delivery-reminder svg {
    width: 30px;
    height: auto;
    flex: 1 0 auto;
}

section.product.aligner-pdp .right-section p.delivery-reminder strong {
    text-transform: uppercase;
    font-weight: 500;
}

section.product.aligner-pdp .right-section klarna-placement {
    display: block;
}

section.product.aligner-pdp .right-section klarna-placement::part(osm-message) {
    font-size: var(--button-padding);
}

section.product.aligner-pdp .right-section klarna-placement::part(osm-cta) {
    font-size: var(--button-padding);
}

section.product.aligner-pdp .right-section klarna-placement::part(osm-container) {
    background: var(--product-card-grey);
    border-radius: 5px;
}

@media screen and (min-width: 850px) {
    section.product.aligner-pdp {
        height: auto; /*calc(100vh - var(--header-size));*/
        margin: 0;
        min-height: calc(var(--mobile-height) - (var(--header-size) + 1px));
    }

    section.product.aligner-pdp div.left-section {
        flex-direction: row;
        align-items: start;
        padding: 0 0 0 var(--spacing-x-minor);
        width: 60%;
    }

    section.product.aligner-pdp div.left-section .holder {
        max-width: 50%;
        width: 100%;
        padding: 10px;
        position: relative;
        border-radius: 0;
    }

    section.product.aligner-pdp div.left-section img {
        border-radius: 10px;
        width: 100%;
    }

    span.label {
        max-width: 180px;
        left: 7%;
        transform: none;
        top: 5%;
    }

    section.product.aligner-pdp .right-section {
        padding: 0 var(--spacing-x-minor) 0 var(--spacing-x-minor);
        width: 45%;
    }

    section.product.aligner-pdp div.right-section .trustpilot-widget {
        width: fit-content;
        margin: var(--spacing-y-minor) 0;
    }

    section.product.aligner-pdp div.right-section .trustpilot-widget iframe {
        margin-left: -12px;
    }

    section.product.aligner-pdp .right-section h1 {
        line-height: 70px;
        padding: 0;
        margin: var(--spacing-y-major) 0 var(--spacing-y-minor);
    }

    section.product.aligner-pdp .right-section h1.zuume {
        font-size: 85px;
        line-height: 75px;
    }

    section.product.aligner-pdp .right-section p.product-description {
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
        max-width: 70%;
        text-wrap: wrap;
        margin: var(--spacing-y-minor) 0;
    }

    section.product.aligner-pdp .right-section a.cta {
        margin: var(--spacing-y-tiny) 0;
        width: fit-content;
    }

    section.product.aligner-pdp .right-section a.cta svg {
        right: var(--spacing-x-tiny);
    }

    section.product.aligner-pdp .right-section a.cta.one:hover {
        scale: 0.95;
    }

    section.product.aligner-pdp .right-section p.delivery-reminder {
        justify-content: start;
        margin: var(--spacing-y-minor) 0;
    }

    section.product.aligner-pdp .right-section klarna-placement {
        display: block;
        width: 100%;
    }

    section.product.aligner-pdp .right-section klarna-placement::part(osm-message) {
        font-size: 16px;
    }

    section.product.aligner-pdp .right-section klarna-placement::part(osm-cta) {
        font-size: 16px;
    }
}

@media screen and (min-width: 1500px) {
    section.product.aligner-pdp div.left-section {
        flex-direction: row;
        align-items: start;
        padding: 0 0 var(--spacing-y-major) var(--spacing-x-major);
        width: 60%;
    }

    section.product.aligner-pdp .right-section {
        padding: 0 var(--spacing-x-minor) var(--spacing-y-major) var(--spacing-x-major);
        width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/*End styling for Product Info Aligner PDP section (product-info-aligner-info.liquid)*/

/* Styling for video card section (video-card.liquid)*/

section.video-card-section {
    padding: var(--spacing-y-minor) 0;
}

section.video-card-section .video-card {
    margin: 0 var(--spacing-x-minor) var(--spacing-y-minor);
    background: var(--aligner-blue-dark);
    color: white;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

section.video-card-section .video-card .card-overlay {
    background: var(--steps-gradient);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

section.video-card-section .video-card div.text-holder {
    z-index: 2;
    padding: var(--spacing-y-major) var(--spacing-x-tiny) var(--spacing-y-minor);
    text-align: center;
}

section.video-card-section .video-card h2.title {
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
    margin: 0 0 var(--spacing-y-tiny);
}

section.video-card-section .video-card p.desc {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    margin: var(--spacing-y-tiny) 0;
}

section.video-card-section .video-card video {
    max-width: 100%;
    /*-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%);*/
}

section.video-card-section .video-card img {
    max-width: 100%;
}

section.video-card-section a.cta {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: var(--body-grey);
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 90px;
    width: 73.9vw;
    height: 11vw;
    border: 1px solid var(--body-grey);
    max-width: 100%;
    margin: var(--spacing-y-tiny) auto 0;
}

section.video-card-section a.cta.inverse {
    background: var(--body-grey);
    color: white;
}

@media screen and (min-width: 850px) {
    section.video-card-section .video-card {
        flex-direction: row;
        max-height: 600px;
    }

    section.video-card-section .video-card video {
        width: 50%;
    }

    section.video-card-section .video-card div.text-holder {
        width: 50%;
        padding: var(--spacing-y-major) var(--spacing-x-major) var(--spacing-y-minor) var(--spacing-x-major);
        text-align: left;
        text-wrap: balance;
    }

    section.video-card-section .video-card h2.title {
        margin: 0 0 var(--spacing-y-minor);
    }

    section.video-card-section .video-card p.desc {
        margin: 0;
    }
}

/* End styling for video card section (video-card.liquid)*/

/* Styling for frequently asked questions section (faq.liquid)*/

section.faq {
    margin: var(--spacing-y-minor) 0;
}

section.faq h2.title {
    text-align: left;
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    margin: var(--spacing-y-minor) var(--spacing-x-minor) var(--spacing-y-major);
}

section.faq h3.subtitle {
    text-align: left;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    margin-left: var(--spacing-x-minor);
    color: var(--slideout-grey);
}

section.faq .accordion {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--slideout-grey);
    margin: 0 var(--spacing-x-minor);
}

section.faq .accordion .accordion-button {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    border-bottom: 1px solid var(--slideout-grey);
    position: relative;
    flex-grow: 1;
    flex-basis: 0;
    padding: var(--spacing-x-minor) 0 var(--spacing-y-minor) 0;
}

section.faq .accordion .accordion-button.hidden {
    display: none;
}

section.faq .accordion .accordion-button svg.question {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}

span.question {
    padding: 0 var(--spacing-x-minor) 0 var(--spacing-x-major);
    /* text-wrap: pretty; */
    display: block;
}

section.faq .accordion .accordion-button svg.arrowhead {
    transform: rotate(0deg) translate(0px, -25%);
    position: absolute;
    right: 0;
    top: 50%;
    width: 12px;
    transition: 0.5s ease transform;
    height: auto;
}

section.faq .accordion .accordion-button.active svg.arrowhead line {
    /*transform: rotate(-180deg) translate(0px, -25%);*/
}

section.faq .accordion .accordion-button svg.arrowhead line {
    transition:
        transform 0.5s ease,
        stroke-width 0.5s ease;
    stroke-width: 1px;
    transform: none;
    stroke: var(--slideout-grey);
}

section.faq .accordion .accordion-button.active svg.arrowhead line.st1 {
    /* transform: translate(25%, 20%); */
    transform: scale(1.5) translate(4%, 2%);
    stroke-width: 0.75px;
}

section.faq .accordion .accordion-button.active svg.arrowhead line.st0 {
    /* transform: translate(-22%, 20%); */
    /* transform: rotate(5deg); */
    transform: scale(1.5) translate(-43%, 2%);
    stroke-width: 0.75px;
}

section.faq .accordion .accordion-button svg.arrowhead * {
    stroke: var(--body-grey-alt);
}

section.faq .accordion-content {
    overflow: hidden;
    transition:
        padding 0.5s ease,
        max-height 0.5s ease;
    max-height: 0;
    height: 100%;
    font-size: var(--body-small-copy);
}

section.faq .accordion-content div.inside {
    padding: var(--spacing-y-tiny) 0;
}

section.faq a.cta {
    /*font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);*/
    margin: var(--spacing-y-major) var(--spacing-x-minor) var(--spacing-y-major);
}

section.faq a.cta svg {
}

@media screen and (min-width: 850px) {
    section.faq {
        margin: var(--spacing-y-major) 0;
    }

    section.faq h3.subtitle {
        text-align: center;
        margin: 0 var(--spacing-x-minor);
    }

    section.faq h2.title {
        text-align: center;
    }

    section.faq .accordion .accordion-button {
        padding: var(--spacing-y-minor) 0 var(--spacing-y-minor) 0;
    }

    span.question {
        padding: 0 var(--spacing-x-minor) 0 var(--spacing-x-minor);
    }

    section.faq .accordion-content div.inside {
        padding: var(--spacing-y-tiny) var(--spacing-x-minor);
    }

    section.faq .accordion-content div.inside br {
        display: none;
    }

    section.faq a.cta {
        margin: var(--spacing-y-major) auto var(--spacing-y-major);
    }

    section.faq a.cta svg {
    }
}

/* End styling for frequently asked questions section (faq.liquid)*/

/* Styling for the header with text section (header-with-text.liquid) */

section.header-with-text {
    padding: 0 var(--spacing-x-minor);
}

section.header-with-text h1 {
    margin: 0;
    padding: 0;
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    margin: var(--spacing-y-minor) auto;
    text-align: center;
}

section.header-with-text p {
    margin: 0;
    padding: 0;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    margin-bottom: var(--spacing-y-minor);
}

/* End styling for the header with text section (header-with-text.liquid) */

/*Styling for the blog list section (blog-list.liquid)*/

section.blog-list {
}

section.blog-list h1 {
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    text-align: center;
    padding: 0 var(--spacing-x-minor);
}

div.filters {
    display: flex;
    max-width: 100%;
    width: auto;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    margin: var(--spacing-y-minor) var(--spacing-x-minor);
}

button.tagFilter {
    background: none;
    border: none;
    border: 1px solid var(--body-grey);
    border-radius: 30px;
    padding: 5px 20px;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    transition:
        background 0.2s ease,
        color 0.2s ease;
    /* margin: 10px 0; */
    color: var(--body-grey);
}

button.tagFilter.active {
    background: var(--body-grey);
    color: white;
    /* margin: 10px 0; */
}

section.blog-list div.blog-card {
    margin: 0;
    padding: 0;
    margin: var(--spacing-y-minor) var(--spacing-x-minor);
    border-radius: 20px;
    box-shadow: 0px 3px 6px #00000029;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

section.blog-list div.blog-card.hidden {
    display: none;
}

section.blog-list div.blog-card h2.blog-title {
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
    margin: 0;
}

section.blog-list div.blog-card p.date {
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    margin: 0;
    padding: 0;
    padding: var(--spacing-y-tiny) 0;
}

section.blog-list div.blog-card p.preview {
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    margin: 0;
    padding: 0;
    padding: var(--spacing-y-tiny) 0;
}

section.blog-list div.blog-card div.blog-desc {
    padding: var(--spacing-y-minor) var(--spacing-x-minor);
}

section.blog-list div.blog-card img.blog-image {
    max-width: 100%;
    width: 100%;
    height: 55vw;
    object-fit: cover;
}

@media screen and (min-width: 850px) {
    div.filters {
        justify-content: center;
        margin: var(--spacing-y-minor) 0;
    }

    .articles {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: calc(0.5 * var(--spacing-x-tiny));
        grid-row-gap: var(--spacing-y-major);
        margin: 0 var(--spacing-x-tiny);
    }

    section.blog-list div.blog-card div.blog-desc {
        padding: var(--spacing-y-minor) calc(var(--spacing-x-tiny) * 0.5);
    }

    section.blog-list div.blog-card {
        margin: 0;
        justify-content: space-between;
    }

    section.blog-list div.blog-card h2.blog-title {
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
    }

    section.blog-list div.blog-card p.date {
        padding: var(--spacing-y-minor) 0 var(--spacing-y-tiny);
    }

    section.blog-list div.blog-card img.blog-image {
        height: 13vw;
        object-fit: cover;
    }
}

/*End styling for the blog list section (blog-list.liquid)*/

/* Styling for the slideout cart (slideout-cart.liquid)*/

.slideout-cart {
    position: fixed;
    top: calc(var(--header-size) - 1px);
    right: 0;
    width: 90vw;
    height: calc(var(--mobile-height) - (var(--header-size) + 1px));
    z-index: 4;
    background: white;
    transition: right 0.5s ease;
    display: flex;
    flex-direction: column;
}

section.slideout-cart .my-cart {
    max-height: 100%;
    flex-grow: 1;
}

.my-cart__items {
    overflow: scroll;
}

.slideout-cart.closed {
    right: -91vw;
}

.delivery-note {
    text-align: center;
    padding: var(--spacing-y-tiny) 0;
    border-bottom: 1px solid var(--cart-border-grey);
    border-top: 1px solid var(--cart-border-grey);
    background: var(--body-grey-alt-alt);
    font-size: var(--body-small-copy);
    line-height: var(--body-mid-lh);
}

section.slideout-cart h2.title {
    border-bottom: 1px solid var(--cart-border-grey);
    margin: 0;
    padding: var(--spacing-y-tiny) 0;
    text-align: center;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
}

.cart-item {
    display: flex;
    align-items: center;
    margin: 0 var(--spacing-x-minor);
    padding: var(--spacing-y-tiny) 0 var(--spacing-y-minor);
    border-bottom: 0.5px solid var(--cart-border-grey);
}

.cart-img {
    max-width: 30%;
}

.cart-text {
    width: 100%;
    padding-left: var(--spacing-x-tiny);
}

ajax-cart-quantity {
    display: flex;
    align-items: stretch;
}

ajax-cart-quantity a {
    text-decoration: none;
    color: black;
    background: white;
    border: 1px solid var(--cart-border-grey);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    font-size: var(--body-small-copy);
}

ajax-cart-quantity .quantity {
    border: 0;
    text-align: center;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--cart-border-grey);
    border-bottom: 1px solid var(--cart-border-grey);
    font-size: var(--body-small-copy);
}

.cart-item h3.product-title {
    margin: 0;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    text-wrap: balance;
}

.cart-item .product-price {
    margin: 0;
    font-size: var(--body-mid-copy);
    color: var(--whitening-purple-bright);
}

.cart-item a.remove {
    color: var(--remove-button-grey);
    text-decoration: none;
    font-size: var(--body-tiny-copy);
}

.quantity-manager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cart-price {
    display: flex;
    justify-content: space-between;
    margin: var(--spacing-y-tiny) var(--spacing-x-minor);
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
}

div.checkout-area button {
    margin: var(--spacing-y-tiny) var(--spacing-x-minor);
    width: calc(100% - (var(--spacing-x-major)));
    border: none;
    background: none;
    border: 1px solid var(--body-grey);
    border-radius: 30px;
    background: var(--body-grey);
    color: white;
    padding: calc(0.5 * var(--spacing-y-tiny)) 0;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
}

.register-area {
    background: var(--body-grey);
    color: #e5e5e5;
    padding: var(--spacing-y-minor) var(--spacing-x-minor) var(--spacing-y-tiny);
    /*This is a horrid hack, but there is a gap between the footer and the section containing it*/
    /*transform: scale(1.01);*/
}

.register-area input.register-input {
    background: none;
    border: 1px solid white;
    border-radius: 30px;
    width: 100%;
    margin: 0 0 var(--spacing-y-minor);
    padding: 14px 30px;
    display: block;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-copy);
    color: white;
}

.register-area input.register-input::placeholder {
    font-size: var(--body-small-copy);
    line-height: var(--body-small-copy);
    color: white;
    opacity: 0.7;
}

.cart-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.my-cart {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cart-body {
    flex-grow: 1;
    /* This will make it take up all remaining space */
    overflow-y: auto;
    /* To enable scrolling if content exceeds height */
}

.my-cart__items {
    /* No need for height or max-height */
    /* Let it take up remaining space */
    flex-grow: 1;
}

section.slideout-cart .my-cart {
    max-height: 100%;
    flex-grow: 1;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 100%;
}

section.slideout-cart .copyright-notice {
    padding: 0 0 var(--spacing-y-tiny);
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
}

.socials {
    display: flex;
    gap: 14px;
    margin: var(--spacing-y-tiny) 0;
}

div.socials svg {
    max-height: 20px;
    width: auto;
}

.register-area p {
    margin: 0 0 var(--spacing-y-tiny);
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
}

@media screen and (max-width: 415px) {
    .cart-price {
        display: flex;
        justify-content: space-between;
        margin: var(--spacing-y-tiny) var(--spacing-x-minor);
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
    }
}

@media screen and (max-height: 920px) {
    .cart-price {
        display: flex;
        justify-content: space-between;
        margin: var(--spacing-y-tiny) var(--spacing-x-minor);
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
    }

    section.slideout-cart .copyright-notice {
        font-size: var(--body-tiny-copy);
        line-height: var(--body-tiny-lh);
    }

    .register-area p {
        font-size: var(--body-tiny-copy);
        line-height: var(--body-tiny-lh);
    }

    .register-area input.register-input {
        font-size: var(--body-tiny-copy);
        line-height: var(--body-tiny-copy);
    }

    .register-area input.register-input::placeholder {
        font-size: var(--body-tiny-copy);
        line-height: var(--body-tiny-copy);
    }

    .cart-price {
        margin: var(--spacing-y-tiny) var(--spacing-x-minor) 0;
    }
}

@media screen and (min-width: 850px) {
    .slideout-cart {
        width: 30vw;
    }

    .slideout-cart.closed {
        right: -30vw;
    }
}

/* End styling for the slideout cart (slideout-cart.liquid)*/

/* Styling for the signup popup section (signup-popup.liquid)*/

section.signup-popup {
    position: fixed;
    bottom: 0;
    background: white;
    padding: var(--spacing-y-minor) var(--spacing-x-tiny) var(--spacing-y-tiny);
    bottom: var(--spacing-y-minor);
    left: var(--spacing-x-tiny);
    width: calc(100% - var(--spacing-x-minor));
    border-radius: 20px;
    background: #3b3b3bb8;
    backdrop-filter: blur(30px);
    color: white;
    z-index: 2;
    transition:
        1s ease bottom,
        1s ease height;
}

section.signup-popup.closed {
    bottom: -100%;
}

.signup-popup svg.cross {
    position: absolute;
    right: var(--spacing-x-tiny);
    top: var(--spacing-y-tiny);
}

section.signup-popup .title {
    margin: 0;
    text-align: center;
    font-size: 30px;
    line-height: var(--heading-lh);
    font-family: 'Oswald';
    text-wrap: balance;
}

section.signup-popup .title span {
    font-family: 'Oswald';
    font-weight: bold;
}

section.signup-popup .strapline {
    margin: 0;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    padding: calc(var(--spacing-y-tiny) - 5px) 0 var(--spacing-y-tiny);
    text-align: center;
    text-wrap: balance;
}

section.signup-popup form #email,
section.signup-popup form #phone {
    background: none;
    border: 1px solid white;
    border-radius: 30px;
    padding: var(--button-padding) 30px;
    margin: 0 var(--spacing-x-tiny);
    width: calc(100% - var(--spacing-x-minor));
}

section.signup-popup form #email,
section.signup-popup form #email::placeholder,
section.signup-popup form #phone,
section.signup-popup form #phone::placeholder {
    color: white;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
}

section.signup-popup form #email:-internal-autofill-selected,
section.signup-popup form #phone:-internal-autofill-selected {
    color-scheme: dark;
    transition: background-color 5000s ease-in-out 0s;
}

section.signup-popup form {
    position: relative;
}

section.signup-popup form.newsletter_subscribe_form_email button[type='submit'],
section.signup-popup form.newsletter_subscribe_form_phone button[type='submit'] {
    background: none;
    border: none;
    position: absolute;
    right: var(--spacing-x-tiny);
    top: 50%;
    transform: translate(-50%, -50%);
}

section.signup-popup p.disclaimer {
    font-size: 10px;
    margin: 0;
    text-align: center;
    margin-top: var(--spacing-y-tiny);
}

section.signup-popup form.newsletter_subscribe_form_email,
section.signup-popup form.newsletter_subscribe_form_phone,
section.signup-popup .newsletter_subscribe_form_thank_you {
    transition: 1s left ease;
}

section.signup-popup form.newsletter_subscribe_form_phone,
section.signup-popup .newsletter_subscribe_form_thank_you {
    position: absolute;
    left: -100vw;
}

section.signup-popup .newsletter_subscribe_form_thank_you {
    text-align: center;
    margin: 0 0 var(--spacing-y-minor);
    border: 1px solid white;
    padding: 10px 20px;
    background: white;
    color: var(--body-grey);
    border-radius: 30px;
}

section.signup-popup form.newsletter_subscribe_form_email.active,
section.signup-popup form.newsletter_subscribe_form_phone.active,
section.signup-popup .newsletter_subscribe_form_thank_you.active {
    position: relative;
    left: 0;
}

section.signup-popup form.newsletter_subscribe_form_email.complete,
section.signup-popup form.newsletter_subscribe_form_phone.complete {
    position: absolute;
    left: 100vw;
}

@media screen and (min-width: 850px) {
    section.signup-popup {
        --section-width: 25%;
        width: var(--section-width);
        left: calc(50% - (0.5 * var(--section-width)));
        /* --section-width: 30%; */
    }
}

/* End styling for the signup popup section (signup-popup.liquid)*/

/*Styling for add to cart animation*/

form.shopify-product-form button[type='submit'] {
    --background: #362a89;
    --text: #fff;
    --cart: #fff;
    --tick: var(--background);
    position: relative;
    overflow: hidden;
    text-align: center;
    scale: var(--scale);
    transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27), scale .5s ease;
}

form.shopify-product-form button[type='submit']:active {
    --scale: 0.95;
}

form.shopify-product-form button[type='submit'] span {
    /* display: block;
    position: relative;
    transform: translateY(var(--span-y, 0));
    transition: transform 0.7s ease; */
}

form.shopify-product-form button[type='submit'] .cart {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -var(--button-padding) 0 0 -18px;
    transform-origin: 12px 23px;
    transform: rotate(-18deg) translate(-50%, 0);
    left: -10%;
}

form.shopify-product-form button[type='submit'] .cart:before,
form.shopify-product-form button[type='submit'] .cart:after {
    content: '';
    position: absolute;
}

form.shopify-product-form button[type='submit'] .cart:before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--cart);
    bottom: 0;
    left: 9px;
    filter: drop-shadow(11px 0 0 var(--cart));
}

form.shopify-product-form button[type='submit'] .cart:after {
    width: 16px;
    height: 9px;
    background: var(--cart);
    left: 9px;
    bottom: 7px;
    transform-origin: 50% 100%;
    transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0));
    transition: transform 1.2s ease var(--fill-d);
}

form.shopify-product-form button[type='submit'] .cart svg {
    z-index: 1;
    width: 36px;
    height: 26px;
    display: block;
    position: relative;
    fill: none;
    stroke: var(--cart);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

form.shopify-product-form button[type='submit'] .cart svg polyline:last-child {
    stroke: var(--tick);
    stroke-dasharray: 10px;
    stroke-dashoffset: var(--offset, 10px);
    transition: stroke-dashoffset 0.4s ease var(--offset-d);
}

form.shopify-product-form button[type='submit'].loading {
    --scale: 0.95;
    --span-y: -200%;
    --icon-r: 180deg;
    --fill: 1;
    --fill-d: 0.8s;
    --offset: 0;
    --offset-d: 1.73s;
}

form.shopify-product-form button[type='submit'].loading .cart {
    animation: cart 2.5s linear forwards 0.2s;
}

@keyframes cart {
    12.5% {
        transform: rotate(-18deg);
        left: 10%;
    }

    25%,
    75% {
        transform: translate(0%, 0);
        left: 50%;
    }

    50% {
        transform: scale(0.9) translate(0%, 0);
        left: 50%;
    }

    44%,
    56% {
        transform-origin: 12px 23px;
    }

    45%,
    55% {
        transform-origin: 50% 50%;
    }

    87.5% {
        transform: rotate(-18deg);
        left: 55%;
    }

    95%,
    100% {
        transform: rotate(-18deg) translate(50%, 0);
        left: 100%;
    }
}

.quantity-picker {
    position: relative;
    margin: 0;
}

.quantity-picker span.minus {
    position: absolute;
    left: var(--spacing-x-minor);
    user-select: none;
}

.quantity-picker span.plus {
    position: absolute;
    right: var(--spacing-x-minor);
    user-select: none;
}

@media screen and (min-width: 850px) {
    section.product div.add-to-cart-section {
        display: flex;
        margin: 0;
        gap: var(--spacing-y-tiny);
        flex-direction: column;
        align-items: stretch;
    }

    section.product .add-to-cart-section .quantity-picker {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-x-tiny);
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
        height: 100%;
    }
}

/*End styling for add to cart animation (add-to-cart-button.liquid)*/

/* Styling for the product collections page (product-list.liquid)*/

section.signup-popup-with-image {
    position: fixed;
    left: var(--spacing-x-minor);
    width: calc(100% - var(--spacing-x-major));
    top: calc(var(--header-size) + var(--spacing-y-minor) * 1.5);
    height: calc(100% - var(--spacing-y-major) * 1.5 - var(--header-size));
    background: red;
    z-index: 2;
    transition: 1s ease left;
    background: white;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

section.signup-popup-with-image.closed {
    left: 101vw;
}

section.signup-popup-with-image svg.cross {
    position: absolute;
    right: var(--spacing-x-minor);
    top: var(--spacing-y-minor);
    width: 15px;
    height: auto;
    stroke: black;
}

section.signup-popup-with-image svg.cross * {
    stroke: black;
}

section.signup-popup-with-image h2.title {
    font-family: 'Oswald';
    font-size: 42px;
    font-weight: 400;
    margin: var(--spacing-y-minor) var(--spacing-x-tiny) 0;
    line-height: 46px;
    text-align: center;
    color: var(--slideout-grey);
}

section.signup-popup-with-image h2.title span {
    font-family: 'Oswald';
    font-size: 42px;
    font-weight: bold;
    margin: var(--spacing-y-minor) var(--spacing-x-tiny) 0;
    line-height: 46px;
    text-align: center;
    color: var(--body-grey);
}

section.signup-popup-with-image p.strapline {
    text-align: center;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    margin: var(--spacing-y-minor) 0;
}

section.signup-popup-with-image form.newsletter_subscribe_form_email input#email {
    width: calc(100% - var(--spacing-x-major));
    margin: 000000000000000000000 var(--spacing-x-minor) 0;
    padding: var(--button-padding) 0;
    text-align: center;
    border-radius: 30px;
    border: 1px solid var(--body-grey);
    color: var(--body-grey);
}

section.signup-popup-with-image form.newsletter_subscribe_form_email input#email:placeholder {
    text-align: center;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
}

section.signup-popup-with-image form.newsletter_subscribe_form_email button[type='submit'] {
    width: calc(100% - var(--spacing-x-major));
    margin: var(--spacing-y-tiny) var(--spacing-x-minor);
    padding: var(--button-padding) 0;
    text-align: center;
    border-radius: 30px;
    border: 1px solid var(--body-grey);
    background: var(--body-grey);
    color: white;
}

section.signup-popup-with-image p.disclaimer {
    margin: 0 0 var(--spacing-y-tiny);
    text-align: center;
    font-size: var(--body-tiny-copy);
}

section.signup-popup-with-image img {
    flex: 1;
    object-fit: cover;
}

@media screen and (max-height: 750px) {
    section.signup-popup-with-image p.strapline {
        margin: var(--spacing-y-tiny) 0;
        text-wrap: balance;
    }

    section.signup-popup-with-image h2.title {
        font-size: 32px;
        line-height: 36px;
        text-wrap: balance;
    }

    section.signup-popup-with-image h2.title span {
        font-size: 32px;
        line-height: 36px;
    }
}

@media screen and (min-width: 850px) {
    section.signup-popup-with-image {
        --section-width: 30%;
        width: var(--section-width);
        left: calc((100% - var(--section-width)) / 2);
    }

    section.signup-popup-with-image p.strapline {
        margin: var(--spacing-y-tiny) 0;
        text-wrap: balance;
        padding: 0 var(--spacing-x-tiny);
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
    }
}

/*End styling for the popup with image (signup-popup-with-image.liquid)*/

/* Styling for a single blog post (blog-post.liquid)*/

section.blog-post {
    padding: 0 var(--spacing-x-minor);
}

section.blog-post h1 {
    margin: var(--spacing-y-minor) 0 var(--spacing-y-tiny);
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    text-align: center;
}

section.blog-post .date-and-length {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    margin: var(--spacing-y-tiny) 0;
    padding: 0;
}

section.blog-post img.blog-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: 30px;
}

section.blog-post a.cta.one {
    margin: var(--spacing-y-minor) auto;
    /* background: var(--body-grey);
    border: none;
    border-radius: 100px;
    padding: var(--spacing-y-tiny) 0;
    color: white;
    font-size: var(--body-mid-copy);
    text-decoration: none;
    display: block;
    text-align: center;*/
}

.previous-and-next-blogs {
    display: flex;
    justify-content: space-between;
    margin: var(--spacing-y-minor) 0;
}

.previous-and-next-blogs a {
    text-decoration: none;
}

.previous-and-next-blogs p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    color: var(--slideout-grey);
    text-decoration: none;
}

.previous-and-next-blogs p.next svg.arrow-in-circle {
    transform: rotate(180deg);
}

.previous-and-next-blogs p.next svg.arrow-in-circle * {
    stroke: var(--slideout-grey);
}

/* End styling for a single blog post (blog-post.liquid)*/

/*Styling for the daily care collections page (product-list.liquid)*/

section.product-list h1 {
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    text-align: center;
    text-wrap: balance;
    margin: var(--spacing-y-major) var(--spacing-x-minor);
}

section.product-list button.tagFilter {
    background: none;
    border: none;
    border: 1px solid var(--body-grey);
    border-radius: 30px;
    padding: 10px 10px;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    transition:
        background 0.2s ease,
        color 0.2s ease;
    /* margin: 10px 0; */
    color: var(--body-grey);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

section.product-list button.tagFilter svg.radio .fill {
    fill: #00000000;
    transition: fill 0.5s ease;
}

section.product-list button.tagFilter.active svg.radio .fill {
    fill: var(--daily-care-green-bright);
}

section.product-list .product-card {
    background: var(--product-card-grey);
    /*margin: var(--spacing-y-minor) var(--spacing-x);*/
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 92%;
    max-width: 100%;
    border-radius: 20px;
    padding: var(--spacing-y-major) var(--spacing-y-minor) var(--spacing-y-tiny);
    margin-bottom: 30px;
}

section.product-list .product-card {
    background: var(--product-card-grey);
    margin: var(--spacing-y-minor) var(--spacing-x);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    max-width: 100%;
    border-radius: 20px;
    padding: var(--spacing-y-major) var(--spacing-y-minor) var(--spacing-y-minor);
    margin-bottom: 30px;
}

section.product-list .product-card.hidden {
    display: none;
}

.glide__slides 0 vpacing-y-minor {
    text-wrap: wrap !important;
}

section.product-list .product-card .img-holder {
    height: 73vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 var(--spacing-y-major);
}

section.product-list .product-card img {
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

section.product-list .product-card h3 {
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
    margin: 0;
    padding: 0;
    color: var(--body-grey);
    padding-bottom: var(--spacing-y-tiny);
    font-weight: 400;
    text-wrap: wrap;
    word-wrap: break-word;
    max-width: 100%;
    white-space: pre-line;
}

section.product-list .product-card .review-section {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-y-tiny);
    padding-bottom: var(--spacing-y-tiny);
    text-wrap: wrap;
}

section.product-list .product-card .reviews_text {
    margin: 0;
}

section.product-list .product-card .pricing {
    margin: 0;
    padding: 0;
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
    color: var(--body-grey);
    padding-bottom: var(--spacing-y-tiny);
}

section.product-list .product-card .description {
    margin: 0;
    padding: 0;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: var(--product-card-desc-grey);
    padding-bottom: var(--spacing-y-minor);
    text-align: left;
    text-wrap: wrap;
    word-wrap: break-word;
    /* For Firefox/Safari */
    word-break: break-word;
}

section.product-list .product-card .cta {
    margin: 0;
    padding: var(--button-padding) 0;
    text-decoration: none;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: white;
    background: var(--body-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 90px;
    width: 73.9vw;
    height: auto;
    border: 1px solid var(--body-grey);
    max-width: 100%;
    margin: var(--spacing-y-tiny) 0;
    transition: scale ease 0.5s;
}

section.product-list .cta.inverse {
    color: var(--body-grey);
    background: none;
}

section.product-list .product-card .review-section {
}

section.product-list .stars {
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

section.product-list .stars * {
    fill: var(--daily-care-green-bright);
    stroke: none;
}

section.product-list .product-card ajax-cart-product-form {
    width: 100%;
}

section.product-list .product-card ajax-cart-product-form button[type='submit'] {
    width: 100%;
    margin: 0;
}

section.product-list button.cta.one {
    background: var(--body-grey);
    color: white;
    padding: var(--button-padding) 0;
    font-size: var(--body-mid-copy);
    border-radius: 30px;
    transition: scale 0.5s ease;
    line-height: var(--body-mid-lh);
}

@media screen and (min-width: 850px) {
    section.product-list button.cta.one:hover {
        scale: 0.95;
    }

    section.product-list button.cta.one:active {
        scale: 0.9;
    }

    section.product-list div.filters {
        justify-content: center;
        margin: var(--spacing-y-minor) var(--spacing-x-major);
        gap: var(--spacing-x-tiny);
    }

    section.product-list button.tagFilter {
        width: fit-content;
    }

    section.product-list div.products {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--spacing-x-tiny);
        row-gap: var(--spacing-y-major);
        max-width: 100%;
        place-items: center;
        padding: var(--spacing-y-major) var(--spacing-x-major);
        box-sizing: content-box;
    }

    section.product-list div.products .product-card {
        margin: var(--spacing--tiny) var(--spacing-x-tiny);
        max-width: 20vw;
        box-sizing: content-box;
    }

    section.product-list div.products .product-card .img-holder {
        height: 25vh;
    }
}

/* End styling for the product collections page (product-list.liquid)*/

/* Styling for the contact form */
section.contact {
    margin: var(--spacing-y-minor) 0;
}

section.contact h1.title {
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    text-align: center;
    margin: 0 var(--spacing-x-major);
}

section.contact p.strapline {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    text-align: center;
    margin: var(--spacing-y-minor) var(--spacing-x-major);
}

section.contact form.contact-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-y-tiny);
    padding: 0 var(--spacing-x-minor);
}

section.contact form.contact-page .name-section {
    display: flex;
    gap: var(--spacing-x-tiny);
}

section.contact form.contact-page input,
section.contact form.contact-page textarea {
    width: 100%;
    padding: var(--button-padding) var(--spacing-x-minor);
    border-radius: 30px;
    border: 1px solid var(--body-grey-alt);
    color: var(--body-grey-alt);
    resize: none;
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
}

section.contact form.contact-page input:placeholder {
    color: var(--body-grey-alt);
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
}

section.contact form.contact-page textarea {
    padding: var(--button-padding) var(--spacing-x-minor);
}

section.contact form.contact-page button.cta.one {
    margin: 0;
    width: 100%;
}

section.contact ul {
    list-style-type: none;
}

section.contact ul li {
    padding: calc(var(--spacing-y-minor) * 0.75) 0;
    position: relative;
}

section.contact ul li svg.question {
    position: absolute;
    top: calc(var(--spacing-y-minor) * 0.75 - (var(--body-small-lh) / 2));
    left: 0;
    transform: translate(0, 10%);
}

section.contact ul li p {
    margin: 0;
    margin-left: var(--spacing-x-major);
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
}

/* The styling for the list item bullets has to be done within a liquid file*/

/* End styling for the contact form */

/* Styling for the floating infograph section (floating-infograph.liquid)*/

section.floating-infograph {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-direction: column-reverse;
    --scale: 1.24;
}

section.floating-infograph .image-holder {
    width: 100%;
    z-index: 0;
    display: flex;
    align-items: center;
}

section.floating-infograph img.background {
    width: 100%;
    max-height: var(--mobile-image-height);
    object-fit: cover;
}

section.floating-infograph .infograph {
    background: var(--infograph-grey);
    padding: 0 var(--spacing-x-minor);
    width: 100%;
    z-index: 1;
}

section.floating-infograph .infograph .trustpilot-widget {
    margin: calc(1.4 * var(--spacing-y-minor)) 0 calc(-1 * var(--spacing-y-minor));
}

section.floating-infograph .infograph h2 {
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    margin: calc(1 * var(--spacing-y-major)) 0;
}

section.floating-infograph .infograph .icon-with-text {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: var(--spacing-y-minor) 0;
}

section.floating-infograph .infograph .icon-with-text img.icon {
    width: 50px;
}

section.floating-infograph .infograph .icon-with-text svg {
    width: 70px;
    height: auto;
    flex: 1 0 auto;
}

section.floating-infograph .infograph p.text {
    margin: 0;
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
}

/*section.floating-infograph .infograph p.text::first-line {
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
}*/

section.floating-infograph .infograph a.cta {
    /*position: relative;
    background: var(--aligner-blue-standard);
    color: white;
    padding: var(--button-padding) 0;
    border-radius: 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: scale 0.5s ease;
    width: fit-content;
    width: 100%;*/
    margin: var(--spacing-y-major) auto;
    /*font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);*/
}

section.floating-infograph .infograph a.cta svg.right-arrow {
    /*position: absolute;
    right: var(--spacing-x-minor);*/
}

section.floating-infograph .infograph p.delivery-reminder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--body-tiny-copy);
    line-height: var(--body-tiny-lh);
    margin: var(--spacing-y-major) 0;
    color: var(--body-grey);
}

section.floating-infograph .infograph svg.present {
    max-width: 30px;
}

@media screen and (min-width: 850px) {
    section.floating-infograph {
        margin: var(--spacing-y-major) var(--spacing-x-major);
        flex-direction: row;
        --flipped: 1;
    }

    section.floating-infograph.flipped {
        flex-direction: row-reverse;
        --flipped: -1;
    }

    section.floating-infograph .image-holder {
        width: 50%;
        z-index: 0;
        aspect-ratio: 1 / var(--scale);
        display: flex;
        align-items: center;
    }

    section.floating-infograph img.background {
        aspect-ratio: 1/1;
        width: 100%;
        object-fit: cover;
        transform: scale(var(--scale)) translate(calc(var(--flipped) * 50% * (var(--scale) - 1)), 0);
        border-radius: 20px;
        max-height: none;
    }

    section.floating-infograph .infograph {
        background: var(--infograph-grey);
        padding: 0 var(--spacing-x-tiny);
        border-radius: 20px;
        width: 50%;
        z-index: 1;
    }

    section.floating-infograph .infograph .trustpilot-widget {
        margin: var(--spacing-y-major) 0 var(--spacing-y-minor);
    }

    section.floating-infograph .infograph h2 {
        font-size: var(--heading-copy);
        line-height: var(--heading-lh);
        margin: var(--spacing-y-minor) 0;
    }

    section.floating-infograph .infograph .icon-with-text {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: var(--spacing-y-minor) 0;
    }

    section.floating-infograph .infograph .icon-with-text img.icon {
        width: 50px;
    }

    section.floating-infograph .infograph .icon-with-text svg {
        max-width: 66px;
        flex: 1 0 auto;
    }

    section.floating-infograph .infograph p.text {
        margin: 0;
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
    }

    /*section.floating-infograph .infograph p.text::first-line {
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
    }*/

    section.floating-infograph .infograph a.cta {
        margin: var(--spacing-y-minor) 0 var(--spacing-y-major);
    }

    section.floating-infograph .infograph p.delivery-reminder {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 10px;
        font-size: var(--body-tiny-copy);
        line-height: var(--body-tiny-lh);
        margin: var(--spacing-y-major) 0;
        color: var(--body-grey);
    }

    section.floating-infograph .infograph svg.present {
        max-width: 50px;
    }

    section.floating-infograph .infograph > :first-child {
        margin-top: var(--spacing-y-major);
    }
}

/* End styling for the floating infograph section (floating-infograph.liquid)*/

/* Styling for the flex section (flex-section.liquid) */
section.flex-section {
    border-top: 1px solid #ffffffff;
    background: var(--infograph-grey);
}

section.flex-section div.background {
    background: var(--infograph-grey);
    padding: 0 var(--spacing-x-minor);
}

section.flex-section h2.title {
    text-align: left;
    margin: var(--spacing-y-major) 0 var(--spacing-y-minor);
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
}

section.flex-section div.background > p.strapline {
    text-align: left;
    margin: var(--spacing-y-minor) 0 var(--spacing-y-major);
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
}

section.flex-section div.flex-area {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: var(--spacing-y-tiny);
}

section.flex-section div.flex-area .step-card {
    display: flex;
    align-items: center;
    flex-direction: row;
}

section.flex-section div.flex-area .step-card img.icon {
    min-width: 50px;
}

section.flex-section div.flex-area .step-card svg {
    width: 70px;
    height: auto;
    flex: 1 0 auto;
}

section.flex-section div.flex-area .step-card svg.aligner {
    /*transform: translate(10%, 0) rotate(225deg);*/
}

section.flex-section div.flex-area .step-card svg.phone {
    width: 70px;
    transform: scale(1.15);
}

section.flex-section div.flex-area .step-card svg.phone {
    width: 70px;
    /*transform: scale(1.15);*/
    transform: scale(0.95);
}

section.flex-section div.flex-area .step-card svg path {
    fill: var(--body-grey);
}

section.flex-section div.flex-area .step-card .text {
    padding: 0px 0 0 var(--spacing-x-tiny);
}

section.flex-section div.flex-area .step-card p.step-number {
    margin: 0;
    font-size: var(--body-tiny-copy);
    line-height: var(--body-tiny-lh);
    color: var(--body-grey);
    display: none;
}

section.flex-section div.flex-area .step-card h3.title {
    margin: 0 0 calc(0.5 * var(--spacing-y-tiny));
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
    color: var(--body-grey);
}

section.flex-section div.flex-area .step-card .text p.desc {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    color: var(--body-grey);
    margin: calc(0.5 * var(--spacing-y-tiny)) 0;
}

section.flex-section div.flex-area .step-card:last-child .text p.desc {
    margin: 0;
}

section.flex-section a.cta {
    /*font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);*/
    margin: var(--spacing-y-major) var(--spacing-x-minor);
    /*--horizontal-margin: var(--spacing-x-minor);
    width: calc(100% - 2 * var(--horizontal-margin));
    align-items: center;
    display: flex;
    color: white;
    text-decoration: none;
    gap: 10px;
    border-radius: 30px;
    transition: ease 0.5s scale;
    justify-content: center;
    position: relative;*/
}

section.flex-section a.cta svg.right-arrow {
    /*position: absolute;
    right: var(--spacing-x-minor);
    top: 50%;
    transform: translate(0, -50%);*/
}

section.flex-section img.context-image {
    width: 100%;
    height: var(--mobile-image-height);
    display: block;
    object-fit: cover;
}

@media screen and (min-width: 850px) {
    section.flex-section {
        background: white;
        padding: 1px 0;
    }

    section.flex-section div.background {
        padding: var(--spacing-y-major) var(--spacing-x-minor);
        margin: 0 var(--spacing-x-major);
        border-radius: 30px;
    }

    section.flex-section div.background {
        padding-top: var(--spacing-y-major);
    }

    section.flex-section div.background > :first-child {
        margin-top: 0;
    }

    section.flex-section div.background > p.strapline {
        text-align: center;
        margin: var(--spacing-y-major) 0;
    }

    section.flex-section div.flex-area {
        flex-direction: row;
    }

    section.flex-section div.flex-area .step-card {
        flex-direction: column;
        align-items: center;
        flex: 1;
    }

    section.flex-section div.flex-area .step-card .text {
        text-align: center;
        padding: var(--spacing-y-minor) 0;
    }

    section.flex-section div.flex-area .step-card img.icon {
        min-width: auto;
    }

    section.flex-section div.flex-area .step-card svg {
        width: 76px;
    }

    section.flex-section div.flex-area .step-card svg.phone {
        width: 76px;
        /*transform: scale(1.15);*/
    }

    section.flex-section h2.title {
        text-align: center;
    }

    section.flex-section div.flex-area .step-card .text p.desc {
        font-size: var(--body-tiny-copy);
        line-height: var(--body-tiny-lh);
        text-wrap: balance;
    }

    section.flex-section a.cta {
        margin: var(--spacing-y-major) auto;
    }

    section.flex-section a.cta svg.right-arrow {
        /*right: var(--spacing-x-tiny);*/
    }
}
/* End styling for the flex section (flex-section.liquid) */

/* Styling for the aligner grid section (aligner-table.liquid)*/

section.grid {
    margin: var(--spacing-y-major) 0;
}

section.grid h2 {
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    text-align: center;
    margin: var(--spacing-y-major) 0;
}

section.grid .grid-container {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    grid-gap: 0 10px;
    padding: 0 var(--spacing-x-minor);
}

section.grid .grid-item {
    background-color: var(--infograph-grey);
    border-bottom: 1px solid #dedede;
    padding: var(--spacing-y-minor) 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

section.grid .grid-container .grid-item:nth-child(3n + 1) {
    /* Selects the first column */
    background: none;
    border: none;
    border-bottom: 1px solid var(--slideout-grey);
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
    text-align: left;
    text-wrap: balance;
}

section.grid .grid-container .grid-item:nth-child(n + 2):nth-child(-n + 3) {
    /* Selects the second and third items of the top row*/
    border-radius: 20px 20px 0 0px;
}

section.grid .grid-container .grid-item:nth-last-child(-n + 2) {
    /* Selects the second and third items of the last row*/
    border-radius: 0 0 20px 20px;
    border: none;
}

section.grid .grid-container .grid-item:nth-child(1) {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    letter-spacing: 3px;
    place-content: start;
}

section.grid .grid-container img.logo.mobile-only {
    max-width: 60%;
}

section.grid .grid-container .grid-item:nth-child(3) {
    font-size: var(--body-small-copy);
    line-height: var(--body-small-lh);
}

section.grid .grid-container .grid-item:nth-child(3n + 1) svg {
    display: none;
}

section.grid svg.cross {
    height: auto;
    width: 20px;
}

section.grid svg.cross * {
    stroke: var(--slideout-grey);
    stroke-width: 1.8px;
}

section.grid svg.tick {
}

section.grid svg.tick * {
    stroke: var(--body-grey);
}

section.grid a.cta {
    margin: var(--spacing-y-major) var(--spacing-x-minor);
    width: auto;
}

@media screen and (min-width: 850px) {
    section.grid .grid-container {
        padding: 0;
        margin: 0 var(--spacing-x-major);
        grid-template-columns: 2fr 1fr 1fr;
    }

    section.grid .grid-container .grid-item:nth-child(3n + 1) {
        place-content: flex-start;
    }

    section.grid .grid-container .grid-item img.logo {
        width: 60%;
    }

    section.grid .grid-container .grid-item:nth-child(3n + 1) svg {
        display: block;
        width: 56px;
        height: auto;
        margin-right: 20px;
    }

    section.grid .grid-container .grid-item:nth-child(3n + 1) svg * {
        stroke: var(--body-grey);
    }

    section.grid .grid-container .grid-item svg {
        width: 15%;
        height: auto;
    }

    section.grid .grid-container .grid-item svg.cross {
        width: 12%;
    }

    section.grid .grid-container .grid-item svg * {
        stroke-width: 2px;
    }

    section.grid .grid-container .grid-item svg.cross * {
        stroke-width: 1px;
    }

    section.grid a.cta {
        width: fit-content;
        margin: var(--spacing-y-major) auto;
    }
}

@media screen and (min-width: 1500px) {
    section.grid .grid-container .grid-item svg {
        width: 10%;
    }

    section.grid .grid-container .grid-item svg.cross {
        width: 7%;
    }
}

/* End styling for the aligner grid section (aligner-table.liquid)*/

/* Styling for the pricing section */

section.pricing {
}

section.pricing div.infograph {
    background: var(--infograph-grey);
    padding: 0.1px 0 var(--spacing-y-major);
}

section.pricing h2.title {
    font-size: var(--heading-copy);
    line-height: var(--heading-lh);
    text-align: center;
    margin: var(--spacing-y-major) 0;
}

section.pricing .icon-holder {
    position: relative;
    width: fit-content;
    margin: var(--spacing-y-minor) auto 0;
    height: fit-content;
}

section.pricing svg.aligner {
    width: 75px;
    height: auto;
}

section.pricing svg.aligner .cls-2 {
    fill: var(--body-grey);
}
section.pricing svg.aligner .cls-1 {
    stroke: var(--body-grey);
    stroke-width: 1px;
}

section.pricing svg.tally {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(70%, 20%);
    width: 33%;
    height: auto;
}

section.pricing .text-holder {
    margin-top: calc(var(--spacing-y-tiny) * 0.5);
}

section.pricing .text-holder p {
    font-size: var(--body-mid-copy);
    line-height: var(--body-mid-lh);
    margin: 0 var(--spacing-x-tiny);
    text-align: center;
}

section.pricing p strong {
    font-size: var(--body-big-copy);
    line-height: var(--body-big-lh);
}

section.pricing a.cta {
    margin: var(--spacing-y-major) var(--spacing-x-minor) 0;
}

@media screen and (min-width: 850px) {
    section.pricing {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        flex-direction: row;
        --scale: 1.14;
        margin: 0 var(--spacing-x-major);
    }

    section.pricing .image-holder {
        width: 50%;
    }

    section.pricing img.background {
        /* max-width: 100%; */
        width: 100%;
        height: 100%;
        border-radius: 30px 0px 0 30px;
        display: block;
    }

    section.pricing div.infograph {
        z-index: 1;
        padding: var(--spacing-y-major) var(--spacing-x-minor);
        border-radius: 30px;
        width: 50%;
        border-radius: 0 30px 30px 0px;
    }

    section.pricing div.infograph h2.title {
        text-align: left;
        margin: var(--spacing-y-minor) 0;
    }

    section.pricing div.infograph .line {
        display: flex;
        margin-bottom: var(--spacing-y-minor);
    }

    section.pricing .icon-holder {
        margin: 0;
        align-self: start;
    }

    section.pricing .text-holder p {
        font-size: var(--body-small-copy);
        line-height: var(--body-small-lh);
        text-align: left;
    }

    section.pricing p strong {
        font-size: var(--body-mid-copy);
        line-height: var(--body-mid-lh);
    }

    section.pricing a.cta {
        margin: var(--spacing-y-minor) 0 0;
    }

    section.pricing div.infograph > :first-child {
        margin-top: 0 !important;
    }
}

/* End styling for the pricing section */

/* Styling for the confirmation page headers */

section.confirmation-hero {
    display: flex;
    flex-direction: column-reverse;

    & div.information {
        padding: var(--spacing-y-minor) var(--spacing-x-tiny);

        & .trustpilot-widget.mobile-only {
            width: fit-content;
            & iframe {
                margin-left: -10px;
            }
        }

        & h1 {
            font-family: 'Zuume';
            font-weight: 700;
            font-size: 50px;
            line-height: 45px;
            text-wrap: balance;
            margin: var(--spacing-y-minor) 0;
        }

        & div.flex-area {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            gap: var(--spacing-y-tiny);

            & .step-card {
                display: flex;
                align-items: center;
                flex-direction: row;

                & svg {
                    width: 70px;
                    height: auto;
                    flex: 1 0 auto;
                }

                & svg.phone {
                }

                & .text {
                    padding: 0px 0 0 var(--spacing-x-tiny);

                    & p.step-number {
                        margin: 0;
                        font-size: var(--body-tiny-copy);
                        line-height: var(--body-tiny-lh);
                        color: var(--body-grey);
                        display: none;
                    }

                    & h3.title {
                        margin: 0 0 calc(0.5 * var(--spacing-y-tiny));
                        font-size: var(--body-big-copy);
                        line-height: var(--body-big-lh);
                        color: var(--body-grey);
                    }

                    & p.desc {
                        font-size: var(--body-mid-copy);
                        line-height: var(--body-mid-lh);
                        color: var(--body-grey);
                        margin: calc(0.5 * var(--spacing-y-tiny)) 0;
                    }
                }
            }
        }
    }

    & div.story-carousel {
        & .glide__track {
            position: relative;

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            & .glide__slides > * {
                opacity: 0 !important;
                transition: opacity 1s ease !important; /* Adjust transition duration if needed */
            }

            & .glide__slides .glide__slide--active {
                opacity: 1 !important;
            }
        }

        & .indicators {
            position: absolute;
            display: flex;
            width: 100%;
            height: fit-content;
            background: none;
            top: 0;
            align-items: end;
            padding: 20px 10px;
            justify-content: space-between;
            gap: 4px;

            & .indicator {
                background: #ffffff3f;
                width: 100%;
                height: 3px;
                border-radius: 20px;
                opacity: 1;
                position: relative;
                overflow: hidden;
            }

            & .indicator.active {
            }

            & .indicator.finished {
                background: white;
            }

            & .indicator.active::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 100%;
                background-color: rgba(255, 255, 255, 1); /* White with 50% opacity */
                animation: fillAnimation 10s linear forwards; /* Needs to be the same as the autoplay value in the glidejs carousel */
            }
        }
    }
}

@keyframes fillAnimation {
    100% {
        width: 100%;
    }
}

@media screen and (min-width: 850px) {
    section.confirmation-hero {
        flex-direction: row;
        align-items: center;
        padding: var(--spacing-y-major) var(--spacing-x-minor);

        & div.information {
            width: 50%;

            & h1 {
                font-family: 'Zuume';
                font-weight: 700;
                font-size: 85px;
                line-height: 75px;
                text-wrap: balance;
                margin: var(--spacing-y-minor) 0;
            }
        }

        & div.story-carousel {
            max-width: 30%;
            max-height: 100vh;
            overflow: hidden;
            border-radius: 20px;
            margin: 0 auto;
            height: 70vh;
            width: 100%;

            & * {
                height: 100%;
            }

            & .indicators {
                padding: 20px var(--spacing-x-tiny);
                gap: var(--spacing-x-tiny);
            }
        }
    }
}
/* End styling for the confirmation page headers */

/* Custom dermatica page styling*/

svg.hamburger {
    display: block;
}

a.cta {
    border-radius: 0 !important;
    padding-left: 30px;
    padding-right: 30px;
}

.desktop_slider,
.landing-sd-3-container {
    overflow: hidden;
}

.flickity-prev-next-button.previous {
    left: 2%;
    position: absolute;
    top: 50%;
}

.flickity-prev-next-button.next {
    right: 2%;
    position: absolute;
    top: 50%;
}

span.custom_review_text {
    font-size: 12px;
}

h1 {
    font-weight: 500;
}
h2,
h3 {
    font-weight: 500;
}

@media screen and (max-width: 850px) {
    a.cta {
        width: 100%;
    }

    a.cta + p {
        margin: 0 auto;
    }

    .landing-sd-3-container.landing-container .lannding-button-sd-3-inner-row {
        padding-right: 20px;
        padding-left: 20px;
    }

    .desktop_slider,
    .landing-sd-3-container {
        max-width: 100%;
    }
    .announcement-bar a {
       font-size: 17px !important;
        padding-left:10px;
        padding-right: 10px; 
        display: block;
        margin: 0 auto;
        max-width: 270px;
    }
}
@media screen and (max-width: 750px) {
.announcement-bar {
    height: 40px !important;
    /* height: 61px !important; */
}
}
@media screen and (max-width: 405px) {
    .landing-hero-section-sd-3-column-content--body {
        padding: 20px 20px !important;
    }

    .landing-hero-section-sd-3-column-content-trust {
        gap: 5px !important;
    }
}

@media screen and (max-width: 390px) {
    .landing-hero-section-sd-3-column-content-trust .star_icon_box svg {
        width: 100px;
    }
}

@media screen and (max-width: 378px) {
    .landing-hero-section-sd-3-column-content-trust .star_icon_box svg {
        width: 80px;
    }
}

@media screen and (max-width: 368px) {
    .landing-hero-section-sd-3-column-content--body {
        padding: 40px 20px !important;
    }

    .landing-hero-section-sd-3-column-content-trust {
        gap: 5px !important;
    }

    span.custom_review_text {
        font-size: 11px;
    }

    .landing-hero-section-sd-3-column-content-trust .star_icon_box svg {
        width: 80px;
    }
}

@media screen and (max-width: 368px) {
    .landing-hero-section-sd-3-column-content-trust p {
        font-size: 12px;
    }
}


/*End custom dermatica page styling*/

  section.dentist-locator.aligners-locator{
    border-radius: 0px !important;
}
section.dentist-locator.aligners-locator iframe h1{
      font-family: 'TWK Everett' !important;
      font-weight: 500 !important;
      color: black !important;
}

@media(min-width: 850px){
  section.dentist-locator.aligners-locator{
    border-radius: 0px !important;
}
}


.calendly-popup-close{
  display: none;
}

.calendly-inline-widget html{
  overflow: hidden !important;
}
.header-button .customer-results-sd-3-bottom-row{
  margin-top: 0px;
  margin-left: 20px;
}

.new-p2{
  font-size: 22px !important;
  line-height: 24px !important;
}
@media(max-width: 768px){
  .new-p2{
  font-size: 19px !important;
  line-height: 22px !important;
}
}


/* Font Names */

/* .proxima-100{
  font-family: 'Proxima Nova Thin' !important;
}
.proxima-300{
  font-family: 'Proxima Nova Light' !important;
}
.proxima-400{
   font-family: 'Proxima Nova Regular' !important;
}
.proxima-500{
   font-family: 'Proxima Nova Medium' !important;
}
.proxima-600{
      font-family: 'Proxima Nova Semi Bold' !important;
}
.proxima-700{
 font-family: 'Proxima Nova Bold' !important;
}
.proxima-800{
 font-family: 'Proxima Nova Extra Bold' !important;
}
.proxima-900{
    font-family: 'Proxima Nova Black' !important;
}
 */
h1,h2,h3,h4{
   /* font-family: 'Proxima Nova Black' !important; */
   font-family: 'proxima-nova' !important;
   font-weight: 900;
}
a{
     /* font-family: 'Proxima Nova Semi Bold' !important; */
     font-family: 'proxima-nova' !important;
     font-weight: 600;
}
p,span{
   /* font-family: 'Proxima Nova Regular' !important; */
   font-family: 'proxima-nova' !important;
   font-weight: normal !important;
}
.announcement-bar-link{
  /* font-family: 'Proxima Nova Regular' !important */
  font-family: 'proxima-nova' !important;
  font-weight: normal;
}
.announcement-bar-link strong{
  font-family: 'Proxima Nova Bold' !important;
  font-family: "proxima-nova" !important;
  font-weight: bold;
  color: #fff;
}

section.slideout-menu .sub-menu.shown {     max-height: none; }

@media(max-width: 576px){
  .sw-logo{
    width: 40.4vw;
    height: auto;
}
}


/* .sub-menu{
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease; 
}
.navArrow:hover .sub-menu{
  max-height: fit-content;
} */

.hide-cta-text {
  display: none;
}
.whitening-product-pro-teeth-whitening .customer-results-sd-3-bottom-row a.cta{
  background: var(--whitening-purple-bright) !important;
  border: 1px solid var(--whitening-purple-bright) !important;
}
.whitening-product-pro-teeth-whitening .submit-button{
  background: var(--whitening-purple-bright) !important;
 
}